diff --git a/ui/dasadmin/src/api/backend/dashboard.ts b/ui/dasadmin/src/api/backend/dashboard.ts
index 5caef9de..21f901fd 100644
--- a/ui/dasadmin/src/api/backend/dashboard.ts
+++ b/ui/dasadmin/src/api/backend/dashboard.ts
@@ -1,4 +1,5 @@
 import createAxios from '/@/utils/axios'
+import {addDataType, getDataReturnType, getDataType, getTreeDataReturnType} from "/@/views/backend/auth/org/type";
 
 export const url = '/admin/Dashboard/'
 
@@ -8,3 +9,11 @@ export function index() {
         method: 'get',
     })
 }
+
+export const getInstitutionalListReq = (data: getDataType) => {
+    return createAxios<addDataType, getDataReturnType<getTreeDataReturnType>>({
+        url: '/api/org/query',
+        method: 'post',
+        data: data,
+    })
+}
diff --git a/ui/dasadmin/src/assets/dashboard/Standby.png b/ui/dasadmin/src/assets/dashboard/Standby.png
new file mode 100644
index 00000000..e898970f
Binary files /dev/null and b/ui/dasadmin/src/assets/dashboard/Standby.png differ
diff --git a/ui/dasadmin/src/assets/dashboard/bg1.png b/ui/dasadmin/src/assets/dashboard/bg1.png
new file mode 100644
index 00000000..f937021f
Binary files /dev/null and b/ui/dasadmin/src/assets/dashboard/bg1.png differ
diff --git a/ui/dasadmin/src/assets/dashboard/biaogan.png b/ui/dasadmin/src/assets/dashboard/biaogan.png
new file mode 100644
index 00000000..a6bfcffb
Binary files /dev/null and b/ui/dasadmin/src/assets/dashboard/biaogan.png differ
diff --git a/ui/dasadmin/src/assets/dashboard/fanlist1.png b/ui/dasadmin/src/assets/dashboard/fanlist1.png
new file mode 100644
index 00000000..049ded0f
Binary files /dev/null and b/ui/dasadmin/src/assets/dashboard/fanlist1.png differ
diff --git a/ui/dasadmin/src/assets/dashboard/fanlist2.png b/ui/dasadmin/src/assets/dashboard/fanlist2.png
new file mode 100644
index 00000000..e363af18
Binary files /dev/null and b/ui/dasadmin/src/assets/dashboard/fanlist2.png differ
diff --git a/ui/dasadmin/src/assets/dashboard/fault.png b/ui/dasadmin/src/assets/dashboard/fault.png
new file mode 100644
index 00000000..3c4036f6
Binary files /dev/null and b/ui/dasadmin/src/assets/dashboard/fault.png differ
diff --git a/ui/dasadmin/src/assets/dashboard/fdl1.png b/ui/dasadmin/src/assets/dashboard/fdl1.png
new file mode 100644
index 00000000..ac0b38d9
Binary files /dev/null and b/ui/dasadmin/src/assets/dashboard/fdl1.png differ
diff --git a/ui/dasadmin/src/assets/dashboard/fdl2.png b/ui/dasadmin/src/assets/dashboard/fdl2.png
new file mode 100644
index 00000000..07b083f8
Binary files /dev/null and b/ui/dasadmin/src/assets/dashboard/fdl2.png differ
diff --git a/ui/dasadmin/src/assets/dashboard/fdl3.png b/ui/dasadmin/src/assets/dashboard/fdl3.png
new file mode 100644
index 00000000..453ae972
Binary files /dev/null and b/ui/dasadmin/src/assets/dashboard/fdl3.png differ
diff --git a/ui/dasadmin/src/assets/dashboard/fdl4.png b/ui/dasadmin/src/assets/dashboard/fdl4.png
new file mode 100644
index 00000000..70069489
Binary files /dev/null and b/ui/dasadmin/src/assets/dashboard/fdl4.png differ
diff --git a/ui/dasadmin/src/assets/dashboard/offline.png b/ui/dasadmin/src/assets/dashboard/offline.png
new file mode 100644
index 00000000..e043ccc2
Binary files /dev/null and b/ui/dasadmin/src/assets/dashboard/offline.png differ
diff --git a/ui/dasadmin/src/assets/dashboard/run.png b/ui/dasadmin/src/assets/dashboard/run.png
new file mode 100644
index 00000000..c3e8cc4e
Binary files /dev/null and b/ui/dasadmin/src/assets/dashboard/run.png differ
diff --git a/ui/dasadmin/src/assets/dashboard/status1.png b/ui/dasadmin/src/assets/dashboard/status1.png
new file mode 100644
index 00000000..ba7bde03
Binary files /dev/null and b/ui/dasadmin/src/assets/dashboard/status1.png differ
diff --git a/ui/dasadmin/src/assets/dashboard/status2.png b/ui/dasadmin/src/assets/dashboard/status2.png
new file mode 100644
index 00000000..c8d8b118
Binary files /dev/null and b/ui/dasadmin/src/assets/dashboard/status2.png differ
diff --git a/ui/dasadmin/src/assets/dashboard/viewP.png b/ui/dasadmin/src/assets/dashboard/viewP.png
new file mode 100644
index 00000000..29078a06
Binary files /dev/null and b/ui/dasadmin/src/assets/dashboard/viewP.png differ
diff --git a/ui/dasadmin/src/assets/dashboard/viewR.png b/ui/dasadmin/src/assets/dashboard/viewR.png
new file mode 100644
index 00000000..52484464
Binary files /dev/null and b/ui/dasadmin/src/assets/dashboard/viewR.png differ
diff --git a/ui/dasadmin/src/assets/dashboard/viewW.png b/ui/dasadmin/src/assets/dashboard/viewW.png
new file mode 100644
index 00000000..e78cbaf0
Binary files /dev/null and b/ui/dasadmin/src/assets/dashboard/viewW.png differ
diff --git a/ui/dasadmin/src/assets/dashboard/viewY.png b/ui/dasadmin/src/assets/dashboard/viewY.png
new file mode 100644
index 00000000..50b4ad9b
Binary files /dev/null and b/ui/dasadmin/src/assets/dashboard/viewY.png differ
diff --git a/ui/dasadmin/src/views/backend/auth/Enumeration/index.vue b/ui/dasadmin/src/views/backend/auth/Enumeration/index.vue
index 56c0722e..045b2e30 100644
--- a/ui/dasadmin/src/views/backend/auth/Enumeration/index.vue
+++ b/ui/dasadmin/src/views/backend/auth/Enumeration/index.vue
@@ -73,7 +73,7 @@
                 </el-form>
                 <template #footer>
                     <div class="dialog-footer">
-                        <el-button @click="visibleTypeAdd = false"> 取消 </el-button>
+                        <el-button @click="visibleTypeAdd = false">取消</el-button>
                         <el-button type="primary" @click="onSubmitType">提交</el-button>
                     </div>
                 </template>
@@ -107,7 +107,7 @@
                 </el-form>
                 <template #footer>
                     <div class="dialog-footer">
-                        <el-button @click="visibleValueAdd = false"> 取消 </el-button>
+                        <el-button @click="visibleValueAdd = false">取消</el-button>
                         <el-button type="primary" @click="onSubmitvalue">提交</el-button>
                     </div>
                 </template>
@@ -172,9 +172,6 @@ import {
 } from "/@/api/backend/Enumeration/request";
 
 
