修改看板样式

src/assets/scss/indexquality.scss

@@ -130,7 +130,7 @@
       //下方区域的布局
       .content-box {
         display: grid;
-        grid-template-columns: 1fr 2fr;
+        grid-template-columns: 1fr 1fr 1fr;
       }
 
       // 底部数据

src/views/prodline/up1.vue

@@ -8,8 +8,8 @@
         <span class="fs-xxl text mx-2 fw-b">设备维保执行情况</span>
       </div>
       <div class="body-box">
-        <div class="pt-2" >
-          <Up1Chart />
+        <div class="d-flex jc-center body-box">
+          <dv-scroll-board :config="config" ref="scroll-board" />
         </div>
         <div class="percent mt-2">
           <div class="item "   v-for="item in rate"
@@ -28,15 +28,22 @@
 </template>
 
 <script>
-import Up1Chart from "../../components/prodlinechart/up1Chart/up1UpChart";
 import CenterChart from "../../components/prodlinechart/up1Chart/up1DChart";
 
   export default {
-    components: {CenterChart, Up1Chart},
+    components: {CenterChart},
     data() {
       return {
         config: {
-
+          header: ['设备编号','设备名称', '运行状态','维保状态'],
+          data: [],
+          rowNum: 6, //表格行数
+          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,250, 100,100],
+          align: ['center','center','center'],
         },
         timing:null,
         rate: [
@@ -112,6 +119,34 @@ import CenterChart from "../../components/prodlinechart/up1Chart/up1DChart";
                   console.error(result)
                 }
             );
+
+        var caller = 'KB!LINEDEVICE';
+        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='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)
+            }
+        );
       }
     }
   }
@@ -132,6 +167,7 @@ import CenterChart from "../../components/prodlinechart/up1Chart/up1DChart";
       border-radius: 10px;
       padding: 5px ;
     }
+
     .text {
       color: #c3cbde;
       font-size: 25px;
@@ -154,6 +190,22 @@ import CenterChart from "../../components/prodlinechart/up1Chart/up1DChart";
           }
         }
       }
+      ::v-deep .dv-scroll-board {
+
+        height: 230px;
+        padding-top: 0px; // 添加这行减少顶部间距
+        .header {
+          font-size: 20px !important;
+          color: #c3cbde !important;
+        }
+
+        .rows {
+          .row-item {
+            font-size: 10px !important;
+            color: #c3cbde !important;
+          }
+        }
+      }
     }
 
   }

src/views/quality/index.vue

@@ -69,6 +69,11 @@
                 <up1 />
               </dv-border-box-12>
             </div>
+            <div>
+              <dv-border-box-12 >
+                <up3 />
+              </dv-border-box-12>
+            </div>
             <div>
               <dv-border-box-12 >
                 <up2 />
@@ -96,6 +101,7 @@ import  common  from '../../utils/common';
 import { formatTime } from '../../utils/index.js'
 import up1 from './up1.vue'
 import up2 from './up2.vue'
+import up3 from './up3.vue'
 import bottom1 from './bottom1.vue'
 import bottom2 from './bottom2.vue'
 import {mapMutations, mapState} from "vuex"
@@ -121,6 +127,7 @@ export default {
   components: {
     up1,
     up2,
+    up3,
     bottom1,
     bottom2
   },

src/views/quality/up1.vue

@@ -2,113 +2,222 @@
   <div id="up1">
     <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>
+        <span class="fs-xxxl text mx-2 fw-b">近7天来料合格率</span>
       </div>
-      <div class="body-box ranking ai-center flex-column">
-        <dv-scroll-ranking-board class="dv-scr-rank-board mt-1" :config="ranking" ref="scroll-ranking-board"/>
+      <div class="body-box">
+        <div class="pt-2 " >
+          <Bottom1Chart :linedata="linedata" />
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-
+import Bottom1Chart from "../../components/warehousechart/bottom1Chart";
 import {mapState} from "vuex";
-
 export default {
+  components: {
+    Bottom1Chart
+  },
   computed: {
-    ...mapState(['factory']),
+    //数组写法
+    ...mapState(['user','factoryoptions','factory']),
   },
   data() {
     return {
-      timing:null,
-      ranking: {
-        data: [],
-        carousel: 'single',
-        rowNum:6,
-        unit: '%',
-        sort:false,
-        mindata:0,
+      colorList: {
+        linearYtoG: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 1,
+          y2: 1,
+          colorStops: [
+            {
+              offset: 0,
+              color: '#f5b44d'
+            },
+            {
+              offset: 1,
+              color: '#28f8de'
+            }
+          ]
+        },
+        linearGtoB: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 1,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: '#43dfa2'
+            },
+            {
+              offset: 1,
+              color: '#28f8de'
+            }
+          ]
+        },
+        linearBtoG: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 1,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: '#1c98e8'
+            },
+            {
+              offset: 1,
+              color: '#28f8de'
+            }
+          ]
+        },
+        areaBtoG: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            {
+              offset: 0,
+              color: 'rgba(35,184,210,.2)'
+            },
+            {
+              offset: 1,
+              color: 'rgba(35,184,210,0)'
+            }
+          ]
+        }
       },
