From 05f3dd19cd55fef61fa89ac9f60f915ef7bd9e07 Mon Sep 17 00:00:00 2001
From: haoxuan <haoxuan>
Date: 星期五, 15 九月 2023 10:52:52 +0800
Subject: [PATCH] 提示 修改为2种状态+ 无任务页面的显示问题

---
 src/components/AddIssue.vue |  590 ++++++++++++++++++++++++++++++++++++++++++++++++++++------
 1 files changed, 528 insertions(+), 62 deletions(-)

diff --git a/src/components/AddIssue.vue b/src/components/AddIssue.vue
index e074ee0..770bc09 100644
--- a/src/components/AddIssue.vue
+++ b/src/components/AddIssue.vue
@@ -1,80 +1,380 @@
 <template>
+  <!-- top="10vh" -->
   <el-dialog
     :close-on-click-modal="false"
     :visible.sync="islook"
-    width="250px"
-    top="50vh"
+    width="753px"
     class="add-event-dialog"
     :show-close="false"
   >
-    <div slot="title" class="tac drawerHeader">涓嬪彂鐢熶骇鏁版嵁</div>
-    <div class="dialog-content-box">
-      <div style=" margin:0 auto; width:100%;overflow:hidden;margin-bottom:30px;text-align:left;">
-        
-        <div class="circel-text">
+    <div class="tank-box">
+      <div slot="title" class="tac drawerHeader">
+        <span class="title-l">鏂颁换鍔�</span>
+        <!-- <span class="title-r" @click="closeClick">
+          <img src="../../public/close.png" />
+        </span> -->
+      </div>
+      <div class="dialog-content-box">
+        <div
+          style="
+            margin: 0 auto;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            text-align: left;
+          "
+        >
+          <div class="title-box margin_bottom_13">
+            <div class="title-item color_4efefa font_size_20 title-bng">
+              褰撳墠浠诲姟锛歿{ taskData.Procedure.procedure.procedureName || "" }}
+            </div>
+            <div class="title-item title-bng color_4efefa font_size_20">
+              鐢熶骇鏁伴噺锛�<span style="color:#fff;">{{ taskData.Order.amount || 0 }}</span>
+            </div>
+          </div>
+          <template v-if="messageError">
+            <div class="error-t">
+              <img src="../../public/error.png" />
+            </div>
+            <div class="error-m">
+              {{ messageError }}
+            </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-item title-item-two">
+                  鍙傛暟瑕佹眰锛歿{ taskData.Order.parameter || "" }}
+                </div>
+              </div>
+              <div class="title-box margin_bottom_20">
+                <div
+                  style="
+                    color: #fff;
+                    font-size: 18px;
+                    margin-bottom: 10px;
+                    margin-top: 20px;
+                  "
+                  class="color_4efefa"
+                >
+                  宸ヨ壓鍙傛暟
+                </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: 26px;
+                  width: 100%;
+                  text-align: center;
+                  margin-bottom: 15px;
+                  line-height:35px;
+                "
+                :class="showBtn == 3&&isLoading?'margin-top-10px':'margin-top-40px'"
+              >
+              <template v-if="showBtn == 2">
+                  <div class="gif">
+                    <img  src="../../public/shan.gif" />
+                  </div>
+                </template>
+                <template v-if="showBtn == 3&&!isLoading">
+                  <div class="gif">
+                    <span class="yuandian"></span>
+                  </div>
+                </template>
+                {{ message }}
+              </div>
+              <template v-if="showBtn == 3&&isLoading">
+                <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)"
+                    ></el-progress>
+                </div>
+              </template>
+            </div>
+          </template>
+
+          <!-- <div class="circel-text">
          <div class="circel-text-b">
           鐢熶骇鏁伴噺锛�<span>{{ Order.amount||0 }}</span>{{ Order.unit||'' }}
          </div>
+        </div> -->
         </div>
       </div>
-    </div>
-    <div slot="footer" class="dialog-footer tac">
-      <el-button type="primary" @click="onSubmit()">涓嬪彂</el-button>
+      <div slot="footer" class="dialog-footer tac" style="overflow: hidden">
+        <template v-if="messageError">
+          <div class="btn"  @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/confirm1.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()"
+          >
+            <i class="el-icon-loading icon-loading" v-if="isLoading"/>
+            <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 ErrorIssue from "@/components/ErrorIssue";
 export default {
   components: {},
   props: {
-    Order:{
+    Order: {
       type: [Object],
       default: () => {
         return {
-          amount:0,
-          unit:''
+          amount: 0,
+          unit: "",
         };
       },
     },
-    taskData:{
+    taskData: {
       type: [Object],
-    }
+    },
+    Arr: {
+      type: [Array],
+      default: () => {
+        return [];
+      },
+    },
   },
   data() {
     return {
       islook: false,
+      showBtn:1,
+      num: 0,
+      timer: null,
+      message: "璇风‘璁ょ敓浜у畨鍏紒",
+      messageError: "",
+      resParams: {},
+      isLoading:false,
     };
   },
   mounted() {
-    this.getInfo()
+    this.getInfo();
   },
   watch: {
     taskData(val) {
-      this.getInfo()
+      this.getInfo();
+    },
+    num() {
+      if (this.num == 60) {
+        clearInterval(this.timer);
+        this.showBtn = 3;
+      }
+    },
+    islook(){
+      if (this.timer) {
+        clearInterval(this.timer);
+      }
+      this.num = 0;
+      this.showBtn=1;
+      this.isLoading=false
+      this.$emit('isTip',this.islook)
     },
   },
   methods: {
-    getInfo(){
-      if (Object.keys(this.taskData).length > 0 && this.taskData.Procedure.ID) {
-        this.islook=true
-      }else{
-        this.islook=false;
+    confirmClick2() {
+      this.messageError = "";
+      this.isLoading=false;
+    },
+    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);
+      }
+      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;
+        // this.islook = true;
+      }
+      
+    },
+    getDateObj(date, fmt) {
+      if (/(y+)/.test(fmt)) {
+        fmt = fmt.replace(
+          RegExp.$1,
+          (date.getFullYear() + "").substr(4 - RegExp.$1.length)
+        );
+      }
+      let o = {
+        "M+": date.getMonth() + 1,
+        "d+": date.getDate(),
+        "h+": date.getHours(),
+        "m+": date.getMinutes(),
+        "s+": date.getSeconds(),
+      };
+      for (let k in o) {
+        if (new RegExp(`(${k})`).test(fmt)) {
+          let str = o[k] + "";
+          fmt = fmt.replace(
+            RegExp.$1,
+            RegExp.$1.length === 1 ? str : this.padLeftZero(str)
+          );
+        }
+      }
+      return fmt;
+    },
+    padLeftZero(str) {
+      return ("00" + str).substr(str.length);
+    },
+    // 鏍煎紡鍖栨椂闂� ==> yyyy-mm-dd
+    formatDate(value) {
+      if (value) {
+        const now = value ? new Date(value * 1000) : new Date();
+        let time = this.getDateObj(now, "yyyy-MM-dd");
+        return time;
+      } else {
+        return "";
       }
     },
+
     onSubmit() {
-      setProductNumber().then(res=>{
-          if(res.code==200){
-            this.$message.success("涓嬪彂鎴愬姛锛�");
-            this.$emit('getSetProductNumber')
-            this.shutdown();
+      
+      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);
+        if(this.isLoading){
+          return true;
+        }
+        this.isLoading=true;
+          sendProcessParams({ procedureId: this.taskData.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)
+      }
+    },
+    getCode(res) {
+      if (res.code == 200) {
+        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;
@@ -84,6 +384,112 @@
 </script>
 
 <style lang="scss" scoped>
+.tank-box {
+  width: 753px;
+  height: 728px;
+  background: url("../../public/tank.png") no-repeat center center / cover;
+  position: relative;
+  .dialog-footer {
+    position: absolute;
+    bottom: 25px;
+    width:100%;
+    text-align:center;
+  }
+}
+.margin-top-10px{
+  margin-top:10px;
+}
+.margin-top-40px{
+  margin-top:40px;
+}
+.color_4efefa {
+  color: #4efefa !important;
+}
+.color_fff {
+  color: #fff;
+}
+.font_size_20 {
+  font-size: 20px !important;
+}
+.margin_bottom_13 {
+  margin-bottom: 13px;
+}
+.title-box {
+  width: calc(100% - 140px);
+  height: auto;
+  overflow: hidden;
+  padding:0 70px;
+  .title-item {
+    width: 45%;
+    float: left;
+    height: 35px;
+    line-height: 35px;
+    font-size: 16px;
+    color: #fff;
+    &:nth-of-type(odd) {
+      width: 55%;
+    }
+  }
+
+  .title-bng {
+    height: 52px;
+    line-height:52px;
+    span {
+      width: calc(100% - 120px);
+      height: 52px;
+      text-align: center;
+      display: inline-block;
+      background: url("../../public/number.png") no-repeat center center / cover;
+    }
+  }
+  .title-item-two {
+    width: 100% !important;
+  }
+}
+.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;
+}
+::v-deep .el-dialog {
+  background: transparent;
+}
+::v-deep .el-dialog__header {
+  padding: 0 !important;
+}
+::v-deep .el-dialog__body {
+  padding: 0 !important;
+}
+.btn {
+  width: 150px;
+  height: auto;
+  display: inline-block;
+  position:relative;
+  img {
+    width: 100%;
+  }
+  .icon-loading{
+    font-size:19px;
+    color:#333;
+    position:absolute;
+    line-height:3.4;
+    left:15%;
+  }
+  &:nth-of-type(1) {
+    // margin-right: 30px;
+    // margin-left: 110px;
+  }
+}
 ::v-deep .el-tabs__content {
   height: calc(100% - 55px);
   overflow-y: auto;
@@ -94,7 +500,7 @@
   border-radius: 50%;
   border: 2px solid rgba(12, 79, 218, 1);
   position: relative;
-  float:left;
+  float: left;
   .circel-two {
     width: 75px;
     height: 75px;
@@ -105,31 +511,30 @@
     border: 2px solid rgba(12, 79, 218, 1);
   }
 }
-.circel-text{
-  color:#333;
-  margin-left:20px;
-  .circel-text-t{
-    font-size:18px;
-    line-height:40px;
+.circel-text {
+  color: #fff;
+  margin-left: 20px;
+  .circel-text-t {
+    font-size: 18px;
+    line-height: 40px;
   }
-  .circel-text-b{
+  .circel-text-b {
     font-weight: 700;
-    font-size:14px;
-    
-    span{
-      color:rgba(12, 79, 218, 1);
-      font-size:38px;
-      margin-right:10px;
+    font-size: 14px;
+
+    span {
+      color: rgba(12, 79, 218, 1);
+      font-size: 38px;
+      margin-right: 10px;
     }
   }
 }
-.color_red{
-  width:100%;
-  color:red;
-  margin:0 auto;
-  text-align:center;
-  font-size:14px;
-  margin-bottom:25px;
+.color_red {
+  width: 100%;
+  margin: 0 auto;
+  text-align: center;
+  font-size: 14px;
+  margin-bottom: 25px;
 }
 .form-item {
   width: calc(50% - 20px);
@@ -160,12 +565,57 @@
   width: 100%;
 }
 .dialog-content-box {
-  height: 100px;
-  padding-bottom: 50px;
-  overflow-y: auto;
-  padding: 0 10px;
+  height: calc(100% - 190px);
+  // overflow: hidden;
+  padding: 20px 0px 10px;
   .el-form {
     overflow: hidden;
+  }
+  .title-auto-box {
+    height: calc(100% - 160px);
+    overflow: auto;
+    width:calc(100% - 140px);
+    margin: 0 auto; 
+    background:#0E246A;
+    .title-box{
+      padding:0 10px;
+      width:calc(100% - 20px);
+    }
+  }
+  .gif{
+    width:35px;
+    margin:0 auto;
+    display:inline-block;
+    vertical-align: middle;
+    img{
+      width:100%;
+    }
+    .yuandian {
+        width: 35px;
+        height: 35px;
+        display: inline-block;
+        // background: #15d815;
+        background:red;
+        border-radius: 50%;
+        margin-top:-5px;
+        vertical-align: middle;
+      }
+  }
+  .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;
+    }
   }
 }
 .num-identify {
@@ -177,13 +627,29 @@
   font-weight: 600;
 }
 .drawerHeader {
-  // position:relative;
-  border-bottom: 1px solid #eee;
-  height: 40px;
-  line-height: 30px;
-  color: #333;
-  font-weight: 700;
-  font-size: 18px;
+  width:98%;
+  margin:0 auto;
+  overflow:hidden;
+  .title-l{
+    width:25%;
+    float:left;
+    margin-left:30px;
+    font-size: 25px;
+    color: #fff;
+    height: 3.2vw;
+    line-height: 4.5vw;
+  }
+  .title-r{
+    width:60px;
+    float:right;
+    height: 60px;
+    line-height: 5vw;
+    cursor:pointer;
+    img{
+      display:inline-block;
+      width:100%;
+    }
+  }
   .identify {
     width: 80px;
     height: 25px;

--
Gitblit v1.8.0