up

src/utils/index.js

@@ -89,4 +89,10 @@ export function Uint8ArrayToString(fileData){
   }
   
   return dataString
+}
+export function isEmpty(val) {
+  if (val === undefined || val === 'undefined' || val === null || val === '' || val === ' ') {
+    return true
+  }
+  return false
 }

src/views/goafCameraAlarm/index.vue

@@ -1,5 +1,6 @@
 <template>
     <div class="goafCameraAlarm">
+        <div class="back" @click="back"></div>
         <div class="table-head" >
             <div class="tab">
                 <el-button class="tab-item" :type="conditions.goafAlarmStatus===0?'primary':''" @click="tabClick(0)">未处理</el-button>
@@ -89,6 +90,9 @@ import HandleModel from './Model.vue'
         },
         methods:{
             NumConvertLM,
+            back(){
+                this.$router.push('/')
+            },           
             getData(){
                 goafCameraAlarmByPage(this.conditions).then((res)=>{
                     const {total,data}=res
@@ -149,6 +153,17 @@ import HandleModel from './Model.vue'
 
 <style lang="scss" scoped>
 .goafCameraAlarm{
+    .back{
+        width: 90px;
+        height: 4vh;
+        position: absolute;
+        right: 0;
+        top: 0;
+        background-image: url(./images/back.png);
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        cursor: pointer;
+    }
     .el-pagination-wrap{
         float: right;
         margin-top: 5vh;

src/views/home/components/GoafDetail.vue

@@ -0,0 +1,172 @@
+<template>
+  <div class="goaf-detail-page">
+    <el-drawer
+    title="采空区信息详情"
+    :modal-append-to-body="false"
+    :modal="false"
+    :wrapper-closable="false"
+    size="50%"
+    v-model="dialogVisible"
+  >
+    <div class="descriptions-body">
+      <table class="descriptions">
+        <tr>
+          <td class="lable">矿带</td>
+          <td class="cont">{{ NumConvertLM(viewData.goafOrebelt) }}</td>
+          <td class="lable">矿体</td>
+          <td class="cont">{{ viewData.goafOrebody}}</td>
+        </tr>
+        <tr>
+          <td class="lable">中段</td>
+          <td class="cont">{{ viewData.goafOreheight }}</td>
+          <td class="lable">采空区编号</td>
+          <td class="cont">{{ viewData.goafName }}</td>
+        </tr>
+        <tr>
+          <td class="lable">水平断面均暴露面积（㎡）</td>
+          <td class="cont">{{ viewData.goafAvexArea }}</td>
+          <td class="lable">平均倾向宽度（m）</td>
+          <td class="cont">{{ viewData.goafAvinWidth }}</td>
+        </tr>
+        <tr>
+          <td class="lable">平均暴露高度（m）</td>
+          <td class="cont">{{ viewData.goafAvexHeight==0?'已填充':viewData.goafAvexHeight }}</td>
+          <td class="lable">体积（m³）</td>
+          <td class="cont">{{ viewData.goafVoidVolume==0?'已填充':viewData.goafVoidVolume }}</td>
+        </tr>
+        <tr>
+          <td class="lable">倾向（度）</td>
+          <td class="cont">{{ isEmpty(viewData.goafKeyTrend) }}</td>
+          <td class="lable">倾角（度）</td>
+          <td class="cont">{{ isEmpty(viewData.goafKeyDipangle) }}</td>
+        </tr>
+        <tr>
+          <td class="lable">顶板矿柱厚度（m）</td>
+          <td class="cont">{{ isEmpty(viewData.goafRoofpillarThickness) }}</td>
+          <td class="lable">保安间柱平均厚度（m）</td>
+          <td class="cont">{{ isEmpty(viewData.goafIncoavThickness) }}</td>
+        </tr>
+        <tr>
+          <td class="lable">勘探位置</td>
+          <td class="cont">{{ viewData.goafExpLocation }}</td>
+          <td class="lable">围岩岩性</td>
+          <td class="cont">{{ viewData.goafRockLithology }}</td>
+        </tr>
+        <tr>
+          <td class="lable">围岩稳定性</td>
+          <td class="cont">{{ viewData.goafRockStability }}</td>
+          <td class="lable">形成时间</td>
+          <td class="cont">{{ viewData.goafFormationTime }}</td>
+        </tr>
+        <tr>
+          <td class="lable">可充填体积（m³）</td>
+          <td class="cont">{{ viewData.goafCanfillVolume }}</td>
+          <td class="lable">剩余可充填体积（m³）</td>
+          <td class="cont">{{ viewData.goafRemainVolume }}</td>
+        </tr>
+        <tr>
+          <td class="lable">充填方式</td>
+          <td class="cont">{{ viewData.goafFillMethod==0?'废石':'尾矿' }}</td>
+          <td class="lable">是否充填</td>
+          <td class="cont">{{ viewData.goafIsFill==0?'是':'否' }}</td>
+        </tr>
+        <tr>
+          <td class="lable">备注</td>
+          <td class="cont">{{ viewData.goafInfoRemak }}</td>
+          <td class="lable">检查表</td>
+          <td class="cont">{{ viewData.goafChecklistTitle }}</td>
+        </tr>
+      </table>
+    </div>
+  </el-drawer>  
+  </div>
+
+</template>
+<script>
+import { NumConvertLM, isEmpty } from '@/utils'
+import {getGoafInfoById} from '@/api/goaf/info.js'
+export default {
+  name: 'GoafInfoDetail',
+  data() {
+    return {
+      dialogVisible: false,
+      viewData: {
+        'goafOrebelt': '',
+        'goafOrebody': '',
+        'goafOreheight': '',
+        'goafName': '',
+        'goafAvexArea': '',
+        'goafAvinWidth': '',
+        'goafAvexHeight': '',
+        'goafVoidVolume': '',
+        'goafKeyTrend': '',
+        'goafKeyDipangle': '',
+        'goafRoofpillarThickness': '',
+        'goafIncoavThickness': '',
+        'goafExpLocation': '',
+        'goafRockLithology': '',
+        'goafRockStability': '',
+        'goafFormationTime': '',
+        'goafCanfillVolume': '',
+        'goafRemainVolume': '',
+        'goafFillMethod': '',
+        'goafIsFill': '',
+        'goafInfoRemak': ''
+      }
+    }
+  },
+  methods: {
+    NumConvertLM,
+    isEmpty(val) {
+      if (isEmpty(val)) {
+        return '--'
+      }
+      return val
+    },
+    showDetailModel(id) {
+      getGoafInfoById(id).then((res)=>{
+        this.viewData = res.data
+        this.dialogVisible = true
+      })      
+    }
+  }
+}
+</script>
+<style lang="scss">
+.goaf-detail-page{
+  background: #193142FF;
+  .el-drawer{
+    background: #193142FF;
+    .el-drawer__title{
+      color: #fff;
+    }
+  }
+}
+.descriptions-body{
+    padding: 20px;
+    table{
+      width: 100%;
+      color: #fff;
+      border-collapse:collapse;
+      &.descriptions{
+        .lable{
+          width: 25%;
+          box-sizing: border-box;
+          background: rgba(0, 0, 0, 0.2);
+          border-width: 1px 0px 0px 1px;
+          border-style: solid;
+          border-color: rgba(255, 255, 255, 0.08);
+          line-height: 40px;
+          padding-left: 8px;
+        }
+        .cont{
+          width: 25%;
+          box-sizing: border-box;
+          border: 1px solid rgba(255, 255, 255, 0.08);
+          line-height: 40px;
+          padding-left: 8px;
+        }
+      }
+    }
+}
+</style>

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

@@ -19,6 +19,7 @@
           </div>
         </div>
       </div>
+      <goaf-detail ref="goaf-detail"></goaf-detail>
     </div>
 </template>
   
@@ -26,13 +27,15 @@
   import * as L from 'leaflet'
   import '@geoman-io/leaflet-geoman-free'
   import MapSelector from '@/components/MapSelector'
+  import GoafDetail from '../GoafDetail.vue'
   import { getMapLayerById, getMapLayer,getMapLayerInfoById } from '@/api/goaf/layer'
   import { NumConvertLM } from '@/utils'
   const iconSize = [45, 65]
   export default {
     name: 'GoafVisualEditor',
     components: {
-      MapSelector
+      MapSelector,
+      GoafDetail
     },
     data() {
       return {
@@ -140,6 +143,8 @@
   
         this.map.fitBounds(bounds)
         this.map.scrollWheelZoom.disable() //滚动缩放
+        this.map.doubleClickZoom.disable()
+        // this.map.draggaing.disable()
         this.getMapLayers()
       },
   
@@ -237,18 +242,15 @@
               return L.marker(latlng, { icon })
             },
             onEachFeature: (_feature, layer) => {
+              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
               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('click', (ev) => {
+                self.$refs['goaf-detail'].showDetailModel(goafId)
+              })
               layer.on('mouseover', (ev) => {                
                 self.layer=ev
                 let goafId=ev.target.feature.properties?.goafId