From 3a870ed8e221292cb0ad483d888b9cf1789ba8fa Mon Sep 17 00:00:00 2001
From: shijing <sj_mzw@163.com>
Date: Wed, 9 Nov 2022 09:36:08 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9C=B0=E5=9B=BE=E8=B5=84=E6=BA=90=E6=8C=89?=
 =?UTF-8?q?=E9=9C=80=E5=8A=A0=E8=BD=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html             |   2 +-
 src/views/bigScreen/index.vue | 407 ++++++++++++++++++----------------
 2 files changed, 220 insertions(+), 189 deletions(-)

diff --git a/public/index.html b/public/index.html
index 75060966..3eda4202 100644
--- a/public/index.html
+++ b/public/index.html
@@ -6,7 +6,7 @@
 		<meta name="viewport" content="width=device-width,initial-scale=1.0">
 		<link rel="icon" href="<%= BASE_URL %>favicon.ico">
 		<title><%= VUE_APP_TITLE %></title>
-		<script src="./jsmap/jsmap.js"> </script>
+		<!-- <script src="./jsmap/jsmap.js"> </script> -->
 		<link type="text/css" href="./jsmap/jsmap.css" rel="stylesheet"/>
 		<script type="text/javascript">
 			document.write("<script src='config.js?"+new Date().getTime()+"'><\/script>");
