feat: 生产目标数首次是来源于下发的任务，然后需要显示从PLC获取的目标数

songshankun

2023-10-19 f9625961d0678f81b9ce8e1d4a933c73b7fd4209

 src/views/visualization.vue

@@ -31,7 +31,7 @@
              </span>
            </span>
         </template>
          生产管理看板
          智能工作台
          <span
            class="font el-icon-setting set-title"
            style="float: right"
@@ -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>
@@ -104,7 +104,7 @@
                      style="font-size: 35px; font-weight: 600"
                      class="color_green"
                    >
                      {{ taskData.finishNumber || 0 }}{{ taskData.Order.unit }}
                      {{ processingStatistics(taskData).finishNumber }}{{ taskData.Order.unit }}
                    </dd>
                  </dl>
                </div>
@@ -117,15 +117,15 @@
                      style="font-size: 35px; font-weight: 600"
                      class="color_green"
                    >
                      {{ taskData.Order.amount || 0 }}{{ taskData.Order.unit }}
                      {{ processingStatistics(taskData).totalNumber }}{{ taskData.Order.unit }}
                    </dd>
                  </dl>
                </div>
              </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" />
              <div class="gif" v-if="taskData.Procedure.ID" @click="processModelClick(taskData,index)">
                    <img v-if="taskData.isUpdateIcon"  src="../../public/shan.gif" />
                    <span v-else class="yuandian"></span>
               </div>
              <el-descriptions :column="(activeName == 1||activeName == 3) ? 2 : 1" :colon="true">
