From 3946db15ba5337cae915d94454b76dd1ca55547b Mon Sep 17 00:00:00 2001
From: fengrong <Hi84805353>
Date: Thu, 31 Oct 2024 16:49:12 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E5=8F=96=E6=B6=88=E5=BD=93?=
 =?UTF-8?q?=E6=97=A5=E5=8F=91=E7=94=B5=E9=87=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/dasadmin/src/views/backend/dashboard.vue | 663 +++++++++++---------
 1 file changed, 367 insertions(+), 296 deletions(-)

diff --git a/ui/dasadmin/src/views/backend/dashboard.vue b/ui/dasadmin/src/views/backend/dashboard.vue
index a97c5829..01538753 100644
--- a/ui/dasadmin/src/views/backend/dashboard.vue
+++ b/ui/dasadmin/src/views/backend/dashboard.vue
@@ -190,7 +190,7 @@
                         <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="chartRefs.set"></div>
+                                <div class="power-chart" ref="powerChartRef"></div>
                             </el-col>
                         </el-row>
                     </div>
@@ -213,11 +213,11 @@
                     <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;">
+<!--                            <el-text class="mx-1" style="margin-bottom: 20px;">
                                 当日发电量
                                 <span class="content-number" style="color: #0277B3;">{{realData.attributeMap.windfarmdayprodenergy}}</span>
                                 kWh
-                            </el-text>
+                            </el-text>-->
                         </div>
                         <el-row :gutter="5">
                             <el-col :span="6">
@@ -276,14 +276,11 @@
                         <el-text class="mx-1 homelabel">发电量趋势</el-text>
                         <el-row :gutter="10">
                             <el-col :span="24">
-                                <el-tabs v-model="activeName" class="demo-tabs trend-tabs" @tab-click="tabhandleClick" ref="userTab">
-                                    <el-tab-pane label="日" name="first">
-                                        <div class="trend-chart" :ref="chartRefs.set"></div>
-                                    </el-tab-pane>
-                                    <el-tab-pane label="月" name="second">
-                                        <div class="trend-chart" :ref="chartRefs.set"></div>
-                                    </el-tab-pane>
+                                <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>
@@ -318,38 +315,50 @@
 </template>
 
 <script setup lang="ts">
-import {nextTick, onActivated, onMounted, reactive, ref, onBeforeMount, onUnmounted} from "vue";
+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} from "/@/api/backend/dashboard.ts";
-import {ElMessage} from "element-plus";
+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 = null
-let myTable = ref(null)
+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= res.data.attributeMap.windfarmdayprodenergy !== undefined ? ( res.data.attributeMap.windfarmdayprodenergy % 1 === 0 ?  res.data.attributeMap.windfarmdayprodenergy :  res.data.attributeMap.windfarmdayprodenergy.toFixed(2)) : '-'
-            res.data.attributeMap.windfarmmonthprodenergy=res.data.attributeMap.windfarmmonthprodenergy !== undefined ? ( res.data.attributeMap.windfarmmonthprodenergy % 1 === 0 ?  res.data.attributeMap.windfarmmonthprodenergy :  res.data.attributeMap.windfarmmonthprodenergy.toFixed(2)) : '-'
-            res.data.attributeMap.windfarmactivepower= res.data.attributeMap.windfarmactivepower !== undefined ? ( res.data.attributeMap.windfarmactivepower % 1 === 0 ?  res.data.attributeMap.windfarmactivepower :  res.data.attributeMap.windfarmactivepower.toFixed(2)) : '-'
-            res.data.attributeMap.windfarmavgwindspeed=res.data.attributeMap.windfarmavgwindspeed !== undefined ? ( res.data.attributeMap.windfarmavgwindspeed % 1 === 0 ?  res.data.attributeMap.windfarmavgwindspeed :  res.data.attributeMap.windfarmavgwindspeed.toFixed(2)) : '-'
-            res.data.attributeMap.windfarmdayoperationhours=res.data.attributeMap.windfarmdayoperationhours !== undefined ? ( res.data.attributeMap.windfarmdayoperationhours % 1 === 0 ?  res.data.attributeMap.windfarmdayoperationhours :  res.data.attributeMap.windfarmdayoperationhours.toFixed(2)) : '-'
-            res.data.attributeMap.windfarmmonthoperationhours=res.data.attributeMap.windfarmmonthoperationhours !== undefined ? ( res.data.attributeMap.windfarmmonthoperationhours % 1 === 0 ?  res.data.attributeMap.windfarmmonthoperationhours :  res.data.attributeMap.windfarmmonthoperationhours.toFixed(2)) : '-'
-            res.data.attributeMap.windfarmyearprodenergy=res.data.attributeMap.windfarmyearprodenergy !== undefined ? ( res.data.attributeMap.windfarmyearprodenergy % 1 === 0 ?  res.data.attributeMap.windfarmyearprodenergy :  res.data.attributeMap.windfarmyearprodenergy.toFixed(2)) : '-'
-            res.data.attributeMap.windfarmtotalprodenergy=res.data.attributeMap.windfarmtotalprodenergy !== undefined ? ( res.data.attributeMap.windfarmtotalprodenergy % 1 === 0 ?  res.data.attributeMap.windfarmtotalprodenergy :  res.data.attributeMap.windfarmtotalprodenergy.toFixed(2)) : '-'
+            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: {
@@ -400,7 +409,6 @@ const StatusListData = () => {
                 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)) : '--'
