From f8d966a211fdbc55b485b11f27013b1ba0ecabba Mon Sep 17 00:00:00 2001 From: haoxuan <haoxuan> Date: 星期二, 26 九月 2023 15:37:27 +0800 Subject: [PATCH] 下发参数 提示成功样式改版 增加倒计时3s自动关闭弹框+错误提示 限制3s 关闭+工序完成不可操作 --- src/utils/request.js | 4 +- public/agin.png | 0 src/views/visualization.vue | 35 ++++++++++------- public/close-btn.png | 0 src/api/home/index.js | 1 src/components/AddIssue.vue | 74 +++++++++++++++++++++++++----------- 6 files changed, 74 insertions(+), 40 deletions(-) diff --git a/public/agin.png b/public/agin.png index 4554385..10fae9e 100644 --- a/public/agin.png +++ b/public/agin.png Binary files differ diff --git a/public/close-btn.png b/public/close-btn.png new file mode 100644 index 0000000..f07cd8f --- /dev/null +++ b/public/close-btn.png Binary files differ diff --git a/src/api/home/index.js b/src/api/home/index.js index 37cbcae..33c9251 100644 --- a/src/api/home/index.js +++ b/src/api/home/index.js @@ -19,6 +19,7 @@ export const getProgress = (data) => { return request({ url: "/v1/plc/productProgress", + loadingFlag:true, method: "post", data }); diff --git a/src/components/AddIssue.vue b/src/components/AddIssue.vue index bbd2bfa..f9795fb 100644 --- a/src/components/AddIssue.vue +++ b/src/components/AddIssue.vue @@ -9,7 +9,7 @@ > <div class="tank-box"> <div slot="title" class="tac drawerHeader"> - <span class="title-l">鏂颁换鍔�</span> + <span class="title-l">{{messageError?'鎻愮ず':'鏂颁换鍔�'}}</span> <!-- <span class="title-r" @click="closeClick"> <img src="../../public/close.png" /> </span> --> @@ -24,17 +24,10 @@ 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" /> + <span v-if="messageError =='涓嬪彂鎴愬姛锛�'" class="el-icon-success color_success"></span> + <span v-else class="el-icon-error color_error"></span> </div> <div class="error-m"> {{ messageError }} @@ -43,10 +36,20 @@ class="font_size_20 color_fff" style="text-align: center; width: 100%; margin: 10px 0" > - 璇烽噸璇� + <span v-if="messageError =='涓嬪彂鎴愬姛锛�'" style="font-size:30px;">{{3-Number(sencond)}}s</span> + <span v-else>璇烽噸璇�</span> </div> + </template> <template v-else> + <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> <div class="title-auto-box"> <div class="title-box margin_bottom_20"> <div class="title-item"> @@ -162,19 +165,22 @@ </div> --> </div> </div> - <div slot="footer" class="dialog-footer tac" style="overflow: hidden"> + <div slot="footer" :class="messageError?'dialog-footer tac btn-error':'dialog-footer tac'" style="overflow: hidden"> <template v-if="messageError"> - <div class="btn" @click="confirmClick2"> - <img src="../../public/agin.png" /> + <div class="btn" v-if="messageError =='涓嬪彂鎴愬姛锛�'" @click="closeClick"> + <img src="../../public/close-btn.png" /> + </div> + <div class="btn" v-else @click="confirmClick2"> + <img src="../../public/agin.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 v-if='taskData&&taskData.canStarted' src="../../public/confirm1.png" /> - <img v-else src="../../public/confirm2.png" /> + <div class="btn" v-if="showBtn == 1"> + <div v-if='taskData&&taskData.canStarted' @click="confirmClick1"><img src="../../public/confirm1.png" /></div> + <div v-else><img src="../../public/confirm2.png" /></div> </div> <div class="btn" v-if="showBtn == 2"> <img src="../../public/confirm2.png" /> @@ -237,9 +243,11 @@ num: 0, timer: null, message: this.safeProduce, - messageError: "", + messageError: "涓嬪彂鎴愬姛锛�", resParams: {}, isLoading:false, + sencond:0, + sencondTimer:null, }; }, mounted() { @@ -255,6 +263,12 @@ if (this.num == 30) { clearInterval(this.timer); this.showBtn = 3; + } + }, + sencond(){ + if(this.sencond==3){ + clearInterval(this.sencondTimer); + this.closeClick() } }, islook(){ @@ -374,6 +388,11 @@ if (res.code == 200) { if (this.num == 30) { this.messageError = "涓嬪彂鎴愬姛锛�"; + if (!this.sencondTimer) { + this.sencondTimer = setInterval(() => { + this.sencond = this.sencond + 1; + }, 1000); + } clearInterval(this.timer); // this.num = 30; // this.showBtn = 2; @@ -401,6 +420,12 @@ </script> <style lang="scss" scoped> +.color_error{ + color:red; +} +.color_success{ + color:green; +} .tank-box { width: 753px; height: 728px; @@ -464,16 +489,16 @@ } } .error-t { - width: 120px; - margin: 50px auto 40px; - img { - width: 100%; + width: 100px; + margin: 100px auto 40px; + font-size:98px; + span { display: inline-block; } } .error-m { line-height: 35px; - font-size: 26px; + font-size: 28px; color: #fff; margin-bottom: 20px; text-align: center; @@ -487,6 +512,9 @@ ::v-deep .el-dialog__body { padding: 0 !important; } +.btn-error{ + bottom:80px!important; +} .btn { width: 150px; height: auto; diff --git a/src/utils/request.js b/src/utils/request.js index 84d73c6..36fd89f 100644 --- a/src/utils/request.js +++ b/src/utils/request.js @@ -42,7 +42,7 @@ // message: res.data.msg==res.data.data?res.data.data:res.data.msg+','+res.data.data, message: res.data.msg, type: 'error', - duration: 5 * 1000 + duration: 3 * 1000 }) // MessageBox.confirm( res.data.msg+"?", "鎻愮ず", { // confirmButtonText: "纭畾", @@ -68,7 +68,7 @@ Message({ message: message, type: 'error', - duration: 5 * 1000 + duration: 3 * 1000 }) // MessageBox.confirm( message+"?", "鎻愮ず", { // confirmButtonText: "纭畾", diff --git a/src/views/visualization.vue b/src/views/visualization.vue index 476ee6c..aa8ee94 100644 --- a/src/views/visualization.vue +++ b/src/views/visualization.vue @@ -1,8 +1,8 @@ <template> <div class="home"> - <!-- --> - <template v-if="Tasks&&Tasks.length>0"> + <!-- v-if="Tasks&&Tasks.length>0" --> + <template > <div class="left"> <p class="title"> <template v-if="Number(ChannelAmount)>1"> @@ -312,7 +312,7 @@ </div> <div class="card_top-2"> <div style="line-height: 45px; text-align: center"> - 鐢熶骇涓� + {{ taskData.Procedure.Status==3?'鐢熶骇瀹屾垚':'鐢熶骇涓�' }} </div> <!-- <span class="card-top-r-t">瀹屾垚杩涘害锛�50%</span> <span class="card-top-r-b">12鏈�28鏃� 08:24</span> --> @@ -359,6 +359,7 @@ <el-button type="primary" size="mini" + :disabled="taskData.Procedure.Status==3?true:false" class="color_f70f83" @click="finishClick(index, taskData)" > @@ -512,7 +513,7 @@ </div> </template> <!-- --> - <template v-else> + <!-- <template v-else> <div class="home-img-box"> <div class="bg-title"> <img src="../../public/bg-title.png" /> @@ -543,7 +544,7 @@ </div> </div> - </template> + </template> --> <!-- 鎺у埗鐨勫脊妗� --> <AddControl ref="control" :Arr="Arr" /> <!-- 鎺у埗鐨勫脊妗� --> @@ -716,7 +717,11 @@ this.getStartArr() this.$refs.control.islook=true }else{ - this.$message.error('鐩墠娌℃湁浠诲姟锛�') + this.$message({ + message:'鐩墠娌℃湁浠诲姟锛�', + type: 'error', + duration: 3 * 1000 + }) } }, isTip(val){ @@ -958,15 +963,15 @@ }, 3000); } } - if (res.code != 200 || this.TasksCopy.length == 0) { - this.getcountdown(); - // 鎺у埗閲嶆柊璇锋眰getTaskInfo, 鍙紑鍚竴涓畾鏃跺櫒 - if (!this.cutdownTimer) { - this.cutdownTimer = setInterval(() => { - this.getcountdown(); - }, 60000); - } - } + // if (res.code != 200 || this.TasksCopy.length == 0) { + // this.getcountdown(); + // // 鎺у埗閲嶆柊璇锋眰getTaskInfo, 鍙紑鍚竴涓畾鏃跺櫒 + // if (!this.cutdownTimer) { + // this.cutdownTimer = setInterval(() => { + // this.getcountdown(); + // }, 60000); + // } + // } this.cutClick(1) }); // this.TasksCopy.push(object) -- Gitblit v1.8.0