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

修改辽宁全景展示

Browse Source
This commit is contained in:
guanj
2026-07-17 16:13:49 +08:00
parent c72ba3e5db
commit 22011188a1
10 changed files with 2391 additions and 1766 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/api/device-boot/panorama.ts
View File

@@ -186,3 +186,7 @@ export function limitTableDetail(data: any) {
export function downPollutionSensitiveUser(data: any) {
return request({ url: '/harmonic-boot/PollutionSubstation/downPollutionSensitiveUser', method: 'post', data })
}
//干扰源类型统计
export function loadTypeVOList(data: any) {
return request({ url: '/device-boot/gridDiagram/loadTypeVOList', method: 'post', data })
}

2
src/components/echarts/MyEchart.vue
View File

@@ -169,7 +169,7 @@ const handlerBar = (options: any) => {
if (Array.isArray(options.series)) {
options.series.forEach((item: any) => {
if (item.type === 'bar') {
item.barMinHeight = 10
item.barMinHeight = 0
item.barMaxWidth = 20
item.itemStyle = Object.assign(
{

2
src/views/pqs/harmonicMonitoring/runManage/terminalLedger/index.vue
View File

@@ -173,7 +173,7 @@ const tableStore = new TableStore({
},
{
field: 'objName',
title: '用户对象',
title: '监测点对象',
minWidth: 110
},
{ field: 'manufacturer', title: '厂家', minWidth: 100 },

667
src/views/pqs/panorama/components/cityMapL-LN.vue Normal file
View File

@@ -0,0 +1,667 @@
<template>
<div :class="show ? 'show' : 'noshow'">
<div class="boxLeft" :style="height">
<!-- 监测规模 -->
<div class="mb10" :style="`height:250px);`">
<div class="title">
<span>监测规模</span>
</div>
<div style="display: flex" class="mt2">
<img src="@/assets/img/FGX.png" />
</div>
<div style="display: flex">
<div v-for="(item, i) in list" class="cardBox" :style="i == 1 ? 'flex:1.3' : ''">
<div class="card">
<span style="cursor: pointer" @click="GridDiagram(i)">{{ item.title }}：</span>
<span
:style="`color: ${item.color[0]}; cursor:pointer`"
@click="
LookMap(
item.list[item.list.length - 1].numOneList,
item.list[item.list.length - 1].numTwoList,
0
)
"
>
{{ item.list[item.list.length - 1]?.numOne }}
</span>
</div>
</div>
</div>
<!-- 监测规模 列表 -->
<div>
<div class="vcl mt5">
<p v-for="(item, i) in vList" :style="i == 0 ? 'width: 60px' : 'flex:1'">
{{ item }}
</p>
</div>
<div v-for="(item, i) in list" class="vcl">
<p style="width: 60px">
{{ item.title }}
<!-- <span style="position: absolute; font-size: 10px; top: -10px; right: -5px; color: #575757">
详情
</span> -->
</p>
<p
v-for="(k, i) in vList?.slice(0, vList.length - 1)"
class="numOne"
@click="LookMap(item.list[i].numOneList, item.list[i].numTwoList, 0)"
>
{{ item.list[i]?.numOne }}
</p>
<!-- <p class="numOne" @click="LookMap(item.list[0].numOneList, item.list[0].numTwoList, 0)">
{{ item.list[0].numOne }}
</p>
<p class="numOne" @click="LookMap(item.list[1].numOneList, item.list[1].numTwoList, 0)">
{{ item.list[1].numOne }}
</p>
<p class="numOne" @click="LookMap(item.list[2].numOneList, item.list[2].numTwoList, 0)">
{{ item.list[2].numOne }}
</p>
<p class="numOne" @click="LookMap(item.list[3].numOneList, item.list[3].numTwoList, 0)">
{{ item.list[3].numOne }}
</p> -->
<!-- <p
style="font-size: 12px; width: 32px; cursor: pointer; color: var(--el-color-primary)"
@click.stop="open(i)"
>
详情
</p> -->
</div>
</div>
</div>
<!-- 干扰源类型统计 -->
<div :style="`height:calc(${boxHeight.height} - 55px)`">
<div class="title">
<span>干扰源类型统计</span>
</div>
<div style="display: flex" class="mt2">
<img src="@/assets/img/FGX.png" />
</div>
<div :style="`height:calc(${boxHeight.height} - 100px );overflow-y: auto;`">
<div v-for="item in loadTypeVOListData">
<div
class="card-Box mt10 card-Box-loadTypeVO"
style="max-height: 100px"
:style="`height:calc((${boxHeight.height} - 40px )/ 5.5);`"
>
<div>
<span class="line"></span>
<span class="vol">
{{ loadTypeVO.find((v: any) => v.id == item.name)?.name || '' }}
</span>
</div>
<div class="num">
<div @click="LookMap(item.loadTypeList, [], 0)">
暂降次数:
<span>{{ item.count }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 监测点指标统计 -->
<div :style="`height:120px`">
<div class="title">
<span>监测点指标统计</span>
</div>
<div style="display: flex" class="mt2">
<img src="@/assets/img/FGX.png" />
</div>
<div>
<div v-for="item in countList">
<div
class="card-Box mt10"
style="max-height: 100px"
:style="`height:70px;`"
v-for="val in item.children"
>
<div>
<span class="line"></span>
<span class="vol">{{ val.title }}</span>
</div>
<div class="num">
<div @click="LookMap(val.numList, [], 0)">
投运:
<span>{{ val.num }}</span>
</div>
<div @click="LookMap(val.onLineNumList, [], 0)">
在线:
<span style="color: #2dcd28">{{ val.onLineNum }}</span>
</div>
<div>
数据完整性:
<span style="color: #2b7fd3; cursor: text">{{ val.integrityRate }}%</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 监测点指标统计 -->
<div :style="`height:calc(${boxHeight.height} - 55px)`">
<div class="title">
<span>监测运行统计</span>
</div>
<div style="display: flex" class="mt2">
<img src="@/assets/img/FGX.png" />
</div>
<div :style="`height:calc(${boxHeight.height} - 100px);overflow-y: auto;`" class="BoxA mt10">
<div class="card-Box" v-for="item in linList">
<div>
<span class="line"></span>
<span class="vol">{{ item.title[0] }}</span>
</div>
<div class="num">
<div>
{{ item.title[1] }}:
<span style="color: #2dcd28" @click="LookMap(item.lineListOne, [], 0)">
{{ item.lineNumOne || 0 }}
</span>
</div>
<div>
{{ item.title[2] }}:
<span style="color: #a52a2a" @click="LookMap([], item.lineListTwo, 1)">
{{ item.lineNumTwo || 0 }}
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<img
class="imgL"
:style="show ? 'transform: rotate(0deg);' : 'transform: rotate(180deg);'"
@click="show = !show"
src="@/assets/img/QH.png"
/>
<!-- 变电站详情 -->
<stand ref="standRef" />
<!-- 终端 -->
<terminal ref="terminalRef" />
<!-- 检测点 -->
<point ref="pointRef" />
</div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref, provide } from 'vue'
import { useDictData } from '@/stores/dictData'
import { mainHeight } from '@/utils/layout'
import { ArrowRight, View } from '@element-plus/icons-vue'
import stand from './details/stand.vue'
import terminal from './details/terminal.vue'
import point from './details/point.vue'
import {
getSubLineGiveAnAlarm,
getGridDiagramMonitor,
getGridDiagramDev,
getGridDiagramStatistics,
getGridDiagramRunData,
loadTypeVOList
} from '@/api/device-boot/panorama'
const emit = defineEmits(['LookMap', 'GridDiagram'])
const dictData = useDictData()
const show = ref(false)
const standRef = ref()
const terminalRef = ref()
const pointRef = ref()
const list: any = ref([
{
title: '变电站',
color: ['#000', '#bd3124'],
list: [
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
}
]
},
{
title: '监测终端',
color: ['#000', '#2dcd28'],
list: [
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
}
]
},
{
title: '监测点',
color: ['#000', '#2dcd28', '#bd3124'],
list: [
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
}
]
}
])
const countList: any = ref([
{
title: '网公司',
children: [
{ title: '非电网侧监测点', num: 0, onLineNum: 0, integrityRate: 0 }
// {
// title: '电网侧监测点',
// num: 0,
// onLineNum: 0,
// integrityRate: 0
// }
]
}
// {
// title: '上送网公司',
// children: [{ title: '电网侧监测点', num: 0, onLineNum: 0, integrityRate: 0 }]
// }
])
const loadTypeVO = dictData.getBasicData('Interference_Source')
const loadTypeVOListData: any = ref([])
const linList: any = ref([
{
title: ['运行状态', '合格', '告警']
},
{
title: ['通讯状态', '在线', '离线']
},
{
title: ['数据完整性', '≥90%', '<90%']
},
{
title: ['电能质量指标', '未超标', '超标']
}
])
const panoramicVoltage: any = dictData.getBasicData('Dev_Voltage_Stand')
const vList = ref(['', '500kV', '220kV', '110kV', '35kV'])
const formRow: any = ref({})
const height = mainHeight(30)
const boxHeight = mainHeight(290, 2)
// 详情
const open = (e: any) => {
if (e == 0) {
standRef.value.open(formRow.value)
} else if (e == 1) {
terminalRef.value.open(formRow.value)
} else if (e == 2) {
pointRef.value.open(formRow.value)
}
}
const info = async (row: any) => {
let form = {
...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
}
countList.value[0].title = row.areaName
formRow.value = form
vList.value = ['']
// 变电站
getSubLineGiveAnAlarm(form).then(res => {
let data = row.isUpToGrid == 1 ? res.data.gwInfo : res.data.info
data[0].data.forEach((item: any) => {
if (item.columnName) vList.value.push(panoramicVoltage.find((v: any) => v.id == item.columnName).name)
})
list.value[0].list = data[0].data
})
// 终端
getGridDiagramDev(form).then(res => {
let data = row.isUpToGrid == 1 ? res.data.gwInfo : res.data.info
list.value[1].list = data[0].data
})
// 监测点
await getGridDiagramMonitor(form).then(res => {
let data = row.isUpToGrid == 1 ? res.data.gwInfo : res.data.info
list.value[2].list = data[0].data.map((item: any) => {
return {
numOne: item.num,
numTwo: item.onLineNum,
numOneList: item.numList,
numTwoList: item.onLineNumList
}
})
// list.value[2].list.push({
// numOne: 0,
// numOneList: []
// })
})
// 监测点指标统计
getGridDiagramStatistics(form).then(res => {
countList.value[0].children[0] = { title: '非电网侧监测点', ...res.data.data[1] }
// countList.value[0].children[1] = { title: '电网侧监测点', ...res.data.data[0] }
// countList.value[1].children[0] = { title: '电网侧监测点', ...res.data.gwData[0] }
})
// 干扰源类型统计
loadTypeVOList({ form }).then(res => {
loadTypeVOListData.value = res.data
})
// 监测运行统计
getGridDiagramRunData(form).then(res => {
res.data[0].title = ['运行状态', '合格', '告警']
res.data[1].title = ['通讯状态', '在线', '离线']
res.data[2].title = ['数据完整性', '≥90%', '<90%']
res.data[3].title = ['电能质量指标', '未超标', '超标']
linList.value = res.data
})
}
// 点击
const LookMap = (coutList: object, alarmList: object, key?: any) => {
// console.log('🚀 ~ LookMap ~ row:', row)
let form = {
coutList: coutList,
alarmList: alarmList
}
emit('LookMap', form, key)
}
const GridDiagram = (k: any) => {
emit('GridDiagram', k, 3)
}
onMounted(() => {})
defineExpose({ info, show })
</script>
<style lang="scss" scoped>
.boxLeft {
background-color: #fff;
width: 100%;
// padding: 10px 10px 10px 10px;
border-radius: 5px;
font-size: 13px;
overflow: hidden;
}
.cardBox {
display: flex;
flex-wrap: wrap;
flex: 1;
.card {
justify-content: center;
margin-top: 15px;
margin-right: 2%;
display: flex;
flex: 1;
align-items: center;
font-size: 16px;
span:nth-child(2) {
font-weight: 550;
}
}
}
.vcl {
display: flex;
border-bottom: 2px solid #fff;
background-color: #edededc0;
border-radius: 5px;
font-size: 14px;
p {
text-align: center;
margin: 6px;
line-height: 30px;
}
.numOne {
flex: 1;
font-weight: 550;
cursor: pointer;
}
&:nth-child(1) {
background-color: #fff;
}
&:nth-child(2) {
.numOne {
color: #00bff5;
}
}
&:nth-child(3) {
.numOne {
color: #008000;
}
}
&:nth-child(4) {
.numOne {
color: #0000ff;
}
}
}
.title {
// height: ;
// display: flex;
// justify-content: space-between;
font-size: 15px;
line-height: 23px;
padding-left: 5px;
width: 100%;
font-weight: 550;
display: flex;
align-items: center;
span:nth-child(1) {
cursor: pointer;
}
.info {
font-weight: normal;
display: flex;
font-size: 12px;
cursor: pointer;
color: #757575;
}
img {
height: 1.2rem;
width: 1.2rem;
margin-right: 5px;
}
}
.card-Box {
// display: grid;
// grid-template-rows: 1fr 1fr;
display: flex;
flex-direction: column;
justify-content: space-evenly;
// align-items: center;
margin: 0 5px 5px;
padding: 10px;
background-color: #edededc0;
border-radius: 10px;
min-height: 60px;
max-height: 120px;
.line {
display: inline-block;
width: 0.5rem;
height: 0.5rem;
border-radius: 0.25rem;
background: var(--el-color-primary);
margin-right: 5px;
margin-bottom: 2px;
}
.num {
margin-left: 10px;
display: grid;
text-align: center;
grid-template-columns: 1fr 1fr 1.5fr;
font-size: 14px;
span {
cursor: pointer;
font-size: 16px;
font-weight: 550;
}
}
}
.card-Box-loadTypeVO {
min-height: 40px;
flex-direction: row;
align-items: center;
justify-content: space-between;
.num {
grid-template-columns: 1fr;
font-size: 13px;
margin-right: 10%;
}
}
.BoxA {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
// grid-template-rows: 80px;
.num {
margin-left: 10px;
display: grid;
text-align: center;
grid-template-columns: 1fr 1fr;
}
}
.imgL {
position: absolute;
padding: 10px;
top: calc(50% - 80px);
right: -23px;
transform: rotate(180deg);
height: 200px;
cursor: pointer;
}
.show {
width: 0px;
transition: all 0.3s ease;
.boxLeft {
padding: 0;
}
}
.noshow {
width: 25%;
transition: all 0.3s ease;
.boxLeft {
padding: 10px 10px 10px 10px;
}
}
:deep(.el-card) {
--el-card-padding: 10px !important;
}
:deep(.el-table thead) {
color: #000;
}
:deep(.el-dialog__body) {
max-height: none !important;
}
</style>

338
src/views/pqs/panorama/components/cityMapL1.vue
View File

@@ -1,338 +0,0 @@
<template>
<div :class="show ? 'show' : 'noshow'">
<div class="boxLeft" :style="height">
<!-- 在线监测规模 -->
<div :style="boxHeight">
<div class="title">
<span>在线监测规模</span>
</div>
<div style="display: flex" class="mt2">
<img src="@/assets/img/FGX.png" />
</div>
<MyEChart :style="tabHeight" :options="onlineCharts" />
</div>
<!-- 监测终端状态 -->
<div :style="boxHeight">
<div class="title">
<span>监测终端状态</span>
</div>
<div style="display: flex" class="mt2">
<img src="@/assets/img/FGX.png" />
</div>
<div class="TJTop">
<img src="@/assets/img/TJ.png" />
终端在线率：
<span>{{ onlineRate }}%</span>
</div>
<MyEChart :style="`height: calc(${tabHeight.height} - 27px)`" :options="terminalCharts" />
</div>
<!-- 监测点 -->
<div :style="boxHeight">
<div class="title">
<span>监测点数据完整率</span>
</div>
<div style="display: flex" class="mt2">
<img src="@/assets/img/FGX.png" />
</div>
<MyEChart :style="tabHeight" :options="dotCharts" />
</div>
</div>
<img
class="imgL"
:style="show ? 'transform: rotate(0deg);' : 'transform: rotate(180deg);'"
@click="show = !show"
src="@/assets/img/QH.png"
/>
</div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref, provide } from 'vue'
import MyEChart from '@/components/echarts/MyEchart.vue'
import { useDictData } from '@/stores/dictData'
import { mainHeight } from '@/utils/layout'
import { getGridDiagramAreaData, getGridDiagramCityDev, getGridDiagramLineData } from '@/api/device-boot/panorama'
import { useConfig } from '@/stores/config'
const config = useConfig()
const dictData = useDictData()
const height = mainHeight(30)
const boxHeight = mainHeight(40, 3)
const tabHeight: any = mainHeight(150, 3)
const onlineRate = ref(0)
const show = ref(false)
const formRow: any = ref({})
const terminalCharts: any = ref({})
const dotCharts = ref()
const onlineCharts = ref()
const info = (row: any) => {
let form = {
...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
}
let loadType = dictData.getBasicData('Statistical_Type').find(item => item.code == 'Load_Type')
formRow.value = form
// 变电站
getGridDiagramAreaData(form).then(res => {
onlineCharts.value = {
tooltip: {},
yAxis: {
type: 'value',
name: '个'
},
xAxis: {
type: 'category',
data: ['变电站', '监测终端', '监测点'],
axisLabel: {
color: '#000',
fontSize: 12
}
},
grid: {
top: '30px',
left: '10px',
right: '20px'
},
options: {
dataZoom: null,
series: [
{
name: '个数',
type: 'bar',
data: [
res.data[0].subNum,
res.data[0].deviceNum,
res.data[0].lineNum
],
label: {
show: true,
position: 'top',
fontSize: 10
}
}
]
}
}
})
// 终端
getGridDiagramCityDev({ ...form, deviceInfoParam: form, pageNum: 1, pageSize: 1000 }).then(res => {
onlineRate.value = res.data[1]
let data = [
{
name: '运行',
value: res.data[0] - 0
},
{
name: '检修',
value: res.data[2] - 0
},
{
name: '退役',
value: res.data[4] - 0
}
]
terminalCharts.value = {
title: {
text: data[0].value + data[1].value + data[2].value,
left: '26%',
top: '40%',
textStyle: {
fontWeight: 600,
fontSize: 16
},
subtext: '总数',
subtextStyle: {
fontWeight: 550,
fontSize: 14
}
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
top: 'center',
right: '10%',
formatter: function (e: any) {
return e + ' ' + data.filter(item => item.name == e)[0].value + '台'
}
},
xAxis: {
show: false
},
yAxis: {
show: false
},
color: [config.layout.elementUiPrimary[0], '#FFBF00', '#FF9100'],
options: {
dataZoom: null,
series: [
{
type: 'pie',
center: ['30%', '50%'],
radius: ['40%', '60%'],
label: {
show: false,
position: 'outside',
textStyle: {
//数值样式
}
},
data: data
}
]
}
}
})
// 监测点
getGridDiagramLineData({ ...form, statisticalType: loadType }).then(res => {
dotCharts.value = {
title: {
text: ''
},
// str.replace(/\(\d+\)/, "\n$&");
xAxis: {
data: res.data.map((item: any) => {
let title = item.orgName.replace(/\(\d+\)/g, '')
// return title.length > 5
return title.length > 6
? title.length > 11
? title.slice(0, 5) + '\n ' + title.slice(5, 10) + '\n ' + title.slice(10)
: title.slice(0, 5) + '\n ' + title.slice(5)
: title
}),
axisLabel: {
color: '#000',
fontSize: 12,
interval: 0
}
},
yAxis: {
name: '%',
min: 0,
max: 100
},
grid: {
top: '30px',
left: '0px',
right: '20px',
bottom: 0
},
options: {
dataZoom: null,
series: [
{
name: '数据完整率',
type: 'bar',
data: res.data.map((item: any) => item.integrityRate),
label: {
show: true,
position: 'top',
fontSize: 10
}
}
]
}
}
})
}
defineExpose({ info, show })
</script>
<style lang="scss" scoped>
.boxLeft {
background-color: #fff;
width: 100%;
padding: 10px 10px 10px 10px;
border-radius: 5px;
font-size: 13px;
overflow: hidden;
}
.title {
// height: ;
display: flex;
justify-content: space-between;
font-size: 15px;
line-height: 23px;
padding-left: 5px;
width: 100%;
font-weight: 550;
.info {
font-weight: normal;
display: flex;
font-size: 12px;
cursor: pointer;
color: #757575;
}
}
.imgL {
position: absolute;
padding: 10px;
top: calc(50% - 80px);
right: -23px;
transform: rotate(180deg);
height: 200px;
cursor: pointer;
}
.show {
width: 0px;
transition: all 0.1s ease;
.boxLeft {
padding: 0;
}
}
.noshow {
width: 25%;
transition: all 0.3s ease;
.boxLeft {
padding: 10px 10px 10px 10px;
}
}
:deep(.el-card) {
--el-card-padding: 10px !important;
}
:deep(.el-table thead) {
color: #000;
}
.TJTop {
margin-top: 10px;
display: flex;
img {
height: 1.2rem;
width: 1.2rem;
margin-right: 5px;
}
span {
color: #2dcd28;
}
}
:deep(.el-dialog__body) {
max-height: none !important;
}
</style>

11
src/views/pqs/panorama/components/cityMapR.vue
View File

@@ -339,11 +339,12 @@ const info = (row: any) => {
color: [config.layout.elementUiPrimary[0], '#FFBF00'],
yAxis: {
name: '',
type: 'value',
max: 100
type: 'value'
// max: 100
},
legend: {
data: ['超标监测点数', '超标天数']
data: ['超标监测点数', '超标天数'],
top: '5'
},
xAxis: {
type: 'category',
@@ -354,7 +355,8 @@ const info = (row: any) => {
}),
axisLabel: {
color: '#000',
fontSize: 10
fontSize: 10,
rotate: 30
}
},
grid: {
@@ -364,6 +366,7 @@ const info = (row: any) => {
},
options: {
dataZoom: null,
toolbox: null,
series: [
{

786
src/views/pqs/panorama/components/mapL-LN.vue Normal file
View File

@@ -0,0 +1,786 @@
<template>
<div :class="show ? 'show' : 'noshow'">
<div class="boxLeft" :style="height">
<!-- 监测规模 -->
<div class="mb10" :style="`height:250px);`">
<div class="title">
<span>监测规模</span>
</div>
<div style="display: flex" class="mt2">
<img src="@/assets/img/FGX.png" />
</div>
<div style="display: flex">
<div
v-for="(item, i) in list"
class="cardBox mt10"
:style="i == 1 ? 'flex:1.2' : i === 2 ? 'flex: 1.3' : ''"
>
<div class="card">
<span style="cursor: pointer" @click="GridDiagram(i)">{{ item.title }}：</span>
<span
:style="`color: ${item.color[0]}; cursor:pointer`"
@click="
LookMap(
item.list?.[item.list.length - 1]?.numOneList,
item.list?.[item.list.length - 1]?.numTwoList,
0
)
"
>
{{ item.list?.[item.list.length - 1]?.numOne }}
</span>
</div>
</div>
</div>
<!-- 监测规模 列表 -->
<div>
<div class="vcl mt2">
<p
v-for="(item, i) in displayVList"
:style="
i == 0
? 'width: 60px'
: i == displayVList?.length - 1
? IS_LN
? 'flex:1'
: 'width: 32px'
: 'flex:1'
"
>
{{ item }}
</p>
</div>
<div v-for="(item, i) in list" class="vcl">
<p style="width: 60px">
{{ item.title }}
</p>
<p
v-for="(k, i) in dataVList"
class="numOne"
@click="LookMap(item.list[i].numOneList, item.list[i].numTwoList, 0)"
>
{{ item.list[i]?.numOne }}
</p>
<!-- <p class="numOne" @click="LookMap(item.list[1].numOneList, item.list[1].numTwoList, 0)">
{{ item.list[1].numOne }}
</p>
<p class="numOne" @click="LookMap(item.list[2].numOneList, item.list[2].numTwoList, 0)">
{{ item.list[2].numOne }}
</p>
<p class="numOne" @click="LookMap(item.list[3].numOneList, item.list[3].numTwoList, 0)">
{{ item.list[3].numOne }}
</p> -->
<p
v-if="!IS_LN"
style="font-size: 12px; width: 32px; cursor: pointer; color: var(--el-color-primary)"
@click.stop="open(i)"
>
详情
</p>
</div>
</div>
</div>
<!-- 干扰源类型统计 -->
<div :style="`height:calc(${boxHeight.height} - 95px)`">
<div class="title">
<span>干扰源类型统计</span>
</div>
<div style="display: flex" class="mt2">
<img src="@/assets/img/FGX.png" />
</div>
<div :style="`height:calc(${boxHeight.height} - 130px );overflow-y: auto;`">
<div v-for="item in loadTypeVOListData">
<div
class="card-Box mt10 card-Box-loadTypeVO"
style="max-height: 100px"
:style="`height:calc((${boxHeight.height} - 50px )/ 5.5);`"
>
<div>
<span class="line"></span>
<span class="vol">
{{ loadTypeVO.find((v: any) => v.id == item.name)?.name || '' }}
</span>
</div>
<div class="num">
<div @click="LookMap(item.loadTypeList, [], 0)">
暂降次数:
<span>{{ item.count }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 监测点指标统计 -->
<div :style="`height:100px`">
<div class="title">
<span>监测点指标统计</span>
</div>
<div style="display: flex" class="mt2">
<img src="@/assets/img/FGX.png" />
</div>
<div :style="`overflow-y: auto;`">
<div v-for="item in countList">
<div
class="card-Box mt10"
style="max-height: 100px"
:style="`height:70px`"
v-for="val in item.children"
>
<div>
<span class="line"></span>
<span class="vol">{{ val.title }}</span>
</div>
<div class="num">
<div @click="LookMap(val.numList, [], 0)">
投运:
<span>{{ val.num }}</span>
</div>
<div @click="LookMap(val.onLineNumList, [], 0)">
在线:
<span style="color: #2dcd28">{{ val.onLineNum }}</span>
</div>
<div>
数据完整性:
<span style="color: #2b7fd3; cursor: text">{{ val.integrityRate }}%</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 监测点指标统计 -->
<div :style="`height:calc(${boxHeight.height} - 75px)`" class="mt20">
<div class="title">
<span>监测运行统计</span>
</div>
<div style="display: flex" class="mt2">
<img src="@/assets/img/FGX.png" />
</div>
<div :style="`height:calc(${boxHeight.height} - 100px);overflow-y: auto;`" class="BoxA mt10">
<div class="card-Box" v-for="item in linList">
<div>
<span class="line"></span>
<span class="vol">{{ item.title[0] }}</span>
</div>
<div class="num">
<div>
{{ item.title[1] }}:
<span style="color: #2dcd28" @click="LookMap(item.lineListOne, [], 0)">
{{ item.lineNumOne || 0 }}
</span>
</div>
<div>
{{ item.title[2] }}:
<span style="color: #a52a2a" @click="LookMap([], item.lineListTwo, 1)">
{{ item.lineNumTwo || 0 }}
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<img
class="imgL"
:style="show ? 'transform: rotate(0deg);' : 'transform: rotate(180deg);'"
@click="show = !show"
src="@/assets/img/QH.png"
/>
<div class="legeng">
<div v-for="item in legengList">
<span :style="`background-color: ${item.color};`"></span>
<span>{{ item.title }}</span>
</div>
</div>
<!-- 变电站详情 -->
<stand ref="standRef" />
<!-- 终端 -->
<terminal ref="terminalRef" />
<!-- 检测点 -->
<point ref="pointRef" />
</div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref, provide, computed } from 'vue'
import { useDictData } from '@/stores/dictData'
import { mainHeight } from '@/utils/layout'
import { ArrowRight, View } from '@element-plus/icons-vue'
import stand from './details/stand.vue'
import terminal from './details/terminal.vue'
import point from './details/point.vue'
import {
getSubLineGiveAnAlarm,
getGridDiagramMonitor,
getGridDiagramDev,
getGridDiagramStatistics,
getGridDiagramRunData,
getAreaObjAlarm,
loadTypeVOList
} from '@/api/device-boot/panorama'
const emit = defineEmits(['LookMap', 'GridDiagram'])
const IS_LN = import.meta.env.VITE_NAME == 'LN' || import.meta.env.VITE_NAME == 'LNqr'
const dictData = useDictData()
const show = ref(false)
const standRef = ref()
const terminalRef = ref()
const pointRef = ref()
const list: any = ref([
{
title: '场站',
color: ['#000', '#bd3124'],
list: [
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
}
]
},
{
title: '变电站',
color: ['#000', '#bd3124'],
list: [
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
}
]
},
{
title: '监测终端',
color: ['#000', '#2dcd28'],
list: [
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
}
]
},
{
title: '监测点',
color: ['#000', '#2dcd28', '#bd3124'],
list: [
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
}
]
}
])
const countList: any = ref([
{
title: '', //网公司
children: [
{ title: '非电网侧监测点', num: 0, onLineNum: 0, integrityRate: 0 }
// {
// title: '电网侧监测点',
// num: 0,
// onLineNum: 0,
// integrityRate: 0
// }
]
}
// {
// title: '上送网公司',
// children: [{ title: '电网侧监测点', num: 0, onLineNum: 0, integrityRate: 0 }]
// }
])
const linList: any = ref([
{
title: ['运行状态', '合格', '告警']
},
{
title: ['通讯状态', '在线', '离线']
},
{
title: ['数据完整性', '≥90%', '<90%']
},
{
title: ['电能质量指标', '未超标', '超标']
}
])
const legengList = [
{
color: '#00b07d',
title: '优质'
},
{
color: '#3399ff',
title: '良好'
},
{
color: '#ffcc33',
title: '合格'
},
{
color: '#db0887',
title: '较差'
},
{
color: '#ff0000',
title: '极差'
}
]
const loadTypeVO = dictData.getBasicData('Interference_Source')
const loadTypeVOListData: any = ref([
])
const panoramicVoltage: any = dictData.getBasicData('Dev_Voltage_Stand')
const vList = ref(['', '500kV', '220kV', '110kV', '35kV', ''])
const displayVList = computed(() => (IS_LN && vList.value.length ? vList.value.slice(0, -1) : vList.value))
const dataVList = computed(() => (IS_LN ? vList.value.slice(1, -1) : vList.value.slice(0, vList.value.length - 2)))
const formRow: any = ref({})
const height = mainHeight(30)
const boxHeight = mainHeight(290, 2)
// 详情
const open = (e: any) => {
if (e == 0) {
standRef.value.open(formRow.value)
} else if (e == 1) {
terminalRef.value.open(formRow.value)
} else if (e == 2) {
pointRef.value.open(formRow.value)
}
}
const info = async (row: any) => {
let form = {
...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
}
countList.value[0].title = row.areaName
formRow.value = form
vList.value = ['']
getAreaObjAlarm(form).then(res => {
let data = row.isUpToGrid == 1 ? res.data.gwInfo : res.data.info
data[0].data.forEach((item: any) => {
if (item.columnName) vList.value.push(panoramicVoltage.find((v: any) => v.id == item.columnName).name)
})
vList.value.push('')
list.value[0].list = data[0].data
})
// 变电站
getSubLineGiveAnAlarm(form).then(res => {
let data = row.isUpToGrid == 1 ? res.data.gwInfo : res.data.info
list.value[1].list = data[0].data
})
// 终端
getGridDiagramDev(form).then(res => {
let data = row.isUpToGrid == 1 ? res.data.gwInfo : res.data.info
list.value[2].list = data[0].data
})
// 监测点
await getGridDiagramMonitor(form).then(res => {
let data = row.isUpToGrid == 1 ? res.data.gwInfo : res.data.info
list.value[3].list = data[0].data.map((item: any) => {
return {
numOne: item.num,
numTwo: item.onLineNum,
numOneList: item.numList,
numTwoList: item.onLineNumList
}
})
// list.value[2].list.push({
// numOne: 0,
// numOneList: []
// })
})
// 监测点指标统计
getGridDiagramStatistics(form).then(res => {
countList.value[0].children[0] = { title: '非电网侧监测点', ...res.data.data[1] }
// countList.value[0].children[1] = { title: '电网侧监测点', ...res.data.data[0] }
// countList.value[1].children[0] = { title: '电网侧监测点', ...res.data.gwData[0] }
})
// 干扰源类型统计
loadTypeVOList({ form }).then(res => {
loadTypeVOListData.value = res.data
})
// 监测运行统计
getGridDiagramRunData(form).then(res => {
res.data[0].title = ['运行状态', '合格', '告警']
res.data[1].title = ['通讯状态', '在线', '离线']
res.data[2].title = ['数据完整性', '≥90%', '<90%']
res.data[3].title = ['电能质量指标', '未超标', '超标']
linList.value = res.data
})
}
// 点击
const LookMap = (coutList: object, alarmList: object, key?: any) => {
// console.log('🚀 ~ LookMap ~ row:', row)
let form = {
coutList: coutList,
alarmList: alarmList
}
emit('LookMap', form, key)
}
const GridDiagram = (k: any) => {
emit('GridDiagram', k)
}
onMounted(() => {})
defineExpose({ info, show })
</script>
<style lang="scss" scoped>
.boxLeft {
background-color: #fff;
width: 100%;
// padding: 10px 10px 10px 10px;
border-radius: 5px;
font-size: 13px;
overflow: hidden;
}
.cardBox {
display: flex;
flex-wrap: wrap;
flex: 1;
.card {
justify-content: center;
margin-top: 1px;
margin-right: 2%;
display: flex;
flex: 1;
align-items: center;
font-size: 15px;
span:nth-child(2) {
font-weight: 550;
}
}
}
.vcl {
display: flex;
border-bottom: 2px solid #fff;
background-color: #edededc0;
border-radius: 5px;
font-size: 14px;
p {
text-align: center;
margin: 6px;
line-height: 30px;
}
.numOne {
flex: 1;
font-weight: 550;
cursor: pointer;
}
&:nth-child(1) {
background-color: #fff;
}
&:nth-child(2) {
.numOne {
color: #00bff5;
}
}
&:nth-child(3) {
.numOne {
color: #008000;
}
}
&:nth-child(4) {
.numOne {
color: #0000ff;
}
}
}
.title {
// height: ;
// display: flex;
// justify-content: space-between;
font-size: 15px;
line-height: 23px;
padding-left: 5px;
width: 100%;
font-weight: 550;
display: flex;
align-items: center;
span:nth-child(1) {
cursor: pointer;
}
.info {
font-weight: normal;
display: flex;
font-size: 12px;
cursor: pointer;
color: #757575;
}
img {
height: 1.2rem;
width: 1.2rem;
margin-right: 5px;
}
}
.card-Box {
// display: grid;
// grid-template-rows: 1fr 1fr;
display: flex;
flex-direction: column;
justify-content: space-evenly;
// align-items: center;
margin: 0 5px 5px;
padding: 10px;
background-color: #edededc0;
border-radius: 10px;
min-height: 60px;
max-height: 120px;
.line {
display: inline-block;
width: 0.5rem;
height: 0.5rem;
border-radius: 0.25rem;
background: var(--el-color-primary);
margin-right: 5px;
margin-bottom: 2px;
}
.num {
margin-left: 10px;
display: grid;
text-align: center;
grid-template-columns: 1fr 1fr 1.5fr;
font-size: 14px;
span {
cursor: pointer;
font-size: 16px;
font-weight: 550;
}
}
}
.card-Box-loadTypeVO {
min-height: 40px;
flex-direction: row;
align-items: center;
justify-content: space-between;
.num {
grid-template-columns: 1fr;
font-size: 13px;
margin-right: 10%;
}
}
.BoxA {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
// grid-template-rows: 80px;
.num {
margin-left: 10px;
display: grid;
text-align: center;
grid-template-columns: 1fr 1fr;
}
}
.imgL {
position: absolute;
padding: 10px;
top: calc(50% - 80px);
right: -23px;
transform: rotate(180deg);
height: 200px;
cursor: pointer;
}
.show {
width: 0px;
transition: all 0.3s ease;
.boxLeft {
padding: 0;
}
}
.noshow {
width: 25%;
transition: all 0.3s ease;
.boxLeft {
padding: 10px 10px 10px 10px;
}
}
:deep(.el-card) {
--el-card-padding: 10px !important;
}
:deep(.el-table thead) {
color: #000;
}
:deep(.el-dialog__body) {
max-height: none !important;
}
.legeng {
position: absolute;
padding: 5px;
bottom: 0;
right: -75px;
width: 70px;
font-size: 12px;
height: 120px;
background: #fff;
border-radius: 5px;
display: grid;
line-height: 22px;
grid-template-rows: auto;
div {
display: flex;
align-items: center;
justify-content: center;
span:nth-child(1) {
display: inline-block;
height: 10px;
border-radius: 2px;
width: 15px;
margin-right: 5px;
}
}
}
</style>

516
src/views/pqs/panorama/components/mapL1.vue
View File

@@ -1,516 +0,0 @@
<template>
<div :class="show ? 'show' : 'noshow'">
<div class="boxLeft" :style="height">
<div v-for="(item, i) in list" :style="boxHeight">
<div class="title">
<span @click="GridDiagram(i)">
{{ item.title }}
<span class="ratio">{{ item.ratioTitle }}: {{ item.ratio }}%</span>
</span>
<span class="info" @click="open(i)">
详情
<ArrowRight style="width: 12px" />
</span>
</div>
<div style="display: flex" class="mt2">
<img src="@/assets/img/FGX.png" />
</div>
<div class="cardBox">
<div class="card" style="width: 98%">
<div class="cor">
<img :src="item.img[0]" />
{{ item.titleT[0] }}：
<span
:style="`color: ${item.color[0]}; cursor: pointer;`"
@click="LookMap(item.list[4].numOneList, item.list[4].numTwoList, i)"
>
{{ item.list[4].numOne }}
</span>
</div>
<div class="cor" :style="i == 0 ? 'flex:1.2;' : ''">
<img :src="item.img[1]" />
{{ item.titleT[1] }}：
<span
:style="`color: ${item.color[1]}; cursor: pointer;`"
@click="LookMap([], item.list[4].numTwoList, i)"
>
{{ item.list[4].numTwo }}
</span>
</div>
<div class="cor" v-if="i == 0">
<img :src="item.img[2]" />
{{ item.titleT[2] }}：
<span
:style="`color: ${item.color[2]}; cursor: pointer;`"
@click="LookMap([], item.list[5].numOneList, 1)"
>
{{ item.list[5].numOne }}
</span>
</div>
</div>
<div :style="`height:calc(${boxHeight.height} - 90px);width: 100%;overflow-y: auto;`" class="BoxA">
<div class="card-Box">
<div>
<span class="line"></span>
<span class="vol">500kV</span>
</div>
<div class="num">
<div @click="LookMap(item.list[0].numOneList, item.list[0].numTwoList, i)">
{{ item.titleT[0] }}:
<span :style="`color: ${item.color[0]}`">{{ item.list[0].numOne }}</span>
</div>
<div @click="LookMap([], item.list[0].numTwoList, i)">
{{ item.titleT[1] }}:
<span :style="`color: ${item.color[1]}`">{{ item.list[0].numTwo }}</span>
</div>
</div>
</div>
<div class="card-Box">
<div>
<span class="line"></span>
<span class="vol">220kV</span>
</div>
<div class="num">
<div @click="LookMap(item.list[1].numOneList, item.list[1].numTwoList, i)">
{{ item.titleT[0] }}:
<span :style="`color: ${item.color[0]}`">{{ item.list[1].numOne }}</span>
</div>
<div @click="LookMap([], item.list[1].numTwoList, i)">
{{ item.titleT[1] }}:
<span :style="`color: ${item.color[1]}`">{{ item.list[1].numTwo }}</span>
</div>
</div>
</div>
<div class="card-Box">
<div>
<span class="line"></span>
<span class="vol">110kV</span>
</div>
<div class="num">
<div @click="LookMap(item.list[2].numOneList, item.list[2].numTwoList, i)">
{{ item.titleT[0] }}:
<span :style="`color: ${item.color[0]}`">{{ item.list[2].numOne }}</span>
</div>
<div @click="LookMap([], item.list[2].numTwoList, i)">
{{ item.titleT[1] }}:
<span :style="`color: ${item.color[1]}`">{{ item.list[2].numTwo }}</span>
</div>
</div>
</div>
<div class="card-Box">
<div>
<span class="line"></span>
<span class="vol">35kV</span>
</div>
<div class="num">
<div @click="LookMap(item.list[3].numOneList, item.list[3].numTwoList, i)">
{{ item.titleT[0] }}:
<span :style="`color: ${item.color[0]}`">{{ item.list[3].numOne }}</span>
</div>
<div @click="LookMap([], item.list[3].numTwoList, i)">
{{ item.titleT[1] }}:
<span :style="`color: ${item.color[1]}`">{{ item.list[3].numTwo }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<img
class="imgL"
:style="show ? 'transform: rotate(0deg);' : 'transform: rotate(180deg);'"
@click="show = !show"
src="@/assets/img/QH.png"
/>
<!-- 变电站详情 -->
<stand ref="standRef" />
<!-- 终端 -->
<terminal ref="terminalRef" />
<!-- 检测点 -->
<point ref="pointRef" />
</div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref, provide } from 'vue'
import { useDictData } from '@/stores/dictData'
import { mainHeight } from '@/utils/layout'
import { ArrowRight } from '@element-plus/icons-vue'
import stand from './details/stand.vue'
import terminal from './details/terminal.vue'
import point from './details/point.vue'
import {
getSubLineGiveAnAlarm,
getGridDiagramMonitor,
getGridDiagramDev,
getGridDiagramAreaData
} from '@/api/device-boot/panorama'
const emit = defineEmits(['LookMap', 'GridDiagram'])
const dictData = useDictData()
const show = ref(false)
const standRef = ref()
const terminalRef = ref()
const pointRef = ref()
const list: any = ref([
{
title: '监测点',
img: [
new URL(`@/assets/img/JCD-ZS.png`, import.meta.url),
new URL(`@/assets/img/JCD-ZX.png`, import.meta.url),
new URL(`@/assets/img/JCD-GJ.png`, import.meta.url)
],
ratioTitle: '告警率',
ratio: 0,
titleT: ['总数', '当前在线', '告警'],
color: ['#000', '#2dcd28', '#bd3124'],
list: [
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numOneList: []
}
]
},
{
title: '变电站',
img: [new URL(`@/assets/img/BDZ-ZS.png`, import.meta.url), new URL(`@/assets/img/BDZ-GJ.png`, import.meta.url)],
color: ['#000', '#bd3124'],
ratioTitle: '告警率',
ratio: 0,
titleT: ['总数', '告警'],
list: [
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
}
]
},
{
title: '终端',
img: [new URL(`@/assets/img/ZD-ZS.png`, import.meta.url), new URL(`@/assets/img/ZD-ZX.png`, import.meta.url)],
titleT: ['总数', '在运'],
ratioTitle: '在运率',
ratio: 0,
color: ['#000', '#2dcd28'],
list: [
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
}
]
}
])
const formRow: any = ref({})
const height = mainHeight(30)
const boxHeight = mainHeight(40, 3)
// 详情
const open = (e: any) => {
if (e == 0) {
pointRef.value.open(formRow.value)
} else if (e == 1) {
standRef.value.open(formRow.value)
} else if (e == 2) {
terminalRef.value.open(formRow.value)
}
}
const info = async (row: any) => {
let form = {
...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
}
formRow.value = form
// 监测点
await getGridDiagramMonitor(form).then(res => {
let data = row.isUpToGrid == 1 ? res.data.gwInfo : res.data.info
list.value[0].list = data[0].data.map((item: any) => {
return {
numOne: item.num,
numTwo: item.onLineNum,
numOneList: item.numList,
numTwoList: item.onLineNumList
}
})
list.value[0].list.push({
numOne: 0,
numOneList: []
})
})
// 监测点告警
getGridDiagramAreaData(form).then((res: any) => {
let numOne = 0
let numOneList: any = []
res.data.forEach((item: any) => {
numOne = numOne + item.alarm
numOneList.push(...item.alarmList)
})
list.value[0].list[5] = {
numOne: numOne,
numOneList: numOneList
}
list.value[0].ratio = ((list.value[0].list[5].numOne / list.value[0].list[4].numOne) * 100).toFixed(2)
})
// 变电站
getSubLineGiveAnAlarm(form).then(res => {
let data = row.isUpToGrid == 1 ? res.data.gwInfo : res.data.info
list.value[1].list = data[0].data
list.value[1].ratio = ((list.value[1].list[4].numTwo / list.value[1].list[4].numOne) * 100).toFixed(2)
})
// 终端
getGridDiagramDev(form).then(res => {
let data = row.isUpToGrid == 1 ? res.data.gwInfo : res.data.info
list.value[2].list = data[0].data
list.value[2].ratio = ((list.value[2].list[4].numTwo / list.value[2].list[4].numOne) * 100).toFixed(2)
})
}
// 点击
const LookMap = (coutList: object, alarmList: object, key?: any) => {
// console.log('🚀 ~ LookMap ~ row:', row)
let form = {
coutList: coutList,
alarmList: alarmList
}
emit('LookMap', form, key)
}
const GridDiagram = (k: any) => {
emit('GridDiagram', k)
}
onMounted(() => {})
defineExpose({ info, show })
</script>
<style lang="scss" scoped>
.boxLeft {
background-color: #fff;
width: 100%;
padding: 10px 10px 10px 10px;
border-radius: 5px;
font-size: 13px;
overflow: hidden;
}
.cardBox {
display: flex;
flex-wrap: wrap;
.card {
margin-top: 10px;
width: 48%;
margin-right: 2%;
display: flex;
.cor {
flex: 1;
display: flex;
align-items: center;
font-size: 12px;
color: #6d6d6d;
span {
font-size: 16px;
font-weight: 550;
}
}
img {
width: 40px;
height: 40px;
margin: 0 5%;
}
}
.BoxA {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 80px;
.card-Box {
display: grid;
grid-template-rows: 1fr 1fr;
align-items: center;
margin: 5px;
padding: 10px;
background-color: #edededc0;
border-radius: 10px;
max-height: 80px;
.line {
display: inline-block;
width: 0.5rem;
height: 0.5rem;
border-radius: 0.25rem;
background: var(--el-color-primary);
margin-right: 5px;
margin-bottom: 2px;
}
.num {
margin-left: 10px;
display: grid;
text-align: center;
grid-template-columns: 1fr 1fr;
font-size: 12px;
color: #6d6d6d;
div {
cursor: pointer;
}
span {
font-size: 14px;
font-weight: 550;
}
}
}
}
}
.title {
// height: ;
display: flex;
justify-content: space-between;
font-size: 15px;
line-height: 23px;
padding-left: 5px;
width: 100%;
font-weight: 550;
span:nth-child(1) {
cursor: pointer;
}
.info {
font-weight: normal;
display: flex;
font-size: 12px;
cursor: pointer;
color: #757575;
}
.ratio {
font-weight: 500;
font-size: 12px;
line-height: 12px;
}
}
.imgL {
position: absolute;
padding: 10px;
top: calc(50% - 80px);
right: -23px;
transform: rotate(180deg);
height: 200px;
cursor: pointer;
}
.show {
width: 0px;
transition: all 0.3s ease;
.boxLeft {
padding: 0;
}
}
.noshow {
width: 25%;
transition: all 0.3s ease;
.boxLeft {
padding: 10px 10px 10px 10px;
}
}
:deep(.el-card) {
--el-card-padding: 10px !important;
}
:deep(.el-table thead) {
color: #000;
}
:deep(.el-dialog__body) {
max-height: none !important;
}
</style>

579
src/views/pqs/panorama/index.vue
View File

@@ -1,280 +1,299 @@
<template>
<div class="panorama" :style="height">
<div class="mapBox" v-show="lineInfo">
<DatePicker ref="datePickerRef" style="display: none" theCurrentTime />
<el-form :inline="true" :model="form" class="demo-form-inline">
<el-form-item>
<Area ref="areaRef" :show-all-levels="false" v-model="form.orgNo" style="width: 100px"
@changeValue="changeValue" />
</el-form-item>
<!-- <el-form-item>
<el-select v-model="form.isUpToGrid" style="width: 100px" @change="info">
<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item> -->
<el-form-item>
<div class="Icon" @click="reset">
<Icon name="fa fa-refresh" />
</div>
</el-form-item>
</el-form>
</div>
<!-- 地图 -->
<Map v-if="VITE_FLAG" ref="mapRef" @changeValue="changeValue" :lineInfo="lineInfo" @drop="drop"
@show="infoShow" />
<div v-show="lineInfo">
<!-- 省级 -->
<div v-show="control == 1">
<mapL ref="mapLRef" class="mapL" @LookMap="LookMap" @GridDiagram="GridDiagram" />
<mapR ref="mapRRef" class="mapR" />
</div>
<!-- 市级 -->
<!-- <div v-show="control == 4"> -->
<div v-show="control == 2">
<cityMapL ref="cityMapLRef" class="mapL" @LookMap="LookMap" @GridDiagram="GridDiagram" />
<cityMapR ref="cityMapRRef" class="mapR" />
</div>
</div>
<Info v-if="!lineInfo" style="position: absolute;z-index: 2;
top: -10px;width: 100%;" ref="InfoRef" @back="lineInfo = true,infoShow(false)" />
</div>
</template>
<script setup lang="ts">
import { onMounted, nextTick, ref, provide } from 'vue'
import Area from '@/components/form/area/index.vue'
import Map from './components/map.vue'
import { useDictData } from '@/stores/dictData'
import { mainHeight } from '@/utils/layout'
import { Search, Refresh } from '@element-plus/icons-vue'
import mapL from './components/mapL.vue'
import mapR from './components/mapR.vue'
import cityMapL from './components/cityMapL.vue'
import cityMapR from './components/cityMapR.vue'
import Info from './components/line/info.vue'
import DatePicker from '@/components/form/datePicker/index.vue'
const VITE_FLAG = true//import.meta.env.VITE_NAME == 'jibei'
const dictData = useDictData()
defineOptions({
name: 'panorama'
})
const datePickerRef = ref()
const areaRef = ref()
const lineInfo = ref(true)
const mapRef = ref()
const mapLRef = ref()
const InfoRef = ref()
const mapRRef = ref()
const cityMapLRef = ref()
const cityMapRRef = ref()
// const list: any = [dictData.state.area[0], ...dictData.state.area[0].children]
const options: any = ref([
{
name: dictData.state.area[0].name,
id: 0
},
{
name: '上送网公司',
id: 1
}
])
const control = ref(1)
const form: any = ref({
name: '',
orgNo: dictData.state.area[0].id,
areaName: dictData.state.area[0]?.name,
isUpToGrid: 0
})
const height = mainHeight(10)
// 获取区域名称
const changeValue = (e: any) => {
VITE_FLAG ? mapRef.value.locatePositions(e) : ''
form.value.orgNo = e.data.id //list.filter((item: any) => item.code == e.orgId)[0]?.id || dictData.state.area[0].id
form.value.areaName = e.data.name
options.value[0].name = e.data.areaName
control.value = e.data.level
info()
}
//点击监测点详情
const drop = (id: string) => {
lineInfo.value = false
nextTick(() => {
InfoRef.value.open(id)
})
}
// 关闭左右数据展示
const infoShow = (e: boolean) => {
mapLRef.value.show = e
mapRRef.value.show = e
cityMapLRef.value.show = e
cityMapRRef.value.show = e
}
// 地图控制图层
const LookMap = (row: any, key?: any) => {
VITE_FLAG ? mapRef.value.addMarkers({ ...row, type: 1 }, key) : ''
}
const LngLat = [
{
name: '唐山',
LngLat: [118.335849137, 39.7513593355],
zoom: 8
},
{
name: '张家口',
LngLat: [115.032504679, 40.8951549951],
zoom: 7
},
{
name: '秦皇岛',
LngLat: [119.185113833, 40.1179119754],
zoom: 8.3
},
{
name: '承德',
LngLat: [117.548498365, 41.3775890632],
zoom: 7.3
},
{
name: '廊坊',
LngLat: [116.628004129, 39.0589378611],
zoom: 8
},
{
name: '超高压',
LngLat: [116.84428600000001, 40.57707185292256],
zoom: 6.709267680647425
},
{
name: '风光储',
LngLat: [116.84428600000001, 40.57707185292256],
zoom: 6.709267680647425
}
]
//区域统计展示切换
const GridDiagram = (k?: number, num?: number) => {
VITE_FLAG ? mapRef.value.radiusPop(k) : ''
if (num == 3) {
// form.value.areaName
let value = LngLat.filter(item => item.name == form.value.areaName)[0]
if (value) VITE_FLAG ? mapRef.value.flyTo({ coordinate: value.LngLat }, value.zoom) : ''
} else {
VITE_FLAG ? mapRef.value.flyTo({ coordinate: [116.84428600000001, 40.57707185292256] }, 8) : ''
}
}
const info = () => {
form.value.startTime = datePickerRef.value.timeValue[0]
form.value.searchBeginTime = datePickerRef.value.timeValue[0]
form.value.endTime = datePickerRef.value.timeValue[1]
form.value.searchEndTime = datePickerRef.value.timeValue[1]
form.value.type = 1//datePickerRef.value.interval
VITE_FLAG ? mapRef.value.grids(form.value) : ''
if (control.value == 1) {
mapLRef.value.info(form.value)
mapRRef.value.info(form.value)
} else {
cityMapRRef.value.info(form.value)
cityMapLRef.value.info(form.value)
}
}
// 重置
const reset = () => {
form.value = {
name: '',
orgNo: dictData.state.area[0].id,
areaName: dictData.state.area[0]?.name,
isUpToGrid: 0
}
mapRef.value.reset()
changeValue({ data: dictData.state.area[0] })
}
onMounted(() => {
// info()
changeValue({ data: dictData.state.area[0] })
// aaa()
})
</script>
<style lang="scss" scoped>
:deep(.mapBox) {
position: absolute;
top: 10px;
left: calc(50% + 45px);
z-index: 1;
.el-select {
min-width: 100px;
.el-select__wrapper {
height: 46px !important;
border-radius: 8px;
}
}
.Icon {
height: 46px;
width: 46px;
background-color: #fff;
border-radius: 8px;
text-align: center;
line-height: 50px;
cursor: pointer;
.fa-refresh {
color: var(--el-color-primary) !important;
}
}
.el-input__wrapper {
height: 46px;
border-radius: 8px;
}
.el-form-item {
margin-right: 15px;
}
}
.mapL {
position: absolute;
top: 5px;
// z-index: 1;
left: 10px;
}
.mapR {
position: absolute;
top: 5px;
// z-index: 1;
right: 10px;
}
.panorama {
margin: 10px 0 0 0;
position: relative;
}
.el-button:focus {
color: var(--color);
background-color: #fff;
}
.el-button:hover {
color: var(--el-color-white);
border-color: var(--el-button-hover-bg-color);
background-color: var(--el-button-hover-bg-color);
outline: 0;
}
</style>
<template>
<div class="panorama" :style="height">
<div class="mapBox" v-show="lineInfo">
<DatePicker ref="datePickerRef" style="display: none" theCurrentTime />
<el-form :inline="true" :model="form" class="demo-form-inline">
<el-form-item>
<Area
ref="areaRef"
:show-all-levels="false"
v-model="form.orgNo"
style="width: 100px"
@changeValue="changeValue"
/>
</el-form-item>
<!-- <el-form-item>
<el-select v-model="form.isUpToGrid" style="width: 100px" @change="info">
<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item> -->
<el-form-item>
<div class="Icon" @click="reset">
<Icon name="fa fa-refresh" />
</div>
</el-form-item>
</el-form>
</div>
<!-- 地图 -->
<Map
v-if="VITE_FLAG"
ref="mapRef"
@changeValue="changeValue"
:lineInfo="lineInfo"
@drop="drop"
@show="infoShow"
/>
<div v-show="lineInfo">
<!-- 省级 -->
<div v-show="control == 1">
<mapL v-if="!IS_LN" ref="mapLRef" class="mapL" @LookMap="LookMap" @GridDiagram="GridDiagram" />
<mapL_LN v-else ref="mapLRef" class="mapL" @LookMap="LookMap" @GridDiagram="GridDiagram" />
<mapR ref="mapRRef" class="mapR" />
</div>
<!-- 市级 -->
<!-- <div v-show="control == 4"> -->
<div v-show="control == 2">
<cityMapL v-if="!IS_LN" ref="cityMapLRef" class="mapL" @LookMap="LookMap" @GridDiagram="GridDiagram" />
<cityMapL_LN v-else ref="cityMapLRef" class="mapL" @LookMap="LookMap" @GridDiagram="GridDiagram" />
<cityMapR ref="cityMapRRef" class="mapR" />
</div>
</div>
<Info
v-if="!lineInfo"
style="position: absolute; z-index: 2; top: -10px; width: 100%"
ref="InfoRef"
@back=";(lineInfo = true), infoShow(false)"
/>
</div>
</template>
<script setup lang="ts">
import { onMounted, nextTick, ref, provide } from 'vue'
import Area from '@/components/form/area/index.vue'
import Map from './components/map.vue'
import { useDictData } from '@/stores/dictData'
import { mainHeight } from '@/utils/layout'
import { Search, Refresh } from '@element-plus/icons-vue'
import mapL from './components/mapL.vue'
import mapL_LN from './components/mapL-LN.vue'
import mapR from './components/mapR.vue'
import cityMapL from './components/cityMapL.vue'
import cityMapL_LN from './components/cityMapL-LN.vue'
import cityMapR from './components/cityMapR.vue'
import Info from './components/line/info.vue'
import DatePicker from '@/components/form/datePicker/index.vue'
const VITE_FLAG = true //import.meta.env.VITE_NAME == 'jibei'
const IS_LN = import.meta.env.VITE_NAME == 'LN' || import.meta.env.VITE_NAME == 'LNqr'
const dictData = useDictData()
defineOptions({
name: 'panorama'
})
const datePickerRef = ref()
const areaRef = ref()
const lineInfo = ref(true)
const mapRef = ref()
const mapLRef = ref()
const InfoRef = ref()
const mapRRef = ref()
const cityMapLRef = ref()
const cityMapRRef = ref()
// const list: any = [dictData.state.area[0], ...dictData.state.area[0].children]
const options: any = ref([
{
name: dictData.state.area[0].name,
id: 0
},
{
name: '上送网公司',
id: 1
}
])
const control = ref(1)
const form: any = ref({
name: '',
orgNo: dictData.state.area[0].id,
areaName: dictData.state.area[0]?.name,
isUpToGrid: 0
})
const height = mainHeight(10)
// 获取区域名称
const changeValue = (e: any) => {
VITE_FLAG ? mapRef.value.locatePositions(e) : ''
form.value.orgNo = e.data.id //list.filter((item: any) => item.code == e.orgId)[0]?.id || dictData.state.area[0].id
form.value.areaName = e.data.name
options.value[0].name = e.data.areaName
control.value = e.data.level
info()
}
//点击监测点详情
const drop = (id: string) => {
lineInfo.value = false
nextTick(() => {
InfoRef.value.open(id)
})
}
// 关闭左右数据展示
const infoShow = (e: boolean) => {
mapLRef.value.show = e
mapRRef.value.show = e
cityMapLRef.value.show = e
cityMapRRef.value.show = e
}
// 地图控制图层
const LookMap = (row: any, key?: any) => {
VITE_FLAG ? mapRef.value.addMarkers({ ...row, type: 1 }, key) : ''
}
const LngLat = [
{
name: '唐山',
LngLat: [118.335849137, 39.7513593355],
zoom: 8
},
{
name: '张家口',
LngLat: [115.032504679, 40.8951549951],
zoom: 7
},
{
name: '秦皇岛',
LngLat: [119.185113833, 40.1179119754],
zoom: 8.3
},
{
name: '承德',
LngLat: [117.548498365, 41.3775890632],
zoom: 7.3
},
{
name: '廊坊',
LngLat: [116.628004129, 39.0589378611],
zoom: 8
},
{
name: '超高压',
LngLat: [116.84428600000001, 40.57707185292256],
zoom: 6.709267680647425
},
{
name: '风光储',
LngLat: [116.84428600000001, 40.57707185292256],
zoom: 6.709267680647425
}
]
//区域统计展示切换
const GridDiagram = (k?: number, num?: number) => {
VITE_FLAG ? mapRef.value.radiusPop(k) : ''
if (num == 3) {
// form.value.areaName
let value = LngLat.filter(item => item.name == form.value.areaName)[0]
if (value) VITE_FLAG ? mapRef.value.flyTo({ coordinate: value.LngLat }, value.zoom) : ''
} else {
VITE_FLAG ? mapRef.value.flyTo({ coordinate: [116.84428600000001, 40.57707185292256] }, 8) : ''
}
}
const info = () => {
form.value.startTime = datePickerRef.value.timeValue[0]
form.value.searchBeginTime = datePickerRef.value.timeValue[0]
form.value.endTime = datePickerRef.value.timeValue[1]
form.value.searchEndTime = datePickerRef.value.timeValue[1]
form.value.type = 1 //datePickerRef.value.interval
VITE_FLAG ? mapRef.value.grids(form.value) : ''
if (control.value == 1) {
mapLRef.value.info(form.value)
mapRRef.value.info(form.value)
} else {
cityMapRRef.value.info(form.value)
cityMapLRef.value.info(form.value)
}
}
// 重置
const reset = () => {
form.value = {
name: '',
orgNo: dictData.state.area[0].id,
areaName: dictData.state.area[0]?.name,
isUpToGrid: 0
}
mapRef.value.reset()
changeValue({ data: dictData.state.area[0] })
}
onMounted(() => {
// info()
changeValue({ data: dictData.state.area[0] })
// aaa()
})
</script>
<style lang="scss" scoped>
:deep(.mapBox) {
position: absolute;
top: 10px;
left: calc(50% + 45px);
z-index: 1;
.el-select {
min-width: 100px;
.el-select__wrapper {
height: 46px !important;
border-radius: 8px;
}
}
.Icon {
height: 46px;
width: 46px;
background-color: #fff;
border-radius: 8px;
text-align: center;
line-height: 50px;
cursor: pointer;
.fa-refresh {
color: var(--el-color-primary) !important;
}
}
.el-input__wrapper {
height: 46px;
border-radius: 8px;
}
.el-form-item {
margin-right: 15px;
}
}
.mapL {
position: absolute;
top: 5px;
// z-index: 1;
left: 10px;
}
.mapR {
position: absolute;
top: 5px;
// z-index: 1;
right: 10px;
}
.panorama {
margin: 10px 0 0 0;
position: relative;
}
.el-button:focus {
color: var(--color);
background-color: #fff;
}
.el-button:hover {
color: var(--el-color-white);
border-color: var(--el-button-hover-bg-color);
background-color: var(--el-button-hover-bg-color);
outline: 0;
}
</style>

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

File diff suppressed because it is too large Load Diff