首页 路网设施

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

@@ -0,0 +1,183 @@
+<template>
+    <Dialog v-model="obverseVisible" :title="dialogData._itemData && dialogData._itemData.title" width="650px">
+      <div class="RoadNetworkFacilities">
+        <div class="header">
+          <Video class="video-stream" :pileNum="dialogData.stakeMark" rangeIndex="upCamera" :showHeader="false" />
+          <Video class="video-stream" :pileNum="dialogData.stakeMark" rangeIndex="downCamera" :showHeader="false" />
+        </div>
+  
+        <Descriptions labelWidth="72px" :list="list" :data="data" style="gap: 18px" column="7" />
+      </div>
+    </Dialog>
+  </template>
+  
+  <script>
+  import Dialog from "@screen/components/Dialog/index.vue";
+  import Descriptions from "@screen/components/Descriptions.vue";
+  // import { getRoadInfoByStakeMark, getProduct } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js"
+  import Video from "@screen/components/VideoMulti";
+  
+  import request from "@/utils/request";
+  import { dialogDelayVisible } from "./../mixin";
+  
+  // 所有交通事件的详情
+  export default {
+    name: "RoadNetworkFacilities",
+    mixins: [dialogDelayVisible],
+    components: {
+      Dialog,
+      Descriptions,
+      Video,
+    },
+    data() {
+      return {
+        activeName: "first",
+        deviceControlVisible: false,
+        data: {
+          deviceType: "行车诱导",
+          deviceStation: "k094+079",
+          roadName: "G35济泽高速",
+          direction: "1",
+          deviceState: "0",
+          deviceVendors: "XXX厂家",
+        },
+        list: [
+          // {
+          //   label: "机构",
+          //   key: "organizationName",
+          //   gridColumn: "3",
+          // },
+          {
+            label: "高速名称",
+            key: "roadName",
+            gridColumn: "3",
+          },
+          {
+            label: "感知时间",
+            key: "occurrenceTime",
+            gridColumn: "3",
+            visible: () => this.isPerceived,
+          },
+          {
+            label: "桩号",
+            key: "stakeMark",
+            gridColumn: "3",
+          },
+          {
+            label: "事件源",
+            key: "stringEventSource",
+            gridColumn: "3",
+          },
+          {
+            label: "影响车道",
+            key: "lang",
+            enum: "LaneOccupancy",
+            gridColumn: "3",
+          },
+          {
+            label: "事件状态",
+            key: "eventState",
+            enum: "EventType",
+            gridColumn: "3",
+          },
+          {
+            label: "经/纬度",
+            key: "${longitude} / ${latitude}",
+            gridColumn: "5",
+          },
+          {
+            label: "发生时间",
+            key: "occurrenceTime",
+            gridColumn: "3",
+          },
+          {
+            label: "行驶方向",
+            key: "direction",
+            enum: "CameraDirectionEnum",
+            gridColumn: "3",
+          },
+          // {
+          //   label: "完结时间",
+          //   key: "endTime",
+          //   gridColumn: "3",
+          // },
+          {
+            label: "事件描述",
+            key: "description",
+            gridColumn: "5",
+          },
+        ],
+      };
+    },
+    async created() {
+      this.data = { ...this.dialogData };
+    //   request({
+    //     url: `/business/RoadNetworkFacilities/getEventInfo/${this.dialogData.id}`,
+    //     method: "get",
+    //   })
+    //     .then(({ code, data }) => {
+    //       if (code != 200) return;
+  
+    //       this.data = { ...data, ...this.data };
+    //       console.log("RoadNetworkFacilities", data);
+    //     })
+    //     .catch((err) => { });
+    },
+    methods: {
+      handleClickTabs() { },
+    },
+  };
+  </script>
+  
+  <style lang="scss" scoped>
+  .RoadNetworkFacilities {
+    width: 600px;
+    color: #fff;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  
+    .camera-video {
+      flex: 1.5;
+    }
+  
+    .header {
+      display: flex;
+      gap: 9px;
+  
+      >div.video-stream {
+        height: 210px;
+      }
+    }
+  
+    .tabs {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+  
+      ::v-deep {
+        .el-tabs__content {
+          flex: 1;
+  
+          .el-tab-pane {
+            height: 100%;
+          }
+        }
+      }
+    }
+  
+    .bottom {
+      margin-top: 12px;
+      display: flex;
+      gap: 9px;
+      align-items: center;
+      justify-content: end;
+  
+      >div {
+        font-size: 16px;
+        padding: 6px 12px;
+      }
+    }
+  }
+  </style>
+  

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

@@ -45,6 +45,7 @@ import Camera from "./../Dialogs/Camera/index.vue";
 import Broadcast from "./../Dialogs/Broadcast/index.vue";
 import TrafficIncidents from "./../Dialogs/TrafficIncidents/index.vue";
 import PerceiveEvent from "./../Dialogs/PerceiveEvent/index.vue";
+import RoadNetworkFacilities from "./../Dialogs/RoadNetworkFacilities/index.vue";
 import SmartDevice from "./../Dialogs/SmartDevice/index.vue";
 import SolarEnergy from "./../Dialogs/SolarEnergy/index.vue";
 import Intermodulation from "./../Dialogs/Intermodulation/index.vue";
