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

<template>
    <div class="default-main">
        <el-row :gutter="20">
            <el-col :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 :span="12">
                                <div :sm="12" :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="12" :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 :span="12">
                                <div :sm="12" :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="12" :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">
                            <el-col :span="12">
                                <div class="status-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">
                                    <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;">
                        <el-text class="mx-1 homelabel">功率趋势</el-text>
                        <el-row :gutter="10">
                            <el-col class="lg-mb-20" :span="24">
                                <div class="power-chart" ref="powerChartRef"></div>
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </el-col>


            <el-col :span="12">
                <div class="grid-content ep-bg-purple-light">
                    <!--风机矩阵-->
                    <div class="matrix panelBg">
                        <el-text class="mx-1 homelabel">风机矩阵</el-text>
                        <WindContent :parentData="FanList" @StatusListData="StatusListData"></WindContent>
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content ep-bg-purple">
                    <!--发电量概况-->
                    <div class="summarize panelBg">
                        <div class="summarize-title">
                            <el-text class="mx-1 homelabel">发电量概况</el-text>
<!--                            <el-text class="mx-1" style="margin-bottom: 20px;">
                                当日发电量
                                <span class="content-number" style="color: #0277B3;">{{realData.attributeMap.windfarmdayprodenergy}}</span>
                                kWh
                            </el-text>-->
                        </div>
                        <el-row :gutter="5">
                            <el-col :span="6">
                                <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><span>kWh</span></div>
                                        <div><span>日发电量</span></div>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <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><span>万kWh</span></div>
                                        <div><span>月发电量</span></div>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <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><span>万kWh</span></div>
                                        <div><span>年发电量</span></div>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <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><span>万kWh</span></div>
                                        <div><span>总发电量</span></div>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </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="trend 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="time" label="时间" />
                                    <el-table-column prop="name" label="风机" />
                                    <el-table-column prop="alertcontent" label="告警内容" />
                                    <el-table-column label="操作">
                                        <template #default="scope">
                                            <a @click="">确认</a>
                                        </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 {getWindFarmRealData,getWindTurbineMatrixData,getRealValueRangeReq} from "/@/api/backend/dashboard.ts";
import {dayjs, ElMessage, TableInstance} from "element-plus";
import { getRealTimeState } from '/@/views/backend/equipment/airBlower/utils.ts'
import {useRoute} from "vue-router";
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 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(0));
                    }
                });
                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,
                        }
                }
            });
            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 powerChartData = {
    time: {
        iGenPower:['00:00','00:05','00:10','00:15'],
        iTheoreticalPower:['00:00','00:05','00:10','00:15'],
        iWindSpeed:['00:00','00:05','00:10','00:15']
    },
    values: {
        iGenPower:[0,5,2,7],
        iTheoreticalPower:[0,0,0,0],
        iWindSpeed:[3,8,9,1]
    },
}
const initpowerChart = () => {
    const powerChart = state.charts.powerChart ?? echarts.init(powerChartRef.value as unknown as HTMLElement)
    const option = {
        grid: {
            top: 50,
            right: 23,
            bottom: 10,
            left: 18,
            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.iTheoreticalPower,
        },
        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',
                },
                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: 20,
                itemStyle: {
                    color: '#00A7EB',
                    barBorderRadius: 2
                },
                data: powerChartData.values?.iGenPower ?? [],
            },
            {
                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?.iWindSpeed ?? [],
            },
        ],
    }
    powerChart.setOption(option)
    state.charts.powerChart = powerChart
}



const trendChartRef = ref<VNodeRef>()
const TrendDataForDay = [
    {
        currentPeriod: 86.3,
        samePeriod: 63.5,
        generationTime: '2024-10-01',
    },
    {
        currentPeriod: 86.3,
        samePeriod: 53.5,
        generationTime: '2024-10-02',
    },
    {
        currentPeriod: 86.3,
        samePeriod: 43.5,
        generationTime: '2024-10-03',
    },
]
const TrendDataForMonth = [
    {
        currentPeriod: 26.3,
        samePeriod: 53.5,
        generationTime: '2024-10-01',
    },
    {
        currentPeriod: 36.3,
        samePeriod: 53.5,
        generationTime: '2024-10-02',
    },
    {
        currentPeriod: 46.3,
        samePeriod: 53.5,
        generationTime: '2024-10-03',
    },
]

