下发成功之后 关闭弹框+刷新get 接口获取status

haoxuan

2023-09-02 ca5a51b272cbf4626a09179dbe6d7bc2f9e93ea6

下发成功之后 关闭弹框+刷新get 接口获取status

 src/api/global-directives.js

New file
@@ -0,0 +1,17 @@
import Vue from 'vue'
// import { Message } from 'element-ui'
// 防止重复提交指令
const preventReClick = Vue.directive('preventReClick', {
  inserted (el, binding) {
    el.addEventListener('click', () => {
      if (!el.disabled) {
        el.disabled = true
        // Message.warning('操作频繁！')
        setTimeout(() => {
          el.disabled = false
        }, binding.value || 2000)
      }
    })
  }
})
export { preventReClick }

 src/components/AddIssue.vue

@@ -7,7 +7,7 @@
    class="add-event-dialog"
    :show-close="false"
  >
    <div class="tank-box">
    <div class="tank-box" v-loading.fullscreen.lock="isLoading" element-loading-text="下发中，请稍后...">
      <div slot="title" class="tac drawerHeader">新任务</div>
      <div class="dialog-content-box">
        <div
@@ -35,95 +35,101 @@
            <div class="error-m">
              {{ messageError }}
            </div>
            <div class="font_size_20 color_fff" style="text-align:center;width:100%;margin:10px 0;">请重试</div>
            <div
              class="font_size_20 color_fff"
              style="text-align: center; width: 100%; margin: 10px 0"
            >
              请重试
            </div>
          </template>
          <template v-else>
            <div class="title-auto-box">
            <div class="title-box margin_bottom_20">
              <div class="title-item">
                订单编号：{{ taskData.Order.orderId || "" }}
              </div>
              <div class="title-item">
                工单编号：{{ taskData.Order.workOrderId || "" }}
              </div>
              <div class="title-item">
                产品名称：{{ taskData.Order.productName || "" }}
              </div>
              <div class="title-item">
                数量：{{ taskData.Order.amount || 0 }}{{ taskData.Order.unit }}
              </div>
              <div class="title-item">
                交货日期：{{ taskData.Order.deliverDate || "" }}
              </div>
              <div class="title-item">
                工时： {{ taskData.Procedure.procedure.workHours || "" }}
              </div>
              <div class="title-item">
                起止时间： {{ formatDate(taskData.Order.startTime) || "" }}
                -
                {{ formatDate(taskData.Order.endTime) }}
              </div>
              <div class="title-item">
                客户名称：{{ taskData.Order.customer || "" }}
              </div>
              <div class="title-item title-item-two">
                货物描述： {{ taskData.Order.orderAttr || "" }}
              </div>
              <div class="title-box margin_bottom_20">
                <div class="title-item">
                  订单编号：{{ taskData.Order.orderId || "" }}
                </div>
                <div class="title-item">
                  工单编号：{{ taskData.Order.workOrderId || "" }}
                </div>
                <div class="title-item">
                  产品名称：{{ taskData.Order.productName || "" }}
                </div>
                <div class="title-item">
                  数量：{{ taskData.Order.amount || 0
                  }}{{ taskData.Order.unit }}
                </div>
                <div class="title-item">
                  交货日期：{{ taskData.Order.deliverDate || "" }}
                </div>
                <div class="title-item">
                  工时： {{ taskData.Procedure.procedure.workHours || "" }}
                </div>
                <div class="title-item">
                  起止时间： {{ formatDate(taskData.Order.startTime) || "" }}
                  -
                  {{ formatDate(taskData.Order.endTime) }}
                </div>
                <div class="title-item">
                  客户名称：{{ taskData.Order.customer || "" }}
                </div>
                <div class="title-item title-item-two">
                  货物描述： {{ taskData.Order.orderAttr || "" }}
                </div>

              <div class="title-item title-item-two">
                参数要求：{{ taskData.Order.parameter || "" }}
                <div class="title-item title-item-two">
                  参数要求：{{ taskData.Order.parameter || "" }}
                </div>
              </div>
              <div class="title-box margin_bottom_20">
                <div
                  style="
                    color: #fff;
                    font-size: 18px;
                    font-weight: 700;
                    margin-bottom: 10px;
                    margin-top: 20px;
                  "
                >
                  工艺参数
                </div>
                <div
                  class="title-item title-item-two"
                  v-for="(item, index) in Arr"
                  :key="index"
                >
                  {{ item.Key }}：{{ item.Value || "" }}
                </div>
              </div>
            </div>
            <div class="title-box margin_bottom_20">
            <div class="process-box" v-if="showBtn == 2 || showBtn == 3">
              <div
                style="
                  color: #fff;
                  font-size: 18px;
                  color: red;
                  font-size: 16px;
                  width: 100%;
                  text-align: center;
                  font-weight: 700;
                  margin-bottom: 10px;
                  margin-top: 20px;
                  margin-bottom: 20px;
                  margin-top: 10px;
                "
              >
                工艺参数
                {{ message }}
              </div>
              <div
                class="title-item title-item-two"
                v-for="(item, index) in Arr"
                :key="index"
              >
                {{ item.Key }}：{{ item.Value || "" }}
              </div>
            </div>
          </div>
          <div class="process-box"  v-if="showBtn==2||showBtn==3">
            <div
              style="
                color: red;
                font-size: 16px;
                width: 100%;
                text-align: center;
                font-weight: 700;
                margin-bottom: 20px;
                margin-top: 10px;
              "
            >
              {{ message }}
            </div>
            <div class="progress-item">
              <span>{{ parseInt(num/60*100) }}%</span>
            <el-progress
             style="width:calc(100% - 50px);float:right"
              <div class="progress-item">
                <span>{{ parseInt((num / 60) * 100) }}%</span>
                <el-progress
                  style="width: calc(100% - 50px); float: right"
                  define-back-color="#CDC6C6"
                  color="#00cc66"
                  text-color="#fff"
                  :text-inside="true"
                  :stroke-width="20"
                  :percentage="parseInt(num/60*100)"
                  :percentage="parseInt((num / 60) * 100)"
                ></el-progress>
                </div>
          </div>
              </div>
            </div>
          </template>
          

          <!-- <div class="circel-text">
         <div class="circel-text-b">
          生产数量：<span>{{ Order.amount||0 }}</span>{{ Order.unit||'' }}
