<!-- 稳态 -->
<template>
    <!-- 终端 -->
    <el-dialog draggable title="稳态电能质量水平评估详情" v-model="dialogVisible" width="1400px">
        <el-row style="height: 300px" :gutter="20">
            <el-col :span="14">
                <div class="title">
                    <span>稳态电能质量水平评估</span>
                </div>
                <vxe-table v-bind="defaultAttribute" size="mini" ref="vxeRef" height="260px" :data="tableData">
                    <vxe-column field="devName" width="110px" />

                    <vxe-colgroup title="500kV">
                        <vxe-column field="devName" title="均值" />
                        <vxe-column field="devName" title="标准差" />
                    </vxe-colgroup>
                    <vxe-colgroup title="220kV">
                        <vxe-column field="devName" title="均值" />
                        <vxe-column field="devName" title="标准差" />
                    </vxe-colgroup>
                    <vxe-colgroup title="110kV">
                        <vxe-column field="devName" title="均值" />
                        <vxe-column field="devName" title="标准差" />
                    </vxe-colgroup>
                    <vxe-colgroup title="35kV">
                        <vxe-column field="devName" title="均值" />
                        <vxe-column field="devName" title="标准差" />
                    </vxe-colgroup>
                    <vxe-colgroup title="其他">
                        <vxe-column field="devName" title="均值" />
                        <vxe-column field="devName" title="标准差" />
                    </vxe-colgroup>
                </vxe-table>
            </el-col>
            <el-col :span="10">
                <div class="title">
                    <span>稳态电能质量水平评估环比变化</span>
                </div>
                <div class="pie">
                    <MyEChart style="height: 260px" :options="trendEChart" />
                    <!-- <div style="height: 260px" ref="chartRef" /> -->
                </div>
            </el-col>
        </el-row>
        <div>
            <div class="title">
                <span>稳态电能质量水平评估详细列表</span>
            </div>
            <vxe-table v-bind="defaultAttribute" ref="vxeRef" height="300px" :data="tableData">
                <vxe-column field="devName" title="变电站名称" />
                <vxe-column field="devName" title="超标天数" />
                <vxe-column field="devName" title="超标差值" />
                <vxe-column field="devName" title="在线监测点数量(个)" />
                <vxe-column field="devName" title="超标监测点数量(个)" />
                <vxe-column field="devName" title="超标监测点占比(%)" />
            </vxe-table>
        </div>
    </el-dialog>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import MyEChart from '@/components/echarts/MyEchart.vue'
import echarts from '@/components/echarts/echarts.ts'
import { defaultAttribute } from '@/components/table/defaultAttribute'

const dialogVisible: any = ref(false)
const chartRef = ref()
const tableData: any = ref([
    {
        devName: 123
    }
])

const trendEChart = ref({
    xAxis: {
        show: false
    },
    legend: {
        data: ['1月', '2月', '3月']
    },
    yAxis: {
        show: false
    },

    options: {
        dataZoom: null,
        radar: {
            center: ['50%', '50%'],
            radius: '65%',
            startAngle: 90,
            splitNumber: 5,
            splitArea: {
                areaStyle: {
                    color: ['#FFFFFF', '#F5F9FF'].reverse()
                }
            },
            axisLabel: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#D2E4F8'
                }
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#D2E4F8'
                }
            },
            name: {
                formatter: '{value}',
                textStyle: {
                    color: '#656565',
                    fontSize: 15
                }
            },
            indicator: [
                {
                    name: '评率偏差',
                    max: 100
                },
                {
                    name: '电压偏差',
                    max: 100
                },
                {
                    name: '闪变',
                    max: 100
                },
                {
                    name: '电压总谐波畸变率',
                    max: 100
                },
                {
                    name: '三相电压不平衡度',
                    max: 100
                }
            ]
        },

        series: [
            {
                name: '1月',
                // type: 'radar',
                symbol: 'none',
                symbolSize: 6,
                areaStyle: {
                    normal: {
                        color: '#80B2FF'
                    }
                },
                itemStyle: {
                    color: '#80B2FF'
                },
                lineStyle: {
                    normal: {
                        color: '#80B2FF',
                        width: 2
                    }
                },
                data: [9, 16, 16, 15, 12]
            }
        ]
    }
})
const echart = () => {
    let chart = echarts.init(chartRef.value)
    var dataname = ['评率偏差', '电压偏差', '闪变', '电压总谐波畸变率', '三相电压不平衡度']
    var datamax = [20, 20, 20, 20, 20, 20]
    var datavaule = [9, 16, 16, 15, 12, 8]
    var datavaule1 = [6, 8, 10, 6, 5, 8]
    var datavaule2 = [19, 19, 19, 19, 19, 19]

    var indicator = []
    for (var i = 0; i < dataname.length; i++) {
        indicator.push({
            name: dataname[i],
            max: datamax[i]
        })
    }

    let option = {
        tooltip: {
            show: true,
            trigger: 'item'
        },
        legend: {
            data: ['1月', '2月', '3月'],
            type: 'scroll',
            orient: 'vertical',
            icon: 'roundRect',
            right: '20',
            top: 'center',
            itemGap: 30,
            itemWidth: 16,
            itemHeight: 16,
            textStyle: {
                fontSize: '15',
                color: '#656565'
            }
        },
        radar: {
            center: ['50%', '50%'],
            radius: '65%',
            startAngle: 90,
            splitNumber: 5,
            splitArea: {
                areaStyle: {
                    color: ['#FFFFFF', '#F5F9FF'].reverse()
                }
            },
            axisLabel: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#D2E4F8'
                }
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#D2E4F8'
                }
            },
            name: {
                formatter: '{value}',
                textStyle: {
                    color: '#656565',
                    fontSize: 15
                }
            },
            indicator: indicator
        },

        series: [
            {
                name: '1月',
                type: 'radar',
                symbol: 'none',
                symbolSize: 6,
                areaStyle: {
                    normal: {
                        color: '#80B2FF'
                    }
                },
                itemStyle: {
                    color: '#80B2FF'
                },
                lineStyle: {
                    normal: {
                        color: '#80B2FF',
                        width: 2
                    }
                },
                data: [datavaule]
            },
            {
                name: '2月',
                type: 'radar',
                symbol: 'none',
                symbolSize: 6,
                areaStyle: {
                    normal: {
                        color: '#80B2FF'
                    }
                },
                itemStyle: {
                    color: '#80B2FF'
                },
                lineStyle: {
                    normal: {
                        color: '#80B2FF',
                        width: 2
                    }
                },
                data: [datavaule1]
            },
            {
                name: '3月',
                type: 'radar',
                symbol: 'none',
                symbolSize: 6,
                areaStyle: {
                    normal: {
                        color: '#80B2FF'
                    }
                },
                itemStyle: {
                    color: '#80B2FF'
                },
                lineStyle: {
                    normal: {
                        color: '#80B2FF',
                        width: 2
                    }
                },
                data: [datavaule2]
            }
        ]
    }
    chart.setOption(option)
}
// echart()
const open = async (row: any) => {
    dialogVisible.value = true
}

defineExpose({ open })
</script>
<style lang="scss" scoped>
:deep(.el-select) {
    min-width: 80px;
}
.title {
    display: flex;
    justify-content: space-between;
    margin: 10px;
    span {
        font-weight: 550;
        font-size: 18px;
    }
}
.pie {
    display: flex;
    justify-content: space-around;
}
:deep(.el-table thead) {
    color: #000;
}
</style>
