carInsightSystem/src/views/SaleRank/AllLevel/SUVCar/index.vue

<template>
    <div class="suv-outter" v-loading="load">
        <v-label-div :title="time+'('+form.sStartTime+'至'+form.sEndTime+')'">
            <v-btn @click="onTable">查看图表</v-btn>
            <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" :pagination="pagination" :loading="tableLoading">
                <template slot="about" slot-scope="text, record">
                    <a-button type="primary" @click="onSale(record)">销量</a-button>
                </template>
            </v-table>
        </div>
        <a-modal title="SUV销量排行榜趋势图(单位:辆)" width="1200px" :footer="null" @cancel="onClose" :visible="visible">
            <div class="modal-table">
                <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" type="primary" style="margin-left: 40px">查询</a-button>
                <div class="tb-inner">
                    <v-echarts :opt="opt"></v-echarts>
                </div>
            </div>
        </a-modal>
    </div>
</template>

<script>
import {getCheZhuCarCategory} from "@/api/SaleRank"
import {getCheZhuCountTime} from "@/api/SaleRank"
import {getBrandName} from "@/api/comm"
import createOpt from "./opt"
import moment from "moment";
export default {
    name: 'SUVCar',
    data() {
        return {
            load: false,
            time: 'SUV销量排行榜',
            selTime: [],
            form: {
                token: '',
                sStartTime: '',
                sEndTime: '',
                sTimeType: 4,
                sSpec: 'suv'
            },
            opt: {},
            //表格
            pagination: {
                pageSize: 20,
            },
            tbData: [],
            tableLoading: false,
            columns: [
                {
                    title: "排名",
                    dataIndex: "id",
                    key: "id",
                    width: 120
                },
                {
                    title: "车型",
                    dataIndex: "seriesname",
                    key: "seriesname",
                },
                {
                    title: "能源类型",
                    dataIndex: "energys",
                    key: "energys",
                },
                {
                    title: "销量",
                    dataIndex: "salescount",
                    key: "salescount",
                },
                {
                    title: "售价(万元)",
                    dataIndex: "price",
                    key: "price",
                },
                {
                    title: "车型相关",
                    dataIndex: "about",
                    key: "about",
                    scopedSlots: { customRender: "about" },
                },
            ],
            //图表
            visible: false,
        }
    },
    created() {
        this.form.token = this.getToken
        this.getData();
    },
    methods: {
        getData() {
            this.load = true;
            let o = {token: this.getToken};
            getCheZhuCountTime(o).then(res => {
                let data = res.data;
                this.form.sStartTime = data.Data[0].Time;
                this.form.sEndTime = data.Data[data.Data.length-1].Time;
                let obj = {
                    token: this.getToken,
                    sTimeType: 4,
                    sStartTime: this.form.sStartTime + '-01',
                    sEndTime: this.form.sEndTime + '-01',
                    sSpec: 'suv'
                }
                getCheZhuCarCategory(obj).then(res => {
                    let data = res.data;
                    this.tbData = data;
                    let dx = [];
                    let ds = [];
                    data.forEach(ele => {
                        dx.push(ele.seriesname);
                        ds.push(ele.salescount);
                    })
                    this.opt = createOpt(dx,ds);
                });
                this.load = false
            });
        },
        //查询
        onSearch() {
            this.form.sStartTime = this.selTime[0];
            this.form.sEndTime = this.selTime[1];
            let obj = Object.assign({},this.form);
            getCheZhuCarCategory(obj).then(res => {
                let data = res.data;
                this.tbData = data;
                let dx = [];
                let ds = [];
                data.forEach(ele => {
                    dx.push(ele.seriesname);
                    ds.push(ele.salescount);
                })
                this.opt = createOpt(dx,ds);        
            })
        },
        //查看图表
        onTable() {
            this.visible = true;
        },
        onClose() {
            this.visible = false;
        },
        //返回
        goBack() {
            this.$router.go(-1);
        },
        disabledDate(current) {
            return current > moment();
        },
        //点击销量
        onSale(value) {
            let seriesname = value.seriesname;
            getBrandName({token: this.getToken, sSeriesName:seriesname}).then(res => {
                let brandName = res.data;
                this.$router.push(
                {
                    path: '/saleRank/seriesInfo',
                    query: {
                        sBrand: brandName,
                        sSeriesName: seriesname
                    }
                }
            );
            })
        }
    }
}
</script>

<style lang="less">
    .suv-outter {
        width: 1552px;
        border: 2px solid #0f2a4d;
        .d2 {
            display: flex;
            justify-content: flex-start;
            padding: 16px;
        }
    }
    .modal-table {
        width: 1200px;
        height: 460px;
        .tb-inner {
            width: 100%;
            height: calc(100% - 48px);
            margin-top: 24px;
        }
    }    
</style>