2024-07-03 19:31:43 +08:00
|
|
|
|
<template>
|
2024-10-12 11:40:07 +08:00
|
|
|
|
<div class="view" v-loading="loading">
|
2026-06-08 18:34:49 +08:00
|
|
|
|
|
|
|
|
|
|
<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>
|
2024-11-19 10:39:46 +08:00
|
|
|
|
</div>
|
2026-06-08 18:34:49 +08:00
|
|
|
|
</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>
|
2024-11-19 10:39:46 +08:00
|
|
|
|
</div>
|
2026-06-08 18:34:49 +08:00
|
|
|
|
<div class="view_top_mid">
|
|
|
|
|
|
<div class="mid_charts_title">基波电压/电流幅值(相位)</div>
|
|
|
|
|
|
<div class="mid_charts">
|
|
|
|
|
|
<MyEchart :pieInterVal="true" :options="echartsData1"></MyEchart>
|
|
|
|
|
|
</div>
|
2024-11-19 10:39:46 +08:00
|
|
|
|
</div>
|
2026-06-08 18:34:49 +08:00
|
|
|
|
<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>
|
2024-11-19 10:39:46 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2026-06-08 18:34:49 +08:00
|
|
|
|
</el-collapse-item>
|
|
|
|
|
|
</el-collapse>
|
|
|
|
|
|
</div>
|
2024-11-19 10:39:46 +08:00
|
|
|
|
|
2024-10-12 11:40:07 +08:00
|
|
|
|
<div class="view_bot">
|
2026-06-08 18:34:49 +08:00
|
|
|
|
<vxe-table border height="" :data="realList" :column-config="{ resizable: true, tooltip: true }"
|
|
|
|
|
|
:tooltip-config="{ enterable: true }">
|
2025-11-17 15:44:20 +08:00
|
|
|
|
<vxe-colgroup align="center" :title="`电压有效值(${voltageUnit})`">
|
2024-10-12 11:40:07 +08:00
|
|
|
|
<vxe-column align="center" field="vRmsA" title="A相"></vxe-column>
|
|
|
|
|
|
<vxe-column align="center" field="vRmsB" title="B相"></vxe-column>
|
|
|
|
|
|
<vxe-column align="center" field="vRmsC" title="C相"></vxe-column>
|
|
|
|
|
|
</vxe-colgroup>
|
|
|
|
|
|
<vxe-colgroup align="center" title="电流有效值(A)">
|
|
|
|
|
|
<vxe-column align="center" field="iRmsA" title="A相"></vxe-column>
|
|
|
|
|
|
<vxe-column align="center" field="iRmsB" title="B相"></vxe-column>
|
|
|
|
|
|
<vxe-column align="center" field="iRmsC" title="C相"></vxe-column>
|
|
|
|
|
|
</vxe-colgroup>
|
|
|
|
|
|
<vxe-colgroup align="center" title="基波电压相位(°)">
|
|
|
|
|
|
<vxe-column align="center" field="v1AngA" title="A相"></vxe-column>
|
|
|
|
|
|
<vxe-column align="center" field="v1AngB" title="B相"></vxe-column>
|
|
|
|
|
|
<vxe-column align="center" field="v1AngC" title="C相"></vxe-column>
|
|
|
|
|
|
</vxe-colgroup>
|
|
|
|
|
|
<vxe-colgroup align="center" title="基波电流相位(°)">
|
|
|
|
|
|
<vxe-column align="center" field="i1AngA" title="A相"></vxe-column>
|
|
|
|
|
|
<vxe-column align="center" field="i1AngB" title="B相"></vxe-column>
|
|
|
|
|
|
<vxe-column align="center" field="i1AngC" title="C相"></vxe-column>
|
|
|
|
|
|
</vxe-colgroup>
|
|
|
|
|
|
</vxe-table>
|
|
|
|
|
|
<br />
|
2026-06-08 18:34:49 +08:00
|
|
|
|
<vxe-table border height="" :data="realList" :column-config="{ resizable: true, tooltip: true }"
|
|
|
|
|
|
:tooltip-config="{ enterable: true }">
|
2026-01-15 15:59:13 +08:00
|
|
|
|
<vxe-column align="center" field="freq" width="140" title="频率(Hz)"></vxe-column>
|
|
|
|
|
|
<vxe-column align="center" field="freqDev" width="120" title="频率偏差(Hz)"></vxe-column>
|
2024-10-12 11:40:07 +08:00
|
|
|
|
<vxe-column align="center" width="180" field="vUnbalance" title="电压不平衡度(%)"></vxe-column>
|
|
|
|
|
|
<vxe-column align="center" width="180" field="iUnbalance" title="电流不平衡度(%)"></vxe-column>
|
2025-11-17 15:44:20 +08:00
|
|
|
|
<vxe-colgroup align="center" :title="`基波电压幅值(${voltageUnit})`">
|
2024-10-12 11:40:07 +08:00
|
|
|
|
<vxe-column align="center" field="v1A" title="A相"></vxe-column>
|
|
|
|
|
|
<vxe-column align="center" field="v1B" title="B相"></vxe-column>
|
|
|
|
|
|
<vxe-column align="center" field="v1C" title="C相"></vxe-column>
|
|
|
|
|
|
</vxe-colgroup>
|
|
|
|
|
|
<vxe-colgroup align="center" title="基波电流幅值(A)">
|
|
|
|
|
|
<vxe-column align="center" field="i1A" title="A相"></vxe-column>
|
|
|
|
|
|
<vxe-column align="center" field="i1B" title="B相"></vxe-column>
|
|
|
|
|
|
<vxe-column align="center" field="i1C" title="C相"></vxe-column>
|
|
|
|
|
|
</vxe-colgroup>
|
|
|
|
|
|
</vxe-table>
|
|
|
|
|
|
<br />
|
2026-06-08 18:34:49 +08:00
|
|
|
|
<vxe-table border height="" :data="realList" :column-config="{ resizable: true, tooltip: true }"
|
|
|
|
|
|
:tooltip-config="{ enterable: true }">
|
2024-10-12 11:40:07 +08:00
|
|
|
|
<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>
|
|
|
|
|
|
<vxe-column align="center" field="vDevC" title="C相"></vxe-column>
|
|
|
|
|
|
</vxe-colgroup>
|
|
|
|
|
|
<vxe-colgroup align="center" title="电压总谐波畸变率(%)">
|
|
|
|
|
|
<vxe-column align="center" field="vThdA" title="A相"></vxe-column>
|
|
|
|
|
|
<vxe-column align="center" field="vThdB" title="B相"></vxe-column>
|
|
|
|
|
|
<vxe-column align="center" field="vThdC" title="C相"></vxe-column>
|
|
|
|
|
|
</vxe-colgroup>
|
|
|
|
|
|
<vxe-colgroup align="center" title="电流总谐波畸变率(%)">
|
|
|
|
|
|
<vxe-column align="center" field="iThdA" title="A相"></vxe-column>
|
|
|
|
|
|
<vxe-column align="center" field="iThdB" title="B相"></vxe-column>
|
|
|
|
|
|
<vxe-column align="center" field="iThdC" title="C相"></vxe-column>
|
|
|
|
|
|
</vxe-colgroup>
|
2025-11-17 15:44:20 +08:00
|
|
|
|
<vxe-colgroup align="center" :title="`有功功率(${powerUnit})`">
|
2024-10-12 11:40:07 +08:00
|
|
|
|
<vxe-column align="center" field="pA" title="A相"></vxe-column>
|
|
|
|
|
|
<vxe-column align="center" field="pB" title="B相"></vxe-column>
|
|
|
|
|
|
<vxe-column align="center" field="pC" title="C相"></vxe-column>
|
|
|
|
|
|
<vxe-column align="center" field="pTot" title="总"></vxe-column>
|
|
|
|
|
|
</vxe-colgroup>
|
|
|
|
|
|
</vxe-table>
|
|
|
|
|
|
<br />
|
2026-06-08 18:34:49 +08:00
|
|
|
|
<vxe-table border height="" :data="realList" :column-config="{ resizable: true, tooltip: true }"
|
|
|
|
|
|
:tooltip-config="{ enterable: true }">
|
2025-11-17 15:44:20 +08:00
|
|
|
|
<vxe-colgroup align="center" :title="`无功功率(${reactivePowerUnit})`">
|
2024-10-12 11:40:07 +08:00
|
|
|
|
<vxe-column align="center" field="qA" title="A相"></vxe-column>
|
|
|
|
|
|
<vxe-column align="center" field="qB" title="B相"></vxe-column>
|
|
|
|
|
|
<vxe-column align="center" field="qC" title="C相">
|
|
|
|
|
|
<template #default="{ row }">
|
|
|
|
|
|
{{ row.qC }}
|
|
|
|
|
|
</template>
|
|
|
|
|
|
</vxe-column>
|
|
|
|
|
|
<vxe-column align="center" field="qTot" title="总"></vxe-column>
|
|
|
|
|
|
</vxe-colgroup>
|
2025-11-17 15:44:20 +08:00
|
|
|
|
<vxe-colgroup align="center" :title="`视在功率(${apparentPowerUnit})`">
|
2024-10-12 11:40:07 +08:00
|
|
|
|
<vxe-column align="center" field="sA" title="A相"></vxe-column>
|
|
|
|
|
|
<vxe-column align="center" field="sB" title="B相"></vxe-column>
|
|
|
|
|
|
<vxe-column align="center" field="sC" title="C相"></vxe-column>
|
|
|
|
|
|
<vxe-column align="center" field="sTot" title="总"></vxe-column>
|
|
|
|
|
|
</vxe-colgroup>
|
2026-01-15 15:59:13 +08:00
|
|
|
|
<vxe-colgroup align="center" title="视在功率因数">
|
2024-10-12 11:40:07 +08:00
|
|
|
|
<vxe-column align="center" field="pfA" title="A相"></vxe-column>
|
|
|
|
|
|
<vxe-column align="center" field="pfB" title="B相"></vxe-column>
|
|
|
|
|
|
<vxe-column align="center" field="pfC" title="C相"></vxe-column>
|
|
|
|
|
|
<vxe-column align="center" field="pfTot" title="总"></vxe-column>
|
|
|
|
|
|
</vxe-colgroup>
|
2026-01-15 15:59:13 +08:00
|
|
|
|
<vxe-colgroup align="center" title="位移功率因数">
|
2024-10-12 11:40:07 +08:00
|
|
|
|
<vxe-column align="center" field="dpfA" title="A相"></vxe-column>
|
|
|
|
|
|
<vxe-column align="center" field="dpfB" title="B相"></vxe-column>
|
|
|
|
|
|
<vxe-column align="center" field="dpfC" title="C相"></vxe-column>
|
|
|
|
|
|
<vxe-column align="center" field="dpfTot" title="总"></vxe-column>
|
|
|
|
|
|
</vxe-colgroup>
|
|
|
|
|
|
</vxe-table>
|
|
|
|
|
|
</div>
|
2024-07-03 19:31:43 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
2026-06-08 18:34:49 +08:00
|
|
|
|
import { ref, onMounted, computed } from 'vue'
|
|
|
|
|
|
import { ArrowDown } from '@element-plus/icons-vue'
|
2024-07-03 19:31:43 +08:00
|
|
|
|
import MyEchart from '@/components/echarts/MyEchart.vue'
|
2024-07-22 10:35:01 +08:00
|
|
|
|
import { getRealTimeTableList } from '@/api/cs-device-boot/EquipmentDelivery'
|
2026-06-08 18:34:49 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const props = defineProps({
|
|
|
|
|
|
dataTime: String
|
|
|
|
|
|
})
|
|
|
|
|
|
const activeNames = ref<string[]>(['1'])
|
|
|
|
|
|
const chartPanelExpanded = computed(() => activeNames.value.includes('1'))
|
2024-07-22 10:35:01 +08:00
|
|
|
|
const pieChart1: any = ref()
|
|
|
|
|
|
const pieChart2: any = ref()
|
|
|
|
|
|
const pieChart3: any = ref()
|
|
|
|
|
|
const pieChart4: any = ref()
|
|
|
|
|
|
const pieChart5: any = ref()
|
|
|
|
|
|
const pieChart6: any = ref()
|
2024-07-03 19:31:43 +08:00
|
|
|
|
const echartsData1: any = ref({})
|
2024-07-22 10:35:01 +08:00
|
|
|
|
//电压有效值
|
|
|
|
|
|
const echartsDataV1: any = ref({})
|
|
|
|
|
|
const echartsDataV2: any = ref({})
|
|
|
|
|
|
const echartsDataV3: any = ref({})
|
|
|
|
|
|
//电流有效值
|
|
|
|
|
|
const echartsDataA1: any = ref({})
|
|
|
|
|
|
const echartsDataA2: any = ref({})
|
|
|
|
|
|
const echartsDataA3: any = ref({})
|
2025-11-17 15:44:20 +08:00
|
|
|
|
|
2026-01-23 09:24:13 +08:00
|
|
|
|
const currentDataLevel = ref('Primary')
|
2025-11-17 15:44:20 +08:00
|
|
|
|
const previousDataLevel = ref('')
|
|
|
|
|
|
|
2026-06-08 18:34:49 +08:00
|
|
|
|
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()
|
|
|
|
|
|
}
|
2024-08-01 16:37:24 +08:00
|
|
|
|
const initRadioCharts = () => {
|
2024-07-03 19:31:43 +08:00
|
|
|
|
echartsData1.value = {
|
|
|
|
|
|
options: {
|
|
|
|
|
|
grid: {
|
2024-10-18 16:24:44 +08:00
|
|
|
|
top: 0
|
2024-07-03 19:31:43 +08:00
|
|
|
|
},
|
|
|
|
|
|
title: {
|
|
|
|
|
|
text: '',
|
|
|
|
|
|
x: 'center'
|
|
|
|
|
|
},
|
|
|
|
|
|
tooltip: {
|
2024-10-29 14:31:07 +08:00
|
|
|
|
formatter: '{a} <br/>{b} {c}°'
|
2024-07-03 19:31:43 +08:00
|
|
|
|
},
|
2024-11-19 10:39:46 +08:00
|
|
|
|
toolbox: {
|
|
|
|
|
|
show: false
|
2024-10-22 14:00:39 +08:00
|
|
|
|
},
|
2024-10-21 10:08:05 +08:00
|
|
|
|
legend: {
|
|
|
|
|
|
show: false
|
|
|
|
|
|
},
|
2024-07-03 19:31:43 +08:00
|
|
|
|
series: [
|
2024-08-01 16:37:24 +08:00
|
|
|
|
// 外圈电压 内圈电流
|
2024-07-03 19:31:43 +08:00
|
|
|
|
{
|
|
|
|
|
|
name: '基波电流相位',
|
|
|
|
|
|
type: 'gauge',
|
|
|
|
|
|
// 表盘最小值
|
|
|
|
|
|
min: 180,
|
|
|
|
|
|
// 表盘最大值
|
|
|
|
|
|
max: -180,
|
|
|
|
|
|
// 表盘分割数
|
2024-10-22 14:00:39 +08:00
|
|
|
|
splitNumber: 6,
|
2024-07-03 19:31:43 +08:00
|
|
|
|
// 圆心位置
|
|
|
|
|
|
center: ['50%', '50%'],
|
|
|
|
|
|
// 半径
|
|
|
|
|
|
radius: '50%',
|
2024-10-29 13:35:40 +08:00
|
|
|
|
// startAngle: 180,
|
|
|
|
|
|
// endAngle: -179.99,
|
|
|
|
|
|
startAngle: 90,
|
2024-07-03 19:31:43 +08:00
|
|
|
|
endAngle: -179.99,
|
|
|
|
|
|
// 指针方向
|
|
|
|
|
|
clockWise: true,
|
|
|
|
|
|
title: false,
|
|
|
|
|
|
// 表盘外框
|
|
|
|
|
|
axisLine: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
color: [
|
2026-06-08 18:34:49 +08:00
|
|
|
|
[0.25, PHASE_RING_COLOR],
|
|
|
|
|
|
[0.5, PHASE_RING_COLOR],
|
|
|
|
|
|
[0.75, PHASE_RING_COLOR],
|
|
|
|
|
|
[1, PHASE_RING_COLOR],
|
2024-07-03 19:31:43 +08:00
|
|
|
|
],
|
2026-06-08 18:34:49 +08:00
|
|
|
|
width: 2,
|
|
|
|
|
|
},
|
2024-07-03 19:31:43 +08:00
|
|
|
|
},
|
|
|
|
|
|
axisTick: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
splitNumber: 5,
|
2026-06-08 18:34:49 +08:00
|
|
|
|
distance: 4,
|
2024-07-03 19:31:43 +08:00
|
|
|
|
length: 4,
|
|
|
|
|
|
lineStyle: {
|
2026-06-08 18:34:49 +08:00
|
|
|
|
color: PHASE_RING_COLOR,
|
2024-07-03 19:31:43 +08:00
|
|
|
|
width: 1,
|
2026-06-08 18:34:49 +08:00
|
|
|
|
type: 'solid',
|
|
|
|
|
|
},
|
2024-07-03 19:31:43 +08:00
|
|
|
|
},
|
|
|
|
|
|
splitLine: {
|
|
|
|
|
|
show: true,
|
2026-06-08 18:34:49 +08:00
|
|
|
|
distance: 4,
|
2024-07-03 19:31:43 +08:00
|
|
|
|
length: 10,
|
|
|
|
|
|
lineStyle: {
|
2026-06-08 18:34:49 +08:00
|
|
|
|
color: PHASE_RING_COLOR,
|
2024-07-03 19:31:43 +08:00
|
|
|
|
width: 2,
|
2026-06-08 18:34:49 +08:00
|
|
|
|
type: 'solid',
|
|
|
|
|
|
},
|
2024-07-03 19:31:43 +08:00
|
|
|
|
},
|
|
|
|
|
|
// 分割线标识
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
distance: 5,
|
|
|
|
|
|
formatter: function (v) {
|
|
|
|
|
|
switch (v + '') {
|
|
|
|
|
|
case '-180':
|
|
|
|
|
|
return ''
|
|
|
|
|
|
default:
|
|
|
|
|
|
return v
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
|
2026-01-23 09:24:13 +08:00
|
|
|
|
// // 指针设置
|
|
|
|
|
|
// pointer: {
|
|
|
|
|
|
// length: '80%',
|
|
|
|
|
|
// width: 3
|
|
|
|
|
|
// },
|
2024-07-03 19:31:43 +08:00
|
|
|
|
// 指针设置
|
|
|
|
|
|
pointer: {
|
2026-01-23 09:24:13 +08:00
|
|
|
|
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,
|
2026-06-08 18:34:49 +08:00
|
|
|
|
opacity: 1,
|
|
|
|
|
|
shadowBlur: 0,
|
|
|
|
|
|
shadowColor: 'transparent',
|
2024-07-03 19:31:43 +08:00
|
|
|
|
},
|
|
|
|
|
|
detail: {
|
|
|
|
|
|
show: false
|
|
|
|
|
|
},
|
|
|
|
|
|
data: [
|
|
|
|
|
|
{
|
2024-09-27 16:22:34 +08:00
|
|
|
|
value: 0,
|
2024-07-03 19:31:43 +08:00
|
|
|
|
name: 'A相',
|
|
|
|
|
|
itemStyle: {
|
2026-06-08 18:34:49 +08:00
|
|
|
|
color: PHASE_COLORS.A
|
2024-07-03 19:31:43 +08:00
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
2024-09-27 16:22:34 +08:00
|
|
|
|
value: 0,
|
2024-07-03 19:31:43 +08:00
|
|
|
|
name: 'B相',
|
|
|
|
|
|
itemStyle: {
|
2026-06-08 18:34:49 +08:00
|
|
|
|
color: PHASE_COLORS.B
|
2024-07-03 19:31:43 +08:00
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
2024-09-27 16:22:34 +08:00
|
|
|
|
value: 0,
|
2024-07-03 19:31:43 +08:00
|
|
|
|
name: 'C相',
|
|
|
|
|
|
itemStyle: {
|
2026-06-08 18:34:49 +08:00
|
|
|
|
color: PHASE_COLORS.C
|
2024-07-03 19:31:43 +08:00
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
]
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '基波电压相位',
|
|
|
|
|
|
type: 'gauge',
|
|
|
|
|
|
// 表盘最小值
|
|
|
|
|
|
min: 180,
|
|
|
|
|
|
// 表盘最大值
|
|
|
|
|
|
max: -180,
|
|
|
|
|
|
// 表盘分割数
|
2024-10-22 14:00:39 +08:00
|
|
|
|
splitNumber: 6,
|
2024-07-03 19:31:43 +08:00
|
|
|
|
// 圆心位置
|
|
|
|
|
|
center: ['50%', '50%'],
|
|
|
|
|
|
// 半径
|
|
|
|
|
|
radius: '85%',
|
2024-10-29 13:35:40 +08:00
|
|
|
|
// startAngle: 180,
|
|
|
|
|
|
// endAngle: -179.99,
|
|
|
|
|
|
startAngle: 90,
|
2024-07-03 19:31:43 +08:00
|
|
|
|
endAngle: -179.99,
|
|
|
|
|
|
// 指针方向
|
|
|
|
|
|
clockWise: true,
|
|
|
|
|
|
title: false,
|
|
|
|
|
|
// 表盘外框
|
|
|
|
|
|
axisLine: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
color: [
|
2026-06-08 18:34:49 +08:00
|
|
|
|
[0.25, PHASE_RING_COLOR],
|
|
|
|
|
|
[0.5, PHASE_RING_COLOR],
|
|
|
|
|
|
[0.75, PHASE_RING_COLOR],
|
|
|
|
|
|
[1, PHASE_RING_COLOR],
|
2024-07-03 19:31:43 +08:00
|
|
|
|
],
|
2026-06-08 18:34:49 +08:00
|
|
|
|
width: 1.5,
|
|
|
|
|
|
},
|
2024-07-03 19:31:43 +08:00
|
|
|
|
},
|
|
|
|
|
|
axisTick: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
splitNumber: 5,
|
2026-06-08 18:34:49 +08:00
|
|
|
|
distance: 5,
|
2024-07-03 19:31:43 +08:00
|
|
|
|
length: 6,
|
|
|
|
|
|
lineStyle: {
|
2026-06-08 18:34:49 +08:00
|
|
|
|
color: PHASE_RING_COLOR,
|
2024-07-03 19:31:43 +08:00
|
|
|
|
width: 1,
|
2026-06-08 18:34:49 +08:00
|
|
|
|
type: 'solid',
|
|
|
|
|
|
},
|
2024-07-03 19:31:43 +08:00
|
|
|
|
},
|
|
|
|
|
|
splitLine: {
|
|
|
|
|
|
show: true,
|
2026-06-08 18:34:49 +08:00
|
|
|
|
distance: 5,
|
2024-07-03 19:31:43 +08:00
|
|
|
|
length: 10,
|
|
|
|
|
|
lineStyle: {
|
2026-06-08 18:34:49 +08:00
|
|
|
|
color: PHASE_RING_COLOR,
|
2024-07-03 19:31:43 +08:00
|
|
|
|
width: 2,
|
2026-06-08 18:34:49 +08:00
|
|
|
|
type: 'solid',
|
|
|
|
|
|
},
|
2024-07-03 19:31:43 +08:00
|
|
|
|
},
|
|
|
|
|
|
// 分割线标识
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
distance: 5,
|
|
|
|
|
|
formatter: function (v) {
|
|
|
|
|
|
switch (v + '') {
|
|
|
|
|
|
case '-180':
|
|
|
|
|
|
return ''
|
|
|
|
|
|
default:
|
|
|
|
|
|
return v
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
|
2026-01-23 09:24:13 +08:00
|
|
|
|
// // 指针设置
|
|
|
|
|
|
// pointer: {
|
|
|
|
|
|
// length: '90%',
|
|
|
|
|
|
// width: 6
|
|
|
|
|
|
// },
|
2024-07-03 19:31:43 +08:00
|
|
|
|
// 指针设置
|
|
|
|
|
|
pointer: {
|
2026-01-23 09:24:13 +08:00
|
|
|
|
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',
|
2024-07-03 19:31:43 +08:00
|
|
|
|
length: '90%',
|
2026-01-23 09:24:13 +08:00
|
|
|
|
width: 15,
|
2026-06-08 18:34:49 +08:00
|
|
|
|
opacity: 1,
|
|
|
|
|
|
shadowBlur: 0,
|
|
|
|
|
|
shadowColor: 'transparent',
|
2024-07-03 19:31:43 +08:00
|
|
|
|
},
|
|
|
|
|
|
detail: {
|
|
|
|
|
|
show: false
|
|
|
|
|
|
},
|
|
|
|
|
|
data: [
|
|
|
|
|
|
{
|
2024-09-27 16:22:34 +08:00
|
|
|
|
value: 0,
|
2024-07-03 19:31:43 +08:00
|
|
|
|
name: 'A相',
|
|
|
|
|
|
itemStyle: {
|
2026-06-08 18:34:49 +08:00
|
|
|
|
color: PHASE_COLORS.A
|
2024-07-03 19:31:43 +08:00
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
2024-09-27 16:22:34 +08:00
|
|
|
|
value: 0,
|
2024-07-03 19:31:43 +08:00
|
|
|
|
name: 'B相',
|
|
|
|
|
|
itemStyle: {
|
2026-06-08 18:34:49 +08:00
|
|
|
|
color: PHASE_COLORS.B
|
2024-07-03 19:31:43 +08:00
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
2024-09-27 16:22:34 +08:00
|
|
|
|
value: 0,
|
2024-07-03 19:31:43 +08:00
|
|
|
|
name: 'C相',
|
|
|
|
|
|
itemStyle: {
|
2026-06-08 18:34:49 +08:00
|
|
|
|
color: PHASE_COLORS.C
|
2024-07-03 19:31:43 +08:00
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
]
|
|
|
|
|
|
}
|
|
|
|
|
|
]
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
2024-08-01 16:37:24 +08:00
|
|
|
|
//电流相角
|
|
|
|
|
|
echartsData1.value.options.series[0].data.map((item: any) => {
|
|
|
|
|
|
iRadioList.value.map((vv: any) => {
|
|
|
|
|
|
if (item.name.includes(vv.phase)) {
|
|
|
|
|
|
item.value = vv.statisticalData
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
})
|
|
|
|
|
|
//电压相角
|
|
|
|
|
|
echartsData1.value.options.series[1].data.map((item: any) => {
|
|
|
|
|
|
vRadioList.value.map((vv: any) => {
|
|
|
|
|
|
if (item.name.includes(vv.phase)) {
|
|
|
|
|
|
item.value = vv.statisticalData
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
})
|
2024-10-12 11:40:07 +08:00
|
|
|
|
|
|
|
|
|
|
//新的实时数据
|
|
|
|
|
|
// 电流相角
|
|
|
|
|
|
echartsData1.value.options.series[0].data[0].value = realData.value.i1AngA || 0
|
|
|
|
|
|
echartsData1.value.options.series[0].data[1].value = realData.value.i1AngB || 0
|
|
|
|
|
|
echartsData1.value.options.series[0].data[2].value = realData.value.i1AngC || 0
|
|
|
|
|
|
// 电压相角
|
|
|
|
|
|
echartsData1.value.options.series[1].data[0].value = realData.value.v1AngA || 0
|
|
|
|
|
|
echartsData1.value.options.series[1].data[1].value = realData.value.v1AngB || 0
|
|
|
|
|
|
echartsData1.value.options.series[1].data[2].value = realData.value.v1AngC || 0
|
|
|
|
|
|
|
2024-07-03 19:31:43 +08:00
|
|
|
|
for (var i = 0; i < echartsData1.value.options.series.length; i++) {
|
|
|
|
|
|
echartsData1.value.options.series[i].type = 'gauge'
|
2024-10-29 13:35:40 +08:00
|
|
|
|
echartsData1.value.options.series[i].startAngle = 180
|
|
|
|
|
|
echartsData1.value.options.series[i].endAngle = -360
|
2024-07-03 19:31:43 +08:00
|
|
|
|
echartsData1.value.options.series[i].center = ['50%', '50%']
|
|
|
|
|
|
}
|
2026-06-08 18:34:49 +08:00
|
|
|
|
|
|
|
|
|
|
echartsData1.value.options.graphic = buildPhaseLegendGraphic()
|
2024-07-03 19:31:43 +08:00
|
|
|
|
}
|
2024-08-01 16:37:24 +08:00
|
|
|
|
//渲染echarts
|
|
|
|
|
|
const init = () => {
|
2026-06-08 18:34:49 +08:00
|
|
|
|
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')
|
2024-08-01 16:37:24 +08:00
|
|
|
|
}
|
2024-07-22 10:35:01 +08:00
|
|
|
|
//接收父组件传递的table数据
|
|
|
|
|
|
const dataList: any = ref([])
|
|
|
|
|
|
const listV: any = ref([])
|
|
|
|
|
|
const listA: any = ref([])
|
|
|
|
|
|
const loading = ref(false)
|
|
|
|
|
|
//定义表格所需要的数据
|
|
|
|
|
|
const tableData: any = ref([])
|
|
|
|
|
|
const columnsData: any = ref([])
|
|
|
|
|
|
const getColumns = () => {
|
|
|
|
|
|
getRealTimeTableList().then(res => {
|
|
|
|
|
|
columnsData.value = res.data
|
2024-09-14 10:32:01 +08:00
|
|
|
|
getTableData(dataList.value)
|
2024-07-22 10:35:01 +08:00
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
//处理表格数据
|
2024-07-31 16:23:34 +08:00
|
|
|
|
const columnsDataTop: any = ref([])
|
|
|
|
|
|
const columnsDataBot: any = ref([])
|
2024-07-22 10:35:01 +08:00
|
|
|
|
const getTableData = (list: any) => {
|
2024-07-31 16:23:34 +08:00
|
|
|
|
loading.value = true
|
2024-07-22 10:35:01 +08:00
|
|
|
|
tableData.value = list
|
2024-07-31 16:23:34 +08:00
|
|
|
|
columnsDataTop.value = []
|
|
|
|
|
|
columnsDataBot.value = []
|
2024-09-14 10:32:01 +08:00
|
|
|
|
|
2024-07-31 16:23:34 +08:00
|
|
|
|
columnsData.value.map((item: any, index: any) => {
|
2024-07-22 10:35:01 +08:00
|
|
|
|
item.map((vv: any) => {
|
|
|
|
|
|
vv.statisticalData = list.find((kk: any) => {
|
|
|
|
|
|
return kk.anotherName == vv.showName && kk.phase == vv.phase
|
|
|
|
|
|
})?.statisticalData
|
2024-07-03 19:31:43 +08:00
|
|
|
|
})
|
2024-07-31 16:23:34 +08:00
|
|
|
|
if (index < 4) {
|
2024-09-14 10:32:01 +08:00
|
|
|
|
columnsDataTop.value.push(item)
|
2024-07-31 16:23:34 +08:00
|
|
|
|
}
|
|
|
|
|
|
if (index >= 4) {
|
|
|
|
|
|
columnsDataBot.value.push(item)
|
|
|
|
|
|
}
|
|
|
|
|
|
loading.value = false
|
2024-07-22 10:35:01 +08:00
|
|
|
|
})
|
2024-07-03 19:31:43 +08:00
|
|
|
|
}
|
2024-08-01 16:37:24 +08:00
|
|
|
|
//电流相角数组&电压相角数组
|
2024-10-12 11:40:07 +08:00
|
|
|
|
const iRadioList: any = ref([])
|
|
|
|
|
|
const vRadioList: any = ref([])
|
|
|
|
|
|
|
|
|
|
|
|
const realData = ref<any>({})
|
|
|
|
|
|
const realList = ref<any>([])
|
2025-11-17 15:44:20 +08:00
|
|
|
|
|
|
|
|
|
|
// 计算电压单位
|
|
|
|
|
|
const voltageUnit = computed(() => {
|
2026-01-23 09:24:13 +08:00
|
|
|
|
return currentDataLevel.value === 'Primary' ? 'kV' : 'V'
|
2025-11-17 15:44:20 +08:00
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
// 计算功率单位
|
|
|
|
|
|
const powerUnit = computed(() => {
|
2026-01-23 09:24:13 +08:00
|
|
|
|
return currentDataLevel.value === 'Primary' ? 'kW' : 'W'
|
2025-11-17 15:44:20 +08:00
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
// 计算无功功率单位
|
|
|
|
|
|
const reactivePowerUnit = computed(() => {
|
2026-01-23 09:24:13 +08:00
|
|
|
|
return currentDataLevel.value === 'Primary' ? 'kVar' : 'Var'
|
2025-11-17 15:44:20 +08:00
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
// 计算视在功率单位
|
|
|
|
|
|
const apparentPowerUnit = computed(() => {
|
2026-01-23 09:24:13 +08:00
|
|
|
|
return currentDataLevel.value === 'Primary' ? 'kVA' : 'VA'
|
2025-11-17 15:44:20 +08:00
|
|
|
|
})
|
|
|
|
|
|
|
2026-01-23 09:24:13 +08:00
|
|
|
|
const setRealData = (val: any, dataLevel: string) => {
|
2025-11-17 15:44:20 +08:00
|
|
|
|
// 只有当 dataLevel 真正改变时才更新
|
|
|
|
|
|
if (dataLevel !== previousDataLevel.value) {
|
|
|
|
|
|
currentDataLevel.value = dataLevel
|
|
|
|
|
|
previousDataLevel.value = dataLevel
|
|
|
|
|
|
}
|
2024-10-12 11:40:07 +08:00
|
|
|
|
realData.value = val
|
|
|
|
|
|
realList.value = [val]
|
|
|
|
|
|
initRadioCharts()
|
2026-06-08 18:34:49 +08:00
|
|
|
|
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)
|
2024-07-22 10:35:01 +08:00
|
|
|
|
}
|
2024-10-12 11:40:07 +08:00
|
|
|
|
defineExpose({ setRealData })
|
2024-07-03 19:31:43 +08:00
|
|
|
|
onMounted(() => {
|
|
|
|
|
|
init()
|
2024-08-01 16:37:24 +08:00
|
|
|
|
initRadioCharts()
|
2024-07-03 19:31:43 +08:00
|
|
|
|
})
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
2026-06-08 18:34:49 +08:00
|
|
|
|
.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);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2024-07-03 19:31:43 +08:00
|
|
|
|
.view {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
box-sizing: border-box;
|
2024-10-15 19:39:38 +08:00
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
2024-11-19 10:39:46 +08:00
|
|
|
|
|
2024-07-03 19:31:43 +08:00
|
|
|
|
.view_top {
|
|
|
|
|
|
width: 100%;
|
2024-10-17 14:08:58 +08:00
|
|
|
|
height: 340px !important;
|
2024-07-03 19:31:43 +08:00
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: space-between;
|
2024-08-23 08:51:36 +08:00
|
|
|
|
//border: 1px solid #eee;
|
|
|
|
|
|
// padding: 10px;
|
2026-06-08 18:34:49 +08:00
|
|
|
|
// margin-top: 10px;
|
2024-11-19 10:39:46 +08:00
|
|
|
|
|
2024-07-03 19:31:43 +08:00
|
|
|
|
.view_top_left,
|
|
|
|
|
|
.view_top_right {
|
2024-10-17 14:08:58 +08:00
|
|
|
|
// width: 300px;
|
|
|
|
|
|
flex: 1;
|
2024-07-03 19:31:43 +08:00
|
|
|
|
height: 100%;
|
2024-10-17 14:08:58 +08:00
|
|
|
|
// padding: 10px;
|
2024-07-03 19:31:43 +08:00
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
align-items: center;
|
2024-07-22 10:35:01 +08:00
|
|
|
|
border: 1px solid #eee;
|
2024-11-19 10:39:46 +08:00
|
|
|
|
|
2024-07-03 19:31:43 +08:00
|
|
|
|
.left_charts,
|
|
|
|
|
|
.right_charts {
|
|
|
|
|
|
flex: none;
|
|
|
|
|
|
width: 100%;
|
2024-10-17 14:08:58 +08:00
|
|
|
|
height: 90px;
|
|
|
|
|
|
// margin-bottom: 16px;
|
|
|
|
|
|
// padding: 10px;
|
|
|
|
|
|
margin-bottom: 8px;
|
2024-07-03 19:31:43 +08:00
|
|
|
|
}
|
|
|
|
|
|
}
|
2024-11-19 10:39:46 +08:00
|
|
|
|
|
2024-07-03 19:31:43 +08:00
|
|
|
|
.view_top_mid {
|
2024-10-17 14:08:58 +08:00
|
|
|
|
// flex: 1;
|
|
|
|
|
|
width: 40%;
|
2024-07-03 19:31:43 +08:00
|
|
|
|
border: 1px solid #eee;
|
|
|
|
|
|
margin: 0 10px;
|
2024-10-23 14:37:11 +08:00
|
|
|
|
// padding: 10px;
|
2024-10-18 16:24:44 +08:00
|
|
|
|
position: relative;
|
2024-11-19 10:39:46 +08:00
|
|
|
|
|
2024-07-03 19:31:43 +08:00
|
|
|
|
.mid_charts {
|
|
|
|
|
|
width: 100%;
|
2024-10-22 14:00:39 +08:00
|
|
|
|
height: 280px;
|
|
|
|
|
|
// position: absolute;
|
|
|
|
|
|
// top: 20%;
|
|
|
|
|
|
// bottom: 10px;
|
2024-07-03 19:31:43 +08:00
|
|
|
|
}
|
|
|
|
|
|
}
|
2024-07-22 10:35:01 +08:00
|
|
|
|
|
|
|
|
|
|
.left_charts_title,
|
|
|
|
|
|
.mid_charts_title,
|
|
|
|
|
|
.right_charts_title {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 20px;
|
|
|
|
|
|
text-align: left;
|
|
|
|
|
|
font-weight: 800;
|
|
|
|
|
|
font-weight: 16px;
|
|
|
|
|
|
line-height: 20px;
|
2024-10-23 14:37:11 +08:00
|
|
|
|
margin: 10px 0 0 10px;
|
|
|
|
|
|
padding-left: 5px;
|
|
|
|
|
|
box-sizing: border-box;
|
2024-07-22 10:35:01 +08:00
|
|
|
|
}
|
2024-07-03 19:31:43 +08:00
|
|
|
|
}
|
2024-11-19 10:39:46 +08:00
|
|
|
|
|
2024-07-03 19:31:43 +08:00
|
|
|
|
.view_bot {
|
2024-11-19 10:39:46 +08:00
|
|
|
|
// min-height: 300px;
|
2024-10-15 19:39:38 +08:00
|
|
|
|
overflow: auto !important;
|
|
|
|
|
|
flex: 1 !important;
|
2024-11-19 10:39:46 +08:00
|
|
|
|
// padding-bottom: 200px !important;
|
2024-10-15 19:39:38 +08:00
|
|
|
|
box-sizing: border-box !important;
|
2024-11-19 10:39:46 +08:00
|
|
|
|
|
2024-07-03 19:31:43 +08:00
|
|
|
|
.view_bot_tables {
|
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
|
height: auto;
|
2024-07-31 16:23:34 +08:00
|
|
|
|
min-height: 120px;
|
2024-07-03 19:31:43 +08:00
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
2024-11-19 10:39:46 +08:00
|
|
|
|
|
2024-07-03 19:31:43 +08:00
|
|
|
|
.view::-webkit-scrollbar {
|
|
|
|
|
|
display: none;
|
|
|
|
|
|
}
|
2024-11-19 10:39:46 +08:00
|
|
|
|
|
2024-07-31 16:23:34 +08:00
|
|
|
|
.table_container {
|
2024-07-22 10:35:01 +08:00
|
|
|
|
width: 100%;
|
2024-07-31 16:23:34 +08:00
|
|
|
|
height: auto;
|
2024-07-22 10:35:01 +08:00
|
|
|
|
display: flex;
|
2024-07-31 16:23:34 +08:00
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: center;
|
2024-11-19 10:39:46 +08:00
|
|
|
|
|
2024-07-31 16:23:34 +08:00
|
|
|
|
.table {
|
|
|
|
|
|
flex: 1;
|
2024-11-19 10:39:46 +08:00
|
|
|
|
|
2024-07-31 16:23:34 +08:00
|
|
|
|
.table_info {
|
2024-07-22 10:35:01 +08:00
|
|
|
|
width: 100%;
|
2024-07-31 16:23:34 +08:00
|
|
|
|
height: 120px;
|
2024-08-23 08:51:36 +08:00
|
|
|
|
// border: 1px solid #eee;
|
2024-07-31 16:23:34 +08:00
|
|
|
|
border-bottom: 2px solid #eee;
|
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
2024-07-22 10:35:01 +08:00
|
|
|
|
}
|
2024-11-19 10:39:46 +08:00
|
|
|
|
|
2024-07-31 16:23:34 +08:00
|
|
|
|
.thead {
|
2024-07-22 10:35:01 +08:00
|
|
|
|
width: 100%;
|
2024-07-31 16:23:34 +08:00
|
|
|
|
height: auto;
|
|
|
|
|
|
background: #f4f6f9;
|
|
|
|
|
|
text-align: center;
|
2024-07-22 10:35:01 +08:00
|
|
|
|
display: flex;
|
2024-07-31 16:23:34 +08:00
|
|
|
|
flex-direction: column;
|
2024-11-19 10:39:46 +08:00
|
|
|
|
|
2024-07-31 16:23:34 +08:00
|
|
|
|
.thead_top {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 40px;
|
|
|
|
|
|
line-height: 40px;
|
2024-07-22 10:35:01 +08:00
|
|
|
|
border: 1px solid #eee;
|
2024-07-31 16:23:34 +08:00
|
|
|
|
color: #111;
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
font-weight: 800;
|
|
|
|
|
|
}
|
2024-11-19 10:39:46 +08:00
|
|
|
|
|
2024-07-31 16:23:34 +08:00
|
|
|
|
.thead_bot {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 40px;
|
|
|
|
|
|
line-height: 40px;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
color: #111;
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
font-weight: 800;
|
2024-11-19 10:39:46 +08:00
|
|
|
|
|
2024-07-31 16:23:34 +08:00
|
|
|
|
.thead_bot_cell {
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
border: 1px solid #eee;
|
|
|
|
|
|
}
|
2024-07-22 10:35:01 +08:00
|
|
|
|
}
|
|
|
|
|
|
}
|
2024-11-19 10:39:46 +08:00
|
|
|
|
|
2024-07-31 16:23:34 +08:00
|
|
|
|
.tbody {
|
2024-07-22 10:35:01 +08:00
|
|
|
|
flex: 1;
|
2024-07-31 16:23:34 +08:00
|
|
|
|
display: flex;
|
2024-07-22 10:35:01 +08:00
|
|
|
|
text-align: center;
|
2024-11-19 10:39:46 +08:00
|
|
|
|
|
2024-07-31 16:23:34 +08:00
|
|
|
|
.tbody_cell {
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
line-height: 40px;
|
|
|
|
|
|
border: 1px solid #eee;
|
|
|
|
|
|
border-bottom: 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
2024-11-19 10:39:46 +08:00
|
|
|
|
|
2024-07-31 16:23:34 +08:00
|
|
|
|
.tbody:hover {
|
|
|
|
|
|
background: #f4f6f9;
|
2024-07-22 10:35:01 +08:00
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
2024-11-19 10:39:46 +08:00
|
|
|
|
|
2024-08-01 16:37:24 +08:00
|
|
|
|
.table_container:hover {
|
2024-07-31 16:23:34 +08:00
|
|
|
|
.table {
|
2024-08-01 16:37:24 +08:00
|
|
|
|
.tbody {
|
2024-07-31 16:23:34 +08:00
|
|
|
|
background: #f4f6f9;
|
2024-08-01 16:37:24 +08:00
|
|
|
|
}
|
|
|
|
|
|
}
|
2024-07-31 16:23:34 +08:00
|
|
|
|
}
|
2024-11-19 10:39:46 +08:00
|
|
|
|
|
|
|
|
|
|
:deep(.view_bot) {
|
2026-06-08 18:34:49 +08:00
|
|
|
|
|
2024-11-19 10:39:46 +08:00
|
|
|
|
.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;
|
|
|
|
|
|
}
|
2024-12-25 10:53:07 +08:00
|
|
|
|
|
|
|
|
|
|
.vxe-table--body-wrapper {
|
2024-11-19 10:39:46 +08:00
|
|
|
|
min-height: 32px !important;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
2024-12-25 10:53:07 +08:00
|
|
|
|
|
2026-06-08 18:34:49 +08:00
|
|
|
|
:deep(.vxe-table--render-default) {
|
|
|
|
|
|
font-size: 13px !important;
|
2024-11-19 10:39:46 +08:00
|
|
|
|
}
|
2024-07-03 19:31:43 +08:00
|
|
|
|
</style>
|
