prod
parent
2f382b7c60
commit
219fe5b410
@ -1,167 +0,0 @@
|
|||||||
<!--
|
|
||||||
* @Author: xw
|
|
||||||
* @Date: 2021-10-11 18:42:58
|
|
||||||
* @LastEditTime: 2021-11-29 10:48:33
|
|
||||||
* @LastEditors: Please set LastEditors
|
|
||||||
* @Description: 品牌数据
|
|
||||||
* @FilePath: /data-show/src/views/BrandInsight/brandData/index.vue
|
|
||||||
-->
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="bd-outter" v-loading="load">
|
|
||||||
<v-label-div title="负面数据"></v-label-div>
|
|
||||||
<div class="bd-inner">
|
|
||||||
<div class="bd-o-d1">
|
|
||||||
<div class="d1">
|
|
||||||
<img class="m1" src="../../../assets/images/BrandInsight/ic_warning.png" />
|
|
||||||
<span class="s1">负面数据总量</span>
|
|
||||||
</div>
|
|
||||||
<!-- <a-popover title="负面数据">
|
|
||||||
<template slot="content">
|
|
||||||
<div class="pd-item" v-for="(item,index) in countArr" :key="index">
|
|
||||||
<span>{{item.key}}</span>
|
|
||||||
<span>{{item.value}}</span>
|
|
||||||
</div>
|
|
||||||
</template> -->
|
|
||||||
<span class="s2">{{count}}</span>
|
|
||||||
<!-- </a-popover> -->
|
|
||||||
</div>
|
|
||||||
<div class="bd-o-d1" style="margin-top: 16px">
|
|
||||||
<div class="d1">
|
|
||||||
<img class="m1" src="../../../assets/images/BrandInsight/ic_dx.png" />
|
|
||||||
<span class="s1">舆情整体调性</span>
|
|
||||||
</div>
|
|
||||||
<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 * 100 + '%',background: '#CC9D12'}"></span>
|
|
||||||
<span class="s2-s1" :style="{width: affObj.b/affObj.z * 100 + '%',background: '#CC7733'}"></span>
|
|
||||||
<span class="s2-s1" :style="{width: affObj.c/affObj.z * 100 + '%',background: '#CC5B41'}"></span>
|
|
||||||
</span>
|
|
||||||
</a-popover>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import {getHealthIndex} from "@/api/MyBrand"
|
|
||||||
export default {
|
|
||||||
name: "negativeData",
|
|
||||||
props: ["brand"],
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
count: 0,
|
|
||||||
countArr: [],
|
|
||||||
load: false,
|
|
||||||
form: {
|
|
||||||
token: "",
|
|
||||||
sBrand: this.getWarningBrand,
|
|
||||||
sSeriesName: '',
|
|
||||||
},
|
|
||||||
affObj: {
|
|
||||||
a: 0,
|
|
||||||
b: 0,
|
|
||||||
c: 0,
|
|
||||||
z: 0,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.form.token = this.getToken;
|
|
||||||
this.form.sBrand = this.getWarningBrand.brandname || this.brand;
|
|
||||||
this.form.sSeriesName = this.getWarningSeries || '';
|
|
||||||
this.getData();
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
getData() {
|
|
||||||
let obj = Object.assign({}, this.getCtime2, this.form)
|
|
||||||
getHealthIndex(obj).then(res => {
|
|
||||||
let data = res.data;
|
|
||||||
this.countArr = data.crisis || [];
|
|
||||||
this.count = data.crisis[0].value + data.crisis[1].value + data.crisis[2].value;
|
|
||||||
this.affObj.a = data.crisis[0].value || 0;
|
|
||||||
this.affObj.b = data.crisis[1].value || 0;
|
|
||||||
this.affObj.c = data.crisis[2].value || 0;
|
|
||||||
this.affObj.z = this.count;
|
|
||||||
})
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.bd-outter {
|
|
||||||
width: 620px;
|
|
||||||
height: 272px;
|
|
||||||
border: 2px solid #0f2a4d;
|
|
||||||
border-radius: 2px;
|
|
||||||
margin-top: 16px;
|
|
||||||
}
|
|
||||||
.bd-inner {
|
|
||||||
padding: 16px;
|
|
||||||
.bd-o-d1 {
|
|
||||||
width: 588px;
|
|
||||||
height: 88px;
|
|
||||||
border: 1px solid #0f2a4d;
|
|
||||||
border-radius: 2px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
.d1 {
|
|
||||||
display: flex;
|
|
||||||
height: 100%;
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: center;
|
|
||||||
.m1 {
|
|
||||||
display: block;
|
|
||||||
width: 64px;
|
|
||||||
height: 64px;
|
|
||||||
margin-left: 16px;
|
|
||||||
}
|
|
||||||
.s1 {
|
|
||||||
display: block;
|
|
||||||
color: #fff;
|
|
||||||
font-size: 20px;
|
|
||||||
margin-left: 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.s2 {
|
|
||||||
display: block;
|
|
||||||
color: #fff;
|
|
||||||
font-size: 44px;
|
|
||||||
font-family: Bebas;
|
|
||||||
margin-right: 16px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
width: 276px;
|
|
||||||
cursor: pointer;
|
|
||||||
.s2-s1 {
|
|
||||||
display: block;
|
|
||||||
width: 102px;
|
|
||||||
height: 36px;
|
|
||||||
background: #3373cc;
|
|
||||||
margin-right: 2px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.pd-item {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
color: #fff;
|
|
||||||
border-bottom: 1px solid #173b6d;
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
Loading…
Reference in new issue