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);
}