Mon Jul 17 10:05:00 CST 2023 inscode

src/components/GameChart.vue

@@ -4,33 +4,36 @@
             <a style="font-size: 24px;font-weight:bolder;">{{ state.title }}</a>
         </div>
     </div>
-    <div>
-        <a-table :scroll="{ x: 800, y: 600 }" :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 === 'url'">
-                    <a :href="record.url" target="_blank">
-                        {{ record.url }}
-                    </a>
-                </template>
-                <template v-else-if="column.key === 'score'">
-                    <span>
-                        <a-tag :color="record.score < 60 ? 'volcano' : record.score > 80 ? 'geekblue' : 'green'">
-                            {{ record.score }}
-                        </a-tag>
-                    </span>
-                </template>
-                <template v-else-if="column.key === 'option'">
-                    <a-tooltip placement="topLeft" :title="record.editUrl">
-                        <a :href="record.editUrl" target="_blank">
-                            编辑文章
+    <div style="display:flex">
+        <div id="barChartId" style="flex:1;width:600px;height:900px;margin: 0 auto;border: 1px solid #333;"></div>
+        <div style="width: 700px;height:900px;border: 1px solid #333;">
+            <a-table :scroll="{ x: 600, y: 750 }" :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 === 'url'">
+                        <a :href="record.url" target="_blank">
+                            {{ record.url }}
                         </a>
-                    </a-tooltip>
+                    </template>
+                    <template v-else-if="column.key === 'score'">
+                        <span>
+                            <a-tag :color="record.score < 60 ? 'volcano' : record.score > 80 ? 'geekblue' : 'green'">
+                                {{ record.score }}
+                            </a-tag>
+                        </span>
+                    </template>
+                    <template v-else-if="column.key === 'option'">
+                        <a-tooltip placement="topLeft" :title="record.editUrl">
+                            <a :href="record.editUrl" target="_blank">
+                                编辑文章
+                            </a>
+                        </a-tooltip>
+                    </template>
                 </template>
-            </template>
-        </a-table>
+            </a-table>
+        </div>
+
     </div>
-    <div id="barChartId" style="width:100vw;height:900px;margin: 0 auto"></div>
 </template>
 <script setup>
 import chinaJson from './chinaGeo.js';
@@ -43,7 +46,7 @@ const props = defineProps({
 })
 
 const state = reactive({
-    title: '参赛选手所在城市',
+    title: 'python 爬虫赛道 参赛选手所在城市',
     linesCoord: [],
     focusCity: '深圳',
     locationGis: [],
@@ -57,8 +60,8 @@ const state = reactive({
     pagination: {
         total: 0,
         current: 1,
-        pageSize: 10,
-        pageSizeOptions: ['10', '50', '100'],
+        pageSize: 50,
+        pageSizeOptions: ['50', '100', '200'],
         showTotal: (total, range) => {
             return range[0] + '-' + range[1] + ' 共' + total + '个选手';
         },
@@ -77,10 +80,26 @@ function initDataSource() {
         })
         state.total += 1
     })
-    // map
+    state.pagination.current=1
+}
 
+function filterName(name) {
+    state.dataSource = []
+    state.total = 0
+    Object.keys(gameJson).forEach(uid => {
+        if(name.includes(gameJson[uid].name)){
+            state.dataSource.push({
+            uid: gameJson[uid].uid,
+            name: gameJson[uid].name,
+            ip: gameJson[uid].ip.split('：')[1]
+        })
+        state.total += 1
+        }
+    })
+    state.pagination.current=1
 }
 
+
 function initMap() {
     echarts.registerMap('chinaJson', chinaJson)
     let itemData = chinaJson.features
@@ -123,6 +142,10 @@ function initMap() {
         }
         continue
     }
+
+    setTimeout(()=>{
+        renderEchartBar()
+    },500)
 }
 
 // storage
@@ -134,16 +157,16 @@ function changePageSize(current, pageSize) {
     state.pagination.current = current
     state.pagination.pageSize = pageSize
 }
-watch(() => props.tableData,
-    (val) => {
-        state.dataSource = val
-        nextTick(() => {
-            renderEchartBar()
-        })
-    }, {
-    deep: true,
-    immediate: true
-})
+// watch(() => props.tableData,
+//     (val) => {
+//         state.dataSource = val
+//         nextTick(() => {
+//             renderEchartBar()
+//         })
+//     }, {
+//     deep: true,
+//     immediate: true
+// })
 function renderEchartBar() {
     // 基于准备好的dom，初始化echarts实例
     const domInstance = document.getElementById('barChartId')
@@ -161,29 +184,32 @@ function renderEchartBar() {
         },
         geo: {
             // 经纬度中心
-            center: state.centerLoction,
+            // center: state.centerLoction,
             type: 'map',
             map: 'chinaJson', // 这里的值要和上面registerMap的第一个参数一致
-            roam: true, // 拖拽
+            roam: false, // 拖拽
             nameProperty: 'name',
             // 悬浮标签
             label: {
                 type: 'map',
                 map: 'chinaJson', // 这里的值要和上面registerMap的第一个参数一致
                 // roam: false, // 拖拽
-                nameProperty: 'name',
+                // nameProperty: 'name',
                 show: true,
-                color: '#fff',
-                backgroundColor: '#546de5',
-                align: 'center',
-                fontSize: 10,
-                width: (function () {
-                    // let n = parseInt(Math.random() * 10)
-                    return 110
-                })(),
-                height: 50,
-                shadowColor: 'rgba(0,0,0,.7)',
-                borderRadius: 10
+                color: '#333',
+                formatter:function(params){
+                    return params.name
+                },
+                // backgroundColor: '#546de5',
+                // align: 'center',
+                // fontSize: 10,
+                // width: (function () {
+                //     // let n = parseInt(Math.random() * 10)
+                //     return 110
+                // })(),
+                // height: 50,
+                // shadowColor: 'rgba(0,0,0,.7)',
+                // borderRadius: 10
             },
             zoom: 1.2
         },
@@ -255,12 +281,8 @@ function renderEchartBar() {
     // 监听
     state.echartInstance = myChart;
     myChart.on('click', function (params) {
-        const findItem = state.dataSource.find(item => {
-            return item.postTime == params.name
-        })
-        if (params.name) {
-            window.open(findItem.url, '_blank')
-        }
+        console.log('params',params)
+        filterName(params.name)
     });
     window.onresize = myChart.resize;
 }