一公司人员定位
parent
d8cceb3ed8
commit
abdc5a6b76
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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() {
|
||||
|
|
@ -1082,6 +1153,7 @@ 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') {
|
||||
|
||||
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,6 +1696,10 @@ export default {
|
|||
if (this.gangkouActive === '00004') {
|
||||
this.cfdBottomOptionsList[pindex].list[index].check = true
|
||||
}
|
||||
|
||||
if (this.gangkouActive === '00003' && this.CORP_INFO_ID === '035958e685cf4850bc40151c5e0617a6' && urlType === 'peoplePosition') {
|
||||
this.createConnection()
|
||||
} else {
|
||||
requestFN(
|
||||
pointUrl,
|
||||
{
|
||||
|
|
@ -1677,6 +1767,8 @@ export default {
|
|||
}).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) {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue