diff --git a/src/views/kanbanManagement/CarouselBoard/components/QualityStatisticsCard.vue b/src/views/kanbanManagement/CarouselBoard/components/QualityStatisticsCard.vue
index 8357288..da34b37 100644
--- a/src/views/kanbanManagement/CarouselBoard/components/QualityStatisticsCard.vue
+++ b/src/views/kanbanManagement/CarouselBoard/components/QualityStatisticsCard.vue
@@ -1,79 +1,126 @@
 <template>
   <div class="quality-statistics-card">
-    <dv-title text="质量统计报表" :color="['#00ffff', '#0066ff']" style="margin-bottom: 15px;" />
-    <div class="middle-data">
-      <span>报表数量 共 {{ realTotal }} 条</span>
-      <span style="margin-left: 20px">投入数:{{ totalQuantity }}</span>
-      <span style="margin-left: 20px">合格数:{{ totalQualifiedNumber }}</span>
-      <span style="margin-left: 20px">合格率:{{ passRate }}</span>
-      <span style="margin-left: 20px">抛光数:{{ totalPaoguangTotal }}</span>
-      <span style="margin-left: 20px">打磨数:{{ totalDamoTotal }}</span>
-      <span style="margin-left: 20px">报废数:{{ totalBaofeiTotal }}</span>
-      <span style="margin-left: 20px">倒车雷达:{{ parkingSensor }}</span>
+    <!-- 标题部分：使用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="charts-wrapper">
-      <!-- 质量状态分布饼图 -->
-      <div class="chart-container pie-chart">
-        <div id="qualityStatusChart" style="width: 100%; height: 180px;"></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="chart-container bar-chart top-chart">
-        <div id="topQualifiedRateChart" style="width: 100%; height: 180px;"></div>
-      </div>
-      <div class="chart-container bar-chart bottom-chart">
-        <div id="bottomQualifiedRateChart" style="width: 100%; height: 180px;"></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>
-    
-    <el-table 
-        border
-        :loading="loading"
-        :data="QualityStatisticsTable" 
-        size="mini" 
-        :height="tableHeight"
-        style="width: 100%"
-        ref="qualityTable"
-        stripe
-        highlight-current-row
-        class="dark-table"
-      >
-        <el-table-column prop="workorderId" label="工单号" width="140" sortable></el-table-column>
-        <el-table-column prop="finishedPartNumber" label="零件号" min-width="120" sortable></el-table-column>
-        <el-table-column prop="color" label="颜色" min-width="100" sortable></el-table-column>
-        <el-table-column prop="productDescription" label="描述" min-width="100"></el-table-column>
-        <el-table-column prop="team" label="班次" sortable></el-table-column>
-        <el-table-column prop="requireNumber" label="生  产  投  入  数" min-width="60"></el-table-column>
-        
-        <el-table-column prop="qualifiedNumber" label="合  格  数" min-width="60"></el-table-column>
-        <el-table-column label="合格率" min-width="70">
-          <template slot-scope="{ row }"> {{ offsetRate(row.qualifiedRate) }}% </template>
-        </el-table-column>
-        <el-table-column prop="paoguangTotal" label="抛光总数" min-width="60"></el-table-column>
-        <el-table-column prop="damoTotal" label="打磨总数" min-width="60"></el-table-column>
-        <el-table-column prop="baofeiTotal" label="报废总数" min-width="60"></el-table-column>
-        <el-table-column prop="startTime" label="开始时间" width="108" sortable></el-table-column>
-        <el-table-column prop="endTime" label="结束时间" width="108" sortable></el-table-column>
-    </el-table>
   </div>
 </template>
 
 <script>
 import { getQualityStatisticsCarouselBoardData } from '@/api/kanbanManagement/carouselBoard.js'
 import * as echarts from 'echarts';
