carInsightSystem/src/views/SaleRank/MarketSaleNE/mneMainPrice/seriesAuto/index.vue

<template>
    <div class="tpsv-outter" :style="getIsLight?{background: '#FFF'}:{}">
        <v-label-div v-if="!getIsLight" title="新能源轿车销量">
            <a-button type="primary" @click="report">导出报告</a-button>
        </v-label-div>
        <v-label-div-light v-else title="新能源轿车销量" class="lightSy">
            <a-button type="primary" @click="report">导出报告</a-button>
        </v-label-div-light>
        <div class="d2">
            <a-form-model :class="getIsLight?'lightSy':'dark'" layout="inline">
                <a-form-model-item label="选择年份">
                    <a-select style="width: 146px" v-model="yearNumber" @change="yearChange">
                        <a-select-option v-for="(item,index) in yearList" :key="index" :value='item'>{{item}}</a-select-option>
                    </a-select>
                </a-form-model-item>
            </a-form-model>
        </div>
        <div v-if="!getIsLight" class="d3">
            <v-echarts :opt="opt"></v-echarts>
        </div>
        <div v-else class="d3">
            <v-echarts :opt="opt2"></v-echarts>
        </div>
    </div>
</template>

<script>
import createOpt from './opt'
import createOptLight from './optLight'
import {getSalesSpecName1TypesBySedanE} from "@/api/SaleRankMarket";
import {getCheZhuLatestTime} from "@/api/SaleRank"
export default {
    name: 'totalPassengerVehicle',
    data() {
        return {
            form: {
                token: '',
                sTimeType: 4,
                sStartTime: '',
                sEndTime: '',
            },
            yearNumber: 0,
            selTime: ['',''],
            opt: {},
            opt2: {},
            yearList: []
        }
    },
    created() {
        this.form.token = this.getToken;
        getCheZhuLatestTime({token: this.form.token}).then(res => {
            this.form.sEndTime = res.data;
            this.yearNumber = res.data.slice(0,4) * 1;
            let currYear = res.data.slice(0,4) * 1;
            this.yearList = [currYear, currYear-1, currYear-2 ,currYear-3 ,currYear-4]
            this.form.sStartTime = (currYear-1) + '-01';
            this.getData()
        })
    },
    methods: {
        getData() {
            let obj = {
                token: this.form.token,
                sTimeType: 4,
                sStartTime: this.form.sStartTime,
                sEndTime: this.form.sEndTime,
            }
            getSalesSpecName1TypesBySedanE(obj).then(res => {
                let data = res.data;
                let firstYearData = []; //0 - 11 count
                let secondYearData = []; //12+ count
                let percent = []; //12+ YearOnYearGrowth
                for(let i = 0;i<data.length;i++) {
                    if(i < 12) {
                        firstYearData.push(data[i].Count)
                    } else {
                        secondYearData.push(data[i].Count);
                        percent.push(data[i].YearOnYearGrowth)
                    }
                };
                this.opt = createOpt(firstYearData,secondYearData,percent,this.yearNumber)
                this.opt2 = createOptLight(firstYearData,secondYearData,percent,this.yearNumber)
            });
        },
        report() {
            let obj = {
                token: this.form.token,
                sTimeType: 4,
                sStartTime: this.form.sStartTime,
                sEndTime: this.form.sEndTime,
                isExcel: 1,
            };
            let authBtns = this.getLevelBtn;
            for(let i=0;i<authBtns.length;i++) {
                if(authBtns[i].Id == '815') {
                    getSalesSpecName1TypesBySedanE(obj).then(res => {
                        let data = res.data;
                        window.open(data);
                    })
                    return true;
                };
            };
            this.$message.error('权限不足')
        },
        yearChange() {
            this.form.sStartTime = (this.yearNumber-1) + '-01';
            this.form.sEndTime = (this.yearNumber) + '-12';
            this.getData()
        }
    }
}
</script>

<style lang="less">
.tpsv-outter {
    width: 1552px;
    height: 532px;
    margin-top: 16px;
    border: 2px solid #0f2a4d;
    .d2 {
        display: flex;
        justify-content: flex-start;
        padding: 8px 16px 0px 16px;
    }
    .d3 {
        // padding: 0px 16px 16px 16px;
        width: 100%;
        height: calc(100% - 96px);
    }
}
</style>