sx/map
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix:大小屏适配

Browse Source
This commit is contained in:
刘玉霞 2024-11-13 10:46:37 +08:00
parent 91efa06892
commit b55a72b577
8 changed files with 144 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
ui/dasadmin/src/layouts/backend/components/aside.vue
View File

@ -18,7 +18,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue' import { ref, onMounted, onUnmounted } from 'vue'
import Logo from '/@/layouts/backend/components/logo.vue' import Logo from '/@/layouts/backend/components/logo.vue'
import MenuVertical from '/@/layouts/backend/components/menus/menuVertical.vue' import MenuVertical from '/@/layouts/backend/components/menus/menuVertical.vue'
import MenuVerticalChildren from '/@/layouts/backend/components/menus/menuVerticalChildren.vue' import MenuVerticalChildren from '/@/layouts/backend/components/menus/menuVerticalChildren.vue'
@ -32,7 +32,7 @@ defineOptions({
const config = useConfig() const config = useConfig()
const navTabs = useNavTabs() const navTabs = useNavTabs()
const menuWidth = computed(() => config.menuWidth()) const menuWidth = ref(config.menuWidth())
const onMenuCollapse = () => { const onMenuCollapse = () => {
if (config.layout.menuCollapse) { if (config.layout.menuCollapse) {
@ -40,6 +40,19 @@ const onMenuCollapse = () => {
} else { } else {
config.setLayout('menuCollapse', true) config.setLayout('menuCollapse', true)
} }
resizeHandler()
}
onMounted(() => {
// 监听窗口大小变化
window.addEventListener('resize', resizeHandler)
})
onUnmounted(() => {
// 组件卸载前移除监听器
window.removeEventListener('resize', resizeHandler)
})
const resizeHandler = () => {
menuWidth.value = config.menuWidth()
} }
</script> </script>

17
ui/dasadmin/src/layouts/backend/components/logo.vue
View File

@ -23,9 +23,24 @@ import { closeShade } from '/@/utils/pageShade'
import { Session } from '/@/utils/storage' import { Session } from '/@/utils/storage'
import { BEFORE_RESIZE_LAYOUT } from '/@/stores/constant/cacheKey' import { BEFORE_RESIZE_LAYOUT } from '/@/stores/constant/cacheKey'
import { setNavTabsWidth } from '/@/utils/layout' import { setNavTabsWidth } from '/@/utils/layout'
import { ref, onMounted, onUnmounted } from 'vue'
const config = useConfig() const config = useConfig()
// const siteConfig = useSiteConfig() // 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 () { const onMenuCollapse = function () {
if (config.layout.shrink && !config.layout.menuCollapse) { if (config.layout.shrink && !config.layout.menuCollapse) {
@ -49,7 +64,7 @@ const onMenuCollapse = function () {
<style scoped lang="scss"> <style scoped lang="scss">
.layout-logo { .layout-logo {
width: 100%; width: 100%;
height: v-bind('config.headerHeight()'); height: v-bind(headerHeight);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;

20
ui/dasadmin/src/layouts/backend/components/menus/menuTree.vue
View File

@ -25,13 +25,27 @@ import type { RouteRecordRaw } from 'vue-router'
import { getFirstRoute, onClickMenu } from '/@/utils/router' import { getFirstRoute, onClickMenu } from '/@/utils/router'
import { ElNotification } from 'element-plus' import { ElNotification } from 'element-plus'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { computed } from 'vue' import { ref, onMounted, onUnmounted } from 'vue'
const { t } = useI18n() const { t } = useI18n()
const config = useConfig() const config = useConfig()
const padding = computed(() => (window.screen.width < 1920 ? '10px' : '20px')) const padding = ref(window.screen.width < 1920 ? '10px' : '20px')
const height = computed(() => (window.screen.width < 1920 ? '40px' : '56px')) 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 { interface Props {
menus: RouteRecordRaw[] menus: RouteRecordRaw[]

18
ui/dasadmin/src/layouts/backend/components/menus/menuVertical.vue
View File

@ -14,7 +14,7 @@
</template> </template>
<script setup lang="ts"> <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 MenuTree from '/@/layouts/backend/components/menus/menuTree.vue'
import { useRoute, onBeforeRouteUpdate, type RouteLocationNormalizedLoaded } from 'vue-router' import { useRoute, onBeforeRouteUpdate, type RouteLocationNormalizedLoaded } from 'vue-router'
import { layoutMenuRef, layoutMenuScrollbarRef } from '/@/stores/refs' import { layoutMenuRef, layoutMenuScrollbarRef } from '/@/stores/refs'
@ -29,10 +29,21 @@ const state = reactive({
defaultActive: '', defaultActive: '',
}) })
const width = computed(() => { const width = ref(config.layout.menuCollapse ? '5px' : window.screen.width < 1920 ? '10px' : '20px')
return 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(() => { const verticalMenusScrollbarHeight = computed(() => {
let menuTopBarHeight = 0 let menuTopBarHeight = 0
if (config.layout.menuShowTopBar) { if (config.layout.menuShowTopBar) {
@ -62,6 +73,7 @@ const verticalMenusScroll = () => {
onMounted(() => { onMounted(() => {
currentRouteActive(route) currentRouteActive(route)
verticalMenusScroll() verticalMenusScroll()
window.addEventListener('resize', resizeHandler)
}) })
onBeforeRouteUpdate((to) => { onBeforeRouteUpdate((to) => {

24
ui/dasadmin/src/layouts/backend/components/navBar/classic.vue
View File

@ -15,11 +15,12 @@ import NavTabs from '/@/layouts/backend/components/navBar/tabs.vue'
import { layoutNavTabsRef } from '/@/stores/refs' import { layoutNavTabsRef } from '/@/stores/refs'
import NavMenus from '../navMenus.vue' import NavMenus from '../navMenus.vue'
import { showShade } from '/@/utils/pageShade' import { showShade } from '/@/utils/pageShade'
import { computed } from 'vue' import { ref, onMounted, onUnmounted } from 'vue'
const config = useConfig() const config = useConfig()
const padding = computed(() => (window.screen.width < 1920 ? '10px' : '20px')) const padding = ref(window.screen.width < 1920 ? '10px' : '20px')
const height = computed(() => (window.screen.width < 1920 ? '36px' : '48px')) const height = ref(window.screen.width < 1920 ? '36px' : '48px')
const headerHeight = ref(config.headerHeight())
const onMenuCollapse = () => { const onMenuCollapse = () => {
showShade('ba-aside-menu-shade', () => { showShade('ba-aside-menu-shade', () => {
@ -27,12 +28,27 @@ const onMenuCollapse = () => {
}) })
config.setLayout('menuCollapse', false) 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> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.nav-bar { .nav-bar {
display: flex; display: flex;
height: v-bind('config.headerHeight()'); height: v-bind(headerHeight);
width: 100%; width: 100%;
background-color: v-bind('config.getColorVal("headerBarBackground")'); background-color: v-bind('config.getColorVal("headerBarBackground")');
:deep(.nav-tabs) { :deep(.nav-tabs) {

25
ui/dasadmin/src/layouts/backend/container/classic.vue
View File

@ -24,14 +24,31 @@ import CloseFullScreen from '/@/layouts/backend/components/closeFullScreen.vue'
import { useNavTabs } from '/@/stores/navTabs' import { useNavTabs } from '/@/stores/navTabs'
import { useSiteConfig } from '/@/stores/siteConfig' import { useSiteConfig } from '/@/stores/siteConfig'
import { useConfig } from '/@/stores/config' import { useConfig } from '/@/stores/config'
import { computed } from 'vue' import { ref, onMounted, onUnmounted } from 'vue'
const siteConfig = useSiteConfig() const siteConfig = useSiteConfig()
const navTabs = useNavTabs() const navTabs = useNavTabs()
const config = useConfig() 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> </script>
<style scoped> <style scoped>
@ -48,7 +65,7 @@ const bodyPadding = computed(() => (window.screen.width < 1920 ? '10px' : '20px'
.layout-logo { .layout-logo {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: v-bind('config.headerHeight()'); height: v-bind(headerHeight);
display: flex; display: flex;
align-items: center; align-items: center;
box-sizing: border-box; box-sizing: border-box;

6
ui/dasadmin/src/views/backend/WindBlower/index.vue
View File

@ -26,7 +26,7 @@
<div class="windBlower" ref="windBlower"> <div class="windBlower" ref="windBlower">
<el-row :gutter="10"> <el-row :gutter="10">
<el-col :span="6"> <el-col :md="24" :lg="6" :span="6">
<div class="cardContentLeft"> <div class="cardContentLeft">
<!--实时预览--> <!--实时预览-->
<div class="overview"> <div class="overview">
@ -92,7 +92,7 @@
</div> </div>
</el-col> </el-col>
<el-col :span="12"> <el-col :md="24" :lg="12" :span="12">
<div class="cardContentCenter"> <div class="cardContentCenter">
<!--风机控制--> <!--风机控制-->
<div class="controlBackgroundImg"> <div class="controlBackgroundImg">
@ -178,7 +178,7 @@
</div> </div>
</div> </div>
</el-col> </el-col>
<el-col :span="6"> <el-col :md="24" :lg="6" :span="6" style="background: #f5f5f5">
<div class="cardContentRight"> <div class="cardContentRight">
<!--发电量概况--> <!--发电量概况-->
<div class="summarize"> <div class="summarize">

78
ui/dasadmin/src/views/backend/dashboard.vue
View File

@ -1,14 +1,14 @@
<template> <template>
<div class="default-main" ref="HomeHight"> <div class="default-main" ref="HomeHight">
<el-row :gutter="20"> <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="grid-content ep-bg-purple">
<!--风场概览--> <!--风场概览-->
<div class="overview panelBg"> <div class="overview panelBg">
<el-text class="mx-1 homelabel">风场概览</el-text> <el-text class="mx-1 homelabel">风场概览</el-text>
<el-row :gutter="10"> <el-row :gutter="10">
<el-col :span="12"> <el-col :md="24" :lg="12" :span="12">
<div :sm="12" :lg="6" class="small-panel" style="margin-bottom: 10px"> <div :sm="24" :lg="6" class="small-panel" style="margin-bottom: 10px">
<img class="small-panel-pic" src="~assets/dashboard/viewP.png" alt="" /> <img class="small-panel-pic" src="~assets/dashboard/viewP.png" alt="" />
<div class="small-base"> <div class="small-base">
<div> <div>
@ -17,7 +17,7 @@
<div>功率</div> <div>功率</div>
</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="" /> <img class="small-panel-pic" src="~assets/dashboard/viewW.png" alt="" />
<div class="small-base"> <div class="small-base">
<div> <div>
@ -27,8 +27,8 @@
</div> </div>
</div> </div>
</el-col> </el-col>
<el-col :span="12"> <el-col :md="24" :lg="12" :span="12">
<div :sm="12" :lg="6" class="small-panel" style="margin-bottom: 10px"> <div :sm="24" :lg="6" class="small-panel" style="margin-bottom: 10px">
<img class="small-panel-pic" src="~assets/dashboard/viewR.png" alt="" /> <img class="small-panel-pic" src="~assets/dashboard/viewR.png" alt="" />
<div class="small-base"> <div class="small-base">
<div> <div>
@ -37,7 +37,7 @@
<div>日利用小时</div> <div>日利用小时</div>
</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="" /> <img class="small-panel-pic" src="~assets/dashboard/viewY.png" alt="" />
<div class="small-base"> <div class="small-base">
<div> <div>
@ -207,7 +207,7 @@
</div> </div>
</el-col> </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="grid-content ep-bg-purple-light">
<!--风机矩阵--> <!--风机矩阵-->
<div class="matrix panelBg"> <div class="matrix panelBg">
@ -218,7 +218,7 @@
</div> </div>
</div> </div>
</el-col> </el-col>
<el-col :span="6"> <el-col :md="24" :lg="6" :span="6">
<div class="grid-content ep-bg-purple cardContentRight"> <div class="grid-content ep-bg-purple cardContentRight">
<!--发电量概况--> <!--发电量概况-->
<div class="summarize"> <div class="summarize">
@ -1160,6 +1160,10 @@ const sizeChange = () => {
computedHeight.powerHeight = rect.height - 636 + 'px' computedHeight.powerHeight = rect.height - 636 + 'px'
computedHeight.alarmHeight = rect.height - 580 + 'px' computedHeight.alarmHeight = rect.height - 580 + 'px'
computedHeight.centerHeight = rect.height - 0 + 'px' computedHeight.centerHeight = rect.height - 0 + 'px'
if (window.screen.width < 1360) {
computedHeight.alarmHeight = '200px'
computedHeight.powerHeight = '200px'
}
} }
onMounted(() => { onMounted(() => {
@ -1179,11 +1183,8 @@ onMounted(() => {
getTableData(deviceCode.value) getTableData(deviceCode.value)
}) })
useEventListener(window, 'resize', echartsResize) useEventListener(window, 'resize', echartsResize)
}) })
onUnmounted(() => { onUnmounted(() => {
window.removeEventListener('resize', sizeChange) window.removeEventListener('resize', sizeChange)
clearInterval(timer) clearInterval(timer)
@ -1196,7 +1197,6 @@ onUnmounted(() => {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
$marginNum: 10px; $marginNum: 10px;
$labelHeight: 38px; $labelHeight: 38px;
@mixin cardDefaultStyle { @mixin cardDefaultStyle {
@ -1220,8 +1220,8 @@ $labelHeight: 38px;
} }
.default-main { .default-main {
width: 100%; width: 100%;
height: 100%; // height: 100%;
min-height: 920px; // min-height: 920px;
padding: 0; padding: 0;
margin: 0; margin: 0;
color: #4e5969; color: #4e5969;
@ -1242,7 +1242,7 @@ $labelHeight: 38px;
display: block; display: block;
} }
.grid-content { .grid-content {
/* overflow-x: hidden;*/ /* overflow-x: hidden;*/
width: 100%; width: 100%;
height: 100%; height: 100%;
.panelBg { .panelBg {
@ -1252,7 +1252,7 @@ $labelHeight: 38px;
margin-bottom: 20px; margin-bottom: 20px;
} }
.overview { .overview {
/* @include cardDefaultStyle; /* @include cardDefaultStyle;
@include cardlabel;*/ @include cardlabel;*/
min-height: 216px; min-height: 216px;
.small-panel { .small-panel {
@ -1272,7 +1272,7 @@ $labelHeight: 38px;
} }
} }
.status { .status {
/* @include cardDefaultStyle; /* @include cardDefaultStyle;
@include cardlabel;*/ @include cardlabel;*/
min-height: 374px; min-height: 374px;
.statusrow { .statusrow {
@ -1317,18 +1317,16 @@ $labelHeight: 38px;
width: 100%; width: 100%;
min-height: 298px; min-height: 298px;
height: v-bind('computedHeight.powerHeight'); height: v-bind('computedHeight.powerHeight');
.chartBox{ .chartBox {
height: calc(100% - $labelHeight); height: calc(100% - $labelHeight);
.power-chart { .power-chart {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
} }
.matrix { .matrix {
/* @include cardDefaultStyle; /* @include cardDefaultStyle;
@include cardlabel;*/ @include cardlabel;*/
background: url('/@/assets/dashboard/bg1.png') no-repeat #ffffff; background: url('/@/assets/dashboard/bg1.png') no-repeat #ffffff;
background-size: 100% 100%; background-size: 100% 100%;
@ -1380,11 +1378,10 @@ $labelHeight: 38px;
.cardContentRight { .cardContentRight {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.trend { .trend {
/* @include cardDefaultStyle; /* @include cardDefaultStyle;
@include cardlabel;*/ @include cardlabel;*/
min-height: 300px; min-height: 300px;
height: 335px; height: 335px;
@ -1428,7 +1425,7 @@ $labelHeight: 38px;
} }
} }
.realPart { .realPart {
/* @include cardDefaultStyle; /* @include cardDefaultStyle;
@include cardlabel;*/ @include cardlabel;*/
/*height: 370px;*/ /*height: 370px;*/
min-height: 350px; min-height: 350px;
@ -1439,15 +1436,16 @@ $labelHeight: 38px;
@media screen and (max-width: 1920px) { @media screen and (max-width: 1920px) {
.default-main { .default-main {
.trend { .trend {
height: 315px !important; height: 315px !important;
}
} }
}
} }
@media screen and (max-width: 1280px) { @media screen and (max-width: 1280px) {
.default-main { .default-main {
overflow: none;
.summarize { .summarize {
.summarize-panel{ .summarize-panel {
margin: 2px !important; margin: 2px !important;
} }
} }
@ -1455,8 +1453,8 @@ $labelHeight: 38px;
} }
@media screen and (max-width: 1360px) { @media screen and (max-width: 1360px) {
.default-main { .default-main {
.overview{ .overview {
.small-panel{ .small-panel {
.small-base { .small-base {
margin-left: 0px !important; margin-left: 0px !important;
} }
@ -1467,20 +1465,18 @@ $labelHeight: 38px;
@media screen and (max-width: 1480px) { @media screen and (max-width: 1480px) {
.default-main { .default-main {
font-size: 12px !important; font-size: 12px !important;
.overview{ .overview {
.small-panel{ .small-panel {
padding: 13px 0px !important; padding: 13px 0px !important;
} }
} }
.status { .status {
.status-panel { .status-panel {
.status-base-main{ .status-base-main {
margin-left: 5px !important; margin-left: 5px !important;
} }
} }
} }
} }
} }
@media screen and (max-width: 1680px) { @media screen and (max-width: 1680px) {
@ -1499,25 +1495,25 @@ $labelHeight: 38px;
/* padding: 10px !important;*/ /* padding: 10px !important;*/
margin-bottom: 10px !important; margin-bottom: 10px !important;
} }
.summarize{ .summarize {
margin-bottom: 10px !important; margin-bottom: 10px !important;
} }
} }
.toal-panel{ .toal-panel {
padding: 0 !important; padding: 0 !important;
padding-bottom: 10px !important; padding-bottom: 10px !important;
} }
.col-center { .col-center {
padding: 0 !important; padding: 0 !important;
} }
.matrix{ .matrix {
height: 908px !important; height: 908px !important;
} }
:deep(.el-tabs__header) { :deep(.el-tabs__header) {
margin-top: -33px !important; margin-top: -33px !important;
} }
.overview{ .overview {
.small-panel{ .small-panel {
.small-base { .small-base {
margin-left: 5px !important; margin-left: 5px !important;
} }