| | |
| | | <div class="card_content"> |
| | | <div class="card_contentLeft">{{ list.materialId }}</div> |
| | | </div> |
| | | <div class="card_top"> |
| | | <div class="card-top-input-out-l"> |
| | | <div> |
| | | <!-- 设备12<i |
| | | style="font-size: 14px" |
| | |
| | | {{ list.materialName }} |
| | | </div> |
| | | </div> |
| | | <div class="card_top2"> |
| | | <div class="card-top-input-out-r"> |
| | | <div style="line-height: 45px; text-align: center"> |
| | | {{ list.amount }} {{ list.unit }} |
| | | </div> |
| | |
| | | </div> |
| | | </el-carousel-item> |
| | | </el-carousel> |
| | | <el-button type="primary" class="color_f70f83"> |
| | | <el-button type="primary" class="color_f70f83 bottom-box-btn"> |
| | | <i class="el-icon-phone-outline" />物料呼叫</el-button |
| | | > |
| | | </div> |
| | |
| | | > |
| | | <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-popover |
| | | width="200" |
| | | :content="list.deviceName" |
| | | placement="top-start" |
| | | trigger="click" |
| | | > |
| | | <span slot="reference">{{ list.deviceName }}</span> |
| | | </el-popover> |
| | | <!-- <span style="float: right">6m/s</span> --> |
| | | </div> |
| | | </div> |
| | |
| | | <p |
| | | style="font-size: 22px; margin-left: 12px; margin-top: 50px" |
| | | ></p> |
| | | <div class="right-small-btn"> |
| | | <div class="right-small-btn bottom-box-btn"> |
| | | <el-button type="primary"> 打印</el-button> |
| | | <el-popover |
| | | placement="top-end" |
| | |
| | | {{ list.materialId }} |
| | | </div> |
| | | </div> |
| | | <div class="card_top"> |
| | | <div class="card-top-input-out-l"> |
| | | <div> |
| | | {{ list.materialName }} |
| | | <!-- 设备12<i |
| | | style="font-size: 14px" |
| | | class="el-icon-right font-arrow-20" |
| | | ></i> |
| | | 设备13 --> |
| | | </div> |
| | | </div> |
| | | <div class="card_top2"> |
| | | <div class="card-top-input-out-r"> |
| | | <div style="line-height: 45px; text-align: center"> |
| | | {{ list.amount }} {{ list.unit }} |
| | | </div> |
| | | <!-- <span class="card-top-r-t">生产完成</span> |
| | | <span class="card-top-r-b">12月28日 08:24</span> --> |
| | | </div> |
| | | <!-- <div class="card-info-box">预计10分钟送达</div> --> |
| | | </div> |
| | | <!-- <div class="card"> |
| | | <div class="card_content"> |
| | | <div class="card_contentLeft color_green"> |
| | | 包号:G22122304 100吨 |
| | | </div> |
| | | </div> |
| | | <div class="card_top"> |
| | | <div> |
| | | 设备12<i |
| | | style="font-size: 14px" |
| | | class="el-icon-right font-arrow-20" |
| | | ></i> |
| | | 设备13 |
| | | </div> |
| | | </div> |
| | | <div class="card_top-2"> |
| | | <span class="card-top-r-t">生产完成</span> |
| | | <span class="card-top-r-b">12月28日 08:24</span> |
| | | </div> |
| | | </div> --> |
| | | </div> |
| | | </el-carousel-item> |
| | | </el-carousel> |
| | | <el-button type="primary" class="color_f70f83"> |
| | | <el-button type="primary" class="color_f70f83 bottom-box-btn"> |
| | | <i class="el-icon-phone-outline" />运输呼叫</el-button |
| | | > |
| | | </div> |
| | |
| | | 设备状态: |
| | | <!-- 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> --> |
| | |
| | | procInfoTimer: null, |
| | | cutdownTimer: null, |
| | | TaskCount:0, |
| | | plcStatus:1, |
| | | plcStatus:0, |
| | | isTipShow:false, |
| | | }; |
| | | }, |
| | |
| | | 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( |
| | |
| | | procedure: { inputMaterials: [], outputMaterials: [], workers: [] }, |
| | | }, |
| | | inputMaterials: [], |
| | | outputMaterials: [], |
| | | outputMaterials: [ |
| | | // [ |
| | | // { |
| | | // materialId:11111, |
| | | // materialName:'272大家啊放假了卡艰苦奋斗垃圾发快递垃圾反馈来得及克隆', |
| | | // amount:100, |
| | | // unit:'件' |
| | | // } |
| | | // ] |
| | | ], |
| | | procedureList: [ |
| | | // { |
| | | // number: 11111, |
| | | // name: "工艺", |
| | | // } |
| | | // [ |
| | | // { |
| | | // name:"工序", |
| | | // deviceName:'1111dhafjdhajkhf jkdahjkf打法即可打開鏈接肯德基啊看來jdad大风京东卡老司机番窠倒臼开了房金阿奎第十六届反馈拉德斯基k打卡机阿珂附件打开了点击阿里卡减肥的卡拉胶开了房大街上克隆fk啦大家防空雷達數據看i' |
| | | // }, |
| | | // ] |
| | | ], |
| | | }; |
| | | this.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 = []; |
| | |
| | | if (!this.procInfoTimer) { |
| | | this.procInfoTimer = setInterval(() => { |
| | | this.getProgressInfo(); |
| | | }, 9000); |
| | | }, 3000); |
| | | } |
| | | } |
| | | 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[i].finishNumber = res.data.finishNumber |
| | | ? res.data.finishNumber |
| | | : 0; |
| | | this.plcStatus=res.data.plcStatus?res.data.plcStatus:1 |
| | | this.plcStatus=res.data.plcStatus?res.data.plcStatus:0 |
| | | } |
| | | }); |
| | | } |
| | |
| | | </script> |
| | | |
| | | <style lang="scss"> |
| | | .tooltip-width-200{ |
| | | width:200px; |
| | | line-height:1.3!important; |
| | | } |
| | | .color_yellow{ |
| | | color:yellow; |
| | | } |
| | |
| | | } |
| | | .card-box { |
| | | width: 100%; |
| | | height: calc(100% - 50px - 50px); |
| | | height: calc(100% - 50px - 40px); |
| | | // height:300px; |
| | | .el-carousel__container{ |
| | | overflow-y:auto; |
| | |
| | | // height:auto; |
| | | min-height:160px; |
| | | } |
| | | } |
| | | .bottom-box-btn{ |
| | | width:calc(100% - 20px); |
| | | position:absolute; |
| | | bottom:10px; |
| | | left:10px; |
| | | } |
| | | } |
| | | |
| | |
| | | margin-top: 10px; |
| | | color: #333; |
| | | position: relative; |
| | | .card_top-2, |
| | | .card_top-2,.card-top-input-out-r, |
| | | .card_top-3 { |
| | | width: 50%; |
| | | height: 45px; |
| | |
| | | } |
| | | } |
| | | |
| | | .card_top, |
| | | .card_top,.card-top-input-out-l, |
| | | .card_top-4 { |
| | | width: 50%; |
| | | height: 45px; |
| | |
| | | font-size: 12px; |
| | | line-height: 45px; |
| | | > div { |
| | | margin-left: 12px; |
| | | padding-left: 12px; |
| | | position: relative; |
| | | p { |
| | | position: absolute; |
| | |
| | | } |
| | | .card_top{ |
| | | float: left; |
| | | } |
| | | .card-top-input-out-l{ |
| | | float:left; |
| | | width:65%; |
| | | line-height:20px; |
| | | vertical-align: middle; |
| | | display:flex; |
| | | justify-content:space-around; |
| | | align-items:center; |
| | | } |
| | | .card-top-input-out-r{ |
| | | width:35%; |
| | | } |
| | | .card_top-4 { |
| | | width: calc(100% - 20px); |
| | |
| | | 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%; |