From b166cacf21925e485c546ceb53ae099837617c17 Mon Sep 17 00:00:00 2001
From: xuezhixin <xuezhixin@uniontech.com>
Date: Mon, 18 Nov 2024 17:37:04 +0800
Subject: [PATCH] add migraiton running page s

---
 ui/mainApp/src/views/MigrateRunning.vue | 223 +++++++++++++++++++++++-
 1 file changed, 220 insertions(+), 3 deletions(-)

diff --git a/ui/mainApp/src/views/MigrateRunning.vue b/ui/mainApp/src/views/MigrateRunning.vue
index 1554bf3..ad0acc9 100644
--- a/ui/mainApp/src/views/MigrateRunning.vue
+++ b/ui/mainApp/src/views/MigrateRunning.vue
@@ -3,7 +3,7 @@
     <div>
       <StyledSubheaderBlock subHeader="迁移" />
       <div class="infoCard">
-        <div class="infoIcon"></div>
+        <div class="infoIcon">i</div>
         <div>
           对列表中的主机执行迁移，生成的日志和报告也可前往 下载中心 下载
         </div>
@@ -41,6 +41,17 @@
             label="主机名称"
             align="center"
           />
+          <el-table-column
+            :show-overflow-tooltip="true"
+            prop="agent_online_status"
+            label="在线状态"
+            align="center"
+          >
+            <template #default="scope">
+              <span v-if="scope.row.agent_online_status == 0">在线</span>
+              <span v-else>离线</span>
+            </template>
+          </el-table-column>
           <el-table-column
             :show-overflow-tooltip="true"
             prop="agent_os"
@@ -60,6 +71,38 @@
             align="center"
             width="250"
           >
+            <template #default="scope" align="center">
+              <div v-if="scope.row.task_status == 1">
+                <span>迁移中...</span>
+                <el-progress :percentage="scope.row.progress"></el-progress>
+              </div>
+              <div v-if="scope.row.task_status == 2">
+                <el-row justify="center">
+                  <div>
+                    <img src="@/assets/load_success.svg" />
+                  </div>
+                  <span style="margin-left: 10px">迁移成功</span>
+                </el-row>
+              </div>
+              <div v-if="scope.row.task_status == 3">
+                <el-row justify="center">
+                  <div>
+                    <img src="@/assets/load_failed.svg" />
+                  </div>
+                  <span style="margin-left: 10px">迁移失败</span>
+                </el-row>
+              </div>
+              <div v-if="scope.row.task_status == 4">
+                <el-row justify="center">
+                  <div>
+                    <el-icon size="medium" color="#e6a23c"
+                      ><warning-filled
+                    /></el-icon>
+                  </div>
+                  <span style="margin-left: 10px">存在风险</span>
+                </el-row>
+              </div>
+            </template>
           </el-table-column>
           <el-table-column
             align="center"
@@ -72,16 +115,52 @@
                 type="text"
                 :disabled="
                   !(
-                    scope.row.task_status == 2
+                    scope.row.agent_online_status == 0 &&
+                    (scope.row.task_status == 2 || scope.row.task_status == 4)
+                  )
+                "
+                @click="exportMigrationReport(scope.row, 'uos_migration_log')"
+                >迁移日志</el-button
+              >
+              <el-button
+                type="text"
+                :disabled="
+                  !(
+                    scope.row.agent_online_status == 0 &&
+                    (scope.row.task_status == 2 || scope.row.task_status == 4)
                   )
                 "
+                @click="
+                  exportMigrationReport(scope.row, 'migration_completed_report')
+                "
                 >迁移分析报告</el-button
               >
             </template>
           </el-table-column>
         </el-table>
+        <el-pagination
+          background
+          v-model:current-page="currentPage"
+          v-model:page-size="pageSize"
+          :page-sizes="[5, 10, 25, 50, 100]"
+          :total="machineList.length"
+          layout="sizes, prev, pager, next, jumper, slot"
+        >
+          <template #default>
+            <el-button type="text"> 确定 </el-button>
+          </template>
+        </el-pagination>
       </el-card>
     </div>
+    <div class="footerBar">
+      <el-button
+        @click="nextStep()"
+        :disabled="!isAllFinished"
+        style="width: 130px; color: white"
+        color="#1b67b3"
+        >返回</el-button
+      >
+    </div>
   </div>
 </template>
 
@@ -89,12 +168,13 @@
 import StyledSubheaderBlock from "@/components/StyledSubheaderBlock.vue";
 
 import { ElMessageBox, ElMessage } from "element-plus";