@@ -133,34 +139,41 @@
      </div>
      <div slot="footer" class="dialog-footer tac" style="overflow: hidden">
        <template v-if="messageError">
          <div class="btn" style="margin-left:220px;"  @click="confirmClick2">
          <div class="btn" style="margin-left: 220px" @click="confirmClick2">
            <img src="../../public/confirm3.png" />
          </div>
        </template>
        <template v-else>
        <div class="btn" @click="closeClick">
          <img src="../../public/btn1.png" />
        </div>
        <div class="btn" v-if="showBtn==1" @click="confirmClick1">
          <img src="../../public/confirm3.png" />
        </div>
        <div class="btn" v-if="showBtn==2">
          <img src="../../public/confirm2.png" />
        </div>
        <div class="btn" v-if="showBtn==3" @click="onSubmit()">
          <img src="../../public/confirm1.png" />
        </div>
          <div class="btn" @click="closeClick">
            <img src="../../public/btn1.png" />
          </div>
          <div class="btn" v-if="showBtn == 1" @click="confirmClick1">
            <img src="../../public/confirm3.png" />
          </div>
          <div class="btn" v-if="showBtn == 2">
            <img src="../../public/confirm2.png" />
          </div>
          <div
            class="btn"
            v-if="showBtn == 3"
            v-prevent-re-click="3000"
            @click="onSubmit()"
          >
            <img src="../../public/confirm1.png" />
          </div>
        </template>
        
      </div>
      <!-- <ErrorIssue ref="error" :messageError="messageError" @shutdown="shutdown"/> -->
    </div>
  </el-dialog>
  
</template>

