From 91a4ea06e588e6ef8ece5a3c13e14d5b53d0a1bc Mon Sep 17 00:00:00 2001
From: git_rabbit <zhaozhengyi1b@126.com>
Date: Wed, 29 Oct 2025 00:03:44 +0800
Subject: [PATCH] =?UTF-8?q?fix(CarouselBoard):=20=E5=B0=86=E8=BD=AE?=
 =?UTF-8?q?=E6=92=AD=E9=97=B4=E9=9A=94=E4=BB=8E60=E7=A7=92=E6=94=B9?=
 =?UTF-8?q?=E4=B8=BA10=E7=A7=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

优化轮播体验，加快信息展示频率，提升用户交互体验
---
 .../components/QualityStatisticsCard.vue      | 1438 +++++++++--------
 .../components/WorkorderOnlineCard.vue        | 1339 ++++++++-------
 .../kanbanManagement/CarouselBoard/index.vue  |  126 +-
 3 files changed, 1533 insertions(+), 1370 deletions(-)

diff --git a/src/views/kanbanManagement/CarouselBoard/components/QualityStatisticsCard.vue b/src/views/kanbanManagement/CarouselBoard/components/QualityStatisticsCard.vue
index da34b37..e3a5d90 100644
--- a/src/views/kanbanManagement/CarouselBoard/components/QualityStatisticsCard.vue
+++ b/src/views/kanbanManagement/CarouselBoard/components/QualityStatisticsCard.vue
@@ -1,582 +1,593 @@
 <template>
-  <div class="quality-statistics-card">
-    <!-- 标题部分：使用kbHeader组件统一风格 -->
-    <kb-header>质量统计报表</kb-header>
-    
-    <!-- 第一行：统计数据翻牌器区域 -->
-    <div class="first-row">
-      <div class="statistics-section">
-        <div class="flip-card-container">
-          <div class="flip-card">
-            <div class="flip-card-label">报表数量</div>
-            <div class="flip-card-value">{{ statistics.totalRecords }}</div>
-          </div>
-          <div class="flip-card">
-            <div class="flip-card-label">投入总数</div>
-            <div class="flip-card-value">{{ statistics.totalInput }}</div>
-          </div>
-          <div class="flip-card">
-            <div class="flip-card-label">合格总数</div>
-            <div class="flip-card-value completed">{{ statistics.totalQualified }}</div>
-          </div>
-          <div class="flip-card">
-            <div class="flip-card-label">合格率</div>
-            <div class="flip-card-value">{{ statistics.passRate }}</div>
-          </div>
-          <div class="flip-card">
-            <div class="flip-card-label">抛光总数</div>
-            <div class="flip-card-value">{{ statistics.totalPolish }}</div>
-          </div>
-          <div class="flip-card">
-            <div class="flip-card-label">打磨总数</div>
-            <div class="flip-card-value">{{ statistics.totalGrind }}</div>
-          </div>
-          <div class="flip-card">
-            <div class="flip-card-label">报废总数</div>
-            <div class="flip-card-value scrap">{{ statistics.totalScrap }}</div>
-          </div>
+    <div class="quality-statistics-card">
+        <!-- 标题部分：使用kbHeader组件统一风格 -->
+        <kb-header>质量统计报表</kb-header>
+
+        <!-- 第一行：统计数据翻牌器区域 -->
+        <div class="first-row">
+            <div class="statistics-section">
+                <div class="flip-card-container">
+                    <div class="flip-card">
+                        <div class="flip-card-label">报表数量</div>
+                        <div class="flip-card-value">{{ statistics.totalRecords }}</div>
+                    </div>
+                    <div class="flip-card">
+                        <div class="flip-card-label">投入总数</div>
+                        <div class="flip-card-value">{{ statistics.totalInput }}</div>
+                    </div>
+                    <div class="flip-card">
+                        <div class="flip-card-label">合格总数</div>
+                        <div class="flip-card-value completed">{{ statistics.totalQualified }}</div>
+                    </div>
+                    <div class="flip-card">
+                        <div class="flip-card-label">合格率</div>
+                        <div class="flip-card-value">{{ statistics.passRate }}</div>
+                    </div>
+                    <div class="flip-card">
+                        <div class="flip-card-label">抛光总数</div>
+                        <div class="flip-card-value">{{ statistics.totalPolish }}</div>
+                    </div>
+                    <div class="flip-card">
+                        <div class="flip-card-label">打磨总数</div>
+                        <div class="flip-card-value">{{ statistics.totalGrind }}</div>
+                    </div>
+                    <div class="flip-card">
+                        <div class="flip-card-label">报废总数</div>
+                        <div class="flip-card-value scrap">{{ statistics.totalScrap }}</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- 第二行：表格和图表区域 -->
+        <div class="second-row">
+            <!-- 左侧：质量统计表格 -->
+            <div class="table-section">
+                <div class="section-title">质量统计列表</div>
+                <div class="custom-table-wrapper">
+                    <table
+                        class="custom-table"
+                        v-if="!loading"
+                    >
+                        <thead>
+                            <tr>
+                                <th width="140">工单号</th>
+                                <th width="120">零件号</th>
+                                <th width="100">颜色</th>
+                                <th width="150">描述</th>
+                                <th width="80">班次</th>
+                                <th width="120">生产投入数</th>
+                                <th width="80">合格数</th>
+                                <th width="80">合格率</th>
+                                <th width="80">抛光总数</th>
+                                <th width="80">打磨总数</th>
+                                <th width="80">报废总数</th>
+                                <th width="108">开始时间</th>
+                                <th width="108">结束时间</th>
+                            </tr>
+                        </thead>
+                        <tbody ref="tableBody">
+                            <tr
+                                v-for="(row, index) in qualityStatisticsTable"
+                                :key="index"
+                                class="table-row"
+                            >
+                                <td>{{ row.workorderId || "-" }}</td>
+                                <td>{{ row.finishedPartNumber || "-" }}</td>
+                                <td>{{ row.color || "-" }}</td>
+                                <td class="ellipsis">{{ row.productDescription || "-" }}</td>
+                                <td>{{ row.team || "-" }}</td>
+                                <td>{{ row.requireNumber || "-" }}</td>
+                                <td>{{ row.qualifiedNumber || "-" }}</td>
+                                <td>{{ offsetRate(row.qualifiedRate) }}%</td>
+                                <td>{{ row.paoguangTotal || "-" }}</td>
+                                <td>{{ row.damoTotal || "-" }}</td>
+                                <td>{{ row.baofeiTotal || "-" }}</td>
+                                <td>{{ row.startTime || "-" }}</td>
+                                <td>{{ row.endTime || "-" }}</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                    <div
+                        class="loading-overlay"
+                        v-if="loading"
+                    >
+                        <div class="loading-spinner"></div>
+                        <div class="loading-text">加载中...</div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 右侧：图表区域 -->
+            <div class="charts-section">
+                <!-- 上半部分：合格率分布饼图 -->
+                <div class="chart-container">
+                    <div class="section-title">合格率分布</div>
+                    <div
+                        id="qualifiedRatePieChart"
+                        style="width: 100%; height: 200px"
+                    ></div>
+                </div>
+
+                <!-- 下半部分：平均合格率TOP5柱状图 -->
+                <div class="chart-container">
+                    <div class="section-title">平均合格率TOP5</div>
+                    <div
+                        id="top5Chart"
+                        style="width: 100%; height: 280px"
+                    ></div>
+                </div>
+            </div>
         </div>
-      </div>
     </div>
-    
-    <!-- 第二行：表格和图表区域 -->
-    <div class="second-row">
-      <!-- 左侧：质量统计表格 -->
-      <div class="table-section">
-        <div class="section-title">质量统计列表</div>
-        <div class="custom-table-wrapper" :style="{ height: tableHeight }">
-          <table class="custom-table" v-if="!loading">
-            <thead>
-              <tr>
-                <th width="140">工单号</th>
-                <th width="120">零件号</th>
-                <th width="100">颜色</th>
-                <th width="150">描述</th>
-                <th width="80">班次</th>
-                <th width="120">生产投入数</th>
-                <th width="80">合格数</th>
-                <th width="80">合格率</th>
-                <th width="80">抛光总数</th>
-                <th width="80">打磨总数</th>
-                <th width="80">报废总数</th>
-                <th width="108">开始时间</th>
-                <th width="108">结束时间</th>
-              </tr>
-            </thead>
-            <tbody ref="tableBody">
-              <tr v-for="(row, index) in qualityStatisticsTable" :key="index" class="table-row">
-                <td>{{ row.workorderId || '-' }}</td>
-                <td>{{ row.finishedPartNumber || '-' }}</td>
-                <td>{{ row.color || '-' }}</td>
-                <td class="ellipsis">{{ row.productDescription || '-' }}</td>
-                <td>{{ row.team || '-' }}</td>
-                <td>{{ row.requireNumber || '-' }}</td>
-                <td>{{ row.qualifiedNumber || '-' }}</td>
-                <td>{{ offsetRate(row.qualifiedRate) }}%</td>
-                <td>{{ row.paoguangTotal || '-' }}</td>
-                <td>{{ row.damoTotal || '-' }}</td>
-                <td>{{ row.baofeiTotal || '-' }}</td>
-                <td>{{ row.startTime || '-' }}</td>
-                <td>{{ row.endTime || '-' }}</td>
-              </tr>
-            </tbody>
-          </table>
-          <div class="loading-overlay" v-if="loading">
-            <div class="loading-spinner"></div>
-            <div class="loading-text">加载中...</div>
-          </div>
-        </div>
-      </div>
-      
-      <!-- 右侧：图表区域 -->
-      <div class="charts-section">
-        <!-- 上半部分：合格率分布饼图 -->
-        <div class="chart-container">
-          <div class="section-title">合格率分布</div>
-          <div id="qualifiedRatePieChart" style="width: 100%; height: 200px;"></div>
-        </div>
-        
-        <!-- 下半部分：平均合格率TOP5柱状图 -->
-        <div class="chart-container">
-          <div class="section-title">平均合格率TOP5</div>
-          <div id="top5Chart" style="width: 100%; height: 280px;"></div>
-        </div>
-      </div>
-    </div>
-  </div>
 </template>
 
 <script>
