<template>
  <div class="overview">
    <el-row :gutter="20">
      <el-col
        v-for="(deviceType, index) in deviceTypeList"
        :key="index"
        :span="6"
      >
        <el-card style="margin-bottom: 20px">
          <div :id="'donut' + deviceType.id" style="height: 360px" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  getDeviceTypeStatistics
} from '@/api/equipment-management/equipment-model'
import { Donut } from '@antv/g2plot'

export default {
  name: 'Overview',
  components: {},
  data() {
    return {
      deviceTypeList: []
    }
  },
  created() {
    getDeviceTypeStatistics()
      .then(res => {
        this.deviceTypeList = res.data
        this.deviceTypeList.forEach(item => {
          const data = []
          data.push({ type: '离线', value: item.instanceOfflineCount })
          data.push({ type: '在线', value: item.instanceOnlineCount })
          this.$nextTick()
            .then(_ => {
              const el = 'donut' + item.id
              const donutPlot = new Donut(document.getElementById(el), {
                forceFit: true,
                title: {
                  visible: true,
                  text: item.name
                },
                radius: 0.9,
                padding: 'auto',
                data,
                angleField: 'value',
                colorField: 'type',
                statistic: {
                  visible: true
                }
              })
              donutPlot.render()
            })
        })
      })
      .catch(err => {
        this.$message.error(err.message)
      })
  },
  mounted() {
  },
  beforeDestroy() {
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
  .overview{
  }
</style>
