kmall-haikong/kmall-admin/src/main/webapp/js/sale/monthlyCustomers2.js

// $(function () {
//     var data = {
//         "echatX": [
//             "2019-07-02",
//             "2019-07-03",
//             "2019-07-04",
//             "2019-07-05",
//             "2019-07-06",
//             "2019-07-07",
//             "2019-07-08",
//             "2019-07-09",
//             "2019-07-10",
//             "2019-07-11",
//             "2019-07-12",
//             "2019-07-13",
//             "2019-07-14",
//             "2019-07-15"
//         ],
//         "echatY": [
//             501,210,123,333,445,157,151,369,101,101,350,435,153,100
//         ],
//         "echatY2": [
//             80,40,13,36,57,77,41,39,61,31,60,73,33,50
//         ],
//         "echatY3": [
//             5091,2210,1233,3133,4415,1517,1511,3619,1101,1011,3510,4315,1513,1100
//         ],
//         "echatY4": [
//             501,210,123,333,445,157,151,369,101,101,350,435,153,100
//         ],
//         "peopleTotal":15,"peopleOnline":4,"peopleOutline":12,"ranges":[]
//     };
//     dFun(data.echatX, data.echatY, data.echatY2,data.echatY3,data.echatY4);
//
//
// });
// var myChart;
// // 基于准备好的dom，初始化echarts实例
// var dChart = echarts.init(document.getElementById('main3'));
// // 指定图表的配置项和数据
// function dFun(dateList, totalNumberList, totalSalesList,taotalCustomersList,avgBasketSaleList) {
//     dChart.setOption({
//         // title: {
//         //     left: 'left',
//         //     text: '概率',
//         //     show: false
//         // },
//         tooltip: {
//             trigger: 'axis',
//             // formatter: '{a}:{c}',
//             axisPointer: {
//                 type: 'shadow',
//                 crossStyle: {
//                     color: '#999'
//                 }
//             }
//         },
//         grid: {
//             show: false,
//             left: '3%',
//             right: '4%',
//             bottom: '10%'
//         },
//         // legend: {
//         //     show: true,
//         //     selectedMode: 'single', // 设置显示单一图例的图形，点击可切换
//         //     bottom: 10,
//         //     left: 50,
//         //     textStyle: {
//         //         color: '#666',
//         //         fontSize: 12
//         //     },
//         //     itemGap: 20,
//         //     inactiveColor: '#ccc'
//         // },
//         xAxis: {
//             // splitLine: {　　　　 show: false　　 },
//             type: 'category',
//             data: dateList,
//             axisPointer: {
//                 type: 'shadow'
//             },
//             // 改变x轴颜色
//             axisLine: {
//                 lineStyle: {
//                     color: '#00a2e2',
//                     width: 1, // 这里是为了突出显示加上的
//                 }
//             },
//             axisTick: {
//                 show: true,
//                 interval: 0
//             },
//         },
//         // 设置两个y轴，左边显示数量，右边显示概率
//         yAxis: [{
//             splitLine: {　　　　 show: false　　 },
//             type: 'value',
//             name: '',
//             // max: 10000,
//             // min: 0,
//             // show: true,
//             // interval: 1000,
//             // 改变y轴颜色
//             axisLine: {
//                 lineStyle: {
//                     color: '#00a2e2',
//                     width: 1, // 这里是为了突出显示加上的
//                 }
//             },
//         }, // 右边显示概率
//         {
//             splitLine: {　　　　 show: false　　 },
//             type: 'value',
//             name: '客单价',
//             // min: 0,
//             // max: 100,
//             // interval: 10,
//             // 改变y轴颜色
//             axisLine: {
//                 lineStyle: {
//                     color: '#00a2e2',
//                     width: 1, // 这里是为了突出显示加上的
//                 }
//             }
//         }],
//         // 每个设备分数量、概率2个指标，只要让他们的name一致，即可通过，legeng进行统一的切换
//         series: [{
//             name: 'Units Sold',
//             type: 'bar',
//             symbol: 'circle', // 折线点设置为实心点
//             symbolSize: 4, // 折线点的大小
//             data: totalNumberList,
//             barWidth: '20%',
//
//         },{
//             name: 'Sales',
//             type: 'bar',
//             symbol: 'circle', // 折线点设置为实心点
//             symbolSize: 4, // 折线点的大小
//             data: totalSalesList,
//             barWidth: '20%',
//
//         },{
//             name: 'Customers',
//             type: 'bar',
//             symbol: 'circle', // 折线点设置为实心点
//             symbolSize: 4, // 折线点的大小
//             data: taotalCustomersList,
//             barWidth: '20%',
//
//         },
//             {
//             //折线
//             name: 'Average Basket Sale',
//             type: 'line',
//             symbol: 'circle', // 折线点设置为实心点
//             symbolSize: 6, // 折线点的大小
//             yAxisIndex: 1, // 这里要设置哪个y轴，默认是最左边的是0，然后1，2顺序来。
//             data: avgBasketSaleList,
//             symbolSize: 10,
//             itemStyle: {
//                 normal: {
//                     color: "#DDA0DD"
//                 }
//             }
//
//         },
//
//         ]
//
//     });
// }

