<template>
  <div class="container">
  <div :style="{'height' : height}" class="map"><guadMap /></div>
    <div class="show-data" ref="showData">
      <deviceList/>
      <!-- 近一月设备数量统计 区域折线图 -->
      <layoutStackAreaChart/> 
      <!-- 设备品类统计 环形图 -->
      <layoutChartDoughnu/>
      <!-- 区域设备排行榜 柱状图 -->
      <layoutChartVerticalBar type="region"/>
    </div>
  </div>
</template>

<script>
import layoutChartDoughnu from './components/layoutChartDoughnu.vue';
import layoutChartVerticalBar from './components/layoutChartVerticalBar.vue';
import layoutStackAreaChart from './components/layoutStackAreaChart.vue';
import deviceList from './components/deviceList.vue';
import guadMap from '../../components/guadMap/index.vue'
export default {
    name:'devicePanel',
    components:{
      layoutChartDoughnu,
      layoutChartVerticalBar,
      layoutStackAreaChart,
      deviceList,
      guadMap
    },
    data() {
      return{
        height:''
      }
    },
    mounted(){
      this.height = window.getComputedStyle(this.$refs.showData).height
    }
}
</script>

<style lang="scss" scoped>
.container{
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  .show-data{
    position: absolute;
    right: 0;
    top:0;
    background: #fff;
    width: 360px;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  }
  .map {
    div{
      height: 100%;
    }
  }
}
</style>