Merge branch 'master' of zcb/kmall-pt-general into master

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

@@ -45,30 +45,54 @@ public class MonthlyCustomersController {
     public R queryMonthlyCustomers(@RequestParam("startMonth") String startMonth, @RequestParam("endMonth") String endMonth) {
 
         List<String> dateList = new ArrayList<>();
+        Map<String, Object> returnMap = new HashMap<>();
         try {
             calculateDifferentMonth(dateList, startMonth, endMonth);
         } catch (ParseException e) {
             e.printStackTrace();
         }
 
-        String merchSn = null;
-        SysUserEntity sysUser = (SysUserEntity) SecurityUtils.getSubject().getPrincipal();
-        if(!"1".equals(sysUser.getRoleType())){
-            merchSn = sysUser.getMerchSn();
-        }
+        try {
+            String merchSn = null;
+            SysUserEntity sysUser = (SysUserEntity) SecurityUtils.getSubject().getPrincipal();
+            if(!"1".equals(sysUser.getRoleType())){
+                merchSn = sysUser.getMerchSn();
+            }
 
 
-        Map<String,Object> map = monthlyCustomersService.queryMonthlyCustomers(startMonth,endMonth,merchSn);
+            Map<String,Object> map = monthlyCustomersService.queryMonthlyCustomers(startMonth,endMonth,merchSn);
 
-        Map<String, Object> returnMap = new HashMap<>();
-        returnMap.put("dateList", dateList);
-        returnMap.putAll(map);
+            returnMap.put("dateList", dateList);
+            returnMap.putAll(map);
+        } catch (Exception e) {
+            e.printStackTrace();
+            return R.error(e.getMessage());
+        }
 
 
         return R.ok(returnMap);
     }
 
 
+    @RequestMapping("/top10ForProduct")
+    public R top10ForProduct(@RequestParam("month") String month, @RequestParam("week") String week){
+
+        Map<String,Object> map = monthlyCustomersService.top10ForProduct(month,week);
+
+        return R.ok(map);
+    }
+
+
+    @RequestMapping("/top10ByBrandAndSupplier")
+    public R top10ByBrandAndSupplier(@RequestParam("startDate") String startDate,
+                                     @RequestParam("endDate") String endDate){
+
+        Map<String,Object> map = monthlyCustomersService.top10ByBrandAndSupplier(startDate,endDate);
+
+        return R.ok(map);
+    }
+
+
     @RequestMapping("/customersQueryByWeek")
     public R queryWeeklyCustomers(@RequestParam("startWeek") String startWeek, @RequestParam("endWeek") String endWeek) throws ParseException {
 

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

@@ -15,5 +15,11 @@ public interface MonthlyCustomersDao {
 
     List<MonthlySalesGrowthEntity> queryMonthlyCustomers(@Param("startMonth") String startMonth, @Param("endMonth") String endMonth, @Param("merchSn") String merchSn);
 
+    List<MonthlySalesGrowthEntity> top10ForProduct(@Param("month") String month, @Param("week") String week);
+
+    List<MonthlySalesGrowthEntity> top10ByBrand(@Param("startDate") String startDate, @Param("endDate") String endDate);
+
+    List<MonthlySalesGrowthEntity> top10BySupplier(@Param("startDate")String startDate, @Param("endDate") String endDate);
+
     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

@@ -24,6 +24,14 @@ public class MonthlySalesGrowthEntity implements Serializable {
         this.yearAndWeek = yearAndWeek;
     }
 
+    private String goodsName; // 产品名称
+    private String goodsSpecificationNameValue; // 产品规格
+    private String sales; // 销售数量
+
+    private String brand; // 品牌
+    private String supplier; // 供应商
+
+
     public String getMerchSn() {
         return merchSn;
     }
@@ -71,4 +79,45 @@ public class MonthlySalesGrowthEntity implements Serializable {
     public void setYearAndMonth(String yearAndMonth) {
         this.yearAndMonth = yearAndMonth;
     }
+
+
+    public String getGoodsName() {
+        return goodsName;
+    }
+
+    public void setGoodsName(String goodsName) {
+        this.goodsName = goodsName;
+    }
+
+    public String getGoodsSpecificationNameValue() {
+        return goodsSpecificationNameValue;
+    }
+
+    public void setGoodsSpecificationNameValue(String goodsSpecificationNameValue) {
+        this.goodsSpecificationNameValue = goodsSpecificationNameValue;
+    }
+
+    public String getSales() {
+        return sales;
+    }
+
+    public void setSales(String sales) {
+        this.sales = sales;
+    }
+
+    public String getBrand() {
+        return brand;
+    }
+
+    public void setBrand(String brand) {
+        this.brand = brand;
+    }
+
+    public String getSupplier() {
+        return supplier;
+    }
+
+    public void setSupplier(String supplier) {
+        this.supplier = supplier;
+    }
 }

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

@@ -58,6 +58,39 @@ public class MonthlyCustomersServiceImpl implements MonthlyCustomersService {
     }
 
     @Override
+    public Map<String, Object> top10ForProduct(String month, String week) {
+        List<MonthlySalesGrowthEntity> monthlySalesGrowthEntities = monthlyCustomersDao.top10ForProduct(month,week);
+
+        List<String> productNameList = new ArrayList<>();
+//        // 查询客单价
+        List<String> salesPriceList = new ArrayList<>();
+
+        Map<String,Object> map = new HashMap<>();
+        map.put("productNameList",productNameList);
+        map.put("salesPriceList",salesPriceList);
+        for (MonthlySalesGrowthEntity monthlySalesGrowthEntity : monthlySalesGrowthEntities) {
+
+            productNameList.add(monthlySalesGrowthEntity.getGoodsName());
+            salesPriceList.add(monthlySalesGrowthEntity.getSales());
+        }
+
+        return map;
+    }
+
+    @Override
+    public Map<String, Object> top10ByBrandAndSupplier(String startDate, String endDate) {
+
+        List<MonthlySalesGrowthEntity> top10ByBrand = monthlyCustomersDao.top10ByBrand(startDate,endDate);
+        List<MonthlySalesGrowthEntity> top10BySupplier = monthlyCustomersDao.top10BySupplier(startDate,endDate);
+
+        Map<String,Object> map = new HashMap<>();
+        map.put("top10ByBrand",top10ByBrand);
+        map.put("top10BySupplier",top10BySupplier);
+
+        return map;
+    }
+
+    @Override
     public Map<String, Object> queryWeeklyCustomers(String startWeek, String endWeek, String merchSn) {
         List<MonthlySalesGrowthEntity> monthlySalesGrowthEntities = monthlyCustomersDao.queryWeeklyCustomers(startWeek, endWeek, merchSn);
 

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

@@ -11,5 +11,9 @@ public interface MonthlyCustomersService {
 
     Map<String, Object> queryMonthlyCustomers(String startMonth, String endMonth, String merchSn);
 
+    Map<String, Object> top10ForProduct(String month, String week);
+
+    Map<String, Object> top10ByBrandAndSupplier(String startDate, String endDate);
+
     Map<String, Object> queryWeeklyCustomers(String startWeek, String endWeek, String merchSn);
 }

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

@@ -53,4 +53,78 @@
 		group by DATE_FORMAT(o.pay_time,'%Y-%u')
 	</select>
 
+	<select id="top10ForProduct" resultType="com.kmall.admin.entity.MonthlySalesGrowthEntity" >
+		SELECT
+			og.goods_name as goodsName,
+			og.goods_specification_name_value as goodsSpecificationNameValue,
+			sum( og.number ) AS sales
+		FROM
+			mall_order o
+			LEFT JOIN mall_order_goods og ON o.id = og.order_id
+		<where>
+			1 = 1
+			<if test="month != null and month.trim() != ''">
+				and DATE_FORMAT(o.pay_time,'%Y-%m')  = #{month}
+			</if>
+			<if test="week != null and week.trim() != ''">
+				and weekofyear(o.pay_time)  = #{week}
+			</if>
+		</where>
+		GROUP BY
+			og.sku
+		ORDER BY
+			sales desc
+			LIMIT 10
+	</select>
+
+	<select id="top10ByBrand" resultType="com.kmall.admin.entity.MonthlySalesGrowthEntity" >
+		SELECT
+			g.brand as brand,
+			og.goods_specification_name_value as goodsSpecificationNameValue,
+			sum( og.number ) AS sales
+		FROM
+			mall_order o
+			LEFT JOIN mall_order_goods og ON o.id = og.order_id
+			LEFT JOIN mall_goods g ON g.id = og.goods_id
+		<where>
+			1 = 1
+			<if test="startDate != null and startDate.trim() != ''">
+				and DATE_FORMAT(o.pay_time,'%Y-%m-%d')  &gt;= #{startDate}
+			</if>
+			<if test="endDate != null and endDate.trim() != ''">
+				and DATE_FORMAT(o.pay_time,'%Y-%m-%d') &lt;= #{endDate}
+			</if>
+		</where>
+		GROUP BY
+			g.brand
+		ORDER BY
+			sales desc
+		LIMIT 10
+	</select>
+
+	<select id="top10BySupplier" resultType="com.kmall.admin.entity.MonthlySalesGrowthEntity" >
+		SELECT
+			s.child_supplier_name as supplier,
+			og.goods_specification_name_value as goodsSpecificationNameValue,
+			sum( og.number ) AS sales
+		FROM
+			mall_order o
+			LEFT JOIN mall_order_goods og ON o.id = og.order_id
+			LEFT JOIN mall_goods g ON g.id = og.goods_id
+			LEFT JOIN mall_supplier s ON g.supplier_id = s.id
+		<where>
+			1 = 1
+			<if test="startDate != null and startDate.trim() != ''">
+				and DATE_FORMAT(o.pay_time,'%Y-%m')  &gt;= #{startDate}
+			</if>
+			<if test="endDate != null and endDate.trim() != ''">
+				and DATE_FORMAT(o.pay_time,'%Y-%m') &lt;= #{endDate}
+			</if>
+		</where>
+		GROUP BY
+		s.id
+		ORDER BY
+			sales desc
+		LIMIT 10
+	</select>
 </mapper>

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

@@ -0,0 +1,68 @@
+<!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;
+        }
+
+        <!--
+        ul{ list-style:none; padding:0px; margin:0px; width:590px;
+            height:20px; line-height:20px; border:1px solid #99CC00;
+            border-top:0px; font-size:12px;}
+        ul li{ display:block; width:40%; float:left;text-indent:2em}
+        .th{ background:#F1FADE; font-weight:bold; border-top:1px }
+        -->
+    </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="startDate" id="startDate"/>&nbsp;
+            <input type="date" name="endDate" id="endDate" />&nbsp;
+                <input type="button" name="queryButton" value="查询" onclick="queryMonthly()" />
+            </div>
+        </div>
+    </header>
+    <div class="row">
+        <div id="brandUl" style="display: inline-block"></div>
+        <div id="supplierUl" style="display: inline-block"></div>
+<!--        <ul id="brandUl"  class="th">-->
+<!--        </ul>-->
+<!--        <ul id="supplierUl"  class="th">-->
+<!--        </ul>-->
+
+    </div>
+    <script src="${rc.contextPath}/js/sale/echarts.js"></script>
+    <script src="${rc.contextPath}/js/sale/top10ByBrandAndSupplier.js"></script>
+<!--</div>-->
+</body>
+</html>

kmall-admin/src/main/webapp/WEB-INF/page/sale/top10ForProduct.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="month" id="month"/>&nbsp;
+            <input type="week" name="week" id="week" />&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: 500px;"></div>
+        </div>
+    </div>
+    <script src="${rc.contextPath}/js/sale/echarts.js"></script>
+    <script src="${rc.contextPath}/js/sale/top10ForProduct.js"></script>
+<!--</div>-->
+</body>
+</html>

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

@@ -0,0 +1,331 @@
+function queryMonthly(){
+    var startDate = document.getElementById("startDate").value;
+    var endDate = document.getElementById("endDate").value;
+
+    var param = {
+        startDate:startDate,
+        endDate:endDate
+    };
+    console.log(param);
+    // 折线图
+    $.ajax({
+        url: "../monthly/top10ByBrandAndSupplier",
+        data: param,
+        contentType:"application/x-www-form-urlencoded",
+        type: 'POST',
+        success: function(data) {
+            document.getElementById("supplierUl").innerHTML = "";
+            document.getElementById("brandUl").innerHTML = "";
+
+            createLi("Brand","Units Sold","brandUl",true);
+            createLi("Supplier","Units Sold","supplierUl",true);
+
+            console.log(data.top10ByBrand);
+            for(var i = 0 ; i < data.top10ByBrand.length; i++){
+                createLi(data.top10ByBrand[i].brand,data.top10ByBrand[i].sales,"brandUl",false);
+            }
+            for(var i = 0 ; i < data.top10BySupplier.length; i++){
+                createLi(data.top10BySupplier[i].supplier,data.top10BySupplier[i].sales,"supplierUl",false);
+            }
+        }
+    });
+
+}
+
+function createLi(title,sales,ulId,flag){
+
+    var ul = document.createElement("ul")
+    if(flag){
+        ul.setAttribute("class","th")
+    }
+    var li_1=document.createElement("li");
+    li_1.innerHTML = title;
+    var li_2=document.createElement("li");
+    li_2.innerHTML = sales;
+
+    ul.appendChild(li_1);
+    ul.appendChild(li_2);
+    document.getElementById(ulId).appendChild(ul);
+
+}
+
+// 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);
+
+            $("#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/top10ForProduct.js

@@ -0,0 +1,350 @@
+$(function () {
+
+
+});
+var myChart;
+// 基于准备好的dom，初始化echarts实例
+var dChart = echarts.init(document.getElementById('main3'));
+// 指定图表的配置项和数据
+function dFun(productNameList,salesList) {
+    dChart.setOption({
+        title: {
+            text: '产品销量前10'
+        },
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow'
+            }
+        },
+        legend: {
+            data: productNameList
+        },
+        grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+        },
+        xAxis: {
+            type: 'value',
+            name: '数量',
+        },
+        yAxis: {
+            type: 'category',
+            data: productNameList
+        },
+        series: [
+            {
+                name: '2011年',
+                type: 'bar',
+                data: salesList,
+                label:seriesLabel
+            }]
+
+    });
+}
+var seriesLabel = {
+    normal: {
+        show: true,
+        textBorderColor: '#333',
+        textBorderWidth: 2
+    }
+}
+
+function queryMonthly(){
+    var month = document.getElementById("month").value;
+    var week = document.getElementById("week").value;
+
+    var param = {
+        month:month,
+        week:week
+    };
+    console.log(param);
+    // 折线图
+    $.ajax({
+        url: "../monthly/top10ForProduct",
+        data: param,
+        contentType:"application/x-www-form-urlencoded",
+        type: 'POST',
+        success: function(data) {
+            console.log(JSON.stringify(data))
+            dFun(data.productNameList, data.salesPriceList);
+
+        },
+    });
+
+}
+
+
+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);
+        }
+    }
+});