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.
330 lines
11 KiB
330 lines
11 KiB
<!--
|
|
* @Author: your name
|
|
* @Date: 2021-10-14 09:00:09
|
|
* @LastEditTime: 2021-10-16 15:54:30
|
|
* @LastEditors: Please set LastEditors
|
|
* @Description: 微博详情
|
|
* @FilePath: /data-show/src/views/WeiboDetails/index.vue
|
|
-->
|
|
<template>
|
|
<div class="d-container">
|
|
<div class="wd-outter">
|
|
<div class="wd-d1">
|
|
<v-label-div :title="'详情数据 - '+form.sBrand">
|
|
<v-tab-group-control v-if="form.sSource == '懂车帝'"
|
|
:btns="['全部', '车友圈']"
|
|
:active="getCarCircle"
|
|
@change="handlerTab" style="margin-right: 24px"
|
|
></v-tab-group-control>
|
|
<v-tab-group-control v-if="form.sSource == '汽车之家'"
|
|
:btns="['全部', '论坛']"
|
|
:active="getCarCircle"
|
|
@change="handlerTab" style="margin-right: 24px"
|
|
></v-tab-group-control>
|
|
<v-btn @click="goback">返回品牌洞察</v-btn>
|
|
</v-label-div>
|
|
<div class="wd-d1-bd">
|
|
<div class="d1"> {{ form.sSource }} </div>
|
|
<div class="d2" style="margin-left: 114px">
|
|
<img class="dd1" src="../../assets/images/BrandInsight/ic_xxzl.png" />
|
|
<div class="dd2">
|
|
<span class="s1">{{ total }}</span>
|
|
<span class="s2">信息总量</span>
|
|
</div>
|
|
</div>
|
|
<div class="d2">
|
|
<img class="dd1" src="../../assets/images/BrandInsight/ic_dvsl.png" />
|
|
<div class="dd2">
|
|
<span class="s1">{{ totalRep }}</span>
|
|
<span class="s2">互动人数</span>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="d2">
|
|
<img class="dd1" src="../../assets/images/BrandInsight/ic_yhs.png" />
|
|
<div class="dd2">
|
|
<span class="s1">{{ countObj.userCount }}</span>
|
|
<span class="s2">参与用户数</span>
|
|
</div>
|
|
</div> -->
|
|
<div class="d2">
|
|
<img class="dd1" src="../../assets/images/BrandInsight/ic_yqdx.png" />
|
|
<a-popover title="舆情调性">
|
|
<template slot="content">
|
|
<template v-for="(item, key) in countObj2">
|
|
<div class="pd-item" :key="key">
|
|
<span >{{key}}</span>
|
|
<span>{{item}}</span>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
<div class="dd3">
|
|
<span class="s3" :style="{ width: (countObj2['正面'] / total) * width + 'px' }" ></span>
|
|
<span class="s3" :style="{ width: (countObj2['中性'] / total) * width + 'px', background: '#54BF93',}"></span>
|
|
<span class="s3" :style="{ width: (countObj2['负面'] / total) * width + 'px', background: '#CC9D12',}"></span>
|
|
</div>
|
|
</a-popover>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="wd-d2" v-if="form.sSource == '新浪微博' || (form.sSource == '汽车之家') || (form.sSource == '懂车帝' && getCarCircle == 1)">
|
|
<vue-lazy-component>
|
|
<weibo-communication-trend></weibo-communication-trend>
|
|
<weiboCommunicationTrendStoken slot="skeleton"></weiboCommunicationTrendStoken>
|
|
</vue-lazy-component>
|
|
<spreadTOPmodels></spreadTOPmodels>
|
|
</div>
|
|
<div class="wd-d2" v-else>
|
|
<vue-lazy-component>
|
|
<weibo-communication-trend-long></weibo-communication-trend-long>
|
|
<weiboCommunicationTrendLongStoken slot="skeleton"></weiboCommunicationTrendLongStoken>
|
|
</vue-lazy-component>
|
|
</div>
|
|
<div class="wd-d3" v-if="form.sSource == '新浪微博' || (form.sSource == '汽车之家') || (form.sSource == '懂车帝' && getCarCircle == 1)"></div>
|
|
<div class="wd-d3" v-else>
|
|
<!-- <subscribeSeries></subscribeSeries> -->
|
|
<spreadTOPmodels></spreadTOPmodels>
|
|
<vue-lazy-component>
|
|
<weiboContentTOPVolume></weiboContentTOPVolume>
|
|
<weiboContentTOPVolumeStoken slot="skeleton"></weiboContentTOPVolumeStoken>
|
|
</vue-lazy-component>
|
|
</div>
|
|
<div class="wd-d4">
|
|
<vue-lazy-component>
|
|
<weiboContentType></weiboContentType>
|
|
<weiboContentTypeStoken slot="skeleton"></weiboContentTypeStoken>
|
|
</vue-lazy-component>
|
|
<vue-lazy-component>
|
|
<weiboCharacters></weiboCharacters>
|
|
<weiboCharactersStoken slot="skeleton"></weiboCharactersStoken>
|
|
</vue-lazy-component>
|
|
<vue-lazy-component>
|
|
<weiboWordCloud></weiboWordCloud>
|
|
<weiboWordCloudStoken slot="skeleton"></weiboWordCloudStoken>
|
|
</vue-lazy-component>
|
|
</div>
|
|
<div class="wd-d3" v-if="form.sSource == '新浪微博' || form.sSource == '汽车之家' || (form.sSource == '懂车帝' && getCarCircle == 1)">
|
|
<vue-lazy-component v-if="form.sSource == '新浪微博' || form.sSource == '汽车之家'">
|
|
<weiboUserActiveArea></weiboUserActiveArea>
|
|
<weiboUserActiveAreaStoken slot="skeleton"></weiboUserActiveAreaStoken>
|
|
</vue-lazy-component>
|
|
<popularEventsList v-if="form.sSource == '懂车帝' && getCarCircle == 1"></popularEventsList>
|
|
<vue-lazy-component>
|
|
<weiboContentTOPVolume></weiboContentTOPVolume>
|
|
<weiboContentTOPVolumeStoken slot="skeleton"></weiboContentTOPVolumeStoken>
|
|
</vue-lazy-component>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import weiboCommunicationTrend from "./weiboCommunicationTrend";
|
|
import weiboCommunicationTrendLong from "./weiboCommunicationTrendLong";
|
|
import weiboContentType from "./weiboContentType";
|
|
import weiboCharacters from "./weiboCharacters";
|
|
import weiboUserActiveArea from "./weiboUserActiveArea";
|
|
import weiboContentTOPVolume from "./weiboContentTOPVolume";
|
|
import weiboWordCloud from "./weiboWordCloud";
|
|
import spreadTOPmodels from "./spreadTOPmodels";
|
|
import subscribeSeries from "./subscribeSeries";
|
|
import popularEventsList from "./popularEventsList";
|
|
//骨架屏
|
|
import weiboCommunicationTrendStoken from "./weiboCommunicationTrendStoken";
|
|
import weiboCommunicationTrendLongStoken from "./weiboCommunicationTrendLongStoken";
|
|
import weiboContentTypeStoken from "./weiboContentTypeStoken";
|
|
import weiboCharactersStoken from "./weiboCharactersStoken";
|
|
import weiboUserActiveAreaStoken from "./weiboUserActiveAreaStoken";
|
|
import weiboContentTOPVolumeStoken from "./weiboContentTOPVolumeStoken";
|
|
import weiboWordCloudStoken from "./weiboWordCloudStoken";
|
|
import {getCountAndaffections} from "@/api/KeyMediaBrand/index.js"
|
|
export default {
|
|
name: "WeiboDetails",
|
|
inject: ['reload'],
|
|
components: {
|
|
weiboCommunicationTrend, // 微博传播趋势
|
|
weiboCommunicationTrendLong,
|
|
weiboContentType, // 微博内容类型
|
|
weiboCharacters, // 微博人物画像
|
|
weiboUserActiveArea, // 微博用户活跃地区
|
|
weiboContentTOPVolume, // 微博内容TOP声量
|
|
weiboWordCloud, // 词云分布
|
|
spreadTOPmodels, // 传播TOP车型
|
|
subscribeSeries, // 关注TOP车型
|
|
popularEventsList, //数据列表
|
|
//骨架屏
|
|
weiboCommunicationTrendStoken, // 微博传播趋势
|
|
weiboCommunicationTrendLongStoken,
|
|
weiboContentTypeStoken, // 微博内容类型
|
|
weiboCharactersStoken, // 微博人物画像
|
|
weiboUserActiveAreaStoken, // 微博用户活跃地区
|
|
weiboContentTOPVolumeStoken, // 微博内容TOP声量
|
|
weiboWordCloudStoken, // 词云分布
|
|
},
|
|
data() {
|
|
return {
|
|
width: 200,
|
|
form: {
|
|
token: "",
|
|
sBrand: "",
|
|
sSource: '',
|
|
ilimitType: 0,
|
|
},
|
|
countObj: {
|
|
carseriesCount: 0,
|
|
count: 0,
|
|
userCount: 0,
|
|
vCount: 0,
|
|
},
|
|
countObj2: {
|
|
正面: 0,
|
|
中性: 0,
|
|
负面: 0,
|
|
},
|
|
total: 0,
|
|
totalRep: 0,
|
|
};
|
|
},
|
|
created() {
|
|
this.form.token = this.getToken;
|
|
this.form.sBrand = this.getBrand.brandname || "奥迪";
|
|
this.form.sSource = this.$route.query.source || "抖音";
|
|
if(this.form.sSource == '汽车之家' && this.getCarCircle == 1) {
|
|
this.form.ilimitType = 1;
|
|
} else if (this.form.sSource == '懂车帝' && this.getCarCircle == 1) {
|
|
this.form.ilimitType = 2;
|
|
}
|
|
this.getData();
|
|
},
|
|
methods: {
|
|
goback() {
|
|
this.$router.go(-1);
|
|
},
|
|
getData() {
|
|
let obj = Object.assign({}, this.getCtime2, this.form);
|
|
// getBrandWeiBoCount0528(obj).then((res) => {
|
|
// let data = res.data;
|
|
// this.countObj = Object.assign(this.countObj, data);
|
|
// });
|
|
getCountAndaffections(obj).then(res => {
|
|
let data = res.data.Affections || {};
|
|
this.total = res.data.Count;
|
|
this.totalRep = res.data.ReplyCount;
|
|
this.countObj2 = {
|
|
正面: data[0].Value,
|
|
中性: data[1].Value,
|
|
负面: data[2].Value,
|
|
}
|
|
})
|
|
},
|
|
handlerTab(val) {
|
|
this.setCarCircle(val);
|
|
this.reload();
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.wd-outter {
|
|
padding: 0px 16px 16px 16px;
|
|
}
|
|
.wd-d1 {
|
|
width: 100%;
|
|
height: 222px;
|
|
border: 2px solid #0f2a4d;
|
|
.wd-d1-bd {
|
|
width: 100%;
|
|
height: calc(100% - 48px);
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
.d1 {
|
|
width: 150px;
|
|
height: 150px;
|
|
background-image: url("../../assets/images/BrandInsight/img_lq.png");
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
margin-left: 114px;
|
|
text-align: center;
|
|
line-height: 150px;
|
|
font-size: 24px;
|
|
color: #b2daf7;
|
|
}
|
|
.d2 {
|
|
width: 378px;
|
|
height: 82px;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
.dd1 {
|
|
width: 80px;
|
|
height: 80px;
|
|
}
|
|
.dd2 {
|
|
margin-left: 20px;
|
|
height: 100%;
|
|
.s1 {
|
|
display: block;
|
|
font-size: 34px;
|
|
font-family: Bebas;
|
|
color: #ffffff;
|
|
}
|
|
.s2 {
|
|
display: block;
|
|
font-size: 20px;
|
|
color: #8f969c;
|
|
}
|
|
}
|
|
.dd3 {
|
|
margin-left: 20px;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
.s3 {
|
|
width: 87px;
|
|
height: 33px;
|
|
display: inline-block;
|
|
margin-right: 2px;
|
|
background: #3373cc;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.wd-d2 {
|
|
width: 100%;
|
|
height: auto;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
margin-top: 16px;
|
|
}
|
|
.wd-d3 {
|
|
width: 100%;
|
|
height: auto;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
margin-top: 16px;
|
|
}
|
|
.wd-d4 {
|
|
width: 100%;
|
|
height: auto;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
margin-top: 16px;
|
|
}
|
|
.wd-d5 {
|
|
width: 100%;
|
|
height: auto;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
margin-top: 16px;
|
|
}
|
|
.pd-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
color: #fff;
|
|
border-bottom: 1px solid #173b6d;
|
|
padding: 10px;
|
|
}
|
|
</style>
|