From a5feaea8012e23052b766e6981b3167e572d4707 Mon Sep 17 00:00:00 2001
From: fengrong <Hi84805353>
Date: Wed, 18 Dec 2024 13:18:45 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/dasadmin/src/views/backend/dashboard.vue   |   63 -
 ui/dasadmin/src/views/backend/home/home.vue   | 1433 ++++-------------
 .../src/views/backend/home/windBlade.vue      |  155 +-
 .../src/views/backend/home/windMatrixpage.vue |  518 ++++++
 4 files changed, 925 insertions(+), 1244 deletions(-)
 create mode 100644 ui/dasadmin/src/views/backend/home/windMatrixpage.vue

diff --git a/ui/dasadmin/src/views/backend/dashboard.vue b/ui/dasadmin/src/views/backend/dashboard.vue
index f7c51c7d..58ef9534 100644
--- a/ui/dasadmin/src/views/backend/dashboard.vue
+++ b/ui/dasadmin/src/views/backend/dashboard.vue
@@ -63,69 +63,6 @@
                                     <div class="small-title">年发电量</div>
                                 </div>
                             </div>
-
-<!--                            <el-col :xs="1" :sm="1" :md="1" :lg="1">
-                                <img class="small-panel-pic" src="~assets/dashboard/overview07.png" alt="" />
-                            </el-col>
-
-                            <el-col :xs="4" :sm="3" :md="3" :lg="3">
-                                <div class="small-base">
-
-                                    <div class="small-value">
-                                        <span class="content-number">{{realData.attributeMap.windfarmavgwindspeed}}</span>
-                                        <span>m/s</span>
-                                    </div>
-                                    <div class="small-title">平均风速</div>
-                                </div>
-                            </el-col>
-                            <el-col :xs="3" :sm="4" :md="4" :lg="4">
-                                <div class="small-base">
-                                    <div class="small-value">
-                                        <span class="content-number">{{realData.attributeMap.windfarmactivepower}}</span>
-                                        <span>kW</span>
-                                    </div>
-                                    <div class="small-title">实时有功</div>
-                                </div>
-                            </el-col>
-                            <el-col :xs="4" :sm="4" :md="4" :lg="4">
-                                <div class="small-base">
-                                    <div class="small-value">
-                                        <span class="content-number">{{realData.attributeMap.windfarmreactivepower}}</span>
-                                        <span>kvar</span>
-                                    </div>
-                                    <div class="small-title">实时无功</div>
-                                </div>
-                            </el-col>
-                            <el-col :xs="4" :sm="4" :md="4" :lg="4">
-                                <div class="small-base">
-
-                                    <div class="small-value">
-                                        <span class="content-number">{{realData.attributeMap.windfarmdayprodenergy}}</span>
-                                        <span>万kWh</span>
-                                    </div>
-                                    <div class="small-title">日发电量</div>
-                                </div>
-                            </el-col>
-                            <el-col :xs="4" :sm="4" :md="4" :lg="4">
-                                <div class="small-base">
-
-                                    <div class="small-value">
-                                        <span class="content-number">{{realData.attributeMap.windfarmmonthprodenergy}}</span>
-                                        <span>万kWh</span>
-                                    </div>
-                                    <div class="small-title">本月发电量</div>
-                                </div>
-                            </el-col>
-                            <el-col :xs="4" :sm="4" :md="4" :lg="4">
-                                <div class="small-base" style="border: none;">
-
-                                    <div class="small-value">
-                                        <span class="content-number">{{realData.attributeMap.windfarmyearprodenergy}}</span>
-                                        <span>万kWh</span>
-                                    </div>
-                                    <div class="small-title">年发电量</div>
-                                </div>
-                            </el-col>-->
                         </div>
                     </el-col>
                     <el-col :xs="24" :sm="24" :md="24" :lg="8">
diff --git a/ui/dasadmin/src/views/backend/home/home.vue b/ui/dasadmin/src/views/backend/home/home.vue
index 406d1a33..b4b761f1 100644
--- a/ui/dasadmin/src/views/backend/home/home.vue
+++ b/ui/dasadmin/src/views/backend/home/home.vue
@@ -1,340 +1,171 @@
 <template>
     <div class="default-main" ref="HomeHight">
-        <el-row :gutter="20" style="margin: 0px">
-            <el-col :md="24" :lg="6" style="padding: 0px">
-                <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 :sm="24" :md="12">
-                                <div :xs="24" :sm="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>
+        <el-row style="margin: 0px;">
+            <el-col :md="24" :lg="24" class="col-top">
+                <el-row class="overview">
+                    <el-col :xs="24" :sm="24" :md="24" :lg="16">
+                        <div class="overviewItem" style="margin-left: 0px;">
+                            <img class="small-panel-pic" src="~assets/dashboard/overview07.png" alt="" />
+                            <div class="smallBox" style="width: 14%;margin-left: -10px;">
+                                <div class="small-base">
+                                    <div class="small-value">
+                                        <span class="content-number">{{realData.attributeMap.windfarmavgwindspeed}}</span>
+                                        <span>m/s</span>
                                     </div>
+                                    <div class="small-title">平均风速</div>
                                 </div>
-                                <div :sm="24" :md="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 class="smallBox">
+                                <div class="small-base">
+                                    <div class="small-value">
+                                        <span class="content-number">{{realData.attributeMap.windfarmactivepower}}</span>
+                                        <span>kW</span>
                                     </div>
+                                    <div class="small-title">实时有功</div>
                                 </div>
-                            </el-col>
-                            <el-col :sm="24" :md="12">
-                                <div :xs="24" :sm="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 class="smallBox">
+                                <div class="small-base">
+                                    <div class="small-value">
+                                        <span class="content-number">{{realData.attributeMap.windfarmreactivepower}}</span>
+                                        <span>kVar</span>
                                     </div>
+                                    <div class="small-title">实时无功</div>
                                 </div>
-                                <div :xs="24" :sm="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>
+                            <div class="smallBox">
+                                <div class="small-base">
 
-                    <!--今日运行状态-->
-                    <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 class="small-value">
+                                        <span class="content-number">{{realData.attributeMap.windfarmdayprodenergy}}</span>
+                                        <span>万kWh</span>
                                     </div>
+                                    <div class="small-title">日发电量</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>
+                            <div class="smallBox">
+                                <div class="small-base">
 
-                                    <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 class="small-value">
+                                        <span class="content-number">{{realData.attributeMap.windfarmmonthprodenergy}}</span>
+                                        <span>万kWh</span>
                                     </div>
+                                    <div class="small-title">本月发电量</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>
+                            <div class="smallBox">
+                                <div class="small-base" style="border: none;">
 
