Monthly Customer相关文件

kmall-admin/src/main/java/com/kmall/admin/controller/statistics/MonthlyCustomersController.java

@@ -0,0 +1,82 @@
+package com.kmall.admin.controller.statistics;
+
+import com.kmall.admin.fromcomm.entity.SysUserEntity;
+import com.kmall.admin.service.statistics.MonthlyCustomersService;
+import com.kmall.common.utils.R;
+import org.apache.shiro.SecurityUtils;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.RestController;
+
+import java.text.ParseException;
+import java.text.SimpleDateFormat;
+import java.util.*;
+
+/**
+ * @author zhangchuangbiao
+ * @version 1.0
+ * 2020-09-01 14:35
+ */
+@RestController
+@RequestMapping("/monthly")
+public class MonthlyCustomersController {
+
+    @Autowired
+    private MonthlyCustomersService monthlyCustomersService;
+
+
+    private void calculateDifferentMonth(List<String> monthList, String startMonth, String endMonth) throws ParseException {
+        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM");
+        Calendar bef = Calendar.getInstance();
+        Calendar aft = Calendar.getInstance();
+        bef.setTime(sdf.parse(startMonth));
+        aft.setTime(sdf.parse(endMonth));
+
+        do {
+            monthList.add(sdf.format(bef.getTime()));
+            bef.add(Calendar.MONTH, 1);
+        }
+        while (bef.compareTo(aft) <= 0);
+
+    }
+
+    @RequestMapping("/customersQuery")
+    public R queryMonthlyCustomers(@RequestParam("startMonth") String startMonth, @RequestParam("endMonth") String endMonth) {
+
+        List<String> echatX = new ArrayList<>();
+        try {
+            calculateDifferentMonth(echatX, startMonth, endMonth);
+        } catch (ParseException e) {
+            e.printStackTrace();
+        }
+
+        String merchSn = null;
+        SysUserEntity sysUser = (SysUserEntity) SecurityUtils.getSubject().getPrincipal();
+        if(!"1".equals(sysUser.getRoleType())){
+            merchSn = sysUser.getMerchSn();
+        }
+//        // 查询销售件数
+        List<String> echatY = new ArrayList<>();
+//        // 查询销售额
+        List<String> echatY2 = new ArrayList<>();
+//        // 查询客户数
+        List<String> echatY3 = new ArrayList<>();
+//        // 查询客单价
+        List<String> echatY4 = new ArrayList<>();
+
+        Map<String,Object> map = monthlyCustomersService.queryMonthlyCustomers(startMonth,endMonth,merchSn);
+
+        Map<String, Object> returnMap = new HashMap<>();
+        returnMap.put("echatX", echatX);
+        returnMap.put("echatY", echatY);
+        returnMap.put("echatY2", echatY2);
+        returnMap.put("echatY3", echatY3);
+        returnMap.put("echatY4", echatY4);
+
+
+        return R.ok(returnMap);
+    }
+
+
+}

kmall-admin/src/main/java/com/kmall/admin/dao/statistics/MonthlyCustomersDao.java

@@ -0,0 +1,15 @@
+package com.kmall.admin.dao.statistics;
+
+import org.apache.ibatis.annotations.Param;
+
+import java.util.Map;
+
+/**
+ * @author zhangchuangbiao
+ * @version 1.0
+ * 2020-09-01 16:16
+ */
+public interface MonthlyCustomersDao {
+
+    Map<String, Object> queryMonthlyCustomers(@Param("startMonth") String startMonth, @Param("endMonth") String endMonth, @Param("merchSn") String merchSn);
+}

kmall-admin/src/main/java/com/kmall/admin/service/impl/statistics/MonthlyCustomersServiceImpl.java

@@ -0,0 +1,25 @@
+package com.kmall.admin.service.impl.statistics;
+
+import com.kmall.admin.dao.statistics.MonthlyCustomersDao;
+import com.kmall.admin.service.statistics.MonthlyCustomersService;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Service;
+
+import java.util.Map;
+
+/**
+ * @author zhangchuangbiao
+ * @version 1.0
+ * 2020-09-01 14:36
+ */
+@Service("monthlyCustomersService")
+public class MonthlyCustomersServiceImpl implements MonthlyCustomersService {
+
+    @Autowired
+    private MonthlyCustomersDao monthlyCustomersDao;
+
+    @Override
+    public Map<String, Object> queryMonthlyCustomers(String startMonth, String endMonth, String merchSn) {
+        return monthlyCustomersDao.queryMonthlyCustomers(startMonth,endMonth,merchSn);
+    }
+}

