一键部署-应用部署组件

src/components/deployment-info.vue

+<template>
+  <div class="deployment_info">
+    <div class="state_steps">
+      <p
+        class="deploy_state icon_and_text"
+        :class="{
+          warn: deployState.state === 2,
+        }"
+      >
+        <img :src="getIcon(deployState.state)" />
+        <span v-text="getText(deployState.state)"></span>
+      </p>
+      <ul class="state_list">
+        <li
+          v-for="item in data"
+          :key="item.value"
+          class="icon_and_text"
+          :class="{ current: item.value === currentState.value }"
+          @click="selecState(item)"
+        >
+          <img :src="getIcon(item.state)" />
+          <span v-text="item.name"></span>
+        </li>
+      </ul>
+    </div>
+    <div class="state_detail">
+      <p
+        v-text="currentState.content"
+        style="text-align: center;margin-top: 20px;"
+      ></p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    data: {
+      type: Array,
+      required: true,
+    },
+  },
+  data: () => ({
+    selectedState: null, // 用户选中的状态
+  }),
+  computed: {
+    deployState() {
+      let state = {
+        name: "-",
+        value: "values",
+        content: "",
+        state: 2,
+      };
+      let status = this.data;
+      let statusLength = status.length;
+
+      if (statusLength > 0) {
+        state = status[statusLength - 1];
+      }
+
+      return state;
+    }, // 正在进行的状态
+    currentState() {
+      return this.selectedState || this.deployState;
+    }, // 需要展示的状态
+  },
+  methods: {
+    getIcon(stateValue = 2) {
+      const icons = [
+        require("../assets/imgs/ic_operation.gif"),
+        require("../assets/imgs/ic_true.png"),
+        require("../assets/imgs/ic_failed.png"),
+      ];
+
+      return icons[stateValue];
+    },
+    getText(stateValue = 2) {
+      const texts = ["部署中", "成功", "失败"];
+
+      return texts[stateValue];
+    },
+    selecState(state) {
+      if (this.selectedState && this.selectedState.value === state.value) {
+        return;
+      }
+
+      console.log(state);
+      this.selectedState = state;
+    },
+  },
+  mounted() {
+    // console.log(this.data);
+  },
+};
+</script>
+
+<style scoped>
+.deployment_info {
+  display: flex;
+  justify-content: space-between;
+  align-items: stretch;
+}
+.state_steps {
+  width: 270px;
+  flex-shrink: 0;
+}
+.state_steps > .deploy_state {
+  margin: 10px 20px 20px 0;
+  padding: 10px;
+  border-radius: 5px;
+  overflow: hidden;
+  background-color: #edf0ff;
+  font-size: 16px;
+  line-height: 24px;
+  color: #264dd9;
+  text-align: center;
+}
+.state_steps > .deploy_state.warn {
+  background-color: #ffebeb;
+  color: #da4251;
+}
+.state_steps > .state_list > li {
+  padding: 15px 20px;
+  font-size: 14px;
+  line-height: 22px;
+  color: #242c43;
+  cursor: pointer;
+}
+.state_steps > .state_list > li.current {
+  border-top-left-radius: 6px;
+  border-bottom-left-radius: 6px;
+  background-color: #f8f9fd;
+}
+.state_detail {
+  height: 500px;
+  flex-grow: 1;
+  border-radius: 7px;
+  background-color: #f8f9fd;
+  overflow: hidden;
+}
+.icon_and_text > * {
+  display: inline-block;
+  vertical-align: middle;
+}
+.icon_and_text > img + span {
+  margin-left: 12px;
+}
+</style>

src/pages/workbench/yygl/deployment.vue

@@ -5,7 +5,9 @@
         <el-breadcrumb-item :to="`/yygl/${$route.params.level}/0`">
           我的应用
         </el-breadcrumb-item>
-        <el-breadcrumb-item :to="`/yygl/${$route.params.level}/${$route.params.type}`">
+        <el-breadcrumb-item
+          :to="`/yygl/${$route.params.level}/${$route.params.type}`"
+        >
           应用仓库
         </el-breadcrumb-item>
         <el-breadcrumb-item>
@@ -65,7 +67,10 @@
         :step="2"
         :active-icon="require('@/assets/imgs/progress_ic_bushudata.png')"
       >
-        <!-- content  -->
+        <deployment-info
+          :data="stateList"
+          style="margin-top: 30px;"
+        ></deployment-info>
         <div class="apass_button step_action">
           <el-button type="primary">
             前往查看
