yzCctvHelm/assets/hnVideoLive.js

var _this, dataObj = [],
	nowYsy = null;
var _Player = {
	one: null
};
var loading = null;
new Vue({
			el: '#app',
			data: function() {
				return {
					dataLi: [],
					nowTab: {},
					tabArr: {},
					playSucc: {
						one: false,
						two: false,
						thr: false,
						fou: false
					},
					videoNum: 1
				}
			},
			created() {
				_this = this;
				nowYsy = JSON.parse(localStorage.getItem("nowShip"));
				_this.initAjax();
			},
			mounted() {
				window.addEventListener('message', (data) => {
					nowYsy = JSON.parse(localStorage.getItem("nowShip"));
					_this.initAjax();
				})
			},
			methods: {
				initAjax() {
					if (nowYsy != null && nowYsy != "null") {
						loading = this.$loading({
							background: 'rgba(0, 0, 0, 0.4)'
						})
					}
					dataObj = [];
					_this.getList();
				},
				getList() {
					if (nowYsy != null && nowYsy != "null") {
						getOneYsy(nowYsy.sn,function(sfg){
							let _opts = {
								url: ys7Url + "/api/lapp/device/camera/list",
								type:"POST"
							};
							let _data = {
								"deviceSerial": nowYsy.sn,
								"accessToken": getCookie("ylToken")
							};
							let _hea  = {
								"Content-Type": "application/x-www-form-urlencoded"
							};
							postAxios(_opts, _data, _hea).then((res) => {
								if (res.code == 200) {
									dataObj = res.data;
								} else {
									dataObj = [];
								}
								_this.checkList(sfg.status);
								loading.close();
							})
						},true);
					}
				},
				checkList(_sta) {
					let _arr = [];
					if (nowYsy.sn != "" && dataObj.length) {
						dataObj.forEach((it, ind) => {
							if (it.channelName.indexOf("@") == -1 && nowYsy.sn.indexOf(it.deviceSerial) != -1) {
								it.name = it.channelName.split("PTZ")[0].split("_")[0];
								it.fatSat = _sta;
								_arr.push(it);
							}
						})
					}
					_this.closeVid();
					_this.dataLi = _arr;
				},
				changTab(key) {
					let _flag = true;
					if (_this.tabArr[key.deviceSerial + "_" + key.channelNo] != undefined) {
						_this.$message({
							showClose: true,
							message: '设备已经在播放！！！',
							type: 'warning'
						});
						return;
					}
					for (let val in _Player) {
						if (_Player[val] == null) {
							_this.dataLi.forEach(item => {
								if ((item.deviceSerial == key.deviceSerial) && (key.channelNo == item
									.channelNo)) {
									if (item.status == 1 && item.fatSat == 1) {
										_this.nowTab[val] = item;
										_this.tabArr[item.deviceSerial + "_" + item.channelNo] = item;
										_this.playEzopen(val);
									} else {
										_this.$message({
											showClose: true,
											message: '设备离线中！！！',
											type: 'warning'
										});
									}
								}
							})
							_flag = false;
							break;
						}
					}
					if (_flag) {
						_this.$message({
							showClose: true,
							message: '暂无可用通道！！！',
							type: 'warning'
						});
					}
				},
				playEzopen(key) {
					let _wid = $("#videoWeiHie").width();
					let _hie = $("#videoWeiHie").height();
					let _src = "ezopen://open.ys7.com/" + (_this.nowTab[key].deviceSerial) + "/" + (_this.nowTab[key].channelNo) + ".live";
					_Player[key] = new EZUIKit.EZUIKitPlayer({
							id: "playWind_" + key,
							autoplay: true,
							url: _src,
							accessToken: getCookie("ylToken"),
							width: (parseFloat(_wid) - 2)/(_this.videoNum>1?2:1),
							height: (parseFloat(_hie) - 2)/(_this.videoNum>1?2:1),
							audio: false,
							plugin: ['talk'],
							themeData: {
								"header": {
									"color": "#1890ff",
									"activeColor": "#FFFFFF",
									"backgroundColor": "#000000",
									"btnList": [
										{
											"iconId": "deviceName",
											"part": "left",
											"defaultActive": 0,
											"memo": "顶部设备名称",
											"isrender": 1
										}]
									},
									"footer": {
										"color": "#FFFFFF",
										"activeColor": "#1890FF",
										"backgroundColor": "#00000021",
										"btnList": [{
												"iconId": "play",
												"part": "left",
												"defaultActive": 1,
												"memo": "播放",
												"isrender": 1
											},
											{
												"iconId": "capturePicture",
												"part": "left",
												"defaultActive": 0,
												"memo": "截屏按钮",
												"isrender": 1
											},
											{
												"iconId": "sound",
												"part": "left",
												"defaultActive": 0,
												"memo": "声音按钮",
												"isrender": 1
											},
											{
												"iconId": "recordvideo",
												"part": "left",
												"defaultActive": 0,
												"memo": "录制按钮",
												"isrender": 1
											},
											{
												"iconId": "hd",
												"part": "right",
												"defaultActive": 0,
												"memo": "清晰度切换按钮",
												"isrender": 1
											},
											{
												"iconId": "webExpend",
												"part": "right",
												"defaultActive": 0,
												"memo": "网页全屏按钮",
												"isrender": 1
											},
											{
												"iconId": "expend",
												"part": "right",
												"defaultActive": 0,
												"memo": "全局全屏按钮",
												"isrender": 1
											}
										]
									}
								},
								decoderPath: staticUrl,
								handleError: _this.handleError(key),
								handleSuccess: _this.handleSuccess(key),
							});
						},
						handleError(key) {
							if (_Player[key] != null) {
								_this.closeVid(key)
								_this.$message({
									showClose: true,
									message: '视频播放失败！！！',
									type: 'error'
								});
							}
						},
						closeVid(key) {
							if (_Player[key] != null) {
								_Player[key].stop();
								_Player[key].destroy();
								_this.playSucc[key] = false;
								_Player[key] = null;
								delete _this.tabArr[_this.nowTab[key].deviceSerial + "_" + _this.nowTab[key].channelNo];
								delete _this.nowTab[key];
							}
						},
						handleSuccess(key) {
							_this.playSucc[key] = true;
						},
						closePla(key){
							_this.closeVid(key);
						},
						changeVidNum(key) {
							if (_this.videoNum == 4 && key == 1) {
								for (let val in _Player) {
									if (val != "one") {
										_this.closeVid(val);
									}
								}
								_Player = {
									one: _Player["one"]
								};
							}
							if (_this.videoNum == 1 && key == 4) {
								_Player = {
									one: _Player["one"],
									two: null,
									thr: null,
									fou: null
								};
							}
							_this.videoNum = key;
							if (_Player["one"] != null) {
								_Player["one"].stop();
								_Player["one"].destroy();
								_Player["one"] = null;
								_this.playEzopen("one");
							}
						}
				}
			})