-                //item.attributeMap.nominalCapacity=item.attributeMap.nominalCapacity.toFixed(0)
                 // 初始化计数器和累加器
                 if (index === 0) {
                     currentDayStatus.value.runNum = 0;
@@ -458,8 +466,6 @@ const StatusListData = () => {
                 propertiesToFormat.forEach(property => {
                     if (currentDayStatus.value[property] !== null && currentDayStatus.value[property] !== undefined) {
                         currentDayStatus.value[property] = Number(currentDayStatus.value[property].toFixed(0));
-                    } else {
-                        console.warn(`Property ${property} is null or undefined`);
                     }
                 });
                 return {
@@ -489,168 +495,168 @@ const StatusListData = () => {
     })
 }
 
-const chartRefs = useTemplateRefsList<HTMLDivElement>()
 const state: {
-    charts: any[]
+    charts: { powerChart: any; trendChart: any }
     remark: string
     workingTimeFormat: string
     pauseWork: boolean
 } = reactive({
-    charts: [],
+    charts: { powerChart: null,  trendChart: null },
     remark: 'dashboard.Loading',
     workingTimeFormat: '',
     pauseWork: false,
 })
-const powerChartData =  [
-    {
-        "power": 12.6,
-        "windSpeed": 56.3,
-        "dataTime": "2024-10-17 00:00:00"
+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']
     },
-    {
-        "power": 10.6,
-        "windSpeed": 16.3,
-        "dataTime": "2024-10-17 00:05:00"
-    }
-]
+    values: {
+        iGenPower:[0,5,2,7],
+        iTheoreticalPower:[0,0,0,0],
+        iWindSpeed:[3,8,9,1]
+    },
+}
 const initpowerChart = () => {
-    const initpowerChart = echarts.init(chartRefs.value[0] as HTMLElement)
-    const xAxisdata=[];
-    const powerData=[];
-    const windSpeedData=[]
-    powerChartData.forEach((item, index) => {
-        const dataTime=item.dataTime
-        const dataTimearr=dataTime.split(' ')
-        xAxisdata.push(dataTimearr[1])
-        powerData.push(item.power)
-        windSpeedData.push(item.windSpeed)
-        const option = {
-            grid: {
-                top: 50,
-                right: 10,
-                bottom: 20,
-                left: 10,
-                containLabel:true
+    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',
             },
-            tooltip: {
-                trigger: 'axis',
-                axisPointer: {
-                    type: 'shadow'
-                }
+        },
+        xAxis: {
+            type: 'category',
+            axisLine: {
+                show: true,
+                lineStyle: {
+                    color: '#dadada',
+                    width: 1,
+                    type: 'solid',
+                },
             },
-            xAxis: {
-                type: 'category',
-                axisLine:{
-                    show:true,
+            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: 1,
-                        type: "solid"
-                    }
+                        width: 0,
+                        type: 'solid',
+                    },
                 },
-                axisLabel: {//x轴文字的配置
+                axisLabel: {
+                    //x轴文字的配置
                     show: true,
                     textStyle: {
                         color: '#4E5969',
                     },
-                    interval: 0,
-                    //rotate: 45
                 },
-                splitLine: {//分割线配置
-                    show:false,
+                axisTick: { show: false },
+                splitLine: {
+                    interval: 50,
                     lineStyle: {
-                        color: '#999999',
-                    }
-                },
-                data: xAxisdata,
-            },
-            yAxis: [
-                {
-                    type: 'value',
-                    name: '功率MW',
-                    nameTextStyle:{
-                        color: '#4E5969',
+                        type: 'dashed',
+                        color: '#dadada',
                     },
-                    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
+            {
+                type: 'value',
+                name: '风速m/s',
+                nameTextStyle: {
+                    color: '#4E5969',
+                },
+                axisLine: {
+                    show: false,
+                    lineStyle: {
+                        color: '#dadada',
+                        width: 0,
+                        type: 'solid',
                     },
-                    data: powerData
-
-                },{
-                    name: '风速',
-                    type: 'line',
-                    yAxisIndex: 1,
-                    itemStyle: {
-                        color: '#FF7E00',
-                        barBorderRadius: 2
+                },
+                axisLabel: {
+                    //x轴文字的配置
+                    show: true,
+                    textStyle: {
+                        color: '#4E5969',
                     },
-                    areaStyle: {
+                },
+                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,
@@ -658,156 +664,169 @@ const initpowerChart = () => {
                             }
                         ])
                     },
-                    data: windSpeedData
-                }
-            ]
-        }
-        initpowerChart.setOption(option)
-        state.charts.push(initpowerChart)
-    });
-
+                data: powerChartData.values?.iWindSpeed ?? [],
+            },
+        ],
+    }
+    powerChart.setOption(option)
+    state.charts.powerChart = powerChart
 }
 
