| | |
| | | |
| | | <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"> |
| | | <span |
| | | class="font set-title" |
| | | style="float: left; margin-right: 15px;" |
| | | @click="cutClick(1)" |
| | | > |
| | | <img style="width:32px;" v-if="activeName == 1" src="../../public/one-blue.png" /> |
| | | <img style="width:32px;" v-else src="../../public/one.png" /> |
| | | </span> |
| | | <span class="font set-title" style="float: left;margin-right: 15px;" @click="cutClick(2)"> |
| | | <img style="width:32px;" v-if="activeName == 2" src="../../public/two-blue.png" /> |
| | | <img style="width:32px;" v-else src="../../public/two.png" /> |
| | | </span> |
| | | <span |
| | | class="font set-title" |
| | | style="float: left; " |
| | | @click="cutClick(3)" |
| | | > |
| | | <img style="width:32px;" v-if="activeName == 3" src="../../public/one-blue.png" /> |
| | | <img style="width:32px;" v-else src="../../public/one.png" /> |
| | | </span> |
| | | <template v-if="Number(ChannelAmount)>1"> |
| | | <span |
| | | class="font set-title" |
| | | style="float: left; margin-right: 15px;" |
| | | @click="cutClick(1)" |
| | | > |
| | | <img style="width:32px;" v-if="activeName == 1" src="../../public/one-blue.png" /> |
| | | <span v-else> |
| | | <img style="width:32px;" src="../../public/one.png" /> |
| | | </span> |
| | | </span> |
| | | <span class="font set-title" style="float: left;margin-right: 15px;" @click="cutClick(2)"> |
| | | <img style="width:32px;" v-if="activeName == 2" src="../../public/two-blue.png" /> |
| | | <img style="width:32px;" v-else src="../../public/two.png" /> |
| | | </span> |
| | | <span |
| | | class="font set-title" |
| | | style="float: left;" |
| | | @click="cutClick(3)" |
| | | > |
| | | <img style="width:32px;" v-if="activeName == 3" src="../../public/right-blue.png" /> |
| | | <span v-else> |
| | | <img style="width:32px;" src="../../public/right.png" /> |
| | | </span> |
| | | </span> |
| | | </template> |
| | | 生产管理看板 |
| | | <span |
| | | class="font el-icon-setting set-title" |
| | |
| | | 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"> |
| | |
| | | </template> |
| | | <!-- 2个任务的时候,第二个任务为空的时候显示 --> |
| | | <template |
| | | v-if="activeName == 2 &&(!taskData||Object.keys(taskData).length==0||(Tasks.length<2))" |
| | | v-if="activeName == 2 &&(!taskData||Object.keys(taskData).length==0)" |
| | | > |
| | | |
| | | <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> |
| | | </div> |
| | | </template> |
| | | |
| | | </template> --> |
| | | <!-- 控制的弹框 --> |
| | | <AddControl ref="control" :Arr="Arr" /> |
| | | <!-- 控制的弹框 --> |
| | | <AddIssue |
| | | ref="control" |
| | | :Arr="Arr" |
| | | :ArrError="ArrError" |
| | | :safeProduce="safeProduce" |
| | | :taskData="taskData" |
| | | :Order="taskData.Order" |
| | | @getSetProductNumber="getTaskInfo" |
| | |
| | | startTask, |
| | | getProgress, |
| | | countdown, |
| | | getTaskUnStarted, |
| | | } from "@/api/home/index"; // 产线 |
| | | import Card from "@/components/Card.vue"; |
| | | import Knowledge from "../components/Knowledge.vue"; |
| | |
| | | // 右侧完成 |
| | | finishShow:{}, |
| | | workers:[], |
| | | TasksCopy:[], |
| | | Tasks: [ |
| | | { |
| | | Order: { |
| | |
| | | countDownHour: 0, |
| | | countDownMinute: 0, |
| | | Arr: [], |
| | | ArrError:'', |
| | | // 记录定时器状态 |
| | | procInfoTimer: null, |
| | | cutdownTimer: null, |
| | | TaskCount:0, |
| | | plcStatus:0, |
| | | isTipShow:false, |
| | | isFinsh:0, |
| | | // isFinsh:0, |
| | | safeProduce:'', |
| | | // 设备断开的原因 |
| | | plcNotConnected:'', |
| | | ChannelAmount:0, |
| | | }; |
| | | }, |
| | | mounted() { |
| | |
| | | this.getTaskInfo(); |
| | | }, |
| | | watch:{ |
| | | isFinsh(){ |
| | | if(this.isFinsh==this.Tasks.length){ |
| | | this.getStartArr() |
| | | } |
| | | } |
| | | // isFinsh(){ |
| | | // if(this.isFinsh==this.Tasks.length){ |
| | | // this.getStartArr() |
| | | // } |
| | | // } |
| | | }, |
| | | methods: { |
| | | taskClick(){ |
| | | if(this.TaskCount>0){ |
| | | this.getStartArr() |
| | | this.$refs.control.islook=true |
| | | }else{ |
| | | this.$message.error('目前没有任务!') |
| | | this.$message({ |
| | | message:'目前没有任务!', |
| | | type: 'error', |
| | | duration: 3 * 1000 |
| | | }) |
| | | } |
| | | }, |
| | | isTip(val){ |
| | |
| | | }, |
| | | cutClick(val) { |
| | | this.activeName = val; |
| | | this.getTaskInfo(); |
| | | 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.Tasks=this.TasksCopy.slice(1) |
| | | } |
| | | }, |
| | | reloadPage() { |
| | | // window.location.reload(); |
| | |
| | | this.countDownMinute = res.data.CountDownMinute |
| | | ? res.data.CountDownMinute |
| | | : 0; |
| | | if(this.countDownHour==0&& this.countDownMinute==0){ |
| | | this.getTaskInfo(); |
| | | } |
| | | } |
| | | }); |
| | | }, |
| | |
| | | formatDate(value) { |
| | | if (value) { |
| | | const now = value ? new Date(value * 1000) : new Date(); |
| | | let time = this.getDateObj(now, "yyyy-MM-dd hh:mm:ss"); |
| | | let time = this.getDateObj(now, "MM-dd hh:mm"); |
| | | return time; |
| | | } else { |
| | | return ""; |
| | |
| | | return d; |
| | | }, |
| | | setInterCard(value, name, i) { |
| | | if (this.Tasks[i].Procedure.procedure[value]!=null) { |
| | | 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.Tasks[i].Procedure.procedure[value]) |
| | | JSON.stringify(this.TasksCopy[i].Procedure.procedure[value]) |
| | | ); |
| | | let newDataList = []; |
| | | let current = 0; |
| | |
| | | } |
| | | } |
| | | } |
| | | this.Tasks[i][value] = [...newDataList]; |
| | | this.TasksCopy[i][value] = [...newDataList]; |
| | | } |
| | | }, |
| | | |
| | |
| | | ], |
| | | }; |
| | | this.Tasks = []; |
| | | getTaskInfo({ page: 1, pageSize: this.activeName }).then((res) => { |
| | | this.TasksCopy=[] |
| | | getTaskInfo({taskMode:2}).then((res) => { |
| | | if (res.code == 200&&res.data) { |
| | | let arr=[] |
| | | if(res.data.Tasks){ |
| | | arr.sort(function(a,b){ |
| | | return (a.Position - b.Position) |
| | | return (a.Channel - b.Channel) |
| | | }) |
| | | } |
| | | this.Tasks = res.data.Tasks ? 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) |
| | | // } |
| | | this.TaskCount=res.data.TaskCount?res.data.TaskCount:0 |
| | | if (this.Tasks.length == 0&&this.TaskCount==0) { |
| | | if (this.activeName == 1) { |
| | | this.Tasks.push(object); |
| | | |
| | | if (this.TasksCopy.length == 0&&this.TaskCount==0) { |
| | | if (this.activeName == 1||this.activeName == 3) { |
| | | this.TasksCopy.push(object); |
| | | } else { |
| | | this.Tasks.push(object); |
| | | this.Tasks.push(object); |
| | | this.TasksCopy.push(object); |
| | | this.TasksCopy.push(object); |
| | | } |
| | | } |
| | | this.workers=res.data.workers?res.data.workers:[] |
| | | for (let i in this.Tasks) { |
| | | this.Tasks[i].procedureList = []; |
| | | this.Tasks[i].inputMaterials = []; |
| | | this.Tasks[i].outputMaterials = []; |
| | | for (let i in this.TasksCopy) { |
| | | this.TasksCopy[i].procedureList = []; |
| | | this.TasksCopy[i].inputMaterials = []; |
| | | this.TasksCopy[i].outputMaterials = []; |
| | | this.TasksCopy[i].finishNumber = 0; |
| | | this.finishShow['finishShow&'+i]=false |
| | | this.Tasks[i].Procedure.procedure.workers = this.Tasks[i].Procedure |
| | | this.TasksCopy[i].Procedure.procedure.workers = this.TasksCopy[i].Procedure |
| | | .procedure.workers |
| | | ? this.Tasks[i].Procedure.procedure.workers |
| | | ? this.TasksCopy[i].Procedure.procedure.workers |
| | | : []; |
| | | |
| | | this.Tasks[i].procedureList.push([ |
| | | this.TasksCopy[i].procedureList.push([ |
| | | { |
| | | name: "工序", |
| | | ...this.Tasks[i].Procedure.procedure, |
| | | ...this.TasksCopy[i].Procedure.procedure, |
| | | }, |
| | | ]); |
| | | |
| | | if (this.Tasks[i].Procedure.ID) { |
| | | startTask({ id: this.Tasks[i].Procedure.ID }).then((res) => { |
| | | if (this.TasksCopy[i].Procedure.ID) { |
| | | startTask({ id: this.TasksCopy[i].Procedure.ID }).then((res) => { |
| | | if (res.code == 200) { |
| | | // res.data.number |
| | | this.Tasks[i].procedureList[0].push({ |
| | | this.TasksCopy[i].procedureList[0].push({ |
| | | number: res.data.Number, |
| | | }); |
| | | this.Tasks[i].Arr=res.data.Params ? res.data.Params : [] |
| | | this.isFinsh=Number(i)+1 |
| | | // this.TasksCopy[i].Arr=res.data.Params ? res.data.Params : [] |
| | | // this.isFinsh=Number(i)+1 |
| | | } |
| | | }); |
| | | } |
| | | this.setInterCard("inputMaterials", "cardBox1&" + i, i); |
| | | this.setInterCard("outputMaterials", "cardBox3&" + i, i); |
| | | } |
| | | |
| | | this.getStartArr() |
| | | this.getProgressInfo(); |
| | | if (!this.procInfoTimer) { |
| | | this.procInfoTimer = setInterval(() => { |
| | |
| | | }, 3000); |
| | | } |
| | | } |
| | | if (res.code != 200 || this.Tasks.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.Tasks.push(object) |
| | | // this.Tasks.push(object) |
| | | // this.TasksCopy.push(object) |
| | | // this.TasksCopy.push(object) |
| | | }, |
| | | getStartArr(){ |
| | | for (let i in this.Tasks) { |
| | | if (this.Tasks[i].Procedure.Status==1) { |
| | | this.Arr = this.Tasks[i].Arr ?this.Tasks[i].Arr: []; |
| | | this.taskData=this.Tasks[i]; |
| | | break; |
| | | // for (let i in this.TasksCopy) { |
| | | // if (this.TasksCopy[i].Procedure.Status==1) { |
| | | // this.Arr = this.TasksCopy[i].Arr ?this.TasksCopy[i].Arr: []; |
| | | // // this.taskData=this.TasksCopy[i]; |
| | | // break; |
| | | // } |
| | | // } |
| | | 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; |
| | | } |
| | | }); |
| | | } |
| | | } |
| | | } |
| | | }) |
| | | }, |
| | | getProgressInfo() { |
| | | for (let i in this.Tasks){ |
| | | if(this.Tasks[i].Procedure.ID){ |
| | | this.Tasks[i].finishNumber = 0; |
| | | for (let i in this.TasksCopy){ |
| | | if(this.TasksCopy[i].Procedure.ID){ |
| | | getProgress({ |
| | | position: Number(i), |
| | | procedureId: this.Tasks[i].Procedure.ID, |
| | | channel: Number(i), |
| | | procedureId: this.TasksCopy[i].Procedure.ID, |
| | | }).then((res) => { |
| | | if (res.code == 200) { |
| | | this.Tasks[i].finishNumber = res.data.finishNumber |
| | | this.TasksCopy[i].finishNumber = res.data.finishNumber |
| | | ? res.data.finishNumber |
| | | : 0; |
| | | this.plcStatus=res.data.plcStatus?res.data.plcStatus:0 |
| | |
| | | path: "/set", |
| | | }); |
| | | }, |
| | | |
| | | // 右侧控制 |
| | | controlClick() { |
| | | if (this.Tasks.length > 0) { |
| | | for(let i in this.Tasks){ |
| | | if(this.Tasks[i].Procedure.Status==1){ |
| | | this.$refs.control.islook = true; |
| | | break; |
| | | } |
| | | } |
| | | } else { |
| | | this.$message.error("当前设备没有工序!"); |
| | | } |
| | | }, |
| | | // 右侧完成 |
| | | finishClick(i, taskData) { |
| | | if (Object.keys(taskData).length > 0 && taskData.Procedure.ID) { |
| | |
| | | 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%; |