修改样式调整BUG

src/views/makeprocess/bottom1.vue

@@ -1,11 +1,11 @@
 <template>
-  <div id="bottom1">
+  <div id="bottom2">
     <div class="up">
       <div class="bg-color-black">
         <div class="d-flex pt-1 pl-2 pb-2 jc-center">
           <span class="fs-xxl text mx-2 fw-b">订单执行进度</span>
         </div>
-        <div class="body-box">
+        <div class="body-box" ref="bodyBox">
           <dv-scroll-board
               :config="config"
               ref="scroll-board"
@@ -26,7 +26,7 @@ export default {
         header: ['单号','业务员','产品编号','产品名称', '订单数','裁切','打点','SMT','无尘1','无尘2','组装1','组装2','样品','丝印','包装'],
         data: [],
         rowNum: 14,
-        headerHeight: 45,  // 增大表头高度
+        headerHeight: 45,
         headerBGC: 'rgba(15,19,37,0.27)',
         oddRowBGC: 'rgba(15,19,37,0.6)',
         evenRowBGC: 'rgba(23,28,51,0.51)',
@@ -34,17 +34,24 @@ export default {
         align: ['center','center','center','center','center','center','center','center','center','center','center','center','center','center','center'],
         index: false,
         carousel: 'single',
-        hoverPause: true
+        hoverPause: true,
+        // 添加等待时间确保高度计算正确
+        waitTime: 500
       },
       timing: null,
-      componentKey: 0  // 用于强制重新渲染
+      componentKey: 0
     }
   },
   mounted() {
     this.refreshdata();
+    this.resizeHandler();
+    window.addEventListener('resize', this.resizeHandler);
   },
   activated() {
-    this.componentKey += 1;  // 页面切换时强制重新渲染
+    this.componentKey += 1;
+    this.$nextTick(() => {
+      this.resizeHandler();
+    });
     this.refreshdata();
   },
   beforeDestroy() {
@@ -52,8 +59,21 @@ export default {
     if (this.$refs['scroll-board'] && this.$refs['scroll-board'].destroy) {
       this.$refs['scroll-board'].destroy();
     }
+    window.removeEventListener('resize', this.resizeHandler);
   },
   methods: {
+    resizeHandler() {
+      this.$nextTick(() => {
+        if (this.$refs.bodyBox) {
+          const height = this.$refs.bodyBox.clientHeight - 40; // 减去一些边距
+          this.config = {
+            ...this.config,
+            height: height + 'px'
+          };
+          this.componentKey += 1; // 强制重新渲染以应用新高度
+        }
+      });
+    },
     refreshdata() {
       this.getdata();
       this.timing = setInterval(() => {
@@ -72,14 +92,12 @@ export default {
           const item = [];
           const baseClass = 'cell-text';
 
-          // 前5列使用黄色
           item.push(`<span class="${baseClass} colorY">${element.v_salecode}</span>`);
           item.push(`<span class="${baseClass} colorY">${element.sa_seller}</span>`);
           item.push(`<span class="${baseClass} colorY">${element.v_prodcode}</span>`);
           item.push(`<span class="${baseClass} colorY">${element.v_prdetail}</span>`);
           item.push(`<span class="${baseClass} colorY">${element.v_qty}</span>`);
 
-          // 处理各工序状态
           const processes = ['裁切', '打点', 'smt', '无尘01', '无尘02', '组装01', '组装02', '样品', '丝印', '包装'];
           processes.forEach(process => {
             const val = element[process];
@@ -116,17 +134,21 @@ export default {
 $box-height: 950px;
 $box-width: 100%;
 
-#bottom1 {
+#bottom2 {
   padding: 10px;
   height: $box-height;
   width: $box-width;
   border-radius: 5px;
 
   .up {
+    height: 100%;
+
     .bg-color-black {
       border-radius: 10px;
-      height: 920px;
+      height: 100%;
       padding: 5px;
+      display: flex;
+      flex-direction: column;
     }
 
     .text {
@@ -135,9 +157,11 @@ $box-width: 100%;
     }
 
     .body-box {
+      flex: 1;
       width: $box-width;
-      height: 900px;
+      height: $box-height; // 修复flex布局中的高度问题
       overflow: hidden;
+      position: relative;
 
       .dv-scroll-board {
         width: 100% !important;
@@ -147,14 +171,14 @@ $box-width: 100%;
           font-size: 20px !important;
 
           .header-item {
-            line-height: 45px !important;  // 与headerHeight一致
+            line-height: 45px !important;
             padding: 0 5px !important;
           }
         }
 
         .rows {
           .row-item {
-            line-height: 45px !important;  // 统一行高
+            line-height: 45px !important;
             margin: 0 !important;
             padding: 0 !important;
 

src/views/makeprocess/index.vue

@@ -10,15 +10,15 @@
             <div class="title">
               <span class="title-text">COSTEC-MES 可视化平台</span>
               <dv-decoration-6
-                class="dv-dec-6"
-                :reverse="true"
-                :color="['#50e3c2', '#67a1e5']"
+                  class="dv-dec-6"
+                  :reverse="true"
+                  :color="['#50e3c2', '#67a1e5']"
               />
             </div>
             <dv-decoration-8
-              class="dv-dec-8"
-              :reverse="true"
-              :color="decorationColor"
+                class="dv-dec-8"
+                :reverse="true"
+                :color="decorationColor"
             />
           </div>
           <dv-decoration-10 class="dv-dec-10-s" />
@@ -50,7 +50,7 @@
                   <el-dropdown-item class="dropdownitem"><router-link to="quality">品质看板</router-link></el-dropdown-item>
                   <el-dropdown-item class="dropdownitem"><router-link to="warehouse">仓库看板</router-link></el-dropdown-item>
                   <el-dropdown-item class="dropdownitem"><router-link to="zz">组装看板</router-link></el-dropdown-item>
-                 </el-dropdown-menu>
+                </el-dropdown-menu>
               </el-dropdown>
               <span class="text">&nbsp;&nbsp;&nbsp;&nbsp;</span>
               <span class="text">{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span>
@@ -58,12 +58,12 @@
           </div>
         </div>
 
-        <div class="body-box">
-          <!-- 下面 -->
-          <div class="bottom-box">
-              <dv-border-box-12>
-                <bottom1 />
-              </dv-border-box-12>
+        <!-- 修改后的主体内容区域 -->
+        <div class="body-box" style="height: calc(100vh - 120px); overflow: hidden;">
+          <div class="bottom-box" style="height: 100%;">
+            <dv-border-box-12 style="height: 100%;">
+              <bottom1 />
+            </dv-border-box-12>
           </div>
         </div>
       </div>
@@ -100,7 +100,7 @@ export default {
     bottom1
   },
   created() {
-     this.isFullScreen = document.fullscreenElement;
+    this.isFullScreen = document.fullscreenElement;
   },
   mounted() {
     this.timeFn();
@@ -140,20 +140,18 @@ export default {
         }, 3000)
       }
     },
-
   }
 }
 </script>
 
 <style lang="scss" scoped>
 @import '../../assets/scss/indexmakeprocess.scss';
+
 .dropdown{
   font-size: 22px;
   color: #f7f8fa;
   transform: skewX(45deg);
   ::v-deep .el-select-dropdown {
-    /* // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；
-    // 因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示； */
     border: 1px solid #0f1325;
     background: #04308D !important;
   }
@@ -187,4 +185,26 @@ export default {
   }
 }
 
-</style>
+/* 新增样式 */
+.bg {
+  height: 100vh;
+  width: 100vw;
+  overflow: hidden;
+}
+
+.host-body {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.body-box {
+  flex: 1;
+  min-height: 0; /* 修复flex布局中内容溢出问题 */
+}
+
+.bottom-box {
+  height: 100%;
+  width: 100%;
+}
+</style>