|
|
|
@ -1,7 +1,7 @@
|
|
|
|
|
<!--
|
|
|
|
|
* @Author: your name
|
|
|
|
|
* @Date: 2021-10-25 13:20:36
|
|
|
|
|
* @LastEditTime: 2021-11-01 10:25:44
|
|
|
|
|
* @LastEditTime: 2021-11-01 13:48:39
|
|
|
|
|
* @LastEditors: Please set LastEditors
|
|
|
|
|
* @Description: In User Settings Edit
|
|
|
|
|
* @FilePath: /data-show/src/views/ModelInsight/ml-brand-data/index.vue
|
|
|
|
@ -17,7 +17,7 @@
|
|
|
|
|
<span class="s1">传播数据总量</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="d2">
|
|
|
|
|
<a-popover title="传播数据总量">
|
|
|
|
|
<a-popover title="传播数据">
|
|
|
|
|
<template slot="content">
|
|
|
|
|
<div class="pd-item" v-for="(item,index) in totalArr" :key="index">
|
|
|
|
|
<span>{{item.key}}</span>
|
|
|
|
@ -43,9 +43,23 @@
|
|
|
|
|
<span class="s1">舆情整体调性</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="d2">
|
|
|
|
|
<span class="s2-s1"></span>
|
|
|
|
|
<span class="s2-s1" style="width: 104px;background: #54BF93;"></span>
|
|
|
|
|
<span class="s2-s1" style="width: 68px; background: #CC9D12"></span>
|
|
|
|
|
<a-popover title="舆情整体调性">
|
|
|
|
|
<template slot="content">
|
|
|
|
|
<template v-for="(item,index) in affObj">
|
|
|
|
|
<div class="pd-item" :key="index" v-if="index != 'z'">
|
|
|
|
|
<span v-if="index === 'a'">正面</span>
|
|
|
|
|
<span v-if="index === 'b'">中性</span>
|
|
|
|
|
<span v-if="index === 'c'">负面</span>
|
|
|
|
|
<span>{{item}}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</template>
|
|
|
|
|
<span class="s2">
|
|
|
|
|
<span class="s2-s1" :style="{width: affObj.a/affObj.z * width +'px'}"></span>
|
|
|
|
|
<span class="s2-s1" :style="{width: affObj.b/affObj.z * width + 'px', background: '#54BF93'}"></span>
|
|
|
|
|
<span class="s2-s1" :style="{width: affObj.c/affObj.z * width + 'px',background: '#CC9D12'}"></span>
|
|
|
|
|
</span>
|
|
|
|
|
</a-popover>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
@ -53,12 +67,13 @@
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import { getBrandOverviewCount0528 } from "@/api/ModelInsight";
|
|
|
|
|
import { getBrandOverviewCount0528, getAffections } from "@/api/ModelInsight";
|
|
|
|
|
export default {
|
|
|
|
|
name: "ml-brand-data",
|
|
|
|
|
props: ["brand", "model"],
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
width: 274,
|
|
|
|
|
form: {
|
|
|
|
|
sBrand: "",
|
|
|
|
|
sSeriesName: "",
|
|
|
|
@ -67,6 +82,12 @@ export default {
|
|
|
|
|
totalArr: [],
|
|
|
|
|
count: 0,
|
|
|
|
|
countPercent: 0,
|
|
|
|
|
affObj: {
|
|
|
|
|
a: 0,
|
|
|
|
|
b: 0,
|
|
|
|
|
c: 0,
|
|
|
|
|
z: 0,
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
watch: {
|
|
|
|
@ -77,6 +98,7 @@ export default {
|
|
|
|
|
this.form.sBrand = this.brand;
|
|
|
|
|
this.form.sSeriesName = this.model;
|
|
|
|
|
this.getData1();
|
|
|
|
|
this.getData2();
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
immediate: true,
|
|
|
|
@ -91,7 +113,18 @@ export default {
|
|
|
|
|
this.count = data.count;
|
|
|
|
|
this.countPercent = data.countPercent;
|
|
|
|
|
this.totalArr = data.data;
|
|
|
|
|
console.log(this.totalArr)
|
|
|
|
|
console.log(this.countPercent)
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
getData2() {
|
|
|
|
|
let obj = Object.assign({}, this.getCtime2, this.form);
|
|
|
|
|
getAffections(obj).then((res) => {
|
|
|
|
|
let data = res.data || {};
|
|
|
|
|
this.affObj.a = data["正面"] || 0;
|
|
|
|
|
this.affObj.b = data["中性"] || 0;
|
|
|
|
|
this.affObj.c = data["负面"] || 0;
|
|
|
|
|
this.affObj.z =
|
|
|
|
|
this.affObj.a * 1 + this.affObj.b * 1 + this.affObj.c * 1;
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
@ -131,12 +164,17 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.d2 {
|
|
|
|
|
font-size: 44px;
|
|
|
|
|
font-size: 44px;
|
|
|
|
|
font-family: Bebas;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
margin-right: 16px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
.s2 {
|
|
|
|
|
margin-right: 0px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
.s2-s1 {
|
|
|
|
|
display: block;
|
|
|
|
|
width: 102px;
|
|
|
|
|