carInsightSystem/src/views/BrandInsight/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 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>
                <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 +'%'}"></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>
</template>

<script>
import { getBrandOverviewCount0528, getAffections } from "@/api/BrandInsight";
export default {
    name: "brandData",
    props: ["brand"],
    data() {
        return {
            count: 0,
            countArr: [],
            load: false,
            form: {
                token: "",
                sBrand: "",
            },
            affObj: {
                a: 0,
                b: 0,
                c: 0,
                z: 0,
            },
        };
    },
    created() {
        this.form.token = this.getToken;
        this.form.sBrand = this.getBrand.brandname || this.brand;
        this.load = true;
        Promise.all([
            this.getBrandOverviewCount0528(),
            this.getAffections(),
        ]).then(() => {
            this.load = false;
        });
    },
    methods: {
        getBrandOverviewCount0528() {
            return new Promise((resolve, reject) => {
                let obj = Object.assign({}, this.getCtime2, this.form);
                getBrandOverviewCount0528(obj)
                    .then((res) => {
                        this.count = res.data.count;
                        this.countArr = res.data.data || [];
                        resolve(true);
                    })
                    .catch(() => {
                        reject(false);
                    });
            });
        },
        getAffections() {
            return new Promise((resolve, reject) => {
                let obj = Object.assign({}, this.getCommTime, 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;
                        resolve(true);
                    })
                    .catch(() => {
                        reject(false);
                    });
            });
        },
    },
};
</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>