修复控制台首页的两个问题

1. 修复用户分布显示问题:
   - 后端添加 online 和 offline 字段到用户分布数据
   - 确保前端能正确显示在线和离线用户数

2. 修复 ECharts 初始化报错:
   - 添加 DOM 元素存在性检查
   - 添加异步加载时的卸载检查
   - 在重新初始化前清理旧实例
   - 防止页面切换时的空指针错误
This commit is contained in:
2026-05-08 15:34:00 +08:00
parent 63cc2f80b3
commit 3a734e6dad
2 changed files with 26 additions and 4 deletions
+4 -2
View File
@@ -130,8 +130,10 @@ func handleGetDashboard(c *gin.Context) {
provinces := make([]gin.H, 0, len(deviceCounts)) provinces := make([]gin.H, 0, len(deviceCounts))
for _, dc := range deviceCounts { for _, dc := range deviceCounts {
provinces = append(provinces, gin.H{ provinces = append(provinces, gin.H{
"name": dc.DeviceType, "name": dc.DeviceType,
"count": dc.Count, "count": dc.Count,
"online": 0,
"offline": dc.Count,
}) })
} }
mu.Lock() mu.Lock()
+22 -2
View File
@@ -232,8 +232,10 @@ function fetchCurrentUser() {
} }
async function initMapChart() { async function initMapChart() {
if (!mapChart.value) if (!mapChart.value) {
console.warn('Map chart container not found')
return return
}
try { try {
const [echarts, worldResponse] = await Promise.all([ const [echarts, worldResponse] = await Promise.all([
@@ -241,6 +243,11 @@ async function initMapChart() {
fetch('/world.json'), fetch('/world.json'),
]) ])
if (!mapChart.value) {
console.warn('Map chart container was unmounted during initialization')
return
}
if (!worldResponse.ok) { if (!worldResponse.ok) {
throw new Error('Failed to load world map data') throw new Error('Failed to load world map data')
} }
@@ -249,6 +256,11 @@ async function initMapChart() {
echarts.registerMap('world', worldData) echarts.registerMap('world', worldData)
if (chartInstance) {
chartInstance.dispose()
chartInstance = null
}
chartInstance = echarts.init(mapChart.value) chartInstance = echarts.init(mapChart.value)
updateMapOption() updateMapOption()
@@ -609,11 +621,18 @@ function updateMapOption() {
} }
function initActivityChart() { function initActivityChart() {
if (!activityChart.value) if (!activityChart.value) {
console.warn('Activity chart container not found')
return return
}
try { try {
import('chart.js/auto').then(({ default: Chart }) => { import('chart.js/auto').then(({ default: Chart }) => {
if (!activityChart.value) {
console.warn('Activity chart container was unmounted during initialization')
return
}
const ctx = activityChart.value?.getContext('2d') const ctx = activityChart.value?.getContext('2d')
if (!ctx) if (!ctx)
return return
@@ -630,6 +649,7 @@ function initActivityChart() {
if (activityChartInstance) { if (activityChartInstance) {
activityChartInstance.destroy() activityChartInstance.destroy()
activityChartInstance = null
} }
activityChartInstance = new Chart(ctx, { activityChartInstance = new Chart(ctx, {