<template>
  <div class="app-container">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="工具统计" name="first">
        <div class="app-container"><!--从这一层开始嵌入页面-->

          <el-row :gutter="20">
            <el-col :span="12">
              <el-card>
                <div slot="header" class="clearfix"><span class="tline">工具类别统计</span></div>
                <div class="tjbox2"><img src="images/tjt1.jpg" /></div>
              </el-card><!--el-card-->
            </el-col><!--el-col-->
            <el-col :span="12">
              <el-card>
                <div slot="header" class="clearfix"><span class="tline">工具使用情况</span></div>
                <div class="tjbox2"><img src="images/tjt2.jpg" /></div>
              </el-card><!--el-card-->
            </el-col><!--el-col-->
          </el-row><!--el-row-->

          <el-row :gutter="20">
            <el-col :span="12">
              <el-card>
                <div slot="header" class="clearfix"><span class="tline">工具归属单位分布情况</span></div>
                <div class="tjbox2"><img src="images/tjt5.jpg" /></div>
              </el-card><!--el-card-->
            </el-col><!--el-col-->
            <el-col :span="12">
              <el-card>
                <div slot="header" class="clearfix"><span class="tline">近一年工具使用数量统计</span></div>
                <div class="tjbox2"><img src="images/tjt6.jpg" /></div>
              </el-card><!--el-card-->
            </el-col><!--el-col-->
          </el-row><!--el-row-->

        </div><!--app-container-->
      </el-tab-pane>
      <el-tab-pane label="文档统计" name="second">
        <div class="app-container"><!--从这一层开始嵌入页面-->

          <el-row :gutter="20">
            <el-col :span="12">
              <el-card>
                <div slot="header" class="clearfix"><span class="tline">文档类别统计</span></div>
                <div class="tjbox2"><img src="images/tjt3.jpg" /></div>
              </el-card><!--el-card-->
            </el-col><!--el-col-->
            <el-col :span="12">
              <el-card>
                <div slot="header" class="clearfix"><span class="tline">文档来源统计</span></div>
                <div class="tjbox2"><img src="images/tjt4.jpg" /></div>
              </el-card><!--el-card-->
            </el-col><!--el-col-->
          </el-row><!--el-row-->

          <el-row :gutter="20">
            <el-col :span="12">
              <el-card>
                <div slot="header" class="clearfix"><span class="tline">文档归属单位分布情况</span></div>
                <div class="tjbox2"><img src="images/tjt5.jpg" /></div>
              </el-card><!--el-card-->
            </el-col><!--el-col-->
            <el-col :span="12">
              <el-card>
                <div slot="header" class="clearfix"><span class="tline">近一年文档数量统计</span></div>
                <div class="tjbox2"><img src="images/tjt6.jpg" /></div>
              </el-card><!--el-card-->
            </el-col><!--el-col-->
          </el-row><!--el-row-->

        </div><!--app-container-->
      </el-tab-pane>
    </el-tabs>
  </div>

</template>

<script>
  export default {
    name: 'statistic',
    data() {
      return {
        activeName: 'first'
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      }
    }
  }
</script>

<style scoped>

</style>