-import { getQualityStatisticsCarouselBoardData } from '@/api/kanbanManagement/carouselBoard.js'
-import * as echarts from 'echarts';
-import kbHeader from './kbHeader.vue';
+import { getQualityStatisticsCarouselBoardData } from "@/api/kanbanManagement/carouselBoard.js";
+import * as echarts from "echarts";
+import kbHeader from "./kbHeader.vue";
 
 export default {
-  name: 'QualityStatisticsCard',
-  components: {
-    kbHeader
-  },
-  data() {
-    return {
-      loading: false,
-      qualityStatisticsTable: [],
-      tableHeight: '500px',
-      search: {
-        starttime: null,
-        endtime: null,
-        team: null,
-        workorderid: null,
-        partnumber: null,
-        sortType: 0,
-        reportType: 0,
-        product_description: '',
-      },
-      // 统计数据对象
-      statistics: {
-        totalRecords: 0,
-        totalInput: 0,
-        totalQualified: 0,
-        passRate: '0%',
-        totalPolish: 0,
-        totalGrind: 0,
-        totalScrap: 0
-      },
-      allDataList: [],
-      // 图表实例
-      qualifiedRatePieChart: null,
-      top5Chart: null,
-      tableScrollTimer: null,
-      refreshTimer: null,
-      scrollCheckTimer: null
-    }
-  },
-  
-  mounted() {
-    console.log('质量组件mounted生命周期调用')
-    this.init()
-    this.getQualityData()
-    // 监听窗口大小变化
-    window.addEventListener('resize', this.handleResize)
-    
-    // 添加滚动检查定时器
-    this.scrollCheckTimer = setInterval(() => {
-      console.log('质量组件定时检查滚动')
-      this.$nextTick(() => {
-        this.startTableAutoScroll()
-      })
-    }, 10000)
-    
-    // 设置5分钟定时刷新
-    this.refreshTimer = setInterval(() => {
-      this.getQualityData()
-    }, 5 * 60 * 1000) // 5分钟 = 5 * 60 * 1000毫秒
-  },
-  
-  updated() {
-    // 数据更新后初始化图表和启动表格滚动
-    this.$nextTick(() => {
-      console.log('质量组件updated生命周期调用')
-      if (this.qualityStatisticsTable.length > 0) {
-        this.initQualifiedRatePieChart()
-        this.initTop5Chart()
-      }
-      // 无论数据是否为空，都尝试启动滚动，确保表格有内容时能正常滚动
-      this.startTableAutoScroll()
-    })
-  },
-  
-  beforeDestroy() {
-    window.removeEventListener('resize', this.handleResize)
-    // 清理图表实例
-    if (this.qualifiedRatePieChart) {
-      this.qualifiedRatePieChart.dispose()
-      this.qualifiedRatePieChart = null
-    }
-    if (this.top5Chart) {
-      this.top5Chart.dispose()
-      this.top5Chart = null
-    }
-    // 清理表格滚动定时器（setInterval）
-    if (this.tableScrollTimer) {
-      clearInterval(this.tableScrollTimer)
-      this.tableScrollTimer = null
-    }
-    // 清理滚动检查定时器
-    if (this.scrollCheckTimer) {
-      clearInterval(this.scrollCheckTimer)
-      this.scrollCheckTimer = null
-    }
-    // 清理数据刷新定时器
-    if (this.refreshTimer) {
-      clearInterval(this.refreshTimer)
-      this.refreshTimer = null
-    }
-  },
-  
-  methods: {
-    init() {
-      // 设置默认时间范围为今天
-      const today = new Date()
-      this.search.starttime = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 0, 0, 0)
-      this.search.endtime = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 23, 59, 59)
+    name: "QualityStatisticsCard",
+    components: {
+        kbHeader,
     },
-    
-    // 合格率去除小数
-    offsetRate(num) {
-      if (num === null || num === '' || isNaN(num)) {
-        return '0'
-      }
-      return parseInt(num)
+    data() {
+        return {
+            loading: false,
+            qualityStatisticsTable: [],
+            tableHeight: "500px",
+            search: {
+                starttime: null,
+                endtime: null,
+                team: null,
+                workorderid: null,
+                partnumber: null,
+                sortType: 0,
+                reportType: 0,
+                product_description: "",
+            },
+            // 统计数据对象
+            statistics: {
+                totalRecords: 0,
+                totalInput: 0,
+                totalQualified: 0,
+                passRate: "0%",
+                totalPolish: 0,
+                totalGrind: 0,
+                totalScrap: 0,
+            },
+            allDataList: [],
+            // 图表实例
+            qualifiedRatePieChart: null,
+            top5Chart: null,
+            tableScrollTimer: null,
+            refreshTimer: null,
+            scrollCheckTimer: null,
+        };
     },
-    
-    // 获取质量数据
-    getQualityData() {
-      this.loading = true
-      // 设置默认查询参数
-      let query = { 
-        ...this.search, 
-        pageNum: 1,
-        pageSize: 20
-      }
-      
-      getQualityStatisticsCarouselBoardData(query)
-        .then((res) => {
-          if (res.code == 200) {
-            this.qualityStatisticsTable = res.data || []
-            this.allDataList = res.data || []
-            console.log('质量数据加载完成，共', this.qualityStatisticsTable.length, '条记录')
-            // 计算统计数据
-            this.calculateStatistics()
-            
-            // 数据加载完成后立即启动滚动
+
+    mounted() {
+        console.log("质量组件mounted生命周期调用");
+        this.init();
+        this.getQualityData();
+        // 监听窗口大小变化
+        window.addEventListener("resize", this.handleResize);
+
+        // 添加滚动检查定时器
+        this.scrollCheckTimer = setInterval(() => {
+            console.log("质量组件定时检查滚动");
             this.$nextTick(() => {
-              console.log('质量数据加载后启动滚动')
-              this.startTableAutoScroll()
-            })
-          }
-        })
-        .finally(() => {
-          this.loading = false
-        })
+                this.startTableAutoScroll();
+            });
+        }, 10000);
+
+        // 设置5分钟定时刷新
+        this.refreshTimer = setInterval(() => {
+            this.getQualityData();
+        }, 5 * 60 * 1000); // 5分钟 = 5 * 60 * 1000毫秒
     },
-    
-    // 计算统计数据
-    calculateStatistics() {
-      // 过滤掉倒车雷达数据
-      const filteredData = this.allDataList.filter(data => !data.productDescription?.includes('倒车雷达'))
-      
-      // 统计报表数量
-      this.statistics.totalRecords = filteredData.length
-      
-      // 确保准确计算数字翻牌器数据
-      // 统计投入数
-      this.statistics.totalInput = Math.trunc(
-        filteredData.reduce((acc, data) => {
-          // 确保数据准确性，只加有效数字
-          const value = Number(data.requireNumber)
-          return acc + (isNaN(value) ? 0 : value)
-        }, 0) / 3
-      )
-      
-      // 统计合格数
-      this.statistics.totalQualified = Math.trunc(
-        filteredData.reduce((acc, data) => {
-          const value = Number(data.qualifiedNumber)
-          return acc + (isNaN(value) ? 0 : value)
-        }, 0) / 3
-      )
-      
-      // 计算合格率
-      if (this.statistics.totalInput > 0) {
-        const rate = (this.statistics.totalQualified / this.statistics.totalInput) * 100
-        this.statistics.passRate = rate.toFixed(1) + '%'
-      } else {
-        this.statistics.passRate = '0%'
-      }
-      
-      // 统计抛光数
-      this.statistics.totalPolish = Math.trunc(
-        filteredData.reduce((acc, data) => {
-          const value = Number(data.paoguangTotal)
-          return acc + (isNaN(value) ? 0 : value)
-        }, 0) / 3
-      )
-      
-      // 统计打磨数
-      this.statistics.totalGrind = Math.trunc(
-        filteredData.reduce((acc, data) => {
-          const value = Number(data.damoTotal)
-          return acc + (isNaN(value) ? 0 : value)
-        }, 0) / 3
-      )
-      
-      // 统计报废数
-      this.statistics.totalScrap = Math.trunc(
-        filteredData.reduce((acc, data) => {
-          const value = Number(data.baofeiTotal)
-          return acc + (isNaN(value) ? 0 : value)
-        }, 0) / 3
-      )
-    },
-    
-    // 初始化合格率分布饼图（80%以上和以下的占比）
-    initQualifiedRatePieChart() {
-      const chartDom = document.getElementById('qualifiedRatePieChart')
-      if (!chartDom) return
-      
-      if (this.qualifiedRatePieChart) {
-        this.qualifiedRatePieChart.dispose()
-      }
-      
-      this.qualifiedRatePieChart = echarts.init(chartDom)
-      
-      // 过滤有合格数据的记录
-      const validData = this.allDataList.filter(item => 
-        item.qualifiedRate !== null && item.qualifiedRate !== '' && !isNaN(item.qualifiedRate)
-      )
-      
-      // 统计合格率80%以上和80%以下的数量
-      const above80 = validData.filter(item => parseFloat(item.qualifiedRate) >= 80).length
-      const below80 = validData.filter(item => parseFloat(item.qualifiedRate) < 80).length
-      
-      const option = {
-        tooltip: {
-          trigger: 'item',
-          formatter: '{b}: {c} ({d}%)'
-        },
-        legend: {
-          orient: 'horizontal',
-          bottom: 10,
-          data: ['合格率≥80%', '合格率<80%'],
-          textStyle: {
-            color: '#00ffff',
-            fontSize: 12
-          }
-        },
-        series: [
-          {
-            name: '合格率分布',
-            type: 'pie',
-            radius: ['40%', '70%'],
-            center: ['50%', '40%'],
-            avoidLabelOverlap: false,
-            itemStyle: {
-              borderRadius: 6,
-              borderColor: 'rgba(0, 20, 40, 0.6)',
-              borderWidth: 2
-            },
-            label: {
-              show: true,
-              formatter: '{b}\n{d}%',
-              color: '#ffffff',
-              fontSize: 12
-            },
-            emphasis: {
-              label: {
-                show: true,
-                fontSize: '14',
-                fontWeight: 'bold',
-                color: '#00ffff'
-              }
-            },
-            data: [
-              { value: above80, name: '合格率≥80%', itemStyle: { color: '#67c23a' } },
-              { value: below80, name: '合格率<80%', itemStyle: { color: '#f56c6c' } }
-            ].filter(item => item.value > 0) // 过滤掉数量为0的类别
-          }
-        ]
-      }
-      
-      this.qualifiedRatePieChart.setOption(option)
-    },
-    
-    // 初始化平均合格率TOP5横向柱状图
-    initTop5Chart() {
-      const chartDom = document.getElementById('top5Chart')
-      if (!chartDom) return
-      
-      if (this.top5Chart) {
-        this.top5Chart.dispose()
-      }
-      
-      this.top5Chart = echarts.init(chartDom)
-      
-      // 过滤有合格数据的记录并按合格率降序排序，确保合格率高的显示在顶部
-      const validData = this.allDataList.filter(item => 
-        item.qualifiedRate !== null && item.qualifiedRate !== '' && !isNaN(item.qualifiedRate)
-      ).sort((a, b) => parseFloat(b.qualifiedRate) - parseFloat(a.qualifiedRate))
-      
-      // 获取合格率最高的前5个
-      const top5 = validData.slice(0, 5)
-      
-      // 准备横向柱状图数据，y轴显示产品描述
-      const labels = top5.map(item => {
-        const desc = item.productDescription || item.finishedPartNumber || '未知'
-        // 截取前20个字符，优先显示描述
-        const shortDesc = desc.length > 20 ? desc.substring(0, 20) + '...' : desc
-        return shortDesc
-      })
-      const rates = top5.map(item => parseFloat(item.qualifiedRate) || 0)
-      
-      const option = {
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow'
-          },
-          formatter: function(params) {
-            const data = params[0]
-            return data.name + '<br/>合格率: ' + data.value + '%'
-          }
-        },
-        grid: {
-          left: '5%', // 减小左侧边距，让图表整体向左移动
-          right: '10%',
-          top: '10%',
-          bottom: '10%',
-          containLabel: true
-        },
-        xAxis: {
-          type: 'value',
-          min: 0,
-          max: 100,
-          axisLabel: {
-            formatter: '{value}%',
-            color: '#ffffff',
-            fontSize: 12
-          },
-          splitLine: {
-            lineStyle: {
-              color: 'rgba(255, 255, 255, 0.1)'
+
+    updated() {
+        // 数据更新后初始化图表和启动表格滚动
+        this.$nextTick(() => {
+            console.log("质量组件updated生命周期调用");
+            if (this.qualityStatisticsTable.length > 0) {
+                this.initQualifiedRatePieChart();
+                this.initTop5Chart();
             }
-          }
-        },
-        yAxis: {
-          type: 'category',
-          data: labels,
-          axisLabel: {
-            color: '#00ffff',
-            fontSize: 12,
-            interval: 0,
-            formatter: function(value) {
-              // 自动换行，每行最多显示8个字符
-              const maxLength = 8;
-              let result = '';
-              for (let i = 0; i < value.length; i += maxLength) {
-                result += value.substring(i, i + maxLength) + '\n';
-              }
-              return result.trim();
-            }
-          }
-        },
-        series: [
-          {
-            name: '合格率',
-            type: 'bar',
-            data: rates,
-            itemStyle: {
-              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-                { offset: 0, color: '#0066ff' },
-                { offset: 1, color: '#00ffff' }
-              ])
-            },
-            barWidth: '50%',
-            label: {
-              show: true,
-              position: 'right',
-              color: '#ffffff',
-              formatter: '{c}%'
-            }
-          }
-        ]
-      }
-      
-      this.top5Chart.setOption(option)
+            // 无论数据是否为空，都尝试启动滚动，确保表格有内容时能正常滚动
+            this.startTableAutoScroll();
+        });
     },
