看板2更新

huang

2025-04-18 1460aa1d5f2b5722d43ed31724594c006213bea7

 UI-Project/src/views/KanbanDisplay/kanbanDisplay.vue

@@ -1,193 +1,820 @@
<!--  空白页  -->


<script setup>
import { ref, computed } from 'vue'
import * as echarts from 'echarts'; 
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import * as echarts from 'echarts'
import request from '@/utils/request'

const dashboardRef = ref(null)
const standardWidth = 1920 // 设计稿标准宽度
const standardHeight = 1080 // 设计稿标准高度

// 计算缩放比例并应用
const setScale = () => {
  if (!dashboardRef.value) return
  
  const w = window.innerWidth
  const h = window.innerHeight
  
  // 计算宽高比例
  const wScale = w / standardWidth
  const hScale = h / standardHeight
  
  // 使用较小的缩放比例，确保内容完全显示
  const scale = Math.min(wScale, hScale)
  
  // 计算居中偏移
  const offsetX = (w - standardWidth * scale) / 2
  const offsetY = (h - standardHeight * scale) / 2
  
  // 应用变换
  dashboardRef.value.style.transform = `scale(${scale})`
  dashboardRef.value.style.transformOrigin = '0 0'
  dashboardRef.value.style.marginLeft = `${offsetX}px`
  dashboardRef.value.style.marginTop = `${offsetY}px`
}

// 监听窗口大小变化
const handleResize = () => {
  setScale()
  // 重新渲染所有图表
  charts.forEach(chart => {
    chart.resize()
  })
}

// 存储所有图表实例
const charts = []

// 获取能耗数据
const loadEnergyData = async () => {
  try {
    const res = await request({
      url: '/deviceInteraction/energy/consumption/chartEnergy',
      method: 'post'
    })
    if (res.code === 200) {
      energyData.value = res.data.actual || [];
      updateEnergyChart()
    }
  } catch (error) {
    console.error('获取能耗数据失败:', error)
  }
}


const energyData = ref([])
const notCompleteData = ref([]) // 完整数据集
const displayedData = ref([]) // 当前显示的数据集
const pageSize = 20 // 每批显示的数据量
let currentPage = 0 // 当前显示的批次
let scrollTimer = null // 滚动计时器

// 获取未完成数据
const loadNotCompleteData = async () => {
  try {
    const res = await request.post('/deviceInteraction/primitiveTask/findDayNotCompleteOutput', {
      "dayCount": 2
    })
    
    if (res.code === 200) {
      notCompleteData.value = res.data;
      console.log("加载数据完成，共" + res.data.length + "条");
      
      // 加载第一批数据
      loadNextBatch();
      
      // 开始滚动显示
      nextTick(() => {
        startScrollingWithBatches();
      });
    } else {
      console.error('请求当日产量数据失败:', res.message);
    }
  } catch (error) {
    console.error('请求当日产量数据失败:', error);
  }
}

// 加载下一批数据
const loadNextBatch = () => {
  const startIndex = currentPage * pageSize;
  let endIndex = startIndex + pageSize;
  
  // 如果到达数据末尾，则重新从头开始
  if (startIndex >= notCompleteData.value.length) {
    currentPage = 0;
    loadNextBatch();
    return;
  }
  
  // 更新当前显示的数据
  displayedData.value = notCompleteData.value.slice(
    startIndex, 
    Math.min(endIndex, notCompleteData.value.length)
  );
  currentPage++;
}

