feat: 日志设置

src/api/logManage/seting.ts

@@ -0,0 +1,327 @@
+import {
+  RESULT_CODE_ERROR,
+  RESULT_CODE_SUCCESS,
+  RESULT_MSG_ERROR,
+  RESULT_MSG_SUCCESS,
+} from '@/constants/result-constants';
+import { request } from '@/plugins/http-fetch';
+import { parseObjLineToHump } from '@/utils/parse-utils';
+
+/**
+ * 查询日志设置
+ * @param tag 配置ID
+ * @returns object
+ */
+export async function getLogSet() {
+  let arr = [];
+
+  // 日志保存时间
+  const logDurationResult = await request({
+    url: `/databaseManagement/v1/omc_db/config`,
+    method: 'get',
+    params: {
+      SQL: `SELECT * FROM config WHERE config_tag = 'logDuration'`,
+    },
+  });
+  arr.push(logDurationResult);
+  // 日志最大容量
+  const logCapacityResult = await request({
+    url: `/databaseManagement/v1/omc_db/config`,
+    method: 'get',
+    params: {
+      SQL: `SELECT * FROM config WHERE config_tag = 'logCapacity'`,
+    },
+  });
+  arr.push(logCapacityResult);
+
+  // 发起请求
+  const result = await Promise.allSettled(arr).then(resArr => {
+    let resultData: any = {};
+    for (const item of resArr) {
+      if (item.status === 'rejected') {
+        continue;
+      }
+      const itemV = item.value;
+      // 解析数据
+      if (
+        itemV.code === RESULT_CODE_SUCCESS &&
+        Array.isArray(itemV.data.data)
+      ) {
+        let itemData = itemV.data.data[0];
+        const v = parseObjLineToHump(itemData['config'][0]);
+        resultData[v.configTag] = parseInt(v.value);
+      }
+    }
+    if (Object.keys(resultData).length === 0) {
+      return { code: RESULT_CODE_ERROR, msg: RESULT_MSG_ERROR, data: {} };
+    }
+
+    return {
+      code: RESULT_CODE_SUCCESS,
+      msg: RESULT_MSG_SUCCESS,
+      data: resultData,
+    };
+  });
+  return result;
+}
+
+/**
+ * 修改日志设置
+ * @param data 配置对象
+ * @returns object
+ */
+export async function updateLogSet(data: Record<string, any>) {
+  let arr = [];
+  for (const key in data) {
+    const value = `${data[key]}`;
+    const result = request({
+      url: `/databaseManagement/v1/omc_db/config?WHERE=config_tag='${key}'`,
+      method: 'put',
+      data: { data: { value } },
+    });
+    arr.push(result);
+  }
+
+  const result = await Promise.allSettled(arr).then(resArr => {
+    let resultNum = 0;
+    for (const item of resArr) {
+      if (item.status === 'rejected') {
+        continue;
+      }
+      const itemV = item.value;
+      // 解析数据
+      let itemData = itemV.data.data;
+      if (itemV.code === RESULT_CODE_SUCCESS && itemData) {
+        let rows = itemData.affectedRows;
+        if (rows) {
+          resultNum += rows;
+        }
+      }
+    }
+    // 无变更时
+    if (resultNum === 0) {
+      return { code: RESULT_CODE_ERROR, msg: RESULT_MSG_ERROR, data: 0 };
+    }
+    return {
+      code: RESULT_CODE_SUCCESS,
+      msg: RESULT_MSG_SUCCESS,
+      data: resultNum,
+    };
+  });
+  return result;
+}
+
+/**
+ * 查询FTP日志设置
+ * @param tag 配置ID
+ * @returns object
+ */
+export async function getFtpLogSet() {
+  // 发起请求
+  const result = await request({
+    url: `/databaseManagement/v1/omc_db/config`,
+    method: 'get',
+    params: {
+      SQL: `SELECT * FROM config WHERE config_tag = 'ftpLogSet'`,
+    },
+  });
+  // 解析数据
+  if (result.code === RESULT_CODE_SUCCESS && Array.isArray(result.data.data)) {
+    let data = result.data.data[0];
+    const v = parseObjLineToHump(data['config'][0]);
+    let vJSON: any = {};
+    try {
+      vJSON = JSON.parse(v.valueJson);
+      vJSON['ftpLog'] = parseInt(vJSON['ftpLog']) || 12;
+    } catch (error) {
+      console.error(error);
+    }
+    return Object.assign(result, {
+      data: vJSON,
+    });
+  }
+  return result;
+}
+
+/**
+ * 修改FTP日志配置
+ * @param data 配置对象
+ * @returns object
+ */
+export async function updateFtpLogSet(data: Record<string, any>) {
+  const result = await request({
+    url: `/databaseManagement/v1/omc_db/config?WHERE=config_tag='ftpLogSet'`,
+    method: 'put',
+    data: { data: { value_json: JSON.stringify(data) } },
+  });
+  // 解析数据
+  if (result.code === RESULT_CODE_SUCCESS && result.data.data) {
+    let rows = result.data.data.affectedRows;
+    if (rows) {
+      delete result.data;
+      return result;
+    } else {
+      return { code: RESULT_CODE_ERROR, msg: RESULT_MSG_ERROR };
+    }
+  }
+  return result;
+}
+
+/**
+ * 查询日志远程输出设置
+ * @param tag 配置ID
+ * @returns object
+ */
+export async function getRemoteOut() {
+  // 发起请求
+  const result = await request({
+    url: `/databaseManagement/v1/omc_db/config`,
+    method: 'get',
+    params: {
+      SQL: `SELECT * FROM config WHERE config_tag = 'remoteLogSet'`,
+    },
+  });
+  // 解析数据
+  if (result.code === RESULT_CODE_SUCCESS && Array.isArray(result.data.data)) {
+    let data = result.data.data[0];
+    const v = parseObjLineToHump(data['config'][0]);
+    let vJSON = {};
+    try {
+      vJSON = JSON.parse(v.valueJson);
+    } catch (error) {
+      console.error(error);
+    }
+    return Object.assign(result, {
+      data: vJSON,
+    });
+  }
+  return result;
+}
+
+/**
+ * 修改日志远程输出配置
+ * @param data 配置对象
+ * @returns object
+ */
+export async function updateRemoteOut(data: Record<string, any>) {
+  const result = await request({
+    url: `/databaseManagement/v1/omc_db/config?WHERE=config_tag='remoteLogSet'`,
+    method: 'put',
+    data: { data: { value_json: JSON.stringify(data) } },
+  });
+  // 解析数据
+  if (result.code === RESULT_CODE_SUCCESS && result.data.data) {
+    let rows = result.data.data.affectedRows;
+    if (rows) {
+      delete result.data;
+      return result;
+    } else {
+      return { code: RESULT_CODE_ERROR, msg: RESULT_MSG_ERROR };
+    }
+  }
+  return result;
+}
+
+/**
+ * 日志查询导出
+ * @param query 查询参数
+ * @returns bolb
+ */
+export async function exportLog(query: Record<string, any>) {
+  // 查询
+  let querySQL = '';
+  if (query.logType === 'security_log') {
+    querySQL = `SELECT account_name,account_type,op_ip,op_type,op_content,op_result,op_time
+    FROM security_log 
+    WHERE op_time >= '${query.beginTime}' AND op_time <= '${query.endTime}' 
+    order by op_time`;
+  }
+  if (query.logType === 'alarm_log') {
+    querySQL = `SELECT ne_type,ne_id,alarm_id,alarm_seq,alarm_code,alarm_status,event_time,log_time
+    FROM security_log 
+    WHERE log_time >= '${query.beginTime}' AND log_time <= '${query.endTime}' 
+    order event_time,log_time`;
+  }
+  if (query.logType === 'operation_log') {
+    querySQL = `SELECT account_name,account_type,op_ip,subsys_tag,op_type,op_content,op_result,begin_time,end_time,vnf_flag
+    FROM operation_log 
+    WHERE begin_time >= '${query.beginTime}' AND end_time <= '${query.endTime}' AND op_type ='${query.opType}' 
+    order begin_time,end_time`;
+  }
+  if (!querySQL) {
+    return { code: RESULT_CODE_ERROR, msg: RESULT_MSG_ERROR };
+  }
+  // 发起请求
+  const result = await request({
+    url: `/databaseManagement/v1/select/omc_db/${query.logType}`,
+    method: 'get',
+    params: {
+      SQL: querySQL,
+    },
+  });
+
+  // 解析数据
+  if (result.code === RESULT_CODE_SUCCESS) {
+    let v = result.data.data[0];
+    const vArr = parseObjLineToHump(v[query.logType]);
+    result.data = vArr == null ? [] : vArr;
+  }
+  return result;
+}
+
+/**
+ * 日志手动备份
+ * @param data 配置对象
+ * @returns object
+ */
+export async function backupLog(logType: string) {
+  const result = await request({
+    url: `/dataManagement/v1/omc_db/${logType}/backup`,
+    method: 'post',
+  });
+  // 解析数据
+  if (result.code === RESULT_CODE_SUCCESS && result.data.data) {
+    let v = result.data.data[logType].affectedRows || 0;
+    if (v) {
+      result.data = v;
+      return result;
+    } else {
+      return { code: RESULT_CODE_ERROR, msg: RESULT_MSG_ERROR };
+    }
+  }
+  return result;
+}
+
+/**
+ * 日志手动备份文件下载
+ * @param data 配置对象
+ * @returns object
+ */
+export async function backupDownload(path: string) {
+  return request({
+    url: `/fileManagement/v1/path/file?path=${path}`,
+    method: 'get',
+    responseType: 'blob',
+  });
+}
+
+/**
+ * 日志手动备份文件列表
+ * @param data 配置对象
+ * @returns object
+ */
+export function backupFileList() {
+  return request({
+    url: `/fileManagement/v1/files/listFiles`,
+    method: 'post',
+    data: {
+      path: '/usr/local/omc/database',
+      expand: true,
+      showHidden: false,
+      page: 1,
+      pageSize: 100,
+      search: '',
+      containSub: false,
+    },
+  });
+}

