<template>
    <div class="view">
        <div class="view_top">
            <!-- 左侧仪表盘 -->
            <div class="view_top_left">
                <div class="left_charts"><MyEchart ref="pieChartRef" :options="echartsData"></MyEchart></div>
                <div class="left_charts"><MyEchart ref="pieChartRef" :options="echartsData"></MyEchart></div>
                <div class="left_charts"><MyEchart ref="pieChartRef" :options="echartsData"></MyEchart></div>
            </div>
            <div class="view_top_mid">
                <div class="mid_charts"><MyEchart ref="pieChartRef" :options="echartsData1"></MyEchart></div>
            </div>
            <!-- 右侧仪表盘 -->
            <div class="view_top_right">
                <div class="right_charts"><MyEchart ref="pieChartRef" :options="echartsData"></MyEchart></div>
                <div class="right_charts"><MyEchart ref="pieChartRef" :options="echartsData"></MyEchart></div>
                <div class="right_charts"><MyEchart ref="pieChartRef" :options="echartsData"></MyEchart></div>
            </div>
        </div>
        <div class="view_bot">
            <div class="view_bot_tables">
                <tableInfo ref="tableInfoRef1" />
            </div>
            <div class="view_bot_tables">
                <tableInfo ref="tableInfoRef2" />
            </div>
            <div class="view_bot_tables">
                <tableInfo ref="tableInfoRef3" />
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import MyEchart from '@/components/echarts/MyEchart.vue'
import tableInfo from './components/tableInfo.vue'
import * as echarts from 'echarts'
import { split } from 'lodash-es'
const pieChartRef: any = ref()
const echartsData: any = ref({})
const echartsData1: any = ref({})
//渲染echarts
const init = () => {
    echartsData.value = {
        options: {
            tooltip: {},
            series: [
                {
                    type: 'gauge',
                    startAngle: 180,
                    endAngle: 0,
                    min: 0,
                    max: 300,
                    radius: '150%',
                    center: ['55%', '76%'],
                    splitNumber: 3, //刻度数量
                    axisLine: {
                        show: true,
                        lineStyle: {
                            width: 10,
                            shadowBlur: 0,
                            color: [
                                [0.3, '#91c7a1'],
                                [0.7, '#63869e'],
                                [1, '#002B6A']
                            ]
                        }
                    },

                    itemStyle: {
                        normal: {
                            shadowBlur: 10
                        }
                    },
                    //标题位置
                    title: {
                        fontWeight: 'bolder',
                        fontSize: 12,
                        offsetCenter: ['-130%', '-20%']
                    },
                    //数值位置
                    detail: {
                        fontSize: 12,
                        formatter: '{value}',
                        offsetCenter: ['0%', '25%']
                    },
                    data: [
                        {
                            value: 15,
                            name: '违规率'
                        }
                    ]
                }
            ]
        }
    }
    //中间指针图
    echartsData1.value = {
        // options: {
        //     // backgroundColor: '#001533',
        //     tooltip: {
        //         format: function (params) {
        //             console.log(params)
        //         }
        //     },
        //     series: [
        //         //外圈
        //         {
        //             radius: '100%',
        //             min: -150,
        //             max: 180,
        //             startAngle: -90,
        //             endAngle: 270,
        //             pointer: {
        //                 show: true,
        //                 length: '80%',
        //                 radius: '20%',
        //                 width: 6 //指针粗细
        //             },
        //             itemStyle: {
        //                 normal: {
        //                     color: 'rgb(0,191,255)'
        //                 }
        //             },
        //             // axisLine: {
        //             //     show: true,
        //             //     fontSize: 20,
        //             //     lineStyle: {
        //             //         width: 0,
        //             //         color: [[1, '#01b4e0']]
        //             //     }
        //             // },

        //             axisLine: {
        //                 show: true,
        //                 // 坐标轴线
        //                 lineStyle: {
        //                     color: [[1, '#F42E47']], // 属性lineStyle控制线条样式
        //                     width: 2
        //                 },
        //                 interval: 0
        //             },
        //             splitLine: {
        //                 length: 10,
        //                 lineStyle: {
        //                     width: 2,
        //                     color: '#01b4e0',
        //                     distance: 5
        //                 }, //刻度节点线
        //                 splitNumber: 5
        //             },
        //             splitNumber: 11,
        //             axisTick: {
        //                 show: false
        //             },
        //             axisLabel: {
        //                 show: true,
        //                 fontSize: 14,
        //                 color: '#000',
        //                 formatter: function (v: any) {
        //                     console.log(v, '00000000000')
        //                     switch (v + '') {
        //                         case '-122.5':
        //                             return '-120'
        //                         case '-95':
        //                             return '-90'
        //                         case '-60':
        //                             return '-60'
        //                         case '-67.5':
        //                             return '-60'
        //                         case '-40':
        //                             return '-30'
        //                         case '-12.5':
        //                             return '0'
        //                         case '42.5':
        //                             return '30'
        //                         case '70':
        //                             return '60'
        //                         case '97.5':
        //                             return '90'
        //                         case '125':
        //                             return '120'
        //                         case '152.5':
        //                             return '150'
        //                         case '-180':
        //                             return ''
        //                         case '180':
        //                             return '180'
        //                         default:
        //                             return v
        //                     }
        //                 }
        //             },
        //             detail: {
        //                 show: false,
        //                 textStyle: {
        //                     fontSize: 30,
        //                     fontWeight: '700',
        //                     color: '#67d9fe'
        //                 }
        //             },
        //             data: [
        //                 {
        //                     name: '',
        //                     value: 150,
        //                     itemStyle: {
        //                         color: 'red'
        //                     }
        //                 },
        //                 {
        //                     name: '',
        //                     value: 60,
        //                     itemStyle: {
        //                         color: '#DAA521'
        //                     }
        //                 },
        //                 {
        //                     name: '',
        //                     value: 90,
        //                     itemStyle: {
        //                         color: 'green'
        //                     }
        //                 }
        //             ]
        //         },
        //         //内圈
        //         {
        //             radius: '50%',
        //             splitNumber: 11,
        //             startAngle: 0,
        //             endAngle: 360,
        //             min: -150,
        //             max: 180,
        //             axisLine: {
        //                 show: true,
        //                 // 坐标轴线
        //                 lineStyle: {
        //                     color: [[1, '#1C9EE9']], // 属性lineStyle控制线条样式
        //                     width: 2,
        //                     type: 'dashed'
        //                 }
        //             },
        //             pointer: {
        //                 show: true,
        //                 length: '80%',
        //                 radius: '20%',
        //                 width: 8 //指针粗细
        //             },
        //             itemStyle: {
        //                 // show: false,
        //                 normal: {
        //                     color: 'rgb(0,191,255)'
        //                 }
        //             },
        //             splitLine: {
        //                 length: 5,
        //                 interval: 30,
        //                 lineStyle: {
        //                     width: 2,
        //                     color: 'green',
        //                     distance: -20
        //                 } //刻度节点线
        //             },
        //             axisTick: {
        //                 show: false
        //             },
        //             axisLabel: {
        //                 show: true,
        //                 itemStyle: {
        //                     interval: 0
        //                 },
        //                 formatter: function (v: any) {
        //                     console.log(v, '00000000000')
        //                     switch (v + '') {
        //                         case '-122.5':
        //                             return '-120'
        //                         case '-95':
        //                             return '-90'
        //                         case '-60':
        //                             return '-60'
        //                         case '-67.5':
        //                             return '-60'
        //                         case '-40':
        //                             return '-30'
        //                         case '-12.5':
        //                             return '0'
        //                         case '42.5':
        //                             return '30'
        //                         case '70':
        //                             return '60'
        //                         case '97.5':
        //                             return '90'
        //                         case '125':
        //                             return '120'
        //                         case '152.5':
        //                             return '150'
        //                         case '-180':
        //                             return ''
        //                         case '180':
        //                             return '180'
        //                         default:
        //                             return v
        //                     }
        //                 }
        //             },
        //             detail: {
        //                 show: false
        //             },
        //             data: [
        //                 {
        //                     name: '',
        //                     value: 110,
        //                     itemStyle: {
        //                         color: 'red'
        //                     }
        //                 },
        //                 {
        //                     name: '',
        //                     value: 70,
        //                     itemStyle: {
        //                         color: '#DAA521'
        //                     }
        //                 },
        //                 {
        //                     name: '',
        //                     value: 20,
        //                     itemStyle: {
        //                         color: 'green'
        //                     }
        //                 }
        //             ]
        //         }
        //     ]
        // }
        options: {
            grid: {
                top: 230
            },
            title: {
                text: '',
                x: 'center'
            },
            tooltip: {
                formatter: '{a} <br/>{c} {b}'
            },
            legend: [],
            series: [
                // {
                //     name: 'atitle +电压有效值',
                //     type: 'gauge',
                //     center: ['50%', '30%'], // 默认全局居中
                //     radius: '50%',
                //     min: 0,
                //     max: 180,
                //     startAngle: 180,
                //     endAngle: 90,
                //     splitNumber: 2,
                //     axisLine: {
                //         // 坐标轴线
                //         lineStyle: {
                //             // 属性lineStyle控制线条样式
                //             color: [
                //                 [0.25, '#DAA520'],
                //                 [0.5, '#DAA520'],
                //                 [0.75, '#DAA520'],
                //                 [1, '#DAA520']
                //             ],
                //             width: 5
                //         }
                //     },
                //     axisTick: {
                //         // 坐标轴小标记
                //         length: 12, // 属性length控制线长
                //         lineStyle: {
                //             // 属性lineStyle控制线条样式
                //             color: 'auto'
                //         }
                //     },
                //     splitLine: {
                //         // 分隔线
                //         length: 20, // 属性length控制线长
                //         lineStyle: {
                //             // 属性lineStyle（详见lineStyle）控制线条样式
                //             color: 'auto'
                //         }
                //     },
                //     pointer: {
                //         width: 5
                //     },
                //     title: {
                //         offsetCenter: ['-125%', '-55%'] // x, y，单位px
                //     },
                //     detail: {
                //         // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                //         fontWeight: 'bolder',
                //         offsetCenter: ['40%', '-35%'],
                //         fontSize: '35px'
                //     },
                //     data: [
                //         {
                //             // value: [0],
                //             // name:' atitle + (kV)'
                //         }
                //     ]
                // },
                // {
                //     name: ' btitle + 电压有效值',
                //     type: 'gauge',
                //     center: ['20%', '60%'], // 默认全局居中
                //     radius: '50%',
                //     min: 0,
                //     max: 180,
                //     startAngle: 180,
                //     endAngle: 90,
                //     splitNumber: 2,
                //     axisLine: {
                //         // 坐标轴线
                //         lineStyle: {
                //             // 属性lineStyle控制线条样式
                //             color: [
                //                 [0.25, '#2E8B57'],
                //                 [0.5, '#2E8B57'],
                //                 [0.75, '#2E8B57'],
                //                 [1, '#2E8B57']
                //             ],
                //             width: 5
                //         }
                //     },
                //     axisTick: {
                //         // 坐标轴小标记
                //         length: 12, // 属性length控制线长
                //         lineStyle: {
                //             // 属性lineStyle控制线条样式
                //             color: 'auto'
                //         }
                //     },
                //     splitLine: {
                //         // 分隔线
                //         length: 20, // 属性length控制线长
                //         lineStyle: {
                //             // 属性lineStyle（详见lineStyle）控制线条样式
                //             color: 'auto'
                //         }
                //     },
                //     pointer: {
                //         width: 5
                //     },
                //     title: {
                //         offsetCenter: ['-125%', '-55%'] // x, y，单位px
                //     },
                //     detail: {
                //         // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                //         fontWeight: 'bolder',
                //         offsetCenter: ['40%', '-35%'],
                //         fontSize: '35px'
                //     },
                //     data: [
                //         {
                //             // value: [0],
                //             // name: ' btitle +(kV)'
                //         }
                //     ]
                // },
                // {
                //     name: 'ctitle + 电压有效值',
                //     type: 'gauge',
                //     center: ['20%', '90%'], // 默认全局居中
                //     radius: '50%',
                //     min: 0,
                //     max: 180,
                //     startAngle: 180,
                //     endAngle: 90,
                //     splitNumber: 2,
                //     axisLine: {
                //         // 坐标轴线
                //         lineStyle: {
                //             // 属性lineStyle控制线条样式
                //             color: [
                //                 [0.25, '#A52a2a'],
                //                 [0.5, '#A52a2a'],
                //                 [0.75, '#A52a2a'],
                //                 [1, '#A52a2a']
                //             ],
                //             width: 5
                //         }
                //     },
                //     axisTick: {
                //         // 坐标轴小标记
                //         length: 12, // 属性length控制线长
                //         lineStyle: {
                //             // 属性lineStyle控制线条样式
                //             color: 'auto'
                //         }
                //     },
                //     splitLine: {
                //         // 分隔线
                //         length: 20, // 属性length控制线长
                //         lineStyle: {
                //             // 属性lineStyle（详见lineStyle）控制线条样式
                //             color: 'auto'
                //         }
                //     },
                //     pointer: {
                //         width: 5
                //     },
                //     title: {
                //         offsetCenter: ['-125%', '-55%'] // x, y，单位px
                //     },
                //     detail: {
                //         // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                //         fontWeight: 'bolder',
                //         offsetCenter: ['40%', '-35%'],
                //         fontSize: '35px'
                //     },
                //     data: [
                //         {
                //             // value: [0],
                //             // name: 'ctitle + (kV)'
                //         }
                //     ]
                // },
                // {
                //     name: 'A相电流有效值',
                //     type: 'gauge',
                //     center: ['80%', '30%'], // 默认全局居中
                //     radius: '50%',
                //     min: 0,
                //     max: 180,
                //     startAngle: 90,
                //     endAngle: 0,
                //     splitNumber: 2,
                //     axisLine: {
                //         // 坐标轴线
                //         lineStyle: {
                //             // 属性lineStyle控制线条样式
                //             color: [
                //                 [0.25, '#DAA520'],
                //                 [0.5, '#DAA520'],
                //                 [0.75, '#DAA520'],
                //                 [1, '#DAA520']
                //             ],
                //             width: 5
                //         }
                //     },
                //     axisTick: {
                //         // 坐标轴小标记
                //         length: 12, // 属性length控制线长
                //         lineStyle: {
                //             // 属性lineStyle控制线条样式
                //             color: 'auto'
                //         }
                //     },
                //     splitLine: {
                //         // 分隔线
                //         length: 20, // 属性length控制线长
                //         lineStyle: {
                //             // 属性lineStyle（详见lineStyle）控制线条样式
                //             color: 'auto'
                //         }
                //     },
                //     pointer: {
                //         width: 5
                //     },
                //     title: {
                //         offsetCenter: ['125%', '-55%'] // x, y，单位px
                //     },
                //     detail: {
                //         // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                //         fontWeight: 'bolder',
                //         offsetCenter: ['-45%', '-35%'],
                //         fontSize: '35px'
                //     },
                //     data: [
                //         {
                //             // value: [0],
                //             // name: 'A相(A)'
                //         }
                //     ]
                // },
                // {
                //     name: 'B相电流有效值',
                //     type: 'gauge',
                //     center: ['80%', '60%'], // 默认全局居中
                //     radius: '50%',
                //     min: 0,
                //     max: 180,
                //     startAngle: 90,
                //     endAngle: 0,
                //     splitNumber: 2,
                //     axisLine: {
                //         // 坐标轴线
                //         lineStyle: {
                //             // 属性lineStyle控制线条样式
                //             color: [
                //                 [0.25, '#2E8B57'],
                //                 [0.5, '#2E8B57'],
                //                 [0.75, '#2E8B57'],
                //                 [1, '#2E8B57']
                //             ],
                //             width: 5
                //         }
                //     },
                //     axisTick: {
                //         // 坐标轴小标记
                //         length: 12, // 属性length控制线长
                //         lineStyle: {
                //             // 属性lineStyle控制线条样式
                //             color: 'auto'
                //         }
                //     },
                //     splitLine: {
                //         // 分隔线
                //         length: 20, // 属性length控制线长
                //         lineStyle: {
                //             // 属性lineStyle（详见lineStyle）控制线条样式
                //             color: 'auto'
                //         }
                //     },
                //     pointer: {
                //         width: 5
                //     },
                //     title: {
                //         offsetCenter: ['125%', '-55%'] // x, y，单位px
                //     },
                //     detail: {
                //         // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                //         fontWeight: 'bolder',
                //         offsetCenter: ['-45%', '-35%'],
                //         fontSize: '35px'
                //     },
                //     data: [
                //         {
                //             // value: [0],
                //             // name: 'B相(A)'
                //         }
                //     ]
                // },
                // {
                //     name: 'C相电流有效值',
                //     type: 'gauge',
                //     center: ['80%', '90%'], // 默认全局居中
                //     radius: '50%',
                //     min: 0,
                //     max: 180,
                //     startAngle: 90,
                //     endAngle: 0,
                //     splitNumber: 2,
                //     axisLine: {
                //         // 坐标轴线
                //         lineStyle: {
                //             // 属性lineStyle控制线条样式
                //             color: [
                //                 [0.25, '#A52a2a'],
                //                 [0.5, '#A52a2a'],
                //                 [0.75, '#A52a2a'],
                //                 [1, '#A52a2a']
                //             ],
                //             width: 5
                //         }
                //     },
                //     axisTick: {
                //         // 坐标轴小标记
                //         length: 12, // 属性length控制线长
                //         lineStyle: {
                //             // 属性lineStyle控制线条样式
                //             color: 'auto'
                //         }
                //     },
                //     splitLine: {
                //         // 分隔线
                //         length: 20, // 属性length控制线长
                //         lineStyle: {
                //             // 属性lineStyle（详见lineStyle）控制线条样式
                //             color: 'auto'
                //         }
                //     },
                //     pointer: {
                //         width: 5
                //     },
                //     title: {
                //         offsetCenter: ['125%', '-55%'] // x, y，单位px
                //     },
                //     detail: {
                //         // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                //         fontWeight: 'bolder',
                //         offsetCenter: ['-45%', '-35%'],
                //         fontSize: '35px'
                //     },
                //     data: [
                //         {
                //             // value: [0],
                //             // name: 'C相(A)'
                //         }
                //     ]
                // },
                // {
                //     name: '基波电流相位',
                //     type: 'gauge',
                //     // 表盘最小值
                //     min: 180,
                //     // 表盘最大值
                //     max: -180,
                //     // 表盘分割数
                //     splitNumber: 12,
                //     // 圆心位置
                //     center: ['50%', '50%'],
                //     // 半径
                //     radius: '50%',
                //     startAngle: 180,
                //     endAngle: -179.99,
                //     // 指针方向
                //     clockWise: true,
                //     title: false,
                //     // 表盘外框
                //     axisLine: {
                //         show: true,
                //         lineStyle: {
                //             color: [
                //                 [0.25, '#2E8B57'],
                //                 [0.5, '#2E8B57'],
                //                 [0.75, '#2E8B57'],
                //                 [1, '#2E8B57']
                //             ],
                //             width: 2
                //         }
                //     },
                //     // 表盘细分数
                //     axisTick: {
                //         show: true,
                //         splitNumber: 5,
                //         length: 6,
                //         lineStyle: {
                //             color: '#eee',
                //             width: 1,
                //             type: 'solid'
                //         }
                //     },
                //     // 分割线
                //     splitLine: {
                //         show: true,
                //         length: 10,
                //         lineStyle: {
                //             color: '#eee',
                //             width: 2,
                //             type: 'solid'
                //         }
                //     },
                //     // 分割线标识
                //     axisLabel: {
                //         show: false
                //     },

                //     // 指针设置
                //     pointer: {
                //         length: '45%',
                //         width: 2
                //     },
                //     detail: {
                //         show: false
                //     },
                //     data: [
                //         {
                //             value: 0,
                //             name: 'B相'
                //         }
                //     ]
                // },
                // {
                //     name: '基波电流相位',
                //     type: 'gauge',
                //     // 表盘最小值
                //     min: 180,
                //     // 表盘最大值
                //     max: -180,
                //     // 表盘分割数
                //     splitNumber: 12,
                //     // 圆心位置
                //     center: ['50%', '50%'],
                //     // 半径
                //     radius: '50%',
                //     startAngle: 180,
                //     endAngle: -179.99,
                //     // 指针方向
                //     clockWise: true,
                //     title: false,
                //     // 表盘外框
                //     axisLine: {
                //         show: true,
                //         lineStyle: {
                //             color: [
                //                 [0.25, '#A52a2a'],
                //                 [0.5, '#A52a2a'],
                //                 [0.75, '#A52a2a'],
                //                 [1, '#A52a2a']
                //             ],
                //             width: 2
                //         }
                //     },
                //     // 表盘细分数
                //     axisTick: {
                //         show: true,
                //         splitNumber: 5,
                //         length: 6,
                //         lineStyle: {
                //             color: '#eee',
                //             width: 1,
                //             type: 'solid'
                //         }
                //     },
                //     // 分割线
                //     splitLine: {
                //         show: true,
                //         length: 10,
                //         lineStyle: {
                //             color: '#eee',
                //             width: 2,
                //             type: 'solid'
                //         }
                //     },
                //     // 分割线标识
                //     axisLabel: {
                //         show: false
                //     },

                //     // 指针设置
                //     pointer: {
                //         length: '45%',
                //         width: 2
                //     },
                //     detail: {
                //         show: false
                //     },
                //     data: [
                //         {
                //             value: 0,
                //             name: 'C相'
                //         }
                //     ]
                // },
                // {
                //     name: '基波电压相位',
                //     type: 'gauge',
                //     // 表盘最小值
                //     min: 180,
                //     // 表盘最大值
                //     max: -180,
                //     // 表盘分割数
                //     splitNumber: 12,
                //     // 圆心位置
                //     center: ['50%', '50%'],
                //     // 半径
                //     radius: '85%',
                //     startAngle: 180,
                //     endAngle: -179.99,
                //     // 指针方向
                //     clockWise: true,
                //     title: false,
                //     // 表盘外框
                //     axisLine: {
                //         show: true,
                //         lineStyle: {
                //             color: [
                //                 [0.25, '#2E8B57'],
                //                 [0.5, '#2E8B57'],
                //                 [0.75, '#2E8B57'],
                //                 [1, '#2E8B57']
                //             ],
                //             width: 1.5
                //         }
                //     },
                //     // 表盘细分数
                //     axisTick: {
                //         show: true,
                //         splitNumber: 5,
                //         length: 6,
                //         lineStyle: {
                //             color: '#eee',
                //             width: 1,
                //             type: 'solid'
                //         }
                //     },
                //     // 分割线
                //     splitLine: {
                //         show: true,
                //         length: 10,
                //         lineStyle: {
                //             color: '#eee',
                //             width: 2,
                //             type: 'solid'
                //         }
                //     },
                //     // 分割线标识
                //     axisLabel: {
                //         show: false
                //     },

                //     // 指针设置
                //     pointer: {
                //         length: '75%',
                //         width: 4
                //     },
                //     detail: {
                //         show: false
                //     },
                //     data: [
                //         {
                //             value: 0,
                //             name: 'B相'
                //         }
                //     ]
                // },
                // {
                //     name: '基波电压相位',
                //     type: 'gauge',
                //     // 表盘最小值
                //     min: 180,
                //     // 表盘最大值
                //     max: -180,
                //     // 表盘分割数
                //     splitNumber: 12,
                //     // 圆心位置
                //     center: ['50%', '50%'],
                //     // 半径
                //     radius: '85%',
                //     startAngle: 180,
                //     endAngle: -179.99,
                //     // 指针方向
                //     clockWise: true,
                //     title: false,
                //     // 表盘外框
                //     axisLine: {
                //         show: true,
                //         lineStyle: {
                //             color: [
                //                 [0.25, '#A52a2a'],
                //                 [0.5, '#A52a2a'],
                //                 [0.75, '#A52a2a'],
                //                 [1, '#A52a2a']
                //             ],
                //             width: 1.5
                //         }
                //     },
                //     // 表盘细分数
                //     axisTick: {
                //         show: true,
                //         splitNumber: 5,
                //         length: 6,
                //         lineStyle: {
                //             color: '#eee',
                //             width: 1,
                //             type: 'solid'
                //         }
                //     },
                //     // 分割线
                //     splitLine: {
                //         show: true,
                //         length: 10,
                //         lineStyle: {
                //             color: '#eee',
                //             width: 2,
                //             type: 'solid'
                //         }
                //     },
                //     // 分割线标识
                //     axisLabel: {
                //         show: false
                //     },

                //     // 指针设置
                //     pointer: {
                //         length: '75%',
                //         width: 4
                //     },
                //     detail: {
                //         show: false
                //     },
                //     data: [
                //         {
                //             value: 0,
                //             name: 'C相'
                //         }
                //     ]
                // }
                {
                    name: '基波电流相位',
                    type: 'gauge',
                    // 表盘最小值
                    min: 180,
                    // 表盘最大值
                    max: -180,
                    // 表盘分割数
                    splitNumber: 12,
                    // 圆心位置
                    center: ['50%', '50%'],
                    // 半径
                    radius: '50%',
                    startAngle: 180,
                    endAngle: -179.99,
                    // 指针方向
                    clockWise: true,
                    title: false,
                    // 表盘外框
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: [
                                [0.25, '#1E9FF4'],
                                [0.5, '#1E9FF4'],
                                [0.75, '#1E9FF4'],
                                [1, '#1E9FF4']
                            ],
                            width: 2
                        }
                    },
                    // 表盘细分数
                    axisTick: {
                        show: true,
                        splitNumber: 5,
                        length: 4,
                        lineStyle: {
                            color: '#1E9FF4',
                            width: 1,
                            type: 'solid'
                        }
                    },
                    // 分割线
                    splitLine: {
                        show: true,
                        length: 10,
                        lineStyle: {
                            color: '#1E9FF4',
                            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
                    },
                    detail: {
                        show: false
                    },
                    data: [
                        {
                            value: 40,
                            name: 'A相',
                            itemStyle: {
                                color: '#A5292A'
                            }
                        },
                        {
                            value: 10,
                            name: 'B相',
                            itemStyle: {
                                color: '#DAA521'
                            }
                        },
                        {
                            value: 20,
                            name: 'C相',
                            itemStyle: {
                                color: '#2F8A57'
                            }
                        }
                    ]
                },
                {
                    name: '基波电压相位',
                    type: 'gauge',
                    // 表盘最小值
                    min: 180,
                    // 表盘最大值
                    max: -180,
                    // 表盘分割数
                    splitNumber: 12,
                    // 圆心位置
                    center: ['50%', '50%'],
                    // 半径
                    radius: '85%',
                    startAngle: 180,
                    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: {
                        length: '90%',
                        width: 6
                    },
                    detail: {
                        show: false
                    },
                    data: [
                        {
                            value: 140,
                            name: 'A相',
                            itemStyle: {
                                color: '#A5292A'
                            }
                        },
                        {
                            value: 110,
                            name: 'B相',
                            itemStyle: {
                                color: '#DAA521'
                            }
                        },
                        {
                            value: 120,
                            name: 'C相',
                            itemStyle: {
                                color: '#2F8A57'
                            }
                        }
                    ]
                }
            ]
        }
    }

    for (var i = 0; i < echartsData1.value.options.series.length; i++) {
        echartsData1.value.options.series[i].type = 'gauge'
        echartsData1.value.options.series[i].startAngle = 90
        echartsData1.value.options.series[i].endAngle = -270
        echartsData1.value.options.series[i].center = ['50%', '50%']
        // option.series[i].axisTick = {show: false};
        // option.series[i].axisLabel = {show: false};
        // optionThree.series[i].pointer = {show: false};
        // optionThree.series[i].detail = {show: false};
    }
}
//渲染table表头
const tableInfoRef1: any = ref(null)
const tableInfoRef2: any = ref(null)
const tableInfoRef3: any = ref(null)
const initTableHead = () => {
    const list: any = []
    for (let index = 0; index < 1; index++) {
        list.push({
            a: Math.floor(Math.random() * (100 + 1)),
            b: Math.floor(Math.random() * (100 + 1)),
            c: Math.floor(Math.random() * (100 + 1))
        })
    }
    tableInfoRef1.value.getTableData(0, list)
    tableInfoRef2.value.getTableData(1, list)
    tableInfoRef3.value.getTableData(2, list)
}
onMounted(() => {
    init()
    initTableHead()
})
</script>
<style lang="scss" scoped>
.view {
    width: 100%;
    height: 100%;
    padding-bottom: 200px;
    box-sizing: border-box;
    overflow: auto;
    .view_top {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: space-between;
        border: 1px solid #eee;
        padding: 10px;
        .view_top_left,
        .view_top_right {
            width: 30%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            .left_charts,
            .right_charts {
                flex: none;
                width: 100%;
                height: 120px;
                border: 1px solid #eee;
                margin-bottom: 10px;
                padding: 10px;
            }
        }
        .view_top_mid {
            flex: 1;
            border: 1px solid #eee;
            margin: 0 10px;
            padding: 10px;
            .mid_charts {
                width: 100%;
                height: 100%;
            }
        }
    }
    .view_bot {
        min-height: 300px;
        margin: 10px 0 20px 0;
        .view_bot_tables {
            margin-bottom: 10px;
            height: auto;
        }
    }
}
.view::-webkit-scrollbar {
    display: none;
}
</style>
