map/ui/dasadmin/src/views/backend/dashboard.vue

<template>
    <div class="default-main" ref="HomeHight">
        <el-row :gutter="20">
            <el-col :md="24" :lg="6" :span="6">
                <div class="grid-content ep-bg-purple">
                    <!--风场概览-->
                    <div class="overview panelBg">
                        <el-text class="mx-1 homelabel">风场概览</el-text>
                        <el-row :gutter="10">
                            <el-col :md="24" :lg="12" :span="12">
                                <div :sm="24" :lg="6" class="small-panel" style="margin-bottom: 10px">
                                    <img class="small-panel-pic" src="~assets/dashboard/viewP.png" alt="" />
                                    <div class="small-base">
                                        <div>
                                            <span class="content-number">{{ realData.attributeMap.windfarmactivepower }}</span> <span>MW</span>
                                        </div>
                                        <div>功率</div>
                                    </div>
                                </div>
                                <div :sm="24" :lg="6" class="small-panel">
                                    <img class="small-panel-pic" src="~assets/dashboard/viewW.png" alt="" />
                                    <div class="small-base">
                                        <div>
                                            <span class="content-number">{{ realData.attributeMap.windfarmavgwindspeed }}</span> <span>m/s</span>
                                        </div>
                                        <div>风速</div>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :md="24" :lg="12" :span="12">
                                <div :sm="24" :lg="6" class="small-panel" style="margin-bottom: 10px">
                                    <img class="small-panel-pic" src="~assets/dashboard/viewR.png" alt="" />
                                    <div class="small-base">
                                        <div>
                                            <span class="content-number">{{ realData.attributeMap.windfarmdayoperationhours }}</span> <span>H</span>
                                        </div>
                                        <div>日利用小时</div>
                                    </div>
                                </div>
                                <div :sm="24" :lg="6" class="small-panel">
                                    <img class="small-panel-pic" src="~assets/dashboard/viewY.png" alt="" />
                                    <div class="small-base">
                                        <div>
                                            <span class="content-number">{{ realData.attributeMap.windfarmmonthoperationhours }}</span> <span>H</span>
                                        </div>
                                        <div>月利用小时</div>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>

                    <!--今日运行状态-->
                    <div class="status panelBg">
                        <el-text class="mx-1 homelabel" style="margin-bottom: 0">今日运行状态</el-text>
                        <el-row :gutter="10" class="statusrow" style="margin-bottom: 0">
                            <el-col :span="12">
                                <div class="status-panel toal-panel">
                                    <img class="status-panel-pic" src="~assets/dashboard/status1.png" alt="" />
                                    <div class="status-base-main">
                                        <div>
                                            <span class="content-number">{{ currentDayStatus.windTurbineNum }}</span> <span>台</span>
                                        </div>
                                        <div>风机台数</div>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div class="status-panel toal-panel">
                                    <img class="status-panel-pic" src="~assets/dashboard/status2.png" alt="" />
                                    <div class="status-base-main">
                                        <div>
                                            <span class="content-number">{{ currentDayStatus.installedCapacity }}</span> <span>MW</span>
                                        </div>
                                        <div>装机容量</div>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row :gutter="10" class="statusrow">
                            <el-col :span="12">
                                <div class="status-panel status-con">
                                    <div>
                                        <img class="status-panel-piczt" src="~assets/dashboard/status04.png" alt="" />
                                        <p>运行</p>
                                    </div>
                                    <div class="status-base">
                                        <div class="capacity">
                                            <p class="content-number">{{ currentDayStatus.runCapacityTotal }}</p>
                                            <p>MW</p>
                                        </div>
                                        <div class="units">
                                            <p class="content-number">{{ currentDayStatus.runNum }}</p>
                                            <p>台</p>
                                        </div>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div class="status-panel status-con">
                                    <div>
                                        <img class="status-panel-piczt" src="~assets/dashboard/status03.png" alt="" />
                                        <p>启动</p>
                                    </div>
                                    <div class="status-base">
                                        <div class="capacity">
                                            <p class="content-number">{{ currentDayStatus.StartCapacityTotal }}</p>
                                            <p>MW</p>
                                        </div>
                                        <div class="units">
                                            <p class="content-number">{{ currentDayStatus.StarteNum }}</p>
                                            <p>台</p>
                                        </div>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row :gutter="10" class="statusrow">
                            <el-col :span="12">
                                <div class="status-panel status-con">
                                    <div>
                                        <img class="status-panel-piczt" src="~assets/dashboard/status01.png" alt="" />
                                        <p>待机</p>
                                    </div>

                                    <div class="status-base">
                                        <div class="capacity">
                                            <p class="content-number">{{ currentDayStatus.faultCapacityTotal }}</p>
                                            <p>MW</p>
                                        </div>
                                        <div class="units">
                                            <p class="content-number">{{ currentDayStatus.faultNum }}</p>
                                            <p>台</p>
                                        </div>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div class="status-panel status-con">
                                    <div>
                                        <img class="status-panel-piczt" src="~assets/dashboard/status06.png" alt="" />
                                        <p>停机</p>
                                    </div>

                                    <div class="status-base">
                                        <div class="capacity">
                                            <p class="content-number">{{ currentDayStatus.standbyCapacityTotal }}</p>
                                            <p>MW</p>
                                        </div>
                                        <div class="units">
                                            <p class="content-number">{{ currentDayStatus.standbyNum }}</p>
                                            <p>台</p>
                                        </div>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row :gutter="10">
                            <el-col :span="12">
                                <div class="status-panel status-con">
                                    <div>
                                        <img class="status-panel-piczt" src="~assets/dashboard/status02.png" alt="" />
                                        <p>离线</p>
                                    </div>

                                    <div class="status-base">
                                        <div class="capacity">
                                            <p class="content-number">{{ currentDayStatus.offlineCapacityTotal }}</p>
                                            <p>MW</p>
                                        </div>
                                        <div class="units">
                                            <p class="content-number">{{ currentDayStatus.offlineNum }}</p>
                                            <p>台</p>
                                        </div>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div class="status-panel status-con">
                                    <div>
                                        <img class="status-panel-piczt" src="~assets/dashboard/status05.png" alt="" />
                                        <p>维修</p>
                                    </div>

                                    <div class="status-base">
                                        <div class="capacity">
                                            <p class="content-number">{{ currentDayStatus.StandCapacityTotal }}</p>
                                            <p>MW</p>
                                        </div>
                                        <div class="units">
                                            <p class="content-number">{{ currentDayStatus.StandNum }}</p>
                                            <p>台</p>
                                        </div>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>

                    <!--功率趋势-->
                    <div class="power panelBg" style="margin-bottom: 0; padding-bottom: 10px">
                        <div class="cardLabel">功率趋势</div>
                        <div class="chartBox">
                            <div class="power-chart" ref="powerChartRef"></div>
                        </div>
                    </div>
                </div>
            </el-col>

            <el-col :md="24" :lg="12" :span="12" class="col-center">
                <div class="grid-content ep-bg-purple-light">
                    <!--风机矩阵-->
                    <div class="matrix panelBg">
                        <el-text class="mx-1 homelabel">风机矩阵</el-text>
                        <el-scrollbar>
                            <WindContent :parentData="FanList" @StatusListData="StatusListData"></WindContent>
                        </el-scrollbar>
                    </div>
                </div>
            </el-col>
            <el-col :md="24" :lg="6" :span="6">
                <div class="grid-content ep-bg-purple cardContentRight">
                    <!--发电量概况-->
                    <div class="summarize">
                        <div class="cardLabel">发电量概况</div>
                        <div class="summarize-panel-list">
                            <div class="summarize-panel">
                                <div class="summarize-panel-pic">
                                    <img src="~assets/dashboard/fdl1.png" alt="" />
                                </div>
                                <div class="summarize-panel-base">
                                    <div>
                                        <span class="content-number">{{ realData.attributeMap.windfarmdayprodenergy }}</span>
                                    </div>
                                    <div>kWh</div>
                                    <div>日发电量</div>
                                </div>
                            </div>
                            <div class="summarize-panel">
                                <div class="summarize-panel-pic">
                                    <img src="~assets/dashboard/fdl2.png" alt="" />
                                </div>
                                <div class="summarize-panel-base">
                                    <div>
                                        <span class="content-number">{{ realData.attributeMap.windfarmmonthprodenergy }}</span>
                                    </div>
                                    <div>kWh</div>
                                    <div>月发电量</div>
                                </div>
                            </div>
                            <div class="summarize-panel">
                                <div class="summarize-panel-pic">
                                    <img src="~assets/dashboard/fdl3.png" alt="" />
                                </div>
                                <div class="summarize-panel-base">
                                    <div>
                                        <span class="content-number">{{ realData.attributeMap.windfarmyearprodenergy }}</span>
                                    </div>
                                    <div>kWh</div>
                                    <div>年发电量</div>
                                </div>
                            </div>
                            <div class="summarize-panel">
                                <div class="summarize-panel-pic">
                                    <img src="~assets/dashboard/fdl4.png" alt="" />
                                </div>
                                <div class="summarize-panel-base">
                                    <div>
                                        <span class="content-number">{{ realData.attributeMap.windfarmtotalprodenergy }}</span>
                                    </div>
                                    <div>kWh</div>
                                    <div>总发电量</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!--发电量趋势-->
                    <div class="trend panelBg">
                        <el-text class="mx-1 homelabel">发电量趋势</el-text>
                        <el-row :gutter="10">
                            <el-col :span="24">
                                <el-tabs v-model="trendChartType" class="demo-tabs trend-tabs" @tab-click="tabhandleClick" ref="userTab">
                                    <el-tab-pane label="日" name="day"> </el-tab-pane>
                                    <el-tab-pane label="月" name="month"> </el-tab-pane>
                                </el-tabs>
                                <div class="trend-chart" ref="trendChartRef"></div>
                            </el-col>
                        </el-row>
                    </div>

                    <!--实时告警-->
                    <div class="realPart panelBg" style="margin-bottom: 0">
                        <el-text class="mx-1 homelabel">实时告警</el-text>
                        <el-row :gutter="10">
                            <el-col :span="24">
                                <el-table
                                    :data="tableData"
                                    class="tablePart"
                                    height="250"
                                    ref="myTable"
                                    @mouseover.native="clearScroll"
                                    @mouseleave.native="createScroll"
                                >
                                    <el-table-column fixed prop="eventTimeFormate" label="时间" width="80" />
                                    <el-table-column prop="deviceCode" label="风机" width="70" />
                                    <el-table-column prop="eventText" label="告警内容" />
                                    <el-table-column label="操作" width="70">
                                        <template #default="scope">
                                            <div class="tableOperate comfirmed" style="color: #333333" v-if="scope.row.confirmed">已确认</div>
                                            <div class="tableOperate" v-else>
                                                <a style="color: #0277b3; cursor: pointer" @click="open(scope.row)">确认</a>
                                            </div>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts">
