科赛车间看板调整

src/assets/scss/indexprodline.scss

@@ -132,15 +132,9 @@
       margin-top: 10px;
       display: flex;
       flex-direction: column;
-
-      //下方区域的布局
-     /* .content-box {
-        display: grid;
-        grid-template-columns: 1.5fr 1.3fr 1.2fr;
-      }*/
       .content-box {
         display: grid;
-        grid-template-columns: 1.2fr 1fr 1.1fr 0.7fr;
+        grid-template-columns: 0.9fr 1.5fr 1.2fr;
       }
 
       // 底部数据

src/components/prodlinechart/up1Chart/up1DChart/index.vue

@@ -4,8 +4,8 @@
     <Echart
         :options="options"
         :id="id"
-        height="125px"
-        width="140px"
+        height="150px"
+        width="200px"
     ></Echart>
   </div>
 </template>
@@ -55,7 +55,7 @@ export default {
         this.options = {
           title:{
             text: newData * 1 + "%",
-            x: "45%",
+            x: "50%",
             y: "center",
             textStyle: {
               color: this.colorObj.textStyle,

src/views/prodline/bottom1.vue

@@ -1,12 +1,38 @@
 <template>
   <div id="bottom1">
-    <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">
-          <dv-scroll-board :config="config" ref="scroll-board" :key="componentKey" />
+    <div class="bg-color-black">
+      <div class="up">
+          <div class ="left">
+            <div class="vertical-text">
+              <span>当日</span>
+              <span>产线</span>
+              <span>计划</span>
+              <span>未完</span>
+              <span>成订</span>
+              <span>单明</span>
+              <span>细</span>
+            </div>
+          </div>
+          <div class="body-box">
+            <dv-scroll-board :config="config" ref="scroll-board" :key="componentKey" />
+          </div>
+      </div>
+
+      <div class="down1">
+        <div>{{shop}}</div>
+        <div>今日计划数 <span class="spec">{{finishrate2}}</span> </div>
+        <div>急单数   <span class="spec">{{finishrate}} </span> </div>
+        <div>今日完成数 <span class="spec">{{finishrate3}} </span> </div>
+        <div>今日完成率 <span class="spec">{{finishrate4}}% </span>  </div>
+        <div>今日订单数 <span class="spec">{{finishrate3}} </span> </div>
+        <div>昨日达成率  <span class="spec">{{finishrate5}}% </span>  </div>
+      </div>
+
+      <div class="ticker-wrapper">
+        <div class="ticker-mask ticker-mask-left"></div>
+        <div class="ticker-mask ticker-mask-right"></div>
+        <div class="down2" v-html="msg">
+
         </div>
       </div>
     </div>
@@ -18,15 +44,15 @@ export default {
   data() {
     return {
       config: {
-        header: ['线别','销售工单','业务员', '产品名称', '订单数', '订单状态', '计划完成数量','完成数量','完成进度', '提醒事项','类型','异常事项'],
+        header: ['销售工单','业务员', '产品名称', '订单数', '计划数','完成数', '提醒事项','异常事项'],
         data: [],
-        rowNum: 9,
+        rowNum: 8,
         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'],
+        columnWidth: [220,120,350,140,140,140,420,200],
+        align: ['center','center','center','center','center','center','center','center'],
         index: false,
         carousel: 'page',
         hoverPause: true,
@@ -34,7 +60,14 @@ export default {
         waitTime: 10000
       },
       timing: null,
-      componentKey: 0
+      componentKey: 0,
+      finishrate:0,
+      finishrate2:0,
+      finishrate3:0,
+      finishrate4:0,
+      finishrate5:0,
+      shop: sessionStorage.getItem('li_code'),
+      msg: '',
     }
   },
   mounted() {
@@ -59,9 +92,10 @@ export default {
     },
     async getdata() {
       var caller = 'KB!LongLineDayPlan';
+      var licode=  sessionStorage.getItem('li_code');
       await this.$http.get("kanban/datalist.action?caller=" + caller + "&_noc=1&page=1&pageSize=100", {
         params: {
-          condition: "V_OUTLINE='"+sessionStorage.getItem('li_code')+"'",
+          condition: "V_OUTLINE='"+licode+"'",
         }
       }).then((result) => {
         let dataList = JSON.parse(result.data.data);
@@ -72,16 +106,16 @@ export default {
           const cellClass = element.v_remark1 && element.v_remark1 !== "" ? 'colorRed' :
               element.v_blstatus == '加工中' ? 'colorRemind' : element.v_blstatus == '已完成'?'colorGrass':'colorY';
 
-          item.push(`<span class="cell-text ${cellClass}">${element.v_licode}</span>`);
+          //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_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_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>`);
 
@@ -99,13 +133,54 @@ export default {
       }).catch((error) => {
         console.error(error);
       });
+
+      //设备提醒信息
+      caller = 'KB!LINEDEVICEREMIND';
+      await this.$http.get("kanban/datalist.action?caller=" + caller + "&_noc=1&page=1&pageSize=100", {
+        params: {
+          condition: "de_workshop='"+licode+"'"
+        }
+      }).then((result) => {
+          let dataList = JSON.parse(result.data.data);
+          let msg = "";
+          if (dataList.length > 0) {
+              for (let index = 0; index < dataList.length; index++) {
+                const element = dataList[index];
+                msg += "<div>"+element.de_code + "&nbsp" + element.v_remind + "&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp </div>";
+              }
+              this.msg = msg+msg+msg+msg+msg;
+          }
+          }, (result) => {
+            console.error(result)
+          }
+      );
+
+      //比例,用的是总看板的达成比例caller，如果不一样，自行修改caller
+      caller = 'KB!TOTALDayMakeRate';
+      await this.$http.get("kanban/datalist.action?caller="+caller+"&_noc=1&page=1&pageSize=100",{
+        params: {
+          condition: "V_OUTLINE='"+licode+"'" ,
+        }
+      }).then((result) => {
+            let dataList = JSON.parse(result.data.data);
+            if(dataList.length>0){
+              this.finishrate = dataList[0].finishrate;
+              this.finishrate2 = dataList[0].finishrate2;
+              this.finishrate3 = dataList[0].finishrate3;
+              this.finishrate4 = dataList[0].finishrate4;
+              this.finishrate5 = dataList[0].finishrate5;
+            }
+          }, (result) => {
+            console.error(result)
+          }
+      );
     }
   }
 };
 </script>
 
 <style lang="scss">
-$box-height: 520px;
+$box-height: 570px;
 $box-width: 100%;
 
 #bottom1 {
@@ -113,14 +188,36 @@ $box-width: 100%;
   height: $box-height;
   width: $box-width;
   border-radius: 5px;
-
+  .bg-color-black {
+    border-radius: 10px;
+    height: 560px;
+    padding: 5px;
+  }
   .up {
-    .bg-color-black {
-      border-radius: 10px;
-      height: 495px;
-      padding: 5px;
+    display: grid;
+    grid-template-columns: 0.1fr 2fr ;
+    .left {
+      display: flex;
+      align-items: center;     /* 垂直居中 */
+      .vertical-text {
+        height: 380px;
+        background: linear-gradient(160deg, #0066cc, #0044aa);
+        color: white;
+        padding: 15px 5px;
+        border-radius: 15px;
+        display: inline-flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        font-size: 22px;
+        font-weight: bold;
+        text-align: center;
+        line-height: 2.2;
+        letter-spacing: 5px;
+        transform: rotateX(10deg);
+        transition: all 0.4s ease;
+      }
     }
-
     .text {
       color: #c3cbde;
       font-size: 25px;
@@ -128,9 +225,8 @@ $box-width: 100%;
 
     .body-box {
       width: $box-width;
-      height: 470px;
+      height: 450px;
       overflow: hidden;
-
       .dv-scroll-board {
         width: 100% !important;
         height: 100% !important;
@@ -142,7 +238,6 @@ $box-width: 100%;
             line-height: 35px !important;
           }
         }
-
         .rows {
           .row-item {
             line-height: 40px !important;
@@ -161,5 +256,117 @@ $box-width: 100%;
       }
     }
   }
+  .down1{
+    width:100%;
+    height: 40px;
+    border-radius: 15px;
+    color: white;              /* 文字颜色 */
+    padding: 1px 35px;        /* 内边距 */
+    background: linear-gradient(160deg, #0ad386, #00aa55);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 22px;
+    font-weight: bold;
+    .spec{
+      width:80px;
+      padding: 4px 0px ;
+      background: linear-gradient(160deg, #f3fcf8, #effdf6);
+      color: #0ad386;
+      display: inline-block;
+      transition: all 0.3s ease;
+      text-align: center;
+      border-radius: 8px;
+    }
+  }
+
+  .ticker-wrapper {
+    display: flex;
+    position: relative;
+    height: 40px;
+    align-items: center;
+    overflow: hidden;
+    color: red;
+    padding: 5px 25px 0px 25px;
+    background: linear-gradient(160deg, #0066cc, #0044aa);
+    font-size: 23px;
+    font-weight: bold;
+    margin-top: 10px;
+    margin-left: -15px;
+    margin-right: -15px;
+  }
+
+  .ticker-mask {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 80px;
+    z-index: 2;
+  }
+
+  .ticker-mask-left {
+    left: 0;
+    background: linear-gradient(to right, rgba(0, 68, 170, 1), rgba(0, 68, 170, 0));
+  }
+
+  .ticker-mask-right {
+    right: 0;
+    background: linear-gradient(to left, rgba(0, 68, 170, 1), rgba(0, 68, 170, 0));
+  }
+
+  .down2 {
+    display: flex;
+    position: absolute;
+    white-space: nowrap;
+    /* 修改动画名称和时间 */
+    animation: scrollRight 30s linear infinite;
+    padding: 10px 0;
+    /* 确保从左侧开始 */
+    left: 100%;
+  }
+
+  .down2:hover {
+    animation-play-state: paused;
+  }
+
+  .down2 > div {
+    display: inline-flex;
+    align-items: center;
+    font-weight: 500;
+    position: relative;
+    border-radius: 8px;
+    margin: 0 10px;
+    transition: all 0.3s ease;
+  }
+
+  .down2 > div:hover {
+    transform: translateY(-3px);
+  }
+
+  .down2 > div::after {
+    content: '';
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    height: 30px;
+    width: 2px;
+    background: rgba(255, 255, 255, 0.2);
+  }
+
+  .down2 > div:last-child::after {
+    display: none;
+  }
+
+  /* 新增关键帧动画 */
+  @keyframes scrollRight {
+    0% {
+      transform: translateX(0);
+    }
+    100% {
+      transform: translateX(-100%);
+    }
+  }
+
 }
 </style>

src/views/prodline/index.vue

@@ -82,11 +82,6 @@
                   <up2 />
                 </dv-border-box-12>
               </div>
-              <div>
-                <dv-border-box-12>
-                  <up3 />
-                </dv-border-box-12>
-              </div>
             <div>
               <dv-border-box-12>
                 <up4 />
@@ -111,7 +106,6 @@ import  common  from '../../utils/common';
 import {formatTime} from '../../utils/index.js'
 import up1 from './up1'
 import up2 from './up2'
-import up3 from './up3.vue'
 import up4 from './up4.vue'
 import bottom1 from './bottom1.vue'
 import {mapMutations, mapState} from "vuex"
@@ -139,7 +133,6 @@ export default {
   components: {
     up1,
     up2,
-    up3,
     up4,
     bottom1
   },

src/views/prodline/up1.vue

@@ -1,30 +1,26 @@
 <template>
   <div id="up1">
     <div class="bg-color-black">
-      <div class="d-flex pt-1 pl-2">
-       <span>
-          <icon name="chart-line" class="text-icon"></icon>
-        </span>
-        <span class="fs-xxl text mx-2 fw-b">设备维保执行情况</span>
+      <div class ="left">
+        <div class="vertical-text">
+          <span class="text mx-2 fw-b">设备状况</span>
+        </div>
       </div>
       <div class="body-box">
         <div class="percent mt-2">
-          <div class="item mt-3"   v-for="item in rate"
-               :key="item.id">
-            <span class="mb-2">{{ item.title }}</span>
+            <div class="circletitle">{{ rate.title }}</div>
             <CenterChart
-                :id="item.id"
-                :tips="item.tips"
-                :colorObj="item.colorData"
+                :id="rate.id"
+                :tips="rate.tips"
+                :colorObj="rate.colorData"
             />
-          </div>
-          <div class ="item2">
-            <span class="fs-xl mx-2 d-flex jc-center">设备提醒信息</span>
-            <dv-scroll-board :config="config1" ref="scroll-board1" />
-          </div>
-          <div class="d-flex jc-center body-box2">
-            <dv-scroll-board :config="config" ref="scroll-board" />
-          </div>
+        </div>
+
+        <div class="dec">
+          <div class="mt-3">车间总设备数量：{{totalqty}}</div>
+          <div class="mt-3">正常运行设备数量：{{okqty}}</div>
+          <div class="mt-3">异常设备数量：{{abnormalqty}}</div>
+          <div class="mt-3">已保养设备数量：{{byqty}}</div>
         </div>
       </div>
     </div>
@@ -38,17 +34,10 @@ import CenterChart from "../../components/prodlinechart/up1Chart/up1DChart";
     components: {CenterChart},
     data() {
       return {
-        config: {
-          header: ['设备编号','设备名称', '运行状态','维保状态'],
-          data: [],
-          rowNum: 4, //表格行数
-          headerHeight: 40,
-          headerBGC: 'rgba(15,19,37,0.1)', //表头
-          oddRowBGC: 'rgba(15,19,37,0.1)', //奇数行
-          evenRowBGC: 'rgba(23,28,51,0.1)', //偶数行
-          columnWidth: [100,180, 110,110],
-          align: ['center','center','center','center'],
-        },
+        totalqty: 0,
+        okqty: 0,
+        abnormalqty: 0,
+        byqty: 0,
         config1: {
           header: ['设备编号','提醒事项'],
           data: [],
@@ -61,10 +50,10 @@ import CenterChart from "../../components/prodlinechart/up1Chart/up1DChart";
           align: ['center','center'],
         },
         timing:null,
-        rate: [
-          {
+        rate: {
             id: 'centerRate1',
             tips: 60,
+            title:'保养状况',
             colorData: {
               textStyle: '#31b4fb',
               series: {
@@ -76,35 +65,6 @@ import CenterChart from "../../components/prodlinechart/up1Chart/up1DChart";
               }
             }
           },
-         /* {
-            id: 'centerRate2',
-            tips: 60,
-            colorData: {
-              textStyle: '#43cfe9',
-              series: {
-                color: ['#00bcd44a', 'transparent'],
-                dataColor: {
-                  normal: '#32C5E9',
-                  shadowColor: '#9fe5f5'
-                }
-              }
-            }
-          },
-          {
-            id: 'centerRate3',
-            tips: 60,
-            colorData: {
-              textStyle: '#6ad59c',
-              series: {
-                color: ['rgba(25,161,95,0.29)', 'transparent'],
-                dataColor: {
-                  normal: '#00a11a',
-                  shadowColor: '#6cda9c'
-                }
-              }
-            }
-          },*/
-        ]
       }
     },
     mounted() {
@@ -130,76 +90,27 @@ import CenterChart from "../../components/prodlinechart/up1Chart/up1DChart";
                   let dataList = JSON.parse(result.data.data);
                   if (dataList.length > 0) {
                     const element = dataList[0];
-                    this.rate[0].tips = element.rate;
-                    this.rate[0].title = element.title;
+                    this.rate.tips = element.rate;
                   }
-                 /* for (let index = 0; index < dataList.length; index++) {
-                    const element = dataList[index];
-                    this.rate[index].tips = element.rate;
-                    this.rate[index].title = element.title;
-                  }*/
                 },(result)=>{
                   console.error(result)
                 }
             );
 
-        var caller = 'KB!LINEDEVICE';
+         //设备数量汇总
+        var caller = 'KB!LINEDEVICETOTAL';
         await this.$http.get("kanban/datalist.action?caller=" + caller + "&_noc=1&page=1&pageSize=100", {
           params: {
             condition: "de_workshop='"+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(element.de_maintain =='未保养' ||element.de_runstatus =='故障中'){
-                  item.push("<span  class='colorRed fs-xl'>" + element.de_code + "</span>");
-                  item.push("<span  class='colorRed fs-xl'>" + element.de_name + "</span>");
-                  item.push("<span  class='colorRed fs-xl'>" + element.de_runstatus + "</span>");
-                  item.push("<span  class='colorRed fs-xl'>" + element.de_maintain + "</span>");
-                  item.push("<span  class='colorRed fs-xl'>" + element.de_remark + "</span>");
-                }else{
-                  item.push("<span  class='colorGrass fs-xl'>" + element.de_code + "</span>");
-                  item.push("<span  class='colorGrass fs-xl'>" + element.de_name + "</span>");
-                  item.push("<span  class='colorGrass fs-xl'>" + element.de_runstatus + "</span>");
-                  item.push("<span  class='colorGrass fs-xl'>" + element.de_maintain + "</span>");
-                  item.push("<span  class='colorGrass fs-xl'>" + element.de_remark + "</span>");
-                }
-                resultList.push(item);
+              if (dataList.length > 0) {
+                this.totalqty = dataList[0].totalqty;
+                this.okqty = dataList[0].okqty;
+                this.abnormalqty = dataList[0].abnormalqty;
+                this.byqty = dataList[0].byqty;
               }
-              const scrollBoard = this.$refs['scroll-board'];
-              //刷新数据
-              scrollBoard.updateRows(resultList);
-              this.config.data = resultList;
-              this.config = { ...this.config };
-            }, (result) => {
-              console.error(result)
-            }
-        );
-
-        //设备提醒信息
-        caller = 'KB!LINEDEVICEREMIND';
-        await this.$http.get("kanban/datalist.action?caller=" + caller + "&_noc=1&page=1&pageSize=100", {
-          params: {
-            condition: "de_workshop='"+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();
-                item.push("<span  class='colorGrass fs-xl'>" + element.de_code + "</span>");
-                item.push("<span  class='colorGrass fs-xl'>" + element.v_remind + "</span>");
-                resultList.push(item);
-              }
-              const scrollBoard1 = this.$refs['scroll-board1'];
-              //刷新数据
-              scrollBoard1.updateRows(resultList);
-              this.config1.data = resultList;
-              this.config1 = { ...this.config1 };
             }, (result) => {
               console.error(result)
             }
@@ -210,85 +121,69 @@ import CenterChart from "../../components/prodlinechart/up1Chart/up1DChart";
 </script>
 
 <style lang="scss" scoped>
-  $box-height: 430px;
+  $box-height: 380px;
   $box-width: 100%;
   #up1 {
     padding: 13px;
-   // padding-top: 20px;
     height: $box-height;
     width: $box-width;
     border-radius: 5px;
     .bg-color-black {
       height: $box-height - 25px;
-      //width: $box-width - 10px;
       border-radius: 10px;
       padding: 5px ;
+      display: grid;
+      grid-template-columns: 0.5fr 1.5fr ;
     }
 
-    .text {
-      color: #c3cbde;
-      font-size: 25px;
+    .left{
+      display: flex;
+      align-items: center;     /* 垂直居中 */
+      .vertical-text {
+        width:50px;
+        height: 320px;
+        writing-mode: vertical-lr; /* 垂直方向从左到右 */
+        text-orientation: mixed;   /* 保持文字方向 */
+        //  background-color: #1a5cd7; /* 蓝色背景 */
+        border-radius: 15px;
+        color: white;              /* 文字颜色 */
+        padding: 15px 5px;        /* 内边距 */
+        background: linear-gradient(160deg, #0066cc, #0044aa);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 25px;
+        letter-spacing: 35px; /* 增加字间距 */
+      }
     }
     .body-box {
       border-radius: 10px;
       overflow: hidden;
       .percent {
-        width: 500px;
-        display: flex;
         flex-wrap: wrap;
-        .item {
-          width: 38%;
-          height: 130px;
-          span {
-            //margin-top: 8px;
-            font-size: 20px;
-            display: flex;
-            justify-content: center;
-          }
-        }
-        .item2{
-          width: 62%;
-          ::v-deep .dv-scroll-board {
-            height: 170px;
-            padding-top: 0px; // 添加这行减少顶部间距
-            .header {
-              font-size: 20px !important;
-              color: #c3cbde !important;
-            }
-            .rows {
-              .row-item {
-                font-size: 10px !important;
-                color: #c3cbde !important;
-              }
-            }
-          }
-          ::v-deep .rows span {
-            font-size: 21px;
-          }
-        }
-      }
-
-      .body-box2 {
-        ::v-deep .dv-scroll-board {
-          height: 190px;
-          padding-top: 0px; // 添加这行减少顶部间距
-          .header {
-            font-size: 20px !important;
-            color: #c3cbde !important;
-          }
-
-          .rows {
-            .row-item {
-              font-size: 10px !important;
-              color: #c3cbde !important;
-            }
-          }
-        }
+        display: flex;
+        justify-content: center;
+        left:30%;
+        flex-direction: column;
 
-        ::v-deep .rows span {
-          font-size: 21px;
+        .circletitle{
+          margin-bottom:.5rem;
+          font-size:1.2308rem;
+          font-weight: bold;
+          margin-left: 80px;
         }
       }
+      .dec{
+        display: flex;
+        -webkit-box-pack:center;
+        -ms-flex-pack:center;
+        justify-content:center;
+        font-size:1.2308rem;
+        font-weight: bold;
+        flex-direction: column;
+        letter-spacing: 2px;
+        margin-left:.75rem
+      }
     }
 
   }

src/views/prodline/up2.vue

@@ -1,27 +1,14 @@
 <template>
   <div id="up2">
     <div class="bg-color-black">
-      <div class="d-flex pt-1 pl-2 jc-center">
-        <span class="fs-xxl text mx-2 fw-b">当日工序计划进度</span>
-      </div>
-      <div class="body-box">
-        <div class="pt-2 " >
-          <BarChart :bardata="bardata"  />
-        </div>
-        <div class="d-flex jc-center fs-xl fw-b rate flex-column mt-2">
-          <div class="mt-1">今日待完成紧急订单数：{{finishrate}}</div>
-          <div class="mt-1">今日待完成正常订单数：{{finishrate2}}</div>
-          <div class="mt-1">今日待完成订单数：{{finishrate3}}</div>
-          <div class="mt-1">当日已完成比例：{{finishrate4}}% </div>
-          <div class="mt-1">昨日已完成比例：{{finishrate5}}% </div>
-        </div>
+      <div class="d-flex jc-center body-box">
+        <dv-scroll-board :config="config" ref="scroll-board" />
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import BarChart from '@/components/prodlinechart/up2Chart'
 import {mapState} from "vuex";
 
 export default {
@@ -31,20 +18,20 @@ export default {
   data() {
     return {
       timing:null,
-      bardata : {
-        planData:[],
-        actData:[],
-        yAxis:[],
-        max : 1000,
+      config: {
+        header: ['设备编号','设备名称', '运行状态','维保状态'],
+        data: [],
+        rowNum: 8, //表格行数
+        headerHeight: 40,
+        headerBGC: 'rgba(15,19,37,0.1)', //表头
+        oddRowBGC: 'rgba(15,19,37,0.1)', //奇数行
+        evenRowBGC: 'rgba(23,28,51,0.1)', //偶数行
+        columnWidth: [180,250,150,150],
+        align: ['center','center','center','center'],
       },
-      finishrate:0,
-      finishrate2:0,
-      finishrate3:0,
-      finishrate4:0,
-      finishrate5:0,
     }
   },
-  components: {BarChart},
+  components: {},
   mounted() {
     this.refreshdata();
   },
@@ -60,76 +47,48 @@ export default {
     },
 
     async setdata() {
-      //当前工单
-      var caller = 'KB!LongLineLinePlan';
-      var licode=  sessionStorage.getItem('li_code');
-      await this.$http.get("kanban/datalist.action?caller="+caller+"&_noc=1&page=1&pageSize=100",{
-        params: {
-         condition: " V_OUTLINE='"+licode+"'",
-        }
-      }).then((result)=>{
-            let dataList = JSON.parse(result.data.data);
-            if(dataList.length>0){
-              let yAxis0 = new Array();
-              let series0 = new Array();
-              let series1 = new Array();
-              var maxnumber=0;
-              for (let index = 0; index < dataList.length; index++) {
-                const element = dataList[index];
-                yAxis0.push(element.v_wccode);
-                //计划
-                series0.push(element.v_planqty);
-                if(element.v_planqty>maxnumber){
-                  maxnumber= element.v_planqty;
-                }
-                //实际
-                series1.push(element.v_actqty);
-                if(element.v_actqty>maxnumber){
-                  maxnumber= element.v_actqty;
-                }
-              }
-              this.bardata.planData = series0;
-              this.bardata.actData = series1;
-              this.bardata.yAxis = yAxis0;
-              this.bardata.max = Math.ceil(maxnumber*1.2);
-            }
-          },(result)=>{
-            console.error(result)
-          }
-      );
-
-      this.finishrate = 0;
-      this.finishrate2 = 0;
-      this.finishrate3 = 0;
-      this.finishrate4 = 0;
-      this.finishrate5 = 0;
-      //比例,用的是总看板的达成比例caller，如果不一样，自行修改caller
-      caller = 'KB!TOTALDayMakeRate';
-      await this.$http.get("kanban/datalist.action?caller="+caller+"&_noc=1&page=1&pageSize=100",{
+      var caller = 'KB!LINEDEVICE';
+      await this.$http.get("kanban/datalist.action?caller=" + caller + "&_noc=1&page=1&pageSize=100", {
         params: {
-          condition: "V_OUTLINE='"+licode+"'" ,
+          condition: "de_workshop='"+sessionStorage.getItem('li_code')+"'"
         }
       }).then((result) => {
             let dataList = JSON.parse(result.data.data);
-            if(dataList.length>0){
-              this.finishrate = dataList[0].finishrate;
-              this.finishrate2 = dataList[0].finishrate2;
-              this.finishrate3 = dataList[0].finishrate3;
-              this.finishrate4 = dataList[0].finishrate4;
-              this.finishrate5 = dataList[0].finishrate5;
+            let resultList = new Array();
+            for (let index = 0; index < dataList.length; index++) {
+              const element = dataList[index];
+              let item = new Array();
+              if(element.de_maintain =='未保养' ||element.de_runstatus =='故障中'){
+                item.push("<span  class='colorRed fs-xl'>" + element.de_code + "</span>");
+                item.push("<span  class='colorRed fs-xl'>" + element.de_name + "</span>");
+                item.push("<span  class='colorRed fs-xl'>" + element.de_runstatus + "</span>");
+                item.push("<span  class='colorRed fs-xl'>" + element.de_maintain + "</span>");
+                item.push("<span  class='colorRed fs-xl'>" + element.de_remark + "</span>");
+              }else{
+                item.push("<span  class='colorGrass fs-xl'>" + element.de_code + "</span>");
+                item.push("<span  class='colorGrass fs-xl'>" + element.de_name + "</span>");
+                item.push("<span  class='colorGrass fs-xl'>" + element.de_runstatus + "</span>");
+                item.push("<span  class='colorGrass fs-xl'>" + element.de_maintain + "</span>");
+                item.push("<span  class='colorGrass fs-xl'>" + element.de_remark + "</span>");
+              }
+              resultList.push(item);
             }
+            const scrollBoard = this.$refs['scroll-board'];
+            //刷新数据
+            scrollBoard.updateRows(resultList);
+            this.config.data = resultList;
+            this.config = { ...this.config };
           }, (result) => {
             console.error(result)
           }
       );
-
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-$box-height: 430px;
+$box-height: 380px;
 $box-width: 100%;
 #up2 {
   padding: 13px;
@@ -144,20 +103,26 @@ $box-width: 100%;
     padding: 5px ;
   }
 
-  .text {
-    color: #c3cbde;
-    font-size: 25px;
-  }
   .body-box {
-    border-radius: 10px;
-    overflow: hidden;
-    .rate{
-      justify-content: center; /* 水平居中 */
-      align-items: center;
-      div{
-          font-size:22px;
-          margin-top:8px;
+    ::v-deep .dv-scroll-board {
+      height: 350px;
+      padding-top: 0px; // 添加这行减少顶部间距
+      .header {
+        font-size: 20px !important;
+        color: #c3cbde !important;
+        font-weight: bold;
       }
+
+      .rows {
+        .row-item {
+          font-size: 10px !important;
+          color: #c3cbde !important;
+        }
+      }
+    }
+
+    ::v-deep .rows span {
+      font-size: 21px;
     }
   }
 }

src/views/prodline/up2Old.vue

@@ -0,0 +1,164 @@
+<template>
+  <div id="up2">
+    <div class="bg-color-black">
+      <div class="d-flex pt-1 pl-2 jc-center">
+        <span class="fs-xxl text mx-2 fw-b">当日工序计划进度</span>
+      </div>
+      <div class="body-box">
+        <div class="pt-2 " >
+          <BarChart :bardata="bardata"  />
+        </div>
+        <div class="d-flex jc-center fs-xl fw-b rate flex-column mt-2">
+          <div class="mt-1">今日待完成紧急订单数：{{finishrate}}</div>
+          <div class="mt-1">今日待完成正常订单数：{{finishrate2}}</div>
+          <div class="mt-1">今日待完成订单数：{{finishrate3}}</div>
+          <div class="mt-1">当日已完成比例：{{finishrate4}}% </div>
+          <div class="mt-1">昨日已完成比例：{{finishrate5}}% </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import BarChart from '../../components/prodlinechart/up2OldChart'
+import {mapState} from "vuex";
+
+export default {
+  computed: {
+    ...mapState(['factory']),
+  },
+  data() {
+    return {
+      timing:null,
+      bardata : {
+        planData:[],
+        actData:[],
+        yAxis:[],
+        max : 1000,
+      },
+      finishrate:0,
+      finishrate2:0,
+      finishrate3:0,
+      finishrate4:0,
+      finishrate5:0,
+    }
+  },
+  components: {BarChart},
+  mounted() {
+    this.refreshdata();
+  },
+  beforeDestroy () {
+    clearInterval(this.timing)
+  },
+  methods: {
+    refreshdata() {
+      this.setdata(); //获取数据
+      this.timing = setInterval(() => {
+        this.setdata(); //获取-主题词
+      }, 10000);
+    },
+
+    async setdata() {
+      //当前工单
+      var caller = 'KB!LongLineLinePlan';
+      var licode=  sessionStorage.getItem('li_code');
+      await this.$http.get("kanban/datalist.action?caller="+caller+"&_noc=1&page=1&pageSize=100",{
+        params: {
+         condition: " V_OUTLINE='"+licode+"'",
+        }
+      }).then((result)=>{
+            let dataList = JSON.parse(result.data.data);
+            if(dataList.length>0){
+              let yAxis0 = new Array();
+              let series0 = new Array();
+              let series1 = new Array();
+              var maxnumber=0;
+              for (let index = 0; index < dataList.length; index++) {
+                const element = dataList[index];
+                yAxis0.push(element.v_wccode);
+                //计划
+                series0.push(element.v_planqty);
+                if(element.v_planqty>maxnumber){
+                  maxnumber= element.v_planqty;
+                }
+                //实际
+                series1.push(element.v_actqty);
+                if(element.v_actqty>maxnumber){
+                  maxnumber= element.v_actqty;
+                }
+              }
+              this.bardata.planData = series0;
+              this.bardata.actData = series1;
+              this.bardata.yAxis = yAxis0;
+              this.bardata.max = Math.ceil(maxnumber*1.2);
+            }
+          },(result)=>{
+            console.error(result)
+          }
+      );
+
+      this.finishrate = 0;
+      this.finishrate2 = 0;
+      this.finishrate3 = 0;
+      this.finishrate4 = 0;
+      this.finishrate5 = 0;
+      //比例,用的是总看板的达成比例caller，如果不一样，自行修改caller
+      caller = 'KB!TOTALDayMakeRate';
+      await this.$http.get("kanban/datalist.action?caller="+caller+"&_noc=1&page=1&pageSize=100",{
+        params: {
+          condition: "V_OUTLINE='"+licode+"'" ,
+        }
+      }).then((result) => {
+            let dataList = JSON.parse(result.data.data);
+            if(dataList.length>0){
+              this.finishrate = dataList[0].finishrate;
+              this.finishrate2 = dataList[0].finishrate2;
+              this.finishrate3 = dataList[0].finishrate3;
+              this.finishrate4 = dataList[0].finishrate4;
+              this.finishrate5 = dataList[0].finishrate5;
+            }
+          }, (result) => {
+            console.error(result)
+          }
+      );
+
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+$box-height: 430px;
+$box-width: 100%;
+#up2 {
+  padding: 13px;
+  height: $box-height;
+  font-size: 40px;
+  width: $box-width;
+  border-radius: 5px;
+  .bg-color-black {
+    height: $box-height - 25px;
+    //width: $box-width - 10px;
+    border-radius: 10px;
+    padding: 5px ;
+  }
+
+  .text {
+    color: #c3cbde;
+    font-size: 25px;
+  }
+  .body-box {
+    border-radius: 10px;
+    overflow: hidden;
+    .rate{
+      justify-content: center; /* 水平居中 */
+      align-items: center;
+      div{
+          font-size:22px;
+          margin-top:8px;
+      }
+    }
+  }
+}
+</style>

src/views/prodline/up4.vue

@@ -1,26 +1,34 @@
 <template>
   <div id="up4">
     <div class="bg-color-black">
-      <div class="d-flex pt-1 pl-2 jc-center">
-        <span class="fs-xxxl text mx-2 fw-b">人员管理</span>
-      </div>
-      <div class="d-flex body-box">
+      <div class="d-flex body-box ">
         <div class="item fs-xxxl">
-          <p class="ml-3 colorText fw-b ">生产区域负责人</p>
-          <div class="dv-dig-flop ml-1 mt-2 pl-3 ">
-            <div class = 'ai-center d-flex w-80' >
+          <div class="dv-dig-flop ml-1 pl-3 ">
+            <img :src="imgSrc1" class="responsive-img">
+            <div class="mt-3 ml-3 colorText fw-b ">生产负责人</div>
+            <div class ='mt-3 ai-center' >
               <p>{{ upitem.v_leadname }}</p>
             </div>
-            <img :src="imgSrc1" class="responsive-img">
           </div>
         </div>
         <div class="item fs-xxxl">
-          <p class="ml-3 colorText fw-b ">品质区域负责人</p>
-          <div class="dv-dig-flop ml-1 mt-2 pl-3 ">
-            <div class = 'ai-center d-flex w-80'>
+          <div class="dv-dig-flop ml-1 pl-3 ">
+            <img :src="imgSrc2"  class="responsive-img">
+            <div class="mt-3  colorText fw-b ">品质负责人</div>
+            <div class ='mt-3 ai-center '>
               <p>{{ upitem.v_quaname }}</p>
             </div>
-            <img :src="imgSrc2"  class="responsive-img">
+          </div>
+        </div>
+
+        <div class="item fs-xxl">
+          <div class="ml-5">
+            <div class="mt-3">应到人数：{{mancount}}</div>
+            <div class="mt-3">实到人数：{{actmancount}}</div>
+            <div class="mt-3">请假人数：{{leavemancount}}</div>
+            <div class="mt-3">借出人数：{{lendoutmancount}}</div>
+            <div class="mt-3">借入人数：{{lendinmancount}}</div>
+            <div class="mt-3">出勤率：{{manrate}}%</div>
           </div>
         </div>
       </div>
@@ -37,6 +45,12 @@ export default {
       upitem:{},
       imgSrc1:'',
       imgSrc2:'',
+      mancount:0,
+      actmancount:0,
+      leavemancount:0,
+      lendoutmancount:0,
+      lendinmancount:0,
+      manrate:0,
     }
   },
   components: {},
@@ -56,28 +70,47 @@ export default {
     async settestdata() {
       //人员管理
       var caller = 'KB!UpLineManInfo';
-      await this.$http.get("kanban/datalist.action?caller="+caller+"&_noc=1&page=1&pageSize=100",{
+      await this.$http.get("kanban/datalist.action?caller=" + caller + "&_noc=1&page=1&pageSize=100", {
         params: {
-          condition: "V_OUTLINE='"+sessionStorage.getItem('li_code')+"'" ,
+          condition: "V_OUTLINE='" + sessionStorage.getItem('li_code') + "'",
         }
-      }).then((result)=>{
+      }).then((result) => {
             let dataList = JSON.parse(result.data.data);
-            if(dataList.length>0) {
+            if (dataList.length > 0) {
               this.upitem = dataList[0];
-              if(null != this.upitem.v_leadimageurl && '' != this.upitem.v_leadimageurl ) {
-                this.fetchImage('imgSrc1',this.upitem.v_leadimageurl);
-                 //this.imgSrc1 = this.$http.defaults.baseURL+"/kanban/download.action?path=D:/PROJECT2/uas-system/out/artifacts/postattach/U001/b2ebddde15d94de680dc6405540f7cb0.png&_noc=1";
+              if (null != this.upitem.v_leadimageurl && '' != this.upitem.v_leadimageurl) {
+                this.fetchImage('imgSrc1', this.upitem.v_leadimageurl);
               }
-              if(null != this.upitem.v_quaimageurl && '' != this.upitem.v_quaimageurl) {
-                this.fetchImage('imgSrc2',this.upitem.v_quaimageurl);
+              if (null != this.upitem.v_quaimageurl && '' != this.upitem.v_quaimageurl) {
+                this.fetchImage('imgSrc2', this.upitem.v_quaimageurl);
               }
 
-            }else{
-              this.upitem ={},
-              this.imgSrc1 ='';
-              this.imgSrc2 ='';
+            } else {
+              this.upitem = {},
+                  this.imgSrc1 = '';
+              this.imgSrc2 = '';
             }
-          },(result)=>{
+          }, (result) => {
+            console.error(result)
+          }
+      );
+
+      caller = 'KB!UpLineManTotal';
+      await this.$http.get("kanban/datalist.action?caller=" + caller + "&_noc=1&page=1&pageSize=100", {
+        params: {
+          condition: "V_OUTLINE='" + sessionStorage.getItem('li_code') + "'",
+        }
+      }).then((result) => {
+            let dataList = JSON.parse(result.data.data);
+            if (dataList.length > 0) {
+              this.mancount = dataList[0].mancount;
+              this.actmancount = dataList[0].actmancount;
+              this.leavemancount = dataList[0].leavemancount;
+              this.lendoutmancount = dataList[0].lendoutmancount;
+              this.lendinmancount = dataList[0].lendinmancount;
+              this.manrate = dataList[0].manrate;
+            }
+          }, (result) => {
             console.error(result)
           }
       );
@@ -102,7 +135,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-$box-height: 430px;
+$box-height: 380px;
 $box-width: 100%;
 #up4 {
   padding: 13px;
@@ -122,37 +155,25 @@ $box-width: 100%;
   .body-box {
     display: flex;
     flex-wrap: wrap;
-    margin-bottom: 7px;
+    margin-top: 30px;
     .item {
       border-radius: 6px;
       padding-top: 8px;
       margin-top: 8px;
-      width: 100%;
-      height: 175px;
+      width: 33.3%;
+      height: 100%;
       .dv-dig-flop {
         width: 100%;
-       // height: 30px;
-       // font-size: 20px;
         color: #3de7c9;
         display: flex;
-      //  align-items: center;
-      }
-      .w-80{
-        width : 110px;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
       }
       .responsive-img {
         width: 150px; /* 或者指定宽度，如 300px */
-        height: 150px; /* 保持图片的宽高比 */
-        //display: block;
-        margin-left: 20px;
-        //margin-right: 0;
-      }
-      .responsive-img2 {
-        width: 70px; /* 或者指定宽度，如 300px */
-        height: 80px; /* 保持图片的宽高比 */
-        //display: block;
+        height: 160px; /* 保持图片的宽高比 */
         margin-left: 20px;
-        //margin-right: 0;
       }
     }
   }