-    
-    // 表格自动滚动功能 - 修复滚动逻辑
-    startTableAutoScroll() {
-      // 先清理可能存在的定时器
-      if (this.tableScrollTimer) {
-        clearInterval(this.tableScrollTimer)
-        this.tableScrollTimer = null
-      }
-      
-      // 确保表格元素已渲染
-      this.$nextTick(() => {
-        console.log('质量组件启动滚动逻辑')
-        // 直接获取DOM元素，避免选择器问题
-        const tableSection = this.$el.querySelector('.table-section')
-        const wrapper = tableSection ? tableSection.querySelector('.custom-table-wrapper') : null
-        console.log('质量组件滚动容器:', wrapper)
-        if (!wrapper) {
-          console.log('滚动容器未找到')
-          return
+
+    beforeDestroy() {
+        window.removeEventListener("resize", this.handleResize);
+        // 清理图表实例
+        if (this.qualifiedRatePieChart) {
+            this.qualifiedRatePieChart.dispose();
+            this.qualifiedRatePieChart = null;
+        }
+        if (this.top5Chart) {
+            this.top5Chart.dispose();
+            this.top5Chart = null;
+        }
+        // 清理表格滚动定时器（setInterval）
+        if (this.tableScrollTimer) {
+            clearInterval(this.tableScrollTimer);
+            this.tableScrollTimer = null;
+        }
+        // 清理滚动检查定时器
+        if (this.scrollCheckTimer) {
+            clearInterval(this.scrollCheckTimer);
+            this.scrollCheckTimer = null;
+        }
+        // 清理数据刷新定时器
+        if (this.refreshTimer) {
+            clearInterval(this.refreshTimer);
+            this.refreshTimer = null;
         }
-        
-        // 重要：确保容器内容高度大于容器高度才需要滚动
-        const scrollableHeight = wrapper.scrollHeight - wrapper.clientHeight
-        console.log('质量组件容器可滚动高度差:', scrollableHeight)
-        
-        // 优化滚动容器样式设置
-        // 不设置height，因为模板中已经通过:style绑定
-        wrapper.style.overflow = 'auto'
-        wrapper.style.overflowX = 'hidden'
-        wrapper.style.scrollBehavior = 'smooth'
-        console.log('质量组件设置滚动容器样式完成')
-        
-        // 重置滚动位置
-        wrapper.scrollTop = 0
-        
-        // 增加滚动速度，使其更容易观察
-        const scrollSpeed = 2 // 提高到2，确保明显可见
-        
-        // 使用setInterval替代requestAnimationFrame，更稳定
-        this.tableScrollTimer = setInterval(() => {
-          if (wrapper && wrapper.scrollHeight > wrapper.clientHeight) {
-            // 检查是否滚动到底部
-            if (wrapper.scrollTop + 10 >= wrapper.scrollHeight - wrapper.clientHeight) {
-              console.log('质量组件已滚动到底部，准备复位')
-              // 重置到顶部
-              wrapper.scrollTop = 0
-            } else {
-              // 持续滚动
-              wrapper.scrollTop += scrollSpeed
-            }
-          }
-        }, 50) // 每50毫秒滚动一次，更平滑
-        
-        console.log('质量组件启动滚动定时器')
-      })
     },
-    
-    // 处理窗口大小变化
-    handleResize() {
-      // 考虑kbHeader的高度，重新计算内容高度
-      const windowHeight = window.innerHeight
-      // 减去标题高度和padding等，确保内容适配
-      const availableHeight = windowHeight - 60 // 标题高度
-      
-      // 调整第一行数字翻牌器高度，减小高度
-      const firstRow = document.querySelector('.first-row')
-      if (firstRow) {
-        firstRow.style.height = '120px' // 减小第一行高度
-      }
-      
-      // 计算表格高度，确保表格固定高度且不会超出屏幕
-      // 调整计算方式，让第二行保持正常高度
-      this.tableHeight = Math.min(Math.max(availableHeight - 140, 350), 450) + 'px' // 减少减去的值，让第二行保持正常高度
-      
-      // 调整图表大小
-      if (this.qualifiedRatePieChart) {
-        this.qualifiedRatePieChart.resize()
-      }
-      if (this.top5Chart) {
-        this.top5Chart.resize()
-      }
-    }
-  }
-}
+
+    methods: {
+        init() {
+            // 设置默认时间范围为今天
+            const today = new Date();
+            this.search.starttime = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 0, 0, 0);
+            this.search.endtime = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 23, 59, 59);
+        },
+
+        // 合格率去除小数
+        offsetRate(num) {
+            if (num === null || num === "" || isNaN(num)) {
+                return "0";
+            }
+            return parseInt(num);
+        },
+
+        // 获取质量数据
+        getQualityData() {
+            this.loading = true;
+            // 设置默认查询参数
+            let query = {
+                ...this.search,
+                pageNum: 1,
+                pageSize: 20,
+            };
+
+            getQualityStatisticsCarouselBoardData(query)
+                .then((res) => {
+                    if (res.code == 200) {
+                        this.qualityStatisticsTable = res.data || [];
+                        this.allDataList = res.data || [];
+                        console.log("质量数据加载完成，共", this.qualityStatisticsTable.length, "条记录");
+                        // 计算统计数据
+                        this.calculateStatistics();
+
+                        // 数据加载完成后立即启动滚动
+                        this.$nextTick(() => {
+                            console.log("质量数据加载后启动滚动");
+                            this.startTableAutoScroll();
+                        });
+                    }
+                })
+                .finally(() => {
+                    this.loading = false;
+                });
+        },
+
+        // 计算统计数据
+        calculateStatistics() {
+            // 过滤掉倒车雷达数据
+            const filteredData = this.allDataList.filter((data) => !data.productDescription?.includes("倒车雷达"));
+
+            // 统计报表数量
+            this.statistics.totalRecords = filteredData.length;
+
+            // 确保准确计算数字翻牌器数据
+            // 统计投入数
+            this.statistics.totalInput = Math.trunc(
+                filteredData.reduce((acc, data) => {
+                    // 确保数据准确性，只加有效数字
+                    const value = Number(data.requireNumber);
+                    return acc + (isNaN(value) ? 0 : value);
+                }, 0) / 3
+            );
+
+            // 统计合格数
+            this.statistics.totalQualified = Math.trunc(
+                filteredData.reduce((acc, data) => {
+                    const value = Number(data.qualifiedNumber);
+                    return acc + (isNaN(value) ? 0 : value);
+                }, 0) / 3
+            );
+
+            // 计算合格率
+            if (this.statistics.totalInput > 0) {
+                const rate = (this.statistics.totalQualified / this.statistics.totalInput) * 100;
+                this.statistics.passRate = rate.toFixed(1) + "%";
+            } else {
+                this.statistics.passRate = "0%";
+            }
+
+            // 统计抛光数
+            this.statistics.totalPolish = Math.trunc(
+                filteredData.reduce((acc, data) => {
+                    const value = Number(data.paoguangTotal);
+                    return acc + (isNaN(value) ? 0 : value);
+                }, 0) / 3
+            );
+
+            // 统计打磨数
+            this.statistics.totalGrind = Math.trunc(
+                filteredData.reduce((acc, data) => {
+                    const value = Number(data.damoTotal);
+                    return acc + (isNaN(value) ? 0 : value);
+                }, 0) / 3
+            );
+
+            // 统计报废数
+            this.statistics.totalScrap = Math.trunc(
+                filteredData.reduce((acc, data) => {
+                    const value = Number(data.baofeiTotal);
+                    return acc + (isNaN(value) ? 0 : value);
+                }, 0) / 3
+            );
+        },
+
+        // 初始化合格率分布饼图（80%以上和以下的占比）
+        initQualifiedRatePieChart() {
+            const chartDom = document.getElementById("qualifiedRatePieChart");
+            if (!chartDom) return;
+
+            if (this.qualifiedRatePieChart) {
+                this.qualifiedRatePieChart.dispose();
+            }
+
+            this.qualifiedRatePieChart = echarts.init(chartDom);
+
+            // 过滤有合格数据的记录
+            const validData = this.allDataList.filter((item) => item.qualifiedRate !== null && item.qualifiedRate !== "" && !isNaN(item.qualifiedRate));
+
+            // 统计合格率80%以上和80%以下的数量
+            const above80 = validData.filter((item) => parseFloat(item.qualifiedRate) >= 80).length;
+            const below80 = validData.filter((item) => parseFloat(item.qualifiedRate) < 80).length;
+
+            const option = {
+                tooltip: {
+                    trigger: "item",
+                    formatter: "{b}: {c} ({d}%)",
+                },
+                legend: {
+                    orient: "horizontal",
+                    bottom: 10,
+                    data: ["合格率≥80%", "合格率<80%"],
+                    textStyle: {
+                        color: "#00ffff",
+                        fontSize: 12,
+                    },
+                },
+                series: [
+                    {
+                        name: "合格率分布",
+                        type: "pie",
+                        radius: ["40%", "70%"],
+                        center: ["50%", "40%"],
+                        avoidLabelOverlap: false,
+                        itemStyle: {
+                            borderRadius: 6,
+                            borderColor: "rgba(0, 20, 40, 0.6)",
+                            borderWidth: 2,
+                        },
+                        label: {
+                            show: true,
+                            formatter: "{b}\n{d}%",
+                            color: "#ffffff",
+                            fontSize: 12,
+                        },
+                        emphasis: {
+                            label: {
+                                show: true,
+                                fontSize: "14",
+                                fontWeight: "bold",
+                                color: "#00ffff",
+                            },
+                        },
+                        data: [
+                            { value: above80, name: "合格率≥80%", itemStyle: { color: "#67c23a" } },
+                            { value: below80, name: "合格率<80%", itemStyle: { color: "#f56c6c" } },
+                        ].filter((item) => item.value > 0), // 过滤掉数量为0的类别
+                    },
+                ],
+            };
+
+            this.qualifiedRatePieChart.setOption(option);
+        },
+
+        // 初始化平均合格率TOP5横向柱状图
+        initTop5Chart() {
+            const chartDom = document.getElementById("top5Chart");
+            if (!chartDom) return;
+
+            if (this.top5Chart) {
+                this.top5Chart.dispose();
+            }
+
+            this.top5Chart = echarts.init(chartDom);
+
+            // 过滤有合格数据的记录并按合格率降序排序，确保合格率高的显示在顶部
+            const validData = this.allDataList
+                .filter((item) => item.qualifiedRate !== null && item.qualifiedRate !== "" && !isNaN(item.qualifiedRate))
+                .sort((a, b) => parseFloat(b.qualifiedRate) - parseFloat(a.qualifiedRate));
+
+            // 获取合格率最高的前5个
+            const top5 = validData.slice(0, 5);
+
+            // 准备横向柱状图数据，y轴显示产品描述
+            const labels = top5.map((item) => {
+                const desc = item.productDescription || item.finishedPartNumber || "未知";
+                // 截取前20个字符，优先显示描述
+                const shortDesc = desc.length > 20 ? desc.substring(0, 20) + "..." : desc;
+                return shortDesc;
+            });
+            const rates = top5.map((item) => parseFloat(item.qualifiedRate) || 0);
+
+            const option = {
+                tooltip: {
+                    trigger: "axis",
+                    axisPointer: {
+                        type: "shadow",
+                    },
+                    formatter: function (params) {
+                        const data = params[0];
+                        return data.name + "<br/>合格率: " + data.value + "%";
+                    },
+                },
+                grid: {
+                    left: "5%", // 减小左侧边距，让图表整体向左移动
+                    right: "10%",
+                    top: "10%",
+                    bottom: "10%",
+                    containLabel: true,
+                },
+                xAxis: {
+                    type: "value",
+                    min: 0,
+                    max: 100,
+                    axisLabel: {
+                        formatter: "{value}%",
+                        color: "#ffffff",
+                        fontSize: 12,
+                    },
+                    splitLine: {
+                        lineStyle: {
+                            color: "rgba(255, 255, 255, 0.1)",
+                        },
+                    },
+                },
+                yAxis: {
+                    type: "category",
+                    data: labels,
+                    axisLabel: {
+                        color: "#00ffff",
+                        fontSize: 12,
+                        interval: 0,
+                        formatter: function (value) {
+                            // 自动换行，每行最多显示8个字符
+                            const maxLength = 8;
+                            let result = "";
+                            for (let i = 0; i < value.length; i += maxLength) {
+                                result += value.substring(i, i + maxLength) + "\n";
+                            }
+                            return result.trim();
+                        },
+                    },
+                },
+                series: [
+                    {
+                        name: "合格率",
+                        type: "bar",
+                        data: rates,
+                        itemStyle: {
+                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                                { offset: 0, color: "#0066ff" },
+                                { offset: 1, color: "#00ffff" },
+                            ]),
+                        },
+                        barWidth: "50%",
+                        label: {
+                            show: true,
+                            position: "right",
+                            color: "#ffffff",
+                            formatter: "{c}%",
+                        },
+                    },
+                ],
+            };
+
+            this.top5Chart.setOption(option);
+        },
+
+        // 表格自动滚动功能 - 修复滚动逻辑
+        startTableAutoScroll() {
+            // 先清理之前的定时器，防止累积
+            if (this.tableScrollTimer) {
+                clearInterval(this.tableScrollTimer);
+                this.tableScrollTimer = null;
+            }
+
+            // 确保表格元素已渲染
+            this.$nextTick(() => {
+                // 直接获取DOM元素，避免选择器问题
+                const tableSection = this.$el.querySelector(".table-section");
+                const wrapper = tableSection ? tableSection.querySelector(".custom-table-wrapper") : null;
+                if (!wrapper) {
+                    return;
+                }
+
+                // 重要：确保容器内容高度大于容器高度才需要滚动
+                const scrollableHeight = wrapper.scrollHeight - wrapper.clientHeight;
+                if (scrollableHeight <= 0) {
+                    return; // 内容不足，不需要滚动
+                }
+
+                // 优化滚动容器样式设置
+                wrapper.style.overflow = "auto";
+                wrapper.style.overflowX = "auto"; // 改为auto，允许水平滚动以防止内容被截断
+                wrapper.style.scrollBehavior = "smooth";
+
+                // 重置滚动位置
+                wrapper.scrollTop = 0;
+
+                // 滚动速度
+                const scrollSpeed = 2;
+
+                // 使用setInterval实现滚动
+                this.tableScrollTimer = setInterval(() => {
+                    try {
+                        if (wrapper && wrapper.isConnected) {
+                            // 检查元素是否仍在DOM中
+                            // 检查是否滚动到底部
+                            if (wrapper.scrollTop + 10 >= wrapper.scrollHeight - 600) {
+                                // 重置到顶部
+                                wrapper.scrollTop = 0;
+                            } else {
+                                // 持续滚动
+                                wrapper.scrollTop += scrollSpeed;
+                            }
+                        } else {
+                            // 元素已不在DOM中，清理定时器
+                            clearInterval(this.tableScrollTimer);
+                            this.tableScrollTimer = null;
+                        }
+                    } catch (error) {
+                        // 捕获可能的错误，避免卡顿
+                        clearInterval(this.tableScrollTimer);
+                        this.tableScrollTimer = null;
+                    }
+                }, 50);
+            });
+        },
+
+        // 处理窗口大小变化
+        handleResize() {
+            // 获取窗口高度
+            const windowHeight = window.innerHeight;
+            // 计算可用高度，减去标题高度和padding等
+            const availableHeight = windowHeight - 60;
+            // 计算表格高度，确保表格固定高度且不会超出屏幕
+            this.tableHeight = Math.min(Math.max(availableHeight - 140, 260), 600) + "px";
+
+            // 调整图表大小
+            if (this.qualifiedRatePieChart) {
+                this.qualifiedRatePieChart.resize();
+            }
+            if (this.top5Chart) {
+                this.top5Chart.resize();
+            }
+        },
+    },
+};
 </script>
 
 <style scoped>
