老师代码作业deploy新界面

src/views/teacher/Code/ProjectDetail/DeployDetail.vue

@@ -1,44 +1,93 @@
 <template>
-  <div class="data-table">
-    <section>
-      <b-message
-        title="部署进行中..."
-        :active.sync="isRunning"
-        type="is-warning"
-      >
-        部署已经开始，一次部署需要大约5－10分钟，请5-10分钟后刷新页面获取部署结果
-      </b-message>
-    </section>
-    <!--部署记录-->
-    <div class="deploy-list" v-if="deployInfo">
-      <div class="subtitle">
-        {{ isRunning ? "当前部署情况" : "上次部署结果" }}
-      </div>
-      <div class="deploy-item">本次部署ID: #{{ deployInfo.id }}</div>
-      <div class="deploy-item">
-        本次部署创建时间: {{ handleTime(deployInfo.createdAt) }}
-      </div>
-      <div class="deploy-item" v-if="deployInfo.endAt">
-        本次部署结束时间: {{ handleTime(deployInfo.endAt) }}
-      </div>
-      <div class="deploy-item">
-        部署结果:
-        <div :class="['tag', type(deployInfo.status)]">
-          {{ deployInfo.status }}
+  <div class="main-data">
+    <!--test-->
+    <div class="data-table">
+      <section>
+        <b-message
+          title="部署进行中..."
+          :active.sync="test.isRunning"
+          type="is-warning"
+          >部署已经开始，一次部署需要大约5－10分钟，请5-10分钟后刷新页面获取部署结果</b-message
+        >
+      </section>
+      <!--部署记录-->
+      <div class="deploy-list" v-if="test.deployInfo">
+        <div class="subtitle">
+          {{ test.isRunning ? "Test环境当前部署情况" : "Test环境上次部署结果" }}
+        </div>
+        <div class="deploy-item">本次部署ID: #{{ test.deployInfo.id }}</div>
+        <div class="deploy-item">
+          本次部署创建时间: {{ handleTime(test.deployInfo.createdAt) }}
+        </div>
+        <div class="deploy-item" v-if="test.deployInfo.endAt">
+          本次部署结束时间: {{ handleTime(test.deployInfo.endAt) }}
+        </div>
+        <div class="deploy-item">
+          部署结果:
+          <div :class="['tag', type(test.deployInfo.status)]">
+            {{ test.deployInfo.status }}
+          </div>
+        </div>
+        <div class="subtitle">项目部署地址</div>
+        <div class="deploy-item">{{ test.deployInfo.url }}</div>
+        <div class="deploy-item">
+          <div class="subtitle">部署输出信息</div>
+          <a
+            class="button is-small is-info"
+            @click="test.unfoldDeployLogInfo = !test.unfoldDeployLogInfo"
+            >{{
+              test.unfoldDeployLogInfo ? "收起部署详细信息" : "查看部署详细信息"
+            }}</a
+          >
+          <div class="code-section" v-show="test.unfoldDeployLogInfo">
+            <div class="code-content" v-html="test.deployLog"></div>
+          </div>
         </div>
       </div>
-      <div class="subtitle">项目部署地址</div>
-      <div class="deploy-item">{{ deployInfo.url }}</div>
-      <div class="deploy-item">
-        <div class="subtitle">部署输出信息</div>
-        <a
-          class="button is-small is-info"
-          @click="unfoldDeployLogInfo = !unfoldDeployLogInfo"
-        >
-          {{ unfoldDeployLogInfo ? "收起部署详细信息" : "查看部署详细信息" }}</a
+    </div>
+
+    <!--prod-->
+    <div class="data-table" :style="{ marginLeft: '20px' }">
+      <section>
+        <b-message
+          title="部署进行中..."
+          :active.sync="prod.isRunning"
+          type="is-warning"
+          >部署已经开始，一次部署需要大约5－10分钟，请5-10分钟后刷新页面获取部署结果</b-message
         >
-        <div class="code-section" v-show="unfoldDeployLogInfo">
-          <div class="code-content" v-html="deployLog"></div>
+      </section>
+      <!--部署记录-->
+      <div class="deploy-list" v-if="prod.deployInfo">
+        <div class="subtitle">
+          {{ prod.isRunning ? "Prod环境当前部署情况" : "Prod环境上次部署结果" }}
+        </div>
+        <div class="deploy-item">本次部署ID: #{{ prod.deployInfo.id }}</div>
+        <div class="deploy-item">
+          本次部署创建时间: {{ handleTime(prod.deployInfo.createdAt) }}
+        </div>
+        <div class="deploy-item" v-if="prod.deployInfo.endAt">
+          本次部署结束时间: {{ handleTime(prod.deployInfo.endAt) }}
+        </div>
+        <div class="deploy-item">
+          部署结果:
+          <div :class="['tag', type(prod.deployInfo.status)]">
+            {{ prod.deployInfo.status }}
+          </div>
+        </div>
+        <div class="subtitle">项目部署地址</div>
+        <div class="deploy-item">{{ prod.deployInfo.url }}</div>
+        <div class="deploy-item">
+          <div class="subtitle">部署输出信息</div>
+          <a
+            class="button is-small is-info"
+            @click="prod.unfoldDeployLogInfo = !prod.unfoldDeployLogInfo"
+            >{{
+              prod.unfoldDeployLogInfo ? "收起部署详细信息" : "查看部署详细信息"
+            }}</a
+          >
+          <div class="code-section" v-show="prod.unfoldDeployLogInfo">
+            <div class="code-content" v-html="prod.deployLog"></div>
+          </div>
         </div>
       </div>
     </div>
