修改异常数据页面、修改有功功率趋势分析页面接口
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user