|
@@ -0,0 +1,367 @@
|
|
|
+$(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: 280},
|
|
|
+ {label: '商户编码', name: 'merchSn', index: 'storeId', width: 180},
|
|
|
+ {label: '商户名称', name: 'merchName', index: 'storeName', width: 280},
|
|
|
+ {label: '售价总额', name: 'totalSales', index: 'totalSales',align: 'right',width: 180},
|
|
|
+ {label: '实际销售额', name: 'actualSales', index: 'actualSales',align: 'right',width: 180},
|
|
|
+ {label: '占比 %', name: 'proportion', index: 'proportion',align: 'right',width: 180},
|
|
|
+ {label: '优惠损失', name: 'preferentialLoss', index: 'preferentialLoss',align: 'right',width: 180},
|
|
|
+ {label: '成本总额', name: 'totalCost', index: 'totalCost',align: 'right',width: 180},
|
|
|
+ {label: '毛利', name: 'grossProfit', index: 'grossProfit',align: 'right',width: 180},
|
|
|
+ {label: '毛利率', name: 'grossProfitRatio', index: 'grossProfitRatio',align: 'right',width: 180},
|
|
|
+ {label: '来客数', name: 'guestNumber', index: 'guestNumber',align: 'right',width: 180},
|
|
|
+ {label: '客单价', name: 'guestUnitPrice', index: 'guestUnitPrice',align: 'right',width: 180},
|
|
|
+
|
|
|
+ {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: 180}
|
|
|
+ ],
|
|
|
+ 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 () {
|
|
|
+ console.log(vm.showList);
|
|
|
+ vm.showList = true;
|
|
|
+ console.log(vm.showList);
|
|
|
+ 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.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;
|
|
|
+
|
|
|
+ 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.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+'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实例
|
|
|
+ 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
|
|
|
+// }
|
|
|
+// ]
|
|
|
+// };
|