<!--
* @Description: 管网分布专题
* @Author: 王晓颖
* @Date: 2021-04-13
-->
<template>
<layout-map>
<!--地图-->
<Map :url="configUrl" @onload="onMapload" >
<supply-layer ref="supply" :show="supplyShow"/>
<weather-layer ref="weather" :show="weatherShow"/>
<disaster-layer ref="disaster" :show="disasterShow"/>
<hca-heat-layer ref="hcaHeat" :show="hcaShow"/>
<threat-layer ref="constructionThreat" :show="constructionThreatShow" type="construction"/>
<threat-layer ref="sinkThreat" :show="sinkThreatShow" color="#2C06A1" type="sinkThreat"/>
<threat-layer ref="waterThreat" :show="waterThreatShow" color="#1FFEE6" type="waterThreat"/>
</Map>
<!--地图切换按钮-->
<div class="map-btn-group">
<!--<button2 :select="routeShow" name="巡检人员" icon="icon-people" @click="showRoute(routeShow)"/>-->
<button2 v-model="supplyShow" name="供应情况" icon="icon-station2" @click="showSupply(supplyShow)"/>
<button2 :select="station2Show" name="站场" icon="icon-station2" @click="showStation2(station2Show)"/>
<!--<button2 :select="valveChamberShow" name="阀室" icon="valve" @click="showValveChamber(valveChamberShow)"/>-->
<button2 :select="weatherShow" name="气象预报" icon="icon-disaster" @click="showWeather(weatherShow)"/>
<button2 :select="disasterShow" name="气象预警" icon="icon-disaster" @click="showDisaster(disasterShow)"/>
<button2 :select="hcaShow" name="高后果区" icon="icon-heat" @click="showHca(hcaShow)"/>
<button2 :select="constructionThreatShow" name="第三方施工" icon="icon-construction" @click="showConstructionThreat(constructionThreatShow)"/>
<button2 :select="sinkThreatShow" name="塌陷隐患" icon="icon-sink" @click="showSinkThreat(sinkThreatShow)"/>
<button2 :select="waterThreatShow" name="水保隐患" icon="icon-water" @click="showWaterThreat(waterThreatShow)"/>
</div>
<threat-dialog ref="threatDialog"/>
<high-consequence-dialog ref="hcaDialog"/>
</layout-map>
</template>
<script>
import Map from '@/components/Map/MarsMap.vue'
import 'mars3d-heatmap'
import axios from 'axios'
import Button2 from '@/components/Button/button2'
import LayoutMap from '../../layout/layoutMapSimple'
import ThreatDialog from './components/threatDialog'
import HighConsequenceDialog from './components/highConsequenceDialog'
import { getEarthquakeList, getRoutesData } from '@/api/pipe'
import { getToday } from '@/utils/dateutils'
import SupplyLayer from '../../components/Map/components/supplyLayer'
import Weather from '../../components/weather/weather'
import WeatherLayer from '../../components/Map/components/weatherLayer'
import DisasterLayer from '../../components/Map/components/disasterLayer'
import HcaHeatLayer from '../../components/Map/components/hcaHeatLayer'
import ThreatLayer from '../../components/Map/components/threatLayer'
export default {
name: 'MapOverview2',
components: {
ThreatLayer,
HcaHeatLayer,
DisasterLayer,
WeatherLayer,
Weather,
SupplyLayer,
HighConsequenceDialog,
ThreatDialog,
LayoutMap,
Map,
Button2
},
data() {
return {
map: null, // 地图
configUrl: 'static/config/config.json',
alpha: 100, // 透明度
index: 1, // 缩放倍数
underground: null, // ？
supplyShow: false, // 显示供应情况
routeShow: true, // 显示巡检人员
station2Show: false, // 站场
valveChamberShow: false, // 阀室
liquidFactoryShow: false, // 液化工厂
hcaShow: false, // 显示高后果区
stationShow: true, // 显示管理处
weatherShow: false, // 显示天气预报
waterThreatShow: false, // 显示水保隐患位置
constructionThreatShow: false, // 显示第三方施工位置
sinkThreatShow: false, // 显示塌陷隐患位置
disasterShow: false, // 显示气象灾害图层
earthquakeShow: false,
cameraShow: false,
boardData: {
name: '巡检人员',
value: 6
}, // 统计版展示数据
manageStations: [],
station2: [], // 站场列表
valveChambers: [], // 阀室
liquidFactory: [], // 液化工厂
routeData: [], // 巡检人员数据
highConsequence: [], // 高后果区列表
constructionThreatArea: [], // 第三方施工隐患列表
waterThreatArea: [], // 水保隐患列表
sinkThreatArea: [], // 塌陷列表
supplyLayer: null, // 供应图层
stationLayer: null, // 管理站图层
hcaLayer: null, // 高后果区图层
constructionThreatLayer: null, // 第三方施工分布图层
waterThreatLayer: null, // 水保隐患分布图层
sinkThreatLayer: null, // 塌陷隐患分布图层
factoryModelLayer: null, // 液化工厂
station2Layer: null, // 站场
valveChamberLayer: null, // 阀室
disasterLayer: null, // 气象灾害图层
earthquakeLayer: null, // 地震图层
cameraLayer: null, // 监控图层
pointColorArr: ['#f33349', '#f79a2c', '#f2fa19', '#95e40c', '#1ffee6'],
routeLayer: null, // 巡检图层
timer: null, // 轮训定时器
clock: 86400 // 间隔时间
}
},
mounted() {
window.addEventListener('message', (event) => {
console.log(event)
var origin = event.origin
console.log(origin)
var data = event.data
console.log(data)
// 如果是数组
if (Array.isArray(data)) {
const item = data[0]
if (item.value === '高后果区数量') {
this.showHca()
} else if (item.value === '第三方施工数量') {
this.showConstructionThreat()
} else if (item.value === '水保隐患数量') {
this.showWaterThreat()
} else if (item.value === '塌陷数量') {
this.showSinkThreat()
} else if (item.chartType === 'pill' && item.wdName === '区域') {
this.showSupplyAndOpenTooltip(item.value)
}
}
if (data.type === 'MeassageEvent') {
}
}, false)
// this.openIframeListener()
},
methods: {
// 地图构造完成回调
onMapload(map) {
// 以下为演示代码
this.map = map
// 背景透明
this.map._viewer.scene.backgroundColor = new this.Cesium.Color(0.0, 0.0, 0.0, 0.0)
this.map._viewer.scene.globe.baseColor.alpha = 0
this.supplyShow = true
this.refreshData()
},
// 添加iframe监听
openIframeListener() {
},
// 添加巡线人员位置
addRoute() {
const { mars3d, Cesium } = this
if (this.routeLayer) {
this.map.removeLayer(this.routeLayer)
}
// 创建DIV数据图层
var graphicLayer = new mars3d.layer.DivLayer()
this.routeLayer = graphicLayer
this.map.addLayer(graphicLayer)
graphicLayer.on(mars3d.EventType.click, event => {
console.log('监听layer，单击了矢量对象', event)
})
graphicLayer.bindPopup(event => {
const route = event.graphic.attr
const html =
'<div>姓名：' + route.name +
'<br/>电话：' + route['phone'] +
'<br/>岗位：' + route['duty'] +
'<br/>站名：' + route['unitname'] +
'<br/>时间：' + route.locationdate + '</div>'
return html
})
const date = getToday()
getRoutesData(date).then((res) => {
if (res.status === 200) {
const data = res.data.map(item => {
return {
name: item['WD60_03'],
lng: parseFloat(item['WD60_05']),
lat: parseFloat(item['WD60_06']),
locationdate: item['WD60_04'],
time: new Date(item['WD60_04']),
duty: item['WD60_11'],
sex: item['WD60_09'],
phone: item['WD60_10'],
idcard: item['WD60_12'],
unitname: item['WD60_08']
}
})
debugger
this.routeData = []
// 遍历所有数据，去除重复数据
for (const route of data) {
// 去routeData里查找是否有同一个人
const result = this.routeData.findIndex(item => item.name == route.name && item.phone == route.phone)
if (result === -1) { // 查找不到直接添加
this.routeData.push(route)
} else { // 查找到，对比时间，时间大则替换
if (this.routeData[result].time < route.time) {
this.routeData.splice(result, 1, route)
}
}
}
this.boardData.value = this.routeData.length
for (const route of this.routeData) {
const graphic = new mars3d.graphic.DivGraphic({
position: [route.lng, route.lat, 10],
style: {
html: '<img src="static/images/map/pe02.gif" style="width:20px;height:20px;" ></img>',
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 2000000), // 按视距距离显示
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.CENTER,
attr: route
},
attr: route,
pointerEvents: true // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
})
graphicLayer.addGraphic(graphic)
}
}
})
},
// 管理处
addStation() {
const { mars3d } = this
var graphicLayer = new mars3d.layer.GraphicLayer()
this.stationLayer = graphicLayer
this.map.addLayer(graphicLayer)
axios.get('static/config/manageStation.json').then((res) => {
res = res.data
if (res.code === 200) {
this.manageStations = res.data
for (const station of this.manageStations) {
const graphic = new mars3d.graphic.ModelEntity({
name: station.name,
position: [station.x, station.y, 0],
style: {
url: 'static/gltf/output/guanlizhan.gltf',
scale: 5,
heading: 90,
minimumPixelSize: 30
},
tooltip: station.name
})
graphicLayer.addGraphic(graphic)
}
}
})
},
// 站场
addStation2() {
const { mars3d } = this
var graphicLayer = new mars3d.layer.GraphicLayer()
this.station2Layer = graphicLayer
this.map.addLayer(graphicLayer)
axios.get('static/config/station.json').then((res) => {
res = res.data
if (res.code === 200) {
this.station2 = res.data
for (const station of this.station2) {
const graphic = new mars3d.graphic.ModelEntity({
name: station.name,
position: [station.x, station.y, 0],
style: {
url: 'static/gltf/output/zhanchang.gltf',
scale: 5,
heading: 90,
minimumPixelSize: 30
},
tooltip: station.name
})
graphicLayer.addGraphic(graphic)
}
}
})
},
// 阀室
addValveChamber() {
const { mars3d } = this
var graphicLayer = new mars3d.layer.GraphicLayer()
this.valveChamberLayer = graphicLayer
this.map.addLayer(graphicLayer)
axios.get('static/config/valveChamber.json').then((res) => {
res = res.data
if (res.code === 200) {
this.valveChambers = res.data
for (const station of this.valveChambers) {
const graphic = new mars3d.graphic.ModelEntity({
name: station.name,
position: [station.x, station.y, 0],
style: {
url: 'static/gltf/output/fashi.gltf',
scale: 4,
heading: 0,
minimumPixelSize: 15
},
tooltip: station.name
})
graphicLayer.addGraphic(graphic)
}
}
})
},
// 液化工厂三维模型
addFactoryModel() {
const { mars3d } = this
axios.get('static/config/liquidFactory.json').then((res) => {
res = res.data
if (res.code === 200) {
// 获取液化工厂数据
this.liquidFactory = res.data[0].data
const factoryModelLayer = new mars3d.layer.ModelLayer({
name: '液化工厂',
url: 'static/gltf/output/yehuagongchang.gltf',
style: {
scale: 3,
heading: 0,
minimumPixelSize: 30,
clampToGround: true
},
positions: this.liquidFactory.map(item => {
return { lng: parseFloat(item.value[0]), lat: parseFloat(item.value[1]), alt: 0 }
})
})
this.factoryModelLayer = factoryModelLayer
this.map.addLayer(factoryModelLayer)
}
})
},
// 添加地震
addEarthquake() {
const { mars3d, Cesium } = this
if (this.earthquakeLayer) {
this.map.removeLayer(this.earthquakeLayer)
}
const graphicLayer = new mars3d.layer.GraphicLayer()
this.earthquakeLayer = graphicLayer
this.map.addLayer(graphicLayer)
const date = getToday()
getEarthquakeList(date).then((res) => {
if (res.data.length === 0) {
this.$message.info('今日无地震')
} else {
const data = res.data.map(item => {
return {
name: item['WD53_09'],
lng: parseFloat(item['WD53_05'].trim()),
lat: parseFloat(item['WD53_06'].trim()),
level: item['WD53_07'].trim(),
deep: item['WD53_08'].trim(),
time: item['WD53_04'].trim()
}
})
for (const item of data) {
const img = 'static/images/map/earthquake.png'
const graphic = new mars3d.graphic.BillboardEntity({
name: '地震',
position: [item.lng, item.lat, 0],
style: {
image: img,
width: 70,
height: 70,
scale: 0.5,
clampToGround: true,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM
}
})
var html = ` <div class="popup-win"><span class="title">${item.name}</span><br/>
<div style="color:#FFB861">震级：${item.level} 级</div>
<div style="color:#FFB861">震源深度：${item.deep} km</div>
<div style="color:#63AEFF">时间：${item.time}</div>
</div>`
graphic.bindTooltip(html, { anchor: [0, -20] }).openTooltip()
graphicLayer.addGraphic(graphic)
}
}
})
},
showSupplyAndOpenTooltip(currentCity) {
if (!this.supplyShow) {
this.supplyShow === true
this.weatherShow = false
this.hcaShow = false
this.constructionThreatShow = false
this.sinkThreatShow = false
this.waterThreatShow = false
this.disasterShow = false
}
if (currentCity) {
this.$refs.supply.openTooltip(currentCity + '市')
}
},
// 显示供应
showSupply() {
this.supplyShow = !this.supplyShow
if (this.supplyShow) {
this.weatherShow = false
this.hcaShow = false
this.constructionThreatShow = false
this.sinkThreatShow = false
this.waterThreatShow = false
this.disasterShow = false
}
},
// 气象控制
showWeather() {
this.weatherShow = !this.weatherShow
if (this.weatherShow) {
this.supplyShow = false
this.hcaShow = false
this.constructionThreatShow = false
this.sinkThreatShow = false
this.waterThreatShow = false
this.disasterShow = false
}
},
// 是否显示高后果区
showHca(show) {
this.hcaShow = !this.hcaShow
if (this.hcaShow) {
this.supplyShow = false
this.weatherShow = false
this.disasterShow = false
}
},
// 是否显示水保隐患
showWaterThreat(show) {
this.waterThreatShow = !this.waterThreatShow
if (this.waterThreatShow) {
this.supplyShow = false
this.weatherShow = false
this.disasterShow = false
}
},
// 是否显示第三方施工
showConstructionThreat(show) {
this.constructionThreatShow = !this.constructionThreatShow
if (this.constructionThreatShow) {
this.supplyShow = false
this.weatherShow = false
this.disasterShow = false
}
},
// 是否显示塌陷
showSinkThreat(show) {
this.sinkThreatShow = !this.sinkThreatShow
if (this.sinkThreatLayer) {
this.supplyShow = false
this.weatherShow = false
this.disasterShow = false
}
},
// 显示管理处
showStation(show) {
// 现在正在显示
if (show) { // 移除
this.stationShow = false
this.map.removeLayer(this.stationLayer, true)
this.stationLayer = null
// this.map.removeLayer(this.graphicLayer, true)
} else {
this.stationShow = true
this.addStation()
// this.addStationDiv()
}
},
// 显示巡检人员
showRoute(show) {
if (show) { // 移除
this.routeShow = false
this.map.removeLayer(this.routeLayer, true)
this.routeLayer = null
} else {
this.routeShow = true
this.addRoute()
}
},
// 显示站场
showStation2(show) {
if (show) { // 移除
this.station2Show = false
this.map.removeLayer(this.station2Layer, true)
this.station2Layer = null
} else {
this.station2Show = true
this.addStation2()
}
},
// 显示阀室
showValveChamber(show) {
if (show) { // 移除
this.valveChamberShow = false
this.map.removeLayer(this.valveChamberLayer, true)
this.valveChamberLayer = null
} else {
this.valveChamberShow = true
this.addValveChamber()
}
},
// 显示液化工厂
showLiquidFactory(show) {
if (show) { // 移除
this.liquidFactoryShow = false
this.map.removeLayer(this.factoryModelLayer, true)
this.factoryModelLayer = null
} else {
this.liquidFactoryShow = true
this.addFactoryModel()
}
},
// 灾害
showDisaster() {
this.disasterShow = !this.disasterShow
if (this.disasterShow) {
this.supplyShow = false
this.hcaShow = false
this.constructionThreatShow = false
this.sinkThreatShow = false
this.waterThreatShow = false
this.weatherShow = false
}
},
// 显示地震
showEarthquake(show) {
if (show) { // 移除
this.earthquakeShow = false
this.map.removeLayer(this.earthquakeLayer, true)
this.earthquakeLayer = null
} else {
this.earthquakeShow = true
this.addEarthquake()
}
},
// 显示摄像头
showCamera(show) {
console.log('func showCamera:' + show)
if (show) { // 移除
this.cameraShow = false
this.map.removeLayer(this.cameraLayer, true)
} else {
this.cameraShow = true
this.addCamera()
}
console.log('func showCamera over:' + this.cameraShow)
},
refreshData() {
this.timer = setInterval(() => {
console.log('refreshData')
if (this.routeLayer) {
this.addRoute()
}
if (this.earthquakeLayer) {
this.this.addEarthquake()
}
if (this.disasterLayer) {
this.addDisaster()
}
if (this.hcaLayer) {
this.addHcaPosition()
}
}, this.clock * 1000)
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.map-btn-group{
position: absolute;
top:120px;
left:50%;
transform: translateX(-50%);
display: flex;
justify-content: center;
}
</style>
