<!--业务用户管理界面-->
<template>
    <div>
        <TableHeader date-picker>
            <template v-slot:select>
                <el-form-item label="对象类型">
                    <el-select
                        v-model="tableStore.table.params.objType"
                        clearable
                        style="width: 100%"
                        placeholder="请选择对象类型"
                    >
                        <el-option
                            v-for="item in objTypeList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </template>

            <template v-slot:operation></template>
        </TableHeader>
        <div class="card-list pt10">
            <div class="monitoringPoints">
                <el-card style="height: 200px">
                    <template #header>
                        <div class="card-header">
                            <span>监测点统计</span>
                        </div>
                    </template>
                    <div>
                        <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">{{ monitoringPoints.runNum }}</span>
                            </div>
                            <div class="divBox" style="width: 200px">
                                <span class="iconfont icon-yichang" style="color: #ff0000"></span>
                                <span class="divBox_title">告警测点数</span>
                                <span class="divBox_num" style="color: #ff0000">
                                    {{ monitoringPoints.abnormalNum }}
                                </span>
                            </div>
                        </div>
                        <div class="echartTitle">
                            <div>告警占比</div>
                            <div>
                                {{
                                    isNaN((monitoringPoints.abnormalNum / monitoringPoints.runNum) * 100)
                                        ? 0
                                        : ((monitoringPoints.abnormalNum / monitoringPoints.runNum) * 100).toFixed(2)
                                }}%
                            </div>
                        </div>
                        <div style="height: 30px">
                            <MyEchart :options="percentage"></MyEchart>
                        </div>
                    </div>
                </el-card>
                <el-card class="mt10">
                    <template #header>
                        <div class="card-header">
                            <span>告警指标统计</span>
                        </div>
                    </template>
                    <div class="mb5" style="height: 40px">
                        <el-segmented style="height: 100%" v-model="segmented" :options="segmentedList" block />
                    </div>
                    <div class="header">
                        <span style="flex: 1; text-align: left">指标名称</span>

                        <span style="width: 110px">告警测点数</span>
                    </div>
                    <div :style="indicatorHeight" style="overflow-y: auto">
                        <div v-for="o in abnormal" class="abnormal mb10">
                            <span style="flex: 1; height: 24px" class="iconDiv">
                                <div :style="{ backgroundColor: o.ids.length > 0 ? '#ff9800' : '' }"></div>
                                {{ o.targetName }}
                            </span>

                            <span style="width: 110px; text-align: center">
                                <span
                                    style="color: #ff9800; cursor: pointer; text-decoration: underline"
                                    class="text"
                                    @click="quantityClick(o)"
                                >
                                    {{ o.ids.length }}
                                </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.alarmDayLimit"
                            :min="0"
                            :step="1"
                            step-strictly
                        />
                    </el-form-item>
                    <el-form-item label="预警阀值(天)">
                        <el-input-number
                            v-model="tableStore.table.params.warnDayLimit"
                            :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>
        <alarmDetails ref="alarmDetailsRef" />
    </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 { onMounted, provide, ref } from 'vue'
import { useDictData } from '@/stores/dictData'
import { mainHeight } from '@/utils/layout'
import MyEchart from '@/components/echarts/MyEchart.vue'
import alarmDetails from './alarmDetails.vue'
import { useConfig } from '@/stores/config'
import { queryFirstNode } from '@/api/auth'

const alarmDetailsRef = ref()
const dictData = useDictData()
//字典获取监督对象类型
const objTypeList: any = ref([])
const pageHeight = mainHeight(155)
const indicatorHeight = mainHeight(507)
const tableRef = ref()
const monitoringPoints = ref({
    runNum: 0,
    abnormalNum: 0
})

