提交代码

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

@@ -69,4 +69,76 @@ public class MonthlyCustomersController {
     }
 
 
+    @RequestMapping("/customersQueryByWeek")
+    public R queryWeeklyCustomers(@RequestParam("startWeek") String startWeek, @RequestParam("endWeek") String endWeek) throws ParseException {
+
+        List<String> dateList = new ArrayList<>();
+        try {
+            calculateDifferentWeek(dateList, startWeek, endWeek);
+        } catch (ParseException e) {
+            e.printStackTrace();
+        }
+
+        String merchSn = null;
+        SysUserEntity sysUser = (SysUserEntity) SecurityUtils.getSubject().getPrincipal();
+        if(!"1".equals(sysUser.getRoleType())){
+            merchSn = sysUser.getMerchSn();
+        }
+
+        SimpleDateFormat weekSdf = new SimpleDateFormat("yyyy");
+        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
+        Calendar bef = Calendar.getInstance();
+        Calendar aft = Calendar.getInstance();
+        bef.setFirstDayOfWeek(Calendar.MONDAY);
+        aft.setFirstDayOfWeek(Calendar.MONDAY);
+        bef.setTime(sdf.parse(startWeek));
+        aft.setTime(sdf.parse(endWeek));
+        int befWeek = bef.get(Calendar.WEEK_OF_YEAR);
+        int aftWeek = aft.get(Calendar.WEEK_OF_YEAR);
+        if(befWeek<10){
+            startWeek =weekSdf.format(bef.getTime())+"-0"+befWeek;
+        }else{
+            startWeek =weekSdf.format(bef.getTime())+"-"+befWeek;
+        }
+        if(aftWeek<10){
+            endWeek =weekSdf.format(aft.getTime())+"-0"+aftWeek;
+        }else{
+            endWeek =weekSdf.format(aft.getTime())+"-"+aftWeek;
+        }
+        Map<String,Object> map = monthlyCustomersService.queryWeeklyCustomers(startWeek,endWeek,merchSn);
+
+        Map<String, Object> returnMap = new HashMap<>();
+        returnMap.put("dateList", dateList);
+        returnMap.putAll(map);
+
+
+        return R.ok(returnMap);
+    }
+
+
+    // todo
+    private void calculateDifferentWeek(List<String> weekList, String startWeek, String endWeek) throws ParseException {
+        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
+        SimpleDateFormat weekSdf = new SimpleDateFormat("yyyy");
+        Calendar bef = Calendar.getInstance();
+        Calendar aft = Calendar.getInstance();
+        bef.setFirstDayOfWeek(Calendar.MONDAY);
+        aft.setFirstDayOfWeek(Calendar.MONDAY);
+        bef.setTime(sdf.parse(startWeek));
+        aft.setTime(sdf.parse(endWeek));
+
+        do {
+            int i = bef.get(Calendar.WEEK_OF_YEAR);
+            if (i<10){
+                weekList.add(weekSdf.format(bef.getTime())+"-0"+i);
+            }else{
+                weekList.add(weekSdf.format(bef.getTime())+"-"+i);
+            }
+            bef.set(Calendar.DAY_OF_MONTH,bef.get(Calendar.DAY_OF_MONTH)+7); //给当前时间增加一周
+        }
+        while (bef.compareTo(aft) <= 0);
+    }
+
+
+
 }

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

@@ -14,4 +14,6 @@ import java.util.Map;
 public interface MonthlyCustomersDao {
 
     List<MonthlySalesGrowthEntity> queryMonthlyCustomers(@Param("startMonth") String startMonth, @Param("endMonth") String endMonth, @Param("merchSn") String merchSn);
+
+    List<MonthlySalesGrowthEntity> queryWeeklyCustomers(@Param("startWeek") String startWeek, @Param("endWeek") String endWeek, @Param("merchSn") String merchSn);
 }

kmall-admin/src/main/java/com/kmall/admin/entity/MonthlySalesGrowthEntity.java

