From 793fc447bf6d6143f81a852a1ee5e32b01aa905d Mon Sep 17 00:00:00 2001
From: hrx <18603305412@163.com>
Date: Mon, 26 Jan 2026 11:43:09 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E5=B1=8F=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../bigScreen/Newscreen/ScreenLeft/index.vue  | 85 +++++++++++++++----
 .../bigScreen/Newscreen/ScreenRight/index.vue | 80 ++++++++++++-----
 .../product/bigScreen/Newscreen/index.vue     | 81 ++++++++++++++++--
 .../product/bigScreen/Newscreen/media.js      | 10 +++
 4 files changed, 214 insertions(+), 42 deletions(-)
 create mode 100644 f/web-kboss/src/views/product/bigScreen/Newscreen/media.js

diff --git a/f/web-kboss/src/views/product/bigScreen/Newscreen/ScreenLeft/index.vue b/f/web-kboss/src/views/product/bigScreen/Newscreen/ScreenLeft/index.vue
index 231f95c..23fb5bf 100644
--- a/f/web-kboss/src/views/product/bigScreen/Newscreen/ScreenLeft/index.vue
+++ b/f/web-kboss/src/views/product/bigScreen/Newscreen/ScreenLeft/index.vue
@@ -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 {
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 8270b65..ef6b586 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
@@ -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>
diff --git a/f/web-kboss/src/views/product/bigScreen/Newscreen/index.vue b/f/web-kboss/src/views/product/bigScreen/Newscreen/index.vue
index 6e65106..6cbecee 100644
--- a/f/web-kboss/src/views/product/bigScreen/Newscreen/index.vue
+++ b/f/web-kboss/src/views/product/bigScreen/Newscreen/index.vue
@@ -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>
diff --git a/f/web-kboss/src/views/product/bigScreen/Newscreen/media.js b/f/web-kboss/src/views/product/bigScreen/Newscreen/media.js
new file mode 100644
index 0000000..ea594ca
--- /dev/null
+++ b/f/web-kboss/src/views/product/bigScreen/Newscreen/media.js
@@ -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