From a9163d3156fe322102bb560344c0a5f1748ad17f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=AB=98=E4=BA=91=E9=B9=8F?= <ypgaop@isoftstone.com>
Date: Fri, 8 Nov 2024 17:51:17 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8D=95=E9=A3=8E=E6=9C=BA=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E8=B7=B3=E8=BD=AC=E6=B7=BB=E5=8A=A0adminPath=20=E5=8D=95?=
 =?UTF-8?q?=E9=A3=8E=E6=9C=BA=EF=BC=9A=E9=A1=B5=E9=9D=A2ui=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/backend/WindBlower/index.vue    | 1095 ++++++++---------
 .../backend/equipment/airBlower/index.vue     |    7 +-
 .../equipmentManagement/measurement.vue       |   13 +-
 .../src/views/backend/home/windMatrix.vue     |    4 +-
 4 files changed, 553 insertions(+), 566 deletions(-)

diff --git a/ui/dasadmin/src/views/backend/WindBlower/index.vue b/ui/dasadmin/src/views/backend/WindBlower/index.vue
index ef4c18f5..c9e0de9e 100644
--- a/ui/dasadmin/src/views/backend/WindBlower/index.vue
+++ b/ui/dasadmin/src/views/backend/WindBlower/index.vue
@@ -1,295 +1,264 @@
 <template>
-    <div class="default-main">
-        <el-dialog v-model="visible" :title="subSystemName" width="1020" :before-close="handleClose" :show-close="false">
-            <div class="radioItem">
-                <el-radio-group v-model="dialogradioactiveName">
-                    <el-radio :value="138">模拟量</el-radio>
-                    <el-radio :value="140">状态量</el-radio>
-                </el-radio-group>
+    <el-dialog v-model="visible" :title="subSystemName" width="1020" :before-close="handleClose" :show-close="false">
+        <div class="radioItem">
+            <el-radio-group v-model="dialogradioactiveName">
+                <el-radio :value="138">模拟量</el-radio>
+                <el-radio :value="140">状态量</el-radio>
+            </el-radio-group>
+        </div>
+        <div class="dialogContent">
+            <div class="PitchPart">
+                <el-row :gutter="20">
+                    <div class="Pitchitem" v-for="item in subSystemDataList" :key="item.name">
+                        <span class="PitchitemLeft">{{ item.name }}</span>
+                        <span class="PitchitemRight">{{ item.value }}</span>
+                    </div>
+                </el-row>
             </div>
-            <div class="dialogContent">
-                <div class="PitchPart">
-                    <el-row :gutter="20">
-                        <div class="Pitchitem" v-for="item in subSystemDataList" :key="item.name">
-                            <span class="PitchitemLeft">{{ item.name }}</span>
-                            <span class="PitchitemRight">{{ item.value }}</span>
-                        </div>
-                    </el-row>
-                </div>
+        </div>
+        <template #footer>
+            <div class="dialog-footer">
+                <el-button type="primary">导出</el-button>
+                <el-button @click="visible = false">取消</el-button>
             </div>
-            <template #footer>
-                <div class="dialog-footer">
-                    <el-button type="primary">导出</el-button>
-                    <el-button @click="visible = false">取消</el-button>
-                </div>
-            </template>
-        </el-dialog>
+        </template>
+    </el-dialog>
 
-        <el-row :gutter="20">
+    <div class="windBlower" ref="windBlower">
+        <el-row :gutter="10">
             <el-col :span="6">
-                <div class="grid-content ep-bg-purple">
+                <div class="cardContentLeft">
                     <!--实时预览-->
