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.
294 lines
10 KiB
294 lines
10 KiB
<!--
|
|
* @Author: xw
|
|
* @Date: 2021-10-11 17:59:49
|
|
* @LastEditTime: 2021-11-09 11:08:10
|
|
* @LastEditors: Please set LastEditors
|
|
* @Description: 品牌洞察
|
|
* @FilePath: /data-show/src/views/BrandInsight/index.vue
|
|
-->
|
|
<template>
|
|
<div class="d-container">
|
|
<div class="bdl-ouuter">
|
|
<div class="bdl-d1">
|
|
<div class="bdl-d1-dd1">
|
|
<brand-data :brand="brand"></brand-data>
|
|
<brand-top :brand="brand"></brand-top>
|
|
</div>
|
|
<div class="bdl-d1-dd2">
|
|
<img class="m1" src="../../assets/images/BrandInsight/img_ppdb.png" @click="goRouter('/brandComparisonIndex')"/>
|
|
<div class="bdl-d1-dd2-d1">
|
|
<span class="bdl-d1-dd2-d1-s1">{{this.brand}}</span>
|
|
</div>
|
|
<img class="m2" src="../../assets/images/BrandInsight/img_qhpp.png" @click="openBrand"/>
|
|
</div>
|
|
<div class="bdl-d1-dd3">
|
|
<titsopo :brand="brand"></titsopo>
|
|
</div>
|
|
</div>
|
|
<div class="bdl-d2">
|
|
<v-label-div title="事件洞察">
|
|
<v-btn @click="goRouter('/eventDetails')">事件详情</v-btn>
|
|
</v-label-div>
|
|
<div class="bdl-d2-bd">
|
|
<vue-lazy-component>
|
|
<popular-events-list :brand="brand"></popular-events-list>
|
|
<popularEventsListStoken slot="skeleton"></popularEventsListStoken>
|
|
</vue-lazy-component>
|
|
<vue-lazy-component>
|
|
<popular-events :brand="brand"></popular-events>
|
|
<popularEventsStoken slot="skeleton"></popularEventsStoken>
|
|
</vue-lazy-component>
|
|
</div>
|
|
</div>
|
|
<div class="bdl-d3">
|
|
<v-label-div title="微博洞察">
|
|
<v-btn @click="goRouter('/weiboDetails')">微博详情</v-btn>
|
|
</v-label-div>
|
|
<div class="bdl-d3-bd">
|
|
<vue-lazy-component>
|
|
<weibo-Kol :brand="brand"></weibo-Kol>
|
|
<weiboKolStoken slot="skeleton"></weiboKolStoken>
|
|
</vue-lazy-component>
|
|
<vue-lazy-component>
|
|
<weibo-portraits :brand="brand"></weibo-portraits>
|
|
<weiboPortraitsStoken slot="skeleton"></weiboPortraitsStoken>
|
|
</vue-lazy-component>
|
|
<!-- <vue-lazy-component> -->
|
|
<weibo-volume-trend :brand="brand"></weibo-volume-trend>
|
|
<!-- <weiboVolumeTrendStoken slot="skeleton"></weiboVolumeTrendStoken> -->
|
|
<!-- </vue-lazy-component> -->
|
|
</div>
|
|
</div>
|
|
<div class="bdl-d4">
|
|
<v-label-div title="论坛洞察">
|
|
<v-btn @click="goRouter('/forumDetails')">论坛详情</v-btn>
|
|
</v-label-div>
|
|
<div class="bdl-d4-bd">
|
|
<!-- <vue-lazy-component> -->
|
|
<forumCommunicationTrend :brand="brand"></forumCommunicationTrend>
|
|
<!-- <forumCommunicationTrendStoken slot="skeleton"></forumCommunicationTrendStoken>
|
|
</vue-lazy-component> -->
|
|
<vue-lazy-component>
|
|
<forumHotTopicDirection :brand="brand"></forumHotTopicDirection>
|
|
<forumHotTopicDirectionStoken slot="skeleton"></forumHotTopicDirectionStoken>
|
|
</vue-lazy-component>
|
|
<vue-lazy-component>
|
|
<spreadTOPmodels :brand="brand"></spreadTOPmodels>
|
|
<spreadTOPmodelsStoken slot="skeleton"></spreadTOPmodelsStoken>
|
|
</vue-lazy-component>
|
|
</div>
|
|
</div>
|
|
<div class="bdl-d5">
|
|
<v-label-div title="尾翼洞察">
|
|
<v-btn @click="goRouter('/tailInsightDetails')">尾翼详情</v-btn>
|
|
</v-label-div>
|
|
<div class="bdl-d5-bd">
|
|
<!-- <vue-lazy-component> -->
|
|
<rearWingPropagationSituation :brand="brand"></rearWingPropagationSituation>
|
|
<!-- <rearWingPropagationSituationStoken slot="skeleton"></rearWingPropagationSituationStoken>
|
|
</vue-lazy-component> -->
|
|
<vue-lazy-component>
|
|
<keyMedia :brand="brand"></keyMedia>
|
|
<keyMediaStoken slot="skeleton"></keyMediaStoken>
|
|
</vue-lazy-component>
|
|
<vue-lazy-component>
|
|
<popularwordCloud :brand="brand"></popularwordCloud>
|
|
<popularwordCloudStoken slot="skeleton"></popularwordCloudStoken>
|
|
</vue-lazy-component>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<iSwitchBrand :brand="brand" :visible.sync="brandShow" @change="handlerBrand"></iSwitchBrand>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import brandData from "./brandData";
|
|
import brandTop from "./brandTop";
|
|
import titsopo from "./titsopo";
|
|
import popularEventsList from "./popularEventsList";
|
|
import popularEvents from "./popularEvents";
|
|
import weiboKol from "./weiboKol";
|
|
import weiboPortraits from "./weiboPortraits";
|
|
import weiboVolumeTrend from "./weiboVolumeTrend";
|
|
import forumCommunicationTrend from "./forumCommunicationTrend";
|
|
import forumHotTopicDirection from "./forumHotTopicDirection";
|
|
import spreadTOPmodels from "./spreadTOPmodels";
|
|
import rearWingPropagationSituation from "./rearWingPropagationSituation";
|
|
import keyMedia from "./keyMedia";
|
|
import popularwordCloud from "./popularwordCloud";
|
|
//骨架屏
|
|
import brandDataStoken from "./brandDataStoken";
|
|
import brandTopStoken from "./brandTopStoken";
|
|
import titsopoStoken from "./titsopoStoken";
|
|
import popularEventsListStoken from "./popularEventsListStoken";
|
|
import popularEventsStoken from "./popularEventsStoken";
|
|
import weiboKolStoken from "./weiboKolStoken";
|
|
import weiboPortraitsStoken from "./weiboPortraitsStoken";
|
|
import weiboVolumeTrendStoken from "./weiboVolumeTrendStoken";
|
|
import forumCommunicationTrendStoken from "./forumCommunicationTrendStoken";
|
|
import forumHotTopicDirectionStoken from "./forumHotTopicDirectionStoken";
|
|
import spreadTOPmodelsStoken from "./spreadTOPmodelsStoken";
|
|
import rearWingPropagationSituationStoken from "./rearWingPropagationSituationStoken";
|
|
import keyMediaStoken from "./keyMediaStoken";
|
|
import popularwordCloudStoken from "./popularwordCloudStoken";
|
|
export default {
|
|
name: "BrandInsight",
|
|
inject: ['reload'],
|
|
components: {
|
|
brandData, // 品牌数据
|
|
brandTop, // 品牌top车型
|
|
titsopo, //舆情传播趋势
|
|
popularEventsList, //热门事件列表
|
|
popularEvents, // 热点事件
|
|
weiboKol, // 微博KOL
|
|
weiboPortraits, // 微博人物画像
|
|
weiboVolumeTrend, // 微博声量趋势
|
|
forumCommunicationTrend, //论坛传播态势
|
|
forumHotTopicDirection, // 论坛热议话题方向
|
|
spreadTOPmodels, // 传播TOP车型
|
|
rearWingPropagationSituation, // 尾翼传播态势
|
|
keyMedia, // 重点媒体
|
|
popularwordCloud, // 热门词云
|
|
//骨架屏
|
|
brandDataStoken, // 品牌数据
|
|
brandTopStoken, // 品牌top车型
|
|
titsopoStoken, //舆情传播趋势
|
|
popularEventsListStoken, //热门事件列表
|
|
popularEventsStoken, // 热点事件
|
|
weiboKolStoken, // 微博KOL
|
|
weiboPortraitsStoken, // 微博人物画像
|
|
weiboVolumeTrendStoken, // 微博声量趋势
|
|
forumCommunicationTrendStoken, //论坛传播态势
|
|
forumHotTopicDirectionStoken, // 论坛热议话题方向
|
|
spreadTOPmodelsStoken, // 传播TOP车型
|
|
rearWingPropagationSituationStoken, // 尾翼传播态势
|
|
keyMediaStoken, // 重点媒体
|
|
popularwordCloudStoken // 热门词云
|
|
},
|
|
data() {
|
|
return {
|
|
brandShow: false,
|
|
brand: "奥迪"
|
|
}
|
|
},
|
|
created() {
|
|
this.setHeaderType(3);
|
|
this.brand = this.getBrand.brandname || '奥迪';
|
|
},
|
|
methods: {
|
|
// 前往各个详情
|
|
goRouter(path, query = {}) {
|
|
this.$router.push({path: path, query: query});
|
|
},
|
|
// 打开选择品牌
|
|
openBrand() {
|
|
this.brandShow = true;
|
|
},
|
|
// 获得获取品牌
|
|
handlerBrand(arr) {
|
|
this.setBrand(arr[0]);
|
|
// this.setModel(arr[1]);
|
|
this.reload();
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.bdl-ouuter {
|
|
position: relative;
|
|
padding: 0px 16px 16px 16px;
|
|
}
|
|
.bdl-d1 {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
}
|
|
.bdl-d1-dd2 {
|
|
position: relative;
|
|
width: 620px;
|
|
height: 560px;
|
|
margin-left: 16px;
|
|
display: flex;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
.m1 {
|
|
position: absolute;
|
|
width: 274px;
|
|
height: 64px;
|
|
top: 0px;
|
|
transform: translate(0px);
|
|
cursor: pointer;
|
|
}
|
|
.m2 {
|
|
position: absolute;
|
|
width: 274px;
|
|
height: 64px;
|
|
bottom: 0px;
|
|
transform: translate(0px);
|
|
cursor: pointer;
|
|
}
|
|
.bdl-d1-dd2-d1 {
|
|
width: 470px;
|
|
height: 520px;
|
|
background-image: url("../../assets/images/BrandInsight/img_tz.png");
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
background-position: 0 40px;
|
|
.bdl-d1-dd2-d1-s1 {
|
|
display: block;
|
|
font-size: 40px;
|
|
color: #b2daf7;
|
|
width: 100%;
|
|
text-align: center;
|
|
margin-top: 150px;
|
|
}
|
|
}
|
|
}
|
|
.bdl-d2 {
|
|
width: 100%;
|
|
height: 460px;
|
|
border: 2px solid #0f2a4d;
|
|
margin-top: 16px;
|
|
.bdl-d2-bd {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
padding: 0px 16px 16px 16px;
|
|
}
|
|
}
|
|
.bdl-d3 {
|
|
width: 100%;
|
|
height: 460px;
|
|
border: 2px solid #0f2a4d;
|
|
margin-top: 16px;
|
|
overflow: hidden;
|
|
.bdl-d3-bd {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
padding: 0px 16px 16px 16px;
|
|
}
|
|
}
|
|
.bdl-d4 {
|
|
width: 100%;
|
|
height: 460px;
|
|
border: 2px solid #0f2a4d;
|
|
margin-top: 16px;
|
|
.bdl-d4-bd {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
padding: 0px 16px 16px 16px;
|
|
}
|
|
}
|
|
.bdl-d5 {
|
|
width: 100%;
|
|
height: 460px;
|
|
border: 2px solid #0f2a4d;
|
|
margin-top: 16px;
|
|
.bdl-d5-bd {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
padding: 0px 16px 16px 16px;
|
|
}
|
|
}
|
|
</style>
|