<!--业务用户管理界面-->
<template>
    <div class="default-main">
        <TableHeader date-picker>
            <template v-slot:select>
                <el-form-item label="对象类型">
                    <el-select
                        v-model="tableStore.table.params.supvObjType"
                        clearable
                        style="width: 100%"
                        placeholder="请选择对象类型"
                    >
                        <el-option
                            v-for="item in supvObjTypeList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-radio-group v-model="tableStore.table.params.radio">
                        <el-radio-button label="异常数据" value="1" />
                        <el-radio-button label="告警数据" value="2" />
                    </el-radio-group>
                </el-form-item>
            </template>

            <template v-slot:operation></template>
        </TableHeader>
        <div class="card-list pd10">
            <div class="monitoringPoints">
                <el-card style="height: 140px">
                    <template #header>
                        <div class="card-header">
                            <span>监测点统计</span>
                        </div>
                    </template>
                    <div class="statistics">
                        <div class="divBox">
                            <span class="iconfont icon-qiyezongshu" style="color: #57bc6e"></span>
                            <span class="divBox_title">总数</span>
                            <span class="divBox_num" style="color: #57bc6e">400</span>
                        </div>
                        <div class="divBox" style="width: 190px">
                            <span class="iconfont icon-igw-f-warning-data" style="color: #fca955"></span>
                            <span class="divBox_title">异常监测点</span>
                            <span class="divBox_num" style="color: #fca955">200</span>
                        </div>
                        <div class="divBox">
                            <span class="iconfont icon-shouruzhanbi" style="color: #06b6a9"></span>
                            <span class="divBox_title">占比</span>
                            <span class="divBox_num" style="color: #06b6a9">50%</span>
                        </div>
                    </div>

                    <!-- <MyEchart :options="finish" style="height: 230px"></MyEchart> -->
                </el-card>
                <el-card class="mt10">
                    <template #header>
                        <div class="card-header">
                            <span>异常指标统计</span>
                        </div>
                    </template>
                    <div class="header">
                        <span style="width: 180px; text-align: left">指标名称</span>
                        <span style="flex: 1">合理范围</span>
                        <span style="width: 100px">异常测点</span>
                    </div>
                    <div :style="indicatorHeight" style="overflow-y: auto">
                        <div v-for="o in abnormal" class="abnormal mb10">
                            <span style="width: 180px; height: 24px">
                                <span
                                    class="iconFont iconfont icon-yichang"
                                    :style="{ color: o.quantity > 0 ? '#ff9800' : '' }"
                                ></span>
                                {{ o.name }}
                            </span>
                            <span style="flex: 1; text-align: center">
                                <!-- 合理范围： -->
                                <span style="color: #388e3c" class="text">{{ o.range }}</span>
                                {{ o.unit }}
                            </span>
                            <span style="width: 100px; text-align: center">
                                <span
                                    style="color: #ff9800; cursor: pointer; text-decoration: underline"
                                    class="text"
                                    @click="quantityClick(o)"
                                >
                                    {{ o.quantity }}
                                </span>
                            </span>
                        </div>
                    </div>
                </el-card>
            </div>
            <el-card class="detail ml10" :style="pageHeight">
                <template #header>
                    <div class="card-header">
                        <span>异常详情统计</span>
                    </div>
                </template>
                <div style="height: 350px">
                    <MyEchart :options="options"></MyEchart>
                </div>
                <el-form :inline="true" class="form">
                    <el-form-item label="告警持续天数"></el-form-item>
                    <el-form-item label="告警阀值(天)">
                        <el-input-number v-model="tableStore.table.params.alarm" :min="0" :step="1" step-strictly />
                    </el-form-item>
                    <el-form-item label="预警阀值(天)">
                        <el-input-number
                            v-model="tableStore.table.params.earlyWarning"
                            :min="0"
                            :step="1"
                            step-strictly
                        />
                    </el-form-item>
                    <el-form-item class="form_but">
                        <el-button type="primary" icon="el-icon-Refresh">更新</el-button>
                        <el-button type="primary" icon="el-icon-Download">导出</el-button>
                    </el-form-item>
                </el-form>
                <!--表格-->
                <Table ref="tableRef"></Table>
            </el-card>
        </div>
        <anomalyDetails ref="anomalyDetailsRef" />
    </div>
