<template>
<div id="cesiumContainer">
<header>
<transition
enter-active-class="animate__animated animate__fadeInDown"
leave-active-class="animate__animated animate__fadeOutUp"
>
<div v-if="gangkouActive" 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">
<!-- <navigation-->
<!-- v-if="!gangkouActive"-->
<!-- :to-center="toCenter"-->
<!-- :active.sync="gangkouActive"-->
<!-- :component-key.sync="componentKey"-->
<!-- @dragAreaEntity="dragAreaEntity"-->
<!-- />-->
<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-for="(item,index) in cfdBottomOptionsList" v-if="gangkouActive === '00004'">
<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 v-for="(item,index) in bottomOptionsList" v-if="gangkouActive !== '00004'">
<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>
</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'
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 anquanCfd from './components/anquanCfd.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'
import img4_0_1 from '../../assets/map/gangkou_index/point/icon27.png'
import img4_0_2 from '../../assets/map/gangkou_index/point/icon28.png'
import img4_0_3 from '../../assets/map/gangkou_index/point/icon29.png'
import img4_0 from '../../assets/map/gangkou_index/point/ico21.png'
let viewer = null
let drag = null
let ry_drag = null
var tiandituTk = 'e8a16137fd226a62a23cc7ba5c9c78ce'
var subdomains = ['0', '1', '2', '3', '4', '5', '6', '7']
const Cesium = window.Cesium
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkOWQ0MGYwMy0yODUwLTQ1YzktOGM4OC02MTMwY2UyZjNlMzQiLCJpZCI6MTY0NTUwLCJpYXQiOjE2OTM4OTU1Mjd9.1cC0sSzyj79LZv0ILNCcl0Mabw6hl8TNngFNFr7H8f4'
// ys使用
import axios from 'axios'
// md5加密
import md5 from 'md5'
const imosPlayer = window.imosPlayer
const iframeObj = null
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'
CORP_INFO_ID: 'f8da1790b1034058ae2efefd69af3284'
},
{
'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: '',
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: '1698584148364034050/UwbBQ/+/prop',
qos: 0
},
client: {
connected: false
},
receiveNews: '',
subscribeSuccess: false,
connecting: false,
retryTimes: 0,
// mqtt 结束
onePerLocArr: [],
iniOne: 0,
/* 一公司人员定位 结束*/
bottomClickDisable: false,
// 宇视视频播放
dialogVideoYs: true,
ysVideoInfo: {
vmip: '172.14.0.54',
name: 'loadmin',
passwd: '_Ab54321',
vmport: '7010',
linkPort: '8093',
VIIDPort: '8088'
}
}
},
mounted() {
this.initMap()
this.pointBoxCfd = loadMapBoxCfd()
this.pointBox = loadMapBox()
this.ysVideoInit()
},
methods: {
getRandom() {
function S4() {
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
}
return S4() + S4() + '-' + S4() + '-' + S4() + '-' + S4() + '-' + S4() + S4() + S4()
},
keepalive(token) {
// 第二套方案
requestFN(
'/map/loginOrKeepAlive',
{
}
).then((data) => {
})
},
ysVideoInit() {
// 第二套方案
var _this = this
requestFN(
'/map/loginOrKeepAlive',
{
}
).then((data) => {
const token = data.token
var nbsp = String.fromCharCode(160)
var arr = []
arr.length = 40
const str = arr.fill(nbsp).join('')
const voidPath = imosPlayer.getUniqueID()
window.voidPath = voidPath
document.title = document.title + str + new Date().getTime()
_this.keepalive(token)
setInterval(_this.keepalive, 30000, token)
window.videoWindow = 0
imosPlayer.setLinkPort('8093')
imosPlayer
.init({
ip: '172.14.0.54',
token: token,
title: document.title,
voidListenerPath: '\\' + voidPath
})
.then(async(resr) => {
if (resr.ErrCode === 0) {
// imosPlayer.setLiveNetLinkMode(liveNetProtocol, liveByMS)
// imosPlayer.setReplayNetLinkMode(replayNetProtocol, replayByMS)
// eslint-disable-next-line no-alert
console.info('登录成功')
} else {
// eslint-disable-next-line no-alert
console.info(resr.ErrMsg)
}
})
.catch((err) => {
console.error(err)
})
})
},
// keepalive(token) {
// axios({
// method: 'POST',
// url: config.ysurl + '/VIID/hadesadapter/user/keepalive',
// headers: {
// 'Content-Type': 'application/json; charset=utf8',
// Authorization: token
// },
// responseType: 'json'
// }).then((res) => { })
// },
// ysVideoInit() {
// var _this = this
// axios({
// method: 'POST',
// url: config.ysurl + '/VIID/login/v2', // protocol改为http://
// headers: {
// 'Content-Type': 'application/json; charset=utf8'
// },
// responseType: 'json'
// }).then((res) => {
// const AccessCode = res.data.AccessCode// res.body改为res.data
// const LoginSignature = md5(btoa(_this.ysVideoInfo.name) + AccessCode + md5(_this.ysVideoInfo.passwd))
// axios({
// method: 'POST',
// url: config.ysurl + '/VIID/login/v2',
// headers: {
// 'Content-Type': 'application/json; charset=utf8'
// },
// responseType: 'json',
// data: {
// UserName: _this.ysVideoInfo.name,
// AccessCode,
// LoginSignature
// }
//
// }).then((res) => {
// var nbsp = String.fromCharCode(160)
// var arr = []
// arr.length = 40
// const str = arr.fill(nbsp).join('')
// const voidPath = imosPlayer.getUniqueID()
// window.voidPath = voidPath
// document.title = document.title + str + new Date().getTime()
// var token = res.data.AccessToken
// window.token = res.data.AccessToken
// console.log(res)
// _this.keepalive(token)
// setInterval(_this.keepalive, 30000, token)
//
// window.videoWindow = 0
// imosPlayer.setLinkPort('8093')
// imosPlayer
// .init({
// ip: '172.14.0.54',
// token: token,
// title: document.title,
// voidListenerPath: '\\' + voidPath
// })
// .then(async(resr) => {
// if (resr.ErrCode === 0) {
// // imosPlayer.setLiveNetLinkMode(liveNetProtocol, liveByMS)
// // imosPlayer.setReplayNetLinkMode(replayNetProtocol, replayByMS)
//
// // eslint-disable-next-line no-alert
// console.info('登录成功')
// } else {
// // eslint-disable-next-line no-alert
// console.info(resr.ErrMsg)
// }
// })
// .catch((err) => {
// console.error(err)
// })
// })
// })
// },
initMap() {
viewer = new Cesium.Viewer('cesiumContainer', {
// terrainProvider: Cesium.createWorldTerrain()
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.toCenter()
this.leftDownAction()
this.dragAreaEntity(this.initPoint)
this.loadTilesetHandler()
ry_drag = new RyDragEntity({
viewer
})
// setInterval(() => {
// for (let i = 0; i < this.arr.length; i++) {
// if (!this.arr[i].property) {
// ry_drag.addEntity(this.arr[i])
// } else {
// this.arr[i].x += 0.0003 * Math.random()
// this.arr[i].y += 0.0001
// ry_drag.getPosition(this.arr[i])
// }
// }
// }, 1000)
},
loadTilesetHandler() {
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)
let id
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
const point_id = pick.id._monitoItems.data.id
if (point_type === '报警') {
viewer.dataSources.remove(this.myEntityCollection[pick.id._monitoItems.data.id])
delete this.poinEntity[pick.id._monitoItems.data.id]
}
if (point_type === '港口' || point_type === '分公司') {
id = pick.id.id
this.bubble(id)
}
if (this.gangkouActive === '00004' && point_type.indexOf('标记点') !== -1 && (point_id.substring(0, 1) === '0' || point_id.substring(0, 1) === '3' || point_id.substring(0, 3) === '1_2' || point_id.substring(0, 3) === '2_8')) {
// if (this.gangkouActive === '00004' && point_type.indexOf('标记点') !== -1 && point_id.substring(0, 1) === '0' || point_id.substring(0, 1) === '5') {
const { label, point_type, data_id, infoname, code } = pick.id._monitoItems.data
this.dialog.visible = true
this.dialog.title = label
this.dialog.type = point_type.substring(3) + this.gangkouActive
this.dialog.id = point_type.substring(3) === 'CAMERA' ? code : point_type.substring(3) === 'platcamera' ? code : data_id
this.dialog.infoname = infoname
return
}
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()
}
// var cartesian = this.getCatesian3FromPX(movement.position)
}, Cesium.ScreenSpaceEventType.LEFT_CLICK)
},
getCatesian3FromPX: function(px) {
if (viewer && px) {
var picks = viewer.scene.drillPick(px)
var cartesian = null
var 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
let 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) {
this.closeBubbles()
this.bubbles = new Bubble(Object.assign(this.poinEntity[id], {
viewer: viewer,
clickBranch: this.clickBranch,
clickPort: this.clickPort
}))
},
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)
if (id === '00003') {
this.addBranchPoint()
} else {
viewer.dataSources.removeAll()
this.poinEntity = {}
this.branchPoint = []
for (let i = 0; i < this.initPoint.length; i++) {
if (this.initPoint[i].CORP_INFO_ID === CORP_INFO_ID) {
const point = cloneDeep(this.initPoint[i])
point.id = CORP_INFO_ID
point.data_id = CORP_INFO_ID
point.point_type = '分公司'
point.type = '分公司'
point.position.height = 2000
this.dragAreaEntity([point])
this.branchPoint.push(point)
break
}
}
}
},
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) {
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) {
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.fwebsocket) {
// this.fwebsocket.close()
// }
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.onePerLocArr = []
this.perLocArr = []
this.clearMqttPoint()
if (this.gangkouActive === '00004') {
// if (this.fwebsocket) {
// this.fwebsocket.close()
// }
if (this.timer) {
clearInterval(this.timer)
}
if (this.cfdDIngweiTimer) {
clearInterval(this.cfdDIngweiTimer)
}
}
} else if (index === 5) {
this.pureMap = !this.pureMap
this.componentKey = Math.random()
this.bottomOptionsKey = Math.random()
this.bottomOptionsAnimationComplex = false
}
},
changeSceneMode(check) {
viewer.scene.mode = check ? Cesium.SceneMode.COLUMBUS_VIEW : Cesium.SceneMode.SCENE3D
},
toCenter(center = this.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()
},
bottomOptionsClick(index) {
if (this.bottomClickDisable) return
if (this.bottomOptionsIndex === index) {
this.bottomOptionsIndex = ''
// (this.gangkouActive === '00004' && index !== 1) && drag.addPolygon(this.gangkouActive)
} else {
this.bottomOptionsIndex = index
// (this.gangkouActive === '00004' && index !== 1) && viewer.entities.removeAll()
}
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.fwebsocket) {
// this.fwebsocket.close()
// }
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.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.fwebsocket) {
// this.fwebsocket.close()
// }
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('1698584148364034050/UwbBQ/')
}
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) => {
// console.info(message)
// if(this.intOne === 0){
// this.receiveNews = this.receiveNews.concat(message)
// console.log(`Received message ${message} from topic ${topic}`)
const item = JSON.parse(message)
// 将地图上剩余的点与最新的定位人员点进行对比 更新地图上已存在的点 新增地图上之前没有的点
const index = this.onePerLocArr.findIndex(item1 => {
return item1.id.toString() === item.deviceCode.toString()
})
const x = item.properties[2].value
const y = item.properties[3].value
const pointColor = this.isPointxyWithinTheArea(this.pointBox, x, y)
if (index !== -1) {
this.onePerLocArr[index].x = x
this.onePerLocArr[index].y = y
this.onePerLocArr[index].icon_type = 'img4_0' + pointColor
ry_drag.getPosition(this.onePerLocArr[index])
} else {
// const id = '4_0_' +item.deviceCode
const perLoc = {
id: item.deviceCode,
// name: item.realName,
x: x,
y: y,
icon_type: 'img4_0' + pointColor,
// infoname: item.realName,
data_id: item.deviceCode,
point_type: '标记点peoplePositionOne',
label: '人员定位',
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
}
// this.intOne++
// } else if(this.intOne < 5){
// this.intOne++
// } else {
// this.intOne = 0
// }
})
},
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, qos } = this.subscription
this.client.subscribe(topic, { qos }, (error, res) => {
if (error) {
console.log('Subscribe to topics error', error)
return
}
this.subscribeSuccess = true
console.log('Subscribe to topics res', res)
})
},
// 取消订阅
doUnSubscribe() {
const { topic } = this.subscription
this.client.unsubscribe(topic, 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('消息接收')
var msg = _this.unzip(message.data)
// const decodedStr = decodeURIComponent(msg) // 进行解码
// console.info(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 }) {
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()
}
}
}
</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>