diff --git a/src/views/bigScreen/index.vue b/src/views/bigScreen/index.vue
index b234874a..a88b72fd 100644
--- a/src/views/bigScreen/index.vue
+++ b/src/views/bigScreen/index.vue
@@ -793,198 +793,206 @@ export default {
 		that.timerTime = setInterval(() => {
 			that.showTime();
 		}, 1000);
-		window.map = new jsmap.JSMap({
-			mapType: jsmap.JSMapType.MAP_3D,
-			container: 'mapContainer',
-			mapServerURL: 'data/map',
-			enableShadows: false, //是否开启阴影 默认false
-			enableLighting: false, //是否开发光照 默认false
-			showBuildingMarker: true,
-			// showNavigationDisplay: true,
-			mapScaleLevelRange: [16, 23],//比例尺级别范围， 16级到23级,默认[1,24]
-			floorControlOptions: {
-				floorHeight: 20,//楼层间距
-				position: jsmap.JSControlPosition.RIGHT_TOP,//控件位置
-				offset: {
-					x: 50,
-					y: 200,
-				}//控件偏移位置
-			},
-			imageryProvider: jsmap.JSImageryProviderType.IMAGE_TDT,
-			backgroundColor: '#3798ff',  //背景颜色
-			viewOptions: {
-				//屏幕中心坐标
-				center: { x: 114.63059258861512, y: 38.81407163905287, z: 1 },
-				// center: {x:120,y:30,z:10},
-				//相机距屏幕中心点距离（单位m）
-				distance: 550,
-				// 旋转角（单位°）
-				rotate: 0,
-				//倾斜角（单位°）
-				tilt: 45,
-			}
-		});
-		window.map.openMapById('0000');
-		window.map.on('loadComplete', e => {
-			that.riskMaskerLayers();//风险区域
-			that.userMaskerLayers();//人员
-			that.cameraMaskerLayers();//摄像头
-			that.domMarkerLayers();//监控视频
-			that.polygonMarkerLayers();//危险作业
-			that.speakersMaskerLayers();//喇叭
-			// that.jobDomMarkerLayers();//危险作业图片
-			that.areaMarkerLayers();//危险作业图片
-			let compassControl = new jsmap.JSCompassControl({
-				position: jsmap.JSControlPosition.LEFT_TOP,
-				offset: {
-					x: 420,
-					y: 50
+		debugger;
+		console.log( window.location.host);
+		let host = window.location.host;
+		let jsUrl = host.indexOf('localhost')>-1?'/http://222.222.144.147:6013/jsmap/jsmap.js':host+'/jsmap/jsmap.js';
+		that.loadScript('mapId', 'http://222.222.144.147:6013/jsmap/jsmap.js', () => {
+			debugger;
+			window.map = new jsmap.JSMap({
+				mapType: jsmap.JSMapType.MAP_3D,
+				container: 'mapContainer',
+				mapServerURL: 'data/map',
+				enableShadows: false, //是否开启阴影 默认false
+				enableLighting: false, //是否开发光照 默认false
+				showBuildingMarker: true,
+				// showNavigationDisplay: true,
+				mapScaleLevelRange: [16, 23],//比例尺级别范围， 16级到23级,默认[1,24]
+				floorControlOptions: {
+					floorHeight: 20,//楼层间距
+					position: jsmap.JSControlPosition.RIGHT_TOP,//控件位置
+					offset: {
+						x: 50,
+						y: 200,
+					}//控件偏移位置
+				},
+				imageryProvider: jsmap.JSImageryProviderType.IMAGE_TDT,
+				backgroundColor: '#3798ff',  //背景颜色
+				viewOptions: {
+					//屏幕中心坐标
+					center: { x: 114.63059258861512, y: 38.81407163905287, z: 1 },
+					// center: {x:120,y:30,z:10},
+					//相机距屏幕中心点距离（单位m）
+					distance: 550,
+					// 旋转角（单位°）
+					rotate: 0,
+					//倾斜角（单位°）
+					tilt: 45,
 				}
 			});
-			window.map.addControl(compassControl);
-			let zoomControl = new jsmap.JSZoomControl({
-				position: jsmap.JSControlPosition.LEFT_TOP,
-				offset: {
-					x: 450,
-					y: 5
-				}
-			});
-			window.map.addControl(zoomControl);
-		});
-		window.map.on('mapClickNode', event => {
-			let item = event;
-			let that = this;
-			let type = event.nodeType.toString();
-			console.log(type === 'Symbol(icontextmaker)');
-			if (item.markers.length > 0) {
-				if (type === 'Symbol(boxmarker)') {
-					let areaId = item.properties.get("areaId");
-					console.log(areaId);
-					that.$API.am.area.item.req(areaId).then(res=>{
-						that.areaItemDetail = res;
-						that.screenJob = false;
-						that.screenWarning = false;
-						that.screenRisk = true;
-					})
-					//风险区域
-				} else if (type === 'Symbol(icontextmaker)') {
-					//摄像头和人员
-					if (document.getElementById(item.markers[0].id) === null) {
-						if (item.markers[0].image === "/img/camera.svg") {
-							//摄像头
-							this.params.json.data.channelId = item.markers[0].id;
-							let domMarker = new jsmap.JSDomMarker({
-								id: item.markers[0].id + 'mark',
-								position: new jsmap.JSPoint(item.markers[0].position.x, item.markers[0].position.y, 0),
-								floorId: 1,
-								depthTest: true,
-								content: `<div id="` + item.markers[0].id + `" style="display: block;position:absolute;z-index: 10;top: 0;background: rgba(24,36,51,.7);padding: 0 16px 16px;box-sizing: border-box" id="vchannelWrap"></div>`,
-								offset: jsmap.JSControlPosition.RIGHT_CENTER,
-								displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),
-								marginOffset: {
-									x: 30,
-									y: -50
-								},
-								properties: {
-									type: 0,
-								},
-								callback: (node) => {
-									console.log(node);
-								}
-							});
-							this.domMarkerLayer.addMarker(domMarker);
-							var otest = document.getElementById(item.markers[0].id);
-							// 创建一个新dom,并设置icon，绑定点击事件
-							let newEle = document.createElement("div");
-							newEle.className = "v_title";
-							newEle.setAttribute("style", "display:flex;justify-content: space-between;padding:10px 0");
-							let title = document.createElement("div");
-							title.innerText = "实时监控";
-							newEle.style.color = "#ffffff";
-							let close = document.createElement("div");
-							close.className = "v_close";
-							close.setAttribute("style", "width: 16px;height: 16px;background: url(/img/close.png) no-repeat;background-size: 100% 100%;");
-							newEle.appendChild(title);
-							newEle.appendChild(close);
-							let newEle2 = document.createElement("video");
-							newEle2.id = item.markers[0].id + 'videoPlayer';
-							newEle2.setAttribute("style", "width: 327px;height:183px;background:url('/img/v_mask.png') no-repeat;background-size: 100% 100%;");
-							// 在对应dom 下追加创建的dom
-							otest.appendChild(newEle);
-							otest.appendChild(newEle2);
-							newEle2.onclick = () => {
-								newEle2.setAttribute("style", "width: 327px;height:183px;background:url(/img/rotate_line.png) no-repeat;background-size:60px 60px;background-position:center center;");
-								this.$API.am.video.item.req(this.params).then(res => {
-									console.log(res);
-									this.url = res.url;
-									let URLS = res.url.replace('192.168.10.253',sysConfig.VUE_APP_VIDEOHOST);
-									if (flvjs.isSupported()) {
-										let videoElement = document.getElementById(item.markers[0].id + 'videoPlayer');
-										var mediaDataSource = {
-											type: 'flv',
-											hasAudio:false,
-											hasVideo:true,
-											isLive:false,
-											withCredentials:false,
-											url:URLS
-										};
-										let flvPlayer = flvjs.createPlayer(mediaDataSource, {
-											enableWorker: false,
-											lazyLoadMaxDuration: 3 * 60,
-											seekType: 'range',
-										});
-										flvPlayer.attachMediaElement(videoElement);
-										newEle2.setAttribute("style", "width: 327px;height:183px;background:url(/img/rotate_line.png) no-repeat;background-size:60px 60px;background-position:center center;");
-										flvPlayer.load();
-									}
-								})
-							};
-							close.onclick = () => {
-								let nodeMark = document.getElementById(item.markers[0].id);
-								nodeMark.remove();
-							}
-						} else {
-							//人员
-							that.screenUserItem = item.properties.get("employee");
-							that.screenUser = true;
-							// debugger;
-							window.map.flyToMarker(that.userMarker[that.screenUserItem.mac], {
-								duration: 1000,
-								range: 200
-							})
-						}
+			window.map.openMapById('0000');
+			window.map.on('loadComplete', e => {
+				that.riskMaskerLayers();//风险区域
+				that.userMaskerLayers();//人员
+				that.cameraMaskerLayers();//摄像头
+				that.domMarkerLayers();//监控视频
+				that.polygonMarkerLayers();//危险作业
+				that.speakersMaskerLayers();//喇叭
+				// that.jobDomMarkerLayers();//危险作业图片
+				that.areaMarkerLayers();//危险作业图片
+				let compassControl = new jsmap.JSCompassControl({
+					position: jsmap.JSControlPosition.LEFT_TOP,
+					offset: {
+						x: 420,
+						y: 50
 					}
-				} else if (type === 'Symbol(polygonmarker)') {
-					//危险作业
-					that.screenRisk = false;
-					that.screenWarning = false;
-					that.areaDetailId = item.properties.get("area");
-					let areaWork = that.areaList.filter(area=>{
-						return area.id==that.areaDetailId
-					});
-					
-					that.areaRowClick(areaWork[0]);
+				});
+				window.map.addControl(compassControl);
+				let zoomControl = new jsmap.JSZoomControl({
+					position: jsmap.JSControlPosition.LEFT_TOP,
+					offset: {
+						x: 450,
+						y: 5
+					}
+				});
+				window.map.addControl(zoomControl);
+			});
+			window.map.on('mapClickNode', event => {
+				let item = event;
+				let that = this;
+				let type = event.nodeType.toString();
+				console.log(type === 'Symbol(icontextmaker)');
+				if (item.markers.length > 0) {
+					if (type === 'Symbol(boxmarker)') {
+						let areaId = item.properties.get("areaId");
+						console.log(areaId);
+						that.$API.am.area.item.req(areaId).then(res=>{
+							that.areaItemDetail = res;
+							that.screenJob = false;
+							that.screenWarning = false;
+							that.screenRisk = true;
+						})
+						//风险区域
+					} else if (type === 'Symbol(icontextmaker)') {
+						//摄像头和人员
+						if (document.getElementById(item.markers[0].id) === null) {
+							if (item.markers[0].image === "/img/camera.svg") {
+								//摄像头
+								this.params.json.data.channelId = item.markers[0].id;
+								let domMarker = new jsmap.JSDomMarker({
+									id: item.markers[0].id + 'mark',
+									position: new jsmap.JSPoint(item.markers[0].position.x, item.markers[0].position.y, 0),
+									floorId: 1,
+									depthTest: true,
+									content: `<div id="` + item.markers[0].id + `" style="display: block;position:absolute;z-index: 10;top: 0;background: rgba(24,36,51,.7);padding: 0 16px 16px;box-sizing: border-box" id="vchannelWrap"></div>`,
+									offset: jsmap.JSControlPosition.RIGHT_CENTER,
+									displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),
+									marginOffset: {
+										x: 30,
+										y: -50
+									},
+									properties: {
+										type: 0,
+									},
+									callback: (node) => {
+										console.log(node);
+									}
+								});
+								this.domMarkerLayer.addMarker(domMarker);
+								var otest = document.getElementById(item.markers[0].id);
+								// 创建一个新dom,并设置icon，绑定点击事件
+								let newEle = document.createElement("div");
+								newEle.className = "v_title";
+								newEle.setAttribute("style", "display:flex;justify-content: space-between;padding:10px 0");
+								let title = document.createElement("div");
+								title.innerText = "实时监控";
+								newEle.style.color = "#ffffff";
+								let close = document.createElement("div");
+								close.className = "v_close";
+								close.setAttribute("style", "width: 16px;height: 16px;background: url(/img/close.png) no-repeat;background-size: 100% 100%;");
+								newEle.appendChild(title);
+								newEle.appendChild(close);
+								let newEle2 = document.createElement("video");
+								newEle2.id = item.markers[0].id + 'videoPlayer';
+								newEle2.setAttribute("style", "width: 327px;height:183px;background:url('/img/v_mask.png') no-repeat;background-size: 100% 100%;");
+								// 在对应dom 下追加创建的dom
+								otest.appendChild(newEle);
+								otest.appendChild(newEle2);
+								newEle2.onclick = () => {
+									newEle2.setAttribute("style", "width: 327px;height:183px;background:url(/img/rotate_line.png) no-repeat;background-size:60px 60px;background-position:center center;");
+									this.$API.am.video.item.req(this.params).then(res => {
+										console.log(res);
+										this.url = res.url;
+										let URLS = res.url.replace('192.168.10.253',sysConfig.VUE_APP_VIDEOHOST);
+										if (flvjs.isSupported()) {
+											let videoElement = document.getElementById(item.markers[0].id + 'videoPlayer');
+											var mediaDataSource = {
+												type: 'flv',
+												hasAudio:false,
+												hasVideo:true,
+												isLive:false,
+												withCredentials:false,
+												url:URLS
+											};
+											let flvPlayer = flvjs.createPlayer(mediaDataSource, {
+												enableWorker: false,
+												lazyLoadMaxDuration: 3 * 60,
+												seekType: 'range',
+											});
+											flvPlayer.attachMediaElement(videoElement);
+											newEle2.setAttribute("style", "width: 327px;height:183px;background:url(/img/rotate_line.png) no-repeat;background-size:60px 60px;background-position:center center;");
+											flvPlayer.load();
+										}
+									})
+								};
+								close.onclick = () => {
+									let nodeMark = document.getElementById(item.markers[0].id);
+									nodeMark.remove();
+								}
+							} else {
+								//人员
+								that.screenUserItem = item.properties.get("employee");
+								that.screenUser = true;
+								// debugger;
+								window.map.flyToMarker(that.userMarker[that.screenUserItem.mac], {
+									duration: 1000,
+									range: 200
+								})
+							}
+						}
+					} else if (type === 'Symbol(polygonmarker)') {
+						//危险作业
+						that.screenRisk = false;
+						that.screenWarning = false;
+						that.areaDetailId = item.properties.get("area");
+						let areaWork = that.areaList.filter(area=>{
+							return area.id==that.areaDetailId
+						});
+						
+						that.areaRowClick(areaWork[0]);
+					}
+				} else {
 				}
-			} else {
-			}
-		});
-		//左侧数据统计
-		this.getManCount();//人员统计$$
-		this.getWarnings();//报警统计$$
-		this.getAreaList();//区域/风险区域$$
-		this.getGroup();//部门$$
-		//右上展示数据
-		this.getWarningTotal();//事件统计
-		this.getWarningType();//事件类型
-		let pageHeight = document.getElementsByClassName('screen-cockpit')[0].clientHeight;
-		let height1 = document.getElementsByClassName('cockpit-count')[0].clientHeight;
-		let height2 = document.getElementsByClassName('cockpit-alarm')[0].clientHeight;
-		let height3 = document.getElementsByClassName('area-simple-title')[0].clientHeight;
-		// debugger;
-		let domHeight = pageHeight - height1 - 310 - 84;
-		let areaTableHeight = domHeight - height3 - 50;
-		this.areaTableHeight = areaTableHeight;
-		document.getElementsByClassName('cockpit-info')[0].style.height = domHeight + 'px';
+			});
+			
+		})
+			//左侧数据统计
+			this.getManCount();//人员统计$$
+			this.getWarnings();//报警统计$$
+			this.getAreaList();//区域/风险区域$$
+			this.getGroup();//部门$$
+			//右上展示数据
+			this.getWarningTotal();//事件统计
+			this.getWarningType();//事件类型
+			let pageHeight = document.getElementsByClassName('screen-cockpit')[0].clientHeight;
+			let height1 = document.getElementsByClassName('cockpit-count')[0].clientHeight;
+			let height2 = document.getElementsByClassName('cockpit-alarm')[0].clientHeight;
+			let height3 = document.getElementsByClassName('area-simple-title')[0].clientHeight;
+			// debugger;
+			let domHeight = pageHeight - height1 - 310 - 84;
+			let areaTableHeight = domHeight - height3 - 50;
+			this.areaTableHeight = areaTableHeight;
+			document.getElementsByClassName('cockpit-info')[0].style.height = domHeight + 'px';
 		// document.getElementsByClassName('area-info-body')[0].style.height = simpleBodyHeight + 'px';
 	},
 	computed:{
@@ -1007,6 +1015,29 @@ export default {
 		clearInterval(this.eventAudioTimer)//事件
 	},
 	methods: {
+		loadScript(id, url, callback) {
+			//如果已经存在这个id，则证明已经加载过，已经有这个js文件了，可以直接执行回调里面的操作
+			if (document.querySelector(`#${id}`)) {
+				callback && callback()
+				return;
+			}
+			//第一次加载，先创建 script 标签
+			const script = document.createElement('script');
+			script.src = url;
+			//创建id属性
+			script.setAttribute('id', id);
+			//获取第一个script标签
+			const firstScript = document.getElementsByTagName('script')[0];
+			//获取第一个script标签的父节点 BODY,在body的第一个script引用之前插入，即把这个动态的js文件放在第一个调用
+			firstScript.parentNode.insertBefore(script, firstScript);
+			//script 一加载就执行
+			script.onload = script.onreadystatechange = function() {
+				// 加载完成
+				if (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete') {
+					callback && callback()
+				}
+			};
+		},
 		//查询某个人员
 		searchOne(keyword){
 			let that = this;