|
<template>
|
<div class="home">
|
<!-- -->
|
<template v-if="Tasks&&Tasks.length>0">
|
<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" @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 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"
|
>
|
<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
|
:class="activeName == 1 ? 'active-one' : 'active-two'"
|
v-for="(taskData, index) in Tasks"
|
:key="index"
|
>
|
<template v-if="taskData">
|
<div class="gong-date">
|
工序运行时间：{{ getFormatTime(taskData.Procedure.startTime) }}
|
</div>
|
<div class="statelist">
|
<span class="title-item"
|
>工单编号:
|
<span class="color_4efefa">{{
|
taskData.Order.workOrderId || "--"
|
}}</span>
|
</span>
|
<span class="title-item"
|
>当前工序:
|
<span class="color_4efefa">{{
|
taskData.Procedure.procedure.procedureName || "--"
|
}}</span>
|
</span>
|
<span class="title-item"
|
>后道工序:
|
<span class="color_4efefa">
|
{{ taskData.Procedure.procedure.nextProcedureName || "--" }}
|
</span>
|
</span>
|
<!-- <span class="title-item"
|
>工作人数:
|
<span class="color_4efefa">
|
<span
|
v-if="
|
taskData.Procedure.procedure &&
|
taskData.Procedure.procedure.workers
|
"
|
>{{ taskData.Procedure.procedure.workers.length }}</span
|
>
|
<span v-else>0</span>
|
人
|
</span>
|
</span> -->
|
</div>
|
<div class="gongx">
|
<el-steps v-if="taskData.AllProcedures" :active="taskData.CurrentProcedureIndex?taskData.CurrentProcedureIndex:0" finish-status="success" class="steps">
|
<el-step icon="" :title="item" v-for="(item,index) in taskData.AllProcedures" :key="index"></el-step>
|
</el-steps>
|
</div>
|
<div class="content">
|
<div class="content_left">
|
<div class="content-top">
|
<div class="small_title">加工数</div>
|
<div class="content_leftBttom">
|
<dl>
|
<dd
|
style="font-size: 35px; font-weight: 600"
|
class="color_green"
|
>
|
{{ taskData.finishNumber }}{{ taskData.Order.unit }}
|
</dd>
|
</dl>
|
</div>
|
</div>
|
<div class="content-top">
|
<div class="small_title">目标数</div>
|
<div class="content_leftBttom">
|
<dl>
|
<dd
|
style="font-size: 35px; font-weight: 600"
|
class="color_green"
|
>
|
{{ taskData.Order.amount || 0 }}{{ taskData.Order.unit }}
|
</dd>
|
</dl>
|
</div>
|
</div>
|
</div>
|
<div class="content_right">
|
<el-descriptions :column="activeName == 1 ? 2 : 1" :colon="true">
|
<el-descriptions-item label="产品名称">{{
|
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 || ""
|
}}</el-descriptions-item>
|
<el-descriptions-item label="工时">
|
{{ taskData.Procedure.procedure.workHours || "" }}
|
</el-descriptions-item>
|
<el-descriptions-item label="计划时间"
|
>{{ formatDate(taskData.Order.startTime) || "" }}
|
-
|
{{ formatDate(taskData.Order.endTime) }}</el-descriptions-item
|
>
|
<el-descriptions-item label="货物描述">{{
|
taskData.Order.orderAttr || ""
|
}}</el-descriptions-item>
|
<el-descriptions-item label="客户名称">{{
|
taskData.Order.customer || ""
|
}}</el-descriptions-item>
|
<el-descriptions-item label="参数要求">{{
|
taskData.Order.parameter || ""
|
}}</el-descriptions-item>
|
</el-descriptions>
|
<el-descriptions :column="1" :colon="true">
|
<el-descriptions-item label="完成度" style="width: 100%">
|
<!--:text-format="format" -->
|
<el-progress
|
define-back-color="#133EAF"
|
color="#09E5ED"
|
text-color="#fff"
|
:text-inside="true"
|
:stroke-width="30"
|
:percentage="
|
(taskData.Order && taskData.finishNumber != 0)
|
? parseInt(
|
(taskData.finishNumber / taskData.Order.amount) *
|
100
|
)>100?100:parseInt(
|
(taskData.finishNumber / taskData.Order.amount) *
|
100
|
): 0
|
"
|
></el-progress>
|
</el-descriptions-item>
|
<!-- <el-descriptions-item label="合格率" style="width: 100%">
|
<el-progress
|
define-back-color="#007101"
|
color="#00CC66"
|
text-color="#fff"
|
:text-inside="true"
|
:stroke-width="30"
|
:percentage="passrate"
|
></el-progress>
|
</el-descriptions-item> -->
|
</el-descriptions>
|
</div>
|
</div>
|
<div class="bottom">
|
<div class="bottom_list">
|
<div class="bottom-title">输入资源</div>
|
<el-carousel
|
direction="vertical"
|
height="calc(100% - 0px)"
|
:interval="500"
|
class="card-box"
|
:ref="'cardBox1&' + index"
|
v-if="
|
taskData.Procedure.procedure &&
|
taskData.Procedure.procedure.inputMaterials
|
"
|
>
|
<el-carousel-item
|
:key="index"
|
v-for="(item, index) in taskData.inputMaterials"
|
>
|
<div
|
class="card"
|
:key="index2"
|
v-for="(list, index2) in item"
|
>
|
<div class="card_content">
|
<div class="card_contentLeft">{{ list.materialId }}</div>
|
</div>
|
<div class="card_top">
|
<div>
|
<!-- 设备12<i
|
style="font-size: 14px"
|
class="el-icon-right font-arrow-20"
|
></i>
|
设备13 -->
|
{{ list.materialName }}
|
</div>
|
</div>
|
<div class="card_top2">
|
<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>
|
</el-carousel-item>
|
</el-carousel>
|
<el-button type="primary" class="color_f70f83">
|
<i class="el-icon-phone-outline" />物料呼叫</el-button
|
>
|
</div>
|
<i class="el-icon-arrow-right font-arrow-20 color_4efefa"></i>
|
<div class="bottom_list">
|
<div class="bottom-title">
|
当前工序:{{ taskData.Procedure.procedure.procedureName || "" }}
|
</div>
|
<el-carousel
|
direction="vertical"
|
height="calc(100% - 0px)"
|
:interval="500"
|
class="card-box"
|
:ref="'cardBox2&' + index"
|
v-if="taskData.Procedure.procedure && taskData.procedureList"
|
>
|
<el-carousel-item
|
:key="index"
|
v-for="(item, index) in taskData.procedureList"
|
>
|
<div
|
class="card"
|
:key="index2"
|
v-for="(list, index2) in item"
|
>
|
<template v-if="list.name == '工序'">
|
<div class="card_content">
|
<div class="card_contentLeft color_blue font_dian">
|
<!-- {{ list.deviceName }} -->
|
<el-tooltip
|
effect="dark"
|
popper-class="tooltip-width-200"
|
:content="list.deviceName"
|
placement="top-start"
|
>
|
<span>{{ list.deviceName }}</span>
|
</el-tooltip>
|
<!-- <span style="float: right">6m/s</span> -->
|
</div>
|
</div>
|
<div class="card_top-3">
|
<span class="card-top-r-t"
|
>完成进度：{{
|
taskData.Order && taskData.finishNumber != 0
|
? parseInt(
|
(taskData.finishNumber /
|
taskData.Order.amount) *
|
100
|
)
|
: 0
|
}}</span
|
>
|
<span class="card-top-r-b">
|
<el-progress
|
define-back-color="#133EAF"
|
color="#09E5ED"
|
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
|
"
|
:show-text="false"
|
></el-progress>
|
</span>
|
</div>
|
<div class="card_top-2">
|
<div style="line-height: 45px; text-align: center">
|
生产中
|
</div>
|
<!-- <span class="card-top-r-t">完成进度：50%</span>
|
<span class="card-top-r-b">12月28日 08:24</span> -->
|
</div>
|
</template>
|
<template v-else>
|
<!-- <div class="card_content">
|
|
</div> -->
|
<div :class="activeName==1?'card_top-4 font_size_20px':'card_top-4'">
|
<div>工艺编号：<div >{{ list.number }}</div></div>
|
<!-- <div
|
style="
|
font-size: 14px;
|
color: #cfcfcf;
|
line-height: 20px;
|
"
|
>
|
工艺的具体信息请点击控制查看！
|
</div> -->
|
</div>
|
</template>
|
</div>
|
</el-carousel-item>
|
</el-carousel>
|
|
<p
|
style="font-size: 22px; margin-left: 12px; margin-top: 50px"
|
></p>
|
<div class="right-small-btn">
|
<el-button type="primary"> 打印</el-button>
|
<el-popover
|
placement="top-end"
|
width="160"
|
class="button-finish"
|
v-model="finishShow['finishShow&'+index]"
|
trigger="click"
|
>
|
<p>请确认是否已完成该生产任务?</p>
|
<div style="text-align: right; margin: 0">
|
<el-button size="mini" @click="finishShow['finishShow&'+index] = false">
|
取消</el-button
|
>
|
<el-button
|
type="primary"
|
size="mini"
|
@click="finishClick(index, taskData)"
|
>
|
确定</el-button
|
>
|
</div>
|
<el-button type="primary" slot="reference"> 完成</el-button>
|
</el-popover>
|
</div>
|
</div>
|
<i class="el-icon-arrow-right font-arrow-20 color_4efefa"></i>
|
<div class="bottom_list">
|
<div class="bottom-title">
|
<span>输出资源</span>
|
</div>
|
<el-carousel
|
direction="vertical"
|
height="calc(100% - 0px)"
|
:interval="500"
|
:ref="'cardBox3&' + index"
|
class="card-box"
|
v-if="
|
taskData.Procedure.procedure &&
|
taskData.Procedure.procedure.outputMaterials
|
"
|
>
|
<el-carousel-item
|
:key="index"
|
v-for="(item, index) in taskData.outputMaterials"
|
>
|
<div
|
class="card-box"
|
:key="index2"
|
v-for="(list, index2) in item"
|
>
|
<div class="card">
|
<div class="card_content">
|
<div class="card_contentLeft">
|
{{ list.materialId }}
|
</div>
|
</div>
|
<div class="card_top">
|
<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 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">
|
<i class="el-icon-phone-outline" />运输呼叫</el-button
|
>
|
</div>
|
</div>
|
</template>
|
<!-- 2个任务的时候，第二个任务为空的时候显示 -->
|
<template
|
v-if="activeName == 2 &&(!taskData||Object.keys(taskData).length==0)"
|
>
|
<el-empty description="暂无任务..."></el-empty>
|
</template>
|
</div>
|
</div>
|
<div class="right">
|
<div class="right_top">
|
<div class="right-top-l">作业状态</div>
|
<div class="time">
|
<dl>
|
<dd>
|
<span style="font-size: 32px">{{ formatTime3 }}</span>
|
</dd>
|
<dd>
|
<span style="font-size: 12px">{{ formatTime2 }}</span>
|
<!--margin-right: 10px <span style="font-size: 14px">星期四</span> -->
|
</dd>
|
</dl>
|
</div>
|
</div>
|
<div class="right-top-m">
|
设备状态:
|
<!-- 1断开2生产3待机 -->
|
<span style="position: relative"
|
>
|
<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>
|
</div>
|
<div class="right-top-m-btn">
|
<!-- <el-button type="primary" @click="controlClick"> 控制</el-button> -->
|
</div>
|
<div class="right_dutyLst">
|
<div class="right-small-title">当前值班</div>
|
|
<div class="right-person-box" v-if="workers && workers.length > 0">
|
<dl
|
class="right-small-person"
|
v-for="(item, index) in workers"
|
:key="index"
|
>
|
<dt>
|
<!-- <el-avatar
|
class="img-class"
|
src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
|
></el-avatar> -->
|
<i
|
class="el-icon-s-custom"
|
style="margin: 10px; font-size: 40px"
|
/>
|
</dt>
|
<span
|
style="font-size: 20px; font-weight: 600; margin-right: 10px"
|
>{{ item.workerName || "" }}</span
|
>
|
<!-- <span>{{ item.phoneNum || "" }}</span> -->
|
<span class="color_yellow"><i class="el-icon-star-on" /><i class="el-icon-star-on" /><i class="el-icon-star-on" /><i class="el-icon-star-on" /><i class="el-icon-star-on" /></span>
|
</dl>
|
|
</div>
|
|
<!-- <div
|
style="
|
width: 100%;
|
font-size: 18px;
|
font-weight: 600;
|
margin-top: 50px;
|
text-align: center;
|
line-height: 50px;
|
"
|
>
|
编号：{{ taskData.Procedure.procedure.workers.workerId || "" }}
|
</div> -->
|
</div>
|
<div class="right_base">
|
<div class="right-small-title" style="line-height: 40px">知识库</div>
|
<Knowledge />
|
<div class="right-base-btn call">
|
<el-button type="primary"
|
><i class="el-icon-phone-outline" /> 红灯呼叫</el-button
|
>
|
</div>
|
</div>
|
</div>
|
</template>
|
<!-- -->
|
<template v-else>
|
<div class="home-img-box">
|
<div class="bg-title">
|
<img src="../../public/bg-title.png" />
|
<span class="bg-title-span">设备实时生产看板</span>
|
<div class="bg-date">
|
<span>{{ formatTime3 }}</span
|
><br />{{ formatTime2 }}
|
</div>
|
<span
|
class="font el-icon-setting set-title bg-set"
|
@click="setUrl"
|
></span>
|
</div>
|
<div class="yuan">
|
<img src="../../public/yuan.png" />
|
<div class="btn-img">
|
<div class="font_size_16" style="line-height: 5; margin-top: 18%">
|
<span v-if="showCountDown"
|
>距离任务开始时间：
|
<span class="color_red">{{ countDownHour }}</span
|
>时 <span class="color_red">{{ countDownMinute }}</span
|
>分</span
|
>
|
<span v-else>暂无任务，休息一下吧...</span>
|
</div>
|
<el-button type="primary" @click="reloadPage">刷新任务</el-button>
|
</div>
|
</div>
|
</div>
|
</template>
|
<!-- 控制的弹框 -->
|
<AddControl ref="control" :Arr="Arr" />
|
<!-- 控制的弹框 -->
|
<AddIssue
|
ref="control"
|
:Arr="Arr"
|
:taskData="taskData"
|
:Order="taskData.Order"
|
@getSetProductNumber="getTaskInfo"
|
@isTip="isTip"
|
/>
|
</div>
|
</template>
|
|
<script>
|
import {
|
getTaskInfo,
|
finishTask,
|
getMiniDictList,
|
saveMiniDict,
|
startTask,
|
getProgress,
|
countdown,
|
} 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";
|
export default {
|
components: {
|
Card,
|
Knowledge,
|
AddControl,
|
AddIssue,
|
},
|
data() {
|
return {
|
activeName: 1,
|
progress: 70, //进度
|
passrate: 30, //合格率
|
production: 25, //生产中
|
formatTime2: "",
|
formatTime3: "",
|
// 右侧完成
|
finishShow:{},
|
workers:[],
|
Tasks: [
|
{
|
Order: {
|
amount: "",
|
customer: "",
|
deliverDate: "",
|
endTime: "",
|
orderAttr: [],
|
orderId: "",
|
parameter: "",
|
productId: "",
|
productName: "",
|
startTime: "",
|
unit: "",
|
},
|
Procedure: {
|
id: 1,
|
procedure: {
|
deviceId: "",
|
endTime: "",
|
inputMaterials: [
|
{
|
amount: 1,
|
materialId: 1,
|
materialName: 1,
|
},
|
],
|
outputMaterials: [],
|
procedureId: "",
|
procedureName: "",
|
startTime: "",
|
workHours: "",
|
},
|
},
|
inputMaterials: [],
|
outputMaterials: [],
|
procedureList: [],
|
},
|
],
|
taskData: {
|
Order: {
|
amount: "",
|
customer: "",
|
deliverDate: "",
|
endTime: "",
|
orderAttr: [],
|
orderId: "",
|
parameter: "",
|
productId: "",
|
productName: "",
|
startTime: "",
|
unit: "",
|
},
|
Procedure: {
|
id: 1,
|
procedure: {
|
deviceId: "",
|
endTime: "",
|
inputMaterials: [
|
{
|
amount: 1,
|
materialId: 1,
|
materialName: 1,
|
},
|
],
|
outputMaterials: [],
|
procedureId: "",
|
procedureName: "",
|
startTime: "",
|
workHours: "",
|
workers: [
|
{
|
phoneNum: "",
|
workerId: "",
|
workerName: "",
|
},
|
],
|
},
|
},
|
},
|
totalNumber: 0,
|
showCountDown: false,
|
countDownHour: 0,
|
countDownMinute: 0,
|
Arr: [],
|
// 记录定时器状态
|
procInfoTimer: null,
|
cutdownTimer: null,
|
TaskCount:0,
|
plcStatus:1,
|
isTipShow:false,
|
};
|
},
|
mounted() {
|
// setInterval(() => {
|
// this.progress = this.getRandomNumber(1, 100);
|
// this.passrate = this.getRandomNumber(1, 100);
|
// this.production = this.getRandomNumber(1, 100);
|
// }, 3000);
|
this.getDate3();
|
this.getDate2();
|
setInterval(() => {
|
this.getDate3();
|
this.getDate2();
|
}, 5000);
|
this.getTaskInfo();
|
},
|
methods: {
|
taskClick(){
|
if(this.TaskCount>0){
|
for(let i in this.Tasks){
|
if(this.Tasks[i].Procedure.Status==1){
|
this.isTipShow=false
|
break;
|
}
|
}
|
if(!this.isTipShow){
|
this.$refs.control.islook=true
|
}
|
}else{
|
this.$message.error('目前没有任务！')
|
}
|
},
|
isTip(val){
|
this.isTipShow=val
|
},
|
cutClick(val) {
|
this.activeName = val;
|
this.getTaskInfo();
|
},
|
reloadPage() {
|
// window.location.reload();
|
this.getTaskInfo();
|
},
|
getcountdown() {
|
countdown().then((res) => {
|
if (res.code == 200) {
|
this.showCountDown = res.data.ShowCountDown
|
? res.data.ShowCountDown
|
: false;
|
this.countDownHour = res.data.CountDownHour
|
? res.data.CountDownHour
|
: 0;
|
this.countDownMinute = res.data.CountDownMinute
|
? res.data.CountDownMinute
|
: 0;
|
}
|
});
|
},
|
|
getDateObj(date, fmt) {
|
if (/(y+)/.test(fmt)) {
|
fmt = fmt.replace(
|
RegExp.$1,
|
(date.getFullYear() + "").substr(4 - RegExp.$1.length)
|
);
|
}
|
let o = {
|
"M+": date.getMonth() + 1,
|
"d+": date.getDate(),
|
"h+": date.getHours(),
|
"m+": date.getMinutes(),
|
"s+": date.getSeconds(),
|
};
|
for (let k in o) {
|
if (new RegExp(`(${k})`).test(fmt)) {
|
let str = o[k] + "";
|
fmt = fmt.replace(
|
RegExp.$1,
|
RegExp.$1.length === 1 ? str : this.padLeftZero(str)
|
);
|
}
|
}
|
return fmt;
|
},
|
padLeftZero(str) {
|
return ("00" + str).substr(str.length);
|
},
|
// 格式化时间 ==> yyyy-mm-dd
|
formatDate(value) {
|
if (value) {
|
const now = value ? new Date(value * 1000) : new Date();
|
let time = this.getDateObj(now, "yyyy-MM-dd hh:mm:ss");
|
return time;
|
} else {
|
return "";
|
}
|
},
|
// 格式化时间 ==> yyyy-mm-dd
|
formatDate2(value) {
|
if (value) {
|
const now = value ? new Date(value * 1000) : new Date();
|
let time = this.getDateObj(now, "yyyy/MM/dd hh:mm:ss");
|
return time;
|
} else {
|
return "";
|
}
|
},
|
getDate3() {
|
let now = new Date();
|
this.formatTime3 = this.getDateObj(now, "hh:mm");
|
},
|
getDate2() {
|
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+'分'
|
}
|
let d= getCha()
|
setInterval(() => {
|
d= getCha();
|
}, 6000);
|
return d;
|
},
|
setInterCard(value, name, i) {
|
if (this.Tasks[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 inputMaterials = JSON.parse(
|
JSON.stringify(this.Tasks[i].Procedure.procedure[value])
|
);
|
let newDataList = [];
|
let current = 0;
|
// let num=4;
|
if (inputMaterials && inputMaterials.length > 0) {
|
for (let i = 0; i <= inputMaterials.length - 1; i++) {
|
if (i % num !== 0 || i === 0) {
|
if (!newDataList[current]) {
|
newDataList[current] = [];
|
newDataList[current].push(inputMaterials[i]);
|
} else {
|
newDataList[current].push(inputMaterials[i]);
|
}
|
} else {
|
current++;
|
newDataList[current] = [];
|
newDataList[current].push(inputMaterials[i]);
|
}
|
}
|
}
|
this.Tasks[i][value] = [...newDataList];
|
}
|
},
|
|
getTaskInfo() {
|
let object = {
|
Order: {},
|
Procedure: {
|
procedure: { inputMaterials: [], outputMaterials: [], workers: [] },
|
},
|
inputMaterials: [],
|
outputMaterials: [],
|
procedureList: [
|
// [
|
// {
|
// name:"工序",
|
// deviceName:'1111dhafjdhajkhf jkdahjkf打法即可打開鏈接肯德基啊看來jdad大风京东卡老司机番窠倒臼开了房金阿奎第十六届反馈拉德斯基k打卡机阿珂附件打开了点击阿里卡减肥的卡拉胶开了房大街上克隆fk啦大家防空雷達數據看i'
|
// },
|
// ]
|
],
|
};
|
this.Tasks = [];
|
getTaskInfo({ page: 1, pageSize: this.activeName }).then((res) => {
|
if (res.code == 200&&res.data) {
|
let arr=[]
|
if(res.data.Tasks){
|
arr.sort(function(a,b){
|
return (a.Position - b.Position)
|
})
|
}
|
this.Tasks = res.data.Tasks ? res.data.Tasks : [];
|
|
this.TaskCount=res.data.TaskCount?res.data.TaskCount:0
|
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 = [];
|
this.Tasks[i].finishNumber = 0;
|
this.finishShow['finishShow&'+i]=false
|
this.Tasks[i].Procedure.procedure.workers = this.Tasks[i].Procedure
|
.procedure.workers
|
? this.Tasks[i].Procedure.procedure.workers
|
: [];
|
this.Tasks[i].procedureList.push([
|
{
|
name: "工序",
|
...this.Tasks[i].Procedure.procedure,
|
},
|
]);
|
|
if (this.Tasks[i].Procedure.ID) {
|
startTask({ id: this.Tasks[i].Procedure.ID }).then((res) => {
|
if (res.code == 200) {
|
// res.data.number
|
this.Tasks[i].procedureList[0].push({
|
number: res.data.Number,
|
name: "工艺",
|
Arr:res.data.Params ? res.data.Params : [],
|
});
|
}
|
});
|
}
|
this.setInterCard("inputMaterials", "cardBox1&" + i, i);
|
this.setInterCard("outputMaterials", "cardBox3&" + i, i);
|
}
|
this.getStartArr()
|
this.getProgressInfo();
|
if (!this.procInfoTimer) {
|
this.procInfoTimer = setInterval(() => {
|
this.getProgressInfo();
|
}, 9000);
|
}
|
}
|
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, 只开启一个定时器
|
if (!this.cutdownTimer) {
|
this.cutdownTimer = setInterval(() => {
|
this.getcountdown();
|
}, 60000);
|
}
|
}
|
});
|
|
// this.Tasks.push(object)
|
// this.Tasks.push(object)
|
},
|
getStartArr(){
|
for (let i in this.Tasks) {
|
if (this.Tasks[i].Procedure.Status==1) {
|
this.Arr = this.Tasks[i].procedureList[0].Arr ?this.Tasks[i].procedureList[0].Arr: [];
|
this.taskData=this.Tasks[i];
|
break;
|
}
|
}
|
},
|
getProgressInfo() {
|
for (let i in this.Tasks){
|
if(this.Tasks[i].Procedure.ID){
|
getProgress({
|
position: Number(i),
|
procedureId: this.Tasks[i].Procedure.ID,
|
}).then((res) => {
|
if (res.code == 200) {
|
this.Tasks[i].finishNumber = res.data.finishNumber
|
? res.data.finishNumber
|
: 0;
|
this.plcStatus=res.data.plcStatus?res.data.plcStatus:1
|
}
|
});
|
}
|
}
|
|
},
|
// 设置
|
setUrl() {
|
// const { href } = this.$router.resolve({
|
// path: "/set",
|
// });
|
// window.open(href, "_blank");
|
this.$router.push({
|
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) {
|
finishTask({ id: taskData.Procedure.ID }).then((res) => {
|
if (res.code == 200) {
|
this.finishShow['finishShow&'+i] = false;
|
this.getTaskInfo();
|
this.$message.success("操作成功！");
|
}
|
});
|
} else {
|
this.$message.error("当前设备没有工序！");
|
}
|
},
|
getRandomNumber(min, max) {
|
return Math.floor(Math.random() * (max - min + 1) + min);
|
},
|
format(percentage) {
|
return `合格率：${percentage}%`;
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss">
|
.tooltip-width-200{
|
width:200px;
|
line-height:1.3!important;
|
}
|
.color_yellow{
|
color:yellow;
|
}
|
.el-empty{
|
height:100%;
|
.el-empty__description p{
|
font-size:16px!important;
|
color:#fff!important;
|
}
|
}
|
|
.active-one {
|
width: 100%;
|
height: calc(100% - 100px);
|
.statelist {
|
height: 50px;
|
}
|
.small_title {
|
margin-bottom: 20px;
|
}
|
.content {
|
height: 240px;
|
}
|
.bottom {
|
height: calc(100% - 410px);
|
}
|
.font_size_20px{
|
font-size:20px!important;
|
}
|
}
|
.active-two {
|
width: calc(50% - 10px);
|
height: calc(100% - 100px);
|
float: left;
|
padding-left: 10px;
|
&:nth-of-type(1) {
|
padding-right: 10px;
|
padding-left: 0px;
|
box-sizing: border-box;
|
border-right: 1px solid #eee;
|
}
|
|
.small_title {
|
margin-bottom: 30px;
|
}
|
.statelist {
|
height: 60px;
|
.title-item{
|
font-size:14px!important;
|
}
|
}
|
.title-item > span {
|
display: block;
|
line-height: 20px;
|
}
|
.content {
|
height: 370px;
|
|
.content-top {
|
height: calc(50% - 20px) !important;
|
padding-top: 10px !important;
|
}
|
.el-descriptions__body {
|
font-size: 16px !important;
|
}
|
}
|
.bottom {
|
height: calc(100% - 560px);
|
}
|
.bottom_list .bottom-title {
|
font-size: 16px;
|
}
|
}
|
.gong-date{
|
width:100%;
|
height:20px;
|
line-height:20px;
|
margin-bottom:10px;
|
font-size:16px;
|
}
|
.gongx{
|
width:100%;
|
height:50px;
|
overflow-x:auto;
|
// overflow-y:hidden;
|
margin-top:-5px;
|
.steps{
|
height:100%;
|
.el-step__icon{
|
width:16px;
|
height:16px;
|
}
|
.el-step__title{
|
line-height:25px;
|
font-size:14px;
|
}
|
}
|
|
.el-step{
|
.el-step__icon{
|
background:#00cc66;
|
}
|
.is-wait{
|
.el-step__icon{
|
background:#fff;
|
}
|
}
|
}
|
.el-step__head.is-process{
|
color: #00cc66 !important;
|
border-color:#00cc66;
|
}
|
.el-step__title.is-process{
|
color: #00cc66 !important;
|
}
|
.el-step__head.is-wait{
|
color:#fff;
|
border-color:#fff;
|
}
|
.el-step__title.is-wait{
|
color:#fff;
|
}
|
}
|
.set-title {
|
cursor: pointer;
|
}
|
.home-img-box {
|
width: calc(100% - 40px);
|
height: calc(100% - 40px);
|
margin: 0 auto;
|
overflow: hidden;
|
padding: 20px;
|
.bg-title {
|
width: 90%;
|
margin: 0 auto;
|
position: absolute;
|
img {
|
width: 100%;
|
}
|
.bg-title-span {
|
position: absolute;
|
width: 30%;
|
height: 4rem;
|
line-height: 2.4;
|
font-size: 26px;
|
font-weight: 700;
|
text-align: center;
|
left: 36%;
|
top: 1.5rem;
|
display: inline-block;
|
}
|
.bg-set {
|
position: absolute;
|
right: 10%;
|
height: 4rem;
|
line-height: 2.4;
|
font-size: 40px;
|
font-weight: 700;
|
top: 1rem;
|
}
|
.bg-date {
|
position: absolute;
|
left: 3%;
|
height: 100px;
|
line-height: 30px;
|
font-size: 16px;
|
top: 15%;
|
span {
|
font-size: 35px;
|
font-weight: 700;
|
line-height: 20px;
|
}
|
}
|
}
|
.yuan {
|
width: 40%;
|
height: 80%;
|
margin: 0 auto;
|
margin-top: 10%;
|
position: relative;
|
img {
|
width: 100%;
|
}
|
.btn-img {
|
width: 100%;
|
height: 50%;
|
margin: 0 auto;
|
text-align: center;
|
position: absolute;
|
top: 9rem;
|
}
|
}
|
}
|
.font-arrow-20 {
|
font-size: 30px;
|
font-weight: 700;
|
}
|
.color_666{
|
color:#666!important;
|
}
|
.color_fff{
|
color:#fff!important;
|
}
|
.color_4efefa {
|
color: #4efefa;
|
}
|
.el-carousel__indicators--vertical {
|
display: none;
|
}
|
.color_blue {
|
background: #33ccff !important;
|
}
|
.color_green {
|
color: #00cc66 !important;
|
}
|
.color_red {
|
background: red !important;
|
}
|
.color_organge {
|
background: #f76c0f !important;
|
}
|
.color_f70f83 {
|
background: #09e5ed !important;
|
color: #333 !important;
|
}
|
.bottom_list {
|
position: relative;
|
padding: 10px;
|
width: 30%;
|
height: calc(100% - 20px);
|
border-radius: 6px;
|
background: rgb(22 72 173);
|
// float:left;
|
.bottom-title {
|
font-weight: 600;
|
font-size: 20px;
|
height: 30px;
|
line-height: 30px;
|
margin-bottom: 5px;
|
.el-button--primary {
|
color: #fff;
|
float: right;
|
border: 0 !important;
|
}
|
}
|
.el-button--primary {
|
width: 100%;
|
}
|
.call {
|
background: #4efefa;
|
display: inline-block;
|
width: 94%;
|
height: 10%;
|
text-align: center;
|
line-height: 45px;
|
position: absolute;
|
bottom: 20px;
|
left: 0px;
|
border-radius: 5px;
|
margin-left: 3%;
|
color: #000;
|
font-size: 16px;
|
}
|
.qfcall {
|
display: inline-block;
|
width: 94%;
|
height: 10%;
|
text-align: center;
|
line-height: 45px;
|
position: absolute;
|
bottom: 20px;
|
left: 0px;
|
border-radius: 5px;
|
margin-left: 3%;
|
// color: #000;
|
font-size: 16px;
|
}
|
.card-box {
|
width: 100%;
|
height: calc(100% - 50px - 50px);
|
// height:300px;
|
.el-carousel__container{
|
overflow-y:auto;
|
}
|
.el-carousel__item{
|
// height:auto;
|
min-height:160px;
|
}
|
}
|
}
|
|
.small_title {
|
font-size: 20px;
|
}
|
.right-small-btn {
|
margin-top: 10px;
|
width: calc(100% - 20px);
|
margin: 0 auto;
|
position: absolute;
|
bottom: 10px;
|
left: 10px;
|
overflow: hidden;
|
.el-button--primary {
|
width: 46%;
|
background: #09e5ed;
|
float: left;
|
border-radius: 6px;
|
color: #333;
|
font-weight: 700;
|
font-size: 18px;
|
}
|
.button-finish {
|
width: 46%;
|
float: right;
|
.el-button--primary {
|
width: 100%;
|
background: red;
|
color: #fff;
|
border: 0;
|
}
|
}
|
}
|
.home {
|
width: 100%;
|
height: 100%;
|
color: #fff;
|
background: #12234a;
|
overflow: hidden;
|
.left {
|
width: calc(78% - 60px);
|
height: 100%;
|
min-height: 100%;
|
background: #12234a;
|
float: left;
|
padding: 30px;
|
padding-top: 20px;
|
.title {
|
font-size: 30px;
|
font-weight: 600;
|
height:40px;
|
margin:10px 0 30px;
|
text-align: center;
|
.el-badge__content, .el-progress.is-exception .el-progress-bar__inner{
|
background-color:green;
|
}
|
}
|
|
.statelist {
|
width: 100%;
|
margin: 0 auto 10px;
|
flex-wrap: nowrap;
|
align-content: center;
|
justify-content: space-around;
|
align-items: center;
|
overflow:hidden;
|
.title-item {
|
width: calc((100% - 50px)/3);
|
float: left;
|
margin-right: 10px;
|
padding: 10px 5px;
|
text-align: center;
|
border-radius: 4px;
|
display: inline-block;
|
background: rgb(22 72 173);
|
font-size: 16px;
|
font-weight: 600;
|
&:nth-last-child(1) {
|
margin-right: 0;
|
}
|
}
|
}
|
.content {
|
width: 100%;
|
margin: 0px 0px 20px;
|
overflow: hidden;
|
.content_left {
|
width: 24%;
|
height: 100%;
|
float: left;
|
// padding:2%;
|
.content-top {
|
background: rgb(22 72 173);
|
height: calc(50% - 20px);
|
padding-top: 10px;
|
text-align: center;
|
line-height: 30px;
|
border-radius: 6px;
|
&:nth-of-type(1) {
|
margin-bottom: 20px;
|
}
|
}
|
.content_leftBttom {
|
width: 100%;
|
}
|
dl {
|
margin-top: 5px;
|
}
|
dd {
|
width: 100%;
|
height: 30px;
|
// text-align: left;
|
font-size: 24px;
|
margin: 0;
|
text-align: center;
|
line-height: 36px;
|
}
|
}
|
.content_right {
|
width: calc(75% - 20px);
|
height: 100%;
|
float: right;
|
padding: 0 10px;
|
background: rgb(22 72 173);
|
border-radius: 6px;
|
// background: #233b9e;
|
.el-descriptions__body {
|
background: transparent;
|
font-size: 18px;
|
}
|
.el-descriptions__table {
|
width: 100%;
|
margin: 10px 0px;
|
// background: #233b9e;
|
color: #ffff99;
|
.el-descriptions--small {
|
width: 100%;
|
// margin: 50px 50px;
|
}
|
}
|
.el-progress {
|
width: 80%;
|
}
|
}
|
}
|
|
.bottom {
|
width: 100%;
|
display: flex;
|
flex-wrap: nowrap;
|
align-content: center;
|
justify-content: space-between;
|
align-items: center;
|
margin-top: 20px;
|
// position: relative;
|
|
.card {
|
width: 100%;
|
height: 70px;
|
// border: 1px solid #ccc;
|
background: #6b83ff;
|
border-radius: 5px;
|
margin-top: 10px;
|
color: #333;
|
position: relative;
|
.card_top-2,
|
.card_top-3 {
|
width: 50%;
|
height: 45px;
|
border-radius: 5px;
|
background: #6b83ff;
|
font-size: 12px;
|
color: #fff;
|
float: left;
|
.card-top-r-t {
|
width: 100%;
|
text-align: center;
|
display: inline-block;
|
height: 20px;
|
line-height: 20px;
|
margin-top: 3px;
|
}
|
.card-top-r-b {
|
width: 100%;
|
height: 20px;
|
line-height: 20px;
|
text-align: center;
|
display: inline-block;
|
}
|
}
|
.card_top-3 {
|
color: #fff;
|
.card-top-r-t {
|
width: 90%;
|
|
margin: 0 auto;
|
margin-bottom: 5px;
|
display: block;
|
text-align: left;
|
}
|
.card-top-r-b {
|
width: 90%;
|
display: block;
|
margin: 0 auto;
|
}
|
}
|
|
.card_top,
|
.card_top-4 {
|
width: 50%;
|
height: 45px;
|
border-radius: 5px;
|
background: #6b83ff;
|
color: #fff;
|
font-size: 12px;
|
line-height: 45px;
|
> div {
|
margin-left: 12px;
|
position: relative;
|
p {
|
position: absolute;
|
top: -14px;
|
right: 15px;
|
font-size: 14px;
|
}
|
}
|
}
|
.card_top{
|
float: left;
|
}
|
.card_top-4 {
|
width: calc(100% - 20px);
|
padding: 10px 10px;
|
color: #fff;
|
background: rgb(19, 35, 90);
|
font-size: 14px;
|
height:50px;
|
line-height: 25px;
|
>div{
|
margin-left:0px;
|
}
|
}
|
.card-info-box {
|
position: absolute;
|
background: red;
|
border-radius: 6px;
|
font-size: 12px;
|
color: #fff;
|
padding: 3px 5px;
|
top: 3px;
|
right: 40px;
|
}
|
.card_content {
|
width: 100%;
|
border-radius: 5px;
|
height: 25px;
|
// background: #4765c0;
|
.card_contentLeft {
|
width: calc(100% - 10px);
|
height: 25px;
|
line-height: 25px;
|
font-size: 12px;
|
padding: 0 5px;
|
color: #fff;
|
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%;
|
height: 38%;
|
font-size: 12px;
|
}
|
}
|
}
|
}
|
}
|
.right {
|
width: calc(20% - 10px);
|
height: 100%;
|
min-height: 100%;
|
background: #233b9e;
|
float: left;
|
padding: 1%;
|
.right_top {
|
width: 100%;
|
height: 100px;
|
position: relative;
|
.right-top-l {
|
position: absolute;
|
top: 10px;
|
left: -5%;
|
width: 100px;
|
height: 35px;
|
line-height: 35px;
|
text-align: center;
|
border-radius: 0 6px 6px 0;
|
background: hsl(225, 85%, 67%);
|
display: inline-block;
|
}
|
// background: pink;
|
.time {
|
width: 70%;
|
height: 100px;
|
float: right;
|
position: relative;
|
text-align: right;
|
dl {
|
height: 80%;
|
// padding-top: 10%;
|
}
|
.font {
|
font-size: 36px;
|
position: absolute;
|
top: 20px;
|
right: 0px;
|
}
|
}
|
}
|
.right-top-m {
|
width: 100%;
|
background: rgba(28, 48, 133, 1);
|
line-height: 50px;
|
font-weight: 700;
|
font-size: 18px;
|
padding: 0 3%;
|
overflow-x: hidden;
|
margin-left: -3%;
|
span{
|
display:inline-block;
|
img{
|
width:23px;
|
vertical-align: middle;
|
// 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 {
|
margin-top: 10px;
|
width: 100%;
|
.el-button--primary {
|
width: 100%;
|
background: #09e5ed;
|
color: #333;
|
font-weight: 700;
|
font-size: 18px;
|
}
|
}
|
.right_dutyLst {
|
width: calc(106% - 20px);
|
// height: 270px;
|
height: 310px;
|
border-radius: 4px;
|
line-height: 30px;
|
overflow: hidden;
|
background: #4565c9;
|
margin-top: 10px;
|
padding: 5px 10px;
|
margin-left:-3%;
|
position: relative;
|
.right-small-title {
|
width: auto;
|
padding: 5px;
|
font-size: 18px;
|
// float: left;
|
border-radius: 8px;
|
// background: #007101;
|
}
|
.right-person-box {
|
width: 100%;
|
height: calc(100% - 40px);
|
overflow: auto;
|
margin-top: -10px;
|
}
|
.right-small-person {
|
width: 100%;
|
height: 60px;
|
line-height: 60px;
|
margin-bottom: 10px;
|
border-radius: 10px;
|
background: rgb(19, 35, 90);
|
color: #fff;
|
|
dt {
|
float: left;
|
|
margin-right: 10px;
|
.img-class {
|
height: 50px;
|
margin: 5px !important;
|
}
|
}
|
span {
|
// background: pink;
|
padding-top: 10px;
|
}
|
}
|
}
|
.right_base {
|
width: 100%;
|
height: calc(100% - 520px);
|
min-height: 200px;
|
// overflow-y:auto;
|
position: relative;
|
.right-base-btn {
|
width: 100%;
|
position: absolute;
|
bottom: 0;
|
left: 0;
|
.el-button--primary {
|
width: 100%;
|
background: #ff0000;
|
float: right;
|
border-radius: 6px;
|
color: #fff;
|
font-weight: 700;
|
font-size: 18px;
|
}
|
}
|
// .call {
|
// background: #ff0000;
|
// display: inline-block;
|
// width: 94%;
|
// height: 12%;
|
// text-align: center;
|
// line-height: 45px;
|
// position: absolute;
|
// bottom: 5px;
|
// left: 0px;
|
// border-radius: 5px;
|
// margin-left: 3%;
|
|
// font-size: 16px;
|
// }
|
}
|
}
|
}
|
.el-button--primary {
|
border: 0;
|
font-weight: 700 !important;
|
font-size: 16px;
|
}
|
</style>
|