+      linedata :{
+        series : null,
+        xAxiss  :null,
+        interval :15,
+        min:0
+      },
+      timing:null,
     }
   },
-  components: {},
   mounted() {
-    this.refreshdata();
+    this.refreshdata()
   },
   beforeDestroy () {
     clearInterval(this.timing)
   },
   methods: {
     refreshdata() {
-      this.settestdata(); //获取数据
+      this.getdata(); //获取-数据
       this.timing = setInterval(() => {
-        this.settestdata(); //获取-主题词
+        this.getdata(); //获取--数据
       }, 10000);
     },
-    async settestdata() {
-      var caller = 'KB!QualityZTRate';
+
+    async getdata() {
+      var caller = 'KB!WHTMONTHIQCRATE';
+      var cond = "1=1";
       await this.$http.get("kanban/datalist.action?caller="+caller+"&_noc=1&page=1&pageSize=100",{
         params: {
-          condition: "1=1",
+          condition: cond
         }
       }).then((result)=>{
             let dataList = JSON.parse(result.data.data);
-            let datas = new Array();
-            let v_mindata = 100;
-            for (let index = 0; index < dataList.length; index++) {
-              const element = dataList[index];
-              datas.push({
-                name:"<span  class='fs-md ml-3'>" + element.v_stepname+"<span/>" ,
-                value:element.v_ztrate,//"<span  class='fs-md'>" + element.v_ztrate +"<span/>",
-              });
-              if(v_mindata>element.v_ztrate){
-                v_mindata = element.v_ztrate;
+            let series = new Array();
+            let xAxis0 = new Array();
+            let mindata = 100;
+
+            //7天内
+            let ndata = new Array();
+            for (let i =6 ;i>=0;i--){
+              let formattedDate;
+              if(i == 0){
+                formattedDate = this.$moment().format('MM/DD');
+              }else{
+                formattedDate = this.$moment().subtract(i, 'days').format('MM/DD')
               }
+              xAxis0.push(formattedDate);
+              //获取分组当天数据
+              let dataall = dataList;
+              let data0 = '-';
+              if(null != dataall) {
+                let datam = dataall.filter(item => item.v_ymd == formattedDate);
+                if(datam.length>0){
+                  data0 = datam[0].v_okrate;
+                  if(mindata>data0){
+                    mindata = data0;
+                  }
+                }
+              }
+              ndata.push(data0);
             }
-            //获取最小值
-            if(v_mindata<=100 && v_mindata>10 ){
-              v_mindata = v_mindata - 10;
-            }
-            this.ranking.data = datas;
-            this.ranking.mindata = Math.floor(v_mindata/10)*10;
-            this.ranking = { ...this.ranking };
+            series.push({
+              name: '合格率',
+              type: 'line',
+              data: ndata,
+              symbolSize: 4,
+              lineStyle: {
+                normal: {
+                  color: this.colorList.linearBtoG,
+                  width: 4
+                }
+              },
+              label: {
+                show: true,
+                position: 'top',
+                fontSize:15,
+                color:'inherit',
+                fontWeight: "bold"
+              },
+              emphasis: {
+                focus: 'series'
+              },
+              areaStyle: {
+                normal: {
+                  color: this.colorList.areaBtoG
+                }
+              },
+            });
+            this.linedata.series = series;
+            this.linedata.xAxiss = xAxis0;
+            //最小值往下取整10的倍数，然后减20
+            mindata = Math.floor(mindata/10)*10 - 20;
+            mindata = mindata<0?0:mindata;
+            this.linedata.min = mindata;
+            //分7个数据，6段
+            this.linedata.interval = Math.ceil((100-mindata)/7);
           },(result)=>{
             console.error(result)
           }
       );
-    },
-
+    }
   }
-}
+};
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" class>
+//$box-height: 520px;
 $box-height: 475px;
 $box-width: 100%;
-#up1 {
+#bottom2 {
   padding: 13px;
   height: $box-height;
-  // font-size: 32px;
   width: $box-width;
   border-radius: 5px;
   .bg-color-black {
     height: $box-height - 25px;
+    //width: $box-width - 10px;
     border-radius: 10px;
-    padding: 5px;
-    width: $box-width;
-    .body-box {
-      //margin-bottom: 7px;
-      margin: 0px 20px 7px 20px;
-      .dv-scr-rank-board {
-        width: 100%;
-        height: 420px;
-      }
-    }
+    padding: 5px ;
+  }
+  .body-box {
+    border-radius: 10px;
+    overflow: hidden;
   }