@@ -584,241 +595,288 @@ export default {
     padding: 10px;
     background: transparent;
     width: 100%;
-    min-height: 100vh; /* 确保至少填满整个视口高度 */
+    height: 96vh; /* 确保至少填满整个视口高度 */
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
-    gap: 10px; /* 进一步减小间隔，让第二行整体向上移动 */
-  }
+    gap: 10px;
+    overflow-x: auto; /* 允许容器水平滚动，确保内容不被截断 */
+}
 
 /* 第一行布局 */
 .first-row {
     width: 100%;
     flex-shrink: 0;
-    height: 140px;
+    height: 120px !important;
     margin-bottom: 10px; /* 减小底部间距 */
-  }
+}
 
 /* 第二行布局 */
 .second-row {
-    display: grid;
-    grid-template-columns: 3fr 1fr;
+    display: flex;
     gap: 15px;
     flex: 1;
     min-height: 0;
-  }
+}
+
+.table-section {
+    flex: 3; /* 保持与原grid-template-columns: 3fr 1fr类似的比例 */
+    min-width: 0; /* 允许flex项收缩 */
+}
+
+.charts-section {
+    flex: 1; /* 保持与原grid-template-columns: 3fr 1fr类似的比例 */
+    min-width: 0; /* 允许flex项收缩 */
+}
 
 /* 统计翻牌器样式 */
 .statistics-section {
-  background: rgba(0, 20, 40, 0.6);
-  border-radius: 8px;
-  border: 1px solid rgba(0, 255, 255, 0.3);
-  padding: 15px;
+    background: rgba(0, 20, 40, 0.6);
+    border-radius: 8px;
+    border: 1px solid rgba(0, 255, 255, 0.3);
+    padding: 15px;
 }
 
 .flip-card-container {
-  display: grid;
-  grid-template-columns: repeat(7, 1fr);
-  gap: 15px;
-  align-items: center;
+    display: flex;
+    gap: 15px;
+    align-items: center;
+    flex-wrap: wrap;
 }
 
 .flip-card {
-  background: rgba(0, 60, 120, 0.8);
-  border-radius: 6px;
-  padding: 15px 10px;
-  text-align: center;
-  border: 1px solid rgba(0, 255, 255, 0.2);
-  transition: all 0.3s ease;
+    flex: 1;
+    min-width: calc(100% / 7 - 15px * 6 / 7); /* 大致保持7列布局 */
+    min-height: 0; /* 允许flex项收缩 */
+}
+
+.flip-card {
+    background: rgba(0, 60, 120, 0.8);
+    border-radius: 6px;
+    padding: 15px 10px;
+    text-align: center;
+    border: 1px solid rgba(0, 255, 255, 0.2);
+    transition: all 0.3s ease;
 }
 
 .flip-card:hover {
-  box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
-  transform: translateY(-2px);
+    box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
+    transform: translateY(-2px);
 }
 
 .flip-card-label {
-  color: #ffffff;
-  font-size: 12px;
-  margin-bottom: 8px;
+    color: #ffffff;
+    font-size: 12px;
+    margin-bottom: 8px;
 }
 
 .flip-card-value {
-  color: #00ffff;
-  font-size: 24px;
-  font-weight: bold;
-  font-family: 'Courier New', monospace;
-  letter-spacing: 2px;
+    color: #00ffff;
+    font-size: 24px;
+    font-weight: bold;
+    font-family: "Courier New", monospace;
+    letter-spacing: 2px;
 }
 
 .flip-card-value.completed {
-  color: #67c23a;
+    color: #67c23a;
 }
 
 .flip-card-value.scrap {
-  color: #f56c6c;
+    color: #f56c6c;
 }
 
 /* 通用区域样式 */
 .table-section,
 .charts-section,
 .chart-container {
-  background: rgba(0, 20, 40, 0.6);
-  border-radius: 8px;
-  border: 1px solid rgba(0, 255, 255, 0.3);
-  padding: 15px;
-  display: flex;
-  flex-direction: column;
+    background: rgba(0, 20, 40, 0.6);
+    border-radius: 8px;
+    border: 1px solid rgba(0, 255, 255, 0.3);
+    padding: 15px;
+    display: flex;
+    flex-direction: column;
 }
 
 .charts-section {
-  gap: 15px;
+    gap: 15px;
 }
 
 .chart-container {
-  flex: 1;
-  min-height: 0;
+    flex: 1;
+    min-height: 0;
 }
 
 .section-title {
-  color: #00ffff;
-  font-size: 16px;
-  font-weight: bold;
-  margin-bottom: 15px;
-  text-align: center;
-  padding-bottom: 8px;
-  border-bottom: 1px solid rgba(0, 255, 255, 0.3);
+    color: #00ffff;
+    font-size: 16px;
+    font-weight: bold;
+    margin-bottom: 15px;
+    text-align: center;
+    padding-bottom: 8px;
+    border-bottom: 1px solid rgba(0, 255, 255, 0.3);
 }
 
 /* 自定义表格样式 */
 .custom-table-wrapper {
-  /* 确保表格固定高度，不依赖flex:1，避免内容超出屏幕 */
-  overflow-y: auto;
-  border-radius: 6px;
-  background: rgba(0, 60, 120, 0.8);
-  /* 确保高度已通过JS设置，这里不再设置 */
+    /* 确保表格固定高度，不依赖flex:1，避免内容超出屏幕 */
+    overflow-y: auto;
+    overflow-x: auto; /* 允许水平滚动以适应小屏幕 */
+    border-radius: 6px;
+    background: rgba(0, 60, 120, 0.8);
+    /* 确保高度已通过JS设置，这里不再设置 */
+    min-width: min-content; /* 确保内容不会被压缩得太小 */
 }
 
 .custom-table {
-  width: 100%;
-  border-collapse: collapse;
-  color: #ffffff;
+    height: 260px;
+    width: 100%;
+    border-collapse: collapse;
+    color: #ffffff;
 }
 
 .custom-table thead {
-  position: sticky;
-  top: 0;
-  z-index: 10;
+    position: sticky;
+    top: 0;
+    z-index: 10;
 }
 
 .custom-table th {
-  background: rgba(0, 60, 120, 1);
-  color: #00ffff;
-  font-weight: bold;
-  text-align: center;
-  padding: 12px 5px;
-  border-bottom: 1px solid rgba(0, 255, 255, 0.3);
-  font-size: 13px;
+    background: rgba(0, 60, 120, 1);
+    color: #00ffff;
+    font-weight: bold;
+    text-align: center;
+    padding: 12px 5px;
+    border-bottom: 1px solid rgba(0, 255, 255, 0.3);
+    font-size: 13px;
 }
 
 .custom-table td {
-  text-align: center;
-  padding: 10px 5px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-  font-size: 13px;
+    text-align: center;
+    padding: 10px 5px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    font-size: 13px;
 }
 
 .table-row:hover td {
-  background-color: rgba(0, 255, 255, 0.1);
+    background-color: rgba(0, 255, 255, 0.1);
 }
 
 /* 加载样式 */
 .loading-overlay {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  color: #00ffff;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    color: #00ffff;
 }
 
 .loading-spinner {
-  width: 40px;
-  height: 40px;
-  border: 3px solid rgba(0, 255, 255, 0.3);
-  border-radius: 50%;
-  border-top-color: #00ffff;
-  animation: spin 1s ease-in-out infinite;
-  margin-bottom: 10px;
+    width: 40px;
+    height: 40px;
+    border: 3px solid rgba(0, 255, 255, 0.3);
+    border-radius: 50%;
+    border-top-color: #00ffff;
+    animation: spin 1s ease-in-out infinite;
+    margin-bottom: 10px;
 }
 
 @keyframes spin {
-  to { transform: rotate(360deg); }
+    to {
+        transform: rotate(360deg);
+    }
 }
 
 .loading-text {
-  font-size: 14px;
+    font-size: 14px;
 }
 
 /* 超出省略 */
 .ellipsis {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 150px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 150px;
 }
 
 /* 滚动条样式 */
 .custom-table-wrapper::-webkit-scrollbar {
-  width: 8px;
+    width: 8px;
 }
 
 .custom-table-wrapper::-webkit-scrollbar-track {
-  background: rgba(0, 60, 120, 0.5);
-  border-radius: 4px;
+    background: rgba(0, 60, 120, 0.5);
+    border-radius: 4px;
 }
 
 .custom-table-wrapper::-webkit-scrollbar-thumb {
-  background: rgba(0, 255, 255, 0.5);
-  border-radius: 4px;
+    background: rgba(0, 255, 255, 0.5);
+    border-radius: 4px;
 }
 
 .custom-table-wrapper::-webkit-scrollbar-thumb:hover {
-  background: rgba(0, 255, 255, 0.8);
+    background: rgba(0, 255, 255, 0.8);
 }
 
 /* 响应式调整 */
