Merge branch 'develop' of http://39.106.31.193:9211/xiepufeng/jihe-hs into develop

ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/components/FormInput.vue

@@ -33,6 +33,22 @@ export default {
         color: #fff;
       }
     }
+
+    .el-textarea__inner {
+      background: #0A3E54;
+      border-radius: 5px;
+      opacity: 1;
+      border: 1px solid rgba(98, 224, 254, .6);
+    }
+
+    .el-input__count {
+      background-color: rgba(0, 0, 0, 0);
+      font-size: 12px;
+      font-family: PingFang SC, PingFang SC;
+      font-weight: 400;
+      color: #3DE8FF;
+      line-height: 14px;
+    }
   }
 }
 </style>

ruoyi-ui/src/views/JiHeExpressway/components/RadioGroup/Radio.vue

@@ -0,0 +1,52 @@
+<template>
+  <ElRadio v-bind="getBind" v-on="$listeners" class="Radio">
+    <slot />
+  </ElRadio>
+</template>
+
+<script>
+export default {
+  name: 'Radio',
+  computed: {
+    getBind() {
+      return {
+        border: true,
+        ...this.$attrs
+      }
+    }
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+label.Radio {
+  border-color: rgba(96, 223, 254, .5);
+  border-radius: 2px;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 27px;
+  padding: 0 6px;
+  margin: 0 3px !important;
+
+  &.is-checked {
+    border-color: rgba(0, 0, 0, 0);
+    background: linear-gradient(180deg, #005C79 0%, #009BCC 100%);
+  }
+
+  ::v-deep {
+    .el-radio__input {
+      display: none;
+    }
+
+    .el-radio__label {
+      font-size: 14px;
+      font-family: PingFang SC, PingFang SC;
+      font-weight: 400;
+      color: #FFFFFF;
+      padding: 0;
+    }
+  }
+}
+</style>

ruoyi-ui/src/views/JiHeExpressway/components/RadioGroup/RadioButton.vue

@@ -0,0 +1,71 @@
+<template>
+  <ElRadioButton class="RadioButton" v-bind="getBind" v-on="$listeners">
+    <slot />
+  </ElRadioButton>
+</template>
+
+<script>
+export default {
+  name: 'RadioButton',
+  computed: {
+    getBind() {
+      return {
+        border: true,
+        ...this.$attrs
+      }
+    }
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.RadioButton {
+  margin: 0;
+  height: 27px;
+
+  &:first-child {
+    ::v-deep {
+      span.el-radio-button__inner {
+        border-radius: 0;
+        border-left: 1px solid #00B3CC;
+        border-top-left-radius: 1px;
+        border-bottom-left-radius: 1px;
+      }
+    }
+  }
+
+  &.is-active {
+    ::v-deep {
+      span.el-radio-button__inner {
+        background: linear-gradient(180deg, #005C79 0%, #009BCC 100%);
+        border-color: rgba(0, 0, 0, 0);
+      }
+    }
+  }
+
+  &:last-child {
+    ::v-deep {
+      span.el-radio-button__inner {
+        border-radius: 0;
+        border-right: 1px solid #00B3CC;
+        border-top-right-radius: 1px;
+        border-bottom-right-radius: 1px;
+      }
+    }
+  }
+
+  ::v-deep {
+    span.el-radio-button__inner {
+      border: 0;
+      border-radius: 0;
+
+      border-top: 1px solid #00B3CC;
+      border-bottom: 1px solid #00B3CC;
+      font-size: 12px;
+      font-family: PingFang SC, PingFang SC;
+      font-weight: 400;
+      color: #FFFFFF;
+    }
+  }
+}
+</style>

ruoyi-ui/src/views/JiHeExpressway/components/RadioGroup/index.vue

@@ -0,0 +1,41 @@
+<template>
+  <ElRadioGroup class='RadioGroup' v-bind="$attrs" v-on="$listeners">
+    <component :is="type === 'button' ? 'RadioButton' : 'Radio'" v-for="item in list" :key="item.key" :label="item.key">
+      {{ item.label }}
+    </component>
+  </ElRadioGroup>
+</template>
+
+<script>
+import Radio from "./Radio.vue"
+import RadioButton from "./RadioButton.vue"
+
+export default {
+  name: 'RadioGroup',
+  components: {
+    Radio,
+    RadioButton
+  },
+  props: {
+    type: {
+      type: String,
+      // button | normal
+      default: "normal"
+    },
+    /**
+     * {
+     *  label: string;
+     *  key: string;
+     * }[]
+     */
+    list: {
+      type: Array,
+      default: () => []
+    }
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.RadioGroup {}
+</style>

ruoyi-ui/src/views/JiHeExpressway/index.vue

@@ -34,6 +34,12 @@ export default {
 
 <style lang="less">
 body {
+
+  input,
+  textarea {
+    caret-color: white;
+  }
+
   div {
 
     /* 滚动条整体部分 */

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DisposalProcess/index.vue

@@ -16,26 +16,37 @@
       <ButtonGradient class="title-button">
         路赔
       </ButtonGradient>
-      <ButtonGradient class="title-button special">
+      <ButtonGradient class="title-button special-button" @click.native="handleFullHeight">
         <template #prefix>
-          <div class="icon" :style="{ backgroundImage: `url(${require(`./images/${'zoom'}.svg`)})` }" />
+          <div class="icon"
+            :style="{ backgroundImage: `url(${require(`./images/${isFullHeight ? 'reduce' : 'zoom'}.svg`)})` }" />
         </template>
       </ButtonGradient>
     </template>
 
     <TimeLine1 :data="timeLine1List" :filterDistance="filterDistance" />
     <TimeLine2 :data="timeLine2List" style="flex: 1;" />
+    <div class="bottom">
+      <RadioGroup :list="[{ key: 'input', label: '输入' }, { key: 'upload', label: '上传' }]" value="input" type="button" />
+      <ButtonGradient class="title-button special-button">
+        发送
+      </ButtonGradient>
+      <ButtonGradient class="title-button special-button">
+        调度预案
+      </ButtonGradient>
+    </div>
   </Card>
 </template>
 
 <script>
 import Card from "./../../components/Card.vue";
 import ButtonGradient from '@screen/components/Buttons/ButtonGradient.vue';
+import RadioGroup from '@screen/components/RadioGroup/index.vue';
 
 import TimeLine1 from "@screen/components/TimeLine/TimeLine1/index";
 import TimeLine2 from "@screen/components/TimeLine/TimeLine2/index";
 
-import { timeLine1List } from "./data"
+import { timeLine1List } from "./data";
 
 export default {
   name: 'DisposalProcess',
@@ -44,8 +55,10 @@ export default {
     Card,
     ButtonGradient,
     TimeLine1,
-    TimeLine2
+    TimeLine2,
+    RadioGroup
   },
+  emit: ['fullHeight'],
   data() {
     return {
       timeLine1List,
@@ -56,11 +69,17 @@ export default {
         desc: "描述性文字文字文字文字文字文字文字文字描述性文字文字文字文字文字文字文字文字",
         posts: '淄博发展公司管理员'
       })),
+      isFullHeight: false
     }
   },
   methods: {
     filterDistance(distance) {
       return 1 / this.adpScale.scaleX * distance
+    },
+    handleFullHeight() {
+      this.isFullHeight = !this.isFullHeight;
+
+      this.$emit('fullHeight', 'CrowdnessIndicatorRankings')
     }
   }
 }
@@ -69,20 +88,28 @@ export default {
 <style lang='scss' scoped>
 .DisposalProcess {
 
+  ::v-deep {
+    .content {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+  }
 
-  .special {
+  .special-button {
-    background: linear-gradient(180deg, #005C79 0%, #009BCC 100%);
-    border-radius: 3px !important;
-    padding: 3px;
-    width: 26px;
-    height: 26px;
-
     .icon {
       background-repeat: no-repeat;
       background-size: 100% 100%;
       width: 20px;
       height: 20px;
+      transition: all .3s linear;
     }
   }
+
+  .bottom {
+    display: flex;
+    width: 100%;
+    gap: 6px;
+  }
 }
 </style>

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/ReleaseInformation/images/add.svg

@@ -0,0 +1,14 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 1142814646">
+<circle id="Ellipse 2023" cx="11" cy="11" r="10.5" fill="#0A3E54" stroke="#00BBD4"/>
+<g id="Frame" clip-path="url(#clip0_455_775)">
+<path id="Vector" d="M10.787 5.07715C10.9553 5.07715 11.1167 5.13955 11.2357 5.25063C11.3547 5.36171 11.4216 5.51237 11.4216 5.66946V16.331C11.4216 16.4881 11.3547 16.6387 11.2357 16.7498C11.1167 16.8609 10.9553 16.9233 10.787 16.9233C10.6186 16.9233 10.4572 16.8609 10.3382 16.7498C10.2192 16.6387 10.1523 16.4881 10.1523 16.331V5.66946C10.1523 5.51237 10.2192 5.36171 10.3382 5.25063C10.4572 5.13955 10.6186 5.07715 10.787 5.07715Z" fill="white"/>
+<path id="Vector_2" d="M16.9223 10.7889C16.9223 10.9572 16.8599 11.1186 16.7488 11.2377C16.6378 11.3567 16.4871 11.4235 16.33 11.4235H5.66848C5.51139 11.4235 5.36073 11.3567 5.24965 11.2377C5.13858 11.1186 5.07617 10.9572 5.07617 10.7889C5.07617 10.6206 5.13858 10.4592 5.24965 10.3402C5.36073 10.2212 5.51139 10.1543 5.66848 10.1543H16.33C16.4871 10.1543 16.6378 10.2212 16.7488 10.3402C16.8599 10.4592 16.9223 10.6206 16.9223 10.7889Z" fill="white"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_455_775">
+<rect width="11.8462" height="11.8462" fill="white" transform="translate(5.07617 5.07715)"/>
+</clipPath>
+</defs>
+</svg>

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/ReleaseInformation/index.vue

@@ -1,20 +1,76 @@
 <template>
   <Card class='ReleaseInformation' title="信息发布">
-    ReleaseInformation
+    <Form :formList="formList" column="1" />
+
+    <div class="bottom">
+      <ButtonGradient class="title-button special-button">
+        发送
+      </ButtonGradient>
+      <ButtonGradient class="title-button special-button">
+        调度预案
+      </ButtonGradient>
+    </div>
   </Card>
 </template>
 
 <script>
 import Card from "./../../components/Card.vue"
+import ButtonGradient from '@screen/components/Buttons/ButtonGradient.vue';
+import Form from '@screen/components/FormConfig';
 
 export default {
   name: 'ReleaseInformation',
   components: {
-    Card
+    Card,
+    ButtonGradient,
+    Form
+  },
+  data() {
+    return {
+      formList: [{
+        label: "发布内容:",
+        key: "content",
+        type: "input",
+        options: {
+          // style: {
+          //   height: "90px",
+          // },
+          type: "textarea",
+          autosize: true,
+          maxlength: 200,
+          autosize: { minRows: 6, maxRows: 6 },
+          showWordLimit: true
+        }
+      },
+      {
+        label: "发布平台:",
+        key: "platform",
+        type: "input",
+      }],
+    }
   }
 }
 </script>
 
 <style lang='scss' scoped>
-.ReleaseInformation {}
+.ReleaseInformation {
+
+  ::v-deep {
+    .content {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+    }
+  }
+
+  .bottom {
+    display: flex;
+    gap: 9px;
+    justify-content: end;
+
+    .special-button {
+      padding: 0 9px;
+    }
+  }
+}
 </style>

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/TrafficControl/index.vue

@@ -1,20 +1,65 @@
 <template>
   <Card class='TrafficControl' title="交通管制">
-    TrafficControl
+    <RadioGroup :list="radioList" value="mainlineControl" />
+
+    <div class="bottom">
+      <ButtonGradient class="title-button special-button"
+        style="background: linear-gradient(180deg, #E94D4E 0%, #FF195E 100%);">
+        封闭
+      </ButtonGradient>
+      <ButtonGradient class="title-button special-button" style="
+background: linear-gradient(82deg, #FFCD48 0%, #FE861E 100%);">
+        限行
+      </ButtonGradient>
+    </div>
   </Card>
 </template>
 
 <script>
 import Card from "./../../components/Card.vue"
+import RadioGroup from '@screen/components/RadioGroup/index.vue';
+import ButtonGradient from '@screen/components/Buttons/ButtonGradient.vue';
 
 export default {
   name: 'TrafficControl',
   components: {
-    Card
+    Card,
+    RadioGroup,
+    ButtonGradient
+  },
+  data() {
+    return {
+      radioList: [
+        { key: 'mainlineControl', label: '主线管制' },
+        { key: 'tollboothControl', label: '收费站管制' },
+        { key: 'serviceAreaControl', label: '服务区管制' },
+        { key: 'hubInterchangeControl', label: '枢纽立交管制' },
+        { key: 'otherControls', label: '其他管制' },
+      ]
+    }
   }
 }
 </script>
 
 <style lang='scss' scoped>
-.TrafficControl {}
+.TrafficControl {
+  ::v-deep {
+    .content {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      gap: 12px;
+    }
+  }
+
+  .bottom {
+    display: flex;
+    gap: 9px;
+    justify-content: end;
+
+    .special-button {
+      padding: 0 24px;
+    }
+  }
+}
 </style>

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/index.vue

@@ -1,39 +1,72 @@
 <template>
-  <div class='CommandDispatch'>
+  <div class='CommandDispatch' :style="{ '--row': row }">
-    <EventInformation style="grid-area: 1/1/span 9/1;">1</EventInformation>
+    <component :is="key" v-for="(_, key) in gridAreaMap" :key="key" :ref="key" :style="{ gridArea: gridAreaMap[key] }"
-    <DispatchLiaison style="grid-area: 10/1/span 7/2;">2</DispatchLiaison>
+      @fullHeight="opacityKey => handleFullHeight(key, opacityKey)" />
-    <DisposalPlan style="grid-area: 17/1/span 9/2;">3</DisposalPlan>
-    <CrowdnessIndicatorRankings style="grid-area: 1/2/span 12/2;">4</CrowdnessIndicatorRankings>
-    <DisposalProcess style="grid-area: 13/2/span 13/2;">5</DisposalProcess>
-    <RealTimeVideo style="grid-area: 1/3/span 6/3;">6</RealTimeVideo>
-    <ReleaseInformation style="grid-area: 7/3/span 14/3;">7</ReleaseInformation>
-    <TrafficControl style="grid-area: 21/3/span 5/3;">8</TrafficControl>
   </div>
 </template>
 
 <script>
 import Card from "./components/Card.vue";
-import CrowdnessIndicatorRankings from "./Cards/CrowdnessIndicatorRankings/index.vue";
+
-import DispatchLiaison from "./Cards/DispatchLiaison/index.vue";
+const files = require.context('./Cards', true, /[^/]+\/index\.vue$/);
-import DisposalPlan from "./Cards/DisposalPlan/index.vue";
+
-import DisposalProcess from "./Cards/DisposalProcess/index.vue";
+const components = files.keys().reduce((components, key) => {
-import EventInformation from "./Cards/EventInformation/index.vue";
+  components[key.match(/[^/]+/g)[1]] = files(key).default;
-import RealTimeVideo from "./Cards/RealTimeVideo/index.vue";
+
-import ReleaseInformation from "./Cards/ReleaseInformation/index.vue";
+  return components;
-import TrafficControl from "./Cards/TrafficControl/index.vue";
+}, {});
+
+const originGridArea = {
+  EventInformation: "1 / 1 / span 9 / 1",
+  DispatchLiaison: "10 / 1 / span 7 / 2",
+  DisposalPlan: "17 / 1 / span 9 / 2",
+  CrowdnessIndicatorRankings: "1 / 2 / span 11 / 2",
+  DisposalProcess: "12 / 2 / span 14 / 2",
+  RealTimeVideo: "1 / 3 / span 6 / 3",
+  ReleaseInformation: "7 / 3 / span 14 / 3",
+  TrafficControl: "21 / 3 / span 5 / 3",
+}
 
 export default {
   name: 'CommandDispatch',
   components: {
     Card,
-    CrowdnessIndicatorRankings,
+    ...components,
-    DispatchLiaison,
+  },
-    DisposalPlan,
+  data() {
-    DisposalProcess,
+    return {
-    EventInformation,
+      gridAreaMap: {
-    RealTimeVideo,
+        ...originGridArea
-    ReleaseInformation,
+      },
-    TrafficControl,
+      row: 24,
+    }
+  },
+  methods: {
+    handleFullHeight(key, opacityKey) {
+      if (this.gridAreaMap[key] !== originGridArea[key]) {
+        this.gridAreaMap[key] = originGridArea[key];
+        if (this.$refs[opacityKey]?.[0]) {
+          this.$refs[opacityKey][0].$el.style.opacity = 1;
+          this.$refs[opacityKey][0].$el.style.pointerEvents = "auto";
+        };
+      } else {
+        let index = 0;
+        if (this.$refs[opacityKey]?.[0]) {
+          this.$refs[opacityKey][0].$el.style.opacity = 0;
+          this.$refs[opacityKey][0].$el.style.pointerEvents = "none";
+        };
+
+        this.gridAreaMap[key] = originGridArea[key].replace(/[0-9]+/g, (num) => {
+          try {
+            return { 0: '1', 2: this.row + 1 }[index] || num;
+          } catch (error) {
+
+          } finally {
+            index++;
+          }
+        });
+      }
+    }
   }
 }
 </script>
@@ -43,14 +76,24 @@ export default {
   padding: 24px 12px 21px 12px;
   display: grid;
   grid-template-columns: 1fr 2fr 1fr;
-  grid-template-rows: repeat(24, 1fr);
+  grid-template-rows: repeat(var(--row), 1fr);
   gap: 18px;
 
+  >div {
+    transition: all .3s linear;
+  }
+
   ::v-deep {
     .title-button {
       border-radius: 65px;
       font-size: 12px;
     }
+
+    .special-button {
+      border-radius: 3px !important;
+      padding: 3px;
+      height: 26px;
+    }
   }
 }
 </style>