From a8fc561ea18260ab36b19bd5c997bcccebb68c4f Mon Sep 17 00:00:00 2001
From: songshankun <songshankun@foxmail.com>
Date: 星期一, 09 十月 2023 09:58:51 +0800
Subject: [PATCH] feat: 首页删除客户货物描述,增加通道号展示

---
 src/views/visualization.vue |  199 +++++++++++++++++++++++++++++++++++++++----------
 1 files changed, 156 insertions(+), 43 deletions(-)

diff --git a/src/views/visualization.vue b/src/views/visualization.vue
index a74ba65..a6dd135 100644
--- a/src/views/visualization.vue
+++ b/src/views/visualization.vue
@@ -90,7 +90,7 @@
             </span> -->
           </div>
           <div class="gongx">
-          <el-steps v-if="taskData.AllProcedures" :active="taskData.CurrentProcedureIndex?taskData.CurrentProcedureIndex:0"  finish-status="success" class="steps">
+          <el-steps v-if="taskData.AllProcedures" :active="taskData.CurrentProcedureIndex ?? 0"  finish-status="success" class="steps">
             <el-step icon="" :title="item" v-for="(item,index) in taskData.AllProcedures" :key="index"></el-step>
           </el-steps>
         </div>
@@ -124,6 +124,10 @@
               </div>
             </div>
             <div class="content_right">
