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

Compare commits

base: yumoqing:da332aca4340315aa42eb644fcc375fc2bfaa2f9
Branches Tags
yumoqing:main
yumoqing:prod
yumoqing:dev1
...
compare: yumoqing:4601e30cb233348a2d4a482987841fdf0bc60fe4
Branches Tags
yumoqing:prod
yumoqing:main
yumoqing:dev1

2 Commits
da332aca43 ... 4601e30cb2

Author SHA1 Message Date
charles
4601e30cb2 Merge pull request '大屏优化' (#66) from main into prod 
Reviewed-on: #66
 2026-01-26 11:44:32 +08:00
hrx
793fc447bf 大屏优化 2026-01-26 11:43:09 +08:00
4 changed files with 214 additions and 42 deletions
Show Stats Expand all files Collapse all files

85
f/web-kboss/src/views/product/bigScreen/Newscreen/ScreenLeft/index.vue
View File

@ -1,30 +1,30 @@
<template>
<div>
<div :key="animationKey">
<div class="left">
<!-- 第1行：2个横向模块 -->
<div class="row row-1">
<div class="cluster">
<div class="cluster data-section" :style="{ animationDelay: '0.2s' }">
<div class="title">异构芯片规模</div>
<div class="conter">
<div class="conter-top">
<div class="top-tit one">{{ chipData.NVIDIA }}<span>P</span></div>
<div class="top-tit two">{{ chipData.ascend }}<span>P</span></div>
<div class="top-tit three">{{ chipData.supercomputer }}<span>P</span></div>
<div class="top-tit one data-item" :style="{ animationDelay: '0.3s' }">{{ chipData.NVIDIA }}<span>P</span></div>
<div class="top-tit two data-item" :style="{ animationDelay: '0.4s' }">{{ chipData.ascend }}<span>P</span></div>
<div class="top-tit three data-item" :style="{ animationDelay: '0.5s' }">{{ chipData.supercomputer }}<span>P</span></div>
</div>
<div class="conter-center">
<img src="../images/3D.png" alt="">
</div>
<div class="conter-bottom">
<div class="bottom-tit">NVIDIA</div>
<div class="bottom-tit">晟腾</div>
<div class="bottom-tit">传统超算</div>
<div class="bottom-tit data-item" :style="{ animationDelay: '0.6s' }">NVIDIA</div>
<div class="bottom-tit data-item" :style="{ animationDelay: '0.7s' }">晟腾</div>
<div class="bottom-tit data-item" :style="{ animationDelay: '0.8s' }">传统超算</div>
</div>
</div>
</div>
<div class="heterogeneous">
<div class="heterogeneous data-section" :style="{ animationDelay: '0.9s' }">
<div class="title">集群规模</div>
<div class="content">
<dv-decoration-9 style="width:200px;height:200px;color: #fff;font-size: 20px; font-weight: 600;">
<dv-decoration-9 class="data-item" :style="{ animationDelay: '1s' }" style="width:200px;height:200px;color: #fff;font-size: 20px; font-weight: 600;">
{{ chipData.total }}P
</dv-decoration-9>
</div>
@ -32,18 +32,18 @@
</div>
<!-- 第2行：通栏模块（运行中芯片数量） -->
<div class="row row-2">
<div class="running">
<div class="running data-section" :style="{ animationDelay: '0.9s' }">
<div class="title">运行中芯片数量</div>
<div ref="runningChart" class="chart-container "></div>
</div>
</div>
<!-- 第3行：2个横向模块 -->
<div class="row row-3">
<div class="model">
<div class="title">模型调用量</div>
<div class="model" >
<div class="title data-section" :style="{ animationDelay: '0.9s' }">模型调用量</div>
<div ref="modelChart" class="chart-container model-chart"></div>
</div>
<div class="token">
<div class="token data-section" :style="{ animationDelay: '0.9s' }">
<div class="title">token调用量</div>
<div ref="tokenChart" class="chart-container token-chart"></div>
</div>
@ -70,7 +70,8 @@ export default {
ascend: 0,
supercomputer: 0,
total: 0
}
},
animationKey: 0
};
},
created() {
@ -96,7 +97,15 @@ export default {
handleClusterChanged(event) {
this.currentData = event.data;
this.updateChipData();
this.updateCharts();
// 增加动画key，触发重新渲染和动画
this.animationKey += 1;
// 确保组件重新渲染后，图表能够被正确初始化和更新
this.$nextTick(() => {
this.initRunningChart();
this.initModelChart();
this.initTokenChart();
});
},
updateChipData() {
@ -508,6 +517,7 @@ export default {
gap: 15px;
padding: 10px 0;
box-sizing: border-box;
}
.conter {
@ -662,6 +672,49 @@ export default {
}
}
/* 数据元素顺序渲染动画 */
.data-section {
animation: fadeInLeft 0.8s ease-out forwards;
opacity: 0;
transform: translateX(-20px);
}
.data-item {
animation: fadeInLeft 0.6s ease-out forwards;
opacity: 0;
transform: translateX(-10px);
}
.chart-container {
animation: fadeInLeft 1s ease-out forwards;
opacity: 0;
transform: translateX(-30px);
}
/* 为不同图表添加延迟动画 */
.running .chart-container {
animation-delay: 1.2s;
}
.model .chart-container {
animation-delay: 1.4s;
}
.token .chart-container {
animation-delay: 1.6s;
}
@keyframes fadeInLeft {
0% {
opacity: 0;
transform: translateX(-20px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
/* 响应式适配 */
@media (min-width: 1920px) {
.title {

80
f/web-kboss/src/views/product/bigScreen/Newscreen/ScreenRight/index.vue
View File

@ -1,47 +1,47 @@
<template>
<div>
<div :key="animationKey">
<div class="right">
<!-- 第 1 行 -->
<div class="row row-1">
<!-- 应用类型 -->
<div class="app-class">
<div class="app-class data-section" :style="{ animationDelay: '0.2s' }">
<div class="title">应用类型</div>
<div class="content">
<!-- 中心TOP1 -->
<div class="circle-center">
<div class="circle-center data-item" :style="{ animationDelay: '0.3s' }">
<div class="rank">TOP1</div>
<div class="name">{{ appTypes[0] || '智能推理' }}</div>
</div>
<!-- 周围TOP项 -->
<div class="circle-item item-top2">
<div class="circle-item item-top2 data-item" :style="{ animationDelay: '0.4s' }">
<div class="rank">TOP2</div>
<div class="name">{{ appTypes[1] || '智能训练' }}</div>
</div>
<div class="circle-item item-top3">
<div class="circle-item item-top3 data-item" :style="{ animationDelay: '0.5s' }">
<div class="rank">TOP3</div>
<div class="name">{{ appTypes[2] || '图形渲染' }}</div>
</div>
<div class="circle-item item-top4">
<div class="circle-item item-top4 data-item" :style="{ animationDelay: '0.6s' }">
<div class="rank">TOP4</div>
<div class="name">{{ appTypes[3] || '蛋白质分析' }}</div>
</div>
<div class="circle-item item-top5">
<div class="circle-item item-top5 data-item" :style="{ animationDelay: '0.7s' }">
<div class="rank">TOP5</div>
<div class="name">{{ appTypes[4] || '其他' }}</div>
</div>
</div>
</div>
<!-- 用户种类 -->
<div class="user-class">
<div class="user-class data-section" :style="{ animationDelay: '0.8s' }">
<div class="title">用户种类</div>
<div class="content">
<img src="../images/userClass.png" alt="用户种类示意图">
<div class="user">
<span class="finance">金融</span>
<span class="medical">医疗</span>
<span class="creative">文创</span>
<span class="education">教育</span>
<span class="intelligence">智能制造</span>
<span class="finance data-item" :style="{ animationDelay: '0.9s' }">金融</span>
<span class="medical data-item" :style="{ animationDelay: '1s' }">医疗</span>
<span class="creative data-item" :style="{ animationDelay: '1.1s' }">文创</span>
<span class="education data-item" :style="{ animationDelay: '1.2s' }">教育</span>
<span class="intelligence data-item" :style="{ animationDelay: '1.3s' }">智能制造</span>
</div>
</div>
</div>
@ -50,14 +50,14 @@
<!-- 第 2 行 -->
<div class="row row-2">
<!-- 用户数量 -->
<div class="user-num">
<div class="user-num data-section" :style="{ animationDelay: '1.4s' }">
<div class="title">用户数量</div>
<div class="content">
<img src="../images/use-num.png" alt="">
</div>
</div>
<!-- 用户消费排行 -->
<div class="user-consume">
<div class="user-consume data-section" :style="{ animationDelay: '1.5s' }">
<div class="title">用户消费排行</div>
<div class="content">
<dv-scroll-board :config="scrollBoardConfig" :key="scrollBoardKey" ref="scrollBoardRef" style="width:95%;height:95%" />
@ -68,9 +68,9 @@
<!-- 第 3 行 -->
<div class="row row-3">
<!-- 算力使用情况（双折线图，无背景色） -->
<div class="power-use">
<div class="power-use data-section" :style="{ animationDelay: '1.6s' }">
<div class="title">算力使用情况</div>
<div ref="powerUseChart" class="power-use-chart"></div>
<div ref="powerUseChart" class="power-use-chart data-item" :style="{ animationDelay: '1.7s' }"></div>
</div>
</div>
</div>
@ -108,7 +108,8 @@ export default {
resizeTimer: null,
powerChart: null,
currentData: null,
appTypes: ['智能推理', '智能训练', '图形渲染', '蛋白质分析', '其他']
appTypes: ['智能推理', '智能训练', '图形渲染', '蛋白质分析', '其他'],
animationKey: 0
};
},
created() {
@ -137,7 +138,14 @@ export default {
methods: {
handleClusterChanged(event) {
this.currentData = event.data;
this.updateDisplay();
// 增加动画key，触发重新渲染和动画
this.animationKey += 1;
// 确保组件重新渲染后，图表能够被正确初始化和更新
this.$nextTick(() => {
this.initPowerUseChart();
this.updateDisplay();
});
},
updateDisplay() {
@ -245,7 +253,7 @@ export default {
show: true,
position: 'top',
formatter: function(params) {
return (params.value / 10000).toFixed(1) + '万';
return (params.value / 10000).toFixed(1) + '万（p）';
},
color: '#fff',
fontWeight: 'bold',
@ -267,7 +275,7 @@ export default {
const value = params[0].value;
return params[0].name + '<br/>' +
params[0].marker + params[0].seriesName + ': ' +
value.toLocaleString() + '算力单位';
value.toLocaleString() + 'p';
}
},
grid: {
@ -718,4 +726,34 @@ export default {
transform: translate(-50%, -50%);
z-index: 0;
}
/* 数据元素顺序渲染动画 */
.data-section {
animation: fadeInLeft 0.8s ease-out forwards;
opacity: 0;
transform: translateX(-20px);
}
.data-item {
animation: fadeInLeft 0.6s ease-out forwards;
opacity: 0;
transform: translateX(-10px);
}
.power-use-chart {
animation: fadeInLeft 1s ease-out forwards;
opacity: 0;
transform: translateX(-30px);
}
@keyframes fadeInLeft {
0% {
opacity: 0;
transform: translateX(-20px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
</style>

81
f/web-kboss/src/views/product/bigScreen/Newscreen/index.vue
View File

@ -28,7 +28,7 @@ import ScreenHeader from './screenHeader/index.vue';
import ScreenLeft from './ScreenLeft/index.vue';
import ScreenCenter from './ScreenCenter/index.vue';
import ScreenRight from './ScreenRight/index.vue';
import './media'
export default {
components: {
ScreenHeader,
@ -41,6 +41,7 @@ export default {
}
},
methods: {
}
}
</script>
@ -55,17 +56,20 @@ export default {
#app {
box-sizing: border-box;
height: 100vh;
width: 100%;
width: 100vw;
display: flex;
flex-direction: column;
background: url("../../../../assets/image/bg.jpg") no-repeat center ;
background-size: cover; // 添加背景大小控制
overflow: hidden;
position: relative;
}
.top {
width: 100%;
height: 85px;
min-height: 85px;
height: 8vh;
max-height: 120px;
}
img {
@ -76,17 +80,84 @@ img {
}
.center {
display: flex;
flex: 1;
min-height: 0;
.left{
width: 30%;
min-width: 300px;
max-width: 500px;
}
.content{
width: 40%;
min-width: 400px;
max-width: 800px;
}
.right{
width: 30%;
min-width: 300px;
max-width: 500px;
}
}
.center {
height: calc(100% - 80px);
/* 响应式布局适配 */
@media (max-width: 1920px) {
.center {
.left,
.right {
width: 28%;
}
.content {
width: 44%;
}
}
}
@media (max-width: 1600px) {
.center {
.left,
.right {
width: 25%;
}
.content {
width: 50%;
}
}
}
@media (max-width: 1366px) {
.center {
.left,
.right {
width: 22%;
min-width: 250px;
}
.content {
width: 56%;
min-width: 350px;
}
}
.top {
min-height: 70px;
height: 7vh;
max-height: 100px;
}
}
@media (max-width: 1024px) {
.center {
flex-direction: column;
.left,
.content,
.right {
width: 100%;
min-width: unset;
max-width: unset;
height: 33.33%;
min-height: 300px;
}
}
}
</style>

10
f/web-kboss/src/views/product/bigScreen/Newscreen/media.js Normal file
View File

@ -0,0 +1,10 @@
function adapter(){
//获取布局视口宽度，因为开启了理想视口，布局视口=设备横向独立像素值
const dpWidth = document.documentElement.clientWidth
//计算根字体大小
const rootFonstSize = (dpWidth * 100)/1960
//设置根字体大小
document.documentElement.style.fontSize = rootFonstSize + 'px'
}
adapter()
window.onresize = adapter