bigscreen/src/views/centerRight2/index.vue

<template>
  <div class="centerRight2">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <span>
          <i class="iconfont icon-vector" />
        </span>
        <div class="d-flex">
          <span class="fs-xl text mx-2">任务完成排行榜</span>
        </div>
      </div>
      <div class="d-flex mt-1 jc-center body-box">
        <dv-scroll-board
          ref="scrollBoard"
          class="dv-scr-board"
          :config="config"
        />
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      config: {
        header: ["托盘号","批次号", "起始位置", "终止位置", "任务状态"],
        data: [
          ["数据加载中..."," ", " ", " ", " "],
          [" ", " ", " ", " "," "],
          [" ", " ", " ", " "," "],
          [" ", " ", " ", " "," "],
          [" ", " ", " ", " "," "],
          [" ", " ", " ", " "," "],
          [" ", " ", " ", " "," "],

        ],
        rowNum: 7,
        headerHeight: 35,
        headerBGC: "#0f1325",
        oddRowBGC: "#0f1325",
        evenRowBGC: "#171c33",
        index: true,
        columnWidth: [5,75,150],
        align: ["center", "center", "center", "center", "center"],
      },
      intervalId: null,
      token: "PDA1",
    };
  },
  mounted() {
    this.fetchData();
    // 每分钟刷新一次数据
    this.intervalId = setInterval(this.fetchData, 60000);
  },
  beforeUnmount() {
    // 清除定时器
    clearInterval(this.intervalId);
  },
  methods: {
    async fetchData() {
      try {
        const headers = new Headers({
          Accept: "application/json, text/plain, */*",
          token: this.token,
        });

        const url = "http://192.168.18.200:8008/container/wcs_task/";
        // const url = "http://192.168.18.200:8008/container/wcs_task/";
        const response = await fetch(url, {
          method: "GET",
          headers: headers,
        });

        if (!response.ok) {
          throw new Error(
            `网络错误: ${response.status} ${response.statusText}`
          );
        }

        const jsonData = await response.json();
        console.log("数据获取成功:", jsonData);

        const tableData = jsonData.results.map((item) => [
          item.container,
          item.batch_code,
          item.current_location,
          item.target_location,
          item.message,
        ]);
        // 应用平台主题色
        const statusColors = {
          进行中: "#ffb638", // 橘黄色
          任务已完成: "#2ed47a", // 绿色
          等待出库: "#3c9aff", // 蓝色
        };

        while (tableData.length < 7) {
          tableData.push(["-", "-", "-", "-", "-"]);
        }
        const formattedData = tableData.map((row) => {
          const status = row[4];
          return [
            `<span style="color: #fff">${row[0]}</span>`,
            `<span style="color: #c0e4ff">${row[1]}</span>`,
            `<span style="color: #c0e4ff">${row[2]}</span>`,
            `<span style="color: #c0e4ff">${row[3]}</span>`,
            `<span style="color: ${
              statusColors[status] || "#fff"
            }; font-weight: 500">${status}</span>`,
          ];
        });
        this.config.data =
          tableData.length > 0 ? formattedData : [["暂无数据", "", "", ""]];
        console.log("数据处理成功:", this.config.data);

        this.$refs["scrollBoard"].updateRows(this.config.data);
      } catch (error) {
        console.error("数据获取失败:", error);
        const errorMessage = `加载失败: ${error.message}`;
        this.config.data = [
          [errorMessage, "", "", ""],
          ["请检查网络连接", "", "", ""],
          ["或服务地址是否正确", "", "", ""],
          ["Token: " + this.token, "", "", ""],
        ];
      }
    },
  },
};
</script>

<style lang="scss" scoped>
$box-height: 410px;
$box-width: 100%;
.centerRight2 {
  padding: 16px;
  padding-top: 20px;
  height: $box-height;
  width: $box-width;
  border-radius: 5px;
  .bg-color-black {
    height: $box-height - 30px;
    border-radius: 10px;
  }
  .text {
    color: #c3cbde;
  }
  .body-box {
    border-radius: 10px;
    overflow: hidden;
    .dv-scr-board {
      width: 98%;
      height: 340px;
    }
  }
}
</style>