feat: 看板bug修复

songshankun

2023-10-23 c36d7594f155a079a80ef8b697219695184cea31

 src/views/visualization.vue

@@ -31,7 +31,7 @@
              </span>
            </span>
         </template>
          生产管理看板
          智能工作台
          <span
            class="font el-icon-setting set-title"
            style="float: right"
@@ -104,7 +104,8 @@
                      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,7 +118,8 @@
                      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>
@@ -125,8 +127,8 @@
            </div>
            <div class="content_right">
              <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>
                    <img class="blink" v-if="taskData.isUpdateIcon"  src="../../public/shan.gif" />
                    <span v-else class="tip"></span>
               </div>
              <el-descriptions :column="(activeName == 1||activeName == 3) ? 2 : 1" :colon="true">
                <el-descriptions-item label="产品名称">{{
@@ -166,16 +168,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 +290,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,26 +299,14 @@
                            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>
                      </div>
                      <div class="card_top-2">
                        <div style="line-height: 45px; text-align: center">
                          {{ taskData.Procedure.Status==3?'生产完成':'生产中' }}
                          {{ taskData?.plcStatus === 3 ? '待机' : (taskData.Procedure.Status==3?'生产完成':'生产中') }}
                        </div>
                        <!-- <span class="card-top-r-t">完成进度：50%</span>
                          <span class="card-top-r-b">12月28日 08:24</span> -->
@@ -383,10 +356,11 @@
                  class="button-finish"
                  v-model="finishShow['finishShow&'+index]"
                  trigger="click"
                  :ref="'popoverRef_' + index"
                >
                  <p><i class="el-icon-error" style="color:red;margin-right:5px;"/>请确认是否已完成该生产任务?</p>
                  <div style="text-align: right; margin: 0">
                    <el-button size="mini" @click="finishShow['finishShow&'+index] = false">
                    <el-button size="mini" @click="closePopover(index)">
                      取消</el-button
                    >
                    <el-button
@@ -494,26 +468,28 @@
        </div>
        <div class="right-top-m">
          设备状态:
          <!-- 1断开2生产3待机 -->
          <span style="position: relative" v-if="plcStatus" >
            <el-popover
              v-if="plcStatus == 1&&plcNotConnected"
              width="180"
              :content="plcNotConnected"
              placement="top-end"
              trigger="click"
            >
              <span slot="reference">
                <img  src="../../public/duan.png" />
                断开
          <template v-for="(plcStatus, channel) in displayPLCStatus">
             <!-- 1断开2生产3待机 -->
            <span class="plc-status" style="position: relative" v-if="plcStatus">
              <el-popover
                v-if="plcStatus === 1&&plcNotConnected"
                width="180"
                :content="plcNotConnected"
                placement="top-end"
                trigger="click"
              >
                <span slot="reference">
                  <img src="../../public/duan.png"/>
                  断开
                </span>
              </el-popover>
              <span v-else>
                <img v-if="plcStatus === 1&&!plcNotConnected" src="../../public/duan.png"/>
                <img v-else src="../../public/lian.png"/>
                {{ plcStatus === 1 ? '断开' : (plcStatus === 2 ? '生产中' : '待机') }}
              </span>
            </el-popover>
            <span v-else>
              <img  v-if="plcStatus == 1&&!plcNotConnected"  src="../../public/duan.png" />
              <img  v-else src="../../public/lian.png" />
              {{ plcStatus==1?'断开':(plcStatus==2?'生产中':'待机') }}
            </span>
          </span>
          </template>
        </div>
        <div class="right-top-m-btn">
          <!-- <el-button type="primary" @click="controlClick"> 控制</el-button> -->
@@ -755,7 +731,7 @@
      cutdownTimer: null,
      ProcessModelTimer: null,
      TaskCount:0,
      plcStatus:0,
      PLCStatusMap:{0:0,1:0},
      isTipShow:false,
      // isFinsh:0,
      safeProduce:'',
@@ -810,7 +786,55 @@
    //   }
    // }
  },
  computed:{
    displayPLCStatus(){
      let PLCStatus = []
      if (this.activeName===1){
        PLCStatus =[this.PLCStatusMap[0]]
      }else if (this.activeName===2){
        PLCStatus =[this.PLCStatusMap[0],this.PLCStatusMap[1]]
      }else if (this.activeName===3){
        PLCStatus =[this.PLCStatusMap[1]]
      }else {
        return []
      }

      return PLCStatus
    }
  },
  methods: {
    /**
     * 从任务中获取加工数和目标数
     * @param taskData
     * @return {{totalNumber: number, finishNumber: number}}
     */
    processingStatistics(taskData){
      const totalNumber = taskData?.totalNumber ?? 0
      const finishNumber = taskData?.finishNumber ?? 0

      return {
        /** 目标数 */
        totalNumber: +totalNumber,
        /** 加工数 */
        finishNumber: +finishNumber,
      }
    },
    /**
     * 计算生产进度
     * @param {{totalNumber: number, finishNumber: number}} statistics
     * @return {number}  进度,0~100
     */
    calculateProgress(statistics){
      if (statistics.finishNumber === 0){
        return 0
      }
      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)
    },
@@ -1142,6 +1166,8 @@
            this.TasksCopy[i].inputMaterials = [];
            this.TasksCopy[i].outputMaterials = [];
            this.TasksCopy[i].finishNumber = 0;
            this.TasksCopy[i].totalNumber = 0;
            this.TasksCopy[i].plcStatus = 0;
            this.TasksCopy[i].number=0;
            this.TasksCopy[i].isUpdateIcon=false;
            this.finishShow['finishShow&'+i]=false
@@ -1256,10 +1282,10 @@
            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.TasksCopy[i].plcStatus = res.data?.plcStatus ?? 0
              this.PLCStatusMap[i] = res.data?.plcStatus ?? 0
            }
            this.resprocInfoTimer=res;
          });
