事件控制地图展示

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

@@ -83,7 +83,6 @@ export default {
       }
       if (data[this.rangeIndex]) {
         this.urls = data[this.rangeIndex]
-        console.log(data[this.rangeIndex][0], this.rangeIndex, 'xxxx');
         const firstItem = data[this.rangeIndex]?.[0] || {};
         this.cameraId = firstItem['iotDeviceId'];
         this.dialogData = { ...firstItem, parseOtherConfig: firstItem.otherConfig && JSON.parse(firstItem.otherConfig) }

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

@@ -504,7 +504,6 @@ export function marksAddInGraph(data) {
 export function addInGraphHandle(data) {
   const graphInstance = window.graphInstance;
   const extData = data[0].extData;
-  // console.log(extData, "extData11111");
   const { item: eventItem } = data[0].config;
   if (eventItem.id.match(eventRegex)) {
     let { stakeMark, lang, direction } = extData;
@@ -536,7 +535,6 @@ export function addInGraphHandle(data) {
       });
       // }, 0);
     }
-    // console.log(lang, "lang");
   }
 }
 

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

@@ -4,6 +4,10 @@
       <AMapContainer
         ref="AMapContainerRef"
         v-if="delayLoad"
+        @update:isGisCompleted="(data) => {
+          this.bindMap(data)
+        }
+      "
         style="z-index: 9"
       />
     </div>
@@ -134,8 +138,54 @@ export default {
         console.log("气象", res);
       });
     },
+
+    bindMap(isLoaded){
+      if(!isLoaded){
+        return;
+      }
+      // 获取map接口
+      const {AMap,mapIns} = this.$refs.AMapContainerRef.getMapInstance();
+      const {longitude,dimension,eventName} = this.detailData;
+      const icon = require(`@screen/images/layer/事件专题/${eventName}_active.svg`);
+      const nowBg = require(`@screen/images/mapBg/active.svg`);
+
+      const center = new AMap.LngLat(parseFloat(longitude), parseFloat(dimension));
+      
+      var marker = new AMap.Marker({
+        position:center,
+        content: `
+          <div style="
+            background-image: url(${nowBg});
+            background-size: 100% 100%;
+            background-repeat: no-repeat;
+            width: 51px;
+            height: 51px;
+            display: flex;
+            align-self: center;
+            justify-content: center;
+          ">
+            <img style="
+                min-width: 24px;
+                min-height: 24px;
+                width: 24px;
+                height: 24px;
+                margin-top: 8.1px;
+              " src='${icon}'
+            >
+          </div>
+      `,
+        anchor: 'bottom-center',
+      });
+      mapIns.add(marker);
+      mapIns.setZoomAndCenter(12, center);
+      // 
+      console.log(mapIns,AMap,'--------')
+      console.log(this.detailData,'############');
+    }
+  },
+  mounted() {
+    this.bindMap();
   },
-  mounted() {},
 };
 </script>
 

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

@@ -14,8 +14,8 @@
     <div class="road-lane">
       <div v-for="i in 11">
         <!-- <img v-if="i != 6" :src="'./images/'+(detailData.lang.indexOf((i+1).toString())===-1?'normal.svg':'congestion.svg')"> -->
-        <img v-if="i != 6 && !detailData.lang.includes((i).toString()) " src="./images/normal.svg">
+        <img v-if="i != 6 && (!detailData.lang || !detailData.lang.includes((i).toString())) " src="./images/normal.svg">
-        <img v-if="i != 6 && detailData.lang.includes((i).toString())" src="./images/congestion.svg">
+        <img v-if="i != 6 && detailData.lang && detailData.lang.includes((i).toString())" src="./images/congestion.svg">
       </div>
     </div>
     <div class="bottom-info">

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

@@ -42,7 +42,7 @@ export default {
   props: {
     detailId: {
       type: [String, Number],
-      default: "96b9918efc01488cb22fa1d9d3236dfd",
+      default: "162cb8824ea141f3a96a74ad81c22796",
     },
   },
   provide() {
@@ -73,7 +73,8 @@ export default {
       })
         .then((result) => {
           if (result.code != 200) return;
-          console.log(result.data);
+          result.data.longitude = '116.829275';
+          result.data.dimension = '36.583156';
           this.provideData.detail = result.data;
           if (
             ["设备设施隐患", "非法上路", "施工建设", "服务区异常"].includes(
@@ -82,7 +83,7 @@ export default {
           ) {
             const gridArea = { ...originGridArea };
             // 第一列变化
-            gridArea["DispatchLiaison"] = "10 / 1 / span 20 / 2";
+            gridArea["DispatchLiaison"] = "13 / 1 / span 21 / 2";
             delete gridArea.TrafficControl;
             if (["设备设施隐患", "非法上路"].includes(result.data.eventName)) {
               // 第三列变化