forest
/
forest-traced-UI


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507
							<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>用户分析</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" type="text/css" href="../../layui/css/layui.css" />
	<link rel="stylesheet" type="text/css" href="../../css/common.css" />
	<script src="echarts.simple.min.js"></script>
	<style type="text/css">
		body {
			font-family: 'Microsoft YaHei';
		}

		.my-head {
			border: 1px solid #e9e9e9;
			background-color: #fafafa;
			color: #000000d8;
		}

		.mybox {
			border-right: 1px solid #e9e9e9;
			margin-right: 10px;
			text-align: center;
			font-size: 16px;
			margin: 10px 0;
		}

		.mybox h2 {
			margin-bottom: 15px;
			font-weight: bold;
		}

		.no-border {
			border: none;
		}

		.margin-top {
			margin-top: 10px;
		}

		.text-right {
			text-align: right;
		}

		.my-btn {
			margin: 10px;
		}

		.my-head-1 {
			border-bottom: 1px solid #e9e9e9;
			padding-bottom: 10px;
		}

		.my-title {
			line-height: 100%;
			font-size: 16px;
			padding-top: 10px;
			color: #3398db;
		}

		.text-center {
			text-align: center;
		}

		.article-title {
			margin: 30px 0 5px 15px;
		}

		.article-content {
			padding-top: 5px;
			padding-left: 45px;
		}
	</style>
</head>