-                    <div class="overview panelBg">
-                        <el-text class="mx-1 homelabel">实时预览</el-text>
-                        <el-row :gutter="10">
-                            <div class="realScroll" ref="listContainer">
-                                <div class="realPart">
-                                    <span class="realLeft">网侧A相电压：</span>
-                                    <span class="reafRight">{{ overviewData.iul1_690v }}</span>
-                                </div>
-                                <div class="realPart">
-                                    <span class="realLeft">网侧B相电压：</span>
-                                    <span class="reafRight">{{ overviewData.iul2_690v }}</span>
-                                </div>
-                                <div class="realPart">
-                                    <span class="realLeft">网侧C相电压：</span>
-                                    <span class="reafRight">{{ overviewData.iul3_690v }}</span>
-                                </div>
-                                <div class="realPart">
-                                    <span class="realLeft">有功功率：</span>
-                                    <span class="reafRight">{{ overviewData.igenpower }}</span>
-                                </div>
-                                <div class="realPart">
-                                    <span class="realLeft">无功功率：</span>
-                                    <span class="reafRight">{{ overviewData.ireactivepower }}</span>
-                                </div>
-                                <div class="realPart">
-                                    <span class="realLeft">功率因素：</span>
-                                    <span class="reafRight">{{ overviewData.icosphi }}</span>
-                                </div>
-                                <div class="realPart">
-                                    <span class="realLeft">主轴承温度A：</span>
-                                    <span class="reafRight">{{ overviewData.itemprotorbeara_1sec }}</span>
-                                </div>
-                                <div class="realPart">
-                                    <span class="realLeft">主轴承温度B：</span>
-                                    <span class="reafRight">{{ overviewData.itemprotorbeara_1sec }}</span>
-                                </div>
-                                <div class="realPart">
-                                    <span class="realLeft">总扭缆角度：</span>
-                                    <span class="reafRight">{{ overviewData.icabletwisttotal }}</span>
-                                </div>
-                                <div class="realPart">
-                                    <span class="realLeft">发动机驱动侧轴承温度：</span>
-                                    <span class="reafRight">{{ overviewData.itempgenbearde_1sec }}</span>
-                                </div>
-                                <div class="realPart">
-                                    <span class="realLeft">发动机非驱动侧轴承温度：</span>
-                                    <span class="reafRight">{{ overviewData.itempgenbearnde_1sec }}</span>
-                                </div>
+                    <div class="overview">
+                        <div class="cardLabel">实时预览</div>
+                        <div class="overviewDataSection" ref="listContainer">
+                            <div class="overviewDataSectionItem">
+                                <span class="realLeft">网侧A相电压：</span>
+                                <span class="reafRight">{{ overviewData.iul1_690v }}</span>
                             </div>
-                            <div class="ralIcon" @click="handleClick">
-                                <el-icon :size="20" color="#0064AA" @click="() => (overviewSlotData.visible = true)"><DArrowRight /></el-icon>
+                            <div class="overviewDataSectionItem">
+                                <span class="realLeft">网侧B相电压：</span>
+                                <span class="reafRight">{{ overviewData.iul2_690v }}</span>
                             </div>
-                        </el-row>
+                            <div class="overviewDataSectionItem">
+                                <span class="realLeft">网侧C相电压：</span>
+                                <span class="reafRight">{{ overviewData.iul3_690v }}</span>
+                            </div>
+                            <div class="overviewDataSectionItem">
+                                <span class="realLeft">有功功率：</span>
+                                <span class="reafRight">{{ overviewData.igenpower }}</span>
+                            </div>
+                            <div class="overviewDataSectionItem">
+                                <span class="realLeft">无功功率：</span>
+                                <span class="reafRight">{{ overviewData.ireactivepower }}</span>
+                            </div>
+                            <div class="overviewDataSectionItem">
+                                <span class="realLeft">功率因素：</span>
+                                <span class="reafRight">{{ overviewData.icosphi }}</span>
+                            </div>
+                            <div class="overviewDataSectionItem">
+                                <span class="realLeft">主轴承温度A：</span>
+                                <span class="reafRight">{{ overviewData.itemprotorbeara_1sec }}</span>
+                            </div>
+                            <div class="overviewDataSectionItem">
+                                <span class="realLeft">主轴承温度B：</span>
+                                <span class="reafRight">{{ overviewData.itemprotorbeara_1sec }}</span>
+                            </div>
+                            <div class="overviewDataSectionItem">
+                                <span class="realLeft">总扭缆角度：</span>
+                                <span class="reafRight">{{ overviewData.icabletwisttotal }}</span>
+                            </div>
+                            <div class="overviewDataSectionItem">
+                                <span class="realLeft">发动机驱动侧轴承温度：</span>
+                                <span class="reafRight">{{ overviewData.itempgenbearde_1sec }}</span>
+                            </div>
+                            <div class="overviewDataSectionItem">
+                                <span class="realLeft">发动机非驱动侧轴承温度：</span>
+                                <span class="reafRight">{{ overviewData.itempgenbearnde_1sec }}</span>
+                            </div>
+                        </div>
+                        <div class="overviewDataBtn">
+                            <el-icon color="#0064AA" @click="() => (overviewSlotData.visible = true)"><DArrowRight /></el-icon>
+                        </div>
                     </div>
 
                     <!--功率趋势-->
-                    <div class="power panelBg" style="margin-bottom: 0">
-                        <el-text class="mx-1 homelabel">功率趋势</el-text>
-                        <el-row :gutter="10">
-                            <el-col class="lg-mb-20" :span="24">
-                                <div class="power-chart" ref="powerChartRef"></div>
-                            </el-col>
-                        </el-row>
+                    <div class="power">
+                        <div class="cardLabel">功率趋势</div>
+                        <div class="chartBox">
+                            <div class="power-chart" ref="powerChartRef"></div>
+                        </div>
                     </div>
                 </div>
             </el-col>
 
             <el-col :span="12">
-                <div class="grid-content ep-bg-purple-light">
+                <div class="cardContentCenter">
                     <!--风机控制-->
