Tianpao/ETMC.Web
1
0
Fork 0
mirror of https://github.com/EasyTierMC/ETMC.Web.git synced 2025-12-07 13:05:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat:nodes map and info card

Browse Source
This commit is contained in:
Tianpao
2025-11-22 02:05:29 +08:00
parent 5055f2bf6d
commit 2d83037540
3 changed files with 82 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
public/china.json → src/assets/china.json
View File

23
src/components/dashboard/Map.vue
View File

@@ -5,9 +5,9 @@
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { onMounted, ref } from 'vue';
import VChart from 'vue-echarts';
import china from "../../../public/china.json"
import china from "@/assets/china.json"
import * as echarts from 'echarts';
echarts.registerMap('china', china as any);
@@ -60,7 +60,7 @@ const option = ref<echarts.EChartsOption>({
}
],
textStyle: {
color:'#fff'
color: window.matchMedia('(prefers-color-scheme: dark)').matches ? '#fff' : '#000'
}
},
series: [{
@@ -82,11 +82,14 @@ const option = ref<echarts.EChartsOption>({
data
}]
});
</script>
<style scoped>
.chart {
height: 600px;
width: 30%;
onMounted(() => {
matchMedia('(prefers-color-scheme: light)').addEventListener('change', (e) => {
const color = option.value.visualMap as { textStyle: { color: string } };
if (e.matches) {
color.textStyle.color = '#000'
} else {
color.textStyle.color = '#fff'
}
</style>
})
})
</script>

40
src/views/HomeView.vue
View File

@@ -1,8 +1,44 @@
<template>
<section style="padding:2rem; text-align:center;">
<h2>欢迎来到 EasyTierMC Uptime</h2>
<h2 class="text-2xl font-bold mb-2">欢迎来到 EasyTierMC Uptime</h2>
<p>使用上方导航查看节点监控或提交新的节点。</p>
<Map />
<div>
<div class="flex gap-2 grid-cols-[200px_minmax(900px,1fr)_100px] justify-center-safe">
<div class="card w-96 bg-base-100 card-sm shadow-sm">
<div class="card-body">
<h2 class="card-title font-bold">总节点数</h2>
<p class="text-3xl font-bold">211</p>
</div>
</div>
<div class="card w-96 bg-base-100 card-sm shadow-sm">
<div class="card-body">
<h2 class="card-title font-bold">在线节点数</h2>
<p class="text-3xl font-bold">205</p>
</div>
</div>
<div class="card w-96 bg-base-100 card-sm shadow-sm">
<div class="card-body">
<h2 class="card-title font-bold">调配节点数</h2>
<p class="text-3xl font-bold">42</p>
</div>
</div>
<div class="card w-96 bg-base-100 card-sm shadow-sm">
<div class="card-body">
<h2 class="card-title font-bold">当前连接数/可连接数</h2>
<p class="text-3xl font-bold">211/114</p>
</div>
</div>
<div class="card w-96 bg-base-100 card-sm shadow-sm">
<div class="card-body">
<h2 class="card-title font-bold">总负载</h2>
<p class="text-3xl font-bold">114%</p>
</div>
</div>
</div>
</div>
<div class="flex justify-center items-center">
<Map class="w-1/2 h-96" />
</div>
</section>
</template>