$(function () { vm.showEcharts(); var date = new Date(); var year = date.getFullYear(); var month = ('0'+ (date.getMonth() + 1)).slice(-2); var day = ('0' + date.getDate()).slice(-2); var time = year +'-'+ month +'-'+ day; console.log('time'); console.log(time); // document.getElementById('salesDate').value = time; //限制不能选择今天之后的日期(加du上属性max) document.getElementById('salesDate').setAttribute('max', time); var dateTime = date.setDate(date.getDate()-1); date=new Date(dateTime); day = ('0' + date.getDate()).slice(-2); var time3 = year +'-'+ month +'-'+ day; document.getElementById('compareDate').setAttribute('max', time3); $("#jqGrid").jqGrid({ url: '../realtimeSalesDetection/query', datatype: "json", colModel: [ {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: 120}, {label: '销售总额', name: 'totalSales', index: 'totalSales', align: 'right', width: 80}, {label: '实际销售额(税前)', name: 'actualSales', index: 'actualSales', align: 'right', width: 80}, {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: 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, rowNum: 10, rowList: [10, 30, 50], rownumbers: true, rownumWidth: 25, autowidth: true, shrinkToFit: false, autoScroll: true, //开启水平滚动条 width: 1800, 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', refreshCount:0, storeId: '', merchSn: '', merchName: '', storeName: '', salesDate: '', totalSales: '', actualSales: '', preferentialLoss: '', totalCost: '', grossProfit: '', grossProfitRatio: '', proportion: '', guestNumber: '', guestUnitPrice: '', lastSalesTime: '', categoryId: '', categoryName: '', showList: false, compareDate: '',//比较日期 storeId2: '', merchSn2: '', merchName2: '', storeName2: '', salesDate2: '', totalSales2: '', actualSales2: '', preferentialLoss2: '', totalCost2: '', grossProfit2: '', grossProfitRatio2: '', proportion2: '', guestNumber2: '', guestUnitPrice2: '', lastSalesTime2: '', intervalId: 0, isCompare: false, compare2: '', temp: { date: '', refreshTime: 10, type: '', storeId: '', merchSn: '', salesDate: '', categoryId: '' }, 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: { //主要用于保存 启动刷新时的条件和数据 storeId: '', storeName: '', merchSn: '', merchName: '', totalSales: '', actualSales: '', preferentialLoss: '', totalCost: '', grossProfit: '', grossProfitRatio: '', proportion: '', guestNumber: '', guestUnitPrice: '', lastSalesTime: '', salesDate: '0', projectSelect: '0', type:'' }, dataList: [], tooltip: {}, today:'' }, 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: { addParam: function (postParam, dateType) { //添加请求参数, dateType: 0刷新,1比较 // var currentDate = new Date(); // currentDate = currentDate.getFullYear()+'-'+(currentDate.getMonth()+1)+'-'+currentDate.getDate(); postParam = {}; if (!(Math.floor(vm.refreshTime) == vm.refreshTime && vm.refreshTime % 1 === 0 && vm.refreshTime >= 10)) { alert("刷新间隔请输入10秒以上的整数!"); return false; } 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; }, refreshButton: function () { //启动刷新 设置数据标识,程序自动刷新不会设置 vm.xAxisList.salesDate=''; var postParam = {}; postParam = vm.addParam(postParam, 0); var start = vm.refresh(postParam); console.log("start" + start); if (!start) { return; //当天日期开启定时器刷新 } var currentDate = new Date(); var month = currentDate.getMonth() + 1; var day = currentDate.getDate(); if ((day + '').length == 1 && day < 10) { 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) { if(vm.intervalId == 0){ alert("启动定时器刷新"); } // vm.xAxisList.salesDate = currentDate; vm.temp = postParam; console.log(vm.temp); vm.saveFlushTime(); } else { console.log("关闭定时器刷新"); vm.clearFlushTime(); } }, refresh: function (postParam) { console.log('postParam') console.log(postParam) // postParam = vm.addParam(postParam, 0); if (!postParam) { return false; } vm.showList = true; $.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(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; } alert("该门店" + vm.salesDate + "无销售记录"); return false; } vm.storeId = r.storeId; vm.storeName = r.storeName; vm.merchSn = r.merchSn; vm.merchName = r.merchName; 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.xAxisList.totalSales = r.totalSales; vm.xAxisList.actualSales = r.actualSales; vm.xAxisList.preferentialLoss = r.preferentialLoss; vm.xAxisList.totalCost = r.totalCost; vm.xAxisList.grossProfit = r.grossProfit; vm.xAxisList.grossProfitRatio = r.grossProfitRatio; vm.xAxisList.proportion = r.proportion; vm.xAxisList.guestNumber = r.guestNumber; vm.xAxisList.guestUnitPrice = r.guestUnitPrice; vm.xAxisList.lastSalesTime = r.lastSalesTime; 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; vm.xAxisList.totalCost = r.totalCost; vm.xAxisList.grossProfit = r.grossProfit; vm.xAxisList.grossProfitRatio = r.grossProfitRatio; vm.xAxisList.proportion = r.proportion; 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 = []; vm.seriesList2 = []; //清空 系列 数据 vm.showEcharts(); if(vm.isCompare){ //有比较记录再调用刷新一次数据渲染至画布上 vm.compare('1'); } } }); return true; }, 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.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 + ')'); } // 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.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 + ')'); } // pie 设置 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]}); } } if (vm.seriesTypeSelect == "pie") { vm.seriesList2 = vm.seriesList.concat(); console.log("compare pie") console.log(vm.seriesList2) } myChart.setOption({ xAxis: { data: vm.dataList }, series: [{ type: vm.seriesTypeSelect, color: ['#dd6b66', '#759aa0'], data: vm.seriesList2 }] }); return; }else{ //手动比较 vm.refreshButton(); vm.isCompare = true; vm.compare2 = vm.compareDate; } // vm.switchProjectView(); var postParam = {}; postParam = vm.addParam(postParam, 1); if (!postParam) { return; } $.ajax({ url: '../realtimeSalesDetection/query', type: "POST", data: postParam, dataType: 'json', success: function (r) { console.log(r); r = r.page.list[0]; console.log(r); if (r.lastSalesTime == null) { 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 }, series: [{ type: vm.seriesTypeSelect, color: ['#dd6b66', '#759aa0'], data: vm.seriesList2 }] }); } if (vm.type == 'dept') { alert("该部门" + vm.compareDate + "无销售记录"); return; } alert("该门店" + vm.compareDate + "无销售记录"); return; } 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; if (vm.seriesList2.length > 1) { //删除并替换 if (vm.projectSelect == '0') { vm.seriesList2.splice(1, 1, vm.totalSales2); 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 + ')'); } // 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.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 + ')'); } // pie 设置 vm.seriesList.splice(1, 1, {value: vm.guestUnitPrice2, name: vm.dataList[1]}); } } 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]}); } } if (vm.seriesTypeSelect == "pie") { vm.seriesList2 = vm.seriesList.concat(); // console.log("ppp") } // console.log("seriesList2") // console.log(vm.seriesList2) myChart.setOption({ xAxis: { data: vm.dataList }, series: [{ type: vm.seriesTypeSelect, color: ['#dd6b66', '#759aa0'], data: vm.seriesList2 }] }); } }); }, saveFlushTime: function (postParam) { console.log('typeof vm.refreshTime'); console.log(typeof vm.refreshTime); console.log(vm.temp); window.clearInterval(vm.intervalId); vm.intervalId = window.setInterval('vm.refresh(vm.temp)', vm.refreshTime * 1000) }, clearFlushTime: function () { window.clearInterval(vm.intervalId); if(vm.intervalId > 0){ alert("停止刷新"); } vm.intervalId = 0; vm.refreshCount=0; }, seriesTypeSwitch: function () { console.log(vm.seriesTypeSelect); }, showEcharts: function () { // 基于准备好的dom,初始化echarts实例 myChart = echarts.init(document.getElementById('main')); myChart.clear(); //加载动画 myChart.showLoading(); //项目下拉框判断 6-19,饼图设置 vm.xAxisList var temp = ''; if (vm.xAxisList.projectSelect == '0') { 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 + ')'; } vm.seriesList2.push(vm.xAxisList.totalSales); vm.seriesList.push({value: vm.xAxisList.totalSales, name: temp}); } else if (vm.xAxisList.projectSelect == '1') { 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 + ')'; } vm.seriesList2.push(vm.xAxisList.guestUnitPrice); vm.seriesList.push({value: vm.xAxisList.guestUnitPrice, name: temp}); } // if (vm.projectSelect == '0') { // if (vm.xAxisList.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.xAxisList.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: { // 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; } }, legend: { data: ['/销售总额'] }, xAxis: { data: vm.dataList, axisLabel: { interval: 0 } }, yAxis: {}, series: [{ barMaxWidth: '20%', barWidth: '50%', radius: '55%', roseType: 'angle', type: vm.seriesTypeSelect, color: ['#dd6b66', '#759aa0'], data: vm.seriesList2 }] }; //隐藏 myChart.hideLoading(); // 使用刚指定的配置项和数据显示图表。 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").closest(".ui-jqgrid-bdiv").css({"overflow-x": "scroll"}); }, switchProjectView: function () { console.log(vm.projectSelect); } } });