修改看板（3.26）

huang

2025-03-26 d74a551c40fb2fb0bbe388302899a72f3d7f893f

修改看板（3.26）

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

@@ -1,58 +1,5 @@
<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
                ref="scrollTable"
                height="100%"
                :data="notCompleteData"
                :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="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 setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import * as echarts from 'echarts'
import request from '@/utils/request'

@@ -123,12 +70,84 @@
      "dayCount": 2
    }).then((res) => {
      if (res.code == 200) {
        // 直接加载所有数据
        notCompleteData.value = res.data;
        console.log("未完成" + res.data + "数量" + res.data.length);
        console.log("加载数据完成，共" + res.data.length + "条");
        
        // 直接开始滚动
        nextTick(() => {
          startScrollingImmediately();
        });
      } else {
        console.error('请求当日产量数据失败:', error);
      }
    });
}

// 按数据条数设置滚动时间，确保完整滚动
const startScrollingImmediately = () => {
  const tableBody = document.querySelector('.el-table__body');
  const tableWrapper = document.querySelector('.el-table__body-wrapper');
  
  if (!tableBody || !tableWrapper) {
    console.log("找不到表格元素");
    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);
    }
    
    // 计算表格实际高度和容器高度
    const tableHeight = tableBody.offsetHeight;
    const wrapperHeight = tableWrapper.offsetHeight;
    
    // 计算实际需要滚动的距离
    const scrollDistance = tableHeight - wrapperHeight;
    
    // console.log(`表格高度: ${tableHeight}px, 容器高度: ${wrapperHeight}px, 滚动距离: ${scrollDistance}px`);
    
    // 创建新样式，确保滚动到最后一行
    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 = 'none';
    tableBody.offsetHeight; // 强制重排
    tableBody.style.animation = `scroll-animation ${scrollTime}s linear infinite`;
    
    console.log(`滚动动画已设置，每条数据${timePerRow}秒，总计${scrollTime.toFixed(1)}秒/轮，滚动距离${scrollDistance}px`);
  } else {
    console.log(`数据量(${notCompleteData.value.length}条)不足5条，不需要滚动`);
    // 停止滚动
    tableBody.style.animation = 'none';
  }
}

// 修改图表初始化方法
@@ -270,6 +289,60 @@
})

</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="notCompleteData"
                :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="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() {
@@ -468,33 +541,37 @@
        {
          name: '计划量',
          type: 'bar',
          barWidth: '40%',  // 相同宽度
          label: {
            show: true,
            fontSize: 16,
            formatter: (params) => params.value + '片',
            color: 'white' // 设置数据标签颜色为白色
            formatter: (params) => params.value,
            color: 'white',
            position: 'top'
          }
        },
        {
          name: '一线',
          type: 'bar',
          stack: 'Search Engine',
          barWidth: '40%',
          label: {
            show: true,
            fontSize: 16,
            formatter: (params) => params.value + '片',
            color: 'white' // 设置数据标签颜色为白色
            formatter: (params) => params.value,
            color: 'white',
            position: 'top'
          },
        },
        {
          name: '二线',
          type: 'bar',
          stack: 'Search Engine',
          barWidth: '40%',
          label: {
            show: true,
            fontSize: 16,
            formatter: (params) => params.value + '片',
            color: 'white' // 设置数据标签颜色为白色
            formatter: (params) => params.value,
            color: 'white',
            position: 'top'
          },
        }
      ]
@@ -658,45 +735,28 @@
}

.table-title {
  font-weight: 700;
  font-weight: bold;
  font-size: 20px;
  height: 30px;
  line-height: 30px;
  padding: 10px;
  text-align: center;
  border-bottom: 1px solid #ccc;
  background-color: #052c52;
  color: white;
}

.table-scroll-wrapper {
  flex: 1;
  overflow: auto;
  overflow: hidden;
  position: relative;
  scrollbar-width: none;
}

:deep(.el-table) {
  background: transparent;
}

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

:deep(.el-table__body) {
  animation: scroll-up 20s linear infinite;
}

@keyframes scroll-up {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%);
  }
}

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

/* 表格字体颜色*/
@@ -707,4 +767,4 @@
:deep(.el-table__body tr:hover > td) {
  background-color: #1a4d7f !important;
}
</style>    
</style>