+@media (max-width: 1400px) {
+    .flip-card {
+        min-width: calc(100% / 5 - 15px * 4 / 5); /* 调整为5列布局 */
+    }
+}
+
 @media (max-width: 1200px) {
-  .flip-card-container {
-    grid-template-columns: repeat(4, 1fr);
-  }
-  
-  .second-row {
-    grid-template-columns: 1fr;
-  }
-  
-  .charts-section {
-    flex-direction: row;
-  }
+    .flip-card {
+        min-width: calc(100% / 4 - 15px * 3 / 4); /* 调整为4列布局 */
+    }
+
+    .second-row {
+        flex-direction: column;
+    }
+
+    .table-section,
+    .charts-section {
+        flex: 1;
+        width: 100%;
+    }
+
+    .charts-section {
+        gap: 10px;
+    }
+}
+
+@media (max-width: 1024px) {
+    .flip-card {
+        min-width: calc(100% / 3 - 15px * 2 / 3); /* 调整为3列布局 */
+    }
+
+    .second-row {
+        flex-direction: column;
+    }
+
+    .charts-section {
+        flex-direction: row;
+    }
 }
 
 @media (max-width: 768px) {
-  .flip-card-container {
-    grid-template-columns: repeat(2, 1fr);
-  }
-  
-  .charts-section {
-    flex-direction: column;
-  }
-  
-  .custom-table {
-    font-size: 12px;
-  }
-  
-  .custom-table th,
-  .custom-table td {
-    padding: 8px 2px;
-    font-size: 11px;
-  }
+    .flip-card {
+        min-width: calc(100% / 2 - 15px * 1 / 2); /* 调整为2列布局 */
+    }
+
+    .charts-section {
+        flex-direction: column;
+    }
+
+    .custom-table {
+        font-size: 12px;
+    }
+
+    .custom-table th,
+    .custom-table td {
+        padding: 8px 2px;
+        font-size: 11px;
+    }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/kanbanManagement/CarouselBoard/components/WorkorderOnlineCard.vue b/src/views/kanbanManagement/CarouselBoard/components/WorkorderOnlineCard.vue
index d3dcb4f..b60be74 100644
--- a/src/views/kanbanManagement/CarouselBoard/components/WorkorderOnlineCard.vue
+++ b/src/views/kanbanManagement/CarouselBoard/components/WorkorderOnlineCard.vue
@@ -1,519 +1,544 @@
 <template>
-  <div class="workorder-online-card">
-    <kb-header>生产计划工单</kb-header>
-    
-    <!-- 第一行布局 -->
-    <div class="first-row">
-      <!-- 第一行第一个区域：今日生产未完成数及已完成数占比饼图 -->
-      <div class="chart-section">
-        <div class="section-title">今日生产状态</div>
-        <div id="workorderStatusChart" style="width: 100%; height: 100%;"></div>
-      </div>
-      
-      <!-- 第一行第二、三区域合并：今日统计数据翻牌器 -->
-      <div class="statistics-section">
-        <div class="section-title">今日统计</div>
-        <div class="flip-card-container">
-          <div class="flip-card">
-            <div class="flip-card-label">今日总计划数</div>
-            <div class="flip-card-value">{{ todayStatistics.totalPlan }}</div>
-          </div>
-          <div class="flip-card">
-            <div class="flip-card-label">已完成计划数</div>
-            <div class="flip-card-value completed">{{ todayStatistics.completedPlan }}</div>
-          </div>
-          <div class="flip-card">
-            <div class="flip-card-label">未完成计划数</div>
-            <div class="flip-card-value uncompleted">{{ todayStatistics.uncompletedPlan }}</div>
-          </div>
-          <div class="flip-card">
-            <div class="flip-card-label">今日总投入数</div>
-            <div class="flip-card-value">{{ todayStatistics.totalInput }}</div>
-          </div>
+    <div class="workorder-online-card">
+        <kb-header>生产计划工单</kb-header>
 
+        <!-- 第一行布局 -->
+        <div class="first-row">
+            <!-- 第一行第一个区域：今日生产未完成数及已完成数占比饼图 -->
+            <div class="chart-section">
+                <div class="section-title">今日生产状态</div>
+                <div
+                    id="workorderStatusChart"
+                    style="width: 100%; height: 100%"
+                ></div>
+            </div>
+
+            <!-- 第一行第二、三区域合并：今日统计数据翻牌器 -->
+            <div class="statistics-section">
+                <div class="section-title">今日统计</div>
+                <div class="flip-card-container">
+                    <div class="flip-card">
+                        <div class="flip-card-label">今日总计划数</div>
+                        <div class="flip-card-value">{{ todayStatistics.totalPlan }}</div>
+                    </div>
+                    <div class="flip-card">
+                        <div class="flip-card-label">已完成计划数</div>
+                        <div class="flip-card-value completed">{{ todayStatistics.completedPlan }}</div>
+                    </div>
+                    <div class="flip-card">
+                        <div class="flip-card-label">未完成计划数</div>
+                        <div class="flip-card-value uncompleted">{{ todayStatistics.uncompletedPlan }}</div>
+                    </div>
+                    <div class="flip-card">
+                        <div class="flip-card-label">今日总投入数</div>
+                        <div class="flip-card-value">{{ todayStatistics.totalInput }}</div>
+                    </div>
+                </div>
+            </div>
         </div>
-      </div>
-    </div>
-    
-    <!-- 第二行布局 -->
-    <div class="second-row">
-      <!-- 第一、二区域：工单表格 -->
-      <div class="table-section">
-        <div class="section-title">工单列表</div>
-        <div class="custom-table-wrapper" :style="{ height: tableHeight }">
-          <table class="custom-table" v-if="!loading">
-            <thead>
-              <tr>
-                <th width="60">序号</th>
-                <th width="130">工单号</th>
-                <th width="120">毛坯号</th>
-                <th width="150">成品零件号</th>
-                <th>产品描述</th>
-                <th width="100">颜色</th>
-                <th width="100">规格</th>
-                <th width="80">车数</th>
-                <th width="80">上件数</th>
-                <th width="100">状态</th>
-              </tr>
-            </thead>
-            <tbody ref="tableBody">
-              <tr v-for="(row, index) in workorderOnlineTable" :key="index" class="table-row">
-                <td>{{ index + 1 }}</td>
-                <td>{{ row.clientWorkorder || '-' }}</td>
-                <td>{{ row.blankNumber || '-' }}</td>
-                <td>{{ row.finishedPartNumber || '-' }}</td>
-                <td class="ellipsis">{{ row.productDescription || '-' }}</td>
-                <td>{{ row.colour || '-' }}</td>
-                <td>{{ row.specifications || '-' }}</td>
-                <td>{{ row.vehicleNumber || '-' }}</td>
-                <td>{{ row.previousNumber || '-' }}</td>
-                <td>
-                  <span 
-                    class="status-tag" 
-                    :class="getStatusClass(row.status)"
-                  >
-                    {{ getStatusText(row.status) }}
-                  </span>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-          <div class="loading-overlay" v-if="loading">
-            <div class="loading-spinner"></div>
-            <div class="loading-text">加载中...</div>
-          </div>
+
+        <!-- 第二行布局 -->
+        <div class="second-row">
+            <!-- 第一、二区域：工单表格 -->
+            <div class="table-section">
+                <div class="section-title">工单列表</div>
+                <div class="custom-table-wrapper">
+                    <table
+                        class="custom-table"
+                        v-if="!loading"
+                    >
+                        <thead>
+                            <tr>
+                                <th width="60">序号</th>
+                                <th width="130">工单号</th>
+                                <th width="120">毛坯号</th>
+                                <th width="150">成品零件号</th>
+                                <th>产品描述</th>
+                                <th width="100">颜色</th>
+                                <th width="100">规格</th>
+                                <th width="80">车数</th>
+                                <th width="80">上件数</th>
+                                <th width="100">状态</th>
+                            </tr>
+                        </thead>
+                        <tbody ref="tableBody">
+                            <tr
+                                v-for="(row, index) in workorderOnlineTable"
+                                :key="index"
+                                class="table-row"
+                            >
+                                <td>{{ index + 1 }}</td>
+                                <td>{{ row.clientWorkorder || "-" }}</td>
+                                <td>{{ row.blankNumber || "-" }}</td>
+                                <td>{{ row.finishedPartNumber || "-" }}</td>
+                                <td class="ellipsis">{{ row.productDescription || "-" }}</td>
+                                <td>{{ row.colour || "-" }}</td>
+                                <td>{{ row.specifications || "-" }}</td>
+                                <td>{{ row.vehicleNumber || "-" }}</td>
+                                <td>{{ row.previousNumber || "-" }}</td>
+                                <td>
+                                    <span
+                                        class="status-tag"
+                                        :class="getStatusClass(row.status)"
+                                    >
+                                        {{ getStatusText(row.status) }}
+                                    </span>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                    <div
+                        class="loading-overlay"
+                        v-if="loading"
+                    >
+                        <div class="loading-spinner"></div>
+                        <div class="loading-text">加载中...</div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 第三区域：生产统计横向柱状图 -->
+            <div class="bar-chart-section">
+                <div class="section-title">生产零件Top5统计</div>
+                <div
+                    id="productionTypeChart"
+                    style="width: 100%; height: 100%"
+                ></div>
+            </div>
         </div>
-      </div>
-      
-      <!-- 第三区域：生产统计横向柱状图 -->
-      <div class="bar-chart-section">
-        <div class="section-title">生产零件Top5统计</div>
-        <div id="productionTypeChart" style="width: 100%; height: 100%;"></div>
-      </div>
     </div>
-  </div>
 </template>
 
 <script>
-import { getWorkOrderCarouselBoardData } from '@/api/kanbanManagement/carouselBoard.js'
-import * as echarts from 'echarts';
-import kbHeader from './kbHeader.vue';
-
+import { getWorkOrderCarouselBoardData } from "@/api/kanbanManagement/carouselBoard.js";
+import * as echarts from "echarts";
+import kbHeader from "./kbHeader.vue";
 
 export default {
-  name: 'WorkorderOnlineCard',
-  components: {
-    kbHeader
-  },
+    name: "WorkorderOnlineCard",
+    components: {
+        kbHeader,
+    },
 
-  data() {
-      return {
-        loading: false,
-        workorderOnlineTable: [],
-        tableHeight: '500px',
-        workorderChart: null,
-        productionChart: null,
-        tableScrollTimer: null,
-        refreshTimer: null,
-        scrollCheckTimer: null,
-        // 今日统计数据
-        todayStatistics: {
-          totalPlan: 0,      // 今日总计划数
-          completedPlan: 0,  // 已完成计划数
-          uncompletedPlan: 0, // 未完成计划数
-          totalInput: 0     // 今日总投入数
-        }
-      }
+    data() {
+        return {
+            loading: false,
+            workorderOnlineTable: [],
+            workorderChart: null,
+            productionChart: null,
+            tableScrollTimer: null,
+            refreshTimer: null,
+            scrollCheckTimer: null,
+            // 今日统计数据
+            todayStatistics: {
+                totalPlan: 0, // 今日总计划数
+                completedPlan: 0, // 已完成计划数
+                uncompletedPlan: 0, // 未完成计划数
+                totalInput: 0, // 今日总投入数
+            },
+        };
     },
-  mounted() {
-    console.log('工单组件mounted生命周期调用')
-    this.getWorkorderData()
-    window.addEventListener('resize', this.handleResize)
-    // 组件挂载后延迟启动滚动，确保数据已加载
-    setTimeout(() => {
-      this.$nextTick(() => {
-        console.log('延迟启动滚动')
-        this.startTableAutoScroll()
-      })
-    }, 1000)
-    
-    // 添加一个定时器，每10秒重新启动一次滚动，确保滚动持续工作
-    this.scrollCheckTimer = setInterval(() => {
-      console.log('工单组件定时检查滚动')
-      this.$nextTick(() => {
-        this.startTableAutoScroll()
-      })
-    }, 5000) // 缩短为5秒检查一次
-    
-    // 设置5分钟定时刷新
-    this.refreshTimer = setInterval(() => {
-      this.getWorkorderData()
-    }, 5 * 60 * 1000) // 5分钟 = 5 * 60 * 1000毫秒
-  },
-  
-  updated() {
-    // 数据更新后初始化图表和启动表格滚动
-    this.$nextTick(() => {
-      console.log('工单组件updated生命周期调用')
-      if (this.workorderOnlineTable.length > 0) {
-        this.initWorkorderChart()
-        this.initProductionTypeChart()
-      }
-      // 无论数据是否为空，都尝试启动滚动，确保表格有内容时能正常滚动
-      this.startTableAutoScroll()
-    })
-  },
-  beforeDestroy() {
-    window.removeEventListener('resize', this.handleResize)
-    // 清理图表实例
-    if (this.workorderChart) {
-      this.workorderChart.dispose()
-      this.workorderChart = null
-    }
-    if (this.productionChart) {
-      this.productionChart.dispose()
-      this.productionChart = null
-    }
-    // 清理表格滚动定时器（setInterval）
-    if (this.tableScrollTimer) {
-      clearInterval(this.tableScrollTimer)
-      this.tableScrollTimer = null
-    }
-    // 清理滚动检查定时器
-    if (this.scrollCheckTimer) {
-      clearInterval(this.scrollCheckTimer)
-      this.scrollCheckTimer = null
-    }
-    // 清理数据刷新定时器
-    if (this.refreshTimer) {
-      clearInterval(this.refreshTimer)
-      this.refreshTimer = null
-    }
-  },
-  methods: {
-    getWorkorderData() {
-      this.loading = true
-      // 设置默认查询参数
-      let query = {
-        pageNum: 1,
-        pageSize: 20,
-      }
-      
-      getWorkOrderCarouselBoardData(query)
-        .then((res) => {
-          if (res.code == 200) {
-            this.workorderOnlineTable = res.data || []
-            console.log('工单数据加载完成，共', this.workorderOnlineTable.length, '条记录')
-            
-            // 计算今日统计数据
-            this.calculateTodayStatistics()
-            
-            // 数据加载完成后立即启动滚动
+    mounted() {
+        console.log("工单组件mounted生命周期调用");
+        this.getWorkorderData();
+        window.addEventListener("resize", this.handleResize);
+        // 组件挂载后延迟启动滚动，确保数据已加载
+        setTimeout(() => {
             this.$nextTick(() => {
-              console.log('数据加载后启动滚动')
-              this.startTableAutoScroll()
-            })
-          }
-        })
-        .finally(() => {
-          this.loading = false
-        })
+                console.log("延迟启动滚动");
+                this.startTableAutoScroll();
+            });
+        }, 1000);
+
+        // 添加一个定时器，每10秒重新启动一次滚动，确保滚动持续工作
+        this.scrollCheckTimer = setInterval(() => {
+            console.log("工单组件定时检查滚动");
+            this.$nextTick(() => {
+                this.startTableAutoScroll();
+            });
+        }, 5000); // 缩短为5秒检查一次
+
+        // 设置5分钟定时刷新
+        this.refreshTimer = setInterval(() => {
+            this.getWorkorderData();
+        }, 5 * 60 * 1000); // 5分钟 = 5 * 60 * 1000毫秒
     },
-    
-    // 计算今日统计数据
-    calculateTodayStatistics() {
-      // 重置统计数据
-      this.todayStatistics = {
-        totalPlan: 0,
-        completedPlan: 0,
-        uncompletedPlan: 0,
-        totalInput: 0
-      }
-      
-      // 统计工单数据
-      this.workorderOnlineTable.forEach(item => {
-        // 确保使用实际的计划数字段
-        const planCount = Number(item.vehicleNumber) || 0
-        this.todayStatistics.totalPlan += planCount
-        
-        // 统计已完成和未完成计划
-        if (item.status === 2) { // 已完成
-          this.todayStatistics.completedPlan += planCount
-        } else {
-          this.todayStatistics.uncompletedPlan += planCount
+
+    updated() {
+        // 数据更新后初始化图表和启动表格滚动
+        this.$nextTick(() => {
+            console.log("工单组件updated生命周期调用");
+            if (this.workorderOnlineTable.length > 0) {
+                this.initWorkorderChart();
+                this.initProductionTypeChart();
+            }
+            // 无论数据是否为空，都尝试启动滚动，确保表格有内容时能正常滚动
+            this.startTableAutoScroll();
+        });
+    },
+    beforeDestroy() {
+        window.removeEventListener("resize", this.handleResize);
+        // 清理图表实例
+        if (this.workorderChart) {
+            this.workorderChart.dispose();
+            this.workorderChart = null;
         }
-        
-        // 确保使用实际的投入数字段
-        this.todayStatistics.totalInput += Number(item.previousNumber) || 0
-      })
-    },
-    
-    // 获取状态文本
-    getStatusText(status) {
-      switch (status) {
-        case 2: return '已完成'
-        case 1: return '进行中'
-        default: return '未开始'
-      }
-    },
-    
-    // 获取状态样式类
-    getStatusClass(status) {
-      switch (status) {
-        case 2: return 'status-completed'
-        case 1: return 'status-progress'
-        default: return 'status-not-started'
-      }
-    },
-    
-    // 初始化工单状态分布饼图
-    initWorkorderChart() {
-      const chartDom = document.getElementById('workorderStatusChart')
-      if (!chartDom) return
-      
-      if (this.workorderChart) {
-        this.workorderChart.dispose()
-      }
-      
-      this.workorderChart = echarts.init(chartDom)
-      
-      // 统计已完成和未完成数量
-      const completedCount = this.workorderOnlineTable.filter(item => item.status === 2).length
-      const uncompletedCount = this.workorderOnlineTable.filter(item => item.status !== 2).length
-      
-      const option = {
-        tooltip: {
-          trigger: 'item',
-          formatter: '{a} <br/>{b}: {c} ({d}%)'
-        },
-        legend: {
-          orient: 'vertical',
-          left: 10,
-          top: 'center',
-          textStyle: {
-            color: '#00ffff'
-          }
-        },
-        series: [
-          {
-            name: '今日生产',
-            type: 'pie',
-            radius: ['40%', '70%'],
-            center: ['60%', '50%'],
-            avoidLabelOverlap: false,
-            itemStyle: {
-              borderRadius: 10,
-              borderColor: 'rgba(0, 20, 40, 0.6)',
-              borderWidth: 2
-            },
-            label: {
-              show: true,
-              formatter: '{b}\n{d}%',
-              color: '#ffffff'
-            },
-            emphasis: {
-              label: {
-                show: true,
-                fontSize: '16',
-                fontWeight: 'bold',
-                color: '#00ffff'
-              }
-            },
-            data: [
-              { value: completedCount, name: '已完成', itemStyle: { color: '#67c23a' } },
-              { value: uncompletedCount, name: '未完成', itemStyle: { color: '#e6a23c' } }
-            ].filter(item => item.value > 0)
-          }
-        ]
-      }
-      
-      this.workorderChart.setOption(option)
-    },
-    
-    // 初始化生产统计横向柱状图
-    initProductionTypeChart() {
-      const chartDom = document.getElementById('productionTypeChart')
-      if (!chartDom) return
-      
-      if (this.productionChart) {
-        this.productionChart.dispose()
-      }
-      
-      this.productionChart = echarts.init(chartDom)
-      
-      // 按零件汇总并统计上件数
-      const partStats = {}
-      this.workorderOnlineTable.forEach(item => {
-        // 使用成品零件号作为唯一标识
-        const partKey = item.finishedPartNumber || item.productDescription || '未知'
-        const previousNumber = Number(item.previousNumber) || 0
-        
-        if (!partStats[partKey]) {
-          partStats[partKey] = {
-            name: partKey,
-            value: 0,
-            description: item.productDescription || partKey
-          }
+        if (this.productionChart) {
+            this.productionChart.dispose();
+            this.productionChart = null;
         }
-        partStats[partKey].value += previousNumber
-      })
-      
-      // 转换为数组并按上件数降序排序，确保数量最大的显示在顶部，只取前5个
-      const sortedData = Object.values(partStats)
-        .sort((a, b) => b.value - a.value)
-        .slice(0, 5)
-      
-      const option = {
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow'
-          }
-        },
-        grid: {
-          left: '10%', // 减小左侧边距，让图表整体向左移动
-          right: '10%',
-          top: '10%',
-          bottom: '10%',
-          containLabel: true
-        },
-        xAxis: {
-          type: 'value',
-          axisLabel: {
-            color: '#ffffff'
-          },
-          splitLine: {
-            lineStyle: {
-              color: 'rgba(255, 255, 255, 0.1)'
-            }
-          }
-        },
-        yAxis: {
-          type: 'category',
-          data: sortedData.map(item => {
-            // 使用描述或零件号，进行自动换行处理
-            const displayText = item.description || item.name
-            const maxLength = 8
-            let result = displayText
-            if (result.length > maxLength) {
-              result = ''
-              for (let i = 0; i < displayText.length; i += maxLength) {
-                result += displayText.substring(i, i + maxLength) + '\n'
-              }
-              result = result.trim()
-            }
-            return result
-          }),
-          axisLabel: {
-            color: '#00ffff',
-            fontSize: 10,
-            interval: 0
-          }
-        },
-        series: [
-          {
-            name: '数量',
-            type: 'bar',
-            data: sortedData.map(item => item.value),
-            itemStyle: {
-              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-                { offset: 0, color: '#0066ff' },
-                { offset: 1, color: '#00ffff' }
-              ])
-            },
-            label: {
-              show: true,
-              position: 'right',
-              color: '#ffffff'
-            }
-          }
-        ]
-      }
-      
-      this.productionChart.setOption(option)
-    },
-    
-    // 表格自动滚动功能 - 修复滚动逻辑
-    startTableAutoScroll() {
-      // 先清理可能存在的定时器
-      if (this.tableScrollTimer) {
-        cancelAnimationFrame(this.tableScrollTimer)
-        this.tableScrollTimer = null
-      }
-      
-      // 确保表格元素已渲染
-      this.$nextTick(() => {
-        // 直接获取DOM元素，避免选择器问题
-        const tableSection = this.$el.querySelector('.table-section')
-        const wrapper = tableSection ? tableSection.querySelector('.custom-table-wrapper') : null
-        console.log('工单组件滚动容器:', wrapper)
-        if (!wrapper) {
-          console.log('滚动容器未找到')
-          return
+        // 清理表格滚动定时器（setInterval）
+        if (this.tableScrollTimer) {
+            clearInterval(this.tableScrollTimer);
+            this.tableScrollTimer = null;
+        }
+        // 清理滚动检查定时器
+        if (this.scrollCheckTimer) {
+            clearInterval(this.scrollCheckTimer);
+            this.scrollCheckTimer = null;
+        }
+        // 清理数据刷新定时器
+        if (this.refreshTimer) {
+            clearInterval(this.refreshTimer);
+            this.refreshTimer = null;
         }
-        
-        // 重要：确保容器内容高度大于容器高度才需要滚动
-        const scrollableHeight = wrapper.scrollHeight - wrapper.clientHeight
-        console.log('容器可滚动高度差:', scrollableHeight)
-        
-        // 优化滚动容器样式设置
-        // 不设置height，因为模板中已经通过:style绑定
-        wrapper.style.overflow = 'auto'
-        wrapper.style.overflowX = 'hidden'
-        wrapper.style.scrollBehavior = 'smooth'
-        console.log('设置滚动容器样式完成')
-        
-        // 重置滚动位置
-        wrapper.scrollTop = 0
-        
-        // 增加滚动速度，使其更容易观察
-        const scrollSpeed = 2 // 提高到2，确保明显可见
-        
-        // 使用setInterval替代requestAnimationFrame，更稳定
-        this.tableScrollTimer = setInterval(() => {
-          if (wrapper && wrapper.scrollHeight > wrapper.clientHeight) {
-            // 检查是否滚动到底部
-            if (wrapper.scrollTop + 10 >= wrapper.scrollHeight - wrapper.clientHeight) {
-              console.log('工单组件已滚动到底部，准备复位')
-              // 重置到顶部
-              wrapper.scrollTop = 0
-            } else {
-              // 持续滚动
-              wrapper.scrollTop += scrollSpeed
-            }
-          }
-        }, 50) // 每50毫秒滚动一次，更平滑
-        
-        console.log('工单组件启动滚动定时器')
-      })
     },
-    
-    handleResize() {
-      // 考虑kbHeader的高度，重新计算内容高度
-      const windowHeight = window.innerHeight
-      // 减去标题高度和padding等，确保内容适配
-      const availableHeight = windowHeight - 60 // 标题高度
-      
-      // 调整第一行高度，进一步减小以给第二行留出更多空间
-      const firstRow = document.querySelector('.first-row')
-      if (firstRow) {
-        firstRow.style.height = '200px' // 进一步减小第一行高度
-      }
-      
-      // 计算表格高度，确保表格固定高度且不会超出屏幕
-      // 将表格高度固定为一个合理的值，确保在各种屏幕尺寸下都能正常显示
-      this.tableHeight = Math.min(Math.max(availableHeight - 350, 300), 400) + 'px' // 限制最大高度为400px
-      
-      // 调整图表大小
-      if (this.workorderChart) {
-        this.workorderChart.resize()
-      }
-      if (this.productionChart) {
-        this.productionChart.resize()
-      }
-    }
-  }
-}
+    methods: {
+        getWorkorderData() {
+            this.loading = true;
+            // 设置默认查询参数
+            let query = {
+                pageNum: 1,
+                pageSize: 20,
+            };
+
+            getWorkOrderCarouselBoardData(query)
+                .then((res) => {
+                    if (res.code == 200) {
+                        this.workorderOnlineTable = res.data || [];
+                        console.log("工单数据加载完成，共", this.workorderOnlineTable.length, "条记录");
+
+                        // 计算今日统计数据
+                        this.calculateTodayStatistics();
+
+                        // 数据加载完成后立即启动滚动
+                        this.$nextTick(() => {
+                            console.log("数据加载后启动滚动");
+                            this.startTableAutoScroll();
+                        });
+                    }
+                })
+                .finally(() => {
+                    this.loading = false;
+                });
+        },
+
+        // 计算今日统计数据
+        calculateTodayStatistics() {
+            // 重置统计数据
+            this.todayStatistics = {
+                totalPlan: 0,
+                completedPlan: 0,
+                uncompletedPlan: 0,
+                totalInput: 0,
+            };
+
+            // 统计工单数据
+            this.workorderOnlineTable.forEach((item) => {
+                // 确保使用实际的计划数字段
+                const planCount = Number(item.vehicleNumber) || 0;
+                this.todayStatistics.totalPlan += planCount;
+
+                // 统计已完成和未完成计划
+                if (item.status === 2) {
+                    // 已完成
+                    this.todayStatistics.completedPlan += planCount;
+                } else {
+                    this.todayStatistics.uncompletedPlan += planCount;
+                }
+
+                // 确保使用实际的投入数字段
+                this.todayStatistics.totalInput += Number(item.previousNumber) || 0;
+            });
+        },
+
+        // 获取状态文本
+        getStatusText(status) {
+            switch (status) {
+                case 2:
+                    return "已完成";
+                case 1:
+                    return "进行中";
+                default:
+                    return "未开始";
+            }
+        },
+
+        // 获取状态样式类
+        getStatusClass(status) {
+            switch (status) {
+                case 2:
+                    return "status-completed";
+                case 1:
+                    return "status-progress";
+                default:
+                    return "status-not-started";
+            }
+        },
+
+        // 初始化工单状态分布饼图
+        initWorkorderChart() {
+            const chartDom = document.getElementById("workorderStatusChart");
+            if (!chartDom) return;
+
+            if (this.workorderChart) {
+                this.workorderChart.dispose();
+            }
+
+            this.workorderChart = echarts.init(chartDom);
+
+            // 统计已完成和未完成数量
+            const completedCount = this.workorderOnlineTable.filter((item) => item.status === 2).length;
+            const uncompletedCount = this.workorderOnlineTable.filter((item) => item.status !== 2).length;
+
+            const option = {
+                tooltip: {
+                    trigger: "item",
+                    formatter: "{a} <br/>{b}: {c} ({d}%)",
+                },
+                legend: {
+                    orient: "vertical",
+                    left: 10,
+                    top: "center",
+                    textStyle: {
+                        color: "#00ffff",
+                    },
+                },
+                series: [
+                    {
+                        name: "今日生产",
+                        type: "pie",
+                        radius: ["40%", "70%"],
+                        center: ["60%", "50%"],
+                        avoidLabelOverlap: false,
+                        itemStyle: {
+                            borderRadius: 10,
+                            borderColor: "rgba(0, 20, 40, 0.6)",
+                            borderWidth: 2,
+                        },
+                        label: {
+                            show: true,
+                            formatter: "{b}\n{d}%",
+                            color: "#ffffff",
+                        },
+                        emphasis: {
+                            label: {
+                                show: true,
+                                fontSize: "16",
+                                fontWeight: "bold",
+                                color: "#00ffff",
+                            },
+                        },
+                        data: [
+                            { value: completedCount, name: "已完成", itemStyle: { color: "#67c23a" } },
+                            { value: uncompletedCount, name: "未完成", itemStyle: { color: "#e6a23c" } },
+                        ].filter((item) => item.value > 0),
+                    },
+                ],
+            };
+
+            this.workorderChart.setOption(option);
+        },
+
+        // 初始化生产统计横向柱状图
+        initProductionTypeChart() {
+            const chartDom = document.getElementById("productionTypeChart");
+            if (!chartDom) return;
+
+            if (this.productionChart) {
+                this.productionChart.dispose();
+            }
+
+            this.productionChart = echarts.init(chartDom);
+
+            // 按零件汇总并统计上件数
+            const partStats = {};
+            this.workorderOnlineTable.forEach((item) => {
+                // 使用成品零件号作为唯一标识
+                const partKey = item.finishedPartNumber || item.productDescription || "未知";
+                const previousNumber = Number(item.previousNumber) || 0;
+
+                if (!partStats[partKey]) {
+                    partStats[partKey] = {
+                        name: partKey,
+                        value: 0,
+                        description: item.productDescription || partKey,
+                    };
+                }
+                partStats[partKey].value += previousNumber;
+            });
+
+            // 转换为数组并按上件数降序排序，确保数量最大的显示在顶部，只取前5个
+            const sortedData = Object.values(partStats)
+                .sort((a, b) => b.value - a.value)
+                .slice(0, 5);
+
+            const option = {
+                tooltip: {
+                    trigger: "axis",
+                    axisPointer: {
+                        type: "shadow",
+                    },
+                },
+                grid: {
+                    left: "10%", // 减小左侧边距，让图表整体向左移动
+                    right: "10%",
+                    top: "10%",
+                    bottom: "10%",
+                    containLabel: true,
+                },
+                xAxis: {
+                    type: "value",
+                    axisLabel: {
+                        color: "#ffffff",
+                    },
+                    splitLine: {
+                        lineStyle: {
+                            color: "rgba(255, 255, 255, 0.1)",
+                        },
+                    },
+                },
+                yAxis: {
+                    type: "category",
+                    data: sortedData.map((item) => {
+                        // 使用描述或零件号，进行自动换行处理
+                        const displayText = item.description || item.name;
+                        const maxLength = 8;
+                        let result = displayText;
+                        if (result.length > maxLength) {
+                            result = "";
+                            for (let i = 0; i < displayText.length; i += maxLength) {
+                                result += displayText.substring(i, i + maxLength) + "\n";
+                            }
+                            result = result.trim();
+                        }
+                        return result;
+                    }),
+                    axisLabel: {
+                        color: "#00ffff",
+                        fontSize: 10,
+                        interval: 0,
+                    },
+                },
+                series: [
+                    {
+                        name: "数量",
+                        type: "bar",
+                        data: sortedData.map((item) => item.value),
+                        itemStyle: {
+                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                                { offset: 0, color: "#0066ff" },
+                                { offset: 1, color: "#00ffff" },
+                            ]),
+                        },
+                        label: {
+                            show: true,
+                            position: "right",
+                            color: "#ffffff",
+                        },
+                    },
+                ],
+            };
+
+            this.productionChart.setOption(option);
+        },
+
+        // 表格自动滚动功能 - 修复滚动逻辑
+        startTableAutoScroll() {
+            // 先清理之前的定时器，防止累积
+            if (this.tableScrollTimer) {
+                clearInterval(this.tableScrollTimer);
+                this.tableScrollTimer = null;
+            }
+
+            // 确保表格元素已渲染
+            this.$nextTick(() => {
+                // 直接获取DOM元素，避免选择器问题
+                const tableSection = this.$el.querySelector(".table-section");
+                const wrapper = tableSection ? tableSection.querySelector(".custom-table-wrapper") : null;
+
+                if (!wrapper) {
+                    return;
+                }
+
+                // 重要：确保容器内容高度大于容器高度才需要滚动
+                const scrollableHeight = wrapper.scrollHeight - wrapper.clientHeight;
+                if (scrollableHeight <= 0) {
+                    return; // 内容不足，不需要滚动
+                }
+
+                // 优化滚动容器样式设置
+                wrapper.style.overflow = "auto";
+                wrapper.style.overflowX = "auto"; // 改为auto，允许水平滚动以防止内容被截断
+                wrapper.style.scrollBehavior = "smooth";
+
+                // 重置滚动位置
+                wrapper.scrollTop = 0;
+
+                // 滚动速度
+                const scrollSpeed = 2;
+
+                // 使用setInterval实现滚动
+                this.tableScrollTimer = setInterval(() => {
+                    try {
+                        if (wrapper && wrapper.isConnected) {
+                            // 检查元素是否仍在DOM中
+                            // 检查是否滚动到底部
+                            console.log(wrapper.scrollTop, wrapper.scrollHeight, wrapper.clientHeight);
+                            if (wrapper.scrollTop + 10 >= wrapper.scrollHeight - 600) {
+                                // 重置到顶部
+                                wrapper.scrollTop = 0;
+                            } else {
+                                // 持续滚动
+                                wrapper.scrollTop += scrollSpeed;
+                            }
+                        } else {
+                            // 元素已不在DOM中，清理定时器
+                            clearInterval(this.tableScrollTimer);
+                            this.tableScrollTimer = null;
+                        }
+                    } catch (error) {
+                        // 捕获可能的错误，避免卡顿
+                        clearInterval(this.tableScrollTimer);
+                        this.tableScrollTimer = null;
+                    }
+                }, 50);
+            });
+        },
+
+        handleResize() {
+            // 获取窗口高度
+            const windowHeight = window.innerHeight;
+            // 计算可用高度，减去标题高度和padding等
+            const availableHeight = windowHeight - 60;
+            // 调整第一行高度
+            const firstRow = document.querySelector(".first-row");
+            if (firstRow) {
+                firstRow.style.height = "250px";
+            }
+            // 计算表格高度，确保表格固定高度且不会超出屏幕
+            this.tableHeight = Math.min(Math.max(availableHeight - 200, 260), 600) + "px";
+
+            // 调整图表大小
+            if (this.workorderChart) {
+                this.workorderChart.resize();
+            }
+            if (this.productionChart) {
+                this.productionChart.resize();
+            }
+        },
+    },
+};
 </script>
 
 <style scoped>