kmall-admin/src/main/java/com/kmall/admin/service/statistics/MonthlyCustomersService.java

@@ -0,0 +1,13 @@
+package com.kmall.admin.service.statistics;
+
+import java.util.Map;
+
+/**
+ * @author zhangchuangbiao
+ * @version 1.0
+ * 2020-09-01 14:36
+ */
+public interface MonthlyCustomersService {
+
+    Map<String, Object> queryMonthlyCustomers(String startMonth, String endMonth, String merchSn);
+}

kmall-admin/src/main/resources/mybatis/mapper/statistics/MonthlyCustomersDao.xml

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
+
+<mapper namespace="com.kmall.admin.dao.statistics.MonthlyCustomersDao">
+
+    <select id="queryMonthlyCustomers" resultType="" >
+		SELECT
+		o.merch_sn AS merchSn,
+		m.merch_name AS merchName,
+		sum( o.order_price ) AS totalSales,
+		sum( og.number) as totalNumber,
+		count(DISTINCT o.id) as totalCustomers,
+		DATE_FORMAT(o.pay_time,'%Y-%m') as yearAndMonth
+		FROM
+		mall_order o
+		LEFT JOIN mall_merch m ON o.merch_sn = m.merch_sn
+		LEFT JOIN mall_order_goods og ON o.id = og.order_id
+		<where>
+			DATE_FORMAT(o.pay_time,'%Y-%m')  &gt;= #{startMonth}
+			and DATE_FORMAT(o.pay_time,'%Y-%m') &lt;= #{endMonth}
+			<if test="merchSn != null">
+				and m.merch_sn = #{merchSn}
+			</if>
+		</where>
+		group by DATE_FORMAT(o.pay_time,'%Y-%m')
+
+	</select>
+
+</mapper>

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

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Monthly Customers & Avg Basket</title>
+    #parse("sys/header.html")
+    <style>
+        .coldiv {
+            background-color: #f8f8f9;
+        }
+
+        body {
+            color: #515a6e;
+        }
+
+        #refreshTime, #storeId, #categoryId {
+            width: 100px;
+        }
+
+        #merchSn {
+            width: 300px;
+        }
+
+        i {
+            font-size: 20px;
+        }
+
+        input {
+            border: 1px #dcdee2 solid;
+            border-radius: 5px;
+            outline-color: #5cadff;
+        }
+    </style>
+</head>
+<body>
+<!--<div id="rrapp" v-cloak>-->
+    <header class="main-header">
+        <div class="container-fluid  coldiv">
+            <div class="row" style="border:0;margin-bottom:10px">
+            <span>日期：</span>
+            <input type="month" name="startMonth" id="startMonth"/>&nbsp;
+            <input type="month" name="endMonth" id="endMonth" />&nbsp;
+                <input type="button" name="queryButton" value="查询" onclick="queryMonthly()" />
+            </div>
+        </div>
+    </header>
+    <div class="row">
+        <div class="col-md-12  col-sm-12  col-xs-12 charts6">
+            <div id="main3" style="height: 200px;"></div>
+        </div>
+    </div>
+    <script src="${rc.contextPath}/js/sale/echarts.js"></script>
+    <script src="${rc.contextPath}/js/sale/monthlyCustomers.js"></script>
+<!--</div>-->
+</body>
+</html>

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