function queryMonthly(){
    var startMonth = document.getElementById("startMonth").value;
    var endMonth = document.getElementById("endMonth").value;

    var param = {
        startMonth:startMonth,
        endMonth:endMonth
    };
    console.log(param);
    // 折线图
    $.ajax({
        url: "../monthly/customersQuery",
        data: param,
        contentType:"application/x-www-form-urlencoded",
        type: 'POST',
        success: function(data) {
            console.log(JSON.stringify(data))
            // dFun(data.dateList, data.totalNumberList, data.totalSalesList,data.taotalCustomersList,data.avgBasketSaleList);

        },
    });

}

function exportMonthly(){
    var startMonth = document.getElementById("startMonth").value;
    var endMonth = document.getElementById("endMonth").value;

    var params = {
        startMonth:startMonth,
        endMonth:endMonth
    };
    console.log(params);
    exportFile('#rrapp', '../monthly/monthlySalesGrowthExport2', params);

}


function exportSelectedMonthData(){
    var startMonth = document.getElementById("startMonth").value;
    var endMonth = document.getElementById("endMonth").value;
    var monthNumber = document.getElementById("monthNumber").value;

    var param = {
        startMonth:startMonth,
        endMonth:endMonth,
        monthNumber:monthNumber
    };
    console.log(param+321313112);
    exportFile('#rrapp', '../monthly/exportSelectedMonthData', param);
    // $.ajax({
    //     url: "../monthly/exportSelectedMonthData",
    //     data: param,
    //     contentType:"application/x-www-form-urlencoded",
    //     type: 'POST',
    //     success: function(data) {
    //         console.log(JSON.stringify(data))
    //
    //     },
    // });
}