@@ -90,12 +95,14 @@
 import appBuildSteps from "@/components/app-build-steps/app-build-steps";
 import appBuildStep from "@/components/app-build-steps/app-build-step";
 import apassDialog from "@/components/apass-dialog";
+import deploymentInfo from "@/components/deployment-info";
 
 export default {
   components: {
     appBuildSteps,
     appBuildStep,
     apassDialog,
+    deploymentInfo,
   },
   data: () => ({
     step: 0,
@@ -116,6 +123,39 @@ export default {
       tag: [{ required: true, message: "请输入版本号", trigger: "blur" }],
       file: [{ required: true, message: "请选择镜像文件", trigger: "change" }],
     },
+    evtUuid: "",
+    evtSource: null,
+    listStatus: [],
+    state: "",
+    text: "",
+    url: "",
+    act: 0,
+    stateList: [
+      {
+        name: "获取部署参数",
+        value: "values",
+        content: "获取部署参数",
+        state: 1,
+      },
+      {
+        name: "拉取部署文件",
+        value: "pull-chart",
+        content: "拉取部署文件",
+        state: 1,
+      },
+      {
+        name: "开始部署",
+        value: "install",
+        content: "开始部署",
+        state: 1,
+      },
+      {
+        name: "部署状态",
+        value: "deploy-status",
+        content: "部署状态",
+        state: 2,
+      },
+    ],
   }),
   methods: {
     preStep() {
@@ -124,9 +164,87 @@ export default {
     nextStep() {
       this.step++;
     },
+    getStatus() {
+      let evtUuid = Math.random()
+        .toString(16)
+        .substr(3);
+      let evtSource = new EventSource(
+        `/apaas/hubApi/event/subscribe/deploy/${evtUuid}`
+      );
+
+      this.evtUuid = evtUuid;
+      this.evtSource = evtSource;
+
+      evtSource.addEventListener("message", function(e) {
+        if (this.listStatus.map((o) => o.status).indexOf(e.lastEventId) == -1) {
+          if (this.listStatus.length) {
+            this.listStatus[this.listStatus.length - 1].success = "success";
+          }
+
+          this.listStatus.push({
+            status: e.lastEventId,
+            success: JSON.parse(e.data).state,
+            data: JSON.parse(e.data).data,
+          });
+
+          this.text = this.listStatus[this.listStatus.length - 1].data;
+          this.text = "<span class='linenum'></span>" + this.text;
+          this.text = this.text.replace(
+            /\n/g,
+            "\n<span class='linenum'></span>"
+          );
+          this.text = this.text.replace(/>==>/g, ">>");
+          this.act = this.listStatus.length - 1;
+        } else {
+          let i = this.listStatus.map((o) => o.status).indexOf(e.lastEventId);
+          let item = this.listStatus[i].data;
+
+          item = item + "\n" + JSON.parse(e.data).data;
+
+          this.listStatus[i].data = item;
+          this.text = this.listStatus[this.listStatus.length - 1].data;
+          this.text = "<span class='linenum'></span>" + this.text;
+          this.text = this.text.replace(
+            /\n/g,
+            "\n<span class='linenum'></span>"
+          );
+          this.text = this.text.replace(/>==>/g, ">>");
+          this.act = this.listStatus.length - 1;
+
+          if (JSON.parse(e.data).state != "notes") {
+            this.listStatus[i].success = JSON.parse(e.data).state;
+          }
+        }
+
+        if (JSON.parse(e.data).state == "success") {
+          this.state = "部署成功！";
+          this.url = `https://${window.location.host}/apaas/ui/#/pods?namespace=${this.baseInfoForm.namespace}`;
+        }
+
+        for (let i = 0; i < this.listStatus.length; i++) {
+          switch (this.listStatus[i].status) {
+            case "values":
+              this.listStatus[i].statusHan = "获取部署参数";
+              break;
+            case "pull-chart":
+              this.listStatus[i].statusHan = "拉取部署文件";
+              break;
+            case "install":
+              this.listStatus[i].statusHan = "开始部署";
+              break;
+            case "deploy-status":
+              this.listStatus[i].statusHan = "部署状态";
+              break;
+            default:
+              this.listStatus[i].statusHan = "其他";
+              break;
+          }
+        }
+      });
+    },
   },
   mounted() {
-
+    this.getStatus();
   },
 };
 </script>