-
-
-
 const activeName = ref('1')
 interface Tree {
     enumId: number,
diff --git a/ui/dasadmin/src/views/backend/dashboard.vue b/ui/dasadmin/src/views/backend/dashboard.vue
index d50d1ea9..446a31c4 100644
--- a/ui/dasadmin/src/views/backend/dashboard.vue
+++ b/ui/dasadmin/src/views/backend/dashboard.vue
@@ -1,180 +1,301 @@
 <template>
     <div class="default-main">
-        <div class="banner">
-            <el-row :gutter="10">
-                <el-col :md="24" :lg="18">
-                    <div class="welcome suspension">
-                        <img class="welcome-img" :src="headerSvg" alt="" />
-                        <div class="welcome-text">
-                            <div class="welcome-title">{{ adminInfo.nickname + t('utils.comma') + getGreet() }}</div>
-                            <div class="welcome-note">{{ state.remark }}</div>
-                        </div>
-                    </div>
-                </el-col>
-                <el-col :lg="6" class="hidden-md-and-down">
-                    <div class="working">
-                        <img class="working-coffee" :src="coffeeSvg" alt="" />
-                        <div class="working-text">
-                            {{ t('dashboard.You have worked today') }}<span class="time">{{ state.workingTimeFormat }}</span>
-                        </div>
-                        <div @click="onChangeWorkState()" class="working-opt working-rest">
-                            {{ state.pauseWork ? t('dashboard.Continue to work') : t('dashboard.have a bit of rest') }}
-                        </div>
-                    </div>
-                </el-col>
-            </el-row>
-        </div>
-        <div class="small-panel-box">
-            <el-row :gutter="20">
-                <el-col :sm="12" :lg="6">
-                    <div class="small-panel user-reg suspension">
-                        <div class="small-panel-title">{{ t('dashboard.Member registration') }}</div>
-                        <div class="small-panel-content">
-                            <div class="content-left">
-                                <Icon color="#8595F4" size="20" name="fa fa-line-chart" />
-                                <span id="user_reg_number">5456</span>
-                            </div>
-                            <div class="content-right">+14%</div>
-                        </div>
-                    </div>
-                </el-col>
-                <el-col :sm="12" :lg="6">
-                    <div class="small-panel file suspension">
-                        <div class="small-panel-title">{{ t('dashboard.Number of attachments Uploaded') }}</div>
-                        <div class="small-panel-content">
-                            <div class="content-left">
-                                <Icon color="#AD85F4" size="20" name="fa fa-file-text" />
-                                <span id="file_number">1234</span>
-                            </div>
-                            <div class="content-right">+50%</div>
-                        </div>
-                    </div>
-                </el-col>
-                <el-col :sm="12" :lg="6">
-                    <div class="small-panel users suspension">
-                        <div class="small-panel-title">{{ t('dashboard.Total number of members') }}</div>
-                        <div class="small-panel-content">
-                            <div class="content-left">
-                                <Icon color="#74A8B5" size="20" name="fa fa-users" />
-                                <span id="users_number">9486</span>
-                            </div>
-                            <div class="content-right">+28%</div>
-                        </div>
-                    </div>
-                </el-col>
-                <el-col :sm="12" :lg="6">
-                    <div class="small-panel addons suspension">
-                        <div class="small-panel-title">{{ t('dashboard.Number of installed plug-ins') }}</div>
-                        <div class="small-panel-content">
-                            <div class="content-left">
-                                <Icon color="#F48595" size="20" name="fa fa-object-group" />
-                                <span id="addons_number">875</span>
-                            </div>
-                            <div class="content-right">+88%</div>
-                        </div>
-                    </div>
-                </el-col>
-            </el-row>
-        </div>
-        <div class="growth-chart">
-            <el-row :gutter="20">
-                <el-col class="lg-mb-20" :xs="24" :sm="24" :md="12" :lg="9">
-                    <el-card shadow="hover" :header="t('dashboard.Membership growth')">
-                        <div class="user-growth-chart" :ref="chartRefs.set"></div>
-                    </el-card>
-                </el-col>
-                <el-col class="lg-mb-20" :xs="24" :sm="24" :md="12" :lg="9">
-                    <el-card shadow="hover" :header="t('dashboard.Annex growth')">
-                        <div class="file-growth-chart" :ref="chartRefs.set"></div>
-                    </el-card>
-                </el-col>
-                <el-col :xs="24" :sm="24" :md="24" :lg="6">
-                    <el-card class="new-user-card" shadow="hover" :header="t('dashboard.New member')">
-                        <div class="new-user-growth">
-                            <el-scrollbar>
-                                <div class="new-user-item">
-                                    <img class="new-user-avatar" src="~assets/login-header.png" alt="" />
-                                    <div class="new-user-base">
-                                        <div class="new-user-name">妙码生花</div>
-                                        <div class="new-user-time">12分钟前{{ t('dashboard.Joined us') }}</div>
+        <el-row :gutter="20">
+            <el-col :span="6">
+                <div class="grid-content ep-bg-purple">
+                    <!--风场概览-->
+                    <div class="overview panelBg">
+                        <el-text class="mx-1 homelabel">风场概览</el-text>
+                        <el-row :gutter="10">
+                            <el-col :span="12">
+                                <div :sm="12" :lg="6" class="small-panel" style="margin-bottom: 10px;">
+                                    <img class="small-panel-pic" src="~assets/dashboard/viewP.png" alt="">
+                                    <div class="small-base">
+                                        <div><span class="content-number">{{overviewData.power}}</span> <span>MW</span></div>
+                                        <div>功率</div>
                                     </div>
-                                    <Icon class="new-user-arrow" color="#8595F4" name="fa fa-angle-right" />
                                 </div>
-                                <div class="new-user-item">
-                                    <img class="new-user-avatar" src="~assets/login-header.png" alt="" />
-                                    <div class="new-user-base">
-                                        <div class="new-user-name">码上生花</div>
-                                        <div class="new-user-time">12分钟前{{ t('dashboard.Joined us') }}</div>
+                                <div :sm="12" :lg="6" class="small-panel">
+                                    <img class="small-panel-pic" src="~assets/dashboard/viewW.png" alt="">
+                                    <div class="small-base">
+                                        <div><span class="content-number">{{overviewData.windSpeed}}</span> <span>m/s</span></div>
+                                        <div>风速</div>
                                     </div>
-                                    <Icon class="new-user-arrow" color="#8595F4" name="fa fa-angle-right" />
                                 </div>
-                                <div class="new-user-item">
-                                    <img class="new-user-avatar" src="~assets/login-header.png" alt="" />
-                                    <div class="new-user-base">
-                                        <div class="new-user-name">Admin</div>
-                                        <div class="new-user-time">12分钟前{{ t('dashboard.Joined us') }}</div>
+                            </el-col>
+                            <el-col :span="12">
+                                <div :sm="12" :lg="6" class="small-panel" style="margin-bottom: 10px;">
+                                    <img class="small-panel-pic" src="~assets/dashboard/viewR.png" alt="">
+                                    <div class="small-base">
+                                        <div><span class="content-number">{{overviewData.dailyUsageHours}}</span> <span>H</span></div>
+                                        <div>日利用小时</div>
                                     </div>
-                                    <Icon class="new-user-arrow" color="#8595F4" name="fa fa-angle-right" />
                                 </div>
-                                <div class="new-user-item">
-                                    <img class="new-user-avatar" :src="fullUrl('/static/images/avatar.png')" alt="" />
-                                    <div class="new-user-base">
-                                        <div class="new-user-name">纯属虚构</div>
-                                        <div class="new-user-time">12分钟前{{ t('dashboard.Joined us') }}</div>
+                                <div :sm="12" :lg="6" class="small-panel">
+                                    <img class="small-panel-pic" src="~assets/dashboard/viewY.png" alt="">
+                                    <div class="small-base">
+                                        <div><span class="content-number">{{overviewData.monthlyUsageHours}}</span> <span>H</span></div>
+                                        <div>月利用小时</div>
                                     </div>
-                                    <Icon class="new-user-arrow" color="#8595F4" name="fa fa-angle-right" />
                                 </div>
-                            </el-scrollbar>
-                        </div>
-                    </el-card>
-                </el-col>
-            </el-row>
-        </div>
+                            </el-col>
+                        </el-row>
+                    </div>
 
-        <div class="growth-chart">
-            <el-row :gutter="20">
-                <el-col class="lg-mb-20" :xs="24" :sm="24" :md="24" :lg="12">
-                    <el-card shadow="hover" :header="t('dashboard.Member source')">
-                        <div class="user-source-chart" :ref="chartRefs.set"></div>
-                    </el-card>
-                </el-col>
-                <el-col class="lg-mb-20" :xs="24" :sm="24" :md="24" :lg="12">
-                    <el-card shadow="hover" :header="t('dashboard.Member last name')">
-                        <div class="user-surname-chart" :ref="chartRefs.set"></div>
-                    </el-card>
-                </el-col>
-            </el-row>
-        </div>
+                    <!--今日运行状态-->
+                    <div class="status panelBg">
+                        <el-text class="mx-1 homelabel">今日运行状态</el-text>
+                        <el-row :gutter="10" class="statusrow">
+                            <el-col :span="12">
+                                <div class="status-panel">
+                                    <img class="status-panel-pic" src="~assets/dashboard/status1.png" alt="">
+                                    <div class="status-base">
+                                        <div><span class="content-number">{{currentDayStatus.windTurbineNum}}</span> <span>台</span></div>
+                                        <div>风机台数</div>
+                                    </div>
+                                </div>
+                            </el-col>
+                            <el-col :span="12">
+                                <div class="status-panel">
+                                    <img class="status-panel-pic" src="~assets/dashboard/status2.png" alt="">
+                                    <div class="status-base">
+                                        <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/run.png" alt="">
+                                        <p>运行</p>
+                                    </div>
+
+                                    <div class="status-base">
+                                        <div><span>容量</span> <span class="content-number">{{currentDayStatus.runCapacity}}</span> <span>MW</span></div>
+                                        <div><span>台数</span> <span class="content-number">{{currentDayStatus.runNum}}</span> <span>台</span></div>
+                                    </div>
+                                </div>
+                            </el-col>
+                            <el-col :span="12">
+                                <div class="status-panel status-con">
+                                    <div>
+                                        <img class="status-panel-piczt" src="~assets/dashboard/Standby.png" alt="">
+                                        <p>待机</p>
+                                    </div>
+                                    <div class="status-base">
+                                        <div><span>容量</span> <span class="content-number">{{currentDayStatus.standbyCapacity}}</span> <span>MW</span></div>
+                                        <div><span>台数</span> <span class="content-number">{{currentDayStatus.standbyNum}}</span> <span>台</span></div>
+                                    </div>
+                                </div>
+                            </el-col>
+                        </el-row>
+                        <el-row :gutter="10">
+                            <el-col :span="12">
+                                <div class="status-panel status-con">
+                                    <div>
+                                        <img class="status-panel-piczt" src="~assets/dashboard/fault.png" alt="">
+                                        <p>故障</p>
+                                    </div>
+
+                                    <div class="status-base">
+                                        <div><span>容量</span> <span class="content-number">{{currentDayStatus.faultCapacity}}</span> <span>MW</span></div>
+                                        <div><span>台数</span> <span class="content-number">{{currentDayStatus.faultNum}}</span> <span>台</span></div>
+                                    </div>
+                                </div>
+                            </el-col>
+                            <el-col :span="12">
+                                <div class="status-panel status-con">
+                                    <div>
+                                        <img class="status-panel-piczt" src="~assets/dashboard/offline.png" alt="">
+                                        <p>离线</p>
+                                    </div>
+
+                                    <div class="status-base">
+                                        <div><span>容量</span> <span class="content-number">{{currentDayStatus.offlineCapacity}}</span> <span>MW</span></div>
+                                        <div><span>台数</span> <span class="content-number">{{currentDayStatus.offlineNum}}</span> <span>台</span></div>
+                                    </div>
+                                </div>
+                            </el-col>
+                        </el-row>
+                    </div>
+
+                    <!--功率趋势-->
+                    <div class="power panelBg" style="margin-bottom: 0;">
+                        <el-text class="mx-1 homelabel">功率趋势</el-text>
+                        <el-row :gutter="10">
+                            <el-col class="lg-mb-20" :span="24">
+                                <div class="power-chart" :ref="chartRefs.set"></div>
+                            </el-col>
+                        </el-row>
+                    </div>
+                </div>
+            </el-col>
+
+
+            <el-col :span="12">
+                <div class="grid-content ep-bg-purple-light">
+                    <!--风机矩阵-->
+                    <div class="matrix panelBg">
+                        <el-text class="mx-1 homelabel">风机矩阵</el-text>
+                        <WindContent></WindContent>
+                    </div>
+                </div>
+            </el-col>
+            <el-col :span="6">
+                <div class="grid-content ep-bg-purple">
+                    <!--发电量概况-->
+                    <div class="summarize panelBg">
+                        <div class="summarize-title">
+                            <el-text class="mx-1 homelabel">发电量概况</el-text>
+                            <el-text class="mx-1" style="margin-bottom: 20px;">
+                                当日发电量
+                                <span class="content-number" style="color: #0277B3;">{{generationOverview.dailyGeneration}}</span>
+                                kWh
+                            </el-text>
+                        </div>
+                        <el-row :gutter="5">
+                            <el-col :span="6">
+                                <div class="summarize-panel">
+                                    <div class="summarize-panel-pic">
+                                        <img src="~assets/dashboard/fdl1.png" alt="">
+                                    </div>
+                                    <div class="summarize-panel-base">
+                                        <div><span class="content-number">{{generationOverview.dayGeneration}}</span></div>
+                                        <div><span>kWh</span></div>
+                                        <div><span>日发电量</span></div>
+                                    </div>
+                                </div>
+                            </el-col>
+                            <el-col :span="6">
+                                <div class="summarize-panel">
+                                    <div class="summarize-panel-pic">
+                                        <img src="~assets/dashboard/fdl2.png" alt="">
+                                    </div>
+                                    <div class="summarize-panel-base">
+                                        <div><span class="content-number">{{generationOverview.monthGeneration}}</span></div>
+                                        <div><span>万kWh</span></div>
+                                        <div><span>月发电量</span></div>
+                                    </div>
+                                </div>
+                            </el-col>
+                            <el-col :span="6">
+                                <div class="summarize-panel">
+                                    <div class="summarize-panel-pic">
+                                        <img src="~assets/dashboard/fdl3.png" alt="">
+                                    </div>
+                                    <div class="summarize-panel-base">
+                                        <div><span class="content-number">{{generationOverview.yearGeneration}}</span></div>
+                                        <div><span>万kWh</span></div>
+                                        <div><span>年发电量</span></div>
+                                    </div>
+                                </div>
+                            </el-col>
+                            <el-col :span="6">
+                                <div class="summarize-panel">
+                                    <div class="summarize-panel-pic">
+                                        <img src="~assets/dashboard/fdl4.png" alt="">
+                                    </div>
+                                    <div class="summarize-panel-base">
+                                        <div><span class="content-number">{{generationOverview.totalGeneration}}</span></div>
+                                        <div><span>万kWh</span></div>
+                                        <div><span>总发电量</span></div>
+                                    </div>
+                                </div>
+                            </el-col>
+                        </el-row>
+                    </div>
+
+                    <!--发电量趋势-->
+                    <div class="trend panelBg">
+                        <el-text class="mx-1 homelabel">发电量趋势</el-text>
+                        <el-row :gutter="10">
+                            <el-col :span="24">
+                                <el-tabs v-model="activeName" class="demo-tabs trend-tabs" @tab-click="tabhandleClick" ref="userTab">
+                                    <el-tab-pane label="日" name="first">
+                                        <div class="trend-chart" :ref="chartRefs.set"></div>
+                                    </el-tab-pane>
+                                    <el-tab-pane label="月" name="second">
+                                        <div class="trend-chart" :ref="chartRefs.set"></div>
+                                    </el-tab-pane>
+                                </el-tabs>
+                            </el-col>
+                        </el-row>
+                    </div>
+
+                    <!--实时告警-->
+                    <div class="trend panelBg" style="margin-bottom: 0;">
+                        <el-text class="mx-1 homelabel">实时告警</el-text>
+                        <el-row :gutter="10">
+                            <el-col :span="24">
+                                <el-table :data="tableData"
+                                          class="tablePart"
+                                          height="250"
+                                          ref="myTable"
+                                          @mouseover.native="clearScroll"
+                                          @mouseleave.native="createScroll">
+                                    <el-table-column fixed prop="time" label="时间" />
+                                    <el-table-column prop="name" label="风机" />
+                                    <el-table-column prop="alertcontent" label="告警内容" />
+                                    <el-table-column label="操作">
+                                        <template #default="scope">
+                                            <a @click="">确认</a>
+                                        </template>
+                                    </el-table-column>
+                                </el-table>
+                            </el-col>
+                        </el-row>
+                    </div>
+                </div>
+            </el-col>
+        </el-row>
     </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted, onUnmounted, reactive, nextTick, onActivated, watch, onBeforeMount } from 'vue'