let vm = new Vue({
    el: '#rrapp',
    data: {
        date: '',
        refreshTime: 10,
        type: 'store',
        refreshCount:0,

        storeId: '',
        merchSn: '',
        merchName: '',
        storeName: '',
        salesDate: '',
        totalSales: '',
        actualSales: '',
        preferentialLoss: '',
        totalCost: '',
        grossProfit: '',
        grossProfitRatio: '',
        proportion: '',
        guestNumber: '',
        guestUnitPrice: '',
        lastSalesTime: '',
        categoryId: '',
        categoryName: '',

        showList: false,
        compareDate: '',//比较日期
        storeId2: '',
        merchSn2: '',
        merchName2: '',
        storeName2: '',
        salesDate2: '',
        totalSales2: '',
        actualSales2: '',
        preferentialLoss2: '',
        totalCost2: '',
        grossProfit2: '',
        grossProfitRatio2: '',
        proportion2: '',
        guestNumber2: '',
        guestUnitPrice2: '',
        lastSalesTime2: '',
        intervalId: 0,
        isCompare: false,
        compare2: '',


        temp: {
            date: '',
            refreshTime: 10,
            type: '',
            storeId: '',
            merchSn: '',
            salesDate: '',
            categoryId: ''
        },


        rateList: [
            {
                id: '0',
                name: '含税'
            },
            {
                id: '1',
                name: '不含税'

            }
        ],
        projectList: [
            {
                id: '0',
                name: '销售总额'
            },
            {
                id: '1',
                name: '客单价'

            }
        ],
        seriesTypeList: [
            {
                id: 'bar',
                name: '垂直柱状图'
            },
            {
                id: 'line',
                name: '折线图'

            },
            {
                id: 'pie',
                name: '饼图'

            }
        ],
        formatsList: [
            {
                id: '0',
                name: '<全部>'
            },
            {
                id: '1',
                name: '<非全部>'

            }
        ],
        salesList: [
            {
                store: {storeId: '11106', storeName: '前海店'},
                totalSales: 43046.18,
                actualSales: 35593.46
            }
        ],
        dept: {
            deptId: '',
            deptName: ''
        },
        category: {
            categoryId: '',
            categoryName: ''
        },
        seriesList: [], //保存饼图数据
        seriesList2: [],
        xAxisList: {    //主要用于保存 启动刷新时的条件和数据
            storeId: '',
            storeName: '',
            merchSn: '',
            merchName: '',
            totalSales: '',
            actualSales: '',
            preferentialLoss: '',
            totalCost: '',
            grossProfit: '',
            grossProfitRatio: '',
            proportion: '',
            guestNumber: '',
            guestUnitPrice: '',
            lastSalesTime: '',

            salesDate: '0',
            projectSelect: '0',
            type:''
        },
        dataList: [],
        tooltip: {},
        today:''
    },
    created() {
        this.rateSelect = this.rateList[0].id;
        this.projectSelect = this.projectList[0].id;
        this.seriesTypeSelect = this.seriesTypeList[0].id;
        this.formatsSelect = this.formatsList[0].id;
    },
    methods: {

        seriesTypeSwitch: function () {
            console.log(vm.seriesTypeSelect);
        },
        showEcharts: function () {
            // 基于准备好的dom，初始化echarts实例
            myChart = echarts.init(document.getElementById('main'));
            myChart.clear();
            //加载动画
            myChart.showLoading();


            //项目下拉框判断       6-19，饼图设置 vm.xAxisList
            var temp = '';
            if (vm.xAxisList.projectSelect == '0') {
                if (vm.xAxisList.type == 'dept') {
                    temp = '[' + vm.xAxisList.merchSn + ']' + vm.xAxisList.merchName + '/销售总额:' + vm.xAxisList.totalSales + '元(' + vm.xAxisList.salesDate + ')';
                } else {
                    temp = '[' + vm.xAxisList.storeId + ']' + vm.xAxisList.storeName + '/销售总额:' + vm.xAxisList.totalSales + '元(' + vm.xAxisList.salesDate + ')';
                }
                vm.seriesList2.push(vm.xAxisList.totalSales);
                vm.seriesList.push({value: vm.xAxisList.totalSales, name: temp});

            } else if (vm.xAxisList.projectSelect == '1') {
                if (vm.xAxisList.type == 'dept') {
                    temp = '[' + vm.xAxisList.merchSn + ']' + vm.xAxisList.merchName + '/客单价:' + vm.xAxisList.guestUnitPrice + '元(' + vm.xAxisList.salesDate + ')';
                } else {
                    temp = '[' + vm.xAxisList.storeId + ']' + vm.xAxisList.storeName + '/客单价:' + vm.xAxisList.guestUnitPrice + '元(' + vm.xAxisList.salesDate + ')';
                }
                vm.seriesList2.push(vm.xAxisList.guestUnitPrice);
                vm.seriesList.push({value: vm.xAxisList.guestUnitPrice, name: temp});

            }

            vm.dataList = [temp];

            if (vm.seriesTypeSelect == "pie") {
                vm.seriesList2 = vm.seriesList.concat();
            }

            // console.log('vm.seriesList2');
            // console.log(vm.seriesList2);

            // 指定图表的配置项和数据
            //销售量
            var option = {
                title: {
                    // textAlign: 'right',
                    text: 'Monthly Customers & Avg Basket',
                    x: 'center',
                    textStyle: {
                        //文字颜色
                        color: '#17233d',
                        //字体风格,'normal','italic','oblique'
                        fontStyle: 'normal',
                        //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
                        fontWeight: 'bold',
                        //字体系列
                        fontFamily: 'sans-serif',
                        //字体大小
                        fontSize: 28
                    }
                },
                tooltip: {
                    formatter: function (params) {
                        return params.name;
                    }
                },
                legend: {
                    data: ['/销售总额']
                },
                xAxis: {
                    data: vm.dataList,
                    axisLabel: {
                        interval: 0
                    }
                },
                yAxis: {},
                series: [{
                    barMaxWidth: '20%',
                    barWidth: '50%',
                    radius: '55%',
                    roseType: 'angle',
                    type: vm.seriesTypeSelect,
                    color: ['#dd6b66', '#759aa0'],
                    data: vm.seriesList2
                }]
            };

            //隐藏
            myChart.hideLoading();
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);

        },
        tooltipFormatter: function () {
            if (vm.type == 'dept') {
                return '[' + vm.merchSn + ']' + vm.merchName + '/销售总额:' + vm.totalSales + '元(' + vm.salesDate + ')';
            }
            return '[' + vm.storeId + ']' + vm.storeName + '/销售总额:' + vm.totalSales + '元(' + vm.salesDate + ')';
        },
        showTable: function (postParam) {

            console.log(postParam);

            $("#jqGrid").jqGrid('setGridParam', {
                postData: postParam

            }).trigger("reloadGrid").closest(".ui-jqgrid-bdiv").css({"overflow-x": "scroll"});
        },
        switchProjectView: function () {
            console.log(vm.projectSelect);
        }
    }
});