From c5870d04b3a4a6028ea367d475a17bbce45aa9c6 Mon Sep 17 00:00:00 2001 From: haoxuan <haoxuan> Date: 星期二, 19 九月 2023 11:41:55 +0800 Subject: [PATCH] 报错处理 2023-9-19 --- src/components/AddIssue.vue | 523 +++++++++++++++++++++++++++++++++++++++------------------ 1 files changed, 357 insertions(+), 166 deletions(-) diff --git a/src/components/AddIssue.vue b/src/components/AddIssue.vue index d3cb897..770bc09 100644 --- a/src/components/AddIssue.vue +++ b/src/components/AddIssue.vue @@ -3,12 +3,17 @@ <el-dialog :close-on-click-modal="false" :visible.sync="islook" - width="700px" + width="753px" class="add-event-dialog" :show-close="false" > <div class="tank-box"> - <div slot="title" class="tac drawerHeader">鏂颁换鍔�</div> + <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=" @@ -16,7 +21,6 @@ width: 100%; height: 100%; overflow: hidden; - margin-bottom: 30px; text-align: left; " > @@ -25,93 +29,125 @@ 褰撳墠浠诲姟锛歿{ taskData.Procedure.procedure.procedureName || "" }} </div> <div class="title-item title-bng color_4efefa font_size_20"> - 鐢熶骇鏁伴噺锛�<span>{{ taskData.Order.amount || 0 }}</span> + 鐢熶骇鏁伴噺锛�<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"> - 璁㈠崟缂栧彿锛歿{ 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> + <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 title-item-two"> - 鍙傛暟瑕佹眰锛歿{ taskData.Order.parameter || "" }} + <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="title-box margin_bottom_20"> + <div class="process-box" v-if="showBtn == 2 || showBtn == 3"> <div style=" - color: #fff; - font-size: 18px; - font-weight: 700; - margin-bottom: 10px; - margin-top: 20px; + 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> - <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; - " - > - 璇风‘璁ょ敓浜у畨鍏紒 - </div> - <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> + <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> - </div> + </template> + </div> + </template> + <!-- <div class="circel-text"> <div class="circel-text-b"> 鐢熶骇鏁伴噺锛�<span>{{ Order.amount||0 }}</span>{{ Order.unit||'' }} @@ -120,25 +156,43 @@ </div> </div> <div slot="footer" class="dialog-footer tac" style="overflow: hidden"> - <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> + <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 { + startTask, + sendProcessParams, +} from "@/api/home/index"; // 浜х嚎 +// import ErrorIssue from "@/components/ErrorIssue"; export default { components: {}, props: { @@ -163,10 +217,14 @@ }, data() { return { - islook: true, + islook: false, showBtn:1, - num:0, - timer:null, + num: 0, + timer: null, + message: "璇风‘璁ょ敓浜у畨鍏紒", + messageError: "", + resParams: {}, + isLoading:false, }; }, mounted() { @@ -176,35 +234,56 @@ 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; } - } + }, + islook(){ + if (this.timer) { + clearInterval(this.timer); + } + this.num = 0; + this.showBtn=1; + this.isLoading=false + this.$emit('isTip',this.islook) + }, }, methods: { - confirmClick1(){ - this.num=0; - this.showBtn=2; - this.timer=setInterval(()=>{ - this.num=this.num+1; - },1000) - + confirmClick2() { + this.messageError = ""; + this.isLoading=false; }, - closeClick(){ - if(this.timer){ - clearInterval(this.timer) + 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.num = 0; this.shutdown(); }, getInfo() { - // if (Object.keys(this.taskData).length > 0 && this.taskData.Procedure.ID) { - // 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; + // this.islook = true; + } + }, getDateObj(date, fmt) { if (/(y+)/.test(fmt)) { @@ -244,23 +323,58 @@ return ""; } }, + onSubmit() { - if(this.taskData.Procedure.ID){ - sendProcessParams({id:this.taskData.Procedure.ID}).then(res=>{ - if(res.code==200){ - setProductNumber().then((res) => { - if (res.code == 200) { - this.$message.success("涓嬪彂鎴愬姛锛�"); - // 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; @@ -271,18 +385,28 @@ <style lang="scss" scoped> .tank-box { - width: 638px; - height: 630px; - padding: 0 20px; + width: 753px; + height: 728px; background: url("../../public/tank.png") no-repeat center center / cover; position: relative; .dialog-footer { position: absolute; - bottom: 40px; + 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; @@ -291,9 +415,10 @@ margin-bottom: 13px; } .title-box { - width: 100%; + width: calc(100% - 140px); height: auto; overflow: hidden; + padding:0 70px; .title-item { width: 45%; float: left; @@ -305,12 +430,13 @@ width: 55%; } } + .title-bng { - height: 42px; - line-height: 42px; + height: 52px; + line-height:52px; span { - width: calc(100% - 110px); - height: 42px; + width: calc(100% - 120px); + height: 52px; text-align: center; display: inline-block; background: url("../../public/number.png") no-repeat center center / cover; @@ -319,6 +445,21 @@ .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; @@ -330,16 +471,23 @@ padding: 0 !important; } .btn { - width: 200px; + width: 150px; height: auto; - float: left; 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; + // margin-right: 30px; + // margin-left: 110px; } } ::v-deep .el-tabs__content { @@ -417,30 +565,56 @@ width: 100%; } .dialog-content-box { - height: calc(100% - 200px); - overflow: hidden; - padding: 50px 20px 20px; + height: calc(100% - 190px); + // overflow: hidden; + padding: 20px 0px 10px; .el-form { overflow: hidden; } .title-auto-box { - height: calc(100% - 130px); + height: calc(100% - 160px); overflow: auto; + width:calc(100% - 140px); + margin: 0 auto; + background:#0E246A; + .title-box{ + padding:0 10px; + width:calc(100% - 20px); + } } - .progress-item{ - width:55%; - padding:2px 8px; - height:20px; - background:#fff; - border-radius:30px; + .gif{ + width:35px; 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; + 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; + color: #333; + font-size: 15px; } } } @@ -453,12 +627,29 @@ font-weight: 600; } .drawerHeader { - font-weight: 700; - font-size: 20px; - text-align: center; - color: #fff; - height: 35px; - line-height: 35px; + 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