大屏布局样式修改。

src/styles/index.scss

@@ -50,6 +50,20 @@
   background-image: url("@/assets/images/screenBG1.png");
   background-size: cover;
   background-position: center;
+  //border: 2px solid orangered;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: auto;
+
+  //这个容器只有在全名状态下才是铺满的，所以要设置父元素display: flex; 这里需要用id才能覆盖class本身的style
+  #dv-full-screen {
+    width: 100%;
+    height: 100%;
+    max-height: 100vh;
+    //border: 2px solid orchid;
+
+  }
 
   .screen-header {
     height: 80px;
@@ -91,10 +105,10 @@
 
 .screen-content {
   width: 100%;
-  height: calc(100% - 120px);
+  height: calc(100% - 80px);
   display: flex;
   padding: 15px;
-  border: 3px solid red;
+  //border: 3px solid red;
 }
 
 .screen-common-box {
@@ -121,10 +135,3 @@
   //background-color: yellow;
 }
 
-#dv-full-screen-container {
-  //background-image: url("./img/bg.png");
-  background-size: 100% 100%;
-  box-shadow: 0 0 3px blue;
-  //display: flex;
-  //flex-direction: column;
-}

src/views/big-screens/datav/index.vue

@@ -88,91 +88,91 @@ export default {
 </script>
 
 <style lang="less">
-//#data-view {
-//  width: 100%;
-//  height: 100%;
-//  background-color: #030409;
-//  color: #fff;
-//
-//  #dv-full-screen-container {
-//    background-image: url("./img/bg.png");
-//    background-size: 100% 100%;
-//    box-shadow: 0 0 3px blue;
-//    display: flex;
-//    flex-direction: column;
-//  }
-//
-//  .main-header {
-//    height: 80px;
-//    display: flex;
-//    justify-content: space-between;
-//    align-items: flex-end;
-//
-//    .mh-left {
-//      font-size: 20px;
-//      color: rgb(1, 134, 187);
-//
-//      a:visited {
-//        color: rgb(1, 134, 187);
-//      }
-//    }
-//
-//    .mh-middle {
-//      font-size: 30px;
-//    }
-//
-//    .mh-left,
-//    .mh-right {
-//      width: 450px;
-//    }
-//  }
-//
-//  .main-container {
-//    height: calc(100% - 160px);
-//
-//    .border-box-content {
-//      padding: 20px;
-//      box-sizing: border-box;
-//      display: flex;
-//    }
-//  }
-//
-//  .left-chart-container {
-//    width: 22%;
-//    padding: 10px;
-//    box-sizing: border-box;
-//
-//    .border-box-content {
-//      flex-direction: column;
-//    }
-//  }
-//
-//  .right-main-container {
-//    width: 78%;
-//    padding-left: 5px;
-//    box-sizing: border-box;
-//  }
-//
-//  .rmc-top-container {
-//    height: 65%;
-//    display: flex;
-//  }
-//
-//  .rmctc-left-container {
-//    width: 65%;
-//  }
-//
-//  .rmctc-right-container {
-//    width: 35%;
-//  }
-//
-//  .rmc-bottom-container {
-//    height: 35%;
-//  }
-//
-//  .rmctc-chart-1,
-//  .rmctc-chart-2 {
-//    height: 50%;
-//  }
-//}
+#data-view {
+  width: 100%;
+  height: 100%;
+  background-color: #030409;
+  color: #fff;
+
+  #dv-full-screen-container {
+    background-image: url("./img/bg.png");
+    background-size: 100% 100%;
+    box-shadow: 0 0 3px blue;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .main-header {
+    height: 80px;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+
+    .mh-left {
+      font-size: 20px;
+      color: rgb(1, 134, 187);
+
+      a:visited {
+        color: rgb(1, 134, 187);
+      }
+    }
+
+    .mh-middle {
+      font-size: 30px;
+    }
+
+    .mh-left,
+    .mh-right {
+      width: 450px;
+    }
+  }
+
+  .main-container {
+    height: calc(100% - 160px);
+
+    .border-box-content {
+      padding: 20px;
+      box-sizing: border-box;
+      display: flex;
+    }
+  }
+
+  .left-chart-container {
+    width: 22%;
+    padding: 10px;
+    box-sizing: border-box;
+
+    .border-box-content {
+      flex-direction: column;
+    }
+  }
+
+  .right-main-container {
+    width: 78%;
+    padding-left: 5px;
+    box-sizing: border-box;
+  }
+
+  .rmc-top-container {
+    height: 65%;
+    display: flex;
+  }
+
+  .rmctc-left-container {
+    width: 65%;
+  }
+
+  .rmctc-right-container {
+    width: 35%;
+  }
+
+  .rmc-bottom-container {
+    height: 35%;
+  }
+
+  .rmctc-chart-1,
+  .rmctc-chart-2 {
+    height: 50%;
+  }
+}
 </style>

src/views/screens/mainScreen.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="screen-window">
-    <dv-full-screen-container>
+    <dv-full-screen-container id="dv-full-screen">
       <ScreenHeader title="综合监控大屏" />
       <div class="screen-content">
         <dv-border-box-9 class="zhleft screen-common-box">
@@ -57,10 +57,10 @@
 </template>
 
 <script lang="ts" setup>
-import ScreenHeader from "@/views/screens/headers/screenHeader.vue";
 import { getComponetnByName } from "@/views/screens/configs/components";
 import SelectComponents from "@/views/screens/configs/SelectComponents.vue";
 import { useCommonStore } from "@/store";
+import ScreenHeader from "@/views/screens/headers/screenHeader.vue";
 
 const commonS = useCommonStore();
 
@@ -94,7 +94,7 @@ const mainS078 = computed(() => {
 <style lang="scss" scoped>
 .zhleft {
   width: 550px;
-  height: calc(100% - 120px);
+  height: 100%;
 }
 
 .spsace {
@@ -103,7 +103,7 @@ const mainS078 = computed(() => {
 
 .zhright {
   width: 100%;
-  height: calc(100% - 120px);
+  height: 100%;
   display: flex;
   flex-direction: column;
 
@@ -118,6 +118,7 @@ const mainS078 = computed(() => {
     justify-content: center;
     align-items: center;
     //height: 100%;
+    //border: 2px solid white;
   }
 
   .item-left {

src/views/screens/qualityScreen.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="screen-window">
-    <dv-full-screen-container>
-      <ScreenHeader title="综合监控大屏" />
+    <dv-full-screen-container id="dv-full-screen">
+      <ScreenHeader title="质量综合大屏" />
       <div class="screen-content" style="flex-direction: column">
         <div class="top-container">
           <dv-border-box-3 class="top-container-box top-left">
@@ -31,10 +31,10 @@
 </template>
 
 <script lang="ts" setup>
-import ScreenHeader from "@/views/screens/headers/screenHeader.vue";
 import { getComponetnByName } from "@/views/screens/configs/components";
 import SelectComponents from "@/views/screens/configs/SelectComponents.vue";
 import { useCommonStore } from "@/store";
+import ScreenHeader from "@/views/screens/headers/screenHeader.vue";
 
 const commonS = useCommonStore();