<template>
  <div class="container">
    <!-- <layoutChartRadar/>
    <layoutChartDoughnu />
    <layoutChartVerticalBar />
    <layoutMixChart />
    <layoutAreaChart />
    <layoutStackAreaChart /> -->
    <div class="show-data">
      <deviceList :device="device"/>
      <layoutStackAreaChart /> 
      <layoutChartDoughnu/>
      <layoutChartVerticalBar />
    </div>
  </div>
</template>

<script>
import layoutChartRadar from './components/layoutChartRadar.vue';
import layoutChartDoughnu from './components/layoutChartDoughnu.vue';
import layoutChartVerticalBar from './components/layoutChartVerticalBar.vue';
import layoutMixChart from './components/layoutMixChart.vue';
import layoutAreaChart from './components/layoutAreaChart.vue';
import layoutStackAreaChart from './components/layoutStackAreaChart.vue';
import deviceList from './components/deviceList.vue';
export default {
    name:'devicePanel',
    components:{
      layoutChartRadar,
      layoutChartDoughnu,
      layoutChartVerticalBar,
      layoutMixChart,
      layoutAreaChart,
      layoutStackAreaChart,
      deviceList,
    },
    data() {
      return{
        device:[
          {
            title:'设备总数',
            count:'123',
            icon:'device-count'
          },
          {
            title:'IOT设备数量',
            count:'1263',
            icon:'device-count'
          },
          {
            title:'IOT设备在线率',
            count:'80%',
            icon:'device-fund'
          },
        ]
      }
    },
}
</script>

<style lang="scss" scoped>
.container{
  width: 100%;
  height: 100%;
  position: relative;
  .show-data{
    position: absolute;
    right: 3%;
    top:0;
    background: transparent;
    width: 450px;
    // float: right;

  }
}
</style>