<template>
    <div class="default-main lineInfo" :style="height">
        <DatePicker ref="datePickerRef" style="display: none" theCurrentTime />
        <el-page-header :icon="ArrowLeft" @back="emit('back')">
            <template #content>
                <span style="">{{ dropList.gdName }}_{{ dropList.bdName }}_{{ dropList.lineName }}</span>
                <span style="font-weight: 500" class="ml20">最新数据时间：</span>
                <span style="color: var(--el-color-primary)">{{ dropList.updateTime }}</span>
                <span style="font-weight: 500" class="ml20">统计日期：</span>
                <span style="color: var(--el-color-primary)">
                    {{ getTimeOfTheMonth('3')[0] + '至' + getTimeOfTheMonth('3')[1] }}
                </span>
            </template>
        </el-page-header>
        <el-row :gutter="20" class="mt10" :style="`height:${rowHeight}`">
            <el-col :span="8">
                <h3 class="mb10 iconBox text-style" @click="clickLinName">
                    <span></span>
                    台账信息
                </h3>
                <el-descriptions title="" label-width="100px" border :column="2" size="small">
                    <el-descriptions-item label="变电站名称">
                        {{ dropList.bdName }}
                    </el-descriptions-item>
                    <el-descriptions-item label="监测点名称">
                        {{ dropList.lineName }}
                    </el-descriptions-item>
                    <el-descriptions-item label="监测对象名称">
                        {{ dropList.objName }}
                    </el-descriptions-item>
                    <el-descriptions-item label="所属厂家">{{ dropList.manufacturer }}</el-descriptions-item>
                    <el-descriptions-item label="电压等级">{{ dropList.scale }}</el-descriptions-item>
                    <el-descriptions-item label="投运日期">{{ dropList.loginTime }}</el-descriptions-item>
                    <!-- <el-descriptions-item label="PT">{{ dropList.pt }}</el-descriptions-item>
                    <el-descriptions-item label="CT">{{ dropList.ct }}</el-descriptions-item> -->
                    <el-descriptions-item label="干扰源类型">{{ dropList.loadType }}</el-descriptions-item>
                    <el-descriptions-item label="通讯状态">
                        <el-tag size="small" :type="dropList.comFlag == '正常' ? 'success' : 'danger'" effect="dark">
                            {{ dropList.comFlag }}
                        </el-tag>
                    </el-descriptions-item>
                </el-descriptions>
            </el-col>
            <el-col :span="8">
                <h3
                    class="mb10 iconBox text-style"
                    @click="TargetData.info == 1 ? clickAlarm(5) : TargetData.info == 2 ? Integrity() : ''"
                >
                    <span></span>
                    告警天数
                </h3>
                <el-descriptions title="" border :column="2" size="small">
                    <el-descriptions-item width="140px" label="告警原因">
                        <span
                            style="font-weight: 550"
                            :style="
                                TargetData.info == 0
                                    ? 'color: #0e8780;'
                                    : TargetData.info == 3
                                    ? 'color: #000'
                                    : 'color: #ff0000;'
                            "
                        >
                            {{
                                TargetData.info == 1
                                    ? '超标告警'
                                    : TargetData.info == 2
                                    ? '完整性告警'
                                    : TargetData.info == 0
                                    ? '无告警'
                                    : '暂无数据'
                            }}
                        </span>
                    </el-descriptions-item>
                    <el-descriptions-item label="频率偏差">{{ TargetData.freqDevOvertime }}</el-descriptions-item>
                    <el-descriptions-item label="电压偏差">{{ TargetData.voltageDevOvertime }}</el-descriptions-item>
                    <el-descriptions-item label="谐波电流">{{ TargetData.iharmOvertime }}</el-descriptions-item>
                    <el-descriptions-item label="负序电流">{{ TargetData.inegOvertime }}</el-descriptions-item>
                    <el-descriptions-item label="间谐波电压">{{ TargetData.inuharmOvertime }}</el-descriptions-item>
                    <el-descriptions-item label="电压总谐波畸变率">
                        {{ TargetData.uaberranceOvertime }}
                    </el-descriptions-item>
                    <el-descriptions-item label="闪变">{{ TargetData.flickerOvertime }}</el-descriptions-item>
                    <el-descriptions-item label="谐波电压">{{ TargetData.uharmOvertime }}</el-descriptions-item>
                    <el-descriptions-item width="140px" label="三相电压不平衡度">
                        {{ TargetData.ubalanceOvertime }}
                    </el-descriptions-item>
                </el-descriptions>
            </el-col>
            <el-col :span="8">
                <h3 class="mb10 iconBox text-style" @click="clickAlarm(8)">
                    <span></span>
                    告警明细
                </h3>

                <!-- <vxe-table
                    height="200px"
                    :data="evaluationData"
                    size="mini"
                    border
                    align="center"
                    showOverflow
                    :columnConfig="{ resizable: true, useKey: true }"
                >
                    <vxe-column field="targetName" title="供电公司"></vxe-column>
                    <vxe-column field="avg" title="幅值"></vxe-column>
                    <vxe-column field="xz" title="最大限值"></vxe-column>
                 
                </vxe-table> -->
                <!-- ${rowHeight} -->
                <el-table :data="evaluationData.filter((item) => item.avg != 3.14159)" v-loading='loading' :height='`calc(${rowHeight} - 31px)`' size="small" border >
                    <el-table-column prop="targetName" align="center" label="指标名称" />
                    <el-table-column prop="avg" align="center" label="最大越限幅值">
                        <template #default="{ row }">
                            {{ Math.floor(row.avg * 100) / 100 }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="xz" align="center" label="限值">
                        <template #default="{ row }">
                            {{ row.xz == 3.14159 ? '/' : row.xz }}
                        </template>
                    </el-table-column>
                </el-table>  
            </el-col>
        </el-row>
        <el-row :gutter="20" class="mt10" :style="`height:${rowHeight}`">
            <el-col :span="8">
                <h3 class="mb10 iconBox">
                    <span></span>
                    数据质量
                </h3>
                <div style="display: flex">
                    <MyEChart :style="`height: calc(${rowHeight} - 31px)`" :options="ComCharts" @click="Integrity" />
                    <MyEChart
                        :style="`height: calc(${rowHeight} - 31px)`"
                        :options="onLineCharts"
                        @click="OnlineRate"
                    />
                </div>
            </el-col>
            <el-col :span="8">
                <h3 class="mb10 iconBox text-style" @click="clickAlarm(2)">
                    <span></span>
                    稳态指标合格率
                </h3>

                <div :style="`height: calc(${rowHeight} - 31px); `" ref="chartRef"></div>
            </el-col>
            <el-col :span="8">
                <h3 class="mb10 iconBox text-style" @click="clickTransient()">
                    <span></span>
                    暂态事件统计
                </h3>

                <MyEChart :style="`height: calc(${rowHeight} - 31px)`" :options="incidentCharts" />
            </el-col>
        </el-row>
        <el-row :gutter="20" class="mt10" :style="`height:${rowHeight}`">
            <el-col :span="24">
                <h3 class="mb10 iconBox">
                    <span></span>
                    历史趋势图
                </h3>
                <history :lineId="lineId" ref="historyRef" />
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, provide } from 'vue'
import { ArrowLeft } from '@element-plus/icons-vue'
import { mainHeight } from '@/utils/layout'
import history from './history.vue'
import { color } from '@/components/echarts/color'
import DatePicker from '@/components/form/datePicker/index.vue'
import MyEChart from '@/components/echarts/MyEchart.vue'
import echarts from '@/components/echarts/echarts'
import { useRouter } from 'vue-router'
import { getTimeOfTheMonth } from '@/utils/formatTime'
const router = useRouter()
import { getLineDetailData } from '@/api/advance-boot/bearingCapacity'
import {
    getTotalIntegrityByLineIds,
    getTotalOnlineRates,
    lineQualifiedDetail,
    getLineAssess,
    getEventDetailByLineId,
    getGridDiagramTargetData,
    limitTableDetail
} from '@/api/device-boot/panorama'
import { formatter } from 'element-plus'
const loading=ref(false)
const emit = defineEmits(['back'])
const dropList: any = ref({})
const TargetData: any = ref({})
const evaluationData: any = ref([])
const incidentCharts: any = ref({})
const ComCharts: any = ref({})
const onLineCharts: any = ref({})
const datePickerRef = ref()
const chartRef = ref<HTMLDivElement>()
const historyRef = ref()
const IntegrityNum = ref(0)
const url: any = [
    new URL(`@/assets/img/PLPC.png`, import.meta.url),
    new URL(`@/assets/img/DYPC.png`, import.meta.url),
    new URL(`@/assets/img/JBL.png`, import.meta.url),
    new URL(`@/assets/img/SXDY.png`, import.meta.url),
    new URL(`@/assets/img/SB.png`, import.meta.url)
]
const lineId: any = ref('')
const height = mainHeight(20)
const rowHeight = mainHeight(190, 3).height

