c5_labsci/web/admin/demo/bs/b64/bank1_r1.js

function ciy_chart_bank1_r1(opdata) {
    this.func = ['bank_r1'];
    this.lastdata = {};
    this.resize = function () {
    }
    this.setdata = function (funame, data) {
        if (!data)
            return;
        for (var if1 in data.bplants) {
            data.bplants[if1].totalhtmoney = 0;
            data.bplants[if1].totalcontract = 0;
            for (var if2 in data.fbcontracts) {
                if (data.fbcontracts[if2].debtorid != data.bplants[if1].id)
                    continue;
                data.bplants[if1].totalhtmoney += parseFloat(data.fbcontracts[if2].htmoney / 1000000.0);
                data.bplants[if1].totalcontract++;
            }
        }
        var cats = [{ min: 0, max: 300 },
        { min: 300, max: 800 },
        { min: 800, max: -1 }
        ];
        var maxhtmoney = 0;
        var maxcontract = 0;
        var maxchs = 0;
        for (var i = 0; i < cats.length; i++) {
            cats[i].htmoney = 0; //贷款总额
            cats[i].totalcontract = 0; //合同数
            cats[i].chs = 0; //场户数
            for (var if1 in data.bplants) {
                if (data.bplants[if1].totalhtmoney <= cats[i].min)
                    continue;
                if (cats[i].max > -1 && data.bplants[if1].totalhtmoney > cats[i].max)
                    continue;
                cats[i].chs++;
                cats[i].htmoney += data.bplants[if1].totalhtmoney;
                cats[i].totalcontract += data.bplants[if1].totalcontract;
            }
            if (maxhtmoney < cats[i].htmoney)
                maxhtmoney = cats[i].htmoney;
            if (maxcontract < cats[i].totalcontract)
                maxcontract = cats[i].totalcontract;
            if (maxchs < cats[i].chs)
                maxchs = cats[i].chs;
        }
        for (var i = 0; i < cats.length; i++) {
            $5('#r' + i + '_c1_num', opdata.container).text(parseInt(cats[i].htmoney).toLocaleString());
            $5('#r' + i + '_c2_num', opdata.container).text(cats[i].totalcontract.toLocaleString());
            $5('#r' + i + '_c3_num', opdata.container).text(cats[i].chs.toLocaleString());
            var wid = cats[i].htmoney * 100 / maxhtmoney;
            $5('#r' + i + '_c1_bar', opdata.container).css('width', (wid > 5 ? wid : 5) + '%');
            var wid = cats[i].totalcontract * 100 / maxcontract;
            $5('#r' + i + '_c2_bar', opdata.container).css('width', (wid > 5 ? wid : 5) + '%');
            var wid = cats[i].chs * 100 / maxchs;
            $5('#r' + i + '_c3_bar', opdata.container).css('width', (wid > 5 ? wid : 5) + '%');
        }
    }
    this.distory = function () {
    }

    opdata.container.append(`<div class="brimg" style="background: #00000011;">
    <div style="position: absolute;background: #00000011;top: -10em;height: 10em;width: 100%;"></div>
        <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="r1" style="height:calc(100% - 20px);z-index:5;padding:10px 20px 0 20px;">
        <table style="width:100%;">
        <tr style="line-height:2em;color:#6dcdee;">
            <td style="width: 7em;"></td>
            <td style="text-align:right;">贷款 <span style="font-size:0.8em;">(万元)</span></td>
            <td style="text-align:right;">合同 <span style="font-size:0.8em;">(份)</span></td>
            <td style="text-align:right;">单位 <span style="font-size:0.8em;">(家)</span></td>
        </tr>
        <tr>
            <td class="titleft">300万以内</td>
            <td>
            <div class="datanum" id="r0_c1_num">--</div>
            <div class="databar"><div><div style="background:#00dcff;width:5%;" id="r0_c1_bar"></div></div></div>
            </td>
            <td>
            <div class="datanum" id="r0_c2_num">--</div>
            <div class="databar"><div><div style="background:#0cbb00;width:5%;" id="r0_c2_bar"></div></div></div>
            </td>
            <td>
            <div class="datanum" id="r0_c3_num">--</div>
            <div class="databar"><div><div style="background:#ffbc00;width:5%;" id="r0_c3_bar"></div></div></div>
            </td>
        </tr>
        <tr>
            <td class="titleft">300-800万</td>
            <td>
            <div class="datanum" id="r1_c1_num">--</div>
            <div class="databar"><div><div style="background:#00dcff;width:5%;" id="r1_c1_bar"></div></div></div>
            </td>
            <td>
            <div class="datanum" id="r1_c2_num">--</div>
            <div class="databar"><div><div style="background:#0cbb00;width:5%;" id="r1_c2_bar"></div></div></div>
            </td>
            <td>
            <div class="datanum" id="r1_c3_num">--</div>
            <div class="databar"><div><div style="background:#ffbc00;width:5%;" id="r1_c3_bar"></div></div></div>
            </td>
        </tr>
        <tr>
            <td class="titleft">800万以上</td>
            <td>
            <div class="datanum" id="r2_c1_num">--</div>
            <div class="databar"><div><div style="background:#00dcff;width:5%;" id="r2_c1_bar"></div></div></div>
            </td>
            <td>
            <div class="datanum" id="r2_c2_num">--</div>
            <div class="databar"><div><div style="background:#0cbb00;width:5%;" id="r2_c2_bar"></div></div></div>
            </td>
            <td>
            <div class="datanum" id="r2_c3_num">--</div>
            <div class="databar"><div><div style="background:#ffbc00;width:5%;" id="r2_c3_bar"></div></div></div>
            </td>
        </tr>
        </table>
        
        </div>
    </div>`);


    var style = document.createElement("style");
    style.innerHTML = `
    #r1 td{padding:0.5em;}
    #r1 td.titleft{line-height: 3em;text-align:right;padding-right:1em;color:#6dcdee;}
    #r1 .datanum{text-align:right;font-family: eng01;font-size:2em;}
    #r1 .databar{text-align:right;}
    #r1 .databar>div{
        width: 100%;
        height: 5px;
        background: #ffffff14;
        border-radius: 3px;
        display: flex;
        justify-content: flex-end;
    }
    #r1 .databar>div>div{
        height: 5px;
        background: #00dcff;
        border-radius: 3px;
        transition: 0.5s;
    }
    `;
    window.document.head.appendChild(style);

}