实时销售统计图样式修改

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

@@ -46,11 +46,11 @@
 
 
                     <input type="radio" name="type" value="store" v-model="type" id="store">
-                        <label for="store"><span>门店 </span></label>&nbsp;
+                    <label for="store"><span>门店 </span></label>&nbsp;
                     <input type="radio" name="type" value="dept"  v-model="type" id="dept" />
-                        <label for="dept"> <span>部门 </span></label>&nbsp;
+                    <label for="dept"> <span>部门 </span></label>&nbsp;
                     <input type="radio" name="type" value="category"  v-model="type" id="category" />
-                        <label for="category"> <span>品类 </span></label>&nbsp;
+                    <label for="category"> <span>品类 </span></label>&nbsp;
 
                     <!--统计图类型-->
                     <select name="seriesTypeSelect" v-model="seriesTypeSelect" @change="seriesTypeSwitch">
@@ -67,15 +67,15 @@
             <div class="row" style="border:0;margin-bottom:10px">
                 <div class="col-md-12 ">
                     <span>门店编号：</span><input v-model="storeId" id="storeId"/>
-                        <span style="color: red;margin: 10px">{{storeName}}</span>
+                    <span style="color: red;margin: 10px">{{storeName}}</span>
                     <span>品类编号：</span><input v-model="categoryId" id="categoryId"/>
-                        <span style="color: red;margin: 10px">{{categoryName}}</span>
+                    <span style="color: red;margin: 10px">{{categoryName}}</span>
                 </div>
             </div>
             <div class="row" style="border:0;margin-bottom:10px">
                 <div class="col-md-12 ">
                     <span>部门编号：</span><input v-model="merchSn" id="merchSn"/>
-                        <span style="color: red;margin: 10px">{{merchName}}</span> &nbsp;&nbsp;
+                    <span style="color: red;margin: 10px">{{merchName}}</span> &nbsp;&nbsp;
                     <span>业态：</span>
                     <!--业态下拉框-->
                     <select name="formatsSelect" v-model="formatsSelect">
@@ -99,8 +99,8 @@
                         <option :value="project.id" v-for="project in projectList" >{{project.name}}</option>
                     </select>&nbsp;
                     <span>比较日期：</span>
-                        <input type="date" name="compareDate" id="compareDate" v-model="compareDate" /> &nbsp;
-                        <i-button style="margin-right: 10px"  type="primary" shape="circle" icon="arrow-swap" v-on:click="compare" id="clearFlushTime">比较</i-button>
+                    <input type="date" name="compareDate" id="compareDate" v-model="compareDate" /> &nbsp;
+                    <i-button style="margin-right: 10px"  type="primary" shape="circle" icon="arrow-swap" v-on:click="compare" id="clearFlushTime">比较</i-button>
 
                 </div>
             </div>
@@ -110,16 +110,16 @@
     </header>
     <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
     <div id="main" style="width: 90%;height:400px;margin-top: 10px"></div>
-<hr/>
-<footer>
-    <div v-show="showList">
-        <table id="jqGrid" style="margin-top: 10px"></table>
-    </div>
+    <hr/>
+    <footer>
+        <div v-show="showList">
+            <table id="jqGrid" style="margin-top: 10px"></table>
+        </div>
 
 
-</footer>
+    </footer>
     <script src="${rc.contextPath}/js/sale/echarts.js"></script>
     <script src="${rc.contextPath}/js/sale/realtimeSalesDetection.js"></script>
 </div>
 </body>
-</html>
+</html>

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

