feat 更新 增加首页感知事件误报功能

ruoyi-ui/package.json

@@ -107,7 +107,8 @@
     "vuedraggable": "2.24.3",
     "vuescroll": "^4.18.1",
     "vuex": "3.6.0",
-    "zrender": "^5.4.4"
+    "zrender": "^5.4.4",
+    "mitt": "^3.0.1"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "4.4.6",

ruoyi-ui/src/main.js

@@ -54,6 +54,8 @@ import eventDialog from "@/components/eventDialogTable/eventDialog.vue";
 import eventDialogTable from "@/components/eventDialogTable";
 import evtDialogOneThing from "@/components/eventDialogTable/evtDialogOneThing.vue";
 import evtDialogVideo from "@/components/eventDialogTable/video.vue";
+import mitt from "mitt";
+const emitter = mitt();
 
 // 大屏适配
 import dataV from "@jiaminghi/data-view";
@@ -103,6 +105,7 @@ Vue.prototype.selectDictLabels = selectDictLabels;
 Vue.prototype.handleTree = handleTree;
 Vue.prototype.socket = Socket;
 Vue.prototype.numberMul = numberMul;
+Vue.prototype.emitter = emitter;
 
 // gis
 Vue.prototype.$GlobalConfig = config.GlobalConfig;

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

@@ -1,38 +1,23 @@
 <template>
   <Teleport>
     <Transition name="fade">
-      <div
-        :class="['mask-layer', { 'none-mask': noneMask }]"
-        v-if="modelVisible"
-      >
-        <BackgroundClip
-          class="dialog"
+      <div :class="['mask-layer', { 'none-mask': noneMask }]" v-if="modelVisible">
+        <BackgroundClip class="dialog"
           clipPath="polygon(calc(100% - var(--clip-width)) 0, 100% var(--clip-width), 100% 100%, var(--clip-width) 100%, 0 calc(100% - var(--clip-width)), 0 0)"
           borderColor="linear-gradient(180deg, rgba(78, 174, 204, .9), rgba(78, 174, 204, 0))"
           bgColor="linear-gradient(180deg, rgba(14, 69, 92, 0.9) 0%, rgba(20, 89, 119, 0.9) 100%)"
-          ref="DialogContentRef"
-        >
+          ref="DialogContentRef">
           <div class="dialog-title">
-            <img
-              class="title-icon"
-              src="@screen/images/dialog/title-icon.svg"
-            />
+            <img class="title-icon" src="@screen/images/dialog/title-icon.svg" />
             <span>{{ title }}</span>
-            <img
-              class="icon-close"
-              @click.stop="modelVisible = false"
-              src="@screen/images/dialog/icon-close.svg"
-            />
+            <img class="icon-close" @click.stop="modelVisible = false" src="@screen/images/dialog/icon-close.svg" />
           </div>
 
           <div class="dialog-content">
             <slot />
           </div>
 
-          <img
-            class="bottom-right"
-            src="@screen/images/dialog/right-bottom.svg"
-          />
+          <img class="bottom-right" src="@screen/images/dialog/right-bottom.svg" />
 
           <div class="footer" v-if="$slots.footer">
             <slot name="footer"></slot>
@@ -88,18 +73,30 @@ export default {
       },
     },
   },
+  methods: {
+    updateDialogVisible(bool) {
+      this.modelVisible = bool;
+      console.log("modelVisible", this.modelVisible);
+    },
+  },
+  mounted() {
+    this.emitter.on("updateDialogVisible", this.updateDialogVisible);
+  },
   computed: {
     modelVisible: {
       get() {
         return this.visible;
       },
       set(val) {
+        console.log("val", "val")
         this.$emit("update:value", val);
       },
     },
   },
   beforeDestroy() {
+    console.log("beforeDestory111")
     this.modelVisible = false;
+    this.emitter.off("updateDialogVisible", this.updateDialogVisible);
   },
 };
 </script>
@@ -203,7 +200,7 @@ export default {
     padding: 0 27px;
 
     ::v-deep {
-      > div {
+      >div {
         min-width: 96px;
       }
     }

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

@@ -12,7 +12,7 @@
     </div>
 
     <template #footer>
-      <Button>误报</Button>
+      <Button @click.native="onDelete">误报</Button>
       <Button style="background-color: rgba(0, 179, 204, 0.3)" @click.native="obverseVisible = false">取消</Button>
       <Button @click.native="updateEvent" :loading="btnLoading">确定</Button>
     </template>
@@ -34,6 +34,8 @@ import Carousel from "@screen/pages/control/event/event/EventDetailDialog/Carous
 import { WarningTypeList, WarningSubclassList, LaneOccupancyList, DirectionTypes } from "@screen/utils/enum.js";
 // import { getRoadInfoByStakeMark, getProduct } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js"
 import { dialogDelayVisible } from "./../mixin";
+import { markerClusterIns } from "@screen/pages/Home/components/RoadAndEvents/utils/map.js"
+import { eventMap } from "@screen/pages/Home/components/RoadAndEvents/utils/buttonEvent";
 
 let vehicleTypeList = [];
 
@@ -184,6 +186,29 @@ export default {
     clearInterval(this.interval);
   },
   methods: {
+    onDelete() {
+      const id = this.dialogData.id;
+      id && this.$confirm('确定误报吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        request({
+          url: `/business/warning/delete`,
+          method: 'post',
+          data: { id }
+        }).then(result => {
+          if (result.code == 200) Message.success('成功！');
+          else Message.error(result?.msg);
+          const item = { title: "感知事件" };
+
+          eventMap[`事件专题/${item.title}_close`]?.call(this, item, (item) => { return item?.extData?.id == id }, "special");
+          // markerClusterIns.setData();
+
+        });
+
+      })
+    },
     getVehicleTypeList() {
       if (vehicleTypeList.length) return;
 

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

@@ -6,7 +6,7 @@ import {
 import { delay } from "@screen/utils/common";
 import { Message } from "element-ui";
 import { EventTopics } from "@screen/utils/enum.js";
-import { debounce, cloneDeep } from "lodash";
+import { debounce, cloneDeep, find } from "lodash";
 import Vue from "vue";
 
 import { markerClusterIns, getContent, getLatAndLng } from "./map";
@@ -278,14 +278,23 @@ export const eventMap = {
 
     loadingMessage?.close();
 
-    cacheRemoveFunc[`事件专题/${item.title}`] = () => {
-      cbCall();
-      removeDataPreHandle(removeData);
-      markerClusterIns.removeData(removeData);
+    cacheRemoveFunc[`事件专题/${item.title}`] = (filter, type) => {
+      //type为special才重新赋值removeData
+      let handleData = removeData;
+      if (filter && type == "special") {
+        //走误报删除处理 只删除一个
+        const findItem = find(removeData, filter);
+        handleData = [findItem];
+        window.infoWindow.close();
+        this.emitter.emit("updateDialogVisible", false);
+      } else cbCall(); //非误报执行,需更新选中事件集合
+      removeDataPreHandle(handleData);
+      markerClusterIns.removeData(handleData);
     };
   },
-  "事件专题/感知事件_close"(item) {
-    cacheRemoveFunc[`事件专题/${item.title}`]?.();
+  "事件专题/感知事件_close"(item, filter, type) {
+    //感知事件 误报删除兼容
+    cacheRemoveFunc[`事件专题/${item.title}`]?.(filter, type);
   },
 };