<template>
  <div>
    <!-- 系统集成统计页面 -->
    <div class="contain-blocks">
      <span class="contain-title-leftblock">
         <i class="iconfont icon-juxing"/>
        对应实例数量</span>
      <div class="contain-data">
        <integrateStatistics ref="chart" style="height: calc(100% - 5px);" :key="refresh"
                             type="testing"></integrateStatistics>
      </div>
    </div>
    <!-- 表号功能号总览页面 -->
    <div class="contain-block meterFunc">
      <span class="contain-title-leftblock">
         <i class="iconfont icon-juxing"/>监测详情</span>
      <div class="contain-data">
        <tabFunDetail ref="table" :key="refresh" :selectAggregate="selectAggregate" @reloadData="reloadData()"/>
      </div>
    </div>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
import integrateStatistics from '@/components/point/report/integrateStatistics'
import tabFunDetail from '@/components/point/report/tabFunDetail'
import {queryDataSourceCount} from "@/fetch/point_http"

export default {
  components: {
    integrateStatistics,
    tabFunDetail
  },
  computed: {
    ...mapGetters('layout', ['projectId']),
  },
  data() {
    return {
      refresh: '',//刷新组件
      selectAggregate: {
        originList: [], //数据源
      }
    }
  },
  created() {
    this.getOriginList()
  },
  methods: {
    //子组件中的新建完成后刷新
    reloadData() {
      this.refresh = new Date().getTime();
    },
    //查询数据源
    getOriginList() {
      queryDataSourceCount({}, res => {
        this.selectAggregate.originList = res.Content.map(i => i.Name).filter(t => t)
        console.log(this.selectAggregate.originList, ' this.selectAggregate.originList')
      })
    }

  },
  watch: {
    //监听项目变化
    projectId() {
      this.refresh = new Date().getTime();
    }
  }
}
</script>

<style lang="less" scoped>
.contain-blocks {
  float: left;
  height: 100%;
  background: white;
  width: 34%;
  margin-right: 5px;
}

.contain-block {
  float: left;
  height: 100%;
  background: white;
  width: 65%;

}

.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>
