监测终端状态
-
+ 
+ 终端在线率：
+ {{ onlineRate }}%
+
+
+ 终端在线率：
+ {{ onlineRate }}%
+
@@ -46,16 +50,19 @@
diff --git a/src/views/pqs/qualityInspeection/panorama/components/mapL.vue b/src/views/pqs/qualityInspeection/panorama/components/mapL.vue
index 52204711..1d01e930 100644
--- a/src/views/pqs/qualityInspeection/panorama/components/mapL.vue
+++ b/src/views/pqs/qualityInspeection/panorama/components/mapL.vue
@@ -3,7 +3,13 @@
- {{ item.title }}
+
+ {{ item.title }}
+
+ {{item.ratioTitle}}:
+ {{ item.ratio }}%
+
+
详情
-
-
- ![]()
- {{ item.titleT[0] }}：
-
- {{ item.list[4].numOne }}
-
-
-
- ![]()
- {{ item.titleT[1] }}：
-
- {{ item.list[4].numTwo }}
-
-
-
+
+ ![]()
+ {{ item.titleT[0] }}：
+
+ {{ item.list[4].numOne }}
+
+
+
+ ![]()
+ {{ item.titleT[1] }}：
+
+ {{ item.list[4].numTwo }}
+
+
+
+ ![]()
+ {{ item.titleT[2] }}：
+
+ {{ item.list[5].numOne }}
+
+
@@ -132,18 +146,73 @@ 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 emit = defineEmits(['LookMap'])
+import {
+ getSubLineGiveAnAlarm,
+ getGridDiagramMonitor,
+ getGridDiagramDev,
+ getGridDiagramAreaData
+} from '@/api/device-boot/panorama'
+const emit = defineEmits(['LookMap', 'GridDiagram'])
const dictData = useDictData()
const show = ref(false)
const standRef = ref()
const terminalRef = ref()
const pointRef = ref()
const list: any = ref([
+ {
+ title: '监测点',
+ img: [
+ new URL(`@/assets/img/JCD-ZS.png`, import.meta.url),
+ new URL(`@/assets/img/JCD-ZX.png`, import.meta.url),
+ new URL(`@/assets/img/JCD-GJ.png`, import.meta.url)
+ ],
+ ratioTitle:'告警率',
+ ratio: 0,
+ titleT: ['总数', '在线', '告警'],
+ color: ['#000', '#2dcd28', '#bd3124'],
+ list: [
+ {
+ numOne: 0,
+ numTwo: 0,
+ numOneList: [],
+ numTwoList: []
+ },
+ {
+ numOne: 0,
+ numTwo: 0,
+ numOneList: [],
+ numTwoList: []
+ },
+ {
+ numOne: 0,
+ numTwo: 0,
+ numOneList: [],
+ numTwoList: []
+ },
+ {
+ numOne: 0,
+ numTwo: 0,
+ numOneList: [],
+ numTwoList: []
+ },
+ {
+ numOne: 0,
+ numTwo: 0,
+ numOneList: [],
+ numTwoList: []
+ },
+ {
+ numOne: 0,
+ numOneList: []
+ }
+ ]
+ },
{
title: '变电站',
img: [new URL(`@/assets/img/BDZ-ZS.png`, import.meta.url), new URL(`@/assets/img/BDZ-GJ.png`, import.meta.url)],
color: ['#000', '#bd3124'],
+ ratioTitle:'告警率',
+ ratio: 0,
titleT: ['总数', '告警'],
list: [
{
@@ -181,45 +250,9 @@ const list: any = ref([
{
title: '终端',
img: [new URL(`@/assets/img/ZD-ZS.png`, import.meta.url), new URL(`@/assets/img/ZD-ZX.png`, import.meta.url)],
- titleT: ['总数', '在线'],
- color: ['#000', '#2dcd28'],
- list: [
- {
- numOne: 0,
- numTwo: 0,
- numOneList: [],
- numTwoList: []
- },
- {
- numOne: 0,
- numTwo: 0,
- numOneList: [],
- numTwoList: []
- },
- {
- numOne: 0,
- numTwo: 0,
- numOneList: [],
- numTwoList: []
- },
- {
- numOne: 0,
- numTwo: 0,
- numOneList: [],
- numTwoList: []
- },
- {
- numOne: 0,
- numTwo: 0,
- numOneList: [],
- numTwoList: []
- }
- ]
- },
- {
- title: '监测点',
- img: [new URL(`@/assets/img/JCD-ZS.png`, import.meta.url), new URL(`@/assets/img/JCD-ZX.png`, import.meta.url)],
- titleT: ['总数', '在线'],
+ titleT: ['总数', '在运'],
+ ratioTitle:'在运率',
+ ratio: 0,
color: ['#000', '#2dcd28'],
list: [
{
@@ -269,7 +302,7 @@ const open = (e: any) => {
pointRef.value.open(formRow.value)
}
}
-const info = (row: any) => {
+const info = async (row: any) => {
let form = {
...row,
id: row.orgNo,
@@ -281,21 +314,11 @@ const info = (row: any) => {
monitorFlag: row.isUpToGrid == 0 ? null : row.isUpToGrid
}
formRow.value = form
- // 变电站
- getSubLineGiveAnAlarm(form).then(res => {
- let data = row.isUpToGrid == 1 ? res.data.gwInfo : res.data.info
- list.value[0].list = data[0].data
- })
- // 终端
- getGridDiagramDev(form).then(res => {
- let data = row.isUpToGrid == 1 ? res.data.gwInfo : res.data.info
- list.value[1].list = data[0].data
- })
// 监测点
- getGridDiagramMonitor(form).then(res => {
+ await getGridDiagramMonitor(form).then(res => {
let data = row.isUpToGrid == 1 ? res.data.gwInfo : res.data.info
- list.value[2].list = data[0].data.map((item: any) => {
+ list.value[0].list = data[0].data.map((item: any) => {
return {
numOne: item.num,
numTwo: item.onLineNum,
@@ -303,6 +326,39 @@ const info = (row: any) => {
numTwoList: item.onLineNumList
}
})
+
+ list.value[0].list.push({
+ numOne: 0,
+ numOneList: []
+ })
+ })
+ getGridDiagramAreaData(form).then((res: any) => {
+ let numOne = 0
+ let numOneList: any = []
+
+ res.data.forEach((item: any) => {
+ numOne = numOne + item.alarm
+ numOneList.push(...item.alarmList)
+ })
+
+ list.value[0].list[5] = {
+ numOne: numOne,
+ numOneList: numOneList
+ }
+ list.value[0].ratio = ((list.value[0].list[5].numOne / list.value[0].list[4].numOne) * 100).toFixed(2)
+ })
+ // 变电站
+ getSubLineGiveAnAlarm(form).then(res => {
+ let data = row.isUpToGrid == 1 ? res.data.gwInfo : res.data.info
+ list.value[1].list = data[0].data
+
+ list.value[1].ratio = ((list.value[1].list[4].numTwo / list.value[1].list[4].numOne) * 100).toFixed(2)
+ })
+ // 终端
+ getGridDiagramDev(form).then(res => {
+ let data = row.isUpToGrid == 1 ? res.data.gwInfo : res.data.info
+ list.value[2].list = data[0].data
+ list.value[2].ratio = ((list.value[2].list[4].numTwo / list.value[2].list[4].numOne) * 100).toFixed(2)
})
}
// 点击
@@ -314,6 +370,9 @@ const LookMap = (coutList: object, alarmList: object, key?: any) => {
}
emit('LookMap', form, key)
}
+const GridDiagram = (k: any) => {
+ emit('GridDiagram', k)
+}
onMounted(() => {})
defineExpose({ info, show })
@@ -336,8 +395,9 @@ defineExpose({ info, show })
margin-top: 10px;
width: 48%;
margin-right: 2%;
-
+ display: flex;
.cor {
+ flex: 1;
display: flex;
align-items: center;
font-size: 12px;
@@ -405,6 +465,9 @@ defineExpose({ info, show })
width: 100%;
font-weight: 550;
+ span:nth-child(1) {
+ cursor: pointer;
+ }
.info {
font-weight: normal;
display: flex;
@@ -412,6 +475,11 @@ defineExpose({ info, show })
cursor: pointer;
color: #757575;
}
+ .ratio {
+ font-weight: 500;
+ font-size: 12px;
+ line-height: 12px;
+ }
}
.imgL {
diff --git a/src/views/pqs/qualityInspeection/panorama/components/mapR.vue b/src/views/pqs/qualityInspeection/panorama/components/mapR.vue
index b8a5ec2a..49b78204 100644
--- a/src/views/pqs/qualityInspeection/panorama/components/mapR.vue
+++ b/src/views/pqs/qualityInspeection/panorama/components/mapR.vue
@@ -16,22 +16,26 @@
综合评估得分：
- {{assessList.score}}
+
+ {{ assessList.score }}
+
综合评估得分：
- {{assessList.score}}
+
+ {{ assessList.score }}
+
@@ -79,7 +83,7 @@
- 监测点越限占比:
+ 监测点越限占比：
{{ harmonicLineRatio == 3.14159 ? '0' : harmonicLineRatio + '%' }}
@@ -120,8 +124,10 @@
- 暂态事件严重度：
- {{ transientNum }}%
+ 严重度 90%:
+ {{ transientNum[0] }}
+ 50%:
+ {{ transientNum[1] }}
@@ -230,6 +236,7 @@ const steadyStateRef = ref()
const formRow: any = ref({})
const temporaryStateRef = ref()
const techniqueRef = ref()
+const mun = ref(0)
const options = ref([
{
label: '全指标',
@@ -257,7 +264,7 @@ const options = ref([
}
])
const harmonicType = ref('0')
-const transientNum = ref(0)
+const transientNum = ref([0, 0])
const options1: any = dictData.getBasicData('Event_Statis').filter(item => {
if (item.code == 'Voltage_Dip' || item.code == 'Voltage_Rise' || item.code == 'Short_Interruptions') {
return item
@@ -326,109 +333,25 @@ const harmonicChange = () => {
item.ratio = item.ratio == 3.14159 ? 0 : item.ratio
return item
})
-
- // harmonicList.value = {
- // tooltip: {
- // formatter: function (params: any) {
- // return params[0].name + ':' + (params[0].value == 3.14159 ? '暂无数据' : params[0].value) + '%
' - // } - // }, - // xAxis: { - // name: '%', - // type: 'value', - // max: 100 - // }, - // legend: { - // show: false - // }, - // yAxis: { - // type: 'category', - // data: res.data.childrenList.map((item: any) => item.deptName) - // }, - // grid: { - // top: '10px', - // left: '30px', - // right: '30px', - // bottom: '0px' - // }, - - // options: { - // dataZoom: null, - // series: [ - // { - // name: '占比', - // type: 'bar', - // data: res.data.childrenList.map((item: any) => item.ratio), - // label: { - // show: true, - // position: 'right', - // fontSize: 12, - // formatter: function (params: any) { - // return `${params.value == 3.14159 ? '' : params.value}` - // } - // } - // } - // ] - // } - // } }) } const transientChange = () => { getEventLevelEvaluation({ ...formRow.value, ids: [value.value] }).then(res => { let data = [] - transientNum.value = 0 + transientNum.value = [0, 0] if (formRow.value.isUpToGrid == 0) { data = res.data.info - transientNum.value = res.data.data.toFixed(2) + transientNum.value = res.data.data } else { - transientNum.value = res.data.gwData.toFixed(2) + transientNum.value = res.data.gwData data = res.data.gwInfo } + WTList.value = [] + mun.value = Math.max(...data.map((item: any) => item.count)) - 0 + data.forEach((item: any) => { + item.count = item.count == 0 ? 0 : Number(((item.count / mun.value) * 100).toFixed(2)) + }) WTList.value = data - // WTList.value = { - // tooltip: { - // formatter: function (params: any) { - // return params[0].name + ':' + (params[0].value == 3.14159 ? '暂无数据' : params[0].value) + '%
' - // } - // }, - // xAxis: { - // name: '%', - // type: 'value', - // max: 100 - // }, - // legend: { - // show: false - // }, - // yAxis: { - // type: 'category', - // data: data.map((item: any) => item.orgName) - // }, - // grid: { - // top: '10px', - // left: '30px', - // right: '30px', - // bottom: '0px' - // }, - - // options: { - // dataZoom: null, - // series: [ - // { - // name: '占比', - // type: 'bar', - // data: data.map((item: any) => item.count), - // label: { - // show: true, - // position: 'right', - // fontSize: 12, - // formatter: function (params: any) { - // return `${params.value}` - // } - // } - // } - // ] - // } - // } }) } defineExpose({ info, show }) diff --git a/src/views/pqs/qualityInspeection/panorama/components/style/map.scss b/src/views/pqs/qualityInspeection/panorama/components/style/map.scss new file mode 100644 index 00000000..8a9d44ff --- /dev/null +++ b/src/views/pqs/qualityInspeection/panorama/components/style/map.scss @@ -0,0 +1,196 @@ +.query-box-wrap { + position: absolute; + top: 10px; + left: calc(50% - 305px); + border-radius: 8px; + overflow: hidden; + .Icon { + width: 30px; + height: 30px; + background-image: url('@/assets/icons/国网.svg'); + } + .el-input__icon { + font-size: 20px; + color: #000; + cursor: pointer; + } + .el-input { + font-size: 16px; + } +} +.collapse { + top: 65px; + .collapse_none { + height: 44px; + width: 334px; + text-align: center; + line-height: 44px; + background-color: #fff; + } + .collapseBox { + max-height: 240px; + overflow-y: auto; + .group-list__item { + height: 55px; + padding: 5px 12px; + border-bottom: 1px solid #e4e7ed; + display: grid; + grid-auto-rows: 1fr 1fr; + cursor: pointer; + p:nth-child(1) { + font-weight: 600; + font-size: 14px; + display: inline-block; + width: 300px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + -webkit-box-orient: vertical; + } + p:nth-child(2) { + font-size: 12px; + } + &:hover { + background-color: #009ea81a; + } + } + } +} +:deep(.el-collapse-item__header) { + height: 32px; + border-bottom: 1px solid #e4e7ed; + background-color: #f7fafd; + padding-left: 10px; + font-weight: 600; +} + +:deep(.province-selector) { + position: absolute; + top: 10px; + left: 50%; + .distribution__body { + height: auto; + } + .province-selector__options { + height: auto; + } + .province-op { + width: 48%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + .province-selector__button { + width: 100px; + padding: 4px 12px; + span { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + } + .province-selector__options { + z-index: 1; + } +} +:deep(.sgmap-canvas) { + width: 100% !important; +} +:deep(.my-popup) { + max-width: 400px !important; + .popup-box { + width: 300px; + height: 70px; + .popup_content { + display: grid; + grid-template-columns: 50px 1fr; + img { + width: 42px; + height: 42px; + } + .title { + font-weight: 550; + } + .state { + width: 45px; + margin-left: 5px; + text-align: center; + border-radius: 3px; + color: #fff; + } + .info { + color: #18181b99; + margin: 5px 0; + span { + display: inline-block; + width: 120px; + height: 14px; + line-height: 14px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + -webkit-box-orient: vertical; + &::after { + display: inline-block; + margin: 0 3px; + content: ' '; + width: 2px; + height: 11px; + background: #e5e6eb73; + vertical-align: middle; + } + } + } + } + .popup_footer { + padding: 5px 5px; + border-top: 1px solid #e5e6eb; + color: var(--el-color-primary); + span { + margin-right: 8px; + cursor: pointer; + } + } + } + .sgmap-popup-content { + padding: 15px 10px 10px !important; + } + .sgmap-popup-close-button { + position: absolute; + right: 5px; + top: 5px; + font-size: 16px; + } +} +:deep(.my-radiusPop) { + .sgmap-popup-tip { + display: none; + } + .sgmap-popup-content { + width: 200px; + height: 50px; + border-radius: 5px; + padding: 5px 5px !important; + background-color: #00000000; + color: #fff; + } + img { + height: 40px; + margin-right: 10px; + } + .infoBox { + flex: 1; + display: flex; + justify-content: space-around; + text-align: center; + } +} + +#nrDeviceCard { + position: absolute; + top: 11px; + right: 70px; + width: 450px; + z-index: 0; +} diff --git a/src/views/pqs/qualityInspeection/panorama/index.vue b/src/views/pqs/qualityInspeection/panorama/index.vue index 76de751c..b9ae3de2 100644 --- a/src/views/pqs/qualityInspeection/panorama/index.vue +++ b/src/views/pqs/qualityInspeection/panorama/index.vue @@ -19,7 +19,7 @@
@@ -30,7 +30,7 @@
- 监测点越限占比:
+ 监测点越限占比：
{{ harmonicLineRatio == 3.14159 ? '0' : harmonicLineRatio + '%' }}
@@ -120,8 +124,10 @@
- 暂态事件严重度：
- {{ transientNum }}%
+ 严重度 90%:
+ {{ transientNum[0] }}
+ 50%:
+ {{ transientNum[1] }}
' - // } - // }, - // xAxis: { - // name: '%', - // type: 'value', - // max: 100 - // }, - // legend: { - // show: false - // }, - // yAxis: { - // type: 'category', - // data: res.data.childrenList.map((item: any) => item.deptName) - // }, - // grid: { - // top: '10px', - // left: '30px', - // right: '30px', - // bottom: '0px' - // }, - - // options: { - // dataZoom: null, - // series: [ - // { - // name: '占比', - // type: 'bar', - // data: res.data.childrenList.map((item: any) => item.ratio), - // label: { - // show: true, - // position: 'right', - // fontSize: 12, - // formatter: function (params: any) { - // return `${params.value == 3.14159 ? '' : params.value}` - // } - // } - // } - // ] - // } - // } }) } const transientChange = () => { getEventLevelEvaluation({ ...formRow.value, ids: [value.value] }).then(res => { let data = [] - transientNum.value = 0 + transientNum.value = [0, 0] if (formRow.value.isUpToGrid == 0) { data = res.data.info - transientNum.value = res.data.data.toFixed(2) + transientNum.value = res.data.data } else { - transientNum.value = res.data.gwData.toFixed(2) + transientNum.value = res.data.gwData data = res.data.gwInfo } + WTList.value = [] + mun.value = Math.max(...data.map((item: any) => item.count)) - 0 + data.forEach((item: any) => { + item.count = item.count == 0 ? 0 : Number(((item.count / mun.value) * 100).toFixed(2)) + }) WTList.value = data - // WTList.value = { - // tooltip: { - // formatter: function (params: any) { - // return params[0].name + ':' + (params[0].value == 3.14159 ? '暂无数据' : params[0].value) + '%
' - // } - // }, - // xAxis: { - // name: '%', - // type: 'value', - // max: 100 - // }, - // legend: { - // show: false - // }, - // yAxis: { - // type: 'category', - // data: data.map((item: any) => item.orgName) - // }, - // grid: { - // top: '10px', - // left: '30px', - // right: '30px', - // bottom: '0px' - // }, - - // options: { - // dataZoom: null, - // series: [ - // { - // name: '占比', - // type: 'bar', - // data: data.map((item: any) => item.count), - // label: { - // show: true, - // position: 'right', - // fontSize: 12, - // formatter: function (params: any) { - // return `${params.value}` - // } - // } - // } - // ] - // } - // } }) } defineExpose({ info, show }) diff --git a/src/views/pqs/qualityInspeection/panorama/components/style/map.scss b/src/views/pqs/qualityInspeection/panorama/components/style/map.scss new file mode 100644 index 00000000..8a9d44ff --- /dev/null +++ b/src/views/pqs/qualityInspeection/panorama/components/style/map.scss @@ -0,0 +1,196 @@ +.query-box-wrap { + position: absolute; + top: 10px; + left: calc(50% - 305px); + border-radius: 8px; + overflow: hidden; + .Icon { + width: 30px; + height: 30px; + background-image: url('@/assets/icons/国网.svg'); + } + .el-input__icon { + font-size: 20px; + color: #000; + cursor: pointer; + } + .el-input { + font-size: 16px; + } +} +.collapse { + top: 65px; + .collapse_none { + height: 44px; + width: 334px; + text-align: center; + line-height: 44px; + background-color: #fff; + } + .collapseBox { + max-height: 240px; + overflow-y: auto; + .group-list__item { + height: 55px; + padding: 5px 12px; + border-bottom: 1px solid #e4e7ed; + display: grid; + grid-auto-rows: 1fr 1fr; + cursor: pointer; + p:nth-child(1) { + font-weight: 600; + font-size: 14px; + display: inline-block; + width: 300px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + -webkit-box-orient: vertical; + } + p:nth-child(2) { + font-size: 12px; + } + &:hover { + background-color: #009ea81a; + } + } + } +} +:deep(.el-collapse-item__header) { + height: 32px; + border-bottom: 1px solid #e4e7ed; + background-color: #f7fafd; + padding-left: 10px; + font-weight: 600; +} + +:deep(.province-selector) { + position: absolute; + top: 10px; + left: 50%; + .distribution__body { + height: auto; + } + .province-selector__options { + height: auto; + } + .province-op { + width: 48%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + .province-selector__button { + width: 100px; + padding: 4px 12px; + span { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + } + .province-selector__options { + z-index: 1; + } +} +:deep(.sgmap-canvas) { + width: 100% !important; +} +:deep(.my-popup) { + max-width: 400px !important; + .popup-box { + width: 300px; + height: 70px; + .popup_content { + display: grid; + grid-template-columns: 50px 1fr; + img { + width: 42px; + height: 42px; + } + .title { + font-weight: 550; + } + .state { + width: 45px; + margin-left: 5px; + text-align: center; + border-radius: 3px; + color: #fff; + } + .info { + color: #18181b99; + margin: 5px 0; + span { + display: inline-block; + width: 120px; + height: 14px; + line-height: 14px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + -webkit-box-orient: vertical; + &::after { + display: inline-block; + margin: 0 3px; + content: ' '; + width: 2px; + height: 11px; + background: #e5e6eb73; + vertical-align: middle; + } + } + } + } + .popup_footer { + padding: 5px 5px; + border-top: 1px solid #e5e6eb; + color: var(--el-color-primary); + span { + margin-right: 8px; + cursor: pointer; + } + } + } + .sgmap-popup-content { + padding: 15px 10px 10px !important; + } + .sgmap-popup-close-button { + position: absolute; + right: 5px; + top: 5px; + font-size: 16px; + } +} +:deep(.my-radiusPop) { + .sgmap-popup-tip { + display: none; + } + .sgmap-popup-content { + width: 200px; + height: 50px; + border-radius: 5px; + padding: 5px 5px !important; + background-color: #00000000; + color: #fff; + } + img { + height: 40px; + margin-right: 10px; + } + .infoBox { + flex: 1; + display: flex; + justify-content: space-around; + text-align: center; + } +} + +#nrDeviceCard { + position: absolute; + top: 11px; + right: 70px; + width: 450px; + z-index: 0; +} diff --git a/src/views/pqs/qualityInspeection/panorama/index.vue b/src/views/pqs/qualityInspeection/panorama/index.vue index 76de751c..b9ae3de2 100644 --- a/src/views/pqs/qualityInspeection/panorama/index.vue +++ b/src/views/pqs/qualityInspeection/panorama/index.vue @@ -19,7 +19,7 @@
-
-
@@ -48,7 +48,7 @@