@uni-sw/u-design 2.0.4

package/es/components/UVideo/VmsVideoComponent/Component/VmsVideoPanel.js

@@ -0,0 +1,1774 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _readOnlyError(r) { throw new TypeError('"' + r + '" is read-only'); }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
+function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
+function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
+import React, { Component } from 'react';
+import moment from 'moment';
+import { _getGuid } from "../../../../globalFunc";
+import message from "../../../UMessageBox/message";
+// import PtzControlPanel from './PtzControl/PtzControlPanel';
+// import CryptoJs from 'crypto-js';
+import DownloadModal from "./download";
+import { ErrCodeMsg, videostreamtype, LiveStream, Protocal, MediaFileFormat, fluency, PictureFormat, EventType, RecordLocation } from "../NETPluginSDK/enum";
+import { CUSTOM_PREFIX } from "../../../../globalVarious";
+// 拼接类名前缀
+var basePrefix = "".concat(CUSTOM_PREFIX, "-base");
+var _require = require("../NETPluginSDK"),
+  utils = _require.utils;
+var _require2 = require("../NETPluginSDK"),
+  webPlugin = _require2.webPlugin;
+var VmsVideoPanel = /*#__PURE__*/function (_Component) {
+  function VmsVideoPanel(props) {
+    var _this;
+    _classCallCheck(this, VmsVideoPanel);
+    _this = _callSuper(this, VmsVideoPanel, [props]);
+    _this._scroll = function (e) {
+      _this._resolveScrollPanel(e.target);
+    };
+    _this._resolveScrollPanel = function (dom) {
+      var dlgGuid = _this.state.dlgGuid;
+      var needControl = false;
+      var parentRect = dom.getBoundingClientRect();
+      var videoRect = document.getElementById(dlgGuid).getBoundingClientRect();
+      var data = {
+        left: 0,
+        top: 0,
+        width: videoRect.width,
+        height: videoRect.height
+      };
+      var that = _this;
+      if (dom.clientHeight < dom.scrollHeight) {
+        if (parentRect.top > videoRect.top) {
+          needControl = true;
+          data.top = parentRect.top - videoRect.top;
+          data.height = data.height - (parentRect.top - videoRect.top);
+        }
+        if (videoRect.top + videoRect.height > parentRect.top + dom.clientHeight) {
+          needControl = true;
+          data.height = data.height - (videoRect.top + videoRect.height - (parentRect.top + dom.clientHeight));
+        }
+      }
+      if (dom.clientWidth < dom.scrollWidth) {
+        if (parentRect.left > videoRect.left) {
+          needControl = true;
+          data.left = parentRect.left - videoRect.left;
+          data.width = data.width - (parentRect.left - videoRect.left);
+        }
+        if (videoRect.left + videoRect.width > parentRect.left + dom.clientWidth) {
+          needControl = true;
+          data.width = data.width - (videoRect.left + videoRect.width - (parentRect.left + dom.clientWidth));
+        }
+      }
+      if (needControl) {
+        that.gWebControl.wndControl.JS_ResizeWnd(dlgGuid, false, function (res) {
+          that.gWebControl.wndControl.JS_MoidfyPartWnd1(data);
+        });
+      } else {
+        that.gWebControl.wndControl.JS_ResizeWnd(dlgGuid, false, function (res) {
+          that.gWebControl.wndControl.JS_MoidfyPartWnd(dlgGuid);
+        });
+      }
+    };
+    _this._handleCloseWindow = function () {
+      if (_this.downloadArr && _this.downloadArr.length > 0) {
+        _this.downloadArr.forEach(function (item) {
+          _this.gWebControl.SDKControl.JS_stopDownload(item.downloadHandle);
+        });
+        _this.downloadArr = [];
+      }
+    };
+    /**
+     * 接收框架发送来的message信息
+     * @param {Object} event message信息
+     */
+    _this._getParentMessage = function (event) {
+      if (!event || !event.data || event.data.Id !== 'vmsVideoCtr') {
+        return;
+      }
+      var _event$data = event.data,
+        nextKey = _event$data.nextKey,
+        nowKey = _event$data.nowKey;
+      if (_this.props.iframeId) {
+        _this.showDlg(nextKey === _this.props.iframeId);
+      }
+    };
+    _this.getHoverWnd = function (e) {
+      _this.getOnHover().then(function (res) {
+        console.log(res);
+      });
+    };
+    //鼠标切换窗口
+    _this.changeWin = function (winID, info) {
+      var _this$state = _this.state,
+        activeVideo = _this$state.activeVideo,
+        showPtzPanel = _this$state.showPtzPanel;
+      var b3DEnable = info.b3DEnable,
+        bPtzCtrl = info.bPtzCtrl,
+        bZoomEnable = info.bZoomEnable,
+        lpPlayHandle = info.lpPlayHandle,
+        lpPlayBackHandle = info.lpPlayBackHandle;
+      if (parseInt(winID) !== activeVideo) {
+        _this.setState({
+          activeVideo: parseInt(winID)
+        });
+        if (showPtzPanel) {
+          _this.getPtzPresetList().then(function (res) {
+            _this.setState({
+              presetListOptions: res.data.PresetList
+            });
+          }).catch(function (err) {
+            console.log(err);
+            _this.setState({
+              presetListOptions: []
+            });
+          });
+          _this.setState({
+            showPtzPanel: false
+          }, function () {
+            _this.setState({
+              showPtzPanel: true
+            });
+          });
+        }
+      }
+      if (_this.wndObj[winID]) {
+        var oldObj = _this.wndObj[winID];
+        _this.wndObj[winID] = _objectSpread(_objectSpread({}, oldObj), {}, {
+          b3DEnable: b3DEnable,
+          bPtzCtrl: bPtzCtrl,
+          bZoomEnable: bZoomEnable,
+          lpPlayHandle: lpPlayHandle,
+          lpPlayBackHandle: lpPlayBackHandle
+        });
+      }
+      _this.callbackWinStatus(winID);
+    };
+    //实况、回放、切换窗口、分屏、关闭后回调所有窗口状态
+    _this.callbackWinStatus = function (winID) {
+      if (_this.props.getWinState) {
+        var oldObj = _this.wndObj[winID];
+        if (oldObj === undefined) {
+          _this.props.getWinState(winID === undefined || winID === null ? _this.state.activeVideo : winID, _this.wndObj);
+        } else {
+          _this.getSoundVolume().then(function (data) {
+            var volume = data.data.dwVolume;
+            _this.wndObj[winID] = _objectSpread(_objectSpread({}, oldObj), {}, {
+              volume: volume
+            });
+            _this.props.getWinState(winID === undefined || winID === null ? _this.state.activeVideo : winID, _this.wndObj);
+          }).catch(function (err) {
+            console.log(err);
+            _this.props.getWinState(winID === undefined || winID === null ? _this.state.activeVideo : winID, _this.wndObj);
+          });
+        }
+      }
+    };
+    _this.loginVMS = function (callback) {
+      var textLocale = _this.props.textLocale;
+      if (!_this.vmsIP || !_this.username || !_this.password) {
+        message.error(textLocale.loginFailureIsNotEmpty);
+        _this.setState({
+          videoMsg: textLocale.playerLoginFailureIsNotEmpty
+        }, function () {
+          callback(false);
+        });
+      } else {
+        var loginJsonMap = {
+          szIPAddr: _this.vmsIP,
+          dwPort: 80,
+          szUserName: _this.username,
+          szPassword: _this.base64encode(_this.password),
+          dwLoginProto: 1,
+          dwDeviceType: '501'
+        };
+        var that = _this;
+        _this.gWebControl.SDKControl.JS_devLogin(loginJsonMap, function (res) {
+          console.log('UVideo-------------------VMS，登录接口返回信息', res);
+          if (res.code === 0) {
+            that.setState({
+              loginHandle: JSON.stringify(res.data.UserID)
+            }, function () {
+              callback(true); // 等待登录句柄写入this后，再执行回调
+            });
+          } else {
+            console.log('Vmslogin fail!');
+            message.error(textLocale[ErrCodeMsg[res.code]] || textLocale.operationFailure);
+            that.setState({
+              videoMsg: "".concat(textLocale.playerLoginFailure, ",").concat(textLocale[ErrCodeMsg[res.code]])
+            }, function () {
+              callback(false);
+            });
+          }
+        });
+      }
+    };
+    _this.base64encode = function (str) {
+      var out;
+      var i;
+      var len;
+      var c1;
+      var c2;
+      var c3;
+      len = str.length;
+      i = 0;
+      out = '';
+      while (i < len) {
+        c1 = str.charCodeAt(i++) & 0xff;
+        if (i == len) {
+          out += _this.base64encodechars.charAt(c1 >> 2);
+          out += _this.base64encodechars.charAt((c1 & 0x3) << 4);
+          out += '==';
+          break;
+        }
+        c2 = str.charCodeAt(i++);
+        if (i == len) {
+          out += _this.base64encodechars.charAt(c1 >> 2);
+          out += _this.base64encodechars.charAt((c1 & 0x3) << 4 | (c2 & 0xf0) >> 4);
+          out += _this.base64encodechars.charAt((c2 & 0xf) << 2);
+          out += '=';
+          break;
+        }
+        c3 = str.charCodeAt(i++);
+        out += _this.base64encodechars.charAt(c1 >> 2);
+        out += _this.base64encodechars.charAt((c1 & 0x3) << 4 | (c2 & 0xf0) >> 4);
+        out += _this.base64encodechars.charAt((c2 & 0xf) << 2 | (c3 & 0xc0) >> 6);
+        out += _this.base64encodechars.charAt(c3 & 0x3f);
+      }
+      return out;
+    };
+    //#endregion
+    //#region 实况、抓拍、关闭相关
+    //查询VMS通道
+    _this.getVmsDevList = function (FindHandle, arr, callback) {
+      if (_this.gWebControl) {
+        var data = _toConsumableArray(arr);
+        var that = _this;
+        _this.gWebControl.SDKControl.JS_findNextDevChn(FindHandle, function (res) {
+          if (0 !== res.code) {
+            that.gWebControl.SDKControl.JS_findCloseDevChn(FindHandle, function (res) {
+              callback(data);
+            });
+          } else {
+            data.push(res.data);
+            that.getVmsDevList(FindHandle, data, callback);
+          }
+        });
+      } else {
+        callback([]);
+      }
+    };
+    //查询VMS通道
+    _this.getDevChnList = function () {
+      var dwDeviceID = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+      var textLocale = _this.props.textLocale;
+      return new Promise(function (resolve, reject) {
+        if (_this.gWebControl) {
+          var dataMap = {
+            UserID: parseInt(_this.state.loginHandle)
+          };
+          if (dwDeviceID) {
+            Object.assign(dataMap, {
+              dwDeviceID: dwDeviceID
+            });
+          }
+          var that = _this;
+          _this.gWebControl.SDKControl.JS_findDevChnList(dataMap, function (res) {
+            if (0 !== res.code) {
+              console.log('UVideo-------------------VMS，查询通道报错', res);
+              reject(textLocale[ErrCodeMsg[res.code]]);
+            } else {
+              that.getVmsDevList(res.data.findHandle, [], function (res) {
+                resolve(res);
+              });
+            }
+          });
+        } else {
+          console.log('UVideo-------------------VMS，播放器未初始化');
+          reject(textLocale.controlNotLoaded);
+        }
+      });
+    };
+    //启动实况
+    _this.startLive = function (_ref) {
+      var deviceID = _ref.deviceID,
+        channelID = _ref.channelID,
+        _ref$winID = _ref.winID,
+        winID = _ref$winID === void 0 ? -1 : _ref$winID,
+        _ref$streamType = _ref.streamType,
+        streamType = _ref$streamType === void 0 ? LiveStream.LIVE_STREAM_INDEX_MAIN : _ref$streamType;
+      console.log('UVideo-------------------VMS启动实况');
+      console.log('UVideo-------------------VMS启动实况参数deviceID：', deviceID);
+      console.log('UVideo-------------------VMS启动实况参数channelID：', channelID);
+      console.log('UVideo-------------------VMS启动实况参数winID：', winID);
+      console.log('UVideo-------------------VMS启动实况参数streamType：', streamType);
+      var activeVideo = _this.state.activeVideo;
+      var textLocale = _this.props.textLocale;
+      return new Promise(function (resolve, reject) {
+        _this.getDevChnList(deviceID).then(function (res) {
+          console.log('UVideo-------------------VMS启动实况，通道查询结果', res);
+          var curChn = [];
+          if (deviceID) {
+            curChn = res;
+          } else if (channelID) {
+            curChn = res.filter(function (item) {
+              return item.dwChannelID === channelID;
+            });
+          }
+          if (curChn.length < 1) {
+            reject(textLocale.notQueryDeviceChannel);
+          } else {
+            if (_this.gWebControl) {
+              var dataMap = {
+                dwChannelID: curChn[0].dwChannelID,
+                dwStreamType: streamType,
+                dwLinkMode: Protocal.TRANSPROTOCAL_RTPTCP,
+                dwFluency: fluency.NETDEV_PICTURE_REAL,
+                UserID: parseInt(_this.state.loginHandle)
+              };
+              if (typeof winID === 'number' && winID > -1) {
+                if (parseInt(winID) !== activeVideo) {
+                  _this.setState({
+                    activeVideo: winID
+                  }, function () {
+                    _this.gWebControl.wndControl.JS_SetFocus(parseInt(winID), function (res) {});
+                  });
+                }
+                dataMap.resID = parseInt(winID);
+                var that = _this;
+                _this.gWebControl.SDKControl.JS_stopRealPlay(winID, function (res) {
+                  that.gWebControl.SDKControl.JS_realPlay(dataMap, function (res) {
+                    if (0 !== res.code) {
+                      that.wndObj[winID] = null;
+                      that.callbackWinStatus(winID);
+                      reject(textLocale[ErrCodeMsg[res.code]]);
+                    } else {
+                      var oldObj = that.wndObj[winID] || {};
+                      that.wndObj[winID] = _objectSpread(_objectSpread({}, oldObj), {}, {
+                        type: videostreamtype.live,
+                        deviceID: curChn[0].dwDevID,
+                        channelID: curChn[0].dwChannelID,
+                        chnName: curChn[0].szChnName,
+                        bSupportPTZ: curChn[0].bSupportPTZ === 1,
+                        streamNum: curChn[0].dwMaxStream,
+                        curStreamType: streamType,
+                        b3DEnable: false,
+                        bPtzCtrl: false,
+                        bZoomEnable: false
+                      });
+                      that.gWebControl.SDKControl.JS_enablePtzCtrl(parseInt(winID), false);
+                      that.gWebControl.SDKControl.JS_enable3DPosition(parseInt(winID), false);
+                      that.gWebControl.SDKControl.JS_enableDigitalZoom(parseInt(winID), false);
+                      that.callbackWinStatus(winID);
+                      resolve(res);
+                    }
+                  });
+                });
+              } else {
+                var _that = _this;
+                _this._getActiveVideo().then(function (data) {
+                  if (data !== -1) {
+                    dataMap.resID = parseInt(data);
+                    _this.gWebControl.SDKControl.JS_stopRealPlay(data, function (res) {
+                      _that.gWebControl.SDKControl.JS_realPlay(dataMap, function (res) {
+                        if (0 !== res.code) {
+                          _that.wndObj[data] = null;
+                          _that.callbackWinStatus(data);
+                          reject(textLocale[ErrCodeMsg[res.code]]);
+                        } else {
+                          var oldObj = _that.wndObj[data] || {};
+                          _that.wndObj[data] = _objectSpread(_objectSpread({}, oldObj), {}, {
+                            type: videostreamtype.live,
+                            deviceID: curChn[0].dwDevID,
+                            channelID: curChn[0].dwChannelID,
+                            chnName: curChn[0].szChnName,
+                            bSupportPTZ: curChn[0].bSupportPTZ === 1,
+                            streamNum: curChn[0].dwMaxStream,
+                            curStreamType: streamType,
+                            b3DEnable: false,
+                            bPtzCtrl: false,
+                            bZoomEnable: false
+                          });
+                          _that.gWebControl.SDKControl.JS_enablePtzCtrl(parseInt(data), false);
+                          _that.gWebControl.SDKControl.JS_enable3DPosition(parseInt(data), false);
+                          _that.gWebControl.SDKControl.JS_enableDigitalZoom(parseInt(data), false);
+                          _that.callbackWinStatus(data);
+                          resolve(res);
+                        }
+                      });
+                    });
+                  }
+                });
+              }
+            } else {
+              reject(textLocale.controlNotLoaded);
+            }
+          }
+        }).catch(function (err) {
+          console.log('UVideo-------------------VMS，查询通道异常');
+          reject(deviceID ? textLocale.queryChannelException : '查询通道异常');
+        });
+      });
+    };
+    //关闭视频
+    _this.stopVideo = function (type) {
+      var winID = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : -1;
+      var textLocale = _this.props.textLocale;
+      return new Promise(function (resolve, reject) {
+        if (_this.gWebControl) {
+          var that = _this;
+          var stopFunction = type === videostreamtype.live ? 'JS_stopRealPlay' : 'JS_stopPlayback';
+          if (typeof winID === 'number' && winID > -1) {
+            _this.gWebControl.SDKControl[stopFunction](winID, function (res) {
+              if (0 !== res.code) {
+                reject(textLocale[ErrCodeMsg[res.code]]);
+              } else {
+                if (that.wndObj[winID]) {
+                  that.wndObj[winID] = null;
+                }
+                that.gWebControl.SDKControl.JS_enablePtzCtrl(parseInt(winID), false);
+                that.gWebControl.SDKControl.JS_enableDigitalZoom(parseInt(winID), false);
+                that.gWebControl.SDKControl.JS_enable3DPosition(parseInt(winID), false);
+                that.gWebControl.SDKControl.JS_closeSound(parseInt(winID));
+                that.gWebControl.SDKControl.JS_stopSavaRealData(parseInt(winID));
+                that.gWebControl.wndControl.JS_SetWndPos(0, that.state.screenSplitType);
+                resolve(res);
+              }
+            });
+          } else {
+            _this.stopAllVideo(stopFunction, function (res) {
+              that.callbackWinStatus();
+              that.gWebControl.wndControl.JS_SetWndPos(0, _this.state.screenSplitType);
+              resolve(res);
+            });
+          }
+        } else {
+          reject(textLocale.controlNotLoaded);
+        }
+      });
+    };
+    //停止所有窗口
+    _this.stopAllVideo = function (stopFunction, callback) {
+      var screenSplitType = _this.state.screenSplitType;
+      var textLocale = _this.props.textLocale;
+      var promises = [];
+      var that = _this;
+      var _loop = function _loop(i) {
+        promises.push(new Promise(function (resolve, reject) {
+          _this.gWebControl.SDKControl[stopFunction](i, function (res) {
+            if (0 !== res.code) {
+              reject(textLocale[ErrCodeMsg[res.code]]);
+            } else {
+              if (that.wndObj[i]) {
+                that.wndObj[i] = null;
+              }
+              that.gWebControl.SDKControl.JS_enablePtzCtrl(parseInt(i), false);
+              that.gWebControl.SDKControl.JS_enableDigitalZoom(parseInt(i), false);
+              that.gWebControl.SDKControl.JS_enable3DPosition(parseInt(i), false);
+              that.gWebControl.SDKControl.JS_closeSound(parseInt(i));
+              that.gWebControl.SDKControl.JS_stopSavaRealData(parseInt(i));
+              resolve(res);
+            }
+          });
+        }));
+      };
+      for (var i = 0; i < screenSplitType; i++) {
+        _loop(i);
+      }
+      Promise.all(promises).then(function (res) {
+        callback(res);
+      }).catch(function (err) {
+        callback(err);
+      });
+    };
+    //实况抓拍
+    _this.captureLive = function () {
+      var condition = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+        szFileName: "C:\\DownLoad\\snap_".concat(moment().format('YYYYMMDDHHmmss')),
+        dwFormat: PictureFormat.PICTURE_BMP
+      };
+      var textLocale = _this.props.textLocale;
+      return new Promise(function (resolve, reject) {
+        if (_this.gWebControl) {
+          _this._getActiveVideo().then(function (data) {
+            if (data !== -1) {
+              var szFileName = condition.szFileName,
+                dwFormat = condition.dwFormat;
+              _this.gWebControl.SDKControl.JS_capturePicture({
+                resID: data,
+                szFileName: szFileName + '_' + _this.wndObj[data].chnName,
+                dwFormat: dwFormat
+              }, function (res) {
+                if (0 !== res.code) {
+                  reject(textLocale[ErrCodeMsg[res.code]]);
+                } else {
+                  resolve(res);
+                }
+              });
+            }
+          });
+        } else {
+          reject(textLocale.controlNotLoaded);
+        }
+      });
+    };
+    //#endregion
+    //#region 录像查询、回放、下载相关
+    _this.getTime = function (time) {
+      var tempTime = time.replace(/-/g, '/');
+      return new Date(tempTime).getTime() / 1000;
+    };
+    //遍历获取所有文件
+    _this.getFileList = function (FindHandle, arr, callback) {
+      if (_this.gWebControl) {
+        var data = _toConsumableArray(arr);
+        var that = _this;
+        _this.gWebControl.SDKControl.JS_findNextFile(FindHandle, function (res) {
+          if (0 !== res.code) {
+            that.gWebControl.SDKControl.JS_findClose(FindHandle, function (res) {
+              callback(data);
+            });
+          } else {
+            data.push(res.data);
+            that.getFileList(FindHandle, data, callback);
+          }
+        });
+      } else {
+        callback([]);
+      }
+    };
+    //查询录像文件列表
+    _this.queryFiles = function (param) {
+      var _this$recordDefaultPa = _objectSpread(_objectSpread({}, _this.recordDefaultParam), param),
+        deviceID = _this$recordDefaultPa.deviceID,
+        channelID = _this$recordDefaultPa.channelID,
+        fileType = _this$recordDefaultPa.fileType,
+        BeginTime = _this$recordDefaultPa.BeginTime,
+        EndTime = _this$recordDefaultPa.EndTime,
+        recordLocation = _this$recordDefaultPa.recordLocation;
+      var textLocale = _this.props.textLocale;
+      return new Promise(function (resolve, reject) {
+        if (_this.gWebControl) {
+          if (deviceID) {
+            _this.getDevChnList(deviceID).then(function (res) {
+              if (res.length < 1) {
+                reject(textLocale.notQueryDeviceChannel);
+              } else {
+                var dataMap = {
+                  szFileName: 0,
+                  dwChannelID: res[0].dwChannelID,
+                  dwFileType: fileType,
+                  tBeginTime: _this.getTime(BeginTime),
+                  tEndTime: _this.getTime(EndTime),
+                  dwRecordLocation: recordLocation,
+                  UserID: parseInt(_this.state.loginHandle)
+                };
+                var that = _this;
+                _this.gWebControl.SDKControl.JS_findFile(dataMap, function (res1) {
+                  if (0 !== res1.code) {
+                    reject(textLocale[ErrCodeMsg[res1.code]]);
+                  } else {
+                    that.getFileList(res1.data.findHandle, [], function (res2) {
+                      resolve({
+                        record: res2,
+                        channelID: res[0].dwChannelID
+                      });
+                    });
+                  }
+                });
+              }
+            }).catch(function (err) {
+              reject(deviceID ? textLocale.queryChannelException : '');
+            });
+          } else if (channelID) {
+            var dataMap = {
+              szFileName: 0,
+              dwChannelID: channelID,
+              dwFileType: fileType,
+              tBeginTime: _this.getTime(BeginTime),
+              tEndTime: _this.getTime(EndTime),
+              dwRecordLocation: recordLocation,
+              UserID: parseInt(_this.state.loginHandle)
+            };
+            var that = _this;
+            _this.gWebControl.SDKControl.JS_findFile(dataMap, function (res) {
+              if (0 !== res.code) {
+                reject(textLocale[ErrCodeMsg[res.code]]);
+              } else {
+                that.getFileList(res.data.findHandle, [], function (res) {
+                  resolve({
+                    record: res,
+                    channelID: channelID
+                  });
+                });
+              }
+            });
+          }
+        } else {
+          reject(textLocale.controlNotLoaded);
+        }
+      });
+    };
+    //录像回放控制
+    _this.playBackCtr = function (param) {
+      var controlMode = param.controlMode,
+        playTime = param.playTime,
+        speed = param.speed;
+      var textLocale = _this.props.textLocale;
+      return new Promise(function (resolve, reject) {
+        if (_this.gWebControl) {
+          _this._getActiveVideo().then(function (data) {
+            if (data !== -1) {
+              var dataMap = {
+                resID: data,
+                dwControlMode: controlMode
+              };
+              if (playTime) {
+                Object.assign(dataMap, {
+                  tPlayTime: playTime
+                });
+              }
+              if (speed) {
+                Object.assign(dataMap, {
+                  dwSpeed: speed
+                });
+              }
+              var that = _this;
+              _this.gWebControl.SDKControl.JS_playBackControl(dataMap, function (res) {
+                if (0 !== res.code) {
+                  reject(textLocale[ErrCodeMsg[res.code]]);
+                } else {
+                  resolve(res);
+                }
+              });
+            }
+          });
+        } else {
+          reject(textLocale.controlNotLoaded);
+        }
+      });
+    };
+    //录像按时间回放
+    _this.startReply = function (param) {
+      var activeVideo = _this.state.activeVideo;
+      var _this$recordDefaultPa2 = _objectSpread(_objectSpread({}, _this.recordDefaultParam), param),
+        deviceID = _this$recordDefaultPa2.deviceID,
+        channelID = _this$recordDefaultPa2.channelID,
+        _this$recordDefaultPa3 = _this$recordDefaultPa2.winID,
+        winID = _this$recordDefaultPa3 === void 0 ? -1 : _this$recordDefaultPa3,
+        fileType = _this$recordDefaultPa2.fileType,
+        _this$recordDefaultPa4 = _this$recordDefaultPa2.linkMode,
+        linkMode = _this$recordDefaultPa4 === void 0 ? Protocal.TRANSPROTOCAL_RTPTCP : _this$recordDefaultPa4,
+        BeginTime = _this$recordDefaultPa2.BeginTime,
+        EndTime = _this$recordDefaultPa2.EndTime,
+        recordLocation = _this$recordDefaultPa2.recordLocation;
+      var textLocale = _this.props.textLocale;
+      return new Promise(function (resolve, reject) {
+        _this.getDevChnList(deviceID).then(function (res) {
+          var curChn = [];
+          if (deviceID) {
+            curChn = res;
+          } else if (channelID) {
+            curChn = res.filter(function (item) {
+              return item.dwChannelID === channelID;
+            });
+          }
+          //   let curChn = res.filter((item) => item.dwChannelID === channelID);
+          if (curChn.length < 1) {
+            reject(textLocale.notQueryDeviceChannel);
+          } else {
+            if (_this.gWebControl) {
+              var dataMap = {
+                dwChannelID: curChn[0].dwChannelID,
+                tBeginTime: _this.getTime(BeginTime),
+                tEndTime: _this.getTime(EndTime),
+                dwLinkMode: linkMode,
+                dwFileType: fileType,
+                dwRecordLocation: recordLocation,
+                UserID: parseInt(_this.state.loginHandle)
+              };
+              if (typeof winID === 'number' && winID > -1) {
+                if (parseInt(winID) !== activeVideo) {
+                  _this.gWebControl.wndControl.JS_SetFocus(parseInt(winID), function (res) {});
+                }
+                dataMap.resID = parseInt(winID);
+                var that = _this;
+                _this.gWebControl.SDKControl.JS_stopPlayback(winID, function (res) {
+                  that.gWebControl.SDKControl.JS_playBack(dataMap, function (res) {
+                    if (0 !== res.code) {
+                      that.wndObj[winID] = null;
+                      that.callbackWinStatus(winID);
+                      reject(textLocale[ErrCodeMsg[res.code]]);
+                    } else {
+                      var oldObj = that.wndObj[winID] || {};
+                      that.wndObj[winID] = _objectSpread(_objectSpread({}, oldObj), {}, {
+                        type: videostreamtype.playback,
+                        deviceID: curChn[0].dwDevID,
+                        channelID: curChn[0].dwChannelID,
+                        chnName: curChn[0].szChnName
+                      });
+                      that.gWebControl.SDKControl.JS_enablePtzCtrl(parseInt(winID), false);
+                      that.gWebControl.SDKControl.JS_enable3DPosition(parseInt(winID), false);
+                      that.gWebControl.SDKControl.JS_enableDigitalZoom(parseInt(winID), false);
+                      that.callbackWinStatus(winID);
+                      resolve(res);
+                    }
+                  });
+                });
+              } else {
+                var _that2 = _this;
+                _this._getActiveVideo().then(function (data) {
+                  if (data !== -1) {
+                    dataMap.resID = parseInt(data);
+                    _this.gWebControl.SDKControl.JS_stopPlayback(data, function (res) {
+                      _that2.gWebControl.SDKControl.JS_playBack(dataMap, function (res) {
+                        if (0 !== res.code) {
+                          _that2.wndObj[data] = null;
+                          _that2.callbackWinStatus(data);
+                          reject(textLocale[ErrCodeMsg[res.code]]);
+                        } else {
+                          var oldObj = _that2.wndObj[data] || {};
+                          _that2.wndObj[data] = _objectSpread(_objectSpread({}, oldObj), {}, {
+                            type: videostreamtype.playback,
+                            deviceID: curChn[0].dwDevID,
+                            channelID: curChn[0].dwChannelID,
+                            chnName: curChn[0].szChnName
+                          });
+                          _that2.gWebControl.SDKControl.JS_enablePtzCtrl(parseInt(data), false);
+                          _that2.gWebControl.SDKControl.JS_enable3DPosition(parseInt(data), false);
+                          _that2.gWebControl.SDKControl.JS_enableDigitalZoom(parseInt(data), false);
+                          _that2.callbackWinStatus(data);
+                          resolve(res);
+                        }
+                      });
+                    });
+                  }
+                });
+              }
+            } else {
+              reject(textLocale.controlNotLoaded);
+            }
+          }
+        });
+      });
+    };
+    //录像下载
+    _this.download = function (param) {
+      var _this$recordDefaultPa5 = _objectSpread(_objectSpread({}, _this.recordDefaultParam), param),
+        channelID = _this$recordDefaultPa5.channelID,
+        fileType = _this$recordDefaultPa5.fileType,
+        _this$recordDefaultPa6 = _this$recordDefaultPa5.linkMode,
+        linkMode = _this$recordDefaultPa6 === void 0 ? Protocal.TRANSPROTOCAL_RTPTCP : _this$recordDefaultPa6,
+        BeginTime = _this$recordDefaultPa5.BeginTime,
+        EndTime = _this$recordDefaultPa5.EndTime,
+        recordLocation = _this$recordDefaultPa5.recordLocation,
+        _this$recordDefaultPa7 = _this$recordDefaultPa5.downloadSpeed,
+        downloadSpeed = _this$recordDefaultPa7 === void 0 ? 3 : _this$recordDefaultPa7,
+        _this$recordDefaultPa8 = _this$recordDefaultPa5.fileName,
+        fileName = _this$recordDefaultPa8 === void 0 ? 'C:\\DownLoad\\record' : _this$recordDefaultPa8,
+        _this$recordDefaultPa9 = _this$recordDefaultPa5.format,
+        format = _this$recordDefaultPa9 === void 0 ? MediaFileFormat.MEDIA_FILE_TS : _this$recordDefaultPa9;
+      var textLocale = _this.props.textLocale;
+      return new Promise(function (resolve, reject) {
+        if (_this.gWebControl) {
+          var dataMap = {
+            dwChannelID: channelID,
+            tBeginTime: _this.getTime(BeginTime),
+            tEndTime: _this.getTime(EndTime),
+            dwLinkMode: linkMode,
+            dwFileType: fileType,
+            dwDownloadSpeed: downloadSpeed,
+            dwRecordLocation: recordLocation,
+            UserID: parseInt(_this.state.loginHandle),
+            szFileName: fileName + '_' + _this.wndObj[_this.state.activeVideo].chnName + '_' + BeginTime.replace(/(-|\/|:| )/g, '') + '_' + EndTime.replace(/(-|\/|:| )/g, ''),
+            dwFormat: format
+          };
+          _this.gWebControl.SDKControl.JS_getFileByTime(dataMap, function (res) {
+            if (0 !== res.code) {
+              reject(textLocale[ErrCodeMsg[res.code]]);
+            } else {
+              resolve(res.data.downloadHandle);
+            }
+          });
+        } else {
+          reject(textLocale.controlNotLoaded);
+        }
+      });
+    };
+    _this.showDlg = function (status) {
+      var textLocale = _this.props.textLocale;
+      return new Promise(function (resolve, reject) {
+        if (_this.gWebControl) {
+          _this.gWebControl.wndControl.JS_ShowWnd(status, function (res) {
+            if (0 !== res.code) {
+              reject(textLocale[ErrCodeMsg[res.code]]);
+            } else {
+              resolve(res);
+            }
+          });
+        } else {
+          reject(textLocale.controlNotLoaded);
+        }
+      });
+    };
+    //全屏
+    _this.fullScreenEnableCtr = function () {
+      var status = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+      var textLocale = _this.props.textLocale;
+      return new Promise(function (resolve, reject) {
+        if (_this.gWebControl) {
+          _this.gWebControl.wndControl.JS_FullScreen(status, function (res) {
+            if (0 !== res.code) {
+              reject(textLocale[ErrCodeMsg[res.code]]);
+            } else {
+              resolve(res);
+            }
+          });
+        } else {
+          reject(textLocale.controlNotLoaded);
+        }
+      });
+    };
+    //获取鼠标移入窗格
+    _this.getOnHover = function () {
+      return new Promise(function (resolve, reject) {
+        if (_this.gWebControl) {
+          _this.gWebControl.wndControl.JS_GetOnHoverWnd(function (res) {
+            if (0 === res.code) {
+              var ResourceId = res.data.lResId;
+              resolve(parseInt(ResourceId));
+            } else {
+              resolve(-1);
+            }
+          });
+        } else {
+          resolve(-1);
+        }
+      });
+    };
+    //视频组件裁剪
+    _this.clippingPartWnd = function (clipData) {
+      var dlgGuid = _this.state.dlgGuid;
+      var textLocale = _this.props.textLocale;
+      return new Promise(function (resolve, reject) {
+        if (_this.gWebControl) {
+          _this.gWebControl.wndControl.JS_ClippingPartWnd(dlgGuid, clipData, function (res) {
+            if (0 !== res.code) {
+              reject(textLocale[ErrCodeMsg[res.code]]);
+            } else {
+              resolve(res);
+            }
+          });
+        } else {
+          reject(textLocale.controlNotLoaded);
+        }
+      });
+    };
+    //查询当前选择窗口
+    _this._getActiveVideo = function () {
+      return new Promise(function (resolve, reject) {
+        if (_this.gWebControl) {
+          _this.gWebControl.wndControl.JS_GetFocus(function (res) {
+            if (0 === res.code) {
+              var ResourceId = res.data.lResId;
+              resolve(parseInt(ResourceId));
+            } else {
+              resolve(-1);
+            }
+          });
+        } else {
+          resolve(-1);
+        }
+      });
+    };
+    _this._isIe = function () {
+      if (Object.prototype.hasOwnProperty.call(window, 'ActiveXObject')) {
+        return true;
+      } else if (navigator.userAgent.indexOf('rv:11') > -1) {
+        // IE11
+        return true;
+      } else if (navigator.userAgent.indexOf('Edge') > -1) {
+        // Edge
+        return true;
+      } else {
+        return false;
+      }
+    };
+    //鼠标拖拽设备进行视频播放
+    _this.deviceDrop = function (param) {
+      var type = param.type,
+        channelID = param.channelID,
+        BeginTime = param.BeginTime,
+        EndTime = param.EndTime;
+      if (channelID && type && ['live', 'reply'].includes(type)) {
+        _this.getOnHover().then(function (winID) {
+          if (winID > -1) {
+            if (type === 'live') {
+              _this.startLive({
+                channelID: channelID,
+                winID: winID
+              });
+            } else {
+              var _param = {
+                channelID: channelID,
+                winID: winID
+              };
+              if (BeginTime && EndTime && new Date(BeginTime).getTime() < new Date(EndTime).getTime()) {
+                Object.assign(_param, {
+                  BeginTime: BeginTime,
+                  EndTime: EndTime
+                });
+                _this.startReply(_param);
+              }
+            }
+          }
+        });
+
+        // const{ x, y, width, height } = document.getElementById(this.state.dlgGuid).getBoundingClientRect();
+        // const { clientX, clientY } = e;
+
+        // let relativeX = clientX - x;
+        // let relativeY = clientY - y;
+
+        // let winID = -1;
+
+        // const { screenSplitType } = this.state;
+
+        // if([1, 4, 9, 16, 25].includes(screenSplitType)){
+        //     let widthUnit = width / Math.sqrt(screenSplitType);
+        //     let heightUnit = height / Math.sqrt(screenSplitType);
+        //     let row = Math.floor(relativeY / heightUnit);
+        //     let col = Math.floor(relativeX / widthUnit);
+
+        //     winID = row * Math.sqrt(screenSplitType) + col;
+        // }
+      }
+
+      // e.stopPropagation();
+    };
+    //#endregion
+    //#region 视频及云台面板等参数控制
+    //云台控制
+    _this.ptzEnableCtr = function () {
+      var status = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+      var textLocale = _this.props.textLocale;
+      return new Promise(function (resolve, reject) {
+        if (_this.gWebControl) {
+          _this._getActiveVideo().then(function (data) {
+            if (data !== -1) {
+              var that = _this;
+              that.gWebControl.SDKControl.JS_enable3DPosition(parseInt(data), false, function () {
+                that.gWebControl.SDKControl.JS_enableDigitalZoom(parseInt(data), false, function () {
+                  that.gWebControl.SDKControl.JS_enablePtzCtrl(data, status, function (res) {
+                    if (0 !== res.code) {
+                      reject(textLocale[ErrCodeMsg[res.code]]);
+                    } else {
+                      resolve(res);
+                    }
+                  });
+                });
+              });
+            }
+          });
+        } else {
+          reject(textLocale.controlNotLoaded);
+        }
+      });
+    };
+    //云台方向控制
+    _this.ptzCtr = function (ptzcontrolcmd) {
+      var dwSpeed = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 5;
+      var textLocale = _this.props.textLocale;
+      return new Promise(function (resolve, reject) {
+        if (_this.gWebControl) {
+          _this._getActiveVideo().then(function (data) {
+            if (data !== -1) {
+              var dataMap = {
+                resID: parseInt(data),
+                dwPresetCmd: ptzcontrolcmd,
+                dwSpeed: dwSpeed
+              };
+              _this.gWebControl.SDKControl.JS_pTZControl(dataMap, function (res) {
+                if (0 !== res.code) {
+                  reject(textLocale[ErrCodeMsg[res.code]]);
+                } else {
+                  resolve(res);
+                }
+              });
+            }
+          });
+        } else {
+          reject(textLocale.controlNotLoaded);
+        }
+      });
+    };
+    //查询预置位列表
+    _this.getPtzPresetList = function () {
+      var textLocale = _this.props.textLocale;
+      return new Promise(function (resolve, reject) {
+        if (_this.gWebControl) {
+          var that = _this;
+          _this._getActiveVideo().then(function (data) {
+            if (data !== -1) {
+              var channelID = that.wndObj[data] ? that.wndObj[data].channelID : '';
+              if (!channelID) {
+                reject(textLocale.channelIDNotExist);
+              }
+              that.gWebControl.SDKControl.JS_getPTZPresetList(parseInt(that.state.loginHandle), channelID, function (res) {
+                if (0 !== res.code) {
+                  reject(textLocale[ErrCodeMsg[res.code]]);
+                } else {
+                  resolve(res);
+                }
+              });
+            }
+          });
+        } else {
+          reject(textLocale.controlNotLoaded);
+        }
+      });
+    };
+    //预置位控制控制
+    _this.ptzPresetCtr = function (presetData) {
+      var textLocale = _this.props.textLocale;
+      return new Promise(function (resolve, reject) {
+        if (_this.gWebControl) {
+          _this._getActiveVideo().then(function (data) {
+            if (data !== -1) {
+              var dataMap = {
+                resID: data,
+                dwPresetCmd: presetData.dwPresetCmd,
+                szPresetName: presetData.szPresetName,
+                dwPresetID: presetData.dwPresetID
+              };
+              var that = _this;
+              that.gWebControl.SDKControl.JS_pTZPreset(dataMap, function (res) {
+                that.getPtzPresetList().then(function (res) {
+                  that.setState({
+                    presetListOptions: res.data.PresetList
+                  });
+                }).catch(function (err) {
+                  err && message.error(err);
+                  that.setState({
+                    presetListOptions: []
+                  });
+                });
+                if (0 !== res.code) {
+                  reject(textLocale[ErrCodeMsg[res.code]]);
+                } else {
+                  resolve(res);
+                }
+              });
+            }
+          });
+        } else {
+          reject(textLocale.controlNotLoaded);
+        }
+      });
+    };
+    //本地剪辑
+    _this.localRecord = function () {
+      var status = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+      var condition = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+        szFileName: 'C:\\DownLoad\\record_' + moment().format('YYYYMMDDHHmmss'),
+        dwFormat: MediaFileFormat.MEDIA_FILE_MP4
+      };
+      var textLocale = _this.props.textLocale;
+      return new Promise(function (resolve, reject) {
+        if (_this.gWebControl) {
+          _this._getActiveVideo().then(function (data) {
+            if (data !== -1) {
+              if (status) {
+                var param = {
+                  resID: data,
+                  szFileName: condition.szFileName + '_' + _this.wndObj[data].chnName,
+                  dwFormat: condition.dwFormat
+                };
+                var that = _this;
+                _this.gWebControl.SDKControl.JS_saveRealData(param, function (res) {
+                  if (0 !== res.code) {
+                    reject(textLocale[ErrCodeMsg[res.code]]);
+                  } else {
+                    resolve(res);
+                  }
+                  that.wndObj[data].recordEnable = true;
+                });
+              } else {
+                var _that3 = _this;
+                _this.gWebControl.SDKControl.JS_stopSavaRealData(data, function (res) {
+                  if (0 !== res.code) {
+                    reject(textLocale[ErrCodeMsg[res.code]]);
+                  } else {
+                    resolve(res);
+                  }
+                  _that3.wndObj[data].recordEnable = false;
+                });
+              }
+            }
+          });
+        } else {
+          reject(textLocale.controlNotLoaded);
+        }
+      });
+    };
+    //数字放大
+    _this.digitalZoomEnableCtr = function () {
+      var status = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+      var textLocale = _this.props.textLocale;
+      return new Promise(function (resolve, reject) {
+        if (_this.gWebControl) {
+          _this._getActiveVideo().then(function (data) {
+            if (data !== -1) {
+              var that = _this;
+              that.gWebControl.SDKControl.JS_enablePtzCtrl(parseInt(data), false, function () {
+                that.gWebControl.SDKControl.JS_enable3DPosition(parseInt(data), false, function () {
+                  that.gWebControl.SDKControl.JS_enableDigitalZoom(data, status, function (res) {
+                    if (0 !== res.code) {
+                      reject(textLocale[ErrCodeMsg[res.code]]);
+                    } else {
+                      resolve(res);
+                    }
+                  });
+                });
+              });
+            }
+          });
+        } else {
+          reject(textLocale.controlNotLoaded);
+        }
+      });
+    };
+    //3D定位
+    _this.ptz3DPositionEnableCtr = function () {
+      var status = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+      var textLocale = _this.props.textLocale;
+      return new Promise(function (resolve, reject) {
+        if (_this.gWebControl) {
+          _this._getActiveVideo().then(function (data) {
+            if (data !== -1) {
+              var that = _this;
+              that.gWebControl.SDKControl.JS_enablePtzCtrl(parseInt(data), false, function () {
+                that.gWebControl.SDKControl.JS_enableDigitalZoom(parseInt(data), false, function () {
+                  that.gWebControl.SDKControl.JS_enable3DPosition(data, status, function (res) {
+                    if (0 !== res.code) {
+                      reject(textLocale[ErrCodeMsg[res.code]]);
+                    } else {
+                      resolve(res);
+                    }
+                  });
+                });
+              });
+            }
+          });
+        } else {
+          reject(textLocale.controlNotLoaded);
+        }
+      });
+    };
+    //扬声器声音开关控制
+    _this.soundEnableCtr = function () {
+      var status = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+      var textLocale = _this.props.textLocale;
+      return new Promise(function (resolve, reject) {
+        if (_this.gWebControl) {
+          _this._getActiveVideo().then(function (data) {
+            if (data !== -1) {
+              var that = _this;
+              var soundFunction = typeof status === 'boolean' && status === true ? 'JS_openSound' : 'JS_closeSound';
+              _this.gWebControl.SDKControl[soundFunction](data, function (res) {
+                if (0 !== res.code) {
+                  reject(textLocale[ErrCodeMsg[res.code]]);
+                } else {
+                  resolve(res);
+                }
+                that.wndObj[data].soundEnable = status;
+              });
+            }
+          });
+        } else {
+          reject(textLocale.controlNotLoaded);
+        }
+      });
+    };
+    //获取扬声器音量
+    _this.getSoundVolume = function () {
+      var textLocale = _this.props.textLocale;
+      return new Promise(function (resolve, reject) {
+        var that = _this;
+        if (_this.gWebControl) {
+          _this._getActiveVideo().then(function (data) {
+            if (data !== -1) {
+              _this.gWebControl.SDKControl.JS_getSoundVolume(data, function (res) {
+                if (0 !== res.code) {
+                  reject(textLocale[ErrCodeMsg[res.code]]);
+                } else {
+                  resolve(res);
+                }
+              });
+            }
+          });
+        } else {
+          reject(textLocale.controlNotLoaded);
+        }
+      });
+    };
+    //调节扬声器音量
+    _this.setSoundVolume = function (volume) {
+      var textLocale = _this.props.textLocale;
+      return new Promise(function (resolve, reject) {
+        if (_this.gWebControl) {
+          if (typeof volume !== 'number' || volume < 0 || volume > 255) {
+            reject(textLocale.parameterInvalid);
+          }
+          _this._getActiveVideo().then(function (data) {
+            if (data !== -1) {
+              var dataMap = {
+                resID: parseInt(data),
+                dwVolume: volume
+              };
+              var that = _this;
+              _this.gWebControl.SDKControl.JS_setSoundVolume(dataMap, function (res) {
+                if (0 !== res.code) {
+                  reject(textLocale[ErrCodeMsg[res.code]]);
+                } else {
+                  resolve(res);
+                }
+              });
+            }
+          });
+        } else {
+          reject(textLocale.controlNotLoaded);
+        }
+      });
+    };
+    //#endregion
+    //#region 云台组件相关回调及属性
+    //云台操作指令回调
+    _this.ptzOperationCallback = function (operateType, ptzCmdID, operateDes) {
+      if (operateType === 'direction') {
+        _this.ptzCtr(ptzCmdID, _this.state.ptzSpeed);
+      }
+    };
+    //云台关闭回调
+    _this.onPtzPnlCloseClick = function (x, y) {
+      _this.showPtzModal(false, 'vms-ptzctr-panel');
+      _this.setState({
+        showPtzPanel: false
+      }, function () {
+        if (_this.props.onPtzPanelClose) {
+          _this.props.onPtzPanelClose();
+        }
+      });
+    };
+    //云台面板更多部分展开和收起控制
+    _this.onShowMorePanel = function (isShow) {
+      var ptzPanel = _this.popPanelPos['vms-ptzctr-panel'];
+      if (!ptzPanel) {
+        return;
+      }
+      var newPos = JSON.parse(JSON.stringify(ptzPanel));
+      var that = _this;
+      _this.clippingPartWnd(_objectSpread(_objectSpread({}, newPos), {}, {
+        lClip: !ptzPanel.lClip
+      })).then(function (res) {
+        if (isShow) {
+          Object.assign(newPos, {
+            lTop: ptzPanel.lTop - 90,
+            lHeight: ptzPanel.lHeight + 90
+          });
+        } else {
+          Object.assign(newPos, {
+            lTop: ptzPanel.lTop + 90,
+            lHeight: ptzPanel.lHeight - 90
+          });
+        }
+        Object.assign(that.popPanelPos, {
+          'vms-ptzctr-panel': newPos
+        });
+        that.clippingPartWnd(newPos);
+        that.setState({
+          ptzPanelBottom: isShow ? 90 : 0
+        });
+      });
+    };
+    //云台中弹窗控制
+    _this.showPtzModal = function (isShow, className) {
+      if (isShow) {
+        setTimeout(function () {
+          var dom = document.getElementsByClassName(className || 'ant-modal-content');
+          var dom2 = document.getElementById(_this.state.dlgGuid);
+          if (dom && dom.length > 0 && dom2) {
+            var react = dom[0].getBoundingClientRect();
+            var react2 = dom2.getBoundingClientRect();
+            var newPos = {
+              lLeft: react.left - react2.left,
+              lTop: react.top - react2.top,
+              lWidth: react.width,
+              lHeight: react.height,
+              lClip: isShow
+            };
+            var popName = 'modalPos';
+            if (className) {
+              popName = className;
+            }
+            _this.popPanelPos[popName] = newPos;
+            _this.clippingPartWnd(newPos);
+          }
+        }, 500);
+      } else {
+        var popName = 'modalPos';
+        if (className) {
+          popName = className;
+        }
+        if (_this.popPanelPos[popName]) {
+          _this.clippingPartWnd(_objectSpread(_objectSpread({}, _this.popPanelPos[popName]), {}, {
+            lClip: isShow
+          }));
+          Reflect.deleteProperty(_this.popPanelPos, popName);
+        }
+      }
+    };
+    //云台面板新增、删除、转到预置位回调
+    _this.ptzPresetCallback = function (oper, condition) {
+      if (oper === 0 || oper === 2) {
+        _this.ptzPresetCtr({
+          dwPresetCmd: oper,
+          szPresetName: condition.szPresetName,
+          dwPresetID: condition.dwPresetID
+        });
+      } else if (oper === 1) {
+        if (Array.isArray(condition) && condition.length > 0) {
+          condition.forEach(function (item) {
+            _this.ptzPresetCtr({
+              dwPresetCmd: oper,
+              szPresetName: item.szPresetName,
+              dwPresetID: item.dwPresetID
+            });
+          });
+        }
+      }
+    };
+    _this.isShowPtzPanel = function () {
+      var activeVideo = _this.state.activeVideo;
+      if (_this.wndObj[activeVideo] && _this.wndObj[activeVideo].type === 0 && _this.wndObj[activeVideo].bSupportPTZ) {
+        return true;
+      }
+      return false;
+    };
+    //#endregion
+    //#region 录像下载时间选择弹窗、录像下载任务列表弹窗
+    //关闭下载任务列表面板
+    _this._closeDownloadModal = function () {
+      _this.showPtzModal(false, "".concat(basePrefix, "-modal-content"));
+      _this.setState({
+        showDownload: false
+      }, function () {
+        if (_this.props.onDownloadModalClose) {
+          _this.props.onDownloadModalClose();
+        }
+      });
+    };
+    //关闭时间选择弹窗面板
+    _this._closeDownloadTimeModal = function () {
+      _this.showPtzModal(false, "".concat(basePrefix, "-modal-content"));
+      _this.setState({
+        showDownloadTime: false
+      }, function () {
+        if (_this.props.onDownloadTimeModalClose) {
+          _this.props.onDownloadTimeModalClose();
+        }
+      });
+    };
+    //确认下载
+    _this._downloadOk = function (selectedRows) {
+      var activeVideo = _this.state.activeVideo;
+      if (!_this.wndObj[activeVideo] || !_this.wndObj[activeVideo].channelID) {
+        return;
+      }
+      var promiseAll = [];
+      selectedRows.forEach(function (item) {
+        var promise = new Promise(function (resolve, reject) {
+          var data = {
+            channelID: _this.wndObj[activeVideo].channelID,
+            BeginTime: item.downloadStartTime,
+            EndTime: item.downloadEndTime,
+            downloadSpeed: item.downloadSpeed,
+            format: item.downloadFileType
+          };
+          _this.download(data).then(function (res) {
+            _this.downloadArr.unshift({
+              taskID: _getGuid(),
+              resID: res,
+              channelID: _this.wndObj[activeVideo].channelID,
+              chnName: _this.wndObj[activeVideo].chnName,
+              downloadHandle: res,
+              downloadStartTime: item.downloadStartTime,
+              downloadEndTime: item.downloadEndTime
+            });
+            // this._closeDownloadTimeModal();
+            resolve(res);
+          }).catch(function (err) {
+            err && message.error(err);
+            reject(err);
+          });
+        });
+        promiseAll.push(promise);
+      });
+      Promise.all(promiseAll).then(function () {
+        var textLocale = _this.props.textLocale;
+        _this.props.onDownloadTimeModalClose(true);
+        message.success(textLocale.videoDownLoadSuccess);
+      }).catch(function (err) {});
+    };
+    //删除某个下载任务回调
+    _this._deleteTask = function (task) {
+      if (task && task.taskID) {
+        var newTask = _this.downloadArr.filter(function (item) {
+          return item.taskID !== task.taskID;
+        });
+        _this.downloadArr = null;
+        _this.downloadArr = newTask;
+      }
+    };
+    _this._finishTaskCallback = function (record) {
+      if (record && record.taskID && record.progress >= 100) {
+        var newTask = _this.downloadArr.map(function (item) {
+          if (item.taskID === record.taskID) {
+            return _objectSpread(_objectSpread({}, item), {}, {
+              isFinished: true
+            });
+          } else {
+            return item;
+          }
+        });
+        _this.downloadArr = null;
+        _this.downloadArr = newTask;
+      }
+    };
+    _this.state = {
+      dlgGuid: _getGuid(),
+      loginHandle: '',
+      screenSplitType: props.screenSplitType || 4,
+      activeVideo: 0,
+      showPtzPanel: props.showPtzPanel || false,
+      ptzSpeed: 5,
+      ptzPanelBottom: 0,
+      presetListOptions: [],
+      videoMsg: '',
+      showDownload: props.showDownload || false,
+      showDownloadTime: props.showDownloadTime || false,
+      downloadStartTime: props.downloadStartTime || moment().startOf('day').format('YYYY/MM/DD HH:mm:ss'),
+      downloadEndTime: props.downloadEndTime || moment().format('YYYY/MM/DD HH:mm:ss')
+    };
+    _this.gWebControl = null;
+    _this.gInitCount = 0;
+    _this.base64encodechars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
+    _this.wndObj = {};
+    _this.popPanelPos = {};
+    _this.recordDefaultParam = {
+      fileType: EventType.ALL,
+      BeginTime: moment().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
+      EndTime: moment().format('YYYY-MM-DD HH:mm:ss'),
+      recordLocation: RecordLocation.NETDEV_RECORD_LOCATION_ALL
+    };
+    _this.downloadArr = [];
+    _this.vmsIP = props.platFormLoginInfo.vmsIP || window.sessionStorage.getItem('vmsIP');
+    _this.username = props.platFormLoginInfo.vmsUser || window.sessionStorage.getItem('vmsUser');
+    _this.password = props.platFormLoginInfo.vmsPassword || window.sessionStorage.getItem('vmsPassword');
+    //   this.decrypt(props.platFormLoginInfo.vmsPassword) ||
+    //   this.decrypt(window.sessionStorage.getItem('vmsPassword'));
+    // message.config({ getContainer: () => window.parent.document.body });
+    return _this;
+  }
+  _inherits(VmsVideoPanel, _Component);
+  return _createClass(VmsVideoPanel, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+      var scrollPanelId = this.props.scrollPanelId;
+      setTimeout(function () {
+        _this2.initPlugin(function () {
+          window.addEventListener('message', _this2._getParentMessage);
+          window.addEventListener('beforeunload', _this2._handleCloseWindow);
+          if (scrollPanelId) {
+            var panelDom = document.getElementById(scrollPanelId);
+            _this2._resolveScrollPanel(panelDom);
+            panelDom.addEventListener('scroll', _this2._scroll);
+          }
+        });
+      }, 1000);
+    }
+  }, {
+    key: "componentWillReceiveProps",
+    value: function componentWillReceiveProps(nextProps) {
+      var _this3 = this;
+      if (nextProps.screenSplitType !== undefined && nextProps.screenSplitType !== this.state.screenSplitType) {
+        if (nextProps.screenSplitType && typeof nextProps.screenSplitType === 'number' && [1, 4, 6, 8, 9, 10, 13, 16, 25].includes(nextProps.screenSplitType)) {
+          this.setState({
+            screenSplitType: nextProps.screenSplitType
+          }, function () {
+            _this3.splitControl();
+          });
+        }
+      }
+      if (nextProps.showPtzPanel !== undefined && nextProps.showPtzPanel !== this.state.showPtzPanel) {
+        if (nextProps.showPtzPanel) {
+          this.getPtzPresetList().then(function (res) {
+            _this3.setState({
+              presetListOptions: res.data.PresetList
+            });
+          }).catch(function (err) {
+            err && message.error(err);
+            _this3.setState({
+              presetListOptions: []
+            });
+          });
+        }
+        this.setState({
+          showPtzPanel: nextProps.showPtzPanel
+        }, function () {
+          _this3.showPtzModal(nextProps.showPtzPanel, 'vms-ptzctr-panel');
+        });
+      }
+      if (nextProps.showDownload !== undefined && nextProps.showDownload !== this.state.showDownload) {
+        this.setState({
+          showDownload: nextProps.showDownload
+        }, function () {
+          _this3.showPtzModal(nextProps.showDownload, "".concat(basePrefix, "-modal-content"));
+        });
+      }
+      if (nextProps.showDownloadTime !== undefined && nextProps.showDownloadTime !== this.state.showDownloadTime) {
+        this.setState({
+          showDownloadTime: nextProps.showDownloadTime,
+          downloadStartTime: nextProps.downloadStartTime,
+          downloadEndTime: nextProps.downloadEndTime
+        }, function () {
+          _this3.showPtzModal(nextProps.showDownloadTime, "".concat(basePrefix, "-modal-content"));
+        });
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      var _this4 = this;
+      var dlgGuid = this.state.dlgGuid;
+      var scrollPanelId = this.props.scrollPanelId;
+      this.gWebControl = null;
+      window.removeEventListener('message', this._getParentMessage);
+      window.removeEventListener('beforeunload', this._handleCloseWindow);
+      scrollPanelId && document.getElementById(scrollPanelId).removeEventListener('scroll', this._scroll);
+      if (this.downloadArr && this.downloadArr.length > 0) {
+        this.downloadArr.forEach(function (item) {
+          _this4.gWebControl.SDKControl.JS_stopDownload(item.downloadHandle);
+        });
+        this.downloadArr = [];
+      }
+      webPlugin.JS_DestroyWnd(dlgGuid, function () {});
+    }
+  }, {
+    key: "initPlugin",
+    value:
+    //#region  视频控件初始化，包括建立ws连接、初始化dlg、创建dlg以及登录VMS
+
+    function initPlugin(callback) {
+      var dlgGuid = this.state.dlgGuid;
+      var _this$props = this.props,
+        textLocale = _this$props.textLocale,
+        initCallback = _this$props.initCallback,
+        colorObj = _this$props.colorObj;
+      var that = this;
+      var newColor = _objectSpread({
+        focusColor: 0xe0b500,
+        unfocusColor: 0x646464,
+        background: 0x000000
+      }, colorObj);
+      webPlugin.JS_CreateWebControl({
+        ServerBeginPort: 19000,
+        ServerEndPort: 19004,
+        cbConnectSuccess: function cbConnectSuccess(res) {
+          console.log('websocket connect success!');
+          webPlugin.JS_CreateWnd(dlgGuid, newColor, function (res) {
+            if (res.code === 0) {
+              that.gWebControl = res.data;
+              try {
+                that.loginVMS(function (res) {
+                  if (res) {
+                    that.showDlg(true);
+                    that.setState({
+                      videoMsg: ''
+                    });
+                    that.splitControl();
+                    initCallback && initCallback();
+                  }
+                });
+              } catch (e) {
+                message.error(textLocale.playerLoginFailure);
+                that.setState({
+                  videoMsg: textLocale.playerLoginFailure
+                });
+                console.log('JS_devLogin faild!');
+              }
+              window.initFlag = true;
+              callback();
+            } else {
+              that.gWebControl = null;
+              window.initFlag = false;
+              that.setState({
+                videoMsg: textLocale.failedPlayerInstance
+              });
+              message.error(textLocale[ErrCodeMsg[res.code]][res.code] || textLocale.operationFailure);
+            }
+          });
+        },
+        cbConnectFail: function cbConnectFail(err) {
+          //utils.MSG.globalMsg('插件未启动，正在尝试启动中，请稍后...');
+          console.log('websocket connect fail!');
+          utils.BROWER.weakUp('NetDEVPluginSDK:\\');
+          that.gInitCount++;
+          if (that.gInitCount < 3) {
+            setTimeout(that.initPlugin.apply(that), 3000); //间隔3秒钟，尝试连接一次websocket，最多3次
+          } else {
+            message.error(textLocale.pleaseCheckPlayerIsStart);
+            that.setState({
+              videoMsg: textLocale.playerIsNotStarted
+            });
+            console.log('websocket connect fail!');
+          }
+        },
+        cbConnnectClose: function cbConnnectClose(msg) {
+          that.setState({
+            videoMsg: textLocale.playerIsNotStarted
+          });
+          console.log('websocket connect close!');
+        },
+        eventCallback: function eventCallback(res) {
+          var eventCallback = that.props.eventCallback;
+          eventCallback && eventCallback(res);
+          if (res && res.msg && res.msg.MsgType === 2 && res.msg.info.lButtonAct === 515) {
+            if (this.state.screenSplitType === 6) {
+              if (this.props.gridTraceByCamera && typeof this.props.gridTraceByCamera === 'function') {
+                this.props.gridTraceByCamera(res.msg.ResID, true);
+                return;
+              }
+            }
+          }
+          if (res && res.msg && res.msg.MsgType === 2 && res.msg.info.lButtonAct === 514) {
+            that.changeWin(parseInt(res.msg.ResID), res.msg.info);
+          }
+        }
+      });
+    }
+  }, {
+    key: "splitControl",
+    value:
+    //#endregion
+
+    //#region 视频窗格相关控制
+
+    //分屏
+    function splitControl() {
+      var customerSpilit = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : -1;
+      var textLocale = this.props.textLocale;
+      if (this.gWebControl != null) {
+        var spilit = this.state.screenSplitType;
+        if (customerSpilit && typeof customerSpilit === 'number' && [1, 4, 6, 8, 9, 10, 13, 16, 25].includes(customerSpilit)) {
+          this.setState({
+            screenSplitType: customerSpilit
+          });
+          spilit = customerSpilit;
+        }
+        var that = this;
+        this.gWebControl.wndControl.JS_SetWndPos(0, spilit, function (res) {
+          if (res.code === 0) {
+            that.gWebControl.wndControl.JS_SetFocus(0, function (res) {
+              if (res.code === 0) {
+                that.callbackWinStatus(0);
+                that.setState({
+                  activeVideo: 0
+                });
+              }
+            });
+          } else {
+            message.error(textLocale[ErrCodeMsg[res.code]]);
+          }
+        });
+      }
+    }
+  }, {
+    key: "render",
+    value:
+    //#endregion
+
+    function render() {
+      var _this$state2 = this.state,
+        dlgGuid = _this$state2.dlgGuid,
+        showPtzPanel = _this$state2.showPtzPanel,
+        activeVideo = _this$state2.activeVideo,
+        presetListOptions = _this$state2.presetListOptions,
+        ptzPanelBottom = _this$state2.ptzPanelBottom,
+        showDownload = _this$state2.showDownload,
+        showDownloadTime = _this$state2.showDownloadTime,
+        downloadStartTime = _this$state2.downloadStartTime,
+        downloadEndTime = _this$state2.downloadEndTime,
+        videoMsg = _this$state2.videoMsg;
+      var style = {
+        position: 'absolute',
+        width: '100%',
+        height: '100%',
+        left: 0,
+        bottom: 0
+      };
+      var textLocale = this.props.textLocale;
+      return /*#__PURE__*/React.createElement("div", {
+        className: "vms-video-panel",
+        style: {
+          position: 'relative',
+          width: '100%',
+          height: '100%'
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "vms-video-panel-contaner",
+        id: dlgGuid,
+        style: {
+          width: '100%',
+          height: '100%',
+          background: 'black',
+          color: 'red',
+          textAlign: 'center',
+          paddingTop: '25%'
+        }
+      }, videoMsg), (showDownload || showDownloadTime) && /*#__PURE__*/React.createElement(DownloadModal, {
+        isTimeSelect: showDownloadTime,
+        downloadStartTime: downloadStartTime,
+        downloadEndTime: downloadEndTime,
+        taskList: this.downloadArr,
+        gWebControl: this.gWebControl,
+        closeTaskModal: this._closeDownloadModal,
+        closeTimeModal: this._closeDownloadTimeModal,
+        downloadOk: this._downloadOk,
+        deleteTaskCallback: this._deleteTask,
+        finishTaskCallback: this._finishTaskCallback,
+        textLocale: textLocale
+      }));
+    }
+  }]);
+}(Component);
+export default VmsVideoPanel;