body设置为overflowhidden，工位大屏布局。

package.json

@@ -41,7 +41,6 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.1",
-    "@kjgl77/datav-vue3": "^1.7.3",
     "@smallwei/avue": "^3.3.3",
     "@types/smallwei__avue": "^3.0.5",
     "@vueup/vue-quill": "1.0.0-alpha.40",
@@ -67,6 +66,7 @@
     "sortablejs": "^1.15.2",
     "stompjs": "^2.3.3",
     "uuid": "^9.0.1",
+    "v-scale-screen": "2.0.12",
     "vue": "^3.4.21",
     "vue-draggable-plus": "^0.4.0",
     "vue-i18n": "9.9.1",

src/plugins/icons.ts

@@ -1,12 +1,8 @@
 import type { App } from "vue";
 import * as ElementPlusIconsVue from "@element-plus/icons-vue";
 
-import DataVVue3 from "@kjgl77/datav-vue3";
-
 // 注册所有图标
 export function setupElIcons(app: App<Element>) {
-  app.use(DataVVue3);
-
   for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
     app.component(key, component);
   }

src/styles/reset.scss

@@ -25,8 +25,9 @@ body {
   width: 100%;
   height: 100%;
   margin: 0;
+  overflow: hidden;
   font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
-    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
+  "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
   line-height: inherit;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;

src/views/report/statistics/screens/tasks/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <dv-full-screen-container>
+  <v-scale-screen height="100%" width="100%">
     <div class="screen-container">
       <common-header title="工位任务分布" />
       <div class="screen-content">
@@ -7,7 +7,14 @@
           <title-header title="入库检料" />
           <div class="grid-bottom">
             <div class="left-info">
-              <div class="box">
+              <div
+                class="box"
+                style="
+                  display: flex;
+                  flex-direction: column;
+                  justify-content: center;
+                "
+              >
                 <div class="title">工位名称</div>
                 <div class="code">工位代码</div>
               </div>
@@ -24,19 +31,21 @@
         </div>
       </div>
     </div>
-  </dv-full-screen-container>
+  </v-scale-screen>
 </template>
 
 <script lang="ts" setup>
 import CommonHeader from "@/views/report/statistics/screens/common-header.vue";
 import TitleHeader from "@/views/report/statistics/screens/titleHeader.vue";
+import VScaleScreen from "v-scale-screen";
 
-const data = ref([{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}]);
+const data = ref([{}, {}, {}, {}, {}, {}, {}, {}]);
 </script>
 
 <style lang="scss" scoped>
 .screen-container {
-  width: 100vw;
+  width: 100%;
+  min-width: 1620px;
   height: 100vh;
   background-image: url("@/assets/images/screen_bg_task.png");
   background-size: cover;
@@ -44,21 +53,23 @@ const data = ref([{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}]);
 }
 
 .screen-content {
-  width: 100vw;
-  height: calc(100vh - $screen-header-height - 18px);
+  width: 100%;
+  //height: 100%;
+  height: calc(100% - $screen-header-height - 18px);
   margin-top: 18px;
   padding: 0 32px;
 
   display: grid;
   grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 1fr);
   gap: 25px;
 
   overflow-y: auto;
 
-  border: 2px solid red;
-
   .grid-item {
-    height: 300px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
     background: rgba(0, 0, 0, 0.5);
     border-radius: 8px 8px 8px 8px;
     padding: 16px;
@@ -67,7 +78,7 @@ const data = ref([{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}]);
       display: flex;
       justify-content: space-between;
       align-items: center;
-      height: 100%;
+      flex: 1; //当父组件为flex时候，子组件剩余空间可写100%或者flex：1；
 
       .left-info {
         display: flex;
@@ -75,11 +86,11 @@ const data = ref([{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}]);
         justify-content: space-between;
         align-items: start;
         padding: 0px 18px;
-        border: 2px solid white;
+        height: 100%;
+        width: 60%;
 
         .box {
           height: 50%;
-          border: 2px solid red;
         }
 
         .title {
@@ -94,23 +105,24 @@ const data = ref([{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}]);
           font-size: 17px;
           color: #fff8;
           line-height: 17px;
+          margin-top: 12px;
         }
 
         .com-num {
           font-weight: 500;
-          font-size: 48px;
+          font-size: 30px;
           color: #55d1aa;
         }
 
         .plan-num {
           font-weight: 500;
-          font-size: 48px;
+          font-size: 30px;
           color: #fff;
         }
 
         .desc {
           font-weight: 400;
-          font-size: 17px;
+          font-size: 16px;
           color: #ffffff;
           line-height: 17px;
         }
@@ -121,6 +133,8 @@ const data = ref([{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}]);
         justify-content: center;
         align-items: center;
         padding-right: 28px;
+        height: 100%;
+        flex: 1;
       }
     }
   }