songshankun
2023-10-09 a8fc561ea18260ab36b19bd5c997bcccebb68c4f
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,9 +147,9 @@
                  -
                  {{ formatDate(taskData.Order.endTime) }}</el-descriptions-item
                >
                <el-descriptions-item label="货物描述">{{
                  taskData.Order.orderAttr || "--"
                }}</el-descriptions-item>
                <el-descriptions-item label="通道">
                  {{ channelNameConfig[taskData.Channel] || "--" }}
                </el-descriptions-item>
                <el-descriptions-item label="客户编码">{{
                  taskData.Order.customer || "--"
                }}</el-descriptions-item>
@@ -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 @@
        }
      })
    },
    /**
     * 向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){
        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 {