Merge remote-tracking branch 'origin/lichang'

2024-10-17 18:26:49 +08:00
parent ff556ce1ec 9ed7aed4b4
commit 8a71e8f773
28 changed files with 1544 additions and 538 deletions
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
    "dayjs": "^1.11.11",
    "echarts": "~5.5.0",
    "file-saver": "^2.0.5",
+    "grid-layout-plus": "^1.0.5",
    "intl-tel-input": "^23.8.1",
    "js-base64": "^3.7.7",
    "js-cookie": "^3.0.5",
@@ -41,7 +42,6 @@
    "vue-i18n": "^9.13.1",
    "vue-router": "^4.4.0",
    "vue3-smooth-dnd": "^0.0.6",
-    "vuedraggable": "^4.1.0",
    "xlsx": "~0.18.5"
  },
  "devDependencies": {
--- a/src/api/tool/iperf.ts
+++ b/src/api/tool/iperf.ts
@@ -0,0 +1,20 @@
+import { request } from '@/plugins/http-fetch';
+
+// iperf 版本信息
+export function iperfV(data: Record<string, string>) {
+  return request({
+    url: '/tool/iperf/v',
+    method: 'get',
+    params: data,
+  });
+}
+
+// iperf 软件安装
+export function iperfI(data: Record<string, string>) {
+  return request({
+    url: '/tool/iperf/i',
+    method: 'post',
+    data: data,
+    timeout: 60_000,
+  });
+}
--- a/src/api/tool/neFile.ts
+++ b/src/api/tool/neFile.ts
@@ -1,7 +1,7 @@
 import { request } from '@/plugins/http-fetch';

 /**
- * 查询文件列表列表
+ * 查询网元端文件列表
 * @param query 查询参数
 * @returns object
 */
@@ -14,7 +14,7 @@ export function listNeFiles(query: Record<string, any>) {
 }

 /**
- * 从网元端获取文件
+ * 从网元到本地获取文件
 * @param query 查询参数
 * @returns object
 */
@@ -27,3 +27,24 @@ export function getNeFile(query: Record<string, any>) {
    timeout: 180_000,
  });
 }
+
+// 从网元到本地获取目录压缩为ZIP
+export function getNeDirZip(data: Record<string, any>) {
+  return request({
+    url: '/ne/action/pullDirZip',
+    method: 'get',
+    params: data,
+    responseType: 'blob',
+    timeout: 60_000,
+  });
+}
+
+// 查看网元端文件内容
+export function getNeViewFile(data: Record<string, any>) {
+  return request({
+    url: '/ne/action/viewFile',
+    method: 'get',
+    params: data,
+    timeout: 60_000,
+  });
+}
--- a/src/api/tool/ping.ts
+++ b/src/api/tool/ping.ts
@@ -0,0 +1,10 @@
+import { request } from '@/plugins/http-fetch';
+
+// ping 网元端版本信息
+export function pingV(data: Record<string, string>) {
+  return request({
+    url: '/tool/ping/v',
+    method: 'get',
+    params: data,
+  });
+}
--- a/src/api/trace/pcap.ts
+++ b/src/api/trace/pcap.ts
@@ -20,17 +20,6 @@ export function dumpStop(data: Record<string, string>) {
  });
 }

