yumoqing/kboss
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

上传前端代码 #64

Merged
charles merged 1 commits from main into prod 2026-01-23 10:31:24 +08:00
Conversation 0 Commits 1 Files Changed 2 +457 -40
2 changed files with 457 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

400
f/web-kboss/src/utils/data-manager.js
View File

@ -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 }
]
}
}
};

97
f/web-kboss/src/views/product/bigScreen/Newscreen/ScreenCenter/Map.vue
View File

@ -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;