-import headerSvg from '/@/assets/dashboard/header-1.svg'
-import coffeeSvg from '/@/assets/dashboard/coffee.svg'
-import { CountUp } from 'countup.js'
+import {nextTick, onActivated, onMounted, reactive, ref,onBeforeMount} from "vue";
 import * as echarts from 'echarts'
-import { useNavTabs } from '/@/stores/navTabs'
-import { useTemplateRefsList } from '@vueuse/core'
-import { index } from '/@/api/backend/dashboard'
-import { useI18n } from 'vue-i18n'
-import { Local } from '/@/utils/storage'
-import { useAdminInfo } from '/@/stores/adminInfo'
-import { WORKING_TIME } from '/@/stores/constant/cacheKey'
-import { fullUrl, getGreet } from '/@/utils/common'
-import { useEventListener } from '@vueuse/core'
-let workTimer: number
+import { useTemplateRefsList,useEventListener } from '@vueuse/core'
+import {useI18n} from "vue-i18n";
+import WindContent from '/@/views/backend/home/windMatrix.vue'
+
 
-defineOptions({
-    name: 'dashboard',
-})
 
 const d = new Date()
 const { t } = useI18n()
-const navTabs = useNavTabs()
-const adminInfo = useAdminInfo()
-const chartRefs = useTemplateRefsList<HTMLDivElement>()
+let timer = null
+let myTable = ref(null)
 
+const overviewData=ref({
+    "power": 56.2,
+    "windSpeed": 45.3,
+    "dailyUsageHours": 20,
+    "monthlyUsageHours": 78
+})
+
+const currentDayStatus=ref({
+    "windTurbineNum": 40,
+    "installedCapacity": 45.32,
+    "runCapacity": 20.2,
+    "runNum": 78,
+    "standbyCapacity": 63.2,
+    "standbyNum": 35,
+    "faultCapacity": 56.4,
+    "faultNum": 53,
+    "offlineCapacity": 16.4,
+    "offlineNum": 20
+})
+
+const generationOverview=ref({
+    "dailyGeneration": 63.2,
+    "dayGeneration": 56.2,
+    "monthGeneration": 60.2,
+    "yearGeneration": 200.6,
+    "totalGeneration": 500.6
+})
+const chartRefs = useTemplateRefsList<HTMLDivElement>()
 const state: {
     charts: any[]
     remark: string
@@ -186,306 +307,307 @@ const state: {
     workingTimeFormat: '',
     pauseWork: false,
 })
