From b55a72b57735792df81a83012d6769979ed99503 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E7=8E=89=E9=9C=9E?= <liuyuxia@jsspisoft.com>
Date: Wed, 13 Nov 2024 10:46:37 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E5=A4=A7=E5=B0=8F=E5=B1=8F=E9=80=82?=
 =?UTF-8?q?=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/layouts/backend/components/aside.vue  | 17 +++-
 .../src/layouts/backend/components/logo.vue   | 17 +++-
 .../backend/components/menus/menuTree.vue     | 20 ++++-
 .../backend/components/menus/menuVertical.vue | 18 ++++-
 .../backend/components/navBar/classic.vue     | 24 +++++-
 .../src/layouts/backend/container/classic.vue | 25 +++++-
 .../src/views/backend/WindBlower/index.vue    |  6 +-
 ui/dasadmin/src/views/backend/dashboard.vue   | 78 +++++++++----------
 8 files changed, 144 insertions(+), 61 deletions(-)

diff --git a/ui/dasadmin/src/layouts/backend/components/aside.vue b/ui/dasadmin/src/layouts/backend/components/aside.vue
index 0297ec81..96ad7965 100644
--- a/ui/dasadmin/src/layouts/backend/components/aside.vue
+++ b/ui/dasadmin/src/layouts/backend/components/aside.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { ref, onMounted, onUnmounted } from 'vue'
 import Logo from '/@/layouts/backend/components/logo.vue'
 import MenuVertical from '/@/layouts/backend/components/menus/menuVertical.vue'
 import MenuVerticalChildren from '/@/layouts/backend/components/menus/menuVerticalChildren.vue'
