carInsightSystem/src/views/ThemeComparison/weiboContentDirectionComparison/index.vue

<!--
 * @Author: your name
 * @Date: 2021-10-15 15:58:57
 * @LastEditTime: 2021-11-16 11:26:29
 * @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="微博内容方向对比" :showLine="false" :eStyle="{ 'border-style': 'none' }">
        </v-label-div>
        <div class="bcm-inner">
            <div class="bcm-item" v-for="(item, index) in sourceData" :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.value" :key="n" :label="it.key" :num="it.num" :val="it.value"></v-ranking-bcm>
                    </vue-scroll>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { getDirect0528C } from "@/api/ThemeComparisonWeibo";
import vRankingBcm from "./v-ranking-bcm";
export default {
    name: "weiboContentDirectionComparison",
    components: {
        vRankingBcm,
    },
    data() {
        return {
            colors: [
                "#3373CC",
                "#63AECC",
                "#54BF93",
                "#CC9D12",
                "#CC7733",
                "#CC5B41",
            ],
            form: {
                token: "",
                sGuid: "",
                sTimeType: 3
            },
            load: false,
            sourceData: [],
        };
    },
    created() {
        this.initData();
    },
    methods: {
        initData() {
            this.form.token = this.getToken;
            let arr = this.getTComparison;
            let sGuid = [];
            arr.forEach((ele) => {
                sGuid.push(ele.guids);
            });
            this.form.sGuid = sGuid.toString();
            this.getData();
        },
        getData() {
            return new Promise((resolve, reject) => {
                let obj = Object.assign({}, this.getCtime2, this.form);
                this.load = true;
                getDirect0528C(obj)
                    .then((res) => {
                        let data = res.data || [];
                        let showData = [];
                        data.forEach((e) => {
                            //按照数据的值排序，然后取前5个值放入obj中传给用于显示数据的数组
                            let sortedArr = e.Data;
                            sortedArr.sort(this.compare("value"));
                            let obj = {
                                key: e.Name,
                                value: sortedArr,
                            };
                            showData.push(obj);
                        });
                        showData.forEach((ele) => {
                            //给数据添加排名
                            for (
                                let index = 0;
                                index < ele.value.length;
                                index++
                            ) {
                                ele.value[index].num = index + 1;
                            }
                        });
                        this.sourceData = showData;
                        this.load = false;
                        resolve(data);
                    })
                    .catch(() => {
                        reject(false);
                    });
            });
        },
        // 根据对象的属性排序 v2-v1为顺序，v1-v2为倒序
        compare(property) {
            return function (a, b) {
                let value1 = a[property];
                let value2 = b[property];
                return value2 - value1;
            };
        },
    },
};
</script>

<style lang="less" scoped>
.bcm-outter {
    width: 100%;
    height: 460px;
    margin-top: 16px;
    .bcm-inner {
        width: 100%;
        height: calc(100% - 48px);
        display: flex;
        justify-content: center;
        .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>