.svn/pristine/a5/a5051c61f069654965919cf4dce653726b4268f6.svn-base

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>浏览轨迹</title>
		<link rel="stylesheet" href="./index.css" />
		<link rel="stylesheet" href="./paging.css">
		<style type="text/css">
			.loading {
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				background-color: #fff;
			}
			
			.loading img {
				width: 100px;
				margin: 15% auto;
			}
		</style>
	</head>

	<body>
		<div id="browsingPath"></div>
		<div id="browsingPathData">
			<div class="loading">
				<img src="download_loading.gif" />
			</div>
			<div id="hiddenresult">
				<table cellspacing="0" class="scopeOpen-table">
					<thead>
						<tr>
							<td>邮箱地址</td>
							<td>停留时长</td>
							<td>IP地址</td>
							<td>阅读地区</td>
							<td>阅读设备</td>
						</tr>
					</thead>
					<tbody id="hiddenresult1"></tbody>
				</table>
			</div>
			<div class="box" id="box"></div>
		</div>

		<script src="./jquery-1.11.1.min.js"></script>
		<!--<script src="./paging.js"></script>-->
		<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
		<script src="https://static.bcedocument.com/reader/v2/doc_reader_v2.js"></script>

		<script type="text/javascript">
			//			获取链接中拼接的参数
			var myurl = window.location.href.split('?')[1];
			//
			//			var token = 'eyJhbGciOiJIUzI1NiJ9.eyJqdGkiOiIwNzU1ODg4NDM3MDUiLCJzdWIiOiJ5aXdhaXhpYW8uY29tIiwidXNlcl9pZCI6Mzc4LCJsb2dpbmlkIjoiaW5mbyIsImRvbWFpbiI6IjIxZ21haWwuY29tIiwiY29tcGFueV9pZCI6NywicGFyYW1fbGV2ZWwiOjAsImxvZ3BhdGgiOiJkOlxcbG9nc1xcMjFnbWFpbC5jb20iLCJpYXQiOjE1MzA4NDA5MjgsImV4cCI6MTUzMDg0ODEyOH0.nmw2mGNvBQKkojzq1zC8OtzJKnBdZvJrt68maGb7Pkg'; //decodeURIComponent(myurl.split('&&')[0]);
			//			var mailUid = '20180611151757295378'; //myurl.split('&&')[1];
			//			var trackId = 5; //myurl.split('&&')[2];
			//			var companyId = 7; //parseInt(myurl.split('&&')[3]);
			//var user_id =378;

			var token = decodeURIComponent(myurl.split('&&')[0]);
			var mailUid = myurl.split('&&')[1];
			var trackId = myurl.split('&&')[2];
			var companyId = parseInt(myurl.split('&&')[3]);
			var user_id = myurl.split('&&')[4];
			var docId = myurl.split('&&')[5];

			var leftWidth = document.body.clientWidth - 630,
				currentPageLeft = 1; //左侧当前浏览页
			var totalPage = 1,
				totalRecord = 1,
				currentPage = 1,
				firstType = false;
			var option = {
				docId: docId,
				token: "TOKEN",
				host: "BCEDOC",
				serverHost: 'https://doc.bj.baidubce.com',
				width: leftWidth, // 文档容器宽度
				pn: 1, // 定位到第几页，可选
				ready: function(handler) { // 设置字体大小和颜色, 背景颜色（可设置白天黑夜模式）
					handler.setFontSize(1);
					handler.setBackgroundColor("#000");
					handler.setFontColor("#fff");
				},
				flip: function(data) { // 翻页时回调函数, 可供客户进行统计等
					//模拟获取后台数据对右边数据进行渲染，data.pn是第几页

					//获取当前页信息
					currentPageLeft = data.pn;
					firstType = false;
					getPageMessage(currentPageLeft, 1);

				},
				fontSize: "big",
				toolbarConf: {
					page: true, // 上下翻页箭头图标
					pagenum: true, // 几分之几页
					full: true, // 是否显示全屏图标,点击后全屏
					copy: true, // 是否可以复制文档内容
					position: "center" // 设置 toolbar中翻页和放大图标的位置(值有left/center)
				}
				//文档顶部工具条配置对象,必选
			};

			new Document("browsingPath", option);

			function getPageMessage(pageNumber, currentPage, type) {
				$.ajax({
					type: "post",
					url: "https://tongji.yiwaixiao.com/track_getDocRecords.action",
					data: {
						token: token,
						companyId: companyId,
						mailUid: mailUid,
						trackId: trackId,
						pageNumber: pageNumber,
						currentPage: currentPage,
						userId: user_id
					},
					beforeSend: function() {
						$('.loading').show();
					},
					complete: function() {
						$('.loading').hide();
					},
					//					async: false,
					cache: false,
					success: function(msg) {
						console.log(msg)
						totalPage = msg.responseData.page.totalPage;
						totalRecord = msg.responseData.page.totalRecord;
						currentPage = msg.responseData.page.currentPage;
						go(totalPage, totalRecord, currentPage);
						buildTable(msg.responseData.list);
					}
				});
			}

			function buildTable(msg) {
				var html = "";
				if(msg != '') {
					$.each(msg, function(n, m) {
						var type = '';
						if(m.device_type == 0) {
							type = 'PC设备';
						} else if(m.device_type == 1) {
							type = '手机设备';
						} else if(m.device_type == 2) {
							type = '平板设备';
						} else if(m.device_type == 3) {
							type = '其他设备';
						}

						var newTime = m.access_time + "毫秒";
						if(m.access_time / 3600000 > 1) {
							newTime = (m.access_time / 3600000).toFixed(2) + '小时'
						} else if(m.access_time / 60000 > 1) {
							newTime = (m.access_time / 60000).toFixed(2) + '分钟'
						} else if(m.access_time / 1000 > 1) {
							newTime = (m.access_time / 1000).toFixed(2) + '秒'
						}

						new_device_type = type + m.os + ' ' + m.browser_name;
						new_access = m.country + m.province + m.city;
						html += "<tr class='show'><td><span class='tipWidth' title=" + m.access_email + ">" + m.access_email + "</span></td><td><span class='tipWidth' title=" + m.create_time + ">" + newTime + "</span></td><td><span class='tipWidth' title=" + m.ip + ">" + m.ip + "</span></td><td><span class='tipWidth' title=" + new_access + ">" + new_access + "</span></el-tooltip></td><td><span class='tipWidth' title=" + new_device_type + ">" + new_device_type + "</span></el-tooltip></td></tr>"
					});
				} else {
					html += "<tr class='show'><td colspan='6'><span>暂无数据</span></td></tr>"
				}
				document.getElementById("hiddenresult1").innerHTML = html;
			}

			function go(totalPage, totalRecord, currentPage) {
				//分页插件
				(function(d, c, a) {
					function b(f, e) {
						this.el = f;
						this.options = {
							pageNo: e.initPageNo || 1,
							totalPages: e.totalPages || 1,
							totalCount: e.totalCount || "",
							slideSpeed: e.slideSpeed || 0,
							jump: e.jump || false,
							callback: e.callback || function() {}
						};
						this.init()
					}
					b.prototype = {
						constructor: b,
						init: function() {
							this.createDom();
							this.bindEvents()
						},
						createDom: function() {
							var k = this,
								m = "",
								e = "",
								j = "",
								g = 60,
								h = k.options.totalPages,
								l = 0;
							h > 5 ? l = 5 * g : l = h * g;
							for(var f = 1; f <= k.options.totalPages; f++) {
								f != 1 ? m += "<li>" + f + "</li>" : m += '<li class="sel-page">' + f + "</li>"
							}
							k.options.jump ? e = '<input type="text" placeholder="1" class="jump-text" id="jumpText"><button type="button" class="jump-button" id="jumpBtn">跳转</button>' : e = "";
							j = '<button type="button" id="firstPage" class="turnPage first-page">首页</button>' + '<button class="turnPage" id="prePage">上一页</button>' + '<div class="pageWrap" style="width:' + l + 'px">' + '<ul id="pageSelect" style="transition:all ' + k.options.slideSpeed + 'ms">' + m + "</ul></div>" + '<button class="turnPage" id="nextPage">下一页</button>' + '<button type="button" id="lastPage" class="last-page">尾页</button>' + e + '<p class="total-pages">共&nbsp;' + k.options.totalPages + "&nbsp;页</p>" + '<p class="total-count">' + k.options.totalCount + "</p>";
							k.el.html(j)
						},
						bindEvents: function() {
							var k = this,
								f = d("#pageSelect"),
								r = f.children(),
								n = r[0].offsetWidth,
								l = k.options.totalPages,
								g = k.options.pageNo,
								e = 0,
								o = d("#prePage"),
								m = d("#nextPage"),
								i = d("#firstPage"),
								j = d("#lastPage"),
								q = d("#jumpBtn"),
								h = d("#jumpText");
							o.on("click", function() {
								g--;
								if(g < 1) {
									g = 1
								}
								p(g)
							});
							m.on("click", function() {
								g++;
								if(g > r.length) {
									g = r.length
								}
								p(g)
							});
							i.on("click", function() {
								g = 1;
								p(g)
							});
							j.on("click", function() {
								g = l;
								p(g)
							});
							q.on("click", function() {
								var s = parseInt(h.val().replace(/\D/g, ""));
								if(s && s >= 1 && s <= l) {
									g = s;
									p(g);
									h.val(s)
								}
							});
							r.on("click", function() {
								g = d(this).index() + 1;
								p(g)
							});

							function p(s) {
								r.removeClass("sel-page").eq(s - 1).addClass("sel-page");
								if(l <= 5) {
									k.options.callback(s);
									return false
								}
								if(s >= 3 && s <= l - 2) {
									e = (s - 3) * n
								}
								if(s == 2 || s == 1) {
									e = 0
								}
								if(s > l - 2) {
									e = (l - 5) * n
								}
								f.css("transform", "translateX(" + (-e) + "px)");
								s == 1 ? i.attr("disabled", true) : i.attr("disabled", false);
								s == 1 ? o.attr("disabled", true) : o.attr("disabled", false);
								s == l ? j.attr("disabled", true) : j.attr("disabled", false);
								s == l ? m.attr("disabled", true) : m.attr("disabled", false);
								k.options.callback(s)
							}
							p(k.options.pageNo)
						}
					};
					d.fn.paging = function(e) {
						return new b(d(this), e)
					}
				})(jQuery, window, document);

				$('#box').paging({
					initPageNo: currentPage, // 初始页码
					totalPages: totalPage, //总页数
					totalCount: '合计' + totalRecord + '条', // 条目总数
					slideSpeed: 600, // 缓动速度。单位毫秒
					jump: false, //是否支持跳转
					callback: function(page) { // 回调函数

						if(firstType) {
							firstType = false;
							getPageMessage(currentPageLeft, page);
						} else {
							firstType = true;
						}

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

</html>