From 3d3b89a84fd8c3aa524c013afe56c6949fc3a874 Mon Sep 17 00:00:00 2001 From: songshankun <songshankun@foxmail.com> Date: 星期日, 08 十月 2023 16:19:45 +0800 Subject: [PATCH] feat: 工序添加工艺参数展示 --- src/views/visualization.vue | 431 ++++++++++++++++++++++++++++++++++++----------------- 1 files changed, 293 insertions(+), 138 deletions(-) diff --git a/src/views/visualization.vue b/src/views/visualization.vue index 554b3db..a74ba65 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"> + <div class="home" ref="homeRef"> + <!-- v-if="Tasks&&Tasks.length>0" --> + <template > <div class="left"> <p class="title"> <template v-if="Number(ChannelAmount)>1"> @@ -25,9 +25,9 @@ style="float: left;" @click="cutClick(3)" > - <img style="width:32px;" v-if="activeName == 3" src="../../public/one-blue.png" /> + <img style="width:32px;" v-if="activeName == 3" src="../../public/right-blue.png" /> <span v-else> - <img style="width:32px;" src="../../public/one.png" /> + <img style="width:32px;" src="../../public/right.png" /> </span> </span> </template> @@ -104,7 +104,7 @@ style="font-size: 35px; font-weight: 600" class="color_green" > - {{ taskData.finishNumber }}{{ taskData.Order.unit }} + {{ taskData.finishNumber || 0 }}{{ taskData.Order.unit }} </dd> </dl> </div> @@ -126,31 +126,31 @@ <div class="content_right"> <el-descriptions :column="(activeName == 1||activeName == 3) ? 2 : 1" :colon="true"> <el-descriptions-item label="浜у搧鍚嶇О">{{ - taskData.Order.productName || "" + taskData.Order.productName || "--" }}</el-descriptions-item> <el-descriptions-item label="鏁伴噺" >{{ taskData.Order.amount || 0 }}{{ taskData.Order.unit }}</el-descriptions-item > <el-descriptions-item label="浜よ揣鏃ユ湡">{{ - taskData.Order.deliverDate || "" + taskData.Order.deliverDate || "--" }}</el-descriptions-item> <el-descriptions-item label="宸ユ椂"> - {{ taskData.Procedure.procedure.workHours || "" }} + {{ taskData.Procedure.procedure.workHours || "--" }} </el-descriptions-item> <el-descriptions-item label="璁″垝鏃堕棿" - >{{ formatDate(taskData.Order.startTime) || "" }} + >{{ formatDate(taskData.Order.startTime) || "--" }} - {{ formatDate(taskData.Order.endTime) }}</el-descriptions-item > <el-descriptions-item label="璐х墿鎻忚堪">{{ - taskData.Order.orderAttr || "" + taskData.Order.orderAttr || "--" }}</el-descriptions-item> <el-descriptions-item label="瀹㈡埛鍚嶇О">{{ - taskData.Order.customer || "" + taskData.Order.customer || "--" }}</el-descriptions-item> <el-descriptions-item label="鍙傛暟瑕佹眰">{{ - taskData.Order.parameter || "" + taskData.Order.parameter || "--" }}</el-descriptions-item> </el-descriptions> <el-descriptions :column="1" :colon="true"> @@ -163,7 +163,7 @@ :text-inside="true" :stroke-width="30" :percentage=" - (taskData.Order && taskData.finishNumber != 0) + (taskData.Order && taskData.finishNumber != 0 && taskData.Order.amount) ? parseInt( (taskData.finishNumber / taskData.Order.amount) * 100 @@ -211,16 +211,32 @@ v-for="(list, index2) in item" > <div class="card_content"> - <div class="card_contentLeft">{{ list.materialId }}</div> + <div class="card_contentLeft font_dian"> + <el-popover + width="200" + :content="list.materialId" + placement="top-start" + trigger="click" + > + <span slot="reference">{{ list.materialId }}</span> + </el-popover> + </div> </div> <div class="card-top-input-out-l"> - <div> + <div class="font_dian"> <!-- 璁惧12<i style="font-size: 14px" class="el-icon-right font-arrow-20" ></i> 璁惧13 --> - {{ list.materialName }} + <el-popover + width="200" + :content="list.materialName" + placement="top-start" + trigger="click" + > + <span slot="reference">{{ list.materialName }}</span> + </el-popover> </div> </div> <div class="card-top-input-out-r"> @@ -255,11 +271,12 @@ v-for="(item, index) in taskData.procedureList" > <div - class="card" :key="index2" v-for="(list, index2) in item" > - <template v-if="list.name == '宸ュ簭'"> + <div + class="card" + v-if="list.name == '宸ュ簭'"> <div class="card_content"> <div class="card_contentLeft color_blue font_dian"> <!-- {{ list.deviceName }} --> @@ -277,7 +294,7 @@ <div class="card_top-3"> <span class="card-top-r-t" >瀹屾垚杩涘害锛歿{ - taskData.Order && taskData.finishNumber != 0 + (taskData.Order && taskData.finishNumber != 0 && taskData.Order.amount) ? parseInt( (taskData.finishNumber / taskData.Order.amount) * @@ -312,29 +329,39 @@ </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> --> </div> - </template> - <template v-else> - <!-- <div class="card_content"> - - </div> --> - <div :class="(activeName==1||activeName == 3)?'card_top-4 font_size_20px':'card_top-4'"> - <div>宸ヨ壓缂栧彿锛�<div >{{ list.number }}</div></div> - <!-- <div - style=" - font-size: 14px; - color: #cfcfcf; - line-height: 20px; - " + </div> + <div v-else class="process-params"> + <div class="process-params-title"> + <el-popover + width="200" + :content="list.number" + placement="top-start" + trigger="click" > - 宸ヨ壓鐨勫叿浣撲俊鎭鐐瑰嚮鎺у埗鏌ョ湅锛� - </div> --> + <span slot="reference">宸ヨ壓缂栧彿锛歿{ list.number }}</span> + </el-popover> + </div> - </template> + <div class="process-params-value"> + <!-- 宸ヨ壓鍙傛暟--> + {{mergeProcessParams(taskData.Arr)}} + </div> + + <!-- <div + style=" + font-size: 14px; + color: #cfcfcf; + line-height: 20px; + " + > + 宸ヨ壓鐨勫叿浣撲俊鎭鐐瑰嚮鎺у埗鏌ョ湅锛� + </div> --> + </div> </div> </el-carousel-item> </el-carousel> @@ -344,7 +371,9 @@ ></p> <div class="right-small-btn bottom-box-btn"> <el-button type="primary"> 鎵撳嵃</el-button> + <el-popover + v-if="taskData.Procedure.Status && taskData.Procedure.Status!==3" placement="top-end" width="160" class="button-finish" @@ -367,6 +396,7 @@ </div> <el-button type="primary" slot="reference"> 瀹屾垚</el-button> </el-popover> + <el-button v-else type="primary" class="huise"> 瀹屾垚</el-button> </div> </div> <i class="el-icon-arrow-right font-arrow-20 color_318583"></i> @@ -396,13 +426,27 @@ > <div class="card"> <div class="card_content"> - <div class="card_contentLeft"> - {{ list.materialId }} + <div class="card_contentLeft font_dian"> + <el-popover + width="200" + :content="list.materialId" + placement="top-start" + trigger="click" + > + <span slot="reference">{{ list.materialId }}</span> + </el-popover> </div> </div> <div class="card-top-input-out-l"> - <div> - {{ list.materialName }} + <div class="font_dian"> + <el-popover + width="200" + :content="list.materialName" + placement="top-start" + trigger="click" + > + <span slot="reference">{{ list.materialName }}</span> + </el-popover> </div> </div> <div class="card-top-input-out-r"> @@ -424,7 +468,7 @@ <template v-if="activeName == 2 &&(!taskData||Object.keys(taskData).length==0)" > - + <el-empty description="鏆傛棤浠诲姟..."></el-empty> </template> </div> @@ -447,12 +491,25 @@ <div class="right-top-m"> 璁惧鐘舵��: <!-- 1鏂紑2鐢熶骇3寰呮満 --> - <span style="position: relative" - v-if="plcStatus" > - <img v-if="plcStatus == 1" src="../../public/duan.png" /> - <img v-else src="../../public/lian.png" /> - <!-- <span class="yuandian"></span> --> - {{ plcStatus==1?'鏂紑':(plcStatus==2?'鐢熶骇涓�':'寰呮満') }} + <span style="position: relative" v-if="plcStatus" > + <el-popover + v-if="plcStatus == 1&&plcNotConnected" + width="180" + :content="plcNotConnected" + placement="top-end" + trigger="click" + > + <span slot="reference"> + <img src="../../public/duan.png" /> + 鏂紑 + </span> + </el-popover> + <span v-else> + <img v-if="plcStatus == 1&&!plcNotConnected" src="../../public/duan.png" /> + <img v-else src="../../public/lian.png" /> + <!-- <span class="yuandian"></span> --> + {{ plcStatus==1?'鏂紑':(plcStatus==2?'鐢熶骇涓�':'寰呮満') }} + </span> </span> </div> <div class="right-top-m-btn"> @@ -484,9 +541,9 @@ <!-- <span>{{ item.phoneNum || "" }}</span> --> <span class="color_yellow"><i class="el-icon-star-on" /><i class="el-icon-star-on" /><i class="el-icon-star-on" /><i class="el-icon-star-on" /><i class="el-icon-star-on" /></span> </dl> - + </div> - + <!-- <div style=" width: 100%; @@ -512,7 +569,7 @@ </div> </template> <!-- --> - <template v-else> + <!-- <template v-else> <div class="home-img-box"> <div class="bg-title"> <img src="../../public/bg-title.png" /> @@ -542,19 +599,21 @@ </div> </div> </div> - - </template> + + </template> --> <!-- 鎺у埗鐨勫脊妗� --> <AddControl ref="control" :Arr="Arr" /> <!-- 鎺у埗鐨勫脊妗� --> - <AddIssue + <TaskControlModal ref="control" - :Arr="Arr" - :safeProduce="safeProduce" - :taskData="taskData" - :Order="taskData.Order" - @getSetProductNumber="getTaskInfo" + :activeName="activeName" + @getSetProductNumber="reloadPage" @isTip="isTip" + /> + <!-- 宸ヨ壓妯″瀷 --> + <ProcessModel + ref="processModel" + :processList="processList" /> </div> </template> @@ -574,15 +633,20 @@ import Knowledge from "../components/Knowledge.vue"; import AddControl from "../components/AddControl.vue"; import AddIssue from "../components/AddIssue.vue"; +import ProcessModel from "../components/ProcessModel.vue"; +import TaskControlModal from "@/components/TaskControlModal.vue"; export default { components: { + TaskControlModal, Card, Knowledge, AddControl, AddIssue, + ProcessModel, }, data() { return { + pollingTaskCountTimer: null, activeName: 1, progress: 70, //杩涘害 passrate: 30, //鍚堟牸鐜� @@ -678,6 +742,7 @@ countDownHour: 0, countDownMinute: 0, Arr: [], + ArrError:'', // 璁板綍瀹氭椂鍣ㄧ姸鎬� procInfoTimer: null, cutdownTimer: null, @@ -686,7 +751,28 @@ isTipShow:false, // isFinsh:0, safeProduce:'', + // 璁惧鏂紑鐨勫師鍥� + plcNotConnected:'', ChannelAmount:0, + object:{ + Order: {}, + Procedure: { + procedure: { inputMaterials: [], outputMaterials: [], workers: [] }, + }, + inputMaterials: [], + outputMaterials: [], + procedureList: [], + }, + processList:[ + { + name:'浜у搧1+宸ヨ壓2', + number:'v1.0' + }, + { + name:'浜у搧1+宸ヨ壓2', + number:'v2.0' + } + ] }; }, mounted() { @@ -702,6 +788,10 @@ this.getDate2(); }, 5000); this.getTaskInfo(); + this.getTaskCountStatistics() + }, + beforeDestroy() { + clearTimeout(this.pollingTaskCountTimer) }, watch:{ // isFinsh(){ @@ -711,12 +801,23 @@ // } }, methods: { + mergeProcessParams(params){ + if (params?.length){ + return params.map(ele=> `${ele.Key}: ${ele.Value}`).join(' ') + }else{ + return '' + } + }, taskClick(){ if(this.TaskCount>0){ - this.getStartArr() - this.$refs.control.islook=true + // this.getStartArr() + this.$refs.control.show=true }else{ - this.$message.error('鐩墠娌℃湁浠诲姟锛�') + this.$message({ + message:'鐩墠娌℃湁浠诲姟锛�', + type: 'error', + duration: 3 * 1000 + }) } }, isTip(val){ @@ -726,15 +827,27 @@ this.activeName = val; if(this.activeName==2){ this.Tasks=this.TasksCopy.slice(0,2) + if(this.Tasks.length<2){ + if(this.Tasks.length==0){ + this.Tasks.push(this.object) + } + this.Tasks.push(this.object) + } }else if(this.activeName==1){ this.Tasks=this.TasksCopy.slice(0,1) + if(this.Tasks.length<1){ + this.Tasks.push(this.object) + } }else if(this.activeName==3){ this.Tasks=this.TasksCopy.slice(1) + if(this.Tasks.length<1){ + this.Tasks.push(this.object) + } } }, - reloadPage() { + reloadPage(val) { // window.location.reload(); - this.getTaskInfo(); + this.getTaskInfo(val); }, getcountdown() { countdown().then((res) => { @@ -748,9 +861,14 @@ this.countDownMinute = res.data.CountDownMinute ? res.data.CountDownMinute : 0; + if(this.countDownHour==0&& this.countDownMinute==0){ + this.getTaskInfo(); + } } }); }, + + getDateObj(date, fmt) { if (/(y+)/.test(fmt)) { @@ -814,7 +932,7 @@ let String=now-date*1000; let seconds=Math.floor(String/1000) let minutes=Math.floor(seconds/60) - + let days=Math.floor(String/1000/60/60/24) let hours=Math.floor(minutes/60)-days*24 let m=minutes-days*24*60-hours*60 @@ -824,16 +942,21 @@ setInterval(() => { d= getCha(); }, 6000); - return d; + return date?d:'--'; }, setInterCard(value, name, i) { if (this.TasksCopy[i].Procedure.procedure[value]!=null) { let height = 200; - let num = 1; - if (this.$refs[name]) { - height = this.$refs[name].$el?this.$refs[name].$el.offsetHeight:200; - num = Math.floor(height / 80); + let num = 3; + // if (this.$refs[name]) { + // height = this.$refs[name].$el?this.$refs[name].$el.offsetHeight:200; + // num = Math.floor(height / 80); + // } + height = this.$refs['homeRef']?(this.$refs['homeRef'].offsetHeight-470-90-20):200; + if(this.activeName==2){ + height=height-610-90-20 } + num = Math.floor(height / 80); let inputMaterials = JSON.parse( JSON.stringify(this.TasksCopy[i].Procedure.procedure[value]) ); @@ -860,35 +983,29 @@ } }, - getTaskInfo() { - let object = { - Order: {}, - Procedure: { - procedure: { inputMaterials: [], outputMaterials: [], workers: [] }, - }, - inputMaterials: [], - outputMaterials: [ - // [ - // { - // materialId:11111, - // materialName:'272澶у鍟婃斁鍋囦簡鍗¤壈鑻﹀鏂楀瀮鍦惧彂蹇�掑瀮鍦惧弽棣堟潵寰楀強鍏嬮殕', - // amount:100, - // unit:'浠�' - // } - // ] - ], - procedureList: [ - // [ - // { - // name:"宸ュ簭", - // deviceName:'1111dhafjdhajkhf jkdahjkf鎵撴硶鍗冲彲鎵撻枊閺堟帴鑲痉鍩哄晩鐪嬩締jdad澶ч浜笢鍗¤�佸徃鏈虹暘绐犲�掕嚰寮�浜嗘埧閲戦樋濂庣鍗佸叚灞婂弽棣堟媺寰锋柉鍩簁鎵撳崱鏈洪樋鐝傞檮浠舵墦寮�浜嗙偣鍑婚樋閲屽崱鍑忚偉鐨勫崱鎷夎兌寮�浜嗘埧澶ц涓婂厠闅唂k鍟﹀ぇ瀹堕槻绌洪浄閬旀暩鎿氱湅i' - // }, - // ] - ], - }; + /** + * 杞鑾峰彇浠诲姟鏁伴噺 + */ + getTaskCountStatistics(){ + getTaskInfo({taskMode:1}).then((res) => { + if (res.code === 200&&res.data) { + this.TaskCount=res.data?.TaskCount ?? 0 + } + },err=>{ + this.TaskCount = 0 + console.error(err) + }).finally(()=>{ + this.pollingTaskCountTimer = setTimeout(()=>{ + this.getTaskCountStatistics() + // 20绉掍竴娆¤疆璇� + },20000) + }); + }, + + getTaskInfo(val) { this.Tasks = []; this.TasksCopy=[] - getTaskInfo({ }).then((res) => { + getTaskInfo({taskMode:2}).then((res) => { if (res.code == 200&&res.data) { let arr=[] if(res.data.Tasks){ @@ -896,21 +1013,21 @@ return (a.Channel - b.Channel) }) } - this.activeName=1; this.TasksCopy = res.data.Tasks ? res.data.Tasks : []; - this.safeProduce=res.data.Prompt.safeProduce?res.data.Prompt.safeProduce:'' + // this.safeProduce=res.data.Prompt.safeProduce?res.data.Prompt.safeProduce:'' + this.plcNotConnected=res.data.Prompt.plcNotConnected?res.data.Prompt.plcNotConnected:'' this.ChannelAmount=res.data.ChannelAmount?res.data.ChannelAmount:1 // if(this.ChannelAmount>1 &&this.TasksCopy.length<2){ - // this.TasksCopy.push(object) + // this.TasksCopy.push(this.object) // } this.TaskCount=res.data.TaskCount?res.data.TaskCount:0 - - if (this.TasksCopy.length == 0&&this.TaskCount==0) { + + if ((this.TasksCopy.length ==0 )||!this.TasksCopy) { if (this.activeName == 1||this.activeName == 3) { - this.TasksCopy.push(object); + this.TasksCopy.push(this.object); } else { - this.TasksCopy.push(object); - this.TasksCopy.push(object); + this.TasksCopy.push(this.object); + this.TasksCopy.push(this.object); } } this.workers=res.data.workers?res.data.workers:[] @@ -931,7 +1048,7 @@ ...this.TasksCopy[i].Procedure.procedure, }, ]); - + if (this.TasksCopy[i].Procedure.ID) { startTask({ id: this.TasksCopy[i].Procedure.ID }).then((res) => { if (res.code == 200) { @@ -939,7 +1056,7 @@ this.TasksCopy[i].procedureList[0].push({ number: res.data.Number, }); - // this.TasksCopy[i].Arr=res.data.Params ? res.data.Params : [] + this.TasksCopy[i].Arr=res.data.Params ? res.data.Params : [] // this.isFinsh=Number(i)+1 } }); @@ -955,19 +1072,19 @@ }, 3000); } } - if (res.code != 200 || this.TasksCopy.length == 0) { - this.getcountdown(); - // 鎺у埗閲嶆柊璇锋眰getTaskInfo, 鍙紑鍚竴涓畾鏃跺櫒 - if (!this.cutdownTimer) { - this.cutdownTimer = setInterval(() => { - this.getcountdown(); - }, 60000); - } - } - this.cutClick(1) + // if (res.code != 200 || this.TasksCopy.length == 0) { + // this.getcountdown(); + // // 鎺у埗閲嶆柊璇锋眰getTaskInfo, 鍙紑鍚竴涓畾鏃跺櫒 + // if (!this.cutdownTimer) { + // this.cutdownTimer = setInterval(() => { + // this.getcountdown(); + // }, 60000); + // } + // } + this.cutClick(val?val:1) }); - // this.TasksCopy.push(object) - // this.TasksCopy.push(object) + // this.TasksCopy.push(this.object) + // this.TasksCopy.push(this.object) }, getStartArr(){ // for (let i in this.TasksCopy) { @@ -977,13 +1094,16 @@ // break; // } // } - getTaskUnStarted({page:1,pageSize:1}).then(res=>{ + getTaskInfo({taskMode:1}).then(res=>{ if(res.code==200){ this.taskData=res.data.Tasks?res.data.Tasks[0]:{}; - if (this.taskData.Procedure.ID) { + this.ArrError='' + if (Object.keys(this.taskData).length > 0 &&this.taskData.Procedure.ID) { startTask({ id: this.taskData.Procedure.ID }).then((res) => { if (res.code == 200) { this.Arr =res.data.Params ? res.data.Params : [] + }else{ + this.ArrError=res.msg?res.msg:'鑾峰彇宸ヨ壓鍙傛暟澶辫触锛�'; } }); } @@ -1006,7 +1126,7 @@ }); } } - + }, // 璁剧疆 setUrl() { @@ -1037,7 +1157,7 @@ finishTask({ id: taskData.Procedure.ID }).then((res) => { if (res.code == 200) { this.finishShow['finishShow&'+i] = false; - this.getTaskInfo(); + this.reloadPage(this.activeName?this.activeName:1); this.$message.success("鎿嶄綔鎴愬姛锛�"); } }); @@ -1064,7 +1184,7 @@ background:#12234a!important; color:#fff!important; border-color: #09e5ed !important; - + .popper__arrow::after{ border-top-color:#09e5ed !important; } @@ -1076,7 +1196,7 @@ color:#318583; } .el-empty{ - height:100%; + height:calc(100% - 190px); .el-empty__description p{ font-size:16px!important; color:#fff!important; @@ -1113,7 +1233,7 @@ box-sizing: border-box; border-right: 1px solid #eee; } - + .small_title { margin-bottom: 30px; } @@ -1169,7 +1289,7 @@ font-size:14px; } } - + .el-step{ .el-step__icon{ background:#00cc66; @@ -1357,8 +1477,7 @@ overflow-y:auto; } .el-carousel__item{ - // height:auto; - min-height:160px; + height:auto; } } .bottom-box-btn{ @@ -1366,6 +1485,10 @@ position:absolute; bottom:10px; left:10px; + .el-button{ + height: 40px; + + } } } @@ -1373,7 +1496,6 @@ font-size: 20px; } .right-small-btn { - margin-top: 10px; width: calc(100% - 20px); margin: 0 auto; position: absolute; @@ -1399,6 +1521,15 @@ border: 0; } } + .huise{ + width: 46%; + float: right; + } + .huise.el-button--primary { + background: #CCE8E8; + color: #AAAAAA; + border: 0; + } } .home { width: 100%; @@ -1535,6 +1666,12 @@ margin-top: 10px; color: #333; position: relative; + .font_dian{ + -webkit-box-orient:vertical; + overflow:hidden; + text-overflow:ellipsis; + white-space:nowrap; + } .card_top-2{ width:35%; } @@ -1656,12 +1793,7 @@ border-radius: 5px 5px 0 0; background: rgb(19, 35, 90); } - .font_dian{ - -webkit-box-orient:vertical; - overflow:hidden; - text-overflow:ellipsis; - white-space:nowrap; - } + .card_contentRight { width: 100%; @@ -1732,7 +1864,7 @@ display:inline-block; } } - + .yuandian { width: 25px; height: 25px; @@ -1815,7 +1947,7 @@ .right-base-btn { width: 100%; position: absolute; - bottom: 0; + bottom: 24px; left: 0; .el-button--primary { width: 100%; @@ -1825,6 +1957,10 @@ color: #fff; font-weight: 700; font-size: 18px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; } } // .call { @@ -1850,4 +1986,23 @@ font-weight: 700 !important; font-size: 16px; } +.process-params{ + margin-top: 10px; + border-radius: 5px; + overflow: hidden; + color: #fff; + font-size: 12px; + &-title{ + height: 25px; + padding: 0 5px; + background-color: #13235a; + line-height: 25px; + } + &-value{ + background-color: #6b83ff; + min-height: 45px; + box-sizing: border-box; + padding: 12px; + } +} </style> -- Gitblit v1.8.0