text: 
  
  /**
   * jssdk 2.6
   */
  (function (global, factory) {
  
      "use strict";
  
      if (typeof module === "object" && typeof module.exports === "object") {
          module.exports = global.document ?
              factory(global, true) :
              function (w) {
                  if (!w.document) {
                      throw new Error("EZUIPlayer requires a window with a document");
                  }
                  return factory(w);
              };
      } else {
          factory(global);
      }
  
      // Pass this if window is not defined yet
  })(typeof window !== "undefined" ? window : this, function (window, noGlobal) {
      // 通用请求方法
      function request(url, method, params, header, success, error) {
          var _url = url;
          var http_request = new XMLHttpRequest();
          http_request.onreadystatechange = function () {
              if (http_request.readyState == 4) {
                  if (http_request.status == 200) {
                      var _data = JSON.parse(http_request.responseText);
                      success(_data);
                  }
              }
          };
          http_request.open(method, _url, true);
          // http_request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
          var data = new FormData();
          for (i in params) {
              data.append(i, params[i]);
          }
          http_request.send(data);
      };
  
      var TimeLine = function () {
          var status = {
              isMouseDown: false, // 鼠标是否按下
              isOver: false, // 鼠标是否悬浮在进度条上
              mousePosition: null,
              oldTime: null,
              nowTime: null,
              moved: null,
              hoverTime: '2018-12-07 12:00:00',
              hoverLeft: 0,
              timeTipShow: false,
              randomNum: 123,
              timeWidthTbls: [60, 1800, 3600, 86400, 259200], // 时间宽度单位（秒）
              timeUnits: [
                  '范围: 1分钟; 单位: 秒',
                  '范围: 30分钟; 单位: 分钟',
                  '范围: 1小时; 单位: 分钟',
                  '范围: 1天; 单位: 小时',
                  '范围: 3天; 单位: 小时'
              ], // 时间单位
              drawPen: null,
              timeSection: [],
              canvasWidth: null,
              canvasHeight: null,
              timeTips: null
          };
          // Object.keys(status).forEach(element => {
          //     this[element] = status[element];
          // });
          var _this = this;
          Object.keys(status).forEach(function(element){
              _this[element] = status[element];
          });
          this.options = {
              width: this.canvasWidth || document.getElementById("canvas").width,
              height: 48,
              time: new Date().getTime(), //new Date("2019-10-31 00:00:00"),//
              timeSection: [],
              timeWidth: 0 // 0-3
          }
          TimeLine.prototype.subTime = function (time) {
              if (time < 10) {
                  return '0' + time;
              } else {
                  return time;
              }
          };
          TimeLine.prototype.tranTime = function(time) {
              var stringTime = time;
              if (time) {
                  var newDate = new Date(time);
                  stringTime =
                      newDate.getFullYear() +
                      '/' +
                      (newDate.getMonth() + 1) +
                      '/' +
                      newDate.getDate() +
                      ' ' +
                      this.subTime(newDate.getHours()) +
                      ':' +
                      this.subTime(newDate.getMinutes()) +
                      ':' +
                      this.subTime(newDate.getSeconds());
              }
              return stringTime;
          }
          TimeLine.prototype.init = function (params) {
              // document.getElementsByTagName("html")[0].addEventListener("mouseup", this.mouseUpFn(e,params.));
              if(params.width) {
                  document.getElementById(params.id).setAttribute("width", parseInt(params.width,10) + 'px');
              }
              var that = this;
              var opts = this.options;
              that.randomNum = (Math.random() + '').split('.').join('');
              that.timeWidthTblIndex = opts.timeWidth; // 当前使用时间宽度索引
  
              // 12-10
              //that.drawPanal = this.$refs.drawPanal;
              var canvas = document.querySelector('.time-line-body');
              that.drawPen = canvas.getContext('2d');
              that.nowTime = opts.time || Date.now(); // 当前时间点
              that.timeSection = opts.timeSection || []; // 时间段记录区间
              that.canvasWidth = canvas.offsetWidth;
              that.canvasHeight = canvas.offsetHeight;
              that.updata(); // 展示进度条
              // 事件监听
              document.getElementById("canvas").addEventListener('mousemove', function(e){
                  if(that.options.readOnly){
                      return;
                  }
                  that.mousemove(e);
              })
              document.getElementById("canvas").addEventListener('mouseover',function(e){
                  if(that.options.readOnly){
                      return;
                  }
                  that.mouseover(e);
              })
              document.getElementById("canvas").addEventListener('mouseleave',function(e){
                  if(that.options.readOnly){
                      return;
                  }
                  that.mouseleave(e);
              })
              document.getElementById("canvas").addEventListener('mousedown',function(e){
                  if(that.options.readOnly){
                      return;
                  }
                  that.mousedown(e);
              })
              document.getElementById("canvas").addEventListener('mouseup',function(e){
                  if(that.options.readOnly){
                      return;
                  }
                  //debugger
                  var callback = params.onChange;
                  that.mouseUpFn(e,callback);
              })
          };
          TimeLine.prototype.mousemove = function (e) {
              //  console.log("鼠标移动",e)
              if (this.isMouseDown && this.isOver) {
                  var mouseOffset = this.mousePosition - e.pageX;
                  // fix点击引起mousemove的问题
                  if (mouseOffset === 0) {
                      return;
                  }
                  var timeOffsetUnit = 0;
                  switch(this.timeWidth){
                      case 60:
                          timeOffsetUnit = 1 / 10;
                          break;
                      case 1800:
                          timeOffsetUnit = 1 / 20 * 60;
                          break;
                      case 3600:
                          timeOffsetUnit = 1 / 20 * 60;
                          break;
                      case 86400:
                          //timeOffset =
                          timeOffsetUnit = 1 / 30 * 60 * 60;
                          break;
                  }
                  var currentTime = new Date(this.oldTime).getTime() +(mouseOffset * timeOffsetUnit * 1000);
                  //console.log("rurrentTime",this.oldTime,mouseOffset,currentTime,new Date(currentTime))
                  //console.log("currentTime", new Date(currentTime))
                  // var currentTime =
                  //     this.oldTime +
                  //     (mouseOffset / this.canvasWidth) *
                  //     this.timeWidth *
                  //     1000;
                  // console.log("currentTime",new Date(this.oldTime), new Date(currentTime))
                  this.updata({ time: currentTime });
                  this.moved = true;
              } else {
                  // 12-10
                  //var { left, top } = this.$utils.getOffset(this.$refs.drawPanal);
  
                  var left = parseInt(document.getElementById("canvas-container").offsetLeft,10);
                  //12 -10
                  this.mousePosition = e.pageX - left;
                  this.updata(); // 更新画面
              }
          };
          TimeLine.prototype.mousedown = function (e) {
              this.isMouseDown = true;
              this.mousePosition = e.pageX;
              this.oldTime = this.nowTime;
              // this.$emit('drag', true);
          }
          TimeLine.prototype.mouseover = function (e) {
              this.isOver = true;
          }
          TimeLine.prototype.mouseleave = function (e) {
              this.isOver = false;
              this.isMouseDown = false;
              this.updata();
          }
          TimeLine.prototype.changeSize = function (timeWidth) {
              console.log("changeSize",timeWidth)
              // if (w) {
              //     this.options.width = w;
              //     this.canvasWidth = w;
              // }
              // if (h) {
              //     this.options.height = h;
              //     this.canvasHeight = h;
              // }
              // console.log("tehis.optiosn",this.options)
              this.options.timeWidth = timeWidth;
              this.updata({timeWidth: timeWidth});
              // this.$nextTick(() => {
              //     this.updata();
              // });
          }
          TimeLine.prototype.mouseUpFn = function (e,callback) {
              if (this.isMouseDown) {
                  this.isMouseDown = false;
                  if (this.moved) {
                      this.moved = false;
                      //12 -10
                      // this.$emit('change', [
                      //     parseInt(this.nowTime),
                      //     parseInt(this.oldTime)
                      // ]);
                      this.updata({ time: this.nowTime });
                      this.oldTime = this.nowTime;
                      callback(this.nowTime)
                  } else {
                      // 12-10
                      //this.$emit('change', [parseInt(this.mouseTime), 1]);
                      // this.updata({ time: this.mouseTime });
                      // this.oldTime = this.mouseTime;
                  }
              }
          }
          TimeLine.prototype.readOnly = function (data) {
              console.log("更改为只读")
              this.options.readOnly = true;
              document.getElementById("canvas").style.cursor = "not-allowed"
          }
          TimeLine.prototype.unReadOnly = function (data) {
              console.log("更改为只读")
              this.options.readOnly = false;
              document.getElementById("canvas").style.cursor = "pointer"
          }
          TimeLine.prototype.run = function (data) {
              if (!this.isMouseDown) {
                  this.updata(data);
              }
          }
          TimeLine.prototype.getTime = function (data) {
              console.log("this",this);
              console.log("当前时间",new Date(this.nowTime))
          }
          TimeLine.prototype.updata = function (data) {
              var that = this;
              data = data || {};
              that.nowTime = data.time || that.nowTime;
              that.timeSection = data.timeSection || that.timeSection;
              that.timeWidthTblIndex = data.timeWidth || that.timeWidthTblIndex;
              that.timeWidth = that.timeWidthTbls[data.timeWidth || that.timeWidthTblIndex];
              that.timeUnit = that.timeUnits[data.timeWidth || that.timeWidthTblIndex];
              if (data.timeWidth === 0) {
                  that.timeWidthTblIndex = 0;
                  that.timeWidth = that.timeWidthTbls[0];
                  that.timeUnit = that.timeUnits[0];
              }
              that.drawPen.fillStyle = '#000000';
              that.drawPen.fillRect(0, 0, that.canvasWidth, that.canvasHeight);
              that.drawScale(); // 画刻度
              that.drawRecord(); // 画录像区间
              that.drawOtherMsg(); // 画录像的其他信息
              // 12-10
              //that.$emit('update-time', that.nowTime);
              document.getElementById("canvas-container").style.width = this.options.width + 'px';
              document.getElementById("canvas").style.width = this.options.width + 'px';
              document.getElementById("canvas-container").style.height = this.options.height + 'px';
              document.getElementById("canvas").style.height = this.options.height + 'px';
          }
          TimeLine.prototype.drawSolidLine = function (startX, startY, endX, endY, lineWidth, color) {
              this.drawPen.save();
              this.drawPen.strokeStyle = color;
              this.drawPen.lineWidth = lineWidth;
              this.drawPen.beginPath();
              this.drawPen.moveTo(startX, startY);
              this.drawPen.lineTo(endX, endY);
              this.drawPen.stroke();
              this.drawPen.restore();
          }
          TimeLine.prototype.drawString = function (text, x, y, aling, color) {
              this.drawPen.font = '12px serif';
              this.drawPen.fillStyle = '#ffffff';
              this.drawPen.textAlign = aling || 'left';
              this.drawPen.fillText(text, x, y + 10);
          }
          TimeLine.prototype.drawScale = function () {
              // console.log("drawScale",new Date(this.nowTime))
              var that = this;
              var lineColor = 'rgba(255,255,255)';
              //that.nowTime = new Date("2019-12-31 01:50:00")
              var startDate = new Date(that.nowTime); // 开始时间
              var starSecond = startDate.getSeconds(); // 起始的秒数
              var starMin = startDate.getMinutes(); // 起始的分钟数
              var startHours = startDate.getHours(); // 起始的小时
              var startDay = startDate.getDate(); // 起始的日期
              //console.log("startDay",startDay)
              var OffsetLeft = starMin * 60 + starSecond; // 偏移量
              // debugger;
              var curScale = 0; // 计算时间点
              switch (that.timeWidth) {
                  case 60: {
                      // debugger
                      var dotNum = parseInt(that.canvasWidth / 10); // 每10像素一个点
                      startDate.setSeconds(startDate.getSeconds() - parseInt(dotNum /2,10)); // 从现在时间的一半开始画起
                      startDay = startDate.getDate();
                      startHours = startDate.getHours();
                      starMin = startDate.getMinutes();
                      starSecond = startDate.getSeconds();
                      // console.log("domNum",dotNum);
                      // console.log("starSecond",starSecond)
                      for (var i = 0; i < dotNum; i++) {
                          // debugger;
                          // debugger;
                          // console.log("starSecond",starSecond,curScale)
                          curScale = starSecond + i;
                          startDate.setSeconds(curScale);
                          // debugger;
                          //debugger;
                          // console.log("startDate",startDate,curScale)
                          // 每一个整10秒画一次线和文字
                          if (curScale % 10 === 0) {
                              that.drawSolidLine(
                                  (i * that.canvasWidth) / dotNum,
                                  8,
                                  (i * that.canvasWidth) / dotNum ,
                                  (that.canvasHeight / 5) + 8,
                                  1,
                                  lineColor
                              );
                              var timeString =
                                  this.subTime(startDate.getHours()) +
                                  ':' +
                                  this.subTime(startDate.getMinutes()) +
                                  ':' +
                                  this.subTime(startDate.getSeconds());
                              that.drawString(
                                  timeString,
                                  (i * that.canvasWidth) / dotNum,
                                  (that.canvasHeight / 5) * 2.5,
                                  'center',
                                  'rgba(255,255,255,0.3)'
                              );
                              // console.log("timeString",timeString)
                          } else {
                              // console.log("画短线",(i * that.canvasWidth) / 60,0,(i * that.canvasWidth) / 60,(that.canvasHeight / 5) * 0.5,1)
                              // 只画一次线
                              that.drawSolidLine(
                                  (i * that.canvasWidth) / dotNum,
                                  8,
                                  (i * that.canvasWidth) / dotNum,
                                  (that.canvasHeight / 5) * 0.5 + 8,
                                  1,
                                  lineColor
                              );
                          }
                          /**
                           * 偏移距离超过60，setSeconds会每次累加1到分钟，因此绘图完成后需要复原到当前分钟，再次计算偏移
                           */
                          startDate.setDate(startDay);
                          startDate.setHours(startHours);
                          startDate.setMinutes(starMin);
                      }
                      // for (var i = 0; i < 60; i++) {
                      //     curScale = starSecond + i;
                      //     if (curScale > 60) {
                      //         curScale = curScale - 60;
                      //     }
                      //     startDate.setSeconds(curScale);
                      //     // 每一个整10秒画一次线和文字
                      //     if (curScale % 10 === 0) {
                      //         that.drawSolidLine(
                      //             (i * that.canvasWidth) / 60,
                      //             0,
                      //             (i * that.canvasWidth) / 60,
                      //             (that.canvasHeight / 5) * 1.5,
                      //             1,
                      //             lineColor
                      //         );
                      //         var timeString =
                      //             this.subTime(startDate.getHours()) +
                      //             ':' +
                      //             this.subTime(startDate.getMinutes()) +
                      //             ':' +
                      //             this.subTime(startDate.getSeconds());
                      //         that.drawString(
                      //             timeString,
                      //             (i * that.canvasWidth) / 60,
                      //             (that.canvasHeight / 5) * 2.5,
                      //             'center',
                      //             'rgba(255,255,255,0.3)'
                      //         );
                      //     } else {
                      //         // 只画一次线
                      //         that.drawSolidLine(
                      //             (i * that.canvasWidth) / 60,
                      //             0,
                      //             (i * that.canvasWidth) / 60,
                      //             (that.canvasHeight / 5) * 0.5,
                      //             1,
                      //             lineColor
                      //         );
                      //     }
                      // }
                      break;
                  }
                  case 1800: {
                      // 30分钟
                      var dotNum = parseInt(that.canvasWidth / 20); // 每10像素一个点
                      startDate.setMinutes(startDate.getMinutes() - parseInt(dotNum / 2,10));
                      // starSecond = startDate.getSeconds();
                      startHours = startDate.getHours();
                      starMin = startDate.getMinutes();
                      //console.log("dotNum",dotNum,starMin)
                      for (var i = 0; i <= dotNum; i++) {
                          curScale = starMin + i;
                          //console.log("curScale",curScale)
                          // if (curScale > 60) {
                          //     curScale = curScale - 60;
                          // }
                          startDate.setMinutes(curScale);
                          if (curScale % 5 === 0) {
                              that.drawSolidLine(
                                  (i * that.canvasWidth) / dotNum,
                                  8,
                                  (i * that.canvasWidth) / dotNum,
                                  (that.canvasHeight / 5) * 1.5 + 8,
                                  1,
                                  lineColor
                              );
  
                              var timeString =
                                  this.subTime(startDate.getHours()) +
                                  ':' +
                                  this.subTime(startDate.getMinutes());
                              that.drawString(
                                  timeString,
                                  (i * that.canvasWidth) / dotNum,
                                  (that.canvasHeight / 5) * 2.5,
                                  'center',
                                  'rgba(255,255,255,0.3)'
                              );
                          } else {
                              // console.log("画短线",((i - starMin) * that.canvasWidth) / dotNum)
                              that.drawSolidLine(
                                  (i * that.canvasWidth) / dotNum,
                                  8,
                                  (i * that.canvasWidth) / dotNum,
                                  (that.canvasHeight / 5) * 0.5 + 8,
                                  1,
                                  lineColor
                              );
                          }
                          startDate.setHours(startHours);
                          // startDate.setMinutes(starMin);
                      }
                      // for (var i = 0; i <= 30; i++) {
                      //     curScale = starMin + i;
                      //     if (curScale > 60) {
                      //         curScale = curScale - 60;
                      //     }
                      //     startDate.setMinutes(curScale);
                      //     if (curScale % 5 === 0) {
                      //         that.drawSolidLine(
                      //             ((i * 60 - starSecond) * that.canvasWidth) / 1800,
                      //             0,
                      //             ((i * 60 - starSecond) * that.canvasWidth) / 1800,
                      //             (that.canvasHeight / 5) * 1.5,
                      //             1,
                      //             lineColor
                      //         );
  
                      //         var timeString =
                      //             this.subTime(startDate.getHours()) +
                      //             ':' +
                      //             this.subTime(startDate.getMinutes());
                      //         that.drawString(
                      //             timeString,
                      //             ((i * 60 - starSecond) * that.canvasWidth) / 1800,
                      //             (that.canvasHeight / 5) * 2.5,
                      //             'center',
                      //             'rgba(255,255,255,0.3)'
                      //         );
                      //     } else {
                      //         that.drawSolidLine(
                      //             ((i * 60 - starSecond) * that.canvasWidth) / 1800,
                      //             0,
                      //             ((i * 60 - starSecond) * that.canvasWidth) / 1800,
                      //             (that.canvasHeight / 5) * 0.5,
                      //             1,
                      //             lineColor
                      //         );
                      //     }
                      // }
                      break;
                  }
                  case 3600: {
                      // 60分钟
                      var dotNum = parseInt(that.canvasWidth / 20); // 每10像素一个点
                      startDate.setMinutes(startDate.getMinutes() - parseInt(dotNum / 2,10));
                      startHours = startDate.getHours();
                      starMin = startDate.getMinutes();
                      for (var i = 0; i <= dotNum; i++) {
                          curScale = starMin + i;
                          // if (curScale > 60) {
                          //     curScale = curScale - 60;
                          // }
                          startDate.setMinutes(curScale);
                          if (curScale % 10 === 0) {
                              that.drawSolidLine(
                                  ((i ) * that.canvasWidth) / dotNum,
                                  8,
                                  ((i ) * that.canvasWidth) / dotNum,
                                  (that.canvasHeight / 5) * 1.5 + 8,
                                  1,
                                  lineColor
                              );
  
                              var timeString =
                                  this.subTime(startDate.getHours()) +
                                  ':' +
                                  this.subTime(startDate.getMinutes());
                              that.drawString(
                                  timeString,
                                  ((i  ) * that.canvasWidth) / dotNum,
                                  (that.canvasHeight / 5) * 2.5,
                                  'center',
                                  'rgba(255,255,255,0.3)'
                              );
                          } else {
                              that.drawSolidLine(
                                  ((i) * that.canvasWidth) / dotNum,
                                  8,
                                  ((i) * that.canvasWidth) / dotNum,
                                  (that.canvasHeight / 5) * 0.5 + 8,
                                  1,
                                  lineColor
                              );
                          }
                          startDate.setHours(startHours);
                      }
                      break;
                  }
                  case 86400: {
                      var dotNum = parseInt(that.canvasWidth / 30); // 每10像素一个点
                      // 1天，24小时
                      //console.log("dotNum",dotNum);
                      //startDate.setDate(startDay  - parseInt(dotNum / 2,10));
                      startDate.setHours(startDate.getHours()  - parseInt(dotNum / 2,10));
                      // console.log("startDat111e",startDate);
  
                      // debugger;
                      starSecond = startDate.getSeconds();
                      starMin = startDate.getMinutes();
                      startHours = startDate.getHours();
                      startDay = startDate.getDate();
                      startYears = startDate.getFullYear();
                      for (var i = 0; i <= dotNum; i++) {
                          curScale = startHours + i;
                          // if (curScale >= 24) {
                          //     curScale = curScale - 24;
                          // }
                          startDate.setHours(curScale);
                          var timeString;
                          // 不等于24的时候，画短线
                          //console.log("curScale",curScale)
                          if (curScale % 24 !=0) {
                              //  console.log("curScale",curScale)
                              timeString = this.subTime(startDate.getHours()) + ":00";
                              // timeString = startDate.toLocaleDateString();
                              // debugger
                              that.drawSolidLine(
                                  ((i ) * that.canvasWidth) /
                                  dotNum,
                                  8,
                                  ((i ) * that.canvasWidth) /
                                  dotNum,
                                  (that.canvasHeight / 5) * 0.5 + 8,
                                  1,
                                  lineColor
                              );
                          } else {
                              // debugger;
                              // console.log("画图")
                              // 不等于24的时候，画长线
                              timeString = startDate.toLocaleDateString();
                              // console.log("startDatestartDate",startDate,i)
                              // debugger;
                              that.drawSolidLine(
                                  ((i ) * that.canvasWidth) /
                                  dotNum,
                                  8,
                                  ((i) * that.canvasWidth) /
                                  dotNum,
                                  (that.canvasHeight / 5) * 1 + 8,
                                  1,
                                  lineColor
                              );
                          }
                          // 每2个小时一个时间文字
                          if (curScale % 2 === 0) {
                              that.drawString(
                                  timeString,
                                  ((i) * that.canvasWidth) /
                                  dotNum,
                                  (that.canvasHeight / 5) * 2,
                                  'center',
                                  'rgba(255,255,255,0.3)'
                              );
                          }
                          // console.log("startDay",startDay)
                          //    startDate.setDate(startDay);
                          startDate.setFullYear(startYears);
                          startDate.setDate(startDay);
                          startDate.setHours(startHours);
                          //   startDate.setTime(that.nowTime);
                          //   console.log("haha21",startDay,that.nowTime)
                          //   console.log("haha",startDate)
                      }
                      break;
                  }
                  case 259200: {
                      // 3天
                      startDate.setHours(startDate.getHours() - 36);
                      starSecond = startDate.getSeconds();
                      starMin = startDate.getMinutes();
                      startHours = startDate.getHours();
                      OffsetLeft = starMin * 60 + starSecond;
                      for (var i = 0; i <= 72; i++) {
                          curScale = startHours + i;
                          if (curScale >= 24) {
                              curScale = curScale % 24;
                          }
                          if (curScale === 0) {
                              startDate.setHours(24);
                          } else {
                              startDate.setHours(curScale);
                          }
  
                          var timeString = this.subTime(startDate.getHours());
  
                          if (curScale % 3 === 0) {
                              // 每3天一个时间文字和刻度
                              if (!curScale) {
                                  timeString = startDate.toLocaleDateString();
                              }
                              that.drawString(
                                  timeString,
                                  ((i * 3600 - OffsetLeft) * that.canvasWidth) /
                                  259200,
                                  (that.canvasHeight / 5) * 2.5,
                                  'center',
                                  'rgba(255,255,255,0.3)'
                              );
  
                              that.drawSolidLine(
                                  ((i * 3600 - OffsetLeft) * that.canvasWidth) /
                                  259200,
                                  0,
                                  ((i * 3600 - OffsetLeft) * that.canvasWidth) /
                                  259200,
                                  (that.canvasHeight / 5) * 1,
                                  1,
                                  lineColor
                              );
                          } else {
                              that.drawSolidLine(
                                  ((i * 3600 - OffsetLeft) * that.canvasWidth) /
                                  259200,
                                  0,
                                  ((i * 3600 - OffsetLeft) * that.canvasWidth) /
                                  259200,
                                  (that.canvasHeight / 5) * 0.5,
                                  1,
                                  lineColor
                              );
                          }
                      }
                      break;
                  }
              }
          }
          TimeLine.prototype.getRecord = function (timeArr,startTime,endTime) {
              console.log("timeArr,startTime,endTime",timeArr,startTime,endTime)
              // if(timeArr.length > 0 && startTime) {
              //     if(timeArr[0].startTime < startTime) {
              //         timeArr[0].startTime = startTime;
              //     }
              // }
              // if(timeArr.length > 0 && endTime) {
              //     if(timeArr[timeArr.length-1].endTime > endTime) {
              //         timeArr[timeArr.length-1].endTime = endTime;
              //     }
              // }
              this.timeSection = timeArr;
              this.drawRecord();
          }
          TimeLine.prototype.drawRecord = function () {
              var timeArr = this.timeSection || [];
              var that = this;
              var drawPen = that.drawPen;
  
              // var startDate = new Date(that.nowTime);
              // var timeScale = that.canvasWidth / that.timeWidth;
  
              // 根据时间查找当前位置
              for(var i =0;i<timeArr.length;i++){
                  //console.log("timeArr[i]",timeArr[i],findPosition(timeArr[i].startTime),findPosition(timeArr[i].endTime))
                  var startPosition = findPosition(timeArr[i].startTime);
                  var endPosition = findPosition(timeArr[i].endTime);
                  drawPen.fillStyle = '#1890ff40';
                  drawPen.fillRect(
                      startPosition,
                      0,
                      endPosition-startPosition,
                      48
                  );
              }
  
              function findPosition(time){
                  var scale = 10;
                  switch(that.timeWidth){
                      case 60:
                          scale = 10;
                          break;
                      case 1800:
                          scale = 20 / 60;
                          break;
                      case 3600:
                          scale = 20 / 60;
                          break;
                      case 86400:
                          scale = 20 / 60 /60;
                          break;
                  }
                  var nowTimePostion = that.canvasWidth/2; //总宽度一半
                  var position =  nowTimePostion + (time - that.nowTime) / 1000 * scale;
                  if(position > that.canvasWidth){
                      position = that.canvasWidth;
                  }
                  if(position <=0){
                      position = 0;
                  }
                  return position;
              }
              // switch (that.timeWidth) {
              //     case 60: {
              //         startDate.setSeconds(startDate.getSeconds() - 30);
              //         break;
              //     }
              //     case 1800: {
              //         startDate.setMinutes(startDate.getMinutes() - 15);
              //         break;
              //     }
              //     case 3600: {
              //         startDate.setMinutes(startDate.getMinutes() - 30);
              //         break;
              //     }
              //     case 86400: {
              //         startDate.setHours(startDate.getHours() - 12);
              //         break;
              //     }
              //     case 259200: {
              //         startDate.setHours(startDate.getHours() - 36);
              //         break;
              //     }
              // }
              // that.timeSection.forEach(function (item, i) {
              //     // 蓝色片段条
              //     drawPen.fillStyle = '#4E6FAE';
              //     var x = ((item.time[0] - startDate.getTime()) * timeScale) / 1000;
              //     var w = ((item.time[1] - item.time[0]) * timeScale) / 1000;
              //     drawPen.fillRect(
              //         x,
              //         (that.canvasHeight / 5) * 3,
              //         w,
              //         (that.canvasHeight / 5) * 1.5
              //     );
              // });
          }
          TimeLine.prototype.drawOtherMsg = function () {
              // 画中心线阴影
              // this.drawPen.shadowColor = '#1890FF';
              // this.drawPen.shadowOffsetX = 0;
              // this.drawPen.shadowOffsetY = 0;
              // this.drawPen.shadowBlur = 10;
              // // 绘制中心线上方的三角形
              // this.drawPen.beginPath();
              // this.drawPen.moveTo(this.canvasWidth / 2 - 4.5, 0);
              // this.drawPen.lineTo(this.canvasWidth / 2 + 4.5, 0);
              // this.drawPen.lineTo(this.canvasWidth / 2, 4.5);
              // this.drawPen.fillStyle = '#fff';
              // this.drawPen.closePath();
              // this.drawPen.fill();
  
              // // 绘制中心线下方的三角形
              // this.drawPen.beginPath();
              // this.drawPen.moveTo(this.canvasWidth / 2 - 4.5, this.canvasHeight);
              // this.drawPen.lineTo(this.canvasWidth / 2 + 4.5, this.canvasHeight);
              // this.drawPen.lineTo(this.canvasWidth / 2, this.canvasHeight - 4.5);
              // this.drawPen.fillStyle = '#fff';
              // this.drawPen.closePath();
              // this.drawPen.fill();
  
              // 画中心线
              this.drawSolidLine(
                  this.canvasWidth / 2,
                  0,
                  this.canvasWidth / 2,
                  this.canvasHeight,
                  2,
                  '#1890FF'
              );
  
              this.drawPen.shadowBlur = 0;
  
              if (this.isOver && !this.isMouseDown) {
                  this.mouseTime =
                      (this.mousePosition / this.canvasWidth) *
                      this.timeWidth *
                      1000 +
                      this.nowTime -
                      (this.timeWidth / 2) * 1000; // 鼠标的悬浮点对应的时间
  
                  this.mouseString = this.tranTime(this.mouseTime); // 鼠标悬浮点显示的文字
                  this.hoverTime = this.mouseString;
                  this.hoverLeft = this.mousePosition - 60;
                  this.timeTipShow = true;
  
              } else {
                  this.timeTipShow = false;
              }
          }
  
      }
      window.TimeLine = TimeLine;
      return TimeLine;
  });
  