feat 首页接口替换 & 筛选逻辑增加

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

@@ -1,35 +1,16 @@
 <template>
   <div class="HomeFilter">
-    <ElPopover
+    <ElPopover trigger="manual" :value="activeIcon === 'filter'" :visibleArrow="false" placement="left"
-      trigger="manual"
+      popper-class="global-input-search-popover">
-      :value="activeIcon === 'filter'"
+      <Button :class="['btn', { 'btn-active': activeIcon }]" slot="reference" @click.native="handleClick('filter')">
-      :visibleArrow="false"
-      placement="left"
-      popper-class="global-input-search-popover"
-    >
-      <Button
-        :class="['btn', { 'btn-active': activeIcon }]"
-        slot="reference"
-        @click.native="handleClick('filter')"
-      >
         <img src="@screen/images/home-filter/filter.svg" />
       </Button>
 
       <div class="body">
         <div class="title">设备筛选</div>
-        <Form
+        <Form labelWidth="90px" column="1" class="form" ref="FormConfigRef" :formList="formList" />
-          labelWidth="90px"
-          column="1"
-          class="form"
-          ref="FormConfigRef"
-          :formList="formList"
-        />
-
         <div class="footer">
-          <Button
+          <Button style="background-color: rgba(0, 179, 204, 0.3)" @click.native="handleResetForm">
-            style="background-color: rgba(0, 179, 204, 0.3)"
-            @click.native="handleResetForm"
-          >
             重置
           </Button>
           <Button @click.native="handleSearch"> 搜索 </Button>
@@ -43,10 +24,12 @@
 import Button from "@screen/components/Buttons/Button.vue";
 import Form from "@screen/components/FormConfig";
 import * as PresetFormItems from "@screen/common/PresetFormItems.js";
-import { merge, cloneDeep } from "lodash";
+import { merge, cloneDeep, find } from "lodash";
 import request from "@/utils/request";
 import { log } from "mathjs";
+import { ChildTypes } from "@screen/utils/enum.js"
 
