carInsightSystem/src/views/SaleRank/BrandInfoDetail/index.vue

<template>
    <div class="binfo-outter">
        <v-label-div :title="time">
            <v-btn @click="goBack">返回</v-btn>
        </v-label-div>
        <!-- <div class="d2">
            <a-range-picker style="width: 360px" v-model="selTime" :disabled-date="disabledDate" valueFormat="YYYY-MM-DD">
                <a-icon slot="suffixIcon" type="calendar" />
            </a-range-picker>
            <a-button @click="onSearch" style="margin-left: 40px" type="primary">查询</a-button>
        </div> -->
        <div class="d3">
            <v-table ref="rtable" :columns="columns" :loading="tableLoad" :data="tbData" :pagination="pagination" @change="handlerPagnation">
                <template slot="about" slot-scope="text, record">
                    <a-button @click="onSale(record)">销量</a-button>
                </template>
            </v-table>
        </div>
    </div>
</template>

<script>
import {getCheZhuCarBrandSeriesRanking} from "@/api/SaleRank"
import moment from "moment";
export default {
    name: "BrandInfoDetail",
    data() {
        return {
            form: {
                token: '',
                sTimeType: 4,
                sStartTime: '',
                sEndTime: '',
                iPageIndex: 1,
                iPageSize: 20,
                sBrand: '',
            },
            time: '销量',
            selTime: [],
            //表格
            tableLoad: false,
            columns: [
                {
                    title: "车型",
                    dataIndex: "carseries",
                    key: "carseries",
                    width: 240
                },
                {
                    title: "销量(辆)",
                    dataIndex: "salescount",
                    key: "salescount",
                },
                {
                    title: "所属级别",
                    dataIndex: "specname",
                    key: "specname"
                },
                {
                    title: "级别排名",
                    dataIndex: "specpm",
                    key: "specpm"
                },
                {
                    title: "厂商排名",
                    dataIndex: "salespm",
                    key: "salespm"
                },
                {
                    title: "车型相关",
                    dataIndex: "about",
                    key: "about",
                    scopedSlots: { customRender: "about" },
                },
            ],
            tbData: [],
            pagination: {
                current: 1,
                pageSize: 20,
                total: 0
            },
        }
    },
    created() {
        this.time = this.$route.query.sBrand + '汽车销量'
        this.form.token = this.getToken;
        this.form.sBrand = this.$route.query.sBrand;
        this.form.sStartTime = this.$route.query.sourcetime + '-01';
        this.form.sEndTime = this.$route.query.sourcetime + '-28';
        this.getData();
    },
    methods: {
        getData() {
            let obj = Object.assign(this.form, {});
            getCheZhuCarBrandSeriesRanking(obj).then(res => {
                let data = res.data;
                this.time = this.$route.query.sBrand + '销量详情(' + data[0].sourcetime +')';
                this.pagination.total = res.totalNum
                this.tbData = data;
            })
        },
        //查询
        // onSearch() {
        //     this.tableLoad = true;
        //     this.form.sStartTime = this.selTime[0];
        //     this.form.sEndTime = this.selTime[1];
        //     getCheZhuCarBrandSeriesRanking(this.form).then(res => {
        //         let data = res.data;
        //         this.time = this.$route.query.sBrand + '销量详情(' + data[0].sourcetime +')';
        //         this.pagination.total = res.totalNum
        //         this.tbData = data;
        //         this.tableLoad = false
        //     })
        // },
        //改变页面数据
        handlerPagnation(page) {
            this.tableLoad = true;
            let cur = page.current;
            this.pagination.current = cur;
            this.form.iPageIndex = cur;
            getCheZhuCarBrandSeriesRanking(this.form).then(res => {
                let data = res.data;
                this.pagination.total = res.totalNum
                this.tbData = data;
                this.tableLoad = false
            })
        },
        //查看图表
        onTable() {},
        //返回
        goBack() {
            this.$router.go(-1);
        },
        disabledDate(current) {
            return current > moment();
        },
        //点击详细销量
        onSale(record) {
            let carseries = record.carseries
            this.$router.push(
                {
                    path: '/saleRank/seriesInfo',
                    query: {
                        sBrand: this.$route.query.sBrand,
                        sSeriesName: carseries
                    }
                }
            );
        }
    }
}
</script>

<style lang="less">
.binfo-outter {
    width: 1552px;
    // height: 460px;
    border: 2px solid #0f2a4d;
    .d2 {
        display: flex;
        justify-content: flex-start;
        padding: 16px;
    }
    .d3 {
        padding: 16px;
    }
}
</style>