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