feat 感知事件弹窗 持续时间定时计算

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

@@ -1,19 +1,10 @@
 <template>
-  <ElCheckboxGroup
-    v-bind="$attrs"
-    v-on="$listeners"
-    class="ElCheckboxGroup"
-    :style="{ gap }"
-  >
-    <ElCheckbox
-      v-for="item in options"
-      :disabled="item.disabled"
-      :label="item[id] || item[label]"
-      :key="item[id] || item[label]"
-    >
+  <ElCheckboxGroup v-bind="$attrs" v-on="$listeners" class="ElCheckboxGroup" :style="{ gap }">
+    <ElCheckbox v-for="item in options" :disabled="item.disabled" :label="item[id] || item[label]"
+      :key="item[id] || item[label]">
       <slot :name="item[id] || item[label]" :data="item">{{
-        item[label]
-      }}</slot>
+    item[label]
+  }}</slot>
     </ElCheckbox>
   </ElCheckboxGroup>
 </template>
@@ -58,7 +49,6 @@ export default {
       display: flex;
       align-items: center;
       gap: 6px;
-      width: 100px;
 
       .el-checkbox__input {
         line-height: 0;

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/PerceiveEvent/index.vue

@@ -33,10 +33,32 @@ import Carousel from "@screen/pages/control/event/event/EventDetailDialog/Carous
 import { WarningTypeList, WarningSubclassList } from "@screen/utils/enum.js"
 // import { getRoadInfoByStakeMark, getProduct } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js"
 import { dialogDelayVisible } from "./../mixin"
-import { LaneOccupancyList } from "@screen/utils/enum.js"
+import { LaneOccupancyList, DirectionTypes } from "@screen/utils/enum.js"
+
 
 let vehicleTypeList = [];
 
+function getDuration(warningTime) {
+  const currentTime = moment();
+  const specifiedTime = moment(warningTime);
+
+  const duration = moment.duration(currentTime.diff(specifiedTime));
+
+  const hours = Math.floor(duration.asHours());
+  const minutes = Math.floor(duration.asMinutes()) % 60;
+  const seconds = Math.floor(duration.asSeconds()) % 60;
+
+  return `${padZero(hours)}:${padZero(minutes)}:${padZero(seconds)}`;
+}
+
+function padZero(num) {
+  num = num.toString();
+  while (num.length < 2) {
+    num = "0" + num;
+  }
+  return num;
+}
+
 // 感知事件
 export default {
   name: 'PerceiveEvent',
@@ -52,6 +74,7 @@ export default {
   },
   data() {
     return {
+      interval: null,
       loading: true,
       activeName: 'first',
       deviceControlVisible: false,
@@ -76,6 +99,12 @@ export default {
           key: "stakeMark",
           type: "text",
         },
+        {
+          label: "路段方向:",
+          key: "direction",
+          type: "text",
+          isAlone: true
+        },
         {
           label: "事件来源:",
           key: "warningSource",
@@ -138,11 +167,11 @@ export default {
           key: "duration",
           type: "text",
         },
-        {
-          label: "天气情况:",
-          key: "weather",
-          type: "text",
-        },
+        // {
+        //   label: "天气情况:",
+        //   key: "weather",
+        //   type: "text",
+        // },
       ]
     }
   },
@@ -150,6 +179,11 @@ export default {
     this.getDetails();
     this.getVehicleTypeList();
   },
+  async mounted() {
+  },
+  beforeDestroy() {
+    clearInterval(this.interval);
+  },
   methods: {
     getVehicleTypeList() {
       if (vehicleTypeList.length) return;
@@ -227,6 +261,9 @@ export default {
           setTimeout(() => {
             this.$refs.FormConfigRef.reset(true);
           });
+          this.data.direction = DirectionTypes[this.data.direction];
+          this.data.duration = getDuration(this.data.warningTime);
+          this.interval = setInterval(() => { this.data.duration = getDuration(this.data.warningTime); }, 1000)
         })
         .catch((e) => {
           Message.error("详情获取失败" + e);

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/httpList.js

@@ -41,6 +41,13 @@ export function getNearCamera(pileNum) {
   });
 }
 
+function padZero(num) {
+  num = num.toString();
+  while (num.length < 3) {
+    num = "0" + num;
+  }
+  return num;
+}
 /**
  *  球机进行控制
  * @param {string} camId 相机 ID
@@ -269,13 +276,7 @@ export function getProduct(productId) {
       });
   });
 }
-function padZero(num) {
-  num = num.toString();
-  while (num.length < 3) {
-    num = "0" + num;
-  }
-  return num;
-}
+
 /**
  * 交通事件 列表 根据类型获取
  * @param {number} eventType
@@ -327,7 +328,7 @@ export function getEventTopicList(eventType, options = {}) {
 export function getPerceiveEventList(data = {}, options = {}) {
   return new Promise((resolve, reject) => {
     const completeTime = moment().add(1, "d").format("YYYY-MM-DD");
-    const startTime = moment().add(-30, "d").format("YYYY-MM-DD");
+    const startTime = moment().add(-7, "d").format("YYYY-MM-DD");
     data.startTime = startTime;
     data.completeTime = completeTime;
 

ruoyi-ui/src/views/JiHeExpressway/utils/enum.js

@@ -250,7 +250,7 @@ export const WarningSubclassList = Object.keys(WarningSubclass).reduce(
 
 export const LaneOccupancy = {
   0: {
-    text: "应急车道",
+    text: "应急",
   },
   1: {
     text: "行1",
@@ -303,3 +303,9 @@ export const ChildTypes = {
   1: CameraChildTypes,
   2: BoardChildTypes,
 };
+
+export const DirectionTypes = {
+  1: "菏泽方向",
+  3: "济南方向",
+  2: "双向",
+};