感知事件 tab 切换 修改, 指挥调度 提交

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/Form.vue → ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/index.vue

@@ -1,6 +1,6 @@
 <template>
   <ElForm :style="getStyle()" :label-width="labelWidth" class="FormConfig" size="mini">
-    <ElFormItem class="formItem" :rules="rules[item.key] || []" v-for="(item, index) in formList" :key="item.key"
+    <ElFormItem class="formItem" :rules="rules && rules[item.key]" v-for="(item, index) in formList" :key="item.key"
       :label="item.label" :style="gridStyle(item, index)">
       <component :is="getComponent(item.type)" v-bind="item.options" />
     </ElFormItem>
@@ -8,8 +8,8 @@
 </template>
 
 <script>
-import FormInput from "./FormInput.vue";
-import FormTimePicker from "./FormTimePicker.vue";
+import FormInput from "./components/FormInput.vue";
+import FormTimePicker from "./components/FormTimePicker.vue";
 
 export default {
   name: 'FormConfig',
@@ -72,7 +72,6 @@ export default {
   display: grid;
   align-content: start;
   width: 100%;
-  flex: 1;
   gap: 15px 15px;
 
   .formItem {

ruoyi-ui/src/views/JiHeExpressway/components/TimeLine/TimeLine1/index.vue

@@ -1,21 +1,19 @@
 <template>
-  <div class='TimeLine1'>
+  <div :class='["TimeLine1", { "auto-size": autoSize }]'>
     <!-- 节点 -->
     <div class="node" v-for="(item, index) in data" ref="nodeRefs">
       <span class="top-label">
-
         <slot name="bottom-label" :data="item">
           {{ item.time }}
         </slot>
       </span>
       <div class="center">
-        <div class="line" v-if="!index" />
+        <div class="line" v-if="!index" :style="{ width: `${nodeLinesWidth[-1]}px` }" />
         <div class="circle" :style="{ '--active-color': !item.isActive ? normalColor : activeColor }"></div>
         <div class="line" :style="{
           width: `${nodeLinesWidth[index]}px`,
           borderImage: getBorderImageStyle(item),
         }" />
-        <!-- borderImage: `linear-gradient(90deg, ${item.isActive ? 'rgba(59, 216, 188, 1), rgba(29, 171, 215, 1)' : '#ccc, #ccc'}) 2 2`, -->
       </div>
       <slot name="bottom-label" :data="item">
         <div class="bottom"
@@ -29,6 +27,22 @@
 </template>
 
 <script>
+function getPositionAtCenter(element) {
+  const { top, left } = element.getBoundingClientRect();
+
+  return {
+    x: left,
+    y: top
+  };
+}
+
+function getDistanceBetweenElements(domA, domB) {
+  const domAPosition = getPositionAtCenter(domA);
+  const domBPosition = getPositionAtCenter(domB);
+
+  return Math.hypot(domAPosition.x - domBPosition.x, domAPosition.y - domBPosition.y);
+}
+
 export default {
   name: 'TimeLine1',
   props: {
@@ -55,11 +69,20 @@ export default {
     lineNormalColor: {
       type: String,
       default: null
+    },
+    // 自动适配宽度
+    autoSize: {
+      type: Boolean,
+      default: true
+    },
+    filterDistance: {
+      type: Function,
+      default: null
     }
   },
   data() {
     return {
-      nodeLinesWidth: []
+      nodeLinesWidth: {}
     }
   },
   watch: {
@@ -67,15 +90,36 @@ export default {
       handler(data) {
         const nodeLinesWidth = [];
 
-        function getWidth(node) {
-          return node.offsetWidth / 2 - 6;
+        const filterDistance = this.filterDistance || (num => num);
+
+        const removeDistance = 20 + 4 * 2;
+
+        function getDistance(index) {
+          return filterDistance(getDistanceBetweenElements(
+            this.$refs.nodeRefs[index].querySelector('.center'),
+            this.$refs.nodeRefs[index + 1].querySelector('.center'))
+          ) - removeDistance
+        }
+        function getSpecialDistance(index) {
+          return filterDistance(getDistanceBetweenElements(
+            this.$refs.nodeRefs[index].parentElement,
+            this.$refs.nodeRefs[index].querySelector('.center'))
+          ) - removeDistance
         }
+
         this.$nextTick(() => {
+
           data.forEach((_, index) => {
-            if (index === data.length - 1) return;
-            nodeLinesWidth[index] = getWidth(this.$refs.nodeRefs[index]) + getWidth(this.$refs.nodeRefs[index + 1]);
+            if (index === data.length - 1) {
+              if (this.autoSize) {
+                nodeLinesWidth[-1] = getSpecialDistance.call(this, 0)
+                nodeLinesWidth[data.length - 1] = getSpecialDistance.call(this, data.length - 1)
+              }
+
+              return
+            };
 
-            // if (nodeLinesWidth[index] < 90) nodeLinesWidth[index] = void 0;
+            nodeLinesWidth[index] = getDistance.call(this, index);
           });
 
           this.nodeLinesWidth = nodeLinesWidth;
@@ -95,12 +139,29 @@ export default {
 </script>
 
 <style lang='scss' scoped>
+div.auto-size {
+  justify-content: space-between;
+  overflow: hidden;
+
+  .node {
+    flex: 1;
+    min-width: auto !important;
+
+    &:first-child,
+    &:last-child {
+      .line {
+        width: auto;
+      }
+    }
+  }
+}
+
 .TimeLine1 {
   color: #fff;
   width: auto;
 
   font-size: 14px;
-  // font-family: PingFang SC, PingFang SC;
+  font-family: PingFang SC, PingFang SC;
   font-weight: 400;
   color: #FFFFFF;
   display: flex;
@@ -108,8 +169,6 @@ export default {
   overflow: auto;
   gap: 15px;
   padding-left: 15px;
-  // -webkit-background-clip: text;
-  // -webkit-text-fill-color: transparent;
 
   .node {
     display: flex;
@@ -117,7 +176,7 @@ export default {
     // justify-content: center;
     flex-direction: column;
     gap: 3px;
-    min-width: 100px;
+    min-width: 90px;
 
     .top-label {
       line-height: 16px;
@@ -154,7 +213,6 @@ export default {
 
       .line {
         position: absolute;
-        width: 81px;
         height: 0px;
         opacity: 1;
         border: 2px solid;

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/dutyOfficer/components/ModifyDutyInformationTable.vue

@@ -2,7 +2,8 @@
   <Dialog v-model="visibleModel" title="修改值班信息表">
     <div class="ModifyDutyInformationTable">
       <div class="search">
-        <Form :formList="formList" :rules="{ '桩号:': [{ required: true, message: '年龄不能为空' }] }" column="2" />
+        <Form :formList="formList" :rules="{ '桩号:': [{ required: true, message: '年龄不能为空' }] }" column="2"
+          style="flex: 1;" />
 
         <ButtonGradient>
           <template #prefix>
@@ -26,7 +27,7 @@
 import Dialog from "@screen/components/Dialog/index.vue";
 import Button from "@screen/components/Buttons/Button.vue"
 import ButtonGradient from '@screen/components/Buttons/ButtonGradient.vue';
-import Form from '@screen/pages/control/event/event/EventDetailDialog/Form.vue';
+import Form from '@screen/components/FormConfig';
 
 import SelectList from "./../../../components/SelectList.vue"
 

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/CrowdnessIndicatorRankings/images/bar-active.svg

@@ -0,0 +1,7 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame 10207">
+<g id="Frame">
+<path id="Vector" d="M5.66634 5.6665V18.4998H22.1663V20.3332H3.83301V5.6665H5.66634ZM11.1663 5.6665V17.5832H7.49967V5.6665H11.1663ZM16.6663 9.33317V17.5832H12.9997V9.33317H16.6663ZM22.1663 12.9998V17.5832H18.4997V12.9998H22.1663Z" fill="white"/>
+</g>
+</g>
+</svg>

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/CrowdnessIndicatorRankings/images/bar.svg

@@ -0,0 +1,13 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame 10212">
+<g id="Frame">
+<path id="Vector" opacity="0.5" d="M5.66634 5.6665V18.4998H22.1663V20.3332H3.83301V5.6665H5.66634ZM11.1663 5.6665V17.5832H7.49967V5.6665H11.1663ZM16.6663 9.33317V17.5832H12.9997V9.33317H16.6663ZM22.1663 12.9998V17.5832H18.4997V12.9998H22.1663Z" fill="url(#paint0_linear_455_85)"/>
+</g>
+</g>
+<defs>
+<linearGradient id="paint0_linear_455_85" x1="12.9997" y1="5.6665" x2="12.9997" y2="20.3332" gradientUnits="userSpaceOnUse">
+<stop offset="0.229167" stop-color="white"/>
+<stop offset="1" stop-color="#D6F5FF" stop-opacity="0.8"/>
+</linearGradient>
+</defs>
+</svg>

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/CrowdnessIndicatorRankings/images/camera-active.svg

@@ -0,0 +1,5 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame 10206">
+<path id="Vector" d="M8.816 16.4248H6.872V13.7168L5 13.3186V22L6.872 21.2832V18.2566H9.896L11.552 15.7876L9.392 14.5133L8.816 16.4248ZM18.608 16.9823L23 13.8761L9.32 4H7.736L5.576 7.74336V9.0177L17.6 17.0619H18.608V16.9823ZM16.952 17.6195L6.584 10.2124L5.504 11.4867L17.528 19.531H18.608L19.184 18.8938L19.76 17.0619C19.76 17.0619 18.176 18.3363 18.104 18.3363C17.456 17.8584 16.952 17.6195 16.952 17.6195Z" fill="white"/>
+</g>
+</svg>

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/CrowdnessIndicatorRankings/images/camera.svg

@@ -0,0 +1,11 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame 10211">
+<path id="Vector" opacity="0.5" d="M8.816 16.4248H6.872V13.7168L5 13.3186V22L6.872 21.2832V18.2566H9.896L11.552 15.7876L9.392 14.5133L8.816 16.4248ZM18.608 16.9823L23 13.8761L9.32 4H7.736L5.576 7.74336V9.0177L17.6 17.0619H18.608V16.9823ZM16.952 17.6195L6.584 10.2124L5.504 11.4867L17.528 19.531H18.608L19.184 18.8938L19.76 17.0619C19.76 17.0619 18.176 18.3363 18.104 18.3363C17.456 17.8584 16.952 17.6195 16.952 17.6195Z" fill="url(#paint0_linear_455_83)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_455_83" x1="14" y1="4" x2="14" y2="22" gradientUnits="userSpaceOnUse">
+<stop offset="0.229167" stop-color="white"/>
+<stop offset="1" stop-color="#D6F5FF" stop-opacity="0.8"/>
+</linearGradient>
+</defs>
+</svg>

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/CrowdnessIndicatorRankings/images/car-active.svg

@@ -0,0 +1,8 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame 10209">
+<g id="Frame">
+<path id="Vector" d="M7.85565 20.3593C6.47894 20.3593 5.35254 19.2328 5.35254 17.8561C5.35254 16.4794 6.47894 15.353 7.85565 15.353C9.23236 15.353 10.3588 16.4794 10.3588 17.8561C10.3588 19.2328 9.23236 20.3593 7.85565 20.3593ZM18.1309 20.3593C16.7542 20.3593 15.6278 19.2328 15.6278 17.8561C15.6278 16.4794 16.7542 15.353 18.1309 15.353C19.5076 15.353 20.634 16.4794 20.634 17.8561C20.634 19.2328 19.5076 20.3593 18.1309 20.3593Z" fill="white"/>
+<path id="Vector_2" d="M18.7575 9.50821L18.6699 9.48318C18.6323 9.47066 18.6073 9.44563 18.5823 9.40808L18.5447 9.33299C18.0691 8.39432 16.4546 6.2041 11.5485 6.2041C8.4071 6.2041 6.67996 7.58081 5.76632 8.73224C5.06545 9.59582 4.74005 10.4969 4.61489 10.9475L4.58986 11.0351C4.57734 11.0727 4.55231 11.1102 4.51477 11.1227L4.42716 11.1728C4.08924 11.3605 3.16309 11.9112 3.16309 13.1753V17.8561C3.16309 18.0063 3.28824 18.1439 3.45094 18.1439H4.23942C4.31452 18.1439 4.38961 18.0814 4.37709 17.9938V17.8561C4.37709 15.9412 5.92902 14.3768 7.85642 14.3768C9.78381 14.3768 11.3357 15.9287 11.3357 17.8561V17.9938C11.3357 18.0688 11.3983 18.1439 11.4734 18.1439H14.5272C14.6023 18.1439 14.6774 18.0814 14.6649 17.9938V17.8561C14.6649 15.9412 16.2168 14.3768 18.1442 14.3768C20.0591 14.3768 21.6235 15.9287 21.6235 17.8561V17.9938C21.6235 18.0688 21.6861 18.1439 21.7612 18.1439H22.3995C22.6373 18.1439 22.825 17.9562 22.825 17.7184V13.6133C22.825 10.91 19.6836 9.78355 18.7575 9.50821ZM11.0854 11.0101C11.0854 11.4857 10.9227 11.8236 10.3971 11.8236H6.21688C5.80387 11.8236 5.6662 11.6108 5.80387 11.1477C5.95405 10.7347 6.09173 10.134 6.56732 9.53324C7.26819 8.63212 8.58232 7.58081 10.8727 7.41811C10.9853 7.40559 11.0729 7.48069 11.0729 7.60584V11.0101H11.0854ZM15.0779 11.8236H12.775C12.1242 11.8236 12.0366 11.1853 12.0241 11.1102V7.64339C12.0241 7.44314 12.1868 7.39308 12.2243 7.39308C15.128 7.48069 16.4171 8.53199 17.0679 9.34551C17.3182 9.65839 17.3808 9.85864 17.4934 10.1715C17.5059 10.2091 17.5309 10.2466 17.5685 10.2591C18.0941 10.547 17.606 11.8236 15.0779 11.8236ZM18.9077 13.5007H17.3682C17.0804 13.5007 16.8301 13.2754 16.8301 13C16.8301 12.7247 17.0679 12.4994 17.3682 12.4994H18.9077C19.1955 12.4994 19.4458 12.7247 19.4458 13C19.4458 13.2754 19.1955 13.5007 18.9077 13.5007Z" fill="white"/>
+</g>
+</g>
+</svg>

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/CrowdnessIndicatorRankings/images/car.svg

@@ -0,0 +1,18 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame 10214">
+<g id="Frame">
+<path id="Vector" d="M7.85565 20.3593C6.47894 20.3593 5.35254 19.2328 5.35254 17.8561C5.35254 16.4794 6.47894 15.353 7.85565 15.353C9.23236 15.353 10.3588 16.4794 10.3588 17.8561C10.3588 19.2328 9.23236 20.3593 7.85565 20.3593ZM18.1309 20.3593C16.7542 20.3593 15.6278 19.2328 15.6278 17.8561C15.6278 16.4794 16.7542 15.353 18.1309 15.353C19.5076 15.353 20.634 16.4794 20.634 17.8561C20.634 19.2328 19.5076 20.3593 18.1309 20.3593Z" fill="url(#paint0_linear_455_90)" fill-opacity="0.5"/>
+<path id="Vector_2" opacity="0.5" d="M18.7575 9.50821L18.6699 9.48318C18.6323 9.47066 18.6073 9.44563 18.5823 9.40808L18.5447 9.33299C18.0691 8.39432 16.4546 6.2041 11.5485 6.2041C8.4071 6.2041 6.67996 7.58081 5.76632 8.73224C5.06545 9.59582 4.74005 10.4969 4.61489 10.9475L4.58986 11.0351C4.57734 11.0727 4.55231 11.1102 4.51477 11.1227L4.42716 11.1728C4.08924 11.3605 3.16309 11.9112 3.16309 13.1753V17.8561C3.16309 18.0063 3.28824 18.1439 3.45094 18.1439H4.23942C4.31452 18.1439 4.38961 18.0814 4.37709 17.9938V17.8561C4.37709 15.9412 5.92902 14.3768 7.85642 14.3768C9.78381 14.3768 11.3357 15.9287 11.3357 17.8561V17.9938C11.3357 18.0688 11.3983 18.1439 11.4734 18.1439H14.5272C14.6023 18.1439 14.6774 18.0814 14.6649 17.9938V17.8561C14.6649 15.9412 16.2168 14.3768 18.1442 14.3768C20.0591 14.3768 21.6235 15.9287 21.6235 17.8561V17.9938C21.6235 18.0688 21.6861 18.1439 21.7612 18.1439H22.3995C22.6373 18.1439 22.825 17.9562 22.825 17.7184V13.6133C22.825 10.91 19.6836 9.78355 18.7575 9.50821ZM11.0854 11.0101C11.0854 11.4857 10.9227 11.8236 10.3971 11.8236H6.21688C5.80387 11.8236 5.6662 11.6108 5.80387 11.1477C5.95405 10.7347 6.09173 10.134 6.56732 9.53324C7.26819 8.63212 8.58232 7.58081 10.8727 7.41811C10.9853 7.40559 11.0729 7.48069 11.0729 7.60584V11.0101H11.0854ZM15.0779 11.8236H12.775C12.1242 11.8236 12.0366 11.1853 12.0241 11.1102V7.64339C12.0241 7.44314 12.1868 7.39308 12.2243 7.39308C15.128 7.48069 16.4171 8.53199 17.0679 9.34551C17.3182 9.65839 17.3808 9.85864 17.4934 10.1715C17.5059 10.2091 17.5309 10.2466 17.5685 10.2591C18.0941 10.547 17.606 11.8236 15.0779 11.8236ZM18.9077 13.5007H17.3682C17.0804 13.5007 16.8301 13.2754 16.8301 13C16.8301 12.7247 17.0679 12.4994 17.3682 12.4994H18.9077C19.1955 12.4994 19.4458 12.7247 19.4458 13C19.4458 13.2754 19.1955 13.5007 18.9077 13.5007Z" fill="url(#paint1_linear_455_90)"/>
+</g>
+</g>
+<defs>
+<linearGradient id="paint0_linear_455_90" x1="12.9933" y1="15.353" x2="12.9933" y2="20.3593" gradientUnits="userSpaceOnUse">
+<stop offset="0.229167" stop-color="white"/>
+<stop offset="1" stop-color="#D6F5FF" stop-opacity="0.8"/>
+</linearGradient>
+<linearGradient id="paint1_linear_455_90" x1="12.9941" y1="6.2041" x2="12.9941" y2="18.1439" gradientUnits="userSpaceOnUse">
+<stop offset="0.229167" stop-color="white"/>
+<stop offset="1" stop-color="#D6F5FF" stop-opacity="0.8"/>
+</linearGradient>
+</defs>
+</svg>

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/CrowdnessIndicatorRankings/images/level-active.svg

@@ -0,0 +1,5 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame 10208">
+<path id="Vector" d="M22.375 5C22.5408 5 22.6997 5.06889 22.8169 5.19151C22.9342 5.31413 23 5.48044 23 5.65385V12.8462H3V5.65385C3 5.48044 3.06585 5.31413 3.18306 5.19151C3.30027 5.06889 3.45924 5 3.625 5H22.375ZM8.625 7.68862H6.125V10.304H8.625V7.68862ZM12.375 7.61538H9.875V10.2308H12.375V7.61538ZM16.125 7.61538H13.625V10.2308H16.125V7.61538ZM19.875 7.61538H17.375V10.2308H19.875V7.61538ZM23 12.8462H20.5V21.3462C20.5 21.5196 20.5658 21.6859 20.6831 21.8085C20.8003 21.9311 20.9592 22 21.125 22H22.375C22.5408 22 22.6997 21.9311 22.8169 21.8085C22.9342 21.6859 23 21.5196 23 21.3462V12.8462ZM5.5 12.8462H3V21.3462C3 21.5196 3.06585 21.6859 3.18306 21.8085C3.30027 21.9311 3.45924 22 3.625 22H4.875C5.04076 22 5.19973 21.9311 5.31694 21.8085C5.43415 21.6859 5.5 21.5196 5.5 21.3462V12.8462Z" fill="white"/>
+</g>
+</svg>

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/CrowdnessIndicatorRankings/images/level.svg

@@ -0,0 +1,11 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame 10213">
+<path id="Vector" opacity="0.5" d="M22.375 5C22.5408 5 22.6997 5.06889 22.8169 5.19151C22.9342 5.31413 23 5.48044 23 5.65385V12.8462H3V5.65385C3 5.48044 3.06585 5.31413 3.18306 5.19151C3.30027 5.06889 3.45924 5 3.625 5H22.375ZM8.625 7.68862H6.125V10.304H8.625V7.68862ZM12.375 7.61538H9.875V10.2308H12.375V7.61538ZM16.125 7.61538H13.625V10.2308H16.125V7.61538ZM19.875 7.61538H17.375V10.2308H19.875V7.61538ZM23 12.8462H20.5V21.3462C20.5 21.5196 20.5658 21.6859 20.6831 21.8085C20.8003 21.9311 20.9592 22 21.125 22H22.375C22.5408 22 22.6997 21.9311 22.8169 21.8085C22.9342 21.6859 23 21.5196 23 21.3462V12.8462ZM5.5 12.8462H3V21.3462C3 21.5196 3.06585 21.6859 3.18306 21.8085C3.30027 21.9311 3.45924 22 3.625 22H4.875C5.04076 22 5.19973 21.9311 5.31694 21.8085C5.43415 21.6859 5.5 21.5196 5.5 21.3462V12.8462Z" fill="url(#paint0_linear_455_88)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_455_88" x1="13" y1="5" x2="13" y2="22" gradientUnits="userSpaceOnUse">
+<stop offset="0.229167" stop-color="white"/>
+<stop offset="1" stop-color="#D6F5FF" stop-opacity="0.8"/>
+</linearGradient>
+</defs>
+</svg>

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/CrowdnessIndicatorRankings/images/pie-active.svg

@@ -0,0 +1,7 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame 10210">
+<g id="Frame">
+<path id="Vector" d="M19.9367 9.77412C20.5008 10.9022 20.8125 12.164 20.8125 13.4999C20.8125 18.0866 17.0867 21.8124 12.5 21.8124C7.91328 21.8124 4.1875 18.0866 4.1875 13.4999C4.1875 8.91318 7.89844 5.1874 12.5 5.1874V14.064L19.9367 9.77412ZM13.6875 5.15771V11.8968L19.3281 8.646C18.0367 6.80537 16.018 5.49912 13.6875 5.15771Z" fill="white"/>
+</g>
+</g>
+</svg>

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/CrowdnessIndicatorRankings/images/pie.svg

@@ -0,0 +1,13 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame 10215">
+<g id="Frame">
+<path id="Vector" opacity="0.5" d="M19.9367 9.77412C20.5008 10.9022 20.8125 12.164 20.8125 13.4999C20.8125 18.0866 17.0867 21.8124 12.5 21.8124C7.91328 21.8124 4.1875 18.0866 4.1875 13.4999C4.1875 8.91318 7.89844 5.1874 12.5 5.1874V14.064L19.9367 9.77412ZM13.6875 5.15771V11.8968L19.3281 8.646C18.0367 6.80537 16.018 5.49912 13.6875 5.15771Z" fill="url(#paint0_linear_455_94)"/>
+</g>
+</g>
+<defs>
+<linearGradient id="paint0_linear_455_94" x1="12.5" y1="5.15771" x2="12.5" y2="21.8124" gradientUnits="userSpaceOnUse">
+<stop offset="0.229167" stop-color="white"/>
+<stop offset="1" stop-color="#D6F5FF" stop-opacity="0.8"/>
+</linearGradient>
+</defs>
+</svg>

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/CrowdnessIndicatorRankings/images/weather-active.svg

@@ -0,0 +1,6 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame">
+<path id="Vector" d="M20.209 13.7092C20.6817 12.7637 20.9181 11.5819 20.5636 10.6365C19.9726 8.50918 17.8454 7.20918 15.7181 7.68191C14.6545 7.91827 13.8272 8.62736 13.3545 9.57281C14.2999 10.1637 15.1272 11.1092 15.4817 12.1728C17.2545 11.7001 19.0272 12.4092 20.209 13.7092ZM15.4817 6.85463C15.7181 6.73645 15.8363 6.50009 15.8363 6.26372L15.3635 4.25463C15.2454 4.01827 15.009 3.78191 14.7726 3.90009C14.5363 4.01827 14.4181 4.25463 14.4181 4.491L15.009 6.50009C15.009 6.73645 15.2454 6.97281 15.4817 6.85463ZM12.6454 9.10009C12.7636 8.86372 12.6454 8.62736 12.409 8.391L10.8726 7.44554C10.6363 7.32736 10.2817 7.32736 10.1636 7.56372C10.0454 7.80009 10.1636 8.15463 10.3999 8.27281L11.3454 8.86372C11.6999 8.86372 12.1726 8.9819 12.6454 9.10009ZM21.509 13.9455C21.2726 13.8274 21.0363 13.8274 20.9181 14.0637C20.7999 14.3001 20.9181 14.5365 21.1545 14.7728L22.809 15.8365C23.0454 15.9546 23.2817 15.9546 23.3999 15.7183C23.5181 15.4819 23.3999 15.2455 23.1636 15.0092L21.509 13.9455ZM23.5181 9.21827L21.6272 9.691C21.3908 9.80918 21.2726 10.0455 21.2726 10.2819C21.3908 10.5183 21.6272 10.7546 21.8635 10.6365L23.7545 10.1637C23.9908 10.0455 24.109 9.80918 24.109 9.57281C24.109 9.33645 23.7545 9.21827 23.5181 9.21827ZM19.1454 7.32736C19.3817 7.44554 19.6181 7.44554 19.7363 7.20918L20.6817 5.43645C20.7999 5.20009 20.6817 4.96372 20.4454 4.72736C20.3272 4.60918 20.0908 4.72736 19.8545 4.96372L18.909 6.73645C18.7908 6.97281 18.909 7.20918 19.1454 7.32736Z" fill="white"/>
+<path id="Vector_2" d="M15.4815 22.0999H5.79063C4.84517 22.0999 3.78153 21.7454 3.07244 21.0363C2.24517 20.3272 1.89062 19.2635 1.89062 18.1999C1.89062 16.4272 3.07244 14.8908 4.72699 14.4181C5.55426 12.0544 7.79972 10.3999 10.2815 10.3999C12.1724 10.3999 13.9452 11.3454 15.127 12.8817H15.4815C18.0815 12.8817 20.0906 15.009 20.0906 17.4908C20.0906 19.3817 19.027 21.0363 17.2543 21.7454C16.6634 21.9817 16.0724 22.0999 15.4815 22.0999Z" fill="white"/>
+</g>
+</svg>

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/CrowdnessIndicatorRankings/images/weather.svg

@@ -0,0 +1,16 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame">
+<path id="Vector" d="M20.209 13.7092C20.6817 12.7637 20.9181 11.5819 20.5636 10.6365C19.9726 8.50918 17.8454 7.20918 15.7181 7.68191C14.6545 7.91827 13.8272 8.62736 13.3545 9.57281C14.2999 10.1637 15.1272 11.1092 15.4817 12.1728C17.2545 11.7001 19.0272 12.4092 20.209 13.7092ZM15.4817 6.85463C15.7181 6.73645 15.8363 6.50009 15.8363 6.26372L15.3635 4.25463C15.2454 4.01827 15.009 3.78191 14.7726 3.90009C14.5363 4.01827 14.4181 4.25463 14.4181 4.491L15.009 6.50009C15.009 6.73645 15.2454 6.97281 15.4817 6.85463ZM12.6454 9.10009C12.7636 8.86372 12.6454 8.62736 12.409 8.391L10.8726 7.44554C10.6363 7.32736 10.2817 7.32736 10.1636 7.56372C10.0454 7.80009 10.1636 8.15463 10.3999 8.27281L11.3454 8.86372C11.6999 8.86372 12.1726 8.9819 12.6454 9.10009ZM21.509 13.9455C21.2726 13.8274 21.0363 13.8274 20.9181 14.0637C20.7999 14.3001 20.9181 14.5365 21.1545 14.7728L22.809 15.8365C23.0454 15.9546 23.2817 15.9546 23.3999 15.7183C23.5181 15.4819 23.3999 15.2455 23.1636 15.0092L21.509 13.9455ZM23.5181 9.21827L21.6272 9.691C21.3908 9.80918 21.2726 10.0455 21.2726 10.2819C21.3908 10.5183 21.6272 10.7546 21.8635 10.6365L23.7545 10.1637C23.9908 10.0455 24.109 9.80918 24.109 9.57281C24.109 9.33645 23.7545 9.21827 23.5181 9.21827ZM19.1454 7.32736C19.3817 7.44554 19.6181 7.44554 19.7363 7.20918L20.6817 5.43645C20.7999 5.20009 20.6817 4.96372 20.4454 4.72736C20.3272 4.60918 20.0908 4.72736 19.8545 4.96372L18.909 6.73645C18.7908 6.97281 18.909 7.20918 19.1454 7.32736Z" fill="url(#paint0_linear_455_80)" fill-opacity="0.5"/>
+<path id="Vector_2" d="M15.4815 22.0999H5.79063C4.84517 22.0999 3.78153 21.7454 3.07244 21.0363C2.24517 20.3272 1.89062 19.2635 1.89062 18.1999C1.89062 16.4272 3.07244 14.8908 4.72699 14.4181C5.55426 12.0544 7.79972 10.3999 10.2815 10.3999C12.1724 10.3999 13.9452 11.3454 15.127 12.8817H15.4815C18.0815 12.8817 20.0906 15.009 20.0906 17.4908C20.0906 19.3817 19.027 21.0363 17.2543 21.7454C16.6634 21.9817 16.0724 22.0999 15.4815 22.0999Z" fill="url(#paint1_linear_455_80)" fill-opacity="0.5"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_455_80" x1="17.1131" y1="3.86865" x2="17.1131" y2="15.9141" gradientUnits="userSpaceOnUse">
+<stop offset="0.229167" stop-color="white"/>
+<stop offset="1" stop-color="#D6F5FF" stop-opacity="0.8"/>
+</linearGradient>
+<linearGradient id="paint1_linear_455_80" x1="10.9906" y1="10.3999" x2="10.9906" y2="22.0999" gradientUnits="userSpaceOnUse">
+<stop offset="0.229167" stop-color="white"/>
+<stop offset="1" stop-color="#D6F5FF" stop-opacity="0.8"/>
+</linearGradient>
+</defs>
+</svg>

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DisposalProcess/data.js

@@ -0,0 +1,37 @@
+export const timeLine1List = [
+  {
+    time: "16.36",
+    label: "接警记录",
+    isActive: true,
+  },
+  {
+    time: "16.36",
+    label: "指令下达",
+    isActive: true,
+  },
+  {
+    time: "16.36",
+    label: "清障到达",
+    isActive: true,
+  },
+  {
+    time: "",
+    label: "安全防护",
+    isActive: false,
+  },
+  {
+    time: "",
+    label: "开始清障",
+    isActive: false,
+  },
+  {
+    time: "",
+    label: "清障结束",
+    isActive: false,
+  },
+  {
+    time: "",
+    label: "恢复畅通",
+    isActive: false,
+  },
+];

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DisposalProcess/images/reduce.svg

@@ -0,0 +1,9 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 1142814827">
+<g id="Vector">
+<path d="M2.6 0H17.4C18.0896 0 18.7509 0.273928 19.2385 0.761522C19.7261 1.24912 20 1.91044 20 2.6V17.4C20 18.0896 19.7261 18.7509 19.2385 19.2385C18.7509 19.7261 18.0896 20 17.4 20H2.6C1.91044 20 1.24912 19.7261 0.761522 19.2385C0.273928 18.7509 0 18.0896 0 17.4L0 2.6C0 1.91044 0.273928 1.24912 0.761522 0.761522C1.24912 0.273928 1.91044 0 2.6 0ZM2.6 1.4C2.28174 1.4 1.97652 1.52643 1.75147 1.75147C1.52643 1.97652 1.4 2.28174 1.4 2.6V17.4C1.4 17.7183 1.52643 18.0235 1.75147 18.2485C1.97652 18.4736 2.28174 18.6 2.6 18.6H17.4C17.7183 18.6 18.0235 18.4736 18.2485 18.2485C18.4736 18.0235 18.6 17.7183 18.6 17.4V2.6C18.6 2.44241 18.569 2.28637 18.5087 2.14078C18.4483 1.99519 18.36 1.8629 18.2485 1.75147C18.1371 1.64004 18.0048 1.55165 17.8592 1.49134C17.7136 1.43104 17.5576 1.4 17.4 1.4H2.6Z" fill="white"/>
+<path d="M3.88449 16.9858L7.79982 13.0712V16.0998C7.79982 16.2855 7.87357 16.4635 8.00485 16.5948C8.13612 16.7261 8.31417 16.7998 8.49982 16.7998C8.68547 16.7998 8.86352 16.7261 8.99479 16.5948C9.12607 16.4635 9.19982 16.2855 9.19982 16.0998V11.4998C9.19989 11.3994 9.17836 11.3002 9.13669 11.2088C9.09501 11.1174 9.03416 11.0361 8.95827 10.9703C8.88239 10.9046 8.79324 10.8559 8.69688 10.8276C8.60052 10.7994 8.49921 10.7922 8.39982 10.8065C8.36714 10.8025 8.33316 10.7998 8.29982 10.7998H3.69982C3.6079 10.7998 3.51687 10.8179 3.43194 10.8531C3.34701 10.8883 3.26985 10.9399 3.20485 11.0049C3.13985 11.0699 3.08828 11.147 3.05311 11.232C3.01793 11.3169 2.99982 11.4079 2.99982 11.4998C2.99982 11.5918 3.01793 11.6828 3.05311 11.7677C3.08828 11.8526 3.13985 11.9298 3.20485 11.9948C3.26985 12.0598 3.34701 12.1114 3.43194 12.1466C3.51687 12.1817 3.6079 12.1998 3.69982 12.1998H6.69117L2.89449 15.9958C2.76321 16.1271 2.68945 16.3052 2.68945 16.4908C2.68945 16.6765 2.76321 16.8546 2.89449 16.9858C3.02577 17.1171 3.20383 17.1909 3.38949 17.1909C3.57515 17.1909 3.75321 17.1171 3.88449 16.9858Z" fill="white"/>
+<path d="M10.8532 8.76765C10.8884 8.85254 10.94 8.92963 11.0052 8.99451C11.1318 9.12117 11.3065 9.19984 11.4998 9.19984H16.0998C16.2855 9.19984 16.4635 9.12609 16.5948 8.99481C16.7261 8.86354 16.7998 8.68549 16.7998 8.49984C16.7998 8.31419 16.7261 8.13614 16.5948 8.00486C16.4635 7.87359 16.2855 7.79984 16.0998 7.79984H13.0712L16.9858 3.88451C17.1171 3.75322 17.1909 3.57517 17.1909 3.3895C17.1909 3.20384 17.1171 3.02578 16.9858 2.8945C16.8545 2.76321 16.6765 2.68945 16.4908 2.68945C16.3052 2.68945 16.1271 2.7632 15.9958 2.89449L12.1998 6.69117V3.89984C12.1998 3.71419 12.1261 3.53614 11.9948 3.40486C11.8635 3.27359 11.6855 3.19984 11.4998 3.19984C11.3142 3.19984 11.1361 3.27359 11.0048 3.40486C10.8736 3.53614 10.7998 3.71419 10.7998 3.89984V8.49984C10.7998 8.59175 10.8179 8.68276 10.8532 8.76765Z" fill="white"/>
+</g>
+</g>
+</svg>

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DisposalProcess/images/zoom.svg

@@ -0,0 +1,10 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 1142815211">
+<g id="Group 1142814900">
+<path id="Vector" d="M2.6 0H17.4C18.0896 0 18.7509 0.273928 19.2385 0.761522C19.7261 1.24912 20 1.91044 20 2.6V17.4C20 18.0896 19.7261 18.7509 19.2385 19.2385C18.7509 19.7261 18.0896 20 17.4 20H2.6C1.91044 20 1.24912 19.7261 0.761522 19.2385C0.273928 18.7509 0 18.0896 0 17.4L0 2.6C0 1.91044 0.273928 1.24912 0.761522 0.761522C1.24912 0.273928 1.91044 0 2.6 0ZM2.6 1.4C2.28174 1.4 1.97652 1.52643 1.75147 1.75147C1.52643 1.97652 1.4 2.28174 1.4 2.6V17.4C1.4 17.7183 1.52643 18.0235 1.75147 18.2485C1.97652 18.4736 2.28174 18.6 2.6 18.6H17.4C17.7183 18.6 18.0235 18.4736 18.2485 18.2485C18.4736 18.0235 18.6 17.7183 18.6 17.4V2.6C18.6 2.44241 18.569 2.28637 18.5087 2.14078C18.4483 1.99519 18.36 1.8629 18.2485 1.75147C18.1371 1.64004 18.0048 1.55165 17.8592 1.49134C17.7136 1.43104 17.5576 1.4 17.4 1.4H2.6Z" fill="white"/>
+</g>
+<g id="Frame">
+<path id="Vector_2" d="M4.23438 14.8707L7.84332 11.2618C7.86969 11.2354 7.90546 11.2206 7.94275 11.2206C7.98005 11.2206 8.01581 11.2354 8.04218 11.2618L8.73824 11.9578C8.76461 11.9842 8.77942 12.02 8.77942 12.0572C8.77942 12.0945 8.76461 12.1303 8.73824 12.1567L5.12931 15.7656H7.75C7.90534 15.7656 8.03125 15.8915 8.03125 16.0469V16.8906C8.03125 16.9279 8.01643 16.9637 7.99006 16.9901C7.96369 17.0164 7.92792 17.0312 7.89062 17.0312H3.53125C3.22059 17.0312 2.96875 16.7794 2.96875 16.4688V12.1094C2.96875 12.0721 2.98357 12.0363 3.00994 12.0099C3.03631 11.9836 3.07208 11.9688 3.10938 11.9688H3.95312C4.10846 11.9688 4.23438 12.0947 4.23438 12.25V14.8707ZM15.7656 5.12499L12.1545 8.7361C12.1415 8.74916 12.126 8.75952 12.1089 8.76658C12.0918 8.77365 12.0736 8.77729 12.0551 8.77729C12.0366 8.77729 12.0183 8.77365 12.0013 8.76658C11.9842 8.75952 11.9687 8.74916 11.9557 8.7361L11.2596 8.04004C11.2465 8.02698 11.2362 8.01148 11.2291 7.99442C11.222 7.97735 11.2184 7.95907 11.2184 7.9406C11.2184 7.92213 11.222 7.90384 11.2291 7.88678C11.2362 7.86972 11.2465 7.85422 11.2596 7.84116L14.8664 4.23438H12.25C12.0947 4.23438 11.9688 4.10846 11.9688 3.95312V3.10938C11.9688 3.07208 11.9836 3.03631 12.0099 3.00994C12.0363 2.98357 12.0721 2.96875 12.1094 2.96875H16.4688C16.7794 2.96875 17.0312 3.22059 17.0312 3.53125V7.89062C17.0312 7.92792 17.0164 7.96369 16.9901 7.99006C16.9637 8.01643 16.9279 8.03125 16.8906 8.03125H16.0469C15.8915 8.03125 15.7656 7.90534 15.7656 7.75V5.12499Z" fill="white"/>
+</g>
+</g>
+</svg>

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

@@ -1,20 +1,88 @@
 <template>
   <Card class='DisposalProcess' title="处置过程">
-    DisposalProcess
+    <template #title-suffix>
+      <ButtonGradient class="title-button">
+        事件解除
+      </ButtonGradient>
+      <ButtonGradient class="title-button">
+        协同调度
+      </ButtonGradient>
+      <ButtonGradient class="title-button">
+        无需清障
+      </ButtonGradient>
+      <ButtonGradient class="title-button">
+        重要事件上报
+      </ButtonGradient>
+      <ButtonGradient class="title-button">
+        路赔
+      </ButtonGradient>
+      <ButtonGradient class="title-button special">
+        <template #prefix>
+          <div class="icon" :style="{ backgroundImage: `url(${require(`./images/${'zoom'}.svg`)})` }" />
+        </template>
+      </ButtonGradient>
+    </template>
+
+    <TimeLine1 :data="timeLine1List" :filterDistance="filterDistance" />
+    <TimeLine2 :data="timeLine2List" style="flex: 1;" />
   </Card>
 </template>
 
 <script>
-import Card from "./../../components/Card.vue"
+import Card from "./../../components/Card.vue";
+import ButtonGradient from '@screen/components/Buttons/ButtonGradient.vue';
+
+import TimeLine1 from "@screen/components/TimeLine/TimeLine1/index";
+import TimeLine2 from "@screen/components/TimeLine/TimeLine2/index";
+
+import { timeLine1List } from "./data"
 
 export default {
   name: 'DisposalProcess',
+  inject: ["adpScale"],
   components: {
-    Card
+    Card,
+    ButtonGradient,
+    TimeLine1,
+    TimeLine2
+  },
+  data() {
+    return {
+      timeLine1List,
+      timeLine2List: Array.from({ length: 6 }).map(() => ({
+        title: "接警记录",
+        time: "2023-12-21 16:35:44",
+        name: "甘易玫",
+        desc: "描述性文字文字文字文字文字文字文字文字描述性文字文字文字文字文字文字文字文字",
+        posts: '淄博发展公司管理员'
+      })),
+    }
+  },
+  methods: {
+    filterDistance(distance) {
+      return 1 / this.adpScale.scaleX * distance
+    }
   }
 }
 </script>
 
 <style lang='scss' scoped>
-.DisposalProcess {}
+.DisposalProcess {
+
+
+  .special {
+    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;
+    }
+  }
+}
 </style>

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/EventInformation/images/congestion.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M9 0C4.02945 0 0 4.02942 0 9C0 13.9706 4.02945 18 9 18C13.9706 18 18 13.9706 18 9C18 4.02944 13.9707 0 9 0ZM13.9486 6.84275L8.15496 12.7718C7.88844 13.0446 7.45606 13.0446 7.18957 12.7718L4.05145 9.56015C3.78475 9.28735 3.78475 8.84498 4.05145 8.5721C4.31795 8.2992 4.75035 8.2992 5.01684 8.5721L7.67229 11.2896L12.983 5.85462C13.2497 5.58174 13.6821 5.58174 13.9486 5.85462C14.2153 6.12747 14.2153 6.56987 13.9486 6.84275H13.9486Z" fill="#FF5F5F"/>
+</svg>

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/EventInformation/images/normal.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M9 0C4.02945 0 0 4.02942 0 9C0 13.9706 4.02945 18 9 18C13.9706 18 18 13.9706 18 9C18 4.02944 13.9707 0 9 0ZM13.9486 6.84275L8.15496 12.7718C7.88844 13.0446 7.45606 13.0446 7.18957 12.7718L4.05145 9.56015C3.78475 9.28735 3.78475 8.84498 4.05145 8.5721C4.31795 8.2992 4.75035 8.2992 5.01684 8.5721L7.67229 11.2896L12.983 5.85462C13.2497 5.58174 13.6821 5.58174 13.9486 5.85462C14.2153 6.12747 14.2153 6.56987 13.9486 6.84275H13.9486Z" fill="#3DE8FF"/>
+</svg>

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

@@ -8,23 +8,112 @@
         编写
       </ButtonGradient>
     </template>
-    EventInformation
+
+    <Descriptions :list="list" style="gap: 15px;" />
+
+    <div class="road-lane">
+      <div v-for="i in 11">
+        <img v-if="i != 6" src="./images/normal.svg">
+      </div>
+    </div>
+    <div class="bottom-info">
+      <div class="tag">拥堵五级事件</div>
+    </div>
   </Card>
 </template>
 
 <script>
 import Card from "./../../components/Card.vue"
 import ButtonGradient from '@screen/components/Buttons/ButtonGradient.vue';
+import Descriptions from '@screen/components/Descriptions.vue';
 
 export default {
   name: 'EventInformation',
   components: {
     Card,
-    ButtonGradient
+    ButtonGradient,
+    Descriptions
+  },
+  data() {
+    return {
+
+      list: [
+        {
+          label: '情报时间',
+          text: '2024-01-03 14:00:21',
+          gridColumn: 2
+        },
+        {
+          label: '情报来源',
+          text: '96659',
+          gridColumn: 2
+        },
+        {
+          label: '事件类型',
+          text: '交通事故',
+        },
+        {
+          label: '所属路线',
+          text: 'G34济菏高速',
+        },
+        {
+          label: '道路方向',
+          text: '菏泽方向',
+        },
+        {
+          label: '桩号：',
+          text: "K266+001",
+        }
+      ]
+    }
   }
 }
 </script>
 
 <style lang='scss' scoped>
-.EventInformation {}
+.EventInformation {
+  ::v-deep {
+    >.content {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      gap: 12px;
+    }
+  }
+
+  .road-lane {
+    background-image: url(./images/lane.svg);
+    flex: 1;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    display: grid;
+    grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr 0.6fr 1fr 1fr 1fr 1fr 1.2fr;
+
+    >div {
+      display: flex;
+      align-items: end;
+      padding-bottom: 18px;
+      justify-content: center;
+    }
+  }
+
+  .bottom-info {
+    display: flex;
+    gap: 9px;
+
+    .tag {
+      padding: 3px 6px;
+      height: 24px;
+      background: rgba(245, 80, 80, 0.4);
+      border-radius: 2px;
+      border: 1px solid #F55050;
+
+      font-size: 12px;
+      font-family: Source Han Sans SC, Source Han Sans SC;
+      font-weight: 400;
+      color: #F55050;
+      line-height: 14px;
+    }
+  }
+}
 </style>

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

@@ -13,7 +13,7 @@
 import Dialog from "@screen/components/Dialog/index";
 import TimeLine1 from "@screen/components/TimeLine/TimeLine1/index";
 import TimeLine2 from "@screen/components/TimeLine/TimeLine2/index";
-import Form from "./Form.vue"
+import Form from '@screen/components/FormConfig';
 import { formList, timeLine1List } from "./data"
 
 export default {
@@ -53,7 +53,7 @@ export default {
         this.$emit('update:value', val)
       }
     }
-  },
+  }
 }
 </script>
 

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/data.js

@@ -0,0 +1,22 @@
+export const tabMap = {
+  AlarmEvents: {
+    state: 5,
+    textColor: "#007FF4",
+    text: "去确认",
+  },
+  EventsConfirmed: {
+    state: 5,
+    textColor: "#007FF4",
+    text: "去确认",
+  },
+  DisposingEvents: {
+    state: 4,
+    textColor: "#007FF4",
+    text: "去处置",
+  },
+  IncidentDisposed: {
+    state: 3,
+    textColor: "#007FF4",
+    text: "处置记录",
+  },
+};

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

@@ -1,6 +1,6 @@
 <template>
   <div class='RoadNetworkMonitoring2'>
-    <Tabs :panels="panels" :default-active="activeName" />
+    <Tabs :panels="panels" :default-active="activeName" @select="handleSelect" />
 
     <!-- 搜索栏 -->
     <div class="filter">
@@ -30,8 +30,8 @@
 
     <!-- 内容 -->
     <div class="body">
-      <RoadStateCard v-for="(item, index) in data" :cardData="item" :key="index"
-        :lastBtnColor="item.state === 5 ? '#007FF4' : void 0" :lastBtnText="item.state === 5 ? '去确认' : void 0"  @firstBtnClick="firstBtnClick"/>
+      <RoadStateCard v-for="(item, index) in data" :key="index" v-bind="getStateCardBind(item)"
+        @firstBtnClick="firstBtnClick" />
     </div>
 
     <!-- 分页 -->
@@ -55,6 +55,21 @@ import Pagination from '@screen/components/Pagination.vue';
 import InputSearch from '@screen/components/InputSearch/index.vue';
 import EventDetailDialog from "./EventDetailDialog/index";
 import FormEvent from "./FormEvent/index";
+import { tabMap } from "./data";
+
+function getRandomData(min = 1, max = 15) {
+  return Math.floor(Math.random() * (max - min + 1)) + min
+}
+
+function getMockData() {
+  return Array.from({ length: getRandomData(9, 24) }).map(() => ({
+    time: "2023.12.22 13:00:00",
+    source: "视频智能识别",
+    location: "k100+000",
+    direction: "济南方向"
+  }))
+}
+
 export default {
   name: 'RoadNetworkMonitoring2',
   components: {
@@ -68,42 +83,44 @@ export default {
   },
   data() {
     return {
-      data: Array.from({ length: 15 }).map(() => ({
-        time: "2023.12.22 13:00:00",
-        source: "视频智能识别",
-        location: "k100+000",
-        direction: "济南方向",
-        state: (() => {
-          const min = 1;
-          const max = 5;
-          return Math.floor(Math.random() * (max - min + 1)) + min;
-        })()
-      })),
-
-      activeName: "告警事件(20)",
+      data: getMockData(),
+
+      activeName: "AlarmEvents",
       panels: [
         {
           label: "告警事件(20)",
-          key: "告警事件(20)"
+          key: "AlarmEvents"
         },
         {
           label: "待确认事件(125)",
-          key: "待确认事件(125)"
+          key: "EventsConfirmed"
         },
         {
           label: "处置中事件(230)",
-          key: "处置中事件(230)"
+          key: "DisposingEvents"
         },
         {
           label: "已处置事件(76)",
-          key: "已处置事件(76)"
+          key: "IncidentDisposed"
         },
       ],
-      eventDetailDialogVisible:false,
+      eventDetailDialogVisible: false,
       isShowAddNew: false
     }
   },
   methods: {
+    handleSelect(activeName) {
+      this.activeName = activeName;
+      this.data = getMockData();
+    },
+    getStateCardBind(item) {
+      const { state, textColor, text } = tabMap[this.activeName]
+      return {
+        cardData: { ...item, state },
+        lastBtnColor: textColor,
+        lastBtnText: text
+      }
+    },
     onAddNew() {
       this.isShowAddNew = true;
     },
@@ -145,7 +162,7 @@ export default {
 
   .body {
     flex: 1;
-    overflow: hidden;
+    overflow: auto;
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     grid-gap: 24px;