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