提交 3392abb4 编写于 作者: Skyeye云's avatar Skyeye云

统计分析完成

上级 18271809
......@@ -27,6 +27,7 @@ layui.config({
// 加载套餐订单性质
shopUtil.queryMealOrderNatureList(function (json){
$("#natureId").html(getDataUseHandlebars(selOption, json));
form.render('select');
});
table.render({
......
......@@ -56,6 +56,7 @@ layui.config({
// 加载套餐订单性质
shopUtil.queryMealOrderNatureList(function (json){
$("#natureId").html(getDataUseHandlebars($("#selectTemplate").html(), json));
form.render('select');
});
textool.init({
......
......@@ -22,6 +22,7 @@ layui.config({
// 加载套餐订单性质
shopUtil.queryMealOrderNatureList(function (json){
$("#natureId").html(getDataUseHandlebars(selOption, json));
form.render('select');
});
form.on('select(storeId)', function(data) {
......
......@@ -24,6 +24,7 @@ layui.config({
// 加载套餐订单性质
shopUtil.queryMealOrderNatureList(function (json){
$("#natureId").html(getDataUseHandlebars(selOption, json));
form.render('select');
});
laydate.render({
......
layui.config({
base: basePath,
version: skyeyeVersion
}).extend({
window: 'js/winui.window',
echarts: '../echarts/echarts',
echartsTheme: '../echarts/echartsTheme'
}).define(['window', 'jquery', 'winui', 'form', 'echarts', 'laydate'], function (exports) {
winui.renderColor();
var $ = layui.$,
form = layui.form,
laydate = layui.laydate;
var selOption = getFileContent('tpl/template/select-option.tpl');
var entTime = getOneYMFormatDate();
var startTime = getPointYMFormatDate(DateAdd("-m", 5, new Date(entTime)));
$("#createTime").val(startTime + '~' + entTime);
laydate.render({
elem: '#createTime',
type: 'month',
range: '~',
done: function(value, date){
$("#createTime").val(value);
resetData();
}
});
form.render();
// 加载区域
shopUtil.getShopAreaMation(function (json){
$("#areaId").html(getDataUseHandlebars(selOption, json));
form.render('select');
});
form.on('select(areaId)', function(data) {
if(isNull(data.value)){
$("#storeId").html('');
form.render('select');
resetData();
}else{
shopUtil.queryStoreListByAreaId(data.value, function (json){
$("#storeId").html(getDataUseHandlebars(selOption, json));
form.render('select');
resetData();
});
}
});
form.on('select(storeId)', function(data) {
resetData();
});
// 加载套餐订单性质
shopUtil.queryMealOrderNatureList(function (json){
$("#natureId").html(getDataUseHandlebars(selOption, json));
form.render('select');
});
form.on('select(natureId)', function(data) {
resetData();
});
function getParams(){
var startTime = "", endTime = "";
if(!isNull($("#createTime").val())){
startTime = $("#createTime").val().split('~')[0].trim();
endTime = $("#createTime").val().split('~')[1].trim();
}
return {
startTime: startTime,
endTime: endTime,
areaId: $("#areaId").val(),
natureId: $("#natureId").val(),
storeId: isNull($("#storeId").val()) ? "" : $("#storeId").val(),
};
}
resetData()
var myChart1, myChart2, myChart3, myChart4, myChart5;
function resetData(){
AjaxPostUtil.request({url: shopBasePath + "queryStatisticsShop", params: getParams(), type: 'json', method: 'POST', callback: function(json){
if(json.returnCode == 0){
$("#mealOrderMemberByNum").html(json.bean.mealOrderMemberByNum + "");
$("#mealOrderNum").html(json.bean.mealOrderNum + "");
$("#keepFitOrderNum").html(json.bean.keepFitOrderNum + "");
$("#keepFitOrderPrice").html(json.bean.keepFitOrderPrice + "");
myChart1 = renderEcharts("echart1", '保养套餐销售比对', '', '', json.bean.monthMealOrderNum);
myChart2 = renderEcharts("echart2", '保养对比', '', '', json.bean.monthKeepFitOrderNum);
myChart3 = renderEcharts2("echart3", '保养套餐销售门店比例', '', json.bean.storeMealOrderNum);
myChart4 = renderEcharts2("echart4", '保养门店比例', '', json.bean.storeKeepFitOrderNum);
myChart5 = renderEcharts2("echart5", '订单性质比例', '', json.bean.natureMealOrderNum);
}else{
winui.window.msg(json.returnMessage, {icon: 2, time: 2000});
}
}});
}
function renderEcharts(id, title, subtext, yTitle, rows) {
var myChart = echarts.init(document.getElementById(id));
var nameStr = new Array();
var numStr = new Array();
$.each(rows, function(i, item){
nameStr.push(item.name);
numStr.push(item.value);
});
var option = getOption(title, '', nameStr, yTitle, numStr, 'bar');
myChart.setOption(option);
return myChart;
}
function renderEcharts2(id, title, subtext, rows) {
var myChart = echarts.init(document.getElementById(id));
var option = getPieChatOption(title, subtext, rows);
myChart.setOption(option);
return myChart;
}
window.onresize = function(){
myChart1.resize();
myChart2.resize();
myChart3.resize();
myChart4.resize();
myChart5.resize();
}
exports('statistics', {});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="../../assets/lib/layui/css/layui.css" rel="stylesheet" />
<link href="../../assets/lib/winui/css/winui.css" rel="stylesheet" />
</head>
<body style="background-color: rgb(242, 242, 242);">
<div class="layui-fluid">
<form class="layui-form layui-form-pane layui-col-xs12" action="">
<div class="layui-form-item margin-top-10 layui-col-space15" style="background-color: white;">
<div class="layui-inline" style="margin-bottom: 0px">
<label class="layui-form-label">区域</label>
<div class="layui-input-inline">
<select id="areaId" name="areaId" lay-filter="areaId" lay-search="">
</select>
</div>
<label class="layui-form-label">门店</label>
<div class="layui-input-inline">
<select id="storeId" name="storeId" lay-filter="storeId" lay-search="">
</select>
</div>
<label class="layui-form-label">性质</label>
<div class="layui-input-inline">
<select id="natureId" name="natureId" lay-filter="natureId" lay-search="">
</select>
</div>
<label class="layui-form-label">日期范围</label>
<div class="layui-input-inline">
<input type="text" id="createTime" name="createTime" placeholder="请选择日期范围" class="layui-input" />
</div>
</div>
</div>
<div class="layui-col-xs12 margin-top-10 layui-col-space15">
<div class="layui-col-sm6 layui-col-md3">
<div class="layui-card">
<div class="layui-card-header">
会员量
</div>
<div class="layui-card-body layuiadmin-card-list">
<p class="layuiadmin-big-font" id="mealOrderMemberByNum">0个</p>
<p>已支付/已收货的套餐订单购买会员数。</p>
</div>
</div>
</div>
<div class="layui-col-sm6 layui-col-md3">
<div class="layui-card">
<div class="layui-card-header">
保养套餐销售量
</div>
<div class="layui-card-body layuiadmin-card-list">
<p class="layuiadmin-big-font" id="mealOrderNum">0单</p>
<p>已支付/已收货的套餐订单数。</p>
</div>
</div>
</div>
<div class="layui-col-sm6 layui-col-md3">
<div class="layui-card">
<div class="layui-card-header">
保养量
</div>
<div class="layui-card-body layuiadmin-card-list">
<p class="layuiadmin-big-font" id="keepFitOrderNum">0单</p>
<p>保养完成/已核销保养订单的数量。</p>
</div>
</div>
</div>
<div class="layui-col-sm6 layui-col-md3">
<div class="layui-card">
<div class="layui-card-header">
保养金额
</div>
<div class="layui-card-body layuiadmin-card-list">
<p class="layuiadmin-big-font" id="keepFitOrderPrice">0.00元</p>
<p>保养完成/已核销保养订单的总金额。</p>
</div>
</div>
</div>
<div class="layui-col-xs6">
<div class="layui-card">
<div class="layui-card-header">保养套餐销售比对</div>
<div class="layui-card-body">
<div id="echart1" class="layui-row" style="height: 400px;">
</div>
</div>
</div>
</div>
<div class="layui-col-xs6">
<div class="layui-card">
<div class="layui-card-header">保养对比</div>
<div class="layui-card-body">
<div id="echart2" class="layui-row" style="height: 400px;">
</div>
</div>
</div>
</div>
<div class="layui-col-xs4">
<div class="layui-card">
<div class="layui-card-header">保养套餐销售门店比例</div>
<div class="layui-card-body">
<div id="echart3" class="layui-row" style="height: 400px;">
</div>
</div>
</div>
</div>
<div class="layui-col-xs4">
<div class="layui-card">
<div class="layui-card-header">保养门店比例</div>
<div class="layui-card-body">
<div id="echart4" class="layui-row" style="height: 400px;">
</div>
</div>
</div>
</div>
<div class="layui-col-xs4">
<div class="layui-card">
<div class="layui-card-header">订单性质比例</div>
<div class="layui-card-body">
<div id="echart5" class="layui-row" style="height: 400px;">
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<script src="../../assets/lib/layui/layui.js"></script>
<script src="../../assets/lib/layui/custom.js"></script>
<script type="text/javascript">
layui.config({base: '../../js/statistics/'}).use('statistics');
</script>
</body>
</html>
\ No newline at end of file
......@@ -392,6 +392,45 @@ function getOption(title, subtext, xNameData, yTitle, yNameData, type){
};
}
/**
* echarts简单图形参数
* @param {} title 标题
* @param {} subtext 描述
* @param {} data 数据
* @return {}
*/
function getPieChatOption(title, subtext, data){
return {
title: {
text: title,
subtext: subtext,
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
bottom: '5%',
left: 'center'
},
series: [
{
name: '',
type: 'pie',
radius: '50%',
data: data,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
}
// 移除指定value值
function removeByValue(arr, val){
for(var i = 0; i < arr.length; i++){
......
......@@ -42,6 +42,14 @@ function getOneYMFormatDate(){
return year.toString() + "-" + month.toString();
}
// 获取指定Date的日期
function getPointYMFormatDate(date){
var year = date.getFullYear();
var month = date.getMonth() + 1;
month = (month < 10 ? "0" + month : month);
return year.toString() + "-" + month.toString();
}
/**
* 获取指定日期是第几周
*
......@@ -399,6 +407,11 @@ function DateAdd(interval, number, date) {
return date;
break;
}
case "-m": {
date.setMonth(date.getMonth() - number);
return date;
break;
}
case "w": {
date.setDate(date.getDate() + number * 7);
return date;
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册