修改实时销售监测页面

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

@@ -92,14 +92,15 @@
                         <option :value="rate.id" v-for="rate in rateList">{{rate.name}}</option>
                     </select>
 
-
+                    <i-button type="warning"v-on:click="clearFlushTime" id="clearFlushTime">停止刷新
+                    </i-button>
                     <i-button style="margin-right: 10px" type="primary" v-on:click="refreshButton"
                               id="refresh">启动刷新
-                    </i-button>(日期为<span style="color: red">当天日期</span>会根据<span style="color: red">刷新间隔</span>自动刷新)
-
-                    </i-button>
-                    <i-button type="warning"v-on:click="clearFlushTime" id="clearFlushTime">停止刷新
                     </i-button>
+                    <span v-show="refreshCount>0">自动刷新<span style="color: red">{{refreshCount}}</span>次</span>
+                    (日期为<span style="color: red">当天日期</span>会根据<span style="color: red">刷新间隔</span>自动刷新)
+
+
                     <!--<i-button style="margin-right: 10px" type="primary" v-on:click="refresh"-->
                               <!--id="refresh">启动刷新-->
                     <!--</i-button>-->

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

@@ -85,6 +85,7 @@ let vm = new Vue({
         date: '',
         refreshTime: 10,
         type: 'store',
+        refreshCount:0,
 
         storeId: '',
         merchSn: '',
@@ -203,7 +204,7 @@ let vm = new Vue({
         },
         seriesList: [], //保存饼图数据
         seriesList2: [],
-        xAxisList: {
+        xAxisList: {    //主要用于保存 启动刷新时的条件和数据
             storeId: '',
             storeName: '',
             merchSn: '',
@@ -218,11 +219,14 @@ let vm = new Vue({
             guestNumber: '',
             guestUnitPrice: '',
             lastSalesTime: '',
+
             salesDate: '0',
-            projectSelect: '0'
+            projectSelect: '0',
+            type:''
         },
         dataList: [],
-        tooltip: {}
+        tooltip: {},
+        today:''
     },
     created() {
         this.rateSelect = this.rateList[0].id;
@@ -284,16 +288,16 @@ let vm = new Vue({
             return postParam;
         },
         refreshButton: function () {
+            //启动刷新 设置数据标识，程序自动刷新不会设置
+            vm.xAxisList.salesDate='';
             var postParam = {};
             postParam = vm.addParam(postParam, 0);
             var start = vm.refresh(postParam);
             console.log("start" + start);
             if (!start) {
                 return;
-            }
-            //
-            vm.xAxisList.salesDate='';
             //当天日期开启定时器刷新
+            }
             var currentDate = new Date();
             var month = currentDate.getMonth() + 1;
             var day = currentDate.getDate();
@@ -301,11 +305,15 @@ let vm = new Vue({
                 day = "0" + day;
             }
             currentDate = currentDate.getFullYear() + '-' + (month > 10 ? month : "0" + month) + '-' + day;
+            vm.today = currentDate;
             console.log(vm.salesDate);
             console.log(currentDate);
 
             if (vm.salesDate == currentDate) {
-                alert("启动定时器刷新");
+                if(vm.intervalId == 0){
+                    alert("启动定时器刷新");
+                }
+                // vm.xAxisList.salesDate = currentDate;
 
                 vm.temp = postParam;
                 console.log(vm.temp);
@@ -317,7 +325,8 @@ let vm = new Vue({
             }
         },
         refresh: function (postParam) {
-
+            console.log('postParam')
+            console.log(postParam)
             // postParam = vm.addParam(postParam, 0);
             if (!postParam) {
                 return false;
@@ -334,7 +343,39 @@ let vm = new Vue({
                     r = r.page.list[0];
                     console.log(r);
 
+                    if(vm.intervalId > 0){
+                        vm.refreshCount += 1;   //增加刷新次数
+                    }
+
                     if (r.lastSalesTime == null) {
+                        //设置第一个系列数据为''
+                        if (vm.seriesList2.length > 0) {
+                            //统计图有数据删除清空第一条
+                            vm.seriesList2[0] = '';
+
+                            if (vm.dataList.length > 0) {
+                                vm.dataList[0] = '[]/售价总额:元()';
+                                console.log(vm.dataList);
+
+                            }
+                            myChart.setOption({
+                                xAxis: {
+                                    data: vm.dataList
+                                },
+                                series: [{
+                                    type: vm.seriesTypeSelect,
+                                    color: ['#dd6b66', '#759aa0'],
+                                    data: vm.seriesList2
+                                }]
+                            });
+                        }
+                        //自动刷新不是第一次不显示提示框
+                        if(vm.xAxisList.salesDate != ''&& vm.xAxisList.salesDate == vm.today && vm.intervalId > 0){
+                            return false;
+                        }
+                        if(vm.today == vm.salesDate){
+                            vm.xAxisList.salesDate = vm.salesDate;
+                        }
                         if (vm.type == 'dept') {
                             alert("该部门" + vm.salesDate + "无销售记录");
                             return false;
@@ -370,11 +411,13 @@ let vm = new Vue({
                     vm.xAxisList.guestUnitPrice = r.guestUnitPrice;
                     vm.xAxisList.lastSalesTime = r.lastSalesTime;
 
-                    if(vm.xAxisList.salesDate == ''){
+                    if(vm.xAxisList.salesDate == ''){ //手动刷新会重置vm.xAxisList.salesDate为 ''
+
                         vm.xAxisList.storeId = r.storeId;
                         vm.xAxisList.storeName = r.storeName;
                         vm.xAxisList.merchSn = r.merchSn;
                         vm.xAxisList.merchName = r.merchName;
+
                         vm.xAxisList.totalSales = r.totalSales;
                         vm.xAxisList.actualSales = r.actualSales;
                         vm.xAxisList.preferentialLoss = r.preferentialLoss;
@@ -385,8 +428,10 @@ let vm = new Vue({
                         vm.xAxisList.guestNumber = r.guestNumber;
                         vm.xAxisList.guestUnitPrice = r.guestUnitPrice;
                         vm.xAxisList.lastSalesTime = r.lastSalesTime;
+
                         vm.xAxisList.salesDate = vm.salesDate;
                         vm.xAxisList.projectSelect = vm.projectSelect;
+                        vm.xAxisList.type = vm.type;
                     }
 
                     vm.seriesList = [];
@@ -394,7 +439,7 @@ let vm = new Vue({
 
                     vm.showEcharts();
 
-                    if(vm.isCompare){
+                    if(vm.isCompare){ //有比较记录再调用刷新一次数据渲染至画布上
                         vm.compare('1');
                     }
                 }
@@ -404,14 +449,18 @@ let vm = new Vue({
         },
         compare: function (c) {
             if(c == '1'){ //程序调用
+                if(vm.compare2 == ''){
+                    return;
+                }
                 vm.compareDate = vm.compare2;
 
+                console.log("compare")
                 if (vm.seriesList2.length > 1) {
 
                     //删除并替换
                     if (vm.projectSelect == '0') {
                         vm.seriesList2.splice(1, 1, vm.totalSales2);
-                        if (vm.type == 'dept') {
+                        if (vm.xAxisList.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 + ')');
@@ -420,7 +469,7 @@ let vm = new Vue({
                         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') {
+                        if (vm.xAxisList.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 + ')');
@@ -429,34 +478,40 @@ let vm = new Vue({
                         vm.seriesList.splice(1, 1, {value: vm.guestUnitPrice2, name: vm.dataList[1]});
                     }
 
+                    console.log("compare seriesList")
+                    console.log(vm.seriesList)
+
+                }
+                else {
+
+                    if (vm.projectSelect == '0') {
+                        vm.seriesList2.push(vm.totalSales2);
+                        if (vm.xAxisList.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.xAxisList.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]});
+                    }
                 }
-                // 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();
+                    console.log("compare pie")
+                    console.log(vm.seriesList2)
+
                 }
 
                 myChart.setOption({
@@ -478,15 +533,7 @@ let vm = new Vue({
                 vm.isCompare = true;
                 vm.compare2 = vm.compareDate;
             }
-
-            // vm.refresh();
-            // if(vm.seriesList2.length <1 || vm.seriesList2[0] ==""){
-            //     alert("请先刷新一条数据再比较！");
-            //     return;
-            // }
-
-
-            vm.switchProjectView();
+            // vm.switchProjectView();
             var postParam = {};
             postParam = vm.addParam(postParam, 1);
             if (!postParam) {
@@ -503,26 +550,23 @@ let vm = new Vue({
                     r = r.page.list[0];
                     console.log(r);
                     if (r.lastSalesTime == null) {
-                        if (vm.type == 'dept') {
-                            if (vm.seriesList2.length > 1) {
-                                //统计图有两条数据删除一条
-                                vm.seriesList2.pop();
-                                myChart.setOption({
-                                    xAxis: {
-                                        data: vm.dataList
-                                    },
-                                    series: [{
-                                        type: vm.seriesTypeSelect,
-                                        color: ['#dd6b66', '#759aa0'],
-                                        data: vm.seriesList2
-                                    }]
-                                });
-                            }
-                            alert("该部门" + vm.compareDate + "无销售记录");
-                            return;
-                        }
+                        vm.compare2 = '';
+
+                        console.log(vm.seriesList2.length)
+                        console.log('vm.seriesList2.length')
+                        console.log(vm.seriesList2)
+
                         if (vm.seriesList2.length > 1) {
+                            //统计图有两条数据删除一条
                             vm.seriesList2.pop();
+                            console.log(vm.seriesList2)
+
+                            if (vm.dataList.length > 1) {
+                                vm.dataList.pop();
+                                console.log('vm.dataList')
+                                console.log(vm.dataList)
+
+                            }
                             myChart.setOption({
                                 xAxis: {
                                     data: vm.dataList
@@ -534,6 +578,12 @@ let vm = new Vue({
                                 }]
                             });
                         }
+                        if (vm.type == 'dept') {
+
+                            alert("该部门" + vm.compareDate + "无销售记录");
+                            return;
+                        }
+
                         alert("该门店" + vm.compareDate + "无销售记录");
                         return;
                     }
@@ -559,7 +609,7 @@ let vm = new Vue({
                         //删除并替换
                         if (vm.projectSelect == '0') {
                             vm.seriesList2.splice(1, 1, vm.totalSales2);
-                            if (vm.type == 'dept') {
+                            if (vm.xAxisList.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 + ')');
@@ -568,7 +618,7 @@ let vm = new Vue({
                             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') {
+                            if (vm.xAxisList.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 + ')');
@@ -581,7 +631,7 @@ let vm = new Vue({
 
                         if (vm.projectSelect == '0') {
                             vm.seriesList2.push(vm.totalSales2);
-                            if (vm.type == 'dept') {
+                            if (vm.xAxisList.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 + ')');
@@ -591,7 +641,7 @@ let vm = new Vue({
 
                         } else if (vm.projectSelect == '1') {
                             vm.seriesList2.push(vm.guestUnitPrice2);
-                            if (vm.type == 'dept') {
+                            if (vm.xAxisList.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 + ')');
@@ -603,7 +653,10 @@ let vm = new Vue({
                     }
                     if (vm.seriesTypeSelect == "pie") {
                         vm.seriesList2 = vm.seriesList.concat();
+                        // console.log("ppp")
                     }
+                    // console.log("seriesList2")
+                    // console.log(vm.seriesList2)
 
                     myChart.setOption({
                         xAxis: {
@@ -630,7 +683,11 @@ let vm = new Vue({
         },
         clearFlushTime: function () {
             window.clearInterval(vm.intervalId);
+            if(vm.intervalId > 0){
+                alert("停止刷新");
+            }
             vm.intervalId = 0;
+            vm.refreshCount=0;
         },
         seriesTypeSwitch: function () {
             console.log(vm.seriesTypeSelect);
@@ -646,7 +703,7 @@ let vm = new Vue({
             //项目下拉框判断       6-19，饼图设置 vm.xAxisList
             var temp = '';
             if (vm.xAxisList.projectSelect == '0') {
-                if (vm.type == 'dept') {
+                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 + ')';
@@ -655,7 +712,7 @@ let vm = new Vue({
                 vm.seriesList.push({value: vm.xAxisList.totalSales, name: temp});
 
             } else if (vm.xAxisList.projectSelect == '1') {
-                if (vm.type == 'dept') {
+                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 + ')';
@@ -666,7 +723,7 @@ let vm = new Vue({
             }
 
             // if (vm.projectSelect == '0') {
-            //     if (vm.type == 'dept') {
+            //     if (vm.xAxisList.type== 'dept') {
             //         temp = '[' + vm.merchSn + ']' + vm.merchName + '/售价总额:' + vm.totalSales + '元(' + vm.salesDate + ')';
             //     } else {
             //         temp = '[' + vm.storeId + ']' + vm.storeName + '/售价总额:' + vm.totalSales + '元(' + vm.salesDate + ')';
@@ -675,7 +732,7 @@ let vm = new Vue({
             //     vm.seriesList.push({value: vm.totalSales, name: temp});
             //
             // } else if (vm.projectSelect == '1') {
-            //     if (vm.type == 'dept') {
+            //     if (vm.xAxisList.type== 'dept') {
             //         temp = '[' + vm.merchSn + ']' + vm.merchName + '/客单价:' + vm.guestUnitPrice + '元(' + vm.salesDate + ')';
             //     } else {
             //         temp = '[' + vm.storeId + ']' + vm.storeName + '/客单价:' + vm.guestUnitPrice + '元(' + vm.salesDate + ')';