上传前端代码 #64
@ -54,7 +54,7 @@ const clusterData = {
|
||||
userConsumption: [
|
||||
{ rank: 1, name: '用户A', amount: 520000 },
|
||||
{ rank: 2, name: '用户B', amount: 450000 },
|
||||
{ rank: 3, name: '用户B', amount: 186000 },
|
||||
{ rank: 3, name: '用户C', amount: 186000 },
|
||||
{ rank: 4, name: '用户D', amount: 120000 },
|
||||
{ rank: 5, name: '用户E', amount: 56000 },
|
||||
{ rank: 6, name: '用户F', amount: 43000 },
|
||||
@ -169,6 +169,404 @@ const clusterData = {
|
||||
{ name: '在线数量', value: 0 }
|
||||
]
|
||||
}
|
||||
},
|
||||
// 内蒙
|
||||
neimeng: {
|
||||
header: {
|
||||
demandPower: Math.floor(1500 * 0.294),
|
||||
supplyPower: Math.floor(35320 * 0.294),
|
||||
clusterCount: 1,
|
||||
customerCount: Math.floor(352 * 0.294),
|
||||
chipCount: Math.floor(75368 * 0.294),
|
||||
modelCount: Math.floor(75 * 0.294)
|
||||
},
|
||||
|
||||
left: {
|
||||
chipScale: {
|
||||
NVIDIA: Math.floor(33000 * 0.294),
|
||||
ascend: Math.floor(5000 * 0.294),
|
||||
supercomputer: Math.floor(8000 * 0.294),
|
||||
total: Math.floor(5100 * 0.294)
|
||||
},
|
||||
|
||||
runningChips: [16909, 15050, 16240, 21470, 18940, 18950, 17450].map(num => Math.floor(num * 0.294)),
|
||||
|
||||
modelUsage: [
|
||||
{ name: 'deepseek', value: Math.floor(105 * 0.294) },
|
||||
{ name: '通义千问', value: Math.floor(78 * 0.294) },
|
||||
{ name: 'kimi', value: Math.floor(70 * 0.294) },
|
||||
{ name: '豆包', value: Math.floor(120 * 0.294) },
|
||||
{ name: '文心一言', value: Math.floor(60 * 0.294) },
|
||||
{ name: '元宝', value: Math.floor(85 * 0.294) }
|
||||
],
|
||||
|
||||
tokenUsage: [
|
||||
{ name: '千问3-max', value: Math.floor(5000 * 0.294) },
|
||||
{ name: 'kimi', value: Math.floor(4300 * 0.294) },
|
||||
{ name: '豆包', value: Math.floor(3500 * 0.294) },
|
||||
{ name: 'deepseek', value: Math.floor(3200 * 0.294) },
|
||||
{ name: '千帆', value: Math.floor(2800 * 0.294) }
|
||||
]
|
||||
},
|
||||
|
||||
right: {
|
||||
appTypes: ['智能推理', '智能训练', '图形渲染', '蛋白质分析', '其他'],
|
||||
|
||||
userConsumption: [
|
||||
{ rank: 1, name: '用户A', amount: Math.floor(520000 * 0.294) },
|
||||
{ rank: 2, name: '用户B', amount: Math.floor(450000 * 0.294) },
|
||||
{ rank: 3, name: '用户C', amount: Math.floor(186000 * 0.294) },
|
||||
{ rank: 4, name: '用户D', amount: Math.floor(120000 * 0.294) },
|
||||
{ rank: 5, name: '用户E', amount: Math.floor(56000 * 0.294) },
|
||||
{ rank: 6, name: '用户F', amount: Math.floor(43000 * 0.294) },
|
||||
{ rank: 7, name: '用户G', amount: Math.floor(35000 * 0.294) },
|
||||
{ rank: 8, name: '用户H', amount: Math.floor(28000 * 0.294) }
|
||||
],
|
||||
|
||||
powerUsage: [12300, 11500, 11500, 13400, 12900, 13500, 13200].map(num => Math.floor(num * 0.294))
|
||||
},
|
||||
|
||||
overview: {
|
||||
supply: [
|
||||
{ name: 'CPU', value: Math.floor(2350 * 0.294) },
|
||||
{ name: 'GPU', value: Math.floor(5500 * 0.294) },
|
||||
{ name: '进程数量', value: 0 },
|
||||
{ name: '资源统计', value: 0 },
|
||||
{ name: '运行中', value: '30%' },
|
||||
{ name: '关机中', value: '70%' },
|
||||
{ name: '故障数量', value: 0 },
|
||||
{ name: '在线数量', value: 0 }
|
||||
],
|
||||
demand: [
|
||||
{ name: 'CPU', value: 0 },
|
||||
{ name: 'GPU', value: 0 },
|
||||
{ name: '进程数量', value: 0 },
|
||||
{ name: '资源统计', value: 0 },
|
||||
{ name: '运行中', value: 0 },
|
||||
{ name: '关机中', value: 0 },
|
||||
{ name: '故障数量', value: 0 },
|
||||
{ name: '在线数量', value: 0 }
|
||||
]
|
||||
}
|
||||
},
|
||||
// 新疆集群数据 (全国数据 × 0.156)
|
||||
xinjiang: {
|
||||
header: {
|
||||
demandPower: Math.floor(1500 * 0.156),
|
||||
supplyPower: Math.floor(35320 * 0.156),
|
||||
clusterCount: 1,
|
||||
customerCount: Math.floor(352 * 0.156),
|
||||
chipCount: Math.floor(75368 * 0.156),
|
||||
modelCount: Math.floor(75 * 0.156)
|
||||
},
|
||||
|
||||
left: {
|
||||
chipScale: {
|
||||
NVIDIA: Math.floor(33000 * 0.156),
|
||||
ascend: Math.floor(5000 * 0.156),
|
||||
supercomputer: Math.floor(8000 * 0.156),
|
||||
total: Math.floor(5100 * 0.156)
|
||||
},
|
||||
|
||||
runningChips: [16909, 15050, 16240, 21470, 18940, 18950, 17450].map(num => Math.floor(num * 0.156)),
|
||||
|
||||
modelUsage: [
|
||||
{ name: 'deepseek', value: Math.floor(105 * 0.156) },
|
||||
{ name: '通义千问', value: Math.floor(78 * 0.156) },
|
||||
{ name: 'kimi', value: Math.floor(70 * 0.156) },
|
||||
{ name: '豆包', value: Math.floor(120 * 0.156) },
|
||||
{ name: '文心一言', value: Math.floor(60 * 0.156) },
|
||||
{ name: '元宝', value: Math.floor(85 * 0.156) }
|
||||
],
|
||||
|
||||
tokenUsage: [
|
||||
{ name: '千问3-max', value: Math.floor(5000 * 0.156) },
|
||||
{ name: 'kimi', value: Math.floor(4300 * 0.156) },
|
||||
{ name: '豆包', value: Math.floor(3500 * 0.156) },
|
||||
{ name: 'deepseek', value: Math.floor(3200 * 0.156) },
|
||||
{ name: '千帆', value: Math.floor(2800 * 0.156) }
|
||||
]
|
||||
},
|
||||
|
||||
right: {
|
||||
appTypes: ['智能推理', '智能训练', '图形渲染', '蛋白质分析', '其他'],
|
||||
|
||||
userConsumption: [
|
||||
{ rank: 1, name: '用户A', amount: Math.floor(520000 * 0.156) },
|
||||
{ rank: 2, name: '用户B', amount: Math.floor(450000 * 0.156) },
|
||||
{ rank: 3, name: '用户C', amount: Math.floor(186000 * 0.156) },
|
||||
{ rank: 4, name: '用户D', amount: Math.floor(120000 * 0.156) },
|
||||
{ rank: 5, name: '用户E', amount: Math.floor(56000 * 0.156) },
|
||||
{ rank: 6, name: '用户F', amount: Math.floor(43000 * 0.156) },
|
||||
{ rank: 7, name: '用户G', amount: Math.floor(35000 * 0.156) },
|
||||
{ rank: 8, name: '用户H', amount: Math.floor(28000 * 0.156) }
|
||||
],
|
||||
|
||||
powerUsage: [12300, 11500, 11500, 13400, 12900, 13500, 13200].map(num => Math.floor(num * 0.156))
|
||||
},
|
||||
|
||||
overview: {
|
||||
supply: [
|
||||
{ name: 'CPU', value: Math.floor(2350 * 0.156) },
|
||||
{ name: 'GPU', value: Math.floor(5500 * 0.156) },
|
||||
{ name: '进程数量', value: 0 },
|
||||
{ name: '资源统计', value: 0 },
|
||||
{ name: '运行中', value: '30%' },
|
||||
{ name: '关机中', value: '70%' },
|
||||
{ name: '故障数量', value: 0 },
|
||||
{ name: '在线数量', value: 0 }
|
||||
],
|
||||
demand: [
|
||||
{ name: 'CPU', value: 0 },
|
||||
{ name: 'GPU', value: 0 },
|
||||
{ name: '进程数量', value: 0 },
|
||||
{ name: '资源统计', value: 0 },
|
||||
{ name: '运行中', value: 0 },
|
||||
{ name: '关机中', value: 0 },
|
||||
{ name: '故障数量', value: 0 },
|
||||
{ name: '在线数量', value: 0 }
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
// 长三角集群数据 (全国数据 × 0.098)
|
||||
changsanjiao: {
|
||||
header: {
|
||||
demandPower: Math.floor(1500 * 0.098),
|
||||
supplyPower: Math.floor(35320 * 0.098),
|
||||
clusterCount: 1,
|
||||
customerCount: Math.floor(352 * 0.098),
|
||||
chipCount: Math.floor(75368 * 0.098),
|
||||
modelCount: Math.floor(75 * 0.098)
|
||||
},
|
||||
|
||||
left: {
|
||||
chipScale: {
|
||||
NVIDIA: Math.floor(33000 * 0.098),
|
||||
ascend: Math.floor(5000 * 0.098),
|
||||
supercomputer: Math.floor(8000 * 0.098),
|
||||
total: Math.floor(5100 * 0.098)
|
||||
},
|
||||
|
||||
runningChips: [16909, 15050, 16240, 21470, 18940, 18950, 17450].map(num => Math.floor(num * 0.098)),
|
||||
|
||||
modelUsage: [
|
||||
{ name: 'deepseek', value: Math.floor(105 * 0.098) },
|
||||
{ name: '通义千问', value: Math.floor(78 * 0.098) },
|
||||
{ name: 'kimi', value: Math.floor(70 * 0.098) },
|
||||
{ name: '豆包', value: Math.floor(120 * 0.098) },
|
||||
{ name: '文心一言', value: Math.floor(60 * 0.098) },
|
||||
{ name: '元宝', value: Math.floor(85 * 0.098) }
|
||||
],
|
||||
|
||||
tokenUsage: [
|
||||
{ name: '千问3-max', value: Math.floor(5000 * 0.098) },
|
||||
{ name: 'kimi', value: Math.floor(4300 * 0.098) },
|
||||
{ name: '豆包', value: Math.floor(3500 * 0.098) },
|
||||
{ name: 'deepseek', value: Math.floor(3200 * 0.098) },
|
||||
{ name: '千帆', value: Math.floor(2800 * 0.098) }
|
||||
]
|
||||
},
|
||||
|
||||
right: {
|
||||
appTypes: ['智能推理', '智能训练', '图形渲染', '蛋白质分析', '其他'],
|
||||
|
||||
userConsumption: [
|
||||
{ rank: 1, name: '用户A', amount: Math.floor(520000 * 0.098) },
|
||||
{ rank: 2, name: '用户B', amount: Math.floor(450000 * 0.098) },
|
||||
{ rank: 3, name: '用户C', amount: Math.floor(186000 * 0.098) },
|
||||
{ rank: 4, name: '用户D', amount: Math.floor(120000 * 0.098) },
|
||||
{ rank: 5, name: '用户E', amount: Math.floor(56000 * 0.098) },
|
||||
{ rank: 6, name: '用户F', amount: Math.floor(43000 * 0.098) },
|
||||
{ rank: 7, name: '用户G', amount: Math.floor(35000 * 0.098) },
|
||||
{ rank: 8, name: '用户H', amount: Math.floor(28000 * 0.098) }
|
||||
],
|
||||
|
||||
powerUsage: [12300, 11500, 11500, 13400, 12900, 13500, 13200].map(num => Math.floor(num * 0.098))
|
||||
},
|
||||
|
||||
overview: {
|
||||
supply: [
|
||||
{ name: 'CPU', value: Math.floor(2350 * 0.098) },
|
||||
{ name: 'GPU', value: Math.floor(5500 * 0.098) },
|
||||
{ name: '进程数量', value: 0 },
|
||||
{ name: '资源统计', value: 0 },
|
||||
{ name: '运行中', value: '30%' },
|
||||
{ name: '关机中', value: '70%' },
|
||||
{ name: '故障数量', value: 0 },
|
||||
{ name: '在线数量', value: 0 }
|
||||
],
|
||||
demand: [
|
||||
{ name: 'CPU', value: 0 },
|
||||
{ name: 'GPU', value: 0 },
|
||||
{ name: '进程数量', value: 0 },
|
||||
{ name: '资源统计', value: 0 },
|
||||
{ name: '运行中', value: 0 },
|
||||
{ name: '关机中', value: 0 },
|
||||
{ name: '故障数量', value: 0 },
|
||||
{ name: '在线数量', value: 0 }
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
// 珠三角集群数据 (全国数据 × 0.117)
|
||||
zhusanjiao: {
|
||||
header: {
|
||||
demandPower: Math.floor(1500 * 0.117),
|
||||
supplyPower: Math.floor(35320 * 0.117),
|
||||
clusterCount: 1,
|
||||
customerCount: Math.floor(352 * 0.117),
|
||||
chipCount: Math.floor(75368 * 0.117),
|
||||
modelCount: Math.floor(75 * 0.117)
|
||||
},
|
||||
|
||||
left: {
|
||||
chipScale: {
|
||||
NVIDIA: Math.floor(33000 * 0.117),
|
||||
ascend: Math.floor(5000 * 0.117),
|
||||
supercomputer: Math.floor(8000 * 0.117),
|
||||
total: Math.floor(5100 * 0.117)
|
||||
},
|
||||
|
||||
runningChips: [16909, 15050, 16240, 21470, 18940, 18950, 17450].map(num => Math.floor(num * 0.117)),
|
||||
|
||||
modelUsage: [
|
||||
{ name: 'deepseek', value: Math.floor(105 * 0.117) },
|
||||
{ name: '通义千问', value: Math.floor(78 * 0.117) },
|
||||
{ name: 'kimi', value: Math.floor(70 * 0.117) },
|
||||
{ name: '豆包', value: Math.floor(120 * 0.117) },
|
||||
{ name: '文心一言', value: Math.floor(60 * 0.117) },
|
||||
{ name: '元宝', value: Math.floor(85 * 0.117) }
|
||||
],
|
||||
|
||||
tokenUsage: [
|
||||
{ name: '千问3-max', value: Math.floor(5000 * 0.117) },
|
||||
{ name: 'kimi', value: Math.floor(4300 * 0.117) },
|
||||
{ name: '豆包', value: Math.floor(3500 * 0.117) },
|
||||
{ name: 'deepseek', value: Math.floor(3200 * 0.117) },
|
||||
{ name: '千帆', value: Math.floor(2800 * 0.117) }
|
||||
]
|
||||
},
|
||||
|
||||
right: {
|
||||
appTypes: ['智能推理', '智能训练', '图形渲染', '蛋白质分析', '其他'],
|
||||
|
||||
userConsumption: [
|
||||
{ rank: 1, name: '用户A', amount: Math.floor(520000 * 0.117) },
|
||||
{ rank: 2, name: '用户B', amount: Math.floor(450000 * 0.117) },
|
||||
{ rank: 3, name: '用户C', amount: Math.floor(186000 * 0.117) },
|
||||
{ rank: 4, name: '用户D', amount: Math.floor(120000 * 0.117) },
|
||||
{ rank: 5, name: '用户E', amount: Math.floor(56000 * 0.117) },
|
||||
{ rank: 6, name: '用户F', amount: Math.floor(43000 * 0.117) },
|
||||
{ rank: 7, name: '用户G', amount: Math.floor(35000 * 0.117) },
|
||||
{ rank: 8, name: '用户H', amount: Math.floor(28000 * 0.117) }
|
||||
],
|
||||
|
||||
powerUsage: [12300, 11500, 11500, 13400, 12900, 13500, 13200].map(num => Math.floor(num * 0.117))
|
||||
},
|
||||
|
||||
overview: {
|
||||
supply: [
|
||||
{ name: 'CPU', value: Math.floor(2350 * 0.117) },
|
||||
{ name: 'GPU', value: Math.floor(5500 * 0.117) },
|
||||
{ name: '进程数量', value: 0 },
|
||||
{ name: '资源统计', value: 0 },
|
||||
{ name: '运行中', value: '30%' },
|
||||
{ name: '关机中', value: '70%' },
|
||||
{ name: '故障数量', value: 0 },
|
||||
{ name: '在线数量', value: 0 }
|
||||
],
|
||||
demand: [
|
||||
{ name: 'CPU', value: 0 },
|
||||
{ name: 'GPU', value: 0 },
|
||||
{ name: '进程数量', value: 0 },
|
||||
{ name: '资源统计', value: 0 },
|
||||
{ name: '运行中', value: 0 },
|
||||
{ name: '关机中', value: 0 },
|
||||
{ name: '故障数量', value: 0 },
|
||||
{ name: '在线数量', value: 0 }
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
// 川渝集群数据 (全国数据 × 0.156)
|
||||
chuanyu: {
|
||||
header: {
|
||||
demandPower: Math.floor(1500 * 0.156),
|
||||
supplyPower: Math.floor(35320 * 0.156),
|
||||
clusterCount: 1,
|
||||
customerCount: Math.floor(352 * 0.156),
|
||||
chipCount: Math.floor(75368 * 0.156),
|
||||
modelCount: Math.floor(75 * 0.156)
|
||||
},
|
||||
|
||||
left: {
|
||||
chipScale: {
|
||||
NVIDIA: Math.floor(33000 * 0.156),
|
||||
ascend: Math.floor(5000 * 0.156),
|
||||
supercomputer: Math.floor(8000 * 0.156),
|
||||
total: Math.floor(5100 * 0.156)
|
||||
},
|
||||
|
||||
runningChips: [16909, 15050, 16240, 21470, 18940, 18950, 17450].map(num => Math.floor(num * 0.156)),
|
||||
|
||||
modelUsage: [
|
||||
{ name: 'deepseek', value: Math.floor(105 * 0.156) },
|
||||
{ name: '通义千问', value: Math.floor(78 * 0.156) },
|
||||
{ name: 'kimi', value: Math.floor(70 * 0.156) },
|
||||
{ name: '豆包', value: Math.floor(120 * 0.156) },
|
||||
{ name: '文心一言', value: Math.floor(60 * 0.156) },
|
||||
{ name: '元宝', value: Math.floor(85 * 0.156) }
|
||||
],
|
||||
|
||||
tokenUsage: [
|
||||
{ name: '千问3-max', value: Math.floor(5000 * 0.156) },
|
||||
{ name: 'kimi', value: Math.floor(4300 * 0.156) },
|
||||
{ name: '豆包', value: Math.floor(3500 * 0.156) },
|
||||
{ name: 'deepseek', value: Math.floor(3200 * 0.156) },
|
||||
{ name: '千帆', value: Math.floor(2800 * 0.156) }
|
||||
]
|
||||
},
|
||||
|
||||
right: {
|
||||
appTypes: ['智能推理', '智能训练', '图形渲染', '蛋白质分析', '其他'],
|
||||
|
||||
userConsumption: [
|
||||
{ rank: 1, name: '用户A', amount: Math.floor(520000 * 0.156) },
|
||||
{ rank: 2, name: '用户B', amount: Math.floor(450000 * 0.156) },
|
||||
{ rank: 3, name: '用户C', amount: Math.floor(186000 * 0.156) },
|
||||
{ rank: 4, name: '用户D', amount: Math.floor(120000 * 0.156) },
|
||||
{ rank: 5, name: '用户E', amount: Math.floor(56000 * 0.156) },
|
||||
{ rank: 6, name: '用户F', amount: Math.floor(43000 * 0.156) },
|
||||
{ rank: 7, name: '用户G', amount: Math.floor(35000 * 0.156) },
|
||||
{ rank: 8, name: '用户H', amount: Math.floor(28000 * 0.156) }
|
||||
],
|
||||
|
||||
powerUsage: [12300, 11500, 11500, 13400, 12900, 13500, 13200].map(num => Math.floor(num * 0.156))
|
||||
},
|
||||
|
||||
overview: {
|
||||
supply: [
|
||||
{ name: 'CPU', value: Math.floor(2350 * 0.156) },
|
||||
{ name: 'GPU', value: Math.floor(5500 * 0.156) },
|
||||
{ name: '进程数量', value: 0 },
|
||||
{ name: '资源统计', value: 0 },
|
||||
{ name: '运行中', value: '30%' },
|
||||
{ name: '关机中', value: '70%' },
|
||||
{ name: '故障数量', value: 0 },
|
||||
{ name: '在线数量', value: 0 }
|
||||
],
|
||||
demand: [
|
||||
{ name: 'CPU', value: 0 },
|
||||
{ name: 'GPU', value: 0 },
|
||||
{ name: '进程数量', value: 0 },
|
||||
{ name: '资源统计', value: 0 },
|
||||
{ name: '运行中', value: 0 },
|
||||
{ name: '关机中', value: 0 },
|
||||
{ name: '故障数量', value: 0 },
|
||||
{ name: '在线数量', value: 0 }
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -41,6 +41,7 @@
|
||||
</div>
|
||||
<!-- 添加返回按钮 -->
|
||||
<div v-if="currentCluster !== 'default'" class="reset-container">
|
||||
<div class="current-cluster-text">当前为 {{ getChineseClusterName(currentCluster) }}</div>
|
||||
<div class="reset-btn" @click="resetToDefault">
|
||||
<span>返回全国视图</span>
|
||||
</div>
|
||||
@ -124,7 +125,26 @@ export default {
|
||||
labelPosition: [99.06, 21.8],
|
||||
position: { top: '69.2%', left: '24%' }
|
||||
}
|
||||
]
|
||||
],
|
||||
// 集群名称到data-manager中key的映射
|
||||
CLUSTER_MAPPING: {
|
||||
'北京集群': 'beijing',
|
||||
'内蒙集群': 'neimeng',
|
||||
'新疆集群': 'xinjiang',
|
||||
'长三角集群': 'changsanjiao',
|
||||
'珠三角集群': 'zhusanjiao',
|
||||
'川渝集群': 'chuanyu'
|
||||
},
|
||||
// 反向映射：英文key到中文名称
|
||||
REVERSE_CLUSTER_MAPPING: {
|
||||
'beijing': '北京集群',
|
||||
'neimeng': '内蒙集群',
|
||||
'xinjiang': '新疆集群',
|
||||
'changsanjiao': '长三角集群',
|
||||
'zhusanjiao': '珠三角集群',
|
||||
'chuanyu': '川渝集群',
|
||||
'default': '全国集群'
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@ -177,6 +197,11 @@ export default {
|
||||
return position ? { position: 'absolute', ...position, zIndex: 10 } : {};
|
||||
},
|
||||
|
||||
// 获取中文集群名称
|
||||
getChineseClusterName(clusterKey) {
|
||||
return this.REVERSE_CLUSTER_MAPPING[clusterKey] || '全国集群';
|
||||
},
|
||||
|
||||
initChart() {
|
||||
const chartDom = this.$refs.myEchart;
|
||||
if (!chartDom) return;
|
||||
@ -309,43 +334,28 @@ export default {
|
||||
}));
|
||||
},
|
||||
|
||||
// 修改：只有北京集群有反应，其他集群暂时无反应
|
||||
// 修改后的enterCluster方法，支持所有集群
|
||||
enterCluster(cluster) {
|
||||
console.log('点击集群:', cluster.name);
|
||||
|
||||
// 只有北京集群有反应
|
||||
if (cluster.name === '北京集群') {
|
||||
console.log('进入集群:', cluster.name);
|
||||
// 根据集群名称获取对应的数据key
|
||||
const clusterKey = this.CLUSTER_MAPPING[cluster.name] || 'default';
|
||||
|
||||
// 触发集群点击事件到父组件
|
||||
this.$emit('cluster-selected', cluster.name);
|
||||
console.log('进入集群:', cluster.name, '数据key:', clusterKey);
|
||||
|
||||
// 根据集群名称设置数据
|
||||
let clusterKey = 'default';
|
||||
switch (cluster.name) {
|
||||
case '北京集群':
|
||||
clusterKey = 'beijing';
|
||||
break;
|
||||
default:
|
||||
clusterKey = 'default';
|
||||
}
|
||||
// 触发集群点击事件到父组件
|
||||
this.$emit('cluster-selected', cluster.name);
|
||||
|
||||
// 通过数据管理器切换数据
|
||||
dataManager.setCluster(clusterKey);
|
||||
this.currentCluster = clusterKey;
|
||||
// 通过数据管理器切换数据
|
||||
dataManager.setCluster(clusterKey);
|
||||
this.currentCluster = clusterKey;
|
||||
|
||||
// 同时触发地图隐藏事件
|
||||
this.$emit('update:showMap', false);
|
||||
this.$emit('area-click', {
|
||||
name: cluster.cityName,
|
||||
cluster: cluster.name
|
||||
});
|
||||
} else {
|
||||
// 其他集群暂时无反应，可以在这里添加提示或保持静默
|
||||
console.log(`当前只支持北京集群，${cluster.name}功能暂未开放`);
|
||||
// 可以选择给用户一个提示
|
||||
// this.$message.warning(`当前只支持北京集群，${cluster.name}功能暂未开放`);
|
||||
}
|
||||
// 触发地图隐藏事件
|
||||
this.$emit('update:showMap', false);
|
||||
this.$emit('area-click', {
|
||||
name: cluster.cityName,
|
||||
cluster: cluster.name
|
||||
});
|
||||
},
|
||||
|
||||
// 修改原有的handleAreaClick方法
|
||||
@ -496,12 +506,6 @@ export default {
|
||||
box-shadow: 0 0 10px rgba(253, 189, 0, 0.5);
|
||||
}
|
||||
|
||||
/* 非北京集群的按钮样式，可以添加一个特殊样式表示不可用 */
|
||||
.item .btn.disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.item .right {
|
||||
text-align: center;
|
||||
width: 20px;
|
||||
@ -517,14 +521,29 @@ export default {
|
||||
|
||||
.reset-container {
|
||||
position: absolute;
|
||||
top: 10%;
|
||||
top: 6%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.current-cluster-text {
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
|
||||
padding: 8px 16px;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 8px;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.reset-btn {
|
||||
/* 渐变色 */
|
||||
background: #0A2463 ;
|
||||
color: white;
|
||||
padding: 10px 20px;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user