Web/admin-sjzx
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

同步现场电网一张图

Browse Source
This commit is contained in:
GGJ
2024-05-14 18:28:27 +08:00
parent 25f5272967
commit 91ab15ecab
27 changed files with 1449 additions and 916 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/views/pqs/qualityInspeection/panorama/components/cityMapL.vue
View File

@@ -115,7 +115,7 @@ const info = (row: any) => {
label: {
show: true,
position: 'top',
fontSize: 12
fontSize: 10
}
}
]
@@ -142,7 +142,7 @@ const info = (row: any) => {
},
{
type: 'value',
name: '在线率',
name: '%',
splitLine: {
show: false
},
@@ -165,7 +165,7 @@ const info = (row: any) => {
label: {
show: true,
position: 'top',
fontSize: 12
fontSize: 10
}
},
{
@@ -176,7 +176,7 @@ const info = (row: any) => {
label: {
show: true,
position: 'top',
fontSize: 12
fontSize: 10
}
}
]
@@ -223,7 +223,7 @@ const info = (row: any) => {
label: {
show: true,
position: 'top',
fontSize: 12
fontSize: 10
}
}
]

9
src/views/pqs/qualityInspeection/panorama/components/cityMapR.vue
View File

@@ -342,7 +342,7 @@ const info = (row: any) => {
axisLabel: {
color: '#000',
fontSize: 12,
interval:0
interval: 0
}
},
grid: {
@@ -361,7 +361,7 @@ const info = (row: any) => {
label: {
show: true,
position: 'top',
fontSize: 12,
fontSize: 10,
formatter: function (params: any) {
return `${params.value == 3.14159 ? '' : params.value}`
}
@@ -374,7 +374,7 @@ const info = (row: any) => {
label: {
show: true,
position: 'top',
fontSize: 12,
fontSize: 10,
formatter: function (params: any) {
return `${params.value == 3.14159 ? '' : params.value}`
}
@@ -415,7 +415,7 @@ const info = (row: any) => {
label: {
show: true,
position: 'top',
fontSize: 12
fontSize: 10
}
}
]
@@ -548,6 +548,7 @@ defineExpose({ info, show })
}
.monitoringPoints {
display: grid;
font-size: 12px;
grid-template-columns: 1fr 1fr 1fr;
margin-top: 10px;
margin-bottom: 10px;

20
src/views/pqs/qualityInspeection/panorama/components/details/evaluate.vue
View File

@@ -5,29 +5,29 @@
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="300px" :data="tableData">
<vxe-column field="deptName" title="地市" />
<vxe-column field="assessData" title="综合评估得分" :formatter="formatter" />
<vxe-column field="qualifyData" title="指标合格率" :formatter="formatter" />
<vxe-colgroup title="各项指标得分">
<vxe-column field="qualifyData" title="指标合格率(%)" :formatter="formatter" />
<vxe-colgroup title="电压偏差">
<vxe-column field="vdevAssessData" title="评估得分" :formatter="formatter" />
<vxe-column field="vdevQualifyData" title="指标合格率" :formatter="formatter" />
<vxe-column field="vdevQualifyData" title="指标合格率(%)" :formatter="formatter" />
</vxe-colgroup>
<vxe-colgroup title="频率偏差">
<vxe-column field="freqAssessData" title="评估得分" :formatter="formatter" />
<vxe-column field="freqQualifyData" title="指标合格率" :formatter="formatter" />
<vxe-column field="freqQualifyData" title="指标合格率(%)" :formatter="formatter" />
</vxe-colgroup>
<vxe-colgroup title="谐波含量">
<vxe-colgroup title="电压总谐波畸变率">
<vxe-column field="harmAssessData" title="评估得分" :formatter="formatter" />
<vxe-column field="harmQualifyData" title="指标合格率" :formatter="formatter" />
<vxe-column field="harmQualifyData" title="指标合格率(%)" :formatter="formatter" />
</vxe-colgroup>
<vxe-colgroup title="电压闪变">
<vxe-column field="flickerAssessData" title="评估得分" :formatter="formatter" />
<vxe-column field="flickerQualifyData" title="指标合格率" :formatter="formatter" />
<vxe-column field="flickerQualifyData" title="指标合格率(%)" :formatter="formatter" />
</vxe-colgroup>
<vxe-colgroup title="三相不平衡度">
<vxe-colgroup title="三相电压不平衡度">
<vxe-column field="unbalanceAssessData" title="评估得分" :formatter="formatter" />
<vxe-column field="unbalanceQualifyData" title="指标合格率" :formatter="formatter" />
<vxe-column field="unbalanceQualifyData" title="指标合格率(%)" :formatter="formatter" />
</vxe-colgroup>
</vxe-colgroup>
</vxe-table>
</div>
<div style="height: 300px; margin-top: 10px">

8
src/views/pqs/qualityInspeection/panorama/components/details/point.vue
View File

@@ -33,11 +33,11 @@
<div class="title">
<span>区域监测点统计</span>
</div>
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="300px" :data="tableData">
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="320px" :data="tableData">
<vxe-column field="orgName" title="区域" :formatter="formatter" />
<vxe-column field="num" title="监测点个数" :formatter="formatter" />
<vxe-column field="integrityRate" title="数据完整率(%)" />
<vxe-column field="onLineRate" title="数据在线率(%)" />
<vxe-column field="integrityRate" title="完整率(%)" />
<vxe-column field="onLineRate" title="在线率(%)" />
<vxe-column field="outOfStandardRate" title="超标监测点占比(%)" />
</vxe-table>
</div>
@@ -99,7 +99,7 @@ const analysis = (e: any) => {
trendEChart.value = {
title: {
text: '监测点数量'
text: '在线监测点数量'
},
xAxis: {
name: '时间',

2
src/views/pqs/qualityInspeection/panorama/components/details/stand.vue
View File

@@ -52,7 +52,7 @@
<div class="title mb10">
<span>区域变电站统计</span>
</div>
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="300px" :data="tableData">
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="320px" :data="tableData">
<vxe-column field="name" title="区域" />
<vxe-column field="num" title="变电站总数" />
<vxe-column field="num1" title="无污染数量" :formatter="formatter" />

30
src/views/pqs/qualityInspeection/panorama/components/details/steadyState.vue
View File

@@ -2,7 +2,7 @@
<template>
<!-- 终端 -->
<el-dialog draggable title="稳态电能质量水平评估统计" v-model="dialogVisible" width="1400px">
<el-row style="height: 330px" :gutter="20">
<el-row style="height: 300px" :gutter="20">
<el-col :span="12">
<div class="title">
<span>稳态电能质量水平评估</span>
@@ -42,7 +42,7 @@
<span>稳态电能质量水平评估环比变化</span>
</div>
<div class="pie">
<div style="height: 260px; width: 100%" ref="chartRef"></div>
<div style="height: 250px; width: 100%" ref="chartRef"></div>
</div>
</el-col>
</el-row>
@@ -50,7 +50,7 @@
<div class="title">
<span>区域稳态电能质量水平评估</span>
</div>
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="300px" :data="tableData">
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="360px" :data="tableData">
<vxe-column field="deptName" title="区域" />
<vxe-column field="onlineNum" title="在线监测点数量(个)" />
<vxe-column field="overNum" title="超标监测点数量(个)" />
@@ -103,15 +103,21 @@ const tableData: any = ref([])
const title = ['电压偏差', '频率偏差', '电压总谐波畸变率', '闪变', '三相电压不平衡度']
const echart = (row: any) => {
let maxList: any = []
row.forEach((item: any) => {
maxList.push(...(item.ratioList || [0]))
})
let max = Math.max(...maxList) > 50 ? 100 : 50
let chart = echarts.init(chartRef.value as HTMLDivElement)
let dataname = ['频率偏差', '电压偏差', '电压总谐波畸变率', '三相电压不平衡度', '闪变']
let datamax = [100, 100, 100, 100, 100, 100]
// let datamax = [100, 100, 100, 100, 100, 100]
let indicator = []
for (let i = 0; i < dataname.length; i++) {
indicator.push({
name: dataname[i],
max: datamax[i]
max: max
})
}
@@ -150,8 +156,8 @@ const echart = (row: any) => {
}
},
radar: {
center: ['50%', '50%'],
radius: '65%',
center: ['50%', '60%'],
radius: '75%',
startAngle: 90,
splitNumber: 5,
splitArea: {
@@ -252,17 +258,17 @@ defineExpose({ open })
justify-content: space-around;
}
.evaluationData {
height: 40px;
height: 33px;
margin: 8px 30px;
width: 100%;
box-shadow: 1px 1px 1px 1px #e8e3e3;
display: flex;
font-size: 18px;
line-height: 40px;
line-height: 35px;
img {
height: 30px;
width: 30px;
margin: 5px 30px;
height: 25px;
width: 25px;
margin: 4px 20px 0px 30px;
}
}

47
src/views/pqs/qualityInspeection/panorama/components/details/technique.vue
View File

@@ -2,14 +2,14 @@
<template>
<el-dialog draggable title="技术监督管理统计" v-model="dialogVisible" width="1400px">
<div>
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="300px" :data="tableData">
<vxe-column field="devName" />
<vxe-column field="devName" title="异常问题总数" />
<vxe-column field="devName" title="已关联工单数" />
<vxe-column field="devName" title="工单转换率(%)" />
<vxe-column field="devName" title="工单总数" />
<vxe-column field="devName" title="已处理工单数" />
<vxe-column field="devName" title="工单处置率(%)" />
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="320px" :data="tableData">
<vxe-column field="devName" title="区域" />
<vxe-column field="num" title="异常问题总数" />
<vxe-column field="num" title="已关联工单数" />
<vxe-column field="num" title="工单转换率(%)" />
<vxe-column field="num" title="工单总数" />
<vxe-column field="num" title="已处理工单数" />
<vxe-column field="num" title="工单处置率(%)" />
</vxe-table>
</div>
<div style="height: 300px; margin-top: 10px">
@@ -24,7 +24,36 @@ import { defaultAttribute } from '@/components/table/defaultAttribute'
const dialogVisible: any = ref(false)
const tableData: any = ref([])
const tableData: any = ref([
{
devName: '张家口',
num: ''
},
{
devName: '秦皇岛',
num: ''
},
{
devName: '承德',
num: ''
},
{
devName: '唐山',
num: ''
},
{
devName: '廊坊',
num: ''
},
{
devName: '风光储',
num: ''
},
{
devName: '超高压',
num: ''
}
])
const picEChart = ref({
title: {

12
src/views/pqs/qualityInspeection/panorama/components/details/temporaryState.vue
View File

@@ -2,7 +2,7 @@
<template>
<el-dialog draggable title="暂态电能质量水平评估统计" v-model="dialogVisible" width="1400px">
<div>
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="300px" :data="tableData">
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="360px" :data="tableData">
<vxe-column field="name" title="区域" />
<vxe-column field="sagTimes" title="暂降次数" />
@@ -16,22 +16,22 @@
</vxe-colgroup>
</vxe-table>
</div>
<div style="height: 300px; margin-top: 10px; display: flex">
<div style="height: 250px; margin-top: 10px; display: flex">
<!--
-->
<div class="statistics-main">
<div class="statistics-box">
<MyEChart style="height: 300px" :options="picEChart" />
<MyEChart style="height: 250px" :options="picEChart" />
<el-table size="small" height="300px" :data="descentData">
<el-table size="small" height="250px" :data="descentData">
<el-table-column prop="name" label="暂降原因" width="80px" align="center" />
<el-table-column prop="value" label="暂降次数" width="80px" align="center" />
</el-table>
</div>
<div class="statistics-box">
<MyEChart style="height: 300px" :options="picEChart1" />
<el-table size="small" height="300px" :data="resembleData">
<MyEChart style="height: 250px" :options="picEChart1" />
<el-table size="small" height="250px" :data="resembleData">
<el-table-column prop="name" label="暂降类型" width="80px" align="center" />
<el-table-column prop="value" label="暂降次数" width="80px" align="center" />
</el-table>

10
src/views/pqs/qualityInspeection/panorama/components/details/terminal.vue
View File

@@ -52,12 +52,12 @@
<div class="title">
<span>区域终端统计</span>
</div>
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="300px" :data="tableData">
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="320px" :data="tableData">
<vxe-column field="orgName" title="区域" />
<vxe-column field="runNum" title="运行个数 " />
<vxe-column field="overhaulNum" title="检修个数 " />
<vxe-column field="refundNum" title="退役个数" />
<vxe-column field="onLineRate" title="数据在线率(%)" />
<vxe-column field="onLineRate" title="终端在线率(%)" />
</vxe-table>
</div>
</el-dialog>
@@ -177,14 +177,16 @@ const analysis = (e: any) => {
getGridDiagramDevTendency({ ...rowList.value, searchBeginTime: time, type: e }).then(res => {
let name = []
let data = []
let num = 0
for (let k in res.data) {
name.push(k)
data.push(res.data[k])
num = num + res.data[k]
data.push(num)
}
trendEChart.value = {
title: {
text: '终端接入数量'
text: '终端接入总数量'
},
xAxis: {
name: '时间',

12
src/views/pqs/qualityInspeection/panorama/components/line/history.vue
View File

@@ -16,7 +16,7 @@
></el-option>
</el-option-group>
</el-select>
<MyEChart :options="list[0]?.option" :style="`height: calc(${rowHeight} - 31px)`" />
<MyEChart v-loading="loading" :options="list[0]?.option" :style="`height: calc(${rowHeight} - 31px)`" />
</template>
<script setup lang="ts">
@@ -34,6 +34,7 @@ const prop = defineProps({
})
const datePickerRef = ref()
const loading = ref(true)
const traceability = ref<any>([])
const list = ref<any>([])
const rowHeight = mainHeight(-80, 3).height
@@ -49,6 +50,7 @@ const formData: any = reactive({
})
const History = () => {
loading.value = true
formData.lineId = [prop.lineId]
formData.searchBeginTime = datePickerRef.value.timeValue[0]
formData.searchEndTime = datePickerRef.value.timeValue[1]
@@ -1123,12 +1125,12 @@ const rendering = () => {
}
opitonserise.push(data)
} else if (item.chufa !== undefined && item2 == '暂态触发点') {
console.log(123,new URL('@/assets/point.png', import.meta.url).href);
console.log(123, new URL('@/assets/point.png', import.meta.url).href)
let data = {
name: item2,
type: 'scatter',
symbol:`image://`+ new URL('@/assets/point.png', import.meta.url).href,
symbol: `image://` + new URL('@/assets/point.png', import.meta.url).href,
symbolSize: 16,
itemStyle: {
width: '16px',
@@ -1505,13 +1507,13 @@ const getEcharts = () => {
]
}
})
loading.value = false
}
onMounted(() => {
nextTick(() => {
setTimeout(() => {
History()
}, 0)
})
})
defineExpose({ History })

37
src/views/pqs/qualityInspeection/panorama/components/line/info.vue
View File

@@ -37,13 +37,21 @@
<MyEChart :style="`height: calc(${rowHeight} - 31px)`" :options="onLineCharts" />
</div>
</el-col>
<el-col :span="8">
<h3 class="mb10 iconBox">
<span></span>
暂态事件统计
</h3>
<MyEChart :style="`height: calc(${rowHeight} - 31px)`" :options="incidentCharts" />
</el-col>
</el-row>
<el-row :gutter="20" class="mt10" :style="`height:${rowHeight}`">
<el-col :span="8">
<h3 class="mb10 iconBox">
<span></span>
监测点总体评价结论
</h3>
<div class="evaluationData">
<el-row style="width: 96%" class="row pb5">
<el-col :span="12" style="display: flex">
@@ -72,8 +80,6 @@
</el-row>
</div>
</el-col>
</el-row>
<el-row :gutter="20" class="mt10" :style="`height:${rowHeight}`">
<el-col :span="8">
<h3 class="mb10 iconBox">
<span></span>
@@ -81,13 +87,6 @@
</h3>
<div :style="`height: calc(${rowHeight} - 31px)`" ref="chartRef"></div>
</el-col>
<el-col :span="8">
<h3 class="mb10 iconBox">
<span></span>
暂态事件统计
</h3>
<MyEChart :style="`height: calc(${rowHeight} - 31px)`" :options="incidentCharts" />
</el-col>
</el-row>
<el-row :gutter="20" class="mt10" :style="`height:${rowHeight}`">
<el-col :span="24">
@@ -119,8 +118,7 @@ import {
getLineAssess,
getEventDetailByLineId
} from '@/api/device-boot/panorama'
import { title } from 'process'
import { fontWeight } from 'html2canvas/dist/types/css/property-descriptors/font-weight'
const emit = defineEmits(['back'])
const dropList: any = ref({})
const evaluationData: any = ref([])
@@ -227,7 +225,7 @@ const open = async (id: string) => {
// 稳态指标合格率
})
// 在线率
getTotalOnlineRates(form).then((res: any) => {
getTotalOnlineRates({ ...form, id: dropList.value.devId, ids: [dropList.value.devId] }).then((res: any) => {
let num = (res.data || 0) / 100
onLineCharts.value = {
title: {
@@ -375,8 +373,8 @@ const open = async (id: string) => {
]
incidentCharts.value = {
title: {
text: `${res.data?.swellTimes + res.data?.sagTimes + res.data?.interruptTimes}`,
left: '37%',
text: ' ' + (data[0].value + data[1].value + data[2].value),
left: '41%',
top: '40%',
textStyle: {
fontWeight: 600,
@@ -397,7 +395,6 @@ const open = async (id: string) => {
top: 'center',
right: '10%',
formatter: function (e: any) {
console.log('🚀 ~ open ~ e:', e)
return e + ' ' + data.filter(item => item.name == e)[0].value + '条'
}
},
@@ -412,8 +409,8 @@ const open = async (id: string) => {
series: [
{
type: 'pie',
center: ['40%', '50%'],
radius: ['50%', '70%'],
center: ['45%', '50%'],
radius: ['60%', '80%'],
label: {
show: false,
position: 'outside',
@@ -590,12 +587,12 @@ defineExpose({ open })
display: grid;
grid-template-rows: repeat(5, auto);
.row {
margin: 5px 2%;
margin: 4px 2%;
width: 100%;
box-shadow: 1px 1px 1px 1px #e8e3e3;
}
img {
width: 7%;
width: 6%;
margin: 0px 15px;
}
}

677
src/views/pqs/qualityInspeection/panorama/components/map.vue
View File

@@ -1,82 +1,643 @@
<template>
<div id="mapId" style="width: 100%; height: 100%"></div>
<DatePicker ref="datePickerRef" style="display: none" />
<div id="map" style="width: 100%; height: 100%" v-show="prop.lineInfo"></div>
<div id="nrDeviceCard"></div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref, nextTick } from 'vue'
// import '@/assets/panorama/map.js'
import { mainHeight } from '@/utils/layout'
const powerMap: any = ref(null)
powerMap.value = new PowerMapProgram(() => {
// 初始化地图
powerMap.value.initMap({
mapId: 'mapId',
style: 'sjDark', // sjRaster sjBase sjDark
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 '@/assets/panorama/narimap.css'
import '@/assets/panorama/nrgisCommon.css'
const emit = defineEmits(['changeValue', 'drop', 'show'])
const prop = defineProps({
lineInfo: {
type: Boolean
}
})
const narimap = window?.narimap
const dictData = useDictData()
const datePickerRef = ref()
const map: any = ref(null)
const deviceCard: any = ref(null)
const popup: any = ref(null)
const powerManageGridMap: any = ref(null)
const orgId = ref(dictData.state.area[0].code)
const deptIndex = ref(dictData.state.area[0].id)
narimap.Require(
['PSRMap', 'Thematic', 'Components.Query', 'Components.RegionSelector', 'Components.DeviceTreeGW'],
() => {
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.478, 39.997]
center: [116.478935, 39.997761],
controls: false,
country: true,
// 地图默认字体
localIdeographFontFamily: 'Microsoft YoHei'
})
setTimeout(() => {
powerMap.value.createGridMap({
theme: 'light',
zoom: 7,
country: true,
city: {
minzoom: 5,
maxzoom: 8
},
label: {
// label 文字颜色
textColor: '#fff',
// label 文字透明度
textOpacity: 1
},
default: {
fill: {
// 默认填充颜色, 支持 rgba 格式
fillColor: '#028b98',
fillOpacity: 0.4
},
map.value.on('load', () => {
nextTick(() => {
// 添加图层
addLayer()
Query()
})
})
}
const Query = () => {
// 添加行政区划
powerManageGridMap.value = new narimap.ManageGrid.PowerManageGridMap(map.value)
powerManageGridMap.value.init(
{
base: {
outline: {
// 默认轮廓线颜色
lineColor: '#0ec6d0',
// 默认轮廓线宽
lineWidth: 2
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
}
}
}
},
hover: {
fill: {
fillColor: '#028b98',
fillOpacity: 0.6
},
outline: {
lineColor: '#009ea8',
lineWidth: 2
}
},
highLight: {
fill: {
fillColor: '#028b98',
fillOpacity: 0.6
},
outline: {
lineColor: '#009ea8',
lineWidth: 2
levels: {
city: {
// minzoom: 10,
maxzoom: 13
}
}
},
{
initOrgIds: [orgId.value],
//是否联级，包含下属全部子部门，即同样显示编码对应的所属下级
cascade: true
}
)
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()
const devTree = new narimap.Components.DeviceTreeGW(map.value)
devTree.init({ orgId: orgId.value })
//添加电网要素点击事件
// device-tree-gw__button
document.querySelectorAll('.device-tree-gw__button')[0].onclick = function (v: any) {
emit('show', true)
}
//添加电网要素点击事件
psrmap.on('click', (features: any) => {
console.log(features)
})
}
// 添加变电站弹框
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 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': true,
'icon-allow-overlap': true
}
})
map.value.addLayer({
id: 'spotName-ZY',
type: 'symbol',
minzoom: 10,
source: {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: []
}
},
layout: {
// 为图层设置引用的图片ID
'text-field': '{name}',
'icon-ignore-placement': true,
'text-ignore-placement': false,
'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': true,
'icon-allow-overlap': true
// 'text-ignore-placement': false,
// 'text-size': 12,
// 'text-max-width': 8,
// 'text-offset': [0, 2],
// 'text-font': ['Microsoft YaHei Regular']
}
// paint: {
// 'text-color': '#ccc',
// // 'text-halo-color': '#FFFFFF',
// 'text-halo-width': 1.33333
// }
})
map.value.addLayer({
id: 'spotName-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': true,
'text-ignore-placement': false,
'text-size': 12,
'text-max-width': 8,
'text-offset': [0, 2],
'text-font': ['Microsoft YaHei Regular']
},
paint: {
'text-color': '#ccc',
// 'text-halo-color': '#FFFFFF',
'text-halo-width': 1.33333
}
})
}
)
// 添加地图弹框
map.value.on('click', (e: any) => {
const features = map.value.queryRenderedFeatures(e.point, {
layers: ['spotImg-ZY', 'spotImg-TY']
})
// 监听行政区域点击事件
}, 1000)
})
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)
let markerHeight = 20
let markerRadius = 10
let linearOffset = 25
let popupOffsets = {
top: [0, 0],
'top-left': [0, 0],
'top-right': [0, 0],
bottom: [0, -markerHeight + 10],
'bottom-left': [linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
'bottom-right': [-linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
left: [markerRadius, (markerHeight - markerRadius) * -1],
right: [-markerRadius, (markerHeight - markerRadius) * -1]
}
popup.value = new narimap.Popup({ offset: popupOffsets, 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)
document.getElementById('ids').onclick = function (v: any) {
// console.log(e.target.dataset.sid)
emit('drop', v.target.dataset.sid)
}
}
})
}
//添加多个监测点
const addMarkers = async (row?: any) => {
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
}
}
switch (val.comFlag) {
case 0:
tempFeatureT.push(tempFeature)
break
case 1:
tempFeatureZ.push(tempFeature)
break
}
})
})
map.value.getSource('spotImg-ZY').setData({
type: 'FeatureCollection',
features: tempFeatureZ
})
map.value.getSource('spotName-ZY').setData({
type: 'FeatureCollection',
features: tempFeatureZ
})
map.value.getSource('spotImg-TY').setData({
type: 'FeatureCollection',
features: tempFeatureT
})
map.value.getSource('spotName-TY').setData({
type: 'FeatureCollection',
features: tempFeatureT
})
}
onMounted(() => {
// 监听地图初始化完成事件
})
const locatePositions = (e: any) => {
// let mapList = [
// {
// code: '1100F3DE20806FADE050007F01006CBE', //冀北
// centralCoordinate: [117.14740482, 40.5478448705],
// zoom: 6
// },
// {
// code: '1100F3DE246A6FADE050007F01006CBE', //超高压
// centralCoordinate: [117.14740482, 40.5478448705],
// zoom: 6
// },
// {
// code: '1100F3DE22316FADE050007F01006CBE', //"唐山"
// centralCoordinate: [118.335849137, 39.7213593355],
// zoom: 7
// },
// {
// code: '1100F3DE20816FADE050007F01006CBE', //张家口
// centralCoordinate: [115.032504679, 40.8651549951],
// zoom: 7
// },
// {
// code: '1100F3DE23F96FADE050007F01006CBE', //秦皇岛
// centralCoordinate: [119.185113833, 40.0879119754],
// zoom: 7
// },
// {
// code: '1100F3DE23466FADE050007F01006CBE', //承德
// centralCoordinate: [117.548498365, 41.3475890632],
// zoom: 7
// },
// {
// code: '1100F3DE218D6FADE050007F01006CBE', //廊坊
// centralCoordinate: [116.628004129, 39.2589378611],
// zoom: 7
// }
// ]
// let data: any = []
// data = mapList.filter(item => item.code == e.data.code) || []
if (map.value != null) {
deptIndex.value = e.data.id
// 加载点
addMarkers()
powerManageGridMap.value.drillDown({
// 判断超高压
orgId: e.data.code == '1100F3DE246A6FADE050007F01006CBE' ? '1100F3DE20806FADE050007F01006CBE' : e.data.code,
onlyDisplay: true
})
}
}
defineExpose({ locatePositions, addMarkers })
const height = mainHeight(20)
</script>
<style lang="scss" scoped>
@import '@/assets/panorama/map.css';
:deep(.query-box-wrap) {
position: absolute;
top: 10px;
left: calc(50% - 295px);
.query-box {
border-radius: 8px 0 0 8px;
}
}
:deep(.device-tree-gw__button) {
position: absolute;
top: 10px;
border-radius: 0 8px 8px 0;
left: calc(50% + 35px);
z-index: 0 !important;
}
:deep(.province-selector) {
position: absolute;
top: 10px;
left: 50%;
.distribution__body {
height: auto;
}
.province-selector__options {
height: auto;
}
.province-op {
width: 48%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.province-selector__button {
width: 100px;
padding: 4px 12px;
span {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.province-selector__options {
z-index: 1;
}
}
:deep(.sgmap-canvas) {
width: 100% !important;
}
:deep(.my-popup) {
max-width: 400px !important;
.popup-box {
width: 300px;
height: 70px;
.popup_content {
display: grid;
grid-template-columns: 50px 1fr;
img {
width: 42px;
height: 42px;
}
.title {
font-weight: 550;
}
.state {
width: 45px;
margin-left: 5px;
text-align: center;
border-radius: 3px;
color: #fff;
}
.info {
color: #18181b99;
margin: 5px 0;
span {
display: inline-block;
width: 120px;
height: 14px;
line-height: 14px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
-webkit-box-orient: vertical;
&::after {
display: inline-block;
margin: 0 3px;
content: ' ';
width: 2px;
height: 11px;
background: #e5e6eb73;
vertical-align: middle;
}
}
}
}
.popup_footer {
padding: 5px 5px;
border-top: 1px solid #e5e6eb;
color: var(--el-color-primary);
span {
margin-right: 8px;
cursor: pointer;
}
}
}
.sgmap-popup-content {
padding: 15px 10px 10px !important;
}
.sgmap-popup-close-button {
position: absolute;
right: 5px;
top: 5px;
font-size: 16px;
}
}
#nrDeviceCard {
position: absolute;
top: 11px;
right: 70px;
width: 450px;
z-index: 0;
}
</style>

717
src/views/pqs/qualityInspeection/panorama/components/map1.vue
View File

@@ -1,717 +0,0 @@
<template>
<DatePicker ref="datePickerRef" style="display: none" />
<div id="map" style="width: 100%; height: 100%" v-show="prop.lineInfo"></div>
<div id="nrDeviceCard"></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 '@/assets/panorama/narimap.css'
import '@/assets/panorama/nrgisCommon.css'
const emit = defineEmits(['changeValue', 'drop', 'show'])
const prop = defineProps({
lineInfo: {
type: Boolean
}
})
const narimap = window?.narimap
const dictData = useDictData()
const datePickerRef = ref()
const map: any = ref(null)
const deviceCard: any = ref(null)
const popup: any = ref(null)
const markerGroup: any = ref(null)
const orgId = ref(dictData.state.area[0].code)
narimap.Require(
['PSRMap', 'Thematic', 'Components.Query', 'Components.RegionSelector', 'Components.DeviceTreeGW'],
() => {
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', () => {
nextTick(() => {
// 加载点
addMarkers()
// 查询组件
Query()
})
})
}
const Query = () => {
// 添加行政区划
let powerManageGridMap = new narimap.ManageGrid.PowerManageGridMap(map.value)
powerManageGridMap.init(
{
base: {
outline: {
paint: {
'line-color': '#0D867F',
'line-width': 1,
'line-opacity': 1
}
},
fill: {
paint: {
'fill-color': '#0D867F',
'fill-opacity': 0
}
},
label: {
paint: {
'text-color': '#063094',
'text-halo-color': '#ffffff',
'text-halo-width': 1
}
},
hover: {
enable: !0,
type: 'all',
fill: {
enable: !0,
paint: {
'fill-color': 'rgba(1,1,1,0)',
'fill-opacity': 0
}
},
outline: {
enable: !0,
paint: {
'line-color': '#0D867F',
'line-width': 4,
'line-opacity': 1
}
}
}
}
},
{
initOrgIds: [orgId.value],
//是否联级，包含下属全部子部门，即同样显示编码对应的所属下级
cascade: true
}
)
// 添加区域选择
let component = new narimap.Components.RegionSelector(map.value, {
isIntegratedGridmap: true,
//是否联级，包含下属全部子部门，即同样显示编码对应的所属下级
cascade: true,
orgId: orgId.value
})
component.on('regionSelect', (e: any) => {
emit('changeValue', e)
})
setTimeout(() => {
addLine()
const query = new narimap.Components.Query(map.value)
query.init(map.value.getContainer())
query.setQueryOrgId(orgId.value)
}, 500)
}
// 添加变电站线路
const addLine = () => {
//添加电网图层
let psrmap = new narimap.PSRMap(map.value, {
orgId: orgId.value == '1100F3DE20806FADE050007F01006CBE' ? '' : orgId.value
})
psrmap.addPSR()
initDeviceCard()
const devTree = new narimap.Components.DeviceTreeGW(map.value)
devTree.init({ orgId: orgId.value })
//添加电网要素点击事件
// device-tree-gw__button
document.querySelectorAll('.device-tree-gw__button')[0].onclick = function (v: any) {
emit('show', true)
}
//添加电网要素点击事件
psrmap.on('click', (features: any) => {
console.log(features)
})
}
// 添加变电站弹框
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 addMarkers = async () => {
let params = {
deptIndex: dictData.state.area[0].id,
monitorFlag: 2,
powerFlag: 2,
searchBeginTime: datePickerRef.value.timeValue[0],
searchEndTime: datePickerRef.value.timeValue[1],
serverName: 'event-boot',
statisticalType: {}
}
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
}
}
switch (val.comFlag) {
case 0:
tempFeatureT.push(tempFeature)
break
case 1:
tempFeatureZ.push(tempFeature)
break
}
})
})
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: tempFeatureZ
}
},
layout: {
// 为图层设置引用的图片ID
'icon-image': 'poi1',
'icon-size': 0.7,
'icon-ignore-placement': true,
'icon-allow-overlap': true
}
})
map.value.addLayer({
id: 'spotName-ZY',
type: 'symbol',
minzoom: 10,
source: {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: tempFeatureZ
}
},
layout: {
// 为图层设置引用的图片ID
'text-field': '{name}',
'icon-ignore-placement': true,
'text-ignore-placement': false,
'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: tempFeatureT
}
},
layout: {
// 为图层设置引用的图片ID
'icon-image': 'poi2',
'icon-size': 0.7,
// 'text-field': '{name}',
'icon-ignore-placement': true,
'icon-allow-overlap': true
// 'text-ignore-placement': false,
// 'text-size': 12,
// 'text-max-width': 8,
// 'text-offset': [0, 2],
// 'text-font': ['Microsoft YaHei Regular']
}
// paint: {
// 'text-color': '#ccc',
// // 'text-halo-color': '#FFFFFF',
// 'text-halo-width': 1.33333
// }
})
map.value.addLayer({
id: 'spotName-TyY',
type: 'symbol',
minzoom: 8,
source: {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: tempFeatureT
}
},
layout: {
// 为图层设置引用的图片ID
// 'icon-image': 'poi2',
// 'icon-size': 0.7,
'text-field': '{name}',
'icon-ignore-placement': true,
'text-ignore-placement': false,
'text-size': 12,
'text-max-width': 8,
'text-offset': [0, 2],
'text-font': ['Microsoft YaHei Regular']
},
paint: {
'text-color': '#ccc',
// 'text-halo-color': '#FFFFFF',
'text-halo-width': 1.33333
}
})
}
)
map.value.on('click', (e: any) => {
const features = map.value.queryRenderedFeatures(e.point, {
layers: ['spotImg-ZY', 'spotImg-TY']
})
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)
let markerHeight = 20
let markerRadius = 10
let linearOffset = 25
let popupOffsets = {
top: [0, 0],
'top-left': [0, 0],
'top-right': [0, 0],
bottom: [0, -markerHeight + 10],
'bottom-left': [linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
'bottom-right': [-linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
left: [markerRadius, (markerHeight - markerRadius) * -1],
right: [-markerRadius, (markerHeight - markerRadius) * -1]
}
popup.value = new narimap.Popup({ offset: popupOffsets, 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>监测点</span>
<span>${data.voltageScale}</span>
<span>${data.gdName} </span>
</div>
</div>
</div>
<div class="popup_footer">
<span id="ids" data-sid="${data.lineId}">查看详情</span>
</div>
</div>
`
)
.addTo(map.value)
document.getElementById('ids').onclick = function (v: any) {
// console.log(e.target.dataset.sid)
emit('drop', v.target.dataset.sid)
}
}
})
}
//添加多个监测点
// const addMarkers = async () => {
// let params = {
// deptIndex: dictData.state.area[0].id,
// monitorFlag: 2,
// powerFlag: 2,
// searchBeginTime: datePickerRef.value.timeValue[0],
// searchEndTime: datePickerRef.value.timeValue[1],
// serverName: 'event-boot',
// statisticalType: {}
// }
// let markerGroup = new narimap.MarkerGroup(map.value)
// let { data } = await getAreaLineInfo(params)
// let r = 0.0035
// 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.icon = {
// imageUrl: '',
// iconSize: [24, 24] // 设置图标大小
// }
// switch (val.comFlag) {
// case 0:
// val.icon.imageUrl = new URL('@/assets/txzdwzj.png', import.meta.url).href
// break
// case 1:
// val.icon.imageUrl = new URL('@/assets/txzcwzj.png', import.meta.url).href
// break
// }
// let marker = new narimap.Marker().setLngLat([val.lng, val.lat]).setImage(val.icon)
// marker.data = val
// markerGroup.addMarker(val.lineId, marker)
// markerGroup.hide()
// })
// })
// setTimeout(() => {
// markerGroup.on('click', (e: any) => {
// popup.value && popup.value.close()
// deviceCard.value.popup && deviceCard.value.popup.remove()
// let data = e.marker.data
// let markerHeight = 20
// let markerRadius = 10
// let linearOffset = 25
// let popupOffsets = {
// top: [0, 0],
// 'top-left': [0, 0],
// 'top-right': [0, 0],
// bottom: [0, -markerHeight],
// 'bottom-left': [linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
// 'bottom-right': [-linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
// left: [markerRadius, (markerHeight - markerRadius) * -1],
// right: [-markerRadius, (markerHeight - markerRadius) * -1]
// }
// popup.value = new narimap.Popup({ offset: popupOffsets, className: 'my-popup' })
// .setLngLat([data.lng, data.lat])
// .setHTML(
// `<div class="popup-box"><div class="popup_content">
// <img src="${data.icon.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>监测点</span>
// <span>${data.voltageScale}</span>
// <span>${data.gdName} </span>
// </div>
// </div>
// </div>
// <div class="popup_footer">
// <span id="ids" data-sid="${data.lineId}">查看详情</span>
// </div>
// </div>
// `
// )
// .addTo(map.value)
// document.getElementById('ids').onclick = function (v: any) {
// // console.log(e.target.dataset.sid)
// emit('drop', v.target.dataset.sid)
// }
// })
// }, 0)
// map.value.on('zoom', (e: any) => {
// // map.value.getZoom()
// if (map.value.getZoom() > 7) {
// markerGroup.show()
// } else {
// markerGroup.hide()
// }
// })
// }
onMounted(() => {
// 监听地图初始化完成事件
})
// const locatePositions = (e: any) => {
// let mapList = [
// {
// code: '1100F3DE20806FADE050007F01006CBE', //冀北
// centralCoordinate: [116.13740482, 39.5478448705],
// zoom: 6
// },
// {
// code: '1100F3DE22316FADE050007F01006CBE', //"唐山"
// centralCoordinate: [118.335849137, 39.7213593355],
// zoom: 7
// },
// {
// code: '1100F3DE20816FADE050007F01006CBE', //张家口
// centralCoordinate: [115.032504679, 40.8651549951],
// zoom: 7
// },
// {
// code: '1100F3DE23F96FADE050007F01006CBE', //秦皇岛
// centralCoordinate: [119.185113833, 40.0879119754],
// zoom: 7
// },
// {
// code: '1100F3DE23466FADE050007F01006CBE', //承德
// centralCoordinate: [117.548498365, 41.3475890632],
// zoom: 7
// },
// {
// code: '1100F3DE218D6FADE050007F01006CBE', //廊坊
// centralCoordinate: [116.628004129, 39.2589378611],
// zoom: 7
// }
// ]
// let data: any = []
// data = mapList.filter(item => item.code == e.data.code) || []
// if (data.length > 0) {
// // orgId.value = e.data.code
// // addCity()
// console.log('🚀 ~ locatePositions ~ data[0].zoom:', data[0].zoom)
// map.value.locatePositions(data[0].centralCoordinate, {
// zoom: data[0].zoom
// })
// }
// }
// defineExpose({ locatePositions })
const height = mainHeight(20)
</script>
<style lang="scss" scoped>
:deep(.query-box-wrap) {
position: absolute;
top: 10px;
left: calc(50% - 385px);
.query-box {
border-radius: 8px 0 0 8px;
}
}
:deep(.device-tree-gw__button) {
position: absolute;
top: 10px;
border-radius: 0 8px 8px 0;
left: calc(50% - 55px);
z-index: 0 !important;
}
:deep(.province-selector) {
position: absolute;
top: 10px;
left: 50%;
.distribution__body {
height: auto;
}
.province-selector__options {
height: auto;
}
.province-op {
width: 48%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.province-selector__button {
width: 100px;
padding: 4px 12px;
span {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.province-selector__options {
z-index: 1;
}
}
:deep(.sgmap-canvas) {
width: 100% !important;
}
:deep(.my-popup) {
max-width: 400px !important;
.popup-box {
width: 260px;
height: 70px;
.popup_content {
display: grid;
grid-template-columns: 50px 1fr;
img {
width: 42px;
height: 42px;
}
.title {
font-weight: 550;
}
.state {
width: 45px;
margin-left: 5px;
text-align: center;
border-radius: 3px;
color: #fff;
}
.info {
color: #18181b99;
margin: 5px 0;
span {
&::after {
display: inline-block;
margin: 0 5px;
content: ' ';
width: 2px;
height: 11px;
background: #e5e6eb73;
vertical-align: middle;
}
}
}
}
.popup_footer {
padding: 5px 5px;
border-top: 1px solid #e5e6eb;
color: var(--el-color-primary);
span {
margin-right: 8px;
cursor: pointer;
}
}
}
.sgmap-popup-content {
padding: 15px 10px 10px !important;
}
.sgmap-popup-close-button {
position: absolute;
right: 5px;
top: 5px;
font-size: 16px;
}
}
#nrDeviceCard {
position: absolute;
top: 11px;
right: 70px;
width: 450px;
z-index: 0;
}
</style>

106
src/views/pqs/qualityInspeection/panorama/components/mapL.vue
View File

@@ -20,12 +20,22 @@
<el-col :span="12" class="cor">
<img :src="item.img[0]" />
{{ item.titleT[0] }}：
<span :style="`color: ${item.color[0]}`">{{ item.list[4].numOne }}</span>
<span
:style="`color: ${item.color[0]}; cursor: pointer;`"
@click="LookMap(item.list[4].numOneList, 0)"
>
{{ item.list[4].numOne }}
</span>
</el-col>
<el-col :span="12" class="cor">
<img :src="item.img[1]" />
{{ item.titleT[1] }}：
<span :style="`color: ${item.color[1]}`">{{ item.list[4].numTwo }}</span>
<span
:style="`color: ${item.color[1]}; cursor: pointer;`"
@click="LookMap(item.list[4].numTwoList, 1)"
>
{{ item.list[4].numTwo }}
</span>
</el-col>
</el-row>
</div>
@@ -36,11 +46,11 @@
<span class="vol">500kV</span>
</div>
<div class="num">
<div>
<div @click="LookMap(item.list[0].numOneList, 0)">
{{ item.titleT[0] }}:
<span :style="`color: ${item.color[0]}`">{{ item.list[0].numOne }}</span>
</div>
<div>
<div @click="LookMap(item.list[0].numTwoList, 1)">
{{ item.titleT[1] }}:
<span :style="`color: ${item.color[1]}`">{{ item.list[0].numTwo }}</span>
</div>
@@ -52,11 +62,11 @@
<span class="vol">220kV</span>
</div>
<div class="num">
<div>
<div @click="LookMap(item.list[1].numOneList, 0)">
{{ item.titleT[0] }}:
<span :style="`color: ${item.color[0]}`">{{ item.list[1].numOne }}</span>
</div>
<div>
<div @click="LookMap(item.list[1].numTwoList, 1)">
{{ item.titleT[1] }}:
<span :style="`color: ${item.color[1]}`">{{ item.list[1].numTwo }}</span>
</div>
@@ -68,11 +78,11 @@
<span class="vol">110kV</span>
</div>
<div class="num">
<div>
<div @click="LookMap(item.list[2].numOneList, 0)">
{{ item.titleT[0] }}:
<span :style="`color: ${item.color[0]}`">{{ item.list[2].numOne }}</span>
</div>
<div>
<div @click="LookMap(item.list[2].numTwoList, 1)">
{{ item.titleT[1] }}:
<span :style="`color: ${item.color[1]}`">{{ item.list[2].numTwo }}</span>
</div>
@@ -84,11 +94,11 @@
<span class="vol">350kV</span>
</div>
<div class="num">
<div>
<div @click="LookMap(item.list[3].numOneList, 0)">
{{ item.titleT[0] }}:
<span :style="`color: ${item.color[0]}`">{{ item.list[3].numOne }}</span>
</div>
<div>
<div @click="LookMap(item.list[3].numTwoList, 1)">
{{ item.titleT[1] }}:
<span :style="`color: ${item.color[1]}`">{{ item.list[3].numTwo }}</span>
</div>
@@ -123,7 +133,7 @@ import stand from './details/stand.vue'
import terminal from './details/terminal.vue'
import point from './details/point.vue'
import { getSubLineGiveAnAlarm, getGridDiagramMonitor, getGridDiagramDev } from '@/api/device-boot/panorama'
const emit = defineEmits(['LookMap'])
const dictData = useDictData()
const show = ref(false)
const standRef = ref()
@@ -138,23 +148,33 @@ const list: any = ref([
list: [
{
numOne: 0,
numTwo: 0
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0
numTwo: 0,
numOneList: [],
numTwoList: []
}
]
},
@@ -166,23 +186,33 @@ const list: any = ref([
list: [
{
numOne: 0,
numTwo: 0
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0
numTwo: 0,
numOneList: [],
numTwoList: []
}
]
},
@@ -194,23 +224,33 @@ const list: any = ref([
list: [
{
numOne: 0,
numTwo: 0
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0
numTwo: 0,
numOneList: [],
numTwoList: []
}
]
}
@@ -263,6 +303,15 @@ const info = (row: any) => {
})
})
}
// 点击
const LookMap = (row: object, num: number) => {
console.log('🚀 ~ LookMap ~ row:', row)
let form = {
coutList: num == 0 ? row : [],
alarmList: num == 1 ? row : []
}
emit('LookMap', form)
}
onMounted(() => {})
defineExpose({ info, show })
</script>
@@ -280,10 +329,12 @@ defineExpose({ info, show })
.cardBox {
display: flex;
flex-wrap: wrap;
.card {
margin-top: 10px;
width: 48%;
margin-right: 2%;
.cor {
display: flex;
align-items: center;
@@ -330,6 +381,9 @@ defineExpose({ info, show })
grid-template-columns: 1fr 1fr;
font-size: 12px;
color: #6d6d6d;
div {
cursor: pointer;
}
span {
font-size: 14px;
font-weight: 550;

4
src/views/pqs/qualityInspeection/panorama/components/mapR.vue
View File

@@ -379,9 +379,9 @@ const transientChange = () => {
transientNum.value = 0
if (formRow.value.isUpToGrid == 0) {
data = res.data.info
transientNum.value = res.data.data
transientNum.value = res.data.data.toFixed(2)
} else {
transientNum.value = res.data.gwData
transientNum.value = res.data.gwData.toFixed(2)
data = res.data.gwInfo
}
WTList.value = data