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

<template>
  <div id="right" >
    <div class="bg-color-black">
      <div class="plan-header">
        <div class="d-flex pt-1 pl-2 jc-center">
          <span class="text mx-2 fw-b">各车间达成进度</span>
        </div>
      </div>
      <div class="plan-body">
        <dv-scroll-board
            :config="config"
            ref="scrollBoard"
            class="scroll-board"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ProductionPlan',
  data() {
    return {
      config: {
        header: ['车间', '计划数', '完成数', '达成比例%'],
        data: [],
        rowNum: 20,
        headerHeight: 35,
        headerBGC: 'rgba(15,19,37,0.1)',
        oddRowBGC: 'rgba(15,19,37,0.1)',
        evenRowBGC: 'rgba(23,28,51,0.1)',
        columnWidth: [200, 190, 150],
        align: ['center', 'center', 'center', 'center']
      },
      refreshInterval: null,
      apiCaller: 'KB!ALLWC!PROCESS'
    }
  },
  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 = 'colorGrass';
      return [
        this.createCell(item.v_wccode, rowClass),
        this.createCell(item.v_planqty, rowClass),
        this.createCell(item.v_madeqty, rowClass),
        this.createCell(item.v_rate, rowClass)
      ]
    },

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

<style lang="scss" scoped>
$box-height: 950px;
$box-width: 944px;
#right {
  padding: 13px;
  height: $box-height;
  width: $box-width;
  border-radius: 5px;
  .bg-color-black {
    height: $box-height - 25px;
    border-radius: 10px;
    padding: 5px;
    display: flex;
    flex-direction: column;
  }

  .plan-header {
    .text {
      color: #c3cbde;
      font-size: 25px;
    }
    .header-content {
      border-radius: 10px;
      padding: 5px;
      background-color: rgba(15, 19, 37, 0.1);

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

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

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

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

</style>