<!--
 * @Author: your name
 * @Date: 2021-11-05 13:49:05
 * @LastEditTime: 2021-11-12 14:30:59
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /data-show/src/views/BrandComparison/BrandComparison.vue
-->
<!--
 * @Author: your name
 * @Date: 2021-10-15 10:39:43
 * @LastEditTime: 2021-11-05 13:25:31
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /data-show/src/views/BrandComparison/index.vue
-->
<template>
    <div class="d-container">
        <div class="bc-outter">
            <vue-lazy-component>
            <brandCompateHeader :data="getMComparison" @change="handlerChangeBrand"></brandCompateHeader>
            <brandCompateHeaderStoken slot="skeleton"></brandCompateHeaderStoken>
            </vue-lazy-component>
            <div class="bc-d2">
                <vue-lazy-component>
                <informationTrend></informationTrend>
                <informationTrendStoken slot="skeleton"></informationTrendStoken>
                </vue-lazy-component>
                <vue-lazy-component>
                <overallInformation></overallInformation>
                <overallInformationStoken slot="skeleton"></overallInformationStoken>
                </vue-lazy-component>
                <vue-lazy-component>
                <overallNumberOfInteractions></overallNumberOfInteractions>
                <overallNumberOfInteractionsStoken slot="skeleton"></overallNumberOfInteractionsStoken>
                </vue-lazy-component>
            </div>
            <vue-lazy-component>
            <brandTonalDistribution></brandTonalDistribution>
            <brandTonalDistributionStoken slot="skeleton"></brandTonalDistributionStoken>
            </vue-lazy-component>
            <div class="bc-d3">
                <vue-lazy-component>
                <channelDistribution></channelDistribution>
                <channelDistributionStoken slot="skeleton"></channelDistributionStoken>
                </vue-lazy-component>
                <vue-lazy-component>
                <keyMediaCommunicationComparison></keyMediaCommunicationComparison>
                <keyMediaCommunicationComparisonStoken slot="skeleton"></keyMediaCommunicationComparisonStoken>
                </vue-lazy-component>
            </div>
            <vue-lazy-component>
            <brandCommunicationTOPMedia></brandCommunicationTOPMedia>
            <brandCommunicationTOPMediaStoken slot="skeleton"></brandCommunicationTOPMediaStoken>
            </vue-lazy-component>
            <vue-lazy-component>
            <saleFormComparison></saleFormComparison>
            <saleFormComparisonStoken slot="skeleton"></saleFormComparisonStoken>
            </vue-lazy-component>
            <vue-lazy-component>
            <overallWordCloudComparison></overallWordCloudComparison>
            <overallWordCloudComparisonStoken slot="skeleton"></overallWordCloudComparisonStoken>
            </vue-lazy-component>
            <vue-lazy-component>
            <brandEventComparison></brandEventComparison>
            <brandEventComparisonStoken slot="skeleton"></brandEventComparisonStoken>
            </vue-lazy-component>
            <div class="bc-d4">
                <v-label-div title="车型微博对比"></v-label-div>
                <div class="bc-d4-d1">
                    <vue-lazy-component>
                    <comparisonOfWeiboInformation></comparisonOfWeiboInformation>
                    <comparisonOfWeiboInformationStoken slot="skeleton"></comparisonOfWeiboInformationStoken>
                    </vue-lazy-component>
                    <vue-lazy-component>
                    <comparisonOfTheNumberOfWeiboInteractions></comparisonOfTheNumberOfWeiboInteractions>
                    <comparisonOfTheNumberOfWeiboInteractionsStoken slot="skeleton"></comparisonOfTheNumberOfWeiboInteractionsStoken>
                    </vue-lazy-component>
                    <vue-lazy-component>
                    <weiboBigVComparison></weiboBigVComparison>
                    <weiboBigVComparisonStoken slot="skeleton"></weiboBigVComparisonStoken>
                    </vue-lazy-component>
                </div>
                <vue-lazy-component>
                <weiboTuneComparison></weiboTuneComparison>
                <weiboTuneComparisonStoken slot="skeleton"></weiboTuneComparisonStoken>
                </vue-lazy-component>
                <vue-lazy-component>
                <weiboContentDirectionComparison></weiboContentDirectionComparison>
                <weiboContentDirectionComparisonStoken slot="skeleton"></weiboContentDirectionComparisonStoken>
                </vue-lazy-component>
                <div class="bc-d4-d2">
                    <vue-lazy-component>
                    <userAreaDistribution></userAreaDistribution>
                    <userAreaDistributionStoken slot="skeleton"></userAreaDistributionStoken>
                    </vue-lazy-component>
                    <vue-lazy-component>
                    <weiboUserPortrait></weiboUserPortrait>
                    <weiboUserPortraitStoken slot="skeleton"></weiboUserPortraitStoken>
                    </vue-lazy-component>
                </div>
            </div>
            <div class="bc-d5">
                <v-label-div title="车型论坛对比"></v-label-div>
                <div class="bc-d5-dd1">
                    <vue-lazy-component>
                    <summaryAndComparisonOfForumInformation></summaryAndComparisonOfForumInformation>
                    <summaryAndComparisonOfForumInformationStoken slot="skeleton"></summaryAndComparisonOfForumInformationStoken>
                    </vue-lazy-component>
                    <vue-lazy-component>
                    <comparisonOfForumPostingTrends></comparisonOfForumPostingTrends>
                    <comparisonOfForumPostingTrendsStoken slot="skeleton"></comparisonOfForumPostingTrendsStoken>
                    </vue-lazy-component>
                </div>
                 <vue-lazy-component>
                 <forumTonalComparison></forumTonalComparison>
                 <forumTonalComparisonStoken slot="skeleton"></forumTonalComparisonStoken>
                 </vue-lazy-component>
                 <vue-lazy-component>
                 <comparisonOfPositiveTopicsInTheForum></comparisonOfPositiveTopicsInTheForum>
                 <comparisonOfPositiveTopicsInTheForumStoken slot="skeleton"></comparisonOfPositiveTopicsInTheForumStoken>
                 </vue-lazy-component>
                 <vue-lazy-component>
                 <comparisonOfNegativeTopicsInForums></comparisonOfNegativeTopicsInForums>
                 <comparisonOfNegativeTopicsInForumsStoken slot="skeleton"></comparisonOfNegativeTopicsInForumsStoken>
                 </vue-lazy-component>
            </div>
            <div class="bc-d6">
               <v-label-div title="车型尾翼对比"></v-label-div> 
                <div class="bc-d6-dd1">
                    <vue-lazy-component>
                    <brandRearWingComparison></brandRearWingComparison>
                    <brandRearWingComparisonStoken slot="skeleton"></brandRearWingComparisonStoken>
                    </vue-lazy-component>
                    <!-- <informationVolumeByChannel v-if="!$slots['skeleton']"></informationVolumeByChannel>
                    <informationVolumeByChannelStoken slot="skeleton" v-else></informationVolumeByChannelStoken> -->
                </div>
                <vue-lazy-component>
                <tailTOPMedia></tailTOPMedia>
                <tailTOPMediaStoken slot="skeleton"></tailTOPMediaStoken>
                </vue-lazy-component>
            </div>

        </div>
    </div>
