@uni-sw/u-design 2.0.4

package/es/components/UVideo/VmsVideoComponent/Component/PtzControl/PtzControlPanel.js

@@ -0,0 +1,1192 @@
+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 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 Button from "../../../../UButton/button";
+import message from "../../../../UMessageBox/message";
+import Modal from "../../../../UModal/modal";
+import Select from "../../../../USelect/select";
+import Slider from "../../../../USlider/slider";
+import Tabs from "../../../../UTabs/tabs";
+import Table from "../../../../UTable/table";
+
+// import { ImosIntl, Log } from '../../../../BaseComponent';
+import "../PtzControl/PtzControlPanel.less";
+import moment from 'moment';
+import * as Restful from "./HttpRequest";
+import { PtzCmd } from "./PtzCmd";
+import PtzPresetAddCtr from "./PtzPresetAddCtr";
+// let { getLanguageTrans } = ImosIntl;
+
+var TabPane = Tabs.TabPane;
+var Option = Select.Option;
+
+/**
+ *云台控制面板
+ */
+var PtzControlPanel = /*#__PURE__*/function (_Component) {
+  function PtzControlPanel(props) {
+    var _this;
+    _classCallCheck(this, PtzControlPanel);
+    _this = _callSuper(this, PtzControlPanel, [props]);
+    //获取节点的位置信息，left、top、width、height
+    _this._getDomPosi = function (dom, type) {
+      if (dom instanceof Element) {
+        var rect = dom.getBoundingClientRect();
+        if (type === undefined) {
+          return rect;
+        } else {
+          return rect[type];
+        }
+      }
+    };
+    //#endregion
+    //tabs切换事件,查询预置位信息
+    _this._onclickChange = function (key) {
+      if (key === '1') {}
+    };
+    //#region 鼠标拖动
+    _this._onMouseDown = function (e) {
+      e.stopPropagation();
+      _this.isMoving = true;
+    };
+    _this._onMouseUp = function (e) {
+      _this.isMoving = false;
+      _this.lastX = null;
+      _this.lastY = null;
+    };
+    _this._onMouseMove = function (e) {
+      if (!_this.isMoving) {
+        return;
+      }
+      if (_this.lastX && _this.lastY) {
+        var dx = e.clientX - _this.lastX;
+        var dy = e.clientY - _this.lastY;
+        //this.setState({ pnlPosX: this.state.pnlPosX + dx, pnlPosY: this.state.pnlPosY + dy });
+        _this.props.movePtzPnl(dx, dy);
+      }
+      _this.lastX = e.clientX;
+      _this.lastY = e.clientY;
+      _this.ptzDirPnlPosi = _this._getDomPosi(_this.ptzDirPnlContainer);
+    };
+    //#endregion 鼠标拖动
+    /**
+     *窗体操作关闭
+     */
+    _this.onCloseClick = function () {
+      _this.props.onPtzPnlCloseClick(_this.state.pnlPosX, _this.state.pnlPosY);
+    };
+    //#region 云台锁定、解锁、释放,
+    /**
+     *锁定云台
+     */
+    _this._onLockPtz = function () {
+      message.destroy();
+      if (_this.curVideoCam !== null) {
+        Restful.LockPtz(_this.curVideoCam.CameraCode, function (ret) {
+          if (ret != null) {
+            if (ret.data.ErrCode === 0) {
+              // Log.log('锁定云台成功');
+              _this.setState({
+                isLock: true
+              });
+            } else {
+              message.error('锁定云台失败,错误信息：' + ret.data.ErrMsg, 1);
+            }
+          } else {
+            message.error('锁定云台失败，返回结果为空', 1);
+          }
+        });
+      } else {
+        message.error('相机信息为空', 1);
+      }
+    };
+    /**
+     * 解锁云台
+     */
+    _this._onUnLockPtz = function () {
+      message.destroy();
+      if (_this.curVideoCam !== null) {
+        Restful.UnLockPtz(_this.curVideoCam.CameraCode, function (ret) {
+          if (ret != null) {
+            if (ret.data.ErrCode === 0) {
+              // Log.log('解锁云台成功', 1);
+              _this.setState({
+                isLock: false
+              });
+            } else {
+              message.error('解锁云台失败,错误信息：' + ret.data.ErrMsg, 1);
+            }
+          } else {
+            message.error('解锁云台失败，返回结果为空', 1);
+          }
+        });
+      } else {
+        message.error('相机信息为空', 1);
+      }
+    };
+    /**
+     * 释放云台
+     */
+    _this._onReleasePtz = function () {
+      message.destroy();
+      if (_this.curVideoCam !== null) {
+        Restful.ReleasePtz(_this.curVideoCam.CameraCode, function (ret) {
+          if (ret != null) {
+            if (ret.data.ErrCode === 0) {
+              // Log.log('释放云台成功', 1);
+              _this.setState({
+                isLock: false
+              });
+            } else {
+              message.error('释放云台失败,错误信息：' + ret.data.ErrMsg, 1);
+            }
+          } else {
+            message.error('释放云台失败，返回结果为空', 1);
+          }
+        });
+      } else {
+        message.error('相机信息为空', 1);
+      }
+    };
+    /**
+     * 启动云台操作-聚焦、倍速、光圈、方向盘、光照、雨刷、红外、加热、除雪。。。。。
+     *@param {*} operateType 操作类型
+     *@param {*} ptzCmdID 操作命令ID
+     *@param {*} operateDes 操作描述
+     */
+    _this.OnOperationPtzDown = function (operateType, ptzCmdID, operateDes) {
+      if (_this.curVideoCam !== null && _this.curVideoCam.CameraCode !== null) {
+        // var condition = this.GetOperateCondition(operateType, ptzCmdID);
+        // this._operatePtz(operateType, ptzCmdID, operateDes);
+        if (_this.props.ptzOperationCallback) {
+          _this.props.ptzOperationCallback(operateType, ptzCmdID, operateDes);
+        }
+      }
+    };
+    /**
+     * 停止云台操作-聚焦、倍速、光圈、方向盘、光照、雨刷、红外、加热、除雪。。。。。
+     *@param {*} operateType 操作类型
+     *@param {*} ptzCmdID 操作命令ID
+     *@param {*} operateDes 操作描述
+     */
+    _this._onOperationPtzUp = function (operateType, ptzCmdID, operateDes) {
+      if (_this.curVideoCam !== null && _this.curVideoCam.CameraCode !== null) {
+        // var condition = this.GetOperateCondition(operateType, ptzCmdID);
+        // this._operatePtz(operateType, condition, operateDes);
+        if (_this.props.ptzOperationCallback) {
+          _this.props.ptzOperationCallback(operateType, ptzCmdID, operateDes);
+        }
+      }
+    };
+    /**
+     *设置扩展面板功能使能:光照、雨刷、红外、加热、除雪。。。。。
+     */
+    _this.SetMorePnlEnable = function (operateType) {
+      switch (operateType) {
+        case 'light':
+          //光照
+          _this.setState({
+            isLightOn: !_this.state.isLightOn
+          });
+          break;
+        case 'wiper':
+          //雨刷
+          _this.setState({
+            isWipertOn: !_this.state.isWipertOn
+          });
+          break;
+        case 'infrare':
+          //红外
+          _this.setState({
+            isInfrareOn: !_this.state.isInfrareOn
+          });
+          break;
+        case 'heat':
+          //加热
+          _this.setState({
+            isHeatOn: !_this.state.isHeatOn
+          });
+          break;
+        default:
+          break;
+      }
+    };
+    //获取操作命令参数-聚焦、倍速、光圈、方向盘、光照、雨刷、红外、加热、除雪。。。。。
+    _this.GetOperateCondition = function (operateType, ptzCmdID) {
+      var condition = {};
+      //部分case可以合并。因为接口说明文档里面没有明确后面三个字段究竟是啥数据，所以分开写，赋值按照老客户端里面的逻辑进行赋值
+      switch (operateType) {
+        case 'forcus':
+          //聚焦参数
+          condition = {
+            PTZCmdID: ptzCmdID,
+            PTZCmdPara1: 6,
+            //老代码里面该字段是写死的...
+            PTZCmdPara2: 6,
+            //老代码里面该字段是写死的...
+            PTZCmdPara3: 6 //预留字段
+          };
+          break;
+        case 'zoom':
+          //变倍
+          condition = {
+            PTZCmdID: ptzCmdID,
+            PTZCmdPara1: 0,
+            //老代码里面该字段是写死的...
+            PTZCmdPara2: 0,
+            //老代码里面该字段是写死的...
+            PTZCmdPara3: 0 //预留字段
+          };
+          break;
+        case 'iris':
+          //光圈
+          condition = {
+            PTZCmdID: ptzCmdID,
+            PTZCmdPara1: 0,
+            //老代码里面该字段是写死的...
+            PTZCmdPara2: 0,
+            //老代码里面该字段是写死的...
+            PTZCmdPara3: 0 //预留字段
+          };
+          break;
+        case 'direction':
+          //方向
+          condition = {
+            PTZCmdID: ptzCmdID,
+            PTZCmdPara1: _this.ptzSpeed,
+            //---云台转速...
+            PTZCmdPara2: _this.ptzSpeed,
+            //---云台转速...
+            PTZCmdPara3: 0 //预留字段
+          };
+          break;
+        case 'light':
+          //光照
+          condition = {
+            PTZCmdID: ptzCmdID,
+            PTZCmdPara1: 0,
+            //老代码里面该字段是写死的...
+            PTZCmdPara2: 0,
+            //老代码里面该字段是写死的...
+            PTZCmdPara3: 0 //预留字段
+          };
+          break;
+        case 'wiper':
+          //雨刷
+          condition = {
+            PTZCmdID: ptzCmdID,
+            PTZCmdPara1: 0,
+            //老代码里面该字段是写死的...
+            PTZCmdPara2: 0,
+            //老代码里面该字段是写死的...
+            PTZCmdPara3: 0 //预留字段
+          };
+          break;
+        case 'infrare':
+          //红外
+          condition = {
+            PTZCmdID: ptzCmdID,
+            PTZCmdPara1: 0,
+            //老代码里面该字段是写死的...
+            PTZCmdPara2: 0,
+            //老代码里面该字段是写死的...
+            PTZCmdPara3: 0 //预留字段
+          };
+          break;
+        case 'heat':
+          //加热
+          condition = {
+            PTZCmdID: ptzCmdID,
+            PTZCmdPara1: 0,
+            //老代码里面该字段是写死的...
+            PTZCmdPara2: 0,
+            //老代码里面该字段是写死的...
+            PTZCmdPara3: 0 //预留字段
+          };
+          break;
+        case 'snow':
+          //除雪
+          condition = {
+            PTZCmdID: ptzCmdID,
+            PTZCmdPara1: 0,
+            //老代码里面该字段是写死的...
+            PTZCmdPara2: 0,
+            //老代码里面该字段是写死的...
+            PTZCmdPara3: 0 //预留字段
+          };
+          break;
+        default:
+          condition = {};
+          break;
+      }
+      return condition;
+    };
+    //云台操作
+    _this._operatePtz = function (operateType, condition, operateDes) {
+      message.destroy();
+      Restful.StartPtz(_this.curVideoCam.CameraCode, function (startRet) {
+        if (startRet != null && startRet.data != null) {
+          if (startRet.data.ErrCode === 0) {
+            Restful.OperationPtz(_this.curVideoCam.CameraCode, JSON.stringify(condition), function (optRet) {
+              if (optRet != null && optRet.data != null) {
+                if (optRet.data.ErrCode === 0) {
+                  // Log.log(operateDes + '操作成功');
+                  if (operateType === 'light' || operateType === 'wiper' || operateType === 'infrare' || operateType === 'heat') {
+                    _this.SetMorePnlEnable(operateType);
+                  }
+                } else {
+                  message.error(operateDes + '操作失败:' + optRet.data.ErrMsg, 1);
+                  return false;
+                }
+              } else {
+                message.error(operateDes + '操作失败,返回结果为空', 1);
+                return false;
+              }
+            });
+          } else {
+            message.error('启动云台控制失败:' + startRet.data.ErrMsg, 1);
+            return false;
+          }
+        } else {
+          message.error('启动云台控制失败，返回结果为空', 1);
+          return false;
+        }
+      });
+    };
+    //查询云台状态
+    _this._queryPtzStatus = function () {
+      message.destroy();
+      if (_this.curVideoCam !== null && _this.curVideoCam.CameraCode !== null) {
+        Restful.QueryPtzStatue(_this.curVideoCam.CameraCode, function (queryRet) {
+          if (queryRet != null && queryRet.data != null) {
+            if (queryRet.data.ErrCode === 0) {
+              // Log.log('查询云台状态成功');
+              //根据查询结果的赋值锁定图标
+              _this.setState({
+                isLock: queryRet.data.Result.Status === 2 ? true : false
+              });
+            } else {
+              message.error('查询云台状态失败:' + queryRet.data.ErrMsg, 1);
+            }
+          } else {
+            message.error('查询云台状态失败，返回结果为空', 1);
+          }
+        });
+      } else {
+        message.error('相机信息为空', 1);
+      }
+    };
+    //#endregion
+    //#region ptzPnl中方向盘事件
+    /**
+     * 方向盘中鼠标移动
+     */
+    _this._onptzDirPnlMove = function (e) {
+      var CenterPosi = {
+        X: _this.ptzDirPnlPosi.width / 2 + _this.ptzDirPnlPosi.left,
+        Y: _this.ptzDirPnlPosi.height / 2 + _this.ptzDirPnlPosi.top
+      };
+      var distance = _this._getDistance(e.clientX, e.clientY, CenterPosi.X, CenterPosi.Y);
+      //判断mousePosi在方向盘的哪个位置，然后进行判断显示
+      var angle = _this._getAngle(e.clientX, e.clientY, CenterPosi.X, CenterPosi.Y, distance);
+      if (distance > 50) {
+        //外圆半径-在方向盘外，需要将标志位都置为false
+        _this.setState({
+          dirIndex: 10
+        });
+      } else if (distance < 23) {
+        //内圆半径-在方向盘中间区域
+        _this.setState({
+          dirIndex: 9
+        });
+      } else {
+        //在方向盘方向区域，根据计算的倾斜角度判断属于哪个区域
+        if (e.clientX > CenterPosi.X) {
+          //右半边：-90度~90度
+          if (angle < -67.5) {
+            //T
+            _this.setState({
+              dirIndex: 1
+            });
+          } else if (angle > -67.5 && angle < -22.5) {
+            //RT
+            _this.setState({
+              dirIndex: 2
+            });
+          } else if (angle > -22.5 && angle < 22.5) {
+            //R
+            _this.setState({
+              dirIndex: 3
+            });
+          } else if (angle > 22.5 && angle < 67.5) {
+            //RB
+            _this.setState({
+              dirIndex: 4
+            });
+          } else if (angle > 67.5) {
+            //B
+            _this.setState({
+              dirIndex: 5
+            });
+          }
+        } else {
+          //左半边：-90度~90度
+          if (angle < -67.5) {
+            //T
+            _this.setState({
+              dirIndex: 1
+            });
+          } else if (angle > -67.5 && angle < -22.5) {
+            //LT
+            _this.setState({
+              dirIndex: 8
+            });
+          } else if (angle > -22.5 && angle < 22.5) {
+            //L
+            _this.setState({
+              dirIndex: 7
+            });
+          } else if (angle > 22.5 && angle < 67.5) {
+            //LB
+            _this.setState({
+              dirIndex: 6
+            });
+          } else if (angle > 67.5) {
+            //B
+            _this.setState({
+              dirIndex: 5
+            });
+          }
+        }
+      }
+    };
+    //计算两点之间的直线距离
+    _this._getDistance = function (x1, y1, x2, y2) {
+      var distance = 0;
+      var x = Math.abs(x1 - x2);
+      var y = Math.abs(y1 - y2);
+      distance = Math.sqrt(x * x + y * y);
+      return distance;
+    };
+    //计算角度
+    _this._getAngle = function (x1, y1, x2, y2, distance) {
+      var angle;
+      var y = y1 - y2;
+      angle = Math.asin(y / distance) * (180 / Math.PI);
+      return angle;
+    };
+    /**
+     * 方向面板鼠标放下
+     */
+    _this._onPtzDirPnlDown = function (cmdID, poerateDes) {
+      //调用操作命令接口
+      _this.OnOperationPtzDown('direction', cmdID, poerateDes);
+    };
+    /**
+     * 方向面板鼠标松开
+     */
+    _this._onPtzDirPnlUp = function (cmdID, poerateDes) {
+      _this._onOperationPtzUp('direction', cmdID, poerateDes);
+    };
+    _this._onPtzDirMidPnlClick = function () {
+      _this._stopCruisePath();
+    };
+    //#endregion
+    //#region 预置位操作
+    /**
+     * 增加预置位鼠标点击
+     */
+    _this._onSetPresetClick = function (e) {
+      if (_this.curVideoCam && _this.curVideoCam.CameraCode) {
+        _this.setState({
+          isShowPresetAddForm: true
+        }, function () {
+          if (_this.props.showPtzModal) {
+            _this.props.showPtzModal(true);
+          }
+        });
+      }
+    };
+    /**
+     * 增加预置位取消点击
+     */
+    _this._onSetPresetCancel = function (e) {
+      _this.setState({
+        isShowPresetAddForm: false
+      }, function () {
+        if (_this.props.showPtzModal) {
+          _this.props.showPtzModal(false);
+        }
+      });
+    };
+    /**
+     * 选择预置位
+     */
+    _this._onPresetSelectedChange = function (value, option) {
+      _this.setState({
+        curSelectedPreset: {
+          dwPresetID: Number(option.key),
+          szPresetName: value
+        }
+      });
+    };
+    /**
+     * 添加预置位点击
+     */
+    _this._addPresetClick = function () {
+      var addPresetCode = _this.presetAddCtrDom.state.curSelPresetCode;
+      message.destroy();
+      if (_this.curVideoCam !== null && _this.curVideoCam.CameraCode != null) {
+        if (!_this.presetAddCtrDom.codeRef.checkTextLegal()) {
+          _this.presetAddCtrDom.refs.code.focus();
+          return;
+        }
+        if (!_this.presetAddCtrDom.nameRef.checkTextLegal()) {
+          _this.presetAddCtrDom.refs.name.focus();
+          return;
+        }
+        var isContains = false;
+        _this.props.presetListOptions.map(function (item) {
+          if (item.dwPresetID === addPresetCode) {
+            isContains = true;
+          }
+        });
+        if (isContains) {
+          _this.setState({
+            isShowModifyPromptForm: true
+          });
+        } else {
+          _this._addPreset();
+        }
+      } else {
+        message.error('相机信息为空', 1);
+      }
+    };
+    /**
+     * 预置位修改提示
+     */
+    _this._presetAddPromptCancel = function () {
+      _this.setState({
+        isShowModifyPromptForm: false
+      });
+    };
+    /**
+     * 添加预置位确定
+     */
+    _this._presetAddPromptOK = function () {
+      _this._addPreset();
+    };
+    //添加/设置预置位
+    _this._addPreset = function () {
+      message.destroy();
+      var addPresetCode = _this.presetAddCtrDom.state.curSelPresetCode;
+      var addPresetName = _this.presetAddCtrDom.nameRef.getInputText();
+      var condition = {
+        dwPresetID: addPresetCode,
+        szPresetName: addPresetName
+      };
+      _this.setState({
+        isShowPresetAddForm: false
+      }, function () {
+        if (_this.props.ptzPresetCallback) {
+          _this.props.ptzPresetCallback(0, condition);
+        }
+        if (_this.props.showPtzModal) {
+          _this.props.showPtzModal(false);
+        }
+      });
+    };
+    /**
+     * 使用预置位/跳转到预置位
+     */
+    _this._usePreset = function (e) {
+      message.destroy();
+      if (_this.curVideoCam && _this.curVideoCam.CameraCode) {
+        if (_this.state.curSelectedPreset == null) {
+          message.warn('请先选择预置位', 1);
+          return;
+        }
+        if (_this.props.ptzPresetCallback) {
+          _this.props.ptzPresetCallback(2, _this.state.curSelectedPreset);
+        }
+      } else {
+        message.error('相机信息为空', 1);
+      }
+    };
+    /**
+     * 删除预置位点击
+     */
+    _this._onDelPresetHandleClick = function () {
+      var presetListOptions = _this.props.presetListOptions;
+      if (0 === presetListOptions.length) {
+        message.info('当前没有预置位可以删除');
+        return;
+      }
+      _this.setState({
+        isShowDelPromptForm: true,
+        deletingPreset: []
+      }, function () {
+        if (_this.props.showPtzModal) {
+          _this.props.showPtzModal(true);
+        }
+      });
+    };
+    /**
+     * 删除预置位取消
+     */
+    _this._onDelPresetHandleCancle = function () {
+      _this.setState({
+        isShowDelPromptForm: false
+      }, function () {
+        if (_this.props.showPtzModal) {
+          _this.props.showPtzModal(false);
+        }
+      });
+    };
+    /**
+     * 删除预置位确定
+     */
+    _this._delPreset = function () {
+      var deletingPreset = _this.state.deletingPreset;
+      message.destroy();
+      if (0 === deletingPreset.length) {
+        message.info('请先选择需要删除的预置位', 1);
+        return;
+      }
+      if (_this.curVideoCam !== null && _this.curVideoCam.CameraCode != null) {
+        _this.setState({
+          isShowDelPromptForm: false
+        }, function () {
+          if (_this.props.ptzPresetCallback) {
+            _this.props.ptzPresetCallback(1, deletingPreset);
+          }
+          if (_this.props.showPtzModal) {
+            _this.props.showPtzModal(false);
+          }
+        });
+      } else {
+        message.error('相机为空信息', 1);
+      }
+    };
+    //#endregion 预置位操作
+    //#region 云台面板扩展界面
+    /**
+     * 显示云台扩展面板
+     */
+    _this._onShowMorePnl = function () {
+      _this.setState({
+        isShowPtzMore: !_this.state.isShowPtzMore
+      });
+      if (_this.props.showMorePanel) {
+        _this.props.showMorePanel(!_this.state.isShowPtzMore);
+      }
+    };
+    /**
+     * 调整转速
+     */
+    _this._onPtzSpeedChange = function (value) {
+      _this.props.onPtzSpeedChange(value);
+      _this.ptzSpeed = value;
+    };
+    _this.state = {
+      pnlPosX: 0,
+      pnlPosY: 0,
+      ptzUserCtr: 0,
+      //当前用户是不是控制云台，1-控制，0-不在控制
+      isLock: false,
+      //当前云台是否已锁定,0-空闲状态，1-连接状态，2-链接锁定，3-状态最大值，0xFFFFFFFF-无效值
+      dirIndex: 10,
+      //方向盘9个方位下标1-9，默认为10
+
+      //控制面板---扩展面板功能信息
+      isShowPtzMore: false,
+      //ptzPnl中扩展面板是否显示
+      isLightOn: false,
+      //是否开启光照
+      isWipertOn: false,
+      //是否开启雨刷
+      isInfrareOn: false,
+      //是否开启红外
+      isHeatOn: false,
+      //是否开启加热
+      isSnowOn: false,
+      //是否开启除雪---暂时未使用
+
+      //控制面板---预置位信息
+      presetListOptions: props.presetListOptions || [],
+      //预置位信息集合
+      curSelectedPreset: null,
+      //当前选择的预置位
+      deletingPreset: [],
+      //待删除的预置位
+
+      isShowPresetAddForm: false,
+      //是否显示预置位添加窗体
+      isShowModifyPromptForm: false,
+      //是否显示预置位修改提示窗体
+      isShowDelPromptForm: false,
+      //是否显示预置位删除提示窗体
+
+      isShowAutoGuardTimeForm: false,
+      //是否显示设置自动看守时间窗体
+      autoGuardTime: 300,
+      //自动看守时间,单位为秒，最大不超过3600秒，0表示不看守
+
+      //控制面板---看守位信息
+      guardEnable: false,
+      //是否启用看守位,默认???
+      guardPositionPlanList: null,
+      //看守位计划信息集合
+      isShowSetGuardForm: false,
+      //是否显示看守位设置界面
+
+      //控制面板---巡航线信息
+      cruisePathList: [],
+      //巡航线信息集合
+      curCruisePathInfo: null,
+      //当前选择的巡航线信息
+      isShowDelCruisrForm: false,
+      //是否显示删除巡航线窗体
+      isShowModifyCruisrForm: false,
+      //是否显示修改巡航线窗体
+      isShosAddCruisrForm: false,
+      //是佛显示添加巡航线窗体
+      guardPlanStatus: 0 //看守位状态
+    };
+    _this.isMoveWithForm = false; //窗体是否进行固定
+    _this.isMoving = false; //窗体是否正在移动，MouseMove时判断。
+
+    _this.lastX = null; //窗体移动位置，计算窗体移动时的偏移
+    _this.lastY = null; //窗体移动位置，计算窗体移动时的偏移
+
+    //this.curVideoDom = this.props.curVideoDom;  //整个DOM节点，*****当前调试使用，记得删除
+    _this.curVideoCam = _this.props.videoCamInfo; //当前video的相机信息-CameraCode CameraName ECIPAddr
+    _this.ptzPnlPosi = {}; //ptzPnl的坐标位置信息
+
+    //PtzPnl中方向盘相关位置信息
+    _this.ptzDirPnlPosi = {}; //ptzPnl中左侧方向盘位置信息
+    _this.relativeDirPnlPosiX = 0; //ptzPnl中鼠标在方向盘中的相对坐标位置
+    _this.relativeDirPnlPosiY = 0; //ptzPnl中鼠标在方向盘中的相对坐标位置
+
+    //鼠标在title中进行拖拽移动---鼠标左键
+    window.onmousemove = function (e) {
+      return _this._onMouseMove(e);
+    };
+    window.onmouseup = function (e) {
+      return _this._onMouseUp(e);
+    };
+    //window.addEventListener('resize', this._reCalcPnlPos);
+
+    _this.isStopChangeIcon = false; //预置位同步时图标更新标志位
+    _this.ptzSpeed = props.initialPtzSpeed === undefined ? 5 : props.initialPtzSpeed; //云台转速---默认为6,范围1-9
+    //转速值
+    _this.speedMarks = {
+      1: '1',
+      2: '2',
+      3: '3',
+      4: '4',
+      5: '5',
+      6: '6',
+      7: '7',
+      8: '8',
+      9: '9'
+    };
+    //预置位删除操作
+    _this.deleteRowSelection = {
+      onChange: function onChange(selectedRowKeys, selectedRows) {
+        _this.setState({
+          deletingPreset: selectedRows
+        });
+      }
+    };
+    //预置位删除表头
+    _this.presetColumns = [{
+      title: '预置位编号',
+      dataIndex: 'dwPresetID',
+      width: 150,
+      key: 'dwPresetID'
+    }, {
+      title: '预置位名称',
+      dataIndex: 'szPresetName',
+      key: 'szPresetName'
+    }];
+    return _this;
+  }
+
+  //#region 生命周期
+  _inherits(PtzControlPanel, _Component);
+  return _createClass(PtzControlPanel, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.ptzDirPnlPosi = this._getDomPosi(this.ptzDirPnlContainer);
+    }
+  }, {
+    key: "render",
+    value:
+    //#endregion 云台面板扩展界面
+
+    function render() {
+      var _this2 = this;
+      var _this$state = this.state,
+        pnlPosX = _this$state.pnlPosX,
+        pnlPosY = _this$state.pnlPosY,
+        isShowPtzMore = _this$state.isShowPtzMore,
+        dirIndex = _this$state.dirIndex,
+        isLightOn = _this$state.isLightOn,
+        isWipertOn = _this$state.isWipertOn,
+        isInfrareOn = _this$state.isInfrareOn,
+        isHeatOn = _this$state.isHeatOn,
+        guardPlanStatus = _this$state.guardPlanStatus,
+        curSelectedPreset = _this$state.curSelectedPreset,
+        isShowPresetAddForm = _this$state.isShowPresetAddForm,
+        isShowDelPromptForm = _this$state.isShowDelPromptForm,
+        isShowModifyPromptForm = _this$state.isShowModifyPromptForm,
+        isShowAutoGuardTimeForm = _this$state.isShowAutoGuardTimeForm,
+        autoGuardTime = _this$state.autoGuardTime,
+        guardEnable = _this$state.guardEnable,
+        isShowSetGuardForm = _this$state.isShowSetGuardForm,
+        guardPositionPlanList = _this$state.guardPositionPlanList,
+        cruisePathList = _this$state.cruisePathList,
+        curCruisePathInfo = _this$state.curCruisePathInfo,
+        isShowDelCruisrForm = _this$state.isShowDelCruisrForm,
+        isShowModifyCruisrForm = _this$state.isShowModifyCruisrForm,
+        isShosAddCruisrForm = _this$state.isShosAddCruisrForm;
+      var _this$props = this.props,
+        style = _this$props.style,
+        presetListOptions = _this$props.presetListOptions;
+      // let guardPlanStatus = guardPositionPlanList && guardPositionPlanList.length > 0 ? guardPositionPlanList[0].PlanStatus : 0;
+
+      return /*#__PURE__*/React.createElement("div", {
+        className: "vms-ptzctr-panel",
+        ref: function ref(el) {
+          return _this2.ptzPnlContainer = el;
+        },
+        style: _objectSpread({
+          position: 'absolute'
+        }, style)
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "ptzctr-panel-title",
+        ref: function ref(el) {
+          return _this2.ptzPnlTitleContainer = el;
+        },
+        onMouseDown: function onMouseDown(e) {
+          return _this2._onMouseDown(e);
+        }
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "ptzctr-panel-title-span1"
+      }, "\u4E91\u53F0"), /*#__PURE__*/React.createElement("div", {
+        className: "ptzctr-panel-title-camname"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "ptzctr-panel-title-span2"
+      }, "\uFF08"), /*#__PURE__*/React.createElement("div", {
+        className: "ptzctr-panel-title-span3"
+      }, this.curVideoCam.CameraName), /*#__PURE__*/React.createElement("div", {
+        className: "ptzctr-panel-title-span4"
+      }, "\uFF09")), /*#__PURE__*/React.createElement("span", {
+        className: "ptzctr-panel-title-split"
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "ptzctr-title-formicon"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "icon-close",
+        onClick: this.onCloseClick
+        // title={getLanguageTrans('ptzClose')}
+        ,
+        title: "\u5173\u95ED"
+      }))), /*#__PURE__*/React.createElement("div", {
+        className: "ptzctr-panel-body"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "ptzctr-body-left",
+        onClick: this.OnPtzDirPnlClick,
+        onMouseMove: this._onptzDirPnlMove
+      }, /*#__PURE__*/React.createElement("div", {
+        ref: function ref(el) {
+          return _this2.ptzDirPnlContainer = el;
+        },
+        className: "ptz-operateIcon-ptzpnlcon",
+        onClick: this.OnPtzDirPnlClick
+      }), dirIndex === 1 && /*#__PURE__*/React.createElement("div", {
+        className: "ptz-operateIcon-TopOnIcon",
+        onMouseDown: function onMouseDown() {
+          return _this2._onPtzDirPnlDown(PtzCmd.MW_PTZ_TILTUP, '向上');
+        },
+        onMouseUp: function onMouseUp() {
+          return _this2._onPtzDirPnlUp(PtzCmd.MW_PTZ_ALLSTOP, '向上停止');
+        }
+      }), dirIndex === 2 && /*#__PURE__*/React.createElement("div", {
+        className: "ptz-operateIcon-TopRightOnIcon",
+        onMouseDown: function onMouseDown() {
+          return _this2._onPtzDirPnlDown(PtzCmd.MW_PTZ_RIGHTUP, '右上');
+        },
+        onMouseUp: function onMouseUp() {
+          return _this2._onPtzDirPnlUp(PtzCmd.MW_PTZ_ALLSTOP, '右上停止');
+        }
+      }), dirIndex === 3 && /*#__PURE__*/React.createElement("div", {
+        className: "ptz-operateIcon-RightOnIcon",
+        onMouseDown: function onMouseDown() {
+          return _this2._onPtzDirPnlDown(PtzCmd.MW_PTZ_PANRIGHT, '向右');
+        },
+        onMouseUp: function onMouseUp() {
+          return _this2._onPtzDirPnlUp(PtzCmd.MW_PTZ_ALLSTOP, '向右停止');
+        }
+      }), dirIndex === 4 && /*#__PURE__*/React.createElement("div", {
+        className: "ptz-operateIcon-BottomRightOnIcon",
+        onMouseDown: function onMouseDown() {
+          return _this2._onPtzDirPnlDown(PtzCmd.MW_PTZ_RIGHTDOWN, '右下');
+        },
+        onMouseUp: function onMouseUp() {
+          return _this2._onPtzDirPnlUp(PtzCmd.MW_PTZ_ALLSTOP, '右下停止');
+        }
+      }), dirIndex === 5 && /*#__PURE__*/React.createElement("div", {
+        className: "ptz-operateIcon-BottomOnIcon",
+        onMouseDown: function onMouseDown() {
+          return _this2._onPtzDirPnlDown(PtzCmd.MW_PTZ_TILTDOWN, '向下');
+        },
+        onMouseUp: function onMouseUp() {
+          return _this2._onPtzDirPnlUp(PtzCmd.MW_PTZ_ALLSTOP, '向下停止');
+        }
+      }), dirIndex === 6 && /*#__PURE__*/React.createElement("div", {
+        className: "ptz-operateIcon-LeftBottomOnIcon",
+        onMouseDown: function onMouseDown() {
+          return _this2._onPtzDirPnlDown(PtzCmd.MW_PTZ_LEFTDOWN, '左下');
+        },
+        onMouseUp: function onMouseUp() {
+          return _this2._onPtzDirPnlUp(PtzCmd.MW_PTZ_ALLSTOP, '左下停止');
+        }
+      }), dirIndex === 7 && /*#__PURE__*/React.createElement("div", {
+        className: "ptz-operateIcon-LeftOnIcon",
+        onMouseDown: function onMouseDown() {
+          return _this2._onPtzDirPnlDown(PtzCmd.MW_PTZ_PANLEFT, '向左');
+        },
+        onMouseUp: function onMouseUp() {
+          return _this2._onPtzDirPnlUp(PtzCmd.MW_PTZ_ALLSTOP, '向左停止');
+        }
+      }), dirIndex === 8 && /*#__PURE__*/React.createElement("div", {
+        className: "ptz-operateIcon-TopLeftOnIcon",
+        onMouseDown: function onMouseDown() {
+          return _this2._onPtzDirPnlDown(PtzCmd.MW_PTZ_LEFTUP, '左上');
+        },
+        onMouseUp: function onMouseUp() {
+          return _this2._onPtzDirPnlUp(PtzCmd.MW_PTZ_ALLSTOP, '左上停止');
+        }
+      })), /*#__PURE__*/React.createElement("div", {
+        className: "ptzctr-body-right"
+      }, /*#__PURE__*/React.createElement(Tabs, {
+        className: "ptzctr-body-right-tab",
+        size: "small",
+        onChange: this._onclickChange
+      }, /*#__PURE__*/React.createElement(TabPane, {
+        tab: "\u9884\u7F6E\u4F4D",
+        key: "1"
+      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Select, {
+        className: "ant-select",
+        maxTagCount: 2,
+        dropdownClassName: "ptz-option",
+        placeholder: "\u8BF7\u9009\u62E9\u9884\u7F6E\u4F4D",
+        style: {
+          width: '155px',
+          height: '25px'
+        },
+        dropdownStyle: {
+          backgroundColor: ' #222222',
+          color: 'white',
+          borderRadius: '0px'
+        },
+        dropdownMatchSelectWidth: true,
+        key: curSelectedPreset == null ? '' : curSelectedPreset.dwPresetID,
+        value: curSelectedPreset == null ? '' : curSelectedPreset.szPresetName,
+        onChange: this._onPresetSelectedChange
+      }, presetListOptions.map(function (option) {
+        return /*#__PURE__*/React.createElement(Option, {
+          className: "ant-select-option",
+          style: {
+            fontsize: '12px',
+            color: '#c3c3c3'
+          },
+          key: option.dwPresetID,
+          value: option.szPresetName
+        }, option.szPresetName + '[' + option.dwPresetID + ']');
+      })), /*#__PURE__*/React.createElement("div", {
+        //title="转到预置位"
+        title: "\u8F6C\u5230\u9884\u7F6E\u4F4D",
+        className: "ptzctr-preset-jumptoIcon",
+        onClick: this._usePreset
+      }), /*#__PURE__*/React.createElement("div", {
+        title: "\u589E\u52A0\u9884\u7F6E\u4F4D",
+        className: "ptzctr-preset-addIcon",
+        onMouseUp: this._onSetPresetClick
+      }, /*#__PURE__*/React.createElement(Modal //预置位添加窗体
+      , {
+        title: "\u65B0\u589E\u9884\u7F6E\u4F4D",
+        className: "ptzctr-modal",
+        visible: isShowPresetAddForm,
+        onCancel: this._onSetPresetCancel,
+        onOk: this._addPresetClick,
+        maskClosable: false,
+        destroyOnClose: true,
+        width: "467px",
+        height: "260px",
+        footer: [/*#__PURE__*/React.createElement(Button, {
+          key: "submit",
+          type: "primary",
+          onClick: this._addPresetClick,
+          style: {
+            position: 'absolute',
+            top: '15px',
+            left: ' 110px'
+          }
+        }, "\u786E\u5B9A"), /*#__PURE__*/React.createElement(Button, {
+          key: "back",
+          onClick: this._onSetPresetCancel,
+          style: {
+            position: 'absolute',
+            top: '15px',
+            left: ' 240px'
+          }
+        }, "\u53D6\u6D88")]
+      }, /*#__PURE__*/React.createElement(PtzPresetAddCtr, {
+        ref: function ref(_ref) {
+          return _this2.presetAddCtrDom = _ref;
+        },
+        presetListOptions: presetListOptions
+      })), /*#__PURE__*/React.createElement(Modal //预置位预置位修改提示窗体：如果在预置位添加窗体中选择是已有的预置位，则会显示是否进行覆盖的提示
+      , {
+        className: "ptzctr-modal",
+        title: "\u63D0 \u793A",
+        width: "320px",
+        height: "140px",
+        visible: isShowModifyPromptForm,
+        onCancel: this._presetAddPromptCancel,
+        onOk: this._presetAddPromptOK,
+        maskClosable: false,
+        destroyOnClose: true,
+        footer: [/*#__PURE__*/React.createElement(Button, {
+          key: "submit",
+          type: "primary",
+          onClick: this._presetAddPromptOK,
+          style: {
+            position: 'absolute',
+            top: '15px',
+            left: ' 190px',
+            width: '50px'
+          }
+        }, "\u786E\u5B9A"), /*#__PURE__*/React.createElement(Button, {
+          key: "back",
+          onClick: this._presetAddPromptCancel,
+          style: {
+            position: 'absolute',
+            top: '15px',
+            left: ' 250px',
+            width: '50px'
+          }
+        }, "\u53D6\u6D88")]
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "ptz-delprompt-main"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "prompt-img"
+      }), /*#__PURE__*/React.createElement("span", {
+        className: "prompt-span"
+      }, "\u5C06\u8986\u76D6\u539F\u6765\u7684\u9884\u7F6E\u4F4D\uFF0C\u786E\u5B9A\u8981\u8FDB\u884C\u64CD\u4F5C\u5417\uFF1F")))), /*#__PURE__*/React.createElement("div", {
+        title: "\u5220\u9664\u9884\u7F6E\u4F4D",
+        className: "ptzctr-preset-delIcon",
+        onClick: this._onDelPresetHandleClick
+      }), /*#__PURE__*/React.createElement(Modal, {
+        title: "\u5220\u9664\u9884\u7F6E\u4F4D",
+        className: "ptzctr-preset-delete",
+        visible: isShowDelPromptForm,
+        width: "600px",
+        destroyOnClose: true,
+        maskClosable: false,
+        onCancel: this._onDelPresetHandleCancle,
+        footer: [/*#__PURE__*/React.createElement(Button, {
+          key: "submit",
+          type: "primary",
+          onClick: this._delPreset
+        }, "\u786E\u5B9A"), /*#__PURE__*/React.createElement(Button, {
+          key: "back",
+          onClick: this._onDelPresetHandleCancle
+        }, "\u53D6\u6D88")]
+      }, /*#__PURE__*/React.createElement(Table, {
+        className: "ptzctr-preset-delete-table ".concat(0 === presetListOptions.length ? 'ptzctr-preset-table-no-source' : ''),
+        columns: this.presetColumns,
+        pagination: false,
+        rowKey: "PresetValue",
+        scroll: {
+          y: true
+        },
+        dataSource: presetListOptions,
+        rowSelection: this.deleteRowSelection
+      }))))))), /*#__PURE__*/React.createElement("div", {
+        className: "ptz-speed"
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "morefunction-span"
+      }, " \u4E91\u53F0\u8F6C\u901F\uFF1A"), /*#__PURE__*/React.createElement(Slider, {
+        className: "ptzctr-more-speed",
+        marks: this.speedMarks,
+        step: null,
+        defaultValue: this.ptzSpeed,
+        min: 1,
+        max: 9,
+        onChange: this._onPtzSpeedChange
+      })), isShowPtzMore && /*#__PURE__*/React.createElement("div", {
+        className: "ptzctr-panel-morefunction"
+      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+        className: "morefunction-span"
+      }, " \u4E91\u53F0\u8F6C\u901F\uFF1A"), /*#__PURE__*/React.createElement(Slider, {
+        className: "ptzctr-more-speed",
+        marks: this.speedMarks,
+        step: null,
+        defaultValue: this.ptzSpeed,
+        min: 1,
+        max: 9,
+        onChange: this._onPtzSpeedChange
+      })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+        className: isLightOn ? 'pztctr-more-lightOnIcon' : 'pztctr-more-lightIcon',
+        title: "\u5149\u7167",
+        onClick: isLightOn ? function () {
+          return _this2.OnOperationPtzDown('light', PtzCmd.MW_PTZ_LIGHTOFF, '关闭光照');
+        } : function () {
+          return _this2.OnOperationPtzDown('light', PtzCmd.MW_PTZ_LIGHTON, '开启光照');
+        }
+      }), /*#__PURE__*/React.createElement("div", {
+        className: isWipertOn ? 'pztctr-more-wiperOnIcon' : 'pztctr-more-wiperIcon',
+        title: "\u96E8\u5237",
+        onClick: isWipertOn ? function () {
+          return _this2.OnOperationPtzDown('wiper', PtzCmd.MW_PTZ_BRUSHOFF, '关闭雨刷');
+        } : function () {
+          return _this2.OnOperationPtzDown('wiper', PtzCmd.MW_PTZ_BRUSHON, '开启雨刷');
+        }
+      }), /*#__PURE__*/React.createElement("div", {
+        className: isInfrareOn ? 'pztctr-more-infraredOnIcon' : 'pztctr-more-infraredIcon',
+        title: "\u7EA2\u5916",
+        onClick: isWipertOn ? function () {
+          return _this2.OnOperationPtzDown('infrare', PtzCmd.MW_PTZ_INFRAREDOFF, '关闭红外');
+        } : function () {
+          return _this2.OnOperationPtzDown('infrare', PtzCmd.MW_PTZ_INFRAREDON, '开启红外');
+        }
+      }), /*#__PURE__*/React.createElement("div", {
+        className: isHeatOn ? 'pztctr-more-heatOnIcon' : 'pztctr-more-heatIcon',
+        title: "\u52A0\u70ED",
+        onClick: isWipertOn ? function () {
+          return _this2.OnOperationPtzDown('heat', PtzCmd.MW_PTZ_HEATOFF, '关闭加热');
+        } : function () {
+          return _this2.OnOperationPtzDown('heat', PtzCmd.MW_PTZ_HEATON, '开启加热');
+        }
+      }))));
+    }
+  }]);
+}(Component);
+export { PtzControlPanel as default };