up

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

@@ -7,6 +7,7 @@
         <div id="vmap" />
         <div id="marker-tip" :style="marker_tip_style">
           <div class="head">基本信息</div>
+          <div class="subtitle">{{ layerInfo.title }}</div>
           <div class="item">
             <p class="title">巡检任务统计({{ layerInfo.goafTaskTotalNum }})</p>
             <p><span>未完成：{{ layerInfo.goafTaskTotalNum-layerInfo.goafTaskCompletedNum }}</span><span>已完成：{{ layerInfo.goafTaskCompletedNum }}</span></p>          
@@ -27,7 +28,7 @@
   import MapSelector from '@/components/MapSelector'
   import { getMapLayerById, getMapLayer,getMapLayerInfoById } from '@/api/goaf/layer'
   import { NumConvertLM } from '@/utils'
-  const iconSize = [65, 65]
+  const iconSize = [45, 65]
   export default {
     name: 'GoafVisualEditor',
     components: {
@@ -69,6 +70,7 @@
           sensorOfflineTotalNum:"",
           //传感器预警总数
           sensorAlarmNum:"",
+          title:""
         },
         marker_tip_style:"",
         layers: [],
@@ -111,7 +113,7 @@
           maxBounds: bounds, // 地图拖动到边界后自动弹回
           maxBoundsViscosity: 0.2,
           attributionControl: true,
-          zoomControl: true // zoomControl（缩放控制）：确定缩放控制是否默认加载在地图上。
+          zoomControl: false // zoomControl（缩放控制）：确定缩放控制是否默认加载在地图上。
         })
         this.layerGroup = L.layerGroup().addTo(this.map)
         this.geoLayer = L.geoJson(null, { pmIgnore: false })
@@ -137,7 +139,7 @@
         }
   
         this.map.fitBounds(bounds)
-        // this.map.scrollWheelZoom.disable() //滚动缩放
+        this.map.scrollWheelZoom.disable() //滚动缩放
         this.getMapLayers()
       },
   
@@ -227,7 +229,7 @@
 
               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}" 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>`
