<template>
  <page-header-wrapper>
    <div class="content">
        <div class="card_item">
          <div class="cardInfo f-l">
            <a-table :columns="columns" :data-source="data" bordered :pagination="false">
              <template slot="name" slot-scope="text">
                <a>{{ text }}</a>
              </template>
              <template slot="title">
                <div class="item item1">
                  <a>标签数据</a>
                </div>
              </template>
            </a-table>
          </div>
          <!--  -->
          <div class="cardInfo f-r">
            <a-table :columns="columns" :data-source="data" bordered :pagination="false">
              <template slot="name" slot-scope="text">
                <a>{{ text }}</a>
              </template>
              <template slot="title">
                <div class="item item1">
                  <a>标签测量次数统计（7日）</a>
                </div>
              </template>
            </a-table>
          </div>
      </div>
    </div>
  </page-header-wrapper>
</template>
<script>
  const columns = [{
      title: '人数',
      dataIndex: 'name',
      scopedSlots: {
        customRender: 'name'
      },
    },
    {
      title: '标签1',
      dataIndex: 'tagName1',
    },
    {
      title: '标签2',
      dataIndex: 'tagName2',
    },
    {
      title: '标签3',
      dataIndex: 'tagName3',
    },
    {
      title: '标签4',
      dataIndex: 'tagName4',
    },
    {
      title: '标签5',
      dataIndex: 'tagName5',
    },
  ]

  const data = [{
    key: '1',
    name: '平均7日测量次数',
    tagName1: '281',
    tagName2: '282',
    tagName3: '283',
    tagName4: '284',
    tagName5: '285',
  }, {
    key: '2',
    name: '测量人数',
    tagName1: '281',
    tagName2: '282',
    tagName3: '283',
    tagName4: '284',
    tagName5: '285',
  }]
  export default {
    name: 'Analysis',
    data() {
      return {
        columns,
        data,
      }
    },
    created() {
      setTimeout(() => {
        this.loading = !this.loading
      }, 1000)
    },
    methods:{
     
    }
  }
</script>

<style lang="less" scoped>
  .content{
    height: calc(100vh - 160px);
  }
  .cardInfo{
    width: 40%;
  }
</style>
