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.
280 lines
15 KiB
280 lines
15 KiB
<!--
|
|
* @Author: your name
|
|
* @Date: 2021-11-05 13:49:05
|
|
* @LastEditTime: 2021-11-26 11:36:49
|
|
* @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="getBComparison" @change="handlerChangeBrand" v-if="!$slots['skeleton']"></brandCompateHeader>
|
|
<brandCompateHeaderStoken slot="skeleton" v-else></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>
|
|
<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>
|
|
export default {
|
|
name: "brandComparison",
|
|
inject: ["reload"],
|
|
components: {
|
|
informationTrend: (resolve) => require(['./informationTrend'], resolve),
|
|
informationTrendStoken: (resolve) => require(['./informationTrendStoken'], resolve),
|
|
overallInformation: (resolve) => require(['./overallInformation'], resolve), // 整体信息量
|
|
overallInformationStoken: (resolve) => require(['./overallInformationStoken'], resolve), // 整体信息量骨架屏
|
|
overallNumberOfInteractions: (resolve) => require(['./overallNumberOfInteractions'], resolve), // 整体互动人数
|
|
overallNumberOfInteractionsStoken: (resolve) => require(['./overallNumberOfInteractionsStoken'], resolve), // 整体互动人数
|
|
brandTonalDistribution: (resolve) => require(['./brandTonalDistribution'], resolve), // 品牌调性分布
|
|
brandTonalDistributionStoken: (resolve) => require(['./brandTonalDistributionStoken'], resolve), // 品牌调性分布
|
|
channelDistribution: (resolve) => require(['./channelDistribution'], resolve), // 渠道分布
|
|
channelDistributionStoken: (resolve) => require(['./channelDistributionStoken'], resolve), // 渠道分布
|
|
keyMediaCommunicationComparison: (resolve) => require(['./keyMediaCommunicationComparison'], resolve), // 重点媒体传播对比
|
|
keyMediaCommunicationComparisonStoken: (resolve) => require(['./keyMediaCommunicationComparisonStoken'], resolve), // 重点媒体传播对比
|
|
brandCommunicationTOPMedia: (resolve) => require(['./brandCommunicationTOPMedia'], resolve), // 品牌传播TOP媒体
|
|
brandCommunicationTOPMediaStoken: (resolve) => require(['./brandCommunicationTOPMediaStoken'], resolve), // 品牌传播TOP媒体
|
|
overallWordCloudComparison: (resolve) => require(['./overallWordCloudComparison'], resolve), // 整体词云对比
|
|
overallWordCloudComparisonStoken: (resolve) => require(['./overallWordCloudComparisonStoken'], resolve), // 整体词云对比
|
|
brandEventComparison: (resolve) => require(['./brandEventComparison'], resolve), //品牌事件对比
|
|
brandEventComparisonStoken: (resolve) => require(['./brandEventComparisonStoken'], resolve), //品牌事件对比
|
|
comparisonOfWeiboInformation: (resolve) => require(['./comparisonOfWeiboInformation'], resolve), // 微博信息量对比
|
|
comparisonOfWeiboInformationStoken: (resolve) => require(['./comparisonOfWeiboInformationStoken'], resolve), // 微博信息量对比
|
|
comparisonOfTheNumberOfWeiboInteractions: (resolve) => require(['./comparisonOfTheNumberOfWeiboInteractions'], resolve), // 微博互动人数对比
|
|
comparisonOfTheNumberOfWeiboInteractionsStoken: (resolve) => require(['./comparisonOfTheNumberOfWeiboInteractionsStoken'], resolve), // 微博互动人数对比
|
|
weiboBigVComparison: (resolve) => require(['./weiboBigVComparison'], resolve), // 微博大V对比
|
|
weiboBigVComparisonStoken: (resolve) => require(['./weiboBigVComparisonStoken'], resolve), // 微博大V对比
|
|
weiboTuneComparison: (resolve) => require(['./weiboTuneComparison'], resolve), // 微博调性对比
|
|
weiboTuneComparisonStoken: (resolve) => require(['./weiboTuneComparisonStoken'], resolve), // 微博调性对比
|
|
weiboContentDirectionComparison: (resolve) => require(['./weiboContentDirectionComparison'], resolve), // 微博内容方向对比
|
|
weiboContentDirectionComparisonStoken: (resolve) => require(['./weiboContentDirectionComparisonStoken'], resolve), // 微博内容方向对比
|
|
userAreaDistribution: (resolve) => require(['./userAreaDistribution'], resolve), //用户区域分布
|
|
userAreaDistributionStoken: (resolve) => require(['./userAreaDistributionStoken'], resolve), //用户区域分布
|
|
weiboUserPortrait: (resolve) => require(['./weiboUserPortrait'], resolve), // 微博用户画像
|
|
weiboUserPortraitStoken: (resolve) => require(['./weiboUserPortraitStoken'], resolve), // 微博用户画像
|
|
summaryAndComparisonOfForumInformation: (resolve) => require(['./summaryAndComparisonOfForumInformation'], resolve), // 论坛信息概括对比
|
|
summaryAndComparisonOfForumInformationStoken: (resolve) => require(['./summaryAndComparisonOfForumInformationStoken'], resolve), // 论坛信息概括对比
|
|
comparisonOfForumPostingTrends: (resolve) => require(['./comparisonOfForumPostingTrends'], resolve), // 论坛发帖趋势对比
|
|
comparisonOfForumPostingTrendsStoken: (resolve) => require(['./comparisonOfForumPostingTrendsStoken'], resolve), // 论坛发帖趋势对比
|
|
forumTonalComparison: (resolve) => require(['./forumTonalComparison'], resolve), // 论坛调性对比
|
|
forumTonalComparisonStoken: (resolve) => require(['./forumTonalComparisonStoken'], resolve), // 论坛调性对比
|
|
comparisonOfPositiveTopicsInTheForum: (resolve) => require(['./comparisonOfPositiveTopicsInTheForum'], resolve), // 论坛正面话题对比
|
|
comparisonOfPositiveTopicsInTheForumStoken: (resolve) => require(['./comparisonOfPositiveTopicsInTheForumStoken'], resolve), // 论坛正面话题对比
|
|
comparisonOfNegativeTopicsInForums: (resolve) => require(['./comparisonOfNegativeTopicsInForums'], resolve), // 论坛负面话题对比
|
|
comparisonOfNegativeTopicsInForumsStoken: (resolve) => require(['./comparisonOfNegativeTopicsInForumsStoken'], resolve), // 论坛负面话题对比
|
|
brandRearWingComparison: (resolve) => require(['./brandRearWingComparison'], resolve), // 尾翼趋势对比
|
|
brandRearWingComparisonStoken: (resolve) => require(['./brandRearWingComparisonStoken'], resolve), // 尾翼趋势对比
|
|
// informationVolumeByChannel: (resolve) => require(['./informationVolumeByChannel'], resolve), // 分渠道信息量
|
|
// informationVolumeByChannelStoken: (resolve) => require(['./informationVolumeByChannelStoken'], resolve), // 分渠道信息量
|
|
tailTOPMedia: (resolve) => require(['./tailTOPMedia'], resolve), // 尾翼TOP媒体
|
|
tailTOPMediaStoken: (resolve) => require(['./tailTOPMediaStoken'], resolve), // 尾翼TOP媒体
|
|
brandCompateHeader: (resolve) => require(['./brandCompateHeader'], resolve), // 选择品牌
|
|
brandCompateHeaderStoken: (resolve) => require(['./brandCompateHeaderStoken'], resolve), // 选择品牌骨架屏
|
|
},
|
|
data() {
|
|
return {};
|
|
},
|
|
beforeMount() {},
|
|
methods: {
|
|
handlerChangeBrand(arr) {
|
|
this.setBComparison(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>
|
|
|