更新看板

huang

2025-04-03 42d333112ed74032fbf8f2cd60d3cc8f3b4a0a08

更新看板

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

@@ -44,9 +44,6 @@
// 存储所有图表实例
const charts = []

const energyData = ref([])
const notCompleteData = ref([])

// 获取能耗数据
const loadEnergyData = async () => {
  try {
@@ -63,90 +60,130 @@
  }
}


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

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

// 按数据条数设置滚动时间，确保完整滚动
const startScrollingImmediately = () => {
  const tableBody = document.querySelector('.el-table__body');
  const tableWrapper = document.querySelector('.el-table__body-wrapper');
// 加载下一批数据
const loadNextBatch = () => {
  const startIndex = currentPage * pageSize;
  let endIndex = startIndex + pageSize;
  
  if (!tableBody || !tableWrapper) {
    console.log("找不到表格元素");
  // 如果到达数据末尾，则重新从头开始
  if (startIndex >= notCompleteData.value.length) {
    currentPage = 0;
    loadNextBatch();
    return;
  }
  
  // 只有当数据超过5条时才滚动
  if (notCompleteData.value.length > 5) {
    // console.log(`数据量(${notCompleteData.value.length}条)超过5条，开始滚动`);
    
    // 每条数据的显示时间（秒）
    const timePerRow = 0.8; // 每条数据停留0.4秒
    
    // 计算总滚动时间
    const totalRows = notCompleteData.value.length;
    const scrollTime = Math.max(totalRows * timePerRow, 5); // 至少5秒
    
    // console.log(`数据量: ${totalRows}条, 每条${timePerRow}秒, 总滚动时间: ${scrollTime.toFixed(1)}秒`);
    
    // 先删除可能存在的旧样式
    const oldStyle = document.getElementById('scroll-animation-style');
    if (oldStyle) {
      document.head.removeChild(oldStyle);
  // 更新当前显示的数据
  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;
    
    // console.log(`表格高度: ${tableHeight}px, 容器高度: ${wrapperHeight}px, 滚动距离: ${scrollDistance}px`);
    
    // 创建新样式，确保滚动到最后一行
  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); } /* 结束时停留时间 */
        5% { transform: translateY(0); }
        90% { transform: translateY(-${scrollDistance}px); }
        100% { transform: translateY(-${scrollDistance}px); }
      }
    `;
    document.head.appendChild(style);
    
    // 直接设置内联样式，先清除再应用
    tableBody.style.animation = 'none';
    tableBody.offsetHeight; // 强制重排
    tableBody.style.animation = `scroll-animation ${scrollTime}s linear infinite`;
    // 应用滚动动画
    tableBody.style.animation = `scroll-animation ${scrollTime}s linear`;
    
    console.log(`滚动动画已设置，每条数据${timePerRow}秒，总计${scrollTime.toFixed(1)}秒/轮，滚动距离${scrollDistance}px`);
    // 滚动结束后加载下一批数据
    scrollTimer = setTimeout(() => {
      loadNextBatch();
      startScrollingWithBatches();
    }, scrollTime * 1000);
  } else {
    console.log(`数据量(${notCompleteData.value.length}条)不足5条，不需要滚动`);
    // 停止滚动
    tableBody.style.animation = 'none';
    // 内容不足以滚动时，直接显示3秒后切换
    scrollTimer = setTimeout(() => {
      loadNextBatch();
      startScrollingWithBatches();
    }, 3000);
  }
}

@@ -305,10 +342,10 @@
            <div class="table-scroll-wrapper">
              <el-table
                height="100%"
                :data="notCompleteData"
                :data="displayedData"
                :header-cell-style="{ background: '#052c52', color: 'white', textAlign: 'center' }"
                :cell-style="{ textAlign: 'center' }">
                <el-table-column prop="scanId" :label="$t('glassInfo.scanId')" />
                <el-table-column prop="OrderNo" :label="$t('glassInfo.OrderNo')" />
                <el-table-column prop="notComplete" :label="$t('glassInfo.notCompleteCount')" />
                <el-table-column 
                  prop="area_sum" 
@@ -395,6 +432,8 @@
      xAxis: {
        type: 'category',
        boundaryGap: false,
        axisTick: { alignWithLabel: true },
        boundaryGap: true,
        axisLabel: {
          fontSize: 20,
          interval: 'auto',
@@ -434,6 +473,8 @@
        {
          name: '平方',
          type: 'line',
          barWidth: '40%',
          barGap: '10%',
          label: {
            show: true,
            fontSize: 16,
@@ -450,6 +491,8 @@
        {
          name: '片数',
          type: 'line',
          barWidth: '40%',
          barGap: '10%',
          label: {
            show: true,
            fontSize: 16,
@@ -500,6 +543,8 @@
      xAxis: [
        {
          type: 'category',
          axisTick: { alignWithLabel: true },
          boundaryGap: true,
          axisLabel: {
            fontSize: 20,
            interval: 'auto',
@@ -541,7 +586,8 @@
        {
          name: '计划量',
          type: 'bar',
          barWidth: '40%',  // 相同宽度
          barWidth: '30%',
          barGap: '10%',
          label: {
            show: true,
            fontSize: 16,
@@ -553,7 +599,8 @@
        {
          name: '一线',
          type: 'bar',
          barWidth: '40%',
          barWidth: '30%',
          barGap: '10%',
          label: {
            show: true,
            fontSize: 16,
@@ -565,7 +612,8 @@
        {
          name: '二线',
          type: 'bar',
          barWidth: '40%',
          barWidth: '30%',
          barGap: '10%',
          label: {
            show: true,
            fontSize: 16,
@@ -576,20 +624,20 @@
        }
      ]
    };
    //请求当日产量
    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": 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',
@@ -598,8 +646,11 @@
      }).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);