From ac3a4f2d0e2c551fdc04e21f9664bcd2610aa43c Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Tue, 26 Sep 2023 10:14:34 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E4=BF=A1=E4=BB=A4=E5=88=86=E6=9E=90?=
 =?UTF-8?q?=E5=A4=9A=E8=AF=AD=E8=A8=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/trace/analysis.ts          |  3 ++
 src/i18n/locales/en-US.ts          | 19 +++++++++
 src/i18n/locales/zh-CN.ts          | 45 +++++++++++++++------
 src/views/trace/analysis/index.vue | 64 ++++++++++++++++++++----------
 4 files changed, 98 insertions(+), 33 deletions(-)

diff --git a/src/api/trace/analysis.ts b/src/api/trace/analysis.ts
index 14ee1419..a14bda4e 100644
--- a/src/api/trace/analysis.ts
+++ b/src/api/trace/analysis.ts
@@ -16,6 +16,9 @@ export async function listTraceData(query: Record<string, any>) {
   if (query.imsi) {
     querySQL += ` and imsi = '${query.imsi}' `;
   }
+  if (query.msisdn) {
+    querySQL += ` and msisdn = '${query.msisdn}' `;
+  }
 
   // 分页
   const pageNum = query.pageNum - 1;
diff --git a/src/i18n/locales/en-US.ts b/src/i18n/locales/en-US.ts
index 3cb8faa5..d359b7b5 100644
--- a/src/i18n/locales/en-US.ts
+++ b/src/i18n/locales/en-US.ts
@@ -162,6 +162,25 @@ export default {
       },
     },
     trace: {
+      analysis: {
+        imsi: 'IMSI',
+        imsiPlease: 'Please enter IMSI',
+        msisdn: 'MSISDN',
+        msisdnPlease: 'Please enter MSISDN',
+        trackTaskId: 'Tracking task tag',
+        srcIp: 'Source IP address',
+        dstIp: 'Destination IP address',
+        signalType: 'Signaling type',   
+        msgDirect: 'Message direct', 
+        msgType: 'Message type',
+        rowTime: 'Record time',
+        signalData: 'Signaling data',
+        signalDetail: 'Signaling details',
+        noData: 'No information content',
+        taskTitle: "Task {num}",
+        taskDownText: "Download HTML",
+        taskDownTip: "Confirm downloading the signaling details HTML file?",
+      },
       pcap: {
         cardTitle: 'PCAP capture',
         neType: 'Type',
diff --git a/src/i18n/locales/zh-CN.ts b/src/i18n/locales/zh-CN.ts
index f6eef0ba..5a866e3d 100644
--- a/src/i18n/locales/zh-CN.ts
+++ b/src/i18n/locales/zh-CN.ts
@@ -131,7 +131,8 @@ export default {
         import: '导入',
         loadDataConfirm: '确认要重新加载数据吗?',
         loadData: '更新数据',
-        loadDataTip: '成功获取更新数据：{num}条，系统内部进行数据更新，请勿重复点击获取更新!!!',
+        loadDataTip:
+          '成功获取更新数据：{num}条，系统内部进行数据更新，请勿重复点击获取更新!!!',
         num: '放号数',
         batchAddText: '批量新增',
         batchDelText: '批量删除',
@@ -144,9 +145,10 @@ export default {
         import: '导入',
         loadDataConfirm: '确认要重新加载数据吗?',
         loadData: '更新数据',
-        loadDataTip: '成功获取更新数据：{num}条，系统内部进行数据更新，请勿重复点击获取更新!!!',
-        num:'删除个数',
-        startIMSI:'起始IMSI',
+        loadDataTip:
+          '成功获取更新数据：{num}条，系统内部进行数据更新，请勿重复点击获取更新!!!',
+        num: '删除个数',
+        startIMSI: '起始IMSI',
       },
       base5G: {
         neTypePlease: '查询网元类型',
@@ -162,14 +164,33 @@ export default {
       },
     },
     trace: {
+      analysis: {
+        imsi: 'IMSI',
+        imsiPlease: '请输入IMSI',
+        msisdn: 'MSISDN',
+        msisdnPlease: '请输入MSISDN',
+        trackTaskId: '跟踪任务标记',
+        srcIp: '源IP地址',
+        dstIp: '目标IP地址',
+        signalType: '信令类型',
+        msgDirect: '消息元',
+        msgType: '消息类型',
+        rowTime: '记录时间',
+        signalData: '信令数据',
+        signalDetail: '信令详情',
+        noData: '无信息内容',
+        taskTitle: '任务 {num}',
+        taskDownText: '下载HTML',
+        taskDownTip: '确认下载信令详情HTML文件?',
+      },
       pcap: {
         cardTitle: 'PCAP捕获',
         neType: '网元类型',
         neIp: '网元IP地址',
         capArg: '抓包参数',
         capTime: "时长（秒's）",
-        capLog: "执行日志",
-        capDownText: "下载PCAP文件",
+        capLog: '执行日志',
+        capDownText: '下载PCAP文件',
         runText: '执行',
         runTimeText: '执行 {s} 秒',
         stopText: '中断',
@@ -206,12 +227,12 @@ export default {
         rangePickerPlease: '请选择任务时间开始结束时间',
         comment: '任务说明',
         commentPlease: '可输入任务说明',
-        addTask: "添加任务",
-        editTask: "修改任务",
-        viewTask: "查看任务",
-        errorTaskInfo: "获取任务信息失败",
-        delTask: "成功删除任务 {num}",
-        delTaskTip: "确认删除记录编号为 {num} 的数据项?",
+        addTask: '添加任务',
+        editTask: '修改任务',
+        viewTask: '查看任务',
+        errorTaskInfo: '获取任务信息失败',
+        delTask: '成功删除任务 {num}',
+        delTaskTip: '确认删除记录编号为 {num} 的数据项?',
       },
     },
   },
diff --git a/src/views/trace/analysis/index.vue b/src/views/trace/analysis/index.vue
index 08508377..65799f1e 100644
--- a/src/views/trace/analysis/index.vue
+++ b/src/views/trace/analysis/index.vue
@@ -22,6 +22,8 @@ let title = ref<string>((route.meta.title as string) ?? '标题');
 let queryParams = reactive({
   /**移动号 */
   imsi: '',
+  /**移动号 */
+  msisdn: '',
   /**当前页数 */
   pageNum: 1,
   /**每页条数 */
@@ -63,47 +65,47 @@ let tableState: TabeStateType = reactive({
 /**表格字段列 */
 let tableColumns: ColumnsType = [
   {
-    title: '跟踪任务标记',
+    title: t('views.trace.analysis.trackTaskId'),
     dataIndex: 'taskId',
     align: 'center',
   },
   {
-    title: 'IMSI',
+    title: t('views.trace.analysis.imsi'),
     dataIndex: 'imsi',
     align: 'center',
   },
   {
-    title: 'MSISDN',
+    title: t('views.trace.analysis.msisdn'),
     dataIndex: 'msisdn',
     align: 'center',
   },
   {
-    title: '源地址',
+    title: t('views.trace.analysis.srcIp'),
     dataIndex: 'srcAddr',
     align: 'center',
   },
   {
-    title: '目标地址',
+    title: t('views.trace.analysis.dstIp'),
     dataIndex: 'dstAddr',
     align: 'center',
   },
   {
-    title: '信令类型',
+    title: t('views.trace.analysis.signalType'),
     dataIndex: 'ifType',
     align: 'center',
   },
   {
-    title: '消息类型',
+    title: t('views.trace.analysis.msgType'),
     dataIndex: 'msgType',
     align: 'center',
   },
   {
-    title: '消息元',
+    title: t('views.trace.analysis.msgDirect'),
     dataIndex: 'msgDirect',
     align: 'center',
   },
   {
-    title: '记录时间',
+    title: t('views.trace.analysis.rowTime'),
     dataIndex: 'timestamp',
     align: 'center',
     customRender(opt) {
@@ -178,10 +180,11 @@ type ModalStateType = {
 /**抽屉对象信息状态 */
 let modalState: ModalStateType = reactive({
   visible: false,
-  title: '信令信息',
+  title: '',
   from: {
     rawData: '',
     rawDataHTML: '',
+    downBtn: false,
   },
 });
 
@@ -211,11 +214,12 @@ function fnModalVisible(row: Record<string, any>) {
         'style="background:#ffffff"'
       );
       modalState.from.rawDataHTML = withoutHiddenElements;
+      modalState.from.downBtn = true;
     } else {
-      modalState.from.rawDataHTML = '无信息';
+      modalState.from.rawDataHTML = t('views.trace.analysis.noData');
     }
   });
-  modalState.title = `任务 ${row.imsi}`;
+  modalState.title = t('views.trace.analysis.taskTitle', { num: row.imsi });
   modalState.visible = true;
 }
 
@@ -224,6 +228,9 @@ function fnModalVisible(row: Record<string, any>) {
  */
 function fnModalVisibleClose() {
   modalState.visible = false;
+  modalState.from.downBtn = false;
+  modalState.from.rawDataHTML = '';
+  modalState.from.rawData = '';
 }
 
 // 将Base64编码解码为字节数组
@@ -286,8 +293,8 @@ function convertToReadableFormat(hexString: string) {
 /**信息文件下载 */
 function fnDownloadFile() {
   Modal.confirm({
-    title: '提示',
-    content: `确认下载信令详情HTML文件?`,
+    title: t('common.tipTitle'),
+    content: t('views.trace.analysis.taskDownTip'),
     onOk() {
       const blob = new Blob([modalState.from.rawDataHTML], {
         type: 'text/plain',
@@ -314,11 +321,26 @@ onMounted(() => {
       <a-form :model="queryParams" name="queryParams" layout="horizontal">
         <a-row :gutter="16">
           <a-col :lg="6" :md="12" :xs="24">
-            <a-form-item label="IMSI" name="imsi">
+            <a-form-item
+              :placeholder="t('views.trace.analysis.imsi')"
+              name="imsi"
+            >
               <a-input
                 v-model:value="queryParams.imsi"
                 :allow-clear="true"
-                placeholder="查询IMSI"
+                :placeholder="t('views.trace.analysis.imsiPlease')"
+              ></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="6" :md="12" :xs="24">
+            <a-form-item
+              :placeholder="t('views.trace.analysis.msisdn')"
+              name="imsi"
+            >
+              <a-input
+                v-model:value="queryParams.msisdn"
+                :allow-clear="true"
+                :placeholder="t('views.trace.analysis.msisdnPlease')"
               ></a-input>
             </a-form-item>
           </a-col>
@@ -415,14 +437,14 @@ onMounted(() => {
       </a-table>
     </a-card>
 
-    <!-- 新增框或修改框 -->
+    <!-- 详情框 -->
     <a-modal
       width="800px"
       :title="modalState.title"
       :visible="modalState.visible"
       @cancel="fnModalVisibleClose"
     >
-      <div class="raw-title">信令数据</div>
+      <div class="raw-title">{{ t('views.trace.analysis.signalData') }}</div>
       <a-row
         class="raw"
         :gutter="16"
@@ -435,17 +457,17 @@ onMounted(() => {
       </a-row>
       <a-divider />
       <div class="raw-title">
-        信令详情
+        {{ t('views.trace.analysis.signalDetail') }}
         <a-button
           type="dashed"
           size="small"
           @click.prevent="fnDownloadFile"
-          v-if="modalState.from.rawDataHTML !== '无信息'"
+          v-if="modalState.from.downBtn"
         >
           <template #icon>
             <DownloadOutlined />
           </template>
-          下载HTML
+          {{ t('views.trace.analysis.taskDownText') }}
         </a-button>
       </div>
       <div class="raw-html" v-html="modalState.from.rawDataHTML"></div>