import { nextTick, onActivated, onMounted, reactive, ref, onBeforeMount, onUnmounted, VNodeRef } from 'vue'
import * as echarts from 'echarts'
import { useTemplateRefsList, useEventListener } from '@vueuse/core'
import { useI18n } from 'vue-i18n'
import WindContent from '/@/views/backend/home/windMatrix.vue'
import { equipList } from '/@/api/backend/realData/request'
import { getWindFarmRealData, getWindTurbineMatrixData, getHistoryData } from '/@/api/backend/dashboard.ts'
import { dayjs, ElMessage, ElMessageBox, TableInstance } from 'element-plus'
import { getRealTimeState } from '/@/views/backend/equipment/airBlower/utils.ts'
import { useRoute } from 'vue-router'
import { getAlarmListReq, eventComfirm } from '/@/api/backend/alarms/request'
const route = useRoute()

const d = new Date()
const { t } = useI18n()
let timer: any = null
let myTable = ref<TableInstance>()

const realData = ref({
    windFarmId: '',
    attributeMap: {},
})

const formatAttributeValue = (value: any) => {
    if (value === undefined) {
        return '-'
    }
    if (typeof value !== 'number') {
        throw new Error('Invalid data type for attribute value')
    }
    return value % 1 === 0 ? value : value.toFixed(2)
}
const overviewList = () => {
    getWindFarmRealData().then((res) => {
        if (res.code == 200) {
            res.data.attributeMap.windfarmdayprodenergy = formatAttributeValue(res.data.attributeMap.windfarmdayprodenergy)
            res.data.attributeMap.windfarmmonthprodenergy = formatAttributeValue(res.data.attributeMap.windfarmmonthprodenergy)
            res.data.attributeMap.windfarmactivepower = formatAttributeValue(res.data.attributeMap.windfarmactivepower)
            res.data.attributeMap.windfarmavgwindspeed = formatAttributeValue(res.data.attributeMap.windfarmavgwindspeed)
            res.data.attributeMap.windfarmdayoperationhours = formatAttributeValue(res.data.attributeMap.windfarmdayoperationhours)
            res.data.attributeMap.windfarmmonthoperationhours = formatAttributeValue(res.data.attributeMap.windfarmmonthoperationhours)
            res.data.attributeMap.windfarmyearprodenergy = formatAttributeValue(res.data.attributeMap.windfarmyearprodenergy)
            res.data.attributeMap.windfarmtotalprodenergy = formatAttributeValue(res.data.attributeMap.windfarmtotalprodenergy)
            const data: any = {
                windFarmId: res.data.windFarmId,
                attributeMap: {
                    windfarmdayprodenergy: res.data.attributeMap.windfarmdayprodenergy,
                    windfarmmonthprodenergy: res.data.attributeMap.windfarmmonthprodenergy,
                    windfarmactivepower: res.data.attributeMap.windfarmactivepower,
                    windfarmavgwindspeed: res.data.attributeMap.windfarmavgwindspeed,
                    windfarmdayoperationhours: res.data.attributeMap.windfarmdayoperationhours,
                    windfarmmonthoperationhours: res.data.attributeMap.windfarmmonthoperationhours,
                    windfarmyearprodenergy: res.data.attributeMap.windfarmyearprodenergy,
                    windfarmtotalprodenergy: res.data.attributeMap.windfarmtotalprodenergy,
                },
            }

            realData.value = data
        } else {
            ElMessage.error({
                message: res.msg,
                type: 'error',
            })
        }
    })
}
const currentDayStatus = ref({
    windTurbineNum: 0,
    installedCapacity: 0,
    runCapacityTotal: 0,
    runNum: 0,
    standbyCapacityTotal: 0,
    standbyNum: 0,
    faultCapacityTotal: 0,
    faultNum: 0,
    offlineCapacityTotal: 0,
    offlineNum: 0,
    StandCapacityTotal: 0,
    StandNum: 0,
    StartCapacityTotal: 0,
    StarteNum: 0,
})
const deviceCode = ref([])
const FanList = ref([])
const StatusListData = () => {
    getWindTurbineMatrixData().then((res) => {
        if (res.code == 200) {
            currentDayStatus.value.windTurbineNum = res.data.length
            const data = res.data.map((item, index) => {
                const state = getRealTimeState(item.attributeMap)
                item.attributeMap.iwindspeed =
                    item.attributeMap.iwindspeed !== undefined
                        ? item.attributeMap.iwindspeed % 1 === 0
                            ? item.attributeMap.iwindspeed
                            : item.attributeMap.iwindspeed.toFixed(2)
                        : '--'
                item.attributeMap.igenpower =
                    item.attributeMap.igenpower !== undefined
                        ? item.attributeMap.igenpower % 1 === 0
                            ? item.attributeMap.igenpower
                            : item.attributeMap.igenpower.toFixed(2)
                        : '--'
                item.attributeMap.ikwhthisday =
                    item.attributeMap.ikwhthisday !== undefined
                        ? item.attributeMap.ikwhthisday % 1 === 0
                            ? item.attributeMap.ikwhthisday
                            : item.attributeMap.ikwhthisday.toFixed(2)
                        : '--'
                // 初始化计数器和累加器
                if (index === 0) {
                    currentDayStatus.value.runNum = 0
                    currentDayStatus.value.standbyNum = 0
                    currentDayStatus.value.StandNum = 0
                    currentDayStatus.value.StarteNum = 0
                    currentDayStatus.value.offlineNum = 0
                    currentDayStatus.value.faultNum = 0

                    currentDayStatus.value.runCapacityTotal = 0
                    currentDayStatus.value.standbyCapacityTotal = 0
                    currentDayStatus.value.StandCapacityTotal = 0
                    currentDayStatus.value.StartCapacityTotal = 0
                    currentDayStatus.value.offlineCapacityTotal = 0
                    currentDayStatus.value.faultCapacityTotal = 0
                    currentDayStatus.value.installedCapacity = 0
                }

                // 更新容量
                if (item.nominalCapacity !== undefined) {
                    currentDayStatus.value.installedCapacity += item.nominalCapacity
                }

                // 根据运行模式更新状态和数量
                //const mode = item.attributeMap.iturbineoperationmode
                if ([7, 8, 17, 18, 19, 20, 21].includes(state)) {
                    currentDayStatus.value.runCapacityTotal += item.nominalCapacity
                    currentDayStatus.value.runNum += 1
                } else if ([1, 2, 3, 4, 5, 6].includes(state)) {
                    currentDayStatus.value.standbyCapacityTotal += item.nominalCapacity
                    currentDayStatus.value.standbyNum += 1
                } else if ([9, 10, 12, 13, 14, 15].includes(state)) {
                    currentDayStatus.value.StandCapacityTotal += item.nominalCapacity
                    currentDayStatus.value.StandNum += 1
                } else if (state === 16) {
                    currentDayStatus.value.StartCapacityTotal += item.nominalCapacity
                    currentDayStatus.value.StarteNum += 1
                } else if (state === 0) {
                    currentDayStatus.value.offlineCapacityTotal += item.nominalCapacity
                    currentDayStatus.value.offlineNum += 1
                } else if (state === 11) {
                    currentDayStatus.value.faultCapacityTotal += item.nominalCapacity
                    currentDayStatus.value.faultNum += 1
                }
                const propertiesToFormat = [
                    'runCapacityTotal',
                    'standbyCapacityTotal',
                    'StandCapacityTotal',
                    'StartCapacityTotal',
                    'offlineCapacityTotal',
                    'faultCapacityTotal',
                    'installedCapacity',
                ]

                propertiesToFormat.forEach((property) => {
                    if (currentDayStatus.value[property] !== null && currentDayStatus.value[property] !== undefined) {
                        currentDayStatus.value[property] = Number(currentDayStatus.value[property].toFixed(1))
                    }
                })
                return {
                    irn: item.irn,
                    name: item.name ?? '-',
                    model: item.model || '-',
                    modelId: item.modelId,
                    belongLine: item.belongLine || '-',
                    standard: item.standard,
                    attributeMap: {
                        iwindspeed: item.attributeMap.iwindspeed,
                        igenpower: item.attributeMap.igenpower,
                        ikwhthisday: item.attributeMap.ikwhthisday,
                        iturbineoperationmode: state,
                        locked: item.attributeMap.locked,
                    },
                }
            })
            FanList.value = data
        } else {
            ElMessage.error({
                message: res.msg,
                type: 'error',
            })
        }
    })
}

