carInsightSystem/src/views/ModelInsight/ml-brand-data/index.vue

<!--
 * @Author: your name
 * @Date: 2021-10-25 13:20:36
 * @LastEditTime: 2021-11-01 10:25:44
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /data-show/src/views/ModelInsight/ml-brand-data/index.vue
-->

<template>
    <div class="mbd-outter">
        <v-label-div title="品牌数据"></v-label-div>
        <div class="mbd-inner">
            <div class="mbd-d1">
                <div class="d1">
                    <img class="m1" src="../../../assets/images/ModelInsight/ic_cbsj.png">
                    <span class="s1">传播数据总量</span>
                </div>
                <div class="d2">
                    <a-popover title="传播数据总量">
                        <template slot="content">
                            <div class="pd-item" v-for="(item,index) in totalArr" :key="index">
                                <span>{{item.key}}</span>
                                <span>{{item.value}}</span>
                            </div>
                        </template>
                        <span class="s2">{{count}}</span>
                    </a-popover>
                </div>
            </div>
            <div class="mbd-d1" style="margin-top: 16px">
                <div class="d1">
                    <img class="m1" src="../../../assets/images/ModelInsight/ic_ppzb.png">
                    <span class="s1">占品牌传播比例</span>
                </div>
                <div class="d2">
                    {{countPercent}}%
                </div>
            </div>
            <div class="mbd-d1" style="margin-top: 16px">
                <div class="d1">
                    <img class="m1" src="../../../assets/images/ModelInsight/ic_ztdx.png">
                    <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>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getBrandOverviewCount0528 } from "@/api/ModelInsight";
export default {
    name: "ml-brand-data",
    props: ["brand", "model"],
    data() {
        return {
            form: {
                sBrand: "",
                sSeriesName: "",
                token: "",
            },
            totalArr: [],
            count: 0,
            countPercent: 0,
        };
    },
    watch: {
        model: {
            handler(val) {
                if (val) {
                    this.form.token = this.getToken;
                    this.form.sBrand = this.brand;
                    this.form.sSeriesName = this.model;
                    this.getData1();
                }
            },
            immediate: true,
        },
    },
    created() {},
    methods: {
        getData1() {
            let obj = Object.assign({}, this.getCtime2, this.form);
            getBrandOverviewCount0528(obj).then((res) => {
                let data = res.data;
                this.count = data.count;
                this.countPercent = data.countPercent;
                this.totalArr = data.data;
                console.log(this.totalArr)
            });
        },
    },
};
</script>

<style lang="less" scoped>
.mbd-outter {
    width: 620px;
    height: 580px;
    border: 2px solid #0f2a4d;
    .mbd-inner {
        padding: 16px;
        .mbd-d1 {
            width: 100%;
            height: 150px;
            border: 1px solid #0f2a4d;
            border-radius: 2px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .d1 {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                .m1 {
                    display: inline-block;
                    width: 64px;
                    height: 64px;
                    margin-left: 16px;
                }
                .s1 {
                    display: inline-block;
                    font-size: 20px;
                    color: #fcfdfe;
                    margin-left: 12px;
                }
            }
            .d2 {
                font-size: 44px;
                font-family: Bebas;
                color: #ffffff;
                margin-right: 16px;
                display: flex;
                justify-content: flex-start;
                .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>