| | |
| | | |
| | | <template> |
| | | <div class="home"> |
| | | <!-- v-if="Object.keys(taskData).length > 0 && taskData.Procedure.ID" --> |
| | | <template> |
| | | <!-- --> |
| | | <template v-if="Tasks&&Tasks.length>0"> |
| | | <div class="left"> |
| | | <p class="title"> |
| | | <span |
| | |
| | | style="float: right;margin-right:20px;font-size:28px;line-height:25px;" |
| | | @click="taskClick" |
| | | > |
| | | <el-badge :value="TaskCount" :class="TaskCount==0?'item color_666':'item color_fff'"> |
| | | <el-badge :value="TaskCount" :class="(TaskCount==0||isTipShow)?'item color_666':'item color_fff'"> |
| | | <i class="el-icon-chat-dot-round" /> |
| | | </el-badge> |
| | | </span> |
| | |
| | | v-for="(taskData, index) in Tasks" |
| | | :key="index" |
| | | > |
| | | <template v-if="taskData"> |
| | | <div class="gong-date"> |
| | | 工序运行时间:{{ getFormatTime(taskData.Procedure.startTime) }} |
| | | </div> |
| | |
| | | <span class="title-item" |
| | | >工单编号: |
| | | <span class="color_4efefa">{{ |
| | | taskData.Order.workOrderId || "" |
| | | taskData.Order.workOrderId || "--" |
| | | }}</span> |
| | | </span> |
| | | <span class="title-item" |
| | | >当前工序: |
| | | <span class="color_4efefa">{{ |
| | | taskData.Procedure.procedure.procedureName || "" |
| | | taskData.Procedure.procedure.procedureName || "--" |
| | | }}</span> |
| | | </span> |
| | | <span class="title-item" |
| | |
| | | </span> |
| | | </span> --> |
| | | </div> |
| | | <div class="gongx" v-if="taskData.AllProcedures"> |
| | | <el-steps :active="taskData.CurrentProcedureIndex?taskData.CurrentProcedureIndex:0" finish-status="success" class="steps"> |
| | | <div class="gongx"> |
| | | <el-steps v-if="taskData.AllProcedures" :active="taskData.CurrentProcedureIndex?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> |
| | | <div class="content"> |
| | | <div class="content_left"> |
| | | <div class="content-top"> |
| | | <div class="small_title">当前完成</div> |
| | | <div class="small_title">加工数</div> |
| | | <div class="content_leftBttom"> |
| | | <dl> |
| | | <dd |
| | |
| | | </div> |
| | | </div> |
| | | <div class="content-top"> |
| | | <div class="small_title">正品生产</div> |
| | | <div class="small_title">目标数</div> |
| | | <div class="content_leftBttom"> |
| | | <dl> |
| | | <dd |
| | |
| | | ? parseInt( |
| | | (taskData.finishNumber / taskData.Order.amount) * |
| | | 100 |
| | | ) |
| | | : 0 |
| | | )>100?100:parseInt( |
| | | (taskData.finishNumber / taskData.Order.amount) * |
| | | 100 |
| | | ): 0 |
| | | " |
| | | ></el-progress> |
| | | </el-descriptions-item> |
| | |
| | | > |
| | | <template v-if="list.name == '工序'"> |
| | | <div class="card_content"> |
| | | <div class="card_contentLeft color_blue"> |
| | | {{ list.deviceName }} |
| | | <div class="card_contentLeft color_blue font_dian"> |
| | | <!-- {{ list.deviceName }} --> |
| | | <el-tooltip |
| | | effect="dark" |
| | | popper-class="tooltip-width-200" |
| | | :content="list.deviceName" |
| | | placement="top-start" |
| | | > |
| | | <span>{{ list.deviceName }}</span> |
| | | </el-tooltip> |
| | | <!-- <span style="float: right">6m/s</span> --> |
| | | </div> |
| | | </div> |
| | |
| | | (taskData.finishNumber / |
| | | taskData.Order.amount) * |
| | | 100 |
| | | ) |
| | | )>100?100:parseInt( |
| | | (taskData.finishNumber / |
| | | taskData.Order.amount) * |
| | | 100 |
| | | ) |
| | | : 0 |
| | | " |
| | | :show-text="false" |
| | |
| | | <!-- <div class="card_content"> |
| | | |
| | | </div> --> |
| | | <div class="card_top-4"> |
| | | <div>工艺编号:{{ list.number }}</div> |
| | | <div :class="activeName==1?'card_top-4 font_size_20px':'card_top-4'"> |
| | | <div>工艺编号:<div >{{ list.number }}</div></div> |
| | | <!-- <div |
| | | style=" |
| | | font-size: 14px; |
| | |
| | | > |
| | | </div> |
| | | </div> |
| | | </template> |
| | | <!-- 2个任务的时候,第二个任务为空的时候显示 --> |
| | | <template |
| | | v-if="activeName == 2 &&(!taskData||Object.keys(taskData).length==0)" |
| | | > |
| | | <el-empty description="暂无任务..."></el-empty> |
| | | </template> |
| | | </div> |
| | | </div> |
| | | <div class="right"> |
| | |
| | | style="font-size: 20px; font-weight: 600; margin-right: 10px" |
| | | >{{ item.workerName || "" }}</span |
| | | > |
| | | <span>{{ item.phoneNum || "" }}</span> |
| | | <!-- <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%; |
| | |
| | | </div> |
| | | </div> |
| | | </template> |
| | | <!-- v-else --> |
| | | <template> |
| | | <!-- --> |
| | | <template v-else> |
| | | <div class="home-img-box"> |
| | | <div class="bg-title"> |
| | | <img src="../../public/bg-title.png" /> |
| | |
| | | :taskData="taskData" |
| | | :Order="taskData.Order" |
| | | @getSetProductNumber="getTaskInfo" |
| | | @isTip="isTip" |
| | | /> |
| | | </div> |
| | | </template> |
| | |
| | | cutdownTimer: null, |
| | | TaskCount:0, |
| | | plcStatus:1, |
| | | isTipShow:false, |
| | | }; |
| | | }, |
| | | mounted() { |
| | |
| | | methods: { |
| | | taskClick(){ |
| | | if(this.TaskCount>0){ |
| | | this.$refs.control.islook=true |
| | | for(let i in this.Tasks){ |
| | | if(this.Tasks[i].Procedure.Status==1){ |
| | | this.isTipShow=false |
| | | break; |
| | | } |
| | | } |
| | | if(!this.isTipShow){ |
| | | this.$refs.control.islook=true |
| | | } |
| | | }else{ |
| | | this.$message.error('目前没有任务!') |
| | | } |
| | | }, |
| | | isTip(val){ |
| | | this.isTipShow=val |
| | | }, |
| | | cutClick(val) { |
| | | this.activeName = val; |
| | |
| | | return d; |
| | | }, |
| | | setInterCard(value, name, i) { |
| | | if (this.Tasks[i].Procedure.procedure[value]) { |
| | | if (this.Tasks[i].Procedure.procedure[value]!=null) { |
| | | let height = 200; |
| | | let num = 1; |
| | | if (this.$refs[name]) { |
| | | height = this.$refs[name].$el.offsetHeight; |
| | | height = this.$refs[name].$el?this.$refs[name].$el.offsetHeight:200; |
| | | num = Math.floor(height / 80); |
| | | } |
| | | let inputMaterials = JSON.parse( |
| | |
| | | }, |
| | | inputMaterials: [], |
| | | outputMaterials: [], |
| | | procedureList: [], |
| | | procedureList: [ |
| | | // [ |
| | | // { |
| | | // name:"工序", |
| | | // deviceName:'1111dhafjdhajkhf jkdahjkf打法即可打開鏈接肯德基啊看來jdad大风京东卡老司机番窠倒臼开了房金阿奎第十六届反馈拉德斯基k打卡机阿珂附件打开了点击阿里卡减肥的卡拉胶开了房大街上克隆fk啦大家防空雷達數據看i' |
| | | // }, |
| | | // ] |
| | | ], |
| | | }; |
| | | this.Tasks = []; |
| | | getTaskInfo({ page: 1, pageSize: this.activeName }).then((res) => { |
| | |
| | | }) |
| | | } |
| | | this.Tasks = res.data.Tasks ? res.data.Tasks : []; |
| | | |
| | | this.TaskCount=res.data.TaskCount?res.data.TaskCount:0 |
| | | this.workers=res.data.workers?res.data.workers:[] |
| | | if (this.Tasks.length == 0) { |
| | | if (this.activeName == 1) { |
| | | this.Tasks.push(object); |
| | | } else { |
| | | this.Tasks.push(object); |
| | | this.Tasks.push(object); |
| | | } |
| | | } |
| | | for (let i in this.Tasks) { |
| | | this.Tasks[i].procedureList = []; |
| | | this.Tasks[i].inputMaterials = []; |
| | |
| | | }, 9000); |
| | | } |
| | | } |
| | | if (this.Tasks.length == 0) { |
| | | if (this.activeName == 1) { |
| | | this.Tasks.push(object); |
| | | } else { |
| | | this.Tasks.push(object); |
| | | this.Tasks.push(object); |
| | | } |
| | | } |
| | | if (res.code != 200 || this.Tasks.length == 0) { |
| | | this.getcountdown(); |
| | | // 控制重新请求getTaskInfo, 只开启一个定时器 |
| | |
| | | } |
| | | } |
| | | }); |
| | | |
| | | // this.Tasks.push(object) |
| | | // this.Tasks.push(object) |
| | | }, |
| | | getStartArr(){ |
| | | for (let i in this.Tasks) { |
| | |
| | | }, |
| | | getProgressInfo() { |
| | | for (let i in this.Tasks){ |
| | | getProgress({ |
| | | position: Number(i), |
| | | procedureId: this.Tasks[i].Procedure.ID, |
| | | }).then((res) => { |
| | | if (res.code == 200) { |
| | | this.Tasks[i].finishNumber = res.data.finishNumber |
| | | ? res.data.finishNumber |
| | | : 0; |
| | | this.plcStatus=res.data.plcStatus?res.data.plcStatus:1 |
| | | } |
| | | }); |
| | | if(this.Tasks[i].Procedure.ID){ |
| | | getProgress({ |
| | | position: Number(i), |
| | | procedureId: this.Tasks[i].Procedure.ID, |
| | | }).then((res) => { |
| | | if (res.code == 200) { |
| | | this.Tasks[i].finishNumber = res.data.finishNumber |
| | | ? res.data.finishNumber |
| | | : 0; |
| | | this.plcStatus=res.data.plcStatus?res.data.plcStatus:1 |
| | | } |
| | | }); |
| | | } |
| | | } |
| | | |
| | | }, |
| | |
| | | </script> |
| | | |
| | | <style lang="scss"> |
| | | .tooltip-width-200{ |
| | | width:200px; |
| | | line-height:1.3!important; |
| | | } |
| | | .color_yellow{ |
| | | color:yellow; |
| | | } |
| | | .el-empty{ |
| | | height:100%; |
| | | .el-empty__description p{ |
| | | font-size:16px!important; |
| | | color:#fff!important; |
| | | } |
| | | } |
| | | |
| | | .active-one { |
| | | width: 100%; |
| | | height: calc(100% - 100px); |
| | |
| | | .bottom { |
| | | height: calc(100% - 410px); |
| | | } |
| | | .font_size_20px{ |
| | | font-size:20px!important; |
| | | } |
| | | } |
| | | .active-two { |
| | | width: calc(50% - 10px); |
| | |
| | | box-sizing: border-box; |
| | | border-right: 1px solid #eee; |
| | | } |
| | | |
| | | .small_title { |
| | | margin-bottom: 30px; |
| | | } |
| | |
| | | // float:left; |
| | | .bottom-title { |
| | | font-weight: 600; |
| | | font-size: 22px; |
| | | font-size: 20px; |
| | | height: 30px; |
| | | line-height: 30px; |
| | | margin-bottom: 5px; |
| | |
| | | .el-carousel__container{ |
| | | overflow-y:auto; |
| | | } |
| | | // .el-carousel__item{ |
| | | // min-height:116px; |
| | | // } |
| | | .el-carousel__item{ |
| | | // height:auto; |
| | | min-height:160px; |
| | | } |
| | | } |
| | | } |
| | | |
| | |
| | | align-content: center; |
| | | justify-content: space-around; |
| | | align-items: center; |
| | | overflow:hidden; |
| | | .title-item { |
| | | width: calc(33.333% - 50px); |
| | | width: calc((100% - 50px)/3); |
| | | float: left; |
| | | margin-right: 10px; |
| | | padding: 15px 20px; |
| | | padding: 10px 5px; |
| | | text-align: center; |
| | | border-radius: 4px; |
| | | display: inline-block; |
| | |
| | | // border: 1px solid #ccc; |
| | | background: #6b83ff; |
| | | border-radius: 5px; |
| | | margin-top: 20px; |
| | | margin-top: 10px; |
| | | color: #333; |
| | | position: relative; |
| | | .card_top-2, |
| | |
| | | color: #fff; |
| | | font-size: 12px; |
| | | line-height: 45px; |
| | | float: left; |
| | | |
| | | > div { |
| | | margin-left: 12px; |
| | | position: relative; |
| | |
| | | } |
| | | } |
| | | } |
| | | .card_top{ |
| | | float: left; |
| | | } |
| | | .card_top-4 { |
| | | width: calc(100% - 20px); |
| | | padding: 0 10px; |
| | | height: 70px; |
| | | |
| | | line-height: 70px; |
| | | padding: 10px 10px; |
| | | color: #fff; |
| | | background: rgb(19, 35, 90); |
| | | font-size: 20px; |
| | | font-size: 14px; |
| | | height:50px; |
| | | line-height: 25px; |
| | | >div{ |
| | | margin-left:0px; |
| | | } |
| | | } |
| | | .card-info-box { |
| | | position: absolute; |
| | |
| | | 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%; |