carInsightSystem/src/views/SaleRank/MarketSaleNE/mneMPPercent/index.vue

<template>
    <div class="mscet-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-month-picker @change="getData" style="width: 146px" :allowClear="false" v-model="selTime[0]" valueFormat="YYYY-MM" placeholder="开始日期"></a-month-picker>
                    <a-month-picker @change="getData" style="width: 146px;margin-left: 16px" :allowClear="false" v-model="selTime[1]" valueFormat="YYYY-MM" placeholder="结束日期"></a-month-picker>
                </a-form-model-item>
            </a-form-model>
        </div>
        <div class="d3" v-if="getIsLight">
            <v-echarts :opt="opt2"></v-echarts>
        </div>
        <div class="d3" v-else>
            <v-echarts :opt="opt"></v-echarts>
        </div>
    </div>
</template>

<script>
import {getSalesSpecNameByPriceRangeByEnergy} from "@/api/SaleRankMarket";
import {getCheZhuLatestTime} from "@/api/SaleRank"
import createOpt from './opt'
import createOptLight from './optLight'
export default {
    name: 'totalTop20',
    data() {
        return {
            form: {
                token: '',
                sTimeType: 4,
                sStartTime: '',
                sEndTime: '',
            },
            selTime: ['',''],
            opt: {},
            opt2: {},
        }
    },
    created() {
        this.form.token = this.getToken;
        getCheZhuLatestTime({token: this.form.token}).then(res => {
            var dt = new Date(res.data)
            var newDt = new Date( (dt.setMonth(dt.getMonth() - 11)) ).toISOString();
            this.selTime = [newDt.slice(0,7), res.data];
            this.getData()
        })
    },
    methods: {
        getData() {
            let obj = {
                token: this.form.token,
                sTimeType: 4,
                sStartTime: this.selTime[0],
                sEndTime: this.selTime[1],
            }
            getSalesSpecNameByPriceRangeByEnergy(obj).then(res => {
                let newData = [];
                for(let i=0;i<res.data.length;i++) {
                    let arr = [];
                    let total = 0;
                    res.data[i].Data.forEach(ele => {
                        total = ele.Value*1 + total;
                    });
                    res.data[i].Data.forEach(ele => {
                        let o = {
                            Key: ele.Key,
                            Value: (ele.Value*100/total).toFixed(2)
                        };
                        arr.push(o)
                    });

                    let obj = {
                        Time: res.data[i].Key,
                        Data: arr
                    };
                    newData.push(obj)
                }
                let dx = [];
                let ds = [];
                newData.forEach((ele) => {
                    let key = ele.Time;
                    let value = ele.Data;
                    dx.push(key);
                    ds.push(value);
                });
                this.opt = createOpt(dx, ds);
                this.opt2 = createOptLight(dx, ds);
            })
        },
        report() {
            let obj = {
                token: this.form.token,
                sTimeType: 4,
                sStartTime: this.selTime[0],
                sEndTime: this.selTime[1],
                isExcel: 1,
            };
            let authBtns = this.getLevelBtn;
            for(let i=0;i<authBtns.length;i++) {
                if(authBtns[i].Id == '815') {
                    getSalesSpecNameByPriceRangeByEnergy(obj).then(res => {
                        let data = res.data;
                        window.open(data);
                    })
                    return true;
                };
            };
            this.$message.error('权限不足')
        }
    }
}
</script>

<style lang="less">
.mscet-outter {
    width: 1552px;
    height: 760px;
    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% - 112px);
    }
}
</style>