959 lines
31 KiB
Vue
959 lines
31 KiB
Vue
<template>
|
||
<DatePicker ref="datePickerRef" style="display: none" />
|
||
<div id="map" style="width: 100%; height: 100%" v-show="prop.lineInfo"></div>
|
||
<div id="nrDeviceCard"></div>
|
||
<!-- 搜索框 -->
|
||
<div class="query-box-wrap">
|
||
<el-input
|
||
v-model.trim="inputQuery"
|
||
style="height: 46px; width: 334px"
|
||
@keyup.enter="DeviceQ"
|
||
placeholder="请输入设备名称"
|
||
>
|
||
<template #prefix>
|
||
<div class="Icon"></div>
|
||
</template>
|
||
|
||
<template #suffix>
|
||
<el-icon @click="DeviceQ" class="el-input__icon"><Search /></el-icon>
|
||
</template>
|
||
</el-input>
|
||
</div>
|
||
<!-- 搜索内容展示 -->
|
||
<div class="query-box-wrap collapse" v-show="showWrap">
|
||
<div v-if="QueryList.length == 0" class="collapse_none">查询无结果</div>
|
||
<el-collapse v-if="QueryList.length > 0 && showCollapse" v-model="activeName" accordion>
|
||
<el-collapse-item v-for="(item, i) in QueryList" :name="i">
|
||
<template #title>
|
||
{{ item.psrName }}
|
||
<span class="ml10" style="color: #0d867f">{{ item.count }}</span>
|
||
</template>
|
||
<div class="collapseBox">
|
||
<div
|
||
class="group-list__item"
|
||
:style="colorKey == k.coordinate ? 'background-color: #009ea81a;' : ''"
|
||
v-for="k in item.psrList"
|
||
@click="flyTo(k)"
|
||
>
|
||
<p>{{ k.psrName }}</p>
|
||
<p>{{ k.vlevelName }}|{{ k.maintOrgName }}</p>
|
||
</div>
|
||
</div>
|
||
</el-collapse-item>
|
||
</el-collapse>
|
||
<div
|
||
v-if="QueryList.length > 0 && !showCollapse"
|
||
class="collapse_none"
|
||
style="color: #009ea8"
|
||
@click="showCollapse = true"
|
||
>
|
||
展开搜索结果
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { onMounted, reactive, ref, nextTick } from 'vue'
|
||
import { mainHeight } from '@/utils/layout'
|
||
import { useDictData } from '@/stores/dictData'
|
||
// import { devicesDemo } from '@/assets/panorama/devicesDemo.js'
|
||
import { getAreaLineInfo } from '@/api/event-boot/areaInfo'
|
||
import DatePicker from '@/components/form/datePicker/index.vue'
|
||
import { getGridDiagramAreaData } from '@/api/device-boot/panorama'
|
||
import { Search } from '@element-plus/icons-vue'
|
||
import '@/assets/panorama/narimap.css'
|
||
import '@/assets/panorama/nrgisCommon.css'
|
||
const emit = defineEmits(['changeValue', 'drop', 'show'])
|
||
const prop = defineProps({
|
||
lineInfo: {
|
||
type: Boolean
|
||
}
|
||
})
|
||
const inputQuery: any = ref('')
|
||
const activeName: any = ref(0)
|
||
const narimap = window?.narimap
|
||
const dictData = useDictData()
|
||
const datePickerRef = ref()
|
||
const form: any = ref({})
|
||
const colorKey = ref('')
|
||
const PopKey = ref(0)
|
||
const assessList: any = ref([])
|
||
const linList: any = ref([])
|
||
const QueryList: any = ref([])
|
||
const AreaData: any = ref([])
|
||
const map: any = ref(null)
|
||
const showCollapse: any = ref(true)
|
||
const showWrap: any = ref(false)
|
||
const deviceCard: any = ref(null)
|
||
const popup: any = ref(null)
|
||
const DeviceQuery: any = ref(null)
|
||
const rPopList: any = ref([])
|
||
const powerManageGridMap: any = ref(null)
|
||
const orgId = ref(dictData.state.area[0].code)
|
||
const deptIndex = ref(dictData.state.area[0].id)
|
||
const popupOffsets = ref({
|
||
top: [0, 0],
|
||
'top-left': [0, 0],
|
||
'top-right': [0, 0],
|
||
bottom: [0, -10],
|
||
'bottom-left': [25, -35],
|
||
'bottom-right': [-25, -35],
|
||
left: [10, -10],
|
||
right: [-10, -10]
|
||
})
|
||
const mapList: any = ref([])
|
||
const flag = ref(true)
|
||
import { getAssessOverview } from '@/api/device-boot/panorama'
|
||
|
||
narimap.Require(['PSRMap', 'Thematic', 'Components.Query', 'Components.RegionSelector'], () => {
|
||
if (narimap.Config.examples.notlogin) {
|
||
initMap(narimap.Config.styles.sjDark)
|
||
} else {
|
||
//电网GIS地图服务登录
|
||
narimap.SGAuth.login()
|
||
.then((result: any) => {
|
||
if (result.success) {
|
||
console.log('登录成功')
|
||
} else {
|
||
console.log('登录失败', result)
|
||
}
|
||
//默认打开电网GIS影像图
|
||
initMap(narimap.Config.styles.sjDark)
|
||
})
|
||
.catch((err: any) => {
|
||
console.log('错误', err)
|
||
})
|
||
}
|
||
})
|
||
function initMap(styleurl: any) {
|
||
map.value = new narimap.Map({
|
||
container: 'map',
|
||
style: styleurl,
|
||
zoom: 6,
|
||
center: [116.478935, 39.997761],
|
||
controls: false,
|
||
country: true,
|
||
// 地图默认字体
|
||
localIdeographFontFamily: 'Microsoft YoHei'
|
||
})
|
||
map.value.on('load', () => {
|
||
DeviceQuery.value = new narimap.ResourceQuery.DeviceQuery()
|
||
addLayer()
|
||
|
||
nextTick(() => {
|
||
// 添加图层
|
||
Query()
|
||
})
|
||
})
|
||
}
|
||
|
||
const Query = () => {
|
||
// 添加行政区划
|
||
powerManageGridMap.value = new narimap.ManageGrid.PowerManageGridMap(map.value)
|
||
powerManageGridMap.value.init(
|
||
{
|
||
base: {
|
||
outline: {
|
||
paint: {
|
||
'line-color': '#0D867F',
|
||
'line-width': 1,
|
||
'line-opacity': 1
|
||
}
|
||
},
|
||
fill: {
|
||
paint: {
|
||
'fill-color': '#0D867F',
|
||
'fill-opacity': 0.3
|
||
}
|
||
},
|
||
label: {
|
||
paint: {
|
||
'text-color': '#063094',
|
||
'text-halo-color': '#ffffff',
|
||
'text-halo-width': 1
|
||
}
|
||
},
|
||
hover: {
|
||
type: 'all',
|
||
fill: {
|
||
paint: {
|
||
'fill-color': 'rgba(1,1,1,0)',
|
||
'fill-opacity': 0
|
||
}
|
||
},
|
||
outline: {
|
||
paint: {
|
||
'line-color': '#0D867F',
|
||
'line-width': 4,
|
||
'line-opacity': 1
|
||
}
|
||
}
|
||
}
|
||
},
|
||
levels: {
|
||
city: {
|
||
// minzoom: 10,
|
||
maxzoom: 9
|
||
}
|
||
}
|
||
},
|
||
{
|
||
initOrgIds: [orgId.value],
|
||
//是否联级，包含下属全部子部门，即同样显示编码对应的所属下级
|
||
cascade: true
|
||
}
|
||
)
|
||
powerManageGridMap.value.on('load', function () {
|
||
powerLoad()
|
||
})
|
||
|
||
setTimeout(() => {
|
||
addLine()
|
||
// const query = new narimap.Components.Query(map.value)
|
||
// query.init(map.value.getContainer())
|
||
// query.setQueryOrgId(orgId.value)
|
||
|
||
setTimeout(() => {
|
||
locatePositions({ data: dictData.state.area[0] })
|
||
}, 500)
|
||
}, 500)
|
||
}
|
||
|
||
// 添加变电站线路
|
||
const addLine = () => {
|
||
//添加电网图层
|
||
let psrmap = new narimap.PSRMap(map.value, {
|
||
orgId: orgId.value == '1100F3DE20806FADE050007F01006CBE' ? '' : orgId.value
|
||
})
|
||
psrmap.addPSR()
|
||
|
||
initDeviceCard()
|
||
setTimeout(() => {
|
||
psrmap.filterByDomain(1)
|
||
}, 0)
|
||
//添加电网要素点击事件
|
||
psrmap.on('click', (features: any) => {
|
||
console.log(features)
|
||
showCollapse.value = false
|
||
if (inputQuery.value.length == 0) showWrap.value = false
|
||
})
|
||
}
|
||
|
||
// 添加变电站弹框
|
||
const initDeviceCard = () => {
|
||
deviceCard.value && deviceCard.value.close()
|
||
|
||
let options = {
|
||
map: map.value, // map实例
|
||
container: 'nrDeviceCard', // details容器id，为用户自定义的容器名
|
||
narimap: narimap, //nariMap实例
|
||
//用户自定义功能
|
||
customButtons: {
|
||
popupButtons: {
|
||
buttons: []
|
||
},
|
||
detailsButtons: {
|
||
buttons: []
|
||
}
|
||
}
|
||
}
|
||
|
||
deviceCard.value = new nrgisCommon.EquipmentAccount.DeviceCard(options)
|
||
deviceCard.value.on('click', (res: any) => {
|
||
if (res.button.id == 'nariPopupViewDetail') {
|
||
emit('show', true)
|
||
}
|
||
setTimeout(() => {
|
||
document.querySelectorAll('.nari-tabs__close')[0].onclick = function (v: any) {
|
||
emit('show', false)
|
||
}
|
||
}, 10)
|
||
})
|
||
//
|
||
}
|
||
|
||
const grids = (row: any) => {
|
||
form.value = {
|
||
...row,
|
||
id: row.orgNo,
|
||
deptIndex: row.orgNo,
|
||
orgId: row.orgNo,
|
||
ids: [],
|
||
statisticalType: dictData.getBasicData('Statistical_Type', ['Report_Type'])[0],
|
||
isUpToGrid: row.isUpToGrid,
|
||
monitorFlag: row.isUpToGrid == 0 ? null : row.isUpToGrid
|
||
}
|
||
|
||
// 综合评估
|
||
getAssessOverview(form.value).then(res => {
|
||
assessList.value = res.data?.children
|
||
getGridDiagramAreaData({ ...form.value, deptIndex: deptIndex.value }).then((res: any) => {
|
||
AreaData.value = res.data
|
||
GridDiagramArea()
|
||
})
|
||
if (powerManageGridMap.value) powerLoad()
|
||
})
|
||
}
|
||
|
||
// 加载行政区划
|
||
const powerLoad = () => {
|
||
// dictData.state.area[0]
|
||
|
||
let colors: any = [
|
||
{
|
||
orgIds: [],
|
||
fill: {
|
||
color: '#339966'
|
||
}
|
||
},
|
||
{
|
||
orgIds: [],
|
||
fill: {
|
||
color: '#3399ff'
|
||
}
|
||
},
|
||
{
|
||
orgIds: [],
|
||
fill: {
|
||
color: '#ffcc33'
|
||
}
|
||
},
|
||
{
|
||
orgIds: [],
|
||
fill: {
|
||
color: '#ff9900'
|
||
}
|
||
},
|
||
{
|
||
orgIds: [],
|
||
fill: {
|
||
color: '#cc0000'
|
||
}
|
||
}
|
||
]
|
||
|
||
assessList.value.forEach((item: any) => {
|
||
if (item.score == 3.14159) {
|
||
} else if (item.score > 4.5) {
|
||
colors[0].orgIds.push(item.code)
|
||
} else if (item.score > 4) {
|
||
colors[1].orgIds.push(item.code)
|
||
} else if (item.score > 3) {
|
||
colors[2].orgIds.push(item.code)
|
||
} else if (item.score > 2) {
|
||
colors[3].orgIds.push(item.code)
|
||
} else if (item.score > 0) {
|
||
colors[4].orgIds.push(item.code)
|
||
}
|
||
})
|
||
|
||
powerManageGridMap.value.setColorByOrgId({
|
||
orgIdColors: colors
|
||
})
|
||
}
|
||
// 添加图层
|
||
const addLayer = () => {
|
||
map.value.loadImage(
|
||
new URL('@/assets/txzcwzj.png', import.meta.url).href, // 图片地址
|
||
(error: any, image: any) => {
|
||
if (error) throw error
|
||
|
||
//添加图片到map，第一个参数为图片设置id
|
||
map.value.addImage('poi1', image)
|
||
map.value.addLayer({
|
||
id: 'spotImg-ZY',
|
||
type: 'symbol',
|
||
minzoom: 8,
|
||
source: {
|
||
type: 'geojson',
|
||
data: {
|
||
type: 'FeatureCollection',
|
||
features: []
|
||
}
|
||
},
|
||
layout: {
|
||
// 为图层设置引用的图片ID
|
||
'icon-image': 'poi1',
|
||
'icon-size': 0.7,
|
||
'icon-ignore-placement': false,
|
||
'icon-allow-overlap': false
|
||
}
|
||
})
|
||
map.value.addLayer({
|
||
id: 'spotName',
|
||
type: 'symbol',
|
||
minzoom: 10,
|
||
source: {
|
||
type: 'geojson',
|
||
data: {
|
||
type: 'FeatureCollection',
|
||
features: []
|
||
}
|
||
},
|
||
layout: {
|
||
// 为图层设置引用的图片ID
|
||
|
||
'text-field': '{name}',
|
||
'icon-ignore-placement': false,
|
||
'text-ignore-placement': true,
|
||
'text-size': 12,
|
||
'text-max-width': 8,
|
||
'text-offset': [0, 2],
|
||
'text-font': ['Microsoft YaHei Regular']
|
||
},
|
||
paint: {
|
||
'text-color': '#ccc',
|
||
|
||
'text-halo-width': 1.33333
|
||
}
|
||
})
|
||
}
|
||
)
|
||
|
||
map.value.loadImage(
|
||
new URL('@/assets/txzdwzj.png', import.meta.url).href, // 图片地址
|
||
(error: any, image: any) => {
|
||
if (error) throw error
|
||
|
||
//添加图片到map，第一个参数为图片设置id
|
||
map.value.addImage('poi2', image)
|
||
map.value.addLayer({
|
||
id: 'spotImg-TY',
|
||
type: 'symbol',
|
||
minzoom: 8,
|
||
source: {
|
||
type: 'geojson',
|
||
|
||
data: {
|
||
type: 'FeatureCollection',
|
||
features: []
|
||
}
|
||
},
|
||
layout: {
|
||
// 为图层设置引用的图片ID
|
||
'icon-image': 'poi2',
|
||
'icon-size': 0.7,
|
||
// 'text-field': '{name}',
|
||
'icon-ignore-placement': false,
|
||
'icon-allow-overlap': false
|
||
}
|
||
})
|
||
}
|
||
)
|
||
map.value.loadImage(
|
||
new URL('@/assets/point.png', import.meta.url).href, // 图片地址
|
||
(error: any, image: any) => {
|
||
if (error) throw error
|
||
|
||
//添加图片到map，第一个参数为图片设置id
|
||
map.value.addImage('poi3', image)
|
||
map.value.addLayer({
|
||
id: 'spotImg-GJ',
|
||
type: 'symbol',
|
||
minzoom: 8,
|
||
source: {
|
||
type: 'geojson',
|
||
data: {
|
||
type: 'FeatureCollection',
|
||
features: []
|
||
}
|
||
},
|
||
layout: {
|
||
// 为图层设置引用的图片ID
|
||
'icon-image': 'poi3',
|
||
'icon-size': 0.6,
|
||
'icon-ignore-placement': false,
|
||
'icon-allow-overlap': false
|
||
},
|
||
Paint: {
|
||
'icon-opacity': 10
|
||
}
|
||
})
|
||
}
|
||
)
|
||
map.value.loadImage(
|
||
new URL('@/assets/dw.png', import.meta.url).href, // 图片地址
|
||
(error: any, image: any) => {
|
||
if (error) throw error
|
||
|
||
//添加图片到map，第一个参数为图片设置id
|
||
map.value.addImage('poi4', image)
|
||
map.value.addLayer({
|
||
id: 'spotImg-DW',
|
||
type: 'symbol',
|
||
minzoom: 8,
|
||
zIndex: 9999,
|
||
source: {
|
||
type: 'geojson',
|
||
|
||
data: {
|
||
type: 'FeatureCollection',
|
||
features: []
|
||
}
|
||
},
|
||
layout: {
|
||
// 为图层设置引用的图片ID
|
||
'icon-image': 'poi4',
|
||
'icon-size': 0.35,
|
||
// 'text-field': '{name}',
|
||
'icon-ignore-placement': false,
|
||
'icon-allow-overlap': false
|
||
}
|
||
})
|
||
}
|
||
)
|
||
// 添加地图弹框
|
||
map.value.on('click', (e: any) => {
|
||
const features = map.value.queryRenderedFeatures(e.point, {
|
||
layers: ['spotImg-ZY', 'spotImg-TY', 'spotImg-GJ', 'spotImg-DW']
|
||
})
|
||
|
||
if (features.length > 0) {
|
||
popup.value && popup.value.remove()
|
||
setTimeout(() => {
|
||
deviceCard.value.popup && deviceCard.value.popup.remove()
|
||
}, 10)
|
||
let data = JSON.parse(features[0].properties.list)
|
||
|
||
popup.value = new narimap.Popup({ offset: popupOffsets.value, className: 'my-popup' })
|
||
.setLngLat([data.lng, data.lat])
|
||
.setHTML(
|
||
` <div class="popup-box">
|
||
<div class="popup_content">
|
||
<img src="${data.imageUrl}" />
|
||
<div>
|
||
<div style="display: flex">
|
||
<span class="title">${data.lineName}</span>
|
||
<span
|
||
class="state"
|
||
style="background-color: ${data.comFlag == 0 ? '#ff0000' : '#3ab34a'};"
|
||
>
|
||
${data.comFlag == 0 ? '中断' : '在线'}
|
||
</span>
|
||
</div>
|
||
<div class="info">
|
||
<span>${data.subName} </span>
|
||
<span>${data.voltageName}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="popup_footer">
|
||
<span id="ids" data-sid="${data.lineId}">
|
||
查看详情
|
||
</span>
|
||
</div>
|
||
</div>`
|
||
)
|
||
.addTo(map.value)
|
||
let html = document.getElementById('ids')
|
||
if (html)
|
||
html.onclick = function (v: any) {
|
||
// console.log(e.target.dataset.sid)
|
||
emit('drop', v.target.dataset.sid)
|
||
}
|
||
}
|
||
})
|
||
|
||
// 监听地图缩放完成事件
|
||
map.value.on('zoomend', (e: any) => {
|
||
// console.log(123, map.value.getCenter())
|
||
|
||
if (map.value.getZoom() > 8.5 || map.value.getZoom() < 6) {
|
||
|
||
rPopList.value.map((item: any) => item.remove())
|
||
rPopList.value = []
|
||
} else {
|
||
if (mapList.value.length > 0) radiusPop()
|
||
}
|
||
})
|
||
}
|
||
//添加多个监测点
|
||
const addMarkers = async (row?: any, key?: any) => {
|
||
if (map.value == null) return
|
||
let params = {
|
||
deptIndex: deptIndex.value,
|
||
monitorFlag: 2,
|
||
powerFlag: 2,
|
||
searchBeginTime: datePickerRef.value.timeValue[0],
|
||
searchEndTime: datePickerRef.value.timeValue[1],
|
||
serverName: 'event-boot',
|
||
statisticalType: {},
|
||
...row
|
||
}
|
||
|
||
let { data } = await getAreaLineInfo(params)
|
||
|
||
let r = 0.0035
|
||
let tempFeatureZ: any = []
|
||
let tempFeatureT: any = []
|
||
data.forEach((item: any) => {
|
||
if (item.children.length > 10 && item.children.length < 100) {
|
||
r = 0.0055
|
||
} else if (item.children.length >= 100) {
|
||
r = 0.01055
|
||
}
|
||
|
||
item.children.forEach((val: any, i: number) => {
|
||
val.lng = item.lng + r * Math.cos((2 * Math.PI * i) / item.children.length)
|
||
val.lat = item.lat + r * Math.sin((2 * Math.PI * i) / item.children.length)
|
||
val.imageUrl =
|
||
val.comFlag == 0
|
||
? new URL('@/assets/txzdwzj.png', import.meta.url).href
|
||
: new URL('@/assets/txzcwzj.png', import.meta.url).href
|
||
// // 监测点图标
|
||
|
||
let tempFeature = {
|
||
type: 'Feature',
|
||
|
||
geometry: {
|
||
type: 'Point',
|
||
coordinates: [val.lng, val.lat]
|
||
},
|
||
properties: {
|
||
name: val.lineName,
|
||
list: val
|
||
}
|
||
}
|
||
if (key == 1) {
|
||
switch (val.type) {
|
||
case 0:
|
||
tempFeatureZ.push(tempFeature)
|
||
|
||
break
|
||
case 1:
|
||
tempFeatureT.push(tempFeature)
|
||
break
|
||
}
|
||
} else {
|
||
switch (val.comFlag) {
|
||
case 0:
|
||
tempFeatureT.push(tempFeature)
|
||
break
|
||
case 1:
|
||
tempFeatureZ.push(tempFeature)
|
||
break
|
||
}
|
||
}
|
||
})
|
||
})
|
||
|
||
if (flag.value) {
|
||
linList.value = [...tempFeatureZ, ...tempFeatureT]
|
||
|
||
flag.value = false
|
||
}
|
||
// 清除图层图片
|
||
map.value.getSource('spotImg-ZY').setData({
|
||
type: 'FeatureCollection',
|
||
features: []
|
||
})
|
||
map.value.getSource('spotImg-TY').setData({
|
||
type: 'FeatureCollection',
|
||
features: []
|
||
})
|
||
map.value.getSource('spotImg-GJ').setData({
|
||
type: 'FeatureCollection',
|
||
features: []
|
||
})
|
||
map.value.getSource('spotImg-DW').setData({
|
||
type: 'FeatureCollection',
|
||
features: []
|
||
})
|
||
if (key != undefined) map.value.easeTo({ zoom: 8.1 })
|
||
|
||
if (key == undefined) {
|
||
map.value.getSource('spotImg-DW').setData({
|
||
type: 'FeatureCollection',
|
||
features: [...tempFeatureT, ...tempFeatureZ]
|
||
})
|
||
} else if (key == 1) {
|
||
map.value.getSource('spotImg-ZY').setData({
|
||
type: 'FeatureCollection',
|
||
features: tempFeatureZ
|
||
})
|
||
map.value.getSource('spotImg-TY').setData({
|
||
type: 'FeatureCollection',
|
||
features: tempFeatureT
|
||
})
|
||
} else {
|
||
map.value.getSource('spotImg-ZY').setData({
|
||
type: 'FeatureCollection',
|
||
features: [...tempFeatureZ, ...tempFeatureT]
|
||
})
|
||
// map.value.getSource('spotImg-TY').setData({
|
||
// type: 'FeatureCollection',
|
||
// features: tempFeatureT
|
||
// })
|
||
}
|
||
|
||
// console.log('🚀 ~ addMarkers ~ map.value.getStyle().layers:', map.value.getStyle().layers)
|
||
const layers = map.value.getStyle().layers
|
||
const topLayer = layers[layers.length - 1]
|
||
map.value.moveLayer('spotImg-DW', topLayer.id)
|
||
map.value.moveLayer('spotImg-ZY', topLayer.id)
|
||
map.value.moveLayer('spotImg-TY', topLayer.id)
|
||
map.value.moveLayer('spotImg-GJ', topLayer.id)
|
||
|
||
map.value.getSource('spotName').setData({
|
||
type: 'FeatureCollection',
|
||
features: [...tempFeatureT, ...tempFeatureZ]
|
||
})
|
||
}
|
||
// 统计弹框数据
|
||
const GridDiagramArea = () => {
|
||
let List = [
|
||
{
|
||
name: '唐山',
|
||
LngLat: [118.335849137, 39.7513593355]
|
||
},
|
||
{
|
||
name: '张家口',
|
||
LngLat: [115.032504679, 40.8951549951]
|
||
},
|
||
{
|
||
name: '秦皇岛',
|
||
LngLat: [119.185113833, 40.1179119754]
|
||
},
|
||
{
|
||
name: '承德',
|
||
LngLat: [117.548498365, 41.3775890632]
|
||
},
|
||
{
|
||
name: '廊坊',
|
||
LngLat: [116.628004129, 39.0589378611]
|
||
}
|
||
]
|
||
|
||
List.forEach((item: any) => {
|
||
assessList.value.forEach((y: any) => {
|
||
if (item.name == y.name) {
|
||
if (y.score == 3.14159) {
|
||
} else if (y.score > 4.5) {
|
||
item.background = '#33996696'
|
||
} else if (y.score > 4) {
|
||
item.background = '#3399ff96'
|
||
} else if (y.score > 3) {
|
||
item.background = '#ffcc3396'
|
||
} else if (y.score > 2) {
|
||
item.background = '#ff990096'
|
||
} else if (y.score > 0) {
|
||
item.background = '#cc000096'
|
||
}
|
||
}
|
||
})
|
||
|
||
AreaData.value.forEach((k: any, i: any) => {
|
||
if (item.name == k.orgName) {
|
||
k.LngLat = item.LngLat
|
||
k.background = item.background
|
||
}
|
||
})
|
||
})
|
||
mapList.value = AreaData.value.filter((item: any) => item.orgName != '超高压' && item.orgName != '风光储')
|
||
setTimeout(() => {
|
||
radiusPop()
|
||
}, 0)
|
||
}
|
||
// 添加统计弹框
|
||
const radiusPop = (k?: number) => {
|
||
if (k != undefined) PopKey.value = k
|
||
if (rPopList.value.length > 0) {
|
||
rPopList.value.map((item: any) => item.remove())
|
||
rPopList.value = []
|
||
}
|
||
|
||
mapList.value.forEach((item: any, i: number) => {
|
||
let infoText = ''
|
||
if (PopKey.value == 0) {
|
||
// 监测点
|
||
infoText = `<img src="${new URL(`@/assets/img/JCD-ZS.png`, import.meta.url)}" />
|
||
<div class="infoBox">
|
||
<div id="clickZs${i}" data-line="${item.lineList}" data-alarm="${
|
||
item.alarmList
|
||
}" data-key="0">总数<br/>${item.lineNum}</div>
|
||
<div id="clickZx${i}" data-alarm="${item.onlineList}" data-key="0">在线<br/>${
|
||
item.onlineNum
|
||
}</div>
|
||
<div id="clickGj${i}" data-line="" data-alarm="${item.alarmList}" data-key="1">告警<br/>${
|
||
item.alarm
|
||
}</div>
|
||
</div>`
|
||
} else if (PopKey.value == 1) {
|
||
// 变电站
|
||
infoText = `<img src="${new URL(`@/assets/img/BDZ-ZS.png`, import.meta.url)}" />
|
||
<div class="infoBox">
|
||
<div id="clickZs${i}" data-line="${item.lineList}" data-alarm="${
|
||
item.alarmSubList
|
||
}" data-key="1">总数<br/>${item.subNum}</div>
|
||
<div id="clickGj${i}" data-line="" data-alarm="${item.alarmSubList}" data-key="1">告警<br/>${
|
||
item.alarmSubNum
|
||
}</div>
|
||
</div>`
|
||
} else if (PopKey.value == 2) {
|
||
// 终端
|
||
infoText = `<img src="${new URL(`@/assets/img/ZD-ZS.png`, import.meta.url)}" />
|
||
<div class="infoBox">
|
||
<div id="clickZs${i}" data-line="${item.lineList}" data-alarm="${
|
||
item.onlineList
|
||
}" data-key="2">总数<br/>${item.deviceNum}</div>
|
||
<div id="clickGj${i}" data-line="" data-alarm="${item.onlineList}" data-key="2">在运<br/>${
|
||
item.onDevice
|
||
}</div>
|
||
</div>`
|
||
}
|
||
|
||
let pop = new narimap.Popup({
|
||
offset: popupOffsets.value,
|
||
className: 'my-radiusPop',
|
||
closeButton: false,
|
||
closeOnClick: false
|
||
})
|
||
.setLngLat(item.LngLat)
|
||
.setHTML(
|
||
`<div class="sgmap-popup-content" style="background-color: ${item.background};">
|
||
<div style="display: flex;">` +
|
||
infoText +
|
||
` </div>
|
||
</div>`
|
||
)
|
||
.addTo(map.value)
|
||
rPopList.value.push(pop)
|
||
let html: any = document.getElementById(`clickZs${i}`)
|
||
let html1: any = document.getElementById(`clickZx${i}`)
|
||
let html2: any = document.getElementById(`clickGj${i}`)
|
||
if (html)
|
||
html.onclick = function (v: any) {
|
||
popMarkers(v.target.dataset.line?.split(','), v.target.dataset.alarm?.split(','), v.target.dataset.key)
|
||
}
|
||
if (html1)
|
||
html1.onclick = function (v: any) {
|
||
popMarkers([], v.target.dataset.alarm?.split(','), v.target.dataset.key)
|
||
}
|
||
if (html2)
|
||
html2.onclick = function (v: any) {
|
||
|
||
popMarkers([], v.target.dataset.alarm?.split(','), v.target.dataset.key)
|
||
}
|
||
})
|
||
}
|
||
// 点击弹框调用点加载
|
||
const popMarkers = (coutList: any, alarmList: any, key: any) => {
|
||
addMarkers(
|
||
{
|
||
coutList: coutList,
|
||
alarmList: alarmList,
|
||
type: 1
|
||
},
|
||
key
|
||
)
|
||
}
|
||
|
||
const locatePositions = (e: any) => {
|
||
if (map.value != null) {
|
||
deptIndex.value = e.data.id
|
||
// 加载点
|
||
addMarkers()
|
||
|
||
powerManageGridMap.value.drillDown(
|
||
{
|
||
// 判断超高压
|
||
orgId:
|
||
e.data.code == '1100F3DE246A6FADE050007F01006CBE'
|
||
? '1100F3DE20806FADE050007F01006CBE'
|
||
: e.data.code,
|
||
onlyDisplay: true
|
||
},
|
||
|
||
)
|
||
}
|
||
}
|
||
// 电网查询功能
|
||
const DeviceQ = () => {
|
||
showCollapse.value = true
|
||
if (inputQuery.value.length == 0) return
|
||
|
||
let list = []
|
||
// linList.value
|
||
DeviceQuery.value.queryDeviceByName(
|
||
{
|
||
orgId: orgId.value,
|
||
maxRecord: 9999,
|
||
keyword: inputQuery.value,
|
||
devTypes: [
|
||
{
|
||
devType: 'zf05',
|
||
distribution: 1
|
||
},
|
||
{
|
||
devType: 'zf01',
|
||
distribution: 1
|
||
},
|
||
{
|
||
devType: 'zf02',
|
||
distribution: 1
|
||
},
|
||
{
|
||
devType: 'zf03',
|
||
distribution: 1
|
||
},
|
||
{
|
||
devType: 'zf04',
|
||
distribution: 1
|
||
}
|
||
]
|
||
},
|
||
(res: any) => {
|
||
list = res.result.psrDataList.map((item: any) => {
|
||
item.psrName = item.psrList[0].psrTypeName
|
||
return item
|
||
})
|
||
let regex = new RegExp(inputQuery.value, 'i')
|
||
let data = linList.value
|
||
.filter((item: any) => regex.test(item.properties.name))
|
||
.map((item: any) => {
|
||
return {
|
||
psrName: item.properties.name,
|
||
vlevelName: item.properties.list.voltageScale,
|
||
maintOrgName: item.properties.list.gdName,
|
||
coordinate: [item.properties.list.lng, item.properties.list.lat]
|
||
}
|
||
})
|
||
// data.replace(//s/g,',')
|
||
|
||
// data
|
||
if (data.length > 0) {
|
||
list.push({
|
||
count: data.length,
|
||
psrList: data,
|
||
psrName: '监测点'
|
||
})
|
||
}
|
||
QueryList.value = list
|
||
showWrap.value = true
|
||
}
|
||
)
|
||
}
|
||
// 搜索信息定位
|
||
const flyTo = (row: any, zoom?: number) => {
|
||
if (!map.value) return
|
||
colorKey.value = row.coordinate
|
||
map.value.flyTo({
|
||
center:
|
||
typeof row.coordinate === 'string'
|
||
? narimap.Projection.mercatorToWgs84(row.coordinate.split(' ').map(Number))
|
||
: row.coordinate, // 位置，飞行后的地图中心点
|
||
zoom: zoom || 16, // 飞行后的地图缩放级别
|
||
bearing: 0, // 地图的旋转角度，0-360之间的数字，0表示正北，90表示正东
|
||
pitch: 0, // 地图的倾斜角，介于0-60之间的数字，0表示俯视视图，60表示垂直视图
|
||
speed: 2 // 地图视图移动速度
|
||
})
|
||
}
|
||
|
||
defineExpose({ locatePositions, addMarkers, grids, DeviceQ, radiusPop, flyTo })
|
||
const height = mainHeight(20)
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@use '@/views/pqs/qualityInspeection/panorama/components/style/map.scss';
|
||
</style>
|