[Mod 0000]修改数据中心表格样式

src/views/vent/dataCenter/infoCenter/index.vue

@@ -51,7 +51,7 @@
           <template #title> 每日采集数据量 </template>
           <template #container>
             <div class="content-wrapper">
-              <CustomChart :chart-config="dailyNumOption" :chart-data="deviceData" height="245px" />
+              <CustomChart :chart-config="dailyNumOption" :chart-data="deviceData" height="260px" width="100%" />
             </div>
           </template>
         </infoBox>
@@ -217,6 +217,12 @@
         width: 100%;
         overflow: hidden;
         padding-bottom: 20px;
+        .content-wrapper {
+          width: 100% !important; // 强制撑满父容器
+          height: 100% !important;
+          padding: 0 !important; // 抵消默认内边距（如果 infoBox 有内边距，这里需对应调整）
+          box-sizing: border-box; // 避免 padding 挤压宽度
+        }
       }
       .item-1 {
         height: 20%;
@@ -248,6 +254,13 @@
             background-size: 100% 100% !important;
           }
         }
+        .infoBox2 {
+          :deep(.box-container) {
+            // width: 100% !important;
+            // height: 100% !important;
+            padding: 5px 0px 5px 20px !important;
+          }
+        }
       }
       .item-3 {
         height: 40%;
@@ -320,6 +333,10 @@
           font-family: 'douyuFont';
           color: #66ffff;
           margin-top: 20px;
+          max-width: 200px; // 限制最大宽度
+          white-space: normal;
+          word-break: break-all; // 强制长内容换行（包括数字/字母）
+          text-align: center; // 保持文字居中对齐
         }
         .item-icon {
           width: 80px;

src/views/vent/dataCenter/infoCenter/infoCenter.data.ts

@@ -3,6 +3,11 @@ import { ModuleDataChart } from '/@/views/vent/deviceManager/configurationTable/
 
 import { h } from 'vue'; // 引入vue的h函数用于创建VNode
 
+// 导入图片资源（关键步骤）
+import rank1 from '@/assets/images/dataCenter/infoCenter/rank-1.png';
+import rank2 from '@/assets/images/dataCenter/infoCenter/rank-2.png';
+import rank3 from '@/assets/images/dataCenter/infoCenter/rank-3.png';
+import rank4 from '@/assets/images/dataCenter/infoCenter/rank-4.png';
 // 系统数据排名
 export const sysDataColumn: BasicColumn[] = [
   {
@@ -15,13 +20,13 @@ export const sysDataColumn: BasicColumn[] = [
       const numIndex = Number(index);
       let rankImg = '';
       if (numIndex === 0) {
-        rankImg = '/src/assets/images/dataCenter/infoCenter/rank-1.png';
+        rankImg = rank1;
       } else if (numIndex === 1) {
-        rankImg = '/src/assets/images/dataCenter/infoCenter/rank-2.png';
+        rankImg = rank2;
       } else if (numIndex === 2) {
-        rankImg = '/src/assets/images/dataCenter/infoCenter/rank-3.png';
+        rankImg = rank3;
       } else {
-        rankImg = '/src/assets/images/dataCenter/infoCenter/rank-4.png';
+        rankImg = rank4;
       }
       return h(
         'div',
@@ -125,7 +130,32 @@ export const dailyNumOption: ModuleDataChart = {
   type: 'bar',
   readFrom: '',
   legend: { show: false },
-  xAxis: [{ show: true }],
+  xAxis: [
+    {
+      show: true,
+      axisLabel: {
+        rotate: 45, // 在这里配置旋转角度
+        interval: 0,
+      },
+    },
+  ],
   yAxis: [{ show: true, name: '', position: 'left' }],
   series: [{ readFrom: 'collectDataByDayList', xprop: 'day', yprop: 'total_count', label: '' }],
+  dataZoom: [
+    {
+      type: 'slider' as any,
+      show: true,
+      xAxisIndex: 0,
+      height: 12,
+      bottom: 10,
+      start: 0,
+      handleStyle: { color: '#66ffff' },
+      backgroundColor: 'rgba(102, 255, 255, 0.1)', // 滚动条背景色，适配UI
+    },
+    {
+      type: 'inside' as any, // 支持鼠标滚轮缩放柱子
+      xAxisIndex: 0,
+      zoomOnMouseWheel: true,
+    },
+  ] as any[],
 };

src/views/vent/deviceManager/configurationTable/types.ts

@@ -294,6 +294,11 @@ export interface ModuleDataChart extends ReadFrom {
   xAxis: {
     show: boolean;
     name?: string;
+    axisLabel?: {
+      rotate?: number;
+      interval?: number;
+      [key: string]: any; // 允许其他 ECharts 支持的属性
+    };
   }[];
   /** 图表y轴配置（若有），支持多个，注意至少一个 */
   yAxis: {

src/views/vent/home/configurable/components/detail/CustomChart.vue

@@ -504,6 +504,8 @@ const genChartOption = () => {
       grid: {
         top: 50,
         bottom: dataZoom.length ? 70 : 30,
+        left: 30, // 缩小左侧边距，增加图表宽度
+        right: 30, // 缩小右侧边距
       },
       legend: {
         textStyle,
@@ -516,11 +518,13 @@ const genChartOption = () => {
       xAxis: xAxis.map((e) => {
         return {
           ...e,
+          dataZoom: baseDataZoom,
           type: 'category',
           axisLabel: {
             interval: 0,
             width: baseDataZoom.length ? 100 : 800 / get(baseSeries, '[0].data.length', 1),
             overflow: 'break',
+            rotate: get(e, 'axisLabel.rotate', 0), // 读取配置表中的rotate值，默认0
           },
         };
       }),