-import { DvTitle } from '@jiaminghi/data-view';
+import kbHeader from './kbHeader.vue';
 
 export default {
   name: 'QualityStatisticsCard',
   components: {
-    DvTitle
+    kbHeader
   },
   data() {
     return {
       loading: false,
-      QualityStatisticsTable: [],
-      tableHeight: '500px', // 调整表格高度，为图表留出空间
+      qualityStatisticsTable: [],
+      tableHeight: '500px',
       search: {
         starttime: null,
         endtime: null,
@@ -84,133 +131,88 @@ export default {
         reportType: 0,
         product_description: '',
       },
-      reportType_options: [
-        { label: '首检报表', value: 0 },
-        { label: '抛光报表', value: 1 },
-        { label: '包装报表', value: 2 },
-        { label: '总报表', value: 3 },
-      ],
-      pagination: {
-        total: 0,
-        pageNum: 1,
-        pageSize: 30,
+      // 统计数据对象
+      statistics: {
+        totalRecords: 0,
+        totalInput: 0,
+        totalQualified: 0,
+        passRate: '0%',
+        totalPolish: 0,
+        totalGrind: 0,
+        totalScrap: 0
       },
-      realTotal: 0,
       allDataList: [],
-      parkingSensor: 0,
-      qualityChart: null,
-      topQualifiedRateChart: null,
-      bottomQualifiedRateChart: null,
-      tableScrollTimer: null
+      // 图表实例
+      qualifiedRatePieChart: null,
+      top5Chart: null,
+      tableScrollTimer: null,
+      refreshTimer: null,
+      scrollCheckTimer: null
     }
   },
-  computed: {
-    // 过滤掉倒车雷达的数据
-    filteredDataList() {
-      return this.allDataList.filter(data => !data.productDescription.includes('倒车雷达'))
-    },
-    
-    // 投入数
-    totalQuantity() {
-      return Math.trunc(
-        this.filteredDataList.reduce((acc, data) => acc + (data.requireNumber || 0), 0) / 3
-      )
-    },
-    
-    // 合格数
-    totalQualifiedNumber() {
-      return Math.trunc(
-        this.filteredDataList.reduce((acc, data) => acc + (data.qualifiedNumber || 0), 0) / 3
-      )
-    },
-    // 抛光数
-    totalPaoguangTotal() {
-      return Math.trunc(
-        this.allDataList.reduce((acc, data) => {
-          let str = data.productDescription
-          if (!str || !str.includes('倒车雷达')) {
-            return acc + (data.paoguangTotal || 0)
-          } else {
-            return acc
-          }
-        }, 0) / 3,
-      )
-    },
-    // 打磨数
-    totalDamoTotal() {
-      return Math.trunc(
-        this.allDataList.reduce((acc, data) => {
-          let str = data.productDescription
-          if (!str || !str.includes('倒车雷达')) {
-            return acc + (data.damoTotal || 0)
-          } else {
-            return acc
-          }
-        }, 0) / 3,
-      )
-    },
-    // 报废数
-    totalBaofeiTotal() {
-      return Math.trunc(
-        this.allDataList.reduce((acc, data) => {
-          let str = data.productDescription
-          if (!str || !str.includes('倒车雷达')) {
-            return acc + (data.baofeiTotal || 0)
-          } else {
-            return acc
-          }
-        }, 0) / 3,
-      )
-    },
-    // 总合格率
-    passRate() {
-      let _totalQuantity = this.totalQuantity * 1.0
-      if (this.totalQuantity > 0) {
-        return ((this.totalQualifiedNumber / _totalQuantity) * 100).toFixed(1) + '%'
-      } else {
-        return '0%'
-      }
-    },
-  },
+  
   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() {
-    // 数据更新后初始化图表
-    if (this.QualityStatisticsTable.length > 0 && !this.qualityChart) {
-      this.$nextTick(() => {
-          this.initQualityChart()
-          this.initTopQualifiedRateChart()
-          this.initBottomQualifiedRateChart()
-          this.startTableAutoScroll()
-        })
-    }
+    // 数据更新后初始化图表和启动表格滚动
+    this.$nextTick(() => {
+      console.log('质量组件updated生命周期调用')
+      if (this.qualityStatisticsTable.length > 0) {
+        this.initQualifiedRatePieChart()
+        this.initTop5Chart()
+      }
+      // 无论数据是否为空，都尝试启动滚动，确保表格有内容时能正常滚动
+      this.startTableAutoScroll()
+    })
   },
+  
   beforeDestroy() {
     window.removeEventListener('resize', this.handleResize)
     // 清理图表实例
-    if (this.qualityChart) {
-      this.qualityChart.dispose()
-      this.qualityChart = null
+    if (this.qualifiedRatePieChart) {
+      this.qualifiedRatePieChart.dispose()
+      this.qualifiedRatePieChart = null
     }
-    if (this.topQualifiedRateChart) {
-      this.topQualifiedRateChart.dispose()
-      this.topQualifiedRateChart = null
+    if (this.top5Chart) {
+      this.top5Chart.dispose()
+      this.top5Chart = null
     }
-    if (this.bottomQualifiedRateChart) {
-      this.bottomQualifiedRateChart.dispose()
-      this.bottomQualifiedRateChart = 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() {
       // 设置默认时间范围为今天
@@ -218,6 +220,7 @@ export default {
       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)) {
@@ -225,13 +228,8 @@ export default {
       }
       return parseInt(num)
     },
-    // 数据去除0
-    offsetValue(num) {
-      if (num === 0 || num === '0') {
-        return ''
-      }
-      return num
-    },
+    
+    // 获取质量数据
     getQualityData() {
       this.loading = true
       // 设置默认查询参数
@@ -244,9 +242,17 @@ export default {
       getQualityStatisticsCarouselBoardData(query)
         .then((res) => {
           if (res.code == 200) {
-            this.QualityStatisticsTable = res.data || []
+            this.qualityStatisticsTable = res.data || []
             this.allDataList = res.data || []
-            this.realTotal = res.data.length || 0
+            console.log('质量数据加载完成，共', this.qualityStatisticsTable.length, '条记录')
+            // 计算统计数据
+            this.calculateStatistics()
+            
+            // 数据加载完成后立即启动滚动
+            this.$nextTick(() => {
+              console.log('质量数据加载后启动滚动')
+              this.startTableAutoScroll()
+            })
           }
         })
         .finally(() => {
@@ -254,89 +260,149 @@ export default {
         })
     },
     
-    // 初始化质量状态分布饼图 - 按质量类别统计
-    initQualityChart() {
-      const chartDom = document.getElementById('qualityStatusChart')
+    // 计算统计数据
+    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
       
-      this.qualityChart = echarts.init(chartDom)
+      if (this.qualifiedRatePieChart) {
+        this.qualifiedRatePieChart.dispose()
+      }
       
-      // 准备按质量类别统计的饼图数据
-      const qualifiedNum = this.totalQualifiedNumber
-      const unqualifiedNum = Math.trunc(this.filteredDataList.reduce((acc, data) => acc + ((data.requireNumber || 0) - (data.qualifiedNumber || 0)), 0) / 3)
-      const scrapNum = this.totalBaofeiTotal
+      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 = {
-        title: {
-          text: '质量状态分布',
-          left: 'center',
-          top: 0,
-          textStyle: {
-            fontSize: 14
-          }
-        },
         tooltip: {
           trigger: 'item',
-          formatter: '{a} <br/>{b}: {c} ({d}%)'
+          formatter: '{b}: {c} ({d}%)'
         },
         legend: {
           orient: 'horizontal',
-          bottom: 0,
+          bottom: 10,
+          data: ['合格率≥80%', '合格率<80%'],
           textStyle: {
-            fontSize: 10
+            color: '#00ffff',
+            fontSize: 12
           }
         },
         series: [
           {
-            name: '质量状态',
+            name: '合格率分布',
             type: 'pie',
-            radius: ['45%', '75%'],
+            radius: ['40%', '70%'],
+            center: ['50%', '40%'],
             avoidLabelOverlap: false,
             itemStyle: {
               borderRadius: 6,
-              borderColor: '#fff',
-              borderWidth: 1
+              borderColor: 'rgba(0, 20, 40, 0.6)',
+              borderWidth: 2
             },
             label: {
               show: true,
-              fontSize: 10,
-              formatter: '{b}\n{d}%'
+              formatter: '{b}\n{d}%',
+              color: '#ffffff',
+              fontSize: 12
             },
             emphasis: {
               label: {
                 show: true,
-                fontSize: '12',
-                fontWeight: 'bold'
+                fontSize: '14',
+                fontWeight: 'bold',
+                color: '#00ffff'
               }
             },
             data: [
-              { value: qualifiedNum, name: '合格', itemStyle: { color: '#67c23a' } },
-              { value: unqualifiedNum, name: '不合格', itemStyle: { color: '#f56c6c' } },
-              { value: scrapNum, name: '报废', itemStyle: { color: '#e6a23c' } }
+              { value: above80, name: '合格率≥80%', itemStyle: { color: '#67c23a' } },
+              { value: below80, name: '合格率<80%', itemStyle: { color: '#f56c6c' } }
             ].filter(item => item.value > 0) // 过滤掉数量为0的类别
           }
         ]
       }
       
-      this.qualityChart.setOption(option)
-      
-      // 监听窗口大小变化，调整图表大小
-      window.addEventListener('resize', () => {
-        if (this.qualityChart) {
-          this.qualityChart.resize()
-        }
-      })
+      this.qualifiedRatePieChart.setOption(option)
     },
     
-    // 初始化合格率最高的5个横向柱状图
-    initTopQualifiedRateChart() {
-      const chartDom = document.getElementById('topQualifiedRateChart')
+    // 初始化平均合格率TOP5横向柱状图
+    initTop5Chart() {
+      const chartDom = document.getElementById('top5Chart')
       if (!chartDom) return
       
-      this.topQualifiedRateChart = echarts.init(chartDom)
+      if (this.top5Chart) {
+        this.top5Chart.dispose()
+      }
       
-      // 过滤有合格数据的记录并按合格率降序排序
-      const validData = this.filteredDataList.filter(item => 
+      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))
       
@@ -344,21 +410,15 @@ export default {
       const top5 = validData.slice(0, 5)
       
       // 准备横向柱状图数据，y轴显示产品描述
-      const topLabels = top5.map(item => {
+      const labels = top5.map(item => {
         const desc = item.productDescription || item.finishedPartNumber || '未知'
-        return desc.substring(0, 20) // 截取前20个字符，优先显示描述
+        // 截取前20个字符，优先显示描述
+        const shortDesc = desc.length > 20 ? desc.substring(0, 20) + '...' : desc
+        return shortDesc
       })
-      const topRates = top5.map(item => parseFloat(item.qualifiedRate) || 0)
+      const rates = top5.map(item => parseFloat(item.qualifiedRate) || 0)
       
       const option = {
-        title: {
-          text: '合格率最高5个',
-          left: 'center',
-          top: 0,
-          textStyle: {
-            fontSize: 14
-          }
-        },
         tooltip: {
           trigger: 'axis',
           axisPointer: {
@@ -370,10 +430,10 @@ export default {
           }
         },
         grid: {
-          left: '3%',
-          right: '4%',
-          bottom: '3%',
-          top: '30%',
+          left: '5%', // 减小左侧边距，让图表整体向左移动
+          right: '10%',
+          top: '10%',
+          bottom: '10%',
           containLabel: true
         },
         xAxis: {
@@ -382,14 +442,21 @@ export default {
           max: 100,
           axisLabel: {
             formatter: '{value}%',
-            fontSize: 10
+            color: '#ffffff',
+            fontSize: 12
+          },
+          splitLine: {
+            lineStyle: {
+              color: 'rgba(255, 255, 255, 0.1)'
+            }
           }
         },
         yAxis: {
           type: 'category',
-          data: topLabels,
+          data: labels,
           axisLabel: {
-            fontSize: 10,
+            color: '#00ffff',
+            fontSize: 12,
             interval: 0,
             formatter: function(value) {
               // 自动换行，每行最多显示8个字符
@@ -406,158 +473,106 @@ export default {
           {
             name: '合格率',
             type: 'bar',
-            data: topRates,
+            data: rates,
             itemStyle: {
-              color: '#67c23a'
+              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                { offset: 0, color: '#0066ff' },
+                { offset: 1, color: '#00ffff' }
+              ])
             },
-            barWidth: '40%'
-          }
-        ]
-      }
-      
-      this.topQualifiedRateChart.setOption(option)
-      
-      // 监听窗口大小变化，调整图表大小
-      window.addEventListener('resize', () => {
-        if (this.topQualifiedRateChart) {
-          this.topQualifiedRateChart.resize()
-        }
-      })
-    },
-    
-    // 初始化合格率最低的5个横向柱状图
-    initBottomQualifiedRateChart() {
-      const chartDom = document.getElementById('bottomQualifiedRateChart')
-      if (!chartDom) return
-      
-      this.bottomQualifiedRateChart = echarts.init(chartDom)
-      
-      // 过滤有合格数据的记录并按合格率升序排序
-      const validData = this.filteredDataList.filter(item => 
-        item.qualifiedRate !== null && item.qualifiedRate !== '' && !isNaN(item.qualifiedRate)
-      ).sort((a, b) => parseFloat(a.qualifiedRate) - parseFloat(b.qualifiedRate))
-      
-      // 获取合格率最低的前5个
-      const bottom5 = validData.slice(0, 5)
-      
-      // 准备横向柱状图数据，y轴显示产品描述
-      const bottomLabels = bottom5.map(item => {
-        const desc = item.productDescription || item.finishedPartNumber || '未知'
-        return desc.substring(0, 20) // 截取前20个字符，优先显示描述
-      })
-      const bottomRates = bottom5.map(item => parseFloat(item.qualifiedRate) || 0)
-      
-      const option = {
-        title: {
-          text: '合格率最低5个',
-          left: 'center',
-          top: 0,
-          textStyle: {
-            fontSize: 14
-          }
-        },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow'
-          },
-          formatter: function(params) {
-            const data = params[0]
-            return data.name + '<br/>合格率: ' + data.value + '%'
-          }
-        },
-        grid: {
-          left: '3%',
-          right: '4%',
-          bottom: '3%',
-          top: '30%',
-          containLabel: true
-        },
-        xAxis: {
-          type: 'value',
-          min: 0,
-          max: 100,
-          axisLabel: {
-            formatter: '{value}%',
-            fontSize: 10
-          }
-        },
-        yAxis: {
-          type: 'category',
-          data: bottomLabels,
-          axisLabel: {
-            fontSize: 10,
-            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();
+            barWidth: '50%',
+            label: {
+              show: true,
+              position: 'right',
+              color: '#ffffff',
+              formatter: '{c}%'
             }
           }
-        },
-        series: [
-          {
-            name: '合格率',
-            type: 'bar',
-            data: bottomRates,
-            itemStyle: {
-              color: '#f56c6c'
-            },
-            barWidth: '40%'
-          }
         ]
       }
       
-      this.bottomQualifiedRateChart.setOption(option)
-      
-      // 监听窗口大小变化，调整图表大小
-      window.addEventListener('resize', () => {
-        if (this.bottomQualifiedRateChart) {
-          this.bottomQualifiedRateChart.resize()
-        }
-      })
+      this.top5Chart.setOption(option)
     },
     
-    // 表格自动滚动功能
+    // 表格自动滚动功能 - 修复滚动逻辑
     startTableAutoScroll() {
+      // 先清理可能存在的定时器
       if (this.tableScrollTimer) {
         clearInterval(this.tableScrollTimer)
+        this.tableScrollTimer = null
       }
       
-      this.tableScrollTimer = setInterval(() => {
-        if (this.$refs.qualityTable) {
-          const elTableBody = this.$refs.qualityTable.$el.querySelector('.el-table__body-wrapper')
-          if (elTableBody) {
-            // 每次滚动一行的高度
-            const scrollStep = 31 // 行高 + 边框
-            elTableBody.scrollTop += scrollStep
-            
-            // 如果滚动到底部，回到顶部继续滚动
-            if (elTableBody.scrollTop + elTableBody.clientHeight >= elTableBody.scrollHeight) {
-              elTableBody.scrollTop = 0
+      // 确保表格元素已渲染
+      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
+        }
+        
+        // 重要：确保容器内容高度大于容器高度才需要滚动
+        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
             }
           }
-        }
-      }, 2000) // 每2秒滚动一次
+        }, 50) // 每50毫秒滚动一次，更平滑
+        
+        console.log('质量组件启动滚动定时器')
+      })
     },
+    
+    // 处理窗口大小变化
     handleResize() {
-      // 简单的响应式调整
+      // 考虑kbHeader的高度，重新计算内容高度
       const windowHeight = window.innerHeight
-      this.tableHeight = Math.max(windowHeight * 0.65, 450) + 'px' // 增加表格高度，突出表格展示
+      // 减去标题高度和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.qualityChart) {
-        this.qualityChart.resize()
+      if (this.qualifiedRatePieChart) {
+        this.qualifiedRatePieChart.resize()
       }
-      if (this.topQualifiedRateChart) {
-        this.topQualifiedRateChart.resize()
-      }
-      if (this.bottomQualifiedRateChart) {
-        this.bottomQualifiedRateChart.resize()
+      if (this.top5Chart) {
+        this.top5Chart.resize()
       }
     }
   }
@@ -566,132 +581,244 @@ export default {
 
 <style scoped>
 .quality-statistics-card {
-  padding: 20px;
-  background: transparent;
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
+    padding: 10px;
+    background: transparent;
+    width: 100%;
+    min-height: 100vh; /* 确保至少填满整个视口高度 */
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: 10px; /* 进一步减小间隔，让第二行整体向上移动 */
+  }
+
+/* 第一行布局 */
+.first-row {
+    width: 100%;
+    flex-shrink: 0;
+    height: 140px;
+    margin-bottom: 10px; /* 减小底部间距 */
+  }
+
+/* 第二行布局 */
+.second-row {
+    display: grid;
+    grid-template-columns: 3fr 1fr;
+    gap: 15px;
+    flex: 1;
+    min-height: 0;
+  }
+
+/* 统计翻牌器样式 */
+.statistics-section {
+  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;
+}
+
+.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);
+}
+
+.flip-card-label {
+  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;
+}
+
+.flip-card-value.completed {
+  color: #67c23a;
+}
+
+.flip-card-value.scrap {
+  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;
 }
 
-/* 表格样式优化 */
-.el-table {
-  background: rgba(0, 20, 40, 0.6) !important;
-}
-
-::v-deep .el-table__header th  {
-  background: rgba(0, 60, 120, 0.8) !important;
-  color: #00ffff !important;
-  border-bottom: 1px solid rgba(0, 255, 255, 0.3) !important;
-  font-weight: bold;
-}
-
-::v-deep .el-table__body td  {
-  color: #ffffff !important;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
-}
-
-::v-deep .el-table__row:hover td  {
-  background-color: rgba(0, 255, 255, 0.1) !important;
-}
-
-/* 加载动画样式 */
-::v-deep .el-loading-spinner .path  {
-  stroke: #00ffff !important;
-}
-
- ::v-deep .el-loading-spinner .el-loading-text {
-  color: #00ffff !important;
-}
-
-.middle-data {
-  margin-bottom: 10px;
-  padding: 8px 15px;
-  background-color: #f0f2f5;
-  border-radius: 6px;
-  flex-shrink: 0;
-  font-size: 13px;
-  text-align: center;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  color: #606266;
-}
-
-.middle-data span {
-  margin: 0 15px;
-  white-space: nowrap;
-}
-
-.charts-wrapper {
-  display: flex;
-  gap: 10px;
-  margin-bottom: 10px;
-  flex-shrink: 0;
-  flex-wrap: wrap;
+.charts-section {
+  gap: 15px;
 }
 
 .chart-container {
-  background-color: #fafafa;
-  border-radius: 6px;
-  padding: 8px;
-}
-
-.pie-chart {
-  flex: 1;
-  min-width: 200px;
-}
-
-.bar-chart {
-  flex: 1;
-  min-width: 250px; /* 增加最小宽度以适应多行标签 */
-}
-
-.top-chart {
-  margin-bottom: 5px;
-}
-
-.bottom-chart {
-  margin-bottom: 5px;
-}
-
-.el-table {
   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);
+}
+
+/* 自定义表格样式 */
+.custom-table-wrapper {
+  /* 确保表格固定高度，不依赖flex:1，避免内容超出屏幕 */
+  overflow-y: auto;
   border-radius: 6px;
-  overflow: hidden;
-  /* 突出表格显示 */
-  border: 1px solid #ebeef5;
+  background: rgba(0, 60, 120, 0.8);
+  /* 确保高度已通过JS设置，这里不再设置 */
 }
 
-/* 优化表格样式 */
-.el-table__header-wrapper th {
-  background-color: #ecf5ff !important;
-  color: #303133;
-  font-weight: 600;
-  text-align: center;
-  font-size: 14px;
-  padding: 12px 5px;
-  border-bottom: 2px solid #409eff;
+.custom-table {
+  width: 100%;
+  border-collapse: collapse;
+  color: #ffffff;
 }
 
-.el-table__body-wrapper td {
+.custom-table thead {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.custom-table th {
+  background: rgba(0, 60, 120, 1);
+  color: #00ffff;
+  font-weight: bold;
   text-align: center;
-  font-size: 14px;
   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;
+}
+
+.table-row:hover td {
+  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;
+}
+
+.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;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.loading-text {
+  font-size: 14px;
+}
+
+/* 超出省略 */
+.ellipsis {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  max-width: 150px;
 }
 
-/* 优化斑马纹效果 */
-.el-table--striped .el-table__body tr.el-table__row--striped td {
-  background-color: #fafafa;
+/* 滚动条样式 */
+.custom-table-wrapper::-webkit-scrollbar {
+  width: 8px;
 }
 
-/* 高亮当前行 */
-.el-table__body tr:hover>td {
-  background-color: #f5f7fa;
+.custom-table-wrapper::-webkit-scrollbar-track {
+  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;
+}
+
+.custom-table-wrapper::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 255, 255, 0.8);
+}
+
+/* 响应式调整 */
+@media (max-width: 1200px) {
+  .flip-card-container {
+    grid-template-columns: repeat(4, 1fr);
+  }
+  
+  .second-row {
+    grid-template-columns: 1fr;
+  }
+  
+  .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;
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/kanbanManagement/CarouselBoard/components/WorkorderOnlineCard.vue b/src/views/kanbanManagement/CarouselBoard/components/WorkorderOnlineCard.vue
index 0db0014..d3dcb4f 100644
--- a/src/views/kanbanManagement/CarouselBoard/components/WorkorderOnlineCard.vue
+++ b/src/views/kanbanManagement/CarouselBoard/components/WorkorderOnlineCard.vue
@@ -1,108 +1,167 @@
 <template>
   <div class="workorder-online-card">
-    <dv-title text="生产计划工单" :color="['#00ffff', '#0066ff']" style="margin-bottom: 15px;" />
+    <kb-header>生产计划工单</kb-header>
     
-    <!-- 今日统计数据区域 -->
-    <div class="statistics-container">
-      <div class="stat-item">
-        <span class="stat-label">今日总计划数:</span>
-        <span class="stat-value">{{ todayStatistics.totalPlan }}</span>
+    <!-- 第一行布局 -->
+    <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="stat-item">
-        <span class="stat-label">已完成计划数:</span>
-        <span class="stat-value completed">{{ todayStatistics.completedPlan }}</span>
-      </div>
-      <div class="stat-item">
-        <span class="stat-label">未完成计划数:</span>
-        <span class="stat-value uncompleted">{{ todayStatistics.uncompletedPlan }}</span>
-      </div>
-      <div class="stat-item">
-        <span class="stat-label">今日总投入数:</span>
-        <span class="stat-value">{{ todayStatistics.totalInput }}</span>
-      </div>
-      <div class="stat-item">
-        <span class="stat-label">今日总合格数:</span>
-        <span class="stat-value qualified">{{ todayStatistics.totalQualified }}</span>
+      
+      <!-- 第一行第二、三区域合并：今日统计数据翻牌器 -->
+      <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 class="chart-container">
-      <div id="workorderStatusChart" style="width: 100%; height: 200px;"></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>
+      </div>
+      
+      <!-- 第三区域：生产统计横向柱状图 -->
+      <div class="bar-chart-section">
+        <div class="section-title">生产零件Top5统计</div>
+        <div id="productionTypeChart" style="width: 100%; height: 100%;"></div>
+      </div>
     </div>
-    
-    <el-table 
-      :data="workorderOnlineTable" 
-      v-loading="loading" 
-      border 
-      style="width: 100%"
-      :height="tableHeight"
-      ref="workorderTable"
-      stripe
-      highlight-current-row
-      class="dark-table"
-    >
-      <el-table-column type="index" width="60"></el-table-column>
-      <el-table-column prop="clientWorkorder" label="工单号" width="130"></el-table-column>
-      <el-table-column prop="blankNumber" label="毛坯号" width="120"></el-table-column>
-      <el-table-column prop="finishedPartNumber" label="成品零件号" width="150"></el-table-column>
-      <el-table-column prop="productDescription" label="产品描述"></el-table-column>
-      <el-table-column prop="colour" label="颜色" width="100"></el-table-column>
-      <el-table-column prop="specifications" label="规格" width="100"></el-table-column>
-      <el-table-column prop="vehicleNumber" label="车数" width="80"></el-table-column>
-      <el-table-column prop="previousNumber" label="上件数" width="80"></el-table-column>
-      <el-table-column prop="remark3" label="状态" width="100">
-        <template slot-scope="scope">
-          <el-tag size="small" v-if="scope.row.status === 2" type="success">已完成</el-tag>
-          <el-tag size="small" v-else-if="scope.row.status === 1" type="warning">进行中</el-tag>
-          <el-tag size="small" v-else type="info">未开始</el-tag>
-        </template>
-      </el-table-column>
-    </el-table>
   </div>
 </template>
 
 <script>
 import { getWorkOrderCarouselBoardData } from '@/api/kanbanManagement/carouselBoard.js'
 import * as echarts from 'echarts';
-import { DvTitle } from '@jiaminghi/data-view';
+import kbHeader from './kbHeader.vue';
+
 
 export default {
   name: 'WorkorderOnlineCard',
   components: {
-    DvTitle
+    kbHeader
   },
+
   data() {
       return {
         loading: false,
         workorderOnlineTable: [],
-        tableHeight: '500px', // 调整表格高度，为图表留出空间
-        realTotal: 0,
+        tableHeight: '500px',
         workorderChart: null,
+        productionChart: null,
         tableScrollTimer: null,
+        refreshTimer: null,
+        scrollCheckTimer: null,
         // 今日统计数据
         todayStatistics: {
           totalPlan: 0,      // 今日总计划数
           completedPlan: 0,  // 已完成计划数
           uncompletedPlan: 0, // 未完成计划数
-          totalInput: 0,     // 今日总投入数
-          totalQualified: 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() {
-    // 数据更新后初始化图表
-    if (this.workorderOnlineTable.length > 0 && !this.workorderChart) {
-      this.$nextTick(() => {
+    // 数据更新后初始化图表和启动表格滚动
+    this.$nextTick(() => {
+      console.log('工单组件updated生命周期调用')
+      if (this.workorderOnlineTable.length > 0) {
         this.initWorkorderChart()
-        this.startTableAutoScroll()
-      })
-    }
+        this.initProductionTypeChart()
+      }
+      // 无论数据是否为空，都尝试启动滚动，确保表格有内容时能正常滚动
+      this.startTableAutoScroll()
+    })
   },
   beforeDestroy() {
     window.removeEventListener('resize', this.handleResize)
@@ -111,11 +170,25 @@ export default {
       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() {
@@ -130,10 +203,16 @@ export default {
         .then((res) => {
           if (res.code == 200) {
             this.workorderOnlineTable = res.data || []
-            this.realTotal = this.workorderOnlineTable.length
+            console.log('工单数据加载完成，共', this.workorderOnlineTable.length, '条记录')
             
             // 计算今日统计数据
             this.calculateTodayStatistics()
+            
+            // 数据加载完成后立即启动滚动
+            this.$nextTick(() => {
+              console.log('数据加载后启动滚动')
+              this.startTableAutoScroll()
+            })
           }
         })
         .finally(() => {
@@ -148,13 +227,12 @@ export default {
         totalPlan: 0,
         completedPlan: 0,
         uncompletedPlan: 0,
-        totalInput: 0,
-        totalQualified: 0
+        totalInput: 0
       }
       
       // 统计工单数据
       this.workorderOnlineTable.forEach(item => {
-        // 假设vehicleNumber是计划数
+        // 确保使用实际的计划数字段
         const planCount = Number(item.vehicleNumber) || 0
         this.todayStatistics.totalPlan += planCount
         
@@ -165,129 +243,274 @@ export default {
           this.todayStatistics.uncompletedPlan += planCount
         }
         
-        // 假设previousNumber是投入数
+        // 确保使用实际的投入数字段
         this.todayStatistics.totalInput += Number(item.previousNumber) || 0
-        
-        // 假设合格数为投入数的90%（实际应从API获取）
-        const qualifiedCount = Math.round((Number(item.previousNumber) || 0) * 0.9)
-        this.todayStatistics.totalQualified += qualifiedCount
       })
     },
     
-    // 初始化工单状态分布环形进度图
+    // 获取状态文本
+    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
       
-      this.workorderChart = echarts.init(chartDom)
-      
-      // 准备环形图数据
-      const statusCounts = {
-        '已完成': 0,
-        '进行中': 0,
-        '未开始': 0,
-        '已暂停': 0
+      if (this.workorderChart) {
+        this.workorderChart.dispose()
       }
       
-      // 根据工单状态统计数量
-      this.workorderOnlineTable.forEach(item => {
-        switch (item.status) {
-          case 2: // 已完成
-            statusCounts['已完成']++
-            break
-          case 1: // 进行中
-            statusCounts['进行中']++
-            break
-          default: // 未开始
-            statusCounts['未开始']++
-        }
-      })
+      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 = {
-        title: {
-          text: '工单状态分布',
-          left: 'center',
-          top: 0
-        },
         tooltip: {
           trigger: 'item',
           formatter: '{a} <br/>{b}: {c} ({d}%)'
         },
         legend: {
-          orient: 'horizontal',
-          bottom: 0
+          orient: 'vertical',
+          left: 10,
+          top: 'center',
+          textStyle: {
+            color: '#00ffff'
+          }
         },
         series: [
           {
-            name: '工单状态',
+            name: '今日生产',
             type: 'pie',
-            radius: ['40%', '70%'], // 环形图
+            radius: ['40%', '70%'],
+            center: ['60%', '50%'],
             avoidLabelOverlap: false,
             itemStyle: {
               borderRadius: 10,
-              borderColor: '#fff',
+              borderColor: 'rgba(0, 20, 40, 0.6)',
               borderWidth: 2
             },
             label: {
               show: true,
-              formatter: '{b}\n{d}%'
+              formatter: '{b}\n{d}%',
+              color: '#ffffff'
             },
             emphasis: {
               label: {
                 show: true,
                 fontSize: '16',
-                fontWeight: 'bold'
+                fontWeight: 'bold',
+                color: '#00ffff'
               }
             },
             data: [
-              { value: statusCounts['已完成'], name: '已完成', itemStyle: { color: '#67c23a' } },
-              { value: statusCounts['进行中'], name: '进行中', itemStyle: { color: '#409EFF' } },
-              { value: statusCounts['未开始'], name: '未开始', itemStyle: { color: '#909399' } }
-            ].filter(item => item.value > 0) // 过滤掉数量为0的状态
+              { 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
       
-      // 监听窗口大小变化，调整图表大小
-      window.addEventListener('resize', () => {
-        if (this.workorderChart) {
-          this.workorderChart.resize()
+      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) {
+        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
+        }
+        
+        // 重要：确保容器内容高度大于容器高度才需要滚动
+        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('工单组件启动滚动定时器')
       })
     },
     
-    // 表格自动滚动功能
-    startTableAutoScroll() {
-      if (this.tableScrollTimer) {
-        clearInterval(this.tableScrollTimer)
+    handleResize() {
+      // 考虑kbHeader的高度，重新计算内容高度
+      const windowHeight = window.innerHeight
+      // 减去标题高度和padding等，确保内容适配
+      const availableHeight = windowHeight - 60 // 标题高度
+      
+      // 调整第一行高度，进一步减小以给第二行留出更多空间
+      const firstRow = document.querySelector('.first-row')
+      if (firstRow) {
+        firstRow.style.height = '200px' // 进一步减小第一行高度
       }
       
-      this.tableScrollTimer = setInterval(() => {
-        if (this.$refs.workorderTable) {
-          const elTableBody = this.$refs.workorderTable.$el.querySelector('.el-table__body-wrapper')
-          if (elTableBody) {
-            // 每次滚动一行的高度
-            const scrollStep = 31 // 行高 + 边框
-            elTableBody.scrollTop += scrollStep
-            
-            // 如果滚动到底部，回到顶部继续滚动
-            if (elTableBody.scrollTop + elTableBody.clientHeight >= elTableBody.scrollHeight) {
-              elTableBody.scrollTop = 0
-            }
-          }
-        }
-      }, 2000) // 每2秒滚动一次
-    },
-    handleResize() {
-      const windowHeight = window.innerHeight
-      this.tableHeight = Math.max(windowHeight * 0.5, 400) + 'px' // 为图表留出空间
+      // 计算表格高度，确保表格固定高度且不会超出屏幕
+      // 将表格高度固定为一个合理的值，确保在各种屏幕尺寸下都能正常显示
+      this.tableHeight = Math.min(Math.max(availableHeight - 350, 300), 400) + 'px' // 限制最大高度为400px
       
       // 调整图表大小
       if (this.workorderChart) {
         this.workorderChart.resize()
       }
+      if (this.productionChart) {
+        this.productionChart.resize()
+      }
     }
   }
 }
@@ -295,166 +518,244 @@ export default {
 
 <style scoped>
 .workorder-online-card {
-  padding: 15px;
-  background: white;
+    padding: 10px;
+    background: transparent;
+    width: 100%;
+    min-height: 100vh; /* 确保至少填满整个视口高度 */
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: 15px; /* 减小间距 */
+  }
+
+/* kbHeader组件已包含标题样式 */
+
+/* 第一行布局 */
+.first-row {
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+    gap: 15px;
+    height: 200px;
+  }
+
+/* 第二行布局 */
+.second-row {
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+    gap: 15px;
+    flex: 1;
+    min-height: 0;
+  }
+
+/* 通用区域样式 */
+.chart-section,
+.statistics-section,
+.table-section,
+.bar-chart-section {
+  background: rgba(0, 20, 40, 0.6);
   border-radius: 8px;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-  height: 100%;
+  border: 1px solid rgba(0, 255, 255, 0.3);
+  padding: 15px;
   display: flex;
   flex-direction: column;
-  box-sizing: border-box;
 }
 
-/* 今日统计数据样式 */
-.statistics-container {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-  gap: 10px;
-  margin-bottom: 15px;
-  padding: 10px;
-  background-color: #f0f2f5;
-  border-radius: 6px;
-}
-
-.stat-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 8px;
-  background-color: white;
-  border-radius: 4px;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
-}
-
-.stat-label {
-  font-size: 12px;
-  color: #606266;
-  margin-bottom: 4px;
-}
-
-.stat-value {
+.section-title {
+  color: #00ffff;
   font-size: 16px;
   font-weight: bold;
-  color: #303133;
+  margin-bottom: 15px;
+  text-align: center;
+  padding-bottom: 8px;
+  border-bottom: 1px solid rgba(0, 255, 255, 0.3);
 }
 
-.stat-value.completed {
+/* 统计翻牌器样式 */
+.flip-card-container {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 15px;
+    flex: 1;
+    align-items: center;
+  }
+
+.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);
+}
+
+.flip-card-label {
+  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;
+}
+
+.flip-card-value.completed {
   color: #67c23a;
 }
 
-.stat-value.uncompleted {
+.flip-card-value.uncompleted {
   color: #e6a23c;
 }
 
-.stat-value.qualified {
-  color: #409EFF;
-}
 
-.chart-container {
-  margin-bottom: 15px;
-  flex-shrink: 0;
-  background-color: #fafafa;
+
+/* 自定义表格样式 */
+.custom-table-wrapper {
+  /* 确保表格固定高度，不依赖flex:1，避免内容超出屏幕 */
+  overflow-y: auto;
   border-radius: 6px;
-  padding: 10px;
+  background: rgba(0, 60, 120, 0.8);
+  /* 确保高度已通过JS设置，这里不再设置 */
 }
 
-.el-table {
-  flex: 1;
-  min-height: 0;
-  border-radius: 6px;
-  overflow: hidden;
+.custom-table {
+  width: 100%;
+  border-collapse: collapse;
+  color: #ffffff;
 }
 
-/* 优化表格样式 */
-.el-table__header-wrapper th {
-  background-color: #e6f7ff !important;
-  color: #303133;
-  font-weight: 600;
+.custom-table thead {
+  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;
-  padding: 10px 5px;
 }
 
-.el-table__body-wrapper td {
+.custom-table td {
   text-align: center;
-  font-size: 13px;
   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);
+}
+
+/* 状态标签样式 */
+.status-tag {
+  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;
+}
+
+.status-progress {
+  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;
+}
+
+/* 加载样式 */
+.loading-overlay {
+  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;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.loading-text {
+  font-size: 14px;
+}
+
+/* 超出省略 */
+.ellipsis {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  max-width: 150px;
 }
 
-/* 优化斑马纹效果 */
-.el-table--striped .el-table__body tr.el-table__row--striped td {
-  background-color: #fafafa;
+/* 滚动条样式 */
+.custom-table-wrapper::-webkit-scrollbar {
+  width: 8px;
 }
 
-/* 高亮当前行 */
-.el-table__body tr:hover>td {
-  background-color: #f5f7fa;
-}
-</style>
-
-<style scoped>
-.workorder-online-card {
-  padding: 20px;
-  background: transparent;
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
+.custom-table-wrapper::-webkit-scrollbar-track {
+  background: rgba(0, 60, 120, 0.5);
+  border-radius: 4px;
 }
 
-/* 表格样式优化 */
-.dark-table {
-  background: rgba(0, 20, 40, 0.6) !important;
+.custom-table-wrapper::-webkit-scrollbar-thumb {
+  background: rgba(0, 255, 255, 0.5);
+  border-radius: 4px;
 }
 
-::v-deep .el-table__header th {
-  background: rgba(0, 60, 120, 0.8) !important;
-  color: #00ffff !important;
-  border-bottom: 1px solid rgba(0, 255, 255, 0.3) !important;
-  font-weight: bold;
+.custom-table-wrapper::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 255, 255, 0.8);
 }
 
-::v-deep .el-table__body td {
-  color: #ffffff !important;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
-}
-
-::v-deep .el-table__row:hover td {
-  background-color: rgba(0, 255, 255, 0.1) !important;
-}
-
-/* 标签样式优化 */
-::v-deep .el-tag {
-  background-color: rgba(0, 102, 255, 0.3) !important;
-  color: #ffffff !important;
-  border-color: #0066ff !important;
-}
-
-::v-deep .el-tag--success {
-  background-color: rgba(103, 194, 58, 0.3) !important;
-  border-color: #67c23a !important;
-}
-
-::v-deep .el-tag--warning {
-  background-color: rgba(230, 162, 60, 0.3) !important;
-  border-color: #e6a23c !important;
-}
-
-::v-deep .el-tag--info {
-  background-color: rgba(90, 143, 242, 0.3) !important;
-  border-color: #5a8ff2 !important;
-}
-
-/* 加载动画样式 */
-::v-deep .el-loading-spinner .path {
-  stroke: #00ffff !important;
-}
-
-::v-deep .el-loading-spinner .el-loading-text {
-  color: #00ffff !important;
+/* 响应式调整 */
+@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);
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/kanbanManagement/CarouselBoard/components/kbHeader.vue b/src/views/kanbanManagement/CarouselBoard/components/kbHeader.vue
new file mode 100644
index 0000000..c963eae
--- /dev/null
+++ b/src/views/kanbanManagement/CarouselBoard/components/kbHeader.vue
@@ -0,0 +1,29 @@
+<template>
+	<div class="header">
+		<span class="title"><slot></slot></span>
+	</div>
+</template>
+
+<script></script>
+
+<style scoped>
+.header {
+	background-image: url('../images/header.png');
+	background-size: cover;
+	background-position: center center;
+	background-repeat: no-repeat;
+	height: 60px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+.title {
+	font-size: 36px;
+	font-weight: 600;
+	font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+	-webkit-background-clip: text; /* 仅将背景应用于文本 */
+	-webkit-text-fill-color: transparent; /* 设置文本颜色为透明 */
+	color: transparent; /* 兼容非WebKit浏览器 */
+	background-image: linear-gradient(92deg, #0072ff 0%, #00eaff 50%, #01aaff 100%);
+}
+</style>
\ No newline at end of file
diff --git a/src/views/kanbanManagement/CarouselBoard/images/header.png b/src/views/kanbanManagement/CarouselBoard/images/header.png
new file mode 100644
index 0000000..e9c8411
Binary files /dev/null and b/src/views/kanbanManagement/CarouselBoard/images/header.png differ
diff --git a/src/views/kanbanManagement/CarouselBoard/images/header.svg b/src/views/kanbanManagement/CarouselBoard/images/header.svg
new file mode 100644
index 0000000..d340609
--- /dev/null
+++ b/src/views/kanbanManagement/CarouselBoard/images/header.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100" viewBox="0 0 1200 100">
+  <defs>
+    <linearGradient id="headerGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#002854;stop-opacity:0.8" />
+      <stop offset="50%" style="stop-color:#004d8c;stop-opacity:0.8" />
+      <stop offset="100%" style="stop-color:#002854;stop-opacity:0.8" />
+    </linearGradient>
+    <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
+      <feGaussianBlur stdDeviation="5" result="blur" />
+      <feComposite in="SourceGraphic" in2="blur" operator="over" />
+    </filter>
+  </defs>
+  <rect width="100%" height="100%" fill="url(#headerGradient)" />
+  <rect x="10" y="10" width="1180" height="80" rx="5" ry="5" fill="none" stroke="#00ffff" stroke-width="1" stroke-opacity="0.3" filter="url(#glow)" />
+  <line x1="10" y1="90" x2="1190" y2="90" stroke="#00ffff" stroke-width="1" stroke-opacity="0.5" />
+</svg>
\ No newline at end of file
diff --git a/src/views/kanbanManagement/CarouselBoard/index.vue b/src/views/kanbanManagement/CarouselBoard/index.vue
index 61e6932..edb5d3a 100644
--- a/src/views/kanbanManagement/CarouselBoard/index.vue
+++ b/src/views/kanbanManagement/CarouselBoard/index.vue
@@ -1,10 +1,8 @@
 <template>
   <dv-full-screen-container>
-    <!-- <dv-decoration-1 :color="['#00ffff', '#0066ff']" />
-    <dv-decoration-2 :color="['#00ffff', '#0066ff']" /> -->
     <div class="carousel-board-container">
       <dv-border-box-1 class="dashboard-border">
-        <el-carousel ref="carousel" :interval="60000" height="99vh" arrow="never" indicator-position="bottom" autoplay
+        <el-carousel ref="carousel" :interval="60000" height="100vh" arrow="never" indicator-position="bottom" autoplay
           class="dashboard-carousel">
           <el-carousel-item>
             <QualityStatisticsCard />
@@ -53,9 +51,9 @@ export default {
 .carousel-board-container {
   width: 100%;
   height: 100%;
-  padding: 20px;
+  padding: 0px;
   background: linear-gradient(135deg, #001529 0%, #002140 100%);
-  overflow: hidden;
+  overflow: auto;
   box-sizing: border-box;
 }
 
@@ -71,8 +69,9 @@ export default {
 
 /* 优化轮播项样式 */
 .el-carousel__item {
-  padding: 10px;
+  padding: 0;
   box-sizing: border-box;
+  min-height: 100vh;
 }
 
 /* 确保指示器清晰可见 */
diff --git a/src/views/kanbanManagement/CarouselBoardManagement/index.vue b/src/views/kanbanManagement/CarouselBoardManagement/index.vue
index 794677d..60a4e9a 100644
--- a/src/views/kanbanManagement/CarouselBoardManagement/index.vue
+++ b/src/views/kanbanManagement/CarouselBoardManagement/index.vue
@@ -1,5 +1,6 @@
 <template>
-  <div class="carousel-board-management">
+  <div class="carousel-board-root">
+    <div class="carousel-board-management">
     <!-- 页面标题 -->
     <div class="page-header">
       <h3>轮播看板管理</h3>
@@ -82,9 +83,9 @@
         <el-table-column prop="result" label="操作结果"></el-table-column>
       </el-table>
     </el-card>
-  </div>
+    </div>
 
-  <!-- 时间选择弹窗 -->
+    <!-- 时间选择弹窗 -->
   <el-dialog :title="`${currentAction}${currentModuleName}数据 - 选择日期`" :visible.sync="timeDialogVisible" width="400px" :close-on-click-modal="false">
     <div style="padding: 20px 0">
       <el-form label-position="top">
@@ -97,7 +98,8 @@
       <el-button @click="timeDialogVisible = false">取消</el-button>
       <el-button type="primary" @click="confirmTimeSelection">{{ currentAction }}</el-button>
     </span>
-  </el-dialog>
+    </el-dialog>
+  </div>
 </template>
 
 <script>