<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>
                    </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="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>
        </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" 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 />
            <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>
                <vxe-column align="center" width="180" field="iUnbalance" title="电流不平衡度(%)"></vxe-column>
                <vxe-colgroup align="center" :title="`基波电压幅值(${voltageUnit})`">
                    <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 />
            <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>
                    <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>
                <vxe-colgroup align="center" :title="`有功功率(${powerUnit})`">
                    <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 />
            <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>
                    <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>
                <vxe-colgroup align="center" :title="`视在功率(${apparentPowerUnit})`">
                    <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>
                <vxe-colgroup align="center" title="视在功率因数(P/S)">
                    <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>
                <vxe-colgroup align="center" title="位移功率因数(P/S1)">
                    <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>
    </div>
</template>
<script lang="ts" setup>
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 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 echartsData1: any = ref({})
//电压有效值
const echartsDataV1: any = ref({})
const echartsDataV2: any = ref({})
const echartsDataV3: any = ref({})
//电流有效值
const echartsDataA1: any = ref({})
const echartsDataA2: any = ref({})
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: {
            grid: {
                top: 0
            },
            title: {
                text: '',
                x: 'center'
            },
            tooltip: {
                formatter: '{a} <br/>{b} {c}°'
            },
            toolbox: {
                show: false
            },
            legend: {
                show: false
            },
            series: [
                // 外圈电压 内圈电流
                {
                    name: '基波电流相位',
                    type: 'gauge',
                    // 表盘最小值
                    min: 180,
                    // 表盘最大值
                    max: -180,
                    // 表盘分割数
                    splitNumber: 6,
                    // 圆心位置
                    center: ['50%', '50%'],
                    // 半径
                    radius: '50%',
                    // startAngle: 180,
                    // endAngle: -179.99,
                    startAngle: 90,
                    endAngle: -179.99,
                    // 指针方向
                    clockWise: true,
                    title: false,
                    // 表盘外框
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: [
                                [0.25, PHASE_RING_COLOR],
                                [0.5, PHASE_RING_COLOR],
                                [0.75, PHASE_RING_COLOR],
                                [1, PHASE_RING_COLOR],
                            ],
                            width: 2,
                        },
                    },
                    axisTick: {
                        show: true,
                        splitNumber: 5,
                        distance: 4,
                        length: 4,
                        lineStyle: {
                            color: PHASE_RING_COLOR,
                            width: 1,
                            type: 'solid',
                        },
                    },
                    splitLine: {
                        show: true,
                        distance: 4,
                        length: 10,
                        lineStyle: {
                            color: PHASE_RING_COLOR,
                            width: 2,
                            type: 'solid',
                        },
                    },
                    // 分割线标识
                    axisLabel: {
                        show: true,
                        distance: 5,
                        formatter: function (v) {
                            switch (v + '') {
                                case '-180':
                                    return ''
                                default:
                                    return v
                            }
                        }
                    },

                    // // 指针设置
                    // pointer: {
                    //     length: '80%',
                    //     width: 3
                    // },
                    // 指针设置
                    pointer: {
                        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,
                        shadowBlur: 0,
                        shadowColor: 'transparent',
                    },
                    detail: {
                        show: false
                    },
                    data: [
                        {
                            value: 0,
                            name: 'A相',
                            itemStyle: {
                                color: PHASE_COLORS.A
                            }
                        },
                        {
                            value: 0,
                            name: 'B相',
                            itemStyle: {
                                color: PHASE_COLORS.B
                            }
                        },
                        {
                            value: 0,
                            name: 'C相',
                            itemStyle: {
                                color: PHASE_COLORS.C
                            }
                        }
                    ]
                },
                {
                    name: '基波电压相位',
                    type: 'gauge',
                    // 表盘最小值
                    min: 180,
                    // 表盘最大值
                    max: -180,
                    // 表盘分割数
                    splitNumber: 6,
                    // 圆心位置
                    center: ['50%', '50%'],
                    // 半径
                    radius: '85%',
                    // startAngle: 180,
                    // endAngle: -179.99,
                    startAngle: 90,
                    endAngle: -179.99,
                    // 指针方向
                    clockWise: true,
                    title: false,
                    // 表盘外框
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: [
                                [0.25, PHASE_RING_COLOR],
                                [0.5, PHASE_RING_COLOR],
                                [0.75, PHASE_RING_COLOR],
                                [1, PHASE_RING_COLOR],
                            ],
                            width: 1.5,
                        },
                    },
                    axisTick: {
                        show: true,
                        splitNumber: 5,
                        distance: 5,
                        length: 6,
                        lineStyle: {
                            color: PHASE_RING_COLOR,
                            width: 1,
                            type: 'solid',
                        },
                    },
                    splitLine: {
                        show: true,
                        distance: 5,
                        length: 10,
                        lineStyle: {
                            color: PHASE_RING_COLOR,
                            width: 2,
                            type: 'solid',
                        },
                    },
                    // 分割线标识
                    axisLabel: {
                        show: true,
                        distance: 5,
                        formatter: function (v) {
                            switch (v + '') {
                                case '-180':
                                    return ''
                                default:
                                    return v
                            }
                        }
                    },

                    // // 指针设置
                    // pointer: {
                    //     length: '90%',
                    //     width: 6
                    // },
                    // 指针设置
                    pointer: {
                        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,
                        shadowBlur: 0,
                        shadowColor: 'transparent',
                    },
                    detail: {
                        show: false
                    },
                    data: [
                        {
                            value: 0,
                            name: 'A相',
                            itemStyle: {
                                color: PHASE_COLORS.A
                            }
                        },
                        {
                            value: 0,
                            name: 'B相',
                            itemStyle: {
                                color: PHASE_COLORS.B
                            }
                        },
                        {
                            value: 0,
                            name: 'C相',
                            itemStyle: {
                                color: PHASE_COLORS.C
                            }
                        }
                    ]
                }
            ]
        }
    }
    //电流相角
    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
            }
        })
    })

    //新的实时数据
    // 电流相角
    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

    for (var i = 0; i < echartsData1.value.options.series.length; i++) {
        echartsData1.value.options.series[i].type = 'gauge'
        echartsData1.value.options.series[i].startAngle = 180
        echartsData1.value.options.series[i].endAngle = -360
        echartsData1.value.options.series[i].center = ['50%', '50%']
    }

    echartsData1.value.options.graphic = buildPhaseLegendGraphic()
}
//渲染echarts
const init = () => {
    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([])
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
        getTableData(dataList.value)
    })
}
//处理表格数据
const columnsDataTop: any = ref([])
const columnsDataBot: any = ref([])
const getTableData = (list: any) => {
    loading.value = true
    tableData.value = list
    columnsDataTop.value = []
    columnsDataBot.value = []

    columnsData.value.map((item: any, index: any) => {
        item.map((vv: any) => {
            vv.statisticalData = list.find((kk: any) => {
                return kk.anotherName == vv.showName && kk.phase == vv.phase
            })?.statisticalData
        })
        if (index < 4) {
            columnsDataTop.value.push(item)
        }
        if (index >= 4) {
            columnsDataBot.value.push(item)
        }
        loading.value = false
    })
}
//电流相角数组&电压相角数组
const iRadioList: any = ref([])
const vRadioList: any = ref([])