@@ -521,241 +546,313 @@ export default {
     padding: 10px;
     background: transparent;
     width: 100%;
-    min-height: 100vh; /* 确保至少填满整个视口高度 */
+    height: 96vh; /* 确保至少填满整个视口高度 */
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
-    gap: 15px; /* 减小间距 */
-  }
+    gap: 15px;
+    overflow-x: auto; /* 允许容器水平滚动，确保内容不被截断 */
+}
 
 /* kbHeader组件已包含标题样式 */
 
 /* 第一行布局 */
 .first-row {
-    display: grid;
-    grid-template-columns: 1fr 2fr;
+    display: flex;
     gap: 15px;
     height: 200px;
-  }
+}
+
+.chart-section {
+    flex: 1;
+    min-width: 0;
+}
+
+.statistics-section {
+    flex: 2;
+    min-width: 0;
+}
 
 /* 第二行布局 */
 .second-row {
-    display: grid;
-    grid-template-columns: 2fr 1fr;
+    display: flex;
     gap: 15px;
     flex: 1;
     min-height: 0;
-  }
+}
+
+.table-section {
+    flex: 2;
+    min-width: 0;
+}
+
+.bar-chart-section {
+    flex: 1;
+    min-width: 0;
+}
 
 /* 通用区域样式 */
 .chart-section,
 .statistics-section,
 .table-section,
 .bar-chart-section {
-  background: rgba(0, 20, 40, 0.6);
-  border-radius: 8px;
-  border: 1px solid rgba(0, 255, 255, 0.3);
-  padding: 15px;
-  display: flex;
-  flex-direction: column;
+    background: rgba(0, 20, 40, 0.6);
+    border-radius: 8px;
+    border: 1px solid rgba(0, 255, 255, 0.3);
+    padding: 15px;
+    display: flex;
+    flex-direction: column;
 }
 
 .section-title {
-  color: #00ffff;
-  font-size: 16px;
-  font-weight: bold;
-  margin-bottom: 15px;
-  text-align: center;
-  padding-bottom: 8px;
-  border-bottom: 1px solid rgba(0, 255, 255, 0.3);
+    color: #00ffff;
+    font-size: 16px;
+    font-weight: bold;
+    margin-bottom: 15px;
+    text-align: center;
+    padding-bottom: 8px;
+    border-bottom: 1px solid rgba(0, 255, 255, 0.3);
 }
 
 /* 统计翻牌器样式 */
 .flip-card-container {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
+    display: flex;
     gap: 15px;
     flex: 1;
     align-items: center;
-  }
+    flex-wrap: wrap;
+}
 
 .flip-card {
-  background: rgba(0, 60, 120, 0.8);
-  border-radius: 6px;
-  padding: 15px 10px;
-  text-align: center;
-  border: 1px solid rgba(0, 255, 255, 0.2);
-  transition: all 0.3s ease;
+    flex: 1;
+    min-width: calc(100% / 4 - 15px * 3 / 4); /* 保持4列布局 */
+    min-height: 0;
+}
+
+.flip-card {
+    background: rgba(0, 60, 120, 0.8);
+    border-radius: 6px;
+    padding: 15px 10px;
+    text-align: center;
+    border: 1px solid rgba(0, 255, 255, 0.2);
+    transition: all 0.3s ease;
 }
 
 .flip-card:hover {
-  box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
-  transform: translateY(-2px);
+    box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
+    transform: translateY(-2px);
 }
 
 .flip-card-label {
-  color: #ffffff;
-  font-size: 12px;
-  margin-bottom: 8px;
+    color: #ffffff;
+    font-size: 12px;
+    margin-bottom: 8px;
 }
 
 .flip-card-value {
-  color: #00ffff;
-  font-size: 24px;
-  font-weight: bold;
-  font-family: 'Courier New', monospace;
-  letter-spacing: 2px;
+    color: #00ffff;
+    font-size: 24px;
+    font-weight: bold;
+    font-family: "Courier New", monospace;
+    letter-spacing: 2px;
 }
 
 .flip-card-value.completed {
-  color: #67c23a;
+    color: #67c23a;
 }
 
 .flip-card-value.uncompleted {
-  color: #e6a23c;
+    color: #e6a23c;
 }
 
