style: 信令分析多语言

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>