songshankun
2023-10-08 3ed1e1db73f7462186188a3d75970b37170521c5
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="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.name }}</div>
                    <div class="item-l-b">{{ processObj.name }}</div>
                  </div>
                  <div class="item-r">
                    工艺编号:{{ processObj.number }}
                  <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>
              <div class="title-box-b">
                <div class="item-r">工艺编号:{{ processObj.number }}</div>
              </div>
              <div class="title-box-b" v-if="processObj.isUpdate">
                <div class="item-b-t">更新设置</div>
                <template v-if="isUpdate == 1">
                <div class="item-b-m">
                  <div class="item-b-b-l"><span class="el-icon-refresh"></span></div>
                    <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>已检查到新版本:H2131221</span>
                    <div class="item-b-btn">
                      <span>已检查到新版本:{{ processObj.newNumber }}</span>
                      <div class="item-b-btn" @click="updateProcess">
                      更新工艺
                    </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-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.number }}
                      新版本:{{ processObj.newNumber }}
                  </div>
                </div>
                </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>
                </template>
              </div>
            </div>
          </template>
        </div>
      </div>
      <div slot="footer" class="dialog-footer tac" style="overflow: hidden">
      <div
        slot="footer"
        class="dialog-footer tac"
        style="overflow: hidden"
      ></div>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import {
  startTask,
  sendProcessParams,
} from "@/api/home/index"; // 产线
import { updateProcessParams} from "@/api/home/index"; // 产线
export default {
  components: {},
  props: {
@@ -83,32 +104,52 @@
        return {};
      },
    },
    listData: {
      type: [Array,Object],
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      islook: 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
      ) {
      if (Object.keys(this.processObj).length > 0) {
        this.isUpdate = 1;
        this.isLoading = false;
          this.islook = true;
      } else {
        this.islook = false;
@@ -138,9 +179,7 @@
    bottom: 45px;
    width:100%;
    text-align:center;
  }
}
.margin_right_20px{
      margin-right:20px;
@@ -294,51 +333,100 @@
  .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-two{
      height:calc(100% - 55px)!important;
    }
    .title-box-t{
      overflow:hidden;
      width:calc(100% - 80px);
      background:#0E246A;
      background: #0e246a;
      min-height:100px;
      height:auto;
      color:#fff;
      padding:15px 30px;
      border-radius: 6px;
      margin-bottom:20px;
      position: relative;
      .item-auto-box{
        overflow:auto;
      }
      .item-l{
        width:calc(100% - 140px);
        width: 100%;
        height:100%;
        float:left;
        font-size:17px;
        .item-l-t{
          width: calc(100% - 180px);
          color:#4efefa;
          margin-bottom:20px;
          margin-bottom: 10px;
        }
        .item-l-b{
          width: 100%;
          height: calc(100% - 40px);
          font-size:16px;
        }
      }
      .item-r{
        width:120px;
        padding:10px 10px;
        width: 180px;
        padding: 8px 5px;
        border-radius:10px;
        background:#4343f5;
        float:left;
        background: #06066a;
        position: absolute;
        right: 10px;
        top: 10px;
        text-align:center;
      }
    }
    .title-box-b{
      overflow:hidden;
      width:calc(100% - 80px);
      background:#0E246A;
      background: #0e246a;
      min-height:250px;
      height:auto;
      color:#fff;
@@ -347,6 +435,25 @@
      .item-b-t{
        font-size:18px;
        margin-bottom:10px;
        color:#eee;
      }
      .refresh-box{
        width:240px;
        margin:0 auto;
        .refresh-icon,.refresh-top-icon{
          margin: 0 auto;
          margin-left:95px;
        }
        .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%;
@@ -356,20 +463,6 @@
          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;
          }
        }
        .item-b-b-r{
          width:calc(60% - 20px);
@@ -378,7 +471,6 @@
          span{
            display:inline-block;
            width:100%;
          }
          .item-b-btn{
            width:90px;
@@ -386,6 +478,7 @@
            border-radius:10px;
            background:#4343f5;
            float:left;
            cursor: pointer;
            text-align:center;
            margin-top:10px;
          }
@@ -396,26 +489,32 @@
        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:calc(100% - 140px);
          width: 100%;
          height:100%;
          float:left;
          font-size:14px;
          .item-two-t{
            width: calc(100% - 180px);
            margin-bottom:10px;
          }
          .item-two-b{
            width: 100%;
            height: calc(100% - 40px);
            font-size:14px;
          }
        }
        .item-two-r{
          width:120px;
          width: 180px;
          padding:10px 10px;
          border-radius:10px;
          float:left;
          position: absolute;
          right: 5px;
          top: 0px;
          text-align:right;
        }
      }
@@ -497,7 +596,7 @@
    width:60px;
    float:right;
    height: 50px;
    line-height: 5vw;
    margin-top:-8px;
    cursor:pointer;
    img{
      display:inline-block;