feat(front): 增加检查托管信息的功能

# Reviewed, transaction id: 54836

Author: hyunfa

web/package.json

@@ -52,7 +52,8 @@
         "vue": "2.5.22",
         "vue-i18n": "8.21.1",
         "vue-router": "3.0.6",
-        "vuex": "3.1.1"
+        "vuex": "3.1.1",
+        "xlsx": "^0.18.5"
     },
     "devDependencies": {
         "@babel/core": "^7.9.0",

web/src/language/lang/en.js

@@ -44,6 +44,15 @@ export default {
   // 进程管理
   进程状态: 'Process Status',
   进程管理: 'Process Manage',
+  导出为excel: 'ExportToExcel',
+  主机ID: 'Host id',
+  管控区域: 'Cloud Area',
+  管控区域ID: 'Cloud Area ID',
+  错误类型: 'Error type',
+  错误信息: 'Error Message',
+  处理建议: 'Handling suggestion',
+  托管信息: 'Hosting Info',
+  检查托管信息: 'Check Hosting Info',
   // 配置文件
   '配置文件模板，新建成功。': 'Successfully created config-file template',
   配置文件: 'Config File',

web/src/language/lang/zh.js

@@ -44,6 +44,16 @@ export default {
   // 进程管理
   进程状态: '进程状态',
   进程管理: '进程管理',
+  导出为excel: '导出为excel',
+  主机ID: '主机ID',
+  内网IP: '内网IP',
+  管控区域: '管控区域',
+  管控区域ID: '管控区域ID',
+  错误类型: '错误类型',
+  错误信息: '错误信息',
+  处理建议: '处理建议',
+  托管信息: '托管信息',
+  检查托管信息: '检查托管信息',
   // 配置文件
   '配置文件模板，新建成功。': '配置文件模板，新建成功。',
   配置文件: '配置文件',

web/src/store/modules/process.js

@@ -75,5 +75,10 @@ export default {
       const url = `/api/${rootState.bizId}/process/sync_process_status_time/`;
       return http.get(url);
     },
+    // 检查托管信息
+    ajaxCheckHostingInfo({ rootState }) {
+      const url = `/api/${rootState.bizId}/process/check/`;
+      return http.get(url);
+    },
   },
 };

web/src/views/ProcessManage/Status/ButtonGrounp.vue

@@ -74,6 +74,12 @@
       <p class="syncProcessStateTime" style="color: #FF9C01;">
         {{ $t('状态同步', [time] ) }}
       </p>
+      <bk-button
+        style="margin-right: 10px;"
+        @click="checkHostingInfo"
+      >
+        {{ $t('检查托管信息') }}
+      </bk-button>
       <bk-button
         v-test="'syncStatus'"
         icon="bk-icon icon-refresh"
@@ -172,6 +178,10 @@ export default {
       this.$emit('synchronousProcess', 'config');
       this.$refs.synchronousPopover.hideHandler();
     },
+    // 检查托管信息
+    checkHostingInfo() {
+      this.$emit('checkHostingInfo');
+    },
     // 同步状态时间
     async SyncProcessStateTime() {
       const res = await this.$store.dispatch('process/ajaxFlushSyncProcessStateTime');

web/src/views/ProcessManage/Status/index.vue

@@ -16,7 +16,8 @@
         :is-selected-all-pages="isSelectedAllPages"
         @operateProcess="operateProcess"
         @operateConfigDistribute="operateConfigDistribute"
-        @synchronousProcess="synchronousProcess">
+        @synchronousProcess="synchronousProcess"
+        @checkHostingInfo="checkHostingInfo">
       </ButtonGrounp>
       <!-- 下拉筛选 -->
       <div class="search-content">
@@ -98,6 +99,65 @@
           {{ $t('所选进程？') }}
         </div>
       </bk-dialog>
+      <!-- 托管信息弹窗 -->
+      <bk-dialog
+        ext-cls="host-info-dialog"
+        v-model="dialogHostInfo.visible"
+        :render-directive="'if'"
+        width="1450"
+        :mask-close="false"
+        :show-footer="false"
+        header-position="left">
+        <template #header>
+          <div class="header">
+            {{ dialogHostInfo.title }}
+          </div>
+        </template>
+        <div class="downLoad">
+          <bk-button @click="handleExport">
+            {{ $t('导出为excel') }}
+          </bk-button>
+        </div>
+        <bk-table
+          :data="currentTableData"
+          :max-height="400"
+          :pagination="infoPagination"
+          v-bkloading="{ isLoading: infoTableLoading, zIndex: 0 }"
+          @page-change="handleInfoPageChange"
+          @page-limit-change="handleInfoPageLimitChange"
+        >
+          <bk-table-column :label="$t('主机ID')" min-width="140" prop="host_id" key="host_id">
+            <div v-bk-overflow-tips slot-scope="{ row }">
+              <span>{{ row.host_id }}</span>
+            </div>
+          </bk-table-column>
+          <bk-table-column :label="$t('内网IP')" min-width="140" prop="inner_ip" key="inner_ip">
+            <div v-bk-overflow-tips slot-scope="{ row }">
+              <span>{{ row.inner_ip }}</span>
+            </div>
+          </bk-table-column>
+          <bk-table-column :label="$t('管控区域')" min-width="140" prop="bk_cloud_name" key="bk_cloud_name">
+            <div v-bk-overflow-tips slot-scope="{ row }">
+              <span>{{ row.bk_cloud_name }}</span>
+            </div>
+          </bk-table-column>
+          <bk-table-column :label="$t('错误类型')" min-width="140" prop="error_type" key="error_type">
+            <div v-bk-overflow-tips slot-scope="{ row }">
+              <span>{{ row.error_type }}</span>
+            </div>
+          </bk-table-column>
+          <bk-table-column :label="$t('错误信息')" min-width="240" prop="error_msg" key="error_msg">
+            <div v-bk-overflow-tips slot-scope="{ row }">
+              <span>{{ row.error_msg }}</span>
+            </div>
+          </bk-table-column>
+          <bk-table-column :label="$t('处理建议')" min-width="180" prop="handling_suggestion" key="handling_suggestion">
+            <div v-bk-overflow-tips slot-scope="{ row }">
+              <span>{{ row.handling_suggestion }}</span>
+            </div>
+          </bk-table-column>
+        </bk-table>
+      </bk-dialog>
     </section>
   </div>
 </template>
@@ -110,6 +170,7 @@ import ButtonGrounp from './ButtonGrounp';
 import EmptyProcess from '@/components/Empty/EmptyProcess';
 import { bus } from '@/common/bus';
 import { debounce } from 'lodash';
+import * as XLSX from 'xlsx';
 
 export default {
   name: 'ProcessStatus',
@@ -189,6 +250,18 @@ export default {
         operateType: '', // 操作类型
         title: '', // dialog标题
       },
+      originInfoData: [],
+      currentTableData: [],
+      infoTableLoading: false,
+      dialogHostInfo: {
+        visible: false, // 弹框是否可见
+        title: '', // dialog标题
+      },
+      infoPagination: {
+        current: 1,
+        count: 0,
+        limit: 50,
+      },
       prevListLength: 0,
       isMatch: true,
       isExisted: false,
@@ -502,6 +575,64 @@ export default {
     onConfigDistribute() {
       this.isShow = false;
     },
+    getPaginatedData(data, page, pageSize) {
+      const startIndex = (page - 1) * pageSize;
+      const endIndex = startIndex + pageSize;
+      return data.slice(startIndex, endIndex);
+    },
+    handleInfoPageLimitChange(limit) {
+      this.infoPagination.limit = limit;
+      this.currentTableData = this.getPaginatedData(this.originInfoData, this.infoPagination.current, limit);
+    },
+    handleInfoPageChange(page) {
+      this.infoPagination.current = page;
+      this.currentTableData = this.getPaginatedData(this.originInfoData, page, this.infoPagination.limit)
+    },
+    // 检查托管信息
+    async checkHostingInfo() {
+      this.dialogHostInfo.visible = true;
+      this.dialogHostInfo.title = this.$t('托管信息');
+      this.infoTableLoading = true;
+      const res = await this.$store.dispatch('process/ajaxCheckHostingInfo');
+      if (res.result) {
+        const cloudList = this.filterData.find(item => item.id === 'bk_cloud_id')?.children || [];
+        this.originInfoData = res.data.map(item => ({
+          ...item,
+          bk_cloud_name: cloudList.find(el => el.id === item.bk_cloud_id)?.name
+        }));
+        this.currentTableData = [...this.originInfoData];
+        this.infoPagination.count = res.data.length;
+      }   
+      this.infoTableLoading = false;
+    },
+    handleExport() {
+      const data = this.originInfoData.map(item => ({
+        ...item,
+        host_id: String(item.host_id)
+      }));
+      const customHeaders = {
+        "host_id": this.$t("主机ID"),
+        "inner_ip": this.$t("内网IP"),
+        "bk_cloud_id": this.$t("管控区域ID"),
+        "bk_cloud_name": this.$t("管控区域"),
+        "error_type": this.$t("错误类型"),
+        "error_msg": this.$t("错误信息"),
+        "handling_suggestion": this.$t("处理建议")
+      };
+
+      // 将 JSON 数据转换为工作表
+      const worksheet = XLSX.utils.json_to_sheet(data, { header: Object.keys(customHeaders) });
+      // 插入自定义表头，假设表头位于第一行
+      XLSX.utils.sheet_add_aoa(worksheet, [Object.values(customHeaders)], { origin: 'A1' });
+      // 创建一个新的工作簿
+      const workbook = XLSX.utils.book_new();
+
+      // 将工作表添加到工作簿
+      XLSX.utils.book_append_sheet(workbook, worksheet, this.$t('托管信息'));
+
+      // 将工作簿导出为 Excel 文件
+      XLSX.writeFile(workbook, '托管信息.xlsx');
+    },
     // 同步进程
     async synchronousProcess(type) {
       try {
@@ -864,4 +995,15 @@ export default {
       }
     }
   }
+  .header {
+    width: 100%;
+    font-size: 20px;
+    color: #313238;
+    line-height: 25px;
+  }
+  .downLoad {
+    width: 100%;
+    text-align: right;
+    margin: 0 16px 16px 0;
+  }
 </style>