同步界面

src/views/dpl/centerRight1.vue

@@ -12,6 +12,36 @@
       <div class="d-flex jc-center body-box">
         <dv-scroll-board class="dv-scr-board" :config="config" ref="scroll-board" />
       </div>
+      
+    <div class="photo-box">
+        <div>
+          <div>
+            <img :src="imgSrc1" class="responsive-img">
+          </div>
+          <div>
+            <p>拉长: {{ upitem.v_leadname }}</p>
+            <p>产线人数: {{zzmancount}}</p>
+          </div>
+        </div>
+        <div>
+          <div>
+            <img :src="imgSrc2" class="responsive-img">
+          </div>
+          <div>
+            <p>IPQC: {{ upitem.v_quaname }}</p>
+            <p>品检人数: {{bzmancount}}</p>
+          </div>
+        </div>
+        <div>
+          <div>
+            <img :src="imgSrc3" class="responsive-img">
+          </div>
+          <div>
+            <p>PE: {{ upitem.v_engineername }}</p>
+            <p>管理人数: {{glmancount}}</p>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -20,11 +50,18 @@
 export default {
   data() {
     return {
+      upitem:{},
+      imgSrc1:'',
+      imgSrc2:'',
+      imgSrc3:'',
+      zzmancount:0,
+      bzmancount:0,
+      glmancount:0,
       config: {
-        header:  ['线别', '投入','产出', '不良','良率%','计划数','达成率%'],
+        header:  ['线别', '投入','产出','不良','良率%','待维修','已维修'],
         data: [
         ],
-        rowNum: 7, //表格行数
+        rowNum: 1, //表格行数
         headerHeight: 35,
         headerBGC: '#0f1325', //表头
         oddRowBGC: '#0f1325', //奇数行
@@ -78,9 +115,9 @@ export default {
                       item.push("<span  class='colorGrass'>"+element.inqty+"</span>");
                       item.push("<span  class='colorGrass'>"+element.value+"</span>");
                       item.push("<span  class='colorGrass'>"+element.ngqty+"</span>");
-                      item.push("<span  class='colorGrass'>" + element.okrate + "</span>");
-                      item.push("<span  class='colorGrass'>"+element.planqty+"</span>");
-                      item.push("<span  class='colorGrass'>"+element.getrate+"</span>");
+                      item.push("<span  class='colorGrass'>"+element.okrate+"</span>");
+                      item.push("<span  class='colorGrass'>"+element.repair+"</span>");
+                      item.push("<span  class='colorGrass'>"+element.repairrate+"</span>");
                       resultList.push(item);
                     }
                     const scrollBoard = this.$refs['scroll-board'];
@@ -90,6 +127,66 @@ export default {
                     console.error(result)
                     }
           );
+
+      caller = 'KB!UpLineManInfo';
+      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.upitem = dataList[0];
+              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_engineerimageurl && '' != this.upitem.v_engineerimageurl) {
+                this.fetchImage('imgSrc3', this.upitem.v_engineerimageurl);
+              }
+            } else {
+              this.upitem = {},
+                  this.imgSrc1 = '';
+              this.imgSrc2 = '';
+              this.imgSrc3 = '';
+            }
+          }, (result) => {
+            console.error(result)
+          }
+      );
+      caller = 'KB!UpLineManTotalNew';
+      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.zzmancount = dataList[0].cs_production;
+              this.bzmancount = dataList[0].cs_qa;
+              this.glmancount = dataList[0].cs_management;
+            }
+          }, (result) => {
+            console.error(result)
+          }
+      );
+    },
+    async fetchImage(param,url) {
+      try {
+        console.log(param);
+        // 假设你已经有了token，并且知道图片的URL
+        let response = await this.$httpImg.get("/kanban/download.action?path="+url+"&_noc=1");
+        if (response.status === 200) {
+          // 创建一个URL，并且使用这个URL作为img的src
+          this[param] = URL.createObjectURL(new Blob([response.data]));
+        }else{
+          this[param] = '';
+        }
+      } catch (error) {
+        console.error('Error fetching image:', error);
+      }
     }
   }
 }
@@ -117,7 +214,44 @@ $box-width: 640px;
     overflow: hidden;
     .dv-scr-board {
       width: 600px;
-      height: 340px;
+      height: 60px;
+    }
+  }
+  .photo-box{
+    width: 100%;
+    height: 280px;
+    margin-top: 15px;
+    display: flex;
+    justify-content: space-between;
+
+    >div{
+      width: 30%;
+      height: 100%;
+      >div:first-child{
+        height: calc(100% - 60px);
+        border-radius: 5px 5px 0 0;
+        >img{
+          display: block;
+          height: 100%;
+          width: 100%;
+          border-radius: 3px;
+        }
+      }
+      >div:nth-child(2){
+        width: 100%;
+        height: 60px;
+        text-align: center;
+        >p:first-child{
+          font-size: 22px;
+          color: #fff;
+          line-height: 40px;
+        }
+        >p{
+          line-height: 20px;
+          font-size: 18px;
+          color: #33cea0;
+        }
+      }
     }
   }
 }