</template>

<script setup lang="ts">
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import { deleteDeploy } from '@/api/process-boot/bpm'
import { onMounted, provide, ref } from 'vue'
import { useDictData } from '@/stores/dictData'
import { ElMessage } from 'element-plus'
import { CaretRight } from '@element-plus/icons-vue'
import { mainHeight } from '@/utils/layout'
import MyEchart from '@/components/echarts/MyEchart.vue'
import anomalyDetails from './components/anomalyDetails.vue'
defineOptions({
    name: 'runManage/cleaning'
})
const anomalyDetailsRef = ref()
const dictData = useDictData()
//字典获取监督对象类型
const supvObjTypeList = dictData.getBasicData('supv_obj_type')
const pageHeight = mainHeight(105)
const indicatorHeight = mainHeight(352)
const tableRef = ref()
const abnormal = ref([
    {
        name: '频率',
        range: '42.5~57.5',
        unit: '',
        quantity: 11
    },
    {
        name: '频率偏差',
        range: '-7.5~7.5',
        unit: '',
        quantity: 0
    },
    {
        name: '相（线）电压有效值',
        range: '0~150%U',
        unit: '',
        quantity: 0
    },
    {
        name: '电压偏差',
        range: '-20%~20%',
        unit: '',
        quantity: 0
    },
    {
        name: '电流有效值',
        range: '大于CT一次变比',
        unit: '',
        quantity: 0
    },
    {
        name: '单相功率因数',
        range: '-1~1',
        unit: '',
        quantity: 0
    },
    {
        name: '单相基波功率因数',
        range: '-1~1',
        unit: '',
        quantity: 0
    },
    {
        name: '三相功率因数',
        range: '-1~1',
        unit: '',
        quantity: 0
    },
    {
        name: '基波功率因数',
        range: '-1~1',
        unit: '',
        quantity: 0
    },
    {
        name: '电压总谐波畸变率',
        range: '0~30%',
        unit: '',
        quantity: 0
    },
    {
        name: '相（线）电压基波有效值',
        range: '0~150%U',
        unit: '',
        quantity: 0
    },
    {
        name: '相（线）电压基波相角',
        range: '-180~180',
        unit: '',
        quantity: 0
    },
    {
        name: '谐波电压含有率',
        range: '0~30%',
        unit: '',
        quantity: 0
    },
    {
        name: '谐波电压相角',
        range: '-180~180',
        unit: '',
        quantity: 0
    },
    {
        name: '间谐波电压含有率',
        range: '0~30%',
        unit: '',
        quantity: 0
    },
    {
        name: '正序、负序和零序电压',
        range: '0~150%U',
        unit: '',
        quantity: 0
    },
    {
        name: '负序电压不平衡度',
        range: '0~40%',
        unit: '',
        quantity: 0
    },
    {
        name: '零序电压不平衡度',
        range: '0~40%',
        unit: '',
        quantity: 0
    },
    {
        name: '电压波动',
        range: '0~40%',
        unit: '',
        quantity: 0
    },
    {
        name: '短时间闪变值',
        range: '0~20',
        unit: '',
        quantity: 0
    },
    {
        name: '长时间闪变值',
        range: '0~20',
        unit: '',
        quantity: 0
    },
    {
        name: '电压暂降特征幅值',
        range: '0~90%',
        unit: '',
        quantity: 0
    },
    {
        name: '电压暂升特征幅值',
        range: '110%~180%',
        unit: '',
        quantity: 0
    }
])
const tableStore = new TableStore({
    url: '/user-boot/user/getAllUserSimpleList',
    method: 'GET',
    isWebPaging: true,
    showPage: false,
    publicHeight: 480,
    column: [
        { title: '序号', width: 80 },
        {
            title: '监测点名称',
            field: 'name',
            type: 'html',
            formatter: (row, column) => {
                return `<div class="table_name">${row.cellValue}</div>`
            }
        },
        {
            title: '所属终端名称',
            field: 'name1',
            type: 'html',
            formatter: (row, column) => {
                return `<div class="table_name">${row.cellValue}</div>`
            }
        },
        {
            title: '所属电站',
            field: 'name2',
            type: 'html',
            formatter: (row, column) => {
                return `<div class="table_name">${row.cellValue}</div>`
            }
        },
        { title: '监测对象类型', field: 'name3' },
        { title: '监测对象名称', field: 'name4' },
        { title: '电压等级', field: 'name5' },
        {
            title: '异常天数',
            field: 'name6',
            type: 'html',
            formatter: (row, column) => {
                return `<div class="table_name">${row.cellValue}</div>`
            }
        },
        {
            title: '严重度',
            field: 'name7',
            render: 'tag',
            custom: {
                0: 'warning',
                1: 'danger'
            },

            replaceValue: {
                0: '预警',
                1: '告警'
            }
        },
        {
            title: '操作',
            width: '120',
            render: 'buttons',
            buttons: [
                {
                    name: 'edit',
                    title: '工单',
                    type: 'primary',
                    icon: 'el-icon-Plus',
                    render: 'basicButton',
                    click: row => {}
                }
            ]
        }
    ],
    loadCallback: () => {
        tableStore.table.data = [
            {
                name: '测试监测点1',
                name1: '025875',
                name2: '测试变电站',
                name3: '测试光伏电站',
                name4: '测试光伏电站',
                name5: '110',
                name6: '1',
                name7: '0'
            },
            {
                name: '测试监测点1',
                name1: '025875',
                name2: '测试变电站',
                name3: '测试光伏电站',
                name4: '测试光伏电站',
                name5: '110',
                name6: '1',
                name7: '0'
            },
            {
                name: '测试监测点1',
                name1: '025875',
                name2: '测试变电站',
                name3: '测试光伏电站',
                name4: '测试光伏电站',
                name5: '110',
                name6: '1',
                name7: '0'
            },
            {
                name: '测试监测点1',
                name1: '025875',
                name2: '测试变电站',
                name3: '测试光伏电站',
                name4: '测试光伏电站',
                name5: '110',
                name6: '1',
                name7: '0'
            },
            {
                name: '测试监测点1',
                name1: '025875',
                name2: '测试变电站',
                name3: '测试光伏电站',
                name4: '测试光伏电站',
                name5: '110',
                name6: '1',
                name7: '0'
            },
            {
                name: '测试监测点1',
                name1: '025875',
                name2: '测试变电站',
                name3: '测试光伏电站',
                name4: '测试光伏电站',
                name5: '110',
                name6: '1',
                name7: '1'
            },
            {
                name: '测试监测点1',
                name1: '025875',
                name2: '测试变电站',
                name3: '测试光伏电站',
                name4: '测试光伏电站',
                name5: '110',
                name6: '1',
                name7: '1'
            }
        ]
    }
})
var getvalue = 90
const options = ref({
    title: {
        text: '监测点异常情况(2025-03-01~2025-03-10)'
    },
    legend: {
        show: false
    },
    xAxis: {
        name: '时间',

        axisLine: {
            show: true
        },

        data: ['03-01', '03-02', '03-03', '03-04', '03-05', '03-06', '03-07', '03-08', '03-09', '03-10']
    },
    yAxis: {
        name: '数量' // 给X轴加单位
    },
    grid: {},

    options: {
        series: [
            {
                name: '告警监测点数量',
                type: 'bar',

                data: [11, 11, 11, 11, 0, 0, 0, 0, 0, 0]
            }
        ]
    }
})
const finish = ref({
    options: {
        toolbox: null,
        dataZoom: null,
        angleAxis: {
            show: false,
            max: 155, //-45度到225度，二者偏移值是270度除360度
            type: 'value',
            startAngle: 205, //极坐标初始角度
            splitLine: {
                show: false
            }
        },

        radiusAxis: {
            show: false,
            type: 'category'
        },
        tooltip: {
            show: false
        },

        legend: {
            show: false
        },
        //圆环位置和大小
        polar: {
            center: ['70%', '60%'],
            radius: '180%'
        },
        series: [
            {
                type: 'bar',
                data: [
                    {
                        //上层圆环，显示数据
                        value: getvalue
                    }
                ],
                barGap: '-100%', //柱间距离,上下两层圆环重合
                coordinateSystem: 'polar',
                roundCap: true, //顶端圆角
                z: 3 //圆环层级，同zindex
            },
            {
                //下层圆环，显示最大值
                type: 'bar',
                data: [
                    {
                        value: 100,
                        itemStyle: {
                            color: '#ccc',
                            opacity: 1,
                            borderWidth: 0
                        }
                    }
                ],
                barGap: '-100%',
                coordinateSystem: 'polar',
                roundCap: true,
                z: 1
            },
            //仪表盘
            {
                type: 'gauge',
                startAngle: 225, //起始角度，同极坐标
                endAngle: -45, //终止角度，同极坐标
                axisLine: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
                splitLabel: {
                    show: false
                },
                pointer: {
                    // 分隔线
                    shadowColor: 'auto', //默认透明
                    shadowBlur: 5,
                    length: '50%',
                    width: '2',
                    show: false
                },
                itemStyle: {
                    color: '#1598FF',
                    borderColor: '#1598FF',
                    borderWidth: 6
                },
                detail: {
                    formatter: function (params) {
                        return `{wcl|占比\n}{number|${getvalue + '%'}}`
                    },
                    rich: {
                        number: {
                            fontSize: 25,
                            textAlign: 'center',
                            color: '#000'
                        },
                        wcl: {
                            fontSize: 16,
                            textAlign: 'center',
                            color: '#000'
                        }
                    },
                    color: '#000',
                    lineHeight: 30,
                    offsetCenter: ['0', '0']
                },
                center: ['70%', '60%'],
                title: {
                    show: false
                },
                data: [
                    {
                        value: getvalue
                    }
                ]
            }
        ]
    }
})
tableStore.table.params.radio = '1'
tableStore.table.params.alarm = 5
tableStore.table.params.earlyWarning = 1