<script>
import { startTask, setProductNumber,sendProcessParams } from "@/api/home/index"; // 产线
import {
  startTask,
  setProductNumber,
  sendProcessParams,
} from "@/api/home/index"; // 产线
// import ErrorIssue from "@/components/ErrorIssue";
export default {
  components: {},
@@ -187,12 +200,13 @@
  data() {
    return {
      islook: false,
      showBtn:1,
      num:0,
      timer:null,
      message:'请确认生产安全！',
      messageError:'',
      resParams:{},
      showBtn: 1,
      num: 0,
      timer: null,
      message: "请确认生产安全！",
      messageError: "",
      resParams: {},
      isLoading:false,
    };
  },
  mounted() {
@@ -202,41 +216,43 @@
    taskData(val) {
      this.getInfo();
    },
    num(){
      if(this.num==60){
        clearInterval(this.timer)
        this.showBtn=3;
    num() {
      if (this.num == 60) {
        clearInterval(this.timer);
        this.showBtn = 3;
      }
    }
    },
  },
  methods: {
    confirmClick2(){
      this.messageError=''
    confirmClick2() {
      this.messageError = "";
    },
    confirmClick1(){
      
      this.num=0;
      this.showBtn=2;
      this.message='请确认生产安全！',
      this.timer=setInterval(()=>{
       this.num=this.num+1;
      },1000)
      
    confirmClick1() {
      this.num = 0;
      this.showBtn = 2;
      (this.message = "请确认生产安全！"),
        (this.timer = setInterval(() => {
          this.num = this.num + 1;
        }, 1000));
    },
    closeClick(){
      if(this.timer){
        clearInterval(this.timer)
    closeClick() {
      if (this.timer) {
        clearInterval(this.timer);
      }
      this.num=0;
      this.num = 0;
      this.shutdown();
    },
    getInfo() {
      if (Object.keys(this.taskData).length > 0 && this.taskData.Procedure.ID && this.taskData.Procedure.Status == 1) {
        this.num=0;
        this.showBtn= 1;
        this.islook=true;
      }else{
        this.islook=false;
      if (
        Object.keys(this.taskData).length > 0 &&
        this.taskData.Procedure.ID &&
        this.taskData.Procedure.Status == 1
      ) {
        this.num = 0;
        this.showBtn = 1;
        this.islook = true;
      } else {
        this.islook = false;
      }
    },
    getDateObj(date, fmt) {
@@ -277,51 +293,54 @@
        return "";
      }
    },
  
    onSubmit() {
      if(this.taskData.Procedure.ID){
        this.message='参数下发中...',
        this.num=0
        this.timer=setInterval(()=>{
         this.num=this.num+1;
         if(this.num==60||this.resParams){
          this.num=60
          this.getCode(this.resParams)

         }
        },1000)
        
        sendProcessParams({id:this.taskData.Procedure.ID}).then(res=>{
          if(res.code==200){
            setProductNumber().then((res) => {
              this.resParams=res;
              
            });
          }else{
            this.resParams=res;
          }
        })
     
      }
    onSubmit() {
      
      if (this.taskData.Procedure.ID) {
        (this.message = "参数下发中..."), (this.num = 0);
        this.timer = setInterval(() => {
          this.num = this.num + 1;
          if (this.num == 60 || this.resParams) {
            this.num = 60;
            this.getCode(this.resParams);
          }
        }, 1000);
        this.isLoading=true;
          sendProcessParams({ id: this.taskData.Procedure.ID }).then((res) => {
            if (res.code == 200) {
              setProductNumber().then((res) => {
                this.resParams = res;
                this.isLoading=false;
              });
            } else {
              this.isLoading=false;
              this.resParams = res;
            }
          });
      }
    },
    getCode(res){
    getCode(res) {
      if (res.code == 200) {
                if(this.num==60){
                  this.messageError='下发成功！'
                  clearInterval(this.timer)
                  this.num=60;
                  this.showBtn=2;
                  this.message='请确认生产安全！'
                  // this.$message.success("下发生产数量成功！");
                }
              }else{
                this.messageError=res.msg?res.msg:'抱歉，工序下发失败！'
                clearInterval(this.timer)
                this.num=60;
                  this.showBtn=2;
                  this.message='请确认生产安全！'
              }
        if (this.num == 60) {
          this.messageError = "下发成功！";
          clearInterval(this.timer);
          // this.num = 60;
          // this.showBtn = 2;
          this.message = "请确认生产安全！";

          this.num = 0;
          this.showBtn= 1
          this.shutdown();
          this.$emit('getSetProductNumber')
          // this.$message.success("下发生产数量成功！");
        }
      } else {
        this.messageError = res.msg ? res.msg : "抱歉，工序下发失败！";
        clearInterval(this.timer);
        this.num = 60;
        this.showBtn = 2;
        this.message = "请确认生产安全！";
      }
    },
    shutdown() {
      this.islook = false;
@@ -345,8 +364,8 @@
.color_4efefa {
  color: #4efefa !important;
}
.color_fff{
  color:#fff;
.color_fff {
  color: #fff;
}
.font_size_20 {
  font-size: 20px !important;
@@ -369,7 +388,7 @@
      width: 55%;
    }
  }
  

  .title-bng {
    height: 42px;
    line-height: 42px;
@@ -385,21 +404,21 @@
    width: 100% !important;
  }
}
.error-t{
    width:120px;
    margin:50px auto 40px;
    img{
      width:100%;
      display:inline-block;
    }
.error-t {
  width: 120px;
  margin: 50px auto 40px;
  img {
    width: 100%;
    display: inline-block;
  }
  .error-m{
    line-height:35px;
    font-size:26px;
    color:#fff;
    margin-bottom:20px;
    text-align:center;
  }
}
.error-m {
  line-height: 35px;
  font-size: 26px;
  color: #fff;
  margin-bottom: 20px;
  text-align: center;
}
::v-deep .el-dialog {
  background: transparent;
}
@@ -507,20 +526,20 @@
    height: calc(100% - 150px);
    overflow: auto;
  }
  .progress-item{
    width:55%;
    padding:2px 8px;
    height:20px;
    background:#fff;
    border-radius:30px;
    margin:0 auto;
    border:2px solid rgba(255,255,255,0.5);
    box-shadow: 1px 5px 5px rgba(255,255,255,0.5);
    span{
      float:left;
  .progress-item {
    width: 55%;
    padding: 2px 8px;
    height: 20px;
    background: #fff;
    border-radius: 30px;
    margin: 0 auto;
    border: 2px solid rgba(255, 255, 255, 0.5);
    box-shadow: 1px 5px 5px rgba(255, 255, 255, 0.5);
    span {
      float: left;
      font-weight: 700;
      color:#333;
      font-size:15px;
      color: #333;
      font-size: 15px;
    }
  }
}

 src/main.js

@@ -9,7 +9,10 @@

// import Element from "element-ui"
// Vue.use(Element, { size: "small", zIndex: 3000 })

// 防止连续点击
// 全局指令
import { preventReClick } from "@/api/global-directives";
Vue.use(preventReClick);
Vue.use(ElementUI)

new Vue({