部署页优化

src/main/vue/src/pages/DeploySystem.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="container">
+    <div class="container" :style="{height:height}">
         <el-alert
             v-if="state === 0"
             title="请谨慎操作"
@@ -11,8 +11,6 @@
         <div v-if="state === 0" style="margin-top:20px">
             <el-button size="small" @click="deploy" type="danger" plain>重新部署</el-button>
         </div>
-
-
         <el-alert
             v-if="state === 1"
             :closable="false"
@@ -49,7 +47,14 @@
                 url: '',
                 percentage: 0,
                 state: 0,
-                output: ''
+                output: '',
+                estimatedDuration: 0,
+                startTime: 0
+            }
+        },
+        computed: {
+            height() {
+                return window.innerHeight - 100 + 'px'
             }
         },
         methods: {
@@ -67,6 +72,7 @@
                     })
                 }).then(res => {
                     if (res.status === 201) {
+                        this.startTime = new Date().getTime();
                         return axios.get(`${res.headers['location']}api/json`)
                     } else {
                         throw ''
@@ -84,7 +90,10 @@
                 axios.get(`${this.url}api/json`).then(res => {
                     if (res.status === 200) {
                         if (res.data.building) {
-                            let p = (new Date().getTime() - res.data.timestamp) * 100 / res.data.estimatedDuration;
+                            if (!this.estimatedDuration) {
+                                this.estimatedDuration = res.data.estimatedDuration + 80000;
+                            }
+                            let p = (new Date().getTime() - this.startTime) * 100 / this.estimatedDuration;
                             p = p < 0 ? 0 : (p >= 100 ? 99 : parseInt(p));
                             this.percentage = p;
                             setTimeout(() => {
@@ -92,15 +101,29 @@
                             }, 1000);
                         } else {
                             this.state = 2;
-                            axios.get('http://49.4.67.181:8083/admin#/myTasks' || this.$baseUrl, {
-                                timeout: 600000
-                            }).then(res => {
-                                this.state = 3;
-                                this.percentage = 100;
-                                this.$message.success('部署成功')
-                            }).catch(e => {
 
-                            });
+                            let interval = setInterval(() => {
+                                let p = (new Date().getTime() - this.startTime) * 100 / this.estimatedDuration;
+                                p = p < 0 ? 0 : (p >= 100 ? 99 : parseInt(p));
+                                this.percentage = p;
+                                axios.get('http://121.43.171.110:8080/admin' || this.$baseUrl, {
+                                    timeout: 2000
+                                }).then(res => {
+                                    console.log(res);
+                                    this.state = 3;
+                                    this.percentage = 100;
+                                    this.$message.success('部署成功');
+                                    this.$alert('请刷新页面', '部署成功', {
+                                        type: 'success',
+                                        confirmButtonText: '立即刷新',
+                                    }).then(() => {
+                                        location.reload();
+                                    }).catch(() => {
+                                    });
+                                    clearInterval(interval);
+                                }).catch(e => {
+                                });
+                            }, 2100)
                         }
                     }
                 });
@@ -122,12 +145,12 @@
         flex-direction: column;
         height: 100%;
         .output {
-            flex-basis: 0;
-            flex-grow: 1;
             overflow: auto;
-            margin-top: 40px;
             font-size: 14px;
             color: #666666;
+            flex-basis: 0;
+            flex-grow: 1;
+            margin-top: 40px;
         }
     }
 </style>