feat: 网元信令跟踪功能

src/views/traceManage/tshark/index.vue

@@ -8,11 +8,12 @@ import DissectionDump from './components/DissectionDump.vue';
 import PacketTable from './components/PacketTable.vue';
 import { usePCAP, NO_SELECTION } from './hooks/usePCAP';
 import { parseSizeFromFile } from '@/utils/parse-utils';
+import { parseDateToStr } from '@/utils/date-utils';
 import useI18n from '@/hooks/useI18n';
 const { t } = useI18n();
 const {
   state,
-  handleSelectedTreeEntry,
+  handleSelectedTree,
   handleSelectedFindSelection,
   handleSelectedFrame,
   handleScrollBottom,
@@ -49,8 +50,9 @@ function fnUpload(up: UploadRequestOption) {
       :loading="!state.initialized"
       :body-style="{ padding: '12px' }"
     >
-      <div class="toolbar">
-        <a-space :size="8" class="toolbar-oper">
+      <!-- 插槽-卡片左侧侧 -->
+      <template #title>
+        <a-space :size="8" align="center">
           <a-upload
             name="file"
             list-type="picture"
@@ -64,61 +66,94 @@ function fnUpload(up: UploadRequestOption) {
           </a-upload>
           <a-button @click="handleLoadExample()">Example</a-button>
         </a-space>
-
-        <div class="toolbar-info">
+      </template>
+      <!-- 插槽-卡片右侧 -->
+      <template #extra>
+        <a-space :size="8" align="center">
           <a-tag color="green" v-show="!!state.currentFilter">
             {{ state.currentFilter }}
           </a-tag>
           <span> Matched Frame: {{ state.totalFrames }} </span>
-        </div>
-
-        <!-- 包信息 -->
-        <a-popover
-          trigger="click"
-          placement="bottomLeft"
-          v-if="state.summary.filename"
-        >
-          <template #content>
-            <div class="summary">
-              <div class="summary-item">
-                <span>Type:</span>
-                <span>{{ state.summary.file_type }}</span>
+          <!-- 包信息 -->
+          <a-popover
+            trigger="click"
+            placement="bottomLeft"
+            v-if="state.summary.filename"
+          >
+            <template #content>
+              <div class="summary">
+                <div class="summary-item">
+                  <span>Type:</span>
+                  <span>{{ state.summary.file_type }}</span>
+                </div>
+                <div class="summary-item">
+                  <span>Size:</span>
+                  <span>{{
+                    parseSizeFromFile(state.summary.file_length)
+                  }}</span>
+                </div>
+                <div class="summary-item">
+                  <span>Encapsulation:</span>
+                  <span>{{ state.summary.file_encap_type }}</span>
+                </div>
+                <div class="summary-item">
+                  <span>Packets:</span>
+                  <span>{{ state.summary.packet_count }}</span>
+                </div>
+                <div class="summary-item">
+                  <span>Start Time:</span>
+                  <span>
+                    {{
+                      parseDateToStr(
+                        state.summary.start_time * 1000,
+                        'YYYY-MM-DD HH:mm:ss.SSS'
+                      )
+                    }}
+                  </span>
+                </div>
+                <div class="summary-item">
+                  <span>Stop Time:</span>
+                  <span>
+                    {{
+                      parseDateToStr(
+                        state.summary.stop_time * 1000,
+                        'YYYY-MM-DD HH:mm:ss.SSS'
+                      )
+                    }}
+                  </span>
+                </div>
+                <div class="summary-item">
+                  <span>Duration:</span>
+                  <span>{{ Math.round(state.summary.elapsed_time) }}s</span>
+                </div>
               </div>
-              <div class="summary-item">
-                <span>Size:</span>
-                <span>{{ parseSizeFromFile(state.summary.file_length) }}</span>
-              </div>
-              <div class="summary-item">
-                <span>Encapsulation:</span>
-                <span>{{ state.summary.file_encap_type }}</span>
-              </div>
-              <div class="summary-item">
-                <span>Packets:</span>
-                <span>{{ state.summary.packet_count }}</span>
-              </div>
-              <div class="summary-item">
-                <span>Duration:</span>
-                <span>{{ Math.round(state.summary.elapsed_time) }}s</span>
-              </div>
-            </div>
-          </template>
-          <InfoCircleOutlined />
-        </a-popover>
-      </div>
+            </template>
+            <InfoCircleOutlined />
+          </a-popover>
+        </a-space>
+      </template>
 
       <!-- 包数据表过滤 -->
       <a-input-group compact>
-        <a-input
+        <a-auto-complete
           v-model:value="state.filter"
-          placeholder="display filter, example: tcp"
-          :allow-clear="true"
+          :options="[
+            { value: 'http || tcp.port == 33030 || http2' },
+            { value: 'ip.src== 172.17.0.19 && ip.dst == 172.17.0.77' },
+            { value: 'sip || ngap' },
+          ]"
           style="width: calc(100% - 100px)"
-          @pressEnter="handleFilterFrames"
+          :allow-clear="true"
         >
-          <template #prefix>
-            <FilterOutlined />
-          </template>
-        </a-input>
+          <a-input
+            placeholder="display filter, example: tcp"
+            @pressEnter="handleFilterFrames"
+          >
+            <template #prefix>
+              <FilterOutlined />
+            </template>
+          </a-input>
+        </a-auto-complete>
         <a-button
           type="primary"
           html-type="submit"
@@ -143,14 +178,18 @@ function fnUpload(up: UploadRequestOption) {
         :onScrollBottom="handleScrollBottom"
       ></PacketTable>
 
-      <a-row>
+      <a-row
+        :gutter="16"
+        style="border: 2px rgb(217 217 217) solid; border-radius: 6px"
+        v-show="state.selectedFrame > 0"
+      >
         <a-col :lg="12" :md="12" :xs="24" class="tree">
           <!-- 帧数据 -->
           <DissectionTree
             id="root"
-            :select="handleSelectedTreeEntry"
-            :selected="state.selectedTreeEntry"
-            :tree="state.selectedPacket.tree"
+            :select="handleSelectedTree"
+            :selected="state.selectedTree"
+            :tree="state.packetFrame.tree"
           />
         </a-col>
         <a-col :lg="12" :md="12" :xs="24" class="dump">
@@ -163,15 +202,15 @@ function fnUpload(up: UploadRequestOption) {
             <a-tab-pane
               :key="idx"
               :tab="v.name"
-              v-for="(v, idx) in state.selectedPacket.data_sources"
+              v-for="(v, idx) in state.packetFrame.data_sources"
               style="overflow: auto"
             >
               <DissectionDump
                 :base64="v.data"
                 :select="(pos:number)=>handleSelectedFindSelection(idx, pos)"
                 :selected="
-                  idx === state.selectedTreeEntry.idx
-                    ? state.selectedTreeEntry
+                  idx === state.selectedTree.idx
+                    ? state.selectedTree
                     : NO_SELECTION
                 "
               />
@@ -184,17 +223,6 @@ function fnUpload(up: UploadRequestOption) {
 </template>
 
 <style scoped>
-.toolbar {
-  display: flex;
-  align-items: center;
-  margin-bottom: 12px;
-}
-.toolbar-info {
-  flex: 1;
-  text-align: right;
-  padding-right: 8px;
-}
-
 .summary {
   display: flex;
   flex-direction: column;