// 使用分批方式实现滚动
const startScrollingWithBatches = () => {
  const tableBody = document.querySelector('.el-table__body');
  const tableWrapper = document.querySelector('.el-table__body-wrapper');
  
  if (!tableBody || !tableWrapper) return;
  
  // 数据量较少时不滚动
  if (notCompleteData.value.length <= 5) {
    tableBody.style.animation = 'none';
    return;
  }
  
  // 清除之前的定时器
  if (scrollTimer) clearTimeout(scrollTimer);
  
  // 计算当前批次的总滚动时间
  const currentBatchRows = displayedData.value.length;
  if (currentBatchRows === 0) {
    loadNextBatch();
    scrollTimer = setTimeout(startScrollingWithBatches, 500);
    return;
  }
  
  
  // 每条数据的显示时间和总滚动时间
  const timePerRow = 0.8;
  const scrollTime = Math.max(currentBatchRows * timePerRow, 5);

  console.log('显示第' + currentPage + '批数据')
  
  // 删除旧样式并重置动画
  const oldStyle = document.getElementById('scroll-animation-style');
  if (oldStyle) document.head.removeChild(oldStyle);
  tableBody.style.animation = 'none';
  tableBody.offsetHeight; // 强制重排
  
  // 计算滚动距离
  const tableHeight = tableBody.offsetHeight;
  const wrapperHeight = tableWrapper.offsetHeight;
  const scrollDistance = tableHeight - wrapperHeight;
  
  if (scrollDistance > 0) {
    // 创建滚动动画样式
    const style = document.createElement('style');
    style.id = 'scroll-animation-style';
    style.innerHTML = `
      @keyframes scroll-animation {
        0% { transform: translateY(0); }
        5% { transform: translateY(0); }
        90% { transform: translateY(-${scrollDistance}px); }
        100% { transform: translateY(-${scrollDistance}px); }
      }
    `;
    document.head.appendChild(style);
    
    // 应用滚动动画
    tableBody.style.animation = `scroll-animation ${scrollTime}s linear`;
    
    // 滚动结束后加载下一批数据
    scrollTimer = setTimeout(() => {
      loadNextBatch();
      startScrollingWithBatches();
    }, scrollTime * 1000);
  } else {
    // 内容不足以滚动时，直接显示3秒后切换
    scrollTimer = setTimeout(() => {
      loadNextBatch();
      startScrollingWithBatches();
    }, 3000);
  }
}

// 修改图表初始化方法
const draw = (name, Option) => {
  const chart = echarts.init(document.getElementById(name))
  chart.setOption(Option)
  charts.push(chart)
}

// 更新能耗图表
const updateEnergyChart = () => {
  // 按日期排序并格式化日期
  const sortedData = [...energyData.value].sort((a, b) =>
    new Date(a.recordDate) - new Date(b.recordDate)
  ).map(item => {
    const date = new Date(item.recordDate);
    return {
      ...item,
      recordDate: `${date.getMonth() + 1}-${date.getDate().toString().padStart(2, '0')}`
    };
  });

  const energyoption = {
    title: {
      text: '能耗管理',
      textStyle: {
        fontSize: 25,
        fontWeight: 'bold',
        color: 'white' // 设置标题颜色为白色
      },
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985',
          fontSize: 16,  // 提示框文字大小
          color: 'white' // 设置提示框文字颜色为白色
        }
      }
    },
    legend: {
      data: ['能耗值'],
      textStyle: {
        fontSize: 25,
        fontWeight: 'bold',
        color: 'white' // 设置图例文字颜色为白色
      }
    },
    toolbox: {
      show: true,
      feature: {
        dataZoom: {
          yAxisIndex: 'none'
        },
        dataView: { readOnly: false },
        magicType: { type: ['line', 'bar'] },
        restore: {},
        saveAsImage: {}
      },
      iconStyle: {
        color: 'white' // 设置工具框图标颜色为白色
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '10%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: sortedData.map(item => item.recordDate),
        axisLabel: {
          fontSize: 20,
          interval: 'auto',    // 自动计算间隔
          margin: 15,          // 与轴线的距离
          formatter: (value) => {
            // 只显示月-日
            const date = new Date(value);
            return `${date.getMonth() + 1}-${date.getDate()}`;
          },
          color: 'white' // 设置 x 轴标签颜色为白色
        },
        nameTextStyle: {
          fontSize: 20,
          color: 'white' // 设置 x 轴名称颜色为白色
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        axisLabel: {
          fontSize: 20,   // y 轴标签文字大小
          color: 'white' // 设置 y 轴标签颜色为白色
        },
        nameTextStyle: {
          fontSize: 20,   // 坐标轴名称文字大小
          color: 'white' // 设置 y 轴名称颜色为白色
        }
      }
    ],
    series: [
      {
        name: '能耗值',
        type: 'line',
        areaStyle: {},
        label: {
          show: true,
          position: 'top',
          fontSize: 16,  // 数据标签文字大小
          formatter: '{c}',
          color: 'white' // 设置数据标签颜色为白色
        },
        data: sortedData.map(item => item.energyValue)
      }
    ]
  }

  draw('drawLineChart_day71', energyoption);
}

