地图资源按需加载

src/views/am/area.vue

@@ -310,12 +310,43 @@ export default {
       areaPoints:[],
       areaFloorId:1,
       cate_: { post: "岗位", org: "单位", people: "人员" },
+      canUseMap:false,
     };
   },
   mounted() {
+    let that = this;
+    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',jsUrl, () => {
+      that.canUseMap = true;
+    })
     // this.getAccessList();
   },
   methods: {
+    loadScript(id, url, callback) {
+			debugger;
+			//如果已经存在这个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()
+				}
+			};
+		},
     //添加/编辑区域
     handleForm(type, row) {
       this.dialog.save = true;
@@ -358,7 +389,12 @@ export default {
       }
       this.areaId = row.id;
       this.areaName = row.name;
-      this.dialog.saveRail = true;
+      if(this.canUseMap){
+        this.dialog.saveRail = true;
+      }else{
+        this.$message("地图组件加载中，请稍后")
+      }
+      
     },
     //删除区域
     handleDel(row) {

src/views/am/audio.vue

@@ -5,17 +5,6 @@
         <el-button type="primary" icon="el-icon-refresh" @click="syncData" :syncLoading="syncLoading">同步</el-button>
       </div>
       <div class="right-panel">
-        <!-- <el-input
-          v-model="query.code"
-          placeholder="编号"
-          clearable
-          @click="handleQuery"
-        ></el-input>
-        <el-button
-          type="primary"
-          icon="el-icon-search"
-          @click="handleQuery"
-        ></el-button> -->
       </div>
     </el-header>
     <el-main class="nopadding">
@@ -96,11 +85,44 @@ export default {
       channelName: "",
       channelArea: '',
       channelAreas: [],
+      canUseMap:false
     };
   },
+  mounted(){
+    let that = this;
+    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',jsUrl, () => {
+      that.canUseMap = true;
+    })
+  },
   methods: {
+    loadScript(id, url, callback) {
+			debugger;
+			//如果已经存在这个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()
+				}
+			};
+		},
     handlePosition(row) {
-      debugger;
+      // debugger;
       console.log(row)
       if(row.my_info.id&&row.my_info.id!==null){
         this.channelId = row.my_info.id ? row.my_info.id : null;
@@ -108,7 +130,11 @@ export default {
         this.channelAreas = row.my_info.areas ? row.my_info.areas : [];
         this.channelLocation = row.my_info.location ? row.my_info.location : {};
         this.channelName = row.name;
-        this.dialogSave = true;
+        if(this.canUseMap){
+          this.dialogSave = true;
+        }else{
+          this.$message("地图组件加载中，请稍后")
+        }
       }else{
         this.$message.error("请先完成设备同步");
       }

src/views/am/monitor.vue

@@ -148,6 +148,7 @@ export default {
         2: "球机",
         3: "半球",
       },
+      canUseMap:false,
     };
   },
   created() {
@@ -159,8 +160,38 @@ export default {
   },
   mounted(){
     this.getArea();
+    let that = this;
+    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',jsUrl, () => {
+      that.canUseMap = true;
+    })
   },
   methods: {
+    loadScript(id, url, callback) {
+			debugger;
+			//如果已经存在这个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()
+				}
+			};
+		},
     getAllVchannel(){
       debugger;
       this.$API.am.video.list.req({pageSize:999}).then(res=>{
@@ -208,7 +239,12 @@ export default {
         this.channelAreas = row.my_info.areas ? row.my_info.areas : [];
         this.channelLocation = row.my_info.location ? row.my_info.location : {};
         this.channelName = row.channelName;
-        this.dialogSave = true;
+        if(this.canUseMap){
+          this.dialogSave = true;
+        }else{
+          this.$message("地图组件加载中，请稍后")
+        }
+       
       }else{
         this.$message.error("请先完成设备同步");
       }

src/views/bigScreen/index.vue

@@ -793,11 +793,9 @@ export default {
 		that.timerTime = setInterval(() => {
 			that.showTime();
 		}, 1000);
-		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';
+		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', () => {
+		that.loadScript('mapId',jsUrl, () => {
 			debugger;
 			window.map = new jsmap.JSMap({
 				mapType: jsmap.JSMapType.MAP_3D,
@@ -1016,6 +1014,7 @@ export default {
 	},
 	methods: {
 		loadScript(id, url, callback) {
+			debugger;
 			//如果已经存在这个id，则证明已经加载过，已经有这个js文件了，可以直接执行回调里面的操作
 			if (document.querySelector(`#${id}`)) {
 				callback && callback()