静态大屏样式修改

src/views/bigscreenDesigner/viewer/components/static.vue

@@ -137,8 +137,7 @@
             <span class="card-title">销售收入排行</span>
              <img style="width: calc(100% - 160px);" src="http://192.168.1.243:48090/file/download/ba0006f6-315b-4340-8cd2-28fffdc9ae80" alt="">
           </div>
-          <div class="park-content" style="position:relative;margin-top:10px">
+          <div class="park-content" style="position:relative;">
-            <span style="position:absolute;top:-10px;font-size:11px;">单位：万</span>
             <div ref="parkChart" class="park-chart"></div>
           
           </div>
@@ -399,6 +398,11 @@ export default {
           }
         })
       }
+      if(!seriesData.length>0) return
+    const sumList = seriesData[0].values.map((_, idx) => 
+      seriesData.map(item => Number(item.values[idx])).reduce((a, b) => a + b, 0)
+    );
+    const maxX = Math.max(...sumList) + 200;
       const option = {
         backgroundColor: 'transparent',
         tooltip: {
@@ -406,6 +410,7 @@ export default {
           backgroundColor: 'rgba(15, 42, 66, 0.9)',
           borderColor: '#61c8ee',
           textStyle: { color: '#fff' },
+          confine: true,
           formatter: (params) => {
             let result = `${params.seriesName}<br/>`;
             seriesData.forEach((series,index1)=>{
@@ -421,16 +426,16 @@ export default {
           }
         },
         grid: {
-          left: '0',
+          left: '20px',
           right:'0',
-          top:'0',
+          top:'50px',
           bottom: '0',
           containLabel: true
         },
         xAxis: {
           type: 'value',
           show: false,
-          max: 2000
+          max: maxX
         },
         yAxis: {
           type: 'category',
@@ -443,8 +448,47 @@ export default {
             fontFamily: 'Microsoft YaHei'
           }
         },
+        legend: {
+          top: '6px',
+          right: '120px',
+          orient: 'horizontal',
+          textStyle: {
+            color: '#fff',
+            fontSize: 12,
+            fontFamily: 'Microsoft YaHei'
+          },
+          icon: 'circle',
+          itemWidth: 10,
+          itemHeight: 10,
+          itemGap: 15
+        },
         graphic: [
-         
+          // 右上角单位文字
+          {
+            type: 'text',
+            right: '10px',
+            top: '10px',
+            style: {
+              text: '单位：万元',
+              fontSize: 12,
+              fill: '#fff',
+              fontFamily: 'Microsoft YaHei'
+            }
+          },
+          // // 每一行柱子右侧显示合计值
+           ...seriesData[0].values.map((item, idx) => {
+            return {
+             type: 'text',
+             left: 'auto',
+             right: '8px',
+             top: `${((seriesData[0].values.length-1-idx) / seriesData[0].values.length) * 145 + 50}px`,
+             style: {
+               text: seriesData.map(item=>item.values[idx]).reduce((a, b) => Number(a) + Number(b), 0) ,
+               fontSize: 12,
+               fill: '#fff',
+               fontWeight: 'bold'
+             }
+           }})
         ],
         series: [
         ]
@@ -479,7 +523,6 @@ export default {
       if(code!=200){
         return
       }
-      console.log(data)
       dates=data.map(item=>{return item['货品名称']})
       lineData=data.map(item=>{return item['毛利同比变动']})
       barData=data.map(item=>{return item['去年累计毛利(万)']})
@@ -493,12 +536,37 @@ export default {
           textStyle: { color: '#fff' }
         },
         grid: {
-          left: '8%',
+          left: '0',
-          right: '3%',
+          right: '0',
-          top: '12%',
+          top: '26px',
-          bottom: '12%',
+          bottom: '0',
           containLabel: true
         },
+         graphic: [
+          // 右上角单位文字
+          {
+            type: 'text',
+            left: '0',
+            top: '2px',
+            style: {
+              text: '单位：万元',
+              fontSize: 10,
+              fill: '#fff',
+              fontFamily: 'Microsoft YaHei'
+            }
+          },
+          {
+            type: 'text',
+            right: '0',
+            top: '2px',
+            style: {
+              text: '单位：%',
+              fontSize: 10,
+              fill: '#fff',
+              fontFamily: 'Microsoft YaHei'
+            }
+          }
+          ],
         xAxis: {
           type: 'category',
           data: dates,
@@ -789,7 +857,7 @@ export default {
       const parkData = data.map(d => ({
         name: d.hpmc,
         value: d.xse
-      })).splice(0, 10)
+      }))
       const option = {
         backgroundColor: 'transparent',
         tooltip: {
@@ -799,13 +867,28 @@ export default {
           textStyle: { color: '#fff' },
           formatter: '{b}: {c}万'
         },
+        
         grid: {
           left: '0',
           right: '0',
           bottom: '0',
-          top: '0',
+          top: '20px',
           containLabel: true
         },
+         graphic: [
+          // 右上角单位文字
+          {
+            type: 'text',
+            right: '10px',
+            top: '2px',
+            style: {
+              text: '单位：万元',
+              fontSize: 12,
+              fill: '#fff',
+              fontFamily: 'Microsoft YaHei'
+            }
+          }
+          ],
         xAxis: {
           type: 'category',
           data: parkData.map(d => d.name),
@@ -833,23 +916,24 @@ export default {
           axisPointer: {
             show: true
           },
-          dataZoom: [
+        
+        },
+        dataZoom: [
              {
                type: 'slider',    // 底部滑动条
                show: false,       // 隐藏滑动条（只保留滚动能力）
                xAxisIndex: [0],
                start: 0,
-               end: 100
+               end: 50
              },
              {
                type: 'inside',    // 内置滚动（鼠标滚轮/拖拽滚动）
                xAxisIndex: [0],
                start: 0,
-               end: 100,
+               end: 50,
                zoomLock: true     // 禁止缩放，只允许滚动
              }
-           ]
+          ],
-        },
         yAxis: {
           type: 'value',
           show: true,
@@ -898,6 +982,23 @@ export default {
       
       chart.setOption(option)
       this.charts.park = chart
+      let autoStart = 0;
+      const autoSpeed = 5; // 滚动速度，越小越慢
+
+      const autoScroll = setInterval(() => {
+        if (!this.charts.park) return;
+
+        autoStart += autoSpeed;
+        if (autoStart > 50) autoStart = 0; // 滚到底部重置
+
+        this.charts.park.dispatchAction({
+          type: "dataZoom",
+          xAxisIndex: 0,
+          start: autoStart,
+          end: autoStart + 50,
+        });
+      }, 3000);
+      this.charts.park.autoScrollTimer = autoScroll;  
     }
   }
 }
@@ -906,7 +1007,7 @@ export default {
 <style lang="scss" scoped>
 .energy-platform {
   width: 100%;
-  min-height: 100vh;
+  min-height: 100%;
   background: #0a1628;
   position: relative;
   padding:0 15px;
@@ -990,7 +1091,7 @@ export default {
   gap: 15px;
   position: relative;
   z-index: 10;
-  height: calc(100vh - 160px);
+  height: 100%;
 }
 
 .left-panel {
@@ -1078,7 +1179,7 @@ export default {
   border: 1px solid rgba(97, 200, 238, 0.2);
   border-radius: 8px;
   overflow: hidden;
-  min-height: 280px;
+  min-height: 620px;
 }
 
 .bottom-left-cards {
@@ -1151,7 +1252,7 @@ export default {
 }
 .carbon-content {
   display: flex;
-  height: 170px;
+  height: 216px;
   padding: 8px;
   gap: 8px;
 }
@@ -1165,7 +1266,7 @@ export default {
 
 .chart-container-small {
   width: 100%;
-  height: 140px;
+  height: 200px;
 }
 
 .chart-container {
@@ -1209,7 +1310,7 @@ export default {
 }
 .energy-content {
   display: flex;
-  height: 200px;
+  height: 220px;
   padding: 10px;
 }
 
@@ -1259,11 +1360,10 @@ export default {
 }
 .ring-card{
   background: rgb(32, 37, 43);
- border: 2px solid rgb(49, 56, 66);
+  border: 2px solid rgb(49, 56, 66);
-        border-radius-top-left: 5px;
+  border-top-left-radius: 5px;
-        border-radius-top-right: 5px;
+  border-top-right-radius: 5px;
-        border-bottom: 0;
+  border-bottom: 0;
-
 }
 .panel-card {
   overflow: hidden;
@@ -1316,29 +1416,29 @@ export default {
 }
 .peak-card{
   background: rgb(32, 37, 43);
- border: 2px solid rgb(49, 56, 66);
+  border: 2px solid rgb(49, 56, 66);
-        border-radius-bottom-left: 5px;
+  border-bottom-left-radius: 5px;
-        border-radius-bottom-right: 5px;
+  border-bottom-right-radius: 5px;
-        border-top: 0;
+  border-top: 0;
-        margin-bottom: 15px;
+  margin-bottom: 15px;
-        .peak-desc{
+  .peak-desc{
-          display: flex;
+    display: flex;
+    color: #fff;
+    padding: 10px 15px;
+    .desc-item{
+      flex: 1;
+      align-items: flex-start;
+      line-height: 1.5;
+      .desc-label{
+        text-align:left;
+        font-size: 14px;
           color: #fff;
-          padding: 10px 15px;
+      }
-          .desc-item{
+       .desc-value{
-            flex: 1;
+        font-size: 20px;
-            align-items: flex-start;
+       }
-            line-height: 1.5;
+    }
-            .desc-label{
+  }
-              text-align:left;
-              font-size: 14px;
-                color: #fff;
-            }
-             .desc-value{
-              font-size: 20px;
-             }
-          }
-        }
 }
 .peak-content {
   display: flex;
@@ -1414,18 +1514,19 @@ export default {
 }
 
 .trend-chart {
-  height: 150px;
+  height: 250px;
   padding: 5px;
 }
 
 .park-content {
   display: flex;
   padding: 10px;
+  padding-top: 0;
 }
 
 .park-chart {
   flex: 1;
-  height: 160px;
+  height: 208px;
   width: 100%;
 }