工序列表+工序详情的 前端开发+联调

haoxuan

2023-10-08 880d8b2a6440405b022e4eb2111ba4d7cfdc0400

工序列表+工序详情的 前端开发+联调

 src/api/home/index.js

@@ -124,4 +124,19 @@
  });
};


// 获取工艺模型列表
export const processModelList = (data) => {
  return request({
    url: "/v1/processModel/list?number="+data.number+"&page="+data.page+'&pageSize='+data.pageSize+'&procedureId='+data.procedureId,
    method: "get",
    data,
  });
};
// 更新工艺模型
export const updateProcessParams = (data) => {
  return request({
    url: "/v1/task/updateProcessParams",
    method: "post",
    data,
  });
};

 src/components/ProcessModel.vue

@@ -32,22 +32,24 @@
                      <img src="../../public/process-model.png" />
                   </div>
                   <div class="item-r" @click="processDetailsClick(item)">
                      <div class="item-r-t font_weight">{{ item.name }}</div>
                      <div class="item-r-t font_weight">{{ item.procedure }}</div>
                      <div class="item-r-b">当前工艺编号：{{ item.number }}</div>
                    </div>
                    <div class="tip-r">
                    <div class="tip-r" v-if="item.isUpdate">
                      <img src="../../public/process-tip.png" />
                    </div>
                    <div class="tip-current">当前使用</div>
                    <div class="tip-current" v-if="item.number==listData.number">当前使用</div>
                    <div class="btn">
                      <el-button
                      type="primary"
                      size="mini"
                      class="color_organge"
                      @click="finishClick(index, taskData)"
                      :disabled="item.isUpdate?false:true"
                      @click="updateProcess(item,index)"
                    >
                      更新工艺</el-button
                    >
                      <i class="el-icon-loading icon-loading" v-if="isLoading[index]"></i>
                      <span v-else>更新工艺 </span>
                      </el-button>
                    </div>
                </div>
              </div>
@@ -60,8 +62,10 @@
            <el-button
                      type="primary"
                      size="mini"
                      :disabled="top"
                      class="color_blue margin_right_20px"
                      @click="onSubmit()"
                      v-prevent-re-click="3000"
                      @click="onSubmitTop()"
                    >
                      上一页</el-button
                    >
@@ -69,10 +73,10 @@
          <el-button
                      type="primary"
                      size="mini"
                      disabled
                      :disabled="bottom"
                      class="color_blue"
                      v-prevent-re-click="3000"
                      @click="onSubmit()"
                      @click="onSubmitBottom()"
                    >
                      下一页</el-button
                    >
@@ -81,6 +85,8 @@
      <ProcessModelDetails
        ref="processDetails"
        :processObj="processObj"
        :listData="listData"
        @renew="getProcessModelList"
      />
    </div>
    
@@ -89,25 +95,33 @@

