数据中心

src/api/dahua/dahua.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+// 查询摄像头列表
+export function getDahuaVideoServer() {
+  return request({
+    url: '/center-monitor/DahuaController/getDahuaVideoServer',
+    method: 'get',
+  })
+}

src/api/forest.js

@@ -7,3 +7,66 @@ export function getBaseInfo() {
     method: 'post',
   })
 }
+
+// 查询事件预警详细
+export function getWarm(id) {
+  return request({
+    url: '/sooka-sponest-center-event/warm/' + id,
+    method: 'get'
+  })
+}
+
+// 查询事件部门列表
+export function selectByeventCode(eventCode) {
+  return request({
+    url: '/center-event/event/system/deptevent/selectByeventCode/'+eventCode,
+    method: 'get'
+  })
+}
+//修改部门事件状态
+export function updateDeptEventStatus(param) {
+  return request({
+    url: '/sooka-sponest-center-event/warm/updateDeptEventStatus' ,
+    method: 'post',
+    data: param
+  })
+}
+
+// 删除事件操作日志
+export function listByEventCode(eventCode) {
+  return request({
+    url: '/center-event/event/system/log/listByEventCode/' + eventCode,
+    method: 'get'
+  })
+}
+
+// 查询摄像头绑定事件
+export function selectCameraEventByCameraId(cameraId) {
+  return request({
+    url: '/center-monitor/cameraevent/selectCameraEventByCameraId/' + cameraId,
+    method: 'get'
+  })
+}
+
+// 森林防火图片
+export function listCenterdataTAttachByBusId(busId) {
+  return request({
+    url: '/center-data/attach/listCenterdataTAttachByBusId/' + busId,
+    method: 'get'
+  })
+}
+// 查询事件预警详细
+export function selectchannelCodeByCameraId(cameraId) {
+  return request({
+    url: '/center-monitor/camerachannel/selectchannelCodeByCameraId/' + cameraId,
+    method: 'get'
+  })
+}
+
+// 火点附近摄像头5公里显示
+export function selectFjsxt(longitude,latitude) {
+  return request({
+    url: 'center-monitor/camera/selectFjsxt/'+longitude+'/' + latitude,
+    method: 'get'
+  })
+}

src/dahua/lib/.eslintrc

@@ -0,0 +1,17 @@
+{
+    "env": {
+        "browser": true,
+        "commonjs": true,
+        "es6": true,
+        "node": true
+    },
+    "parserOptions": {
+        "ecmaFeatures": {
+            "jsx": false
+        },
+        "sourceType": "module"
+    },
+    "rules": {
+        // "semi": ["error","never"]
+    }
+}

src/dahua/lib/demo.css

@@ -0,0 +1,82 @@
+#dom1, #dom2, #dom3, #dom4 {
+    width: 700px;
+    height: 400px;
+    position:absolute;
+}
+#dom1{
+    right:0;
+}
+#dom2{
+    /* right:0;
+    top: 400px; */
+}
+#dom3{
+    /* right:0;
+    top: 800px; */
+}
+
+#dom4{
+    left:1000px;
+}
+
+.maskVideo{
+    background-color: aquamarine;
+    position: fixed;
+}
+.center{
+    margin: 0 auto;
+    width: 1350px;
+}
+#app{
+    padding: 16px 10px;
+}
+#demo .ivu-form-item-label {
+    padding-right: 20px;
+}
+#demo #loginInfo .ivu-input {
+    width: 220px;
+}
+.ivu-input-wrapper {
+    margin-right: 10px;
+}
+.ivu-select {
+    margin-right: 10px;
+}
+#demo .ivu-input-wrapper {
+    width: 68px;
+}
+#demo .ivu-input {
+    width: 100%;
+}
+
+#demo .ivu-date-picker-rel .ivu-input-wrapper  {
+    width: 360px;
+}
+.ivu-btn + .ivu-btn {
+    margin-left: 20px;
+}
+.ivu-form-item .ivu-form-item {
+    margin-bottom: 6px;
+}
+#loginModule {
+    width: 560px;
+    margin: 10px auto;
+    padding: 16px;
+    border: 1px dashed #ccc;
+}
+#ctrlModule{
+    width: 850px;
+    float: left;
+    padding: 10px;
+    border: 1px dashed #ccc;
+}
+#popModule{
+    float: right;
+    width: 482px;
+    height: 372px;
+    padding: 10px;
+    border: 1px dashed #ccc;
+}
+#ctrlModule .ivu-form-item {
+    margin-bottom: 16px;
+}

src/dahua/lib/detect-element-resize.js

