3013 lines
107 KiB
Vue
3013 lines
107 KiB
Vue
<template>
|
||
<div id="cesiumContainer">
|
||
<header>
|
||
<transition
|
||
enter-active-class="animate__animated animate__fadeInDown"
|
||
leave-active-class="animate__animated animate__fadeOutUp"
|
||
>
|
||
<div v-if="false" class="back" @click="back"/>
|
||
</transition>
|
||
<div class="title">秦港股份安全监管平台</div>
|
||
<div class="guang"/>
|
||
</header>
|
||
<transition
|
||
enter-active-class="animate__animated animate__fadeInLeft"
|
||
leave-active-class="animate__animated animate__fadeOutLeft"
|
||
>
|
||
<div v-if="!collapse && !pureMap" :key="componentKey" class="content_index">
|
||
<info v-if="!gangkouActive"/>
|
||
<gangkou-index
|
||
v-if="gangkouActive === '00003' && (bottomOptionsIndex === '' || bottomOptionsIndex === 5) && !CORP_INFO_ID"
|
||
:area="area"/>
|
||
<fengongsi-index
|
||
v-if="gangkouActive && gangkouActive !== '00004' && (bottomOptionsIndex === '' || bottomOptionsIndex === 5) && CORP_INFO_ID"
|
||
:corp-info-id="CORP_INFO_ID"
|
||
:gangkou="gangkouActive"
|
||
/>
|
||
<caofeidian-index
|
||
v-if="gangkouActive && gangkouActive === '00004' && bottomOptionsIndex === '' && CORP_INFO_ID"
|
||
:corp-info-id="CORP_INFO_ID"
|
||
:gangkou="gangkouActive"
|
||
/>
|
||
<menjin
|
||
v-if="gangkouActive && gangkouActive !== '00004' && bottomOptionsIndex === 0"
|
||
:corp-info-id="CORP_INFO_ID"
|
||
:area="area"
|
||
:gangkou="gangkouActive"/>
|
||
<menjin-cfd
|
||
v-if="gangkouActive && gangkouActive === '00004' && bottomOptionsIndex === 0"
|
||
:corp-info-id="CORP_INFO_ID"
|
||
:area="area"
|
||
:gangkou="gangkouActive"/>
|
||
<xiaofang
|
||
v-if="gangkouActive && gangkouActive !== '00004' && bottomOptionsIndex === 1"
|
||
:corp-info-id="CORP_INFO_ID"
|
||
:area="area"
|
||
:gangkou="gangkouActive"/>
|
||
<anquan
|
||
v-if="gangkouActive && gangkouActive !== '00004' && bottomOptionsIndex === 2"
|
||
:corp-info-id="CORP_INFO_ID"
|
||
:area="area"
|
||
:gangkou="gangkouActive"/>
|
||
<anquan-cfd
|
||
v-if="gangkouActive && gangkouActive === '00004' && bottomOptionsIndex === 2"
|
||
:corp-info-id="CORP_INFO_ID"
|
||
:area="area"
|
||
:gangkou="gangkouActive"/>
|
||
<qixiang
|
||
v-if="gangkouActive && gangkouActive !== '00004' && bottomOptionsIndex === 3"
|
||
:corp-info-id="CORP_INFO_ID"
|
||
:area="area"
|
||
:gangkou="gangkouActive"/>
|
||
<renyuan
|
||
v-if="gangkouActive && gangkouActive !== '00004' && bottomOptionsIndex === 4"
|
||
:corp-info-id="CORP_INFO_ID"
|
||
:area="area"
|
||
:gangkou="gangkouActive"/>
|
||
<renyuan-cfd
|
||
v-if="gangkouActive && gangkouActive === '00004' && bottomOptionsIndex === 1"
|
||
:corp-info-id="CORP_INFO_ID"
|
||
:area="area"
|
||
:gangkou="gangkouActive"/>
|
||
<bianjieruqin
|
||
v-if="gangkouActive && gangkouActive !== '00004' && bottomOptionsIndex === 6"
|
||
:corp-info-id="CORP_INFO_ID"
|
||
:area="area"
|
||
:gangkou="gangkouActive"/>
|
||
<zhongdian
|
||
v-if="gangkouActive && gangkouActive !== '00004' && bottomOptionsIndex === 7"
|
||
:corp-info-id="CORP_INFO_ID"
|
||
:area="area"
|
||
:gangkou="gangkouActive"/>
|
||
<zhongda
|
||
v-if="gangkouActive && bottomOptionsIndex === 8"
|
||
:corp-info-id="CORP_INFO_ID"
|
||
:area="area"
|
||
:gangkou="gangkouActive"/>
|
||
<layout-menu v-if="gangkouActive" :collapse.sync="collapse" :component-key.sync="componentKey"/>
|
||
</div>
|
||
</transition>
|
||
<layout-menu
|
||
v-if="collapse && gangkouActive && !pureMap"
|
||
:collapse.sync="collapse"
|
||
:component-key.sync="componentKey"/>
|
||
<transition
|
||
enter-active-class="animate__animated animate__fadeInDown"
|
||
leave-active-class="animate__animated animate__fadeOutUp"
|
||
>
|
||
<div v-if="gangkouActive === '00003' && !CORP_INFO_ID && !pureMap" class="center_options">
|
||
<div class="guang"/>
|
||
<div
|
||
v-for="(item,index) in centerOptionsList"
|
||
:key="index"
|
||
:class="['option','option'+index,{active:centerOptionsIndex === index}]"
|
||
@click="centerOptionsClick(index,item.AREA)"
|
||
>
|
||
{{ item.label }}
|
||
</div>
|
||
</div>
|
||
</transition>
|
||
<transition
|
||
:css="false"
|
||
mode="out-in"
|
||
@enter="bottomOptionsEnter"
|
||
@leave="bottomOptionsLeave"
|
||
>
|
||
<div v-if="gangkouActive && !pureMap" :key="bottomOptionsKey" class="bottom_options">
|
||
<template v-if="gangkouActive === '00004'">
|
||
<template v-for="(item,index) in cfdBottomOptionsList">
|
||
<template v-if="bottomOptionsIndex === '' ? true : bottomOptionsIndex === index">
|
||
<template v-if="containAuthorizationShow(item)">
|
||
<template v-if="eliminateAuthorizationShow(item)">
|
||
<div
|
||
:class="['option',{active:bottomOptionsIndex === index}]"
|
||
:key="index"
|
||
@click="bottomOptionsClick(index)"
|
||
>
|
||
<div v-if="bottomOptionsIndex !== ''" class="item">
|
||
<template v-for="(item1,index1) in item.list">
|
||
<template v-if="containAuthorizationShow(item1)">
|
||
<template v-if="eliminateAuthorizationShow(item1)">
|
||
<div
|
||
:key="index1"
|
||
class="items"
|
||
@click.stop="bottomOptionsItemsClick(index,index1,item1.label,item1.type,item.pointUrl,item1.dialog_width)"
|
||
>
|
||
<img :src="item1.check ? item1.checkImg : item1.img" alt="" class="suspension_img">
|
||
<div class="suspension_label">{{ item1.label }}</div>
|
||
</div>
|
||
</template>
|
||
</template>
|
||
</template>
|
||
</div>
|
||
<img :src="index === bottomOptionsIndex ? item.checkImg : item.img" alt="" class="img">
|
||
<div :class="['label',{active:index === bottomOptionsIndex}]">{{ item.label }}</div>
|
||
</div>
|
||
</template>
|
||
</template>
|
||
</template>
|
||
</template>
|
||
</template>
|
||
<template v-if="gangkouActive !== '00004'">
|
||
<template v-for="(item,index) in bottomOptionsList">
|
||
<template v-if="bottomOptionsIndex === '' ? true : bottomOptionsIndex === index">
|
||
<template v-if="containAuthorizationShow(item)">
|
||
<template v-if="eliminateAuthorizationShow(item)">
|
||
<div
|
||
:class="['option',{active:bottomOptionsIndex === index}]"
|
||
:key="index"
|
||
@click="bottomOptionsClick(index)"
|
||
>
|
||
<div v-if="bottomOptionsIndex !== ''" class="item">
|
||
<template v-for="(item1,index1) in item.list">
|
||
<template v-if="containAuthorizationShow(item1)">
|
||
<template v-if="eliminateAuthorizationShow(item1)">
|
||
<div
|
||
:key="index1"
|
||
class="items"
|
||
@click.stop="bottomOptionsItemsClick(index,index1,item1.label,item1.type,item.pointUrl,item1.dialog_width)"
|
||
>
|
||
<img :src="item1.check ? item1.checkImg : item1.img" alt="" class="suspension_img">
|
||
<div class="suspension_label">{{ item1.label }}</div>
|
||
</div>
|
||
</template>
|
||
</template>
|
||
</template>
|
||
</div>
|
||
<img :src="index === bottomOptionsIndex ? item.checkImg : item.img" alt="" class="img">
|
||
<div :class="['label',{active:index === bottomOptionsIndex}]">{{ item.label }}</div>
|
||
</div>
|
||
</template>
|
||
</template>
|
||
</template>
|
||
</template>
|
||
</template>
|
||
</div>
|
||
</transition>
|
||
<div class="right_options">
|
||
<div
|
||
v-for="(item,index) in rightOptionsList"
|
||
:key="index"
|
||
class="option"
|
||
@click="handleClickRightTools(index)">
|
||
<div class="tooltip">{{ item.label }}</div>
|
||
<img :src="item.check ? item.checkImg : item.img" alt="">
|
||
</div>
|
||
</div>
|
||
<layout-dialog
|
||
:title.sync="dialog.title"
|
||
:type.sync="dialog.type"
|
||
:id.sync="dialog.id"
|
||
:visible.sync="dialog.visible"
|
||
:width="dialog.width"
|
||
:corp-info-id="dialog.corpInfoId"
|
||
:gangkou="gangkouActive"
|
||
:infoname="dialog.infoname"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import RyDragEntity from './js/ry_dragentity.js'
|
||
import Bubble from './bubble/index.js'
|
||
// eslint-disable-next-line no-unused-vars
|
||
import DragEntity, { imgMap } from './js/dragentity.js'
|
||
import { requestFN } from '@/utils/request'
|
||
// import navigation from './components/navigation.vue'
|
||
import gangkouIndex from './components/gangkou_index.vue'
|
||
import fengongsiIndex from './components/fengongsi_index.vue'
|
||
import caofeidianIndex from './components/caofeidian_index.vue'
|
||
import menjin from './components/menjin.vue'
|
||
import menjinCfd from './components/menjinCfd.vue'
|
||
import xiaofang from './components/xiaofang.vue'
|
||
import anquan from './components/anquan.vue'
|
||
import qixiang from './components/qixiang.vue'
|
||
import renyuan from './components/renyuan.vue'
|
||
import bianjieruqin from './components/bianjieruqin.vue'
|
||
import renyuanCfd from './components/renyuanCfd.vue'
|
||
import zhongda from './components/zhongda.vue'
|
||
import zhongdian from './components/zhongdian.vue'
|
||
import layoutMenu from './components/menu.vue'
|
||
import pako from 'pako' // 解密gzip插件
|
||
import info from './components/info.vue'
|
||
import layoutDialog from './dialog/index.vue'
|
||
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 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
|
||
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkOWQ0MGYwMy0yODUwLTQ1YzktOGM4OC02MTMwY2UyZjNlMzQiLCJpZCI6MTY0NTUwLCJpYXQiOjE2OTM4OTU1Mjd9.1cC0sSzyj79LZv0ILNCcl0Mabw6hl8TNngFNFr7H8f4'
|
||
|
||
export default {
|
||
components: {
|
||
AnquanCfd,
|
||
// navigation,
|
||
gangkouIndex,
|
||
fengongsiIndex,
|
||
caofeidianIndex,
|
||
layoutMenu,
|
||
menjin,
|
||
menjinCfd,
|
||
xiaofang,
|
||
anquan,
|
||
qixiang,
|
||
renyuan,
|
||
renyuanCfd,
|
||
zhongda,
|
||
layoutDialog,
|
||
info,
|
||
bianjieruqin,
|
||
zhongdian
|
||
},
|
||
mixins: [fullScreenMixins],
|
||
data() {
|
||
return {
|
||
initCenter: { longitude: 119.6486945226887, latitude: 39.93555616569192, height: 900000 },
|
||
parentCenter: {},
|
||
center: { longitude: 119.6486945226887, latitude: 39.93555616569192, height: 900000 },
|
||
initPoint: [
|
||
{
|
||
'id': '00002',
|
||
'data_id': '00002',
|
||
'MAP_POINT_NAME': '沧州矿石港务',
|
||
'name': '沧州矿石港务',
|
||
'point_type': '港口',
|
||
'type': '港口',
|
||
'descr': '公司现共有10个泊位（10-20万吨级），设计年通过能力6400万吨。堆场面积176万平米，堆存能力740万吨，大型装卸设备44台套。',
|
||
'position': {
|
||
'x': 117.91412,
|
||
'y': 38.35902
|
||
},
|
||
CORP_INFO_ID: '016d19225e9d4ece863cce8a256a3e72'
|
||
},
|
||
{
|
||
'id': '00003',
|
||
'data_id': '00003',
|
||
'MAP_POINT_NAME': '秦皇岛港',
|
||
'name': '秦皇岛港',
|
||
'point_type': '港口',
|
||
'type': '港口',
|
||
'descr': '秦皇岛港分为东、西两个港区，现有生产性泊位50个，年设计通过能力2.26亿吨，经营货类主要包括煤炭、金属矿石、油品及液体化工、集装箱及其他杂货等。',
|
||
'position': {
|
||
'x': 119.61254,
|
||
'y': 39.92572
|
||
}
|
||
},
|
||
{
|
||
'id': '00004',
|
||
'data_id': '00004',
|
||
'MAP_POINT_NAME': '曹妃甸实业港务',
|
||
'name': '曹妃甸实业港务',
|
||
'point_type': '港口',
|
||
'type': '港口',
|
||
'descr': '公司现共有6个泊位(5-30万吨级)，设计年通过能力6550万吨。堆场面积146万平米，堆存能力1350万吨，大型装卸设备23台套。',
|
||
'position': {
|
||
'x': 118.51022,
|
||
'y': 38.93503
|
||
},
|
||
CORP_INFO_ID: '8854edee3aa94be496cee676b6d4845a'
|
||
},
|
||
{
|
||
'id': '00005',
|
||
'data_id': '00005',
|
||
'MAP_POINT_NAME': '曹妃甸煤炭港务',
|
||
'name': '曹妃甸煤炭港务',
|
||
'point_type': '港口',
|
||
'type': '港口',
|
||
'descr': '公司现共有5个泊位（5-10万吨级），设计年通过能力5000万吨。堆场面积83万平米，堆存能力373.5万吨，大型装卸设备19台套。',
|
||
'position': {
|
||
'x': 118.43701,
|
||
'y': 38.9866
|
||
},
|
||
CORP_INFO_ID: 'c077f4ed66844ed4a191a36fa1fc641c'
|
||
}
|
||
],
|
||
branchPoint: [],
|
||
rightOptionsList: [
|
||
{
|
||
img: require('../../assets/map/index/back.png'),
|
||
checkImg: require('../../assets/map/index/back_on.png'),
|
||
check: '',
|
||
label: '返回主系统'
|
||
},
|
||
{
|
||
img: require('../../assets/map/index/full.png'),
|
||
checkImg: require('../../assets/map/index/full_on.png'),
|
||
check: false,
|
||
label: '全屏'
|
||
},
|
||
{
|
||
img: require('../../assets/map/index/img2.png'),
|
||
checkImg: require('../../assets/map/index/img2_on.png'),
|
||
check: '',
|
||
label: '返回中心点'
|
||
},
|
||
{
|
||
img: require('../../assets/map/index/img4.png'),
|
||
checkImg: require('../../assets/map/index/img4_on.png'),
|
||
check: false,
|
||
label: '切换视角'
|
||
},
|
||
{
|
||
img: require('../../assets/map/index/del.png'),
|
||
checkImg: require('../../assets/map/index/del_on.png'),
|
||
check: '',
|
||
label: '删除标记点'
|
||
},
|
||
{
|
||
img: require('../../assets/map/index/map.png'),
|
||
checkImg: require('../../assets/map/index/map_on.png'),
|
||
check: false,
|
||
label: '纯净地图'
|
||
}
|
||
],
|
||
myEntityCollection: {},
|
||
poinEntity: {},
|
||
mqttPoint: {},
|
||
gangkouActive: '00003',
|
||
centerOptionsList: [
|
||
{ label: '秦皇岛西', AREA: '2' },
|
||
{ label: '秦皇岛港区', AREA: '' },
|
||
{ label: '秦皇岛东', AREA: '1' }
|
||
],
|
||
area: '',
|
||
centerOptionsIndex: 1,
|
||
bottomOptionsList: [
|
||
{
|
||
img: require('../../assets/map/gangkou_index/img4.png'),
|
||
checkImg: require('../../assets/map/gangkou_index/img4_on.png'),
|
||
label: '门口门禁',
|
||
pointUrl: '/map/getGatePosition',
|
||
containAuthorization: [],
|
||
eliminateAuthorization: [],
|
||
list: [
|
||
{
|
||
label: '人员',
|
||
dialog_width: '800px',
|
||
check: false,
|
||
img: require('../../assets/map/gangkou_index/buttom/ico1.png'),
|
||
checkImg: require('../../assets/map/gangkou_index/buttom/ico1_on.png'),
|
||
type: 'PERSON',
|
||
containAuthorization: [],
|
||
eliminateAuthorization: []
|
||
},
|
||
{
|
||
label: '车辆',
|
||
dialog_width: '600px',
|
||
check: false,
|
||
img: require('../../assets/map/gangkou_index/buttom/ico2.png'),
|
||
checkImg: require('../../assets/map/gangkou_index/buttom/ico2_on.png'),
|
||
type: 'CAR',
|
||
containAuthorization: [],
|
||
eliminateAuthorization: []
|
||
},
|
||
{
|
||
label: '摄像头',
|
||
dialog_width: '600px',
|
||
check: false,
|
||
type: 'CAMERA',
|
||
img: require('../../assets/map/gangkou_index/buttom/ico3.png'),
|
||
checkImg: require('../../assets/map/gangkou_index/buttom/ico3_on.png'),
|
||
containAuthorization: [],
|
||
eliminateAuthorization: []
|
||
}
|
||
]
|
||
},
|
||
{
|
||
img: require('../../assets/map/gangkou_index/img5.png'),
|
||
checkImg: require('../../assets/map/gangkou_index/img5_on.png'),
|
||
label: '消防管控',
|
||
containAuthorization: [],
|
||
eliminateAuthorization: [],
|
||
pointUrl: '/map/getFireControl',
|
||
list: [
|
||
// {
|
||
// label: '消防救援队',
|
||
// dialog_width: '600px',
|
||
// check: false,
|
||
// img: require('../../assets/map/gangkou_index/buttom/ico4.png'),
|
||
// checkImg: require('../../assets/map/gangkou_index/buttom/ico4_on.png'),
|
||
// type: 'xfjyd01',
|
||
// containAuthorization: [],
|
||
// eliminateAuthorization: []
|
||
// },
|
||
{
|
||
label: '消防控制室',
|
||
dialog_width: '600px',
|
||
check: false,
|
||
type: 'xfkzs01',
|
||
img: require('../../assets/map/gangkou_index/buttom/ico5.png'),
|
||
checkImg: require('../../assets/map/gangkou_index/buttom/ico5_on.png'),
|
||
containAuthorization: [],
|
||
eliminateAuthorization: []
|
||
},
|
||
{
|
||
label: '消防泵房',
|
||
dialog_width: '600px',
|
||
check: false,
|
||
type: 'xfbf01',
|
||
img: require('../../assets/map/gangkou_index/buttom/ico6.png'),
|
||
checkImg: require('../../assets/map/gangkou_index/buttom/ico6_on.png'),
|
||
containAuthorization: [],
|
||
eliminateAuthorization: []
|
||
},
|
||
{
|
||
label: '消防水源',
|
||
dialog_width: '600px',
|
||
check: false,
|
||
type: 'xfsy01',
|
||
img: require('../../assets/map/gangkou_index/buttom/ico7.png'),
|
||
checkImg: require('../../assets/map/gangkou_index/buttom/ico7_on.png'),
|
||
containAuthorization: [],
|
||
eliminateAuthorization: []
|
||
},
|
||
{
|
||
label: '消防点位',
|
||
dialog_width: '600px',
|
||
check: false,
|
||
type: 'point',
|
||
img: require('../../assets/map/gangkou_index/buttom/ico8.png'),
|
||
checkImg: require('../../assets/map/gangkou_index/buttom/ico8_on.png'),
|
||
containAuthorization: [],
|
||
eliminateAuthorization: []
|
||
}
|
||
]
|
||
},
|
||
{
|
||
img: require('../../assets/map/gangkou_index/img6.png'),
|
||
checkImg: require('../../assets/map/gangkou_index/img6_on.png'),
|
||
label: '危险作业',
|
||
containAuthorization: [],
|
||
eliminateAuthorization: [],
|
||
pointUrl: '/map/Eight/listAllHighRiskWorkLocation',
|
||
list: [
|
||
{
|
||
label: '动火作业',
|
||
dialog_width: '1200px',
|
||
type: 'HOTWORK',
|
||
check: false,
|
||
img: require('../../assets/map/gangkou_index/buttom/ico9.png'),
|
||
checkImg: require('../../assets/map/gangkou_index/buttom/ico9_on.png'),
|
||
containAuthorization: [],
|
||
eliminateAuthorization: []
|
||
},
|
||
{
|
||
label: '受限空间作业',
|
||
dialog_width: '1200px',
|
||
type: 'CONFINEDSPACE',
|
||
check: false,
|
||
img: require('../../assets/map/gangkou_index/buttom/ico10.png'),
|
||
checkImg: require('../../assets/map/gangkou_index/buttom/ico10_on.png'),
|
||
containAuthorization: [],
|
||
eliminateAuthorization: []
|
||
},
|
||
{
|
||
label: '临时用电作业',
|
||
dialog_width: '1200px',
|
||
type: 'ELECTRICITY',
|
||
check: false,
|
||
img: require('../../assets/map/gangkou_index/buttom/ico11.png'),
|
||
checkImg: require('../../assets/map/gangkou_index/buttom/ico11_on.png'),
|
||
containAuthorization: [],
|
||
eliminateAuthorization: []
|
||
},
|
||
{
|
||
label: '高处作业',
|
||
dialog_width: '1200px',
|
||
type: 'HIGHWORK',
|
||
check: false,
|
||
img: require('../../assets/map/gangkou_index/buttom/ico12.png'),
|
||
checkImg: require('../../assets/map/gangkou_index/buttom/ico12_on.png'),
|
||
containAuthorization: [],
|
||
eliminateAuthorization: []
|
||
},
|
||
{
|
||
label: '断路作业',
|
||
dialog_width: '1200px',
|
||
type: 'CUTROAD',
|
||
check: false,
|
||
img: require('../../assets/map/gangkou_index/buttom/ico13.png'),
|
||
checkImg: require('../../assets/map/gangkou_index/buttom/ico13_on.png'),
|
||
containAuthorization: [],
|
||
eliminateAuthorization: ['035958e685cf4850bc40151c5e0617a6']
|
||
},
|
||
{
|
||
label: '动土作业',
|
||
dialog_width: '1200px',
|
||
type: 'BREAKGROUND',
|
||
check: false,
|
||
img: require('../../assets/map/gangkou_index/buttom/ico14.png'),
|
||
checkImg: require('../../assets/map/gangkou_index/buttom/ico14_on.png'),
|
||
containAuthorization: [],
|
||
eliminateAuthorization: ['035958e685cf4850bc40151c5e0617a6']
|
||
},
|
||
{
|
||
label: '吊装作业',
|
||
dialog_width: '1200px',
|
||
type: 'HOISTING',
|
||
check: false,
|
||
img: require('../../assets/map/gangkou_index/buttom/ico15.png'),
|
||
checkImg: require('../../assets/map/gangkou_index/buttom/ico15_on.png'),
|
||
containAuthorization: [],
|
||
eliminateAuthorization: []
|
||
},
|
||
{
|
||
label: '盲板抽堵作业',
|
||
dialog_width: '1200px',
|
||
type: 'BLINDBOARD',
|
||
check: false,
|
||
img: require('../../assets/map/gangkou_index/buttom/ico16.png'),
|
||
checkImg: require('../../assets/map/gangkou_index/buttom/ico16_on.png'),
|
||
containAuthorization: [],
|
||
eliminateAuthorization: []
|
||
},
|
||
{
|
||
label: '摄像头',
|
||
dialog_width: '600px',
|
||
check: false,
|
||
type: 'CAMERA',
|
||
img: require('../../assets/map/gangkou_index/buttom/ico3.png'),
|
||
checkImg: require('../../assets/map/gangkou_index/buttom/ico3_on.png'),
|
||
containAuthorization: [],
|
||
eliminateAuthorization: []
|
||
}
|
||
]
|
||
},
|
||
{
|
||
img: require('../../assets/map/gangkou_index/img7.png'),
|
||
checkImg: require('../../assets/map/gangkou_index/img7_on.png'),
|
||
label: '气象监测',
|
||
containAuthorization: [],
|
||
eliminateAuthorization: [],
|
||
pointUrl: '/map/listbyType',
|
||
list: [
|
||
{
|
||
label: '气象站',
|
||
dialog_width: '1200px',
|
||
type: '293187ddfd984c9ab3fd716aef58da0e',
|
||
check: false,
|
||
img: require('../../assets/map/gangkou_index/buttom/ico17.png'),
|
||
checkImg: require('../../assets/map/gangkou_index/buttom/ico17_on.png'),
|
||
containAuthorization: [],
|
||
eliminateAuthorization: []
|
||
},
|
||
// {
|
||
// label: '温度站',
|
||
// dialog_width: '1200px',
|
||
// type: '561347f0cff641dba8b2b22c0f443348',
|
||
// check: false,
|
||
// img: require('../../assets/map/gangkou_index/buttom/ico18.png'),
|
||
// checkImg: require('../../assets/map/gangkou_index/buttom/ico18_on.png'),
|
||
// containAuthorization: [],
|
||
// eliminateAuthorization: []
|
||
// },
|
||
{
|
||
label: '风速站',
|
||
dialog_width: '1200px',
|
||
type: '2da29f00852a4653ba3e760b9de57412',
|
||
check: false,
|
||
img: require('../../assets/map/gangkou_index/buttom/ico19.png'),
|
||
checkImg: require('../../assets/map/gangkou_index/buttom/ico19_on.png'),
|
||
containAuthorization: [],
|
||
eliminateAuthorization: []
|
||
}
|
||
// ,
|
||
// {
|
||
// label: '湿度站',
|
||
// dialog_width: '1200px',
|
||
// type: '732fe73933b845c6b1e2aee06a38ed31',
|
||
// check: false,
|
||
// img: require('../../assets/map/gangkou_index/buttom/ico20.png'),
|
||
// checkImg: require('../../assets/map/gangkou_index/buttom/ico20_on.png'),
|
||
// containAuthorization: [],
|
||
// eliminateAuthorization: []
|
||
// }
|
||
]
|
||
},
|
||
{
|
||
img: require('../../assets/map/gangkou_index/img8.png'),
|
||
checkImg: require('../../assets/map/gangkou_index/img8_on.png'),
|
||
label: '人员定位',
|
||
pointUrl: '/map/getCurrentLocationOnline',
|
||
containAuthorization: [],
|
||
eliminateAuthorization: [],
|
||
list: [
|
||
{
|
||
label: '人员定位',
|
||
dialog_width: '1200px',
|
||
check: false,
|
||
type: 'peoplePosition',
|
||
img: require('../../assets/map/gangkou_index/buttom/ico21.png'),
|
||
checkImg: require('../../assets/map/gangkou_index/buttom/ico21_on.png'),
|
||
containAuthorization: [],
|
||
eliminateAuthorization: []
|
||
}
|
||
// {
|
||
// label: '车辆定位',
|
||
// dialog_width: '1200px',
|
||
// check: false,
|
||
// img: require('../../assets/map/gangkou_index/buttom/ico22.png'),
|
||
// checkImg: require('../../assets/map/gangkou_index/buttom/ico22_on.png'),
|
||
// containAuthorization: [],
|
||
// eliminateAuthorization: []
|
||
// }
|
||
]
|
||
},
|
||
{
|
||
img: require('../../assets/map/gangkou_index/img10.png'),
|
||
checkImg: require('../../assets/map/gangkou_index/img10_on.png'),
|
||
label: '摄像头',
|
||
containAuthorization: [],
|
||
eliminateAuthorization: [],
|
||
pointUrl: '/platformvideomanagement/listAll',
|
||
list: [
|
||
{
|
||
label: '摄像头',
|
||
dialog_width: '1200px',
|
||
check: false,
|
||
type: 'platcamera',
|
||
img: require('../../assets/map/gangkou_index/buttom/ico26.png'),
|
||
checkImg: require('../../assets/map/gangkou_index/buttom/ico26_on.png'),
|
||
containAuthorization: [],
|
||
eliminateAuthorization: []
|
||
}
|
||
]
|
||
},
|
||
{
|
||
img: require('../../assets/map/gangkou_index/img12.png'),
|
||
checkImg: require('../../assets/map/gangkou_index/img12_on.png'),
|
||
label: '重点工程',
|
||
containAuthorization: [],
|
||
eliminateAuthorization: [],
|
||
pointUrl: '/map/keyProject/listAllLocation',
|
||
list: [
|
||
{
|
||
label: '重点工程定位',
|
||
dialog_width: '1200px',
|
||
check: false,
|
||
type: 'PROJECT',
|
||
img: require('../../assets/map/gangkou_index/buttom/ico27.png'),
|
||
checkImg: require('../../assets/map/gangkou_index/buttom/ico27_on.png'),
|
||
containAuthorization: [],
|
||
eliminateAuthorization: []
|
||
},
|
||
{
|
||
label: '视频定位',
|
||
dialog_width: '1200px',
|
||
check: false,
|
||
type: 'VIDEO',
|
||
img: require('../../assets/map/gangkou_index/buttom/ico26.png'),
|
||
checkImg: require('../../assets/map/gangkou_index/buttom/ico26_on.png'),
|
||
containAuthorization: [],
|
||
eliminateAuthorization: []
|
||
}
|
||
]
|
||
},
|
||
{
|
||
img: require('../../assets/map/gangkou_index/img11.png'),
|
||
checkImg: require('../../assets/map/gangkou_index/img11_on.png'),
|
||
label: '边界入侵',
|
||
containAuthorization: ['035958e685cf4850bc40151c5e0617a6'],
|
||
eliminateAuthorization: [],
|
||
pointUrl: '/map/mapPlatformelectronic/listAllLocation',
|
||
list: [
|
||
{
|
||
label: '摄像头',
|
||
dialog_width: '1200px',
|
||
check: false,
|
||
type: 'bianjieruqin',
|
||
img: require('../../assets/map/gangkou_index/buttom/ico26.png'),
|
||
checkImg: require('../../assets/map/gangkou_index/buttom/ico26_on.png'),
|
||
containAuthorization: [],
|
||
eliminateAuthorization: []
|
||
}
|
||
]
|
||
},
|
||
{
|
||
img: require('../../assets/map/gangkou_index/img9.png'),
|
||
checkImg: require('../../assets/map/gangkou_index/img9_on.png'),
|
||
label: '重大危险源',
|
||
containAuthorization: ['035958e685cf4850bc40151c5e0617a6'],
|
||
eliminateAuthorization: [],
|
||
pointUrl: '/api/homemajor/listMajordangersourceLocation',
|
||
list: [
|
||
{
|
||
label: '储罐区',
|
||
dialog_width: '1200px',
|
||
check: false,
|
||
type: 'majordangersource',
|
||
img: require('../../assets/map/gangkou_index/buttom/ico23.png'),
|
||
checkImg: require('../../assets/map/gangkou_index/buttom/ico23_on.png'),
|
||
containAuthorization: [],
|
||
eliminateAuthorization: []
|
||
},
|
||
{
|
||
label: '压力管道',
|
||
dialog_width: '1200px',
|
||
check: false,
|
||
img: require('../../assets/map/gangkou_index/buttom/ico24.png'),
|
||
checkImg: require('../../assets/map/gangkou_index/buttom/ico24_on.png'),
|
||
containAuthorization: [],
|
||
eliminateAuthorization: []
|
||
}
|
||
// {
|
||
// label: '锅炉',
|
||
// dialog_width: '1200px',
|
||
// check: false,
|
||
// img: require('../../assets/map/gangkou_index/buttom/ico25.png'),
|
||
// checkImg: require('../../assets/map/gangkou_index/buttom/ico25_on.png'),
|
||
// containAuthorization: [],
|
||
// eliminateAuthorization: []
|
||
// },
|
||
// {
|
||
// label: '摄像头',
|
||
// dialog_width: '1200px',
|
||
// check: false,
|
||
// type: 'video',
|
||
// img: require('../../assets/map/gangkou_index/buttom/ico26.png'),
|
||
// checkImg: require('../../assets/map/gangkou_index/buttom/ico26_on.png'),
|
||
// containAuthorization: [],
|
||
// eliminateAuthorization: []
|
||
// }
|
||
]
|
||
}
|
||
],
|
||
bottomOptionsIndex: '',
|
||
componentKey: Math.random(),
|
||
bottomOptionsKey: Math.random(),
|
||
bottomOptionsAnimationComplex: false,
|
||
collapse: false,
|
||
pureMap: false,
|
||
CORP_INFO_ID: '',
|
||
dialog: {
|
||
visible: false,
|
||
title: '',
|
||
type: '',
|
||
id: '',
|
||
corpInfoId: '',
|
||
width: '',
|
||
infoname: ''
|
||
},
|
||
/* 曹妃甸使用参数开始*/
|
||
// 人员定位
|
||
|
||
timer: '',
|
||
cfdDIngweiTimer: '',
|
||
cfdCarDIngweiTimer: '',
|
||
perLocArr: [],
|
||
carLocArr: [],
|
||
pointBoxCfd: [],
|
||
pointBox: [],
|
||
fwebsocket: {},
|
||
redList: [],
|
||
orangeList: [],
|
||
yellowList: [],
|
||
i: 0,
|
||
cfdBottomOptionsList: [
|
||
{
|
||
img: require('../../assets/map/gangkou_index/img4.png'),
|
||
checkImg: require('../../assets/map/gangkou_index/img4_on.png'),
|
||
label: '门口门禁',
|
||
pointUrl: '/map/getGatePosition',
|
||
containAuthorization: [],
|
||
eliminateAuthorization: [],
|
||
list: [
|
||
{
|
||
label: '人员',
|
||
dialog_width: '600px',
|
||
check: false,
|
||
img: require('../../assets/map/gangkou_index/buttom/ico1.png'),
|
||
checkImg: require('../../assets/map/gangkou_index/buttom/ico1_on.png'),
|
||
type: 'PERSON',
|
||
containAuthorization: [],
|
||
eliminateAuthorization: []
|
||
},
|
||
{
|
||
label: '车辆',
|
||
dialog_width: '600px',
|
||
check: false,
|
||
img: require('../../assets/map/gangkou_index/buttom/ico2.png'),
|
||
checkImg: require('../../assets/map/gangkou_index/buttom/ico2_on.png'),
|
||
type: 'CAR',
|
||
containAuthorization: [],
|
||
eliminateAuthorization: []
|
||
},
|
||
{
|
||
label: '摄像头',
|
||
dialog_width: '600px',
|
||
check: false,
|
||
type: 'CAMERA',
|
||
img: require('../../assets/map/gangkou_index/buttom/ico3.png'),
|
||
checkImg: require('../../assets/map/gangkou_index/buttom/ico3_on.png'),
|
||
containAuthorization: [],
|
||
eliminateAuthorization: []
|
||
}
|
||
]
|
||
},
|
||
{
|
||
img: require('../../assets/map/gangkou_index/img8.png'),
|
||
checkImg: require('../../assets/map/gangkou_index/img8_on.png'),
|
||
label: '四色四固定',
|
||
pointUrl: '/map/getCurrentLocationOnline',
|
||
containAuthorization: [],
|
||
eliminateAuthorization: [],
|
||
list: [
|
||
{
|
||
label: '人员定位',
|
||
dialog_width: '1200px',
|
||
check: false,
|
||
type: 'peoplePosition',
|
||
img: require('../../assets/map/gangkou_index/buttom/ico21.png'),
|
||
checkImg: require('../../assets/map/gangkou_index/buttom/ico21_on.png'),
|
||
containAuthorization: [],
|
||
eliminateAuthorization: []
|
||
},
|
||
{
|
||
label: '车辆定位',
|
||
dialog_width: '1200px',
|
||
check: false,
|
||
type: 'carPosition',
|
||
img: require('../../assets/map/gangkou_index/buttom/ico22.png'),
|
||
checkImg: require('../../assets/map/gangkou_index/buttom/ico22_on.png'),
|
||
containAuthorization: [],
|
||
eliminateAuthorization: []
|
||
},
|
||
{
|
||
label: '摄像头',
|
||
dialog_width: '600px',
|
||
check: false,
|
||
type: 'CAMERA',
|
||
img: require('../../assets/map/gangkou_index/buttom/ico3.png'),
|
||
checkImg: require('../../assets/map/gangkou_index/buttom/ico3_on.png'),
|
||
containAuthorization: [],
|
||
eliminateAuthorization: []
|
||
}
|
||
]
|
||
},
|
||
{
|
||
img: require('../../assets/map/gangkou_index/img6.png'),
|
||
checkImg: require('../../assets/map/gangkou_index/img6_on.png'),
|
||
label: '危险作业',
|
||
containAuthorization: [],
|
||
eliminateAuthorization: [],
|
||
pointUrl: '/map/Eight/listAllHighRiskWorkLocation',
|
||
list: [
|
||
{
|
||
label: '动火作业',
|
||
dialog_width: '1200px',
|
||
type: 'HOTWORK',
|
||
check: false,
|
||
img: require('../../assets/map/gangkou_index/buttom/ico9.png'),
|
||
checkImg: require('../../assets/map/gangkou_index/buttom/ico9_on.png'),
|
||
containAuthorization: [],
|
||
eliminateAuthorization: []
|
||
},
|
||
{
|
||
label: '受限空间作业',
|
||
dialog_width: '1200px',
|
||
type: 'CONFINEDSPACE',
|
||
check: false,
|
||
img: require('../../assets/map/gangkou_index/buttom/ico10.png'),
|
||
checkImg: require('../../assets/map/gangkou_index/buttom/ico10_on.png'),
|
||
containAuthorization: [],
|
||
eliminateAuthorization: []
|
||
},
|
||
{
|
||
label: '临时用电作业',
|
||
dialog_width: '1200px',
|
||
type: 'ELECTRICITY',
|
||
check: false,
|
||
img: require('../../assets/map/gangkou_index/buttom/ico11.png'),
|
||
checkImg: require('../../assets/map/gangkou_index/buttom/ico11_on.png'),
|
||
containAuthorization: [],
|
||
eliminateAuthorization: []
|
||
},
|
||
{
|
||
label: '高处作业',
|
||
dialog_width: '1200px',
|
||
type: 'HIGHWORK',
|
||
check: false,
|
||
img: require('../../assets/map/gangkou_index/buttom/ico12.png'),
|
||
checkImg: require('../../assets/map/gangkou_index/buttom/ico12_on.png'),
|
||
containAuthorization: [],
|
||
eliminateAuthorization: []
|
||
},
|
||
{
|
||
label: '断路作业',
|
||
dialog_width: '1200px',
|
||
type: 'CUTROAD',
|
||
check: false,
|
||
img: require('../../assets/map/gangkou_index/buttom/ico13.png'),
|
||
checkImg: require('../../assets/map/gangkou_index/buttom/ico13_on.png'),
|
||
containAuthorization: [],
|
||
eliminateAuthorization: ['035958e685cf4850bc40151c5e0617a6']
|
||
},
|
||
{
|
||
label: '动土作业',
|
||
dialog_width: '1200px',
|
||
type: 'BREAKGROUND',
|
||
check: false,
|
||
img: require('../../assets/map/gangkou_index/buttom/ico14.png'),
|
||
checkImg: require('../../assets/map/gangkou_index/buttom/ico14_on.png'),
|
||
containAuthorization: [],
|
||
eliminateAuthorization: ['035958e685cf4850bc40151c5e0617a6']
|
||
},
|
||
{
|
||
label: '吊装作业',
|
||
dialog_width: '1200px',
|
||
type: 'HOISTING',
|
||
check: false,
|
||
img: require('../../assets/map/gangkou_index/buttom/ico15.png'),
|
||
checkImg: require('../../assets/map/gangkou_index/buttom/ico15_on.png'),
|
||
containAuthorization: [],
|
||
eliminateAuthorization: []
|
||
},
|
||
{
|
||
label: '盲板抽堵作业',
|
||
dialog_width: '1200px',
|
||
type: 'BLINDBOARD',
|
||
check: false,
|
||
img: require('../../assets/map/gangkou_index/buttom/ico16.png'),
|
||
checkImg: require('../../assets/map/gangkou_index/buttom/ico16_on.png'),
|
||
containAuthorization: [],
|
||
eliminateAuthorization: []
|
||
},
|
||
{
|
||
label: '摄像头',
|
||
dialog_width: '600px',
|
||
check: false,
|
||
type: 'CAMERA',
|
||
img: require('../../assets/map/gangkou_index/buttom/ico3.png'),
|
||
checkImg: require('../../assets/map/gangkou_index/buttom/ico3_on.png'),
|
||
containAuthorization: [],
|
||
eliminateAuthorization: []
|
||
}
|
||
]
|
||
},
|
||
{
|
||
img: require('../../assets/map/gangkou_index/img10.png'),
|
||
checkImg: require('../../assets/map/gangkou_index/img10_on.png'),
|
||
label: '视频监控',
|
||
containAuthorization: [],
|
||
eliminateAuthorization: [],
|
||
pointUrl: '/platformvideomanagement/listAll',
|
||
list: [
|
||
{
|
||
label: '摄像头',
|
||
dialog_width: '1200px',
|
||
check: false,
|
||
type: 'platcamera',
|
||
img: require('../../assets/map/gangkou_index/buttom/ico26.png'),
|
||
checkImg: require('../../assets/map/gangkou_index/buttom/ico26_on.png'),
|
||
containAuthorization: [],
|
||
eliminateAuthorization: []
|
||
}
|
||
]
|
||
}
|
||
],
|
||
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: '+/UwbBQ/+/prop',
|
||
topic1: '+/+/+/alarm',
|
||
qos: 0
|
||
},
|
||
|
||
client: {
|
||
connected: false
|
||
},
|
||
receiveNews: '',
|
||
subscribeSuccess: false,
|
||
connecting: false,
|
||
retryTimes: 0,
|
||
// mqtt 结束
|
||
onePerLocArr: [],
|
||
iniOne: 0,
|
||
|
||
/* 一公司人员定位 结束*/
|
||
bottomClickDisable: false,
|
||
corpInfo: {
|
||
CORP_INFO_ID: '',
|
||
longitude: '',
|
||
latitude: ''
|
||
},
|
||
trajectoryEntityCollection: {}
|
||
}
|
||
},
|
||
mounted() {
|
||
this.initCorpInfo()
|
||
this.pointBoxCfd = loadMapBoxCfd()
|
||
this.pointBox = loadMapBox()
|
||
},
|
||
methods: {
|
||
initMap() {
|
||
viewer = new Cesium.Viewer('cesiumContainer', {
|
||
animation: false, // 动画
|
||
homeButton: true, // home键
|
||
geocoder: true, // 地址编码
|
||
baseLayerPicker: false, // 图层选择控件
|
||
timeline: false, // 时间轴
|
||
fullscreenButton: true, // 全屏显示
|
||
infoBox: true, // 点击要素之后浮窗
|
||
sceneModePicker: true, // 投影方式 三维/二维
|
||
navigationInstructionsInitiallyVisible: false, // 导航指令
|
||
navigationHelpButton: false, // 帮助信息
|
||
selectionIndicator: false, // 选择
|
||
imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
|
||
// 影像底图
|
||
url: 'http://t{s}.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=' + tiandituTk,
|
||
subdomains: subdomains,
|
||
layer: 'tdtImgLayer',
|
||
style: 'default',
|
||
format: 'image/jpeg',
|
||
tileMatrixSetID: 'GoogleMapsCompatible', // 使用谷歌的瓦片切片方式
|
||
show: true
|
||
})
|
||
})
|
||
|
||
viewer._cesiumWidget._creditContainer.style.display = 'none' // 隐藏cesium ion
|
||
viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
|
||
// 影像注记
|
||
url: 'http://t{s}.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=' + tiandituTk,
|
||
subdomains: subdomains,
|
||
layer: 'tdtCiaLayer',
|
||
style: 'default',
|
||
format: 'image/jpeg',
|
||
tileMatrixSetID: 'GoogleMapsCompatible',
|
||
show: true
|
||
}))
|
||
|
||
drag = new DragEntity({
|
||
viewer
|
||
})
|
||
// 根据不同的公司将信息加载到地图上
|
||
this.initInfo()
|
||
this.leftDownAction()
|
||
// this.dragAreaEntity(this.initPoint)
|
||
this.loadTilesetHandler()
|
||
ry_drag = new RyDragEntity({
|
||
viewer
|
||
})
|
||
},
|
||
|
||
loadTilesetHandler() {
|
||
console.log('loadTilesetHandler')
|
||
Cesium.ExperimentalFeatures.enableModelExperimental = true
|
||
var cfdd = new Cesium.Cesium3DTileset({
|
||
url: '/mapapi/ware/upload/%E6%9B%B9%E5%A6%83%E7%94%B8%E6%B8%AF%E4%B8%9C/%E6%9B%B9%E5%A6%83%E7%94%B8%E6%B8%AF%E4%B8%9C/merge_tile.json'
|
||
})
|
||
viewer.scene.primitives.add(cfdd)
|
||
|
||
var cfdx = new Cesium.Cesium3DTileset({
|
||
url: '/mapapi/ware/upload/%E6%9B%B9%E5%A6%83%E7%94%B8%E6%B8%AF%E8%A5%BF/%E6%9B%B9%E5%A6%83%E7%94%B8%E6%B8%AF%E8%A5%BF/merge_tile.json'
|
||
})
|
||
viewer.scene.primitives.add(cfdx)
|
||
|
||
var qhdxys = new Cesium.Cesium3DTileset({
|
||
url: '/mapapi/ware/upload/qhdxys/merge_tile.json'
|
||
})
|
||
viewer.scene.primitives.add(qhdxys)
|
||
|
||
var qhdgysh = new Cesium.Cesium3DTileset({
|
||
url: '/mapapi/ware/upload/qhdgysh/merge_tile.json'
|
||
})
|
||
viewer.scene.primitives.add(qhdgysh)
|
||
},
|
||
|
||
leftDownAction() {
|
||
// 去掉entity的点击事件 start
|
||
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
|
||
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
|
||
// 去掉entity的点击事件 end
|
||
this.handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
|
||
this.handler.setInputAction(movement => {
|
||
const pick = viewer.scene.pick(movement.position)
|
||
if (Cesium.defined(pick) && (pick.id.id)) {
|
||
if (!pick.id._monitoItems) {
|
||
this.closeBubbles()
|
||
return
|
||
}
|
||
const point_type = pick.id._monitoItems.data.point_type
|
||
if (point_type.indexOf('标记点') !== -1) {
|
||
const { label, point_type, data_id, corpInfoId, dialog_width, infoname } = pick.id._monitoItems.data
|
||
this.dialog.visible = true
|
||
this.dialog.title = label
|
||
this.dialog.type = point_type.substring(3)
|
||
this.dialog.id = data_id
|
||
this.dialog.corpInfoId = corpInfoId
|
||
this.dialog.infoname = infoname
|
||
this.dialog.width = dialog_width || '50%'
|
||
}
|
||
} else {
|
||
this.closeBubbles()
|
||
}
|
||
}, Cesium.ScreenSpaceEventType.LEFT_CLICK)
|
||
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_DOUBLE_CLICK)
|
||
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK)
|
||
document.addEventListener('contextmenu', function(event) {
|
||
event.preventDefault()
|
||
})
|
||
this.handler.setInputAction(movement => {
|
||
const pick = viewer.scene.pick(movement.position)
|
||
if (Cesium.defined(pick) && (pick.id.id)) {
|
||
if (!pick.id._monitoItems) {
|
||
this.removeTrajectory()
|
||
return
|
||
}
|
||
const point_type = pick.id._monitoItems.data.point_type
|
||
const point_id = pick.id._monitoItems.data.id
|
||
const corpInfoId = pick.id._monitoItems.data.corpInfoId
|
||
if (point_type === '标记点peoplePositionOne') {
|
||
this.removeTrajectory()
|
||
this.addTrajectory(point_id, corpInfoId)
|
||
}
|
||
} else {
|
||
this.removeTrajectory()
|
||
}
|
||
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK)
|
||
},
|
||
addTrajectory(point_id, corpInfoId) {
|
||
requestFN(
|
||
'/map/getPersonTrace',
|
||
{
|
||
id: point_id,
|
||
corpId: corpInfoId
|
||
}
|
||
).then((data) => {
|
||
if (data.list) {
|
||
const positions = []
|
||
for (let i = 0; i < data.list.length; i++) {
|
||
positions.push(Cesium.Cartesian3.fromDegrees(data.list[i].XAxis, data.list[i].YAxis))
|
||
}
|
||
const entity = new Cesium.Entity({
|
||
id: 'trajectory',
|
||
polyline: { positions, width: 5.0, material: Cesium.Color.RED }
|
||
})
|
||
const collection = new Cesium.CustomDataSource('trajectoryEntityCollection')
|
||
collection.entities.add(entity)
|
||
viewer.dataSources.add(collection)
|
||
this.trajectoryEntityCollection = collection
|
||
}
|
||
})
|
||
},
|
||
removeTrajectory() {
|
||
if (Object.keys(this.trajectoryEntityCollection).length === 0) return
|
||
viewer.dataSources.remove(this.trajectoryEntityCollection)
|
||
this.trajectoryEntityCollection = {}
|
||
},
|
||
|
||
getCatesian3FromPX: function(px) {
|
||
if (viewer && px) {
|
||
var picks = viewer.scene.drillPick(px)
|
||
var cartesian = null
|
||
// eslint-disable-next-line one-var
|
||
let isOn3dtiles = false,
|
||
isOnTerrain = false
|
||
// drillPick
|
||
for (const i in picks) {
|
||
const pick = picks[i]
|
||
|
||
if (
|
||
(pick && pick.primitive instanceof Cesium.Cesium3DTileFeature) ||
|
||
(pick && pick.primitive instanceof Cesium.Cesium3DTileset) ||
|
||
(pick && pick.primitive instanceof Cesium.Model)
|
||
) {
|
||
// 模型上拾取
|
||
isOn3dtiles = true
|
||
}
|
||
// 3dtilset
|
||
if (isOn3dtiles) {
|
||
viewer.scene.pick(px) // pick
|
||
cartesian = viewer.scene.pickPosition(px)
|
||
if (cartesian) {
|
||
const cartographic = Cesium.Cartographic.fromCartesian(cartesian)
|
||
if (cartographic.height < 0) cartographic.height = 0
|
||
// eslint-disable-next-line one-var
|
||
const lon = Cesium.Math.toDegrees(cartographic.longitude),
|
||
lat = Cesium.Math.toDegrees(cartographic.latitude),
|
||
height = cartographic.height
|
||
cartesian = this.transformWGS84ToCartesian({
|
||
lng: lon,
|
||
lat: lat,
|
||
alt: height
|
||
})
|
||
}
|
||
}
|
||
}
|
||
// 地形
|
||
const boolTerrain =
|
||
viewer.terrainProvider instanceof
|
||
Cesium.EllipsoidTerrainProvider
|
||
// Terrain
|
||
if (!isOn3dtiles && !boolTerrain) {
|
||
var ray = viewer.scene.camera.getPickRay(px)
|
||
if (!ray) return null
|
||
cartesian = viewer.scene.globe.pick(ray, viewer.scene)
|
||
isOnTerrain = true
|
||
}
|
||
// 地球
|
||
if (!isOn3dtiles && !isOnTerrain && boolTerrain) {
|
||
cartesian = viewer.scene.camera.pickEllipsoid(
|
||
px,
|
||
viewer.scene.globe.ellipsoid
|
||
)
|
||
}
|
||
const cartesian1 = new Cesium.Cartesian3(cartesian.x, cartesian.y, cartesian.z) // 替换为实际的 Cartesian3 坐标值
|
||
|
||
// 将 Cartesian3 坐标转换为 Cartographic 坐标
|
||
const cartographic = Cesium.Cartographic.fromCartesian(cartesian1)
|
||
|
||
// 将 Cartographic 坐标转换为 CGCS2000 计算经纬度
|
||
const lng = Cesium.Math.toDegrees(cartographic.longitude)
|
||
const lat = Cesium.Math.toDegrees(cartographic.latitude)
|
||
const height = cartographic.height // 高度
|
||
|
||
return `CGCS2000 坐标: 经度 ${lng}, 纬度 ${lat}, 高度 ${height}`
|
||
}
|
||
},
|
||
|
||
transformWGS84ToCartesian: function(position, alt) {
|
||
// eslint-disable-next-line no-return-assign
|
||
return position ? Cesium.Cartesian3.fromDegrees(
|
||
position.lng || position.lon,
|
||
position.lat,
|
||
position.alt = alt || position.alt,
|
||
Cesium.Ellipsoid.WGS84
|
||
)
|
||
: Cesium.Cartesian3.ZERO
|
||
},
|
||
closeBubbles() {
|
||
if (this.bubbles) {
|
||
this.bubbles.windowClose()
|
||
}
|
||
},
|
||
bubble(id) {
|
||
console.log('bubble', id)
|
||
this.closeBubbles()
|
||
this.bubbles = new Bubble(Object.assign(this.poinEntity[id], {
|
||
viewer: viewer,
|
||
clickPort: this.clickPort
|
||
}))
|
||
},
|
||
|
||
clickPort({ id, longitude, latitude, height, CORP_INFO_ID }) {
|
||
console.log('clickPort', id, longitude, latitude, height, CORP_INFO_ID)
|
||
this.gangkouActive = id
|
||
this.CORP_INFO_ID = CORP_INFO_ID
|
||
this.componentKey = Math.random()
|
||
this.bottomOptionsKey = Math.random()
|
||
this.bottomOptionsAnimationComplex = false
|
||
this.toCenter({ longitude, latitude, height })
|
||
drag.addPolygon(id)
|
||
viewer.dataSources.removeAll()
|
||
this.poinEntity = {}
|
||
this.branchPoint = []
|
||
},
|
||
|
||
addBranchPoint() {
|
||
viewer.dataSources.removeAll()
|
||
this.poinEntity = {}
|
||
this.branchPoint = []
|
||
if (this.gangkouActive !== '00003') return
|
||
requestFN(
|
||
'/map/corpsForMap',
|
||
{
|
||
AREA: this.area
|
||
}
|
||
).then((data) => {
|
||
const varList = this.filterNull(data.varList)
|
||
for (let i = 0; i < varList.length; i++) {
|
||
const point = {}
|
||
point.id = varList[i].CORPINFO_ID
|
||
point.data_id = varList[i].CORPINFO_ID
|
||
point.name = varList[i].CORP_NAME
|
||
point.point_type = '分公司'
|
||
point.type = '分公司'
|
||
point.MAP_POINT_NAME = varList[i].MAP_POINT_NAME
|
||
point.position = {}
|
||
point.position.x = +varList[i].LONGITUDE
|
||
point.position.y = +varList[i].LATITUDE
|
||
point.position.height = 2000
|
||
this.branchPoint.push(point)
|
||
}
|
||
this.dragAreaEntity(this.branchPoint)
|
||
})
|
||
},
|
||
|
||
// 过滤经纬度为空
|
||
filterNull(arr = []) {
|
||
return arr.filter(item => item.LONGITUDE && item.LATITUDE)
|
||
},
|
||
|
||
// 加载区域点
|
||
dragAreaEntity(pointArr) {
|
||
console.log('dragAreaEntity', pointArr)
|
||
const collection = new Cesium.CustomDataSource('clickEntityCollection')
|
||
pointArr.forEach(item => {
|
||
if (!this.poinEntity.hasOwnProperty(item.id)) {
|
||
const entity = drag.addEntity(item)
|
||
this.poinEntity[item.id] = entity
|
||
collection.entities.add(entity)
|
||
}
|
||
})
|
||
viewer.dataSources.add(collection)
|
||
},
|
||
|
||
// 加载点
|
||
dragEntity(poin, pindex, index) {
|
||
// eslint-disable-next-line no-unused-vars
|
||
var _this = this
|
||
const collection = new Cesium.CustomDataSource('clickEntityCollection')
|
||
|
||
poin.forEach(item => {
|
||
if (!this.poinEntity.hasOwnProperty(item.id)) {
|
||
const entity = drag.addEntity(item)
|
||
this.poinEntity[item.id] = entity
|
||
collection.entities.add(entity)
|
||
}
|
||
})
|
||
this.myEntityCollection[pindex + '_' + index] = collection
|
||
var dataSourcePromise = viewer.dataSources.add(collection)
|
||
|
||
dataSourcePromise.then(dataSource => {
|
||
const pixelRange = 50
|
||
const minimumClusterSize = 3
|
||
const enabled = true
|
||
|
||
dataSource.clustering.enabled = enabled // 聚合开启
|
||
dataSource.clustering.pixelRange = pixelRange // 设置像素范围，以扩展显示边框
|
||
dataSource.clustering.minimumClusterSize = minimumClusterSize // 设置最小的聚合点数目，超过此数目才能聚合
|
||
|
||
let removeListener
|
||
// 按聚合层级创建对应图标
|
||
const pinBuilder = new Cesium.PinBuilder()
|
||
var pin100 = pinBuilder
|
||
.fromText('100+', Cesium.Color.BLUE, 48)
|
||
.toDataURL()
|
||
var pin50 = pinBuilder
|
||
.fromText('50+', Cesium.Color.BLUE, 48)
|
||
.toDataURL()
|
||
var pin40 = pinBuilder
|
||
.fromText('40+', Cesium.Color.RED, 48)
|
||
.toDataURL()
|
||
var pin30 = pinBuilder
|
||
.fromText('30+', Cesium.Color.RED, 48)
|
||
.toDataURL()
|
||
var pin20 = pinBuilder
|
||
.fromText('20+', Cesium.Color.RED, 48)
|
||
.toDataURL()
|
||
var pin10 = pinBuilder
|
||
.fromText('10+', Cesium.Color.RED, 48)
|
||
.toDataURL()
|
||
|
||
// 10以内聚合图标
|
||
const singleDigitPins = new Array(8)
|
||
for (let i = 0; i < singleDigitPins.length; ++i) {
|
||
singleDigitPins[i] = pinBuilder
|
||
.fromText(`${i + 2}`, Cesium.Color.VIOLET, 48)
|
||
.toDataURL()
|
||
}
|
||
customStyle()
|
||
|
||
function customStyle() {
|
||
if (Cesium.defined(removeListener)) {
|
||
removeListener()
|
||
removeListener = undefined
|
||
} else {
|
||
removeListener = dataSource.clustering.clusterEvent.addEventListener(
|
||
function(clusteredEntities, cluster) {
|
||
cluster.label.show = false
|
||
cluster.billboard.show = true
|
||
cluster.billboard.id = cluster.label.id
|
||
cluster.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM
|
||
if (clusteredEntities.length >= 100) {
|
||
cluster.billboard.image = pin100
|
||
} else if (clusteredEntities.length >= 50) {
|
||
cluster.billboard.image = pin50
|
||
} else if (clusteredEntities.length >= 40) {
|
||
cluster.billboard.image = pin40
|
||
} else if (clusteredEntities.length >= 30) {
|
||
cluster.billboard.image = pin30
|
||
} else if (clusteredEntities.length >= 20) {
|
||
cluster.billboard.image = pin20
|
||
} else if (clusteredEntities.length >= 10) {
|
||
cluster.billboard.image = pin10
|
||
} else {
|
||
cluster.billboard.image =
|
||
singleDigitPins[clusteredEntities.length - 2]
|
||
}
|
||
}
|
||
)
|
||
}
|
||
|
||
// force a re-cluster with the new styling
|
||
const pixelRange = dataSource.clustering.pixelRange
|
||
dataSource.clustering.pixelRange = 0
|
||
dataSource.clustering.pixelRange = pixelRange
|
||
}
|
||
})
|
||
},
|
||
|
||
combineIconAndLabel(url, label) {
|
||
// 创建画布对象
|
||
const canvas = document.createElement('canvas')
|
||
const width = 30
|
||
const height = 36
|
||
canvas.width = width
|
||
canvas.height = height
|
||
const ctx = canvas.getContext('2d')
|
||
|
||
// eslint-disable-next-line new-cap
|
||
const promise = new Cesium.Resource.fetchImage(url).then(image => {
|
||
// 异常判断
|
||
try {
|
||
ctx.drawImage(image, 0, 0)
|
||
} catch (e) {
|
||
console.log(e)
|
||
}
|
||
|
||
// 渲染字体
|
||
// font属性设置顺序：font-style, font-variant, font-weight, font-size, line-height, font-family
|
||
ctx.fillStyle = Cesium.Color.RED.toCssColorString()
|
||
ctx.font = 'bold 20px Microsoft YaHei'
|
||
ctx.textAlign = 'center'
|
||
ctx.textBaseline = 'middle'
|
||
ctx.fillText(label, width / 2, height / 2)
|
||
|
||
return canvas
|
||
})
|
||
return promise
|
||
},
|
||
|
||
etCameras(pindex, index) {
|
||
requestFN(
|
||
'/videomanager/listAllForMap').then((data) => {
|
||
this.videoList = data.videoList
|
||
let points = []
|
||
if (data.videoList) {
|
||
points = data.videoList.map(item => {
|
||
const point = {}
|
||
point.id = item.VIDEOMANAGER_ID
|
||
point.name = item.VIDEONAME
|
||
point.type = '摄像头'
|
||
point.icon_type = pindex + '_' + index
|
||
point.position = {}
|
||
point.position.x = item.LONGITUDE
|
||
point.position.y = item.LATITUDE
|
||
return point
|
||
})
|
||
this.dragEntity(points, pindex, index)
|
||
}
|
||
}).catch((e) => {
|
||
})
|
||
},
|
||
removeCameras() {
|
||
viewer.dataSources.remove(this.myEntityCollection)
|
||
this.poinEntity = {}
|
||
},
|
||
|
||
handleClickRightTools(index) {
|
||
if (this.rightOptionsList[index].check !== '') this.rightOptionsList[index].check = !this.rightOptionsList[index].check
|
||
if (index === 0) {
|
||
if (this.gangkouActive === '00004') {
|
||
if (this.timer) {
|
||
clearInterval(this.timer)
|
||
}
|
||
if (this.cfdDIngweiTimer) {
|
||
clearInterval(this.cfdDIngweiTimer)
|
||
}
|
||
}
|
||
|
||
this.destroyConnection()
|
||
this.onePerLocArr = []
|
||
this.$router.push('/index')
|
||
} else if (index === 1) {
|
||
this.handleFullScreen(undefined)
|
||
} else if (index === 2) {
|
||
this.toCenter()
|
||
} else if (index === 3) {
|
||
this.changeSceneMode(this.rightOptionsList[index].check)
|
||
} else if (index === 4) {
|
||
this.destroyConnection()
|
||
this.clearAllBottomOptionsItemsCheck()
|
||
this.clearAllBottomOptionsItemsEntityCollection()
|
||
this.removeTrajectory()
|
||
this.onePerLocArr = []
|
||
this.perLocArr = []
|
||
this.clearMqttPoint()
|
||
if (this.gangkouActive === '00004') {
|
||
if (this.timer) {
|
||
clearInterval(this.timer)
|
||
}
|
||
if (this.cfdDIngweiTimer) {
|
||
clearInterval(this.cfdDIngweiTimer)
|
||
}
|
||
}
|
||
} else if (index === 5) {
|
||
this.pureMap = !this.pureMap
|
||
this.componentKey = Math.random()
|
||
this.bottomOptionsKey = Math.random()
|
||
this.bottomOptionsAnimationComplex = false
|
||
}
|
||
},
|
||
changeSceneMode(check) {
|
||
viewer.scene.mode = check ? Cesium.SceneMode.COLUMBUS_VIEW : Cesium.SceneMode.SCENE3D
|
||
},
|
||
toCenter(center = this.center) {
|
||
console.log('toCenter', center)
|
||
this.center.longitude = center.longitude
|
||
this.center.latitude = center.latitude
|
||
this.center.height = center.height
|
||
viewer.camera.flyTo({
|
||
// 设置中心点,x,y,缩放等级
|
||
destination: Cesium.Cartesian3.fromDegrees(this.center.longitude, this.center.latitude, this.center.height)
|
||
})
|
||
},
|
||
centerOptionsClick(index, AREA) {
|
||
this.centerOptionsIndex = index
|
||
this.area = AREA
|
||
this.bottomOptionsIndex = ''
|
||
this.collapse = false
|
||
this.componentKey = Math.random()
|
||
this.bottomOptionsKey = Math.random()
|
||
this.bottomOptionsAnimationComplex = false
|
||
this.addBranchPoint()
|
||
this.clearAllBottomOptionsItemsCheck()
|
||
this.clearAllBottomOptionsItemsEntityCollection()
|
||
this.removeTrajectory()
|
||
},
|
||
bottomOptionsClick(index) {
|
||
if (this.bottomClickDisable) return
|
||
if (this.bottomOptionsIndex === index) {
|
||
this.bottomOptionsIndex = ''
|
||
} else {
|
||
this.bottomOptionsIndex = index
|
||
}
|
||
this.collapse = false
|
||
this.componentKey = Math.random()
|
||
this.bottomOptionsKey = Math.random()
|
||
this.bottomOptionsAnimationComplex = true
|
||
},
|
||
clearAllBottomOptionsItemsCheck() {
|
||
if (this.gangkouActive === '00004') {
|
||
for (let i = 0; i < this.cfdBottomOptionsList.length; i++) {
|
||
for (let j = 0; j < this.cfdBottomOptionsList[i].list.length; j++) {
|
||
this.cfdBottomOptionsList[i].list[j].check = false
|
||
}
|
||
}
|
||
} else {
|
||
for (let i = 0; i < this.bottomOptionsList.length; i++) {
|
||
for (let j = 0; j < this.bottomOptionsList[i].list.length; j++) {
|
||
this.bottomOptionsList[i].list[j].check = false
|
||
}
|
||
}
|
||
}
|
||
},
|
||
clearAllBottomOptionsItemsEntityCollection() {
|
||
if (this.cfdDIngweiTimer) {
|
||
clearInterval(this.cfdDIngweiTimer)
|
||
}
|
||
this.perLocArr = []
|
||
if (this.cfdCarDIngweiTimer) {
|
||
clearInterval(this.cfdCarDIngweiTimer)
|
||
}
|
||
this.carLocArr = []
|
||
for (const myEntityCollectionKey in this.myEntityCollection) {
|
||
viewer.dataSources.remove(this.myEntityCollection[myEntityCollectionKey])
|
||
for (const poinEntityKey in this.poinEntity) {
|
||
if (this.poinEntity[poinEntityKey].id.indexOf(myEntityCollectionKey) > -1) {
|
||
delete this.poinEntity[poinEntityKey]
|
||
}
|
||
}
|
||
}
|
||
},
|
||
back() {
|
||
if (this.gangkouActive !== '00003' && this.CORP_INFO_ID) {
|
||
// 曹妃甸
|
||
if (this.gangkouActive === '00004') {
|
||
if (this.timer) {
|
||
clearInterval(this.timer)
|
||
}
|
||
if (this.cfdDIngweiTimer) {
|
||
clearInterval(this.cfdDIngweiTimer)
|
||
}
|
||
}
|
||
|
||
this.clearAllBottomOptionsItemsCheck()
|
||
this.CORP_INFO_ID = ''
|
||
this.gangkouActive = ''
|
||
viewer.entities.removeAll()
|
||
viewer.dataSources.removeAll()
|
||
this.poinEntity = {}
|
||
this.toCenter(this.initCenter)
|
||
this.dragAreaEntity(this.initPoint)
|
||
} else if (this.CORP_INFO_ID) {
|
||
this.CORP_INFO_ID = ''
|
||
this.clearAllBottomOptionsItemsEntityCollection()
|
||
this.removeTrajectory()
|
||
this.dragAreaEntity(this.branchPoint)
|
||
this.toCenter(this.parentCenter)
|
||
this.destroyConnection()
|
||
this.clearMqttPoint()
|
||
} else if (!this.CORP_INFO_ID) {
|
||
this.gangkouActive = ''
|
||
this.area = ''
|
||
this.centerOptionsIndex = 1
|
||
viewer.entities.removeAll()
|
||
viewer.dataSources.removeAll()
|
||
this.poinEntity = {}
|
||
this.toCenter(this.initCenter)
|
||
this.dragAreaEntity(this.initPoint)
|
||
}
|
||
|
||
this.componentKey = Math.random()
|
||
this.bottomOptionsKey = Math.random()
|
||
this.bottomOptionsAnimationComplex = false
|
||
this.collapse = false
|
||
this.bottomOptionsIndex = ''
|
||
this.clearAllBottomOptionsItemsCheck()
|
||
},
|
||
|
||
bottomOptionsItemsClick(pindex, index, label, urlType, pointUrl, dialog_width) {
|
||
if (this.bottomOptionsList[pindex].list[index].check || this.gangkouActive === '00004' && this.cfdBottomOptionsList[pindex].list[index].check) {
|
||
// 人员定位关闭实时获取定位websocket 并关闭人员对比定时器（曹妃甸使用）
|
||
if (this.gangkouActive === '00004' && urlType === 'peoplePosition') {
|
||
if (this.timer) {
|
||
clearInterval(this.timer)
|
||
}
|
||
if (this.cfdDIngweiTimer) {
|
||
clearInterval(this.cfdDIngweiTimer)
|
||
}
|
||
this.perLocArr = []
|
||
this.clearMqttPoint('cfdrydw')
|
||
}
|
||
if (this.gangkouActive === '00004' && urlType === 'carPosition') {
|
||
if (this.cfdCarDIngweiTimer) {
|
||
clearInterval(this.cfdCarDIngweiTimer)
|
||
}
|
||
this.carLocArr = []
|
||
}
|
||
if (this.gangkouActive === '00003' && this.CORP_INFO_ID === '035958e685cf4850bc40151c5e0617a6' && urlType === 'peoplePosition') {
|
||
this.doUnSubscribe()
|
||
this.clearMqttPoint('+/UwbBQ/')
|
||
this.removeTrajectory()
|
||
}
|
||
this.bottomOptionsList[pindex].list[index].check = false
|
||
if (this.gangkouActive === '00004') {
|
||
this.cfdBottomOptionsList[pindex].list[index].check = false
|
||
}
|
||
viewer.dataSources.remove(this.myEntityCollection[pindex + '_' + index])
|
||
const keys = Object.keys(this.poinEntity)
|
||
keys.filter(key => {
|
||
if (this.poinEntity[key].id.indexOf(pindex + '_' + index) > -1) {
|
||
delete this.poinEntity[key]
|
||
}
|
||
})
|
||
} else {
|
||
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.CORP_INFO_ID) : this.doSubscribe()
|
||
} 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()
|
||
this.timerCfdDingweiPoint()
|
||
} else {
|
||
this.dragEntity(points, pindex, index)
|
||
}
|
||
}).catch((e) => {
|
||
console.log(e)
|
||
})
|
||
}
|
||
|
||
// if (label === '摄像头') {
|
||
// setTimeout(() => {
|
||
// const point = cloneDeep(points[2])
|
||
// point.point_type = '报警'
|
||
// point.type = '报警'
|
||
// const collection = new Cesium.CustomDataSource('clickEntityCollection')
|
||
// const entity = drag.addEntity(point)
|
||
// this.poinEntity[point.id] = entity
|
||
// collection.entities.add(entity)
|
||
// viewer.dataSources.add(collection)
|
||
// this.myEntityCollection[point.id] = collection
|
||
// }, 1000)
|
||
// }
|
||
}
|
||
},
|
||
timerCfdDingweiPoint() {
|
||
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
|
||
if (this.perLocArr[i].lastTime) {
|
||
ry_drag.getPosition(this.perLocArr[i])
|
||
} else {
|
||
ry_drag.addEntity(this.perLocArr[i])
|
||
this.mqttPoint['cfdrydw' + this.perLocArr[i].cardNo] = this.perLocArr[i].cardNo
|
||
}
|
||
}
|
||
},
|
||
timerCfdDingwei() {
|
||
this.cfdDIngweiTimer = setInterval(() => {
|
||
// this.localtionReload(1, 0)
|
||
requestFN(
|
||
'/map/getCurrentLocationOnline',
|
||
{
|
||
CORPINFO_ID: this.CORP_INFO_ID,
|
||
TYPE: 'peoplePosition',
|
||
AREA: this.area,
|
||
GANGKOU: this.gangkouActive
|
||
}
|
||
).then((data) => {
|
||
const pindex = 1
|
||
const index = 0
|
||
const urlType = 'peoplePosition'
|
||
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 = '人员定位'
|
||
point.type = '标记点'
|
||
point.icon_type = pindex + '_' + index
|
||
point.position = {}
|
||
point.position.x = +varList[i].LONGITUDE
|
||
point.position.y = +varList[i].LATITUDE
|
||
point.dialog_width = '1200px'
|
||
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.perLocArr.length === 0) {
|
||
this.perLocArr = points
|
||
} else {
|
||
for (let i = 0; i < points.length; i++) {
|
||
let isExist = false
|
||
for (let j = 0; j < this.perLocArr.length; j++) {
|
||
if (points[i].cardNo === this.perLocArr[j].cardNo) {
|
||
this.perLocArr[j].position = points[i].position
|
||
isExist = true
|
||
break
|
||
}
|
||
}
|
||
if (!isExist) {
|
||
this.perLocArr.push(points[i])
|
||
}
|
||
}
|
||
}
|
||
this.isItWithinTheArea()
|
||
|
||
this.timerCfdDingweiPoint()
|
||
})
|
||
}, 5000)
|
||
},
|
||
timerCfdCarDingwei() {
|
||
this.cfdCarDIngweiTimer = setInterval(() => {
|
||
this.carLocaltionReload(1, 1)
|
||
requestFN(
|
||
'/map/getCurrentLocationOnline',
|
||
{
|
||
CORPINFO_ID: this.CORP_INFO_ID,
|
||
TYPE: 'carPosition',
|
||
AREA: this.area,
|
||
GANGKOU: this.gangkouActive
|
||
}
|
||
).then((data) => {
|
||
const pindex = 1
|
||
const index = 1
|
||
const urlType = 'carPosition'
|
||
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 = '车辆定位'
|
||
point.type = '标记点'
|
||
point.icon_type = pindex + '_' + index
|
||
point.position = {}
|
||
point.position.x = +varList[i].LONGITUDE
|
||
point.position.y = +varList[i].LATITUDE
|
||
point.dialog_width = '1200px'
|
||
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)
|
||
}
|
||
this.carLocArr = points
|
||
|
||
this.dragEntity(this.carLocArr, pindex, index)
|
||
})
|
||
}, 1800000)
|
||
},
|
||
// 曹妃甸人员定位相关方法-开始
|
||
// 每五分钟加载一次八项作业与工单人员
|
||
delayedAccessEightWorkers() {
|
||
// eslint-disable-next-line no-implied-eval
|
||
this.timer = setInterval(() => {
|
||
this.initColorList()
|
||
// this.localtionReload(1, 0)
|
||
}, 300000)
|
||
},
|
||
// 获取各种颜色人员列表（八项作业与工单）
|
||
async initColorList() {
|
||
this.redList = []
|
||
this.orangeList = []
|
||
this.yellowList = []
|
||
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(CORP_INFO_ID) {
|
||
try {
|
||
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 = true
|
||
console.log('Connection succeeded!')
|
||
|
||
this.doSubscribe()
|
||
})
|
||
this.client.on('reconnect', this.handleOnReConnect)
|
||
this.client.on('error', error => {
|
||
console.log('Connection failed', error)
|
||
})
|
||
this.mqttMessage(CORP_INFO_ID)
|
||
}
|
||
} catch (error) {
|
||
this.connecting = false
|
||
console.log('mqtt.connect error', error)
|
||
}
|
||
},
|
||
mqttMessage(CORP_INFO_ID) {
|
||
this.client.on('message', (topic, message) => {
|
||
if (topic.indexOf('UwbBQ') !== -1 && topic.indexOf('prop') !== -1) {
|
||
// created by liu jun mqtt返回的参数可能是一个数组
|
||
let peopleList = JSON.parse(message)
|
||
if (!Array.isArray(peopleList)) {
|
||
peopleList = [peopleList]
|
||
}
|
||
for (let i = 0; i < peopleList.length; i++) {
|
||
const item = peopleList[i]
|
||
// 如果不是人员信息则跳过
|
||
// UwbBQ是人员定位卡的id（UwbJiZhan这是基站的id）
|
||
if (item.productKey !== 'UwbBQ') {
|
||
continue
|
||
}
|
||
// 将地图上剩余的点与最新的定位人员点进行对比 更新地图上已存在的点 新增地图上之前没有的点
|
||
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: '人员定位',
|
||
corpInfoId: CORP_INFO_ID
|
||
}
|
||
this.onePerLocArr.push(perLoc)
|
||
ry_drag.addEntity(perLoc)
|
||
this.mqttPoint[this.subscription.topic.substring(0, this.subscription.topic.lastIndexOf('+')) + item.deviceCode] = item.deviceCode
|
||
}
|
||
}
|
||
} else if (topic.indexOf('alarm') !== -1) {
|
||
const formatMessage = JSON.parse(message)
|
||
this.$notify({
|
||
title: '报警信息',
|
||
dangerouslyUseHTMLString: true,
|
||
message: `部门：${formatMessage.deptName}<br/>类型：${formatMessage.identifierName}`,
|
||
type: 'error'
|
||
})
|
||
}
|
||
})
|
||
},
|
||
clearMqttPoint(prefix) {
|
||
for (const mqttPointKey in this.mqttPoint) {
|
||
const key = prefix ? prefix + this.mqttPoint[mqttPointKey] : mqttPointKey
|
||
viewer.entities.removeById(this.mqttPoint[key])
|
||
this.onePerLocArr = this.onePerLocArr.filter(item => item.data_id !== this.mqttPoint[key])
|
||
delete this.mqttPoint[key]
|
||
}
|
||
},
|
||
// 订阅
|
||
doSubscribe() {
|
||
const { topic, topic1, qos } = this.subscription
|
||
this.client.subscribe([topic, topic1], { qos }, (error, res) => {
|
||
if (error) {
|
||
console.log('Subscribe to topics error', error)
|
||
return
|
||
}
|
||
this.subscribeSuccess = true
|
||
console.log('Subscribe to topics res', res)
|
||
})
|
||
},
|
||
// 取消订阅
|
||
doUnSubscribe() {
|
||
const { topic, topic1 } = this.subscription
|
||
this.client.unsubscribe([topic, topic1], error => {
|
||
if (error) {
|
||
console.log('Subscribe to topics error', error)
|
||
}
|
||
})
|
||
},
|
||
|
||
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()
|
||
})
|
||
this.isPointWithinTheArea(this.pointBox)
|
||
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) {
|
||
this.fwebsocket = new WebSocket(encodeURI('ws://' + config.perRealTimeLocUrl + '?u=' + new Date().getTime())) // oladress在main.jsp页面定义
|
||
this.fwebsocket.onopen = () => {
|
||
console.info('链接成功')
|
||
}
|
||
this.fwebsocket.onerror = function() {
|
||
console.info('连接失败')
|
||
// 连接失败
|
||
}
|
||
this.fwebsocket.onclose = function() {
|
||
console.info('连接断开')
|
||
// 连接断开
|
||
}
|
||
// 消息接收
|
||
this.fwebsocket.onmessage = function(message) {
|
||
console.info(_this.i)
|
||
if (_this.i === 0) {
|
||
// console.info('消息接收')
|
||
// eslint-disable-next-line no-unused-vars
|
||
var msg = _this.unzip(message.data)
|
||
// const decodedStr = decodeURIComponent(msg) // 进行解码
|
||
// console.info(decodedStr)
|
||
let decodedStr
|
||
if (decodedStr) {
|
||
// const perTrack = JSON.parse(decodedStr)
|
||
const perTrack = {
|
||
'msg': '000', 'data': [
|
||
'8905,118.50022313549867,38.92716921306408,-88.96163116878053,0.15,8905,测试工单',
|
||
'8001,118.5044033058593,38.926660124965956,-88.96163116878053,0.15,8001,张悦',
|
||
'8002,118.48886198164132,38.916885738277635,-88.96163116878053,0.15,8002,齐津铖',
|
||
'8003,118.50289308906841,38.92012841170512,-88.96163116878053,0.15,8003,白伟',
|
||
'8004,118.48820877892216,38.91690951376236,-88.96163116878053,0.15,8004,孙海官'
|
||
]
|
||
}
|
||
if (perTrack.msg === '000' && perTrack.data && perTrack.data.length > 0) {
|
||
perTrack.data.forEach(item => {
|
||
const newPos = item.split(',')
|
||
const index = _this.perLocArr.findIndex(item1 => {
|
||
return item1.cardNo.toString() === newPos[0].toString()
|
||
})
|
||
// 如果有就替换，没有就添加
|
||
if (index !== -1) {
|
||
const pos = {
|
||
x: parseFloat(newPos[1]),
|
||
y: parseFloat(newPos[2])
|
||
}
|
||
_this.$set(_this.perLocArr[index], 'position', pos)
|
||
} else {
|
||
const data = {
|
||
NAME: newPos[6],
|
||
LONGITUDE: parseFloat(newPos[1]),
|
||
LATITUDE: parseFloat(newPos[2]),
|
||
empNo: newPos[5],
|
||
cardNo: newPos[0].toString()
|
||
}
|
||
const newPoint = _this.initpoint(4, 0, '人员定位', 'peoplePosition', data, _this.perLocArr.length, 'blue')
|
||
_this.perLocArr.push(newPoint)
|
||
}
|
||
})
|
||
_this.isItWithinTheArea()
|
||
_this.clearPoint(4, 0)
|
||
_this.dragEntity(_this.perLocArr, 4, 0)
|
||
}
|
||
}
|
||
_this.i++
|
||
} else if (_this.i < 2) {
|
||
_this.i++
|
||
} else {
|
||
_this.i = 0
|
||
}
|
||
}
|
||
}
|
||
},
|
||
|
||
unzip: function(b64Data) {
|
||
var strData = atob(b64Data)
|
||
|
||
// Convert binary string to character-number array
|
||
|
||
var charData = strData.split('').map(function(x) {
|
||
return x.charCodeAt(0)
|
||
})
|
||
|
||
// Turn number array into byte-array
|
||
|
||
var binData = new Uint8Array(charData)
|
||
|
||
// // unzip
|
||
|
||
var data = pako.inflate(binData)
|
||
|
||
// Convert gunzipped byteArray back to ascii string:
|
||
|
||
strData = String.fromCharCode.apply(null, new Uint16Array(data))
|
||
|
||
return strData
|
||
},
|
||
/**
|
||
* 某个点是否在某个区域
|
||
*/
|
||
isPointInPolygon(polygon, lng, lat) {
|
||
var numberOfPoints = polygon.length
|
||
var polygonLats = []
|
||
var polygonLngs = []
|
||
for (var i = 0; i < numberOfPoints; i++) {
|
||
polygonLats.push(polygon[i]['y'])
|
||
polygonLngs.push(polygon[i]['x'])
|
||
}
|
||
var polygonContainsPoint = false
|
||
for (var node = 0, altNode = (numberOfPoints - 1); node < numberOfPoints; altNode = node++) {
|
||
if ((polygonLngs[node] > lng != (polygonLngs[altNode] > lng)) &&
|
||
(lat < (polygonLats[altNode] - polygonLats[node]) *
|
||
(lng - polygonLngs[node]) /
|
||
(polygonLngs[altNode] - polygonLngs[node]) +
|
||
polygonLats[node]
|
||
)
|
||
) {
|
||
polygonContainsPoint = !polygonContainsPoint
|
||
}
|
||
}
|
||
return polygonContainsPoint
|
||
},
|
||
// 获取八项作业作业人员列表并比较
|
||
getAllWorkUserCards() {
|
||
console.log('开始执行调用作业人员列表方法' + this.cfdBottomOptionsList[1].list[0].check)
|
||
|
||
return new Promise(resolve => {
|
||
if (this.cfdBottomOptionsList[1].list[0].check === true) {
|
||
requestFN(
|
||
'/map/Eight/getAllWorkUserCards',
|
||
{}
|
||
).then((res) => {
|
||
this.redList = res.userCardsList.concat(this.redList)
|
||
resolve()
|
||
}).catch((e) => {
|
||
})
|
||
// _this.clearPoint(4, 0)
|
||
// _this.dragEntity(_this.perLocArr, 4, 0)
|
||
}
|
||
})
|
||
},
|
||
// 获取工单作业作业人员列表
|
||
getAllTickets() {
|
||
return new Promise(resolve => {
|
||
if (this.cfdBottomOptionsList[1].list[0].check === true) {
|
||
requestFN(
|
||
'/map/Eight/getAllTickets',
|
||
{}
|
||
).then((res) => {
|
||
this.redList = res.redList.concat(this.redList)
|
||
this.orangeList = res.orangeList.concat(this.orangeList)
|
||
this.yellowList = res.yellowList.concat(this.yellowList)
|
||
resolve()
|
||
}).catch((e) => {
|
||
})
|
||
}
|
||
})
|
||
// _this.clearPoint(4, 0)
|
||
// _this.dragEntity(_this.perLocArr, 4, 0)
|
||
},
|
||
initpoint(pindex, index, label, type, data, i, color) {
|
||
const point = {}
|
||
point.id = pindex + '_' + index + '_' + i
|
||
point.point_type = '标记点' + type
|
||
if (type === 'peoplePosition') {
|
||
point.data_id = data.empNo || ''
|
||
} else {
|
||
point.data_id = data.id || ''
|
||
}
|
||
point.name = data.NAME
|
||
point.label = label
|
||
point.type = '标记点'
|
||
point.icon_type = pindex + '_' + index
|
||
point.corpInfoId = data.CORPINFO_ID
|
||
point.LONGITUDE = parseFloat(data.LONGITUDE)
|
||
point.LATITUDE = parseFloat(data.LATITUDE)
|
||
point.position = {}
|
||
point.position.x = parseFloat(data.LONGITUDE)
|
||
point.position.y = parseFloat(data.LATITUDE)
|
||
if (pindex === 0) {
|
||
point.infoname = data.GATE_MACHINE_NAME
|
||
} else {
|
||
point.infoname = data.NAME
|
||
}
|
||
// 摄像头使用
|
||
point.code = data.INDEXCODE || '' // 摄像头编号
|
||
// 人员定位使用
|
||
point.empNo = data.empNo || '' // 工号
|
||
point.cardNo = data.cardNo || '' // 卡号
|
||
point.gangkou = this.gangkouActive
|
||
return point
|
||
},
|
||
// 查询当前所有点位是否在区域内
|
||
isItWithinTheArea() {
|
||
var _this = this
|
||
_this.perLocArr.forEach((item, index) => {
|
||
// 判断是否存在于四色区域内
|
||
const redFiled = []
|
||
_this.pointBoxCfd.redList.forEach(item => {
|
||
redFiled.push(...item['position'])
|
||
})
|
||
const orangeFiled = []
|
||
_this.pointBoxCfd.orangeList.forEach(item => {
|
||
orangeFiled.push(...item['position'])
|
||
})
|
||
const yellowFiled = []
|
||
_this.pointBoxCfd.yellowList.forEach(item => {
|
||
yellowFiled.push(...item['position'])
|
||
})
|
||
if (this.redList.indexOf(item.cardNo) > -1) {
|
||
_this.$set(_this.perLocArr[index], 'color', 'red')
|
||
} 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.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.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) {
|
||
return polygonList.some(item => {
|
||
return this.isPointInPolygon(item.position, lng, lat)
|
||
})
|
||
},
|
||
clearPoint(pindex, index) {
|
||
// 清除随机坐标点位
|
||
viewer.dataSources.remove(this.myEntityCollection[pindex + '_' + index])
|
||
const keys = Object.keys(this.poinEntity)
|
||
keys.filter(key => {
|
||
if (this.poinEntity[key].id.indexOf(pindex + '_' + index) > -1) {
|
||
delete this.poinEntity[key]
|
||
}
|
||
})
|
||
},
|
||
|
||
// 重新加载人员定位点位信息
|
||
localtionReload(pindex, index) {
|
||
var _this = this
|
||
_this.clearPoint(pindex, index)
|
||
// _this.dragEntity(_this.perLocArr, 4, 0)
|
||
this.perLocArr = []
|
||
},
|
||
// 重新加载车辆定位点位信息
|
||
carLocaltionReload(pindex, index) {
|
||
var _this = this
|
||
_this.clearPoint(pindex, index)
|
||
// _this.dragEntity(_this.perLocArr, 4, 0)
|
||
this.carLocArr = []
|
||
},
|
||
// 曹妃甸人员定位相关方法-结束
|
||
clickBranch({ CORP_INFO_ID, longitude, latitude, height }) {
|
||
console.log('clickBranch', CORP_INFO_ID, longitude, latitude, height)
|
||
this.parentCenter = cloneDeep(this.center)
|
||
this.CORP_INFO_ID = CORP_INFO_ID
|
||
this.clearAllBottomOptionsItemsCheck()
|
||
viewer.dataSources.removeAll()
|
||
this.poinEntity = {}
|
||
for (let i = 0; i < this.branchPoint.length; i++) {
|
||
if (this.branchPoint[i].data_id === CORP_INFO_ID) {
|
||
this.dragAreaEntity([this.branchPoint[i]])
|
||
break
|
||
}
|
||
}
|
||
this.toCenter({ longitude, latitude, height })
|
||
this.componentKey = Math.random()
|
||
this.bottomOptionsKey = Math.random()
|
||
this.bottomOptionsAnimationComplex = false
|
||
this.bottomOptionsIndex = ''
|
||
this.collapse = false
|
||
},
|
||
containAuthorizationShow({ containAuthorization }) {
|
||
const CORP_INFO_ID = this.CORP_INFO_ID
|
||
if (containAuthorization.length === 0) return true
|
||
if (containAuthorization.includes(CORP_INFO_ID)) {
|
||
return true
|
||
} else {
|
||
return false
|
||
}
|
||
},
|
||
eliminateAuthorizationShow({ eliminateAuthorization }) {
|
||
const CORP_INFO_ID = this.CORP_INFO_ID
|
||
if (eliminateAuthorization.length === 0) return true
|
||
if (eliminateAuthorization.includes(CORP_INFO_ID)) {
|
||
return false
|
||
} else {
|
||
return true
|
||
}
|
||
},
|
||
async bottomOptionsEnter(el, done) {
|
||
this.bottomClickDisable = true
|
||
if (!this.bottomOptionsAnimationComplex) {
|
||
// 默认应用简单动画，只有点击时使用复杂动画，否则元素结构不同，无法处理
|
||
await animate(el, {
|
||
translateY: -100,
|
||
opacity: 0
|
||
}, { duration: 0 }).finished
|
||
await animate(el, {
|
||
translateY: 0,
|
||
opacity: 1
|
||
}, { duration: 1 }).finished
|
||
this.bottomClickDisable = false
|
||
done()
|
||
return
|
||
}
|
||
const duration = 0.2
|
||
if (this.bottomOptionsIndex !== '') {
|
||
const activeDom = el.querySelector('.active')
|
||
const itemDom = activeDom.querySelector('.item')
|
||
// 将当前的二级图标收起，以便下一步展开
|
||
await animate(itemDom, {
|
||
scaleX: 0,
|
||
opacity: 0
|
||
}, { duration: 0 }).finished
|
||
// 展开当前的二级图标
|
||
await animate(itemDom, {
|
||
scaleX: 1,
|
||
opacity: 1
|
||
}, { duration }).finished
|
||
} else {
|
||
const optionDom = el.querySelectorAll('.option')
|
||
for (let i = 0; i < optionDom.length; i++) {
|
||
// 将每个一级图标隐藏，以便下一步顺序显示
|
||
await animate(optionDom[i], {
|
||
translateY: 30,
|
||
opacity: 0
|
||
}, { duration: 0 }).finished
|
||
}
|
||
for (let i = 0; i < optionDom.length; i++) {
|
||
// 将每个一级图标顺序显示
|
||
await animate(optionDom[i], {
|
||
translateY: 0,
|
||
opacity: 1
|
||
}, { duration }).finished
|
||
}
|
||
}
|
||
this.bottomClickDisable = false
|
||
done()
|
||
},
|
||
async bottomOptionsLeave(el, done) {
|
||
this.bottomClickDisable = true
|
||
if (!this.bottomOptionsAnimationComplex) {
|
||
// 默认应用简单动画，只有点击时使用复杂动画，否则元素结构不同，无法处理
|
||
await animate(el, {
|
||
translateY: -100,
|
||
opacity: 0
|
||
}, { duration: 1 }).finished
|
||
this.bottomClickDisable = false
|
||
done()
|
||
return
|
||
}
|
||
const duration = 0.2
|
||
if (this.bottomOptionsIndex !== '') {
|
||
const optionDom = el.querySelectorAll('.option')
|
||
for (let i = 0; i < optionDom.length; i++) {
|
||
// 将每个一级图标顺序隐藏
|
||
await animate(optionDom[i], {
|
||
translateY: 30,
|
||
opacity: 0
|
||
}, { duration }).finished
|
||
}
|
||
// 将点击的那个一级图标显示回来
|
||
await animate(optionDom[this.bottomOptionsIndex], {
|
||
translateY: 0,
|
||
opacity: 1
|
||
}, { duration }).finished
|
||
// 将点击的那个一级图标移动到最左边
|
||
await animate(optionDom[this.bottomOptionsIndex], {
|
||
translateX: -optionDom[this.bottomOptionsIndex].offsetLeft
|
||
}, { duration }).finished
|
||
} else {
|
||
const activeDom = el.querySelector('.active')
|
||
const itemDom = activeDom.querySelector('.item')
|
||
// 收起当前的二级图标
|
||
await animate(itemDom, {
|
||
scaleX: 0,
|
||
opacity: 0
|
||
}, { duration }).finished
|
||
// 将点击的那个一级图标隐藏
|
||
await animate(activeDom, {
|
||
translateY: 30,
|
||
opacity: 0
|
||
}, { duration }).finished
|
||
}
|
||
this.bottomClickDisable = false
|
||
done()
|
||
},
|
||
initInfo() {
|
||
this.bottomOptionsIndex = ''
|
||
this.clickPort({
|
||
id: '00003',
|
||
CORP_INFO_ID: this.corpInfo.CORP_INFO_ID,
|
||
longitude: this.corpInfo.longitude,
|
||
latitude: this.corpInfo.latitude,
|
||
height: '2000'
|
||
})
|
||
},
|
||
initCorpInfo() {
|
||
requestFN(
|
||
'/map/getCorpInfo', {}
|
||
).then((data) => {
|
||
this.corpInfo.CORP_INFO_ID = data.info.CORP_INFO_ID
|
||
this.corpInfo.latitude = data.info.latitude
|
||
this.corpInfo.longitude = data.info.longitude
|
||
this.initMap()
|
||
}).catch((e) => {
|
||
console.log(e)
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
#cesiumContainer {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
|
||
header {
|
||
background-image: url("../../assets/map/index/top.png");
|
||
width: 100vw;
|
||
height: 70px;
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
font-size: 40px;
|
||
color: #fff;
|
||
text-align: center;
|
||
padding-top: 10px;
|
||
font-weight: bold;
|
||
position: absolute;
|
||
z-index: 99;
|
||
|
||
.back {
|
||
background-image: url("../../assets/map/gangkou_index/back.png");
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
width: 100px;
|
||
height: 30px;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.title {
|
||
background-image: linear-gradient(bottom, #5bb4f7, #ffffff);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
font-size: 34px;
|
||
}
|
||
|
||
.guang {
|
||
background-image: url("../../assets/map/index/guang.png");
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
width: 707px;
|
||
height: 85px;
|
||
position: absolute;
|
||
top: 25px;
|
||
left: 50%;
|
||
animation: scale 2s infinite;
|
||
|
||
@keyframes scale {
|
||
0% {
|
||
transform: translateX(-50%) scale(1);
|
||
}
|
||
50% {
|
||
transform: translateX(-50%) scale(0.5);
|
||
}
|
||
100% {
|
||
transform: translateX(-50%) scale(1);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.center_options {
|
||
width: 408px;
|
||
position: absolute;
|
||
z-index: 99;
|
||
top: 135px;
|
||
left: calc(50% - 204px);
|
||
display: flex;
|
||
|
||
.guang {
|
||
background-image: url("../../assets/map/gangkou_index/tabguang.png");
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
width: 348px;
|
||
height: 32px;
|
||
position: absolute;
|
||
top: -23px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
.option {
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
color: #fff;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
line-height: 40px;
|
||
|
||
&.option0 {
|
||
background-image: url("../../assets/map/gangkou_index/tableft.png");
|
||
width: 139px;
|
||
height: 42px;
|
||
|
||
&.active {
|
||
background-image: url("../../assets/map/gangkou_index/tableft_on.png");
|
||
}
|
||
}
|
||
|
||
&.option1 {
|
||
background-image: url("../../assets/map/gangkou_index/tabmid.png");
|
||
width: 130px;
|
||
height: 40px;
|
||
|
||
&.active {
|
||
background-image: url("../../assets/map/gangkou_index/tabmid_on.png");
|
||
}
|
||
}
|
||
|
||
&.option2 {
|
||
background-image: url("../../assets/map/gangkou_index/tabright.png");
|
||
width: 139px;
|
||
height: 42px;
|
||
|
||
&.active {
|
||
background-image: url("../../assets/map/gangkou_index/tabright_on.png");
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.bottom_options {
|
||
width: 1000px;
|
||
height: 168px;
|
||
position: absolute;
|
||
z-index: 99;
|
||
bottom: 30px;
|
||
left: calc(50% - 350px);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.option {
|
||
position: relative;
|
||
cursor: pointer;
|
||
|
||
.img {
|
||
width: 100px;
|
||
height: 100px;
|
||
|
||
&:hover {
|
||
animation: slideY 0.5s;
|
||
}
|
||
}
|
||
|
||
.label {
|
||
background-image: url("../../assets/map/gangkou_index/title.png");
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
width: 100px;
|
||
height: 30px;
|
||
text-align: center;
|
||
line-height: 30px;
|
||
color: #fff;
|
||
font-size: 14px;
|
||
|
||
&.active {
|
||
background-image: url("../../assets/map/gangkou_index/title_on.png");
|
||
}
|
||
}
|
||
|
||
.item {
|
||
transform-origin: left;
|
||
display: flex;
|
||
position: absolute;
|
||
z-index: -1;
|
||
top: 8px;
|
||
left: 40px;
|
||
background-image: linear-gradient(to right, rgba(31, 62, 129, 0) 0%, rgba(31, 62, 129, 0.4) 50%, rgba(31, 62, 129, 0) 100%);
|
||
border: 1px solid;
|
||
border-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%) 1;
|
||
border-left: none;
|
||
border-right: none;
|
||
padding: 6px 50px;
|
||
|
||
.items {
|
||
padding: 0 20px;
|
||
text-align: center;
|
||
|
||
.suspension_img {
|
||
width: 60px;
|
||
height: 60px;
|
||
cursor: pointer;
|
||
|
||
&:hover {
|
||
animation: slideY 0.5s;
|
||
}
|
||
}
|
||
|
||
.suspension_label {
|
||
margin-top: -10px;
|
||
font-size: 12px;
|
||
width: 80px;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.right_options {
|
||
width: 80px;
|
||
position: absolute;
|
||
top: 170px;
|
||
right: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: end;
|
||
z-index: 99;
|
||
|
||
.option {
|
||
cursor: pointer;
|
||
position: relative;
|
||
|
||
&:hover {
|
||
animation: slideX 0.5s;
|
||
|
||
.tooltip {
|
||
opacity: 1;
|
||
right: 80px;
|
||
}
|
||
}
|
||
|
||
.tooltip {
|
||
transition: 0.5s;
|
||
opacity: 0;
|
||
background-image: url("../../assets/map/index/tooltip.png");
|
||
width: 100px;
|
||
height: 40px;
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
color: #fff;
|
||
font-size: 12px;
|
||
text-align: center;
|
||
line-height: 36px;
|
||
position: absolute;
|
||
right: 20px;
|
||
top: 20px;
|
||
}
|
||
|
||
img {
|
||
width: 80px;
|
||
height: 72px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.content_index {
|
||
position: absolute;
|
||
z-index: 99;
|
||
left: 35px;
|
||
top: 75px;
|
||
max-height: calc(100vh - 75px);
|
||
}
|
||
}
|
||
|
||
@keyframes slideX {
|
||
0% {
|
||
transform: translateX(0);
|
||
}
|
||
50% {
|
||
transform: translateX(-5px);
|
||
}
|
||
100% {
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
@keyframes slideY {
|
||
0% {
|
||
transform: translateY(0);
|
||
}
|
||
50% {
|
||
transform: translateY(-5px);
|
||
}
|
||
100% {
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
</style>
|
||
<style>
|
||
.cesium-viewer-toolbar, .cesium-viewer-fullscreenContainer, .cesium-infoBox-visible {
|
||
display: none !important;
|
||
}
|
||
</style>
|