<script>
import {
  startTask,
  sendProcessParams,
  processModelList,
  updateProcessParams,
} from "@/api/home/index"; // 产线
import ProcessModelDetails from "@/components/ProcessModelDetails";
export default {
  components: {ProcessModelDetails},
  props: {
    processList: {
      type: [Array],
    listData: {
      type: [Array,Object],
      default: () => {
        return [];
        return {};
      },
    },
  },
  data() {
    return {
      islook: false,
      isLoading:false,
      processObj:{}
      isLoading:{},
      processObj:{},
      processList:[],
      pageObj:{
        page:1,
        pageSize:6,
      },
      total:0,
      top:false,
      bottom:false,
    };
  },
  mounted() {
@@ -115,6 +129,7 @@
  },
  watch: {
    islook(){
      this.getProcessModelList()
    },
  },
  methods: {
@@ -127,31 +142,76 @@
    },
    getInfo() {
      // 1 未生产 2生产中 3生产完成
      // if (
      //   Object.keys(this.processList).length > 0
      // ) {
      //     this.islook = true;
      // } else {
      //   this.islook = false;
      // }
      if (
        Object.keys(this.listData).length > 0
      ) {
          this.islook = true;
          this.getProcessModelList()
      } else {
        this.islook = false;
      }
    },
    onSubmit() {
        if(this.isLoading){
          return true;
    getProcessModelList(){
      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
          }).then(res=>{
            if(res.data){
              this.processList=res.data?res.data:[];
              for(let i in  this.processList){
                this.isLoading[i]=false;
              }
              this.$forceUpdate()
            }
            this.total=res.total?res.total:0;
            if(this.total<=6){
              this.top=true;
              this.bottom=true;
            }else{
              let pageTotal=Math.ceil(Number(this.total)/6)
              if(this.pageObj.page<pageTotal){
               
                this.bottom=false;
              }else if(this.pageObj.page==pageTotal){
                this.bottom=true;
              }
              if(this.pageObj.page==1){
                this.top=true;
              }else{
                this.top=false;
              }
            }
            
          })
        }
        this.isLoading=true;
          // sendProcessParams({ procedureId: this.processList.Procedure.ID,position: Number(this.taskData.Position), }).then((res) => {
          //   if (res.code == 200) {
          //     this.resParams = res;
          //     this.isLoading=false;
          //   } else {
          //     this.isLoading=false;
          //     this.resParams = res;
          //   }
          // });
          setTimeout(()=>{
            this.isLoading=false;
          },30000)
      }
    },
    updateProcess(item,index){
      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()
        }else{
          this.isLoading[index]=false;
        }
      })
      setTimeout(()=>{
        this.isLoading[index]=false;
      },50000)
    },
    onSubmitTop() {
      this.pageObj.page= this.pageObj.page-1;
      this.getProcessModelList()
    },
    onSubmitBottom(){
      this.pageObj.page= this.pageObj.page+1;
      this.getProcessModelList()
    },
    shutdown() {
      this.islook = false;
@@ -195,13 +255,17 @@
  color:#fff;
  border:0!important;
  font-size:14px;
  padding:10px 15px!important;
  padding:9px 15px!important;
}
.color_blue{
  background:#4343f5!important;
  border:0!important;
  font-size:16px;
  padding:10px 25px!important;
}
.el-button.is-disabled{
  color: #fff!important;
  background:#7b95d3 !important;
}
.color_4efefa {
  color: #4efefa !important;
@@ -344,8 +408,8 @@
      overflow:hidden;
      width:calc(100% - 20px);
      .title-item{
        width:calc(50%  - 35px);
        height:70px;
        width:calc(50%  - 30px);
        height:77px;
        padding:23px 10px 10px;
        background:#31478f;
        border-radius: 8px;
@@ -353,9 +417,9 @@
        overflow:hidden;
        font-size:15px;
        position:relative;
        margin-bottom:30px;
        margin-bottom:20px;
        &:nth-of-type(odd){
          margin-right:30px;
          margin-right:20px;
        }
        .item-l-bng{
          width:40px;
@@ -370,13 +434,13 @@
          float:left;
          line-height:25px;
          color:#fff;
          font-size:16px;
          font-size:15px;
          cursor:pointer;
          .item-r-t{
            font-size:16px;
            font-size:15px;
          }
          .item-r-b{
            font-size:14px;
            font-size:13px;
          }
        }
        .tip-r{
@@ -403,7 +467,14 @@
          width:100px;
          position:absolute;
          right:0px;
          bottom:10px;
          bottom:5px;
          .el-button{
            width:calc(100% - 15px);
          }
          .icon-loading{
            font-size:22px;
            text-align:center;
          }
        }
      }
    }

 src/components/ProcessModelDetails.vue

@@ -5,6 +5,7 @@
    :visible.sync="islook"
    width="758px"
    class="add-event-dialog"
    top="21vh"
    :show-close="false"
    append-to-body
  >
