VUE-列表展示数据（vuetify列表）

<script>
import axios from 'axios';

export default {
  name: 'BarChart',
  data() {
    return {
      chartData: [], // 存储从后端获取的数据
      refreshInterval: null, // 存储定时器
    };
  },
  mounted() {
    this.fetchData(); // 初始加载数据
    this.startAutoRefresh(); // 启动定时刷新
  },
  beforeDestroy() {
    this.stopAutoRefresh(); // 清除定时器
  },
  methods: {
    // 启动定时刷新
    startAutoRefresh() {
      this.refreshInterval = setInterval(() => {
        this.fetchData();
      }, 5000); // 每 5 秒刷新一次
    },
    // 停止定时刷新
    stopAutoRefresh() {
      if (this.refreshInterval) {
        clearInterval(this.refreshInterval); // 清除定时器
        this.refreshInterval = null;
      }
    },
    // 获取数据
    async fetchData() {
      try {
        const response = await axios.get('http://127.0.0.1:5000/api/getExcelData'); // 替换为你的后端API地址
        if (response.data && response.data.length > 0) {
          this.chartData = response.data;
        } else {
          console.warn('No data received from the API.');
        }
      } catch (error) {
        console.error('Error fetching data:', error);
        this.$message.error('Failed to load data. Please try again later.');
      }
    },
  },
};
</script>