| | |
| | | <!-- v-if="Tasks&&Tasks.length>0" --> |
| | | <template > |
| | | <div class="left"> |
| | | <p class="title"> |
| | | <template v-if="Number(ChannelAmount)>1"> |
| | | <div class="title"> |
| | | <div class="dashboard-channels"> |
| | | <template v-if="Number(ChannelAmount)>1"> |
| | | <span |
| | | class="font set-title" |
| | | style="float: left; margin-right: 15px;" |
| | |
| | | <img style="width:32px;" src="../../public/one.png" /> |
| | | </span> |
| | | </span> |
| | | <span class="font set-title" style="float: left;margin-right: 15px;" @click="cutClick(2)"> |
| | | <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)" |
| | | > |
| | | <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" |
| | | style="float: right" |
| | | @click="setUrl" |
| | | ></span> |
| | | <span |
| | | style="float: right;margin-right:20px;font-size:28px;line-height:25px;" |
| | | @click="taskClick" |
| | | > |
| | | </template> |
| | | </div> |
| | | <div class="dashboard-title"> |
| | | 智能工作台 — {{currentDeviceName}} |
| | | |
| | | <i @click="showDeviceModal=true" class="el-icon" style="font-size: 26px; height: 32px; color: #0db7f5; margin-left: 20px; cursor: pointer;"><svg data-v-c3da359e="" viewBox="0 0 24 24" width="1.2em" height="1.2em"><path fill="currentColor" d="M13 5h9v2h-9zM2 7h7v2h2V3H9v2H2zm7 10h13v2H9zm10-6h3v2h-3zm-2 4V9.012h-2V11H2v2h13v2zM7 21v-6H5v2H2v2h3v2z"></path></svg></i> |
| | | </div> |
| | | <div class="dashboard-btn"> |
| | | <span |
| | | class="font el-icon-setting set-title" |
| | | style="float: right" |
| | | @click="setUrl" |
| | | ></span> |
| | | <span |
| | | class="font el-icon-s-tools set-title" |
| | | style="float: right;margin-right: 6px" |
| | | @click="openParamsConfigModal" |
| | | ></span> |
| | | <span |
| | | style="float: right;margin-right:20px;font-size:28px;line-height:25px;" |
| | | @click="taskClick" |
| | | > |
| | | <el-badge :value="TaskCount" :class="(TaskCount==0||isTipShow)?'item color_666':'item color_fff'"> |
| | | <i class="el-icon-chat-dot-round" /> |
| | | </el-badge> |
| | | </span> |
| | | </p> |
| | | </div> |
| | | </div> |
| | | <div |
| | | :class="(activeName == 1||activeName == 3) ? 'active-one' : 'active-two'" |
| | | v-for="(taskData, index) in Tasks" |
| | |
| | | > |
| | | <template v-if="taskData"> |
| | | <div class="gong-date"> |
| | | 工序运行时间:{{ getFormatTime(taskData.Procedure.startTime) }} |
| | | 工序运行时间:{{ getTaskRunningTime(taskData.Procedure.realStartTime,taskData.Procedure.realEndTime) }} |
| | | </div> |
| | | <div class="statelist"> |
| | | <span class="title-item" |
| | |
| | | style="font-size: 35px; font-weight: 600" |
| | | class="color_green" |
| | | > |
| | | {{ taskData.finishNumber || 0 }}{{ taskData.Order.unit }} |
| | | {{ processingStatistics(taskData).finishNumber }} |
| | | <!-- {{ taskData.Order.unit }}--> |
| | | </dd> |
| | | </dl> |
| | | </div> |
| | |
| | | style="font-size: 35px; font-weight: 600" |
| | | class="color_green" |
| | | > |
| | | {{ taskData.Order.amount || 0 }}{{ taskData.Order.unit }} |
| | | {{ processingStatistics(taskData).totalNumber }} |
| | | <!-- {{ 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 class="gif" v-if="taskData.Procedure.ID" @click="processModelClick(taskData,index)"> |
| | | <img class="blink" v-if="taskData.isUpdateIcon" src="../../public/shan.gif" /> |
| | | <span v-else class="tip"></span> |
| | | </div> |
| | | <el-descriptions :column="(activeName == 1||activeName == 3) ? 2 : 1" :colon="true"> |
| | | <el-descriptions-item label="产品名称">{{ |
| | |
| | | {{ taskData.Procedure.procedure.workHours || "--" }} |
| | | </el-descriptions-item> |
| | | <el-descriptions-item label="计划时间" |
| | | >{{ formatDate(taskData.Order.startTime) || "--" }} |
| | | >{{ formatDate(taskData.Procedure.startTime) || "--" }} |
| | | - |
| | | {{ formatDate(taskData.Order.endTime) }}</el-descriptions-item |
| | | {{ formatDate(taskData.Procedure.endTime) }}</el-descriptions-item |
| | | > |
| | | <el-descriptions-item label="通道"> |
| | | {{ channelNameConfig[taskData.Channel] || "--" }} |
| | |
| | | text-color="#fff" |
| | | :text-inside="true" |
| | | :stroke-width="30" |
| | | :percentage=" |
| | | (taskData.Order && taskData.finishNumber != 0 && taskData.Order.amount) |
| | | ? parseInt( |
| | | (taskData.finishNumber / taskData.Order.amount) * |
| | | 100 |
| | | )>100?100:parseInt( |
| | | (taskData.finishNumber / taskData.Order.amount) * |
| | | 100 |
| | | ): 0 |
| | | " |
| | | :percentage="calculateProgress(processingStatistics(taskData))" |
| | | ></el-progress> |
| | | </el-descriptions-item> |
| | | <!-- <el-descriptions-item label="合格率" style="width: 100%"> |
| | |
| | | </div> |
| | | <div class="card_top-3"> |
| | | <span class="card-top-r-t" |
| | | >完成进度:{{ |
| | | (taskData.Order && taskData.finishNumber != 0 && taskData.Order.amount) |
| | | ? parseInt( |
| | | (taskData.finishNumber / |
| | | taskData.Order.amount) * |
| | | 100 |
| | | ) |
| | | : 0 |
| | | }}</span |
| | | >完成进度:{{calculateProgress(processingStatistics(taskData))}}</span |
| | | > |
| | | <span class="card-top-r-b"> |
| | | <el-progress |
| | |
| | | text-color="#fff" |
| | | :text-inside="true" |
| | | :stroke-width="10" |
| | | :percentage=" |
| | | (taskData.Order && taskData.finishNumber != 0) |
| | | ? parseInt( |
| | | (taskData.finishNumber / |
| | | taskData.Order.amount) * |
| | | 100 |
| | | )>100?100:parseInt( |
| | | (taskData.finishNumber / |
| | | taskData.Order.amount) * |
| | | 100 |
| | | ) |
| | | : 0 |
| | | " |
| | | :percentage="calculateProgress(processingStatistics(taskData))" |
| | | :show-text="false" |
| | | ></el-progress> |
| | | </span> |
| | | </div> |
| | | <div class="card_top-2"> |
| | | <div style="line-height: 45px; text-align: center"> |
| | | {{ taskData.Procedure.Status==3?'生产完成':'生产中' }} |
| | | {{ displayProcedureStatus(taskData) }} |
| | | </div> |
| | | <!-- <span class="card-top-r-t">完成进度:50%</span> |
| | | <span class="card-top-r-b">12月28日 08:24</span> --> |
| | |
| | | class="button-finish" |
| | | v-model="finishShow['finishShow&'+index]" |
| | | trigger="click" |
| | | :ref="'popoverRef_' + index" |
| | | > |
| | | <p><i class="el-icon-error" style="color:red;margin-right:5px;"/>请确认是否已完成该生产任务?</p> |
| | | <div style="text-align: right; margin: 0"> |
| | | <el-button size="mini" @click="finishShow['finishShow&'+index] = false"> |
| | | <el-button size="mini" @click="closePopover(index)"> |
| | | 取消</el-button |
| | | > |
| | | <el-button |
| | |
| | | </div> |
| | | <div class="right-top-m"> |
| | | 设备状态: |
| | | <!-- 1断开2生产3待机 --> |
| | | <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" /> |
| | | 断开 |
| | | <template v-for="(plcStatus, channel) in displayPLCStatus"> |
| | | <!-- 1断开2生产3待机 --> |
| | | <span class="plc-status" 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"/> |
| | | {{ plcStatus === 1 ? '断开' : (plcStatus === 2 ? '生产中' : '待机') }} |
| | | </span> |
| | | </el-popover> |
| | | <span v-else> |
| | | <img v-if="plcStatus == 1&&!plcNotConnected" src="../../public/duan.png" /> |
| | | <img v-else src="../../public/lian.png" /> |
| | | {{ plcStatus==1?'断开':(plcStatus==2?'生产中':'待机') }} |
| | | </span> |
| | | </span> |
| | | </template> |
| | | </div> |
| | | <div class="right-top-m-btn"> |
| | | <!-- <el-button type="primary" @click="controlClick"> 控制</el-button> --> |
| | |
| | | <div class="right-person-box" v-if="workers && workers.length > 0"> |
| | | <dl |
| | | class="right-small-person" |
| | | v-for="(item, index) in workers" |
| | | v-for="(item, index) in deduplicateWorkers(displayWorkers())" |
| | | :key="index" |
| | | > |
| | | <dt> |
| | |
| | | |
| | | </template> --> |
| | | <!-- 控制的弹框 --> |
| | | <AddControl ref="control" :Arr="Arr" /> |
| | | <!-- 控制的弹框 --> |
| | | <TaskControlModal |
| | | ref="control" |
| | | :activeName="activeName" |
| | |
| | | <ProcessModel |
| | | ref="processModel" |
| | | :listData="listData" |
| | | @updateGet="updateGet" |
| | | /> |
| | | <ParamsConfigModal :visible="paramsConfigIsShow" @close="closeParamsConfigModal"></ParamsConfigModal> |
| | | <DeviceSelectModal :visible.sync="showDeviceModal" @should-reload="reloadAllData"></DeviceSelectModal> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | import ProcessModel from "../components/ProcessModel.vue"; |
| | | import TaskControlModal from "@/components/TaskControlModal.vue"; |
| | | import {channelNameConfig} from "@/common/constants"; |
| | | import _ from 'lodash' |
| | | import ParamsConfigModal from "@/components/ParamsConfigModal.vue"; |
| | | import DeviceSelectModal from "@/components/DeviceSelectModal.vue"; |
| | | import {mapActions, mapGetters, mapState} from "vuex"; |
| | | export default { |
| | | components: { |
| | | DeviceSelectModal, |
| | | ParamsConfigModal, |
| | | TaskControlModal, |
| | | Card, |
| | | Knowledge, |
| | |
| | | }, |
| | | data() { |
| | | return { |
| | | showDeviceModal:false, |
| | | pollingTaskCountTimer: null, |
| | | activeName: 1, |
| | | progress: 70, //进度 |
| | |
| | | // 右侧完成 |
| | | finishShow:{}, |
| | | workers:[], |
| | | // 保存当前不同通道的值班人 |
| | | channelWorkersMap:{0:[],1:[]}, |
| | | TasksCopy:[], |
| | | Tasks: [ |
| | | { |
| | |
| | | cutdownTimer: null, |
| | | ProcessModelTimer: null, |
| | | TaskCount:0, |
| | | plcStatus:0, |
| | | PLCStatusMap:{0:0,1:0}, |
| | | isTipShow:false, |
| | | // isFinsh:0, |
| | | safeProduce:'', |
| | |
| | | procedureList: [], |
| | | }, |
| | | processList:[], |
| | | isUpdateIcon:false, |
| | | listData:[], |
| | | resResult:null, |
| | | resResult:[], |
| | | resprocInfoTimer:null, |
| | | channelNameConfig: channelNameConfig |
| | | channelNameConfig: channelNameConfig, |
| | | index:null, |
| | | paramsConfigIsShow:false |
| | | }; |
| | | }, |
| | | mounted() { |
| | |
| | | this.activeName = channelType |
| | | this.getTaskInfo(channelType); |
| | | this.getTaskCountStatistics() |
| | | this.getDeviceInfo() |
| | | }, |
| | | beforeDestroy() { |
| | | clearTimeout(this.pollingTaskCountTimer) |
| | |
| | | // } |
| | | // } |
| | | }, |
| | | computed:{ |
| | | ...mapState(['deviceInfo']), |
| | | ...mapGetters(['currentDeviceName']), |
| | | displayPLCStatus(){ |
| | | let PLCStatus = [] |
| | | if (this.activeName===1){ |
| | | PLCStatus =[this.PLCStatusMap[0]] |
| | | }else if (this.activeName===2){ |
| | | PLCStatus =[this.PLCStatusMap[0],this.PLCStatusMap[1]] |
| | | }else if (this.activeName===3){ |
| | | PLCStatus =[this.PLCStatusMap[1]] |
| | | }else { |
| | | return [] |
| | | } |
| | | |
| | | return PLCStatus |
| | | } |
| | | }, |
| | | methods: { |
| | | ...mapActions(["getDeviceInfo"]), |
| | | reloadAllData(){ |
| | | console.log(1) |
| | | this.getTaskInfo(this.activeName); |
| | | this.getTaskCountStatistics() |
| | | this.getDeviceInfo() |
| | | }, |
| | | newTaskPlaceholder(channel){ |
| | | return { |
| | | Order: {}, |
| | | Procedure: { |
| | | procedure: { inputMaterials: [], outputMaterials: [], workers: [] }, |
| | | }, |
| | | Channel:channel, |
| | | inputMaterials: [], |
| | | outputMaterials: [], |
| | | procedureList: [], |
| | | } |
| | | }, |
| | | /** |
| | | * 展示工序状态 |
| | | * 如果PLC的状态是待机要跟随PLC状态 |
| | | * @param taskData |
| | | * @return {string} |
| | | */ |
| | | displayProcedureStatus(taskData){ |
| | | if (taskData?.plcStatus === 3){ |
| | | return '待机' |
| | | } |
| | | if (!taskData?.Procedure?.Status){ |
| | | return '' |
| | | } |
| | | if (taskData.Procedure.Status===3){ |
| | | return '生产完成' |
| | | }else{ |
| | | return '生产中' |
| | | } |
| | | }, |
| | | /** |
| | | * 从任务中获取加工数和目标数 |
| | | * @param taskData |
| | | * @return {{totalNumber: number, finishNumber: number}} |
| | | */ |
| | | processingStatistics(taskData){ |
| | | const totalNumber = taskData?.totalNumber ?? 0 |
| | | const finishNumber = taskData?.finishNumber ?? 0 |
| | | |
| | | return { |
| | | /** 目标数 */ |
| | | totalNumber: +totalNumber, |
| | | /** 加工数 */ |
| | | finishNumber: +finishNumber, |
| | | } |
| | | }, |
| | | /** |
| | | * 计算生产进度 |
| | | * @param {{totalNumber: number, finishNumber: number}} statistics |
| | | * @return {number} 进度,0~100 |
| | | */ |
| | | calculateProgress(statistics){ |
| | | if (statistics.finishNumber === 0){ |
| | | return 0 |
| | | } |
| | | if (statistics.finishNumber === statistics.totalNumber){ |
| | | return 100 |
| | | } |
| | | |
| | | const result = Math.floor(statistics.finishNumber / statistics.totalNumber * 100) |
| | | return result > 100 ? 100 : result |
| | | }, |
| | | deduplicateWorkers(workers){ |
| | | return _.uniqBy(workers,ele=>ele.workerName) |
| | | }, |
| | | updateGet(number,val){ |
| | | if(val){ |
| | | this.getTaskInfo(this.activeName,'new') |
| | | return true; |
| | | } |
| | | this.listData.number=number |
| | | if(this.index){ |
| | | this.TasksCopy[this.index].number=number |
| | | } |
| | | }, |
| | | getModelList(){ |
| | | this.resResult=null |
| | | for (let i in this.TasksCopy){ |
| | | if(this.TasksCopy[i].Procedure.ID&&this.TasksCopy[i].number){ |
| | | this.TasksCopy[i].isUpdateIcon=false; |
| | | // number:this.TasksCopy[i].number |
| | | if(this.TasksCopy[i].Procedure.ID){ |
| | | 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; |
| | | for(let j in this.processList){ |
| | | if(this.processList[j].isUpdate){ |
| | | this.TasksCopy[i].isUpdateIcon=true; |
| | | this.$forceUpdate() |
| | | break; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | this.resResult=res; |
| | | this.resResult[i]=res; |
| | | // console.log( this.resResult[i],'===res111') |
| | | }) |
| | | } |
| | | } |
| | | }, |
| | | processModelClick(list){ |
| | | processModelClick(list,index){ |
| | | this.listData=list; |
| | | this.index=index |
| | | if( Object.keys(this.listData).length > 0){ |
| | | if(this.listData.Procedure.ID&&this.listData.number){ |
| | | if(this.listData.Procedure.ID){ |
| | | this.$refs.processModel.islook=true |
| | | return true; |
| | | } |
| | | } |
| | | this.$message.error('当前工序无编号,无法查看工序!') |
| | | }, |
| | | getProcessModelList(){ |
| | | this.getModelList() |
| | | if (!this.ProcessModelTimer&&!this.resResult) { |
| | | let string=false; |
| | | if(this.resResult.length>0){ |
| | | for(let i in this.resResult){ |
| | | if(this.resResult[i]){ |
| | | string=false; |
| | | } |
| | | } |
| | | } |
| | | if (!this.ProcessModelTimer&&!string) { |
| | | this.ProcessModelTimer = setInterval(() => { |
| | | this.resResult=[] |
| | | this.getModelList(); |
| | | }, 10000) |
| | | }, 5000) |
| | | } |
| | | }, |
| | | mergeProcessParams(params){ |
| | |
| | | let now = new Date(); |
| | | this.formatTime2 = this.getDateObj(now, "yyyy年MM月dd日"); |
| | | }, |
| | | getFormatTime(date){ |
| | | const getCha=()=>{ |
| | | let now=new Date().getTime() |
| | | let String=now-date*1000; |
| | | let seconds=Math.floor(String/1000) |
| | | let minutes=Math.floor(seconds/60) |
| | | |
| | | let days=Math.floor(String/1000/60/60/24) |
| | | let hours=Math.floor(minutes/60)-days*24 |
| | | let m=minutes-days*24*60-hours*60 |
| | | return days+'天'+hours+'时'+m+'分' |
| | | /** |
| | | * 计算时间段, 注意参数要求时间戳为 JS Date 的13位时间戳 |
| | | * @param {number} startTime |
| | | * @param {number} endTime |
| | | * @return {string} |
| | | */ |
| | | calcRunningDuration(startTime,endTime){ |
| | | let timeDuration=endTime-startTime; |
| | | if (timeDuration<0){ |
| | | return '0天0时0分' |
| | | } |
| | | let d= getCha() |
| | | |
| | | let seconds=Math.floor(timeDuration/1000) |
| | | let minutes=Math.floor(seconds/60) |
| | | |
| | | let days=Math.floor(timeDuration/1000/60/60/24) |
| | | let hours=Math.floor(minutes/60)-days*24 |
| | | let m=minutes-days*24*60-hours*60 |
| | | return `${days}天${hours}时${m}分` |
| | | }, |
| | | |
| | | /** |
| | | * 工序运行时间 |
| | | * 根据接口返回 realStartTime realEndTime 判断如何展示 |
| | | * 如果 realEndTime 为 0 则 用当前时间 - realStartTime |
| | | * 如果 存在 realEndTime, 则 realEndTime - realStartTime |
| | | * 注意 realStartTime realEndTime 是接口返回的10位时间戳 |
| | | * @param realStartTime |
| | | * @param realEndTime |
| | | * @return {string} |
| | | */ |
| | | getTaskRunningTime(realStartTime,realEndTime){ |
| | | const getInfo = ()=>{ |
| | | if (!realStartTime && !realEndTime){ |
| | | return '--' |
| | | } |
| | | if(!realEndTime){ |
| | | const now = Math.floor(new Date().getTime()/1000) * 1000 |
| | | return this.calcRunningDuration(realStartTime*1000,now) |
| | | } |
| | | |
| | | return this.calcRunningDuration(realStartTime*1000,realEndTime*1000) |
| | | } |
| | | |
| | | let result = getInfo() |
| | | setInterval(() => { |
| | | d= getCha(); |
| | | result = getInfo(); |
| | | }, 6000); |
| | | return date?d:'--'; |
| | | return result; |
| | | }, |
| | | setInterCard(value, name, i) { |
| | | if (this.TasksCopy[i].Procedure.procedure[value]!=null) { |
| | |
| | | getTaskInfo({taskMode:1}).then((res) => { |
| | | if (res.code === 200&&res.data) { |
| | | this.TaskCount=res.data?.TaskCount ?? 0 |
| | | }else { |
| | | this.TaskCount = 0 |
| | | } |
| | | },err=>{ |
| | | this.TaskCount = 0 |
| | |
| | | }).finally(()=>{ |
| | | this.pollingTaskCountTimer = setTimeout(()=>{ |
| | | this.getTaskCountStatistics() |
| | | // 20秒一次轮询 |
| | | },20000) |
| | | // 20秒一次轮询 // 改一分钟 |
| | | },60000) |
| | | }); |
| | | }, |
| | | |
| | | getTaskInfo(val) { |
| | | /** |
| | | * 根据当前展示的是0通道还是1通道还是两个通道展示对应的值班人 |
| | | * @return {*[]} |
| | | */ |
| | | displayWorkers(){ |
| | | let showWorkers = [] |
| | | if (this.activeName===1){ |
| | | showWorkers =[...this.channelWorkersMap[0]] |
| | | }else if (this.activeName===2){ |
| | | showWorkers =[...this.channelWorkersMap[0],...this.channelWorkersMap[1]] |
| | | }else if (this.activeName===3){ |
| | | showWorkers =[...this.channelWorkersMap[1]] |
| | | }else { |
| | | return [] |
| | | } |
| | | |
| | | return showWorkers |
| | | }, |
| | | |
| | | getTaskInfo(val,info) { |
| | | this.Tasks = []; |
| | | 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.Channel - b.Channel) |
| | | }) |
| | | } |
| | | this.TasksCopy = res.data.Tasks ? res.data.Tasks : []; |
| | | this.TasksCopy = 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 |
| | | this.plcNotConnected=res.data.Prompt.plcNotConnected ?? '' |
| | | this.ChannelAmount=res.data.ChannelAmount ?? 1 |
| | | // if(this.ChannelAmount>1 &&this.TasksCopy.length<2){ |
| | | // this.TasksCopy.push(this.object) |
| | | // } |
| | | this.TaskCount=res.data.TaskCount?res.data.TaskCount:0 |
| | | this.TaskCount=res.data.TaskCount ?? 0 |
| | | |
| | | if ((this.TasksCopy.length ==0 )||!this.TasksCopy) { |
| | | if (this.activeName == 1||this.activeName == 3) { |
| | | this.TasksCopy.push(this.object); |
| | | } else { |
| | | this.TasksCopy.push(this.object); |
| | | this.TasksCopy.push(this.object); |
| | | } |
| | | } |
| | | // 找出缺少任务数据的通道, 使用占位数据占住对应通道 |
| | | const channelNumbers = this.TasksCopy.map(task=>task.Channel) |
| | | const allChannels = [0,1]; |
| | | const lackChannels = _.chain(allChannels).difference(channelNumbers).value() |
| | | lackChannels.forEach(channel => this.TasksCopy.push(this.newTaskPlaceholder(channel))) |
| | | this.TasksCopy.sort((a,b)=>a.Channel - b.Channel) |
| | | |
| | | this.workers=res.data.workers?res.data.workers:[] |
| | | |
| | | // 将值班人根据通道号分组 |
| | | const groupByChannel= _.groupBy(res.data.Tasks,ele=>ele.Channel) |
| | | const taskList0= _.first(groupByChannel[0]) |
| | | const taskList1= _.first(groupByChannel[1]) |
| | | const worker0List = taskList0?.Procedure?.procedure?.workers ?? [] |
| | | const worker1List = taskList1?.Procedure?.procedure?.workers ?? [] |
| | | this.channelWorkersMap['0'] =worker0List |
| | | this.channelWorkersMap['1'] =worker1List |
| | | |
| | | for (let i in this.TasksCopy) { |
| | | this.TasksCopy[i].procedureList = []; |
| | | this.TasksCopy[i].inputMaterials = []; |
| | | this.TasksCopy[i].outputMaterials = []; |
| | | this.TasksCopy[i].finishNumber = 0; |
| | | this.TasksCopy[i].totalNumber = 0; |
| | | this.TasksCopy[i].plcStatus = 0; |
| | | this.TasksCopy[i].number=0; |
| | | this.TasksCopy[i].isUpdateIcon=false; |
| | | this.finishShow['finishShow&'+i]=false |
| | | this.TasksCopy[i].Procedure.procedure.workers = this.TasksCopy[i].Procedure |
| | | .procedure.workers |
| | |
| | | }); |
| | | this.TasksCopy[i].Arr=res.data.Params ? res.data.Params : [] |
| | | // this.isFinsh=Number(i)+1 |
| | | this.$forceUpdate() |
| | | } |
| | | }); |
| | | } |
| | | this.setInterCard("inputMaterials", "cardBox1&" + i, i); |
| | | this.setInterCard("outputMaterials", "cardBox3&" + i, i); |
| | | } |
| | | this.getProcessModelList(); |
| | | this.getStartArr() |
| | | if(this.ChannelAmount===1){ |
| | | this.cutClick(1) |
| | | }else{ |
| | | this.cutClick(val?val:1) |
| | | } |
| | | |
| | | if(info=='new'){ |
| | | return true; |
| | | } |
| | | |
| | | this.getProgressInfo(); |
| | | if (!this.procInfoTimer&&!this.resprocInfoTimer) { |
| | | this.procInfoTimer = setInterval(() => { |
| | | this.getProgressInfo(); |
| | | }, 3000); |
| | | } |
| | | this.getProcessModelList(); |
| | | }else{ |
| | | this.TaskCount = 0 |
| | | const allChannels = [0,1]; |
| | | this.workers = [] |
| | | allChannels.forEach(channel => this.TasksCopy.push(this.newTaskPlaceholder(channel))) |
| | | this.TasksCopy.sort((a,b)=>a.Channel - b.Channel) |
| | | this.cutClick(1) |
| | | this.getProgressInfo(); |
| | | if (!this.procInfoTimer&&!this.resprocInfoTimer) { |
| | | this.procInfoTimer = setInterval(() => { |
| | | this.getProgressInfo(); |
| | | }, 3000); |
| | | } |
| | | } |
| | | // if (res.code != 200 || this.TasksCopy.length == 0) { |
| | | // this.getcountdown(); |
| | |
| | | // }, 60000); |
| | | // } |
| | | // } |
| | | this.cutClick(val?val:1) |
| | | |
| | | },err=>{ |
| | | console.error(err) |
| | | this.TaskCount = 0 |
| | | const allChannels = [0,1]; |
| | | this.workers = [] |
| | | allChannels.forEach(channel => this.TasksCopy.push(this.newTaskPlaceholder(channel))) |
| | | this.TasksCopy.sort((a,b)=>a.Channel - b.Channel) |
| | | this.cutClick(1) |
| | | }); |
| | | // this.TasksCopy.push(this.object) |
| | | // this.TasksCopy.push(this.object) |
| | |
| | | getProgressInfo() { |
| | | this.resprocInfoTimer=null |
| | | for (let i in this.TasksCopy){ |
| | | if(this.TasksCopy[i].Procedure.ID){ |
| | | getProgress({ |
| | | channel: Number(i), |
| | | procedureId: this.TasksCopy[i].Procedure.ID, |
| | | }).then((res) => { |
| | | if (res.code == 200) { |
| | | this.TasksCopy[i].finishNumber = res.data.finishNumber |
| | | ? res.data.finishNumber |
| | | : 0; |
| | | this.plcStatus=res.data.plcStatus?res.data.plcStatus:0 |
| | | this.TasksCopy[i].finishNumber = res.data?.finishNumber ?? 0; |
| | | this.TasksCopy[i].totalNumber = res.data?.totalNumber ?? 0; |
| | | this.TasksCopy[i].plcStatus = res.data?.plcStatus ?? 0 |
| | | this.PLCStatusMap[i] = res.data?.plcStatus ?? 0 |
| | | } |
| | | this.resprocInfoTimer=res; |
| | | }); |
| | | } |
| | | } |
| | | }, |
| | | // 设置 |
| | |
| | | this.$router.push({ |
| | | path: "/set", |
| | | }); |
| | | }, |
| | | openParamsConfigModal(){ |
| | | this.paramsConfigIsShow=true |
| | | }, |
| | | closeParamsConfigModal(){ |
| | | this.paramsConfigIsShow=false |
| | | }, |
| | | // 右侧控制 |
| | | controlClick() { |
| | |
| | | } else { |
| | | this.$message.error("当前设备没有工序!"); |
| | | } |
| | | }, |
| | | |
| | | /** |
| | | * 关闭 tooltip |
| | | * @param index |
| | | */ |
| | | closePopover(index){ |
| | | this.finishShow['finishShow&'+index] = false |
| | | this.$refs?.['popoverRef_' + index]?.[0]?.doClose() |
| | | }, |
| | | getRandomNumber(min, max) { |
| | | return Math.floor(Math.random() * (max - min + 1) + min); |
| | |
| | | // margin-top:-5px; |
| | | vertical-align: middle; |
| | | } |
| | | |
| | | |
| | | .tip { |
| | | display:inline-block; |
| | | // background: #15d815; |
| | | background:red; |
| | | border-radius: 50%; |
| | | // margin-top:-5px; |
| | | vertical-align: middle; |
| | | } |
| | | .blink{ |
| | | display: inline-block; |
| | | width: 14px; |
| | | height: 14px; |
| | | } |
| | | .tip, .blink{ |
| | | position: absolute; |
| | | top: -6px; |
| | | right: -6px; |
| | | width: 14px; |
| | | height: 14px; |
| | | } |
| | | .bottom_list { |
| | | position: relative; |
| | | padding: 10px; |
| | |
| | | padding: 30px; |
| | | padding-top: 20px; |
| | | .title { |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | font-size: 30px; |
| | | font-weight: 600; |
| | | height:40px; |
| | |
| | | width: 100%; |
| | | height: 30px; |
| | | // text-align: left; |
| | | font-size: 24px; |
| | | font-size: 28px!important; |
| | | margin: 0; |
| | | text-align: center; |
| | | line-height: 36px; |
| | |
| | | border-radius: 6px; |
| | | position:relative; |
| | | .gif{ |
| | | background: url("../../public/setting.png") no-repeat; |
| | | background-size:100% 100%; |
| | | position:absolute; |
| | | right:15px; |
| | | top:10px; |
| | | width:35px; |
| | | height: 35px; |
| | | vertical-align: middle; |
| | | cursor:pointer; |
| | | img{ |
| | | width:100%; |
| | | } |
| | | //img{ |
| | | // width:100%; |
| | | //} |
| | | } |
| | | // background: #233b9e; |
| | | .el-descriptions-row{ |
| | |
| | | white-space:nowrap; |
| | | } |
| | | .card_top-2{ |
| | | width:35%; |
| | | width:38%; |
| | | } |
| | | .card-top-input-out-r, |
| | | .card_top-3 { |
| | | width:65%; |
| | | width:62%; |
| | | } |
| | | .card_top-2,.card-top-input-out-r, |
| | | .card_top-3 { |
| | |
| | | padding: 12px; |
| | | } |
| | | } |
| | | .plc-status{ |
| | | margin-right: 24px; |
| | | position: relative; |
| | | display: inline-block; |
| | | height: 50px; |
| | | &:after{ |
| | | content: ''; |
| | | position: absolute; |
| | | top: 50%; |
| | | right: -12px; |
| | | margin-top: -15px; |
| | | border-right: 2px solid #ffffff; |
| | | height: 30px; |
| | | } |
| | | } |
| | | .plc-status:last-child{ |
| | | &:after{ |
| | | display: none; |
| | | } |
| | | } |
| | | .dashboard-title{ |
| | | display: flex; |
| | | align-items: center; |
| | | } |
| | | </style> |