<template>
    <div class="view" v-loading="loading">
        <h3 class="view_title">最新时刻:{{ timeFormat(time) }}</h3>
        <div v-show="view == 1">
            <div class="view_btn" v-if="time">
                <el-button type="primary" :icon="DataLine" @click="view = 2">谐波频谱</el-button>
                <el-button type="primary" :icon="TrendCharts" @click="view = 3">实时趋势</el-button>
                <el-button type="primary" :icon="Download" @click="downloadTxt">下载数据</el-button>
            </div>
            <el-collapse v-model.trim="activeNames" @change="handleChange">
                <el-collapse-item title="基础数据" name="1">
                    <div class="view_top">
                        <!-- 左侧仪表盘 -->
                        <div class="view_top_left">
                            <div class="left_charts_title">电压有效值(kV)</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 class="mid_charts_text">
                                    <div>电压</div>
                                    <div>
                                        A相:
                                        <span style="color: #daa520">
                                            {{ echartsData1?.options?.series[1].data[0].value }}
                                        </span>
                                    </div>
                                    <div>
                                        B相:
                                        <span style="color: #2e8b57">
                                            {{ echartsData1?.options?.series[1].data[1].value }}
                                        </span>
                                    </div>
                                    <div>
                                        C相:
                                        <span style="color: #a52a2a">
                                            {{ echartsData1?.options?.series[1].data[2].value }}
                                        </span>
                                    </div>
                                    <div style="margin-top: 10px">电流</div>
                                    <div>
                                        A相:
                                        <span style="color: #daa520">
                                            {{ echartsData1?.options?.series[0].data[0].value }}
                                        </span>
                                    </div>
                                    <div>
                                        B相:
                                        <span style="color: #2e8b57">
                                            {{ echartsData1?.options?.series[0].data[1].value }}
                                        </span>
                                    </div>
                                    <div>
                                        C相:
                                        <span style="color: #a52a2a">
                                            {{ echartsData1?.options?.series[0].data[2].value }}
                                        </span>
                                    </div>
                                </div>
                            </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 class="view_bot" :style="height">
                <vxe-table border :data="webMsgSend" :tooltip-config="{ enterable: true }">
                    <vxe-colgroup align="center" title="电压有效值(kV)">
                        <vxe-column
                            align="center"
                            field="vRmsA"
                            :title="ptName == 'star' ? 'A相' : 'AB相'"
                            :formatter="formatter"
                        />
                        <vxe-column
                            align="center"
                            field="vRmsB"
                            :title="ptName == 'star' ? 'B相' : 'BC相'"
                            :formatter="formatter"
                        />
                        <vxe-column
                            align="center"
                            field="vRmsC"
                            :title="ptName == 'star' ? 'C相' : 'CA相'"
                            :formatter="formatter"
                        />
                    </vxe-colgroup>
                    <vxe-colgroup align="center" title="电流有效值(A)">
                        <vxe-column align="center" field="iRmsA" title="A相" :formatter="formatter" />
                        <vxe-column align="center" field="iRmsB" title="B相" :formatter="formatter" />
                        <vxe-column align="center" field="iRmsC" title="C相" :formatter="formatter" />
                    </vxe-colgroup>
                    <vxe-colgroup align="center" title="基波电压相位(°)">
                        <vxe-column
                            align="center"
                            field="v1AngA"
                            :title="ptName == 'star' ? 'A相' : 'AB相'"
                            :formatter="formatter"
                        />
                        <vxe-column
                            align="center"
                            field="v1AngB"
                            :title="ptName == 'star' ? 'B相' : 'BC相'"
                            :formatter="formatter"
                        />
                        <vxe-column
                            align="center"
                            field="v1AngC"
                            :title="ptName == 'star' ? 'C相' : 'CA相'"
                            :formatter="formatter"
                        />
                    </vxe-colgroup>
                    <vxe-colgroup align="center" title="基波电流相位(°)">
                        <vxe-column align="center" field="i1AngA" title="A相" :formatter="formatter" />
                        <vxe-column align="center" field="i1AngB" title="B相" :formatter="formatter" />
                        <vxe-column align="center" field="i1AngC" title="C相" :formatter="formatter" />
                    </vxe-colgroup>
                </vxe-table>
                <br />
                <vxe-table border :data="webMsgSend" :tooltip-config="{ enterable: true }">
                    <vxe-column align="center" field="freq" width="140" title="频率(Hz)" :formatter="formatter" />
                    <vxe-column
                        align="center"
                        field="freqDev"
                        width="120"
                        title="频率偏差(Hz)"
                        :formatter="formatter"
                    />
                    <vxe-column
                        align="center"
                        width="180"
                        field="vUnbalance"
                        title="电压不平衡度(%)"
                        :formatter="formatter"
                    />
                    <vxe-column
                        align="center"
                        width="180"
                        field="iUnbalance"
                        title="电流不平衡度(%)"
                        :formatter="formatter"
                    />
                    <vxe-colgroup align="center" title="基波电压幅值(kV)">
                        <vxe-column
                            align="center"
                            field="v1A"
                            :title="ptName == 'star' ? 'A相' : 'AB相'"
                            :formatter="formatter"
                        />
                        <vxe-column
                            align="center"
                            field="v1B"
                            :title="ptName == 'star' ? 'B相' : 'BC相'"
                            :formatter="formatter"
                        />
                        <vxe-column
                            align="center"
                            field="v1C"
                            :title="ptName == 'star' ? 'C相' : 'CA相'"
                            :formatter="formatter"
                        />
                    </vxe-colgroup>
                    <vxe-colgroup align="center" title="基波电流幅值(A)">
                        <vxe-column align="center" field="i1A" title="A相" :formatter="formatter" />
                        <vxe-column align="center" field="i1B" title="B相" :formatter="formatter" />
                        <vxe-column align="center" field="i1C" title="C相" :formatter="formatter" />
                    </vxe-colgroup>
                </vxe-table>
                <br />
                <vxe-table border :data="webMsgSend" :tooltip-config="{ enterable: true }">
                    <vxe-colgroup align="center" title="电压偏差(%)">
                        <vxe-column
                            align="center"
                            field="vDevA"
                            :title="ptName == 'star' ? 'A相' : 'AB相'"
                            :formatter="formatter"
                        />
                        <vxe-column
                            align="center"
                            field="vDevB"
                            :title="ptName == 'star' ? 'B相' : 'BC相'"
                            :formatter="formatter"
                        />
                        <vxe-column
                            align="center"
                            field="vDevC"
                            :title="ptName == 'star' ? 'C相' : 'CA相'"
                            :formatter="formatter"
                        />
                    </vxe-colgroup>
                    <vxe-colgroup align="center" title="电压总谐波畸变率(%)">
                        <vxe-column
                            align="center"
                            field="vThdA"
                            :title="ptName == 'star' ? 'A相' : 'AB相'"
                            :formatter="formatter"
                        />
                        <vxe-column
                            align="center"
                            field="vThdB"
                            :title="ptName == 'star' ? 'B相' : 'BC相'"
                            :formatter="formatter"
                        />
                        <vxe-column
                            align="center"
                            field="vThdC"
                            :title="ptName == 'star' ? 'C相' : 'CA相'"
                            :formatter="formatter"
                        />
                    </vxe-colgroup>
                    <vxe-colgroup align="center" title="电流总谐波畸变率(%)">
                        <vxe-column align="center" field="iThdA" title="A相" :formatter="formatter" />
                        <vxe-column align="center" field="iThdB" title="B相" :formatter="formatter" />
                        <vxe-column align="center" field="iThdC" title="C相" :formatter="formatter" />
                    </vxe-colgroup>
                    <vxe-colgroup align="center" title="有功功率(kW)">
                        <vxe-column
                            v-if="ptName == 'star'"
                            align="center"
                            field="pA"
                            title="A相"
                            :formatter="formatter"
                        />
                        <vxe-column
                            v-if="ptName == 'star'"
                            align="center"
                            field="pB"
                            title="B相"
                            :formatter="formatter"
                        />
                        <vxe-column
                            v-if="ptName == 'star'"
                            align="center"
                            field="pC"
                            title="C相"
                            :formatter="formatter"
                        />
                        <vxe-column align="center" field="pTot" title="总" :formatter="formatter" />
                    </vxe-colgroup>
                </vxe-table>
                <br />
                <vxe-table border :data="webMsgSend" :tooltip-config="{ enterable: true }">
                    <vxe-colgroup align="center" title="无功功率(kVar)">
                        <vxe-column
                            v-if="ptName == 'star'"
                            align="center"
                            field="qA"
                            title="A相"
                            :formatter="formatter"
                        />
                        <vxe-column
                            v-if="ptName == 'star'"
                            align="center"
                            field="qB"
                            title="B相"
                            :formatter="formatter"
                        />
                        <vxe-column
                            v-if="ptName == 'star'"
                            align="center"
                            field="qC"
                            title="C相"
                            :formatter="formatter"
                        />
                        <vxe-column align="center" field="qTot" title="总" :formatter="formatter" />
                    </vxe-colgroup>
                    <vxe-colgroup align="center" title="视在功率(kVA)">
                        <vxe-column
                            v-if="ptName == 'star'"
                            align="center"
                            field="sA"
                            title="A相"
                            :formatter="formatter"
                        />
                        <vxe-column
                            v-if="ptName == 'star'"
                            align="center"
                            field="sB"
                            title="B相"
                            :formatter="formatter"
                        />
                        <vxe-column
                            v-if="ptName == 'star'"
                            align="center"
                            field="sC"
                            title="C相"
                            :formatter="formatter"
                        />
                        <vxe-column align="center" field="sTot" title="总" :formatter="formatter" />
                    </vxe-colgroup>
                    <vxe-colgroup align="center" title="功率因数">
                        <vxe-column align="center" field="pfA" title="A相" :formatter="formatter" />
                        <vxe-column align="center" field="pfB" title="B相" :formatter="formatter" />
                        <vxe-column align="center" field="pfC" title="C相" :formatter="formatter" />
                        <vxe-column align="center" field="pfTot" title="总" :formatter="formatter" />
                    </vxe-colgroup>
                    <vxe-colgroup align="center" title="基波功率因数">
                        <vxe-column align="center" field="dpfA" title="A相" :formatter="formatter" />
                        <vxe-column align="center" field="dpfB" title="B相" :formatter="formatter" />
                        <vxe-column align="center" field="dpfC" title="C相" :formatter="formatter" />
                        <vxe-column align="center" field="dpfTot" title="总" :formatter="formatter" />
                    </vxe-colgroup>
                </vxe-table>
            </div>
        </div>
        <!-- 谐波频谱 -->
        <spectrum v-if="view == 2" ref="spectrumRef" @shutDown="view = 1" />
        <!-- 实时趋势 -->
        <trend v-if="view == 3" ref="trendRef" :ptName="ptName" @shutDown="view = 1" />
    </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import MyEchart from '@/components/echarts/MyEchart.vue'
