dcs
/
realty


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388
							<!DOCTYPE html>
<html dir="ltr" mozdisallowselectionprint moznomarginboxes>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title>PDF</title>
		<link rel="stylesheet" href="../build/reset.css">
		<link rel="resource" type="application/l10n" href="locale/locale.properties">
		<script src="../build/pdf.js"></script>
		<style type="text/css">
			html,
			body,
			.mui-content {
				padding: 0;
				margin: 0;
				height: 100%;
				box-sizing: border-box;
				padding-bottom: 0 !important;
			}

			.mui-content {
				display: flex;
				flex-direction: row;
				overflow: hidden;
			}

			.mui-content .side-menu {
				width: 100px;
				height: 100%;
				overflow-y: auto;
				padding: 10px;
				border-right: 1px solid #e6e6e6;
			}

			.mui-content .side-menu .viewer-image {
				border: 1px solid #e6e6e6;
				background: #fff;
				margin-bottom: 10px;
				border-radius: 5px;
				overflow: hidden;
			}

			.mui-content img {
				width: 100%;
				height: 100%;
			}

			.mui-content .side-menu .viewer-image.active {
				border-color: #4681e9;
			}

			.mui-content .view-box {
				flex: 1;
				width: 0;
				height: 100%;
				overflow-y: auto;
			}

			.mui-content .view-box .page {
				text-align: center;
				display: none;
				position: relative;
				overflow: hidden;
			}

			.mui-content .view-box .page.active {
				display: block;
			}

			.mui-content .view-box .page .seal {
				position: absolute;
				width: 30px;
				height: 30px;
				top: 0;
				left: 0;
				z-index: 2;
			}

			.mui-content .view-box .page .sign {
				position: absolute;
				width: 30px;
				height: 10px;
				top: 0;
				left: 0;
				z-index: 2;
			}

			.btn-box {
				text-align: center;
				margin: 20px 0;
			}

			.btn {
				font-size: 12px;
				padding: 5px 10px;
				border-radius: 5px;
				margin: 0 5px;
			}

			#operation-menu {
				display: none;
			}

			.sure {
				top: 0;
				right: 0;
				padding: 15px;
			}

			/*字体大小*/

			.size-24 {
				font-size: 24px;
			}

			.size-18 {
				font-size: 18px;
			}

			.size-16 {
				font-size: 16px;
			}

			.size-14 {
				font-size: 14px;
			}

			.size-12 {
				font-size: 12px;
			}

			.size-10 {
				font-size: 10px;
			}

			.size-weight {
				font-weight: bold;
			}

			.red-color {
				color: #fd5c54;
			}

			.blue-color {
				color: #5c88ef;
			}

			.gray-color {
				color: #666666;
			}

			.grays-color {
				color: #999999;
			}

			.orange-color {
				color: #f8a722;
			}

			.white-color {
				color: #fff;
			}

			.backgroud-blue {
				background: #5c88ef;
			}

			.backgroud-red {
				background: #fd5c54;
			}

			.backgroud-yellow {
				background: #f8a722;
			}

			.backgroud-qing {
				background: #5cc8b4;
			}

			.backgroud-white {
				background: #fff;
			}

			.displayNone {
				display: none;
			}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<div id="viewer-image" class="side-menu"></div>
			<div class="view-box">
				<div id="viewer"></div>
			</div>
		</div>
		<script type="text/javascript">
			PDFJS.workerSrc = '../build/pdf.worker.js';
			var desiredWidth = document.getElementsByClassName('view-box')[0].clientWidth;
			var pageIndex = 0,
				imgIndex = 0,
				nowIndex = 0,
				moveType, url, positionList = [];

			function getQueryObject(url) {
				url = url == null ? window.location.href : url
				const search = url.substring(url.lastIndexOf('?') + 1)
				const obj = {}
				const reg = /([^?&=]+)=([^?&=]*)/g
				search.replace(reg, (rs, $1, $2) => {
					const name = decodeURIComponent($1)
					let val = decodeURIComponent($2)
					val = String(val)
					obj[name] = val
					return rs
				})
				return obj
			}
			var query = getQueryObject();
			if (query.type == 'look') {
				positionList = window.parent['getPositionList']();
			} else if (query.type == 'update') {
				// document.getElementsByClassName('operation')[0].style.display = 'block';
				positionList = window.parent['getPositionList']();
			} else {
				// document.getElementsByClassName('operation')[0].style.display = 'block';
			}

			function renderPage(page, i) {
				var viewport = page.getViewport(1);
				var scale = (desiredWidth - 20) / viewport.width;
				var scaledViewport = page.getViewport(scale);
				var outputScale = window.devicePixelRatio || 1;
				var canvas = document.getElementById('the-canvas' + pageIndex);
				pageIndex++
				var context = canvas.getContext('2d');
				canvas.width = Math.floor(scaledViewport.width * outputScale);
				canvas.height = Math.floor(scaledViewport.height * outputScale);
				canvas.style.width = Math.floor(scaledViewport.width) + "px";
				canvas.style.height = Math.floor(scaledViewport.height) + "px";

				var transform = outputScale !== 1 ? [outputScale, 0, 0, outputScale, 0, 0] : null;
				var renderContext = {
					canvasContext: context,
					transform: transform,
					viewport: scaledViewport
				};
				page.render(renderContext).then(function() {
					var base64 = canvas.toDataURL('image/jpeg', 0.7);
					var div = document.createElement('div');
					div.className = 'viewer-image';
					div.id = imgIndex;
					div.onclick = function() {
						if (this.className == 'viewer-image active') return;
						document.getElementsByClassName('viewer-image active')[0].classList.remove('active');
						document.getElementsByClassName('page active')[0].classList.remove('active');
						this.classList.add('active');
						document.getElementById('page' + this.id).classList.add('active');
						if (document.getElementById('operation-menu').style.display == 'block') {
							document.getElementById('page' + nowIndex).removeChild($('.move')[0]);
							document.getElementById('select-menu').style.display = 'block';
							document.getElementById('operation-menu').style.display = 'none';
						}
						nowIndex = this.id;
					}
					if (imgIndex == 0) div.className = 'viewer-image active'
					div.innerHTML = '<img src="' + base64 + '">'
					document.getElementById('viewer-image').appendChild(div);

					if (positionList.length > 0) {
						positionList.filter(function(item) {
							return item.nowIndex == imgIndex
						}).forEach(function(item) {
							var div = document.createElement('div');
							div.className = item.moveType;
							div.innerHTML = '<img src="' + item.url + '">'
							div.style.left = item.left + '%';
							div.style.top = item.top + '%';
							document.getElementById('page' + item.nowIndex).appendChild(div);
						})
					}
					imgIndex++
				});
			}

			function createDom(i) {
				var div = document.createElement('div');
				div.className = 'page'
				div.id = 'page' + i;
				div.innerHTML = '<canvas id="the-canvas' + i + '"></canvas>';
				if (i == 0) div.className = 'page active'
				document.getElementById('viewer').appendChild(div);
			}
			PDFJS.getDocument({
				url: query.file
			}).promise.then(function(pdf) {
				for (var i = 0; i < pdf.pdfInfo.numPages; i++) {
					createDom(i);
					pdf.getPage(i + 1).then(renderPage)
				}
			})

			function btn(_self) {
				_self.parentNode.style.display = 'none'
				document.getElementById(_self.getAttribute('name')).style.display = 'block';
				switch (_self.id) {
					case 'seal':
					case 'sign':
						window.parent['signSeal'](_self.id, 'page' + nowIndex);
						break;
					case 'cancel':
						if (!document.getElementsByClassName('move')[0]) return;
						document.getElementById('page' + nowIndex).removeChild(document.getElementsByClassName('move')[0]);
						break;
					case 'sure':
						if (!document.getElementsByClassName('move')[0]) return;
						let obj = {
							left: parseFloat(parseInt(document.getElementsByClassName('move')[0].style.left) / document
								.getElementById('viewer').clientWidth * 100),
							top: top = parseFloat(parseInt(document.getElementsByClassName('move')[0].style.top) / document
								.getElementById('viewer').clientHeight * 100),
							moveType: moveType,
							nowIndex: nowIndex,
							url: url
						}
						if (moveType == 'seal') {
							obj['sealId'] = document.getElementsByClassName('move')[0].getAttribute('sealId');
							obj['recipient'] = document.getElementsByClassName('move')[0].getAttribute('recipient');
							obj['sealIsPass'] = false;
						}
						positionList.push(obj);
						noMove();
						document.getElementsByClassName('move')[0].classList.remove('move');
						break;
					default:
						break;
				}
			}

			function createImage(type, imageUrl, elemId, recipient, sealId) {
				var div = document.createElement('div');
				div.className = type + ' move'
				div.setAttribute('recipient', recipient);
				div.setAttribute('sealId', sealId);
				div.innerHTML = '<img src="' + imageUrl + '">'
				document.getElementById(elemId).appendChild(div);
				moveType = type;
				url = imageUrl;
				move();
			}

			function move() {
				var oBox = document.getElementsByClassName("move")[0];
				oBox.onmousedown = function(ev) {
					var disX = ev.clientX - oBox.offsetLeft;
					var disY = ev.clientY - oBox.offsetTop;
					document.onmousemove = function(ev) {
						var l = ev.clientX - disX;
						var t = ev.clientY - disY;
						oBox.style.left = l + "px";
						oBox.style.top = t + "px";
					};
					document.onmouseup = function() {
						document.onmousemove = null;
					};
					return false; //阻止默认事件的发生       
				};
			}

			function noMove() {
				var oBox = document.getElementsByClassName("move")[0];
				oBox.onmousedown = function(ev) {
					return false
				};
			}

			function sure() {
				return {
					url: query.fileUrl,
					fileId: query.fileId,
					fileName: query.fileName,
					positionList: positionList
				}
			}
		</script>
	</body>
</html>