prod
lily.zhang 3 years ago
parent 28333221ef
commit 6efa86de53

@ -1,85 +1,59 @@
<!--
* @Author: your name
* @Date: 2021-10-14 18:42:40
* @LastEditTime: 2021-11-08 18:25:18
* @Date: 2021-10-14 19:06:52
* @LastEditTime: 2021-11-09 13:41:16
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/WeiboDetails/modelPopularity/index.vue
* @FilePath: /data-show/src/views/WeiboDetails/weiboWordCloud/index.vue
-->
<template>
<div class="mp-outter">
<v-label-div title="车型热度">
<div>
<v-tab-group
:btns="['热门', '热赞', '热议', '热转']"
@change="handlerTab"
></v-tab-group>
</div>
<div class="wwc-outter" v-loading="load">
<v-label-div title="正面词云分布">
</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 class="wwc-inner">
<v-echarts :opt="opt"></v-echarts>
</div>
</div>
</template>
<script>
import { getCartypeWeiBo0528 } from "@/api/WeiboDetails/index.js";
import { getTopCarseriesObj } from "@/api/WeiboDetails/index.js";
import vRankingMpth from "./v-ranking-mpth";
import { getPositive } from "@/api/WeiboDetails";
import createWordCloud from "@/utils/gol/bubbleWord";
//import createOpt from "./opt";
export default {
name: "MWDmodelPopularity",
data() {
return {
opt: {},
load: false,
positiveData: {},
negativeData: {},
form: {
sBrand: "",
token: "",
iType: "",
},
labelArr: [],
hotSeries: [],
hotTypes: [],
hotComs: [],
hotTrans: [],
};
},
components: {
vRankingMpth,
},
created() {
this.form.token = this.getToken;
this.form.sBrand = this.getBrand.brandname || this.brand;
this.getData();
},
methods: {
getData() {
Promise.all([
this.getHotSeries(),
this.getHotTypes(),
this.getHotComs(),
this.getHotTrans(),
]).then(() => {
//
this.handlerTab(0);
});
this.load = true;
this.getH().then(() => {
this.load = false;
})
},
//
getHotSeries() {
//
getH() {
return new Promise((resolve, reject) => {
this.form.iType = "";
let obj = Object.assign({}, this.getCtime2, this.form);
getCartypeWeiBo0528(obj)
getPositive(obj)
.then((res) => {
let data = res.data || {};
this.hotSeries = this.toArr(data);
this.positiveData = res.data || {};
this.opt = createWordCloud(this.positiveData);
resolve(res);
})
.catch(() => {
@ -87,94 +61,19 @@ export default {
});
});
},
//
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 {
.wwc-outter {
width: 460px;
height: 460px;
border: 2px solid #0f2a4d;
.mp-inner {
padding: 0px 16px 16px 16px;
margin-left: 16px;
.wwc-inner {
width: 100%;
height: calc(100% - 48px);
}
}
</style>
</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,115 +1,79 @@
<!--
* @Author: your name
* @Date: 2021-10-14 19:06:52
* @LastEditTime: 2021-11-08 18:35:35
* @LastEditTime: 2021-11-09 13:41:39
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/WeiboDetails/weiboWordCloud/index.vue
-->
<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>
<div class="wwc-outter" v-loading="load">
<v-label-div title="负面词云分布">
</v-label-div>
<div class="wwc-inner">
<v-echarts :opt="opt"></v-echarts>
</div>
</div>
</div>
</template>
<script>
import { getNegative } from "@/api/WeiboDetails";
import { getPositive } from "@/api/WeiboDetails";
import createWordCloud from "@/utils/gol/bubbleWord";
//import createOpt from "./opt";
export default {
name: "MWDweiboWordCloud",
data() {
return {
opt: {},
load: false,
positiveData: {},
negativeData: {},
form: {
sBrand: "",
token: "",
},
};
},
created() {
this.form.token = this.getToken;
this.form.sBrand = this.getBrand.brandname || this.brand;
this.getData();
},
methods: {
getData() {
this.load = true;
Promise.all([this.getH(), this.getF()]).then(() => {
//
this.handlerTab(0);
this.load = false;
});
name: "MWDweiboWordCloud",
data() {
return {
opt: {},
load: false,
positiveData: {},
negativeData: {},
form: {
sBrand: "",
token: "",
},
};
},
//
getH() {
return new Promise((resolve, reject) => {
let obj = Object.assign({}, this.getCtime2, this.form);
getPositive(obj)
.then((res) => {
this.positiveData = res.data || {};
resolve(res);
})
.catch(() => {
reject(false);
});
});
created() {
this.form.token = this.getToken;
this.form.sBrand = this.getBrand.brandname || this.brand;
this.getData();
},
//
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);
});
});
methods: {
getData() {
this.load = true;
this.getF().then(() => {
this.load = false;
});
},
//
getF() {
return new Promise((resolve, reject) => {
let obj = Object.assign({}, this.getCtime2, this.form);
getNegative(obj)
.then((res) => {
this.negativeData = res.data || {};
this.opt = createWordCloud(this.negativeData);
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;
height: 460px;
border: 2px solid #0f2a4d;
margin-left: 16px;
.wwc-inner {
width: 100%;
height: calc(100% - 48px);
}
width: 460px;
height: 460px;
border: 2px solid #0f2a4d;
margin-left: 16px;
.wwc-inner {
width: 100%;
height: calc(100% - 48px);
}
}
</style>
Loading…
Cancel
Save