// 查询
const open = async (id: string) => {
    let form = {
        comFlag: 1,
        endTime: datePickerRef.value.timeValue[1],
        lineIds: [id],

        ids: [id],
        searchValue: '',
        startTime: datePickerRef.value.timeValue[0]
    }
    lineId.value = id
    const { data } = await getLineDetailData({ id: id })
    dropList.value = data
    // 运行状态

    // 完整性
    getTotalIntegrityByLineIds(form).then((res: any) => {
        let num = (res.data || 0) / 100
        IntegrityNum.value = res.data
        ComCharts.value = {
            title: {
                text: '完整性',
                bottom: '10%',
                left: 'center',
                textStyle: {
                    fontSize: 16
                }
            },
            xAxis: {
                show: false
            },
            yAxis: {
                show: false
            },

            options: {
                dataZoom: null,
                series: [
                    {
                        //第二个球的填充
                        type: 'liquidFill',
                        radius: '65%',
                        center: ['50%', '40%'], //中心点
                        color: [
                            {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 1,
                                        color: '#2aa1e3'
                                    }
                                ],
                                globalCoord: false
                            }
                        ],
                        data: [num, num], // data个数代表波浪数
                        backgroundStyle: {
                            borderWidth: 1,
                            color: '#f7f8fc'
                        },
                        label: {
                            normal: {
                                formatter: () => {
                                    return (num * 100).toFixed(2) + '%'
                                },
                                textStyle: {
                                    fontSize: 20,
                                    color: '#000'
                                }
                            }
                        },
                        outline: {
                            // show: false
                            borderDistance: 0,
                            itemStyle: {
                                borderWidth: 2,
                                borderColor: '#fff'
                            }
                        }
                    }
                ]
            }
        }
        // 稳态指标合格率
    })
    // 在线率
    getTotalOnlineRates({ ...form, id: dropList.value.devId, ids: [dropList.value.devId] }).then((res: any) => {
        let num = (res.data || 0) / 100
        onLineCharts.value = {
            title: {
                text: '在线率',
                bottom: '10%',
                left: 'center',
                textStyle: {
                    fontSize: 16
                }
            },
            xAxis: {
                show: false
            },
            yAxis: {
                show: false
            },

            options: {
                dataZoom: null,
                series: [
                    {
                        //第二个球的填充
                        type: 'liquidFill',
                        radius: '65%',
                        center: ['50%', '40%'], //中心点
                        color: [
                            {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 1,
                                        color: '#67c23a'
                                    }
                                ],
                                globalCoord: false
                            }
                        ],
                        data: [num, num], // data个数代表波浪数
                        backgroundStyle: {
                            color: '#f7f8fc'
                        },
                        label: {
                            normal: {
                                formatter: () => {
                                    return (num * 100).toFixed(2) + '%'
                                },
                                textStyle: {
                                    fontSize: 20,
                                    color: '#000'
                                }
                            }
                        },
                        outline: {
                            // show: false
                            borderDistance: 0,
                            itemStyle: {
                                borderWidth: 2,
                                borderColor: '#fff'
                            }
                        }
                    }
                ]
            }
        }
    })
    loading.value = true
    // 监测点总体评价结论
    limitTableDetail({
        lineId: id,
        monitorIds: [id],
        searchBeginTime: datePickerRef.value.timeValue[0],
        searchEndTime: datePickerRef.value.timeValue[1],
        searchState: 0,
        lineRunFlag: 0
    }).then((res: any) => {
        // dropList.value.assessData = res.data.assessLevel
        evaluationData.value = [
            {
                targetName: '频率偏差',
                avg: res.data.freqData,
                xz: res.data.freqLimit
            },
            {
                targetName: '电压偏差',
                avg: res.data.vdevData,
                xz: res.data.vdevLimit
            },
            {
                targetName: '谐波电流',
                avg: res.data.iharmData,
                xz: res.data.iharmLimit
            },
            {
                targetName: '负序电流',
                avg: res.data.inegData,
                xz: res.data.inegLimit
            },
            {
                targetName: '间谐波电压',
                avg: res.data.inuharmData,
                xz: res.data.inuharmLimit
            },

            {
                targetName: '电压总谐波畸变率',
                avg: res.data.uaberranceData,
                xz: res.data.uaberranceLimit
            },
            {
                targetName: '闪变',
                avg: res.data.flickerData,
                xz: res.data.flickerLimit
            },
            {
                targetName: '谐波电压',
                avg: res.data.uharmData,
                xz: res.data.uharmLimit
            },
            {
                targetName: '三相电压不平衡度',
                avg: res.data.unbalanceData,
                xz: res.data.unbalanceLimit
            }
        ]
         loading.value = false
    })
    // 稳态指标合格率

    lineQualifiedDetail({
        lineId: id,
        startTime: datePickerRef.value.timeValue[0],
        endTime: datePickerRef.value.timeValue[1]
    }).then(res => {
        echart([
            {
                time: datePickerRef.value.timeValue[0].substring(0, 7),
                targetList: [
                    '频率偏差(Hz)',
                    '电压偏差(%)',
                    '电压总谐波畸变率(%)',
                    '三相电压不平衡度(%)',
                    '闪变',
                    '谐波电压(%)',
                    '谐波电流(%)',
                    '间谐波电压(%)',
                    '负序电流(A)'
                ],
                ratioList: [
                    res.data.freqDev == 3.14159 ? null : res.data.freqDev,
                    res.data.vdev == 3.14159 ? null : res.data.vdev,
                    res.data.vthd == 3.14159 ? null : res.data.vthd,
                    res.data.ubalance == 3.14159 ? null : res.data.ubalance,
                    res.data.plt == 3.14159 ? null : res.data.plt,

                    res.data.uharm == 3.14159 ? null : res.data.uharm,
                    res.data.iharm == 3.14159 ? null : res.data.iharm,
                    res.data.inuHarm == 3.14159 ? null : res.data.inuHarm,
                    res.data.ineg == 3.14159 ? null : res.data.ineg
                ]
            }
        ])
    })

    // 暂态事件统计
    getEventDetailByLineId({
        id: id,
        startTime: datePickerRef.value.timeValue[0],
        endTime: datePickerRef.value.timeValue[1],
        type: datePickerRef.value.interval
    }).then((res: any) => {
        let data = [
            {
                name: '电压暂升',
                value: res.data?.swellTimes || 0
            },
            {
                name: '电压暂降',
                value: res.data?.sagTimes || 0
            },
            {
                name: '电压中断',
                value: res.data?.interruptTimes || 0
            }
        ]
        incidentCharts.value = {
            title: {
                text: '总数：' + (data[0].value + data[1].value + data[2].value),
                left: '40%',
                top: '45%',
                textStyle: {
                    // fontWeight: 600,
                    fontSize: 12
                }
                // subtext: '总数',
                // subtextStyle: {
                //     fontWeight: 550,
                //     fontSize: 14
                // }
            },

            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                top: 'center',
                right: '10%',
                formatter: function (e: any) {
                    return e + '   ' + data.filter(item => item.name == e)[0].value + '条'
                }
            },
            xAxis: {
                show: false
            },
            yAxis: {
                show: false
            },
            options: {
                dataZoom: null,
                series: [
                    {
                        type: 'pie',
                        center: ['45%', '50%'],
                        radius: ['60%', '80%'],
                        label: {
                            show: false,
                            position: 'outside',
                            textStyle: {
                                //数值样式
                            }
                        },

                        data: data
                    }
                ]
            }
        }
    })

    // 告警明细
    getGridDiagramTargetData({ ...form, id: id, type: 3 }).then(res => {
        TargetData.value = res.data
        let num = 0
        let flag = 0
        let judgment = true
        for (let k in res.data) {
            if (k != 'lineId') {
                if (res.data[k] != '/') {
                    judgment = false
                }
                flag += res.data[k] == '/' ? 0 : res.data[k]
            }
        }

        if (IntegrityNum.value == 0) {
            num = 2 //完整性告警
        } else {
            if (flag > 0) {
                num = 1 //超标告警
            } else {
                num = 0 //无告警
            }
            if (judgment) {
                num = 3
            }
        }

        TargetData.value.info = num
    })
}
const echart = (row: any) => {
    let chart = echarts.init(chartRef.value as HTMLDivElement)

    let dataname = [
        '频率偏差(Hz)',
        '电压偏差(%)',
        '电压总谐波畸变率(%)',
        '三相电压不平衡度(%)',
        '闪变',
        '谐波电压(%)',
        '谐波电流(%)',
        '间谐波电压(%)',
        '负序电流(A)'
    ]
    let datamax = [100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100]
    let indicator = []
    for (let i = 0; i < dataname.length; i++) {
        indicator.push({
            name: dataname[i],
            max: datamax[i]
        })
    }

    let option: any = {
        tooltip: {
            trigger: 'item',
            axisPointer: {
                type: 'shadow',
                label: {
                    color: '#fff',
                    fontSize: 16
                }
            },
            textStyle: {
                color: '#fff',
                fontStyle: 'normal',
                opacity: 0.35,
                fontSize: 14
            },
            backgroundColor: 'rgba(0,0,0,0.55)',
            borderWidth: 0
        },
        legend: {
            data: row.map((item: any) => item.time),
            type: 'scroll',
            orient: 'vertical',
            icon: 'roundRect',
            right: '20',

            itemGap: 10,
            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
        },
        color: color,
        series: []
    }

    row.forEach((item: any, i: any) => {
        option.series.push({
            name: item.time,
            type: 'radar',
            symbol: 'none',

            areaStyle: {
                opacity: 0.6, // 调整透明度，避免重叠遮挡
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: `${color[i]}50` },
                    { offset: 1, color: `${color[i]}50` } // 渐变透明
                ])
            },
            lineStyle: {
                color: color[i],
                width: 2
            },
            data: [item.ratioList]
        })
    })

    chart.setOption(option)
}
// 跳转
const Integrity = () => {
    router.push({
        name: 'harmonic-boot/harmonic/getIntegrityData',
        query: {
            type: '1',
            name: dropList.value.lineName,
            t: Date.now()
        }
    })
}