@@ -27,53 +28,73 @@
        >
          <template>
            <div class="title-auto-box">
              <div class="title-box-t margin_bottom_20">
                  <div class="item-l">
                    <div class="item-l-t">{{ processObj.name }}</div>
                    <div class="item-l-b">{{ processObj.name }}</div>
              <div :class="processObj.isUpdate?'title-box-t margin_bottom_20':'title-box-t  title-box-t-two'">
                <div class="item-l">
                  <div class="item-l-t">{{ processObj.procedure }}</div>
                  <div class="item-l-b">
                    <span v-for="(item,index) in processObj.paramsMap" :key="index">
                      {{ index }} : {{ item }}；
                    </span>
                  </div>
                  <div class="item-r">
                    工艺编号：{{ processObj.number }}
                  </div>
                </div>
                <div class="item-r">工艺编号：{{ processObj.number }}</div>
              </div>
              <div class="title-box-b">
              <div class="title-box-b" v-if="processObj.isUpdate">
                <div class="item-b-t">更新设置</div>
                <div class="item-b-m">
                  <div class="item-b-b-l"><span class="el-icon-refresh"></span></div>
                  <div class="item-b-b-r">
                    <span>已检查到新版本：H2131221</span>
                    <div class="item-b-btn">
                      更新工艺
                <template v-if="isUpdate == 1">
                  <div class="item-b-m">
                    <div class="item-b-b-l">
                      <span class="el-icon-refresh refresh-icon" style="float: right;"></span>
                    </div>
                    <div class="item-b-b-r">
                      <span>已检查到新版本：{{ processObj.newNumber }}</span>
                      <div class="item-b-btn" @click="updateProcess">
                        更新工艺
                      </div>
                    </div>
                  </div>
                </div>
                <div class="item-b-b">
                  <div class="item-two-l">
                    <div class="item-two-t">{{ processObj.name }}</div>
                    <div class="item-two-b">{{ processObj.name }}</div>
                  <div class="item-b-b">
                    <div class="item-two-l">
                      <div class="item-two-t">{{ processObj.procedure }}</div>
                      <div class="item-two-b">
                        <span v-for="(item,index) in processObj.newParamsMap" :key="index">
                          {{ index }} : {{ item }}；
                        </span>
                      </div>
                    </div>
                    <div class="item-two-r">
                      新版本：{{ processObj.newNumber }}
                    </div>
                  </div>
                  <div class="item-two-r">
                    新版本：{{ processObj.number }}
                </template>
                <template v-if="isUpdate == 2">
                  <div class="refresh-box">
                    <template v-if="isLoading">
                      <span  class="transform el-icon-refresh refresh-icon"></span>
                      <div class="refresh-line">更新中，请稍后...</div>
                    </template>
                    <template v-else>
                      <span  class="el-icon-top refresh-top-icon"></span>
                      <div class="refresh-line">已是最新版本</div>
                    </template>
                  </div>
                </div>
                </template>
              </div>
            </div>
          </template>
        </div>
      </div>
      <div slot="footer" class="dialog-footer tac" style="overflow: hidden">
      </div>
     
      <div
        slot="footer"
        class="dialog-footer tac"
        style="overflow: hidden"
      ></div>
    </div>
    
  </el-dialog>
</template>