@@ -0,0 +1,147 @@
+/**
+* Detect Element Resize
+*
+* https://github.com/sdecima/javascript-detect-element-resize
+* Sebastian Decima
+*
+* version: 0.5.3
+**/
+
+(function () {
+	var attachEvent = document.attachEvent,
+		stylesCreated = false;
+	
+	if (!attachEvent) {
+		var requestFrame = (function(){
+			var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame ||
+								function(fn){ return window.setTimeout(fn, 20); };
+			return function(fn){ return raf(fn); };
+		})();
+		
+		var cancelFrame = (function(){
+			var cancel = window.cancelAnimationFrame || window.mozCancelAnimationFrame || window.webkitCancelAnimationFrame ||
+								   window.clearTimeout;
+		  return function(id){ return cancel(id); };
+		})();
+
+		function resetTriggers(element){
+			var triggers = element.__resizeTriggers__,
+				expand = triggers.firstElementChild,
+				contract = triggers.lastElementChild,
+				expandChild = expand.firstElementChild;
+			contract.scrollLeft = contract.scrollWidth;
+			contract.scrollTop = contract.scrollHeight;
+			expandChild.style.width = expand.offsetWidth + 1 + 'px';
+			expandChild.style.height = expand.offsetHeight + 1 + 'px';
+			expand.scrollLeft = expand.scrollWidth;
+			expand.scrollTop = expand.scrollHeight;
+		};
+
+		function checkTriggers(element){
+			return element.offsetWidth != element.__resizeLast__.width ||
+						 element.offsetHeight != element.__resizeLast__.height;
+		}
+		
+		function scrollListener(e){
+			var element = this;
+			resetTriggers(this);
+			if (this.__resizeRAF__) cancelFrame(this.__resizeRAF__);
+			this.__resizeRAF__ = requestFrame(function(){
+				if (checkTriggers(element)) {
+					element.__resizeLast__.width = element.offsetWidth;
+					element.__resizeLast__.height = element.offsetHeight;
+					element.__resizeListeners__.forEach(function(fn){
+						fn.call(element, e);
+					});
+				}
+			});
+		};
+		
+		/* Detect CSS Animations support to detect element display/re-attach */
+		var animation = false,
+			animationstring = 'animation',
+			keyframeprefix = '',
+			animationstartevent = 'animationstart',
+			domPrefixes = 'Webkit Moz O ms'.split(' '),
+			startEvents = 'webkitAnimationStart animationstart oAnimationStart MSAnimationStart'.split(' '),
+			pfx  = '';
+		{
+			var elm = document.createElement('fakeelement');
+			if( elm.style.animationName !== undefined ) { animation = true; }    
+			
+			if( animation === false ) {
+				for( var i = 0; i < domPrefixes.length; i++ ) {
+					if( elm.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) {
+						pfx = domPrefixes[ i ];
+						animationstring = pfx + 'Animation';
+						keyframeprefix = '-' + pfx.toLowerCase() + '-';
+						animationstartevent = startEvents[ i ];
+						animation = true;
+						break;
+					}
+				}
+			}
+		}
+		
+		var animationName = 'resizeanim';
+		var animationKeyframes = '@' + keyframeprefix + 'keyframes ' + animationName + ' { from { opacity: 0; } to { opacity: 0; } } ';
+		var animationStyle = keyframeprefix + 'animation: 1ms ' + animationName + '; ';
+	}
+	
+	function createStyles() {
+		if (!stylesCreated) {
+			//opacity:0 works around a chrome bug https://code.google.com/p/chromium/issues/detail?id=286360
+			var css = (animationKeyframes ? animationKeyframes : '') +
+					'.resize-triggers { ' + (animationStyle ? animationStyle : '') + 'visibility: hidden; opacity: 0; } ' +
+					'.resize-triggers, .resize-triggers > div, .contract-trigger:before { content: \" \"; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; } .resize-triggers > div { background: #eee; overflow: auto; } .contract-trigger:before { width: 200%; height: 200%; }',
+				head = document.head || document.getElementsByTagName('head')[0],
+				style = document.createElement('style');
+			
+			style.type = 'text/css';
+			if (style.styleSheet) {
+				style.styleSheet.cssText = css;
+			} else {
+				style.appendChild(document.createTextNode(css));
+			}
+
+			head.appendChild(style);
+			stylesCreated = true;
+		}
+	}
+	
+	window.addResizeListener = function(element, fn){
+		if (attachEvent) element.attachEvent('onresize', fn);
+		else {
+			if (!element.__resizeTriggers__) {
+				if (getComputedStyle(element).position == 'static') element.style.position = 'relative';
+				createStyles();
+				element.__resizeLast__ = {};
+				element.__resizeListeners__ = [];
+				(element.__resizeTriggers__ = document.createElement('div')).className = 'resize-triggers';
+				element.__resizeTriggers__.innerHTML = '<div class="expand-trigger"><div></div></div>' +
+																						'<div class="contract-trigger"></div>';
+				element.appendChild(element.__resizeTriggers__);
+				resetTriggers(element);
+				element.addEventListener('scroll', scrollListener, true);
+				
+				/* Listen for a css animation to detect element display/re-attach */
+				animationstartevent && element.__resizeTriggers__.addEventListener(animationstartevent, function(e) {
+					if(e.animationName == animationName)
+						resetTriggers(element);
+				});
+			}
+			element.__resizeListeners__.push(fn);
+		}
+	};
+	
+	window.removeResizeListener = function(element, fn){
+		if (attachEvent) element.detachEvent('onresize', fn);
+		else {
+			element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1);
+			if (!element.__resizeListeners__.length) {
+					element.removeEventListener('scroll', scrollListener);
+					element.__resizeTriggers__ = !element.removeChild(element.__resizeTriggers__);
+			}
+		}
+	}
+})();

src/dahua/lib/main.ts

