修改销售统计图

kmall-admin/src/main/java/com/kmall/admin/service/impl/RealtimeSalesDetectionServiceImpl.java

@@ -22,11 +22,11 @@ public class RealtimeSalesDetectionServiceImpl implements RealtimeSalesDetection
     @Override
     public RealtimeSalesDetection queryRealtimeSales(Map realtimeSalesDetection) {
         RealtimeSalesDetection r = orderDao.queryRealtimeSales(realtimeSalesDetection);
-        if(r!=null){
-            //计算优惠损失
-            r.setPreferentialLoss(r.getActualSales().subtract(r.getActualSales()));
-            //计算毛利和率
-            if(null != r.getTotalCost()){
+        if(r!=null && r.getGuestNumber()>0){
+            //计算优惠损失 销售额-实际销售额
+            r.setPreferentialLoss(r.getTotalSales().subtract(r.getActualSales()));
+            if(null !=r.getTotalCost() && null !=r.getActualSales()){
+                //计算毛利和率
                 r.setGrossProfit(r.getActualSales().subtract(r.getTotalCost()));
                 r.setGrossProfitRatio(r.getTotalCost().divide(r.getActualSales()));
             }

kmall-admin/src/main/webapp/WEB-INF/page/sale/realtimeSalesDetection.html

@@ -12,7 +12,7 @@
             <div class="row" style="border:0;margin-bottom:10px">
                 <div class="col-md-12 selectDiv">
 
-                    日期：<input type="date" name="date" id="date" v-model="salesDate" />&nbsp;
+                    日期：<input type="date" name="date2" id="date2" v-model="date2" />&nbsp;
                     刷新间隔：<input type="number" name="refreshTime" v-model="refreshTime"  id="refreshTime" oninput="if(value > 1000 || value < 1 ){alert('非法输入！');value = ''}"/>秒&nbsp;
 
                     <input type="radio" name="type" value="store" v-model="type" />门店 &nbsp;
@@ -25,7 +25,7 @@
                     </select>
 
                     <!--统计图类型-->
-                    <select name="seriesTypeSelect" v-model="seriesTypeSelect">
+                    <select name="seriesTypeSelect" v-model="seriesTypeSelect" @change="seriesTypeSwitch">
                         <option :value="seriesType.id" v-for="seriesType in seriesTypeList" >{{seriesType.name}}</option>
                     </select>
 
@@ -63,8 +63,8 @@
     <div id="main" style="width: 90%;height:400px;"></div>
 <hr/>
 <footer>
-    <div  v-cloak>
-        <table id="jqGrid" v-if="!showList"></table>
+    <div v-show="showList">
+        <table id="jqGrid" ></table>
     </div>
 
 

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

@@ -52,11 +52,8 @@ $("#jqGrid").jqGrid({
     gridComplete: function () {
         $("#jqGrid").closest(".ui-jqgrid-bdiv").css({"overflow-x": "scroll"});
     }
-
 });
-    myChart = echarts.init(document.getElementById('main'));
 });
-
 var myChart ;
 
 let vm = new Vue({
@@ -115,7 +112,7 @@ let vm = new Vue({
         projectList: [
             {
                 id: '0',
-                name: '销售量'
+                name: '销售额'
             },
             {
                 id: '1',
@@ -164,8 +161,11 @@ let vm = new Vue({
         category: {
             categoryId:'',
             categoryName: ''
-        }
-
+        },
+        seriesList:[],
+        seriesList2:[],
+        xAxisList:[],
+        dataList: []
     },
     created() {
         this.rateSelect = this.rateList[0].id;
@@ -178,25 +178,22 @@ let vm = new Vue({
             console.log(vm.showList);
             vm.showList = true;
             console.log(vm.showList);
-            var postParam = {"salesDate":vm.salesDate==''?'2020-06-02':vm.salesDate, "storeId":vm.storeId==''?'10':vm.storeId}
+            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){
-                    console.log(typeof r);
-                    console.log(r);
                     r = r.page.list[0];
                     console.log(r);
-                    console.log("r.storeId" + r.storeId);
 
 
                     vm.storeId = r.storeId;
                     vm.merchSn = r.merchSn;
                     vm.merchName = r.merchName;
                     vm.storeName = r.storeName;
-                    vm.salesDate = r.salesDate;
+                    // vm.salesDate = r.salesDate;
                     vm.totalSales = r.totalSales;
                     vm.actualSales = r.actualSales;
                     vm.preferentialLoss = r.preferentialLoss;
@@ -208,77 +205,94 @@ let vm = new Vue({
                     vm.guestUnitPrice = r.guestUnitPrice;
                     vm.lastSalesTime = r.lastSalesTime;
 
-
+                    vm.seriesList =[];
+                    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.salesDate==''?'2020-06-17':vm.salesDate, "storeId":vm.storeId==''?'10':vm.storeId}
+            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(typeof r);
                     console.log(r);
                     r = r.page.list[0];
                     console.log(r);
-                    console.log("r.storeId" + r.storeId);
-
 
-                    vm.storeId = r.storeId;
-                    vm.merchSn = r.merchSn;
-                    vm.merchName = r.merchName;
-                    vm.storeName = r.storeName;
-                    vm.salesDate = r.salesDate;
-                    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;
-
-
-                    myChart.setOption(option);
-                    // vm.showEcharts();
-                    // vm.showTable(postParam);
+                    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+'2总销售额('+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实例
-            // var myChart = echarts.init(document.getElementById('main'));
-            // myChart = echarts.init(document.getElementById('main'))
+            myChart = echarts.init(document.getElementById('main'));
+            myChart.clear();
             //加载动画
             myChart.showLoading();
 
-            var seriesList = [
-                {
-                    // name: '销售额',
-                    type: vm.seriesTypeSelect,
-                    color: ['#dd6b66','#759aa0'],
-                    data: [vm.totalSales,vm.actualSales]
-                }
-                ,
-                {
-                    // name: '销售额',
-                    type: vm.seriesTypeSelect,
-                    color: ['#dd6b66','#759aa0'],
-                    data: [vm.totalSales,vm.actualSales]
-                }
-            ];
+            var seriesList = vm.seriesList;
+            vm.dataList=['['+vm.storeId+']'+vm.storeName+'总销售额('+vm.salesDate+')'];
 
             // 指定图表的配置项和数据
             //销售量
@@ -290,38 +304,18 @@ let vm = new Vue({
                 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:seriesList
-            };
-
-
-            //客单价
-            var option2 = {
-                title: {
-                    text: '分店实时销售统计图'
+                xAxis: {
+                    data: vm.dataList
                 },
-                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
-                    }
-                ]
+                // series: seriesList
+                series:[{
+                    type: vm.seriesTypeSelect,
+                    color: ['#dd6b66','#759aa0'],
+                    data: vm.seriesList2
+                }]
             };
+
             //隐藏
             myChart.hideLoading();
             // 使用刚指定的配置项和数据显示图表。
@@ -330,7 +324,7 @@ let vm = new Vue({
         },
         showTable: function (postParam) {
 
-            console.log(postParam)
+            console.log(postParam);
 
 
             $("#jqGrid").jqGrid('setGridParam', {
@@ -344,4 +338,30 @@ let vm = new Vue({
             }).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
+//         }
+//     ]
+// };