tijiao

public/index.html

@@ -11,6 +11,7 @@
     <noscript>
       <strong>We're sorry but 采空区信息化管理系统 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
+    <script src="./js/jquery-3.1.1.min.js"></script>
     <div id="app"></div>
     <!-- built files will be auto injected -->
   </body>

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

@@ -26,6 +26,8 @@
   import '@geoman-io/leaflet-geoman-free'
   import MapSelector from '@/components/MapSelector'
   import { getMapLayerById, getMapLayer } from '@/api/goaf/layer'
+  import { NumConvertLM } from '@/utils'
+  const iconSize=[110,110]
   export default {
     name: 'GoafVisualEditor',
     components: {
@@ -167,15 +169,26 @@
           L.geoJSON(feature, {
             pointToLayer: function(_feature, latlng) {
               const goafInfo = _feature.properties.goafInfo
+              const layerId= _feature.properties.layerId
+              var goafAlarmStatus=""
               let Volume = 0
               if (goafInfo) {
                 Volume = (goafInfo.goafCanfillVolume - goafInfo.goafRemainVolume) / goafInfo.goafCanfillVolume
                 Volume = (Volume * 100).toFixed(2)
               }
-              const html = `<div class="goaf-icon-box" style="width:100%;height:100%;position: relative;"><div class="goaf-fill-v" style="height:${Volume}%;"></div></div>`
+              if(_feature.properties.goafAlarmStatus==1){
+                goafAlarmStatus='ico-warning'
+              }
+              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>`
               var icon = L.divIcon({
                 html,
-                iconSize: [50, 50]
+                iconSize
               })
               return L.marker(latlng, { icon })
             },
@@ -229,6 +242,15 @@
         }
         return geojson
       },
+      updateLayerState(layerId=0,type=1){
+        var marker = $(`.goaf-icon-box[data-layer='${layerId}']`);
+        if(type===1){
+          marker.addClass("ico-warning " )
+        }else{
+          marker.removeClass("ico-warning " )
+        }
+        
+      },
       unique(arr = [], name = 'name') {
         const res = new Map()
         return arr.filter((item) => !res.has(item[name]) && res.set(item[name], 1))
@@ -313,4 +335,40 @@
         background-image: url("./goaf/stone.png");
       }
   }
+  .goaf-icon-tag{
+    width: 100%;
+    display: inline-block;
+    background: linear-gradient(90deg, #21649c 0.21%, #060F1E 100%);
+    background-color: rgba(33, 100, 156,0.6);
+    overflow:hidden; 
+    text-overflow:ellipsis; 
+    white-space:nowrap; 
+    color: #fff;
+    text-align: center;
+  }
+  /*动画*/
+.ico-warning {
+  position: relative;
+  &::after{
+    display: block;
+    content: "";
+    height: 60%;
+    width: 60%;
+    background-image: radial-gradient(yellow,red);
+    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;
+    z-index: 9999;
+  }
+}
+
+@keyframes twinkle {
+    0% {opacity: 0.9;}
+    50% {opacity: 0.5;}
+    100% {opacity: 0;}
+}
 </style>

src/views/home/index.vue

@@ -116,24 +116,30 @@ import {
             })
         },
         mqttResponse(topic,message){
-            debugger
-            let data=message?Uint8ArrayToString(message):''
-            if(topic==="topic/goaf/waring/person"){
-                goafhdangerstatis({
-                    hdangerType:0
-                }).then((res)=>{
-                    this.$refs['warning-statistics'].loadData(res.data)
-                })  
+            let data=message?JSON.parse(Uint8ArrayToString(message)):''
+            this.$nextTick(()=>{
+                if(topic==="topic/goaf/waring/person"){
+                    goafhdangerstatis({
+                        hdangerType:0
+                    }).then((res)=>{
+                        this.$refs['warning-statistics'].loadData(res.data)
+                    })  
                     this.$refs['check-warn-report'].load()   
-            }else if(topic==="topic/goaf/waring/sensor"){
-                goafhdangerstatis({
-                    hdangerType:1
-                }).then((res)=>{
-                    this.$refs['sensor-warning-statistics'].loadData(res.data)
-                }) 
-                this.$refs['sensor-warning-info'].load()     
-            }
-            console.log({topic,message,data})
+                }else if(topic==="topic/goaf/waring/sensor"){
+                    goafhdangerstatis({
+                        hdangerType:1
+                    }).then((res)=>{
+                        this.$refs['sensor-warning-statistics'].loadData(res.data)
+                    }) 
+                    this.$refs['sensor-warning-info'].load()     
+                }
+                if(data.topictype==='add'){
+                    this.$refs.map.updateLayerState(data.layerId)
+                }else if(data.topictype==="completed"){
+                    this.$refs.map.updateLayerState(data.layerId,-1)
+                }
+            })
+
         },
     }
  }