@@ -0,0 +1,533 @@
+// 与客户端交互方法列表
+import wsPlugins from './plugins/index';
+// const ReWebSocket = require('reconnecting-websocket');
+// websocket重连
+import ReWebSocket from '../node_modules/reconnecting-websocket/dist/reconnecting-websocket-cjs';
+// const Bowser = require('bowser');
+// 浏览器信息获取
+import Bowser from "../node_modules/bowser/es5";
+const browser = Bowser.getParser(window.navigator.userAgent);
+
+interface callbacks {
+	// 连接客户端状态
+	connectResult: any,
+	// 登录客户端状态
+	loginResult: any
+}
+
+
+export default class Ws {
+	[x: string]: any;
+	// 连接地址
+	static url: string = '';
+	// 传入的配置项（方法）
+	static opts: Object = {};
+	// 密码加密公钥
+	static publicKey = '';
+	// 是否连接客户端
+	private isConnectSuccessQt: Boolean = false;
+	// 是否登录客户端
+	private isLoginSuccess: Boolean = false;
+	// 唯一实例
+	private static _instance: any = null;
+	// 当前连接的webSocket
+	webSocket: any;
+	// 最大重连数
+	reConnectCount: number = 3;
+	// 连接失败次数
+	connectFailCount: number = 0;
+	// 重连完成标识
+	connectEnd: Boolean = false;
+	// 登录完成标识
+	loginEnd: Boolean = false;
+	// 最大重登数
+	reLoginCount: number = 1;
+	// 连接失败次数
+	loginFailCount: number = 0;
+	// 当前websocket登录配置
+	config: Object = {};
+	// 登陆IP
+	loginIp: string;
+	// 登陆端口
+	loginPort: string;
+	// 登录用户名
+	userName: string;
+	// 登录密码，密码与token二选一
+	userPwd: string;
+	// 登录token，密码与token二选一
+	token: string;
+	// 用户标识符
+	userCode: Number = 0;
+	// 回调函数
+	private callback: callbacks;
+	// 创建的控件ID列表
+	ids: Array<String> = [];
+	// 创建的控件列表
+	ctrls: Array<String> = [];
+	// 心跳
+	heartBeatTimer: any = null;
+	// 监听的方法表
+	listerns: any;
+	constructor({
+		url= 'ws://localhost:1234',
+		publicKey= 'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDbEpPpxpLJft4W9YZj8bRh2bYYZshBEsKOlxgyn11rlEyTasjBSZRV9aj33tvQ2T55izH0fWl+dL/dLZChawFrlGDcH8JuWge2xYMgII9mggcYa0UiQ7pLXJ9ivXZ/cOY3HzrRQdR7dGTSNn3Z0Ctbns6mLgvlA2r3qMNs/8wHBwIDAQAB',
+		reConnectCount = 3,
+		reLoginCount = 1,
+		loginIp= location.hostname,
+		loginPort= location.port,
+		userName = '',
+		userPwd = '',
+		token = '',
+		callback = {
+			connectResult: null,
+			loginResult: null
+		}
+	} : {
+		url: string,
+		publicKey: string,
+		reConnectCount: number,
+		reLoginCount: number,
+		loginIp: string,
+		loginPort: string,
+		userName: string,
+		userPwd: string,
+		token: string
+		callback: callbacks,
+	}) {
+		// if (/https/.test(location.protocol)) {
+		// 	url = `wss:${url}`;
+		// } else {
+		// 	url = `ws:${url}`;
+		// }
+		// url = `ws://localhost:1234`;
+
+		this.url = url;
+		this.userCode = new Date().valueOf();
+		this.webSocket = null;
+		this.reConnectCount = reConnectCount;
+		this.reLoginCount = reLoginCount;
+		this.publicKey = publicKey;
+		this.loginIp = loginIp;
+		this.loginPort = loginPort;
+		this.userName = userName;
+		this.userPwd = userPwd;
+		this.token = token;
+		this.callback = callback;
+		
+		this.connectFailCount = this.connectFailCount;
+
+		// 基础操作所需功能或属性
+		this.ids = [];
+		this.ctrls = [];
+
+		// 是否连接客户端
+		this.isConnectSuccessQt = false;
+		// 是否登陆客户端
+		this.isLoginSuccess = false;
+		this.heartBeatTimer = null;
+
+		// 初始化配置参数
+		this.initConfig();
+
+		// 连接客户端
+		this.connectQt();
+
+		// 获取与客户端交互方法列表
+		const plugins = [];
+		Object.keys(wsPlugins).forEach(item => {
+			if(hasKey(wsPlugins, item)){
+				plugins.push(wsPlugins[item]);
+			}
+		});
+		// 与客户端通讯功能注册
+		usePlugin(plugins);
+
+		// 用户注册监听事件表
+		this.listerns = new Map();
+
+		// 传入登录配置，则登录
+		if(this.userName) {
+			this.detectConnectQt().then((res: Boolean) => {
+				if(res) {
+					// 登陆客户端
+					this.loginClient();
+					// 心跳保活
+					this._heartbeat();
+				}
+			});
+		}
+	}
+	/**
+	 * @description 获得实例对象
+	 */
+	public static getInstance(options: any):Ws {
+		if(!this._instance) {
+			this._instance = new Ws(options);
+		}
+		return this._instance;
+	}
+	/**
+	 * @description 用户注册监听事件
+	 * @params {String} eventType 事件名称
+	 * @params {any} callback 回调函数
+	 */
+	on(eventType: String, callback: any) {
+		this.listerns.set(eventType, callback);
+	}
+	/**
+	 * @description 用户取消监听事件
+	 * @params {String} eventType 事件名称
+	 */
+	off(eventType: string) {
+		delete this.listerns[eventType];
+	}
+	/**
+	 * @description 发送消息给客户端
+	 * @params {String} method 事件名称
+	 * @params {Object} data 传输消息的数据内容
+	 */
+	emit(method: any, data: { method: any; }) {
+		const { webSocket } = this;
+		data.method = method;
+		// 不需要判断登录和连接的方法过滤
+		let filterList = ['heartbeat', 'login', 'logout', 'browserInfo'];
+		if(filterList.includes(method)) {
+			webSocket.send(JSON.stringify(data));
+			return;
+		}
+		return new Promise((resolve, reject) => {
+			this.detectConnectQt().then(con => {
+				if(con) {
+					this.detectLoginClient().then(login => {
+						if(login) {
+							webSocket.send(JSON.stringify(data));
+							resolve(true);
+						} else {
+							// 登录失败
+							reject(2);
+						}
+					})
+				} else {
+					// 连接失败
+					reject(1);
+				}
+			})
+		})
+	}
+	/*
+	* 初始化配置
+	*/
+	initConfig() {
+		this.config = {
+			userName: this.userName,
+			userCode: this.userCode,
+			loginPort: this.loginPort,
+			loginIp: this.loginIp,
+			userPwd: this.userPwd,
+			token: this.token,
+		};
+		// 浏览器信息
+		const browserInfo = {
+			name: '',
+			version: '',
+			platform: ''
+		};
+		browserInfo.name = browser.getBrowserName().toLowerCase();
+		browserInfo.version = browser.getBrowser().version.toLowerCase();
+		browserInfo.platform =
+			browser._ua.indexOf('Win64') >= 0 || browser._ua.indexOf('Wow64') >= 0
+				? 'win64'
+				: 'win32';
+		this.config['browser'] = browserInfo;
+	}
+	/**
+	 * @description 连接客户端
+	 */
+	connectQt() {
+		this.connectEnd = false;
+		// 连接客户端
+		this.webSocket = new ReWebSocket(this.url, '', {
+			maxRetries: this.reConnectCount
+		});
+		this.addEvents();
+	}
+	/**
+	 * @description 检测连接客户端状态
+	 */
+	detectConnectQt() {
+		let _this = this;
+		return new Promise((resolve, reject) => {
+			if(!this.connectEnd) { // 连接中
+				let _interval = setInterval(() => {
+					if(_this.connectEnd) {
+						clearInterval(_interval);
+						resolve(_this.isConnectSuccessQt);
+					}
+				}, 50)
+			} else {
+				resolve(_this.isConnectSuccessQt);
+			}
+		})
+	}
+	/**
+	 * @description 检测登录客户端状态
+	 */
+	detectLoginClient() {
+		let _this = this;
+		return new Promise((resolve, reject) => {
+			if(!this.loginEnd) { // 连接中
+				let _interval = setInterval(() => {
+					if(_this.loginEnd) {
+						clearInterval(_interval);
+						resolve(_this.isLoginSuccess);
+					}
+				}, 50)
+			} else {
+				resolve(_this.isLoginSuccess);
+			}
+		})
+	}
+	/**
+	 * @description 登录客户端
+	 * @params {Object} config 登录相关配置
+	 */
+	login(config: Object) {
+		this.loginEnd = false;
+		Object.assign(this.config, config);
+		// 未连接客户端
+		if(!this.isOpen()) {
+			// 连接失败
+			return false
+		} else {
+			// 若已登录，先注销
+			if (this.isLoginSuccess) {
+				this.logout();
+			}
+			// 登陆客户端
+			this.loginClient();
+			// 心跳保活
+			this._heartbeat();
+		}
+	}
+	/**
+	 * @description 连接客户端完成后登陆
+	 */
+	// loginAfterConnectEnd() {
+	// 	// 未连接客户端
+	// 	if(!this.isOpen()) {
+	// 		// 连接失败
+	// 		return false
+	// 	} else {
+	// 		// 若已登录，先注销
+	// 		if (this.isLoginSuccess) {
+	// 			this.logout();
+	// 		}
+	// 		// 登陆客户端
+	// 		this.loginClient();
+	// 		// 心跳保活
+	// 		this._heartbeat();
+	// 	}
+	// }
+	/**
+	 * @description 登出客户端
+	 */
+	logout() {
+		// 退出客户端
+		this.logoutClient();
+		this.isLoginSuccess = false;
+		if (typeof this.callback.loginResult === 'function') {
+			this.callback.loginResult.call(this, this.isLoginSuccess);
+		}
+	}
+	/**
+	 * @description 添加websocket/window监听事件
+	 */
+	addEvents() {
+		const webSocket = this.webSocket;
+		webSocket.addEventListener('open', () => this.onOpen());
+		webSocket.addEventListener('message', (e: any) => this.onMessage(e));
+		webSocket.addEventListener('error', () => this.onError());
+		window.addEventListener('resize', () => this.reLocatedPosition());
+		window.addEventListener('scroll', () => this.reLocatedPosition());
+	}
+	/**
+	 * @description 移除websocket/window监听事件
+	 */
+	removeEvents() {
+		const webSocket = this.webSocket;
+		webSocket.removeEventListener('open', this.onOpen);
+		webSocket.removeEventListener('message', this.onMessage);
+		webSocket.removeEventListener('error', this.onError);
+		webSocket.removeEventListener('resize', this.reLocatedPosition);
+		webSocket.removeEventListener('scroll', this.reLocatedPosition);
+	}
+	/**
+	 * @description 连接客户端成功事件
+	 */
+	onOpen() {
+		this.isConnectSuccessQt = true;
+		this.connectEnd = true;
+		if (typeof this.callback.connectResult === 'function') {
+			this.callback.connectResult.call(this, this.isConnectSuccessQt);
+		}
+	}
+	/**
+	 * @description 接收客户端消息
+	 * @params {Object} event 接收客户端的消息数据
+	 */
+	onMessage(event: { data: string; }) {
+		try {
+			const data = JSON.parse(event.data);
+			const { method } = data;
+			const callback = this.listerns.get(method);
+			if (method === 'loginState') {
+				this.loginFailCount ++;
+				if(this.loginFailCount < this.reLoginCount + 1) { // 登录未到最大次数
+					if(data.params.loginResult === 0) { // 登录成功
+						this.isLoginSuccess = data.params.loginResult === 0;
+						if (typeof this.callback.loginResult === 'function') {
+							this.callback.loginResult.call(this, this.isLoginSuccess);
+						}
+					} else { // 登录失败
+						this.loginClient();
+					}
+				} else { // 登录达到最大次数
+					this.loginEnd = true;
+					this.isLoginSuccess = data.params.loginResult === 0;
+					if (typeof this.callback.loginResult === 'function') {
+						this.callback.loginResult.call(this, this.isLoginSuccess);
+					}
+				}
+			}
+			if (callback) {
+				if (method === 'loginState') {
+					callback(this.isLoginSuccess);
+				} else if (method === 'createCtrlResult') {
+					callback(data.params.array);
+				} else {
+					callback(data);
+				}
+			}
+		} catch (e) {
+			// console.error('error', e);
+		}
+	}
+	/**
+	 * @description 客户端发生错误事件
+	 */
+	onError() {
+		this.isConnectSuccessQt = false;
+		clearTimeout(this.heartbeatTimer);
+		this.connectFailCount ++;
+		if(this.connectFailCount === this.reConnectCount + 1) {
+			this.connectEnd = true;
+			if (typeof this.callback.connectResult === 'function') {
+				this.callback.connectResult.call(this, this.isConnectSuccessQt);
+			}
+		}
+	}
+	/**
+	 * @description 判断是否成功连接客户端
+	 */
+	isOpen() {
+		if (!this.webSocket) return false;
+		return this.webSocket.readyState === 1;
+	}
+	/**
+	 * @description 心跳事件
+	 */
+	_heartbeat() {
+		this.heartbeat();
+		clearTimeout(this.heartbeatTimer);
+		this.heartbeatTimer = setTimeout(() => {
+			this._heartbeat();
+		}, 10000);
+	}
+	/**
+	 * @description 获取当前浏览器缩放和滚动条信息
+	 */
+	getScrollInfo() {
+		let ratio = detectZoom();
+		let scrollX = window.pageXOffset;
+		let scrollY = window.pageYOffset;
+		var hasscrollbary = hasScrollbarY();
+		var hasscrollbarx = hasScrollbarX();
+		var scrollbarWidth = getScrollbarWidth();
+		let scrollXH = hasscrollbarx ? scrollbarWidth : 0;
+		let scrollYW = hasscrollbary ? scrollbarWidth : 0;
+		return { ratio, scrollX, scrollY, scrollXH, scrollYW };
+	}
+}
+
+function promisify(func: Function) {
+	return new	Promise((resolve, reject) => {
+		func('1', (data) => resolve(data))
+	})
+}
+
+/**
+ * @description 判断对象是否含有某属性
+ * @params {Object} obj 对象
+ * @params {String} key 属性key
+ */
+function hasKey<O>(obj: O, key: keyof any): key is keyof O {
+	return key in obj
+}
+
+/**
+ * @description 与客户端通讯功能注册
+ * @params {Array} plugins 功能列表
+ */
+function usePlugin(plugins: any[]) {
+	plugins.forEach((plugin) => {
+		Object.getOwnPropertyNames(plugin).forEach(prop => {
+			Ws.prototype[prop] = plugin[prop];
+		});
+	});
+}
+
+function detectZoom() {
+	var ratio = 0,
+		screen = window.screen,
+		ua = navigator.userAgent.toLowerCase();
+
+	if (window.devicePixelRatio !== undefined) {
+		ratio = window.devicePixelRatio;
+	} else if (~ua.indexOf('msie')) {
+		if (screen['deviceXDPI'] && screen['logicalXDPI']) {
+			ratio = screen['deviceXDPI'] / screen['logicalXDPI'];
+		}
+	} else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
+		ratio = window.outerWidth / window.innerWidth;
+	}
+
+	if (ratio) {
+		ratio = Math.round(ratio * 100);
+	}
+	return ratio;
+}
+
+function hasScrollbarY() {
+	return (
+		document.body.scrollHeight >
+		(window.innerHeight || document.documentElement.clientHeight)
+	);
+}
+
+function hasScrollbarX() {
+	return (
+		document.body.scrollWidth >
+		(window.innerWidth || document.documentElement.clientWidth)
+	);
+}
+
+function getScrollbarWidth() {
+	var scrollDiv = document.createElement('div');
+	scrollDiv.style.cssText =
+		'width: 99px; height: 99px; overflow: scroll; position: absolute; top: -9999px;';
+	document.body.appendChild(scrollDiv);
+	var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
+	document.body.removeChild(scrollDiv);
+
+	return scrollbarWidth;
+}

