修改样式调整BUG

src/router/index.js

@@ -83,7 +83,7 @@ router.beforeEach((to, from, next) => {
     } else if(to.path === '/makeprocess') {
       next('/prodline');
     }
-  }, 60000);
+  }, 10000);
   next();
 });
 export default router

src/views/makeprocess/bottom1.vue

@@ -1,41 +1,51 @@
 <template>
   <div id="bottom1">
-    <div class = "up">
+    <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="d-flex jc-center body-box">
-          <dv-scroll-board :config="config" ref="scroll-board" />
+        <div class="body-box">
+          <dv-scroll-board
+              :config="config"
+              ref="scroll-board"
+              :key="componentKey"
+              style="width:100%;height:100%"
+          />
         </div>
       </div>
     </div>
-
   </div>
 </template>
 
 <script>
 export default {
-  components: {
-  },
   data() {
     return {
       config: {
-        header: ['单号','业务员','产品编号','产品名称', '订单数','裁切','打点','SMT','无尘1','无尘2','组装1','组装2','样品','丝印','包装' ],
+        header: ['单号','业务员','产品编号','产品名称', '订单数','裁切','打点','SMT','无尘1','无尘2','组装1','组装2','样品','丝印','包装'],
         data: [],
-        rowNum: 14, //表格行数
-        headerHeight: 35,
-        headerBGC: 'rgba(15,19,37,0.27)', //表头    clearInterval(this.timing);
-        oddRowBGC: 'rgba(15,19,37,0.6)', //奇数行
-        evenRowBGC: 'rgba(23,28,51,0.51)', //偶数行
-        columnWidth: [150,110,220,170, 110, 110, 110, 110, 110, 110,110, 110,110],
-        align: ['center','center','center','center','center','center','center','center','center','center','center','center','center','center','center']
+        rowNum: 14,
+        headerHeight: 45,  // 增大表头高度
+        headerBGC: 'rgba(15,19,37,0.27)',
+        oddRowBGC: 'rgba(15,19,37,0.6)',
+        evenRowBGC: 'rgba(23,28,51,0.51)',
+        columnWidth: [150,110,220,170,110,110,110,110,110,110,110,110,110,110,110],
+        align: ['center','center','center','center','center','center','center','center','center','center','center','center','center','center','center'],
+        index: false,
+        carousel: 'single',
+        hoverPause: true
       },
       timing: null,
+      componentKey: 0  // 用于强制重新渲染
     }
   },
   mounted() {
-    this.refreshdata()
+    this.refreshdata();
+  },
+  activated() {
+    this.componentKey += 1;  // 页面切换时强制重新渲染
+    this.refreshdata();
   },
   beforeDestroy() {
     clearInterval(this.timing);
@@ -45,137 +55,67 @@ export default {
   },
   methods: {
     refreshdata() {
-      this.getdata(); //获取-数据
+      this.getdata();
       this.timing = setInterval(() => {
-        this.getdata(); //获取--数据
+        this.getdata();
       }, 10000);
     },
-
     async getdata() {
       var caller = 'KB!MakeProcess';
-      await this.$http.get("kanban/datalist.action?caller=" + caller + "&_noc=1&page=1&pageSize=100", {
-        params: {
-          condition: "1=1" ,
-        }
-      }).then((result) => {
-                let dataList = JSON.parse(result.data.data);
-                let resultList = new Array();
-                for (let index = 0; index < dataList.length; index++) {
-                  const element = dataList[index];
-                  let item = new Array();
-                  item.push("<span  class='colorY fs-xxl'>" + element.v_salecode + "</span>");
-                  item.push("<span  class='colorY fs-xxl'>" + element.sa_seller + "</span>");
-                  item.push("<span  class='colorY fs-xxl'>" + element.v_prodcode + "</span>");
-                  item.push("<span  class='colorY fs-xxl'>" + element.v_prdetail + "</span>");
-                  item.push("<span  class='colorY fs-xxl'>" + element.v_qty + "</span>");
-                  if(element.v_qty==element.裁切 )
-                  {
-                    item.push("<span  class='colorGrass fs-xxl'>" + element.裁切 + "</span>");
-                  }else {
-                    if(element.v_qty>element.裁切&&element.裁切>0 ){
-                      item.push("<span  class='colorRemind fs-xxl'>" + element.裁切 + "</span>");
-                    }else{
-                      item.push("<span  class='colorY fs-xxl'>" + element.裁切 + "</span>");
-                    }
-                  }
-                  if(element.v_qty==element.打点 ){
-                    item.push("<span  class='colorGrass fs-xxl'>" + element.打点 + "</span>");
-                  }else {
-                    if(element.v_qty>element.打点&&element.打点>0 ){
-                      item.push("<span  class='colorRemind fs-xxl'>" + element.打点 + "</span>");
-                    }else{
-                      item.push("<span  class='colorY fs-xxl'>" + element.打点 + "</span>");
-                    }
-                  }
-                  if(element.v_qty==element.smt ){
-                    item.push("<span  class='colorGrass fs-xxl'>" + element.smt + "</span>");
-                  }else {
-                    if(element.v_qty>element.smt&&element.smt>0 ){
-                      item.push("<span  class='colorRemind fs-xxl'>" + element.smt + "</span>");
-                    }else{
-                      item.push("<span  class='colorY fs-xxl'>" + element.smt + "</span>");
-                    }
-                  }
-                  if(element.v_qty==element.无尘01 ){
-                    item.push("<span  class='colorGrass fs-xxl'>" + element.无尘01 + "</span>");
-                  }else {
-                    if(element.v_qty>element.无尘01&&element.无尘01>0 ){
-                      item.push("<span  class='colorRemind fs-xxl'>" + element.无尘01 + "</span>");
-                    }else{
-                      item.push("<span  class='colorY fs-xxl'>" + element.无尘01 + "</span>");
-                    }
-                  }
-                  if(element.v_qty==element.无尘02 ){
-                    item.push("<span  class='colorGrass fs-xxl'>" + element.无尘02 + "</span>");
-                  }else {
-                    if(element.v_qty>element.无尘02&&element.无尘02>0 ){
-                      item.push("<span  class='colorRemind fs-xxl'>" + element.无尘02 + "</span>");
-                    }else{
-                      item.push("<span  class='colorY fs-xxl'>" + element.无尘02 + "</span>");
-                    }
-                  }
-                  if(element.v_qty==element.组装01 ){
-                    item.push("<span  class='colorGrass fs-xxl'>" + element.组装01 + "</span>");
-                  }else {
-                    if(element.v_qty>element.组装01&&element.组装01>0 ){
-                      item.push("<span  class='colorRemind fs-xxl'>" + element.组装01 + "</span>");
-                    }else{
-                      item.push("<span  class='colorY fs-xxl'>" + element.组装01 + "</span>");
-                    }
-                  }
-                  if(element.v_qty==element.组装02 ){
-                    item.push("<span  class='colorGrass fs-xxl'>" + element.组装02 + "</span>");
-                  }else {
-                    if(element.v_qty>element.组装02&&element.组装02>0 ){
-                      item.push("<span  class='colorRemind fs-xxl'>" + element.组装02 + "</span>");
-                    }else{
-                      item.push("<span  class='colorY fs-xxl'>" + element.组装02 + "</span>");
-                    }
-                  }
-                  if(element.v_qty==element.样品 ){
-                    item.push("<span  class='colorGrass fs-xxl'>" + element.样品 + "</span>");
-                  }else {
-                    if(element.v_qty>element.样品&&element.样品>0 ){
-                      item.push("<span  class='colorRemind fs-xxl'>" + element.样品 + "</span>");
-                    }else{
-                      item.push("<span  class='colorY fs-xxl'>" + element.样品 + "</span>");
-                    }
-                  }
-                  if(element.v_qty==element.丝印 ){
-                    item.push("<span  class='colorGrass fs-xxl'>" + element.丝印 + "</span>");
-                  }else {
-                    if(element.v_qty>element.丝印&&element.丝印>0 ){
-                      item.push("<span  class='colorRemind fs-xxl'>" + element.丝印 + "</span>");
-                    }else{
-                      item.push("<span  class='colorY fs-xxl'>" + element.丝印 + "</span>");
-                    }
-                  }
-                  if(element.v_qty==element.包装 ){
-                    item.push("<span  class='colorGrass fs-xxl'>" + element.包装 + "</span>");
-                  }else {
-                    if(element.v_qty>element.包装&&element.包装>0 ){
-                      item.push("<span  class='colorRemind fs-xxl'>" + element.包装 + "</span>");
-                    }else{
-                      item.push("<span  class='colorY fs-xxl'>" + element.包装 + "</span>");
-                    }
-                  }
-                  resultList.push(item);
-                }
-                const scrollBoard = this.$refs['scroll-board'];
-                //刷新数据
-                scrollBoard.updateRows(resultList);
-              }, (result) => {
-                console.error(result)
-              }
-      );
+      try {
+        const result = await this.$http.get("kanban/datalist.action?caller=" + caller + "&_noc=1&page=1&pageSize=100", {
+          params: { condition: "1=1" }
+        });
+
+        const dataList = JSON.parse(result.data.data);
+        const resultList = dataList.map(element => {
+          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];
+            if(element.v_qty == val) {
+              item.push(`<span class="${baseClass} colorGrass">${val}</span>`);
+            } else if(element.v_qty > val && val > 0) {
+              item.push(`<span class="${baseClass} colorRemind">${val}</span>`);
+            } else {
+              item.push(`<span class="${baseClass} colorY">${val}</span>`);
+            }
+          });
+
+          return item;
+        });
+
+        this.$nextTick(() => {
+          const scrollBoard = this.$refs['scroll-board'];
+          if (scrollBoard) {
+            scrollBoard.updateRows(resultList);
+            if (scrollBoard.resize) {
+              scrollBoard.resize();
+            }
+          }
+        });
+      } catch (error) {
+        console.error(error);
+      }
     }
   }
 };
 </script>
 