const state: {
    charts: { powerChart: any; trendChart: any }
    remark: string
    workingTimeFormat: string
    pauseWork: boolean
} = reactive({
    charts: { powerChart: null, trendChart: null },
    remark: 'dashboard.Loading',
    workingTimeFormat: '',
    pauseWork: false,
})
const powerChartRef = ref()
const powerChartData: { time: any; values: any } = {
    time: {},
    values: {},
}
const initpowerChart = () => {
    const powerChart = state.charts.powerChart ?? echarts.init(powerChartRef.value as unknown as HTMLElement)
    const option = {
        grid: {
            top: 50,
            right: 25,
            bottom: 10,
            left: 25,
            containLabel: true,
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
            },
        },
        xAxis: {
            type: 'category',
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#dadada',
                    width: 1,
                    type: 'solid',
                },
            },
            axisLabel: {
                //x轴文字的配置
                show: true,
                textStyle: {
                    color: '#4E5969',
                },
                interval: 'auto',
                //rotate: 45
            },
            splitLine: {
                //分割线配置
                show: false,
                lineStyle: {
                    color: '#999999',
                },
            },
            data: powerChartData.time.WindFarmAvgWindSpee ?? powerChartData.time.WindFarmActivePower,
        },
        yAxis: [
            {
                type: 'value',
                name: '功率MW',
                nameTextStyle: {
                    color: '#4E5969',
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#dadada',
                        width: 0,
                        type: 'solid',
                    },
                },
                axisLabel: {
                    //x轴文字的配置
                    show: true,
                    textStyle: {
                        color: '#4E5969',
                    },
                },
                axisTick: { show: false },
                splitLine: {
                    interval: 50,
                    lineStyle: {
                        type: 'dashed',
                        color: '#dadada',
                    },
                },
            },
            {
                type: 'value',
                name: '风速m/s',
                nameTextStyle: {
                    color: '#4E5969',
                    padding: [0, 50, 0, 0],
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#dadada',
                        width: 0,
                        type: 'solid',
                    },
                },
                axisLabel: {
                    //x轴文字的配置
                    show: true,
                    textStyle: {
                        color: '#4E5969',
                    },
                },
                axisTick: { show: false },
                splitLine: {
                    interval: 50,
                    lineStyle: {
                        type: 'dashed',
                        color: '#dadada',
                    },
                },
            },
        ],
        legend: {
            data: ['全场总有功功率', '全场平均风速'],
            textStyle: {
                color: '#73767a',
            },
        },
        series: [
            {
                name: '全场总有功功率',
                type: 'bar',
                //barWidth: 10,
                itemStyle: {
                    color: '#00A7EB',
                    barBorderRadius: 2,
                },
                data: powerChartData.values?.WindFarmActivePower ?? [],
            },
            {
                name: '全场平均风速',
                type: 'line',
                yAxisIndex: 1,
                itemStyle: {
                    color: '#FF7E00',
                    barBorderRadius: 2,
                },
                smooth: 0.6,
                symbol: 'none',
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgba(255,126,0,0.8)',
                        },
                    ]),
                },
                data: powerChartData.values?.WindFarmAvgWindSpeed ?? [],
            },
        ],
    }
    powerChart.setOption(option)
    state.charts.powerChart = powerChart
}

