<template>
|
<!-- top="10vh" -->
|
<el-dialog
|
:close-on-click-modal="false"
|
:visible.sync="islook"
|
width="758px"
|
class="add-event-dialog"
|
top="21vh"
|
:show-close="false"
|
append-to-body
|
>
|
<div class="tank-box">
|
<div slot="title" class="tac drawerHeader">
|
<span class="title-l">工艺详情</span>
|
<span class="title-r" @click="closeClick">
|
<img src="../../public/close.png" />
|
</span>
|
</div>
|
<div class="dialog-content-box">
|
<div
|
style="
|
margin: 0 auto;
|
width: 100%;
|
height: 100%;
|
overflow: hidden;
|
text-align: left;
|
"
|
>
|
<template>
|
<div class="title-auto-box">
|
<div :class="processObj.isUpdate?'title-box-t margin_bottom_20':'title-box-t title-box-t-two'">
|
<div class="item-l">
|
<div class="item-l-t">{{ processObj.procedure }}</div>
|
<div class="item-l-b">
|
<span v-for="(item,index) in processObj.paramsMap" :key="index">
|
{{ index }} : {{ item }}；
|
</span>
|
</div>
|
</div>
|
<div class="item-r">工艺编号：{{ processObj.number }}</div>
|
</div>
|
<div class="title-box-b" v-if="processObj.isUpdate">
|
<div class="item-b-t">更新设置</div>
|
<template v-if="isUpdate == 1">
|
<div class="item-b-m">
|
<div class="item-b-b-l">
|
<span class="el-icon-refresh refresh-icon" style="float: right;"></span>
|
</div>
|
<div class="item-b-b-r">
|
<span>已检查到新版本：{{ processObj.newNumber }}</span>
|
<div class="item-b-btn" @click="updateProcess">
|
更新工艺
|
</div>
|
</div>
|
</div>
|
<div class="item-b-b">
|
<div class="item-two-l">
|
<div class="item-two-t">{{ processObj.procedure }}</div>
|
<div class="item-two-b">
|
<span v-for="(item,index) in processObj.newParamsMap" :key="index">
|
{{ index }} : {{ item }}；
|
</span>
|
</div>
|
</div>
|
<div class="item-two-r">
|
新版本：{{ processObj.newNumber }}
|
</div>
|
</div>
|
</template>
|
<template v-if="isUpdate == 2">
|
<div class="refresh-box">
|
<template v-if="isLoading">
|
<span class="transform el-icon-refresh refresh-icon"></span>
|
<div class="refresh-line">更新中，请稍后...</div>
|
</template>
|
<template v-else>
|
<span class="el-icon-top refresh-top-icon"></span>
|
<div class="refresh-line">已是最新版本</div>
|
</template>
|
</div>
|
</template>
|
</div>
|
</div>
|
</template>
|
</div>
|
</div>
|
<div
|
slot="footer"
|
class="dialog-footer tac"
|
style="overflow: hidden"
|
></div>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
import { updateProcessParams} from "@/api/home/index"; // 产线
|
export default {
|
components: {},
|
props: {
|
processObj: {
|
type: [Object],
|
default: () => {
|
return {};
|
},
|
},
|
listData: {
|
type: [Array,Object],
|
default: () => {
|
return {};
|
},
|
},
|
activeIndex:{
|
type:[String,Number],
|
default: () => {
|
return '';
|
},
|
}
|
},
|
data() {
|
return {
|
islook: false,
|
isLoading: false,
|
isUpdate: 1,
|
};
|
},
|
mounted() {
|
this.getInfo();
|
},
|
watch: {
|
processObj(){
|
this.$forceUpdate()
|
}
|
},
|
methods: {
|
updateProcess() {
|
this.isUpdate = 2;
|
if (this.isLoading) {
|
return true;
|
}
|
this.$emit('updateProcess',this.processObj,this.activeIndex)
|
// this.isLoading=true;
|
// updateProcessParams({procedureId:this.listData.Procedure.ID}).then(res=>{
|
// if(res.code==200){
|
// this.isLoading=false;
|
// this.$message.success('更新成功！')
|
// this.$emit('renew')
|
// }else{
|
// this.isLoading=false;
|
// this.isUpdate=1
|
// }
|
// })
|
// setTimeout(()=>{
|
// this.isLoading=false;
|
// },50000)
|
},
|
closeClick() {
|
this.shutdown();
|
},
|
getInfo() {
|
// 1 未生产 2生产中 3生产完成
|
if (Object.keys(this.processObj).length > 0) {
|
this.isUpdate = 1;
|
this.isLoading = false;
|
this.islook = true;
|
} else {
|
this.islook = false;
|
}
|
},
|
shutdown() {
|
this.islook = false;
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.color_error {
|
color: red;
|
}
|
.color_success {
|
color: green;
|
}
|
.tank-box {
|
width: 758px;
|
height: 593px;
|
background: url("../../public/tank-two.png") no-repeat center center / cover;
|
position: relative;
|
.dialog-footer {
|
position: absolute;
|
bottom: 45px;
|
width: 100%;
|
text-align: center;
|
}
|
}
|
.margin_right_20px {
|
margin-right: 20px;
|
}
|
.margin-top-10px {
|
margin-top: 10px;
|
}
|
.margin-top-40px {
|
margin-top: 40px;
|
}
|
.color_organge {
|
background: #f76c0f;
|
color: #fff;
|
border: 0 !important;
|
font-size: 14px;
|
padding: 10px 15px !important;
|
}
|
.color_blue {
|
background: #4343f5 !important;
|
border: 0 !important;
|
font-size: 16px;
|
padding: 10px 25px !important;
|
}
|
.color_4efefa {
|
color: #4efefa !important;
|
}
|
.color_fff {
|
color: #fff;
|
}
|
.font_size_20 {
|
font-size: 20px !important;
|
}
|
.font_weight {
|
font-weight: 700;
|
}
|
.margin_bottom_13 {
|
margin-bottom: 13px;
|
}
|
.title-box {
|
width: calc(100% - 140px);
|
height: auto;
|
overflow: hidden;
|
padding: 0 70px;
|
}
|
.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;
|
}
|
|
::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% - 140px);
|
// overflow: hidden;
|
padding: 60px 0px 10px;
|
.el-form {
|
overflow: hidden;
|
}
|
.refresh-icon {
|
width: 50px;
|
height: 50px;
|
background: #fff;
|
border-radius: 50%;
|
color: blue;
|
font-size: 31px;
|
line-height: 50px;
|
text-align: center;
|
display: inline-block;
|
font-weight: 700;
|
margin-right: 20px;
|
}
|
.refresh-top-icon {
|
width: 50px;
|
height: 50px;
|
border:4px solid #b0b0b0;
|
border-radius: 50%;
|
color: #b0b0b0;
|
font-size: 31px;
|
line-height: 50px;
|
text-align: center;
|
display: inline-block;
|
font-weight: 700;
|
margin-right: 20px;
|
}
|
.transform{
|
-webkit-animation: spin 1s linear infinite;
|
-ms-amimation:spin 1s linear infinite;
|
-moz-amimation:spin 1s linear infinite;
|
-o-amimation:spin 1s linear infinite;
|
}
|
@keyframes spin {
|
0%,15%{
|
transform:rotate(0);
|
}
|
100%{
|
transform:rotate(360deg);
|
}
|
}
|
.title-auto-box {
|
height: calc(100% - 20px);
|
overflow: auto;
|
width: calc(100% - 140px);
|
margin: 0 auto;
|
padding-top: 20px;
|
.title-box-t-two{
|
height:calc(100% - 55px)!important;
|
}
|
.title-box-t {
|
overflow: hidden;
|
width: calc(100% - 80px);
|
background: #0e246a;
|
min-height: 100px;
|
height: auto;
|
color: #fff;
|
padding: 15px 30px;
|
border-radius: 6px;
|
margin-bottom: 20px;
|
position: relative;
|
.item-auto-box {
|
overflow: auto;
|
}
|
.item-l {
|
width: 100%;
|
height: 100%;
|
float: left;
|
font-size: 17px;
|
.item-l-t {
|
width: calc(100% - 180px);
|
color: #4efefa;
|
margin-bottom: 10px;
|
}
|
.item-l-b {
|
width: 100%;
|
height: calc(100% - 40px);
|
font-size: 16px;
|
}
|
}
|
.item-r {
|
width: 180px;
|
padding: 8px 5px;
|
border-radius: 10px;
|
background: #06066a;
|
position: absolute;
|
right: 10px;
|
top: 10px;
|
text-align: center;
|
}
|
}
|
.title-box-b {
|
overflow: hidden;
|
width: calc(100% - 80px);
|
background: #0e246a;
|
min-height: 250px;
|
height: auto;
|
color: #fff;
|
padding: 15px 30px;
|
border-radius: 6px;
|
.item-b-t {
|
font-size: 18px;
|
margin-bottom: 10px;
|
color:#eee;
|
}
|
.refresh-box{
|
width:240px;
|
margin:0 auto;
|
.refresh-icon,.refresh-top-icon{
|
margin: 0 auto;
|
margin-left:95px;
|
}
|
.refresh-line{
|
width:100%;
|
height:40px;
|
border-top:5px solid #fff;
|
line-height:40px;
|
text-align:center;
|
font-size:18px;
|
color:#999;
|
margin-top:15px;
|
}
|
}
|
.item-b-m {
|
width: 100%;
|
margin: 0 auto;
|
overflow: hidden;
|
.item-b-b-l {
|
float: left;
|
width: calc(40% - 5px);
|
border-right: 3px solid #fff;
|
}
|
.item-b-b-r {
|
width: calc(60% - 20px);
|
margin-left: 20px;
|
float: left;
|
span {
|
display: inline-block;
|
width: 100%;
|
}
|
.item-b-btn {
|
width: 90px;
|
padding: 8px 10px;
|
border-radius: 10px;
|
background: #4343f5;
|
float: left;
|
cursor: pointer;
|
text-align: center;
|
margin-top: 10px;
|
}
|
}
|
}
|
.item-b-b {
|
width: calc(100% - 160px);
|
margin: 10px auto 0;
|
border: 1px dotted #fff;
|
height: calc(100% - 40px);
|
min-height: 120px;
|
overflow: hidden;
|
color: #fff;
|
padding: 10px 10px 10px 30px;
|
position: relative;
|
.item-two-l {
|
width: 100%;
|
height: 100%;
|
font-size: 14px;
|
.item-two-t {
|
width: calc(100% - 180px);
|
margin-bottom: 10px;
|
}
|
.item-two-b {
|
width: 100%;
|
height: calc(100% - 40px);
|
font-size: 14px;
|
}
|
}
|
.item-two-r {
|
width: 180px;
|
padding: 10px 10px;
|
border-radius: 10px;
|
position: absolute;
|
right: 5px;
|
top: 0px;
|
text-align: right;
|
}
|
}
|
}
|
}
|
.gif-box {
|
width: 230px;
|
margin: 0 auto;
|
margin-bottom: 5px;
|
.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: 99%;
|
margin: 0 auto;
|
overflow: hidden;
|
.title-l {
|
width: 25%;
|
float: left;
|
margin-left: 30px;
|
font-size: 22px;
|
color: #fff;
|
height: 3.2vw;
|
line-height: 4.5vw;
|
}
|
.title-r {
|
width: 60px;
|
float: right;
|
height: 50px;
|
margin-top:-8px;
|
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;
|
}
|
}
|
</style>
|