+import { WarningFilled } from "@element-plus/icons-vue";
 
 export default {
   name: "EnvCheckBeforeMigrate",
   components: {
     StyledSubheaderBlock,
-    
+    WarningFilled,
   },
   data() {
     return {
@@ -107,11 +187,46 @@ export default {
     };
   },
   computed: {
+    isAllFinished() {
+      return this.machineList.every(
+        (item) =>
+          item.task_status == 2 ||
+          item.task_status == 3 ||
+          item.task_status == 4
+      );
+    },
   },
   created() {
     this.getData();
   },
   methods: {
+    refreshData: function (agentIpGroup) {
+      this.$http
+        .post("/get_system_migration_data", {
+          mod: "get_system_migration_data",
+          agent_ip: agentIpGroup,
+        })
+        .then((res) => {
+          let isAllFinishFlag = true;
+          this.freshData = res.data.info;
+          this.machineList.forEach((item) => {
+            let freshItem = this.freshData.find((freshItem) => {
+              return freshItem.agent_ip == item.agent_ip;
+            });
+            if (freshItem) {
+              item.task_status = freshItem.task_status;
+              item.progress = freshItem.progress;
+            }
+            if (item.task_status == 1) {
+              isAllFinishFlag = false;
+            }
+          });
+          if (this.timer && isAllFinishFlag) {
+            clearInterval(this.timer);
+            this.timer = null;
+          }
+        });
+    },
     getData: function () {
       if (this.$route.params.machines === undefined) {
         console.log("从路由或者url来的，应该拒绝该跳转请求并跳回到主页");
@@ -142,6 +257,69 @@ export default {
         mod: "modify_task_status",
         agent_ip: agentIpGroup,
       });
+      this.$http
+        .post("/system_migration", {
+          mod: "system_migration",
+          info: infoData,
+        })
+        .then((res) => {
+          console.log(res);
+          //   收到回复会开始定时获取数据
+          this.timer = setInterval(() => {
+            this.refreshData(agentIpGroup);
+          }, 5000);
+        });
+    },
+    progressFormat: function (value) {
+      return "";
+    },
+    exportMigrationReport: function (item, reportType) {
+      this.$http
+        .post(
+          "/export_reports",
+          {
+            mod: "export_reports",
+            reports_type: reportType,
+            agent_ip: item.agent_ip,
+            hostname: item.hostname,
+          },
+          { responseType: "blob" }
+        )
+        .then((res) => {
+          let fileData = res.data;
+          let fileName =
+            res.headers["content-disposition"].split("filename=")[1];
+          let fileType = res.headers["content-type"];
+          ElMessageBox({
+            title: "确定导出“" + fileName + "”吗？",
+            message: "文件将下载到本地，也可稍后前往下载中心下载。",
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            showCancelButton: true,
+            showConfirmButton: true,
+            showClose: false,
+            type: "info",
+          })
+            .then(() => {
+              let blob = new Blob([fileData], { type: fileType });
+              let link = document.createElement("a");
+              link.href = window.URL.createObjectURL(blob);
+              link.download = fileName;
+              link.click();
+            })
+            .catch(() => {
+              ElMessage({
+                type: "info",
+                message: "已取消导出",
+              });
+            });
+        })
+        .catch((err) => {
+          this.$message.error("下载失败,请稍后重试");
+        });
+    },
+    nextStep: function () {
+      this.$router.push("/");
     },
   },
 
@@ -158,8 +336,28 @@ export default {
   },
 
   unmounted() {
+    clearInterval(this.timer);
     window.onbeforeunload = null;
   },
+  beforeRouteLeave(to, from, next) {
+    if (to.name === "Home") {
+      next();
+      return false;
+    }
+    ElMessageBox({
+      title: "确定退出迁移吗？",
+      confirmButtonText: "退出",
+      cancelButtonText: "取消",
+      showCancelButton: true,
+      showClose: false,
+    })
+      .then((res) => {
+        next();
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  },
 };
 </script>
 
@@ -171,6 +369,20 @@ export default {
   justify-content: space-between;
 }
 
+.progressBar {
+  width: 30px;
+}
+
+.footerBar {
+  height: 50px;
+  margin: 0px -25px -8px -25px;
+  padding-right: 25px;
+  background-color: #eeeeee;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
 .textBtn {
   cursor: pointer;
 }
@@ -184,4 +396,9 @@ export default {
   justify-content: space-between;
 }
 
+.horizontalBtnSet {
+  display: flex;
+  justify-content: space-between;
+  width: fit-content;
+}
 </style>
-- 
Gitee