-                                    <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 class="small-value">
+                                        <span class="content-number">{{realData.attributeMap.windfarmyearprodenergy}}</span>
+                                        <span>万kWh</span>
                                     </div>
+                                    <div class="small-title">年发电量</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>
+                    </el-col>
+                    <el-col :xs="24" :sm="24" :md="24" :lg="8">
+                        <div class="overviewItem">
+                            <el-col :xs="3" :sm="3" :md="3" :lg="3">
+                                <img class="small-panel-pic" src="~assets/dashboard/overview08.png" alt="" />
+                            </el-col>
+
+                            <el-col :xs="4" :sm="4" :md="4" :lg="4">
+                                <div class="small-base">
+                                    <div class="small-value">
+                                        <span class="content-number">{{realData.attributeMap.turbinecountpowerprod}}</span>
+                                        <span>台</span>
+                                    </div>
+                                    <div class="small-title">并网台数</div>
+                                </div>
+                            </el-col>
+                            <el-col :xs="6" :sm="6" :md="6" :lg="6">
+                                <div class="small-base">
+                                    <div class="small-value">
+                                        <span class="content-number">{{realData.attributeMap.turbinecountidle}}</span>
+                                        <span>台</span>
+                                    </div>
+                                    <div class="small-title">待机台数</div>
+                                </div>
+                            </el-col>
+                            <el-col :xs="6" :sm="6" :md="6" :lg="6">
+                                <div class="small-base">
+                                    <div class="small-value">
+                                        <span class="content-number">{{realData.attributeMap.turbinecountdisconnected}}</span>
+                                        <span>台</span>
+                                    </div>
+                                    <div class="small-title">断联台数</div>
+                                </div>
+                            </el-col>
+                            <el-col :xs="6" :sm="5" :md="5" :lg="5">
+                                <div class="small-base" style="border: none;">
+                                    <div class="small-value">
+                                        <span class="content-number">{{realData.attributeMap.turbinecountservice}}</span>
+                                        <span>台</span>
+                                    </div>
+                                    <div class="small-title">维护台数</div>
+                                </div>
+                            </el-col>
+                        </div>
+                    </el-col>
+                </el-row>
+            </el-col>
+            <el-col :md="24" :lg="24">
+                <div class="AlertPart">
+                    <div class="AlertPic">
+                        <img src="~assets/dashboard/alert01.png" alt="">
+                    </div>
+                    <div class="realAlert"
+                         ref="scrollRef"
+                         @mouseover.native="clearScroll"
+                         @mouseleave.native="createScroll"
+                    >
+                        <p v-for="(item,index) in tableData"
+                           :key="index"
+                           @mouseover="showButton"
+                           @mouseout="hideButton"
+                        >
+                            <span>{{item.eventTimeFormate}}</span>
+                            <span>{{item.deviceName}}</span>
+                            <span>{{item.eventText}}</span>
+                            <span v-show="showConfirmButton" >
+                                <a style="color: #0277b3; cursor: pointer;" @click="open(item)" >确认</a>
+                            </span>
+                        </p>
                     </div>
                 </div>
-            </el-col>
 
-            <el-col :md="24" :lg="12" class="col-center">
+            </el-col>
+            <el-col :md="24" :lg="24" class="col-center" style="padding-right: 10px;">
                 <div class="grid-content ep-bg-purple-light">
                     <!--风机矩阵-->
                     <div class="matrix panelBg">
-                        <el-text class="mx-1 homelabel">风机矩阵</el-text>
+                        <div class="homeHeader">
+                            <div class="cardLabel">风机矩阵</div>
+                        </div>
+
                         <el-scrollbar>
                             <WindContent :parentData="FanList" @StatusListData="StatusListData"></WindContent>
                         </el-scrollbar>
                     </div>
                 </div>
             </el-col>
-            <el-col :md="24" :lg="6" style="padding: 0px">
-                <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 {  onMounted, reactive, ref, onUnmounted } from 'vue'
 import { useI18n } from 'vue-i18n'
-import WindContent from '/@/views/backend/home/windMatrix.vue'
+import WindContent from '/@/views/backend/home/windMatrixpage.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'
+import { getParamList } from '/@/api/backend/SystemParam/request'
 const route = useRoute()
 
 const d = new Date()
@@ -347,6 +178,22 @@ const realData = ref({
     attributeMap: {},
 })
 
