From a1a6630f2eabfc78a379b5808b1bf7231a084d0b Mon Sep 17 00:00:00 2001 From: haoxuan <haoxuan> Date: 星期三, 11 十月 2023 18:02:44 +0800 Subject: [PATCH] 工序弹框的 列表和详情的更新同步 --- src/views/visualization.vue | 432 +++++++++++++++++++++++++++++++++++++++++++---------- 1 files changed, 346 insertions(+), 86 deletions(-) diff --git a/src/views/visualization.vue b/src/views/visualization.vue index 9f3acd5..de42bc4 100644 --- a/src/views/visualization.vue +++ b/src/views/visualization.vue @@ -90,7 +90,7 @@ </span> --> </div> <div class="gongx"> - <el-steps v-if="taskData.AllProcedures" :active="taskData.CurrentProcedureIndex?taskData.CurrentProcedureIndex:0" finish-status="success" class="steps"> + <el-steps v-if="taskData.AllProcedures" :active="taskData.CurrentProcedureIndex ?? 0" finish-status="success" class="steps"> <el-step icon="" :title="item" v-for="(item,index) in taskData.AllProcedures" :key="index"></el-step> </el-steps> </div> @@ -124,6 +124,10 @@ </div> </div> <div class="content_right"> + <div class="gif" v-if="taskData.Procedure.ID" @click="processModelClick(taskData,index)"> + <img v-if="taskData.isUpdateIcon" src="../../public/shan.gif" /> + <span v-else class="yuandian"></span> + </div> <el-descriptions :column="(activeName == 1||activeName == 3) ? 2 : 1" :colon="true"> <el-descriptions-item label="浜у搧鍚嶇О">{{ taskData.Order.productName || "--" @@ -143,10 +147,10 @@ - {{ formatDate(taskData.Order.endTime) }}</el-descriptions-item > - <el-descriptions-item label="璐х墿鎻忚堪">{{ - taskData.Order.orderAttr || "--" - }}</el-descriptions-item> - <el-descriptions-item label="瀹㈡埛鍚嶇О">{{ + <el-descriptions-item label="閫氶亾"> + {{ channelNameConfig[taskData.Channel] || "--" }} + </el-descriptions-item> + <el-descriptions-item label="瀹㈡埛缂栫爜">{{ taskData.Order.customer || "--" }}</el-descriptions-item> <el-descriptions-item label="鍙傛暟瑕佹眰">{{ @@ -271,11 +275,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 }} --> @@ -333,24 +338,34 @@ <!-- <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> @@ -360,9 +375,9 @@ ></p> <div class="right-small-btn bottom-box-btn"> <el-button type="primary"> 鎵撳嵃</el-button> - <el-button v-if="taskData.Procedure.Status==3" type="primary" class="huise"> 瀹屾垚</el-button> + <el-popover - v-else + v-if="taskData.Procedure.Status && taskData.Procedure.Status!==3" placement="top-end" width="160" class="button-finish" @@ -385,6 +400,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> @@ -456,7 +472,7 @@ <template v-if="activeName == 2 &&(!taskData||Object.keys(taskData).length==0)" > - + <el-empty description="鏆傛棤浠诲姟..."></el-empty> </template> </div> @@ -495,7 +511,6 @@ <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> @@ -509,7 +524,7 @@ <div class="right-person-box" v-if="workers && workers.length > 0"> <dl class="right-small-person" - v-for="(item, index) in workers" + v-for="(item, index) in deduplicateWorkers(displayWorkers())" :key="index" > <dt> @@ -529,9 +544,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%; @@ -587,21 +602,20 @@ </div> </div> </div> - + </template> --> <!-- 鎺у埗鐨勫脊妗� --> - <AddControl ref="control" :Arr="Arr" /> - <!-- 鎺у埗鐨勫脊妗� --> - <AddIssue + <TaskControlModal ref="control" - :Arr="Arr" :activeName="activeName" - :ArrError="ArrError" - :safeProduce="safeProduce" - :taskData="taskData" - :Order="taskData.Order" @getSetProductNumber="reloadPage" @isTip="isTip" + /> + <!-- 宸ヨ壓妯″瀷 --> + <ProcessModel + ref="processModel" + :listData="listData" + @updateGet="updateGet" /> </div> </template> @@ -616,20 +630,28 @@ getProgress, countdown, getTaskUnStarted, + processModelList, } 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"; +import ProcessModel from "../components/ProcessModel.vue"; +import TaskControlModal from "@/components/TaskControlModal.vue"; +import {channelNameConfig} from "@/common/constants"; +import _ from 'lodash' export default { components: { + TaskControlModal, Card, Knowledge, AddControl, AddIssue, + ProcessModel, }, data() { return { + pollingTaskCountTimer: null, activeName: 1, progress: 70, //杩涘害 passrate: 30, //鍚堟牸鐜� @@ -639,6 +661,8 @@ // 鍙充晶瀹屾垚 finishShow:{}, workers:[], + // 淇濆瓨褰撳墠涓嶅悓閫氶亾鐨勫�肩彮浜� + channelWorkersMap:{0:[],1:[]}, TasksCopy:[], Tasks: [ { @@ -729,6 +753,7 @@ // 璁板綍瀹氭椂鍣ㄧ姸鎬� procInfoTimer: null, cutdownTimer: null, + ProcessModelTimer: null, TaskCount:0, plcStatus:0, isTipShow:false, @@ -746,6 +771,12 @@ outputMaterials: [], procedureList: [], }, + processList:[], + listData:[], + resResult:[], + resprocInfoTimer:null, + channelNameConfig: channelNameConfig, + index:null, }; }, mounted() { @@ -760,7 +791,17 @@ this.getDate3(); this.getDate2(); }, 5000); - this.getTaskInfo(); + + let channelType = this.getChannelTypeFromUrl() + channelType = channelType ?? 1 + this.activeName = channelType + this.getTaskInfo(channelType); + this.getTaskCountStatistics() + }, + beforeDestroy() { + clearTimeout(this.pollingTaskCountTimer) + clearTimeout(this.procInfoTimer) + clearTimeout(this.ProcessModelTimer) }, watch:{ // isFinsh(){ @@ -770,10 +811,86 @@ // } }, methods: { + deduplicateWorkers(workers){ + return _.uniqBy(workers,ele=>ele.workerName) + }, + updateGet(number,val){ + if(val){ + this.getTaskInfo(this.activeName,'new') + return true; + } + this.listData.number=number + if(this.index){ + this.TasksCopy[this.index].number=number + } + }, + getModelList(){ + for (let i in this.TasksCopy){ + this.TasksCopy[i].isUpdateIcon=false; + if(this.TasksCopy[i].Procedure.ID&&this.TasksCopy[i].number){ + processModelList({ + procedureId: this.TasksCopy[i].Procedure.ID, + page: 1, + pageSize:6, + number:this.TasksCopy[i].number + }).then(res=>{ + if(res.code==200){ + this.processList=res.data?res.data:[]; + if(this.processList.length>0){ + for(let j in this.processList){ + if(this.processList[j].isUpdate){ + this.TasksCopy[i].isUpdateIcon=true; + this.$forceUpdate() + break; + } + } + } + } + this.resResult[i]=res; + console.log( this.resResult[i],'===res111') + }) + } + } + }, + processModelClick(list,index){ + this.listData=list; + this.index=index + if( Object.keys(this.listData).length > 0){ + if(this.listData.Procedure.ID&&this.listData.number){ + this.$refs.processModel.islook=true + return true; + } + } + this.$message.error('褰撳墠宸ュ簭鏃犵紪鍙凤紝鏃犳硶鏌ョ湅宸ュ簭!') + }, + getProcessModelList(){ + this.getModelList() + let string=false; + if(this.resResult.length>0){ + for(let i in this.resResult){ + if(this.resResult[i]){ + string=false; + } + } + } + if (!this.ProcessModelTimer&&!string) { + this.ProcessModelTimer = setInterval(() => { + this.resResult=[] + this.getModelList(); + }, 5000) + } + }, + 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({ message:'鐩墠娌℃湁浠诲姟锛�', @@ -787,6 +904,7 @@ }, cutClick(val) { this.activeName = val; + this.updateChannelTypeToUrl(val) if(this.activeName==2){ this.Tasks=this.TasksCopy.slice(0,2) if(this.Tasks.length<2){ @@ -829,7 +947,6 @@ } }); }, - getDateObj(date, fmt) { if (/(y+)/.test(fmt)) { fmt = fmt.replace( @@ -892,7 +1009,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 @@ -943,26 +1060,64 @@ } }, - getTaskInfo(val) { + /** + * 杞鑾峰彇浠诲姟鏁伴噺 + */ + 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) + }); + }, + + /** + * 鏍规嵁褰撳墠灞曠ず鐨勬槸0閫氶亾杩樻槸1閫氶亾杩樻槸涓や釜閫氶亾灞曠ず瀵瑰簲鐨勫�肩彮浜� + * @return {*[]} + */ + displayWorkers(){ + let showWorkers = [] + if (this.activeName===1){ + showWorkers =[...this.channelWorkersMap[0]] + }else if (this.activeName===2){ + showWorkers =[...this.channelWorkersMap[0],...this.channelWorkersMap[1]] + }else if (this.activeName===3){ + showWorkers =[...this.channelWorkersMap[1]] + }else { + return [] + } + + return showWorkers + }, + + getTaskInfo(val,info) { this.Tasks = []; this.TasksCopy=[] getTaskInfo({taskMode:2}).then((res) => { if (res.code == 200&&res.data) { - let arr=[] + // let arr=[] if(res.data.Tasks){ - arr.sort(function(a,b){ + res.data.Tasks.sort(function(a,b){ return (a.Channel - b.Channel) }) } 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(this.object) // } this.TaskCount=res.data.TaskCount?res.data.TaskCount:0 - + if ((this.TasksCopy.length ==0 )||!this.TasksCopy) { if (this.activeName == 1||this.activeName == 3) { this.TasksCopy.push(this.object); @@ -972,11 +1127,23 @@ } } this.workers=res.data.workers?res.data.workers:[] + + // 灏嗗�肩彮浜烘牴鎹�氶亾鍙峰垎缁� + const groupByChannel= _.groupBy(res.data.Tasks,ele=>ele.Channel) + const taskList0= _.first(groupByChannel[0]) + const taskList1= _.first(groupByChannel[1]) + const worker0List = taskList0?.Procedure?.procedure?.workers ?? [] + const worker1List = taskList1?.Procedure?.procedure?.workers ?? [] + this.channelWorkersMap['0'] =worker0List + this.channelWorkersMap['1'] =worker1List + for (let i in this.TasksCopy) { this.TasksCopy[i].procedureList = []; this.TasksCopy[i].inputMaterials = []; this.TasksCopy[i].outputMaterials = []; this.TasksCopy[i].finishNumber = 0; + this.TasksCopy[i].number=0; + this.TasksCopy[i].isUpdateIcon=false; this.finishShow['finishShow&'+i]=false this.TasksCopy[i].Procedure.procedure.workers = this.TasksCopy[i].Procedure .procedure.workers @@ -989,29 +1156,37 @@ ...this.TasksCopy[i].Procedure.procedure, }, ]); - + if (this.TasksCopy[i].Procedure.ID) { startTask({ id: this.TasksCopy[i].Procedure.ID }).then((res) => { if (res.code == 200) { + this.TasksCopy[i].number=res.data.Number // res.data.number 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 + this.$forceUpdate() } }); } this.setInterCard("inputMaterials", "cardBox1&" + i, i); this.setInterCard("outputMaterials", "cardBox3&" + i, i); } + this.getProcessModelList(); this.getStartArr() + this.cutClick(val?val:1) + if(info=='new'){ + return true; + } + this.getProgressInfo(); - if (!this.procInfoTimer) { + if (!this.procInfoTimer&&!this.resprocInfoTimer) { this.procInfoTimer = setInterval(() => { this.getProgressInfo(); }, 3000); - } + } } // if (res.code != 200 || this.TasksCopy.length == 0) { // this.getcountdown(); @@ -1022,7 +1197,7 @@ // }, 60000); // } // } - this.cutClick(val?val:1) + }); // this.TasksCopy.push(this.object) // this.TasksCopy.push(this.object) @@ -1051,7 +1226,29 @@ } }) }, + /** + * 鍚慤RL涓缃綋鍓嶉�氶亾灞曠ず绫诲瀷 + * @param {number} type 閫氶亾灞曠ず绫诲瀷 + */ + updateChannelTypeToUrl(type){ + const activeName = this.getChannelTypeFromUrl(); + if (activeName === type){ + return + } + let path = this.$router.history.current.path + this.$router.push({path, query: {activeName: `${type ?? 1}`}}) + }, + /** + * 浠嶶RL鑾峰彇褰撳墠閫氶亾灞曠ず绫诲瀷 + * @return {number} + */ + getChannelTypeFromUrl(){ + let activeName = new URLSearchParams(location.search).get('activeName') + activeName = activeName ? +activeName : undefined + return activeName + }, getProgressInfo() { + this.resprocInfoTimer=null for (let i in this.TasksCopy){ if(this.TasksCopy[i].Procedure.ID){ getProgress({ @@ -1064,10 +1261,10 @@ : 0; this.plcStatus=res.data.plcStatus?res.data.plcStatus:0 } + this.resprocInfoTimer=res; }); } } - }, // 璁剧疆 setUrl() { @@ -1098,7 +1295,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("鎿嶄綔鎴愬姛锛�"); } }); @@ -1125,7 +1322,7 @@ background:#12234a!important; color:#fff!important; border-color: #09e5ed !important; - + .popper__arrow::after{ border-top-color:#09e5ed !important; } @@ -1174,7 +1371,7 @@ box-sizing: border-box; border-right: 1px solid #eee; } - + .small_title { margin-bottom: 30px; } @@ -1230,7 +1427,7 @@ font-size:14px; } } - + .el-step{ .el-step__icon{ background:#00cc66; @@ -1241,19 +1438,47 @@ } } } - .el-step__head.is-process{ - color: #00cc66 !important; - border-color:#00cc66; - } - .el-step__title.is-process{ - color: #00cc66 !important; - } .el-step__head.is-wait{ color:#fff; border-color:#fff; } .el-step__title.is-wait{ color:#fff; + } + + // 浣挎楠ゆ潯鑺傜偣鐘舵�佹垚鍔熸椂,鍓嶉潰鐨勭嚎鍚屾鏇存敼棰滆壊 + .steps{ + /* 杩涜涓姸鎬侊細鍦堢嚎 */ + & .el-step__head.is-process { + color: #00cc66; + border-color: #00cc66; + } + /* 杩涜涓姸鎬侊細鍦堝唴 */ + & .el-step__head.is-process > .el-step__icon { + background: #00cc66; + color: #00cc66; + } + /* 杩涜涓姸鎬侊細title锛堟枃瀛楋級 */ + & .el-step__title.is-process { + color: #00cc66; + } + + /* 瀹屾垚鐘舵�侊細鍦堢嚎 */ + & .el-step__head.is-success { + color: #00cc66; + border-color: #00cc66; + } + /* 瀹屾垚鐘舵�侊細title锛堟枃瀛楋級 */ + & .el-step__title.is-success { + color: #00cc66; + } + /* 瀹屾垚鐘舵�侊細line + * 鎻忚堪锛氱涓�姝ュ畬鎴愶紝绗簩姝ヨ繘琛屾椂锛屼箣闂寸殑杩涘害鏉℃湁棰滆壊 + */ + & .el-step__head.is-success > .el-step__line > .el-step__line-inner { + width: 100% !important; + border-width: 1px !important; + } } } .set-title { @@ -1358,6 +1583,16 @@ background: #09e5ed !important; color: #333 !important; } +.yuandian { + width: 35px; + height: 35px; + display:inline-block; + // background: #15d815; + background:red; + border-radius: 50%; + // margin-top:-5px; + vertical-align: middle; + } .bottom_list { position: relative; padding: 10px; @@ -1418,8 +1653,7 @@ overflow-y:auto; } .el-carousel__item{ - // height:auto; - min-height:160px; + height:auto; } } .bottom-box-btn{ @@ -1427,6 +1661,10 @@ position:absolute; bottom:10px; left:10px; + .el-button{ + height: 40px; + + } } } @@ -1434,7 +1672,6 @@ font-size: 20px; } .right-small-btn { - margin-top: 10px; width: calc(100% - 20px); margin: 0 auto; position: absolute; @@ -1549,7 +1786,7 @@ width: 100%; height: 30px; // text-align: left; - font-size: 24px; + font-size: 28px!important; margin: 0; text-align: center; line-height: 36px; @@ -1562,6 +1799,18 @@ padding: 0 10px; background: rgb(22 72 173); border-radius: 6px; + position:relative; + .gif{ + position:absolute; + right:15px; + top:10px; + width:35px; + vertical-align: middle; + cursor:pointer; + img{ + width:100%; + } + } // background: #233b9e; .el-descriptions-row{ height:45px; @@ -1612,11 +1861,11 @@ white-space:nowrap; } .card_top-2{ - width:35%; + width:38%; } .card-top-input-out-r, .card_top-3 { - width:65%; + width:62%; } .card_top-2,.card-top-input-out-r, .card_top-3 { @@ -1732,7 +1981,7 @@ border-radius: 5px 5px 0 0; background: rgb(19, 35, 90); } - + .card_contentRight { width: 100%; @@ -1802,18 +2051,6 @@ // float:left; display:inline-block; } - } - - .yuandian { - width: 25px; - height: 25px; - line-height: 40px; - margin-top: 12.5px; - display: inline-block; - background: #15d815; - display: block; - border-radius: 50%; - float: right; } } .right-top-m-btn { @@ -1886,7 +2123,7 @@ .right-base-btn { width: 100%; position: absolute; - bottom: 0; + bottom: 24px; left: 0; .el-button--primary { width: 100%; @@ -1896,6 +2133,10 @@ color: #fff; font-weight: 700; font-size: 18px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; } } // .call { @@ -1921,4 +2162,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