const quantityClick = (e: any) => {
    anomalyDetailsRef.value.open(e)
}
onMounted(() => {
    // 加载数据
    tableStore.index()
})

tableStore.table.params.name = ''
provide('tableStore', tableStore)
</script>
<style lang="scss" scoped>
.card-list {
    display: flex;
    .monitoringPoints {
        width: 560px;
        position: relative;
        .statistics {
            display: flex;
            flex-wrap: wrap;
            .divBox {
                margin: 0 10px 10px 0;
                width: 160px;
                height: 70px;
                padding: 10px;
                display: flex;
             
                .iconfont {
                    font-size: 40px;
                    margin-right: 5px;
                }
                .divBox_title {
                    font-weight: 550;
                }
                .divBox_num {
                    font-size: 20px;
                    font-weight: 550;
                    margin-left: auto;
                    font-family: AlimamaDongFangDaKai;
                }
                align-items: center;
                // text-align: center;
                border-radius: 5px;
                &:nth-child(1) {
                    background-color: #eef8f0;
                }
                &:nth-child(2) {
                    background-color: #fff6ed;
                }
                &:nth-child(3) {
                    background-color: #e5f8f6;
                }
            }
        }
    }
    .detail {
        flex: 1;
    }
    .abnormal {
        width: 100%;
        background-color: #f3f6f9;
        border-radius: 5px;
        display: flex;
        // justify-content: space-between;
        align-items: center;
        padding: 5px 0px 5px 10px;

        .text {
            font-weight: 700;
            font-size: 16px;
            font-family: 'Source Code Pro', monospace;

            // font-feature-settings: 'tnum';
        }
    }
}
.header {
    display: flex;
    text-align: center;

    font-weight: 700;
    padding: 5px;
}
:deep(.el-card__header) {
    padding: 10px;
    span {
        font-weight: 600;
    }
}
:deep(.el-card__body) {
    padding: 10px;
}
.iconFont {
    font-size: 18px;
    display: inline-block;
    vertical-align: middle;
}
.form {
    position: relative;
    .form_but {
        position: absolute;
        right: -22px;
    }
}
.card-header {
    font-size: 16px;
}
:deep(.table_name) {
    color: var(--el-color-primary);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 4px;
}
</style>
