张雄 3 years ago
parent b0bef8a3a0
commit 87056890b0

@ -75,7 +75,12 @@ export default {
});
},
goKeyMedia(item) {
console.log(item.label)
this.$router.push({
path: '/keyMediaBrand',
query: {
source: item.label
}
})
}
},
};

@ -14,44 +14,30 @@
<v-btn @click="goback"></v-btn>
</v-label-div>
<div class="wd-d1-bd">
<div class="d1">
{{ form.sBrand }}
</div>
<div class="d1"> {{ form.sSource }} </div>
<div class="d2" style="margin-left: 114px">
<img
class="dd1"
src="../../assets/images/BrandInsight/ic_xxzl.png"
/>
<img class="dd1" src="../../assets/images/BrandInsight/ic_xxzl.png" />
<div class="dd2">
<span class="s1">{{ countObj.count }}</span>
<span class="s1">{{ total }}</span>
<span class="s2">信息总量</span>
</div>
</div>
<div class="d2">
<img
class="dd1"
src="../../assets/images/BrandInsight/ic_dvsl.png"
/>
<img class="dd1" src="../../assets/images/BrandInsight/ic_dvsl.png" />
<div class="dd2">
<span class="s1">{{ countObj.vCount }}</span>
<span class="s2">参与大V数量</span>
<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="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> -->
<div class="d2">
<img
class="dd1"
src="../../assets/images/BrandInsight/ic_yqdx.png"
/>
<img class="dd1" src="../../assets/images/BrandInsight/ic_yqdx.png" />
<a-popover title="舆情调性">
<template slot="content">
<template v-for="(item, key) in countObj2">
@ -62,24 +48,9 @@
</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>
<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>
@ -91,50 +62,32 @@
<weiboCommunicationTrendStoken slot="skeleton"></weiboCommunicationTrendStoken>
</vue-lazy-component>
<vue-lazy-component>
<weiboContentType></weiboContentType>
<weiboContentTypeStoken slot="skeleton"></weiboContentTypeStoken>
</vue-lazy-component>
<vue-lazy-component>
<weiboCharacters></weiboCharacters>
<weiboCharactersStoken slot="skeleton"></weiboCharactersStoken>
<weiboContentTOPVolume></weiboContentTOPVolume>
<weiboContentTOPVolumeStoken slot="skeleton"></weiboContentTOPVolumeStoken>
</vue-lazy-component>
</div>
<div class="wd-d3">
<!-- <div class="wd-d3">
<vue-lazy-component>
<weiboUserActiveArea></weiboUserActiveArea>
<weiboUserActiveAreaStoken slot="skeleton"></weiboUserActiveAreaStoken>
</vue-lazy-component>
<vue-lazy-component>
<weiboContentTOPVolume></weiboContentTOPVolume>
<weiboContentTOPVolumeStoken slot="skeleton"></weiboContentTOPVolumeStoken>
</vue-lazy-component>
</div> -->
<div class="wd-d3">
<subscribeSeries></subscribeSeries>
<spreadTOPmodels></spreadTOPmodels>
</div>
<div class="wd-d4">
<vue-lazy-component>
<modelPopularity></modelPopularity>
<modelPopularityStoken slot="skeleton"></modelPopularityStoken>
</vue-lazy-component>
<vue-lazy-component>
<weiboWordCloud></weiboWordCloud>
<weiboWordCloudStoken slot="skeleton"></weiboWordCloudStoken>
</vue-lazy-component>
<vue-lazy-component>
<weiboSpreadFission></weiboSpreadFission>
<weiboSpreadFissionStoken slot="skeleton"></weiboSpreadFissionStoken>
</vue-lazy-component>
<vue-lazy-component>
<weiboTonalDistribution></weiboTonalDistribution>
<weiboTonalDistributionStoken slot="skeleton"></weiboTonalDistributionStoken>
<weiboContentType></weiboContentType>
<weiboContentTypeStoken slot="skeleton"></weiboContentTypeStoken>
</vue-lazy-component>
</div>
<div class="wd-d5">
<vue-lazy-component>
<positiveViewKOL></positiveViewKOL>
<positiveViewKOLStoken slot="skeleton"></positiveViewKOLStoken>
<weiboCharacters></weiboCharacters>
<weiboCharactersStoken slot="skeleton"></weiboCharactersStoken>
</vue-lazy-component>
<vue-lazy-component>
<negativeOpinionKOL></negativeOpinionKOL>
<negativeOpinionKOLStoken slot="skeleton"></negativeOpinionKOLStoken>
<weiboWordCloud></weiboWordCloud>
<weiboWordCloudStoken slot="skeleton"></weiboWordCloudStoken>
</vue-lazy-component>
</div>
</div>
@ -147,26 +100,17 @@ import weiboContentType from "./weiboContentType";
import weiboCharacters from "./weiboCharacters";
import weiboUserActiveArea from "./weiboUserActiveArea";
import weiboContentTOPVolume from "./weiboContentTOPVolume";
import modelPopularity from "./modelPopularity";
import weiboWordCloud from "./weiboWordCloud";
import weiboSpreadFission from "./weiboSpreadFission";
import weiboTonalDistribution from "./weiboTonalDistribution";
import positiveViewKOL from "./positiveViewKOL";
import negativeOpinionKOL from "./negativeOpinionKOL";
import spreadTOPmodels from "./spreadTOPmodels";
import subscribeSeries from "./subscribeSeries";
//
import weiboCommunicationTrendStoken from "./weiboCommunicationTrendStoken";
import weiboContentTypeStoken from "./weiboContentTypeStoken";
import weiboCharactersStoken from "./weiboCharactersStoken";
import weiboUserActiveAreaStoken from "./weiboUserActiveAreaStoken";
import weiboContentTOPVolumeStoken from "./weiboContentTOPVolumeStoken";
import modelPopularityStoken from "./modelPopularityStoken";
import weiboWordCloudStoken from "./weiboWordCloudStoken";
import weiboSpreadFissionStoken from "./weiboSpreadFissionStoken";
import weiboTonalDistributionStoken from "./weiboTonalDistributionStoken";
import positiveViewKOLStoken from "./positiveViewKOLStoken";
import negativeOpinionKOLStoken from "./negativeOpinionKOLStoken";
import { getBrandWeiBoCount0528 } from "@/api/WeiboDetails/index.js";
import { getAffections } from "@/api/WeiboDetails/index.js";
import {getCountAndaffections} from "@/api/KeyMediaBrand/index.js"
export default {
name: "WeiboDetails",
components: {
@ -175,24 +119,16 @@ export default {
weiboCharacters, //
weiboUserActiveArea, //
weiboContentTOPVolume, // TOP
modelPopularity, //
weiboWordCloud, //
weiboSpreadFission, //
weiboTonalDistribution, //
positiveViewKOL, // KOL
negativeOpinionKOL, // KOL
spreadTOPmodels, // TOP
subscribeSeries, // TOP
//
weiboCommunicationTrendStoken, //
weiboContentTypeStoken, //
weiboCharactersStoken, //
weiboUserActiveAreaStoken, //
weiboContentTOPVolumeStoken, // TOP
modelPopularityStoken, //
weiboWordCloudStoken, //
weiboSpreadFissionStoken, //
weiboTonalDistributionStoken, //
positiveViewKOLStoken, // KOL
negativeOpinionKOLStoken, // KOL
},
data() {
return {
@ -200,6 +136,8 @@ export default {
form: {
token: "",
sBrand: "",
sSource: '',
ilimitType: 0,
},
countObj: {
carseriesCount: 0,
@ -213,11 +151,18 @@ export default {
负面: 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.form.ilimitType = 1;
} else if (this.form.sSource == '懂车帝') {
this.form.ilimitType = 2;
}
this.getData();
},
methods: {
@ -226,19 +171,20 @@ export default {
},
getData() {
let obj = Object.assign({}, this.getCtime2, this.form);
getBrandWeiBoCount0528(obj).then((res) => {
let data = res.data;
this.countObj = Object.assign(this.countObj, data);
});
getAffections(obj).then((res) => {
let data = res.data || {};
let total = 0;
for (let key in data) {
total += data[key] * 1;
// 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,
}
this.countObj2 = Object.assign(this.countObj2, data);
this.total = total;
});
})
},
},
};

@ -1,183 +0,0 @@
<!--
* @Author: your name
* @Date: 2021-10-14 18:42:40
* @LastEditTime: 2021-11-09 11:58:09
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/WeiboDetails/modelPopularity/index.vue
-->
<template>
<div class="mp-outter" v-loading="load">
<v-label-div title="车型热度">
<div>
<v-tab-group
:btns="['热门', '热赞', '热议', '热转']"
@change="handlerTab"
></v-tab-group>
</div>
</v-label-div>
<div class="mp-inner">
<v-ranking-mpth
v-for="(item, index) in labelArr"
:key="index"
:num="index + 1"
:label="item.key"
:val="item.value"
></v-ranking-mpth>
</div>
</div>
</template>
<script>
import { getCartypeWeiBo0528 } from "@/api/WeiboDetails/index.js";
import { getTopCarseriesObj } from "@/api/WeiboDetails/index.js";
import vRankingMpth from "./v-ranking-mpth";
export default {
name: "modelPopularity",
data() {
return {
load: false,
form: {
sBrand: "",
token: "",
iType: "",
},
labelArr: [],
hotSeries: [],
hotTypes: [],
hotComs: [],
hotTrans: [],
};
},
components: {
vRankingMpth,
},
created() {
this.form.token = this.getToken;
this.form.sBrand = this.getBrand.brandname || '奥迪';
this.getData();
},
methods: {
getData() {
this.load = true;
Promise.all([
this.getHotSeries(),
this.getHotTypes(),
this.getHotComs(),
this.getHotTrans(),
]).then(() => {
//
this.handlerTab(0);
this.load = false;
});
},
//
getHotSeries() {
return new Promise((resolve, reject) => {
this.form.iType = "";
let obj = Object.assign({}, this.getCtime2, this.form);
getCartypeWeiBo0528(obj)
.then((res) => {
let data = res.data || {};
this.hotSeries = this.toArr(data);
resolve(res);
})
.catch(() => {
reject(false);
});
});
},
//
getHotTypes() {
return new Promise((resolve, reject) => {
this.form.iType = 1; //
let obj = Object.assign({}, this.getCtime2, this.form);
getTopCarseriesObj(obj)
.then((res) => {
this.hotTypes = res.data;
resolve(res);
})
.catch(() => {
reject(false);
});
});
},
//
getHotComs() {
return new Promise((resolve, reject) => {
this.form.iType = 2;
let obj = Object.assign({}, this.getCtime2, this.form);
getTopCarseriesObj(obj)
.then((res) => {
this.hotComs = res.data;
resolve(res);
})
.catch(() => {
reject(false);
});
});
},
//
getHotTrans() {
return new Promise((resolve, reject) => {
this.form.iType = 3;
let obj = Object.assign({}, this.getCtime2, this.form);
getTopCarseriesObj(obj)
.then((res) => {
this.hotTrans = res.data;
resolve(res);
})
.catch(() => {
reject(false);
});
});
},
//
toArr(obj) {
let arr = [];
for (let key in obj) {
let o = {
key: key,
value: obj[key],
};
arr.push(o);
}
return arr;
},
//
handlerTab(n) {
switch (n) {
case 0:
this.labelArr = this.hotSeries;
break;
case 1:
this.labelArr = this.hotTypes;
break;
case 2:
this.labelArr = this.hotComs;
break;
case 3:
this.labelArr = this.hotTrans;
break;
default:
this.labelArr = this.hotSeries;
break;
}
},
},
};
</script>
<style lang="less" scoped>
.mp-outter {
width: 460px;
height: 460px;
border: 2px solid #0f2a4d;
.mp-inner {
padding: 0px 16px 16px 16px;
}
}
</style>

@ -1,230 +0,0 @@
<!--
* @Author: your name
* @Date: 2021-10-08 16:44:08
* @LastEditTime: 2021-10-14 19:01:34
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/components/v-ranking/index.vue
-->
<template>
<div class="v-r-container">
<div class="v-r-line" v-if="lineShow"></div>
<div class="v-r-inner">
<div :class="ls">
<span class="s1">{{ num|numStr }}</span>
</div>
<div :class="rs">
<span class="v-r-label">{{label}}</span>
<div class="v-r-res">
<span class="s1">传播量</span>
<span class="s2">{{val}}</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "v-ranking-fhtd",
props: {
num: {
type: [String, Number],
default: 1,
},
val: {
type: [String, Number],
default: 0
},
label: {
type: String,
default: ""
},
lineShow: {
type: Boolean,
default: true
},
},
watch: {
num: {
handler(val) {
if(val == 1) {
this.ls = "v-r-left-1"
this.rs = "v-r-right-1"
} else if(val == 2) {
this.ls = "v-r-left-2"
this.rs = "v-r-right-2"
} else if(val == 3) {
this.ls = "v-r-left-3"
this.rs = "v-r-right-3"
} else {
this.ls = "v-r-left"
this.rs = "v-r-right"
}
},
immediate: true
}
},
data() {
return {
ls: "v-r-left",
rs: "v-r-right"
}
},
filters: {
numStr(val) {
let str = ""
if(0<val && val<10) {
str = '0' + val
} else {
str = val + ''
}
return str
}
}
};
</script>
<style lang="less" scoped>
.v-r-container {
width: 428px;
height: auto;
.v-r-line {
width: 100%;
height: 1px;
background:#0a1d3b;
margin-top: 16px;
margin-bottom: 16px;
}
.v-r-inner {
position: relative;
width: 100%;
height: 48px;
margin-top: 16px;
color: #fff;
background: #0a1d3b;
border-radius: 2px;
}
.v-r-label {
display: block;
font-size: 14px;
color: #FFFFFF;
margin-left: 40px;
font-weight: bold;
}
.v-r-res {
margin-right: 16px;
span {
display: block;
text-align: right;
font-size: 12px;
}
.s1 {
color: #9ba4af;
}
.s2 {
color: #fff;
font-family: Bebas;
}
}
.v-r-left {
width: 48px;
height: 48px;
text-align: center;
line-height: 48px;
.s1 {
color: #ffffff;
font-size: 16px;
line-height: 48px;
font-family: Bebas;
}
}
.v-r-right {
position: absolute;
width: 402px;
height: 48px;
border-top: 2px solid transparent;
top: 0px;
left: 24px;
display: flex;
justify-content: space-between;
align-items: center;
}
.v-r-left-1 {
width: 48px;
height: 48px;
text-align: center;
border: 2px solid #cc9d12;
border-radius: 48px;
.s1 {
color: #ffffff;
font-size: 16px;
line-height: 42px;
text-shadow: 0px 0px 8px #cc9d12;
font-family: Bebas;
}
}
.v-r-right-1 {
position: absolute;
width: 402px;
height: 48px;
border-top: 2px solid #CC9D12;
top: 0px;
left: 24px;
display: flex;
justify-content: space-between;
align-items: center;
}
.v-r-left-2 {
width: 48px;
height: 48px;
text-align: center;
border: 2px solid #3373CC;
border-radius: 48px;
.s1 {
color: #ffffff;
font-size: 16px;
line-height: 42px;
text-shadow: 0px 0px 8px #3373CC;
font-family: Bebas;
}
}
.v-r-right-2 {
position: absolute;
width: 402px;
height: 48px;
border-top: 2px solid #3373CC;
top: 0px;
left: 24px;
display: flex;
justify-content: space-between;
align-items: center;
}
.v-r-left-3 {
width: 48px;
height: 48px;
text-align: center;
border: 2px solid #54BF93;
border-radius: 48px;
.s1 {
color: #ffffff;
font-size: 16px;
line-height: 42px;
text-shadow: 0px 0px 8px #54BF93;
font-family: Bebas;
}
}
.v-r-right-3 {
position: absolute;
width: 402px;
height: 48px;
border-top: 2px solid #54BF93;
top: 0px;
left: 24px;
display: flex;
justify-content: space-between;
align-items: center;
}
}
</style>

@ -1,39 +0,0 @@
<!--
* @Author: your name
* @Date: 2021-10-14 18:42:40
* @LastEditTime: 2021-11-09 11:58:09
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/WeiboDetails/modelPopularity/index.vue
-->
<template>
<div class="mp-outter">
</div>
</template>
<script>
export default {
name: "modelPopularity",
data() {
return {
form: {
sBrand: "",
token: "",
iType: "",
},
};
},
};
</script>
<style lang="less" scoped>
.mp-outter {
width: 460px;
height: 460px;
border: 2px solid #0f2a4d;
.mp-inner {
padding: 0px 16px 16px 16px;
}
}
</style>

@ -1,138 +0,0 @@
<!--
* @Author: your name
* @Date: 2021-10-16 15:18:44
* @LastEditTime: 2021-11-09 13:14:13
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/WeiboDetails/positiveViewKOL/index.vue
-->
<template>
<div class="pv-outter" v-loading="load">
<v-label-div title="负面观点KOL">
</v-label-div>
<div class="pv-inner">
<div class="pv-item" v-for="(item,index) in ds" :key="index">
<div class="dm">
<img class="dm-m1" :src="item.url"/>
</div>
<div class="d-f">
<div class="d1">{{item.title}}</div>
<div class="d2">粉丝数<span class="d2-s1">{{item.fans}}</span></div>
</div>
</div>
</div>
</div>
</template>
<script>
import {getCoreDiffuseWeiBo0528} from "@/api/WeiboDetails"
export default {
name: "negativeOpinionKOL",
data() {
return {
ds:[],
load: false,
form: {
sBrand: "",
sQingGan: "2",
iSize: 6,
token: "",
},
}
},
created() {
this.form.token = this.getToken;
this.form.sBrand = this.getBrand.brandname || '奥迪';
this.getData();
},
methods: {
getData() {
let obj = Object.assign({}, this.getCtime2, this.form);
this.load = true;
getCoreDiffuseWeiBo0528(obj).then(res => {
let data = res.data || [];
//: data._sourse.user_author
//: data._sourse.weibofans
//: data._sourse.profileimgurl
let arr = [];
data.forEach((ele) => {
let o={
title: ele._source.user_author,
fans: ele._source.weibofans,
url: ele._source.profileimgurl
};
arr.push(o);
})
this.ds = arr;
this.load = false;
});
},
}
};
</script>
<style lang="less" scoped>
.pv-outter {
width: 936px;
height: 246px;
border: 2px solid #0f2a4d;
margin-left: 16px;
.pv-inner {
width: 100%;
height: calc(100% - 48px);
padding: 0px 0px 16px 16px;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
.pv-item {
width: 285px;
height: 72px;
display: flex;
justify-content: flex-start;
align-items: center;
position: relative;
margin-right: 16px;
margin-top: 16px;
.dm {
position: absolute;
width: 72px;
height: 72px;
border-radius: 72px;
border: 1px solid #ccc;
left: 0px;
top: 0px;
background-color: #fff;
z-index: 10;
.dm-m1 {
width: 100%;
height: 100%;
border-radius: 100%;
}
}
.d-f {
position: absolute;
width: 249px;
height: 64px;
left: 36px;
padding-left: 65px;
background-image: url("../../../assets/images/BrandInsight/img_yhtx.png");
.d1 {
font-size: 14px;
color: #fff;
font-weight: 500;
margin-top: 10px;
}
.d2 {
color: #70869a;
font-size: 12px;
.d2-s1 {
font-size: 12px;
font-family: Bebas;
color: #f49847;
}
}
}
}
}
}
</style>

@ -1,94 +0,0 @@
<!--
* @Author: your name
* @Date: 2021-10-16 15:18:44
* @LastEditTime: 2021-11-09 13:14:13
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/WeiboDetails/positiveViewKOL/index.vue
-->
<template>
<div class="pv-outter">
</div>
</template>
<script>
export default {
name: "negativeOpinionKOL",
data() {
return {
form: {
sBrand: "",
sQingGan: "2",
iSize: 6,
token: "",
},
}
},
};
</script>
<style lang="less" scoped>
.pv-outter {
width: 936px;
height: 246px;
border: 2px solid #0f2a4d;
margin-left: 16px;
.pv-inner {
width: 100%;
height: calc(100% - 48px);
padding: 0px 0px 16px 16px;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
.pv-item {
width: 285px;
height: 72px;
display: flex;
justify-content: flex-start;
align-items: center;
position: relative;
margin-right: 16px;
margin-top: 16px;
.dm {
position: absolute;
width: 72px;
height: 72px;
border-radius: 72px;
border: 1px solid #ccc;
left: 0px;
top: 0px;
background-color: #fff;
z-index: 10;
.dm-m1 {
width: 100%;
height: 100%;
border-radius: 100%;
}
}
.d-f {
position: absolute;
width: 249px;
height: 64px;
left: 36px;
padding-left: 65px;
background-image: url("../../../assets/images/BrandInsight/img_yhtx.png");
.d1 {
font-size: 14px;
color: #fff;
font-weight: 500;
margin-top: 10px;
}
.d2 {
color: #70869a;
font-size: 12px;
.d2-s1 {
font-size: 12px;
font-family: Bebas;
color: #f49847;
}
}
}
}
}
}
</style>

@ -1,138 +0,0 @@
<!--
* @Author: your name
* @Date: 2021-10-16 15:18:44
* @LastEditTime: 2021-11-09 13:15:15
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/WeiboDetails/positiveViewKOL/index.vue
-->
<template>
<div class="pv-outter" v-loading="load">
<v-label-div title="正面观点KOL"> </v-label-div>
<div class="pv-inner">
<div class="pv-item" v-for="(item, index) in ds" :key="index">
<div class="dm">
<img class="dm-m1" :src="item.url"/>
</div>
<div class="d-f">
<div class="d1">{{ item.title }}</div>
<div class="d2">
粉丝数<span class="d2-s1">{{ item.fans }}</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { getCoreDiffuseWeiBo0528 } from "@/api/WeiboDetails";
export default {
name: "positiveViewKOL",
data() {
return {
ds: [],
load: false,
form: {
sBrand: "",
sQingGan: "1",
iSize: 6,
token: "",
},
};
},
created() {
this.form.token = this.getToken;
this.form.sBrand = this.getBrand.brandname || '奥迪';
this.getData();
},
methods: {
getData() {
let obj = Object.assign({}, this.getCtime2, this.form);
this.load = true;
getCoreDiffuseWeiBo0528(obj).then((res) => {
let data = res.data || [];
//: data._sourse.user_author
//: data._sourse.weibofans
//: data._sourse.profileimgurl
let arr = [];
data.forEach((ele) => {
let o = {
title: ele._source.user_author,
fans: ele._source.weibofans,
url: ele._source.profileimgurl,
};
arr.push(o);
});
this.ds = arr;
this.load = false;
});
},
},
};
</script>
<style lang="less" scoped>
.pv-outter {
width: 936px;
height: 246px;
border: 2px solid #0f2a4d;
.pv-inner {
width: 100%;
height: calc(100% - 48px);
padding: 0px 0px 16px 16px;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
.pv-item {
width: 285px;
height: 72px;
display: flex;
justify-content: flex-start;
align-items: center;
position: relative;
margin-right: 16px;
margin-top: 16px;
.dm {
position: absolute;
width: 72px;
height: 72px;
border-radius: 72px;
border: 1px solid #ccc;
left: 0px;
top: 0px;
background-color: #fff;
z-index: 10;
.dm-m1 {
width: 100%;
height: 100%;
border-radius: 100%;
}
}
.d-f {
position: absolute;
width: 249px;
height: 64px;
left: 36px;
padding-left: 65px;
background-image: url("../../../assets/images/BrandInsight/img_yhtx.png");
.d1 {
font-size: 14px;
color: #fff;
font-weight: 500;
margin-top: 10px;
}
.d2 {
color: #70869a;
font-size: 12px;
.d2-s1 {
font-size: 12px;
font-family: Bebas;
color: #f49847;
}
}
}
}
}
}
</style>

@ -1,93 +0,0 @@
<!--
* @Author: your name
* @Date: 2021-10-16 15:18:44
* @LastEditTime: 2021-11-09 13:15:15
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/WeiboDetails/positiveViewKOL/index.vue
-->
<template>
<div class="pv-outter">
</div>
</template>
<script>
export default {
name: "positiveViewKOL",
data() {
return {
form: {
sBrand: "",
sQingGan: "1",
iSize: 6,
token: "",
},
};
},
};
</script>
<style lang="less" scoped>
.pv-outter {
width: 936px;
height: 246px;
border: 2px solid #0f2a4d;
.pv-inner {
width: 100%;
height: calc(100% - 48px);
padding: 0px 0px 16px 16px;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
.pv-item {
width: 285px;
height: 72px;
display: flex;
justify-content: flex-start;
align-items: center;
position: relative;
margin-right: 16px;
margin-top: 16px;
.dm {
position: absolute;
width: 72px;
height: 72px;
border-radius: 72px;
border: 1px solid #ccc;
left: 0px;
top: 0px;
background-color: #fff;
z-index: 10;
.dm-m1 {
width: 100%;
height: 100%;
border-radius: 100%;
}
}
.d-f {
position: absolute;
width: 249px;
height: 64px;
left: 36px;
padding-left: 65px;
background-image: url("../../../assets/images/BrandInsight/img_yhtx.png");
.d1 {
font-size: 14px;
color: #fff;
font-weight: 500;
margin-top: 10px;
}
.d2 {
color: #70869a;
font-size: 12px;
.d2-s1 {
font-size: 12px;
font-family: Bebas;
color: #f49847;
}
}
}
}
}
}
</style>

@ -0,0 +1,82 @@
<!--
* @Author: your name
* @Date: 2021-10-12 18:18:20
* @LastEditTime: 2021-11-01 09:59:18
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandInsight/spreadTOPmodels/index.vue
-->
<template>
<div class="stm-outter" v-loading="load">
<v-label-div title="传播声量TOP车型" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
<div class="stm-inner">
<v-echarts :opt="opt" @getData="clickEchars"></v-echarts>
</div>
</div>
</template>
<script>
import {getCartypeTop10} from "@/api/KeyMediaBrand/index.js"
import createOpt from "./opt"
export default {
name: "spreadTOPmodels",
data() {
return {
load: false,
form: {
sBrand: "",
token: "",
sSource: '',
ilimitType: 0,
},
opt: {}
}
},
created() {
this.form.token = this.getToken;
this.form.sBrand = this.getBrand.brandname || "奥迪";
this.form.sSource = this.$route.query.source || "抖音";
if(this.form.sSource == '汽车之家') {
this.form.ilimitType = 1;
} else if (this.form.sSource == '懂车帝') {
this.form.ilimitType = 2;
}
this.getData();
},
methods: {
getData() {
let obj = Object.assign({},this.getCtime2, this.form);
this.load = true;
getCartypeTop10(obj).then(res => {
let data = res.data || {};
let dx = [];
let ds = [];
for(let key in data) {
dx.push(key);
ds.push(data[key])
}
this.opt = createOpt(dx, ds);
this.load = false;
})
},
clickEchars(data) {
let ele = data;
let model = ele.axisValueLabel;
this.setModel({name: model});
this.$router.push("/modelInsight");
}
}
}
</script>
<style lang="less" scoped>
.stm-outter {
width: 936px;
height: 412px;
border: 2px solid #0f2a4d;
margin-left: 16px;
.stm-inner {
width: 100%;
height: calc(100% - 48px);
}
}
</style>

@ -0,0 +1,111 @@
/*
* @Author: your name
* @Date: 2021-10-12 18:23:25
* @LastEditTime: 2021-10-12 18:31:20
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandInsight/spreadTOPmodels/opt.js
*/
import * as echarts from "echarts";
import { bigNumberTransform } from "@/utils/gol/dataTool"
export default function createOpt(dx,ds) {
return {
grid: {
top: "10%",
left: "16px",
right: "5%",
bottom: "16px",
containLabel: true,
},
tooltip: {
trigger: "axis",
backgroundColor: "#08182F",
color: "#fff",
borderColor: "#3373CC",
textStyle: {
color: "#fff", //设置文字颜色
},
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
formatter: function (params) {
var result = "";
var dotHtml =
'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#1197b8"></span>';
params.forEach(function (item) {
result += item.axisValue + "</br>" + dotHtml + item.data;
});
return result;
},
},
xAxis: {
type: "category",
axisTick: {
show: false,
},
axisLine: {
show: false,
lineStyle: {
color: "#fff",
},
},
data: dx,
},
yAxis: {
type: "value",
axisLine: {
show: false,
lineStyle: {
color: "#FFF",
},
},
axisLabel: {
formatter: (value) => {
let str = bigNumberTransform(value);
return str;
}
},
splitLine: {
lineStyle: {
type: "dashed", // y轴分割线类型
color: "#012b4b",
},
},
},
series: [
{
name: "2001",
data: ds,
type: "bar",
barWidth: 24,
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: '#fff',
fontSize: 14
}
},
color: new echarts.graphic.LinearGradient(
0,
1,
0,
0,
[
{
offset: 0,
color: "rgba(99,187,143,0.4)", // 0% 处的颜色
},
{
offset: 1,
color: "#51bc8f", // 100% 处的颜色#3373CC
},
],
false
),
},
},
},
],
}
}