@@ -147,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="参数要求">{{
@@ -166,16 +166,7 @@
                    text-color="#fff"
                    :text-inside="true"
                    :stroke-width="30"
                    :percentage="
                      (taskData.Order && taskData.finishNumber != 0 && taskData.Order.amount)
                        ? parseInt(
                            (taskData.finishNumber / taskData.Order.amount) *
                              100
                        )>100?100:parseInt(
                            (taskData.finishNumber / taskData.Order.amount) *
                              100
                        ): 0
                    "
                    :percentage="calculateProgress(processingStatistics(taskData))"
                  ></el-progress>
                </el-descriptions-item>
                <!-- <el-descriptions-item label="合格率" style="width: 100%">
@@ -297,15 +288,7 @@
                      </div>
                      <div class="card_top-3">
                        <span class="card-top-r-t"
                          >完成进度：{{
                            (taskData.Order && taskData.finishNumber != 0 && taskData.Order.amount)
                              ? parseInt(
                                  (taskData.finishNumber /
                                    taskData.Order.amount) *
                                    100
                                )
                              : 0
                          }}</span
                          >完成进度：{{calculateProgress(processingStatistics(taskData))}}</span
                        >
                        <span class="card-top-r-b">
                          <el-progress
@@ -314,19 +297,7 @@
                            text-color="#fff"
                            :text-inside="true"
                            :stroke-width="10"
                            :percentage="
                             (taskData.Order && taskData.finishNumber != 0)
                                ? parseInt(
                                    (taskData.finishNumber /
                                      taskData.Order.amount) *
                                      100
                                )>100?100:parseInt(
                                    (taskData.finishNumber /
                                      taskData.Order.amount) *
                                      100
                                )
                                : 0
                            "
                            :percentage="calculateProgress(processingStatistics(taskData))"
                            :show-text="false"
                          ></el-progress>
                        </span>
@@ -524,7 +495,7 @@
          <div class="right-person-box" v-if="workers && workers.length > 0">
            <dl
              class="right-small-person"
              v-for="(item, index) in workers"
              v-for="(item, index) in deduplicateWorkers(displayWorkers())"
              :key="index"
            >
              <dt>
@@ -605,8 +576,6 @@

    </template> -->
    <!-- 控制的弹框 -->
    <AddControl ref="control" :Arr="Arr" />
    <!-- 控制的弹框 -->
    <TaskControlModal
      ref="control"
      :activeName="activeName"
@@ -617,6 +586,7 @@
    <ProcessModel
      ref="processModel"
      :listData="listData"
      @updateGet="updateGet"
    />
  </div>
</template>
@@ -639,6 +609,8 @@
import AddIssue from "../components/AddIssue.vue";
import ProcessModel from  "../components/ProcessModel.vue";
import TaskControlModal from "@/components/TaskControlModal.vue";
import {channelNameConfig} from "@/common/constants";
import _ from 'lodash'
export default {
  components: {
    TaskControlModal,
@@ -660,6 +632,8 @@
      // 右侧完成
      finishShow:{},
      workers:[],
      // 保存当前不同通道的值班人
      channelWorkersMap:{0:[],1:[]},
      TasksCopy:[],
      Tasks: [
        {
@@ -769,10 +743,11 @@
        procedureList: [],
      },
      processList:[],
      isUpdateIcon:false,
      listData:[],
      resResult:null,
      resResult:[],
      resprocInfoTimer:null,
      channelNameConfig: channelNameConfig,
      index:null,
    };
  },
  mounted() {
@@ -787,7 +762,11 @@
      this.getDate3();
      this.getDate2();
    }, 5000);
    this.getTaskInfo();

    let channelType = this.getChannelTypeFromUrl()
    channelType = channelType ?? 1
    this.activeName = channelType
    this.getTaskInfo(channelType);
    this.getTaskCountStatistics()
  },
  beforeDestroy() {
@@ -803,10 +782,67 @@
    // }
  },
  methods: {
    processingStatistics(taskData){
      const status = taskData?.Procedure?.Status;
    //   如果status = 2 加工中, 则加工数和目标数应取轮询接口中的 finishNumber 和 totalNumber
      // 如果status = 1 未开始, 目标数 取 taskData.Order.amount  加工数取 0
      // 如果status = 3 已完成, 目标数和加工数都取 amount
      let finishNumber = 0;
      let totalNumber = 0;
      if (status === 1){
        totalNumber = taskData?.Order?.amount ?? 0
        finishNumber = 0
      }else if (status === 2){
        totalNumber = taskData?.totalNumber ?? 0
        finishNumber = taskData?.finishNumber ?? 0
      }else if (status === 3){
        totalNumber = taskData?.Order?.amount  ?? 0
        finishNumber = taskData?.Order?.amount ?? 0
      }

      console.log({
        /** 目标数 */
        totalNumber: +totalNumber,
        /** 加工数 */
        finishNumber: +finishNumber,
      })

      return {
        /** 目标数 */
        totalNumber: +totalNumber,
        /** 加工数 */
        finishNumber: +finishNumber,
      }
    },
    /**
     * 计算生产进度
     * @param statistics
     * @return {number}  进度,0~100
     */
    calculateProgress(statistics){
      if (statistics.finishNumber === statistics.totalNumber){
        return 100
      }

      const result =  Math.floor(statistics.finishNumber / statistics.totalNumber * 100)
      return result > 100 ? 100 : result
    },
    deduplicateWorkers(workers){
      return _.uniqBy(workers,ele=>ele.workerName)
    },
    updateGet(number,val){
      if(val){
        this.getTaskInfo(this.activeName,'new')
        return true;
      }
      this.listData.number=number
      if(this.index){
        this.TasksCopy[this.index].number=number
      }
    },
    getModelList(){
      this.resResult=null
      for (let i in this.TasksCopy){
        this.TasksCopy[i].isUpdateIcon=false;
        if(this.TasksCopy[i].Procedure.ID&&this.TasksCopy[i].number){
          processModelList({
            procedureId: this.TasksCopy[i].Procedure.ID,
@@ -817,21 +853,24 @@
            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;
                for(let j in this.processList){
                  if(this.processList[j].isUpdate){
                    this.TasksCopy[i].isUpdateIcon=true;
                    this.$forceUpdate()
                    break;
                  }
                } 
                }
              }
            }
            this.resResult=res; 
            this.resResult[i]=res;
            console.log( this.resResult[i],'===res111')
          })
        }
      }
    },
    processModelClick(list){
    processModelClick(list,index){
      this.listData=list;
      this.index=index
      if( Object.keys(this.listData).length > 0){
        if(this.listData.Procedure.ID&&this.listData.number){
          this.$refs.processModel.islook=true
@@ -839,14 +878,22 @@
        }
      }
      this.$message.error('当前工序无编号，无法查看工序!')
     
    },
    getProcessModelList(){
      this.getModelList()
      if (!this.ProcessModelTimer&&!this.resResult) {
      let string=false;
      if(this.resResult.length>0){
        for(let i in this.resResult){
          if(this.resResult[i]){
            string=false;
          }
        }
      }
      if (!this.ProcessModelTimer&&!string) {
          this.ProcessModelTimer = setInterval(() => {
            this.resResult=[]
          this.getModelList();
        }, 10000)
        }, 5000)
      }
    },
    mergeProcessParams(params){
@@ -873,6 +920,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){
@@ -915,9 +963,6 @@
        }
      });
    },



    getDateObj(date, fmt) {
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(
@@ -1050,14 +1095,33 @@
      });
    },

    getTaskInfo(val) {
    /**
     * 根据当前展示的是0通道还是1通道还是两个通道展示对应的值班人
     * @return {*[]}
     */
    displayWorkers(){
      let showWorkers = []
      if (this.activeName===1){
        showWorkers =[...this.channelWorkersMap[0]]
      }else if (this.activeName===2){
        showWorkers =[...this.channelWorkersMap[0],...this.channelWorkersMap[1]]
      }else if (this.activeName===3){
        showWorkers =[...this.channelWorkersMap[1]]
      }else {
        return []
      }

      return showWorkers
    },

    getTaskInfo(val,info) {
      this.Tasks = [];
      this.TasksCopy=[]
      getTaskInfo({taskMode:2}).then((res) => {
        if (res.code == 200&&res.data) {
          let arr=[]
          // let arr=[]
          if(res.data.Tasks){
           arr.sort(function(a,b){
            res.data.Tasks.sort(function(a,b){
            return (a.Channel - b.Channel)
           })
          }
@@ -1079,12 +1143,24 @@
            }
          }
          this.workers=res.data.workers?res.data.workers:[]

          // 将值班人根据通道号分组
          const groupByChannel= _.groupBy(res.data.Tasks,ele=>ele.Channel)
          const taskList0= _.first(groupByChannel[0])
          const taskList1= _.first(groupByChannel[1])
          const worker0List = taskList0?.Procedure?.procedure?.workers ?? []
          const worker1List = taskList1?.Procedure?.procedure?.workers ?? []
          this.channelWorkersMap['0'] =worker0List
          this.channelWorkersMap['1'] =worker1List

          for (let i in this.TasksCopy) {
            this.TasksCopy[i].procedureList = [];
            this.TasksCopy[i].inputMaterials = [];
            this.TasksCopy[i].outputMaterials = [];
            this.TasksCopy[i].finishNumber = 0;
            this.TasksCopy[i].totalNumber = 0;
            this.TasksCopy[i].number=0;
            this.TasksCopy[i].isUpdateIcon=false;
            this.finishShow['finishShow&'+i]=false
            this.TasksCopy[i].Procedure.procedure.workers = this.TasksCopy[i].Procedure
              .procedure.workers
@@ -1108,20 +1184,26 @@
                  });
                  this.TasksCopy[i].Arr=res.data.Params ? res.data.Params : []
                  // this.isFinsh=Number(i)+1
                  this.$forceUpdate()
                }
              });
            }
            this.setInterCard("inputMaterials", "cardBox1&" + i, i);
            this.setInterCard("outputMaterials", "cardBox3&" + i, i);
          }
          this.getProcessModelList();
          this.getStartArr()
          this.cutClick(val?val:1)
          if(info=='new'){
            return true;
          }

          this.getProgressInfo();
              if (!this.procInfoTimer&&!this.resprocInfoTimer) {
                this.procInfoTimer = setInterval(() => {
                  this.getProgressInfo();
                }, 3000);
              }
           this.getProcessModelList();
        }
        // if (res.code != 200 || this.TasksCopy.length == 0) {
        //   this.getcountdown();
