人员定位展示页面

src/views/map/dialog/index.vue

@@ -46,11 +46,9 @@
       <peoplePositionCfdD v-if="type === 'peoplePosition'" :id="id" :type="type" :infoname="infoname"/>
       <carPositionCfdD v-if="type === 'carPosition'" :id="id" :type="type" :infoname="infoname"/>
       <!--曹妃甸东 八项作业 曹实业详细页面 end-->
-      <!--秦岗九公司 详情页面 start-->
-      <!--人员定位-->
       <peoplePositionNine v-if="type === 'peoplePositionNine'" :id="id" :type="type" :infoname="infoname"/>
-      <peoplePositionOne v-if="type === 'peoplePositionOne'" :id="id" :type="type" />
+      <peoplePositionOne v-if="type === 'peoplePositionOne' && corpInfoId !== '035958e685cf4850bc40151c5e0617a6'" :id="id" :type="type" />
-      <!--秦岗九公司 详情页面 end-->
+      <peoplePositionYGS v-if="type === 'peoplePositionOne' && corpInfoId === '035958e685cf4850bc40151c5e0617a6'" :id="id" :type="type" />
     </el-dialog>
   </div>
 </template>
@@ -90,9 +88,9 @@ import cutroadCfdD from './cutroadCfdD.vue'
 import breakgroundCfdD from './breakgroundCfdD.vue'
 import hoistingCfdD from './hoistingCfdD.vue'
 import peoplePositionCfdD from './peoplePositionCfdD.vue'
-import peoplePositionNine from './peoplePositionNine.vue'
 import carPositionCfdD from './carPositionCfdD.vue'
 import peoplePositionOne from './peoplePositionOne.vue'
