Merge remote-tracking branch 'origin/lichang'

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": {

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,
+  });
+}

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,
+  });
+}

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,
+  });
+}

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({

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',
     });
   },

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",
+        user: "User",
-        userPlease: "Please fill in the host login user correctly",
+        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",
+        textLog: "LogFile",
-        textLogMsg: "Log Info",
+        textLogMsg: "LogFile Info",
         textDown: "Download",
         downTip: "Are you sure you want to download the {title} capture data file?",
         downOk: "{title} file download complete",

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: "日志",
+        textLog: "日志文件",
-        textLogMsg: "日志信息",
+        textLogMsg: "日志文件信息",
         textDown: "下载",
         downTip: "确认要下载 {title} 抓包数据文件吗？",
         downOk: "{title} 文件下载完成",

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 {

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];

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);
       }

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) => {

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();
-  viewTerminal.value.send('tail', {
+  setTimeout(() => {
-    filePath: props.filePath,
+    viewTerminal.value.send('tail', {
-    lines: state.form.lines,
+      filePath: props.filePath,
-    char: state.form.char,
+      lines: state.form.lines,
-    follow: state.form.follow,
+      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>
     <!-- 命令控制属性 -->

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)) return;
+  const neType = keys[0];
+  const neId = keys[1];
   // 不是同类型时需要重新加载
-  if (Array.isArray(keys) && queryParams.neType !== keys[0]) {
+  if (queryParams.neType !== neType || queryParams.neId !== neId) {
-    const neType = keys[0];
     queryParams.neType = neType;
-    queryParams.neId = keys[1];
+    queryParams.neId = neId;
     if (neType === 'IMS') {
       nePathArr.value = ['/var/log/ims'];
       queryParams.search = '';

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',
+        authMode: '2',
-        password: 'a9tU53r',
+        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"

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: '',
+    });
+  }
 }
 
 /**

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,

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,

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) {

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') {
+  if (modalState.from.hosts.length === 3) {
-    data.hosts.pop();
+    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: '',
+    });
+  }
 }
 
 //打开新增或修改界面

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';
+import { getConfigKey, changeValue } from '@/api/system/config';
-
+const { t } = useI18n();
-const appStore = useAppStore();
-const { t, optionsLocale } = useI18n();
 
 type StateType = {
   edite: boolean;
@@ -124,7 +121,7 @@ onMounted(() => {
         <a-typography-paragraph>
           {{ t('views.system.setting.homeInstruction') }}
         </a-typography-paragraph>
-      </a-typography> 
+      </a-typography>
     </a-col>
   </a-row>
 </template>

src/views/system/setting/index.vue

@@ -51,9 +51,9 @@ const { t } = useI18n();
         <ChangeI18n></ChangeI18n>
       </div>
       <a-divider orientation="left">
-        {{t('views.system.setting.homeSet') }}
+        {{ t('views.system.setting.homeSet') }}
       </a-divider>
-        <ChangeHome></ChangeHome>
+      <ChangeHome></ChangeHome>
       <a-divider orientation="left">
         {{ t('views.system.setting.reset') }}
       </a-divider>

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',
+    neType: '',
-    neId: '001',
+    neId: '',
     cols: 120,
     rows: 40,
   },
   /**ws数据 */
   data: {
     command: '', // 命令字符串
-    desAddr: 'www.baidu.com', // dns name or ip address
+    client: true, // 服务端或客户端，默认服务端
-    // Options
+    // Server or Client
-    interval: 1, //  seconds between sending each packet
+    port: 5201, // 服务端口
-    ttl: 255, // define time to live
+    interval: 1, // 每次报告之间的时间间隔，单位为秒
-    count: 4, // <count> 次回复后停止
+    // Server
-    size: 56, // 使用 <size> 作为要发送的数据字节数
+    oneOff: false, // 只进行一次连接
-    timeout: 2, //  seconds time to wait for response
+    // 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) return;
-  // 建联时发送请求
+  let lestIndex = data.lastIndexOf('unable to');
-  if (!requestId && data.clientId) {
+  if (lestIndex !== -1) {
-    state.initialized = true;
+    state.running = false;
     return;
   }
-
+  lestIndex = data.lastIndexOf('iperf Done.');
-  // 收到消息数据
+  if (lestIndex !== -1) {
-  if (requestId.startsWith('ping_')) {
+    state.running = false;
-    console.log(data);
+    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(() => {
+onBeforeUnmount(() => {});
-  if (ws.state() === WebSocket.OPEN) ws.close();
-});
 </script>
 
 <template>
@@ -122,29 +207,224 @@ onBeforeUnmount(() => {
       <!-- 插槽-卡片左侧侧 -->
       <template #title>
         <a-space :size="8">
-          <a-cascader
+          <span>
-            v-model:value="state.neType"
+            {{ t('views.ne.common.neType') }}:
-            :options="neCascaderOptions"
+            <a-cascader
-            :placeholder="t('common.selectPlease')"
+              v-model:value="state.neType"
-          />
+              :options="neCascaderOptions"
-          <a-radio-group v-model:value="state.dataType" button-style="solid">
+              :placeholder="t('common.selectPlease')"
+              :disabled="state.running"
+            />
+          </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
+      <template #extra>
-        :columns="[]"
+        <a-space :size="8">
-        :data-source="[]"
+          <a-button
-        :pagination="false"
+            @click.prevent="fnIPerf3()"
-        :loading="false"
+            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>

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',
+    neType: '',
-    neId: '001',
+    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) return;
-  // 建联时发送请求
+  let lestIndex = data.lastIndexOf('ping statistics ---');
-  if (!requestId && data.clientId) {
+  if (lestIndex !== -1) {
-    state.initialized = true;
+    state.running = false;
     return;
   }
-
+  lestIndex = data.lastIndexOf('failure');
-  // 收到消息数据
+  if (lestIndex !== -1) {
-  if (requestId.startsWith('ping_')) {
+    state.running = false;
-    console.log(data);
+    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(() => {
+onBeforeUnmount(() => {});
-  if (ws.state() === WebSocket.OPEN) ws.close();
-});
 </script>
 
 <template>
@@ -122,29 +179,194 @@ onBeforeUnmount(() => {
       <!-- 插槽-卡片左侧侧 -->
       <template #title>
         <a-space :size="8">
-          <a-cascader
+          <span>
-            v-model:value="state.neType"
+            {{ t('views.ne.common.neType') }}:
-            :options="neCascaderOptions"
+            <a-cascader
-            :placeholder="t('common.selectPlease')"
+              v-model:value="state.neType"
-          />
+              :options="neCascaderOptions"
-          <a-radio-group v-model:value="state.dataType" button-style="solid">
+              :placeholder="t('common.selectPlease')"
+              :disabled="state.running"
+            />
+          </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
+      <template #extra>
-        :columns="[]"
+        <a-space :size="8">
-        :data-source="[]"
+          <a-button
-        :pagination="false"
+            @click.prevent="fnPing()"
-        :loading="false"
+            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>

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)) return;
+  const neType = keys[0];
+  const neId = keys[1];
   // 不是同类型时需要重新加载
-  if (Array.isArray(keys) && queryParams.neType !== keys[0]) {
+  if (queryParams.neType !== neType || queryParams.neId !== neId) {
-    const neType = keys[0];
     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>
 

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(
+            getNeDirZip({
-              Object.assign({ taskCode: taskCode, delTemp: true }, from.data)
+              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-textarea
+      <a-tabs
-        v-model:value="modalState.logMsg"
+        v-model:activeKey="modalState.viewFrom.action"
-        :auto-size="{ minRows: 2, maxRows: 18 }"
+        tab-position="top"
-        :disabled="true"
+        size="small"
-        style="color: rgba(0, 0, 0, 0.85)"
+        @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
+              :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>

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>