+const powerChartData =  [
+    {
+        "power": 12.6,
+        "windSpeed": 56.3,
+        "dataTime": "2024-10-17 00:00:00"
+    },
+    {
+        "power": 10.6,
+        "windSpeed": 16.3,
+        "dataTime": "2024-10-17 00:05:00"
+    }
+]
+const initpowerChart = () => {
+    const initpowerChart = echarts.init(chartRefs.value[0] as HTMLElement)
+    const xAxisdata=[];
+    const powerData=[];
+    const windSpeedData=[]
+    powerChartData.forEach((item, index) => {
+        const dataTime=item.dataTime
+        const dataTimearr=dataTime.split(' ')
+        xAxisdata.push(dataTimearr[1])
+        powerData.push(item.power)
+        windSpeedData.push(item.windSpeed)
+        const option = {
+            grid: {
+                top: 50,
+                right: 10,
+                bottom: 20,
+                left: 10,
+                containLabel:true
+            },
+            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: 0,
+                    //rotate: 45
+                },
+                splitLine: {//分割线配置
+                    show:false,
+                    lineStyle: {
+                        color: '#999999',
+                    }
+                },
+                data: xAxisdata,
+            },
+            yAxis: [
+                {
+                    type: 'value',
+                    name: '功率MW',
+                    nameTextStyle:{
+                        color: '#4E5969',
+                    },
+                    axisLine:{
+                        show:false,
+                        lineStyle: {
+                            color: "#dadada",
+                            width: 0,
+                            type: "solid"
+                        }
+                    },
+                    axisLabel: {//x轴文字的配置
+                        show: true,
+                        textStyle: {
+                            color: '#4E5969',
+                        }
+                    },
+                    axisTick:{show:false},
+                    splitLine: {
+                        interval: 50,
+                        lineStyle: {
+                            type: 'dashed',
+                            color: '#dadada',
+                        }
+                    }
+                },
+                {
+                    type: 'value',
+                    name: '风速m/s',
+                    nameTextStyle:{
+                        color: '#4E5969',
+                    },
+                    axisLine:{
+                        show:false,
+                        lineStyle: {
+                            color: "#dadada",
+                            width: 0,
+                            type: "solid"
+                        }
+                    },
+                    axisLabel: {//x轴文字的配置
+                        show: true,
+                        textStyle: {
+                            color: '#4E5969',
+                        }
+                    },
+                    axisTick:{show:false},
+                    splitLine: {
+                        interval: 50,
+                        lineStyle: {
+                            type: 'dashed',
+                            color: '#dadada',
+                        }
+                    },
 
-index().then((res) => {
-    state.remark = res.data.remark
-})
+                }
+            ],
+            legend: {
+                data: ['功率','风速'],
+                textStyle: {
+                    color: '#73767a'
+                },
+            },
+            series:[
+                {
+                    name: '功率',
+                    type: 'bar',
+                    barWidth: 20,
+                    itemStyle: {
+                        color: '#00A7EB',
+                        barBorderRadius: 2
+                    },
+                    data: powerData
 
-const countUpFun = (id: string) => {
-    nextTick(() => {
-        let value = document.getElementById(id)?.innerText
-        if (value) {
-            new CountUp(id, parseInt(value), {
-                startVal: 0,
-                duration: 3,
-            }).start()
+                },{
+                    name: '风速',
+                    type: 'line',
+                    yAxisIndex: 1,
+                    itemStyle: {
+                        color: '#FF7E00',
+                        barBorderRadius: 2
+                    },
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                            {
+                                offset: 0,
+                                color: 'rgba(255,126,0,0.8)'
+                            }
+                        ])
+                    },
+                    data: windSpeedData
+                }
+            ]
         }
+        initpowerChart.setOption(option)
+        state.charts.push(initpowerChart)
+    });
+
+}
+
+const TrendData=[
+    {
+        "currentPeriod": 56.3,
+        "samePeriod": 63.5,
+        "generationTime": "2024-10-01"
+    },
+    {
+        "currentPeriod": 66.3,
+        "samePeriod": 73.5,
+        "generationTime": "2024-10-02"
+    },
+    {
+        "currentPeriod": 66.3,
+        "samePeriod": 73.5,
+        "generationTime": "2024-10-03"
+    }
+]
+const timeType="日"
+
+const inittrendChart = (t,u) => {
+    const currentPeriod=[];
+    const samePeriod=[]
+    const xAxisdata=[]
+    TrendData.forEach((item, index) => {
+        const generationTime=item.generationTime
+        const generationTimearr=generationTime.split('-')
+        xAxisdata.push(generationTimearr[2])
+        currentPeriod.push(item.currentPeriod)
+        samePeriod.push(item.samePeriod)
+
+        const inittrendChart = echarts.init(chartRefs.value[u] as HTMLElement)
+        const option = {
+            grid: {
+                top: 30,
+                right: 10,
+                bottom: 20,
+                left: 25,
+                borderColor:'#dadada'
+            },
+            tooltip: {
+                trigger: 'axis',
+                axisPointer: {
+                    type: 'shadow'
+                }
+            },
+            xAxis: {
+                type: 'category',
+                axisLine:{
+                    show:true,
+                    lineStyle: {
+                        color: '#dadada',
+                        width: 1,
+                        type: "solid"
+                    }
+                },
+                axisLabel: {//x轴文字的配置
+                    show: true,
+                    textStyle: {
+                        color: '#4E5969',
+                    }
+                },
+                splitLine: {//分割线配置
+                    show:false,
+                    lineStyle: {
+                        color: '#999999',
+                    }
+                },
+                data: xAxisdata,
+            },
+            yAxis: [
+                {
+                    type: 'value',
+                    name: 'kWh',
+                    nameTextStyle:{
+                        color: '#4E5969',
+                    },
+                    axisLine:{
+                        show:false,
+                        lineStyle: {
+                            color: "#dadada",
+                            width: 0,
+                            type: "solid"
+                        }
+                    },
+                    axisLabel: {//x轴文字的配置
+                        show: true,
+                        textStyle: {
+                            color: '#4E5969',
+                        }
+                    },
+                    axisTick:{show:false},
+                    splitLine: {
+                        interval: 50,
+                        lineStyle: {
+                            type: 'dashed',
+                            color: '#dadada',
+                        }
+                    }
+                },
+
+            ],
+            legend: {
+                data: ['本期','同期'],
+                textStyle: {
+                    color: '#73767a',
+                },
+            },
+            series:
+                [
+                {
+                    name: '本期',
+                    data: currentPeriod,
+                    type: 'bar',
+                    smooth: true,
+                    itemStyle: {
+                        color: '#0277B3'
+                    }
+                },{
+                    name: '同期',
+                    data: samePeriod,
+                    type: 'bar',
+                    smooth: true,
+                    itemStyle: {
+                        color: '#00A096'
+                    }
+                },
+
+            ],
+        }
+        inittrendChart.setOption(option)
+        state.charts.push(inittrendChart)
     })
 }
 