const OnlineRate = () => {
    router.push({
        name: 'harmonic-boot/area/OnlineRate',
        query: {
            type: '1',
            name: dropList.value.devName,
            t: Date.now()
        }
    })
}
// 跳转在线监测点
const clickAlarm = (value: any) => {
    router.push({
        name: 'harmonic-boot/monitor/online',
        query: {
            type: value,
            id: lineId.value,
            t: Date.now()
        }
    })
}
// 跳转暂态列表
const clickTransient = () => {
    router.push({
        name: 'Descentsystem/transientList',
        query: {
            type: '1',
            name: dropList.value.lineName,
            t: Date.now()
        }
    })
}
// 跳转台账信息
const clickLinName = () => {
    router.push({
        name: 'Supervision/Terminaldetection',
        query: {
            type: '5',
            name: dropList.value.lineName,
            t: Date.now()
        }
    })
}
onMounted(() => {
    // open('4c87b7dff2281254fc55c25a4da31506')
})
defineExpose({ open })
</script>

<style lang="scss" scoped>
.lineInfo {
    padding: 0 10px 10px 10px;
}

:deep(.el-page-header__header) {
    height: 45px;
    border-bottom: 1px solid #f1eded;
}

:deep(.el-descriptions__header) {
    margin-bottom: 10px;
}

.evaluationData {
    display: grid;
    grid-template-rows: repeat(5, auto);
    height: 87%;

    .row {
        margin: 4px 2% 0;
        width: 100%;
        box-shadow: 1px 1px 1px 1px #e8e3e3;
    }

    img {
        width: 6%;
        margin: 0px 15px;
    }
}

.iconBox {
    display: flex;
    align-items: center;
    span {
        display: inline-block;
        width: 3px;
        height: 18px;
        background: var(--el-color-primary);
        margin-right: 5px;
        margin-left: 3px;
    }
}

.conclusion {
    display: inline-block;
    padding: 2px 5px;
    height: 20px;
    border-radius: 4px;
}

.background1 {
    background-color: #339966;
    color: #fff;
}

.background2 {
    background-color: #97017e;
    color: #fff;
}

.background3 {
    background-color: #a52a2a;
    color: #fff;
}
:deep(.el-table--small .el-table__cell) {
    padding: 2px 0 !important;
}
.text-style {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: var(--el-color-primary);
    text-underline-offset: 4px;
}
</style>