<script>
import {
  startTask,
  sendProcessParams,
} from "@/api/home/index"; // 产线
import { updateProcessParams} from "@/api/home/index"; // 产线
export default {
  components: {},
  props: {
@@ -83,33 +104,53 @@
        return {};
      },
    },
    listData: {
      type: [Array,Object],
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      islook: false,
      isLoading:false,
      isLoading: false,
      isUpdate: 1,
    };
  },
  mounted() {
    this.getInfo();
  },
  watch: {
    islook(){
    },
  },
  methods: {
    processDetailsClick(item){

    updateProcess() {
      this.isUpdate = 2;
      if (this.isLoading) {
        return true;
      }
      this.isLoading=true;
      updateProcessParams({procedureId:this.listData.Procedure.ID}).then(res=>{
        if(res.code==200){
          this.isLoading=false;
          this.$message.success('更新成功！')
          this.$emit('renew')
        }else{
          this.isLoading=false;
          this.isUpdate=1
        }
      })
      setTimeout(()=>{
        this.isLoading=false;
      },50000)
    },
    closeClick() {
      this.shutdown();
    },
    getInfo() {
      // 1 未生产 2生产中 3生产完成
      if (
        Object.keys(this.processObj).length > 0
      ) {
          this.islook = true;
      if (Object.keys(this.processObj).length > 0) {
        this.isUpdate = 1;
        this.isLoading = false;
        this.islook = true;
      } else {
        this.islook = false;
      }
@@ -122,47 +163,45 @@
</script>

<style lang="scss" scoped>
.color_error{
  color:red;
.color_error {
  color: red;
}
.color_success{
  color:green;
.color_success {
  color: green;
}
.tank-box {
  width:758px;
  height:593px;
  width: 758px;
  height: 593px;
  background: url("../../public/tank-two.png") no-repeat center center / cover;
  position: relative;
  .dialog-footer {
    position: absolute;
    bottom: 45px;
    width:100%;
    text-align:center;
    
    width: 100%;
    text-align: center;
  }
  
}
.margin_right_20px{
      margin-right:20px;
.margin_right_20px {
  margin-right: 20px;
}
.margin-top-10px{
  margin-top:10px;
.margin-top-10px {
  margin-top: 10px;
}
.margin-top-40px{
  margin-top:40px;
.margin-top-40px {
  margin-top: 40px;
}
.color_organge {
  background: #f76c0f;
  color:#fff;
  border:0!important;
  font-size:14px;
  padding:10px 15px!important;
  color: #fff;
  border: 0 !important;
  font-size: 14px;
  padding: 10px 15px !important;
}
.color_blue{
  background:#4343f5!important;
  border:0!important;
  font-size:16px;
  padding:10px 25px!important;
.color_blue {
  background: #4343f5 !important;
  border: 0 !important;
  font-size: 16px;
  padding: 10px 25px !important;
}
.color_4efefa {
  color: #4efefa !important;
@@ -173,7 +212,7 @@
.font_size_20 {
  font-size: 20px !important;
}
.font_weight{
.font_weight {
  font-weight: 700;
}
.margin_bottom_13 {
@@ -183,12 +222,12 @@
  width: calc(100% - 140px);
  height: auto;
  overflow: hidden;
  padding:0 70px;
  padding: 0 70px;
}
.error-t {
  width: 100px;
  margin: 100px auto 40px;
  font-size:98px;
  font-size: 98px;
  span {
    display: inline-block;
  }
@@ -209,8 +248,8 @@
::v-deep .el-dialog__body {
  padding: 0 !important;
}
.btn-error{
  bottom:80px!important;
.btn-error {
  bottom: 80px !important;
}

::v-deep .el-tabs__content {
@@ -294,166 +333,226 @@
  .el-form {
    overflow: hidden;
  }
  .refresh-icon {
    width: 50px;
    height: 50px;
    background: #fff;
    border-radius: 50%;
    color: blue;
    font-size: 31px;
    line-height: 50px;
    text-align: center;
    display: inline-block;
    font-weight: 700;
    margin-right: 20px;
  }
  .refresh-top-icon {
    width: 50px;
    height: 50px;
    border:4px solid #b0b0b0;
    border-radius: 50%;
    color: #b0b0b0;
    font-size: 31px;
    line-height: 50px;
    text-align: center;
    display: inline-block;
    font-weight: 700;
    margin-right: 20px;
  }
  .transform{
    -webkit-animation: spin 1s linear infinite;
    -ms-amimation:spin  1s linear infinite;
    -moz-amimation:spin  1s linear infinite;
    -o-amimation:spin  1s linear infinite;
  }
  @keyframes spin {
    0%,15%{
      transform:rotate(0);
    }
    100%{
      transform:rotate(360deg);
    }
  }
  .title-auto-box {
    height: calc(100% - 0px);
    height: calc(100% - 20px);
    overflow: auto;
    width:calc(100% - 140px);
    margin: 0 auto; 
    padding-top:20px;
    .title-box-t{
      overflow:hidden;
      width:calc(100% - 80px);
      background:#0E246A;
      min-height:100px;
      height:auto;
      color:#fff;
      padding:15px 30px;
    width: calc(100% - 140px);
    margin: 0 auto;
    padding-top: 20px;
    .title-box-t-two{
      height:calc(100% - 55px)!important;
    }
    .title-box-t {
      overflow: hidden;
      width: calc(100% - 80px);
      background: #0e246a;
      min-height: 100px;
      height: auto;
      color: #fff;
      padding: 15px 30px;
      border-radius: 6px;
      margin-bottom:20px;
      .item-auto-box{
        overflow:auto;
      margin-bottom: 20px;
      position: relative;
      .item-auto-box {
        overflow: auto;
      }
      .item-l{
        width:calc(100% - 140px);
        height:100%;
        float:left;
        font-size:17px;
        .item-l-t{
          color:#4efefa;
          margin-bottom:20px;
      .item-l {
        width: 100%;
        height: 100%;
        float: left;
        font-size: 17px;
        .item-l-t {
          width: calc(100% - 180px);
          color: #4efefa;
          margin-bottom: 10px;
        }
        .item-l-b{
          font-size:16px;
        .item-l-b {
          width: 100%;
          height: calc(100% - 40px);
          font-size: 16px;
        }
      }
      .item-r{
        width:120px;
        padding:10px 10px;
        border-radius:10px;
        background:#4343f5;
        float:left;
        text-align:center;
      .item-r {
        width: 180px;
        padding: 8px 5px;
        border-radius: 10px;
        background: #06066a;
        position: absolute;
        right: 10px;
        top: 10px;
        text-align: center;
      }
    }
    .title-box-b{
      overflow:hidden;
      width:calc(100% - 80px);
      background:#0E246A;
      min-height:250px;
      height:auto;
      color:#fff;
      padding:15px 30px;
    .title-box-b {
      overflow: hidden;
      width: calc(100% - 80px);
      background: #0e246a;
      min-height: 250px;
      height: auto;
      color: #fff;
      padding: 15px 30px;
      border-radius: 6px;
      .item-b-t{
        font-size:18px;
        margin-bottom:10px;
      .item-b-t {
        font-size: 18px;
        margin-bottom: 10px;
        color:#eee;
      }
      .item-b-m{
        width:100%;
      .refresh-box{
        width:240px;
        margin:0 auto;
        overflow:hidden;
        .item-b-b-l{
          float:left;
          width:calc(40%  - 5px);
          border-right:3px solid #fff;
          span{
            width:50px;
            height:50px;
            background:#fff;
            border-radius: 50%;
            color:blue;
            font-size:30px;
            line-height:50px;
            text-align:center;
            display:inline-block;
            font-weight: 700;
            float:right;
            margin-right:20px;
          }
        .refresh-icon,.refresh-top-icon{
          margin: 0 auto;
          margin-left:95px;
        }
        .item-b-b-r{
          width:calc(60% - 20px);
          margin-left:20px;
          float:left;
          span{
            display:inline-block;
            width:100%;
            
        .refresh-line{
          width:100%;
          height:40px;
          border-top:5px solid #fff;
          line-height:40px;
          text-align:center;
          font-size:18px;
          color:#999;
          margin-top:15px;
        }
      }
      .item-b-m {
        width: 100%;
        margin: 0 auto;
        overflow: hidden;
        .item-b-b-l {
          float: left;
          width: calc(40% - 5px);
          border-right: 3px solid #fff;
        }
        .item-b-b-r {
          width: calc(60% - 20px);
          margin-left: 20px;
          float: left;
          span {
            display: inline-block;
            width: 100%;
          }
          .item-b-btn{
            width:90px;
            padding:8px 10px;
            border-radius:10px;
            background:#4343f5;
            float:left;
            text-align:center;
            margin-top:10px;
          .item-b-btn {
            width: 90px;
            padding: 8px 10px;
            border-radius: 10px;
            background: #4343f5;
            float: left;
            cursor: pointer;
            text-align: center;
            margin-top: 10px;
          }
        }
      }
      .item-b-b{
        width:calc(100% - 160px);
        margin:10px auto 0;
        border:1px dotted #fff;
        height:calc(100% - 40px);
        overflow:hidden;
        color:#fff;
        padding:10px 10px 10px 30px;
        .item-two-l{
          width:calc(100% - 140px);
          height:100%;
          float:left;
          font-size:14px;
          .item-two-t{
            margin-bottom:10px;
      .item-b-b {
        width: calc(100% - 160px);
        margin: 10px auto 0;
        border: 1px dotted #fff;
        height: calc(100% - 40px);
        min-height: 120px;
        overflow: hidden;
        color: #fff;
        padding: 10px 10px 10px 30px;
        position: relative;
        .item-two-l {
          width: 100%;
          height: 100%;
          font-size: 14px;
          .item-two-t {
            width: calc(100% - 180px);
            margin-bottom: 10px;
          }
          .item-two-b{
            font-size:14px;
          .item-two-b {
            width: 100%;
            height: calc(100% - 40px);
            font-size: 14px;
          }
        }
        .item-two-r{
          width:120px;
          padding:10px 10px;
          border-radius:10px;
          float:left;
          text-align:right;
        .item-two-r {
          width: 180px;
          padding: 10px 10px;
          border-radius: 10px;
          position: absolute;
          right: 5px;
          top: 0px;
          text-align: right;
        }
      }
    }
  }
  .gif-box{
    width:230px;
    margin:0 auto;
    margin-bottom:5px;
    .gif-right{
      width:210px;
      font-size:14px;
      color:#fff;
      line-height:28px;
      span{
  .gif-box {
    width: 230px;
    margin: 0 auto;
    margin-bottom: 5px;
    .gif-right {
      width: 210px;
      font-size: 14px;
      color: #fff;
      line-height: 28px;
      span {
        font-weight: 700;
        font-size:18px;
        font-size: 18px;
      }
    }
  }
  .gif{
    width:55px;
  .gif {
    width: 55px;
    vertical-align: middle;
    float:left;
    margin-right:20px;
    img{
      width:100%;
    float: left;
    margin-right: 20px;
    img {
      width: 100%;
    }
    .yuandian {
        width: 55px;
        height: 55px;
        float:left;
        // background: #15d815;
        background:red;
        border-radius: 50%;
        // margin-top:-5px;
        vertical-align: middle;
      }
      width: 55px;
      height: 55px;
      float: left;
      // background: #15d815;
      background: red;
      border-radius: 50%;
      // margin-top:-5px;
      vertical-align: middle;
    }
  }
  .progress-item {
    width: 55%;
@@ -481,27 +580,27 @@
  font-weight: 600;
}
.drawerHeader {
  width:99%;
  margin:0 auto;
  overflow:hidden;
  .title-l{
    width:25%;
    float:left;
    margin-left:30px;
  width: 99%;
  margin: 0 auto;
  overflow: hidden;
  .title-l {
    width: 25%;
    float: left;
    margin-left: 30px;
    font-size: 22px;
    color: #fff;
    height: 3.2vw;
    line-height: 4.5vw;
  }
  .title-r{
    width:60px;
    float:right;
  .title-r {
    width: 60px;
    float: right;
    height: 50px;
    line-height: 5vw;
    cursor:pointer;
    img{
      display:inline-block;
      width:100%;
    margin-top:-8px;
    cursor: pointer;
    img {
      display: inline-block;
      width: 100%;
    }
  }
  .identify {

 src/views/visualization.vue

@@ -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 || "--"
@@ -362,7 +366,7 @@
                <el-button type="primary"> 打印</el-button>
                
                <el-popover
                v-if="taskData.Procedure.Status!=3"
                v-if="taskData.Procedure.Status!=3&&taskData.Procedure.ID"
                  placement="top-end"
                  width="160"
                  class="button-finish"
@@ -496,7 +500,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>
@@ -607,7 +610,7 @@
    <!-- 工艺模型 -->
    <ProcessModel
      ref="processModel"
      :processList="processList"
      :listData="listData"
    />
  </div>
</template>
@@ -622,6 +625,7 @@
  getProgress,
  countdown,
  getTaskUnStarted,
  processModelList,
} from "@/api/home/index"; // 产线
import Card from "@/components/Card.vue";
import Knowledge from "../components/Knowledge.vue";
@@ -737,6 +741,7 @@
      // 记录定时器状态
      procInfoTimer: null,
      cutdownTimer: null,
      ProcessModelTimer: null,
      TaskCount:0,
      plcStatus:0,
      isTipShow:false,
@@ -754,16 +759,11 @@
        outputMaterials: [],
        procedureList: [],
      },
      processList:[
        {
          name:'产品1+工艺2',
          number:'v1.0'
        },
        {
          name:'产品1+工艺2',
          number:'v2.0'
        }
      ]
      processList:[],
      isUpdateIcon:false,
      listData:[],
      resResult:null,
      resprocInfoTimer:null,
    };
  },
  mounted() {
@@ -788,6 +788,51 @@
    // }
  },
  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)
      }
    },
    taskClick(){
      if(this.TaskCount>0){
        this.getStartArr()
@@ -995,6 +1040,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
@@ -1011,6 +1057,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,
@@ -1025,11 +1072,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();
@@ -1070,6 +1118,7 @@
      })
    },
    getProgressInfo() {
      this.resprocInfoTimer=null
      for (let i in this.TasksCopy){
        if(this.TasksCopy[i].Procedure.ID){
          getProgress({
@@ -1082,10 +1131,10 @@
                : 0;
                this.plcStatus=res.data.plcStatus?res.data.plcStatus:0
            }
            this.resprocInfoTimer=res;
          });
        }
      }
      
    },
    // 设置
    setUrl() {
@@ -1376,6 +1425,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;
@@ -1580,6 +1639,17 @@
        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;
          img{
            width:100%;
          }
        }
        // background: #233b9e;
        .el-descriptions-row{
          height:45px;
@@ -1820,18 +1890,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 {