-                    <div class="matrix panelBg">
-                        <div class="Fan-control">
-                            <div class="control-type">
-                                <el-tag v-if="realTimeData.locked === 1" class="control-tag control-tag-left" type="primary">已锁定</el-tag>
-                                <el-tag class="control-tag" type="primary">{{ realTimeDataState }}</el-tag>
-                            </div>
-                            <div class="btnLeft">
-                                <el-button
-                                    @click="sendCommand('setTurbineFastStart')"
-                                    v-if="realTimeData.iturbineoperationmode !== 16"
-                                    class="control-btn"
-                                    type="primary"
-                                    >启动</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>
-                            </div>
-                            <el-tooltip content="变桨/轮毂系统">
-                                <div @click="openSubSystem(1)" class="dot index-1"></div>
-                            </el-tooltip>
-                            <el-tooltip content="轴承/传动链/齿轮箱系统">
-                                <div @click="openSubSystem(2)" class="dot index-2"></div>
-                            </el-tooltip>
-                            <el-tooltip content="发电机系统">
-                                <div @click="openSubSystem(3)" class="dot index-3"></div>
-                            </el-tooltip>
-                            <el-tooltip content="机舱系统">
-                                <div @click="openSubSystem(4)" class="dot index-4"></div>
-                            </el-tooltip>
-                            <el-tooltip content="控制系统">
-                                <div @click="openSubSystem(5)" class="dot index-5"></div>
-                            </el-tooltip>
-                            <el-tooltip content="环境/气象系统">
-                                <div @click="openSubSystem(6)" class="dot index-6"></div>
-                            </el-tooltip>
+                    <div class="controlBackgroundImg">
+                        <div class="control-type">
+                            <el-tag v-if="realTimeData.locked === 1" class="control-tag control-tag-left" type="primary">已锁定</el-tag>
+                            <el-tag class="control-tag" type="primary">{{ realTimeDataState }}</el-tag>
                         </div>
-
-                        <div class="Parameters">
-                            <div class="Parameters-item">
-                                <img src="~assets/WindBlower/power.png" />
-                                <p class="Parameters-font">{{ realTimeDataForSingle.igenpower }}</p>
-                                <p>有功功率(MW)</p>
-                            </div>
-                            <div class="Parameters-item">
-                                <img src="~assets/WindBlower/generator.png" />
-                                <p class="Parameters-font">{{ realTimeDataForSingle.igenspeed }}</p>
-                                <p>发电机转速(RPM)</p>
-                            </div>
-                            <div class="Parameters-item">
-                                <img src="~assets/WindBlower/pitch.png" />
-                                <p class="Parameters-font">{{ realTimeDataForSingle.ipitchangle }}</p>
-                                <p>变桨角度(°)</p>
-                            </div>
-                            <div class="Parameters-item">
-                                <img src="~assets/WindBlower/speed.png" />
-                                <p class="Parameters-font">{{ realTimeDataForSingle.iwindspeed }}</p>
-                                <p>风速(m/s)</p>
-                            </div>
-                            <div class="Parameters-item">
-                                <img src="~assets/WindBlower/direction.png" />
-                                <p class="Parameters-font">{{ realTimeDataForSingle.iwinddirection }}</p>
-                                <p>风向(°)</p>
-                            </div>
+                        <div class="btnLeft">
+                            <el-button
+                                @click="sendCommand('setTurbineFastStart')"
+                                v-if="realTimeData.iturbineoperationmode !== 16"
+                                class="control-btn"
+                                type="primary"
+                                >启动</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>
                         </div>
+                        <el-tooltip content="变桨/轮毂系统">
+                            <div @click="openSubSystem(1)" class="dot index-1"></div>
+                        </el-tooltip>
+                        <el-tooltip content="轴承/传动链/齿轮箱系统">
+                            <div @click="openSubSystem(2)" class="dot index-2"></div>
+                        </el-tooltip>
+                        <el-tooltip content="发电机系统">
+                            <div @click="openSubSystem(3)" class="dot index-3"></div>
+                        </el-tooltip>
+                        <el-tooltip content="机舱系统">
+                            <div @click="openSubSystem(4)" class="dot index-4"></div>
+                        </el-tooltip>
+                        <el-tooltip content="控制系统">
+                            <div @click="openSubSystem(5)" class="dot index-5"></div>
+                        </el-tooltip>
+                        <el-tooltip content="环境/气象系统">
+                            <div @click="openSubSystem(6)" class="dot index-6"></div>
+                        </el-tooltip>
+                    </div>
+                    <div class="Parameters">
+                        <div class="Parameters-item">
+                            <img src="~assets/WindBlower/power.png" />
+                            <p class="Parameters-font">{{ realTimeDataForSingle.igenpower }}</p>
+                            <p>有功功率(MW)</p>
+                        </div>
+                        <div class="Parameters-item">
+                            <img src="~assets/WindBlower/generator.png" />
+                            <p class="Parameters-font">{{ realTimeDataForSingle.igenspeed }}</p>
+                            <p>发电机转速(RPM)</p>
+                        </div>
+                        <div class="Parameters-item">
+                            <img src="~assets/WindBlower/pitch.png" />
+                            <p class="Parameters-font">{{ realTimeDataForSingle.ipitchangle }}</p>
+                            <p>变桨角度(°)</p>
+                        </div>
+                        <div class="Parameters-item">
+                            <img src="~assets/WindBlower/speed.png" />
+                            <p class="Parameters-font">{{ realTimeDataForSingle.iwindspeed }}</p>
+                            <p>风速(m/s)</p>
+                        </div>
+                        <div class="Parameters-item">
+                            <img src="~assets/WindBlower/direction.png" />
+                            <p class="Parameters-font">{{ realTimeDataForSingle.iwinddirection }}</p>
+                            <p>风向(°)</p>
+                        </div>
+                    </div>
 