-<style lang="scss" class>
+<style lang="scss">
 $box-height: 950px;
 $box-width: 100%;
+
 #bottom1 {
   padding: 10px;
   height: $box-height;
@@ -196,17 +136,39 @@ $box-width: 100%;
 
     .body-box {
       width: $box-width;
-
-      .dv-scroll-board .header {
-        font-size: 25px;
-      }
+      height: 900px;
+      overflow: hidden;
 
       .dv-scroll-board {
-        height: 900px;
+        width: 100% !important;
+        height: 100% !important;
+
+        .header {
+          font-size: 20px !important;
+
+          .header-item {
+            line-height: 45px !important;  // 与headerHeight一致
+            padding: 0 5px !important;
+          }
+        }
+
+        .rows {
+          .row-item {
+            line-height: 45px !important;  // 统一行高
+            margin: 0 !important;
+            padding: 0 !important;
+
+            span.cell-text {
+              display: inline-block;
+              vertical-align: middle;
+              font-size: 24px !important;
+              line-height: 1.5 !important;
+              padding: 0 5px !important;
+            }
+          }
+        }
       }
     }
   }
-
-
 }
 </style>

src/views/prodline/bottom1.vue

@@ -1,42 +1,46 @@
 <template>
   <div id="bottom1">
-    <div class = "up">
+    <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="d-flex jc-center body-box">
-          <dv-scroll-board :config="config" ref="scroll-board" />
+        <div class="body-box">
+          <dv-scroll-board :config="config" ref="scroll-board" :key="componentKey" />
         </div>
       </div>
     </div>
