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

修改异常数据页面、修改有功功率趋势分析页面接口

Browse Source
This commit is contained in:
GGJ
2025-04-08 16:33:07 +08:00
parent 69aece65c1
commit 3d5c73b268
20 changed files with 2605 additions and 879 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@@ -12,7 +12,6 @@
},
"dependencies": {
"@ant-design/colors": "^7.0.2",
"@element-plus/icons-vue": "^2.3.1",
"@form-create/designer": "^3.1.3",
"@form-create/element-ui": "^3.1.24",
@@ -39,7 +38,7 @@
"echarts-gl": "^2.0.9",
"echarts-liquidfill": "^3.1.0",
"echarts4": "npm:echarts@^4.9.0",
"element-plus": "^2.7.2",
"element-plus": "^2.8.7",
"exceljs": "^4.4.0",
"file-saver": "^2.0.5",
"html2canvas": "^1.4.1",

40
src/api/device-boot/dataVerify.ts
View File

@@ -8,3 +8,43 @@ export function getMonitorVerifyDay(data:any) {
data
})
}
// 异常-弹框-获取异常监测点列表
export function monitorAbnormalTable(data:any) {
return request({
url: '/device-boot/dataVerify/monitorAbnormalTable',
method: 'post',
data
})
}
// 弹框-获取异常监测点列表详情
export function monitorAbnormalTableDetail(data:any) {
return request({
url: '/device-boot/dataVerify/monitorAbnormalTableDetail',
method: 'post',
data
})
}
// 更新按钮-获取稳态告警数据
export function getMonitorLimitDataDay(data:any) {
return request({
url: '/device-boot/dataVerify/getMonitorLimitDataDay',
method: 'post',
data
})
}
// 弹框-获取稳态告警监测点列表
export function monitorLimitTable(data:any) {
return request({
url: '/device-boot/dataVerify/monitorLimitTable',
method: 'post',
data
})
}
// 弹框-获取稳态告警监测点列表详情
export function monitorLimitTableDetail(data:any) {
return request({
url: '/device-boot/dataVerify/monitorLimitTableDetail',
method: 'post',
data
})
}

7
src/api/harmonic-boot/pollution.ts
View File

@@ -7,3 +7,10 @@ export function getSteadyData(data: any) {
data: data
})
}
export function getTargetByTime(data: any) {
return request({
url: '/harmonic-boot/powerStatistics/getTargetByTime',
method: 'post',
data: data
})
}

2
src/components/echarts/color.ts
View File

@@ -8,7 +8,7 @@ export let color = [
'#FF9100',
'#5B6E96',
'#66FFCC',
'#B3B3B3'
'#B3B'
]
export const gradeColor3 = ['#339966', '#FFCC33', '#CC0000']
export const gradeColor5 = ['#00CC00', '#99CC99', '#FF9900', '#996600', '#CC0000']

5
src/components/table/index.vue
View File

@@ -170,10 +170,5 @@ defineExpose({
border-bottom: 1px solid #e4e7e9;
}
:deep(.el-pagination__sizes) {
.el-select {
min-width: 128px;
}
}
</style>
<!-- @/components/table/column/GroupColumn.vue@/components/table/column/GroupColumn.vue -->

25
src/components/tree/pqs/bearingTree.vue
View File

@@ -80,16 +80,35 @@ const loadData = () => {
item4.icon = 'el-icon-OfficeBuilding'
item4.color = config.getColorVal('elementUiPrimary')
item4.children.forEach((item5: anyObj) => {
if (item5.level == 7) {
item5.icon = 'el-icon-DataAnalysis'
item5.color = config.getColorVal('elementUiPrimary')
item5.children.forEach((item6: anyObj) => {
item6.alias = `${item.name}>${item2.name}>${item3.name}>${item4.name}>${item5.name}>${item6.name}`
item6.pid = item4.id
item6.icon = 'fa-solid fa-location-dot'
item6.color = config.getColorVal('elementUiPrimary')
if (item6.comFlag == 0) {
item6.color = 'red !important'
} else if (item6.comFlag == 1) {
item6.color = '#00f93b !important'
} else if (item6.comFlag == 2) {
item6.color = '#8c8c8c !important'
}
})
} else {
item5.alias = `${item.name}>${item2.name}>${item3.name}>${item4.name}>${item5.name}`
item5.pid = item4.id
item5.icon = 'fa-solid fa-location-dot'
item5.color = config.getColorVal('elementUiPrimary')
if (item5.comFlag === 0) {
if (item5.comFlag == 0) {
item5.color = 'red !important'
} else if (item5.comFlag === 1) {
} else if (item5.comFlag == 1) {
item5.color = '#00f93b !important'
} else if (item5.comFlag === 2) {
} else if (item5.comFlag == 2) {
item5.color = '#8c8c8c !important'
}
}
})
})
})

47
src/components/tree/pqs/pointTree.vue
View File

@@ -1,9 +1,18 @@
<template>
<div class="point-tree">
<el-select v-model="formData.statisticalType" placeholder="请选择" style="min-width: unset; padding: 10px 10px 0"
@change="loadData" v-if="props.showSelect">
<el-option v-for="item in classificationData" :key="item.id" :label="item.name"
:value="item.id"></el-option>
<el-select
v-model="formData.statisticalType"
placeholder="请选择"
style="min-width: unset; padding: 10px 10px 0"
@change="loadData"
v-if="props.showSelect"
>
<el-option
v-for="item in classificationData"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
<div style="flex: 1; overflow: hidden">
<Tree ref="treeRef" :data="tree" style="width: 100%; height: 100%" :canExpand="false" v-bind="$attrs" />
@@ -24,13 +33,9 @@ defineOptions({
})
interface Props {
showSelect?: boolean
}
const props = withDefaults(defineProps<Props>(), {
showSelect: true,
showSelect: true
})
const emit = defineEmits(['init'])
const attrs = useAttrs()
@@ -82,17 +87,35 @@ const loadData = () => {
item4.icon = 'el-icon-OfficeBuilding'
item4.color = config.getColorVal('elementUiPrimary')
item4.children.forEach((item5: anyObj) => {
if (item5.level == 7) {
item5.icon = 'el-icon-DataAnalysis'
item5.color = config.getColorVal('elementUiPrimary')
item5.children.forEach((item6: anyObj) => {
item6.alias = `${item.name}>${item2.name}>${item3.name}>${item4.name}>${item5.name}>${item6.name}`
item6.pid = item4.id
item6.icon = 'fa-solid fa-location-dot'
item6.color = config.getColorVal('elementUiPrimary')
if (item6.comFlag == 0) {
item6.color = 'red !important'
} else if (item6.comFlag == 1) {
item6.color = '#00f93b !important'
} else if (item6.comFlag == 2) {
item6.color = '#8c8c8c !important'
}
})
} else {
item5.alias = `${item.name}>${item2.name}>${item3.name}>${item4.name}>${item5.name}`
item5.pid = item4.id
item5.icon = 'fa-solid fa-location-dot'
item5.color = config.getColorVal('elementUiPrimary')
if (item5.comFlag === 0) {
if (item5.comFlag == 0) {
item5.color = 'red !important'
} else if (item5.comFlag === 1) {
} else if (item5.comFlag == 1) {
item5.color = '#00f93b !important'
} else if (item5.comFlag === 2) {
} else if (item5.comFlag == 2) {
item5.color = '#8c8c8c !important'
}
}
})
})
})

5
src/styles/element.scss
View File

@@ -218,3 +218,8 @@
.el-drawer__header {
margin-bottom: 0 !important;
}
.el-pagination__sizes {
.el-select {
min-width: 128px;
}
}

2
src/views/LN/newEnergy/highAndLowPressure/index.vue
View File

@@ -298,7 +298,7 @@ const tabulation = (e: any) => {
voltageRideThroughEventQueryPage({
...tableStore.table.params,
areaId: e.data.id,
frequencyType: e.seriesName == '高压' ? 1 : 2
frequencyType: e.seriesName == '高压' ? 'Voltage_Rise' : 'Voltage_Dip'
})
.then(res => {
distributionData.value = res.data

171
src/views/LN/newEnergy/newEnergyAnalysis/components/detail.vue
View File

@@ -6,21 +6,54 @@
<vxe-colgroup title="最小值">
<vxe-column field="minphaseA" title="A">
<template #default="{ row }">
<span :style="{ color: row.limit < row.minphaseA ? 'red' : '' }">
<span
:style="{
color:
anotherName == '电压偏差(%)'
? tableData[0].limit < row.minphaseA || tableData[1].limit > row.minphaseA
? 'red'
: ''
: row.limit < row.minphaseA
? 'red'
: ''
}"
>
{{ row.minphaseA || '/' }}
</span>
</template>
</vxe-column>
<vxe-column field="minphaseB" title="B">
<template #default="{ row }">
<span :style="{ color: row.limit < row.minphaseB ? 'red' : '' }">
<span
:style="{
color:
anotherName == '电压偏差(%)'
? tableData[0].limit < row.minphaseB || tableData[1].limit > row.minphaseB
? 'red'
: ''
: row.limit < row.minphaseB
? 'red'
: ''
}"
>
{{ row.minphaseB || '/' }}
</span>
</template>
</vxe-column>
<vxe-column field="minphaseC" title="C">
<template #default="{ row }">
<span :style="{ color: row.limit < row.minphaseC ? 'red' : '' }">
<span
:style="{
color:
anotherName == '电压偏差(%)'
? tableData[0].limit < row.minphaseC || tableData[1].limit > row.minphaseC
? 'red'
: ''
: row.limit < row.minphaseC
? 'red'
: ''
}"
>
{{ row.minphaseC || '/' }}
</span>
</template>
@@ -29,21 +62,54 @@
<vxe-colgroup title="最大值">
<vxe-column field="maxphaseA" title="A">
<template #default="{ row }">
<span :style="{ color: row.limit < row.maxphaseA ? 'red' : '' }">
<span
:style="{
color:
anotherName == '电压偏差(%)'
? tableData[0].limit < row.maxphaseA || tableData[1].limit > row.maxphaseA
? 'red'
: ''
: row.limit < row.maxphaseA
? 'red'
: ''
}"
>
{{ row.maxphaseA || '/' }}
</span>
</template>
</vxe-column>
<vxe-column field="maxphaseB" title="B">
<template #default="{ row }">
<span :style="{ color: row.limit < row.maxphaseB ? 'red' : '' }">
<span
:style="{
color:
anotherName == '电压偏差(%)'
? tableData[0].limit < row.maxphaseB || tableData[1].limit > row.maxphaseB
? 'red'
: ''
: row.limit < row.maxphaseB
? 'red'
: ''
}"
>
{{ row.maxphaseB || '/' }}
</span>
</template>
</vxe-column>
<vxe-column field="maxphaseC" title="C">
<template #default="{ row }">
<span :style="{ color: row.limit < row.maxphaseC ? 'red' : '' }">
<span
:style="{
color:
anotherName == '电压偏差(%)'
? tableData[0].limit < row.maxphaseC || tableData[1].limit > row.maxphaseC
? 'red'
: ''
: row.limit < row.maxphaseC
? 'red'
: ''
}"
>
{{ row.maxphaseC || '/' }}
</span>
</template>
@@ -52,21 +118,54 @@
<vxe-colgroup title="平均值">
<vxe-column field="avgphaseA" title="A">
<template #default="{ row }">
<span :style="{ color: row.limit < row.avgphaseA ? 'red' : '' }">
<span
:style="{
color:
anotherName == '电压偏差(%)'
? tableData[0].limit < row.avgphaseA || tableData[1].limit > row.avgphaseA
? 'red'
: ''
: row.limit < row.avgphaseA
? 'red'
: ''
}"
>
{{ row.avgphaseA || '/' }}
</span>
</template>
</vxe-column>
<vxe-column field="avgphaseB" title="B">
<template #default="{ row }">
<span :style="{ color: row.limit < row.avgphaseB ? 'red' : '' }">
<span
:style="{
color:
anotherName == '电压偏差(%)'
? tableData[0].limit < row.avgphaseB || tableData[1].limit > row.avgphaseB
? 'red'
: ''
: row.limit < row.avgphaseB
? 'red'
: ''
}"
>
{{ row.avgphaseB || '/' }}
</span>
</template>
</vxe-column>
<vxe-column field="avgphaseC" title="C">
<template #default="{ row }">
<span :style="{ color: row.limit < row.avgphaseC ? 'red' : '' }">
<span
:style="{
color:
anotherName == '电压偏差(%)'
? tableData[0].limit < row.avgphaseC || tableData[1].limit > row.avgphaseC
? 'red'
: ''
: row.limit < row.avgphaseC
? 'red'
: ''
}"
>
{{ row.avgphaseC || '/' }}
</span>
</template>
@@ -75,21 +174,54 @@
<vxe-colgroup title="cp95值">
<vxe-column field="cp95PhaseA" title="A">
<template #default="{ row }">
<span :style="{ color: row.limit < row.cp95PhaseA ? 'red' : '' }">
<span
:style="{
color:
anotherName == '电压偏差(%)'
? tableData[0].limit < row.cp95PhaseA || tableData[1].limit > row.cp95PhaseA
? 'red'
: ''
: row.limit < row.cp95PhaseA
? 'red'
: ''
}"
>
{{ row.cp95PhaseA || '/' }}
</span>
</template>
</vxe-column>
<vxe-column field="cp95PhaseB" title="B">
<template #default="{ row }">
<span :style="{ color: row.limit < row.cp95PhaseB ? 'red' : '' }">
<span
:style="{
color:
anotherName == '电压偏差(%)'
? tableData[0].limit < row.cp95PhaseB || tableData[1].limit > row.cp95PhaseB
? 'red'
: ''
: row.limit < row.cp95PhaseB
? 'red'
: ''
}"
>
{{ row.cp95PhaseB || '/' }}
</span>
</template>
</vxe-column>
<vxe-column field="cp95PhaseC" title="C">
<template #default="{ row }">
<span :style="{ color: row.limit < row.cp95PhaseC ? 'red' : '' }">
<span
:style="{
color:
anotherName == '电压偏差(%)'
? tableData[0].limit < row.cp95PhaseC || tableData[1].limit > row.cp95PhaseC
? 'red'
: ''
: row.limit < row.cp95PhaseC
? 'red'
: ''
}"
>
{{ row.cp95PhaseC || '/' }}
</span>
</template>
@@ -104,12 +236,25 @@
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import { getTargetByTime } from '@/api/harmonic-boot/pollution'
const dialogVisible = ref(false)
const title = ref('')
const anotherName = ref('')
const tableData: any = ref([])
const open = (row: any) => {
title.value = row.title + ' - ' + row.row.time + ' - 越限详情'
tableData.value = row.row[row.key]
anotherName.value = row.title
console.log('🚀 ~ detailClick ~ row:', row)
getTargetByTime({
field: row.field,
lineId: row.lineId,
searchBeginTime: row.row.time,
searchEndTime: row.row.time,
statisticalId: row.key == '2' ? 2 : row.key == '3' ? 3 : row.key == '4' ? 4 : 1,
code: row.key == '2' ? '' : row.key == '3' ? '' : row.key == '4' ? '' : row.key //row.key
}).then((res: any) => {
tableData.value = res.data
})
dialogVisible.value = true
}
defineExpose({ open })