@@ -69,7 +70,8 @@ export default {
     SolarEnergy,
     Intermodulation,
     GuardrailCollision,
-    FatigueWakesUp
+    FatigueWakesUp,
+    RoadNetworkFacilities
   },
   data() {
     return {

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

@@ -2,10 +2,11 @@ import {
   getDeviceList,
   getEventTopicList,
   getPerceiveEventList,
+  getRoadNetworkFacilitiesList,
 } from "./httpList";
 import { delay } from "@screen/utils/common";
 import { Message } from "element-ui";
-import { EventTopics } from "@screen/utils/enum.js";
+import { EventTopics, RoadNFTopics } from "@screen/utils/enum.js";
 import { debounce, cloneDeep, find } from "lodash";
 import Vue from "vue";
 
@@ -84,6 +85,7 @@ export const lngLatMap = {}; //优化  缩略图 + 地图 复用lngLatmap
 export function getHandleDeviceType(item) {
   if (DeviceForMap[item.title]) return "地图路测设备/map";
   if (EventTopics[item.title]) return "地图事件专题/map";
+  if (RoadNFTopics[item.title]) return "路网设施/map";
 }
 
 let debounceNoneLngLatMessage = debounce(() => {
@@ -245,6 +247,75 @@ export const eventMap = {
     cacheRemoveFunc[`地图事件专题/${item.title}`]?.();
   },
 
+  // 路网设施 需要在地图显示的
+  async "路网设施/map"(item, filterData, isDefault, cb) {
+    const deviceType = RoadNFTopics[item.title];
+
+    let loadingMessage;
+    if (!isDefault) {
+      loadingMessage = Message.info({
+        message: `${item.title}路网设施位置加载中...`,
+        duration: 0,
+        customClass: "loading-message",
+        iconClass: "el-icon-loading",
+      });
+    }
+    console.log("deviceType", deviceType);
+    const data = await getRoadNetworkFacilitiesList(deviceType, filterData)
+      .then(async (data) => {
+        await delay(600);
+        data.forEach((item) => {
+          if (item.otherConfig) {
+            let otherConfig = JSON.parse(item.otherConfig);
+            item.latitude = otherConfig.dimension
+            item.longitude = otherConfig.longitude
+          }
+        });
+        return data;
+      })
+      .catch(() => {});
+
+    loadingMessage?.close();
+
+    if (!data) return this.emitter.emit("selectedCompleted", item);
+
+    if (!data.length && !isDefault) {
+      this.emitter.emit("selectedCompleted", item);
+      return Message.warning(`没有${item.title}路网设施数据!`);
+    }
+
+    eventMap[`路网设施/map_close`](item);
+    const cbCall = () => cb?.(item, { deviceType: `路网设施_${deviceType}` });
+    cbCall();
+
+    const options = {
+      stateCallback: () => true,
+      item,
+    };
+
+    let removeData = data.map((item) =>
+      resolveDataOptions.call(
+        this,
+        item,
+        options,
+        "RoadNetworkFacilities",
+        isDefault
+      )
+    );
+    addDataPreHandle(removeData);
+    markerClusterIns.addData(removeData, isDefault);
+    this.emitter.emit("selectedCompleted", item);
+
+    cacheRemoveFunc[`路网设施/${item.title}`] = () => {
+      cbCall();
+      removeDataPreHandle(removeData);
+      markerClusterIns.removeData(removeData);
+    };
+  },
+  "路网设施/map_close"(item) {
+    cacheRemoveFunc[`路网设施/${item.title}`]?.();
+  },
+
   // 感知事件
   async "事件专题/感知事件"(item, filterData, isDefault, cb) {
     let loadingMessage;

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

@@ -409,3 +409,41 @@ export function getPerceiveEventList(data = {}, options = {}) {
       });
   });
 }
+
+/**
+ * 路网设施 列表 根据类型获取
+ * @param {number} facilityType
+ */
+export function getRoadNetworkFacilitiesList(facilityType, options = {}) {
+  return new Promise((resolve, reject) => {
+    if (!facilityType) {
+      Message.error(`事件加载失败!`);
+      return reject();
+    }
+
+    const { stakeMark } = options;
+    let url = `/business/facility/query?facilityType=${facilityType}`;
+    if (stakeMark) {
+      let formatStartStakeMark = `K${padZero(stakeMark[0])}%2B${padZero(
+        stakeMark[1]
+      )}`;
+      url += `&stakeMark=${formatStartStakeMark}`;
+    }
+    request({
+      url: url,
+      method: "get",
+    })
+      .then(({ code, data }) => {
+        if (code != 200) {
+          reject();
+          return Message.error(`事件加载失败!`);
+        }
+
+        resolve(data);
+      })
+      .catch(() => {
+        Message.error(`事件加载失败!`);
+        reject();
+      });
+  });
+}

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

@@ -109,6 +109,15 @@ export const EventTopics = {
   其他事件: 11,
 };
 
+//路网设施类型
+export const RoadNFTopics = {
+  收费站: 1,
+  枢纽立交: 4,
+  桥梁: 5,
+  服务区: 6,
+  停车区: 7,
+};
+
 // 事件类型 eventType
 export const EventType = {
   0: {