up

src/api/iiot/map.js

@@ -0,0 +1,46 @@
+import request from '@/utils/request'
+
+// 获取所有传感器信息
+export function getSensorList() {
+  return request({
+    url: '/goaf/goafsensor/list',
+    method: 'GET'
+  })
+}
+// 获取 地图中传感器信息
+export function getMapLayer(params) {
+  return request({
+    url: '/iot/sensormap/list',
+    method: 'GET',
+    params
+  })
+}
+export function createMapLayer(data) {
+  return request({
+    url: '/iot/sensormap/add',
+    method: 'POST',
+    data
+  })
+}
+export function delMapLayer(sensorLocationId) {
+  return request({
+    url: `/iot/sensormap/delete/${sensorLocationId}`,
+    method: 'DELETE'
+  })
+}
+
+export function updateMapLayer(data) {
+  return request({
+    url: '/iot/sensormap/update',
+    method: 'PUT',
+    data
+  })
+}
+// 获取传感器最新数据
+export function getNewSensorData(params) {
+  return request({
+    url: '/goaf/sensordata/newsensordata',
+    method: 'GET',
+    params
+  })
+}

src/router/modules/aqpt.js

@@ -504,6 +504,22 @@ const aqptRouter = [
       //   meta: { title: '设备类别', noCache: true, permit: 'aqpt_setting_equipment_cat' }
       // },
       {
+        path: 'map',
+        component: () => import('@/views/aqpt/map/index'),
+        name: 'entMap',
+        meta: { title: '地图', noCache: true, permit: 'aqpt_scene_map' }
+      },
+      {
+        path: 'mapedit',
+        component: () => import('@/views/goaf/map/index'),
+        name: 'mapedit',
+        meta: {
+          title: '可视化编辑',
+          noCache: true,
+          permit: 'aqpt_scene_map'
+        }
+      },
+      {
         path: 'sensorCat',
         component: () => import('@/views/goaf/sensorCat/index'),
         name: 'aqpt_setting_sensor_cat',

src/views/bigScreen/home/components/Map/components/table.vue

@@ -0,0 +1,278 @@
+<template>
+  <div class="page-wrap">
+    <el-drawer
+      title="实时监测详情"
+      :modal-append-to-body="false"
+      :modal="false"
+      :wrapper-closable="false"
+      size="100%"
+      :visible.sync="dialogVisible"
+    >
+      <el-row class="m-top-15">
+        <el-table class="page-table" border fit :data="dataList">
+          <el-table-column header-align="center" type="index" label="序号" align="center" width="60" />
+          <el-table-column header-align="center" align="center" prop="goafDevName" label="被测设备名称" />
+          <el-table-column header-align="center" align="center" prop="goafDevTypename" label="被测设备类型" />
+          <el-table-column header-align="center" align="center" prop="goafSensorName" label="传感器名称" />
+          <el-table-column header-align="center" align="center" label="频率（HZ）">
+            <el-table-column
+              header-align="center"
+              align="center"
+              prop="name"
+              label="水平方向"
+              width="80"
+            >
+              <template v-slot="{row}">
+                <span v-if="isNotNull(row.frequencyX)">{{ parseFloat((row.frequencyX/10).toFixed(2)) }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              header-align="center"
+              align="center"
+              prop="name"
+              label="垂直方向"
+              width="80"
+            >
+              <template v-slot="{row}">
+                <span v-if="isNotNull(row.frequencyY)">{{ parseFloat((row.frequencyY/10).toFixed(2)) }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              header-align="center"
+              align="center"
+              prop="name"
+              label="轴向"
+              width="80"
+            >
+              <template v-slot="{row}">
+                <span v-if="isNotNull(row.frequencyZ)">{{ parseFloat((row.frequencyZ/10).toFixed(2)) }}</span>
+              </template>
+            </el-table-column>
+          </el-table-column>
+          <el-table-column header-align="center" align="center" label="速度（mm/s）">
+            <el-table-column
+              header-align="center"
+              align="center"
+              prop="name"
+              label="水平方向"
+              width="80"
+            >
+              <template v-slot="{row}">
+                <span v-if="isNotNull(row.velX)">{{ parseFloat((row.velX/100).toFixed(2)) }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              header-align="center"
+              align="center"
+              prop="name"
+              label="垂直方向"
+              width="80"
+            >
+              <template v-slot="{row}">
+                <span v-if="isNotNull(row.velY)">{{ parseFloat((row.velY/100).toFixed(2)) }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              header-align="center"
+              align="center"
+              prop="name"
+              label="轴向"
+              width="80"
+            >
+              <template v-slot="{row}">
+                <span v-if="isNotNull(row.velZ)">{{ parseFloat((row.velZ/100).toFixed(2)) }}</span>
+              </template>
+            </el-table-column>
+          </el-table-column>
+          <el-table-column header-align="center" label="加速度（m/s2）">
+            <el-table-column
+              header-align="center"
+              align="center"
+              prop="name"
+              label="水平方向"
+              width="80"
+            >
+              <template v-slot="{row}">
+                <span v-if="isNotNull(row.accX)">{{ parseFloat((row.accX/100).toFixed(2)) }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              header-align="center"
+              align="center"
+              prop="name"
+              label="垂直方向"
+              width="80"
+            >
+              <template v-slot="{row}">
+                <span v-if="isNotNull(row.accY)">{{ parseFloat((row.accY/100).toFixed(2)) }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              header-align="center"
+              align="center"
+              prop="name"
+              label="轴向"
+              width="80"
+            >
+              <template v-slot="{row}">
+                <span v-if="isNotNull(row.accZ)">{{ parseFloat((row.accZ/100).toFixed(2)) }}</span>
+              </template>
+            </el-table-column>
+          </el-table-column>
+          <el-table-column header-align="center" label="位移（um）">
+            <el-table-column
+              header-align="center"
+              align="center"
+              prop="name"
+              label="水平方向"
+              width="80"
+            >
+              <template v-slot="{row}">
+                <span>{{ row.disX }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              header-align="center"
+              align="center"
+              prop="name"
+              label="垂直方向"
+              width="80"
+            >
+              <template v-slot="{row}">
+                <span>{{ row.disY }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              header-align="center"
+              align="center"
+              prop="name"
+              label="轴向"
+              width="80"
+            >
+              <template v-slot="{row}">
+                <span>{{ row.disZ }}</span>
+              </template>
+            </el-table-column>
+          </el-table-column>
+          <el-table-column header-align="center" align="center" label="倾角（°）">
+            <el-table-column
+              header-align="center"
+              align="center"
+              prop="name"
+              label="X轴"
+              width="80"
+            >
+              <template v-slot="{row}">
+                <span v-if="isNotNull(row.angX)">{{ parseFloat((row.angX/100).toFixed(2)) }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              header-align="center"
+              align="center"
+              prop="name"
+              label="Y轴"
+              width="80"
+            >
+              <template v-slot="{row}">
+                <span v-if="isNotNull(row.angY)">{{ parseFloat((row.angY/100).toFixed(2)) }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              header-align="center"
+              align="center"
+              prop="name"
+              label="Z轴"
+              width="80"
+            >
+              <template v-slot="{row}">
+                <span v-if="isNotNull(row.angZ)">{{ parseFloat((row.angZ/100).toFixed(2)) }}</span>
+              </template>
+            </el-table-column>
+          </el-table-column>
+          <el-table-column header-align="center" align="center" prop="sensorTemperature" label="温度（℃）">
+            <template v-slot="{row}">
+              <span v-if="isNotNull(row.sensorTemperature)">{{ parseFloat((row.sensorTemperature/10).toFixed(2)) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column header-align="center" align="center" prop="goafDatareportTime" label="上传时间" />
+          <el-table-column label="操作" header-align="center" align="center" min-width="60">
+            <template v-slot="{row}">
+              <el-button v-if="isNotNull(row.goafDataId)" size="mini" type="text" style="color:#1B81FF" @click="showDetail(row)">波形</el-button>
+              <span v-else style="color:#b6bec7">无数据</span>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-row>
+    </el-drawer>
+    <MonitorChartDetail ref="chart-detail" />
+  </div>
+</template>
+
+<script>
+import { getWavedata } from '@/api/goaf/sensor'
+import { NumConvertLM } from '@/utils'
+import MonitorChartDetail from '@/views/iiot/equipment/components/MonitorChartDetail.vue'
+
+export default {
+  components: { MonitorChartDetail },
+  data() {
+    return {
+      dataList: [],
+      dialogVisible: false
+    }
+  },
+  methods: {
+    // fetch data
+    isNotNull(val) {
+      if (val === null || val === '' || val === undefined || val === 'undefined') return false
+      return true
+    },
+    NumConvertLM,
+    loadData(data) {
+      this.dataList = [data]
+      this.dialogVisible = true
+    },
+    showDetail(params) {
+      getWavedata(params.goafDataId).then((resp) => {
+        const { data } = resp
+        const x = data.tdWaveValueX.split(',').map(item => parseFloat((item / 100).toFixed(2)))
+        const y = data.tdWaveValueY.split(',').map(item => parseFloat((item / 100).toFixed(2)))
+        const z = data.tdWaveValueZ.split(',').map(item => parseFloat((item / 100).toFixed(2)))
+        const params = { x, y, z }
+        this.$refs['chart-detail'].show(params)
+      })
+    }
+  }
+}
+</script>
+    <style lang="scss" scoped>
+    .page-wrap{
+        min-height:90vh;
+        padding: 15px;
+        background-color: #071A29;
+        ::v-deep {
+          .el-table thead.is-group th.el-table__cell{
+          background-color: #132938;
+        }
+          .el-table__header-wrapper{
+            border-bottom: 1px solid #5994bb;
+          }
+          .el-table--border th.el-table__cell{
+            // border-bottom: 1px solid #5994bb;
+            border-right: 1px solid #5994bb;
+            border-top: 1px solid #5994bb;
+            border-color: #5994bb;
+          }
+          .el-table.el-table--border  th.el-table__cell.is-leaf, .el-table td.el-table__cell{
+            border-right: 1px solid #5994bb;
+            border-top: 1px solid #5994bb;
+          }
+          .el-table.el-table--border {
+            border-bottom: 1px solid #5994bb;
+            border-left: 1px solid #5994bb;
+          }
+        }
+
+    }
+    </style>
+

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

@@ -4,7 +4,7 @@
       <map-selector :default-val="formData.mapId" @setMapInfo="handleSelectMap" />
     </nav>
     <div class="layout-map">
-      <div id="vmap" />
+      <div id="vmap" class="layout-map" />
       <div id="marker-tip" :style="marker_tip_style">
         <div class="head">基本信息</div>
         <div class="item">
@@ -18,6 +18,7 @@
         </div>
       </div>
     </div>
+    <MapLayerDetail ref="layer-detail" />
   </div>
 </template>
 
@@ -25,13 +26,17 @@
 import * as L from 'leaflet'
 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]
+import MapLayerDetail from './components/table'
+
+import { getMapLayerById } from '@/api/goaf/layer'
+import { getMapLayer, getNewSensorData } from '@/api/iiot/map'
+
+const iconSize = [50, 50]
 export default {
   name: 'GoafVisualEditor',
   components: {
-    MapSelector
+    MapSelector,
+    MapLayerDetail
   },
   data() {
     return {
@@ -140,7 +145,7 @@ export default {
     // 获取地图图层数据
     getMapLayers() {
       getMapLayer({
-        mapId: this.formData.mapId
+        map: this.formData.mapId
       }).then((resp) => {
         const { code, data, msg } = resp
         if (code === 0) {
@@ -174,40 +179,23 @@ export default {
     initMapLayers() {
       const layerList = this.mapLayerList
       const feature = []
+      const self = this
       if (layerList != null && layerList.length > 0) {
         layerList.forEach((item) => {
-          const layerMarker = item.layerMarker && JSON.parse(item.layerMarker)
-          const layerVector = item.layerMarker && JSON.parse(item.layerVector)
-          if (layerMarker && layerMarker.properties) {
-            layerMarker.properties.layerId = item.layerId
-            feature.push(layerMarker)
-          }
-          if (layerVector && layerVector.properties) {
-            layerVector.properties.layerId = item.layerId
-            feature.push(layerVector)
-          }
+          feature.push({
+            'type': 'Feature',
+            'properties': item,
+            'geometry': {
+              'type': 'Point',
+              'coordinates': [item.sensorQywzjd, item.sensorQywzwd]
+            }
+          })
         })
         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)
-            }
-            // eslint-disable-next-line eqeqeq
-            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>`
+            const sensorLocationId = _feature.properties.sensorLocationId
+            const goafSensorName = _feature.properties.goafSensorName
+            const html = `<div data-layer="${sensorLocationId}-${goafSensorName}" class="goaf-icon-box" style="width:100%;height:100%;position: relative;"></div>`
             var icon = L.divIcon({
               html,
               iconSize
@@ -216,24 +204,9 @@ export default {
           },
           onEachFeature: (_feature, layer) => {
             this.layerGroup.addLayer(layer)
-            // layer.on('click', (ev) => {
-            //   self.layer=ev
-            //   self.marker_tip_style=`left:${ev.containerPoint.x+24}px;top:${ev.containerPoint.y-20}px`
-            //   console.log({
-            //       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('click', (ev) => {
+              self.showLayerDetail(ev.target.feature.properties)
+            })
           }
         }).addTo(this.layerGroup)
       }
@@ -264,6 +237,14 @@ export default {
       }
       return geojson
     },
+    showLayerDetail(item) {
+      getNewSensorData({
+        map: item.mapId
+      }).then((resp) => {
+        const { data } = resp
+        this.$refs['layer-detail'].loadData(data)
+      })
+    },
     updateLayerState(layerId = 0, type = 1) {
       // eslint-disable-next-line no-undef
       var marker = $(`.goaf-icon-box[data-layer='${layerId}']`)
@@ -349,6 +330,10 @@ export default {
       </style>
 
   <style lang="scss">
+  .layout-map .goaf-icon-box,.leaflet-marker-icon{
+    background-color: transparent;
+    border-color: transparent;
+  }
   .goaf-fill-v{
       width:100%;
       position: absolute;

src/views/goaf/map/components/VisualEditor.vue

@@ -2,14 +2,10 @@
   <div class="map-container">
     <nav>
       <map-selector :default-val="formData.mapId" @setMapInfo="handleSelectMap" />
-      <!-- <div class="page-title">
-        现场分布图
-      </div> -->
-      <!-- <el-button size="mini" type="primary" style="margin-left:15px;" @click="submit">保存</el-button> -->
     </nav>
     <div class="layout-map">
       <div class="left-side">
-        <div class="title">采空区</div>
+        <div class="title">传感器信息标记</div>
         <div v-for="(item,index) in markerItems" :key="index" :class="checkItemIndex===index?'item active':'item'" @click="checkItem(item,index)">
           <img :src="item.icon" alt="" class="icon">
           <div class="name">{{ item.name }}</div>
@@ -29,38 +25,11 @@
         <div v-if="type==2||type=='drage'" class="saveForm">
           <div class="title">{{ RtHadnTitle }}</div>
           <div class="item">
-            <div class="lable">矿带：</div>
+            <div class="lable">传感器：</div>
             <div class="content">
-              <el-select v-model="saveForm.goafOrebelt" class="safe-area-item" filterable placeholder="矿带" @change="changeArea(1)">
-                <el-option value="" label="请选择矿带" disabled />
-                <el-option v-for="(item,index) in goafOrebelts" :key="index" :value="item.goafOrebelt" :label="item.goafOrebelt" />
-              </el-select>
-            </div>
-          </div>
-          <div class="item">
-            <div class="lable">矿体：</div>
-            <div class="content">
-              <el-select v-model="saveForm.goafOrebody" class="safe-area-item" filterable placeholder="矿体" @change="changeArea(2)">
-                <el-option value="" label="请选择矿体" disabled />
-                <el-option v-for="(item,index) in goafOrebodys" :key="index" :value="item.goafOrebody" :label="item.goafOrebody" />
-              </el-select>
-            </div>
-          </div>
-          <div class="item">
-            <div class="lable">中段：</div>
-            <div class="content">
-              <el-select v-model="saveForm.goafOreheight" class="safe-area-item" filterable placeholder="中段" @change="changeArea(3)">
-                <el-option value="" label="请选择中段" disabled />
-                <el-option v-for="(item,index) in goafOreheights" :key="index" :value="item.goafOreheight" :label="item.goafOreheight" />
-              </el-select>
-            </div>
-          </div>
-          <div class="item">
-            <div class="lable">采空区：</div>
-            <div class="content">
-              <el-select v-model="saveForm.goafName" class="safe-area-item" filterable placeholder="采空区名称" @change="changeArea(4)">
-                <el-option value="" label="请选择采空区" disabled />
-                <el-option v-for="item in goafNames" :key="item.goafId" :value="item.goafName" :label="item.goafName" />
+              <el-select v-model="saveForm.goafSensorId" class="safe-area-item" filterable placeholder="矿带">
+                <el-option value="" label="请选择传感器" disabled />
+                <el-option v-for="(item,index) in sensorList" :key="index" :value="item.goafSensorId" :label="item.goafSensorName" />
               </el-select>
             </div>
           </div>
@@ -72,20 +41,8 @@
         <div v-if="type==3" class="deleteForm">
           <div class="title">删除标记点</div>
           <div class="item">
-            <div class="lable">矿带：</div>
-            <div class="content"> {{ deleteForm.goafOrebelt }}</div>
-          </div>
-          <div class="item">
-            <div class="lable">矿体：</div>
-            <div class="content"> {{ deleteForm.goafOrebody }}</div>
-          </div>
-          <div class="item">
-            <div class="lable">中段：</div>
-            <div class="content"> {{ deleteForm.goafOreheight }}</div>
-          </div>
-          <div class="item">
-            <div class="lable">采空区：</div>
-            <div class="content"> {{ deleteForm.goafName }}</div>
+            <div class="lable">传感器名称：</div>
+            <div class="content"> {{ deleteForm.goafSensorName }}</div>
           </div>
           <div class="bt-wrap">
             <div class="bt" @click="save">保存</div>
@@ -102,20 +59,10 @@ import * as L from 'leaflet'
 import '@geoman-io/leaflet-geoman-free'
 import { mapGetters } from 'vuex'
 import MapSelector from '@/components/MapSelector'
-import { getGoafBaseInfo } from '@/api/goaf/info'
-import { getMapLayerById, createMapLayer, delMapLayer, updateMapLayer, getMapLayer } from '@/api/goaf/layer'
-const markerIcon = L.icon({
-  iconUrl: require('@/assets/images/goaf/default.png'),
-  shadowUrl: require('@/assets/images/goaf/default.png'),
-  iconSize: [37.2, 57.6],
-  shadowSize: [0, 0],
-  iconAnchor: [16, 52],
-  popupAnchor: [1, -38]
-})
-L.Marker.prototype.options.icon = markerIcon
+import { getMapLayer, createMapLayer, delMapLayer, updateMapLayer, getSensorList } from '@/api/iiot/map'
 import mixins from '@/mixin/mqtt.js'
-import { NumConvertLM, Uint8ArrayToString } from '@/utils'
-const iconSize = [110, 110]
+import { Uint8ArrayToString } from '@/utils'
+const iconSize = [50, 50]
 export default {
   name: 'GoafVisualEditor',
   components: {
@@ -145,48 +92,27 @@ export default {
       },
       RtHadnTitle: '标记点操作',
       saveForm: {
-        'goaflayerId': '',
         'ocId': '',
-        'goafId': '',
-        'goafOrebelt': '',
-        'goafOrebody': '',
-        'goafOreheight': '',
-        'goafName': '',
         'mapId': '',
-        'layerId': '',
-        'layerCatId': '',
-        'layerTitle': '',
-        'layerMarker': '',
-        'layerVector': '',
-        'layerVectorType': ''
+        'goafSensorId': '',
+        'goafSensorName': '',
+        'sensorQywzjd': '',
+        'sensorQywzwd': ''
       },
       deleteForm: {
-        'icon': '',
-        'name': '',
-        'goaflayerId': '',
+        'sensorLocationId': undefined,
         'ocId': '',
-        'goafId': '',
-        'goafOrebelt': 0,
-        'goafOrebody': 0,
-        'goafOreheight': 0,
-        'goafName': '',
         'mapId': '',
-        'layerId': '',
-        'layerCatId': '1',
-        'layerTitle': '',
-        'layerMarker': '',
-        'layerVector': '',
-        'layerVectorType': ''
+        'goafSensorId': '',
+        'goafSensorName': '',
+        'sensorQywzjd': '',
+        'sensorQywzwd': ''
       },
       layer: null,
       layers: [],
       layerGroup: [],
       imageOverlay: undefined,
-      goaf: [],
-      goafOrebelts: [],
-      goafOrebodys: [],
-      goafOreheights: [],
-      goafNames: []
+      sensorList: []
     }
   },
   computed: {
@@ -199,9 +125,8 @@ export default {
   },
   methods: {
     init() {
-      getGoafBaseInfo().then((res) => {
-        this.goaf = res.data
-        this.goafOrebelts = this.unique(res.data, 'goafOrebelt')
+      getSensorList().then((res) => {
+        this.sensorList = res.data
       })
       this.$nextTick(() => {
         this.initMap()
@@ -210,25 +135,6 @@ export default {
         })
       })
     },
-
-    // 加载数据
-    load(layerId) {
-      this.conditions.layerId = layerId
-      this.getData()
-    },
-    // 初始化
-    getData() {
-      getMapLayerById(this.conditions.layerId).then((resp) => {
-        const { code, data, msg } = resp
-        if (code === 0) {
-          this.viewData = data
-          this.setRasterLayer()
-        } else {
-          this.$message.error(msg)
-        }
-      })
-    },
-
     // 初始化地图
     initMap() {
       var yx = L.latLng
@@ -329,7 +235,7 @@ export default {
     // 获取地图图层数据
     getMapLayers() {
       getMapLayer({
-        mapId: this.formData.mapId
+        map: this.formData.mapId
       }).then((resp) => {
         const { code, data, msg } = resp
         if (code === 0) {
@@ -348,37 +254,18 @@ export default {
       const feature = []
       if (layerList != null && layerList.length > 0) {
         layerList.forEach((item) => {
-          const layerMarker = item.layerMarker && JSON.parse(item.layerMarker)
-          const layerVector = item.layerMarker && JSON.parse(item.layerVector)
-          if (layerMarker && layerMarker.properties) {
-            layerMarker.properties.layerId = item.layerId
-            layerMarker.properties.goaflayerId = item.goaflayerId
-            feature.push(layerMarker)
-          }
-          if (layerVector && layerVector.properties) {
-            layerVector.properties.layerId = item.layerId
-            layerMarker.properties.goaflayerId = item.goaflayerId
-            feature.push(layerVector)
-          }
+          feature.push({
+            'type': 'Feature',
+            'properties': item,
+            'geometry': {
+              'type': 'Point',
+              'coordinates': [item.sensorQywzjd, item.sensorQywzwd]
+            }
+          })
         })
         L.geoJSON(feature, {
           pointToLayer: function(_feature, latlng) {
-            const goafInfo = _feature.properties.goafInfo
-            const goafOrebelt = _feature.properties.goafOrebelt
-            const goafOrebody = _feature.properties.goafOrebody
-            const goafOreheight = _feature.properties.goafOreheight
-            const goafName = _feature.properties.goafName
-            var goafAlarmStatus = ''
-            let Volume = 0
-            if (goafInfo) {
-              Volume = (goafInfo.goafCanfillVolume - goafInfo.goafRemainVolume) / goafInfo.goafCanfillVolume
-              Volume = (Volume * 100).toFixed(2)
-            }
-            if (_feature.properties.goafAlarmStatus === '1') {
-              goafAlarmStatus = 'ico-warning'
-            }
-            const goaf_icon_tag = `<div class="goaf-icon-tag" title="${NumConvertLM(goafOrebelt)}-${goafOrebody}-${goafOreheight}-${goafName}">${NumConvertLM(goafOrebelt)}-${goafOrebody}-${goafOreheight}-${goafName}</div>`
-            const html = `<div 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 class="goaf-icon-box " style="width:100%;height:100%;position: relative;"></div>`
             var icon = L.divIcon({
               html,
               iconSize
@@ -425,18 +312,6 @@ export default {
       this.resetForm()
       this.layer = null
       this.layers = []
-      this.goafOrebodys = []
-      this.goafOreheights = []
-      this.goafNames = []
-    },
-    submit() {
-      // 图层操作完，一次导出geoJSON
-      const layers = this.map._layers
-      console.log({
-        layers,
-        geoLayer: this.geoLayer,
-        geoJson: this.createGeoJson()
-      })
     },
     checkItem(item, index) {
       if (this.state === 1) {
@@ -448,88 +323,8 @@ export default {
       this.state = 1
       this.saveForm.icon = item.icon
       this.saveForm.name = item.name
-      this.RtHadnTitle = '新增采空区'
-      this.map.pm.enableDraw('Marker', { snappable: false, tooltips: false })// tooltips: { 'placeMarker': '点击放置标记' },
-    },
-    changeAreaByFilter() {
-      let goaf = this.deeepClone(this.goaf)
-      const list = ['goafOrebelt', 'goafOrebody', 'goafOreheight', 'goafName']
-      const selected = []
-      const unselected = []
-      for (let i = 0; i < 4; i++) {
-        if (!this.saveForm[list[i]]) {
-          unselected.push(list[i] + 's')
-        } else {
-          selected.push({
-            name: list[i],
-            value: this.saveForm[list[i]]
-          })
-        }
-      }
-      for (let i = 0; i < selected.length; i++) {
-        goaf = goaf.filter(item => item[selected[i].name] === selected[i].value)
-      }
-      for (let i = 0; i < unselected.length; i++) {
-        this.$set(this, unselected[i], goaf)
-      }
-    },
-    changeArea(type) {
-      const goafs = this.deeepClone(this.goaf)
-      let goafOrebodys = this.deeepClone(this.goafOrebodys)
-      let goafOreheights = this.deeepClone(this.goafOreheights)
-      let goafNames = this.deeepClone(this.goafNames)
-      if (type === 1) {
-        goafOrebodys = goafs.filter(item => item.goafOrebelt === this.saveForm.goafOrebelt)
-        goafOrebodys = this.unique(goafOrebodys, 'goafOrebody')
-        this.goafOrebodys = goafOrebodys
-        this.goafOreheights = []
-        this.goafNames = []
-        this.saveForm.goafOrebody = ''
-        this.saveForm.goafOreheight = ''
-        this.saveForm.goafName = ''
-      } else if (type === 2) {
-        goafOreheights = goafs.filter(item => (item.goafOrebody === this.saveForm.goafOrebody) && (item.goafOrebelt === this.saveForm.goafOrebelt))
-        goafOreheights = this.unique(goafOreheights, 'goafOreheight')
-        this.goafOreheights = goafOreheights
-        this.goafNames = []
-        this.saveForm.goafOreheight = ''
-        this.saveForm.goafName = ''
-      } else if (type === 3) {
-        goafNames = goafs.filter(item => (item.goafOreheight === this.saveForm.goafOreheight) && (item.goafOrebody === this.saveForm.goafOrebody) && (item.goafOrebelt === this.saveForm.goafOrebelt))
-        // goafNames = this.unique(goafNames, 'goafName')
-        this.goafNames = goafNames
-        this.saveForm.goafName = ''
-      } else {
-        for (let i = 0; i < goafNames.length; i++) {
-          if (this.saveForm.goafName === goafNames[i].goafName) {
-            let layer = null
-            if (this.type === 2) {
-              layer = this.layer
-            } else {
-              layer = this.dragstartMarker.layer
-            }
-            let Volume = (goafNames[i].goafCanfillVolume - goafNames[i].goafRemainVolume) / goafNames[i].goafCanfillVolume
-            Volume = (Volume * 100).toFixed(2)
-            const goafOrebelt = goafNames[i].goafOrebelt
-            const goafOrebody = goafNames[i].goafOrebody
-            const goafOreheight = goafNames[i].goafOreheight
-            const goafName = goafNames[i].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 class="goaf-icon-box" 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
-            })
-            layer.setIcon(icon)
-            this.saveForm.goafId = goafNames[i].goafId
-            this.saveForm.goafInfo = {
-              goafCanfillVolume: goafNames[i].goafCanfillVolume,
-              goafRemainVolume: goafNames[i].goafRemainVolume
-            }
-          }
-        }
-      }
-      this.$forceUpdate()
+      this.RtHadnTitle = '新增传感器点位信息'
+      this.map.pm.enableDraw('Marker', { snappable: false, tooltips: false })
     },
     save() {
       const layerFeature = this.layer?.toGeoJSON()
@@ -537,34 +332,21 @@ export default {
         layerFeature.properties = {
           ...layerFeature.properties,
           'ocId': this.userData.ocId,
-          'goafId': this.saveForm.goafId,
-          'goafOrebelt': this.saveForm.goafOrebelt,
-          'goafOrebody': this.saveForm.goafOrebody,
-          'goafOreheight': this.saveForm.goafOreheight,
-          'goafName': this.saveForm.goafName,
-          'goafInfo': this.saveForm.goafInfo
+          ...this.saveForm
         }
       }
       if (this.type === 3) {
         // 删除表单里面的保存
         this.type = 1
       } else if (this.type === 'drage') {
-        if (!this.saveForm.goafId) {
-          this.$message.error('请选择采空区')
+        if (!this.saveForm.goafSensorId) {
+          this.$message.error('请选择传感器')
           return
         }
         updateMapLayer({
-          'goaflayerId': this.saveForm.goaflayerId,
-          'ocId': this.userData.ocId,
-          'goafId': this.saveForm.goafId,
-          'goafName': this.saveForm.goafName,
-          'mapId': this.formData.mapId,
-          'layerId': this.saveForm.layerId,
-          'layerCatId': '',
-          'layerTitle': '',
-          'layerMarker': layerFeature,
-          'layerVector': '',
-          'layerVectorType': ''
+          ...this.saveForm,
+          'sensorQywzjd': layerFeature.geometry.coordinates[0],
+          'sensorQywzwd': layerFeature.geometry.coordinates[1]
         }).then(() => {
           this.type = 1
           this.checkItemIndex = -1
@@ -578,26 +360,18 @@ export default {
         })
       } else {
         // 新增
-        if (!this.saveForm.goafId) {
-          this.$message.error('请选择采空区')
+        if (!this.saveForm.goafSensorId) {
+          this.$message.error('请选择传感器')
           return
         }
+        const sensor = this.sensorList.filter(item => item.goafSensorId === this.saveForm.goafSensorId)[0]
         createMapLayer({
-          // 'goaflayerId': '',
           'ocId': this.userData.ocId,
-          'goafId': this.saveForm.goafId,
-          'goafOrebelt': this.saveForm.goafOrebelt,
-          'goafOrebody': this.saveForm.goafOrebody,
-          'goafOreheight': this.saveForm.goafOreheight,
-          'goafName': this.saveForm.goafName,
-          'goafAlarmStatus': '0',
           'mapId': this.formData.mapId,
-          'layerId': '',
-          'layerCatId': '',
-          'layerTitle': '',
-          'layerMarker': layerFeature,
-          'layerVector': '',
-          'layerVectorType': ''
+          'goafSensorId': sensor.goafSensorId,
+          'goafSensorName': sensor.goafSensorName,
+          'sensorQywzjd': layerFeature.geometry.coordinates[0],
+          'sensorQywzwd': layerFeature.geometry.coordinates[1]
         }).then(() => {
           this.type = 1
           this.checkItemIndex = -1
@@ -626,8 +400,7 @@ export default {
       }
     },
     delMarker() {
-      // goaflayerId, mapId, layerId
-      delMapLayer(this.deleteForm.goaflayerId, this.formData.mapId, this.deleteForm.layerId).then(() => {
+      delMapLayer(this.deleteForm.sensorLocationId).then(() => {
         this.type = 1
         this.state = 2
         this.checkItemIndex = -1
@@ -642,19 +415,13 @@ export default {
     },
     resetForm() {
       const data = {
-        'icon': '',
-        'name': '',
-        'goaflayerId': '',
+        'sensorLocationId': undefined,
         'ocId': '',
-        'goafId': '',
-        'goafName': '',
         'mapId': '',
-        'layerId': '',
-        'layerCatId': '',
-        'layerTitle': '',
-        'layerMarker': '',
-        'layerVector': '',
-        'layerVectorType': ''
+        'goafSensorId': '',
+        'goafSensorName': '',
+        'sensorQywzjd': '',
+        'sensorQywzwd': ''
       }
       this.saveForm = JSON.parse(JSON.stringify(data))
       this.deleteForm = JSON.parse(JSON.stringify(data))
@@ -687,27 +454,6 @@ export default {
       }
       return layer
     },
-    createGeoJson() {
-      var layerArray = []
-      this.map.eachLayer(function(layer) {
-        if (layer.pm !== 'undefined' && layer.pm != null && layer.pm !== '') {
-          if (layer.pm._enabled === false && layer.pm.options.draggable === true) {
-            layerArray.push(layer)
-          }
-        }
-      })
-      var geojson = L.layerGroup(layerArray).toGeoJSON()
-      for (var n = 0; n < geojson.features.length; n++) {
-        var nowJson = JSON.stringify(geojson.features[n])
-        for (var m = n + 1; m < geojson.features.length; m++) {
-          var nextJson = JSON.stringify(geojson.features[m])
-          if (nowJson === nextJson) {
-            geojson.features.splice(n, 1)
-          }
-        }
-      }
-      return geojson
-    },
     mqttResponse(message) {
       const data = message ? Uint8ArrayToString(message) : ''
       this.$nextTick(() => {
@@ -824,21 +570,21 @@ export default {
                         align-items: center;
                         font-size: 14px;
                         border-bottom:2px solid rgba(45, 140, 240, 0.16);
-                        .lable{
-                        width: 80px;
-                        font-size: 14px;
-                        }
-                        .content{
-                        display: flex;
-                        justify-content: flex-start;
-                        align-items: center;
-                        overflow: hidden;
-                        text-overflow: ellipsis;
-                        .icon{
-                            width: 17.5px;
-                            display: block;
-                            margin-right:8px;
-                        }
+                          .lable{
+                            width: 100px;
+                            font-size: 14px;
+                          }
+                          .content{
+                            display: flex;
+                            justify-content: flex-start;
+                            align-items: center;
+                            overflow: hidden;
+                            text-overflow: ellipsis;
+                          .icon{
+                              width: 17.5px;
+                              display: block;
+                              margin-right:8px;
+                          }
                         }
                     }
                 }
@@ -876,6 +622,14 @@ export default {
     }
     </style>
   <style lang="scss">
+        .goaf-icon-box,.leaflet-marker-icon{
+          background-color: transparent;
+        }
+        .leaflet-marker-icon{
+          border: 1px solid red;
+          border-radius: 50%;
+          box-sizing: border-box;
+        }
         .goaf-fill-v{
             width:100%;
             position: absolute;
@@ -901,30 +655,30 @@ export default {
             position: absolute;
             top: -18px;
         }
-  /*动画*/
-.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;
+    /*动画*/
+  .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;}
-}
+  @keyframes twinkle {
+      0% {opacity: 0.9;}
+      50% {opacity: 0.5;}
+      100% {opacity: 0;}
+  }
   </style>
 

src/views/iiot/equipment/alarm.vue

@@ -238,7 +238,7 @@ import { getWavedata } from '@/api/goaf/sensor'
 import { getAlarmByPage } from '@/api/goaf/alarm'
 import { Pagination } from '@/components'
 import { NumConvertLM } from '@/utils'
-import MonitorChartDetail from './components/MonitorChartDetail'
+import MonitorChartDetail from '@/views/iiot/equipment/components/MonitorChartDetail.vue'
 
 export default {
   components: { Pagination, MonitorChartDetail },

src/views/iiot/equipment/monitor.vue

@@ -17,7 +17,7 @@
       <el-table v-loading="listLoading" class="page-table" border fit :data="dataList" :span-method="objectSpanMethod">
         <el-table-column header-align="center" type="index" label="序号" align="center" width="60" />
         <el-table-column header-align="center" align="center" prop="goafDevName" label="被测设备名称" />
-        <el-table-column header-align="center" align="center" prop="goafDevTypename" label="被测设备类型" />goafDevTypename
+        <el-table-column header-align="center" align="center" prop="goafDevTypename" label="被测设备类型" />
         <el-table-column header-align="center" align="center" prop="goafSensorName" label="传感器名称" />
         <el-table-column header-align="center" align="center" label="频率（HZ）">
           <el-table-column