+const attributeList = ref({
+    attributesList:[
+        'windfarmactivepower',
+        'windfarmreactivepower',
+        'windfarmavgwindspeed',
+        'windfarmdayprodenergy',
+        'windfarmmonthprodenergy',
+        'windfarmyearprodenergy',
+        'turbinecountpowerprod',
+        'turbinecountidle',
+        'turbinecountdisconnected',
+        'turbinecountservice'
+
+    ]
+})
+
 const formatAttributeValue = (value: any) => {
     if (value === undefined) {
         return '-'
@@ -357,27 +204,51 @@ const formatAttributeValue = (value: any) => {
     return value % 1 === 0 ? value : value.toFixed(2)
 }
 const overviewList = () => {
-    getWindFarmRealData().then((res) => {
+    getWindFarmRealData(attributeList.value).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.windfarmreactivepower = formatAttributeValue(res.data.attributeMap.windfarmreactivepower)
             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)
+            res.data.attributeMap.windfarmdayprodenergy = formatAttributeValue(res.data.attributeMap.windfarmdayprodenergy/10000)
+            res.data.attributeMap.windfarmmonthprodenergy = formatAttributeValue(res.data.attributeMap.windfarmmonthprodenergy/10000)
+            res.data.attributeMap.windfarmyearprodenergy = formatAttributeValue(res.data.attributeMap.windfarmyearprodenergy/10000)
+            res.data.attributeMap.turbinecountpowerprod =
+                res.data.attributeMap.turbinecountpowerprod !== undefined
+                    ? res.data.attributeMap.turbinecountpowerprod % 1 === 0
+                        ? res.data.attributeMap.turbinecountpowerprod
+                        : res.data.attributeMap.turbinecountpowerprod.toFixed(0)
+                    : '0'
+            res.data.attributeMap.turbinecountidle =
+                res.data.attributeMap.turbinecountidle !== undefined
+                    ? res.data.attributeMap.turbinecountidle % 1 === 0
+                        ? res.data.attributeMap.turbinecountidle
+                        : res.data.attributeMap.turbinecountidle.toFixed(0)
+                    : '0'
+            res.data.attributeMap.turbinecountdisconnected =
+                res.data.attributeMap.turbinecountdisconnected !== undefined
+                    ? res.data.attributeMap.turbinecountdisconnected % 1 === 0
+                        ? res.data.attributeMap.turbinecountdisconnected
+                        : res.data.attributeMap.turbinecountdisconnected.toFixed(0)
+                    : '0'
+            res.data.attributeMap.turbinecountservice =
+                res.data.attributeMap.turbinecountservice !== undefined
+                    ? res.data.attributeMap.turbinecountservice % 1 === 0
+                        ? res.data.attributeMap.turbinecountservice
+                        : res.data.attributeMap.turbinecountservice.toFixed(0)
+                    : '0'
             const data: any = {
                 windFarmId: res.data.windFarmId,
                 attributeMap: {
+                    windfarmactivepower: res.data.attributeMap.windfarmactivepower,
+                    windfarmreactivepower: res.data.attributeMap.windfarmreactivepower,
+                    windfarmavgwindspeed: res.data.attributeMap.windfarmavgwindspeed,
                     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,
+                    turbinecountpowerprod: res.data.attributeMap.turbinecountpowerprod,
+                    turbinecountidle: res.data.attributeMap.turbinecountidle,
+                    turbinecountdisconnected: res.data.attributeMap.turbinecountdisconnected,
+                    turbinecountservice: res.data.attributeMap.turbinecountservice
                 },
             }
 
@@ -390,6 +261,22 @@ const overviewList = () => {
         }
     })
 }
+const PARAM_COLOR = 'paramColor';
+const PARAM_LAYOUT = 'paramLayout';
+const paramColorData=ref([])
+const paramLayoutData=ref([])
+const getList=()=>{
+    getParamList().then((res)=>{
+        res.data.forEach((item, index) => {
+            if (item.paramName === PARAM_COLOR && res.data && res.data[index]) {
+                paramColorData.value = res.data[index].paramValueJson;
+            }
+            if (item.paramName === PARAM_LAYOUT && res.data && res.data[index]) {
+                paramLayoutData.value = res.data[index].paramValueJson;
+            }
+        });
+    })
+}
 const currentDayStatus = ref({
     windTurbineNum: 0,
     installedCapacity: 0,
@@ -413,7 +300,14 @@ const StatusListData = () => {
         if (res.code == 200) {
             currentDayStatus.value.windTurbineNum = res.data.length
             const data = res.data.map((item, index) => {
+                let color:any=''
                 const state = getRealTimeState(item.attributeMap)
+                paramColorData.value.forEach((item, index) => {
+                    if (item.state == state) {
+                        color = item.color
+                    }
+                })
+
                 item.attributeMap.iwindspeed =
                     item.attributeMap.iwindspeed !== undefined
                         ? item.attributeMap.iwindspeed % 1 === 0
@@ -494,15 +388,19 @@ const StatusListData = () => {
                 return {
                     irn: item.irn,
                     name: item.name ?? '-',
+                    deviceCode:item.deviceCode,
                     model: item.model || '-',
                     modelId: item.modelId,
                     belongLine: item.belongLine || '-',
                     standard: item.standard,
+                    layout:paramLayoutData.value[0],
                     attributeMap: {
                         iwindspeed: item.attributeMap.iwindspeed,
                         igenpower: item.attributeMap.igenpower,
                         ikwhthisday: item.attributeMap.ikwhthisday,
                         iturbineoperationmode: state,
+                        processedoperationmode: state,
+                        color:color,
                         locked: item.attributeMap.locked,
                         irotorspeed: item.attributeMap.irotorspeed,
                     },
@@ -518,333 +416,6 @@ const StatusListData = () => {
     })
 }
 
-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)
@@ -858,17 +429,13 @@ const timestampToTime = (timestamp: any) => {
 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,
+        startTime: new Date(new Date().toLocaleDateString()).getTime(),
         endTime: Date.now(),
         deviceCode: deviceCode,
-        limit: 100,
+        eventLevel:2 || 1
     }
-    console.log(JSON.stringify(data))
+    // console.log(JSON.stringify(data))
     getAlarmListReq(data).then((res) => {
         if (res.code == 200) {
             //tableData.value = res.rows
@@ -923,212 +490,30 @@ const okSubmit = (val: any) => {
         })
 }
 
+const scrollRef=ref()
+const showConfirmButton = ref(false)
+const showButton = () => {
+    showConfirmButton.value = true;
+}
+const hideButton = () => {
+    showConfirmButton.value = false;
+}
 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
+    timer =setInterval(() => {
+        scrollRef.value.scrollLeft += 1;
+        if (scrollRef.value.clientWidth + scrollRef.value.scrollLeft == scrollRef.value.scrollWidth) {
+            scrollRef.value.scrollLeft = 0
         }
-    }, 30)
+    }, 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(() => {
@@ -1136,18 +521,7 @@ const autoUpdate = () => {
             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({
@@ -1158,23 +532,20 @@ const computedHeight = reactive({
 const sizeChange = () => {
     const rect = HomeHight.value?.getBoundingClientRect()
     if (!rect) return
-    computedHeight.powerHeight = rect.height - 630 + 'px'
-    computedHeight.alarmHeight = rect.height - 578 + 'px'
-    computedHeight.centerHeight = rect.height - 0 + 'px'
+    computedHeight.centerHeight = rect.height - 190 + 'px'
     if (window.screen.width < 1360) {
-        computedHeight.alarmHeight = '200px'
-        computedHeight.powerHeight = '200px'
+        computedHeight.centerHeight = rect.height - 0 + 'px'
     }
     if (rect.width < 1360) {
-        computedHeight.alarmHeight = '200px'
-        computedHeight.powerHeight = '200px'
+        computedHeight.centerHeight = rect.height - 0 + 'px'
     }
 }
 
 onMounted(() => {
+    getList()
     window.addEventListener('resize', sizeChange)
     sizeChange()
-    getAllChartData()
+    //getAllChartData()
     createScroll()
     overviewList()
     StatusListData()
@@ -1182,28 +553,23 @@ onMounted(() => {
 
     equipList({ objectType: 10002 }).then((res) => {
         res.data.map((item: any) => {
-            deviceCode.value.push(item.name)
+            deviceCode.value.push(item.code)
         })
 
         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;
+$labelHeight: 30px;
 @mixin cardDefaultStyle {
     margin-top: $marginNum;
     margin-bottom: $marginNum;
@@ -1213,32 +579,31 @@ $labelHeight: 38px;
 }
 @mixin cardlabel {
     .cardLabel {
-        width: 100%;
         height: $labelHeight;
         font-size: 18px;
         font-weight: 600;
         color: #4e5969;
-        line-height: 38px;
-        padding-left: 10px;
+        line-height: 30px;
+        /* padding-left: 10px;*/
     }
 }
 .default-main {
     width: 100%;
     height: 100%;
-    min-height: 920px;
+    /* min-height: 920px;*/
     padding: 0;
     margin: 0;
     color: #4e5969;
     background-color: #f2f3f5;
     .el-row {
         width: calc(100% - 0px);
-        .el-col {
-            height: calc(100% - 10px);
-        }
+        /* .el-col {
+             height: calc(100% - 10px);
+         }*/
     }
     .content-number {
         color: #333333;
-        font-size: 20px;
+        font-size: 22px;
     }
     .homelabel {
         font-family: PingFangSC-Semibold;
@@ -1247,258 +612,133 @@ $labelHeight: 38px;
         letter-spacing: 0;
         line-height: 18px;
         font-weight: 600;
-        margin-bottom: 20px;
+        margin-bottom: 10px;
         display: block;
     }
+    .overview {
+        width: calc(100% - 5px);
+        height: 100%;
+        .overviewItem{
+            height: 100px;
+            display: flex;
+            background: #FFFFFF;
+            border-radius: 6px;
+            margin: 5px;
+            align-items: center;
+            color: #4E5969;
+            justify-content: space-between;
+            .small-panel-pic{
+                width: 80px;
+                height: 80px;
+            }
+            .small-base{
+                text-align: center;
+                border-right: 1px #eeeeee solid;
+            }
+            .smallBox{
+                width: 18%;
+                .small-base{
+                    text-align: center;
+                    border-right: 1px #eeeeee solid;
+                }
+            }
+
+        }
+
+    }
+    .AlertPart{
+        width: calc(100% - 10px);
+        height: 60px;
+        margin: 10px 0;
+        background-image: linear-gradient(90deg, #FFE3E3 0%, #FBFDFF 100%);
+        border: 2px solid #FFFFFF;
+        border-radius: 6px;
+        display: flex;
+        align-items: center;
+        .AlertPic{
+            width: 50px;
+            text-align: center;
+            img{
+                width: 24px;
+                height: 24px;
+            }
+        }
+        .realAlert{
+            overflow: hidden;
+            white-space: nowrap;
+            cursor: pointer;
+            font-size: 20px;
+            color: #333333;
+            width: 100%;
+            p{
+                padding-right: 30px;
+                display: inline-block;
+                span{
+                    padding-right: 10px;
+                }
+            }
+        }
+    }
     .grid-content {
         /* overflow-x: hidden;*/
         width: 100%;
         height: 100%;
         .panelBg {
             background-color: #ffffff;
-            padding: 20px;
+            padding: 10px;
             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: 290px;
-            height: v-bind('computedHeight.powerHeight');
-            .chartBox {
-                height: calc(100% - $labelHeight);
-                .power-chart {
-                    width: 100%;
-                    height: 100%;
-                }
-            }
+            margin-bottom: 10px;
         }
+
+
         .matrix {
-            background: url('/@/assets/dashboard/bg1.png') no-repeat #ffffff;
+            @include cardlabel;
+            background: url('/@/assets/dashboard/bg2.png') no-repeat #ffffff;
             background-size: 100% 100%;
-            min-height: 900px;
+            /* min-height: 900px;*/
             width: 100%;
             height: v-bind('computedHeight.centerHeight');
             margin-bottom: 0;
             .el-scrollbar {
                 height: calc(100% - 20px);
             }
-        }
-        .summarize {
-            padding: 10px;
-            border-radius: 10px;
-            background-color: #fff;
-            margin-bottom: 20px;
-            word-break: keep-all;
-            @include cardlabel;
-            min-height: 224px;
-            .summarize-panel-list {
-                width: 100%;
+            .homeHeader{
                 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;
-                        }
-                    }
+                .cardLabel{
+                    width: 100px;
                 }
             }
-        }
 
-        .trend {
-            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: 340px;
-            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 {
-        /*height: auto !important;*/
-        overflow: none;
-        .col-center {
-            padding: 0px !important;
+        font-size: 12px !important;
+        .content-number {
+            font-size: 16px !important;
         }
-        .windtitle {
-            margin-bottom: 10px;
-        }
-        .summarize {
-            .summarize-panel {
-                margin: 2px !important;
-                .summarize-panel-base {
-                    white-space: normal !important;
-                }
+        .overviewItem{
+            .small-panel-pic{
+                width: 40px!important;
+                height: 40px!important;
             }
+
         }
     }
 }
+
+
 @media screen and (max-width: 1360px) {
     .default-main {
         font-size: 11px !important;
-        height: auto !important;
-
-        .summarize {
-            word-break: break-all !important;
-        }
-        .matrix {
-            height: auto !important;
-        }
-        .overview {
-            .small-panel {
-                .small-base {
-                    margin-left: 0px !important;
-                    font-size: 11px !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;
-                }
-            }
+        .content-number {
+            font-size: 16px !important;
         }
     }
 }
@@ -1508,6 +748,13 @@ $labelHeight: 38px;
         .content-number {
             font-size: 16px !important;
         }
+        .overviewItem{
+            .small-panel-pic{
+                width: 60px!important;
+                height: 60px!important;
+            }
+
+        }
 
         .homelabel {
             font-size: 16px !important;
@@ -1521,26 +768,6 @@ $labelHeight: 38px;
                 /* padding: 10px !important;*/
                 margin-bottom: 10px !important;
             }
-            .summarize {
-                margin-bottom: 10px !important;
-            }
-        }
-        .toal-panel {
-            padding: 0 !important;
-            padding-bottom: 10px !important;
-        }
-        // .matrix {
-        //     height: 900px !important;
-        // }
-        :deep(.el-tabs__header) {
-            margin-top: -33px !important;
-        }
-        .overview {
-            .small-panel {
-                .small-base {
-                    margin-left: 5px !important;
-                }
-            }
         }
     }
 }
diff --git a/ui/dasadmin/src/views/backend/home/windBlade.vue b/ui/dasadmin/src/views/backend/home/windBlade.vue
index 749e796a..d6046260 100644
--- a/ui/dasadmin/src/views/backend/home/windBlade.vue
+++ b/ui/dasadmin/src/views/backend/home/windBlade.vue
@@ -1,130 +1,139 @@
+
 <template>
     <div class="fanlist-pic">
         <div class="mask">
-            <div class="heart"><img :src="getImagePath(item, 'heart')" alt="" /></div>
+            <div class="heart"><img :src="getSafeImagePath(item, 'heart')" alt="" /></div>
             <div class="leafs" :style="getAnimationStyle(item)">
-                <div class="leaf_1"><img :src="getImagePath(item, 'leaf')" alt="" /></div>
-                <div class="leaf_2"><img :src="getImagePath(item, 'leaf')" alt="" /></div>
-                <div class="leaf_3"><img :src="getImagePath(item, 'leaf')" alt="" /></div>
+                <div class="leaf_1"><img :src="getSafeImagePath(item, 'leaf')" alt="" /></div>
+                <div class="leaf_2"><img :src="getSafeImagePath(item, 'leaf')" alt="" /></div>
+                <div class="leaf_3"><img :src="getSafeImagePath(item, 'leaf')" alt="" /></div>
             </div>
-<!--            <div class="heart"><img src="~assets/dashboard/fan/heart13.png" alt="" /></div>
-            <div class="leafs" :style="getAnimationStyle(item)">
-                <div class="leaf_1"><img src="~assets/dashboard/fan/leaf13.png" alt="" /></div>
-                <div class="leaf_2"><img src="~assets/dashboard/fan/leaf13.png" alt="" /></div>
-                <div class="leaf_3"><img src="~assets/dashboard/fan/leaf13.png" alt="" /></div>
-            </div>-->
         </div>
     </div>
     <div class="fanlist-pic">
-        <img :src="getImagePath(item, 'fan')" alt="" />
-<!--        <img src="~assets/dashboard/fan/fan13.png" alt="" />-->
+        <img :src="getSafeImagePath(item, 'fan')" alt="" />
     </div>
 </template>
 
 <script setup lang="ts">
-import {defineProps} from "vue";
+import { defineProps } from "vue";
+import { ref } from "vue";
+
 const props = defineProps({
     item: {
         type: Array,
         default: () => {},
     },
-})
+});
+
 const getAnimationStyle = (item) => {
-    const irotorspeed = item.attributeMap?.irotorspeed ?? 0
-    let animationDuration;
-    animationDuration = 60 / irotorspeed / 3
-    const processedoperationmode = item.attributeMap?.processedoperationmode ?? 0
-    if(processedoperationmode==33){
+    const irotorspeed = item.attributeMap?.irotorspeed ?? 0;
+    let animationDuration = 60 / irotorspeed / 3;
+    const processedoperationmode = item.attributeMap?.processedoperationmode ?? 0;
+
+    if (processedoperationmode === 33) {
         return {
             'animation-duration': `0s`,
             'animation-timing-function': 'linear',
             'animation-iteration-count': 'infinite',
-            'animation-direction': 'normaL',
-        }
-    }else{
+            'animation-direction': 'normal',
+        };
+    } else {
         return {
             'animation-duration': `${animationDuration}s`,
             'animation-timing-function': 'linear',
             'animation-iteration-count': 'infinite',
-            'animation-direction': 'normaL',
-        }
+            'animation-direction': 'normal',
+        };
     }
-
-}
-
+};
 
 const imagePathMap = {
     '#9C27B0': {
-        heart: 'src/assets/dashboard/fan/heart1.png',
-        leaf: 'src/assets/dashboard/fan/leaf1.png',
-        fan: 'src/assets/dashboard/fan/fan1.png',
+        heart: 'heart1.png',
+        leaf: 'leaf1.png',
+        fan: 'fan1.png',
     },
     '#673AB7': {
-        heart: 'src/assets/dashboard/fan/heart2.png',
-        leaf: 'src/assets/dashboard/fan/leaf2.png',
-        fan: 'src/assets/dashboard/fan/fan2.png',
+        heart: 'heart2.png',
+        leaf: 'leaf2.png',
+        fan: 'fan2.png',
     },
     '#3F51B5': {
-        heart: 'src/assets/dashboard/fan/heart3.png',
-        leaf: 'src/assets/dashboard/fan/leaf3.png',
-        fan: 'src/assets/dashboard/fan/fan3.png',
+        heart: 'heart3.png',
+        leaf: 'leaf3.png',
+        fan: 'fan3.png',
     },
     '#3059EC': {
-        heart: 'src/assets/dashboard/fan/heart4.png',
-        leaf: 'src/assets/dashboard/fan/leaf4.png',
-        fan: 'src/assets/dashboard/fan/fan4.png',
+        heart: 'heart4.png',
+        leaf: 'leaf4.png',
+        fan: 'fan4.png',
     },
     '#0277B3': {
-        heart: 'src/assets/dashboard/fan/heart5.png',
-        leaf: 'src/assets/dashboard/fan/leaf5.png',
-        fan: 'src/assets/dashboard/fan/fan5.png',
+        heart: 'heart5.png',
+        leaf: 'leaf5.png',
+        fan: 'fan5.png',
     },
     '#00A096': {
-        heart: 'src/assets/dashboard/fan/heart6.png',
-        leaf: 'src/assets/dashboard/fan/leaf6.png',
-        fan: 'src/assets/dashboard/fan/fan6.png',
+        heart: 'heart6.png',
+        leaf: 'leaf6.png',
+        fan: 'fan6.png',
     },
     '#06B429': {
-        heart: 'src/assets/dashboard/fan/heart7.png',
-        leaf: 'src/assets/dashboard/fan/leaf7.png',
-        fan: 'src/assets/dashboard/fan/fan7.png',
+        heart: 'heart7.png',
+        leaf: 'leaf7.png',
+        fan: 'fan7.png',
     },
     '#64DD17': {
-        heart: 'src/assets/dashboard/fan/heart8.png',
-        leaf: 'src/assets/dashboard/fan/leaf8.png',
-        fan: 'src/assets/dashboard/fan/fan8.png',
+        heart: 'heart8.png',
+        leaf: 'leaf8.png',
+        fan: 'fan8.png',
     },
     '#EEFF41': {
-        heart: 'src/assets/dashboard/fan/heart9.png',
-        leaf: 'src/assets/dashboard/fan/leaf9.png',
-        fan: 'src/assets/dashboard/fan/fan9.png',
+        heart: 'heart9.png',
+        leaf: 'leaf9.png',
+        fan: 'fan9.png',
     },
     '#FFB600': {
-        heart: 'src/assets/dashboard/fan/heart10.png',
-        leaf: 'src/assets/dashboard/fan/leaf10.png',
-        fan: 'src/assets/dashboard/fan/fan10.png',
+        heart: 'heart10.png',
+        leaf: 'leaf10.png',
+        fan: 'fan10.png',
     },
     '#FF7E00': {
-        heart: 'src/assets/dashboard/fan/heart11.png',
-        leaf: 'src/assets/dashboard/fan/leaf11.png',
-        fan: 'src/assets/dashboard/fan/fan11.png',
+        heart: 'heart11.png',
+        leaf: 'leaf11.png',
+        fan: 'fan11.png',
     },
     '#FE3731': {
-        heart: 'src/assets/dashboard/fan/heart12.png',
-        leaf: 'src/assets/dashboard/fan/leaf12.png',
-        fan: 'src/assets/dashboard/fan/fan12.png',
+        heart: 'heart12.png',
+        leaf: 'leaf12.png',
+        fan: 'fan12.png',
     },
     '#999999': {
-        heart: 'src/assets/dashboard/fan/heart13.png',
-        leaf: 'src/assets/dashboard/fan/leaf13.png',
-        fan: 'src/assets/dashboard/fan/fan13.png',
+        heart: 'heart13.png',
+        leaf: 'leaf13.png',
+        fan: 'fan13.png',
     }
 };
 
 const getImagePath = (item, type) => {
-    const color=item.attributeMap.color
+    const color = item.attributeMap.color;
     return imagePathMap[color]?.[type];
 };
+
+const getSafeImagePath = (item, type) => {
+    const path = getImagePath(item, type);
+    if (!getSafeImagePath.cache) {
+        getSafeImagePath.cache = {};
+    }
+    if (getSafeImagePath.cache[path]) {
+        return getSafeImagePath.cache[path];
+    }
+    const imagePath = new URL(`/src/assets/dashboard/fan/${path}`, import.meta.url).href;
+    getSafeImagePath.cache[path] = imagePath;
+    return imagePath;
+
+};
 </script>
 
 <style scoped lang="scss">
@@ -250,26 +259,19 @@ const getImagePath = (item, type) => {
                         text-align: center;
                         top: 5px;
                         left: 17px;
-                        /* z-index: 3;*/
                     }
                     .leafs {
-                        /* z-index: 1;*/
                         position: absolute;
-                        /* animation: leafRotate 1s infinite linear;*/
                         transform-origin: center center;
                         width: 46px;
                         height: 46px;
-                        /*animation-duration: 1s;*/
                         animation-name: leafRotate;
-                        /*animation-iteration-count: infinite;
-                            animation-timing-function: linear;*/
                         .leaf_1 {
                             width: 9px;
                             height: 19px;
                             position: absolute;
                             left: 17px;
                             top: -1px;
-                            /*   transform-origin: left top;*/
                         }
                         .leaf_2 {
                             width: 9px;
@@ -277,7 +279,6 @@ const getImagePath = (item, type) => {
                             position: absolute;
                             left: 31px;
                             top: 20px;
-                            /*  transform-origin: left top;*/
                             transform: rotate(120deg);
                         }
                         .leaf_3 {
@@ -286,7 +287,6 @@ const getImagePath = (item, type) => {
                             position: absolute;
                             left: 5px;
                             top: 22px;
-                            /*transform-origin: left top;*/
                             transform: rotate(240deg);
                         }
                     }
@@ -316,13 +316,12 @@ const getImagePath = (item, type) => {
             }
         }
     }
-    .modelOperate{
+    .modelOperate {
         display: flex;
         flex-direction: column;
         justify-content: space-between;
         align-items: center;
         width: 80px;
-        /* height: 80px;*/
         .el-button {
             margin: 5px;
         }
diff --git a/ui/dasadmin/src/views/backend/home/windMatrixpage.vue b/ui/dasadmin/src/views/backend/home/windMatrixpage.vue
new file mode 100644
index 00000000..cdd455be
--- /dev/null
+++ b/ui/dasadmin/src/views/backend/home/windMatrixpage.vue
@@ -0,0 +1,518 @@
+<template>
+    <div class="FanList-content">
+        <el-row :gutter="10">
+            <el-col :xs="12" :sm="8" :md="8" :lg="4" :xl="3" v-for="item in props.parentData" style="margin-bottom: 5px">
+                <div class="grid-content ep-bg-purple"
+                     @click="handleClick(item)"
+                     @contextmenu.prevent="windContextMenu($event,item)"
+                >
+                    <div class="FanList-panel wind-default" :class="{
+                '': item.standard==1,
+                '': item.standard==0,
+                'wind-offline': item.attributeMap.processedoperationmode == 33
+                  }">
+
+                        <div class="fanlist-top">
+            <span :class="item.standard == 1 ? 'wind-mark-icon' : 'fanlist-icon'">
+                <img :class="item.standard == 1 ? '' : 'wind-picture'" src="~assets/dashboard/biaogan.png" alt="" />
+            </span>
+                            <span class="fanlist-name"> {{ item.name }}</span>
+                            <el-tag v-if="item.attributeMap.processedoperationmode === 20" class="tag-panel" :style="getStyles(item.attributeMap.color)" type="primary">并网</el-tag>
+                            <el-tag v-if="item.attributeMap.processedoperationmode === 11" class="tag-panel" :style="getStyles(item.attributeMap.color)" type="primary">待机</el-tag>
+                            <el-tag v-if="item.attributeMap.processedoperationmode === 16" class="tag-panel" :style="getStyles(item.attributeMap.color)" type="primary">启动</el-tag>
+                            <el-tag v-if="item.attributeMap.processedoperationmode === 10" class="tag-panel" :style="getStyles(item.attributeMap.color)" type="primary"
+                            >维护</el-tag>
+                            <el-tag v-if="item.attributeMap.processedoperationmode === 0" class="tag-panel" :style="getStyles(item.attributeMap.color)" type="primary">离线</el-tag>
+                            <el-tag v-if="item.attributeMap.processedoperationmode === 8" class="tag-panel" :style="getStyles(item.attributeMap.color)" type="primary">限功率运行</el-tag>
+                            <el-tag v-if="item.attributeMap.processedoperationmode === 6" class="tag-panel" :style="getStyles(item.attributeMap.color)" type="primary">正常停机</el-tag>
+                            <el-tag v-if="item.attributeMap.processedoperationmode === 1" class="tag-panel" :style="getStyles(item.attributeMap.color)" type="primary"
+                            >外部因素导致停机</el-tag>
+                            <el-tag v-if="item.attributeMap.processedoperationmode === 2" class="tag-panel" :style="getStyles(item.attributeMap.color)" type="primary">停机</el-tag>
+                            <el-tag v-if="item.attributeMap.processedoperationmode === 1110" class="tag-panel" :style="getStyles(item.attributeMap.color)" type="primary">解缆状态</el-tag>
+                            <el-tag v-if="item.attributeMap.processedoperationmode === 1111" class="tag-panel" :style="getStyles(item.attributeMap.color)" type="primary"
+                            >电网故障停机</el-tag>
+                            <el-tag v-if="item.attributeMap.processedoperationmode === 1112" class="tag-panel" :style="getStyles(item.attributeMap.color)" type="primary"
+                            >安全链停机</el-tag>
+                            <el-tag v-if="item.attributeMap.processedoperationmode === 33" class="tag-panel" :style="getStyles(item.attributeMap.color)" type="primary"
+                            >通讯中断</el-tag>
+                        </div>
+                        <div class="fanlist-main">
+                            <WindContentleft :item="item" v-if="item.layout==='风格1'"></WindContentleft>
+                            <WindContentright :item="item" v-else-if="item.layout==='风格2'"></WindContentright>
+                            <WindContentcenter :item="item" v-else-if="item.layout==='风格3'"></WindContentcenter>
+                        </div>
+                        <div class="fanlist-bottom">
+                            <!--                            <el-tag class="tag-panel is-danger">已锁定</el-tag>-->
+                            <el-tag v-if="item.attributeMap.locked === 1" class="tag-panel is-danger">已锁定</el-tag>
+                        </div>
+                    </div>
+
+                </div>
+            </el-col>
+        </el-row>
+
+        <ContextMenu :pos="contextMenuPos" v-model:visible="OperateVisible">
+            <template #default>
+                <div class="modelOperate">
+                    <el-button
+                        class="control-btn"
+                        type="primary"
+                        @click="sendCommand('setTurbineFastStart')"
+                        v-if="realTimeData.processedoperationmode !== 16"
+                    >启动</el-button>
+                    <el-button @click="sendCommand('setTurbineStop')" v-else class="control-btn" type="primary">停机</el-button>
+                    <el-button @click="sendCommand('setTurbineResetStatusCode')" class="control-btn" type="primary">复位</el-button>
+                    <el-button
+                        @click="sendManualCommand(1)"
+                        v-if="realTimeData.locked !== 1"
+                        class="control-btn"
+                        type="primary">锁定</el-button>
+                    <el-button @click="sendManualCommand(0)" v-else class="control-btn" type="primary">解锁</el-button>
+                    <el-button
+                        class="control-btn"
+                        type="primary"
+                        @click="editstandard(1)"
+                        v-if="realTimeData.standard == 0"
+                    >标杆设置</el-button>
+                    <el-button
+                        class="control-btn"
+                        type="primary"
+                        @click="editstandard(0)"
+                        v-else
+                    >标杆取消</el-button>
+                </div>
+            </template>
+        </ContextMenu>
+    </div>
+</template>
+
+<script setup lang="ts">
+import {defineProps, ref} from 'vue'
+import { useRouter } from 'vue-router'
+import { adminBaseRoutePath } from '/@/router/static/adminBase'
+import ContextMenu from '/@/views/backend/auth/model/contextMenu.vue'
+import { sendCommandReq, sendManualCommandReq } from '/@/api/backend/control/request'
+import {ElMessage, ElMessageBox} from "element-plus";
+import {equipUpdate} from '/@/api/backend/index.ts'
+import WindContentleft from './windMatrixleft.vue'
+import WindContentright from './windMatrixright.vue'
+import WindContentcenter from './windMatrixcenter.vue'
+
+const router = useRouter()
+const props = defineProps({
+    parentData: {
+        type: Array,
+        default: () => [],
+    },
+})
+const getAnimationStyle = (item) => {
+    const irotorspeed = item.attributeMap?.irotorspeed ?? 0
+    let animationDuration;
+    animationDuration = 60 / irotorspeed / 3
+    const processedoperationmode = item.attributeMap?.processedoperationmode ?? 0
+    if(processedoperationmode==33){
+        return {
+            'animation-duration': `0s`,
+            'animation-timing-function': 'linear',
+            'animation-iteration-count': 'infinite',
+            'animation-direction': 'normaL',
+        }
+    }else{
+        return {
+            'animation-duration': `${animationDuration}s`,
+            'animation-timing-function': 'linear',
+            'animation-iteration-count': 'infinite',
+            'animation-direction': 'normaL',
+        }
+    }
+
+
+
+}
+
+const handleClick = (row) => {
+    if (!router.hasRoute('windTurbine')) {
+        router.addRoute('admin', {
+            path: adminBaseRoutePath + '/windTurbine',
+            name: 'windTurbine',
+            component: () => import('/@/views/backend/WindBlower/index.vue'),
+            meta: {
+                title: '单风机详情',
+                menuDesc: '单风机详情',
+                addtab: true,
+            },
+        })
+    }
+
+    router.push({
+        name: 'windTurbine',
+        query: {
+            irn: row.irn,
+            iotModelId: row.modelId,
+            deviceCode: row.deviceCode,
+            name: row.name,
+            model: row.model,
+        },
+    })
+}
+
+const OperateVisible = ref(false)
+const contextMenuPos = ref({
+    x: 0,
+    y: 0,
+})
+const realTimeData = ref<any>({
+    processedoperationmode: 1111,
+    locked: 0,
+    deviceId: '',
+    name:'',
+    code:'',
+    standard:'',
+    iotModelId:''
+})
+const windContextMenu = (event: any,curnodeData) => {
+    contextMenuPos.value.x = event.pageX
+    contextMenuPos.value.y = event.pageY
+    realTimeData.value.processedoperationmode=curnodeData.attributeMap.processedoperationmode
+    realTimeData.value.locked=curnodeData.attributeMap.locked
+    realTimeData.value.deviceId=curnodeData.irn
+    realTimeData.value.name=curnodeData.name
+    realTimeData.value.code=curnodeData.deviceCode
+    realTimeData.value.standard=curnodeData.standard
+    realTimeData.value.iotModelId=curnodeData.modelId
+    OperateVisible.value = true
+}
+const sendCommand = (type: 'setTurbineFastStart' | 'setTurbineStop' | 'setTurbineResetStatusCode') => {
+    const sendTypeEnum = {
+        setTurbineFastStart: '风机快速启动指令',
+        setTurbineStop: '风机停机指令',
+        setTurbineResetStatusCode: '风机复位故障代码指令',
+    }
+    ElMessageBox.confirm('确认发送' + sendTypeEnum[type] + '吗？', '', {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+    }).then(() => {
+        const serviceName = sendTypeEnum[type]
+        const optDesc = serviceName + ',设定值为：1'
+        sendCommandReq({
+            deviceId: realTimeData.value.deviceId as string,
+            serviceCode: type,
+            serviceName,
+            optDesc,
+            opValue: 1,
+        }).then((res) => {
+            if (res.code == 200) {
+                ElMessage.success('指令发送成功')
+            } else {
+                ElMessage.error('指令发送失败')
+            }
+        })
+    })
+}
+
+const sendManualCommand = (type: 1 | 0) => {
+    const serviceName = type === 0 ? '风机解锁' : '风机锁定'
+    ElMessageBox.confirm('确认' + serviceName + '吗？', '', {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+    }).then(() => {
+        sendManualCommandReq({
+            deviceId: realTimeData.value.deviceId as string,
+            serviceCode: 'Locked',
+            serviceName,
+            optDesc: serviceName + ',设定值为：' + type,
+            opValue: type,
+        }).then((res) => {
+            if (res.code == 200) {
+                ElMessage.success('指令发送成功')
+            } else {
+                ElMessage.error('指令发送失败')
+            }
+        })
+    })
+}
+
+
+
+const editstandard = (type: 1 | 0) => {
+    const standardName = type === 0 ? '取消风机标杆' : '设置风机标杆'
+    ElMessageBox.confirm('确认' + standardName + '吗？', '', {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+    }).then(() => {
+        equipUpdate({
+            id: realTimeData.value.deviceId,
+            code: realTimeData.value.code,
+            name:realTimeData.value.name,
+            iotModelId: realTimeData.value.iotModelId,
+            standard: type
+        }).then((res) => {
+            if (res.code == 200) {
+                ElMessage.success('设置成功')
+            } else {
+                ElMessage.error('设置失败')
+            }
+        })
+    })
+}
+
+const getStyles=(color) =>{
+    if (color && /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(color)) {
+        const rgbaColor = hexToRgba(color, 0.2);
+        return {
+            background: rgbaColor,
+            border: `1px solid ${rgbaColor}`,
+            color: color,
+        };
+    } else {
+        return {
+            background: 'rgba(48, 89, 236, 0.2)',
+            border: '1px solid #3059ec',
+            color: '#3059ec'
+        };
+    }
+}
+const hexToRgba = (hex, alpha) => {
+    hex = hex.replace('#', '');
+    let r, g, b;
+    if (hex.length === 3) {
+        r = parseInt(hex[0] + hex[0], 16);
+        g = parseInt(hex[1] + hex[1], 16);
+        b = parseInt(hex[2] + hex[2], 16);
+    } else {
+        r = parseInt(hex.substring(0, 2), 16);
+        g = parseInt(hex.substring(2, 4), 16);
+        b = parseInt(hex.substring(4, 6), 16);
+    }
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+</script>
+
+<style scoped lang="scss">
+@keyframes leafRotate {
+    0% {
+        transform: rotate(0deg);
+    }
+    25% {
+        transform: rotate(90deg);
+    }
+    50% {
+        transform: rotate(180deg);
+    }
+    75% {
+        transform: rotate(270deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+.wind-mark {
+    background-image: linear-gradient(140deg, #ffe3e3 0%, #ffffff 93%);
+    border: 1px solid #ffe3e3;
+}
+.wind-default {
+    background-image: linear-gradient(180deg, #f0f6ff 0%, #ffffff 50%);
+    border: 1px solid #e1edf6;
+}
+.wind-offline {
+    background-image: linear-gradient(180deg, #dddddd 0%, #ffffff 93%);
+    border: 1px solid #eeeeee;
+}
+.wind-picture {
+    display: none;
+}
+.wind-mark-icon {
+    background: #ffffff;
+    border: 1px solid #ffe3e3;
+    border-radius: 8px 0 100px 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 40px;
+    height: 30px;
+    vertical-align: middle;
+}
+.FanList-content {
+    overflow-x: hidden;
+    .FanList-panel {
+        border-radius: 8px;
+        cursor: pointer;
+        .fanlist-top {
+            display: flex;
+            width: 100%;
+        }
+        .fanlist-icon {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 40px;
+            height: 30px;
+            vertical-align: middle;
+        }
+        .fanlist-name {
+            width: 100%;
+            margin-top: 5px;
+        }
+        .tag-panel {
+            border-radius: 0 8px 0 0;
+            line-height: 20px;
+        }
+        .is-primary {
+            background: rgba(2, 119, 179, 0.2);
+            border: 1px solid #0277b3;
+            color: #0277b3;
+        }
+        .is-success {
+            background: rgba(6, 180, 41, 0.2);
+            border: 1px solid #06b429;
+            color: #06b429;
+        }
+        .is-info {
+            background: rgba(48, 89, 236, 0.2);
+            border: 1px solid #3059ec;
+            color: #3059ec;
+        }
+        .is-warning {
+            background: rgba(255, 126, 0, 0.2);
+            border: 1px solid #ff7e00;
+            color: #ff7e00;
+        }
+        .is-danger {
+            background: rgba(254, 55, 49, 0.2);
+            border: 1px solid #fe3731;
+            color: #fe3731;
+        }
+        .is-offline {
+            background: rgba(153, 153, 153, 0.2);
+            border: 1px solid #999999;
+            color: #999999;
+        }
+        .is-maintenance {
+            background: rgba(0, 160, 150, 0.2);
+            border: 1px solid #00a096;
+            color: #00a096;
+        }
+        .fanlist-main {
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+            padding: 5px 10px 0 10px;
+            text-align: center;
+            .fanlist-pic {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                margin-top: -10px;
+                .mask {
+                    width: 43px;
+                    height: 38px;
+                    .heart {
+                        position: absolute;
+                        text-align: center;
+                        top: 5px;
+                        left: 17px;
+                        /* z-index: 3;*/
+                    }
+                    .leafs {
+                        /* z-index: 1;*/
+                        position: absolute;
+                        /* animation: leafRotate 1s infinite linear;*/
+                        transform-origin: center center;
+                        width: 46px;
+                        height: 46px;
+                        /*animation-duration: 1s;*/
+                        animation-name: leafRotate;
+                        /*animation-iteration-count: infinite;
+                            animation-timing-function: linear;*/
+                        .leaf_1 {
+                            width: 9px;
+                            height: 19px;
+                            position: absolute;
+                            left: 17px;
+                            top: -1px;
+                            /*   transform-origin: left top;*/
+                        }
+                        .leaf_2 {
+                            width: 9px;
+                            height: 19px;
+                            position: absolute;
+                            left: 31px;
+                            top: 20px;
+                            /*  transform-origin: left top;*/
+                            transform: rotate(120deg);
+                        }
+                        .leaf_3 {
+                            width: 9px;
+                            height: 19px;
+                            position: absolute;
+                            left: 5px;
+                            top: 22px;
+                            /*transform-origin: left top;*/
+                            transform: rotate(240deg);
+                        }
+                    }
+                }
+            }
+            .fanlist-text {
+                margin-top: 5px;
+                width: 100%;
+                text-align: right;
+                .content-number {
+                    color: #333333;
+                    font-size: 20px;
+                    padding-right: 5px;
+                }
+            }
+            .fanlist-text span {
+                display: inline-block;
+            }
+        }
+        .fanlist-bottom {
+            display: flex;
+            justify-content: end;
+            height: 24px;
+            .tag-panel {
+                border-radius: 0 0 8px 0;
+                line-height: 20px;
+            }
+        }
+    }
+    .modelOperate{
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: center;
+        width: 80px;
+        /* height: 80px;*/
+        .el-button {
+            margin: 5px;
+        }
+    }
+}
+
+@media screen and (max-width: 1680px) {
+    .FanList-content {
+        .FanList-panel {
+            .fanlist-text {
+                font-size: 12px !important;
+                .content-number {
+                    font-size: 16px !important;
+                }
+            }
+        }
+    }
+}
+
+@media screen and (max-width: 1280px) {
+    .FanList-content {
+        .FanList-panel {
+            .fanlist-text {
+                margin-top: 10px !important;
+            }
+        }
+    }
+}
+</style>