@ -0,0 +1,81 @@
<!--
* @Author: your name
* @Date: 2021-10-12 18:18:20
* @LastEditTime: 2021-11-01 09:59:18
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandInsight/spreadTOPmodels/index.vue
-->
<template>
<div class="stm-outter" v-loading="load">
<v-label-div title="关注TOP车型" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
<div class="stm-inner">
<v-echarts :opt="opt" @getData="clickEchars"></v-echarts>
</div>
</div>
</template>
<script>
import {getGuanZhuSeriesname} from "@/api/KeyMediaBrand/index.js"
import createOpt from "./opt"
export default {
name: "spreadTOPmodels",
data() {
return {
load: false,
form: {
sBrand: "",
token: "",
sSource: '',
ilimitType: 0,
},
opt: {}
}
},
created() {
this.form.token = this.getToken;
this.form.sBrand = this.getBrand.brandname || "奥迪";
this.form.sSource = this.$route.query.source || "抖音";
if(this.form.sSource == '汽车之家') {
this.form.ilimitType = 1;
} else if (this.form.sSource == '懂车帝') {
this.form.ilimitType = 2;
}
this.getData();
},
methods: {
getData() {
let obj = Object.assign({},this.getCtime2, this.form);
this.load = true;
getGuanZhuSeriesname(obj).then(res => {
let data = res.data || {};
let dx = [];
let ds = [];
for(let key in data) {
dx.push(key);
ds.push(data[key])
}
this.opt = createOpt(dx, ds);
this.load = false;
})
},
clickEchars(data) {
let ele = data;
let model = ele.axisValueLabel;
this.setModel({name: model});
this.$router.push("/modelInsight");
}
}
}
</script>
<style lang="less" scoped>
.stm-outter {
width: 936px;
height: 412px;
border: 2px solid #0f2a4d;
.stm-inner {
width: 100%;
height: calc(100% - 48px);
}
}
</style>

