增加地图路况图层

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

@@ -53,6 +53,16 @@ export default {
 
     Vue.prototype.mapIns = this.aMapIns;
 
+    // 实时路况图层
+    this.trafficLayer = new this.AMap.TileLayer.Traffic({
+      zIndex: 99999999999,
+      zooms: [7, 22],
+      visible: false,
+    });
+    this.trafficLayer.setMap(this.aMapIns);
+    this.trafficLayer.hide();
+
+
     this.aMapIns.on("complete", () => { //map渲染完成
       this.loading = false;
       this.$emit("update:isGisCompleted", true);
@@ -211,6 +221,14 @@ export default {
         mapIns: this.aMapIns,
       };
     },
+    showRoadConditions(visible){
+      if(visible){
+        this.trafficLayer.show();
+      } else {
+        this.trafficLayer.hide();
+      }
+      
+    }
   },
   // unmounted() {
   beforeDestroy() {

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

@@ -1,7 +1,7 @@
 <template>
   <Card class="CrowdnessIndicatorRankings border" title="拥挤度指标排名情况">
     <div class="map">
-      <AMapContainer v-if="delayLoad" style="z-index: 9" />
+      <AMapContainer ref="AMapContainerRef" v-if="delayLoad" style="z-index: 9" />
     </div>
     <div class="right border">
       <div
@@ -10,7 +10,17 @@
         :key="item.key"
         @click="handleClick(item)"
       >
-        <ElPopover trigger="manual" :value="isActive(item)" placement="left">
+        <div
+            v-if="item.key === 'bar'"
+            class="label"
+            slot="reference"
+            :style="{
+              backgroundImage: `url(${require(`./images/${item.key}${
+                isActive(item) ? '-active' : ''
+              }.svg`)})`,
+            }"
+        />
+        <ElPopover v-else trigger="manual" :value="isActive(item)" placement="left">
           <div v-if="item.key === 'weather'" class="weather">
             <span>天气：{{ weatherData.text }}</span>
             <span>能见度：{{ weatherData.vis }}公里</span>
@@ -18,7 +28,7 @@
             <span>风力：{{ weatherData.windScale }}级</span>
           </div>
           <div
-            v-if="item.key === 'pie'"
+            v-else-if="item.key === 'pie'"
             class="statistics"
             id="statChartRef"
           ></div>
@@ -62,23 +72,23 @@ export default {
         },
         {
           key: "camera",
-          label: "摄像机",
+          label: "附近相机",
         },
         {
           key: "bar",
-          label: "柱状图",
+          label: "线路通行情况",
         },
         {
           key: "level",
-          label: "天气",
-        },
-        {
-          key: "car",
-          label: "天气",
+          label: "情报板",
         },
+        // {
+        //   key: "car",
+        //   label: "天气",
+        // },
         {
           key: "pie",
-          label: "统计",
+          label: "断面车流量",
         },
       ],
       delayLoad: true,
@@ -104,6 +114,8 @@ export default {
           );
           statChart.setOption(StatChartOption);
         });
+      } else if (item.key === 'bar'){
+        this.$refs.AMapContainerRef.showRoadConditions(findIndex === -1)
       }
     },
     getWeatherForecast() {

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

@@ -23,14 +23,14 @@ const components = files.keys().reduce((components, key) => {
 }, {});
 
 const originGridArea = {
-  EventInformation: "1 / 1 / span 9 / 1", // 事件信息（左1）
-  DispatchLiaison: "10 / 1 / span 9 / 2", // 调度联络（左2）
-  TrafficControl: "19 / 1 / span 7 / 2", //交通管制（右3）
-  CrowdnessIndicatorRankings: "1 / 2 / span 11 / 2", //地图 / 拥挤指数排名情况（中1）
-  DisposalProcess: "12 / 2 / span 14 / 2", //处置过程（中2）
-  RealTimeVideo: "1 / 3 / span 7 / 3", //实时视频（右1）
-  ReleaseInformation: "8 / 3 / span 7 / 3", //信息发布（右2）
-  DeviceControl: "15 / 3 / span 11 / 3", //设备管控（右3）
+  EventInformation: "1 / 1 / span 12 / 1", // 事件信息（左1）
+  DispatchLiaison: "13 / 1 / span 11 / 2", // 调度联络（左2）
+  TrafficControl: "24 / 1 / span 10 / 2", //交通管制（左3）
+  CrowdnessIndicatorRankings: "1 / 2 / span 12 / 2", //地图 / 拥挤指数排名情况（中1）
+  DisposalProcess: "13 / 2 / span 21 / 2", //处置过程（中2）
+  RealTimeVideo: "1 / 3 / span 9 / 3", //实时视频（右1）
+  ReleaseInformation: "10 / 3 / span 7 / 3", //信息发布（右2）
+  DeviceControl: "17 / 3 / span 17 / 3", //设备管控（右3）
   // DisposalPlan: "17 / 1 / span 9 / 2", //处置预案（作废）
 };
 
@@ -78,11 +78,11 @@ export default {
           if(['设备设施隐患','非法上路','施工建设','服务区异常'].includes(result.data.eventName)){
             const gridArea = {...originGridArea}
             // 第一列变化
-            gridArea['DispatchLiaison'] = '10 / 1 / span 16 / 2'
+            gridArea['DispatchLiaison'] = '10 / 1 / span 20 / 2'
             delete gridArea.TrafficControl;
             if(['设备设施隐患','非法上路'].includes(result.data.eventName)){
               // 第三列变化
-              gridArea['RealTimeVideo'] = '1 / 3 / span 13 / 3'
+              gridArea['RealTimeVideo'] = '1 / 3 / span 17 / 3'
               delete gridArea.ReleaseInformation;
             }