Auto Commit

src/components/GameChart.vue

 <template>
+
+    <Author />
     <div>
         <div style="text-align: center;">
             <a style="font-size: 24px;font-weight:bolder;">{{ state.title }}</a>
         </div>
     </div>
-    <Author />
-    <div style="display: flex;height: 100px;margin:10px 0">
+    <div style="display: flex;height: 100px;margin:10px 0 0 0">
         <div style="width: 600px;">
             赛道信息：<a href="https://bbs.csdn.net/topics/616574177" target="_blank">https://bbs.csdn.net/topics/616574177</a>
         </div>
-        <div style="width: 100%;text-align: right;">
+        <div style="width: 100%;text-align: right;margin-right: 20px;">
             <a-button @click="initDataSource" type="primary">
                 重置表格
             </a-button>
         </div>
     </div>
-    <div>
-       <div>
-        参赛报名总人数：{{ state.totlaNum }}
-       </div>
-       <div>
-        参赛报名有效人数：{{ state.totalRealNum }}
-       </div>
+    <div style="margin:0 auto;display: flex;">
+        <div>
+            参赛报名总人数：<span style="font-weight: bold;color:rgba(24, 144, 255)">{{ state.totlaNum }}</span>
+        </div>
+        <div style="width: 50px;">
+
+        </div>
+        <div>
+            参赛报名有效人数：<span style="font-weight: bold;color:rgba(9, 197, 103)">{{ state.totalRealNum }}</span>
+        </div>
     </div>
 
     <div style="display:flex;justify-content: space-between;">
@@ -31,12 +35,17 @@
             </div>
         </div>
         <div style="width: 600px;height:600px;border: 1px solid #333;">
-            <a-table :scroll="{ x: 600, y: 450 }" :columns="state.columns" :data-source="state.dataSource"
+            <a-table :scroll="{ x: 500, y: 470 }" :columns="state.columns" :data-source="state.dataSource"
                 :loading="state.loading" :pagination="state.pagination" bordered style="border-bottom:1px solid #f0f0f0;">
                 <template #bodyCell="{ column, record }">
                     <template v-if="column.key === 'imgSrc'">
                         <a-image :src="record.imgSrc" height="50" :alt="record.imgSrc" />
                     </template>
+                    <template v-else-if="column.key === 'name'">
+                        <a :href="record.url" target="_blank">
+                            {{ record.name }}
+                        </a>
+                    </template>
                 </template>
             </a-table>
         </div>
@@ -58,7 +67,7 @@ const state = reactive({
     title: 'vue3 ts antd 参赛选手所在城市',
     clickCity: '全国',
     maxCityNum: 0,
-    totalRealNum:0,
+    totalRealNum: 0,
     totlaNum: '',
     linesCoord: [],
     focusCity: '广东省',
@@ -87,12 +96,19 @@ function initDataSource() {
     state.dataSource = []
     state.total = 0
     Object.keys(gameJson).forEach(uid => {
+        const isTruth = gameJson[uid].postUrl.includes(gameJson[uid].url)
         state.dataSource.push({
             uid: gameJson[uid].uid,
             name: gameJson[uid].name,
             imgSrc: gameJson[uid].imgSrc,
-            ip: gameJson[uid].ip.split('：')[1]
+            url: gameJson[uid].url,
+            ip: gameJson[uid].ip.split('：')[1],
+            status: isTruth ? '有效' : '无效'
         })
+        // 有效人数
+        if (isTruth) {
+            state.totalRealNum += 1
+        }
         state.total += 1
     })
     state.pagination.current = 1
@@ -221,7 +237,7 @@ function renderEchartBar() {
         title: {
             text: '中国地图',
             subtext: 'chinaJson',
-            color:'#fff'
+            color: '#fff'
         },
         visualMap: { // 设置视觉映射
             min: 0,

src/components/const.js

@@ -51,9 +51,15 @@ export const tableColumns= [
     }, {
       title: '用户昵称',
       sorter: true,
-      dataIndex: 'name',
-      sorter: (a, b) => a.name[0].charCodeAt() - b.name[0].charCodeAt(),
-    }, {
+      key: 'name',
+    }, 
+    {
+      title: '报名状态',
+      sorter: true,
+      dataIndex: 'status',
+      sorter: (a, b) => a.status[0].charCodeAt() - b.status[0].charCodeAt(),
+    },
+    {
       title: '城市',
       sorter: true,
       dataIndex: 'ip',