const percentage = ref({})
const abnormal: any = ref([])
const segmented = ref(1)
const segmentedList = [
    {
        label: '基础数据',
        value: 1
    },
    {
        label: '稳态数据',
        value: 2
    },
    {
        label: '暂态数据',
        value: 3
    }
]
const tableStore = new TableStore({
    url: '/device-boot/dataVerify/getMonitorVerifyData',
    method: 'POST',
    showPage: false,
    publicHeight: 480,
    column: [
        {
            title: '序号',
            width: 80,
            formatter: (row: any) => {
                return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
            }
        },
        {
            title: '监测点名称',
            field: 'monitorName',
            type: 'html',
            formatter: (row, column) => {
                return `<div class="table_name">${row.cellValue}</div>`
            }
        },
        {
            title: '所属终端名称',
            field: 'devName',
            type: 'html',
            formatter: (row, column) => {
                return `<div class="table_name">测试终端</div>`
                // `<div class="table_name">${row.cellValue}</div>`
            }
        },
        {
            title: '所属电站',
            field: 'stationName',
            type: 'html',
            formatter: (row, column) => {
                return `<div class="table_name">${row.cellValue}</div>`
            }
        },
        {
            title: '监测对象类型',
            field: 'objType',
            formatter: (row, column) => {
                return `测试光伏电站`
            }
        },
        {
            title: '监测对象名称',
            field: 'objName',
            formatter: (row, column) => {
                return `测试对象`
            }
        },
        { title: '电压等级', field: 'voltageLevel' },
        {
            title: '告警天数',
            field: 'abnormalDay',
            type: 'html',
            formatter: (row, column) => {
                return `<div class="table_name">${row.cellValue}</div>`
            }
        },
        {
            title: '严重度',
            field: 'severity',
            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: () => {
        console.log('🚀 ~   abnormal.value:', tableStore.table.data)
        monitoringPoints.value.runNum = tableStore.table.data.runNum //总数
        monitoringPoints.value.abnormalNum = tableStore.table.data.abnormalNum //告警测点数
        abnormal.value = tableStore.table.data.targetList
        tableStore.table.data = tableStore.table.data.monitorAlarmInfo
        echart()
    }
})

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 echart = () => {
    percentage.value = {
        color: ['#ff9800'],
        options: {
            dataZoom: null,
            toolbox: {
                show: false
            },
            grid: {
                top: '0%',
                left: '2%',
                right: '2%',
                bottom: '0%'
            },
            tooltip: {
                show: false
            },
            legend: {
                show: false
            },
            yAxis: {
                show: false,
                data: ['']
            },
            xAxis: [
                {
                    show: false,
                    type: 'value'
                }
            ],

            series: [
                {
                    name: '告警占比',
                    type: 'bar',
                    barWidth: 12,
                    data: [((monitoringPoints.value.abnormalNum / monitoringPoints.value.runNum) * 100).toFixed(2)],
                    z: 0,
                    zlevel: 0,

                    itemStyle: {
                        normal: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 0,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: '#ff0007' // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: '#E22331' // 100% 处的颜色
                                    }
                                ],
                                global: false // 缺省为 false
                            }
                        }
                    }
                },
                {
                    type: 'pictorialBar',
                    itemStyle: {
                        normal: {
                            color: '#fff'
                        }
                    },
                    symbolRepeat: 50,
                    // symbolMargin: 300,
                    symbol: 'rect',
                    symbolClip: true,
                    symbolSize: [2, 15],
                    symbolPosition: 'start',
                    symbolOffset: [0, 0],
                    data: [100],
                    z: 1,
                    zlevel: 0
                },
                {
                    name: '机器故障率',
                    type: 'bar',
                    barGap: '-125%',
                    data: [100],
                    barWidth: 18,

                    itemStyle: {
                        normal: {
                            color: 'transparent',
                            barBorderColor: 'rgb(148,217,249)',
                            barBorderWidth: 1
                        }
                    },
                    z: 2
                }
            ]
        }
    }
}
tableStore.table.params.deptId = dictData.state.area[0].id
tableStore.table.params.objType = ''
tableStore.table.params.alarmDayLimit = 5
tableStore.table.params.warnDayLimit = 1

const quantityClick = (e: any) => {
    alarmDetailsRef.value.open(e)
}
onMounted(() => {
    queryFirstNode({ type: 0 }).then(res => {
        objTypeList.value = res.data
    })
    // 加载数据
    tableStore.index()
})

tableStore.table.params.name = ''
provide('tableStore', tableStore)
</script>
<style lang="scss" scoped>
.card-list {
    display: flex;
    .monitoringPoints {
        width: 440px;
        position: relative;
        .statistics {
            display: flex;
            flex-wrap: wrap;
            .divBox {
                margin: 0 10px 10px 0;
                width: 200px;
                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: #ffd7d7;
                }
                &: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;
        .iconDiv {
            display: flex;
            align-items: center;
            div {
                width: 4px;
                height: 18px;
                margin-right: 5px;
                background-color: var(--el-color-primary);
            }
        }
        .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;
}
.echartTitle {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 600;
    div:nth-child(2) {
        font-size: 16px;
        color: #ff0000;
    }
}

:deep(.el-segmented__item-selected, ) {
    clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
}
:deep(.el-segmented__item, ) {
    clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
}
:deep(.el-segmented) {
    clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
}
</style>
