perf: 重构跟踪任务

src/views/traceManage/task/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive, onMounted, toRaw } from 'vue';
+import { reactive, onMounted, toRaw, ref } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
 import { Form, message, Modal } from 'ant-design-vue/lib';
 import { SizeType } from 'ant-design-vue/lib/config-provider';
@@ -8,7 +8,6 @@ import { ColumnsType } from 'ant-design-vue/lib/table';
 import { parseDateToStr } from '@/utils/date-utils';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import useI18n from '@/hooks/useI18n';
-import useUserStore from '@/store/modules/user';
 import useNeInfoStore from '@/store/modules/neinfo';
 import {
   addTraceTask,
@@ -16,9 +15,11 @@ import {
   getTraceTask,
   listTraceTask,
   updateTraceTask,
-} from '@/api/traceManage/task';
+} from '@/api/trace/task';
 import useDictStore from '@/store/modules/dict';
 import { regExpIPv4, regExpPort } from '@/utils/regular-utils';
+import dayjs, { Dayjs } from 'dayjs';
+import { parseObjHumpToLine } from '@/utils/parse-utils';
 const neInfoStore = useNeInfoStore();
 const { getDict } = useDictStore();
 const { t } = useI18n();
@@ -31,15 +32,18 @@ let dict: {
   traceType: [],
 });
 
