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

$(function () {

vm.showEcharts();
console.log(1);

$("#jqGrid").jqGrid({
    url:'../realtimeSalesDetection/query',
    datatype: "json",
    colModel: [
        {label: '门店编码', name: 'storeId', index: 'storeId', width: 80},
        {label: '门店名称', name: 'storeName', index: 'storeName', width: 120},
        {label: '商户编码', name: 'merchSn', index: 'storeId', width: 220},
        {label: '商户名称', name: 'merchName', index: 'storeName', width: 120},
        {label: '售价总额', name: 'totalSales', index: 'totalSales',align: 'right',width: 80},
        {label: '实际销售额', name: 'actualSales', index: 'actualSales',align: 'right',width: 80},
        {label: '占比 %', name: 'proportion', index: 'proportion',align: 'right',width: 60},
        {label: '优惠损失', name: 'preferentialLoss', index: 'preferentialLoss',align: 'right',width: 80},
        {label: '成本总额', name: 'totalCost', index: 'totalCost',align: 'right',width: 80},
        {label: '毛利', name: 'grossProfit', index: 'grossProfit',align: 'right',width: 80},
        {label: '毛利率', name: 'grossProfitRatio', index: 'grossProfitRatio',align: 'right',width: 60},
        {label: '来客数', name: 'guestNumber', index: 'guestNumber',align: 'right',width: 100},
        {label: '客单价', name: 'guestUnitPrice', index: 'guestUnitPrice',align: 'right',width: 80},

        {label: '最后销售时间', name: 'lastSalesTime', index: 'lastSalesTime', align: 'center',width: 180,formatter: function (value) {
                return transDate(value,'yyyy-MM-dd hh:mm:ss');
            }}
        // {label: '说明', name: 'guestUnitPrice', index: 'guestUnitPrice',align: 'right',width: 80}
    ],
    viewrecords: true,
    height: 200,
    rowNum: 10,
    rowList: [10, 30, 50],
    rownumbers: true,
    rownumWidth: 25,
    autowidth: true,
    shrinkToFit: false,
    autoScroll: true,   //开启水平滚动条
    width: 1500,
    multiselect: true,
    pager: "#jqGridPager",
    jsonReader: {
        root: "page.list",
        page: "page.currPage",
        total: "page.totalPage",
        records: "page.totalCount"
    },
    prmNames: {
        page: "page",
        rows: "limit",
        order: "order"
    },
    gridComplete: function () {
        $("#jqGrid").closest(".ui-jqgrid-bdiv").css({"overflow-x": "scroll"});
    }
});
});
var myChart ;

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

        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,

        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:[],
        dataList: [],
        tooltip:{}
    },
    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: {
        addParam:function(postParam,dateType){ //添加请求参数, dateType： 0刷新，1比较
            // var currentDate = new Date();
            // currentDate = currentDate.getFullYear()+'-'+(currentDate.getMonth()+1)+'-'+currentDate.getDate();
            postParam={};
            if(vm.type=="store"){
                // vm.storeId = '10'; //测试
                if(vm.storeId==''||vm.storeId==null){
                    alert("请在输入框中输入门店编号！");
                    return false;
                }
                postParam.storeId = vm.storeId;
            }else if(vm.type=="dept"){
                if(vm.merchSn==''||vm.merchSn==null){
                    alert("请在输入框中输入部门编号！");
                    return false;
                }
                postParam.merchSn = vm.merchSn;
            }else if(vm.type=="category"){
                if(vm.storeId==''||vm.storeId==null){
                    alert("请在输入框中输入门店编号和品类编号！");
                    return false;
                }
                if(vm.categoryId==''||vm.categoryId==null){
                    alert("请在输入框中输入品类编号！");
                    return false;
                }
                postParam.storeId = vm.storeId;
                postParam.categoryId = vm.categoryId;
            }else{
                alert("请选中查询条件(门店、部门、品类，选中一个)"+vm.type);
                return false;
            }
            //判断是刷新还是比较
            if(dateType==0){
                var sDate=vm.salesDate.replace(/(^\s+|\s+$)/g,'');//去两边空格;
                if(sDate!=''){
                    postParam.salesDate = vm.salesDate;
                }
            }else if(dateType==1){
                var sDate=vm.compareDate.replace(/(^\s+|\s+$)/g,'');//去两边空格;
                if(sDate!=''){
                    postParam.compareDate = vm.compareDate;
                }
            }
            // console.log('postParam');
            // console.log(postParam);
            return postParam;
        },
        refresh: function () {
            var postParam={};
            postParam =  vm.addParam(postParam,0);
            if(!postParam){
                return;
            }
            vm.showList = true;
            $.ajax({
                url:'../realtimeSalesDetection/query',
                type:"POST",
                data:postParam,
                dataType:'json',
                success:function(r){
                    //查询显示表格数据
                    vm.showTable(postParam);
                    r = r.page.list[0];
                    console.log(r);

                    if(r.lastSalesTime == null){
                        if(vm.type == 'dept'){
                            alert("该部门"+vm.salesDate+"无销售记录");
                            return;
                        }
                        alert("该门店"+vm.salesDate+"无销售记录");
                        return;
                    }

                    vm.storeId = r.storeId;
                    vm.storeName = r.storeName;
                    vm.merchSn = r.merchSn;
                    vm.merchName = r.merchName;
                    vm.totalSales = r.totalSales;
                    vm.actualSales = r.actualSales;
                    vm.preferentialLoss = r.preferentialLoss;
                    vm.totalCost = r.totalCost;
                    vm.grossProfit = r.grossProfit;
                    vm.grossProfitRatio = r.grossProfitRatio;
                    vm.proportion = r.proportion;
                    vm.guestNumber = r.guestNumber;
                    vm.guestUnitPrice = r.guestUnitPrice;
                    vm.lastSalesTime = r.lastSalesTime;


                    vm.seriesList=[];
                    vm.seriesList2 =[]; //清空 系列 数据

                    vm.showEcharts();
                }

            });
        },
        compare: function () {
            if(vm.seriesList2.length <1){
                alert("请先刷新一条数据再比较！");
                return;
            }
            vm.switchProjectView();
            var postParam={};
            postParam =  vm.addParam(postParam,1);
            if(!postParam){
                return;
            }
            $.ajax({
                url:'../realtimeSalesDetection/query',
                type:"POST",
                data:postParam,
                dataType:'json',
                success:function(r){
                    console.log(r);
                    r = r.page.list[0];
                    console.log(r);
                    if(r.lastSalesTime == null){
                        if(vm.type == 'dept'){
                            alert("该部门"+vm.compareDate+"无销售记录");
                            return;
                        }
                        alert("该门店"+vm.compareDate+"无销售记录");
                        return;
                    }

                    vm.storeId2 = r.storeId;
                    vm.merchSn2 = r.merchSn;
                    vm.merchName2 = r.merchName;
                    vm.storeName2 = r.storeName;
                    vm.salesDate2 = vm.compareDate;
                    vm.totalSales2 = r.totalSales;
                    vm.actualSales2 = r.actualSales;
                    vm.preferentialLoss2 = r.preferentialLoss;
                    vm.totalCost2 = r.totalCost;
                    vm.grossProfit2 = r.grossProfit;
                    vm.grossProfitRatio2 = r.grossProfitRatio;
                    vm.proportion2 = r.proportion;
                    vm.guestNumber2 = r.guestNumber;
                    vm.guestUnitPrice2 = r.guestUnitPrice;
                    vm.lastSalesTime2 = r.lastSalesTime;

                    if(vm.seriesList2.length > 1){

                        //删除并替换
                        if(vm.projectSelect=='0'){
                            vm.seriesList2.splice(1,1,vm.totalSales2);
                            if(vm.type == 'dept'){
                                vm.dataList.splice(1,1,'['+vm.merchSn+']'+vm.merchName2+'/售价总额:'+vm.totalSales2+'('+vm.salesDate2+')');
                            }else{
                                vm.dataList.splice(1,1,'['+vm.storeId+']'+vm.storeName2+'/售价总额:'+vm.totalSales2+'('+vm.salesDate2+')');
                            }
                            // pie 设置
                            vm.seriesList.splice(1,1,{value:vm.totalSales2,name:vm.dataList[1]});
                        }else if(vm.projectSelect=='1'){
                            vm.seriesList2.splice(1,1,vm.guestUnitPrice);
                            if(vm.type == 'dept'){
                                vm.dataList.splice(1,1,'['+vm.merchSn+']'+vm.merchName2+'/客单价:'+vm.guestUnitPrice2+'('+vm.salesDate2+')');
                            }else{
                                vm.dataList.splice(1,1,'['+vm.storeId+']'+vm.storeName2+'/客单价:'+vm.guestUnitPrice2+'('+vm.salesDate2+')');
                            }
                            // pie 设置
                            vm.seriesList.splice(1,1,{value:vm.guestUnitPrice2,name:vm.dataList[1]});
                        }

                    }else{

                        if(vm.projectSelect=='0'){
                            vm.seriesList2.push(vm.totalSales2);
                            if(vm.type == 'dept'){
                                vm.dataList.push('['+vm.merchSn+']'+vm.merchName2+'/售价总额:'+vm.totalSales2+'('+vm.salesDate2+')');
                            }else{
                                vm.dataList.push('['+vm.storeId+']'+vm.storeName2+'/售价总额:'+vm.totalSales2+'('+vm.salesDate2+')');
                            }
                            // pie 设置
                            vm.seriesList.push({value:vm.totalSales2,name:vm.dataList[1]});

                        }else if(vm.projectSelect=='1'){
                            vm.seriesList2.push(vm.guestUnitPrice2);
                            if(vm.type == 'dept'){
                                vm.dataList.push('['+vm.merchSn+']'+vm.merchName2+'/客单价:'+vm.guestUnitPrice2+'('+vm.salesDate2+')');
                            }else{
                                vm.dataList.push('['+vm.storeId+']'+vm.storeName2+'/客单价:'+vm.guestUnitPrice2+'('+vm.salesDate2+')');
                            }

                            // pie 设置
                            vm.seriesList.push({value:vm.guestUnitPrice2,name:vm.dataList[1]});
                        }
                    }
                    if(vm.seriesTypeSelect == "pie"){
                        vm.seriesList2 = vm.seriesList.concat();
                    }

                    myChart.setOption({
                        xAxis: {
                            data: vm.dataList
                        },
                        series:[{
                            type: vm.seriesTypeSelect,
                            color: ['#dd6b66','#759aa0'],
                            data: vm.seriesList2
                        }]
                    });
                }

            });

        },
        saveFlushTime:function(){
            console.log(typeof vm.refreshTime);
            vm.intervalId = window.setInterval('vm.refresh()',vm.refreshTime*1000)
        },
        clearFlushTime:function(){
            window.clearInterval(vm.intervalId);
            vm.intervalId = 0;
        },
        seriesTypeSwitch: function(){
            console.log(vm.seriesTypeSelect);
        },
        showEcharts: function () {
            // 基于准备好的dom，初始化echarts实例
            myChart = echarts.init(document.getElementById('main'));
            myChart.clear();
            //加载动画
            myChart.showLoading();


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

            }else if(vm.projectSelect=='1'){
                if(vm.type == 'dept'){
                    temp = '['+vm.merchSn+']'+vm.merchName+'/客单价:'+vm.guestUnitPrice+'('+vm.salesDate+')';
                }else{
                    temp = '['+vm.storeId+']'+vm.storeName+'/客单价:'+vm.guestUnitPrice+'('+vm.salesDate+')';
                }
                vm.seriesList2.push(vm.guestUnitPrice);
                vm.seriesList.push({value:vm.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: '实时销售统计图',
                    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);
        }
    }
});