<template>
|
<el-dialog
|
:close-on-click-modal="false"
|
:visible.sync="show"
|
width="753px"
|
class="add-event-dialog"
|
:show-close="false"
|
>
|
<div class="tank-box">
|
<div slot="title" class="tac drawerHeader">
|
<span class="title-l">{{ messageError ? '提示' : '新任务' }}</span>
|
</div>
|
<div class="dialog-content-box">
|
<div style="
|
margin: 0 auto;
|
width: 100%;
|
height: 100%;
|
overflow: hidden;
|
text-align: left;"
|
>
|
<template v-if="messageError">
|
<div class="error-t">
|
<span v-if="messageError ==='下发成功！'" class="el-icon-success color_success"></span>
|
<span v-else class="el-icon-error color_error"></span>
|
</div>
|
<div class="error-m">
|
{{ messageError }}
|
</div>
|
<div
|
class="font_size_20 color_fff"
|
style="text-align: center; width: 100%; margin: 10px 0"
|
>
|
<span v-if="messageError ==='下发成功！'" style="font-size:30px;">{{ 3 - Number(second) }}s</span>
|
<span v-else>请重试</span>
|
</div>
|
|
</template>
|
<template v-else-if="Object.keys(currentTaskData || {}).length">
|
<div class="title-box margin_bottom_13">
|
<div class="title-item color_4efefa font_size_20 title-bng">
|
当前任务：{{ currentTaskData.Procedure.procedure.procedureName || "" }}
|
</div>
|
<div class="title-item title-bng color_4efefa font_size_20">
|
生产数量：<span style="color:#fff;">{{ currentTaskData.Order.amount || 0 }}</span>
|
</div>
|
</div>
|
<div class="title-auto-box">
|
<div class="title-box margin_bottom_20">
|
<div class="title-item">
|
订单编号：{{ currentTaskData.Order.orderId || "" }}
|
</div>
|
<div class="title-item">
|
工单编号：{{ currentTaskData.Order.workOrderId || "" }}
|
</div>
|
<div class="title-item">
|
产品名称：{{ currentTaskData.Order.productName || "" }}
|
</div>
|
<div class="title-item">
|
数量：{{ currentTaskData.Order.amount || 0 }}{{ currentTaskData.Order.unit }}
|
</div>
|
<div class="title-item">
|
交货日期：{{ currentTaskData.Order.deliverDate || "" }}
|
</div>
|
<div class="title-item">
|
工时： {{ currentTaskData.Procedure.procedure.workHours || "" }}
|
</div>
|
<div class="title-item">
|
计划时间： {{ formatDate(currentTaskData.Order.startTime) || "" }}
|
-
|
{{ formatDate(currentTaskData.Order.endTime) }}
|
</div>
|
|
<div class="title-item">
|
客户名称：{{ currentTaskData.Order.customer || "" }}
|
</div>
|
<div class="title-item title-item-two">
|
通道： {{ channelNameConfig[currentTaskData.Channel] || "" }}
|
</div>
|
|
<div class="title-item title-item-two">
|
参数要求：{{ currentTaskData.Order.parameter || "" }}
|
</div>
|
</div>
|
<div class="title-box margin_bottom_20">
|
<div
|
style="
|
color: #fff;
|
font-size: 18px;
|
margin-bottom: 10px;
|
margin-top: 20px;
|
"
|
class="color_4efefa"
|
>
|
工艺参数
|
</div>
|
<div
|
class="title-item title-item-two"
|
v-for="(item, index) in currentProcessParams"
|
: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: 26px;
|
width: 100%;
|
text-align: center;
|
margin-bottom: 15px;
|
line-height:35px;
|
"
|
:class="showBtn === 3&&isLoading?'margin-top-10px':'margin-top-40px'"
|
>
|
<div class="gif-box" v-if="showBtn === 2||(showBtn === 3&&!isLoading)">
|
<template v-if="showBtn === 2">
|
<div class="gif">
|
<img src="../../public/shan.gif"/>
|
</div>
|
|
</template>
|
<template v-if="showBtn === 3&&!isLoading">
|
<div class="gif">
|
<span class="yuandian"></span>
|
</div>
|
</template>
|
<div class="gif-right">
|
----- 剩余时间 -----
|
<span>00:00:{{ 30 - Number(num) < 10 ? 0 : '' }}{{ 30 - Number(num) }}</span>
|
</div>
|
</div>
|
{{ message }}
|
</div>
|
<template v-if="showBtn === 3&&isLoading">
|
<div class="progress-item">
|
<span>{{ (+num / 30) * 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="(+num / 30) * 100"
|
></el-progress>
|
</div>
|
</template>
|
</div>
|
</template>
|
</div>
|
<!--左翻页按钮-->
|
<div v-show="showPreviousTaskBtn" class="paginator-btn previous" @click="previousTask"><</div>
|
<!--右翻页按钮-->
|
<div v-show="showNextTaskBtn" class="paginator-btn next" @click="nextTask">></div>
|
</div>
|
<div slot="footer" :class="messageError?'dialog-footer tac btn-error':'dialog-footer tac'"
|
style="overflow: hidden">
|
<template v-if="messageError">
|
<div class="btn" v-if="messageError ==='下发成功！'||getProcessParamsErrMsg" @click="closeClick">
|
<img src="../../public/close-btn.png"/>
|
</div>
|
<div class="btn" v-else @click="confirmClick2">
|
<img src="../../public/agin.png"/>
|
</div>
|
</template>
|
<template v-else>
|
<div class="btn" @click="closeClick">
|
<img src="../../public/btn1.png"/>
|
</div>
|
<div class="btn" v-if="showBtn === 1">
|
<div v-if='currentTaskData && currentTaskData.CanStarted' @click="confirmClick1">
|
<img src="../../public/confirm1.png"/>
|
</div>
|
<div v-else>
|
<img src="../../public/confirm2.png"/>
|
</div>
|
</div>
|
<div class="btn" v-if="showBtn === 2">
|
<img src="../../public/confirm2.png"/>
|
</div>
|
<div
|
class="btn"
|
v-if="showBtn === 3"
|
v-prevent-re-click="3000"
|
@click="onSubmit()"
|
>
|
<i class="el-icon-loading icon-loading" v-if="isLoading"/>
|
<img src="../../public/loading.png" v-if="isLoading"/>
|
<img src="../../public/confirm3.png" v-if="!isLoading"/>
|
</div>
|
</template>
|
</div>
|
|
<div class="paginator-text" v-if="taskList?.length">
|
<span class="page">{{ paginatorText.page }}</span>
|
<span class="total">/ {{ paginatorText.total }}</span>
|
</div>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
import {getTaskInfo, sendProcessParams, startTask,} from "@/api/home"; // 产线
|
export default {
|
name: 'TaskControlModal',
|
components: {},
|
props: {
|
activeName: {
|
type: [String, Number],
|
default: () => {
|
return 1;
|
},
|
},
|
},
|
data() {
|
return {
|
show: false,
|
// 当前应展示的任务索引
|
currentTaskIndex: 0,
|
// 当前展示的任务对应的工艺参数
|
currentProcessParams: [],
|
getProcessParamsErrMsg: '',
|
// 任务列表
|
taskList: [],
|
showBtn: 1,
|
num: 0,
|
timer: null,
|
safeProduce: '',
|
message: this.safeProduce,
|
messageError: "",
|
resParams: {},
|
isLoading: false,
|
second: 0,
|
secondTimer: null,
|
// 通道名称配置 Channel 0 对应展示 0, Channel 1 对应展示 A,暂时忽略其余情况
|
channelNameConfig: {
|
0: '0',
|
1: 'A'
|
}
|
};
|
},
|
mounted() {
|
this.getTaskList().then(() => {
|
const firstData = this.taskList[0]
|
const id = firstData?.Procedure?.ID
|
if (id) {
|
this.currentTaskIndex = this.taskList.findIndex(ele => ele.Procedure.ID === id)
|
this.getCurrentTaskProduceParams(id)
|
}
|
})
|
this.message = this.safeProduce;
|
this.getInfo();
|
},
|
computed: {
|
/**
|
* 当前应展示的任务数据
|
* @returns {*}
|
*/
|
currentTaskData() {
|
return this.taskList[this.currentTaskIndex]
|
},
|
showPreviousTaskBtn() {
|
return this.currentTaskIndex > 0
|
},
|
showNextTaskBtn() {
|
return this.currentTaskIndex < this.taskList.length - 1
|
},
|
paginatorText() {
|
return {
|
page: this.currentTaskIndex + 1,
|
total: this.taskList.length
|
}
|
}
|
},
|
watch: {
|
num() {
|
if (this.num === 30) {
|
clearInterval(this.timer);
|
this.showBtn = 3;
|
}
|
},
|
second() {
|
if (this.second === 3) {
|
clearInterval(this.secondTimer);
|
this.closeClick()
|
}
|
},
|
show(newVal) {
|
if (this.timer) {
|
clearInterval(this.timer);
|
}
|
if (this.secondTimer) {
|
clearInterval(this.secondTimer)
|
}
|
this.num = 0;
|
this.showBtn = 1;
|
this.isLoading = false
|
this.second = 0
|
this.secondTimer = null
|
this.messageError = ''
|
this.resParams = {};
|
if (newVal) {
|
this.getTaskList().then(() => {
|
const firstData = this.taskList[0]
|
const id = firstData?.Procedure?.ID
|
if (id) {
|
this.currentTaskIndex = this.taskList.findIndex(ele => ele.Procedure.ID === id)
|
this.getCurrentTaskProduceParams(id)
|
}
|
})
|
this.message = this.safeProduce;
|
this.getInfo();
|
}
|
this.$emit('isTip', this.show)
|
},
|
},
|
methods: {
|
confirmClick2() {
|
this.messageError = "";
|
this.isLoading = false;
|
},
|
confirmClick1() {
|
this.num = 0;
|
this.showBtn = 2;
|
(this.message = this.safeProduce),
|
(this.timer = setInterval(() => {
|
this.num = this.num + 1;
|
}, 1000));
|
},
|
closeClick() {
|
if (this.timer) {
|
clearInterval(this.timer);
|
}
|
this.num = 0;
|
this.shutdown();
|
},
|
/**
|
* 获取任务列表
|
*/
|
getTaskList() {
|
return getTaskInfo({taskMode: 1}).then(res => {
|
if (res.code == 200) {
|
this.taskList = res.data?.Tasks?.length ? res.data.Tasks : []
|
this.safeProduce = res.data.Prompt.safeProduce ? res.data.Prompt.safeProduce : ''
|
this.message = this.safeProduce
|
}
|
}, err => {
|
this.taskList = []
|
console.error(err)
|
},)
|
},
|
/**
|
* 获取当前展示的任务的工艺参数
|
*/
|
getCurrentTaskProduceParams(id) {
|
// const id = this.currentTaskData?.Procedure?.ID
|
if (id) {
|
startTask({id}).then((res) => {
|
if (res.code === 200) {
|
this.currentProcessParams = res.data.Params ?? []
|
} else {
|
this.getProcessParamsErrMsg = res.msg ?? '获取工艺参数失败！';
|
}
|
});
|
}
|
},
|
/**
|
* 前翻页
|
*/
|
previousTask() {
|
if (this.currentTaskIndex - 1 >= 0) {
|
this.currentTaskIndex -= 1
|
this.$nextTick(() => {
|
const id = this.currentTaskData?.Procedure?.ID
|
this.getCurrentTaskProduceParams(id)
|
this.message = this.safeProduce;
|
this.getInfo()
|
})
|
}
|
},
|
/**
|
* 后翻页
|
*/
|
nextTask() {
|
if (this.currentTaskIndex + 1 <= this.taskList.length - 1) {
|
this.currentTaskIndex += 1
|
this.$nextTick(() => {
|
const id = this.currentTaskData?.Procedure?.ID
|
this.getCurrentTaskProduceParams(id)
|
this.message = this.safeProduce;
|
this.getInfo()
|
})
|
}
|
},
|
getInfo() {
|
// 1 未生产 2生产中 3生产完成
|
if (this.currentTaskData?.Procedure?.ID && this.currentTaskData?.Procedure?.Status === 1) {
|
this.num = 0;
|
this.showBtn = 1;
|
this.show = true;
|
} else {
|
this.show = false;
|
}
|
if (this.getProcessParamsErrMsg) {
|
this.messageError = this.getProcessParamsErrMsg;
|
}
|
},
|
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();
|
return this.getDateObj(now, "MM-dd hh:mm");
|
} else {
|
return "";
|
}
|
},
|
|
onSubmit() {
|
if (this.currentTaskData.Procedure.ID) {
|
this.message = "工艺参数下发中...";
|
this.num = 0;
|
this.timer = setInterval(() => {
|
this.num = this.num + 1;
|
if (this.num === 30 || this.resParams) {
|
this.num = 30;
|
this.getCode(this.resParams);
|
}
|
}, 1000);
|
if (this.isLoading) {
|
return true;
|
}
|
this.isLoading = true;
|
sendProcessParams({
|
procedureId: this.currentTaskData.Procedure.ID,
|
position: Number(this.currentTaskData.Position),
|
}).then((res) => {
|
if (res.code === 200) {
|
this.resParams = res;
|
this.isLoading = false;
|
} else {
|
this.isLoading = false;
|
this.resParams = res;
|
}
|
}, err => {
|
console.error(err)
|
});
|
setTimeout(() => {
|
this.isLoading = false;
|
}, 30000)
|
}
|
},
|
getCode(res) {
|
if (res.code === 200) {
|
if (this.num === 30) {
|
this.messageError = "下发成功！";
|
if (!this.secondTimer) {
|
this.secondTimer = setInterval(() => {
|
this.second = this.second + 1;
|
}, 1000);
|
}
|
clearInterval(this.timer);
|
// this.num = 30;
|
// this.showBtn = 2;
|
this.message = this.safeProduce;
|
|
this.num = 0;
|
this.showBtn = 1
|
this.shutdown();
|
this.$emit('getSetProductNumber', this.activeName)
|
// this.$message.success("下发生产数量成功！");
|
}
|
} else {
|
this.messageError = res.msg ? res.msg : "抱歉，工序下发失败！";
|
clearInterval(this.timer);
|
this.num = 30;
|
this.showBtn = 2;
|
this.message = this.safeProduce;
|
}
|
},
|
shutdown() {
|
this.show = false;
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.color_error {
|
color: red;
|
}
|
|
.color_success {
|
color: green;
|
}
|
|
.tank-box {
|
width: 753px;
|
height: 728px;
|
background: url("../../public/tank.png") no-repeat center center / cover;
|
position: relative;
|
|
.dialog-footer {
|
position: absolute;
|
bottom: 25px;
|
width: 100%;
|
text-align: center;
|
}
|
}
|
|
.margin-top-10px {
|
margin-top: 10px;
|
}
|
|
.margin-top-40px {
|
margin-top: 40px;
|
}
|
|
.color_4efefa {
|
color: #4efefa !important;
|
}
|
|
.color_fff {
|
color: #fff;
|
}
|
|
.font_size_20 {
|
font-size: 20px !important;
|
}
|
|
.margin_bottom_13 {
|
margin-bottom: 13px;
|
}
|
|
.title-box {
|
width: calc(100% - 140px);
|
height: auto;
|
overflow: hidden;
|
padding: 0 70px;
|
|
.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: 52px;
|
line-height: 52px;
|
|
span {
|
width: calc(100% - 120px);
|
height: 52px;
|
text-align: center;
|
display: inline-block;
|
background: url("../../public/number.png") no-repeat center center / cover;
|
}
|
}
|
|
.title-item-two {
|
width: 100% !important;
|
}
|
}
|
|
.error-t {
|
width: 100px;
|
margin: 100px auto 40px;
|
font-size: 98px;
|
|
span {
|
display: inline-block;
|
}
|
}
|
|
.error-m {
|
line-height: 35px;
|
font-size: 28px;
|
color: #fff;
|
margin-bottom: 20px;
|
text-align: center;
|
}
|
|
::v-deep .el-dialog {
|
background: transparent;
|
}
|
|
::v-deep .el-dialog__header {
|
padding: 0 !important;
|
}
|
|
::v-deep .el-dialog__body {
|
padding: 0 !important;
|
}
|
|
.btn-error {
|
bottom: 80px !important;
|
}
|
|
.btn {
|
width: 150px;
|
height: auto;
|
display: inline-block;
|
position: relative;
|
|
img {
|
width: 100%;
|
}
|
|
.icon-loading {
|
font-size: 32px;
|
color: #333;
|
position: absolute;
|
line-height: 2.0;
|
left: 38%;
|
}
|
|
&: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 25px auto;
|
text-align: center;
|
font-size: 14px;
|
}
|
|
.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% - 190px);
|
padding: 20px 0 10px;
|
position: relative;
|
|
.el-form {
|
overflow: hidden;
|
}
|
|
.title-auto-box {
|
height: calc(100% - 220px);
|
overflow: auto;
|
width: calc(100% - 140px);
|
margin: 0 auto;
|
background: #0E246A;
|
|
.title-box {
|
padding: 0 10px;
|
width: calc(100% - 20px);
|
}
|
}
|
|
.gif-box {
|
width: 230px;
|
margin: 0 auto 5px auto;
|
|
.gif-right {
|
width: 210px;
|
font-size: 14px;
|
color: #fff;
|
line-height: 28px;
|
|
span {
|
font-weight: 700;
|
font-size: 18px;
|
}
|
}
|
}
|
|
.gif {
|
width: 55px;
|
vertical-align: middle;
|
float: left;
|
margin-right: 20px;
|
|
img {
|
width: 100%;
|
}
|
|
.yuandian {
|
width: 55px;
|
height: 55px;
|
float: left;
|
// background: #15d815;
|
background: red;
|
border-radius: 50%;
|
// margin-top:-5px;
|
vertical-align: middle;
|
}
|
}
|
|
.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 {
|
width: 98%;
|
margin: 0 auto;
|
overflow: hidden;
|
|
.title-l {
|
width: 25%;
|
float: left;
|
margin-left: 30px;
|
font-size: 25px;
|
color: #fff;
|
height: 3.2vw;
|
line-height: 4.5vw;
|
}
|
|
.title-r {
|
width: 60px;
|
float: right;
|
height: 60px;
|
line-height: 5vw;
|
cursor: pointer;
|
|
img {
|
display: inline-block;
|
width: 100%;
|
}
|
}
|
|
.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;
|
}
|
}
|
|
.paginator-btn {
|
position: absolute;
|
height: 40px;
|
width: 40px;
|
background-color: #09e5ed;
|
color: #fff;
|
top: 50%;
|
text-align: center;
|
font-size: 24px;
|
font-weight: 500;
|
border-radius: 50%;
|
margin-top: -20px;
|
line-height: 38px;
|
box-sizing: border-box;
|
cursor: pointer;
|
user-select: none;
|
|
&.previous {
|
left: -60px;
|
padding-right: 2px;
|
}
|
|
&.next {
|
right: -60px;
|
padding-left: 4px;
|
}
|
}
|
|
.paginator-text {
|
position: absolute;
|
bottom: -30px;
|
height: 40px;
|
width: 100%;
|
text-align: center;
|
|
& .page {
|
color: #fff;
|
font-size: 22px;
|
padding-right: 8px;
|
}
|
|
& .total {
|
color: #ffffffaa;
|
font-size: 16px;
|
}
|
}
|
</style>
|
