<template>
  <div class="container">
    <div class="ChartBoxLeft">
      <device-count-by-type />
      <device-count-by-dept />
    </div>
    <div class="ChartBoxRight">
      <device-count-by-offline />
      <list-device-offline />
    </div>
  </div>
</template>

<script>
import deviceCountByType from './components/deviceCountByType'
import deviceCountByDept from './components/deviceCountByDept'
import deviceCountByOffline from './components/deviceCountByOffline'
import listDeviceOffline from './components/listdeviceOffline'
export default {
  name: 'DeviceStatics',
  components: {
    deviceCountByType,
    deviceCountByDept,
    deviceCountByOffline,
    listDeviceOffline
  },
  data() {
  }
}
</script>

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