@ -0,0 +1,111 @@
/*
* @Author: your name
* @Date: 2021-10-12 18:23:25
* @LastEditTime: 2021-10-12 18:31:20
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandInsight/spreadTOPmodels/opt.js
*/
import * as echarts from "echarts";
import { bigNumberTransform } from "@/utils/gol/dataTool"
export default function createOpt(dx,ds) {
return {
grid: {
top: "10%",
left: "16px",
right: "5%",
bottom: "16px",
containLabel: true,
},
tooltip: {
trigger: "axis",
backgroundColor: "#08182F",
color: "#fff",
borderColor: "#3373CC",
textStyle: {
color: "#fff", //设置文字颜色
},
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
formatter: function (params) {
var result = "";
var dotHtml =
'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#1197b8"></span>';
params.forEach(function (item) {
result += item.axisValue + "</br>" + dotHtml + item.data;
});
return result;
},
},
xAxis: {
type: "category",
axisTick: {
show: false,
},
axisLine: {
show: false,
lineStyle: {
color: "#fff",
},
},
data: dx,
},
yAxis: {
type: "value",
axisLine: {
show: false,
lineStyle: {
color: "#FFF",
},
},
axisLabel: {
formatter: (value) => {
let str = bigNumberTransform(value);
return str;
}
},
splitLine: {
lineStyle: {
type: "dashed", // y轴分割线类型
color: "#012b4b",
},
},
},
series: [
{
name: "2001",
data: ds,
type: "bar",
barWidth: 24,
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: '#fff',
fontSize: 14
}
},
color: new echarts.graphic.LinearGradient(
0,
1,
0,
0,
[
{
offset: 0,
color: "#CC9D1240", // 0% 处的颜色
},
{
offset: 1,
color: "#CC9D12", // 100% 处的颜色#3373CC
},
],
false
),
},
},
},
],
}
}