@@ -1132,7 +1214,7 @@
        //     }, 60000);
        //   }
        // }
        this.cutClick(val?val:1)

      });
      // this.TasksCopy.push(this.object)
      // this.TasksCopy.push(this.object)
@@ -1161,6 +1243,27 @@
        }
      })
    },
    /**
     * 向URL中设置当前通道展示类型
     * @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}`}})
    },
    /**
     * 从URL获取当前通道展示类型
     * @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){
@@ -1170,10 +1273,9 @@
            procedureId: this.TasksCopy[i].Procedure.ID,
          }).then((res) => {
            if (res.code == 200) {
              this.TasksCopy[i].finishNumber = res.data.finishNumber
                ? res.data.finishNumber
                : 0;
                this.plcStatus=res.data.plcStatus?res.data.plcStatus:0
              this.TasksCopy[i].finishNumber = res.data?.finishNumber ?? 0;
              this.TasksCopy[i].totalNumber = res.data?.totalNumber ?? 0;
              this.plcStatus = res.data?.plcStatus ?? 0
            }
            this.resprocInfoTimer=res;
          });
@@ -1352,19 +1454,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 {
@@ -1672,7 +1802,7 @@
          width: 100%;
          height: 30px;
          // text-align: left;
          font-size: 24px;
          font-size: 28px!important;
          margin: 0;
          text-align: center;
          line-height: 36px;
@@ -1692,6 +1822,7 @@
          top:10px;
          width:35px;
          vertical-align: middle;
          cursor:pointer;
          img{
            width:100%;
          }
@@ -1746,11 +1877,11 @@
            white-space:nowrap;
          }
        .card_top-2{
          width:35%;
          width:38%;
        }
        .card-top-input-out-r,
        .card_top-3 {
          width:65%;
          width:62%;
        }
        .card_top-2,.card-top-input-out-r,
        .card_top-3 {