From 2a803c19b88e7fb30780764e67b079e6b73251b1 Mon Sep 17 00:00:00 2001 From: hrx <18603305412@163.com> Date: Wed, 21 Jan 2026 17:47:28 +0800 Subject: [PATCH] updata --- f/web-kboss/src/utils/data-manager.js | 260 ++++++++++++++++++ .../homePage/components/topBox/index.vue | 4 +- .../bigScreen/Newscreen/ScreenCenter/Map.vue | 228 ++++++++++++--- .../Newscreen/ScreenCenter/index.vue | 244 ++++++---------- .../bigScreen/Newscreen/ScreenLeft/index.vue | 168 ++++++----- .../bigScreen/Newscreen/ScreenRight/index.vue | 185 +++++++++---- 6 files changed, 767 insertions(+), 322 deletions(-) create mode 100644 f/web-kboss/src/utils/data-manager.js diff --git a/f/web-kboss/src/utils/data-manager.js b/f/web-kboss/src/utils/data-manager.js new file mode 100644 index 0000000..a02b44e --- /dev/null +++ b/f/web-kboss/src/utils/data-manager.js @@ -0,0 +1,260 @@ +// src/data-manager.js +const clusterData = { + // 默认数据（全国数据） + default: { + // 头部数据 + header: { + demandPower: 1500, + supplyPower: 35320, + clusterCount: 7, + customerCount: 352, + chipCount: 75368, + modelCount: 75 + }, + + // 左侧数据 + left: { + // 异构芯片规模 + chipScale: { + NVIDIA: 33000, + ascend: 5000, + supercomputer: 8000, + total: 5100 + }, + + // 运行中芯片数量 + runningChips: [16909, 15050, 16240, 21470, 18940, 18950, 17450], + + // 模型调用量 + modelUsage: [ + { name: 'deepseek', value: 105 }, + { name: '通义千问', value: 78 }, + { name: 'kimi', value: 70 }, + { name: '豆包', value: 120 }, + { name: '文心一言', value: 60 }, + { name: '元宝', value: 85 } + ], + + // token调用量 + tokenUsage: [ + { name: '千问3-max', value: 5000 }, + { name: 'kimi', value: 4300 }, + { name: '豆包', value: 3500 }, + { name: 'deepseek', value: 3200 }, + { name: '千帆', value: 2800 } + ] + }, + + // 右侧数据 + right: { + // 应用类型 + appTypes: ['智能推理', '智能训练', '图形渲染', '蛋白质分析', '其他'], + + // 用户消费排行 + userConsumption: [ + { rank: 1, name: '用户A', amount: 520000 }, + { rank: 2, name: '用户B', amount: 450000 }, + { rank: 3, name: '用户B', amount: 186000 }, + { rank: 4, name: '用户D', amount: 120000 }, + { rank: 5, name: '用户E', amount: 56000 }, + { rank: 6, name: '用户F', amount: 43000 }, + { rank: 7, name: '用户G', amount: 35000 }, + { rank: 8, name: '用户H', amount: 28000 } + ], + + // 算力使用情况 + powerUsage: [12300, 11500, 11500, 13400, 12900, 13500, 13200] + }, + + // 底部概览数据 + overview: { + supply: [ + { name: 'CPU', value: 2350 }, + { name: 'GPU', value: 5500 }, + { 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 } + ] + } + }, + + // 北京集群数据 + beijing: { + header: { + demandPower: 190, + supplyPower: 4485, + clusterCount: 1, + customerCount: 44, + chipCount: 9571, + modelCount: 9 + }, + + left: { + chipScale: { + NVIDIA: 4191, + ascend: 635, + supercomputer: 1016, + total: 647 + }, + + runningChips: [2147, 1911.35, 2062, 2726, 2405, 2406, 2216], + + modelUsage: [ + { name: 'DEEPSEEK', value: 13 }, + { name: '通义千问', value: 9 }, + { name: 'kimi', value: 8 }, + { name: '豆包', value: 15 }, + { name: '文心一言', value: 7 }, + { name: '元宝', value: 10 } + ], + + tokenUsage: [ + { name: '千问3-max', value: 635 }, + { name: 'kimi 2', value: 546 }, + { name: 'doubao 1.5', value: 444 }, + { name: 'deepseek', value: 406 }, + { name: '千帆5.0', value: 355 } + ] + }, + + right: { + appTypes: ['智能推理', '智能训练', '图形渲染', '蛋白质分析', '其他'], + + userConsumption: [ + { rank: 1, name: '用户A', amount: 66040 }, + { rank: 2, name: '用户B', amount: 57150 }, + { rank: 3, name: '用户C', amount: 23622 }, + { rank: 4, name: '用户D', amount: 15240 }, + { rank: 5, name: '用户E', amount: 7112 }, + { rank: 6, name: '用户F', amount: 5461 }, + { rank: 7, name: '用户G', amount: 4445 }, + { rank: 8, name: '用户H', amount: 3556 } + ], + + powerUsage: [1562, 1460, 1460, 1701, 1638, 1714, 1676] + }, + + overview: { + supply: [ + { name: 'CPU', value: 298 }, + { name: 'GPU', value: 698 }, + { 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 } + ] + } + } +}; + +// 全局事件总线 +class EventBus { + constructor() { + this.events = {}; + } + + $on(event, callback) { + if (!this.events[event]) { + this.events[event] = []; + } + this.events[event].push(callback); + } + + $off(event, callback) { + if (!this.events[event]) return; + if (!callback) { + delete this.events[event]; + } else { + const index = this.events[event].indexOf(callback); + if (index > -1) { + this.events[event].splice(index, 1); + } + } + } + + $emit(event, data) { + if (!this.events[event]) return; + this.events[event].forEach(callback => { + callback(data); + }); + } +} + +// 数据管理器 +class DataManager { + constructor() { + this.currentCluster = 'default'; + this.listeners = []; + this.eventBus = new EventBus(); + this.data = clusterData[this.currentCluster]; + } + + setCluster(clusterName) { + this.currentCluster = clusterName; + this.data = clusterData[clusterName] || clusterData.default; + this.notifyListeners(); + } + + getData() { + return this.data; + } + + getCurrentCluster() { + return this.currentCluster; + } + + addListener(listener) { + this.listeners.push(listener); + } + + removeListener(listener) { + const index = this.listeners.indexOf(listener); + if (index > -1) { + this.listeners.splice(index, 1); + } + } + + notifyListeners() { + this.listeners.forEach(listener => { + if (typeof listener === 'function') { + listener(this.data); + } + }); + + this.eventBus.$emit('cluster-changed', { + cluster: this.currentCluster, + data: this.data + }); + } +} + +// 创建全局数据管理器实例 +const dataManager = new DataManager(); + +// 导出 +export { clusterData, dataManager }; diff --git a/f/web-kboss/src/views/homePage/components/topBox/index.vue b/f/web-kboss/src/views/homePage/components/topBox/index.vue index a9956ac..02c4fa6 100644 --- a/f/web-kboss/src/views/homePage/components/topBox/index.vue +++ b/f/web-kboss/src/views/homePage/components/topBox/index.vue @@ -41,7 +41,7 @@ 控制台 - + - diff --git a/f/web-kboss/src/views/product/bigScreen/Newscreen/ScreenCenter/Map.vue b/f/web-kboss/src/views/product/bigScreen/Newscreen/ScreenCenter/Map.vue index f5b9f97..4c08a2b 100644 --- a/f/web-kboss/src/views/product/bigScreen/Newscreen/ScreenCenter/Map.vue +++ b/f/web-kboss/src/views/product/bigScreen/Newscreen/ScreenCenter/Map.vue @@ -21,7 +21,7 @@
查看集群详细信息 -
进入地图
+
进入地图
@@ -31,22 +31,28 @@
查看集群详细信息 -
进入地图
+
进入地图
{{ cluster.name }}
- + +
+
+ 返回全国视图 +
+ @@ -480,18 +515,19 @@ export default { position: relative; .conter-top { + width: 100%; + position: absolute; + top: 14px; display: flex; align-items: center; justify-content: space-around; - position: absolute; - top: 14px; - left: 18px; + padding: 0 18px; + // left: 18px; .top-tit { - padding-left: 10px; + // padding-left: 10px; span { - // font-size: 12px; margin-left: 2px; } } @@ -511,10 +547,9 @@ export default { .conter-bottom { margin-top: -16px; display: flex; - padding-left:10px; + padding-left: 10px; align-items: center; justify-content: space-around; - // padding-left: 20px; .bottom-tit { padding-right: 4px; @@ -591,7 +626,6 @@ export default { // 模型调用 .model-chart { - // height: 100%; height: calc(100% - 46px); width: 240px; } diff --git a/f/web-kboss/src/views/product/bigScreen/Newscreen/ScreenRight/index.vue b/f/web-kboss/src/views/product/bigScreen/Newscreen/ScreenRight/index.vue index e39a699..8270b65 100644 --- a/f/web-kboss/src/views/product/bigScreen/Newscreen/ScreenRight/index.vue +++ b/f/web-kboss/src/views/product/bigScreen/Newscreen/ScreenRight/index.vue @@ -10,24 +10,24 @@
TOP1
-
智能推理
+
{{ appTypes[0] || '智能推理' }}
TOP2
-
智能训练
+
{{ appTypes[1] || '智能训练' }}
TOP3
-
图形渲染
+
{{ appTypes[2] || '图形渲染' }}
TOP4
-
蛋白质分析
+
{{ appTypes[3] || '蛋白质分析' }}
TOP5
-
其他
+
{{ appTypes[4] || '其他' }}
@@ -49,7 +49,7 @@
- +
用户数量
@@ -60,7 +60,7 @@
用户消费排行
- +
@@ -84,21 +84,14 @@ import img2 from '../images/2.png' import img3 from '../images/3.png' import img4 from '../images/4.png' import img5 from '../images/5.png' +import { dataManager } from "@/utils/data-manager.js"; export default { + name: 'RightPanel', data() { return { scrollBoardConfig: { - data: [ - [`
`, '用户A', '¥520000'], - [`
`, '用户B', '¥450000'], - [`
`, '用户B', '¥186000'], - [`
`, '用户D', '¥120000'], - [`
`, '用户E', '¥56000'], - [`
`, '用户F', '¥43000'], - [`
`, '用户G', '¥35000'], - [`
`, '用户H', '¥28000'], - ], + data: [], index: false, columnWidth: [50, 100, 90], rowHeight: 28, @@ -106,39 +99,139 @@ export default { rowNum: 5, oddRowBGC: '#040c45', evenRowBGC: '#17264f', - waitTime: 2000, + waitTime: 1500, // 缩短等待时间，加快滚动 carousel: 'single', - hoverPause: true + hoverPause: false, // 鼠标悬停时不暂停，确保持续滚动 + autoPlay: true // 确保自动播放 }, - resizeTimer: null - } + scrollBoardKey: 0, + resizeTimer: null, + powerChart: null, + currentData: null, + appTypes: ['智能推理', '智能训练', '图形渲染', '蛋白质分析', '其他'] + }; + }, + created() { + this.currentData = dataManager.getData(); + this.updateDisplay(); + + dataManager.eventBus.$on('cluster-changed', this.handleClusterChanged); }, mounted() { this.initPowerUseChart(); window.addEventListener('resize', this.handleResize); + + // 确保滚动表格初始化后开始滚动 + this.$nextTick(() => { + this.startScrollBoard(); + }); + }, + beforeDestroy() { + if (this.$refs.powerUseChart) { + const chart = echarts.getInstanceByDom(this.$refs.powerUseChart); + if (chart) chart.dispose(); + } + window.removeEventListener('resize', this.handleResize); + dataManager.eventBus.$off('cluster-changed', this.handleClusterChanged); }, methods: { + handleClusterChanged(event) { + this.currentData = event.data; + this.updateDisplay(); + }, + + updateDisplay() { + if (!this.currentData) return; + + this.appTypes = this.currentData.right?.appTypes || this.appTypes; + this.updateScrollBoard(); + this.updatePowerChart(); + }, + + updateScrollBoard() { + if (!this.currentData?.right) return; + + const userData = this.currentData.right.userConsumption || []; + const imgMap = { + 1: img1, + 2: img2, + 3: img3, + 4: img4, + 5: img5 + }; + + // 确保数据至少有5条，不足时用空数据填充 + const tableData = []; + for (let i = 0; i < Math.max(5, userData.length); i++) { + if (userData[i]) { + tableData.push([ + `
`, + userData[i].name, + `¥${userData[i].amount.toLocaleString()}` + ]); + } else { + tableData.push([ + `
`, + `用户${i + 1}`, + '¥0' + ]); + } + } + + // 创建新的配置对象，确保触发响应式更新 + const newConfig = { + ...this.scrollBoardConfig, + data: tableData + }; + + // 更新配置 + this.scrollBoardConfig = newConfig; + + // 强制重新渲染滚动表格 + this.scrollBoardKey += 1; + + // 确保组件渲染完成后开始滚动 + this.$nextTick(() => { + this.startScrollBoard(); + }); + }, + + // 启动滚动表格的方法 + startScrollBoard() { + if (this.$refs.scrollBoardRef && this.$refs.scrollBoardRef.startRoll) { + // 如果有startRoll方法，调用它开始滚动 + this.$refs.scrollBoardRef.startRoll(); + } + + // 如果没有startRoll方法，尝试访问内部方法 + if (this.$refs.scrollBoardRef && this.$refs.scrollBoardRef.$children[0]) { + const child = this.$refs.scrollBoardRef.$children[0]; + if (child.startAnimation) { + child.startAnimation(); + } + } + }, + initPowerUseChart() { const chartDom = this.$refs.powerUseChart; if (!chartDom) return; - const myChart = echarts.init(chartDom); + this.powerChart = echarts.init(chartDom); + this.updatePowerChart(); + }, - // 从图片中提取的数据，保持不变 + updatePowerChart() { + if (!this.powerChart || !this.currentData?.right) return; + + const powerData = this.currentData.right.powerUsage || []; const dates = ['12/01', '12/02', '12/03', '12/04', '12/05', '12/06', '12/07']; - const powerUsage = [12300, 11500, 11500, 13400, 12900, 13500, 13200]; - // 动态计算y轴范围 - const maxValue = Math.max(...powerUsage); - const minValue = Math.min(...powerUsage); - - // 计算合适的y轴最大最小值（留出一些空间） + const maxValue = Math.max(...powerData); + const minValue = Math.min(...powerData); const yMax = Math.ceil(maxValue / 1000) * 1000 + 1000; const yMin = Math.floor(minValue / 1000) * 1000 - 1000; - // 找出最大值及其索引（用于标记点） - const maxIndex = powerUsage.indexOf(maxValue); - - const markPointData = powerUsage.map((value, index) => { + const maxIndex = powerData.indexOf(maxValue); + const markPointData = powerData.map((value, index) => { if (index === maxIndex) { return { name: '最高', @@ -147,16 +240,12 @@ export default { yAxis: value, symbol: 'circle', symbolSize: 10, - itemStyle: { - color: '#fff', - // borderColor: '#ff4d4f', - // borderWidth: 2 - }, + itemStyle: { color: '#fff' }, label: { show: true, position: 'top', formatter: function(params) { - return (params.value / 10000).toFixed(1) + '万'; // 转换为"万"单位 + return (params.value / 10000).toFixed(1) + '万'; }, color: '#fff', fontWeight: 'bold', @@ -178,7 +267,7 @@ export default { const value = params[0].value; return params[0].name + '
' + params[0].marker + params[0].seriesName + ': ' + - value.toLocaleString() + '算力单位'; // 添加千分位分隔符 + value.toLocaleString() + '算力单位'; } }, grid: { @@ -201,8 +290,8 @@ export default { }, yAxis: { type: 'value', - min: yMin, // 使用动态计算的最小值 - max: yMax, // 使用动态计算的最大值 + min: yMin, + max: yMax, splitNumber: 6, splitLine: { lineStyle: { @@ -214,7 +303,6 @@ export default { color: 'rgba(255,255,255,0.7)', fontSize: 12, formatter: function(value) { - // 将数值转换为"万"单位显示，保留1位小数 return (value / 10000).toFixed(1) + '万'; } }, @@ -225,7 +313,7 @@ export default { { name: '算力使用', type: 'line', - data: powerUsage, + data: powerData, symbol: 'none', symbolSize: 8, itemStyle: { @@ -252,7 +340,7 @@ export default { ] }; - myChart.setOption(option); + this.powerChart.setOption(option, true); }, handleResize() { @@ -264,13 +352,6 @@ export default { } }, 200); } - }, - beforeDestroy() { - if (this.$refs.powerUseChart) { - const chart = echarts.getInstanceByDom(this.$refs.powerUseChart); - if (chart) chart.dispose(); - } - window.removeEventListener('resize', this.handleResize); } };