115 lines
4.3 KiB
JavaScript
115 lines
4.3 KiB
JavaScript
|
|
function ciy_chart_farm1_r3(opdata) {
|
|
this.func = ['farm_r3'];
|
|
this.videos = null;
|
|
this.resize = function () {
|
|
$5('.video', opdata.container).each(function(dom){
|
|
$5(this).css('height', this.width*9/16 + 'px');
|
|
});
|
|
}
|
|
this.setdata = function (funame, data) {
|
|
if (!data)
|
|
return;
|
|
if(data.videos.length == 0)
|
|
return;
|
|
this.videos = data.videos;
|
|
idx_auto = 0;
|
|
fillcamera();
|
|
}
|
|
this.distory = function () {
|
|
clearInterval(t_automain);
|
|
}
|
|
|
|
var thos = this;
|
|
|
|
opdata.container.append(`<div class="brimg cehide" style="background: #00000066;border-radius: 0.5em;height: 100%;">
|
|
<div style="pointer-events: none;min-width:180px;padding-top: 0.5em;padding-left:4px;">
|
|
<span style="color:#fffffd;font-weight: bolder;letter-spacing: 2px;padding-left:1em;">视频监控</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: 4px;border-bottom:0.05em solid #64ecf7;"></div>
|
|
</div>
|
|
</div>
|
|
<div id="capture1" style="height:calc(100% - 3em);padding:5px 5px 0 5px;display:flex;flex-wrap: wrap;align-content: space-between;">
|
|
<img class="video videomain" src="/ud/img/nosnapdark.jpg" style="width:100%;"/>
|
|
<div style="width:100%;flex: 1;text-align:center;height: 2em;" class="videotext">暂无快照</div>
|
|
<div style="display:flex;width:100%;flex-wrap: wrap;">
|
|
<img class="video video4 v0" src="/ud/img/nosnapdark.jpg"/>
|
|
<img class="video video4 v1" src="/ud/img/nosnapdark.jpg"/>
|
|
<img class="video video4 v2" src="/ud/img/nosnapdark.jpg"/>
|
|
<img class="video video4 v3" src="/ud/img/nosnapdark.jpg"/>
|
|
</div>
|
|
<div style="display:flex;width:100%;flex-wrap: wrap;">
|
|
<img class="video video4 v4" src="/ud/img/nosnapdark.jpg"/>
|
|
<img class="video video4 v5" src="/ud/img/nosnapdark.jpg"/>
|
|
<img class="video video4 v6" src="/ud/img/nosnapdark.jpg"/>
|
|
<img class="video video4 v7" src="/ud/img/nosnapdark.jpg"/>
|
|
</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.videos[idx])
|
|
showvideo(thos.videos[idx]);
|
|
});
|
|
|
|
setTimeout(() => {
|
|
this.resize();
|
|
}, 400);
|
|
var idx_auto = 0;
|
|
var bstop = false;
|
|
var t_automain = setInterval(function () {
|
|
if(bstop)
|
|
return;
|
|
if(!thos.videos)
|
|
return;
|
|
idx_auto++;
|
|
if(idx_auto >= thos.videos.length)
|
|
idx_auto = 0;
|
|
fillcamera();
|
|
}, 8000);
|
|
function fillcamera(){
|
|
var vlen = thos.videos.length;
|
|
if(vlen == 0)
|
|
return;
|
|
$5('.videomain', opdata.container).hide('', 0.5);
|
|
setTimeout(function () {
|
|
var dat = thos.videos[idx_auto];
|
|
$5('.videomain', opdata.container).attr('src',dat.capture?dat.capture:'/img/nosnapdark.jpg').attr('title',dat.name).attr('data-idx','I'+idx_auto).show('', 0.5);
|
|
}, 500);
|
|
|
|
$5('.videotext', opdata.container).hide('', 0.5);
|
|
setTimeout(function () {
|
|
var dat = thos.videos[idx_auto];
|
|
$5('.videotext', opdata.container).html(dat.name).show('', 0.5);
|
|
}, 500);
|
|
var max = 8;
|
|
if(vlen <= max)
|
|
max = vlen - 1;
|
|
|
|
for (var i=0;i<max;i++) {
|
|
var idx = idx_auto + i + 1;
|
|
if(idx >= vlen)
|
|
idx -= vlen;
|
|
var dat = thos.videos[idx];
|
|
if(dat)
|
|
$5('.v' + i, opdata.container).attr('src',dat.capture?dat.capture:'/img/nosnapdark.jpg').attr('title',dat.name).attr('data-idx','I'+idx);
|
|
}
|
|
}
|
|
|
|
var style = document.createElement("style");
|
|
style.innerHTML = `
|
|
.video4{width:23%;box-sizing: border-box;margin: 1%;}
|
|
|
|
`;
|
|
window.document.head.appendChild(style);
|
|
} |