oa-system/src/components/statistics/Statistically.vue

<template>
    <div>
        <div class="statistically-all">
            <div class="yeardate">
                <el-date-picker
                    @change="yearchange"
                    style="width:200px;"
                    v-model="year"
                    type="year"
                    placeholder="选择年">
                </el-date-picker>
            </div>
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                <el-tab-pane label="营业额、成本支出、毛利润" name="first">
                    <div class="canvas-box">
                        <div id="statisticallyone" style="width: 100%;height:400px;"></div>
                        <div id="grossmargins" style="width: 100%;height:400px;"></div>
                        <div id="grossmargin" style="width: 100%;height:400px;"></div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="国交数据统计" name="second">
                    <div class="canvas-box">
                        <div id="grossmarginss" style="width: 100%;height:400px;"></div>
                        <div id="Airticketcitybox" style="width: 100%;height:400px;"></div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="会务数据统计" name="third">会务数据统计</el-tab-pane>
                <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
            </el-tabs>
            
            
        </div>
    </div>
</template>
<script>
import * as echarts from 'echarts';
export default {
    data () {
        return {
            year:new Date(),
            businessincome:[],
            Grossprofit:[],
            costing:[],
            Airticketnum:[],
            Airticketcity:[],
            aaa:[
                ['product', '去年销售额', '今年销售额'],
                ['1月', 43.3, 85.8],
                ['2月', 83.1, 73.4],
                ['3月', 86.4, 65.2],
                ['4月', 72.4, 53.9],
                ['5月', 72.4, 53.9],
                ['6月', 72.4, 53.9],
                ['7月', 72.4, 53.9],
                ['8月', 72.4, 53.9],
                ['9月', 72.4, 53.9],
                ['10月', 72.4, 53.9],
                ['11月', 72.4, 53.9],
                ['12月', 72.4, 53.9],
            ],
            bbb:[
                ['product', '毛利率',],
                ['1月', 43.3,],
                ['2月', 83.1,],
                ['3月', 86.4,],
                ['4月', 72.4,],
                ['5月', 72.4,],
                ['6月', 72.4,],
                ['7月', 72.4,],
                ['8月', 72.4,],
                ['9月', 72.4,],
                ['10月', 72.4,],
                ['11月', 72.4,],
                ['12月', 72.4,],
            ],
            activeName: 'second',
        }
    }, 
    methods: {
        handleClick(tab, event) {
            console.log(this.activeName);
            if(this.activeName=='first'){
                this.StatisticsYOY()
            }
            if(this.activeName=='second'){
                this.StatisticsAirTicket()
            }
            // console.log(tab, event);
        },
        //处理时间
        getdate(val){
            var date=new Date(val);
            var y=date.getFullYear();
            return y
        },
        groupstatisone(){
            var grossmarginss = echarts.init(document.getElementById('grossmarginss'));
            grossmarginss.setOption({
                title:{
                    text: '预订机票数量',
                },
                legend: {},
                tooltip: {
                    formatter:function(params){
                        var html="该月总次数："+params.data[1]+"次<br/>";
                        for(let i=0;i<params.data[2].length;i++){
                            html += '团组：'+params.data[2][i].groupName+'&nbsp;&nbsp;&nbsp;'+'预订机票次数：' +params.data[2][i].quantity+"<br/>";
                        }
                        return html 
                    }

                },
                dataset: {
                    source: this.Airticketnum
                },
                xAxis: { type: 'category' },
                yAxis: {
                    name: '机票数量',
                },
                color:['#2e83d4'],
                // Declare several bar series, each will be mapped
                // to a column of dataset.source by default.
                series: [{ type: 'bar' }]
            });
            var Airticketcitybox = echarts.init(document.getElementById('Airticketcitybox'));
            Airticketcitybox.setOption({
                title:{
                    text: '机票到达地数量',
                },
                legend: {},
                tooltip: {
                    formatter:function(params){
                        console.log(params.data);
                        var html="该月总次数："+params.data[1]+"次<br/>";
                        for(let i=0;i<params.data[2].length;i++){
                            html += '城市：'+params.data[2][i].city+'&nbsp;&nbsp;&nbsp;'+'到到此城市次数：' +params.data[2][i].quantity+"<br/>";
                        }
                        return html 
                    }

                },
                dataset: {
                    source: this.Airticketcity
                },
                xAxis: { type: 'category' },
                yAxis: {
                    name: '到达次数',
                },
                color:['#2e83d4'],
                // Declare several bar series, each will be mapped
                // to a column of dataset.source by default.
                series: [{ type: 'bar' }]
            });
        },
        statisone(){
            var myChart = echarts.init(document.getElementById('statisticallyone'));
            myChart.setOption({
                title:{
                    text: '业务总营业额',
                },
                legend: {},
                tooltip: {},
                dataset: {
                    source: this.businessincome
                },
                xAxis: { type: 'category' },
                yAxis: {
                    name: '营业额',
                },
                series: [{ type: 'bar' }, { type: 'bar' },]
            });
            var grossmargins = echarts.init(document.getElementById('grossmargins'));
            grossmargins.setOption({
                title:{
                    text: '成本',
                },
                legend: {},
                tooltip: {},
                dataset: {
                    source: this.costing
                },
                xAxis: { type: 'category' },
                yAxis: {
                    name: '成本额',
                },
                series: [{ type: 'bar' }, { type: 'bar' },]
            });
            var grossmargin = echarts.init(document.getElementById('grossmargin'));
            grossmargin.setOption({
                title:{
                    text: '毛利润',
                },
                legend: {},
                tooltip: {
                    // formatter:function(params){
                    //     console.log(params);
                    //     var html = params.data[0]+'毛利率'+"<br/>"+ params.data[1]+"%";
                    //     return html 
                    // }

                },
                dataset: {
                    source: this.Grossprofit
                },
                xAxis: { type: 'category' },
                yAxis: {
                    name: '毛利额',
                },
                color:['#EEAD0E','#a0a7e6'],
                // Declare several bar series, each will be mapped
                // to a column of dataset.source by default.
                series: [{ type: 'bar' },{ type: 'bar' }]
            });
        },
        //年change
        yearchange(){
            // this.businessincome=[];
            // this.Grossprofit=[];
            // this.costing=[];
            this.StatisticsYOY()
        },
        //获取营业额、成本支出、毛利润数据
        StatisticsYOY(){
            var url = "/api/Statistics/StatisticsYOY"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer '
                },
                data:{
                    year:that.getdate(that.year),
                }
            }).then(function (res) {
                if(res.data.code==200){
                    that.businessincome=[];
                    that.Grossprofit=[];
                    that.costing=[];
                    //营业额
                    that.businessincome.push(['product', '前一年该月营业额', '本年该月营业额']);
                    for(let i=0;i<res.data.data.salesYOYData.length;i++){
                        that.businessincome.push([res.data.data.salesYOYData[i].month+'月',res.data.data.salesYOYData[i].lastAmount,res.data.data.salesYOYData[i].thisAmount]);
                    }
                    //毛利润
                    that.Grossprofit.push(['product', '前一年该月毛利润', '本年该月毛利润']);
                    for(let j=0;j<res.data.data.grossProfitYOYData.length;j++){
                        that.Grossprofit.push([res.data.data.grossProfitYOYData[j].month+'月',res.data.data.grossProfitYOYData[j].lastAmount,res.data.data.grossProfitYOYData[j].thisAmount]);
                    }
                    //成本
                    that.costing.push(['product', '前一年该月成本', '本年该月成本']);
                    for(let g=0;g<res.data.data.costYOYData.length;g++){
                        that.costing.push([res.data.data.costYOYData[g].month+'月',res.data.data.costYOYData[g].lastAmount,res.data.data.costYOYData[g].thisAmount]);
                    }
                    that.statisone()
                }else{
                    that.$message({
                        message: res.data.msg,
                        type: 'warning'
                    });
                }
            })
        },
        //获取国交数据统计数据
        StatisticsAirTicket(){
            var url = "/api/Statistics/StatisticsAirTicket"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer '
                },
                data:{
                    year:that.getdate(that.year),
                }
            }).then(function (res) {
                if(res.data.code==200){
                    that.Airticketnum=[];
                    that.Airticketcity=[];
                    var datainfo=res.data.data;
                    //机票数
                    that.Airticketnum.push(['product','本年机票数量']);
                    for(let i=0;i<datainfo.airTicketNumData.length;i++){
                        that.Airticketnum.push([datainfo.airTicketNumData[i].month+'月',datainfo.airTicketNumData[i].quantity,datainfo.airTicketNumData[i].aitTicketInfos]);
                    }
                    //机票到达地
                    that.Airticketcity.push(['product','本年机票到达地']);
                    for(let i=0;i<datainfo.airTicketAreaData.length;i++){
                        that.Airticketcity.push([datainfo.airTicketAreaData[i].month+'月',datainfo.airTicketAreaData[i].quantity,datainfo.airTicketAreaData[i].cityData]);
                    }
                    that.groupstatisone()
                }else{
                    that.$message({
                        message: res.data.msg,
                        type: 'warning'
                    });
                }
            })
        },
    },
    mounted(){
        // this.StatisticsYOY();
        this.StatisticsAirTicket();
    }
}
</script>
<style>
.statistically-all{
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 0 5px #0005;
    border-radius: 10px;
    height: 100%;
    min-height: 830px;
}
.canvas-box{
    display: flex;
    flex-wrap: wrap;
}
.yeardate{
    margin-bottom: 10px;
}
</style>