onMounted(() => {
  setScale()
  window.addEventListener('resize', handleResize)
  loadEnergyData();
  loadNotCompleteData();
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
  charts.forEach(chart => {
    chart.dispose()
  })
})

</script>

<template>
  <div class="dashboard-container" ref="dashboardRef">
    <div class="dashboard-content">
      <div style="font-weight: 800;font-size: 30px;height: 70px;line-height: 70px;border: 1px solid #ccc;text-align: center;">
        JOMOO配套工厂镜片车间生产看板
      </div>

      <div style="width:100% ;height: 880px;">
        <div style="width:100% ;height: 33.3%;border: 1px solid #ccc;">
          <div id="drawLineChart_day11" style="height: 100%;width: 30%;border: 1px solid #ccc;float: left;">日单达成率-片数</div>
          <div id="drawLineChart_day12" class="table-container">
            <div class="table-title">当日未完成量</div>
            <div class="table-scroll-wrapper">
              <el-table
                height="100%"
                :data="displayedData"
                :header-cell-style="{ background: '#052c52', color: 'white', textAlign: 'center' }"
                :cell-style="{ textAlign: 'center' }">
                <el-table-column prop="OrderNo" :label="$t('glassInfo.OrderNo')" />
                <el-table-column prop="notComplete" :label="$t('glassInfo.notCompleteCount')" />
                <el-table-column 
                  prop="area_sum" 
                  :label="$t('glassInfo.notCompleteArea')" 
                  :formatter="row => row.area_sum ? Number(row.area_sum).toFixed(2) : '0.00'" />
              </el-table>
            </div>
          </div>
          <div id="drawLineChart_day71" style="height: 100%;width: 40%;border: 1px solid #ccc;float: left;">能耗管理-按天显示（手输）
          </div>
        </div>
        <div style="width:100% ;height: 37.5%;border: 1px solid #ccc;">
          <div id="drawLineChart_day31" style="height: 100%;width: 100%;border: 1px solid #ccc;">两线生产对比-片数</div>
        </div>
        <div style="width:100% ;height: 37.5%;border: 1px solid #ccc;">
          <div id="drawLineChart_day51" style="height: 100%;width: 80%;border: 1px solid #ccc;float: left;">计划量-片数、平方</div>
          <div id="drawLineChart_day91" style="height: 100%;width: 20%;float: left;">
            <div style="font-weight: 700;font-size: 20px;height: 30px;line-height: 30px;text-align: center;border: 1px solid #ccc;">总计划量-片数、平方</div>
            <div id="textDay" style="font-size: 20px;height: 30px;margin-left: 20px;margin-top: 20px;">日期：2023-03-01  - 2023-03-01</div>
            <div id="textprice" style="font-size: 20px;height: 30px;margin-left: 20px;margin-top: 20px;">片数：25</div>
            <div id="textarea" style="font-size: 20px;height: 30px;margin-left: 20px;margin-top: 20px;">平方数：2999</div>
          </div>
        </div>
      </div>

      <!-- <div style="width:33% ;height: 880px;border: 1px solid #ccc;">
        <div id="drawLineChart_day1" style="height: 300px;width: 25%;border: 1px solid #ccc;float: left;"></div>
        <div id="drawLineChart_day2" style="height: 300px;width: 25%;border: 1px solid #ccc;float: left;"></div>
      </div> -->
    </div>
  </div>