+/**网元类型_多neId */
+let neCascaderOptions = ref<Record<string, any>[]>([]);
+
 /**查询参数 */
 let queryParams = reactive({
   /**网元类型 */
   neType: '',
   /**记录时间 */
-  beginTime: '',
+  startTime: '',
   endTime: '',
   /**排序字段 */
-  sortField: 'startTime',
+  sortField: 'start_time',
   /**排序方式 */
   sortOrder: 'asc',
   /**当前页数 */
@@ -52,9 +56,9 @@ let queryParams = reactive({
 function fnQueryReset() {
   queryParams = Object.assign(queryParams, {
     neType: '',
-    beginTime: '',
+    startTime: '',
     endTime: '',
-    sortField: 'startTime',
+    sortField: 'start_time',
     sortOrder: 'asc',
     pageNum: 1,
     pageSize: 20,
@@ -114,11 +118,6 @@ let tableColumns: ColumnsType = [
     key: 'traceType',
     align: 'center',
   },
-  {
-    title: t('views.traceManage.task.creater'),
-    dataIndex: 'accountId',
-    align: 'center',
-  },
   {
     title: t('views.traceManage.task.startTime'),
     dataIndex: 'startTime',
@@ -178,11 +177,16 @@ function fnTableSize({ key }: MenuInfo) {
   tableState.size = key as SizeType;
 }
 
+/**表格多选 */
+function fnTableSelectedRowKeys(keys: (string | number)[]) {
+  tableState.selectedRowKeys = keys;
+}
+
 /**表格分页、排序、筛选变化时触发操作, 排序方式，取值为 ascend descend */
 function fnTableChange(pagination: any, filters: any, sorter: any, extra: any) {
   const { field, order } = sorter;
   if (order) {
-    queryParams.sortField = field;
+    queryParams.sortField = parseObjHumpToLine(field);
     queryParams.sortOrder = order.replace('end', '');
   } else {
     queryParams.sortOrder = 'asc';
@@ -191,32 +195,40 @@ function fnTableChange(pagination: any, filters: any, sorter: any, extra: any) {
 }
 
 /**
- * 备份信息删除
- * @param row 记录编号ID
+ * 记录删除
+ * @param id  编号
  */
 function fnRecordDelete(id: string) {
+  if (!id || modalState.confirmLoading) return;
+  let msg = t('views.traceManage.task.delTaskTip', { id: id });
+  if (id === '0') {
+    const mun = `...${tableState.selectedRowKeys.length}`;
+    msg = `${t('views.traceManage.task.delTaskTip', { id: mun })} `;
+    id = tableState.selectedRowKeys.join(',');
+  }
+
   Modal.confirm({
     title: t('common.tipTitle'),
-    content: t('views.traceManage.task.delTaskTip', { num: id }),
+    content: msg,
     onOk() {
-      const key = 'delTraceTask';
-      message.loading({ content: t('common.loading'), key });
-      delTraceTask(id).then(res => {
-        if (res.code === RESULT_CODE_SUCCESS) {
-          message.success({
-            content: t('views.traceManage.task.delTask', { num: id }),
-            key,
-            duration: 2,
-          });
-          fnGetList();
-        } else {
-          message.error({
-            content: `${res.msg}`,
-            key: key,
-            duration: 2,
-          });
-        }
-      });
+      modalState.confirmLoading = true;
+      const hide = message.loading(t('common.loading'), 0);
+      delTraceTask(id)
+        .then(res => {
+          if (res.code === RESULT_CODE_SUCCESS) {
+            message.success(t('common.operateOk'), 3);
+            fnGetList();
+          } else {
+            message.error({
+              content: `${res.msg}`,
+              duration: 3,
+            });
+          }
+        })
+        .finally(() => {
+          hide();
+          modalState.confirmLoading = false;
+        });
     },
   });
 }
@@ -251,8 +263,6 @@ function fnGetList(pageNum?: number) {
 
 /**对话框对象信息状态类型 */
 type ModalStateType = {
-  /**详情框是否显示 */
-  visibleByView: boolean;
   /**新增框或修改框是否显示 */
   visibleByEdit: boolean;
   /**标题 */
@@ -266,7 +276,25 @@ type ModalStateType = {
   /**任务开始结束时间 */
   timeRangePicker: [string, string];
   /**表单数据 */
-  from: Record<string, any>;
+  from: {
+    id?: string;
+    neType: string;
+    neId: string;
+    /**1-Interface,2-Device,3-User */
+    traceType: string;
+    startTime?: number;
+    endTime?: number;
+    remark?: string;
+    /**1接口跟踪 */
+    interfaces?: string;
+    /**2设备跟踪 */
+    srcIp?: string;
+    dstIp?: string;
+    signalPort?: number;
+    /**3用户跟踪 */
+    imsi?: string;
+    msisdn?: string;
+  };
   /**确定按钮 loading */
   confirmLoading: boolean;
 };
@@ -284,18 +312,19 @@ let modalState: ModalStateType = reactive({
     id: '',
     neType: '',
     neId: '',
-    traceType: 'Device',
-    startTime: '',
-    endTime: '',
-    comment: '',
-    // 跟踪类型用户
-    imsi: '',
-    msisdn: '',
-    // 跟踪类型接口
+    traceType: '3',
+    startTime: undefined,
+    endTime: undefined,
+    remark: '',
+    /**1接口跟踪 */
+    interfaces: '',
+    /**2设备跟踪 */
     srcIp: '',
     dstIp: '',
-    interfaces: '',
-    signalPort: '',
+    signalPort: undefined,
+    /**3用户跟踪 */
+    imsi: '',
+    msisdn: '',
   },
   confirmLoading: false,
 });
@@ -322,7 +351,7 @@ const modalStateFrom = Form.useForm(
         message: t('views.traceManage.task.rangePickerPlease'),
       },
     ],
-    // 跟踪用户
+    // 用户跟踪
     imsi: [
       {
         required: true,
@@ -331,11 +360,18 @@ const modalStateFrom = Form.useForm(
     ],
     msisdn: [
       {
-        required: true,
+        required: false,
         message: t('views.traceManage.task.msisdnPlease'),
       },
     ],
-    // 跟踪接口
+    // 接口跟踪
+    interfaces: [
+      {
+        required: true,
+        message: t('views.traceManage.task.interfacesPlease'),
+      },
+    ],
+    // 数据跟踪
     srcIp: [
       {
         required: true,
@@ -350,15 +386,9 @@ const modalStateFrom = Form.useForm(
         message: t('views.traceManage.task.dstIpPlease'),
       },
     ],
-    interfaces: [
-      {
-        required: true,
-        message: t('views.traceManage.task.interfacesPlease'),
-      },
-    ],
     signalPort: [
       {
-        required: true,
+        required: false,
         pattern: regExpPort,
         message: t('views.traceManage.task.signalPortPlease'),
       },
@@ -370,18 +400,29 @@ const modalStateFrom = Form.useForm(
 function fnNeChange(_: any, item: any) {
   modalState.from.neType = item[1].neType;
   modalState.from.neId = item[1].neId;
-
+  // 网元信令接口可选列表
   modalState.from.interfaces = '';
   modalState.neTypeInterfaceSelect = [];
-  if (modalState.from.traceType !== 'Interface') return;
-  // 网元信令接口
   fnSelectInterfaceInit(item[1].neType);
 }
 
+/**跟踪类型选择对应修改 */
+function fnTraceTypeChange(v: any, _: any) {
+  // 网元信令接口可选列表
+  if (v === '1' && modalState.from.neType) {
+    modalState.from.interfaces = '';
+    modalState.neTypeInterfaceSelect = [];
+    fnSelectInterfaceInit(modalState.from.neType);
+  }
+}
+
 /**开始结束时间选择对应修改 */
-function fnRangePickerChange(_: any, item: any) {
-  modalState.from.startTime = item[0];
-  modalState.from.endTime = item[1];
+function fnRangePickerChange(item: any, _: any) {
+  modalState.from.startTime = +item[0];
+  modalState.from.endTime = +item[1];
+}
+function fnRangePickerDisabledDate(current: Dayjs) {
+  return current && current < dayjs().subtract(1, 'day').endOf('day');
 }
 
 /**信令接口选择对应修改 */
@@ -402,39 +443,6 @@ function fnSelectInterfaceInit(neType: string) {
     });
 }
 
-/**
- * 对话框弹出显示为 新增或者修改
- * @param noticeId 网元id, 不传为新增
- */
-function fnModalVisibleByVive(id: string) {
-  if (modalState.confirmLoading) return;
-  const hide = message.loading(t('common.loading'), 0);
-  modalState.confirmLoading = true;
-  getTraceTask(id).then(res => {
-    modalState.confirmLoading = false;
-    hide();
-    if (res.code === RESULT_CODE_SUCCESS) {
-      modalState.neType = [res.data.neType, res.data.neId];
-      modalState.timeRangePicker = [res.data.startTime, res.data.endTime];
-      modalState.from = Object.assign(modalState.from, res.data);
-      // 接口
-      if (res.data.traceType === 'Interface') {
-        if (
-          res.data.interfaces.length > 4 &&
-          res.data.interfaces.includes('[')
-        ) {
-          modalState.neTypeInterfaceSelect = JSON.parse(res.data.interfaces);
-        }
-        fnSelectInterfaceInit(res.data.neType);
-      }
-      modalState.title = t('views.traceManage.task.viewTask');
-      modalState.visibleByView = true;
-    } else {
-      message.error(t('views.traceManage.task.errorTaskInfo'), 3);
-    }
-  });
-}
-
 /**
  * 对话框弹出显示为 新增或者修改
  * @param noticeId 网元id, 不传为新增
@@ -481,13 +489,16 @@ function fnModalVisibleByEdit(id?: string) {
 function fnModalOk() {
   const from = toRaw(modalState.from);
   let valids = ['traceType', 'neId', 'endTime'];
-  if (from.traceType === 'UE') {
+  if (from.traceType === '1') {
+    valids = valids.concat(['interfaces']);
+  }
+  if (from.traceType === '2') {
+    valids = valids.concat(['srcIp', 'dstIp', 'signalPort']);
+  }
+  if (from.traceType === '3') {
     valids = valids.concat(['imsi', 'msisdn']);
   }
-  if (from.traceType === 'Interface') {
-    valids = valids.concat(['srcIp', 'dstIp', 'interfaces', 'signalPort']);
-  }
-  from.accountId = useUserStore().userName;
+
   modalStateFrom
     .validate(valids)
     .then(e => {
@@ -525,7 +536,6 @@ function fnModalOk() {
  * 进行表达规则校验
  */
 function fnModalCancel() {
-  modalState.visibleByView = false;
   modalState.visibleByEdit = false;
   modalState.confirmLoading = false;
   modalStateFrom.resetFields();
@@ -542,15 +552,40 @@ onMounted(() => {
       dict.traceType = resArr[0].value;
     }
   });
-  Promise.allSettled([
-    // 获取网元网元列表
-    neInfoStore.fnNelist(),
-    // 获取跟踪接口列表
-    neInfoStore.fnNeTraceInterface(),
-  ]).finally(() => {
-    // 获取列表数据
-    fnGetList();
-  });
+
+  // 获取网元网元列表
+  useNeInfoStore()
+    .fnNelist()
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+        if (res.data.length > 0) {
+          // 过滤不可用的网元
+          neCascaderOptions.value = neInfoStore.getNeSelectOtions.filter(
+            (item: any) => {
+              return ['UDM'].includes(item.value);
+            }
+          );
+          if (neCascaderOptions.value.length === 0) {
+            message.warning({
+              content: t('common.noData'),
+              duration: 2,
+            });
+            return;
+          }
+        }
+      } else {
+        message.warning({
+          content: t('common.noData'),
+          duration: 2,
+        });
+      }
+    })
+    .finally(() => {
+      // 获取跟踪接口列表
+      neInfoStore.fnNeTraceInterface();
+      // 获取列表数据
+      fnGetList();
+    });
 });
 </script>
 
@@ -571,7 +606,7 @@ onMounted(() => {
             >
               <a-auto-complete
                 v-model:value="queryParams.neType"
-                :options="neInfoStore.getNeSelectOtions"
+                :options="neCascaderOptions"
                 allow-clear
                 :placeholder="t('views.traceManage.task.neTypePlease')"
               />
@@ -580,13 +615,13 @@ onMounted(() => {
           <a-col :lg="6" :md="12" :xs="24">
             <a-form-item
               :label="t('views.traceManage.task.startTime')"
-              name="beginTime"
+              name="startTime"
             >
               <a-date-picker
                 show-time
-                v-model:value="queryParams.beginTime"
-                value-format="YYYY-MM-DD HH:mm:ss"
+                v-model:value="queryParams.startTime"
                 format="YYYY-MM-DD HH:mm:ss"
+                value-format="x"
                 :placeholder="t('views.traceManage.task.startTime')"
                 style="width: 100%"
               />
@@ -600,8 +635,8 @@ onMounted(() => {
               <a-date-picker
                 show-time
                 v-model:value="queryParams.endTime"
-                value-format="YYYY-MM-DD HH:mm:ss"
                 format="YYYY-MM-DD HH:mm:ss"
+                value-format="x"
                 :placeholder="t('views.traceManage.task.endTime')"
                 style="width: 100%"
               />
@@ -628,10 +663,23 @@ onMounted(() => {
     <a-card :bordered="false" :body-style="{ padding: '0px' }">
       <!-- 插槽-卡片左侧侧 -->
       <template #title>
-        <a-button type="primary" @click.prevent="fnModalVisibleByEdit()">
-          <template #icon><PlusOutlined /></template>
-          {{ t('common.addText') }}
-        </a-button>
+        <a-space :size="8" align="center">
+          <a-button type="primary" @click.prevent="fnModalVisibleByEdit()">
+            <template #icon><PlusOutlined /></template>
+            {{ t('common.addText') }}
+          </a-button>
+
+          <a-button
+            type="default"
+            danger
+            :disabled="tableState.selectedRowKeys.length <= 0"
+            :loading="modalState.confirmLoading"
+            @click.prevent="fnRecordDelete('0')"
+          >
+            <template #icon><DeleteOutlined /></template>
+            {{ t('common.deleteText') }}
+          </a-button>
+        </a-space>
       </template>
 
       <!-- 插槽-卡片右侧 -->
@@ -690,6 +738,12 @@ onMounted(() => {
         :pagination="tablePagination"
         :scroll="{ x: true }"
         @change="fnTableChange"
+        :row-selection="{
+          type: 'checkbox',
+          columnWidth: '48px',
+          selectedRowKeys: tableState.selectedRowKeys,
+          onChange: fnTableSelectedRowKeys,
+        }"
       >
         <template #bodyCell="{ column, record }">
           <template v-if="column.key === 'traceType'">
@@ -697,15 +751,6 @@ onMounted(() => {
           </template>
           <template v-if="column.key === 'id'">
             <a-space :size="8" align="center">
-              <a-tooltip>
-                <template #title>{{ t('common.viewText') }}</template>
-                <a-button
-                  type="link"
-                  @click.prevent="fnModalVisibleByVive(record.id)"
-                >
-                  <template #icon><ProfileOutlined /></template>
-                </a-button>
-              </a-tooltip>
               <a-tooltip>
                 <template #title>{{ t('common.editText') }}</template>
                 <a-button
@@ -719,6 +764,7 @@ onMounted(() => {
                 <template #title>{{ t('common.deleteText') }}</template>
                 <a-button
                   type="link"
+                  danger
                   @click.prevent="fnRecordDelete(record.id)"
                 >
                   <template #icon><DeleteOutlined /></template>
@@ -730,117 +776,6 @@ onMounted(() => {
       </a-table>
     </a-card>
 
-    <!-- 详情框 -->
-    <ProModal
-      :drag="true"
-      :width="800"
-      :visible="modalState.visibleByView"
-      :title="modalState.title"
-      @cancel="fnModalCancel"
-    >
-      <a-form layout="horizontal">
-        <a-row :gutter="16">
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.traceManage.task.trackType')"
-              name="traceType"
-            >
-              <DictTag
-                :options="dict.traceType"
-                :value="modalState.from.traceType"
-              />
-            </a-form-item>
-          </a-col>
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.traceManage.task.neType')"
-              name="neType"
-            >
-              <a-cascader
-                :value="modalState.neType"
-                :options="neInfoStore.getNeCascaderOptions"
-                disabled
-              />
-            </a-form-item>
-          </a-col>
-        </a-row>
-
-        <!-- 用户跟踪 -->
-        <template v-if="modalState.from.traceType === 'UE'">
-          <a-form-item
-            :label="t('views.traceManage.task.msisdn')"
-            name="msisdn"
-          >
-            {{ modalState.from.msisdn }}
-          </a-form-item>
-          <a-form-item :label="t('views.traceManage.task.imsi')" name="imsi">
-            {{ modalState.from.imsi }}
-          </a-form-item>
-        </template>
-
-        <!-- 接口跟踪 -->
-        <template v-if="modalState.from.traceType === 'Interface'">
-          <a-row :gutter="16">
-            <a-col :lg="12" :md="12" :xs="24">
-              <a-form-item
-                :label="t('views.traceManage.task.srcIp')"
-                name="srcIp"
-              >
-                {{ modalState.from.srcIp }}
-              </a-form-item>
-            </a-col>
-            <a-col :lg="12" :md="12" :xs="24">
-              <a-form-item
-                :label="t('views.traceManage.task.dstIp')"
-                name="dstIp"
-              >
-                {{ modalState.from.dstIp }}
-              </a-form-item>
-            </a-col>
-          </a-row>
-          <a-form-item
-            :label="t('views.traceManage.task.interfaces')"
-            name="endTime"
-          >
-            {{ modalState.neTypeInterfaceSelect }}
-          </a-form-item>
-          <a-form-item
-            :label="t('views.traceManage.task.signalPort')"
-            name="endTime"
-          >
-            {{ modalState.from.signalPort }}
-          </a-form-item>
-        </template>
-
-        <a-form-item
-          :label="t('views.traceManage.task.rangePicker')"
-          name="endTime"
-        >
-          <a-range-picker
-            disabled
-            :value="modalState.timeRangePicker"
-            allow-clear
-            bordered
-            :show-time="{ format: 'HH:mm:ss' }"
-            format="YYYY-MM-DD HH:mm:ss"
-            value-format="YYYY-MM-DD HH:mm:ss"
-            style="width: 100%"
-          ></a-range-picker>
-        </a-form-item>
-        <a-form-item
-          :label="t('views.traceManage.task.remark')"
-          name="comment"
-        >
-          {{ modalState.from.comment }}
-        </a-form-item>
-      </a-form>
-      <template #footer>
-        <a-button key="cancel" @click="fnModalCancel">{{
-          t('common.close')
-        }}</a-button>
-      </template>
-    </ProModal>
-
     <!-- 新增框或修改框 -->
     <ProModal
       :drag="true"
@@ -854,89 +789,124 @@ onMounted(() => {
       @ok="fnModalOk"
       @cancel="fnModalCancel"
     >
-      <a-form name="modalStateFrom" layout="horizontal">
+      <a-form
+        name="modalStateFrom"
+        layout="horizontal"
+        :label-col="{ span: 4 }"
+        :label-wrap="true"
+      >
         <a-row :gutter="16">
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.traceManage.task.trackType')"
-              name="traceType"
-              v-bind="modalStateFrom.validateInfos.traceType"
-            >
-              <a-select
-                v-model:value="modalState.from.traceType"
-                :placeholder="t('views.traceManage.task.trackTypePlease')"
-                :options="dict.traceType"
-              >
-              </a-select>
-            </a-form-item>
-          </a-col>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.traceManage.task.neType')"
+              :label-col="{ span: 8 }"
               name="neType"
               v-bind="modalStateFrom.validateInfos.neId"
             >
               <a-cascader
                 v-model:value="modalState.neType"
-                :options="neInfoStore.getNeCascaderOptions"
+                :options="neCascaderOptions"
                 @change="fnNeChange"
                 :allow-clear="false"
                 :placeholder="t('views.traceManage.task.neTypePlease')"
               />
             </a-form-item>
           </a-col>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.traceManage.task.trackType')"
+              :label-col="{ span: 8 }"
+              name="traceType"
+              v-bind="modalStateFrom.validateInfos.traceType"
+            >
+              <a-select
+                v-model:value="modalState.from.traceType"
+                :options="dict.traceType"
+                @change="fnTraceTypeChange"
+                :allow-clear="false"
+                :placeholder="t('views.traceManage.task.trackTypePlease')"
+              >
+              </a-select>
+            </a-form-item>
+          </a-col>
         </a-row>
 
-        <!-- 用户跟踪 -->
-        <template v-if="modalState.from.traceType === 'UE'">
+        <a-form-item
+          :label="t('views.traceManage.task.rangePicker')"
+          name="endTime"
+          v-bind="modalStateFrom.validateInfos.endTime"
+        >
+          <a-range-picker
+            v-model:value="modalState.timeRangePicker"
+            @change="fnRangePickerChange"
+            allow-clear
+            bordered
+            :show-time="{ format: 'HH:mm:ss' }"
+            format="YYYY-MM-DD HH:mm:ss"
+            value-format="x"
+            style="width: 100%"
+            :disabled-date="fnRangePickerDisabledDate"
+            :placeholder="[
+              t('views.traceManage.task.startTime'),
+              t('views.traceManage.task.endTime'),
+            ]"
+          ></a-range-picker>
+        </a-form-item>
+        <a-form-item :label="t('views.traceManage.task.remark')" name="remark">
+          <a-textarea
+            v-model:value="modalState.from.remark"
+            :auto-size="{ minRows: 1, maxRows: 6 }"
+            :maxlength="450"
+            :show-count="true"
+            :placeholder="t('views.traceManage.task.remarkPlease')"
+          />
+        </a-form-item>
+
+        <!-- 接口跟踪 -->
+        <template v-if="modalState.from.traceType === '1'">
           <a-form-item
-            :label="t('views.traceManage.task.msisdn')"
-            name="msisdn"
-            v-bind="modalStateFrom.validateInfos.msisdn"
+            :label="t('views.traceManage.task.interfaces')"
+            name="interfaces"
+            v-bind="modalStateFrom.validateInfos.interfaces"
           >
-            <a-input
-              v-model:value="modalState.from.msisdn"
-              allow-clear
-              :placeholder="t('views.traceManage.task.msisdnPlease')"
+            <a-select
+              mode="multiple"
+              :placeholder="t('views.traceManage.task.interfacesPlease')"
+              v-model:value="modalState.neTypeInterfaceSelect"
+              :options="modalState.neTypeInterface"
+              @change="fnSelectInterface"
             >
-              <template #prefix>
-                <a-tooltip placement="topLeft">
-                  <template #title>
-                    <div>{{ t('views.traceManage.task.msisdnTip') }}</div>
-                  </template>
-                  <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
-                </a-tooltip>
-              </template>
-            </a-input>
-          </a-form-item>
-          <a-form-item
-            :label="t('views.traceManage.task.imsi')"
-            name="imsi"
-            v-bind="modalStateFrom.validateInfos.imsi"
-          >
-            <a-input
-              v-model:value="modalState.from.imsi"
-              allow-clear
-              :placeholder="t('views.traceManage.task.imsiPlease')"
-            >
-              <template #prefix>
-                <a-tooltip placement="topLeft">
-                  <template #title>
-                    <div>{{ t('views.traceManage.task.imsiTip') }}</div>
-                  </template>
-                  <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
-                </a-tooltip>
-              </template>
-            </a-input>
+            </a-select>
           </a-form-item>
         </template>
 
-        <!-- 接口跟踪 -->
-        <template v-if="modalState.from.traceType === 'Interface'">
+        <!-- 设备跟踪 -->
+        <template v-if="modalState.from.traceType === '2'">
+          <a-form-item
+            :label="t('views.traceManage.task.signalPort')"
+            name="signalPort"
+            v-bind="modalStateFrom.validateInfos.signalPort"
+          >
+            <a-input-number
+              v-model:value="modalState.from.signalPort"
+              style="width: 100%"
+              :placeholder="t('views.traceManage.task.signalPortPlease')"
+            >
+              <template #prefix>
+                <a-tooltip placement="topLeft">
+                  <template #title>
+                    <div>{{ t('views.traceManage.task.signalPortTip') }}</div>
+                  </template>
+                  <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                </a-tooltip>
+              </template>
+            </a-input-number>
+          </a-form-item>
           <a-row :gutter="16">
             <a-col :lg="12" :md="12" :xs="24">
               <a-form-item
                 :label="t('views.traceManage.task.srcIp')"
+                :label-col="{ span: 8 }"
                 name="srcIp"
                 v-bind="modalStateFrom.validateInfos.srcIp"
               >
@@ -959,6 +929,7 @@ onMounted(() => {
             <a-col :lg="12" :md="12" :xs="24">
               <a-form-item
                 :label="t('views.traceManage.task.dstIp')"
+                :label-col="{ span: 8 }"
                 name="dstIp"
                 v-bind="modalStateFrom.validateInfos.dstIp"
               >
@@ -979,34 +950,44 @@ onMounted(() => {
               </a-form-item>
             </a-col>
           </a-row>
+        </template>
+
+        <!-- 用户跟踪 -->
+        <template v-if="modalState.from.traceType === '3'">
           <a-form-item
-            :label="t('views.traceManage.task.interfaces')"
-            name="interfaces"
-            v-bind="modalStateFrom.validateInfos.interfaces"
-          >
-            <a-select
-              mode="multiple"
-              :placeholder="t('views.traceManage.task.interfacesPlease')"
-              v-model:value="modalState.neTypeInterfaceSelect"
-              :options="modalState.neTypeInterface"
-              @change="fnSelectInterface"
-            >
-            </a-select>
-          </a-form-item>
-          <a-form-item
-            :label="t('views.traceManage.task.signalPort')"
-            name="signalPort"
-            v-bind="modalStateFrom.validateInfos.signalPort"
+            :label="t('views.traceManage.task.imsi')"
+            name="imsi"
+            v-bind="modalStateFrom.validateInfos.imsi"
           >
             <a-input
-              v-model:value="modalState.from.signalPort"
+              v-model:value="modalState.from.imsi"
               allow-clear
-              :placeholder="t('views.traceManage.task.signalPortPlease')"
+              :placeholder="t('views.traceManage.task.imsiPlease')"
             >
               <template #prefix>
                 <a-tooltip placement="topLeft">
                   <template #title>
-                    <div>{{ t('views.traceManage.task.signalPortTip') }}</div>
+                    <div>{{ t('views.traceManage.task.imsiTip') }}</div>
+                  </template>
+                  <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                </a-tooltip>
+              </template>
+            </a-input>
+          </a-form-item>
+          <a-form-item
+            :label="t('views.traceManage.task.msisdn')"
+            name="msisdn"
+            v-bind="modalStateFrom.validateInfos.msisdn"
+          >
+            <a-input
+              v-model:value="modalState.from.msisdn"
+              allow-clear
+              :placeholder="t('views.traceManage.task.msisdnPlease')"
+            >
+              <template #prefix>
+                <a-tooltip placement="topLeft">
+                  <template #title>
+                    <div>{{ t('views.traceManage.task.msisdnTip') }}</div>
                   </template>
                   <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
                 </a-tooltip>
@@ -1014,39 +995,6 @@ onMounted(() => {
             </a-input>
           </a-form-item>
         </template>
-
-        <a-form-item
-          :label="t('views.traceManage.task.rangePicker')"
-          name="endTime"
-          v-bind="modalStateFrom.validateInfos.endTime"
-        >
-          <a-range-picker
-            v-model:value="modalState.timeRangePicker"
-            @change="fnRangePickerChange"
-            allow-clear
-            bordered
-            :show-time="{ format: 'HH:mm:ss' }"
-            format="YYYY-MM-DD HH:mm:ss"
-            value-format="YYYY-MM-DD HH:mm:ss"
-            :placeholder="[
-              t('views.traceManage.task.startTime'),
-              t('views.traceManage.task.endTime'),
-            ]"
-            style="width: 100%"
-          ></a-range-picker>
-        </a-form-item>
-        <a-form-item
-          :label="t('views.traceManage.task.remark')"
-          name="comment"
-        >
-          <a-textarea
-            v-model:value="modalState.from.comment"
-            :auto-size="{ minRows: 2, maxRows: 6 }"
-            :maxlength="250"
-            :show-count="true"
-            :placeholder="t('views.traceManage.task.remarkPlease')"
-          />
-        </a-form-item>
       </a-form>
     </ProModal>
   </PageContainer>