| | |
| | | |
| | | <template> |
| | | <div class="home"> |
| | | <!-- --> |
| | | <template v-if="Tasks&&Tasks.length>0"> |
| | | <div class="home" ref="homeRef"> |
| | | <!-- v-if="Tasks&&Tasks.length>0" --> |
| | | <template > |
| | | <div class="left"> |
| | | <p class="title"> |
| | | <template v-if="Number(ChannelAmount)>1"> |
| | |
| | | style="float: left;" |
| | | @click="cutClick(3)" |
| | | > |
| | | <img style="width:32px;" v-if="activeName == 3" src="../../public/one-blue.png" /> |
| | | <img style="width:32px;" v-if="activeName == 3" src="../../public/right-blue.png" /> |
| | | <span v-else> |
| | | <img style="width:32px;" src="../../public/one.png" /> |
| | | <img style="width:32px;" src="../../public/right.png" /> |
| | | </span> |
| | | </span> |
| | | </template> |
| | |
| | | v-for="(list, index2) in item" |
| | | > |
| | | <div class="card_content"> |
| | | <div class="card_contentLeft">{{ list.materialId }}</div> |
| | | <div class="card_contentLeft font_dian"> |
| | | <el-popover |
| | | width="200" |
| | | :content="list.materialId" |
| | | placement="top-start" |
| | | trigger="click" |
| | | > |
| | | <span slot="reference">{{ list.materialId }}</span> |
| | | </el-popover> |
| | | </div> |
| | | </div> |
| | | <div class="card-top-input-out-l"> |
| | | <div> |
| | | <div class="font_dian"> |
| | | <!-- 设备12<i |
| | | style="font-size: 14px" |
| | | class="el-icon-right font-arrow-20" |
| | | ></i> |
| | | 设备13 --> |
| | | {{ list.materialName }} |
| | | <el-popover |
| | | width="200" |
| | | :content="list.materialName" |
| | | placement="top-start" |
| | | trigger="click" |
| | | > |
| | | <span slot="reference">{{ list.materialName }}</span> |
| | | </el-popover> |
| | | </div> |
| | | </div> |
| | | <div class="card-top-input-out-r"> |
| | |
| | | </div> |
| | | <div class="card_top-2"> |
| | | <div style="line-height: 45px; text-align: center"> |
| | | 生产中 |
| | | {{ taskData.Procedure.Status==3?'生产完成':'生产中' }} |
| | | </div> |
| | | <!-- <span class="card-top-r-t">完成进度:50%</span> |
| | | <span class="card-top-r-b">12月28日 08:24</span> --> |
| | |
| | | ></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 |
| | | placement="top-end" |
| | | width="160" |
| | | class="button-finish" |
| | |
| | | > |
| | | <div class="card"> |
| | | <div class="card_content"> |
| | | <div class="card_contentLeft"> |
| | | {{ list.materialId }} |
| | | <div class="card_contentLeft font_dian"> |
| | | <el-popover |
| | | width="200" |
| | | :content="list.materialId" |
| | | placement="top-start" |
| | | trigger="click" |
| | | > |
| | | <span slot="reference">{{ list.materialId }}</span> |
| | | </el-popover> |
| | | </div> |
| | | </div> |
| | | <div class="card-top-input-out-l"> |
| | | <div> |
| | | {{ list.materialName }} |
| | | <div class="font_dian"> |
| | | <el-popover |
| | | width="200" |
| | | :content="list.materialName" |
| | | placement="top-start" |
| | | trigger="click" |
| | | > |
| | | <span slot="reference">{{ list.materialName }}</span> |
| | | </el-popover> |
| | | </div> |
| | | </div> |
| | | <div class="card-top-input-out-r"> |
| | |
| | | <el-empty description="暂无任务..."></el-empty> |
| | | </template> |
| | | </div> |
| | | <template v-if="!Tasks||Tasks.length==0"> |
| | | <el-empty description="暂无任务..."></el-empty> |
| | | </template> |
| | | </div> |
| | | <div class="right"> |
| | | <div class="right_top"> |
| | |
| | | <div class="right-top-m"> |
| | | 设备状态: |
| | | <!-- 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> --> |
| | | {{ plcStatus==1?'断开':(plcStatus==2?'生产中':'待机') }} |
| | | <span style="position: relative" v-if="plcStatus" > |
| | | <el-popover |
| | | v-if="plcStatus == 1&&plcNotConnected" |
| | | width="180" |
| | | :content="plcNotConnected" |
| | | placement="top-end" |
| | | trigger="click" |
| | | > |
| | | <span slot="reference"> |
| | | <img src="../../public/duan.png" /> |
| | | 断开 |
| | | </span> |
| | | </el-popover> |
| | | <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> |
| | | </div> |
| | | <div class="right-top-m-btn"> |
| | |
| | | </div> |
| | | </template> |
| | | <!-- --> |
| | | <template v-else> |
| | | <!-- <template v-else> |
| | | <div class="home-img-box"> |
| | | <div class="bg-title"> |
| | | <img src="../../public/bg-title.png" /> |
| | |
| | | </div> |
| | | </div> |
| | | |
| | | </template> |
| | | </template> --> |
| | | <!-- 控制的弹框 --> |
| | | <AddControl ref="control" :Arr="Arr" /> |
| | | <!-- 控制的弹框 --> |
| | | <AddIssue |
| | | ref="control" |
| | | :Arr="Arr" |
| | | :ArrError="ArrError" |
| | | :safeProduce="safeProduce" |
| | | :taskData="taskData" |
| | | :Order="taskData.Order" |
| | |
| | | countDownHour: 0, |
| | | countDownMinute: 0, |
| | | Arr: [], |
| | | ArrError:'', |
| | | // 记录定时器状态 |
| | | procInfoTimer: null, |
| | | cutdownTimer: null, |
| | |
| | | isTipShow:false, |
| | | // isFinsh:0, |
| | | safeProduce:'', |
| | | // 设备断开的原因 |
| | | plcNotConnected:'', |
| | | ChannelAmount:0, |
| | | }; |
| | | }, |
| | |
| | | this.getStartArr() |
| | | this.$refs.control.islook=true |
| | | }else{ |
| | | this.$message.error('目前没有任务!') |
| | | this.$message({ |
| | | message:'目前没有任务!', |
| | | type: 'error', |
| | | duration: 3 * 1000 |
| | | }) |
| | | } |
| | | }, |
| | | isTip(val){ |
| | |
| | | this.activeName = val; |
| | | if(this.activeName==2){ |
| | | this.Tasks=this.TasksCopy.slice(0,2) |
| | | if(this.Tasks.length<2){ |
| | | this.Tasks.push(null) |
| | | } |
| | | }else if(this.activeName==1){ |
| | | this.Tasks=this.TasksCopy.slice(0,1) |
| | | }else if(this.activeName==3){ |
| | |
| | | this.countDownMinute = res.data.CountDownMinute |
| | | ? res.data.CountDownMinute |
| | | : 0; |
| | | if(this.countDownHour==0&& this.countDownMinute==0){ |
| | | this.getTaskInfo(); |
| | | } |
| | | } |
| | | }); |
| | | }, |
| | |
| | | setInterCard(value, name, i) { |
| | | if (this.TasksCopy[i].Procedure.procedure[value]!=null) { |
| | | let height = 200; |
| | | let num = 1; |
| | | if (this.$refs[name]) { |
| | | height = this.$refs[name].$el?this.$refs[name].$el.offsetHeight:200; |
| | | num = Math.floor(height / 80); |
| | | let num = 3; |
| | | // if (this.$refs[name]) { |
| | | // height = this.$refs[name].$el?this.$refs[name].$el.offsetHeight:200; |
| | | // num = Math.floor(height / 80); |
| | | // } |
| | | height = this.$refs['homeRef']?(this.$refs['homeRef'].offsetHeight-470-90-20):200; |
| | | if(this.activeName==2){ |
| | | height=height-610-90-20 |
| | | } |
| | | num = Math.floor(height / 80); |
| | | let inputMaterials = JSON.parse( |
| | | JSON.stringify(this.TasksCopy[i].Procedure.procedure[value]) |
| | | ); |
| | |
| | | }; |
| | | this.Tasks = []; |
| | | this.TasksCopy=[] |
| | | getTaskInfo({ }).then((res) => { |
| | | getTaskInfo({taskMode:2}).then((res) => { |
| | | if (res.code == 200&&res.data) { |
| | | let arr=[] |
| | | if(res.data.Tasks){ |
| | |
| | | this.activeName=1; |
| | | this.TasksCopy = res.data.Tasks ? res.data.Tasks : []; |
| | | 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(object) |
| | |
| | | }, 3000); |
| | | } |
| | | } |
| | | if (res.code != 200 || this.TasksCopy.length == 0) { |
| | | this.getcountdown(); |
| | | // 控制重新请求getTaskInfo, 只开启一个定时器 |
| | | if (!this.cutdownTimer) { |
| | | this.cutdownTimer = setInterval(() => { |
| | | this.getcountdown(); |
| | | }, 60000); |
| | | } |
| | | } |
| | | // if (res.code != 200 || this.TasksCopy.length == 0) { |
| | | // this.getcountdown(); |
| | | // // 控制重新请求getTaskInfo, 只开启一个定时器 |
| | | // if (!this.cutdownTimer) { |
| | | // this.cutdownTimer = setInterval(() => { |
| | | // this.getcountdown(); |
| | | // }, 60000); |
| | | // } |
| | | // } |
| | | this.cutClick(1) |
| | | }); |
| | | // this.TasksCopy.push(object) |
| | |
| | | // break; |
| | | // } |
| | | // } |
| | | getTaskUnStarted({page:1,pageSize:1}).then(res=>{ |
| | | getTaskInfo({taskMode:1}).then(res=>{ |
| | | if(res.code==200){ |
| | | this.taskData=res.data.Tasks?res.data.Tasks[0]:{}; |
| | | this.ArrError='' |
| | | if (this.taskData.Procedure.ID) { |
| | | startTask({ id: this.taskData.Procedure.ID }).then((res) => { |
| | | if (res.code == 200) { |
| | | this.Arr =res.data.Params ? res.data.Params : [] |
| | | }else{ |
| | | this.ArrError=res.msg; |
| | | } |
| | | }); |
| | | } |
| | |
| | | color:#318583; |
| | | } |
| | | .el-empty{ |
| | | height:100%; |
| | | height:calc(100% - 190px); |
| | | .el-empty__description p{ |
| | | font-size:16px!important; |
| | | color:#fff!important; |
| | |
| | | border: 0; |
| | | } |
| | | } |
| | | .huise{ |
| | | width: 46%; |
| | | float: right; |
| | | } |
| | | .huise.el-button--primary { |
| | | background: #CCE8E8; |
| | | color: #AAAAAA; |
| | | border: 0; |
| | | } |
| | | } |
| | | .home { |
| | | width: 100%; |
| | |
| | | margin-top: 10px; |
| | | color: #333; |
| | | position: relative; |
| | | .font_dian{ |
| | | -webkit-box-orient:vertical; |
| | | overflow:hidden; |
| | | text-overflow:ellipsis; |
| | | white-space:nowrap; |
| | | } |
| | | .card_top-2{ |
| | | width:35%; |
| | | } |
| | |
| | | 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%; |