</template>


<script>
export default {
  mounted() {
    this.drawLineChart('drawLineChart_day1', 1);
    this.drawLineChart('drawLineChart_day2', 1);
    this.drawLineChart('drawLineChart_day3', 1);
    this.drawLineChart('drawLineChart_day4', 1);
    this.drawLineChart('drawLineChart_day5', 1);
    //this.drawLineChart('drawLineChart_week', 1);
    this.drawBarchart('drawBarchart', 1);
    const OptionDayMode = {
      title: {
        text: '计划量看板',
        textStyle: {
          fontSize: 25,
          fontWeight: 'bold',
          color: 'white' // 设置标题颜色为白色
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          label: {
            fontSize: 16,
            color: 'white' // 设置提示框文字颜色为白色
          }
        }
      },
      legend: {
        textStyle: {
          fontSize: 20,
          fontWeight: 'bold',
          color: 'white' // 设置图例文字颜色为白色
        }
      },
      toolbox: {
        show: true,
        feature: {
          dataZoom: {
            yAxisIndex: 'none'
          },
          dataView: { readOnly: false },
          magicType: { type: ['line', 'bar'] },
          restore: {},
          saveAsImage: {}
        },
        iconStyle: {
          color: 'white' // 设置工具框图标颜色为白色
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '10%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        axisTick: { alignWithLabel: true },
        axisLabel: {
          fontSize: 20,
          interval: 'auto',
          margin: 15,
          formatter: (value, index) => {
            // 如果是日期格式
            if (value.includes('-')) {
              // 对第一个日期显示完整年月日
              if (index === 0) {
                return value;  // 返回完整日期 (例如: 2024-03-21)
              }
              // 其他日期只显示月-日
              return value.split('-').slice(1).join('-');  // (例如: 03-21)
            }
            return value;
          },
          color: 'white' // 设置 x 轴标签颜色为白色
        },
        nameTextStyle: {
          fontSize: 20,
          color: 'white' // 设置 x 轴名称颜色为白色
        }
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          fontSize: 20,
          formatter: '{value} ',
          color: 'white' // 设置 y 轴标签颜色为白色
        },
        nameTextStyle: {
          fontSize: 20,
          color: 'white' // 设置 y 轴名称颜色为白色
        }
      },
      series: [
        {
          name: '平方',
          type: 'line',
          barWidth: '40%',
          barGap: '10%',
          label: {
            show: true,
            fontSize: 16,
            formatter: (params) => {
              // 保留两位小数
              return params.value ? Number(params.value).toFixed(2) : '0.00';
            },
            color: 'white' // 设置数据标签颜色为白色
          },
          lineStyle: {
            color: 'blue'
          },
        },
        {
          name: '片数',
          type: 'line',
          barWidth: '40%',
          barGap: '10%',
          label: {
            show: true,
            fontSize: 16,
            color: 'white' // 设置数据标签颜色为白色
          }
        }
      ]
    };
    const OptionYear = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
          label: {
            fontSize: 16,
            color: 'white' // 设置提示框文字颜色为白色
          }
        }
      },
      legend: {
        textStyle: {
          fontSize: 20,
          fontWeight: 'bold',
          color: 'white' // 设置图例文字颜色为白色
        }
      },
      toolbox: {
        show: true,
        feature: {
          dataZoom: {
            yAxisIndex: 'none'
          },
          dataView: { readOnly: false },
          magicType: { type: ['line', 'bar'] },
          restore: {},
          saveAsImage: {}
        },
        iconStyle: {
          color: 'white' // 设置工具框图标颜色为白色
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '10%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          axisTick: { alignWithLabel: true },
          boundaryGap: '20%', 
          axisLabel: {
            fontSize: 20,
            interval: 'auto',
            margin: 15,
            formatter: (value, index) => {
              // 如果是日期格式
              if (value.includes('-')) {
                // 对第一个日期显示完整年月日
                if (index === 0) {
                  return value;  // 返回完整日期 (例如: 2024-03-21)
                }
                // 其他日期只显示月-日
                return value.split('-').slice(1).join('-');  // (例如: 03-21)
              }
              return value;
            },
            color: 'white' // 设置 x 轴标签颜色为白色
          },
          nameTextStyle: {
            fontSize: 20,
            color: 'white' // 设置 x 轴名称颜色为白色
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          axisLabel: {
            fontSize: 20,
            color: 'white' // 设置 y 轴标签颜色为白色
          },
          nameTextStyle: {
            fontSize: 20,
            color: 'white' // 设置 y 轴名称颜色为白色
          }
        }
      ],
      series: [
        {
          name: '计划量',
          type: 'bar',
          barWidth: '27%',
          barGap: '20%',
          label: {
            show: true,
            fontSize: 16,
            formatter: (params) => params.value,
            color: 'white',
            position: 'top'
          }
        },
        {
          name: '一线',
          type: 'bar',
          barWidth: '27%',
          barGap: '20%',  
          label: {
            show: true,
            fontSize: 16,
            formatter: (params) => params.value,
            color: 'white',
            position: 'top'
          },
        },
        {
          name: '二线',
          type: 'bar',
          barWidth: '27%',
          barGap: '10%',  
          label: {
            show: true,
            fontSize: 16,
            formatter: (params) => params.value,
            color: 'white',
            position: 'top'
          },
        }
      ]
    };
    // //请求当日产量
    // request.post('/deviceInteraction/primitiveTask/findDailyOutput',
    //   {
    //     "dayCount": 1
    //   }).then((res) => {
    //     if (res.code == 200) {
    //       const modeOptions = res.data;
    //       this.drawDay('drawLineChart_day11', OptionYear, modeOptions);
    //       // this.drawDay('drawLineChart_day31', OptionYear, modeOptions);
    //       // this.drawYear('drawLineChart_day51', OptionDayMode, modeOptions);
    //     } else {
    //       console.error('请求当日产量数据失败:', error);
    //     }
    //   });

    //请求日产量-月
    request.post('/deviceInteraction/primitiveTask/findDailyOutput',
      {
        "dayCount": 30
      }).then((res) => {
        if (res.code == 200) {
          const modeOptions = res.data;
          const modeOptions2 = [res.data[res.data.length - 1]];
          console.log(modeOptions2);
          //this.drawDay('drawLineChart_day11', OptionYear, modeOptions);
          this.drawDay('drawLineChart_day31', OptionYear, modeOptions);
          this.drawDay('drawLineChart_day11', OptionYear, modeOptions2);
          // this.drawYear('drawLineChart_day51', OptionDayMode, modeOptions);
        } else {
          console.error('请求日产量-月数据失败:', error);
        }
      });
    //请求计划量
    request.post('/deviceInteraction/primitiveTask/findPlannedQuantity',
      {
        "dayCount": 30
      }).then((res) => {
        if (res.code == 200) {
          const modeOptions = res.data;
          this.drawYear('drawLineChart_day51', OptionDayMode, modeOptions);
          let textDay = document.getElementById('textDay');
          let textprice = document.getElementById('textprice');
          let textarea = document.getElementById('textarea');

          let y_pingfang = res.data.map(v => { return v.area_sum });
          let y_pianshu = res.data.map(v => { return v.task_quantity_sum });
          let y_pingfang_sum = 0;
          let y_pianshu_sum = 0;
          for (let i = 0; i < y_pingfang.length; i++) {
            y_pingfang_sum += y_pingfang[i];
          }
          for (let i = 0; i < y_pianshu.length; i++) {
            y_pianshu_sum += y_pianshu[i];
          }

          textDay.innerHTML = "日期：" + res.data[0].CreateDate + " - " + res.data[res.data.length - 1].CreateDate;
          textprice.innerHTML = "片数：" + y_pianshu_sum;
          textarea.innerHTML = "平方数：" + Number(y_pingfang_sum).toFixed(2);
          // this.drawYear('drawLineChart_day51', OptionDayMode, modeOptions);
        } else {
          console.error('请求计划量-月数据失败:', error);
        }
      });

  },
  methods: {
    //方法
    drawLineChart(name, data) {
    draw(name, Option) {
      var myChart = echarts.init(document.getElementById(name));
      myChart.setOption({ // 绘制图表
        title: {
          text: '产量看板示例'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['计划产量', '实际产量']
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['1-01', '1-02', '1-03', '1-04', '1-05',
              '1-06', '1-07', '1-08', '1-09', '1-10',
              '1-11', '1-12', '1-13', '1-14', '1-15',
              '1-16', '1-17', '1-18', '1-19', '1-20',
              '1-21', '1-22', '1-23', '1-24', '1-25',
              '1-26', '1-27', '1-28', '1-29', '1-30', '1-31']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '计划产量',
            type: 'line',
            areaStyle: {},
            label: {
              show: true,
              position: 'top'
            },
            data: [120, 132, 101, 134, 90, 230, 210,
              120, 132, 101, 134, 90, 230, 210,
              120, 132, 101, 134, 90, 230, 210,
              120, 132, 101, 134, 90, 230, 210,
              120, 132, 101]
          },
          {
            name: '实际产量',
            type: 'line',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [100, 122, 101, 124, 90, 200, 180,
              100, 122, 101, 124, 90, 200, 180,
              100, 122, 101, 124, 90, 200, 180,
              100, 122, 101, 124, 90, 200, 180,
              100, 122, 101]
          }
        ]

      });
      myChart.setOption(Option);
    },
    drawBarchart(name, data) {
      var myChart = echarts.init(document.getElementById(name));
      myChart.setOption({ // 绘制图表
        title: {
          text: '总产量看板示例'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1000, name: '计划总片数' },
              { value: 900, name: '实际总片数' },
              { value: 10, name: '破损片数' }
            ]
            , label: {
              formatter: '{b}:{c}'
            }
          }
        ]
    drawDay(name, Option, data) {
      // console.log(data);
      //Option.title.text="日看板";
      //日看板- 计划量，一线完成，二线完成（片数）
      let x_data = data.map(v => { return v.date });
      let y_jihua = data.map(v => { return v.plan });
      let y_one = data.map(v => { return v.line1 });
      let y_two = data.map(v => { return v.line2 });
      Option.xAxis[0].data = x_data;
      Option.series[0].data = y_jihua;
      Option.series[1].data = y_one;
      Option.series[2].data = y_two;
      this.draw(name, Option);
    },
    drawYear(name, Option, data) {
      //计划量- 平方，片数
      let x_data = data.map(v => { return v.CreateDate });
      let y_pingfang = data.map(v => { return v.area_sum });
      let y_pianshu = data.map(v => { return v.task_quantity_sum });
      Option.xAxis.data = x_data;
      Option.series[0].data = y_pingfang;
      Option.series[1].data = y_pianshu;
      this.draw(name, Option);
    },
    requsstData() {


      });
    }
  }
}
</script>

