<template>
    <div class="default-main">
        <TableHeader date-picker>
            <template v-slot:select>
                <el-form-item label="区域">
                    <Area v-model.trim="tableStore.table.params.deptIndex" />
                </el-form-item>
            </template>
        </TableHeader>
        <div style="font-weight: bold; background: #fff; text-indent: 1em">
            <span style="color: #000">
                (左柱):
                <span style="color: #0099cc">
                    <span class="smallBlock" style="background: #0099cc"></span>
                    投运
                </span>
                <span style="color: #996600">
                    <span class="smallBlock" style="background: #996600"></span>
                    热备用
                </span>
                <span style="color: #A52a2a">
                    <span class="smallBlock" style="background: #A52a2a"></span>
                    停运
                </span>
            </span>
            &nbsp;&nbsp;
            <span style="color: #000">
                (右柱):
                <span style="color: #2e8b57">
                    <span class="smallBlock" style="background: #2e8b57"></span>
                    {{ '在线率≥90 %' }}
                </span>
                <span style="color: #daa520">
                    <span class="smallBlock" style="background: #daa520"></span>
                    {{ '60 %≤在线率 < 90 %' }} </span>
                        <span style="color: #A52a2a">
                            <span class="smallBlock" style="background: #A52a2a"></span>
                            {{ '在线率 < 60 %' }} </span>
                        </span>
        </div>
        <div class="statistics-main" v-loading="tableStore.table.loading">
            <template v-if="!tableStore.table.loading">
                <div>
                    <my-echart :options="areaStatistics" />
                </div>
                <div>
                    <vxe-table height="auto" auto-resize :data="tableStore.table.data.area.areaInfo"
                        v-bind="defaultAttribute">
                        <vxe-column field="areaName" title="区域"></vxe-column>
                        <vxe-column field="numberOfTerminals" title="终端个数" width="80"></vxe-column>
                        <vxe-column field="normal" title="投运" width="80"></vxe-column>
                        <vxe-column field="breaks" title="热备用" width="80"></vxe-column>
                        <vxe-column field="shutdown" title="停运" width="80"></vxe-column>
                        <vxe-column field="onlineRate" title="在线率（%）">
                            <template v-slot:default="scoped">
                                {{ scoped.row.onlineRate === 3.14159 ? '/' : scoped.row.onlineRate }}
                            </template>
                        </vxe-column>
                    </vxe-table>
                </div>
                <div>
                    <my-echart :options="factoryStatistics" />
                </div>
                <div>
                    <vxe-table height="auto" auto-resize :data="tableStore.table.data.factory.areaInfo"
                        v-bind="defaultAttribute">
                        <vxe-column field="areaName" title="厂家"></vxe-column>
                        <vxe-column field="numberOfTerminals" title="终端个数" width="80"></vxe-column>
                        <vxe-column field="normal" title="投运" width="80"></vxe-column>
                        <vxe-column field="breaks" title="热备用" width="80"></vxe-column>
                        <vxe-column field="shutdown" title="停运" width="80"></vxe-column>
                        <vxe-column field="onlineRate" title="在线率（%）">
                            <template v-slot:default="scoped">
                                {{ scoped.row.onlineRate === 3.14159 ? '/' : scoped.row.onlineRate }}
                            </template>
                        </vxe-column>
                    </vxe-table>
                </div>
            </template>
        </div>
    </div>
</template>
<script setup lang="ts">
import TableHeader from '@/components/table/header/index.vue'
import Area from '@/components/form/area/index.vue'
import TableStore from '@/utils/tableStore'
import { onMounted, provide, reactive, ref } from 'vue'
import { useDictData } from '@/stores/dictData'
import { mainHeight } from '@/utils/layout'
import MyEchart from '@/components/echarts/MyEchart.vue'
import * as echarts from 'echarts/core'
import { defaultAttribute } from '@/components/table/defaultAttribute'

