<template>
|
<!-- top="10vh" -->
|
<el-dialog
|
:close-on-click-modal="false"
|
:visible.sync="islook"
|
width="700px"
|
class="add-event-dialog"
|
:show-close="false"
|
>
|
<div class="tank-box">
|
<div slot="title" class="tac drawerHeader">新任务</div>
|
<div class="dialog-content-box">
|
<div
|
style="
|
margin: 0 auto;
|
width: 100%;
|
height: 100%;
|
overflow: hidden;
|
margin-bottom: 30px;
|
text-align: left;
|
"
|
>
|
<div class="title-box margin_bottom_13">
|
<div class="title-item color_4efefa font_size_20 title-bng">
|
当前任务：{{ taskData.Procedure.procedure.procedureName || "" }}
|
</div>
|
<div class="title-item title-bng color_4efefa font_size_20">
|
生产数量：<span>{{ taskData.Order.amount || 0 }}</span>
|
</div>
|
</div>
|
<div class="title-auto-box">
|
<div class="title-box margin_bottom_20">
|
<div class="title-item">
|
订单编号：{{ taskData.Order.orderId || "" }}
|
</div>
|
<div class="title-item">
|
工单编号：{{ taskData.Order.workOrderId || "" }}
|
</div>
|
<div class="title-item">
|
产品名称：{{ taskData.Order.productName || "" }}
|
</div>
|
<div class="title-item">
|
数量：{{ taskData.Order.amount || 0 }}{{ taskData.Order.unit }}
|
</div>
|
<div class="title-item">
|
交货日期：{{ taskData.Order.deliverDate || "" }}
|
</div>
|
<div class="title-item">
|
工时： {{ taskData.Procedure.procedure.workHours || "" }}
|
</div>
|
<div class="title-item">
|
起止时间： {{ formatDate(taskData.Order.startTime) || "" }}
|
-
|
{{ formatDate(taskData.Order.endTime) }}
|
</div>
|
<div class="title-item">
|
客户名称：{{ taskData.Order.customer || "" }}
|
</div>
|
<div class="title-item title-item-two">
|
货物描述： {{ taskData.Order.orderAttr || "" }}
|
</div>
|
|
<div class="title-item title-item-two">
|
参数要求：{{ taskData.Order.parameter || "" }}
|
</div>
|
</div>
|
<div class="title-box margin_bottom_20">
|
<div
|
style="
|
color: #fff;
|
font-size: 18px;
|
font-weight: 700;
|
margin-bottom: 10px;
|
margin-top: 20px;
|
"
|
>
|
工艺参数
|
</div>
|
<div
|
class="title-item title-item-two"
|
v-for="(item, index) in Arr"
|
:key="index"
|
>
|
{{ item.Key }}：{{ item.Value || "" }}
|
</div>
|
</div>
|
</div>
|
<div class="process-box" v-if="showBtn==2||showBtn==3">
|
<div
|
style="
|
color: red;
|
font-size: 16px;
|
width: 100%;
|
text-align: center;
|
font-weight: 700;
|
margin-bottom: 20px;
|
margin-top: 10px;
|
"
|
>
|
请确认生产安全！
|
</div>
|
<div class="progress-item">
|
<span>{{ parseInt(num/60*100) }}%</span>
|
<el-progress
|
style="width:calc(100% - 50px);float:right"
|
define-back-color="#CDC6C6"
|
color="#00cc66"
|
text-color="#fff"
|
:text-inside="true"
|
:stroke-width="20"
|
:percentage="parseInt(num/60*100)"
|
></el-progress>
|
</div>
|
</div>
|
<!-- <div class="circel-text">
|
<div class="circel-text-b">
|
生产数量：<span>{{ Order.amount||0 }}</span>{{ Order.unit||'' }}
|
</div>
|
</div> -->
|
</div>
|
</div>
|
<div slot="footer" class="dialog-footer tac" style="overflow: hidden">
|
<div class="btn" @click="closeClick">
|
<img src="../../public/btn1.png" />
|
</div>
|
<div class="btn" v-if="showBtn==1" @click="confirmClick1">
|
<img src="../../public/confirm3.png" />
|
</div>
|
<div class="btn" v-if="showBtn==2">
|
<img src="../../public/confirm2.png" />
|
</div>
|
<div class="btn" v-if="showBtn==3" @click="onSubmit()">
|
<img src="../../public/confirm1.png" />
|
</div>
|
</div>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
import { startTask, setProductNumber,sendProcessParams } from "@/api/home/index"; // 产线
|
export default {
|
components: {},
|
props: {
|
Order: {
|
type: [Object],
|
default: () => {
|
return {
|
amount: 0,
|
unit: "",
|
};
|
},
|
},
|
taskData: {
|
type: [Object],
|
},
|
Arr: {
|
type: [Array],
|
default: () => {
|
return [];
|
},
|
},
|
},
|
data() {
|
return {
|
islook: false,
|
showBtn:1,
|
num:0,
|
timer:null,
|
|
};
|
},
|
mounted() {
|
this.getInfo();
|
},
|
watch: {
|
taskData(val) {
|
this.getInfo();
|
},
|
num(){
|
if(this.num==60){
|
clearInterval(this.timer)
|
this.showBtn=3;
|
}
|
}
|
},
|
methods: {
|
confirmClick1(){
|
this.num=0;
|
this.showBtn=2;
|
this.timer=setInterval(()=>{
|
this.num=this.num+1;
|
},1000)
|
|
},
|
closeClick(){
|
if(this.timer){
|
clearInterval(this.timer)
|
}
|
this.num=0;
|
this.shutdown();
|
},
|
getInfo() {
|
if (Object.keys(this.taskData).length > 0 && this.taskData.Procedure.ID && this.taskData.Procedure.Status == 1) {
|
this.num=0;
|
this.showBtn= 1;
|
this.islook=true;
|
}else{
|
this.islook=false;
|
}
|
},
|
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");
|
return time;
|
} else {
|
return "";
|
}
|
},
|
onSubmit() {
|
if(this.taskData.Procedure.ID){
|
sendProcessParams({id:this.taskData.Procedure.ID}).then(res=>{
|
if(res.code==200){
|
setProductNumber().then((res) => {
|
if (res.code == 200) {
|
this.$message.success("下发成功！");
|
// this.$message.success("下发生产数量成功！");
|
this.$emit("getSetProductNumber");
|
this.shutdown();
|
}
|
});
|
}
|
})
|
|
}
|
|
},
|
shutdown() {
|
this.islook = false;
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.tank-box {
|
width: 638px;
|
height: 630px;
|
padding: 0 20px;
|
background: url("../../public/tank.png") no-repeat center center / cover;
|
position: relative;
|
.dialog-footer {
|
position: absolute;
|
bottom: 40px;
|
}
|
}
|
.color_4efefa {
|
color: #4efefa !important;
|
}
|
.font_size_20 {
|
font-size: 20px !important;
|
}
|
.margin_bottom_13 {
|
margin-bottom: 13px;
|
}
|
.title-box {
|
width: 100%;
|
height: auto;
|
overflow: hidden;
|
.title-item {
|
width: 45%;
|
float: left;
|
height: 35px;
|
line-height: 35px;
|
font-size: 16px;
|
color: #fff;
|
&:nth-of-type(odd) {
|
width: 55%;
|
}
|
}
|
.title-bng {
|
height: 42px;
|
line-height: 42px;
|
span {
|
width: calc(100% - 110px);
|
height: 42px;
|
text-align: center;
|
display: inline-block;
|
background: url("../../public/number.png") no-repeat center center / cover;
|
}
|
}
|
.title-item-two {
|
width: 100% !important;
|
}
|
}
|
::v-deep .el-dialog {
|
background: transparent;
|
}
|
::v-deep .el-dialog__header {
|
padding: 0 !important;
|
}
|
::v-deep .el-dialog__body {
|
padding: 0 !important;
|
}
|
.btn {
|
width: 200px;
|
height: auto;
|
float: left;
|
display: inline-block;
|
img {
|
width: 100%;
|
}
|
&:nth-of-type(1) {
|
margin-right: 30px;
|
margin-left: 110px;
|
}
|
}
|
::v-deep .el-tabs__content {
|
height: calc(100% - 55px);
|
overflow-y: auto;
|
}
|
.circel {
|
width: 100px;
|
height: 100px;
|
border-radius: 50%;
|
border: 2px solid rgba(12, 79, 218, 1);
|
position: relative;
|
float: left;
|
.circel-two {
|
width: 75px;
|
height: 75px;
|
position: absolute;
|
top: 11px;
|
left: 11px;
|
border-radius: 50%;
|
border: 2px solid rgba(12, 79, 218, 1);
|
}
|
}
|
.circel-text {
|
color: #fff;
|
margin-left: 20px;
|
.circel-text-t {
|
font-size: 18px;
|
line-height: 40px;
|
}
|
.circel-text-b {
|
font-weight: 700;
|
font-size: 14px;
|
|
span {
|
color: rgba(12, 79, 218, 1);
|
font-size: 38px;
|
margin-right: 10px;
|
}
|
}
|
}
|
.color_red {
|
width: 100%;
|
margin: 0 auto;
|
text-align: center;
|
font-size: 14px;
|
margin-bottom: 25px;
|
}
|
.form-item {
|
width: calc(50% - 20px);
|
float: left;
|
&:nth-child(odd) {
|
margin-right: 20px;
|
}
|
}
|
.form-item-two {
|
width: calc(50% - 20px);
|
float: left;
|
&:nth-of-type(odd) {
|
margin-right: 20px;
|
}
|
}
|
.form-item-three {
|
width: calc(100% - 20px);
|
float: left;
|
}
|
.form-item-check {
|
width: calc(33% - 40px);
|
float: left;
|
&:nth-of-type(odd) {
|
margin-right: 20px;
|
}
|
}
|
.title {
|
width: 100%;
|
}
|
.dialog-content-box {
|
height: calc(100% - 200px);
|
// overflow: hidden;
|
padding: 50px 20px 20px;
|
.el-form {
|
overflow: hidden;
|
}
|
.title-auto-box {
|
height: calc(100% - 150px);
|
overflow: auto;
|
}
|
.progress-item{
|
width:55%;
|
padding:2px 8px;
|
height:20px;
|
background:#fff;
|
border-radius:30px;
|
margin:0 auto;
|
border:2px solid rgba(255,255,255,0.5);
|
box-shadow: 1px 5px 5px rgba(255,255,255,0.5);
|
span{
|
float:left;
|
font-weight: 700;
|
color:#333;
|
font-size:15px;
|
}
|
}
|
}
|
.num-identify {
|
padding: 5px 8px;
|
background-color: rgba(255, 153, 0, 1);
|
border-radius: 6px;
|
font-size: 14px;
|
color: #fff;
|
font-weight: 600;
|
}
|
.drawerHeader {
|
font-weight: 700;
|
font-size: 20px;
|
text-align: center;
|
color: #fff;
|
height: 35px;
|
line-height: 35px;
|
.identify {
|
width: 80px;
|
height: 25px;
|
line-height: 25px;
|
text-align: center;
|
border: 1px solid rgba(255, 153, 0, 1);
|
border-radius: 6px;
|
font-size: 16px;
|
color: rgba(255, 153, 0, 1);
|
transform: rotate(15deg);
|
font-weight: 600;
|
margin-right: 100px;
|
margin-top: 12px;
|
float: right;
|
}
|
}
|
</style>
|
