public/tank-two.png

 public/tank.png

 src/common/constants.js

New file
@@ -0,0 +1,10 @@
/**
 * 通道名称配置 Channel 0 对应展示 0, Channel 1 对应展示 A,暂时忽略其余情况
 * @type {{0: string, 1: string}}
 */
export const channelNameConfig = {
  0: '0',
  1: 'A'
}



 src/components/ProcessModel.vue

@@ -31,7 +31,7 @@
                   <div class="item-l-bng">
                      <img src="../../public/process-model.png" />
                   </div>
                   <div class="item-r" @click="processDetailsClick(item)">
                   <div class="item-r" @click="processDetailsClick(item,index)">
                      <div class="item-r-t font_weight">{{ item.procedure }}</div>
                      <div class="item-r-b">当前工艺编号：{{ item.number }}</div>
                    </div>
@@ -86,7 +86,7 @@
        ref="processDetails"
        :processObj="processObj"
        :listData="listData"
        @renew="getProcessModelList"
        @renew="renew"
      />
    </div>
    
@@ -122,6 +122,7 @@
      total:0,
      top:false,
      bottom:false,
      index:null,
    };
  },
  mounted() {
@@ -133,8 +134,9 @@
    },
  },
  methods: {
    processDetailsClick(item){
    processDetailsClick(item,index){
      this.processObj=item;
      this.index=index;
      this.$refs.processDetails.islook=true;
    },
    closeClick() {
@@ -151,14 +153,14 @@
        this.islook = false;
      }
    },
    getProcessModelList(){
    getProcessModelList(number){
      if( Object.keys(this.listData).length > 0){
        if(this.listData.Procedure.ID&&this.listData.number){
          processModelList({
            procedureId: this.listData.Procedure.ID,
            page: this.pageObj.page,
            pageSize:this.pageObj.pageSize,
            number:this.listData.number
            number:number?number:this.listData.number
          }).then(res=>{
            if(res.data){
              this.processList=res.data?res.data:[];
@@ -190,13 +192,21 @@
        }
      }
    },
    renew(){
      this.processObj.paramsMap=this.processObj.newParamsMap
      this.processObj.number=this.processObj.newNumber
      this.processObj.isUpdate=false
      this.$emit('updateGet',this.processObj.newNumber)
      this.getProcessModelList(this.processObj.newNumber)
    },
    updateProcess(item,index){
      this.processObj=item;
      this.isLoading[index]=true;
      updateProcessParams({procedureId:this.listData.Procedure.ID}).then(res=>{
        if(res.code==200){
          this.isLoading[index]=false;
          this.$message.success('更新成功！')
          this.getProcessModelList()
          this.renew();
        }else{
          this.isLoading[index]=false;
        }
@@ -215,6 +225,7 @@
    },
    shutdown() {
      this.islook = false;
      this.$emit('updateGet',this.processObj.newNumber,true)
    },
  },
};

 src/components/ProcessModelDetails.vue

@@ -121,6 +121,11 @@
  mounted() {
    this.getInfo();
  },
  watch: {
    processObj(){
      this.$forceUpdate()
    }
  },
  methods: {
    updateProcess() {
      this.isUpdate = 2;

 src/components/TaskControlModal.vue

@@ -103,6 +103,14 @@
                </div>
              </div>
            </div>
            <div class="process-err-tip" v-if="getProcessParamsErrMsg">
              <div class="tip-icon">
                <span class="el-icon-error color_error"></span>
              </div>
              <div class="tip-content">
                提示: {{getProcessParamsErrMsg}}
              </div>
            </div>
            <div class="process-box" v-if="showBtn === 2 || showBtn === 3">
              <div
                style="
@@ -152,13 +160,13 @@
          </template>
        </div>
        <!--左翻页按钮-->
        <div v-show="showPreviousTaskBtn" class="paginator-btn previous" @click="previousTask">&lt;</div>
        <div v-show="showPreviousTaskBtn" class="paginator-btn previous" :class="{disabled:showBtn ===2 ||messageError}" @click="previousTask">&lt;</div>
        <!--右翻页按钮-->
        <div v-show="showNextTaskBtn" class="paginator-btn next" @click="nextTask">&gt;</div>
        <div v-show="showNextTaskBtn" class="paginator-btn next" :class="{disabled:showBtn ===2 ||messageError}" @click="nextTask">&gt;</div>
      </div>
      <div slot="footer" :class="messageError?'dialog-footer tac btn-error':'dialog-footer tac'"
           style="overflow: hidden">
        <template v-if="messageError">
        <template v-if="messageError || getProcessParamsErrMsg">
          <div class="btn" v-if="messageError ==='下发成功！'||getProcessParamsErrMsg" @click="closeClick">
            <img src="../../public/close-btn.png"/>
          </div>
@@ -204,6 +212,7 @@

<script>
import {getTaskInfo, sendProcessParams, startTask,} from "@/api/home"; // 产线
import {channelNameConfig} from "@/common/constants";
export default {
  name: 'TaskControlModal',
  components: {},
@@ -235,11 +244,7 @@
      isLoading: false,
      second: 0,
      secondTimer: null,
      // 通道名称配置 Channel 0 对应展示 0, Channel 1 对应展示 A,暂时忽略其余情况
      channelNameConfig: {
        0: '0',
        1: 'A'
      }
      channelNameConfig: channelNameConfig
    };
  },
  mounted() {
@@ -361,16 +366,28 @@
        startTask({id}).then((res) => {
          if (res.code === 200) {
            this.currentProcessParams = res.data.Params ?? []
            this.getProcessParamsErrMsg =''
          } else {
            this.currentProcessParams = []
            this.getProcessParamsErrMsg = res.msg ?? '获取工艺参数失败！';
          }
          this.getInfo()
        },err=>{
          console.error(err)
          this.currentProcessParams = []
          this.getProcessParamsErrMsg = '获取工艺参数失败！'
        });
      }
    },

    /**
     * 前翻页
     */
    previousTask() {
      // 生产准备倒计时中和下发失败禁止翻页
      if (this.showBtn === 2 || this.messageError){
        return
      }
      if (this.currentTaskIndex - 1 >= 0) {
        this.currentTaskIndex -= 1
        this.$nextTick(() => {
@@ -385,6 +402,10 @@
     * 后翻页
     */
    nextTask() {
      // 生产准备倒计时中和下发失败禁止翻页
      if (this.showBtn === 2 || this.messageError){
        return
      }
      if (this.currentTaskIndex + 1 <= this.taskList.length - 1) {
        this.currentTaskIndex += 1
        this.$nextTick(() => {
@@ -403,9 +424,6 @@
        this.show = true;
      } else {
        this.show = false;
      }
      if (this.getProcessParamsErrMsg) {
        this.messageError = this.getProcessParamsErrMsg;
      }
    },
    getDateObj(date, fmt) {
@@ -904,6 +922,12 @@
  &.next {
    right: -60px;
    padding-left: 4px;

  }
  &.disabled{
    background-color: #cccccc;
    opacity: 0.8;
    cursor: not-allowed;
  }
}

@@ -924,5 +948,30 @@
    color: #ffffffaa;
    font-size: 16px;
  }

}
.process-err-tip{
  box-sizing: border-box;
  padding-top: 10px;
  height: 160px;
  width: 100%;
  .tip-icon{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 70px;
    .el-icon-error{
      font-size: 70px;
    }
  }
  .tip-content{
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 17px;
    font-weight: 500;
  }
}
</style>

 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,8 +124,8 @@
              </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="参数要求">{{
@@ -343,11 +343,11 @@
                      <div class="process-params-title">
                        <el-popover
                          width="200"
                          :content="list.number"
                          :content="taskData.number"
                          placement="top-start"
                          trigger="click"
                        >
                          <span slot="reference">工艺编号：{{ list.number }}</span>
                          <span slot="reference">工艺编号：{{ taskData.number }}</span>
                        </el-popover>

                      </div>
@@ -617,6 +617,7 @@
    <ProcessModel
      ref="processModel"
      :listData="listData"
      @updateGet="updateGet"
    />
  </div>
</template>
@@ -639,6 +640,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,
@@ -769,10 +771,11 @@
        procedureList: [],
      },
      processList:[],
      isUpdateIcon:false,
      listData:[],
      resResult:null,
      resResult:[],
      resprocInfoTimer:null,
      channelNameConfig: channelNameConfig,
      index:null,
    };
  },
  mounted() {
@@ -787,7 +790,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 +810,18 @@
    // }
  },
  methods: {

    updateGet(number,val){
      this.listData.number=number
      if(this.index){
        this.TasksCopy[this.index].number=number
      }
      if(val){
        this.getTaskInfo(this.activeName,'new')
      }
    },
    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 +832,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 +857,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 +899,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 +942,6 @@
        }
      });
    },



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

    getTaskInfo(val) {
    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)
           })
          }
@@ -1085,6 +1109,7 @@
            this.TasksCopy[i].outputMaterials = [];
            this.TasksCopy[i].finishNumber = 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
@@ -1114,6 +1139,11 @@
            this.setInterCard("inputMaterials", "cardBox1&" + i, i);
            this.setInterCard("outputMaterials", "cardBox3&" + i, i);
          }
          this.getProcessModelList();
          this.cutClick(val?val:1)
          if(info){
            return true;
          }
          this.getStartArr()
          this.getProgressInfo();
              if (!this.procInfoTimer&&!this.resprocInfoTimer) {
@@ -1121,7 +1151,6 @@
                  this.getProgressInfo();
                }, 3000);
              }
           this.getProcessModelList();
        }
        // if (res.code != 200 || this.TasksCopy.length == 0) {
        //   this.getcountdown();
@@ -1132,7 +1161,7 @@
        //     }, 60000);
        //   }
        // }
        this.cutClick(val?val:1)
        
      });
      // this.TasksCopy.push(this.object)
      // this.TasksCopy.push(this.object)
@@ -1160,6 +1189,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
@@ -1352,19 +1402,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 {
@@ -1747,11 +1825,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 {