lanju-front/src/views/cs/index5/rankingBoard.vue

<template>
  <div id="ranking-board">
    <div class="ranking-board-title">巡检上报问题数量 TOP8</div>
    <dv-scroll-ranking-board :config="config" />
  </div>
</template>

<script>
import moment from "moment";
import {getworkFaultDesc} from "../../../api/kanban/equipment";

export default {
  name: 'RankingBoard',
  data () {
    return {
      config: {
        data: [],
        rowNum: 9
      }
    }
  },
  methods: {
    async getdatalist() {
      try {
        const response = await getworkFaultDesc({ poolName: "ds_1000" });

        // 成功获取数据时的处理
        if (response?.data?.length) {
          // 步骤1：数据格式转换
          const processedData = response.data.map(item => ({
            name: item.name || '未知分类',  // 处理空名称
            value: Number(item.value) || 0 // 确保数值类型
          })).filter(item => item.value > 0); // 过滤零值数据

          // 步骤2：触发响应式更新（关键！）
          this.config = {
            ...this.config, // 保留其他配置项
            data: processedData // 降序排列
          };
        } else {
          // 空数据兜底处理
          this.config.data = [{ name: '暂无数据', value: 0 }];
        }
      } catch (error) {
        console.error('数据获取失败:', error);
        // 错误状态显示（保持数据结构一致）
        this.config.data = [{ name: '数据异常', value: 0 }];
      } finally {

      }
    }
  },
  mounted() {
    this.getdatalist();
    // 添加定时刷新（可选）
    this.timer = setInterval(() => {
      this.getdatalist();
    }, 60000); // 60秒刷新
  },
  beforeDestroy() {
    clearInterval(this.timer); // 清除定时器
  }
}
</script>

<style lang="less">
#ranking-board {
  width: 20%;
  box-shadow: 0 0 3px blue;
  display: flex;
  flex-direction: column;
  background-color: rgba(6, 30, 93, 0.5);
  border-top: 2px solid rgba(1, 153, 209, .5);
  box-sizing: border-box;
  padding: 0px 30px;

  .ranking-board-title {
    font-weight: bold;
    height: 50px;
    display: flex;
    align-items: center;
    font-size: 20px;
  }

  .dv-scroll-ranking-board {
    flex: 1;
  }
}
</style>