<template>
  <div>
    <Chart :cdata="cdata" />
  </div>
</template>

<script>
import { getDeviceUsageStats } from '@/api/data'
import Chart from './chart.vue'
export default {
  data () {
    return {
      cdata: {
        category: [],
        lineData: [],
        barData: [],
        rateData: []
      }
    };
  },
  components: {
    Chart,
  },
  mounted () {
    this.setData();
  },
  methods: {
    setData () {
      // 调用设备使用统计接口
      getDeviceUsageStats().then(response => {
        console.log('接口响应:', response);
        if (response.code === 200) {
          console.log('实际数据:', response.data);
          this.cdata = response.data;
        } else {
          console.error('获取设备使用统计失败:', response.msg);
          this.setDefaultData();
        }
      }).catch(error => {
        console.error('获取设备使用统计失败', error);
        this.setDefaultData();
      });
    },
    setDefaultData () {
      // 设置一些默认数据避免页面空白
      this.cdata = {
        category: ["设备1", "设备2", "设备3", "设备4", "设备5"],
        lineData: [1000, 1200, 800, 1500, 900],
        barData: [600, 800, 400, 1000, 500],
        rateData: [0.60, 0.67, 0.50, 0.67, 0.56]
      };
    },
  }
};
</script>

<style lang="scss" scoped>
</style>