import socketClient from '@/utils/webSocketClient'
import { useMonitoringPoint } from '@/stores/monitoringPoint'
import { useDictData } from '@/stores/dictData'
import { timeFormat } from '@/utils/common'
import { useAdminInfo } from '@/stores/adminInfo'
import { TrendCharts, DataLine, Download } from '@element-plus/icons-vue'
import spectrum from './spectrum.vue'
import trend from './trend.vue'
import { getLineDetail } from '@/api/device-boot/communicate'
import { mainHeight } from '@/utils/layout'
import { ElMessage } from 'element-plus'
// import { getRealTimeTableList } from '@/api/cs-device-boot/EquipmentDelivery'
const height = ref(mainHeight(580))
const monitoringPoint = useMonitoringPoint()
const dictData = useDictData()
const adminInfo = useAdminInfo()
const pieChartRef: any = ref()
const spectrumRef = ref()
const trendRef = ref()
const connection: any = dictData.getBasicData('Dev_Connect')
const ptName = ref('star') //star:星型接线,Star_Triangle:星三角 ,Open_Delta:开口三角
const view = ref(1) //1:实时数据，2:谐波频谱 3:实时趋势
const time: any = ref('')
const webMsgSend: any = ref([])
const activeNames = ref(['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({})
const echartsDataV2: any = ref({})
const echartsDataV3: any = ref({})
//电流有效值
const echartsDataA1: any = ref({})
const echartsDataA2: any = ref({})
const echartsDataA3: any = ref({})
//开始创建webSocket客户端
const dataSocket = reactive({
    socketServe: socketClient.Instance
})
const handleChange = () => {
    height.value = mainHeight(activeNames.value.length == 0 ? 160 : 580)
}
const txtContent = ref('')
//渲染中间相角图
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: [
                // 外圈电压 内圈电流
                {
                    zlevel: 2,
                    name: '基波电流相位',
                    type: 'gauge',
                    // 表盘最小值
                    min: 180,
                    // 表盘最大值
                    max: -180,
                    // 表盘分割数
                    splitNumber: 6,
                    // 圆心位置
                    center: ['50%', '50%'],
                    // 半径
                    radius: '54%',
                    // startAngle: 180,
                    // endAngle: -179.99,
                    startAngle: 90,
                    endAngle: -179.99,
                    // 指针方向
                    clockWise: true,
                    title: false,
                    // 表盘外框
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: [
                                [0.25, '#9D322D'],
                                [0.5, '#9D322D'],
                                [0.75, '#9D322D'],
                                [1, '#9D322D']
                            ],
                            width: 2
                        }
                    },
                    // 表盘细分数
                    axisTick: {
                        show: true,
                        splitNumber: 5,
                        length: 4,
                        lineStyle: {
                            color: '#9D322D',
                            width: 1,
                            type: 'solid'
                        }
                    },
                    // 分割线
                    splitLine: {
                        show: true,
                        length: 10,
                        lineStyle: {
                            color: '#9D322D',
                            width: 2,
                            type: 'solid'
                        }
                    },
                    // 分割线标识
                    axisLabel: {
                        show: true,
                        distance: 5,
                        formatter: function (v) {
                            switch (v + '') {
                                case '-180':
                                    return ''
                                default:
                                    return v
                            }
                        }
                    },

                    // 指针设置
                    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
                    },
                    detail: {
                        show: false
                    },
                    //数值位置

                    data: [
                        {
                            value: 0,
                            name: 'A相',
                            itemStyle: {
                                color: '#DAA520'
                            }
                        },
                        {
                            value: 0,
                            name: 'B相',
                            itemStyle: {
                                color: '#2E8B57'
                            }
                        },
                        {
                            value: 0,
                            name: 'C相',
                            itemStyle: {
                                color: '#A52a2a'
                            }
                        }
                    ]
                },
                {
                    zlevel: 1,
                    name: '基波电压相位',
                    type: 'gauge',
                    // 表盘最小值
                    min: 180,
                    // 表盘最大值
                    max: -180,
                    // 表盘分割数
                    splitNumber: 6,
                    // 圆心位置
                    center: ['50%', '50%'],
                    // 半径
                    radius: '84%',
                    // startAngle: 180,
                    // endAngle: -179.99,
                    startAngle: 90,
                    endAngle: -179.99,
                    // 指针方向
                    clockWise: true,
                    title: false,
                    // 表盘外框
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: [
                                [0.25, '#9D322D'],
                                [0.5, '#9D322D'],
                                [0.75, '#9D322D'],
                                [1, '#9D322D']
                            ],
                            width: 1.5
                        }
                    },
                    // 表盘细分数
                    axisTick: {
                        show: true,
                        splitNumber: 5,
                        length: 6,
                        lineStyle: {
                            color: '#9D322D',
                            width: 1,
                            type: 'solid'
                        }
                    },
                    // 分割线
                    splitLine: {
                        show: true,
                        length: 10,
                        lineStyle: {
                            color: '#9D322D',
                            width: 2,
                            type: 'solid'
                        }
                    },
                    // 分割线标识
                    axisLabel: {
                        show: true,
                        distance: 5,
                        formatter: function (v) {
                            switch (v + '') {
                                case '-180':
                                    return ''
                                default:
                                    return v
                            }
                        }
                    },

                    // 指针设置
                    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
                    },
                    detail: {
                        show: false
                    },
                    data: [
                        {
                            value: 0,
                            name: ptName.value == 'star' ? 'A相' : 'AB相', //'A相',
                            itemStyle: {
                                color: '#DAA520'
                            }
                        },
                        {
                            value: 0,
                            name: ptName.value == 'star' ? 'B相' : 'BC相', //'B相',
                            itemStyle: {
                                color: '#2E8B57'
                            }
                        },
                        {
                            value: 0,
                            name: ptName.value == 'star' ? 'C相' : 'CA相', //'C相',
                            itemStyle: {
                                color: '#A52a2a'
                            }
                        }
                    ]
                }
            ]
        }
    }
    //电流相角
    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 = Math.floor(webMsgSend.value[0]?.i1AngA * 100) / 100 || 0
    echartsData1.value.options.series[0].data[1].value = Math.floor(webMsgSend.value[0]?.i1AngB * 100) / 100 || 0
    echartsData1.value.options.series[0].data[2].value = Math.floor(webMsgSend.value[0]?.i1AngC * 100) / 100 || 0
    // 电压相角
    echartsData1.value.options.series[1].data[0].value = Math.floor(webMsgSend.value[0]?.v1AngA * 100) / 100 || 0
    echartsData1.value.options.series[1].data[1].value = Math.floor(webMsgSend.value[0]?.v1AngB * 100) / 100 || 0
    echartsData1.value.options.series[1].data[2].value = Math.floor(webMsgSend.value[0]?.v1AngC * 100) / 100 || 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%']
    }
}
const initEcharts = (color: string, key: number, name: string) => {
    return {
        options: {
            tooltip: {},
            toolbox: {
                show: false
            },
            series: [
                {
                    type: 'gauge',
                    startAngle: key == 0 ? 180 : 90,
                    endAngle: key == 0 ? 90 : 0,
                    min: 0,
                    max: key == 0 ? 12 : 200,
                    radius: '180%',
                    center: key == 0 ? ['70%', '95%'] : ['30%', '95%'],
                    splitNumber: 2, //刻度数量
                    axisLine: {
                        show: true,
                        lineStyle: {
                            width: 5,
                            color: [
                                [0.3, color],
                                [0.7, color],
                                [1, color]
                            ]
                        }
                    },
                    color: color,
                    // 表盘细分数
                    axisTick: {
                        show: true,
                        distance: -5,
                        length: 12,
                        lineStyle: {
                            color: color,
                            width: 2,
                            type: 'solid'
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: color,
                            fontSize: '12'
                        }
                    },
                    splitLine: {
                        show: true,
                        distance: -5,
                        length: 20,
                        lineStyle: {
                            color: color,
                            width: 3,
                            type: 'solid'
                        }
                    },
                    //标题位置
                    title: {
                        fontWeight: 'bolder',
                        fontSize: 12,
                        offsetCenter: key == 0 ? ['-130%', '-20%'] : ['130%', '-20%']
                    },
                    //数值位置
                    detail: {
                        fontSize: 14,
                        valueAnimation: true,
                        formatter: '{value}',
                        offsetCenter: key == 0 ? ['30%', '-35%'] : ['-35%', '-35%'],
                        color: color
                    },

                    // 指针设置
                    pointer: {
                        length: '80%',
                        width: 3
                    },
                    data: [
                        {
                            value: 0,
                            name: name,
                            itemStyle: {
                                color: color
                            }
                        }
                    ]
                }
            ]
        }
    }
}
//渲染echarts
const init = () => {
    if (!dataSocket.socketServe) {
        console.error('WebSocket 客户端实例不存在')
        return
    }
    echartsDataV1.value = initEcharts('#DAA520', 0, 'A相')
    echartsDataV2.value = initEcharts('#2E8B57', 0, 'B相')
    echartsDataV3.value = initEcharts('#A52a2a', 0, 'C相')

    echartsDataA1.value = initEcharts('#DAA520', 1, 'A相')
    echartsDataA2.value = initEcharts('#2E8B57', 1, 'B相')
    echartsDataA3.value = initEcharts('#A52a2a', 1, 'C相')
    if (monitoringPoint.state.comFlag == 0) {
        loading.value = false
        return ElMessage({
            message: '所选监测点离线!',
            type: 'warning'
        })
    }
    loading.value = true
    const url = localStorage.getItem('WebSocketUrl') || 'null' //'ws://192.168.1.68:10407/api/pushMessage/'


    let pids = monitoringPoint.state.pid.split(',')
    dataSocket.socketServe.connect(`${url}${adminInfo.id},${monitoringPoint.state.lineId},${pids[pids.length - 2]}`)
    dataSocket.socketServe.registerCallBack('message', (res: any) => {
        if (res.Flag === false) {
            return (loading.value = false)
        }
        txtContent.value = res.value
        let data = JSON.parse(res.value)
        time.value = data.TIME - 0
        webMsgSend.value = [
            {
                vRmsA: ptName.value == 'star' ? data.V.A.VRMS : data.V.A.VRMS_LVR, //A相电压
                vRmsB: ptName.value == 'star' ? data.V.B.VRMS : data.V.B.VRMS_LVR, //B相电压
                vRmsC: ptName.value == 'star' ? data.V.C.VRMS : data.V.C.VRMS_LVR, //C相电压
                iRmsA: data.I.A?.IRMS, //A相电流
                iRmsB: data.I.B?.IRMS, //B相电流
                iRmsC: data.I.C?.IRMS, //C相电流
                v1AngA: steAngle(data.V.A?.VFUND_ANGLE), //A相基波电压相位
                v1AngB: steAngle(data.V.B?.VFUND_ANGLE), //B相基波电压相位
                v1AngC: steAngle(data.V.C?.VFUND_ANGLE), //C相基波电压相位
                i1AngA: steAngle(data.I.A?.I_ANGLE), //A相基波电流相位
                i1AngB: steAngle(data.I.B?.I_ANGLE), //B相基波电流相位
                i1AngC: steAngle(data.I.C?.I_ANGLE), //C相基波电流相位
                freq: data.V.T?.FREQ, //频率
                freqDev: data.V.T?.DELTA_FREQ, //频率偏差
                vUnbalance: data.V.T?.V_UNBAN, //电压不平衡度
                iUnbalance: data.I.T?.I_UNBAN, //电流不平衡度
                v1A: data.V.A?.V1, //A相基波电压幅值
                v1B: data.V.B?.V1, //A相基波电压幅值
                v1C: data.V.C?.V1, //A相基波电压幅值
                i1A: data.I.A?.I1, //A相基波电流相位
                i1B: data.I.B?.I1, //A相基波电流相位
                i1C: data.I.C?.I1, //A相基波电流相位
                vDevA: data.V.A?.DELTA_V, //A相电压偏差
                vDevB: data.V.B?.DELTA_V, //B相电压偏差
                vDevC: data.V.C?.DELTA_V, //C相电压偏差
                vThdA: data.V.A?.VTHD, //A相电压总谐波畸变率
                vThdB: data.V.B?.VTHD, //B相电压总谐波畸变率
                vThdC: data.V.C?.VTHD, //C相电压总谐波畸变率
                iThdA: data.I.A?.ITHD, //A相电流总谐波畸变率
                iThdB: data.I.B?.ITHD, //B相电流总谐波畸变率
                iThdC: data.I.C?.ITHD, //C相电流总谐波畸变率
                pA: data.PQ.A?.P, //A相有功功率
                pB: data.PQ.B?.P, //B相有功功率
                pC: data.PQ.C?.P, //C相有功功率
                pTot: data.PQ.T?.P, //总有功功率
                qA: data.PQ.A?.Q, //A相无功功率
                qB: data.PQ.B?.Q, //B相无功功率
                qC: data.PQ.C?.Q, //C相无功功率
                qTot: data.PQ.T?.Q, //总无功功率
                sA: data.PQ.A?.S, //A相视在功率
                sB: data.PQ.B?.S, //B相视在功率
                sC: data.PQ.C?.S, //C相视在功率
                sTot: data.PQ.T?.S, //总视在功率
                pfA: data.PQ.A?.PF, //A相功率因数
                pfB: data.PQ.B?.PF, //B相功率因数
                pfC: data.PQ.C?.PF, //C相功率因数
                pfTot: data.PQ.T?.PF, //总功率因数
                dpfA: data.PQ.A?.DF, //A相基波功率因数
                dpfB: data.PQ.B?.DF, //B相基波功率因数
                dpfC: data.PQ.C?.DF, //C相基波功率因数
                dpfTot: data.PQ.T?.DF //总基波功率因数
            }
        ]
        spectrumRef.value?.init(data)
        trendRef.value?.init(data)
        loading.value = false
        // console.log('🚀 ~ dataSocket.socketServe.registerCallBack ~ webMsgSend.value:', data)
        setRealData()
    })
}
// 下载txt
const downloadTxt = () => {
    const content = txtContent.value // 文件内容
    const blob = new Blob([content], { type: 'text/plain' }) // 创建 Blob 对象
    const url = URL.createObjectURL(blob) // 生成下载链接

    // 创建 <a> 标签并触发下载
    const link = document.createElement('a')
    link.href = url
    link.download = '实时数据.txt' // 文件名
    link.click()

    // 释放 URL 对象
    URL.revokeObjectURL(url)
}
//接收父组件传递的table数据

