首页气象云图\实时路况位置调整

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

@@ -7,7 +7,7 @@
     </el-tooltip>
 
     <div class="radarControlBox" v-if="silderVisible">
-      <button class="radarButton" @click="play">{{isPlay?'暂停':'播放'}}</button> 
+      <button class="radarButton" @click="play">{{isPlay?'暂停':'播放'}}</button>
       <el-slider
         ref="slider"
         tooltip-class="radarSliderTooltip"
@@ -76,11 +76,11 @@ export default {
       this.dialogVisibleCamera = bool;
     },
     drawThumbail(list){
-   
+
       this.nodeList.forEach(e => {
         window.graphInstance.removeNode(e)
       });
-   
+
       this.nodeList = []
       list.forEach(e => {
         const id = e.event_id;
@@ -96,10 +96,10 @@ export default {
           xB = (xB- 54.394) * window.canvasRatio + window.canvasWidth * window.offsetRatio;
           window.graphInstance.addNode({
               id:id,
-              x: xA, 
+              x: xA,
-              y: e.dir_code==='DOWN'?60:120, 
+              y: e.dir_code==='DOWN'?60:120,
-              width: (xB-xA), 
+              width: (xB-xA),
-              height: 8, 
+              height: 8,
               zIndex:0,
               attrs: {
               body: {
@@ -117,11 +117,11 @@ export default {
           this.nodeList.push(id)
         }
       });
-      
+
-      
+
     },
     formatTooltip(val) {
-       
+
         if(this.marks[val]){
           return this.marks[val];
         } else {
@@ -162,13 +162,13 @@ export default {
         this.isPlay = false;
         setTimeout(() => {
           Vue.prototype.mapIns.addPointByArr( {pointList:[]},  'lineLayer', true);
-          Vue.prototype.mapIns.removeLayerByName('lineLayer');  
+          Vue.prototype.mapIns.removeLayerByName('lineLayer');
 
           Vue.prototype.mapIns.addPointByArr( {pointList:[]},  'lineLayer_camera', true);
           Vue.prototype.mapIns.removeLayerByName('lineLayer_camera');
           window.graphInstance.removeNode('roadError')
         }, 200);
-        
+
         this.silderVisible = false;
       } else {
         this.$root.$emit('layer-clear');
@@ -199,7 +199,7 @@ export default {
           const style = {
             color: '#9fe4fe'
           }
-        
+
 
           const now = moment().format('HH:mm');
           let marks = {};
@@ -221,7 +221,7 @@ export default {
               })
 
               // 载入摄像机列表
-              
+
               for(let ei of e.filteredDevices){
                 if(!ei.longitude){continue}
                 if(ei.otherConfig){
@@ -243,11 +243,11 @@ export default {
                 aryDevices.push({
                   type: 'event',
                   longitude: parseFloat(ei.longitude),
-                  latitude: parseFloat(ei.latitude), 
+                  latitude: parseFloat(ei.latitude),
                   iconUrl: iconUrl,
-                  offset: [0,-48], 
+                  offset: [0,-48],
-                  size: [42,100], 
+                  size: [42,100],
-                  GGoffsetX: 0, 
+                  GGoffsetX: 0,
                   GGoffsetY: -5,
                   GGimgOffset:[0,0],
                   GGimgsize:[42,103],
@@ -300,7 +300,7 @@ export default {
           // });
           // this.lnglats[idx] = _.cloneDeep(aryLine);
           // this.lnglatsNode[idx] = res.data;
-          
+
         })
       }
     },
@@ -322,10 +322,10 @@ export default {
         }
 
         Vue.prototype.mapIns.addLineByArr(
-          this.lnglats[this.timeTick] 
+          this.lnglats[this.timeTick]
         );
       },100)
-      
+
     }
   },
 };
@@ -335,7 +335,7 @@ export default {
 .radarControlBox{
   position: absolute;
   display: flex;
-  bottom: 25%; right:28%;
+  bottom: 28%; right:30% !important;
 }
 .radarSliderTooltip .el-tooltip {
   display: block;