+              <div class="gif" v-if="taskData.Procedure.ID" @click="processModelClick(taskData)">
+                    <img v-if="isUpdateIcon"  src="../../public/shan.gif" />
+                    <span v-else class="yuandian"></span>
+               </div>
               <el-descriptions :column="(activeName == 1||activeName == 3) ? 2 : 1" :colon="true">
                 <el-descriptions-item label="浜у搧鍚嶇О">{{
                   taskData.Order.productName || "--"
@@ -143,10 +147,10 @@
                   -
                   {{ formatDate(taskData.Order.endTime) }}</el-descriptions-item
                 >
-                <el-descriptions-item label="璐х墿鎻忚堪">{{
-                  taskData.Order.orderAttr || "--"
-                }}</el-descriptions-item>
-                <el-descriptions-item label="瀹㈡埛鍚嶇О">{{
+                <el-descriptions-item label="閫氶亾">
+                  {{ channelNameConfig[taskData.Channel] || "--" }}
+                </el-descriptions-item>
+                <el-descriptions-item label="瀹㈡埛缂栫爜">{{
                   taskData.Order.customer || "--"
                 }}</el-descriptions-item>
                 <el-descriptions-item label="鍙傛暟瑕佹眰">{{
@@ -507,7 +511,6 @@
             <span v-else>
               <img  v-if="plcStatus == 1&&!plcNotConnected"  src="../../public/duan.png" />
               <img  v-else src="../../public/lian.png" />
-              <!-- <span class="yuandian"></span> -->
               {{ plcStatus==1?'鏂紑':(plcStatus==2?'鐢熶骇涓�':'寰呮満') }}
             </span>
           </span>
@@ -613,7 +616,7 @@
     <!-- 宸ヨ壓妯″瀷 -->
     <ProcessModel
       ref="processModel"
-      :processList="processList"
+      :listData="listData"
     />
   </div>
 </template>
@@ -628,6 +631,7 @@
   getProgress,
   countdown,
   getTaskUnStarted,
+  processModelList,
 } from "@/api/home/index"; // 浜х嚎
 import Card from "@/components/Card.vue";
 import Knowledge from "../components/Knowledge.vue";
@@ -635,6 +639,7 @@
 import AddIssue from "../components/AddIssue.vue";
 import ProcessModel from  "../components/ProcessModel.vue";
 import TaskControlModal from "@/components/TaskControlModal.vue";
+import {channelNameConfig} from "@/common/constants";
 export default {
   components: {
     TaskControlModal,
@@ -746,6 +751,7 @@
       // 璁板綍瀹氭椂鍣ㄧ姸鎬�
       procInfoTimer: null,
       cutdownTimer: null,
+      ProcessModelTimer: null,
       TaskCount:0,
       plcStatus:0,
       isTipShow:false,
@@ -763,16 +769,12 @@
         outputMaterials: [],
         procedureList: [],
       },
-      processList:[
-        {
-          name:'浜у搧1+宸ヨ壓2',
-          number:'v1.0'
-        },
-        {
-          name:'浜у搧1+宸ヨ壓2',
-          number:'v2.0'
-        }
-      ]
+      processList:[],
+      isUpdateIcon:false,
+      listData:[],
+      resResult:null,
+      resprocInfoTimer:null,
+      channelNameConfig: channelNameConfig
     };
   },
   mounted() {
@@ -787,11 +789,17 @@
       this.getDate3();
       this.getDate2();
     }, 5000);
-    this.getTaskInfo();
+
+    let channelType = this.getChannelTypeFromUrl()
+    channelType = channelType ?? 1
+    this.activeName = channelType
+    this.getTaskInfo(channelType);
     this.getTaskCountStatistics()
   },
   beforeDestroy() {
     clearTimeout(this.pollingTaskCountTimer)
+    clearTimeout(this.procInfoTimer)
+    clearTimeout(this.ProcessModelTimer)
   },
   watch:{
     // isFinsh(){
@@ -801,6 +809,50 @@
     // }
   },
   methods: {
+    getModelList(){
+      this.resResult=null
+      for (let i in this.TasksCopy){
+        if(this.TasksCopy[i].Procedure.ID&&this.TasksCopy[i].number){
+          processModelList({
+            procedureId: this.TasksCopy[i].Procedure.ID,
+            page: 1,
+            pageSize:6,
+            number:this.TasksCopy[i].number
+          }).then(res=>{
+            if(res.code==200){
+              this.processList=res.data?res.data:[];
+              if(this.processList.length>0){
+                for(let i in this.processList){
+                  if(this.processList[i].isUpdate){
+                    this.isUpdateIcon=true;
+                    break;
+                  }
+                }
+              }
+            }
+            this.resResult=res;
+          })
+        }
+      }
+    },
+    processModelClick(list){
+      this.listData=list;
+      if( Object.keys(this.listData).length > 0){
+        if(this.listData.Procedure.ID&&this.listData.number){
+          this.$refs.processModel.islook=true
+          return true;
+        }
+      }
+      this.$message.error('褰撳墠宸ュ簭鏃犵紪鍙凤紝鏃犳硶鏌ョ湅宸ュ簭!')
+    },
+    getProcessModelList(){
+      this.getModelList()
+      if (!this.ProcessModelTimer&&!this.resResult) {
+          this.ProcessModelTimer = setInterval(() => {
+          this.getModelList();
+        }, 10000)
+      }
+    },
     mergeProcessParams(params){
       if (params?.length){
         return params.map(ele=> `${ele.Key}: ${ele.Value}`).join(' ')
@@ -825,6 +877,7 @@
     },
     cutClick(val) {
       this.activeName = val;
+      this.updateChannelTypeToUrl(val)
       if(this.activeName==2){
         this.Tasks=this.TasksCopy.slice(0,2)
         if(this.Tasks.length<2){
@@ -867,9 +920,6 @@
         }
       });
     },
-
-
-
     getDateObj(date, fmt) {
       if (/(y+)/.test(fmt)) {
         fmt = fmt.replace(
@@ -1036,6 +1086,7 @@
             this.TasksCopy[i].inputMaterials = [];
             this.TasksCopy[i].outputMaterials = [];
             this.TasksCopy[i].finishNumber = 0;
+            this.TasksCopy[i].number=0;
             this.finishShow['finishShow&'+i]=false
             this.TasksCopy[i].Procedure.procedure.workers = this.TasksCopy[i].Procedure
               .procedure.workers
@@ -1052,6 +1103,7 @@
             if (this.TasksCopy[i].Procedure.ID) {
               startTask({ id: this.TasksCopy[i].Procedure.ID }).then((res) => {
                 if (res.code == 200) {
+                  this.TasksCopy[i].number=res.data.Number
                   // res.data.number
                   this.TasksCopy[i].procedureList[0].push({
                     number: res.data.Number,
@@ -1066,11 +1118,12 @@
           }
           this.getStartArr()
           this.getProgressInfo();
-              if (!this.procInfoTimer) {
+              if (!this.procInfoTimer&&!this.resprocInfoTimer) {
                 this.procInfoTimer = setInterval(() => {
                   this.getProgressInfo();
                 }, 3000);
-          }
+              }
+           this.getProcessModelList();
         }
         // if (res.code != 200 || this.TasksCopy.length == 0) {
         //   this.getcountdown();
@@ -1110,7 +1163,29 @@
         }
       })
     },
+    /**
+     * 鍚慤RL涓缃綋鍓嶉�氶亾灞曠ず绫诲瀷
+     * @param {number} type 閫氶亾灞曠ず绫诲瀷
+     */
+    updateChannelTypeToUrl(type){
+      const activeName = this.getChannelTypeFromUrl();
+      if (activeName === type){
+        return
+      }
+      let path = this.$router.history.current.path
+      this.$router.push({path, query: {activeName:  `${type ?? 1}`}})
+    },
+    /**
+     * 浠嶶RL鑾峰彇褰撳墠閫氶亾灞曠ず绫诲瀷
+     * @return {number}
+     */
+    getChannelTypeFromUrl(){
+      let activeName = new URLSearchParams(location.search).get('activeName')
+      activeName = activeName ? +activeName : undefined
+      return activeName
+    },
     getProgressInfo() {
+      this.resprocInfoTimer=null
       for (let i in this.TasksCopy){
         if(this.TasksCopy[i].Procedure.ID){
           getProgress({
@@ -1123,10 +1198,10 @@
                 : 0;
                 this.plcStatus=res.data.plcStatus?res.data.plcStatus:0
             }
+            this.resprocInfoTimer=res;
           });
         }
       }
-
     },
     // 璁剧疆
     setUrl() {
@@ -1300,19 +1375,47 @@
       }
     }
   }
-  .el-step__head.is-process{
-    color: #00cc66 !important;
-    border-color:#00cc66;
-  }
-  .el-step__title.is-process{
-    color: #00cc66 !important;
-  }
   .el-step__head.is-wait{
     color:#fff;
     border-color:#fff;
   }
   .el-step__title.is-wait{
     color:#fff;
+  }
+
+  // 浣挎楠ゆ潯鑺傜偣鐘舵�佹垚鍔熸椂,鍓嶉潰鐨勭嚎鍚屾鏇存敼棰滆壊
+  .steps{
+    /* 杩涜涓姸鎬侊細鍦堢嚎 */
+    &  .el-step__head.is-process {
+      color: #00cc66;
+      border-color: #00cc66;
+    }
+    /* 杩涜涓姸鎬侊細鍦堝唴 */
+    &  .el-step__head.is-process > .el-step__icon {
+      background: #00cc66;
+      color: #00cc66;
+    }
+    /* 杩涜涓姸鎬侊細title锛堟枃瀛楋級 */
+    &  .el-step__title.is-process {
+      color: #00cc66;
+    }
+
+    /* 瀹屾垚鐘舵�侊細鍦堢嚎 */
+    &  .el-step__head.is-success {
+      color: #00cc66;
+      border-color: #00cc66;
+    }
+    /* 瀹屾垚鐘舵�侊細title锛堟枃瀛楋級 */
+    &  .el-step__title.is-success {
+      color: #00cc66;
+    }
+    /* 瀹屾垚鐘舵�侊細line
+     * 鎻忚堪锛氱涓�姝ュ畬鎴愶紝绗簩姝ヨ繘琛屾椂锛屼箣闂寸殑杩涘害鏉℃湁棰滆壊
+     */
+    &  .el-step__head.is-success > .el-step__line > .el-step__line-inner {
+      width: 100% !important;
+      border-width: 1px !important;
+    }
   }
 }
 .set-title {
@@ -1417,6 +1520,16 @@
   background: #09e5ed !important;
   color: #333 !important;
 }
+.yuandian {
+        width: 35px;
+        height: 35px;
+        display:inline-block;
+        // background: #15d815;
+        background:red;
+        border-radius: 50%;
+        // margin-top:-5px;
+        vertical-align: middle;
+      }
 .bottom_list {
   position: relative;
   padding: 10px;
@@ -1623,6 +1736,18 @@
         padding: 0 10px;
         background: rgb(22 72 173);
         border-radius: 6px;
+        position:relative;
+        .gif{
+          position:absolute;
+          right:15px;
+          top:10px;
+          width:35px;
+          vertical-align: middle;
+          cursor:pointer;
+          img{
+            width:100%;
+          }
+        }
         // background: #233b9e;
         .el-descriptions-row{
           height:45px;
@@ -1863,18 +1988,6 @@
           // float:left;
           display:inline-block;
         }
-      }
-
-      .yuandian {
-        width: 25px;
-        height: 25px;
-        line-height: 40px;
-        margin-top: 12.5px;
-        display: inline-block;
-        background: #15d815;
-        display: block;
-        border-radius: 50%;
-        float: right;
       }
     }
     .right-top-m-btn {

--
Gitblit v1.8.0