+import peoplePositionYGS from './peoplePositionYGS.vue'
 
 export default {
   components: {
@@ -129,10 +127,10 @@ export default {
     hoistingCfdD,
     MkGateMachineCfd,
     peoplePositionCfdD,
-    peoplePositionNine,
     carPositionCfdD,
     videoPlayBianjieruqin,
-    peoplePositionOne
+    peoplePositionOne,
+    peoplePositionYGS
   },
   props: {
     title: {

src/views/map/dialog/peoplePositionYGS.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="app-container print-work">
+    <div class="level-title">
+      <h1>人员信息</h1>
+    </div>
+    <table class="table-ui">
+      <tr>
+        <td class="bbg-transparent">照片</td>
+        <td ><img src="../../../assets/map/index/touxiang.png" alt="" width="50" height="50"></td>
+        <td class="bbg-transparent">姓名</td>
+        <td >{{ info?info.USERNAME:'' }}</td>
+      </tr>
+      <tr>
+        <td class="bbg-transparent">部门</td>
+        <td >{{ info?info.DEPARTMENT_NAME:'' }}</td>
+        <td class="bbg-transparent">岗位</td>
+        <td >{{ info?info.POST_NAME:'' }}</td>
+      </tr>
+      <tr>
+        <td class="bbg-transparent">人员类型</td>
+        <td >{{ info?info.PERSON_TYPE:'' }}</td>
+        <td class="bbg-transparent">是否为隐患确认人</td>
+        <td >{{ info.IS_HAZARDCONFIRMER == 0 ?'否':'是' }}</td>
+      </tr>
+    </table>
+  </div>
+</template>
+
+<script>
+import { requestFN } from '@/utils/request'
+
+export default {
+  props: {
+    id: {
+      type: String,
+      default() {
+        return ''
+      }
+    },
+    type: {
+      type: String,
+      default() {
+        return ''
+      }
+    }
+  },
+  data() {
+    return {
+      config: config,
+      info: {}
+    }
+  },
+  created() {
+    this.getData()
+  },
+  methods: {
+    getData() {
+      requestFN(
+        '/map/getPersonByCardNo',
+        {
+          CARDNO: this.id
+        }
+      ).then((data) => {
+        this.info = data.pd
+      }).catch((e) => {
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+
+.titles {
+  margin-top: 20px;
+}
+
+</style>

src/views/map/index.vue

@@ -232,8 +232,12 @@ import { animate } from 'motion'
 import loadMapBoxCfd from './js/mapboxCfd'
 import loadMapBox from './js/mapbox'
 import AnquanCfd from './components/anquanCfd'
-import { forEach } from 'lodash'
+import { differenceBy, intersectionBy } from 'lodash'
 import mqtt from 'mqtt'
+import img4_0_1 from '../../assets/map/gangkou_index/point/icon27.png'
+import img4_0_2 from '../../assets/map/gangkou_index/point/icon28.png'
+import img4_0_3 from '../../assets/map/gangkou_index/point/icon29.png'
+import img4_0 from '../../assets/map/gangkou_index/point/ico21.png'
 let viewer = null
 let drag = null
 let ry_drag = null
@@ -768,6 +772,7 @@ export default {
       cfdDIngweiTimer: '',
       cfdCarDIngweiTimer: '',
       perLocArr: [],
+      perLocArrDiff: [],
       carLocArr: [],
       pointBoxCfd: [],
       pointBox: [],
@@ -1151,7 +1156,6 @@ export default {
             id = pick.id.id
             this.bubble(id)
           }
-          console.log(point_id)
           if (this.gangkouActive === '00004' && point_type.indexOf('标记点') !== -1 && (point_id.substring(0, 1) === '0' || point_id.substring(0, 1) === '3' || point_id.substring(0, 3) === '1_2' || point_id.substring(0, 3) === '2_8')) {
             // if (this.gangkouActive === '00004' && point_type.indexOf('标记点') !== -1 && point_id.substring(0, 1) === '0' || point_id.substring(0, 1) === '5') {
 
@@ -1517,7 +1521,6 @@ export default {
           if (this.cfdDIngweiTimer) {
             clearInterval(this.cfdDIngweiTimer)
           }
-          this.perLocArr = []
         }
 
         this.destroyConnection()
@@ -1531,9 +1534,22 @@ export default {
         this.changeSceneMode(this.rightOptionsList[index].check)
       } else if (index === 4) {
         this.destroyConnection()
-        this.onePerLocArr = []
         this.clearAllBottomOptionsItemsCheck()
         this.clearAllBottomOptionsItemsEntityCollection()
+        this.onePerLocArr = []
+        this.perLocArr = []
+        this.clearMqttPoint()
+        if (this.gangkouActive === '00004') {
+          // if (this.fwebsocket) {
+          //   this.fwebsocket.close()
+          // }
+          if (this.timer) {
+            clearInterval(this.timer)
+          }
+          if (this.cfdDIngweiTimer) {
+            clearInterval(this.cfdDIngweiTimer)
+          }
+        }
       } else if (index === 5) {
         this.pureMap = !this.pureMap
         this.componentKey = Math.random()
@@ -1621,8 +1637,12 @@ export default {
           if (this.timer) {
             clearInterval(this.timer)
           }
+          if (this.cfdDIngweiTimer) {
+            clearInterval(this.cfdDIngweiTimer)
+          }
         }
 
+        this.clearAllBottomOptionsItemsCheck()
         this.CORP_INFO_ID = ''
         this.gangkouActive = ''
         viewer.entities.removeAll()
@@ -1672,6 +1692,7 @@ export default {
             clearInterval(this.cfdDIngweiTimer)
           }
           this.perLocArr = []
+          this.clearMqttPoint('cfdrydw')
         }
         if (this.gangkouActive === '00004' && urlType === 'carPosition') {
           if (this.cfdCarDIngweiTimer) {
@@ -1698,10 +1719,11 @@ export default {
         this.bottomOptionsList[pindex].list[index].check = true
         if (this.gangkouActive === '00004') {
           this.cfdBottomOptionsList[pindex].list[index].check = true
+          this.bottomOptionsList[pindex].list[index].check = false
         }
 
         if (this.gangkouActive === '00003' && this.CORP_INFO_ID === '035958e685cf4850bc40151c5e0617a6' && urlType === 'peoplePosition') {
-          !this.connecting ? this.createConnection() : this.doSubscribe()
+          !this.connecting ? this.createConnection(this.CORP_INFO_ID) : this.doSubscribe()
         } else {
           requestFN(
             pointUrl,
@@ -1763,10 +1785,10 @@ export default {
               await this.initColorList()
               this.isItWithinTheArea()
               // this.initPerLocWebsocket()
-            }
+              this.timerCfdDingweiPointInit()
-
+            } else {
-            // 人员定位开启实时获取定位websocket （曹妃甸使用） - 结束
               this.dragEntity(points, pindex, index)
+            }
           }).catch((e) => {
             console.log(e)
           })
@@ -1787,10 +1809,33 @@ export default {
         // }
       }
     },
-
+    timerCfdDingweiPointInit() {
+      for (let i = 0; i < this.perLocArr.length; i++) {
+        if (this.perLocArr[i].color === 'red') this.perLocArr[i].icon_type = 'img4_0_1'
+        else if (this.perLocArr[i].color === 'orange') this.perLocArr[i].icon_type = 'img4_0_2'
+        else if (this.perLocArr[i].color === 'yellow') this.perLocArr[i].icon_type = 'img4_0_3'
+        else this.perLocArr[i].icon_type = 'img4_0'
+        this.perLocArr[i].id = this.perLocArr[i].cardNo
+        this.perLocArr[i].x = this.perLocArr[i].position.x
+        this.perLocArr[i].y = this.perLocArr[i].position.y
+        ry_drag.addEntity(this.perLocArr[i])
+        this.mqttPoint['cfdrydw' + this.perLocArr[i].cardNo] = this.perLocArr[i].cardNo
+      }
+    },
+    timerCfdDingweiPointUpdate() {
+      for (let i = 0; i < this.perLocArrDiff.length; i++) {
+        if (this.perLocArr[i].color === 'red') this.perLocArr[i].icon_type = 'img4_0_1'
+        else if (this.perLocArr[i].color === 'orange') this.perLocArr[i].icon_type = 'img4_0_2'
+        else if (this.perLocArr[i].color === 'yellow') this.perLocArr[i].icon_type = 'img4_0_3'
+        else this.perLocArr[i].icon_type = 'img4_0'
+        this.perLocArrDiff[i].x = this.perLocArrDiff[i].position.x
+        this.perLocArrDiff[i].y = this.perLocArrDiff[i].position.y
+        ry_drag.getPosition(this.perLocArrDiff[i])
+      }
+    },
     timerCfdDingwei() {
       this.cfdDIngweiTimer = setInterval(() => {
-        this.localtionReload(1, 0)
+        // this.localtionReload(1, 0)
         requestFN(
           '/map/getCurrentLocationOnline',
           {
@@ -1839,10 +1884,15 @@ export default {
             }
             points.push(point)
           }
+          if (this.perLocArr.length === 0) {
             this.perLocArr = points
+          }
+          this.perLocArrDiff = intersectionBy(this.perLocArr, points, 'cardNo')
+          this.perLocArr = differenceBy(this.perLocArr, points, 'cardNo')
           this.isItWithinTheArea()
 
-          this.dragEntity(this.perLocArr, pindex, index)
+          this.timerCfdDingweiPointInit()
+          this.timerCfdDingweiPointUpdate()
         })
       }, 30000)
     },
@@ -1909,7 +1959,7 @@ export default {
       // eslint-disable-next-line no-implied-eval
       this.timer = setInterval(() => {
         this.initColorList()
-        this.localtionReload(1, 0)
+        // this.localtionReload(1, 0)
       }, 300000)
     },
     // 获取各种颜色人员列表（八项作业与工单）
@@ -1944,7 +1994,7 @@ export default {
       this.subscribeSuccess = false
     },
     // 创建连接
-    createConnection() {
+    createConnection(CORP_INFO_ID) {
       try {
         const { protocol, host, port, endpoint, ...options } = this.connection
         const connectUrl = `${protocol}://${host}:${port}${endpoint}`
@@ -1961,14 +2011,14 @@ export default {
           this.client.on('error', error => {
             console.log('Connection failed', error)
           })
-          this.mqttMessage()
+          this.mqttMessage(CORP_INFO_ID)
         }
       } catch (error) {
         this.connecting = false
         console.log('mqtt.connect error', error)
       }
     },
-    mqttMessage() {
+    mqttMessage(CORP_INFO_ID) {
       this.client.on('message', (topic, message) => {
         // console.info(message)
         // if(this.intOne === 0){
@@ -1997,8 +2047,9 @@ export default {
             icon_type: 'img4_0' + pointColor,
             // infoname: item.realName,
             data_id: item.deviceCode,
-            point_type: '标记点peoplePositionOne'
+            point_type: '标记点peoplePositionOne',
-            // label: item.realName
+            label: '人员定位',
+            corpInfoId: CORP_INFO_ID
           }
           this.onePerLocArr.push(perLoc)
           ry_drag.addEntity(perLoc)

src/views/map/js/ry_dragentity.js

@@ -18,7 +18,6 @@ export default class DragEntity {
     const position = Cesium.Cartesian3.fromDegrees(point.x, point.y, 0)
     point.property.addSample(start, position)
     point.lastTime = start
-
     const entityOption = {
       id: point.id,
       name: point.name,