-
   </div>
 </template>
 
 <script>
 export default {
-  components: {
-  },
   data() {
     return {
       config: {
         header: ['线别','销售工单','业务员', '产品名称', '订单数', '订单状态', '计划完成数量','完成数量','完成进度', '提醒事项','类型','异常事项'],
         data: [],
-        rowNum: 9, //表格行数
+        rowNum: 9,
         headerHeight: 35,
-        headerBGC: 'rgba(15,19,37,0.1)', //表头
-        oddRowBGC: 'rgba(15,19,37,0.1)', //奇数行
-        evenRowBGC: 'rgba(23,28,51,0.1)', //偶数行
-        columnWidth: [130,190,100, 180, 120, 130, 180, 180, 120,210,120,190],
-        align: ['center','left','left','left','left','center','center','center','center','center','center','center','center']
+        headerBGC: 'rgba(15,19,37,0.1)',
+        oddRowBGC: 'rgba(15,19,37,0.1)',
+        evenRowBGC: 'rgba(23,28,51,0.1)',
+        columnWidth: [130,190,100,180,120,130,180,180,120,210,120,190],
+        align: ['center','left','left','left','left','center','center','center','center','center','center','center','center'],
+        index: false,
+        carousel: 'single',
+        hoverPause: true
       },
       timing: null,
-      isActive:true,
+      componentKey: 0
     }
   },
   mounted() {
-    this.refreshdata()
+    this.refreshdata();
+  },
+  activated() {
+    this.componentKey += 1;
+    this.refreshdata();
   },
   beforeDestroy() {
     clearInterval(this.timing);
@@ -46,96 +50,63 @@ export default {
   },
   methods: {
     refreshdata() {
-      this.getdata(); //获取-数据
+      this.getdata();
       this.timing = setInterval(() => {
-        this.getdata(); //获取--数据
+        this.getdata();
       }, 10000);
     },
-
     async getdata() {
       var caller = 'KB!LongLineDayPlan';
       await this.$http.get("kanban/datalist.action?caller=" + caller + "&_noc=1&page=1&pageSize=100", {
         params: {
-          condition: "V_OUTLINE='"+sessionStorage.getItem('li_code')+"'" ,
-         // condition: "1=1" ,
+          condition: "V_OUTLINE='"+sessionStorage.getItem('li_code')+"'",
         }
-      })
-          .then((result) => {
-                let dataList = JSON.parse(result.data.data);
-                let resultList = new Array();
-                for (let index = 0; index < dataList.length; index++) {
-                  const element = dataList[index];
-                  let item = new Array();
-                  if(null !=element.v_remark1 && ""!= element.v_remark1){
-                    item.push("<span  class='colorRed fs-xxl'>" + element.v_licode + "</span>");
-                    item.push("<span  class='colorRed fs-xxl'>" + element.v_sacode + "</span>");
-                    item.push("<span  class='colorRed fs-xxl'>" + element.v_seller + "</span>");
-                    item.push("<span  class='colorRed fs-xxl'>" + element.v_jitype + "</span>");
-                    item.push("<span  class='colorRed fs-xxl'>" + element.v_qty + "</span>");
-                    item.push("<span  class='colorRed fs-xxl'>" + element.v_blstatus + "</span>");
-                    item.push("<span  class='colorRed fs-xxl'>" + element.v_planoutqty + "</span>");
-                    item.push("<span  class='colorRed fs-xxl'>" + element.v_madeqty + "</span>");
-                    item.push("<span  class='colorRed fs-xxl'>" + element.v_madejd + "</span>");
-                    item.push("<span  class='colorRed fs-xxl'>" + element.v_remark + "</span>");
-                    item.push("<span  class='colorRed fs-xxl'>" + element.v_remark1 + "</span>");
-                    item.push("<span  class='colorRed fs-xxl'>" + element.v_yc + "</span>");
-                  }else{
-                    if (element.v_blstatus == '加工中') {  //98%
-                      item.push("<span  class='colorRemind fs-xxl'>" + element.v_licode + "</span>");
-                      item.push("<span  class='colorRemind fs-xxl'>" + element.v_sacode + "</span>");
-                      item.push("<span  class='colorRemind fs-xxl'>" + element.v_seller + "</span>");
-                      item.push("<span  class='colorRemind fs-xxl'>" + element.v_jitype + "</span>");
-                      item.push("<span  class='colorRemind fs-xxl'>" + element.v_qty + "</span>");
-                      item.push("<span  class='colorRemind fs-xxl'>" + element.v_blstatus + "</span>");
-                      item.push("<span  class='colorRemind fs-xxl'>" + element.v_planoutqty + "</span>");
-                      item.push("<span  class='colorRemind fs-xxl'>" + element.v_madeqty + "</span>");
-                      item.push("<span  class='colorRemind fs-xxl'>" + element.v_madejd + "</span>");
-                      item.push("<span  class='colorRemind fs-xxl'>" + element.v_remark + "</span>");
-                      item.push("<span  class='colorRemind fs-xxl'>" + element.v_remark1 + "</span>");
-                      item.push("<span  class='colorRemind fs-xxl'>" + element.v_yc + "</span>");
-                    } else {
-                      item.push("<span  class='colorGrass fs-xxl'>" + element.v_licode + "</span>");
-                      item.push("<span  class='colorGrass fs-xxl'>" + element.v_sacode + "</span>");
-                      item.push("<span  class='colorGrass fs-xxl'>" + element.v_seller + "</span>");
-                      item.push("<span  class='colorGrass fs-xxl'>" + element.v_jitype + "</span>");
-                      item.push("<span  class='colorGrass fs-xxl'>" + element.v_qty + "</span>");
-                      item.push("<span  class='colorGrass fs-xxl'>" + element.v_blstatus + "</span>");
-                      item.push("<span  class='colorGrass fs-xxl'>" + element.v_planoutqty + "</span>");
-                      item.push("<span  class='colorGrass fs-xxl'>" + element.v_madeqty + "</span>");
-                      item.push("<span  class='colorGrass fs-xxl'>" + element.v_madejd + "</span>");
-                      item.push("<span  class='colorRemind fs-xxl'>" + element.v_remark + "</span>");
-                      item.push("<span  class='colorGrass fs-xxl'>" + element.v_remark1 + "</span>");
-                      item.push("<span  class='colorRemind fs-xxl'>" + element.v_yc + "</span>");
-                    }
-                  }
-                  resultList.push(item);
-                }
-                const scrollBoard = this.$refs['scroll-board'];
-                //刷新数据
-                scrollBoard.updateRows(resultList);
-              }, (result) => {
-                console.error(result)
-              }
-          );
+      }).then((result) => {
+        let dataList = JSON.parse(result.data.data);
+        let resultList = [];
+        for (let index = 0; index < dataList.length; index++) {
+          const element = dataList[index];
+          let item = [];
+          const cellClass = element.v_remark1 && element.v_remark1 !== "" ? 'colorRed' :
+              element.v_blstatus == '加工中' ? 'colorRemind' : 'colorGrass';
+
+          item.push(`<span class="cell-text ${cellClass}">${element.v_licode}</span>`);
+          item.push(`<span class="cell-text ${cellClass}">${element.v_sacode}</span>`);
+          item.push(`<span class="cell-text ${cellClass}">${element.v_seller}</span>`);
+          item.push(`<span class="cell-text ${cellClass}">${element.v_jitype}</span>`);
+          item.push(`<span class="cell-text ${cellClass}">${element.v_qty}</span>`);
+          item.push(`<span class="cell-text ${cellClass}">${element.v_blstatus}</span>`);
+          item.push(`<span class="cell-text ${cellClass}">${element.v_planoutqty}</span>`);
+          item.push(`<span class="cell-text ${cellClass}">${element.v_madeqty}</span>`);
+          item.push(`<span class="cell-text ${cellClass}">${element.v_madejd}</span>`);
+          item.push(`<span class="cell-text ${element.v_remark ? 'colorRemind' : cellClass}">${element.v_remark}</span>`);
+          item.push(`<span class="cell-text ${cellClass}">${element.v_remark1}</span>`);
+          item.push(`<span class="cell-text ${element.v_yc ? 'colorRemind' : cellClass}">${element.v_yc}</span>`);
+
+          resultList.push(item);
+        }
+        this.$nextTick(() => {
+          const scrollBoard = this.$refs['scroll-board'];
+          if (scrollBoard) {
+            scrollBoard.updateRows(resultList);
+            if (scrollBoard.resize) {
+              scrollBoard.resize();
+            }
+          }
+        });
+      }).catch((error) => {
+        console.error(error);
+      });
     }
   }
 };
 </script>
 
