优化部署

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

@@ -1,69 +1,117 @@
 <template>
-    <div>
-        <div v-if="building">
-            <div style="color:#606266;font-size:14px">部署中</div>
+    <div class="container">
+        <div v-if="building" class="building">
+            <el-alert
+                v-if="percentage<100"
+                :closable="false"
+                title="部署中"
+                type="info"
+                show-icon>
+            </el-alert>
+            <el-alert
+                v-else
+                :closable="false"
+                title="部署成功"
+                type="success"
+                show-icon>
+            </el-alert>
             <el-progress :percentage="percentage"></el-progress>
+            <pre class="output" ref="output">{{output}}</pre>
         </div>
         <div v-else>
-            <el-alert title="请谨慎操作" type="warning" description="重新部署会导致网站暂时无法访问" :closable="false" show-icon> </el-alert>
+            <el-alert title="请谨慎操作" type="warning" description="重新部署会导致网站暂时无法访问" :closable="false" show-icon></el-alert>
             <el-button size="small" style="margin-top:20px" @click="deploy">重新部署</el-button>
         </div>
     </div>
 </template>
 <script>
-import axios from 'axios'
-export default {
-    data() {
-        return {
-            url: '',
-            percentage: 0,
-            building: false
-        }
-    },
-    methods: {
-        deploy() {
-            this.$confirm('确定重新部署?', '提示', {
-                confirmButtonText: '确定',
-                cancelButtonText: '取消',
-                type: 'warning'
-            }).then(() => {
-                axios.post('http://49.4.67.181:8000/job/信牧基础平台/build', {
-                    auth: {
-                        username: 'admin',
-                        password: '3edc#EDC'
-                    }
-                }).then(res => {
-                    if (res.status === 201) {
-                        this.buildid = /(.*)\/(.+?)\/$/.exec(res.headers['location'])[2]
-                        this.percentage = 0
-                        this.building = true
-                        this.pollingStatus()
-                    } else {
+    import axios from 'axios'
+
+    export default {
+        data() {
+            return {
+                url: '',
+                percentage: 0,
+                building: false,
+                output: ''
+            }
+        },
+        methods: {
+            deploy() {
+                this.$confirm('确定重新部署?', '提示', {
+                    confirmButtonText: '确定',
+                    cancelButtonText: '取消',
+                    type: 'warning'
+                }).then(() => {
+                    axios.post('http://49.4.67.181:8000/job/信牧基础平台/build', {
+                        auth: {
+                            username: 'admin',
+                            password: '3edc#EDC'
+                        }
+                    }).then(res => {
+                        if (res.status === 201) {
+                            this.buildid = /(.*)\/(.+?)\/$/.exec(res.headers['location'])[2];
+                            this.percentage = 0;
+                            this.building = true;
+                            this.pollingStatus();
+                        } else {
 
+                        }
+                    })
+                }).catch(() => {
+                });
+            },
+            pollingStatus() {
+                axios.get(`http://49.4.67.181:8000/job/信牧基础平台/${this.buildid}/api/json`).then(res => {
+                    if (res.status === 200) {
+                        if (res.data.building) {
+                            let p = (new Date().getTime() - res.data.timestamp) * 100 / res.data.estimatedDuration;
+                            p = p < 0 ? 0 : (p >= 100 ? 99 : parseInt(p));
+                            this.percentage = p;
+                            setTimeout(() => {
+                                this.pollingStatus();
+                                this.pollingOutputs();
+                            }, 500);
+                        } else {
+                            this.percentage = 100;
+                            this.$message.success('部署成功')
+                        }
                     }
                 })
-            }).catch(() => { });
-        },
-        pollingStatus() {
-            axios.get(`http://49.4.67.181:8000/job/信牧基础平台/${this.buildid}/api/json`).then(res => {
-                if (res.status === 200) {
-                    if (res.data.building) {
-                        let p = (new Date().getTime() - res.data.timestamp) * 100 / res.data.estimatedDuration
-                        p = p < 0 ? 0 : (p >= 100 ? 99 : parseInt(p))
-                        this.percentage = p
+            },
+            pollingOutputs() {
+                axios.get(`http://49.4.67.181:8000/job/信牧基础平台/${this.buildid}/logText/progressiveText?start=0`).then(res => {
+                    console.log(res);
+                    if (res.status === 200) {
+                        this.output = res.data;
                         setTimeout(() => {
-                            this.pollingStatus()
-                        }, 500);
-                    } else {
-                        this.percentage = 100
-                        this.building = false
-                        this.$message.success('部署成功')
+                            this.$refs.output.scrollTop = this.$refs.output.scrollHeight;
+                        }, 100)
                     }
-                }
-            })
+                })
+            }
         }
     }
-}
 </script>
 <style lang="less" scoped>
+    .container {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        overflow: auto;
+        .building {
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+            overflow: auto;
+            .output {
+                flex-basis: 0;
+                flex-grow: 1;
+                overflow: auto;
+                margin-top: 40px;
+                font-size: 14px;
+                color: #666666;
+            }
+        }
+    }
 </style>