<template>
<div class="from xp-wrapper">
    <h2 class="xp-title">内容来源分析</h2>
    <div class="xp-card">
        <form-filter></form-filter>
    </div>
    <div class="xp-card">
        <el-tabs value="tab">
            <el-tab-pane label="内容来源趋势" name="tab">
                <chart-area></chart-area>
            </el-tab-pane>
        </el-tabs>
    </div>
    <div class="xp-card">
        <el-tabs value="tab">
            <el-tab-pane label="内容来源构成" name="tab">
                <el-row type="flex" justify="space-between">
                    <chart-pie></chart-pie>
                    <chart-pie1></chart-pie1>
                </el-row>
            </el-tab-pane>
            <h5 class="xp-subtitle">数据明细</h5>
            <table-with-fixed-header></table-with-fixed-header>
        </el-tabs>
    </div>
    <div class="xp-card">
        <h5 class="xp-subtitle">整体构成</h5>
        <table-with-fixed-header1></table-with-fixed-header1>
    </div>
</div>
</template>

<script>
/**
 * @file from 页面
 *
 * @author zhangping15

 * @date 2018-07-06
 */

import chartArea from './components/chart-area/index.vue';
import chartPie from './components/chart-pie/index.vue';
import chartPie1 from './components/chart-pie1/index.vue';
import formFilter from './components/form-filter/index.vue';
import tableWithFixedHeader from './components/table-with-fixed-header/index.vue';
import tableWithFixedHeader1 from './components/table-with-fixed-header1/index.vue';

export default {
    components: {
        'chart-area': chartArea,
        'chart-pie': chartPie,
        'chart-pie1': chartPie1,
        'form-filter': formFilter,
        'table-with-fixed-header': tableWithFixedHeader,
        'table-with-fixed-header1': tableWithFixedHeader1
    },
    data() {
        return {};
    },
    mounted() {
        this.init();
    },
    methods: {
        init() {
        }
    }
};
</script>

<style lang="less">
.from {

}
</style>
