From a1a6630f2eabfc78a379b5808b1bf7231a084d0b Mon Sep 17 00:00:00 2001
From: haoxuan <haoxuan>
Date: 星期三, 11 十月 2023 18:02:44 +0800
Subject: [PATCH] 工序弹框的 列表和详情的更新同步
---
src/components/ProcessModelDetails.vue | 537 ++++++++++++++++++++++++++++++++++++-----------------------
1 files changed, 324 insertions(+), 213 deletions(-)
diff --git a/src/components/ProcessModelDetails.vue b/src/components/ProcessModelDetails.vue
index e019e1e..24346de 100644
--- a/src/components/ProcessModelDetails.vue
+++ b/src/components/ProcessModelDetails.vue
@@ -5,6 +5,7 @@
:visible.sync="islook"
width="758px"
class="add-event-dialog"
+ top="21vh"
:show-close="false"
append-to-body
>
@@ -27,53 +28,73 @@
>
<template>
<div class="title-auto-box">
- <div class="title-box-t margin_bottom_20">
- <div class="item-l">
- <div class="item-l-t">{{ processObj.name }}</div>
- <div class="item-l-b">{{ processObj.name }}</div>
+ <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 class="item-r">
- 宸ヨ壓缂栧彿锛歿{ processObj.number }}
- </div>
+ </div>
+ <div class="item-r">宸ヨ壓缂栧彿锛歿{ processObj.number }}</div>
</div>
- <div class="title-box-b">
+ <div class="title-box-b" v-if="processObj.isUpdate">
<div class="item-b-t">鏇存柊璁剧疆</div>
- <div class="item-b-m">
- <div class="item-b-b-l"><span class="el-icon-refresh"></span></div>
- <div class="item-b-b-r">
- <span>宸叉鏌ュ埌鏂扮増鏈細H2131221</span>
- <div class="item-b-btn">
- 鏇存柊宸ヨ壓
+ <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>
- <div class="item-b-b">
- <div class="item-two-l">
- <div class="item-two-t">{{ processObj.name }}</div>
- <div class="item-two-b">{{ processObj.name }}</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>
- <div class="item-two-r">
- 鏂扮増鏈細{{ processObj.number }}
+ </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>
- </div>
+ </template>
</div>
</div>
</template>
</div>
</div>
- <div slot="footer" class="dialog-footer tac" style="overflow: hidden">
- </div>
-
+ <div
+ slot="footer"
+ class="dialog-footer tac"
+ style="overflow: hidden"
+ ></div>
</div>
-
</el-dialog>
</template>
<script>
-import {
- startTask,
- sendProcessParams,
-} from "@/api/home/index"; // 浜х嚎
+import { updateProcessParams} from "@/api/home/index"; // 浜х嚎
export default {
components: {},
props: {
@@ -83,33 +104,65 @@
return {};
},
},
+ listData: {
+ type: [Array,Object],
+ default: () => {
+ return {};
+ },
+ },
+ activeIndex:{
+ type:[String,Number],
+ default: () => {
+ return '';
+ },
+ }
},
data() {
return {
islook: false,
- isLoading:false,
+ isLoading: false,
+ isUpdate: 1,
};
},
mounted() {
this.getInfo();
},
watch: {
- islook(){
- },
+ processObj(){
+ this.$forceUpdate()
+ }
},
methods: {
- processDetailsClick(item){
-
+ 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.islook = true;
+ if (Object.keys(this.processObj).length > 0) {
+ this.isUpdate = 1;
+ this.isLoading = false;
+ this.islook = true;
} else {
this.islook = false;
}
@@ -122,47 +175,45 @@
</script>
<style lang="scss" scoped>
-.color_error{
- color:red;
+.color_error {
+ color: red;
}
-.color_success{
- color:green;
+.color_success {
+ color: green;
}
.tank-box {
- width:758px;
- height:593px;
+ 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;
-
+ width: 100%;
+ text-align: center;
}
-
}
-.margin_right_20px{
- margin-right:20px;
+.margin_right_20px {
+ margin-right: 20px;
}
-.margin-top-10px{
- margin-top:10px;
+.margin-top-10px {
+ margin-top: 10px;
}
-.margin-top-40px{
- margin-top:40px;
+.margin-top-40px {
+ margin-top: 40px;
}
.color_organge {
background: #f76c0f;
- color:#fff;
- border:0!important;
- font-size:14px;
- padding:10px 15px!important;
+ 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_blue {
+ background: #4343f5 !important;
+ border: 0 !important;
+ font-size: 16px;
+ padding: 10px 25px !important;
}
.color_4efefa {
color: #4efefa !important;
@@ -173,7 +224,7 @@
.font_size_20 {
font-size: 20px !important;
}
-.font_weight{
+.font_weight {
font-weight: 700;
}
.margin_bottom_13 {
@@ -183,12 +234,12 @@
width: calc(100% - 140px);
height: auto;
overflow: hidden;
- padding:0 70px;
+ padding: 0 70px;
}
.error-t {
width: 100px;
margin: 100px auto 40px;
- font-size:98px;
+ font-size: 98px;
span {
display: inline-block;
}
@@ -209,8 +260,8 @@
::v-deep .el-dialog__body {
padding: 0 !important;
}
-.btn-error{
- bottom:80px!important;
+.btn-error {
+ bottom: 80px !important;
}
::v-deep .el-tabs__content {
@@ -294,166 +345,226 @@
.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% - 0px);
+ height: calc(100% - 20px);
overflow: auto;
- width:calc(100% - 140px);
- margin: 0 auto;
- padding-top:20px;
- .title-box-t{
- overflow:hidden;
- width:calc(100% - 80px);
- background:#0E246A;
- min-height:100px;
- height:auto;
- color:#fff;
- padding:15px 30px;
+ 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;
- .item-auto-box{
- overflow:auto;
+ margin-bottom: 20px;
+ position: relative;
+ .item-auto-box {
+ overflow: auto;
}
- .item-l{
- width:calc(100% - 140px);
- height:100%;
- float:left;
- font-size:17px;
- .item-l-t{
- color:#4efefa;
- margin-bottom:20px;
+ .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{
- font-size:16px;
+ .item-l-b {
+ width: 100%;
+ height: calc(100% - 40px);
+ font-size: 16px;
}
}
- .item-r{
- width:120px;
- padding:10px 10px;
- border-radius:10px;
- background:#4343f5;
- float:left;
- text-align:center;
+ .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;
+ .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;
+ .item-b-t {
+ font-size: 18px;
+ margin-bottom: 10px;
+ color:#eee;
}
- .item-b-m{
- width:100%;
+ .refresh-box{
+ width:240px;
margin:0 auto;
- overflow:hidden;
- .item-b-b-l{
- float:left;
- width:calc(40% - 5px);
- border-right:3px solid #fff;
- span{
- width:50px;
- height:50px;
- background:#fff;
- border-radius: 50%;
- color:blue;
- font-size:30px;
- line-height:50px;
- text-align:center;
- display:inline-block;
- font-weight: 700;
- float:right;
- margin-right:20px;
- }
+ .refresh-icon,.refresh-top-icon{
+ margin: 0 auto;
+ margin-left:95px;
}
- .item-b-b-r{
- width:calc(60% - 20px);
- margin-left:20px;
- float:left;
- span{
- display:inline-block;
- width:100%;
-
+ .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;
- text-align:center;
- margin-top:10px;
+ .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);
- overflow:hidden;
- color:#fff;
- padding:10px 10px 10px 30px;
- .item-two-l{
- width:calc(100% - 140px);
- height:100%;
- float:left;
- font-size:14px;
- .item-two-t{
- margin-bottom: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{
- font-size:14px;
+ .item-two-b {
+ width: 100%;
+ height: calc(100% - 40px);
+ font-size: 14px;
}
}
- .item-two-r{
- width:120px;
- padding:10px 10px;
- border-radius:10px;
- float:left;
- text-align:right;
+ .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{
+ .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;
+ font-size: 18px;
}
}
}
- .gif{
- width:55px;
+ .gif {
+ width: 55px;
vertical-align: middle;
- float:left;
- margin-right:20px;
- img{
- width:100%;
+ 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;
- }
+ width: 55px;
+ height: 55px;
+ float: left;
+ // background: #15d815;
+ background: red;
+ border-radius: 50%;
+ // margin-top:-5px;
+ vertical-align: middle;
+ }
}
.progress-item {
width: 55%;
@@ -481,27 +592,27 @@
font-weight: 600;
}
.drawerHeader {
- width:99%;
- margin:0 auto;
- overflow:hidden;
- .title-l{
- width:25%;
- float:left;
- margin-left:30px;
+ 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;
+ .title-r {
+ width: 60px;
+ float: right;
height: 50px;
- line-height: 5vw;
- cursor:pointer;
- img{
- display:inline-block;
- width:100%;
+ margin-top:-8px;
+ cursor: pointer;
+ img {
+ display: inline-block;
+ width: 100%;
}
}
.identify {
--
Gitblit v1.8.0