</template>

<script>
import informationTrend from "./informationTrend";
import overallInformation from "./overallInformation";
import overallNumberOfInteractions from "./overallNumberOfInteractions";
import brandTonalDistribution from "./brandTonalDistribution";
import channelDistribution from "./channelDistribution";
import keyMediaCommunicationComparison from "./keyMediaCommunicationComparison";
import brandCommunicationTOPMedia from "./brandCommunicationTOPMedia";
import overallWordCloudComparison from "./overallWordCloudComparison";
import brandEventComparison from "./brandEventComparison";
import comparisonOfWeiboInformation from "./comparisonOfWeiboInformation";
import comparisonOfTheNumberOfWeiboInteractions from "./comparisonOfTheNumberOfWeiboInteractions";
import weiboBigVComparison from "./weiboBigVComparison";
import weiboTuneComparison from "./weiboTuneComparison";
import weiboContentDirectionComparison from "./weiboContentDirectionComparison";
import userAreaDistribution from "./userAreaDistribution";
import weiboUserPortrait from "./weiboUserPortrait";
import summaryAndComparisonOfForumInformation from "./summaryAndComparisonOfForumInformation"
import comparisonOfForumPostingTrends from "./comparisonOfForumPostingTrends"
import forumTonalComparison from "./forumTonalComparison"
import comparisonOfPositiveTopicsInTheForum from "./comparisonOfPositiveTopicsInTheForum"
import comparisonOfNegativeTopicsInForums from "./comparisonOfNegativeTopicsInForums"
import brandRearWingComparison from "./brandRearWingComparison"
// import informationVolumeByChannel from "./informationVolumeByChannel"
import tailTOPMedia from "./tailTOPMedia"
import brandCompateHeader from "./brandCompateHeader"
import saleFormComparison from "./saleFormComparison"
//骨架屏
import informationTrendStoken from "./informationTrendStoken";
import overallInformationStoken from "./overallInformationStoken";
import overallNumberOfInteractionsStoken from "./overallNumberOfInteractionsStoken";
import brandTonalDistributionStoken from "./brandTonalDistributionStoken";
import channelDistributionStoken from "./channelDistributionStoken";
import keyMediaCommunicationComparisonStoken from "./keyMediaCommunicationComparisonStoken";
import brandCommunicationTOPMediaStoken from "./brandCommunicationTOPMediaStoken";
import overallWordCloudComparisonStoken from "./overallWordCloudComparisonStoken";
import brandEventComparisonStoken from "./brandEventComparisonStoken";
import comparisonOfWeiboInformationStoken from "./comparisonOfWeiboInformationStoken";
import comparisonOfTheNumberOfWeiboInteractionsStoken from "./comparisonOfTheNumberOfWeiboInteractionsStoken";
import weiboBigVComparisonStoken from "./weiboBigVComparisonStoken";
import weiboTuneComparisonStoken from "./weiboTuneComparisonStoken";
import weiboContentDirectionComparisonStoken from "./weiboContentDirectionComparisonStoken";
import userAreaDistributionStoken from "./userAreaDistributionStoken";
import weiboUserPortraitStoken from "./weiboUserPortraitStoken";
import summaryAndComparisonOfForumInformationStoken from "./summaryAndComparisonOfForumInformationStoken"
import comparisonOfForumPostingTrendsStoken from "./comparisonOfForumPostingTrendsStoken"
import forumTonalComparisonStoken from "./forumTonalComparisonStoken"
import comparisonOfPositiveTopicsInTheForumStoken from "./comparisonOfPositiveTopicsInTheForumStoken"
import comparisonOfNegativeTopicsInForumsStoken from "./comparisonOfNegativeTopicsInForumsStoken"
import brandRearWingComparisonStoken from "./brandRearWingComparisonStoken"
// import informationVolumeByChannelStoken from "./informationVolumeByChannelStoken"
import tailTOPMediaStoken from "./tailTOPMediaStoken"
import brandCompateHeaderStoken from "./brandCompateHeaderStoken";
import saleFormComparisonStoken from "./saleFormComparisonStoken";

