kanban-vue/src/views/makeprocess/bottom1.vue

<template>
  <div id="bottom2">
    <div class="up">
      <div class="bg-color-black">
        <div class="d-flex pt-1 pl-2 pb-2 jc-center">
          <span class="fs-xxl text mx-2 fw-b">订单执行进度</span>
        </div>
        <div class="body-box" ref="bodyBox">
          <dv-scroll-board
              :config="config"
              ref="scroll-board"
              :key="componentKey"
              style="width:100%;height:100%"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      config: {
        header: ['单号','业务员','产品编号','产品名称', '订单数','裁切','打点','SMT','无尘1','无尘2','组装1','组装2','样品','丝印','包装'],
        data: [],
        rowNum: 14,
        headerHeight: 45,
        headerBGC: 'rgba(15,19,37,0.27)',
        oddRowBGC: 'rgba(15,19,37,0.6)',
        evenRowBGC: 'rgba(23,28,51,0.51)',
        columnWidth: [150,110,220,170,110,110,110,110,110,110,110,110,110,110,110],
        align: ['center','center','center','center','center','center','center','center','center','center','center','center','center','center','center'],
        index: false,
        carousel: 'page',
        hoverPause: true,
        // 添加等待时间确保高度计算正确
        waitTime: 10000
      },
      timing: null,
      componentKey: 0
    }
  },
  mounted() {
    this.refreshdata();
    this.resizeHandler();
    window.addEventListener('resize', this.resizeHandler);
  },
  activated() {
    this.componentKey += 1;
    this.$nextTick(() => {
      this.resizeHandler();
    });
    this.refreshdata();
  },
  beforeDestroy() {
    clearInterval(this.timing);
    if (this.$refs['scroll-board'] && this.$refs['scroll-board'].destroy) {
      this.$refs['scroll-board'].destroy();
    }
    window.removeEventListener('resize', this.resizeHandler);
  },
  methods: {
    resizeHandler() {
      this.$nextTick(() => {
        if (this.$refs.bodyBox) {
          const height = this.$refs.bodyBox.clientHeight - 40; // 减去一些边距
          this.config = {
            ...this.config,
            height: height + 'px'
          };
          this.componentKey += 1; // 强制重新渲染以应用新高度
        }
      });
    },
    refreshdata() {
      this.getdata();
      this.timing = setInterval(() => {
        this.getdata();
      }, 10000);
    },
    async getdata() {
      var caller = 'KB!MakeProcess';
      try {
        const result = await this.$http.get("kanban/datalist.action?caller=" + caller + "&_noc=1&page=1&pageSize=100", {
          params: { condition: "1=1" }
        });

        const dataList = JSON.parse(result.data.data);
        const resultList = dataList.map(element => {
          const item = [];
          const baseClass = 'cell-text';

          item.push(`<span class="${baseClass} colorY">${element.v_salecode}</span>`);
          item.push(`<span class="${baseClass} colorY">${element.sa_seller}</span>`);
          item.push(`<span class="${baseClass} colorY">${element.v_prodcode}</span>`);
          item.push(`<span class="${baseClass} colorY">${element.v_prdetail}</span>`);
          item.push(`<span class="${baseClass} colorY">${element.v_qty}</span>`);

          const processes = ['裁切', '打点', 'smt', '无尘01', '无尘02', '组装01', '组装02', '样品', '丝印', '包装'];
          processes.forEach(process => {
            const val = element[process];
            if(element.v_qty == val) {
              item.push(`<span class="${baseClass} colorGrass">${val}</span>`);
            } else if(element.v_qty > val && val > 0) {
              item.push(`<span class="${baseClass} colorRemind">${val}</span>`);
            } else {
              item.push(`<span class="${baseClass} colorY">${val}</span>`);
            }
          });

          return item;
        });

        this.$nextTick(() => {
          const scrollBoard = this.$refs['scroll-board'];
          if (scrollBoard) {
            scrollBoard.updateRows(resultList);
            if (scrollBoard.resize) {
              scrollBoard.resize();
            }
          }
        });
      } catch (error) {
        console.error(error);
      }
    }
  }
};
</script>

<style lang="scss">
$box-height: 950px;
$box-width: 100%;

#bottom2 {
  padding: 10px;
  height: $box-height;
  width: $box-width;
  border-radius: 5px;

  .up {
    height: 100%;

    .bg-color-black {
      border-radius: 10px;
      height: 100%;
      padding: 5px;
      display: flex;
      flex-direction: column;
    }

    .text {
      color: #c3cbde;
      font-size: 25px;
    }

    .body-box {
      flex: 1;
      width: $box-width;
      height: $box-height; // 修复flex布局中的高度问题
      overflow: hidden;
      position: relative;

      .dv-scroll-board {
        width: 100% !important;
        height: 100% !important;

        .header {
          font-size: 28px !important;

          .header-item {
            line-height: 45px !important;
            padding: 0 5px !important;
          }
        }

        .rows {
          .row-item {
            line-height: 45px !important;
            margin: 0 !important;
            padding: 0 !important;

            span.cell-text {
              display: inline-block;
              vertical-align: middle;
              font-size: 28px !important;
              line-height: 1.5 !important;
              padding: 0 5px !important;
            }
          }
        }
      }
    }
  }
}
</style>