fix:大小屏适配

2024-11-13 10:46:37 +08:00 · 2024-11-13 10:46:37 +08:00 · b55a72b577
commit b55a72b577
parent 91efa06892
8 changed files with 144 additions and 61 deletions
--- 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>

--- 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;
--- 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[]
--- 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) => {
--- 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) {
--- 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;
--- 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">
--- 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;
                }