From 6d9b6320e57ae787bfcfc56f4f34923166ea1a9b Mon Sep 17 00:00:00 2001 From: haoxuan <haoxuan> Date: 星期五, 25 八月 2023 12:05:27 +0800 Subject: [PATCH] 面板的需求更改 下方的弹框+倒计时 --- src/views/visualization.vue | 51 +++++++-- src/api/home/index.js | 16 +++ src/components/AddIssue.vue | 203 ++++++++++++++++++++++++++++++++++++++++ 3 files changed, 258 insertions(+), 12 deletions(-) diff --git a/src/api/home/index.js b/src/api/home/index.js index 330066d..f93a823 100644 --- a/src/api/home/index.js +++ b/src/api/home/index.js @@ -102,5 +102,21 @@ }); }; +// 鐢熶骇鎬婚噺 +export const setProductNumber = (data) => { + return request({ + url: 'v1/plc/setProductNumber', + method: "post", + data, + }); +}; +// 鍊掕鏃� +export const countdown = (data) => { + return request({ + url: 'v1/task/countdown', + method: "get", + data, + }); +}; diff --git a/src/components/AddIssue.vue b/src/components/AddIssue.vue new file mode 100644 index 0000000..e074ee0 --- /dev/null +++ b/src/components/AddIssue.vue @@ -0,0 +1,203 @@ +<template> + <el-dialog + :close-on-click-modal="false" + :visible.sync="islook" + width="250px" + top="50vh" + 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="circel-text-b"> + 鐢熶骇鏁伴噺锛�<span>{{ Order.amount||0 }}</span>{{ Order.unit||'' }} + </div> + </div> + </div> + </div> + <div slot="footer" class="dialog-footer tac"> + <el-button type="primary" @click="onSubmit()">涓嬪彂</el-button> + </div> + </el-dialog> +</template> + +<script> + +import { + startTask, + setProductNumber, +} from "@/api/home/index"; // 浜х嚎 +export default { + components: {}, + props: { + Order:{ + type: [Object], + default: () => { + return { + amount:0, + unit:'' + }; + }, + }, + taskData:{ + type: [Object], + } + }, + data() { + return { + islook: false, + }; + }, + mounted() { + this.getInfo() + }, + watch: { + taskData(val) { + this.getInfo() + }, + }, + methods: { + getInfo(){ + if (Object.keys(this.taskData).length > 0 && this.taskData.Procedure.ID) { + this.islook=true + }else{ + this.islook=false; + } + }, + onSubmit() { + setProductNumber().then(res=>{ + if(res.code==200){ + this.$message.success("涓嬪彂鎴愬姛锛�"); + this.$emit('getSetProductNumber') + this.shutdown(); + } + }) + }, + shutdown() { + this.islook = false; + }, + }, +}; +</script> + +<style lang="scss" scoped> +::v-deep .el-tabs__content { + height: calc(100% - 55px); + overflow-y: auto; +} +.circel { + width: 100px; + height: 100px; + border-radius: 50%; + border: 2px solid rgba(12, 79, 218, 1); + position: relative; + float:left; + .circel-two { + width: 75px; + height: 75px; + position: absolute; + top: 11px; + left: 11px; + border-radius: 50%; + 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-b{ + font-weight: 700; + 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; +} +.form-item { + width: calc(50% - 20px); + float: left; + &:nth-child(odd) { + margin-right: 20px; + } +} +.form-item-two { + width: calc(50% - 20px); + float: left; + &:nth-of-type(odd) { + margin-right: 20px; + } +} +.form-item-three { + width: calc(100% - 20px); + float: left; +} +.form-item-check { + width: calc(33% - 40px); + float: left; + &:nth-of-type(odd) { + margin-right: 20px; + } +} +.title { + width: 100%; +} +.dialog-content-box { + height: 100px; + padding-bottom: 50px; + overflow-y: auto; + padding: 0 10px; + .el-form { + overflow: hidden; + } +} +.num-identify { + padding: 5px 8px; + background-color: rgba(255, 153, 0, 1); + border-radius: 6px; + font-size: 14px; + color: #fff; + font-weight: 600; +} +.drawerHeader { + // position:relative; + border-bottom: 1px solid #eee; + height: 40px; + line-height: 30px; + color: #333; + font-weight: 700; + font-size: 18px; + .identify { + width: 80px; + height: 25px; + line-height: 25px; + text-align: center; + border: 1px solid rgba(255, 153, 0, 1); + border-radius: 6px; + font-size: 16px; + color: rgba(255, 153, 0, 1); + transform: rotate(15deg); + font-weight: 600; + margin-right: 100px; + margin-top: 12px; + float: right; + } +} +</style> diff --git a/src/views/visualization.vue b/src/views/visualization.vue index 7546681..5e63f08 100644 --- a/src/views/visualization.vue +++ b/src/views/visualization.vue @@ -108,7 +108,7 @@ color="#09E5ED" :text-inside="true" :stroke-width="30" - :percentage="finishPercent" + :percentage="taskData.Order?parseInt(finishNumber/taskData.Order.amount):0" ></el-progress> </el-descriptions-item> <!-- <el-descriptions-item label="鍚堟牸鐜�" style="width: 100%"> @@ -196,7 +196,7 @@ </div> <div class="card_top-3"> <span class="card-top-r-t" - >瀹屾垚杩涘害锛歿{ finishPercent || 0 }}</span + >瀹屾垚杩涘害锛歿{ taskData.Order?parseInt(finishNumber/taskData.Order.amount):0}}</span > <span class="card-top-r-b"> <el-progress @@ -204,7 +204,7 @@ color="#09E5ED" :text-inside="true" :stroke-width="10" - :percentage="finishPercent" + :percentage="taskData.Order?parseInt(finishNumber/taskData.Order.amount):0" :show-text="false" ></el-progress> </span> @@ -430,7 +430,8 @@ <img src="../../public/yuan.png" /> <div class="btn-img"> <div class="font_size_16" style="line-height: 5; margin-top: 18%"> - 鏆傛棤浠诲姟锛屼紤鎭竴涓嬪惂... + <span v-if="showCountDown">璺濈浠诲姟寮�濮嬫椂闂达細{{countDownHour}}鏃� {{countDownMinute}}鍒�</span> + <span v-else>鏆傛棤浠诲姟锛屼紤鎭竴涓嬪惂...</span> </div> <el-button type="primary" @click="reloadPage">鍒锋柊浠诲姟</el-button> </div> @@ -439,10 +440,13 @@ </template> <!-- 鎺у埗鐨勫脊妗� --> <AddControl ref="control" :id="taskData.Procedure.ID" /> + <!-- 鎺у埗鐨勫脊妗� --> + <AddIssue ref="control" :taskData="taskData" :Order="taskData.Order" @getSetProductNumber="getTaskInfo" /> </div> </template> <script> + import { getTaskInfo, finishTask, @@ -450,15 +454,18 @@ saveMiniDict, startTask, getProgress, + countdown, } from "@/api/home/index"; // 浜х嚎 import Card from "@/components/Card.vue"; import Knowledge from "../components/Knowledge.vue"; import AddControl from "../components/AddControl.vue"; +import AddIssue from "../components/AddIssue.vue"; export default { components: { Card, Knowledge, AddControl, + AddIssue, }, data() { return { @@ -466,7 +473,6 @@ passrate: 30, //鍚堟牸鐜� production: 25, //鐢熶骇涓� finishNumber: 0, - finishPercent: 0, formatTime2:'', formatTime3:'', // 鍙充晶瀹屾垚 @@ -515,6 +521,10 @@ }, }, }, + totalNumber:0, + showCountDown:false, + countDownHour:0, + countDownMinute:0, }; }, mounted() { @@ -523,28 +533,33 @@ // this.passrate = this.getRandomNumber(1, 100); // this.production = this.getRandomNumber(1, 100); // }, 3000); + this.getDate3() + this.getDate2() setInterval(()=>{ this.getDate3() this.getDate2() },5000) this.getTaskInfo(); - setInterval(() => { - this.getProgressInfo(); - }, 60000); }, - methods: { reloadPage() { // window.location.reload(); this.getTaskInfo(); }, + getcountdown(){ + countdown().then((res) => { + if (res.code == 200) { + this.showCountDown=res.data.ShowCountDown?res.data.ShowCountDown:false; + this.countDownHour=res.data.CountDownHour?res.data.CountDownHour:0 + this.countDownMinute=res.data.CountDownMinute?res.data.CountDownMinute:0 + } + }); + }, getProgressInfo() { getProgress().then((res) => { if (res.code == 200) { this.finishNumber = res.data.finishNumber ? res.data.finishNumber : 0; - this.finishPercent = res.data.finishPercent - ? res.data.finishPercent - : 0; + } }); }, @@ -658,6 +673,8 @@ ...this.taskData.Procedure.procedure, }, ]); + + if (this.taskData.Procedure.ID) { startTask({ id: this.taskData.Procedure.ID }).then((res) => { if (res.code == 200) { @@ -668,6 +685,10 @@ }); } }); + this.getProgressInfo(); + setInterval(() => { + this.getProgressInfo(); + }, 6000); } console.log(this.procedureList, "===1111procedureList"); // setTimeout(() => { @@ -676,6 +697,12 @@ this.setInterCard("outputMaterials", "cardBox3"); // }, 5000); } + if(res.code!=200||!this.taskData.Procedure.ID){ + this.getcountdown(); + setInterval(() => { + this.getcountdown(); + }, 60000); + } }); }, // 璁剧疆 -- Gitblit v1.8.0