const trendChartRef = ref<VNodeRef>()
const TrendDataForDay: {
    currentPeriod: {
        time: string[]
        value: number[]
    }
    samePeriod: {
        time: string[]
        value: number[]
    }
} = {
    currentPeriod: {
        time: [],
        value: [],
    },
    samePeriod: {
        time: [],
        value: [],
    },
}

const TrendDataForMonth: {
    currentPeriod: {
        time: string[]
        value: number[]
    }
    samePeriod: {
        time: string[]
        value: number[]
    }
} = {
    currentPeriod: {
        time: [],
        value: [],
    },
    samePeriod: {
        time: [],
        value: [],
    },
}

const inittrendChart = (type: 'day' | 'month') => {
    const currentPeriod: number[] = type === 'day' ? TrendDataForDay.currentPeriod.value : TrendDataForMonth.currentPeriod.value
    const samePeriod: number[] = type === 'day' ? TrendDataForDay.samePeriod.value : TrendDataForMonth.samePeriod.value
    const xAxisdata: string[] = type === 'day' ? TrendDataForDay.currentPeriod.time : TrendDataForMonth.currentPeriod.time
    const trendChart = state.charts?.trendChart ?? echarts.init(trendChartRef.value as unknown as HTMLElement)

    const option = {
        grid: {
            top: 30,
            right: 10,
            bottom: 30,
            left: 25,
            borderColor: '#dadada',
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
            },
        },
        xAxis: {
            type: 'category',
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#dadada',
                    width: 1,
                    type: 'solid',
                },
            },
            axisLabel: {
                //x轴文字的配置
                show: true,
                textStyle: {
                    color: '#4E5969',
                },
            },
            splitLine: {
                //分割线配置
                show: false,
                lineStyle: {
                    color: '#999999',
                },
            },
            data: xAxisdata,
        },
        yAxis: [
            {
                type: 'value',
                name: 'kWh',
                nameTextStyle: {
                    color: '#4E5969',
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#dadada',
                        width: 0,
                        type: 'solid',
                    },
                },
                axisLabel: {
                    //x轴文字的配置
                    show: true,
                    textStyle: {
                        color: '#4E5969',
                    },
                },
                axisTick: { show: false },
                splitLine: {
                    interval: 50,
                    lineStyle: {
                        type: 'dashed',
                        color: '#dadada',
                    },
                },
            },
        ],
        legend: {
            data: ['本期', '同期'],
            textStyle: {
                color: '#73767a',
            },
        },
        series: [
            {
                name: '本期',
                data: currentPeriod,
                type: 'bar',
                smooth: true,
                itemStyle: {
                    color: '#0277B3',
                },
            },
            {
                name: '同期',
                data: samePeriod,
                type: 'bar',
                smooth: true,
                itemStyle: {
                    color: '#00A096',
                },
            },
        ],
    }
    trendChart.setOption(option)
    state.charts.trendChart = trendChart
}

