From 6edd445e3df4fc0c615d7bfa26d96dddf08656f4 Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Wed, 17 Sep 2025 15:10:28 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9Ekpi=E5=AF=BC=E5=87=BA?=
 =?UTF-8?q?=E6=96=87=E4=BB=B6=E6=9F=A5=E7=9C=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/tool/files/kpiBackup/index.vue | 432 +++++++++++++++++++++++
 1 file changed, 432 insertions(+)
 create mode 100644 src/views/tool/files/kpiBackup/index.vue

diff --git a/src/views/tool/files/kpiBackup/index.vue b/src/views/tool/files/kpiBackup/index.vue
new file mode 100644
index 00000000..5e9a8d26
--- /dev/null
+++ b/src/views/tool/files/kpiBackup/index.vue
@@ -0,0 +1,432 @@
+<script setup lang="ts">
+import { reactive, ref, toRaw } from 'vue';
+import { PageContainer } from 'antdv-pro-layout';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { ColumnsType } from 'ant-design-vue/es/table';
+import { Modal, message } from 'ant-design-vue/es';
+import BackupModal from '@/views/tool/files/neConfigBackup/components/BackupModal.vue';
+import { parseDateToStr } from '@/utils/date-utils';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import useI18n from '@/hooks/useI18n';
+import saveAs from 'file-saver';
+import { delFile, getFile, listFile } from '@/api/tool/file';
+import { parseSizeFromFile } from '@/utils/parse-utils';
+import { pushBackupFTP } from '@/api/neData/backup';
+const { t } = useI18n();
+
+/**文件来源 */
+let sourceState = reactive({
+  /**文件列表 */
+  list: [
+    {
+      value: '/ims_kpi',
+      label: 'IMS',
+      path: '/usr/local/omc/backup',
+    },
+    {
+      value: '/amf_kpi',
+      label: 'AMF',
+      path: '/usr/local/omc/backup',
+    },
+    {
+      value: '/udm_kpi',
+      label: 'UDM',
+      path: '/usr/local/omc/backup',
+    },
+    {
+      value: '/smf_kpi',
+      label: 'SMF',
+      path: '/usr/local/omc/backup',
+    },
+    {
+      value: '/pcf_kpi',
+      label: 'PCF',
+      path: '/usr/local/omc/backup',
+    },
+    {
+      value: '/upf_kpi',
+      label: 'UPF',
+      path: '/usr/local/omc/backup',
+    },
+    {
+      value: '/mme_kpi',
+      label: 'MME',
+      path: '/usr/local/omc/backup',
+    },
+    {
+      value: '/smsc_kpi',
+      label: 'SMSC',
+      path: '/usr/local/omc/backup',
+    },
+  ],
+  /**选择value */
+  value: undefined,
+});
+
+/**查询参数 */
+let queryParams = reactive({
+  /**读取路径 */
+  path: '',
+  /**当前页数 */
+  pageNum: 1,
+  /**每页条数 */
+  pageSize: 20,
+});
+
+/**表格状态类型 */
+type TabeStateType = {
+  /**加载等待 */
+  loading: boolean;
+  /**紧凑型 */
+  size: SizeType;
+  /**记录数据 */
+  data: object[];
+};
+
+/**表格状态 */
+let tableState: TabeStateType = reactive({
+  loading: false,
+  size: 'small',
+  data: [],
+});
+
+/**表格字段列 */
+let tableColumns: ColumnsType = [
+  {
+    title: t('views.logManage.neFile.fileMode'),
+    dataIndex: 'fileMode',
+    align: 'center',
+    width: 150,
+  },
+  {
+    title: t('views.logManage.neFile.owner'),
+    dataIndex: 'owner',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: t('views.logManage.neFile.group'),
+    dataIndex: 'group',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: t('views.logManage.neFile.size'),
+    dataIndex: 'size',
+    align: 'left',
+    customRender(opt) {
+      return parseSizeFromFile(opt.value);
+    },
+    width: 100,
+  },
+  {
+    title: t('views.logManage.neFile.modifiedTime'),
+    dataIndex: 'modifiedTime',
+    align: 'left',
+    customRender(opt) {
+      if (!opt.value) return '';
+      return parseDateToStr(opt.value);
+    },
+    width: 200,
+  },
+  {
+    title: t('views.logManage.neFile.fileName'),
+    dataIndex: 'fileName',
+    align: 'left',
+  },
+  {
+    title: t('common.operate'),
+    key: 'fileName',
+    align: 'center',
+    width: 100,
+  },
+];
+
+/**表格分页器参数 */
+let tablePagination = reactive({
+  /**当前页数 */
+  current: 1,
+  /**每页条数 */
+  pageSize: 20,
+  /**默认的每页条数 */
+  defaultPageSize: 20,
+  /**指定每页可以显示多少条 */
+  pageSizeOptions: ['10', '20', '50', '100'],
+  /**只有一页时是否隐藏分页器 */
+  hideOnSinglePage: false,
+  /**是否可以快速跳转至某页 */
+  showQuickJumper: true,
+  /**是否可以改变 pageSize */
+  showSizeChanger: true,
+  /**数据总数 */
+  total: 0,
+  showTotal: (total: number) => t('common.tablePaginationTotal', { total }),
+  onChange: (page: number, pageSize: number) => {
+    tablePagination.current = page;
+    tablePagination.pageSize = pageSize;
+    queryParams.pageNum = page;
+    queryParams.pageSize = pageSize;
+    fnGetList();
+  },
+});
+
+/**下载触发等待 */
+let downLoading = ref<boolean>(false);
+/**信息文件下载 */
+function fnDownloadFile(row: Record<string, any>) {
+  if (downLoading.value) return;
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('views.logManage.exportFile.downTip', {
+      fileName: row.fileName,
+    }),
+    onOk() {
+      downLoading.value = true;
+      const hide = message.loading(t('common.loading'), 0);
+      getFile(queryParams.path, row.fileName)
+        .then(res => {
+          if (res.code === RESULT_CODE_SUCCESS) {
+            message.success({
+              content: t('common.msgSuccess', {
+                msg: t('common.downloadText'),
+              }),
+              duration: 2,
+            });
+            saveAs(res.data, `${row.fileName}`);
+          } else {
+            message.error({
+              content: t('views.logManage.exportFile.downTipErr'),
+              duration: 2,
+            });
+          }
+        })
+        .finally(() => {
+          hide();
+          downLoading.value = false;
+        });
+    },
+  });
+}
+
+/**删除触发等待 */
+let delLoading = ref<boolean>(false);
+/**信息文件删除 */
+function fnRecordDelete(row: Record<string, any>) {
+  if (delLoading.value) return;
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('views.logManage.exportFile.deleteTip', {
+      fileName: row.fileName,
+    }),
+    onOk() {
+      delLoading.value = true;
+      const hide = message.loading(t('common.loading'), 0);
+      delFile(queryParams.path, row.fileName)
+        .then(res => {
+          if (res.code === RESULT_CODE_SUCCESS) {
+            message.success({
+              content: t('common.msgSuccess', {
+                msg: t('common.deleteText'),
+              }),
+              duration: 2,
+            });
+            fnGetList();
+          } else {
+            message.error({
+              content: t('views.logManage.exportFile.deleteTipErr'),
+              duration: 2,
+            });
+          }
+        })
+        .finally(() => {
+          hide();
+          delLoading.value = false;
+        });
+    },
+  });
+}
+
+/**网元类型选择对应修改 */
+function fnNeChange(_: any, opt: any) {
+  queryParams.path = `${opt.path}${opt.value}`;
+  ftpInfo.path = queryParams.path;
+  ftpInfo.tag = '';
+  fnGetList(1);
+}
+
+/**查询备份信息列表, pageNum初始页数 */
+function fnGetList(pageNum?: number) {
+  if (queryParams.path === '') {
+    message.warning({
+      content: t('views.logManage.exportFile.fileSourcePlease'),
+      duration: 2,
+    });
+    return;
+  }
+  if (tableState.loading) return;
+  tableState.loading = true;
+  if (pageNum) {
+    queryParams.pageNum = pageNum;
+  }
+  listFile(toRaw(queryParams)).then(res => {
+    if (res.code === RESULT_CODE_SUCCESS) {
+      const { total, rows } = res.data;
+      tablePagination.total = total;
+      tableState.data = rows;
+      if (
+        tablePagination.total <=
+          (queryParams.pageNum - 1) * tablePagination.pageSize &&
+        queryParams.pageNum !== 1
+      ) {
+        tableState.loading = false;
+        fnGetList(queryParams.pageNum - 1);
+      }
+    } else {
+      message.error(res.msg, 3);
+      tablePagination.total = 0;
+      tableState.data = [];
+    }
+    tableState.loading = false;
+  });
+}
+
+/**打开FTP配置窗口 */
+const openFTPModal = ref<boolean>(false);
+function fnFTPModalOpen() {
+  openFTPModal.value = !openFTPModal.value;
+}
+
+type FTPInfoType = {
+  path: string;
+  tag: string;
+  fileName: string;
+};
+const ftpInfo = reactive<FTPInfoType>({
+  path: '',
+  tag: '',
+  fileName: '',
+});
+
+/**同步文件到FTP */
+function fnSyncFileToFTP(fileName: string) {
+  ftpInfo.fileName = fileName;
+  pushBackupFTP(toRaw(ftpInfo)).then(res => {
+    if (res.code === RESULT_CODE_SUCCESS) {
+      message.success(t('common.operateOk'), 3);
+    } else {
+      message.warning(res.msg, 3);
+    }
+  });
+}
+</script>
+
+<template>
+  <PageContainer>
+    <a-card :bordered="false" :body-style="{ padding: '0px' }">
+      <!-- 插槽-卡片左侧侧 -->
+      <template #title>
+        <a-form :model="queryParams" name="queryParams" layout="horizontal">
+          <a-row :gutter="16" align="middle">
+            <a-col>
+              <span>{{ t('views.logManage.exportFile.fileSource') }}:</span
+              >&nbsp;
+              <a-select
+                v-model:value="sourceState.value"
+                :options="sourceState.list"
+                @change="fnNeChange"
+                :allow-clear="false"
+                :placeholder="t('common.selectPlease')"
+                style="width: 200px"
+              />
+            </a-col>
+            <template v-if="queryParams.path">
+              <span>{{ t('views.logManage.neFile.nePath') }}:</span>&nbsp;
+              <a-col>
+                <a-breadcrumb>
+                  <a-breadcrumb-item>
+                    {{ queryParams.path }}
+                  </a-breadcrumb-item>
+                </a-breadcrumb>
+              </a-col>
+            </template>
+          </a-row>
+        </a-form>
+      </template>
+
+      <!-- 插槽-卡片右侧 -->
+      <template #extra>
+        <a-space :size="8" align="center">
+          <a-tooltip placement="topRight">
+            <template #title>
+              {{ t('views.ne.neConfigBackup.backupModal.title') }}
+            </template>
+            <a-button type="text" @click.prevent="fnFTPModalOpen()">
+              <template #icon><DeliveredProcedureOutlined /></template>
+            </a-button>
+          </a-tooltip>
+          <a-tooltip>
+            <template #title>{{ t('common.reloadText') }}</template>
+            <a-button type="text" @click.prevent="fnGetList()">
+              <template #icon><ReloadOutlined /></template>
+            </a-button>
+          </a-tooltip>
+        </a-space>
+      </template>
+
+      <!-- 表格列表 -->
+      <a-table
+        class="table"
+        row-key="fileName"
+        :columns="tableColumns"
+        :loading="tableState.loading"
+        :data-source="tableState.data"
+        :size="tableState.size"
+        :pagination="tablePagination"
+        :scroll="{ x: 800 }"
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'fileName'">
+            <a-space :size="8" align="center">
+              <a-tooltip placement="topRight" v-if="record.fileType === 'file'">
+                <template #title>
+                  {{ t('views.ne.neConfigBackup.backupModal.pushFileOper') }}
+                </template>
+                <a-button
+                  type="link"
+                  @click.prevent="fnSyncFileToFTP(record.fileName)"
+                >
+                  <template #icon><CloudServerOutlined /></template>
+                </a-button>
+              </a-tooltip>
+              <a-tooltip placement="topRight" v-if="record.fileType === 'file'">
+                <template #title>{{ t('common.downloadText') }}</template>
+                <a-button
+                  type="link"
+                  :loading="downLoading"
+                  @click.prevent="fnDownloadFile(record)"
+                >
+                  <template #icon><DownloadOutlined /></template>
+                </a-button>
+              </a-tooltip>
+              <a-tooltip placement="topRight" v-if="record.fileType === 'file'">
+                <template #title>{{ t('common.deleteText') }}</template>
+                <a-button
+                  type="link"
+                  :loading="delLoading"
+                  @click.prevent="fnRecordDelete(record)"
+                >
+                  <template #icon><DeleteOutlined /></template>
+                </a-button>
+              </a-tooltip>
+            </a-space>
+          </template>
+        </template>
+      </a-table>
+    </a-card>
+
+    <!-- FTP配置窗口 -->
+    <BackupModal v-model:open="openFTPModal"></BackupModal>
+  </PageContainer>
+</template>
+
+<style lang="less" scoped></style>