@@ -14,6 +14,15 @@ public class MonthlySalesGrowthEntity implements Serializable {
     // 客单数
     private String totalCustomers;
     private String yearAndMonth;
+    private String yearAndWeek;
+
+    public String getYearAndWeek() {
+        return yearAndWeek;
+    }
+
+    public void setYearAndWeek(String yearAndWeek) {
+        this.yearAndWeek = yearAndWeek;
+    }
 
     public String getMerchSn() {
         return merchSn;

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

@@ -56,4 +56,39 @@ public class MonthlyCustomersServiceImpl implements MonthlyCustomersService {
 
         return map;
     }
+
+    @Override
+    public Map<String, Object> queryWeeklyCustomers(String startWeek, String endWeek, String merchSn) {
+        List<MonthlySalesGrowthEntity> monthlySalesGrowthEntities = monthlyCustomersDao.queryWeeklyCustomers(startWeek, endWeek, merchSn);
+
+        Map<String,Object> map = new HashMap<>();
+        // 查询销售件数
+        List<String> totalNumberList = new ArrayList<>();
+//        // 查询销售额
+        List<String> totalSalesList = new ArrayList<>();
+//        // 查询客户数
+        List<String> taotalCustomersList = new ArrayList<>();
+//        // 查询客单价
+        List<String> avgBasketSaleList = new ArrayList<>();
+
+        // 按照实体类的日期进行升序排序
+        monthlySalesGrowthEntities = monthlySalesGrowthEntities.stream().sorted(Comparator.comparing(MonthlySalesGrowthEntity::getYearAndWeek)).collect(Collectors.toList());
+        for (MonthlySalesGrowthEntity monthlySalesGrowthEntity : monthlySalesGrowthEntities) {
+            String totalSales = monthlySalesGrowthEntity.getTotalSales();
+            String taotalCustomers = monthlySalesGrowthEntity.getTotalCustomers();
+            String totalNumber = monthlySalesGrowthEntity.getTotalNumber();
+
+            totalNumberList.add(totalNumber); // 销售数量
+            totalSalesList.add(totalSales); // 销售额
+            taotalCustomersList.add(taotalCustomers); // 客单数
+            String avgBasketSale = new BigDecimal(totalSales).divide(new BigDecimal(totalNumber),3, RoundingMode.HALF_UP).toString(); // 客单价
+            avgBasketSaleList.add(avgBasketSale);
+        }
+        map.put("totalNumberList",totalNumberList);
+        map.put("totalSalesList",totalSalesList);
+        map.put("taotalCustomersList",taotalCustomersList);
+        map.put("avgBasketSaleList",avgBasketSaleList);
+
+        return map;
+    }
 }

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

@@ -10,4 +10,6 @@ import java.util.Map;
 public interface MonthlyCustomersService {
 
     Map<String, Object> queryMonthlyCustomers(String startMonth, String endMonth, String merchSn);
+
+    Map<String, Object> queryWeeklyCustomers(String startWeek, String endWeek, String merchSn);
 }

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

@@ -16,8 +16,11 @@
 		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}
+			o.is_onffline_order = '1'
+			AND o.order_biz_type = '10'
+			AND o.pay_status = '2'
+			AND 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>
@@ -25,5 +28,29 @@
 		group by DATE_FORMAT(o.pay_time,'%Y-%m')
 
 	</select>
+	<select id="queryWeeklyCustomers" resultType="com.kmall.admin.entity.MonthlySalesGrowthEntity">
+		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-%u') as yearAndWeek
+		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>
+			o.is_onffline_order = '1'
+			AND o.order_biz_type = '10'
+			AND o.pay_status = '2'
+			AND DATE_FORMAT(o.pay_time,'%Y-%u')  &gt;= #{startWeek}
+			AND DATE_FORMAT(o.pay_time,'%Y-%u') &lt;= #{endWeek}
+			<if test="merchSn != null">
+				and m.merch_sn = #{merchSn}
+			</if>
+		</where>
+		group by DATE_FORMAT(o.pay_time,'%Y-%u')
+	</select>
 
 </mapper>

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

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Monthly Sales Growth</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/monthlySalesGrowth.js"></script>
+<!--</div>-->
+</body>
+</html>

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

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Weekly Sales Summary</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="date" name="startWeek" id="startWeek"/>&nbsp;
+            <input type="date" name="endWeek" id="endWeek" />&nbsp;
+            <input type="button" name="queryButton" value="查询" onclick="queryWeekly()" />
+        </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/weeklySalesSummary.js"></script>
+<!--</div>-->
+</body>
+</html>

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

@@ -0,0 +1,452 @@
+$(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(dateList, totalNumberList, totalSalesList) {
+    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: dateList,
+            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: totalNumberList,
+            barWidth: '20%',
+
+        },{
+            //折线
+            name: 'Sales',
+            type: 'line',
+            symbol: 'circle', // 折线点设置为实心点
+            symbolSize: 6, // 折线点的大小
+            yAxisIndex: 1, // 这里要设置哪个y轴，默认是最左边的是0，然后1，2顺序来。
+            data: totalSalesList,
+            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.dateList, data.totalNumberList, data.totalSalesList);
+
+        },
+    });
+
+}
+
+
+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);
+        }
+    }
+});

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

@@ -0,0 +1,452 @@
+$(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(dateList, totalNumberList, totalSalesList) {
+    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: dateList,
+            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: totalNumberList,
+            barWidth: '20%',
+
+        },{
+            //折线
+            name: 'Sales',
+            type: 'line',
+            symbol: 'circle', // 折线点设置为实心点
+            symbolSize: 6, // 折线点的大小
+            yAxisIndex: 1, // 这里要设置哪个y轴，默认是最左边的是0，然后1，2顺序来。
+            data: totalSalesList,
+            symbolSize: 10,
+            itemStyle: {
+                normal: {
+                    color: "#DDA0DD"
+                }
+            }
+        },
+
+        ]
+
+    });
+}
+
+function queryWeekly(){
+    var startWeek = document.getElementById("startWeek").value;
+    var endWeek = document.getElementById("endWeek").value;
+
+    var param = {
+        startWeek:startWeek,
+        endWeek:endWeek
+    };
+    console.log(param);
+    // 折线图
+    $.ajax({
+        url: "../monthly/customersQueryByWeek",
+        data: param,
+        contentType:"application/x-www-form-urlencoded",
+        type: 'POST',
+        success: function(data) {
+            console.log(JSON.stringify(data))
+            dFun(data.dateList, data.totalNumberList, data.totalSalesList);
+
+        },
+    });
+
+}
+
+
+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);
+        }
+    }
+});