From abdc5a6b764579e026c29dfd18fa0557641c9710 Mon Sep 17 00:00:00 2001
From: zhangyue <zhangyue@zcloudchina.com>
Date: Mon, 27 Nov 2023 14:39:14 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=80=E5=85=AC=E5=8F=B8=E4=BA=BA=E5=91=98?=
 =?UTF-8?q?=E5=AE=9A=E4=BD=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                               |   1 +
 src/views/map/dialog/index.vue             |   5 +-
 src/views/map/dialog/peoplePositionOne.vue | 111 +++++
 src/views/map/index.vue                    | 514 +++++++++++++++++----
 src/views/map/js/ry_dragentity.js          |  58 +++
 5 files changed, 607 insertions(+), 82 deletions(-)
 create mode 100644 src/views/map/dialog/peoplePositionOne.vue
 create mode 100644 src/views/map/js/ry_dragentity.js

diff --git a/package.json b/package.json
index 1f4b02f..3b75732 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "lodash": "^4.17.21",
     "moment": "^2.29.3",
     "motion": "^10.16.4",
+    "mqtt": "^4.2.1",
     "nprogress": "^0.2.0",
     "relation-graph": "^1.1.0",
     "v-viewer": "^1.6.3",
diff --git a/src/views/map/dialog/index.vue b/src/views/map/dialog/index.vue
index 84d357e..2520858 100644
--- a/src/views/map/dialog/index.vue
+++ b/src/views/map/dialog/index.vue
@@ -49,6 +49,7 @@
       <!--秦岗九公司 详情页面 start-->
       <!--人员定位-->
       <peoplePositionNine v-if="type === 'peoplePositionNine'" :id="id" :type="type" :infoname="infoname"/>
+      <peoplePositionOne v-if="type === 'peoplePositionOne'" :id="id" :type="type" />
       <!--秦岗九公司 详情页面 end-->
     </el-dialog>
   </div>
