| | |
| | | |
| | | <template> |
| | | <div class="home"> |
| | | <div class="home" ref="homeRef"> |
| | | <!-- v-if="Tasks&&Tasks.length>0" --> |
| | | <template > |
| | | <div class="left"> |
| | |
| | | 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> |
| | |
| | | style="font-size: 35px; font-weight: 600" |
| | | class="color_green" |
| | | > |
| | | {{ taskData.finishNumber }}{{ taskData.Order.unit }} |
| | | {{ taskData.finishNumber || 0 }}{{ 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" /> |
| | | <span v-else class="yuandian"></span> |
| | | </div> |
| | | <el-descriptions :column="(activeName == 1||activeName == 3) ? 2 : 1" :colon="true"> |
| | | <el-descriptions-item label="产品名称">{{ |
| | | taskData.Order.productName || "" |
| | | taskData.Order.productName || "--" |
| | | }}</el-descriptions-item> |
| | | <el-descriptions-item label="数量" |
| | | >{{ taskData.Order.amount || 0 |
| | | }}{{ taskData.Order.unit }}</el-descriptions-item |
| | | > |
| | | <el-descriptions-item label="交货日期">{{ |
| | | taskData.Order.deliverDate || "" |
| | | taskData.Order.deliverDate || "--" |
| | | }}</el-descriptions-item> |
| | | <el-descriptions-item label="工时"> |
| | | {{ taskData.Procedure.procedure.workHours || "" }} |
| | | {{ taskData.Procedure.procedure.workHours || "--" }} |
| | | </el-descriptions-item> |
| | | <el-descriptions-item label="计划时间" |
| | | >{{ formatDate(taskData.Order.startTime) || "" }} |
| | | >{{ formatDate(taskData.Order.startTime) || "--" }} |
| | | - |
| | | {{ formatDate(taskData.Order.endTime) }}</el-descriptions-item |
| | | > |
| | | <el-descriptions-item label="货物描述">{{ |
| | | taskData.Order.orderAttr || "" |
| | | taskData.Order.orderAttr || "--" |
| | | }}</el-descriptions-item> |
| | | <el-descriptions-item label="客户名称">{{ |
| | | taskData.Order.customer || "" |
| | | taskData.Order.customer || "--" |
| | | }}</el-descriptions-item> |
| | | <el-descriptions-item label="参数要求">{{ |
| | | taskData.Order.parameter || "" |
| | | taskData.Order.parameter || "--" |
| | | }}</el-descriptions-item> |
| | | </el-descriptions> |
| | | <el-descriptions :column="1" :colon="true"> |
| | |
| | | :text-inside="true" |
| | | :stroke-width="30" |
| | | :percentage=" |
| | | (taskData.Order && taskData.finishNumber != 0) |
| | | (taskData.Order && taskData.finishNumber != 0 && taskData.Order.amount) |
| | | ? parseInt( |
| | | (taskData.finishNumber / taskData.Order.amount) * |
| | | 100 |
| | |
| | | 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 class="card_top-3"> |
| | | <span class="card-top-r-t" |
| | | >完成进度:{{ |
| | | taskData.Order && taskData.finishNumber != 0 |
| | | (taskData.Order && taskData.finishNumber != 0 && taskData.Order.amount) |
| | | ? parseInt( |
| | | (taskData.finishNumber / |
| | | taskData.Order.amount) * |
| | |
| | | ></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 |
| | | v-if="taskData.Procedure.Status && taskData.Procedure.Status!==3" |
| | | placement="top-end" |
| | | width="160" |
| | | class="button-finish" |
| | |
| | | </div> |
| | | <el-button type="primary" slot="reference"> 完成</el-button> |
| | | </el-popover> |
| | | <el-button v-else type="primary" class="huise"> 完成</el-button> |
| | | </div> |
| | | </div> |
| | | <i class="el-icon-arrow-right font-arrow-20 color_318583"></i> |
| | |
| | | > |
| | | <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"> |
| | |
| | | <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> |
| | |
| | | <AddIssue |
| | | ref="control" |
| | | :Arr="Arr" |
| | | :activeName="activeName" |
| | | :ArrError="ArrError" |
| | | :safeProduce="safeProduce" |
| | | :taskData="taskData" |
| | | :Order="taskData.Order" |
| | | @getSetProductNumber="getTaskInfo" |
| | | @getSetProductNumber="reloadPage" |
| | | @isTip="isTip" |
| | | /> |
| | | <!-- 工艺模型 --> |
| | | <ProcessModel |
| | | ref="processModel" |
| | | :listData="listData" |
| | | /> |
| | | </div> |
| | | </template> |
| | |
| | | getProgress, |
| | | countdown, |
| | | getTaskUnStarted, |
| | | processModelList, |
| | | } from "@/api/home/index"; // 产线 |
| | | import Card from "@/components/Card.vue"; |
| | | import Knowledge from "../components/Knowledge.vue"; |
| | | import AddControl from "../components/AddControl.vue"; |
| | | import AddIssue from "../components/AddIssue.vue"; |
| | | import ProcessModel from "../components/ProcessModel.vue"; |
| | | export default { |
| | | components: { |
| | | Card, |
| | | Knowledge, |
| | | AddControl, |
| | | AddIssue, |
| | | ProcessModel, |
| | | }, |
| | | data() { |
| | | return { |
| | |
| | | countDownHour: 0, |
| | | countDownMinute: 0, |
| | | Arr: [], |
| | | ArrError:'', |
| | | // 记录定时器状态 |
| | | procInfoTimer: null, |
| | | cutdownTimer: null, |
| | | ProcessModelTimer: null, |
| | | TaskCount:0, |
| | | plcStatus:0, |
| | | isTipShow:false, |
| | |
| | | // 设备断开的原因 |
| | | plcNotConnected:'', |
| | | ChannelAmount:0, |
| | | object:{ |
| | | Order: {}, |
| | | Procedure: { |
| | | procedure: { inputMaterials: [], outputMaterials: [], workers: [] }, |
| | | }, |
| | | inputMaterials: [], |
| | | outputMaterials: [], |
| | | procedureList: [], |
| | | }, |
| | | processList:[], |
| | | isUpdateIcon:false, |
| | | listData:[], |
| | | resResult:null, |
| | | resprocInfoTimer:null, |
| | | }; |
| | | }, |
| | | mounted() { |
| | |
| | | // } |
| | | }, |
| | | methods: { |
| | | getModelList(){ |
| | | this.resResult=null |
| | | for (let i in this.TasksCopy){ |
| | | if(this.TasksCopy[i].Procedure.ID&&this.TasksCopy[i].number){ |
| | | processModelList({ |
| | | procedureId: this.TasksCopy[i].Procedure.ID, |
| | | page: 1, |
| | | pageSize:6, |
| | | number:this.TasksCopy[i].number |
| | | }).then(res=>{ |
| | | 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; |
| | | break; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | this.resResult=res; |
| | | }) |
| | | } |
| | | } |
| | | }, |
| | | processModelClick(list){ |
| | | this.listData=list; |
| | | if( Object.keys(this.listData).length > 0){ |
| | | if(this.listData.Procedure.ID&&this.listData.number){ |
| | | this.$refs.processModel.islook=true |
| | | return true; |
| | | } |
| | | } |
| | | this.$message.error('当前工序无编号,无法查看工序!') |
| | | |
| | | }, |
| | | getProcessModelList(){ |
| | | this.getModelList() |
| | | if (!this.ProcessModelTimer&&!this.resResult) { |
| | | this.ProcessModelTimer = setInterval(() => { |
| | | this.getModelList(); |
| | | }, 10000) |
| | | } |
| | | }, |
| | | taskClick(){ |
| | | if(this.TaskCount>0){ |
| | | this.getStartArr() |
| | |
| | | this.activeName = val; |
| | | if(this.activeName==2){ |
| | | this.Tasks=this.TasksCopy.slice(0,2) |
| | | if(this.Tasks.length<2){ |
| | | if(this.Tasks.length==0){ |
| | | this.Tasks.push(this.object) |
| | | } |
| | | this.Tasks.push(this.object) |
| | | } |
| | | }else if(this.activeName==1){ |
| | | this.Tasks=this.TasksCopy.slice(0,1) |
| | | if(this.Tasks.length<1){ |
| | | this.Tasks.push(this.object) |
| | | } |
| | | }else if(this.activeName==3){ |
| | | this.Tasks=this.TasksCopy.slice(1) |
| | | if(this.Tasks.length<1){ |
| | | this.Tasks.push(this.object) |
| | | } |
| | | } |
| | | }, |
| | | reloadPage() { |
| | | reloadPage(val) { |
| | | // window.location.reload(); |
| | | this.getTaskInfo(); |
| | | this.getTaskInfo(val); |
| | | }, |
| | | getcountdown() { |
| | | countdown().then((res) => { |
| | |
| | | setInterval(() => { |
| | | d= getCha(); |
| | | }, 6000); |
| | | return d; |
| | | return date?d:'--'; |
| | | }, |
| | | 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]) |
| | | ); |
| | |
| | | } |
| | | }, |
| | | |
| | | getTaskInfo() { |
| | | let object = { |
| | | Order: {}, |
| | | Procedure: { |
| | | procedure: { inputMaterials: [], outputMaterials: [], workers: [] }, |
| | | }, |
| | | inputMaterials: [], |
| | | outputMaterials: [ |
| | | // [ |
| | | // { |
| | | // materialId:11111, |
| | | // materialName:'272大家啊放假了卡艰苦奋斗垃圾发快递垃圾反馈来得及克隆', |
| | | // amount:100, |
| | | // unit:'件' |
| | | // } |
| | | // ] |
| | | ], |
| | | procedureList: [ |
| | | // [ |
| | | // { |
| | | // name:"工序", |
| | | // deviceName:'1111dhafjdhajkhf jkdahjkf打法即可打開鏈接肯德基啊看來jdad大风京东卡老司机番窠倒臼开了房金阿奎第十六届反馈拉德斯基k打卡机阿珂附件打开了点击阿里卡减肥的卡拉胶开了房大街上克隆fk啦大家防空雷達數據看i' |
| | | // }, |
| | | // ] |
| | | ], |
| | | }; |
| | | getTaskInfo(val) { |
| | | this.Tasks = []; |
| | | this.TasksCopy=[] |
| | | getTaskInfo({taskMode:2}).then((res) => { |
| | |
| | | return (a.Channel - b.Channel) |
| | | }) |
| | | } |
| | | 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.TasksCopy.push(this.object) |
| | | // } |
| | | this.TaskCount=res.data.TaskCount?res.data.TaskCount:0 |
| | | |
| | | if (this.TasksCopy.length == 0&&this.TaskCount==0) { |
| | | if ((this.TasksCopy.length ==0 )||!this.TasksCopy) { |
| | | if (this.activeName == 1||this.activeName == 3) { |
| | | this.TasksCopy.push(object); |
| | | this.TasksCopy.push(this.object); |
| | | } else { |
| | | this.TasksCopy.push(object); |
| | | this.TasksCopy.push(object); |
| | | this.TasksCopy.push(this.object); |
| | | this.TasksCopy.push(this.object); |
| | | } |
| | | } |
| | | this.workers=res.data.workers?res.data.workers:[] |
| | |
| | | this.TasksCopy[i].inputMaterials = []; |
| | | this.TasksCopy[i].outputMaterials = []; |
| | | this.TasksCopy[i].finishNumber = 0; |
| | | this.TasksCopy[i].number=0; |
| | | this.finishShow['finishShow&'+i]=false |
| | | this.TasksCopy[i].Procedure.procedure.workers = this.TasksCopy[i].Procedure |
| | | .procedure.workers |
| | |
| | | if (this.TasksCopy[i].Procedure.ID) { |
| | | startTask({ id: this.TasksCopy[i].Procedure.ID }).then((res) => { |
| | | if (res.code == 200) { |
| | | this.TasksCopy[i].number=res.data.Number |
| | | // res.data.number |
| | | this.TasksCopy[i].procedureList[0].push({ |
| | | number: res.data.Number, |
| | |
| | | } |
| | | this.getStartArr() |
| | | this.getProgressInfo(); |
| | | if (!this.procInfoTimer) { |
| | | if (!this.procInfoTimer&&!this.resprocInfoTimer) { |
| | | this.procInfoTimer = setInterval(() => { |
| | | this.getProgressInfo(); |
| | | }, 3000); |
| | | } |
| | | } |
| | | this.getProcessModelList(); |
| | | } |
| | | // if (res.code != 200 || this.TasksCopy.length == 0) { |
| | | // this.getcountdown(); |
| | |
| | | // }, 60000); |
| | | // } |
| | | // } |
| | | this.cutClick(1) |
| | | this.cutClick(val?val:1) |
| | | }); |
| | | // this.TasksCopy.push(object) |
| | | // this.TasksCopy.push(object) |
| | | // this.TasksCopy.push(this.object) |
| | | // this.TasksCopy.push(this.object) |
| | | }, |
| | | getStartArr(){ |
| | | // for (let i in this.TasksCopy) { |
| | |
| | | getTaskInfo({taskMode:1}).then(res=>{ |
| | | if(res.code==200){ |
| | | this.taskData=res.data.Tasks?res.data.Tasks[0]:{}; |
| | | if (this.taskData.Procedure.ID) { |
| | | this.ArrError='' |
| | | if (Object.keys(this.taskData).length > 0 &&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?res.msg:'获取工艺参数失败!'; |
| | | } |
| | | }); |
| | | } |
| | |
| | | }) |
| | | }, |
| | | getProgressInfo() { |
| | | this.resprocInfoTimer=null |
| | | for (let i in this.TasksCopy){ |
| | | if(this.TasksCopy[i].Procedure.ID){ |
| | | getProgress({ |
| | |
| | | : 0; |
| | | this.plcStatus=res.data.plcStatus?res.data.plcStatus:0 |
| | | } |
| | | this.resprocInfoTimer=res; |
| | | }); |
| | | } |
| | | } |
| | | |
| | | }, |
| | | // 设置 |
| | | setUrl() { |
| | |
| | | finishTask({ id: taskData.Procedure.ID }).then((res) => { |
| | | if (res.code == 200) { |
| | | this.finishShow['finishShow&'+i] = false; |
| | | this.getTaskInfo(); |
| | | this.reloadPage(this.activeName?this.activeName:1); |
| | | this.$message.success("操作成功!"); |
| | | } |
| | | }); |
| | |
| | | color:#318583; |
| | | } |
| | | .el-empty{ |
| | | height:100%; |
| | | height:calc(100% - 190px); |
| | | .el-empty__description p{ |
| | | font-size:16px!important; |
| | | color:#fff!important; |
| | |
| | | background: #09e5ed !important; |
| | | color: #333 !important; |
| | | } |
| | | .yuandian { |
| | | width: 35px; |
| | | height: 35px; |
| | | display:inline-block; |
| | | // background: #15d815; |
| | | background:red; |
| | | border-radius: 50%; |
| | | // margin-top:-5px; |
| | | vertical-align: middle; |
| | | } |
| | | .bottom_list { |
| | | position: relative; |
| | | padding: 10px; |
| | |
| | | padding: 0 10px; |
| | | background: rgb(22 72 173); |
| | | border-radius: 6px; |
| | | position:relative; |
| | | .gif{ |
| | | position:absolute; |
| | | right:15px; |
| | | top:10px; |
| | | width:35px; |
| | | vertical-align: middle; |
| | | img{ |
| | | width:100%; |
| | | } |
| | | } |
| | | // background: #233b9e; |
| | | .el-descriptions-row{ |
| | | height:45px; |
| | |
| | | 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%; |
| | |
| | | // float:left; |
| | | display:inline-block; |
| | | } |
| | | } |
| | | |
| | | .yuandian { |
| | | width: 25px; |
| | | height: 25px; |
| | | line-height: 40px; |
| | | margin-top: 12.5px; |
| | | display: inline-block; |
| | | background: #15d815; |
| | | display: block; |
| | | border-radius: 50%; |
| | | float: right; |
| | | } |
| | | } |
| | | .right-top-m-btn { |