@@ -32,7 +32,7 @@ defineOptions({
 const config = useConfig()
 const navTabs = useNavTabs()
 
-const menuWidth = computed(() => config.menuWidth())
+const menuWidth = ref(config.menuWidth())
 
 const onMenuCollapse = () => {
     if (config.layout.menuCollapse) {
@@ -40,6 +40,19 @@ const onMenuCollapse = () => {
     } else {
         config.setLayout('menuCollapse', true)
     }
+    resizeHandler()
+}
+onMounted(() => {
+    // 监听窗口大小变化
+    window.addEventListener('resize', resizeHandler)
+})
+
+onUnmounted(() => {
+    // 组件卸载前移除监听器
+    window.removeEventListener('resize', resizeHandler)
+})
+const resizeHandler = () => {
+    menuWidth.value = config.menuWidth()
 }
 </script>
 
diff --git a/ui/dasadmin/src/layouts/backend/components/logo.vue b/ui/dasadmin/src/layouts/backend/components/logo.vue
index 6f64a0e6..c13b01a0 100644
--- a/ui/dasadmin/src/layouts/backend/components/logo.vue
+++ b/ui/dasadmin/src/layouts/backend/components/logo.vue
@@ -23,9 +23,24 @@ import { closeShade } from '/@/utils/pageShade'
 import { Session } from '/@/utils/storage'
 import { BEFORE_RESIZE_LAYOUT } from '/@/stores/constant/cacheKey'
 import { setNavTabsWidth } from '/@/utils/layout'
+import { ref, onMounted, onUnmounted } from 'vue'
 
 const config = useConfig()
 // const siteConfig = useSiteConfig()
+const headerHeight = ref(config.headerHeight())
+
+onMounted(() => {
+    // 监听窗口大小变化
+    window.addEventListener('resize', resizeHandler)
+})
+
+onUnmounted(() => {
+    // 组件卸载前移除监听器
+    window.removeEventListener('resize', resizeHandler)
+})
+const resizeHandler = () => {
+    headerHeight.value = config.headerHeight()
+}
 
 const onMenuCollapse = function () {
     if (config.layout.shrink && !config.layout.menuCollapse) {
@@ -49,7 +64,7 @@ const onMenuCollapse = function () {
 <style scoped lang="scss">
 .layout-logo {
     width: 100%;
-    height: v-bind('config.headerHeight()');
+    height: v-bind(headerHeight);
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/ui/dasadmin/src/layouts/backend/components/menus/menuTree.vue b/ui/dasadmin/src/layouts/backend/components/menus/menuTree.vue
index 2e77a682..dbd529d0 100644
--- a/ui/dasadmin/src/layouts/backend/components/menus/menuTree.vue
+++ b/ui/dasadmin/src/layouts/backend/components/menus/menuTree.vue
@@ -25,13 +25,27 @@ import type { RouteRecordRaw } from 'vue-router'
 import { getFirstRoute, onClickMenu } from '/@/utils/router'
 import { ElNotification } from 'element-plus'
 import { useI18n } from 'vue-i18n'
-import { computed } from 'vue'
+import { ref, onMounted, onUnmounted } from 'vue'
 
 const { t } = useI18n()
 const config = useConfig()
 
-const padding = computed(() => (window.screen.width < 1920 ? '10px' : '20px'))
-const height = computed(() => (window.screen.width < 1920 ? '40px' : '56px'))
+const padding = ref(window.screen.width < 1920 ? '10px' : '20px')
+const height = ref(window.screen.width < 1920 ? '40px' : '56px')
+
+onMounted(() => {
+    // 监听窗口大小变化
+    window.addEventListener('resize', resizeHandler)
+})
+
+onUnmounted(() => {
+    // 组件卸载前移除监听器
+    window.removeEventListener('resize', resizeHandler)
+})
+const resizeHandler = () => {
+    padding.value = window.screen.width < 1920 ? '10px' : '20px'
+    height.value = window.screen.width < 1920 ? '40px' : '56px'
+}
 
 interface Props {
     menus: RouteRecordRaw[]
diff --git a/ui/dasadmin/src/layouts/backend/components/menus/menuVertical.vue b/ui/dasadmin/src/layouts/backend/components/menus/menuVertical.vue
index 2c4e0bdb..22b1ba4b 100644
--- a/ui/dasadmin/src/layouts/backend/components/menus/menuVertical.vue
+++ b/ui/dasadmin/src/layouts/backend/components/menus/menuVertical.vue
@@ -14,7 +14,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, onMounted, reactive } from 'vue'
+import { ref, computed, nextTick, onMounted, reactive, onUnmounted } from 'vue'
 import MenuTree from '/@/layouts/backend/components/menus/menuTree.vue'
 import { useRoute, onBeforeRouteUpdate, type RouteLocationNormalizedLoaded } from 'vue-router'
 import { layoutMenuRef, layoutMenuScrollbarRef } from '/@/stores/refs'
@@ -29,10 +29,21 @@ const state = reactive({
     defaultActive: '',
 })
 
-const width = computed(() => {
-    return config.layout.menuCollapse ? '5px' : window.screen.width < 1920 ? '10px' : '20px'
+const width = ref(config.layout.menuCollapse ? '5px' : window.screen.width < 1920 ? '10px' : '20px')
+
+onMounted(() => {
+    // 监听窗口大小变化
+    window.addEventListener('resize', resizeHandler)
 })
 
+onUnmounted(() => {
+    // 组件卸载前移除监听器
+    window.removeEventListener('resize', resizeHandler)
+})
+const resizeHandler = () => {
+    width.value = config.layout.menuCollapse ? '5px' : window.screen.width < 1920 ? '10px' : '20px'
+}
+
 const verticalMenusScrollbarHeight = computed(() => {
     let menuTopBarHeight = 0
     if (config.layout.menuShowTopBar) {
@@ -62,6 +73,7 @@ const verticalMenusScroll = () => {
 onMounted(() => {
     currentRouteActive(route)
     verticalMenusScroll()
+    window.addEventListener('resize', resizeHandler)
 })
 
 onBeforeRouteUpdate((to) => {
diff --git a/ui/dasadmin/src/layouts/backend/components/navBar/classic.vue b/ui/dasadmin/src/layouts/backend/components/navBar/classic.vue
index 8938c89a..11b3421a 100644
--- a/ui/dasadmin/src/layouts/backend/components/navBar/classic.vue
+++ b/ui/dasadmin/src/layouts/backend/components/navBar/classic.vue
@@ -15,11 +15,12 @@ import NavTabs from '/@/layouts/backend/components/navBar/tabs.vue'
 import { layoutNavTabsRef } from '/@/stores/refs'
 import NavMenus from '../navMenus.vue'
 import { showShade } from '/@/utils/pageShade'
-import { computed } from 'vue'
+import { ref, onMounted, onUnmounted } from 'vue'
 const config = useConfig()
 
-const padding = computed(() => (window.screen.width < 1920 ? '10px' : '20px'))
-const height = computed(() => (window.screen.width < 1920 ? '36px' : '48px'))
+const padding = ref(window.screen.width < 1920 ? '10px' : '20px')
+const height = ref(window.screen.width < 1920 ? '36px' : '48px')
+const headerHeight = ref(config.headerHeight())
 
 const onMenuCollapse = () => {
     showShade('ba-aside-menu-shade', () => {
@@ -27,12 +28,27 @@ const onMenuCollapse = () => {
     })
     config.setLayout('menuCollapse', false)
 }
+
+onMounted(() => {
+    // 监听窗口大小变化
+    window.addEventListener('resize', resizeHandler)
+})
+
+onUnmounted(() => {
+    // 组件卸载前移除监听器
+    window.removeEventListener('resize', resizeHandler)
+})
+const resizeHandler = () => {
+    padding.value = window.screen.width < 1920 ? '10px' : '20px'
+    height.value = window.screen.width < 1920 ? '36px' : '48px'
+    headerHeight.value = config.headerHeight()
+}
 </script>
 
 <style scoped lang="scss">
 .nav-bar {
     display: flex;
-    height: v-bind('config.headerHeight()');
+    height: v-bind(headerHeight);
     width: 100%;
     background-color: v-bind('config.getColorVal("headerBarBackground")');
     :deep(.nav-tabs) {
diff --git a/ui/dasadmin/src/layouts/backend/container/classic.vue b/ui/dasadmin/src/layouts/backend/container/classic.vue
index 3b101a09..bc1f1277 100644
--- a/ui/dasadmin/src/layouts/backend/container/classic.vue
+++ b/ui/dasadmin/src/layouts/backend/container/classic.vue
@@ -24,14 +24,31 @@ import CloseFullScreen from '/@/layouts/backend/components/closeFullScreen.vue'
 import { useNavTabs } from '/@/stores/navTabs'
 import { useSiteConfig } from '/@/stores/siteConfig'
 import { useConfig } from '/@/stores/config'
-import { computed } from 'vue'
+import { ref, onMounted, onUnmounted } from 'vue'
 const siteConfig = useSiteConfig()
 const navTabs = useNavTabs()
 const config = useConfig()
 
-const padding = computed(() => (window.screen.width < 1920 ? '0px' : '10px'))
+const padding = ref(window.screen.width < 1920 ? '0px' : '10px')
 
-const bodyPadding = computed(() => (window.screen.width < 1920 ? '10px' : '20px'))
+const bodyPadding = ref(window.screen.width < 1920 ? '10px' : '20px')
+
+const headerHeight = ref(config.headerHeight())
+
+onMounted(() => {
+    // 监听窗口大小变化
+    window.addEventListener('resize', resizeHandler)
+})
+
+onUnmounted(() => {
+    // 组件卸载前移除监听器
+    window.removeEventListener('resize', resizeHandler)
+})
+const resizeHandler = () => {
+    padding.value = window.screen.width < 1920 ? '0px' : '10px'
+    bodyPadding.value = window.screen.width < 1920 ? '10px' : '20px'
+    headerHeight.value = config.headerHeight()
+}
 </script>
 
 <style scoped>
@@ -48,7 +65,7 @@ const bodyPadding = computed(() => (window.screen.width < 1920 ? '10px' : '20px'
 .layout-logo {
     position: absolute;
     width: 100%;
-    height: v-bind('config.headerHeight()');
+    height: v-bind(headerHeight);
     display: flex;
     align-items: center;
     box-sizing: border-box;
diff --git a/ui/dasadmin/src/views/backend/WindBlower/index.vue b/ui/dasadmin/src/views/backend/WindBlower/index.vue
index c9e0de9e..50cb8c4c 100644
--- a/ui/dasadmin/src/views/backend/WindBlower/index.vue
+++ b/ui/dasadmin/src/views/backend/WindBlower/index.vue
@@ -26,7 +26,7 @@
 
     <div class="windBlower" ref="windBlower">
         <el-row :gutter="10">
-            <el-col :span="6">
+            <el-col :md="24" :lg="6" :span="6">
                 <div class="cardContentLeft">
                     <!--实时预览-->
                     <div class="overview">
@@ -92,7 +92,7 @@
                 </div>
             </el-col>
 
-            <el-col :span="12">
+            <el-col :md="24" :lg="12" :span="12">
                 <div class="cardContentCenter">
                     <!--风机控制-->
                     <div class="controlBackgroundImg">
@@ -178,7 +178,7 @@
                     </div>
                 </div>
             </el-col>
-            <el-col :span="6">
+            <el-col :md="24" :lg="6" :span="6" style="background: #f5f5f5">
                 <div class="cardContentRight">
                     <!--发电量概况-->
                     <div class="summarize">
diff --git a/ui/dasadmin/src/views/backend/dashboard.vue b/ui/dasadmin/src/views/backend/dashboard.vue
index 08744ed2..413c6bb8 100644
--- a/ui/dasadmin/src/views/backend/dashboard.vue
+++ b/ui/dasadmin/src/views/backend/dashboard.vue
@@ -1,14 +1,14 @@
 <template>
     <div class="default-main" ref="HomeHight">
         <el-row :gutter="20">
-            <el-col :span="6">
+            <el-col :md="24" :lg="6" :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">
+                            <el-col :md="24" :lg="12" :span="12">
+                                <div :sm="24" :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>
@@ -17,7 +17,7 @@
                                         <div>功率</div>
                                     </div>
                                 </div>
-                                <div :sm="12" :lg="6" class="small-panel">
+                                <div :sm="24" :lg="6" class="small-panel">
                                     <img class="small-panel-pic" src="~assets/dashboard/viewW.png" alt="" />
                                     <div class="small-base">
                                         <div>
@@ -27,8 +27,8 @@
                                     </div>
                                 </div>
                             </el-col>
-                            <el-col :span="12">
-                                <div :sm="12" :lg="6" class="small-panel" style="margin-bottom: 10px">
+                            <el-col :md="24" :lg="12" :span="12">
+                                <div :sm="24" :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>
@@ -37,7 +37,7 @@
                                         <div>日利用小时</div>
                                     </div>
                                 </div>
-                                <div :sm="12" :lg="6" class="small-panel">
+                                <div :sm="24" :lg="6" class="small-panel">
                                     <img class="small-panel-pic" src="~assets/dashboard/viewY.png" alt="" />
                                     <div class="small-base">
                                         <div>
@@ -207,7 +207,7 @@
                 </div>
             </el-col>
 
-            <el-col :span="12" class="col-center">
+            <el-col :md="24" :lg="12" :span="12" class="col-center">
                 <div class="grid-content ep-bg-purple-light">
                     <!--风机矩阵-->
                     <div class="matrix panelBg">
@@ -218,7 +218,7 @@
                     </div>
                 </div>
             </el-col>
-            <el-col :span="6">
+            <el-col :md="24" :lg="6" :span="6">
                 <div class="grid-content ep-bg-purple cardContentRight">
                     <!--发电量概况-->
                     <div class="summarize">
@@ -1160,6 +1160,10 @@ const sizeChange = () => {
     computedHeight.powerHeight = rect.height - 636 + 'px'
     computedHeight.alarmHeight = rect.height - 580 + 'px'
     computedHeight.centerHeight = rect.height - 0 + 'px'
+    if (window.screen.width < 1360) {
+        computedHeight.alarmHeight = '200px'
+        computedHeight.powerHeight = '200px'
+    }
 }
 
 onMounted(() => {
@@ -1179,11 +1183,8 @@ onMounted(() => {
         getTableData(deviceCode.value)
     })
     useEventListener(window, 'resize', echartsResize)
-
 })
 
-
-
 onUnmounted(() => {
     window.removeEventListener('resize', sizeChange)
     clearInterval(timer)
@@ -1196,7 +1197,6 @@ onUnmounted(() => {
 </script>
 
 <style scoped lang="scss">
-
 $marginNum: 10px;
 $labelHeight: 38px;
 @mixin cardDefaultStyle {
@@ -1220,8 +1220,8 @@ $labelHeight: 38px;
 }
 .default-main {
     width: 100%;
-    height: 100%;
-    min-height: 920px;
+    // height: 100%;
+    // min-height: 920px;
     padding: 0;
     margin: 0;
     color: #4e5969;
@@ -1242,7 +1242,7 @@ $labelHeight: 38px;
         display: block;
     }
     .grid-content {
-       /* overflow-x: hidden;*/
+        /* overflow-x: hidden;*/
         width: 100%;
         height: 100%;
         .panelBg {
@@ -1252,7 +1252,7 @@ $labelHeight: 38px;
             margin-bottom: 20px;
         }
         .overview {
-           /* @include cardDefaultStyle;
+            /* @include cardDefaultStyle;
             @include cardlabel;*/
             min-height: 216px;
             .small-panel {
@@ -1272,7 +1272,7 @@ $labelHeight: 38px;
             }
         }
         .status {
-           /* @include cardDefaultStyle;
+            /* @include cardDefaultStyle;
             @include cardlabel;*/
             min-height: 374px;
             .statusrow {
@@ -1317,18 +1317,16 @@ $labelHeight: 38px;
             width: 100%;
             min-height: 298px;
             height: v-bind('computedHeight.powerHeight');
-            .chartBox{
+            .chartBox {
                 height: calc(100% - $labelHeight);
                 .power-chart {
                     width: 100%;
                     height: 100%;
                 }
             }
-
-
         }
         .matrix {
-           /* @include cardDefaultStyle;
+            /* @include cardDefaultStyle;
             @include cardlabel;*/
             background: url('/@/assets/dashboard/bg1.png') no-repeat #ffffff;
             background-size: 100% 100%;
@@ -1380,11 +1378,10 @@ $labelHeight: 38px;
         .cardContentRight {
             width: 100%;
             height: 100%;
-
         }
 
         .trend {
-           /* @include cardDefaultStyle;
+            /* @include cardDefaultStyle;
             @include cardlabel;*/
             min-height: 300px;
             height: 335px;
@@ -1428,7 +1425,7 @@ $labelHeight: 38px;
             }
         }
         .realPart {
-           /* @include cardDefaultStyle;
+            /* @include cardDefaultStyle;
             @include cardlabel;*/
             /*height: 370px;*/
             min-height: 350px;
@@ -1439,15 +1436,16 @@ $labelHeight: 38px;
 
 @media screen and (max-width: 1920px) {
     .default-main {
-            .trend {
-                height: 315px !important;
-            }
+        .trend {
+            height: 315px !important;
         }
+    }
 }
 @media screen and (max-width: 1280px) {
     .default-main {
+        overflow: none;
         .summarize {
-            .summarize-panel{
+            .summarize-panel {
                 margin: 2px !important;
             }
         }
@@ -1455,8 +1453,8 @@ $labelHeight: 38px;
 }
 @media screen and (max-width: 1360px) {
     .default-main {
-        .overview{
-            .small-panel{
+        .overview {
+            .small-panel {
                 .small-base {
                     margin-left: 0px !important;
                 }
@@ -1467,20 +1465,18 @@ $labelHeight: 38px;
 @media screen and (max-width: 1480px) {
     .default-main {
         font-size: 12px !important;
-        .overview{
-            .small-panel{
+        .overview {
+            .small-panel {
                 padding: 13px 0px !important;
             }
         }
         .status {
             .status-panel {
-                .status-base-main{
+                .status-base-main {
                     margin-left: 5px !important;
                 }
             }
-
         }
-
     }
 }
 @media screen and (max-width: 1680px) {
@@ -1499,25 +1495,25 @@ $labelHeight: 38px;
                 /* padding: 10px !important;*/
                 margin-bottom: 10px !important;
             }
-            .summarize{
+            .summarize {
                 margin-bottom: 10px !important;
             }
         }
-        .toal-panel{
+        .toal-panel {
             padding: 0 !important;
             padding-bottom: 10px !important;
         }
         .col-center {
             padding: 0 !important;
         }
-        .matrix{
+        .matrix {
             height: 908px !important;
         }
         :deep(.el-tabs__header) {
             margin-top: -33px !important;
         }
-        .overview{
-            .small-panel{
+        .overview {
+            .small-panel {
                 .small-base {
                     margin-left: 5px !important;
                 }