carInsightSystem/src/views/MarketingComparison/mcTOPMedia/index.vue

<!--
 * @Author: your name
 * @Date: 2021-10-15 15:58:57
 * @LastEditTime: 2021-11-16 13:41:08
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /data-show/src/views/BrandComparison/brandCommunicationTOPMedia/index.vue
-->
<template>
    <div class="bcm-outter" v-loading="load">
        <v-label-div title="品牌传播TOP媒体"> </v-label-div>
        <div class="bcm-inner">
            <div class="bcm-item" v-for="(item, index) in arrList" :key="index">
                <span class="ss1" :style="{ color: colors[index] }">{{
          item.key
        }}</span>
                <div class="dd1">
                    <vue-scroll>
                        <v-ranking-bcm v-for="(it, n) in item.data" :key="n" :label="it.key" :num="it.num" :val="it.value"></v-ranking-bcm>
                    </vue-scroll>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { getSourceCountMKT0528C } from "@/api/MarketingComparison/index.js";
import vRankingBcm from "./v-ranking-bcm";
export default {
    name: "mcTOPMedia",
    components: {
        vRankingBcm,
    },
    data() {
        return {
            form: {
                token: "",
                sJson: "",
                load: false,
            },
            colors: [
                "#3373CC",
                "#63AECC",
                "#54BF93",
                "#CC9D12",
                "#CC7733",
                "#CC5B41",
            ],
            arrList: [],
        };
    },
    created() {
        this.initData();
    },
    methods: {
        initData() {
            this.form.token = this.getToken;
            let arr = this.getSComparison;
            let sourceData = [];
            arr.forEach((ele) => {
                let o = {
                    sBrand: ele.brand,
                    sSeriesName: ele.model,
                    sStartTime: ele.startTime,
                    sEndTime: ele.endTime,
                };
                sourceData.push(o);
            });
            this.form.sJson = JSON.stringify(sourceData); //转成json
            this.getData();
        },
        getData() {
            let obj = Object.assign({}, this.getCtime, this.form);
            this.load = true;
            getSourceCountMKT0528C(obj).then((res) => {
                let data = res.data || [];
                //往原始数据内添加排名
                data.forEach((ele) => {
                    for (let index = 0; index < ele.data.length; index++) {
                        ele.data[index].num = index + 1;
                    }
                    ele.data = ele.data.slice(0, 5);
                });
                this.arrList = data;
                this.load = false;
            });
        },
    },
};
</script>

<style lang="less" scoped>
.bcm-outter {
    width: 100%;
    height: 460px;
    border: 2px solid #0f2a4d;
    margin-top: 16px;
    .bcm-inner {
        width: 100%;
        height: calc(100% - 48px);
        display: flex;
        justify-content: flex-start;
        .bcm-item {
            width: 282px;
            margin-left: 27px;
            .ss1 {
                display: block;
                font-size: 18px;
                color: #fff;
                font-weight: 500;
                padding-top: 14px;
            }
            .dd1 {
                height: calc(100% - 44px);
            }
        }
    }
}
</style>