smartpark-front/src/views/garden/fireMonitoring.vue

<template>
	<div class="box-content">
		<el-col
			:span="12"
			v-for="item in videoList"
			:key="item.id"
			class="monitoringBox"
		>
			<!-- 1#-1F电梯厅 -->
			<p class="title">监控视频点位：{{item.name}}</p>
			<div class="select flex-center-center">
				<div class="left">
					<span>监控播放方式：</span>
					<el-radio @change="radioChange(item)" v-model="item.radio" label="1">实时</el-radio>
					<el-radio v-show="item.jurisdiction == 1" @change="radioChange(item)" v-model="item.radio" label="2">回放</el-radio>
				</div>
				<div v-show="radio=='2'" class="right">
					<span>回放时间：</span>
					<el-date-picker @focus='focusFun(item)' @blur="blurFun(item)" v-model="item.value1" type="daterange" align="right"
						unlink-panels value-format="timestamp" range-separator="至" start-placeholder="开始日期"
						end-placeholder="结束日期" :picker-options="pickerOptions">
					</el-date-picker>
				</div>
				<el-button v-show="radio=='2'" class="btn" @click="playFun" type="primary">回放</el-button>
			</div>
			<div :id="item.id" class="monitoring"></div>
		</el-col>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				radio: "1",
				jurisdiction:true,
				monitoringName:'',
				pickerOptions: {
					shortcuts: [{
						text: '最近一周',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近一个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
							picker.$emit('pick', [start, end]);
						}
					}]
				},
				cameraIndexCode:null,
				value1: [],
				oWebControl: null,
				pattern: 0, //实时0/历史1
				initCount:0,
				videoList: []
			}
		},
		created() {
			console.log(this.$route.query)
			// this.cameraIndexCode = this.$route.query.id;
			// this.monitoringName = this.$route.query.name;
			// this.jurisdiction = this.$route.query.jurisdiction;
			this.videoList = JSON.parse(this.$route.query.list)
			this.videoList.forEach(item => {
				item.radio = '1'
				item.value1 = []
				item.pattern = 0
				item.oWebControl = null
				item.initCount = 0
			})
			console.log(this.jurisdiction)
		},
		mounted() {
			$(window).resize(() => {
				this.videoList.forEach(item => {
					if (item.oWebControl != null) {
						item.oWebControl.JS_Resize(540, 303);
						this.setWndCover();
					}
				})
				// if (this.oWebControl != null) {
				// 	this.oWebControl.JS_Resize(1200, 675);
				// 	this.setWndCover();
				// }
			});
			$(window).scroll(() => {
				this.videoList.forEach(item => {
					if (item.oWebControl != null) {
						item.oWebControl.JS_Resize(540, 303);
						this.setWndCover();
					}
				})
				// if (this.oWebControl != null) {
				// 	this.oWebControl.JS_Resize(1200, 675);
				// 	this.setWndCover();
				// }
			});
			this.videoList.forEach(item => {
				this.videoSwiper(item)
			})
		},
		beforeDestroy() {
			this.closeWindow(); //关闭插件
		},
		methods: {
			// 选择时间获取焦点
			focusFun(item) {
				item.oWebControl.JS_CuttingPartWindow(160, 0, 760, 263);
			},
			// 选择时间失去焦点
			blurFun(item) {
				item.oWebControl.JS_RepairPartWindow(160, 0, 760, 263);
			},
			// 单选事件
			radioChange(item) {
				let that = this;
				console.log(item)
				item.oWebControl.JS_HideWnd(); 
				item.oWebControl.JS_DestroyWnd().then(function() { // oWebControl 为 WebControl 的对象
					if (item.radio == "1") {
						item.pattern = 0;
						item.value1 = [];
					} else {
						let startTime = new Date(new Date().toLocaleDateString()).getTime();
						let endTime = Date.parse(new Date());
						item.value1.push(startTime, endTime)
						item.pattern = 1;
					}
					that.videoSwiper(item)
				}, function() {
					// 销毁插件窗口失败
				});
			},
			// 回放
			playFun() {
				// this.closeWindow();
				this.preview()
			},
			//关闭视频窗口
			closeWindow() {
				this.videoList.forEach(item => {
					if (item.oWebControl != null) {
						item.oWebControl.JS_HideWnd(); // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
						item.oWebControl.JS_Disconnect().then(
							() => {
								// 断开与插件服务连接成功
							},
							() => {
								// 断开与插件服务连接失败
							}
						);
					}
				})
			},
			// 自适应
			setWndCover() {
				let iWidth = $(window).width();
				let iHeight = $(window).height();
				let oDivRect = $("#playWnd")
					.get(0)
					.getBoundingClientRect();
				let iCoverLeft = oDivRect.left < 0 ? Math.abs(oDivRect.left) : 0;
				let iCoverTop = oDivRect.top < 0 ? Math.abs(oDivRect.top) : 0;
				let iCoverRight =
					oDivRect.right - iWidth > 0 ? Math.round(oDivRect.right - iWidth) : 0;
				let iCoverBottom =
					oDivRect.bottom - iHeight > 0 ?
					Math.round(oDivRect.bottom - iHeight) :
					0;

				iCoverLeft = iCoverLeft > 1200 ? 1200 : iCoverLeft;
				iCoverTop = iCoverTop > 675 ? 675 : iCoverTop;
				iCoverRight = iCoverRight > 1200 ? 1200 : iCoverRight;
				iCoverBottom =
					iCoverBottom > 675 ? 675 : iCoverBottom;
				this.oWebControl.JS_RepairPartWindow(0, 0, 1200 + 1, 675); // 多1个像素点防止还原后边界缺失一个像素条
				if (iCoverLeft != 0) {
					this.oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, 675);
				}
				if (iCoverTop != 0) {
					this.oWebControl.JS_CuttingPartWindow(0, 0, 1200 + 1, iCoverTop); // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条
				}
				if (iCoverRight != 0) {
					this.oWebControl.JS_CuttingPartWindow(
						1200 - iCoverRight,
						0,
						iCoverRight,
						675
					);
				}
				if (iCoverBottom != 0) {
					this.oWebControl.JS_CuttingPartWindow(
						0,
						675 - iCoverBottom,
						1200,
						iCoverBottom
					);
				}
			},
			// 初始化
			videoSwiper(item) {
				console.log(111, item);
				let that = this;
				item.oWebControl = new WebControl({ // 创建 WebControl 实例
					szPluginContainer: item.id, // 指定 DIV 窗口标识
					iServicePortStart: 15900, // 指定起止端口号，建议使用该值
					iServicePortEnd: 15909,
					// 用于 IE10 使用 ActiveX 的 clsid 
					szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11",
					cbConnectSuccess: function() {
						console.log(222);
						item.initCount = 0;
						// 创建 WebControl 实例成功
						item.oWebControl.JS_SetWindowControlCallback({
							cbIntegrationCallBack: function(oData) { // oData 是封装的视频 web 插件回调消息的消息体
								console.log(oData,'成功'); // 打印消息体至控制台
								console.log(333);
							}
						});
						// 实例创建成功后启动服务 
						item.oWebControl.JS_StartService("window", {
							dllPath: "./VideoPluginConnect.dll" // 
						}).then(function() { // 启动插件服务成功
						console.log(444);
							//JS_CreateWnd 创建视频播放窗口，宽高可设定
							item.oWebControl.JS_CreateWnd(item.id, 540, 303).then(function() {
								console.log(555);
								item.oWebControl.JS_RequestInterface({
									funcName: "init",
									argument: JSON.stringify({
										"appkey": "29642784",
										"ip": "192.168.10.206",
										"port": 443,
										"secret": "KsHYZUgpeWRSDM7E6Xhj",
										"enableHTTPS": 1,
										"language": "zh_CN",
										"layout": "1x1",
										"playMode": item.pattern,
										"reconnectDuration": 5,
										"reconnectTimes": 5,
										"showSmart": 0,
										"showToolbar": 1,
										"toolBarButtonIDs": "2048,2049,2050,2304,2306,2305,2307,2308,2309,4096,4608,4097,4099,4098,4609,4100",
										"snapDir": "D:/snap",
										"videoDir": "D:/video"
									})
								}).then((oData) => {
									console.log(666);
									item.oWebControl.JS_Resize(540, 303);
								})
								that.preview(item)
							});
						}, function() {
							// 启动插件服务失败
						});
					},
					cbConnectError: function() {
						// 创建 WebControl 实例失败
						item.oWebControl = null;
						$('#' + item.id).html("插件未启动，正在尝试启动，请稍候...");
						// 程序未启动时执行 error 函数，采用 wakeup 来启动程序
						WebControl.JS_WakeUp("VideoWebPlugin://");
						item.initCount++;
						if (item.initCount < 3) {
							setTimeout(() => {
								that.videoSwiper(item);
							}, 3000)
						} else {
							$('#' + item.id).html(
								"插件启动失败，请检查插件是否安装！ <a style='text-decoration:underline;color: #409EFF;' href='http://10.90.100.203:8080/VideoWebPlugin.exe'>点击下载</a>"
							);
						}
					},
					cbConnectClose: function(bNormalClose) {
						// 异常断开：bNormalClose = false
						// JS_Disconnect 正常断开：bNormalClose = true 
						item.oWebControl = null;
					}
				})
			},
			// 预览
			preview(item) {
				let that = this;
				if (item.radio == "1") {
					item.oWebControl.JS_RequestInterface({
						"argument": {
							"authUuid": "",
							"cameraIndexCode": item.id,
							"ezvizDirect": 0,
							"gpuMode": 0,
							"streamMode": 1,
							"transMode": 1,
							"wndId": 0
						},
						"funcName": "startPreview"
					})
				} else {
					let startTime = (item.value1[0] / 1000).toString();
					let endTime = (item.value1[1] / 1000).toString();
					item.oWebControl.JS_RequestInterface({
						"argument": {
							"authUuid": "",
							"cameraIndexCode": item.id,
							"endTimeStamp": endTime,
							"ezvizDirect": 0,
							"gpuMode": 0,
							"playTimeStamp": startTime,
							"recordLocation": 0,
							"startTimeStamp": startTime,
							"transMode": 1,
							"wndId": 0,
							"cascade": 1
						},
						"funcName": "startPlayback"
					})
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	/deep/ .el-radio {
		color: #fff;
	}
	.box-content{
		width: 100%;
		height: 100%;
		display: flex;
		flex-wrap: wrap;
		background-color: black;
	}
	.monitoringBox {
		// width: 48%;
		height: 50%;
		// background-color: black;
		color: white;

		.title {
			padding: 30px 0;
			margin: 0;
			text-align: center;
			font-size: 36px;
			font-weight: bold;
		}

		.right {
			margin-left: 80px;
		}

		.btn {
			margin-left: 50px;
		}

		.monitoring {
			width: 540px;
			height: 303px;
			margin: auto;
			margin-top: 10px;
			// margin: 50px auto 0;
		}
	}
</style>