const echartsResize = () => {
    nextTick(() => {
        const chartKeys = Object.keys(state.charts) as Array<keyof typeof state.charts>
        chartKeys.forEach((key) => {
            state.charts[key].resize()
        })
    })
}
onActivated(() => {
    echartsResize()
})
const timestampToTime = (timestamp: any) => {
    timestamp = timestamp ? timestamp : null
    let date = new Date(timestamp)
    let Y = date.getFullYear() + '-'
    let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
    let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
    let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
    let m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
    return Y + M + D + h + m
}
const tableData = ref()

const getTableData = (deviceCode) => {
    const today = new Date()
    const threeDaysAgo = new Date(today)
    threeDaysAgo.setDate(today.getDate() - 3)
    const startTime = threeDaysAgo.getTime()
    const data: any = {
        startTime: startTime,
        endTime: Date.now(),
        deviceCode: deviceCode,
        limit: 100,
    }
    console.log(JSON.stringify(data))
    getAlarmListReq(data).then((res) => {
        if (res.code == 200) {
            //tableData.value = res.rows
            tableData.value = res.rows.map((item: any) => {
                return {
                    ...item,
                    eventTimeFormate: timestampToTime(item.eventTime),
                }
            })
        } else {
            ElMessage.error(res.msg ?? '查询失败')
        }
    })
}
const open = (val: any) => {
    ElMessageBox.confirm('是否确认?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(() => {
            okSubmit(val)
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消确认',
            })
        })
}

const okSubmit = (val: any) => {
    const reqData: any = [
        {
            eventTime: val.eventTime,
            eventId: val.eventId,
            confirmed: 1,
            deviceId: val.deviceId,
        },
    ]
    eventComfirm(reqData)
        .then((res: any) => {
            if (res.code == 200) {
                ElMessage.success(res.msg ?? '确认成功')
                getTableData(deviceCode.value)
            } else {
                ElMessage.error(res.msg ?? '查询失败')
            }
        })
        .catch((err) => {
            ElMessage.error(err?.response?.data?.msg ?? '查询失败')
        })
}