@@ -164,7 +164,7 @@ let vm = new Vue({
             categoryId:'',
             categoryName: ''
         },
-        seriesList:[], //未使用
+        seriesList:[], //保存饼图数据
         seriesList2:[],
         xAxisList:[],
         dataList: [],
@@ -183,8 +183,6 @@ let vm = new Vue({
             postParam={};
             if(vm.type=="store"){
                 vm.storeId = '10'; //测试
-                console.log('vm.storeId');
-                console.log(vm.storeId);
                 if(vm.storeId==''||vm.storeId==null){
                     alert("请在输入框中输入门店编号！");
                     return false;
@@ -223,8 +221,8 @@ let vm = new Vue({
                     postParam.compareDate = vm.compareDate;
                 }
             }
-            console.log('postParam');
-            console.log(postParam);
+            // console.log('postParam');
+            // console.log(postParam);
             return postParam;
         },
         refresh: function () {
@@ -272,7 +270,6 @@ let vm = new Vue({
 
                     vm.seriesList=[];
                     vm.seriesList2 =[]; //清空 系列 数据
-                    // vm.seriesList2.push( vm.totalSales);
 
                     vm.showEcharts();
                 }
@@ -324,20 +321,9 @@ let vm = new Vue({
                     vm.guestUnitPrice2 = r.guestUnitPrice;
                     vm.lastSalesTime2 = r.lastSalesTime;
 
-
                     if(vm.seriesList2.length > 1){
-                        //删除并替换
-                        // vm.seriesList2.splice(1,1,vm.totalSales2);
-                        // if(vm.type == 'dept'){
-                        //     vm.dataList.splice(1,1,
-                        //         '['+vm.merchSn2+']'+vm.merchName2+'/售价总额:'+vm.totalSales2+'('+vm.salesDate2+')'
-                        //     );
-                        // }else{
-                        //     vm.dataList.splice(1,1,
-                        //         '['+vm.storeId2+']'+vm.storeName2+'/售价总额:'+vm.totalSales2+'('+vm.salesDate2+')'
-                        //     );
-                        // }
 
+                        //删除并替换
                         if(vm.projectSelect=='0'){
                             vm.seriesList2.splice(1,1,vm.totalSales2);
                             if(vm.type == 'dept'){
@@ -345,6 +331,8 @@ let vm = new Vue({
                             }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'){
@@ -352,19 +340,11 @@ let vm = new Vue({
                             }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{
-                        // vm.seriesList2.push(vm.totalSales2);
-                        // if(vm.type == 'dept'){
-                        //     vm.dataList.splice(1,1,
-                        //         '['+vm.merchSn2+']'+vm.merchName2+'/售价总额:'+vm.totalSales2+'('+vm.salesDate2+')'
-                        //     );
-                        // }else{
-                        //     vm.dataList.splice(1,1,
-                        //         '['+vm.storeId2+']'+vm.storeName2+'/售价总额:'+vm.totalSales2+'('+vm.salesDate2+')'
-                        //     );
-                        // }
 
                         if(vm.projectSelect=='0'){
                             vm.seriesList2.push(vm.totalSales2);
@@ -373,6 +353,9 @@ let vm = new Vue({
                             }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'){
@@ -380,9 +363,15 @@ let vm = new Vue({
                             }else{
                                 vm.dataList.push('['+vm.storeId+']'+vm.storeName2+'/客单价:'+vm.guestUnitPrice2+'('+vm.salesDate2+')');
                             }
+
+                            // pie 设置
+                            vm.seriesList.push({value:vm.guestUnitPrice2,name:vm.dataList[1]});
                         }
                     }
-                    console.log(vm.dataList);
+                    if(vm.seriesTypeSelect == "pie"){
+                        vm.seriesList2 = vm.seriesList.concat();
+                    }
+
                     myChart.setOption({
                         xAxis: {
                             data: vm.dataList
@@ -407,7 +396,6 @@ let vm = new Vue({
             vm.intervalId = 0;
         },
         seriesTypeSwitch: function(){
-            console.log('vm.seriesTypeSelect');
             console.log(vm.seriesTypeSelect);
         },
         showEcharts: function () {
@@ -418,7 +406,7 @@ let vm = new Vue({
             myChart.showLoading();
 
 
-            //项目下拉框判断
+            //项目下拉框判断       6-19，饼图设置
             var temp ='';
             if(vm.projectSelect=='0'){
                 if(vm.type == 'dept'){
@@ -440,21 +428,13 @@ let vm = new Vue({
 
             }
             vm.dataList = [temp];
-            if(vm.type=="pie"){
-                console.log("pie");
-                vm.seriesList2 = vm.seriesList;
 
-                console.log('vm.seriesList');
-                console.log(vm.seriesList);
+            if(vm.seriesTypeSelect == "pie"){
+                vm.seriesList2 = vm.seriesList.concat();
             }
 
-            console.log('vm.seriesList2');
-            console.log(vm.seriesList2);
-            // if(vm.type == 'dept'){
-            //     vm.dataList= ['['+vm.merchSn+']'+vm.merchName+'/售价总额:'+vm.totalSales+'('+vm.salesDate+')'];
-            // }else{
-            //     vm.dataList=['['+vm.storeId+']'+vm.storeName+'/售价总额:'+vm.totalSales+'('+vm.salesDate+')'];
-            // }
+            // console.log('vm.seriesList2');
+            // console.log(vm.seriesList2);
 
             // 指定图表的配置项和数据
             //销售量
@@ -524,34 +504,7 @@ let vm = new Vue({
             }).trigger("reloadGrid").closest(".ui-jqgrid-bdiv").css({"overflow-x": "scroll"});
         },
         switchProjectView: function () {
-            console.log("vm.projectSelect");
             console.log(vm.projectSelect);
         }
     }
-});
-
-
-
-// //客单价
-// 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
-//         }
-//     ]
-// };
+});