<template>
|
<!-- top="10vh" -->
|
<el-dialog
|
:close-on-click-modal="false"
|
:visible.sync="islook"
|
width="938px"
|
class="add-event-dialog"
|
:show-close="false"
|
>
|
<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="title-box margin_bottom_20">
|
<div class="title-item" v-for="(item,index) in processList" :key="index">
|
<div class="item-l-bng">
|
<img src="../../public/process-model.png" />
|
</div>
|
<div class="item-r" @click="processDetailsClick(item,index)">
|
<div class="item-r-t font_weight">{{ item.number }}</div>
|
<div class="item-r-b">产品：{{ item.product }}</div>
|
<div class="item-r-b">工序：{{ item.procedure }}</div>
|
</div>
|
<div class="tip-r" v-if="item.isUpdate">
|
<img src="../../public/process-tip.png" />
|
</div>
|
<div class="tip-current" v-if="item.number==listData.number">当前使用</div>
|
<div class="btn">
|
<el-button
|
type="primary"
|
size="mini"
|
class="color_organge"
|
:disabled="item.isUpdate?false:true"
|
@click="updateProcess(item,index)"
|
>
|
<i class="el-icon-loading icon-loading" v-if="isLoading[index]"></i>
|
<span v-else>更新工艺 </span>
|
</el-button>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
</div>
|
</div>
|
<div slot="footer" class="dialog-footer tac" style="overflow: hidden">
|
|
<el-button v-if="isPage"
|
type="primary"
|
size="mini"
|
:disabled="top"
|
class="color_blue margin_right_20px"
|
v-prevent-re-click="3000"
|
@click="onSubmitTop()"
|
>
|
上一页</el-button
|
>
|
|
<el-button v-if="isPage"
|
type="primary"
|
size="mini"
|
:disabled="bottom"
|
class="color_blue"
|
v-prevent-re-click="3000"
|
@click="onSubmitBottom()"
|
>
|
下一页</el-button
|
>
|
</div>
|
<!-- <ErrorIssue ref="error" :messageError="messageError" @shutdown="shutdown"/> -->
|
<ProcessModelDetails
|
ref="processDetails"
|
:processObj="processObj"
|
:listData="listData"
|
@renew="renew"
|
/>
|
</div>
|
|
</el-dialog>
|
</template>
|
|
<script>
|
import {
|
processModelList,
|
updateProcessParams,
|
} from "@/api/home/index"; // 产线
|
import ProcessModelDetails from "@/components/ProcessModelDetails";
|
export default {
|
components: {ProcessModelDetails},
|
props: {
|
listData: {
|
type: [Array,Object],
|
default: () => {
|
return {};
|
},
|
},
|
},
|
data() {
|
return {
|
islook: false,
|
isLoading:{},
|
processObj:{},
|
processList:[],
|
pageObj:{
|
page:1,
|
pageSize:6,
|
},
|
total:0,
|
top:false,
|
bottom:false,
|
index:null,
|
isPage:false,
|
isRenew:false,
|
};
|
},
|
mounted() {
|
this.getInfo();
|
},
|
watch: {
|
islook(){
|
this.pageObj.page=1
|
this.getProcessModelList()
|
},
|
},
|
methods: {
|
processDetailsClick(item,index){
|
this.processObj=item;
|
this.index=index;
|
this.$refs.processDetails.islook=true;
|
},
|
closeClick() {
|
this.shutdown();
|
},
|
getInfo() {
|
// 1 未生产 2生产中 3生产完成
|
if (
|
Object.keys(this.listData).length > 0
|
) {
|
this.pageObj.page=1
|
this.getProcessModelList()
|
this.islook = true;
|
} else {
|
this.islook = false;
|
}
|
},
|
getProcessModelList(number){
|
if( Object.keys(this.listData).length > 0){
|
if(this.listData.Procedure.ID&&this.listData.number){
|
processModelList({
|
procedureId: this.listData.Procedure.ID,
|
page: this.pageObj.page,
|
pageSize:this.pageObj.pageSize,
|
number:number?number:this.listData.number
|
}).then(res=>{
|
if(res.data){
|
this.processList=res.data?res.data:[];
|
for(let i in this.processList){
|
this.isLoading[i]=false;
|
}
|
this.$forceUpdate()
|
}
|
this.total=res.total?res.total:0;
|
if(this.total<=6){
|
this.isPage=false;
|
this.top=true;
|
this.bottom=true;
|
}else{
|
this.isPage=true;
|
let pageTotal=Math.ceil(Number(this.total)/6)
|
if(this.pageObj.page<pageTotal){
|
|
this.bottom=false;
|
}else if(this.pageObj.page==pageTotal){
|
this.bottom=true;
|
}
|
if(this.pageObj.page==1){
|
this.top=true;
|
}else{
|
this.top=false;
|
}
|
}
|
|
})
|
}
|
}
|
},
|
renew(){
|
this.processObj.paramsMap=this.processObj.newParamsMap
|
this.processObj.number=this.processObj.newNumber
|
this.processObj.isUpdate=false
|
this.isRenew=true;
|
this.$emit('updateGet',this.processObj.newNumber)
|
this.getProcessModelList(this.processObj.newNumber)
|
},
|
updateProcess(item,index){
|
this.processObj=item;
|
this.isLoading[index]=true;
|
updateProcessParams({procedureId:this.listData.Procedure.ID}).then(res=>{
|
if(res.code==200){
|
this.isLoading[index]=false;
|
this.$message.success('更新成功！')
|
this.renew();
|
}else{
|
this.isLoading[index]=false;
|
}
|
})
|
setTimeout(()=>{
|
this.isLoading[index]=false;
|
},50000)
|
},
|
onSubmitTop() {
|
this.pageObj.page= this.pageObj.page-1;
|
this.getProcessModelList()
|
},
|
onSubmitBottom(){
|
this.pageObj.page= this.pageObj.page+1;
|
this.getProcessModelList()
|
},
|
shutdown() {
|
this.islook = false;
|
if(this.isRenew){
|
this.$emit('updateGet',this.processObj.newNumber,true)
|
}
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.color_error{
|
color:red;
|
}
|
.color_success{
|
color:green;
|
}
|
.tank-box {
|
width: 938px;
|
height: 733px;
|
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:9px 15px!important;
|
}
|
.color_blue{
|
background:#4343f5!important;
|
border:0!important;
|
font-size:16px;
|
padding:10px 25px!important;
|
}
|
.el-button.is-disabled{
|
color: #fff!important;
|
background:#7b95d3 !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% - 210px);
|
// overflow: hidden;
|
padding: 60px 0px 10px;
|
.el-form {
|
overflow: hidden;
|
}
|
.title-auto-box {
|
height: calc(100% - 0px);
|
overflow: auto;
|
width:calc(100% - 140px);
|
margin: 0 auto;
|
padding-top:20px;
|
.title-box{
|
padding:0 10px;
|
overflow:hidden;
|
width:calc(100% - 20px);
|
.title-item{
|
width:calc(50% - 30px);
|
height:92px;
|
padding:23px 10px 10px;
|
background:#31478f;
|
border-radius: 8px;
|
float:left;
|
overflow:hidden;
|
font-size:15px;
|
position:relative;
|
margin-bottom:20px;
|
&:nth-of-type(odd){
|
margin-right:20px;
|
}
|
.item-l-bng{
|
width:40px;
|
float:left;
|
margin-right:20px;
|
img{
|
width:100%;
|
}
|
}
|
.item-r{
|
width:calc(100% - 60px);
|
float:left;
|
line-height:22px;
|
color:#fff;
|
font-size:15px;
|
cursor:pointer;
|
.item-r-t{
|
font-size:15px;
|
}
|
.item-r-b{
|
font-size:13px;
|
}
|
}
|
.tip-r{
|
position:absolute;
|
top:5px;
|
right:15px;
|
width:20px;
|
img{
|
width:100%;
|
}
|
}
|
.tip-current{
|
background:green;
|
color:#fff;
|
position:absolute;
|
top:0px;
|
left:75px;
|
width:auto;
|
padding:2px 15px;
|
font-size:12px;
|
border-radius:0px 0px 6px 6px;
|
}
|
.btn{
|
width:100px;
|
position:absolute;
|
right:0px;
|
bottom:5px;
|
.el-button{
|
width:calc(100% - 15px);
|
}
|
.icon-loading{
|
font-size:22px;
|
text-align:center;
|
}
|
}
|
}
|
}
|
}
|
.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;
|
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;
|
}
|
}
|
</style>
|
