一公司人员定位
parent
d8cceb3ed8
commit
abdc5a6b76
|
@ -26,6 +26,7 @@
|
||||||
"lodash": "^4.17.21",
|
"lodash": "^4.17.21",
|
||||||
"moment": "^2.29.3",
|
"moment": "^2.29.3",
|
||||||
"motion": "^10.16.4",
|
"motion": "^10.16.4",
|
||||||
|
"mqtt": "^4.2.1",
|
||||||
"nprogress": "^0.2.0",
|
"nprogress": "^0.2.0",
|
||||||
"relation-graph": "^1.1.0",
|
"relation-graph": "^1.1.0",
|
||||||
"v-viewer": "^1.6.3",
|
"v-viewer": "^1.6.3",
|
||||||
|
|
|
@ -49,6 +49,7 @@
|
||||||
<!--秦岗九公司 详情页面 start-->
|
<!--秦岗九公司 详情页面 start-->
|
||||||
<!--人员定位-->
|
<!--人员定位-->
|
||||||
<peoplePositionNine v-if="type === 'peoplePositionNine'" :id="id" :type="type" :infoname="infoname"/>
|
<peoplePositionNine v-if="type === 'peoplePositionNine'" :id="id" :type="type" :infoname="infoname"/>
|
||||||
|
<peoplePositionOne v-if="type === 'peoplePositionOne'" :id="id" :type="type" />
|
||||||
<!--秦岗九公司 详情页面 end-->
|
<!--秦岗九公司 详情页面 end-->
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
</div>
|
</div>
|
||||||
|
@ -91,6 +92,7 @@ import hoistingCfdD from './hoistingCfdD.vue'
|
||||||
import peoplePositionCfdD from './peoplePositionCfdD.vue'
|
import peoplePositionCfdD from './peoplePositionCfdD.vue'
|
||||||
import peoplePositionNine from './peoplePositionNine.vue'
|
import peoplePositionNine from './peoplePositionNine.vue'
|
||||||
import carPositionCfdD from './carPositionCfdD.vue'
|
import carPositionCfdD from './carPositionCfdD.vue'
|
||||||
|
import peoplePositionOne from './peoplePositionOne.vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
|
@ -129,7 +131,8 @@ export default {
|
||||||
peoplePositionCfdD,
|
peoplePositionCfdD,
|
||||||
peoplePositionNine,
|
peoplePositionNine,
|
||||||
carPositionCfdD,
|
carPositionCfdD,
|
||||||
videoPlayBianjieruqin
|
videoPlayBianjieruqin,
|
||||||
|
peoplePositionOne
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
title: {
|
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>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import RyDragEntity from './js/ry_dragentity.js'
|
||||||
import Bubble from './bubble/index.js'
|
import Bubble from './bubble/index.js'
|
||||||
import DragEntity, { imgMap } from './js/dragentity.js'
|
import DragEntity, { imgMap } from './js/dragentity.js'
|
||||||
import { requestFN } from '@/utils/request'
|
import { requestFN } from '@/utils/request'
|
||||||
|
@ -229,10 +230,13 @@ import cloneDeep from 'lodash/cloneDeep'
|
||||||
import fullScreenMixins from '@/assets/mixins/fullScreen'
|
import fullScreenMixins from '@/assets/mixins/fullScreen'
|
||||||
import { animate } from 'motion'
|
import { animate } from 'motion'
|
||||||
import loadMapBoxCfd from './js/mapboxCfd'
|
import loadMapBoxCfd from './js/mapboxCfd'
|
||||||
|
import loadMapBox from './js/mapbox'
|
||||||
import AnquanCfd from './components/anquanCfd'
|
import AnquanCfd from './components/anquanCfd'
|
||||||
|
import { forEach } from 'lodash'
|
||||||
|
import mqtt from 'mqtt'
|
||||||
let viewer = null
|
let viewer = null
|
||||||
let drag = null
|
let drag = null
|
||||||
|
let ry_drag = null
|
||||||
var tiandituTk = 'e8a16137fd226a62a23cc7ba5c9c78ce'
|
var tiandituTk = 'e8a16137fd226a62a23cc7ba5c9c78ce'
|
||||||
var subdomains = ['0', '1', '2', '3', '4', '5', '6', '7']
|
var subdomains = ['0', '1', '2', '3', '4', '5', '6', '7']
|
||||||
const Cesium = window.Cesium
|
const Cesium = window.Cesium
|
||||||
|
@ -764,9 +768,9 @@ export default {
|
||||||
cfdCarDIngweiTimer: '',
|
cfdCarDIngweiTimer: '',
|
||||||
perLocArr: [],
|
perLocArr: [],
|
||||||
carLocArr: [],
|
carLocArr: [],
|
||||||
|
pointBoxCfd: [],
|
||||||
pointBox: [],
|
pointBox: [],
|
||||||
fwebsocket: {},
|
fwebsocket: {},
|
||||||
|
|
||||||
redList: [],
|
redList: [],
|
||||||
orangeList: [],
|
orangeList: [],
|
||||||
yellowList: [],
|
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() {
|
mounted() {
|
||||||
this.initMap()
|
this.initMap()
|
||||||
this.pointBox = loadMapBoxCfd()
|
this.pointBoxCfd = loadMapBoxCfd()
|
||||||
|
this.pointBox = loadMapBox()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
initMap() {
|
initMap() {
|
||||||
|
@ -1030,6 +1087,20 @@ export default {
|
||||||
this.dragAreaEntity(this.initPoint)
|
this.dragAreaEntity(this.initPoint)
|
||||||
|
|
||||||
this.loadTilesetHandler()
|
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() {
|
loadTilesetHandler() {
|
||||||
|
@ -1082,6 +1153,7 @@ export default {
|
||||||
console.log(point_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) === '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
|
const { label, point_type, data_id, infoname, code } = pick.id._monitoItems.data
|
||||||
this.dialog.visible = true
|
this.dialog.visible = true
|
||||||
this.dialog.title = label
|
this.dialog.title = label
|
||||||
|
@ -1098,10 +1170,10 @@ export default {
|
||||||
this.dialog.id = data_id
|
this.dialog.id = data_id
|
||||||
this.dialog.corpInfoId = corpInfoId
|
this.dialog.corpInfoId = corpInfoId
|
||||||
this.dialog.infoname = infoname
|
this.dialog.infoname = infoname
|
||||||
console.log(this.dialog)
|
|
||||||
this.dialog.width = dialog_width || '50%'
|
this.dialog.width = dialog_width || '50%'
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
|
console.log(4)
|
||||||
this.closeBubbles()
|
this.closeBubbles()
|
||||||
}
|
}
|
||||||
// var cartesian = this.getCatesian3FromPX(movement.position)
|
// var cartesian = this.getCatesian3FromPX(movement.position)
|
||||||
|
@ -1282,6 +1354,7 @@ export default {
|
||||||
dragEntity(poin, pindex, index) {
|
dragEntity(poin, pindex, index) {
|
||||||
var _this = this
|
var _this = this
|
||||||
const collection = new Cesium.CustomDataSource('clickEntityCollection')
|
const collection = new Cesium.CustomDataSource('clickEntityCollection')
|
||||||
|
|
||||||
poin.forEach(item => {
|
poin.forEach(item => {
|
||||||
if (!this.poinEntity.hasOwnProperty(item.id)) {
|
if (!this.poinEntity.hasOwnProperty(item.id)) {
|
||||||
const entity = drag.addEntity(item)
|
const entity = drag.addEntity(item)
|
||||||
|
@ -1430,6 +1503,7 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
handleClickRightTools(index) {
|
handleClickRightTools(index) {
|
||||||
|
console.info(index)
|
||||||
if (this.rightOptionsList[index].check !== '') this.rightOptionsList[index].check = !this.rightOptionsList[index].check
|
if (this.rightOptionsList[index].check !== '') this.rightOptionsList[index].check = !this.rightOptionsList[index].check
|
||||||
if (index === 0) {
|
if (index === 0) {
|
||||||
if (this.gangkouActive === '00004') {
|
if (this.gangkouActive === '00004') {
|
||||||
|
@ -1444,6 +1518,9 @@ export default {
|
||||||
}
|
}
|
||||||
this.perLocArr = []
|
this.perLocArr = []
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this.destroyConnection()
|
||||||
|
this.onePerLocArr = []
|
||||||
this.$router.push('/index')
|
this.$router.push('/index')
|
||||||
} else if (index === 1) {
|
} else if (index === 1) {
|
||||||
this.handleFullScreen(undefined)
|
this.handleFullScreen(undefined)
|
||||||
|
@ -1452,6 +1529,8 @@ export default {
|
||||||
} else if (index === 3) {
|
} else if (index === 3) {
|
||||||
this.changeSceneMode(this.rightOptionsList[index].check)
|
this.changeSceneMode(this.rightOptionsList[index].check)
|
||||||
} else if (index === 4) {
|
} else if (index === 4) {
|
||||||
|
this.destroyConnection()
|
||||||
|
this.onePerLocArr = []
|
||||||
this.clearAllBottomOptionsItemsCheck()
|
this.clearAllBottomOptionsItemsCheck()
|
||||||
this.clearAllBottomOptionsItemsEntityCollection()
|
this.clearAllBottomOptionsItemsEntityCollection()
|
||||||
} else if (index === 5) {
|
} else if (index === 5) {
|
||||||
|
@ -1487,10 +1566,10 @@ export default {
|
||||||
},
|
},
|
||||||
bottomOptionsClick(index) {
|
bottomOptionsClick(index) {
|
||||||
if (this.bottomOptionsIndex === index) {
|
if (this.bottomOptionsIndex === index) {
|
||||||
this.bottomOptionsIndex = '';
|
this.bottomOptionsIndex = ''
|
||||||
// (this.gangkouActive === '00004' && index !== 1) && drag.addPolygon(this.gangkouActive)
|
// (this.gangkouActive === '00004' && index !== 1) && drag.addPolygon(this.gangkouActive)
|
||||||
} else {
|
} else {
|
||||||
this.bottomOptionsIndex = index;
|
this.bottomOptionsIndex = index
|
||||||
// (this.gangkouActive === '00004' && index !== 1) && viewer.entities.removeAll()
|
// (this.gangkouActive === '00004' && index !== 1) && viewer.entities.removeAll()
|
||||||
}
|
}
|
||||||
this.collapse = false
|
this.collapse = false
|
||||||
|
@ -1565,6 +1644,7 @@ export default {
|
||||||
this.toCenter(this.initCenter)
|
this.toCenter(this.initCenter)
|
||||||
this.dragAreaEntity(this.initPoint)
|
this.dragAreaEntity(this.initPoint)
|
||||||
}
|
}
|
||||||
|
|
||||||
this.componentKey = Math.random()
|
this.componentKey = Math.random()
|
||||||
this.bottomOptionsKey = Math.random()
|
this.bottomOptionsKey = Math.random()
|
||||||
this.bottomOptionsAnimationComplex = false
|
this.bottomOptionsAnimationComplex = false
|
||||||
|
@ -1574,6 +1654,8 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
bottomOptionsItemsClick(pindex, index, label, urlType, pointUrl, dialog_width) {
|
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) {
|
if (this.bottomOptionsList[pindex].list[index].check || this.gangkouActive === '00004' && this.cfdBottomOptionsList[pindex].list[index].check) {
|
||||||
// 人员定位关闭实时获取定位websocket 并关闭人员对比定时器(曹妃甸使用)
|
// 人员定位关闭实时获取定位websocket 并关闭人员对比定时器(曹妃甸使用)
|
||||||
if (this.gangkouActive === '00004' && urlType === 'peoplePosition') {
|
if (this.gangkouActive === '00004' && urlType === 'peoplePosition') {
|
||||||
|
@ -1594,6 +1676,10 @@ export default {
|
||||||
}
|
}
|
||||||
this.carLocArr = []
|
this.carLocArr = []
|
||||||
}
|
}
|
||||||
|
if (this.gangkouActive === '00003' && this.CORP_INFO_ID === '035958e685cf4850bc40151c5e0617a6' && urlType === 'peoplePosition') {
|
||||||
|
this.destroyConnection()
|
||||||
|
this.onePerLocArr = []
|
||||||
|
}
|
||||||
this.bottomOptionsList[pindex].list[index].check = false
|
this.bottomOptionsList[pindex].list[index].check = false
|
||||||
if (this.gangkouActive === '00004') {
|
if (this.gangkouActive === '00004') {
|
||||||
this.cfdBottomOptionsList[pindex].list[index].check = false
|
this.cfdBottomOptionsList[pindex].list[index].check = false
|
||||||
|
@ -1610,6 +1696,10 @@ export default {
|
||||||
if (this.gangkouActive === '00004') {
|
if (this.gangkouActive === '00004') {
|
||||||
this.cfdBottomOptionsList[pindex].list[index].check = true
|
this.cfdBottomOptionsList[pindex].list[index].check = true
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (this.gangkouActive === '00003' && this.CORP_INFO_ID === '035958e685cf4850bc40151c5e0617a6' && urlType === 'peoplePosition') {
|
||||||
|
this.createConnection()
|
||||||
|
} else {
|
||||||
requestFN(
|
requestFN(
|
||||||
pointUrl,
|
pointUrl,
|
||||||
{
|
{
|
||||||
|
@ -1677,6 +1767,8 @@ export default {
|
||||||
}).catch((e) => {
|
}).catch((e) => {
|
||||||
console.log(e)
|
console.log(e)
|
||||||
})
|
})
|
||||||
|
}
|
||||||
|
|
||||||
// if (label === '摄像头') {
|
// if (label === '摄像头') {
|
||||||
// setTimeout(() => {
|
// setTimeout(() => {
|
||||||
// const point = cloneDeep(points[2])
|
// const point = cloneDeep(points[2])
|
||||||
|
@ -1825,6 +1917,254 @@ export default {
|
||||||
await this.getAllWorkUserCards()
|
await this.getAllWorkUserCards()
|
||||||
await this.getAllTickets()
|
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() {
|
initPerLocWebsocket() {
|
||||||
var _this = this
|
var _this = this
|
||||||
if (window.WebSocket) {
|
if (window.WebSocket) {
|
||||||
|
@ -1847,7 +2187,6 @@ export default {
|
||||||
// console.info('消息接收')
|
// console.info('消息接收')
|
||||||
var msg = _this.unzip(message.data)
|
var msg = _this.unzip(message.data)
|
||||||
// const decodedStr = decodeURIComponent(msg) // 进行解码
|
// const decodedStr = decodeURIComponent(msg) // 进行解码
|
||||||
const decodedStr = '123123'
|
|
||||||
// console.info(decodedStr)
|
// console.info(decodedStr)
|
||||||
if (decodedStr) {
|
if (decodedStr) {
|
||||||
// const perTrack = JSON.parse(decodedStr)
|
// const perTrack = JSON.parse(decodedStr)
|
||||||
|
@ -2020,28 +2359,41 @@ export default {
|
||||||
_this.perLocArr.forEach((item, index) => {
|
_this.perLocArr.forEach((item, index) => {
|
||||||
// 判断是否存在于四色区域内
|
// 判断是否存在于四色区域内
|
||||||
const redFiled = []
|
const redFiled = []
|
||||||
_this.pointBox.redList.forEach(item => { redFiled.push(...item['position']) })
|
_this.pointBoxCfd.redList.forEach(item => { redFiled.push(...item['position']) })
|
||||||
const orangeFiled = []
|
const orangeFiled = []
|
||||||
_this.pointBox.orangeList.forEach(item => { orangeFiled.push(...item['position']) })
|
_this.pointBoxCfd.orangeList.forEach(item => { orangeFiled.push(...item['position']) })
|
||||||
const yellowFiled = []
|
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) {
|
if (this.redList.indexOf(item.cardNo) > -1) {
|
||||||
_this.$set(_this.perLocArr[index], 'color', 'red')
|
_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')
|
_this.$set(_this.perLocArr[index], 'color', 'red')
|
||||||
} else if (this.orangeList.indexOf(item.cardNo) > -1) {
|
} else if (this.orangeList.indexOf(item.cardNo) > -1) {
|
||||||
_this.$set(_this.perLocArr[index], 'color', 'orange')
|
_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')
|
_this.$set(_this.perLocArr[index], 'color', 'orange')
|
||||||
} else if (this.yellowList.indexOf(item.cardNo) > -1) {
|
} else if (this.yellowList.indexOf(item.cardNo) > -1) {
|
||||||
_this.$set(_this.perLocArr[index], 'color', 'yellow')
|
_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')
|
_this.$set(_this.perLocArr[index], 'color', 'yellow')
|
||||||
} else {
|
} else {
|
||||||
_this.$set(_this.perLocArr[index], 'color', 'blue')
|
_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
|
// 循环判断某个点是否在某些区域内。只要在任意一个区域内。则返回true
|
||||||
forEachIsPointInPolygon(polygonList, lng, lat) {
|
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