+              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
@@ -235,6 +237,10 @@
               return L.marker(latlng, { icon })
             },
             onEachFeature: (_feature, layer) => {
+              const goafOrebelt = _feature.properties.goafOrebelt
+              const goafOrebody = _feature.properties.goafOrebody
+              const goafOreheight = _feature.properties.goafOreheight
+              const goafName = _feature.properties.goafName
               this.layerGroup.addLayer(layer)
               // layer.on('click', (ev) => {
               //   self.layer=ev
@@ -251,7 +257,8 @@
                     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;`
+                    self.layerInfo.title=`${NumConvertLM(goafOrebelt)}-${goafOrebody}-${goafOreheight}-${goafName}`
+                    self.marker_tip_style=`left:${ev.containerPoint.x+30}px;top:${ev.containerPoint.y-230}px;display:block;`
                   })
                 }
               })
@@ -259,6 +266,7 @@
                 self.layer=ev
                 self.marker_tip_style="left:-1000px;top:0;display:none;"
                 self.markerovertime=undefined
+                self.layerInfo={}
               })
             }
           }).addTo(this.layerGroup)
@@ -350,11 +358,16 @@
                   font-size: 24px;
                   color: #fff;
                 }
+                .subtitle{
+                  padding-top: 6px;
+                  font-size: 18px;
+                  line-height: 1;
+                  color: #fff;                  
+                }
                 .item{
-                  padding-top: 15px;
-                  padding-bottom: 5px;
-                  &.item{
-                    padding-top: 8px;
+                  padding-top: 8px;
+                  p{
+                    line-height: 1.2;
                   }
                   .title{
                     font-size: 16px;

src/views/home/index.vue

@@ -371,15 +371,11 @@ import {
         }
     }
     .main{
-        // width: 46.68%;
         width: 878px;
         height: 100%;
-        flex:1;
-        padding: 0 14px;
         #map{
             width: 100%;
             height: 100%;
-            // background-image: url(./images/home/map.png);
             background-size: 100% 100%;
             background-repeat: no-repeat;
         }

src/views/particulars/check.vue

@@ -291,7 +291,7 @@ import {getTime} from '@/utils'
                 this.conditions.goafId = ''
             } else if (type === 2) {
                 goafOreheights = goafs.filter(item => (item.goafOrebody === this.conditions.goafOrebody) && (item.goafOrebelt === this.conditions.goafOrebelt))
-                goafOreheights = this.unique(goafOrebodys, 'goafOreheight')
+                goafOreheights = this.unique(goafOreheights, 'goafOreheight')
                 this.goafOreheights = goafOreheights
                 this.goafNames = []
                 this.conditions.goafOreheight = ''

src/views/particulars/goaf_info.vue

@@ -177,7 +177,7 @@ import { NumConvertLM ,parseTime} from '@/utils'
                 this.conditions.goafId = ''
             } else if (type === 2) {
                 goafOreheights = goafs.filter(item => (item.goafOrebody === this.conditions.goafOrebody) && (item.goafOrebelt === this.conditions.goafOrebelt))
-                goafOreheights = this.unique(goafOrebodys, 'goafOreheight')
+                goafOreheights = this.unique(goafOreheight, 'goafOreheight')
                 this.goafOreheights = goafOreheights
                 this.goafNames = []
                 this.conditions.goafOreheight = ''

src/views/particulars/sensor.vue

@@ -195,6 +195,10 @@ import { NumConvertLM ,getTime} from '@/utils'
     },
     created(){
         this.init()
+        if(this.$route.query.id){
+            if(this.$route.query.id<1)return
+            this.changeHead(this.$route.query)
+        }      
     },
     methods:{
         NumConvertLM,
@@ -298,7 +302,7 @@ import { NumConvertLM ,getTime} from '@/utils'
                 this.conditions.goafId = ''
             } else if (type === 2) {
                 goafOreheights = goafs.filter(item => (item.goafOrebody === this.conditions.goafOrebody) && (item.goafOrebelt === this.conditions.goafOrebelt))
-                goafOreheights = this.unique(goafOrebodys, 'goafOreheight')
+                goafOreheights = this.unique(goafOreheights, 'goafOreheight')
                 this.goafOreheights = goafOreheights
                 this.goafNames = []
                 this.conditions.goafOreheight = ''

src/views/particulars/video.vue

@@ -1,6 +1,8 @@
 <template>
     <div class="video-page">
-        <header></header>
+        <header>
+            <div :class="activeId===item.id?'active item':'item'" v-for="item in items" :key="item.id" @click="changeHead(item)">{{ item.name }}</div>  
+        </header>
         <div class="tab">
             <el-select v-model="conditions.goafOrebelt" placeholder="矿带"  @change="changeArea(1)" style="width:120px" clearable>
                 <el-option v-for="(item,index) in goafOrebelts" :key="index" :value="item" :label="item" />
@@ -59,8 +61,15 @@ import axios from 'axios'
     },
     data(){
         return{
-            activeId:'1',
+            activeId:'5',
             activetab:'1',
+            items:[
+                {name:"首页",id:"1",path:"/particulars/sensor"},
+                {name:"压力传感器",id:"2",path:"/particulars/check"},
+                {name:"位移传感器",id:"3",path:"/particulars/goaf-info"},
+                {name:"有害气体传感器",id:"4",path:"/particulars/goaf-info"},
+                {name:"视频监控",id:"5",path:"/particulars/goaf-info"},
+            ],
             video:{
                 src:"",
                 name:""
@@ -104,6 +113,11 @@ import axios from 'axios'
         },
         changeHead(item){
             this.activeId=item.id
+            if(item.id!=='5'){
+                this.$router.push(`/particulars/sensor?id=${item.id}`)
+            }else{
+                this.init()
+            }
         },
         searchSubmit(){
             this.conditions.page=1
@@ -141,14 +155,16 @@ import axios from 'axios'
                 this.total = dataList.length
                 this.$nextTick(()=>{
                     this.dataList.forEach((item)=>{
-                        this.$refs['HkwsVideo'+item.goafDevId][0].loadData({
-                            streamServeUrl:item.goafDevSocketAddr,
-                            szIP: item.goafDevIp,    // protocol ip
-                            szPort: item.goafDevPort,            // protocol port
-                            szUsername:item.goafDevAccount,     // device username
-                            szPassword: item.goafDevPwd, // device password    
-                            state:false    
-                        })
+                        if(this.$refs['HkwsVideo'+item.goafDevId]){
+                            this.$refs['HkwsVideo'+item.goafDevId][0].loadData({
+                                streamServeUrl:item.goafDevSocketAddr,
+                                szIP: item.goafDevIp,    // protocol ip
+                                szPort: item.goafDevPort,            // protocol port
+                                szUsername:item.goafDevAccount,     // device username
+                                szPassword: item.goafDevPwd, // device password    
+                                state:false    
+                            })
+                        }
                     })
                 })
             })
@@ -226,7 +242,7 @@ import axios from 'axios'
                 this.conditions.goafId = ''
             } else if (type === 2) {
                 goafOreheights = goafs.filter(item => (item.goafOrebody === this.conditions.goafOrebody) && (item.goafOrebelt === this.conditions.goafOrebelt))
-                goafOreheights = this.unique(goafOrebodys, 'goafOreheight')
+                goafOreheights = this.unique(goafOreheights, 'goafOreheight')
                 this.goafOreheights = goafOreheights
                 this.goafNames = []
                 this.conditions.goafOreheight = ''
@@ -340,7 +356,23 @@ import axios from 'axios'
         justify-content: center;
         align-items: center;
         padding-top: 0.5vh;
-        padding-top:36px;
+        .item{
+            width: 188px;
+            height: 36px;
+            line-height: 36px;
+            text-align: center;
+            background-image: url(@/assets/sensor/head.png);
+            background-size: 100% 100%;
+            background-repeat: no-repeat;
+            margin-right: 12px;
+            max-width: 20%;
+            color: #7FCFF4;
+            cursor: pointer;
+            &.active{
+                background-image: url(@/assets/sensor/head_active.png); 
+                color: #2AFFFF;
+            }
+        }       
     }
     .tab{
         padding-top: 1.5vh;