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 | 360 +++++++++++++++++++++++++++++++++++++++++++++++------------ 1 files changed, 286 insertions(+), 74 deletions(-) diff --git a/src/views/visualization.vue b/src/views/visualization.vue index 9599ef7..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> @@ -496,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> @@ -510,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> @@ -591,8 +605,6 @@ </template> --> <!-- 鎺у埗鐨勫脊妗� --> - <AddControl ref="control" :Arr="Arr" /> - <!-- 鎺у埗鐨勫脊妗� --> <TaskControlModal ref="control" :activeName="activeName" @@ -602,7 +614,8 @@ <!-- 宸ヨ壓妯″瀷 --> <ProcessModel ref="processModel" - :processList="processList" + :listData="listData" + @updateGet="updateGet" /> </div> </template> @@ -617,6 +630,7 @@ getProgress, countdown, getTaskUnStarted, + processModelList, } from "@/api/home/index"; // 浜х嚎 import Card from "@/components/Card.vue"; import Knowledge from "../components/Knowledge.vue"; @@ -624,6 +638,8 @@ 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, @@ -645,6 +661,8 @@ // 鍙充晶瀹屾垚 finishShow:{}, workers:[], + // 淇濆瓨褰撳墠涓嶅悓閫氶亾鐨勫�肩彮浜� + channelWorkersMap:{0:[],1:[]}, TasksCopy:[], Tasks: [ { @@ -735,6 +753,7 @@ // 璁板綍瀹氭椂鍣ㄧ姸鎬� procInfoTimer: null, cutdownTimer: null, + ProcessModelTimer: null, TaskCount:0, plcStatus:0, isTipShow:false, @@ -752,16 +771,12 @@ outputMaterials: [], procedureList: [], }, - processList:[ - { - name:'浜у搧1+宸ヨ壓2', - number:'v1.0' - }, - { - name:'浜у搧1+宸ヨ壓2', - number:'v2.0' - } - ] + processList:[], + listData:[], + resResult:[], + resprocInfoTimer:null, + channelNameConfig: channelNameConfig, + index:null, }; }, mounted() { @@ -776,11 +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(){ @@ -790,6 +811,82 @@ // } }, 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() @@ -807,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){ @@ -849,9 +947,6 @@ } }); }, - - - getDateObj(date, fmt) { if (/(y+)/.test(fmt)) { fmt = fmt.replace( @@ -984,14 +1079,33 @@ }); }, - getTaskInfo(val) { + /** + * 鏍规嵁褰撳墠灞曠ず鐨勬槸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) }) } @@ -1013,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 @@ -1034,25 +1160,33 @@ 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(); @@ -1063,7 +1197,7 @@ // }, 60000); // } // } - this.cutClick(val?val:1) + }); // this.TasksCopy.push(this.object) // this.TasksCopy.push(this.object) @@ -1092,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({ @@ -1105,10 +1261,10 @@ : 0; this.plcStatus=res.data.plcStatus?res.data.plcStatus:0 } + this.resprocInfoTimer=res; }); } } - }, // 璁剧疆 setUrl() { @@ -1282,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 { @@ -1399,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; @@ -1459,8 +1653,7 @@ overflow-y:auto; } .el-carousel__item{ - // height:auto; - min-height:160px; + height:auto; } } .bottom-box-btn{ @@ -1593,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; @@ -1606,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; @@ -1656,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 { @@ -1847,18 +2052,6 @@ 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 { margin-top: 10px; @@ -1969,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