From f9625961d0678f81b9ce8e1d4a933c73b7fd4209 Mon Sep 17 00:00:00 2001 From: songshankun <songshankun@foxmail.com> Date: 星期四, 19 十月 2023 17:43:35 +0800 Subject: [PATCH] feat: 生产目标数首次是来源于下发的任务,然后需要显示从PLC获取的目标数 --- src/views/visualization.vue | 446 ++++++++++++++++++++++++++++++++++++++++--------------- 1 files changed, 323 insertions(+), 123 deletions(-) diff --git a/src/views/visualization.vue b/src/views/visualization.vue index 2f1579e..2523cc2 100644 --- a/src/views/visualization.vue +++ b/src/views/visualization.vue @@ -31,7 +31,7 @@ </span> </span> </template> - 鐢熶骇绠$悊鐪嬫澘 + 鏅鸿兘宸ヤ綔鍙� <span class="font el-icon-setting set-title" style="float: right" @@ -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> @@ -104,7 +104,7 @@ style="font-size: 35px; font-weight: 600" class="color_green" > - {{ taskData.finishNumber || 0 }}{{ taskData.Order.unit }} + {{ processingStatistics(taskData).finishNumber }}{{ taskData.Order.unit }} </dd> </dl> </div> @@ -117,15 +117,15 @@ style="font-size: 35px; font-weight: 600" class="color_green" > - {{ taskData.Order.amount || 0 }}{{ taskData.Order.unit }} + {{ processingStatistics(taskData).totalNumber }}{{ taskData.Order.unit }} </dd> </dl> </div> </div> </div> <div class="content_right"> - <div class="gif" v-if="taskData.Procedure.ID" @click="processModelClick(taskData)"> - <img v-if="isUpdateIcon" src="../../public/shan.gif" /> + <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"> @@ -147,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="鍙傛暟瑕佹眰">{{ @@ -166,16 +166,7 @@ text-color="#fff" :text-inside="true" :stroke-width="30" - :percentage=" - (taskData.Order && taskData.finishNumber != 0 && taskData.Order.amount) - ? parseInt( - (taskData.finishNumber / taskData.Order.amount) * - 100 - )>100?100:parseInt( - (taskData.finishNumber / taskData.Order.amount) * - 100 - ): 0 - " + :percentage="calculateProgress(processingStatistics(taskData))" ></el-progress> </el-descriptions-item> <!-- <el-descriptions-item label="鍚堟牸鐜�" style="width: 100%"> @@ -275,11 +266,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 }} --> @@ -296,15 +288,7 @@ </div> <div class="card_top-3"> <span class="card-top-r-t" - >瀹屾垚杩涘害锛歿{ - (taskData.Order && taskData.finishNumber != 0 && taskData.Order.amount) - ? parseInt( - (taskData.finishNumber / - taskData.Order.amount) * - 100 - ) - : 0 - }}</span + >瀹屾垚杩涘害锛歿{calculateProgress(processingStatistics(taskData))}}</span > <span class="card-top-r-b"> <el-progress @@ -313,19 +297,7 @@ text-color="#fff" :text-inside="true" :stroke-width="10" - :percentage=" - (taskData.Order && taskData.finishNumber != 0) - ? parseInt( - (taskData.finishNumber / - taskData.Order.amount) * - 100 - )>100?100:parseInt( - (taskData.finishNumber / - taskData.Order.amount) * - 100 - ) - : 0 - " + :percentage="calculateProgress(processingStatistics(taskData))" :show-text="false" ></el-progress> </span> @@ -337,24 +309,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> @@ -364,9 +346,9 @@ ></p> <div class="right-small-btn bottom-box-btn"> <el-button type="primary"> 鎵撳嵃</el-button> - + <el-popover - v-if="taskData.Procedure.Status!=3&&taskData.Procedure.ID" + v-if="taskData.Procedure.Status && taskData.Procedure.Status!==3" placement="top-end" width="160" class="button-finish" @@ -461,7 +443,7 @@ <template v-if="activeName == 2 &&(!taskData||Object.keys(taskData).length==0)" > - + <el-empty description="鏆傛棤浠诲姟..."></el-empty> </template> </div> @@ -513,7 +495,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> @@ -533,9 +515,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%; @@ -591,19 +573,12 @@ </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" /> @@ -611,6 +586,7 @@ <ProcessModel ref="processModel" :listData="listData" + @updateGet="updateGet" /> </div> </template> @@ -632,8 +608,12 @@ 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, @@ -642,6 +622,7 @@ }, data() { return { + pollingTaskCountTimer: null, activeName: 1, progress: 70, //杩涘害 passrate: 30, //鍚堟牸鐜� @@ -651,6 +632,8 @@ // 鍙充晶瀹屾垚 finishShow:{}, workers:[], + // 淇濆瓨褰撳墠涓嶅悓閫氶亾鐨勫�肩彮浜� + channelWorkersMap:{0:[],1:[]}, TasksCopy:[], Tasks: [ { @@ -760,10 +743,11 @@ procedureList: [], }, processList:[], - isUpdateIcon:false, listData:[], - resResult:null, + resResult:[], resprocInfoTimer:null, + channelNameConfig: channelNameConfig, + index:null, }; }, mounted() { @@ -778,7 +762,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(){ @@ -788,9 +782,67 @@ // } }, methods: { + processingStatistics(taskData){ + const status = taskData?.Procedure?.Status; + // 濡傛灉status = 2 鍔犲伐涓�, 鍒欏姞宸ユ暟鍜岀洰鏍囨暟搴斿彇杞鎺ュ彛涓殑 finishNumber 鍜� totalNumber + // 濡傛灉status = 1 鏈紑濮�, 鐩爣鏁� 鍙� taskData.Order.amount 鍔犲伐鏁板彇 0 + // 濡傛灉status = 3 宸插畬鎴�, 鐩爣鏁板拰鍔犲伐鏁伴兘鍙� amount + let finishNumber = 0; + let totalNumber = 0; + if (status === 1){ + totalNumber = taskData?.Order?.amount ?? 0 + finishNumber = 0 + }else if (status === 2){ + totalNumber = taskData?.totalNumber ?? 0 + finishNumber = taskData?.finishNumber ?? 0 + }else if (status === 3){ + totalNumber = taskData?.Order?.amount ?? 0 + finishNumber = taskData?.Order?.amount ?? 0 + } + + console.log({ + /** 鐩爣鏁� */ + totalNumber: +totalNumber, + /** 鍔犲伐鏁� */ + finishNumber: +finishNumber, + }) + + return { + /** 鐩爣鏁� */ + totalNumber: +totalNumber, + /** 鍔犲伐鏁� */ + finishNumber: +finishNumber, + } + }, + /** + * 璁$畻鐢熶骇杩涘害 + * @param statistics + * @return {number} 杩涘害,0~100 + */ + calculateProgress(statistics){ + if (statistics.finishNumber === statistics.totalNumber){ + return 100 + } + + const result = Math.floor(statistics.finishNumber / statistics.totalNumber * 100) + return result > 100 ? 100 : result + }, + 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(){ - this.resResult=null 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, @@ -801,21 +853,24 @@ if(res.code==200){ this.processList=res.data?res.data:[]; if(this.processList.length>0){ - for(let i in this.processList){ - if(this.processList[i].isUpdate){ - this.isUpdateIcon=true; + for(let j in this.processList){ + if(this.processList[j].isUpdate){ + this.TasksCopy[i].isUpdateIcon=true; + this.$forceUpdate() break; } - } + } } } - this.resResult=res; + this.resResult[i]=res; + console.log( this.resResult[i],'===res111') }) } } }, - processModelClick(list){ + 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 @@ -823,20 +878,35 @@ } } this.$message.error('褰撳墠宸ュ簭鏃犵紪鍙凤紝鏃犳硶鏌ョ湅宸ュ簭!') - }, getProcessModelList(){ this.getModelList() - if (!this.ProcessModelTimer&&!this.resResult) { + 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(); - }, 10000) + }, 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:'鐩墠娌℃湁浠诲姟锛�', @@ -850,6 +920,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){ @@ -892,7 +963,6 @@ } }); }, - getDateObj(date, fmt) { if (/(y+)/.test(fmt)) { fmt = fmt.replace( @@ -955,7 +1025,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 @@ -1006,26 +1076,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); @@ -1035,12 +1143,24 @@ } } 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].totalNumber = 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 @@ -1053,7 +1173,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) { @@ -1062,22 +1182,28 @@ 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&&!this.resprocInfoTimer) { this.procInfoTimer = setInterval(() => { this.getProgressInfo(); }, 3000); } - this.getProcessModelList(); } // if (res.code != 200 || this.TasksCopy.length == 0) { // this.getcountdown(); @@ -1088,7 +1214,7 @@ // }, 60000); // } // } - this.cutClick(val?val:1) + }); // this.TasksCopy.push(this.object) // this.TasksCopy.push(this.object) @@ -1117,6 +1243,27 @@ } }) }, + /** + * 鍚慤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){ @@ -1126,10 +1273,9 @@ procedureId: this.TasksCopy[i].Procedure.ID, }).then((res) => { if (res.code == 200) { - this.TasksCopy[i].finishNumber = res.data.finishNumber - ? res.data.finishNumber - : 0; - this.plcStatus=res.data.plcStatus?res.data.plcStatus:0 + this.TasksCopy[i].finishNumber = res.data?.finishNumber ?? 0; + this.TasksCopy[i].totalNumber = res.data?.totalNumber ?? 0; + this.plcStatus = res.data?.plcStatus ?? 0 } this.resprocInfoTimer=res; }); @@ -1192,7 +1338,7 @@ background:#12234a!important; color:#fff!important; border-color: #09e5ed !important; - + .popper__arrow::after{ border-top-color:#09e5ed !important; } @@ -1241,7 +1387,7 @@ box-sizing: border-box; border-right: 1px solid #eee; } - + .small_title { margin-bottom: 30px; } @@ -1297,7 +1443,7 @@ font-size:14px; } } - + .el-step{ .el-step__icon{ background:#00cc66; @@ -1308,19 +1454,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 { @@ -1495,8 +1669,7 @@ overflow-y:auto; } .el-carousel__item{ - // height:auto; - min-height:160px; + height:auto; } } .bottom-box-btn{ @@ -1504,6 +1677,10 @@ position:absolute; bottom:10px; left:10px; + .el-button{ + height: 40px; + + } } } @@ -1511,7 +1688,6 @@ font-size: 20px; } .right-small-btn { - margin-top: 10px; width: calc(100% - 20px); margin: 0 auto; position: absolute; @@ -1626,7 +1802,7 @@ width: 100%; height: 30px; // text-align: left; - font-size: 24px; + font-size: 28px!important; margin: 0; text-align: center; line-height: 36px; @@ -1646,6 +1822,7 @@ top:10px; width:35px; vertical-align: middle; + cursor:pointer; img{ width:100%; } @@ -1700,11 +1877,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 { @@ -1820,7 +1997,7 @@ border-radius: 5px 5px 0 0; background: rgb(19, 35, 90); } - + .card_contentRight { width: 100%; @@ -1962,7 +2139,7 @@ .right-base-btn { width: 100%; position: absolute; - bottom: 0; + bottom: 24px; left: 0; .el-button--primary { width: 100%; @@ -1972,6 +2149,10 @@ color: #fff; font-weight: 700; font-size: 18px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; } } // .call { @@ -1997,4 +2178,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