-<style lang="scss" class>
+<style lang="scss">
 $box-height: 520px;
 $box-width: 100%;
+
 #bottom1 {
-  .dv-scroll-board {
-    .rows {
-      .row-item {
-        line-height: 1.5 !important;  // 统一行高
-        span {
-          vertical-align: middle;     // 垂直居中
-        }
-      }
-    }
-  }
   padding: 13px;
   height: $box-height;
   width: $box-width;
@@ -155,17 +126,38 @@ $box-width: 100%;
 
     .body-box {
       width: $box-width;
-
-      .dv-scroll-board .header {
-        font-size: 25px;
-      }
+      height: 470px;
+      overflow: hidden;
 
       .dv-scroll-board {
-        height: 470px;
+        width: 100% !important;
+        height: 100% !important;
+
+        .header {
+          font-size: 25px;
+
+          .header-item {
+            line-height: 35px !important;
+          }
+        }
+
+        .rows {
+          .row-item {
+            line-height: 40px !important;
+            margin: 0 !important;
+            padding: 0 !important;
+
+            span.cell-text {
+              display: inline-block;
+              vertical-align: middle;
+              font-size: 24px;
+              line-height: 1.5;
+              padding: 4px 0;
+            }
+          }
+        }
       }
     }
   }
-
-
 }
 </style>