zhongshen_project/app/shop/view/stat/order.html

{extend name="base"/}
{block name="resources"}
<style>
	/*时间选择*/
	.time-screen .screen{display: flex}
	.time-screen .screen .item {height: 32px;line-height: 32px;padding: 0 20px;border: 1px solid #D2D2D2;cursor: pointer;border-right: none;border-left: none;position: relative}
	.time-screen .screen .item:after{content: '';position: absolute;top: -1px;left: 0;bottom: -1px;right: -1px;border-right: 1px solid #D2D2D2;border-left: 1px solid #D2D2D2;}
	.time-screen .screen .selected,.time-screen .item:hover{color: #fff;background: var(--base-color);border-color: var(--base-color) }
	.time-screen .screen .selected:after, .time-screen .item:hover:after {border-right: 1px solid var(--base-color);border-left: 1px solid var(--base-color);}

	.data-wrap {display: flex;margin-top: 15px;}
	.data-wrap .data-item {flex: 1;display: flex}
	.data-wrap .data-item .box {flex: 1;margin-right: 15px;border: 1px solid #eee;box-sizing: border-box;padding: 15px;cursor: pointer}
	.data-wrap .data-item:last-child .box {margin-right: 0}
	.data-wrap .data-item .value {font-size: 25px;font-weight: bolder;line-height: 40px}
	.data-wrap .data-item .js-prompt-top {color:#C8C9CC;font-size:14px;z-index:999;cursor:pointer;}
	.data-wrap .data-item .info {font-size: 12px;color: #999;}
	.data-wrap .info .iconfont {font-size: 12px;}
	.data-wrap .data-item .text-color-green {color: #00A717}
	.data-wrap .data-item .text-color-red {color: #ff0000}
	.data-wrap .data-item.selected .box {border-color: var(--base-color);color: var(--base-color);}
	.statistics-wrap {position: relative}
	.statistics-wrap .loading {background: rgba(255,255,255,.5);position: absolute;left: 0; top: 0;text-align: center;width: 100%;height: 100%;box-sizing: border-box;padding-top: 100px;display: none}
	.statistics-wrap .loading i {font-size: 25px}

	.layui-layer-content .layui-form-label {width: 100px}
	.echart {margin-top: 15px}
	.echart-wrap {margin-top: 30px;display: flex;}
	.echart-wrap .main {flex: 1;height: 400px}
	.echart-wrap .main:nth-child(2) {margin-left: 15px}

	.survey {margin:15px 15px 15px 0;background:#f2f3f5;display:flex;box-shadow:unset;align-items: center}
	.survey .layui-card {background:#f2f3f5;vertical-align:top;width:50%;display:inline-block;border-radius:0;float:left;margin-top:10px;box-shadow:unset;}
	.survey .layui-card-header {font-size:14px;box-shadow:unset;border:0;white-space: nowrap}
	.survey .layui-card {margin-bottom: 10px;}
	.survey .layui-card-body {padding-top:0px;font-size: 24px;white-space: nowrap;}
	.survey .layui-card-footer {padding: 0 15px;}
	.survey .symbol { padding: 35px 20px; font-size: 18px; }
	.constitute-wrap {display: flex;}
	.constitute-wrap .survey:first-child {flex: 1}
	.constitute-wrap .survey:last-child {margin-right: 0}
	.date-input{width: 300px}
</style>
{/block}
{block name="main"}
<div class="main-wrap">
	<div class="time-screen statistics">
		<div class="screen">
			<div class="item selected" date-type="today">今日</div>
			<div class="item" date-type="yesterday">昨日</div>
			<div class="item" date-type="seven">7日内</div>
			<div class="item" date-type="thirty">30日内</div>
			<div class="item" date-type="custom">自定义</div>
		</div>
	</div>
	<div class="statistics-wrap">
		<div class="data-wrap">
			<div class="data-item selected" data-value="expected_earnings_total_money">
				<div class="box">
					<div class="title">
						<span class="title-text">预计收入</span>（元）
						<span class="iconfont iconwenhao js-prompt-top" data-tips="统计时间内，店铺收入金额减去支出的金额"></span>
					</div>
					<div class="value" data-type="money">0.00</div>
				</div>
			</div>
			<div class="data-item" data-value="earnings_total_money">
				<div class="box">
					<div class="title">
						<span class="title-text">营业收入</span>（元）
						<span class="iconfont iconwenhao js-prompt-top" data-tips="统计时间内，店铺收入的金额（订单、会员充值、会员开卡等）"></span>
					</div>
					<div class="value" data-type="money">0.00</div>
				</div>
			</div>
			<div class="data-item" data-value="expenditure_total_money">
				<div class="box">
					<div class="title">
						<span class="title-text">营业支出</span>（元）
						<span class="iconfont iconwenhao js-prompt-top" data-tips="统计时间内，店铺支出的金额（退款、会员提现）"></span>
					</div>
					<div class="value" data-type="money">0.00</div>
				</div>
			</div>
		</div>
		<div class="data-wrap">
			<div class="data-item" data-value="order_pay_money">
				<div class="box">
					<div class="title">
						<span class="title-text">商城订单</span>（元）
						<span class="iconfont iconwenhao js-prompt-top" data-tips="统计时间内，商城订单的支付金额的总额"></span>
					</div>
					<div class="value" data-type="money">0.00</div>
				</div>
			</div>
			<div class="data-item" data-value="cashier_order_pay_money">
				<div class="box">
					<div class="title">
						<span class="title-text">收银订单</span>（元）
						<span class="iconfont iconwenhao js-prompt-top" data-tips="统计时间内，收银台订单的支付金额的总额"></span>
					</div>
					<div class="value" data-type="money">0.00</div>
				</div>
			</div>
			<div class="data-item" data-value="member_recharge_total_money">
				<div class="box">
					<div class="title">
						<span class="title-text">会员充值</span>（元）
						<span class="iconfont iconwenhao js-prompt-top" data-tips="统计时间内，会员充值金额的总额"></span>
					</div>
					<div class="value" data-type="money">0.00</div>
				</div>
			</div>
			<div class="data-item" data-value="member_level_total_money">
				<div class="box">
					<div class="title">
						<span class="title-text">会员卡订单</span>（元）
						<span class="iconfont iconwenhao js-prompt-top" data-tips="统计时间内，会员卡订单金额的总额"></span>
					</div>
					<div class="value" data-type="money">0.00</div>
				</div>
			</div>
			{if addon_is_exit('giftcard')}
			<div class="data-item" data-value="member_giftcard_total_money">
				<div class="box">
					<div class="title">
						<span class="title-text">礼品卡订单</span>（元）
						<span class="iconfont iconwenhao js-prompt-top" data-tips="统计时间内，礼品卡订单金额的总额"></span>
					</div>
					<div class="value" data-type="money">0.00</div>
				</div>
			</div>
			{/if}

			<div class="data-item" data-value="refund_total">
				<div class="box">
					<div class="title">
						<span class="title-text">订单退款</span>（元）
						<span class="iconfont iconwenhao js-prompt-top" data-tips="统计时间内，店铺订单退款金额的总额"></span>
					</div>
					<div class="value" data-type="money">0.00</div>
				</div>
			</div>
			<div class="data-item" data-value="member_withdraw_total_money">
				<div class="box">
					<div class="title">
						<span class="title-text">会员提现</span>（元）
						<span class="iconfont iconwenhao js-prompt-top" data-tips="统计时间内，会员提现的金额的总额"></span>
					</div>
					<div class="value" data-type="money">0.00</div>
				</div>
			</div>
		</div>

		<div class="loading">
			<i class="common-loading-layer layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i>
		</div>
	</div>

	<div class="constitute-wrap">
		<div class="survey stat">
			<div class="layui-card layui-input-inline" data-value="earnings_total_money">
				<div class="layui-card-header">
					<span class="hint">收入总额</span>
				</div>
				<div class="layui-card-body">
					<span class="num total_income value" data-type="money">0.00</span>
				</div>
			</div>
			<div class="symbol"> = </div>

			<div class="layui-card layui-input-inline" data-value="order_pay_money">
				<div class="layui-card-header">
					<span class="hint">商城订单（元）</span>
				</div>
				<div class="layui-card-body">
					<span class="num total_income value" data-type="money">0.00</span>
				</div>
				<div class="layui-card-footer">
					<a href="{:addon_url('shop/order/lists')}" class="text-color">明细</a>
				</div>
			</div>
			<div class="symbol"> + </div>

			{if addon_is_exit('cashier', request()->siteid())}
			<div class="layui-card layui-input-inline" data-value="cashier_order_pay_money">
				<div class="layui-card-header">
					<span class="hint">收银订单（元）</span>
				</div>
				<div class="layui-card-body">
					<span class="num total_income value" data-type="money">0.00</span>
				</div>
				<div class="layui-card-footer">
					<a href="{:addon_url('cashier://shop/order/lists')}" class="text-color">明细</a>
				</div>
			</div>
			<div class="symbol"> + </div>
			{/if}

			<div class="layui-card layui-input-inline" data-value="member_recharge_total_money">
				<div class="layui-card-header">
					<span class="hint">会员充值（元）</span>
				</div>
				<div class="layui-card-body">
					<span class="num total_income value" data-type="money">0.00</span>
				</div>
				<div class="layui-card-footer">
					<a href="{:addon_url('memberrecharge://shop/memberrecharge/orderlists')}" class="text-color">明细</a>
				</div>
			</div>
			<div class="symbol"> + </div>

			<div class="layui-card layui-input-inline" data-value="member_level_total_money">
				<div class="layui-card-header">
					<span class="hint">会员开卡（元）</span>
				</div>
				<div class="layui-card-body">
					<span class="num total_income value" data-type="money">0.00</span>
				</div>
				<div class="layui-card-footer">
					<a href="{:addon_url('supermember://shop/membercard/order')}" class="text-color">明细</a>
				</div>
			</div>
			{if addon_is_exit('giftcard')}
			<div class="symbol"> + </div>
			<div class="layui-card layui-input-inline" data-value="member_giftcard_total_money">
				<div class="layui-card-header">
					<span class="hint">礼品卡订单（元）</span>
				</div>
				<div class="layui-card-body">
					<span class="num total_income value" data-type="money">0.00</span>
				</div>
				<div class="layui-card-footer">
					<a href="{:addon_url('giftcard://shop/order/order')}" class="text-color">明细</a>
				</div>
			</div>
			{/if}

		</div>

		<div class="survey stat">
			<div class="layui-card layui-input-inline" data-value="expenditure_total_money">
				<div class="layui-card-header">
					<span class="hint">支出总额</span>
				</div>
				<div class="layui-card-body">
					<span class="num total_income value" data-type="money">0.00</span>
				</div>
			</div>
			<div class="symbol"> = </div>

			<div class="layui-card layui-input-inline" data-value="refund_total">
				<div class="layui-card-header">
					<span class="hint">订单退款（元）</span>
				</div>
				<div class="layui-card-body">
					<span class="num total_income value" data-type="money">0.00</span>
				</div>
				<div class="layui-card-footer">
					<a href="{:addon_url('shop/orderrefund/lists')}" class="text-color">明细</a>
				</div>
			</div>
			<div class="symbol"> + </div>

			<div class="layui-card layui-input-inline" data-value="member_withdraw_total_money">
				<div class="layui-card-header">
					<span class="hint">会员提现（元）</span>
				</div>
				<div class="layui-card-body">
					<span class="num total_income value" data-type="money">0.00</span>
				</div>
				<div class="layui-card-footer">
					<a href="{:addon_url('shop/memberwithdraw/lists')}" class="text-color">明细</a>
				</div>
			</div>

		</div>
	</div>

	<div class="echart-wrap">
		<div class="main" id="main"></div>
	</div>
</div>

<script type="text/html" id="custom-box">
	<div class="layui-form-item">
		<div class="layui-inline">
			<label class="layui-form-label">选择时间：</label>

			<div class="layui-inline layui-inline-margin" id="time_fission">
				<div class="layui-input-inline">
					<input type="text" id="date" name="date" autocomplete="off" class="layui-input date-input" placeholder="请选择日期">
					<i class="iconfont iconriqi"></i>
				</div>
			</div>
			<input type="hidden" name="start_time" value="">
			<input type="hidden" name="end_time" value="">
		</div>
	</div>
</script>
{/block}
{block name="script"}
<script src="SHOP_JS/echarts.min.js"></script>
<script>
	$('.time-screen.statistics .item').click(function () {
		// if ($(this).hasClass('selected')) return;

		var type = $(this).attr('date-type'),
				self = this;
		if (type != 'custom') $(this).addClass('selected').siblings().removeClass('selected');

		switch (type) {
			case 'today':
				var time = {
					start_time: (new Date('{$today} 00:00:00')).getTime() / 1000,
					end_time: (new Date('{$today} 23:59:59')).getTime() / 1000,
				}
				getShopStatistics(time);
				getShopStatData(time, 'hour');
				break;
			case 'yesterday':
				var time = {
					start_time: (new Date('{$yesterday} 00:00:00')).getTime() / 1000,
					end_time: (new Date('{$yesterday} 23:59:59')).getTime() / 1000,
				}
				getShopStatistics(time);
				getShopStatData(time, 'hour');
				break;
			case 'seven':
				var dateObj = new Date(Date.now() - 604800000);
				var date = dateObj.getFullYear() + '-' + (dateObj.getMonth() + 1) + '-' + dateObj.getDate();
				getShopStatistics({start_time: new Date(date).getTime() / 1000});
				getShopStatData({start_time: new Date(date).getTime() / 1000}, 'day');
				break;
			case 'thirty':
				var dateObj = new Date(Date.now() - 2592000000);
				var date = dateObj.getFullYear() + '-' + (dateObj.getMonth() + 1) + '-' + dateObj.getDate();
				getShopStatistics({start_time: new Date(date).getTime() / 1000});
				getShopStatData({start_time: new Date(date).getTime() / 1000}, 'day');
				break;
			case 'custom':
				var _layer = layer.open({
					title: '自定义时间选择',
					type: 1,
					area: ['480px', '160px'], //自定义文本域宽高
					btn: ['确认', '取消'],
					content: $('#custom-box').html(),
					success: function (layero, index) {
						new LayDate({
							elem: '#date',
							type: 'datetime',
							rangeId:['start_time','end_time'],
							max: '{:date("Y-m-d")}',
							done: function(value, date, endDate){
								var time_arr = value.split(' - ');
								var start_time = time_arr[0];
								var end_time = time_arr[1];
								$('input[name="start_time"]').val(time_arr[0]);
								$('input[name="end_time"]').val(time_arr[1]);
							}
						});
					},
					yes: function () {
						var start_time = $('input[name="start_time"]').val();
						var end_time = $('input[name="end_time"]').val();
						if (start_time == ''){
							layer.msg('请选择时间');
							return;
						}
						var time = {
							start_time: (new Date(start_time)).getTime() / 1000,
							end_time: (new Date(end_time)).getTime() / 1000
						};
						getShopStatistics(time);
						getShopStatData(time, 'day');
						$(self).addClass('selected').siblings().removeClass('selected');
						layer.close(_layer);
					}
				})
				break;
		}
	})

	/**
	 * 获取统计数据
	 * */
	function getShopStatistics(data) {
		$('.statistics-wrap .loading').show();
		$.ajax({
			dataType: "JSON",
			type: "POST",
			data: data,
			url: ns.url("shop/stat/getstattotal"),
			success: function(res){
				$('.statistics-wrap .loading').hide();
				if (res.code == 0) {
					Object.keys(res.data).forEach(function (key) {
						var type = $('[data-value="'+ key +'"] .value').attr('data-type');
						var value = type == 'money' ? moneyFormat(res.data[key]) : parseInt(res.data[key]);
						$('[data-value="'+ key +'"] .value').text(value);
					})
				}
			}
		})
	}
	getShopStatistics({});

	/**
	 * 获取趋势数据
	 * */
	var statData = [];
	function getShopStatData(data, type) {
		$.ajax({
			dataType: 'JSON',
			type: 'POST',
			url: type == 'hour' ? ns.url("shop/stat/getstathourdata") : ns.url("shop/stat/getStatData"),
			data: data,
			success: function(res) {
				statData = res;
				fetchEchart();
			}
		});
	}
	getShopStatData({}, 'hour');

	// 图表
	var baseColor = getComputedStyle(document.documentElement).getPropertyValue('--base-color');
	var myChart = echarts.init(document.getElementById('main'));
	var option = {
		tooltip: {
			trigger: 'axis'
		},
		legend: {
			data: ['新增商品数'],
			textStyle: {
				fontSize: 14,
				color: "#000"
			}
		},
		grid: {
			left: '4%',
			right: '4%'
		},
		xAxis: {
			type: 'category',
			boundaryGap: false,
			data: []
		},
		yAxis: {
			type: 'value',
			axisLabel: {
				formatter: '{value} '
			},
			splitLine:{
				show:false
			},
		},
		color: [baseColor],
		series: [
			{
				name: '新增商品数',
				type: 'line',
				smooth: true,
				data: [],
			}
		]
	};

	/**
	 * 渲染echart图表
	 */
	function fetchEchart() {
		var key = $('.statistics-wrap .data-item.selected').attr('data-value');
		option.xAxis.data = statData.time;
		option.legend.data[0] = $('.statistics-wrap .data-item.selected .title-text').text();
		option.series[0].name = $('.statistics-wrap .data-item.selected .title-text').text();
		option.series[0].data = statData[key];
		myChart.setOption(option);
	}

	$('.statistics-wrap .data-item').click(function () {
		if ($(this).hasClass('selected')) return;
		$('.statistics-wrap .data-item').removeClass('selected');
		$(this).addClass('selected');
		fetchEchart();
	})
</script>
{/block}