feat: 信令跟踪功能页面

src/views/traceManage/tshark/components/PacketTable.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { reactive, ref, computed, unref, onUpdated, watchEffect } from 'vue';
+import { reactive, ref, computed, unref, watchEffect } from 'vue';
 
 const props = defineProps({
   /**列表高度 */
@@ -122,8 +122,6 @@ const onScroll = (e: any) => {
   }
 };
 
-onUpdated(() => {});
-
 watchEffect(() => {
   clientData.value.forEach((_, index) => {
     const currentIndex = state.start + index;
@@ -136,10 +134,6 @@ watchEffect(() => {
     };
   });
 });
-
-const tableState = reactive({
-  selected: false,
-});
 </script>
 
 <template>
@@ -167,13 +161,13 @@ const tableState = reactive({
                 item.number === props.selectedFrame
                   ? 'blue'
                   : item.bg
-                  ? `#${item.bg.toString(16).padStart(6, '0')}`
+                  ? `#${Number(item.bg).toString(16).padStart(6, '0')}`
                   : '',
               color:
                 item.number === props.selectedFrame
                   ? 'white'
                   : item.fg
-                  ? `#${item.fg.toString(16).padStart(6, '0')}`
+                  ? `#${Number(item.fg).toString(16).padStart(6, '0')}`
                   : '',
             }"
             @click="onSelectedFrame(item.number)"
@@ -219,7 +213,7 @@ const tableState = reactive({
   display: flex;
   flex-direction: row;
   align-items: center;
-  border-top: 1px #f0f0f0 solid; 
+  border-top: 1px #f0f0f0 solid;
   cursor: pointer;
 }
 .tbody-item {