yunyang
/
carInsightSystem
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

cxw-010203

Browse Source
prod
lily.zhang 3 years ago
parent 28333221ef
commit 6efa86de53
3 changed files with 82 additions and 449 deletions
Show Stats Download Patch File Download Diff File

157
src/views/ModelWeiboDetails/MWDmodelPopularity/index.vue
Unescape View File

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

230
src/views/ModelWeiboDetails/MWDmodelPopularity/v-ranking-mpth/index.vue
Unescape View File

@ -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>

142
src/views/ModelWeiboDetails/MWDweiboWordCloud/index.vue
Unescape View File

@ -1,115 +1,79 @@
<!-- <!--
* @Author: your name * @Author: your name
* @Date: 2021-10-14 19:06:52 * @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 * @LastEditors: Please set LastEditors
* @Description: In User Settings Edit * @Description: In User Settings Edit
* @FilePath: /data-show/src/views/WeiboDetails/weiboWordCloud/index.vue * @FilePath: /data-show/src/views/WeiboDetails/weiboWordCloud/index.vue
--> -->
<template> <template>
<div class="wwc-outter" v-loading="load"> <div class="wwc-outter" v-loading="load">
<v-label-div title="词云分布"> <v-label-div title="负面词云分布">
<div> </v-label-div>
<v-tab-group <div class="wwc-inner">
:btns="['正面', '负面']" <v-echarts :opt="opt"></v-echarts>
@change="handlerTab" </div>
></v-tab-group>
</div>
</v-label-div>
<div class="wwc-inner">
<v-echarts :opt="opt"></v-echarts>
</div> </div>
</div>
</template> </template>
<script> <script>
import { getNegative } from "@/api/WeiboDetails"; import { getNegative } from "@/api/WeiboDetails";
import { getPositive } from "@/api/WeiboDetails";
import createWordCloud from "@/utils/gol/bubbleWord"; import createWordCloud from "@/utils/gol/bubbleWord";
//import createOpt from "./opt"; //import createOpt from "./opt";
export default { export default {
name: "MWDweiboWordCloud", name: "MWDweiboWordCloud",
data() { data() {
return { return {
opt: {}, opt: {},
load: false, load: false,
positiveData: {}, positiveData: {},
negativeData: {}, negativeData: {},
form: { form: {
sBrand: "", sBrand: "",
token: "", 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;
});
}, },
// 正面 created() {
getH() { this.form.token = this.getToken;
return new Promise((resolve, reject) => { this.form.sBrand = this.getBrand.brandname || this.brand;
let obj = Object.assign({}, this.getCtime2, this.form); this.getData();
getPositive(obj)
.then((res) => {
this.positiveData = res.data || {};
resolve(res);
})
.catch(() => {
reject(false);
});
});
}, },
// 负面 methods: {
getF() { getData() {
return new Promise((resolve, reject) => { this.load = true;
let obj = Object.assign({}, this.getCtime2, this.form); this.getF().then(() => {
getNegative(obj) this.load = false;
.then((res) => { });
this.negativeData = res.data || {}; },
resolve(res); // 负面
}) getF() {
.catch(() => { return new Promise((resolve, reject) => {
reject(false); 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> </script>
<style lang="less" scoped> <style lang="less" scoped>
.wwc-outter { .wwc-outter {
width: 460px; width: 460px;
height: 460px; height: 460px;
border: 2px solid #0f2a4d; border: 2px solid #0f2a4d;
margin-left: 16px; margin-left: 16px;
.wwc-inner { .wwc-inner {
width: 100%; width: 100%;
height: calc(100% - 48px); height: calc(100% - 48px);
} }
} }
</style> </style>
Write Preview
Loading…
Cancel
Save