工序弹框的 列表和详情的更新同步

haoxuan

2023-10-11 a1a6630f2eabfc78a379b5808b1bf7231a084d0b

 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,65 @@
        return {};
      },
    },
    listData: {
      type: [Array,Object],
      default: () => {
        return {};
      },
    },
    activeIndex:{
      type:[String,Number],
      default: () => {
        return '';
      },
    }
  },
  data() {
    return {
      islook: false,
      isLoading:false,
      isLoading: false,
      isUpdate: 1,
    };
  },
  mounted() {
    this.getInfo();
  },
  watch: {
    islook(){
    },
    processObj(){
      this.$forceUpdate()
    }
  },
  methods: {
    processDetailsClick(item){

    updateProcess() {
      this.isUpdate = 2;
      if (this.isLoading) {
        return true;
      }
      this.$emit('updateProcess',this.processObj,this.activeIndex)
      // 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 +175,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 +224,7 @@
.font_size_20 {
  font-size: 20px !important;
}
.font_weight{
.font_weight {
  font-weight: 700;
}
.margin_bottom_13 {
@@ -183,12 +234,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 +260,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 +345,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 +592,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 {