const realData = ref<any>({})
const realList = ref<any>([])

// 计算电压单位
const voltageUnit = computed(() => {
    return currentDataLevel.value === 'Primary' ? 'kV' : 'V'
})

// 计算功率单位
const powerUnit = computed(() => {
    return currentDataLevel.value === 'Primary' ? 'kW' : 'W'
})

// 计算无功功率单位
const reactivePowerUnit = computed(() => {
    return currentDataLevel.value === 'Primary' ? 'kVar' : 'Var'
})

// 计算视在功率单位
const apparentPowerUnit = computed(() => {
    return currentDataLevel.value === 'Primary' ? 'kVA' : 'VA'
})

const setRealData = (val: any, dataLevel: string) => {
    // 只有当 dataLevel 真正改变时才更新
    if (dataLevel !== previousDataLevel.value) {
        currentDataLevel.value = dataLevel
        previousDataLevel.value = dataLevel
    }
    realData.value = val
    realList.value = [val]
    initRadioCharts()
    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(() => {
    init()
    initRadioCharts()
})
</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%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;

    .view_top {
        width: 100%;
        height: 340px !important;
        display: flex;
        justify-content: space-between;
        //border: 1px solid #eee;
        // padding: 10px;
        // margin-top: 10px;

        .view_top_left,
        .view_top_right {
            // width: 300px;
            flex: 1;
            height: 100%;
            // padding: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            border: 1px solid #eee;

            .left_charts,
            .right_charts {
                flex: none;
                width: 100%;
                height: 90px;
                // margin-bottom: 16px;
                // padding: 10px;
                margin-bottom: 8px;
            }
        }

        .view_top_mid {
            // flex: 1;
            width: 40%;
            border: 1px solid #eee;
            margin: 0 10px;
            // padding: 10px;
            position: relative;

            .mid_charts {
                width: 100%;
                height: 280px;
                // position: absolute;
                // top: 20%;
                // bottom: 10px;
            }
        }

        .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;
            margin: 10px 0 0 10px;
            padding-left: 5px;
            box-sizing: border-box;
        }
    }

    .view_bot {
        // min-height: 300px;
        overflow: auto !important;
        flex: 1 !important;
        // padding-bottom: 200px !important;
        box-sizing: border-box !important;

        .view_bot_tables {
            margin-bottom: 10px;
            height: auto;
            min-height: 120px;
        }
    }
}

.view::-webkit-scrollbar {
    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>