export default {
    name: "brandComparison",
    inject: ['reload'],
    components: {
        informationTrend, // 信息量趋势
        overallInformation, // 整体信息量
        overallNumberOfInteractions, // 整体互动人数
        brandTonalDistribution, // 车型调性分布
        channelDistribution, // 渠道分布
        keyMediaCommunicationComparison, // 重点媒体传播对比
        brandCommunicationTOPMedia, // 车型传播TOP媒体
        overallWordCloudComparison, // 整体词云对比
        brandEventComparison, //车型事件对比
        comparisonOfWeiboInformation, // 微博信息量对比
        comparisonOfTheNumberOfWeiboInteractions, // 微博互动人数对比
        weiboBigVComparison, // 微博大V对比
        weiboTuneComparison, // 微博调性对比
        weiboContentDirectionComparison, // 微博内容方向对比
        userAreaDistribution, //用户区域分布
        weiboUserPortrait, // 微博用户画像
        summaryAndComparisonOfForumInformation, // 论坛信息概括对比
        comparisonOfForumPostingTrends, // 论坛发帖趋势对比
        forumTonalComparison, // 论坛调性对比
        comparisonOfPositiveTopicsInTheForum, // 论坛正面话题对比
        comparisonOfNegativeTopicsInForums, // 论坛负面话题对比
        brandRearWingComparison, // 尾翼趋势对比
        // informationVolumeByChannel, // 分渠道信息量
        tailTOPMedia, // 尾翼TOP媒体
        brandCompateHeader, // 选择品牌
        saleFormComparison, //销量
        //骨架屏
        informationTrendStoken, // 信息量趋势
        overallInformationStoken, // 整体信息量
        overallNumberOfInteractionsStoken, // 整体互动人数
        brandTonalDistributionStoken, // 车型调性分布
        channelDistributionStoken, // 渠道分布
        keyMediaCommunicationComparisonStoken, // 重点媒体传播对比
        brandCommunicationTOPMediaStoken, // 车型传播TOP媒体
        overallWordCloudComparisonStoken, // 整体词云对比
        brandEventComparisonStoken, //车型事件对比
        comparisonOfWeiboInformationStoken, // 微博信息量对比
        comparisonOfTheNumberOfWeiboInteractionsStoken, // 微博互动人数对比
        weiboBigVComparisonStoken, // 微博大V对比
        weiboTuneComparisonStoken, // 微博调性对比
        weiboContentDirectionComparisonStoken, // 微博内容方向对比
        userAreaDistributionStoken, //用户区域分布
        weiboUserPortraitStoken, // 微博用户画像
        summaryAndComparisonOfForumInformationStoken, // 论坛信息概括对比
        comparisonOfForumPostingTrendsStoken, // 论坛发帖趋势对比
        forumTonalComparisonStoken, // 论坛调性对比
        comparisonOfPositiveTopicsInTheForumStoken, // 论坛正面话题对比
        comparisonOfNegativeTopicsInForumsStoken, // 论坛负面话题对比
        brandRearWingComparisonStoken, // 尾翼趋势对比
        // informationVolumeByChannelStoken, // 分渠道信息量
        tailTOPMediaStoken, // 尾翼TOP媒体
        brandCompateHeaderStoken, // 选择品牌
        saleFormComparisonStoken, //销量
    },
    data() {
        return {
            
        };	
    },
    beforeMount() {
    },
    methods: {
        handlerChangeBrand(arr) {
            this.setMComparison(arr);
            this.reload()
        }
       
    },
};
</script>

<style lang="less" scoped>
.bc-outter {
    padding: 0px 16px 16px 16px;
}

.bc-d2 {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-start;
    margin-top: 16px;
}
.bc-d3 {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-start;
    margin-top: 16px;
}
.bc-d4 {
    width: 100%;
    height: auto;
    border: 2px solid #0f2a4d;
    margin-top: 16px;
    .bc-d4-d1 {
        width: 100%;
        display: flex;
        justify-content: flex-start;
    }
    .bc-d4-d2 {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: flex-start;
    }
}
.bc-d5 {
    width: 100%;
    height: auto;
    border: 2px solid #0f2a4d;
    margin-top: 16px;
    .bc-d5-dd1 {
        display: flex;
        justify-content: flex-start;
    }
}
.bc-d6 {
    width: 100%;
    height: auto;
    border: 2px solid #0f2a4d;
    margin-top: 16px;
    .bc-d6-dd1 {
        display: flex;
        justify-content: flex-start;
    }
}
</style>

