@uni-sw/u-design 2.0.4

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

@@ -0,0 +1,2500 @@
+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 _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+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 _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 _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 _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); }
+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 _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); }
+import React, { Component, createRef, Fragment } from 'react';
+import PropTypes from 'prop-types';
+import message from "../../../UMessageBox/message";
+import Popover from "../../../UPopover";
+import USlider from "../../../USlider";
+import GlobalFunc from "../../InitFunc/GlobalFunc";
+import moment from 'moment';
+import SplitScreen from "../../VideoComponent/SplitScreen";
+import { CUSTOM_PREFIX } from "../../../../globalVarious";
+import "./VmsOperatorItems.less";
+
+// 拼接类名前缀
+var replayPrefix = "".concat(CUSTOM_PREFIX, "-videoReplay");
+// 回放刻度对照表 , '5min', '1min'
+var GRADUATION_TYPES = ['1d', '12h', '4h', '1h', '30min'];
+// 数组中的数据：每个刻度对应应该显示刻度的数量，对应多少ms
+var GRADUATION_MAP = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, GRADUATION_TYPES[4], [6, 30 * 60 * 1000]), GRADUATION_TYPES[3], [6, 60 * 60 * 1000]), GRADUATION_TYPES[2], [8, 4 * 60 * 60 * 1000]), GRADUATION_TYPES[1], [12, 12 * 60 * 60 * 1000]), GRADUATION_TYPES[0], [24, 24 * 60 * 60 * 1000]);
+// 录像标识
+var VIDEO_TAG = [{
+  text: '普通',
+  color: '#588DE8'
+}, {
+  text: '报警',
+  color: '#F44336'
+}, {
+  text: '标签',
+  color: '#2AD430'
+}];
+
+// 1.更新record
+// 2.调整刻度
+// 3.滚轮缩放
+// 需要进行重新绘制 （流程：计算总时间——计算每刻度时间、长度——总长度——总段数——绘制）
+
+// 1.鼠标抓取移动
+// 2.滚动条移动
+// 3.点击当前时间
+// 4.点击某个时间
+// 需要改变translation
+
+export var RATE_OBJ = {
+  '-16': 0,
+  '-8': 1,
+  '-4': 2,
+  '-2': 3,
+  '-1': 4,
+  '1/2': 8,
+  '1/4': 7,
+  1: 9,
+  2: 10,
+  4: 11,
+  8: 12,
+  16: 13
+};
+var VmsOperatorItems = /*#__PURE__*/function (_Component) {
+  function VmsOperatorItems(props) {
+    var _this;
+    _classCallCheck(this, VmsOperatorItems);
+    _this = _callSuper(this, VmsOperatorItems, [props]);
+    /**
+     * 刻度上滚轮滚动
+     * @param {Event} event 滚轮事件
+     */
+    _this._graduationWheel = function (event) {
+      //chrome 滚轮wheelDelta属性 上120 下-120
+      //firefox 滚轮deltaY属性 上-3 下3
+      var wheelNum = event.nativeEvent.wheelDelta || -event.nativeEvent.deltaY;
+      //向下滚动  设置起始和结束各 +1
+      if (wheelNum < 0) {
+        _this._changeTimeControl(false);
+      } else {
+        _this._changeTimeControl(true);
+      }
+    };
+    /**
+     * 刻度上拖拽
+     * @param {Event} event 滚轮事件
+     */
+    _this._graduationDown = function (event) {
+      var _this$state = _this.state,
+        scrollBarWidth = _this$state.scrollBarWidth,
+        graduationLeft = _this$state.graduationLeft;
+      var originX = event.clientX;
+      // 转换为实际像素值
+      var realBarLeft = graduationLeft * _this.totalRealLength;
+
+      /**
+      * 刻度移动
+      * @param {Event} moveEvent
+      */
+      var graduationMove = function graduationMove(moveEvent) {
+        // 如果滚动条显示时满的，不操作
+        if (scrollBarWidth === 1) {
+          return;
+        }
+        var movedX = moveEvent.clientX;
+        var changedX = movedX - originX;
+        var resultLeft = 0;
+        var propressBallLeft = _this.state.propressBallLeft,
+          realBallLeft = propressBallLeft * _this.totalRealLength;
+
+        // 进度球最左侧位置
+        if (realBarLeft - changedX >= realBallLeft) {
+          resultLeft = propressBallLeft;
+        } else if (realBallLeft + changedX >= _this.progressFramewidth + realBarLeft) {
+          // 进度球最右侧位置
+          resultLeft = _this._keepFourPoint((realBallLeft - _this.progressFramewidth) / _this.totalRealLength);
+        } else if (realBarLeft - changedX <= 0) {
+          // 移到最左侧
+          resultLeft = 0;
+        } else if (realBarLeft - changedX + _this.progressFramewidth >= _this.totalRealLength) {
+          // 移到最右侧
+          resultLeft = 1 - scrollBarWidth;
+        } else {
+          resultLeft = graduationLeft - _this._keepFourPoint(changedX / _this.totalRealLength);
+        }
+        _this.setState({
+          graduationLeft: resultLeft
+        });
+      };
+
+      /**
+      * 放开刻度
+      * @param {Event} upEvent
+      */
+      var _graduationUp = function graduationUp(upEvent) {
+        _this.setState({
+          isGraduationDown: false
+        });
+        document.removeEventListener('mousemove', graduationMove);
+        document.removeEventListener('mouseup', _graduationUp);
+      };
+      _this.setState({
+        isGraduationDown: true
+      });
+      document.addEventListener('mousemove', graduationMove);
+      document.addEventListener('mouseup', _graduationUp);
+    };
+    /**
+     * 原始的移动
+     * @param {Number} clientX
+     * @param {Boolean} type 是否需要同步判断
+     */
+    _this._originChangeTime = function (clientX) {
+      var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      // 没有录像时，不操作
+      var replayMess = _this.state.replayMess;
+      if (!replayMess.record || replayMess.record.length === 0) {
+        return;
+      }
+      // 如果是选中录像段之后结束触发的，不操作
+      if (_this.isProgressmark === true) {
+        return;
+      }
+      var posi = _this.realFrame.current.getBoundingClientRect();
+      // 获取点击的left值，然后转换成时间
+      var offsetTime = _this._keepFourPoint((clientX - posi.left) / _this.totalRealLength * _this.totalTime);
+      var resultTime = new Date(new Date(_this.recordStartTime).getTime() + offsetTime);
+
+      // 如果不是同步导致，先判断是否需要同步操作
+      if (!type) {
+        if (_this._feedbackSyncReplay({
+          type: 'jumpTime',
+          param: {
+            time: resultTime
+          }
+        })) {
+          return;
+        }
+      }
+      resultTime = resultTime.getTime() / 1000;
+      _this.singleReplay(4, null, resultTime);
+    };
+    /**
+     * 进度条上点击
+     * @param {Number} clientX
+     */
+    _this._changeTime = GlobalFunc.antiShake(_this._originChangeTime, 500);
+    /**
+     * 原始的移动
+     * @param {Number} clientX
+     */
+    _this._originProgressMove = function (clientX) {
+      // 如果当前正在选中录像段以及拖动进度，不操作
+      if (_this.processMarkMove === true || _this.needPreview === false || _this.isDargJump === true) {
+        if (_this.state.isShowPreview === true) {
+          _this.setState({
+            isShowPreview: false
+          });
+        }
+        return;
+      }
+      var originLeft = clientX;
+      _this.setState({
+        previewLeft: originLeft - _this.frameLeft - _this.previewWidth / 2
+      });
+      var posi = _this.realFrame.current.getBoundingClientRect();
+      // 获取点击的left值，然后转换成时间
+      var offsetTime = _this._keepFourPoint((originLeft - posi.left) / _this.totalRealLength * _this.totalTime);
+      _this.previewTime = new Date(new Date(_this.recordStartTime).getTime() + offsetTime);
+      var isShowPreview = _this.state.isShowPreview;
+      if (isShowPreview === false) {
+        _this.setState({
+          isShowPreview: true
+        });
+      } else {
+        // 跳转下一个时间
+        // this.videoPreview.current.jumpReplayTime(this.previewTime);
+      }
+    };
+    /**
+     * 进度条上移动，预览
+     */
+    _this._progressMove = GlobalFunc.antiShake(_this._originProgressMove, 1000);
+    /**
+     * 移入进度条
+     */
+    _this._progressEnter = function () {
+      _this.needPreview = true;
+    };
+    /**
+     * 移离进度条，隐藏
+     */
+    _this._progressLeave = function () {
+      _this.needPreview = false;
+      _this.setState({
+        isShowPreview: false
+      });
+    };
+    /**
+     * 进度条上选中录像段
+     * @param {Event} mousedown事件
+     */
+    _this._markProgress = function (event) {
+      // 如果是在同步回放中，不进行操作
+      if (_this.props.isSyncing === true) {
+        return;
+      }
+      var clientX = event.clientX;
+      var graduationLeft = _this.state.graduationLeft;
+      _this.isProgressmark = false;
+      // 设置初始left
+      _this.setState({
+        selectedProgressLeft: _this._keepFourPoint((clientX - _this.progressFrameLeft) / _this.totalRealLength + graduationLeft),
+        selectedProgressWidth: 0
+      });
+      // 如果还有操作栏，先删除
+      if (_this.state.isShowSROFrame === true) {
+        clearTimeout(_this.yTimer);
+        _this.yTimer = null;
+        _this._hideSelectedFrame();
+      }
+      var moveFunc = function moveFunc(e) {
+        var movedX = e.clientX - clientX;
+        var markWidth = _this._keepFourPoint(Math.abs(movedX) / _this.totalRealLength);
+        _this.processMarkMove = true;
+        // 如果小于0，说明往左移动，那就需要修改下left值
+        if (movedX < 0) {
+          _this.selectedEnd = clientX;
+          _this.setState({
+            selectedProgressLeft: _this._keepFourPoint((e.clientX - _this.progressFrameLeft) / _this.totalRealLength + graduationLeft)
+          });
+        } else {
+          _this.selectedEnd = e.clientX;
+        }
+        // 如果大于0，往右移动，只需要修改width
+        _this.setState({
+          selectedProgressWidth: markWidth
+        });
+      };
+      var _upFunc = function upFunc() {
+        var _this$state2 = _this.state,
+          selectedProgressLeft = _this$state2.selectedProgressLeft,
+          selectedProgressWidth = _this$state2.selectedProgressWidth;
+        _this.processMarkMove = false;
+        // 未移动，不操作
+        if (selectedProgressWidth !== 0) {
+          _this.yTimer = setTimeout(function () {
+            clearTimeout(_this.yTimer);
+            _this.yTimer = null;
+            // 添加 点击关闭功能
+            document.addEventListener('click', _this._hideSelectedFrame);
+          });
+          _this.isProgressmark = true;
+
+          // 根据选中录像段绘制信息 计算出选中录像段的起始时间和结束时间
+          var StartTime = new Date(_this.totalTime * selectedProgressLeft + new Date(_this.recordStartTime).getTime());
+          var EndTime = new Date(StartTime.getTime() + _this.totalTime * selectedProgressWidth);
+          _this.progressSelectedTime[0] = StartTime;
+          _this.progressSelectedTime[1] = EndTime;
+          _this.setState({
+            isShowSROFrame: true
+          });
+          _this._setSelectedPosi();
+        }
+        document.removeEventListener('mousemove', moveFunc);
+        document.removeEventListener('mouseup', _upFunc);
+      };
+      document.addEventListener('mousemove', moveFunc);
+      document.addEventListener('mouseup', _upFunc);
+    };
+    /**
+     * 滚动条的mousedown
+     * @param {Event} event
+     */
+    _this._scrollBarDown = function (event) {
+      var _this$state3 = _this.state,
+        scrollBarWidth = _this$state3.scrollBarWidth,
+        graduationLeft = _this$state3.graduationLeft;
+      // 如果滚动条是满的，不操作
+      if (scrollBarWidth === 1) {
+        return;
+      }
+      var originX = event.clientX;
+      // 转换为实际像素值
+      var realBarLeft = graduationLeft * _this.progressFramewidth;
+      var realScrollBarWidth = scrollBarWidth * _this.progressFramewidth;
+
+      /**
+      * 滚动条移动，需要考虑进度球的情况（进度球必须在可视范围内）
+      * @param {Event} moveEvent
+      */
+      var scrollBarMove = function scrollBarMove(moveEvent) {
+        var movedX = moveEvent.clientX;
+        // 因为是在滚动条上移动，需要转换为实际的刻度上的移动
+        var changedX = (movedX - originX) / _this.progressFramewidth * _this.totalRealLength;
+        var resultLeft = 0;
+        var propressBallLeft = _this.state.propressBallLeft,
+          realBallLeft = propressBallLeft * _this.totalRealLength;
+
+        // 进度球移出可视区域，保证在可视区域内
+        // 进度球最左侧位置
+        if (realBarLeft - changedX >= realBallLeft) {
+          resultLeft = _this._keepFourPoint(realBallLeft / _this.progressFramewidth);
+        } else if (realBallLeft + changedX >= _this.progressFramewidth + realBarLeft) {
+          // 进度球最右侧位置
+          resultLeft = _this._keepFourPoint((_this.progressFramewidth - (realBallLeft - realBarLeft)) / _this.progressFramewidth);
+        } else if (realBarLeft + changedX <= 0) {
+          // 移到最左侧
+          resultLeft = 0;
+        } else if (realBarLeft + changedX + realScrollBarWidth >= _this.progressFramewidth) {
+          // 移到最右侧
+          resultLeft = 1 - scrollBarWidth;
+        } else {
+          resultLeft = graduationLeft + _this._keepFourPoint(changedX / _this.progressFramewidth);
+        }
+        _this.setState({
+          graduationLeft: resultLeft
+        });
+      };
+
+      /**
+      * 放开滚动条
+      * @param {Event} upEvent
+      */
+      var _scrollBarup = function scrollBarup(upEvent) {
+        document.removeEventListener('mousemove', scrollBarMove);
+        document.removeEventListener('mouseup', _scrollBarup);
+      };
+      document.addEventListener('mousemove', scrollBarMove);
+      document.addEventListener('mouseup', _scrollBarup);
+    };
+    /**
+     * 时间显示控制器的mousedown
+     * @param {Event} event
+     */
+    _this._timeControlDown = function (event) {
+      var graduation = _this.state.graduation;
+      var originX = event.clientX;
+      var originLeft = graduation / (_this.timeControlNum - 1) * _this.carrier.current.clientWidth;
+      /**
+      * 滚动条移动，需要考虑进度球的情况（进度球必须在可视范围内）
+      * @param {Event} moveEvent
+      */
+      var scrollBarMove = function scrollBarMove(moveEvent) {
+        var movedX = moveEvent.clientX;
+        var changedX = movedX - originX;
+        // 得到移动后的left值，在进行范围取值判断
+        var changedLeft = originLeft + changedX;
+        // 根据移动后的left值，计算出，当前应该在哪个时间范围
+        var resultIndex = _this._rangeValue(changedLeft);
+        // 两者相同，不进行渲染
+        if (resultIndex === _this.state.graduation) {
+          return;
+        }
+        var _this$state4 = _this.state,
+          propressBallLeft = _this$state4.propressBallLeft,
+          graduationLeft = _this$state4.graduationLeft;
+        // 获取进度球的位置，保证刻度改变之后，进度球位置不动
+        _this.realProgressBallLeft = (propressBallLeft - graduationLeft) * _this.totalRealLength;
+        // 设置新的刻度
+        // this.props.setTimeRange(resultIndex);
+        _this.setState({
+          graduation: resultIndex
+        }, function () {
+          // 修改完刻度范围之后，重新绘制
+          _this._renderPage();
+          _this._adjustGraduationPostion();
+          _this._setScrollLength();
+        });
+      };
+
+      /**
+      * 放开滚动条
+      * @param {Event} upEvent
+      */
+      var _scrollBarup2 = function scrollBarup(upEvent) {
+        document.removeEventListener('mousemove', scrollBarMove);
+        document.removeEventListener('mouseup', _scrollBarup2);
+      };
+      document.addEventListener('mousemove', scrollBarMove);
+      document.addEventListener('mouseup', _scrollBarup2);
+    };
+    /**
+     * 停止所有冒泡
+     * @param {event} e
+     */
+    _this._stopAll = function (e) {
+      e.stopPropagation();
+      e.nativeEvent.stopImmediatePropagation();
+    };
+    //#endregion
+    //#region 未知分类
+    /**
+     * 点击当前时间，改变位置
+     */
+    _this._currentTimeClick = function () {
+      var propressBallLeft = _this.state.propressBallLeft,
+        realBallLeft = propressBallLeft * _this.totalRealLength,
+        graduationLeft = 0;
+
+      // 如果长度足够，进度球显示在正中间
+      if (realBallLeft >= _this.progressFramewidth / 2) {
+        graduationLeft = _this._keepFourPoint((realBallLeft - _this.progressFramewidth / 2) / _this.totalRealLength);
+      } else {
+        // 如果长度不够，进度球尽量往中间靠
+        graduationLeft = 0;
+      }
+      _this.setState({
+        graduationLeft: graduationLeft
+      });
+    };
+    /**
+     * 渲染整个页面
+     */
+    _this._renderPage = function () {
+      _this._drawGraduation();
+      _this._drawRealRecord();
+      _this._setScrollLength();
+    };
+    /**
+     * 页面大小改变时调用函数
+     */
+    _this._pageResize = function () {
+      var isShow = _this.props.isShow;
+      // 如果未显示，不操作
+      if (!isShow) {
+        _this.needRepaint = true;
+        return;
+      }
+      _this._getProgressFrameWidth();
+      _this._renderPage();
+    };
+    /**
+     * 显示更多
+     * @param {event} event
+     */
+    _this._showMore = function (event) {
+      if (!_this._canItUse()) {
+        return;
+      }
+      event.stopPropagation();
+      event.nativeEvent.stopImmediatePropagation();
+      var isShowMore = _this.state.isShowMore;
+      _this.setState({
+        isShowMore: !isShowMore
+      });
+      /**
+      * 关闭更多显示
+      */
+      var _closeShowMore2 = function _closeShowMore() {
+        _this.setState({
+          isShowMore: false
+        });
+        document.removeEventListener('click', _closeShowMore2);
+      };
+      document.addEventListener('click', _closeShowMore2);
+    };
+    /**
+     * 全屏
+     */
+    _this._fullScreen = function () {
+      _this.imosVideo.zoomPlay();
+    };
+    //#endregion
+    //#region 标签管理
+    /**
+     * 确认添加弹窗
+     */
+    _this._addTagOk = function () {
+      if (!_this.textRef.checkTextLegal()) {
+        _this.refs.antdInput.focus();
+        return;
+      }
+      _this.tagName = _this.textRef.getInputText();
+      var tagTime = _this.state.tagTime;
+      var textLocale = _this.props.textLocale;
+      VIIDRestful.fetch({
+        url: '/VIID/record/add',
+        method: 'POST',
+        data: {
+          CamCode: _this.cameraCode,
+          TagTime: {
+            BeginTime: tagTime,
+            EndTime: tagTime
+          },
+          Tag: _this.tagName
+        }
+      }).then(function (res) {
+        var _res$data = res.data,
+          ErrCode = _res$data.ErrCode,
+          ErrMsg = _res$data.ErrMsg;
+        if (ErrCode === 0) {
+          message.success(textLocale.addLableSuccessfully);
+          _this.addTagSuccess();
+          _this._addTagCancel();
+        } else {
+          _this.setState({
+            addTagError: true
+          });
+          // Log.error(ErrMsg);
+        }
+      }).catch(function (err) {
+        // Log.error(err);
+      });
+    };
+    /**
+     * 添加标签弹窗关闭
+     */
+    _this._addTagCancel = function () {
+      _this.setState({
+        isAddTagPop: false
+      });
+    };
+    /**
+     * 添加标签
+     */
+    _this._addTag = function () {
+      var playStatus = _this.imosVideo.getPlayStatusInfo();
+      var recordNow = playStatus.CurrentTime;
+      _this.setState({
+        isAddTagPop: true,
+        tagTime: GlobalFunc.time2String(recordNow)
+      });
+      _this.tagName = '';
+    };
+    /**
+     * 查询标签
+     */
+    _this._queryTag = function () {
+      var value = '';
+      var inputDom = document.getElementById("".concat(replayPrefix, "-VmsOperatorItems-sliceRange-tagManage-input"));
+      if (inputDom && !!inputDom.value) {
+        value = inputDom.value;
+      }
+      var condition = {
+        ItemNum: 3,
+        Condition: [{
+          QueryType: 1,
+          LogicFlag: 5,
+          QueryData: value
+        }, {
+          QueryType: 230,
+          LogicFlag: 3,
+          QueryData: GlobalFunc.time2String(_this.recordStartTime)
+        }, {
+          QueryType: 230,
+          LogicFlag: 4,
+          QueryData: GlobalFunc.time2String(_this.recordEndTime)
+        }],
+        QueryCount: 0,
+        PageFirstRowNumber: 0,
+        PageRowNum: 200
+      };
+      // todo 暂时只查询200条
+      VIIDRestful.fetch({
+        url: '/VIID/record/tag/list',
+        params: {
+          code: _this.cameraCode,
+          condition: condition
+        }
+      }).then(function (res) {
+        var _res$data2 = res.data,
+          ErrCode = _res$data2.ErrCode,
+          ErrMsg = _res$data2.ErrMsg,
+          Result = _res$data2.Result;
+        if (ErrCode !== 0) {
+          // Log.error(ErrMsg);
+          return;
+        }
+        var InfoList = Result.InfoList;
+        var tempTag = [];
+        // 对时间进行操作
+        InfoList.forEach(function (element) {
+          var time = element.TagTime;
+          time = time.replace(/-/g, '/');
+          element.TagTime = new Date(time);
+          tempTag.push(element);
+        });
+        _this.setState({
+          tagList: tempTag
+        });
+      }).catch(function (err) {
+        // Log.error(err);
+      });
+    };
+    /**
+     * 显示标签管理
+     */
+    _this._showTagManage = function () {
+      _this.setState({
+        isShowTagManage: true
+      });
+    };
+    /**
+     * 隐藏标签管理
+     */
+    _this._hideTagManage = function () {
+      var inputDom = document.getElementById("".concat(replayPrefix, "-VmsOperatorItems-sliceRange-tagManage-input"));
+      if (inputDom) {
+        inputDom.value = '';
+      }
+      _this._queryTag();
+      _this.setState({
+        isShowTagManage: false
+      });
+    };
+    /**
+     * 删除标签
+     */
+    _this._deleteTag = function (index, tagCode) {
+      var tagList = _this.state.tagList;
+      var temp = _toConsumableArray(tagList);
+      temp.splice(index, 1);
+      // 调用删除标签接口
+      VIIDRestful.fetch({
+        url: '/VIID/record/del/' + tagCode,
+        method: 'DELETE'
+      }).then(function (res) {
+        var _res$data3 = res.data,
+          ErrCode = _res$data3.ErrCode,
+          ErrMsg = _res$data3.ErrMsg;
+        if (ErrCode !== 0) {
+          // Log.error(ErrMsg);
+        } else {
+          // 删除成功，页面上进行相应改动
+          _this._activeTag(-1);
+          _this.setState({
+            tagList: temp
+          });
+        }
+      }).catch(function (err) {
+        // Log.error(err);
+      });
+    };
+    /**
+     * 选中标签
+     */
+    _this._activeTag = function (index) {
+      var activeTagIndex = _this.state.activeTagIndex;
+      // 相同，无需渲染
+      if (index === activeTagIndex) {
+        return;
+      }
+      _this.setState({
+        activeTagIndex: index
+      });
+    };
+    /**
+     * 跳转到标签对应时间
+     */
+    _this._tagJump = function (tagTime) {
+      _this._coverJumpTime(tagTime);
+    };
+    // #endregion
+    //#region 录像标识
+    /**
+     * 切换视频标识选择框的切换
+     */
+    _this._showVideoTag = function () {
+      var isShowVideoTag = _this.state.isShowVideoTag;
+      document.addEventListener('click', _this._closeVideoTag);
+      _this.setState({
+        isShowVideoTag: !isShowVideoTag
+      });
+    };
+    /**
+     * 关闭视频标识
+     */
+    _this._closeVideoTag = function () {
+      _this.setState({
+        isShowVideoTag: false
+      });
+      document.removeEventListener('click', _this._closeVideoTag);
+    };
+    /**
+     * 录像标识勾选改变
+     */
+    _this._changeVideoTag = function (event, tagIndex) {
+      // 如果是普通，不操作
+      if (tagIndex === 0) {
+        return;
+      }
+      var _this$props = _this.props,
+        videoTags = _this$props.videoTags,
+        setVideoTag = _this$props.setVideoTag;
+      var copy = _toConsumableArray(videoTags);
+      var checked = event.currentTarget.checked;
+      if (checked === true) {
+        copy.push(tagIndex);
+      } else {
+        copy.splice(copy.indexOf(tagIndex), 1);
+      }
+      copy = copy.sort();
+      // 重新设置值
+      setVideoTag(copy);
+    };
+    //#endregion
+    //#region 选中录像段操作
+    /**
+     * 选中回放
+     */
+    _this._selectedReplay = function () {
+      var _this$props2 = _this.props,
+        videoId = _this$props2.videoId,
+        deleteOperaterItem = _this$props2.deleteOperaterItem;
+      _this.recordStartTime = _this.progressSelectedTime[0];
+      _this.recordEndTime = _this.progressSelectedTime[1];
+      // 定时器清除
+      if (_this.progressInterval !== null) {
+        window.clearInterval(_this.progressInterval);
+        _this.progressInterval = null;
+        _this.setState({
+          propressBallLeft: 0
+        });
+      }
+      _this._startReplay(function (res) {
+        if (res === 2) {
+          _this._restartReplay();
+        } else {
+          deleteOperaterItem(videoId);
+        }
+      });
+    };
+    /**
+     * 选中下载
+     */
+    _this._selectedDownload = function () {
+      // 设置时间
+      _this.downLoad(_this.progressSelectedTime[0], _this.progressSelectedTime[1]);
+    };
+    /**
+     * 选中分段回放
+     */
+    _this._selectedSplitReplay = function () {
+      _this.setState({
+        isSplitPop: true,
+        splitStartTime: _this.progressSelectedTime[0],
+        splitEndTime: _this.progressSelectedTime[1]
+      });
+    };
+    /**
+     * 设置选中录像框的位置
+     */
+    _this._setSelectedPosi = function () {
+      var width = _this.selectedFrame.current.clientWidth;
+      var _this$realFrame$curre = _this.realFrame.current.getBoundingClientRect(),
+        bottom = _this$realFrame$curre.bottom;
+      var shouldLeft = 0;
+      // 如果超出显示范围，抓回来
+      if (_this.selectedEnd + width > window.innerWidth) {
+        shouldLeft = window.innerWidth - width;
+      } else {
+        shouldLeft = _this.selectedEnd;
+      }
+      _this.setState({
+        selectedFrameLeft: shouldLeft,
+        selectedFrameTop: bottom
+      });
+    };
+    /**
+     * 隐藏选中的录像段的弹出框
+     */
+    _this._hideSelectedFrame = function () {
+      _this.setState({
+        isShowSROFrame: false,
+        selectedProgressWidth: 0
+      });
+      document.removeEventListener('click', _this._hideSelectedFrame);
+    };
+    _this._keyupSubmit = function (e) {
+      if (e.keyCode === 13) {
+        _this._queryTag();
+      }
+    };
+    // #endregion
+    //#region 拖动跳转
+    //#region  播放窗口操作工具实现
+    _this._videoOperation = function (type, value) {
+      var data = {};
+      switch (type) {
+        case 'screenNum':
+        case 'digitalZoom':
+        case 'soundCtr':
+        case 'singleReplay':
+        case 'setVolume':
+        case 'videoDownLoad':
+          data = value;
+          break;
+        default:
+          break;
+      }
+      _this.props.videoOperation(type, data);
+    };
+    //分屏
+    _this._changeScreen = function (value) {
+      _this._videoOperation('screenNum', value);
+    };
+    //数字放大
+    _this.digitalZoom = function () {
+      var isdigitalZoom = _this.state.isdigitalZoom;
+      _this.setState({
+        isdigitalZoom: !isdigitalZoom
+      });
+      _this._videoOperation('digitalZoom', !isdigitalZoom);
+    };
+    //  24:单帧后退   23：单帧前进  0：开始播放  1：暂停播放  2恢复播放 6:设置播放速度 7：设置单帧播放
+    _this.singleReplay = function (type, speed, time) {
+      var replayState = _this.state.replayState;
+      var params = {
+        controlMode: type
+      };
+      if (speed || speed === 0) {
+        params.speed = speed;
+      }
+      if (time) {
+        params.playTime = time;
+      }
+      if (type === 2 || type === 1) {
+        _this.setState({
+          replayState: !replayState
+        });
+      } else if (type === 7) {
+        _this.setState({
+          replayState: false
+        });
+      }
+      _this._videoOperation('singleReplay', params);
+    };
+    //静音或打开声音
+    _this.soundCtr = function () {
+      var isOpenSound = _this.state.isOpenSound;
+      _this.setState({
+        isOpenSound: !isOpenSound
+      });
+      _this._videoOperation('soundCtr', !isOpenSound);
+    };
+    //#region  播放速度
+    /**
+     * 改变当前速度
+     */
+    _this._showRate = function () {
+      var isSelectingRate = _this.state.isSelectingRate;
+      if (!_this._canItUse()) {
+        return;
+      }
+      document.addEventListener('click', _this._closeSelectRate);
+      _this.setState({
+        isSelectingRate: !isSelectingRate
+      });
+    };
+    /**
+     * 关闭速度选择
+     */
+    _this._closeSelectRate = function () {
+      if (_this.state.isSelectingRate === false) {
+        return;
+      }
+      _this.setState({
+        isSelectingRate: false
+      });
+      document.removeEventListener('click', _this._closeSelectRate);
+    };
+    /**
+     * 改变速率
+     */
+    _this._changeRate = function (newRate) {
+      var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      _this._closeSelectRate();
+      // 如果不是同步导致，先判断是否需要同步操作
+      if (!type) {
+        if (_this._feedbackSyncReplay({
+          type: 'changeRate',
+          param: {
+            newRate: newRate
+          }
+        })) {
+          return;
+        }
+      }
+      // 根据速度获取key值
+      var key = Reflect.ownKeys(RATE_OBJ).find(function (val) {
+        return RATE_OBJ[val] === newRate;
+      });
+      if (typeof key === 'undefined') {
+        key = '1';
+      }
+      _this.isFramePlay = false;
+      _this.setState({
+        rate: key
+      });
+      _this.singleReplay(6, newRate);
+    };
+    /**
+     * 显示的速度改变
+     */
+    _this._showRateChange = function (status) {
+      var showRateIndex = _this.state.showRateIndex;
+      if (status === true) {
+        showRateIndex++;
+      } else {
+        showRateIndex--;
+      }
+      // 超出范围，return
+      if (showRateIndex < 0 || Object.keys(RATE_OBJ).length - 2 < showRateIndex) {
+        return;
+      }
+      _this.setState({
+        showRateIndex: showRateIndex
+      });
+    };
+    /**
+     * 速度选择框内，滚轮事件监听
+     * @param {event} e
+     */
+    _this._rateFrameScroll = function (e) {
+      //chrome 滚轮wheelDelta属性 上120 下-120
+      //firefox 滚轮deltaY属性 上-3 下3
+      var wheelNum = e.nativeEvent.wheelDelta || -e.nativeEvent.deltaY;
+      //向下滚动  设置起始和结束各 +1
+      if (wheelNum < 0) {
+        _this._showRateChange(true);
+      } else {
+        _this._showRateChange(false);
+      }
+    };
+    //#endregion
+    //下载
+    _this.downLoad = function (downloadStartTime, downloadEndTime) {
+      _this.setState({
+        downloadStartTime: moment(downloadStartTime).format('YYYY/MM/DD HH:mm:ss'),
+        downloadEndTime: moment(downloadEndTime).format('YYYY/MM/DD HH:mm:ss')
+      });
+      var params = {
+        showDownload: false,
+        showDownloadTime: true,
+        downloadStartTime: moment(downloadStartTime).format('YYYY/MM/DD HH:mm:ss'),
+        downloadEndTime: moment(downloadEndTime).format('YYYY/MM/DD HH:mm:ss')
+      };
+      _this._videoOperation('videoDownLoad', params);
+    };
+    //显示录像下载列表
+    _this._showDownLoadList = function () {
+      var params = {
+        showDownload: true,
+        showDownloadTime: false
+      };
+      _this._videoOperation('videoDownLoad', params);
+    };
+    //全屏
+    _this.fullScreen = function () {
+      var isfullScreen = _this.state.isfullScreen;
+      _this.setState({
+        isfullScreen: !isfullScreen
+      });
+      _this._videoOperation('fullScreen', !isfullScreen);
+    };
+    //#region 录像下载
+    //#endregion
+    //#endregion
+    _this.onProgressBallMouseDown = function () {
+      // 如果是在同步回放中，不进行操作
+      if (_this.props.isSyncing === true) {
+        return;
+      }
+      _this.isDargJump = true;
+      var moveFunc = function moveFunc(e) {
+        if (_this.isDargJump) {
+          var clientX = e.clientX;
+          var posi = _this.realFrame.current.getBoundingClientRect();
+          // 获取点击的left值，然后转换成时间
+          var offsetTime = _this._keepFourPoint((clientX - posi.left) / _this.totalRealLength * _this.totalTime);
+        }
+      };
+      var _upFunc2 = function upFunc(e) {
+        if (_this.isDargJump) {
+          var clientX = e.clientX;
+          // 没有录像时，不操作
+          var replayMess = _this.state.replayMess;
+          if (!replayMess.record || replayMess.record.length === 0) {
+            return;
+          }
+          var posi = _this.realFrame.current.getBoundingClientRect();
+          // 获取点击的left值，然后转换成时间
+          var offsetTime = _this._keepFourPoint((clientX - posi.left) / _this.totalRealLength * _this.totalTime);
+          var resultTime = new Date(_this.recordStartTime.getTime() + offsetTime);
+
+          // 如果不是同步导致，先判断是否需要同步操作
+          if (_this._feedbackSyncReplay({
+            type: 'jumpTime',
+            param: {
+              time: resultTime
+            }
+          })) {
+            return;
+          }
+          _this._coverJumpTime(resultTime);
+          _this.isDargJump = false;
+        }
+        document.removeEventListener('mousemove', moveFunc);
+        document.removeEventListener('mouseup', _upFunc2);
+      };
+      document.addEventListener('mousemove', moveFunc);
+      document.addEventListener('mouseup', _upFunc2);
+    };
+    _this.state = {
+      // 当前时间
+      currentTime: props.currentTime || new Date(),
+      // 刻度
+      graduation: 0,
+      // 真实录像段位置
+      realRecordPosiArr: [],
+      // 刻度段
+      graduationArr: [],
+      // 刻度中多余的长度，通过marginleft隐藏
+      graduationRestLeft: 0,
+      // 刻度需要左移的距离 // 滚动条left值 两者相同
+      graduationLeft: 0,
+      // 滚动条宽度
+      scrollBarWidth: 1,
+      // 当前时间的球的left值
+      propressBallLeft: 0,
+      // 是否在刻度上触发了mousedown
+      isGraduationDown: false,
+      // 选中视频窗格的播放状态 true 正在播放；false 未播放
+      replayState: false,
+      // 是否显示更多功能
+      isShowMore: false,
+      // 是否处于录像切片状态 切片显示时： true；未显示：false  默认 false
+      sliceStatus: false,
+      // 是否显示切片弹窗
+      isShowSlicePopup: false,
+      // 切片间隔时间
+      sliceSpace: 10,
+      // 切片部分的left值
+      sliceLeft: 0,
+      // 时间控制器的left值
+      timeRangeBallLeft: 0,
+      // 是否展示预览
+      isShowPreview: false,
+      // 预览窗口的left值
+      previewLeft: 0,
+      // 切片进度条 当前时间的显示
+      sliceProgressNow: '',
+      // 是否正在切片中 用于判断是否显示切片最后一张卡片
+      isSlicing: false,
+      sliceStartTime: new Date(),
+      sliceEndTime: new Date(),
+      // 显示切片进度游标
+      showSliceVernier: false,
+      // 游标的left值
+      sliceVernierLeft: 0,
+      // 切片进度条的left值
+      sliceProgressLeft: 0,
+      // 录像下载弹窗
+      isShowDownloadPopup: false,
+      isShowDownloadApply: false,
+      downloadStartTime: new Date(),
+      downloadEndTime: new Date(),
+      // 是否显示标签管理
+      isShowTagManage: false,
+      // 速度选择中
+      isSelectingRate: false,
+      rate: '1',
+      // 分段回放弹窗
+      isSplitPop: false,
+      // 退出分段回放确认弹窗
+      isExitSplitPop: false,
+      // 是否正在分段回放中
+      isSplitReplaying: props.isSplitReplay,
+      splitStartTime: new Date(),
+      splitEndTime: new Date(),
+      splitNum: 4,
+      // 显示视频标识弹窗
+      isShowVideoTag: false,
+      // 当前活跃的标签
+      activeTagIndex: -1,
+      /**
+      * 标签记录
+      * @type {{TagTime: string, TagCode: string, Tag: string}[]}
+      */
+      tagList: [],
+      // 快进退的时间选择
+      quickJumpTime: 30,
+      // 显示的速度index
+      showRateIndex: Object.keys(RATE_OBJ).length - 6,
+      // 选中部分录像段的宽度
+      selectedProgressWidth: 0,
+      // 选中部分录像段的left
+      selectedProgressLeft: 0,
+      // 实现展示被选中的录像段操作框
+      isShowSROFrame: false,
+      // 显示选中操作框的left值
+      selectedFrameLeft: '50%',
+      // 显示选中操作框的top值
+      selectedFrameTop: '50%',
+      // 添加标签弹窗
+      isAddTagPop: false,
+      // 标签时间
+      tagTime: '',
+      // 添加标签失败
+      addTagError: false,
+      replayMess: props.videoReplyInfoList[props.activeVideo] || null,
+      activeVideo: 0,
+      //当前选中窗格
+      isSplitScreen: false,
+      //分屏面板是否展示
+      isdigitalZoom: false,
+      //是否开启数字放大
+      isfullScreen: false,
+      //是否全屏
+      isOpenSound: false,
+      //是否打开声音
+      operationStatus: props.operationStatus || false //操作按钮是否置灰
+    };
+    // 进度条外框的真实长度
+    _this.totalRealLength = 0;
+    // 所有录像段的总时长（时间戳）
+    _this.totalTime = 0;
+    // 显示缩放比
+    _this.showScale = 0;
+    // 格子的最小宽度
+    _this.smallestWidth = 80;
+    // 进度条外框的宽度
+    _this.progressFramewidth = 0;
+    _this.progressFrameLeft = 0;
+    // 是否正在绘制中
+    _this.isPrinting = false;
+    /**
+    * 对应的视频组件
+    * @type {ImosVideo}
+    */
+    // 记录当前选中的视频的录像段信息
+    _this.replayMess = props.videoReplyInfoList[props.activeVideo];
+    _this.record = [];
+    // this.cameraCode = props.videoReplyInfoList[props.activeVideo].cameraCode || '';
+    // this.cameraName = props.videoReplyInfoList[props.activeVideo].cameraName || '';
+    _this.recordStartTime = null;
+    _this.recordEndTime = null;
+    // 共有多少个显示标准
+    _this.timeControlNum = Object.keys(GRADUATION_TYPES).length;
+    // 显示更多操作
+    _this.moreFuncs = [
+    // { text: '录像下载', func: this._downloadVideoClick },
+    // { text: '录像切片', func: this.clickSliceFunc },
+    // { text: '标签管理', func: this._showTagManage },
+    {
+      text: _this.props.textLocale.videoDownloadList || '录像下载列表',
+      func: _this._showDownLoadList
+    }, {
+      text: _this.props.textLocale.fullcreen || '全屏',
+      func: _this.fullScreen
+    }];
+    // 时间选择控制器正在操作中
+    _this.isControling = false;
+    // 时间选择控制器的定时器
+    _this.controlTimer = null;
+    // 暂时先写死
+    _this.previewWidth = 102;
+    // 查询进度的定时器
+    _this.progressInterval = null;
+    // 鼠标类型 进度条上，选中录像段、跳转等操作标识
+    _this.mouseType = 0;
+    // 是否正处于进度条上选中时
+    _this.isProgressmark = false;
+    // 是否进度条上选中移动
+    _this.processMarkMove = false;
+    // 选中的录像段的开始时间和结束时间
+    _this.progressSelectedTime = [new Date(), new Date()];
+    // 选中录像段的最尾部
+    _this.selectedEnd = 0;
+    // 预览时间
+    _this.previewTime = new Date();
+    _this.needPreview = false;
+    // 录像当前时间，因为setState存在一定延迟，导致某些操作取到的state的值有一定误差，某些场景使用时，以此为准
+    _this.currentTime = new Date();
+    // 是否处于帧播放 true表示是；false表示不是
+    _this.isFramePlay = false;
+
+    // 是否需要重新绘制
+    _this.needRepaint = false;
+    // 回放时，底部按钮
+    _this.bottomButts = [];
+
+    //是否拖动跳转
+    _this.isDargJump = false;
+    _this.progressFrame = /*#__PURE__*/createRef();
+    _this.realFrame = /*#__PURE__*/createRef();
+    _this.carrier = /*#__PURE__*/createRef();
+    _this.progressBall = /*#__PURE__*/createRef();
+    _this.frame = /*#__PURE__*/createRef();
+    _this.videoPreview = /*#__PURE__*/createRef();
+    _this.selectedFrame = /*#__PURE__*/createRef();
+    return _this;
+  }
+
+  //#endregion
+
+  //#region 生命周期
+  _inherits(VmsOperatorItems, _Component);
+  return _createClass(VmsOperatorItems, [{
+    key: "componentWillMount",
+    value: function componentWillMount() {}
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this._getFrameLeft();
+      this._getProgressFrameWidth();
+      window.addEventListener('resize', this._pageResize);
+    }
+  }, {
+    key: "componentWillReceiveProps",
+    value: function componentWillReceiveProps(nextProps) {
+      var _this2 = this;
+      if (nextProps.activeVideo !== undefined && nextProps.activeVideo !== this.state.activeVideo || nextProps.videoReplyInfoList[nextProps.activeVideo] !== null && JSON.stringify(nextProps.videoReplyInfoList[nextProps.activeVideo]) !== JSON.stringify(this.state.replayMess)) {
+        console.log('nextProps', nextProps.videoReplyInfoList[nextProps.activeVideo]);
+        this.setState({
+          replayMess: nextProps.videoReplyInfoList[nextProps.activeVideo],
+          activeVideo: nextProps.activeVideo,
+          currentTime: nextProps.currentTime
+        }, function () {
+          if (nextProps.videoReplyInfoList[nextProps.activeVideo] && Array.isArray(nextProps.videoReplyInfoList[nextProps.activeVideo].record)) {
+            _this2._setReplayMess();
+            _this2._renderPage();
+            // 开始查询进度
+            _this2._getVideoCurrentTime();
+            if (nextProps.videoReplyInfoList[nextProps.activeVideo].record.length <= 0) {
+              _this2.setState({
+                propressBallLeft: 0
+              });
+            }
+          }
+          // 根据速度获取key值
+          var key = Reflect.ownKeys(RATE_OBJ).find(function (val) {
+            return RATE_OBJ[val] === nextProps.videoReplyInfoList[nextProps.activeVideo].speed;
+          });
+          _this2.setState({
+            replayState: nextProps.videoReplyInfoList[nextProps.activeVideo].replayState,
+            rate: key,
+            graduationLeft: 0
+          });
+        });
+      }
+      if (nextProps.currentTime !== undefined && nextProps.currentTime !== this.state.currentTime) {
+        this.setState({
+          currentTime: nextProps.currentTime
+        }, function () {
+          _this2._changeBallLeft(nextProps.currentTime);
+          // this._getVideoCurrentTime();
+        });
+        // this._changeBallLeft(nextProps.currentTime);
+      }
+      if (nextProps.isSplitScreen !== undefined && nextProps.isSplitScreen !== this.state.isSplitScreen) {
+        this.setState({
+          isSplitScreen: nextProps.isSplitScreen
+        });
+      }
+      if (nextProps.operationStatus !== this.state.operationStatus) {
+        var newState = {
+          operationStatus: nextProps.operationStatus
+        };
+        if (nextProps.operationStatus) {
+          var _nextProps$operationS = nextProps.operationStatus,
+            bZoomEnable = _nextProps$operationS.bZoomEnable,
+            soundEnable = _nextProps$operationS.soundEnable;
+          Object.assign(newState, {
+            isOpenSound: soundEnable,
+            isdigitalZoom: bZoomEnable
+          });
+        }
+        this.setState(_objectSpread({}, newState));
+      }
+    }
+  }, {
+    key: "shouldComponentUpdate",
+    value: function shouldComponentUpdate(nextProps, nextState) {
+      var renderTag = false;
+      // 如果是隐藏情况下，不做操作   如果是空的，不操作  || nextProps.record.length === 0
+      // if (nextProps.isShow === false && this.props.isShow === false) {
+      //     return false;
+      // }
+      // 是否需要重新绘制
+      if (this.needRepaint === true) {
+        this.needRepaint = false;
+        this._getProgressFrameWidth();
+        this._renderPage();
+      }
+      // 隐藏;state都进行更新
+      if (nextProps.isShow !== this.props.isShow || nextState !== this.state || nextProps.isSyncing !== this.props.isSyncing || nextProps.videoTags !== this.props.videoTags) {
+        renderTag = true;
+      }
+
+      // 同步更新
+      // let { syncRate, syncQuickVal, syncReplayState } = nextProps;
+      // if (syncRate !== this.props.syncRate
+      //     || syncQuickVal !== this.props.syncQuickVal
+      //     || syncReplayState !== this.props.syncReplayState) {
+      //     this.setState({
+      //         rate: syncRate,
+      //         quickJumpTime: syncQuickVal,
+      //         replayState: syncReplayState
+      //     });
+      //     renderTag = true;
+      // }
+
+      // 如果时间选择器不同了，需要重新渲染
+      // if (nextProps.timeRangeNum !== graduation) {
+      //     this.setState({
+      //         graduation: nextProps.timeRangeNum
+      //     }, () => {
+      //         this._getProgressFrameWidth();
+      //         this._renderPage();
+      //     });
+      //     renderTag = true;
+      // }
+
+      return renderTag;
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.setState = function () {};
+      if (this.controlTimer !== null) {
+        window.clearInterval(this.controlTimer);
+      }
+      if (this.progressInterval !== null) {
+        window.clearInterval(this.progressInterval);
+        this.progressInterval = null;
+      }
+      window.removeEventListener('resize', this._pageResize);
+    }
+
+    //#endregion
+
+    //#region 刻度操作
+    /**
+     * 计算刻度信息
+     * @returns {[eachWidth, eachTimeStamp, allTime]} [eachWidth, eachTimeStamp, allTime]
+     */
+  }, {
+    key: "_calcEachWidth",
+    value: function _calcEachWidth() {
+      var graduation = this.state.graduation;
+      var _GRADUATION_MAP$GRADU = _slicedToArray(GRADUATION_MAP[GRADUATION_TYPES[graduation]], 2),
+        times = _GRADUATION_MAP$GRADU[0],
+        timeStamp = _GRADUATION_MAP$GRADU[1];
+      return this._loopA(times, timeStamp);
+    }
+
+    /**
+     * 循环计算出当前能放几个
+     * @param {number} times 次数
+     * @param {number} timeStamp 时间戳
+     */
+  }, {
+    key: "_loopA",
+    value: function _loopA(times, timeStamp) {
+      // 如果能显示下所有
+      if (times * this.smallestWidth <= this.progressFramewidth) {
+        return [Math.round(this.progressFramewidth / times), timeStamp / times, times];
+      } else {
+        // 如果不能，改变格子数，继续计算
+        return this._loopA(times / 2, timeStamp);
+      }
+    }
+
+    /**
+     * 计算总时间
+     */
+  }, {
+    key: "_countTotalTime",
+    value: function _countTotalTime() {
+      var replayMess = this.state.replayMess;
+      if (replayMess.record && replayMess.record.length === 0) {
+        this.totalTime = 24 * 60 * 60 * 1000;
+      } else {
+        // 根据刻度 * 录像段时长，计算总长
+        var recordStart = this.recordStartTime,
+          recordEnd = this.recordEndTime;
+
+        // 计算总时间
+        var totalTime = this._calcDV(recordStart, recordEnd);
+        // 时间小于1天，自动补全到一天
+        if (totalTime < 24 * 60 * 60 * 1000) {
+          this.totalTime = 24 * 60 * 60 * 1000;
+        } else {
+          this.totalTime = totalTime;
+        }
+      }
+    }
+
+    /**
+     * 计算真实长度
+     * @param {number} eachGraduation 每段时间戳
+     * @param {number} eachWidth 每段长度
+     */
+  }, {
+    key: "_countTotalLength",
+    value: function _countTotalLength(eachGraduation, eachWidth) {
+      this._countTotalTime();
+      // 总长度
+      this.totalRealLength = Math.round(this.totalTime / eachGraduation * eachWidth);
+    }
+
+    /**
+     * 绘制刻度
+     */
+  }, {
+    key: "_drawGraduation",
+    value: function _drawGraduation() {
+      var _this$_calcEachWidth = this._calcEachWidth(),
+        _this$_calcEachWidth2 = _slicedToArray(_this$_calcEachWidth, 2),
+        eachWidth = _this$_calcEachWidth2[0],
+        eachGraduation = _this$_calcEachWidth2[1];
+      // 计算总长度、总时间
+      this._countTotalLength(eachGraduation, eachWidth);
+      // 如果没有录像段，渲染空白
+      // if (this.props.isBlank === true) {
+      //     this._createBlankGraduation();
+      //     return;
+      // }
+      var graduationArr = [];
+      // 计算多余时间
+      var restTime = new Date(this.recordStartTime).getTime() % eachGraduation,
+        restTimeWidth = this._keepFourPoint(restTime / this.totalTime),
+        // 总共需要多少段
+        totalParagraphs = Math.round(this.totalTime / eachGraduation);
+      // 如果有多余时间，需要次数+1
+      if (restTime !== 0) {
+        totalParagraphs++;
+      }
+      // 第一个刻度
+      var firstGraduation = new Date(this.recordStartTime).getTime() - restTime;
+
+      //遍历所有段，开始绘制
+      for (var index = 0; index < totalParagraphs; index++) {
+        var tempTime = new Date(firstGraduation + index * eachGraduation);
+        var timeStr = this._createSingleTimeStr(tempTime);
+        graduationArr.push(/*#__PURE__*/React.createElement(Graduation, {
+          key: timeStr + index,
+          width: eachWidth,
+          time: timeStr
+        }));
+      }
+      this.setState({
+        graduationArr: graduationArr,
+        graduationRestLeft: restTimeWidth
+      });
+    }
+
+    /**
+     * 调整刻度位置，保证当前进度点所处位置没有改变
+     */
+  }, {
+    key: "_adjustGraduationPostion",
+    value: function _adjustGraduationPostion() {
+      var replayMess = this.state.replayMess;
+      if (!replayMess.record || replayMess.record.length === 0) {
+        return;
+      }
+      var _this$state5 = this.state,
+        currentTime = _this$state5.currentTime,
+        graduation = _this$state5.graduation;
+      // 首先计算ball需要的left值
+      var playedTime = currentTime.getTime() - new Date(this.recordStartTime).getTime();
+      var allLeft = playedTime / this.totalTime * this.totalRealLength;
+      // 然后减去当前的，得到刻度需要的left值
+      var newGraduationLeft = this._keepFourPoint((allLeft - this.realProgressBallLeft) / this.totalRealLength);
+      if (newGraduationLeft <= 0 || graduation === 0) {
+        newGraduationLeft = 0;
+      }
+      this.setState({
+        graduationLeft: newGraduationLeft
+      });
+    }
+
+    /**
+     * 生成单个时间字符串
+     * @param {Date} time 时间
+     */
+  }, {
+    key: "_createSingleTimeStr",
+    value: function _createSingleTimeStr(time) {
+      var month = time.getMonth() + 1;
+      var date = time.getDate();
+      var hour = time.getHours();
+      var minute = time.getMinutes();
+      var second = time.getSeconds();
+      // 根据不同的刻度生成不同格式时间
+      switch (this.state.graduation) {
+        // 1h类型
+        case 0:
+        // return hour.toString().padStart(2, '0') + ':' + minute.toString().padStart(2, '0');
+        case 1:
+        // return hour.toString().padStart(2, '0') + ':' + minute.toString().padStart(2, '0');
+        case 2:
+        // return hour.toString().padStart(2, '0') + ':' + minute.toString().padStart(2, '0');
+        case 3:
+        // return hour.toString().padStart(2, '0') + ':' + minute.toString().padStart(2, '0');
+        case 4:
+          return this._dateFixed(hour) + ':' + this._dateFixed(minute);
+        case 5:
+        // return minute.toString().padStart(2, '0') + ':' + second.toString().padStart(2, '0');
+        case 6:
+          return this._dateFixed(minute) + ':' + this._dateFixed(second);
+        default:
+          return this._dateFixed(hour) + ':' + this._dateFixed(minute);
+      }
+    }
+  }, {
+    key: "_createBlankGraduation",
+    value:
+    /**
+     * 无记录时，显示的信息
+     */
+    function _createBlankGraduation() {
+      var graduationArr = [];
+      var _this$_calcEachWidth3 = this._calcEachWidth(),
+        _this$_calcEachWidth4 = _slicedToArray(_this$_calcEachWidth3, 3),
+        eachWidth = _this$_calcEachWidth4[0],
+        eachTimeStamp = _this$_calcEachWidth4[1],
+        number = _this$_calcEachWidth4[2];
+      // 第一个刻度时间
+      var fistTime = new Date(new Date().setHours(0, 0, 0));
+      // 计算需要渲染多少段
+      var multiple = Math.ceil(this.totalTime / eachTimeStamp);
+      for (var index = 0; index < multiple; index++) {
+        var currentTime = new Date(fistTime.getTime() + index * eachTimeStamp);
+        var timeStr = this._createSingleTimeStr(currentTime);
+        graduationArr.push(/*#__PURE__*/React.createElement(Graduation, {
+          key: timeStr + index,
+          width: eachWidth,
+          time: timeStr
+        }));
+      }
+      this.setState({
+        graduationArr: graduationArr
+      });
+    }
+    //#endregion
+
+    //#region 进度条操作
+    /**
+     * 根据录像段画出实际录像
+     */
+  }, {
+    key: "_drawRealRecord",
+    value: function _drawRealRecord() {
+      var _this3 = this;
+      // 如果没有录像段，不需要渲染
+      var replayMess = this.state.replayMess;
+      if (!replayMess.record || replayMess.record.length === 0) {
+        this.setState({
+          realRecordPosiArr: []
+        });
+        return;
+      }
+      // 根据每段的起始时间和实际长度，进行绘画
+      var recordBeginTime = replayMess.record[0].tBeginTime;
+      var realRecordPosiArr = replayMess.record.map(function (element, index) {
+        var sectionPosition = _this3._createReplaySection(element, recordBeginTime);
+        return /*#__PURE__*/React.createElement(RecordSection, {
+          key: index,
+          position: sectionPosition,
+          moveFunc: function moveFunc(event) {
+            return _this3._progressMove(event.clientX);
+          },
+          leaveFunc: _this3._progressLeave,
+          downFunc: _this3._markProgress,
+          enterFunc: _this3._progressEnter
+        });
+      });
+      this.setState({
+        realRecordPosiArr: realRecordPosiArr
+      });
+    }
+
+    /**
+     * 生成回放块的信息
+     * @param {Object} replayVideoParam
+     * @param {Date} recordBeginTime
+     */
+  }, {
+    key: "_createReplaySection",
+    value: function _createReplaySection(replayVideoParam, recordBeginTime) {
+      var replayVideo = {},
+        totalTime = this.totalTime;
+      var tBeginTime = replayVideoParam.tBeginTime,
+        tEndTime = replayVideoParam.tEndTime;
+      var leftTime = this._calcDV(tBeginTime, recordBeginTime);
+      // 根据回放段的起始和结束时间，计算出回放段的宽度和left
+      replayVideo.left = (leftTime * 100 / totalTime).toFixed(2);
+      replayVideo.width = (this._calcDV(tBeginTime, tEndTime) * 100 / totalTime).toFixed(2);
+      return replayVideo;
+    }
+  }, {
+    key: "_calcShowScale",
+    value:
+    //#endregion
+
+    //#region 滚动条操作
+    /**
+     * 计算显示比
+     */
+    function _calcShowScale() {
+      // 显示长度 / 总长度，保留4位小数
+      this.showScale = parseFloat((this.progressFramewidth / this.totalRealLength).toFixed(4));
+    }
+
+    /**
+     * 设置滚动条长度
+     */
+  }, {
+    key: "_setScrollLength",
+    value: function _setScrollLength() {
+      // 计算显示比
+      this._calcShowScale();
+      // 设置长度
+      this.setState({
+        scrollBarWidth: this.showScale
+      });
+    }
+
+    // 设置滚动条的left(用于当前时间已经在当前显示范围的最后面时，然后继续播放)
+  }, {
+    key: "_setScrollLeft",
+    value: function _setScrollLeft(changedTime) {}
+  }, {
+    key: "_changeTimeControl",
+    value:
+    //#endregion
+
+    //#region 时间显示控制器
+    /**
+     * 改变时间显示控制器
+     * @param {boolean} type 放大或者缩小 true：放大；false：缩小，默认放大
+     */
+    function _changeTimeControl() {
+      var _this4 = this;
+      var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+      // 防止过多次数触发
+      if (this.isControling) {
+        if (this.controlTimer === null) {
+          this.controlTimer = setInterval(function () {
+            if (_this4.isControling) {
+              return;
+            }
+            _this4._changeTimeControl(type);
+            clearInterval(_this4.controlTimer);
+            _this4.controlTimer = null;
+          }, 500);
+        }
+      }
+      this.isControling = true;
+      var _this$state6 = this.state,
+        graduation = _this$state6.graduation,
+        graduationLeft = _this$state6.graduationLeft,
+        propressBallLeft = _this$state6.propressBallLeft;
+      var timeRangeNum = this.props.timeRangeNum;
+
+      // 如果当前标准已经是最大或者最小
+      if (graduation === 0 && type === false || graduation === GRADUATION_TYPES.length - 1 && type === true) {
+        this.isControling = false;
+        return;
+      }
+      var newGraduation = 0;
+      // 放大,如果已经是最大，不需要放大
+      if (type === true && graduation !== GRADUATION_TYPES.length - 1) {
+        newGraduation = graduation + 1;
+      } else if (type === false && graduation !== 0) {
+        // 放大,如果已经是最小，不需要缩小
+        newGraduation = graduation - 1;
+      }
+
+      // 获取进度球的位置，保证刻度改变之后，进度球位置不动
+      this.realProgressBallLeft = (propressBallLeft - graduationLeft) * this.totalRealLength;
+      // 设置新的刻度
+      // this.props.setTimeRange(newGraduation);
+      this.setState({
+        graduation: newGraduation
+      }, function () {
+        // 修改完刻度范围之后，重新绘制
+        _this4._renderPage();
+        _this4._adjustGraduationPostion();
+        _this4._setScrollLength();
+        _this4.isControling = false;
+      });
+    }
+  }, {
+    key: "_rangeValue",
+    value:
+    /**
+     * 范围取值
+     * @param {number} left 点的left值
+     */
+    function _rangeValue(left) {
+      var baseNum = this.timeControlNum - 1;
+      // 长度
+      var carrierWidth = this.carrier.current.clientWidth;
+      var recurseNum = 1 / baseNum * 0.5;
+      // 点left值对应的百分比
+      var leftPrecent = left / carrierWidth;
+      // 如果是最小
+      if (leftPrecent < recurseNum) {
+        return 0;
+      }
+
+      // 如果是最大
+      if (leftPrecent >= 1 - recurseNum) {
+        return baseNum;
+      }
+
+      // 遍历查找应该在哪个区域
+      for (var index = 1; index < baseNum; index++) {
+        if (leftPrecent >= index * (1 / baseNum) - recurseNum && leftPrecent < index * (1 / baseNum) + recurseNum) {
+          return index;
+        }
+      }
+    }
+
+    /**
+     * 改变时间显示控制器
+     * @param {boolean} type 放大或者缩小 true：放大；false：缩小，默认放大
+     */
+  }, {
+    key: "_adjustTimeRange",
+    value: function _adjustTimeRange() {
+      var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+    }
+    //#endregion
+
+    //#region 进度球
+    /**
+     * 进度更新，改变进度球的位置
+     */
+  }, {
+    key: "_changeBallLeft",
+    value: function _changeBallLeft(currentTime) {
+      var graduationLeft = this.state.graduationLeft;
+      // 已经播放时间
+      if (!currentTime || !this.recordStartTime) {
+        return;
+      }
+      var playedTime = currentTime.getTime() - new Date(this.recordStartTime).getTime();
+      var propressBallLeft = this._keepFourPoint(playedTime / this.totalTime);
+      // 进度框的宽度
+      var progressWidthPrecent = this.progressFramewidth / this.totalRealLength;
+      // 如果进度球超出了可视范围，改变框的位置
+      if (propressBallLeft > progressWidthPrecent + graduationLeft) {
+        // graduationLeft = propressBallLeft - progressWidthPrecent;
+        this.setState({
+          graduationLeft: propressBallLeft - progressWidthPrecent
+        });
+      }
+      this.setState({
+        propressBallLeft: propressBallLeft
+      });
+    }
+
+    //#endregion
+
+    //#region 辅助函数
+    /**
+     * 计算时间差值
+     * @param {Date} date1
+     * @param {Date} date2
+     * @returns {Number} 两者相差的时间戳
+     */
+  }, {
+    key: "_calcDV",
+    value: function _calcDV(date1, date2) {
+      date1 = new Date(date1);
+      date2 = new Date(date2);
+      var dv = date1.getTime() - date2.getTime();
+      return Math.abs(dv);
+    }
+
+    /**
+     * 保留四位小数
+     * @param {Number} num 需要处理的数
+     */
+  }, {
+    key: "_keepFourPoint",
+    value: function _keepFourPoint(num) {
+      return parseFloat(num.toFixed(4));
+    }
+
+    /**
+     * 获取进度条框的宽度
+     */
+  }, {
+    key: "_getProgressFrameWidth",
+    value: function _getProgressFrameWidth() {
+      var _this$progressFrame$c = this.progressFrame.current.getBoundingClientRect(),
+        width = _this$progressFrame$c.width,
+        x = _this$progressFrame$c.x;
+      this.progressFramewidth = width;
+      this.progressFrameLeft = x;
+    }
+
+    /**
+     * 获取frame的left值
+     */
+  }, {
+    key: "_getFrameLeft",
+    value: function _getFrameLeft() {
+      this.frameLeft = this.frame.current.x || 280;
+    }
+
+    /**
+     * 时间补全
+     */
+  }, {
+    key: "_dateFixed",
+    value: function _dateFixed(num) {
+      return num.toString().padStart(2, '0');
+    }
+
+    /**
+     * 压缩图片
+     */
+  }, {
+    key: "_compressImg",
+    value: function _compressImg(imgSrc) {
+      var img = new Image();
+      img.src = imgSrc;
+      img.onload = function () {
+        var imgWidth = img.width;
+        var imgHeight = img.height;
+        var canvas = document.createElement('canvas');
+        // 宽高目前先写死
+        canvas.width = 120;
+        canvas.height = 65;
+        canvas.getContext('2d').drawImage(img, 0, 0, canvas.width, canvas.height);
+        img = canvas.toDataURL('image/png', 1);
+      };
+    }
+  }, {
+    key: "_formatStr",
+    value:
+    /**
+     * 格式化时间
+     * @param {Date} originDate 原始数据
+     * @returns {String} 返回格式化后时间 MM-DD HH:mm:ss
+     */
+    function _formatStr(originDate) {
+      var dateStr = GlobalFunc.time2String(originDate);
+      dateStr = dateStr.slice(5);
+      return dateStr;
+    }
+    //#endregion
+
+    //#region 视频播放组件相关
+
+    /**
+     * 开始查询进度
+     */
+  }, {
+    key: "_startSearchProgress",
+    value: function _startSearchProgress() {
+      // if (this.progressInterval === null) {
+
+      // }
+      // this.progressInterval = this._getVideoCurrentTime;
+      this._getVideoCurrentTime;
+    }
+
+    /**
+     * 获取video的当前播放时间
+     */
+  }, {
+    key: "_getVideoCurrentTime",
+    value: function _getVideoCurrentTime() {
+      // const { videos } = this.props;
+      var currentTime = this.state.currentTime;
+      // let playerStatus = playStatus.Model;
+      // let records = playStatus.recordList;
+      // 如果不是回放，不采用video的当前时间
+      // if (playerStatus !== PROTOCOL_STATUS.REPLAY || !(records instanceof Array) || records.length === 0) {
+      //     // this.props.deleteOperaterItem(videoId);
+      //     return;
+      // }
+      var recordNow = currentTime;
+
+      // 更新对应操作组件的信息
+      if (this.currentTime !== recordNow) {
+        this.currentTime = recordNow;
+        // this.setState({
+        //     currentTime: recordNow
+        // });
+        // 非切片情况下
+        if (this.state.sliceStatus === false) {
+          this._changeBallLeft(recordNow);
+        }
+      }
+    }
+
+    /**
+     * 设置回放信息
+     */
+  }, {
+    key: "_setReplayMess",
+    value: function _setReplayMess() {
+      var replayMess = this.state.replayMess;
+      if (replayMess.record.length === 0) {
+        this.recordStartTime = null;
+        this.recordEndTime = null;
+        return;
+      }
+      // 获取回放信息
+      var records = replayMess.record;
+      // 查询成功，设置基础信息
+      // this.record = this.props.replayMess.record;
+      this.recordStartTime = records[0].tBeginTime;
+      this.recordEndTime = records[records.length - 1].tEndTime;
+      // this.setState({
+      //     currentTime: recordNow
+      // });
+    }
+  }, {
+    key: "_restartReplay",
+    value:
+    /**
+     * 重起回放
+     */
+    function _restartReplay() {
+      this._initPage();
+      this._setReplayMess();
+      this._renderPage();
+      this._startSearchProgress();
+      this._queryTag();
+      this.setState({
+        replayState: true
+      });
+    }
+  }, {
+    key: "_initPage",
+    value:
+    /**
+     * 重起回放，重置状态
+     */
+    function _initPage() {
+      this.setState({
+        replayState: false,
+        rate: '1',
+        activeTagIndex: -1,
+        tagList: [],
+        showRateIndex: Object.keys(RATE_OBJ).length - 6,
+        tagTime: '',
+        addTagError: false
+      });
+      this.isFramePlay = false;
+    }
+
+    /**
+     * 设置播放状态样式
+     * @param {boolean} state 播放状态
+     */
+  }, {
+    key: "setPlayState",
+    value: function setPlayState(state) {
+      if (state !== this.state.replayState) {
+        this.setState({
+          replayState: !this.state.replayState
+        });
+      }
+    }
+    //#endregion
+
+    //#region 功能
+    /**
+     * 是否可用
+     * 特别说明，所有功能都需要使用这个函数来判断按钮是否可用
+     * @returns {Boolean} true表示可用，false表示不可用
+     */
+  }, {
+    key: "_canItUse",
+    value: function _canItUse() {
+      var isBlank = this.props.isBlank;
+      var canUse = false;
+      if (isBlank !== true) {
+        canUse = true;
+      }
+      return canUse;
+    }
+
+    /**
+     * 同步回放反馈
+     */
+  }, {
+    key: "_feedbackSyncReplay",
+    value: function _feedbackSyncReplay(param) {
+      var _this$props3 = this.props,
+        isSyncing = _this$props3.isSyncing,
+        syncFunc = _this$props3.syncFunc;
+      if (isSyncing) {
+        syncFunc.call(this, param);
+        return true;
+      }
+      return false;
+    }
+  }, {
+    key: "_renderTag",
+    value:
+    /**
+     * 渲染标签
+     */
+    function _renderTag() {
+      var _this5 = this;
+      var tagList = this.state.tagList;
+      var recordStart = this.recordStartTime;
+      return tagList.map(function (element, index) {
+        var left = _this5._keepFourPoint((element.TagTime - recordStart) / _this5.totalTime) * 100 + '%';
+        return /*#__PURE__*/React.createElement("span", {
+          key: index,
+          className: "".concat(replayPrefix, "-VmsOperatorItems-sliceRange-section2-tag"),
+          style: {
+            left: left
+          },
+          onClick: function onClick() {
+            return _this5._tagJump(element.TagTime);
+          }
+        });
+      });
+    }
+  }, {
+    key: "addTagSuccess",
+    value:
+    /**
+     * 标签添加成功后，重新添加标签，渲染
+     */
+    function addTagSuccess() {
+      this._queryTag();
+    }
+  }, {
+    key: "render",
+    value:
+    //#endregion
+
+    //#region render
+    function render() {
+      var _this6 = this;
+      var _this$state7 = this.state,
+        currentTime = _this$state7.currentTime,
+        realRecordPosiArr = _this$state7.realRecordPosiArr,
+        graduationArr = _this$state7.graduationArr,
+        propressBallLeft = _this$state7.propressBallLeft,
+        graduationRestLeft = _this$state7.graduationRestLeft,
+        graduationLeft = _this$state7.graduationLeft,
+        isGraduationDown = _this$state7.isGraduationDown,
+        isShowMore = _this$state7.isShowMore,
+        sliceStatus = _this$state7.sliceStatus,
+        graduation = _this$state7.graduation,
+        replayState = _this$state7.replayState,
+        isSelectingRate = _this$state7.isSelectingRate,
+        rate = _this$state7.rate,
+        showRateIndex = _this$state7.showRateIndex,
+        selectedProgressWidth = _this$state7.selectedProgressWidth,
+        selectedProgressLeft = _this$state7.selectedProgressLeft,
+        isShowSROFrame = _this$state7.isShowSROFrame,
+        selectedFrameLeft = _this$state7.selectedFrameLeft,
+        selectedFrameTop = _this$state7.selectedFrameTop,
+        replayMess = _this$state7.replayMess,
+        isSplitScreen = _this$state7.isSplitScreen,
+        isdigitalZoom = _this$state7.isdigitalZoom,
+        isOpenSound = _this$state7.isOpenSound,
+        operationStatus = _this$state7.operationStatus;
+      var _this$props4 = this.props,
+        isShow = _this$props4.isShow,
+        videoTags = _this$props4.videoTags,
+        textLocale = _this$props4.textLocale;
+      var buttClass = "".concat(replayPrefix, "-VmsOperatorItems-sliceRange-buttFrame") + (replayMess && JSON.stringify(replayMess.record) === '[]' ? '-disable' : '');
+      // 进度条外框宽度
+      var frameWidth = this.totalRealLength || '100%';
+      var carrierLeft = this._keepFourPoint(graduation / (GRADUATION_TYPES.length - 1));
+      // 速率的数组
+      var rateArr = Object.keys(RATE_OBJ);
+      var sortedArr = rateArr.sort(function (a, b) {
+        return parseFloat(a) > parseFloat(b) ? 1 : -1;
+      });
+
+      // style={{ visibility: isShow ? 'visible' : 'hidden' }} style={{ display: isShow ? 'block' : 'none' }}
+      return /*#__PURE__*/React.createElement("div", {
+        className: "".concat(replayPrefix, "-VmsOperatorItems-sliceRange"),
+        style: {
+          visibility: isShow ? 'visible' : 'hidden'
+        },
+        ref: this.frame
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "".concat(replayPrefix, "-VmsOperatorItems-sliceRange-section1"),
+        style: {
+          display: !sliceStatus ? 'block' : 'none'
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "".concat(replayPrefix, "-VmsOperatorItems-sliceRange-section1-timeRange")
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "".concat(replayPrefix, "-VmsOperatorItems-sliceRange-section1-adjuster1 ").concat(replayPrefix, "-VmsOperatorItems-sliceRange-section1-adjuster"),
+        onClick: function onClick() {
+          return _this6._changeTimeControl(false);
+        }
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "".concat(replayPrefix, "-VmsOperatorItems-sliceRange-section1-timeRange-carrier"),
+        ref: this.carrier
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "".concat(replayPrefix, "-VmsOperatorItems-sliceRange-section1-timeRange-ball"),
+        style: {
+          left: carrierLeft * 100 + '%'
+        },
+        onMouseDown: this._timeControlDown
+      })), /*#__PURE__*/React.createElement("span", {
+        className: "".concat(replayPrefix, "-VmsOperatorItems-sliceRange-section1-adjuster2 ").concat(replayPrefix, "-VmsOperatorItems-sliceRange-section1-adjuster"),
+        onClick: function onClick() {
+          return _this6._changeTimeControl(true);
+        }
+      })), /*#__PURE__*/React.createElement("span", {
+        className: "".concat(replayPrefix, "-VmsOperatorItems-sliceRange-section1-timeInfo")
+      }, replayMess && replayMess.record && replayMess.record.length !== 0 && currentTime && this.recordEndTime && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("span", {
+        className: "".concat(replayPrefix, "-VmsOperatorItems-sliceRange-currentTime"),
+        onClick: this._currentTimeClick
+      }, GlobalFunc.time2String(currentTime)), /*#__PURE__*/React.createElement("span", {
+        className: "".concat(replayPrefix, "-VmsOperatorItems-sliceRange-EndTime")
+      }, "/", GlobalFunc.time2String(new Date(this.recordEndTime)))))), /*#__PURE__*/React.createElement("div", {
+        className: "".concat(replayPrefix, "-VmsOperatorItems-sliceRange-section2"),
+        style: {
+          display: !sliceStatus ? 'block' : 'none'
+        },
+        ref: this.progressFrame
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "".concat(replayPrefix, "-VmsOperatorItems-sliceRange-section2-progressFrame"),
+        onWheel: this._graduationWheel
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "".concat(replayPrefix, "-VmsOperatorItems-sliceRange-section2-realFrame"),
+        ref: this.realFrame,
+        style: {
+          width: frameWidth,
+          transform: 'translateX(-' + graduationLeft * 100 + '%)'
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "".concat(replayPrefix, "-VmsOperatorItems-sliceRange-section2-graduation"),
+        style: {
+          marginLeft: '-' + graduationRestLeft * 100 + '%',
+          cursor: isGraduationDown ? 'grabbing' : 'grab'
+        },
+        onMouseDown: this._graduationDown
+      }, graduationArr), /*#__PURE__*/React.createElement("div", {
+        className: "".concat(replayPrefix, "-VmsOperatorItems-sliceRange-section2-realProgress"),
+        onClick: function onClick(event) {
+          return _this6._changeTime(event.clientX);
+        }
+      }, realRecordPosiArr, videoTags.indexOf(2) !== -1 && /*#__PURE__*/React.createElement("div", {
+        className: "".concat(replayPrefix, "-VmsOperatorItems-sliceRange-section2-tags"),
+        onClick: function onClick(e) {
+          return e.stopPropagation();
+        }
+      }, this._renderTag()), /*#__PURE__*/React.createElement("div", {
+        className: "".concat(replayPrefix, "-VmsOperatorItems-sliceRange-section2-propressBall"),
+        ref: this.progressBall,
+        onDragStart: function onDragStart(e) {
+          return e.preventDefault();
+        },
+        onMouseDown: function onMouseDown(e) {
+          return _this6.onProgressBallMouseDown(e);
+        },
+        style: {
+          left: propressBallLeft * 100 + '%'
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "".concat(replayPrefix, "-VmsOperatorItems-sliceRange-section2-realProgress-solid")
+      }))), parseFloat(selectedProgressWidth) !== 0 && /*#__PURE__*/React.createElement(ProgressSign, {
+        width: selectedProgressWidth * 100 + '%',
+        left: selectedProgressLeft * 100 + '%'
+      })))), /*#__PURE__*/React.createElement("div", {
+        className: "".concat(replayPrefix, "-VmsOperatorItems-sliceRange-section3")
+      }, /*#__PURE__*/React.createElement("section", {
+        className: "".concat(replayPrefix, "-VmsOperatorItems-sliceRange-section3-left")
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "".concat(replayPrefix, "-VmsOperatorItems-sliceRange-buttFrame"),
+        onClick: function onClick() {
+          return _this6._videoOperation('screen');
+        }
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "".concat(replayPrefix, "-VmsOperatorItems-sliceRange-splitScreen ").concat(replayPrefix, "-VmsOperatorItems-sliceRange-butt"),
+        title: textLocale.splitScreen
+      }), isSplitScreen && /*#__PURE__*/React.createElement(SplitScreen, {
+        changeScreen: this._changeScreen,
+        splitType: "relay"
+      })), /*#__PURE__*/React.createElement(Popover, {
+        overlayClassName: "".concat(CUSTOM_PREFIX, "-video-close-pop"),
+        overlayStyle: {
+          width: '40px',
+          height: '30px'
+        },
+        placement: "right",
+        arrowPointAtCenter: true,
+        content: /*#__PURE__*/React.createElement("div", {
+          className: "".concat(CUSTOM_PREFIX, "-video-close-all"),
+          onClick: function onClick() {
+            return _this6._videoOperation('closeAllLive');
+          },
+          title: textLocale.closeAll
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "".concat(CUSTOM_PREFIX, "-video-close-all-icon")
+        }))
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "".concat(CUSTOM_PREFIX, "-video-close-single"),
+        onClick: function onClick() {
+          return _this6._videoOperation('closeLive');
+        },
+        title: textLocale.close
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "".concat(CUSTOM_PREFIX, "-video-close-single-icon")
+      })))), /*#__PURE__*/React.createElement("section", {
+        className: "".concat(replayPrefix, "-VmsOperatorItems-sliceRange-section3-center")
+      }, /*#__PURE__*/React.createElement("div", {
+        className: buttClass
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "".concat(replayPrefix, "-VmsOperatorItems-sliceRange-quickBack ").concat(replayPrefix, "-VmsOperatorItems-sliceRange-butt"),
+        title: textLocale.singleBack,
+        onClick: function onClick() {
+          return _this6.singleReplay(7, 24);
+        }
+      })), /*#__PURE__*/React.createElement("div", {
+        className: buttClass,
+        style: {
+          width: 60
+        },
+        onClick: function onClick() {
+          return _this6.singleReplay(replayState ? 1 : 2);
+        }
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "".concat(replayPrefix, "-VmsOperatorItems-sliceRange-butt") + (replayState ? " ".concat(replayPrefix, "-VmsOperatorItems-sliceRange-play") : " ".concat(replayPrefix, "-VmsOperatorItems-sliceRange-pause")),
+        title: textLocale.playPause
+      })), /*#__PURE__*/React.createElement("div", {
+        className: buttClass
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "".concat(replayPrefix, "-VmsOperatorItems-sliceRange-quickGo ").concat(replayPrefix, "-VmsOperatorItems-sliceRange-butt"),
+        title: textLocale.singleGo,
+        onClick: function onClick() {
+          return _this6.singleReplay(7, 23);
+        }
+      })), /*#__PURE__*/React.createElement("div", {
+        className: "".concat(replayPrefix, "-VmsOperatorItems-sliceRange-rateSelect ").concat(buttClass, " ") + (isSelectingRate ? " ".concat(replayPrefix, "-VmsOperatorItems-sliceRange-rateSelect-active") : ''),
+        onClick: this._showRate
+      }, rate + 'X'), isSelectingRate && /*#__PURE__*/React.createElement("div", {
+        className: "".concat(replayPrefix, "-VmsOperatorItems-sliceRange-rateFrame"),
+        onClick: this._stopAll,
+        onWheel: this._rateFrameScroll
+      }, showRateIndex !== 0 && /*#__PURE__*/React.createElement("span", {
+        className: "".concat(replayPrefix, "-VmsOperatorItems-sliceRange-rateFrame-top ").concat(replayPrefix, "-VmsOperatorItems-sliceRange-rateFrame-direction"),
+        onClick: function onClick() {
+          return _this6._showRateChange(false);
+        }
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "".concat(replayPrefix, "-VmsOperatorItems-sliceRange-rateFrame-topIcon")
+      })), rateArr.length !== showRateIndex + 2 && /*#__PURE__*/React.createElement("span", {
+        className: "".concat(replayPrefix, "-VmsOperatorItems-sliceRange-rateFrame-bottom ").concat(replayPrefix, "-VmsOperatorItems-sliceRange-rateFrame-direction"),
+        onClick: function onClick() {
+          return _this6._showRateChange(true);
+        }
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "".concat(replayPrefix, "-VmsOperatorItems-sliceRange-rateFrame-bottomIcon")
+      })), /*#__PURE__*/React.createElement("div", {
+        className: "".concat(replayPrefix, "-VmsOperatorItems-sliceRange-rateItems")
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "".concat(replayPrefix, "-VmsOperatorItems-sliceRange-rateItems-parent ") + "".concat(replayPrefix, "-VmsOperatorItems-sliceRange-rateItems-posi") + showRateIndex
+      }, sortedArr.map(function (element) {
+        return /*#__PURE__*/React.createElement("span", {
+          key: element,
+          className: "".concat(replayPrefix, "-VmsOperatorItems-sliceRange-rateItem") + (rate === element ? " ".concat(replayPrefix, "-VmsOperatorItems-sliceRange-rateItem-active") : ''),
+          onClick: function onClick() {
+            return _this6._changeRate(RATE_OBJ[element]);
+          }
+        }, element);
+      }))))), /*#__PURE__*/React.createElement("section", {
+        className: "".concat(replayPrefix, "-VmsOperatorItems-sliceRange-section3-right")
+      }, !isOpenSound && /*#__PURE__*/React.createElement("div", {
+        className: "".concat(operationStatus ? 'dev-sound' : 'dev-sound-disable'),
+        onClick: this.soundCtr,
+        title: "".concat(isOpenSound ? textLocale.mute : textLocale.unmute)
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "dev-sound-icon"
+      })), isOpenSound && /*#__PURE__*/React.createElement(Popover, {
+        overlayClassName: "dev-sound-pop",
+        overlayStyle: {
+          width: '200px',
+          height: '30px'
+        },
+        placement: "left",
+        arrowPointAtCenter: true,
+        content: /*#__PURE__*/React.createElement("div", {
+          className: "dev-sound-pop-volum"
+        }, /*#__PURE__*/React.createElement(USlider, {
+          value: operationStatus && operationStatus.volume ? operationStatus.volume : 0,
+          theme: "dark",
+          min: 0,
+          max: 255,
+          tipFormatter: null,
+          onChange: function onChange(value) {
+            return _this6._videoOperation('setVolume', value);
+          }
+        }))
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "".concat(operationStatus ? 'dev-sound' : 'dev-sound-disable', " dev-sound-open"),
+        onClick: this.soundCtr,
+        title: "".concat(isOpenSound ? textLocale.mute : textLocale.unmute)
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "dev-sound-icon"
+      }))), /*#__PURE__*/React.createElement("div", {
+        className: buttClass
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "".concat(replayPrefix, "-VmsOperatorItems-sliceRange-capture ").concat(replayPrefix, "-VmsOperatorItems-sliceRange-butt"),
+        onClick: function onClick() {
+          return _this6._videoOperation('capture');
+        },
+        title: textLocale.capture
+      })), /*#__PURE__*/React.createElement("div", {
+        className: buttClass
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "".concat(isdigitalZoom ? "".concat(replayPrefix, "-VmsOperatorItems-sliceRange-digitalZoom-active") : "".concat(replayPrefix, "-VmsOperatorItems-sliceRange-digitalZoom"), "   ").concat(replayPrefix, "-VmsOperatorItems-sliceRange-butt"),
+        onClick: this.digitalZoom,
+        title: "".concat(isdigitalZoom ? textLocale.close : textLocale.open).concat(textLocale.digitalAmplification)
+      })), /*#__PURE__*/React.createElement("div", {
+        className: buttClass
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "".concat(replayPrefix, "-VmsOperatorItems-sliceRange-download ").concat(replayPrefix, "-VmsOperatorItems-sliceRange-butt"),
+        title: textLocale.downLoad,
+        onClick: function onClick() {
+          return _this6.downLoad(_this6.recordStartTime, _this6.recordEndTime);
+        }
+      })), /*#__PURE__*/React.createElement("div", {
+        className: buttClass
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "".concat(replayPrefix, "-VmsOperatorItems-sliceRange-more ").concat(replayPrefix, "-VmsOperatorItems-sliceRange-butt"),
+        title: textLocale.more,
+        onClick: this._showMore
+      })))), isShowMore && /*#__PURE__*/React.createElement("div", {
+        className: "".concat(replayPrefix, "-VmsOperatorItems-sliceRange-more-funcs")
+      }, this.moreFuncs.map(function (element) {
+        return /*#__PURE__*/React.createElement("span", {
+          key: element.text,
+          className: "".concat(replayPrefix, "-VmsOperatorItems-sliceRange-more-funcs-item"),
+          onClick: element.func
+        }, element.text);
+      })), /*#__PURE__*/React.createElement("div", {
+        className: "".concat(replayPrefix, "-VmsOperatorItems-sliceRange-selectedFrame"),
+        ref: this.selectedFrame,
+        style: {
+          left: selectedFrameLeft,
+          top: selectedFrameTop,
+          visibility: isShowSROFrame ? 'visible' : 'hidden'
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "".concat(replayPrefix, "-VmsOperatorItems-sliceRange-selectedFrame-timeInfo")
+      }, this._formatStr(this.progressSelectedTime[0]), "~", this._formatStr(this.progressSelectedTime[1])), /*#__PURE__*/React.createElement("div", {
+        className: "".concat(replayPrefix, "-VmsOperatorItems-sliceRange-selectedFrame-funcs")
+      }, /*#__PURE__*/React.createElement("span", {
+        onClick: this._selectedDownload
+      }, textLocale.download))));
+    }
+    //#endregion
+  }]);
+}(Component); //#region 无状态组件
+/**
+ * 刻度
+ */
+//#region 初始化
+VmsOperatorItems.propTypes = {
+  replayMess: PropTypes.object,
+  isBlank: PropTypes.bool,
+  splitFunc: PropTypes.func,
+  cameraCode: PropTypes.string,
+  cameraName: PropTypes.string,
+  sliceData: PropTypes.array,
+  isShow: PropTypes.bool,
+  imosVideo: PropTypes.object,
+  timeRangeNum: PropTypes.number,
+  isSplitReplay: PropTypes.bool,
+  exitSr: PropTypes.func,
+  isSyncing: PropTypes.bool,
+  videoTags: PropTypes.array,
+  videoId: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+};
+VmsOperatorItems.defaultProps = {
+  isBlank: false,
+  cameraCode: '',
+  cameraName: '',
+  isShow: true,
+  timeRangeNum: 0,
+  isSplitReplay: false,
+  isSyncing: false,
+  videoTags: [0, 1, 2]
+};
+export { VmsOperatorItems as default };
+function Graduation(params) {
+  var _params$time = params.time,
+    time = _params$time === void 0 ? '' : _params$time,
+    width = params.width;
+  return /*#__PURE__*/React.createElement("span", {
+    className: "".concat(replayPrefix, "-VmsOperatorItems-sliceRange-section2-graduation-item"),
+    style: {
+      width: width
+    }
+  }, time);
+}
+
+/**
+ * 录像段
+ */
+function RecordSection(params) {
+  var moveFunc = params.moveFunc,
+    leaveFunc = params.leaveFunc,
+    downFunc = params.downFunc,
+    position = params.position,
+    enterFunc = params.enterFunc;
+  var left = position.left,
+    width = position.width;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(replayPrefix, "-VmsOperatorItems-sliceRange-section"),
+    onMouseEnter: enterFunc,
+    onMouseDown: downFunc,
+    onMouseMove: moveFunc,
+    onMouseLeave: leaveFunc,
+    style: {
+      left: left + '%',
+      width: width + '%'
+    }
+  });
+}
+function ProgressSign(params) {
+  var width = params.width,
+    left = params.left;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(replayPrefix, "-VmsOperatorItems-sliceRange-progressSign-sliceProgress"),
+    style: {
+      width: width,
+      left: left
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sliceProgress-icon ".concat(replayPrefix, "-VmsOperatorItems-sliceRange-progressSign-first")
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "sliceProgress-icon ".concat(replayPrefix, "-VmsOperatorItems-sliceRange-progressSign-end")
+  }));
+}
+// #endregion