-
-
 /* 自定义表格样式 */
 .custom-table-wrapper {
-  /* 确保表格固定高度，不依赖flex:1，避免内容超出屏幕 */
-  overflow-y: auto;
-  border-radius: 6px;
-  background: rgba(0, 60, 120, 0.8);
-  /* 确保高度已通过JS设置，这里不再设置 */
+    /* 确保表格固定高度，不依赖flex:1，避免内容超出屏幕 */
+    overflow-y: auto;
+    overflow-x: auto; /* 允许水平滚动以适应小屏幕 */
+    border-radius: 6px;
+    background: rgba(0, 60, 120, 0.8);
+    /* 确保高度已通过JS设置，这里不再设置 */
+    min-width: min-content; /* 确保内容不会被压缩得太小 */
 }
 
 .custom-table {
-  width: 100%;
-  border-collapse: collapse;
-  color: #ffffff;
+    height: 260px;
+    width: 100%;
+    border-collapse: collapse;
+    color: #ffffff;
 }
 
 .custom-table thead {
-  position: sticky;
-  top: 0;
-  z-index: 10;
+    position: sticky;
+    top: 0;
+    z-index: 10;
 }
 
 .custom-table th {
-  background: rgba(0, 60, 120, 1);
-  color: #00ffff;
-  font-weight: bold;
-  text-align: center;
-  padding: 12px 5px;
-  border-bottom: 1px solid rgba(0, 255, 255, 0.3);
-  font-size: 13px;
+    background: rgba(0, 60, 120, 1);
+    color: #00ffff;
+    font-weight: bold;
+    text-align: center;
+    padding: 12px 5px;
+    border-bottom: 1px solid rgba(0, 255, 255, 0.3);
+    font-size: 13px;
 }
 
 .custom-table td {
-  text-align: center;
-  padding: 10px 5px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-  font-size: 13px;
+    text-align: center;
+    padding: 10px 5px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    font-size: 13px;
 }
 
 .table-row:hover td {
-  background-color: rgba(0, 255, 255, 0.1);
+    background-color: rgba(0, 255, 255, 0.1);
 }
 
 /* 状态标签样式 */
 .status-tag {
-  display: inline-block;
-  padding: 4px 8px;
-  border-radius: 4px;
-  font-size: 12px;
-  border: 1px solid transparent;
+    display: inline-block;
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+    border: 1px solid transparent;
 }
 
 .status-completed {
-  background-color: rgba(103, 194, 58, 0.3);
-  border-color: #67c23a;
-  color: #67c23a;
+    background-color: rgba(103, 194, 58, 0.3);
+    border-color: #67c23a;
+    color: #67c23a;
 }
 
 .status-progress {
-  background-color: rgba(230, 162, 60, 0.3);
-  border-color: #e6a23c;
-  color: #e6a23c;
+    background-color: rgba(230, 162, 60, 0.3);
+    border-color: #e6a23c;
+    color: #e6a23c;
 }
 
 .status-not-started {
-  background-color: rgba(90, 143, 242, 0.3);
-  border-color: #5a8ff2;
-  color: #5a8ff2;
+    background-color: rgba(90, 143, 242, 0.3);
+    border-color: #5a8ff2;
+    color: #5a8ff2;
 }
 
 /* 加载样式 */
 .loading-overlay {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  color: #00ffff;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    color: #00ffff;
 }
 
 .loading-spinner {
-  width: 40px;
-  height: 40px;
-  border: 3px solid rgba(0, 255, 255, 0.3);
-  border-radius: 50%;
-  border-top-color: #00ffff;
-  animation: spin 1s ease-in-out infinite;
-  margin-bottom: 10px;
+    width: 40px;
+    height: 40px;
+    border: 3px solid rgba(0, 255, 255, 0.3);
+    border-radius: 50%;
+    border-top-color: #00ffff;
+    animation: spin 1s ease-in-out infinite;
+    margin-bottom: 10px;
 }
 
 @keyframes spin {
-  to { transform: rotate(360deg); }
+    to {
+        transform: rotate(360deg);
+    }
 }
 
 .loading-text {
-  font-size: 14px;
+    font-size: 14px;
 }
 
 /* 超出省略 */
 .ellipsis {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 150px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 150px;
 }
 
 /* 滚动条样式 */
 .custom-table-wrapper::-webkit-scrollbar {
-  width: 8px;
+    width: 8px;
 }
 
 .custom-table-wrapper::-webkit-scrollbar-track {
-  background: rgba(0, 60, 120, 0.5);
-  border-radius: 4px;
+    background: rgba(0, 60, 120, 0.5);
+    border-radius: 4px;
 }
 
 .custom-table-wrapper::-webkit-scrollbar-thumb {
-  background: rgba(0, 255, 255, 0.5);
-  border-radius: 4px;
+    background: rgba(0, 255, 255, 0.5);
+    border-radius: 4px;
 }
 
 .custom-table-wrapper::-webkit-scrollbar-thumb:hover {
-  background: rgba(0, 255, 255, 0.8);
+    background: rgba(0, 255, 255, 0.8);
 }
 
 /* 响应式调整 */
