联调电网一张图
This commit is contained in:
@@ -14,6 +14,11 @@
|
|||||||
<link rel="stylesheet" href="/static/luckysheet/iconfont.css" />
|
<link rel="stylesheet" href="/static/luckysheet/iconfont.css" />
|
||||||
<script src="/static/luckysheet/plugin.js"></script>
|
<script src="/static/luckysheet/plugin.js"></script>
|
||||||
<script src="/static/luckysheet/luckysheet.umd.js"></script>
|
<script src="/static/luckysheet/luckysheet.umd.js"></script>
|
||||||
|
|
||||||
|
<!-- 冀北地图 -->
|
||||||
|
<!--引入样式文件-->
|
||||||
|
<!-- <link rel="stylesheet" href="http://24.43.102.201:30080/powermap.min.css"/> -->
|
||||||
|
<!-- <script src="http://24.43.102.201:30080/powermap.min.js"></script> -->
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
<script type="module" src="/src/main.ts"></script>
|
<script type="module" src="/src/main.ts"></script>
|
||||||
|
|||||||
7
public/static/panorama/map.css
Normal file
7
public/static/panorama/map.css
Normal file
File diff suppressed because one or more lines are too long
84
public/static/panorama/map.js
Normal file
84
public/static/panorama/map.js
Normal file
File diff suppressed because one or more lines are too long
51
src/api/device-boot/panorama.ts
Normal file
51
src/api/device-boot/panorama.ts
Normal file
@@ -0,0 +1,51 @@
|
|||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
// 区域变电站下告警监测点数量
|
||||||
|
export function getSubLineGiveAnAlarm(data: any) {
|
||||||
|
return request({ url: '/harmonic-boot/gridDiagram/getSubLineGiveAnAlarm', method: 'post', data })
|
||||||
|
}
|
||||||
|
// 变电站详细列表
|
||||||
|
export function getPollutionAlarmPageData(data: any) {
|
||||||
|
return request({ url: '/harmonic-boot/gridDiagram/getPollutionAlarmPageData', method: 'post', data })
|
||||||
|
}
|
||||||
|
// 变电站污染告警占比
|
||||||
|
export function getPollutionAlarmData(data: any) {
|
||||||
|
return request({ url: '/harmonic-boot/gridDiagram/getPollutionAlarmData', method: 'post', data })
|
||||||
|
}
|
||||||
|
// 变电站趋势分析
|
||||||
|
export function getGridDiagramSubTendency(data: any) {
|
||||||
|
return request({ url: '/device-boot/gridDiagram/getGridDiagramSubTendency', method: 'post', data })
|
||||||
|
}
|
||||||
|
// 监测点分布统计
|
||||||
|
export function getGridDiagramLineData(data: any) {
|
||||||
|
return request({ url: '/harmonic-boot/gridDiagram/getGridDiagramLineData', method: 'post', data })
|
||||||
|
}
|
||||||
|
// 终端统计(在运-在线)
|
||||||
|
export function getGridDiagramDev(data: any) {
|
||||||
|
return request({ url: '/device-boot/gridDiagram/getGridDiagramDev', method: 'post', data })
|
||||||
|
}
|
||||||
|
// 终端趋势分析
|
||||||
|
export function getGridDiagramDevTendency(data: any) {
|
||||||
|
return request({ url: '/device-boot/gridDiagram/getGridDiagramDevTendency', method: 'post', data })
|
||||||
|
}
|
||||||
|
// 终端分布统计
|
||||||
|
export function getGridDiagramDevData(data: any) {
|
||||||
|
return request({ url: '/device-boot/gridDiagram/getGridDiagramDevData', method: 'post', data })
|
||||||
|
}
|
||||||
|
// 终端台账信息
|
||||||
|
export function getRuntimeData(data: any) {
|
||||||
|
return request({ url: '/device-boot/runManage/getRuntimeData', method: 'post', data })
|
||||||
|
}
|
||||||
|
// 监测点趋势分析
|
||||||
|
export function getGridDiagramLineTendency(data: any) {
|
||||||
|
return request({ url: '/device-boot/gridDiagram/getGridDiagramLineTendency', method: 'post', data })
|
||||||
|
}
|
||||||
|
|
||||||
|
// 监测点统计(总数-在线)
|
||||||
|
export function getGridDiagramMonitor(data: any) {
|
||||||
|
return request({ url: '/device-boot/gridDiagram/getGridDiagramMonitor', method: 'post', data })
|
||||||
|
}
|
||||||
|
// 监测点列表
|
||||||
|
export function getHalfReport(data: any) {
|
||||||
|
return request({ url: '/device-boot/line/getHalfReport', method: 'post', data })
|
||||||
|
}
|
||||||
BIN
src/assets/img/110kv.png
Normal file
BIN
src/assets/img/110kv.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
src/assets/img/220kv.png
Normal file
BIN
src/assets/img/220kv.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
src/assets/img/35kv.png
Normal file
BIN
src/assets/img/35kv.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
src/assets/img/500kv.png
Normal file
BIN
src/assets/img/500kv.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 833 B |
BIN
src/assets/img/BDZ.png
Normal file
BIN
src/assets/img/BDZ.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 951 B |
BIN
src/assets/img/GJDW.png
Normal file
BIN
src/assets/img/GJDW.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
src/assets/img/JCD.png
Normal file
BIN
src/assets/img/JCD.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 609 B |
BIN
src/assets/img/QH.png
Normal file
BIN
src/assets/img/QH.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
src/assets/img/ZD.png
Normal file
BIN
src/assets/img/ZD.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 741 B |
7
src/assets/panorama/map.css
Normal file
7
src/assets/panorama/map.css
Normal file
File diff suppressed because one or more lines are too long
84
src/assets/panorama/map.js
Normal file
84
src/assets/panorama/map.js
Normal file
File diff suppressed because one or more lines are too long
@@ -589,7 +589,7 @@ const processSave = async () => {
|
|||||||
// return result.value || ' '
|
// return result.value || ' '
|
||||||
// }
|
// }
|
||||||
onBeforeMount(() => {
|
onBeforeMount(() => {
|
||||||
console.log(props, 'propspropspropsprops')
|
|
||||||
})
|
})
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
initBpmnModeler()
|
initBpmnModeler()
|
||||||
|
|||||||
@@ -9,7 +9,7 @@ defineOptions({
|
|||||||
name: 'Area'
|
name: 'Area'
|
||||||
})
|
})
|
||||||
import { useDictData } from '@/stores/dictData'
|
import { useDictData } from '@/stores/dictData'
|
||||||
|
const emit = defineEmits(['changeName'])
|
||||||
const cascaderProps = {
|
const cascaderProps = {
|
||||||
label: 'name',
|
label: 'name',
|
||||||
value: 'id',
|
value: 'id',
|
||||||
@@ -20,21 +20,18 @@ const cascader = ref()
|
|||||||
const dictData = useDictData()
|
const dictData = useDictData()
|
||||||
const options = dictData.state.area
|
const options = dictData.state.area
|
||||||
const areaName = ref(dictData.state.area[0].name)
|
const areaName = ref(dictData.state.area[0].name)
|
||||||
|
const jbName = ref(dictData.state.area[0].name)
|
||||||
const change = (e: any) => {
|
const change = (e: any) => {
|
||||||
if (cascader.value.getCheckedNodes()[0]?.pathLabels.length == 1) {
|
if (cascader.value.getCheckedNodes()[0]?.pathLabels.length == 1) {
|
||||||
areaName.value = cascader.value.getCheckedNodes()[0].pathLabels[0]
|
areaName.value = cascader.value.getCheckedNodes()[0].pathLabels[0]
|
||||||
} else if (cascader.value.getCheckedNodes()[0]?.pathLabels.length >= 2) {
|
} else if (cascader.value.getCheckedNodes()[0]?.pathLabels.length >= 2) {
|
||||||
areaName.value = cascader.value.getCheckedNodes()[0].pathLabels[1]
|
areaName.value = cascader.value.getCheckedNodes()[0].pathLabels[1]
|
||||||
}
|
}
|
||||||
|
emit('changeName', cascader.value.getCheckedNodes()[0].label)
|
||||||
|
}
|
||||||
|
const changeName = () => {
|
||||||
|
return jbName.value
|
||||||
}
|
}
|
||||||
// watch(
|
|
||||||
// () => $attrs,
|
|
||||||
// (newVal, oldVal) => {
|
|
||||||
// console.log(123)
|
|
||||||
|
|
||||||
// // GetEchar('中国')
|
|
||||||
// }
|
|
||||||
// )
|
|
||||||
|
|
||||||
defineExpose({ areaName, change })
|
defineExpose({ areaName, change })
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
|
<div>
|
||||||
<el-select v-model="interval" style="min-width: 90px; width: 90px; margin-right: 10px" @change="timeChange">
|
<el-select v-model="interval" style="min-width: 90px; width: 90px; margin-right: 10px" @change="timeChange">
|
||||||
<el-option v-for="item in timeOptions" :key="item.value" :label="item.label" :value="item.value" />
|
<el-option v-for="item in timeOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||||||
</el-select>
|
</el-select>
|
||||||
@@ -18,6 +19,7 @@
|
|||||||
<el-button :disabled="backDisabled" type="primary" :icon="DArrowLeft" @click="preClick"></el-button>
|
<el-button :disabled="backDisabled" type="primary" :icon="DArrowLeft" @click="preClick"></el-button>
|
||||||
<el-button type="primary" :icon="VideoPause" @click="nowTime">当前</el-button>
|
<el-button type="primary" :icon="VideoPause" @click="nowTime">当前</el-button>
|
||||||
<el-button :disabled="preDisabled" type="primary" :icon="DArrowRight" @click="next"></el-button>
|
<el-button :disabled="preDisabled" type="primary" :icon="DArrowRight" @click="next"></el-button>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
|||||||
@@ -211,6 +211,7 @@ const factor = [
|
|||||||
name: 0.95,
|
name: 0.95,
|
||||||
id: 0.95
|
id: 0.95
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
name: 0.96,
|
name: 0.96,
|
||||||
id: 0.96
|
id: 0.96
|
||||||
@@ -278,6 +279,7 @@ const getUser = () => {
|
|||||||
userData.value = res.data.records
|
userData.value = res.data.records
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// 添加用户
|
// 添加用户
|
||||||
const addUse = () => {
|
const addUse = () => {
|
||||||
tableData.value = []
|
tableData.value = []
|
||||||
|
|||||||
@@ -0,0 +1,81 @@
|
|||||||
|
<template>
|
||||||
|
<!-- 综合评估详情 -->
|
||||||
|
<el-dialog draggable title="综合评估详情" v-model="dialogVisible" width="1400px">
|
||||||
|
<div>
|
||||||
|
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="300px" :data="tableData">
|
||||||
|
<vxe-column field="devName" title="所属区域" />
|
||||||
|
<vxe-column field="devName" title="综合评估得分" />
|
||||||
|
<vxe-column field="devName" title="指标合格率" />
|
||||||
|
<vxe-colgroup title="各项指标得分">
|
||||||
|
<vxe-colgroup title="电压偏差">
|
||||||
|
<vxe-column field="devName" title="评估得分" />
|
||||||
|
<vxe-column field="devName" title="指标合格率" />
|
||||||
|
</vxe-colgroup>
|
||||||
|
<vxe-colgroup title="评率偏差">
|
||||||
|
<vxe-column field="devName" title="评估得分" />
|
||||||
|
<vxe-column field="devName" title="指标合格率" />
|
||||||
|
</vxe-colgroup>
|
||||||
|
<vxe-colgroup title="谐波含量">
|
||||||
|
<vxe-column field="devName" title="评估得分" />
|
||||||
|
<vxe-column field="devName" title="指标合格率" />
|
||||||
|
</vxe-colgroup>
|
||||||
|
<vxe-colgroup title="电压闪变">
|
||||||
|
<vxe-column field="devName" title="评估得分" />
|
||||||
|
<vxe-column field="devName" title="指标合格率" />
|
||||||
|
</vxe-colgroup>
|
||||||
|
<vxe-colgroup title="三相不平衡度">
|
||||||
|
<vxe-column field="devName" title="评估得分" />
|
||||||
|
<vxe-column field="devName" title="指标合格率" />
|
||||||
|
</vxe-colgroup>
|
||||||
|
</vxe-colgroup>
|
||||||
|
</vxe-table>
|
||||||
|
</div>
|
||||||
|
<div style="height: 300px; margin-top: 10px">
|
||||||
|
<MyEChart style="height: 300px" :options="picEChart" />
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import MyEChart from '@/components/echarts/MyEchart.vue'
|
||||||
|
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||||
|
|
||||||
|
const dialogVisible: any = ref(false)
|
||||||
|
|
||||||
|
const tableData: any = ref([
|
||||||
|
{
|
||||||
|
devName: 123
|
||||||
|
}
|
||||||
|
])
|
||||||
|
|
||||||
|
const picEChart = ref({
|
||||||
|
title: {
|
||||||
|
text: ''
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
name: '(区域)',
|
||||||
|
data: ['承德', '承德', '承德', '承德', '承德', '承德', '承德']
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
name: '',
|
||||||
|
min: 0,
|
||||||
|
max: 100
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '评估得分',
|
||||||
|
type: 'bar',
|
||||||
|
|
||||||
|
data: [12, 12, 12, 12, 12, 12, 12]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
const open = async (row: any) => {
|
||||||
|
dialogVisible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
defineExpose({ open })
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped></style>
|
||||||
@@ -0,0 +1,223 @@
|
|||||||
|
<template>
|
||||||
|
<!-- 监测点详情 -->
|
||||||
|
<el-dialog draggable title="监测点详情" v-model="dialogVisible" width="1400px" :before-close="handleClose">
|
||||||
|
<el-row style="height: 300px" :gutter="20">
|
||||||
|
<el-col :span="12">
|
||||||
|
<div class="title">
|
||||||
|
<span>趋势分析</span>
|
||||||
|
<el-select v-model="time" style="width: 80px; margin-right: 80px" @change="analysis">
|
||||||
|
<el-option label="年" value="1" />
|
||||||
|
<el-option label="月" value="3" />
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
|
<MyEChart style="height: 260px" :options="trendEChart" />
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<div class="title">
|
||||||
|
<span>分布统计</span>
|
||||||
|
<el-select v-model="time" style="width: 120px; margin-right: 80px" @change="statiStics">
|
||||||
|
<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
|
<div class="pie">
|
||||||
|
<MyEChart style="height: 260px" :options="picEChart" />
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<div>
|
||||||
|
<div class="title">
|
||||||
|
<span>监测点详细列表</span>
|
||||||
|
</div>
|
||||||
|
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="300px" :data="tableData">
|
||||||
|
<vxe-column field="lineName" title="监测点名称" />
|
||||||
|
<vxe-column field="areaName" title="所属区域" />
|
||||||
|
<vxe-column field="subName" title="所属变电站" />
|
||||||
|
<vxe-column field="voltageScale" title="电压等级" :formatter="formatter" />
|
||||||
|
<vxe-column field="loadType" title="负荷类型" :formatter="formatter" />
|
||||||
|
<vxe-column field="comFlag" title="通讯状态">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-tag type="success" v-if="scope.row.comFlag == 1">正常</el-tag>
|
||||||
|
<el-tag type="danger" v-else>中断</el-tag>
|
||||||
|
</template>
|
||||||
|
</vxe-column>
|
||||||
|
<vxe-column field="onlineRate" title="在线率(%)" />
|
||||||
|
<vxe-column field="integrityData" title="数据完整性(%)" />
|
||||||
|
</vxe-table>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import MyEChart from '@/components/echarts/MyEchart.vue'
|
||||||
|
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||||
|
import { useDictData } from '@/stores/dictData'
|
||||||
|
import { getGridDiagramLineTendency, getGridDiagramLineData, getHalfReport } from '@/api/device-boot/panorama'
|
||||||
|
const dictData = useDictData()
|
||||||
|
const dialogVisible: any = ref(false)
|
||||||
|
const time = ref('1')
|
||||||
|
const Voltage = dictData.getBasicData('Dev_Voltage_Stand')
|
||||||
|
const tableData: any = ref([])
|
||||||
|
const options = dictData.getBasicData('Statistical_Type', ['Report_Type'])
|
||||||
|
const loadTypeArr = dictData.getBasicData('Interference_Source')
|
||||||
|
|
||||||
|
const rowList: any = ref({})
|
||||||
|
const trendEChart: any = ref()
|
||||||
|
|
||||||
|
const picEChart = ref()
|
||||||
|
const open = async (row: any) => {
|
||||||
|
rowList.value = {
|
||||||
|
deviceInfoParam: {
|
||||||
|
...row
|
||||||
|
},
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 1000,
|
||||||
|
...row
|
||||||
|
}
|
||||||
|
analysis(1)
|
||||||
|
// 统计
|
||||||
|
statiStics()
|
||||||
|
// 监测点列表
|
||||||
|
getHalfReport(rowList.value).then((res: any) => {
|
||||||
|
tableData.value = res.data.records
|
||||||
|
})
|
||||||
|
|
||||||
|
dialogVisible.value = true
|
||||||
|
}
|
||||||
|
// 分析
|
||||||
|
const analysis = (e: any) => {
|
||||||
|
let time = rowList.value.searchBeginTime.slice(0, 4) + `-01-01`
|
||||||
|
// 分析
|
||||||
|
getGridDiagramLineTendency({ ...rowList.value, searchBeginTime: time, type: e }).then(res => {
|
||||||
|
let name = []
|
||||||
|
let data = []
|
||||||
|
for (let k in res.data) {
|
||||||
|
name.push(k)
|
||||||
|
data.push(res.data[k])
|
||||||
|
}
|
||||||
|
|
||||||
|
trendEChart.value = {
|
||||||
|
title: {
|
||||||
|
text: '监测点数量'
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
name: '时间',
|
||||||
|
data: name
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
name: '个'
|
||||||
|
},
|
||||||
|
|
||||||
|
options: {
|
||||||
|
dataZoom: null,
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '接入',
|
||||||
|
type: 'line',
|
||||||
|
data: data,
|
||||||
|
smooth: true,
|
||||||
|
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'top',
|
||||||
|
fontSize: 12
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 统计
|
||||||
|
const statiStics = () => {
|
||||||
|
getGridDiagramLineData(rowList.value).then(res => {
|
||||||
|
picEChart.value = {
|
||||||
|
title: {
|
||||||
|
text: ''
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
name: '(区域)',
|
||||||
|
data: res.data.map((item: any) => item.orgName)
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
name: '',
|
||||||
|
min: 0,
|
||||||
|
max: 100
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '数据完整性',
|
||||||
|
type: 'bar',
|
||||||
|
|
||||||
|
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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const formatter = (row: any) => {
|
||||||
|
if (row.column.field == 'loadType') {
|
||||||
|
return loadTypeArr.filter((item: any) => item.id == row.cellValue)[0]?.name
|
||||||
|
} else if (row.column.field == 'voltageScale') {
|
||||||
|
return Voltage.filter((item: any) => item.id == row.cellValue)[0]?.name
|
||||||
|
} else {
|
||||||
|
return row.cellValue
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const handleClose = () => {
|
||||||
|
tableData.value = []
|
||||||
|
dialogVisible.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
defineExpose({ open })
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
:deep(.el-select) {
|
||||||
|
min-width: 80px;
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin: 10px;
|
||||||
|
span {
|
||||||
|
font-weight: 550;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.pie {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
:deep(.el-table thead) {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,303 @@
|
|||||||
|
<template>
|
||||||
|
<!-- 变电站 -->
|
||||||
|
<el-dialog draggable title="变电站详情" v-model="dialogVisible" width="1400px" :before-close="handleClose">
|
||||||
|
<el-row style="height: 300px" :gutter="20">
|
||||||
|
<el-col :span="12">
|
||||||
|
<div class="title">
|
||||||
|
<span>趋势分析</span>
|
||||||
|
<el-select v-model="time" style="width: 80px; margin-right: 80px" @change="analysis">
|
||||||
|
<el-option label="年" value="1" />
|
||||||
|
<el-option label="月" value="3" />
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
|
<MyEChart style="height: 260px" :options="trendEChart" />
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<div class="title">
|
||||||
|
<span>污染告警</span>
|
||||||
|
</div>
|
||||||
|
<div class="pie">
|
||||||
|
<MyEChart v-for="item in picEChart" class="MyEChart" :options="item" />
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<div>
|
||||||
|
<div class="title">
|
||||||
|
<span>变电站详细列表</span>
|
||||||
|
</div>
|
||||||
|
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="300px" :data="tableData">
|
||||||
|
<vxe-column field="name" title="电站名称" />
|
||||||
|
<vxe-column field="powerCompany" title="所属区域" />
|
||||||
|
<vxe-column field="voltageLevel" title="电压等级" :formatter="formatter" />
|
||||||
|
<vxe-column field="data" title="谐波电压" :formatter="formatter" />
|
||||||
|
<vxe-column field="dataV" title="谐波电流" :formatter="formatter" />
|
||||||
|
</vxe-table>
|
||||||
|
</div>
|
||||||
|
</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 { getPollutionAlarmPageData, getPollutionAlarmData, getGridDiagramSubTendency } from '@/api/device-boot/panorama'
|
||||||
|
const dictData = useDictData()
|
||||||
|
const dialogVisible: any = ref(false)
|
||||||
|
const time = ref('1')
|
||||||
|
const Voltage = dictData.getBasicData('Dev_Voltage_Stand')
|
||||||
|
const rowList: any = ref({})
|
||||||
|
const trendEChart: any = ref({})
|
||||||
|
const tableData: any = ref([])
|
||||||
|
|
||||||
|
const picEChart: any = ref([{}, {}, {}, {}, {}])
|
||||||
|
|
||||||
|
const open = async (row: any) => {
|
||||||
|
rowList.value = {
|
||||||
|
deviceInfoParam: {
|
||||||
|
...row
|
||||||
|
},
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 1000,
|
||||||
|
...row
|
||||||
|
}
|
||||||
|
analysis(1)
|
||||||
|
// 污染
|
||||||
|
getPollutionAlarmData(rowList.value).then(res => {
|
||||||
|
let data = []
|
||||||
|
|
||||||
|
let a1 = 0
|
||||||
|
let a2 = 0
|
||||||
|
let a3 = 0
|
||||||
|
let a4 = 0
|
||||||
|
let a5 = 0
|
||||||
|
if (row.isUpToGrid == 0) {
|
||||||
|
data = res.data.info
|
||||||
|
} else {
|
||||||
|
data = res.data.gwInfo
|
||||||
|
}
|
||||||
|
for (let i = 0; i < data.length; i++) {
|
||||||
|
if (data[i] >= 0 || data[i] < 1) {
|
||||||
|
a1++
|
||||||
|
} else if (data[i] >= 1 || data[i] < 1.2) {
|
||||||
|
a2++
|
||||||
|
} else if (data[i] >= 1.2 || data[i] < 1.6) {
|
||||||
|
a3++
|
||||||
|
} else if (data[i] >= 1.6 || data[i] < 2) {
|
||||||
|
a4++
|
||||||
|
} else if (data[i] >= 2) {
|
||||||
|
a5++
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let list = [
|
||||||
|
{
|
||||||
|
value: ((a1 / data.length) * 100).toFixed(2),
|
||||||
|
name: `无污染：${a1}座`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: ((a2 / data.length) * 100).toFixed(2),
|
||||||
|
name: `轻微污染：：${a2}座`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: ((a3 / data.length) * 100).toFixed(2),
|
||||||
|
name: `轻度污染：${a3}座`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: ((a4 / data.length) * 100).toFixed(2),
|
||||||
|
name: `中度污染：${a4}座`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: ((a5 / data.length) * 100).toFixed(2),
|
||||||
|
name: `重度污染：${a5}座`
|
||||||
|
}
|
||||||
|
]
|
||||||
|
const color = ['#00B07D', '#FFAF00', '#FF7D00', '#B90000', '#62298B']
|
||||||
|
|
||||||
|
list.forEach((item, i) => {
|
||||||
|
picEChart.value[i] = {
|
||||||
|
legend: {
|
||||||
|
type: 'scroll',
|
||||||
|
orient: 'vertical',
|
||||||
|
left: 10,
|
||||||
|
top: '10%'
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
dataZoom: null,
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'gauge',
|
||||||
|
startAngle: 180,
|
||||||
|
center: ['50%', '80%'],
|
||||||
|
radius: '135%',
|
||||||
|
endAngle: 0,
|
||||||
|
min: 0,
|
||||||
|
max: 100,
|
||||||
|
progress: {
|
||||||
|
show: true,
|
||||||
|
width: 15,
|
||||||
|
itemStyle: {
|
||||||
|
color: color[i]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
pointer: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
width: 15,
|
||||||
|
color: [[1, '#f4f4f4']]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
distance: 5,
|
||||||
|
color: '#666',
|
||||||
|
fontSize: 12,
|
||||||
|
formatter: function (value: any) {
|
||||||
|
if (value === 0 || value === 100) {
|
||||||
|
return value + '%'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
anchor: {
|
||||||
|
show: false,
|
||||||
|
showAbove: false,
|
||||||
|
size: 25,
|
||||||
|
itemStyle: {
|
||||||
|
borderWidth: 60
|
||||||
|
}
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
show: true,
|
||||||
|
offsetCenter: [0, '20%'],
|
||||||
|
fontSize: 14
|
||||||
|
},
|
||||||
|
detail: {
|
||||||
|
valueAnimation: true,
|
||||||
|
fontSize: 14,
|
||||||
|
lineHeight: 20,
|
||||||
|
color: color[i],
|
||||||
|
fontWeight: 'bold',
|
||||||
|
offsetCenter: [0, '-20%'],
|
||||||
|
formatter: function (value: any) {
|
||||||
|
return '{a|占比} ' + '\n' + value + '{a|%}'
|
||||||
|
},
|
||||||
|
rich: {
|
||||||
|
a: {
|
||||||
|
color: '#333',
|
||||||
|
fontSize: 16,
|
||||||
|
lineHeight: 30
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: [item]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
// 列表
|
||||||
|
getPollutionAlarmPageData(rowList.value).then(res => {
|
||||||
|
tableData.value = res.data.records
|
||||||
|
})
|
||||||
|
|
||||||
|
dialogVisible.value = true
|
||||||
|
}
|
||||||
|
const analysis = (e: any) => {
|
||||||
|
let time = rowList.value.searchBeginTime.slice(0, 4) + `-01-01`
|
||||||
|
// 分析
|
||||||
|
getGridDiagramSubTendency({ ...rowList.value, searchBeginTime: time, type: e }).then(res => {
|
||||||
|
let name = []
|
||||||
|
let data = []
|
||||||
|
for (let k in res.data) {
|
||||||
|
name.push(k)
|
||||||
|
data.push(res.data[k])
|
||||||
|
}
|
||||||
|
|
||||||
|
trendEChart.value = {
|
||||||
|
title: {
|
||||||
|
text: '变电站接入数量'
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
name: '时间',
|
||||||
|
data: name
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
name: '座'
|
||||||
|
},
|
||||||
|
|
||||||
|
options: {
|
||||||
|
dataZoom: null,
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '接入',
|
||||||
|
type: 'line',
|
||||||
|
data: data,
|
||||||
|
smooth: true,
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'top',
|
||||||
|
fontSize: 12
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const formatter = (row: any) => {
|
||||||
|
if (row.column.field == 'dataV') {
|
||||||
|
return row.cellValue == 3.14159 ? '暂无数据' : row.cellValue
|
||||||
|
} else if (row.column.field == 'data') {
|
||||||
|
return row.cellValue == 3.14159 ? '暂无数据' : row.cellValue
|
||||||
|
} else if (row.column.field == 'voltageLevel') {
|
||||||
|
return Voltage.filter((item: any) => item.id == row.cellValue)[0]?.name
|
||||||
|
} else {
|
||||||
|
return row.cellValue
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const handleClose = () => {
|
||||||
|
tableData.value = []
|
||||||
|
dialogVisible.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
defineExpose({ open })
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
:deep(.el-select) {
|
||||||
|
min-width: 80px;
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
span {
|
||||||
|
font-weight: 550;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.pie {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
.MyEChart {
|
||||||
|
height: 130px;
|
||||||
|
width: 30%;
|
||||||
|
margin-right: 3%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,334 @@
|
|||||||
|
<!-- 稳态 -->
|
||||||
|
<template>
|
||||||
|
<!-- 终端 -->
|
||||||
|
<el-dialog draggable title="稳态电能质量水平评估详情" v-model="dialogVisible" width="1400px">
|
||||||
|
<el-row style="height: 300px" :gutter="20">
|
||||||
|
<el-col :span="14">
|
||||||
|
<div class="title">
|
||||||
|
<span>稳态电能质量水平评估</span>
|
||||||
|
</div>
|
||||||
|
<vxe-table v-bind="defaultAttribute" size="mini" ref="vxeRef" height="260px" :data="tableData">
|
||||||
|
<vxe-column field="devName" width="110px" />
|
||||||
|
|
||||||
|
<vxe-colgroup title="500kV">
|
||||||
|
<vxe-column field="devName" title="均值" />
|
||||||
|
<vxe-column field="devName" title="标准差" />
|
||||||
|
</vxe-colgroup>
|
||||||
|
<vxe-colgroup title="220kV">
|
||||||
|
<vxe-column field="devName" title="均值" />
|
||||||
|
<vxe-column field="devName" title="标准差" />
|
||||||
|
</vxe-colgroup>
|
||||||
|
<vxe-colgroup title="110kV">
|
||||||
|
<vxe-column field="devName" title="均值" />
|
||||||
|
<vxe-column field="devName" title="标准差" />
|
||||||
|
</vxe-colgroup>
|
||||||
|
<vxe-colgroup title="35kV">
|
||||||
|
<vxe-column field="devName" title="均值" />
|
||||||
|
<vxe-column field="devName" title="标准差" />
|
||||||
|
</vxe-colgroup>
|
||||||
|
<vxe-colgroup title="其他">
|
||||||
|
<vxe-column field="devName" title="均值" />
|
||||||
|
<vxe-column field="devName" title="标准差" />
|
||||||
|
</vxe-colgroup>
|
||||||
|
</vxe-table>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="10">
|
||||||
|
<div class="title">
|
||||||
|
<span>稳态电能质量水平评估环比变化</span>
|
||||||
|
</div>
|
||||||
|
<div class="pie">
|
||||||
|
<MyEChart style="height: 260px" :options="trendEChart" />
|
||||||
|
<!-- <div style="height: 260px" ref="chartRef" /> -->
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<div>
|
||||||
|
<div class="title">
|
||||||
|
<span>稳态电能质量水平评估详细列表</span>
|
||||||
|
</div>
|
||||||
|
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="300px" :data="tableData">
|
||||||
|
<vxe-column field="devName" title="变电站名称" />
|
||||||
|
<vxe-column field="devName" title="超标天数" />
|
||||||
|
<vxe-column field="devName" title="超标差值" />
|
||||||
|
<vxe-column field="devName" title="在线监测点数量(个)" />
|
||||||
|
<vxe-column field="devName" title="超标监测点数量(个)" />
|
||||||
|
<vxe-column field="devName" title="超标监测点占比(%)" />
|
||||||
|
</vxe-table>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import MyEChart from '@/components/echarts/MyEchart.vue'
|
||||||
|
import echarts from '@/components/echarts/echarts.ts'
|
||||||
|
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||||
|
|
||||||
|
const dialogVisible: any = ref(false)
|
||||||
|
const chartRef = ref()
|
||||||
|
const tableData: any = ref([
|
||||||
|
{
|
||||||
|
devName: 123
|
||||||
|
}
|
||||||
|
])
|
||||||
|
|
||||||
|
const trendEChart = ref({
|
||||||
|
xAxis: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['1月', '2月', '3月']
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
|
||||||
|
options: {
|
||||||
|
dataZoom: null,
|
||||||
|
radar: {
|
||||||
|
center: ['50%', '50%'],
|
||||||
|
radius: '65%',
|
||||||
|
startAngle: 90,
|
||||||
|
splitNumber: 5,
|
||||||
|
splitArea: {
|
||||||
|
areaStyle: {
|
||||||
|
color: ['#FFFFFF', '#F5F9FF'].reverse()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#D2E4F8'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#D2E4F8'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
name: {
|
||||||
|
formatter: '{value}',
|
||||||
|
textStyle: {
|
||||||
|
color: '#656565',
|
||||||
|
fontSize: 15
|
||||||
|
}
|
||||||
|
},
|
||||||
|
indicator: [
|
||||||
|
{
|
||||||
|
name: '评率偏差',
|
||||||
|
max: 100
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '电压偏差',
|
||||||
|
max: 100
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '闪变',
|
||||||
|
max: 100
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '电压总谐波畸变率',
|
||||||
|
max: 100
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '三相电压不平衡度',
|
||||||
|
max: 100
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '1月',
|
||||||
|
// type: 'radar',
|
||||||
|
symbol: 'none',
|
||||||
|
symbolSize: 6,
|
||||||
|
areaStyle: {
|
||||||
|
normal: {
|
||||||
|
color: '#80B2FF'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: '#80B2FF'
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
normal: {
|
||||||
|
color: '#80B2FF',
|
||||||
|
width: 2
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: [9, 16, 16, 15, 12]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
const echart = () => {
|
||||||
|
let chart = echarts.init(chartRef.value)
|
||||||
|
var dataname = ['评率偏差', '电压偏差', '闪变', '电压总谐波畸变率', '三相电压不平衡度']
|
||||||
|
var datamax = [20, 20, 20, 20, 20, 20]
|
||||||
|
var datavaule = [9, 16, 16, 15, 12, 8]
|
||||||
|
var datavaule1 = [6, 8, 10, 6, 5, 8]
|
||||||
|
var datavaule2 = [19, 19, 19, 19, 19, 19]
|
||||||
|
|
||||||
|
var indicator = []
|
||||||
|
for (var i = 0; i < dataname.length; i++) {
|
||||||
|
indicator.push({
|
||||||
|
name: dataname[i],
|
||||||
|
max: datamax[i]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
let option = {
|
||||||
|
tooltip: {
|
||||||
|
show: true,
|
||||||
|
trigger: 'item'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['1月', '2月', '3月'],
|
||||||
|
type: 'scroll',
|
||||||
|
orient: 'vertical',
|
||||||
|
icon: 'roundRect',
|
||||||
|
right: '20',
|
||||||
|
top: 'center',
|
||||||
|
itemGap: 30,
|
||||||
|
itemWidth: 16,
|
||||||
|
itemHeight: 16,
|
||||||
|
textStyle: {
|
||||||
|
fontSize: '15',
|
||||||
|
color: '#656565'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
radar: {
|
||||||
|
center: ['50%', '50%'],
|
||||||
|
radius: '65%',
|
||||||
|
startAngle: 90,
|
||||||
|
splitNumber: 5,
|
||||||
|
splitArea: {
|
||||||
|
areaStyle: {
|
||||||
|
color: ['#FFFFFF', '#F5F9FF'].reverse()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#D2E4F8'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#D2E4F8'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
name: {
|
||||||
|
formatter: '{value}',
|
||||||
|
textStyle: {
|
||||||
|
color: '#656565',
|
||||||
|
fontSize: 15
|
||||||
|
}
|
||||||
|
},
|
||||||
|
indicator: indicator
|
||||||
|
},
|
||||||
|
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '1月',
|
||||||
|
type: 'radar',
|
||||||
|
symbol: 'none',
|
||||||
|
symbolSize: 6,
|
||||||
|
areaStyle: {
|
||||||
|
normal: {
|
||||||
|
color: '#80B2FF'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: '#80B2FF'
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
normal: {
|
||||||
|
color: '#80B2FF',
|
||||||
|
width: 2
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: [datavaule]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '2月',
|
||||||
|
type: 'radar',
|
||||||
|
symbol: 'none',
|
||||||
|
symbolSize: 6,
|
||||||
|
areaStyle: {
|
||||||
|
normal: {
|
||||||
|
color: '#80B2FF'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: '#80B2FF'
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
normal: {
|
||||||
|
color: '#80B2FF',
|
||||||
|
width: 2
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: [datavaule1]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '3月',
|
||||||
|
type: 'radar',
|
||||||
|
symbol: 'none',
|
||||||
|
symbolSize: 6,
|
||||||
|
areaStyle: {
|
||||||
|
normal: {
|
||||||
|
color: '#80B2FF'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: '#80B2FF'
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
normal: {
|
||||||
|
color: '#80B2FF',
|
||||||
|
width: 2
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: [datavaule2]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
chart.setOption(option)
|
||||||
|
}
|
||||||
|
// echart()
|
||||||
|
const open = async (row: any) => {
|
||||||
|
dialogVisible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
defineExpose({ open })
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
:deep(.el-select) {
|
||||||
|
min-width: 80px;
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin: 10px;
|
||||||
|
span {
|
||||||
|
font-weight: 550;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.pie {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
:deep(.el-table thead) {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,68 @@
|
|||||||
|
<!-- 技术 -->
|
||||||
|
<template>
|
||||||
|
<el-dialog draggable title="技术监督管理详情" v-model="dialogVisible" width="1400px">
|
||||||
|
<div>
|
||||||
|
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="300px" :data="tableData">
|
||||||
|
<vxe-column field="devName" />
|
||||||
|
<vxe-column field="devName" title="异常问题总数" />
|
||||||
|
<vxe-column field="devName" title="已关联工单数" />
|
||||||
|
<vxe-column field="devName" title="工单转换率(%)" />
|
||||||
|
<vxe-column field="devName" title="工单总数" />
|
||||||
|
<vxe-column field="devName" title="已处理工单数" />
|
||||||
|
<vxe-column field="devName" title="工单处置率(%)" />
|
||||||
|
</vxe-table>
|
||||||
|
</div>
|
||||||
|
<div style="height: 300px; margin-top: 10px">
|
||||||
|
<MyEChart style="height: 300px" :options="picEChart" />
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import MyEChart from '@/components/echarts/MyEchart.vue'
|
||||||
|
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||||
|
|
||||||
|
const dialogVisible: any = ref(false)
|
||||||
|
|
||||||
|
const tableData: any = ref([
|
||||||
|
{
|
||||||
|
devName: 123
|
||||||
|
}
|
||||||
|
])
|
||||||
|
|
||||||
|
const picEChart = ref({
|
||||||
|
title: {
|
||||||
|
text: ''
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
name: '(区域)',
|
||||||
|
data: ['技术监督计划', '用户投诉', '谐波普测问题', '在线率问题']
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
name: '',
|
||||||
|
min: 0,
|
||||||
|
max: 100
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '问题个数',
|
||||||
|
type: 'bar',
|
||||||
|
data: [12, 12, 12, 12]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '已处理',
|
||||||
|
type: 'bar',
|
||||||
|
|
||||||
|
data: [12, 12, 12, 12]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
const open = async (row: any) => {
|
||||||
|
dialogVisible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
defineExpose({ open })
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped></style>
|
||||||
@@ -0,0 +1,89 @@
|
|||||||
|
<!-- 暂态 -->
|
||||||
|
<template>
|
||||||
|
<el-dialog draggable title="暂态电能质量水平评价详情" v-model="dialogVisible" width="1400px">
|
||||||
|
<div>
|
||||||
|
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="300px" :data="tableData">
|
||||||
|
<vxe-column field="devName" title="所属区域" />
|
||||||
|
<vxe-column field="devName" title="暂态评估得分" />
|
||||||
|
<vxe-column field="devName" title="暂态指标" />
|
||||||
|
<vxe-column field="devName" title="暂降次数" />
|
||||||
|
<vxe-column field="devName" title="暂降原因" />
|
||||||
|
<vxe-column field="devName" title="暂降类型" />
|
||||||
|
<vxe-column field="devName" title="暂态事件个数" />
|
||||||
|
<vxe-colgroup title="暂态严重度占比">
|
||||||
|
<vxe-column field="devName" title="SARFI-90" />
|
||||||
|
<vxe-column field="devName" title="SARFI-50" />
|
||||||
|
<vxe-column field="devName" title="SARFI-20" />
|
||||||
|
</vxe-colgroup>
|
||||||
|
</vxe-table>
|
||||||
|
</div>
|
||||||
|
<div style="height: 300px; margin-top: 10px; display: flex">
|
||||||
|
<MyEChart style="height: 300px; width: 50%" :options="picEChart" />
|
||||||
|
<MyEChart style="height: 300px; width: 50%" :options="picEChart" />
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import MyEChart from '@/components/echarts/MyEchart.vue'
|
||||||
|
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||||
|
|
||||||
|
const dialogVisible: any = ref(false)
|
||||||
|
|
||||||
|
const tableData: any = ref([
|
||||||
|
{
|
||||||
|
devName: 123
|
||||||
|
}
|
||||||
|
])
|
||||||
|
|
||||||
|
const picEChart = ref({
|
||||||
|
legend: {
|
||||||
|
orient: 'vertical'
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
dataZoom: null,
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'pie',
|
||||||
|
|
||||||
|
center: ['50%', '50%'],
|
||||||
|
radius: '50%',
|
||||||
|
label: {
|
||||||
|
formatter: function (e: any) {
|
||||||
|
let {
|
||||||
|
data: { value, name }
|
||||||
|
} = e
|
||||||
|
return `${name}：${value}`
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
name: '其他',
|
||||||
|
value: 53.4,
|
||||||
|
itemStyle: {
|
||||||
|
color: '#ff0000'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '大型感应电动机启动',
|
||||||
|
value: 3.4
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
const open = async (row: any) => {
|
||||||
|
dialogVisible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
defineExpose({ open })
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped></style>
|
||||||
@@ -0,0 +1,246 @@
|
|||||||
|
<template>
|
||||||
|
<!-- 终端 -->
|
||||||
|
<el-dialog draggable title="终端统计详情" v-model="dialogVisible" width="1400px" :before-close="handleClose">
|
||||||
|
<el-row style="height: 300px" :gutter="20">
|
||||||
|
<el-col :span="12">
|
||||||
|
<div class="title">
|
||||||
|
<span>趋势分析</span>
|
||||||
|
<el-select v-model="time" style="width: 80px; margin-right: 80px" @change="analysis">
|
||||||
|
<el-option label="年" value="1" />
|
||||||
|
<el-option label="月" value="3" />
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
|
<MyEChart style="height: 260px" :options="trendEChart" />
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<div class="title">
|
||||||
|
<span>分布统计</span>
|
||||||
|
</div>
|
||||||
|
<div class="pie">
|
||||||
|
<MyEChart style="height: 260px; width: 50%" :options="picEChart" />
|
||||||
|
<el-table size="small" height="260px" style="width: 240px" :data="picList">
|
||||||
|
<el-table-column prop="orgName" width="80px" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="onlineEvaluate" label="终端评价" align="center">
|
||||||
|
<template #default="scope">
|
||||||
|
<span
|
||||||
|
:style="{
|
||||||
|
color:
|
||||||
|
scope.row.onlineEvaluate < 60
|
||||||
|
? 'red'
|
||||||
|
: scope.row.onlineEvaluate < 90
|
||||||
|
? 'orange'
|
||||||
|
: 'green'
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
{{
|
||||||
|
scope.row.onlineEvaluate < 60
|
||||||
|
? '差'
|
||||||
|
: scope.row.onlineEvaluate < 90
|
||||||
|
? '良'
|
||||||
|
: '优'
|
||||||
|
}}
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="devCount" label="数量" align="center"></el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<div>
|
||||||
|
<div class="title">
|
||||||
|
<span>终端统计细列表</span>
|
||||||
|
</div>
|
||||||
|
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="300px" :data="tableData">
|
||||||
|
<vxe-column field="devName" title="终端名称" />
|
||||||
|
<vxe-column field="areaName" title="所属区域" />
|
||||||
|
<vxe-column field="bdName" title="所属变电站" />
|
||||||
|
<vxe-column field="devType" title="终端型号" />
|
||||||
|
<vxe-column field="loginTime" title="投运时间" />
|
||||||
|
<vxe-column field="runFlag" title="终端状态">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-tag :type="scope.row.runFlag == '投运' ? 'success' : 'danger'">
|
||||||
|
{{ scope.row.runFlag }}
|
||||||
|
</el-tag>
|
||||||
|
</template>
|
||||||
|
</vxe-column>
|
||||||
|
<vxe-column field="comFlag" title="通讯状态">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-tag :type="scope.row.comFlag == '正常' ? 'success' : 'danger'">
|
||||||
|
{{ scope.row.comFlag }}
|
||||||
|
</el-tag>
|
||||||
|
</template>
|
||||||
|
</vxe-column>
|
||||||
|
<vxe-column field="updateTime" title="最新数据时间" />
|
||||||
|
<vxe-column field="onlineEvaluate" title="终端在线率(%)" :formatter="formatter" />
|
||||||
|
</vxe-table>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import { useDictData } from '@/stores/dictData'
|
||||||
|
import MyEChart from '@/components/echarts/MyEchart.vue'
|
||||||
|
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||||
|
import { getGridDiagramDevTendency, getGridDiagramDevData, getRuntimeData } from '@/api/device-boot/panorama'
|
||||||
|
const dictData = useDictData()
|
||||||
|
const dialogVisible: any = ref(false)
|
||||||
|
const time = ref('1')
|
||||||
|
const rowList: any = ref({})
|
||||||
|
const tableData: any = ref()
|
||||||
|
|
||||||
|
const picList = ref([])
|
||||||
|
|
||||||
|
const trendEChart: any = ref({})
|
||||||
|
|
||||||
|
const picEChart = ref()
|
||||||
|
const open = async (row: any) => {
|
||||||
|
rowList.value = {
|
||||||
|
deviceInfoParam: {
|
||||||
|
...row
|
||||||
|
},
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 1000,
|
||||||
|
...row
|
||||||
|
}
|
||||||
|
// 趋势分析
|
||||||
|
analysis(1)
|
||||||
|
dialogVisible.value = true
|
||||||
|
//分布统计
|
||||||
|
getGridDiagramDevData(rowList.value).then(res => {
|
||||||
|
picList.value = res.data
|
||||||
|
let picData: any = []
|
||||||
|
res.data.forEach((item: any) => {
|
||||||
|
picData.push({
|
||||||
|
value: item.devCount,
|
||||||
|
name: `${item.orgName}：${item.devCount}台`,
|
||||||
|
itemStyle: {
|
||||||
|
color: item.onlineEvaluate < 60 ? 'red' : item.onlineEvaluate < 90 ? 'orange' : 'green'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
picEChart.value = {
|
||||||
|
legend: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
dataZoom: null,
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'pie',
|
||||||
|
startAngle: 360,
|
||||||
|
center: ['50%', '50%'],
|
||||||
|
radius: ['25%', '35%'],
|
||||||
|
endAngle: 0,
|
||||||
|
|
||||||
|
itemStyle: {
|
||||||
|
borderColor: '#fff',
|
||||||
|
borderWidth: 5
|
||||||
|
},
|
||||||
|
|
||||||
|
data: picData
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// 列表
|
||||||
|
getRuntimeData({
|
||||||
|
...row,
|
||||||
|
serverName: 'pqs-common',
|
||||||
|
runFlag: [],
|
||||||
|
comFlag: [],
|
||||||
|
manufacturer: dictData.getBasicData('Dev_Manufacturers'),
|
||||||
|
statisticalType: {}
|
||||||
|
}).then((res: any) => {
|
||||||
|
tableData.value = res.data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const analysis = (e: any) => {
|
||||||
|
let time = rowList.value.searchBeginTime.slice(0, 4) + `-01-01`
|
||||||
|
|
||||||
|
getGridDiagramDevTendency({ ...rowList.value, searchBeginTime: time, type: e }).then(res => {
|
||||||
|
let name = []
|
||||||
|
let data = []
|
||||||
|
for (let k in res.data) {
|
||||||
|
name.push(k)
|
||||||
|
data.push(res.data[k])
|
||||||
|
}
|
||||||
|
|
||||||
|
trendEChart.value = {
|
||||||
|
title: {
|
||||||
|
text: '终端接入数量'
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
name: '时间',
|
||||||
|
data: name
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
name: '台'
|
||||||
|
},
|
||||||
|
|
||||||
|
options: {
|
||||||
|
dataZoom: null,
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '接入',
|
||||||
|
type: 'line',
|
||||||
|
data: data,
|
||||||
|
smooth: true,
|
||||||
|
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'top',
|
||||||
|
fontSize: 12
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const formatter = (row: any) => {
|
||||||
|
if (row.column.field == 'onlineEvaluate') {
|
||||||
|
return row.cellValue == 3.14159 ? '暂无数据' : row.cellValue * 100
|
||||||
|
} else {
|
||||||
|
return row.cellValue
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const handleClose = () => {
|
||||||
|
tableData.value = []
|
||||||
|
dialogVisible.value = false
|
||||||
|
}
|
||||||
|
defineExpose({ open })
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
:deep(.el-select) {
|
||||||
|
min-width: 80px;
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin: 10px;
|
||||||
|
span {
|
||||||
|
font-weight: 550;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.pie {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
:deep(.el-table thead) {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
82
src/views/pqs/qualityInspeection/panorama/components/map.vue
Normal file
82
src/views/pqs/qualityInspeection/panorama/components/map.vue
Normal file
@@ -0,0 +1,82 @@
|
|||||||
|
<template>
|
||||||
|
<div id="mapId" style="width: 100%; height: 100%"></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { onMounted, reactive, ref, nextTick } from 'vue'
|
||||||
|
// import '@/assets/panorama/map.js'
|
||||||
|
import { mainHeight } from '@/utils/layout'
|
||||||
|
|
||||||
|
const powerMap: any = ref(null)
|
||||||
|
powerMap.value = new PowerMapProgram(() => {
|
||||||
|
// 初始化地图
|
||||||
|
powerMap.value.initMap({
|
||||||
|
mapId: 'mapId',
|
||||||
|
style: 'sjDark', // sjRaster sjBase sjDark
|
||||||
|
zoom: 6,
|
||||||
|
center: [116.478, 39.997]
|
||||||
|
})
|
||||||
|
setTimeout(() => {
|
||||||
|
powerMap.value.createGridMap({
|
||||||
|
theme: 'light',
|
||||||
|
zoom: 7,
|
||||||
|
country: true,
|
||||||
|
|
||||||
|
city: {
|
||||||
|
minzoom: 5,
|
||||||
|
maxzoom: 8
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
// label 文字颜色
|
||||||
|
textColor: '#fff',
|
||||||
|
// label 文字透明度
|
||||||
|
textOpacity: 1
|
||||||
|
},
|
||||||
|
default: {
|
||||||
|
fill: {
|
||||||
|
// 默认填充颜色, 支持 rgba 格式
|
||||||
|
fillColor: '#028b98',
|
||||||
|
fillOpacity: 0.4
|
||||||
|
},
|
||||||
|
outline: {
|
||||||
|
// 默认轮廓线颜色
|
||||||
|
lineColor: '#0ec6d0',
|
||||||
|
// 默认轮廓线宽
|
||||||
|
lineWidth: 2
|
||||||
|
}
|
||||||
|
},
|
||||||
|
hover: {
|
||||||
|
fill: {
|
||||||
|
fillColor: '#028b98',
|
||||||
|
fillOpacity: 0.6
|
||||||
|
},
|
||||||
|
outline: {
|
||||||
|
lineColor: '#009ea8',
|
||||||
|
lineWidth: 2
|
||||||
|
}
|
||||||
|
},
|
||||||
|
highLight: {
|
||||||
|
fill: {
|
||||||
|
fillColor: '#028b98',
|
||||||
|
fillOpacity: 0.6
|
||||||
|
},
|
||||||
|
outline: {
|
||||||
|
lineColor: '#009ea8',
|
||||||
|
lineWidth: 2
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// 监听行政区域点击事件
|
||||||
|
}, 1000)
|
||||||
|
})
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
// 监听地图初始化完成事件
|
||||||
|
})
|
||||||
|
|
||||||
|
const height = mainHeight(20)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import '@/assets/panorama/map.css';
|
||||||
|
</style>
|
||||||
501
src/views/pqs/qualityInspeection/panorama/components/mapL.vue
Normal file
501
src/views/pqs/qualityInspeection/panorama/components/mapL.vue
Normal file
@@ -0,0 +1,501 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<DatePicker ref="datePickerRef" style="display: none" />
|
||||||
|
<div class="boxLeft" :class="show ? 'show' : 'noshow'" :style="height">
|
||||||
|
<div v-for="(item, i) in list" :style="boxHeight">
|
||||||
|
<div class="title">
|
||||||
|
<span>{{ item.title }}</span>
|
||||||
|
<span class="info" @click="open(i)">
|
||||||
|
详情
|
||||||
|
<ArrowRight style="width: 12px" />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<!-- <div style="border: 1px solid #ccc; margin-top: 10px">
|
||||||
|
<div class="infoTop">
|
||||||
|
<div class="infoL">
|
||||||
|
<img :src="item.img" />
|
||||||
|
</div>
|
||||||
|
<div class="infoR">
|
||||||
|
<div class="top">{{ item.infoT }}</div>
|
||||||
|
<div class="bottom">
|
||||||
|
<div v-for="(num, k) in item.num">
|
||||||
|
<span :style="{ color: item.color[k] }">{{ num.a }}</span>
|
||||||
|
/
|
||||||
|
<span :style="{ color: item.color[4] }">{{ num.b }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<el-table size="small" :height="tabHeight" :data="item.list">
|
||||||
|
<el-table-column prop="name" width="60px" label=""></el-table-column>
|
||||||
|
<el-table-column prop="a" label="500kV" width="63px" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="b" label="220kV" width="63px" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="d" label="110KV" width="63px" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="d" label="35KV" width="63px" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="d" label="总数" width="63px" align="center"></el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div> -->
|
||||||
|
<div class="cardBox">
|
||||||
|
<el-card class="card" style="width: 98%">
|
||||||
|
<div style="display: flex">
|
||||||
|
<img :src="item.img" />
|
||||||
|
<div class="row">
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<el-col :span="12">{{ item.titleT[0] }}</el-col>
|
||||||
|
<el-col :span="12">{{ item.titleT[1] }}</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row :gutter="20" class="mt4">
|
||||||
|
<el-col :span="12" style="color: #2dcd28">{{item.list[4].numOne}}</el-col>
|
||||||
|
<el-col :span="12" style="color: #bd3124">{{item.list[4].numTwo}}</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
<el-card class="card">
|
||||||
|
<div style="display: flex; align-items: center">
|
||||||
|
<img src="@/assets/img/500kv.png" alt="" />
|
||||||
|
<div class="row">
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="12" style="color: #2dcd28">{{item.list[0].numOne}}</el-col>
|
||||||
|
<el-col :span="12" style="color: #bd3124">{{item.list[0].numTwo}}</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
<el-card class="card">
|
||||||
|
<div style="display: flex; align-items: center">
|
||||||
|
<img src="@/assets/img/220kv.png" />
|
||||||
|
<div class="row">
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="12" style="color: #2dcd28">{{item.list[1].numOne}}</el-col>
|
||||||
|
<el-col :span="12" style="color: #bd3124">{{item.list[1].numTwo}}</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
<el-card class="card">
|
||||||
|
<div style="display: flex; align-items: center">
|
||||||
|
<img src="@/assets/img/110kv.png" />
|
||||||
|
<div class="row">
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="12" style="color: #2dcd28">{{item.list[2].numOne}}</el-col>
|
||||||
|
<el-col :span="12" style="color: #bd3124">{{item.list[2].numTwo}}</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
<el-card class="card">
|
||||||
|
<div style="display: flex; align-items: center">
|
||||||
|
<img src="@/assets/img/35kv.png" />
|
||||||
|
<div class="row">
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="12" style="color: #2dcd28">{{item.list[3].numOne}}</el-col>
|
||||||
|
<el-col :span="12" style="color: #bd3124">{{item.list[3].numTwo}}</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- <div :style="boxHeight">
|
||||||
|
<div class="title">
|
||||||
|
<span>终端统计</span>
|
||||||
|
<span class="info" @click="open(1)">
|
||||||
|
详情
|
||||||
|
<ArrowRight style="width: 12px" />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cardBox">
|
||||||
|
<el-card class="card" style="width: 98%">
|
||||||
|
<div style="display: flex">
|
||||||
|
<img src="@/assets/img/ZD.png" />
|
||||||
|
<div class="row">
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<el-col :span="12">终端个数</el-col>
|
||||||
|
<el-col :span="12">终端在线率</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row :gutter="20" class="mt4">
|
||||||
|
<el-col :span="12" style="color: #2dcd28">480</el-col>
|
||||||
|
<el-col :span="12" style="color: #bd3124">120</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
<el-card class="card">
|
||||||
|
<div style="display: flex; align-items: center">
|
||||||
|
<img src="@/assets/img/500kv.png" alt="" />
|
||||||
|
<div class="row">
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="12" style="color: #2dcd28">120</el-col>
|
||||||
|
<el-col :span="12" style="color: #bd3124">30</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
<el-card class="card">
|
||||||
|
<div style="display: flex; align-items: center">
|
||||||
|
<img src="@/assets/img/220kv.png" />
|
||||||
|
<div class="row">
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="12" style="color: #2dcd28">120</el-col>
|
||||||
|
<el-col :span="12" style="color: #bd3124">30</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
<el-card class="card">
|
||||||
|
<div style="display: flex; align-items: center">
|
||||||
|
<img src="@/assets/img/110kv.png" />
|
||||||
|
<div class="row">
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="12" style="color: #2dcd28">120</el-col>
|
||||||
|
<el-col :span="12" style="color: #bd3124">30</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
<el-card class="card">
|
||||||
|
<div style="display: flex; align-items: center">
|
||||||
|
<img src="@/assets/img/35kv.png" />
|
||||||
|
<div class="row">
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="12" style="color: #2dcd28">120</el-col>
|
||||||
|
<el-col :span="12" style="color: #bd3124">30</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div :style="boxHeight">
|
||||||
|
<div class="title">
|
||||||
|
<span>监测点统计</span>
|
||||||
|
<span class="info" @click="open(2)">
|
||||||
|
详情
|
||||||
|
<ArrowRight style="width: 12px" />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cardBox">
|
||||||
|
<el-card class="card" style="width: 98%">
|
||||||
|
<div style="display: flex">
|
||||||
|
<img src="@/assets/img/JCD.png" />
|
||||||
|
<div class="row">
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<el-col :span="12">总数</el-col>
|
||||||
|
<el-col :span="12">在线</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row :gutter="20" class="mt4">
|
||||||
|
<el-col :span="12" style="color: #2dcd28">480</el-col>
|
||||||
|
<el-col :span="12" style="color: #bd3124">120</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
<el-card class="card">
|
||||||
|
<div style="display: flex; align-items: center">
|
||||||
|
<img src="@/assets/img/500kv.png" alt="" />
|
||||||
|
<div class="row">
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="12" style="color: #2dcd28">120</el-col>
|
||||||
|
<el-col :span="12" style="color: #bd3124">30</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
<el-card class="card">
|
||||||
|
<div style="display: flex; align-items: center">
|
||||||
|
<img src="@/assets/img/220kv.png" />
|
||||||
|
<div class="row">
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="12" style="color: #2dcd28">120</el-col>
|
||||||
|
<el-col :span="12" style="color: #bd3124">30</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
<el-card class="card">
|
||||||
|
<div style="display: flex; align-items: center">
|
||||||
|
<img src="@/assets/img/110kv.png" />
|
||||||
|
<div class="row">
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="12" style="color: #2dcd28">120</el-col>
|
||||||
|
<el-col :span="12" style="color: #bd3124">30</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
<el-card class="card">
|
||||||
|
<div style="display: flex; align-items: center">
|
||||||
|
<img src="@/assets/img/35kv.png" />
|
||||||
|
<div class="row">
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="12" style="color: #2dcd28">120</el-col>
|
||||||
|
<el-col :span="12" style="color: #bd3124">30</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</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 DatePicker from '@/components/form/datePicker/index.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 } from '@/api/device-boot/panorama'
|
||||||
|
|
||||||
|
const dictData = useDictData()
|
||||||
|
const show = ref(false)
|
||||||
|
const standRef = ref()
|
||||||
|
const terminalRef = ref()
|
||||||
|
const pointRef = ref()
|
||||||
|
const datePickerRef = ref()
|
||||||
|
const list: any = ref([
|
||||||
|
{
|
||||||
|
title: '变电站',
|
||||||
|
img: new URL(`@/assets/img/BDZ.png`, import.meta.url),
|
||||||
|
titleT:['总数','告警'],
|
||||||
|
list: [
|
||||||
|
{
|
||||||
|
numOne: 1,
|
||||||
|
numTwo: 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
numOne: 2,
|
||||||
|
numTwo: 2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
numOne: 3,
|
||||||
|
numTwo: 3
|
||||||
|
},
|
||||||
|
{
|
||||||
|
numOne: 4,
|
||||||
|
numTwo: 4
|
||||||
|
},
|
||||||
|
{
|
||||||
|
numOne: 5,
|
||||||
|
numTwo: 5
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '终端统计',
|
||||||
|
img: new URL(`@/assets/img/ZD.png`, import.meta.url),
|
||||||
|
titleT:['终端个数','终端在线率'],
|
||||||
|
list: [
|
||||||
|
{
|
||||||
|
numOne: 1,
|
||||||
|
numTwo: 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
numOne: 2,
|
||||||
|
numTwo: 2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
numOne: 3,
|
||||||
|
numTwo: 3
|
||||||
|
},
|
||||||
|
{
|
||||||
|
numOne: 4,
|
||||||
|
numTwo: 4
|
||||||
|
},
|
||||||
|
{
|
||||||
|
numOne: 5,
|
||||||
|
numTwo: 5
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '监测点统计',
|
||||||
|
img: new URL(`@/assets/img/JCD.png`, import.meta.url),
|
||||||
|
titleT:['总数','在线'],
|
||||||
|
list: [
|
||||||
|
{
|
||||||
|
numOne: 1,
|
||||||
|
numTwo: 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
numOne: 2,
|
||||||
|
numTwo: 2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
numOne: 3,
|
||||||
|
numTwo: 3
|
||||||
|
},
|
||||||
|
{
|
||||||
|
numOne: 4,
|
||||||
|
numTwo: 4
|
||||||
|
},
|
||||||
|
{
|
||||||
|
numOne: 5,
|
||||||
|
numTwo: 5
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
])
|
||||||
|
const formRow: any = ref({})
|
||||||
|
const height = mainHeight(30)
|
||||||
|
const boxHeight = mainHeight(40, 3)
|
||||||
|
const tabHeight: any = mainHeight(320, 3).height
|
||||||
|
// 详情
|
||||||
|
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 = (row: any) => {
|
||||||
|
let form = {
|
||||||
|
id: row.orgNo,
|
||||||
|
deptIndex: row.orgNo,
|
||||||
|
orgId: row.orgNo,
|
||||||
|
ids: [],
|
||||||
|
statisticalType: dictData.getBasicData('Statistical_Type', ['Report_Type'])[0],
|
||||||
|
isUpToGrid: row.isUpToGrid,
|
||||||
|
monitorFlag: row.isUpToGrid,
|
||||||
|
// startTime: datePickerRef.value.timeValue[0],
|
||||||
|
// searchBeginTime: datePickerRef.value.timeValue[0],
|
||||||
|
// endTime: datePickerRef.value.timeValue[1],
|
||||||
|
// searchEndTime: datePickerRef.value.timeValue[1],
|
||||||
|
startTime:`2023-07-01`,
|
||||||
|
searchBeginTime: `2023-07-01`,
|
||||||
|
endTime: `2023-07-30`,
|
||||||
|
searchEndTime: `2023-07-30`,
|
||||||
|
type: datePickerRef.value.interval
|
||||||
|
}
|
||||||
|
formRow.value = form
|
||||||
|
getSubLineGiveAnAlarm(form).then()
|
||||||
|
getGridDiagramDev(form)
|
||||||
|
getGridDiagramMonitor(form)
|
||||||
|
}
|
||||||
|
onMounted(() => {})
|
||||||
|
defineExpose({ info })
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.boxLeft {
|
||||||
|
background-color: #fff;
|
||||||
|
width: 400px;
|
||||||
|
padding: 10px;
|
||||||
|
font-size: 13px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cardBox {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
.card {
|
||||||
|
margin-top: 10px;
|
||||||
|
width: 48%;
|
||||||
|
margin-right: 2%;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
.row {
|
||||||
|
width: 80%;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
// height: ;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-weight: 550;
|
||||||
|
height: 22px;
|
||||||
|
line-height: 22px;
|
||||||
|
padding-left: 5px;
|
||||||
|
width: 100%;
|
||||||
|
background-image: linear-gradient(to right, #a4e5da, #fff);
|
||||||
|
|
||||||
|
.info {
|
||||||
|
font-weight: normal;
|
||||||
|
display: flex;
|
||||||
|
font-size: 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.infoTop {
|
||||||
|
display: flex;
|
||||||
|
height: 50px;
|
||||||
|
padding-right: 10px;
|
||||||
|
.infoL {
|
||||||
|
width: 60px;
|
||||||
|
img {
|
||||||
|
width: 40px;
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.infoR {
|
||||||
|
flex: 1;
|
||||||
|
.top {
|
||||||
|
// margin-top: 2px;
|
||||||
|
height: 22px;
|
||||||
|
border-bottom: 2px solid #93dee2;
|
||||||
|
}
|
||||||
|
.bottom {
|
||||||
|
margin-top: 3px;
|
||||||
|
display: flex;
|
||||||
|
font-size: 12px;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.imgL {
|
||||||
|
position: absolute;
|
||||||
|
padding: 10px;
|
||||||
|
top: calc(50% - 80px);
|
||||||
|
right: -23px;
|
||||||
|
z-index: 1;
|
||||||
|
transform: rotate(180deg);
|
||||||
|
height: 200px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.show {
|
||||||
|
width: 0px;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.noshow {
|
||||||
|
width: 400px;
|
||||||
|
padding: 10px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
:deep(.el-card) {
|
||||||
|
--el-card-padding: 10px !important;
|
||||||
|
}
|
||||||
|
:deep(.el-table thead) {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
397
src/views/pqs/qualityInspeection/panorama/components/mapR.vue
Normal file
397
src/views/pqs/qualityInspeection/panorama/components/mapR.vue
Normal file
@@ -0,0 +1,397 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<DatePicker ref="datePickerRef" style="display: none" />
|
||||||
|
<div class="boxLeft" :class="show ? 'show' : 'noshow'" :style="height">
|
||||||
|
<!-- 综合评估 -->
|
||||||
|
<div>
|
||||||
|
<div class="title">
|
||||||
|
<span>综合评估</span>
|
||||||
|
<span class="info" @click="open(0)">
|
||||||
|
详情
|
||||||
|
<ArrowRight style="width: 12px" />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="evaluate">
|
||||||
|
<div v-for="item in evaluate" style="width: 40px">
|
||||||
|
<div>{{ item.name }}</div>
|
||||||
|
<div style="margin-top: 5px">{{ item.value }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 稳态电能质量水平评估 -->
|
||||||
|
<div>
|
||||||
|
<div class="title">
|
||||||
|
<span>稳态电能质量水平评估</span>
|
||||||
|
<span class="info" @click="open(1)">
|
||||||
|
详情
|
||||||
|
<ArrowRight style="width: 12px" />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div :style="boxHeight" class="boxR">
|
||||||
|
<div class="top">
|
||||||
|
<span>
|
||||||
|
监测点越限占比:
|
||||||
|
<span class="num">65%</span>
|
||||||
|
</span>
|
||||||
|
<el-select v-model="value" style="width: 120px" size="small">
|
||||||
|
<el-option
|
||||||
|
v-for="item in options"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
|
<MyEChart :style="EchHeight" :options="WTCharts" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 暂态电能质量水平评价 -->
|
||||||
|
<div>
|
||||||
|
<div class="title">
|
||||||
|
<span>暂态电能质量水平评价</span>
|
||||||
|
<span class="info" @click="open(2)">
|
||||||
|
详情
|
||||||
|
<ArrowRight style="width: 12px" />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div :style="boxHeight" class="boxR">
|
||||||
|
<div class="top">
|
||||||
|
<span>
|
||||||
|
暂态事件严重度:
|
||||||
|
<span class="num">65%</span>
|
||||||
|
</span>
|
||||||
|
<el-select v-model="value" style="width: 120px" size="small">
|
||||||
|
<el-option
|
||||||
|
v-for="item in options1"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
|
<MyEChart :style="EchHeight" :options="WTCharts" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 技术监督管理 -->
|
||||||
|
<div>
|
||||||
|
<div class="title">
|
||||||
|
<span>技术监督管理(问题数)</span>
|
||||||
|
<span class="info" @click="open(3)">
|
||||||
|
详情
|
||||||
|
<ArrowRight style="width: 12px" />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div :style="boxHeight" class="boxR">
|
||||||
|
<div class="evaluate bottom">
|
||||||
|
<div v-for="item in JDlist" style="width: 80px">
|
||||||
|
<div>{{ item.name }}</div>
|
||||||
|
<div style="margin-top: 5px">{{ item.value }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<el-row style="height: calc(100% - 62px)">
|
||||||
|
<el-col :span="12" class="col" style="border-right: 1px solid #ccc">
|
||||||
|
<div>
|
||||||
|
<span>异常问题总数：</span>
|
||||||
|
<span style="color: #2dcd28">60个</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span style="width: 120px">已关联工单数：</span>
|
||||||
|
<span style="color: #81b337">60个</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span style="width: 120px"> 工单转换率：</span>
|
||||||
|
<span style="color: #338dff">60%</span>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12" class="col">
|
||||||
|
<div>
|
||||||
|
<span>异常问题总数：</span>
|
||||||
|
<span style="color: #2dcd28">60个</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span style="width: 120px">已关联工单数：</span>
|
||||||
|
<span style="color: #81b337">60个</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span style="width: 120px"> 工单转换率：</span>
|
||||||
|
<span style="color: #338dff">60%</span>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<img
|
||||||
|
class="imgR"
|
||||||
|
:style="show ? 'transform: rotate(180deg);' : 'transform: rotate(0deg);'"
|
||||||
|
@click="show = !show"
|
||||||
|
src="@/assets/img/QH.png"
|
||||||
|
/>
|
||||||
|
<!-- 评估 -->
|
||||||
|
<Evaluate ref="evaluateRef" />
|
||||||
|
<!-- 稳态 -->
|
||||||
|
<steadyState ref="steadyStateRef" />
|
||||||
|
<!-- 暂态 -->
|
||||||
|
<temporaryState ref="temporaryStateRef" />
|
||||||
|
<!-- 技术 -->
|
||||||
|
<technique ref="techniqueRef" />
|
||||||
|
</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 { ArrowRight } from '@element-plus/icons-vue'
|
||||||
|
import Evaluate from './details/evaluate.vue'
|
||||||
|
import steadyState from './details/steadyState.vue'
|
||||||
|
import temporaryState from './details/temporaryState.vue'
|
||||||
|
import technique from './details/technique.vue'
|
||||||
|
import DatePicker from '@/components/form/datePicker/index.vue'
|
||||||
|
const dictData = useDictData()
|
||||||
|
const show = ref(false)
|
||||||
|
const height = mainHeight(30)
|
||||||
|
const boxHeight: any = mainHeight(270, 3)
|
||||||
|
const EchHeight: any = mainHeight(370, 3)
|
||||||
|
const evaluateRef = ref()
|
||||||
|
const steadyStateRef = ref()
|
||||||
|
const datePickerRef = ref()
|
||||||
|
const temporaryStateRef = ref()
|
||||||
|
const techniqueRef = ref()
|
||||||
|
const options = ref([
|
||||||
|
{
|
||||||
|
label: '电压偏差',
|
||||||
|
value: '1'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '频率偏差',
|
||||||
|
value: '2'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '电压总谐波畸变率',
|
||||||
|
value: '3'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '电压闪变',
|
||||||
|
value: '4'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '三相电压不平衡度',
|
||||||
|
value: '5'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
const options1 = ref([
|
||||||
|
{
|
||||||
|
label: '暂降',
|
||||||
|
value: '1'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '暂升',
|
||||||
|
value: '2'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '中断',
|
||||||
|
value: '3'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
const evaluate = ref([
|
||||||
|
{
|
||||||
|
name: '承德',
|
||||||
|
value: 5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '廊坊',
|
||||||
|
value: 5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '张家口',
|
||||||
|
value: 5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '秦皇岛',
|
||||||
|
value: 5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '唐山',
|
||||||
|
value: 5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '超高压',
|
||||||
|
value: 5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '风光储',
|
||||||
|
value: 5
|
||||||
|
}
|
||||||
|
])
|
||||||
|
const JDlist = ref([
|
||||||
|
{
|
||||||
|
name: '技术监督计划',
|
||||||
|
value: 5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '用户投诉',
|
||||||
|
value: 5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '谐波普测',
|
||||||
|
value: 5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '在线系统',
|
||||||
|
value: 5
|
||||||
|
}
|
||||||
|
])
|
||||||
|
const WTCharts = ref({
|
||||||
|
xAxis: {
|
||||||
|
name: '%',
|
||||||
|
type: 'value',
|
||||||
|
max: 100
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: ['承德', '廊坊', '唐山', '承德', '廊坊', '唐山']
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
top: '10px',
|
||||||
|
left: '30px',
|
||||||
|
right: '30px',
|
||||||
|
bottom: '0px'
|
||||||
|
},
|
||||||
|
|
||||||
|
options: {
|
||||||
|
dataZoom: null,
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '占比',
|
||||||
|
type: 'bar',
|
||||||
|
data: [3, 4, 5, 3, 4, 5],
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'right',
|
||||||
|
fontSize: 12,
|
||||||
|
formatter: function (params: any) {
|
||||||
|
return `${params.value}%`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const value = ref('')
|
||||||
|
const open = (e: number) => {
|
||||||
|
if (e == 0) {
|
||||||
|
evaluateRef.value.open()
|
||||||
|
} else if (e == 1) {
|
||||||
|
steadyStateRef.value.open()
|
||||||
|
} else if (e == 2) {
|
||||||
|
temporaryStateRef.value.open()
|
||||||
|
} else if (e == 3) {
|
||||||
|
techniqueRef.value.open()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const info = (row: any) => {
|
||||||
|
let form = {
|
||||||
|
id: row.orgNo,
|
||||||
|
deptIndex: row.orgNo,
|
||||||
|
orgId: row.orgNo,
|
||||||
|
ids: [],
|
||||||
|
statisticalType: dictData.getBasicData('Statistical_Type', ['Report_Type'])[0],
|
||||||
|
isUpToGrid: row.isUpToGrid,
|
||||||
|
startTime: datePickerRef.value.timeValue[0],
|
||||||
|
searchBeginTime: datePickerRef.value.timeValue[0],
|
||||||
|
endTime: datePickerRef.value.timeValue[1],
|
||||||
|
searchEndTime: datePickerRef.value.timeValue[1],
|
||||||
|
type: datePickerRef.value.interval
|
||||||
|
}
|
||||||
|
}
|
||||||
|
defineExpose({ info })
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.boxLeft {
|
||||||
|
background-color: #fff;
|
||||||
|
width: 400px;
|
||||||
|
padding: 10px;
|
||||||
|
font-size: 13px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
// height: ;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-weight: 550;
|
||||||
|
height: 22px;
|
||||||
|
line-height: 22px;
|
||||||
|
padding-left: 5px;
|
||||||
|
width: 100%;
|
||||||
|
background-image: linear-gradient(to right, #a4e5da, #fff);
|
||||||
|
|
||||||
|
.info {
|
||||||
|
font-weight: normal;
|
||||||
|
display: flex;
|
||||||
|
font-size: 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.evaluate {
|
||||||
|
height: 60px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
margin: 10px 0;
|
||||||
|
padding: 10px 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.boxR {
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
margin: 10px 0;
|
||||||
|
padding: 5px;
|
||||||
|
.num {
|
||||||
|
color: #2478f2;
|
||||||
|
}
|
||||||
|
.top {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.bottom {
|
||||||
|
margin: 0;
|
||||||
|
border: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:deep(.el-select) {
|
||||||
|
min-width: 120px;
|
||||||
|
}
|
||||||
|
.col {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.imgR {
|
||||||
|
position: absolute;
|
||||||
|
padding: 10px;
|
||||||
|
top: calc(50% - 80px);
|
||||||
|
left: -23px;
|
||||||
|
z-index: 1;
|
||||||
|
height: 200px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.show {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
width: 0px;
|
||||||
|
padding: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.noshow {
|
||||||
|
width: 400px;
|
||||||
|
padding: 10px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
135
src/views/pqs/qualityInspeection/panorama/index.vue
Normal file
135
src/views/pqs/qualityInspeection/panorama/index.vue
Normal file
@@ -0,0 +1,135 @@
|
|||||||
|
<template>
|
||||||
|
<div class="default-main" :style="height">
|
||||||
|
<div class="box">
|
||||||
|
<el-form :inline="true" :model="form" class="demo-form-inline">
|
||||||
|
<el-form-item>
|
||||||
|
<el-input v-model="form.name" placeholder="请输入设备名称" :suffix-icon="Search">
|
||||||
|
<template #prefix>
|
||||||
|
<img style="width: 30px" src="@/assets//img/GJDW.png" alt="" />
|
||||||
|
</template>
|
||||||
|
</el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<Area
|
||||||
|
ref="areaRef"
|
||||||
|
:show-all-levels="false"
|
||||||
|
v-model="form.orgNo"
|
||||||
|
style="width: 100px"
|
||||||
|
@changeName="changeName"
|
||||||
|
/>
|
||||||
|
</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>
|
||||||
|
<el-button icon="el-icon-Refresh" @click="reset"></el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 地图 -->
|
||||||
|
<!-- <Map /> -->
|
||||||
|
|
||||||
|
<!-- 左边 -->
|
||||||
|
<mapL ref="mapLRef" class="mapL" />
|
||||||
|
|
||||||
|
<!-- 右边 -->
|
||||||
|
<mapR ref="mapRRef" class="mapR" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { onMounted, reactive, 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'
|
||||||
|
const dictData = useDictData()
|
||||||
|
defineOptions({
|
||||||
|
name: '/panorama'
|
||||||
|
})
|
||||||
|
|
||||||
|
const areaRef = ref()
|
||||||
|
const mapLRef = ref()
|
||||||
|
const mapRRef = ref()
|
||||||
|
const options: any = ref([
|
||||||
|
{
|
||||||
|
name: dictData.state.area[0].name,
|
||||||
|
id: 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '上送国网',
|
||||||
|
id: 1
|
||||||
|
}
|
||||||
|
])
|
||||||
|
const form = ref({
|
||||||
|
name: '',
|
||||||
|
orgNo: dictData.state.area[0].id,
|
||||||
|
isUpToGrid: 0
|
||||||
|
})
|
||||||
|
|
||||||
|
const height = mainHeight(10)
|
||||||
|
const changeName = (e: any) => {
|
||||||
|
options.value[0].name = e
|
||||||
|
|
||||||
|
info()
|
||||||
|
}
|
||||||
|
const reset = () => {
|
||||||
|
form.value = {
|
||||||
|
name: '',
|
||||||
|
orgNo: dictData.state.area[0].id,
|
||||||
|
isUpToGrid: 0
|
||||||
|
}
|
||||||
|
info()
|
||||||
|
}
|
||||||
|
const info = () => {
|
||||||
|
mapLRef.value.info(form.value)
|
||||||
|
mapRRef.value.info(form.value)
|
||||||
|
}
|
||||||
|
onMounted(() => {
|
||||||
|
info()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
:deep(.box) {
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
left: 30%;
|
||||||
|
z-index: 1;
|
||||||
|
.el-select {
|
||||||
|
min-width: 100px;
|
||||||
|
}
|
||||||
|
.el-form-item {
|
||||||
|
margin-right: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.mapL {
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
left: 10px;
|
||||||
|
}
|
||||||
|
.mapR {
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
right: 10px;
|
||||||
|
}
|
||||||
|
.default-main {
|
||||||
|
margin: 10px 0 0 0;
|
||||||
|
}
|
||||||
|
.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>
|
||||||
Reference in New Issue
Block a user