const clearScroll = () => {
    clearInterval(timer)
    timer = null
}
const createScroll = () => {
    clearScroll()
    const table = myTable.value.layout.table.refs
    const tableWrapper = table.bodyWrapper.firstElementChild.firstElementChild

    timer = setInterval(() => {
        tableWrapper.scrollTop += 1
        if (tableWrapper.clientHeight + tableWrapper.scrollTop == tableWrapper.scrollHeight) {
            tableWrapper.scrollTop = 0
        }
    }, 30)
}

const getChartData = <T extends string = any>(params: {
    startTime: number
    endTime: number
    attr: T[]
    interval: string
}): Promise<{ times: { [K in T]: string[] }; val: { [K in T]: number[] } }> => {
    return new Promise((resolve) => {
        const data = {
            startTime: params.startTime,
            endTime: params.endTime,
            devices: [
                {
                    deviceId: '',
                    attributes: params.attr,
                },
            ],
            interval: params.interval,
        }
        /* console.log(JSON.stringify(data))*/
        getHistoryData(data).then((res) => {
            if (res.success) {
                if (typeof res.data === 'object' && res.data !== null && Object.keys(res.data).length === 0) {
                    const times: any = {}
                    const val: any = {}
                    resolve({ times, val })
                } else {
                    const data = res.data['1848624295633317890']
                    const rangeKeys = Object.keys(data)
                    const times: any = {}
                    const val: any = {}
                    rangeKeys.forEach((key) => {
                        times[key] = []
                        val[key] = []
                        data[key].times.forEach((item: number) => {
                            if (params.interval == '5m') {
                                times[key].push(dayjs(item).format('HH:mm'))
                            } else if (params.interval == '1d') {
                                times[key].push(dayjs(item).format('DD'))
                            } else if (params.interval == '1n') {
                                times[key].push(dayjs(item).format('MM'))
                            }
                        })
                        data[key].values.forEach((item: number) => {
                            val[key].push(item)
                        })
                    })
                    resolve({ times, val })
                }
            }
        })
    })
}
const getThisDayChartData = () => {
    return new Promise((resolve) => {
        getChartData<'WindFarmActivePower' | 'WindFarmAvgWindSpeed '>({
            startTime: new Date(new Date().toLocaleDateString()).getTime(),
            endTime: Date.now(),
            attr: ['WindFarmActivePower', 'WindFarmAvgWindSpeed '],
            interval: '5m',
        }).then(({ times, val }) => {
            powerChartData.time = { WindFarmActivePower: times.WindFarmActivePower, WindFarmAvgWindSpeed: times.WindFarmAvgWindSpeed }
            powerChartData.values = { WindFarmActivePower: val.WindFarmActivePower, WindFarmAvgWindSpeed: val.WindFarmAvgWindSpeed }
            resolve(true)
        })
    })
}
const getLastYearTodayTimestamp = () => {
    const now = new Date()
    const lastYear = now.getFullYear() - 1
    const lastYearToday = new Date(lastYear, now.getMonth(), now.getDate())
    return lastYearToday.getTime()
}
const getLastYearChartData = () => {
    return new Promise((resolve) => {
        const start = getLastYearTodayTimestamp()
        const end = new Date()
        end.setFullYear(end.getFullYear() - 1)
        end.setMonth(end.getMonth() + 1, 0) // 设置为下个月的第一天，然后减去一天

        getChartData<'WindFarmDayProdEnergy'>({
            startTime: start,
            endTime: end.getTime(),
            attr: ['WindFarmDayProdEnergy'],
            interval: '1d',
        }).then(({ times, val }) => {
            TrendDataForDay.samePeriod.time = times.WindFarmDayProdEnergy
            TrendDataForDay.samePeriod.value = val.WindFarmDayProdEnergy
            resolve(true)
        })
    })
}

const getThisDayChartForHourData = () => {
    return new Promise((resolve) => {
        getChartData<'WindFarmDayProdEnergy'>({
            startTime: new Date(new Date().toLocaleDateString()).getTime(),
            endTime: Date.now(),
            attr: ['WindFarmDayProdEnergy'],
            interval: '1d',
        }).then(({ times, val }) => {
            TrendDataForDay.currentPeriod.time = times.WindFarmDayProdEnergy
            TrendDataForDay.currentPeriod.value = val.WindFarmDayProdEnergy
            resolve(true)
        })
    })
}
//发电连月
const getLastMonthTodayTimestamp = () => {
    const now = new Date() // 当前日期
    const thisYear = now.getFullYear() // 获取当前年份
    const lastYear = thisYear - 1 // 计算去年年份
    const firstDayOfLastYear = new Date(lastYear, 0, 1) // 设置为去年的一月一日
    return firstDayOfLastYear.getTime()
}
const getThisMonthTodayTimestamp = () => {
    const now = new Date() // 当前日期
    const thisYear = now.getFullYear() // 获取当前年份
    const firstDayOfYear = new Date(thisYear, 0, 1) // 设置为今年的一月一日
    return firstDayOfYear.getTime()
}
const getLastYear = () => {
    const now = new Date() // 当前日期
    const thisYear = now.getFullYear() // 获取当前年份
    const lastYear = thisYear - 1 // 计算去年年份
    const lastDayOfLastYear = new Date(lastYear, 11, 0) // 设置为去年12月的最后一天
    return lastDayOfLastYear.getTime()
}
const getLastMonthChartData = () => {
    return new Promise((resolve) => {
        const start = getLastMonthTodayTimestamp()
        const end = getLastYear()
        getChartData<'WIndFarmMonthProdEnergy'>({
            startTime: start,
            endTime: end,
            attr: ['WIndFarmMonthProdEnergy'],
            interval: '1n',
        }).then(({ times, val }) => {
            TrendDataForMonth.samePeriod.time = times.WIndFarmMonthProdEnergy
            TrendDataForMonth.samePeriod.value = val.WIndFarmMonthProdEnergy
            resolve(true)
        })
    })
}