defineOptions({
    name: 'voltage/sags/operationsManagement/statistics'
})
const dictData = useDictData()
const areaStatistics = ref()
const factoryStatistics = ref()
const tableStore = new TableStore({
    url: '/event-boot/area/getTerminalRunningStatistics',
    method: 'POST',
    column: [],
    loadCallback: () => {
        areaStatistics.value = {
            legend: {
                show: false
            },
            title: {
                text: '区域'
            },
            xAxis: {
                data: tableStore.table.data.area.areaInfo.map(
                    (item: any) => item.areaName + `(${item.numberOfTerminals})`
                )
            },
            tooltip: {
                formatter: function (params: any) {
                    var tips = ''
                    tips += params[0].name + '</br/>'
                    for (var i = 0; i < params.length; i++) {
                        if (params[i].value == 3.14159) {
                            tips += params[i].seriesName + ':暂无数据<br/>'
                        } else {
                            tips += params[i].seriesName + ':' + params[i].value + '%<br/>'
                        }
                    }
                    return tips
                }
            },
            yAxis: { name: '%' },
            options: {
                series: [
                    {
                        stack: 'one',
                        name: '投运',
                        barMaxWidth: 30,
                        barMinHeight: 5,
                        data: tableStore.table.data.area.areaInfo.map((item: any) => item.normalRate),
                        itemStyle: {
                            normal: {
                                color: function (params: any) {
                                    if (params.value != 3.14159) {
                                        return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                            {
                                                offset: 1,
                                                color: '#0099CC'
                                            }
                                        ])
                                    } else if ((params.value = 3.14159)) {
                                        return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                            {
                                                offset: 1,
                                                color: '#ccc'
                                            }
                                        ])
                                    }
                                }
                            }
                        },
                        type: 'bar'
                    },
                    {
                        name: '热备用',
                        stack: 'one',
                        barMaxWidth: 30,
                        barMinHeight: 5,
                        data: tableStore.table.data.area.areaInfo.map((item: any) => item.shutdownRate),
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                color: function (params: any) {
                                    if (params.value != 3.14159) {
                                        return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                            {
                                                offset: 1,
                                                color: '#A52a2a'
                                            }
                                        ])
                                    } else if ((params.value = 3.14159)) {
                                        return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                            {
                                                offset: 1,
                                                color: '#ccc'
                                            }
                                        ])
                                    }
                                }
                            }
                        }
                    },
                    {
                        name: '在线率',
                        stack: 'two',
                        barMaxWidth: 30,
                        barMinHeight: 5,
                        data: tableStore.table.data.area.areaInfo.map((item: any) => item.onlineRate),
                        itemStyle: {
                            normal: {
                                color: function (params: any) {
                                    if (params.value >= 90) {
                                        return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                            {
                                                offset: 1,
                                                color: '#339966'
                                            }
                                        ])
                                    } else if (params.value >= 60 && params.value <= 90) {
                                        return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                            {
                                                offset: 1,
                                                color: '#FFCC33'
                                            }
                                        ])
                                    } else if (params.value <= 60 && params.value != 3.14159) {
                                        return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                            {
                                                offset: 1,
                                                color: '#A52a2a'
                                            }
                                        ])
                                    } else if ((params.value = 3.14159)) {
                                        return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                            {
                                                offset: 1,
                                                color: '#ccc'
                                            }
                                        ])
                                    }
                                }
                            }
                        },
                        type: 'bar'
                    }
                ]
            }
        }
        factoryStatistics.value = {
            legend: {
                show: false
            },
            title: {
                text: '终端厂家'
            },
            xAxis: {
                data: tableStore.table.data.factory.areaInfo.map(
                    (item: any) => item.areaName + `(${item.numberOfTerminals})`
                )
            },
            yAxis: {
                name: '%'
            },
            tooltip: {
                formatter: function (params: any) {
                    var tips = ''
                    tips += params[0].name + '</br/>'
                    for (var i = 0; i < params.length; i++) {
                        if (params[i].value == 3.14159) {
                            tips += params[i].seriesName + ':暂无数据<br/>'
                        } else {
                            tips += params[i].seriesName + ':' + params[i].value + '%<br/>'
                        }
                    }
                    return tips
                }
            },
            options: {
                series: [
                    {
                        stack: 'one',
                        barMaxWidth: 30,
                        barMinHeight: 5,
                        name: '投运',
                        data: tableStore.table.data.factory.areaInfo.map((item: any) => item.normalRate),
                        itemStyle: {
                            normal: {
                                color: function (params: any) {
                                    if (params.value != 3.14159) {
                                        return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                            {
                                                offset: 1,
                                                color: '#0099CC'
                                            }
                                        ])
                                    } else if ((params.value = 3.14159)) {
                                        return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                            {
                                                offset: 1,
                                                color: '#ccc'
                                            }
                                        ])
                                    }
                                }
                            }
                        },
                        type: 'bar'
                    },
                    {
                        name: '热备用',
                        stack: 'one',
                        barMaxWidth: 30,
                        barMinHeight: 5,
                        data: tableStore.table.data.factory.areaInfo.map((item: any) => item.shutdownRate),
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                color: function (params: any) {
                                    if (params.value != 3.14159) {
                                        return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                            {
                                                offset: 1,
                                                color: '#A52a2a'
                                            }
                                        ])
                                    } else if ((params.value = 3.14159)) {
                                        return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                            {
                                                offset: 1,
                                                color: '#ccc'
                                            }
                                        ])
                                    }
                                }
                            }
                        }
                    },
                    {
                        name: '在线率',
                        stack: 'two',
                        barMaxWidth: 30,
                        barMinHeight: 5,
                        data: tableStore.table.data.factory.areaInfo.map((item: any) => item.onlineRate),
                        itemStyle: {
                            normal: {
                                color: function (params: any) {
                                    if (params.value >= 90) {
                                        return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                            {
                                                offset: 1,
                                                color: '#339966'
                                            }
                                        ])
                                    } else if (params.value >= 60 && params.value <= 90) {
                                        return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                            {
                                                offset: 1,
                                                color: '#FFCC33'
                                            }
                                        ])
                                    } else if (params.value <= 60 && params.value != 3.14159) {
                                        return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                            {
                                                offset: 1,
                                                color: '#A52a2a'
                                            }
                                        ])
                                    } else if ((params.value = 3.14159)) {
                                        return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                            {
                                                offset: 1,
                                                color: '#ccc'
                                            }
                                        ])
                                    }
                                }
                            }
                        },
                        type: 'bar'
                    }
                ]
            }
        }
    }
})
provide('tableStore', tableStore)
tableStore.table.params.deptIndex = dictData.state.area[0].id
tableStore.table.params.serverName = 'event-boot'
tableStore.table.params.monitorFlag = 2
tableStore.table.params.powerFlag = 2
tableStore.table.params.statisticalType = {
    name: '电网拓扑',
    id: 'cc28974d259ad22642f6a1bff708f967',
    code: 'Power_Network',
    value: 'cc28974d259ad22642f6a1bff708f967',
    gvalue: null,
    label: '电网拓扑',
    sort: 0
}
onMounted(() => {
    tableStore.index()
})
const layout = mainHeight(104) as any
</script>

<style lang="scss" scoped>
.statistics-main {
    box-sizing: border-box;
    height: v-bind('layout.height');
    padding: 0 10px 10px;
    display: grid;
    grid-template-columns: 1fr 600px;
    grid-template-rows: 1fr 1fr;
    grid-gap: 10px;

}
</style>