src/views/logManage/seting/index.vue

@@ -0,0 +1,718 @@
+<script setup lang="ts">
+import { useRoute } from 'vue-router';
+import { reactive, ref, onMounted, toRaw } from 'vue';
+import { PageContainer } from '@ant-design-vue/pro-layout';
+import { Form, Modal, message } from 'ant-design-vue/lib';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import {
+  backupDownload,
+  backupFileList,
+  backupLog,
+  exportLog,
+  getFtpLogSet,
+  getLogSet,
+  getRemoteOut,
+  updateFtpLogSet,
+  updateLogSet,
+  updateRemoteOut,
+} from '@/api/logManage/seting';
+import { regExpIPv4 } from '@/utils/regular-utils';
+import useDictStore from '@/store/modules/dict';
+import useI18n from '@/hooks/useI18n';
+import saveAs from 'file-saver';
+import { writeSheet } from '@/utils/execl-utils';
+const { getDict } = useDictStore();
+const { t } = useI18n();
+const route = useRoute();
+
+/**路由标题 */
+let title = ref<string>((route.meta.title as string) ?? '标题');
+
+/**对象信息状态类型 */
+type ModalStateType = {
+  /**标题 */
+  title: string;
+  /**表单数据 */
+  from: Record<string, any>;
+  /**表单数据 loading */
+  fromLoading: boolean;
+  /**确定按钮 loading */
+  confirmLoading: boolean;
+};
+
+/**日志设置信息状态 */
+let logSetState: ModalStateType = reactive({
+  title: '日志设置',
+  from: {
+    logDuration: 15,
+    logCapacity: 10,
+  },
+  fromLoading: true,
+  confirmLoading: true,
+});
+
+/**日志设置信息内表单属性和校验规则 */
+const logSetStateFrom = Form.useForm(
+  logSetState.from,
+  reactive({
+    logDuration: [
+      {
+        required: true,
+        trigger: 'blur',
+        message: '请输入日志保存时间，最少15天',
+      },
+    ],
+    logCapacity: [
+      {
+        required: true,
+        message: '请输入日志最大容量，最小10MB',
+      },
+    ],
+  })
+);
+
+/**日志设置保存 */
+function fnFormLogSetFinish() {
+  logSetStateFrom.validate().then(() => {
+    logSetState.confirmLoading = true;
+    const from = toRaw(logSetState.from);
+    updateLogSet({
+      logDuration: from.logDuration,
+      logCapacity: from.logCapacity,
+    })
+      .then(res => {
+        if (res.code === RESULT_CODE_SUCCESS && res.data > 0) {
+          message.success(`日志设置保存成功`, 3);
+        } else {
+          message.warning(`日志设置无变更`, 3);
+        }
+      })
+      .finally(() => {
+        logSetState.confirmLoading = false;
+      });
+  });
+}
+
+/**FTP日志对象信息状态 */
+let ftpState: ModalStateType = reactive({
+  title: 'FTP日志上报接口设置',
+  from: {
+    agreement: 'ftp',
+    directory: '',
+    ftpLog: 12,
+    toIp: '',
+  },
+  fromLoading: true,
+  confirmLoading: true,
+});
+
+/**FTP日志对象信息内表单属性和校验规则 */
+const ftpStateFrom = Form.useForm(
+  ftpState.from,
+  reactive({
+    toIp: [
+      {
+        required: true,
+        pattern: regExpIPv4,
+        message: '请输入对端IP地址',
+      },
+    ],
+    directory: [
+      {
+        required: true,
+        trigger: 'blur',
+        message: '请输入对端文件目录',
+      },
+    ],
+    ftpLog: [
+      {
+        required: true,
+        trigger: 'blur',
+        message: '请输入日志生成周期，最小12小时',
+      },
+    ],
+  })
+);
+
+/**FTP日志对象保存 */
+function fnFormFTPFinish() {
+  ftpStateFrom.validate().then(() => {
+    logSetState.confirmLoading = true;
+    const from = toRaw(ftpState.from);
+    updateFtpLogSet(from)
+      .then(res => {
+        if (res.code === RESULT_CODE_SUCCESS) {
+          message.success(`FTP日志设置保存成功`, 3);
+        } else {
+          message.warning(`FTP日志设置无变更`, 3);
+        }
+      })
+      .finally(() => {
+        logSetState.confirmLoading = false;
+      });
+  });
+}
+
+/**日志远程输出对象信息状态 */
+let remoteOutState: ModalStateType = reactive({
+  title: '日志远程输出',
+  from: {
+    logIp: '',
+    logDirectory: '',
+  },
+  fromLoading: true,
+  confirmLoading: true,
+});
+
+/**日志远程输出对象信息内表单属性和校验规则 */
+const remoteOutStateFrom = Form.useForm(
+  remoteOutState.from,
+  reactive({
+    logIp: [
+      {
+        required: true,
+        pattern: regExpIPv4,
+        message: '请输入远程IP地址',
+      },
+    ],
+    logDirectory: [
+      {
+        required: true,
+        trigger: 'blur',
+        message: '请输入远程日志目录',
+      },
+    ],
+  })
+);
+
+/**日志远程输出对象保存 */
+function fnFormRemoteOutFinish() {
+  remoteOutStateFrom.validate().then(() => {
+    remoteOutState.confirmLoading = true;
+    const from = toRaw(remoteOutState.from);
+    updateRemoteOut(from)
+      .then(res => {
+        if (res.code === RESULT_CODE_SUCCESS) {
+          message.success(`日志远程输出设置保存成功`, 3);
+        } else {
+          message.warning(`日志远程输出设置无变更`, 3);
+        }
+      })
+      .finally(() => {
+        remoteOutState.confirmLoading = false;
+      });
+  });
+}
+
+/**字典数据 */
+let dict: {
+  /**操作日志操作类型 */
+  operationLogType: DictType[];
+} = reactive({
+  operationLogType: [],
+});
+
+/**日志范围开始结束时间 */
+let queryRangePicker = ref<[string, string]>(['', '']);
+
+/**开始结束时间选择对应修改 */
+function fnRangePickerChange(_: any, item: any) {
+  logOutState.from.beginTime = item[0];
+  logOutState.from.endTime = item[1];
+}
+
+/**日志导出对象信息状态 */
+let logOutState: ModalStateType = reactive({
+  title: '日志导出',
+  from: {
+    logType: 'security_log',
+    opType: 'View',
+    beginTime: '',
+    endTime: '',
+  },
+  fromLoading: false,
+  confirmLoading: false,
+});
+
+/**日志导出对象信息内表单属性和校验规则 */
+const logOutStateFrom = Form.useForm(
+  logOutState.from,
+  reactive({
+    endTime: [
+      {
+        required: true,
+        message: '请输入日志时间范围',
+      },
+    ],
+  })
+);
+
+/**日志导出对象保存 */
+function fnFormLogOutFinish() {
+  logOutStateFrom.validate().then(() => {
+    logOutState.confirmLoading = true;
+    const from = toRaw(logOutState.from);
+    const key = 'exportLog';
+    message.loading({ content: '请稍等...', key });
+    exportLog(from)
+      .then(res => {
+        if (res.code === RESULT_CODE_SUCCESS) {
+          message.success({
+            content: `已完成导出`,
+            key,
+            duration: 3,
+          });
+          writeSheet(res.data, from.logType).then(fileBlob =>
+            saveAs(fileBlob, `${from.logType}_${Date.now()}.xlsx`)
+          );
+        } else {
+          message.error({
+            content: `${res.msg}`,
+            key,
+            duration: 3,
+          });
+        }
+      })
+      .finally(() => {
+        logOutState.confirmLoading = false;
+      });
+  });
+}
+
+/**日志备份对象信息状态 */
+let backState: ModalStateType = reactive({
+  title: '日志备份',
+  from: {
+    logType: 'security_log',
+    backFileTree: [],
+  },
+  fromLoading: true,
+  confirmLoading: false,
+});
+
+/**日志备份对象保存 */
+function fnFormBackFinish() {
+  Modal.confirm({
+    title: '提示',
+    content: `确认手动备份该日志类型数据到文件吗?`,
+    onOk() {
+      backState.confirmLoading = true;
+      const key = 'backupLog';
+      message.loading({ content: '请稍等...', key });
+      backupLog(backState.from.logType)
+        .then(res => {
+          if (res.code === RESULT_CODE_SUCCESS) {
+            message.success({
+              content: `手动备份执行成功记录数：${res.data}`,
+              key,
+              duration: 10,
+            });
+            fnBackFileList();
+          } else {
+            message.error({
+              content: `${res.msg}`,
+              key: key,
+              duration: 3,
+            });
+          }
+        })
+        .finally(() => {
+          backState.confirmLoading = false;
+        });
+    },
+  });
+}
+
+/**日志手动备份文件列表 */
+function fnBackFileList() {
+  backupFileList()
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS) {
+        if (res.data.name === '') {
+          backState.from.backFileTree = [];
+        } else {
+          backState.from.backFileTree = [res.data];
+        }
+        backState.fromLoading = false;
+      }
+    })
+    .finally(() => {
+      backState.confirmLoading = false;
+    });
+}
+
+/**日志备份文件下载 */
+function fnBackDownload(name: string, path: string) {
+  Modal.confirm({
+    title: '提示',
+    content: `确认下载该文件吗?`,
+    onOk() {
+      backState.confirmLoading = true;
+      const key = 'backupDownload';
+      message.loading({ content: '请稍等...', key });
+      backupDownload(path)
+        .then(res => {
+          if (res.code === RESULT_CODE_SUCCESS) {
+            message.success({
+              content: `已完成下载`,
+              key,
+              duration: 3,
+            });
+            saveAs(res.data, name);
+          } else {
+            message.error({
+              content: `${res.msg}`,
+              key,
+              duration: 3,
+            });
+          }
+        })
+        .finally(() => {
+          backState.confirmLoading = false;
+        });
+    },
+  });
+}
+
+onMounted(() => {
+  Promise.allSettled([
+    getLogSet(),
+    getFtpLogSet(),
+    getRemoteOut(),
+    getDict('operation_log_type'),
+    fnBackFileList(),
+  ]).then(resArr => {
+    // 查询日志设置
+    if (resArr[0].status === 'fulfilled') {
+      const result = resArr[0].value;
+      if (result.code === RESULT_CODE_SUCCESS) {
+        logSetState.from = Object.assign(logSetState.from, result.data);
+        logSetState.fromLoading = false;
+        logSetState.confirmLoading = false;
+      }
+    }
+    // 查询FTP日志设置
+    if (resArr[1].status === 'fulfilled') {
+      const result = resArr[1].value;
+      if (result.code === RESULT_CODE_SUCCESS) {
+        ftpState.from = Object.assign(ftpState.from, result.data);
+        ftpState.fromLoading = false;
+        ftpState.confirmLoading = false;
+      }
+    }
+    // 查询日志远程输出设置
+    if (resArr[2].status === 'fulfilled') {
+      const result = resArr[2].value;
+      if (result.code === RESULT_CODE_SUCCESS) {
+        remoteOutState.from = Object.assign(remoteOutState.from, result.data);
+        remoteOutState.fromLoading = false;
+        remoteOutState.confirmLoading = false;
+      }
+    }
+    // 初始字典数据 日志导出-操作日志
+    if (resArr[3].status === 'fulfilled') {
+      dict.operationLogType = resArr[3].value;
+    }
+  });
+});
+</script>
+
+<template>
+  <PageContainer :title="title">
+    <a-row :gutter="16">
+      <a-col :span="8">
+        <!-- 日志设置 -->
+        <a-card :title="logSetState.title" :loading="logSetState.fromLoading">
+          <template #extra>
+            <a-space :size="8" align="center">
+              <a-button
+                type="primary"
+                :loading="logSetState.confirmLoading"
+                @click.prevent="fnFormLogSetFinish"
+              >
+                <template #icon><SaveOutlined /></template>
+                保存设置
+              </a-button>
+            </a-space>
+          </template>
+          <a-form
+            name="logSetState.from"
+            layout="horizontal"
+            autocomplete="off"
+            :label-col="{ span: 8 }"
+          >
+            <a-form-item
+              label="日志保存时间(天)"
+              name="logDuration"
+              v-bind="logSetStateFrom.validateInfos.logDuration"
+            >
+              <a-input-number
+                v-model:value="logSetState.from.logDuration"
+                placeholder="15"
+                :min="15"
+              />
+            </a-form-item>
+            <a-form-item
+              label="日志最大容量(MB)"
+              name="logCapacity"
+              v-bind="logSetStateFrom.validateInfos.logCapacity"
+            >
+              <a-input-number
+                v-model:value="logSetState.from.logCapacity"
+                placeholder="10"
+                :min="10"
+              />
+            </a-form-item>
+          </a-form>
+        </a-card>
+
+        <!-- 日志导出 -->
+        <a-card
+          :title="logOutState.title"
+          :loading="logOutState.fromLoading"
+          style="margin-top: 16px"
+        >
+          <template #extra>
+            <a-space :size="8" align="center">
+              <a-button
+                type="primary"
+                :loading="logOutState.confirmLoading"
+                @click.prevent="fnFormLogOutFinish"
+              >
+                <template #icon><ExportOutlined /></template>
+                导出
+              </a-button>
+            </a-space>
+          </template>
+          <a-form
+            name="logOutState.from"
+            layout="horizontal"
+            autocomplete="off"
+            :label-col="{ span: 5 }"
+          >
+            <a-form-item label="日志类型" name="logType">
+              <a-select v-model:value="logOutState.from.logType">
+                <a-select-option key="operation_log" value="operation_log">
+                  操作日志
+                </a-select-option>
+                <a-select-option key="alarm_log" value="alarm_log">
+                  告警日志
+                </a-select-option>
+                <a-select-option key="security_log" value="security_log">
+                  安全日志
+                </a-select-option>
+              </a-select>
+            </a-form-item>
+            <a-form-item
+              label="操作类型"
+              name="opType"
+              v-show="logOutState.from.logType === 'operation_log'"
+            >
+              <a-select
+                v-model:value="logOutState.from.opType"
+                placeholder="请选择操作类型"
+                :options="dict.operationLogType"
+              >
+              </a-select>
+            </a-form-item>
+            <a-form-item
+              label="时间范围"
+              name="queryRangePicker"
+              v-bind="logOutStateFrom.validateInfos.endTime"
+            >
+              <a-range-picker
+                v-model:value="queryRangePicker"
+                @change="fnRangePickerChange"
+                allow-clear
+                bordered
+                show-time
+                value-format="YYYY-MM-DD HH:mm:ss"
+                format="YYYY-MM-DD HH:mm:ss"
+                :placeholder="['记录开始', '记录结束']"
+                style="width: 100%"
+              ></a-range-picker>
+            </a-form-item>
+          </a-form>
+        </a-card>
+      </a-col>
+
+      <a-col :span="8">
+        <!-- FTP日志设置-->
+        <a-card :title="ftpState.title" :loading="ftpState.fromLoading">
+          <template #extra>
+            <a-space :size="8" align="center">
+              <a-button
+                type="primary"
+                :loading="ftpState.confirmLoading"
+                @click.prevent="fnFormFTPFinish"
+              >
+                <template #icon><SaveOutlined /></template>
+                保存设置
+              </a-button>
+            </a-space>
+          </template>
+          <a-form
+            name="fTPState"
+            layout="horizontal"
+            autocomplete="off"
+            :label-col="{ span: 8 }"
+          >
+            <a-form-item label="协议类型" name="agreement">
+              <a-select v-model:value="ftpState.from.agreement">
+                <a-select-option key="ftp" value="ftp">FTP</a-select-option>
+                <a-select-option key="sftp" value="sftp">SFTP</a-select-option>
+              </a-select>
+            </a-form-item>
+            <a-form-item
+              label="对端IP地址"
+              name="toIp"
+              v-bind="ftpStateFrom.validateInfos.toIp"
+            >
+              <a-input
+                v-model:value="ftpState.from.toIp"
+                allow-clear
+                placeholder="请输入对端IP地址"
+              ></a-input>
+            </a-form-item>
+            <a-form-item
+              label="对端文件目录"
+              name="directory"
+              v-bind="ftpStateFrom.validateInfos.directory"
+            >
+              <a-input
+                v-model:value="ftpState.from.directory"
+                allow-clear
+                placeholder="请输入对端文件目录"
+              ></a-input>
+            </a-form-item>
+            <a-form-item
+              label="日志生成周期(小时)"
+              name="ftpLog"
+              v-bind="ftpStateFrom.validateInfos.ftpLog"
+            >
+              <a-input-number
+                v-model:value="ftpState.from.ftpLog"
+                placeholder="12"
+                :min="12"
+              />
+            </a-form-item>
+          </a-form>
+        </a-card>
+      </a-col>
+
+      <a-col :span="8">
+        <!-- 日志远程输出设置 -->
+        <a-card
+          :title="remoteOutState.title"
+          :loading="remoteOutState.fromLoading"
+        >
+          <template #extra>
+            <a-space :size="8" align="center">
+              <a-button
+                type="primary"
+                :loading="remoteOutState.confirmLoading"
+                @click.prevent="fnFormRemoteOutFinish"
+              >
+                <template #icon><SaveOutlined /></template>
+                保存设置
+              </a-button>
+            </a-space>
+          </template>
+          <a-form
+            name="remoteOutState.from"
+            layout="horizontal"
+            autocomplete="off"
+            :label-col="{ span: 6 }"
+          >
+            <a-form-item
+              label="远程IP地址"
+              name="logIp"
+              v-bind="remoteOutStateFrom.validateInfos.logIp"
+            >
+              <a-input
+                v-model:value="remoteOutState.from.logIp"
+                allow-clear
+                placeholder="请输入远程IP地址"
+              ></a-input>
+            </a-form-item>
+            <a-form-item
+              label="远程日志目录"
+              name="logDirectory"
+              v-bind="remoteOutStateFrom.validateInfos.logDirectory"
+            >
+              <a-input
+                v-model:value="remoteOutState.from.logDirectory"
+                allow-clear
+                placeholder="请输入远程日志目录"
+              ></a-input>
+            </a-form-item>
+          </a-form>
+        </a-card>
+
+        <!-- 日志备份 -->
+        <a-card
+          :title="backState.title"
+          :loading="backState.fromLoading"
+          style="margin-top: 16px"
+        >
+          <template #extra>
+            <a-space :size="8" align="center">
+              <a-button
+                type="primary"
+                :loading="backState.confirmLoading"
+                @click.prevent="fnFormBackFinish"
+              >
+                <template #icon><CloudServerOutlined /></template>
+                备份
+              </a-button>
+            </a-space>
+          </template>
+          <a-form name="backState.from" layout="horizontal" autocomplete="off">
+            <a-form-item label="日志类型" name="logType">
+              <a-select v-model:value="backState.from.logType">
+                <a-select-option key="operation_log" value="operation_log">
+                  操作日志
+                </a-select-option>
+                <a-select-option key="alarm_log" value="alarm_log">
+                  告警日志
+                </a-select-option>
+                <a-select-option key="security_log" value="security_log">
+                  安全日志
+                </a-select-option>
+              </a-select>
+            </a-form-item>
+            <a-form-item
+              label="备份文件"
+              name="backFileTree"
+              v-show="backState.from.backFileTree.length > 0"
+            >
+              <a-directory-tree
+                :tree-data="backState.from.backFileTree"
+                :field-names="{ children: 'items', title: 'name', key: 'path' }"
+              >
+                <template #title="{ isDir, name, path }">
+                  <span>{{ name }}</span>
+                  <span
+                    class="backFile-download"
+                    v-if="!isDir"
+                    @click.prevent="fnBackDownload(name, path)"
+                  >
+                    下载
+                  </span>
+                </template>
+              </a-directory-tree>
+            </a-form-item>
+          </a-form>
+        </a-card>
+      </a-col>
+    </a-row>
+  </PageContainer>
+</template>
+
+<style lang="less" scoped>
+.backFile-download {
+  margin-left: 12px;
+  color: #eb2f96;
+  text-decoration: underline;
+}
+</style>

