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
2025-12-14 12:47:53 +08:00
parent ff2b9db7b8
commit 0b61c4b7ba
55 changed files with 2679 additions and 951 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/views/pqs/qualityInspeection/panorama/components/city/exceeded.vue
View File

@@ -10,15 +10,19 @@
<div class="boxSteps">
<el-steps>
<template v-for="(item, i) in Voltage">
<el-step :class="active == i ? 'highlight' : ''" :title="item.name"
@click="handleClick(i)"></el-step>
<el-step
:class="active == i ? 'highlight' : ''"
:title="item.name"
@click="handleClick(i)"
></el-step>
</template>
</el-steps>
</div>
<div v-for="(item, i) in evaluationData" class="evaluationData">
<el-row style="width: 100%">
<el-col :span="12" style="display: flex">
<img :src="url[i]" />
<!-- <img :src="url[i]" /> -->
<span :class="`iconfont ${url[i]} icoColor`"></span>
<span>{{ item.targetName }}</span>
</el-col>
<el-col :span="12" style="display: flex">
@@ -66,11 +70,11 @@ const Voltage: any = dictData.getBasicData('Dev_Voltage_Stand').filter(item => {
const chartRef = ref<HTMLDivElement>()
const url: any = [
new URL(`@/assets/img/PLPC.png`, import.meta.url),
new URL(`@/assets/img/DYPC.png`, import.meta.url),
new URL(`@/assets/img/JBL.png`, import.meta.url),
new URL(`@/assets/img/SXDY.png`, import.meta.url),
new URL(`@/assets/img/SB.png`, import.meta.url)
'icon-frequency',
'icon-dianya',
'icon-dianyazongxiebojibianshuai',
'icon-sanxiangdianyafuzhibupingheng',
'icon-a-253_ipower'
]
const tableData: any = ref([])
@@ -199,6 +203,7 @@ const handleClick = (i: any) => {
defineExpose({ open })
</script>
<style lang="scss" scoped>
@import '@/assets/font/iconfont.css';
:deep(.el-select) {
min-width: 80px;
}
@@ -283,4 +288,9 @@ defineExpose({ open })
// color: var(--el-color-primary) !important;
// }
}
.icoColor {
color: var(--el-color-primary);
margin: 0 20px;
font-size: 20px;
}
</style>

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

@@ -61,20 +61,20 @@
</div>
</div>
</div>
<!-- 监测点指标统计 -->
<!-- 资产性质 -->
<div :style="`height:calc(${boxHeight.height} + 50px)`">
<div class="title">
<span>监测点指标统计</span>
<span>资产性质</span>
</div>
<div style="display: flex" class="mt2">
<img src="@/assets/img/FGX.png" />
</div>
<div :style="`height:calc(${boxHeight.height} + 20px);overflow-y: auto;`">
<div v-for="item in countList">
<!-- <div class="title mt5" style="font-weight: 500">
<img src="@/assets/img/TJ.png" />
{{ item.title }}
</div> -->
<div class="title mt5" style="font-weight: 500">
<!-- <img src="@/assets/img/TJ.png" />
{{ item.title }} -->
</div>
<div
class="card-Box mt10"
:style="`height:calc((${boxHeight.height} - 20px )/ 2);`"
@@ -95,33 +95,44 @@
</div>
<div>
数据完整性:
<span style="color: #2b7fd3; cursor: text">{{ val.integrityRate }}%</span>
<span style="color: #2b7fd3; cursor: text">{{ val.integrityRate || 0 }}%</span>
</div>
<div>
在线率:
<span style="color: #2b7fd3; cursor: text">{{ val.integrityRate }}%</span>
<span style="color: #2dcd28; cursor: text">{{ val.onLineRate || 0 }}%</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 监测点指标统计 -->
<!-- 资产性质 -->
<div :style="`height:calc(${boxHeight.height} - 55px)`">
<div class="title">
<span>监测运行统计</span>
<div class="titleNum">
( 合格:
<span class="mr10" style="color: #2dcd28" @click="LookMap(linList[0].lineListOne, [], 0)">
{{ linList[0].lineNumOne || 0 }}
</span>
告警:
<span style="color: #a52a2a" @click="LookMap(linList[0].lineListOne, [], 0)">
{{ linList[0].lineNumTwo || 0 }}
</span>
)
</div>
</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 class="card-Box" v-for="item in linList.slice(1)">
<div class="num num2">
<div style="text-align: left">
<span class="line"></span>
<i class="vol">{{ item.title[0] }}</i>
</div>
<div>
{{ item.title[1] }}:
<span style="color: #2dcd28" @click="LookMap(item.lineListOne, [], 0)">
@@ -297,9 +308,10 @@ const countList: any = ref([
title: '电网侧监测点',
num: 0,
onLineNum: 0,
integrityRate: 0
integrityRate: 0,
onLineRate: 0
},
{ title: '非电网侧监测点', num: 0, onLineNum: 0, integrityRate: 0 }
{ title: '非电网侧监测点', num: 0, onLineNum: 0, integrityRate: 0, onLineRate: 0 }
]
}
// {
@@ -379,7 +391,7 @@ const info = async (row: any) => {
numOneList: []
})
})
// 监测点指标统计
// 资产性质
getGridDiagramStatistics(form).then(res => {
countList.value[0].children[0] = { title: '电网侧监测点', ...res.data.data[0] }
countList.value[0].children[1] = { title: '非电网侧监测点', ...res.data.data[1] }
@@ -519,13 +531,13 @@ defineExpose({ info, show })
// grid-template-rows: 1fr 1fr;
display: flex;
flex-direction: column;
justify-content: space-evenly;
justify-content: space-around;
// align-items: center;
margin: 0 5px 5px;
padding: 10px;
background-color: #edededc0;
border-radius: 10px;
min-height: 60px;
min-height: 40px;
max-height: 120px;
.line {
@@ -554,7 +566,7 @@ defineExpose({ info, show })
.num1 {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
gap: 8px;
gap: 15px;
div {
display: flex;
padding-left: 20px;
@@ -563,12 +575,16 @@ defineExpose({ info, show })
}
}
}
.num2 {
display: grid;
grid-template-columns: 1fr 1fr 1fr !important;
}
}
.BoxA {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
// grid-template-rows: 80px;
.num {
@@ -619,4 +635,13 @@ defineExpose({ info, show })
:deep(.el-dialog__body) {
max-height: none !important;
}
.titleNum {
font-size: 13px;
font-weight: normal;
margin-left: 5px;
span {
font-weight: 600;
cursor: pointer;
}
}
</style>

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

@@ -1,13 +1,13 @@
<template>
<!-- 综合评估详情 -->
<el-dialog draggable title="区域污染值统计" v-model="dialogVisible" width="1400px">
<el-dialog draggable title="区域污染水平评估" v-model="dialogVisible" width="1400px">
<div style="display: flex">
<div style="width: 400px">
<vxe-table
v-bind="defaultAttribute"
ref="tableRef"
@current-change="currentChangeEvent"
height="240px"
height="250px"
:row-config="{ isCurrent: true, isHover: true }"
:data="tableData"
>
@@ -26,14 +26,14 @@
</vxe-table>
</div>
<div class="ml10" style="width: 990px">
<vxe-table v-bind="defaultAttribute" v-loading="loadingTab" ref="vxeRef" height="240px" :data="subdata">
<vxe-column type="seq" width="70"></vxe-column>
<vxe-column field="devName" title="终端名称"></vxe-column>
<vxe-column field="lineName" title="监测点名称" />
<vxe-column field="powerFlag" title="电网标志" />
<vxe-column field="devType" title="终端型号"></vxe-column>
<vxe-column field="manufacturer" title="终端厂家"></vxe-column>
<vxe-column field="vharmonicValue" title="污染值" sortable>
<vxe-table v-bind="defaultAttribute" v-loading="loadingTab" ref="vxeRef" height="250px" :data="subdata">
<vxe-column type="seq" width="70" title="序号"></vxe-column>
<vxe-column field="subName" title="变电站名称" min-width="120"></vxe-column>
<vxe-column field="lineName" title="监测点名称" align="center" min-width="120"></vxe-column>
<vxe-column field="objName" title="监测对象名称" align="center" min-width="100"></vxe-column>
<vxe-column field="loadType" title="干扰源类型" align="center" min-width="100"></vxe-column>
<vxe-column field="powerFlag" title="监测位置" align="center" min-width="100"></vxe-column>
<vxe-column field="vharmonicValue" title="污染值" sortable min-width="80">
<template #default="scope">
<span
:style="{
@@ -59,7 +59,7 @@
</el-radio-group>
</div> -->
<MyEChart style="height: 300px" :options="picEChart" />
<MyEChart style="height: 300px" :options="picEChart" @echartClick="echartClick"/>
</div>
</el-dialog>
</template>
@@ -68,7 +68,9 @@ import { ref, nextTick } from 'vue'
import MyEChart from '@/components/echarts/MyEchart.vue'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import { useDictData } from '@/stores/dictData'
import { getAssessDetail, getAssessTrend, downPollutionSubCalc } from '@/api/device-boot/panorama'
import { getAssessDetail, getAssessTrend, downPollutionSensitiveUser } from '@/api/device-boot/panorama'
import { useRoute } from 'vue-router'
const router = useRouter()
const dictData = useDictData()
const dialogVisible: any = ref(false)
const rowList: any = ref({})
@@ -108,19 +110,18 @@ const currentChangeEvent = async () => {
const analysis = () => {
loading.value = true
let time = rowList.value.searchBeginTime.slice(0, 4) + `-01-01`
downPollutionSubCalc({ ...rowList.value, ids: [PollutionList[0].id] }).then(res => {
downPollutionSensitiveUser({ ...rowList.value, ids: [PollutionList[0].id], deptId: rowList.value.id }).then(res => {
const first10Items = res.data.slice(0, 10)
picEChart.value = {
title: {
text: '污染值排名前十变电站'
text: '污染值排名前十敏感及重要用户'
},
xAxis: {
name: '',
data: first10Items.map((item: any) => item.subStationName),
data: first10Items.map((item: any) => item.projectName.split('(')[0].trim()),
axisLabel: {
rotate: 30, // 核心：倾斜 45 度（推荐 30/45/60，角度太大易读性差）
rotate: 30 // 核心：倾斜 45 度（推荐 30/45/60，角度太大易读性差）
}
},
grid: {
@@ -139,7 +140,7 @@ const analysis = () => {
// name: time[i],
name: '污染值',
type: 'bar',
data: first10Items.map((item: any) => item.subVStationValue),
data: first10Items.map((item: any) => item.subValue),
itemStyle: {
color: function (params) {
// params.value 是当前柱子的数值
@@ -170,6 +171,17 @@ const setColor = val => {
? '#00B07D'
: ''
}
const echartClick = (res:any) => {
router.push({
name: 'harmonic-boot/qydetailedAnalysis/pollutionReport',
query: {
type: '4',
t: Date.now()
}
})
console.log("🚀 ~ echartClick ~ res:", res)
}
defineExpose({ open })
</script>
<style lang="scss" scoped>

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

@@ -19,17 +19,33 @@
<el-col :span="12">
<div class="title">
<span>分布统计</span>
<el-select
<el-radio-group v-model="statisticalType" size="small" @change="getGridDiagramDev">
<el-radio-button v-for="item in options" :label="item.code" @change="statiStics">
{{ item.name }}
</el-radio-button>
</el-radio-group>
<!-- <el-select
v-model="statisticalType"
value-key="id"
style="width: 120px; margin-right: 80px"
@change="statiStics"
>
<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item" />
</el-select>
</el-select> -->
</div>
<div class="pie">
<MyEChart style="height: 260px" :options="picEChart" />
<!-- <MyEChart style="height: 260px" :options="picEChart" /> -->
<MyEChart style="height: 260px; width: 50%" :options="picEChart" />
<el-table size="small" height="260px" style="width: 50%" :data="picList">
<el-table-column prop="orgName" width="90px" align="center">
<template #default="scope">
{{ scope.row.orgName.split('(')[0].trim() }}
</template>
</el-table-column>
<el-table-column prop="integrityRate" label="完整性(%)" align="center"></el-table-column>
<el-table-column prop="onLineRate" label="在线率(%)" align="center" />
<el-table-column prop="outOfStandardRate" label="超标占比(%)" align="center" />
</el-table>
</div>
</el-col>
</el-row>
@@ -55,12 +71,12 @@ import { useDictData } from '@/stores/dictData'
import { getGridDiagramLineTendency, getGridDiagramLineData, getHalfReport } from '@/api/device-boot/panorama'
const dictData = useDictData()
const dialogVisible: any = ref(false)
const picList: any = ref([])
const Voltage = dictData.getBasicData('Dev_Voltage_Stand')
const tableData: any = ref([])
const options = dictData.getBasicData('Statistical_Type', ['Report_Type', 'Power_Network'])
const options = dictData.getBasicData('Statistical_Type', ['Report_Type', 'Power_Network', 'JB_Power_Flag'])
const time = ref('1')
const statisticalType = ref(options[0])
const statisticalType = ref('Load_Type')
const loadTypeArr = dictData.getBasicData('Interference_Source')
const rowList: any = ref({})
@@ -141,52 +157,65 @@ const analysis = (e: any) => {
}
// 统计
const statiStics = () => {
getGridDiagramLineData({ ...rowList.value, statisticalType: statisticalType.value }).then(res => {
getGridDiagramLineData({
...rowList.value,
statisticalType: options.filter((item: any) => item.code == statisticalType.value)[0]
}).then(res => {
picList.value = res.data
let picData: any = []
const total = res.data.reduce((sum, item) => {
const num = (item.orgName.match(/\((\d+)\)/) || [])[1] || 0
return sum + Number(num)
}, 0)
res.data.forEach((item: any) => {
let value = (item.orgName.match(/\((\d+)\)/) || [])[1] || 0
picData.push({
value: value,
name: item.orgName,
proportion: (value / total).toFixed(2)
})
})
picEChart.value = {
title: {
text: ''
tooltip: {
trigger: 'item',
formatter: '{b}: 占比 {d}% '
},
legend: {
show: false
},
xAxis: {
data: res.data.map((item: any) => item.orgName)
show: false
},
yAxis: {
name: '%',
min: 0,
max: 100
show: false
},
options: {
dataZoom: null,
series: [
{
name: '数据完整性',
type: 'bar',
type: 'pie',
startAngle: 360,
center: ['50%', '55%'],
radius: ['40%', '60%'],
endAngle: 0,
labelLine: {
length: 8,
length2: 30,
show: true
},
label: {
padding: [0, -30],
formatter: '{b}\n\n'
},
itemStyle: {
borderColor: '#fff',
borderWidth: 1
},
data: res.data.map((item: any) => item.integrityRate),
label: {
show: true,
position: 'top',
fontSize: 12
}
},
{
name: '在线率',
type: 'bar',
data: res.data.map((item: any) => item.onLineRate),
label: {
show: true,
position: 'top',
fontSize: 12
}
},
{
name: '超标监测点占比',
type: 'bar',
data: res.data.map((item: any) => item.outOfStandardRate),
label: {
show: true,
position: 'top',
fontSize: 12
}
data: picData.sort((a, b) => b.value - a.value)
}
]
}

140
src/views/pqs/qualityInspeection/panorama/components/details/propInfo.vue Normal file
View File

@@ -0,0 +1,140 @@
<template>
<div class="propInfo" v-if="show">
<div class="top">
<el-form :inline="false" label-width="auto">
<el-form-item label=" 筛选:">
<el-input v-model="value" size="small" clearable placeholder="请输入关键字进行筛选"></el-input>
</el-form-item>
</el-form>
<Close class="ico" @click="show = false" />
</div>
<vxe-table
height="200px"
:data="filterDataByKeyword(dataList, value)"
size="mini"
border
ref="tableRef"
align="center"
showOverflow
v-loading="loading"
:row-config="{ isCurrent: true, isHover: true }"
:columnConfig="{ resizable: true }"
@current-change="currentChangeEvent"
style="z-index: 0;"
>
<vxe-column type="seq" title="序号" width="70px"></vxe-column>
<vxe-column field="gdName" title="供电公司"></vxe-column>
<vxe-column field="subName" title="变电站名称"></vxe-column>
<!-- <vxe-column field="deviceName" title="终端名称"></vxe-column> -->
<!-- <vxe-column field="ip" title="IP"></vxe-column> -->
<vxe-column field="lineName" title="监测点名称"></vxe-column>
<!-- <vxe-column field="loadType" title="干扰源"></vxe-column> -->
<vxe-column field="loadType" title="干扰源类型"></vxe-column>
<vxe-column field="objName" title="监测对象"></vxe-column>
</vxe-table>
</div>
</template>
<script setup lang="ts">
import { onMounted, nextTick, ref, provide } from 'vue'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import { Close } from '@element-plus/icons-vue'
const emit = defineEmits(['flyTo'])
const value = ref('')
const tableRef=ref()
const dataList = ref([])
const loading = ref(false)
const open = (data: any) => {
dataList.value = []
loading.value = true
show.value = true
setTimeout(() => {
dataList.value = data
loading.value = false
}, 1000)
}
/**
* 根据关键字过滤数据，匹配gdName/subName/deviceName字段
* @param {Array} data - 原始数据数组
* @param {string} keyword - 过滤关键字（支持多关键字空格分隔，忽略大小写）
* @returns {Array} 过滤后的结果数组
*/
function filterDataByKeyword(data, keyword) {
// 空关键字直接返回全部数据
if (!keyword || keyword.trim() === '') {
return [...data] // 返回新数组，避免修改原数据
}
// 处理关键字：转小写、去除首尾空格、拆分多关键字（空格分隔）
const keywords = keyword
.trim()
.toLowerCase()
.split(/\s+/)
.filter(k => k)
// 无有效关键字时返回全部
if (keywords.length === 0) {
return [...data]
}
// 过滤逻辑
return data.filter(item => {
// 提取需要匹配的三个字段，统一转小写（忽略大小写）
const gdName = (item.gdName || '').toLowerCase()
const subName = (item.subName || '').toLowerCase()
const deviceName = (item.deviceName || '').toLowerCase()
const ip = (item.ip || '').toLowerCase()
const lineName = (item.lineName || '').toLowerCase()
// 多关键字需全部匹配（逻辑与）
return keywords.every(key => {
// 只要有一个字段包含关键字，就匹配成功
return (
gdName.includes(key) ||
subName.includes(key) ||
deviceName.includes(key) ||
ip.includes(key) ||
lineName.includes(key)
)
})
})
}
const currentChangeEvent=()=>{
// tableRef.value.getCurrentRecord()
console.log("🚀 ~ currentChangeEvent ~ tableRef.value.getCurrentRecord():", tableRef.value.getCurrentRecord())
let data=tableRef.value.getCurrentRecord()
emit('flyTo',{ coordinate: [data.lng, data.lat] }, 16)
}
const show = ref(false)
defineExpose({ open, show })
</script>
<style lang="scss" scoped>
.propInfo {
position: absolute;
width: 48%;
bottom: 10px;
left: 26%;
background-color: #fff;
padding: 10px;
// z-index: 1;
}
.vxe-table--render-default.size--mini .vxe-body--column:not(.col--ellipsis),
.vxe-table--render-default.size--mini .vxe-footer--column:not(.col--ellipsis),
.vxe-table--render-default.size--mini .vxe-header--column:not(.col--ellipsis) {
padding: 5px;
}
.top {
width: 100%;
height: 40px;
background-color: #fff;
display: flex;
justify-content: space-between;
.ico {
height: 20px;
cursor: pointer;
margin-top: 8px;
}
}
</style>

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

@@ -18,14 +18,14 @@
</el-col>
<el-col :span="12">
<div class="title">
<span>
<span class="text-style" @click="jump">
污染告警
<el-popover placement="right" :width="190" trigger="hover">
<template #reference>
<WarningFilled class="WarningFilled" />
</template>
<div class="text">
<span style="color: #00B07D">无污染：0</span>
<span style="color: #00b07d">无污染：0</span>
<br />
<span style="color: #3399ff">轻微污染：(0 , 100]</span>
<br />
@@ -33,7 +33,7 @@
<br />
<span style="color: #ff9900">中度污染：(1000 , 10000]</span>
<br />
<span style="color: #A52a2a">重度污染：(10000</span>
<span style="color: #a52a2a">重度污染：(10000</span>
</div>
</el-popover>
</span>
@@ -51,12 +51,7 @@
</div>
<!-- :style="i == 3 ? `margin-left: 20%;` : ``" -->
<div class="pie">
<MyEChart
v-for="(item, i) in picEChart"
class="MyEChart"
:options="item"
/>
<MyEChart v-for="(item, i) in picEChart" @click="echartClick" class="MyEChart" :options="item" />
</div>
</el-col>
</el-row>
@@ -72,7 +67,7 @@
<vxe-column field="num3" sortable title="轻度污染数量" :formatter="formatter" />
<vxe-column field="num4" sortable title="中度污染数量" :formatter="formatter" />
<vxe-column field="num5" sortable title="重度污染数量" :formatter="formatter" />
<vxe-column field="num6" sortable title="暂无数据数量" :formatter="formatter" />
<!-- <vxe-column field="num6" sortable title="暂无数据数量" :formatter="formatter" /> -->
</vxe-table>
</div>
</el-dialog>
@@ -82,9 +77,10 @@ import { ref } from 'vue'
import MyEChart from '@/components/echarts/MyEchart.vue'
import { useDictData } from '@/stores/dictData'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import { WarningFilled } from '@element-plus/icons-vue'
import { getPollutionAlarmList, getPollutionAlarmData, getGridDiagramSubTendency } from '@/api/device-boot/panorama'
import { useRouter } from 'vue-router'
const router = useRouter()
const dictData = useDictData()
const dialogVisible: any = ref(false)
const time = ref('1')
@@ -95,7 +91,7 @@ const options: any = dictData.getBasicData('Pollution_Calc')
// return item
// }
// })
const contaminate = ref(options[0].id)
const contaminate = ref(options[0]?.id)
const rowList: any = ref({})
const trendEChart: any = ref({})
const tableData: any = ref([])
@@ -290,8 +286,7 @@ const contaminateC = () => {
let a3 = tableData.value.reduce((t, item) => t + (item.num3 - 0 || 0), 0)
let a4 = tableData.value.reduce((t, item) => t + (item.num4 - 0 || 0), 0)
let a5 = tableData.value.reduce((t, item) => t + (item.num5 - 0 || 0), 0)
let a6 = tableData.value.reduce((t, item) => t + (item.num6 - 0 || 0), 0)
let total = a1 + a2 + a3 + a4 + a5 + a6
let total = a1 + a2 + a3 + a4 + a5
// if (rowList.value.isUpToGrid == 0) {
// data = res.data.info
// } else {
@@ -331,13 +326,9 @@ const contaminateC = () => {
{
value: ((a5 / total || 0) * 100).toFixed(2),
name: `重度污染：${a5}座`
},
{
value: ((a6 / total || 0) * 100).toFixed(2),
name: `暂无数据：${a6}座`
},
}
]
const color = ['#00B07D', '#3399ff', '#ffcc33', '#ff9900', '#A52a2a','#ccc']
const color = ['#00B07D', '#3399ff', '#ffcc33', '#ff9900', '#A52a2a', '#ccc']
list.forEach((item, i) => {
picEChart.value[i] = {
@@ -500,6 +491,17 @@ const handleClose = () => {
dialogVisible.value = false
}
const jump = () => {
router.push({
name: 'harmonic-boot/qydetailedAnalysis/pollutionReport',
query: {
type: '2',
statisticalType:contaminate.value,
t: Date.now()
}
})
}
defineExpose({ open })
</script>
<style lang="scss" scoped>
@@ -531,4 +533,8 @@ defineExpose({ open })
:deep(.el-dialog__body) {
max-height: none !important;
}
.text-style {
cursor: pointer;
text-decoration: underline;
}
</style>

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

@@ -10,15 +10,19 @@
<div class="boxSteps">
<el-steps>
<template v-for="(item, i) in Voltage">
<el-step :class="active == i ? 'highlight' : ''" :title="item.name"
@click="handleClick(i)"></el-step>
<el-step
:class="active == i ? 'highlight' : ''"
:title="item.name"
@click="handleClick(i)"
></el-step>
</template>
</el-steps>
</div>
<div v-for="(item, i) in evaluationData" class="evaluationData">
<el-row style="width: 100%">
<el-col :span="12" style="display: flex">
<img :src="url[i]" />
<span :class="`iconfont ${url[i]} icoColor`"></span>
<!-- <img :src="url[i]" /> -->
<span>{{ item.targetName }}</span>
</el-col>
<el-col :span="12" style="display: flex">
@@ -90,11 +94,16 @@ const Voltage: any = dictData.getBasicData('Dev_Voltage_Stand').filter(item => {
const chartRef = ref<HTMLDivElement>()
const url: any = [
new URL(`@/assets/img/PLPC.png`, import.meta.url),
new URL(`@/assets/img/DYPC.png`, import.meta.url),
new URL(`@/assets/img/JBL.png`, import.meta.url),
new URL(`@/assets/img/SXDY.png`, import.meta.url),
new URL(`@/assets/img/SB.png`, import.meta.url)
'icon-frequency',
'icon-dianya',
'icon-dianyazongxiebojibianshuai',
'icon-sanxiangdianyafuzhibupingheng',
'icon-a-253_ipower'
// new URL(`@/assets/img/PLPC.png`, import.meta.url),
// new URL(`@/assets/img/DYPC.png`, import.meta.url),
// new URL(`@/assets/img/JBL.png`, import.meta.url),
// new URL(`@/assets/img/SXDY.png`, import.meta.url),
// new URL(`@/assets/img/SB.png`, import.meta.url)
]
const tableData: any = ref([])
const title = ['频率偏差(超标)', '电压偏差(超标)', '电压总谐波畸变率(超标)', '闪变(超标)', '三相电压不平衡度(超标)']
@@ -108,7 +117,8 @@ const echart = (row: any) => {
let chart = echarts.init(chartRef.value as HTMLDivElement)
let dataname = ['频率偏差(Hz)',
let dataname = [
'频率偏差(Hz)',
'电压偏差(%)',
'电压总谐波畸变率(%)',
'三相电压不平衡度(%)',
@@ -116,7 +126,8 @@ const echart = (row: any) => {
'谐波电压(%)',
'谐波电流(%)',
'间谐波电压(%)',
'负序电流(A)']
'负序电流(A)'
]
// let datamax = [100, 100, 100, 100, 100, 100]
let indicator = []
for (let i = 0; i < dataname.length; i++) {
@@ -247,6 +258,7 @@ const handleClick = (i: any) => {
defineExpose({ open })
</script>
<style lang="scss" scoped>
@import '@/assets/font/iconfont.css';
:deep(.el-select) {
min-width: 80px;
}
@@ -335,4 +347,9 @@ defineExpose({ open })
:deep(.el-dialog__body) {
max-height: none !important;
}
.icoColor{
color: var(--el-color-primary);
margin: 0 20px;
font-size: 20px;
}
</style>

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

@@ -5,10 +5,27 @@
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="360px" :data="tableData">
<vxe-column field="name" title="区域" />
<vxe-column sortable field="sagTimes" title="暂降次数" />
<vxe-column sortable field="swellTimes" title="暂升次数" />
<vxe-column sortable field="interruptTimes" title="短时中断次数" />
<vxe-column sortable field="sagTimes" title="暂降次数">
<template #default="{ row }">
<span class="text-style" @click="transientOpen(row.sagTimesIds, row.name, '暂降')">
{{ row.sagTimes }}
</span>
</template>
</vxe-column>
<vxe-column sortable field="swellTimes" title="暂升次数">
<template #default="{ row }">
<span class="text-style" @click="transientOpen(row.swellTimesIds, row.name, '暂升')">
{{ row.swellTimes }}
</span>
</template>
</vxe-column>
<vxe-column sortable field="interruptTimes" title="短时中断次数">
<template #default="{ row }">
<span class="text-style" @click="transientOpen(row.interruptTimesIds, row.name, '短时中断')">
{{ row.interruptTimes }}
</span>
</template>
</vxe-column>
<vxe-colgroup title="暂态严重度占比">
<vxe-column sortable field="rate90" title="SARFI-90" />
<vxe-column sortable field="rate50" title="SARFI-50" />
@@ -39,19 +56,21 @@
</div>
</div>
</el-dialog>
<!-- 暂态详情 -->
<transientDetails ref="transientRef" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import MyEChart from '@/components/echarts/MyEchart.vue'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import { getEventReason, getEventDetailByList } from '@/api/device-boot/panorama'
import transientDetails from './transientDetails.vue'
import { ElMessage } from 'element-plus'
const dialogVisible: any = ref(false)
const transientRef = ref()
const tableData: any = ref([])
const descentData = ref([])
const resembleData = ref([])
const picEChart = ref({})
const picEChart1 = ref({})
const open = async (row: any) => {
@@ -130,6 +149,13 @@ const open = async (row: any) => {
})
dialogVisible.value = true
}
// 查看详情
const transientOpen = (row: any, name: string, type: string) => {
if (row == null || row?.length == 0) {
return ElMessage.info('暂无详情')
}
transientRef.value.open(row, name, type)
}
defineExpose({ open })
</script>
@@ -150,4 +176,8 @@ defineExpose({ open })
:deep(.el-dialog__body) {
max-height: none !important;
}
.text-style {
cursor: pointer;
text-decoration: underline;
}
</style>

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

@@ -19,6 +19,10 @@
<el-col :span="12">
<div class="title">
<span>分布统计</span>
<el-radio-group v-model="type" size="small" @change="getGridDiagramDev">
<el-radio-button label="1">区域</el-radio-button>
<el-radio-button label="3">终端厂家</el-radio-button>
</el-radio-group>
</div>
<div class="pie">
<MyEChart style="height: 260px; width: 50%" :options="picEChart" />
@@ -77,11 +81,12 @@ const dialogVisible: any = ref(false)
const time = ref('1')
const rowList: any = ref({})
const tableData: any = ref()
const classificationData = dictData.getBasicData('Statistical_Type', ['Report_Type', 'Voltage_Level', 'Load_Type'])
const picList = ref([])
const type = ref('1')
const trendEChart: any = ref({})
const loadingTab = ref(false)
const picEChart = ref()
const open = async (row: any) => {
time.value = '1'
@@ -97,13 +102,49 @@ const open = async (row: any) => {
analysis(1)
dialogVisible.value = true
//分布统计
getGridDiagramDevData(rowList.value).then(res => {
picList.value = res.data
getGridDiagramDev()
// 列表
getGridDiagramDevDataList({
deviceInfoParam: {
...row,
serverName: 'pqs-common',
ids: [row.id],
runFlag: [],
comFlag: [],
manufacturer: dictData.getBasicData('Dev_Manufacturers'),
statisticalType: dictData.getBasicData('Statistical_Type', ['Report_Type'])[0]
},
...row,
serverName: 'pqs-common',
ids: [row.id],
runFlag: [],
comFlag: [],
manufacturer: dictData.getBasicData('Dev_Manufacturers'),
statisticalType: dictData.getBasicData('Statistical_Type', ['Report_Type'])[0]
}).then((res: any) => {
tableData.value = res.data
})
}
const getGridDiagramDev = async () => {
loadingTab.value = true
let data = JSON.parse(JSON.stringify(rowList.value))
data.deviceInfoParam.statisticalType = type.value == '1' ? classificationData[0] : classificationData[1]
data.statisticalType = type.value == '1' ? classificationData[0] : classificationData[1]
await getGridDiagramDevData(data).then((res: any) => {
const total = res.data.reduce((sum, item) => {
return sum + item.devCount
}, 0)
picList.value = type.value == '1' ? res.data : res.data.filter((item: any) => item.devCount != 0)
let picData: any = []
res.data.forEach((item: any) => {
picList.value = picList.value.sort((a, b) => b.devCount - a.devCount)
picList.value.forEach((item: any) => {
picData.push({
value: item.devCount,
name: `${item.orgName}`,
name: `${item.orgName}(${item.devCount})`,
proportion: (item.devCount / total).toFixed(2),
itemStyle: {
color: item.onlineEvaluate < 60 ? 'red' : item.onlineEvaluate < 90 ? 'orange' : 'green'
}
@@ -113,7 +154,7 @@ const open = async (row: any) => {
picEChart.value = {
tooltip: {
trigger: 'item',
formatter: '{b} :在运终端数 {c} 台'
formatter: '{b}: 占比 {d}% '
},
legend: {
show: false
@@ -153,29 +194,8 @@ const open = async (row: any) => {
}
}
})
// 列表
getGridDiagramDevDataList({
deviceInfoParam: {
...row,
serverName: 'pqs-common',
ids: [row.id],
runFlag: [],
comFlag: [],
manufacturer: dictData.getBasicData('Dev_Manufacturers'),
statisticalType: dictData.getBasicData('Statistical_Type', ['Report_Type'])[0]
},
...row,
serverName: 'pqs-common',
ids: [row.id],
runFlag: [],
comFlag: [],
manufacturer: dictData.getBasicData('Dev_Manufacturers'),
statisticalType: dictData.getBasicData('Statistical_Type', ['Report_Type'])[0]
}).then((res: any) => {
tableData.value = res.data
})
loadingTab.value = false
}
const analysis = (e: any) => {
let time = rowList.value.searchBeginTime.slice(0, 4) + `-01-01`

58
src/views/pqs/qualityInspeection/panorama/components/details/transientDetails.vue Normal file
View File

@@ -0,0 +1,58 @@
<!-- 暂态 -->
<template>
<el-dialog draggable :title="title" v-model="dialogVisible" width="800px">
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="360px" :data="tableData">
<vxe-column title="序号" width="70" type="seq"></vxe-column>
<vxe-column field="lineName" title="监测点名称" />
<vxe-column field="subName" title="变电站名称"></vxe-column>
<vxe-column field="devName" title="终端名称"></vxe-column>
<vxe-column sortable field="count" :title="types + '次数'"></vxe-column>
</vxe-table>
</el-dialog>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import MyEChart from '@/components/echarts/MyEchart.vue'
import { useDictData } from '@/stores/dictData'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import { getEventDetailByList } from '@/api/device-boot/panorama'
const dictData = useDictData()
const dialogVisible: any = ref(false)
const list = dictData.getBasicData('Event_Statis')
const tableData: any = ref([])
const title = ref('详情')
const types = ref('')
// Event_Statis
const open = async (row: any, name: string, type: string) => {
types.value = type
title.value = name + type + '详情'
tableData.value = row
dialogVisible.value = true
}
// 查看详情
defineExpose({ open })
</script>
<style lang="scss" scoped>
.statistics-main {
// height: 300px;
display: grid;
width: 100%;
grid-template-columns: 1fr 1fr;
.statistics-box {
// height: 300px;
// display: flex;
display: grid;
grid-template-columns: 2fr 1fr;
}
}
:deep(.el-dialog__body) {
max-height: none !important;
}
.text-style {
cursor: pointer;
text-decoration: underline;
}
</style>

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

@@ -3,8 +3,8 @@
<DatePicker ref="datePickerRef" style="display: none" theCurrentTime />
<el-page-header :icon="ArrowLeft" @back="emit('back')">
<template #content>
<span style="font-size: 16px">{{ dropList.lineName }}详情　</span>
<span style="font-weight: 500">最新数据时间：</span>
<span style="">{{ dropList.gdName }}_{{ dropList.bdName }}_{{ dropList.lineName }}</span>
<span style="font-weight: 500" class="ml20">最新数据时间：</span>
<span style="color: var(--color-primary-default)">{{ dropList.updateTime }}</span>
<span style="font-weight: 500" class="ml20">统计日期：</span>
<span style="color: var(--color-primary-default)">
@@ -14,21 +14,27 @@
</el-page-header>
<el-row :gutter="20" class="mt10" :style="`height:${rowHeight}`">
<el-col :span="8">
<h3 class="mb10 iconBox">
<h3 class="mb10 iconBox text-style" @click="clickLinName">
<span></span>
台账信息
</h3>
<el-descriptions title="" border :column="2">
<el-descriptions-item label="监测点名称" width="140px">
<el-descriptions title="" label-width="100px" border :column="2" size="small">
<el-descriptions-item label="变电站名称">
{{ dropList.bdName }}
</el-descriptions-item>
<el-descriptions-item label="监测点名称">
{{ dropList.lineName }}
</el-descriptions-item>
<el-descriptions-item label="监测对象名称">
{{ dropList.objName }}
</el-descriptions-item>
<el-descriptions-item label="所属厂家">{{ dropList.manufacturer }}</el-descriptions-item>
<el-descriptions-item label="电压等级">{{ dropList.scale }}</el-descriptions-item>
<el-descriptions-item label="投运日期">{{ dropList.loginTime }}</el-descriptions-item>
<el-descriptions-item label="PT">{{ dropList.pt }}</el-descriptions-item>
<el-descriptions-item label="CT">{{ dropList.ct }}</el-descriptions-item>
<!-- <el-descriptions-item label="PT">{{ dropList.pt }}</el-descriptions-item>
<el-descriptions-item label="CT">{{ dropList.ct }}</el-descriptions-item> -->
<el-descriptions-item label="干扰源类型">{{ dropList.loadType }}</el-descriptions-item>
<el-descriptions-item label="通讯状态" width="140px">
<el-descriptions-item label="通讯状态">
<el-tag size="small" :type="dropList.comFlag == '正常' ? 'success' : 'danger'" effect="dark">
{{ dropList.comFlag }}
</el-tag>
@@ -36,9 +42,12 @@
</el-descriptions>
</el-col>
<el-col :span="8">
<h3 class="mb10 iconBox">
<h3
class="mb10 iconBox text-style"
@click="TargetData.info == 1 ? clickAlarm(5) : TargetData.info == 2 ? Integrity() : ''"
>
<span></span>
告警明细 (天)
告警天数
</h3>
<el-descriptions title="" border :column="2" size="small">
<el-descriptions-item width="140px" label="告警原因">
@@ -78,6 +87,42 @@
</el-descriptions-item>
</el-descriptions>
</el-col>
<el-col :span="8">
<h3 class="mb10 iconBox text-style" @click="clickAlarm(8)" >
<span></span>
告警明细
</h3>
<!-- <vxe-table
height="200px"
:data="evaluationData"
size="mini"
border
align="center"
showOverflow
:columnConfig="{ resizable: true }"
>
<vxe-column field="targetName" title="供电公司"></vxe-column>
<vxe-column field="avg" title="幅值"></vxe-column>
<vxe-column field="xz" title="最大限值"></vxe-column>
</vxe-table> -->
<el-table :data="evaluationData" size="small" border>
<el-table-column prop="targetName" align="center" label="指标名称" />
<el-table-column prop="avg" align="center" label="最大幅值">
<template #default="{ row }">
{{ row.avg == 3.14159 ? '/' : Math.floor(row.avg * 100) / 100 }}
</template>
</el-table-column>
<el-table-column prop="xz" align="center" label="限值">
<template #default="{ row }">
{{ row.xz == 3.14159 ? '/' : row.xz }}
</template>
</el-table-column>
</el-table>
</el-col>
</el-row>
<el-row :gutter="20" class="mt10" :style="`height:${rowHeight}`">
<el-col :span="8">
<h3 class="mb10 iconBox">
<span></span>
@@ -92,75 +137,16 @@
/>
</div>
</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">
<span>{{ dropList.lineName }}</span>
</el-col>
<el-col :span="12" style="display: flex">
<div>
综合评估得分:
<span
class="conclusion"
:class="
dropList.assessData == '特质'
? 'background1'
: dropList.assessData == '较差'
? 'background2'
: dropList.assessData == '极差'
? 'background3'
: ''
"
>
{{ dropList.assessData }}
</span>
</div>
</el-col>
</el-row>
<el-row style="width: 96%" v-for="(item, i) in evaluationData" class="row pb4 pt3">
<el-col :span="14" style="display: flex; align-items: center">
<img :src="url[i]" />
<span style="line-height: 20px">{{ item.targetName }}</span>
</el-col>
<el-col :span="10" style="display: flex; align-items: center">
<div style="width: 100%">
评估得分：
<span
class="conclusion"
:class="
item.avg == '特质'
? 'background1'
: item.avg == '较差'
? 'background2'
: item.avg == '极差'
? 'background3'
: ''
"
>
{{ item.avg }}
</span>
</div>
</el-col>
</el-row>
</div>
</el-col>
<el-col :span="8">
<h3 class="mb10 iconBox">
<h3 class="mb10 iconBox text-style" @click="clickAlarm(2)">
<span></span>
稳态指标合格率
</h3>
<div :style="`height: calc(${rowHeight} - 31px)`" ref="chartRef"></div>
<div :style="`height: calc(${rowHeight} - 31px); `" ref="chartRef"></div>
</el-col>
<el-col :span="8">
<h3 class="mb10 iconBox">
<h3 class="mb10 iconBox text-style" @click="clickTransient()">
<span></span>
暂态事件统计
</h3>
@@ -199,10 +185,12 @@ import {
lineQualifiedDetail,
getLineAssess,
getEventDetailByLineId,
getGridDiagramTargetData
getGridDiagramTargetData,
limitTableDetail
} from '@/api/device-boot/panorama'
import { formatter } from 'element-plus'
const emit = defineEmits(['back'])
const dropList: any = ref({})
const TargetData: any = ref({})
@@ -388,37 +376,41 @@ const open = async (id: string) => {
})
// 监测点总体评价结论
getLineAssess({
limitTableDetail({
lineId: id,
startTime: datePickerRef.value.timeValue[0],
endTime: datePickerRef.value.timeValue[1]
monitorIds: [id],
searchBeginTime: datePickerRef.value.timeValue[0],
searchEndTime: datePickerRef.value.timeValue[1],
searchState: 0,
lineRunFlag: 0,
}).then((res: any) => {
dropList.value.assessData = res.data.assessLevel
// dropList.value.assessData = res.data.assessLevel
evaluationData.value = [
{
targetName: '频率偏差(Hz)',
avg: res.data.freqAssessLevel,
sd: res.data.freqQualifyData
targetName: '频率偏差',
avg: res.data.freqData,
xz: res.data.freqLimit
},
{
targetName: '电压偏差(%)',
avg: res.data.vdevAssessLevel,
sd: res.data.vdevQualifyData
targetName: '电压偏差',
avg: res.data.vdevData,
xz: res.data.vdevLimit
},
{
targetName: '电压总谐波畸变率(%)',
avg: res.data.harmAssessLevel,
sd: res.data.harmQualifyData
targetName: '电压总谐波畸变率',
avg: res.data.udevData,
xz: res.data.uaberranceLimit
},
{
targetName: '三相电压不平衡度(%)',
avg: res.data.unbalanceAssessLevel,
sd: res.data.unbalanceQualifyData
targetName: '三相电压不平衡度',
avg: res.data.unbalanceData,
xz: res.data.unbalanceLimit
},
{
targetName: '闪变',
avg: res.data.flickerAssessLevel,
sd: res.data.flickerQualifyData
avg: res.data.flickerData,
xz: res.data.flickerLimit
}
]
})
@@ -687,15 +679,58 @@ const echart = (row: any) => {
// 跳转
const Integrity = () => {
router.push({
name: 'harmonic-boot/harmonic/getIntegrityData'
})
}
const OnlineRate = () => {
router.push({
name: 'harmonic-boot/area/OnlineRate'
name: 'harmonic-boot/harmonic/getIntegrityData',
query: {
type: '1',
name: dropList.value.lineName,
t: Date.now()
}
})
}
const OnlineRate = () => {
router.push({
name: 'harmonic-boot/area/OnlineRate',
query: {
type: '1',
name: dropList.value.devName,
t: Date.now()
}
})
}
// 跳转在线监测点
const clickAlarm = (value: any) => {
router.push({
name: 'harmonic-boot/monitor/online',
query: {
type: value,
id: lineId.value,
t: Date.now()
}
})
}
// 跳转暂态列表
const clickTransient = () => {
router.push({
name: 'Descentsystem/transientList',
query: {
type: '1',
name: dropList.value.lineName,
t: Date.now()
}
})
}
// 跳转台账信息
const clickLinName = () => {
router.push({
name: 'Supervision/Terminaldetection',
query: {
type: '5',
name: dropList.value.lineName,
t: Date.now()
}
})
}
onMounted(() => {
// open('4c87b7dff2281254fc55c25a4da31506')
})
@@ -735,7 +770,7 @@ defineExpose({ open })
.iconBox {
display: flex;
align-items: center;
span {
display: inline-block;
width: 3px;
@@ -767,4 +802,11 @@ defineExpose({ open })
background-color: #a52a2a;
color: #fff;
}
:deep(.el-table--small .el-table__cell) {
padding: 2px 0 !important;
}
.text-style {
cursor: pointer;
text-decoration: underline;
}
</style>

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

@@ -19,6 +19,12 @@
</template>
</el-input>
</div>
<div>
<!-- <el-button @click="showPsrmap" class="psrmapBut">电网图层</el-button> -->
<el-checkbox-group v-model="group" @change="showPsrmap" size="small" class="psrmapBut">
<el-checkbox-button value="1" label="电网图层"></el-checkbox-button>
</el-checkbox-group>
</div>
<!-- 搜索内容展示 -->
<div class="query-box-wrap collapse" v-show="showWrap">
<div v-if="QueryList.length == 0" class="collapse_none">查询无结果</div>
@@ -50,6 +56,8 @@
展开搜索结果
</div>
</div>
<!-- 点击弹框 -->
<propInfo ref="propInfoRef" @flyTo="flyTo"/>
</template>
<script setup lang="ts">
@@ -63,7 +71,8 @@ import { getGridDiagramAreaData } from '@/api/device-boot/panorama'
import { Search } from '@element-plus/icons-vue'
import '@/assets/panorama/narimap.css'
import '@/assets/panorama/nrgisCommon.css'
const emit = defineEmits(['changeValue', 'drop', 'show'])
import propInfo from '@/views/pqs/qualityInspeection/panorama/components/details/propInfo.vue'
const emit = defineEmits(['changeValue', 'drop', 'show', 'setLine'])
const prop = defineProps({
lineInfo: {
type: Boolean
@@ -77,6 +86,7 @@ const datePickerRef = ref()
const form: any = ref({})
const colorKey = ref('')
const PopKey = ref(2)
const propInfoRef = ref()
const assessList: any = ref([])
const linList: any = ref([])
const QueryList: any = ref([])
@@ -144,7 +154,7 @@ narimap.Require(
// ['PSRMap', 'Components.Query', 'Marker'],
() => {
if (narimap.Config.examples.notlogin) {
initMap(narimap.Config.styles.sjRaster)
initMap(narimap.Config.styles.sjDark)
} else {
//电网GIS地图服务登录
narimap.SGAuth.login()
@@ -156,7 +166,7 @@ narimap.Require(
}
//默认打开电网GIS影像图
initMap(narimap.Config.styles.sjRaster)
initMap(narimap.Config.styles.sjDark)
})
.catch((err: any) => {
console.log('错误', err)
@@ -278,7 +288,6 @@ const addSource = async () => {
// }
// }
// ]
console.log('🚀 ~ sourceList:', sourceList.value)
if (map.value.getSource('themeData')) {
map.value.getSource('themeData').setData({
@@ -353,30 +362,52 @@ const addSource = async () => {
*/
'heatmap-opacity': 1
},
maxzoom: 12
maxzoom: 12,
layout: {
visibility: 'none'
}
})
}
}
const changeHeat = e => {
map.value.setLayoutProperty('earthquakes-paint', 'visibility', e ? 'visible' : 'none')
}
const psrmap = ref(null)
// 添加变电站线路
const addLine = () => {
//添加电网图层
let psrmap = new narimap.PSRMap(map.value, {
psrmap.value = new narimap.PSRMap(map.value, {
orgId: orgId.value == '1100F3DE20806FADE050007F01006CBE' ? '' : orgId.value
// disableFilterByUserAuth:new narimap.Config.examples.disableFilterByUserAuth
})
psrmap.addPSR()
psrmap.value.addPSR()
initDeviceCard()
setTimeout(() => {
psrmap.filterByDomain(1)
// psrmap.filterByDomain(1)
}, 0)
psrmap.value.on('load', () => {
// 显示电网图层
// psrmap.value.hide()
})
//添加电网要素点击事件
psrmap.on('click', (features: any) => {
psrmap.value.on('click', (features: any) => {
console.log(features)
showCollapse.value = false
if (inputQuery.value.length == 0) showWrap.value = false
})
}
const group = ref(['1'])
const showPsrmap = e => {
if (e.length > 0) {
psrmap.value.show()
} else {
psrmap.value.hide()
}
}
const propInfoShow=ref(false)
// 添加变电站弹框
const initDeviceCard = () => {
deviceCard.value && deviceCard.value.close()
@@ -401,10 +432,13 @@ const initDeviceCard = () => {
deviceCard.value.on('click', (res: any) => {
if (res.button.id == 'nariPopupViewDetail') {
emit('show', true)
propInfoShow.value=propInfoRef.value.show
propInfoRef.value.show=false
}
setTimeout(() => {
document.querySelectorAll('.nari-tabs__close')[0].onclick = function (v: any) {
emit('show', false)
propInfoRef.value.show=propInfoShow.value
}
}, 10)
})
@@ -726,6 +760,7 @@ const addLayer = () => {
const PollutionList = dictData.getBasicData('Pollution_Calc').filter(item => item.name == '谐波电压')
//添加多个监测点
const lineData = ref([])
const addMarkers = async (row?: any, key?: any, num?: any) => {
if (map.value == null) return
let params = {
@@ -740,7 +775,7 @@ const addMarkers = async (row?: any, key?: any, num?: any) => {
statisticalType: {},
...row
}
lineData.value = []
let { data } = await getAreaLineInfo(params)
let r = 0.0035
@@ -756,6 +791,7 @@ const addMarkers = async (row?: any, key?: any, num?: any) => {
}
item.children.forEach((val: any, i: number) => {
lineData.value.push(val)
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 =
@@ -796,18 +832,6 @@ const addMarkers = async (row?: any, key?: any, num?: any) => {
break
}
}
let num = 20
if (val.vharmonicValue > 10000) {
num = 100
} else if (val.vharmonicValue > 1000) {
num = 80
} else if (val.vharmonicValue > 100) {
num = 60
} else if (val.vharmonicValue > 0) {
num = 40
} else {
num = 20
}
sourceList.value.push({
type: 'Feature',
@@ -817,12 +841,16 @@ const addMarkers = async (row?: any, key?: any, num?: any) => {
},
properties: {
value: val.vharmonicValue || 0
// value: num //10 //val.vharmonicValue || 0
// value: 0
}
})
})
})
console.log('🚀 ~ addMarkers ~ num:', key)
if (key != undefined) {
propInfoRef.value.open(lineData.value)
// emit('setLine', lineData.value)
}
if (flag.value) {
linList.value = [...tempFeatureZ, ...tempFeatureT]
@@ -1150,7 +1178,7 @@ const createMapSelectorComponent = () => {
)
}
defineExpose({ locatePositions, addMarkers, grids, DeviceQ, radiusPop, flyTo })
defineExpose({ locatePositions, addMarkers, grids, DeviceQ, radiusPop, flyTo, changeHeat })
const height = mainHeight(20)
</script>

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

@@ -61,10 +61,10 @@
</div>
</div>
</div>
<!-- 监测点指标统计 -->
<!-- 资产性质 -->
<div :style="`height:calc(${boxHeight.height} + 50px)`">
<div class="title">
<span>监测点指标统计</span>
<span>资产性质</span>
</div>
<div style="display: flex" class="mt2">
<img src="@/assets/img/FGX.png" />
@@ -97,33 +97,48 @@
<div>
数据完整性:
<span style="color: #2b7fd3; cursor: text">{{ val.integrityRate }}%</span>
<span style="color: #2b7fd3; cursor: text">{{ val.integrityRate || 0 }}%</span>
</div>
<div>
在线率:
<span style="color: #2b7fd3; cursor: text">{{ val.integrityRate }}%</span>
<span style="color: #2dcd28; cursor: text">{{ val.onLineRate || 0 }}%</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 监测点指标统计 -->
<!-- 资产性质 -->
<div :style="`height:calc(${boxHeight.height} - 55px)`">
<div class="title">
<span>监测运行统计</span>
<div class="titleNum">
( 合格:
<span class="mr10" style="color: #2dcd28" @click="LookMap(linList[0].lineListOne, [], 0)">
{{ linList[0].lineNumOne || 0 }}
</span>
告警:
<span style="color: #a52a2a" @click="LookMap(linList[0].lineListOne, [], 0)">
{{ linList[0].lineNumTwo || 0 }}
</span>
)
</div>
</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>
<div class="card-Box" v-for="item in linList.slice(1)">
<!-- <div>
<span class="line"></span>
<span class="vol">{{ item.title[0] }}</span>
</div>
<div class="num">
</div> -->
<div class="num num2">
<div style="text-align: left">
<span class="line"></span>
<i class="vol">{{ item.title[0] }}</i>
</div>
<div>
{{ item.title[1] }}:
<span style="color: #2dcd28" @click="LookMap(item.lineListOne, [], 0)">
@@ -148,12 +163,12 @@
@click="show = !show"
src="@/assets/img/QH.png"
/>
<div class="legeng">
<!-- <div class="legeng">
<div v-for="item in legengList">
<span :style="`background-color: ${item.color};`"></span>
<span>{{ item.title }}</span>
</div>
</div>
</div> -->
<!-- 变电站详情 -->
<stand ref="standRef" />
@@ -305,9 +320,10 @@ const countList: any = ref([
title: '电网侧监测点',
num: 0,
onLineNum: 0,
integrityRate: 0
integrityRate: 0,
onLineRate: 0
},
{ title: '非电网侧监测点', num: 0, onLineNum: 0, integrityRate: 0 }
{ title: '非电网侧监测点', num: 0, onLineNum: 0, integrityRate: 0, onLineRate: 0 }
]
}
// {
@@ -409,7 +425,7 @@ const info = async (row: any) => {
numOneList: []
})
})
// 监测点指标统计
// 资产性质
getGridDiagramStatistics(form).then(res => {
countList.value[0].children[0] = { title: '电网侧监测点', ...res.data.data[0] }
countList.value[0].children[1] = { title: '非电网侧监测点', ...res.data.data[1] }
@@ -549,13 +565,13 @@ defineExpose({ info, show })
// grid-template-rows: 1fr 1fr;
display: flex;
flex-direction: column;
justify-content: space-evenly;
justify-content: space-around;
// align-items: center;
margin: 0 5px 5px;
padding: 10px;
background-color: #edededc0;
border-radius: 10px;
min-height: 60px;
min-height: 40px;
// max-height: 120px;
.line {
@@ -581,10 +597,11 @@ defineExpose({ info, show })
font-weight: 550;
}
}
.num1 {
grid-template-columns: 1fr 1fr; /* 核心：改为2列，均分宽度 */
grid-template-rows: auto auto;
gap: 8px; /* 可选：子元素间距，提升美观度 */
gap: 15px; /* 可选：子元素间距，提升美观度 */
div {
display: flex;
padding-left: 20px;
@@ -594,12 +611,16 @@ defineExpose({ info, show })
}
}
}
.num2 {
display: grid;
grid-template-columns: 1fr 1fr 1fr !important;
}
}
.BoxA {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
// grid-template-rows: 80px;
.num {
@@ -655,7 +676,7 @@ defineExpose({ info, show })
position: absolute;
padding: 5px;
bottom: 0;
right: -75px;
right: -78px;
width: 70px;
font-size: 12px;
height: 120px;
@@ -679,4 +700,13 @@ defineExpose({ info, show })
}
}
}
.titleNum {
font-size: 13px;
font-weight: normal;
margin-left: 5px;
span {
font-weight: 600;
cursor: pointer;
}
}
</style>

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

@@ -5,7 +5,7 @@
<div style="height: 110px">
<div class="title">
<span>
稳态综合评估
区域污染水平评估
<el-popover placement="right" :width="190" trigger="hover">
<template #reference>
<WarningFilled class="WarningFilled" />
@@ -22,6 +22,15 @@
<span style="color: #a52a2a">重度污染：(10000</span>
</div>
</el-popover>
<el-switch
v-model="heat"
class="ml5"
@change="changeHeat"
size="small"
inline-prompt
active-text="热力图"
inactive-text="热力图"
/>
</span>
<span class="info" @click="open(0)">
详情
@@ -256,6 +265,7 @@ import {
getEventLevelEvaluation,
getSupervisionData
} from '@/api/device-boot/panorama'
const emit = defineEmits(['changeHeat'])
const dictData = useDictData()
const show = ref(false)
const height = mainHeight(30)
@@ -309,6 +319,7 @@ const options = ref([
value: '9'
}
])
const heat = ref(false)
const technology: any = ref({})
const harmonicType = ref('6')
const transientNum = ref([0, 0])
@@ -366,7 +377,7 @@ const PollutionList = dictData.getBasicData('Pollution_Calc').filter(item => ite
const value = ref(options1[0].id)
const open = (e: number) => {
if (e == 0) {
evaluateRef.value.open(formRow.value,assessList.value)
evaluateRef.value.open(formRow.value, assessList.value)
} else if (e == 1) {
steadyStateRef.value.open(formRow.value)
} else if (e == 2) {
@@ -375,7 +386,10 @@ const open = (e: number) => {
techniqueRef.value.open(formRow.value)
}
}
const setColor = val => {
const changeHeat = (e:any) => {
emit('changeHeat', e)
}
const setColor = (val:any) => {
return val == 3.14159
? ''
: val > 10000
@@ -390,7 +404,7 @@ const setColor = val => {
? '#00B07D'
: ''
}
const setVal = val => {
const setVal = (val:any) => {
return val == 3.14159
? '/'
: val > 10000

17
src/views/pqs/qualityInspeection/panorama/components/style/map.scss
View File

@@ -7,7 +7,12 @@
.Icon {
width: 30px;
height: 30px;
background-image: url('@/assets/icons/网公司.svg');
background-color: var(--el-color-primary);
border-radius: 5px;
background-image: url('@/assets/img/inlogo.png');
background-size: 25px;
background-repeat: no-repeat;
background-position: center;
}
.el-input__icon {
font-size: 20px;
@@ -200,3 +205,13 @@
width: 450px;
z-index: 0;
}
.psrmapBut{
position: absolute;
bottom: 103px;
right: 60px;
// z-index: 0.1;
}
#nrDeviceCard{
z-index: 1;
}