121 lines
4.3 KiB
JavaScript
121 lines
4.3 KiB
JavaScript
|
|
function ciy_chart_bank1_r2(opdata) {
|
|
this.func = ['bank_r2'];
|
|
this.lastdata = {};
|
|
this.resize = function () {
|
|
}
|
|
this.setdata = function (funame, data) {
|
|
if (!data)
|
|
return;
|
|
this.lastdata[funame] = data;
|
|
var vlen = data.videos.length;
|
|
if (vlen == 0)
|
|
return;
|
|
idx_auto = 0;
|
|
var dat = data.videos[idx_auto];
|
|
$5('.videomain', opdata.container).attr('src', dat.capture).attr('title', dat.name).attr('data-idx', 'I' + idx_auto);
|
|
for (var i = 0; i < 10; i++) {
|
|
var v = Math.round(Math.random() * vlen);
|
|
if (v == idx_auto)
|
|
v = Math.round(Math.random() * vlen);
|
|
var dat = data.videos[v];
|
|
if (dat)
|
|
$5('.v' + i, opdata.container).attr('src', dat.capture).attr('title', dat.name).attr('data-idx', 'I' + v);
|
|
}
|
|
}
|
|
this.distory = function () {
|
|
clearInterval(t_automain);
|
|
clearInterval(t_autohight);
|
|
}
|
|
|
|
var thos = this;
|
|
|
|
opdata.container.append(`<div class="brimg" style="background: #00000011;">
|
|
<div style="pointer-events: none;min-width:180px;padding-left: 1.5em;">
|
|
<span style="color:#fffffd;font-weight: bolder;letter-spacing: 2px;">贷款单位视频监控</span>
|
|
<div style="position: relative;margin-top: 0.6em;">
|
|
<img src="/ud/bigscreen/tit/06.png" style="height:0.3em;display: block;">
|
|
<div style="position: absolute;left: 12em;right: 1.5em;border-bottom:0.05em solid #64ecf7;"></div>
|
|
</div>
|
|
</div>
|
|
<div id="capture1" style="height:calc(100% - 32px);display:flex;padding:5px 20px 0 20px;">
|
|
<div style="width:15%;">
|
|
<img class="v0 videos"/>
|
|
<img class="v1 videos"/>
|
|
<img class="v2 videos"/>
|
|
<img class="v3 videos"/>
|
|
<img class="v4 videos end"/>
|
|
</div>
|
|
<div style="width:70%;padding:0 5px;">
|
|
<img class="videomain" src="/ud/img/nosnapdark.jpg" style="width:100%;height:100%;"/>
|
|
</div>
|
|
<div style="width:15%;">
|
|
<img class="v5 videos"/>
|
|
<img class="v6 videos"/>
|
|
<img class="v7 videos"/>
|
|
<img class="v8 videos"/>
|
|
<img class="v9 videos end"/>
|
|
</div>
|
|
</div>
|
|
</div>`);
|
|
opdata.container.on('mouseenter', function () {
|
|
bstop = true;
|
|
});
|
|
opdata.container.on('mouseleave', function () {
|
|
bstop = false;
|
|
});
|
|
opdata.container.on('click', 'img', function () {
|
|
var idx = $5(this).attr('data-idx');
|
|
if (!idx)
|
|
return;
|
|
idx = parseInt(idx.substr(1));
|
|
if (thos.lastdata['bank_r2'].videos[idx])
|
|
showvideo(thos.lastdata['bank_r2'].videos[idx]);
|
|
});
|
|
|
|
this.resize();
|
|
var idx_auto = 0;
|
|
var bstop = false;
|
|
var t_automain = setInterval(function () {
|
|
if (bstop)
|
|
return;
|
|
if (!thos.lastdata['bank_r2'])
|
|
return;
|
|
var vlen = thos.lastdata['bank_r2'].videos.length;
|
|
if (vlen == 0)
|
|
return;
|
|
idx_auto++;
|
|
if (idx_auto >= vlen)
|
|
idx_auto = 0;
|
|
|
|
var dat = thos.lastdata['bank_r2'].videos[idx_auto];
|
|
$5('.videomain', opdata.container).hide('slide', 500);
|
|
setTimeout(function () {
|
|
$5('.videomain', opdata.container).show('slide', 300).attr('data-idx', 'I' + idx_auto).attr('title', dat.name).attr('src', dat.capture);
|
|
}, 500);
|
|
}, 9000);
|
|
var t_autohight = setInterval(function () {
|
|
if (bstop)
|
|
return;
|
|
if (!thos.lastdata['bank_r2'])
|
|
return;
|
|
var vlen = thos.lastdata['bank_r2'].videos.length;
|
|
if (vlen == 0)
|
|
return;
|
|
var i = Math.round(Math.random() * 10);
|
|
var v = Math.round(Math.random() * vlen);
|
|
if (v == idx_auto)
|
|
v = Math.round(Math.random() * vlen);
|
|
var dat = thos.lastdata['bank_r2'].videos[v];
|
|
if (dat)
|
|
$5('.v' + i, opdata.container).attr('data-idx', 'I' + v).attr('title', dat.name).attr('src', dat.capture);
|
|
}, 3600);
|
|
|
|
var style = document.createElement("style");
|
|
style.innerHTML = `
|
|
.videos{width:100%;height:20%;padding-bottom:5px;box-sizing: border-box;}
|
|
.videos.end{padding-bottom:0;}
|
|
|
|
`;
|
|
window.document.head.appendChild(style);
|
|
} |