<body class="childrenBody">
	<div class="layui-fluid">
		<div class="layui-card">
			<div class="layui-tab layui-tab-brief">
				<ul class="layui-tab-title">
					<li class="layui-this">用户统计</li>
					<li>评价明细</li>
					<!-- <li>用户属性</li> -->
					<!-- <li>扫描分析</li> -->
				</ul>
				<div class="layui-tab-content">
					<div class="layui-tab-item layui-show">
						<div class="layui-card">
							<div class="layui-card-header my-head">昨日关键指标：</div>
							<div class="layui-card-body">
								<div class="layui-row">
									<div class="layui-col-md6">
										<div class="mybox">
											<h2>新扫码人数：</h2>
											<div id="newScanNum">0</div>
										</div>
									</div>
									<div class="layui-col-md6">
										<div class="mybox no-border">
											<h2>累计扫码人数：</h2>
											<div id="sacanNumTotla">0</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="layui-card-header my-head">趋势统计：</div>
						<div class="layui-row margin-top my-head-1">
							<div class="layui-col-md4">
								<h2 class="my-title">扫描人数</h2>
							</div>
							<div class="layui-col-md8 text-right">
								<!-- <a href="javascript:;" class="my-btn">今日</a>
									<a href="javascript:;" class="my-btn">本周</a>
									<a href="javascript:;" class="my-btn">本月</a>
									<a href="javascript:;" class="my-btn">全年</a>
									<div class="layui-inline">
										<input type="text" class="layui-input " AUTOCOMPLETE="off" id="timeStart" />
										<i class="layui-icon layui-icon-date" style="font-size: 22px; "></i>
									</div>
									~
									<div class="layui-inline">
										<input type="text" class="layui-input " AUTOCOMPLETE="off" id="timeEnd" />
									</div> -->
							</div>
						</div>

						<div id="mapContainer" style="width: 100%;height:400px;"></div>
					</div>
					<div class="layui-tab-item ">
						<form class="layui-form" action="">
							<div class="layui-input-inline">
								<div class="layui-input-inline">
									<input class="layui-input" placeholder="产品名称/用户名称/商品批次" style="margin-right: 15px;" type="text"
										name="condStr" />
								</div>
							</div>
							<div class="layui-input-inline">
								<div class="layui-input-inline">
									<select id="select2"></select>
								</div>
							</div>
							<div class="layui-input-inline">
								<div class="layui-input-inline">
									<input class="layui-input" placeholder="评价时间" style="margin-right: 15px;" type="text" name="beginTime"
										id="appraiseTime" />
								</div>
							</div>
							<div class="layui-input-inline">
								<div class="layui-input-inline">
									<input class="layui-input" placeholder="评价内容" style="margin-right: 15px;" type="text"
										name="commentVal" />
								</div>
							</div>
							<button type="button" class="layui-btn" lay-submit lay-filter='commentInfoS'>搜索</button>
						</form>
						<table class="layui-hide" id="commentInfo" lay-filter="commentInfo"></table>
					</div>

					<div class="layui-tab-item ">
						<div class="layui-card">
							<div class="layui-card-header my-head">用户属性：</div>
							<div class="layui-card-body">
								<h3 class="article-title">
									<i class="layui-icon layui-icon-rate-solid" style="font-size: 16px; color: #44b549;"></i>
									申请条件
								</h3>
								<p class="article-content">
									<span class="layui-badge-dot layui-bg-gray"></span>
									测试3月21日14时许，江苏盐城市响水陈家港天嘉宜化工厂（生产农药）发生爆炸！此前中国地震台网通报称，14时48分44秒在江苏连云港市灌南县(疑爆)（北纬34.33度，东经119.73度）发生2.2级地震，震源深度0千米。
								</p>

								<h3 class="article-title">
									<i class="layui-icon layui-icon-friends" style="font-size: 16px; color: #7cbae5;"></i>
									申请条件
								</h3>
								<p class="article-content">
									<span class="layui-badge-dot layui-bg-gray"></span>
									封面新闻记者随后联系到现场的民众张先生。他说，当时他所在的位置位于连云港市灌南县堆沟港镇海中洲船厂，“爆炸时，都跟地震差不多了，声音很大。”他告诉记者，他当时坐在车上，车还跳动了一下。灌河北边的灌南居民区及学校窗玻璃被震碎无数。
								</p>
								<p class="article-content">
									<span class="layui-badge-dot layui-bg-gray"></span>
									3月21日14时许，江苏盐城市响水陈家港天嘉宜化工厂（生产农药）发生爆炸！此前中国地震台网通报称，14时48分44秒在江苏连云港市灌南县(疑爆)（北纬34.33度，东经119.73度）发生2.2级地震，震源深度0千米。
								</p>

								<h3 class="article-title">
									<i class="layui-icon layui-icon-template-1" style="font-size: 16px; color: #f86161;"></i>
									申请条件
								</h3>
								<p class="article-content">
									<span class="layui-badge-dot layui-bg-gray"></span>
									3月21日14时许，江苏盐城市响水陈家港天嘉宜化工厂（生产农药）发生爆炸！此前中国地震台网通报称，14时48分44秒在江苏连云港市灌南县(疑爆)（北纬34.33度，东经119.73度）发生2.2级地震，震源深度0千米。
								</p>
								<div class="text-center " style="margin: 50px 0 20px 0;">
									<a href="http://www.layui.com" class="layui-btn layui-btn-normal">去开通</a>
								</div>
							</div>
						</div>

					</div>
					<div class="layui-tab-item">
						<div class="layui-card">
							<div class="layui-card-header my-head">扫描明细：</div>
							<div class="layui-card-body">
								<h3 class="article-title">
									<i class="layui-icon layui-icon-rate-solid" style="font-size: 16px; color: #44b549;"></i>
									申请条件33
								</h3>
								<p class="article-content">
									<span class="layui-badge-dot layui-bg-gray"></span>
									测试3月21日14时许，江苏盐城市响水陈家港天嘉宜化工厂（生产农药）发生爆炸！此前中国地震台网通报称，14时48分44秒在江苏连云港市灌南县(疑爆)（北纬34.33度，东经119.73度）发生2.2级地震，震源深度0千米。
								</p>

								<h3 class="article-title">
									<i class="layui-icon layui-icon-friends" style="font-size: 16px; color: #7cbae5;"></i>
									申请条件
								</h3>
								<p class="article-content">
									<span class="layui-badge-dot layui-bg-gray"></span>
									3月21日14时许，江苏盐城市响水陈家港天嘉宜化工厂（生产农药）发生爆炸！此前中国地震台网通报称，14时48分44秒在江苏连云港市灌南县(疑爆)（北纬34.33度，东经119.73度）发生2.2级地震，震源深度0千米。
								</p>

								<h3 class="article-title">
									<i class="layui-icon layui-icon-template-1" style="font-size: 16px; color: #f86161;"></i>
									申请条件2
								</h3>
								<p class="article-content">
									<span class="layui-badge-dot layui-bg-gray"></span>
									3月21日14时许，江苏盐城市响水陈家港天嘉宜化工厂（生产农药）发生爆炸！此前中国地震台网通报称，14时48分44秒在江苏连云港市灌南县(疑爆)（北纬34.33度，东经119.73度）发生2.2级地震，震源深度0千米。
								</p>
								<div class="text-center " style="margin: 50px 0 20px 0;">
									<a href="http://www.layui.com" class="layui-btn layui-btn-normal">去开通</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

	</div>
	<script type="text/javascript">
		function loadJS(url) {
			document.write("<script src='" + url + "?ver=" + new Date().getTime() + "'><\/script>")
		}
		loadJS("../../layui/layui.js");
		loadJS("../../js/ajaxhook.min.js");
		loadJS("../../js/config.js");
	</script>
	<script>


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

		// 指定图表的配置项和数据
		var option = {
			color: ['#3398DB'],
			tooltip: {
				trigger: 'axis',
				axisPointer: { // 坐标轴指示器，坐标轴触发有效
					type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
				}
			},
			grid: {
				left: '3%',
				right: '4%',
				bottom: '3%',
				containLabel: true
			},
			xAxis: [{
				type: 'category',
				data: [],
				axisTick: {
					alignWithLabel: true
				}
			}],
			yAxis: [{
				type: 'value'
			}],
			series: [{
				name: '直接访问',
				type: 'bar',
				barWidth: '60%',
				data: []
			}]
		};


		//注意：选项卡 依赖 element 模块，否则无法进行功能性操作
		layui.use(['element', 'laydate', 'form', 'table', 'laytpl', 'jquery', 'layer'], function () {
			var element = layui.element;
			var laydate = layui.laydate,
				form = layui.form,
				table = layui.table,
				laytpl = layui.laytpl,
				$ = layui.jquery;
			//获取文字统计信息
			$.ajax({
				url: "query_listTotal",
				method: 'post',
				contentType: "application/json",
				data: JSON.stringify({}),
				success: function (res) {
					$("#newScanNum").text(res.data[0].newScanNum === null ? 0 : res.data[0].newScanNum)
					$("#sacanNumTotla").text(res.data[0].scanNum === null ? 0 : res.data[0].scanNum)
				}
			});

			var echartLable = [];
			var echartValue = [];
			//获取图标统计数据
			$.ajax({
				url: "qurey_echartTotal",
				method: 'post',
				contentType: "application/json",
				data: JSON.stringify({}),
				success: function (res) {
					let data = res.data;
					for (let i = 0; i < data.length; i++) {
						echartLable.push(data[i].date + '月')
						echartValue.push(data[i].num)
					}
					option.xAxis[0].data = echartLable;
					option.series[0].data = echartValue;
					// 回显图表
					myChart.setOption(option);
				}
			});

			// console.log(option.xAxis[0].data)
			// console.log(option.series[0].data)

			laydate.render({
				elem: '#timeStart',
				value: '2019-03-1'
			});
			laydate.render({
				elem: '#timeEnd',
				value: '2019-03-21'
			});


			//下拉框模板
			function selectTpl(obj) {
				let fun = function () {
					obj.data.unshift({
						value: '',
						name: obj.title
					});
					laytpl(
						`
							{{# layui.each(d,function(i,item){ }}
								<option value="{{item.value}}">{{item.name}}</option>
							{{# })}}
						`
					).render(obj.data, function (html) {
						$(obj.elem).html(html);
						$(obj.elem).attr('name', obj.name);
						form.render('select');
					});
				}
				if (obj.url) {
					$.ajax({
						url: obj.url,
						success: function (res) {
							obj.data = res.data;
							fun();
						}
					});
				} else if (obj.data) {
					fun()
				}
			}
			//星级下拉
			selectTpl({
				title: '选择星级',
				elem: '#select2',
				name: 'gradeStar',
				data: [{
					name: "1级",
					value: 1
				}, {
					name: "2级",
					value: 2
				}, {
					name: "3级",
					value: 3
				}, {
					name: "4级",
					value: 4
				}, {
					name: "5级",
					value: 5
				}]
			});
			//时间
			laydate.render({
				elem: '#appraiseTime',
				type: 'datetime'
			});
			//列表
			table.render({
				id: 'commentInfo',
				elem: '#commentInfo',
				url: "select_searchByPage",
				method: 'post',
				contentType: 'application/json',
				request: {
					pageName: 'pageNum',
					limitName: 'pageSize'
				},
				toolbar: `<div>
						<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
					</div>`,
				cols: [
					[{
						type: 'checkbox',
						fixed: 'left'
					}, {
						field: 'tracedUserName',
						title: '评价用户',
						align: 'center'
					}, {
						field: 'goodsName',
						title: '评价产品',
						align: 'center'
					}, {
						field: 'goodsBatchNo',
						title: '产品批次',
						align: 'center'
					}, {
						field: 'gradeLevel',
						title: '满意度星级',
						align: 'center'
					}, {
						field: 'commentVal',
						title: '评论内容',
						align: 'center'
					}, {
						field: 'createTime',
						title: '评论时间',
						align: 'center'
					}]
				],
				page: true
			});
			//搜索
			form.on('submit(commentInfoS)', function (data) {
				console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
				console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
				console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
				table.reload('commentInfo', {
					where: data.field
				});
				return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
			});
			//监听事件
			table.on('toolbar(commentInfo)', function (obj) {
				var checkStatus = table.checkStatus(obj.config.id);
				let data = checkStatus.data;
				data = data.map(function (i) {
					return i.guid
				});
				console.log(this);
				if (data.length) {
					layer.alert('确定要删除吗？', {
						time: 0,
						btn: ['确定', '取消'],
						yes: function (index) {
							layer.close(index);
							switch (obj.event) {
								case 'del':
									$.ajax({
										type: 'post',
										url: "del_feedback",
										data: JSON.stringify({
											pkList: data
										}),
										contentType: 'application/json',
										success: function (res) {
											table.reload('commentInfo', {});
										}
									});
									break;
							};
						}
					});

				} else {
					layui.layer.tips('请勾选要删除的行', this);
				}

			});
		});
	</script>
</body>

</html>