-  ::v-deep .dv-scroll-ranking-board .ranking-info .rank{width:40px;color: #18a158;font-size: 15px;display: none}
-  ::v-deep .dv-scroll-ranking-board .ranking-info .ranking-value{font-size: 1rem;}
-  ::v-deep .dv-scroll-ranking-board .ranking-column{border-bottom:2px solid rgb(25, 161, 95,.5);margin-top:5px}
-  ::v-deep .dv-scroll-ranking-board .ranking-column .inside-column{position:relative;height:7px;background-color: #19a15f;margin-bottom:2px;border-radius:1px;overflow:hidden}
 }
-</style>
+</style>

src/views/quality/up2.vue

@@ -2,7 +2,7 @@
   <div id="up2">
     <div class="bg-color-black">
       <div class="d-flex pt-2 pl-2 jc-center">
-        <span class="fs-xxl text mx-2 fw-b">当日线体不良TOP5</span>
+        <span class="fs-xxl text mx-2 fw-b">OQC7日不良TOP5</span>
       </div>
       <div >
         <BadChart/>

src/views/quality/up3.vue

@@ -0,0 +1,204 @@
+<template>
+  <div id="up3">
+    <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="jc-center body-box">
+        <div class="body-box d-flex">
+          <div class="item d-flex jc-center flex-column">
+            <div class="location">
+              <div class="circle-hollow">
+                <div class="info">
+                  <h2 class="pb-2">{{inQty}}</h2>
+                  <p class="fs-xxl pt-2">
+                    已检验批次
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="item d-flex jc-center flex-column">
+            <div class="circle-hollow">
+              <div class="info">
+                <h2 class="pb-2">{{outQty}}</h2>
+                <p class="fs-xxl pt-2">
+                  待检验批次
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="d-flex pt-2 pl-2 jc-center pb-1 mb-1">
+        <span class="fs-xxxl text mx-2 fw-b">来料不良评审</span>
+      </div>
+      <div class="d-flex jc-center body-box">
+        <dv-scroll-board :config="config" ref="scroll-board" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {mapState} from "vuex";
+export default {
+  computed: {
+    //数组写法
+    ...mapState(['user','factoryoptions','factory']),
+  },
+  data() {
+    return {
+      config: {
+        header: ['供方编号','物料编号', '物料名称','批次数量','评审结果'],
+        data: [],
+        rowNum: 10, //表格行数
+        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,250, 100,100,100],
+        align: ['center','center','center'],
+
+      },
+      timing: null,
+    }
+  },
+  mounted() {
+    this.refreshdata();
+  },
+  beforeDestroy () {
+    clearInterval(this.timing)
+  },
+  methods: {
+    refreshdata() {
+      this.getdata(); //获取-数据
+      this.timing = setInterval(() => {
+        this.getdata(); //获取--数据
+      }, 10000);
+    },
+    async getdata() {
+
+      this.finishQty = 0;
+      this.unfinishQty = 0;
+      this.inQty = 0;
+      this.outQty = 0;
+
+      //备料完成情况
+      caller = 'KB!WHCHECKDATA';
+      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);
+            if(dataList.length>0){
+              this.inQty = dataList[0].inqty;
+              this.outQty = dataList[0].outqty;
+            }
+          }, (result) => {
+            console.error(result)
+          }
+      );
+
+      var caller = 'KB!WHQCRECHECK';
+      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='colorGrass fs-xl'>" + element.ve_code + "</span>");
+              item.push("<span  class='colorGrass fs-xl'>" + element.pr_code + "</span>");
+              item.push("<span  class='colorGrass fs-xl'>" + element.pr_detail + "</span>");
+              item.push("<span  class='colorGrass fs-xl'>" + element.qc_qty + "</span>");
+              item.push("<span  class='colorGrass fs-xl'>" + element.qc_result + "</span>");
+              resultList.push(item);
+            }
+            this.config.data = resultList;
+            this.config = { ...this.config };
+          }, (result) => {
+            console.error(result)
+          }
+      );
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+$box-height: 475px;
+$box-width: 100%;
+#up1 {
+  padding: 13px;
+  height: $box-height;
+  // font-size: 32px;
+  width: $box-width;
+  border-radius: 5px;
+  .bg-color-black {
+    height: $box-height - 25px;
+    border-radius: 10px;
+    padding: 5px;
+    width: $box-width;
+    .body-box {
+      padding-top: 25px;
+    }
+  }
+  .text {
+    color: #c3cbde;
+    //font-size: 15px;
+  }
+  .body-box {
+    width: $box-width;
+
+    ::v-deep .dv-scroll-board {
+      height: $box-height - 70px;
+      padding-top: 0px; // 添加这行减少顶部间距
+      .header {
+        font-size: 20px !important;
+        color: #c3cbde !important;
+      }
+
+      .rows {
+        .row-item {
+          font-size: 20px !important;
+          color: #c3cbde !important;
+        }
+      }
+    }
+  }
+
+  .item {
+    width: 50%;
+    align-items: center;
+    /*.location{
+       position: absolute;
+       left: 20%;
+    }*/
+    .circle-hollow {
+      width: 170px;
+      height: 170px;
+      border: 3px solid #4ecdc4; /* 边框样式 */
+      border-radius: 50%;
+      background-color: transparent; /* 透明背景 */
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      letter-spacing:2px;
+      flex-direction: column; /* 文字垂直排列 */
+      box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 阴影效果 */
+      .info{
+        text-align: center;
+        width: 140px;
+        p{
+          border-top: 1px solid #ddd;
+        }
+      }
+    }
+  }
+}
+</style>