Merge branch 'xym' into dev

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>