Skip to content

蒋秀川 / miniProject

Go to a project
Commit af56ea2f by 李乾广
Options

修改bug

1 parent 3c540f73
Inline Side-by-side
Showing 10 changed files with 1392 additions and 214 deletions
h5/src/api/index.js
......@@ -4,6 +4,10 @@ const tourApi = {
getLiveAndPlaybackAddress(params, config){
return req('GET', `/patrol/patrolDeviceChannel/getLiveAndPlaybackAddress`, params, config)
},
// 获取直播回放地址
getThroughVideoUrl(params, config){
return req('POST', `/patrol/through/video/url`, params, config)
},
// 云控制
ptzStart(params,config) {
return req('PUT', `/patrol/patrolDeviceChannel/ptzStart`, params, config)
......@@ -11,6 +15,9 @@ const tourApi = {
ptzStop(params,config) {
return req('PUT', `/patrol/patrolDeviceChannel/ptzStop`, params, config)
},
// 获取设备录像记录
getThroughVideoRecord(params, config){
return req('POST', `/patrol/through/video/record`, params, config)
},
}
export default tourApi;
\ No newline at end of file
h5/src/views/extension/aes.js 0 → 100644
var t = t || function(t, e) {
var r = {}, i = r.lib = {}, n = function() {}, o = i.Base = {
extend: function(t) {
n.prototype = this;
var e = new n();
return t && e.mixIn(t), e.hasOwnProperty("init") || (e.init = function() {
e.$super.init.apply(this, arguments);
}), e.init.prototype = e, e.$super = this, e;
},
create: function() {
var t = this.extend();
return t.init.apply(t, arguments), t;
},
init: function() {},
mixIn: function(t) {
for (var e in t) t.hasOwnProperty(e) && (this[e] = t[e]);
t.hasOwnProperty("toString") && (this.toString = t.toString);
},
clone: function() {
return this.init.prototype.extend(this);
}
}, s = i.WordArray = o.extend({
init: function(t, e) {
t = this.words = t || [], this.sigBytes = void 0 != e ? e : 4 * t.length;
},
toString: function(t) {
return (t || a).stringify(this);
},
concat: function(t) {
var e = this.words, r = t.words, i = this.sigBytes;
if (t = t.sigBytes, this.clamp(), i % 4) for (var n = 0; n < t; n++) e[i + n >>> 2] |= (r[n >>> 2] >>> 24 - n % 4 * 8 & 255) << 24 - (i + n) % 4 * 8; else if (65535 < r.length) for (n = 0; n < t; n += 4) e[i + n >>> 2] = r[n >>> 2]; else e.push.apply(e, r);
return this.sigBytes += t, this;
},
clamp: function() {
var e = this.words, r = this.sigBytes;
e[r >>> 2] &= 4294967295 << 32 - r % 4 * 8, e.length = t.ceil(r / 4);
},
clone: function() {
var t = o.clone.call(this);
return t.words = this.words.slice(0), t;
},
random: function(e) {
for (var r = [], i = 0; i < e; i += 4) r.push(4294967296 * t.random() | 0);
return new s.init(r, e);
}
}), c = r.enc = {}, a = c.Hex = {
stringify: function(t) {
var e = t.words;
t = t.sigBytes;
for (var r = [], i = 0; i < t; i++) {
var n = e[i >>> 2] >>> 24 - i % 4 * 8 & 255;
r.push((n >>> 4).toString(16)), r.push((15 & n).toString(16));
}
return r.join("");
},
parse: function(t) {
for (var e = t.length, r = [], i = 0; i < e; i += 2) r[i >>> 3] |= parseInt(t.substr(i, 2), 16) << 24 - i % 8 * 4;
return new s.init(r, e / 2);
}
}, f = c.Latin1 = {
stringify: function(t) {
var e = t.words;
t = t.sigBytes;
for (var r = [], i = 0; i < t; i++) r.push(String.fromCharCode(e[i >>> 2] >>> 24 - i % 4 * 8 & 255));
return r.join("");
},
parse: function(t) {
for (var e = t.length, r = [], i = 0; i < e; i++) r[i >>> 2] |= (255 & t.charCodeAt(i)) << 24 - i % 4 * 8;
return new s.init(r, e);
}
}, h = c.Utf8 = {
stringify: function(t) {
try {
return decodeURIComponent(escape(f.stringify(t)));
} catch (t) {
throw Error("Malformed UTF-8 data");
}
},
parse: function(t) {
return f.parse(unescape(encodeURIComponent(t)));
}
}, u = i.BufferedBlockAlgorithm = o.extend({
reset: function() {
this._data = new s.init(), this._nDataBytes = 0;
},
_append: function(t) {
"string" == typeof t && (t = h.parse(t)), this._data.concat(t), this._nDataBytes += t.sigBytes;
},
_process: function(e) {
var r = this._data, i = r.words, n = r.sigBytes, o = this.blockSize, c = n / (4 * o);
if (e = (c = e ? t.ceil(c) : t.max((0 | c) - this._minBufferSize, 0)) * o, n = t.min(4 * e, n),
e) {
for (var a = 0; a < e; a += o) this._doProcessBlock(i, a);
a = i.splice(0, e), r.sigBytes -= n;
}
return new s.init(a, n);
},
clone: function() {
var t = o.clone.call(this);
return t._data = this._data.clone(), t;
},
_minBufferSize: 0
});
i.Hasher = u.extend({
cfg: o.extend(),
init: function(t) {
this.cfg = this.cfg.extend(t), this.reset();
},
reset: function() {
u.reset.call(this), this._doReset();
},
update: function(t) {
return this._append(t), this._process(), this;
},
finalize: function(t) {
return t && this._append(t), this._doFinalize();
},
blockSize: 16,
_createHelper: function(t) {
return function(e, r) {
return new t.init(r).finalize(e);
};
},
_createHmacHelper: function(t) {
return function(e, r) {
return new p.HMAC.init(t, r).finalize(e);
};
}
});
var p = r.algo = {};
return r;
}(Math);
!function() {
var e = t, r = e.lib.WordArray;
e.enc.Base64 = {
stringify: function(t) {
var e = t.words, r = t.sigBytes, i = this._map;
t.clamp(), t = [];
for (var n = 0; n < r; n += 3) for (var o = (e[n >>> 2] >>> 24 - n % 4 * 8 & 255) << 16 | (e[n + 1 >>> 2] >>> 24 - (n + 1) % 4 * 8 & 255) << 8 | e[n + 2 >>> 2] >>> 24 - (n + 2) % 4 * 8 & 255, s = 0; 4 > s && n + .75 * s < r; s++) t.push(i.charAt(o >>> 6 * (3 - s) & 63));
if (e = i.charAt(64)) for (;t.length % 4; ) t.push(e);
return t.join("");
},
parse: function(t) {
var e = t.length, i = this._map;
(n = i.charAt(64)) && -1 != (n = t.indexOf(n)) && (e = n);
for (var n = [], o = 0, s = 0; s < e; s++) if (s % 4) {
var c = i.indexOf(t.charAt(s - 1)) << s % 4 * 2, a = i.indexOf(t.charAt(s)) >>> 6 - s % 4 * 2;
n[o >>> 2] |= (c | a) << 24 - o % 4 * 8, o++;
}
return r.create(n, o);
},
_map: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/="
};
}(), function(e) {
function r(t, e, r, i, n, o, s) {
return ((t = t + (e & r | ~e & i) + n + s) << o | t >>> 32 - o) + e;
}
function i(t, e, r, i, n, o, s) {
return ((t = t + (e & i | r & ~i) + n + s) << o | t >>> 32 - o) + e;
}
function n(t, e, r, i, n, o, s) {
return ((t = t + (e ^ r ^ i) + n + s) << o | t >>> 32 - o) + e;
}
function o(t, e, r, i, n, o, s) {
return ((t = t + (r ^ (e | ~i)) + n + s) << o | t >>> 32 - o) + e;
}
for (var s = t, c = (f = s.lib).WordArray, a = f.Hasher, f = s.algo, h = [], u = 0; 64 > u; u++) h[u] = 4294967296 * e.abs(e.sin(u + 1)) | 0;
f = f.MD5 = a.extend({
_doReset: function() {
this._hash = new c.init([ 1732584193, 4023233417, 2562383102, 271733878 ]);
},
_doProcessBlock: function(t, e) {
for (s = 0; 16 > s; s++) {
a = t[c = e + s];
t[c] = 16711935 & (a << 8 | a >>> 24) | 4278255360 & (a << 24 | a >>> 8);
}
var s = this._hash.words, c = t[e + 0], a = t[e + 1], f = t[e + 2], u = t[e + 3], p = t[e + 4], d = t[e + 5], l = t[e + 6], y = t[e + 7], v = t[e + 8], _ = t[e + 9], g = t[e + 10], B = t[e + 11], k = t[e + 12], x = t[e + 13], m = t[e + 14], S = t[e + 15], w = s[0], z = s[1], C = s[2], E = s[3], z = o(z = o(z = o(z = o(z = n(z = n(z = n(z = n(z = i(z = i(z = i(z = i(z = r(z = r(z = r(z = r(z, C = r(C, E = r(E, w = r(w, z, C, E, c, 7, h[0]), z, C, a, 12, h[1]), w, z, f, 17, h[2]), E, w, u, 22, h[3]), C = r(C, E = r(E, w = r(w, z, C, E, p, 7, h[4]), z, C, d, 12, h[5]), w, z, l, 17, h[6]), E, w, y, 22, h[7]), C = r(C, E = r(E, w = r(w, z, C, E, v, 7, h[8]), z, C, _, 12, h[9]), w, z, g, 17, h[10]), E, w, B, 22, h[11]), C = r(C, E = r(E, w = r(w, z, C, E, k, 7, h[12]), z, C, x, 12, h[13]), w, z, m, 17, h[14]), E, w, S, 22, h[15]), C = i(C, E = i(E, w = i(w, z, C, E, a, 5, h[16]), z, C, l, 9, h[17]), w, z, B, 14, h[18]), E, w, c, 20, h[19]), C = i(C, E = i(E, w = i(w, z, C, E, d, 5, h[20]), z, C, g, 9, h[21]), w, z, S, 14, h[22]), E, w, p, 20, h[23]), C = i(C, E = i(E, w = i(w, z, C, E, _, 5, h[24]), z, C, m, 9, h[25]), w, z, u, 14, h[26]), E, w, v, 20, h[27]), C = i(C, E = i(E, w = i(w, z, C, E, x, 5, h[28]), z, C, f, 9, h[29]), w, z, y, 14, h[30]), E, w, k, 20, h[31]), C = n(C, E = n(E, w = n(w, z, C, E, d, 4, h[32]), z, C, v, 11, h[33]), w, z, B, 16, h[34]), E, w, m, 23, h[35]), C = n(C, E = n(E, w = n(w, z, C, E, a, 4, h[36]), z, C, p, 11, h[37]), w, z, y, 16, h[38]), E, w, g, 23, h[39]), C = n(C, E = n(E, w = n(w, z, C, E, x, 4, h[40]), z, C, c, 11, h[41]), w, z, u, 16, h[42]), E, w, l, 23, h[43]), C = n(C, E = n(E, w = n(w, z, C, E, _, 4, h[44]), z, C, k, 11, h[45]), w, z, S, 16, h[46]), E, w, f, 23, h[47]), C = o(C, E = o(E, w = o(w, z, C, E, c, 6, h[48]), z, C, y, 10, h[49]), w, z, m, 15, h[50]), E, w, d, 21, h[51]), C = o(C, E = o(E, w = o(w, z, C, E, k, 6, h[52]), z, C, u, 10, h[53]), w, z, g, 15, h[54]), E, w, a, 21, h[55]), C = o(C, E = o(E, w = o(w, z, C, E, v, 6, h[56]), z, C, S, 10, h[57]), w, z, l, 15, h[58]), E, w, x, 21, h[59]), C = o(C, E = o(E, w = o(w, z, C, E, p, 6, h[60]), z, C, B, 10, h[61]), w, z, f, 15, h[62]), E, w, _, 21, h[63]);
s[0] = s[0] + w | 0, s[1] = s[1] + z | 0, s[2] = s[2] + C | 0, s[3] = s[3] + E | 0;
},
_doFinalize: function() {
var t = this._data, r = t.words, i = 8 * this._nDataBytes, n = 8 * t.sigBytes;
r[n >>> 5] |= 128 << 24 - n % 32;
var o = e.floor(i / 4294967296);
for (r[15 + (n + 64 >>> 9 << 4)] = 16711935 & (o << 8 | o >>> 24) | 4278255360 & (o << 24 | o >>> 8),
r[14 + (n + 64 >>> 9 << 4)] = 16711935 & (i << 8 | i >>> 24) | 4278255360 & (i << 24 | i >>> 8),
t.sigBytes = 4 * (r.length + 1), this._process(), r = (t = this._hash).words, i = 0; 4 > i; i++) n = r[i],
r[i] = 16711935 & (n << 8 | n >>> 24) | 4278255360 & (n << 24 | n >>> 8);
return t;
},
clone: function() {
var t = a.clone.call(this);
return t._hash = this._hash.clone(), t;
}
}), s.MD5 = a._createHelper(f), s.HmacMD5 = a._createHmacHelper(f);
}(Math), function() {
var e = t, r = e.lib, i = r.Base, n = r.WordArray, o = (r = e.algo).EvpKDF = i.extend({
cfg: i.extend({
keySize: 4,
hasher: r.MD5,
iterations: 1
}),
init: function(t) {
this.cfg = this.cfg.extend(t);
},
compute: function(t, e) {
for (var r = (c = this.cfg).hasher.create(), i = n.create(), o = i.words, s = c.keySize, c = c.iterations; o.length < s; ) {
a && r.update(a);
var a = r.update(t).finalize(e);
r.reset();
for (var f = 1; f < c; f++) a = r.finalize(a), r.reset();
i.concat(a);
}
return i.sigBytes = 4 * s, i;
}
});
e.EvpKDF = function(t, e, r) {
return o.create(r).compute(t, e);
};
}(), t.lib.Cipher || function(e) {
var r = (l = t).lib, i = r.Base, n = r.WordArray, o = r.BufferedBlockAlgorithm, s = l.enc.Base64, c = l.algo.EvpKDF, a = r.Cipher = o.extend({
cfg: i.extend(),
createEncryptor: function(t, e) {
return this.create(this._ENC_XFORM_MODE, t, e);
},
createDecryptor: function(t, e) {
return this.create(this._DEC_XFORM_MODE, t, e);
},
init: function(t, e, r) {
this.cfg = this.cfg.extend(r), this._xformMode = t, this._key = e, this.reset();
},
reset: function() {
o.reset.call(this), this._doReset();
},
process: function(t) {
return this._append(t), this._process();
},
finalize: function(t) {
return t && this._append(t), this._doFinalize();
},
keySize: 4,
ivSize: 4,
_ENC_XFORM_MODE: 1,
_DEC_XFORM_MODE: 2,
_createHelper: function(t) {
return {
encrypt: function(e, r, i) {
return ("string" == typeof r ? y : d).encrypt(t, e, r, i);
},
decrypt: function(e, r, i) {
return ("string" == typeof r ? y : d).decrypt(t, e, r, i);
}
};
}
});
r.StreamCipher = a.extend({
_doFinalize: function() {
return this._process(!0);
},
blockSize: 1
});
var f = l.mode = {}, h = function(t, e, r) {
var i = this._iv;
i ? this._iv = void 0 : i = this._prevBlock;
for (var n = 0; n < r; n++) t[e + n] ^= i[n];
}, u = (r.BlockCipherMode = i.extend({
createEncryptor: function(t, e) {
return this.Encryptor.create(t, e);
},
createDecryptor: function(t, e) {
return this.Decryptor.create(t, e);
},
init: function(t, e) {
this._cipher = t, this._iv = e;
}
})).extend();
u.Encryptor = u.extend({
processBlock: function(t, e) {
var r = this._cipher, i = r.blockSize;
h.call(this, t, e, i), r.encryptBlock(t, e), this._prevBlock = t.slice(e, e + i);
}
}), u.Decryptor = u.extend({
processBlock: function(t, e) {
var r = this._cipher, i = r.blockSize, n = t.slice(e, e + i);
r.decryptBlock(t, e), h.call(this, t, e, i), this._prevBlock = n;
}
}), f = f.CBC = u, u = (l.pad = {}).Pkcs7 = {
pad: function(t, e) {
for (var r = 4 * e, i = (r = r - t.sigBytes % r) << 24 | r << 16 | r << 8 | r, o = [], s = 0; s < r; s += 4) o.push(i);
r = n.create(o, r), t.concat(r);
},
unpad: function(t) {
t.sigBytes -= 255 & t.words[t.sigBytes - 1 >>> 2];
}
}, r.BlockCipher = a.extend({
cfg: a.cfg.extend({
mode: f,
padding: u
}),
reset: function() {
a.reset.call(this);
var t = (e = this.cfg).iv, e = e.mode;
if (this._xformMode == this._ENC_XFORM_MODE) var r = e.createEncryptor; else r = e.createDecryptor,
this._minBufferSize = 1;
this._mode = r.call(e, this, t && t.words);
},
_doProcessBlock: function(t, e) {
this._mode.processBlock(t, e);
},
_doFinalize: function() {
var t = this.cfg.padding;
if (this._xformMode == this._ENC_XFORM_MODE) {
t.pad(this._data, this.blockSize);
var e = this._process(!0);
} else e = this._process(!0), t.unpad(e);
return e;
},
blockSize: 4
});
var p = r.CipherParams = i.extend({
init: function(t) {
this.mixIn(t);
},
toString: function(t) {
return (t || this.formatter).stringify(this);
}
}), f = (l.format = {}).OpenSSL = {
stringify: function(t) {
var e = t.ciphertext;
return ((t = t.salt) ? n.create([ 1398893684, 1701076831 ]).concat(t).concat(e) : e).toString(s);
},
parse: function(t) {
var e = (t = s.parse(t)).words;
if (1398893684 == e[0] && 1701076831 == e[1]) {
var r = n.create(e.slice(2, 4));
e.splice(0, 4), t.sigBytes -= 16;
}
return p.create({
ciphertext: t,
salt: r
});
}
}, d = r.SerializableCipher = i.extend({
cfg: i.extend({
format: f
}),
encrypt: function(t, e, r, i) {
i = this.cfg.extend(i);
var n = t.createEncryptor(r, i);
return e = n.finalize(e), n = n.cfg, p.create({
ciphertext: e,
key: r,
iv: n.iv,
algorithm: t,
mode: n.mode,
padding: n.padding,
blockSize: t.blockSize,
formatter: i.format
});
},
decrypt: function(t, e, r, i) {
return i = this.cfg.extend(i), e = this._parse(e, i.format), t.createDecryptor(r, i).finalize(e.ciphertext);
},
_parse: function(t, e) {
return "string" == typeof t ? e.parse(t, this) : t;
}
}), l = (l.kdf = {}).OpenSSL = {
execute: function(t, e, r, i) {
return i || (i = n.random(8)), t = c.create({
keySize: e + r
}).compute(t, i), r = n.create(t.words.slice(e), 4 * r), t.sigBytes = 4 * e, p.create({
key: t,
iv: r,
salt: i
});
}
}, y = r.PasswordBasedCipher = d.extend({
cfg: d.cfg.extend({
kdf: l
}),
encrypt: function(t, e, r, i) {
return i = this.cfg.extend(i), r = i.kdf.execute(r, t.keySize, t.ivSize), i.iv = r.iv,
(t = d.encrypt.call(this, t, e, r.key, i)).mixIn(r), t;
},
decrypt: function(t, e, r, i) {
return i = this.cfg.extend(i), e = this._parse(e, i.format), r = i.kdf.execute(r, t.keySize, t.ivSize, e.salt),
i.iv = r.iv, d.decrypt.call(this, t, e, r.key, i);
}
});
}(), function() {
for (var e = t, r = e.lib.BlockCipher, i = e.algo, n = [], o = [], s = [], c = [], a = [], f = [], h = [], u = [], p = [], d = [], l = [], y = 0; 256 > y; y++) l[y] = 128 > y ? y << 1 : y << 1 ^ 283;
for (var v = 0, _ = 0, y = 0; 256 > y; y++) {
var g = (g = _ ^ _ << 1 ^ _ << 2 ^ _ << 3 ^ _ << 4) >>> 8 ^ 255 & g ^ 99;
n[v] = g, o[g] = v;
var B = l[v], k = l[B], x = l[k], m = 257 * l[g] ^ 16843008 * g;
s[v] = m << 24 | m >>> 8, c[v] = m << 16 | m >>> 16, a[v] = m << 8 | m >>> 24, f[v] = m,
m = 16843009 * x ^ 65537 * k ^ 257 * B ^ 16843008 * v, h[g] = m << 24 | m >>> 8,
u[g] = m << 16 | m >>> 16, p[g] = m << 8 | m >>> 24, d[g] = m, v ? (v = B ^ l[l[l[x ^ B]]],
_ ^= l[l[_]]) : v = _ = 1;
}
var S = [ 0, 1, 2, 4, 8, 16, 32, 64, 128, 27, 54 ], i = i.AES = r.extend({
_doReset: function() {
for (var t = (r = this._key).words, e = r.sigBytes / 4, r = 4 * ((this._nRounds = e + 6) + 1), i = this._keySchedule = [], o = 0; o < r; o++) if (o < e) i[o] = t[o]; else {
var s = i[o - 1];
o % e ? 6 < e && 4 == o % e && (s = n[s >>> 24] << 24 | n[s >>> 16 & 255] << 16 | n[s >>> 8 & 255] << 8 | n[255 & s]) : (s = s << 8 | s >>> 24,
s = n[s >>> 24] << 24 | n[s >>> 16 & 255] << 16 | n[s >>> 8 & 255] << 8 | n[255 & s],
s ^= S[o / e | 0] << 24), i[o] = i[o - e] ^ s;
}
for (t = this._invKeySchedule = [], e = 0; e < r; e++) o = r - e, s = e % 4 ? i[o] : i[o - 4],
t[e] = 4 > e || 4 >= o ? s : h[n[s >>> 24]] ^ u[n[s >>> 16 & 255]] ^ p[n[s >>> 8 & 255]] ^ d[n[255 & s]];
},
encryptBlock: function(t, e) {
this._doCryptBlock(t, e, this._keySchedule, s, c, a, f, n);
},
decryptBlock: function(t, e) {
var r = t[e + 1];
t[e + 1] = t[e + 3], t[e + 3] = r, this._doCryptBlock(t, e, this._invKeySchedule, h, u, p, d, o),
r = t[e + 1], t[e + 1] = t[e + 3], t[e + 3] = r;
},
_doCryptBlock: function(t, e, r, i, n, o, s, c) {
for (var a = this._nRounds, f = t[e] ^ r[0], h = t[e + 1] ^ r[1], u = t[e + 2] ^ r[2], p = t[e + 3] ^ r[3], d = 4, l = 1; l < a; l++) var y = i[f >>> 24] ^ n[h >>> 16 & 255] ^ o[u >>> 8 & 255] ^ s[255 & p] ^ r[d++], v = i[h >>> 24] ^ n[u >>> 16 & 255] ^ o[p >>> 8 & 255] ^ s[255 & f] ^ r[d++], _ = i[u >>> 24] ^ n[p >>> 16 & 255] ^ o[f >>> 8 & 255] ^ s[255 & h] ^ r[d++], p = i[p >>> 24] ^ n[f >>> 16 & 255] ^ o[h >>> 8 & 255] ^ s[255 & u] ^ r[d++], f = y, h = v, u = _;
y = (c[f >>> 24] << 24 | c[h >>> 16 & 255] << 16 | c[u >>> 8 & 255] << 8 | c[255 & p]) ^ r[d++],
v = (c[h >>> 24] << 24 | c[u >>> 16 & 255] << 16 | c[p >>> 8 & 255] << 8 | c[255 & f]) ^ r[d++],
_ = (c[u >>> 24] << 24 | c[p >>> 16 & 255] << 16 | c[f >>> 8 & 255] << 8 | c[255 & h]) ^ r[d++],
p = (c[p >>> 24] << 24 | c[f >>> 16 & 255] << 16 | c[h >>> 8 & 255] << 8 | c[255 & u]) ^ r[d++],
t[e] = y, t[e + 1] = v, t[e + 2] = _, t[e + 3] = p;
},
keySize: 8
});
e.AES = r._createHelper(i);
}(), t.enc.u8array = {
stringify: function(t) {
for (var e = t.words, r = t.sigBytes, i = new Uint8Array(r), n = 0; n < r; n++) {
var o = e[n >>> 2] >>> 24 - n % 4 * 8 & 255;
i[n] = o;
}
return i;
},
parse: function(e) {
for (var r = e.length, i = [], n = 0; n < r; n++) i[n >>> 2] |= (255 & e[n]) << 24 - n % 4 * 8;
return t.lib.WordArray.create(i, r);
}
}, t.enc.int8array = {
stringify: function(t) {
for (var e = t.words, r = t.sigBytes, i = new Int8Array(r), n = 0; n < r; n++) {
var o = e[n >>> 2] >> 24 - n % 4 * 8 & 255;
i[n] = o;
}
return i;
},
parse: function(e) {
for (var r = e.length, i = [], n = 0; n < r; n++) i[n >>> 2] |= (255 & e[n]) << 24 - n % 4 * 8;
return t.lib.WordArray.create(i, r);
}
}, t.enc.int16array = {
stringify: function(t) {
for (var e = t.words, r = t.sigBytes, i = new Uint8Array(r), n = 0; n < r; n++) {
var o = e[n >>> 2] >>> 24 - n % 4 * 8 & 255;
i[n] = o;
}
return i;
},
parse: function(e) {
for (var r = e.length, i = [], n = 0; n < r; n++) i[n >>> 2] |= (255 & e[n]) << 24 - n % 4 * 8;
return t.lib.WordArray.create(i, r);
}
}, t.mode.CFB = function() {
function e(t, e, r, i) {
var n = this._iv;
if (n) {
o = n.slice(0);
this._iv = void 0;
} else var o = this._prevBlock;
i.encryptBlock(o, 0);
for (var s = 0; s < r; s++) t[e + s] ^= o[s];
}
var r = t.lib.BlockCipherMode.extend();
return r.Encryptor = r.extend({
processBlock: function(t, r) {
var i = this._cipher, n = i.blockSize;
e.call(this, t, r, n, i), this._prevBlock = t.slice(r, r + n);
}
}), r.Decryptor = r.extend({
processBlock: function(t, r) {
var i = this._cipher, n = i.blockSize, o = t.slice(r, r + n);
e.call(this, t, r, n, i), this._prevBlock = o;
}
}), r;
}(), t.mode.ECB = function() {
var e = t.lib.BlockCipherMode.extend();
return e.Encryptor = e.extend({
processBlock: function(t, e) {
this._cipher.encryptBlock(t, e);
}
}), e.Decryptor = e.extend({
processBlock: function(t, e) {
this._cipher.decryptBlock(t, e);
}
}), e;
}(), t.pad.NoPadding = {
pad: function() {},
unpad: function() {}
}, module.exports = {
CryptoJS: t
};
\ No newline at end of file
h5/src/views/extension/index.vue
<template>
<div class="extension-page">
<div class="j-player-wrapper">
<vion-player ref="vionPlayer" :watermarkText="params.watermarkText" :hideControls="false" :showPtz="false" :isXCXPage="true"/>
<vion-player ref="vionPlayer" :watermarkText="params.watermarkText" :hideControls="false" :showPtz="false" :isXCXPage="true" @magnificationChange="magnificationChange"/>
<!-- <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwBAMAAAClLOS0AAAAJFBMVEVHcEzMzMzMzMzMzMzMzMzNzc3MzMzMzMzNzc3Nzc3MzMzMzMwv5ahDAAAAC3RSTlMAW+8S2UGVwyyZnOTRhEMAAAEfSURBVDjLzZKxbsJADIYdBQpsSCyVMlXAdEuQYGKpWFk6dWHJgsQ7sMDSpUv3PgITAQT0f7ly57ucQ45KXRAZot+/89k+X4ju9KzL4XOhlm3pR0enYrWViSRPXQIQSASkRSkIJEFRimYCuQAHSW89IOv6SH5TCsuAj68Ab1wDzqkAzqoC7AUAPtgsABgkBBgkCJiNHehGok//KRVsHqd+3Dj1/vukt3AH/Jj05s5/AmyZhFVWXDls44iVvfQWkCvgxU6g9ZdJfCLvjJbYaT3GvjOY4mQSG3SJGjhr/Y1Xohp+TGKqqzexZ/1GVGdNCitt6R8zVvb9d+JmKdl8o5sPWbtxT6zFuJcDQtk92MNmYiXHquYlZlVt1j4P6cd7fgHFW7Nhqu29TwAAAABJRU5ErkJggg==" alt="" @click="screenshot" class="screen-shot-img"> -->
</div>
<!-- 时间线组件 -->
<div class="extension-time-box">
<videoTime ref="videoTime" @videoTimeChange="videoTimeChange" @ptzControlClick="ptzControlClick" :dateFormatType="dateFormatType"/>
<videoTime ref="videoTime" @videoTimeChange="videoTimeChange" @ptzControlClick="ptzControlClick" :dateFormatType="dateFormatType" :magnification="magnification" :ptzEnable="params.ptzEnable" :gateUnid="params.gateUnid" :appKey="params.appKey"/>
</div>
</div>
</template>
<script>
import { getUrlParams } from './utils';
import vionPlayer from '@/components/vionPlayer';
import videoTime from './videoTime';
import moment from "moment";
import tourApi from '@/api';
var {CryptoJS} = require('./aes')
import {
Toast
} from 'vant';
......@@ -40,6 +42,8 @@ export default {
params: {
gateUnid: '',
watermarkText: '',
appKey:'',
ptzEnable:'',
},
panTiltList:{
up:0,
......@@ -59,6 +63,7 @@ export default {
nowPanTilt:'',
terminalType:'',
dateFormatType:'YYYY-MM-DD',
magnification:1,
}
},
created() {
......@@ -70,6 +75,10 @@ export default {
window.screenshot = this.screenshot;
},
methods: {
// 播放倍率改变
magnificationChange(val) {
this.magnification = val
},
// 时间线改变
videoTimeChange(val) {
let valTime = moment(val).format('YYYY-MM-DD HH:mm:ss')
......@@ -89,15 +98,18 @@ export default {
let par = {
direction:this.panTiltList[type],
speed:2,
gateUnid:this.params.gateUnid
gateUnid:this.params.gateUnid,
appKey:this.params.appKey,
}
// 加密
let parStr = this.aesEncrypt(par)
if(type == 'stop') {
par.direction = this.nowPanTilt
tourApi.ptzStop(par).then(res => {
tourApi.ptzStop({param:parStr}).then(res => {
console.log(res)
})
} else {
tourApi.ptzStart(par).then(res => {
tourApi.ptzStart({param:parStr}).then(res => {
console.log(res)
if(res.data&&res.data.code != 200) {
Toast.fail('云台当前操作失败');
......@@ -139,17 +151,24 @@ export default {
getVideoAddress(startTime,stopTime) {
let par = {
gateUnid: this.params.gateUnid,
appKey: this.params.appKey,
playbackSpeed: 1,
startTime:startTime?startTime:null,
stopTime:stopTime?stopTime:null,
}
tourApi.getLiveAndPlaybackAddress(par).then(res => {
console.log(res)
// 加密
let parStr = this.aesEncrypt(par)
tourApi.getThroughVideoUrl({param:parStr}).then(res => {
if (res.data&&res.data.code == 200) {
this.$refs.vionPlayer.play(res.data.msg);
}
})
},
//加密
aesEncrypt (obj){
let encrypted = CryptoJS.AES.encrypt(CryptoJS.enc.Utf8.parse(JSON.stringify(obj)), CryptoJS.enc.Utf8.parse('0123456789abcdef'), {mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7}).toString();
return encrypted
},
// 暴露方法
// 截图方法
screenshot() {
......
h5/src/views/extension/videoTime.vue
......@@ -31,7 +31,7 @@
</div>
<!-- 操作按钮 -->
<div class="operating-box">
<van-button v-if="isNoBack" type="info" size="mini" @click="ptzControlChange">{{ptzControlShow?'隐藏云台':'打开云台'}}</van-button>
<van-button v-if="isNoBack&&ptzEnable==1" type="info" size="mini" @click="ptzControlChange">{{ptzControlShow?'隐藏云台':'打开云台'}}</van-button>
<van-button v-else type="info" size="mini" @click="backRealTime">返回实时</van-button>
<!-- <div v-if="isNoBack" class="operating-btn" @click="ptzControlChange">{{ptzControlShow?'隐藏云台':'打开云台'}}</div> -->
<!-- <div v-else class="operating-btn" @click="backRealTime">返回实时</div> -->
......@@ -65,13 +65,11 @@
import TimeLineCanvas from "./timeline-canvas-wx.vue";
import moment from "moment";
import tourApi from '@/api';
var {CryptoJS} = require('./aes')
export default {
name:'videoTime',
data() {
return {
startTimePickerOptions: {
selectableRange: '00:00:00 - 00:00:01'
},
showDayStr: moment().format('MM月DD日'),
showDay: '',
showDaySelectShow:false,
......@@ -100,7 +98,7 @@ export default {
playDateArr:[],
}
},
props:['dateFormatType'],
props:['dateFormatType','ptzEnable','gateUnid','appKey'],
components: {
TimeLineCanvas,
},
......@@ -108,40 +106,59 @@ export default {
let that = this
this.showDay = moment().format(this.dateFormatType)
this.timeRange = [moment().format(this.dateFormatType + ' 00:00:00'), moment().format(this.dateFormatType + ' 23:59:59')]
this.startTimePickerOptions.selectableRange = '00:00:00 - ' + moment().format('HH:mm:ss')
this.startTime = moment().format('HH:mm:ss')
this.nowPlayTime = this.startTime
this.startMeddleTime = moment().format(this.dateFormatType + ' HH:mm:ss')
this.proTimeColumns()
this.getDateBackTime(this.showDay)
},
beforeDestroy() {
this.stopPlay()
},
methods: {
// 获取可播放日期列表
getPlayDate() {
tourApi.ptzStop(par).then(res => {
console.log(res)
// 获取播放日期录像回放时间
getDateBackTime(startDay) {
let stopTime = startDay == moment().format(this.dateFormatType)?moment().format(this.dateFormatType + ' HH:mm:ss'):moment().format(this.dateFormatType + ' 23:59:59');
let par = {
gateUnid: this.gateUnid,
appKey: this.appKey,
startTime:startDay + ' 00:00:00',
stopTime:stopTime,
}
let parStr = this.aesEncrypt(par)
tourApi.getThroughVideoRecord({param:parStr}).then(res => {
// console.log(res)
if(res.data.code == 200) {
this.markTime = []
let list = res.data.data?res.data.data:[];
list.forEach((one)=>{
this.markTime.push({
beginTime: moment(one.startTime).format(this.dateFormatType + ' HH:mm:ss'),
endTime: moment(one.endTime).format(this.dateFormatType + ' HH:mm:ss'),
bgColor: "rgba(255,153,0,0.4)",
text: "",
})
})
}
})
},
//加密
aesEncrypt (obj){
let encrypted = CryptoJS.AES.encrypt(CryptoJS.enc.Utf8.parse(JSON.stringify(obj)), CryptoJS.enc.Utf8.parse('0123456789abcdef'), {mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7}).toString();
return encrypted
},
startPlay() {
if(this.isAutoPlay) {
this.stopPlay()
}
this.isNoBack = true
this.timeRange = [moment().format(this.dateFormatType + ' 00:00:00'), moment().format(this.dateFormatType + ' 23:59:59')]
this.markTime = [{
beginTime: moment().format(this.dateFormatType + ' 00:00:00'),
endTime: moment().format(this.dateFormatType + ' HH:mm:ss'),
bgColor: "rgba(255,153,0,0.4)",
text: "",
}]
this.startTimePickerOptions.selectableRange = '00:00:00 - ' + moment().format('HH:mm:ss')
this.startTime = moment().format('HH:mm:ss')
this.showDayStr = moment().format('MM月DD日')
this.showDay = moment().format(this.dateFormatType)
this.startMeddleTime = moment().format(this.dateFormatType + ' HH:mm:ss')
this.$refs.time_line.play(moment().format(this.dateFormatType + ' HH:mm:ss'));
this.getDateBackTime(this.showDay)
this.isAutoPlay = true
},
stopPlay() {
......@@ -165,23 +182,10 @@ export default {
if (this.showDay == moment().format(this.dateFormatType) &&!type) {
this.isNoBack = true
this.startTime = moment().format('HH:mm:ss')
this.startTimePickerOptions.selectableRange = '00:00:00 - ' + moment().format('HH:mm:ss')
this.markTime = [{
beginTime: moment().format(this.dateFormatType + ' 00:00:00'),
endTime: moment().format(this.dateFormatType + ' HH:mm:ss'),
bgColor: "rgba(255,153,0,0.4)",
text: "",
}]
} else {
this.isNoBack = false
this.startTimePickerOptions.selectableRange = '00:00:00 - 23:59:59'
this.markTime = [{
beginTime: this.showDay + ' 00:00:00',
endTime: this.showDay + ' 23:59:59',
bgColor: "rgba(255,153,0,0.4)",
text: "",
}]
}
this.getDateBackTime(this.showDay)
this.startMeddleTime = moment(this.showDay + ' ' + this.startTime).format(this.dateFormatType + ' HH:mm:ss')
if(!type) {
this.$emit('videoTimeChange',this.startMeddleTime)
......@@ -260,12 +264,7 @@ export default {
this.proTimeColumns()
}
if (moment(date).format(this.dateFormatType) == moment().format(this.dateFormatType)) {
this.markTime = [{
beginTime: moment().format(this.dateFormatType + ' 00:00:00'),
endTime: moment().format(this.dateFormatType + ' HH:mm:ss'),
bgColor: "rgba(255,153,0,0.4)",
text: "",
}]
// this.getDateBackTime(moment().format(this.dateFormatType))
}
// 更新时间下拉选项
},
......
h5/src/views/pc/index.vue
<template>
<div class="video-page" :style="{height:isFullScreen?'100%':height?height:videoHeight+'px'}">
<!-- <div>
<el-button type="primary" @click="playWebVideo({gateUnid: '7c55b448-5857-11ee-8777-00163e143ecd'})">会议室</el-button>
<el-button type="primary" @click="playWebVideo({gateUnid: '85de13a8-5775-11ee-94ed-00163e143ecd'})">办公室</el-button>
<el-button type="primary" @click="playWebVideo({gateUnid: '85de1326-5775-11ee-94ed-00163e143ecd'})">大华</el-button>
</div> -->
<div class="video-box" :style="{height:isShowTime?'calc(100% - 128px)':'100%'}">
<div v-if="playerNum == 1" class="video-split-one">
<div v-if="videoObj.name" class="elRow">
......@@ -17,7 +22,7 @@
</div>
<div v-else class="video-split-box">
<div class="video-split-line">
<div class="video-split-one" @click="selectVideoChange(0)">
<div class="video-split-one" :class="[splitNum==0?'video-split-one-show':'']" @click="selectVideoChange(0)">
<div v-if="videoArrObj[0]&&videoArrObj[0].name" class="elRow">
<div class="gateName">
{{videoArrObj[0].name}}
......@@ -31,7 +36,7 @@
<p class="screenshot" @click="screenshot(0)"><i class="el-icon-camera"></i></p>
</div>
</div>
<div class="video-split-one" @click="selectVideoChange(1)">
<div class="video-split-one" :class="[splitNum==1?'video-split-one-show':'']" @click="selectVideoChange(1)">
<div v-if="videoArrObj[1]&&videoArrObj[1].name" class="elRow">
<div class="gateName">
{{videoArrObj[1].name}}
......@@ -47,7 +52,7 @@
</div>
</div>
<div class="video-split-line">
<div class="video-split-one" @click="selectVideoChange(2)">
<div class="video-split-one" :class="[splitNum==2?'video-split-one-show':'']" @click="selectVideoChange(2)">
<div v-if="videoArrObj[2]&&videoArrObj[2].name" class="elRow">
<div class="gateName">
{{videoArrObj[2].name}}
......@@ -61,7 +66,7 @@
<p class="screenshot" @click="screenshot(2)"><i class="el-icon-camera"></i></p>
</div>
</div>
<div class="video-split-one" @click="selectVideoChange(3)">
<div class="video-split-one" :class="[splitNum==3?'video-split-one-show':'']" @click="selectVideoChange(3)">
<div v-if="videoArrObj[3]&&videoArrObj[3].name" class="elRow">
<div class="gateName">
{{videoArrObj[3].name}}
......@@ -79,7 +84,7 @@
</div>
</div>
<div class="time-box" v-if="isShowTime">
<videoTime ref="videoTime" @videoTimeChange="videoTimeChange" @videoTimeSync="videoTimeSync" @allVideoFullScreen="allVideoFullScreen" @allVideoExitFullScreen="allVideoExitFullScreen" @splitScreenChange="splitScreenChange" :isShowSplit="isShowSplit"/>
<videoTime ref="videoTime" @videoTimeChange="videoTimeChange" @videoTimeSync="videoTimeSync" @allVideoFullScreen="allVideoFullScreen" @allVideoExitFullScreen="allVideoExitFullScreen" @splitScreenChange="splitScreenChange" :isShowSplit="isShowSplit" :splitNum="splitNum"/>
</div>
</div>
</template>
......@@ -174,20 +179,18 @@ export default {
this.splitNum = obj.splitNum
}
console.log(obj)
if(this.$refs.videoTime) {
this.$refs.videoTime.stopPlay()
}
obj.watermarkText = obj.watermarkText||'';
if(this.playerNum == 4) {
this.videoArrObj[this.splitNum] = Object.assign({}, obj)
this.$forceUpdate()
this.getVideoAddress(obj,this.splitNum)
} else {
this.splitNum = 0
this.videoObj = Object.assign({}, obj);
this.$forceUpdate()
this.getVideoAddress(obj)
}
if(this.isShowTime) {
if(this.isShowTime&&this.isNoBack) {
this.$refs.videoTime.startPlay()
}
},
......@@ -221,7 +224,7 @@ export default {
} else {
this.$refs.vionPlayer.play(res.data.msg);
}
this.splitNumChange()
// this.splitNumChange()
}
})
},
......@@ -290,16 +293,16 @@ export default {
}
// 更新视频地址
if(this.playerNum == 4) {
if(this.videoArrObj[0]){
if(this.splitNum == 0){
this.getVideoAddress(this.videoArrObj[0],0)
}
if(this.videoArrObj[1]){
if(this.splitNum == 1){
this.getVideoAddress(this.videoArrObj[1],1)
}
if(this.videoArrObj[2]){
if(this.splitNum == 2){
this.getVideoAddress(this.videoArrObj[2],2)
}
if(this.videoArrObj[3]){
if(this.splitNum == 3){
this.getVideoAddress(this.videoArrObj[3],3)
}
} else {
......@@ -413,11 +416,12 @@ export default {
this.videoArrObj[val] = null
this.splitNum = val
} else {
this.splitNum = 0
this.$refs.vionPlayer.destroy();
}
if(this.playerNum == 1||(this.playerNum == 4&&!this.videoArrObj[0]&&!this.videoArrObj[1]&&!this.videoArrObj[2]&&!this.videoArrObj[3])) {
this.$refs.videoTime.stopPlay()
}
// if(this.playerNum == 1||(this.playerNum == 4&&!this.videoArrObj[0]&&!this.videoArrObj[1]&&!this.videoArrObj[2]&&!this.videoArrObj[3])) {
this.$refs.videoTime.stopPlay(this.splitNum)
// }
},
}
}
......@@ -467,8 +471,8 @@ export default {
top:0px;
left:0px;
z-index: 99;
height: 48px;
line-height: 48px;
height: 38px;
line-height: 38px;
display: none;
align-items: center;
justify-content: space-between;
......@@ -477,8 +481,8 @@ export default {
padding: 0 30px;
font-size: 18px;
.closeIcon{
height: 48px;
line-height: 48px;
height: 38px;
line-height: 38px;
cursor: pointer;
padding: 0 10px;
}
......@@ -503,6 +507,9 @@ export default {
position: relative;
border: 2px solid rgba(255,255,255,0.4);
}
.video-split-one-show{
border: 2px solid #409EFF;
}
}
}
</style>
h5/src/views/pc/pcdemo.vue
......@@ -2,17 +2,20 @@
<div>
<!-- 添加视频测试 -->
<div>
<el-button type="primary" @click="addPlayer({gateUnid: '7c55b448-5857-11ee-8777-00163e143ecd'})">办公室</el-button>
<el-button type="primary" @click="addPlayer({gateUnid: '7c55b448-5857-11ee-8777-00163e143ecd'})">会议室</el-button>
<el-button type="primary" @click="addPlayer({gateUnid: '85de13a8-5775-11ee-94ed-00163e143ecd'})">办公室</el-button>
<el-button type="primary" @click="addPlayer({gateUnid: '85de1326-5775-11ee-94ed-00163e143ecd'})">大华</el-button>
</div>
<iframe id="iframe" name="iframe" ref="iframe" style="width: 100vw;height:calc(100vh - 60px);" src="/#/vionplayer-web" frameborder="0"></iframe>
<indexPlayer id="iframe" ref="iframe" style="width: 100vw;height:calc(100vh - 60px);"></indexPlayer>
<!-- <iframe id="iframe" name="iframe" ref="iframe" style="width: 100vw;height:calc(100vh - 60px);" src="/#/vionplayer-web" frameborder="0"></iframe> -->
</div>
</template>
<script>
// import indexPlayer from './index.vue';
import indexPlayer from './index.vue';
export default {
name: 'jplayerWebDemo',
components: {
// indexPlayer,
indexPlayer,
},
data() {
return {
......@@ -33,9 +36,9 @@ export default {
},
methods: {
addPlayer(obj) {
window.parent.document.getElementById('iframe').contentWindow.playWebVideo(obj)
// window.parent.document.getElementById('iframe').contentWindow.playWebVideo(obj)
// this.$refs.iframe.playWebVideo(obj)
this.$refs.iframe.playWebVideo(obj)
},
},
}
......
h5/src/views/pc/videoTime.vue
......@@ -4,8 +4,7 @@
<!-- 操作区 -->
<div class="time-operation-module">
<!-- 左侧操作栏 -->
<div class="operation-module-left">
</div>
<div></div>
<div v-if="isAutoPlay&&!isNoBack" class="operation-module-center">
<div class="time-input-box">
<div class="time-input-list">
......@@ -32,44 +31,13 @@
</el-dropdown>
<i class="el-icon-arrow-right"></i>
</div>
<!-- 时间轴精度选择 -->
<div class="time-line-accuracy" v-if="false">
<i class="el-icon-arrow-left"></i>
<el-dropdown trigger="click" placement="top" @command="timeAccuracyChange">
<span class="time-accuracy-text">
{{timeAccuracy}}小时
</span>
<el-dropdown-menu slot="dropdown">
<!-- <el-dropdown-item command="1">1小时</el-dropdown-item>
<el-dropdown-item command="2">2小时</el-dropdown-item>
<el-dropdown-item command="4">4小时</el-dropdown-item>
<el-dropdown-item command="6">6小时</el-dropdown-item>
<el-dropdown-item command="8">8小时</el-dropdown-item>
<el-dropdown-item command="10">10小时</el-dropdown-item>
<el-dropdown-item command="12">12小时</el-dropdown-item> -->
<el-dropdown-item command="24">24小时</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<i class="el-icon-arrow-right"></i>
</div>
<!-- <span @click="fullScreen" class="fullScreen" v-if="!isFullScreen"><i class="el-icon-full-screen"></i></span> -->
<!-- <span @click="exitFullScreen" class="fullScreen" v-if="isFullScreen"><i class="el-icon-full-screen"></i></span> -->
<!-- 播放时间显示 -->
<!-- <div class="play-time-show">{{nowPlayTime}}</div> -->
<!-- 返回实时按钮 -->
</div>
</div>
<!-- 时间轴 -->
<div class="time-axis">
<!-- <div class="timeline-icon-box" @click="timeLineMove(-1)">
<i class="el-icon-arrow-left"></i>
</div> -->
<div class="timeline-canvas-box">
<TimeLineCanvas id="timeline-canvas" ref="time_line" @click="clickCanvas" @change="changeDate" :markTimeArr="markTime" :time-range="timeRange" :isAutoPlay="isAutoPlay" :startMeddleTime="startMeddleTime" @mouseMove="mouseMoveDate"/>
</div>
<!-- <div class="timeline-icon-box" @click="timeLineMove(1)">
<i class="el-icon-arrow-right"></i>
</div> -->
</div>
<!-- 日期轴 -->
<div class="date-axis">
......@@ -95,13 +63,11 @@
<script>
import TimeLineCanvas from "./timeline-canvas.vue";
import moment from "moment";
let timeInterval;
export default {
name:'videoTime',
data() {
return {
startTimePickerOptions: {
selectableRange: '00:00:00 - 00:00:01'
},
showDayShow: moment().format('YYYY-MM-DD'),
nowPlayTime: '',
timeAccuracy: '24',
......@@ -125,60 +91,95 @@ export default {
mouseTimeHour:0,
mouseTimeMin:0,
mouseTimeSec:0,
splitPlayTime:[],
}
},
props:['isShowScreenImg','isShowSplit'],
props:['isShowScreenImg','isShowSplit', 'splitNum'],
watch: {
splitNum: {
handler: function(val) {
console.log(val)
this.splitNumChange(val);
},
},
},
components: {
TimeLineCanvas,
},
mounted() {
let that = this
// window.addEventListener('resize', function () {
// if (!that.isFullScreenFun()) {
// // 非全屏状态
// //业务逻辑
// that.exitFullScreen()
// }
// });
window.addEventListener('keydown', this.timeInputKeyCode)
this.timeRange = [moment().format('YYYY-MM-DD 00:00:00'), moment().format('YYYY-MM-DD 23:59:59')]
// this.markTime = [{
// beginTime: moment().format('YYYY-MM-DD 00:00:00'),
// endTime: moment().format('YYYY-MM-DD HH:mm:ss'),
// bgColor: "rgba(255,153,0,0.9)",
// text: "",
// }]
this.startTimePickerOptions.selectableRange = '00:00:00 - ' + moment().format('HH:mm:ss')
this.startTime = moment().format('HH:mm:ss')
this.mouseTimeHour = moment().format('HH')
this.mouseTimeMin = moment().format('mm')
this.mouseTimeSec = moment().format('ss')
this.nowPlayTime = moment(this.startTime).format('HH:mm:ss')
this.mouseMoveTime = moment(this.startTime).format('HH:mm:ss')
this.initTimeLine()
this.startMeddleTime = moment().format('YYYY-MM-DD HH:mm:ss')
this.initDay()
this.regularlyUpdateTime()
},
beforeDestroy() {
// window.removeEventListener("resize", this.isFullScreenFun, true);
window.removeEventListener("keydown", this.timeInputKeyCode, true);
this.stopPlay()
if(timeInterval) {
clearInterval(timeInterval)
}
},
methods: {
// 选中播放窗口改变
splitNumChange(val) {
let newPlayTime = this.splitPlayTime[val]&&this.splitPlayTime[val].time?this.splitPlayTime[val].time:'';
if(newPlayTime) {
console.log(newPlayTime)
this.isNoBack = newPlayTime == moment().format('YYYY-MM-DD HH:mm:ss')
this.timeRange = [moment(newPlayTime).format('YYYY-MM-DD 00:00:00'), moment(newPlayTime).format('YYYY-MM-DD 23:59:59')]
this.markTime = [{
beginTime: moment().format('YYYY-MM-DD 00:00:00'),
endTime: moment().format('YYYY-MM-DD HH:mm:ss'),
bgColor: "rgba(255,153,0,0.9)",
text: "",
}]
this.startTime = moment(newPlayTime).format('HH:mm:ss')
this.mouseTimeHour = moment(newPlayTime).format('HH')
this.mouseTimeMin = moment(newPlayTime).format('mm')
this.mouseTimeSec = moment(newPlayTime).format('ss')
this.showDayShow = moment(newPlayTime).format('YYYY-MM-DD')
this.startMeddleTime = newPlayTime
this.daySubtractNum = this.splitPlayTime[val].num
this.initDay()
this.$refs.time_line.play(newPlayTime);
} else {
}
},
// 定时更新播放时间
regularlyUpdateTime() {
timeInterval = setInterval(()=>{
if(this.splitPlayTime[0]) {
this.splitPlayTime[0].time = moment(this.splitPlayTime[0].time).add(1*this.splitPlayTime[0].speed,'seconds').format('YYYY-MM-DD HH:mm:ss');
// console.log(this.splitPlayTime[0].time)
}
if(this.splitPlayTime[1]) {
this.splitPlayTime[1].time = moment(this.splitPlayTime[1].time).add(1*this.splitPlayTime[1].speed,'seconds').format('YYYY-MM-DD HH:mm:ss');
}
if(this.splitPlayTime[2]) {
this.splitPlayTime[2].time = moment(this.splitPlayTime[2].time).add(1*this.splitPlayTime[2].speed,'seconds').format('YYYY-MM-DD HH:mm:ss');
}
if(this.splitPlayTime[3]) {
this.splitPlayTime[3].time = moment(this.splitPlayTime[3].time).add(1*this.splitPlayTime[3].speed,'seconds').format('YYYY-MM-DD HH:mm:ss');
}
},1000)
},
// 时间输入回车事件
timeInputKeyCode(e) {
if (e.keyCode === 13&&this.mouseMoveTimeFocus) {
this.mouseTimeBtnClick()
}
},
initTimeLine() {
this.startMeddleTime = moment().format('YYYY-MM-DD HH:mm:ss')
},
startPlay() {
if(this.isAutoPlay) {
this.stopPlay()
}
this.isNoBack = true
this.timeRange = [moment().format('YYYY-MM-DD 00:00:00'), moment().format('YYYY-MM-DD 23:59:59')]
this.markTime = [{
......@@ -187,7 +188,6 @@ export default {
bgColor: "rgba(255,153,0,0.9)",
text: "",
}]
this.startTimePickerOptions.selectableRange = '00:00:00 - ' + moment().format('HH:mm:ss')
this.startTime = moment().format('HH:mm:ss')
this.mouseTimeHour = moment().format('HH')
this.mouseTimeMin = moment().format('mm')
......@@ -195,27 +195,36 @@ export default {
this.showDayShow = moment().format('YYYY-MM-DD')
this.startMeddleTime = moment().format('YYYY-MM-DD HH:mm:ss')
this.daySubtractNum = 0
this.splitPlayTime[this.splitNum] = {
time:this.startMeddleTime,
num:0,
speed:1,
}
this.initDay()
this.$refs.time_line.play(moment().format('YYYY-MM-DD HH:mm:ss'));
this.isAutoPlay = true
},
stopPlay() {
console.log(1)
this.isAutoPlay = false
this.isNoBack = true
this.markTime = []
this.timeRange = [moment().format('YYYY-MM-DD 00:00:00'), moment().format('YYYY-MM-DD 23:59:59')]
this.startTime = moment().format('HH:mm:ss')
this.mouseTimeHour = moment().format('HH')
this.mouseTimeMin = moment().format('mm')
this.mouseTimeSec = moment().format('ss')
this.showDayShow = moment().format('YYYY-MM-DD')
this.startMeddleTime = moment().format('YYYY-MM-DD HH:mm:ss')
this.daySubtractNum = 0
if(this.$refs.time_line) {
this.$refs.time_line.resetCanvas();
stopPlay(num) {
if(num>=0) {
this.splitPlayTime[num] = null
} else {
this.isAutoPlay = false
this.isNoBack = true
this.markTime = []
this.timeRange = [moment().format('YYYY-MM-DD 00:00:00'), moment().format('YYYY-MM-DD 23:59:59')]
this.startTime = moment().format('HH:mm:ss')
this.mouseTimeHour = moment().format('HH')
this.mouseTimeMin = moment().format('mm')
this.mouseTimeSec = moment().format('ss')
this.showDayShow = moment().format('YYYY-MM-DD')
this.startMeddleTime = moment().format('YYYY-MM-DD HH:mm:ss')
this.daySubtractNum = 0
this.splitPlayTime = [null,null,null,null]
if(this.$refs.time_line) {
this.$refs.time_line.resetCanvas();
}
this.$forceUpdate()
}
this.$forceUpdate()
},
showDayChange(val) {
this.showDayShow = val
......@@ -225,7 +234,6 @@ export default {
this.mouseTimeHour = moment().format('HH')
this.mouseTimeMin = moment().format('mm')
this.mouseTimeSec = moment().format('ss')
this.startTimePickerOptions.selectableRange = '00:00:00 - ' + moment().format('HH:mm:ss')
this.markTime = [{
beginTime: moment().format('YYYY-MM-DD 00:00:00'),
endTime: moment().format('YYYY-MM-DD HH:mm:ss'),
......@@ -234,7 +242,6 @@ export default {
}]
} else {
this.isNoBack = false
this.startTimePickerOptions.selectableRange = '00:00:00 - 23:59:59'
this.markTime = [{
beginTime: val + ' 00:00:00',
endTime: val + ' 23:59:59',
......@@ -243,6 +250,7 @@ export default {
}]
}
this.startMeddleTime = moment(val + ' ' + this.startTime).format('YYYY-MM-DD HH:mm:ss')
this.splitPlayTime[this.splitNum].time = this.startMeddleTime
this.$emit('videoTimeChange',this.startMeddleTime)
if(this.timeAccuracy == '24') {
this.timeRange = [val + ' 00:00:00', val + ' 23:59:59']
......@@ -254,34 +262,16 @@ export default {
this.timeRange = [startTime, endTime]
}
this.nowPlayTime = moment(this.startMeddleTime).format('HH:mm:ss')
},
// 开始播放时间改变
startTimeChange(val) {
this.startTime = val
this.startMeddleTime = moment(this.showDayShow + ' ' + val).format('YYYY-MM-DD HH:mm:ss')
this.splitPlayTime[this.splitNum].time = this.startMeddleTime
this.$emit('videoTimeChange',this.startMeddleTime)
this.nowPlayTime = moment(val).format('HH:mm:ss')
this.isNoBack = this.startMeddleTime == moment().format('YYYY-MM-DD HH:mm:ss')
},
// 时间轴点击
// 时间精度改变
timeAccuracyChange(val) {
// console.log(val)
this.timeAccuracy = val
this.$refs.time_line.mousewheelBtn(val)
if(this.timeAccuracy == '24') {
this.timeRange = [this.showDayShow + ' 00:00:00', this.showDayShow + ' 23:59:59']
} else {
let startTime = moment(this.startMeddleTime).subtract((this.timeAccuracy/2), "hours").format('YYYY-MM-DD HH:mm:ss')
let endTime = moment(this.startMeddleTime).add((this.timeAccuracy/2), "hours").format('YYYY-MM-DD HH:mm:ss')
startTime = moment(startTime).format('YYYY-MM-DD') != this.showDayShow?this.showDayShow + ' 00:00:00':startTime;
endTime = moment(endTime).format('YYYY-MM-DD') != this.showDayShow?this.showDayShow + ' 23:59:59':endTime;
this.timeRange = [startTime, endTime]
}
},
// 分屏改变
splitScreenClick(val) {
this.splitScreen = val
......@@ -291,10 +281,10 @@ export default {
mouseTimeFocus() {
this.mouseMoveTimeFocus = true
},
// 返回实时
backRealTime() {
this.daySubtractNum = 0
this.splitPlayTime[this.splitNum].num = 0
this.initDay()
this.startTime = moment().format('HH:mm:ss')
this.mouseTimeHour = moment().format('HH')
......@@ -302,19 +292,17 @@ export default {
this.mouseTimeSec = moment().format('ss')
this.showDayChange(moment().format('YYYY-MM-DD'))
},
// 时间轴方法
clickCanvas(date) {
// console.log(date);
this.startTime = moment(date).format('HH:mm:ss')
this.mouseTimeHour = moment(date).format('HH')
this.mouseTimeMin = moment(date).format('mm')
this.mouseTimeSec = moment(date).format('ss')
this.isNoBack = moment(date).format('YYYY-MM-DD HH:mm:ss') == moment().format('YYYY-MM-DD HH:mm:ss')
this.splitPlayTime[this.splitNum].time = moment(date).format('YYYY-MM-DD HH:mm:ss')
this.$emit('videoTimeChange',moment(date).format('YYYY-MM-DD HH:mm:ss'))
},
changeDate(date, status) {
// console.log("选择时间：" + date + " 播放状态：" + status);
this.nowPlayTime = moment(date).format('HH:mm:ss')
if(!this.isMouseMove&&!this.mouseMoveTimeFocus) {
this.mouseMoveTime = this.nowPlayTime
......@@ -323,9 +311,7 @@ export default {
this.mouseTimeSec = moment(date).format('ss')
this.$forceUpdate()
}
// console.log(this.nowPlayTime)
this.$emit('videoTimeSync',moment(date).format('YYYY-MM-DD HH:mm:ss'))
if (moment(date).format('YYYY-MM-DD') == moment().format('YYYY-MM-DD')) {
this.markTime = [{
beginTime: moment().format('YYYY-MM-DD 00:00:00'),
......@@ -345,7 +331,6 @@ export default {
this.mouseTimeMin = moment(date).format('mm')
this.mouseTimeSec = moment(date).format('ss')
}
} else {
this.isMouseMove = false
this.mouseMoveTime = this.nowPlayTime
......@@ -358,15 +343,8 @@ export default {
}
this.$forceUpdate()
},
// 时间线左右点击
timeLineMove(val) {
let width = document.getElementById('timeline-canvas').clientWidth
this.$refs.time_line.mouseDownMoveBtn(val*width/4)
},
// 日期轴方法
initDay() {
console.log(document.getElementsByClassName('date-axis'))
let allWidth = document.getElementsByClassName('date-axis')[0].clientWidth
let canNum = ((allWidth - 20) / 46) - 3
let startTime = new Date(moment().subtract(this.daySubtractNum*10+canNum, "days").format('YYYY-MM-DD HH:mm:ss')).getTime()
......@@ -387,7 +365,6 @@ export default {
label:label,
value:moment(oneDate).format('YYYY-MM-DD')
})
}
this.dayList = datList
},
......@@ -395,45 +372,19 @@ export default {
dayLineMove(val) {
if(val > 0||(this.daySubtractNum>0&&val < 0)) {
this.daySubtractNum = this.daySubtractNum+val
this.splitPlayTime[this.splitNum].num = this.daySubtractNum*1
this.initDay()
}
},
// 原有操作
exitFullScreen(){
this.isFullScreen = false
this.$emit('allVideoExitFullScreen')
},
fullScreen(val){
this.isFullScreen = true
this.$emit('allVideoFullScreen')
},
isFullScreenFun() {
return !!(document.webkitIsFullScreen || this.fullele());
},
fullele() {
return (
document.fullscreenElement ||
document.webkitFullscreenElement ||
document.msFullscreenElement ||
document.mozFullScreenElement ||
null
);
},
// 时间输入框控制
mouseTimeHourChange(val) {
// console.log(val)
this.mouseTimeHour = (!isNaN(val) && val < 24 && val>=0)?val<10?'0' + (val*1):val:'00';
},
mouseTimeMinChange(val) {
// console.log(val)
this.mouseTimeMin = (!isNaN(val) && val < 60 && val>=0)?val<10?'0' + (val*1):val:'00';
},
mouseTimeSecChange(val) {
// console.log(val)
this.mouseTimeSec = (!isNaN(val) && val < 60 && val>=0)?val<10?'0' + (val*1):val:'00';
// console.log(val)
},
mouseTimeBtnClick() {
// console.log('this.mouseTimeMin',this.mouseTimeMin)
......
h5/src/views/pc/videoTimeold.vue 0 → 100644
<template>
<div>
<div class="time-page">
<!-- 操作区 -->
<div class="time-operation-module">
<!-- 左侧操作栏 -->
<div class="operation-module-left">
</div>
<div v-if="isAutoPlay&&!isNoBack" class="operation-module-center">
<div class="time-input-box">
<div class="time-input-list">
<el-input ref="mouseTimeHour" v-model="mouseTimeHour" @change="mouseTimeHourChange" size="small" @focus="mouseTimeFocus"/><span class="time-input-line">:</span><el-input ref="mouseTimeMin" v-model="mouseTimeMin" @change="mouseTimeMinChange" size="small" @focus="mouseTimeFocus"/><span class="time-input-line">:</span><el-input ref="mouseTimeSec" v-model="mouseTimeSec" @change="mouseTimeSecChange" size="small" @focus="mouseTimeFocus"/>
</div>
<i class="el-icon-search time-input-btn" @click="mouseTimeBtnClick"></i>
</div>
<el-button class="go-back-realtime-btn" size="mini" type="primary" @click="backRealTime">返回实时</el-button>
</div>
<!-- 右侧操作栏 -->
<div class="operation-module-right">
<!-- 分屏控制 -->
<div class="split-screen-control" v-if="isShowSplit">
<i class="el-icon-arrow-left"></i>
<el-dropdown size="mini" trigger="click" placement="top" @command="splitScreenClick">
<span class="split-screen-text">
<img v-if="splitScreen==1" class="split-screen-img" src="./split/split1.png" alt="">
<img v-if="splitScreen==4" class="split-screen-img" src="./split/split4.png" alt="">
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item :command="1"><img class="split-screen-img" src="./split/split1_blank.png" alt=""></el-dropdown-item>
<el-dropdown-item :command="4"><img class="split-screen-img" src="./split/split4_blank.png" alt=""></el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<i class="el-icon-arrow-right"></i>
</div>
<!-- 时间轴精度选择 -->
<div class="time-line-accuracy" v-if="false">
<i class="el-icon-arrow-left"></i>
<el-dropdown trigger="click" placement="top" @command="timeAccuracyChange">
<span class="time-accuracy-text">
{{timeAccuracy}}小时
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="24">24小时</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<i class="el-icon-arrow-right"></i>
</div>
<!-- <span @click="fullScreen" class="fullScreen" v-if="!isFullScreen"><i class="el-icon-full-screen"></i></span> -->
<!-- <span @click="exitFullScreen" class="fullScreen" v-if="isFullScreen"><i class="el-icon-full-screen"></i></span> -->
</div>
</div>
<!-- 时间轴 -->
<div class="time-axis">
<!-- <div class="timeline-icon-box" @click="timeLineMove(-1)">
<i class="el-icon-arrow-left"></i>
</div> -->
<div class="timeline-canvas-box">
<TimeLineCanvas id="timeline-canvas" ref="time_line" @click="clickCanvas" @change="changeDate" :markTimeArr="markTime" :time-range="timeRange" :isAutoPlay="isAutoPlay" :startMeddleTime="startMeddleTime" @mouseMove="mouseMoveDate"/>
</div>
<!-- <div class="timeline-icon-box" @click="timeLineMove(1)">
<i class="el-icon-arrow-right"></i>
</div> -->
</div>
<!-- 日期轴 -->
<div class="date-axis">
<div class="dayline-icon-box" @click="dayLineMove(1)">
<i class="el-icon-arrow-left"></i>
</div>
<div class="dayline-list-box">
<div class="dayline-list-one" v-for="(item,index) in dayList" :key="index" @click="showDayChange(item.value)" :class="[showDayShow==item.value?'dayline-list-one-select':'']">
{{item.label}}
</div>
</div>
<div v-if="daySubtractNum > 0" class="dayline-icon-box" @click="dayLineMove(-1)">
<i class="el-icon-arrow-right"></i>
</div>
<div v-else class="dayline-icon-box"></div>
</div>
<!-- 时间日期蒙版 -->
<div class="timeline-canvas-bg" v-if="!isAutoPlay"></div>
</div>
</div>
</template>
<script>
import TimeLineCanvas from "./timeline-canvas.vue";
import moment from "moment";
export default {
name:'videoTime',
data() {
return {
startTimePickerOptions: {
selectableRange: '00:00:00 - 00:00:01'
},
showDayShow: moment().format('YYYY-MM-DD'),
nowPlayTime: '',
timeAccuracy: '24',
splitScreen: 1,
startTime: '',
isAutoPlay: false,
width: "100%",
startMeddleTime: "",
timeRange: [],
markTime: [],
dayList:[],
daySubtractNum: 0,
isNoBack:true,
isFullScreen:false,
mouseMoveTime:'',
isMouseMove:false,
mouseMoveTimeFocus:false,
mouseTimeHour:0,
mouseTimeMin:0,
mouseTimeSec:0,
}
},
props:['isShowScreenImg','isShowSplit'],
components: {
TimeLineCanvas,
},
mounted() {
let that = this
// window.addEventListener('resize', function () {
// if (!that.isFullScreenFun()) {
// // 非全屏状态
// //业务逻辑
// that.exitFullScreen()
// }
// });
window.addEventListener('keydown', this.timeInputKeyCode)
this.timeRange = [moment().format('YYYY-MM-DD 00:00:00'), moment().format('YYYY-MM-DD 23:59:59')]
// this.markTime = [{
// beginTime: moment().format('YYYY-MM-DD 00:00:00'),
// endTime: moment().format('YYYY-MM-DD HH:mm:ss'),
// bgColor: "rgba(255,153,0,0.9)",
// text: "",
// }]
this.startTimePickerOptions.selectableRange = '00:00:00 - ' + moment().format('HH:mm:ss')
this.startTime = moment().format('HH:mm:ss')
this.mouseTimeHour = moment().format('HH')
this.mouseTimeMin = moment().format('mm')
this.mouseTimeSec = moment().format('ss')
this.nowPlayTime = moment(this.startTime).format('HH:mm:ss')
this.mouseMoveTime = moment(this.startTime).format('HH:mm:ss')
this.initTimeLine()
this.initDay()
},
beforeDestroy() {
// window.removeEventListener("resize", this.isFullScreenFun, true);
window.removeEventListener("keydown", this.timeInputKeyCode, true);
this.stopPlay()
},
methods: {
// 时间输入回车事件
timeInputKeyCode(e) {
if (e.keyCode === 13&&this.mouseMoveTimeFocus) {
this.mouseTimeBtnClick()
}
},
initTimeLine() {
this.startMeddleTime = moment().format('YYYY-MM-DD HH:mm:ss')
},
startPlay() {
if(this.isAutoPlay) {
this.stopPlay()
}
this.isNoBack = true
this.timeRange = [moment().format('YYYY-MM-DD 00:00:00'), moment().format('YYYY-MM-DD 23:59:59')]
this.markTime = [{
beginTime: moment().format('YYYY-MM-DD 00:00:00'),
endTime: moment().format('YYYY-MM-DD HH:mm:ss'),
bgColor: "rgba(255,153,0,0.9)",
text: "",
}]
this.startTimePickerOptions.selectableRange = '00:00:00 - ' + moment().format('HH:mm:ss')
this.startTime = moment().format('HH:mm:ss')
this.mouseTimeHour = moment().format('HH')
this.mouseTimeMin = moment().format('mm')
this.mouseTimeSec = moment().format('ss')
this.showDayShow = moment().format('YYYY-MM-DD')
this.startMeddleTime = moment().format('YYYY-MM-DD HH:mm:ss')
this.daySubtractNum = 0
this.initDay()
this.$refs.time_line.play(moment().format('YYYY-MM-DD HH:mm:ss'));
this.isAutoPlay = true
},
stopPlay() {
console.log(1)
this.isAutoPlay = false
this.isNoBack = true
this.markTime = []
this.timeRange = [moment().format('YYYY-MM-DD 00:00:00'), moment().format('YYYY-MM-DD 23:59:59')]
this.startTime = moment().format('HH:mm:ss')
this.mouseTimeHour = moment().format('HH')
this.mouseTimeMin = moment().format('mm')
this.mouseTimeSec = moment().format('ss')
this.showDayShow = moment().format('YYYY-MM-DD')
this.startMeddleTime = moment().format('YYYY-MM-DD HH:mm:ss')
this.daySubtractNum = 0
if(this.$refs.time_line) {
this.$refs.time_line.resetCanvas();
}
this.$forceUpdate()
},
showDayChange(val) {
this.showDayShow = val
if (val == moment().format('YYYY-MM-DD')) {
this.isNoBack = true
this.startTime = moment().format('HH:mm:ss')
this.mouseTimeHour = moment().format('HH')
this.mouseTimeMin = moment().format('mm')
this.mouseTimeSec = moment().format('ss')
this.startTimePickerOptions.selectableRange = '00:00:00 - ' + moment().format('HH:mm:ss')
this.markTime = [{
beginTime: moment().format('YYYY-MM-DD 00:00:00'),
endTime: moment().format('YYYY-MM-DD HH:mm:ss'),
bgColor: "rgba(255,153,0,0.9)",
text: "",
}]
} else {
this.isNoBack = false
this.startTimePickerOptions.selectableRange = '00:00:00 - 23:59:59'
this.markTime = [{
beginTime: val + ' 00:00:00',
endTime: val + ' 23:59:59',
bgColor: "rgba(255,153,0,0.9)",
text: "",
}]
}
this.startMeddleTime = moment(val + ' ' + this.startTime).format('YYYY-MM-DD HH:mm:ss')
this.$emit('videoTimeChange',this.startMeddleTime)
if(this.timeAccuracy == '24') {
this.timeRange = [val + ' 00:00:00', val + ' 23:59:59']
} else {
let startTime = moment(this.startMeddleTime).subtract((this.timeAccuracy/2), "hours").format('YYYY-MM-DD HH:mm:ss')
let endTime = moment(this.startMeddleTime).add((this.timeAccuracy/2), "hours").format('YYYY-MM-DD HH:mm:ss')
startTime = moment(startTime).format('YYYY-MM-DD') != val?val + ' 00:00:00':startTime;
endTime = moment(endTime).format('YYYY-MM-DD') != val?val + ' 23:59:59':endTime;
this.timeRange = [startTime, endTime]
}
this.nowPlayTime = moment(this.startMeddleTime).format('HH:mm:ss')
},
// 开始播放时间改变
startTimeChange(val) {
this.startTime = val
this.startMeddleTime = moment(this.showDayShow + ' ' + val).format('YYYY-MM-DD HH:mm:ss')
this.$emit('videoTimeChange',this.startMeddleTime)
this.nowPlayTime = moment(val).format('HH:mm:ss')
this.isNoBack = this.startMeddleTime == moment().format('YYYY-MM-DD HH:mm:ss')
},
// 时间轴点击
// 时间精度改变
timeAccuracyChange(val) {
// console.log(val)
this.timeAccuracy = val
this.$refs.time_line.mousewheelBtn(val)
if(this.timeAccuracy == '24') {
this.timeRange = [this.showDayShow + ' 00:00:00', this.showDayShow + ' 23:59:59']
} else {
let startTime = moment(this.startMeddleTime).subtract((this.timeAccuracy/2), "hours").format('YYYY-MM-DD HH:mm:ss')
let endTime = moment(this.startMeddleTime).add((this.timeAccuracy/2), "hours").format('YYYY-MM-DD HH:mm:ss')
startTime = moment(startTime).format('YYYY-MM-DD') != this.showDayShow?this.showDayShow + ' 00:00:00':startTime;
endTime = moment(endTime).format('YYYY-MM-DD') != this.showDayShow?this.showDayShow + ' 23:59:59':endTime;
this.timeRange = [startTime, endTime]
}
},
// 分屏改变
splitScreenClick(val) {
this.splitScreen = val
this.$emit('splitScreenChange',val)
},
// 输入框获取焦点
mouseTimeFocus() {
this.mouseMoveTimeFocus = true
},
// 返回实时
backRealTime() {
this.daySubtractNum = 0
this.initDay()
this.startTime = moment().format('HH:mm:ss')
this.mouseTimeHour = moment().format('HH')
this.mouseTimeMin = moment().format('mm')
this.mouseTimeSec = moment().format('ss')
this.showDayChange(moment().format('YYYY-MM-DD'))
},
// 时间轴方法
clickCanvas(date) {
// console.log(date);
this.startTime = moment(date).format('HH:mm:ss')
this.mouseTimeHour = moment(date).format('HH')
this.mouseTimeMin = moment(date).format('mm')
this.mouseTimeSec = moment(date).format('ss')
this.isNoBack = moment(date).format('YYYY-MM-DD HH:mm:ss') == moment().format('YYYY-MM-DD HH:mm:ss')
this.$emit('videoTimeChange',moment(date).format('YYYY-MM-DD HH:mm:ss'))
},
changeDate(date, status) {
// console.log("选择时间：" + date + " 播放状态：" + status);
this.nowPlayTime = moment(date).format('HH:mm:ss')
if(!this.isMouseMove&&!this.mouseMoveTimeFocus) {
this.mouseMoveTime = this.nowPlayTime
this.mouseTimeHour = moment(date).format('HH')
this.mouseTimeMin = moment(date).format('mm')
this.mouseTimeSec = moment(date).format('ss')
this.$forceUpdate()
}
// console.log(this.nowPlayTime)
this.$emit('videoTimeSync',moment(date).format('YYYY-MM-DD HH:mm:ss'))
if (moment(date).format('YYYY-MM-DD') == moment().format('YYYY-MM-DD')) {
this.markTime = [{
beginTime: moment().format('YYYY-MM-DD 00:00:00'),
endTime: moment().format('YYYY-MM-DD HH:mm:ss'),
bgColor: "rgba(255,153,0,0.9)",
text: "",
}]
}
},
// 时间线移动
mouseMoveDate(date) {
if(date) {
this.isMouseMove = true
this.mouseMoveTime = moment(date).format('HH:mm:ss')
if(!this.mouseMoveTimeFocus) {
this.mouseTimeHour = moment(date).format('HH')
this.mouseTimeMin = moment(date).format('mm')
this.mouseTimeSec = moment(date).format('ss')
}
} else {
this.isMouseMove = false
this.mouseMoveTime = this.nowPlayTime
if(!this.mouseMoveTimeFocus) {
let nowPlayTimeArr = this.nowPlayTime.split(':')
this.mouseTimeHour = nowPlayTimeArr[0]
this.mouseTimeMin = nowPlayTimeArr[1]
this.mouseTimeSec = nowPlayTimeArr[2]
}
}
this.$forceUpdate()
},
// 时间线左右点击
timeLineMove(val) {
let width = document.getElementById('timeline-canvas').clientWidth
this.$refs.time_line.mouseDownMoveBtn(val*width/4)
},
// 日期轴方法
initDay() {
console.log(document.getElementsByClassName('date-axis'))
let allWidth = document.getElementsByClassName('date-axis')[0].clientWidth
let canNum = ((allWidth - 20) / 46) - 3
let startTime = new Date(moment().subtract(this.daySubtractNum*10+canNum, "days").format('YYYY-MM-DD HH:mm:ss')).getTime()
let datList = []
for(let i = 1; i < (canNum+1); i++) {
let oneDate = new Date(startTime + i*24*3600*1000)
let label = oneDate.getDate()
if(i==1||oneDate.getDate()*1 == 1||i==canNum) {
label = (oneDate.getMonth()*1 + 1) + '/' + oneDate.getDate()
}
if(moment(oneDate).format('YYYY-MM-DD') == moment().format('YYYY-MM-DD')) {
label = '今天'
}
if(oneDate.getTime() > new Date().getTime()) {
break;
}
datList.push({
label:label,
value:moment(oneDate).format('YYYY-MM-DD')
})
}
this.dayList = datList
},
// 日期左右按钮点击
dayLineMove(val) {
if(val > 0||(this.daySubtractNum>0&&val < 0)) {
this.daySubtractNum = this.daySubtractNum+val
this.initDay()
}
},
// 原有操作
exitFullScreen(){
this.isFullScreen = false
this.$emit('allVideoExitFullScreen')
},
fullScreen(val){
this.isFullScreen = true
this.$emit('allVideoFullScreen')
},
isFullScreenFun() {
return !!(document.webkitIsFullScreen || this.fullele());
},
fullele() {
return (
document.fullscreenElement ||
document.webkitFullscreenElement ||
document.msFullscreenElement ||
document.mozFullScreenElement ||
null
);
},
// 时间输入框控制
mouseTimeHourChange(val) {
// console.log(val)
this.mouseTimeHour = (!isNaN(val) && val < 24 && val>=0)?val<10?'0' + (val*1):val:'00';
},
mouseTimeMinChange(val) {
// console.log(val)
this.mouseTimeMin = (!isNaN(val) && val < 60 && val>=0)?val<10?'0' + (val*1):val:'00';
},
mouseTimeSecChange(val) {
// console.log(val)
this.mouseTimeSec = (!isNaN(val) && val < 60 && val>=0)?val<10?'0' + (val*1):val:'00';
// console.log(val)
},
mouseTimeBtnClick() {
// console.log('this.mouseTimeMin',this.mouseTimeMin)
this.mouseTimeHourChange(this.mouseTimeHour)
this.mouseTimeMinChange(this.mouseTimeMin)
this.mouseTimeSecChange(this.mouseTimeSec)
this.startTimeChange(this.mouseTimeHour + ':' + this.mouseTimeMin + ':' + this.mouseTimeSec)
this.$refs.mouseTimeHour.blur()
this.$refs.mouseTimeMin.blur()
this.$refs.mouseTimeSec.blur()
this.mouseMoveTimeFocus = false
},
}
}
</script>
<style scoped lang="less">
.time-page {
// background: rgba(0, 0, 0, 0.9);
width: 100%;
height: 122px;
position: relative;
.time-operation-module {
padding: 0 10px;
height: 40px;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
top:3px;
.operation-module-left {
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
color: #ffffff;
.lookPic{
// margin-left: 20px;
color: #ffffff;
font-size: 15px;
cursor: pointer;
}
}
.operation-module-center{
position: absolute;
top:0px;
left:0px;
width: 100%;
height: 100%;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
.go-back-realtime-btn {
margin-left: 20px;
}
.time-input-box{
width: 110px;
display: inline-flex;
align-items: center;
height: 26px;
border: 1px solid #dcdcdc;
border-radius: 4px;
color:#fff;
.time-input-list{
width: 85px;
height: 26px;
border-right: 1px solid #dcdcdc;
display: inline-flex;
align-items: center;
justify-content: center;
}
.time-input-btn{
cursor: pointer;
width: 25px;
font-size: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.time-input-line{
height: 26px;
line-height: 26px;
}
/deep/.el-input{
width: 24px;
display: inline-flex;
align-items: center;
}
/deep/.el-input__inner{
padding: 0px!important;
background: transparent!important;
color:#fff!important;
border: 0px!important;
box-shadow: none!important;
text-align: center!important;
}
}
}
.operation-module-right {
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
color: #ffffff;
.fullScreen{
font-size: 16px;
cursor: pointer;
}
.split-screen-control {
display: inline-flex;
height: 100%;
align-items: center;
color: #ffffff;
margin-right: 20px;
.split-screen-text {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
text-align: center;
color: #ffffff;
}
.el-dropdown{
height: 100%;
display: inline-flex;
align-items: center;
cursor: pointer;
}
}
.time-line-accuracy {
height: 100%;
display: inline-flex;
align-items: center;
color: #ffffff;
margin-right: 20px;
.time-accuracy-text {
display: inline-block;
width: 65px;
text-align: center;
color: #ffffff;
}
}
.play-time-show {
font-size: 12px !important;
color: #ffffff;
margin-right: 20px;
}
}
/deep/.el-input {
height: 26px !important;
.el-input__inner {
padding-right: 10px;
}
}
}
.time-axis {
display: flex;
align-items: center;
justify-content: center;
padding: 0 10px;
border-bottom: 1px solid #666666;
.timeline-icon-box {
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.8);
color: #111;
border-radius: 20px;
height: 24px;
width: 24px;
font-size: 16px;
cursor: pointer;
}
.timeline-canvas-box{
width: 100%;
height: 40px;
position: relative;
}
}
.date-axis{
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 10px;
.dayline-icon-box{
display: inline-flex;
align-items: center;
justify-content: center;
color: #fff;
border-radius: 20px;
height: 40px;
width: 40px;
font-size: 24px;
cursor: pointer;
}
.dayline-list-box{
width: calc(100% - 80px)!important;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: space-between;
.dayline-list-one{
height: 40px;
width: 60px;
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0 3px;
cursor: pointer;
&:hover{
background: rgba(255, 255, 255, 0.3);
}
}
.dayline-list-one-select{
background: rgba(255, 255, 255, 0.9)!important;
color: #111!important;
}
}
}
.timeline-canvas-bg{
width: 100%;
height: 83px;
position: absolute;
bottom:0px;
left:0px;
z-index: 10;
}
}
/deep/.el-button--primar:hover{
background-color: rgba(64,118,247,0.7) !important;
border-color: rgba(64,118,247,0.7) !important;
}
/deep/.el-input-group__append{
padding: 0 3px!important;
.el-button{
padding: 0px!important;
margin: 0px!important;
}
}
.split-screen-img{
width: 20px;
height: 20px;
}
</style>
\ No newline at end of file
h5/vionPlayer.zip 0 → 100644
This file is too large to display.
h5/vionPlayer1.zip 0 → 100644
This file is too large to display.
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!