kanban-vue/src/views/warehouse/up1.vue

<template>
  <div id="up1">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2 jc-center pb-2">
        <span class="fs-xxl text mx-2 fw-b">已备料未上线数据</span>
      </div>
      <div class="d-flex jc-center body-box">
        <dv-scroll-board :config="config" ref="scroll-board" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {
  },
  data() {
    return {
      config: {
        header: [],//['线别','生产工单', '机型', '订单数', '备料状态', '计划投入', '计划完成', '计划工时', '加班工时', '提醒事项'],
        data: [],
        rowNum: 15, //表格行数
        headerHeight: 35,
        headerBGC: '#0f1325', //表头
        oddRowBGC: '#0f1325', //奇数行
        evenRowBGC: '#171c33', //偶数行
        columnWidth: [],//[130,190, 180, 100, 100, 100, 100, 100, 100, 160],
        align: []//['center','left','left','left','left','center','center','center','center']
      },
      timing: null,
    }
  },
  mounted() {
    this.refreshdata()
  },
  beforeDestroy() {
    clearInterval(this.timing)
  },
  methods: {
    refreshdata() {
      this.getdata(); //获取-数据
      this.timing = setInterval(() => {
        this.getdata(); //获取--数据
      }, 10000);
    },

    async getdata() {
      var caller = 'KB!WHData';
      await this.$http.get("kanban/datalist.action?caller=" + caller + "&_noc=1&page=1&pageSize=100", {
        params: {
          condition: "1=1" ,
        }
      }).then((result) => {
               let columns = result.data.columns;
               let headers = new Array();
               let columnWidths = new Array();
               let fieldnames = new Array();
               let aligns = new Array();
               for (let index = 0; index < columns.length; index++) {
                 const element = columns[index];
                 if(element.width>0) {
                   headers.push(element.text);
                   columnWidths.push(element.width);
                   fieldnames.push(element.dataIndex);
                   aligns.push('center');
                 }
               }
               this.config.header = headers;
               this.config.columnWidth = columnWidths;
               this.config.align = aligns;

                let dataList = JSON.parse(result.data.data);
                let resultList = new Array();
                for (let index = 0; index < dataList.length; index++) {
                  const element = dataList[index];
                  let item = new Array();
                  fieldnames.forEach(function (ele) {
                    // 遍历数组，对每个元素进行操作
                    item.push("<span  class='colorGrass fs-lg'>" + element[ele] + "</span>");
                  });

                 /* if (element.v_blstatus == '未领料') {  //98%
                    item.push("<span  class='colorRemind fs-lgmd'>" + element.v_blstatus + "</span>");
                  } else {
                    item.push("<span  class='colorGrass fs-lg'>" + element.v_blstatus + "</span>");
                  }*/
                  resultList.push(item);
                }
                this.config.data = resultList;
                /*const scrollBoard = this.$refs['scroll-board'];
                //刷新数据
                scrollBoard.updateRows(resultList);*/
                this.config = { ...this.config };
              }, (result) => {
                console.error(result)
              }
          );
    }
  }
};
</script>

<style lang="scss" class>
$box-height: 950px;
$box-width: 100%;
#up1 {
  padding: 13px;
  height: $box-height;
  width: $box-width;
  border-radius: 5px;
  .bg-color-black {
    border-radius: 10px;
    height: $box-height - 25px;
    padding: 5px;
  }

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

  .body-box {
    width: $box-width;

    .dv-scroll-board .header {
      font-size: 20px;
    }

    .dv-scroll-board {
      height: $box-height - 70px;
    }
  }

}
</style>