修改看板表格加滚动，适应大屏

huang

2025-03-25 3a6fca8a9ef505301907217ac9d98866fb5eeb3c

修改看板表格加滚动，适应大屏

 UI-Project/src/layout/MainErpView.vue

@@ -234,9 +234,9 @@
}

#main {
  width: 99%;
  width: 100%;
  float: right;
  height: 99%;
  height: 100%;
  background-color: #fff;
}


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

@@ -1,57 +1,101 @@
<template>
  <div class="dashboard-container">
    <div style="font-weight: 800;font-size: 30px;height: 70px;line-height: 70px;border: 1px solid #ccc;text-align: center;">
      JOOMO配套工厂镜片车间生产看板
    </div>
  <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" style="height: 100%;width: 30%;max-height: 260px;border: 1px solid #ccc;float: left;">
          <!-- 表格内容详情 -->
          <div style="font-weight: 700;font-size: 20px;height: 30px;line-height: 30px;border: 1px solid #ccc;text-align: center;">当日未完成量</div>
          <el-table
            :data="notCompleteData" stripe
            height="260px"
            :header-cell-style="{ background: '#F2F3F5 ', color: '#1D2129', textAlign: 'center' }"
            :cell-style="{ textAlign: 'center' }">
            <!-- <el-table-column type="selection" min-width="30" /> -->
            <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) => {
              // 保留两位小数
              return row.area_sum ? Number(row.area_sum).toFixed(2) : '0.00';
            }" />
          </el-table>
      <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 id="drawLineChart_day71" style="height: 100%;width: 40%;border: 1px solid #ccc;float: left;">能耗管理-按天显示（手输）
        <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:100% ;height: 33.3%;border: 1px solid #ccc;">
        <div id="drawLineChart_day31" style="height: 100%;width: 100%;border: 1px solid #ccc;">两线生产对比-片数</div>
      </div>
      <div style="width:100% ;height: 33.3%;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 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 } from 'vue'
import { ref, onMounted, onUnmounted } 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 energyData = ref([])
const notCompleteData = ref([])
@@ -80,26 +124,18 @@
    }).then((res) => {
      if (res.code == 200) {
        notCompleteData.value = res.data;
        console.log("未完成" + res.data + "1");
        console.log("未完成" + res.data + "数量" + res.data.length);
      } else {
        console.error('请求当日产量数据失败:', error);
      }
    });
}

// 修改图表初始化方法
const draw = (name, Option) => {
  var myChart = echarts.init(document.getElementById(name));
  myChart.setOption(Option);

  // 添加窗口大小变化的监听
  window.addEventListener('resize', () => {
    myChart.resize();
  });
}

const drawDay = (name, Option) => {
  Option.title.text = "能耗管理";
  draw(name, Option);
  const chart = echarts.init(document.getElementById(name))
  chart.setOption(Option)
  charts.push(chart)
}

// 更新能耗图表
@@ -216,13 +252,23 @@
    ]
  }

  drawDay('drawLineChart_day71', energyoption);
  draw('drawLineChart_day71', energyoption);
}

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

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

</script>
<script>
export default {
@@ -521,7 +567,7 @@
      myChart.setOption(Option);
    },
    drawDay(name, Option, data) {
      console.log(data);
      // console.log(data);
      //Option.title.text="日看板";
      //日看板- 计划量，一线完成，二线完成（片数）
      let x_data = data.map(v => { return v.date });
@@ -552,11 +598,18 @@
</script>

<style scoped>

.dashboard-container {
  /* background-image: url('https://img.shetu66.com/2023/04/10/1681118607295673.jpg'); */
  background: linear-gradient(to bottom, #001f3f, #0074d9d7); /*上半部分蓝黑色，下半部分浅蓝色 */
  color: white; /* 设置整体文字颜色为白色 */
  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) {
@@ -570,8 +623,8 @@
}
:deep(.el-table__body tr) {
  background: #0b3d6f; 
  color: rgb(7, 161, 185);
  font-size: large;
  color: rgb(3, 160, 181);
  font-size: 23px;
}

/*0b3d6f*/
@@ -589,16 +642,69 @@
  height: 400px;
}

/* 设置表格文字颜色为白色 */
.el-table {
/* 确保图表容器内的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: 700;
  font-size: 20px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-bottom: 1px solid #ccc;
}

.table-scroll-wrapper {
  flex: 1;
  overflow: auto;
  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;
}

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

.el-table thead th {
  color: white;
}

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