进度图和表格最下边加一行总进度

1.实现效果

2.代码解析
接口里写入


进度图的方法调用，重写一遍

3.源码

//加工分客户情况数据
    function getJGTotal() {
        doAjax(           "https://www.fastmock.site/mock/86f9a3150cfa315ea5fb95ddc2c297a8/data/datac/dcViewProc/getProcTotalForCust2",
            "POST",
            "",
            function(data) {

                /**
                 * 进度条
                 * */
                var barDom; //加工条形图的个数 第几个条形图
                var barDatas = []; //加工条形图的数据

                /**
                 * 表格
                 * */
                var tableJGDom; //表格的行数 第几个条形图
                var tableJGDatas = []; //表格的数据
                //表格数据记录 担
                tableJGDatas.push({
                    planWeightJG: '计划加工(担)', //计划加工
                    feedingWeightJG: '已加工(担)', //已加工
                });

                var sumPlanWeightJG=0,sumFeedingWeightJG=0;
                for (var n = 0; n < data.length; n++) {
                    //条形图数据记录 
                    barDatas.push({
                        custJGName: data[n]['custName'],
                  custCd: data[n]['custCd'],
                        custJGPlanWeight: data[n]['planWeight'],
                        feedingWeight: data[n]['feedingWeight']
                    });

                    barDom = getProdObj(n, barDatas);
                    $("#custProdBar").append(barDom);

                    // 表格数据记录 担
                    tableJGDatas.push({
                        planWeightJG: data[n]['planWeight'],
                        feedingWeightJG: data[n]['feedingWeight'],
                    });

                    //加工总进度
                    sumPlanWeightJG = sumPlanWeightJG + data[n]['planWeight'];
                    sumFeedingWeightJG = sumFeedingWeightJG + data[n]['feedingWeight'];

                    //当n到了最后一个
                    if(n===data.length-1){
                        sumPlanWeightJG = sumPlanWeightJG.toFixed(2);
                        sumFeedingWeightJG = sumFeedingWeightJG.toFixed(2);
                        //进度图 加进 总进度的数据 格式不一样
                        barDom = getProdObjSum(n, sumPlanWeightJG,sumFeedingWeightJG);
                        $("#custProdBar").append(barDom);
                        //表格加进 总进度的数据 格式一样
                        tableJGDatas.push({
                            planWeightJG: sumPlanWeightJG,
                            feedingWeightJG: sumFeedingWeightJG,
                        });
                    }
                }

                for (var m = 0; m < tableJGDatas.length; m++) {
                    tableJGDom = getJGTableObj(m, tableJGDatas);
                    $("#custJGTable").append(tableJGDom);
                }
           }
      );
    /**
     * 进度图
     * */
    function getProdObj(index, data) {
        var custJGPercent = (data[index].feedingWeight) / (data[index].custJGPlanWeight) * 100;
        if (custJGPercent >= 99.99) {
            custJGPercent = 100;
        } else if (0 < custJGPercent < 99.99) {
            custJGPercent = custJGPercent;
        }

        GreenBarHtml = index % 2 == 0 ? '<div class="c-progress c-progress-process ">' : '<div class="c-progress c-progress-success">';

        var tabProdStr =
            '<li class="li-chart1">' +
            '<div class="c-zyjd-item">' +
            '<div class="c-progress-container">' +
            ' <div class="c-progress-header c-color-primary">' +
            '<div class="c-progress-title"style="cursor:pointer" onclick="getJGFact(\''+data[index].custCd+'\')" >' + data[index].custJGName + '</div>' +
            '<div class="c-progress-header-right">' + custJGPercent.toFixed(0) + '%</div>' +
            '<div class="c-progress ">'+
            '<div class="c-progress-bar"style="width:' + custJGPercent.toFixed(2) + '%;">' +
            '</div>' +
            '</div>' +
            '</div>' +
            '</div>' +
            '</div>' +
            '</li>';
        return $(tabProdStr);
    }
    /**
     * 总进度图
     * */
    function getProdObjSum(dataLength, sumPlanWeightJG, sumFeedingWeightJG) {
        var custJGPercent = (sumFeedingWeightJG / sumPlanWeightJG) * 100;
        if (custJGPercent >= 99.99) {
            custJGPercent = 100;
        } else if (0 < custJGPercent < 99.99) {
            custJGPercent = custJGPercent;
        }

        GreenBarHtml = dataLength % 2 == 0 ? '<div class="c-progress c-progress-process ">' : '<div class="c-progress c-progress-success">';

        var tabProdStr =
            '<li class="li-chart1">' +
            '<div class="c-zyjd-item">' +
            '<div class="c-progress-container">' +
            ' <div class="c-progress-header c-color-primary">' +
            '<div class="c-progress-title"style="cursor:pointer">总进度</div>' +
            '<div class="c-progress-header-right">' + custJGPercent.toFixed(0) + '%</div>' +
            '<div class="c-progress ">'+
            '<div class="c-progress-bar"style="width:' + custJGPercent.toFixed(2) + '%;">' +
            '</div>' +
            '</div>' +
            '</div>' +
            '</div>' +
            '</div>' +
            '</li>';
        return $(tabProdStr);
    }


    /**
     * 表格
     * */
    function getJGTableObj(index, data) {
        tabStartRowHtml = index % 2 == 0 ? '<td style="width:50%">' : '<th style="width:50%">';
        tabEndRowHtml = index % 2 == 0 ? '</td style="width: 50%">' : '</th style="width:50%">';

        var tableJGStr =
            '<li>' +
            '<table class="c-table">' +
            '<tbody>' +
            '<tr>' +
            tabStartRowHtml + data[index].planWeightJG + tabEndRowHtml +
            tabStartRowHtml + data[index].feedingWeightJG + tabEndRowHtml +
            '</tr>' +
            '</tbody>' +
            '</table>' +
            '</li>'
        return $(tableJGStr);
    }