-                        <div class="chartPart">
-                            <div class="chartPart-item">
-                                <div class="chartParm" ref="temperatureChartRef1"></div>
-                            </div>
-                            <div class="chartPart-item">
-                                <div class="chartParm" ref="temperatureChartRef2"></div>
-                            </div>
-                            <div class="chartPart-item">
-                                <div class="chartParm" ref="temperatureChartRef3"></div>
-                            </div>
-                            <div class="chartPart-item item_bar">
-                                <div class="frequencyChart" ref="frequencyChartRef"></div>
-                            </div>
+                    <div class="chartPart">
+                        <div class="chartPart-item">
+                            <div class="chartParm" ref="temperatureChartRef1"></div>
+                        </div>
+                        <div class="chartPart-item">
+                            <div class="chartParm" ref="temperatureChartRef2"></div>
+                        </div>
+                        <div class="chartPart-item">
+                            <div class="chartParm" ref="temperatureChartRef3"></div>
+                        </div>
+                        <div class="chartPart-item item_bar">
+                            <div class="frequencyChart" ref="frequencyChartRef"></div>
                         </div>
                     </div>
                 </div>
             </el-col>
             <el-col :span="6">
-                <div class="grid-content ep-bg-purple">
+                <div class="cardContentRight">
                     <!--发电量概况-->
-                    <div class="summarize panelBg">
-                        <div class="summarize-title">
-                            <el-text class="mx-1 homelabel">发电量概况</el-text>
+                    <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">{{ realTimeDataForSingle.ikwhthisday }}</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">{{ realTimeDataForSingle.monthprodenergy }}</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">{{ realTimeDataForSingle.yearprodenergy }}</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">{{ realTimeDataForSingle.ikwhoverall }}</span>
+                                    </div>
+                                    <div>万kWh</div>
+                                    <div>总发电量</div>
+                                </div>
+                            </div>
                         </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">{{ realTimeDataForSingle.ikwhthisday }}</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">{{ realTimeDataForSingle.monthprodenergy }}</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">{{ realTimeDataForSingle.yearprodenergy }}</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">{{ realTimeDataForSingle.ikwhoverall }}</span>
-                                        </div>
-                                        <div><span>万kWh</span></div>
-                                        <div><span>总发电量</span></div>
-                                    </div>
-                                </div>
-                            </el-col>
-                        </el-row>
                     </div>
 
                     <!--发电量趋势-->
-                    <div class="trend panelBg">
-                        <el-text class="mx-1 homelabel">发电量趋势</el-text>
-                        <el-row :gutter="10">
-                            <el-col :span="24">
-                                <el-tabs v-model="trendChartType" class="demo-tabs trend-tabs" @tab-click="tabhandleClick" ref="userTab">
-                                    <el-tab-pane label="日" name="day"> </el-tab-pane>
-                                    <el-tab-pane label="月" name="month"> </el-tab-pane>
-                                </el-tabs>
-                                <div class="trend-chart" ref="trendChartRef"></div>
-                            </el-col>
-                        </el-row>
+                    <div class="trend">
+                        <div class="cardLabel">发电量趋势</div>
+                        <el-radio-group class="trendTabs" v-model="trendChartType" @change="tabhandleClick">
+                            <el-radio-button label="日" value="day" />
+                            <el-radio-button label="月" value="month" />
+                        </el-radio-group>
+                        <div class="trend-chart" ref="trendChartRef"></div>
                     </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 class="alarm" style="margin-bottom: 0">
+                        <div class="cardLabel">实时告警</div>
+                        <el-table
+                            :data="tableData"
+                            class="tablePart"
+                            height="calc(100% - 38px)"
+                            ref="myTable"
+                            @mouseover.native="clearScroll"
+                            @mouseleave.native="createScroll"
+                        >
+                            <el-table-column fixed prop="time" label="时间" />
+                            <el-table-column prop="alertcontent" label="告警信息" />
+                        </el-table>
                     </div>
                 </div>
             </el-col>