-const initCountUp = () => {
-    countUpFun('user_reg_number')
-    countUpFun('file_number')
-    countUpFun('users_number')
-    countUpFun('addons_number')
-}
-
-const initUserGrowthChart = () => {
-    const userGrowthChart = echarts.init(chartRefs.value[0] as HTMLElement)
-    const option = {
-        grid: {
-            top: 0,
-            right: 0,
-            bottom: 20,
-            left: 0,
-        },
-        xAxis: {
-            data: [
-                t('dashboard.Monday'),
-                t('dashboard.Tuesday'),
-                t('dashboard.Wednesday'),
-                t('dashboard.Thursday'),
-                t('dashboard.Friday'),
-                t('dashboard.Saturday'),
-                t('dashboard.Sunday'),
-            ],
-        },
-        yAxis: {},
-        legend: {
-            data: [t('dashboard.Visits'), t('dashboard.Registration volume')],
-            textStyle: {
-                color: '#73767a',
-            },
-        },
-        series: [
-            {
-                name: t('dashboard.Visits'),
-                data: [100, 160, 280, 230, 190, 200, 480],
-                type: 'line',
-                smooth: true,
-                areaStyle: {
-                    color: '#8595F4',
-                },
-            },
-            {
-                name: t('dashboard.Registration volume'),
-                data: [45, 180, 146, 99, 210, 127, 288],
-                type: 'line',
-                smooth: true,
-                areaStyle: {
-                    color: '#F48595',
-                    opacity: 0.5,
-                },
-            },
-        ],
-    }
-    userGrowthChart.setOption(option)
-    state.charts.push(userGrowthChart)
-}
-
-const initFileGrowthChart = () => {
-    const fileGrowthChart = echarts.init(chartRefs.value[1] as HTMLElement)
-    const option = {
-        grid: {
-            top: 30,
-            right: 0,
-            bottom: 20,
-            left: 0,
-        },
-        tooltip: {
-            trigger: 'item',
-        },
-        legend: {
-            type: 'scroll',
-            bottom: 15,
-            data: (function () {
-                var list = []
-                for (var i = 1; i <= 12; i++) {
-                    list.push(i + t('dashboard.month'))
-                }
-                return list
-            })(),
-            textStyle: {
-                color: '#73767a',
-            },
-        },
-        visualMap: {
-            top: 'middle',
-            right: 10,
-            color: ['red', 'yellow'],
-            calculable: true,
-        },
-        radar: {
-            indicator: [
-                { name: t('dashboard.picture') },
-                { name: t('dashboard.file') },
-                { name: t('dashboard.table') },
-                { name: t('dashboard.Compressed package') },
-            ],
-        },
-        series: (function () {
-            var series = []
-            for (var i = 1; i <= 12; i++) {
-                series.push({
-                    type: 'radar',
-                    symbol: 'none',
-                    lineStyle: {
-                        width: 1,
-                    },
-                    emphasis: {
-                        areaStyle: {
-                            color: 'rgba(0,250,0,0.3)',
-                        },
-                    },
-                    data: [
-                        {
-                            value: [(40 - i) * 10, (38 - i) * 4 + 60, i * 5 + 10, i * 20],
-                            name: i + t('dashboard.month'),
-                        },
-                    ],
-                })
-            }
-            return series
-        })(),
-    }
-    fileGrowthChart.setOption(option)
-    state.charts.push(fileGrowthChart)
-}
-
-const initUserSourceChart = () => {
-    const UserSourceChart = echarts.init(chartRefs.value[2] as HTMLElement)
-    const pathSymbols = {
-        reindeer:
-            'path://M-22.788,24.521c2.08-0.986,3.611-3.905,4.984-5.892 c-2.686,2.782-5.047,5.884-9.102,7.312c-0.992,0.005-0.25-2.016,0.34-2.362l1.852-0.41c0.564-0.218,0.785-0.842,0.902-1.347 c2.133-0.727,4.91-4.129,6.031-6.194c1.748-0.7,4.443-0.679,5.734-2.293c1.176-1.468,0.393-3.992,1.215-6.557 c0.24-0.754,0.574-1.581,1.008-2.293c-0.611,0.011-1.348-0.061-1.959-0.608c-1.391-1.245-0.785-2.086-1.297-3.313 c1.684,0.744,2.5,2.584,4.426,2.586C-8.46,3.012-8.255,2.901-8.04,2.824c6.031-1.952,15.182-0.165,19.498-3.937 c1.15-3.933-1.24-9.846-1.229-9.938c0.008-0.062-1.314-0.004-1.803-0.258c-1.119-0.771-6.531-3.75-0.17-3.33 c0.314-0.045,0.943,0.259,1.439,0.435c-0.289-1.694-0.92-0.144-3.311-1.946c0,0-1.1-0.855-1.764-1.98 c-0.836-1.09-2.01-2.825-2.992-4.031c-1.523-2.476,1.367,0.709,1.816,1.108c1.768,1.704,1.844,3.281,3.232,3.983 c0.195,0.203,1.453,0.164,0.926-0.468c-0.525-0.632-1.367-1.278-1.775-2.341c-0.293-0.703-1.311-2.326-1.566-2.711 c-0.256-0.384-0.959-1.718-1.67-2.351c-1.047-1.187-0.268-0.902,0.521-0.07c0.789,0.834,1.537,1.821,1.672,2.023 c0.135,0.203,1.584,2.521,1.725,2.387c0.102-0.259-0.035-0.428-0.158-0.852c-0.125-0.423-0.912-2.032-0.961-2.083 c-0.357-0.852-0.566-1.908-0.598-3.333c0.4-2.375,0.648-2.486,0.549-0.705c0.014,1.143,0.031,2.215,0.602,3.247 c0.807,1.496,1.764,4.064,1.836,4.474c0.561,3.176,2.904,1.749,2.281-0.126c-0.068-0.446-0.109-2.014-0.287-2.862 c-0.18-0.849-0.219-1.688-0.113-3.056c0.066-1.389,0.232-2.055,0.277-2.299c0.285-1.023,0.4-1.088,0.408,0.135 c-0.059,0.399-0.131,1.687-0.125,2.655c0.064,0.642-0.043,1.768,0.172,2.486c0.654,1.928-0.027,3.496,1,3.514 c1.805-0.424,2.428-1.218,2.428-2.346c-0.086-0.704-0.121-0.843-0.031-1.193c0.221-0.568,0.359-0.67,0.312-0.076 c-0.055,0.287,0.031,0.533,0.082,0.794c0.264,1.197,0.912,0.114,1.283-0.782c0.15-0.238,0.539-2.154,0.545-2.522 c-0.023-0.617,0.285-0.645,0.309,0.01c0.064,0.422-0.248,2.646-0.205,2.334c-0.338,1.24-1.105,3.402-3.379,4.712 c-0.389,0.12-1.186,1.286-3.328,2.178c0,0,1.729,0.321,3.156,0.246c1.102-0.19,3.707-0.027,4.654,0.269 c1.752,0.494,1.531-0.053,4.084,0.164c2.26-0.4,2.154,2.391-1.496,3.68c-2.549,1.405-3.107,1.475-2.293,2.984 c3.484,7.906,2.865,13.183,2.193,16.466c2.41,0.271,5.732-0.62,7.301,0.725c0.506,0.333,0.648,1.866-0.457,2.86 c-4.105,2.745-9.283,7.022-13.904,7.662c-0.977-0.194,0.156-2.025,0.803-2.247l1.898-0.03c0.596-0.101,0.936-0.669,1.152-1.139 c3.16-0.404,5.045-3.775,8.246-4.818c-4.035-0.718-9.588,3.981-12.162,1.051c-5.043,1.423-11.449,1.84-15.895,1.111 c-3.105,2.687-7.934,4.021-12.115,5.866c-3.271,3.511-5.188,8.086-9.967,10.414c-0.986,0.119-0.48-1.974,0.066-2.385l1.795-0.618 C-22.995,25.682-22.849,25.035-22.788,24.521z',
-        plane: 'path://M1.112,32.559l2.998,1.205l-2.882,2.268l-2.215-0.012L1.112,32.559z M37.803,23.96 c0.158-0.838,0.5-1.509,0.961-1.904c-0.096-0.037-0.205-0.071-0.344-0.071c-0.777-0.005-2.068-0.009-3.047-0.009 c-0.633,0-1.217,0.066-1.754,0.18l2.199,1.804H37.803z M39.738,23.036c-0.111,0-0.377,0.325-0.537,0.924h1.076 C40.115,23.361,39.854,23.036,39.738,23.036z M39.934,39.867c-0.166,0-0.674,0.705-0.674,1.986s0.506,1.986,0.674,1.986 s0.672-0.705,0.672-1.986S40.102,39.867,39.934,39.867z M38.963,38.889c-0.098-0.038-0.209-0.07-0.348-0.073 c-0.082,0-0.174,0-0.268-0.001l-7.127,4.671c0.879,0.821,2.42,1.417,4.348,1.417c0.979,0,2.27-0.006,3.047-0.01 c0.139,0,0.25-0.034,0.348-0.072c-0.646-0.555-1.07-1.643-1.07-2.967C37.891,40.529,38.316,39.441,38.963,38.889z M32.713,23.96 l-12.37-10.116l-4.693-0.004c0,0,4,8.222,4.827,10.121H32.713z M59.311,32.374c-0.248,2.104-5.305,3.172-8.018,3.172H39.629 l-25.325,16.61L9.607,52.16c0,0,6.687-8.479,7.95-10.207c1.17-1.6,3.019-3.699,3.027-6.407h-2.138 c-5.839,0-13.816-3.789-18.472-5.583c-2.818-1.085-2.396-4.04-0.031-4.04h0.039l-3.299-11.371h3.617c0,0,4.352,5.696,5.846,7.5 c2,2.416,4.503,3.678,8.228,3.87h30.727c2.17,0,4.311,0.417,6.252,1.046c3.49,1.175,5.863,2.7,7.199,4.027 C59.145,31.584,59.352,32.025,59.311,32.374z M22.069,30.408c0-0.815-0.661-1.475-1.469-1.475c-0.812,0-1.471,0.66-1.471,1.475 s0.658,1.475,1.471,1.475C21.408,31.883,22.069,31.224,22.069,30.408z M27.06,30.408c0-0.815-0.656-1.478-1.466-1.478 c-0.812,0-1.471,0.662-1.471,1.478s0.658,1.477,1.471,1.477C26.404,31.885,27.06,31.224,27.06,30.408z M32.055,30.408 c0-0.815-0.66-1.475-1.469-1.475c-0.808,0-1.466,0.66-1.466,1.475s0.658,1.475,1.466,1.475 C31.398,31.883,32.055,31.224,32.055,30.408z M37.049,30.408c0-0.815-0.658-1.478-1.467-1.478c-0.812,0-1.469,0.662-1.469,1.478 s0.656,1.477,1.469,1.477C36.389,31.885,37.049,31.224,37.049,30.408z M42.039,30.408c0-0.815-0.656-1.478-1.465-1.478 c-0.811,0-1.469,0.662-1.469,1.478s0.658,1.477,1.469,1.477C41.383,31.885,42.039,31.224,42.039,30.408z M55.479,30.565 c-0.701-0.436-1.568-0.896-2.627-1.347c-0.613,0.289-1.551,0.476-2.73,0.476c-1.527,0-1.639,2.263,0.164,2.316 C52.389,32.074,54.627,31.373,55.479,30.565z',
-        rocket: 'path://M-244.396,44.399c0,0,0.47-2.931-2.427-6.512c2.819-8.221,3.21-15.709,3.21-15.709s5.795,1.383,5.795,7.325C-237.818,39.679-244.396,44.399-244.396,44.399z M-260.371,40.827c0,0-3.881-12.946-3.881-18.319c0-2.416,0.262-4.566,0.669-6.517h17.684c0.411,1.952,0.675,4.104,0.675,6.519c0,5.291-3.87,18.317-3.87,18.317H-260.371z M-254.745,18.951c-1.99,0-3.603,1.676-3.603,3.744c0,2.068,1.612,3.744,3.603,3.744c1.988,0,3.602-1.676,3.602-3.744S-252.757,18.951-254.745,18.951z M-255.521,2.228v-5.098h1.402v4.969c1.603,1.213,5.941,5.069,7.901,12.5h-17.05C-261.373,7.373-257.245,3.558-255.521,2.228zM-265.07,44.399c0,0-6.577-4.721-6.577-14.896c0-5.942,5.794-7.325,5.794-7.325s0.393,7.488,3.211,15.708C-265.539,41.469-265.07,44.399-265.07,44.399z M-252.36,45.15l-1.176-1.22L-254.789,48l-1.487-4.069l-1.019,2.116l-1.488-3.826h8.067L-252.36,45.15z',
-        train: 'path://M67.335,33.596L67.335,33.596c-0.002-1.39-1.153-3.183-3.328-4.218h-9.096v-2.07h5.371 c-4.939-2.07-11.199-4.141-14.89-4.141H19.72v12.421v5.176h38.373c4.033,0,8.457-1.035,9.142-5.176h-0.027 c0.076-0.367,0.129-0.751,0.129-1.165L67.335,33.596L67.335,33.596z M27.999,30.413h-3.105v-4.141h3.105V30.413z M35.245,30.413 h-3.104v-4.141h3.104V30.413z M42.491,30.413h-3.104v-4.141h3.104V30.413z M49.736,30.413h-3.104v-4.141h3.104V30.413z  M14.544,40.764c1.143,0,2.07-0.927,2.07-2.07V35.59V25.237c0-1.145-0.928-2.07-2.07-2.07H-9.265c-1.143,0-2.068,0.926-2.068,2.07 v10.351v3.105c0,1.144,0.926,2.07,2.068,2.07H14.544L14.544,40.764z M8.333,26.272h3.105v4.141H8.333V26.272z M1.087,26.272h3.105 v4.141H1.087V26.272z M-6.159,26.272h3.105v4.141h-3.105V26.272z M-9.265,41.798h69.352v1.035H-9.265V41.798z',
-    }
-    const option = {
-        tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-                type: 'none',
-            },
-            formatter: function (params: any) {
-                return params[0].name + ': ' + params[0].value
-            },
-        },
-        xAxis: {
-            data: [t('dashboard.Baidu'), t('dashboard.Direct access'), t('dashboard.take a plane'), t('dashboard.Take the high-speed railway')],
-            axisTick: { show: false },
-            axisLine: { show: false },
-            axisLabel: {
-                color: '#e54035',
-            },
-        },
-        yAxis: {
-            splitLine: { show: false },
-            axisTick: { show: false },
-            axisLine: { show: false },
-            axisLabel: { show: false },
-        },
-        color: ['#e54035'],
-        series: [
-            {
-                name: 'hill',
-                type: 'pictorialBar',
-                barCategoryGap: '-130%',
-                symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
-                itemStyle: {
-                    opacity: 0.5,
-                },
-                emphasis: {
-                    itemStyle: {
-                        opacity: 1,
-                    },
-                },
-                data: [123, 60, 25, 80],
-                z: 10,
-            },
-            {
-                name: 'glyph',
-                type: 'pictorialBar',
-                barGap: '-100%',
-                symbolPosition: 'end',
-                symbolSize: 50,
-                symbolOffset: [0, '-120%'],
-                data: [
-                    {
-                        value: 123,
-                        symbol: pathSymbols.reindeer,
-                        symbolSize: [60, 60],
-                    },
-                    {
-                        value: 60,
-                        symbol: pathSymbols.rocket,
-                        symbolSize: [50, 60],
-                    },
-                    {
-                        value: 25,
-                        symbol: pathSymbols.plane,
-                        symbolSize: [65, 35],
-                    },
-                    {
-                        value: 80,
-                        symbol: pathSymbols.train,
-                        symbolSize: [50, 30],
-                    },
-                ],
-            },
-        ],
-    }
-    UserSourceChart.setOption(option)
-    state.charts.push(UserSourceChart)
-}
-
-const initUserSurnameChart = () => {
-    const userSurnameChart = echarts.init(chartRefs.value[3] as HTMLElement)
-    const data = genData(50)
-    const option = {
-        tooltip: {
-            trigger: 'item',
-            formatter: '{a} <br/>{b} : {c} ({d}%)',
-        },
-        legend: {
-            type: 'scroll',
-            orient: 'vertical',
-            right: 10,
-            top: 20,
-            bottom: 20,
-            data: data.legendData,
-            textStyle: {
-                color: '#73767a',
-            },
-        },
-        series: [
-            {
-                name: t('dashboard.full name'),
-                type: 'pie',
-                radius: '55%',
-                center: ['40%', '50%'],
-                data: data.seriesData,
-                emphasis: {
-                    itemStyle: {
-                        shadowBlur: 10,
-                        shadowOffsetX: 0,
-                        shadowColor: 'rgba(0, 0, 0, 0.5)',
-                    },
-                },
-            },
-        ],
-    }
-    function genData(count: any) {
-        // prettier-ignore
-        const nameList = [
-            '赵', '钱', '孙', '李', '周', '吴', '郑', '王', '冯', '陈', '褚', '卫', '蒋', '沈', '韩', '杨', '朱', '秦', '尤', '许', '何', '吕', '施', '张', '孔', '曹', '严', '华', '金', '魏', '陶', '姜', '戚', '谢', '邹', '喻', '柏', '水', '窦', '章', '云', '苏', '潘', '葛', '奚', '范', '彭', '郎', '鲁', '韦', '昌', '马', '苗', '凤', '花', '方', '俞', '任', '袁', '柳', '酆', '鲍', '史', '唐', '费', '廉', '岑', '薛', '雷', '贺', '倪', '汤', '滕', '殷', '罗', '毕', '郝', '邬', '安', '常', '乐', '于', '时', '傅', '皮', '卞', '齐', '康', '伍', '余', '元', '卜', '顾', '孟', '平', '黄', '和', '穆', '萧', '尹', '姚', '邵', '湛', '汪', '祁', '毛', '禹', '狄', '米', '贝', '明', '臧', '计', '伏', '成', '戴', '谈', '宋', '茅', '庞', '熊', '纪', '舒', '屈', '项', '祝', '董', '梁', '杜', '阮', '蓝', '闵', '席', '季', '麻', '强', '贾', '路', '娄', '危'
-        ];
-        const legendData = []
-        const seriesData = []
-        for (var i = 0; i < count; i++) {
-            var name = Math.random() > 0.65 ? makeWord(4, 1) + '·' + makeWord(3, 0) : makeWord(2, 1)
-            legendData.push(name)
-            seriesData.push({
-                name: name,
-                value: Math.round(Math.random() * 100000),
-            })
-        }
-        return {
-            legendData: legendData,
-            seriesData: seriesData,
-        }
-        function makeWord(max: any, min: any) {
-            const nameLen = Math.ceil(Math.random() * max + min)
-            const name = []
-            for (var i = 0; i < nameLen; i++) {
-                name.push(nameList[Math.round(Math.random() * nameList.length - 1)])
-            }
-            return name.join('')
-        }
-    }
-    userSurnameChart.setOption(option)
-    state.charts.push(userSurnameChart)
-}
 
 const echartsResize = () => {
     nextTick(() => {
@@ -494,323 +616,254 @@ const echartsResize = () => {
         }
     })
 }
