Web/admin-govern
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

全局添加列配置功能

Browse Source
This commit is contained in:
guanj
2026-07-09 15:42:58 +08:00
parent 2106e2e9c1
commit e6313ca8c3
78 changed files with 7849 additions and 7549 deletions
Download Patch File Download Diff File Expand all files Collapse all files

528
src/views/govern/device/control/tabs/realtime.vue
View File

@@ -1,12 +1,13 @@
<template>
<div class="view" v-loading="loading">
<div class="charts-panel">
<el-collapse v-model="activeNames" class="charts-collapse">
<el-collapse-item name="1">
<template #title>
<div class="charts-collapse-header">
<div style="font-weight: 700; font-size: 13px; text-align: center">数据时间：{{ dataTime || '-' }}</div>
<div style="font-weight: 700; font-size: 13px; text-align: center">
数据时间：{{ dataTime || '-' }}
</div>
</div>
</template>
<template #icon>
@@ -54,79 +55,253 @@
</div>
<div class="view_bot">
<vxe-table border height="" :data="realList" :column-config="{ resizable: true, tooltip: true }"
:tooltip-config="{ enterable: true }">
<vxe-colgroup align="center" :title="`电压有效值(${voltageUnit})`" >
<vxe-column align="center" how-overflow-tooltip min-width="80" field="vRmsA" title="A相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="vRmsB" title="B相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="vRmsC" title="C相"></vxe-column>
<vxe-table
border
height=""
:data="realList"
v-bind="defaultAttribute"
:column-config="{ resizable: true, tooltip: true }"
:tooltip-config="{ enterable: true }"
>
<vxe-colgroup align="center" :title="`电压有效值(${voltageUnit})`">
<vxe-column
align="center"
how-overflow-tooltip
min-width="80"
field="vRmsA"
title="A相"
></vxe-column>
<vxe-column
align="center"
how-overflow-tooltip
min-width="80"
field="vRmsB"
title="B相"
></vxe-column>
<vxe-column
align="center"
how-overflow-tooltip
min-width="80"
field="vRmsC"
title="C相"
></vxe-column>
</vxe-colgroup>
<vxe-colgroup align="center" title="电流有效值(A)">
<vxe-column align="center" how-overflow-tooltip min-width="80" field="iRmsA" title="A相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="iRmsB" title="B相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="iRmsC" title="C相"></vxe-column>
<vxe-column
align="center"
how-overflow-tooltip
min-width="80"
field="iRmsA"
title="A相"
></vxe-column>
<vxe-column
align="center"
how-overflow-tooltip
min-width="80"
field="iRmsB"
title="B相"
></vxe-column>
<vxe-column
align="center"
how-overflow-tooltip
min-width="80"
field="iRmsC"
title="C相"
></vxe-column>
</vxe-colgroup>
<vxe-colgroup align="center" title="基波电压相位(°)">
<vxe-column align="center" how-overflow-tooltip min-width="80" field="v1AngA" title="A相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="v1AngB" title="B相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="v1AngC" title="C相"></vxe-column>
<vxe-column
align="center"
how-overflow-tooltip
min-width="80"
field="v1AngA"
title="A相"
></vxe-column>
<vxe-column
align="center"
how-overflow-tooltip
min-width="80"
field="v1AngB"
title="B相"
></vxe-column>
<vxe-column
align="center"
how-overflow-tooltip
min-width="80"
field="v1AngC"
title="C相"
></vxe-column>
</vxe-colgroup>
<vxe-colgroup align="center" title="基波电流相位(°)">
<vxe-column align="center" how-overflow-tooltip min-width="80" field="i1AngA" title="A相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="i1AngB" title="B相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="i1AngC" title="C相"></vxe-column>
<vxe-column
align="center"
how-overflow-tooltip
min-width="80"
field="i1AngA"
title="A相"
></vxe-column>
<vxe-column
align="center"
how-overflow-tooltip
min-width="80"
field="i1AngB"
title="B相"
></vxe-column>
<vxe-column
align="center"
how-overflow-tooltip
min-width="80"
field="i1AngC"
title="C相"
></vxe-column>
</vxe-colgroup>
</vxe-table>
<br />
<vxe-table border height="" :data="realList" :column-config="{ resizable: true, tooltip: true }"
:tooltip-config="{ enterable: true }">
<vxe-column align="center" field="freq"how-overflow-tooltip min-width="160" title="频率(Hz)"></vxe-column>
<vxe-column align="center" field="freqDev"how-overflow-tooltip min-width="160" title="频率偏差(Hz)"></vxe-column>
<vxe-column align="center"how-overflow-tooltip min-width="160" field="vUnbalance" title="电压不平衡度(%)"></vxe-column>
<vxe-column align="center"how-overflow-tooltip min-width="160" field="iUnbalance" title="电流不平衡度(%)"></vxe-column>
<vxe-table
border
height=""
:data="realList"
v-bind="defaultAttribute"
:column-config="{ resizable: true, tooltip: true }"
:tooltip-config="{ enterable: true }"
>
<vxe-column
align="center"
field="freq"
how-overflow-tooltip
min-width="160"
title="频率(Hz)"
></vxe-column>
<vxe-column
align="center"
field="freqDev"
how-overflow-tooltip
min-width="160"
title="频率偏差(Hz)"
></vxe-column>
<vxe-column
align="center"
how-overflow-tooltip
min-width="160"
field="vUnbalance"
title="电压不平衡度(%)"
></vxe-column>
<vxe-column
align="center"
how-overflow-tooltip
min-width="160"
field="iUnbalance"
title="电流不平衡度(%)"
></vxe-column>
<vxe-colgroup align="center" :title="`基波电压幅值(${voltageUnit})`">
<vxe-column align="center" how-overflow-tooltip min-width="80" field="v1A" title="A相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="v1B" title="B相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="v1C" title="C相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="v1A" title="A相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="v1B" title="B相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="v1C" title="C相"></vxe-column>
</vxe-colgroup>
<vxe-colgroup align="center" title="基波电流幅值(A)">
<vxe-column align="center" how-overflow-tooltip min-width="80" field="i1A" title="A相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="i1B" title="B相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="i1C" title="C相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="i1A" title="A相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="i1B" title="B相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="i1C" title="C相"></vxe-column>
</vxe-colgroup>
</vxe-table>
<br />
<vxe-table border height="" :data="realList" :column-config="{ resizable: true, tooltip: true }"
:tooltip-config="{ enterable: true }">
<vxe-table
border
height=""
:data="realList"
v-bind="defaultAttribute"
:column-config="{ resizable: true, tooltip: true }"
:tooltip-config="{ enterable: true }"
>
<vxe-colgroup align="center" title="电压偏差(%)">
<vxe-column align="center" how-overflow-tooltip min-width="80" field="vDevA" title="A相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="vDevB" title="B相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="vDevC" title="C相"></vxe-column>
<vxe-column
align="center"
how-overflow-tooltip
min-width="80"
field="vDevA"
title="A相"
></vxe-column>
<vxe-column
align="center"
how-overflow-tooltip
min-width="80"
field="vDevB"
title="B相"
></vxe-column>
<vxe-column
align="center"
how-overflow-tooltip
min-width="80"
field="vDevC"
title="C相"
></vxe-column>
</vxe-colgroup>
<vxe-colgroup align="center" title="电压总谐波畸变率(%)">
<vxe-column align="center" how-overflow-tooltip min-width="80" field="vThdA" title="A相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="vThdB" title="B相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="vThdC" title="C相"></vxe-column>
<vxe-column
align="center"
how-overflow-tooltip
min-width="80"
field="vThdA"
title="A相"
></vxe-column>
<vxe-column
align="center"
how-overflow-tooltip
min-width="80"
field="vThdB"
title="B相"
></vxe-column>
<vxe-column
align="center"
how-overflow-tooltip
min-width="80"
field="vThdC"
title="C相"
></vxe-column>
</vxe-colgroup>
<vxe-colgroup align="center" title="电流总谐波畸变率(%)">
<vxe-column align="center" how-overflow-tooltip min-width="80" field="iThdA" title="A相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="iThdB" title="B相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="iThdC" title="C相"></vxe-column>
<vxe-column
align="center"
how-overflow-tooltip
min-width="80"
field="iThdA"
title="A相"
></vxe-column>
<vxe-column
align="center"
how-overflow-tooltip
min-width="80"
field="iThdB"
title="B相"
></vxe-column>
<vxe-column
align="center"
how-overflow-tooltip
min-width="80"
field="iThdC"
title="C相"
></vxe-column>
</vxe-colgroup>
<vxe-colgroup align="center" :title="`有功功率(${powerUnit})`">
<vxe-column align="center" how-overflow-tooltip min-width="80" field="pA" title="A相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="pB" title="B相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="pC" title="C相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="pTot" title="总"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="pA" title="A相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="pB" title="B相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="pC" title="C相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="pTot" title="总"></vxe-column>
</vxe-colgroup>
</vxe-table>
<br />
<vxe-table border height="" :data="realList" :column-config="{ resizable: true, tooltip: true }"
:tooltip-config="{ enterable: true }">
<vxe-table
border
height=""
:data="realList"
v-bind="defaultAttribute"
:column-config="{ resizable: true, tooltip: true }"
:tooltip-config="{ enterable: true }"
>
<vxe-colgroup align="center" :title="`无功功率(${reactivePowerUnit})`">
<vxe-column align="center" how-overflow-tooltip min-width="80" field="qA" title="A相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="qB" title="B相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="qC" title="C相">
<vxe-column align="center" how-overflow-tooltip min-width="80" field="qA" title="A相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="qB" title="B相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="qC" title="C相">
<template #default="{ row }">
{{ row.qC }}
</template>
@@ -134,22 +309,52 @@
<vxe-column align="center" field="qTot" title="总"></vxe-column>
</vxe-colgroup>
<vxe-colgroup align="center" :title="`视在功率(${apparentPowerUnit})`">
<vxe-column align="center" how-overflow-tooltip min-width="80" field="sA" title="A相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="sB" title="B相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="sC" title="C相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="sTot" title="总"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="sA" title="A相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="sB" title="B相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="sC" title="C相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="sTot" title="总"></vxe-column>
</vxe-colgroup>
<vxe-colgroup align="center" title="视在功率因数(P/S)">
<vxe-column align="center" how-overflow-tooltip min-width="80" field="pfA" title="A相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="pfB" title="B相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="pfC" title="C相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="pfTot" title="总"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="pfA" title="A相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="pfB" title="B相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="pfC" title="C相"></vxe-column>
<vxe-column
align="center"
how-overflow-tooltip
min-width="80"
field="pfTot"
title="总"
></vxe-column>
</vxe-colgroup>
<vxe-colgroup align="center" title="位移功率因数(P/S1)">
<vxe-column align="center" how-overflow-tooltip min-width="80" field="dpfA" title="A相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="dpfB" title="B相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="dpfC" title="C相"></vxe-column>
<vxe-column align="center" how-overflow-tooltip min-width="80" field="dpfTot" title="总"></vxe-column>
<vxe-column
align="center"
how-overflow-tooltip
min-width="80"
field="dpfA"
title="A相"
></vxe-column>
<vxe-column
align="center"
how-overflow-tooltip
min-width="80"
field="dpfB"
title="B相"
></vxe-column>
<vxe-column
align="center"
how-overflow-tooltip
min-width="80"
field="dpfC"
title="C相"
></vxe-column>
<vxe-column
align="center"
how-overflow-tooltip
min-width="80"
field="dpfTot"
title="总"
></vxe-column>
</vxe-colgroup>
</vxe-table>
</div>
@@ -160,7 +365,7 @@ import { ref, onMounted, computed } from 'vue'
import { ArrowDown } from '@element-plus/icons-vue'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { getRealTimeTableList } from '@/api/cs-device-boot/EquipmentDelivery'
import { defaultAttribute } from '@/components/table/defaultAttribute'
const props = defineProps({
dataTime: String
@@ -189,7 +394,7 @@ const previousDataLevel = ref('')
const PHASE_COLORS = {
A: '#DAA520',
B: '#2E8B57',
C: '#A52a2a',
C: '#A52a2a'
}
const PHASE_RING_COLOR = '#9D322D'
@@ -199,7 +404,7 @@ type GaugeAlign = 'left' | 'right'
const createPhaseGaugeData = (name: string, value: number, color: string) => ({
name,
value,
itemStyle: { color, shadowBlur: 0, shadowColor: 'transparent' },
itemStyle: { color, shadowBlur: 0, shadowColor: 'transparent' }
})
const createRmsGaugeOptions = (name: string, color: string, align: GaugeAlign) => {
@@ -223,8 +428,8 @@ const createRmsGaugeOptions = (name: string, color: string, align: GaugeAlign) =
lineStyle: {
width: 5,
shadowBlur: 0,
color: [[1, color]],
},
color: [[1, color]]
}
},
axisTick: {
show: true,
@@ -233,14 +438,14 @@ const createRmsGaugeOptions = (name: string, color: string, align: GaugeAlign) =
lineStyle: {
color,
width: 2,
type: 'solid',
},
type: 'solid'
}
},
axisLabel: {
show: true,
distance: 12,
color,
fontSize: 12,
fontSize: 12
},
splitLine: {
show: true,
@@ -249,22 +454,22 @@ const createRmsGaugeOptions = (name: string, color: string, align: GaugeAlign) =
lineStyle: {
color,
width: 3,
type: 'solid',
},
type: 'solid'
}
},
title: {
show: true,
fontWeight: 'bolder',
fontSize: 12,
color,
offsetCenter: isLeft ? ['-130%', '-20%'] : ['130%', '-20%'],
offsetCenter: isLeft ? ['-130%', '-20%'] : ['130%', '-20%']
},
detail: {
fontSize: 14,
color,
valueAnimation: true,
formatter: '{value}',
offsetCenter: isLeft ? ['50%', '-35%'] : ['-45%', '-35%'],
offsetCenter: isLeft ? ['50%', '-35%'] : ['-45%', '-35%']
},
pointer: {
length: '80%',
@@ -274,18 +479,18 @@ const createRmsGaugeOptions = (name: string, color: string, align: GaugeAlign) =
itemStyle: {
color,
shadowBlur: 0,
shadowColor: 'transparent',
},
shadowColor: 'transparent'
}
},
itemStyle: {
color,
shadowBlur: 0,
shadowColor: 'transparent',
shadowColor: 'transparent'
},
data: [createPhaseGaugeData(name, 0, color)],
},
],
},
data: [createPhaseGaugeData(name, 0, color)]
}
]
}
}
}
@@ -297,7 +502,7 @@ const applyGaugePhaseColor = (options: any, color: string) => {
...series.pointer,
itemStyle: { color, shadowBlur: 0, shadowColor: 'transparent' },
shadowBlur: 0,
shadowColor: 'transparent',
shadowColor: 'transparent'
}
series.axisTick.lineStyle.color = color
series.splitLine.lineStyle.color = color
@@ -313,38 +518,22 @@ const buildPhaseLegendGraphic = () => {
const phases = [
{ key: 'A', label: 'A相', color: PHASE_COLORS.A },
{ key: 'B', label: 'B相', color: PHASE_COLORS.B },
{ key: 'C', label: 'C相', color: PHASE_COLORS.C },
{ key: 'C', label: 'C相', color: PHASE_COLORS.C }
]
const voltageValues = [
realData.value.v1AngA ?? 0,
realData.value.v1AngB ?? 0,
realData.value.v1AngC ?? 0,
]
const currentValues = [
realData.value.i1AngA ?? 0,
realData.value.i1AngB ?? 0,
realData.value.i1AngC ?? 0,
]
const voltageValues = [realData.value.v1AngA ?? 0, realData.value.v1AngB ?? 0, realData.value.v1AngC ?? 0]
const currentValues = [realData.value.i1AngA ?? 0, realData.value.i1AngB ?? 0, realData.value.i1AngC ?? 0]
return [
{
type: 'group',
right: 20,
bottom: 20,
bottom: 20
// children,
},
}
]
}
const updateRmsGaugeChart = (
chartRef: any,
chartData: any,
name: string,
value: number,
color: string
) => {
const updateRmsGaugeChart = (chartRef: any, chartData: any, name: string, value: number, color: string) => {
chartData.value.options.series[0].max = value == 0 ? 1 : Math.ceil(value * 1.2)
chartData.value.options.series[0].data = [createPhaseGaugeData(name, value || 0, color)]
applyGaugePhaseColor(chartData.value.options, color)
@@ -399,10 +588,10 @@ const initRadioCharts = () => {
[0.25, PHASE_RING_COLOR],
[0.5, PHASE_RING_COLOR],
[0.75, PHASE_RING_COLOR],
[1, PHASE_RING_COLOR],
[1, PHASE_RING_COLOR]
],
width: 2,
},
width: 2
}
},
axisTick: {
show: true,
@@ -412,8 +601,8 @@ const initRadioCharts = () => {
lineStyle: {
color: PHASE_RING_COLOR,
width: 1,
type: 'solid',
},
type: 'solid'
}
},
splitLine: {
show: true,
@@ -422,8 +611,8 @@ const initRadioCharts = () => {
lineStyle: {
color: PHASE_RING_COLOR,
width: 2,
type: 'solid',
},
type: 'solid'
}
},
// 分割线标识
axisLabel: {
@@ -451,7 +640,7 @@ const initRadioCharts = () => {
width: 15,
opacity: 1,
shadowBlur: 0,
shadowColor: 'transparent',
shadowColor: 'transparent'
},
detail: {
show: false
@@ -508,10 +697,10 @@ const initRadioCharts = () => {
[0.25, PHASE_RING_COLOR],
[0.5, PHASE_RING_COLOR],
[0.75, PHASE_RING_COLOR],
[1, PHASE_RING_COLOR],
[1, PHASE_RING_COLOR]
],
width: 1.5,
},
width: 1.5
}
},
axisTick: {
show: true,
@@ -521,8 +710,8 @@ const initRadioCharts = () => {
lineStyle: {
color: PHASE_RING_COLOR,
width: 1,
type: 'solid',
},
type: 'solid'
}
},
splitLine: {
show: true,
@@ -531,8 +720,8 @@ const initRadioCharts = () => {
lineStyle: {
color: PHASE_RING_COLOR,
width: 2,
type: 'solid',
},
type: 'solid'
}
},
// 分割线标识
axisLabel: {
@@ -560,7 +749,7 @@ const initRadioCharts = () => {
width: 15,
opacity: 1,
shadowBlur: 0,
shadowColor: 'transparent',
shadowColor: 'transparent'
},
detail: {
show: false
@@ -761,8 +950,6 @@ onMounted(() => {
border: none;
}
:deep(.el-collapse-item__arrow) {
display: none;
}
@@ -777,8 +964,6 @@ onMounted(() => {
pointer-events: none;
}
.charts-collapse-action {
display: inline-flex;
align-items: center;
@@ -895,102 +1080,5 @@ onMounted(() => {
display: none;
}
.table_container {
width: 100%;
height: auto;
display: flex;
align-items: center;
justify-content: center;
.table {
flex: 1;
.table_info {
width: 100%;
height: 120px;
// border: 1px solid #eee;
border-bottom: 2px solid #eee;
margin-bottom: 20px;
display: flex;
flex-direction: column;
}
.thead {
width: 100%;
height: auto;
background: #f4f6f9;
text-align: center;
display: flex;
flex-direction: column;
.thead_top {
width: 100%;
height: 40px;
line-height: 40px;
border: 1px solid #eee;
color: #111;
font-size: 14px;
font-weight: 800;
}
.thead_bot {
width: 100%;
height: 40px;
line-height: 40px;
display: flex;
color: #111;
font-size: 14px;
font-weight: 800;
.thead_bot_cell {
flex: 1;
border: 1px solid #eee;
}
}
}
.tbody {
flex: 1;
display: flex;
text-align: center;
.tbody_cell {
flex: 1;
text-align: center;
line-height: 40px;
border: 1px solid #eee;
border-bottom: 0;
}
}
.tbody:hover {
background: #f4f6f9;
}
}
}
.table_container:hover {
.table {
.tbody {
background: #f4f6f9;
}
}
}
:deep(.view_bot) {
.vxe-table--render-default .vxe-body--column:not(.col--ellipsis),
.vxe-table--render-default .vxe-footer--column:not(.col--ellipsis),
.vxe-table--render-default .vxe-header--column:not(.col--ellipsis) {
padding: 5px !important;
}
.vxe-table--body-wrapper {
min-height: 32px !important;
}
}
:deep(.vxe-table--render-default) {
font-size: 13px !important;
}
</style>