@@ -0,0 +1,470 @@
+$(function () {
+    var data = {
+        "echatX": [
+            "2019-07-02",
+            "2019-07-03",
+            "2019-07-04",
+            "2019-07-05",
+            "2019-07-06",
+            "2019-07-07",
+            "2019-07-08",
+            "2019-07-09",
+            "2019-07-10",
+            "2019-07-11",
+            "2019-07-12",
+            "2019-07-13",
+            "2019-07-14",
+            "2019-07-15"
+        ],
+        "echatY": [
+            501,210,123,333,445,157,151,369,101,101,350,435,153,100
+        ],
+        "echatY2": [
+            80,40,13,36,57,77,41,39,61,31,60,73,33,50
+        ],
+        "echatY3": [
+            5091,2210,1233,3133,4415,1517,1511,3619,1101,1011,3510,4315,1513,1100
+        ],
+        "echatY4": [
+            501,210,123,333,445,157,151,369,101,101,350,435,153,100
+        ],
+        "peopleTotal":15,"peopleOnline":4,"peopleOutline":12,"ranges":[]
+    };
+    dFun(data.echatX, data.echatY, data.echatY2,data.echatY3,data.echatY4);
+
+
+});
+var myChart;
+// 基于准备好的dom，初始化echarts实例
+var dChart = echarts.init(document.getElementById('main3'));
+// 指定图表的配置项和数据
+function dFun(x_data, y_data, y2_data,y3_data,y4_data) {
+    dChart.setOption({
+        // title: {
+        //     left: 'left',
+        //     text: '概率',
+        //     show: false
+        // },
+        tooltip: {
+            trigger: 'axis',
+            // formatter: '{a}:{c}',
+            axisPointer: {
+                type: 'shadow',
+                crossStyle: {
+                    color: '#999'
+                }
+            }
+        },
+        grid: {
+            show: false,
+            left: '3%',
+            right: '4%',
+            bottom: '10%'
+        },
+        // legend: {
+        //     show: true,
+        //     selectedMode: 'single', // 设置显示单一图例的图形，点击可切换
+        //     bottom: 10,
+        //     left: 50,
+        //     textStyle: {
+        //         color: '#666',
+        //         fontSize: 12
+        //     },
+        //     itemGap: 20,
+        //     inactiveColor: '#ccc'
+        // },
+        xAxis: {
+            // splitLine: {　　　　 show: false　　 },
+            type: 'category',
+            data: x_data,
+            axisPointer: {
+                type: 'shadow'
+            },
+            // 改变x轴颜色
+            axisLine: {
+                lineStyle: {
+                    color: '#00a2e2',
+                    width: 1, // 这里是为了突出显示加上的
+                }
+            },
+            axisTick: {
+                show: true,
+                interval: 0
+            },
+        },
+        // 设置两个y轴，左边显示数量，右边显示概率
+        yAxis: [{
+            splitLine: {　　　　 show: false　　 },
+            type: 'value',
+            name: '',
+            // max: 10000,
+            // min: 0,
+            // show: true,
+            // interval: 1000,
+            // 改变y轴颜色
+            axisLine: {
+                lineStyle: {
+                    color: '#00a2e2',
+                    width: 1, // 这里是为了突出显示加上的
+                }
+            },
+        }, // 右边显示概率
+        {
+            splitLine: {　　　　 show: false　　 },
+            type: 'value',
+            name: '客单价',
+            // min: 0,
+            // max: 100,
+            // interval: 10,
+            // 改变y轴颜色
+            axisLine: {
+                lineStyle: {
+                    color: '#00a2e2',
+                    width: 1, // 这里是为了突出显示加上的
+                }
+            }
+        }],
+        // 每个设备分数量、概率2个指标，只要让他们的name一致，即可通过，legeng进行统一的切换
+        series: [{
+            name: 'Units Sold',
+            type: 'bar',
+            symbol: 'circle', // 折线点设置为实心点
+            symbolSize: 4, // 折线点的大小
+            data: y_data,
+            barWidth: '20%',
+
+        },{
+            name: 'Sales',
+            type: 'bar',
+            symbol: 'circle', // 折线点设置为实心点
+            symbolSize: 4, // 折线点的大小
+            data: y3_data,
+            barWidth: '20%',
+
+        },{
+            name: 'Customers',
+            type: 'bar',
+            symbol: 'circle', // 折线点设置为实心点
+            symbolSize: 4, // 折线点的大小
+            data: y4_data,
+            barWidth: '20%',
+
+        },
+            {
+            //折线
+            name: 'Average Basket Sale',
+            type: 'line',
+            symbol: 'circle', // 折线点设置为实心点
+            symbolSize: 6, // 折线点的大小
+            yAxisIndex: 1, // 这里要设置哪个y轴，默认是最左边的是0，然后1，2顺序来。
+            data: y2_data,
+            symbolSize: 10,
+            itemStyle: {
+                normal: {
+                    color: "#DDA0DD"
+                }
+            }
+
+        },
+
+        ]
+
+    });
+}
+
+function queryMonthly(){
+    var startMonth = document.getElementById("startMonth").value;
+    var endMonth = document.getElementById("endMonth").value;
+
+    var param = {
+        startMonth:startMonth,
+        endMonth:endMonth
+    };
+    console.log(param);
+    // 折线图
+    $.ajax({
+        url: "../monthly/customersQuery",
+        data: param,
+        contentType:"application/x-www-form-urlencoded",
+        type: 'POST',
+        success: function(data) {
+            console.log(JSON.stringify(data))
+            dFun(data.echatX, data.echatY, data.echatY2);
+
+        },
+    });
+
+}
+
+
+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);
+
+            $("#jqGrid").jqGrid('setGridParam', {
+                postData: postParam
+
+            }).trigger("reloadGrid").closest(".ui-jqgrid-bdiv").css({"overflow-x": "scroll"});
+        },
+        switchProjectView: function () {
+            console.log(vm.projectSelect);
+        }
+    }
+});