<template>
  <div>
    <div style="font-size: 30px;height: 70px;line-height: 70px;border: 1px solid #ccc;text-align: center;">
      JOOMO镜片制造中心驾驶舱
    </div>
    <div style="margin-left: 20px;">
      <el-button type="primary" @click="drawPieChart">标准品</el-button>
      <el-button type="primary" @click="drawPieChart">定制品</el-button>
    </div>
    <div style="width:100% ;height: 880px;">
      <div style="width:33.3% ;height: 100%;border: 1px solid #ccc;float: left;">
        <div id="drawLineChart_day11" style="height: 50%;width: 100%;border: 1px solid #ccc;">日单达成率-片数</div>
        <div id="drawLineChart_day21" style="height: 50%;width: 100%;border: 1px solid #ccc;">月单达成率-片数</div>
      </div>
      <div style="width:33.3% ;height: 100%;border: 1px solid #ccc;float: left;">
        <div id="drawLineChart_day31" style="height: 50%;width: 100%;border: 1px solid #ccc;">日单达成率-平方</div>
        <div id="drawLineChart_day41" style="height: 50%;width: 100%;border: 1px solid #ccc;">月单达成率-平方</div>
      </div>
      <div style="width:33.3% ;height: 100%;border: 1px solid #ccc;float: left;">
        <div id="drawLineChart_day51" style="height: 33.3%;width: 100%;border: 1px solid #ccc;">合格率-显示当天</div>
        <div id="drawLineChart_day61" style="height: 33.3%;width: 100%;border: 1px solid #ccc;">设备稼动率</div>
        <div id="drawLineChart_day71" style="height: 33.3%;width: 100%;border: 1px solid #ccc;">能耗管理-按天显示（手输）</div>
      </div>
    </div>

    <!-- <div style="width:33% ;height: 880px;border: 1px solid #ccc;">
      <div id="drawLineChart_day1" style="height: 300px;width: 25%;border: 1px solid #ccc;float: left;"></div>
      <div id="drawLineChart_day2" style="height: 300px;width: 25%;border: 1px solid #ccc;float: left;"></div>
    </div> -->
  </div>
