|
@@ -49,283 +49,15 @@ function createLi(title,sales,ulId,flag){
|
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
-// var li=document.createElement("li");
|
|
|
|
-// var span_1=document.createElement("span");
|
|
|
|
-// li.innerHTML = title;
|
|
|
|
-// span_1.setAttribute("class","spanClass")
|
|
|
|
-// var span_2=document.createElement("span");
|
|
|
|
-// span_2.innerHTML = sales;
|
|
|
|
-// span_2.setAttribute("class","spanClass")
|
|
|
|
-// li.appendChild(span_1);
|
|
|
|
-// li.appendChild(span_2);
|
|
|
|
-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: {
|
|
|
|
-
|
|
|
|
- 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});
|
|
|
|
-
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- 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: 'Monthly Customers & Avg Basket',
|
|
|
|
- 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);
|
|
|
|
|
|
+function exportMonthly(){
|
|
|
|
+ var startDate = document.getElementById("startDate").value;
|
|
|
|
+ var endDate = document.getElementById("endDate").value;
|
|
|
|
|
|
- $("#jqGrid").jqGrid('setGridParam', {
|
|
|
|
- postData: postParam
|
|
|
|
|
|
+ var params = {
|
|
|
|
+ startDate:startDate,
|
|
|
|
+ endDate:endDate
|
|
|
|
+ };
|
|
|
|
+ console.log(params);
|
|
|
|
+ exportFile('#rrapp', '../monthly/monthlySalesGrowthExport', params);
|
|
|
|
|
|
- }).trigger("reloadGrid").closest(".ui-jqgrid-bdiv").css({"overflow-x": "scroll"});
|
|
|
|
- },
|
|
|
|
- switchProjectView: function () {
|
|
|
|
- console.log(vm.projectSelect);
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-});
|
|
|
|
|
|
+}
|