const loading = ref(false)

const formatter = (row: any) => {
    return row.cellValue == undefined ? '/' : Math.floor(row.cellValue * 100) / 100
}
//电流相角数组&电压相角数组
const iRadioList: any = ref([])
const vRadioList: any = ref([])

const setRealData = () => {
    initRadioCharts()
    //新的
    // echartsDataV1.value.options.series[0].max =
    //     webMsgSend.value[0].vRmsA == 0 ? 1 : Math.ceil(webMsgSend.value[0].vRmsA)
    // echartsDataV2.value.options.series[0].max =
    //     webMsgSend.value[0].vRmsB == 0 ? 1 : Math.ceil(webMsgSend.value[0].vRmsB)
    // echartsDataV3.value.options.series[0].max =
    //     webMsgSend.value[0].vRmsC == 0 ? 1 : Math.ceil(webMsgSend.value[0].vRmsC)
    let vMax =
        Math.ceil(
            (Math.max(
                ...[
                    Math.floor(webMsgSend.value[0].vRmsA * 100) / 100 || 10,
                    Math.floor(webMsgSend.value[0].vRmsB * 100) / 100 || 10,
                    Math.floor(webMsgSend.value[0].vRmsC * 100) / 100 || 10
                ]
            ) *
                1.2) /
                10
        ) * 10

    echartsDataV1.value.options.series[0].max = vMax
    echartsDataV2.value.options.series[0].max = vMax
    echartsDataV3.value.options.series[0].max = vMax
    echartsDataV1.value.options.series[0].data = [
        {
            name: ptName.value == 'star' ? 'A相' : 'AB相', //A相
            value: Math.floor(webMsgSend.value[0].vRmsA * 100) / 100 || 0
        }
    ]
    pieChart1.value.initChart()
    echartsDataV2.value.options.series[0].data = [
        {
            name: ptName.value == 'star' ? 'B相' : 'BC相', // 'B相',
            value: Math.floor(webMsgSend.value[0].vRmsB * 100) / 100 || 0
        }
    ]
    pieChart2.value.initChart()
    echartsDataV3.value.options.series[0].data = [
        {
            name: ptName.value == 'star' ? 'C相' : 'CA相', //'C相',
            value: Math.floor(webMsgSend.value[0].vRmsC * 100) / 100 || 0
        }
    ]
    pieChart3.value.initChart()
    //新的电流有效值
    // echartsDataA1.value.options.series[0].max =
    //     webMsgSend.value[0].iRmsA == 0 ? 1 : Math.ceil(webMsgSend.value[0].iRmsA)
    // echartsDataA2.value.options.series[0].max =
    //     webMsgSend.value[0].iRmsB == 0 ? 1 : Math.ceil(webMsgSend.value[0].iRmsB)
    // echartsDataA3.value.options.series[0].max =
    //     webMsgSend.value[0].iRmsC == 0 ? 1 : Math.ceil(webMsgSend.value[0].iRmsC)

    let aMax =
        Math.ceil(
            (Math.max(
                ...[
                    Math.floor(webMsgSend.value[0].iRmsA * 100) / 100 || 10,
                    Math.floor(webMsgSend.value[0].iRmsB * 100) / 100 || 10,
                    Math.floor(webMsgSend.value[0].iRmsC * 100) / 100 || 10
                ]
            ) *
                1.2) /
                10
        ) * 10
    echartsDataA1.value.options.series[0].max = aMax
    echartsDataA2.value.options.series[0].max = aMax
    echartsDataA3.value.options.series[0].max = aMax
    echartsDataA1.value.options.series[0].data = [
        {
            name: 'A相',
            value: Math.floor(webMsgSend.value[0].iRmsA * 100) / 100 || 0
        }
    ]
    pieChart4.value.initChart()
    echartsDataA2.value.options.series[0].data = [
        {
            name: 'B相',
            value: Math.floor(webMsgSend.value[0].iRmsB * 100) / 100 || 0
        }
    ]
    pieChart5.value.initChart()
    echartsDataA3.value.options.series[0].data = [
        {
            name: 'C相',
            value: Math.floor(webMsgSend.value[0].iRmsC * 100) / 100 || 0
        }
    ]
    pieChart6.value.initChart()
}
const steAngle = (phase: any) => {
    // 空值判断
    if (phase === null || phase === undefined) {
        return null
    }
    let normalizedPhase = phase % 360
    if (normalizedPhase > 180) {
        normalizedPhase -= 360
    } else if (normalizedPhase < -180) {
        normalizedPhase += 360
    }

    return normalizedPhase
}
defineExpose({ setRealData })
onMounted(() => {
    init()

    initRadioCharts()
    getLineDetail({ id: monitoringPoint.state.lineId }).then(res => {
        ptName.value = connection.filter(item => item.value == res.data.ptType)[0].code || ''
    })
})
onBeforeUnmount(() => {
    dataSocket.socketServe?.closeWs()
})
</script>
<style lang="scss" scoped>
.view {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    position: relative;
    .view_title {
        position: absolute;
        left: 50%;
        top: 15px;
        transform: translateX(-50%);
    }
    .view_btn {
        position: absolute;
        right: 50px;
        top: 10px;
    }
    .view_top {
        width: 100%;
        height: 400px !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: 115px;
                // 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: 370px;
                position: relative;
                // top: 20%;
                // bottom: 10px;
                .mid_charts_text {
                    position: absolute;
                    bottom: 10px;
                    right: 10px;
                    font-size: 12px;
                    font-weight: 600;
                    line-height: 16px;
                    span {
                        font-size: 14px;
                        font-weight: 600;
                    }
                }
            }
        }

        .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;
        margin: 10px 0 0 0;
        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(.vxe-cell) {
  

        min-height: 32px !important;
}

::v-deep .el-collapse-item__header {
    font-size: 16px !important;
    font-weight: 800 !important;
}
::v-deep .el-collapse-item__content {
    padding-bottom: 10px;
}
</style>
