@uni-sw/u-design 2.0.4

package/es/components/UVideo/VideoComponent/OperatorItems.js

@@ -0,0 +1,1716 @@
+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 _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 _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 _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 _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 moment from 'moment';
+import PropTypes from 'prop-types';
+import GlobalFunc from "../InitFunc/GlobalFunc";
+import message from "../../UMessageBox/message";
+import RateSelect from "./RateSelect";
+import { CUSTOM_PREFIX } from "../../../globalVarious";
+import "./OperatorItems.less";
+
+// 拼接类名前缀
+var replayPrefix = "".concat(CUSTOM_PREFIX, "-videoReplay");
+// 回放刻度对照表 , '5min', '1min'
+var DEFAULT_GRADUATION_TYPES = ['1d', '12h', '4h', '1h', '30min'];
+// 数组中的数据：每个刻度对应应该显示刻度的数量，对应多少ms
+var DEFAULT_GRADUATION_MAP = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, DEFAULT_GRADUATION_TYPES[4], [6, 30 * 60 * 1000]), DEFAULT_GRADUATION_TYPES[3], [6, 60 * 60 * 1000]), DEFAULT_GRADUATION_TYPES[2], [8, 4 * 60 * 60 * 1000]), DEFAULT_GRADUATION_TYPES[1], [12, 12 * 60 * 60 * 1000]), DEFAULT_GRADUATION_TYPES[0], [24, 24 * 60 * 60 * 1000]);
+
+// 1.更新record
+// 2.调整刻度
+// 3.滚轮缩放
+// 需要进行重新绘制 （流程：计算总时间——计算每刻度时间、长度——总长度——总段数——绘制）
+
+// 1.鼠标抓取移动
+// 2.滚动条移动
+// 3.点击当前时间
+// 4.点击某个时间
+// 需要改变translation
+
+export var RATE_OBJ = {
+  '-16': -16,
+  '-8': -8,
+  '-4': -4,
+  '-2': -2,
+  '-1': -1,
+  '1/2': 1 / 2,
+  '1/4': 1 / 4,
+  '1/8': 1 / 8,
+  '1': 1,
+  '2': 2,
+  '4': 4,
+  '8': 8,
+  '16': 16
+};
+var OperatorItems = /*#__PURE__*/function (_Component) {
+  function OperatorItems(props) {
+    var _this;
+    _classCallCheck(this, OperatorItems);
+    _this = _callSuper(this, OperatorItems, [props]);
+    //#endregion
+    _this.onStartTimer = function () {
+      if (_this.progressInterval === null) {
+        _this.progressInterval = window.setInterval(_this._getVideoCurrentTime, 1000);
+      }
+    };
+    /**
+     * 页面大小改变时调用函数
+     */
+    _this._pageResize = function () {
+      var isShow = _this.props.isShow;
+      // 如果未显示，不操作
+      if (!isShow) {
+        _this.needRepaint = true;
+        return;
+      }
+      _this._getProgressFrameWidth();
+      _this._renderPage();
+    };
+    /**
+     * 获取video的当前播放时间
+     */
+    _this._getVideoCurrentTime = function () {
+      var selectVideo = _this.props.selectVideo;
+      if (!selectVideo || !selectVideo.isRunning) {
+        return;
+      }
+      selectVideo.playStatus(function (result) {
+        if (result.ErrCode !== 0 || !result.Status.CurrentTime) {
+          return;
+        }
+        var currentTime = result.Status.CurrentTime;
+        // 更新对应操作组件的信息
+        if (_this.state.recordNow !== currentTime) {
+          _this.setState({
+            currentTime: currentTime
+          });
+          _this._changeBallLeft(currentTime);
+        }
+      });
+    };
+    /**
+     * 分屏操作
+     * @param {Event} event
+     */
+    _this._splitScreen = function (e) {
+      var splitFunc = _this.props.splitFunc;
+      splitFunc(e);
+    };
+    _this._closeAll = function () {
+      var closeAll = _this.props.closeAll;
+      closeAll();
+    };
+    /**
+     * 快进、退的时间修改
+     */
+    _this._quickJumpChange = function (event) {
+      var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      var val = event.currentTarget.value;
+      var textLocale = _this.props.textLocale;
+      if (val === '') {
+        val = '';
+      } else if (isNaN(val) || /^[0-9]*$/.test(val) === false) {
+        message.error(textLocale.illegalFigure);
+        return;
+      } else if (val <= 0) {
+        message.error(textLocale.figureRangeMessage);
+        val = 1;
+      } else if (val >= 1000) {
+        message.error(textLocale.figureRangeMessage);
+        val = 999;
+      } else {
+        val = parseInt(val, 10);
+      }
+      _this.setState({
+        quickJumpTime: val
+      });
+    };
+    /**
+     * 快退
+     */
+    _this._quickJumpBack = function () {
+      var _this$state = _this.state,
+        quickJumpTime = _this$state.quickJumpTime,
+        currentTime = _this$state.currentTime;
+      var needTime = currentTime.getTime() - quickJumpTime * 1000;
+      var jumpDate = new Date(needTime);
+      _this._recordJump(jumpDate);
+    };
+    /**
+     * 快进
+     */
+    _this._quickJumpForward = function () {
+      var _this$state2 = _this.state,
+        quickJumpTime = _this$state2.quickJumpTime,
+        currentTime = _this$state2.currentTime;
+      var needTime = currentTime.getTime() + quickJumpTime * 1000;
+      var jumpDate = new Date(needTime);
+      _this._recordJump(jumpDate);
+    };
+    _this._switchPlay = function () {
+      var selectVideo = _this.props.selectVideo;
+      var _this$state3 = _this.state,
+        replayState = _this$state3.replayState,
+        rate = _this$state3.rate;
+      if (!selectVideo || !selectVideo.isRunning) {
+        return;
+      }
+      // 如果处于帧播放中，则需要修改播放倍速
+      if (_this.isFramePlay === true) {
+        _this._changeRate(RATE_OBJ[rate], true);
+        _this.isFramePlay = false;
+        return;
+      }
+      selectVideo.switchReplay(!replayState);
+    };
+    _this._singleFrameGo = function () {
+      var selectVideo = _this.props.selectVideo;
+      if (!selectVideo || !selectVideo.isRunning) {
+        return;
+      }
+      _this.isFramePlay = true;
+      selectVideo.singleFrame();
+    };
+    _this._stepFramePlay = function () {
+      var selectVideo = _this.props.selectVideo;
+      if (!selectVideo || !selectVideo.isRunning) {
+        return;
+      }
+      _this.isFramePlay = true;
+      selectVideo.stepFrame();
+    };
+    /**
+     * 改变当前速度
+     */
+    _this._showRate = function (e) {
+      e.stopPropagation();
+      e.nativeEvent.stopImmediatePropagation();
+      var isSelectingRate = _this.state.isSelectingRate;
+      _this.setState({
+        isSelectingRate: !isSelectingRate
+      });
+    };
+    /**
+     * 停止所有冒泡
+     * @param {event} e
+     */
+    _this._stopAll = function (e) {
+      e.stopPropagation();
+      e.nativeEvent.stopImmediatePropagation();
+    };
+    /**
+     * 改变速率
+     */
+    _this._changeRate = function (newRate) {
+      var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      // 根据速度获取key值
+      var key = Reflect.ownKeys(RATE_OBJ).find(function (val) {
+        return RATE_OBJ[val] === newRate;
+      });
+      if (typeof key === 'undefined') {
+        key = '1';
+      }
+      _this.setState({
+        rate: key
+      });
+      var selectVideo = _this.props.selectVideo;
+      if (!selectVideo || !selectVideo.isRunning) {
+        return;
+      }
+      _this.isFramePlay = false;
+      selectVideo.switchReplaySpeed(newRate);
+    };
+    /**
+     * 关闭速度选择
+     */
+    _this._closeSelectRate = function () {
+      if (_this.state.isSelectingRate === false) {
+        return;
+      }
+      _this.setState({
+        isSelectingRate: false
+      });
+      document.removeEventListener('click', _this._closeSelectRate);
+    };
+    /**
+     * 渲染整个页面
+     */
+    _this._renderPage = function () {
+      _this._drawGraduation();
+      _this._drawRealRecord();
+    };
+    /**
+     * 移入进度条
+     */
+    _this._progressEnter = function () {
+      _this.needPreview = true;
+    };
+    /**
+     * 移离进度条，隐藏
+     */
+    _this._progressLeave = function () {
+      _this.needPreview = false;
+      _this.setState({
+        isShowPreview: false
+      });
+    };
+    /**
+     * 进度条上选中录像段
+     * @param {Event} mousedown事件
+     * @param {String} left 当前操作录像块的偏移百分比
+     */
+    _this._markProgress = function (event, left) {
+      // 如果是在同步回放中，不进行操作
+      if (_this.props.isSyncing === true) {
+        return;
+      }
+      _this._getProgressFrameWidth();
+      var clientX = event.clientX;
+      var offsetX = event.nativeEvent.offsetX;
+      var graduationLeft = _this.state.graduationLeft;
+      // 计算出当前操作块的偏移像素 当前模块开始的便宜-时间轴整体向左的偏移
+      var leftWidth = (left / 100 - graduationLeft) * _this.totalRealLength;
+      _this.progressMousedownTime = new Date().getTime();
+      // 表示进度条上down
+      _this.isProgressDowning = true;
+      // 设置初始left
+      _this.setState({
+        selectedProgressLeft: _this._keepFourPoint((clientX - _this.progressFrameLeft) / _this.totalRealLength + graduationLeft),
+        selectedProgressWidth: 0
+      });
+      var moveFunc = function moveFunc(e) {
+        var movedX = e.clientX - clientX;
+        var markWidth = _this._keepFourPoint(Math.abs(movedX) / _this.totalRealLength);
+        // 如果小于0，说明往左移动，那就需要修改下left值
+        if (movedX < 0) {
+          // this.selectedEnd = clientX;
+          _this.selectedEnd = leftWidth + offsetX;
+          _this.setState({
+            selectedProgressLeft: _this._keepFourPoint((e.clientX - _this.progressFrameLeft) / _this.totalRealLength + graduationLeft)
+          });
+        } else {
+          // this.selectedEnd = e.clientX;
+          _this.selectedEnd = leftWidth + offsetX + movedX;
+        }
+        // 如果大于0，往右移动，只需要修改width
+        _this.setState({
+          selectedProgressWidth: markWidth
+        });
+      };
+      var _upFunc = function upFunc(e) {
+        var _this$state4 = _this.state,
+          selectedProgressLeft = _this$state4.selectedProgressLeft,
+          selectedProgressWidth = _this$state4.selectedProgressWidth;
+        // 未移动，不操作
+        if (selectedProgressWidth !== 0) {
+          // mouseup之后会触发click，但是不希望选中录像段结束之后会触发，所以加上延迟，保证不触发
+          var yTimer = setTimeout(function () {
+            _this.isProgressDowning = false;
+            clearTimeout(yTimer);
+            yTimer = null;
+            // 添加 点击关闭功能
+            document.addEventListener('click', _this._hideSelectedFrame);
+          }, 500);
+          // 根据选中录像段绘制信息 计算出选中录像段的起始时间和结束时间
+          var startTime = new Date(_this.totalTime * selectedProgressLeft + _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();
+        }
+        _this.isProgressDowning = false;
+        _this.progressMouseupTime = new Date().getTime();
+        document.removeEventListener('mousemove', moveFunc);
+        document.removeEventListener('mouseup', _upFunc);
+      };
+      document.addEventListener('mousemove', moveFunc);
+      document.addEventListener('mouseup', _upFunc);
+    };
+    /**
+     * 隐藏选中的录像段的弹出框
+     */
+    _this._hideSelectedFrame = function () {
+      document.removeEventListener('click', _this._hideSelectedFrame);
+      if (_this.progressMouseupTime && new Date().getTime() - _this.progressMouseupTime < 100 && _this.progressMousedownTime && new Date().getTime() - _this.progressMousedownTime > 300) {
+        return;
+      }
+      _this.setState({
+        isShowSROFrame: false,
+        selectedProgressWidth: 0
+      });
+    };
+    /**
+     * 原始的移动
+     * @param {Number} clientX
+     */
+    _this._originProgressMove = function (clientX) {
+      _this._getFrameLeft();
+      // 如果当前正在选中录像段，不操作
+      if (_this.isProgressDowning === true || _this.needPreview === false) {
+        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(_this.recordStartTime.getTime() + offsetTime);
+      // console.log(moment(this.previewTime).format('MM-DD HH:mm:ss'));
+
+      var isShowPreview = _this.state.isShowPreview;
+      if (isShowPreview === false) {
+        _this.setState({
+          isShowPreview: true
+        });
+      } else {
+        // 跳转下一个时间
+        // this.videoPreview.current.jumpReplayTime(this.previewTime);
+      }
+    };
+    /**
+     * 设置选中录像框的位置
+     */
+    _this._setSelectedPosi = function () {
+      var width1 = _this.selectedFrame.current.clientWidth;
+      var _this$realFrame$curre = _this.realFrame.current.getBoundingClientRect(),
+        bottom = _this$realFrame$curre.bottom,
+        top = _this$realFrame$curre.top,
+        height = _this$realFrame$curre.height;
+      var shouldLeft = 0;
+      // 如果超出显示范围，抓回来
+      if (_this.selectedEnd + width1 > _this.progressFramewidth) {
+        shouldLeft = _this.progressFramewidth - width1;
+      } else {
+        shouldLeft = _this.selectedEnd;
+      }
+      _this.setState({
+        selectedFrameLeft: shouldLeft
+      });
+    };
+    /**
+     * 刻度上滚轮滚动
+     * @param {Event} event 滚轮事件
+     */
+    _this._graduationWheel = function (event) {
+      //chrome 滚轮wheelDelta属性 上120 下-120
+      //firefox 滚轮deltaY属性 上-3 下3
+      var wheelNum = event.nativeEvent.wheelDelta || -event.nativeEvent.deltaY;
+      var _this$props$toolsConf = _this.props.toolsConfig.mouseScrollType,
+        mouseScrollType = _this$props$toolsConf === void 0 ? 0 : _this$props$toolsConf;
+      if (mouseScrollType === 1) {
+        //mouseScrollType为1时表示左右移动
+        var resultLeft = 0;
+        var _this$state5 = _this.state,
+          scrollBarWidth = _this$state5.scrollBarWidth,
+          graduationLeft = _this$state5.graduationLeft;
+        // 转换为实际像素值
+        var realBarLeft = graduationLeft * _this.totalRealLength;
+        if (realBarLeft - wheelNum <= 0) {
+          // 移到最左侧
+          resultLeft = 0;
+        } else if (realBarLeft - wheelNum + _this.progressFramewidth >= _this.totalRealLength) {
+          // 移到最右侧
+          resultLeft = 1 - scrollBarWidth;
+        } else {
+          resultLeft = graduationLeft - _this._keepFourPoint(wheelNum / _this.totalRealLength);
+        }
+        _this.setState({
+          graduationLeft: resultLeft
+        });
+      } else {
+        //向下滚动  设置起始和结束各 +1
+        if (wheelNum < 0) {
+          _this._changeTimeControl(false);
+        } else {
+          _this._changeTimeControl(true);
+        }
+      }
+    };
+    /**
+     * 刻度上拖拽
+     * @param {Event} event 滚轮事件
+     */
+    _this._graduationDown = function (event) {
+      var _this$state6 = _this.state,
+        scrollBarWidth = _this$state6.scrollBarWidth,
+        graduationLeft = _this$state6.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
+          // );
+          resultLeft = graduationLeft - _this._keepFourPoint(changedX / _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);
+    };
+    /**
+     * 点击当前时间，改变位置
+     */
+    _this._currentTimeClick = function () {
+      var propressBallLeft = _this.state.propressBallLeft,
+        realBallLeft = propressBallLeft * _this.totalRealLength,
+        graduationLeft = 0;
+
+      // 如果长度足够，进度球显示在正中间
+      if (realBallLeft >= _this.progressFramewidth / 2) {
+        // 刻度位置偏移量校验，确保刻度能完整显示在可视区域
+        var remainingLength = _this.totalRealLength - realBallLeft;
+        if (remainingLength >= _this.progressFramewidth / 2) {
+          graduationLeft = _this._keepFourPoint((realBallLeft - _this.progressFramewidth / 2) / _this.totalRealLength);
+        } else {
+          graduationLeft = _this._keepFourPoint((_this.totalRealLength - _this.frame.current.offsetWidth) / _this.totalRealLength);
+        }
+      } else {
+        // 如果长度不够，进度球尽量往中间靠
+        graduationLeft = 0;
+      }
+      _this.setState({
+        graduationLeft: graduationLeft
+      });
+    };
+    /**
+     * 原始的移动
+     * @param {Number} clientX
+     */
+    _this._changeTime = function (clientX) {
+      var recordList = _this.state.recordList;
+      // 没有录像时，不操作
+      if (recordList.length === 0) {
+        return;
+      }
+      // 如果是选中录像段之后结束触发的，不操作
+      if (_this.isProgressDowning === true) {
+        return;
+      }
+      if (_this.progressMousedownTime && new Date().getTime() - _this.progressMousedownTime > 500) {
+        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);
+      _this.setState({
+        // replayState: true
+      });
+      _this._recordJump(resultTime);
+    };
+    _this._recordJump = function (resultTime) {
+      if (_this.progressInterval !== null) {
+        window.clearInterval(_this.progressInterval);
+        _this.progressInterval = null;
+      }
+      _this.isFramePlay = false;
+      var selectVideo = _this.props.selectVideo;
+      if (selectVideo && selectVideo.isRunning) {
+        selectVideo.recordJump(resultTime, function (result) {
+          if (result.ErrCode === 0) {
+            if (_this.progressInterval === null) {
+              _this.progressInterval = window.setInterval(_this._getVideoCurrentTime, 1000);
+            }
+            selectVideo.switchReplay(true);
+          }
+        });
+      }
+    };
+    /**
+     * 选中下载
+     */
+    _this._selectedDownload = function () {
+      var downloadSelect = _this.props.downloadSelect;
+      downloadSelect(_this.progressSelectedTime[0], _this.progressSelectedTime[1]);
+    };
+    /**
+     * @description: 下载
+     * @param {type}
+     * @return:
+     */
+    _this._recordDownload = function () {
+      var downloadVideo = _this.props.downloadVideo;
+      downloadVideo();
+    };
+    //#endregion
+    // #region  键盘事件
+    // 长按事件
+    _this._handleLongKeyPress = function (e) {
+      var selectVideo = _this.props.selectVideo;
+      switch (e.code) {
+        case 'ArrowLeft':
+          selectVideo.changePlaySpeed(-16);
+          break;
+        case 'ArrowRight':
+          selectVideo.changePlaySpeed(16);
+          break;
+        default:
+          // 其他按键不做处理
+          break;
+      }
+    };
+    // 短按事件
+    _this._handleShortKeyPress = function (e) {
+      switch (e.code) {
+        case 'ArrowLeft':
+          _this._quickJumpBack();
+          break;
+        case 'ArrowRight':
+          _this._quickJumpForward();
+          break;
+        default:
+          // 其他按键不做处理
+          break;
+      }
+    };
+    // 长按事件恢复
+    _this._handleLongPressRecovery = function () {
+      var selectVideo = _this.props.selectVideo;
+      var rate = _this.state.rate;
+      selectVideo.changePlaySpeed(RATE_OBJ[rate]);
+    };
+    _this.state = {
+      // 当前时间
+      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,
+      // 切片部分的left值
+      sliceLeft: 0,
+      // 时间控制器的left值
+      timeRangeBallLeft: 0,
+      // 是否展示预览
+      isShowPreview: false,
+      // 预览窗口的left值
+      previewLeft: 0,
+      // 切片进度条 当前时间的显示
+      sliceProgressNow: '',
+      // 是否正在切片中 用于判断是否显示切片最后一张卡片
+      isSlicing: false,
+      // 当前进度
+      recordNow: '',
+      // 显示切片进度游标
+      showSliceVernier: false,
+      // 游标的left值
+      sliceVernierLeft: 0,
+      // 速度选择中
+      isSelectingRate: false,
+      rate: '1',
+      // 显示视频标识弹窗
+      isShowVideoTag: false,
+      tagList: [],
+      // 快进退的时间选择
+      quickJumpTime: 30,
+      // 选中部分录像段的宽度
+      selectedProgressWidth: 0,
+      // 选中部分录像段的left
+      selectedProgressLeft: 0,
+      // 实现展示被选中的录像段操作框
+      isShowSROFrame: false,
+      // 显示选中操作框的left值
+      selectedFrameLeft: '50%',
+      recordList: [],
+      isNeedSplit: 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.imosVideo = null;
+    // 记录当前选中的视频的录像段信息
+    _this.replayMess = null;
+    _this.record = [];
+    _this.cameraCode = '';
+    _this.cameraName = '';
+    _this.recordStartTime = '';
+    _this.recordEndTime = '';
+    // 显示更多操作
+    _this.moreFuncs = [{
+      text: _this.props.textLocale.videoDownLoad || '录像下载',
+      func: _this._downloadVideoClick
+    }, {
+      text: _this.props.textLocale.videoSlice || '录像切片',
+      func: _this.clickSliceFunc
+    }, {
+      text: _this.props.textLocale.tagManage || '标签管理',
+      func: _this._showTagManage
+    }, {
+      text: _this.props.textLocale.fullcreen || '全屏',
+      func: _this._fullScreen
+    }];
+    // 时间选择控制器正在操作中
+    _this.isControling = false;
+    // 时间选择控制器的定时器
+    _this.controlTimer = null;
+    // 暂时先写死
+    _this.previewWidth = 102;
+    // 查询进度的定时器
+    _this.progressInterval = null;
+    // 鼠标类型 进度条上，选中录像段、跳转等操作标识
+    _this.mouseType = 0;
+    // 是否正处于进度条上选中时
+    _this.isProgressDowning = false;
+    // 选中的录像段的开始时间和结束时间
+    _this.progressSelectedTime = [new Date(), new Date()];
+    // 选中录像段的最尾部
+    _this.selectedEnd = 0;
+    // 预览时间
+    _this.previewTime = new Date();
+    _this.needPreview = false;
+
+    // 是否需要重新绘制
+    _this.needRepaint = false;
+    _this.progressFrame = /*#__PURE__*/createRef();
+    _this.realFrame = /*#__PURE__*/createRef();
+    _this.progressBall = /*#__PURE__*/createRef();
+    _this.frame = /*#__PURE__*/createRef();
+    _this.videoPreview = /*#__PURE__*/createRef();
+    _this.selectedFrame = /*#__PURE__*/createRef();
+    _this.isFramePlay = false;
+    _this.GRADUATION_TYPES = [].concat(DEFAULT_GRADUATION_TYPES);
+    _this.GRADUATION_MAP = _objectSpread({}, DEFAULT_GRADUATION_MAP);
+    _this.DEFAULT_GRADUATION_TYPES_NAME = {
+      '1d': "1".concat(_this.props.textLocale.day),
+      '12h': "12".concat(_this.props.textLocale.hour),
+      '4h': "4".concat(_this.props.textLocale.hour),
+      '1h': "1".concat(_this.props.textLocale.hour),
+      '30min': "30".concat(_this.props.textLocale.minute)
+    };
+    return _this;
+  }
+
+  //#endregion
+
+  //#region 生命周期
+  _inherits(OperatorItems, _Component);
+  return _createClass(OperatorItems, [{
+    key: "componentWillMount",
+    value: function componentWillMount() {}
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+      this._getFrameLeft();
+      this._getProgressFrameWidth();
+      window.addEventListener('resize', this._pageResize);
+      // 添加 ResizeObserver 监听组件尺寸变化
+      if (window.ResizeObserver) {
+        this.resizeObserver = new ResizeObserver(this._pageResize);
+        if (this.frame.current) {
+          this.resizeObserver.observe(this.frame.current);
+        }
+      }
+      var _this$props = this.props,
+        replayState = _this$props.replayState,
+        recordList = _this$props.recordList,
+        isNeedSplit = _this$props.isNeedSplit;
+      if (recordList && recordList.length > 0) {
+        var len = nextProps.recordList.length;
+        this.recordStartTime = recordList[0].StartTime;
+        this.recordEndTime = recordList[len - 1].EndTime;
+      }
+      this.setState({
+        replayState: replayState,
+        isNeedSplit: isNeedSplit,
+        recordList: recordList
+      }, function () {
+        _this2._calcGraduationWidth(_this2._renderPage);
+      });
+      this.onStartTimer();
+    }
+  }, {
+    key: "componentWillReceiveProps",
+    value: function componentWillReceiveProps(nextProps) {
+      var _this3 = this;
+      if (nextProps.replayState !== this.props.replayState) {
+        this.setState({
+          replayState: nextProps.replayState
+        });
+      }
+      if (nextProps.recordList !== this.props.recordList) {
+        if (nextProps.recordList && nextProps.recordList.length !== 0) {
+          var len = nextProps.recordList.length;
+          this.recordStartTime = nextProps.recordList[0].StartTime;
+          this.recordEndTime = nextProps.recordList[len - 1].EndTime;
+        }
+        this.setState({
+          recordList: nextProps.recordList
+        }, function () {
+          _this3._getProgressFrameWidth();
+          _this3._getVideoCurrentTime();
+          _this3._calcGraduationWidth(function () {
+            _this3._renderPage();
+            //切换选中窗格后刻度位置偏移，当前窗格播放时间保持在渲染区域内
+            setTimeout(function () {
+              _this3._currentTimeClick();
+            }, 100);
+          });
+        });
+      }
+      if (nextProps.isBlank !== this.props.isBlank && nextProps.isBlank) {
+        this.setState({
+          propressBallLeft: 0
+        });
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      if (this.progressInterval !== null) {
+        window.clearInterval(this.progressInterval);
+        this.progressInterval = null;
+      }
+      window.removeEventListener('resize', this._pageResize);
+      // 清理 ResizeObserver
+      if (this.resizeObserver) {
+        this.resizeObserver.disconnect();
+        this.resizeObserver = null;
+      }
+    }
+  }, {
+    key: "_changeBallLeft",
+    value:
+    //#region 进度球
+    /**
+     * 进度更新，改变进度球的位置
+     */
+    function _changeBallLeft(currentTime) {
+      var graduationLeft = this.state.graduationLeft;
+      // 已经播放时间
+      var playedTime = currentTime.getTime() - 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
+      });
+    }
+
+    /**
+     * 获取frame的left值
+     */
+  }, {
+    key: "_getFrameLeft",
+    value: function _getFrameLeft() {
+      this.frameLeft = this.frame.current.getBoundingClientRect().x;
+    }
+
+    /**
+     * 获取进度条框的宽度
+     */
+  }, {
+    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;
+    }
+    /**
+     * 动态计算刻度尺
+     */
+  }, {
+    key: "_calcGraduationWidth",
+    value: function _calcGraduationWidth() {
+      var callBack = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : function () {};
+      this.GRADUATION_TYPES = [].concat(DEFAULT_GRADUATION_TYPES);
+      this.GRADUATION_MAP = _objectSpread({}, DEFAULT_GRADUATION_MAP);
+      var time = parseInt(new Date(this.recordEndTime) - new Date(this.recordStartTime));
+      if (time > 24 * 60 * 60 * 1000) {
+        var hour = time / (1000 * 60 * 60);
+        var day = time / (1000 * 60 * 60 * 24);
+        this.GRADUATION_TYPES.unshift(day.toString());
+        this.GRADUATION_MAP = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, this.GRADUATION_TYPES[5], [6, 30 * 60 * 1000, 0.25]), this.GRADUATION_TYPES[4], [6, 60 * 60 * 1000, 0.25]), this.GRADUATION_TYPES[3], [8, 4 * 60 * 60 * 1000, 0.33]), this.GRADUATION_TYPES[2], [12, 12 * 60 * 60 * 1000, 0.5]), this.GRADUATION_TYPES[1], [24, 24 * 60 * 60 * 1000, 1]), this.GRADUATION_TYPES[0], [hour, time, day]);
+      }
+      callBack();
+    }
+    /**
+     * 保留四位小数
+     * @param {Number} num 需要处理的数
+     */
+  }, {
+    key: "_keepFourPoint",
+    value: function _keepFourPoint(num) {
+      return parseFloat(num.toFixed(4));
+    }
+
+    //#endregion
+
+    /**
+     * 渲染标签
+     */
+  }, {
+    key: "_renderTag",
+    value: function _renderTag() {
+      var _this4 = this;
+      var tagList = this.state.tagList;
+      var recordStart = this.recordStartTime;
+      return tagList.map(function (element, index) {
+        var left = _this4._keepFourPoint((element.TagTime - recordStart) / _this4.totalTime) * 100 + '%';
+        return /*#__PURE__*/React.createElement("span", {
+          key: index,
+          className: "".concat(replayPrefix, "-operatorItems-section2-tag"),
+          style: {
+            left: left
+          },
+          onClick: function onClick() {
+            return _this4._tagJump(element.TagTime);
+          }
+        });
+      });
+    }
+
+    /**
+     * 格式化时间
+     * @param {Date} originDate 原始数据
+     * @returns {String} 返回格式化后时间 MM-DD HH:mm:ss
+     */
+  }, {
+    key: "_formatStr",
+    value: function _formatStr(originDate) {
+      var dateStr = GlobalFunc.time2String(originDate);
+      dateStr = dateStr.slice(5);
+      return dateStr;
+    }
+  }, {
+    key: "_drawRealRecord",
+    value:
+    /**
+     * 根据录像段画出实际录像
+     */
+    function _drawRealRecord() {
+      var _this5 = this;
+      var recordList = this.state.recordList;
+      var _this$props$toolsConf2 = this.props.toolsConfig.isShowDownLoad,
+        isShowDownLoad = _this$props$toolsConf2 === void 0 ? true : _this$props$toolsConf2;
+      // 如果没有录像段，不需要渲染
+      if (!recordList || recordList.length === 0) {
+        return;
+      }
+      // 根据每段的起始时间和实际长度，进行绘画
+      var recordBeginTime = recordList[0].StartTime;
+      var realRecordPosiArr = recordList.map(function (element, index) {
+        var sectionPosition = _this5._createReplaySection(element, recordBeginTime);
+        return /*#__PURE__*/React.createElement(RecordSection, {
+          key: index,
+          position: sectionPosition,
+          moveFunc: function moveFunc(event) {
+            return _this5._originProgressMove(event.clientX);
+          },
+          leaveFunc: _this5._progressLeave,
+          downFunc: isShowDownLoad ? function (e) {
+            return _this5._markProgress(e, sectionPosition.left);
+          } : '',
+          enterFunc: _this5._progressEnter
+        });
+      });
+      this.setState({
+        realRecordPosiArr: realRecordPosiArr
+      });
+    }
+  }, {
+    key: "_createReplaySection",
+    value:
+    /**
+     * 生成回放块的信息
+     * @param {Object} replayVideoParam
+     * @param {Date} recordBeginTime
+     */
+    function _createReplaySection(replayVideoParam, recordBeginTime) {
+      var replayVideo = {},
+        totalTime = this.totalTime;
+      var StartTime = replayVideoParam.StartTime,
+        EndTime = replayVideoParam.EndTime;
+      var leftTime = this._calcDV(StartTime, recordBeginTime);
+      // 根据回放段的起始和结束时间，计算出回放段的宽度和left
+      replayVideo.left = (leftTime * 100 / totalTime).toFixed(2);
+      replayVideo.width = (this._calcDV(StartTime, EndTime) * 100 / totalTime).toFixed(2);
+      return replayVideo;
+    }
+
+    //#region 刻度操作
+    /**
+     * 计算刻度信息
+     * @returns {[eachWidth, eachTimeStamp, allTime]} [eachWidth, eachTimeStamp, allTime]
+     */
+  }, {
+    key: "_calcEachWidth",
+    value: function _calcEachWidth() {
+      var graduation = this.state.graduation;
+      var _this$GRADUATION_MAP$ = _slicedToArray(this.GRADUATION_MAP[this.GRADUATION_TYPES[graduation]], 2),
+        times = _this$GRADUATION_MAP$[0],
+        timeStamp = _this$GRADUATION_MAP$[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);
+      }
+    }
+
+    /**
+     * 计算真实长度
+     * @param {number} eachGraduation 每段时间戳
+     * @param {number} eachWidth 每段长度
+     */
+  }, {
+    key: "_countTotalLength",
+    value: function _countTotalLength(eachGraduation, eachWidth) {
+      this._countTotalTime();
+      // 总长度
+      this.totalRealLength = Math.round(this.totalTime / eachGraduation * eachWidth);
+    }
+
+    /**
+     * 无记录时，显示的信息
+     */
+  }, {
+    key: "_createBlankGraduation",
+    value: function _createBlankGraduation() {
+      var graduationArr = [];
+      var _this$_calcEachWidth = this._calcEachWidth(),
+        _this$_calcEachWidth2 = _slicedToArray(_this$_calcEachWidth, 3),
+        eachWidth = _this$_calcEachWidth2[0],
+        eachTimeStamp = _this$_calcEachWidth2[1],
+        number = _this$_calcEachWidth2[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
+      });
+    }
+
+    /**
+     * 生成单个时间字符串
+     * @param {Date} time 时间
+     */
+  }, {
+    key: "_createSingleTimeStr",
+    value: function _createSingleTimeStr(time) {
+      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:
+        case 5:
+          return this._dateFixed(hour) + ':' + this._dateFixed(minute);
+        case 6:
+          return this._dateFixed(minute) + ':' + this._dateFixed(second);
+        default:
+          return this._dateFixed(hour) + ':' + this._dateFixed(minute);
+      }
+    }
+
+    /**
+     * 计算时间差值
+     * @param {Date} date1
+     * @param {Date} date2
+     * @returns {Number} 两者相差的时间戳
+     */
+  }, {
+    key: "_calcDV",
+    value: function _calcDV(date1, date2) {
+      var dv = date1.getTime() - date2.getTime();
+      return Math.abs(dv);
+    }
+
+    /**
+     * 计算总时间
+     */
+  }, {
+    key: "_countTotalTime",
+    value: function _countTotalTime() {
+      var recordList = this.state.recordList;
+      if (recordList.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;
+        }
+      }
+    }
+
+    /**
+     * 绘制刻度
+     */
+  }, {
+    key: "_drawGraduation",
+    value: function _drawGraduation() {
+      var _this$_calcEachWidth3 = this._calcEachWidth(),
+        _this$_calcEachWidth4 = _slicedToArray(_this$_calcEachWidth3, 2),
+        eachWidth = _this$_calcEachWidth4[0],
+        eachGraduation = _this$_calcEachWidth4[1];
+      // 计算总长度、总时间
+      this._countTotalLength(eachGraduation, eachWidth);
+      // 如果没有录像段，渲染空白
+      if (this.props.isBlank === true) {
+        this._createBlankGraduation();
+        return;
+      }
+      var graduationArr = [];
+      // 计算多余时间
+      var restTime = this.recordStartTime.getTime() % eachGraduation,
+        restTimeWidth = this._keepFourPoint(restTime / this.totalTime),
+        // 总共需要多少段
+        totalParagraphs = Math.round(this.totalTime / eachGraduation);
+      // 如果有多余时间，需要次数+1
+      if (restTime !== 0) {
+        totalParagraphs++;
+      }
+      // 第一个刻度
+      var firstGraduation = 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
+      });
+    }
+
+    //#endregion
+
+    //#region 刻度进度条操作
+    /**
+     * 改变时间显示控制器
+     * @param {boolean} type 放大或者缩小 true：放大；false：缩小，默认放大
+     */
+  }, {
+    key: "_changeTimeControl",
+    value: function _changeTimeControl() {
+      var _this6 = this;
+      var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+      // 防止过多次数触发
+      if (this.isControling) {
+        if (this.controlTimer === null) {
+          this.controlTimer = setInterval(function () {
+            if (_this6.isControling) {
+              return;
+            }
+            _this6._changeTimeControl(type);
+            clearInterval(_this6.controlTimer);
+            _this6.controlTimer = null;
+          }, 500);
+        }
+      }
+      this.isControling = true;
+      var _this$state7 = this.state,
+        graduation = _this$state7.graduation,
+        graduationLeft = _this$state7.graduationLeft,
+        propressBallLeft = _this$state7.propressBallLeft;
+      var timeRangeNum = this.props.timeRangeNum;
+
+      // 如果当前标准已经是最大或者最小
+      if (graduation === 0 && type === false || graduation === this.GRADUATION_TYPES.length - 1 && type === true) {
+        this.isControling = false;
+        return;
+      }
+      var newGraduation = 0;
+      // 放大,如果已经是最大，不需要放大
+      if (type === true && graduation !== this.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 () {
+        // 修改完刻度范围之后，重新绘制
+        _this6._renderPage();
+        _this6._adjustGraduationPostion();
+        _this6._setScrollLength();
+        _this6.isControling = false;
+      });
+    }
+
+    /**
+     * 设置滚动条长度
+     */
+  }, {
+    key: "_setScrollLength",
+    value: function _setScrollLength() {
+      // 计算显示比
+      this._calcShowScale();
+      // 设置长度
+      this.setState({
+        scrollBarWidth: this.showScale
+      });
+    }
+
+    /**
+     * 计算显示比
+     */
+  }, {
+    key: "_calcShowScale",
+    value: function _calcShowScale() {
+      // 显示长度 / 总长度，保留4位小数
+      this.showScale = parseFloat((this.progressFramewidth / this.totalRealLength).toFixed(4));
+    }
+
+    /**
+     * 调整刻度位置，保证当前进度点所处位置没有改变
+     */
+  }, {
+    key: "_adjustGraduationPostion",
+    value: function _adjustGraduationPostion() {
+      var recordList = this.state.recordList;
+      if (recordList.length === 0) {
+        return;
+      }
+      var _this$state8 = this.state,
+        currentTime = _this$state8.currentTime,
+        graduation = _this$state8.graduation;
+      // 首先计算ball需要的left值
+      var playedTime = currentTime.getTime() - 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;
+      } else {
+        // 刻度位置偏移量校验，确保刻度能完整显示在可视区域
+        var graduationDisLength = (1 - newGraduationLeft) * this.totalRealLength; // 刻度条去掉左侧偏移部分剩余的长度
+        if (graduationDisLength < this.frame.current.offsetWidth) {
+          newGraduationLeft = 1 - this.frame.current.offsetWidth / this.totalRealLength;
+        }
+      }
+      this.setState({
+        graduationLeft: newGraduationLeft
+      });
+    }
+  }, {
+    key: "_dateFixed",
+    value:
+    /**
+     * 时间补全
+     */
+    function _dateFixed(num) {
+      return num.toString().padStart(2, '0');
+    }
+  }, {
+    key: "render",
+    value:
+    // #endregion
+
+    //#region render
+    function render() {
+      var _this7 = this;
+      var _this$state9 = this.state,
+        currentTime = _this$state9.currentTime,
+        realRecordPosiArr = _this$state9.realRecordPosiArr,
+        graduationArr = _this$state9.graduationArr,
+        propressBallLeft = _this$state9.propressBallLeft,
+        graduationRestLeft = _this$state9.graduationRestLeft,
+        graduationLeft = _this$state9.graduationLeft,
+        isGraduationDown = _this$state9.isGraduationDown,
+        graduation = _this$state9.graduation,
+        replayState = _this$state9.replayState,
+        isSelectingRate = _this$state9.isSelectingRate,
+        rate = _this$state9.rate,
+        quickJumpTime = _this$state9.quickJumpTime,
+        selectedProgressWidth = _this$state9.selectedProgressWidth,
+        selectedProgressLeft = _this$state9.selectedProgressLeft,
+        isShowSROFrame = _this$state9.isShowSROFrame,
+        selectedFrameLeft = _this$state9.selectedFrameLeft,
+        isShowPreview = _this$state9.isShowPreview,
+        previewLeft = _this$state9.previewLeft,
+        recordList = _this$state9.recordList,
+        isNeedSplit = _this$state9.isNeedSplit;
+      var _this$props2 = this.props,
+        isShow = _this$props2.isShow,
+        isBlank = _this$props2.isBlank,
+        videoTags = _this$props2.videoTags,
+        isFullScreen = _this$props2.isFullScreen,
+        textLocale = _this$props2.textLocale,
+        theme = _this$props2.theme,
+        toolsConfig = _this$props2.toolsConfig,
+        videoType = _this$props2.videoType,
+        changeScreen = _this$props2.changeScreen;
+      var showScreen = true;
+      var showMaxScreen = true;
+      var showFullScreen = false;
+      var showCloseAll = true;
+      var showDownLoad = true;
+      var showReplayFastPlayback = true;
+      if (toolsConfig) {
+        var _toolsConfig$isShowSp = toolsConfig.isShowSplit,
+          isShowSplit = _toolsConfig$isShowSp === void 0 ? true : _toolsConfig$isShowSp,
+          _toolsConfig$isShowMa = toolsConfig.isShowMax,
+          isShowMax = _toolsConfig$isShowMa === void 0 ? true : _toolsConfig$isShowMa,
+          isShowFullScreen = toolsConfig.isShowFullScreen,
+          _toolsConfig$isShowCl = toolsConfig.isShowCloseAll,
+          isShowCloseAll = _toolsConfig$isShowCl === void 0 ? true : _toolsConfig$isShowCl,
+          _toolsConfig$isShowDo = toolsConfig.isShowDownLoad,
+          isShowDownLoad = _toolsConfig$isShowDo === void 0 ? true : _toolsConfig$isShowDo,
+          _toolsConfig$isReplay = toolsConfig.isReplayFastPlayback,
+          isReplayFastPlayback = _toolsConfig$isReplay === void 0 ? true : _toolsConfig$isReplay;
+        showScreen = isShowSplit;
+        showMaxScreen = isShowMax;
+        showFullScreen = isShowFullScreen;
+        showCloseAll = isShowCloseAll;
+        showDownLoad = isShowDownLoad;
+        showReplayFastPlayback = isReplayFastPlayback;
+      }
+      var buttClass = "".concat(replayPrefix, "-operatorItems-buttFrame") + (isBlank ? '-disable' : '');
+      // 进度条外框宽度
+      var frameWidth = this.totalRealLength || '100%';
+
+      // 速率的数组
+      var rateArr = Object.keys(RATE_OBJ);
+      var sortedArr = rateArr.sort(function (a, b) {
+        return parseFloat(a) > parseFloat(b) ? 1 : -1;
+      });
+
+      //刻度尺显示范围展示文本
+      var currentGraduationName = this.DEFAULT_GRADUATION_TYPES_NAME[this.GRADUATION_TYPES[graduation]];
+      if (!currentGraduationName && graduation === 0) {
+        var index = this.GRADUATION_TYPES[graduation];
+        var _this$GRADUATION_MAP$2 = _slicedToArray(this.GRADUATION_MAP[index], 3),
+          times = _this$GRADUATION_MAP$2[0],
+          timeStamp = _this$GRADUATION_MAP$2[1],
+          day = _this$GRADUATION_MAP$2[2];
+        currentGraduationName = "".concat(Math.ceil(day)).concat(this.props.textLocale.day);
+      }
+      return /*#__PURE__*/React.createElement("div", {
+        className: "".concat(replayPrefix, "-operatorItems"),
+        style: {
+          visibility: isShow ? 'visible' : 'hidden'
+        },
+        ref: this.frame
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "".concat(replayPrefix, "-operatorItems-section1")
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "".concat(replayPrefix, "-operatorItems-section1-timeRange")
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "".concat(replayPrefix, "-operatorItems-section1-adjuster1 ").concat(replayPrefix, "-operatorItems-section1-adjuster"),
+        onClick: function onClick() {
+          return _this7._changeTimeControl(false);
+        }
+      }), /*#__PURE__*/React.createElement("span", {
+        className: "".concat(replayPrefix, "-operatorItems-section1-timeRange-text")
+      }, currentGraduationName), /*#__PURE__*/React.createElement("span", {
+        className: "".concat(replayPrefix, "-operatorItems-section1-adjuster2 ").concat(replayPrefix, "-operatorItems-section1-adjuster"),
+        onClick: function onClick() {
+          return _this7._changeTimeControl(true);
+        }
+      })), /*#__PURE__*/React.createElement("span", {
+        className: "".concat(replayPrefix, "-operatorItems-section1-timeInfo")
+      }, recordList && recordList.length !== 0 && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("span", {
+        className: "".concat(replayPrefix, "-operatorItems-currentTime"),
+        onClick: this._currentTimeClick
+      }, GlobalFunc.time2String(currentTime)), /*#__PURE__*/React.createElement("span", {
+        className: "".concat(replayPrefix, "-operatorItems-endTime")
+      }, "/", GlobalFunc.time2String(this.recordEndTime))))), /*#__PURE__*/React.createElement("div", {
+        className: "".concat(replayPrefix, "-operatorItems-section2"),
+        ref: this.progressFrame
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "".concat(replayPrefix, "-operatorItems-section2-progressFrame"),
+        onWheel: this._graduationWheel
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "".concat(replayPrefix, "-operatorItems-section2-realFrame"),
+        ref: this.realFrame,
+        style: {
+          width: frameWidth,
+          transform: 'translateX(-' + graduationLeft * 100 + '%)'
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "".concat(replayPrefix, "-operatorItems-section2-graduation"),
+        style: {
+          marginLeft: '-' + graduationRestLeft * 100 + '%',
+          cursor: isGraduationDown ? 'grabbing' : 'grab'
+        },
+        onMouseDown: this._graduationDown
+      }, graduationArr), /*#__PURE__*/React.createElement("div", {
+        className: "".concat(replayPrefix, "-operatorItems-section2-realProgress")
+        // onDoubleClick={(event) => this._changeTime(event.clientX)}
+        ,
+        onClick: function onClick(event) {
+          return _this7._changeTime(event.clientX);
+        }
+      }, !isBlank && realRecordPosiArr, videoTags.indexOf(2) !== -1 && /*#__PURE__*/React.createElement("div", {
+        className: "".concat(replayPrefix, "-operatorItems-section2-tags"),
+        onClick: function onClick(e) {
+          return e.stopPropagation();
+        }
+      }, this._renderTag())), /*#__PURE__*/React.createElement("div", {
+        className: "".concat(replayPrefix, "-operatorItems-section2-propressBall"),
+        ref: this.progressBall,
+        style: {
+          left: propressBallLeft * 100 + '%'
+        }
+      }), parseFloat(selectedProgressWidth) !== 0 && /*#__PURE__*/React.createElement(ProgressSign, {
+        width: selectedProgressWidth * 100 + '%',
+        left: selectedProgressLeft * 100 + '%'
+      })))), /*#__PURE__*/React.createElement("div", {
+        className: "".concat(replayPrefix, "-operatorItems-section3")
+      }, /*#__PURE__*/React.createElement("section", {
+        className: "".concat(replayPrefix, "-operatorItems-section3-left")
+      }, isNeedSplit && showScreen && /*#__PURE__*/React.createElement("div", {
+        className: "".concat(replayPrefix, "-operatorItems-buttFrame"),
+        onClick: this._splitScreen
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "".concat(replayPrefix, "-operatorItems-splitScreen ").concat(replayPrefix, "-operatorItems-butt"),
+        title: textLocale.splitScreen
+      })), isNeedSplit && showCloseAll && /*#__PURE__*/React.createElement("div", {
+        className: "".concat(replayPrefix, "-operatorItems-buttFrame"),
+        onClick: this._closeAll
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "".concat(replayPrefix, "-operatorItems-close ").concat(replayPrefix, "-operatorItems-butt"),
+        title: textLocale.closeAll
+      }))), /*#__PURE__*/React.createElement("section", {
+        className: "".concat(replayPrefix, "-operatorItems-section3-center")
+      }, showReplayFastPlayback && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+        className: buttClass
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "".concat(replayPrefix, "-operatorItems-quickBack ").concat(replayPrefix, "-operatorItems-butt"),
+        title: textLocale.quickBack,
+        onClick: isBlank ? null : this._quickJumpBack
+      })), /*#__PURE__*/React.createElement("div", {
+        className: "".concat(replayPrefix, "-operatorItems-quickJump")
+      }, /*#__PURE__*/React.createElement("input", {
+        type: "text",
+        value: quickJumpTime,
+        className: "".concat(replayPrefix, "-operatorItems-quickValue"),
+        onChange: this._quickJumpChange,
+        disabled: isBlank ? true : false
+      })), /*#__PURE__*/React.createElement("div", {
+        className: buttClass
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "".concat(replayPrefix, "-operatorItems-quickGo ").concat(replayPrefix, "-operatorItems-butt"),
+        title: textLocale.quickGo,
+        onClick: isBlank ? null : this._quickJumpForward
+      }))), /*#__PURE__*/React.createElement("div", {
+        className: buttClass,
+        style: {
+          width: 60
+        },
+        onClick: isBlank ? null : this._switchPlay
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "".concat(replayPrefix, "-operatorItems-butt") + (replayState ? " ".concat(replayPrefix, "-operatorItems-play") : " ".concat(replayPrefix, "-operatorItems-pause")),
+        title: textLocale.playPause
+      })), /*#__PURE__*/React.createElement("div", {
+        className: buttClass,
+        onClick: isBlank ? null : this._singleFrameGo
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "".concat(replayPrefix, "-operatorItems-singleGo ").concat(replayPrefix, "-operatorItems-butt"),
+        title: textLocale.singlePlay
+      })), /*#__PURE__*/React.createElement("div", {
+        className: buttClass,
+        onClick: isBlank ? null : this._stepFramePlay
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "".concat(replayPrefix, "-operatorItems-stepPlay ").concat(replayPrefix, "-operatorItems-butt"),
+        title: textLocale.stepPlay
+      })), /*#__PURE__*/React.createElement("div", {
+        className: "".concat(replayPrefix, "-operatorItems-rateSelect") + (isSelectingRate ? " ".concat(replayPrefix, "-operatorItems-rateSelect-active") : ''),
+        onMouseEnter: this._showRate,
+        onMouseLeave: this._showRate
+      }, rate + 'X', isSelectingRate && /*#__PURE__*/React.createElement(RateSelect, {
+        textLocale: this.props.textLocale,
+        sortedArr: sortedArr,
+        rate: rate,
+        changeRate: this._changeRate,
+        setRate: function setRate(rate) {
+          return _this7.setState({
+            rate: rate
+          });
+        }
+      }))), /*#__PURE__*/React.createElement("section", {
+        className: "".concat(replayPrefix, "-operatorItems-section3-right")
+      }, showDownLoad && /*#__PURE__*/React.createElement("div", {
+        className: buttClass
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "".concat(replayPrefix, "-operatorItems-more ").concat(replayPrefix, "-operatorItems-butt"),
+        title: textLocale.videoDownLoad,
+        onClick: isBlank ? null : this._recordDownload
+      })), isNeedSplit && showFullScreen && /*#__PURE__*/React.createElement("div", {
+        className: "right-full-screen",
+        onClick: this.props.onFullScreen,
+        title: textLocale.fullScreen
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "right-full-screen-icon"
+      })), videoType !== 'liveGrid' && videoType !== 'replyGrid' && isNeedSplit && showMaxScreen && /*#__PURE__*/React.createElement("div", {
+        className: "".concat(!isFullScreen ? 'max-screen' : 'min-screen'),
+        onClick: this.props.onMaxScreen,
+        title: "".concat(!isFullScreen ? textLocale.oneVideoFullScreen : textLocale.recoverSplitScreen)
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "max-screen-icon"
+      })))), /*#__PURE__*/React.createElement("div", {
+        className: "".concat(replayPrefix, "-operatorItems-selectedFrame"),
+        ref: this.selectedFrame,
+        style: {
+          left: selectedFrameLeft,
+          visibility: isShowSROFrame ? 'visible' : 'hidden'
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "".concat(replayPrefix, "-operatorItems-selectedFrame-timeInfo")
+      }, this._formatStr(this.progressSelectedTime[0]), "~", this._formatStr(this.progressSelectedTime[1])), /*#__PURE__*/React.createElement("div", {
+        className: "".concat(replayPrefix, "-operatorItems-selectedFrame-funcs")
+      }, /*#__PURE__*/React.createElement("span", {
+        onClick: this._selectedDownload
+      }, textLocale.download))), recordList && recordList.length > 0 && isShowPreview && /*#__PURE__*/React.createElement("div", {
+        className: "".concat(replayPrefix, "-operatorItems-preview"),
+        style: {
+          left: previewLeft
+        }
+      }, moment(this.previewTime).format('MM-DD HH:mm:ss')));
+    }
+    //#endregion
+  }]);
+}(Component); //#region 无状态组件
+/**
+ * 刻度
+ */
+//#region 初始化
+OperatorItems.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]),
+  syncRate: PropTypes.string,
+  syncQuickVal: PropTypes.number,
+  syncReplayState: PropTypes.bool
+};
+OperatorItems.defaultProps = {
+  isBlank: false,
+  cameraCode: '',
+  cameraName: '',
+  isShow: true,
+  timeRangeNum: 0,
+  isSplitReplay: false,
+  isSyncing: false,
+  videoTags: [0, 1, 2],
+  syncRate: '1',
+  syncQuickVal: 30,
+  syncReplayState: true
+};
+export { OperatorItems 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, "-operatorItems-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, "-operatorItems-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, "-operatorItems-progressSign-sliceProgress"),
+    style: {
+      width: width,
+      left: left
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sliceProgress-icon ".concat(replayPrefix, "-operatorItems-progressSign-first")
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "sliceProgress-icon ".concat(replayPrefix, "-operatorItems-progressSign-end")
+  }));
+}
+// #endregion