@@ -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 }}
+
@@ -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 @@
