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

修改测试bug

Browse Source
This commit is contained in:
guanj
2026-06-08 18:34:49 +08:00
parent 4f907a80c4
commit 03d302ded8
133 changed files with 3991 additions and 3442 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,52 +1,61 @@
<template>
<div class="view" v-loading="loading">
<el-collapse v-model.trim="activeNames">
<el-collapse-item title="基础数据" name="1">
<div class="view_top">
<!-- 左侧仪表盘 -->
<div class="view_top_left">
<div class="left_charts_title">电压有效值({{ voltageUnit }})</div>
<div class="left_charts">
<MyEchart :pieInterVal="true" ref="pieChart1" :options="echartsDataV1"></MyEchart>
<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>
<div class="left_charts">
<MyEchart :pieInterVal="true" ref="pieChart2" :options="echartsDataV2"></MyEchart>
</template>
<template #icon>
<span class="charts-collapse-action">
<span class="charts-collapse-text">{{ chartPanelExpanded ? '收起' : '展开' }}</span>
<el-icon class="charts-collapse-icon" :class="{ 'is-expanded': chartPanelExpanded }">
<ArrowDown />
</el-icon>
</span>
</template>
<div class="view_top mb10">
<div class="view_top_left">
<div class="left_charts_title">电压有效值({{ voltageUnit }})</div>
<div class="left_charts">
<MyEchart :pieInterVal="true" ref="pieChart1" :options="echartsDataV1"></MyEchart>
</div>
<div class="left_charts">
<MyEchart :pieInterVal="true" ref="pieChart2" :options="echartsDataV2"></MyEchart>
</div>
<div class="left_charts">
<MyEchart :pieInterVal="true" ref="pieChart3" :options="echartsDataV3"></MyEchart>
</div>
</div>
<div class="left_charts">
<MyEchart :pieInterVal="true" ref="pieChart3" :options="echartsDataV3"></MyEchart>
<div class="view_top_mid">
<div class="mid_charts_title">基波电压/电流幅值(相位)</div>
<div class="mid_charts">
<MyEchart :pieInterVal="true" :options="echartsData1"></MyEchart>
</div>
</div>
<div class="view_top_right">
<div class="right_charts_title">电流有效值(A)</div>
<div class="right_charts">
<MyEchart :pieInterVal="true" ref="pieChart4" :options="echartsDataA1"></MyEchart>
</div>
<div class="right_charts">
<MyEchart :pieInterVal="true" ref="pieChart5" :options="echartsDataA2"></MyEchart>
</div>
<div class="right_charts">
<MyEchart :pieInterVal="true" ref="pieChart6" :options="echartsDataA3"></MyEchart>
</div>
</div>
</div>
<div class="view_top_mid">
<div class="mid_charts_title">基波电压/电流幅值(相位)</div>
<div class="mid_charts">
<MyEchart :pieInterVal="true" :options="echartsData1"></MyEchart>
</div>
</div>
<!-- 右侧仪表盘 -->
<div class="view_top_right">
<div class="right_charts_title">电流有效值(A)</div>
<div class="right_charts">
<MyEchart :pieInterVal="true" ref="pieChart4" :options="echartsDataA1"></MyEchart>
</div>
<div class="right_charts">
<MyEchart :pieInterVal="true" ref="pieChart5" :options="echartsDataA2"></MyEchart>
</div>
<div class="right_charts">
<MyEchart :pieInterVal="true" ref="pieChart6" :options="echartsDataA3"></MyEchart>
</div>
</div>
</div>
</el-collapse-item>
</el-collapse>
</el-collapse-item>
</el-collapse>
</div>
<div class="view_bot">
<vxe-table
border
height=""
:data="realList"
:column-config="{ resizable: true, tooltip: true }"
:tooltip-config="{ enterable: true }"
>
<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" field="vRmsA" title="A相"></vxe-column>
<vxe-column align="center" field="vRmsB" title="B相"></vxe-column>
@@ -69,13 +78,8 @@
</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" :column-config="{ resizable: true, tooltip: true }"
:tooltip-config="{ enterable: true }">
<vxe-column align="center" field="freq" width="140" title="频率(Hz)"></vxe-column>
<vxe-column align="center" field="freqDev" width="120" title="频率偏差(Hz)"></vxe-column>
<vxe-column align="center" width="180" field="vUnbalance" title="电压不平衡度(%)"></vxe-column>
@@ -92,13 +96,8 @@
</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" :column-config="{ resizable: true, tooltip: true }"
:tooltip-config="{ enterable: true }">
<vxe-colgroup align="center" title="电压偏差(%)">
<vxe-column align="center" field="vDevA" title="A相"></vxe-column>
<vxe-column align="center" field="vDevB" title="B相"></vxe-column>
@@ -122,13 +121,8 @@
</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" :column-config="{ resizable: true, tooltip: true }"
:tooltip-config="{ enterable: true }">
<vxe-colgroup align="center" :title="`无功功率(${reactivePowerUnit})`">
<vxe-column align="center" field="qA" title="A相"></vxe-column>
<vxe-column align="center" field="qB" title="B相"></vxe-column>
@@ -162,18 +156,23 @@
</div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
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'
const pieChartRef: any = ref()
const activeNames = ref(['1'])
const props = defineProps({
dataTime: String
})
const activeNames = ref<string[]>(['1'])
const chartPanelExpanded = computed(() => activeNames.value.includes('1'))
const pieChart1: any = ref()
const pieChart2: any = ref()
const pieChart3: any = ref()
const pieChart4: any = ref()
const pieChart5: any = ref()
const pieChart6: any = ref()
const echartsData: any = ref({})
const echartsData1: any = ref({})
//电压有效值
const echartsDataV1: any = ref({})
@@ -187,7 +186,170 @@ const echartsDataA3: any = ref({})
const currentDataLevel = ref('Primary')
const previousDataLevel = ref('')
//渲染中间相角图
const PHASE_COLORS = {
A: '#DAA520',
B: '#2E8B57',
C: '#A52a2a',
}
const PHASE_RING_COLOR = '#9D322D'
type GaugeAlign = 'left' | 'right'
const createPhaseGaugeData = (name: string, value: number, color: string) => ({
name,
value,
itemStyle: { color, shadowBlur: 0, shadowColor: 'transparent' },
})
const createRmsGaugeOptions = (name: string, color: string, align: GaugeAlign) => {
const isLeft = align === 'left'
return {
options: {
tooltip: {},
toolbox: { show: false },
series: [
{
type: 'gauge',
startAngle: isLeft ? 180 : 90,
endAngle: isLeft ? 90 : 0,
min: 0,
max: 12,
radius: '180%',
center: isLeft ? ['70%', '95%'] : ['30%', '95%'],
splitNumber: 2,
axisLine: {
show: true,
lineStyle: {
width: 5,
shadowBlur: 0,
color: [[1, color]],
},
},
axisTick: {
show: true,
distance: -5,
length: 12,
lineStyle: {
color,
width: 2,
type: 'solid',
},
},
axisLabel: {
show: true,
distance: 12,
color,
fontSize: 12,
},
splitLine: {
show: true,
distance: -5,
length: 20,
lineStyle: {
color,
width: 3,
type: 'solid',
},
},
title: {
show: true,
fontWeight: 'bolder',
fontSize: 12,
color,
offsetCenter: isLeft ? ['-130%', '-20%'] : ['130%', '-20%'],
},
detail: {
fontSize: 14,
color,
valueAnimation: true,
formatter: '{value}',
offsetCenter: isLeft ? ['50%', '-35%'] : ['-45%', '-35%'],
},
pointer: {
length: '80%',
width: 3,
shadowBlur: 0,
shadowColor: 'transparent',
itemStyle: {
color,
shadowBlur: 0,
shadowColor: 'transparent',
},
},
itemStyle: {
color,
shadowBlur: 0,
shadowColor: 'transparent',
},
data: [createPhaseGaugeData(name, 0, color)],
},
],
},
}
}
const applyGaugePhaseColor = (options: any, color: string) => {
const series = options.series[0]
series.axisLine.lineStyle.color = [[1, color]]
series.itemStyle = { color, shadowBlur: 0, shadowColor: 'transparent' }
series.pointer = {
...series.pointer,
itemStyle: { color, shadowBlur: 0, shadowColor: 'transparent' },
shadowBlur: 0,
shadowColor: 'transparent',
}
series.axisTick.lineStyle.color = color
series.splitLine.lineStyle.color = color
series.axisLabel.color = color
series.title.color = color
series.detail.color = color
if (series.data?.[0]) {
series.data[0].itemStyle = { color, shadowBlur: 0, shadowColor: 'transparent' }
}
}
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 },
]
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,
// children,
},
]
}
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)
chartRef.value?.initChart()
}
const initRadioCharts = () => {
echartsData1.value = {
options: {
@@ -234,34 +396,34 @@ const initRadioCharts = () => {
show: true,
lineStyle: {
color: [
[0.25, '#9D322D'],
[0.5, '#9D322D'],
[0.75, '#9D322D'],
[1, '#9D322D']
[0.25, PHASE_RING_COLOR],
[0.5, PHASE_RING_COLOR],
[0.75, PHASE_RING_COLOR],
[1, PHASE_RING_COLOR],
],
width: 2
}
width: 2,
},
},
// 表盘细分数
axisTick: {
show: true,
splitNumber: 5,
distance: 4,
length: 4,
lineStyle: {
color: '#9D322D',
color: PHASE_RING_COLOR,
width: 1,
type: 'solid'
}
type: 'solid',
},
},
// 分割线
splitLine: {
show: true,
distance: 4,
length: 10,
lineStyle: {
color: '#9D322D',
color: PHASE_RING_COLOR,
width: 2,
type: 'solid'
}
type: 'solid',
},
},
// 分割线标识
axisLabel: {
@@ -287,7 +449,9 @@ const initRadioCharts = () => {
icon: 'path://m368.01136,209.80637l173.00807,-193.72679c19.14653,-21.43943 50.16392,-21.43943 69.31045,0l172.93149,193.72679c1.22537,1.37213 1.22537,3.51607 0,4.8882l-47.63657,53.34133c-1.22538,1.37213 -3.14003,1.37213 -4.36541,0l-113.65381,-127.26452c-1.91465,-2.14395 -5.20785,-0.60031 -5.20785,2.40122l0,731.94254c0,1.88667 -1.37855,3.43031 -3.06345,3.43031l-67.39579,0c-1.6849,0 -3.06345,-1.54364 -3.06345,-3.43031l0,-731.94254c0,-3.08728 -3.2932,-4.54517 -5.20785,-2.40122l-113.65381,127.26452c-1.22538,1.37213 -3.14003,1.37213 -4.36541,0l-47.63657,-53.34133c-1.22537,-1.37213 -1.22537,-3.51607 0,-4.88819l0,-0.00001M539,861.23064h73v800h-73z',
length: '90%',
width: 15,
opacity: 1
opacity: 1,
shadowBlur: 0,
shadowColor: 'transparent',
},
detail: {
show: false
@@ -297,21 +461,21 @@ const initRadioCharts = () => {
value: 0,
name: 'A相',
itemStyle: {
color: '#DAA520'
color: PHASE_COLORS.A
}
},
{
value: 0,
name: 'B相',
itemStyle: {
color: '#2E8B57'
color: PHASE_COLORS.B
}
},
{
value: 0,
name: 'C相',
itemStyle: {
color: '#A52a2a'
color: PHASE_COLORS.C
}
}
]
@@ -341,34 +505,34 @@ const initRadioCharts = () => {
show: true,
lineStyle: {
color: [
[0.25, '#9D322D'],
[0.5, '#9D322D'],
[0.75, '#9D322D'],
[1, '#9D322D']
[0.25, PHASE_RING_COLOR],
[0.5, PHASE_RING_COLOR],
[0.75, PHASE_RING_COLOR],
[1, PHASE_RING_COLOR],
],
width: 1.5
}
width: 1.5,
},
},
// 表盘细分数
axisTick: {
show: true,
splitNumber: 5,
distance: 5,
length: 6,
lineStyle: {
color: '#9D322D',
color: PHASE_RING_COLOR,
width: 1,
type: 'solid'
}
type: 'solid',
},
},
// 分割线
splitLine: {
show: true,
distance: 5,
length: 10,
lineStyle: {
color: '#9D322D',
color: PHASE_RING_COLOR,
width: 2,
type: 'solid'
}
type: 'solid',
},
},
// 分割线标识
axisLabel: {
@@ -394,7 +558,9 @@ const initRadioCharts = () => {
icon: 'path://m368.01136,209.80637l173.00807,-193.72679c19.14653,-21.43943 50.16392,-21.43943 69.31045,0l172.93149,193.72679c1.22537,1.37213 1.22537,3.51607 0,4.8882l-47.63657,53.34133c-1.22538,1.37213 -3.14003,1.37213 -4.36541,0l-113.65381,-127.26452c-1.91465,-2.14395 -5.20785,-0.60031 -5.20785,2.40122l0,731.94254c0,1.88667 -1.37855,3.43031 -3.06345,3.43031l-67.39579,0c-1.6849,0 -3.06345,-1.54364 -3.06345,-3.43031l0,-731.94254c0,-3.08728 -3.2932,-4.54517 -5.20785,-2.40122l-113.65381,127.26452c-1.22538,1.37213 -3.14003,1.37213 -4.36541,0l-47.63657,-53.34133c-1.22537,-1.37213 -1.22537,-3.51607 0,-4.88819l0,-0.00001M539,861.23064h73v800h-73z',
length: '90%',
width: 15,
opacity: 1
opacity: 1,
shadowBlur: 0,
shadowColor: 'transparent',
},
detail: {
show: false
@@ -404,21 +570,21 @@ const initRadioCharts = () => {
value: 0,
name: 'A相',
itemStyle: {
color: '#DAA520'
color: PHASE_COLORS.A
}
},
{
value: 0,
name: 'B相',
itemStyle: {
color: '#2E8B57'
color: PHASE_COLORS.B
}
},
{
value: 0,
name: 'C相',
itemStyle: {
color: '#A52a2a'
color: PHASE_COLORS.C
}
}
]
@@ -459,75 +625,17 @@ const initRadioCharts = () => {
echartsData1.value.options.series[i].endAngle = -360
echartsData1.value.options.series[i].center = ['50%', '50%']
}
echartsData1.value.options.graphic = buildPhaseLegendGraphic()
}
//渲染echarts
const init = () => {
echartsData.value = {
options: {
tooltip: {},
toolbox: {
show: false
},
series: [
{
type: 'gauge',
startAngle: 180,
endAngle: 0,
min: 0,
max: 450,
radius: '150%',
center: ['55%', '76%'],
splitNumber: 2, //刻度数量
axisLine: {
show: true,
lineStyle: {
width: 10,
shadowBlur: 0,
color: [
[0.3, '#91c7a1'],
[0.7, '#63869e'],
[1, '#002B6A']
]
}
},
itemStyle: {
normal: {
shadowBlur: 10
}
},
//标题位置
title: {
fontWeight: 'bolder',
fontSize: 12,
offsetCenter: ['-130%', '-20%']
},
//数值位置
detail: {
fontSize: 12,
valueAnimation: true,
formatter: '{value}',
offsetCenter: ['0%', '25%']
},
data: [
{
value: 0,
name: 'A相'
}
]
}
]
}
}
echartsDataV1.value = JSON.parse(JSON.stringify(echartsData.value))
echartsDataV2.value = JSON.parse(JSON.stringify(echartsData.value))
echartsDataV3.value = JSON.parse(JSON.stringify(echartsData.value))
echartsDataV1.value.options.series[0].max = 12
echartsDataV2.value.options.series[0].max = 12
echartsDataV3.value.options.series[0].max = 12
echartsDataA1.value = echartsData.value
echartsDataA2.value = echartsData.value
echartsDataA3.value = echartsData.value
echartsDataV1.value = createRmsGaugeOptions('A相', PHASE_COLORS.A, 'left')
echartsDataV2.value = createRmsGaugeOptions('B相', PHASE_COLORS.B, 'left')
echartsDataV3.value = createRmsGaugeOptions('C相', PHASE_COLORS.C, 'left')
echartsDataA1.value = createRmsGaugeOptions('A相', PHASE_COLORS.A, 'right')
echartsDataA2.value = createRmsGaugeOptions('B相', PHASE_COLORS.B, 'right')
echartsDataA3.value = createRmsGaugeOptions('C相', PHASE_COLORS.C, 'right')
}
//接收父组件传递的table数据
const dataList: any = ref([])
@@ -603,57 +711,12 @@ const setRealData = (val: any, dataLevel: string) => {
realData.value = val
realList.value = [val]
initRadioCharts()
//新的
echartsDataV1.value.options.series[0].max = realData.value.vRmsA == 0 ? 1 : Math.ceil(realData.value.vRmsA * 1.2)
// console.log("🚀 ~ setRealData ~ realData.value.vRmsA:", realData.value.vRmsA)
echartsDataV1.value.options.series[0].data = [
{
name: 'A相',
value: realData.value.vRmsA || 0
}
]
pieChart1.value.initChart()
echartsDataV2.value.options.series[0].max = realData.value.vRmsB == 0 ? 1 : Math.ceil(realData.value.vRmsB * 1.2)
echartsDataV2.value.options.series[0].data = [
{
name: 'B相',
value: realData.value.vRmsB || 0
}
]
pieChart2.value.initChart()
echartsDataV3.value.options.series[0].max = realData.value.vRmsC == 0 ? 1 : Math.ceil(realData.value.vRmsC * 1.2)
echartsDataV3.value.options.series[0].data = [
{
name: 'C相',
value: realData.value.vRmsC || 0
}
]
pieChart3.value.initChart()
//新的电流有效值
echartsDataA1.value.options.series[0].max = realData.value.iRmsA == 0 ? 1 : Math.ceil(realData.value.iRmsA * 1.2)
echartsDataA1.value.options.series[0].data = [
{
name: 'A相',
value: realData.value.iRmsA || 0
}
]
pieChart4.value.initChart()
echartsDataA2.value.options.series[0].max = realData.value.iRmsB == 0 ? 1 : Math.ceil(realData.value.iRmsB * 1.2)
echartsDataA2.value.options.series[0].data = [
{
name: 'B相',
value: realData.value.iRmsB || 0
}
]
pieChart5.value.initChart()
echartsDataA3.value.options.series[0].max = realData.value.iRmsC == 0 ? 1 : Math.ceil(realData.value.iRmsC * 1.2)
echartsDataA3.value.options.series[0].data = [
{
name: 'C相',
value: realData.value.iRmsC || 0
}
]
pieChart6.value.initChart()
updateRmsGaugeChart(pieChart1, echartsDataV1, 'A相', realData.value.vRmsA, PHASE_COLORS.A)
updateRmsGaugeChart(pieChart2, echartsDataV2, 'B相', realData.value.vRmsB, PHASE_COLORS.B)
updateRmsGaugeChart(pieChart3, echartsDataV3, 'C相', realData.value.vRmsC, PHASE_COLORS.C)
updateRmsGaugeChart(pieChart4, echartsDataA1, 'A相', realData.value.iRmsA, PHASE_COLORS.A)
updateRmsGaugeChart(pieChart5, echartsDataA2, 'B相', realData.value.iRmsB, PHASE_COLORS.B)
updateRmsGaugeChart(pieChart6, echartsDataA3, 'C相', realData.value.iRmsC, PHASE_COLORS.C)
}
defineExpose({ setRealData })
onMounted(() => {
@@ -662,6 +725,87 @@ onMounted(() => {
})
</script>
<style lang="scss" scoped>
.charts-panel {
position: relative;
width: 100%;
min-height: 32px;
flex-shrink: 0;
}
.charts-collapse {
border-top: none;
border-bottom: none;
:deep(.el-collapse-item) {
position: relative;
}
:deep(.el-collapse-item__header) {
// position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 10;
width: 100%;
height: 32px !important;
min-height: 32px !important;
border: none;
background: transparent;
padding: 0 12px;
font-size: 13px !important;
line-height: 30px;
font-weight: normal !important;
}
:deep(.el-collapse-item__wrap) {
border: none;
}
:deep(.el-collapse-item__arrow) {
display: none;
}
}
.charts-collapse-header {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
height: 32px;
pointer-events: none;
}
.charts-collapse-action {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 4px;
min-width: 56px;
color: var(--el-color-primary);
font-size: 13px;
line-height: 32px;
flex-shrink: 0;
}
.charts-collapse-text {
display: inline-block;
min-width: 28px;
text-align: right;
}
.charts-collapse-icon {
font-size: 12px;
transition: transform 0.2s ease;
}
.charts-collapse-icon.is-expanded {
transform: rotate(180deg);
}
.view {
width: 100%;
height: 100%;
@@ -676,7 +820,7 @@ onMounted(() => {
justify-content: space-between;
//border: 1px solid #eee;
// padding: 10px;
margin-top: 10px;
// margin-top: 10px;
.view_top_left,
.view_top_right {
@@ -734,7 +878,6 @@ onMounted(() => {
.view_bot {
// min-height: 300px;
margin: 10px 0 0 0;
overflow: auto !important;
flex: 1 !important;
// padding-bottom: 200px !important;
@@ -835,6 +978,7 @@ onMounted(() => {
}
: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) {
@@ -846,8 +990,7 @@ onMounted(() => {
}
}
::v-deep .el-collapse-item__header {
font-size: 16px !important;
font-weight: 800 !important;
:deep(.vxe-table--render-default) {
font-size: 13px !important;
}
</style>