-
-const onChangeWorkState = () => {
-    const time = parseInt((new Date().getTime() / 1000).toString())
-    const workingTime = Local.get(WORKING_TIME)
-    if (state.pauseWork) {
-        // 继续工作
-        workingTime.pauseTime += time - workingTime.startPauseTime
-        workingTime.startPauseTime = 0
-        Local.set(WORKING_TIME, workingTime)
-        state.pauseWork = false
-        startWork()
-    } else {
-        // 暂停工作
-        workingTime.startPauseTime = time
-        Local.set(WORKING_TIME, workingTime)
-        clearInterval(workTimer)
-        state.pauseWork = true
-    }
-}
-
-const startWork = () => {
-    const workingTime = Local.get(WORKING_TIME) || { date: '', startTime: 0, pauseTime: 0, startPauseTime: 0 }
-    const currentDate = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate()
-    const time = parseInt((new Date().getTime() / 1000).toString())
-
-    if (workingTime.date != currentDate) {
-        workingTime.date = currentDate
-        workingTime.startTime = time
-        workingTime.pauseTime = workingTime.startPauseTime = 0
-        Local.set(WORKING_TIME, workingTime)
-    }
-
-    let startPauseTime = 0
-    if (workingTime.startPauseTime <= 0) {
-        state.pauseWork = false
-        startPauseTime = 0
-    } else {
-        state.pauseWork = true
-        startPauseTime = time - workingTime.startPauseTime // 已暂停时间
-    }
-
-    let workingSeconds = time - workingTime.startTime - workingTime.pauseTime - startPauseTime
-
-    state.workingTimeFormat = formatSeconds(workingSeconds)
-    if (!state.pauseWork) {
-        workTimer = window.setInterval(() => {
-            workingSeconds++
-            state.workingTimeFormat = formatSeconds(workingSeconds)
-        }, 1000)
-    }
-}
-
-const formatSeconds = (seconds: number) => {
-    var secondTime = 0 // 秒
-    var minuteTime = 0 // 分
-    var hourTime = 0 // 小时
-    var dayTime = 0 // 天
-    var result = ''
-
-    if (seconds < 60) {
-        secondTime = seconds
-    } else {
-        // 获取分钟，除以60取整数，得到整数分钟
-        minuteTime = Math.floor(seconds / 60)
-        // 获取秒数，秒数取佘，得到整数秒数
-        secondTime = Math.floor(seconds % 60)
-        // 如果分钟大于60，将分钟转换成小时
-        if (minuteTime >= 60) {
-            // 获取小时，获取分钟除以60，得到整数小时
-            hourTime = Math.floor(minuteTime / 60)
-            // 获取小时后取佘的分，获取分钟除以60取佘的分
-            minuteTime = Math.floor(minuteTime % 60)
-            if (hourTime >= 24) {
-                // 获取天数， 获取小时除以24，得到整数天
-                dayTime = Math.floor(hourTime / 24)
-                // 获取小时后取余小时，获取分钟除以24取余的分；
-                hourTime = Math.floor(hourTime % 24)
-            }
-        }
-    }
-
-    result =
-        hourTime +
-        t('dashboard.hour') +
-        ((minuteTime >= 10 ? minuteTime : '0' + minuteTime) + t('dashboard.minute')) +
-        ((secondTime >= 10 ? secondTime : '0' + secondTime) + t('dashboard.second'))
-    if (dayTime > 0) {
-        result = dayTime + t('dashboard.day') + result
-    }
-    return result
-}
-
 onActivated(() => {
     echartsResize()
 })
 
