安全管理

动态获取设备点位并标注在地图上

src/views/projectAdmin/fourEngin/security/centerTop.vue

@@ -1,13 +1,19 @@
 <template>
-  <Card title="数字工地" showRefresh @query="handleQuery">
-    <div class="pane">
-      <img :src="imageUrlMap" alt="">
+  <Card title="数字工地" showRefresh @query="handleQuery" class="mapContent">
+    <vue-scroll>
+    <div class="pane mapUrl">
+      <img :src="imageUrlMap" alt="" class="bgPackImg" ref="bgPackImg" @load="countBoxSize" style="width: 100%; height: auto; position: relative">
       <div
         class="point"
-        :class="[`i-${point}`, { show: tabIndex === 0 || point === tabs[tabIndex].value }]"
+        :class="[`i-video`, { show: tabIndex === 0 || point === tabs[tabIndex].value }]"
         v-for="(point, index) in points"
         :key="index"
         @click="handlePoint(point)"
+        :style="{
+          top: point.mapY / imgHeightScale - 36 + 'px',
+          left: point.mapX / imgWidthScale - 22 + 'px'
+        }"
+        v-show="showPoints"
       >
       </div>
       <FaceGageDialog v-if="gateDialog" :close="() => (gateDialog = false)" :data="faceGateData" />
@@ -16,11 +22,12 @@
       <ElevatorDialog v-if="elevatorDialog" :close="() => (elevatorDialog = false)" />
       <TowerDialog v-if="towerDialog" :close="() => (towerDialog = false)" />
     </div>
-    <div class="tabs">
+  </vue-scroll>
+    <!-- <div class="tabs">
       <div class="tab" :class="{ checked: index === tabIndex }" v-for="(tab, index) in tabs" :key="index" @click="changeTab(index)">
         {{ tab.label }}
       </div>
-    </div>
+    </div> -->
   </Card>
 </template>
 
@@ -32,7 +39,7 @@ import EnvironmentDialog from '@/views/projectAdmin/jlw/digitalSite/components/E
 import VideoDialog from '@/views/projectAdmin/jlw/digitalSite/components/VideoDialog.vue'
 import ElevatorDialog from '@/views/projectAdmin/jlw/digitalSite/components/ElevatorDialog_.vue'
 import TowerDialog from '@/views/projectAdmin/jlw/digitalSite/components/TowerDialog.vue'
-import { selectWorkerAttendanceByDevApi,selectProjectGetProjectInfoBySn } from '@/assets/js/api/dataBoard'
+import { selectWorkerAttendanceByDevApi,selectProjectGetProjectInfoBySn,selectDevCoordinateListApi } from '@/assets/js/api/dataBoard'
 import { getRealTimeDustNoiseDataApi } from '@/assets/js/api/environmentManage'
 export default {
   components: { Card, JNestedRingChart, FaceGageDialog, EnvironmentDialog, VideoDialog, ElevatorDialog, TowerDialog },
@@ -46,6 +53,7 @@ export default {
     this.getFaceGateInfo()
     this.getEnvironmentInfo()
     this.getProjectInfoBySnImg()
+    this.getAllDevPointList()
   },
   data() {
     return {
@@ -71,9 +79,42 @@ export default {
       elevatorDialog: false,
       towerDialog: false,
       imageUrlMap:'',//平面图
+      imgWidthScale: 0, //工地图片与容器宽度的比例
+      imgHeightScale: 0, //工地图片与容器高度的比例
+      points: [],
+      showPoints: false
     }
   },
   methods: {
+    // 计算点位的缩小比
+    countBoxSize() {
+      this.$nextTick(() => {
+        setTimeout(() => {
+          let el = document.querySelector('.mapContent')
+          let imgDom = document.querySelector('.bgPackImg')
+          this.imgWidthScale = imgDom.naturalWidth / imgDom.width
+          this.imgHeightScale = imgDom.naturalHeight / imgDom.height
+          let boxWidthHalf = el.offsetWidth / 2
+          let imgWidthHalf = imgDom.width / 2
+          let leftMove = imgWidthHalf - boxWidthHalf
+          console.log(this.imgWidthScale, this.imgHeightScale)
+          imgDom.style.top = 0
+          imgDom.style.left = -leftMove + 'px'
+          this.showPoints = true
+        }, 200)
+      })
+    },
+    // 获取所有点位
+    getAllDevPointList() {
+      let data = {
+        projectSn: this.projectSn,
+        devType: '4'
+      }
+      // 获取设备信息
+      selectDevCoordinateListApi(data).then(res => {
+        this.points = res.result
+      })
+    },
     //获取项目平面图
    async getProjectInfoBySnImg(){
       const res= await selectProjectGetProjectInfoBySn({
@@ -88,7 +129,7 @@ export default {
       this.tabIndex = index
     },
     handlePoint(point) {
-      this[point + 'Dialog'] = true
+      this.videoDialog = true
     },
     getFaceGateInfo() {
       selectWorkerAttendanceByDevApi({
@@ -106,26 +147,32 @@ export default {
       })
     }
   },
-  computed: {
-    points() {
-      return ['tower', 'elevator', 'video', 'environment', 'gate'].map(tab => [tab, tab]).flat()
-    }
-  }
 }
 </script>
 
 <style lang="less" scoped>
 .pane {
-  position: relative;
-  margin: 5px 20px;
-  height: 85%;
+  // position: relative;
+  // margin: 5px 20px;
+  // height: 85%;
   // background: url('~@/views/projectAdmin/jlw/assets/images/digitalSite/bg-all.png') no-repeat;
-  background-position: center;
-  img{
-    position: absolute;
+  // background-position: center;
+  display: inline-block;
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  .mapUrl {
+    display: inline-block;
+    position: relative;
     width: 100%;
     height: 100%;
+    overflow: hidden;
   }
+  // img{
+  //   position: absolute;
+  //   width: 100%;
+  //   height: 100%;
+  // }
   .point {
     position: absolute;
     width: 41px;