<!--
Description: 综合大屏-布控地图
Author: 李亚光
Date: 2024-07-18
-->
<script lang="ts" setup>
import baseOverView from '../fullScreen-components/baseOverView.vue'
import pipeNetworkType from '../fullScreen-components/pipeNetworkType.vue'
import monitorDeviceCount from '../fullScreen-components/monitorDeviceCount.vue'
import allAlarmStatus from '../fullScreen-components/allAlarmStatus.vue'
import deptAlarmCount from '../fullScreen-components/deptAlarmCount.vue'
import deviceRunStatus from '../fullScreen-components/deviceRunStatus.vue'
import baseOver from '../fullScreen-components/baseOver.vue'
import { demonstrationData, mapData } from './mapData'
import detailInfo from './detailInfoDialog.vue'
import { img } from './imgData'
import AMap from '@/components/map/index.vue'
// 地图实例
const mapRef = ref()
const zoomStatus = ref('') // 当前缩放状态
// administration行政 demonstration95示范区
const showStatus = ref('administration')
// 地图挂载完毕执行
const drawBj = () => {
const style = {
fillColor: 'transparent',
strokeOpacity: 1,
fillOpacity: 0.3,
strokeColor: '#2b8cbe',
strokeWeight: 2,
strokeStyle: 'solid',
strokeDasharray: [5, 5],
activeFillColor: '#3CA4D2',
dbclickSetCenter: true,
zIndex: 1,
needHover: true,
}
mapData.forEach((item: any) => {
// 绘制北京各个区边界
mapRef.value.addPolygon(item.data, {
...style,
name: item.name,
dbclickCenter: item.center,
})
})
}
// 图例展示
const legend = ref(['阀门', '调压站', '调压箱', '中压管线', '低压管线', '燃气智能终端', '云台', '管线哨兵'])
const legendData1 = ref([
{
name: '阀门',
img: img.fm,
type: 'marker',
},
{
name: '调压站',
img: img.tyz,
type: 'marker',
},
{
name: '调压箱',
img: img.tyx,
type: 'marker',
},
{
name: '中压管线',
img: img.zy,
type: 'line',
},
{
name: '低压管线',
img: img.dy,
type: 'line',
},
{
name: '燃气智能终端',
img: img.ranqi,
type: 'marker',
},
{
name: '云台',
img: img.yuntai,
type: 'marker',
},
{
name: '管线哨兵',
img: img.shaobing,
type: 'marker',
},
])
const legendDataLeft = computed(() => {
return legendData1.value.slice(0, 5)
})
const legendDataRight = computed(() => {
return legendData1.value.slice(5, 8)
})
// 双击多边形(行政区或九五示范区)掉起弹窗
const detail = ref()
const detailRef = ref()
const polygonClick = (data: any) => {
if (zoomStatus.value === 'hidden') { return }
console.log(data, '双击行政区')
data.map.setCenter(data.style.dbclickCenter)
data.map.setZoom(9.6)
// 定义弹窗
detail.value = new mapRef.value.AMap.InfoWindow({
closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
autoMove: true, // 是否自动调整窗体到视野内
isCustom: true, // 自定义信息窗体
content: detailRef.value.$el, // 窗体内容(vue组件)
offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
})
// 打开信息窗口
detail.value.open(data.map, data.event.lnglat)
// 初始化信息窗口
detailRef.value.initDialog({
overlay: data.event.target,
infoWindow: detail.value,
info: data.style,
flag: 'administration', // 行政区或95示范区
})
}
// 绘制管线
const drawLine = (data: any[], type: string, color: string) => {
// 模拟海量点数据
// const data = [
// [115.918546, 39.812809],
// [115.929436, 39.814813],
// [115.932418, 39.815577],
// [115.934778, 39.816881],
// [115.939913, 39.817421],
// [115.942935, 39.817867],
// [115.946041, 39.818535],
// [115.946609, 39.819261],
// [115.947517, 39.820288],
// [115.948852, 39.820757],
// [115.949681, 39.821012],
// [115.949213, 39.821635],
// [115.949137, 39.821666],
// [115.948514, 39.821778],
// [115.94831, 39.82186],
// ]
mapRef.value.addPolyline({
path: data,
style: {
strokeColor: color,
strokeWeight: 2,
strokeStyle: 'solid',
zIndex: 95,
name: type,
// zoomLevels: [10.5, 18],
},
})
// 判断图例设置(没有显示的直接就隐藏)
if (!legend.value.includes(type)) {
mapRef.value.lineAllList.forEach((line: any) => {
line.hide()
})
}
}
// 点击管线(选中管线高亮)
const lineClick = (data: any) => {
console.log(data, '点击管线(选中管线高亮)')
if (data.polyline.getOptions().strokeWeight === 4.5) {
// 取消高亮
data.polyline.setOptions({
strokeColor: '#BAAF04',
strokeWeight: 4,
})
}
else {
// 高亮
data.polyline.setOptions({
strokeColor: '#EAFA03',
strokeWeight: 4.5,
})
}
}
// 绘制阀门，调压站等点标记
const drawMarker = (data: any, style: any, type: string) => {
// const style = [
// {
// url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png', // 图标地址
// anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
// size: new mapRef.value.AMap.Size(7, 7), // 图标的尺寸
// zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
// },
// {
// url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
// anchor: new mapRef.value.AMap.Pixel(4, 4),
// size: new mapRef.value.AMap.Size(11, 11),
// zIndex: 99,
// },
// ]
// const data = [
// {
// lnglat: [115.94831, 39.82186], // 经纬度
// name: '天安门',
// style: 1, // 该数据的取值为样式数组对应的对象索引
// },
// {
// lnglat: [115.932418, 39.815577],
// name: '南锣鼓巷',
// style: 2,
// },
// ]
mapRef.value.addMassMarks({
path: data,
zIndex: 111,
zooms: [0, 100],
style,
})
// 判断图例设置(没有显示的直接就隐藏)
if (!legend.value.includes(type)) {
mapRef.value.massMarksAllList.forEach((line: any) => {
line.hide()
})
}
}
// 阀门，调压站等点标记点击
const massMarksClick = (data: any) => {
console.log(data, '阀门，调压站等点标记点击')
// 定义弹窗
detail.value = new mapRef.value.AMap.InfoWindow({
closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
autoMove: true, // 是否自动调整窗体到视野内
isCustom: true, // 自定义信息窗体
content: detailRef.value.$el, // 窗体内容(vue组件)
offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
})
console.log(detail.value, 'detail.value 点')
// 打开信息窗口
console.log(data.event.data.lnglat, 'data.event.data.lnglat')
detail.value.open(data.map, data.event.data.lnglat)
// 初始化信息窗口
detailRef.value.initDialog({
overlay: data.event.target,
infoWindow: detail.value,
info: data.event.data,
// flag: 'valve', // 阀门
flag: 'demonstration', // 阀门
})
}
// 监听地图缩放
watch(() => mapRef.value?.zoom, (newVal) => {
if (!newVal) { return }
// 10.5作为临界点 隐藏行政区hover 显示设备以及管线
if (newVal >= 10.5) {
if (zoomStatus.value === 'hidden') { return }
// 隐藏行政区hover
mapRef.value.polygonAllList.forEach((polygon: any) => {
polygon.setOptions({
fillOpacity: 0.3,
fillColor: 'transparent',
})
polygon.on('mouseover', () => {
polygon.setOptions({
fillOpacity: 0.3,
fillColor: 'transparent',
})
})
})
// // 绘制管线
// drawLine()
// 绘制阀门，调压站等点标记
// drawMarker()
zoomStatus.value = 'hidden'
}
else {
if (zoomStatus.value === 'show') { return }
// 显示行政区hover
mapRef.value.polygonAllList.forEach((polygon: any) => {
polygon.on('mouseover', () => {
polygon.setOptions({
fillOpacity: 0.5,
fillColor: '#3CA4D2',
})
})
})
// 移除管线
mapRef.value.removePolyline()
// 移除标记点
mapRef.value.removePolyline()
zoomStatus.value = 'show'
}
})
// 点击图例，显示隐藏对应的点或线
const clickLegend = (data: { name: string; type: string }) => {
if (legend.value.includes(data.name)) {
// 隐藏
legend.value = legend.value.filter((citem: string) => citem !== data.name)
if (data.type === 'line') {
mapRef.value.lineAllList.filter((item: any) => item.getOptions().name === data.name).forEach((line: any) => {
line.hide()
})
}
else {
mapRef.value.massMarksAllList.filter((item: any) => item.getData().some((citem: any) => citem.type === data.name)).forEach((marker: any) => {
marker.hide()
})
}
}
else {
// 显示
legend.value.push(data.name)
if (data.type === 'line') {
mapRef.value.lineAllList.filter((item: any) => item.getOptions().name === data.name).forEach((line: any) => {
line.show()
})
}
else {
mapRef.value.massMarksAllList.filter((item: any) => item.getData().some((citem: any) => citem.type === data.name)).forEach((marker: any) => {
marker.show()
})
}
}
}
const changeShow = (type: string) => {
showStatus.value = type
const ele = document.getElementById('change') as HTMLElement
ele.setAttribute('style', 'font-size: 17px')
setTimeout(() => {
ele.setAttribute('style', 'font-size: 16px')
}, 50)
}
const publicPath = window.location.href.split('#')[0]
watch(() => showStatus.value, (newVal) => {
// 清空画线和点标记
mapRef.value.removePolyline()
mapRef.value.removePolygon()
mapRef.value.removeMarker()
mapRef.value.removeMassMarks()
if (newVal === 'administration') {
// 行政区
drawBj()
mapRef.value.map.setCenter([116.372535, 40.213715])
mapRef.value.map.setZoom(9.2)
}
else if (newVal === 'demonstration') {
// 95示范区
legend.value = ['阀门', '调压站', '调压箱', '中压管线', '低压管线', '燃气智能终端', '云台', '管线哨兵']
console.log(demonstrationData, 'demonstrationData')
mapRef.value.addPolygon(demonstrationData, {
...{
fillColor: 'transparent',
strokeOpacity: 1,
fillOpacity: 0.3,
strokeColor: '#2b8cbe',
strokeWeight: 2,
strokeStyle: 'solid',
strokeDasharray: [5, 5],
activeFillColor: '#3CA4D2',
dbclickSetCenter: true,
zIndex: 1,
needHover: false,
},
name: '95行政区',
dbclickCenter: [],
})
mapRef.value.map.setCenter([116.353045, 39.892492])
mapRef.value.map.setZoom(14.6)
// 绘制中压管线
const zhogya = [
[
[116.332036, 39.901572],
[116.331923, 39.900877],
[116.33198, 39.900095],
[116.332093, 39.899617],
[116.332093, 39.899096],
[116.332093, 39.898835],
],
[
[116.332036, 39.898792],
[116.332319, 39.898705],
[116.332772, 39.898661],
[116.333226, 39.898748],
[116.333735, 39.898748],
[116.334132, 39.898748],
[116.334245, 39.898748],
],
[
[116.334358, 39.898835],
[116.334358, 39.898531],
[116.334358, 39.898314],
[116.334358, 39.89801],
[116.334358, 39.897488],
[116.334415, 39.896793],
[116.334471, 39.896402],
[116.334528, 39.896185],
[116.334528, 39.89575],
[116.334528, 39.895533],
[116.334358, 39.894925],
[116.334471, 39.894534],
[116.334528, 39.894056],
[116.334528, 39.893535],
[116.334528, 39.893187],
[116.334528, 39.892926],
[116.334641, 39.892753],
[116.334698, 39.892275],
[116.334811, 39.892014],
[116.334811, 39.891406],
[116.334811, 39.891058],
[116.334981, 39.890754],
[116.334924, 39.890363],
[116.334924, 39.890276],
],
[
[116.335207, 39.889407],
[116.335547, 39.88906],
[116.33583, 39.888538],
[116.33583, 39.888017],
[116.33583, 39.887539],
[116.33583, 39.886931],
[116.335887, 39.886279],
[116.335887, 39.885844],
[116.335887, 39.88541],
[116.335887, 39.885106],
[116.336, 39.884888],
[116.336567, 39.884845],
[116.336963, 39.884845],
[116.337529, 39.884845],
[116.338379, 39.884758],
[116.338888, 39.884801],
[116.339511, 39.884845],
[116.340191, 39.884845],
[116.34087, 39.884845],
[116.34104, 39.884845],
[116.341267, 39.884888],
[116.341267, 39.884237],
[116.34138, 39.883759],
[116.341436, 39.883194],
[116.341663, 39.882716],
[116.341436, 39.882194],
[116.341606, 39.881716],
[116.341663, 39.881325],
[116.342003, 39.880978],
[116.341889, 39.880586],
[116.341606, 39.880326],
[116.341436, 39.880022],
[116.341436, 39.87963],
[116.34172, 39.879326],
[116.34172, 39.878935],
[116.341889, 39.878501],
[116.342003, 39.878196],
[116.341946, 39.877762],
[116.342003, 39.877327],
[116.342173, 39.87711],
[116.342286, 39.876806],
[116.342456, 39.876632],
[116.342569, 39.876502],
],
[
[116.321051, 39.889364],
[116.32156, 39.889494],
[116.322296, 39.889624],
[116.323259, 39.889711],
[116.324111, 39.889755],
[116.325017, 39.889972],
[116.326093, 39.890016],
[116.326489, 39.890103],
[116.327225, 39.890103],
[116.328074, 39.890059],
[116.328924, 39.890059],
[116.32983, 39.890059],
[116.331132, 39.889972],
[116.332661, 39.889929],
[116.333454, 39.889929],
[116.334077, 39.889929],
[116.334586, 39.889929],
[116.337021, 39.890146],
[116.338266, 39.890146],
[116.339512, 39.890146],
[116.340701, 39.890059],
[116.34189, 39.890016],
[116.343816, 39.889929],
[116.344382, 39.889929],
[116.34642, 39.889755],
[116.348628, 39.889712],
[116.349025, 39.889712],
[116.349534, 39.889712],
[116.350384, 39.889625],
[116.351629, 39.889625],
[116.354574, 39.889494],
[116.355876, 39.889494],
[116.356612, 39.889494],
[116.357914, 39.889494],
[116.359443, 39.889494],
[116.361651, 39.889494],
[116.363803, 39.889494],
[116.366408, 39.889451],
[116.368333, 39.889321],
[116.369748, 39.889321],
[116.371673, 39.889321],
[116.373032, 39.889321],
[116.373882, 39.889321],
[116.375354, 39.889364],
[116.376203, 39.889407],
[116.377166, 39.889451],
[116.378128, 39.889494],
[116.379091, 39.889538],
[116.380223, 39.889538],
[116.381243, 39.889494],
[116.382658, 39.889625],
[116.383564, 39.889625],
[116.384753, 39.889625],
],
[
[116.3491, 39.89984],
[116.349142, 39.899047],
[116.349142, 39.89873],
[116.349266, 39.89835],
[116.349266, 39.898001],
[116.349224, 39.897842],
[116.349224, 39.897494],
[116.349224, 39.897272],
[116.349224, 39.896733],
[116.349266, 39.896289],
[116.34939, 39.89594],
[116.34939, 39.895528],
[116.34939, 39.895147],
[116.34939, 39.894481],
[116.349431, 39.893783],
[116.349472, 39.892705],
[116.349514, 39.891786],
[116.349514, 39.891088],
[116.349514, 39.890549],
[116.34939, 39.889946],
[116.349224, 39.889344],
[116.349183, 39.888614],
[116.3491, 39.888139],
[116.3491, 39.887187],
[116.349059, 39.886458],
[116.349059, 39.885728],
[116.349142, 39.885189],
[116.349266, 39.884587],
[116.349266, 39.884143],
[116.349266, 39.883699],
[116.349307, 39.883191],
[116.349307, 39.882747],
[116.349431, 39.882208],
[116.349431, 39.881732],
[116.349638, 39.881288],
[116.349638, 39.880812],
[116.34972, 39.880337],
[116.349886, 39.879829],
[116.349886, 39.879385],
[116.349886, 39.878941],
[116.349844, 39.878529],
[116.349844, 39.877989],
[116.349762, 39.877609],
[116.349762, 39.877355],
[116.349762, 39.877101],
[116.349762, 39.876816],
[116.349803, 39.876499],
[116.349803, 39.876086],
[116.349927, 39.875611],
[116.350051, 39.87523],
[116.350051, 39.874754],
[116.350175, 39.874437],
[116.350175, 39.873771],
[116.350216, 39.872946],
[116.35034, 39.872026],
[116.350423, 39.871201],
[116.350588, 39.87025],
[116.350712, 39.86971],
[116.350836, 39.869171],
],
[
[116.3491, 39.89984],
[116.349142, 39.899047],
[116.349142, 39.89873],
[116.349266, 39.89835],
[116.349266, 39.898001],
[116.349224, 39.897842],
[116.349224, 39.897494],
[116.349224, 39.897272],
[116.349224, 39.896733],
[116.349266, 39.896289],
[116.34939, 39.89594],
[116.34939, 39.895528],
[116.34939, 39.895147],
[116.34939, 39.894481],
[116.349431, 39.893783],
[116.349472, 39.892705],
[116.349514, 39.891786],
[116.349514, 39.891088],
[116.349514, 39.890549],
[116.34939, 39.889946],
[116.349224, 39.889344],
[116.349183, 39.888614],
[116.3491, 39.888139],
[116.3491, 39.887187],
[116.349059, 39.886458],
[116.349059, 39.885728],
[116.349142, 39.885189],
[116.349266, 39.884587],
[116.349266, 39.884143],
[116.349266, 39.883699],
[116.349307, 39.883191],
[116.349307, 39.882747],
[116.349431, 39.882208],
[116.349431, 39.881732],
[116.349638, 39.881288],
[116.349638, 39.880812],
[116.34972, 39.880337],
[116.349886, 39.879829],
[116.349886, 39.879385],
[116.349886, 39.878941],
[116.349844, 39.878529],
[116.349844, 39.877989],
[116.349762, 39.877609],
[116.349762, 39.877355],
[116.349762, 39.877101],
[116.349762, 39.876816],
[116.349803, 39.876499],
[116.349803, 39.876086],
[116.349927, 39.875611],
[116.350051, 39.87523],
[116.350051, 39.874754],
[116.350175, 39.874437],
[116.350175, 39.873771],
[116.350216, 39.872946],
[116.35034, 39.872026],
[116.350423, 39.871201],
[116.350588, 39.87025],
[116.350712, 39.86971],
[116.350836, 39.869171],
],
[
[116.334647, 39.897006],
[116.334895, 39.897015],
[116.335256, 39.897041],
[116.335572, 39.897058],
[116.335764, 39.897093],
[116.336012, 39.897093],
[116.336102, 39.897084],
[116.33617, 39.897084],
[116.336181, 39.897015],
[116.336203, 39.896928],
[116.336192, 39.896859],
[116.336215, 39.896755],
[116.336215, 39.896738],
[116.336282, 39.897093],
[116.336485, 39.897119],
[116.336643, 39.897119],
[116.336857, 39.897119],
[116.337049, 39.897127],
[116.337252, 39.897153],
[116.337421, 39.897162],
[116.337444, 39.897067],
[116.337433, 39.896928],
[116.337466, 39.896799],
[116.337489, 39.896703],
[116.337489, 39.8966],
[116.3375, 39.896487],
[116.3375, 39.896392],
[116.3375, 39.89634],
[116.3375, 39.896305],
],
[
[116.349715, 39.880482],
[116.349898, 39.880475],
[116.350054, 39.880475],
[116.350191, 39.880475],
[116.350456, 39.880475],
[116.350713, 39.880475],
[116.351024, 39.880489],
[116.35139, 39.880489],
[116.351783, 39.880496],
[116.351993, 39.880503],
[116.352323, 39.880503],
[116.352561, 39.880503],
[116.352789, 39.880503],
[116.353046, 39.880503],
[116.353265, 39.880503],
[116.353265, 39.880503],
[116.353567, 39.880524],
[116.35364, 39.880531],
[116.353677, 39.880566],
[116.353659, 39.880713],
[116.353659, 39.880826],
[116.353631, 39.880952],
[116.353622, 39.881071],
[116.35364, 39.88124],
[116.353631, 39.881373],
[116.353622, 39.8815],
[116.353631, 39.881619],
[116.35364, 39.88178],
[116.353622, 39.881858],
],
[
[116.363154, 39.907022],
[116.363154, 39.906773],
[116.363154, 39.906606],
[116.363172, 39.906426],
[116.363154, 39.906204],
[116.363154, 39.905941],
[116.36319, 39.905733],
[116.36319, 39.905553],
[116.363209, 39.905151],
[116.363209, 39.904985],
[116.36319, 39.904763],
[116.36319, 39.904555],
[116.36319, 39.904333],
[116.36319, 39.904111],
[116.363172, 39.903779],
[116.363172, 39.903779],
[116.363172, 39.903321],
[116.363172, 39.903141],
[116.363172, 39.902975],
[116.363172, 39.902975],
[116.36319, 39.902462],
[116.36319, 39.902296],
[116.363136, 39.902074],
[116.36319, 39.901741],
[116.36319, 39.901436],
[116.36319, 39.90109],
[116.363209, 39.900854],
[116.36319, 39.900604],
[116.363172, 39.900369],
[116.363172, 39.900119],
[116.36319, 39.899911],
[116.363245, 39.899703],
[116.363245, 39.899592],
[116.363281, 39.899315],
[116.363227, 39.899093],
[116.363281, 39.898858],
[116.363281, 39.898636],
[116.363281, 39.898456],
[116.363245, 39.89822],
[116.363263, 39.898054],
[116.363263, 39.897846],
[116.363245, 39.89743],
[116.363245, 39.897125],
[116.363263, 39.896973],
[116.363263, 39.896751],
[116.363245, 39.896584],
[116.363281, 39.896071],
[116.363281, 39.895891],
[116.363281, 39.895614],
[116.363245, 39.895309],
[116.363263, 39.895115],
[116.363299, 39.894893],
[116.363299, 39.894533],
[116.363299, 39.894283],
[116.363317, 39.894047],
[116.363371, 39.893826],
[116.363353, 39.893548],
[116.363371, 39.89334],
[116.363389, 39.892814],
[116.363425, 39.892606],
[116.363425, 39.892481],
[116.363407, 39.892231],
[116.363353, 39.891968],
[116.363353, 39.891635],
[116.363353, 39.891413],
[116.363407, 39.891205],
[116.363389, 39.8909],
[116.363407, 39.890554],
[116.363407, 39.890277],
[116.363462, 39.889985],
[116.363462, 39.889722],
],
]
zhogya.forEach((item) => {
drawLine(
item,
'中压管线',
'#F8E101',
)
})
// 绘制低压管线
const diya = [
[
[116.353102, 39.896141],
[116.353725, 39.896141],
[116.354347, 39.896141],
[116.35514, 39.896141],
[116.355763, 39.896228],
[116.356613, 39.896228],
[116.357009, 39.896272],
[116.357802, 39.896272],
[116.358878, 39.896315],
[116.359614, 39.896359],
[116.360407, 39.896359],
[116.361086, 39.896359],
[116.361935, 39.896359],
[116.362388, 39.896359],
[116.363068, 39.896359],
],
[
[116.352974, 39.896031],
[116.35296, 39.895837],
[116.35296, 39.895691],
[116.352967, 39.89547],
[116.352967, 39.895303],
[116.352981, 39.895125],
[116.352981, 39.89498],
[116.352981, 39.894818],
[116.352981, 39.894624],
[116.353002, 39.89443],
[116.353016, 39.894155],
[116.353016, 39.894063],
[116.353016, 39.893945],
[116.353045, 39.893783],
[116.353045, 39.893594],
[116.353022, 39.893426],
[116.353022, 39.893303],
[116.353052, 39.893123],
[116.353052, 39.892943],
[116.353052, 39.892808],
[116.353037, 39.892606],
[116.353066, 39.892415],
[116.353095, 39.892291],
[116.35311, 39.892021],
[116.353095, 39.891819],
[116.353125, 39.891605],
[116.35311, 39.891369],
[116.353139, 39.891178],
[116.353139, 39.890976],
[116.353169, 39.890796],
[116.353169, 39.890527],
[116.353154, 39.890291],
[116.353169, 39.890077],
[116.353198, 39.889886],
[116.353198, 39.889762],
],
[
[116.340043, 39.888132],
[116.340163, 39.888151],
[116.340416, 39.888151],
[116.340597, 39.888151],
[116.340838, 39.888123],
[116.341103, 39.888123],
[116.341356, 39.888114],
[116.341573, 39.888114],
[116.341838, 39.888123],
[116.342103, 39.888123],
[116.342307, 39.888132],
[116.342488, 39.888151],
[116.34256, 39.888151],
],
[
[116.342365, 39.888081],
[116.342365, 39.888009],
[116.342371, 39.887917],
[116.342371, 39.887835],
[116.342365, 39.887718],
[116.342385, 39.887626],
[116.342385, 39.88756],
[116.342385, 39.887473],
[116.342385, 39.88736],
[116.342385, 39.887279],
[116.342398, 39.887125],
[116.342418, 39.886947],
[116.342451, 39.886773],
[116.342451, 39.886569],
[116.342458, 39.886451],
[116.342451, 39.886329],
[116.342518, 39.886232],
[116.342538, 39.886104],
[116.342551, 39.886053],
[116.342551, 39.885981],
[116.342551, 39.885935],
[116.342558, 39.885884],
[116.342551, 39.885849],
[116.342425, 39.885854],
[116.342292, 39.885854],
[116.342165, 39.885854],
[116.341992, 39.885854],
[116.341859, 39.885854],
[116.341739, 39.885838],
[116.341633, 39.885833],
[116.341533, 39.885818],
[116.341413, 39.885823],
[116.3414, 39.885823],
[116.341406, 39.885792],
[116.341406, 39.885746],
[116.34142, 39.885685],
[116.34142, 39.885639],
[116.341426, 39.885568],
[116.34142, 39.885496],
[116.341406, 39.885399],
[116.341413, 39.885323],
[116.341413, 39.885251],
[116.341413, 39.885128],
[116.341413, 39.885006],
[116.341413, 39.884934],
[116.341413, 39.884822],
[116.341413, 39.884786],
[116.341386, 39.884776],
[116.341333, 39.884776],
[116.3412, 39.884776],
[116.340934, 39.884786],
[116.340801, 39.884786],
[116.340634, 39.884786],
[116.340568, 39.884786],
[116.340501, 39.884786],
],
[
[116.349397, 39.885688],
[116.349726, 39.885688],
[116.350054, 39.885733],
[116.350364, 39.885733],
[116.350634, 39.885748],
[116.351021, 39.885762],
[116.351485, 39.885762],
[116.35222, 39.885762],
[116.352761, 39.885762],
[116.353128, 39.885777],
[116.353341, 39.885807],
[116.353534, 39.885837],
[116.353844, 39.885851],
[116.354057, 39.885851],
[116.354424, 39.88594],
[116.354598, 39.88597],
[116.354888, 39.886],
[116.355004, 39.886015],
[116.355101, 39.886029],
[116.355371, 39.886029],
[116.355661, 39.886044],
[116.356009, 39.886118],
[116.356357, 39.886133],
[116.356609, 39.886148],
[116.356609, 39.886059],
[116.356609, 39.885881],
[116.356609, 39.885703],
[116.356658, 39.885244],
[116.356658, 39.885108],
[116.356658, 39.885088],
[116.356416, 39.885079],
[116.3562, 39.885049],
[116.35601, 39.88503],
[116.355959, 39.885001],
[116.355959, 39.884932],
[116.355946, 39.884854],
[116.355946, 39.884815],
[116.355959, 39.884728],
],
[
[116.345359, 39.885035],
[116.345568, 39.885048],
[116.345736, 39.885048],
[116.34597, 39.885061],
[116.346188, 39.885086],
[116.346447, 39.885106],
[116.346539, 39.885119],
[116.34669, 39.885144],
[116.346723, 39.885253],
[116.346723, 39.885388],
[116.346723, 39.885427],
[116.346807, 39.885446],
[116.346941, 39.885446],
[116.347117, 39.88544],
[116.347309, 39.88544],
[116.347602, 39.885453],
[116.347828, 39.885453],
[116.348004, 39.885472],
[116.348196, 39.885472],
[116.348355, 39.885491],
[116.348439, 39.885523],
[116.348581, 39.885568],
[116.348849, 39.885626],
[116.349393, 39.88569],
],
[
[116.370878, 39.883222],
[116.37089, 39.883033],
[116.37089, 39.882817],
[116.37089, 39.882574],
[116.37089, 39.882367],
[116.370855, 39.882052],
[116.370867, 39.881728],
[116.370843, 39.881449],
[116.370832, 39.881296],
[116.370855, 39.881053],
[116.370785, 39.880828],
[116.370773, 39.880549],
[116.370773, 39.88026],
[116.370761, 39.880026],
[116.370714, 39.879747],
[116.370703, 39.879477],
[116.370714, 39.879072],
[116.370691, 39.878883],
[116.370691, 39.87873],
[116.370714, 39.878559],
],
[
[116.367239, 39.884314],
[116.367551, 39.884294],
[116.367864, 39.884294],
[116.36819, 39.884274],
[116.368594, 39.884274],
[116.368984, 39.884254],
[116.369336, 39.884274],
[116.369753, 39.884264],
[116.370092, 39.884264],
[116.370326, 39.884264],
[116.370548, 39.884254],
[116.370704, 39.884254],
[116.370795, 39.884234],
[116.370821, 39.884034],
[116.3709, 39.883984],
[116.371238, 39.883974],
[116.371291, 39.883754],
[116.371291, 39.883504],
[116.371264, 39.883415],
[116.370874, 39.883395],
[116.370861, 39.883335],
[116.370888, 39.883253],
],
[
[116.367219, 39.884338],
[116.367256, 39.884473],
[116.367282, 39.884618],
[116.367319, 39.884811],
[116.367319, 39.884985],
[116.367319, 39.885198],
[116.36737, 39.885391],
[116.367382, 39.885594],
[116.367382, 39.885778],
[116.367433, 39.886019],
[116.367508, 39.886222],
[116.367559, 39.886454],
[116.367622, 39.886618],
[116.367697, 39.886908],
[116.367748, 39.887179],
[116.367773, 39.887421],
[116.367811, 39.887672],
[116.367811, 39.887855],
[116.367848, 39.888223],
[116.367861, 39.888435],
[116.367873, 39.888735],
[116.367861, 39.889131],
[116.367886, 39.889324],
[116.367911, 39.889556],
[116.367886, 39.889875],
[116.367886, 39.890068],
[116.367912, 39.890408],
[116.3679, 39.890554],
[116.367913, 39.890737],
[116.367875, 39.89095],
],
]
diya.forEach((item) => {
drawLine(
item,
'低压管线',
'#3FB25F',
)
})
const style = [
{
url: `${publicPath}/image/well/闸井-正常.png`,
anchor: new mapRef.value.AMap.Pixel(4, 4),
size: new mapRef.value.AMap.Size(18, 18),
zIndex: 99,
},
{
url: `${publicPath}/image/station/场站-正常.png`,
anchor: new mapRef.value.AMap.Pixel(4, 4),
size: new mapRef.value.AMap.Size(18, 18),
zIndex: 99,
},
{
url: `${publicPath}/image/other/tyx.png`,
anchor: new mapRef.value.AMap.Pixel(4, 4),
size: new mapRef.value.AMap.Size(18, 18),
zIndex: 99,
},
{
url: `${publicPath}/image/other/ranqi.png`,
anchor: new mapRef.value.AMap.Pixel(4, 25),
size: new mapRef.value.AMap.Size(25, 25),
zIndex: 99,
},
{
url: `${publicPath}/image/other/yuntai.png`,
anchor: new mapRef.value.AMap.Pixel(4, 25),
size: new mapRef.value.AMap.Size(25, 25),
zIndex: 99,
},
{
url: `${publicPath}/image/other/shaobing.png`,
anchor: new mapRef.value.AMap.Pixel(4, 25),
size: new mapRef.value.AMap.Size(25, 25),
zIndex: 99,
},
]
// 绘制阀门
const famen = [
{
lnglat: [116.33198, 39.901659],
name: '前街中压A闸井1',
style: 0,
type: '阀门',
},
{
lnglat: [116.33494, 39.890143],
name: '森林大第中压A闸井1',
style: 0,
type: '阀门',
},
{
lnglat: [116.373539, 39.889363],
name: '地铁中压A闸井2',
style: 0,
type: '阀门',
},
{
lnglat: [116.35036, 39.889645],
name: '阀门1',
style: 0,
type: '阀门',
},
{
lnglat: [116.353199, 39.889758],
name: '阀门2',
style: 0,
type: '阀门',
},
{
lnglat: [116.349101, 39.899876],
name: '阀门3',
style: 0,
type: '阀门',
},
{
lnglat: [116.342568, 39.876492],
name: '阀门4',
style: 0,
type: '阀门',
},
{
lnglat: [116.32702, 39.884446],
name: '阀门5',
style: 0,
type: '阀门',
},
]
drawMarker(famen, style, '阀门')
// 绘制调压站
const tiaoyazhan = [
{
lnglat: [116.334348, 39.898861],
name: '前街调压站',
style: 1,
type: '调压站',
},
{
lnglat: [116.347453, 39.889775],
name: '广安门桥调压站',
style: 1,
type: '调压站',
},
{
lnglat: [116.352986, 39.896143],
name: '东1门调压站',
style: 1,
type: '调压站',
},
{
lnglat: [116.341266, 39.884893],
name: '广外调压站',
style: 1,
type: '调压站',
},
]
drawMarker(tiaoyazhan, style, '调压站')
// 调压箱
const tiaoyaxiang = [
{
lnglat: [116.363639, 39.889555],
name: '牛街调压箱',
style: 2,
type: '调压箱',
},
{
lnglat: [116.363154, 39.896345],
name: '长椿街街调压箱',
style: 2,
type: '调压箱',
},
{
lnglat: [116.335918, 39.884888],
name: '调压箱1',
style: 2,
type: '调压箱',
},
{
lnglat: [116.326148, 39.890043],
name: '调压箱2',
style: 2,
type: '调压箱',
},
{
lnglat: [116.349244, 39.897904],
name: '调压箱3',
style: 2,
type: '调压箱',
},
{
lnglat: [116.349901, 39.889668],
name: '调压箱4',
style: 2,
type: '调压箱',
},
{
lnglat: [116.341902, 39.880576],
name: '调压箱5',
style: 2,
type: '调压箱',
},
{
lnglat: [116.350114, 39.878025],
name: '调压箱6',
style: 2,
type: '调压箱',
},
{
lnglat: [116.334561, 39.889955],
name: '调压箱7',
style: 2,
type: '调压箱',
},
{
lnglat: [116.32943, 39.8956],
name: '调压箱8',
style: 2,
type: '调压箱',
},
{
lnglat: [116.334429, 39.895105],
name: '调压箱9',
style: 2,
type: '调压箱',
},
{
lnglat: [116.345941, 39.903149],
name: '调压箱10',
style: 2,
type: '调压箱',
},
{
lnglat: [116.336214, 39.896736],
name: '调压箱11',
style: 2,
type: '调压箱',
},
{
lnglat: [116.370873, 39.883229],
name: '调压箱12',
style: 2,
type: '调压箱',
},
]
drawMarker(tiaoyaxiang, style, '调压箱')
// 燃气智能终端
const ranqi = [
{
lnglat: [116.354742, 39.896148],
name: '燃气智能终端1',
style: 3,
type: '燃气智能终端',
},
{
lnglat: [116.355325, 39.896174],
name: '燃气智能终端2',
style: 3,
type: '燃气智能终端',
},
{
lnglat: [116.33559, 39.890051],
name: '燃气智能终端3',
style: 3,
type: '燃气智能终端',
},
{
lnglat: [116.342577, 39.890012],
name: '燃气智能终端4',
style: 3,
type: '燃气智能终端',
},
{
lnglat: [116.350946, 39.877794],
name: '燃气智能终端5',
style: 3,
type: '燃气智能终端',
},
{
lnglat: [116.359178, 39.88126],
name: '燃气智能终端6',
style: 3,
type: '燃气智能终端',
},
{
lnglat: [116.357016, 39.887587],
name: '燃气智能终端7',
style: 3,
type: '燃气智能终端',
},
{
lnglat: [116.368795, 39.894798],
name: '燃气智能终端8',
style: 3,
type: '燃气智能终端',
},
{
lnglat: [116.370034, 39.8916],
name: '燃气智能终端9',
style: 3,
type: '燃气智能终端',
},
{
lnglat: [116.342899, 39.894652],
name: '燃气智能终端10',
style: 3,
type: '燃气智能终端',
},
{
lnglat: [116.341331, 39.888121],
name: '燃气智能终端11',
style: 3,
type: '燃气智能终端',
},
{
lnglat: [116.340267, 39.886529],
name: '燃气智能终端12',
style: 3,
type: '燃气智能终端',
},
]
drawMarker(ranqi, style, '燃气智能终端')
const yuntai = [
{
lnglat: [116.334723, 39.890044],
name: '云台1',
style: 4,
type: '云台',
},
{
lnglat: [116.363891, 39.889551],
name: '云台2',
style: 4,
type: '云台',
},
{
lnglat: [116.349173, 39.889916],
name: '云台3',
style: 4,
type: '云台',
},
{
lnglat: [116.352942, 39.889621],
name: '云台4',
style: 4,
type: '云台',
},
{
lnglat: [116.342465, 39.886466],
name: '云台5',
style: 4,
type: '云台',
},
]
drawMarker(yuntai, style, '云台')
const shaobing = [
{
lnglat: [116.347637, 39.889761],
name: '哨兵1',
style: 5,
type: '管线哨兵',
},
{
lnglat: [116.335197, 39.889415],
name: '哨兵2',
style: 5,
type: '管线哨兵',
},
{
lnglat: [116.349076, 39.887483],
name: '哨兵3',
style: 5,
type: '管线哨兵',
},
{
lnglat: [116.353725, 39.896141],
name: '哨兵4',
style: 5,
type: '管线哨兵',
},
{
lnglat: [116.362388, 39.896359],
name: '哨兵5',
style: 5,
type: '管线哨兵',
},
{
lnglat: [116.353198, 39.889762],
name: '哨兵6',
style: 5,
type: '管线哨兵',
},
{
lnglat: [116.321059, 39.889373],
name: '哨兵7',
style: 5,
type: '管线哨兵',
},
{
lnglat: [116.349314, 39.893697],
name: '哨兵8',
style: 5,
type: '管线哨兵',
},
{
lnglat: [116.368797, 39.88935],
name: '哨兵9',
style: 5,
type: '管线哨兵',
},
{
lnglat: [116.349191, 39.882783],
name: '哨兵10',
style: 5,
type: '管线哨兵',
},
{
lnglat: [116.340501, 39.884786],
name: '哨兵11',
style: 5,
type: '管线哨兵',
},
{
lnglat: [116.342362, 39.888086],
name: '哨兵12',
style: 5,
type: '管线哨兵',
},
{
lnglat: [116.340043, 39.888145],
name: '哨兵13',
style: 5,
type: '管线哨兵',
},
]
drawMarker(shaobing, style, '管线哨兵')
}
}, {
deep: true,
})
</script>
<template>
<div class="full-container">
<!-- 行政区/九五示范区切换 -->
<div class="show-change">
<div
v-if="showStatus === 'administration'" id="change" class="change demonstration"
@click="changeShow('demonstration')"
>
95示范区
</div>
<div
v-if="showStatus === 'demonstration'" id="change" class="change administration"
@click="changeShow('administration')"
>
行政区
</div>
</div>
<!-- 九五示范区的站，井，箱等数量 -->
<!-- -->
<div v-if="showStatus === 'demonstration'" class="show-count">
<base-over />
</div>
<!-- 左侧 -->
<div class="left-container">
<!-- 基本概况 -->
<base-over-view />
<!-- 官网类型统计 -->
<pipe-network-type style="margin-top: 20px;" />
<!-- 监测设备统计 -->
<monitor-device-count style="margin-top: 20px;" />
</div>
<!-- 右侧 -->
<div class="right-container">
<!-- 总体报警情况 -->
<all-alarm-status />
<!-- 各分公司报警统计 -->
<dept-alarm-count style="margin-top: 20px;" />
<!-- 设备运行态势 -->
<device-run-status style="margin-top: 20px;" />
</div>
<!-- 设备信息窗体 -->
<detail-info ref="detailRef" />
<!-- 地图 -->
<a-map
ref="mapRef" layer="dark" :zoom="9.2" :center="[116.372535, 40.213715]" @complete="drawBj"
@polygonClick="polygonClick" @lineClick="lineClick" @massMarksClick="massMarksClick"
/>
<!-- 图例 -->
<div v-if="showStatus === 'demonstration'" class="amap-legend1">
<div v-for="item in legendDataLeft" :key="item.name" class="legend-item">
<div class="icon" :class="legend.includes(item.name) ? '' : 'none'">
<img :src="item.img">
</div>
<div class="value" @click="clickLegend({ name: item.name, type: item.type })">
{{ item.name }}
</div>
</div>
</div>
<div v-if="showStatus === 'demonstration'" class="amap-legend2">
<div v-for="item in legendDataRight" :key="item.name" class="legend-item">
<div class="icon" :class="legend.includes(item.name) ? '' : 'none'">
<img :src="item.img">
</div>
<div class="value" @click="clickLegend({ name: item.name, type: item.type })">
{{ item.name }}
</div>
</div>
</div>
</div>
</template>
<styele lang="scss" scoped>
.show-count {
position: absolute;
z-index: 9;
left: 400px;
top: 100px;
width: 240px;
}
.show-change {
position: absolute;
top: 100px;
right: 400px;
z-index: 9;
// background-color: #ddd;
.change {
padding: 10px 20px;
text-align: center;
background: url("@/assets/fullscren/data-bg.png") no-repeat center center / cover;
border: 1px solid #249eff;
color: #fff;
&:hover {
cursor: pointer;
}
}
}
.left-container {
position: absolute;
z-index: 9;
top: 100px;
left: 15px;
background-color: rgba($color: #0B0B0F, $alpha: 0.8);
}
.right-container {
position: absolute;
z-index: 9;
top: 100px;
right: 15px;
// background-color: #0b0b0f;
background-color: rgba($color: #0B0B0F, $alpha: 0.8);
}
.amap-legend1 {
/* background: url("@/assets/images/dashboard/legend.png") no-repeat center center / cover; */
position: absolute;
z-index: 9;
bottom: 10px;
left: 400px;
/* background: rgb(68 66 66 / 80%); */
background-color: rgba($color: #0B0B0F, $alpha: 0.8);
border: 1px solid #249eff;
color: #fff;
padding: 10px;
.legend-item {
display: flex;
margin: 5px;
flex-wrap: wrap;
color: #a7ceec;
img {
height: 16px;
width: 16px;
}
.value {
margin-left: 5px;
height: 16px;
line-height: 16px;
&:hover {
cursor: pointer;
}
}
}
}
.amap-legend2 {
/* background: url("@/assets/images/dashboard/legend.png") no-repeat center center / cover; */
position: absolute;
z-index: 9;
bottom: 10px;
right: 400px;
background-color: rgba($color: #0B0B0F, $alpha: 0.8);
border: 1px solid #249eff;
color: #fff;
padding: 10px;
.legend-item {
display: flex;
margin: 5px;
flex-wrap: wrap;
color: #a7ceec;
img {
height: 20px;
width: 20px;
}
.value {
margin-left: 5px;
height: 20px;
line-height: 20px;
&:hover {
cursor: pointer;
}
}
}
}
</styele>
<style>
.full-container {
width: 100%;
height: 100vh;
}
.none {
opacity: 0;
}
.close {
width: 150px;
height: 70px;
position: fixed;
top: 0;
right: 0;
/* background-color: antiquewhite; */
&:hover {
.icon {
display: block;
}
}
.icon {
display: none;
width: 50px;
height: 50px;
background: rgb(145 144 144 / 60%);
border-radius: 50%;
line-height: 50px;
text-align: center;
font-size: 18px;
font-weight: 700;
color: #ccc;
margin: 10px auto;
&:hover {
cursor: pointer;
}
}
}
</style>