src/dahua/lib/version.txt

@@ -0,0 +1 @@
+version = '1.0.35'

src/main.js

@@ -12,24 +12,30 @@ import echarts from 'echarts'//echarts
 import store from './store'
 import directive from './directive' // directive
 import plugins from './plugins' // plugins
-
+import { selectDictLabel, selectDictLabels} from "@/utils/ruoyi";
 import '@/assets/styles/ruoyi.scss' // ruoyi css
 //首佳UI
 import '@/assets/styles/base.scss' // 自定义公共样式
 import '@/assets/iconfont/iconfont.css'; //字体图标
 import '@/assets/iconfont/iconfont.js'; //字体图标
 import '@/assets/styles/font.scss';//字体引入
+// 字典数据组件
+import DictData from '@/components/DictData'
 
 import './assets/icons' // icon
 import './permission' // permission control
 
 Vue.prototype.$axios = axios
 Vue.config.productionTip = false
+Vue.prototype.selectDictLabel = selectDictLabel
+Vue.prototype.selectDictLabels = selectDictLabels
+
 Vue.use(ElementUI)
 Vue.use(VueCookies)
 Vue.use(directive)
 Vue.use(plugins)
 Vue.prototype.$echarts = echarts //挂载echarts
+DictData.install()
 
 /* eslint-disable no-new */
 new Vue({

src/views/forest.vue

@@ -26,25 +26,12 @@
 					</div>
 					<div class="i-list-con h-25">
 						<div class="d-l-con-icon">
-							<div class="icon-con w-33 m-btm-no">
+							<div class="icon-con w-33 m-btm-no"  v-for="(item,index) in visuForestCloudMapDeviceBOList"
+                   v-on:click="showDevice(item.deviceType)">
 								<div class="icon icon-dot"></div>
 								<div class="icon-text">
-									<h6>500</h6>
-									<h5>摄像头</h5>
-								</div>
-							</div>
-							<div class="icon-con w-33 m-btm-no">
-								<div class="icon icon-dot"></div>
-								<div class="icon-text">
-									<h6>453</h6>
-									<h5>传感器</h5>
-								</div>
-							</div>
-							<div class="icon-con w-33 m-btm-no">
-								<div class="icon icon-dot"></div>
-								<div class="icon-text">
-									<h6>453</h6>
-									<h5>大喇叭</h5>
+									<h6>{{item.deviceCount}}</h6>
+									<h5>{{item.deviceName}}</h5>
 								</div>
 							</div>
 						</div>
@@ -73,9 +60,7 @@
 			</div>
 			<!-- 地图 -->
 			<supermap ref="supermap" style="width: 100%;height: 100vh;" :mapDiv="'forestMap'" :mapSite="{doubleClickZoom:false}"
-				:codes="['9fa5']" :isSideBySide="false"></supermap>
-			<button @click="showEventInfo1" style="position: absolute; right: 50%;top: 45%;z-index: 1000;">弹层事件演示用按钮
-			</button>
+				:codes="['9fa5']" :isSideBySide="false" @preview="preview" @showEventInfo_notProcessed="showEventInfo_notProcessed"></supermap>
 			<!-- 右侧 -->
 			<div class="rightbar" :class="indentright" ref="right">
 				<div class="forthis">
@@ -152,14 +137,23 @@
 		</div>
 		<!--事件弹层-->
 		<div class="event-info">
-			<el-dialog title="事件信息" :visible.sync="eventInfoVisible1" width="80%">
-				<el-tabs v-model="activeName">
-					<el-tab-pane label="基础信息" name="info">
-						<div class="event-info-con">
-							<div class="e-left">
-								<div class="forthis">
-									<div class="i-list-con h-35">
-										<span v-for="(information,index) in information" :key="index+'5'">
+      <el-dialog title="事件信息-未处理" :visible.sync="eventInfoVisible_notProcessed" v-if="eventInfoVisible_notProcessed" width="80%" @close="cancelEventShow()">
+        <div style="position:absolute; right: 0;top:60px; width:40%;">
+          <el-steps :space="200" :active="1" finish-status="success">
+            <el-step title="待处理"></el-step>
+            <el-step title="处理中"></el-step>
+            <el-step title="已办结"></el-step>
+            <el-step title="已归档"></el-step>
+          </el-steps>
+
+        </div>
+        <el-tabs v-model="activeName" @tab-click="handleClick" :before-leave="beforeLeave" >
+          <el-tab-pane label="基础信息" name="info" >
+            <div class="event-info-con">
+              <div class="e-left">
+                <div class="forthis">
+                  <div class="i-list-con h-35">
+										<span v-for="(information,index) in information" :key="index">
 											<div class="d-l-con" @click="">
 												<div class="d-l-l-text">
 													<i class="i-small"></i>
@@ -168,111 +162,131 @@
 												</div>
 											</div>
 										</span>
-									</div>
-								</div>
-								<div class="forthis d-map h-30">
-									<!-- <supermapDetails></supermapDetails> -->
-								</div>
-							</div>
-							<div class="e-center">
-								<div class="forthis">
-									<div class="this-title">
-										<span>涉事单位</span>
-									</div>
-									<div class="i-list-con h-24">
-										<span v-for="(company,index) in company" :key="index+'6'">
+                  </div>
+                </div>
+                <div class="forthis d-map h-30">
+                  <div class="this-title">
+                    <span>涉事单位</span>
+                  </div>
+                  <div class="i-list-con h-26">
+										<span v-for="(company,index) in listEventDept" :key="index">
 											<div class="d-l-con" @click="">
 												<div class="d-l-l-text">
 													<i class="i-small"></i>
-													<h4>{{company.name}}</h4>
+													<h4>{{company.deptName}}</h4>
 												</div>
 												<div class="d-l-l-count"
-													:class="[company.state==0?'state-wcl':'state-wyc']">
-													{{['未处理','无异常'][company.state]}}
+                             :class="[company.eventStatus=='未处理'?'state-wcl':'state-wyc']">
+<!--													{{['未处理','无异常'][company.state]}}-->{{company.eventStatus}}
 												</div>
 											</div>
 										</span>
-									</div>
-								</div>
-								<el-image :src="url02" :preview-src-list="srcList" class="img-company">
-								</el-image>
-							</div>
-							<div class="e-right">
-								<div class="forthis h-67">
-									<div class="this-title">
-										<span>处理过程</span>
-									</div>
-									<div class="i-list-con">
-										<div class="this-con">
-											<div class="z-begin">党校监控点位 2022-02-12 14:39 上报警情
-											</div>
-											<div class="z-info-list">
+                  </div>
+                </div>
+              </div>
+              <div class="e-center">
+                <div class="forthis">
+                  <div class="i-list-con h-35">
+                    <el-image :src="url" :preview-src-list="listEventPic" class="img-company" style="height: 100%;" v-if="url!=''">
+                    </el-image>
+                  </div>
+                </div>
+                <div class="forthis h-30">
+                  <div class="i-list-con h-26">
+                    <el-image :src="item"
+                              style="width:3.9rem; height:3rem;margin: 2px;"
+                              v-for="(item,index) in listEventPic" @click="tp(item)">
+                    </el-image>
+                  </div>
+                </div>
+              </div>
+              <div class="e-right">
+                <div class="forthis h-67">
+                  <div class="this-title">
+                    <span>处理过程</span>
+                  </div>
+                  <div class="i-list-con">
+                    <div class="this-con">
+                       <span v-for="(company,index) in listLog" :key="index">
 
-												<el-image :src="require('@/assets/images/visual/user-img.png')"
-													style="width: 3rem; height: 3rem;margin:2px;">
-												</el-image>
+                      <div class="z-begin" v-if="company.messageType=='sys_messageType_1'">
+                        {{company.logContent}}  {{company.createTime}}
+                      </div>
+                      <div class="z-info-list" v-if="company.messageType=='sys_messageType_2'">
 
-												<div class="z-info-list-con">
-													<div class="user-and-time">
-														<span>中心管理员</span><span> 2022-02-12 14:39</span>
-													</div>
-													<div class="z-info">
-														<div class="this-con-list-info">
-															请处理单位及时处理
-														</div>
-														<div>
-															<el-image :src="url02" :preview-src-list="srcList"
-																style="width:7rem; height:5rem;margin: 2px;"
-																v-for="(item,index) in 1" key="index+'7'">
-															</el-image>
-														</div>
+                        <el-image :src="require('@/assets/images/visual/user-img.png')"
+                                  style="width: 3rem; height: 3rem;margin:2px;">
+                        </el-image>
 
-													</div>
-												</div>
-											</div>
-											<div class="z-info-list">
+                        <div class="z-info-list-con">
 
-												<el-image :src="require('@/assets/images/visual/user-img.png')"
-													style="width: 3rem; height: 3rem;margin:2px;">
-												</el-image>
+                          <div class="user-and-time">
+                            <span>{{company.createBy}}</span><span> {{company.createTime}}</span>
+                          </div>
+                          <div class="z-info">
+                            <div class="this-con-list-info">
+                            {{company.logContent}}
+                            </div>
+                            <div>
+                              <el-image :src="url" :preview-src-list="srcList"
+                                        style="width:6.5rem; height:5rem;margin: 2px;"
+                                        v-for="(item,index) in 4">
+                              </el-image>
+                            </div>
 
-												<div class="z-info-list-con">
-													<div class="user-and-time">
-														<span>救援队</span><span> 2022-02-12 14:39</span>
-													</div>
-													<div class="z-info">
-														<div class="this-con-list-info">
-															正在赶往现场
-														</div>
-														<div>
-															<el-image ref="preview" :src="url03"
-																:preview-src-list="srcList"
-																style="width:7rem; height:5rem;margin: 2px;">
-															</el-image>
-														</div>
+                          </div>
+                        </div>
 
-													</div>
-												</div>
-											</div>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-						<div class="e-btm-btn">
-							<el-form>
-								<el-form-item>
-									<el-radio v-model="radio" label="1">无异常</el-radio>
-									<el-radio v-model="radio" label="2">确认警情</el-radio>
-									<el-button type="success" @click="">确定</el-button>
-								</el-form-item>
+                      </div>
+                      </span>
 
-							</el-form>
-						</div>
-					</el-tab-pane>
-					<el-tab-pane label="联动点位" disabled name="point">暂无信息</el-tab-pane>
-				</el-tabs>
-			</el-dialog>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="e-btm-btn">
+              <el-form>
+                <el-form-item>
+                  <el-select v-model="deptName" clearable placeholder="请选择部门" class="m-r-1rem" @change="setValue" >
+                    <el-option
+                      v-for="item in listoperateDept"
+                      :key="item.deptId"
+                      :label="item.deptName"
+                      :value="{value:item.deptId,label:item.deptName}" :disabled="item.eventStatus=='未处理' ? false:true">
+                    </el-option>
+                  </el-select>
+                  <el-select v-model="eventStatus" clearable placeholder="请选择状态" class="m-r-1rem" @change="setXsYc">
+                    <el-option
+                      v-for="item in options"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value">
+                    </el-option>
+                  </el-select>
+                  <el-select v-model="eventType" clearable placeholder="请选择事件" class="m-r-1rem"  v-if="eventTypeShow" >
+                    <el-option
+                      v-for="item in listeventType"
+                      :key="item.id"
+                      :label="item.eventTypeName"
+                      :value="item.eventType">
+                    </el-option>
+                  </el-select>
+                  <!-- 	<el-radio v-model="radio" label="1">无异常</el-radio>
+                    <el-radio v-model="radio" label="2">确认火情</el-radio> -->
+                  <el-button type="success" @click="updateEventStatus">确定</el-button>
+                </el-form-item>
+
+              </el-form>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="实时画面" name="frame">
+          </el-tab-pane>
+          <el-tab-pane label="地理位置" name="point" style="height: 1000px;">
+          </el-tab-pane>
+          <supermapNotProcessed ref="supermapNotProcessed"  style="width: 1000px;height: 1000px;" :mapDiv="'forestfireWarmSuperMap'" :mapSite="{doubleClickZoom:false}" :codes="['9fa5']" @preview="preview" :isSideBySide="false"></supermapNotProcessed>
+        </el-tabs>
+      </el-dialog>
 			<el-dialog title="事件信息" :visible.sync="eventInfoVisible2" width="80%">
 				<el-tabs v-model="activeName">
 					<el-tab-pane label="基础信息" name="info">
@@ -403,24 +417,35 @@
     getTodayEvent,getEventStatusList,getEventSourceList,getEventListByDeptIdList
   } from '@/api/event'
   import {
-    getBaseInfo
+    getBaseInfo,selectByeventCode,getWarm,updateDeptEventStatus,listByEventCode,selectCameraEventByCameraId,listCenterdataTAttachByBusId,selectchannelCodeByCameraId,selectFjsxt
   } from '@/api/forest'
 
-	import supermap from '@/components/supermap' //超图
+  import supermap from '@/components/supermap' //超图
+  import supermapNotProcessed from '@/components/supermap' //超图
 	import vheader from '@/components/v-header.vue' //一体化共用头部
 	import vBottomMenu from '@/components/vBottomMenu.vue' //一体化公共底部菜单
+
+  /** ----------------------------------摄像头预览开始------------------------------------- */
+  import {getDahuaVideoServer} from "@/api/dahua/dahua";
+  import DHWs from '@/dahua/lib/DHWs'
+
+  /** ----------------------------------摄像头预览结束------------------------------------- */
 	// import echarts from 'echarts'
 	let echarts = require('echarts')
 	export default {
+    dicts: ['event_source'],
 		components: {
 			supermap,
+      supermapNotProcessed,
 			vheader,
 			vBottomMenu
 		},
 		created() {
-			// this.$watch("open", function(newValue, oldValue) {
-			// 	this.outOpen();
-			// })
+      /** ----------------------------------摄像头预览开始------------------------------------- */
+      const DHWsInstance = DHWs.getInstance();
+      this.ws = DHWsInstance;
+      console.log(this.ws);
+      /** ----------------------------------摄像头预览结束------------------------------------- */
 		},
 		mounted() {
       this.getBaseInfo()
@@ -429,6 +454,14 @@
 		},
 		data() {
 			return {
+        /** ----------------------------------摄像头预览开始------------------------------------- */
+        activePanel: 'key1',
+        isLogin: false,
+        cameraParams: [],
+        /** ----------------------------------摄像头预览结束------------------------------------- */
+        markersList:[],//点位列表
+        cameraList:[],//摄像头列表
+        visuForestCloudMapDeviceBOList:[],//设备列表
         visuForestCloudRYBO:[],//人员类型列表
         sourceData:[],
         todayEventCountList: [],//今日事件列表
@@ -439,11 +472,46 @@
 				iframeBoo: true,
 				open: false,
 				iframeVue: null,
-				eventInfoVisible1: false,
+				eventInfoVisible_notProcessed: false,
 				eventInfoVisible2: false,
 				activeName: 'info',
 				radio: '1',
 				forestInfo: '',//基本情况
+        /** ----------------------------------事件弹窗开始------------------------------------- */
+        listEventPic: [],//事件图片
+        url: '',
+        eventTypeShow : '',
+        eventType : '',
+        deptName : '',
+        eventStatus : '',
+        cameraId: '',
+        reportTime: '',
+        reportAddress: '',
+        eventCode: null,
+        eventSource: '',
+        //事件详情弹出显隐
+        eventTypeShow: false,
+        listEventDept: [],//涉事单位List,
+        listLog: [],//处理过程List,
+        listoperateDept:[],
+        options: [{
+          value: 'wyc',
+          label: '无异常'
+        }, {
+          value: 'qr',
+          label: '确认'
+        }],
+        listeventType: [],
+        updateEventStatusForm: {
+          id: '',
+          eventStatus: '',
+          eventCode: '',
+          deptId: '',
+          deptName: '',
+          eventType: '',
+          zt: ''
+        },
+        /** ----------------------------------事件弹窗结束------------------------------------- */
 				forestFarm: [{
 						name: '双辽市',
 						id: '',
@@ -509,43 +577,44 @@
 					}
 				],
 				// 弹出层 基本信息
-				information: [{
-						name: '标题',
-						id: '',
-						content: '前段发现警情信息'
+        information: [
+          {
+            name: '标题',
+            id: '',
+            content: '某某某某某发现疑似火情'
 
-					},
-					{
-						name: '时间',
-						id: '',
-						content: '2022-02-14 14:30'
-					},
-					{
-						name: '来源',
-						id: '',
-						content: '摄像头'
-					},
-					{
-						name: '坐标',
-						id: '',
-						content: '125.78945646'
-					},
-					{
-						name: '纬度',
-						id: '',
-						content: '43.987424'
-					},
-					{
-						name: '上报人',
-						id: '',
-						content: '党校监控点位'
-					},
-					{
-						name: '详细信息',
-						id: '',
-						content: '这里发现病虫害，需要立刻支援'
-					}
-				],
+          },
+          {
+            name: '时间',
+            id: '',
+            content: '2022-02-14 14:30'
+          },
+          {
+            name: '来源',
+            id: '',
+            content: '摄像头'
+          },
+          {
+            name: '坐标',
+            id: '',
+            content: '125.78945646'
+          },
+          {
+            name: '纬度',
+            id: '',
+            content: '43.987424'
+          },
+          {
+            name: '上报人',
+            id: '',
+            content: '党校监控点位'
+          },
+          {
+            name: '详细信息',
+            id: '',
+            content: '这里发生火灾，需要立刻支援'
+          },
+        ],
 				// 弹出层 基本信息 涉事单位
 				company: [{
 						name: '沈洋镇',
@@ -599,6 +668,12 @@
 		},
 
 		methods: {
+      async beforeLeave(newactiveName, oldActiveName) {
+        let that = this;
+        if (newactiveName == 'frame') {
+          return await that.formLeaveTable()
+        }
+      },
 			//态势感知chart
 			cameraChat() {
 				// 基于准备好的dom，初始化echarts实例
@@ -826,12 +901,181 @@
 					this.indentText = '收起左右栏'
 				}
 			},
-
+      /** ----------------------------------事件弹窗开始------------------------------------- */
 			// 弹层方法
-			// 弹层方法
-			showEventInfo1() {
-				this.eventInfoVisible1 = true
+			showEventInfo_notProcessed(id) {
+        let that = this
+				that.eventInfoVisible_notProcessed = true
+        that.listEventPic = [],
+          that.url = '',
+          that.resetQuery()
+          getWarm(id).then(res => {
+          let data = res.data
+          that.id = data.id;
+          that.cameraId = data.reportById
+          that.reportTime = data.reportTime
+          that.reportAddress = data.reportAddress
+          that.eventCode = data.eventCode
+          that.eventSource = data.eventSource
+          that.information[0].content = data.eventTitle
+          that.information[1].content = data.reportTime
+          that.information[2].content = that.selectDictLabel(that.dict.type.event_source, data.eventSource)
+          that.information[3].content = data.longitude
+          that.information[4].content = data.latitude
+          that.information[5].content = data.reportBy
+          that.information[6].content = data.eventContent
+          selectByeventCode(data.eventCode).then(res1 => {
+            debugger
+            let that = this
+            that.listEventDept = res1.data.allDept
+            that.listoperateDept = res1.data.operateDept
+          })
+
+          listByEventCode(data.eventCode).then(res2 => {
+            let that = this
+            that.listLog = res2.data
+          })
+
+
+          selectCameraEventByCameraId(data.reportById).then(res3 => {
+            let that = this
+            that.listeventType = res3.data
+          })
+
+          if (data.attachId != null) {
+            listCenterdataTAttachByBusId(data.attachId).then(res4 => {
+              let that = this
+              that.listEventPic = res4.data
+              if (that.listEventPic.length > 0) {
+                that.url = that.listEventPic[0]
+              } else {
+                that.url = ""
+              }
+            })
+          }
+        })
 			},
+      updateEventStatus() {
+        if (this.deptName == '') {
+          this.$modal.msgError("请选择部门");
+          return
+        }
+        if (this.eventStatus == '') {
+          this.$modal.msgError("请选择状态");
+          return
+        }
+        if (this.eventTypeShow) {
+          if (this.eventType == '') {
+            this.$modal.msgError("请选择事件类型");
+            return
+          }
+        }
+        this.updateEventStatusForm.id = this.id
+        this.updateEventStatusForm.zt = this.eventStatus
+        this.updateEventStatusForm.eventCode = this.eventCode
+        this.updateEventStatusForm.deptId = this.deptId
+        this.updateEventStatusForm.deptName = this.deptName
+        this.updateEventStatusForm.eventType = this.eventType
+
+
+        updateDeptEventStatus(this.updateEventStatusForm).then(response => {
+          this.$modal.msgSuccess(response.msg)
+          this.eventStatus = ''
+          this.deptId = ''
+          this.eventType = ''
+          this.deptName = ''
+          this.eventShow = false
+          this.getList();
+          cancelEventShow();
+        })
+      },
+      setXsYc() {
+        let that = this
+        if (this.eventStatus == 'qr') {
+          this.eventTypeShow = true
+        } else {
+          this.eventTypeShow = false
+        }
+      },
+      setValue(event) {
+        this.deptId = event.value
+        this.deptName = event.label
+      },
+      cancelEventShow() {
+        this.activeName = 'info';
+      },
+      handleClick: function (tab, oldActiveName) {
+        let that = this
+        if (tab.name == 'frame') {
+          if (that.eventSource == 'event_source_2') {
+            selectchannelCodeByCameraId(that.cameraId).then(res => {
+              let channelCode = [];
+              if (res.data != null && res.data.length > 0) {
+                for (let i = 0; i < res.data.length; i++) {
+                  channelCode.push(res.data[i].channelCode);
+                }
+              }
+              //this.preview("ZgVzqsjwA1DT3G85KJ7HH0");
+              this.preview(channelCode);
+            })
+          }
+        } else if (tab.name == 'point') {
+          setTimeout(() => {
+            that.markersMapList=[];
+            let information={};
+            information.lng = that.information[3].content;
+            information.lat = that.information[4].content;
+            let bindPopupHtml = '';
+            for (let i = 0; i < that.information.length; i++) {
+              bindPopupHtml += '<span>' +
+                '                  <div class="d-l-con">' +
+                '                  <div class="d-l-l-text">' +
+                '                  <h4>' + that.information[i].name + '：' + that.information[i].content + '</h4>' +
+                '                </div>' +
+                '                </div>' +
+                '                </span>';
+            }
+            information.bindPopupHtml = bindPopupHtml;
+            information.click = "";
+            information.keepBindPopup = false;
+            information.isAggregation = false;
+            information.icon = "marker";
+            that.markersMapList.push(information)
+            that.$refs.supermapNotProcessed.dropLocation(that.information[4].content,that.information[3].content)
+            // 查询火点附近摄像头
+            selectFjsxt(that.information[3].content,that.information[4].content).then(response => {
+              console.log("vv",response.data)
+              if (response.data!=null&&response.data.length>0){
+                for(let i=0;i<response.data.length;i++)
+                {
+                  let marke={};
+                  marke.lng = response.data[i].longitude;
+                  marke.lat = response.data[i].latitude;
+                  let code=response.data[i].channelCode.split(",");
+                  marke.bindPopupHtml = response.data[i].cameraName;
+                  marke.click =   "preview";
+                  marke.parameter =   code;
+                  marke.keepBindPopup = false;
+                  marke.isAggregation = false;
+                  marke.icon = "marker";
+                  that.markersMapList.push(marke)
+                }
+              }
+              that.$refs.supermapNotProcessed.clearM(false)
+              that.$refs.supermapNotProcessed.setMarkers(that.markersMapList)
+            })
+          }, 1000);
+
+        }
+      },
+      /** ----------------------------------事件弹窗结束------------------------------------- */
+      /** 重置按钮操作 */
+      resetQuery() {
+        this.eventTypeShow = false
+        this.eventType = ''
+        this.deptName = ''
+        this.eventStatus = ''
+      },
 			showEventInfo2() {
 				this.eventInfoVisible2 = true
 			},
@@ -841,7 +1085,8 @@
         //获取左侧菜单列表
         getBaseInfo().then(res => {
           that.forestInfo = res.data.baseinfo.baseinfo;//基本情况
-
+          that.cameraList = res.data.cameraList;
+          that.visuForestCloudMapDeviceBOList=res.data.visuForestCloudMapDeviceBOList;
 
           if (res.data.VisuForestCloudTodaySjfbBO!=null&&res.data.VisuForestCloudTodaySjfbBO.length>0){
             for (let i = 0; i < res.data.VisuForestCloudTodaySjfbBO.length; i++) {
@@ -857,11 +1102,17 @@
             icon: 'marker',
             bindPopupHtml: '',
             click: '',
+            parameter: '',
             keepBindPopup: false,
-            isAggregation: true
+            isAggregation: false
           }
           if(res.data.visuForestVgdEventBOList!=null&&res.data.visuForestVgdEventBOList.length>0){
+            if(res.data.visuForestVgdEventBOList.length>500){
+              markersMap.isAggregation = true
+            }
             for (let i = 0; i < res.data.visuForestVgdEventBOList.length; i++) {
+              markersMap.click = "showEventInfo_notProcessed"
+              markersMap.parameter = res.data.visuForestVgdEventBOList[i].id
               markersMap.lng = res.data.visuForestVgdEventBOList[i].longitude
               markersMap.lat =res.data.visuForestVgdEventBOList[i].latitude
               markersMap.bindPopupHtml = '<div class="map-tip">' +
@@ -1107,6 +1358,116 @@
           // reportTime: "2022-06-27 02:42:04"
         })
       },
+      showDevice(deviceType){
+			  this.cameraMarkersList=[];
+			  if(deviceType=="sxt"){
+          this.$refs.supermap.clearM(false)
+			    if(this.cameraList!=null&&this.cameraList.length>0){
+            for (let i = 0; i < this.cameraList.length; i++) {
+              let markersMap = {
+                lng: 124.59,
+                lat: 43.02,
+                icon: 'camera',
+                bindPopupHtml: '',
+                click: 'preview',
+                parameter: '',
+                keepBindPopup: false,
+                isAggregation: false
+              }
+              markersMap.parameter=this.cameraList[i].channelCode.split(",");
+              markersMap.lng=this.cameraList[i].longitude;
+              markersMap.lat=this.cameraList[i].latitude;
+              markersMap.bindPopupHtml = '<div class="map-tip">' +
+                '<span>' +
+                '                  <div class="d-l-con">' +
+                '                  <div class="d-l-l-text">' +
+                '                  <h4>经纬度：' +this.cameraList[i].longitude + ',' +this.cameraList[i].latitude + '</h4>' +
+                '                </div>' +
+                '                </div>' +
+                '                </span>' +
+                '<span>' +
+                '                  <div class="d-l-con">' +
+                '                  <div class="d-l-l-text">' +
+                '                  <h4>摄像头名称：' +this.cameraList[i].cameraName + '</h4>' +
+                '                </div>' +
+                '                </div>' +
+                '                </span>' +
+                '</div>';
+              this.cameraMarkersList.push(markersMap);
+              //   cameraAccount: "1"
+              // cameraCode: "1000010"
+              // cameraFactory: "2"
+              // cameraIp: "1"
+              // cameraName: "2"
+              // cameraPasword: "2"
+              // cameraPort: 2
+              // cameraRadius: 20
+              // cameraRegion: "3"
+              // dataDeptId: null
+              // dataStatus: null
+              // eventType: null
+              // height: "11"
+              // id: "0d165fc362514f79b12a899ea66295fd"
+              // latitude: "49.325625"
+              // longitude: "125.3333"
+            }
+            this.$refs.supermap.setMarkers(this.cameraMarkersList)
+          }
+        }
+
+      },
+      /** ----------------------------------摄像头预览开始------------------------------------- */
+      alertLogin: function () {
+        this.$modal.msg("登录中....");
+      },
+      alertLoginSuccess: function () {
+        this.$modal.msgSuccess("登录成功！");
+      },
+      alertLoginFailed: function () {
+        this.$modal.msgError("登陆失败！");
+      },
+      alertReinstall: function () {
+        this.$modal.msgWarning("请重新安装客户端");
+      },
+      /** 预览按钮操作 */
+      preview(channelCode) {
+        getDahuaVideoServer().then(newResponse => {
+          this.ws.detectConnectQt().then(res => {
+            if (res) { // 连接客户端成功
+              this.alertLogin();
+              this.ws.login({
+                loginIp: newResponse.loginIp,
+                loginPort: newResponse.loginPort,
+                userName: newResponse.userName,
+                userPwd: newResponse.userPwd,
+                token: '',
+                https: 1
+              });
+              this.ws.on('loginState', (res) => {
+                this.isLogin = res;
+                console.log('---res-----', res);
+                if (res) {
+                  this.alertLoginSuccess()
+                  this.activePanel = 'key2'
+                  this.realTimeVideoDialog(channelCode);
+                } else {
+                  this.alertLoginFailed();
+                }
+              });
+            } else { // 连接客户端失败
+              this.alertReinstall();
+            }
+          });
+        });
+      },
+      realTimeVideoDialog(cameraParams) { // 调用弹窗实时播放接口
+        if (!this.isLogin) {
+          this.$Message.info('正在登陆客户端，请稍等......');
+          return false;
+        }
+        this.ws.openVideo(cameraParams);
+      },
+      /** ----------------------------------摄像头预览结束------------------------------------- */
 		}
 	}
 </script>