carInsightSystem/src/views/MyBrand/brandData/index.vue

<!--
 * @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>
    <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_cb.png" />
                    <span class="s1">传播数据总量</span>
                </div>
                <span class="s2">{{count}}</span>
            </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 +'%'}"></span>
                        <span class="s2-s1" :style="{width: affObj.b/affObj.z * 100 + '%', background: '#54BF93'}"></span>
                        <span class="s2-s1" :style="{width: affObj.c/affObj.z * 100 + '%',background: '#CC9D12'}"></span>
                    </span>
                </a-popover>
            </div>
        </div>
    </div>
    <div class="bd-outter" style="margin-top: 16px" 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>
                <span class="s2">{{negCount}}</span>
            </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 negObj">
                            <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: negObj.a/negObj.z * 100 + '%',background: '#CC9D12'}"></span>
                        <span class="s2-s1" :style="{width: negObj.b/negObj.z * 100 + '%',background: '#CC7733'}"></span>
                        <span class="s2-s1" :style="{width: negObj.c/negObj.z * 100 + '%',background: '#CC5B41'}"></span>
                    </span>
                </a-popover>
            </div>
        </div>
    </div>
    </div>
</template>

<script>
import {getHealthIndex} from "@/api/MyBrand"
export default {
    name: "brandData",
    props: ["brand","series"],
    watch: {
        series: {
            handler(val) {
                if(val != 'default') {
                    this.form.token = this.getToken;
                    this.getData();
                }
            },
            immediate: true
        },
    },
    data() {
        return {
            count: 0,
            negCount: 0,

            load: false,
            form: {
                token: "",
                sBrand: '',
                sSeriesName: '',
            },
            affObj: {
                a: 0,
                b: 0,
                c: 0,
                z: 0,
            },
            negObj: {
                a: 0,
                b: 0,
                c: 0,
                z: 0,
            }
        };
    },
    created() {
        // this.form.token = this.getToken;
        // this.getData();
    },
    methods: {
        getData() {
            this.form.sBrand = this.getWarningBrand.brandname || this.brand;
            this.form.sSeriesName = this.getWarningSeries || this.series;
            let obj = Object.assign({}, this.getCtime2, this.form)
            getHealthIndex(obj).then(res => {
                let data = res.data;
                this.setHealth(data.healthIndex)
                this.count = data.affections[0].value + data.affections[1].value + data.affections[2].value;
                this.negCount = data.crisis[0].value + data.crisis[1].value + data.crisis[2].value;
                this.affObj.a = data.affections[0].value || 0;
                this.affObj.b = data.affections[1].value || 0;
                this.affObj.c = data.affections[2].value || 0;
                this.affObj.z = this.count;
                this.negObj.a = data.crisis[0].value || 0;
                this.negObj.b = data.crisis[1].value || 0;
                this.negObj.c = data.crisis[2].value || 0;
                this.negObj.z = this.negCount;
            })
        }
    },
};
</script>

<style lang="less" scoped>
.bd-outter {
    width: 620px;
    height: 272px;
    border: 2px solid #0f2a4d;
    border-radius: 2px;
}
.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>