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

<template>
  <div id="production-plan" class="plan-container">
    <div class="plan-header">
      <div class="header-content">
        <span class="header-title">产线计划</span>
      </div>
    </div>
    <div class="plan-body">
      <dv-scroll-board
          :config="config"
          ref="scrollBoard"
          class="scroll-board"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'ProductionPlan',
  data() {
    return {
      config: {
        header: ['线别', '销售工单', '业务员', '产品名称', '订单数', '备料状态', '计划完成数量', '完成数量', '完成进度', '提醒事项', '异常事项'],
        data: [],
        rowNum: 9,
        headerHeight: 35,
        headerBGC: 'rgba(15,19,37,0.1)',
        oddRowBGC: 'rgba(15,19,37,0.1)',
        evenRowBGC: 'rgba(23,28,51,0.1)',
        columnWidth: [130, 190, 110, 200, 120, 140, 180, 180, 160, 210, 180],
        align: ['center', 'center', 'left', 'left', 'left', 'left', 'center', 'center', 'center', 'center', 'center']
      },
      refreshInterval: null,
      apiCaller: 'KB!ZZDayPlan'
    }
  },
  mounted() {
    this.initDataRefresh()
  },
  beforeDestroy() {
    this.clearRefreshInterval()
  },
  methods: {
    initDataRefresh() {
      this.fetchData()
      this.refreshInterval = setInterval(this.fetchData, 10000)
    },

    clearRefreshInterval() {
      if (this.refreshInterval) {
        clearInterval(this.refreshInterval)
        this.refreshInterval = null
      }
    },

    async fetchData() {
      try {
        const response = await this.$http.get("kanban/datalist.action", {
          params: {
            caller: this.apiCaller,
            _noc: 1,
            page: 1,
            pageSize: 100,
            condition: "1=1"
          }
        })

        this.processResponseData(response.data.data)
      } catch (error) {
        console.error('数据获取失败:', error)
      }
    },

    processResponseData(rawData) {
      try {
        const dataList = JSON.parse(rawData)
        const formattedData = dataList.map(item => this.formatRowData(item))

        this.$refs.scrollBoard.updateRows(formattedData)
      } catch (error) {
        console.error('数据处理失败:', error)
      }
    },
    formatRowData(item) {
      const rowClass = item.v_remark1 && item.v_remark1 !== "" ? 'colorRed' :
          item.v_blstatus == '加工中' ? 'colorRemind' : item.v_blstatus == '已完成'?'colorGrass':'colorY';
      return [
        this.createCell(item.v_licode, rowClass),
        this.createCell(item.v_sacode, rowClass),
        this.createCell(item.v_seller, rowClass),
        this.createCell(item.v_jitype, rowClass),
        this.createCell(item.v_qty, rowClass),
        this.createCell(item.v_blstatus, rowClass),
        this.createCell(item.v_planoutqty, rowClass),
        this.createCell(item.v_madeqty, rowClass),
        this.createCell(item.v_madejd, rowClass),
        this.createCell(item.v_remark, rowClass),
        this.createCell(item.v_remark1, rowClass),
        this.createCell(item.v_yc, rowClass)
      ]
    },

    createCell(content, className) {
      return `<span class="${className} fs-xxl">${content || ''}</span>`
    }
  }
}
</script>

<style lang="scss" scoped>
.plan-container {
  padding: 13px;
  height: 520px;
  width: 100%;
  border-radius: 5px;

  .plan-header {
    .header-content {
      border-radius: 10px;
      padding: 5px;
      background-color: rgba(15, 19, 37, 0.1);

      .header-title {
        color: #c3cbde;
        font-size: 25px;
        font-weight: bold;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 5px 10px;
      }
    }
  }

  .plan-body {
    margin-top: 5px;

    .scroll-board {
      height: 470px;
      border-radius: 10px;

      ::v-deep .header {
        font-size: 25px;
      }
    }
  }
}

// 颜色类可以放在全局样式中
.colorRed {
  color: #ff4d4f;
}

.colorRemind {
  color: #faad14;
}

.colorGrass {
  color: #52c41a;
}

.fs-xxl {
  font-size: 16px;
}
</style>