up

src/api/goaf/layer.js

@@ -45,4 +45,11 @@ export function updateMapLayer(data) {
     data
   })
 }
-
+// layer点位详情
+export function getMapLayerInfoById(params) {
+  return request({
+    url: '/goaf/goafbaseinfostatis',
+    method: 'GET',
+    params
+  })
+}

src/views/home/components/Map/index.vue

@@ -8,13 +8,13 @@
         <div id="marker-tip" :style="marker_tip_style">
           <div class="head">基本信息</div>
           <div class="item">
-            <p class="title">巡检任务统计(20)</p>
-            <p><span>未完成：8</span><span>已完成：8</span></p>          
+            <p class="title">巡检任务统计({{ layerInfo.goafTaskTotalNum }})</p>
+            <p><span>未完成：{{ layerInfo.goafTaskTotalNum-layerInfo.goafTaskCompletedNum }}</span><span>已完成：{{ layerInfo.goafTaskCompletedNum }}</span></p>          
           </div>
           <div class="item">
-            <p class="title">传感器统计(21)</p>
-            <p><span>在线：8</span><span>离线：8</span></p>
-            <p><span class="warn">预警：8</span></p>          
+            <p class="title">传感器统计({{ layerInfo.sensorTotalNum }})</p>
+            <p><span>在线：{{ layerInfo.sensorOnlineTotalNum }}</span><span>离线：{{ layerInfo.sensorOfflineTotalNum }}</span></p>
+            <p><span class="warn">预警：{{ layerInfo.sensorAlarmNum }}</span></p>          
           </div>
         </div>
       </div>
@@ -25,7 +25,7 @@
   import * as L from 'leaflet'
   import '@geoman-io/leaflet-geoman-free'
   import MapSelector from '@/components/MapSelector'
-  import { getMapLayerById, getMapLayer } from '@/api/goaf/layer'
+  import { getMapLayerById, getMapLayer,getMapLayerInfoById } from '@/api/goaf/layer'
   import { NumConvertLM } from '@/utils'
   const iconSize=[110,110]
   export default {
@@ -52,6 +52,24 @@
             y:""
           }
         },
+        layerInfo:{
+          //任务总数
+          goafTaskTotalNum:"",
+          //待处理个数
+          goafTaskWaitingNum:"",
+          //处理完成个数
+          goafTaskCompletedNum:"",
+          //逾期个数
+          goafTaskExceedNum:"",
+          //传感器总数
+          sensorTotalNum:"",
+          //传感器在线总数
+          sensorOnlineTotalNum:"",
+          //传感器离线总数
+          sensorOfflineTotalNum:"",
+          //传感器预警总数
+          sensorAlarmNum:"",
+        },
         marker_tip_style:"",
         layers: [],
         layerGroup: [],
@@ -201,13 +219,14 @@
               if(_feature.properties.goafAlarmStatus==1){
                 goafAlarmStatus='ico-warning'
               }
+              const goafId = _feature.properties.goafId 
               const goafOrebelt = _feature.properties.goafOrebelt
               const goafOrebody = _feature.properties.goafOrebody
               const goafOreheight = _feature.properties.goafOreheight
               const goafName = _feature.properties.goafName
 
               const goaf_icon_tag = `<div class="goaf-icon-tag" title="${NumConvertLM(goafOrebelt)}-${goafOrebody}-${goafOreheight}-${goafName}">${NumConvertLM(goafOrebelt)}-${goafOrebody}-${goafOreheight}-${goafName}</div>`
-              const html = `<div data-layer="${layerId}" class="goaf-icon-box ${goafAlarmStatus}" style="width:100%;height:100%;position: relative;">${goaf_icon_tag}<div class="goaf-fill-v" style="height:${Volume}%;"></div></div>`
+              const html = `<div data-layer="${layerId}" gid="${goafId}" class="goaf-icon-box ${goafAlarmStatus}" style="width:100%;height:100%;position: relative;">${goaf_icon_tag}<div class="goaf-fill-v" style="height:${Volume}%;"></div></div>`
               var icon = L.divIcon({
                 html,
                 iconSize
@@ -223,17 +242,23 @@
               //       layer:ev
               //   })
               // })
-              // layer.on('mouseover', (ev) => {
-              //   self.layer=ev
-              //   self.marker_tip_style=`left:${ev.containerPoint.x+30}px;top:${ev.containerPoint.y-10}px;display:block;`
-              //   console.log({
-              //       layer:ev
-              //   })
-              // })
-              // layer.on('mouseout', (ev) => {
-              //   self.layer=ev
-              //   self.marker_tip_style="left:-1000px;top:0;display:none;"
-              // })
+              layer.on('mouseover', (ev) => {                
+                self.layer=ev
+                let goafId=ev.target.feature.properties?.goafId
+                if(goafId){
+                  getMapLayerInfoById({
+                    goafId
+                  }).then((goaf_layer_res)=>{
+                    self.layerInfo=goaf_layer_res.data
+                    self.marker_tip_style=`left:${ev.containerPoint.x+60}px;top:${ev.containerPoint.y-240}px;display:block;`
+                  })
+                }
+              })
+              layer.on('mouseout', (ev) => {
+                self.layer=ev
+                self.marker_tip_style="left:-1000px;top:0;display:none;"
+                self.markerovertime=undefined
+              })
             }
           }).addTo(this.layerGroup)
         }
@@ -268,11 +293,11 @@
         var marker = $(`.goaf-icon-box[data-layer='${layerId}']`);
         if(type===1){
           // 添加隐患预警
-          marker.addClass("ico-warning " )
+          marker.addClass("ico-warning" )
         }else if(type===3){
           //修改矿坑体积
         }else{
-          marker.removeClass("ico-warning " )
+          marker.removeClass("ico-warning" )
         }
         
       },
@@ -306,6 +331,7 @@
                   flex: 1;
                   background: #8c939d;
                   box-sizing: border-box;
+                  z-index: 99999;
               }
               #marker-tip{
                 width: 200px;
@@ -379,20 +405,34 @@
   &::after{
     display: block;
     content: "";
-    height: 60%;
-    width: 60%;
-    background-image: radial-gradient(yellow,red);
-    border-radius: 50% 50% 10% 10%;
+    width: 30px;
+    height: 60px;
+    // background-image: radial-gradient(yellow,red);
+    background-color: transparent;
+    background-image:url(@/assets/map/warn.png);
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: 30px 60px;
+    // border-radius: 50% 50% 10% 10%;
     animation: twinkle 0.5s infinite alternate;
     position: absolute;
     transform: translate(-50%,-50%);
     left: 50%;
     top: 50%;
-    box-shadow: 0 0 20px red;
+    // box-shadow: 0 0 20px red;
     z-index: 9999;
+    animation: jump 0.5s ease-in-out infinite alternate;
   }
 }
+@keyframes jump {
+  from {
+    margin-top: 0;
+  }
 
+  to {
+    margin-top: 10px;
+  }
+}
 @keyframes twinkle {
     0% {opacity: 0.9;}
     50% {opacity: 0.5;}