@@ -50,6 +99,25 @@ import { getDeployDetail, getDeployLogInfo } from "@/api/codehw";
 export default {
   data() {
     return {
+      test: {
+        isActive: false,
+        isRunning: false,
+        deployStatus: "",
+        deployInfo: {},
+        haveDeployRecord: false,
+        deployLog: "",
+        unfoldDeployLogInfo: false
+      },
+      prod: {
+        isActive: false,
+        isRunning: false,
+        deployStatus: "",
+        deployInfo: {},
+        haveDeployRecord: false,
+        deployLog: "",
+        unfoldDeployLogInfo: false
+      },
+
       isActive: false,
       isRunning: false,
       deployStatus: "",
@@ -71,30 +139,75 @@ export default {
   },
   watch: {
     projectDetail: function(newVal) {
-      console.log(newVal);
-      //获取最新一次部署详细信息
-      if (newVal.latestDeploy && newVal.latestDeploy.id) {
-        this.haveDeployRecord = true;
-        this.getLatestDeployInfo(newVal.latestDeploy.id);
-        this.getDeployLogInfo(this.projectDetail.latestDeploy.id);
+      console.log("Deploy watch", newVal);
+      //获取最新一次Test部署详细信息
+      if (newVal.deploy.latestTestDeploy && newVal.deploy.latestTestDeploy.id) {
+        this.test.haveDeployRecord = true;
+        this.getLatestDeployInfo(newVal.deploy.latestTestDeploy.id, "test");
+        this.getDeployLogInfo(newVal.deploy.latestTestDeploy.id, "test");
+      }
+
+      //获取最新一次Prod部署详细信息
+      if (newVal.deploy.latestProdDeploy && newVal.deploy.latestProdDeploy.id) {
+        this.test.haveDeployRecord = true;
+        this.getLatestDeployInfo(newVal.deploy.latestProdDeploy.id, "prod");
+        this.getDeployLogInfo(newVal.deploy.latestProdDeploy.id, "prod");
       }
     }
   },
   mounted() {
-    if (this.projectDetail.latestDeploy) {
-      this.getLatestDeployInfo(this.projectDetail.latestDeploy.id);
-      this.getDeployLogInfo(this.projectDetail.latestDeploy.id);
+    console.log("1", this.projectDetail);
+    //获取最新一次Test部署详细信息
+    if (
+      this.projectDetail.deploy &&
+      this.projectDetail.deploy.latestTestDeploy &&
+      this.projectDetail.deploy.latestTestDeploy.id
+    ) {
+      this.test.haveDeployRecord = true;
+      this.getLatestDeployInfo(
+        this.projectDetail.deploy.latestTestDeploy.id,
+        "test"
+      );
+      this.getDeployLogInfo(
+        this.projectDetail.deploy.latestTestDeploy.id,
+        "test"
+      );
+    }
+
+    //获取最新一次Prod部署详细信息
+    if (
+      this.projectDetail.deploy &&
+      this.projectDetail.deploy.latestProdDeploy &&
+      this.projectDetail.deploy.latestProdDeploy.id
+    ) {
+      this.test.haveDeployRecord = true;
+      this.getLatestDeployInfo(
+        this.projectDetail.deploy.latestProdDeploy.id,
+        "prod"
+      );
+      this.getDeployLogInfo(
+        this.projectDetail.deploy.latestProdDeploy.id,
+        "prod"
+      );
     }
   },
   methods: {
     //获取最新一次部署详细信息
-    getLatestDeployInfo(deployId) {
+    getLatestDeployInfo(deployId, type) {
       getDeployDetail(deployId)
         .then(res => {
-          this.deployInfo = res.data;
-          this.deployStatus = res.data.status;
-          let isRunning = this.deployStatus == "RUNNING" ? true : false;
-          this.isRunning = isRunning;
+          if (type === "test") {
+            this.test.deployInfo = res.data;
+            this.test.deployStatus = res.data.status;
+            let isRunning = this.test.deployStatus == "RUNNING" ? true : false;
+            this.test.isRunning = isRunning;
+          }
+          if (type === "prod") {
+            this.prod.deployInfo = res.data;
+            this.prod.deployStatus = res.data.status;
+            let isRunning = this.prod.deployStatus == "RUNNING" ? true : false;
+            this.prod.isRunning = isRunning;
+          }
         })
         .catch(e => {
           this.$toast.open({
@@ -111,10 +224,15 @@ export default {
       return time.replace("T", " ") + "ms";
     },
     //获取部署日志
-    getDeployLogInfo(deployId) {
+    getDeployLogInfo(deployId, type) {
       getDeployLogInfo(deployId)
         .then(res => {
-          this.deployLog = res.data;
+          if (type === "test") {
+            this.test.deployLog = res.data;
+          }
+          if (type === "prod") {
+            this.prod.deployLog = res.data;
+          }
         })
         .catch(e => {
           this.$toast.open({
@@ -140,6 +258,10 @@ export default {
 </script>
 <style lang="scss" scoped>
 @import "../../../../assets/scss/app";
+.main-data {
+  display: flex;
+}
+
 .deploy-list {
   margin-top: 1.5rem;
   .deploy-item {