<template>
<div style="overflow: hidden;" class="map-gz">
<mars3d-map v-loading="mapLoading" :basemap="basemap" map-key="gz" @onload="onMapload" />
<div class="cover">
<div v-for="(item,index) in layerName" :key="item" class="cover-item" :style="index>7&&index<10?{'width':'100%'}:{}">
<span v-if="index<=6" :style="{color: colors[index],fontWeight: 600}">—</span>
<span v-else><img :src="'/../../../static/images/'+ layerName[index] +'.png'" style="width: 17px;height:17px"/></span>
{{item}}
</div>
</div>
<div class="overview-map-container">
<!--搜索框-->
<map-search-comp :list="resultList" placeholder="点位编号/名称/位置" style="margin-left:20px;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" :is3-d="true" :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 :is3-d="true" 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 { getDeviceAllList, getDeviceType } from '@/api/device/device'
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 axios from 'axios'
import * as Cesium from 'mars3d-cesium'
import 'mars3d/dist/mars3d.css'
import 'mars3d-cesium/Build/Cesium/Widgets/widgets.css'
import * as mars3d from 'mars3d'
import Mars3dMap from '@/components/Mars3D/Mars3dMap'
import store from '@/store'
import { breadcrumb } from '@/settings'
import {
ArcGisLayer,
modelP,
polylineVolumeC
} from "@/components/Mars3D/utils/ArcGisWfsLayer";
import {
createPointLayer, createModelLayerAsync, createPolylineVolumeC
} from "@/components/Mars3D/utils/GeoJsonLayer";
const lineUrl = "http://111.198.10.15:13002/arcgis/rest/services/gzline/MapServer/"
const line_layer = []
const line_layer_3D = []
let point_layer_3D = []
let dev_layer = []
const wellLoc = {}
let underground = null
let alarm_layer = null
let search_layer = []
const wellName = ['雨水附属物', '污水附属物', '燃气附属物', '给水附属物', '电信附属物', '电力附属物']
const devName = ['井盖状态监测仪', '燃气智能监测终端', '消防栓防盗水监测仪', '液位监测仪', '噪声记录仪']
export default {
name: 'Overview3D',
components: { Mars3dMap, MapSearchComp, PopupLocation, PopupDataFilter, ToolBox, AlarmList },
data() {
return {
showAllWells: false,
initWell: false, // 是否初始化井信息
basemap: 1113,
layerColor: {
雨水附属物: '#7d0001',
污水附属物: '#7f3f01',
燃气附属物: '#f67ee8',
给水附属物: '#00befe',
电信附属物: '#00fd01',
电力附属物: '#fd0001',
井盖状态监测仪: '#0095fe',
燃气智能监测终端: '#f8c30b',
消防栓防盗水监测仪: '#0095fe',
液位监测仪: '#0095fe',
噪声记录仪: '#0095fe',
},
colors: [
'#7f0000', '#804000',
'#ff7fe9', '#ff0000',
'#00bfff', '#00ff00',
'#ff0000',
'#00ff00', '#ff0000'],
layerName:
['雨水管线', '污水管线', '燃气管线','路灯管线', '给水管线', '电信管线', '电力管线',
'井盖状态监测仪', '燃气智能监测终端', '消防栓防盗水监测仪', '液位监测仪', '噪声记录仪'],
baseLayer: 'gaode_vec', // 底图图层
layers: [{
id: "line",
name: "管线图层",
children: [
{ id: "line-雨水管线", name: "雨水管线"},
{ id: "line-污水管线", name: "污水管线"},
{ id: "line-燃气管线", name: "燃气管线"},
{ id: "line-路灯管线", name: "路灯管线"},
{ id: "line-给水管线", name: "给水管线"},
{ id: "line-电信管线", name: "电信管线"},
{ id: "line-电力管线", name: "电力管线"}
]
}, {
id: "dev",
name: "设备图层",
children: [
{ id: "dev-井盖状态监测仪", name: "井盖状态监测仪"},
{ id: "dev-燃气智能监测终端", name: "燃气智能监测终端"},
{ id: "dev-消防栓防盗水监测仪", name: "消防栓防盗水监测仪"},
{ id: "dev-液位监测仪", name: "液位监测仪"},
{ id: "dev-噪声记录仪", name: "噪声记录仪"}
]
}, { id: "alarm", name: "报警图层"}
],
checkedLayer: ['line','dev',
"line-雨水管线",
"line-污水管线",
"line-燃气管线",
"line-路灯管线",
"line-给水管线",
"line-电信管线",
"line-电力管线",
"dev-井盖状态监测仪",
"dev-燃气智能监测终端",
"dev-消防栓防盗水监测仪",
"dev-液位监测仪",
"dev-噪声记录仪",
], // 选中的图层
center: ['114.88', '25.68'], // 地图中心
showLine: false,
showModel: false,
refreshType: this.baseConfig.refreshType, // 刷新数据方式：clock定时器或websocket推送
searchResultSize: [24, 30],
searchResultOffset: [-12, -30],
mapLoading: false,
searchResultIcon: require('@/assets/overview/pure-position-icon.png'), // 报警图标
showAlarm: true, // 是否显示报警
alpha: 70,
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, // 计时器
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.map.basemap.opacity = val / 100
underground.alpha = val / 100
this.cameraChange()
},
needRefresh(val) { // 需要刷新报警
if (val) this.refreshAlarm()
},
'menus.locationWindowShow'(val) { // 打开弹窗设置默认中心，关闭弹窗清空屏幕
if (val) {
this.$refs.popupLocation.setQuery(this.center)
} else {
// window.map.remove(this.tempMarker)
}
}
},
beforeCreate() {
this.$store.dispatch('settings/changeSetting', {
key: 'breadcrumb',
value: false
})
this.$store.dispatch('settings/changeSetting', {
key: 'tagsView',
value: false
})
},
created() {
// this.fetchWellType()
},
mounted() {
this.$nextTick(() => {
this.windowResize(window.innerHeight, window.innerWidth)
})
},
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
}
},
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)
},
// 初始化放这里
onMapload(map, center) {
this.center = center
underground = new mars3d.thing.Underground({ alpha: this.alpha / 100 })
window.map.addThing(underground)
map.terrainProvider = mars3d.LayerUtil.createTerrainProvider({
url: "http://data.mars3d.cn/terrain"
})
alarm_layer = new mars3d.layer.GraphicLayer({ name: '报警图层' })
window.map.addLayer(alarm_layer)
this.initLine()
this.initPoint()
window.map.on(mars3d.EventType.cameraChanged, this.cameraChange, this)
},
async initLine() {
for (let i = 0; i <= 6; i++) {
// 三维管线
line_layer_3D.push(polylineVolumeC(i + 6, this.colors[i], this.layerName[i], 0.5, -1.5, '1<>1',18))
// line_layer_3D.push(createPolylineVolumeC(i + 6, this.colors[i], this.layerName[i], 0.1, -1.5, '1<>1',18))
// 二维管线
line_layer.push(ArcGisLayer(lineUrl, i.toString(), this.layerName[i]))
// line_layer.push(polylineC(i + 6, this.colors[i], this.layerName[i], 3))
}
},
async initPoint(condition = '', isDev = false) {
const wellTypes = this.checkedLayer.filter(item => item.indexOf('line-') > -1).map(item => item.substring(5)).map(item => item.replace('管线','附属物'))
// 删原有的
if (point_layer_3D.length !== 0) {
point_layer_3D.forEach(item => window.map.removeLayer(item))
}
point_layer_3D = []
if (dev_layer.length !== 0) {
dev_layer.forEach(item => window.map.removeLayer(item))
}
dev_layer = []
// 筛选条件
const str = condition === '' ? '1<>1' : "编号 LIKE '%" + condition + "%' or 附属物名称 LIKE '%" + condition + "%' or 所属道路 LIKE '%" + condition + "%'"
for (let i = 0; i <= 5; i++) {
let layer = await modelP(i, wellName[i], '../static/model/ys.gltf', 6, str)
layer.show = wellTypes.filter(item => item === wellName[i]).length !== 0
point_layer_3D.push(layer)
}
devName.forEach(name =>{
dev_layer.push(createPointLayer(name, this.layerName.indexOf(name) + 6, '../static/images/'+ name + '.png', '1<>1', this.layerColor[name]))
})
console.log(dev_layer)
this.mapReady()
debugger
},
async initDevLayer(name){
dev_layer.push(createPointLayer(name, this.layerName.indexOf(name) + 6, '../static/images/'+ name + '.png', '1<>1', this.layerColor[name]))
},
async initSearch(condition = '', isDev = false) {
// 删原有的
if (search_layer.length !== 0) {
search_layer.forEach(item => window.map.removeLayer(item))
}
search_layer = []
if(condition === '') return
const wellTypes = this.checkedLayer.filter(item => item.indexOf('line-') > -1).map(item => item.substring(5)).map(item => item.replace('管线','附属物'))
// 筛选条件
const str = condition === '' ? '1<>1' : "编号 LIKE '%" + condition + "%' or 附属物名称 LIKE '%" + condition + "%' or 所属道路 LIKE '%" + condition + "%'"
for (let i = 0; i <= 5; i++) {
if(wellTypes.filter(item => item === wellName[i]).length !== 0)
{
search_layer.push(createPointLayer(wellName[i], i, '../static/images/标识器.png' , str, this.layerColor[wellName[i]]))
}
}
},
cameraChange() {
console.log('map-level:' + window.map.level)
console.log(this.showModel)
console.log(this.alpha <= 80 && window.map.level >= 19)
// console.log('alpha:' + this.alpha)
if (!this.showModel) {
if(this.alpha <= 80 && window.map.level >= 19){
const lineTypes = this.checkedLayer.filter(item => item.indexOf('line-') > -1).map(item => item.substring(5))
const wellTypes = lineTypes.map(item => item.replace('管线','附属物'))
wellTypes.splice(3,1)
// 显示三维井
point_layer_3D.forEach(layer => { layer.show = wellTypes.indexOf(layer.options.name) > -1 })
this.showModel = true
}
}else{
if(this.alpha >80 || window.map.level < 19){
// 隐藏三维
debugger
point_layer_3D.forEach(layer => { layer.show = false })
this.showModel = false
}
}
},
// 初始化放这里
mapReady() {
this.refreshAlarm()
this.fetchWellList() // 加载全部井
this.firstAmount = true
this.toolShow = true
this.mapLoading = false
setTimeout(() => { this.countDown() }, 1000)
},
// 获取全部井列表
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
})
},
// 过滤图层
filterLayer(checkedLayer, item) {
this.checkedLayer = checkedLayer
const arr = item.id.split('-')
switch (arr[0]) {
case "line":
if(arr.length === 1) {
line_layer.forEach(layer => layer.show = item.show)
line_layer_3D.forEach(layer => layer.show = item.show)
point_layer_3D.forEach(layer => layer.show = item.show)
} else {
line_layer.filter(layer => layer.name === arr[1])[0].show = item.show
line_layer_3D.filter(layer => layer.name === arr[1])[0].show = item.show
point_layer_3D.filter(layer => layer.name === arr[1].replace('管线','附属物'))[0].show = item.show
}
break
case "dev":
if(arr.length === 1) {
dev_layer.forEach(layer => layer.show = item.show)
} else {
dev_layer.filter(layer => layer.name === arr[1])[0].show = item.show
}
break
case "alarm":
alarm_layer.show = item.show
break
}
},
// 切换底图
changeBaseMap(type) {
this.baseLayer = type
if (type === 'dark') {
this.basemap = 1112
} else if (type === 'gaode_vec') {
this.basemap = 1111
} else {
this.basemap = 1113
}
},
// 倒计时函数
countDown() {
this.clock = setInterval(() => {
this.count--
if (this.count < 0) { // 当倒计时小于0时清除定时器
this.refreshAlarm()
this.count = this.baseConfig.refreshTime
}
}, 1000)
},
// 获取点位类型，显示点位类型下拉
fetchWellType() {
// const lineLayer = {
// id: 'line',
// name: '管线图层',
// children: this.layerName.map(item => {
// return {
// id: 'line-' + item,
// name: item
// }
// }).splice(0, 7)
// }
// const devLayer = {
// id: 'dev',
// name: '设备图层',
// children: this.layerName.map(item => {
// return {
// id: 'dev-' + item,
// name: item
// }
// }).splice(7, 5)
// }
// this.layers.splice(0, 1, lineLayer)
// this.layers.splice(1, 1, devLayer)
// console.log(this.layers)
// if (this.showAllWells) {
// this.checkedLayer = ['line', 'dev']
// lineLayer.children.forEach(item => this.checkedLayer.push('line-' + item.name))
// lineLayer.children.forEach(item => this.checkedLayer.push('dev-' + item.name))
// } else {
// this.checkedLayer = [...this.checkedLayer]
// }
// getDeviceType(this.listQuery).then(response => {
// this.deviceTypeList = []
// // 过滤掉该单位不支持的设备类型
// const deviceTypes = this.$store.getters.deviceTypes
// for (const deviceType of response.data) {
// if (deviceTypes.indexOf(deviceType.value) !== -1) {
// this.deviceTypeList.push(deviceType)
// }
// }
// const devLayer = {
// id: 'dev',
// name: '设备图层',
// children: this.deviceTypeList.map(item => {
// return {
// id: 'dev-' + item.value,
// name: item.name
// }
// })
// }
// this.layers.splice(2, 1, devLayer)
// })
},
// 清空查询
clearSearch() {
this.searchMarkers = []
this.resultList = []
},
// 数据查询
search(keywords) {
if (keywords === '') {
this.initSearch('')
} else {
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.initSearch(keywords)
}
},
// 搜索结果页面变化，触发地图展示列表中所有
searchPageChange(currentMarkers) {
// 增加查询展示图层
this.searchMarkers = currentMarkers
},
// 点击搜索结果项居中，弹窗
searchItemClick(marker) {
// this.center = marker.lnglat
// this.openInfoWindow(marker.wellId, marker.lnglat, this.searchResultOffset[1])
},
// 在附属物图层里查设备
searchWellLayer(wellCode){
// *********************************测试wellCode*********************************
// wellCode = 'GX_YSD_4001_BJNDD_104'
let point = undefined
for (let i = 0; i < point_layer_3D.length; i++)
{
point = point_layer_3D[i].graphics[0]?.options.instances?.filter(well => {
return well.attr.编号 === wellCode
})[0]
if (point !== undefined) {
return point
}
}
console.log(point)
return undefined
},
// 刷新报警列表
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')
}
alarm_layer.closePopup().clear()
getAlarmsNow().then(response => {
if (response.code === 200) {
this.loading = false
// // 判断最新报警时间，若和旧的最新时间不一样，则判断是否需要产生声音
// if (response.data.length > 0) {
// const latestTime = response.data[0].alarmTime
// if (this.latestAlarmTime < latestTime) {
// // 如果不是初次加载并且声音开关开启状态
// if ((!this.alarmFirstAmount) && this.baseConfig.alarmSound) {
// this.playAudio()
// }
// this.latestAlarmTime = latestTime
// }
// }
// this.alarmFirstAmount = false // 初次加载完毕
// // 获取当前报警列表
this.alarmList = response.data // 要显示的报警列表
this.alarmWells = [] // 报警的井列表
this.alarmList.forEach(item => {
const attr = {}
attr['井编号'] = item.wellCode
attr['井名称'] = item.wellTypeName
attr['设备编号'] = item.devcode
attr['报警内容'] = item.alarmContent
attr['报警数值'] = item.alarmValue
attr['报警时间'] = item.alarmTime
attr['报警位置'] = item.position
var str = `<div style="font-size: 14px;color: #fd6464;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>`
const primitive = new mars3d.graphic.BillboardPrimitive({
allowDrillPick: true,
attr: attr,
id: "alarm-" + item.alarmId,
position: [item.coordinateX,item.coordinateY],
style: {
image: '../static/images/alarm.png',
scale: 0.6,
hasPixelOffset: true,
pixelOffsetY: -10,
clampToGround: true,
scaleByDistance: true,
scaleByDistance_far: 20000,
scaleByDistance_farValue: 1,
scaleByDistance_near: 0,
scaleByDistance_nearValue: 1.5
},
flyTo: true
})
primitive.bindPopup(str)
alarm_layer.addGraphic(primitive)
// const point = this.searchWellLayer(item.wellCode)
// if (point !== undefined) {
// const attr = point.attr || {}
// attr['报警内容'] = item.alarmContent
// attr['报警数值'] = item.alarmValue
// attr['报警时间'] = item.alarmTime
//
// var str = `<div style="font-size: 14px;color: #7ff5ff;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>`
//
// const primitive = new mars3d.graphic.BillboardPrimitive({
// allowDrillPick: true,
// attr: attr,
// id: "alarm-" + attr.编号,
// position: [attr.经度,attr.纬度],
// style: {
// image: '../static/images/alarm.png',
// scale: 0.6,
// hasPixelOffset: true,
// pixelOffsetY: -10,
// scaleByDistance: true,
// scaleByDistance_far: 20000,
// scaleByDistance_farValue: 0.6,
// scaleByDistance_near: 0,
// scaleByDistance_nearValue: 1.4
// },
// flyTo: true
// })
// primitive.bindPopup(str)
// alarm_layer.addGraphic(primitive)
//
//
//
//
// //Tetrahedron(alarm_layer, [attr.经度,attr.纬度], attr)
// // 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,
// // visibleDepth: false
// // }).unbindHighlight()
// // point.unbindPopup()
// // point.bindPopup(str)
// // this.initAlarmPoint(point, item)
// }
})
}
})
},
/**
* 打开报警弹窗
* @param wellId 井id
* @param coordinates 弹窗位置： [经度，纬度]
* @param needCenter 是否需要将点居中
*/
openAlarmWindow(wellId, coordinates, needCenter = false) {
console.log('openAlarmWindow:' + wellId)
// if (this.needCenter) { // 如果需要居中
// this.center = coordinates
// }
// 获取报警详情
getWellAlarms(wellId).then(response => {
if (response.code === 200) {
const wellInfo = response.data
const alarmInfo = {
wellCode: response.data.wellCode,
position: response.data.position,
deptName: response.data.deptName,
wellTypeName: response.data.wellTypeName,
alarms: response.data.alarmList,
deep: response.data.deep
}
const AlarmWindow = Vue.extend({
render: h => h(AlarmInfoWindow, { props: { alarmInfo: alarmInfo }})
})
const alarmWindow = new AlarmWindow().$mount()
const infoWindow = new window.AMap.InfoWindow({
content: alarmWindow.$el, // 显示内容
offset: [0, this.alarmOffset[1]], // 偏移
autoMove: true // 是否自动调整窗体到视野内
})
infoWindow.open(window.map, new toLngLat(coordinates))
}
})
},
// 关闭所有弹窗
clearInfoWindow() {
const { map } = this
map.clearInfoWindow()
},
// 点击报警列表
alarmRowClick(row) {
console.log('alarmRowClick')
alarm_layer.getGraphicById('alarm-'+ row.alarmId).openPopup()
var center = { lat: row.coordinateY, lng: row.coordinateX, alt: 300, heading: 360, pitch: -90 }
window.map.setCameraView(center)
},
// 点击工具箱菜单, 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: 10000, 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 })
},
// 获取当前deptid的所有下级id,仅最多支持3级
fetchDeptList(deptid) {
console.log('fetchDeptList')
const deptids = [deptid] // 储存了该pid和其子集
const deptlist = this.$refs.deptSelect.fetchDeptTree()
for (const dept of deptlist) {
if (dept.pid === deptid) {
deptids.push(dept.id)
}
}
const result = []
// 查找所有列表中有没有deptids里面的本人或子集
if (deptlist.length > 0) {
for (const dept of deptlist) {
if (deptids.indexOf(dept.id) !== -1) {
result.push(dept.id)
} else if (deptids.indexOf(dept.pid) !== -1) {
result.push(dept.id)
}
}
}
console.log(result)
return result
}
}
}
</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: linear-gradient(to top left, #48617c, #619bd4);
border-radius: 5px;
width: 300px;
height: 200px;
padding: 10px;
box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
border-color: rgba(0, 0, 0, .05);
.cover-item{
width: 50%;
width: 50%;
font-size: 16px;
color: white;
}
}
.map-gz {
height: 92vh;
overflow-y: hidden;
.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>