+const DeviceTypeIds = [1, 2];
 export default {
   name: "HomeFilter",
   components: {
@@ -61,19 +44,59 @@ export default {
         PresetFormItems.endStation,
         {
           label: "设备类型:",
-          key: "deviceType",
+          key: "childType",
           type: "select",
           options: {
             options: [],
           },
-          // visible: data => {
+          visible: data => {
-          //   if (data.searchType == 1) {
+            for (let id of DeviceTypeIds) {
-          //     return true
+              if (this.activeDeviceTypes.indexOf(`路测设备_${id}`) >= 0)
-          //   }
+                return true;
-          // },
+            }
+          },
+        },
+        {
+          label: "设备状态:",
+          key: "deviceState",
+          type: "select",
+          default: null,
+          options: {
+            options: [{
+              label: "所有",
+              value: null
+            }, {
+              label: "在线",
+              value: 1
+            }, {
+              label: "离线",
+              value: 0
+            }]
+          },
+          visible: data => {
+            if (find(this.activeDeviceTypes, (type => type.match("路测设备_"))))
+              return true;
+          },
         },
-      ],
+      ]
-    };
+    }
+  },
+  watch: {
+    activeDeviceTypes: {
+      handler(val) {
+        const options = []
+        for (let id of DeviceTypeIds) {
+          if (this.activeDeviceTypes.indexOf(`路测设备_${id}`) >= 0) {
+            const IdChildTypes = ChildTypes[id];
+            options.push(...Object.keys(IdChildTypes).map(key => { return { label: IdChildTypes[key], value: key } }));
+          }
+          // if (this.activeDeviceTypes.indexOf("路测设备_2") >= 0) options.push(...Object.keys(BoardChildTypes).map(key => { return { label: BoardChildTypes[key], value: key } }));
+        }
+        this.formList[2].options.options = options;
+      },
+      immediate: true,
+      deep: true
+    }
   },
   methods: {
     handleClick(type) {
@@ -97,6 +120,7 @@ export default {
       if (!data.endStakeMark[0] || !data.endStakeMark[1])
         delete data.endStakeMark;
       this.activeIcon = null;
+      console.log(data, "data");
       this.filterEnd(data);
     },
     async getDeviceTypeOptions() {
@@ -110,6 +134,7 @@ export default {
       // return ;
     },
   },
+  inject: ["activeDeviceTypes"],
   async created() {
     // await this.getDeviceTypeOptions();
   },
@@ -126,11 +151,9 @@ div.el-popper.global-input-search-popover {
 
   .body {
     .title {
-      background: linear-gradient(
+      background: linear-gradient(90deg,
-        90deg,
+          #237e9b 0%,
-        #237e9b 0%,
+          rgba(23, 145, 184, 0) 100%);
-        rgba(23, 145, 184, 0) 100%
-      );
       padding: 3px 9px;
       position: absolute;
       top: 0;
@@ -140,7 +163,8 @@ div.el-popper.global-input-search-popover {
   }
 }
 </style>
-<style lang="scss" scoped>
+
+<style lang='scss' scoped>
 .HomeFilter {
   .btn {
     padding: 9px;

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

@@ -142,16 +142,13 @@ export default {
       async handler(bool) {
         if (!bool) return;
         await Promise.allSettled((this.tabContentData || []).map(item => this.handleDeviceImmediate(item, true)))
-        // for (let item of this.tabContentData || []) {
-        //   await this.handleDeviceImmediate(item, true);
-        // };
         Object.keys(lngLatMap).forEach(key => {
           addInGraphHandle(lngLatMap[key]);
         })
       }
     }
   },
-  inject: ['getMap'],
+  inject: ['getMap', 'activeDeviceTypes'],
   created() {
     const defaultActive = 0;
 
@@ -177,15 +174,31 @@ export default {
     getMinMapLayers();
   },
   methods: {
-    setFilterData(data) {
+    async setFilterData(data) {
       this.filterData = data;
+      const tabContentData = [];
+      this.layerData.forEach((layerDataItem => {
+        layerDataItem.children.forEach(item => {
+          if (!item.status) return;
+          tabContentData.push(item);
+          // this.handleDeviceImmediate(item);
+          // this.handleDeviceImmediate(item);
+        })
+      }));
+      const eventMapCall = async (item, isDefault) => {
+        const key = getHandleDeviceType(item) || `${this.active}/${item.title}`;
+        const status = item.status;
+        // if (!eventMap[`${key}${status ? "_close" : ""}`]) return this.$emit("onClickItem", item);
+        // console.log(`${key}${status ? "" : "_close"}`, this.filterData, 'xxx');
+        await eventMap[`${key}${status ? "" : "_close"}`]?.call(this, item, this.filterData, isDefault);
+      }
+      await Promise.allSettled(tabContentData.map(item => eventMapCall(item, true)))
+
+      // Object.keys(lngLatMap).forEach(key => {
+      //   addInGraphHandle(lngLatMap[key]);
+      // });
 
-      this.layerData[1].children.forEach(item => {
-        if (!item.status) return;
 
-        this.handleDeviceImmediate(item);
-        this.handleDeviceImmediate(item);
-      })
     },
     handleClick(item) {
       this.active = item.title;
@@ -201,8 +214,15 @@ export default {
       console.log("%c [ key ]-102-「index.vue」", "font-size:15px; background:#9d63e9; color:#e1a7ff;", key);
 
       if (!eventMap[`${key}${status ? "_close" : ""}`]) return this.$emit("onClickItem", item);
-
+      console.log(`${key}${status ? "_close" : ""}`, this.filterData, isDefault)
-      await eventMap[`${key}${status ? "_close" : ""}`]?.call(this, item, this.filterData, isDefault);
+      const cb = (item, config) => {
+        const deviceType = config.deviceType;
+        const activeDeviceTypes = this.activeDeviceTypes;
+        const findIndex = activeDeviceTypes.indexOf(deviceType);
+        if (item.status) findIndex === -1 && activeDeviceTypes.push(deviceType);
+        else findIndex !== -1 && activeDeviceTypes.splice(findIndex, 1);
+      }
+      await eventMap[`${key}${status ? "_close" : ""}`]?.call(this, item, this.filterData, isDefault, cb);
     },
     handleDevice: debounce(function (item) {
       this.handleDeviceImmediate(item);

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

@@ -114,7 +114,7 @@ function resolveDataOptions(data, config, component, isDefault) {
 
 export const eventMap = {
   // 设备 需要在地图显示的
-  async "地图路测设备/map"(item, filterData, isDefault) {
+  async "地图路测设备/map"(item, filterData, isDefault, cb) {
     const config = DeviceForMap[item.title];
     let loadingMessage;
     if (!isDefault) {
@@ -140,7 +140,9 @@ export const eventMap = {
       return Message.warning(`没有${item.title}事件数据!`);
 
     eventMap[`地图路测设备/map_close`](item);
-
+    const cbCall = () =>
+      cb?.(item, { deviceType: `路测设备_${config.deviceType}` });
+    cbCall();
     const options = {
       item,
       ...config.options,
@@ -155,9 +157,11 @@ export const eventMap = {
       removeData
     );
     addDataPreHandle(removeData);
+
     markerClusterIns.addData(removeData, isDefault);
 
     cacheRemoveFunc[`地图路测设备/${item.title}`] = () => {
+      cbCall();
       removeDataPreHandle(removeData);
       markerClusterIns.removeData(removeData);
     };
@@ -167,7 +171,8 @@ export const eventMap = {
   },
 
   // 事件 需要在地图显示的
-  async "地图事件专题/map"(item, filterData, isDefault) {
+  async "地图事件专题/map"(item, filterData, isDefault, cb) {
+    const deviceType = EventTopics[item.title];
     let loadingMessage;
     if (!isDefault) {
       loadingMessage = Message.info({
@@ -177,7 +182,7 @@ export const eventMap = {
         iconClass: "el-icon-loading",
       });
     }
-    const data = await getEventTopicList(EventTopics[item.title])
+    const data = await getEventTopicList(deviceType, filterData)
       .then(async (data) => {
         await delay(600);
         return data;
@@ -192,6 +197,8 @@ export const eventMap = {
       return Message.warning(`没有${item.title}事件数据!`);
 
     eventMap[`地图事件专题/map_close`](item);
+    const cbCall = () => cb?.(item, { deviceType: `事件专题_${deviceType}` });
+    cbCall();
 
     const options = {
       stateCallback: () => true,
@@ -211,6 +218,7 @@ export const eventMap = {
     markerClusterIns.addData(removeData, isDefault);
 
     cacheRemoveFunc[`地图事件专题/${item.title}`] = () => {
+      cbCall();
       removeDataPreHandle(removeData);
       markerClusterIns.removeData(removeData);
     };
@@ -220,7 +228,7 @@ export const eventMap = {
   },
 
   // 感知事件
-  async "事件专题/感知事件"(item, filterData, isDefault) {
+  async "事件专题/感知事件"(item, filterData, isDefault, cb) {
     let loadingMessage;
     if (!isDefault) {
       loadingMessage = Message.info({
@@ -230,7 +238,8 @@ export const eventMap = {
         iconClass: "el-icon-loading",
       });
     }
-    const data = await getPerceiveEventList({warningState: 1})
+    const warningState = 1;
+    const data = await getPerceiveEventList({ warningState })
       .then(async (data) => {
         await delay(600);
         return data;
@@ -245,6 +254,8 @@ export const eventMap = {
       return Message.warning(`没有${item.title}数据!`);
 
     eventMap[`事件专题/感知事件_close`](item);
+    const cbCall = () => cb?.(item, { deviceType: `感知事件_${warningState}` });
+    cbCall();
 
     const options = {
       stateCallback: () => true,
@@ -260,6 +271,7 @@ export const eventMap = {
     loadingMessage?.close();
 
     cacheRemoveFunc[`事件专题/${item.title}`] = () => {
+      cbCall();
       removeDataPreHandle(removeData);
       markerClusterIns.removeData(removeData);
     };

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

@@ -275,8 +275,8 @@ export function getEventTopicList(eventType) {
     }
 
     request({
-      url: `/business/trafficIncidents/getEventList/${eventType}`,
+      url: `/business/trafficIncidents/getEventList?eventType=${eventType}`,
-      method: "get",
+      method: "post",
     })
       .then(({ code, data }) => {
         if (code != 200) {
@@ -302,7 +302,7 @@ export function getPerceiveEventList(data = {}) {
     request({
       url: `/perceivedEvents/warning/perceivedEventsList`,
       method: "POST",
-      data: {...data},
+      data: { ...data },
     })
       .then(({ code, rows }) => {
         if (code != 200) {

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

@@ -1,8 +1,8 @@
 <template>
   <div class="Home">
     <AMapContainer ref="AMapContainerRef" @update:isGisCompleted="(data) => {
-        this.isGisCompleted = data;
+      this.isGisCompleted = data;
-      }
+    }
       " />
     <section class="content">
       <!-- 左侧 -->
@@ -47,7 +47,7 @@ import HomeFilter from "./components/HomeFilter/index.vue";
 import HomeFrame from "./components/HomeFrame/index.vue";
 import HomeVector from "./components/HomeVector/index.vue";
 import Button from '@screen/components/Buttons/Button.vue';
-
+import Vue from "vue";
 // import InfoBoard from "./components/InfoBoard"
 
 export default {
@@ -74,7 +74,8 @@ export default {
   provide() {
     return {
       getMap: () => this.$refs.AMapContainerRef.getMapInstance(),
-    };
+      activeDeviceTypes: Vue.observable([])
+    }
   },
   methods: {
     handleShrink(e) {

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

@@ -263,3 +263,23 @@ export const SchedulingEnum = {
     text: "夜班",
   },
 };
+
+const CameraChildTypes = {
+  11: "高清网络枪型固定摄像机",
+  12: "高清网络球形摄像机",
+  13: "桥下高清网络球形摄像机",
+  14: "360°全景摄像机",
+  15: "180°全景摄像机",
+};
+
+const BoardChildTypes = {
+  21: "门架式可变信息标志",
+  22: "大学城入口站前板",
+  23: "雨棚可变信息标志",
+  24: "站前悬臂式可变信息标志",
+};
+
+export const ChildTypes = {
+  1: CameraChildTypes,
+  2: BoardChildTypes,
+};