<!--suppress ALL -->
<template>
<div style="overflow: hidden;height: 100%" class="map-zq">
<div id="mars3dContainer" v-loading="mapLoading" class="mars3d-container" />
<div class="cover">
<div v-for="(item,index) in layerName" :key="item" class="cover-item">
<span v-if="index===1"><img :src="'/../../../static/images/'+layerName[index]+'.png'" style="width: 17px;height:17px"></span>
<span v-else-if="index===0" style="color: #FF7FE9;font-weight: 900">==</span>
<span v-else><img :src="'/../../../static/images/标识器.png'" style="width: 17px;height:17px"></span>
<span style="position: absolute;left: 50px">{{ item }}</span>
</div>
</div>
<div v-if="loadToken" class="overview-map-container">
<!--搜索框-->
<map-search-comp :list="resultList" placeholder="点位编号/名称/位置" style="background: #00000000" @search="search" @change-page="searchPageChange" @click-item="searchItemClick" @clear="clearSearch" />
<div style="width: 230px; position: absolute;top:0px; right: 10px;display: flex">
<i class="el-icon-map-location circle_btn" @click="setCenter(center)" />
<el-slider v-model="alpha" style="width: 180px;margin-left: 10px" />
</div>
<!--报警列表-->
<alarm-list :show="showAlarm" :data="alarmList" @row-click="alarmRowClick" />
<!--工具箱-->
<tool-box style="position: absolute; width:300px;top:25px;right: 0px" :show="!loading" :layers="layers" :layer-checked="checkedLayer" :tool-menu="menus.menuList" @change-base-map="changeBaseMap" @layer-change="filterLayer" @click-menu="clickMenu" @close-menu-pop="closeAllPopup" />
<!--坐标定位窗口-->
<popup-location ref="popupLocation" :show="menus.locationWindowShow" @search="setCenter" @picker="pickerPosition" @close="closePopupLocation" />
</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import { getWellType } from '@/api/well/well'
import { getWellList, getWellInfo, getAlarmsNow, getWellAlarms } from '@/api/overview/wellOverview'
import { toPixel, toLngLat, toSize } from '@/components/Amap/utils/convert-helper'
import AlarmInfoWindow from './components/infoWindowAlarm'
import WellInfoWindow from './components/infoWindowWell'
import AlarmList from './components/alarmList'
import Vue from 'vue'
import ToolBox from '@/views/overview/components/toolBox'
import PopupDataFilter from '@/views/overview/components/popupDataFilter'
import PopupLocation from '@/views/overview/components/popupLocation'
import MapSearchComp from '@/views/overview/components/mapSearchComp'
import { RSAencrypt } from '@/utils/security'
import axios from 'axios'
// import 'cesium/Source/Widgets/widgets.css'// 导入必须的样式表
// import 'cesium/Source/Cesium'// 导入必须的样式表
// var Cesium = require('../../../node_modules/cesium/Source/Cesium')
var Cesium = require('../../../node_modules/mars3d-cesium/Build/Cesium/Cesium')
import 'mars3d/dist/mars3d.css'
import 'mars3d/dist/mars3d.js'
import * as mars3d from 'mars3d'
import store from '@/store'
import { breadcrumb } from '@/settings'
let layer2021 = null
let layer2020 = null
let zrbs_layer = null
let sjbs_layer = null
const alarm_layer = null
const rqline_layer = []
let rqpoint_layer = null
let rqpoint3D_layer = null
let underground = null
export default {
name: 'Overview3D',
components: { MapSearchComp, PopupLocation, PopupDataFilter, ToolBox, AlarmList },
data() {
return {
layerName: ['燃气管线', '燃气附属物', '中燃燃气标识器', '圣井燃气标识器'],
baseLayer: 'gaode_vec', // 底图图层
layers: [{ id: 'well', name: '井图层', children: [] }, { id: 'line', name: '管线图层', children: [] }, { id: 'dev', name: '设备图层', children: [] }], //, { id: 'alarm', name: '报警图层' }], // 图层列表
checkedLayer: [], // 选中的图层
center: ['', ''], // 地图中心
showLine: true,
showModel: true,
// center: [this.$store.getters.lng, this.$store.getters.lat], // 地图中心
type: this.baseConfig.showPointType, // 加载数据方式：massMarkers海量点或cluster聚合点
refreshType: this.baseConfig.refreshType, // 刷新数据方式：clock定时器或websocket推送
searchResultSize: [24, 30],
searchResultOffset: [-12, -30],
mapLoading: true,
searchResultIcon: require('@/assets/overview/pure-position-icon.png'), // 报警图标
showAlarm: true, // 是否显示报警
alpha: 80,
toolShow: false, // 工具栏是否显示
menus: {
menuList: [
// { icon: 'search', menu: 'dataFilter', name: '数据筛选' },
{ icon: 'coordinate', menu: 'location', name: '坐标定位' }
],
dataFilterWindowShow: false, // 数据筛选窗口是否显示
locationWindowShow: false // 坐标定位窗口是否显示
}, // 工具栏菜单
listQuery: {
keywords: '', // 关键字
wellType: '', // 点位类型
deptid: '' // 组织机构
}, // 筛选条件
count: 30, // 倒计时显示时间
clock: null, // 计时器
showWellType: false, // 是否显示点位类型下拉,默认边上
wellTypeList: [], // 点位类型列表
alarmList: [], // 显示报警列表
alarmWells: [], // 报警井列表
resultList: [], // 搜索结果列表
searchMarkers: [], // 当前搜索页展示marker集合
latestAlarmTime: '', // 列表中最新报警事件
alarmFirstAmount: true, // 是否初次加载报警
firstAmount: true, // 是否第一次加载井数据
loading: true, // 加载图标是否显示
markers: [], // 所有井的点原始数据
tempMarker: null,
bloomEffect: null,
loadToken: false,
isAll: true
}
},
computed: {
...mapGetters([
'needRefresh',
'bodyHeight'
])
},
watch: {
alpha(val) {
// window.viewer.imageryLayers._layers.forEach(layer => {
// layer.alpha = val / 100 // 我们可以设置为0
// })
window.map.basemap.opacity = val / 100
underground.alpha = val / 100
if (window.map.level >= 19 && this.alpha < 90 && this.showModel) {
rqpoint3D_layer.show = true
} else {
rqpoint3D_layer.show = false
}
},
needRefresh(val) { // 需要刷新报警
if (val) this.refreshAlarm()
},
'menus.locationWindowShow'(val) { // 打开弹窗设置默认中心，关闭弹窗清空屏幕
if (val) {
this.$refs.popupLocation.setQuery(this.center)
} else {
// window.map.remove(this.tempMarker)
}
}
},
created() {
// this.fetchWellType()
},
mounted() {
this.$nextTick(() => {
this.windowResize(window.innerHeight, window.innerWidth)
this.initmars3d()
this.resultList = []
})
},
beforeDestroy() {
this.$store.dispatch('settings/changeSetting', {
key: 'breadcrumb',
value: true
})
this.$store.dispatch('settings/changeSetting', {
key: 'tagsView',
value: true
})
if (this.clock) {
clearInterval(this.clock)
this.clock = null
}
},
beforeCreate: function() { // 从后台获取系统配置，根据配置判断是否加载验证码控件
this.$store.dispatch('settings/changeSetting', {
key: 'breadcrumb',
value: false
})
this.$store.dispatch('settings/changeSetting', {
key: 'tagsView',
value: false
})
this.$store.dispatch('GetConfig').then(() => {
this.$message.success('连接服务器成功')
this.handleLogin()
}).catch((e) => {
// this.$message.error('连接服务器失败')
})
},
methods: {
windowResize(height, width) {
// 查找header高度
const el_header = document.getElementById('app-header')
let bodyHeight = height - (el_header ? el_header.clientHeight : 56)
if (store.getters.tagsView) {
const el_tagsView = document.getElementById('tags-view-container')
bodyHeight -= el_tagsView ? el_tagsView.clientHeight : 34
}
if (breadcrumb) {
const el_navbar = document.getElementsByClassName('navbar')
bodyHeight -= el_navbar ? el_navbar[0].clientHeight : 48
}
// 减去2个padding
bodyHeight -= 5
store.dispatch('settings/ChangeHeight', bodyHeight)
},
// 点击登录按钮
handleLogin() {
const loginForm = {
sid: this.$store.getters.sid,
username: 'sykb',
password: RSAencrypt('111111')
}
this.$store.dispatch('Login', loginForm).then(() => {
// this.$message.success('登录成功')
this.fetchWellType()
this.loadToken = true
}).catch(() => {
})
},
initBaseMap() {
const url2021 = 'http://172.20.90.108:8081/geoesb/proxy/5a44607b2e814658b463b76f9675bd3e/9bf164775ad94a18a5324f0eb681deea'
const url2020 = 'http://172.20.90.108:8081/geoesb/proxy/4fb75f7491c94356a9dd58a44d0dc57b/9bf164775ad94a18a5324f0eb681deea'
var layerProvider = new Cesium.WebMapTileServiceImageryProvider({
url: url2021 + '/Layers/default/Custom_Layers/{TileMatrix}/{TileRow}/{TileCol}.png',
layer: 'wzmap_map',
style: 'default',
tileMatrixSetID: 'default028mm',
format: 'image/png',
tilingScheme: new Cesium.GeographicTilingScheme(),
tileMatrixLabels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21']
})
layer2021 = window.viewer.imageryLayers.addImageryProvider(layerProvider)
layer2021.alpha = this.alpha / 100
layerProvider = new Cesium.WebMapTileServiceImageryProvider({
url: url2020 + '?service=WMTS&request=GetTile&version=1.0.0&layer=JN2020DOM_05M&style=default&format=image/png&TileMatrixSet=CustomCRS4490ScaleJN2020DOM_05M&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}',
layer: 'wzmap_map',
style: 'default',
tileMatrixSetID: 'default028mm',
format: 'image/png',
tilingScheme: new Cesium.GeographicTilingScheme(),
tileMatrixLabels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21']
})
layer2020 = window.viewer.imageryLayers.addImageryProvider(layerProvider)
layer2020.alpha = this.alpha / 100
layer2021.show = false
},
async initmars3d() {
axios.get('./config/mars3dConfig.json').then((result) => {
this.center = [result.data.scene.center.lng, result.data.scene.center.lat]
this.initMars3dMap(result.data)
})
},
// 初始化放这里
async initMars3dMap(mapOptions) {
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0N2E2M2ZmYi1iMDhjLTQwN2QtODZmOC0zNDZjNTMxYjgyNWEiLCJpZCI6MzY5MDMsImlhdCI6MTYwNzMzMTE2Nn0.5xsFCB0dxpcNGUkJOEpsVhUW9bf66XZIwV3hkZl09UI'
// window.viewer = new Cesium.Viewer('mars3dContainer', {
// geocoder: false, // 是否显示地名查找控件
// infoBox: false,
// animation: false, // 是否显示动画控件(左下方那个)
// timeline: false, // 是否显示时间线控件
// shadows: false, // 阴影是否被太阳投射
// showldAnimate: true, // 让场景中的动画自动播放
// sceneModePicker: false, // 是否显示投影方式控件
// fullscreenButton: false, // 全屏按钮不显示
// homeButton: false,
// navigationHelpButton: false, // 帮助按钮
// baseLayerPicker: false,
// imageryProvider: new Cesium.TileMapServiceImageryProvider({
// url: Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII')
// })
// })
// window.viewer.imageryLayers._layers[0].show = false
// window.viewer.scene.globe.baseColor = Cesium.Color.WHITE
// window.viewer._cesiumWidget._creditContainer.style.display = 'none' // 去除版权信息
// window.map = new mars3d.Map(window.viewer, mapOptions)
window.map = new mars3d.Map('mars3dContainer', mapOptions)
window.map.basemap = 1113
// this.initBaseMap()
window.map.scene.screenSpaceCameraController.enableCollisionDetection = false
// 设置鼠标
window.map.scene.screenSpaceCameraController.tiltEventTypes = [Cesium.CameraEventType.RIGHT_DRAG]
window.map.scene.screenSpaceCameraController.zoomEventTypes = [Cesium.CameraEventType.MIDDLE_DRAG, Cesium.CameraEventType.WHEEL, Cesium.CameraEventType.PINCH]
window.map.scene.screenSpaceCameraController.rotateEventTypes = [Cesium.CameraEventType.LEFT_DRAG]
underground = new mars3d.thing.Underground({ alpha: this.alpha / 100 })
window.map.addThing(underground)
// this.bloomEffect = new mars3d.effect.BloomEffect({
// enabled: true
// })
// map.addEffect(this.bloomEffect)
// window.map.basemap.opacity = this.alpha / 100
// 崩溃后刷新
window.map.on(mars3d.EventType.renderError, function(event) {
window.location.reload()
})
const that = this
window.map.on(mars3d.EventType.load, function(event) {
that.initLine()
that.initPoint()
window.map.on(mars3d.EventType.cameraChanged, that.cameraChange, that)
})
},
async initLine() {
// 三维管线
const wfsLayer3D = new mars3d.layer.ArcGisWfsLayer({
enablePickFeatures: false,
name: '燃气管线',
url: this.baseConfig.arcgisUrl + '3',
minimumLevel: 19,
symbol: {
type: 'polylineVolumeP',
styleOptions: {
color: '#FF7FE9',
shape: 'pipeline',
radius: 0.1
},
callback: function(attr, styleOpt) {
var val = { attr }.attr
const height = -(Number(val.起始埋深) + Number(val.终止埋深)) / 2
return { setHeight: height, height }
}
},
popup: 'all'
})
window.map.addLayer(wfsLayer3D)
rqline_layer.push(wfsLayer3D)
// 二维管线
const wfsLayer = new mars3d.layer.ArcGisWfsLayer({
enablePickFeatures: false,
name: '燃气管线',
url: this.baseConfig.arcgisUrl + '3',
// maximumLevel: 19,
symbol: {
type: 'polylineC',
styleOptions: {
color: '#FF7FE9',
width: 3,
hasShadows: false
}
},
popup: 'all'
})
window.map.addLayer(wfsLayer)
rqline_layer.push(wfsLayer)
},
createPointLayer(layer, index, image, condition) {
if (layer !== null) window.map.removeLayer(layer)
const queryServer = new mars3d.query.QueryArcServer({
url: this.baseConfig.arcgisUrl + index,
popup: 'all',
pageSize: 5000
})
layer = new mars3d.layer.GeoJsonLayer({
onCreateGraphic: function(options) {
const points = options.position // 坐标
const attr = options.attr // 属性信息
const primitive = new mars3d.graphic.BillboardPrimitive({
allowDrillPick: true,
attr: attr,
id: attr.编号,
position: points,
style: {
image: image,
scale: 0.6,
hasPixelOffset: true,
pixelOffsetY: -10,
scaleByDistance: true,
scaleByDistance_far: 20000,
scaleByDistance_farValue: 0.6,
scaleByDistance_near: 0,
scaleByDistance_nearValue: 1.4,
clampToGround: true,
highlight: { type: 'click', image: '../static/images/high-marker.png' }
}
})
layer.addGraphic(primitive)
},
popup: 'all'
}).bindPopup(function(event) {
return mars3d.Util.getTemplateHtml({ template: 'all', attr: event.graphic.attr || {}})
}).on(mars3d.EventType.click, function(event) {
if (window.map.camera.positionCartographic.height > 5000) {
window.map.flyToPoint(event.graphic.position, {
radius: 5000, // 距离目标点的距离
duration: 1
})
}
})
window.map.addLayer(layer)
queryServer.query({
where: condition,
success: (result) => {
if (result.count === 0) {
this.$message.warning('未查询到相关记录！')
}
layer.load({ data: result.geojson })
},
error: (error, msg) => {
this.$message.error('服务访问错误,' + error)
}
})
return layer
},
async initPoint(condition = '') {
this.mapLoading = true
const rq = condition === '' ? '1<>1' : "编号 LIKE '%" + condition + "%' or 附属物名称 LIKE '%" + condition + "%' or 所属道路 LIKE '%" + condition + "%'"
const bsq = condition === '' ? '1<>1' : "编号 LIKE '%" + condition + "%' or 对象名称 LIKE '%" + condition + "%' or 所属道路 LIKE '%" + condition + "%'"
rqpoint_layer = this.createPointLayer(rqpoint_layer, '2', '../static/images/燃气附属物.png', rq)
zrbs_layer = this.createPointLayer(zrbs_layer, '0', '../static/images/标识器.png', bsq)
sjbs_layer = this.createPointLayer(sjbs_layer, '1', '../static/images/标识器.png', bsq)
const that = this
rqpoint_layer.on(mars3d.EventType.load, function(event) {
that.mapReady()
that.mapLoading = false
})
if (rqpoint3D_layer !== null) window.map.removeLayer(rqpoint3D_layer)
const queryPointserver = new mars3d.query.QueryArcServer({
url: this.baseConfig.arcgisUrl + '2',
popup: 'all',
pageSize: 5000
})
rqpoint3D_layer = new mars3d.layer.GraphicLayer().bindPopup(function(event) {
const attr = event.graphic.attr || {}
return mars3d.Util.getTemplateHtml({ template: 'all', attr: attr })
})
rqpoint3D_layer.show = false
window.map.addLayer(rqpoint3D_layer)
queryPointserver.query({
where: rq,
success: (result) => {
if (result.count === 0) {
this.$message.warning('未查询到相关记录！')
}
const well = []
const box = []
result.geojson.features.forEach(item => {
item.properties.附属物编码 === 5001 ? well.push({
position: [item.geometry.coordinates[0], item.geometry.coordinates[1], 0],
style: {
scaleX: 1,
scaleY: 1,
scaleZ: item.properties.井深
},
attr: item.properties
}) : box.push({
position: [item.geometry.coordinates[0], item.geometry.coordinates[1], 0],
style: { scale: 0.1 },
attr: item.properties
})
})
let modelCombine = new mars3d.graphic.ModelCombine({
url: '../static/model/ys.gltf',
instances: well
})
rqpoint3D_layer.addGraphic(modelCombine)
modelCombine = new mars3d.graphic.ModelCombine({
url: '../static/model/tyx.glb',
instances: box
})
rqpoint3D_layer.addGraphic(modelCombine)
this.mapLoading = false
},
error: (error, msg) => {
this.$message.error('服务访问错误,' + error)
}
})
},
// 控制二维线的显隐
// todo
cameraChange() {
// console.log('map-level:' + window.map.level)
// console.log('alpha:' + this.alpha)
if (window.map.level >= 19 && this.alpha < 90 && this.showModel) {
rqpoint3D_layer.show = true
} else {
rqpoint3D_layer.show = false
}
},
// 初始化放这里
mapReady() {
this.refreshAlarm()
this.fetchWellList() // 加载全部井
this.firstAmount = true
this.toolShow = true
if (this.refreshType === 'clock') { // 如果需要倒计时刷新的
setTimeout(() => { this.countDown() }, 1000)
}
},
// 过滤图层
filterLayer(checkedLayer) {
// 0.选中or没选中井图层
if (checkedLayer.indexOf('well') !== -1) {
rqpoint_layer.show = true
rqpoint3D_layer.show = true
this.showModel = true
} else {
rqpoint_layer.show = false
rqpoint3D_layer.show = false
this.showModel = false
}
// 1.选中or没选中管线图层
checkedLayer.indexOf('line') !== -1 ? rqline_layer.forEach(item => { item.show = true }) : rqline_layer.forEach(item => { item.show = false })
// 2.选中or没选中设备图层
checkedLayer.indexOf('dev-中燃燃气标识器') !== -1 ? zrbs_layer.show = true : zrbs_layer.show = false
checkedLayer.indexOf('dev-圣井燃气标识器') !== -1 ? sjbs_layer.show = true : sjbs_layer.show = false
// // 3.选中or没选中报警图层
// checkedLayer.indexOf('alarm') !== -1 ? alarm_layer.show = true : alarm_layer.show = false
},
// 切换底图
// changeBaseMap(type) {
// this.baseLayer = type
// if (type === 'gaode_vec') {
// layer2021.show = true
// layer2020.show = false
// window.viewer.imageryLayers.raiseToTop(layer2021)
// // window.map.basemap = 1112
// // if (this.bloomEffect !== null) {
// // this.bloomEffect.enabled = false
// // }
// } else {
// layer2021.show = false
// layer2020.show = true
// window.viewer.imageryLayers.raiseToTop(layer2020)
// // window.map.basemap = 1113
// // if (this.bloomEffect !== null) {
// // this.bloomEffect.enabled = true
// // }
// }
// },
changeBaseMap(type) {
this.baseLayer = type
if (type === 'gaode_vec') {
window.map.basemap = 1112
} else {
window.map.basemap = 1113
}
},
// 倒计时函数
countDown() {
this.clock = setInterval(() => {
this.count--
if (this.count < 0) { // 当倒计时小于0时清除定时器
this.refreshAlarm()
this.count = this.baseConfig.refreshTime
}
}, 1000)
},
// 获取点位类型，显示点位类型下拉
fetchWellType() {
// getWellType().then(response => {
// this.wellTypeList = []
// // 如果该用户支持的点位类型只有一个，则不显示该筛选框
// const supportWellTypes = this.$store.getters.wellTypes
// this.wellTypeList = response.data.filter(wellType => {
// return supportWellTypes.findIndex(item => item == wellType.value) > -1
// })
const wellLayer = {
id: 'well',
name: '井图层',
children: this.layerName.map(item => {
return {
id: 'line-' + item,
name: item
}
}).splice(1, 1)
}
const lineLayer = {
id: 'line',
name: '管线图层',
children: this.layerName.map(item => {
return {
id: 'line-' + item,
name: item
}
}).splice(0, 1)
}
const devLayer = {
id: 'dev',
name: '设备图层',
children: this.layerName.map(item => {
return {
id: 'dev-' + item,
name: item
}
}).splice(2, 2)
}
this.layers.splice(0, 1, wellLayer)
this.layers.splice(1, 1, lineLayer)
this.layers.splice(2, 1, devLayer)
if (this.baseConfig.showAllWells) {
this.checkedLayer = ['well', 'line', 'dev']
wellLayer.children.forEach(item => this.checkedLayer.push('well-' + item.name))
lineLayer.children.forEach(item => this.checkedLayer.push('line-' + item.name))
devLayer.children.forEach(item => this.checkedLayer.push('dev-' + item.name))
// this.checkedLayer = [...this.checkedLayer, 'well', this.wellTypeList.map(item => 'well-' + item.value)]
} else {
this.checkedLayer = [...this.checkedLayer]
}
if (this.wellTypeList.length <= 1) {
this.showWellType = false
}
// })
},
// 清空查询
clearSearch() {
this.searchMarkers = []
this.resultList = []
},
// 数据查询
search(keywords) {
if (keywords === '') {
this.isAll = true
this.initPoint('')
} else {
this.isAll = false
this.resultList = this.markers.filter(item => {
if (item.wellCode.includes(keywords) || item.wellName.includes(keywords) || item.position.includes(keywords)) {
return true
} else {
return false
}
})
this.initPoint(keywords)
}
},
// 搜索结果页面变化，触发地图展示列表中所有
searchPageChange(currentMarkers) {
// 增加查询展示图层
this.searchMarkers = currentMarkers
},
// 点击搜索结果项居中，弹窗
searchItemClick(marker) {
const point = rqpoint_layer.graphics.filter(item => {
return item.options.id === marker.wellCode
})[0]
if (point === undefined) {
this.$message.warning('当前建设无次井，请联系管理员！')
return
}
var center = { lat: point.options.position[1], lng: point.options.position[0], alt: 300, heading: 360, pitch: -90 }
window.map.setCameraView(center)
point.openPopup()
},
// 获取全部井列表
fetchWellList() {
this.loading = true
getWellList().then(response => {
this.loading = false
if (response.code === 200) {
const wells = response.data
if (wells.length > 0) {
this.markers = []
for (const well of wells) {
this.markers.push(well)
}
}
}
this.loading = false
})
},
// 刷新报警列表
refreshAlarm() {
console.log('refreshAlarm')
this.count = this.baseConfig.refreshTime
this.loading = true
// 如果showAlarm为ture, 确保选中图层报警
if (this.showAlarm && this.checkedLayer.indexOf('alarm') == -1) {
this.checkedLayer.push('alarm')
}
getAlarmsNow().then(response => {
if (response.code === 200) {
this.loading = false
// 判断最新报警时间，若和旧的最新时间不一样，则判断是否需要产生声音
if (response.data.length > 0) {
const latestTime = response.data[0].alarmTime
console.log(latestTime, 'vs', this.latestAlarmTime)
if (this.latestAlarmTime < latestTime) {
// 如果不是初次加载并且声音开关开启状态
if ((!this.alarmFirstAmount) && this.baseConfig.alarmSound) {
console.log('playAudio')
this.playAudio()
}
this.latestAlarmTime = latestTime
}
}
this.alarmFirstAmount = false // 初次加载完毕
// 获取当前报警列表
this.alarmList = response.data // 要显示的报警列表
this.alarmWells = [] // 报警的井列表
for (const alarm of response.data) {
if (this.alarmWells.findIndex(item => item.wellCode === alarm.wellCode) == -1) {
this.alarmWells.push(alarm)
}
}
console.log('alarmWells Length', this.alarmWells.length)
// if (alarm_layer !== null) window.map.removeLayer(alarm_layer)
// alarm_layer = new mars3d.layer.GraphicLayer()
// window.map.addLayer(alarm_layer)
this.alarmWells.forEach(item => {
const point = rqpoint_layer.graphics.filter(rq => {
return rq.options.id === item.wellCode
})[0]
if (point !== undefined) {
const attr = point.options.attr || {}
attr['报警内容'] = item.alarmContent
attr['报警数值'] = item.alarmValue
attr['报警时间'] = item.alarmTime
point.setStyle({
image: '../static/images/alarm.png',
scale: 0.8,
hasPixelOffset: true,
pixelOffsetY: -20,
scaleByDistance: true,
scaleByDistance_far: 20000,
scaleByDistance_farValue: 0.8,
scaleByDistance_near: 0,
scaleByDistance_nearValue: 1.6,
clampToGround: true,
visibleDepth: false
}).unbindHighlight()
point.unbindPopup()
var str = `<div style="font-size: 14px;color: red;font-weight: 500;font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;">`
for (const j in attr) {
if (j === 'FID') continue
str += ` <div style="padding: 2px;padding-left: 8px">
<label style="padding-right: 5px;font-weight: 700">${j}: </label>
${attr[j]}</div>`
}
str += `</div>`
point.bindPopup(str)
// alarm_layer.addGraphic(point)
// this.initAlarmPoint(point, item)
}
})
}
})
},
// 关闭所有弹窗
clearInfoWindow() {
const { map } = this
map.clearInfoWindow()
},
// 点击报警列表
alarmRowClick(row) {
if (!this.isAll) {
this.$message.info('当前搜索条件不为空，请重新搜索')
return
}
const wellId = row.wellId
const point = rqpoint_layer.graphics.filter(item => {
return item.options.id === row.wellCode
})[0]
if (point === undefined) {
this.$message.warning('当前建设无次井，请联系管理员！')
return
}
var center = { lat: point.options.position[1], lng: point.options.position[0], alt: 300, heading: 360, pitch: -90 }
window.map.setCameraView(center)
point.openPopup()
},
// 点击工具箱菜单, menu:{menu:'xxx', name:''}, 建议菜单menu属性的命名与自定义弹窗的show属性名称保持同一规则
clickMenu(menu) {
this.closeAllPopup()
const key = menu.menu + 'WindowShow'
const obj = {}
obj[key] = true // 将该值置为false, 需要借助obj中转
Object.assign(this.menus, obj)
},
// 关闭所有菜单点出的弹窗
closeAllPopup() {
for (const key in this.menus) {
if (key.indexOf('WindowShow') > -1) {
// 将该值置为false, 需要借助obj中转
const obj = {}
obj[key] = false
Object.assign(this.menus, obj)
}
}
},
// 关闭数据筛选弹窗
closePopupDataFilter() {
Object.assign(this.menus, { dataFilterWindowShow: false })
},
// 坐标定位，居中，绘点
setCenter(position) {
var center = { lat: position[1], lng: position[0], alt: 20000, heading: 360, pitch: -45 }
window.map.setCameraView(center)
},
// 坐标拾取， 在地图上绘点
pickerPosition() {
const { searchResultOffset, searchResultIcon, searchResultSize, center } = this
const icon = new window.AMap.Icon({
size: toSize(searchResultSize), // 图标尺寸
image: searchResultIcon, // Icon的图像
imageSize: toSize(searchResultSize) // 根据所设置的大小拉伸或压缩图片
})
const marker = new window.AMap.Marker({
icon: icon,
position: center,
offset: toPixel(searchResultOffset),
draggable: true
})
marker.on('dragend', e => {
const position = [e.lnglat.lng, e.lnglat.lat]
this.$refs.popupLocation.setQuery(position)
})
marker.setMap(window.map)
this.tempMarker = marker
},
// TODO: 关闭坐标定位窗口， 清除地图上的标注
closePopupLocation() {
Object.assign(this.menus, { locationWindowShow: false })
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss">
.overview-map-container{
width: 100%;
overflow: hidden;
padding: 0px;
.map-demo{
width: 100%;
.svg-icon{
width: 20px;
height: 20px;
}
.alarm-icon{
width: 29px;
height: 30px;
}
}
}
.cover{
position: absolute;
bottom: 6px;
left: 8px;
display: flex;
flex-wrap: wrap;
background-color: #fcfbe8;
border-radius: 5px;
width: 190px;
height: 150px;
padding: 10px;
box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
border-color: rgba(0, 0, 0, .05);
.cover-item{
width: 100%;
height: 20px;
font-size: 16px;
font-weight: 600;
color: #505a5e;
}
}
.map-zq {
.el-loading-mask {
background-color: rgba(255, 255, 255, .3) !important;
}
.el-loading-spinner .circular {
height: 70px;
width: 70px;
font-weight: bold;
font-size: 18px;
border-radius: 2px;
}
.circle_btn{
background: #419efe;
margin-top: 5px;
width: 25px;
height: 25px;
text-align: center;
border-radius: 50%;
color: white;
padding-top: 4px;
}
}
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
.no-head-scrollbar .el-scrollbar__wrap, has-head-scrollbar .el-scrollbar__wrap {
padding: 0px 10px;
}
</style>