const getThisMonthChartForHourData = () => {
    return new Promise((resolve) => {
        const start = getThisMonthTodayTimestamp()
        getChartData<'WIndFarmMonthProdEnergy'>({
            startTime: start,
            endTime: Date.now(),
            attr: ['WIndFarmMonthProdEnergy'],
            interval: '1n',
        }).then(({ times, val }) => {
            TrendDataForMonth.currentPeriod.time = times.WIndFarmMonthProdEnergy
            TrendDataForMonth.currentPeriod.value = val.WIndFarmMonthProdEnergy
            resolve(true)
        })
    })
}

const getAllChartData = (type: ('power' | 'trend')[] = ['power', 'trend']) => {
    if (type.includes('power')) {
        getThisDayChartData().then(() => {
            initpowerChart()
        })
    }
    if (type.includes('trend')) {
        const trendDataForLastYear = getLastYearChartData()
        const trendDataForThisDay = getThisDayChartForHourData()
        const trendDataForLastMonth = getLastMonthChartData()
        const trendDataForThisMonth = getThisMonthChartForHourData()
        Promise.all([trendDataForLastYear, trendDataForThisDay, trendDataForLastMonth, trendDataForThisMonth]).then(() => {
            inittrendChart(trendChartType.value)
        })
    }
}

const trendChartType = ref<'day' | 'month'>('day')
const tabhandleClick = () => {
    state.charts.trendChart.clear()
    nextTick(() => {
        inittrendChart(trendChartType.value)
    })
}
const activeName = ref('first')
//let autoUpdateTimer: any = null
let autoUpdateForSecondTimer: any = null
let autoUpdateTimerForMinuteTimer: any = null
let autoUpdateTimerForHourTimer: any = null
const autoUpdate = () => {
    if (!autoUpdateForSecondTimer) {
        autoUpdateForSecondTimer = setInterval(() => {
            StatusListData()
            overviewList()
        }, 2000)
    }
    if (!autoUpdateTimerForMinuteTimer) {
        autoUpdateTimerForMinuteTimer = setInterval(() => {
            getAllChartData(['power'])
            //initpowerChart()
        }, 60000)
    }
    if (!autoUpdateTimerForHourTimer) {
        autoUpdateTimerForHourTimer = setInterval(() => {
            getAllChartData(['trend'])
            //inittrendChart(trendChartType.value)
        }, 60000 * 30)
    }
}
const HomeHight = ref()
const computedHeight = reactive({
    powerHeight: '298px',
    centerHeight: '1100px',
    alarmHeight: '350px',
})
const sizeChange = () => {
    const rect = HomeHight.value?.getBoundingClientRect()
    if (!rect) return
    computedHeight.powerHeight = rect.height - 636 + 'px'
    computedHeight.alarmHeight = rect.height - 580 + 'px'
    computedHeight.centerHeight = rect.height - 0 + 'px'
    if (window.screen.width < 1360) {
        computedHeight.alarmHeight = '200px'
        computedHeight.powerHeight = '200px'
    }
}

onMounted(() => {
    window.addEventListener('resize', sizeChange)
    sizeChange()
    getAllChartData()
    createScroll()
    overviewList()
    StatusListData()
    autoUpdate()

    equipList({ objectType: 10002 }).then((res) => {
        res.data.map((item: any) => {
            deviceCode.value.push(item.name)
        })

        getTableData(deviceCode.value)
    })
    useEventListener(window, 'resize', echartsResize)
})

onUnmounted(() => {
    window.removeEventListener('resize', sizeChange)
    clearInterval(timer)
    autoUpdateForSecondTimer && clearInterval(autoUpdateForSecondTimer)
    const chartKeys = Object.keys(state.charts) as Array<keyof typeof state.charts>
    chartKeys.forEach((key) => {
        state.charts[key].dispose()
    })
})
</script>