-@media (max-width: 1200px) {
-  .first-row {
-    grid-template-columns: 1fr;
-    height: auto;
-    gap: 15px;
-  }
-  
-  .second-row {
-    grid-template-columns: 1fr;
-    gap: 15px;
-  }
-  
-  .flip-card-container {
-    grid-template-columns: repeat(2, 1fr);
-  }
+@media (max-width: 1400px) {
+    .first-row {
+        flex-direction: row;
+    }
+
+    .chart-section {
+        flex: 1;
+    }
+
+    .statistics-section {
+        flex: 2;
+    }
+
+    .second-row {
+        flex-direction: row;
+    }
+
+    .table-section {
+        flex: 2;
+    }
+
+    .bar-chart-section {
+        flex: 1;
+    }
 }
-</style>
\ No newline at end of file
+
+@media (max-width: 1200px) {
+    .first-row {
+        flex-direction: column;
+        height: auto;
+        gap: 15px;
+    }
+
+    .chart-section,
+    .statistics-section {
+        flex: 1;
+        width: 100%;
+    }
+
+    .second-row {
+        flex-direction: column;
+        gap: 15px;
+    }
+
+    .table-section,
+    .bar-chart-section {
+        flex: 1;
+        width: 100%;
+    }
+
+    .flip-card {
+        min-width: calc(100% / 2 - 15px * 1 / 2); /* 调整为2列布局 */
+    }
+}
+
+@media (max-width: 768px) {
+    .flip-card {
+        min-width: 100%; /* 调整为1列布局 */
+    }
+}
+</style>
diff --git a/src/views/kanbanManagement/CarouselBoard/index.vue b/src/views/kanbanManagement/CarouselBoard/index.vue
index edb5d3a..c5fa80e 100644
--- a/src/views/kanbanManagement/CarouselBoard/index.vue
+++ b/src/views/kanbanManagement/CarouselBoard/index.vue
@@ -1,90 +1,98 @@
 <template>
-  <dv-full-screen-container>
-    <div class="carousel-board-container">
-      <dv-border-box-1 class="dashboard-border">
-        <el-carousel ref="carousel" :interval="60000" height="100vh" arrow="never" indicator-position="bottom" autoplay
-          class="dashboard-carousel">
-          <el-carousel-item>
-            <QualityStatisticsCard />
-          </el-carousel-item>
-          <el-carousel-item>
-            <WorkorderOnlineCard />
-          </el-carousel-item>
-        </el-carousel>
-      </dv-border-box-1>
-    </div>
-  </dv-full-screen-container>
+    <dv-full-screen-container>
+        <div class="carousel-board-container">
+            <dv-border-box-1 class="dashboard-border">
+                <el-carousel
+                    ref="carousel"
+                    :interval="10000"
+                    height="100vh"
+                    arrow="never"
+                    indicator-position="bottom"
+                    autoplay
+                    class="dashboard-carousel"
+                >
+                    <el-carousel-item>
+                        <QualityStatisticsCard />
+                    </el-carousel-item>
+                    <el-carousel-item>
+                        <WorkorderOnlineCard />
+                    </el-carousel-item>
+                </el-carousel>
+            </dv-border-box-1>
+        </div>
+    </dv-full-screen-container>
 </template>
 
 <script>
-import QualityStatisticsCard from './components/QualityStatisticsCard.vue'
-import WorkorderOnlineCard from './components/WorkorderOnlineCard.vue'
+import QualityStatisticsCard from "./components/QualityStatisticsCard.vue";
+import WorkorderOnlineCard from "./components/WorkorderOnlineCard.vue";
 export default {
-  name: 'CarouselBoard',
-  components: {
-    QualityStatisticsCard,
-    WorkorderOnlineCard,
-  },
-  mounted() {
-    // 可以在这里添加一些初始化逻辑
-    console.log('Carousel board initialized')
-  },
-  methods: {
-    // 可以添加一些控制轮播的方法
-    nextSlide() {
-      this.$refs.carousel.next()
+    name: "CarouselBoard",
+    components: {
+        QualityStatisticsCard,
+        WorkorderOnlineCard,
     },
-    prevSlide() {
-      this.$refs.carousel.prev()
+    mounted() {
+        // 可以在这里添加一些初始化逻辑
+        console.log("Carousel board initialized");
     },
-    pause() {
-      this.$refs.carousel.pause()
+    methods: {
+        // 可以添加一些控制轮播的方法
+        nextSlide() {
+            this.$refs.carousel.next();
+        },
+        prevSlide() {
+            this.$refs.carousel.prev();
+        },
+        pause() {
+            this.$refs.carousel.pause();
+        },
+        play() {
+            this.$refs.carousel.play();
+        },
     },
-    play() {
-      this.$refs.carousel.play()
-    },
-  },
-}
+};
 </script>
 
 <style scoped>
 .carousel-board-container {
-  width: 100%;
-  height: 100%;
-  padding: 0px;
-  background: linear-gradient(135deg, #001529 0%, #002140 100%);
-  overflow: auto;
-  box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    background: linear-gradient(135deg, #001529 0%, #002140 100%);
+    overflow: auto;
+    box-sizing: border-box;
 }
 
 .dashboard-border {
-  height: 100%;
+    height: 100%;
 }
 
 .dashboard-carousel {
-  background: rgba(0, 20, 40, 0.8);
-  border-radius: 4px;
-  overflow: hidden;
+    background: rgba(0, 20, 40, 0.8);
+    border-radius: 4px;
+    overflow: hidden;
 }
 
 /* 优化轮播项样式 */
 .el-carousel__item {
-  padding: 0;
-  box-sizing: border-box;
-  min-height: 100vh;
+    padding: 0;
+    box-sizing: border-box;
+    min-height: 100vh;
 }
 
 /* 确保指示器清晰可见 */
 .el-carousel__indicator {
-  width: 12px;
-  height: 12px;
-  margin: 0 8px;
-  transition: all 0.3s ease;
-  background-color: rgba(255, 255, 255, 0.3);
+    width: 12px;
+    height: 12px;
+    margin: 0 8px;
+    transition: all 0.3s ease;
+    background-color: rgba(255, 255, 255, 0.3);
 }
 
 .el-carousel__indicator--active {
-  width: 24px;
-  background-color: #00ffff;
+    width: 24px;
+    background-color: #00ffff;
 }
 </style>