@@ -332,6 +301,21 @@ const enumStore = useEnumStore()
 const route = useRoute()
 
 const { t } = useI18n()
+
+const windBlower = ref()
+const computedHeight = reactive({
+    powerHeight: '305px',
+    centerHeight: '1100px',
+    alarmHeight: '360px',
+})
+const sizeChange = () => {
+    const rect = windBlower.value?.getBoundingClientRect()
+    if (!rect) return
+    computedHeight.powerHeight = rect.height - 626 + 'px'
+    computedHeight.alarmHeight = rect.height - 570 + 'px'
+    computedHeight.centerHeight = rect.height - 20 + 'px'
+}
+
 let timer: any = null
 let myTable = ref<TableInstance>()
 
@@ -348,10 +332,6 @@ const overviewData = reactive({
     itempgenbearde_1sec: '-',
     itempgenbearnde_1sec: '-',
 })
-const handleClick = () => {
-    // debugger
-    // visible.value = true
-}
 
 const realTimeDataForSingle = ref<any>({
     ikwhthisday: '-',
@@ -1024,7 +1004,7 @@ const createRealTimeData = async () => {
             const realVal = realData[item.attributeCode.toLowerCase()]
             let val = getCutDecimalsValue(realVal)
             if (enumStore.keys.includes(item.attributeCode)) {
-                val = enumStore.data[item.attributeCode][val]   
+                val = enumStore.data[item.attributeCode][val]
             }
             if (sigleDataKeys.includes(item.attributeCode.toLowerCase())) {
                 realTimeDataForSingle.value[item.attributeCode.toLowerCase()] = val === '-' ? val : val
@@ -1392,6 +1372,8 @@ const getAlarmList = () => {
 }
 getAlarmList()
 onMounted(() => {
+    window.addEventListener('resize', sizeChange)
+    sizeChange()
     getAllChartData()
     createScroll()
     useEventListener(window, 'resize', echartsResize)
@@ -1399,6 +1381,7 @@ onMounted(() => {
 })
 
 onUnmounted(() => {
+    window.removeEventListener('resize', sizeChange)
     autoUpdateForSecondTimer && clearInterval(autoUpdateForSecondTimer)
     autoUpdateTimerForHourTimer && clearInterval(autoUpdateTimerForHourTimer)
     autoUpdateTimerForMinuteTimer && clearInterval(autoUpdateTimerForMinuteTimer)
@@ -1410,299 +1393,33 @@ onUnmounted(() => {
 </script>
 
 <style scoped lang="scss">
-.default-main {
-    padding: 0;
-    margin: 0;
-    color: #4e5969;
-    background-color: #f2f3f5;
-    font-family: PingFangSC-Medium;
-    .radioItem {
-        margin-top: -43px;
-        float: right;
-    }
-    .content-number {
-        color: #333333;
-        font-size: 20px;
-    }
-    .dialog-footer {
-        text-align: center;
-        .el-button {
-            width: 120px;
-            height: 40px;
-        }
-    }
-    .homelabel {
+$marginNum: 10px;
+$labelHeight: 38px;
+@mixin cardDefaultStyle {
+    margin-top: $marginNum;
+    margin-bottom: $marginNum;
+    padding: 10px;
+    border-radius: 10px;
+    background-color: #fff;
+}
+@mixin cardlabel {
+    .cardLabel {
+        width: 100%;
+        height: $labelHeight;
         font-size: 18px;
-        color: #4e5969;
-        letter-spacing: 0;
         line-height: 18px;
         font-weight: 600;
-        margin-bottom: 20px;
-        display: block;
-    }
-    .grid-content {
-        height: 100%;
-        .panelBg {
-            background-color: #ffffff;
-            padding: 20px;
-            border-radius: 5px;
-            margin-bottom: 20px;
-        }
-        .overview {
-            height: 580px;
-            .realScroll {
-                width: 100%;
-                height: 450px;
-                .realPart {
-                    font-size: 14px;
-                    color: #333333;
-                    display: flex;
-                    justify-content: space-between;
-                    background: #f0f6ff;
-                    border-radius: 4px;
-                    width: 100%;
-                    height: 40px;
-                    line-height: 40px;
-                    margin-bottom: 5px;
-                    padding: 0 10px;
-                }
-            }
-            .ralIcon {
-                width: 100%;
-                text-align: center;
-                transform: rotate(90deg);
-                margin-top: 44px;
-                :hover {
-                    cursor: pointer;
-                }
-            }
-        }
-        .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%;
-            .Fan-control {
-                height: 480px;
-                background: url('/@/assets/WindBlower/bg.png') no-repeat #ffffff;
-                position: relative;
-                background-size: 100% 100%;
-                .control-type {
-                    width: 100%;
-                    display: flex;
-                    .control-tag {
-                        background: #0064aa;
-                        border-radius: 0 8px 0 0;
-                        min-width: 80px;
-                        height: 40px;
-                        color: #ffffff;
-                        font-size: 20px;
-                        border: none;
-                        margin-left: auto;
-                    }
-                    .control-tag-left {
-                        margin-left: 0;
-                        border-radius: 8px 0 0 0;
-                        background-color: #ff4949;
-                    }
-                }
-                .btnLeft {
-                    display: flex;
-                    flex-direction: column;
-                    align-items: flex-end;
-                    position: absolute;
-                    bottom: 0;
-                    .el-button {
-                        width: 80px;
-                        height: 40px;
-                        // background: rgb(0,100,170);
-                        border-radius: 6px;
-                        color: #ffffff;
-                        border: none;
-                        margin-bottom: 10px;
-                    }
-                }
-                .dot {
-                    position: absolute;
-                    width: 15px;
-                    height: 15px;
-                    border-radius: 10px;
-                    background-color: #ff7e00;
-                    &:hover {
-                        cursor: pointer;
-                    }
-                    &:nth-of-type(1) {
-                        top: 25%;
-                        left: 50%;
-                    }
-                }
-                .index-1 {
-                    left: 25%;
-                    top: 60%;
-                }
-                .index-2 {
-                    left: 52%;
-                    top: 53%;
-                }
-                .index-3 {
-                    left: 65%;
-                    top: 60%;
-                }
-                .index-4 {
-                    left: 83%;
-                    top: 54%;
-                }
-                .index-5 {
-                    left: 75%;
-                    top: 28%;
-                }
-                .index-6 {
-                    left: 73%;
-                    top: 4%;
-                }
-            }
-            .Parameters {
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-                margin-top: 10px;
-                .Parameters-item {
-                    width: 145px;
-                    height: 160px;
-                    background: #f0f6ff;
-                    border-radius: 8px;
-                    text-align: center;
-                    color: #4e5969;
-                    /*img{
-                        width: 80px;
-                        height: 80px;
-                    }*/
-                    .Parameters-font {
-                        font-size: 20px;
-                        color: #333333;
-                    }
-                }
-            }
-            .chartPart {
-                align-items: center;
-                margin-top: 10px;
-                display: flex;
-                justify-content: space-between;
-                .chartPart-item {
-                    width: 145px;
-                    height: 250px;
-                    background: #f0f6ff;
-                    border-radius: 8px;
-                    text-align: center;
-                    color: #4e5969;
-                    .chartParm {
-                        width: 100%;
-                        height: 250px;
-                    }
-                    .frequencyChart {
-                        width: 100%;
-                        height: 250px;
-                    }
-                }
-                .item_bar {
-                    width: 299px;
-                    height: 250px;
-                }
-            }
-        }
-        .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.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;
-            }
-        }
+        color: #4e5969;
     }
+}
+.radioItem {
+    margin-top: -43px;
+    float: right;
+}
+.dialogContent {
+    max-height: 500px;
+    overflow-y: auto;
+    overflow-x: hidden;
     .PitchPart {
         .Pitchitem {
             border: 1px solid #e1edf6;
@@ -1736,10 +1453,12 @@ onUnmounted(() => {
         }
     }
 }
-.dialogContent {
-    max-height: 500px;
-    overflow-y: auto;
-    overflow-x: hidden;
+.dialog-footer {
+    text-align: center;
+    .el-button {
+        width: 120px;
+        height: 40px;
+    }
 }
 .overviewSlot {
     display: flex;
@@ -1747,4 +1466,266 @@ onUnmounted(() => {
         margin-left: auto;
     }
 }
+
+.windBlower {
+    width: 100%;
+    height: 100%;
+    min-height: 920px;
+    background-color: #f2f3f5;
+    // overflow: hidden;
+    .cardContentLeft {
+        width: 100%;
+        .overview {
+            width: 100%;
+            @include cardDefaultStyle;
+            @include cardlabel;
+            .overviewDataSection {
+                width: 100%;
+                min-height: 495px;
+                .overviewDataSectionItem {
+                    font-size: 14px;
+                    color: #333333;
+                    display: flex;
+                    justify-content: space-between;
+                    background: #f0f6ff;
+                    border-radius: 4px;
+                    width: 100%;
+                    min-height: 40px;
+                    line-height: 40px;
+                    margin-bottom: 5px;
+                    padding: 0 10px;
+                }
+            }
+            .overviewDataBtn {
+                display: flex;
+                justify-content: center;
+                align-items: end;
+                width: 100%;
+                height: 40px;
+                font-size: 22px;
+                .el-icon {
+                    transform: rotate(90deg);
+                }
+                :hover {
+                    cursor: pointer;
+                }
+            }
+        }
+        .power {
+            @include cardDefaultStyle;
+            @include cardlabel;
+            width: 100%;
+            min-height: 285px;
+            height: v-bind('computedHeight.powerHeight');
+            .chartBox {
+                width: 100%;
+                height: calc(100% - $labelHeight);
+                .power-chart {
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+        }
+    }
+    .cardContentCenter {
+        @include cardDefaultStyle;
+        display: flex;
+        padding-bottom: 20px;
+        flex-direction: column;
+        justify-content: space-around;
+        width: 100%;
+        min-height: 900px;
+        height: v-bind('computedHeight.centerHeight');
+        .controlBackgroundImg {
+            position: relative;
+            width: 100%;
+            // height: 450px;
+            aspect-ratio: 43 / 24;
+            background: url('/@/assets/WindBlower/bg.png') no-repeat;
+            background-size: contain;
+            .control-type {
+                width: 100%;
+                display: flex;
+                .control-tag {
+                    background: #0064aa;
+                    border-radius: 0 8px 0 0;
+                    min-width: 80px;
+                    height: 40px;
+                    color: #ffffff;
+                    font-size: 20px;
+                    border: none;
+                    margin-left: auto;
+                }
+                .control-tag-left {
+                    margin-left: 0;
+                    border-radius: 8px 0 0 0;
+                    background-color: #ff4949;
+                }
+            }
+            .btnLeft {
+                display: flex;
+                flex-direction: column;
+                align-items: flex-end;
+                position: absolute;
+                bottom: 0;
+                .el-button {
+                    width: 80px;
+                    height: 40px;
+                    // background: rgb(0,100,170);
+                    border-radius: 6px;
+                    color: #ffffff;
+                    border: none;
+                    margin-bottom: 10px;
+                }
+            }
+            .dot {
+                position: absolute;
+                width: 15px;
+                height: 15px;
+                border-radius: 10px;
+                background-color: #ff7e00;
+                &:hover {
+                    cursor: pointer;
+                }
+                &:nth-of-type(1) {
+                    top: 25%;
+                    left: 50%;
+                }
+            }
+            .index-1 {
+                left: 25%;
+                top: 60%;
+            }
+            .index-2 {
+                left: 52%;
+                top: 53%;
+            }
+            .index-3 {
+                left: 65%;
+                top: 60%;
+            }
+            .index-4 {
+                left: 83%;
+                top: 54%;
+            }
+            .index-5 {
+                left: 75%;
+                top: 28%;
+            }
+            .index-6 {
+                left: 73%;
+                top: 4%;
+            }
+        }
+        .Parameters {
+            margin-top: 10px;
+            width: 100%;
+            display: flex;
+            .Parameters-item {
+                margin: 5px;
+                width: 20%;
+                height: 160px;
+                background: #f0f6ff;
+                border-radius: 8px;
+                text-align: center;
+                color: #4e5969;
+                .Parameters-font {
+                    font-size: 20px;
+                    color: #333333;
+                }
+            }
+        }
+        .chartPart {
+            margin-top: auto;
+            width: 100%;
+            min-height: 220px;
+            flex-shrink: 1;
+            display: flex;
+            justify-content: space-between;
+            .chartPart-item {
+                margin: 5px;
+                width: 23%;
+                height: 100%;
+                background: #f0f6ff;
+                border-radius: 8px;
+                text-align: center;
+                color: #4e5969;
+                .chartParm {
+                    width: 100%;
+                    height: 100%;
+                    min-height: 220px;
+                }
+                .frequencyChart {
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+            .item_bar {
+                width: 31%;
+            }
+        }
+    }
+    .cardContentRight {
+        width: 100%;
+        height: 100%;
+        // min-height: 920px;
+        .summarize {
+            width: 100%;
+            @include cardDefaultStyle;
+            @include cardlabel;
+            .summarize-panel-list {
+                width: 100%;
+                display: flex;
+                justify-content: space-between;
+            }
+            .summarize-panel {
+                margin: 5px;
+                width: 25%;
+                display: flex;
+                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;
+                        }
+                    }
+                }
+            }
+        }
+        .trend {
+            position: relative;
+            width: 100%;
+            height: 360px;
+            @include cardDefaultStyle;
+            @include cardlabel;
+            .trendTabs {
+                position: absolute;
+                right: 10px;
+                top: 5px;
+            }
+            .trend-chart {
+                width: 100%;
+                height: calc(100% - $labelHeight);
+            }
+        }
+        .alarm {
+            width: 100%;
+            min-height: 350px;
+            height: v-bind('computedHeight.alarmHeight');
+            @include cardDefaultStyle;
+            @include cardlabel;
+        }
+    }
+}
 </style>
diff --git a/ui/dasadmin/src/views/backend/equipment/airBlower/index.vue b/ui/dasadmin/src/views/backend/equipment/airBlower/index.vue
index 837d2f85..b90453b9 100644
--- a/ui/dasadmin/src/views/backend/equipment/airBlower/index.vue
+++ b/ui/dasadmin/src/views/backend/equipment/airBlower/index.vue
@@ -163,7 +163,7 @@
 
 <script setup lang="ts">
 import { SelectTypeObjType, SelectTypeKeyUnionType, TableDataObjType, TableColumnType } from './type'
-import { onUnmounted, reactive, ref, watch, nextTick } from 'vue'
+import { onUnmounted, reactive, ref, watch, nextTick, KeepAlive } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { getAirBlowerListReq, getBelongLineListReq, runAirBlowerReq } from '/@/api/backend/airBlower/request'
 import { CircleCheck, CircleClose, Loading } from '@element-plus/icons-vue'
@@ -171,6 +171,7 @@ import { ElMessage, TableInstance, ElPopconfirm } from 'element-plus'
 import { useRouter, useRoute } from 'vue-router'
 import { getRealTimeState } from './utils'
 import { sendCommandReq } from '/@/api/backend/control/request'
+import { adminBaseRoutePath } from '/@/router/static/adminBase'
 
 const router = useRouter()
 
@@ -533,11 +534,11 @@ watch(autoUpdate, (newVal: boolean) => {
 const openWindTurbine = (row: TableDataObjType) => {
     if (!router.hasRoute('windTurbine')) {
         router.addRoute('admin', {
-            path: '/windTurbine',
+            path: adminBaseRoutePath + '/windTurbine',
             name: 'windTurbine',
             component: () => import('/@/views/backend/WindBlower/index.vue'),
             meta: {
-                title: '单风机详情',
+                title: 'WindBlower',
                 menuDesc: '单风机详情',
                 addtab: true,
             },
diff --git a/ui/dasadmin/src/views/backend/equipment/equipmentManagement/measurement.vue b/ui/dasadmin/src/views/backend/equipment/equipmentManagement/measurement.vue
index 096bd439..0fc26d7c 100644
--- a/ui/dasadmin/src/views/backend/equipment/equipmentManagement/measurement.vue
+++ b/ui/dasadmin/src/views/backend/equipment/equipmentManagement/measurement.vue
@@ -15,11 +15,14 @@
                         <div class="realTimeValueText">{{ scope.row.realTimeValue }}</div>
                     </div>
                     <div v-if="item.prop === 'operate'" @click="openLineChart(scope.row)" class="operate">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="20px" height="20px" viewBox="0 0 1024 1024" version="1.1">
-                            <path
-                                d="M896 896H96a32 32 0 0 1-32-32V224a32 32 0 0 1 64 0v608h768a32 32 0 1 1 0 64zM247.008 640a32 32 0 0 1-20.992-56.192l200.992-174.24a32 32 0 0 1 42.272 0.288l172.128 153.44 229.088-246.304a32 32 0 0 1 46.88 43.616l-250.432 269.216a31.936 31.936 0 0 1-44.704 2.08l-174.56-155.52-179.744 155.84a31.872 31.872 0 0 1-20.928 7.776z"
-                            />
-                        </svg>
+                        <template v-if="!enumStore.keys.includes(scope.row.attributeCode)">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="20px" height="20px" viewBox="0 0 1024 1024" version="1.1">
+                                {{ scope.row }}
+                                <path
+                                    d="M896 896H96a32 32 0 0 1-32-32V224a32 32 0 0 1 64 0v608h768a32 32 0 1 1 0 64zM247.008 640a32 32 0 0 1-20.992-56.192l200.992-174.24a32 32 0 0 1 42.272 0.288l172.128 153.44 229.088-246.304a32 32 0 0 1 46.88 43.616l-250.432 269.216a31.936 31.936 0 0 1-44.704 2.08l-174.56-155.52-179.744 155.84a31.872 31.872 0 0 1-20.928 7.776z"
+                                />
+                            </svg>
+                        </template>
                     </div>
                 </template>
             </el-table-column>
diff --git a/ui/dasadmin/src/views/backend/home/windMatrix.vue b/ui/dasadmin/src/views/backend/home/windMatrix.vue
index d6abb841..872ec670 100644
--- a/ui/dasadmin/src/views/backend/home/windMatrix.vue
+++ b/ui/dasadmin/src/views/backend/home/windMatrix.vue
@@ -70,6 +70,8 @@
 <script setup lang="ts">
 import {reactive,defineProps, defineEmits} from 'vue'
 import { useRouter } from 'vue-router'
+import { adminBaseRoutePath } from '/@/router/static/adminBase'
+
 const router = useRouter()
 const props = defineProps({
     parentData: {
@@ -85,7 +87,7 @@ const animationDuration=reactive({
 const handleDoubleClick = (row) => {
     if (!router.hasRoute('windTurbine')) {
         router.addRoute('admin', {
-            path: '/windTurbine',
+            path: adminBaseRoutePath+'/windTurbine',
             name: 'windTurbine',
             component: () => import('/@/views/backend/WindBlower/index.vue'),
             meta: {