<!--设备统计-->
<template>
  <div class="container">
    <div class="ChartBoxLeft">
      <!--设备数量分析-->
      <device-count-by-type />
      <!--各权属单位安装设备数量统计-->
      <device-count-by-dept :type-list="deviceTypeList" style="margin-top: 10px" />
    </div>
    <div class="ChartBoxRight">
      <!--离线分析-->
      <device-count-by-offline :type-list="deviceTypeList" />
    </div>
  </div>
</template>

<script>
import deviceCountByType from './components/deviceCountByType'
import deviceCountByDept from './components/deviceCountByDept'
import deviceCountByOffline from './components/deviceCountByOffline'
import { getDeviceType } from '@/api/device/device'
export default {
  name: 'DeviceStatics',
  components: {
    deviceCountByType,
    deviceCountByDept,
    deviceCountByOffline
  },
  data() {
    return {
      deviceTypeList: [] // 设备类型列表
    }
  },
  created() {
    this.fetchDeviceType()
  },
  methods: {
    // 获取设备类型
    fetchDeviceType() {
      getDeviceType(this.listQuery).then(response => {
        this.deviceTypeList = []
        // 过滤掉该单位不支持的设备类型
        const deviceTypes = this.$store.getters.deviceTypes
        for (const deviceType of response.data) {
          if (deviceTypes.indexOf(deviceType.value) !== -1) {
            this.deviceTypeList.push(deviceType)
          }
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.container {
  display: flex;
  margin-right: 10px;
}
.ChartBoxLeft {
  width: 40%;
}
.ChartBoxRight{
  flex:1;
  margin-left: 10px;
}
</style>