-// 网元抓包PACP 下载
-export function dumpDownload(data: Record<string, any>) {
-  return request({
-    url: '/trace/tcpdump/download',
-    method: 'get',
-    params: data,
-    responseType: 'blob',
-    timeout: 60_000,
-  });
-}
-
 // UPF标准版内部抓包
 export function traceUPF(data: Record<string, string>) {
  return request({
--- a/src/components/TerminalSSHView/index.vue
+++ b/src/components/TerminalSSHView/index.vue
@@ -13,6 +13,11 @@ const props = defineProps({
    type: String,
    required: true,
  },
+  /**ws连接地址，必传 如/ws/view */
+  url: {
+    type: String,
+    required: true,
+  },
  /**网元类型，必传 */
  neType: {
    type: String,
@@ -33,6 +38,11 @@ const props = defineProps({
    type: Number,
    default: 40,
  },
+  /**ws发送requestId前缀 如ssh_id */
+  prefix: {
+    type: String,
+    default: 'ssh',
+  },
 });

 /**终端输入DOM节点实例对象 */
@@ -148,13 +158,18 @@ function wsMessage(res: Record<string, any>) {
    if (parts.length > 0) {
      let text = parts[parts.length - 1];
      // 找到最后输出标记
-      const lestIndex = text.lastIndexOf('\u001b[?2004h\u001b]0;');
+      let lestIndex = text.lastIndexOf('\u001b[?2004h\u001b]0;');
      if (lestIndex !== -1) {
        text = text.substring(0, lestIndex);
      }
-      if (text === '' || text === '\r\n' || text.startsWith("^C\r\n") ) {
+      if (text === '' || text === '\r\n' || text.startsWith('^C\r\n')) {
        return;
      }
+      // 是否还有最后输出标记
+      lestIndex = text.lastIndexOf('\u001b[?2004h');
+      if (lestIndex !== -1) {
+        text = text.substring(0, lestIndex);
+      }
      // console.log({ parts, text });
      terminal.value.write(text);
      return;
@@ -168,7 +183,7 @@ onMounted(() => {
  if (props.neType && props.neId) {
    // 建立链接
    const options: OptionsType = {
-      url: '/ws/view',
+      url: props.url,
      params: {
        neType: props.neType,
        neId: props.neId,
@@ -185,7 +200,7 @@ onMounted(() => {
 });

 onBeforeUnmount(() => {
-  ws.close();
+  if (ws.state() === WebSocket.OPEN) ws.close();
 });

 // 给组件设置属性 ref="xxxTerminal"
@@ -200,7 +215,7 @@ defineExpose({
  /**发送命令 */
  send: (type: string, data: Record<string, any>) => {
    ws.send({
-      requestId: `ssh_${props.id}`,
+      requestId: `${props.prefix}_${props.id}`,
      type,
      data,
    });
@@ -208,7 +223,7 @@ defineExpose({
  /**模拟按下 Ctrl+C */
  ctrlC: () => {
    ws.send({
-      requestId: `ssh_${props.id}`,
+      requestId: `${props.prefix}_${props.id}`,
      type: 'ctrl-c',
    });
  },
--- a/src/i18n/locales/en-US.ts
+++ b/src/i18n/locales/en-US.ts
@@ -685,11 +685,12 @@ export default {
        addrPlease: "Please fill in the host IP address correctly",
        port: "Port",
        portPlease: "Please fill in the host port number correctly",
-        user: "Login User",
-        userPlease: "Please fill in the host login user correctly",
+        user: "User",
+        userPlease: "Please fill in the host user correctly",
+        database: "DataBase",
        authMode: "Auth Mode",
        password: "Password",
-        passwordPlease: "Please fill in the host login password correctly",
+        passwordPlease: "Please fill in the host password correctly",
        privateKey: "Private Key",
        privateKeyPlease: "Please fill in the private key characters correctly ~/.ssh/id_rsa",
        passPhrase: "Private Key Cipher",
@@ -1110,8 +1111,8 @@ export default {
        fileUPFTip: 'UPF internal packet capture and analysis packet',
        textStart: "Start",
        textStop: "Stop",
-        textLog: "Log",
-        textLogMsg: "Log Info",
+        textLog: "LogFile",
+        textLogMsg: "LogFile Info",
        textDown: "Download",
        downTip: "Are you sure you want to download the {title} capture data file?",
        downOk: "{title} file download complete",
--- a/src/i18n/locales/zh-CN.ts
+++ b/src/i18n/locales/zh-CN.ts
@@ -686,10 +686,11 @@ export default {
        port: "端口",
        portPlease: "请正确填写主机端口号",
        user: "用户名",
-        userPlease: "请正确填写主机登录用户",
+        userPlease: "请正确填写主机用户",
+        database: "数据库",
        authMode: "认证模式",
        password: "密码",
-        passwordPlease: "请正确填写主机登录密码",
+        passwordPlease: "请正确填写主机密码",
        privateKey: "私钥",
        privateKeyPlease: "请正确填写私钥字符内容 ~/.ssh/id_rsa",
        passPhrase: "私钥密码",
@@ -1110,8 +1111,8 @@ export default {
        fileUPFTip: 'UPF内部抓包分析包',
        textStart: "开始",
        textStop: "停止",
-        textLog: "日志",
-        textLogMsg: "日志信息",
+        textLog: "日志文件",
+        textLogMsg: "日志文件信息",
        textDown: "下载",
        downTip: "确认要下载 {title} 抓包数据文件吗？",
        downOk: "{title} 文件下载完成",
--- a/src/plugins/http-fetch.ts
+++ b/src/plugins/http-fetch.ts
@@ -187,7 +187,6 @@ function beforeRequest(options: OptionsType): OptionsType | Promise<any> {
      const separator = options.url.includes('?') ? '&' : '?';
      // 请求加密
      if (options.crypto) {
-        debugger;
        const data = encryptAES(JSON.stringify(paramStr), APP_DATA_API_KEY);
        options.url += `${separator}data=${encodeURIComponent(data)}`;
      } else {
--- a/src/utils/parse-utils.ts
+++ b/src/utils/parse-utils.ts
@@ -173,13 +173,13 @@ export function parseSizeFromKbs(sizeByte: number, timeInterval: number): any {
 /**
 * 字节数转换单位
 * @param bits 字节Bit大小 64009540 = 512.08 MB
- * @returns xx B/ KB / MB / GB / TB
+ * @returns xx B / KB / MB / GB / TB / PB / EB / ZB / YB
 */
 export function parseSizeFromBits(bits: number | string): string {
  bits = Number(bits) || 0;
  if (bits <= 0) return '0 B';
  bits = bits * 8;
-  const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+  const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
  const unitIndex = Math.floor(Math.log2(bits) / 10);
  const value = (bits / Math.pow(1000, unitIndex)).toFixed(2);
  const unti = units[unitIndex];
--- a/src/views/configManage/softwareManage/index.vue
+++ b/src/views/configManage/softwareManage/index.vue
@@ -425,8 +425,6 @@ function fnGetList(pageNum?: number) {
          (queryParams.pageNum - 1) * tablePagination.pageSize &&
        queryParams.pageNum !== 1
      ) {
-        debugger;
-
        tableState.loading = false;
        fnGetList(queryParams.pageNum - 1);
      }
--- a/src/views/dashboard/overview/hooks/useWS.ts
+++ b/src/views/dashboard/overview/hooks/useWS.ts
@@ -44,7 +44,7 @@ export default function useWS() {
    // 普通信息
    switch (requestId) {
      // AMF_UE会话事件
-      case 'amf_1010_001':
+      case 'amf_1010':
        if (Array.isArray(data.rows)) {
          eventListParse('amf_ue', data);
        }
@@ -85,7 +85,7 @@ export default function useWS() {
        }
        break;
      // AMF_UE会话事件
-      case '1010_001':
+      case '1010':
        if (data.data) {
          queue.add(() => eventItemParseAndPush('amf_ue', data.data));
        }
@@ -128,7 +128,7 @@ export default function useWS() {
  function userActivitySend() {
    // AMF_UE会话事件
    ws.send({
-      requestId: 'amf_1010_001',
+      requestId: 'amf_1010',
      type: 'amf_ue',
      data: {
        neType: 'AMF',
@@ -175,11 +175,11 @@ export default function useWS() {
        /**订阅通道组
         *
         * 指标UPF (GroupID:12_neId)
-         * AMF_UE会话事件(GroupID:1010_neId)
+         * AMF_UE会话事件(GroupID:1010)
         * MME_UE会话事件(GroupID:1011_neId)
         * IMS_CDR会话事件(GroupID:1005_neId)
         */
-        subGroupID: '12_001,1010_001,1011_001,1005_001',
+        subGroupID: '12_001,1010,1011_001,1005_001',
      },
      onmessage: wsMessage,
      onerror: (ev: any) => {
--- a/src/views/logManage/neFile/components/ViewDrawer.vue
+++ b/src/views/logManage/neFile/components/ViewDrawer.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive, onMounted, watch, ref, nextTick } from 'vue';
+import { reactive, watch, ref } from 'vue';
 import { ProModal } from 'antdv-pro-modal';
 import TerminalSSHView from '@/components/TerminalSSHView/index.vue';
 import useI18n from '@/hooks/useI18n';
@@ -86,19 +86,20 @@ function fnInit() {
 function fnReload() {
  if (!viewTerminal.value) return;
  viewTerminal.value.ctrlC();
-
  if (state.form.showType !== 'lines') {
    state.form.lines = 10;
  } else {
    state.form.char = 0;
  }
  viewTerminal.value.clear();
+  setTimeout(() => {
    viewTerminal.value.send('tail', {
      filePath: props.filePath,
      lines: state.form.lines,
      char: state.form.char,
      follow: state.form.follow,
    });
+  }, 1000);
 }
 </script>

@@ -122,9 +123,11 @@ function fnReload() {
    <TerminalSSHView
      ref="viewTerminal"
      :id="`V${Date.now()}`"
-      style="height: calc(100% - 36px)"
+      prefix="tail"
+      url="/ws/view"
      :ne-type="neType"
      :ne-id="neId"
+      style="height: calc(100% - 36px)"
      @connect="fnInit()"
    ></TerminalSSHView>
    <!-- 命令控制属性 -->
--- a/src/views/logManage/neFile/index.vue
+++ b/src/views/logManage/neFile/index.vue
@@ -204,11 +204,13 @@ function fnDirCD(dir: string, index?: number) {

 /**网元类型选择对应修改 */
 function fnNeChange(keys: any, _: any) {
-  // 不是同类型时需要重新加载
-  if (Array.isArray(keys) && queryParams.neType !== keys[0]) {
+  if (!Array.isArray(keys)) return;
  const neType = keys[0];
+  const neId = keys[1];
+  // 不是同类型时需要重新加载
+  if (queryParams.neType !== neType || queryParams.neId !== neId) {
    queryParams.neType = neType;
-    queryParams.neId = keys[1];
+    queryParams.neId = neId;
    if (neType === 'IMS') {
      nePathArr.value = ['/var/log/ims'];
      queryParams.search = '';
--- a/src/views/ne/neInfo/components/EditModal.vue
+++ b/src/views/ne/neInfo/components/EditModal.vue
@@ -40,7 +40,7 @@ let dict: {
 * 测试主机连接
 */
 function fnHostTest(row: Record<string, any>) {
-  if (modalState.confirmLoading || !row.addr) return;
+  if (modalState.confirmLoading || !row.addr || !row.port) return;
  modalState.confirmLoading = true;
  const hide = message.loading(t('common.loading'), 0);
  testNeHost(row)
@@ -124,8 +124,8 @@ let modalState: ModalStateType = reactive({
        addr: '',
        port: 22,
        user: 'omcuser',
-        authMode: '0',
-        password: 'a9tU53r',
+        authMode: '2',
+        password: '',
        privateKey: '',
        passPhrase: '',
        remark: '',
@@ -283,11 +283,11 @@ function fnModalCancel() {

 /**表单修改网元类型 */
 function fnNeTypeChange(v: any) {
-  const hostsLen = modalState.from.hosts.length;
  // 网元默认只含22和4100
-  if (hostsLen === 3 && v !== 'UPF') {
+  if (modalState.from.hosts.length === 3) {
    modalState.from.hosts.pop();
  }
+  const hostsLen = modalState.from.hosts.length;
  // UPF标准版本可支持5002
  if (hostsLen === 2 && v === 'UPF') {
    modalState.from.hosts.push({
@@ -295,11 +295,27 @@ function fnNeTypeChange(v: any) {
      hostType: 'telnet',
      groupId: '1',
      title: 'Telnet_NE_5002',
-      addr: '',
+      addr: modalState.from.ip,
      port: 5002,
-      user: 'user',
+      user: 'admin',
      authMode: '0',
-      password: 'user',
+      password: 'admin',
+      remark: '',
+    });
+  }
+  // UDM可支持6379
+  if (hostsLen === 2 && v === 'UDM') {
+    modalState.from.hosts.push({
+      hostId: undefined,
+      hostType: 'redis',
+      groupId: '1',
+      title: 'REDIS_NE_6379',
+      addr: modalState.from.ip,
+      port: 6379,
+      user: 'udmdb',
+      authMode: '0',
+      password: 'helloearth',
+      dbName: '0',
      remark: '',
    });
  }
@@ -626,8 +642,13 @@ onMounted(() => {
            (s:any) => !(s.hostType === 'telnet' &&  modalState.from.neType === 'OMC')
          )"
          :key="host.title"
-          :header="`${host.hostType.toUpperCase()} ${host.port}`"
        >
+          <template #header>
+            <span v-if="host.hostType === 'redis'"> DB {{ host.port }} </span>
+            <span v-else>
+              {{ `${host.hostType.toUpperCase()} ${host.port}` }}
+            </span>
+          </template>
          <a-row :gutter="16">
            <a-col :lg="12" :md="12" :xs="24">
              <a-form-item :label="t('views.ne.neHost.addr')">
@@ -654,7 +675,22 @@ onMounted(() => {
            </a-col>
          </a-row>

-          <a-row :gutter="16">
+          <a-form-item
+            v-if="host.hostType === 'telnet'"
+            :label="t('views.ne.neHost.user')"
+            :label-col="{ span: 3 }"
+            :label-wrap="true"
+          >
+            <a-input
+              v-model:value="host.user"
+              allow-clear
+              :maxlength="32"
+              :placeholder="t('common.inputPlease')"
+            >
+            </a-input>
+          </a-form-item>
+
+          <a-row :gutter="16" v-if="host.hostType === 'ssh'">
            <a-col :lg="12" :md="12" :xs="24">
              <a-form-item :label="t('views.ne.neHost.user')">
                <a-input
@@ -672,7 +708,6 @@ onMounted(() => {
                  v-model:value="host.authMode"
                  default-value="0"
                  :options="dict.neHostAuthMode"
-                  :disabled="host.hostType === 'telnet'"
                >
                </a-select>
              </a-form-item>
@@ -692,7 +727,6 @@ onMounted(() => {
            >
            </a-input-password>
          </a-form-item>
-
          <template v-if="host.authMode === '1'">
            <a-form-item
              :label="t('views.ne.neHost.privateKey')"
@@ -722,6 +756,21 @@ onMounted(() => {
            </a-form-item>
          </template>

+          <a-form-item
+            v-if="host.hostType === 'mysql'"
+            :label="t('views.ne.neHost.database')"
+            :label-col="{ span: 3 }"
+            :label-wrap="true"
+          >
+            <a-input
+              v-model:value="host.dbName"
+              allow-clear
+              :maxlength="32"
+              :placeholder="t('common.inputPlease')"
+            >
+            </a-input>
+          </a-form-item>
+
          <a-form-item
            :label="t('common.remark')"
            :label-col="{ span: 3 }"
@@ -736,6 +785,7 @@ onMounted(() => {
            />
          </a-form-item>

+          <!-- 测试 -->
          <a-form-item
            :label="t('views.ne.neHost.test')"
            name="test"
--- a/src/views/ne/neQuickSetup/components/NeInfoConfig.vue
+++ b/src/views/ne/neQuickSetup/components/NeInfoConfig.vue
@@ -229,11 +229,11 @@ function fnModalOk() {
 * 表单修改网元类型
 */
 function fnNeTypeChange(v: any) {
-  const hostsLen = modalState.from.hosts.length;
  // 网元默认只含22和4100
-  if (hostsLen === 3 && v !== 'UPF') {
+  if (modalState.from.hosts.length === 3) {
    modalState.from.hosts.pop();
  }
+  const hostsLen = modalState.from.hosts.length;
  // UPF标准版本可支持5002
  if (hostsLen === 2 && v === 'UPF') {
    modalState.from.hosts.push({
@@ -249,6 +249,22 @@ function fnNeTypeChange(v: any) {
      remark: '',
    });
  }
+  // UDM可支持6379
+  if (hostsLen === 2 && v === 'UDM') {
+    modalState.from.hosts.push({
+      hostId: undefined,
+      hostType: 'redis',
+      groupId: '1',
+      title: 'REDIS_NE_6379',
+      addr: modalState.from.ip,
+      port: 6379,
+      user: 'udmdb',
+      authMode: '0',
+      password: 'helloearth',
+      dbName: '0',
+      remark: '',
+    });
+  }
 }

 /**
--- a/src/views/neUser/auth/index.vue
+++ b/src/views/neUser/auth/index.vue
@@ -517,7 +517,7 @@ function fnExportList(type: string) {
  if (!neId) return;

  const hide = message.loading(t('common.loading'), 0);
-  exportUDMAuth({ ...queryParams, ...{ type } })
+  exportUDMAuth(Object.assign({ type: type }, queryParams))
    .then(res => {
      if (res.code === RESULT_CODE_SUCCESS) {
        message.success(t('common.msgSuccess', { msg: t('common.export') }), 3);
@@ -555,6 +555,9 @@ function fnLoadData() {
        fnQueryReset();
      }, timerS * 1000);
    } else {
+      modalState.loadDataLoading = false;
+      tableState.loading = false; // 表格loading
+      fnQueryReset();
      message.error({
        content: t('common.getInfoFail'),
        duration: 3,
--- a/src/views/neUser/sub/index.vue
+++ b/src/views/neUser/sub/index.vue
@@ -878,7 +878,7 @@ function fnExportList(type: string) {
  if (!neId) return;
  const key = 'exportSub';
  message.loading({ content: t('common.loading'), key });
-  exportUDMSub({ ...queryParams, ...{ type } }).then(res => {
+  exportUDMSub(Object.assign({ type: type }, queryParams)).then(res => {
    if (res.code === RESULT_CODE_SUCCESS) {
      message.success({
        content: t('common.msgSuccess', { msg: t('common.export') }),
@@ -920,6 +920,9 @@ function fnLoadData() {
        fnQueryReset();
      }, timerS * 1000);
    } else {
+      modalState.loadDataLoading = false;
+      tableState.loading = false; // 表格loading
+      fnQueryReset();
      message.error({
        content: t('common.getInfoFail'),
        duration: 3,
--- a/src/views/perfManage/kpiKeyTarget/index.vue
+++ b/src/views/perfManage/kpiKeyTarget/index.vue
@@ -1,13 +1,10 @@
 <script setup lang="ts">
-import draggable from 'vuedraggable';
-
+import { DragOutlined } from '@ant-design/icons-vue';
+import { GridLayout, GridItem } from 'grid-layout-plus'
 import * as echarts from 'echarts';
 import { PageContainer } from 'antdv-pro-layout';
-import { onMounted, reactive, ref, markRaw, nextTick, onUnmounted } from 'vue';
-import {
-  RESULT_CODE_ERROR,
-  RESULT_CODE_SUCCESS,
-} from '@/constants/result-constants';
+import { onMounted, reactive, ref, markRaw, nextTick, onUnmounted, watch } from 'vue';
+import { RESULT_CODE_ERROR, RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { SizeType } from 'ant-design-vue/es/config-provider';
 import { listKPIData, getKPITitle } from '@/api/perfManage/goldTarget';
 import useI18n from '@/hooks/useI18n';
@@ -19,26 +16,160 @@ import { ColumnsType } from 'ant-design-vue/es/table';
 import { generateColorRGBA } from '@/utils/generate-utils';
 import { LineSeriesOption } from 'echarts/charts';
 import { OptionsType, WS } from '@/plugins/ws-websocket';
-import { Switch } from 'ant-design-vue';
-
+import { Select } from 'ant-design-vue';
 const { t, currentLocale } = useI18n();
+
 const neInfoStore = useNeInfoStore();
+
 //WebSocket连接
-//const ws = new WS();
 const ws = ref<WS | null>(null);

-//实时数据开关
-const handleRealTimeSwitch = (checked: any, event: Event) => {
-  console.log('Switch toggled:', checked);
-  fnRealTimeSwitch(!!checked);
-};
 //添加实时数据开关状态
 const realTimeEnabled = ref(false);
+//实时数据开关
+const handleRealTimeSwitch = (checked: any) => {
+  fnRealTimeSwitch(!!checked);
+};
+
+
+// 定义所有可能的网元类型
+const ALL_NE_TYPES = ['ims', 'amf', 'udm', 'smf', 'pcf','upf','mme','mocngw','smsc','cbc','ausf'] as const;
+type AllChartType = typeof ALL_NE_TYPES[number];
+
+// 使用 ref 来使 networkElementTypes 变为响应式，并使用 ALL_NE_TYPES 初始化
+const networkElementTypes = ref<AllChartType[]>([...ALL_NE_TYPES]);
+
+// 添加选择的网元类型，也使用 ALL_NE_TYPES 初始化
+const selectedNeTypes = ref<AllChartType[]>([...ALL_NE_TYPES]);
+
+// 监听 selectedNeTypes 的变化
+watch(selectedNeTypes, (newTypes) => {
+  //console.log('Selected types changed:', newTypes);
+  if (JSON.stringify(newTypes) !== JSON.stringify(networkElementTypes.value)) {
+    networkElementTypes.value = newTypes;
+
+    // 更新 chartOrder
+    chartOrder.value = chartOrder.value.filter(item => newTypes.includes(item.i));
+
+    newTypes.forEach((type) => {
+      if (!chartOrder.value.some(item => item.i === type)) {
+        chartOrder.value.push({
+          x: (chartOrder.value.length % 2) * 6,
+          y: Math.floor(chartOrder.value.length / 2) * 4,
+          w: 6,
+          h: 4,
+          i: type,
+        });
+      }
+      // 确保 chartStates 包含新的网元类型
+      if (!chartStates[type]) {
+        chartStates[type] = createChartState();
+      }
+    });
+
+    //console.log('Updated chartOrder:', chartOrder.value);
+
+    // 保存选中的网元类型到本地存储
+    localStorage.setItem('selectedNeTypes', JSON.stringify(newTypes));
+
+    // 重新初始化图表
+    nextTick(() => {
+      initCharts();
+    });
+  }
+}, { deep: true });
+
+// 初始化所有图表的函数
+const initCharts = async () => {
+  //console.log('Initializing charts for:', networkElementTypes.value);
+
+  // 清除不再需要的图表
+  Object.keys(chartStates).forEach((key) => {
+    if (!networkElementTypes.value.includes(key as AllChartType)) {
+      const state = chartStates[key as AllChartType];
+      if (state.chart.value) {
+        state.chart.value.dispose();
+      }
+      if (state.observer.value) {
+        state.observer.value.disconnect();
+      }
+      delete chartStates[key as AllChartType];
+    }
+  });
+
+  // 初始化或更新需要的图表
+  for (const type of networkElementTypes.value) {
+    //console.log('Initializing chart for:', type);
+    if (!chartStates[type]) {
+      chartStates[type] = createChartState();
+    }
+    try {
+      await fetchKPITitle(type);
+      await nextTick();
+      initChart(type);
+      await fetchData(type);
+    } catch (error) {
+      console.error(`Error initializing chart for ${type}:`, error);
+    }
+  }
+
+  //console.log('Finished initializing charts');
+
+  // 保存更新后的布局
+  localStorage.setItem('chartOrder', JSON.stringify(chartOrder.value));
+};
+
+// 添加类型定义
+interface LayoutItem {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+  i: AllChartType;  // 将 ChartType 改为 AllChartType
+}
+
+type Layout = LayoutItem[];

-// 定义图表类型
-type ChartType = 'udm' | 'upf' | 'amf' | 'smf';
 //构建响应式数组储存图表类型数据
-const chartOrder = ref(['udm', 'upf', 'amf', 'smf']);
+const chartOrder = ref<Layout>(
+  JSON.parse(localStorage.getItem('chartOrder') || 'null') ||
+  networkElementTypes.value.map((type, index) => ({
+    x: index % 2 * 6,  // 每行两个图表，宽度为6
+    y: Math.floor(index / 2) * 4,  // 每个图表占据 4 个单位高度
+    w: 6,  // 宽度为6单位
+    h: 4,  // 高度为4个单位
+    i: type,  // 使用网元类型作为唯一标识符
+  }))
+);
+
+// 改变布局触发更新
+const handleLayoutUpdated = (newLayout: Layout) => {
+  const filteredLayout = newLayout.filter(item => networkElementTypes.value.includes(item.i));
+  if (JSON.stringify(filteredLayout) !== JSON.stringify(chartOrder.value)) {
+    chartOrder.value = filteredLayout;
+    // 保存布局到 localStorage
+    localStorage.setItem('chartOrder', JSON.stringify(chartOrder.value));
+    nextTick(() => {
+      chartOrder.value.forEach((item) => {
+        const state = chartStates[item.i];
+        if (state?.chart.value) {
+          state.chart.value.resize();
+        }
+      });
+    });
+  }
+};
+
+// 监听 chartOrder 的变化
+watch(chartOrder, () => {
+  nextTick(() => {
+    Object.values(chartStates).forEach(state => {
+      if (state.chart.value) {
+        state.chart.value.resize();
+      }
+    });
+  });
+});

 // 定义表格状态类型
 type TableStateType = {
@@ -49,10 +180,17 @@ type TableStateType = {
  selectedRowKeys: (string | number)[];
 };

+
 // 创建可复用的状态
-const createChartState = () => ({
-  chartDom: ref<HTMLElement | null>(null),
-  chart: ref<echarts.ECharts | null>(null),
+const createChartState = () => {
+  const chartDom = ref<HTMLElement | null>(null);
+  const chart = ref<echarts.ECharts | null>(null);
+  const observer = ref<ResizeObserver | null>(null);
+
+  return {
+    chartDom,
+    chart,
+    observer,
    tableColumns: ref<ColumnsType>([]),
    tableState: reactive<TableStateType>({
      loading: false,
@@ -64,76 +202,71 @@ const createChartState = () => ({
    chartLegendSelected: {} as Record<string, boolean>,
    chartDataXAxisData: [] as string[],
    chartDataYSeriesData: [] as CustomSeriesOption[],
-});
-
-// 为每种图表类型创建状态
-const chartStates: Record<ChartType, ReturnType<typeof createChartState>> = {
-  udm: createChartState(),
-  upf: createChartState(),
-  amf: createChartState(),
-  smf: createChartState(),
+  };
 };

+// 为每种图表类型创建状
+const chartStates: Record<AllChartType, ReturnType<typeof createChartState>> = Object.fromEntries(
+  networkElementTypes.value.map(type => [type, createChartState()])
+) as Record<AllChartType, ReturnType<typeof createChartState>>;
+
 //日期选择器
-interface RangePicker {
-  udm: [string, string];
-  upf: [string, string];
-  amf: [string, string];
-  smf: [string, string];
+interface RangePicker extends Record<AllChartType, [string, string]> {
  placeholder: [string, string];
  ranges: Record<string, [Dayjs, Dayjs]>;
 }

 // 创建日期选择器状态
 const rangePicker = reactive<RangePicker>({
-  udm: [
-    dayjs('2024-09-20 00:00:00').valueOf().toString(),
-    dayjs('2024-09-20 23:59:59').valueOf().toString(),
-  ],
-  upf: [
-    dayjs('2024-09-20 00:00:00').valueOf().toString(),
-    dayjs('2024-09-20 23:59:59').valueOf().toString(),
-  ],
-  amf: [
-    dayjs('2024-09-20 00:00:00').valueOf().toString(),
-    dayjs('2024-09-20 23:59:59').valueOf().toString(),
-  ],
-  smf: [
-    dayjs('2024-09-20 00:00:00').valueOf().toString(),
-    dayjs('2024-09-20 23:59:59').valueOf().toString(),
-  ],
-  placeholder: [
-    t('views.monitor.monitor.startTime'),
-    t('views.monitor.monitor.endTime'),
-  ] as [string, string],
+  ...Object.fromEntries(networkElementTypes.value.map(type => [
+    type,
+    // [
+    //   dayjs('2024-09-20 00:00:00').valueOf().toString(),//拟数据的日期设2024.9.20
+    //   dayjs('2024-09-20 23:59:59').valueOf().toString()
+    // ]
+    [
+      dayjs().startOf('day').valueOf().toString(),  // 当天 0 点 0 分 0 秒
+      dayjs().valueOf().toString()  // 当前时间
+    ]
+  ])) as Record<AllChartType, [string, string]>,
+  placeholder: [t('views.monitor.monitor.startTime'), t('views.monitor.monitor.endTime')] as [string, string],
  ranges: {
-    [t('views.monitor.monitor.yesterday')]: [
-      dayjs().subtract(1, 'day').startOf('day'),
-      dayjs().subtract(1, 'day').endOf('day'),
-    ],
+    [t('views.monitor.monitor.yesterday')]: [dayjs().subtract(1, 'day').startOf('day'), dayjs().subtract(1, 'day').endOf('day')],
    [t('views.monitor.monitor.today')]: [dayjs().startOf('day'), dayjs()],
-    [t('views.monitor.monitor.week')]: [
-      dayjs().startOf('week'),
-      dayjs().endOf('week'),
-    ],
-    [t('views.monitor.monitor.month')]: [
-      dayjs().startOf('month'),
-      dayjs().endOf('month'),
-    ],
-  },
+    [t('views.monitor.monitor.week')]: [dayjs().startOf('week'), dayjs().endOf('week')],
+    [t('views.monitor.monitor.month')]: [dayjs().startOf('month'), dayjs().endOf('month')],
+  } as Record<string, [Dayjs, Dayjs]>,
 });

 // 创建可复用的图表初始化函数
-const initChart = (type: ChartType) => {
+const initChart = (type: AllChartType) => {
+  const tryInit = (retries = 3) => {
    nextTick(() => {
      const state = chartStates[type];
+      if (!state) {
+        console.warn(`Chart state for ${type} not found`);
+        return;
+      }
      const container = state.chartDom.value;
-    if (!container) return;
-    state.chart.value = markRaw(echarts.init(container, 'light'));
+      if (!container) {
+        if (retries > 0) {
+          console.warn(`Chart container for ${type} not found, retrying... (${retries} attempts left)`);
+          setTimeout(() => tryInit(retries - 1), 100);
+        } else {
+          console.error(`Chart container for ${type} not found after multiple attempts`);
+        }
+        return;
+      }
+
+      if (state.chart.value) {
+        state.chart.value.dispose();
+      }
+
+      state.chart.value = markRaw(echarts.init(container));
      const option: echarts.EChartsOption = {
        tooltip: {
          trigger: 'axis',
-        position: function (pt: any) {
+          position: function(pt: any) {
            return [pt[0], '10%'];
          },
        },
@@ -176,29 +309,36 @@ const initChart = (type: ChartType) => {
        series: [],
      };
      state.chart.value.setOption(option);
-  });
-};
-//结束拖拽事件
-const onDragEnd = () => {
-  nextTick(() => {
-    chartOrder.value.forEach(type => {
-      const state = chartStates[type as ChartType];
-      if (state.chart.value) {
-        state.chart.value.dispose(); // 销毁旧的图表实例
+      state.chart.value.resize();  // 确保图表正确调整大小
+
+      // 创建 ResizeObserver 实例
+      if (state.observer.value) {
+        state.observer.value.disconnect();
+      }
+      state.observer.value = new ResizeObserver(() => {
+        if (state.chart.value) {
+          state.chart.value.resize();
        }
-      initChart(type as ChartType);
-      fetchData(type as ChartType); // 重新获取数据并渲染图表
      });
+
+      // 开始观察图表容器
+      state.observer.value.observe(container);
    });
+  };
+
+  tryInit();
 };

-// 创建可复用的数据获取函数
-const fetchData = async (type: ChartType) => {
-  const state = chartStates[type];
+
+
+// 可复用的数据获函数
+const fetchData = async (type: AllChartType) => {
+  const state = chartStates[type];  // 直接使用 type
  const neId = '001';
  state.tableState.loading = true;
  try {
-    const [startTime, endTime] = rangePicker[type];
+    const dateRange = rangePicker[type] as [string, string];
+    const [startTime, endTime] = dateRange;
    const res = await listKPIData({
      neType: type.toUpperCase(),
      neId,
@@ -210,11 +350,12 @@ const fetchData = async (type: ChartType) => {
    });
    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
      state.tableState.data = res.data;
-      nextTick(() => {
+      await nextTick(() => {
        renderChart(type);
      });
    }
  } catch (error) {
+    console.log("123")
    console.error(error);
    message.error(t('common.getInfoFail'));
  } finally {
@@ -224,11 +365,11 @@ const fetchData = async (type: ChartType) => {

 //建立实时数据连接
 function fnRealTimeSwitch(bool: boolean) {
-  console.log('fnRealTimeSwitch called with:', bool);
+
  realTimeEnabled.value = bool;
  if (bool) {
-    if (!ws.value) {
-      console.log('Creating new WS instance');
+    if(!ws.value){
+
      ws.value = new WS();
    }
    Object.values(chartStates).forEach(state => {
@@ -238,21 +379,15 @@ function fnRealTimeSwitch(bool: boolean) {
    const options: OptionsType = {
      url: '/ws',
      params: {
-        subGroupID: Object.keys(chartStates)
-          .map(type => `10_${type.toUpperCase()}_001`)
-          .join(','),
+        subGroupID: networkElementTypes.value.map(type => `10_${type.toUpperCase()}_001`).join(','),
      },
      onmessage: wsMessage,
      onerror: wsError,
-      onopen: () => {
-        console.log('WebSocket connection established');
-      },
+
    };
-    console.log('Attempting to connect with options:', options);
    ws.value.connect(options);
-    console.log('Connection attempt initiated');
-  } else if (ws.value) {
-    console.log('Closing WebSocket connection');
+  } else if(ws.value){
+
    Object.values(chartStates).forEach(state => {
      state.tableState.seached = true;
    });
@@ -261,58 +396,61 @@ function fnRealTimeSwitch(bool: boolean) {
  }
 }

-// 接收数据后错误回调
-function wsError(ev: any) {
-  console.error('WebSocket error:', ev);
+// 接收数据后错误回
+function wsError() {
+
  message.error(t('common.websocketError'));
 }

-// 接收数据后回调
+// 修改 wsMessage 数
 function wsMessage(res: Record<string, any>) {
-  //const res = JSON.parse(event.data);
  const { code, data } = res;
  if (code === RESULT_CODE_ERROR) {
    console.warn(res.msg);
    return;
  }

-  // 订阅组信息
  if (!data?.groupId) {
    return;
  }

-  // 处理四个图表的数据
-  (Object.keys(chartStates) as ChartType[]).forEach(type => {
+  networkElementTypes.value.forEach((type) => {
    const state = chartStates[type];
-    const kpiEvent = data.data[type.toUpperCase()];
+    const kpiEvent:any = data.data[type.toUpperCase()];

    if (kpiEvent) {
-      // 更新 X 轴数据
      if (kpiEvent.timeGroup) {
-        state.chartDataXAxisData.push(parseDateToStr(+kpiEvent.timeGroup));
+        const newTime = parseDateToStr(+kpiEvent.timeGroup);
+        state.chartDataXAxisData.push(newTime);
        if (state.chartDataXAxisData.length > 100) {
          state.chartDataXAxisData.shift();
        }
-      }

-      // 更新 Y 轴数据
+        // 使用 appendData 方法追加数据
        state.chartDataYSeriesData.forEach(series => {
          if (kpiEvent[series.customKey as string] !== undefined) {
-          series.data.push(+kpiEvent[series.customKey as string]);
+            const newValue = +kpiEvent[series.customKey as string];
+            if (state.chart.value) {
+              state.chart.value.appendData({
+                seriesIndex: state.chartDataYSeriesData.indexOf(series),
+                data: [[newTime, newValue]]
+              });
+            }
+            // 保持数据长度不超过100
            if (series.data.length > 100) {
              series.data.shift();
            }
          }
        });

-      // 更新图表
+        // 更新 X 轴
        if (state.chart.value) {
          state.chart.value.setOption({
-          xAxis: { data: state.chartDataXAxisData },
-          series: state.chartDataYSeriesData,
+            xAxis: { data: state.chartDataXAxisData }
          });
        }
      }
+    }
  });
 }

@@ -325,26 +463,23 @@ interface CustomSeriesOption extends Omit<LineSeriesOption, 'data'> {
  data: (number | LineDataItem)[];
 }
 // 创建可复用的图表渲染函数
-const renderChart = (type: ChartType) => {
+const renderChart = (type: AllChartType) => {
  const state = chartStates[type];
-  if (state.chart.value == null || state.tableState.data.length <= 0) {
+  if (state.chart.value == null) {
    return;
  }
-
  // 重置数据
  state.chartLegendSelected = {};
  state.chartDataXAxisData = [];
  state.chartDataYSeriesData = [];

  // 处理数据
-  for (const columns of state.tableColumns.value) {
-    if (['neName', 'startIndex', 'timeGroup'].includes(columns.key as string))
-      continue;
+  for (const column of state.tableColumns.value) {
+    if (['neName', 'startIndex', 'timeGroup'].includes(column.key as string)) continue;
    const color = generateColorRGBA();
    state.chartDataYSeriesData.push({
-      name: columns.title as string,
-      customKey: columns.key as string,
-      //key: columns.key as string,
+      name: column.title as string,
+      customKey: column.key as string,
      type: 'line',
      symbol: 'none',
      sampling: 'lttb',
@@ -357,17 +492,14 @@ const renderChart = (type: ChartType) => {
      },
      data: [],
    } as CustomSeriesOption);
-    state.chartLegendSelected[columns.title as string] = true;
-    //});
-    //state.chartLegendSelected[columns.title as string] = true;
+    state.chartLegendSelected[column.title as string] = true;
  }

  const orgData = [...state.tableState.data].reverse();
  for (const item of orgData) {
    state.chartDataXAxisData.push(parseDateToStr(+item.timeGroup));
-    for (const y of state.chartDataYSeriesData) {
-      //const key = (y.emphasis as any).customKey;
-      y.data.push(+item[y.customKey as string]);
+    for (const series of state.chartDataYSeriesData) {
+      series.data.push(+item[series.customKey as string]);
    }
  }

@@ -375,7 +507,11 @@ const renderChart = (type: ChartType) => {
  state.chart.value.setOption(
    {
      legend: { selected: state.chartLegendSelected },
-      xAxis: { data: state.chartDataXAxisData },
+      xAxis: {
+        data: state.chartDataXAxisData,
+        type: 'category',
+        boundaryGap: false,
+      },
      series: state.chartDataYSeriesData,
      dataZoom: [
        {
@@ -393,14 +529,13 @@ const renderChart = (type: ChartType) => {
  );
 };

-// 获取表头数据
-const fetchKPITitle = async (type: ChartType) => {
-  const language =
-    currentLocale.value.split('_')[0] === 'zh'
-      ? 'cn'
-      : currentLocale.value.split('_')[0];
+
+// 获取头数据
+const fetchKPITitle = async (type: AllChartType) => {
+  const language = currentLocale.value.split('_')[0] === 'zh' ? 'cn' : currentLocale.value.split('_')[0];
  try {
    const res = await getKPITitle(type.toUpperCase());
+    console.log(res);
    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
      chartStates[type].tableColumns.value = res.data.map(item => ({
        title: item[`${language}Title`],
@@ -414,66 +549,144 @@ const fetchKPITitle = async (type: ChartType) => {
      }));
    }
  } catch (error) {
+    console.log("321")
    console.error(error);
    message.warning(t('common.getInfoFail'));
  }
 };

-// 初始化所有图表
+// 定义默认选择的网元类型
+const DEFAULT_NE_TYPES: AllChartType[] = ['udm', 'amf', 'upf', 'ims'];
+
+// 在 onMounted 钩子中
 onMounted(async () => {
  ws.value = new WS();
  await neInfoStore.fnNelist();
-  for (const type of Object.keys(chartStates) as ChartType[]) {
-    await fetchKPITitle(type);
-    initChart(type);
-    fetchData(type);
+
+  // 从本地存储中读取选中的网元类型
+  const savedSelectedNeTypes = localStorage.getItem('selectedNeTypes');
+  if (savedSelectedNeTypes) {
+    const parsedSelectedNeTypes = JSON.parse(savedSelectedNeTypes) as AllChartType[];
+    selectedNeTypes.value = parsedSelectedNeTypes;
+    networkElementTypes.value = parsedSelectedNeTypes;
+  } else {
+    // 如果没有保存的选中网元类型，则使用默认选择
+    selectedNeTypes.value = [...DEFAULT_NE_TYPES];
+    networkElementTypes.value = [...DEFAULT_NE_TYPES];
+    // 保存这个默认选择到本地存储
+    localStorage.setItem('selectedNeTypes', JSON.stringify(DEFAULT_NE_TYPES));
  }
+
+  // 初始化或更新 chartOrder
+  const savedLayout = localStorage.getItem('chartOrder');
+  if (savedLayout) {
+    const parsedLayout = JSON.parse(savedLayout);
+    // 只保留当前选中的网元类型的布局
+    chartOrder.value = parsedLayout.filter((item: LayoutItem) => networkElementTypes.value.includes(item.i));
+  }
+
+  // 如果 chartOrder 为空或者不包含所有选中的网元，重新创建布局
+  if (chartOrder.value.length === 0 || chartOrder.value.length !== networkElementTypes.value.length) {
+    chartOrder.value = networkElementTypes.value.map((type, index) => ({
+      x: index % 2 * 6,
+      y: Math.floor(index / 2) * 4,
+      w: 6,
+      h: 4,
+      i: type,
+    }));
+  }
+
+  //console.log('Initialized networkElementTypes:', networkElementTypes.value);
+  //console.log('Initialized chartOrder:', chartOrder.value);
+
+  await initCharts();
 });

 // 在组件卸载时销毁图表实例
 onUnmounted(() => {
-  if (ws.value && ws.value.state() === WebSocket.OPEN) {
+  if(ws.value &&ws.value.state()===WebSocket.OPEN) {
    ws.value.close();
  }
-  Object.values(chartStates).forEach(state => {
+  Object.values(chartStates).forEach((state) => {
    if (state.chart.value) {
      state.chart.value.dispose();
    }
+    if (state.observer.value) {
+      state.observer.value.disconnect();
+    }
  });
 });
 </script>

 <template>
  <PageContainer>
-    <div class="control-row">
-      <div class="real-time-switch">
-        <Switch
+    <a-card :bordered="false" class="control-card">
+      <a-form layout="inline">
+        <a-form-item>
+          <a-switch
            v-model:checked="realTimeEnabled"
-          @change="handleRealTimeSwitch as any"
+            @change="handleRealTimeSwitch"
          />
-        <span class="switch-label">{{
-          realTimeEnabled ? '实时数据已开启' : '实时数据已关闭'
-        }}</span>
-      </div>
-    </div>
-    <draggable
-      v-model="chartOrder"
-      :animation="200"
-      item-key="type"
-      @end="onDragEnd"
-      class="row"
-      onscroll="false"
+        </a-form-item>
+        <a-form-item>
+          <span class="switch-label">{{ realTimeEnabled ? t('views.dashboard.cdr.realTimeDataStart') : t('views.dashboard.cdr.realTimeDataStop') }}</span>
+        </a-form-item>
+        <a-form-item :label="t('views.ne.common.neType')" class="ne-type-select">
+          <a-select
+            v-model:value="selectedNeTypes"
+            mode="multiple"
+            style="min-width: 200px; width: 100%"
+            :placeholder="t('common.selectPlease')"
          >
-      <template #item="{ element: type }">
-        <div class="col-lg-6 col-md=-6 col-xs-12">
-          <a-card
-            :bordered="false"
-            :body-style="{ marginBottom: '24px', padding: '24px' }"
+            <a-select-option v-for="type in ALL_NE_TYPES" :key="type" :value="type">
+              {{ type.toUpperCase() }}
+            </a-select-option>
+          </a-select>
+        </a-form-item>
+      </a-form>
+    </a-card>
+
+    <GridLayout
+      v-model:layout="chartOrder"
+      :col-num="12"
+      :row-height="100"
+      :margin="[10, 10]"
+      :is-draggable="true"
+      :is-resizable="true"
+      :vertical-compact="true"
+      :use-css-transforms="true"
+      :responsive="true"
+      :prevent-collision="false"
+      @layout-updated="handleLayoutUpdated"
+      class="charts-container"
    >
-            <template #title>{{ type.toUpperCase() }}</template>
+      <GridItem
+        v-for="item in chartOrder.filter(i => networkElementTypes.includes(i.i))"
+        :key="item.i"
+        :x="item.x"
+        :y="item.y"
+        :w="item.w"
+        :h="item.h"
+        :i="item.i"
+        :min-w="4"
+        :min-h="3"
+        :is-draggable="true"
+        :is-resizable="true"
+        :resizable-handles="['ne']"
+        drag-allow-from=".drag-handle"
+        drag-ignore-from=".no-drag"
+        class="grid-item"
+      >
+        <div class="drag-handle">
+          <DragOutlined />
+        </div>
+        <a-card :bordered="false" class="card-container">
+          <template #title>
+            <span class="no-drag">{{ item.i.toUpperCase() }}</span>
+          </template>
          <template #extra>
            <a-range-picker
-                v-model:value="(rangePicker[type as keyof RangePicker]as[string,string])"
+              v-model:value="rangePicker[item.i]"
              :allow-clear="false"
              bordered
              :show-time="{ format: 'HH:mm:ss' }"
@@ -482,79 +695,106 @@ onUnmounted(() => {
              :placeholder="rangePicker.placeholder"
              :ranges="rangePicker.ranges"
              style="width: 100%"
-                @change="() => fetchData(type)"
+              @change="() => fetchData(item.i)"
            ></a-range-picker>
          </template>
-            <div class="chart" style="padding: 12px">
-              <div
-                :ref="el => { if (el) chartStates[type as ChartType].chartDom.value = el as HTMLElement }"
-                style="height: 400px; width: 100%"
-              ></div>
+          <div class='chart'>
+            <div :ref="el => { if (el && chartStates[item.i]) chartStates[item.i].chartDom.value = el as HTMLElement }"></div>
          </div>
        </a-card>
-        </div>
-      </template>
-    </draggable>
+      </GridItem>
+    </GridLayout>
  </PageContainer>
 </template>

 <style lang="less" scoped>
-.chart {
-  width: 100%;
-  height: 450px;
-}
-.sortable-ghost {
-  opacity: 0.5;
-  background: #c8ebfb;
-}
-
-.sortable-drag {
-  opacity: 0.8;
-  background: #f4f4f4;
-}
-.row {
-  display: flex;
-  flex-wrap: wrap;
-  margin-right: -12px;
-  margin-left: -12px;
-}
-.col-lg-6 {
-  flex: 0 0 50%;
-  max-width: 50%;
-  padding-right: 12px;
-  padding-left: 12px;
-}
-@media (max-width: 991px) {
-  .col-md-6 {
-    flex: 0 0 50%;
-    max-width: 50%;
-  }
-}
-@media (max-width: 575px) {
-  .col-xs-12 {
-    flex: 0 0 100%;
-    max-width: 100%;
-  }
-}
-.control-row {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  padding: 16px;
+.control-card {
  margin-bottom: 16px;
-  background-color: #f0f2f5;
-  border-radius: 4px;
 }

-.real-time-switch {
+.charts-container {
+  width: 100%;
+  min-height: 600px;
+}
+
+.grid-item {
+  overflow: visible;
+  position: relative;
+}
+
+.card-container {
+  height: 100%;
  display: flex;
-  align-items: center;
+  flex-direction: column;
+}
+
+.chart {
+  flex: 1;
+  min-height: 0;
+
+  > div {
+    width: 100%;
+    height: 100%;
+  }
 }

 .switch-label {
  margin-left: 8px;
  font-size: 14px;
-  color: #333;
+  color: rgba(0, 0, 0, 0.65);
  white-space: nowrap;
 }
+
+.drag-handle {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(24, 144, 255, 0.1);
+  border-radius: 4px;
+  cursor: move;
+  z-index: 100;
+  transition: background-color 0.3s;
+
+  &:hover {
+    background-color: rgba(24, 144, 255, 0.2);
+  }
+}
+
+.ne-type-select {
+  flex-grow: 1;
+  max-width: 100%;
+}
+
+:deep {
+  .ant-card-body {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    padding: 16px !important;
+    overflow: hidden;
+  }
+
+  .ant-form-item {
+    margin-bottom: 0;
+  }
+
+  .ant-form-item-label {
+    font-weight: 500;
+    color: rgba(0, 0, 0, 0.85);
+  }
+
+  .anticon {
+    font-size: 16px;
+    color: #1890ff;
+  }
+
+  .ant-select {
+    min-width: 200px;
+  }
+}
 </style>
--- a/src/views/system/log/login/index.vue
+++ b/src/views/system/log/login/index.vue
@@ -193,7 +193,6 @@ function fnTableSelectedRows(
  _: (string | number)[],
  rows: Record<string, string>[]
 ) {
-  //debugger
  tableState.selectedRowKeys = rows.map(item => item.loginId);
  // 针对单个登录账号解锁
  if (rows.length === 1) {
--- a/src/views/system/quick-start/components/NeInfoConfig.vue
+++ b/src/views/system/quick-start/components/NeInfoConfig.vue
@@ -139,7 +139,7 @@ let tableColumns: any = [
 * 测试主机连接
 */
 function fnHostTest(row: Record<string, any>) {
-  if (tabState.confirmLoading || !row.addr) return;
+  if (tabState.confirmLoading || !row.addr || !row.port) return;
  tabState.confirmLoading = true;
  const hide = message.loading(t('common.loading'), 0);
  testNeHost(row)
@@ -187,19 +187,19 @@ function fnHostAuthorized(row: Record<string, any>) {
 * 表单修改网元类型
 */
 function fnNeTypeChange(v: any, data: any) {
-  const hostsLen = data.hosts.length;
  // 网元默认只含22和4100
-  if (hostsLen === 3 && v !== 'UPF') {
-    data.hosts.pop();
+  if (modalState.from.hosts.length === 3) {
+    modalState.from.hosts.pop();
  }
+  const hostsLen = modalState.from.hosts.length;
  // UPF标准版本可支持5002
  if (hostsLen === 2 && v === 'UPF') {
-    data.hosts.push({
+    modalState.from.hosts.push({
      hostId: undefined,
      hostType: 'telnet',
      groupId: '1',
      title: 'Telnet_NE_5002',
-      addr: '',
+      addr: modalState.from.ip,
      port: 5002,
      user: 'admin',
      authMode: '0',
@@ -207,6 +207,22 @@ function fnNeTypeChange(v: any, data: any) {
      remark: '',
    });
  }
+  // UDM可支持6379
+  if (hostsLen === 2 && v === 'UDM') {
+    modalState.from.hosts.push({
+      hostId: undefined,
+      hostType: 'redis',
+      groupId: '1',
+      title: 'REDIS_NE_6379',
+      addr: modalState.from.ip,
+      port: 6379,
+      user: 'udmdb',
+      authMode: '0',
+      password: 'helloearth',
+      dbName: '0',
+      remark: '',
+    });
+  }
 }

 //打开新增或修改界面
--- a/src/views/system/setting/components/change-home-index.vue
+++ b/src/views/system/setting/components/change-home-index.vue
@@ -1,14 +1,11 @@
 <script lang="ts" setup>
 import { Modal, message } from 'ant-design-vue/lib';
 import { onMounted, reactive, toRaw } from 'vue';
-import useAppStore from '@/store/modules/app';
 import useI18n from '@/hooks/useI18n';
 import { listMenu } from '@/api/system/menu';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
-import { getConfig, getConfigKey, changeValue } from '@/api/system/config';
-
-const appStore = useAppStore();
-const { t, optionsLocale } = useI18n();
+import { getConfigKey, changeValue } from '@/api/system/config';
+const { t } = useI18n();

 type StateType = {
  edite: boolean;
--- a/src/views/system/setting/index.vue
+++ b/src/views/system/setting/index.vue
@@ -51,7 +51,7 @@ const { t } = useI18n();
        <ChangeI18n></ChangeI18n>
      </div>
      <a-divider orientation="left">
-        {{t('views.system.setting.homeSet') }}
+        {{ t('views.system.setting.homeSet') }}
      </a-divider>
      <ChangeHome></ChangeHome>
      <a-divider orientation="left">
--- a/src/views/tool/iperf/index.vue
+++ b/src/views/tool/iperf/index.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
 import { reactive, onMounted, onBeforeUnmount, ref } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { message } from 'ant-design-vue/lib';
+import { message, Modal } from 'ant-design-vue/lib';
 import useI18n from '@/hooks/useI18n';
-import { OptionsType, WS } from '@/plugins/ws-websocket';
 import {
  RESULT_CODE_ERROR,
  RESULT_CODE_SUCCESS,
 } from '@/constants/result-constants';
+import TerminalSSHView from '@/components/TerminalSSHView/index.vue';
 import useNeInfoStore from '@/store/modules/neinfo';
+import { iperfI, iperfV } from '@/api/tool/iperf';
 const neInfoStore = useNeInfoStore();
 const { t } = useI18n();
-const ws = new WS();

 /**网元参数 */
 let neCascaderOptions = ref<Record<string, any>[]>([]);
@@ -20,68 +20,155 @@ let neCascaderOptions = ref<Record<string, any>[]>([]);
 let state = reactive({
  /**初始化 */
  initialized: false,
+  /**运行中 */
+  running: false,
+  /**版本信息 */
+  versionInfo: [],
  /**网元类型 */
  neType: [],
  /**数据类型 */
  dataType: 'options' as 'options' | 'command',
  /**ws参数 */
  params: {
-    neType: 'AMF',
-    neId: '001',
+    neType: '',
+    neId: '',
    cols: 120,
    rows: 40,
  },
  /**ws数据 */
  data: {
    command: '', // 命令字符串
-    desAddr: 'www.baidu.com', // dns name or ip address
-    // Options
-    interval: 1, //  seconds between sending each packet
-    ttl: 255, // define time to live
-    count: 4, // <count> 次回复后停止
-    size: 56, // 使用 <size> 作为要发送的数据字节数
-    timeout: 2, //  seconds time to wait for response
+    client: true, // 服务端或客户端，默认服务端
+    // Server or Client
+    port: 5201, // 服务端口
+    interval: 1, // 每次报告之间的时间间隔，单位为秒
+    // Server
+    oneOff: false, // 只进行一次连接
+    // Client
+    host: '', // 客户端连接到的服务端IP地址
+    udp: false, // use UDP rather than TCP
+    time: 10, // 以秒为单位的传输时间（默认为 10 秒）
+    reverse: false, // 以反向模式运行（服务器发送，客户端接收）
+    window: '300k', // 设置窗口大小/套接字缓冲区大小
  },
 });

-/**接收数据后回调（成功） */
-function wsMessage(res: Record<string, any>) {
+/**连接发送 */
+async function fnIPerf3() {
+  const [neType, neId] = state.neType;
+  if (!neType || !neId) {
+    message.warning({
+      content: 'No Found NE Type',
+      duration: 2,
+    });
+    return;
+  }
+  if (state.dataType === 'options' && state.data.host === '') {
+    message.warning({
+      content: 'Please fill in the Host',
+      duration: 2,
+    });
+    return;
+  }
+  if (state.dataType === 'command' && state.data.command === '') {
+    message.warning({
+      content: 'Please fill in the Command',
+      duration: 2,
+    });
+    return;
+  }
+  if (state.initialized) {
+    fnResend();
+    return;
+  }
+
+  state.params.neType = neType;
+  state.params.neId = neId;
+  const resVersion = await iperfV({ neType, neId });
+  if (resVersion.code !== RESULT_CODE_SUCCESS) {
+    Modal.confirm({
+      title: t('common.tipTitle'),
+      content: 'Not found if iperf is installed',
+      onOk: () => fnInstall(),
+    });
+    return;
+  } else {
+    state.versionInfo = resVersion.data;
+  }
+  state.initialized = true;
+}
+
+/**触发安装iperf3 */
+function fnInstall() {
+  const key = 'iperfI';
+  message.loading({ content: t('common.loading'), key });
+  const { neType, neId } = state.params;
+  iperfI({ neType, neId }).then(res => {
+    if (res.code === RESULT_CODE_SUCCESS) {
+      message.success({
+        content: 'install success',
+        key,
+        duration: 2,
+      });
+    } else {
+      message.error({
+        content: 'install fail',
+        key,
+        duration: 2,
+      });
+    }
+  });
+}
+
+/**终端实例 */
+const toolTerminal = ref();
+
+/**重置并停止 */
+function fnReset() {
+  if (!toolTerminal.value) return;
+  toolTerminal.value.ctrlC();
+  // toolTerminal.value.clear();
+  state.running = false;
+}
+
+/**重载发送 */
+function fnResend() {
+  if (!toolTerminal.value) return;
+  state.running = true;
+  toolTerminal.value.ctrlC();
+  toolTerminal.value.clear();
+  setTimeout(() => {
+    const data = JSON.parse(JSON.stringify(state.data));
+    if (state.dataType === 'options') data.command = '';
+    toolTerminal.value.send('iperf3', data);
+  }, 1000);
+}
+
+/**终端初始连接*/
+function fnConnect() {
+  fnResend();
+}
+
+/**终端消息监听*/
+function fnMessage(res: Record<string, any>) {
  const { code, requestId, data } = res;
  if (code === RESULT_CODE_ERROR) {
    console.warn(res.msg);
    return;
  }
-
-  // 建联时发送请求
-  if (!requestId && data.clientId) {
-    state.initialized = true;
+  if (!requestId) return;
+  let lestIndex = data.lastIndexOf('unable to');
+  if (lestIndex !== -1) {
+    state.running = false;
    return;
  }
-
-  // 收到消息数据
-  if (requestId.startsWith('ping_')) {
-    console.log(data);
+  lestIndex = data.lastIndexOf('iperf Done.');
+  if (lestIndex !== -1) {
+    state.running = false;
+    return;
  }
 }

-/**连接到ws*/
-function fnConnect(reLink: boolean) {
-  if (reLink) {
-    ws.close();
-  }
-  const options: OptionsType = {
-    url: '/tool/ping/run',
-    params: state.params,
-    onmessage: wsMessage,
-    onerror: (ev: any) => {
-      // 接收数据后回调
-      console.error(ev);
-    },
-  };
-  //建立连接
-  ws.connect(options);
-}
-
 /**钩子函数，界面打开初始化*/
 onMounted(() => {
  // 获取网元网元列表
@@ -111,9 +198,7 @@ onMounted(() => {
 });

 /**钩子函数，界面关闭*/
-onBeforeUnmount(() => {
-  if (ws.state() === WebSocket.OPEN) ws.close();
-});
+onBeforeUnmount(() => {});
 </script>

 <template>
@@ -122,29 +207,224 @@ onBeforeUnmount(() => {
      <!-- 插槽-卡片左侧侧 -->
      <template #title>
        <a-space :size="8">
+          <span>
+            {{ t('views.ne.common.neType') }}:
            <a-cascader
              v-model:value="state.neType"
              :options="neCascaderOptions"
              :placeholder="t('common.selectPlease')"
+              :disabled="state.running"
            />
-          <a-radio-group v-model:value="state.dataType" button-style="solid">
+          </span>
+          <a-radio-group
+            v-model:value="state.dataType"
+            button-style="solid"
+            :disabled="state.running"
+          >
            <a-radio-button value="options">Options</a-radio-button>
-            <a-radio-button value="commandb">Command</a-radio-button> 
+            <a-radio-button value="command">Command</a-radio-button>
          </a-radio-group>
-          <a-button @click.prevent="fnConnect(false)">
-            <template #icon><PlayCircleOutlined /></template>
-            Connect {{ state.initialized }}
-          </a-button>
        </a-space>
      </template>

-      <!-- 表格列表 -->
-      <a-table
-        :columns="[]"
-        :data-source="[]"
-        :pagination="false"
-        :loading="false"
+      <!-- 插槽-卡片右侧 -->
+      <template #extra>
+        <a-space :size="8">
+          <a-button
+            @click.prevent="fnIPerf3()"
+            type="primary"
+            :loading="state.running"
+          >
+            <template #icon><PlayCircleOutlined /></template>
+            {{ state.running ? 'Running' : 'Launch' }}
+          </a-button>
+          <a-button v-if="state.running" @click.prevent="fnReset()" danger>
+            <template #icon><CloseCircleOutlined /></template>
+            Stop
+          </a-button>
+          <!-- 版本信息 -->
+          <a-popover
+            trigger="click"
+            placement="bottomRight"
+            v-if="state.versionInfo.length > 0"
+          >
+            <template #content>
+              <div v-for="v in state.versionInfo">{{ v }}</div>
+            </template>
+            <InfoCircleOutlined />
+          </a-popover>
+        </a-space>
+      </template>
+
+      <!-- options -->
+      <a-form
+        v-if="state.dataType === 'options'"
+        :model="state.data"
+        name="queryParams"
+        layout="horizontal"
+        :label-col="{ span: 6 }"
+        :label-wrap="true"
+        style="padding: 12px"
+      >
+        <a-divider orientation="left">Server or Client</a-divider>
+        <a-row>
+          <a-col :lg="6" :md="6" :xs="12">
+            <a-form-item label="Port" name="port">
+              <a-input-number
+                v-model:value="state.data.port"
+                :disabled="state.running"
+                allow-clear
+                :placeholder="t('common.inputPlease')"
+                style="width: 100%"
+                :min="1024"
+                :max="65535"
+              ></a-input-number> </a-form-item
+          ></a-col>
+          <a-col :lg="6" :md="6" :xs="12">
+            <a-form-item label="Interval" name="interval">
+              <a-input-number
+                v-model:value="state.data.interval"
+                :disabled="state.running"
+                allow-clear
+                :placeholder="t('common.inputPlease')"
+                style="width: 100%"
+                :min="1"
+                :max="30"
+              ></a-input-number>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-divider orientation="left">
+          <a-radio-group
+            v-model:value="state.data.client"
+            :disabled="state.running"
+          >
+            <a-radio :value="true">Client</a-radio>
+            <a-radio :value="false">Server</a-radio>
+          </a-radio-group>
+        </a-divider>
+        <template v-if="state.data.client">
+          <a-form-item
+            label="Host"
+            name="host"
+            help="run in client mode, connecting to <host>"
+            :label-col="{ span: 3 }"
+            :label-wrap="true"
+          >
+            <a-input
+              v-model:value="state.data.host"
+              :disabled="state.running"
+              allow-clear
+              :placeholder="t('common.inputPlease')"
+              style="width: 100%"
+            >
+            </a-input>
+          </a-form-item>
+          <a-row :gutter="16">
+            <a-col :lg="12" :md="12" :xs="12">
+              <a-form-item
+                label="UDP"
+                name="udp"
+                help="use UDP rather than TCP"
+              >
+                <a-switch
+                  v-model:checked="state.data.udp"
+                  :disabled="state.running"
                />
+              </a-form-item>
+            </a-col>
+            <a-col :lg="12" :md="12" :xs="12">
+              <a-form-item
+                label="Reverse"
+                name="reverse"
+                help="run in reverse mode (server sends, client receives)"
+              >
+                <a-switch
+                  v-model:checked="state.data.reverse"
+                  :disabled="state.running"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :lg="12" :md="12" :xs="12">
+              <a-form-item
+                label="Time"
+                name="time"
+                help="time in seconds to transmit for (default 10 secs)"
+              >
+                <a-input-number
+                  v-model:value="state.data.time"
+                  :disabled="state.running"
+                  allow-clear
+                  :placeholder="t('common.inputPlease')"
+                  style="width: 100%"
+                  :min="1"
+                  :max="60"
+                ></a-input-number>
+              </a-form-item>
+            </a-col>
+            <a-col :lg="12" :md="12" :xs="12">
+              <a-form-item
+                label="Window"
+                name="window"
+                help="set window size / socket buffer size"
+              >
+                <a-input
+                  v-model:value="state.data.window"
+                  :disabled="state.running"
+                  allow-clear
+                  :placeholder="t('common.inputPlease')"
+                  style="width: 100%"
+                ></a-input>
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </template>
+        <a-row :gutter="16" v-else>
+          <a-col :lg="12" :md="12" :xs="12">
+            <a-form-item
+              label="OneOff"
+              name="oneOff"
+              help=" handle one client connection then exit"
+            >
+              <a-switch
+                v-model:checked="state.data.oneOff"
+                :disabled="state.running"
+              />
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+
+      <!-- command -->
+      <div v-else style="padding: 12px">
+        <a-auto-complete
+          v-model:value="state.data.command"
+          :disabled="state.running"
+          :dropdown-match-select-width="500"
+          style="width: 100%"
+        >
+          <a-input
+            addon-before="iperf3"
+            placeholder="Client: -c 172.5.16.100 -p 5201 or Server: -s -p 5201"
+          />
+        </a-auto-complete>
+      </div>
+
+      <!-- 运行过程 -->
+      <TerminalSSHView
+        v-if="state.initialized"
+        ref="toolTerminal"
+        :id="`V${Date.now()}`"
+        prefix="iperf3"
+        url="/tool/iperf/run"
+        :ne-type="state.params.neType"
+        :ne-id="state.params.neId"
+        :rows="state.params.rows"
+        :cols="state.params.cols"
+        style="height: 400px"
+        @connect="fnConnect"
+        @message="fnMessage"
+      ></TerminalSSHView>
    </a-card>
  </PageContainer>
 </template>
--- a/src/views/tool/ping/index.vue
+++ b/src/views/tool/ping/index.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import { reactive, onMounted, onBeforeUnmount, ref } from 'vue';
+import { reactive, onMounted, onBeforeUnmount, ref, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
 import { message } from 'ant-design-vue/lib';
 import useI18n from '@/hooks/useI18n';
-import { OptionsType, WS } from '@/plugins/ws-websocket';
 import {
  RESULT_CODE_ERROR,
  RESULT_CODE_SUCCESS,
 } from '@/constants/result-constants';
+import TerminalSSHView from '@/components/TerminalSSHView/index.vue';
 import useNeInfoStore from '@/store/modules/neinfo';
+import { pingV } from '@/api/tool/ping';
 const neInfoStore = useNeInfoStore();
 const { t } = useI18n();
-const ws = new WS();

 /**网元参数 */
 let neCascaderOptions = ref<Record<string, any>[]>([]);
@@ -20,68 +20,127 @@ let neCascaderOptions = ref<Record<string, any>[]>([]);
 let state = reactive({
  /**初始化 */
  initialized: false,
+  /**运行中 */
+  running: false,
+  /**版本信息 */
+  versionInfo: '',
  /**网元类型 */
  neType: [],
  /**数据类型 */
  dataType: 'options' as 'options' | 'command',
  /**ws参数 */
  params: {
-    neType: 'AMF',
-    neId: '001',
+    neType: '',
+    neId: '',
    cols: 120,
    rows: 40,
  },
  /**ws数据 */
  data: {
    command: '', // 命令字符串
-    desAddr: 'www.baidu.com', // dns name or ip address
+    desAddr: '8.8.8.8', // dns name or ip address
    // Options
    interval: 1, //  seconds between sending each packet
    ttl: 255, // define time to live
    count: 4, // <count> 次回复后停止
    size: 56, // 使用 <size> 作为要发送的数据字节数
-    timeout: 2, //  seconds time to wait for response
+    timeout: 10, //  seconds time to wait for response
  },
 });

-/**接收数据后回调（成功） */
-function wsMessage(res: Record<string, any>) {
+/**连接发送 */
+async function fnPing() {
+  const [neType, neId] = state.neType;
+  if (!neType || !neId) {
+    message.warning({
+      content: 'No Found NE Type',
+      duration: 2,
+    });
+    return;
+  }
+  if (state.dataType === 'options' && state.data.desAddr === '') {
+    message.warning({
+      content: 'Please fill in the Destination',
+      duration: 2,
+    });
+    return;
+  }
+  if (state.dataType === 'command' && state.data.command === '') {
+    message.warning({
+      content: 'Please fill in the Command',
+      duration: 2,
+    });
+    return;
+  }
+  if (state.initialized) {
+    fnResend();
+    return;
+  }
+
+  state.params.neType = neType;
+  state.params.neId = neId;
+  const resVersion = await pingV({ neType, neId });
+  if (resVersion.code !== RESULT_CODE_SUCCESS) {
+    message.warning({
+      content: 'No Found ping iputils',
+      duration: 2,
+    });
+    return;
+  } else {
+    state.versionInfo = resVersion.data;
+  }
+  state.initialized = true;
+}
+
+/**终端实例 */
+const toolTerminal = ref();
+
+/**重置并停止 */
+function fnReset() {
+  if (!toolTerminal.value) return;
+  toolTerminal.value.ctrlC();
+  // toolTerminal.value.clear();
+  state.running = false;
+}
+
+/**重载发送 */
+function fnResend() {
+  if (!toolTerminal.value) return;
+  state.running = true;
+  toolTerminal.value.ctrlC();
+  toolTerminal.value.clear();
+  setTimeout(() => {
+    const data = JSON.parse(JSON.stringify(state.data));
+    if (state.dataType === 'options') data.command = '';
+    toolTerminal.value.send('ping', data);
+  }, 1000);
+}
+
+/**终端初始连接*/
+function fnConnect() {
+  fnResend();
+}
+
+/**终端消息监听*/
+function fnMessage(res: Record<string, any>) {
  const { code, requestId, data } = res;
  if (code === RESULT_CODE_ERROR) {
    console.warn(res.msg);
    return;
  }
-
-  // 建联时发送请求
-  if (!requestId && data.clientId) {
-    state.initialized = true;
+  if (!requestId) return;
+  let lestIndex = data.lastIndexOf('ping statistics ---');
+  if (lestIndex !== -1) {
+    state.running = false;
    return;
  }
-
-  // 收到消息数据
-  if (requestId.startsWith('ping_')) {
-    console.log(data);
+  lestIndex = data.lastIndexOf('failure');
+  if (lestIndex !== -1) {
+    state.running = false;
+    return;
  }
 }

-/**连接到ws*/
-function fnConnect(reLink: boolean) {
-  if (reLink) {
-    ws.close();
-  }
-  const options: OptionsType = {
-    url: '/tool/ping/run',
-    params: state.params,
-    onmessage: wsMessage,
-    onerror: (ev: any) => {
-      // 接收数据后回调
-      console.error(ev);
-    },
-  };
-  //建立连接
-  ws.connect(options);
-}
-
 /**钩子函数，界面打开初始化*/
 onMounted(() => {
  // 获取网元网元列表
@@ -111,9 +170,7 @@ onMounted(() => {
 });

 /**钩子函数，界面关闭*/
-onBeforeUnmount(() => {
-  if (ws.state() === WebSocket.OPEN) ws.close();
-});
+onBeforeUnmount(() => {});
 </script>

 <template>
@@ -122,29 +179,194 @@ onBeforeUnmount(() => {
      <!-- 插槽-卡片左侧侧 -->
      <template #title>
        <a-space :size="8">
+          <span>
+            {{ t('views.ne.common.neType') }}:
            <a-cascader
              v-model:value="state.neType"
              :options="neCascaderOptions"
              :placeholder="t('common.selectPlease')"
+              :disabled="state.running"
            />
-          <a-radio-group v-model:value="state.dataType" button-style="solid">
+          </span>
+          <a-radio-group
+            v-model:value="state.dataType"
+            button-style="solid"
+            :disabled="state.running"
+          >
            <a-radio-button value="options">Options</a-radio-button>
-            <a-radio-button value="commandb">Command</a-radio-button> 
+            <a-radio-button value="command">Command</a-radio-button>
          </a-radio-group>
-          <a-button @click.prevent="fnConnect(false)">
-            <template #icon><PlayCircleOutlined /></template>
-            Connect {{ state.initialized }}
-          </a-button>
        </a-space>
      </template>

-      <!-- 表格列表 -->
-      <a-table
-        :columns="[]"
-        :data-source="[]"
-        :pagination="false"
-        :loading="false"
-      />
+      <!-- 插槽-卡片右侧 -->
+      <template #extra>
+        <a-space :size="8">
+          <a-button
+            @click.prevent="fnPing()"
+            type="primary"
+            :loading="state.running"
+          >
+            <template #icon><PlayCircleOutlined /></template>
+            {{ state.running ? 'Running' : 'Launch' }}
+          </a-button>
+          <a-button v-if="state.running" @click.prevent="fnReset()" danger>
+            <template #icon><CloseCircleOutlined /></template>
+            Stop
+          </a-button>
+          <!-- 版本信息 -->
+          <a-popover
+            trigger="click"
+            placement="bottomRight"
+            v-if="state.versionInfo"
+          >
+            <template #content>
+              {{ state.versionInfo }}
+            </template>
+            <InfoCircleOutlined />
+          </a-popover>
+        </a-space>
+      </template>
+
+      <!-- options -->
+      <a-form
+        v-if="state.dataType === 'options'"
+        :model="state.data"
+        name="queryParams"
+        layout="horizontal"
+        :label-col="{ span: 6 }"
+        :label-wrap="true"
+        style="padding: 12px"
+      >
+        <a-form-item
+          label="Destination"
+          name="desAddr"
+          help="dns name or ip address"
+          :label-col="{ span: 3 }"
+          :label-wrap="true"
+        >
+          <a-input
+            v-model:value="state.data.desAddr"
+            :disabled="state.running"
+            allow-clear
+            :placeholder="t('common.inputPlease')"
+            style="width: 100%"
+          >
+          </a-input>
+        </a-form-item>
+        <a-row :gutter="16">
+          <a-col :lg="12" :md="12" :xs="12">
+            <a-form-item
+              label="Interval"
+              name="Interval"
+              help="seconds between sending each packet"
+            >
+              <a-input-number
+                v-model:value="state.data.interval"
+                :disabled="state.running"
+                allow-clear
+                :placeholder="t('common.inputPlease')"
+                style="width: 100%"
+                :min="1"
+                :max="120"
+              >
+              </a-input-number>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="12" :md="12" :xs="12">
+            <a-form-item label="TTL" name="ttl" help="define time to live">
+              <a-input-number
+                v-model:value="state.data.ttl"
+                :disabled="state.running"
+                allow-clear
+                :placeholder="t('common.inputPlease')"
+                style="width: 100%"
+                :min="1"
+                :max="255"
+              ></a-input-number>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="12" :md="12" :xs="12">
+            <a-form-item
+              label="Count"
+              name="count"
+              help="stop after <count> replies"
+            >
+              <a-input-number
+                v-model:value="state.data.count"
+                :disabled="state.running"
+                allow-clear
+                :placeholder="t('common.inputPlease')"
+                style="width: 100%"
+                :min="1"
+                :max="120"
+              ></a-input-number>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="12" :md="12" :xs="12">
+            <a-form-item
+              label="Size"
+              name="size"
+              help="use <size> as number of data bytes to be sent"
+            >
+              <a-input-number
+                v-model:value="state.data.size"
+                :disabled="state.running"
+                allow-clear
+                :placeholder="t('common.inputPlease')"
+                style="width: 100%"
+                :min="1"
+                :max="128"
+              ></a-input-number>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="12" :md="12" :xs="12">
+            <a-form-item
+              label="Deadline"
+              name="timeout"
+              help="reply wait <deadline> in seconds"
+            >
+              <a-input-number
+                v-model:value="state.data.timeout"
+                :disabled="state.running"
+                allow-clear
+                :placeholder="t('common.inputPlease')"
+                style="width: 100%"
+                :min="1"
+                :max="60"
+              ></a-input-number>
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+
+      <!-- command -->
+      <div v-else style="padding: 12px">
+        <a-auto-complete
+          v-model:value="state.data.command"
+          :disabled="state.running"
+          :dropdown-match-select-width="500"
+          style="width: 100%"
+        >
+          <a-input addon-before="ping" placeholder="eg: -i 1 -c 4 8.8.8.8" />
+        </a-auto-complete>
+      </div>
+
+      <!-- 运行过程 -->
+      <TerminalSSHView
+        v-if="state.initialized"
+        ref="toolTerminal"
+        :id="`V${Date.now()}`"
+        prefix="ping"
+        url="/tool/ping/run"
+        :ne-type="state.params.neType"
+        :ne-id="state.params.neId"
+        :rows="state.params.rows"
+        :cols="state.params.cols"
+        style="height: 400px"
+        @connect="fnConnect"
+        @message="fnMessage"
+      ></TerminalSSHView>
    </a-card>
  </PageContainer>
 </template>
--- a/src/views/traceManage/pcap/file.vue
+++ b/src/views/traceManage/pcap/file.vue
@@ -7,6 +7,7 @@ import { Modal, message } from 'ant-design-vue/lib';
 import { parseDateToStr } from '@/utils/date-utils';
 import { getNeFile, listNeFiles } from '@/api/tool/neFile';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import ViewDrawer from '@/views/logManage/neFile/components/ViewDrawer.vue';
 import useNeInfoStore from '@/store/modules/neinfo';
 import useTabsStore from '@/store/modules/tabs';
 import useI18n from '@/hooks/useI18n';
@@ -218,16 +219,18 @@ function fnDirCD(dir: string, index?: number) {

 /**网元类型选择对应修改 */
 function fnNeChange(keys: any, _: any) {
-  // 不是同类型时需要重新加载
-  if (Array.isArray(keys) && queryParams.neType !== keys[0]) {
+  if (!Array.isArray(keys)) return;
  const neType = keys[0];
+  const neId = keys[1];
+  // 不是同类型时需要重新加载
+  if (queryParams.neType !== neType || queryParams.neId !== neId) {
    queryParams.neType = neType;
-    queryParams.neId = keys[1];
+    queryParams.neId = neId;
    if (neType === 'UPF' && tmp.value) {
      nePathArr.value = ['/tmp'];
-      queryParams.search = `${neType}_${keys[1]}`;
+      queryParams.search = `${neType}_${neId}`;
    } else {
-      nePathArr.value = [`/tmp/omc/tcpdump/${neType.toLowerCase()}/${keys[1]}`];
+      nePathArr.value = [`/tmp/omc/tcpdump/${neType.toLowerCase()}/${neId}`];
      queryParams.search = '';
    }
    fnGetList(1);
@@ -270,6 +273,25 @@ function fnGetList(pageNum?: number) {
  });
 }

+/**抽屉状态 */
+const viewDrawerState = reactive({
+  visible: false,
+  /**文件路径 /var/log/amf.log */
+  filePath: '',
+  /**网元类型 */
+  neType: '',
+  /**网元ID */
+  neId: '',
+});
+
+/**打开抽屉查看 */
+function fnDrawerOpen(row: Record<string, any>) {
+  viewDrawerState.filePath = [...nePathArr.value, row.fileName].join('/');
+  viewDrawerState.neType = neTypeSelect.value[0];
+  viewDrawerState.neId = neTypeSelect.value[1];
+  viewDrawerState.visible = !viewDrawerState.visible;
+}
+
 onMounted(() => {
  // 获取网元网元列表
  neInfoStore.fnNelist().then(res => {
@@ -375,6 +397,16 @@ onMounted(() => {
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'fileName'">
            <a-space :size="8" align="center">
+              <a-tooltip
+                v-if="
+                  record.fileType === 'file' && record.fileName.endsWith('.log')
+                "
+              >
+                <template #title>{{ t('common.viewText') }}</template>
+                <a-button type="link" @click.prevent="fnDrawerOpen(record)">
+                  <template #icon><ProfileOutlined /></template>
+                </a-button>
+              </a-tooltip>
              <a-button
                type="link"
                :loading="downLoading"
@@ -398,6 +430,14 @@ onMounted(() => {
        </template>
      </a-table>
    </a-card>
+
+    <!-- 文件内容查看抽屉 -->
+    <ViewDrawer
+      v-model:visible="viewDrawerState.visible"
+      :file-path="viewDrawerState.filePath"
+      :ne-type="viewDrawerState.neType"
+      :ne-id="viewDrawerState.neId"
+    ></ViewDrawer>
  </PageContainer>
 </template>

--- a/src/views/traceManage/pcap/index.vue
+++ b/src/views/traceManage/pcap/index.vue
@@ -4,9 +4,9 @@ import { useRoute, useRouter } from 'vue-router';
 import { message, Modal } from 'ant-design-vue/lib';
 import { ColumnsType } from 'ant-design-vue/lib/table';
 import { PageContainer } from 'antdv-pro-layout';
-import { dumpStart, dumpStop, dumpDownload, traceUPF } from '@/api/trace/pcap';
+import { dumpStart, dumpStop, traceUPF } from '@/api/trace/pcap';
 import { listAllNeInfo } from '@/api/ne/neInfo';
-import { getNeFile } from '@/api/tool/neFile';
+import { getNeDirZip, getNeFile, getNeViewFile } from '@/api/tool/neFile';
 import saveAs from 'file-saver';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import useI18n from '@/hooks/useI18n';
@@ -31,7 +31,7 @@ type ModalStateType = {
      /**任务编号 */
      taskCode: string;
      /**任务日志,upf标准版为空字符串 */
-      logMsg: string;
+      taskFiles: string[];
      /**提交表单参数 */
      data: {
        neType: string;
@@ -65,7 +65,14 @@ type ModalStateType = {
  /**详情框是否显示 */
  visibleByView: boolean;
  /**详情框内容 */
-  logMsg: string;
+  viewFrom: {
+    neType: string;
+    neId: string;
+    path: string;
+    action: string;
+    files: string[];
+    content: string;
+  };
 };

 /**对话框对象信息状态 */
@@ -106,7 +113,14 @@ let modalState: ModalStateType = reactive({
    },
  ],
  visibleByView: false,
-  logMsg: '',
+  viewFrom: {
+    neType: '',
+    neId: '',
+    path: '',
+    action: '',
+    files: [],
+    content: '',
+  },
 });

 /**表格状态类型 */
@@ -194,7 +208,7 @@ function fnGetList() {
            cmdStart: start,
            cmdStop: stop,
            taskCode: '',
-            logMsg: '',
+            taskFiles: [],
            data: {
              neType: item.neType,
              neId: item.neId,
@@ -218,7 +232,7 @@ function fnSelectCmd(id: any, option: any) {
  modalState.from[id].cmdStop = option.stop;
  // 重置任务
  modalState.from[id].taskCode = '';
-  modalState.from[id].logMsg = '';
+  modalState.from[id].taskFiles = [];
 }

 /**
@@ -341,7 +355,7 @@ function fnRecordStop(row?: Record<string, any>) {
            if (res.status === 'fulfilled') {
              const resV = res.value;
              fromArr[idx].loading = false;
-              fromArr[idx].logMsg = '';
+              fromArr[idx].taskFiles = [];
              if (fromArr[idx].cmdStop) {
                fromArr[idx].taskCode = '';
              }
@@ -350,7 +364,7 @@ function fnRecordStop(row?: Record<string, any>) {
                if (fromArr[idx].cmdStop) {
                  fromArr[idx].taskCode = resV.data;
                } else {
-                  fromArr[idx].logMsg = resV.msg;
+                  fromArr[idx].taskFiles = resV.data;
                }
                message.success({
                  content: t('views.traceManage.pcap.stopOk', { title }),
@@ -422,10 +436,15 @@ function fnDownPCAP(row?: Record<string, any>) {
            )
          );
        } else {
+          const { neType, neId } = from.data;
+          const path = `/tmp/omc/tcpdump/${neType.toLowerCase()}/${neId}/${taskCode}`;
          reqArr.push(
-            dumpDownload(
-              Object.assign({ taskCode: taskCode, delTemp: true }, from.data)
-            )
+            getNeDirZip({
+              neType,
+              neId,
+              path,
+              delTemp: true,
+            })
          );
        }
      }
@@ -497,8 +516,42 @@ function fnBatchOper(key: string) {
 function fnModalVisibleByVive(id: string | number) {
  const from = modalState.from[id];
  if (!from) return;
+  const { neType, neId } = from.data;
+  const path = `/tmp/omc/tcpdump/${neType.toLowerCase()}/${neId}/${
+    from.taskCode
+  }`;
+  const files = from.taskFiles.filter(f => f.endsWith('log'));
+  modalState.viewFrom.neType = neType;
+  modalState.viewFrom.neId = neId;
+  modalState.viewFrom.path = path;
+  modalState.viewFrom.files = [...files];
+  fnViveTab(files[0]);
  modalState.visibleByView = true;
-  modalState.logMsg = from.logMsg;
+}
+
+/**对话框tab查看 */
+function fnViveTab(action: any) {
+  console.log('fnViveTab', action);
+  if (modalState.viewFrom.action === action) return;
+  modalState.viewFrom.action = action;
+  modalState.viewFrom.content = '';
+  const { neType, neId, path } = modalState.viewFrom;
+  getNeViewFile({
+    neId,
+    neType,
+    path,
+    fileName: action,
+  }).then(res => {
+    if (res.code === RESULT_CODE_SUCCESS) {
+      modalState.viewFrom.content = res.data;
+    } else {
+      modalState.viewFrom.content = '';
+      message.warning({
+        content: `${res.msg}`,
+        duration: 3,
+      });
+    }
+  });
 }

 /**
@@ -507,7 +560,8 @@ function fnModalVisibleByVive(id: string | number) {
 */
 function fnModalCancel() {
  modalState.visibleByView = false;
-  modalState.logMsg = '';
+  modalState.viewFrom.action = '';
+  modalState.viewFrom.files = [];
 }

 /**跳转文件数据页面 */
@@ -651,7 +705,7 @@ onMounted(() => {
                placement="topRight"
                v-if="
                  !modalState.from[record.id].loading &&
-                  !!modalState.from[record.id].logMsg
+                  modalState.from[record.id].taskFiles.length > 0
                "
              >
                <template #title>
@@ -694,21 +748,39 @@ onMounted(() => {
    <!-- 日志信息框 -->
    <ProModal
      :drag="true"
+      :fullscreen="true"
+      :borderDraw="true"
      :width="800"
      :visible="modalState.visibleByView"
      :footer="false"
      :maskClosable="false"
      :keyboard="false"
-      :body-style="{ padding: '12px' }"
+      :body-style="{ padding: '0 12px 12px' }"
      :title="t('views.traceManage.pcap.textLogMsg')"
      @cancel="fnModalCancel"
    >
+      <a-tabs
+        v-model:activeKey="modalState.viewFrom.action"
+        tab-position="top"
+        size="small"
+        @tabClick="fnViveTab"
+      >
+        <a-tab-pane
+          v-for="fileName in modalState.viewFrom.files"
+          :key="fileName"
+          :tab="fileName"
+          :destroyInactiveTabPane="false"
+        >
+          <a-spin :spinning="!modalState.viewFrom.content">
            <a-textarea
-        v-model:value="modalState.logMsg"
-        :auto-size="{ minRows: 2, maxRows: 18 }"
+              :value="modalState.viewFrom.content"
+              :auto-size="{ minRows: 2 }"
              :disabled="true"
              style="color: rgba(0, 0, 0, 0.85)"
            />
+          </a-spin>
+        </a-tab-pane>
+      </a-tabs>
    </ProModal>
  </PageContainer>
 </template>
--- a/src/views/traceManage/wireshark/index.vue
+++ b/src/views/traceManage/wireshark/index.vue
@@ -18,6 +18,7 @@ import {
  packetStart,
  packetStop,
  packetFilter,
+  packetKeep,
 } from '@/api/trace/packet';
 const ws = new WS();
 const { t } = useI18n();
@@ -29,6 +30,8 @@ type StateType = {
  devices: { id: string; label: string; children: any[] }[];
  /**初始化 */
  initialized: boolean;
+  /**保活调度器 */
+  keepTimer: any;
  /**任务 */
  task: {
    taskNo: string;
@@ -64,6 +67,7 @@ type StateType = {
 const state = reactive<StateType>({
  devices: [],
  initialized: false,
+  keepTimer: null,
  task: {
    taskNo: 'laYlTbq',
    device: '192.168.5.58',
@@ -274,6 +278,9 @@ function wsMessage(res: Record<string, any>) {
  // 建联时发送请求
  if (!requestId && data.clientId) {
    state.initialized = true;
+    state.keepTimer = setInterval(() => {
+      packetKeep(state.task.taskNo, 120);
+    }, 90 * 1000);
    return;
  }

@@ -320,7 +327,9 @@ onMounted(() => {
 });

 onBeforeUnmount(() => {
-  ws.close();
+  clearInterval(state.keepTimer);
+  state.keepTimer = null;
+  if (ws.state() === WebSocket.OPEN) ws.close();
 });
 </script>