@@ -1302,6 +1328,15 @@
      } else {
        this.$message.error("当前设备没有工序！");
      }
    },

    /**
     * 关闭 tooltip
     * @param index
     */
    closePopover(index){
      this.finishShow['finishShow&'+index] = false
      this.$refs?.['popoverRef_' + index]?.[0]?.doClose()
    },
    getRandomNumber(min, max) {
      return Math.floor(Math.random() * (max - min + 1) + min);
@@ -1593,6 +1628,28 @@
        // margin-top:-5px;
        vertical-align: middle;
      }


.tip {
  display:inline-block;
  // background: #15d815;
  background:red;
  border-radius: 50%;
  // margin-top:-5px;
  vertical-align: middle;
}
.blink{
  display: inline-block;
  width: 14px;
  height: 14px;
}
.tip, .blink{
  position: absolute;
  top: -6px;
  right: -6px;
  width: 14px;
  height: 14px;
}
.bottom_list {
  position: relative;
  padding: 10px;
@@ -1801,15 +1858,18 @@
        border-radius: 6px;
        position:relative;
        .gif{
          background: url("../../public/setting.png") no-repeat;
          background-size:100% 100%;
          position:absolute;
          right:15px;
          top:10px;
          width:35px;
          height: 35px;
          vertical-align: middle;
          cursor:pointer;
          img{
            width:100%;
          }
          //img{
          //  width:100%;
          //}
        }
        // background: #233b9e;
        .el-descriptions-row{
@@ -2181,4 +2241,24 @@
    padding: 12px;
  }
}
.plc-status{
  margin-right: 24px;
  position: relative;
  display: inline-block;
  height: 50px;
  &:after{
    content: '';
    position: absolute;
    top: 50%;
    right: -12px;
    margin-top: -15px;
    border-right: 2px solid #ffffff;
    height: 30px;
  }
}
.plc-status:last-child{
  &:after{
    display: none;
  }
}
</style>