<style scoped lang="scss">
$marginNum: 10px;
$labelHeight: 38px;
@mixin cardDefaultStyle {
    margin-top: $marginNum;
    margin-bottom: $marginNum;
    padding: 10px;
    border-radius: 10px;
    background-color: #fff;
}
@mixin cardlabel {
    .cardLabel {
        width: 100%;
        height: $labelHeight;
        font-size: 18px;
        line-height: 18px;
        font-weight: 600;
        color: #4e5969;
        line-height: 38px;
        padding-left: 10px;
    }
}
.default-main {
    width: 100%;
    // height: 100%;
    // min-height: 920px;
    padding: 0;
    margin: 0;
    color: #4e5969;
    background-color: #f2f3f5;
    overflow: hidden;
    .content-number {
        color: #333333;
        font-size: 20px;
    }
    .homelabel {
        font-family: PingFangSC-Semibold;
        font-size: 18px;
        color: #4e5969;
        letter-spacing: 0;
        line-height: 18px;
        font-weight: 600;
        margin-bottom: 20px;
        display: block;
    }
    .grid-content {
        /* overflow-x: hidden;*/
        width: 100%;
        height: 100%;
        .panelBg {
            background-color: #ffffff;
            padding: 20px;
            border-radius: 5px;
            margin-bottom: 20px;
        }
        .overview {
            /* @include cardDefaultStyle;
            @include cardlabel;*/
            min-height: 216px;
            .small-panel {
                display: flex;
                border: 1px solid #e1edf6;
                border-radius: 10px;
                padding: 10px;
                .small-panel-pic {
                    width: 36px;
                    height: 36px;
                }
                .small-base {
                    word-break: keep-all;
                    margin-left: 10px;
                    color: #2c3f5d;
                }
            }
        }
        .status {
            /* @include cardDefaultStyle;
            @include cardlabel;*/
            min-height: 374px;
            .statusrow {
                margin-bottom: 10px;
            }
            .status-con {
                padding-left: 20px !important;
                background: #f0f6ff;
                border-radius: 10px;
            }
            .status-panel {
                display: flex;
                padding: 10px;
                font-size: 12px;
                .status-panel-pic {
                    width: 60px;
                    height: 60px;
                }
                .status-base-main {
                    word-break: keep-all;
                    margin-left: 10px;
                    line-height: 23px;
                    padding-top: 6px;
                }
                .status-base {
                    margin-left: 10px;
                    line-height: 23px;
                    padding: 6px 10px 0 10px;
                    display: flex;
                    justify-content: space-between;
                    width: 100%;
                }
                .status-panel-piczt {
                    width: 24px;
                    height: 24px;
                }
            }
        }
        .power {
            @include cardDefaultStyle;
            @include cardlabel;
            width: 100%;
            min-height: 298px;
            height: v-bind('computedHeight.powerHeight');
            .chartBox {
                height: calc(100% - $labelHeight);
                .power-chart {
                    width: 100%;
                    height: 100%;
                }
            }
        }
        .matrix {
            /* @include cardDefaultStyle;
            @include cardlabel;*/
            background: url('/@/assets/dashboard/bg1.png') no-repeat #ffffff;
            background-size: 100% 100%;
            min-height: 900px;
            width: 100%;
            height: v-bind('computedHeight.centerHeight');
            margin-bottom: 0;
        }
        .summarize {
            padding: 10px;
            border-radius: 10px;
            background-color: #fff;
            margin-bottom: 20px;
            word-break: keep-all;
            /*@include cardDefaultStyle;*/
            @include cardlabel;
            min-height: 224px;
            .summarize-panel-list {
                width: 100%;
                display: flex;
                justify-content: space-between;
            }
            .summarize-panel {
                margin: 5px;
                width: 25%;
                display: flex;
                padding: 20px 0;
                flex-direction: column;
                align-items: center;
                background-color: #f0f6ff;
                border-radius: 10px;
                .summarize-panel-base {
                    width: 100%;
                    flex-direction: column;
                    align-items: center;
                    div {
                        display: flex;
                        justify-content: center;
                        font-size: 14px;
                        color: rgb(78, 89, 105);
                        .content-number {
                            color: #333333;
                            font-size: 20px;
                        }
                    }
                }
            }
        }
        .cardContentRight {
            width: 100%;
            height: 100%;
        }

        .trend {
            /* @include cardDefaultStyle;
            @include cardlabel;*/
            min-height: 300px;
            height: 335px;
            overflow: hidden;
            .trend-tabs {
                :deep(.el-tabs__item) {
                    border: none;
                    text-align: center;
                    width: 40px;
                    padding: 0;
                    line-height: 24px;
                    height: 24px;
                }
                :deep(.el-tabs__header .el-tabs__nav) {
                    border-radius: 0;
                    border: none;
                }
                :deep(.el-tabs__header) {
                    border-bottom: 0;
                    float: right;
                    margin-top: -43px;
                }
                :deep(.el-tabs__content) {
                    clear: both;
                }
                :deep(.el-tabs__item.is-active) {
                    background: rgba(2, 119, 179, 0.2);
                    border-radius: 4px;
                    border: none;
                }
                :deep(.el-tabs__nav-wrap:after) {
                    background: none;
                }
                :deep(.el-tabs__active-bar) {
                    background: none;
                }
            }
            .trend-chart {
                width: 100%;
                height: 260px;
            }
        }
        .realPart {
            /* @include cardDefaultStyle;
            @include cardlabel;*/
            /*height: 370px;*/
            min-height: 350px;
            height: v-bind('computedHeight.alarmHeight');
        }
    }
}

@media screen and (max-width: 1920px) {
    .default-main {
        .trend {
            height: 315px !important;
        }
    }
}
@media screen and (max-width: 1280px) {
    .default-main {
        overflow: none;
        .summarize {
            .summarize-panel {
                margin: 2px !important;
            }
        }
    }
}
@media screen and (max-width: 1360px) {
    .default-main {
        .overview {
            .small-panel {
                .small-base {
                    margin-left: 0px !important;
                }
            }
        }
    }
}
@media screen and (max-width: 1480px) {
    .default-main {
        font-size: 12px !important;
        .overview {
            .small-panel {
                padding: 13px 0px !important;
            }
        }
        .status {
            .status-panel {
                .status-base-main {
                    margin-left: 5px !important;
                }
            }
        }
    }
}
@media screen and (max-width: 1680px) {
    .default-main {
        /*font-size: 12px !important;*/
        .content-number {
            font-size: 16px !important;
        }

        .homelabel {
            font-size: 16px !important;
            margin-bottom: 10px !important;
        }
        .grid-content {
            .panelBg {
                /* padding: 10px !important;*/
                margin-bottom: 10px !important;
            }
            .summarize {
                margin-bottom: 10px !important;
            }
        }
        .toal-panel {
            padding: 0 !important;
            padding-bottom: 10px !important;
        }
        .col-center {
            padding: 0 !important;
        }
        .matrix {
            height: 908px !important;
        }
        :deep(.el-tabs__header) {
            margin-top: -33px !important;
        }
        .overview {
            .small-panel {
                .small-base {
                    margin-left: 5px !important;
                }
            }
        }
    }
}
</style>