<template>
  <div>
    <!-- 系统集成统计页面 -->
    <div class="contain-block" style="width:calc(30% - 15px);margin-right:15px;min-width:385px;">
      <span class="contain-title-leftblock">
         <span class="iconfont icon-juxing"></span>
        系统集成统计</span>
      <div class="contain-data">
        <integrateStatistics ref="chart" style="height: calc(100% - 5px);" :key="refresh"></integrateStatistics>
      </div>
    </div>
    <!-- 表号功能号总览页面 -->
    <div class="contain-block meterFunc">
      <span class="contain-title-leftblock">
         <span class="iconfont icon-juxing"></span>
        表号功能号总览</span>
      <div class="contain-data">
        <tabFunNumOverview ref="table" :key="refresh" @reloadData="reloadData()"></tabFunNumOverview>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import integrateStatistics from '@/components/point/report/integrateStatistics'
import tabFunNumOverview from '@/components/point/report/tabFunNumOverview'

export default {
  components: {
    integrateStatistics,
    tabFunNumOverview
  },
  computed: {
    ...mapGetters('layout', ['projectId']),
  },
  data() {
    return {
      refresh: ''//刷新组件
    }
  },
  methods: {
    //子组件中的新建完成后刷新
    reloadData() {
      this.refresh = new Date().getTime();
    }
  },
  watch: {
    //监听项目变化
    projectId() {
      this.refresh = new Date().getTime();
    }
  }
}
</script>

<style lang="less" scoped>
.contain-block {
  float: left;
  height: 100%;
  background: white;
  width: 70%;
}
.contain-title-leftblock {
  height: 30px;
  line-height: 30px;
  /*border-left: 8px solid black;*/
  display: inline-block;
  margin: 8px 0;
  font-weight: 600;
  padding-left: 8px;
  cursor: default;
}
.contain-data {
  overflow: auto;
  height: calc(100% - 46px);
}
@media screen and (max-width: 1600px){
  .meterFunc{
    width:calc(100% - 400px);
  }
}
</style>
