|
@@ -7,23 +7,24 @@ $("#jqGrid").jqGrid({
|
|
|
url:'../realtimeSalesDetection/query',
|
|
|
datatype: "json",
|
|
|
colModel: [
|
|
|
- {label: '门店编码', name: 'storeId', index: 'storeId', width: 120},
|
|
|
- {label: '门店名称', name: 'storeName', index: 'storeName', width: 180},
|
|
|
+ {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: 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: '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: 140},
|
|
|
+ {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,
|
|
@@ -61,6 +62,7 @@ let vm = new Vue({
|
|
|
date: '',
|
|
|
refreshTime: 10,
|
|
|
type: 'store',
|
|
|
+
|
|
|
storeId: '',
|
|
|
merchSn: '',
|
|
|
merchName: '',
|
|
@@ -76,6 +78,9 @@ let vm = new Vue({
|
|
|
guestNumber: '',
|
|
|
guestUnitPrice: '',
|
|
|
lastSalesTime: '',
|
|
|
+ categoryId: '',
|
|
|
+ categoryName: '',
|
|
|
+
|
|
|
showList:false ,
|
|
|
compareDate: '',//比较日期
|
|
|
storeId2: '',
|
|
@@ -159,10 +164,11 @@ let vm = new Vue({
|
|
|
categoryId:'',
|
|
|
categoryName: ''
|
|
|
},
|
|
|
- seriesList:[],
|
|
|
+ seriesList:[], //保存饼图数据
|
|
|
seriesList2:[],
|
|
|
xAxisList:[],
|
|
|
- dataList: []
|
|
|
+ dataList: [],
|
|
|
+ tooltip:{}
|
|
|
},
|
|
|
created() {
|
|
|
this.rateSelect = this.rateList[0].id;
|
|
@@ -171,22 +177,85 @@ let vm = new Vue({
|
|
|
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;
|
|
|
- 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){
|
|
|
+ //查询显示表格数据
|
|
|
+ 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.storeName = r.storeName;
|
|
|
vm.totalSales = r.totalSales;
|
|
|
vm.actualSales = r.actualSales;
|
|
|
vm.preferentialLoss = r.preferentialLoss;
|
|
@@ -198,20 +267,26 @@ let vm = new Vue({
|
|
|
vm.guestUnitPrice = r.guestUnitPrice;
|
|
|
vm.lastSalesTime = r.lastSalesTime;
|
|
|
|
|
|
- vm.seriesList =[];
|
|
|
- vm.seriesList2 =[];
|
|
|
- vm.seriesList2.push( vm.totalSales);
|
|
|
- console.log(vm.seriesList2);
|
|
|
- console.log('vm.seriesList2');
|
|
|
+
|
|
|
+ vm.seriesList=[];
|
|
|
+ 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}
|
|
|
+ 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",
|
|
@@ -221,9 +296,14 @@ let vm = new Vue({
|
|
|
console.log(r);
|
|
|
r = r.page.list[0];
|
|
|
console.log(r);
|
|
|
- if(r.storeId == null){
|
|
|
+ if(r.lastSalesTime == null){
|
|
|
+ if(vm.type == 'dept'){
|
|
|
+ alert("该部门"+vm.compareDate+"无销售记录");
|
|
|
+ return;
|
|
|
+ }
|
|
|
alert("该门店"+vm.compareDate+"无销售记录");
|
|
|
- return;}
|
|
|
+ return;
|
|
|
+ }
|
|
|
|
|
|
vm.storeId2 = r.storeId;
|
|
|
vm.merchSn2 = r.merchSn;
|
|
@@ -241,21 +321,57 @@ 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.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]});
|
|
|
+ }
|
|
|
|
|
|
- vm.dataList.splice(1,1,
|
|
|
- '['+vm.storeId2+']'+vm.storeName2+'售价总额('+vm.salesDate2+')'
|
|
|
- );
|
|
|
}else{
|
|
|
- vm.seriesList2.push(vm.totalSales2);
|
|
|
- vm.dataList.push(
|
|
|
- '['+vm.storeId2+']'+vm.storeName2+'售价总额('+vm.salesDate2+')'
|
|
|
- );
|
|
|
+
|
|
|
+ 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(vm.dataList);
|
|
|
+
|
|
|
myChart.setOption({
|
|
|
xAxis: {
|
|
|
data: vm.dataList
|
|
@@ -280,7 +396,6 @@ let vm = new Vue({
|
|
|
vm.intervalId = 0;
|
|
|
},
|
|
|
seriesTypeSwitch: function(){
|
|
|
- console.log('vm.seriesTypeSelect');
|
|
|
console.log(vm.seriesTypeSelect);
|
|
|
},
|
|
|
showEcharts: function () {
|
|
@@ -290,27 +405,77 @@ let vm = new Vue({
|
|
|
//加载动画
|
|
|
myChart.showLoading();
|
|
|
|
|
|
- var seriesList = vm.seriesList;
|
|
|
- vm.dataList=['['+vm.storeId+']'+vm.storeName+'售价总额('+vm.salesDate+')'];
|
|
|
+
|
|
|
+ //项目下拉框判断 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: {
|
|
|
- text: '分店实时销售统计图'
|
|
|
+ // 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;
|
|
|
+ }
|
|
|
},
|
|
|
- tooltip: {},
|
|
|
legend: {
|
|
|
- data:['售价总额']
|
|
|
+ data:['/售价总额']
|
|
|
},
|
|
|
xAxis: {
|
|
|
- data: vm.dataList
|
|
|
+ data: vm.dataList,
|
|
|
+ axisLabel: {
|
|
|
+ interval:0
|
|
|
+ }
|
|
|
},
|
|
|
yAxis: {},
|
|
|
- // series: seriesList
|
|
|
series:[{
|
|
|
barMaxWidth: '20%' ,
|
|
|
barWidth: '50%' ,
|
|
|
+ radius: '55%',
|
|
|
+ roseType: 'angle',
|
|
|
type: vm.seriesTypeSelect,
|
|
|
color: ['#dd6b66','#759aa0'],
|
|
|
data: vm.seriesList2
|
|
@@ -323,42 +488,23 @@ let vm = new Vue({
|
|
|
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");
|
|
|
-
|
|
|
+ }).trigger("reloadGrid").closest(".ui-jqgrid-bdiv").css({"overflow-x": "scroll"});
|
|
|
+ },
|
|
|
+ switchProjectView: function () {
|
|
|
+ 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
|
|
|
-// }
|
|
|
-// ]
|
|
|
-// };
|
|
|
+});
|