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

<template>
    <div class="ses-outter">
        <v-label-div :title="time+'('+form.sStartTime+'至'+form.sEndTime+')'">
            <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" :data="tbData" :loading="tableLoading" :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 {getCheZhuCarSeriesRanking} from "@/api/SaleRank"
import {getCheZhuCountTime} from "@/api/SaleRank"
import moment from "moment";
export default {
    name: 'SeriesSale',
    data() {
        return {
            form: {
                token: '',
                sTimeType: 4,
                sStartTime: '',
                sEndTime: '',
                iPageIndex: 1,
                iPageSize: 20,
            },
            selTime: [],
            time: '车型销量排行榜',
            //表格
            tableLoading: false,
            columns: [
                {
                    title: "排名",
                    dataIndex: "id",
                    key: "id",
                    width: 120
                },
                {
                    title: "车型",
                    dataIndex: "seriesname",
                    key: "seriesname",
                },
                {
                    title: "销量",
                    dataIndex: "salescount",
                    key: "salescount",
                },
                {
                    title: "售价",
                    dataIndex: "price",
                    key: "price"
                },
                {
                    title: "车型相关",
                    dataIndex: "about",
                    key: "about",
                    scopedSlots: { customRender: "about" },
                },
            ],
            tbData: [],
            pagination: {
                total: 0,
                current: 1,
                pageSize: 20,
            },
        }
    },
    created() {
        this.form.token = this.getToken;
        if(this.$route.query.sStartTime) {
            this.form.sStartTime = this.$route.query.sStartTime;
            this.form.sEndTime = this.$route.query.sStartTime;
            getCheZhuCarSeriesRanking(this.form).then(res => {
                let data = res.data;
                this.pagination.total = res.totalNum
                this.tbData = data;
                this.tableLoad = false
            })
        } else {
            this.getData()
        }
    },
    methods: {
        getData() {
            let o = {token: this.getToken};
            this.tableLoading = true;
            getCheZhuCountTime(o).then(res => {
                let data = res.data;
                this.form.sStartTime = data.Data[0].Time + '-01';
                this.form.sEndTime = data.Data[data.Data.length-1].Time + '-01';
                let obj = {
                    token: this.getToken,
                    sTimeType: 4,
                    sStartTime: this.form.sStartTime,
                    sEndTime: this.form.sEndTime,
                    iPageIndex: 1,
                    iPageSize: 20,
                }
                getCheZhuCarSeriesRanking(obj).then(res => {
                    let data = res.data;
                    this.pagination.total = res.totalNum
                    this.tbData = data;
                    this.tableLoading = false
                })
            });
        },
        //查看图表
        onTable() {},
        //返回
        goBack() {
            this.$router.go(-1);
        },
        disabledDate(current) {
            return current > moment();
        },
        //查询
        onSearch() {
            this.tableLoading = true;
            this.form.sStartTime = this.selTime[0];
            this.form.sEndTime = this.selTime[1];
            getCheZhuCarSeriesRanking(this.form).then(res => {
                let data = res.data;
                this.pagination.total = res.totalNum
                this.tbData = data;
                this.tableLoading = false
            })
        },
        //改变页面数据
        handlerPagnation(page) {
            this.tableLoading = true;
            let cur = page.current;
            this.pagination.current = cur;
            this.form.iPageIndex = cur;
            getCheZhuCarSeriesRanking(this.form).then(res => {
                let data = res.data;
                this.pagination.total = res.totalNum
                this.tbData = data;
                this.tableLoading = false
            })
        },
        //点击销量
        onSale(record) {
            let sBrand = record.brand;
            let sSeriesName = record.seriesname;
            this.$router.push(
                {
                    path: '/saleRank/seriesInfo',
                    query: {
                        sBrand: sBrand,
                        sSeriesName: sSeriesName
                    }
                }
            );
        }
    }
}
</script>

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