@layout("/common/_container.html"){
|
<div class="container-fluid" style="padding: 0 !important;" xmlns="http://www.w3.org/1999/html">
|
|
<div class="row">
|
<div class="col-md-4">
|
<div class="ibox-title">
|
<h3>用户统计</h3>
|
</div>
|
<div class="row">
|
<div class="col-md-4">
|
<div class="ibox float-e-margins">
|
<div class="ibox-title">
|
<h5>总用户数量</h5>
|
</div>
|
<div class="ibox-content">
|
<div class="row">
|
<div class="col-md-12">
|
<h1 class="no-margins" id="totalUserCount">0</h1>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="col-md-4">
|
<div class="ibox float-e-margins">
|
<div class="ibox-title">
|
<h5>昨日新增用户数量</h5>
|
</div>
|
<div class="ibox-content">
|
<div class="row">
|
<div class="col-md-12">
|
<h1 class="no-margins" id="yesterdayUserCount">0</h1>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="col-md-4">
|
<div class="ibox float-e-margins">
|
<div class="ibox-title">
|
<h5>上周新增用户数量</h5>
|
</div>
|
<div class="ibox-content">
|
<div class="row">
|
<div class="col-md-12">
|
<h1 class="no-margins" id="lastWeekUserCount">0</h1>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="row">
|
<div class="col-md-4">
|
<div class="ibox float-e-margins">
|
<div class="ibox-title">
|
<h5>黄金营销员数量</h5>
|
</div>
|
<div class="ibox-content">
|
<div class="row">
|
<div class="col-md-12">
|
<h1 class="no-margins" id="salesCount_3">0</h1>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="col-md-4">
|
<div class="ibox float-e-margins">
|
<div class="ibox-title">
|
<h5>城市合伙人数量</h5>
|
</div>
|
<div class="ibox-content">
|
<div class="row">
|
<div class="col-md-12">
|
<h1 class="no-margins" id="salesCount_4">0</h1>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="col-md-4">
|
<div class="ibox float-e-margins">
|
<div class="ibox-title">
|
<h5>市场总监数量</h5>
|
</div>
|
<div class="ibox-content">
|
<div class="row">
|
<div class="col-md-12">
|
<h1 class="no-margins" id="salesCount_5">0</h1>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="col-md-4">
|
<div class="ibox-title">
|
<h3>门店统计</h3>
|
</div>
|
<div class="row">
|
<div class="col-md-6">
|
<div class="ibox float-e-margins">
|
<div class="ibox-title">
|
<h5>门店总数量</h5>
|
</div>
|
<div class="ibox-content">
|
<div class="row">
|
<div class="col-md-12">
|
<h1 class="no-margins" id="totalMerchantCount">0</h1>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="col-md-6">
|
<div class="ibox float-e-margins">
|
<div class="ibox-title">
|
<h5>医生数量</h5>
|
</div>
|
<div class="ibox-content">
|
<div class="row">
|
<div class="col-md-12">
|
<h1 class="no-margins" id="totalDoctorCount">0</h1>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="row">
|
<div class="col-md-6">
|
<div class="ibox float-e-margins">
|
<div class="ibox-title">
|
<h5>在售商品数量</h5>
|
</div>
|
<div class="ibox-content">
|
<div class="row">
|
<div class="col-md-12">
|
<h1 class="no-margins" id="forSaleGoodsCount">0</h1>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="col-md-6">
|
<div class="ibox float-e-margins">
|
<div class="ibox-title">
|
<h5>下架商品数量</h5>
|
</div>
|
<div class="ibox-content">
|
<div class="row">
|
<div class="col-md-12">
|
<h1 class="no-margins" id="stopSaleGoodsCount">0</h1>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<script type="text/javascript">
|
$(function() {
|
$.ajax({
|
url : "${ctxPath}/mall/home/getTotalData",
|
type : "get",
|
dataType : "json",
|
success : function (map) {
|
$("#totalUserCount").html(map.totalUserCount);
|
$("#yesterdayUserCount").html(map.yesterdayUserCount);
|
$("#lastWeekUserCount").html(map.lastWeekUserCount);
|
$("#salesCount_3").html(map.salesCount_3);
|
$("#salesCount_4").html(map.salesCount_4);
|
$("#salesCount_5").html(map.salesCount_5);
|
|
$("#totalMerchantCount").html(map.totalMerchantCount);
|
$("#totalDoctorCount").html(map.totalDoctorCount);
|
$("#forSaleGoodsCount").html(map.forSaleGoodsCount);
|
$("#stopSaleGoodsCount").html(map.stopSaleGoodsCount);
|
}
|
});
|
});
|
</script>
|
|
<div class="col-md-4">
|
<div class="ibox-title">
|
<h3>
|
订单统计
|
<div class="btn-group pull-right">
|
<button class="btn btn-outline btn-success btn-xs" style="min-width: 45px" type="button" onclick="getOrderData(1)">日</button>
|
<button class="btn btn-outline btn-success btn-xs" style="min-width: 45px" type="button" onclick="getOrderData(2)">周</button>
|
<button class="btn btn-outline btn-success btn-xs" style="min-width: 45px" type="button" onclick="getOrderData(3)">月</button>
|
</div>
|
</h3>
|
</div>
|
|
<script type="text/javascript">
|
$(function () {
|
getOrderData(1);
|
});
|
function getOrderData(type) {
|
$.ajax({
|
url : "${ctxPath}/mall/home/getOrderData?type=" + type,
|
type : "get",
|
dataType : "json",
|
success : function (map) {
|
$("#totalOrderCount").html(map.totalOrderCount);
|
$("#totalOrderMoney").html(map.totalOrderMoney);
|
$("#goldOrderMoney").html(map.goldOrderMoney);
|
$("#diamondOrderMoney").html(map.diamondOrderMoney);
|
$("#goodsOrderMoney").html(map.goodsOrderMoney);
|
}
|
});
|
}
|
</script>
|
|
<div class="row">
|
<div class="col-md-6">
|
<div class="ibox float-e-margins">
|
<div class="ibox-title">
|
<h5>订单总数量</h5>
|
</div>
|
<div class="ibox-content">
|
<div class="row">
|
<div class="col-md-12">
|
<h1 class="no-margins" id="totalOrderCount">0</h1>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="col-md-6">
|
<div class="ibox float-e-margins">
|
<div class="ibox-title">
|
<h5>总销售额</h5>
|
</div>
|
<div class="ibox-content">
|
<div class="row">
|
<div class="col-md-12">
|
<h1 class="no-margins" id="totalOrderMoney">0</h1>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="row">
|
<div class="col-md-4">
|
<div class="ibox float-e-margins">
|
<div class="ibox-title">
|
<h5>黄金销售额</h5>
|
</div>
|
<div class="ibox-content">
|
<div class="row">
|
<div class="col-md-12">
|
<h1 class="no-margins" id="goldOrderMoney">0</h1>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="col-md-4">
|
<div class="ibox float-e-margins">
|
<div class="ibox-title">
|
<h5>钻石销售额</h5>
|
</div>
|
<div class="ibox-content">
|
<div class="row">
|
<div class="col-md-12">
|
<h1 class="no-margins" id="diamondOrderMoney">0</h1>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="col-md-4">
|
<div class="ibox float-e-margins">
|
<div class="ibox-title">
|
<h5>普通商品销售额</h5>
|
</div>
|
<div class="ibox-content">
|
<div class="row">
|
<div class="col-md-12">
|
<h1 class="no-margins" id="goodsOrderMoney">0</h1>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
|
<div class="ibox-title">
|
<label class="control-label">
|
数据类型
|
<select id="chartTrendType">
|
<option value="1" onclick="chartTrendLoad();">订单统计</option>
|
<option value="2" onclick="chartTrendLoad();">用户统计</option>
|
<option value="3" onclick="chartTrendLoad();">用户日活跃量</option>
|
</select>
|
</label>
|
|
<div class="btn-group pull-right">
|
<input type="hidden" id="chartTrendTimeType" value="1">
|
<button class="btn btn-outline btn-success btn-xs" style="min-width: 45px" type="button" onclick="chartTrendTimeClick('1');">日</button>
|
<button class="btn btn-outline btn-success btn-xs" style="min-width: 45px" type="button" onclick="chartTrendTimeClick('2');">周</button>
|
<button class="btn btn-outline btn-success btn-xs" style="min-width: 45px" type="button" onclick="chartTrendTimeClick('3');">月</button>
|
</div>
|
</div>
|
<div class="row">
|
<div class="col-sm-12">
|
<div class="ibox-content">
|
<div id="chart1" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
|
</div>
|
</div>
|
</div>
|
<script src="${ctxPath}/static/js/plugins/chartJs/echarts-all.js"></script>
|
<script type="text/javascript">
|
$(function () {
|
// 加载趋势数据
|
chartTrendLoad();
|
});
|
|
function chartTrendTimeClick(timeType) {
|
$("#chartTrendTimeType").val(timeType);
|
$(this).addClass("active");
|
chartTrendLoad();
|
}
|
// 加载趋势数据
|
function chartTrendLoad() {
|
$.ajax({
|
url: "${ctxPath}/mall/home/getDataTrend",
|
type: "post",
|
data: {
|
type: $("#chartTrendType").val(),
|
timeType: $("#chartTrendTimeType").val()
|
},
|
dataType: "json",
|
success: function (map) {
|
var chart1 = echarts.init(document.getElementById('chart1'));
|
chart1.setOption({
|
title: {
|
text: '',
|
subtext: ''
|
},
|
tooltip: {
|
trigger: 'axis'
|
},
|
toolbox: {
|
show: true,
|
feature: {
|
magicType: {show: true, type: ['line', 'bar']},
|
}
|
},
|
calculable: true,
|
xAxis: [
|
{
|
type: 'category',
|
boundaryGap: false,
|
data: map.timeList
|
}
|
],
|
yAxis: [
|
{
|
type: 'value',
|
axisLabel: {
|
formatter: '{value}'
|
}
|
}
|
],
|
series: [
|
{
|
name: '数量',
|
type: 'line',
|
data: map.numList
|
}
|
]
|
});
|
}
|
});
|
}
|
</script>
|
|
<div class="row">
|
<div class="col-sm-6">
|
<div class="ibox-title">
|
<h3>
|
营业单位排行
|
<div class="btn-group pull-right">
|
<button class="btn btn-outline btn-success btn-xs" style="min-width: 45px" type="button" onclick="chartTopOrderLoad()">查询</button>
|
</div>
|
</h3>
|
<label class="control-label">
|
日期
|
<input type="text" class="layer-date" id="beginTimeTopOrder" size="8" placeholder="开始时间" />
|
<input type="text" class="layer-date" id="endTimeTopOrder" size="8" placeholder="结束时间" />
|
</label>
|
<label class="control-label" style="margin-left: 20px;">
|
数据类型
|
<select id="typeTopOrder">
|
<option value="-1">全部</option>
|
<option value="0">普通商品</option>
|
<option value="1">黄金套餐</option>
|
<option value="2">钻石套餐</option>
|
</select>
|
</label>
|
<label class="control-label" style="margin-left: 20px;">
|
地区
|
<select id="provinceCodeTopOrder" onchange="getCityOptionTopOrder()">
|
<option value="-1">全部</option>
|
@for(cityArea in provinceList) {
|
<option value="${cityArea.provinceCode}">${cityArea.provinceName}</option>
|
@}
|
</select>
|
<select id="cityCodeTopOrder">
|
<option value="-1">全部</option>
|
</select>
|
</label>
|
</div>
|
<div class="row">
|
<div class="col-sm-12">
|
<div class="ibox-content">
|
<table class="table table-bordered table-striped table-hover">
|
<tbody id="chartTopOrder" style="text-align: center;"></tbody>
|
</table>
|
</div>
|
</div>
|
</div>
|
</div>
|
<script type="text/javascript">
|
$(function () {
|
// 初始化开始时间、结束时间
|
laydate.render({elem: '#beginTimeTopOrder'});
|
laydate.render({elem: '#endTimeTopOrder'});
|
|
chartTopOrderLoad();
|
});
|
|
function chartTopOrderLoad() {
|
$.ajax({
|
url: "${ctxPath}/mall/home/getDataTopOrderList",
|
type: "post",
|
data: {
|
"beginTime": $("#beginTimeTopOrder").val(),
|
"endTime": $("#endTimeTopOrder").val(),
|
"type": $("#typeTopOrder").val(),
|
"provinceCode": $("#provinceCodeTopOrder").val(),
|
"cityCode": $("#cityCodeTopOrder").val()
|
},
|
dataType: "json",
|
success: function (data) {
|
let tabStr = '';
|
$(data).each(function (i, item) {
|
tabStr += "<tr>"
|
+"<td>" + item.no + "</td>"
|
+ "<td>" + item.name + "</td>"
|
+ "<td>" + item.num + "</td>"
|
+ "</tr>";
|
});
|
|
if (tabStr.length == 0) {
|
tabStr = '<tr><td style="text-align: center">暂无数据！</td></tr>'
|
}
|
$("#chartTopOrder").html(tabStr);
|
}
|
});
|
}
|
|
function getCityOptionTopOrder() {
|
let provinceCode = $("#provinceCodeTopOrder").val();
|
$.ajax({
|
url: "${ctxPath}/mall/home/getCityList",
|
type: "get",
|
data: {"provinceCode": provinceCode},
|
dataType: "json",
|
success: function (list) {
|
let options = "<option value='-1'>全部</option>";
|
$(list).each(function (i, item) {
|
options += "<option value='" + item.cityCode + "'>" + item.cityName + "</option>";
|
});
|
$("#cityCodeTopOrder").html(options);
|
}
|
});
|
}
|
</script>
|
|
<div class="col-sm-6">
|
<div class="ibox-title">
|
<h3>
|
门店排行
|
<div class="btn-group pull-right">
|
<button class="btn btn-outline btn-success btn-xs" style="min-width: 45px" type="button" onclick="chartTopShopLoad()">查询</button>
|
</div>
|
</h3>
|
<label class="control-label">
|
日期
|
<input type="text" class="layer-date" id="beginTimeTopShop" size="8" placeholder="开始时间" />
|
<input type="text" class="layer-date" id="endTimeTopShop" size="8" placeholder="结束时间" />
|
</label>
|
<label class="control-label" style="margin-left: 20px;">
|
数据类型
|
<select id="typeTopShop">
|
<option value="0">订单统计</option>
|
<option value="1">营销业绩</option>
|
</select>
|
</label>
|
<label class="control-label" style="margin-left: 20px;">
|
地区
|
<select id="provinceCodeTopShop" onchange="getCityOptionTopShop()">
|
<option value="-1">全部</option>
|
@for(cityArea in provinceList) {
|
<option value="${cityArea.provinceCode}">${cityArea.provinceName}</option>
|
@}
|
</select>
|
<select id="cityCodeTopShop">
|
<option value="-1">全部</option>
|
</select>
|
</label>
|
</div>
|
<div class="row">
|
<div class="col-sm-12">
|
<div class="ibox-content">
|
<table class="table table-bordered table-striped table-hover">
|
<tbody id="chartTopShop" style="text-align: center;"></tbody>
|
</table>
|
</div>
|
</div>
|
</div>
|
</div>
|
<script type="text/javascript">
|
$(function () {
|
// 初始化开始时间、结束时间
|
laydate.render({elem: '#beginTimeTopShop'});
|
laydate.render({elem: '#endTimeTopShop'});
|
|
chartTopShopLoad();
|
});
|
|
function chartTopShopLoad() {
|
$.ajax({
|
url: "${ctxPath}/mall/home/getDataTopShopList",
|
type: "post",
|
data: {
|
"beginTime": $("#beginTimeTopShop").val(),
|
"endTime": $("#endTimeTopShop").val(),
|
"type": $("#typeTopShop").val(),
|
"provinceCode": $("#provinceCodeTopShop").val(),
|
"cityCode": $("#cityCodeTopShop").val()
|
},
|
dataType: "json",
|
success: function (data) {
|
let tabStr = '';
|
$(data).each(function (i, item) {
|
tabStr += "<tr>"
|
+"<td>" + item.no + "</td>"
|
+ "<td>" + item.name + "</td>"
|
+ "<td>" + item.num + "</td>"
|
+ "</tr>";
|
});
|
|
if (tabStr.length == 0) {
|
tabStr = '<tr><td style="text-align: center">暂无数据！</td></tr>'
|
}
|
$("#chartTopShop").html(tabStr);
|
}
|
});
|
}
|
|
function getCityOptionTopShop() {
|
let provinceCode = $("#provinceCodeTopShop").val();
|
$.ajax({
|
url: "${ctxPath}/mall/home/getCityList",
|
type: "get",
|
data: {"provinceCode": provinceCode},
|
dataType: "json",
|
success: function (list) {
|
let options = "<option value='-1'>全部</option>";
|
$(list).each(function (i, item) {
|
options += "<option value='" + item.cityCode + "'>" + item.cityName + "</option>";
|
});
|
$("#cityCodeTopShop").html(options);
|
}
|
});
|
}
|
</script>
|
|
</div>
|
</div>
|
@}
|
