From 91af2bed92dd3a32314d9e7449bf7247f6923b6e Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Thu, 17 Oct 2024 15:05:21 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=B7=A5=E5=85=B7iperf/ping=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/tool/iperf.ts          |  20 ++
 src/api/tool/ping.ts           |  10 +
 src/views/tool/iperf/index.vue | 402 ++++++++++++++++++++++++++++-----
 src/views/tool/ping/index.vue  | 334 ++++++++++++++++++++++-----
 4 files changed, 649 insertions(+), 117 deletions(-)
 create mode 100644 src/api/tool/iperf.ts
 create mode 100644 src/api/tool/ping.ts

diff --git a/src/api/tool/iperf.ts b/src/api/tool/iperf.ts
new file mode 100644
index 00000000..5b5e146c
--- /dev/null
+++ 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,
+  });
+}
diff --git a/src/api/tool/ping.ts b/src/api/tool/ping.ts
new file mode 100644
index 00000000..b897604e
--- /dev/null
+++ 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,
+  });
+}
diff --git a/src/views/tool/iperf/index.vue b/src/views/tool/iperf/index.vue
index a4987aa7..8a0d95a8 100644
--- 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">
-          <a-cascader
-            v-model:value="state.neType"
-            :options="neCascaderOptions"
-            :placeholder="t('common.selectPlease')"
-          />
-          <a-radio-group v-model:value="state.dataType" button-style="solid">
+          <span>
+            {{ t('views.ne.common.neType') }}:
+            <a-cascader
+              v-model:value="state.neType"
+              :options="neCascaderOptions"
+              :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
-        :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>
diff --git a/src/views/tool/ping/index.vue b/src/views/tool/ping/index.vue
index a4987aa7..182601a7 100644
--- 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">
-          <a-cascader
-            v-model:value="state.neType"
-            :options="neCascaderOptions"
-            :placeholder="t('common.selectPlease')"
-          />
-          <a-radio-group v-model:value="state.dataType" button-style="solid">
+          <span>
+            {{ t('views.ne.common.neType') }}:
+            <a-cascader
+              v-model:value="state.neType"
+              :options="neCascaderOptions"
+              :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
-        :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>