ezuikit-js 0.3.2-beta.1 → 0.3.3-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/ezuikit.js +1414 -883
  2. package/package.json +1 -1
package/ezuikit.js CHANGED
@@ -81,7 +81,7 @@ const requestMobileFullScreen = (element) => {
81
81
  var style = "";
82
82
  style += "width:" + height + "px;";// 注意旋转后的宽高切换
83
83
  style += "height:" + width + "px;";
84
- style += "-webkit-transform: rotate(90deg); transform: rotate(90deg);";
84
+ style += "-webkit-transform: rotate(90.001deg); transform: rotate(90.001deg);";
85
85
  // 注意旋转中点的处理
86
86
  style += "-webkit-transform-origin: " + width / 2 + "px " + width / 2 + "px;";
87
87
  style += "transform-origin: " + width / 2 + "px " + width / 2 + "px;";
@@ -5767,827 +5767,827 @@ var defaultTheme = {
5767
5767
  footer: footer
5768
5768
  };
5769
5769
 
5770
- var TimeLine$1 = function (jsPlugin) {
5771
- this.jsPlugin = jsPlugin;
5772
- var status = {
5773
- isMouseDown: false, // 鼠标是否按下
5774
- isOver: false, // 鼠标是否悬浮在进度条上
5775
- mousePosition: null,
5776
- oldTime: null,
5777
- nowTime: null,
5778
- moved: null,
5779
- hoverTime: '2018-12-07 12:00:00',
5780
- hoverLeft: 0,
5781
- timeTipShow: false,
5782
- randomNum: 123,
5783
- timeWidthTbls: [60, 1800, 3600, 86400, 259200], // 时间宽度单位（秒）
5784
- timeUnits: [
5785
- '范围: 1分钟; 单位: 秒',
5786
- '范围: 30分钟; 单位: 分钟',
5787
- '范围: 1小时; 单位: 分钟',
5788
- '范围: 1天; 单位: 小时',
5789
- '范围: 3天; 单位: 小时'
5790
- ], // 时间单位
5791
- drawPen: null,
5792
- timeSection: [],
5793
- canvasWidth: null,
5794
- canvasHeight: null,
5795
- timeTips: null
5796
- };
5797
- // Object.keys(status).forEach(element => {
5798
- // this[element] = status[element];
5799
- // });
5800
- var _this = this;
5801
- Object.keys(status).forEach(function(element){
5802
- _this[element] = status[element];
5803
- });
5804
- this.options = {
5805
- width: this.canvasWidth,
5806
- height: 48,
5807
- time: new Date().getTime(), //new Date("2019-10-31 00:00:00"),//
5808
- timeSection: [],
5809
- timeWidth: 0 // 0-3
5810
- };
5811
- TimeLine$1.prototype.subTime = function (time) {
5812
- if (time < 10) {
5813
- return '0' + time;
5814
- } else {
5815
- return time;
5816
- }
5817
- };
5818
- TimeLine$1.prototype.tranTime = function(time) {
5819
- var stringTime = time;
5820
- if (time) {
5821
- var newDate = new Date(time);
5822
- stringTime =
5823
- newDate.getFullYear() +
5824
- '/' +
5825
- (newDate.getMonth() + 1) +
5826
- '/' +
5827
- newDate.getDate() +
5828
- ' ' +
5829
- this.subTime(newDate.getHours()) +
5830
- ':' +
5831
- this.subTime(newDate.getMinutes()) +
5832
- ':' +
5833
- this.subTime(newDate.getSeconds());
5834
- }
5835
- return stringTime;
5836
- };
5837
- TimeLine$1.prototype.init = function (params) {
5838
- // document.getElementsByTagName("html")[0].addEventListener("mouseup", this.mouseUpFn(e,params.));
5839
- if(params.width) {
5840
- document.getElementById(params.id).setAttribute("width", parseInt(params.width,10) + 'px');
5841
- }
5842
- var that = this;
5843
- var opts = this.options;
5844
- that.randomNum = (Math.random() + '').split('.').join('');
5845
- that.timeWidthTblIndex = opts.timeWidth; // 当前使用时间宽度索引
5846
-
5847
- // 12-10
5848
- //that.drawPanal = this.$refs.drawPanal;
5849
- var canvas = document.querySelector(`#${this.jsPlugin.id}-canvas`);
5850
- that.drawPen = canvas.getContext('2d');
5851
- that.nowTime = opts.time || Date.now(); // 当前时间点
5852
- that.timeSection = opts.timeSection || []; // 时间段记录区间
5853
- that.canvasWidth = canvas.offsetWidth;
5854
- that.canvasHeight = canvas.offsetHeight;
5855
- that.updata(); // 展示进度条
5856
- // 事件监听
5857
- document.getElementById(`${this.jsPlugin.id}-canvas`).addEventListener('mousemove', function(e){
5858
- if(that.options.readOnly){
5859
- return;
5860
- }
5861
- that.mousemove(e);
5862
- });
5863
- document.getElementById(`${this.jsPlugin.id}-canvas`).addEventListener('mouseover',function(e){
5864
- if(that.options.readOnly){
5865
- return;
5866
- }
5867
- that.mouseover(e);
5868
- });
5869
- document.getElementById(`${this.jsPlugin.id}-canvas`).addEventListener('mouseleave',function(e){
5870
- if(that.options.readOnly){
5871
- return;
5872
- }
5873
- that.mouseleave(e);
5874
- });
5875
- document.getElementById(`${this.jsPlugin.id}-canvas`).addEventListener('mousedown',function(e){
5876
- if(that.options.readOnly){
5877
- return;
5878
- }
5879
- that.mousedown(e);
5880
- });
5881
- document.getElementById(`${this.jsPlugin.id}-canvas`).addEventListener('mouseup',function(e){
5882
- if(that.options.readOnly){
5883
- return;
5884
- }
5885
- //debugger
5886
- var callback = params.onChange;
5887
- that.mouseUpFn(e,callback);
5888
- });
5889
- };
5890
- TimeLine$1.prototype.mousemove = function (e) {
5891
- // console.log("鼠标移动",e)
5892
- if (this.isMouseDown && this.isOver) {
5893
- var mouseOffset = this.mousePosition - e.pageX;
5894
- // fix点击引起mousemove的问题
5895
- if (mouseOffset === 0) {
5896
- return;
5897
- }
5898
- var timeOffsetUnit = 0;
5899
- switch(this.timeWidth){
5900
- case 60:
5901
- timeOffsetUnit = 1 / 10;
5902
- break;
5903
- case 1800:
5904
- timeOffsetUnit = 1 / 20 * 60;
5905
- break;
5906
- case 3600:
5907
- timeOffsetUnit = 1 / 20 * 60;
5908
- break;
5909
- case 86400:
5910
- //timeOffset =
5911
- timeOffsetUnit = 1 / 30 * 60 * 60;
5912
- break;
5913
- }
5914
- var currentTime = new Date(this.oldTime).getTime() +(mouseOffset * timeOffsetUnit * 1000);
5915
- //console.log("rurrentTime",this.oldTime,mouseOffset,currentTime,new Date(currentTime))
5916
- //console.log("currentTime", new Date(currentTime))
5917
- // var currentTime =
5918
- // this.oldTime +
5919
- // (mouseOffset / this.canvasWidth) *
5920
- // this.timeWidth *
5921
- // 1000;
5922
- // console.log("currentTime",new Date(this.oldTime), new Date(currentTime))
5923
- this.updata({ time: currentTime });
5924
- this.moved = true;
5925
- } else {
5926
- // 12-10
5927
- //var { left, top } = this.$utils.getOffset(this.$refs.drawPanal);
5928
-
5929
- var left = parseInt(document.getElementById(`${this.jsPlugin.id}-canvas-container`).offsetLeft,10);
5930
- //12 -10
5931
- this.mousePosition = e.pageX - left;
5932
- this.updata(); // 更新画面
5933
- }
5934
- };
5935
- TimeLine$1.prototype.mousedown = function (e) {
5936
- this.isMouseDown = true;
5937
- this.mousePosition = e.pageX;
5938
- this.oldTime = this.nowTime;
5939
- // this.$emit('drag', true);
5940
- };
5941
- TimeLine$1.prototype.mouseover = function (e) {
5942
- this.isOver = true;
5943
- };
5944
- TimeLine$1.prototype.mouseleave = function (e) {
5945
- this.isOver = false;
5946
- this.isMouseDown = false;
5947
- this.updata();
5948
- };
5949
- TimeLine$1.prototype.changeSize = function (timeWidth) {
5950
- console.log("changeSize",timeWidth);
5951
- // if (w) {
5952
- // this.options.width = w;
5953
- // this.canvasWidth = w;
5954
- // }
5955
- // if (h) {
5956
- // this.options.height = h;
5957
- // this.canvasHeight = h;
5958
- // }
5959
- // console.log("tehis.optiosn",this.options)
5960
- this.options.timeWidth = timeWidth;
5961
- this.updata({timeWidth: timeWidth});
5962
- // this.$nextTick(() => {
5963
- // this.updata();
5964
- // });
5965
- };
5966
- TimeLine$1.prototype.mouseUpFn = function (e,callback) {
5967
- if (this.isMouseDown) {
5968
- this.isMouseDown = false;
5969
- if (this.moved) {
5970
- this.moved = false;
5971
- //12 -10
5972
- // this.$emit('change', [
5973
- // parseInt(this.nowTime),
5974
- // parseInt(this.oldTime)
5975
- // ]);
5976
- this.updata({ time: this.nowTime });
5977
- this.oldTime = this.nowTime;
5978
- callback(this.nowTime);
5979
- }
5980
- }
5981
- };
5982
- TimeLine$1.prototype.readOnly = function (data) {
5983
- console.log("更改为只读");
5984
- this.options.readOnly = true;
5985
- document.getElementById(`${this.jsPlugin.id}-canvas`).style.cursor = "not-allowed";
5986
- };
5987
- TimeLine$1.prototype.unReadOnly = function (data) {
5988
- console.log("更改为只读");
5989
- this.options.readOnly = false;
5990
- document.getElementById(`${this.jsPlugin.id}-canvas`).style.cursor = "pointer";
5991
- };
5992
- TimeLine$1.prototype.run = function (data) {
5993
- if (!this.isMouseDown) {
5994
- this.updata(data);
5995
- }
5996
- };
5997
- TimeLine$1.prototype.getTime = function (data) {
5998
- console.log("this",this);
5999
- console.log("当前时间",new Date(this.nowTime));
6000
- };
6001
- TimeLine$1.prototype.updata = function (data) {
6002
- var that = this;
6003
- data = data || {};
6004
- that.nowTime = data.time || that.nowTime;
6005
- that.timeSection = data.timeSection || that.timeSection;
6006
- that.timeWidthTblIndex = data.timeWidth || that.timeWidthTblIndex;
6007
- that.timeWidth = that.timeWidthTbls[data.timeWidth || that.timeWidthTblIndex];
6008
- that.timeUnit = that.timeUnits[data.timeWidth || that.timeWidthTblIndex];
6009
- if (data.timeWidth === 0) {
6010
- that.timeWidthTblIndex = 0;
6011
- that.timeWidth = that.timeWidthTbls[0];
6012
- that.timeUnit = that.timeUnits[0];
6013
- }
6014
- that.drawPen.fillStyle = '#000000';
6015
- that.drawPen.fillRect(0, 0, that.canvasWidth, that.canvasHeight);
6016
- that.drawScale(); // 画刻度
6017
- that.drawRecord(); // 画录像区间
6018
- that.drawOtherMsg(); // 画录像的其他信息
6019
- // 12-10
6020
- //that.$emit('update-time', that.nowTime);
6021
- document.getElementById(`${this.jsPlugin.id}-canvas-container`).style.width = this.options.width + 'px';
6022
- document.getElementById(`${this.jsPlugin.id}-canvas`).style.width = this.options.width + 'px';
6023
- document.getElementById(`${this.jsPlugin.id}-canvas-container`).style.height = this.options.height + 'px';
6024
- document.getElementById(`${this.jsPlugin.id}-canvas`).style.height = this.options.height + 'px';
6025
- };
6026
- TimeLine$1.prototype.drawSolidLine = function (startX, startY, endX, endY, lineWidth, color) {
6027
- this.drawPen.save();
6028
- this.drawPen.strokeStyle = color;
6029
- this.drawPen.lineWidth = lineWidth;
6030
- this.drawPen.beginPath();
6031
- this.drawPen.moveTo(startX, startY);
6032
- this.drawPen.lineTo(endX, endY);
6033
- this.drawPen.stroke();
6034
- this.drawPen.restore();
6035
- };
6036
- TimeLine$1.prototype.drawString = function (text, x, y, aling, color) {
6037
- this.drawPen.font = '12px serif';
6038
- this.drawPen.fillStyle = '#ffffff';
6039
- this.drawPen.textAlign = aling || 'left';
6040
- this.drawPen.fillText(text, x, y + 10);
6041
- };
6042
- TimeLine$1.prototype.drawScale = function () {
6043
- // console.log("drawScale",new Date(this.nowTime))
6044
- var that = this;
6045
- var lineColor = 'rgba(255,255,255)';
6046
- //that.nowTime = new Date("2019-12-31 01:50:00")
6047
- var startDate = new Date(that.nowTime); // 开始时间
6048
- var startYears = startDate.getFullYear(); // 起始的秒数
6049
- var starSecond = startDate.getSeconds(); // 起始的秒数
6050
- var starMin = startDate.getMinutes(); // 起始的分钟数
6051
- var startHours = startDate.getHours(); // 起始的小时
6052
- var startDay = startDate.getDate(); // 起始的日期
6053
- //console.log("startDay",startDay)
6054
- var OffsetLeft = starMin * 60 + starSecond; // 偏移量
6055
- // debugger;
6056
- var curScale = 0; // 计算时间点
6057
- switch (that.timeWidth) {
6058
- case 60: {
6059
- // debugger
6060
- var dotNum = parseInt(that.canvasWidth / 10); // 每10像素一个点
6061
- startDate.setSeconds(startDate.getSeconds() - parseInt(dotNum /2,10)); // 从现在时间的一半开始画起
6062
- startDay = startDate.getDate();
6063
- startHours = startDate.getHours();
6064
- starMin = startDate.getMinutes();
6065
- starSecond = startDate.getSeconds();
6066
- // console.log("domNum",dotNum);
6067
- // console.log("starSecond",starSecond)
6068
- for (var i = 0; i < dotNum; i++) {
6069
- // debugger;
6070
- // debugger;
6071
- // console.log("starSecond",starSecond,curScale)
6072
- curScale = starSecond + i;
6073
- startDate.setSeconds(curScale);
6074
- // debugger;
6075
- //debugger;
6076
- // console.log("startDate",startDate,curScale)
6077
- // 每一个整10秒画一次线和文字
6078
- if (curScale % 10 === 0) {
6079
- that.drawSolidLine(
6080
- (i * that.canvasWidth) / dotNum,
6081
- 8,
6082
- (i * that.canvasWidth) / dotNum ,
6083
- (that.canvasHeight / 5) + 8,
6084
- 1,
6085
- lineColor
6086
- );
6087
- var timeString =
6088
- this.subTime(startDate.getHours()) +
6089
- ':' +
6090
- this.subTime(startDate.getMinutes()) +
6091
- ':' +
6092
- this.subTime(startDate.getSeconds());
6093
- that.drawString(
6094
- timeString,
6095
- (i * that.canvasWidth) / dotNum,
6096
- (that.canvasHeight / 5) * 2.5,
6097
- 'center',
6098
- 'rgba(255,255,255,0.3)'
6099
- );
6100
- // console.log("timeString",timeString)
6101
- } else {
6102
- // console.log("画短线",(i * that.canvasWidth) / 60,0,(i * that.canvasWidth) / 60,(that.canvasHeight / 5) * 0.5,1)
6103
- // 只画一次线
6104
- that.drawSolidLine(
6105
- (i * that.canvasWidth) / dotNum,
6106
- 8,
6107
- (i * that.canvasWidth) / dotNum,
6108
- (that.canvasHeight / 5) * 0.5 + 8,
6109
- 1,
6110
- lineColor
6111
- );
6112
- }
6113
- /**
6114
- * 偏移距离超过60，setSeconds会每次累加1到分钟，因此绘图完成后需要复原到当前分钟，再次计算偏移
6115
- */
6116
- startDate.setDate(startDay);
6117
- startDate.setHours(startHours);
6118
- startDate.setMinutes(starMin);
6119
- }
6120
- // for (var i = 0; i < 60; i++) {
6121
- // curScale = starSecond + i;
6122
- // if (curScale > 60) {
6123
- // curScale = curScale - 60;
6124
- // }
6125
- // startDate.setSeconds(curScale);
6126
- // // 每一个整10秒画一次线和文字
6127
- // if (curScale % 10 === 0) {
6128
- // that.drawSolidLine(
6129
- // (i * that.canvasWidth) / 60,
6130
- // 0,
6131
- // (i * that.canvasWidth) / 60,
6132
- // (that.canvasHeight / 5) * 1.5,
6133
- // 1,
6134
- // lineColor
6135
- // );
6136
- // var timeString =
6137
- // this.subTime(startDate.getHours()) +
6138
- // ':' +
6139
- // this.subTime(startDate.getMinutes()) +
6140
- // ':' +
6141
- // this.subTime(startDate.getSeconds());
6142
- // that.drawString(
6143
- // timeString,
6144
- // (i * that.canvasWidth) / 60,
6145
- // (that.canvasHeight / 5) * 2.5,
6146
- // 'center',
6147
- // 'rgba(255,255,255,0.3)'
6148
- // );
6149
- // } else {
6150
- // // 只画一次线
6151
- // that.drawSolidLine(
6152
- // (i * that.canvasWidth) / 60,
6153
- // 0,
6154
- // (i * that.canvasWidth) / 60,
6155
- // (that.canvasHeight / 5) * 0.5,
6156
- // 1,
6157
- // lineColor
6158
- // );
6159
- // }
6160
- // }
6161
- break;
6162
- }
6163
- case 1800: {
6164
- // 30分钟
6165
- var dotNum = parseInt(that.canvasWidth / 20); // 每10像素一个点
6166
- startDate.setMinutes(startDate.getMinutes() - parseInt(dotNum / 2,10));
6167
- // starSecond = startDate.getSeconds();
6168
- startHours = startDate.getHours();
6169
- starMin = startDate.getMinutes();
6170
- //console.log("dotNum",dotNum,starMin)
6171
- for (var i = 0; i <= dotNum; i++) {
6172
- curScale = starMin + i;
6173
- //console.log("curScale",curScale)
6174
- // if (curScale > 60) {
6175
- // curScale = curScale - 60;
6176
- // }
6177
- startDate.setMinutes(curScale);
6178
- if (curScale % 5 === 0) {
6179
- that.drawSolidLine(
6180
- (i * that.canvasWidth) / dotNum,
6181
- 8,
6182
- (i * that.canvasWidth) / dotNum,
6183
- (that.canvasHeight / 5) * 1.5 + 8,
6184
- 1,
6185
- lineColor
6186
- );
6187
-
6188
- var timeString =
6189
- this.subTime(startDate.getHours()) +
6190
- ':' +
6191
- this.subTime(startDate.getMinutes());
6192
- that.drawString(
6193
- timeString,
6194
- (i * that.canvasWidth) / dotNum,
6195
- (that.canvasHeight / 5) * 2.5,
6196
- 'center',
6197
- 'rgba(255,255,255,0.3)'
6198
- );
6199
- } else {
6200
- // console.log("画短线",((i - starMin) * that.canvasWidth) / dotNum)
6201
- that.drawSolidLine(
6202
- (i * that.canvasWidth) / dotNum,
6203
- 8,
6204
- (i * that.canvasWidth) / dotNum,
6205
- (that.canvasHeight / 5) * 0.5 + 8,
6206
- 1,
6207
- lineColor
6208
- );
6209
- }
6210
- startDate.setHours(startHours);
6211
- // startDate.setMinutes(starMin);
6212
- }
6213
- // for (var i = 0; i <= 30; i++) {
6214
- // curScale = starMin + i;
6215
- // if (curScale > 60) {
6216
- // curScale = curScale - 60;
6217
- // }
6218
- // startDate.setMinutes(curScale);
6219
- // if (curScale % 5 === 0) {
6220
- // that.drawSolidLine(
6221
- // ((i * 60 - starSecond) * that.canvasWidth) / 1800,
6222
- // 0,
6223
- // ((i * 60 - starSecond) * that.canvasWidth) / 1800,
6224
- // (that.canvasHeight / 5) * 1.5,
6225
- // 1,
6226
- // lineColor
6227
- // );
6228
-
6229
- // var timeString =
6230
- // this.subTime(startDate.getHours()) +
6231
- // ':' +
6232
- // this.subTime(startDate.getMinutes());
6233
- // that.drawString(
6234
- // timeString,
6235
- // ((i * 60 - starSecond) * that.canvasWidth) / 1800,
6236
- // (that.canvasHeight / 5) * 2.5,
6237
- // 'center',
6238
- // 'rgba(255,255,255,0.3)'
6239
- // );
6240
- // } else {
6241
- // that.drawSolidLine(
6242
- // ((i * 60 - starSecond) * that.canvasWidth) / 1800,
6243
- // 0,
6244
- // ((i * 60 - starSecond) * that.canvasWidth) / 1800,
6245
- // (that.canvasHeight / 5) * 0.5,
6246
- // 1,
6247
- // lineColor
6248
- // );
6249
- // }
6250
- // }
6251
- break;
6252
- }
6253
- case 3600: {
6254
- // 60分钟
6255
- var dotNum = parseInt(that.canvasWidth / 20); // 每10像素一个点
6256
- startDate.setMinutes(startDate.getMinutes() - parseInt(dotNum / 2,10));
6257
- startHours = startDate.getHours();
6258
- starMin = startDate.getMinutes();
6259
- for (var i = 0; i <= dotNum; i++) {
6260
- curScale = starMin + i;
6261
- // if (curScale > 60) {
6262
- // curScale = curScale - 60;
6263
- // }
6264
- startDate.setMinutes(curScale);
6265
- if (curScale % 10 === 0) {
6266
- that.drawSolidLine(
6267
- ((i ) * that.canvasWidth) / dotNum,
6268
- 8,
6269
- ((i ) * that.canvasWidth) / dotNum,
6270
- (that.canvasHeight / 5) * 1.5 + 8,
6271
- 1,
6272
- lineColor
6273
- );
6274
-
6275
- var timeString =
6276
- this.subTime(startDate.getHours()) +
6277
- ':' +
6278
- this.subTime(startDate.getMinutes());
6279
- that.drawString(
6280
- timeString,
6281
- ((i ) * that.canvasWidth) / dotNum,
6282
- (that.canvasHeight / 5) * 2.5,
6283
- 'center',
6284
- 'rgba(255,255,255,0.3)'
6285
- );
6286
- } else {
6287
- that.drawSolidLine(
6288
- ((i) * that.canvasWidth) / dotNum,
6289
- 8,
6290
- ((i) * that.canvasWidth) / dotNum,
6291
- (that.canvasHeight / 5) * 0.5 + 8,
6292
- 1,
6293
- lineColor
6294
- );
6295
- }
6296
- startDate.setHours(startHours);
6297
- }
6298
- break;
6299
- }
6300
- case 86400: {
6301
- var dotNum = parseInt(that.canvasWidth / 30); // 每10像素一个点
6302
- // 1天，24小时
6303
- //console.log("dotNum",dotNum);
6304
- //startDate.setDate(startDay - parseInt(dotNum / 2,10));
6305
- startDate.setHours(startDate.getHours() - parseInt(dotNum / 2,10));
6306
- // console.log("startDat111e",startDate);
6307
-
6308
- // debugger;
6309
- starSecond = startDate.getSeconds();
6310
- starMin = startDate.getMinutes();
6311
- startHours = startDate.getHours();
6312
- startDay = startDate.getDate();
6313
- startYears = startDate.getFullYear();
6314
- for (var i = 0; i <= dotNum; i++) {
6315
- curScale = startHours + i;
6316
- // if (curScale >= 24) {
6317
- // curScale = curScale - 24;
6318
- // }
6319
- startDate.setHours(curScale);
6320
- var timeString;
6321
- // 不等于24的时候，画短线
6322
- //console.log("curScale",curScale)
6323
- if (curScale % 24 !=0) {
6324
- // console.log("curScale",curScale)
6325
- timeString = this.subTime(startDate.getHours()) + ":00";
6326
- // timeString = startDate.toLocaleDateString();
6327
- // debugger
6328
- that.drawSolidLine(
6329
- ((i ) * that.canvasWidth) /
6330
- dotNum,
6331
- 8,
6332
- ((i ) * that.canvasWidth) /
6333
- dotNum,
6334
- (that.canvasHeight / 5) * 0.5 + 8,
6335
- 1,
6336
- lineColor
6337
- );
6338
- } else {
6339
- // debugger;
6340
- // console.log("画图")
6341
- // 不等于24的时候，画长线
6342
- timeString = startDate.toLocaleDateString();
6343
- // console.log("startDatestartDate",startDate,i)
6344
- // debugger;
6345
- that.drawSolidLine(
6346
- ((i ) * that.canvasWidth) /
6347
- dotNum,
6348
- 8,
6349
- ((i) * that.canvasWidth) /
6350
- dotNum,
6351
- (that.canvasHeight / 5) * 1 + 8,
6352
- 1,
6353
- lineColor
6354
- );
6355
- }
6356
- // 每2个小时一个时间文字
6357
- if (curScale % 2 === 0) {
6358
- that.drawString(
6359
- timeString,
6360
- ((i) * that.canvasWidth) /
6361
- dotNum,
6362
- (that.canvasHeight / 5) * 2,
6363
- 'center',
6364
- 'rgba(255,255,255,0.3)'
6365
- );
6366
- }
6367
- // console.log("startDay",startDay)
6368
- // startDate.setDate(startDay);
6369
- startDate.setFullYear(startYears);
6370
- startDate.setDate(startDay);
6371
- startDate.setHours(startHours);
6372
- // startDate.setTime(that.nowTime);
6373
- // console.log("haha21",startDay,that.nowTime)
6374
- // console.log("haha",startDate)
6375
- }
6376
- break;
6377
- }
6378
- case 259200: {
6379
- // 3天
6380
- startDate.setHours(startDate.getHours() - 36);
6381
- starSecond = startDate.getSeconds();
6382
- starMin = startDate.getMinutes();
6383
- startHours = startDate.getHours();
6384
- OffsetLeft = starMin * 60 + starSecond;
6385
- for (var i = 0; i <= 72; i++) {
6386
- curScale = startHours + i;
6387
- if (curScale >= 24) {
6388
- curScale = curScale % 24;
6389
- }
6390
- if (curScale === 0) {
6391
- startDate.setHours(24);
6392
- } else {
6393
- startDate.setHours(curScale);
6394
- }
6395
-
6396
- var timeString = this.subTime(startDate.getHours());
6397
-
6398
- if (curScale % 3 === 0) {
6399
- // 每3天一个时间文字和刻度
6400
- if (!curScale) {
6401
- timeString = startDate.toLocaleDateString();
6402
- }
6403
- that.drawString(
6404
- timeString,
6405
- ((i * 3600 - OffsetLeft) * that.canvasWidth) /
6406
- 259200,
6407
- (that.canvasHeight / 5) * 2.5,
6408
- 'center',
6409
- 'rgba(255,255,255,0.3)'
6410
- );
6411
-
6412
- that.drawSolidLine(
6413
- ((i * 3600 - OffsetLeft) * that.canvasWidth) /
6414
- 259200,
6415
- 0,
6416
- ((i * 3600 - OffsetLeft) * that.canvasWidth) /
6417
- 259200,
6418
- (that.canvasHeight / 5) * 1,
6419
- 1,
6420
- lineColor
6421
- );
6422
- } else {
6423
- that.drawSolidLine(
6424
- ((i * 3600 - OffsetLeft) * that.canvasWidth) /
6425
- 259200,
6426
- 0,
6427
- ((i * 3600 - OffsetLeft) * that.canvasWidth) /
6428
- 259200,
6429
- (that.canvasHeight / 5) * 0.5,
6430
- 1,
6431
- lineColor
6432
- );
6433
- }
6434
- }
6435
- break;
6436
- }
6437
- }
6438
- };
6439
- TimeLine$1.prototype.getRecord = function (timeArr,startTime,endTime) {
6440
- console.log("timeArr,startTime,endTime",timeArr,startTime,endTime);
6441
- // if(timeArr.length > 0 && startTime) {
6442
- // if(timeArr[0].startTime < startTime) {
6443
- // timeArr[0].startTime = startTime;
6444
- // }
6445
- // }
6446
- // if(timeArr.length > 0 && endTime) {
6447
- // if(timeArr[timeArr.length-1].endTime > endTime) {
6448
- // timeArr[timeArr.length-1].endTime = endTime;
6449
- // }
6450
- // }
6451
- this.timeSection = timeArr;
6452
- this.drawRecord();
6453
- };
6454
- TimeLine$1.prototype.drawRecord = function () {
6455
- var timeArr = this.timeSection || [];
6456
- var that = this;
6457
- var drawPen = that.drawPen;
6458
-
6459
- // var startDate = new Date(that.nowTime);
6460
- // var timeScale = that.canvasWidth / that.timeWidth;
6461
-
6462
- // 根据时间查找当前位置
6463
- for(var i =0;i<timeArr.length;i++){
6464
- //console.log("timeArr[i]",timeArr[i],findPosition(timeArr[i].startTime),findPosition(timeArr[i].endTime))
6465
- var startPosition = findPosition(timeArr[i].startTime);
6466
- var endPosition = findPosition(timeArr[i].endTime);
6467
- drawPen.fillStyle = '#1890ff80';
6468
- drawPen.fillRect(
6469
- startPosition,
6470
- 0,
6471
- endPosition-startPosition,
6472
- 48
6473
- );
6474
- }
6475
-
6476
- function findPosition(time){
6477
- var scale = 10;
6478
- switch(that.timeWidth){
6479
- case 60:
6480
- scale = 10;
6481
- break;
6482
- case 1800:
6483
- scale = 20 / 60;
6484
- break;
6485
- case 3600:
6486
- scale = 20 / 60;
6487
- break;
6488
- case 86400:
6489
- scale = 20 / 60 /60;
6490
- break;
6491
- }
6492
- var nowTimePostion = that.canvasWidth/2; //总宽度一半
6493
- var position = nowTimePostion + (time - that.nowTime) / 1000 * scale;
6494
- if(position > that.canvasWidth){
6495
- position = that.canvasWidth;
6496
- }
6497
- if(position <=0){
6498
- position = 0;
6499
- }
6500
- return position;
6501
- }
6502
- // switch (that.timeWidth) {
6503
- // case 60: {
6504
- // startDate.setSeconds(startDate.getSeconds() - 30);
6505
- // break;
6506
- // }
6507
- // case 1800: {
6508
- // startDate.setMinutes(startDate.getMinutes() - 15);
6509
- // break;
6510
- // }
6511
- // case 3600: {
6512
- // startDate.setMinutes(startDate.getMinutes() - 30);
6513
- // break;
6514
- // }
6515
- // case 86400: {
6516
- // startDate.setHours(startDate.getHours() - 12);
6517
- // break;
6518
- // }
6519
- // case 259200: {
6520
- // startDate.setHours(startDate.getHours() - 36);
6521
- // break;
6522
- // }
6523
- // }
6524
- // that.timeSection.forEach(function (item, i) {
6525
- // // 蓝色片段条
6526
- // drawPen.fillStyle = '#4E6FAE';
6527
- // var x = ((item.time[0] - startDate.getTime()) * timeScale) / 1000;
6528
- // var w = ((item.time[1] - item.time[0]) * timeScale) / 1000;
6529
- // drawPen.fillRect(
6530
- // x,
6531
- // (that.canvasHeight / 5) * 3,
6532
- // w,
6533
- // (that.canvasHeight / 5) * 1.5
6534
- // );
6535
- // });
6536
- };
6537
- TimeLine$1.prototype.drawOtherMsg = function () {
6538
- // 画中心线阴影
6539
- // this.drawPen.shadowColor = '#1890FF';
6540
- // this.drawPen.shadowOffsetX = 0;
6541
- // this.drawPen.shadowOffsetY = 0;
6542
- // this.drawPen.shadowBlur = 10;
6543
- // // 绘制中心线上方的三角形
6544
- // this.drawPen.beginPath();
6545
- // this.drawPen.moveTo(this.canvasWidth / 2 - 4.5, 0);
6546
- // this.drawPen.lineTo(this.canvasWidth / 2 + 4.5, 0);
6547
- // this.drawPen.lineTo(this.canvasWidth / 2, 4.5);
6548
- // this.drawPen.fillStyle = '#fff';
6549
- // this.drawPen.closePath();
6550
- // this.drawPen.fill();
6551
-
6552
- // // 绘制中心线下方的三角形
6553
- // this.drawPen.beginPath();
6554
- // this.drawPen.moveTo(this.canvasWidth / 2 - 4.5, this.canvasHeight);
6555
- // this.drawPen.lineTo(this.canvasWidth / 2 + 4.5, this.canvasHeight);
6556
- // this.drawPen.lineTo(this.canvasWidth / 2, this.canvasHeight - 4.5);
6557
- // this.drawPen.fillStyle = '#fff';
6558
- // this.drawPen.closePath();
6559
- // this.drawPen.fill();
6560
-
6561
- // 画中心线
6562
- this.drawSolidLine(
6563
- this.canvasWidth / 2,
6564
- 0,
6565
- this.canvasWidth / 2,
6566
- this.canvasHeight,
6567
- 2,
6568
- '#1890FF'
6569
- );
6570
-
6571
- this.drawPen.shadowBlur = 0;
6572
-
6573
- if (this.isOver && !this.isMouseDown) {
6574
- this.mouseTime =
6575
- (this.mousePosition / this.canvasWidth) *
6576
- this.timeWidth *
6577
- 1000 +
6578
- this.nowTime -
6579
- (this.timeWidth / 2) * 1000; // 鼠标的悬浮点对应的时间
6580
-
6581
- this.mouseString = this.tranTime(this.mouseTime); // 鼠标悬浮点显示的文字
6582
- this.hoverTime = this.mouseString;
6583
- this.hoverLeft = this.mousePosition - 60;
6584
- this.timeTipShow = true;
6585
-
6586
- } else {
6587
- this.timeTipShow = false;
6588
- }
6589
- };
6590
-
5770
+ var TimeLine$1 = function (jsPlugin) {
5771
+ this.jsPlugin = jsPlugin;
5772
+ var status = {
5773
+ isMouseDown: false, // 鼠标是否按下
5774
+ isOver: false, // 鼠标是否悬浮在进度条上
5775
+ mousePosition: null,
5776
+ oldTime: null,
5777
+ nowTime: null,
5778
+ moved: null,
5779
+ hoverTime: '2018-12-07 12:00:00',
5780
+ hoverLeft: 0,
5781
+ timeTipShow: false,
5782
+ randomNum: 123,
5783
+ timeWidthTbls: [60, 1800, 3600, 86400, 259200], // 时间宽度单位（秒）
5784
+ timeUnits: [
5785
+ '范围: 1分钟; 单位: 秒',
5786
+ '范围: 30分钟; 单位: 分钟',
5787
+ '范围: 1小时; 单位: 分钟',
5788
+ '范围: 1天; 单位: 小时',
5789
+ '范围: 3天; 单位: 小时'
5790
+ ], // 时间单位
5791
+ drawPen: null,
5792
+ timeSection: [],
5793
+ canvasWidth: null,
5794
+ canvasHeight: null,
5795
+ timeTips: null
5796
+ };
5797
+ // Object.keys(status).forEach(element => {
5798
+ // this[element] = status[element];
5799
+ // });
5800
+ var _this = this;
5801
+ Object.keys(status).forEach(function(element){
5802
+ _this[element] = status[element];
5803
+ });
5804
+ this.options = {
5805
+ width: this.canvasWidth,
5806
+ height: 48,
5807
+ time: new Date().getTime(), //new Date("2019-10-31 00:00:00"),//
5808
+ timeSection: [],
5809
+ timeWidth: 0 // 0-3
5810
+ };
5811
+ TimeLine$1.prototype.subTime = function (time) {
5812
+ if (time < 10) {
5813
+ return '0' + time;
5814
+ } else {
5815
+ return time;
5816
+ }
5817
+ };
5818
+ TimeLine$1.prototype.tranTime = function(time) {
5819
+ var stringTime = time;
5820
+ if (time) {
5821
+ var newDate = new Date(time);
5822
+ stringTime =
5823
+ newDate.getFullYear() +
5824
+ '/' +
5825
+ (newDate.getMonth() + 1) +
5826
+ '/' +
5827
+ newDate.getDate() +
5828
+ ' ' +
5829
+ this.subTime(newDate.getHours()) +
5830
+ ':' +
5831
+ this.subTime(newDate.getMinutes()) +
5832
+ ':' +
5833
+ this.subTime(newDate.getSeconds());
5834
+ }
5835
+ return stringTime;
5836
+ };
5837
+ TimeLine$1.prototype.init = function (params) {
5838
+ // document.getElementsByTagName("html")[0].addEventListener("mouseup", this.mouseUpFn(e,params.));
5839
+ if(params.width) {
5840
+ document.getElementById(params.id).setAttribute("width", parseInt(params.width,10) + 'px');
5841
+ }
5842
+ var that = this;
5843
+ var opts = this.options;
5844
+ that.randomNum = (Math.random() + '').split('.').join('');
5845
+ that.timeWidthTblIndex = opts.timeWidth; // 当前使用时间宽度索引
5846
+
5847
+ // 12-10
5848
+ //that.drawPanal = this.$refs.drawPanal;
5849
+ var canvas = document.querySelector(`#${this.jsPlugin.id}-canvas`);
5850
+ that.drawPen = canvas.getContext('2d');
5851
+ that.nowTime = opts.time || Date.now(); // 当前时间点
5852
+ that.timeSection = opts.timeSection || []; // 时间段记录区间
5853
+ that.canvasWidth = canvas.offsetWidth;
5854
+ that.canvasHeight = canvas.offsetHeight;
5855
+ that.updata(); // 展示进度条
5856
+ // 事件监听
5857
+ document.getElementById(`${this.jsPlugin.id}-canvas`).addEventListener('mousemove', function(e){
5858
+ if(that.options.readOnly){
5859
+ return;
5860
+ }
5861
+ that.mousemove(e);
5862
+ });
5863
+ document.getElementById(`${this.jsPlugin.id}-canvas`).addEventListener('mouseover',function(e){
5864
+ if(that.options.readOnly){
5865
+ return;
5866
+ }
5867
+ that.mouseover(e);
5868
+ });
5869
+ document.getElementById(`${this.jsPlugin.id}-canvas`).addEventListener('mouseleave',function(e){
5870
+ if(that.options.readOnly){
5871
+ return;
5872
+ }
5873
+ that.mouseleave(e);
5874
+ });
5875
+ document.getElementById(`${this.jsPlugin.id}-canvas`).addEventListener('mousedown',function(e){
5876
+ if(that.options.readOnly){
5877
+ return;
5878
+ }
5879
+ that.mousedown(e);
5880
+ });
5881
+ document.getElementById(`${this.jsPlugin.id}-canvas`).addEventListener('mouseup',function(e){
5882
+ if(that.options.readOnly){
5883
+ return;
5884
+ }
5885
+ //debugger
5886
+ var callback = params.onChange;
5887
+ that.mouseUpFn(e,callback);
5888
+ });
5889
+ };
5890
+ TimeLine$1.prototype.mousemove = function (e) {
5891
+ // console.log("鼠标移动",e)
5892
+ if (this.isMouseDown && this.isOver) {
5893
+ var mouseOffset = this.mousePosition - e.pageX;
5894
+ // fix点击引起mousemove的问题
5895
+ if (mouseOffset === 0) {
5896
+ return;
5897
+ }
5898
+ var timeOffsetUnit = 0;
5899
+ switch(this.timeWidth){
5900
+ case 60:
5901
+ timeOffsetUnit = 1 / 10;
5902
+ break;
5903
+ case 1800:
5904
+ timeOffsetUnit = 1 / 20 * 60;
5905
+ break;
5906
+ case 3600:
5907
+ timeOffsetUnit = 1 / 20 * 60;
5908
+ break;
5909
+ case 86400:
5910
+ //timeOffset =
5911
+ timeOffsetUnit = 1 / 30 * 60 * 60;
5912
+ break;
5913
+ }
5914
+ var currentTime = new Date(this.oldTime).getTime() +(mouseOffset * timeOffsetUnit * 1000);
5915
+ //console.log("rurrentTime",this.oldTime,mouseOffset,currentTime,new Date(currentTime))
5916
+ //console.log("currentTime", new Date(currentTime))
5917
+ // var currentTime =
5918
+ // this.oldTime +
5919
+ // (mouseOffset / this.canvasWidth) *
5920
+ // this.timeWidth *
5921
+ // 1000;
5922
+ // console.log("currentTime",new Date(this.oldTime), new Date(currentTime))
5923
+ this.updata({ time: currentTime });
5924
+ this.moved = true;
5925
+ } else {
5926
+ // 12-10
5927
+ //var { left, top } = this.$utils.getOffset(this.$refs.drawPanal);
5928
+
5929
+ var left = parseInt(document.getElementById(`${this.jsPlugin.id}-canvas-container`).offsetLeft,10);
5930
+ //12 -10
5931
+ this.mousePosition = e.pageX - left;
5932
+ this.updata(); // 更新画面
5933
+ }
5934
+ };
5935
+ TimeLine$1.prototype.mousedown = function (e) {
5936
+ this.isMouseDown = true;
5937
+ this.mousePosition = e.pageX;
5938
+ this.oldTime = this.nowTime;
5939
+ // this.$emit('drag', true);
5940
+ };
5941
+ TimeLine$1.prototype.mouseover = function (e) {
5942
+ this.isOver = true;
5943
+ };
5944
+ TimeLine$1.prototype.mouseleave = function (e) {
5945
+ this.isOver = false;
5946
+ this.isMouseDown = false;
5947
+ this.updata();
5948
+ };
5949
+ TimeLine$1.prototype.changeSize = function (timeWidth) {
5950
+ console.log("changeSize",timeWidth);
5951
+ // if (w) {
5952
+ // this.options.width = w;
5953
+ // this.canvasWidth = w;
5954
+ // }
5955
+ // if (h) {
5956
+ // this.options.height = h;
5957
+ // this.canvasHeight = h;
5958
+ // }
5959
+ // console.log("tehis.optiosn",this.options)
5960
+ this.options.timeWidth = timeWidth;
5961
+ this.updata({timeWidth: timeWidth});
5962
+ // this.$nextTick(() => {
5963
+ // this.updata();
5964
+ // });
5965
+ };
5966
+ TimeLine$1.prototype.mouseUpFn = function (e,callback) {
5967
+ if (this.isMouseDown) {
5968
+ this.isMouseDown = false;
5969
+ if (this.moved) {
5970
+ this.moved = false;
5971
+ //12 -10
5972
+ // this.$emit('change', [
5973
+ // parseInt(this.nowTime),
5974
+ // parseInt(this.oldTime)
5975
+ // ]);
5976
+ this.updata({ time: this.nowTime });
5977
+ this.oldTime = this.nowTime;
5978
+ callback(this.nowTime);
5979
+ }
5980
+ }
5981
+ };
5982
+ TimeLine$1.prototype.readOnly = function (data) {
5983
+ console.log("更改为只读");
5984
+ this.options.readOnly = true;
5985
+ document.getElementById(`${this.jsPlugin.id}-canvas`).style.cursor = "not-allowed";
5986
+ };
5987
+ TimeLine$1.prototype.unReadOnly = function (data) {
5988
+ console.log("更改为只读");
5989
+ this.options.readOnly = false;
5990
+ document.getElementById(`${this.jsPlugin.id}-canvas`).style.cursor = "pointer";
5991
+ };
5992
+ TimeLine$1.prototype.run = function (data) {
5993
+ if (!this.isMouseDown) {
5994
+ this.updata(data);
5995
+ }
5996
+ };
5997
+ TimeLine$1.prototype.getTime = function (data) {
5998
+ console.log("this",this);
5999
+ console.log("当前时间",new Date(this.nowTime));
6000
+ };
6001
+ TimeLine$1.prototype.updata = function (data) {
6002
+ var that = this;
6003
+ data = data || {};
6004
+ that.nowTime = data.time || that.nowTime;
6005
+ that.timeSection = data.timeSection || that.timeSection;
6006
+ that.timeWidthTblIndex = data.timeWidth || that.timeWidthTblIndex;
6007
+ that.timeWidth = that.timeWidthTbls[data.timeWidth || that.timeWidthTblIndex];
6008
+ that.timeUnit = that.timeUnits[data.timeWidth || that.timeWidthTblIndex];
6009
+ if (data.timeWidth === 0) {
6010
+ that.timeWidthTblIndex = 0;
6011
+ that.timeWidth = that.timeWidthTbls[0];
6012
+ that.timeUnit = that.timeUnits[0];
6013
+ }
6014
+ that.drawPen.fillStyle = '#000000';
6015
+ that.drawPen.fillRect(0, 0, that.canvasWidth, that.canvasHeight);
6016
+ that.drawScale(); // 画刻度
6017
+ that.drawRecord(); // 画录像区间
6018
+ that.drawOtherMsg(); // 画录像的其他信息
6019
+ // 12-10
6020
+ //that.$emit('update-time', that.nowTime);
6021
+ document.getElementById(`${this.jsPlugin.id}-canvas-container`).style.width = this.options.width + 'px';
6022
+ document.getElementById(`${this.jsPlugin.id}-canvas`).style.width = this.options.width + 'px';
6023
+ document.getElementById(`${this.jsPlugin.id}-canvas-container`).style.height = this.options.height + 'px';
6024
+ document.getElementById(`${this.jsPlugin.id}-canvas`).style.height = this.options.height + 'px';
6025
+ };
6026
+ TimeLine$1.prototype.drawSolidLine = function (startX, startY, endX, endY, lineWidth, color) {
6027
+ this.drawPen.save();
6028
+ this.drawPen.strokeStyle = color;
6029
+ this.drawPen.lineWidth = lineWidth;
6030
+ this.drawPen.beginPath();
6031
+ this.drawPen.moveTo(startX, startY);
6032
+ this.drawPen.lineTo(endX, endY);
6033
+ this.drawPen.stroke();
6034
+ this.drawPen.restore();
6035
+ };
6036
+ TimeLine$1.prototype.drawString = function (text, x, y, aling, color) {
6037
+ this.drawPen.font = '12px serif';
6038
+ this.drawPen.fillStyle = '#ffffff';
6039
+ this.drawPen.textAlign = aling || 'left';
6040
+ this.drawPen.fillText(text, x, y + 10);
6041
+ };
6042
+ TimeLine$1.prototype.drawScale = function () {
6043
+ // console.log("drawScale",new Date(this.nowTime))
6044
+ var that = this;
6045
+ var lineColor = 'rgba(255,255,255)';
6046
+ //that.nowTime = new Date("2019-12-31 01:50:00")
6047
+ var startDate = new Date(that.nowTime); // 开始时间
6048
+ var startYears = startDate.getFullYear(); // 起始的秒数
6049
+ var starSecond = startDate.getSeconds(); // 起始的秒数
6050
+ var starMin = startDate.getMinutes(); // 起始的分钟数
6051
+ var startHours = startDate.getHours(); // 起始的小时
6052
+ var startDay = startDate.getDate(); // 起始的日期
6053
+ //console.log("startDay",startDay)
6054
+ var OffsetLeft = starMin * 60 + starSecond; // 偏移量
6055
+ // debugger;
6056
+ var curScale = 0; // 计算时间点
6057
+ switch (that.timeWidth) {
6058
+ case 60: {
6059
+ // debugger
6060
+ var dotNum = parseInt(that.canvasWidth / 10); // 每10像素一个点
6061
+ startDate.setSeconds(startDate.getSeconds() - parseInt(dotNum /2,10)); // 从现在时间的一半开始画起
6062
+ startDay = startDate.getDate();
6063
+ startHours = startDate.getHours();
6064
+ starMin = startDate.getMinutes();
6065
+ starSecond = startDate.getSeconds();
6066
+ // console.log("domNum",dotNum);
6067
+ // console.log("starSecond",starSecond)
6068
+ for (var i = 0; i < dotNum; i++) {
6069
+ // debugger;
6070
+ // debugger;
6071
+ // console.log("starSecond",starSecond,curScale)
6072
+ curScale = starSecond + i;
6073
+ startDate.setSeconds(curScale);
6074
+ // debugger;
6075
+ //debugger;
6076
+ // console.log("startDate",startDate,curScale)
6077
+ // 每一个整10秒画一次线和文字
6078
+ if (curScale % 10 === 0) {
6079
+ that.drawSolidLine(
6080
+ (i * that.canvasWidth) / dotNum,
6081
+ 8,
6082
+ (i * that.canvasWidth) / dotNum ,
6083
+ (that.canvasHeight / 5) + 8,
6084
+ 1,
6085
+ lineColor
6086
+ );
6087
+ var timeString =
6088
+ this.subTime(startDate.getHours()) +
6089
+ ':' +
6090
+ this.subTime(startDate.getMinutes()) +
6091
+ ':' +
6092
+ this.subTime(startDate.getSeconds());
6093
+ that.drawString(
6094
+ timeString,
6095
+ (i * that.canvasWidth) / dotNum,
6096
+ (that.canvasHeight / 5) * 2.5,
6097
+ 'center',
6098
+ 'rgba(255,255,255,0.3)'
6099
+ );
6100
+ // console.log("timeString",timeString)
6101
+ } else {
6102
+ // console.log("画短线",(i * that.canvasWidth) / 60,0,(i * that.canvasWidth) / 60,(that.canvasHeight / 5) * 0.5,1)
6103
+ // 只画一次线
6104
+ that.drawSolidLine(
6105
+ (i * that.canvasWidth) / dotNum,
6106
+ 8,
6107
+ (i * that.canvasWidth) / dotNum,
6108
+ (that.canvasHeight / 5) * 0.5 + 8,
6109
+ 1,
6110
+ lineColor
6111
+ );
6112
+ }
6113
+ /**
6114
+ * 偏移距离超过60，setSeconds会每次累加1到分钟，因此绘图完成后需要复原到当前分钟，再次计算偏移
6115
+ */
6116
+ startDate.setDate(startDay);
6117
+ startDate.setHours(startHours);
6118
+ startDate.setMinutes(starMin);
6119
+ }
6120
+ // for (var i = 0; i < 60; i++) {
6121
+ // curScale = starSecond + i;
6122
+ // if (curScale > 60) {
6123
+ // curScale = curScale - 60;
6124
+ // }
6125
+ // startDate.setSeconds(curScale);
6126
+ // // 每一个整10秒画一次线和文字
6127
+ // if (curScale % 10 === 0) {
6128
+ // that.drawSolidLine(
6129
+ // (i * that.canvasWidth) / 60,
6130
+ // 0,
6131
+ // (i * that.canvasWidth) / 60,
6132
+ // (that.canvasHeight / 5) * 1.5,
6133
+ // 1,
6134
+ // lineColor
6135
+ // );
6136
+ // var timeString =
6137
+ // this.subTime(startDate.getHours()) +
6138
+ // ':' +
6139
+ // this.subTime(startDate.getMinutes()) +
6140
+ // ':' +
6141
+ // this.subTime(startDate.getSeconds());
6142
+ // that.drawString(
6143
+ // timeString,
6144
+ // (i * that.canvasWidth) / 60,
6145
+ // (that.canvasHeight / 5) * 2.5,
6146
+ // 'center',
6147
+ // 'rgba(255,255,255,0.3)'
6148
+ // );
6149
+ // } else {
6150
+ // // 只画一次线
6151
+ // that.drawSolidLine(
6152
+ // (i * that.canvasWidth) / 60,
6153
+ // 0,
6154
+ // (i * that.canvasWidth) / 60,
6155
+ // (that.canvasHeight / 5) * 0.5,
6156
+ // 1,
6157
+ // lineColor
6158
+ // );
6159
+ // }
6160
+ // }
6161
+ break;
6162
+ }
6163
+ case 1800: {
6164
+ // 30分钟
6165
+ var dotNum = parseInt(that.canvasWidth / 20); // 每10像素一个点
6166
+ startDate.setMinutes(startDate.getMinutes() - parseInt(dotNum / 2,10));
6167
+ // starSecond = startDate.getSeconds();
6168
+ startHours = startDate.getHours();
6169
+ starMin = startDate.getMinutes();
6170
+ //console.log("dotNum",dotNum,starMin)
6171
+ for (var i = 0; i <= dotNum; i++) {
6172
+ curScale = starMin + i;
6173
+ //console.log("curScale",curScale)
6174
+ // if (curScale > 60) {
6175
+ // curScale = curScale - 60;
6176
+ // }
6177
+ startDate.setMinutes(curScale);
6178
+ if (curScale % 5 === 0) {
6179
+ that.drawSolidLine(
6180
+ (i * that.canvasWidth) / dotNum,
6181
+ 8,
6182
+ (i * that.canvasWidth) / dotNum,
6183
+ (that.canvasHeight / 5) * 1.5 + 8,
6184
+ 1,
6185
+ lineColor
6186
+ );
6187
+
6188
+ var timeString =
6189
+ this.subTime(startDate.getHours()) +
6190
+ ':' +
6191
+ this.subTime(startDate.getMinutes());
6192
+ that.drawString(
6193
+ timeString,
6194
+ (i * that.canvasWidth) / dotNum,
6195
+ (that.canvasHeight / 5) * 2.5,
6196
+ 'center',
6197
+ 'rgba(255,255,255,0.3)'
6198
+ );
6199
+ } else {
6200
+ // console.log("画短线",((i - starMin) * that.canvasWidth) / dotNum)
6201
+ that.drawSolidLine(
6202
+ (i * that.canvasWidth) / dotNum,
6203
+ 8,
6204
+ (i * that.canvasWidth) / dotNum,
6205
+ (that.canvasHeight / 5) * 0.5 + 8,
6206
+ 1,
6207
+ lineColor
6208
+ );
6209
+ }
6210
+ startDate.setHours(startHours);
6211
+ // startDate.setMinutes(starMin);
6212
+ }
6213
+ // for (var i = 0; i <= 30; i++) {
6214
+ // curScale = starMin + i;
6215
+ // if (curScale > 60) {
6216
+ // curScale = curScale - 60;
6217
+ // }
6218
+ // startDate.setMinutes(curScale);
6219
+ // if (curScale % 5 === 0) {
6220
+ // that.drawSolidLine(
6221
+ // ((i * 60 - starSecond) * that.canvasWidth) / 1800,
6222
+ // 0,
6223
+ // ((i * 60 - starSecond) * that.canvasWidth) / 1800,
6224
+ // (that.canvasHeight / 5) * 1.5,
6225
+ // 1,
6226
+ // lineColor
6227
+ // );
6228
+
6229
+ // var timeString =
6230
+ // this.subTime(startDate.getHours()) +
6231
+ // ':' +
6232
+ // this.subTime(startDate.getMinutes());
6233
+ // that.drawString(
6234
+ // timeString,
6235
+ // ((i * 60 - starSecond) * that.canvasWidth) / 1800,
6236
+ // (that.canvasHeight / 5) * 2.5,
6237
+ // 'center',
6238
+ // 'rgba(255,255,255,0.3)'
6239
+ // );
6240
+ // } else {
6241
+ // that.drawSolidLine(
6242
+ // ((i * 60 - starSecond) * that.canvasWidth) / 1800,
6243
+ // 0,
6244
+ // ((i * 60 - starSecond) * that.canvasWidth) / 1800,
6245
+ // (that.canvasHeight / 5) * 0.5,
6246
+ // 1,
6247
+ // lineColor
6248
+ // );
6249
+ // }
6250
+ // }
6251
+ break;
6252
+ }
6253
+ case 3600: {
6254
+ // 60分钟
6255
+ var dotNum = parseInt(that.canvasWidth / 20); // 每10像素一个点
6256
+ startDate.setMinutes(startDate.getMinutes() - parseInt(dotNum / 2,10));
6257
+ startHours = startDate.getHours();
6258
+ starMin = startDate.getMinutes();
6259
+ for (var i = 0; i <= dotNum; i++) {
6260
+ curScale = starMin + i;
6261
+ // if (curScale > 60) {
6262
+ // curScale = curScale - 60;
6263
+ // }
6264
+ startDate.setMinutes(curScale);
6265
+ if (curScale % 10 === 0) {
6266
+ that.drawSolidLine(
6267
+ ((i ) * that.canvasWidth) / dotNum,
6268
+ 8,
6269
+ ((i ) * that.canvasWidth) / dotNum,
6270
+ (that.canvasHeight / 5) * 1.5 + 8,
6271
+ 1,
6272
+ lineColor
6273
+ );
6274
+
6275
+ var timeString =
6276
+ this.subTime(startDate.getHours()) +
6277
+ ':' +
6278
+ this.subTime(startDate.getMinutes());
6279
+ that.drawString(
6280
+ timeString,
6281
+ ((i ) * that.canvasWidth) / dotNum,
6282
+ (that.canvasHeight / 5) * 2.5,
6283
+ 'center',
6284
+ 'rgba(255,255,255,0.3)'
6285
+ );
6286
+ } else {
6287
+ that.drawSolidLine(
6288
+ ((i) * that.canvasWidth) / dotNum,
6289
+ 8,
6290
+ ((i) * that.canvasWidth) / dotNum,
6291
+ (that.canvasHeight / 5) * 0.5 + 8,
6292
+ 1,
6293
+ lineColor
6294
+ );
6295
+ }
6296
+ startDate.setHours(startHours);
6297
+ }
6298
+ break;
6299
+ }
6300
+ case 86400: {
6301
+ var dotNum = parseInt(that.canvasWidth / 30); // 每10像素一个点
6302
+ // 1天，24小时
6303
+ //console.log("dotNum",dotNum);
6304
+ //startDate.setDate(startDay - parseInt(dotNum / 2,10));
6305
+ startDate.setHours(startDate.getHours() - parseInt(dotNum / 2,10));
6306
+ // console.log("startDat111e",startDate);
6307
+
6308
+ // debugger;
6309
+ starSecond = startDate.getSeconds();
6310
+ starMin = startDate.getMinutes();
6311
+ startHours = startDate.getHours();
6312
+ startDay = startDate.getDate();
6313
+ startYears = startDate.getFullYear();
6314
+ for (var i = 0; i <= dotNum; i++) {
6315
+ curScale = startHours + i;
6316
+ // if (curScale >= 24) {
6317
+ // curScale = curScale - 24;
6318
+ // }
6319
+ startDate.setHours(curScale);
6320
+ var timeString;
6321
+ // 不等于24的时候，画短线
6322
+ //console.log("curScale",curScale)
6323
+ if (curScale % 24 !=0) {
6324
+ // console.log("curScale",curScale)
6325
+ timeString = this.subTime(startDate.getHours()) + ":00";
6326
+ // timeString = startDate.toLocaleDateString();
6327
+ // debugger
6328
+ that.drawSolidLine(
6329
+ ((i ) * that.canvasWidth) /
6330
+ dotNum,
6331
+ 8,
6332
+ ((i ) * that.canvasWidth) /
6333
+ dotNum,
6334
+ (that.canvasHeight / 5) * 0.5 + 8,
6335
+ 1,
6336
+ lineColor
6337
+ );
6338
+ } else {
6339
+ // debugger;
6340
+ // console.log("画图")
6341
+ // 不等于24的时候，画长线
6342
+ timeString = startDate.toLocaleDateString();
6343
+ // console.log("startDatestartDate",startDate,i)
6344
+ // debugger;
6345
+ that.drawSolidLine(
6346
+ ((i ) * that.canvasWidth) /
6347
+ dotNum,
6348
+ 8,
6349
+ ((i) * that.canvasWidth) /
6350
+ dotNum,
6351
+ (that.canvasHeight / 5) * 1 + 8,
6352
+ 1,
6353
+ lineColor
6354
+ );
6355
+ }
6356
+ // 每2个小时一个时间文字
6357
+ if (curScale % 2 === 0) {
6358
+ that.drawString(
6359
+ timeString,
6360
+ ((i) * that.canvasWidth) /
6361
+ dotNum,
6362
+ (that.canvasHeight / 5) * 2,
6363
+ 'center',
6364
+ 'rgba(255,255,255,0.3)'
6365
+ );
6366
+ }
6367
+ // console.log("startDay",startDay)
6368
+ // startDate.setDate(startDay);
6369
+ startDate.setFullYear(startYears);
6370
+ startDate.setDate(startDay);
6371
+ startDate.setHours(startHours);
6372
+ // startDate.setTime(that.nowTime);
6373
+ // console.log("haha21",startDay,that.nowTime)
6374
+ // console.log("haha",startDate)
6375
+ }
6376
+ break;
6377
+ }
6378
+ case 259200: {
6379
+ // 3天
6380
+ startDate.setHours(startDate.getHours() - 36);
6381
+ starSecond = startDate.getSeconds();
6382
+ starMin = startDate.getMinutes();
6383
+ startHours = startDate.getHours();
6384
+ OffsetLeft = starMin * 60 + starSecond;
6385
+ for (var i = 0; i <= 72; i++) {
6386
+ curScale = startHours + i;
6387
+ if (curScale >= 24) {
6388
+ curScale = curScale % 24;
6389
+ }
6390
+ if (curScale === 0) {
6391
+ startDate.setHours(24);
6392
+ } else {
6393
+ startDate.setHours(curScale);
6394
+ }
6395
+
6396
+ var timeString = this.subTime(startDate.getHours());
6397
+
6398
+ if (curScale % 3 === 0) {
6399
+ // 每3天一个时间文字和刻度
6400
+ if (!curScale) {
6401
+ timeString = startDate.toLocaleDateString();
6402
+ }
6403
+ that.drawString(
6404
+ timeString,
6405
+ ((i * 3600 - OffsetLeft) * that.canvasWidth) /
6406
+ 259200,
6407
+ (that.canvasHeight / 5) * 2.5,
6408
+ 'center',
6409
+ 'rgba(255,255,255,0.3)'
6410
+ );
6411
+
6412
+ that.drawSolidLine(
6413
+ ((i * 3600 - OffsetLeft) * that.canvasWidth) /
6414
+ 259200,
6415
+ 0,
6416
+ ((i * 3600 - OffsetLeft) * that.canvasWidth) /
6417
+ 259200,
6418
+ (that.canvasHeight / 5) * 1,
6419
+ 1,
6420
+ lineColor
6421
+ );
6422
+ } else {
6423
+ that.drawSolidLine(
6424
+ ((i * 3600 - OffsetLeft) * that.canvasWidth) /
6425
+ 259200,
6426
+ 0,
6427
+ ((i * 3600 - OffsetLeft) * that.canvasWidth) /
6428
+ 259200,
6429
+ (that.canvasHeight / 5) * 0.5,
6430
+ 1,
6431
+ lineColor
6432
+ );
6433
+ }
6434
+ }
6435
+ break;
6436
+ }
6437
+ }
6438
+ };
6439
+ TimeLine$1.prototype.getRecord = function (timeArr,startTime,endTime) {
6440
+ console.log("timeArr,startTime,endTime",timeArr,startTime,endTime);
6441
+ // if(timeArr.length > 0 && startTime) {
6442
+ // if(timeArr[0].startTime < startTime) {
6443
+ // timeArr[0].startTime = startTime;
6444
+ // }
6445
+ // }
6446
+ // if(timeArr.length > 0 && endTime) {
6447
+ // if(timeArr[timeArr.length-1].endTime > endTime) {
6448
+ // timeArr[timeArr.length-1].endTime = endTime;
6449
+ // }
6450
+ // }
6451
+ this.timeSection = timeArr;
6452
+ this.drawRecord();
6453
+ };
6454
+ TimeLine$1.prototype.drawRecord = function () {
6455
+ var timeArr = this.timeSection || [];
6456
+ var that = this;
6457
+ var drawPen = that.drawPen;
6458
+
6459
+ // var startDate = new Date(that.nowTime);
6460
+ // var timeScale = that.canvasWidth / that.timeWidth;
6461
+
6462
+ // 根据时间查找当前位置
6463
+ for(var i =0;i<timeArr.length;i++){
6464
+ //console.log("timeArr[i]",timeArr[i],findPosition(timeArr[i].startTime),findPosition(timeArr[i].endTime))
6465
+ var startPosition = findPosition(timeArr[i].startTime);
6466
+ var endPosition = findPosition(timeArr[i].endTime);
6467
+ drawPen.fillStyle = '#1890ff80';
6468
+ drawPen.fillRect(
6469
+ startPosition,
6470
+ 0,
6471
+ endPosition-startPosition,
6472
+ 48
6473
+ );
6474
+ }
6475
+
6476
+ function findPosition(time){
6477
+ var scale = 10;
6478
+ switch(that.timeWidth){
6479
+ case 60:
6480
+ scale = 10;
6481
+ break;
6482
+ case 1800:
6483
+ scale = 20 / 60;
6484
+ break;
6485
+ case 3600:
6486
+ scale = 20 / 60;
6487
+ break;
6488
+ case 86400:
6489
+ scale = 20 / 60 /60;
6490
+ break;
6491
+ }
6492
+ var nowTimePostion = that.canvasWidth/2; //总宽度一半
6493
+ var position = nowTimePostion + (time - that.nowTime) / 1000 * scale;
6494
+ if(position > that.canvasWidth){
6495
+ position = that.canvasWidth;
6496
+ }
6497
+ if(position <=0){
6498
+ position = 0;
6499
+ }
6500
+ return position;
6501
+ }
6502
+ // switch (that.timeWidth) {
6503
+ // case 60: {
6504
+ // startDate.setSeconds(startDate.getSeconds() - 30);
6505
+ // break;
6506
+ // }
6507
+ // case 1800: {
6508
+ // startDate.setMinutes(startDate.getMinutes() - 15);
6509
+ // break;
6510
+ // }
6511
+ // case 3600: {
6512
+ // startDate.setMinutes(startDate.getMinutes() - 30);
6513
+ // break;
6514
+ // }
6515
+ // case 86400: {
6516
+ // startDate.setHours(startDate.getHours() - 12);
6517
+ // break;
6518
+ // }
6519
+ // case 259200: {
6520
+ // startDate.setHours(startDate.getHours() - 36);
6521
+ // break;
6522
+ // }
6523
+ // }
6524
+ // that.timeSection.forEach(function (item, i) {
6525
+ // // 蓝色片段条
6526
+ // drawPen.fillStyle = '#4E6FAE';
6527
+ // var x = ((item.time[0] - startDate.getTime()) * timeScale) / 1000;
6528
+ // var w = ((item.time[1] - item.time[0]) * timeScale) / 1000;
6529
+ // drawPen.fillRect(
6530
+ // x,
6531
+ // (that.canvasHeight / 5) * 3,
6532
+ // w,
6533
+ // (that.canvasHeight / 5) * 1.5
6534
+ // );
6535
+ // });
6536
+ };
6537
+ TimeLine$1.prototype.drawOtherMsg = function () {
6538
+ // 画中心线阴影
6539
+ // this.drawPen.shadowColor = '#1890FF';
6540
+ // this.drawPen.shadowOffsetX = 0;
6541
+ // this.drawPen.shadowOffsetY = 0;
6542
+ // this.drawPen.shadowBlur = 10;
6543
+ // // 绘制中心线上方的三角形
6544
+ // this.drawPen.beginPath();
6545
+ // this.drawPen.moveTo(this.canvasWidth / 2 - 4.5, 0);
6546
+ // this.drawPen.lineTo(this.canvasWidth / 2 + 4.5, 0);
6547
+ // this.drawPen.lineTo(this.canvasWidth / 2, 4.5);
6548
+ // this.drawPen.fillStyle = '#fff';
6549
+ // this.drawPen.closePath();
6550
+ // this.drawPen.fill();
6551
+
6552
+ // // 绘制中心线下方的三角形
6553
+ // this.drawPen.beginPath();
6554
+ // this.drawPen.moveTo(this.canvasWidth / 2 - 4.5, this.canvasHeight);
6555
+ // this.drawPen.lineTo(this.canvasWidth / 2 + 4.5, this.canvasHeight);
6556
+ // this.drawPen.lineTo(this.canvasWidth / 2, this.canvasHeight - 4.5);
6557
+ // this.drawPen.fillStyle = '#fff';
6558
+ // this.drawPen.closePath();
6559
+ // this.drawPen.fill();
6560
+
6561
+ // 画中心线
6562
+ this.drawSolidLine(
6563
+ this.canvasWidth / 2,
6564
+ 0,
6565
+ this.canvasWidth / 2,
6566
+ this.canvasHeight,
6567
+ 2,
6568
+ '#1890FF'
6569
+ );
6570
+
6571
+ this.drawPen.shadowBlur = 0;
6572
+
6573
+ if (this.isOver && !this.isMouseDown) {
6574
+ this.mouseTime =
6575
+ (this.mousePosition / this.canvasWidth) *
6576
+ this.timeWidth *
6577
+ 1000 +
6578
+ this.nowTime -
6579
+ (this.timeWidth / 2) * 1000; // 鼠标的悬浮点对应的时间
6580
+
6581
+ this.mouseString = this.tranTime(this.mouseTime); // 鼠标悬浮点显示的文字
6582
+ this.hoverTime = this.mouseString;
6583
+ this.hoverLeft = this.mousePosition - 60;
6584
+ this.timeTipShow = true;
6585
+
6586
+ } else {
6587
+ this.timeTipShow = false;
6588
+ }
6589
+ };
6590
+
6591
6591
  };
6592
6592
 
6593
6593
  class Rec {
@@ -6600,7 +6600,7 @@ class Rec {
6600
6600
  const canvasItemWidth = parseInt(getComputedStyle(document.getElementById(jSPlugin.id)).width, 10) - 100;
6601
6601
  const canvasContainer = document.createElement('div');
6602
6602
  canvasContainer.style = `display:inline-block;width:${canvasItemWidth}px;height:48px;`;
6603
- canvasContainer.id = this.jSPlugin.id + "-canvas-container";
6603
+ canvasContainer.id = this.jSPlugin.id + "-canvas-container";
6604
6604
  const canvasItem = document.createElement('canvas');
6605
6605
  canvasItem.id = this.jSPlugin.id + "-canvas";
6606
6606
  canvasItem.className = "time-line-body";
@@ -6612,10 +6612,10 @@ class Rec {
6612
6612
  insertAfter$1(canvasContainer, document.getElementById(`${this.jSPlugin.id}-audioControls`));
6613
6613
  const timeLineControlsContainer = document.createElement('div');
6614
6614
  timeLineControlsContainer.className = "timeline-controls";
6615
- timeLineControlsContainer.style = "display:flex;width:100px;height:48px;text-align:center;";
6615
+ timeLineControlsContainer.style = "display:flex;width:100px;height:48px;text-align:center;line-height: 48px;vertical-align: top;background: #000000;";
6616
6616
  const timeLineControls = `
6617
- <div class="timeline-controls-scale">
6618
- <span style="vertical-Align: middle" id="${this.jSPlugin.id}-timeline-scale-add">
6617
+ <div class="timeline-controls-scale" style="display: inline-flex;flex-direction: column;justify-content: center;vertical-align: top;padding: 0 20px;">
6618
+ <span style="vertical-Align: middle;line-height: 14px;height: 18px; width: 18px;" id="${this.jSPlugin.id}-timeline-scale-add">
6619
6619
  <svg fill="#2C2C2C" version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
6620
6620
  viewBox="0 0 20 20">
6621
6621
  <title>add</title>
@@ -6624,15 +6624,17 @@ class Rec {
6624
6624
  </g>
6625
6625
  <g>
6626
6626
  <path
6627
+ fill="#FFFFFF";
6627
6628
  d="M7.6,12.4c-0.3,0-0.5-0.2-0.5-0.5v-8c0-0.3,0.2-0.5,0.5-0.5s0.5,0.2,0.5,0.5v8C8.1,12.2,7.9,12.4,7.6,12.4z" />
6628
6629
  </g>
6629
6630
  <g>
6630
6631
  <path
6632
+ fill="#FFFFFF";
6631
6633
  d="M11.6,8.4h-8c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5h8c0.3,0,0.5,0.2,0.5,0.5S11.8,8.4,11.6,8.4z" />
6632
6634
  </g>
6633
6635
  </svg>
6634
6636
  </span>
6635
- <span style="vertical-align:middle" id="${this.jSPlugin.id}-timeline-scale-sub">
6637
+ <span style="vertical-Align: middle;line-height: 14px;height: 18px; width: 18px;" id="${this.jSPlugin.id}-timeline-scale-sub">
6636
6638
  <svg fill="#2C2C2C" version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
6637
6639
  viewBox="0 0 20 20">
6638
6640
  <title>reduce</title>
@@ -6641,6 +6643,7 @@ class Rec {
6641
6643
  </g>
6642
6644
  <g>
6643
6645
  <path class="st1"
6646
+ fill="#FFFFFF";
6644
6647
  d="M12.1,8.4h-8c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5h8c0.3,0,0.5,0.2,0.5,0.5S12.4,8.4,12.1,8.4z" />
6645
6648
  </g>
6646
6649
  </svg>
@@ -6656,37 +6659,37 @@ class Rec {
6656
6659
  <rect x="0.6" y="0.9" class="st0" width="20" height="20" />
6657
6660
  </g>
6658
6661
  <g id="Stroke-1">
6659
- <path class="st1"
6662
+ <path fill="#FFFFFF"; class="st1"
6660
6663
  d="M14,7.2c-0.3,0-0.5-0.2-0.5-0.5V3.4c0-0.3,0.2-0.5,0.5-0.5s0.5,0.2,0.5,0.5v3.3C14.5,7,14.2,7.2,14,7.2z" />
6661
6664
  </g>
6662
6665
  <g id="Stroke-3">
6663
- <path class="st1"
6666
+ <path fill="#FFFFFF"; class="st1"
6664
6667
  d="M7.3,7.2C7,7.2,6.8,7,6.8,6.7V3.4c0-0.3,0.2-0.5,0.5-0.5s0.5,0.2,0.5,0.5v3.3C7.8,7,7.6,7.2,7.3,7.2z" />
6665
6668
  </g>
6666
6669
  <g id="Stroke-5">
6667
- <path class="st1"
6670
+ <path fill="#FFFFFF"; class="st1"
6668
6671
  d="M18.1,9.7h-15c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5h15c0.3,0,0.5,0.2,0.5,0.5S18.4,9.7,18.1,9.7z" />
6669
6672
  </g>
6670
6673
  <g id="Stroke-7">
6671
- <path class="st1" d="M16.5,19.7H4.8c-1.2,0-2.2-1-2.2-2.2V6.7c0-1.2,1-2.2,2.2-2.2h11.7c1.2,0,2.2,1,2.2,2.2v10.8
6674
+ <path fill="#FFFFFF"; class="st1" d="M16.5,19.7H4.8c-1.2,0-2.2-1-2.2-2.2V6.7c0-1.2,1-2.2,2.2-2.2h11.7c1.2,0,2.2,1,2.2,2.2v10.8
6672
6675
  C18.6,18.8,17.7,19.7,16.5,19.7z M4.8,5.6c-0.6,0-1.2,0.5-1.2,1.2v10.8c0,0.6,0.5,1.2,1.2,1.2h11.7c0.6,0,1.2-0.5,1.2-1.2V6.7
6673
6676
  c0-0.6-0.5-1.2-1.2-1.2H4.8z" />
6674
6677
  </g>
6675
6678
  <g id="Stroke-9">
6676
- <path class="st1" d="M10.6,13.3c-0.4,0-0.7-0.3-0.7-0.7c0-0.2,0.1-0.4,0.2-0.5s0.3-0.2,0.5-0.2h0h0c0.4,0,0.7,0.3,0.7,0.7
6679
+ <path fill="#FFFFFF"; class="st1" d="M10.6,13.3c-0.4,0-0.7-0.3-0.7-0.7c0-0.2,0.1-0.4,0.2-0.5s0.3-0.2,0.5-0.2h0h0c0.4,0,0.7,0.3,0.7,0.7
6677
6680
  S11,13.3,10.6,13.3z" />
6678
6681
  </g>
6679
6682
  <g id="Stroke-11">
6680
- <path class="st1" d="M14.8,13.3c-0.4,0-0.7-0.3-0.7-0.7c0-0.2,0.1-0.4,0.2-0.5c0.1-0.1,0.3-0.2,0.5-0.2c0.4,0,0.7,0.3,0.7,0.7
6683
+ <path fill="#FFFFFF"; class="st1" d="M14.8,13.3c-0.4,0-0.7-0.3-0.7-0.7c0-0.2,0.1-0.4,0.2-0.5c0.1-0.1,0.3-0.2,0.5-0.2c0.4,0,0.7,0.3,0.7,0.7
6681
6684
  S15.2,13.3,14.8,13.3z M14.8,12.3c-0.2,0-0.3,0.1-0.3,0.3c0,0.2,0.3,0.4,0.5,0.2c0.1-0.1,0.1-0.1,0.1-0.2
6682
6685
  C15.1,12.4,15,12.3,14.8,12.3z" />
6683
6686
  </g>
6684
6687
  <g id="Stroke-13">
6685
- <path class="st1" d="M6.5,16.6c-0.4,0-0.7-0.3-0.7-0.7c0-0.2,0.1-0.4,0.2-0.5c0.1-0.1,0.3-0.2,0.5-0.2h0h0c0.4,0,0.7,0.3,0.7,0.7
6688
+ <path fill="#FFFFFF"; class="st1" d="M6.5,16.6c-0.4,0-0.7-0.3-0.7-0.7c0-0.2,0.1-0.4,0.2-0.5c0.1-0.1,0.3-0.2,0.5-0.2h0h0c0.4,0,0.7,0.3,0.7,0.7
6686
6689
  C7.2,16.3,6.9,16.6,6.5,16.6z" />
6687
6690
  </g>
6688
6691
  <g id="Stroke-15">
6689
- <path class="st1" d="M10.6,16.6c-0.4,0-0.7-0.3-0.7-0.7c0-0.2,0.1-0.4,0.2-0.5c0.1-0.1,0.3-0.2,0.5-0.2h0h0c0.4,0,0.7,0.3,0.7,0.7
6692
+ <path fill="#FFFFFF"; class="st1" d="M10.6,16.6c-0.4,0-0.7-0.3-0.7-0.7c0-0.2,0.1-0.4,0.2-0.5c0.1-0.1,0.3-0.2,0.5-0.2h0h0c0.4,0,0.7,0.3,0.7,0.7
6690
6693
  C11.4,16.3,11,16.6,10.6,16.6z" />
6691
6694
  </g>
6692
6695
  </svg>
@@ -7310,9 +7313,9 @@ Date.prototype.Format = function (fmt) { //author: meizz
7310
7313
  "q+": Math.floor((this.getMonth() + 3) / 3), //季度
7311
7314
  "S": this.getMilliseconds() //毫秒
7312
7315
  };
7313
- if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
7316
+ if (/(y+)/.test(fmt)) {fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));}
7314
7317
  for (var k in o)
7315
- if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
7318
+ {if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));}
7316
7319
  return fmt;
7317
7320
  };
7318
7321
 
@@ -7333,6 +7336,204 @@ class MobileRec {
7333
7336
  this.end = new Date().Format('yyyy-MM-dd') + ' 23:59:59';
7334
7337
  this.type = matchEzopenUrl(this.jSPlugin.url).type;
7335
7338
  this.operating = false;
7339
+ var oS = document.createElement('style');
7340
+ oS.innerHTML = `
7341
+ body{
7342
+ padding: 0;
7343
+ margin: 0;
7344
+ }
7345
+ .time-line-container {
7346
+ height: 300px;
7347
+ /* outline: 1px solid red; */
7348
+ /* background: gray; */
7349
+ position: relative;
7350
+ /* padding-top: 60px; */
7351
+ margin-top: 20px;
7352
+ }
7353
+
7354
+ .time-line-container .time-line-item-container {
7355
+ display: inline-block;
7356
+ /* height: 400px; */
7357
+ width: 30%;
7358
+ /* background: indianred; */
7359
+ overflow-y: scroll;
7360
+ overflow-x: hidden;
7361
+ /* padding-top: 60px; */
7362
+ height: 300px;
7363
+ box-sizing: border-box;
7364
+ white-space: nowrap;
7365
+ position: relative;
7366
+ }
7367
+
7368
+ .time-line-container .time-line-item-container::-webkit-scrollbar {
7369
+ width: 0px;
7370
+ /*滚动条宽度*/
7371
+ height: 0px;
7372
+ /*滚动条高度*/
7373
+ }
7374
+
7375
+ .time-line-item .time-item {
7376
+ position: relative;
7377
+ box-sizing: border-box;
7378
+ height: 60px;
7379
+ font-size: 12px;
7380
+ color: rgb(150, 150, 150);
7381
+ border-right: 6px solid;
7382
+ border-right-color: #ddd;
7383
+ }
7384
+
7385
+ .time-line-item .time-item .scale {
7386
+ width: 6px;
7387
+ height: 9px;
7388
+ border-bottom: 1px solid #ccc;
7389
+ float: right;
7390
+ clear: both;
7391
+ }
7392
+
7393
+ .time-line-item .time-item .item-unavail {
7394
+ width: 6px;
7395
+ position: absolute;
7396
+ left: 100%;
7397
+ background-color: #ddd;
7398
+ }
7399
+
7400
+ .time-line-container .current-time {
7401
+ position: absolute;
7402
+ left: 0;
7403
+ top: 40px;
7404
+ height: 29px;
7405
+ /* line-height: 58px; */
7406
+ border-bottom: 1px solid #648FFC;
7407
+ width: 60%;
7408
+ margin-left: 26%;
7409
+ }
7410
+
7411
+ .time-line-container .current-time .current-time-bg {
7412
+ position: relative;
7413
+ top: 15px;
7414
+ width: 100px;
7415
+ height: 29px;
7416
+ line-height: 29px;
7417
+ left: -70px;
7418
+ font-size: 12px;
7419
+ color: #2C2C2C;
7420
+ }
7421
+
7422
+ .time-line-container .current-time .current-time-bg::before {
7423
+ content: '';
7424
+ display: inline-block;
7425
+ width: 6px;
7426
+ height: 6px;
7427
+ border-radius: 100%;
7428
+ background: #648FFC;
7429
+ top: 11px;
7430
+ position: absolute;
7431
+ right: 30px;
7432
+ }
7433
+
7434
+ .date-switch-container {
7435
+ height: 40px;
7436
+ position: relative;
7437
+ text-align: center;
7438
+ margin: 20px 10px;
7439
+ }
7440
+
7441
+ .date-switch-container .current-date {
7442
+ line-height: 40px;
7443
+ height: 22px;
7444
+ font-size: 16px;
7445
+ color: #2C2C2C;
7446
+ text-align: center;
7447
+ font-weight: bold;
7448
+ }
7449
+
7450
+ .date-container {
7451
+ width: 40px;
7452
+ height: 40px;
7453
+ position: absolute;
7454
+ right: 0;
7455
+ top: 0;
7456
+ }
7457
+
7458
+ .rec-type-container {
7459
+ display: flex;
7460
+ justify-content: space-between;
7461
+ }
7462
+
7463
+ .rec-type-container .rec-type-text {
7464
+ padding: 0 15px;
7465
+ font-size: 12px;
7466
+ color: #2C2C2C;
7467
+ }
7468
+
7469
+ .rec-type-container .rec-type-switch {
7470
+ padding: 0 15px;
7471
+ }
7472
+
7473
+ .date-container input {
7474
+ position: absolute;
7475
+ opacity: 0;
7476
+ display: inline-block;
7477
+ width: 40px;
7478
+ height: 40px;
7479
+ z-index: 10;
7480
+ left: 0;
7481
+ }
7482
+
7483
+ .date-container label {
7484
+ position: absolute;
7485
+ left: 0;
7486
+ top: 0;
7487
+ /* display: none; */
7488
+ z-index: 0;
7489
+ }
7490
+
7491
+ .date-icon {
7492
+ display: inline-block;
7493
+ width: 40px;
7494
+ height: 40px;
7495
+ background: url('https://resource.eziot.com/group2/M00/00/6A/CtwQF2F6VieAQrU9AAABP-_Nsqo949.png') no-repeat 100% 100%;
7496
+ }
7497
+ .select-container {
7498
+ padding: 10px;
7499
+ display: flex;
7500
+ justify-content: space-between;
7501
+ }
7502
+
7503
+ .advice {
7504
+ height: 24px;
7505
+ width: 82px;
7506
+ display: flex;
7507
+ justify-content: space-between;
7508
+ line-height: 24px;
7509
+ }
7510
+
7511
+ .advice span {
7512
+ width: 40px;
7513
+ display: inline-block;
7514
+ }
7515
+
7516
+ input[type="checkbox"]:not(:checked)+.advice span:first-child {
7517
+ box-shadow: 0px 2px 5px 0px rgb(23 45 101 / 20%);
7518
+ border-radius: 8px;
7519
+ text-align: center;
7520
+
7521
+ }
7522
+
7523
+ input[type="checkbox"]:checked+.advice span:last-child {
7524
+ box-shadow: 0px 2px 5px 0px rgb(23 45 101 / 20%);
7525
+ border-radius: 8px;
7526
+ text-align: center;
7527
+ }
7528
+
7529
+ input[type="checkbox"]:not(:checked)+.advice span:first-child svg {
7530
+ fill: #648FFC !important;
7531
+ }
7532
+
7533
+ input[type="checkbox"]:checked+.advice span:last-child svg {
7534
+ fill: #648FFC !important;
7535
+ }`;
7536
+ document.getElementsByTagName("head")[0].appendChild(oS);
7336
7537
  if (getQueryString("begin", this.jSPlugin.url)) {
7337
7538
  var begin = getQueryString("begin", this.jSPlugin.url);
7338
7539
  this.date = begin.slice(0, 4) + '-' + begin.slice(4, 6) + '-' + begin.slice(6, 8);
@@ -7572,8 +7773,112 @@ class Ptz {
7572
7773
  ptzWrap.id = this.jSPlugin.id + "-ez-ptz-item";
7573
7774
  ptzWrap.className = "ez-ptz-wrap";
7574
7775
  ptzWrap.style = "display:none";
7776
+ var oS = document.createElement('style');
7777
+ oS.innerHTML = `
7778
+ .ez-ptz-container {
7779
+ position: relative;
7780
+ width: 80px;
7781
+ height: 80px;
7782
+ background: rgba(255, 255, 255, 0.80);
7783
+ box-shadow: 0px 0px 33px 4px rgb(0 0 0 / 15%);
7784
+ border: 1px solid rgba(255, 255, 255, 0.80);
7785
+ border-radius: 100%;
7786
+ cursor: pointer;
7787
+ overflow: hidden;
7788
+ user-select: none;
7789
+ }
7790
+ .ez-ptz-container .ez-ptz-icon.top {
7791
+ width: 0;
7792
+ height: 0;
7793
+ border-left: 3px solid transparent;
7794
+ border-right: 3px solid transparent;
7795
+ border-bottom: 6px solid #333333;
7796
+ position: absolute;
7797
+ display: inline-block;
7798
+ left: calc(50% - 3px);
7799
+ top: 2px;
7800
+ }
7801
+
7802
+ .ez-ptz-container .ez-ptz-icon.top.active {
7803
+ border-bottom-color: #1890FF;
7804
+ }
7805
+
7806
+ .ez-ptz-container .ez-ptz-icon.bottom {
7807
+ width: 0;
7808
+ height: 0;
7809
+ border-left: 3px solid transparent;
7810
+ border-right: 3px solid transparent;
7811
+ border-top: 6px solid #333333;
7812
+ position: absolute;
7813
+ display: inline-block;
7814
+ left: calc(50% - 3px);
7815
+ bottom: 2px;
7816
+ }
7817
+
7818
+ .ez-ptz-container .ez-ptz-icon.bottom.active {
7819
+ border-top-color: #1890FF;
7820
+ }
7821
+
7822
+ .ez-ptz-container .ez-ptz-icon.right {
7823
+ width: 0;
7824
+ height: 0;
7825
+ border-top: 3px solid transparent;
7826
+ border-bottom: 3px solid transparent;
7827
+ border-left: 6px solid #333333;
7828
+ position: absolute;
7829
+ display: inline-block;
7830
+ top: calc(50% - 3px);
7831
+ right: 2px;
7832
+ }
7833
+
7834
+ .ez-ptz-container .ez-ptz-icon.right.active {
7835
+ border-left-color: #1890FF;
7836
+ }
7837
+
7838
+ .ez-ptz-container .ez-ptz-icon.left {
7839
+ width: 0;
7840
+ height: 0;
7841
+ border-top: 3px solid transparent;
7842
+ border-bottom: 3px solid transparent;
7843
+ border-right: 6px solid #333333;
7844
+ position: absolute;
7845
+ display: inline-block;
7846
+ top: calc(50% - 3px);
7847
+ left: 2px;
7848
+ }
7849
+
7850
+ .ez-ptz-container .ez-ptz-icon.left.active {
7851
+ border-right-color: #1890FF;
7852
+ }
7853
+
7854
+ .ez-ptz-container .ez-ptz-main.center {
7855
+ width: 23px;
7856
+ height: 23px;
7857
+ background: #1890FF;
7858
+ border-radius: 100%;
7859
+ top: calc(50% - 12.3px);
7860
+ left: calc(50% - 12.3px);
7861
+ position: absolute;
7862
+ }
7863
+
7864
+ .ez-ptz-wrap {
7865
+ position: absolute;
7866
+ right: 20px;
7867
+ top: calc(50% - 50px);
7868
+ width: 100px;
7869
+ height: 100px;
7870
+ z-index: 999;
7871
+ }
7872
+
7873
+ .ez-ptz-close {
7874
+ position: absolute;
7875
+ color: #FFFFFF;
7876
+ top: 0;
7877
+ right: 0px;
7878
+ }`;
7879
+ document.getElementsByTagName("head")[0].appendChild(oS);
7575
7880
  ptzWrap.innerHTML = (`
7576
- <div class="ez-ptz-container" id="${this.jSPlugin.id}-ez-ptz-container">
7881
+ <div class="ez-ptz-container" id="${this.jSPlugin.id}-ez-ptz-container" style="position: relative;width: 80px;height: 80px;background: rgba(255, 255, 255, 0.80);box-shadow: 0px 0px 33px 4px rgba(0, 0, 0, 0.15);border: 1px solid rgba(255, 255, 255, 0.80);border-radius: 100%;cursor: pointer;overflow: hidden;user-select: none;">
7577
7882
  <div class="ez-ptz-main center"></div>
7578
7883
  <div class="ez-ptz-icon top active"></div>
7579
7884
  <div class="ez-ptz-icon left active"></div>
@@ -7593,6 +7898,17 @@ class Ptz {
7593
7898
  console.log("触摸结束");
7594
7899
  this._handlePtzTouch(e, 'stop');
7595
7900
  };
7901
+
7902
+ document.getElementById(`${this.jSPlugin.id}-ez-ptz-container`).ontouchstart = (e) => {
7903
+ e.preventDefault();
7904
+ console.log("触摸开始");
7905
+ this._handlePtzTouch(e, 'start');
7906
+ };
7907
+ document.getElementById(`${this.jSPlugin.id}-ez-ptz-container`).ontouchend = (e) => {
7908
+ e.preventDefault();
7909
+ console.log("触摸结束", e);
7910
+ this._handlePtzTouch(e, 'stop');
7911
+ };
7596
7912
  }
7597
7913
  show() {
7598
7914
  document.getElementById(`${this.jSPlugin.id}-ez-ptz-item`).style = "display: inline-block";
@@ -7636,6 +7952,23 @@ class Ptz {
7636
7952
  // nextPtzImgFailed = ptzTopImgFailed;
7637
7953
  }
7638
7954
  }
7955
+ // 兼容画面旋转90度
7956
+ if (/^rotate\(90/.test(document.getElementById(`${this.jSPlugin.id}-wrap`).style.transform)) {
7957
+ switch (direction) {
7958
+ case 0:
7959
+ direction = 2; // 上转化为左
7960
+ break;
7961
+ case 1:
7962
+ direction = 3; // 下转化为右
7963
+ break;
7964
+ case 2:
7965
+ direction = 1; // 左转化为下
7966
+ break;
7967
+ case 3:
7968
+ direction = 0; // 右转化为上
7969
+ break;
7970
+ }
7971
+ }
7639
7972
  document.getElementById(`${this.jSPlugin.id}-ez-ptz-container`).style = `background-image:linear-gradient(${direction === 0 ? 180 : (direction === 1 ? 0 : (direction === 2 ? 90 : 270))}deg, #1d8dd8 0%, rgba(100,143,252,0.00) 30%)`;
7640
7973
  if (type === 'stop') {
7641
7974
  url = this.jSPlugin.env.domain + '/api/lapp/device/ptz/stop';
@@ -7755,60 +8088,194 @@ class Talk {
7755
8088
  class MobilePtz {
7756
8089
  constructor(jSPlugin) {
7757
8090
  this.jSPlugin = jSPlugin;
8091
+ var oS = document.createElement('style');
8092
+ oS.innerHTML = `
8093
+ body{
8094
+ padding: 0;
8095
+ margin: 0;
8096
+ }
8097
+ #mobile-ez-ptz-container {
8098
+ display: inline-block;
8099
+ width: 375px;
8100
+ text-align: center;
8101
+ }
8102
+ .live-ptz-title{
8103
+ height: 25px;
8104
+ font-size: 18px;
8105
+ color: #2c2c2c;
8106
+ text-align: center;
8107
+ font-weight: 700;
8108
+ margin: 24px 0;
8109
+ }
8110
+ #mobile-ez-ptz-container .mobile-ez-ptz-container {
8111
+ position: relative;
8112
+ width: 260px;
8113
+ height: 260px;
8114
+ background: rgba(255, 255, 255, 0.80);
8115
+ box-shadow: 0px 0px 33px 4px rgba(0, 0, 0, 0.15);
8116
+ border: 1px solid rgba(255, 255, 255, 0.80);
8117
+ border-radius: 100%;
8118
+ cursor: pointer;
8119
+ overflow: hidden;
8120
+ margin: auto;
8121
+ /* background-image:linear-gradient(180deg, #d5e7f3 0%, rgba(100,143,252,0.00) 54%); */
8122
+ }
8123
+
8124
+ #mobile-ez-ptz-container .mobile-ez-ptz-container .mobile-ez-ptz-icon.top {
8125
+ width: 0;
8126
+ height: 0;
8127
+ border-left: 6px solid transparent;
8128
+ border-right: 6px solid transparent;
8129
+ border-bottom: 6px solid #333333;
8130
+ position: absolute;
8131
+ display: inline-block;
8132
+ left: calc(50% - 6px);
8133
+ top: 10px;
8134
+ }
8135
+
8136
+ #mobile-ez-ptz-container .mobile-ez-ptz-container .mobile-ez-ptz-icon.top.active {
8137
+ border-bottom-color: #1890FF;
8138
+ }
8139
+
8140
+ #mobile-ez-ptz-container .mobile-ez-ptz-container .mobile-ez-ptz-icon.bottom {
8141
+ width: 0;
8142
+ height: 0;
8143
+ border-left: 6px solid transparent;
8144
+ border-right: 6px solid transparent;
8145
+ border-top: 6px solid #333333;
8146
+ position: absolute;
8147
+ display: inline-block;
8148
+ left: calc(50% - 6px);
8149
+ bottom: 10px;
8150
+ }
8151
+
8152
+ #mobile-ez-ptz-container .mobile-ez-ptz-container .mobile-ez-ptz-icon.bottom.active {
8153
+ border-top-color: #1890FF;
8154
+
8155
+ }
8156
+
8157
+ #mobile-ez-ptz-container .mobile-ez-ptz-container .mobile-ez-ptz-icon.right {
8158
+ width: 0;
8159
+ height: 0;
8160
+ border-top: 6px solid transparent;
8161
+ border-bottom: 6px solid transparent;
8162
+ border-left: 6px solid #333333;
8163
+ position: absolute;
8164
+ display: inline-block;
8165
+ top: calc(50% - 6px);
8166
+ right: 10px;
8167
+ }
8168
+
8169
+ #mobile-ez-ptz-container .mobile-ez-ptz-container .mobile-ez-ptz-icon.right.active {
8170
+ border-left-color: #1890FF;
8171
+
8172
+ }
8173
+
8174
+ #mobile-ez-ptz-container .mobile-ez-ptz-container .mobile-ez-ptz-icon.left {
8175
+ width: 0;
8176
+ height: 0;
8177
+ border-top: 6px solid transparent;
8178
+ border-bottom: 6px solid transparent;
8179
+ border-right: 6px solid #333333;
8180
+ position: absolute;
8181
+ display: inline-block;
8182
+ top: calc(50% - 6px);
8183
+ left: 10px;
8184
+ }
8185
+
8186
+ #mobile-ez-ptz-container .mobile-ez-ptz-container .mobile-ez-ptz-icon.left.active {
8187
+ border-right-color: #1890FF;
8188
+
8189
+ }
8190
+
8191
+ #mobile-ez-ptz-container .mobile-ez-ptz-container .ez-ptz-main.center {
8192
+ width: 52px;
8193
+ height: 52px;
8194
+ background: #FFFFFF;
8195
+ border: 2px solid #eee;
8196
+ border-radius: 100%;
8197
+ top: calc(50% - 26px);
8198
+ left: calc(50% - 26px);
8199
+ position: absolute;
8200
+ /* box-shadow: 0px -39px 40px 6px #1890ff; */
8201
+ }
8202
+
8203
+ #mobile-ez-ptz-container .mobile-ez-ptz-wrap {
8204
+ display: inline-block;
8205
+ padding: 12px 24px;
8206
+ border-radius: 100%;
8207
+ overflow: hidden;
8208
+ }
8209
+
8210
+ #mobile-ez-ptz-container .ez-ptz-close {
8211
+ position: absolute;
8212
+ color: #FFFFFF;
8213
+ top: 0;
8214
+ right: 0px;
8215
+ }`;
8216
+ document.getElementsByTagName("head")[0].appendChild(oS);
8217
+ const mobileContainer = document.createElement('div');
8218
+ mobileContainer.className = "mobile-ez-ptz-container";
8219
+ mobileContainer.id = "mobile-ez-ptz-container";
8220
+ mobileContainer.style = `display:inline-block;width: ${this.jSPlugin.width}px;text-align:center;`;
8221
+ var mobileContainerTitle = document.createElement('div');
8222
+ mobileContainerTitle.className = "live-ptz-title";
8223
+ mobileContainerTitle.innerHTML = "云台控制";
7758
8224
  const ptzWrap = document.createElement('div');
7759
- ptzWrap.id = "ez-ptz-item";
7760
- ptzWrap.className = "ez-ptz-wrap";
7761
- ptzWrap.style = "";
8225
+ ptzWrap.id = "mobile-ez-ptz-item";
8226
+ ptzWrap.className = "mobile-ez-ptz-wrap";
7762
8227
  ptzWrap.innerHTML = (`
7763
- <div class="ez-ptz-container" id="ez-ptz-container">
8228
+ <div class="mobile-ez-ptz-container" id="mobile-ez-ptz-container">
7764
8229
  <div class="ez-ptz-main center"></div>
7765
- <div class="ez-ptz-icon top active"></div>
7766
- <div class="ez-ptz-icon left active"></div>
7767
- <div class="ez-ptz-icon bottom active"></div>
7768
- <div class="ez-ptz-icon right active"></div>
8230
+ <div class="mobile-ez-ptz-icon top active"></div>
8231
+ <div class="mobile-ez-ptz-icon left active"></div>
8232
+ <div class="mobile-ez-ptz-icon bottom active"></div>
8233
+ <div class="mobile-ez-ptz-icon right active"></div>
7769
8234
  </div>
7770
8235
  `);
7771
- document.getElementById(jSPlugin.id).appendChild(ptzWrap);
7772
- insertAfter$1(ptzWrap, document.getElementById(`${this.jSPlugin.id}-wrap`));
8236
+ mobileContainer.appendChild(ptzWrap);
8237
+ //document.getElementById(jSPlugin.id).appendChild(mobileContainer);
8238
+ insertAfter$1(mobileContainer, document.getElementById(`${this.jSPlugin.id}-wrap`));
8239
+ mobileContainer.parentElement.insertBefore(mobileContainerTitle, mobileContainer);
7773
8240
  // 云台控制事件绑定
7774
8241
  // 云台控制
7775
- document.getElementById("ez-ptz-container").ontouchstart = (e) => {
8242
+ document.getElementById("mobile-ez-ptz-container").ontouchstart = (e) => {
7776
8243
  e.preventDefault();
7777
8244
  console.log("触摸开始");
7778
8245
  this._handlePtzTouch(e, 'start');
7779
8246
  };
7780
- document.getElementById("ez-ptz-container").ontouchend = (e) => {
8247
+ document.getElementById("mobile-ez-ptz-container").ontouchend = (e) => {
7781
8248
  e.preventDefault();
7782
8249
  console.log("触摸结束", e);
7783
8250
  this._handlePtzTouch(e, 'stop');
7784
8251
  };
7785
8252
  // 云台控制
7786
- document.getElementById("ez-ptz-container").onmousedown = (e) => {
8253
+ document.getElementById("mobile-ez-ptz-container").onmousedown = (e) => {
7787
8254
  e.preventDefault();
7788
8255
  console.log("触摸开始");
7789
8256
  this._handlePtzTouch(e, 'start');
7790
8257
  };
7791
- document.getElementById("ez-ptz-container").onmouseup = (e) => {
8258
+ document.getElementById("mobile-ez-ptz-container").onmouseup = (e) => {
7792
8259
  e.preventDefault();
7793
8260
  console.log("触摸结束", e);
7794
8261
  this._handlePtzTouch(e, 'stop');
7795
8262
  };
7796
8263
  }
7797
8264
  show() {
7798
- document.getElementById("ez-ptz-item").style = "display: inline-block";
8265
+ document.getElementById("mobile-ez-ptz-item").style = "display: inline-block";
7799
8266
  }
7800
8267
  hide() {
7801
- document.getElementById("ez-ptz-item").style = "display: none";
8268
+ document.getElementById("mobile-ez-ptz-item").style = "display: none";
7802
8269
  }
7803
8270
  _handlePtzTouch(e, type) {
7804
- var container = document.getElementById('ez-ptz-container').getBoundingClientRect();
7805
- var containerCenterX = container.left + 41;
7806
- var containerCenterY = container.top + 41;
8271
+ var container = document.getElementById('mobile-ez-ptz-container').getBoundingClientRect();
8272
+ var containerCenterX = container.left + 130;
8273
+ var containerCenterY = container.top + 130;
7807
8274
  var eventX = e.x || e.changedTouches[0].clientX;
7808
8275
  var eventY = e.y || e.changedTouches[0].clientY;
7809
8276
  var left = eventX - containerCenterX;
7810
8277
  var top = eventY - containerCenterY;
7811
- var direction = 0; //操作命令：0-上，1-下，2-左，3-右，4-左上，5-左下，6-右上，7-右下，8-放大，9-缩小，10-近焦距，11-远焦距
8278
+ var direction = 0; //操作命令：0-上，1-下，2-左，3右，4-左上，5-左下，6-右上，7-右下，8-放大，9-缩小，10-近焦距，11-远焦距
7812
8279
 
7813
8280
 
7814
8281
  var url = this.jSPlugin.env.domain + "/api/lapp/device/ptz/start";
@@ -7836,10 +8303,10 @@ class MobilePtz {
7836
8303
  // nextPtzImgFailed = ptzTopImgFailed;
7837
8304
  }
7838
8305
  }
7839
- document.getElementById("ez-ptz-container").style = `background-image:linear-gradient(${direction === 0 ? 180 : (direction === 1 ? 0 : (direction === 2 ? 90 : 270))}deg, #1d8dd8 0%, rgba(100,143,252,0.00) 30%)`;
8306
+ document.getElementById("mobile-ez-ptz-item").style = `background-image:linear-gradient(${direction === 0 ? 180 : (direction === 1 ? 0 : (direction === 2 ? 90 : 270))}deg, #1d8dd8 0%, rgba(100,143,252,0.00) 30%)`;
7840
8307
  if (type === 'stop') {
7841
8308
  url = this.jSPlugin.env.domain + '/api/lapp/device/ptz/stop';
7842
- document.getElementById("ez-ptz-container").style = "";
8309
+ document.getElementById("mobile-ez-ptz-item").style = "";
7843
8310
  }
7844
8311
 
7845
8312
  var data = new FormData();
@@ -7858,7 +8325,7 @@ class MobilePtz {
7858
8325
  //document.getElementById('ptz-img-container').childNodes[0].src = nextPtzImgFailed;
7859
8326
  // layer.msg(data.msg);
7860
8327
  if (rt.code == 60005 || rt.code == 60002 || rt.code == 60003 || rt.code == 60004) {
7861
- document.getElementById("ez-ptz-container").style = `background-image:linear-gradient(${direction === 0 ? 180 : (direction === 1 ? 0 : (direction === 2 ? 90 : 270))}deg, #f45656 0%, rgba(100,143,252,0.00) 30%)`;
8328
+ document.getElementById("mobile-ez-ptz-item").style = `background-image:linear-gradient(${direction === 0 ? 180 : (direction === 1 ? 0 : (direction === 2 ? 90 : 270))}deg, #f45656 0%, rgba(100,143,252,0.00) 30%)`;
7862
8329
  }
7863
8330
  }
7864
8331
  });
@@ -8237,7 +8704,7 @@ var data$1 = {
8237
8704
  },
8238
8705
  footer: {
8239
8706
  color: "#FFFFFF",
8240
- backgroundColor: "#000000",
8707
+ backgroundColor: "rgb(0 0 0 / 0%)",
8241
8708
  activeColor: "#FFFFFF",
8242
8709
  btnList: [
8243
8710
  {
@@ -8463,13 +8930,15 @@ class Theme {
8463
8930
  this.Rec = new MobileRec(jSPlugin);
8464
8931
  } else {
8465
8932
  this.Rec = new Rec(jSPlugin);
8466
- } }
8933
+ }
8934
+ }
8467
8935
  if (!this.jSPlugin.Talk) {
8468
8936
  this.jSPlugin.Talk = new Talk(this.jSPlugin);
8469
8937
  }
8470
- if (this.decoderState.type === 'live') {
8938
+ if (this.decoderState.state.type === 'live') {
8471
8939
  if (this.isMobile) {
8472
8940
  this.MobilePtz = new MobilePtz(jSPlugin);
8941
+ this.Ptz = new Ptz(jSPlugin);
8473
8942
  } else {
8474
8943
  this.Ptz = new Ptz(jSPlugin);
8475
8944
  }
@@ -8478,7 +8947,7 @@ class Theme {
8478
8947
  this.getDeviceInfo();
8479
8948
  }
8480
8949
  fetchThemeData(themeId) {
8481
- const url = `https://test11open.ys7.com/jssdk/ezopen/template/getDetail?accessToken=${this.jSPlugin.accessToken}&id=${themeId}`;
8950
+ const url = `https://test12open.ys7.com/jssdk/ezopen/template/getDetail?accessToken=${this.jSPlugin.accessToken}&id=${themeId}`;
8482
8951
  fetch(url, {
8483
8952
  method: 'GET'
8484
8953
  })
@@ -9054,9 +9523,9 @@ class Theme {
9054
9523
  btnItem.title = "画面清晰度";
9055
9524
  btnItem.id = btnId;
9056
9525
  btnItem.domString = (
9057
- `<ul id="${this.jSPlugin.id}-hdSelect" class="select" style="display:none;">`
9058
- + `<li class="selectOption" name="option" id="${this.jSPlugin.id}-select-hd">高清</li>`
9059
- + `<li class="selectOption" name="option" id="${this.jSPlugin.id}-select-sd">标清</li>`
9526
+ `<ul id="${this.jSPlugin.id}-hdSelect" class="select" style="display:none;width: 60px;background: #fff;box-shadow: 0 3px 20px 0 rgb(0 0 0 / 10%);border-radius: 2px;padding: 6px 0;position: absolute;top: -120px;">`
9527
+ + `<li class="selectOption" style="width: 60px;height: 32px;text-align: center;line-height: 32px;list-style: none;cursor: pointer;font-size: 13px;color: rgba(0, 0, 0, .85);" name="option" id="${this.jSPlugin.id}-select-hd">高清</li>`
9528
+ + `<li class="selectOption" style="width: 60px;height: 32px;text-align: center;line-height: 32px;list-style: none;cursor: pointer;font-size: 13px;color: rgba(0, 0, 0, .85);" name="option" id="${this.jSPlugin.id}-select-sd">标清</li>`
9060
9529
  + '</ul>'
9061
9530
  + `<span><svg fill="${btnItem.color}" version="1.1" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="-6 -6 32 32">`
9062
9531
  + '<path d="M17.4,16.5H3.1c-0.8,0-1.4-0.6-1.4-1.4V5.4c0-0.9,0.7-1.6,1.6-1.6h14.1c0.8,0,1.4,0.6,1.4,1.4v9.8 C18.8,15.9,18.2,16.5,17.4,16.5z M3.3,5C3.1,5,2.9,5.2,2.9,5.4v9.7c0,0.2,0.1,0.3,0.3,0.3h14.3c0.2,0,0.3-0.1,0.3-0.3V5.3 c0-0.2-0.1-0.3-0.3-0.3H3.3z" />'
@@ -9277,8 +9746,9 @@ class Theme {
9277
9746
  class EZUIKitPlayer {
9278
9747
  constructor(params) {
9279
9748
  const { autoplay = true } = params;
9280
- addJs("https://open.ys7.com/assets/ezuikit_v4.0/js/AudioRenderer.js", () => {
9281
- addJs("https://open.ys7.com/assets/ezuikit_v4.0/js/SuperRender_10.js", () => {
9749
+ this.params = params;
9750
+ addJs("https://test11open.ys7.com/assets/ezuikit_v4.0/js/AudioRenderer.js", () => {
9751
+ addJs("https://test11open.ys7.com/assets/ezuikit_v4.0/js/SuperRender_10.js", () => {
9282
9752
  addJs("https://test11open.ys7.com/assets/ezuikit_v4.0/js/jsPlugin-4.0.1.min.js", () => {
9283
9753
  window.EZUIKit[params.id] = {state: {
9284
9754
  EZUIKitPlayer: {
@@ -9291,14 +9761,12 @@ class EZUIKitPlayer {
9291
9761
  initEZUIKitPlayerPromise.then((data) => {
9292
9762
  console.log("初始化成功", data);
9293
9763
  window.EZUIKit[params.id].state.EZUIKitPlayer.init = true;
9764
+ if (document.getElementById(`${params.id}canvas_draw0`)) {
9765
+ document.getElementById(`${params.id}canvas_draw0`).style.border = "none";
9766
+ }
9294
9767
  if (autoplay) {
9295
9768
  //next version 此处可采用promise.all将播放接口部分同步到初始化阶段。
9296
- var playPromise = this.play();
9297
- playPromise.then((data) => {
9298
- if (typeof params.handleSuccess === 'function') {
9299
- params.handleSuccess();
9300
- }
9301
- });
9769
+ this.play();
9302
9770
  }
9303
9771
  });
9304
9772
  });
@@ -9312,7 +9780,7 @@ class EZUIKitPlayer {
9312
9780
  initEZUIKitPlayer(params) {
9313
9781
  const { id, accessToken, themeId, url, audio = true, width = 600, height = 400 } = params;
9314
9782
  if (!document.getElementById(`${id}-wrap`)) {
9315
- document.getElementById(id).style.display = "inline-block";
9783
+ document.getElementById(id).style = `display:inline-block;width:${width}px;height:${height}px;`;
9316
9784
  var wapDom = document.createElement("div");
9317
9785
  wapDom.id = `${id}-wrap`;
9318
9786
  wapDom.style = `display:inline-block;width:${width}px;position:relative;`;
@@ -9341,10 +9809,22 @@ class EZUIKitPlayer {
9341
9809
  },
9342
9810
  windowEventSelect: function (iWndIndex) { //插件选中窗口回调
9343
9811
  },
9344
- pluginErrorHandler: function (iWndIndex, iErrorCode, oError) { //插件错误回调
9812
+ pluginErrorHandler: (iWndIndex, iErrorCode, oError) => { //插件错误回调
9345
9813
  console.log(iWndIndex, iErrorCode, oError);
9346
9814
  if (iErrorCode === 1003) {
9347
9815
  console.log("断流");
9816
+ this.pluginStatus.loadingSetText({
9817
+ text: "连接断开，请重试",
9818
+ color: 'red'
9819
+ });
9820
+ if (typeof this.params.handleError === 'function') {
9821
+ this.params.handleError({
9822
+ msg: "连接断开，请重试",
9823
+ retcode: 1003,
9824
+ id: this.params.id,
9825
+ type: "handleError"
9826
+ });
9827
+ }
9348
9828
  }
9349
9829
  },
9350
9830
  windowEventOver: function (iWndIndex) {
@@ -9356,6 +9836,7 @@ class EZUIKitPlayer {
9356
9836
  windowFullCcreenChange: function (bFull) {
9357
9837
  },
9358
9838
  firstFrameDisplay: function (iWndIndex, iWidth, iHeight) {
9839
+ jSPlugin.JS_SetCanFullScreen(false);
9359
9840
  },
9360
9841
  performanceLack: function () {
9361
9842
  },
@@ -9389,7 +9870,7 @@ class EZUIKitPlayer {
9389
9870
  // 待需要改造plugin，异步判断；
9390
9871
  resolve({
9391
9872
  meta: {
9392
- code: 200,
9873
+ retcode: 200,
9393
9874
  msg: "初始化成功"
9394
9875
  }
9395
9876
  });
@@ -9536,13 +10017,13 @@ class EZUIKitPlayer {
9536
10017
  }
9537
10018
  } else {
9538
10019
  reject({
9539
- code: -1,
10020
+ retcode: -1,
9540
10021
  msg: "未找到录像片段"
9541
10022
  });
9542
10023
  }
9543
10024
  } else {
9544
10025
  reject({
9545
- code: -1,
10026
+ retcode: -1,
9546
10027
  msg: "未找到录像片段"
9547
10028
  });
9548
10029
  }
@@ -9642,6 +10123,14 @@ class EZUIKitPlayer {
9642
10123
  text: data.msg,
9643
10124
  color: 'red'
9644
10125
  });
10126
+ if (typeof this.params.handleError === 'function') {
10127
+ this.params.handleError({
10128
+ retcode: data.code,
10129
+ msg: data.msg,
10130
+ id: this.params.id,
10131
+ type: "handleError"
10132
+ });
10133
+ }
9645
10134
  resolve(realUrl);
9646
10135
  }
9647
10136
 
@@ -9720,6 +10209,13 @@ class EZUIKitPlayer {
9720
10209
  this.openSound();
9721
10210
  }, 500);
9722
10211
  }
10212
+ if (typeof this.params.handleSuccess === 'function') {
10213
+ this.params.handleSuccess({
10214
+ retcode: 0,
10215
+ id: this.params.id,
10216
+ type: "handleSuccess"
10217
+ });
10218
+ }
9723
10219
  resolve(true);
9724
10220
  }, (err) => {
9725
10221
  var errorInfo = this.errorHander.matchErrorInfo(err.oError.errorCode);
@@ -9728,6 +10224,14 @@ class EZUIKitPlayer {
9728
10224
  text: msg,
9729
10225
  color: 'red'
9730
10226
  });
10227
+ if (typeof this.params.handleError === 'function') {
10228
+ this.params.handleError({
10229
+ retcode: err.oError.errorCode,
10230
+ msg: msg,
10231
+ id: this.params.id,
10232
+ type: "handleError"
10233
+ });
10234
+ }
9731
10235
  reject(false);
9732
10236
  });
9733
10237
  })
@@ -9737,6 +10241,14 @@ class EZUIKitPlayer {
9737
10241
  text: msg,
9738
10242
  color: 'red'
9739
10243
  });
10244
+ if (typeof this.params.handleError === 'function') {
10245
+ this.params.handleError({
10246
+ retcode: err.oError.errorCode,
10247
+ msg: msg,
10248
+ id: this.params.id,
10249
+ type: "handleError"
10250
+ });
10251
+ }
9740
10252
  reject(false);
9741
10253
  });
9742
10254
  });
@@ -9796,6 +10308,9 @@ class EZUIKitPlayer {
9796
10308
  * end
9797
10309
  */
9798
10310
  function matchUrl(matchInitUrl, matchOptions) {
10311
+ if (matchOptions.url) {
10312
+ return matchOptions.url;
10313
+ }
9799
10314
  var type = matchInitUrl.split("/")[4].split(".")[matchInitUrl.split("/")[4].split(".").length - 1].split("?")[0];
9800
10315
  if (type === 'rec' && matchInitUrl.indexOf(".cloud.rec") !== -1) {
9801
10316
  type = 'cloud.rec';
@@ -9829,13 +10344,29 @@ class EZUIKitPlayer {
9829
10344
  } else if (getQueryString("begin", matchInitUrl)) {
9830
10345
  result += `?begin=${getQueryString("begin", matchInitUrl)}`;
9831
10346
  }
9832
-
9833
10347
  return result;
9834
10348
  }
9835
10349
  return promise;
9836
10350
  }
9837
10351
  getOSDTime() {
9838
- return this.jSPlugin.JS_GetOSDTime(0);
10352
+ var promise = new Promise((resolve,reject) => {
10353
+ this.jSPlugin.JS_GetOSDTime(0)
10354
+ .then((data)=>{
10355
+ resolve({
10356
+ code: 0,
10357
+ retcode: 0,
10358
+ data: data
10359
+ });
10360
+ })
10361
+ .catch(err=>{
10362
+ reject({
10363
+ code: -1,
10364
+ retcode: -1,
10365
+ data: err
10366
+ });
10367
+ });
10368
+ });
10369
+ return promise;
9839
10370
  }
9840
10371
  capturePicture(name, callback = false) {
9841
10372
  var capturePictureRT = this.jSPlugin.JS_CapturePicture(0, name, "JPEG", callback);