数据测试展示优化

web/apps/web-antd/src/views/match/datatest/index.vue

@@ -74,6 +74,10 @@
         </div>
       </div>
     </div>
+
+    <div class="data-table">
+      <vue-json-pretty :data="prettyData" :indent="prettyIndent" :deep="prettyDeep"></vue-json-pretty>
+    </div>
   </div>
 </template>
 
@@ -81,11 +85,19 @@
 import { ref, onMounted } from 'vue';
 import { requestClient } from '#/api/request';
 
+import dayjs from 'dayjs';
+import VueJsonPretty from 'vue-json-pretty';
+import 'vue-json-pretty/lib/styles.css';
+
 const currentTime = ref('');
 const gamesRelation = ref([]);
 const gamesSolution = ref({});
 const selectedTestMode = ref('1');
 
+const prettyData = ref(null);
+const prettyIndent = ref(2);
+const prettyDeep = ref(0);
+
 const updateTime = () => {
   currentTime.value = new Date().toLocaleString('zh-CN')
 }
@@ -104,20 +116,27 @@ const refreshData = () => {
 }
 
 const runTest = () => {
+  const gamesList = gamesRelation.value.map(item => {
+    const { eventId, leagueId, leagueName, teamHomeName, teamAwayName, timestamp } = item?.rel?.ps ?? {};
+    const datetime = dayjs(timestamp).format('YYYY-MM-DD HH:mm:ss');
+    return { eventId, leagueId, leagueName, teamHomeName, teamAwayName, datetime };
+  });
   gamesSolution.value.solutions.forEach((solution) => {
-    const { info: { id }} = solution;
-    const relation = gamesRelation.value.find((relation) => relation.id === id);
-    if (!relation) {
-      console.log('relation not found', id);
+    const { sid, info: { id }} = solution;
+    const currentGame = gamesList.find(game => game.eventId === id);
+    if (!currentGame) {
+      console.log('game not found', id);
     }
     else {
-      if (!relation.solutions) {
-        relation.solutions = [];
+      if (!currentGame.solutions) {
+        currentGame.solutions = [];
       }
-      relation.solutions.push(solution);
+      currentGame.solutions.push(sid);
     }
   });
-  console.log('gamesRelation', gamesRelation);
+  prettyData.value = gamesList;
+  prettyDeep.value = 2;
+  // console.log('gamesRelation', gamesList);
 }
 
 const verifyData = () => {
@@ -129,7 +148,9 @@ const verifyData = () => {
       invalidSolutions.push(solution)
     }
   });
-  console.log('invalidSolutions', invalidSolutions);
+  prettyData.value = invalidSolutions;
+  prettyDeep.value = 2;
+  // console.log('invalidSolutions', invalidSolutions);
 }
 
 const filterLive = () => {
@@ -138,7 +159,9 @@ const filterLive = () => {
     const { info: { ob, hg, ps } } = solution;
     return ps.stage;
   });
-  console.log('liveSolutions', liveSolutions);
+  prettyData.value = liveSolutions;
+  prettyDeep.value = 2;
+  // console.log('liveSolutions', liveSolutions);
 }
 
 // const currentTime = ref('')
@@ -283,4 +306,7 @@ onMounted(() => {
     }
   }
 }
+.data-table {
+  padding: 20px;
+}
 </style>

web/package.json

@@ -117,5 +117,9 @@
       "canvas",
       "node-gyp"
     ]
+  },
+  "dependencies": {
+    "dayjs": "catalog:",
+    "vue-json-pretty": "^2.5.0"
   }
 }

web/pnpm-lock.yaml

@@ -489,6 +489,13 @@ overrides:
 importers:
 
   .:
+    dependencies:
+      dayjs:
+        specifier: 'catalog:'
+        version: 1.11.13
+      vue-json-pretty:
+        specifier: ^2.5.0
+        version: 2.5.0(vue@3.5.13(typescript@5.8.3))
     devDependencies:
       '@changesets/changelog-github':
         specifier: 'catalog:'
@@ -10865,6 +10872,12 @@ packages:
     peerDependencies:
       vue: ^3.5.13
 
+  vue-json-pretty@2.5.0:
+    resolution: {integrity: sha512-nZA6qXYaiMaE2J0HkKtkrLcPJoN03SDSBdZWEPiRwoOVySWOfoZCyadhBwBN6wAHTga+c/R49ExGWoKFXnu37A==}
+    engines: {node: '>= 10.0.0', npm: '>= 5.0.0'}
+    peerDependencies:
+      vue: ^3.5.13
+
   vue-json-viewer@3.0.4:
     resolution: {integrity: sha512-pnC080rTub6YjccthVSNQod2z9Sl5IUUq46srXtn6rxwhW8QM4rlYn+CTSLFKXWfw+N3xv77Cioxw7B4XUKIbQ==}
     peerDependencies:
@@ -21303,6 +21316,10 @@ snapshots:
       '@vue/devtools-api': 6.6.4
       vue: 3.5.13(typescript@5.8.3)
 
+  vue-json-pretty@2.5.0(vue@3.5.13(typescript@5.8.3)):
+    dependencies:
+      vue: 3.5.13(typescript@5.8.3)
+
   vue-json-viewer@3.0.4(vue@3.5.13(typescript@5.8.3)):
     dependencies:
       clipboard: 2.0.11