+
+const tableData = ref([
+    {
+        time: '2016-05-03',
+        name: 'SC-01',
+        alertcontent: '故障',
+    },
+    {
+        time: '2016-05-02',
+        name: 'SC-02',
+        alertcontent: '待机',
+    },
+    {
+        time: '2016-05-04',
+        name: 'SC-03',
+        alertcontent: '停机',
+    },
+    {
+        time: '2016-05-01',
+        name: 'SC-04',
+        alertcontent: '变桨叶1伺服驱动器故障',
+    },
+    {
+        time: '2016-05-03',
+        name: 'SC-01',
+        alertcontent: '故障',
+    },
+    {
+        time: '2016-05-02',
+        name: 'SC-02',
+        alertcontent: '待机',
+    },
+    {
+        time: '2016-05-04',
+        name: 'SC-03',
+        alertcontent: '停机',
+    },
+    {
+        time: '2016-05-01',
+        name: 'SC-04',
+        alertcontent: '变桨叶1伺服驱动器故障',
+    }
+])
+
+
+const clearScroll = () => {
+    clearInterval(timer)
+    timer = null
+}
+const createScroll = () => {
+    clearScroll()
+    const table = myTable.value.layout.table.refs
+    const tableWrapper = table.bodyWrapper.firstElementChild.firstElementChild
+
+    timer = setInterval(() => {
+        tableWrapper.scrollTop += 1
+        if (tableWrapper.clientHeight + tableWrapper.scrollTop == tableWrapper.scrollHeight) {
+            tableWrapper.scrollTop = 0
+        }
+    }, 30)
+}
+
+
 onMounted(() => {
-    startWork()
-    initCountUp()
-    initUserGrowthChart()
-    initFileGrowthChart()
-    initUserSourceChart()
-    initUserSurnameChart()
+    inittrendChart('日','1')
+    initpowerChart()
+    createScroll()
     useEventListener(window, 'resize', echartsResize)
 })
-
 onBeforeMount(() => {
     for (const key in state.charts) {
         state.charts[key].dispose()
     }
 })
