carInsightSystem/src/views/ModelForumDetails/mfdPositiveTopic/index.vue

<!--
 * @Author: your name
 * @Date: 2021-11-09 15:03:36
 * @LastEditTime: 2021-11-10 15:23:05
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /data-show/src/views/ModelForumDetails/mfdPositiveTopic/index.vue
-->
<template>
    <div class="mpt-outter" v-loading="load">
        <v-label-div title="正面话题分布"> </v-label-div>
        <div class="mpt-inner">
            <div class="d1">
                <v-echarts :opt="opt"></v-echarts>
            </div>
            <div class="d2">
                <dv-scroll-board :config="config" :style="{ width: '100%', height: '100%' }" />
            </div>
        </div>
    </div>
</template>

<script>
import { getPositiveTopic } from "@/api/ModelForumDetails";
import createOpt from "./opt";
export default {
    name: "mfdPositiveTopic",
    data() {
        return {
            load: false,
            form: {
                sBrand: "",
                token: "",
                sSeriesName: "",
            },
            opt: {},
            config: {},
        };
    },
    created() {
        this.form.token = this.getToken;
        this.form.sBrand = this.getBrand.brandname || "奥迪";
        this.form.sSeriesName = this.getModel.name;
        this.getData();
    },
    methods: {
        getData() {
            let obj = Object.assign({}, this.getCtime2, this.form);
            let max = 10;
            this.load = true;
            getPositiveTopic(obj).then((res) => {
                let data = res.data;
                let optData = data.Data || {};
                let UserTo10 = data.UserTo10 || [];
                let ds = [];
                let dx = [];
                let list = [];
                for (let key in optData) {
                    max = optData[key]*1 > max ? optData[key]*1 : max;
                    let o = {
                        name: key,
                        max: max
                    }
                    dx.push(o)
                    ds.push(optData[key] * 1);  
                }
                this.opt = createOpt(dx, ds);
                UserTo10.forEach((ele) => {
                    let a = [
                        `<span>用户名：${ele.key}</span>`,
                        `<span>影响力：${ele.value}</span>`,
                    ];
                    list.push(a);
                });
                this.config = {
                    headerBGC: "#0c203b",
                    oddRowBGC: "#173b6d",
                    evenRowBGC: "rgba(69, 149, 244, 0)",
                    rowNum: 9,
                    header: ["TOP用户"],
                    data: list,
                };
                this.load = false;
            });
        },
    },
};
</script>

<style lang="less" scoped>
.mpt-outter {
    width: 936px;
    height: 460px;
    border: 2px solid #0f2a4d;
    .mpt-inner {
        width: 100%;
        height: calc(100% - 48px);
        display: flex;
        justify-content: flex-start;
        .d1 {
            width: 450px;
            height: 100%;
        }
        .d2 {
            width: 485px;
            height: 100%;
        }
    }
}
</style>