@ -8,10 +8,10 @@
-->
<template>
<div class="wc-outter" v-loading="load">
<v-label-div title="微博人物画像">
<v-label-div title="内容分布">
<div>
<v-tab-group
:btns="['性别', '认证', '地区']"
:btns="['认证', '精华', '图文']"
@change="handlerTab"
></v-tab-group>
</div>
@ -25,9 +25,9 @@
<v-label-ctx
v-for="(item, index) in labelArr"
:key="index"
:label="item.key"
:cont="item.value"
:percentage="((item.value / total) * 100).toFixed(2) + '%'"
:label="item.Key"
:cont="item.Value"
:percentage="((item.Value / total) * 100).toFixed(2) + '%'"
:color="colors[index]"
:eStyle="{ height: '8.54rem' }"
></v-label-ctx>
@ -36,9 +36,9 @@
<v-label-ctx
v-for="(item, index) in labelArr"
:key="index"
:label="item.key"
:cont="item.value"
:percentage="((item.value / total) * 100).toFixed(2) + '%'"
:label="item.Key"
:cont="item.Value"
:percentage="((item.Value / total) * 100).toFixed(2) + '%'"
:color="colors[index]"
:eStyle="{ height: '5.14rem' }"
></v-label-ctx>
@ -50,6 +50,7 @@
<script>
import { getSexMergeWeiBo } from "@/api/WeiboDetails";
import {getUserAttestationGroupBy, getIsjingGroupBy, getPicboolGroupBy} from "@/api/KeyMediaBrand/index.js";
import createOpt from "./opt";
export default {
name: "weiboCharacters",
@ -59,6 +60,8 @@ export default {
form: {
sBrand: "",
token: "",
sSource: '',
ilimitType: 0,
},
RegionWeiBo: [],
attestation: [],
@ -92,24 +95,24 @@ export default {
};
},
created() {
this.form.token = this.getToken;
this.form.sBrand = this.getBrand.brandname || '奥迪';
this.getData();
this.form.token = this.getToken;
this.form.sBrand = this.getBrand.brandname || "奥迪";
this.form.sSource = this.$route.query.source || "抖音";
if(this.form.sSource == '汽车之家') {
this.form.ilimitType = 1;
} else if (this.form.sSource == '懂车帝') {
this.form.ilimitType = 2;
}
this.getData();
},
methods: {
//
getData() {
let obj = Object.assign({}, this.getCtime2, this.form);
this.load = true;
getSexMergeWeiBo(obj).then((res) => {
// this.load = true;
getUserAttestationGroupBy(obj).then((res) => {
let data = res.data || {};
let RegionWeiBo = data.RegionWeiBo;
let attestation = data.attestation;
let sex = data.sex;
this.RegionWeiBo = this.toArr(RegionWeiBo);
this.attestation = this.toArr(attestation);
this.sex = this.toArr(sex);
this.doVal(this.sex);
this.doVal(data)
this.load = false;
});
},
@ -129,7 +132,7 @@ export default {
doVal(arr = []) {
let total = 0;
arr.forEach((ele) => {
total += ele.value * 1;
total += ele.Value * 1;
});
this.total = total;
this.labelArr = arr;
@ -139,17 +142,24 @@ export default {
handlerTab(n) {
switch (n) {
case 0:
this.doVal(this.sex);
break;
getUserAttestationGroupBy(Object.assign({}, this.getCtime2, this.form)).then((res) => {
let data = res.data || {};
this.doVal(data)
this.load = false;
});
case 1:
this.doVal(this.attestation);
getIsjingGroupBy(Object.assign({}, this.getCtime2, this.form)).then((res) => {
let data = res.data || {};
this.doVal(data)
this.load = false;
});
break;
case 2:
this.doVal(this.RegionWeiBo);
break;
default:
this.doVal(this.sex);
break;
getPicboolGroupBy(Object.assign({}, this.getCtime2, this.form)).then((res) => {
let data = res.data || {};
this.doVal(data)
this.load = false;
});
}
},
},

@ -12,8 +12,8 @@ function createData(ds = [], colors) {
let arr = [];
ds.map((ele, index) => {
let obj = {
value: ele.value,
name: ele.key,
value: ele.Value,
name: ele.Key,
itemStyle: {
color: colors[index]
}

@ -8,24 +8,24 @@
-->
<template>
<div class="wct-outter" v-loading="load">
<v-label-div title="微博传播趋势">
<v-label-div title="传播态势">
</v-label-div>
<div class="wct-inner">
<v-echarts :opt="opt" @clickMark="clickMark"></v-echarts>
<v-echarts :opt="opt"></v-echarts>
</div>
<div class="vshow" v-if="modelShow" :style="modelStyle">
<!-- <div class="vshow" v-if="modelShow" :style="modelStyle">
<vLabel-div title="实时热点事件">
<a-button @click="closeBox"></a-button>
</vLabel-div>
<div class="vshow-item" v-for="(item, index) in urlArr" :key="index">
<a class="vshow-link" :href="item.url" v-if="item.column == activeCol" target="tar">{{item.title}}</a>
</div>
</div>
</div> -->
</div>
</template>
<script>
import {getCountTime0528} from "@/api/WeiboDetails"
import {getTimeCount} from "@/api/KeyMediaBrand/index.js"
import {doStr} from "@/utils/gol/dataTool"
import createOpt from "./opt"
export default {
@ -49,9 +49,11 @@ export default {
activeCol: 0,
//-*-//
load: false,
form: {
form: {
sBrand: "",
token: "",
sSource: '',
ilimitType: 0,
},
opt: createOpt(),
urlArr: []
@ -59,71 +61,48 @@ export default {
},
created() {
this.form.token = this.getToken;
this.form.sBrand = this.getBrand.brandname || '奥迪';
this.form.sBrand = this.getBrand.brandname || "奥迪";
this.form.sSource = this.$route.query.source || "抖音";
if(this.form.sSource == '汽车之家') {
this.form.ilimitType = 1;
} else if (this.form.sSource == '懂车帝') {
this.form.ilimitType = 2;
}
this.getData();
},
methods: {
//----//
clickMark(data) {
this.activeCol = data.index
this.modelShow = true;
let mw = window.event;
if((this.ecbox.width - mw.offsetX - 20) > this.ecmodel.width) {
this.modelStyle.left = mw.offsetX + 20 + "px"
} else {
this.modelStyle.left = mw.offsetX - this.ecmodel.width - 20 + "px"
}
if((this.ecbox.height - mw.offsetY - 20) > this.ecmodel.height) {
this.modelStyle.top = mw.offsetY + "px"
} else {
this.modelStyle.top = mw.offsetY - this.ecmodel.height + "px"
}
},
closeBox() {
this.modelShow = false;
},
// clickMark(data) {
// this.activeCol = data.index
// this.modelShow = true;
// let mw = window.event;
// if((this.ecbox.width - mw.offsetX - 20) > this.ecmodel.width) {
// this.modelStyle.left = mw.offsetX + 20 + "px"
// } else {
// this.modelStyle.left = mw.offsetX - this.ecmodel.width - 20 + "px"
// }
// if((this.ecbox.height - mw.offsetY - 20) > this.ecmodel.height) {
// this.modelStyle.top = mw.offsetY + "px"
// } else {
// this.modelStyle.top = mw.offsetY - this.ecmodel.height + "px"
// }
// },
// closeBox() {
// this.modelShow = false;
// },
//----//
getData() {
this.load = true;
let obj = Object.assign({}, this.getCtime2, this.form);
getCountTime0528(obj).then(res => {
getTimeCount(obj).then(res => {
let data = res.data || [];
let dx = []; //time
let ds = []; //value
let hotTopArr = [];
let urlArr = [];
let hotIndex = [];
let dataI = 0;
data.forEach(ele => {
let key = ele.Time;
let value = ele.value;
dx.push(key);
ds.push(value);
if(ele.hotTop[0]) {
ele.hotTop.forEach((e) => {
let urlObj = {
column: dataI,
title: doStr(e.title, 30),
url: e.url
};
urlArr.push(urlObj);
})
}
let obj = {
label: key,
hotTop: ele.hotTop
}
hotTopArr.push(obj);
dataI = dataI + 1;
dx.push(ele.Time);
ds.push(ele.value);
})
this.urlArr = urlArr;
//
for(let i = 0; i<hotTopArr.length; i++) {
if(hotTopArr[i].hotTop != '') {
hotIndex.push(i)
}
}
this.opt = createOpt(dx, ds, hotIndex)
this.opt = createOpt(dx, ds)
this.load = false
});
}
@ -133,7 +112,7 @@ export default {
<style lang="less" scoped>
.wct-outter {
width: 618px;
width: 936px;
height: 460px;
border: 2px solid #0f2a4d;
.wct-inner {

@ -8,7 +8,7 @@
-->
<template>
<div class="wct-outter" v-loading="load">
<v-label-div title="微博内容TOP声量"> </v-label-div>
<v-label-div title="内容TOP声量"> </v-label-div>
<div class="wct-inner">
<div class="wct-d1" v-for="(item,index) in list" :key="index">
<v-echarts :opt="item.opt"></v-echarts>
@ -22,17 +22,19 @@
</template>
<script>
import {getDirectWeiBo0528} from "@/api/WeiboDetails"
import {comparePig} from "@/utils/gol/dataTool"
import createOpt from "./opt"
import {getDirectWeiBo0528} from "@/api/KeyMediaBrand/index.js"
export default {
name: "weiboContentTOPVolume",
data() {
return {
load: false,
form: {
form: {
sBrand: "",
token: "",
sSource: '',
ilimitType: 0,
},
list: [],
colors: ['#3373CC', '#63AECC', '#54BF93', '#CC9D12', '#3373CC', '#63AECC', '#54BF93', '#CC9D12']
@ -40,12 +42,18 @@ export default {
},
created() {
this.form.token = this.getToken;
this.form.sBrand = this.getBrand.brandname || '奥迪';
this.form.sBrand = this.getBrand.brandname || "奥迪";
this.form.sSource = this.$route.query.source || "抖音";
if(this.form.sSource == '汽车之家') {
this.form.ilimitType = 1;
} else if (this.form.sSource == '懂车帝') {
this.form.ilimitType = 2;
}
this.getData();
},
methods: {
getData() {
this.load = true;
// this.load = true;
let obj = Object.assign({}, this.getCtime2, this.form);
getDirectWeiBo0528(obj).then(res => {
let data = res.data || [];

@ -8,7 +8,7 @@
-->
<template>
<div class="wct-outter" v-loading="load">
<v-label-div title="微博内容类型"> </v-label-div>
<v-label-div title="内容类型"> </v-label-div>
<div class="wct-inner">
<div class="d1">
<v-echarts :opt="opt"></v-echarts>
@ -29,7 +29,7 @@
</template>
<script>
import { getWtypeWeiBo0528 } from "@/api/WeiboDetails";
import {getWtypeWeiBo0528} from "@/api/KeyMediaBrand/index.js"
import createOpt from "./opt";
export default {
name: "weiboContentType",
@ -39,6 +39,8 @@ export default {
form: {
sBrand: "",
token: "",
sSource: '',
ilimitType: 0,
},
labelArr: [],
total: 0,
@ -69,7 +71,13 @@ export default {
},
created() {
this.form.token = this.getToken;
this.form.sBrand = this.getBrand.brandname || '奥迪';
this.form.sBrand = this.getBrand.brandname || "奥迪";
this.form.sSource = this.$route.query.source || "抖音";
if(this.form.sSource == '汽车之家') {
this.form.ilimitType = 1;
} else if (this.form.sSource == '懂车帝') {
this.form.ilimitType = 2;
}
this.getData();
},
methods: {
@ -99,7 +107,6 @@ export default {
width: 618px;
height: 460px;
border: 2px solid #0f2a4d;
margin-left: 16px;
overflow: hidden;
.wct-inner {
width: 100%;

@ -1,100 +0,0 @@
<!--
* @Author: your name
* @Date: 2021-10-14 19:15:58
* @LastEditTime: 2021-11-17 16:27:37
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/WeiboDetails/weiboSpreadFission/index.vue
-->
<template>
<div class="wsf-outter" v-loading="load">
<v-label-div title="微博传播裂变">
</v-label-div>
<div class="wsf-inner">
<v-echarts :opt="opt"></v-echarts>
</div>
</div>
</template>
<script>
import {getDiffuseZhuTi} from "@/api/WeiboDetails";
import createOpt from "./opt"
export default {
name: "weiboSpreadFission",
data() {
return {
opt: {},
load: false,
form: {
token:"",
sBrand:""
},
colors: [
"#FFB600",
"#886CFF",
"#0084FF",
"#4CB690",
"#58B458",
"#6C6C6C",
"#F56161",
"#FC754C",
"#5F5EEC",
],
}
},
created() {
this.form.token = this.getToken;
this.form.sBrand = this.getBrand.brandname || '奥迪';
this.getData();
},
methods: {
getData() {
let obj = Object.assign({}, this.getCtime2, this.form);
this.load = true;
getDiffuseZhuTi(obj).then((res) => {
let data = res.data;
let getCoreDiffuseWeiBo = data.getCoreDiffuseWeiBo || [];
let listIdName = data.listIdName || [];
let listPid = data.listPid || [];
let nodes = listIdName;
let edges = listPid;
getCoreDiffuseWeiBo.forEach((ele) => {
let _source = ele._source;
let xgmid = _source.xgmid;
nodes.forEach(e => {
if(e.id === xgmid) {
e.value = _source.volume
} else {
e.value = 0
}
})
});
nodes.forEach((ele) => {
let colorSet = new Set(this.colors);
let curIndex = Math.round(
Math.random() * (colorSet.size - 1)
);
ele.color = this.colors[curIndex];
});
let o = { nodes, edges };
this.opt = createOpt(o);
this.load = false;
});
},
}
}
</script>
<style lang="less" scoped>
.wsf-outter {
width: 460px;
height: 460px;
border: 2px solid #0f2a4d;
margin-left: 16px;
.wsf-inner {
width: 100%;
height: calc(100% - 48px);
}
}
</style>

@ -1,82 +0,0 @@
/*
* @Author: your name
* @Date: 2021-10-14 19:32:39
* @LastEditTime: 2021-11-11 09:46:12
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/WeiboDetails/weiboSpreadFission/opt.js
*/
export default function createOpt(data) {
return {
tooltip: {
trigger: "item",
backgroundColor: "#08182F",
color: "#fff",
borderColor: "#3373CC",
textStyle: {
color: "#fff", //设置文字颜色
},
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
},
title: {
show: false,
text: 'NPM Dependencies'
},
animationDurationUpdate: 1500,
animationEasingUpdate: 'quinticInOut',
series: [
{
type: 'graph',
layout: 'none',
// progressiveThreshold: 700,
data: data.nodes.map(function (node) {
return {
x: node.x,
y: node.y,
id: node.id,
name: node.name,
value: node.value,
symbolSize: node.symbolSize,
itemStyle: {
color: node.color
}
};
}),
links: data.edges.map(function (edge) {
return {
source: edge.source,
target: edge.target
};
}),
emphasis: {
focus: 'adjacency',
label: {
position: 'right',
show: true
}
},
label: {
show: true,
color: '#fff',
position: 'right',
formatter: '{b}'
},
labelLayout: {
hideOverlap: true
},
scaleLimit: {
min: 0.4,
max: 2
},
roam: true,
lineStyle: {
color: 'source',
width: 0.5,
curveness: 0.3,
opacity: 0.7
}
}
]
}
}

@ -1,50 +0,0 @@
<!--
* @Author: your name
* @Date: 2021-10-14 19:15:58
* @LastEditTime: 2021-11-17 16:27:37
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/WeiboDetails/weiboSpreadFission/index.vue
-->
<template>
<div class="wsf-outter">
</div>
</template>
<script>
export default {
name: "weiboSpreadFission",
data() {
return {
form: {
token:"",
sBrand:""
},
colors: [
"#FFB600",
"#886CFF",
"#0084FF",
"#4CB690",
"#58B458",
"#6C6C6C",
"#F56161",
"#FC754C",
"#5F5EEC",
],
}
},
}
</script>
<style lang="less" scoped>
.wsf-outter {
width: 460px;
height: 460px;
border: 2px solid #0f2a4d;
margin-left: 16px;
.wsf-inner {
width: 100%;
height: calc(100% - 48px);
}
}
</style>

@ -1,92 +0,0 @@
<!--
* @Author: your name
* @Date: 2021-10-14 19:41:24
* @LastEditTime: 2021-11-09 13:20:35
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/WeiboDetails/weiboTonalDistribution/index.vue
-->
<template>
<div class="wtd-outter" v-loading="load">
<v-label-div title="调性分布"> </v-label-div>
<vue-scroll>
<div class="wtd-inner">
<div class="wtd-item" v-for="(item,index) in sourceData"
:key="index">
<v-percent :percentage="item.positive"></v-percent>
<span class="s1">{{item.show}}</span>
<v-percent color="#b78e11" :percentage="item.negative" reverse></v-percent>
</div>
</div>
</vue-scroll>
</div>
</template>
<script>
import { getBoauthenAffectionsWeiBo0528 } from "@/api/WeiboDetails";
export default {
name: "weiboTonalDistribution",
data() {
return {
load: false,
form: {
token: "",
sBrand: "",
},
sourceData: [],
};
},
created() {
this.form.token = this.getToken;
this.form.sBrand = this.getBrand.brandname || '奥迪';
this.getData();
},
methods: {
getData() {
let obj = Object.assign({}, this.getCtime2, this.form);
this.load = true;
getBoauthenAffectionsWeiBo0528(obj).then(res => {
let data = res.data;
let labelData = [];
data.forEach(ele => {
let o = {
show: ele.key,
positive:
ele.value[0].value*1.0 / (ele.value[0].value*1.0 + ele.value[2].value*1.0),
negative:
ele.value[2].value*1.0 / (ele.value[0].value*1.0 + ele.value[2].value*1.0),
};
labelData.push(o);
});
this.sourceData = labelData;
this.load = false;
});
},
},
};
</script>
<style lang="less" scoped>
.wtd-outter {
width: 460px;
height: 460px;
border: 2px solid #0f2a4d;
margin-left: 16px;
padding-bottom: 50px;
.wtd-inner {
width: 100%;
padding: 20px 16px;
.wtd-item {
display: flex;
justify-content: space-between;
margin-bottom: 36px;
.s1 {
display: block;
color: #fff;
font-size: 14px;
font-weight: 500;
}
}
}
}
</style>

@ -1,112 +0,0 @@
/*
* @Author: your name
* @Date: 2021-10-14 19:59:04
* @LastEditTime: 2021-10-14 20:58:54
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/WeiboDetails/weiboTonalDistribution/opt.js
*/
export default function createOpt() {
return {
grid: {
left: 16,
right: 16,
bottom: 0,
top: 40,
containLabel: true
},
tooltip: {
trigger: "axis",
backgroundColor: "#08182F",
color: "#fff",
borderColor: "#3373CC",
textStyle: {
color: "#fff", //设置文字颜色
},
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
},
legend: {
position: 'center',
icon: 'roundRect',
y: 16,
textStyle: { //图例文字的样式
color: '#fff'
},
data: ['负面', '正面']
},
xAxis: {
type: 'value',
show: false,
splitLine: {
show: false,
lineStyle: {
type: 'dashed'
}
}
},
yAxis: {
type: 'category',
axisLine: { show: false },
axisLabel: { show: false },
axisTick: { show: false },
splitLine: { show: false },
data: [
'已认证',
'非认证',
'名人博主',
'政府',
'企业',
'媒体',
'个人大V',
]
},
series: [
{
name: '正面',
type: 'bar',
stack: '总量',
barWidth: 20,
label: {
show: true,
formatter: '{b}',
position: 'left',
color: '#fff',
fontWeight: 'bold'
},
data: [
{ value: 0.07 },
{ value: 0.09 },
{ value: 0.23 },
{ value: 0.17 },
{ value: 0.36 },
{ value: 0.26 },
{ value: 0.28 },
]
}, {
name: '负面',
type: 'bar',
stack: '总量',
barWidth: 20,
label: {
show: true,
formatter: '{b}',
position: 'right',
color: '#fff',
fontWeight: 'bold'
},
itemStyle: {
color: '#CC9D12',
},
data: [
{ value: -0.07 },
{ value: -0.09 },
{ value: -0.23 },
{ value: -0.17 },
{ value: -0.36 },
{ value: -0.26 },
{ value: -0.28 },
]
}
]
}
}

@ -1,51 +0,0 @@
<!--
* @Author: your name
* @Date: 2021-10-14 19:41:24
* @LastEditTime: 2021-11-09 13:20:35
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/WeiboDetails/weiboTonalDistribution/index.vue
-->
<template>
<div class="wtd-outter">
</div>
</template>
<script>
export default {
name: "weiboTonalDistribution",
data() {
return {
form: {
token: "",
sBrand: "",
},
};
},
};
</script>
<style lang="less" scoped>
.wtd-outter {
width: 460px;
height: 460px;
border: 2px solid #0f2a4d;
margin-left: 16px;
padding-bottom: 50px;
.wtd-inner {
width: 100%;
padding: 20px 16px;
.wtd-item {
display: flex;
justify-content: space-between;
margin-bottom: 36px;
.s1 {
display: block;
color: #fff;
font-size: 14px;
font-weight: 500;
}
}
}
}
</style>

@ -9,12 +9,6 @@
<template>
<div class="wwc-outter" v-loading="load">
<v-label-div title="词云分布">
<div>
<v-tab-group
:btns="['正面', '负面']"
@change="handlerTab"
></v-tab-group>
</div>
</v-label-div>
<div class="wwc-inner">
<v-echarts :opt="opt"></v-echarts>
@ -23,8 +17,9 @@
</template>
<script>
import { getNegative } from "@/api/WeiboDetails";
import { getPositive } from "@/api/WeiboDetails";
// import { getNegative } from "@/api/WeiboDetails";
// import { getPositive } from "@/api/WeiboDetails";
import {getHotWord} from "@/api/KeyMediaBrand/index.js"
import createWordCloud from "@/utils/gol/bubbleWord";
//import createOpt from "./opt";
export default {
@ -38,20 +33,27 @@ export default {
form: {
sBrand: "",
token: "",
sSource: '',
ilimitType: 0,
},
};
},
created() {
this.form.token = this.getToken;
this.form.sBrand = this.getBrand.brandname || '奥迪';
this.getData();
this.form.sBrand = this.getBrand.brandname || "奥迪";
this.form.sSource = this.$route.query.source || "抖音";
if(this.form.sSource == '汽车之家') {
this.form.ilimitType = 1;
} else if (this.form.sSource == '懂车帝') {
this.form.ilimitType = 2;
}
this.getData();
},
methods: {
getData() {
this.load = true;
Promise.all([this.getH(), this.getF()]).then(() => {
Promise.all([this.getH()]).then(() => {
//
this.handlerTab(0);
this.load = false;
});
},
@ -59,9 +61,10 @@ export default {
getH() {
return new Promise((resolve, reject) => {
let obj = Object.assign({}, this.getCtime2, this.form);
getPositive(obj)
getHotWord(obj)
.then((res) => {
this.positiveData = res.data || {};
this.opt = createWordCloud(res.data);
resolve(res);
})
.catch(() => {
@ -69,41 +72,13 @@ export default {
});
});
},
//
getF() {
return new Promise((resolve, reject) => {
let obj = Object.assign({}, this.getCtime2, this.form);
getNegative(obj)
.then((res) => {
this.negativeData = res.data || {};
resolve(res);
})
.catch(() => {
reject(false);
});
});
},
//
handlerTab(n) {
switch (n) {
case 0:
this.opt = createWordCloud(this.positiveData);
break;
case 1:
this.opt = createWordCloud(this.negativeData);
break;
default:
this.opt = createWordCloud(this.positiveData);
break;
}
},
},
};
</script>
<style lang="less" scoped>
.wwc-outter {
width: 460px;
width: 618px;
height: 460px;
border: 2px solid #0f2a4d;
margin-left: 16px;

Loading…
Cancel
Save