carInsightSystem/src/views/Index/spreadTheSound/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">
            <div class="tis">
                <!-- <v-pagination :data="pdata" :style="{marginRight: '0.8rem', marginTop: '0.4rem'}" @change="handlerData"></v-pagination> -->
                <v-tab-group :btns="['品牌', '车型']" @change="handlerChange"></v-tab-group>
            </div>
        </v-label-div>
        <div class="st-bd">
            <v-echarts :opt="opt" @getData="clickEchars"></v-echarts>
        </div>
        <a-modal title="提示" :visible="visible" @ok="handleOk" @cancel="handleCancel">
            <p>{{ ModalText }}</p>
        </a-modal>
    </div>
</template>

<script>
import createOpt from "./opt";
import { getHomeBrandSourceType0528 } from "@/api/home";
import {
    getBrandName,
    getUserSeriesName,
    getBrandOrSeriesLevel,
} from "@/api/comm";
export default {
    name: "spread-the-sound",
    data() {
        return {
            load: false,
            form: {
                sQueryType: 1,
            },
            opt: {},
            pdata: [],
            type: 0,
            visible: false,
            ModalText: "",
        };
    },
    created() {
        this.getData();
    },
    methods: {
        // 切换选择后台数据
        handlerChange(n) {
            this.type = n;
            this.form.sQueryType = n + 1;
            this.getData();
        },
        // 获取数据
        getData() {
            this.load = true;
            let obj = Object.assign({}, this.getCommTime, this.form);
            getHomeBrandSourceType0528(obj).then((res) => {
                
                let data = res.data;
                console.log(data)
                this.pdata = data;
                this.handlerData(data);
                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);
        },
        handleCancel() {
            this.visible = false;
        },
        handleOk() {
            this.$router.push("/login");
        },
        clickEchars(data) {
            if (!this.getToken) {
                this.visible = true;
                this.ModalText = "您还未登录，是否前往登录";
                return;
            }
            // if (this.getUser.Brand.indexOf(data[0].axisValueLabel) == -1) {
            //     this.visible = true;
            //     this.ModalText = "账号权限不足";
            //     return;
            // }
            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: 460px;
    height: 312px;
    border: 2px solid #0f2a4d;
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    .st-bd {
        position: relative;
        width: 100%;
        height: calc(100% - 48px);
    }
}
.tis {
    display: flex;
    justify-items: flex-end;
}
</style>