</template>
<style scoped>
.float{
.dashboard-container {
  position: absolute;
  width: 1920px; /* 设计稿宽度 */
  background: linear-gradient(to bottom, #001f3f, #0074d9d7);
  color: white;
  overflow: hidden;
  transition: transform 0.3s ease-out, margin 0.3s ease-out;
}

.dashboard-content {
  width: 100%;
  height: 100%;
}

:deep(.el-table__header th) {
  background: #052c52!important; 
  color: white!important;
  font-size: large;
}
:deep(.el-table) {
  background: #0b3d6f; 
  color: white;
}
:deep(.el-table__body tr) {
  background: #0b3d6f; 
  color: rgb(3, 160, 181);
  font-size: 23px;
}

/*0b3d6f*/
.float {
  float: left;
}
.style{
  width: 600px; 

.style {
  width: 600px;
  height: 400px;
  border: 1px solid #ccc;
}

.chart {
  height: 400px;
}

/* 确保图表容器内的echarts实例能够正确显示 */
:deep(.echarts) {
  width: 100% !important;
  height: 100% !important;
}

.table-container {
  height: 100%;
  width: 30%;
  border: 1px solid #ccc;
  float: left;
  display: flex;
  flex-direction: column;
}

.table-title {
  font-weight: bold;
  font-size: 20px;
  padding: 10px;
  text-align: center;
  background-color: #052c52;
  color: white;
}

.table-scroll-wrapper {
  flex: 1;
  overflow: hidden;
  position: relative;
}

/* 强制隐藏滚动条但允许滚动内容 */
:deep(.el-table__body-wrapper) {
  overflow: hidden !important;
}

/* 鼠标悬停时暂停动画 */
:deep(.el-table__body-wrapper:hover .el-table__body) {
  animation-play-state: paused !important;
}

/* 表格字体颜色*/
:deep(.el-table__body tr) {
  color: white;
}

:deep(.el-table__body tr:hover td) {
  background-color: #1a4d7f !important;
}
</style>