parent
334c398dd5
commit
95ea1ea690
@ -0,0 +1,31 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: your name
|
||||||
|
* @Date: 2021-11-05 13:56:24
|
||||||
|
* @LastEditTime: 2021-11-05 14:08:48
|
||||||
|
* @LastEditors: Please set LastEditors
|
||||||
|
* @Description: In User Settings Edit
|
||||||
|
* @FilePath: /data-show/src/views/BrandComparison/BrandBeginComparte.vue
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<div class="d-container">
|
||||||
|
<div class="bbc-inner">
|
||||||
|
<brandCompateHeader></brandCompateHeader>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import brandCompateHeader from "./brandCompateHeader"
|
||||||
|
export default {
|
||||||
|
name: "BrandBeginComparte",
|
||||||
|
components: {
|
||||||
|
brandCompateHeader
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.bbc-inner {
|
||||||
|
padding: 0px 16px 16px 16px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,196 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: your name
|
||||||
|
* @Date: 2021-11-05 13:49:05
|
||||||
|
* @LastEditTime: 2021-11-05 13:49:06
|
||||||
|
* @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">
|
||||||
|
<brandCompateHeader></brandCompateHeader>
|
||||||
|
<div class="bc-d2">
|
||||||
|
<informationTrend></informationTrend>
|
||||||
|
<overallInformation></overallInformation>
|
||||||
|
<overallNumberOfInteractions></overallNumberOfInteractions>
|
||||||
|
</div>
|
||||||
|
<brandTonalDistribution></brandTonalDistribution>
|
||||||
|
<div class="bc-d3">
|
||||||
|
<channelDistribution></channelDistribution>
|
||||||
|
<keyMediaCommunicationComparison></keyMediaCommunicationComparison>
|
||||||
|
</div>
|
||||||
|
<brandCommunicationTOPMedia></brandCommunicationTOPMedia>
|
||||||
|
<overallWordCloudComparison></overallWordCloudComparison>
|
||||||
|
<brandEventComparison></brandEventComparison>
|
||||||
|
<div class="bc-d4">
|
||||||
|
<v-label-div title="品牌微博对比"></v-label-div>
|
||||||
|
<div class="bc-d4-d1">
|
||||||
|
<comparisonOfWeiboInformation></comparisonOfWeiboInformation>
|
||||||
|
<comparisonOfTheNumberOfWeiboInteractions></comparisonOfTheNumberOfWeiboInteractions>
|
||||||
|
<weiboBigVComparison></weiboBigVComparison>
|
||||||
|
</div>
|
||||||
|
<weiboTuneComparison></weiboTuneComparison>
|
||||||
|
<weiboContentDirectionComparison></weiboContentDirectionComparison>
|
||||||
|
<div class="bc-d4-d2">
|
||||||
|
<userAreaDistribution></userAreaDistribution>
|
||||||
|
<weiboUserPortrait></weiboUserPortrait>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bc-d5">
|
||||||
|
<v-label-div title="品牌论坛对比"></v-label-div>
|
||||||
|
<div class="bc-d5-dd1">
|
||||||
|
<summaryAndComparisonOfForumInformation></summaryAndComparisonOfForumInformation>
|
||||||
|
<comparisonOfForumPostingTrends></comparisonOfForumPostingTrends>
|
||||||
|
</div>
|
||||||
|
<forumTonalComparison></forumTonalComparison>
|
||||||
|
<comparisonOfPositiveTopicsInTheForum></comparisonOfPositiveTopicsInTheForum>
|
||||||
|
<comparisonOfNegativeTopicsInForums></comparisonOfNegativeTopicsInForums>
|
||||||
|
</div>
|
||||||
|
<div class="bc-d6">
|
||||||
|
<v-label-div title="品牌尾翼对比"></v-label-div>
|
||||||
|
<div class="bc-d6-dd1">
|
||||||
|
<brandRearWingComparison></brandRearWingComparison>
|
||||||
|
<informationVolumeByChannel></informationVolumeByChannel>
|
||||||
|
</div>
|
||||||
|
<tailTOPMedia></tailTOPMedia>
|
||||||
|
</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"
|
||||||
|
export default {
|
||||||
|
name: "brandComparison",
|
||||||
|
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 // 选择品牌
|
||||||
|
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</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>
|
||||||
|
|
||||||
@ -0,0 +1,132 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: your name
|
||||||
|
* @Date: 2021-11-05 13:18:12
|
||||||
|
* @LastEditTime: 2021-11-05 13:25:38
|
||||||
|
* @LastEditors: Please set LastEditors
|
||||||
|
* @Description: In User Settings Edit
|
||||||
|
* @FilePath: /data-show/src/views/BrandComparison/brandCompateHeader/index.vue
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<div class="bc-d1">
|
||||||
|
<v-label-div title="品牌对比">
|
||||||
|
<v-btn @click="goback">返回洞察详情</v-btn>
|
||||||
|
</v-label-div>
|
||||||
|
<div class="bc-d1-inner">
|
||||||
|
<template v-for="(item,index) in brands">
|
||||||
|
<div class="bc-d1-item" :key="index">
|
||||||
|
<div class="d1-item" :style="index === 0 ? 'margin-left: 16px' : ''">
|
||||||
|
<span class="s1">{{item.name}}</span>
|
||||||
|
<span class="s2">{{item.name}}</span>
|
||||||
|
<span class="s3" @click="openBrand(index)">切换品牌</span>
|
||||||
|
</div>
|
||||||
|
<img v-if="index != brands.length -1" src="../../../assets/images/comm/img_vs.png" class="d1-m1">
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
<iSwitchBrand :visible.sync="brandShow"></iSwitchBrand>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "brandCompateHeader",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
brandShow: false,
|
||||||
|
brandIndex: 0,
|
||||||
|
brands: [
|
||||||
|
{
|
||||||
|
name: "奥迪",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "宝马",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "奔驰",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "吉利",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "大众",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "别克",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
goback() {
|
||||||
|
this.$router.go(-1);
|
||||||
|
},
|
||||||
|
openBrand(n) {
|
||||||
|
this.brandShow = true;
|
||||||
|
this.brandIndex = n;
|
||||||
|
},
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.bc-d1 {
|
||||||
|
width: 100%;
|
||||||
|
height: 222px;
|
||||||
|
border: 2px solid #0f2a4d;
|
||||||
|
.bc-d1-inner {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 48px);
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
.bc-d1-item {
|
||||||
|
display: inline-block;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
.d1-m1 {
|
||||||
|
width: 96px;
|
||||||
|
height: 102px;
|
||||||
|
}
|
||||||
|
.d1-item {
|
||||||
|
position: relative;
|
||||||
|
width: 228.5px;
|
||||||
|
height: 120px;
|
||||||
|
background-image: url("../../../assets/images/BrandInsight/img_pd.png");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
|
||||||
|
.s1 {
|
||||||
|
position: absolute;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #b2daf8;
|
||||||
|
top: 52px;
|
||||||
|
left: 43px;
|
||||||
|
}
|
||||||
|
.s2 {
|
||||||
|
position: absolute;
|
||||||
|
top: 50px;
|
||||||
|
left: 110px;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
.s3 {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
right: 0px;
|
||||||
|
width: 95px;
|
||||||
|
height: 28px;
|
||||||
|
background-image: url("../../../assets/images/BrandInsight/img_xbut.png");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
color: #4390ba;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 28px;
|
||||||
|
font-size: 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue