carInsightSystem/src/views/SpecialAnalizeBoard/sourceTopTen/index.vue

<!--
 * @Author: xw
 * @Date: 2021-10-09 10:53:21
 * @LastEditTime: 2021-12-23 16:36:32
 * @LastEditors: Please set LastEditors
 * @Description: 传播声量TOP10
 * @FilePath: /data-show/src/views/Index/spreadTheSound/index.vue
-->
<template>
    <div class="st-outter" v-loading="load">
        <v-label-div title="TOP10渠道占比"></v-label-div>
        <div class="st-bd">
            <v-echarts :opt="opt" @getData="clickEchars"></v-echarts>
        </div>
    </div>
</template>

<script>
import createOpt from "./opt";
import { getHomeBrandSourceType0528 } from "@/api/home";
import {getBrandOrSeriesNameBySourceTypeGroupBy} from "@/api/SpecialAnalize";
import {
    getBrandName,
    getUserSeriesName,
    getBrandOrSeriesLevel,
} from "@/api/comm";
export default {
    name: "spread-the-sound",
    data() {
        return {
            load: false,
            form: {
                token: '',
                sSpecialGuid: "",
            },
            opt: {},
            pdata: [],
            type: 0, //0品牌 1车型
            visible: false,
            ModalText: "",
        };
    },
    created() {
        this.form.token = this.getToken;
        this.form.sSpecialGuid = this.$route.query.sSpecialGuid;
        if(this.$route.query.Classify == 2) {
            this.type = 1
        }
        this.getData();
    },
    methods: {
        // 获取数据
        getData() {
            this.load = true;
            getBrandOrSeriesNameBySourceTypeGroupBy(this.form).then((res) => {
                let data = res.data;
                let dx = [];
                let ds = [];
                data.forEach((ele) => {
                    let key = ele.Key;
                    let value = ele.Data;
                    dx.push(key);
                    ds.push(value);
                });
                this.opt = createOpt(dx, ds);
                this.load = false;
            });
        },
        // 分页显示数据
        handlerData(arr) {
            let dx = [];
            let ds = [];
            arr.forEach((ele) => {
                let key = ele.key;
                let value = ele.value;
                dx.push(key);
                ds.push(value);
            });
            this.opt = createOpt(dx, ds);
        },
        clickEchars(data) {
            let ele = data;
            if (this.type === 1) {
                let model = ele.axisValueLabel;
                let obj = {
                    token: this.getToken,
                    sSeriesName: model,
                };
                getBrandOrSeriesLevel(obj).then(() => {
                    getBrandName(obj).then((res) => {
                        this.setModel({ name: model });
                        this.setHeaderType(3);
                        this.setBrand({ brandname: res.data });
                        this.$router.push("/modelInsight");
                    });
                })
            } else {
                let brand = ele.axisValueLabel;
                getBrandOrSeriesLevel({
                    token: this.getToken,
                    sBrand: brand,
                }).then(() => {
                    this.getUserSeriesName(brand); //同步车型
                    this.setBrand({ brandname: brand });
                    this.setHeaderType(3);
                    this.$router.push("/brandInsight");
                })
            }
        },
        // 获取车型
        getUserSeriesName(brandName) {
            this.form.token = this.getToken;
            this.form.sBrandName = brandName;
            getUserSeriesName(this.form).then((res) => {
                let data = res.data || [];
                this.models = data;
                this.chooseModel = this.models[0];
                this.setModel(this.chooseModel);
            });
        },
    },
};
</script>

<style lang="less" scoped>
.st-outter {
    width: 1266px;
    height: 460px;
    border: 2px solid #0f2a4d;
    .st-bd {
        position: relative;
        width: 100%;
        height: calc(100% - 48px);
    }
}
.tis {
    display: flex;
    justify-items: flex-end;
}
</style>