220
src/views/LN/newEnergy/newEnergyAnalysis/index.vue
View File

@@ -14,66 +14,41 @@
<el-button icon="el-icon-Download" type="primary" @click="exportData">导出区间数据</el-button>
</template>
</TableHeader>
<div class="container pd10">
<el-card class="cardBox">
<div class="mb5" style="display: flex; justify-content: space-between">
<h3>功率区间</h3>
<div style="display: flex; height: calc(100vh - 195px)" class="pt10">
<el-segmented
v-model="value1"
:options="[...powerList1, ...powerList2]"
direction="vertical"
@change="analyseList"
>
<template #default="scope">
<div class="flex flex-col items-center gap-2 p-2">
<div style="font-size: 24px; font-weight: 700">
<span :style="{ color: scope.item.crossTheLine > 0 ? 'red' : 'green' }">
{{ scope.item.quantity }}
</span>
<span style="font-size: 14px; font-weight: 500">个</span>
</div>
<div>
<span>稳态越限图例:　</span>
{{ scope.item.label }}
</div>
</div>
</template>
</el-segmented>
<div class="container">
<el-card class="box ml10 mr10" style="flex: 1">
<template #header>
<div class="card-header" style="display: flex; justify-content: space-between">
<span>功率区间稳态越限详情</span>
<div>
<span style="font-size: 14px">稳态越限图例:　</span>
<span style="color: red">越限　</span>
<span style="color: green">合格</span>
</div>
</div>
<el-card class="card-top">
<div
v-for="(item, index) in powerList1"
class="pd10"
style="cursor: pointer"
:class="flag == item.label ? 'hoverBox' : ''"
@click="analyseList(item.label, index)"
>
<div style="font-size: 24px; font-weight: 700">
<span :style="{ color: item.crossTheLine > 0 ? 'red' : 'green' }">
{{ item.quantity }}
</span>
<span style="font-size: 14px; font-weight: 500">个</span>
</div>
<div>
{{ item.label }}
</div>
</div>
</el-card>
<el-card class="card-top mt15">
<div
v-for="(item, index) in powerList2"
class="pd10"
style="cursor: pointer"
:class="flag == item.label ? 'hoverBox' : ''"
@click="analyseList(item.label, index + 5)"
>
<div style="font-size: 24px; font-weight: 700">
<span :style="{ color: item.crossTheLine > 0 ? 'red' : 'green' }">
{{ item.quantity }}
</span>
<span style="font-size: 14px; font-weight: 500">个</span>
</div>
<div>
{{ item.label }}
</div>
</div>
</el-card>
</el-card>
<el-card class="echart">
<h3>有功率区间占比</h3>
<my-echart :options="options" style="height: 212px" />
</el-card>
</div>
<div class="container" style="padding: 0px 10px 10px">
<el-card class="box">
<h3>功率区间稳态越限详情</h3>
<div :style="`height:calc(${heightB.height} - 25px)`" style="overflow-y: auto">
</template>
<!-- <h3>功率区间稳态越限详情</h3> -->
<div :style="heightA" style="overflow-y: auto">
<vxe-table
v-bind="defaultAttribute"
ref="vxeRef"
@@ -93,14 +68,14 @@
</el-link>
</template>
</vxe-column>
<vxe-column field="voltageOffset" title="电压偏差(%)">
<vxe-column field="voltageOffset" title="电压偏差(%)" min-width="110px">
<template #default="{ row }">
<el-link
:type="row.voltageOffset == '1' ? 'danger' : 'success'"
:class="row.voltageOffset == '1' ? 'percentage' : ''"
@click="
row.voltageOffset == '1'
? detailClick(row, '电压偏差(%)', 'voltageOffsetList')
? detailClick(row, '电压偏差(%)', 'Dev')
: ''
"
>
@@ -108,40 +83,44 @@
</el-link>
</template>
</vxe-column>
<vxe-column field="vtimes" title="谐波电压(%)">
<vxe-column field="vtimes" title="谐波电压(%)" min-width="110px">
<template #default="{ row }">
<el-link
:type="row.vtimes == '1' ? 'danger' : 'success'"
:class="row.vtimes == '1' ? 'percentage' : ''"
@click="
row.vtimes == '1' ? detailClick(row, '谐波电压(%)', 'vtimesList') : ''
row.vtimes == '1'
? detailClick(row, '谐波电压(%)', '2')
: ''
"
>
{{ row.vtimes == '1' ? '越限' : '合格' }}
</el-link>
</template>
</vxe-column>
<vxe-column field="itimes" title="谐波电流(A)">
<vxe-column field="itimes" title="谐波电流(A)" min-width="110px">
<template #default="{ row }">
<el-link
:type="row.itimes == '1' ? 'danger' : 'success'"
:class="row.itimes == '1' ? 'percentage' : ''"
@click="
row.itimes == '1' ? detailClick(row, '谐波电流(A)', 'itimestList') : ''
row.itimes == '1'
? detailClick(row, '谐波电流(A)', '3')
: ''
"
>
{{ row.itimes == '1' ? '越限' : '合格' }}
</el-link>
</template>
</vxe-column>
<vxe-column field="ubalance" title="三相电压不平衡度(%)">
<vxe-column field="ubalance" title="三相电压不平衡度(%)" min-width="150px">
<template #default="{ row }">
<el-link
:type="row.ubalance == '1' ? 'danger' : 'success'"
:class="row.ubalance == '1' ? 'percentage' : ''"
@click="
row.ubalance == '1'
? detailClick(row, '三相电压不平衡度(%)', 'ubalanceList')
? detailClick(row, '三相电压不平衡度(%)', 'Unbalance')
: ''
"
>
@@ -149,7 +128,7 @@
</el-link>
</template>
</vxe-column>
<vxe-column field="voltageFluctuation" title="电压波动(%)">
<!-- <vxe-column field="voltageFluctuation" title="电压波动(%)" min-width="110px">
<template #default="{ row }">
<el-link
:type="row.voltageFluctuation == '1' ? 'danger' : 'success'"
@@ -163,28 +142,30 @@
{{ row.voltageFluctuation == '1' ? '越限' : '合格' }}
</el-link>
</template>
</vxe-column>
<vxe-column field="flicker" title="长时闪变">
</vxe-column> -->
<vxe-column field="flicker" title="长时闪变" min-width="110px">
<template #default="{ row }">
<el-link
:type="row.flicker == '1' ? 'danger' : 'success'"
:class="row.flicker == '1' ? 'percentage' : ''"
@click="
row.flicker == '1' ? detailClick(row, '长时闪变', 'flickerList') : ''
row.flicker == '1'
? detailClick(row, '长时闪变', 'plt')
: ''
"
>
{{ row.flicker == '1' ? '越限' : '合格' }}
</el-link>
</template>
</vxe-column>
<vxe-column field="interHarmonic" title="间谐波电压含有率(%)">
<vxe-column field="interHarmonic" title="间谐波电压含有率(%)" min-width="150px">
<template #default="{ row }">
<el-link
:type="row.interHarmonic == '1' ? 'danger' : 'success'"
:class="row.interHarmonic == '1' ? 'percentage' : ''"
@click="
row.interHarmonic == '1'
? detailClick(row, '间谐波电压含有率(%)', 'interHarmonicList')
? detailClick(row, '间谐波电压含有率(%)', '4')
: ''
"
>
@@ -192,7 +173,11 @@
</el-link>
</template>
</vxe-column>
<vxe-column field="sequenceCurrentUnbalance" title="电流不平衡度(%)">
<vxe-column
field="sequenceCurrentUnbalance"
title="电流不平衡度(%)"
min-width="130px"
>
<template #default="{ row }">
<el-link
:type="row.sequenceCurrentUnbalance == '1' ? 'danger' : 'success'"
@@ -202,7 +187,7 @@
? detailClick(
row,
'电流不平衡度(%)',
'sequenceCurrentUnbalanceList'
'iNeg'
)
: ''
"
@@ -212,7 +197,7 @@
</template>
</vxe-column>
<vxe-column field="num3" title="操作" width="80">
<vxe-column field="num3" fixed="right" title="操作" width="80">
<template #default="{ row }">
<el-button type="primary" link @click="addTo(row)">添加</el-button>
</template>
@@ -220,20 +205,45 @@
</vxe-table>
</div>
</el-card>
<el-card class="box">
<div :style="heightB" style="overflow-y: auto">
<div style="padding: 0px 10px 10px 0; width: 450px">
<el-card class="echart">
<template #header>
<div class="card-header">
<span>有功率区间占比</span>
</div>
</template>
<my-echart :options="options" style="height: 212px" />
</el-card>
<el-card class="box mt10">
<template #header>
<div style="display: flex; justify-content: space-between">
<span style="font-size: 16px; font-weight: 700">报告参数</span>
<el-button icon="el-icon-Download" size="small" type="primary" @click="generateReports">
<div class="card-header">
<span>报告参数</span>
</div>
<el-button
icon="el-icon-Download"
size="small"
type="primary"
@click="generateReports"
>
生成报表
</el-button>
</div>
</template>
<div :style="heightB" style="overflow-y: auto">
<div>
<el-tree style="max-width: 600px" :data="dataSource" node-key="id" default-expand-all>
<el-tree
style="max-width: 600px"
:data="dataSource"
node-key="id"
default-expand-all
>
<template #default="{ node, data }">
<span class="custom-tree-node">
<span :style="data.level != 0 ? 'color: var(--el-color-primary)' : ''">
<span
:style="data.level != 0 ? 'color: var(--el-color-primary)' : ''"
>
{{ data.time }}
</span>
<Close
@@ -248,6 +258,8 @@
</div>
</el-card>
</div>
</div>
</div>
</pane>
</splitpanes>
<!-- 时间弹框 -->
@@ -288,9 +300,23 @@ defineOptions({
})
const timePopUpBox = ref<anyObj | null>(null)
const flag = ref('0%~10%')
const value1 = ref('0%~10%')
const options1 = [
'0%~10%',
'10%~20%',
'20%~30%',
'30%~40%',
'40%~50%',
'50%~60%',
'60%~70%',
'70%~80%',
'80%~90%',
'90%~100%'
]
const height = mainHeight(20)
const heightB = mainHeight(385)
const heightB = mainHeight(448)
const heightA = mainHeight(180)
const size = ref(0)
const TableHeaderRef = ref()
const detailRef = ref()
@@ -668,7 +694,7 @@ const tableStore = new TableStore({
}
]
analyseList(flag.value, index.value)
analyseList(flag.value)
}
})
// 导出区间数据
@@ -727,10 +753,12 @@ const timeClick = (row: any) => {
}
// 点击越限
const detailClick = (row: any, title: string, key: string) => {
console.log('🚀 ~ detailClick ~ row:', row)
detailRef.value.open({
row: row,
title: title,
field: index.value,
lineId: dotList.value.id ,
key: key
})
}
@@ -743,7 +771,10 @@ const detailClick = (row: any, title: string, key: string) => {
// }).then(res => {})
// }
// 功率列表
const analyseList = (e: string, i: number) => {
const analyseList = (e: string) => {
const i = [...powerList1.value, ...powerList2.value].findIndex(item => item.value === e)
console.log(index)
flag.value = e
index.value = i
loading.value = true
@@ -795,9 +826,9 @@ const handleNodeClick = (data: any, node: any) => {
}
}
.container {
display: grid;
grid-template-columns: 5fr 2.5fr;
gap: 10px;
width: calc(100% - 80px);
display: flex;
flex: 1;
.card-top {
background-color: var(--el-color-primary-light-9);
// color: #fff;
@@ -832,3 +863,20 @@ const handleNodeClick = (data: any, node: any) => {
text-underline-offset: 0.1em;
}
</style>
<style lang="scss" scoped>
:deep(.el-card__header) {
padding: 10px;
}
.card-header {
span {
font-weight: 600;
font-size: 16px;
}
}
:deep(.el-segmented__item-selected) {
background: var(--el-color-primary-light-5) !important;
}
:deep(.el-segmented__item.is-selected, .el-segmented__item.is-selected.is-disabled) {
color: #000 !important;
}
</style>

875
src/views/LN/newEnergy/newEnergyAnalysis/test.vue Normal file
View File

@@ -0,0 +1,875 @@
<template>
<div class="default-main" :style="height">
<splitpanes style="height: 100%" class="default-theme" id="navigation-splitpanes">
<pane :size="size">
<PointTree
:default-expand-all="false"
@node-click="handleNodeClick"
@init="handleNodeClick"
></PointTree>
</pane>
<pane :style="height" style="background: #fff">
<TableHeader ref="TableHeaderRef" datePicker>
<template #operation>
<el-button icon="el-icon-Download" type="primary" @click="exportData">导出区间数据</el-button>
</template>
</TableHeader>
<div class="container pd10">
<el-card class="cardBox">
<template #header>
<div class="card-header" style="display: flex; justify-content: space-between">
<span>功率区间</span>
<div>
<span style="font-size: 14px">稳态越限图例:　</span>
<span style="color: red">越限　</span>
<span style="color: green">合格</span>
</div>
</div>
</template>
<el-card class="card-top mt5">
<div
v-for="(item, index) in powerList1"
class="pd10"
style="cursor: pointer"
:class="flag == item.label ? 'hoverBox' : ''"
@click="analyseList(item.label, index)"
>
<div style="font-size: 24px; font-weight: 700">
<span :style="{ color: item.crossTheLine > 0 ? 'red' : 'green' }">
{{ item.quantity }}
</span>
<span style="font-size: 14px; font-weight: 500">个</span>
</div>
<div>
{{ item.label }}
</div>
</div>
</el-card>
<el-card class="card-top mt15">
<div
v-for="(item, index) in powerList2"
class="pd10"
style="cursor: pointer"
:class="flag == item.label ? 'hoverBox' : ''"
@click="analyseList(item.label, index + 5)"
>
<div style="font-size: 24px; font-weight: 700">
<span :style="{ color: item.crossTheLine > 0 ? 'red' : 'green' }">
{{ item.quantity }}
</span>
<span style="font-size: 14px; font-weight: 500">个</span>
</div>
<div>
{{ item.label }}
</div>
</div>
</el-card>
</el-card>
<el-card class="echart">
<template #header>
<div class="card-header">
<span>有功率区间占比</span>
</div>
</template>
<my-echart :options="options" style="height: 212px" />
</el-card>
</div>
<div class="container" style="padding: 0px 10px 10px">
<el-card class="box">
<template #header>
<div class="card-header">
<span>功率区间稳态越限详情</span>
</div>
</template>
<!-- <h3>功率区间稳态越限详情</h3> -->
<div :style="`height:calc(${heightB.height} - 25px)`" style="overflow-y: auto">
<vxe-table
v-bind="defaultAttribute"
ref="vxeRef"
height="auto"
:data="tableData"
v-loading="loading"
>
<vxe-column field="time" title="时间" width="180px">
<template #default="{ row }">
<el-link
type="primary"
:underline="false"
class="percentage"
@click="timeClick(row)"
>
{{ row.time }}
</el-link>
</template>
</vxe-column>
<vxe-column field="voltageOffset" title="电压偏差(%)" min-width="110px">
<template #default="{ row }">
<el-link
:type="row.voltageOffset == '1' ? 'danger' : 'success'"
:class="row.voltageOffset == '1' ? 'percentage' : ''"
@click="
row.voltageOffset == '1'
? detailClick(row, '电压偏差(%)', 'voltageOffsetList')
: ''
"
>
{{ row.voltageOffset == '1' ? '越限' : '合格' }}
</el-link>
</template>
</vxe-column>
<vxe-column field="vtimes" title="谐波电压(%)" min-width="110px">
<template #default="{ row }">
<el-link
:type="row.vtimes == '1' ? 'danger' : 'success'"
:class="row.vtimes == '1' ? 'percentage' : ''"
@click="
row.vtimes == '1' ? detailClick(row, '谐波电压(%)', 'vtimesList') : ''
"
>
{{ row.vtimes == '1' ? '越限' : '合格' }}
</el-link>
</template>
</vxe-column>
<vxe-column field="itimes" title="谐波电流(A)" min-width="110px">
<template #default="{ row }">
<el-link
:type="row.itimes == '1' ? 'danger' : 'success'"
:class="row.itimes == '1' ? 'percentage' : ''"
@click="
row.itimes == '1' ? detailClick(row, '谐波电流(A)', 'itimestList') : ''
"
>
{{ row.itimes == '1' ? '越限' : '合格' }}
</el-link>
</template>
</vxe-column>
<vxe-column field="ubalance" title="三相电压不平衡度(%)" min-width="150px">
<template #default="{ row }">
<el-link
:type="row.ubalance == '1' ? 'danger' : 'success'"
:class="row.ubalance == '1' ? 'percentage' : ''"
@click="
row.ubalance == '1'
? detailClick(row, '三相电压不平衡度(%)', 'ubalanceList')
: ''
"
>
{{ row.ubalance == '1' ? '越限' : '合格' }}
</el-link>
</template>
</vxe-column>
<vxe-column field="voltageFluctuation" title="电压波动(%)" min-width="110px">
<template #default="{ row }">
<el-link
:type="row.voltageFluctuation == '1' ? 'danger' : 'success'"
:class="row.voltageFluctuation == '1' ? 'percentage' : ''"
@click="
row.voltageFluctuation == '1'
? detailClick(row, '电压波动(%)', 'voltageFluctuationList')
: ''
"
>
{{ row.voltageFluctuation == '1' ? '越限' : '合格' }}
</el-link>
</template>
</vxe-column>
<vxe-column field="flicker" title="长时闪变" min-width="110px">
<template #default="{ row }">
<el-link
:type="row.flicker == '1' ? 'danger' : 'success'"
:class="row.flicker == '1' ? 'percentage' : ''"
@click="
row.flicker == '1' ? detailClick(row, '长时闪变', 'flickerList') : ''
"
>
{{ row.flicker == '1' ? '越限' : '合格' }}
</el-link>
</template>
</vxe-column>
<vxe-column field="interHarmonic" title="间谐波电压含有率(%)" min-width="150px">
<template #default="{ row }">
<el-link
:type="row.interHarmonic == '1' ? 'danger' : 'success'"
:class="row.interHarmonic == '1' ? 'percentage' : ''"
@click="
row.interHarmonic == '1'
? detailClick(row, '间谐波电压含有率(%)', 'interHarmonicList')
: ''
"
>
{{ row.interHarmonic == '1' ? '越限' : '合格' }}
</el-link>
</template>
</vxe-column>
<vxe-column field="sequenceCurrentUnbalance" title="电流不平衡度(%)" min-width="130px">
<template #default="{ row }">
<el-link
:type="row.sequenceCurrentUnbalance == '1' ? 'danger' : 'success'"
:class="row.sequenceCurrentUnbalance == '1' ? 'percentage' : ''"
@click="
row.sequenceCurrentUnbalance == '1'
? detailClick(
row,
'电流不平衡度(%)',
'sequenceCurrentUnbalanceList'
)
: ''
"
>
{{ row.sequenceCurrentUnbalance == '1' ? '越限' : '合格' }}
</el-link>
</template>
</vxe-column>
<vxe-column field="num3" fixed="right" title="操作" width="80">
<template #default="{ row }">
<el-button type="primary" link @click="addTo(row)">添加</el-button>
</template>
</vxe-column>
</vxe-table>
</div>
</el-card>
<el-card class="box">
<template #header>
<div style="display: flex; justify-content: space-between">
<div class="card-header">
<span>报告参数</span>
</div>
<el-button icon="el-icon-Download" size="small" type="primary" @click="generateReports">
生成报表
</el-button>
</div>
</template>
<div :style="heightB" style="overflow-y: auto">
<div>
<el-tree style="max-width: 600px" :data="dataSource" node-key="id" default-expand-all>
<template #default="{ node, data }">
<span class="custom-tree-node">
<span :style="data.level != 0 ? 'color: var(--el-color-primary)' : ''">
{{ data.time }}
</span>
<Close
v-if="data.level != 0"
style="margin-left: 5px; height: 14px"
@click="remove(node, data)"
/>
</span>
</template>
</el-tree>
</div>
</div>
</el-card>
</div>
</pane>
</splitpanes>
<!-- 时间弹框 -->
<timePopUpBox
v-if="timePopUpBox"
ref="timePopUpBoxRef"
:timePopUpBox="timePopUpBox"
@close="timePopUpBox = null"
/>
<!-- 越限详情 -->
<detail ref="detailRef" />
</div>
</template>
<script setup lang="ts">
import { onMounted, ref, provide } from 'vue'
import 'splitpanes/dist/splitpanes.css'
import { Splitpanes, Pane } from 'splitpanes'
import TableStore from '@/utils/tableStore'
import PointTree from '@/components/tree/pqs/pointTree.vue'
import TableHeader from '@/components/table/header/index.vue'
import { useDictData } from '@/stores/dictData'
import { mainHeight } from '@/utils/layout'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import MyEchart from '@/components/echarts/MyEchart.vue'
import TimePopUpBox from './components/timePopUpBox.vue'
import { ElMessage } from 'element-plus'
import {
getDataByLineId,
getTargetLimitById,
exportExcelRangTemplate,
exportExcelListTemplate
} from '@/api/harmonic-boot/newEnergyAnalysis'
import detail from './components/detail.vue'
import { Close } from '@element-plus/icons-vue'
defineOptions({
name: 'newEnergy/newEnergyAnalysis'
})
const timePopUpBox = ref<anyObj | null>(null)
const flag = ref('0%~10%')
const value1 = ref('0%~10%')
const options1 = [
'0%~10%',
'10%~20%',
'20%~30%',
'30%~40%',
'40%~50%',
'50%~60%',
'60%~70%',
'70%~80%',
'80%~90%',
'90%~100%'
]
const height = mainHeight(20)
const heightB = mainHeight(445)
const size = ref(0)
const TableHeaderRef = ref()
const detailRef = ref()
const dotList: any = ref({})
const loading = ref(false)
const timePopUpBoxRef = ref()
const index = ref(0)
const treeList = ref([])
const powerList1: any = ref([
{
label: '0%~10%',
quantity: '0',
percentage: '10%',
crossTheLine: '越限',
value: '0%~10%'
},
{
label: '10%~20%',
quantity: '0',
percentage: '10%',
crossTheLine: '合格',
value: '10%~20%'
},
{
label: '20%~30%',
quantity: '0',
percentage: '10%',
crossTheLine: '合格',
value: '20%~30%'
},
{
label: '30%~40%',
quantity: '0',
percentage: '10%',
crossTheLine: '合格',
value: '30%~40%'
},
{
label: '40%~50%',
quantity: '0',
percentage: '10%',
crossTheLine: '合格',
value: '40%~50%'
}
])
const powerList2: any = ref([
{
label: '50%~60%',
quantity: '0',
percentage: '10%',
crossTheLine: '合格',
value: '50%~60%'
},
{
label: '60%~70%',
quantity: '0',
percentage: '10%',
crossTheLine: '合格',
value: '60%~70%'
},
{
label: '70%~80%',
quantity: '0',
percentage: '10%',
crossTheLine: '合格',
value: '70%~80%'
},
{
label: '80%~90%',
quantity: '0',
percentage: '10%',
crossTheLine: '越限',
value: '80%~90%'
},
{
label: '90%~100%',
quantity: '20',
percentage: '10%',
crossTheLine: '越限',
value: '90%~100%'
}
])
const tableData: any = ref([])
const dataSource: any = ref([
{
id: 1,
level: 0,
time: '0%~10%',
children: []
},
{
id: 2,
level: 0,
time: '10%~20%',
children: []
},
{
id: 3,
level: 0,
time: '20%~30%',
children: []
},
{
id: 4,
level: 0,
time: '30%~40%',
children: []
},
{
id: 5,
level: 0,
time: '40%~50%',
children: []
},
{
id: 6,
level: 0,
time: '50%~60%',
children: []
},
{
id: 7,
level: 0,
time: '60%~70%',
children: []
},
{
id: 8,
level: 0,
time: '70%~80%',
children: []
},
{
id: 9,
level: 0,
time: '80%~90%',
children: []
},
{
id: 10,
level: 0,
time: '90%~100%',
children: []
}
])
// 添加树
const addTo = (row: any) => {
// console.log("🚀 ~ addTo ~ uniqueObjectsByJSON([...dataSource.value[index.value].children, row]):", uniqueObjectsByJSON([...dataSource.value[index.value].children, row])[0].time)
let list = JSON.parse(JSON.stringify(dataSource.value[index.value].children))
dataSource.value[index.value].children = uniqueObjectsByJSON([...list, row])
}
// 树去重
const uniqueObjectsByJSON = (arr: any) => {
const seen = new Set()
return arr.filter((item: any) => {
const str = JSON.stringify(item)
if (!seen.has(str)) {
seen.add(str)
return true
}
return false
})
}
// 树删除
const remove = (node: any, data: any) => {
const parent = node.parent
const children = parent.data.children || parent.data
const index = children.findIndex(d => d.id === data.id)
children.splice(index, 1)
dataSource.value = [...dataSource.value]
}
const options = ref({})
const tableStore = new TableStore({
url: '/harmonic-boot/powerStatistics/getDataByLineId',
method: 'POST',
column: [],
beforeSearchFun: () => {
treeList.value = dotList.value
tableStore.table.params.lineId = dotList.value.id
tableStore.table.params.searchBeginTime = TableHeaderRef.value.datePickerRef.timeValue[0]
tableStore.table.params.searchEndTime = TableHeaderRef.value.datePickerRef.timeValue[1]
},
loadCallback: () => {
let res = tableStore.table.data
powerList1.value = [
{
label: '0%~10%',
quantity: res.minsNum0,
percentage: res.proportion0 + '%',
crossTheLine: res.isOrNot0,
value: '0%~10%'
},
{
label: '10%~20%',
quantity: res.minsNum1,
percentage: res.proportion1 + '%',
crossTheLine: res.isOrNot1,
value: '10%~20%'
},
{
label: '20%~30%',
quantity: res.minsNum2,
percentage: res.proportion2 + '%',
crossTheLine: res.isOrNot2,
value: '20%~30%'
},
{
label: '30%~40%',
quantity: res.minsNum3,
percentage: res.proportion3 + '%',
crossTheLine: res.isOrNot3,
value: '30%~40%'
},
{
label: '40%~50%',
quantity: res.minsNum4,
percentage: res.proportion4 + '%',
crossTheLine: res.isOrNot4,
value: '40%~50%'
}
]
powerList2.value = [
{
label: '50%~60%',
quantity: res.minsNum5,
percentage: res.proportion5 + '%',
crossTheLine: res.isOrNot5,
value: '50%~60%'
},
{
label: '60%~70%',
quantity: res.minsNum6,
percentage: res.proportion6 + '%',
crossTheLine: res.isOrNot6,
value: '60%~70%'
},
{
label: '70%~80%',
quantity: res.minsNum7,
percentage: res.proportion7 + '%',
crossTheLine: res.isOrNot7,
value: '70%~80%'
},
{
label: '80%~90%',
quantity: res.minsNum8,
percentage: res.proportion8 + '%',
crossTheLine: res.isOrNot8,
value: '80%~90%'
},
{
label: '90%~100%',
quantity: res.minsNum9,
percentage: res.proportion9 + '%',
crossTheLine: res.isOrNot9,
value: '90%~100%'
}
]
options.value = {
legend: {
show: false
},
tooltip: {},
xAxis: {
show: false
},
yAxis: {
show: false
},
dataZoom: { show: false },
options: {
series: [
{
type: 'pie',
center: ['50%', '52%'],
selectedOffset: 30,
label: {
show: true,
color: '#96A2B5',
lineHeight: 8,
minMargin: 10,
formatter: function (e) {
return '{name|' + e.name + '}{percent|' + e.data.percentage + '}'
},
rich: {
name: {
fontSize: 12
},
percent: {
fontSize: 14,
color: '#000',
padding: [0, 0, 0, 5]
}
}
},
data: [
...powerList1.value.map(item => {
return { value: item.quantity, name: item.label, percentage: item.percentage }
}),
...powerList2.value.map(item => {
return { value: item.quantity, name: item.label, percentage: item.percentage }
})
]
}
]
}
}
dataSource.value = [
{
id: 1,
level: 0,
time: '0%~10%',
children: []
},
{
id: 2,
level: 0,
time: '10%~20%',
children: []
},
{
id: 3,
level: 0,
time: '20%~30%',
children: []
},
{
id: 4,
level: 0,
time: '30%~40%',
children: []
},
{
id: 5,
level: 0,
time: '40%~50%',
children: []
},
{
id: 6,
level: 0,
time: '50%~60%',
children: []
},
{
id: 7,
level: 0,
time: '60%~70%',
children: []
},
{
id: 8,
level: 0,
time: '70%~80%',
children: []
},
{
id: 9,
level: 0,
time: '80%~90%',
children: []
},
{
id: 10,
level: 0,
time: '90%~100%',
children: []
}
]
analyseList(flag.value, index.value)
}
})
// 导出区间数据
const exportData = () => {
ElMessage('正在下载中,请稍等...')
exportExcelRangTemplate({
lineId: dotList.value.id,
searchValue: treeList.value?.name + ' 0%-100% 区间数据',
searchBeginTime: tableStore.table.params.searchBeginTime,
searchEndTime: tableStore.table.params.searchEndTime
}).then((res: any) => {
let blob = new Blob([res], {
type: 'application/vnd.ms-excel'
})
const url = window.URL.createObjectURL(blob)
const link = document.createElement('a') // 创建a标签
link.href = url
link.download = treeList.value?.name + ' 0%-100% 区间数据' // 设置下载的文件名
document.body.appendChild(link)
link.click() //执行下载
document.body.removeChild(link)
})
}
// 导出报告参数
const generateReports = () => {
let data: any = {
lineId: dotList.value.id,
searchValue: treeList.value?.name + ' 报告',
searchBeginTime: tableStore.table.params.searchBeginTime,
searchEndTime: tableStore.table.params.searchEndTime
}
dataSource.value.forEach((item: any, i: number) => {
// item.children
data[`time${i}`] = item.children.map((it: any) => it.time)
}),
exportExcelListTemplate(data).then((res: any) => {
let blob = new Blob([res], {
type: 'application/vnd.ms-excel'
})
const url = window.URL.createObjectURL(blob)
const link = document.createElement('a') // 创建a标签
link.href = url
link.download = treeList.value?.name + ' 报告' // 设置下载的文件名
document.body.appendChild(link)
link.click() //执行下载
document.body.removeChild(link)
})
}
// 点击时间
const timeClick = (row: any) => {
let data = { ...row, field: index.value, lineId: dotList.value.id }
timePopUpBox.value = data
}
// 点击越限
const detailClick = (row: any, title: string, key: string) => {
console.log('🚀 ~ detailClick ~ row:', row)
detailRef.value.open({
row: row,
title: title,
key: key
})
}
// // 获取有功功率趋势分析数据
// const analyse = (e: any) => {
// getDataByLineId({
// lineId: e.id,
// searchBeginTime: tableStore.table.params.searchBeginTime,
// searchEndTime: tableStore.table.params.searchEndTime
// }).then(res => {})
// }
// 功率列表
const analyseList = (e: string, i: number) => {
flag.value = e
index.value = i
loading.value = true
getTargetLimitById({
lineId: dotList.value.id,
searchBeginTime: tableStore.table.params.searchBeginTime,
searchEndTime: tableStore.table.params.searchEndTime,
field: i
})
.then(res => {
loading.value = false
tableData.value = res.data
})
.catch(() => {
loading.value = false
})
}
provide('tableStore', tableStore)
onMounted(() => {
const dom = document.getElementById('navigation-splitpanes')
if (dom) {
size.value = Math.round((180 / dom.offsetHeight) * 100)
}
})
const handleNodeClick = (data: any, node: any) => {
console.log('🚀 ~ handleNodeClick ~ data:', data)
if (data.level == 6) {
dotList.value = data
// dotList.value.id = '6469e77fda42db12c7ca6620a092f03c1'
tableStore.index()
}
}
</script>
<style lang="scss">
.splitpanes.default-theme .splitpanes__pane {
background: #eaeef1;
}
.cardBox {
.el-card__body {
padding: 5px 10px 10px;
}
}
.box {
.el-card__body {
padding: 10px;
}
}
.container {
display: grid;
grid-template-columns: 5fr 2.5fr;
gap: 10px;
.card-top {
background-color: var(--el-color-primary-light-9);
// color: #fff;
.el-card__body {
display: grid; /* 使用 Grid 布局 */
grid-template-columns: repeat(5, 1fr); /* 每行5列，每列占1份空间 */
text-align: center;
gap: 20px;
padding: 10px;
.img {
vertical-align: middle;
height: 16px;
}
}
}
.echart {
.el-card__body {
padding: 5px;
}
}
}
.el-card {
border-radius: 10px;
}
.hoverBox {
background-color: var(--el-color-primary-light-5);
border-radius: 10px;
}
.percentage {
text-decoration: underline;
text-underline-offset: 0.1em;
}
</style>
<style lang="scss" scoped>
:deep(.el-card__header) {
padding: 10px;
}
.card-header {
span {
font-weight: 600;
font-size: 16px;
}
}
</style>

269
src/views/pqs/runManage/cleaning/components/abnormal.vue
View File

@@ -1,4 +1,3 @@
<!--业务用户管理界面-->
<template>
<div>
<TableHeader date-picker ref="TableHeaderRef">
@@ -22,7 +21,7 @@
<template v-slot:operation></template>
</TableHeader>
<div class="card-list pt10">
<div class="card-list pt10" v-loading="loading">
<div class="monitoringPoints">
<el-card style="height: 200px">
<template #header>
@@ -38,9 +37,9 @@
<span class="divBox_num" style="color: #57bc6e">{{ monitoringPoints.runNum }}</span>
</div>
<div class="divBox" style="width: 200px">
<span class="iconfont icon-igw-f-warning-data" style="color: #fca955"></span>
<span class="iconfont icon-igw-f-warning-data" style="color: #ff6600"></span>
<span class="divBox_title">异常测点数</span>
<span class="divBox_num" style="color: #fca955">
<span class="divBox_num" style="color: #ff6600">
{{ monitoringPoints.abnormalNum }}
</span>
</div>
@@ -67,7 +66,14 @@
</div>
</template>
<div class="mb5" style="height: 40px">
<el-segmented style="height: 100%" v-model="segmented" :options="segmentedList" block />
<el-segmented style="height: 100%" v-model="segmented" :options="segmentedList" block>
<template #default="scope">
<div >
<div class="segmentedIcon">0</div>
<div>{{ scope.item.label }}</div>
</div>
</template>
</el-segmented>
</div>
<div class="header">
<span style="width: 170px; text-align: left">指标名称</span>
@@ -77,7 +83,7 @@
<div :style="indicatorHeight" style="overflow-y: auto">
<div v-for="o in abnormal" class="abnormal mb10">
<span style="width: 170px; height: 24px" class="iconDiv">
<div :style="{ backgroundColor: o.ids.length > 0 ? '#ff9800' : '' }"></div>
<div :style="{ backgroundColor: o.ids.length > 0 ? '#FF9100' : '' }"></div>
{{ o.targetName }}
</span>
<span style="flex: 1; text-align: center">
@@ -86,9 +92,10 @@
</span>
<span style="width: 90px; text-align: center">
<span
style="color: #ff9800; cursor: pointer; text-decoration: underline"
style="color: #388e3c"
:class="` ${o.ids.length > 0 ? 'text-red' : ''}`"
class="text"
@click="quantityClick(o)"
@click="quantityClick(o, 0)"
>
{{ o.ids.length }}
</span>
@@ -130,7 +137,58 @@
</el-form-item>
</el-form>
<!--表格-->
<Table ref="tableRef"></Table>
<div :style="{ height: tableStore.table.height }" v-loading="tableStore.table.loading">
<vxe-table height="auto" :data="tableStore.table.data" v-bind="defaultAttribute" ref="tableRef">
<vxe-column type="seq" title="序号" width="80px">
<template #default="{ rowIndex }">
<span>
{{
(tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize +
rowIndex +
1
}}
</span>
</template>
</vxe-column>
<vxe-column field="monitorName" title="监测点名称">
<template #default="{ row }">
<span class="table_name">
{{ row.monitorName }}
</span>
</template>
</vxe-column>
<vxe-column field="devName" title="所属终端名称">
<template #default="{ row }">
<span class="table_name">
{{ row.devName }}
</span>
</template>
</vxe-column>
<vxe-column field="stationName" title="所属电站">
<template #default="{ row }">
<span class="table_name">
{{ row.stationName }}
</span>
</template>
</vxe-column>
<vxe-column field="objType" title="监测对象类型" :formatter="formatter"></vxe-column>
<vxe-column field="objName" title="监测对象名称" :formatter="formatter"></vxe-column>
<vxe-column field="voltageLevel" title="电压等级"></vxe-column>
<vxe-column field="abnormalDay" title="异常天数">
<template #default="{ row }">
<span class="table_name" @click="quantityClick(row, 1)">
{{ row.abnormalDay }}
</span>
</template>
</vxe-column>
<vxe-column field="abnormalDay" title="严重度">
<template #default="{ row }">
<el-tag type="warning" v-if="row.severity == 0">预警</el-tag>
<el-tag type="danger" v-if="row.severity == 1">告警</el-tag>
</template>
</vxe-column>
</vxe-table>
</div>
</el-card>
</div>
<anomalyDetails ref="anomalyDetailsRef" />
@@ -142,6 +200,7 @@ import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import { onMounted, provide, ref } from 'vue'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import { useDictData } from '@/stores/dictData'
import { mainHeight } from '@/utils/layout'
import MyEchart from '@/components/echarts/MyEchart.vue'
@@ -153,30 +212,31 @@ const anomalyDetailsRef = ref()
const dictData = useDictData()
//字典获取监督对象类型
const objTypeList: any = ref([])
const pageHeight = mainHeight(155)
const pageHeight = mainHeight(157)
const indicatorHeight = mainHeight(507)
const tableRef = ref()
const monitoringPoints = ref({
runNum: 0,
abnormalNum: 0
})
const tableRef = ref()
const percentage = ref({})
const loading = ref(false)
const TableHeaderRef = ref()
const abnormal: any = ref([])
const mapList: any = ref([])
const segmented = ref(1)
const time = ref(['', ''])
const segmentedList = [
{
label: '基础数据',
label: '基础指标',
value: 1
},
{
label: '稳态数据',
label: '稳态指标',
value: 2
},
{
label: '暂态数据',
label: '暂态指标',
value: 3
}
]
@@ -184,87 +244,13 @@ const tableStore = new TableStore({
url: '/device-boot/dataVerify/getMonitorVerifyData',
method: 'POST',
showPage: false,
filename: '异常数据',
filename: '异常数据统计',
publicHeight: 530,
column: [
{
title: '序号',
width: 80,
formatter: (row: any) => {
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
}
column: [],
beforeSearchFun: () => {
loading.value = true
time.value = [tableStore.table.params.startTime, tableStore.table.params.endTime]
},
{
title: '监测点名称',
field: 'monitorName',
type: 'html',
formatter: (row, column) => {
return `<div class="table_name">${row.cellValue}</div>`
}
},
{
title: '所属终端名称',
field: 'devName',
type: 'html',
formatter: (row, column) => {
return `<div class="table_name">${row.cellValue}</div>`
}
},
{
title: '所属电站',
field: 'stationName',
type: 'html',
formatter: (row, column) => {
return `<div class="table_name">${row.cellValue}</div>`
}
},
{
title: '监测对象类型',
field: 'objType'
},
{
title: '监测对象名称',
field: 'objName'
},
{ title: '电压等级', field: 'voltageLevel' },
{
title: '异常天数',
field: 'abnormalDay',
type: 'html',
formatter: (row, column) => {
return `<div class="table_name">${row.cellValue}</div>`
}
},
{
title: '严重度',
field: 'severity',
render: 'tag',
custom: {
0: 'warning',
1: 'danger'
},
replaceValue: {
0: '预警',
1: '告警'
}
},
// {
// title: '操作',
// width: '120',
// render: 'buttons',
// buttons: [
// {
// name: 'edit',
// title: '工单',
// type: 'primary',
// icon: 'el-icon-Plus',
// render: 'basicButton',
// click: row => {}
// }
// ]
// }
],
loadCallback: () => {
// console.log('🚀 ~ abnormal.value:', tableStore.table.data)
monitoringPoints.value.runNum = tableStore.table.data.runNum //总数
@@ -275,13 +261,14 @@ const tableStore = new TableStore({
tableStore.table.data = tableStore.table.data.monitorAlarmInfo
echart()
loading.value = false
}
})
const options = ref({})
const echart = () => {
percentage.value = {
color: ['#ff9800'],
color: ['#FF9100'],
options: {
dataZoom: null,
toolbox: {
@@ -312,13 +299,42 @@ const echart = () => {
series: [
{
name: '异常占比',
name: '异常总数',
type: 'bar',
barWidth: 12,
data: [((monitoringPoints.value.abnormalNum / monitoringPoints.value.runNum) * 100).toFixed(2)],
data: [100],
z: 0,
zlevel: 0,
itemStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 1,
color: '#57bc6e' // 100% 处的颜色
}
],
global: false // 缺省为 false
}
}
}
},
{
name: '异常占比',
type: 'bar',
barWidth: 13,
data: [
(monitoringPoints.value.abnormalNum / monitoringPoints.value.runNum) * 100 == 0
? ''
: ((monitoringPoints.value.abnormalNum / monitoringPoints.value.runNum) * 100).toFixed(2)
],
z: 0,
zlevel: 0,
itemStyle: {
normal: {
color: {
@@ -330,11 +346,11 @@ const echart = () => {
colorStops: [
{
offset: 0,
color: '#FD6E6A' // 0% 处的颜色
color: '#FF9100' // 0% 处的颜色
},
{
offset: 1,
color: '#ff9800' // 100% 处的颜色
color: '#FF9100' // 100% 处的颜色
}
],
global: false // 缺省为 false
@@ -353,7 +369,7 @@ const echart = () => {
// symbolMargin: 300,
symbol: 'rect',
symbolClip: true,
symbolSize: [2, 15],
symbolSize: [2, 20],
symbolPosition: 'start',
symbolOffset: [0, 0],
data: [100],
@@ -361,9 +377,9 @@ const echart = () => {
zlevel: 0
},
{
name: '机器故障率',
name: '',
type: 'bar',
barGap: '-125%',
barGap: '-110%',
data: [100],
barWidth: 18,
@@ -381,7 +397,7 @@ const echart = () => {
}
options.value = {
title: {
text: `监测点异常情况(${mapList.value[0].time} ~ ${mapList.value[mapList.value.length - 1].time})`
text: `监测点异常统计(${mapList.value[0].time} ~ ${mapList.value[mapList.value.length - 1].time})`
},
xAxis: {
name: '时间',
@@ -405,7 +421,7 @@ const echart = () => {
name: '数量' // 给X轴加单位
},
grid: {},
color: ['#FF9100'],
options: {
series: [
{
@@ -426,8 +442,9 @@ tableStore.table.params.objType = ''
tableStore.table.params.alarmDayLimit = 5
tableStore.table.params.warnDayLimit = 1
const quantityClick = (e: any) => {
anomalyDetailsRef.value.open(e)
const quantityClick = (e: any, num: number) => {
if (num == 0 && e.ids?.length == 0) return
anomalyDetailsRef.value.open(e, time.value, num)
}
// 更新
const MonitorVerify = () => {
@@ -438,9 +455,25 @@ const MonitorVerify = () => {
tableStore.table.loading = false
})
}
const formatter = (row: any) => {
return row.cellValue || '/'
}
// 导出
const onExport = () => {
tableStore.table.allFlag = true
tableRef.value?.exportData({
filename: tableStore.table.filename, // 文件名字
sheetName: 'Sheet1',
type: 'xlsx', //导出文件类型 xlsx 和 csv
useStyle: true,
data: tableStore.table.data, // 数据源 // 过滤那个字段导出
columnFilterMethod: function (column: any) {
return !(
column.column.title === undefined ||
column.column.title === '序号' ||
column.column.title === '操作'
)
}
})
}
onMounted(() => {
TableHeaderRef.value.setDatePicker([
@@ -577,7 +610,7 @@ provide('tableStore', tableStore)
font-weight: 600;
div:nth-child(2) {
font-size: 16px;
color: #fca955;
color: #ff6600;
}
}
@@ -586,8 +619,26 @@ provide('tableStore', tableStore)
}
:deep(.el-segmented__item, ) {
clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
position: relative
}
:deep(.el-segmented) {
clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
}
.text-red {
color: #ff9100 !important;
cursor: pointer;
text-decoration: underline;
}
.segmentedIcon {
position: absolute;
top: 1px;
left: 100px;
height: 18px !important;
line-height: 19px;
padding: 0 4px;
font-size: 12px;
background: #ff9100;
color: #fff;
border-radius: 8px;
}
</style>

381
src/views/pqs/runManage/cleaning/components/alarm.vue
View File

@@ -1,7 +1,6 @@
<!--业务用户管理界面-->
<template>
<div>
<TableHeader date-picker>
<TableHeader date-picker ref="TableHeaderRef">
<template v-slot:select>
<el-form-item label="对象类型">
<el-select
@@ -22,7 +21,7 @@
<template v-slot:operation></template>
</TableHeader>
<div class="card-list pt10">
<div class="card-list pt10" v-loading="loading">
<div class="monitoringPoints">
<el-card style="height: 200px">
<template #header>
@@ -38,9 +37,9 @@
<span class="divBox_num" style="color: #57bc6e">{{ monitoringPoints.runNum }}</span>
</div>
<div class="divBox" style="width: 200px">
<span class="iconfont icon-yichang" style="color: #ff0000"></span>
<span class="iconfont icon-yichang" style="color: #FFBF00"></span>
<span class="divBox_title">告警测点数</span>
<span class="divBox_num" style="color: #ff0000">
<span class="divBox_num" style="color: #FFBF00">
{{ monitoringPoints.abnormalNum }}
</span>
</div>
@@ -66,9 +65,7 @@
<span>告警指标统计</span>
</div>
</template>
<div class="mb5" style="height: 40px">
<el-segmented style="height: 100%" v-model="segmented" :options="segmentedList" block />
</div>
<div class="header">
<span style="flex: 1; text-align: left">指标名称</span>
@@ -77,15 +74,16 @@
<div :style="indicatorHeight" style="overflow-y: auto">
<div v-for="o in abnormal" class="abnormal mb10">
<span style="flex: 1; height: 24px" class="iconDiv">
<div :style="{ backgroundColor: o.ids.length > 0 ? '#ff9800' : '' }"></div>
<div :style="{ backgroundColor: o.ids.length > 0 ? '#FFBF00' : '' }"></div>
{{ o.targetName }}
</span>
<span style="width: 110px; text-align: center">
<span
style="color: #ff9800; cursor: pointer; text-decoration: underline"
style="color: #388e3c"
:class="` ${o.ids.length > 0 ? 'text-red' : ''}`"
class="text"
@click="quantityClick(o)"
@click="quantityClick(o, 0)"
>
{{ o.ids.length }}
</span>
@@ -122,12 +120,64 @@
/>
</el-form-item>
<el-form-item class="form_but">
<el-button type="primary" icon="el-icon-Refresh">更新</el-button>
<el-button type="primary" icon="el-icon-Download">导出</el-button>
<el-button type="primary" @click="MonitorVerify" icon="el-icon-Refresh">更新</el-button>
<el-button type="primary" @click="onExport" icon="el-icon-Download">导出</el-button>
</el-form-item>
</el-form>
<!--表格-->
<Table ref="tableRef"></Table>
<div :style="{ height: tableStore.table.height }" v-loading="tableStore.table.loading">
<vxe-table height="auto" :data="tableStore.table.data" v-bind="defaultAttribute" ref="tableRef">
<vxe-column type="seq" title="序号" width="80px">
<template #default="{ rowIndex }">
<span>
{{
(tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize +
rowIndex +
1
}}
</span>
</template>
</vxe-column>
<vxe-column field="monitorName" title="监测点名称">
<template #default="{ row }">
<span class="table_name">
{{ row.monitorName }}
</span>
</template>
</vxe-column>
<vxe-column field="devName" title="所属终端名称">
<template #default="{ row }">
<span class="table_name">
{{ row.devName }}
</span>
</template>
</vxe-column>
<vxe-column field="stationName" title="所属电站">
<template #default="{ row }">
<span class="table_name">
{{ row.stationName }}
</span>
</template>
</vxe-column>
<vxe-column field="objType" title="监测对象类型" :formatter="formatter"></vxe-column>
<vxe-column field="objName" title="监测对象名称" :formatter="formatter"></vxe-column>
<vxe-column field="voltageLevel" title="电压等级"></vxe-column>
<vxe-column field="abnormalDay" title="告警天数">
<template #default="{ row }">
<span class="table_name" @click="quantityClick(row, 1)">
{{ row.abnormalDay }}
</span>
</template>
</vxe-column>
<vxe-column field="abnormalDay" title="严重度">
<template #default="{ row }">
<el-tag type="warning" v-if="row.severity == 0">预警</el-tag>
<el-tag type="danger" v-if="row.severity == 1">告警</el-tag>
</template>
</vxe-column>
</vxe-table>
</div>
<!-- <Table ref="tableRef"></Table> -->
</el-card>
</div>
<alarmDetails ref="alarmDetailsRef" />
@@ -139,178 +189,63 @@ import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import { onMounted, provide, ref } from 'vue'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import { useDictData } from '@/stores/dictData'
import { mainHeight } from '@/utils/layout'
import MyEchart from '@/components/echarts/MyEchart.vue'
import alarmDetails from './alarmDetails.vue'
import { useConfig } from '@/stores/config'
import { getMonitorLimitDataDay } from '@/api/device-boot/dataVerify'
import { queryFirstNode } from '@/api/auth'
const alarmDetailsRef = ref()
const dictData = useDictData()
//字典获取监督对象类型
const objTypeList: any = ref([])
const pageHeight = mainHeight(155)
const indicatorHeight = mainHeight(507)
const tableRef = ref()
const pageHeight = mainHeight(157)
const indicatorHeight = mainHeight(462)
const monitoringPoints = ref({
runNum: 0,
abnormalNum: 0
})
const tableRef = ref()
const percentage = ref({})
const loading = ref(false)
const TableHeaderRef = ref()
const abnormal: any = ref([])
const mapList: any = ref([])
const segmented = ref(1)
const segmentedList = [
{
label: '基础数据',
value: 1
},
{
label: '稳态数据',
value: 2
},
{
label: '暂态数据',
value: 3
}
]
const time = ref(['', ''])
const tableStore = new TableStore({
url: '/device-boot/dataVerify/getMonitorVerifyData',
url: '/device-boot/dataVerify/getMonitorLimitData',
method: 'POST',
showPage: false,
publicHeight: 480,
column: [
{
title: '序号',
width: 80,
formatter: (row: any) => {
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
}
filename: '稳态告警统计',
publicHeight: 530,
column: [],
beforeSearchFun: () => {
loading.value = true
time.value = [tableStore.table.params.startTime, tableStore.table.params.endTime]
},
{
title: '监测点名称',
field: 'monitorName',
type: 'html',
formatter: (row, column) => {
return `<div class="table_name">${row.cellValue}</div>`
}
},
{
title: '所属终端名称',
field: 'devName',
type: 'html',
formatter: (row, column) => {
return `<div class="table_name">测试终端</div>`
// `<div class="table_name">${row.cellValue}</div>`
}
},
{
title: '所属电站',
field: 'stationName',
type: 'html',
formatter: (row, column) => {
return `<div class="table_name">${row.cellValue}</div>`
}
},
{
title: '监测对象类型',
field: 'objType',
formatter: (row, column) => {
return `测试光伏电站`
}
},
{
title: '监测对象名称',
field: 'objName',
formatter: (row, column) => {
return `测试对象`
}
},
{ title: '电压等级', field: 'voltageLevel' },
{
title: '告警天数',
field: 'abnormalDay',
type: 'html',
formatter: (row, column) => {
return `<div class="table_name">${row.cellValue}</div>`
}
},
{
title: '严重度',
field: 'severity',
render: 'tag',
custom: {
0: 'warning',
1: 'danger'
},
replaceValue: {
0: '预警',
1: '告警'
}
},
{
title: '操作',
width: '120',
render: 'buttons',
buttons: [
{
name: 'edit',
title: '工单',
type: 'primary',
icon: 'el-icon-Plus',
render: 'basicButton',
click: row => {}
}
]
}
],
loadCallback: () => {
console.log('🚀 ~ abnormal.value:', tableStore.table.data)
// console.log('🚀 ~ abnormal.value:', tableStore.table.data)
monitoringPoints.value.runNum = tableStore.table.data.runNum //总数
monitoringPoints.value.abnormalNum = tableStore.table.data.abnormalNum //告警测点数
abnormal.value = tableStore.table.data.targetList
mapList.value = tableStore.table.data.mapList
tableStore.table.allData = tableStore.table.data.monitorAlarmInfo
tableStore.table.data = tableStore.table.data.monitorAlarmInfo
echart()
loading.value = false
}
})
const options = ref({
title: {
text: '监测点告警情况(2025-03-01~2025-03-10)'
},
legend: {
show: false
},
xAxis: {
name: '时间',
axisLine: {
show: true
},
data: ['03-01', '03-02', '03-03', '03-04', '03-05', '03-06', '03-07', '03-08', '03-09', '03-10']
},
yAxis: {
name: '数量' // 给X轴加单位
},
grid: {},
options: {
series: [
{
name: '告警监测点数量',
type: 'bar',
data: [11, 11, 11, 11, 0, 0, 0, 0, 0, 0]
}
]
}
})
const options = ref({})
const echart = () => {
percentage.value = {
color: ['#ff9800'],
color: ['#FFBF00'],
options: {
dataZoom: null,
toolbox: {
@@ -318,8 +253,8 @@ const echart = () => {
},
grid: {
top: '0%',
left: '2%',
right: '2%',
left: '0%',
right: '0%',
bottom: '0%'
},
tooltip: {
@@ -340,11 +275,41 @@ const echart = () => {
],
series: [
{
name: '告警总数',
type: 'bar',
barWidth: 12,
data: [100],
z: 0,
zlevel: 0,
itemStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 1,
color: '#57bc6e' // 100% 处的颜色
}
],
global: false // 缺省为 false
}
}
}
},
{
name: '告警占比',
type: 'bar',
barWidth: 12,
data: [((monitoringPoints.value.abnormalNum / monitoringPoints.value.runNum) * 100).toFixed(2)],
data: [
((monitoringPoints.value.abnormalNum / monitoringPoints.value.runNum) * 100) == 0
? ''
: ((monitoringPoints.value.abnormalNum / monitoringPoints.value.runNum) * 100).toFixed(2)
],
z: 0,
zlevel: 0,
@@ -359,11 +324,11 @@ const echart = () => {
colorStops: [
{
offset: 0,
color: '#ff0007' // 0% 处的颜色
color: '#FFBF00' // 0% 处的颜色
},
{
offset: 1,
color: '#E22331' // 100% 处的颜色
color: '#FFBF00' // 100% 处的颜色
}
],
global: false // 缺省为 false
@@ -382,7 +347,7 @@ const echart = () => {
// symbolMargin: 300,
symbol: 'rect',
symbolClip: true,
symbolSize: [2, 15],
symbolSize: [2, 20],
symbolPosition: 'start',
symbolOffset: [0, 0],
data: [100],
@@ -390,9 +355,9 @@ const echart = () => {
zlevel: 0
},
{
name: '机器故障率',
name: '',
type: 'bar',
barGap: '-125%',
barGap: '-110%',
data: [100],
barWidth: 18,
@@ -408,16 +373,92 @@ const echart = () => {
]
}
}
options.value = {
title: {
text: `监测点告警统计(${mapList.value[0].time} ~ ${mapList.value[mapList.value.length - 1].time})`
},
xAxis: {
name: '时间',
axisLine: {
show: true
},
data: mapList.value.map(item => item.time),
axisLabel: {
formatter: function (value) {
let time = ''
if (value.slice(-2) == '01') {
time = value
} else {
time = value.slice(5, 10)
}
return time
}
}
},
yAxis: {
name: '数量' // 给X轴加单位
},
grid: {},
color: ['#FFBF00'],
options: {
series: [
{
name: '告警监测点数量',
type: 'bar',
data: mapList.value.map(item => item.val)
// mapList.value.map(item => ({
// value: [item.time, item.val]
// }))
}
]
}
}
}
tableStore.table.params.deptId = dictData.state.area[0].id
tableStore.table.params.objType = ''
tableStore.table.params.alarmDayLimit = 5
tableStore.table.params.warnDayLimit = 1
const quantityClick = (e: any) => {
alarmDetailsRef.value.open(e)
const quantityClick = (e: any, num: number) => {
if (num == 0 && e.ids?.length == 0) return
alarmDetailsRef.value.open(e, time.value, num)
}
// 更新
const MonitorVerify = () => {
tableStore.table.loading = true
getMonitorLimitDataDay(tableStore.table.params).then(res => {
tableStore.table.data = res.data
tableStore.table.allData = res.data
tableStore.table.loading = false
})
}
const formatter = (row: any) => {
return row.cellValue || '/'
}
// 导出
const onExport = () => {
tableRef.value?.exportData({
filename: tableStore.table.filename, // 文件名字
sheetName: 'Sheet1',
type: 'xlsx', //导出文件类型 xlsx 和 csv
useStyle: true,
data: tableStore.table.data, // 数据源 // 过滤那个字段导出
columnFilterMethod: function (column: any) {
return !(
column.column.title === undefined ||
column.column.title === '序号' ||
column.column.title === '操作'
)
}
})
}
onMounted(() => {
TableHeaderRef.value.setDatePicker([
{ label: '年份', value: 1 },
{ label: '季度', value: 2 },
{ label: '月份', value: 3 }
])
queryFirstNode({ type: 0 }).then(res => {
objTypeList.value = res.data
})
@@ -437,8 +478,9 @@ provide('tableStore', tableStore)
.statistics {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 10px;
.divBox {
margin: 0 10px 10px 0;
width: 200px;
height: 70px;
padding: 10px;
@@ -464,7 +506,7 @@ provide('tableStore', tableStore)
background-color: #eef8f0;
}
&:nth-child(2) {
background-color: #ffd7d7;
background-color: #fff6ed;
}
&:nth-child(3) {
background-color: #e5f8f6;
@@ -546,7 +588,7 @@ provide('tableStore', tableStore)
font-weight: 600;
div:nth-child(2) {
font-size: 16px;
color: #ff0000;
color: #FFBF00;
}
}
@@ -559,4 +601,9 @@ provide('tableStore', tableStore)
:deep(.el-segmented) {
clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
}
.text-red {
color: #FFBF00 !important;
cursor: pointer;
text-decoration: underline;
}
</style>

254
src/views/pqs/runManage/cleaning/components/alarmDetails.vue
View File

@@ -1,37 +1,51 @@
<template>
<el-dialog draggable width="1300px" class="cn-operate-dialog" v-model="dialogVisible" :title="title">
<el-dialog draggable width="1200px" class="cn-operate-dialog" v-model="dialogVisible" :title="title">
<div style="display: flex">
<div :style="height1" class="mr10" style="width: 450px">
<vxe-table height="auto" :data="TableData" v-bind="defaultAttribute">
<div :style="height1" class="mr10 box" style="width: 450px">
<vxe-table
height="auto"
:data="TableData"
v-bind="defaultAttribute"
ref="tableRef"
:row-config="{ isCurrent: true, isHover: true }"
@current-change="currentChangeEvent"
>
<vxe-column type="seq" title="序号" width="60px"></vxe-column>
<vxe-column field="time" title="日期">
<template #default="{ row }">
<span class="time">{{ row.time }}</span>
<vxe-column field="date" title="日期"></vxe-column>
<vxe-column field="monitorName" title="监测点名称" width="120px"></vxe-column>
<vxe-column field="timeSum" title="告警时间(分钟)" width="80px"></vxe-column>
</vxe-table>
</div>
<div :style="height" style="width: 720px" v-loading="loading1">
<vxe-table
height="auto"
:data="TableData1.slice((pageNum - 1) * pageSize, pageNum * pageSize)"
v-bind="defaultAttribute"
>
<vxe-column type="seq" title="序号" width="80px">
<template #default="{ rowIndex }">
<span>{{ (pageNum - 1) * pageSize + rowIndex + 1 }}</span>
</template>
</vxe-column>
<vxe-column field="name" title="监测点名称" width="120px"></vxe-column>
<vxe-column field="fz" title="告警时间(分钟)" width="80px"></vxe-column>
</vxe-table>
</div>
<vxe-column field="time" title="时间" width="150px"></vxe-column>
<vxe-column field="targetName" title="指标类型" min-width="100px"></vxe-column>
<vxe-column field="phaseType" title="相别" width="60px"></vxe-column>
<el-tabs v-model="activeName" type="border-card" style="width: 820px">
<el-tab-pane :label="`变电站1 > 测试监测点1_告警指标详情`" name="first">
<div :style="height">
<vxe-table height="auto" :data="TableData1" v-bind="defaultAttribute">
<vxe-column type="seq" title="序号" width="60px"></vxe-column>
<vxe-column field="time" title="时间" min-width="120px"></vxe-column>
<vxe-column field="indexType" title="指标类型" min-width="100px"></vxe-column>
<vxe-column field="phase" title="相别" width="60px"></vxe-column>
<vxe-column field="range" title="合理范围" min-width="60px"></vxe-column>
<vxe-column field="max" title="最大" width="60px"></vxe-column>
<vxe-column field="min" title="最小" width="60px"></vxe-column>
<vxe-column field="average" title="平均" width="60px"></vxe-column>
<vxe-column field="cp95" title="CP95" width="60px"></vxe-column>
<vxe-column field="type" title="数据类型" width="105px" :formatter="formatter1"></vxe-column>
<vxe-column field="val" title="值" width="85px" :formatter="formatter"></vxe-column>
</vxe-table>
<div class="table-pagination">
<el-pagination
v-model:currentPage="pageNum"
v-model:page-size="pageSize"
:page-sizes="[10, 20, 50, 100, 200]"
background
layout="sizes,total, ->, prev, pager, next, jumper"
:total="TableData1.length"
></el-pagination>
</div>
</div>
</el-tab-pane>
</el-tabs>
</div>
</el-dialog>
</template>
@@ -40,139 +54,79 @@ import { ref, inject } from 'vue'
import { reactive } from 'vue'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import { ElMessage } from 'element-plus'
import TableStore from '@/utils/tableStore' // 若不是列表页面弹框可删除
import { monitorLimitTable, monitorLimitTableDetail } from '@/api/device-boot/dataVerify'
import { mainHeight } from '@/utils/layout'
const dialogVisible = ref(false)
const height1 = mainHeight(-110, 2)
const height = mainHeight(10, 2)
const tableRef = ref()
const title = ref('')
const activeName = 'first'
const TableData = ref([
{
time: '2025-01-01',
name: '测试监测点1',
fz: 100
},
{
time: '2025-01-01',
name: '测试监测点2',
fz: 100
},
{
time: '2025-01-01',
name: '测试监测点3',
fz: 100
},
{
time: '2025-01-01',
name: '测试监测点4',
fz: 100
}
])
const TableData1 = ref([
{
num: 1,
time: '2025/01/01 11:10:00',
indexType: '频率',
phase: 'T',
range: '42.5~57.5',
max: '/',
min: '/',
average: 60,
cp95: '/'
},
{
num: 2,
time: '2025/01/01 11:20:00',
indexType: '频率',
phase: 'T',
range: '42.5~57.5',
max: '/',
min: '/',
average: 60,
cp95: '/'
},
{
num: 3,
time: '2025/01/01 11:30:00',
indexType: '频率',
phase: 'T',
range: '42.5~57.5',
max: 65,
min: 60,
average: 62,
cp95: 61
},
{
num: 4,
time: '2025/01/01 11:40:00',
indexType: '频率',
phase: 'T',
range: '42.5~57.5',
max: 65,
min: 60,
average: 62,
cp95: 61
},
{
num: 5,
time: '2025/01/01 11:50:00',
indexType: '相电压',
phase: 'A',
range: '42.5~57.5',
max: '/',
min: 290,
average: '/',
cp95: '/'
},
{
num: 6,
time: '2025/01/01 12:10:00',
indexType: '相电压',
phase: 'B',
range: '42.5~57.5',
max: 220,
min: 290,
average: 220,
cp95: 220
},
{
num: 7,
time: '2025/01/01 12:20:00',
indexType: '相电压',
phase: 'C',
range: '42.5~57.5',
max: '/',
min: 290,
average: '/',
cp95: '/'
},
{
num: 8,
time: '2025/01/01 12:30:00',
indexType: '相电压',
phase: 'A',
range: '42.5~57.5',
max: 220,
min: 290,
average: 220,
cp95: 220
}
])
const open = (data: anyObj) => {
title.value = data.targetName + '_告警详情展示'
const loading1 = ref(false)
const TableData = ref([])
const TableData1 = ref([])
const pageNum = ref(1)
const pageSize = ref(20)
const numKey = ref(0)
const targetKey = ref('')
const open = (data: anyObj, time: string[], num: number) => {
// title.value = (num == 0 ? data.targetName : data.monitorName) + '_告警详情展示'
title.value = '告警监测点详情'
numKey.value = num
targetKey.value = data.key
TableData.value = []
monitorLimitTable({
monitorIds: num == 0 ? data.ids : [data.monitorId],
targetKey: num == 0 ? data.key : '',
searchBeginTime: time[0],
searchEndTime: time[1]
}).then(res => {
TableData.value = res.data
tableRef.value.setCurrentRow(TableData.value[0])
currentChangeEvent()
})
dialogVisible.value = true
}
const currentChangeEvent = () => {
loading1.value = true
let data = tableRef.value.getCurrentRecord()
TableData1.value = []
monitorLimitTableDetail({
monitorIds: [data.monitorId],
searchBeginTime: data.date,
targetKey: numKey.value == 0 ? targetKey.value : ''
})
.then(res => {
TableData1.value = res.data
loading1.value = false
pageNum.value = 1
})
.catch(() => {
loading1.value = false
})
}
const formatter1 = (row: any) => {
return row.cellValue == null ? '/' : row.cellValue
}
const formatter = (row: any) => {
return row.cellValue == null ? '/' : (row.cellValue - 0).toFixed(2)
}
defineExpose({ open })
</script>
<style lang="scss" scoped>
.time {
color: var(--el-color-primary);
cursor: pointer;
text-decoration: underline;
text-underline-offset: 4px;
.table-pagination {
height: 58px;
box-sizing: border-box;
width: 100%;
max-width: 100%;
background-color: var(--ba-bg-color-overlay);
padding: 13px 15px;
border-left: 1px solid #e4e7e9;
border-right: 1px solid #e4e7e9;
border-bottom: 1px solid #e4e7e9;
}
:deep(.box) {
.row--current {
background-color: var(--el-color-primary-light-8) !important;
}
}
</style>

253
src/views/pqs/runManage/cleaning/components/anomalyDetails.vue
View File

@@ -1,37 +1,53 @@
<template>
<el-dialog draggable width="1300px" class="cn-operate-dialog" v-model="dialogVisible" :title="title">
<el-dialog draggable width="1400px" class="cn-operate-dialog" v-model="dialogVisible" :title="title">
<div style="display: flex">
<div :style="height1" class="mr10" style="width: 450px">
<vxe-table height="auto" :data="TableData" v-bind="defaultAttribute">
<div :style="height1" class="mr10 box" style="width: 450px">
<vxe-table
height="auto"
:data="TableData"
v-bind="defaultAttribute"
ref="tableRef"
:row-config="{ isCurrent: true, isHover: true }"
@current-change="currentChangeEvent"
>
<vxe-column type="seq" title="序号" width="60px"></vxe-column>
<vxe-column field="time" title="日期">
<template #default="{ row }">
<span class="time">{{ row.time }}</span>
<vxe-column field="date" title="日期"></vxe-column>
<vxe-column field="monitorName" title="监测点名称" width="120px"></vxe-column>
<vxe-column field="timeSum" title="异常时间(分钟)" width="80px"></vxe-column>
</vxe-table>
</div>
<div :style="height" style="width: 920px" v-loading="loading1">
<vxe-table
height="auto"
:data="TableData1.slice((pageNum - 1) * pageSize, pageNum * pageSize)"
v-bind="defaultAttribute"
>
<vxe-column type="seq" title="序号" width="80px">
<template #default="{ rowIndex }">
<span>{{ (pageNum - 1) * pageSize + rowIndex + 1 }}</span>
</template>
</vxe-column>
<vxe-column field="name" title="监测点名称" width="120px"></vxe-column>
<vxe-column field="fz" title="异常时间(分钟)" width="80px"></vxe-column>
<vxe-column field="time" title="时间" width="150px"></vxe-column>
<vxe-column field="targetName" title="指标类型" min-width="100px"></vxe-column>
<vxe-column field="phaseType" title="相别" width="60px"></vxe-column>
<vxe-column field="rangeDesc" title="合理范围" min-width="60px"></vxe-column>
<vxe-column field="max" title="最大" width="85px" :formatter="formatter"></vxe-column>
<vxe-column field="min" title="最小" width="85px" :formatter="formatter"></vxe-column>
<vxe-column field="avg" title="平均" width="85px" :formatter="formatter"></vxe-column>
<vxe-column field="cp95" title="CP95" width="85px" :formatter="formatter"></vxe-column>
</vxe-table>
<div class="table-pagination">
<el-pagination
v-model:currentPage="pageNum"
v-model:page-size="pageSize"
:page-sizes="[10, 20, 50, 100, 200]"
background
layout="sizes,total, ->, prev, pager, next, jumper"
:total="TableData1.length"
></el-pagination>
</div>
<el-tabs v-model="activeName" type="border-card" style="width: 820px">
<el-tab-pane :label="`变电站1 > 测试监测点1_异常指标详情`" name="first">
<div :style="height">
<vxe-table height="auto" :data="TableData1" v-bind="defaultAttribute">
<vxe-column type="seq" title="序号" width="60px"></vxe-column>
<vxe-column field="time" title="时间" min-width="120px"></vxe-column>
<vxe-column field="indexType" title="指标类型" min-width="100px"></vxe-column>
<vxe-column field="phase" title="相别" width="60px"></vxe-column>
<vxe-column field="range" title="合理范围" min-width="60px"></vxe-column>
<vxe-column field="max" title="最大" width="60px"></vxe-column>
<vxe-column field="min" title="最小" width="60px"></vxe-column>
<vxe-column field="average" title="平均" width="60px"></vxe-column>
<vxe-column field="cp95" title="CP95" width="60px"></vxe-column>
</vxe-table>
</div>
</el-tab-pane>
</el-tabs>
</div>
</el-dialog>
</template>
@@ -40,139 +56,76 @@ import { ref, inject } from 'vue'
import { reactive } from 'vue'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import { ElMessage } from 'element-plus'
import TableStore from '@/utils/tableStore' // 若不是列表页面弹框可删除
import { monitorAbnormalTable, monitorAbnormalTableDetail } from '@/api/device-boot/dataVerify'
import { mainHeight } from '@/utils/layout'
const dialogVisible = ref(false)
const height1 = mainHeight(-110, 2)
const height = mainHeight(10, 2)
const tableRef = ref()
const title = ref('')
const activeName = 'first'
const TableData = ref([
{
time: '2025-01-01',
name: '测试监测点1',
fz: 100
},
{
time: '2025-01-01',
name: '测试监测点2',
fz: 100
},
{
time: '2025-01-01',
name: '测试监测点3',
fz: 100
},
{
time: '2025-01-01',
name: '测试监测点4',
fz: 100
}
])
const TableData1 = ref([
{
num: 1,
time: '2025/01/01 11:10:00',
indexType: '频率',
phase: 'T',
range: '42.5~57.5',
max: '/',
min: '/',
average: 60,
cp95: '/'
},
{
num: 2,
time: '2025/01/01 11:20:00',
indexType: '频率',
phase: 'T',
range: '42.5~57.5',
max: '/',
min: '/',
average: 60,
cp95: '/'
},
{
num: 3,
time: '2025/01/01 11:30:00',
indexType: '频率',
phase: 'T',
range: '42.5~57.5',
max: 65,
min: 60,
average: 62,
cp95: 61
},
{
num: 4,
time: '2025/01/01 11:40:00',
indexType: '频率',
phase: 'T',
range: '42.5~57.5',
max: 65,
min: 60,
average: 62,
cp95: 61
},
{
num: 5,
time: '2025/01/01 11:50:00',
indexType: '相电压',
phase: 'A',
range: '42.5~57.5',
max: '/',
min: 290,
average: '/',
cp95: '/'
},
{
num: 6,
time: '2025/01/01 12:10:00',
indexType: '相电压',
phase: 'B',
range: '42.5~57.5',
max: 220,
min: 290,
average: 220,
cp95: 220
},
{
num: 7,
time: '2025/01/01 12:20:00',
indexType: '相电压',
phase: 'C',
range: '42.5~57.5',
max: '/',
min: 290,
average: '/',
cp95: '/'
},
{
num: 8,
time: '2025/01/01 12:30:00',
indexType: '相电压',
phase: 'A',
range: '42.5~57.5',
max: 220,
min: 290,
average: 220,
cp95: 220
}
])
const open = (data: anyObj) => {
title.value = data.targetName + '_异常详情展示'
const loading1 = ref(false)
const TableData = ref([])
const TableData1 = ref([])
const pageNum = ref(1)
const pageSize = ref(20)
const numKey = ref(0)
const targetKey = ref('')
const open = (data: anyObj, time: string[], num: number) => {
// title.value = (num == 0 ? data.targetName : data.monitorName) + '_异常监测点详情'
title.value ='异常监测点详情'
TableData.value = []
numKey.value = num
targetKey.value = data.key
monitorAbnormalTable({
monitorIds: num == 0 ? data.ids : [data.monitorId],
targetKey: num == 0 ? data.key : '',
searchBeginTime: time[0],
searchEndTime: time[1]
}).then(res => {
TableData.value = res.data
tableRef.value.setCurrentRow(TableData.value[0])
currentChangeEvent()
})
dialogVisible.value = true
}
const currentChangeEvent = () => {
loading1.value = true
let data = tableRef.value.getCurrentRecord()
TableData1.value = []
monitorAbnormalTableDetail({
monitorIds: [data.monitorId],
searchBeginTime: data.date,
targetKey: numKey.value == 0 ? targetKey.value : ''
})
.then(res => {
TableData1.value = res.data
loading1.value = false
pageNum.value = 1
})
.catch(() => {
loading1.value = false
})
}
const formatter = (row: any) => {
return row.cellValue == null ? '/' : (row.cellValue - 0).toFixed(2)
}
defineExpose({ open })
</script>
<style lang="scss" scoped>
.time {
color: var(--el-color-primary);
cursor: pointer;
text-decoration: underline;
text-underline-offset: 4px;
.table-pagination {
height: 58px;
box-sizing: border-box;
width: 100%;
max-width: 100%;
background-color: var(--ba-bg-color-overlay);
padding: 13px 15px;
border-left: 1px solid #e4e7e9;
border-right: 1px solid #e4e7e9;
border-bottom: 1px solid #e4e7e9;
}
:deep(.box) {
.row--current {
background-color: var(--el-color-primary-light-8) !important;
}
}
</style>

562
src/views/pqs/runManage/cleaning/components/test.vue Normal file
View File

@@ -0,0 +1,562 @@
<!--业务用户管理界面-->
<template>
<div>
<TableHeader date-picker>
<template v-slot:select>
<el-form-item label="对象类型">
<el-select
v-model="tableStore.table.params.objType"
clearable
style="width: 100%"
placeholder="请选择对象类型"
>
<el-option
v-for="item in objTypeList"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
</template>
<template v-slot:operation></template>
</TableHeader>
<div class="card-list pt10">
<div class="monitoringPoints">
<el-card style="height: 200px">
<template #header>
<div class="card-header">
<span>监测点统计</span>
</div>
</template>
<div>
<div class="statistics">
<div class="divBox">
<span class="iconfont icon-qiyezongshu" style="color: #57bc6e"></span>
<span class="divBox_title">监测点总数</span>
<span class="divBox_num" style="color: #57bc6e">{{ monitoringPoints.runNum }}</span>
</div>
<div class="divBox" style="width: 200px">
<span class="iconfont icon-yichang" style="color: #ff0000"></span>
<span class="divBox_title">告警测点数</span>
<span class="divBox_num" style="color: #ff0000">
{{ monitoringPoints.abnormalNum }}
</span>
</div>
</div>
<div class="echartTitle">
<div>告警占比</div>
<div>
{{
isNaN((monitoringPoints.abnormalNum / monitoringPoints.runNum) * 100)
? 0
: ((monitoringPoints.abnormalNum / monitoringPoints.runNum) * 100).toFixed(2)
}}%
</div>
</div>
<div style="height: 30px">
<MyEchart :options="percentage"></MyEchart>
</div>
</div>
</el-card>
<el-card class="mt10">
<template #header>
<div class="card-header">
<span>告警指标统计</span>
</div>
</template>
<div class="mb5" style="height: 40px">
<el-segmented style="height: 100%" v-model="segmented" :options="segmentedList" block />
</div>
<div class="header">
<span style="flex: 1; text-align: left">指标名称</span>
<span style="width: 110px">告警测点数</span>
</div>
<div :style="indicatorHeight" style="overflow-y: auto">
<div v-for="o in abnormal" class="abnormal mb10">
<span style="flex: 1; height: 24px" class="iconDiv">
<div :style="{ backgroundColor: o.ids.length > 0 ? '#ff9800' : '' }"></div>
{{ o.targetName }}
</span>
<span style="width: 110px; text-align: center">
<span
style="color: #ff9800; cursor: pointer; text-decoration: underline"
class="text"
@click="quantityClick(o)"
>
{{ o.ids.length }}
</span>
</span>
</div>
</div>
</el-card>
</div>
<el-card class="detail ml10" :style="pageHeight">
<template #header>
<div class="card-header">
<span>告警详情统计</span>
</div>
</template>
<div style="height: 350px">
<MyEchart :options="options"></MyEchart>
</div>
<el-form :inline="true" class="form">
<el-form-item label="告警持续天数"></el-form-item>
<el-form-item label="告警阀值(天)">
<el-input-number
v-model="tableStore.table.params.alarmDayLimit"
:min="0"
:step="1"
step-strictly
/>
</el-form-item>
<el-form-item label="预警阀值(天)">
<el-input-number
v-model="tableStore.table.params.warnDayLimit"
:min="0"
:step="1"
step-strictly
/>
</el-form-item>
<el-form-item class="form_but">
<el-button type="primary" icon="el-icon-Refresh">更新</el-button>
<el-button type="primary" icon="el-icon-Download">导出</el-button>
</el-form-item>
</el-form>
<!--表格-->
<Table ref="tableRef"></Table>
</el-card>
</div>
<alarmDetails ref="alarmDetailsRef" />
</div>
</template>
<script setup lang="ts">
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import { onMounted, provide, ref } from 'vue'
import { useDictData } from '@/stores/dictData'
import { mainHeight } from '@/utils/layout'
import MyEchart from '@/components/echarts/MyEchart.vue'
import alarmDetails from './alarmDetails.vue'
import { useConfig } from '@/stores/config'
import { queryFirstNode } from '@/api/auth'
const alarmDetailsRef = ref()
const dictData = useDictData()
//字典获取监督对象类型
const objTypeList: any = ref([])
const pageHeight = mainHeight(155)
const indicatorHeight = mainHeight(507)
const tableRef = ref()
const monitoringPoints = ref({
runNum: 0,
abnormalNum: 0
})
const percentage = ref({})
const abnormal: any = ref([])
const segmented = ref(1)
const segmentedList = [
{
label: '基础数据',
value: 1
},
{
label: '稳态数据',
value: 2
},
{
label: '暂态数据',
value: 3
}
]
const tableStore = new TableStore({
url: '/device-boot/dataVerify/getMonitorVerifyData',
method: 'POST',
showPage: false,
publicHeight: 480,
column: [
{
title: '序号',
width: 80,
formatter: (row: any) => {
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
}
},
{
title: '监测点名称',
field: 'monitorName',
type: 'html',
formatter: (row, column) => {
return `<div class="table_name">${row.cellValue}</div>`
}
},
{
title: '所属终端名称',
field: 'devName',
type: 'html',
formatter: (row, column) => {
return `<div class="table_name">测试终端</div>`
// `<div class="table_name">${row.cellValue}</div>`
}
},
{
title: '所属电站',
field: 'stationName',
type: 'html',
formatter: (row, column) => {
return `<div class="table_name">${row.cellValue}</div>`
}
},
{
title: '监测对象类型',
field: 'objType',
formatter: (row, column) => {
return `测试光伏电站`
}
},
{
title: '监测对象名称',
field: 'objName',
formatter: (row, column) => {
return `测试对象`
}
},
{ title: '电压等级', field: 'voltageLevel' },
{
title: '告警天数',
field: 'abnormalDay',
type: 'html',
formatter: (row, column) => {
return `<div class="table_name">${row.cellValue}</div>`
}
},
{
title: '严重度',
field: 'severity',
render: 'tag',
custom: {
0: 'warning',
1: 'danger'
},
replaceValue: {
0: '预警',
1: '告警'
}
},
{
title: '操作',
width: '120',
render: 'buttons',
buttons: [
{
name: 'edit',
title: '工单',
type: 'primary',
icon: 'el-icon-Plus',
render: 'basicButton',
click: row => {}
}
]
}
],
loadCallback: () => {
console.log('🚀 ~ abnormal.value:', tableStore.table.data)
monitoringPoints.value.runNum = tableStore.table.data.runNum //总数
monitoringPoints.value.abnormalNum = tableStore.table.data.abnormalNum //告警测点数
abnormal.value = tableStore.table.data.targetList
tableStore.table.data = tableStore.table.data.monitorAlarmInfo
echart()
}
})
const options = ref({
title: {
text: '监测点告警情况(2025-03-01~2025-03-10)'
},
legend: {
show: false
},
xAxis: {
name: '时间',
axisLine: {
show: true
},
data: ['03-01', '03-02', '03-03', '03-04', '03-05', '03-06', '03-07', '03-08', '03-09', '03-10']
},
yAxis: {
name: '数量' // 给X轴加单位
},
grid: {},
options: {
series: [
{
name: '告警监测点数量',
type: 'bar',
data: [11, 11, 11, 11, 0, 0, 0, 0, 0, 0]
}
]
}
})
const echart = () => {
percentage.value = {
color: ['#ff9800'],
options: {
dataZoom: null,
toolbox: {
show: false
},
grid: {
top: '0%',
left: '2%',
right: '2%',
bottom: '0%'
},
tooltip: {
show: false
},
legend: {
show: false
},
yAxis: {
show: false,
data: ['']
},
xAxis: [
{
show: false,
type: 'value'
}
],
series: [
{
name: '告警占比',
type: 'bar',
barWidth: 12,
data: [((monitoringPoints.value.abnormalNum / monitoringPoints.value.runNum) * 100).toFixed(2)],
z: 0,
zlevel: 0,
itemStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: '#ff0007' // 0% 处的颜色
},
{
offset: 1,
color: '#E22331' // 100% 处的颜色
}
],
global: false // 缺省为 false
}
}
}
},
{
type: 'pictorialBar',
itemStyle: {
normal: {
color: '#fff'
}
},
symbolRepeat: 50,
// symbolMargin: 300,
symbol: 'rect',
symbolClip: true,
symbolSize: [2, 15],
symbolPosition: 'start',
symbolOffset: [0, 0],
data: [100],
z: 1,
zlevel: 0
},
{
name: '机器故障率',
type: 'bar',
barGap: '-125%',
data: [100],
barWidth: 18,
itemStyle: {
normal: {
color: 'transparent',
barBorderColor: 'rgb(148,217,249)',
barBorderWidth: 1
}
},
z: 2
}
]
}
}
}
tableStore.table.params.deptId = dictData.state.area[0].id
tableStore.table.params.objType = ''
tableStore.table.params.alarmDayLimit = 5
tableStore.table.params.warnDayLimit = 1
const quantityClick = (e: any) => {
alarmDetailsRef.value.open(e)
}
onMounted(() => {
queryFirstNode({ type: 0 }).then(res => {
objTypeList.value = res.data
})
// 加载数据
tableStore.index()
})
tableStore.table.params.name = ''
provide('tableStore', tableStore)
</script>
<style lang="scss" scoped>
.card-list {
display: flex;
.monitoringPoints {
width: 440px;
position: relative;
.statistics {
display: flex;
flex-wrap: wrap;
.divBox {
margin: 0 10px 10px 0;
width: 200px;
height: 70px;
padding: 10px;
display: flex;
.iconfont {
font-size: 40px;
margin-right: 5px;
}
.divBox_title {
font-weight: 550;
}
.divBox_num {
font-size: 20px;
font-weight: 550;
margin-left: auto;
font-family: AlimamaDongFangDaKai;
}
align-items: center;
// text-align: center;
border-radius: 5px;
&:nth-child(1) {
background-color: #eef8f0;
}
&:nth-child(2) {
background-color: #ffd7d7;
}
&:nth-child(3) {
background-color: #e5f8f6;
}
}
}
}
.detail {
flex: 1;
}
.abnormal {
width: 100%;
background-color: #f3f6f9;
border-radius: 5px;
display: flex;
// justify-content: space-between;
align-items: center;
padding: 5px 0px 5px 10px;
.iconDiv {
display: flex;
align-items: center;
div {
width: 4px;
height: 18px;
margin-right: 5px;
background-color: var(--el-color-primary);
}
}
.text {
font-weight: 700;
font-size: 16px;
font-family: 'Source Code Pro', monospace;
// font-feature-settings: 'tnum';
}
}
}
.header {
display: flex;
text-align: center;
font-weight: 700;
padding: 5px;
}
:deep(.el-card__header) {
padding: 10px;
span {
font-weight: 600;
}
}
:deep(.el-card__body) {
padding: 10px;
}
.iconFont {
font-size: 18px;
display: inline-block;
vertical-align: middle;
}
.form {
position: relative;
.form_but {
position: absolute;
right: -22px;
}
}
.card-header {
font-size: 16px;
}
:deep(.table_name) {
color: var(--el-color-primary);
cursor: pointer;
text-decoration: underline;
text-underline-offset: 4px;
}
.echartTitle {
display: flex;
justify-content: space-between;
font-size: 14px;
font-weight: 600;
div:nth-child(2) {
font-size: 16px;
color: #ff0000;
}
}
:deep(.el-segmented__item-selected, ) {
clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
}
:deep(.el-segmented__item, ) {
clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
}
:deep(.el-segmented) {
clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
}
</style>

15
src/views/pqs/runManage/runEvaluate/components/region.vue
View File

@@ -29,6 +29,7 @@ const info = () => {
options.value = {
xAxis: {
type: 'value',
data:[10,100,200,300,400,500,600,700,800,900,1000],
axisLabel: {
show: true,
textStyle: {
@@ -43,7 +44,8 @@ const info = () => {
},
axisLine: {
show: true
}
},
},
grid: {
top: '10'
@@ -60,7 +62,8 @@ const info = () => {
},
splitLine: {
show: false
}
},
},
dataZoom: null,
series: [
@@ -70,11 +73,11 @@ const info = () => {
color: function (params) {
return params.value >= 90
? '#009900'
: params.value >= 60
: params.value >= 80
? '#77DA63'
: params.value >= 70
? '#FFCC00'
: params.value > 0
? '#CC0000'
: '#CCC'
: '#CC0000'
}
},