-
-onUnmounted(() => {
-    clearInterval(workTimer)
-})
-
-watch(
-    () => navTabs.state.tabFullScreen,
-    () => {
+const activeName = ref('first')
+const tabhandleClick = (tabName) => {
+    setTimeout(() => {
         echartsResize()
+    }, 10)
+    debugger
+    if(tabName.props.label=="日"){
+        inittrendChart('日','1')
+    }else if(tabName.props.label=="月"){
+        inittrendChart('月','2')
     }
-)
+
+}
+
+
+
+
+
+
 </script>
 
 <style scoped lang="scss">
-.welcome {
-    background: #e1eaf9;
-    border-radius: 6px;
-    display: flex;
-    align-items: center;
-    padding: 15px 20px !important;
-    box-shadow: 0 0 30px 0 rgba(82, 63, 105, 0.05);
-    .welcome-img {
-        height: 100px;
-        margin-right: 10px;
-        user-select: none;
-    }
-    .welcome-title {
-        font-size: 1.5rem;
-        line-height: 30px;
-        color: var(--ba-color-primary-light);
-    }
-    .welcome-note {
-        padding-top: 6px;
-        font-size: 15px;
-        color: var(--el-text-color-primary);
-    }
-}
-.working {
-    height: 130px;
-    display: flex;
-    justify-content: center;
-    flex-wrap: wrap;
-    height: 100%;
-    position: relative;
-    &:hover {
-        .working-coffee {
-            -webkit-transform: translateY(-4px) scale(1.02);
-            -moz-transform: translateY(-4px) scale(1.02);
-            -ms-transform: translateY(-4px) scale(1.02);
-            -o-transform: translateY(-4px) scale(1.02);
-            transform: translateY(-4px) scale(1.02);
-            z-index: 999;
-        }
-    }
-    .working-coffee {
-        transition: all 0.3s ease;
-        width: 80px;
-    }
-    .working-text {
-        display: block;
-        width: 100%;
-        font-size: 15px;
-        text-align: center;
-        color: var(--el-text-color-primary);
-    }
-    .working-opt {
-        position: absolute;
-        top: -40px;
-        right: 10px;
-        background-color: rgba($color: #000000, $alpha: 0.3);
-        padding: 10px 20px;
-        border-radius: 20px;
-        color: var(--ba-bg-color-overlay);
-        transition: all 0.3s ease;
-        cursor: pointer;
-        opacity: 0;
-        z-index: 999;
-        &:active {
-            background-color: rgba($color: #000000, $alpha: 0.6);
-        }
-    }
-    &:hover {
-        .working-opt {
-            opacity: 1;
-            top: 0;
-        }
-        .working-done {
-            opacity: 1;
-            top: 50px;
-        }
-    }
-}
-.small-panel-box {
-    margin-top: 20px;
-}
-.small-panel {
-    background-color: #e9edf2;
-    border-radius: var(--el-border-radius-base);
-    padding: 25px;
-    margin-bottom: 20px;
-    .small-panel-title {
-        color: #92969a;
-        font-size: 15px;
-    }
-    .small-panel-content {
-        display: flex;
-        align-items: flex-end;
-        margin-top: 20px;
-        color: #2c3f5d;
-        .content-left {
-            font-size: 24px;
-            .icon {
-                margin-right: 10px;
-            }
-            span {
-                display: inline-block;
-                font-size: 28px;
-            }
-        }
-        .content-right {
-            font-size: 18px;
-            margin-left: auto;
-        }
-        .color-success {
-            color: var(--el-color-success);
-        }
-        .color-warning {
-            color: var(--el-color-warning);
-        }
-        .color-danger {
-            color: var(--el-color-danger);
-        }
-        .color-info {
-            color: var(--el-text-color-secondary);
-        }
-    }
-}
-.growth-chart {
-    margin-bottom: 20px;
-}
-.user-growth-chart,
-.file-growth-chart {
-    height: 260px;
-}
-.new-user-growth {
-    height: 300px;
-}
-
-.user-source-chart,
-.user-surname-chart {
-    height: 400px;
-}
-.new-user-item {
-    display: flex;
-    align-items: center;
-    padding: 20px;
-    margin: 10px 15px;
-    box-shadow: 0 0 30px 0 rgba(82, 63, 105, 0.05);
-    background-color: var(--ba-bg-color-overlay);
-    .new-user-avatar {
-        height: 48px;
-        width: 48px;
-        border-radius: 50%;
-    }
-    .new-user-base {
-        margin-left: 10px;
-        color: #2c3f5d;
-        .new-user-name {
-            font-size: 15px;
-        }
-        .new-user-time {
-            font-size: 13px;
-        }
-    }
-    .new-user-arrow {
-        margin-left: auto;
-    }
-}
-.new-user-card :deep(.el-card__body) {
+.default-main {
     padding: 0;
-}
-
-@media screen and (max-width: 425px) {
-    .welcome-img {
-        display: none;
+    margin: 0;
+    color: #4E5969;
+    background-color: #F2F3F5;
+    .content-number{
+        color: #333333;
+        font-size: 20px;
     }
-}
-@media screen and (max-width: 1200px) {
-    .lg-mb-20 {
+    .homelabel{
+        font-family: PingFangSC-Semibold;
+        font-size: 18px;
+        color: #4E5969;
+        letter-spacing: 0;
+        line-height: 18px;
+        font-weight: 600;
         margin-bottom: 20px;
+        display: block;
     }
-}
-html.dark {
-    .welcome {
-        background-color: var(--ba-bg-color-overlay);
-    }
-    .small-panel {
-        background-color: var(--ba-bg-color-overlay);
-        .small-panel-content {
-            color: var(--el-text-color-regular);
+    .grid-content{
+        height: 100%;
+        .panelBg{
+            background-color: #ffffff;
+            padding: 20px;
+            border-radius: 5px;
+            margin-bottom: 20px;
         }
-    }
-    .new-user-item {
-        .new-user-base {
-            color: var(--el-text-color-regular);
+        .overview{
+            .small-panel{
+                display: flex;
+                border: 1px solid #E1EDF6;
+                border-radius: 10px;
+                padding: 10px;
+                .small-panel-pic{
+                    width: 36px;
+                    height: 36px;
+                }
+                .small-base{
+                    margin-left: 10px;
+                    color: #2c3f5d;
+                }
+            }
         }
+        .status{
+            .statusrow{
+                margin-bottom: 10px;
+            }
+            .status-con{
+                padding-left: 20px !important;
+                background: #F0F6FF;
+                border-radius: 10px;
+            }
+            .status-panel{
+                display: flex;
+                padding: 10px;
+                font-size: 12px;
+                .status-panel-pic{
+                    width: 60px;
+                    height: 60px;
+                }
+                .status-base{
+                    margin-left: 10px;
+                    line-height: 23px;
+                    padding-top: 6px;
+                }
+                .status-panel-piczt{
+                    width: 36px;
+                    height: 36px;
+                }
+            }
+
+        }
+        .power{
+            .power-chart{
+                width: 100%;
+                height: 300px;
+            }
+        }
+        .matrix{
+            background: url("/@/assets/dashboard/bg1.png") no-repeat #ffffff;
+            background-size: 100% 100%;
+            height: 100%;
+        }
+        .summarize{
+            .summarize-title{
+                display: flex;
+                justify-content: space-between;
+            }
+            .summarize-panel{
+                background: #F0F6FF;
+                border-radius: 10px;
+                margin: 5px;
+                padding: 10px;
+                .summarize-panel-pic{
+                    text-align: center;
+                }
+                .summarize-panel-base{
+                    text-align: center;
+                }
+
+            }
+
+        }
+        .trend{
+            height: 350px;
+            overflow: hidden;
+            .trend-tabs{
+                :deep(.el-tabs__item){
+                    border: none;
+                    text-align: center;
+                    width: 40px;
+                    padding: 0;
+                    line-height: 24px;
+                    height: 24px;
+                }
+                :deep(.el-tabs__header .el-tabs__nav){
+                    border-radius: 0;
+                    border: none;
+                }
+                :deep(.el-tabs__header){
+                    border-bottom: 0;
+                    float: right;
+                    margin-top:-43px
+                }
+                :deep(.el-tabs__content){
+                    clear: both;
+                }
+                :deep(.el-tabs__item.is-active){
+                    background: rgba(2,119,179,0.20);
+                    border-radius: 4px;
+                    border: none;
+                }
+                :deep(.el-tabs__nav-wrap:after){
+                    background: none;
+                }
+                :deep(.el-tabs__active-bar){
+                    background: none;
+                }
+
+            }
+            .trend-chart{
+                width: 100%;
+                height: 260px;
+            }
+        }
+
     }
+
+
 }
 </style>
diff --git a/ui/dasadmin/src/views/backend/home/windMatrix.vue b/ui/dasadmin/src/views/backend/home/windMatrix.vue
new file mode 100644
index 00000000..7314248b
--- /dev/null
+++ b/ui/dasadmin/src/views/backend/home/windMatrix.vue
@@ -0,0 +1,237 @@
+<template>
+    <div class="FanList-content">
+        <el-row :gutter="10">
+            <el-col :span="8" v-for="(item, index) in FanList" style="margin-bottom: 10px;">
+                <div class="grid-content ep-bg-purple">
+                    <div class="FanList-panel" :class="item.standard==true ? 'wind-mark' : 'wind-default'">
+                        <div class="fanlist-top">
+                            <span :class="item.standard==true ? 'wind-mark-icon' : 'fanlist-icon'">
+                                <img :class="item.standard==true ? '' : 'wind-picture'" src="~assets/dashboard/biaogan.png" alt="">
+                            </span>
+                            <span class="fanlist-name"> {{ item.windTurbine }}</span>
+                            <el-tag class="tag-panel" :class="getItemClass(item)" type="primary">{{ item.windStatus }}</el-tag>
+                        </div>
+                        <div class="fanlist-main">
+                            <el-row>
+                                <el-col :span="24">
+                                    <div class="fanlist-pic">
+<!--                                        <div class="mask">
+                                            <div class="leafs">
+                                                <div class="leaf_1"></div>
+                                                <div class="leaf_2"></div>
+                                                <div class="leaf_3"></div>
+                                            </div>
+                                        </div>-->
+                                        <img src="~assets/dashboard/fanlist1.png" alt="">
+<!--                                        <img class="fc" src="~assets/dashboard/fanlist1.png" alt=""></img>-->
+<!--                                       <img :style="{ transform: `rotate(${rotationDegrees}deg)`  }" src="~assets/dashboard/fanlist1.png" alt="">-->
+                                    </div>
+                                    <div class="fanlist-pic">
+                                        <img src="~assets/dashboard/fanlist2.png" alt="">
+                                    </div>
+                                </el-col>
+                            </el-row>
+                            <el-row class="fanlist-data">
+                                <el-col :span="8">
+                                    <div class="fanlist-text"><span class="content-number">{{ item.windSpeed }}</span><span>风速m/s</span></div>
+                                </el-col>
+                                <el-col :span="8">
+                                    <div class="fanlist-text"><span class="content-number">{{ item.power }}</span><span>功率MW</span></div>
+                                </el-col>
+                                <el-col :span="8">
+                                    <div class="fanlist-text"><span class="content-number">{{ item.dayGeneration }}</span><span>日发电量kWh</span></div>
+                                </el-col>
+                            </el-row>
+                        </div>
+
+                    </div>
+                </div>
+            </el-col>
+        </el-row>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref ,onMounted,onUnmounted } from 'vue'
+
+const FanList = ref([
+    {windSpeed:'10.34','power':'10.34','dayGeneration':'10.34',windStatus:'并网',windTurbine:'A-001',standard:true},
+    {windSpeed:'34','power':'10.34','dayGeneration':'10.34',windStatus:'待机',windTurbine:'A-002',standard:false},
+    {windSpeed:'11','power':'10.34','dayGeneration':'10.34',windStatus:'启动',windTurbine:'A-003',standard:false},
+    {windSpeed:'45','power':'10.34','dayGeneration':'10.34',windStatus:'解缆',windTurbine:'A-004',standard:false},
+    {windSpeed:'12','power':'10.34','dayGeneration':'10.34',windStatus:'电网故障停机',windTurbine:'A-005',standard:false},
+    {windSpeed:'10','power':'10.34','dayGeneration':'10.34',windStatus:'维护',windTurbine:'A-006',standard:false}
+])
+
+const getItemClass = (FanList) => {
+    switch (FanList.windStatus) {
+        case '并网':
+            return 'is-primary';
+        case '并网- AGC限功率':
+            return 'is-primary';
+        case '解缆':
+            return 'is-info';
+        case '待机':
+            return 'is-warning';
+        case '故障':
+            return 'is-warning';
+        case '启动':
+            return 'is-success';
+        case '电网故障停机':
+            return 'is-danger';
+        case '风速超限停机':
+            return 'is-danger';
+        case '故障停机':
+            return 'is-danger';
+        case '塔基手动停机':
+            return 'is-danger';
+        case '远程监控停机':
+            return 'is-danger';
+        case 'AGC停机':
+            return 'is-danger';
+        case '集控停机':
+            return 'is-danger';
+        case '小风停机':
+            return 'is-danger';
+        case '维护':
+            return 'is-maintenance';
+        default:
+            return '';
+    }
+    return { FanList, getItemClass };
+};
+
+const rotationDegrees = ref(0)
+const speed = 5; // 设定一个基本旋转速度
+function startRotation(speed) {
+    return setInterval(() => {
+        rotationDegrees.value += 100;
+    }, 100); // 每100毫秒旋转一次
+}
+let intervalId;
+
+
+
+onMounted(() => {
+    // 当组件挂载时开始旋转
+    intervalId = startRotation(speed);
+});
+
+onUnmounted(() => {
+    // 当组件卸载时清除定时器
+    clearInterval(intervalId);
+});
+
+</script>
+
+<style scoped lang="scss">
+    .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-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: 40px;
+        vertical-align: middle;
+    }
+
+    .FanList-panel{
+        border-radius: 8px;
+        .fanlist-top{
+            display: flex;
+            width: 100%;
+        }
+        .fanlist-icon{
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 40px;
+            height: 40px;
+            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.20);
+            border: 1px solid #0277B3;
+            color: #0277B3;
+        }
+        .is-success{
+            background: rgba(6,180,41,0.20);
+            border: 1px solid #06B429;
+            color: #06B429;
+        }
+        .is-info{
+            background: rgba(48,89,236,0.20);
+            border: 1px solid #3059EC;
+            color: #3059EC;
+        }
+        .is-warning{
+            background: rgba(255,126,0,0.20);
+            border: 1px solid #FF7E00;
+            color: #FF7E00;
+        }
+        .is-danger{
+            background: rgba(254,55,49,0.20);
+            border: 1px solid #FE3731;
+            color: #FE3731;
+        }
+        .is-offline{
+            background: rgba(153,153,153,0.20);
+            border: 1px solid #999999;
+            color: #999999;
+        }
+        .is-maintenance{
+            background: rgba(0,160,150,0.20);
+            border: 1px solid #00A096;
+            color: #00A096;
+        }
+        .fanlist-main{
+            width: 100%;
+            display: flex;
+            padding: 10px;
+            text-align: center;
+            .fanlist-pic{
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                margin-top: -10px;
+                .mask{
+                    width: 43px;
+                    height: 38px;
+                }
+            }
+            .fanlist-text{
+                margin-top:30px;
+                .content-number{
+                    color: #333333;
+                    font-size: 20px;
+                }
+
+            }
+            .fanlist-text span{
+                display: inline-block;
+            }
+
+        }
+    }
+</style>