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

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

View File

@@ -14,239 +14,251 @@
<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>
<span>稳态越限图例: </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="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: item.crossTheLine > 0 ? 'red' : 'green' }">
{{ item.quantity }}
<span :style="{ color: scope.item.crossTheLine > 0 ? 'red' : 'green' }">
{{ scope.item.quantity }}
</span>
<span style="font-size: 14px; font-weight: 500"></span>
</div>
<div>
{{ item.label }}
{{ scope.item.label }}
</div>
</div>
</el-card>
</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>
</template>
<!-- <h3>功率区间稳态越限详情</h3> -->
<div :style="heightA" 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, '电压偏差(%)', 'Dev')
: ''
"
>
{{ 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, '谐波电压(%)', '2')
: ''
"
>
{{ 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)', '3')
: ''
"
>
{{ 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, '三相电压不平衡度(%)', 'Unbalance')
: ''
"
>
{{ 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, '长时闪变', 'plt')
: ''
"
>
{{ 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, '间谐波电压含有率(%)', '4')
: ''
"
>
{{ 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,
'电流不平衡度(%)',
'iNeg'
)
: ''
"
>
{{ row.sequenceCurrentUnbalance == '1' ? '越限' : '合格' }}
</el-link>
</template>
</vxe-column>
<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>
<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>
<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">
<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
<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">
<div class="card-header">
<span>报告参数</span>
</div>
<el-button
icon="el-icon-Download"
size="small"
type="primary"
:underline="false"
class="percentage"
@click="timeClick(row)"
@click="generateReports"
>
{{ row.time }}
</el-link>
</template>
</vxe-column>
<vxe-column field="voltageOffset" title="电压偏差(%)">
<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="谐波电压(%)">
<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)">
<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="三相电压不平衡度(%)">
<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="电压波动(%)">
<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="长时闪变">
<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="间谐波电压含有率(%)">
<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="电流不平衡度(%)">
<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>
生成报表
</el-button>
</div>
</template>
<vxe-column field="num3" title="操作" width="80">
<template #default="{ row }">
<el-button type="primary" link @click="addTo(row)">添加</el-button>
</template>
</vxe-column>
</vxe-table>
<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>
</el-card>
<el-card class="box">
<div :style="heightB" style="overflow-y: auto">
<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">
生成报表
</el-button>
</div>
<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>
</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>