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

$(function () {

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

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

        {label: '最后销售时间', name: 'lastSalesTime', index: 'lastSalesTime', align: 'center',width: 180,formatter: function (value) {
                return transDate(value,'yyyy-MM-dd hh:mm:ss');
            }}
    ],
    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',
        // sales : [{
            storeId: '',
            merchSn: '',
            merchName: '',
            storeName: '',
            salesDate: '',
            totalSales: '',
            actualSales: '',
            preferentialLoss: '',
            totalCost: '',
            grossProfit: '',
            grossProfitRatio: '',
            proportion: '',
            guestNumber: '',
            guestUnitPrice: '',
            lastSalesTime: '',
            showList:false
        // }]
,
        compareDate: '',//比较日期
        storeId2: '',
        merchSn2: '',
        merchName2: '',
        storeName2: '',
        salesDate2: '',
        totalSales2: '',
        actualSales2: '',
        preferentialLoss2: '',
        totalCost2: '',
        grossProfit2: '',
        grossProfitRatio2: '',
        proportion2: '',
        guestNumber2: '',
        guestUnitPrice2: '',
        lastSalesTime2: '',

        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: []
    },
    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: {
        refresh: function () {
            vm.showList = true;
            var postParam = {"salesDate":(vm.salesDate==''||vm.salesDate==null)?vm.salesDate='2020-06-02':vm.salesDate, "storeId":vm.storeId==''?'10':vm.storeId}
            $.ajax({
                url:'../realtimeSalesDetection/query',
                type:"POST",
                data:postParam,
                dataType:'json',
                success:function(r){
                    r = r.page.list[0];
                    console.log(r);

                    vm.storeId = r.storeId;
                    vm.merchSn = r.merchSn;
                    vm.merchName = r.merchName;
                    vm.storeName = r.storeName;
                    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.seriesList.push(
                        {
                            // name: '销售额',
                            type: vm.seriesTypeSelect,
                            color: ['#dd6b66','#759aa0'],
                            data: [vm.totalSales]
                        })
                    ;
                    vm.seriesList2.push( vm.totalSales);
                    console.log(vm.seriesList2);
                    console.log('vm.seriesList2');

                    vm.showEcharts();
                    vm.showTable(postParam);
                }

            });
        },
        refresh2: function () {
            var postParam = {"salesDate":vm.compareDate==''?vm.compareDate='2020-06-17':vm.compareDate, "storeId":vm.storeId==''?'10':vm.storeId}
            $.ajax({
                url:'../realtimeSalesDetection/query',
                type:"POST",
                data:postParam,
                dataType:'json',
                success:function(r){
                    console.log(r);
                    r = r.page.list[0];
                    console.log(r);

                    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;

                    vm.seriesList.push({
                        // name: '销售额',
                        type: vm.seriesTypeSelect,
                        color: ['#dd6b66','#759aa0'],
                        data: [vm.totalSales2]
                    });

                    vm.seriesList2.push(vm.totalSales2);

                    vm.dataList.push(
                        '['+vm.storeId2+']'+vm.storeName2+'总销售额('+vm.salesDate2+')'
                    );
                    console.log(vm.dataList);
                    myChart.setOption({
                        xAxis: {
                            data: vm.dataList
                        },
                        series:[{
                            type: vm.seriesTypeSelect,
                            color: ['#dd6b66','#759aa0'],
                            data: vm.seriesList2
                        }]
                    });
                }

            });

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

            var seriesList = vm.seriesList;
            vm.dataList=['['+vm.storeId+']'+vm.storeName+'总销售额('+vm.salesDate+')'];

            // 指定图表的配置项和数据
            //销售量
            var option = {
                title: {
                    text: '分店实时销售统计图'
                },
                tooltip: {},
                legend: {
                    data:['销量']
                },
                xAxis: {
                    data: vm.dataList
                },
                yAxis: {},
                // series: seriesList
                series:[{
                    type: vm.seriesTypeSelect,
                    color: ['#dd6b66','#759aa0'],
                    data: vm.seriesList2
                }]
            };

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

        },
        showTable: function (postParam) {

            console.log(postParam);


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

            }).trigger("reloadGrid");

            /*$("#jqGrid").jqGrid('setGridParam', {
                dataType:'json',
                postData: postParam,
            }).trigger("reloadGrid");*/
        }
    }
});



// //客单价
// var option2 = {
//     title: {
//         text: '分店实时销售统计图'
//     },
//     tooltip: {},
//     legend: {
//         data:['客单价']
//     },
//     xAxis: [{
//         // data: ['['+vm.salesList[0].store.storeId+']'+vm.salesList[0].store.storeName+'总销售额','['+vm.salesList[0].store.storeId+']'+vm.salesList[0].store.storeName+'实际销售额']
//         data: ['['+vm.storeId+']'+vm.storeName+'总销售额','['+vm.storeId+']'+vm.storeName+'实际销售额']
//     }],
//     yAxis: {},
//     series: [
//         {
//             // name: '销售额',
//             type: vm.seriesTypeSelect,
//             color: ['#dd6b66','#759aa0'],
//             data: vm.guestUnitPrice
//         }
//     ]
// };