const inittrendChart = (type: 'day' | 'month') => {
    const currentPeriod: any =
        type === 'day' ? TrendDataForDay.map((item) => item.currentPeriod) : TrendDataForMonth.map((item) => item.currentPeriod)
    const samePeriod: any = type === 'day' ? TrendDataForDay.map((item) => item.samePeriod) : TrendDataForMonth.map((item) => item.samePeriod)
    const xAxisdata: any = type === 'day' ? TrendDataForDay.map((item) => item.generationTime) : TrendDataForMonth.map((item) => item.generationTime)
    const trendChart = state.charts?.trendChart ?? echarts.init(trendChartRef.value as unknown as HTMLElement)

    const option = {
        grid: {
            top: 30,
            right: 10,
            bottom: 20,
            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 tableData = ref([
    {
        time: '2016-05-03',
        name: 'SC-01',
        alertcontent: '故障',
    },
    {
        time: '2016-05-02',
        name: 'SC-02',
        alertcontent: '待机',
    },
    {
        time: '2016-05-04',
        name: 'SC-03',
        alertcontent: '停机',
    },
    {
        time: '2016-05-01',
        name: 'SC-04',
        alertcontent: '变桨叶1伺服驱动器故障',
    },
    {
        time: '2016-05-03',
        name: 'SC-01',
        alertcontent: '故障',
    },
    {
        time: '2016-05-02',
        name: 'SC-02',
        alertcontent: '待机',
    },
    {
        time: '2016-05-04',
        name: 'SC-03',
        alertcontent: '停机',
    },
    {
        time: '2016-05-01',
        name: 'SC-04',
        alertcontent: '变桨叶1伺服驱动器故障',
    }
])


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 = () => {
    powerChartData.time = {
        iGenPower:['00:00','00:05','00:10','00:15'],
        iTheoreticalPowe:['00:00','00:05','00:10','00:15'],
        iWindSpeed:['00:00','00:05','00:10','00:15']
    }
    powerChartData.values = {
        iGenPower:[0,5,2,7],
        iTheoreticalPowe:[0,0,0,0],
        iWindSpeed:[3,8,9,1]
    }
    /*return new Promise((resolve) => {
        const data = {
            startTime: new Date(new Date().toLocaleDateString()).getTime(),
            endTime: Date.now(),
            devices: [
                {
                    //deviceId: route.query.irn as string,
                    deviceId: '1846101273013739522',
                    attributes: ['iGenPower', 'iTheoreticalPower', 'iWindSpeed'],
                },
            ],
            interval: '5m',
        }
        getRealValueRangeReq(data).then((res) => {
            console.log(res)
            if (res.success) {
                //const data = res.data[route.query.irn as string]
                const data = res.data['1846101273013739522']
                const rangeKeys = Object.keys(data)
                const times: any = {}
                const val: any = {}
                rangeKeys.forEach((key) => {
                    times[key] = []
                    val[key] = []
                    data[key].times.forEach((item: number, index: number) => {
                        times[key].push(dayjs(item).format('HH:mm'))
                    })
                    data[key].values.forEach((item: number) => {
                        val[key].push(item)
                    })
                })
                powerChartData.time = times
                powerChartData.values = val
                resolve(true)
            }
        })
    })*/
}

const trendChartType = ref<'day' | 'month'>('day')
const tabhandleClick = () => {
    state.charts.trendChart.clear()
    nextTick(() => {
        inittrendChart(trendChartType.value)
    })
}
onMounted(() => {

   /* getChartData().then(() => {
        initpowerChart()
    })*/
    inittrendChart(trendChartType.value)
    initpowerChart()
    createScroll()
    overviewList()
    StatusListData()
    autoUpdate()
    useEventListener(window, 'resize', echartsResize)
})
/*onBeforeMount(() => {
    for (const key in state.charts) {
        state.charts[key].dispose()
    }
})*/
const activeName = ref('first')
let autoUpdateTimer: any = null
const autoUpdate = () => {
    if (!autoUpdateTimer) {
        autoUpdateTimer = setInterval(() => {
            StatusListData()
        }, 2000)
    }
}

onUnmounted(() => {
    clearInterval(timer)
    autoUpdateTimer && clearInterval(autoUpdateTimer)
    const chartKeys = Object.keys(state.charts) as Array<keyof typeof state.charts>
    chartKeys.forEach((key) => {
        state.charts[key].dispose()
    })
});





</script>

<style scoped lang="scss">
.default-main {
    padding: 0;
    margin: 0;
    color: #4E5969;
    background-color: #F2F3F5;
    .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{
        height: 100%;
        .panelBg{
            background-color: #ffffff;
            padding: 20px;
            border-radius: 5px;
            margin-bottom: 20px;
        }
        .overview{
            .small-panel{
                display: flex;
                border: 1px solid #E1EDF6;
                border-radius: 10px;
                padding: 10px;
                .small-panel-pic{
                    width: 36px;
                    height: 36px;
                }
                .small-base{
                    margin-left: 10px;
                    color: #2c3f5d;
                }
            }
        }
        .status{
            .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{
                    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{
            .power-chart{
                width: 100%;
                height: 250px;
            }
        }
        .matrix{
            background: url("/@/assets/dashboard/bg1.png") no-repeat #ffffff;
            background-size: 100% 100%;
            height: 100%;
        }
        .summarize{
            .summarize-title{
                display: flex;
                justify-content: space-between;
            }
            .summarize-panel{
                background: #F0F6FF;
                border-radius: 10px;
                margin: 5px;
                padding: 10px;
                .summarize-panel-pic{
                    text-align: center;
                }
                .summarize-panel-base{
                    text-align: center;
                }

            }

        }
        .trend{
            height: 350px;
            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.20);
                    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;
            }
        }

    }


}
</style>