You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
336 lines
16 KiB
336 lines
16 KiB
<!--
|
|
* @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>
|
|
|