tp3_activity/Application/Admin/View/Default/Statistic/Index.html

<!-- header start -->
<include file="Public/Header" />
<style>
	.yearset{display: inline-block;}
	.monthset{display: inline-block;}
	.dayset{display: inline-block;}
	.datebb{padding: 0.4rem 0;}
</style>
<!-- header end -->
<!-- right content start  -->
<div style="border-bottom: 0.1rem solid #ddd;margin-bottom: 2rem ;">
	<b>新增设备用户：</b>
</div>
<div class="am-g">
	<form class="am-form view-list mybform" name="mybform" action="{{:U('Admin/Statistic/Index')}}" method="POST">
		<div style="display: inline-block;margin-left: 5rem;">
			<select name="type" style="display: inline-block;width: 10rem;margin-right: 1rem;">
					<option value="-1">请选择</option>
					<option value="1" <if condition="isset($type) and $type eq 1">selected</if> >日走势</option>
					<option value="2" <if condition="isset($type) and $type eq 2">selected</if> >月走势</option>
					<option value="3" <if condition="isset($type) and $type eq 3">selected</if> >年走势</option>
			</select>	
		</div>
		<div style="width:500px;display: inline-block;">
			<label>时间：</label>
			<input name="time" class="datebb"  value="{{$time}}" autocomplete="off" style="width:12rem;border-left: 0.1rem solid;" />
		</div>
	<button type="submit" class="am-btn am-btn-secondary am-btn-sm am-radius form-submit" style="display: inline-block;position: absolute;top:4rem;left: 45rem;">查询</button>
	</form>
	</div>
<div id="container" style="width: 1200px; height: 400px; margin: 2rem 5rem 5rem 5rem;"></div>
<div>
	<div>
		<button class="watch_list">查看列表</button>
	</div>
	<div class="data_list">
		<table class="am-table am-table-striped am-table-hover am-text-middle m-t-10">
			<thead>
				<tr>
					<th>序号</th>
					<th class="am-hide-sm-only">平台</th>
					<th>用户ID(设备id)</th>
					<th class="am-hide-sm-only">手机号</th>
					<th class="am-hide-sm-only">会员到期时间</th>
					<th class="am-hide-sm-only">最后登录时间</th>
					<th class="am-hide-sm-only">创建时间</th>
					<th>{{:L('common_operation_name')}}</th>
				</tr>
			</thead>
			<tbody>
				<if condition="!empty($List)">
					<foreach name="List" item="v">
						<tr id="data-list-{{$v.id}}">
							<td class="am-hide-sm-only">{{$key+1}}</td>
							<td class="am-hide-sm-only">{{$v.user_origin}}</td>
							<td class="am-hide-sm-only">{{$v.uid}}</td>
							<td class="am-hide-sm-only">{{$v.phone}}</td>
							<td class="am-hide-sm-only">{{$v.member_time}}</td>
							<td class="am-hide-sm-only">{{$v.last_login_at}}</td>
							<td class="am-hide-sm-only">{{$v.created_at}}</td>
							<td class="view-operation">
								<button class="am-btn am-btn-default am-btn-xs am-radius am-icon-trash-o submit-delete" data-url="{{:U('Admin/User/Delete')}}" data-am-popover="{content: '{{:L('common_operation_delete')}}', trigger: 'hover focus'}" data-id="{{$v.user_id}}"></button>
							</td>
						</tr>
					</foreach>
				<else />
					<tr><td colspan="10" class="table-no">{{:L('common_not_data_tips')}}</td></tr>
				</if>
			</tbody>
		</table>
		<!-- list end -->

		<!-- page start -->
		<div id="pages" class="p">{{$page}}</div>
	</div>
</div>
<script src="__PUBLIC__/Admin/Default/Js/lyz.calendar.min.js" type="text/javascript"></script>
<script type="text/javascript">
			data_list(2);
			$('.watch_list').click(function(){
			var value = $('.watch_list').attr('data');
			data_list(value);
			});
			var chart;
			$(document).ready(function() {
				chart = new Highcharts.Chart({
					chart: {
						renderTo: 'container',
						defaultSeriesType: 'line',
						marginRight: 130,
						marginBottom: 25
					},
					
					title: {//标题
						text: '新增设备用户',
						x: -20 //center
					},
//					subtitle: {//副标题
//						text: 'Source: WorldClimate.com',
//						x: -20
//					},
					xAxis: {//x轴
						categories: [<volist name="user_data" id="vo">'{{$vo.time}}',</volist>]
					},
					yAxis: {//y轴项
						title: {
							text: '新增数量'
						},
						plotLines: [{
							value: 0,
							width: 1,
							color: '#808080'
						}]
					},
					tooltip: {//鼠标移动位置提示
						formatter: function() {
				                return '<b>'+ this.series.name +'</b><br/>'+
                               this.x +'<br/>'+ 
                                Highcharts.numberFormat(this.y,0)+'人';
						}
					},
					legend: {//设置图表向右对齐
						layout: 'vertical',
						align: 'right',
						verticalAlign: 'top',
						x: -10,
						y: 100,
						borderWidth: 0
					},
					series: [{//数据
						name:'新增设备用户',
						data:[<volist name="user_data" id="vo">{{$vo.total}},</volist>]
					}]
				});
				
			});
		$("select[name='type']").change(function(){
			var type = $(this).val();
			if(type ==2 || type ==3){
				$(".yearset").css('display','inline-block');
				$(".monthset").css('display','none');
			}else{
				$(".yearset").css('display','inline-block');
				$(".monthset").css('display','inline-block');
			}
		});
		function check(obj){
			$('.checksearch li').removeClass('checkin');
			$(obj).addClass('checkin');
		}
		function data_list($value){
			if($value == 1){//列表展示
				$('.data_list').css('display','block');
				$('.watch_list').attr('data','2');
				$('.watch_list').text('隐藏列表');
			}else{
				$('.data_list').css('display','none');
				$('.watch_list').attr('data','1');
				$('.watch_list').text('显示列表');
			}
		}
</script>
<!-- right content end  -->
<script>
	jeDate("input[name=time]",{
		//onClose:false,
		format: "YYYY-MM-DD"
	});
</script>
<!-- footer start -->
<include file="Public/Footer" />
<!-- footer end