src/views/logManage/setting/index.vue

@@ -1,506 +0,0 @@
-<script setup lang="ts">
-import { useRoute } from 'vue-router';
-import { reactive, ref, onMounted, toRaw } from 'vue';
-import { PageContainer } from '@ant-design-vue/pro-layout';
-import { message, Modal } from 'ant-design-vue/lib';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
-import { ColumnsType } from 'ant-design-vue/lib/table';
-import { parseDateToStr } from '@/utils/date-utils';
-import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
-import { saveAs } from 'file-saver';
-import useI18n from '@/hooks/useI18n';
-import { getTraceRawInfo, listTraceData } from '@/api/traceManage/analysis';
-const { t } = useI18n();
-const route = useRoute();
-
-/**路由标题 */
-let title = ref<string>((route.meta.title as string) ?? '标题');
-
-/**查询参数 */
-let queryParams = reactive({
-  /**移动号 */
-  imsi: '',
-  /**移动号 */
-  msisdn: '',
-  /**当前页数 */
-  pageNum: 1,
-  /**每页条数 */
-  pageSize: 20,
-});
-
-/**查询参数重置 */
-function fnQueryReset() {
-  queryParams = Object.assign(queryParams, {
-    imsi: '',
-    pageNum: 1,
-    pageSize: 20,
-  });
-  tablePagination.current = 1;
-  tablePagination.pageSize = 20;
-  fnGetList();
-}
-
-/**表格状态类型 */
-type TabeStateType = {
-  /**加载等待 */
-  loading: boolean;
-  /**紧凑型 */
-  size: SizeType;
-  /**搜索栏 */
-  seached: boolean;
-  /**记录数据 */
-  data: object[];
-};
-
-/**表格状态 */
-let tableState: TabeStateType = reactive({
-  loading: false,
-  size: 'middle',
-  seached: true,
-  data: [],
-});
-
-/**表格字段列 */
-let tableColumns: ColumnsType = [
-  {
-    title: t('views.traceManage.analysis.trackTaskId'),
-    dataIndex: 'taskId',
-    align: 'center',
-  },
-  {
-    title: t('views.traceManage.analysis.imsi'),
-    dataIndex: 'imsi',
-    align: 'center',
-  },
-  {
-    title: t('views.traceManage.analysis.msisdn'),
-    dataIndex: 'msisdn',
-    align: 'center',
-  },
-  {
-    title: t('views.traceManage.analysis.srcIp'),
-    dataIndex: 'srcAddr',
-    align: 'center',
-  },
-  {
-    title: t('views.traceManage.analysis.dstIp'),
-    dataIndex: 'dstAddr',
-    align: 'center',
-  },
-  {
-    title: t('views.traceManage.analysis.signalType'),
-    dataIndex: 'ifType',
-    align: 'center',
-  },
-  {
-    title: t('views.traceManage.analysis.msgType'),
-    dataIndex: 'msgType',
-    align: 'center',
-  },
-  {
-    title: t('views.traceManage.analysis.msgDirect'),
-    dataIndex: 'msgDirect',
-    align: 'center',
-  },
-  {
-    title: t('views.traceManage.analysis.rowTime'),
-    dataIndex: 'timestamp',
-    align: 'center',
-    customRender(opt) {
-      if (!opt.value) return '';
-      return parseDateToStr(opt.value);
-    },
-  },
-  {
-    title: t('common.operate'),
-    key: 'id',
-    align: 'center',
-  },
-];
-
-/**表格分页器参数 */
-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();
-  },
-});
-
-/**表格紧凑型变更操作 */
-function fnTableSize({ key }: MenuInfo) {
-  tableState.size = key as SizeType;
-}
-
-/**查询备份信息列表 */
-function fnGetList() {
-  if (tableState.loading) return;
-  tableState.loading = true;
-  listTraceData(toRaw(queryParams)).then(res => {
-    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
-      tablePagination.total = res.total;
-      tableState.data = res.rows;
-    }
-    tableState.loading = false;
-  });
-}
-
-/**抽屉对象信息状态类型 */
-type ModalStateType = {
-  /**抽屉框是否显示 */
-  visible: boolean;
-  /**标题 */
-  title: string;
-  /**表单数据 */
-  from: Record<string, any>;
-};
-
-/**抽屉对象信息状态 */
-let modalState: ModalStateType = reactive({
-  visible: false,
-  title: '',
-  from: {
-    rawData: '',
-    rawDataHTML: '',
-    downBtn: false,
-  },
-});
-
-/**
- * 对话框弹出显示
- * @param row 记录信息
- */
-function fnModalVisible(row: Record<string, any>) {
-  // 进制转数据
-  const hexString = parseBase64Data(row.rawMsg);
-  const rawData = convertToReadableFormat(hexString);
-  modalState.from.rawData = rawData;
-  // RAW解析HTML
-  getTraceRawInfo(row.id).then(res => {
-    if (res.code === RESULT_CODE_SUCCESS) {
-      const htmlString = res.msg;
-      // 删除所有 <a> 标签
-      const withoutATags = htmlString.replace(/<a\b[^>]*>(.*?)<\/a>/gi, '');
-      // 删除所有 <script> 标签
-      const withoutScriptTags = withoutATags.replace(
-        /<script\b[^>]*>([\s\S]*?)<\/script>/gi,
-        ''
-      );
-      // 默认全展开
-      const withoutHiddenElements = withoutScriptTags.replace(
-        /style="display:none"/gi,
-        'style="background:#ffffff"'
-      );
-      modalState.from.rawDataHTML = withoutHiddenElements;
-      modalState.from.downBtn = true;
-    } else {
-      modalState.from.rawDataHTML = t('views.traceManage.analysis.noData');
-    }
-  });
-  modalState.title = t('views.traceManage.analysis.taskTitle', {
-    num: row.imsi,
-  });
-  modalState.visible = true;
-}
-
-/**
- * 对话框弹出关闭
- */
-function fnModalVisibleClose() {
-  modalState.visible = false;
-  modalState.from.downBtn = false;
-  modalState.from.rawDataHTML = '';
-  modalState.from.rawData = '';
-}
-
-// 将Base64编码解码为字节数组
-function parseBase64Data(hexData: string) {
-  // 将Base64编码解码为字节数组
-  const byteString = atob(hexData);
-  const byteArray = new Uint8Array(byteString.length);
-  for (let i = 0; i < byteString.length; i++) {
-    byteArray[i] = byteString.charCodeAt(i);
-  }
-
-  // 将每一个字节转换为2位16进制数表示，并拼接起来
-  let hexString = '';
-  for (let i = 0; i < byteArray.length; i++) {
-    const hex = byteArray[i].toString(16);
-    hexString += hex.length === 1 ? '0' + hex : hex;
-  }
-  return hexString;
-}
-
-// 转换十六进制字节流为可读格式和ASCII码表示
-function convertToReadableFormat(hexString: string) {
-  let result = '';
-  let asciiResult = '';
-  let arr = [];
-  let row = 100;
-  for (let i = 0; i < hexString.length; i += 2) {
-    const hexChars = hexString.substring(i, i + 2);
-    const decimal = parseInt(hexChars, 16);
-    const asciiChar =
-      decimal >= 32 && decimal <= 126 ? String.fromCharCode(decimal) : '.';
-
-    result += hexChars + ' ';
-    asciiResult += asciiChar;
-
-    if ((i + 2) % 32 === 0) {
-      arr.push({
-        row: row,
-        code: result,
-        asciiText: asciiResult,
-      });
-      result = '';
-      asciiResult = '';
-      row += 10;
-    }
-    if (2 + i == hexString.length) {
-      arr.push({
-        row: row,
-        code: result,
-        asciiText: asciiResult,
-      });
-      result = '';
-      asciiResult = '';
-      row += 10;
-    }
-  }
-  return arr;
-}
-
-/**信息文件下载 */
-function fnDownloadFile() {
-  Modal.confirm({
-    title: t('common.tipTitle'),
-    content: t('views.traceManage.analysis.taskDownTip'),
-    onOk() {
-      const blob = new Blob([modalState.from.rawDataHTML], {
-        type: 'text/plain',
-      });
-      saveAs(blob, `${modalState.title}_${Date.now()}.html`);
-    },
-  });
-}
-
-onMounted(() => {
-  // 获取列表数据
-  fnGetList();
-});
-</script>
-
-<template>
-  <PageContainer :title="title">
-    <a-card
-      v-show="tableState.seached"
-      :bordered="false"
-      :body-style="{ marginBottom: '24px', paddingBottom: 0 }"
-    >
-      <!-- 表格搜索栏 -->
-      <a-form :model="queryParams" name="queryParams" layout="horizontal">
-        <a-row :gutter="16">
-          <a-col :lg="6" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.traceManage.analysis.imsi')"
-              name="imsi"
-            >
-              <a-input
-                v-model:value="queryParams.imsi"
-                :allow-clear="true"
-                :placeholder="t('views.traceManage.analysis.imsiPlease')"
-              ></a-input>
-            </a-form-item>
-          </a-col>
-          <a-col :lg="6" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.traceManage.analysis.msisdn')"
-              name="imsi"
-            >
-              <a-input
-                v-model:value="queryParams.msisdn"
-                :allow-clear="true"
-                :placeholder="t('views.traceManage.analysis.msisdnPlease')"
-              ></a-input>
-            </a-form-item>
-          </a-col>
-          <a-col :lg="6" :md="12" :xs="24">
-            <a-form-item>
-              <a-space :size="8">
-                <a-button type="primary" @click.prevent="fnGetList">
-                  <template #icon><SearchOutlined /></template>
-                  {{ t('common.search') }}
-                </a-button>
-                <a-button type="default" @click.prevent="fnQueryReset">
-                  <template #icon><ClearOutlined /></template>
-                  {{ t('common.reset') }}
-                </a-button>
-              </a-space>
-            </a-form-item>
-          </a-col>
-        </a-row>
-      </a-form>
-    </a-card>
-
-    <a-card :bordered="false" :body-style="{ padding: '0px' }">
-      <!-- 插槽-卡片左侧侧 -->
-      <template #title> </template>
-
-      <!-- 插槽-卡片右侧 -->
-      <template #extra>
-        <a-space :size="8" align="center">
-          <a-tooltip>
-            <template #title>{{ t('common.searchBarText') }}</template>
-            <a-switch
-              v-model:checked="tableState.seached"
-              :checked-children="t('common.switch.show')"
-              :un-checked-children="t('common.switch.hide')"
-              size="small"
-            />
-          </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-tooltip>
-            <template #title>{{ t('common.sizeText') }}</template>
-            <a-dropdown trigger="click">
-              <a-button type="text">
-                <template #icon><ColumnHeightOutlined /></template>
-              </a-button>
-              <template #overlay>
-                <a-menu
-                  :selected-keys="[tableState.size as string]"
-                  @click="fnTableSize"
-                >
-                  <a-menu-item key="default">{{
-                    t('common.size.default')
-                  }}</a-menu-item>
-                  <a-menu-item key="middle">{{
-                    t('common.size.middle')
-                  }}</a-menu-item>
-                  <a-menu-item key="small">{{
-                    t('common.size.small')
-                  }}</a-menu-item>
-                </a-menu>
-              </template>
-            </a-dropdown>
-          </a-tooltip>
-        </a-space>
-      </template>
-
-      <!-- 表格列表 -->
-      <a-table
-        class="table"
-        row-key="id"
-        :columns="tableColumns"
-        :loading="tableState.loading"
-        :data-source="tableState.data"
-        :size="tableState.size"
-        :pagination="tablePagination"
-        :scroll="{ x: true }"
-      >
-        <template #bodyCell="{ column, record }">
-          <template v-if="column.key === 'id'">
-            <a-space :size="8" align="center">
-              <a-tooltip>
-                <template #title>查看详情</template>
-                <a-button type="link" @click.prevent="fnModalVisible(record)">
-                  <template #icon><ProfileOutlined /></template>
-                </a-button>
-              </a-tooltip>
-            </a-space>
-          </template>
-        </template>
-      </a-table>
-    </a-card>
-
-    <!-- 详情框 -->
-    <a-modal
-      width="800px"
-      :title="modalState.title"
-      :visible="modalState.visible"
-      @cancel="fnModalVisibleClose"
-    >
-      <div class="raw-title">
-        {{ t('views.traceManage.analysis.signalData') }}
-      </div>
-      <a-row
-        class="raw"
-        :gutter="16"
-        v-for="v in modalState.from.rawData"
-        :key="v.row"
-      >
-        <a-col class="num" :span="2">{{ v.row }}</a-col>
-        <a-col class="code" :span="12">{{ v.code }}</a-col>
-        <a-col class="txt" :span="10">{{ v.asciiText }}</a-col>
-      </a-row>
-      <a-divider />
-      <div class="raw-title">
-        {{ t('views.traceManage.analysis.signalDetail') }}
-        <a-button
-          type="dashed"
-          size="small"
-          @click.prevent="fnDownloadFile"
-          v-if="modalState.from.downBtn"
-        >
-          <template #icon>
-            <DownloadOutlined />
-          </template>
-          {{ t('views.traceManage.analysis.taskDownText') }}
-        </a-button>
-      </div>
-      <div class="raw-html" v-html="modalState.from.rawDataHTML"></div>
-    </a-modal>
-  </PageContainer>
-</template>
-
-<style lang="less" scoped>
-.table :deep(.ant-pagination) {
-  padding: 0 24px;
-}
-
-.raw {
-  &-title {
-    color: #000000d9;
-    font-size: 24px;
-    line-height: 1.8;
-  }
-  .num {
-    background-color: #e5e5e5;
-  }
-  .code {
-    background-color: #e7e6ff;
-  }
-  .txt {
-    background-color: #ffe3e5;
-  }
-
-  &-html {
-    max-height: 300px;
-    overflow-y: scroll;
-  }
-}
-</style>