zhongshen_project/addon/fenxiao/shop/view/fenxiao/index.html

{extend name="app/shop/view/base.html"/}
{block name="resources"}
<style>
	/* 总样式 */
	.summary-wrap { display: flex}
	.body-content {background: none !important;padding: 0 !important;margin: 0 !important;}
	.summary-wrap .common-wrap{margin:15px 15px 0 15px; flex: 1;padding: 15px; background: #fff;position: relative}
	.summary-wrap .common-wrap .head{display: flex;align-items: center;}
	.summary-wrap .common-wrap .head .title{font-size: 16px;font-weight: bolder;}
	/* 佣金概览 */
	.commission-wrap{height: 120px;background: #fff;position: relative;margin:35px 15px 0 15px;padding: 15px}
	.commission-wrap .commission-overview{display: flex;}
	.commission-wrap .header{font-weight: bolder;position: absolute;top: 19px;left: 16px;font-size: 16px;color: #333;}
	.commission-wrap .li{width: 25%;height: 120px;text-align: left;display: flex;flex-direction: column;padding: 0 15px 10px 15px}
	.commission-wrap .li .title{display: flex;align-items: center;font-size: 14px;margin-top: 50px;color: #909399;}
	.commission-wrap .li .money{margin-top: 10px;font-size: 26px;color: #303133;}
	/* 分销商概览 */
	.summary-wrap .fenxiao-wrap{height: 120px;width: 40%;background: #fff;position: relative; margin:15px 0px 0 15px;padding: 15px}
	.summary-wrap .fenxiao-wrap .member-overview{display: flex;}
	.summary-wrap .fenxiao-wrap .header{font-weight: bolder;position: absolute;top: 19px;left: 16px;font-size: 16px;color: #333;}
	.summary-wrap .fenxiao-wrap .li{width: 50%;height: 120px;text-align: left;display: flex;flex-direction: column;padding: 0 15px 10px 15px}
	.summary-wrap .fenxiao-wrap .li .title{display: flex;align-items: center;font-size: 14px;margin-top: 50px;color: #909399;}
	.summary-wrap .fenxiao-wrap .li .num{margin-top: 10px;font-size: 26px;color: #303133;}
	/* 分销订单金额概览 */
	.summary-wrap .order-wrap{height: 120px;width: 40%;background: #fff;position: relative; flex:1;margin:15px 15px 0 15px;padding: 15px}
	.summary-wrap .order-wrap .order-overview{display: flex;}
	.summary-wrap .order-wrap .header{font-weight: bolder;position: absolute;top: 19px;left: 16px;font-size: 16px;color: #333;}
	.summary-wrap .order-wrap .li{width: 33%;height: 120px;text-align: left;display: flex;flex-direction: column;padding: 0 15px 10px 15px}
	.summary-wrap .order-wrap .li .title{display: flex;align-items: center;font-size: 14px;margin-top: 50px;color: #909399;}
	.summary-wrap .order-wrap .li .num{margin-top: 10px;font-size: 26px;color: #303133;}
	.summary-wrap .order-wrap .li .money{margin-top: 10px;font-size: 26px;color: #303133;}
	/* 分销商人数报表 */
	.summary-wrap .common-wrap:nth-child(1){margin-right: 0}
	/* 分销订单金额报表 */
	.trend-wrap {margin:15px 15px 0 15px;padding: 15px; background: #fff}
	.trend-wrap .head{display: flex;align-items: center;}
	.trend-wrap .head .title{font-size: 16px;font-weight: bolder;}
	/* 分销商等级比例 */
	.summary-wrap .common-wrap .body.level{position: absolute;top: 50%;margin-top: -75px !important;width: calc(100% - 30px)}
</style>
{/block}
{block name="main"}
<div class="commission-wrap">
	<div class="header">
		<span>佣金概览</span>
	</div>
	<div class="commission-overview">
		<div class="li">
			<div class="title prompt-block">
				可提现佣金（元）
				<div class="prompt">
					<i class="iconfont iconwenhao1"></i>
					<div class="prompt-box">
						<div class="prompt-con">所有分销订单已完成，佣金已结算，可以提现的佣金(不包含已提现的佣金)</div>
					</div>
				</div>
			</div>
			<p class="money">{$fenxiao_account}</p>
		</div>
		<div class="li">
			<div class="title prompt-block">
				提现待审核（元）
				<div class="prompt">
					<i class="iconfont iconwenhao1"></i>
					<div class="prompt-box">
						<div class="prompt-con">已申请提现等待管理审核的佣金</div>
					</div>
				</div>
			</div>
			<p class="money">{if $account_data.account_withdraw_apply == null} 0.00 {else/}{$account_data.account_withdraw_apply}{/if}</p>
		</div>
		<div class="li">
			<div class="title prompt-block">
				提现佣金（元）
				<div class="prompt">
					<i class="iconfont iconwenhao1"></i>
					<div class="prompt-box">
						<div class="prompt-con">所有已经提现成功的佣金总和</div>
					</div>
				</div>
			</div>
			<p class="money">{if $account_data.account_withdraw == null} 0.00 {else/}{$account_data.account_withdraw}{/if}</p>
		</div>
		<div class="li">
			<div class="title prompt-block">
				进行中佣金（元）
				<div class="prompt">
					<i class="iconfont iconwenhao1"></i>
					<div class="prompt-box">
						<div class="prompt-con">指所有分销订单待结算佣金的和</div>
					</div>
				</div>
			</div>
			<p class="money">{$commission_money}</p>
		</div>
	</div>
</div>
<div class="summary-wrap">
	<div class="fenxiao-wrap">
		<div class="header">
			<span>分销商概览</span>
		</div>
		<div class="member-overview">
			<div class="li">
				<div class="title">待审核（人）</div>
				<p class="num">{$fenxiao_apply_num}</p>
			</div>
			<div class="li">
				<div class="title">分销商（人）</div>
				<p class="num">{$fenxiao_num}</p>
			</div>
		</div>
	</div>
	<div class="order-wrap">
		<div class="header">
			<span>分销概览</span>
		</div>
		<div class="order-overview">
			<div class="li">
				<div class="title prompt-block">
					分销订单总额（元）
					<div class="prompt">
						<i class="iconfont iconwenhao1"></i>
						<div class="prompt-box">
							<div class="prompt-con">指所有分销订单实付金额的和 (包含退款)</div>
						</div>
					</div>
				</div>
				<p class="num">{$shop_commission.real_goods_money}</p>
			</div>
			<div class="li">
				<div class="title prompt-block">
					分销佣金总额（元）
					<div class="prompt">
						<i class="iconfont iconwenhao1"></i>
						<div class="prompt-box">
							<div class="prompt-con">指所有分销订单所得佣金的和</div>
						</div>
					</div>
				</div>
				<p class="num">{$shop_commission.commission}</p>
			</div>
			<div class="li">
				<div class="title">分销商品数（个）</div>
				<p class="money">{$fenxiao_goods_num}</p>
			</div>
		</div>
	</div>
</div>
<div class="summary-wrap">
	<div class="common-wrap">
		<div class="head">
			<div class="title">新增分销商数(人)</div>
		</div>
		<div class="body">
			<div id="fenxiao_member" style="width: 100%; height: 300px;"></div>
		</div>
	</div>
	<div class="common-wrap">
		<div class="head">
			<div class="title">分销商等级比例</div>
		</div>
		<div class="body level">
			<div id="fenxiao_level" style="width: 100%; height: 150px;"></div>
		</div>
	</div>
</div>
<div class="trend-wrap">
	<div class="head">
		<div class="title">分销订单金额(元)</div>
	</div>
	<div class="body">
		<div id="order_money" style="width: 100%; height: 300px;"></div>
	</div>
</div>
{/block}
{block name="script"}
<script src="SHOP_JS/echarts.min.js"></script>
<script src="SHOP_JS/china.js"></script>
<script>
	var baseColor = getComputedStyle(document.documentElement).getPropertyValue('--base-color');

	function getDay(day){
		var today = new Date();
		var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
		today.setTime(targetday_milliseconds); //注意，这行是关键代码
		var tYear = today.getFullYear();
		var tMonth = today.getMonth();
		var tDate = today.getDate();
		tMonth = doHandleMonth(tMonth + 1);
		tDate = doHandleMonth(tDate);
		return tMonth + "-" + tDate;
	}

	function doHandleMonth(month){
		var m = month;
		if(month.toString().length == 1){
			m = "0" + month;
		}
		return m;
	}

	getFenxiaoOrder();
	getFenxiaoLevel();
	getFenixaoMmeber();

	//图形统计
	function getFenxiaoOrder() {
		var dateObj = new Date(Date.now() - 1296000000);
		var date = dateObj.getFullYear() + '-' + (dateObj.getMonth() + 1) + '-' + (dateObj.getDate() + 1);
		$.ajax({
			type:'post',
			dataType:'json',
			url:ns.url("shop/stat/getStatData"),
			data : {
				start_time: new Date(date).getTime() / 1000
			},
			success:function(res){
				dealWithChart(res.fenxiao_order_total_money);
			}
		})
	}

	function getFenixaoMmeber(){
		$.ajax({
			type:'post',
			dataType:'json',
			url:ns.url("shop/stat/getStatData"),
			success:function(res){
				dealWithChartTo(res.add_fenxiao_member_count);
			}
		})
	}

	function dealWithChart(ten_day_json){
		var data = [getDay(-14), getDay(-13), getDay(-12), getDay(-11), getDay(-10), getDay(-9), getDay(-8), getDay(-7), getDay(-6), getDay(-5), getDay(-4), getDay(-3), getDay(-2), getDay(-1), getDay(0)];
		// 基于准备好的dom，初始化echarts实例
		var baseColor = getComputedStyle(document.documentElement).getPropertyValue('--base-color');
		// 指定图表的配置项和数据

		// 基于准备好的dom，初始化echarts实例
		var moneyChart = echarts.init(document.getElementById('order_money'));

		// 指定图表的配置项和数据
		moneyOption = {
			xAxis: {
				type: 'category',
				data: data
			},
			yAxis: {
				type: 'value'
			},
			grid: {
				top: '8%',
				bottom: '9%',
				left: '5%',
				right: '4%'
			},
			tooltip: {
				trigger: 'axis',
				showContent: true,
				backgroundColor: 'rgba(0, 0, 0, 0.5)',
				padding: [5, 10],
				textStyle: {
					color: '#fff',
					lineHeight: 30,
				},
				formatter: function(params, ticket, callback) {
					return "日期：" + params[0].axisValue + '<br />' + params[0].seriesName + "：" + params[0].value + "元";
				},
			},
			series: [{
				name: ['订单金额'],
				data: ten_day_json,
				type: 'line',
				smooth: true,
				itemStyle: {
					color: baseColor
				},
				areaStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
						offset: 0,
						color: baseColor
					}, {
						offset: 1,
						color: '#fff'
					}])
				}
			}]
		};

		// 使用刚指定的配置项和数据显示图表。
		moneyChart.setOption(moneyOption);
	}

	function getFenxiaoLevel(){
		$.ajax({
			dataType: 'JSON',
			type: 'POST',
			url: ns.url("fenxiao://shop/level/lists"),
			data: {
				page_size: 0,
			},
			success: function(res) {
				var level = res.data.list;
				var echart = echarts.init(document.getElementById('fenxiao_level'));

				// 指定图表的配置项和数据
				var option = {
					tooltip: {
						trigger: 'item',
						formatter: '{a} <br/>{b}: {c} ({d}%)'
					},
					legend: {
						orient: 'vertical',
						left: '50%',
						top: '10%',
						align: 'auto',
						data: level.map(function (item) {
							return {
								name: item.level_name,
								icon: 'circle',
							}
						})
					},
					color: level.map(function (item) {
						return getRandomColor();
					}),
					series: [{
						width: 150,
						height: 150,
						top: '0',
						left: '10%',
						name: '',
						type: 'pie',
						radius: ['50%', '70%'],
						avoidLabelOverlap: false,
						label: {
							show: false,
							position: 'center'
						},
						emphasis: {
							label: {
								show: true,
								fontSize: '12',
								color: baseColor
							}
						},
						labelLine: {
							show: false
						},
						data: level.map(function (item) {
							return {
								value: item.fenxiao_num,
								name: item.level_name,
								tooltip: {
									trigger: 'item',
									backgroundColor: 'rgba(255, 255, 255, 0.7)',
									borderColor: '#999',
									borderWidth: 1,
									padding: 10,
									textStyle: {
										fontSize: 12,
										color: '#333'
									}
								}
							}
						})
					}]
				};
				// 使用刚指定的配置项和数据显示图表。
				echart.setOption(option);
			}
		})
	}

	function getRandomColor(){
		return  '#' + (function(color){
			return (color +=  '0123456789abcdef'[Math.floor(Math.random()*16)])
			&& (color.length == 6) ?  color : arguments.callee(color);
		})('');
	}

	function dealWithChartTo(ten_day_json){
		var data = [getDay(-6), getDay(-5), getDay(-4), getDay(-3), getDay(-2), getDay(-1), getDay(0)];
		// 基于准备好的dom，初始化echarts实例
		var baseColor = getComputedStyle(document.documentElement).getPropertyValue('--base-color');
		// 指定图表的配置项和数据

		// 基于准备好的dom，初始化echarts实例
		var moneyChart = echarts.init(document.getElementById('fenxiao_member'));

		// 指定图表的配置项和数据
		moneyOption = {
			xAxis: {
				type: 'category',
				data: data
			},
			yAxis: {
				type: 'value'
			},
			grid: {
				top: '8%',
				bottom: '9%',
				left: '8%',
				right: '4%'
			},
			tooltip: {
				trigger: 'axis',
				showContent: true,
				backgroundColor: 'rgba(0, 0, 0, 0.5)',
				padding: [5, 10],
				textStyle: {
					color: '#fff',
					lineHeight: 30,
				},
				formatter: function(params, ticket, callback) {
					return "日期：" + params[0].axisValue + '<br />' + params[0].seriesName + "：" + params[0].value + "人";
				},
			},
			series: [{
				name: ['新增分销商数'],
				data: ten_day_json,
				type: 'line',
				smooth: true,
				itemStyle: {
					color: baseColor
				},
				areaStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
						offset: 0,
						color: baseColor
					}, {
						offset: 1,
						color: '#fff'
					}])
				}
			}]
		};

		// 使用刚指定的配置项和数据显示图表。
		moneyChart.setOption(moneyOption);
	}
</script>
{/block}