@@ -91,6 +92,7 @@ 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'
 
 export default {
   components: {
@@ -129,7 +131,8 @@ export default {
     peoplePositionCfdD,
     peoplePositionNine,
     carPositionCfdD,
-    videoPlayBianjieruqin
+    videoPlayBianjieruqin,
+    peoplePositionOne
   },
   props: {
     title: {
diff --git a/src/views/map/dialog/peoplePositionOne.vue b/src/views/map/dialog/peoplePositionOne.vue
new file mode 100644
index 0000000..b8c23ad
--- /dev/null
+++ b/src/views/map/dialog/peoplePositionOne.vue
@@ -0,0 +1,111 @@
+<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 >{{ info?info.NAME:''  }}</td>
+      </tr>
+      <tr>
+        <td class="bbg-transparent">工号</td>
+        <td >{{ id }}</td>
+      </tr>
+      <tr>
+        <td class="bbg-transparent">部门</td>
+        <td >{{ info?info.DEPARTMENT_NAME:'' }}</td>
+      </tr>
+      <tr>
+        <td class="bbg-transparent">岗位</td>
+        <td >{{ info?info.POST_NAME:'' }}</td>
+      </tr>
+    </table>
+    <table class="table-ui">
+      <div class="level-title titles">
+        <h1>八项作业</h1>
+      </div>
+
+      <tr>
+        <td colspan="4" style="padding: 0;">
+          <table class="table-vi">
+            <tr class="bbg-transparent">
+              <td>序号</td>
+              <td>作业类型</td>
+              <td>作业内容</td>
+              <td>编号</td>
+            </tr>
+            <tr v-for="(item, index) in measuresList" :key="item.ID">
+              <td>{{ index + 1 }}</td>
+              <td>{{ item.WORK_TYPE }}</td>
+              <td>{{ item.WORK_CONTENT }}</td>
+              <td>{{ item.WORK_NUMBER }}</td>
+            </tr>
+          </table>
+        </td>
+      </tr>
+    </table>
+  </div>
+</template>
+
+<script>
+import { requestFN } from '@/utils/request'
+import moment from 'moment/moment'
+
+export default {
+  props: {
+    id: {
+      type: String,
+      default() {
+        return ''
+      }
+    },
+    type: {
+      type: String,
+      default() {
+        return ''
+      }
+    },
+  },
+  data() {
+    return {
+      config: config,
+      info: {},
+      ImgList: [],
+      measuresList: [],
+      gongdanList: []
+    }
+  },
+  created() {
+    this.getData()
+  },
+  methods: {
+    formatDate(date, format) {
+      if (date) {
+        return moment(date).format(format)
+      } else {
+        return ''
+      }
+    },
+    getData() {
+      requestFN(
+        '/map/getUserMapInfo',
+        {
+          CARDNO: this.id,
+          TYPE: this.type
+        }
+      ).then((data) => {
+        this.info = data.pd
+      }).catch((e) => {
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+
+.titles {
+  margin-top: 20px;
+}
+
+</style>
diff --git a/src/views/map/index.vue b/src/views/map/index.vue
index 1187852..371d346 100644
--- a/src/views/map/index.vue
+++ b/src/views/map/index.vue
@@ -204,6 +204,7 @@
 </template>
 
 <script>
+import RyDragEntity from './js/ry_dragentity.js'
 import Bubble from './bubble/index.js'
 import DragEntity, { imgMap } from './js/dragentity.js'
 import { requestFN } from '@/utils/request'
@@ -229,10 +230,13 @@ import cloneDeep from 'lodash/cloneDeep'
 import fullScreenMixins from '@/assets/mixins/fullScreen'
 import { animate } from 'motion'
 import loadMapBoxCfd from './js/mapboxCfd'
+import loadMapBox from './js/mapbox'
 import AnquanCfd from './components/anquanCfd'
-
+import { forEach } from 'lodash'
+import mqtt from 'mqtt'
 let viewer = null
 let drag = null
+let ry_drag = null
 var tiandituTk = 'e8a16137fd226a62a23cc7ba5c9c78ce'
 var subdomains = ['0', '1', '2', '3', '4', '5', '6', '7']
 const Cesium = window.Cesium
@@ -764,9 +768,9 @@ export default {
       cfdCarDIngweiTimer: '',
       perLocArr: [],
       carLocArr: [],
+      pointBoxCfd: [],
       pointBox: [],
       fwebsocket: {},
-
       redList: [],
       orangeList: [],
       yellowList: [],
@@ -972,13 +976,66 @@ export default {
             }
           ]
         }
-      ]
+      ],
+      arr: [
+        {
+          x: 118.50197080443918,
+          y: 38.922992617470584,
+          id: 'router-fly-line1',
+          name: '1大弹窗'
+        },
+        {
+          x: 118.60197080443918,
+          y: 38.822992617470584,
+          id: 'router-fly-line2',
+          name: '1大弹窗'
+        }
+      ],
+      pointBoxNine: [],
+      ninePerLocArr: [],
       /* 曹妃甸使用参数结束*/
+
+      /* 一公司人员定位*/
+      // mqtt  开始
+      connection: {
+        protocol: 'ws',
+        host: '192.168.211.80',
+        port: 13083,
+        endpoint: '/mqtt',
+        // for more options, please refer to https://github.com/mqttjs/MQTT.js#mqttclientstreambuilder-options
+        clean: true,
+        connectTimeout: 30 * 1000, // ms
+        reconnectPeriod: 4000, // ms
+        clientId: Math.random()
+          .toString(16)
+          .substring(2, 8),
+        // auth
+        username: '008ecc903cfb4bc08f7ed02f9b46345e',
+        password: '58d06a44d56c4445b4c019492f86ee8d'
+      },
+      subscription: {
+        topic: '1698584148364034050/UwbBQ/+/prop',
+        qos: 0
+      },
+
+      client: {
+        connected: false
+      },
+      receiveNews: '',
+      subscribeSuccess: false,
+      connecting: false,
+      retryTimes: 0,
+      // mqtt  结束
+      onePerLocArr: [],
+      iniOne: 0
+
+      /* 一公司人员定位 结束*/
     }
   },
   mounted() {
     this.initMap()
-    this.pointBox = loadMapBoxCfd()
+    this.pointBoxCfd = loadMapBoxCfd()
+    this.pointBox = loadMapBox()
   },
   methods: {
     initMap() {
@@ -1030,6 +1087,20 @@ export default {
       this.dragAreaEntity(this.initPoint)
 
       this.loadTilesetHandler()
+      ry_drag = new RyDragEntity({
+        viewer
+      })
+      // setInterval(() => {
+      //   for (let i = 0; i < this.arr.length; i++) {
+      //     if (!this.arr[i].property) {
+      //       ry_drag.addEntity(this.arr[i])
+      //     } else {
+      //       this.arr[i].x += 0.0003 * Math.random()
+      //       this.arr[i].y += 0.0001
+      //       ry_drag.getPosition(this.arr[i])
+      //     }
+      //   }
+      // }, 1000)
     },
 
     loadTilesetHandler() {
@@ -1081,7 +1152,8 @@ export default {
           }
           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') {
+            // if (this.gangkouActive === '00004' && point_type.indexOf('标记点') !== -1 && point_id.substring(0, 1) === '0' || point_id.substring(0, 1) === '5') {
+
             const { label, point_type, data_id, infoname, code } = pick.id._monitoItems.data
             this.dialog.visible = true
             this.dialog.title = label
@@ -1098,10 +1170,10 @@ export default {
             this.dialog.id = data_id
             this.dialog.corpInfoId = corpInfoId
             this.dialog.infoname = infoname
-            console.log(this.dialog)
             this.dialog.width = dialog_width || '50%'
           }
         } else {
+          console.log(4)
           this.closeBubbles()
         }
         // var cartesian = this.getCatesian3FromPX(movement.position)
@@ -1282,6 +1354,7 @@ export default {
     dragEntity(poin, pindex, index) {
       var _this = this
       const collection = new Cesium.CustomDataSource('clickEntityCollection')
+
       poin.forEach(item => {
         if (!this.poinEntity.hasOwnProperty(item.id)) {
           const entity = drag.addEntity(item)
@@ -1430,6 +1503,7 @@ export default {
     },
 
     handleClickRightTools(index) {
+      console.info(index)
       if (this.rightOptionsList[index].check !== '') this.rightOptionsList[index].check = !this.rightOptionsList[index].check
       if (index === 0) {
         if (this.gangkouActive === '00004') {
@@ -1444,6 +1518,9 @@ export default {
           }
           this.perLocArr = []
         }
+
+        this.destroyConnection()
+        this.onePerLocArr = []
         this.$router.push('/index')
       } else if (index === 1) {
         this.handleFullScreen(undefined)
@@ -1452,6 +1529,8 @@ export default {
       } else if (index === 3) {
         this.changeSceneMode(this.rightOptionsList[index].check)
       } else if (index === 4) {
+        this.destroyConnection()
+        this.onePerLocArr = []
         this.clearAllBottomOptionsItemsCheck()
         this.clearAllBottomOptionsItemsEntityCollection()
       } else if (index === 5) {
@@ -1487,10 +1566,10 @@ export default {
     },
     bottomOptionsClick(index) {
       if (this.bottomOptionsIndex === index) {
-        this.bottomOptionsIndex = '';
+        this.bottomOptionsIndex = ''
         // (this.gangkouActive === '00004' && index !== 1) && drag.addPolygon(this.gangkouActive)
       } else {
-        this.bottomOptionsIndex = index;
+        this.bottomOptionsIndex = index
         // (this.gangkouActive === '00004' && index !== 1) && viewer.entities.removeAll()
       }
       this.collapse = false
@@ -1565,6 +1644,7 @@ export default {
         this.toCenter(this.initCenter)
         this.dragAreaEntity(this.initPoint)
       }
+
       this.componentKey = Math.random()
       this.bottomOptionsKey = Math.random()
       this.bottomOptionsAnimationComplex = false
@@ -1574,6 +1654,8 @@ export default {
     },
 
     bottomOptionsItemsClick(pindex, index, label, urlType, pointUrl, dialog_width) {
+      console.info(urlType)
+      console.info(this.CORP_INFO_ID + '-')
       if (this.bottomOptionsList[pindex].list[index].check || this.gangkouActive === '00004' && this.cfdBottomOptionsList[pindex].list[index].check) {
         // 人员定位关闭实时获取定位websocket 并关闭人员对比定时器（曹妃甸使用）
         if (this.gangkouActive === '00004' && urlType === 'peoplePosition') {
@@ -1594,6 +1676,10 @@ export default {
           }
           this.carLocArr = []
         }
+        if (this.gangkouActive === '00003' && this.CORP_INFO_ID === '035958e685cf4850bc40151c5e0617a6' && urlType === 'peoplePosition') {
+          this.destroyConnection()
+          this.onePerLocArr = []
+        }
         this.bottomOptionsList[pindex].list[index].check = false
         if (this.gangkouActive === '00004') {
           this.cfdBottomOptionsList[pindex].list[index].check = false
@@ -1610,73 +1696,79 @@ export default {
         if (this.gangkouActive === '00004') {
           this.cfdBottomOptionsList[pindex].list[index].check = true
         }
-        requestFN(
-          pointUrl,
-          {
-            CORPINFO_ID: this.CORP_INFO_ID,
-            TYPE: urlType,
-            AREA: this.area,
-            GANGKOU: this.gangkouActive
-          }
-        ).then(async(data) => {
-          const points = []
-          const varList = this.filterNull(data.varList)
-          for (let i = 0; i < varList.length; i++) {
-            const point = {}
-            point.id = pindex + '_' + index + '_' + i
-            point.data_id = varList[i].id
-            point.corpInfoId = varList[i].CORPINFO_ID
-            point.name = varList[i].NAME
-            point.point_type = '标记点' + urlType
-            point.label = label
-            point.type = '标记点'
-            point.icon_type = pindex + '_' + index
-            point.position = {}
-            point.position.x = +varList[i].LONGITUDE
-            point.position.y = +varList[i].LATITUDE
-            point.dialog_width = dialog_width
-            point.MAP_POINT_NAME = varList[i].MAP_POINT_NAME
-            // 曹妃甸使用
-            point.gangkou = this.gangkouActive
-            // 闸机名称
-            point.gate_machine_name = varList[i].GATE_MACHINE_NAME
-            // 摄像头编号
-            point.code = varList[i].INDEXCODE || '' // 摄像头编号
-            // 人员定位
-            if (urlType === 'peoplePosition') {
-              point.data_id = varList[i].empNo || ''
-            }
-            point.empNo = varList[i].empNo || '' // 工号
-            point.cardNo = varList[i].cardNo || '' // 卡号
-            if (pindex === 0) {
-              point.infoname = varList[i].GATE_MACHINE_NAME
-            } else {
-              point.infoname = varList[i].NAME
-            }
-            points.push(point)
-          }
-          if (this.gangkouActive === '00004' && urlType === 'carPosition') {
-            this.timerCfdCarDingwei()
-            this.carLocArr = points
-          }
-          console.info('================' + urlType)
-          // 人员定位开启实时获取定位websocket （曹妃甸使用） - 开始
-          if (this.gangkouActive === '00004' && urlType === 'peoplePosition') {
-            console.info('================' + urlType)
-            this.timerCfdDingwei()
-            this.delayedAccessEightWorkers()
-            this.perLocArr = points
-            // 获取各种颜色人员列表（八项作业与工单）
-            await this.initColorList()
-            this.isItWithinTheArea()
-            // this.initPerLocWebsocket()
-          }
 
-          // 人员定位开启实时获取定位websocket （曹妃甸使用） - 结束
-          this.dragEntity(points, pindex, index)
-        }).catch((e) => {
-          console.log(e)
-        })
+        if (this.gangkouActive === '00003' && this.CORP_INFO_ID === '035958e685cf4850bc40151c5e0617a6' && urlType === 'peoplePosition') {
+          this.createConnection()
+        } else {
+          requestFN(
+            pointUrl,
+            {
+              CORPINFO_ID: this.CORP_INFO_ID,
+              TYPE: urlType,
+              AREA: this.area,
+              GANGKOU: this.gangkouActive
+            }
+          ).then(async(data) => {
+            const points = []
+            const varList = this.filterNull(data.varList)
+            for (let i = 0; i < varList.length; i++) {
+              const point = {}
+              point.id = pindex + '_' + index + '_' + i
+              point.data_id = varList[i].id
+              point.corpInfoId = varList[i].CORPINFO_ID
+              point.name = varList[i].NAME
+              point.point_type = '标记点' + urlType
+              point.label = label
+              point.type = '标记点'
+              point.icon_type = pindex + '_' + index
+              point.position = {}
+              point.position.x = +varList[i].LONGITUDE
+              point.position.y = +varList[i].LATITUDE
+              point.dialog_width = dialog_width
+              point.MAP_POINT_NAME = varList[i].MAP_POINT_NAME
+              // 曹妃甸使用
+              point.gangkou = this.gangkouActive
+              // 闸机名称
+              point.gate_machine_name = varList[i].GATE_MACHINE_NAME
+              // 摄像头编号
+              point.code = varList[i].INDEXCODE || '' // 摄像头编号
+              // 人员定位
+              if (urlType === 'peoplePosition') {
+                point.data_id = varList[i].empNo || ''
+              }
+              point.empNo = varList[i].empNo || '' // 工号
+              point.cardNo = varList[i].cardNo || '' // 卡号
+              if (pindex === 0) {
+                point.infoname = varList[i].GATE_MACHINE_NAME
+              } else {
+                point.infoname = varList[i].NAME
+              }
+              points.push(point)
+            }
+            if (this.gangkouActive === '00004' && urlType === 'carPosition') {
+              this.timerCfdCarDingwei()
+              this.carLocArr = points
+            }
+            console.info('================' + urlType)
+            // 人员定位开启实时获取定位websocket （曹妃甸使用） - 开始
+            if (this.gangkouActive === '00004' && urlType === 'peoplePosition') {
+              console.info('================' + urlType)
+              this.timerCfdDingwei()
+              this.delayedAccessEightWorkers()
+              this.perLocArr = points
+              // 获取各种颜色人员列表（八项作业与工单）
+              await this.initColorList()
+              this.isItWithinTheArea()
+              // this.initPerLocWebsocket()
+            }
+
+            // 人员定位开启实时获取定位websocket （曹妃甸使用） - 结束
+            this.dragEntity(points, pindex, index)
+          }).catch((e) => {
+            console.log(e)
+          })
+        }
+
         // if (label === '摄像头') {
         //   setTimeout(() => {
         //     const point = cloneDeep(points[2])
@@ -1825,6 +1917,254 @@ export default {
       await this.getAllWorkUserCards()
       await this.getAllTickets()
     },
+
+    // 查询当前点位是否在区域内
+    isPointxyWithinTheArea(pointBox, x, y) {
+      if (this.forEachIsPointInPolygon(pointBox.redList, x, y)) {
+        return '_1'
+      } else if (this.forEachIsPointInPolygon(pointBox.orangeList, x, y)) {
+        return '_2'
+      } else if (this.forEachIsPointInPolygon(pointBox.yellowList, x, y)) {
+        return '_3'
+      } else {
+        return ''
+      }
+    },
+    /* 一公司人员定位   mqtt务必使用4.2.1版本*/
+    // 初始化Mqtt数据
+    initMqttData() {
+      this.client = {
+        connected: false
+      }
+      this.retryTimes = 0
+      this.connecting = false
+      this.subscribeSuccess = false
+    },
+    // 创建连接
+    createConnection() {
+      try {
+        this.connecting = true
+        const { protocol, host, port, endpoint, ...options } = this.connection
+        const connectUrl = `${protocol}://${host}:${port}${endpoint}`
+        this.client = mqtt.connect(connectUrl, options)
+
+        if (this.client.on) {
+          this.client.on('connect', () => {
+            this.connecting = false
+            console.log('Connection succeeded!')
+
+            this.doSubscribe()
+          })
+          this.client.on('reconnect', this.handleOnReConnect)
+          this.client.on('error', error => {
+            console.log('Connection failed', error)
+          })
+          this.client.on('message', (topic, message) => {
+            console.info(message)
+            // if(this.intOne === 0){
+            // this.receiveNews = this.receiveNews.concat(message)
+            // console.log(`Received message ${message} from topic ${topic}`)
+            const item = JSON.parse(message)
+            // 将地图上剩余的点与最新的定位人员点进行对比   更新地图上已存在的点    新增地图上之前没有的点
+            const index = this.onePerLocArr.findIndex(item1 => {
+              return item1.id.toString() === item.deviceCode.toString()
+            })
+            const x = item.properties[2].value
+            const y = item.properties[3].value
+            const pointColor = this.isPointxyWithinTheArea(this.pointBox, x, y)
+            if (index !== -1) {
+              this.onePerLocArr[index].x = x
+              this.onePerLocArr[index].y = y
+              this.onePerLocArr[index].icon_type = 'img4_0' + pointColor
+              ry_drag.getPosition(this.onePerLocArr[index])
+            } else {
+              // const id = '4_0_' +item.deviceCode
+              const perLoc = {
+                id: item.deviceCode,
+                // name: item.realName,
+                x: x,
+                y: y,
+                icon_type: 'img4_0' + pointColor,
+                // infoname: item.realName,
+                data_id: item.deviceCode,
+                point_type: '标记点peoplePositionOne'
+                // label: item.realName
+              }
+              this.onePerLocArr.push(perLoc)
+              ry_drag.addEntity(perLoc)
+            }
+            //   this.intOne++
+            // } else if(this.intOne < 5){
+            //   this.intOne++
+            // } else {
+            //   this.intOne = 0
+            // }
+          })
+        }
+      } catch (error) {
+        this.connecting = false
+        console.log('mqtt.connect error', error)
+      }
+    },
+    // 订阅
+    doSubscribe() {
+      const { topic, qos } = this.subscription
+      this.client.subscribe(topic, { qos }, (error, res) => {
+        if (error) {
+          console.log('Subscribe to topics error', error)
+          return
+        }
+        this.subscribeSuccess = true
+        console.log('Subscribe to topics res', res)
+      })
+    },
+
+    handleOnReConnect() {
+      this.retryTimes += 1
+      if (this.retryTimes > 5) {
+        try {
+          this.client.end()
+          this.initData()
+          this.$message.error('Connection maxReconnectTimes limit, stop retry')
+        } catch (error) {
+          this.$message.error(error.toString())
+        }
+      }
+    },
+    // 断开连接
+    destroyConnection() {
+      if (this.client.connected) {
+        try {
+          this.client.end(false, () => {
+            this.initMqttData()
+            console.log('Successfully disconnected!')
+          })
+        } catch (error) {
+          console.log('Disconnect failed', error.toString())
+        }
+      }
+    },
+    /* 一公司人员定位   mqtt务必使用4.2.1版本*/
+    // 九公司人员定位websocket
+    initNinePerLocWebsocket() {
+      const _this = this
+      if (window.WebSocket) {
+        const wsUrl = 'ws://dev.rydw.trinitytech.com.cn/gateway-service/websocket/ws'
+        this.fwebsocket = new WebSocket(encodeURI(wsUrl + '/XR_' + new Date().getTime() + '_98')) // oladress在main.jsp页面定义
+        console.info(wsUrl + '/XR_' + new Date().getTime() + '_98')
+        this.fwebsocket.onopen = () => {
+          setInterval(() => {
+            if (this.fwebsocket.readyState === 1) {
+              this.fwebsocket.send('ok')
+            }
+          }, 5000)
+          this.fwebsocket.send('ok')
+          // console.info(this.fwebsocket.readyState + '-----------------------------')
+          console.info('链接成功')
+        }
+        this.fwebsocket.onerror = function() {
+          console.info('连接失败')
+          // 连接失败
+        }
+        this.fwebsocket.onclose = function() {
+          console.info('onclose')
+        }
+        this.fwebsocket.onmessage = function(message) {
+          console.info(_this.ninePerLocArr)
+          console.info('接收消息')
+          // const mockData = JSON.parse(message.data)
+          const mockData = {
+            msgType: 'currentPersonLocation',
+            total: 11,
+            data: [
+              {
+                acceptTime: '2023-09-24 10:42:05',
+                beaconId: -1,
+                cardId: 3842875088,
+                cardPower: 80,
+                cardStatus: '-1',
+                cardType: null,
+                cardTypeName: null,
+                contractorId: null,
+                contractorName: null,
+                createTime: null,
+                deptId: '137300840373161984',
+                deptName: '研发部',
+                distance: 2.0,
+                id: null,
+                idNumber: null,
+                inRailScope: null,
+                jobNumber: '7788',
+                latitude: 39.90143150097692,
+                layerHeight: 5,
+                layerId: '沧州港',
+                layerMoveSpeed: null,
+                layerName: null,
+                longitude: 116.55726529738824,
+                personAttribute: '/init/蓝帽.png',
+                personCategory: '员工',
+                personId: 3,
+                personPhoto: null,
+                personType: 'staff',
+                personTypeName: '员工',
+                phone: null,
+                positionId: 7855,
+                postId: null,
+                postName: null,
+                realName: '孔七',
+                staffType: null,
+                stillStatus: 0,
+                undisposedAlarmCount: 0
+              }
+            ]
+          }
+          _this.radomPer(mockData)
+          if (mockData.msgType === 'currentPersonLocation') {
+            // 将地图上的点与最新的定位人员点进行对比    删除地图上多的点
+            const ninePerLoc = _this.ninePerLocArr.filter(item => {
+              const index = mockData.data.findIndex(item1 => {
+                return item.id.toString() === item1.cardId.toString()
+              })
+              return index !== -1
+            })
+            // 将地图上剩余的点与最新的定位人员点进行对比   更新地图上已存在的点    新增地图上之前没有的点
+            for (const item of mockData.data) {
+              const index = ninePerLoc.findIndex(item1 => {
+                return item1.id.toString() === item.cardId.toString()
+              })
+              if (index !== -1) {
+                ninePerLoc[index].x = item.longitude
+                ninePerLoc[index].y = item.latitude
+                ninePerLoc[index].icon_type = 'img4_0_2'
+                ry_drag.getPosition(ninePerLoc[index])
+              } else {
+                const perLoc = {
+                  id: item.cardId,
+                  name: item.realName,
+                  x: item.longitude,
+                  y: item.latitude,
+                  icon_type: 'img4_0_1',
+                  infoname: item.realName,
+                  data_id: item.cardId,
+                  point_type: '标记点peoplePositionNine',
+                  label: item.realName
+                }
+                ninePerLoc.push(perLoc)
+                ry_drag.addEntity(perLoc)
+              }
+            }
+            // 最后更新ninePerLocArr
+            _this.ninePerLocArr = ninePerLoc
+          }
+        }
+      }
+    },
+    radomPer(mockData) {
+      for (const item of mockData.data) {
+        item.longitude += 0.0003 * Math.random()
+        item.latitude += 0.0001 * Math.random()
+      }
+    },
     initPerLocWebsocket() {
       var _this = this
       if (window.WebSocket) {
@@ -1847,7 +2187,6 @@ export default {
             // console.info('消息接收')
             var msg = _this.unzip(message.data)
             // const decodedStr = decodeURIComponent(msg) // 进行解码
-            const decodedStr = '123123'
             // console.info(decodedStr)
             if (decodedStr) {
               // const perTrack = JSON.parse(decodedStr)
@@ -2020,28 +2359,41 @@ export default {
       _this.perLocArr.forEach((item, index) => {
         // 判断是否存在于四色区域内
         const redFiled = []
-        _this.pointBox.redList.forEach(item => { redFiled.push(...item['position']) })
+        _this.pointBoxCfd.redList.forEach(item => { redFiled.push(...item['position']) })
         const orangeFiled = []
-        _this.pointBox.orangeList.forEach(item => { orangeFiled.push(...item['position']) })
+        _this.pointBoxCfd.orangeList.forEach(item => { orangeFiled.push(...item['position']) })
         const yellowFiled = []
-        _this.pointBox.yellowList.forEach(item => { yellowFiled.push(...item['position']) })
+        _this.pointBoxCfd.yellowList.forEach(item => { yellowFiled.push(...item['position']) })
+        console.info(_this.pointBoxCfd.orangeList)
         if (this.redList.indexOf(item.cardNo) > -1) {
           _this.$set(_this.perLocArr[index], 'color', 'red')
-        } else if (redFiled !== [] && _this.forEachIsPointInPolygon(_this.pointBox.redList, item.position.x, item.position.y)) {
+        } else if (redFiled !== [] && _this.forEachIsPointInPolygon(_this.pointBoxCfd.redList, item.position.x, item.position.y)) {
           _this.$set(_this.perLocArr[index], 'color', 'red')
         } else if (this.orangeList.indexOf(item.cardNo) > -1) {
           _this.$set(_this.perLocArr[index], 'color', 'orange')
-        } else if (orangeFiled !== [] && _this.forEachIsPointInPolygon(_this.pointBox.orangeList, item.position.x, item.position.y)) {
+        } else if (orangeFiled !== [] && _this.forEachIsPointInPolygon(_this.pointBoxCfd.orangeList, item.position.x, item.position.y)) {
           _this.$set(_this.perLocArr[index], 'color', 'orange')
         } else if (this.yellowList.indexOf(item.cardNo) > -1) {
           _this.$set(_this.perLocArr[index], 'color', 'yellow')
-        } else if (yellowFiled !== [] && _this.forEachIsPointInPolygon(_this.pointBox.yellowList, item.position.x, item.position.y)) {
+        } else if (yellowFiled !== [] && _this.forEachIsPointInPolygon(_this.pointBoxCfd.yellowList, item.position.x, item.position.y)) {
           _this.$set(_this.perLocArr[index], 'color', 'yellow')
         } else {
           _this.$set(_this.perLocArr[index], 'color', 'blue')
         }
       })
     },
+    // 查询当前点位是否在区域内
+    isPointWithinTheArea(pointBox, point) {
+      if (this.forEachIsPointInPolygon(pointBox.redList, point.x, point.y)) {
+        point.color = 'red'
+      } else if (this.forEachIsPointInPolygon(pointBox.orangeList, point.x, point.y)) {
+        point.color = 'orange'
+      } else if (this.forEachIsPointInPolygon(pointBox.yellowList, point.x, point.y)) {
+        point.color = 'yellow'
+      } else {
+        point.color = 'blue'
+      }
+    },
 
     //  循环判断某个点是否在某些区域内。只要在任意一个区域内。则返回true
     forEachIsPointInPolygon(polygonList, lng, lat) {
diff --git a/src/views/map/js/ry_dragentity.js b/src/views/map/js/ry_dragentity.js
new file mode 100644
index 0000000..1451988
--- /dev/null
+++ b/src/views/map/js/ry_dragentity.js
@@ -0,0 +1,58 @@
+
+const img4_0 = require('../../../assets/map/gangkou_index/point/ico21.png')
+const img4_0_1 = require('../../../assets/map/gangkou_index/point/icon27.png')
+const img4_0_2 = require('../../../assets/map/gangkou_index/point/icon28.png')
+const img4_0_3 = require('../../../assets/map/gangkou_index/point/icon29.png')
+const Cesium = window.Cesium
+const imgMap = {
+  img4_0, img4_0_1, img4_0_2, img4_0_3
+}
+export { imgMap }
+export default class DragEntity {
+  constructor(val) {
+    this.viewer = val.viewer
+  }
+  addEntity(point) {
+    point.property = new Cesium.SampledPositionProperty()
+    const start = Cesium.JulianDate.now()
+    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,
+      position: point.property,
+      heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+      billboard: {
+        image: imgMap[point.icon_type],
+        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+        disableDepthTestDistance: Number.POSITIVE_INFINITY
+      },
+      orientation: new Cesium.VelocityOrientationProperty(point.property),
+
+      monitoItems: {
+        data: point
+      }
+    }
+
+    this.viewer.entities.add(entityOption)
+    this.viewer.clock.startTime = start.clone()
+    this.viewer.clock.currentTime = start.clone()
+    this.viewer.clock.clockRange = Cesium.ClockRange.CLAMPED
+    this.viewer.clock.shouldAnimate = false
+  }
+  getPosition(point) {
+    if (this.viewer.clock.shouldAnimate === false) {
+      this.viewer.clock.shouldAnimate = true
+    }
+    const position = Cesium.Cartesian3.fromDegrees(point.x, point.y, 0)
+    const entity = this.viewer.entities.getById(point.id)
+    entity.billboard.image = imgMap[point.icon_type]
+    const nextTime = Cesium.JulianDate.addSeconds(point.lastTime, 10, new Cesium.JulianDate())
+    point.property.addSample(nextTime, position)
+    point.lastTime = nextTime
+  }
+}