-const TrendData=[
+
+
+const trendChartRef = ref<VNodeRef>()
+const TrendDataForDay = [
     {
-        "currentPeriod": 56.3,
-        "samePeriod": 63.5,
-        "generationTime": "2024-10-01"
+        currentPeriod: 86.3,
+        samePeriod: 63.5,
+        generationTime: '2024-10-01',
     },
     {
-        "currentPeriod": 66.3,
-        "samePeriod": 73.5,
-        "generationTime": "2024-10-02"
+        currentPeriod: 86.3,
+        samePeriod: 53.5,
+        generationTime: '2024-10-02',
     },
     {
-        "currentPeriod": 66.3,
-        "samePeriod": 73.5,
-        "generationTime": "2024-10-03"
-    }
+        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 timeType="日"
 
-const inittrendChart = (t,u) => {
-    const currentPeriod=[];
-    const samePeriod=[]
-    const xAxisdata=[]
-    TrendData.forEach((item, index) => {
-        const generationTime=item.generationTime
-        const generationTimearr=generationTime.split('-')
-        xAxisdata.push(generationTimearr[2])
-        currentPeriod.push(item.currentPeriod)
-        samePeriod.push(item.samePeriod)
+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 inittrendChart = echarts.init(chartRefs.value[u] as HTMLElement)
-        const option = {
-            grid: {
-                top: 30,
-                right: 10,
-                bottom: 20,
-                left: 25,
-                borderColor:'#dadada'
+    const option = {
+        grid: {
+            top: 30,
+            right: 10,
+            bottom: 20,
+            left: 25,
+            borderColor: '#dadada',
+        },
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow',
             },
-            tooltip: {
-                trigger: 'axis',
-                axisPointer: {
-                    type: 'shadow'
-                }
+        },
+        xAxis: {
+            type: 'category',
+            axisLine: {
+                show: true,
+                lineStyle: {
+                    color: '#dadada',
+                    width: 1,
+                    type: 'solid',
+                },
             },
-            xAxis: {
-                type: 'category',
-                axisLine:{
-                    show:true,
+            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: 1,
-                        type: "solid"
-                    }
+                        width: 0,
+                        type: 'solid',
+                    },
                 },
-                axisLabel: {//x轴文字的配置
+                axisLabel: {
+                    //x轴文字的配置
                     show: true,
                     textStyle: {
                         color: '#4E5969',
-                    }
+                    },
                 },
-                splitLine: {//分割线配置
-                    show:false,
+                axisTick: { show: false },
+                splitLine: {
+                    interval: 50,
                     lineStyle: {
-                        color: '#999999',
-                    }
-                },
-                data: xAxisdata,
-            },
-            yAxis: [
-                {
-                    type: 'value',
-                    name: 'kWh',
-                    nameTextStyle:{
-                        color: '#4E5969',
+                        type: 'dashed',
+                        color: '#dadada',
                     },
-                    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'
-                    }
+        ],
+        legend: {
+            data: ['本期', '同期'],
+            textStyle: {
+                color: '#73767a',
+            },
+        },
+        series: [
+            {
+                name: '本期',
+                data: currentPeriod,
+                type: 'bar',
+                smooth: true,
+                itemStyle: {
+                    color: '#0277B3',
                 },
-
-            ],
-        }
-        inittrendChart.setOption(option)
-        state.charts.push(inittrendChart)
-    })
+            },
+            {
+                name: '同期',
+                data: samePeriod,
+                type: 'bar',
+                smooth: true,
+                itemStyle: {
+                    color: '#00A096',
+                },
+            },
+        ],
+    }
+    trendChart.setOption(option)
+    state.charts.trendChart = trendChart
 }
 
 
 const echartsResize = () => {
     nextTick(() => {
-        for (const key in state.charts) {
+        const chartKeys = Object.keys(state.charts) as Array<keyof typeof state.charts>
+        chartKeys.forEach((key) => {
             state.charts[key].resize()
-        }
+        })
     })
 }
 onActivated(() => {
@@ -876,9 +895,69 @@ const createScroll = () => {
     }, 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(() => {
-    inittrendChart('日','1')
+
+   /* getChartData().then(() => {
+        initpowerChart()
+    })*/
+    inittrendChart(trendChartType.value)
     initpowerChart()
     createScroll()
     overviewList()
@@ -886,24 +965,12 @@ onMounted(() => {
     autoUpdate()
     useEventListener(window, 'resize', echartsResize)
 })
-onBeforeMount(() => {
+/*onBeforeMount(() => {
     for (const key in state.charts) {
         state.charts[key].dispose()
     }
-})
+})*/
 const activeName = ref('first')
-const tabhandleClick = (tabName) => {
-    setTimeout(() => {
-        echartsResize()
-    }, 10)
-    debugger
-    if(tabName.props.label=="日"){
-        inittrendChart('日','1')
-    }else if(tabName.props.label=="月"){
-        inittrendChart('月','2')
-    }
-
-}
 let autoUpdateTimer: any = null
 const autoUpdate = () => {
     if (!autoUpdateTimer) {
@@ -916,6 +983,10 @@ const autoUpdate = () => {
 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()
+    })
 });