Calculation/app/public/js/financial_summary.js

$(document).ready(function() {
    autoFlashHeight();

    postData('/financial/' + spid + '/summary/load', {}, function (result) {
        console.log(result);
        tenders = result.tenders;
        transferList = result.transferList;
        transferTenderList = result.transferTenderList;
        payList = result.payList;
        summaryObj.setTenderSelect(result.tenders);
        summaryObj.changeHtmlAndCharts(result.tenders, result.transferList, result.transferTenderList, result.payList);
    });

    $('#tender-select').on('changed.bs.select', function (e, clickedIndex, isSelected, previousValue) {
        const vals = $(this).val();
        if (vals.length === 0) {
            $('#tender-select').selectpicker('val', '0');
        } else if (clickedIndex !== 0 && vals.length > 1 && _.includes(vals, '0')) {
            $('#tender-select').selectpicker('val', _.without(vals, '0'));
        } else if (clickedIndex === 0 && isSelected) {
            $('#tender-select').selectpicker('val', '0');
        }
    });

    $('#search-btn').click(function () {
        const tenderSelects = $('#tender-select').val().map(function (item, index) {
            return parseInt(item);
        });
        // 判断是单还是多个标段
        const is_single = tenderSelects.length === 1 && tenderSelects[0] !== 0;
        const is_all = tenderSelects.length === 1 && tenderSelects[0] === 0;
        const startMonth = $('#start-month').val();
        const endMonth = $('#end-month').val();
        const condition = {};
        let newTransferList = _.cloneDeep(transferList);
        let newTransferTenderList = _.cloneDeep(transferTenderList);
        let newPayList = _.cloneDeep(payList);
        if (startMonth !== '' && endMonth !== '') {
            // 判断输入合法和endMonth大于startMonth
            if (!/^\d{4}-\d{2}$/.test(startMonth) || !/^\d{4}-\d{2}$/.test(endMonth)) {
                toastr.warning('请输入正确的日期格式');
                return;
            }
            if (startMonth > endMonth) {
                toastr.warning('结束日期不能小于开始日期');
                return;
            }
            newTransferList = _.filter(newTransferList, function (item) {
                return item.t_time >= startMonth && item.t_time <= endMonth;
            });
            newTransferTenderList = _.filter(newTransferTenderList, function (item) {
                return _.includes(_.map(newTransferList, 'id'), item.trid);
            });
            newPayList = _.filter(newPayList, function (item) {
                const thisMonth = moment(item.create_time).format('YYYY-MM');
                return thisMonth >= startMonth && thisMonth <= endMonth;
            });
        } else if (startMonth !== '' || endMonth !== '') {
            toastr.warning('请选择开始和结束日期查询');
            return;
        }
        newTransferTenderList = !is_all ? _.filter(newTransferTenderList, function (item) { return _.includes(tenderSelects, item.tid); }) : newTransferTenderList;
        newPayList = !is_all ? _.filter(newPayList, function (item) { return _.includes(tenderSelects, item.tid); }) : newPayList;
        const newTenders = !is_all ? _.filter(tenders, function (item) { return _.includes(tenderSelects, item.id); }) : tenders;
        summaryObj.changeHtmlAndCharts(newTenders, newTransferList, newTransferTenderList, newPayList, tenderSelects);
    });

    const summaryObj = {
        setTenderSelect: function (tenders) {
            let tenderSelectHtml = '<option value="0" selected>全部</option>';
            for (const tender of tenders) {
                tenderSelectHtml += `<option value="${tender.id}">${tender.name}</option>`;
            }
            $('#tender-select').html(tenderSelectHtml);
            $('#tender-select').selectpicker();
        },
        changeHtmlAndCharts: function (tenders, transferList, transferTenderList, payList, tenderSelects = [0]) {
            const transfer_price = tenderSelects !== [0] ? _.map(transferTenderList, 'hb_tp') : _.map(transferList, 'total_price');
            const transfer_sum_price = ZhCalc.sum(transfer_price);
            const pay_price = _.map(payList, 'total_price');
            const pay_sum_price = ZhCalc.sum(pay_price);
            const pend_sum_price = ZhCalc.sub(transfer_sum_price, pay_sum_price);
            const small_expenses_tp = _.map(payList, 'small_expenses_tp');
            const small_expenses_sum_price = ZhCalc.sum(small_expenses_tp);
            // 金额概况
            $('#transfer_price').text(transfer_sum_price.format2Str('#,##0.######'));
            $('#pay_price').text(pay_sum_price.format2Str('#,##0.######'));
            $('#pend_price').text(pend_sum_price.format2Str('#,##0.######'));
            // 支付进度
            const pay_progress = (ZhCalc.div(pay_sum_price, ZhCalc.add(pay_sum_price, pend_sum_price)) * 100).toFixed(0);
            const pend_progress = 100 - pay_progress;
            $('#pay_progress').html(`
               <div class="progress-bar bg-success" style="width: ${pay_progress}%;" data-placement="bottom" data-toggle="tooltip" data-original-title="累计支付：￥${pay_sum_price.format2Str('#,##0.######')}">${pay_progress}%</div>
               <div class="progress-bar bg-gray" style="width: ${pend_progress}%;" data-placement="bottom" data-toggle="tooltip" data-original-title="待支付：￥${pend_sum_price.format2Str('#,##0.######')}">${pend_progress}%</div>`);
            $('[data-toggle="tooltip"]').tooltip();
            // 资金支出明细
            let pay_used_html = '';
            payUsedOption.series[0].data = [];
            for (const used of usedList) {
                const usedPays = _.filter(payList, { used: used });
                if (usedPays.length > 0) {
                    const used_price = _.map(usedPays, 'total_price');
                    const used_sum_price = ZhCalc.sum(used_price)
                    pay_used_html += `<tr class="text-center"><td>${used}</td><td>${used_sum_price.format2Str('#,##0.######')}</td> <td>${(pay_sum_price ? ZhCalc.div(used_sum_price, pay_sum_price) * 100 : 0).toFixed(2)}%</td></tr>`;
                    payUsedOption.series[0].data.push({ value: used_sum_price, name: used });
                }
            }
            pay_used_html += `<tr class="text-center"><td><strong>合计</strong></td><td>${pay_sum_price.format2Str('#,##0.######')}</td> <td></td></tr>`;
            pay_used_html += `<tr class="text-center"><td>其中：小额支出</td><td>${small_expenses_sum_price.format2Str('#,##0.######')}</td><td>${(pay_sum_price ? ZhCalc.div(small_expenses_sum_price, pay_sum_price) * 100 : 0).toFixed(2)}%</td></tr>`;
            $('#pay_used_table').html(pay_used_html);

            // 标段支出概况图表
            tenderOption.xAxis[0].data = _.map(tenders, 'name');
            tenderOption.dataZoom[0].start = 0;
            tenderOption.dataZoom[0].end = computedPosition(tenders.length);
            tenderOption.series[0].data = [];
            tenderOption.series[1].data = [];
            for (const t of tenders) {
                const transferTenders = _.filter(transferTenderList, { tid: t.id });
                const transfer_tender_price = ZhCalc.sum(_.map(transferTenders, 'hb_tp'));
                const payTenders = _.filter(payList, { tid: t.id });
                const pay_tender_price = ZhCalc.sum(_.map(payTenders, 'total_price'));
                tenderOption.series[0].data.push(transfer_tender_price);
                tenderOption.series[1].data.push(pay_tender_price);
            }
            tenderChart.setOption(tenderOption);

            // 支出明细占比图表
            payUsedChart.setOption(payUsedOption);

            // 小额支出占比
            paySeOption.series[0].data = [
                { value: small_expenses_sum_price, name: '小额支出' },
                { value: ZhCalc.sub(pay_sum_price, small_expenses_sum_price), name: '其他' },
            ];
            paySeChart.setOption(paySeOption);
        },
    }

    let resizeTimer = null;
    $(window).bind('resize', function () {
        if (resizeTimer) clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function () {
            echartsReset();
        }, 500);
    })

    function echartsReset() {
        tenderChart.resize();
        payUsedChart.resize();
        paySeChart.resize();
    }

    // 计算显示滚动条长度
    function computedPosition(xArrayLength) {
        if (xArrayLength >= 8) {
            return Math.floor(8 / xArrayLength * 100) > 100 ? 100 : Math.floor(8 / xArrayLength * 100);
            // return length <= 10 ? 35 : 100 - Math.floor(35 / length * 100);
        } else {
            return 100;
        }
    }

    //标段占比
    const tenderChart = echarts.init(document.getElementById('jlchart3'));
    const tenderOption = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        dataZoom: [
            {
                // brushSelect:false,
                // zoomLock: false,
                type: 'slider',
                // show: true,
                // realtime: true,
                showdetail: false,
                showDataShadow: false,
                // // dataZoomIndex: 10,
                start: 0,
                end: 10,
                height: 10,
                bottom: '5%',
            },
        ],
        legend: {},
        grid: {
            left: '3%',
            right: '4%',
            bottom: '10%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: [],
                axisLabel: {
                    show: true,
                    interval: 0,
                    formatter: function(value) {
                        var res = value;
                        if(res.length > 8) {
                            res = res.substring(0, 7) + "..";
                        }
                        return res;
                    }
                }
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '累计划拨',
                type: 'bar',
                emphasis: {
                    focus: 'series'
                },
                data: []
            },
            {
                name: '累计支付',
                type: 'bar',
                stack: 'Ad',
                emphasis: {
                    focus: 'series'
                },
                data: []
            }

        ]
    };
    // tenderChart.setOption(tenderOption);

    //费用明细占比//
    const payUsedChart = echarts.init(document.getElementById('jlchart1'));
    const payUsedOption = {
        color: ['#9489fa', '#f06464', '#f7af59', '#f0da49', '#71c16f', '#2aaaef', '#5690dd', '#bd88f5', '#009db2', '#0780cf'],
        //backgroundColor: '#343a40 ',
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left:'60%',
            right:'20%',
            top: 'middle'
        },
        series: [
            {
                name: '金额',
                type: 'pie',
                top:'20',
                bottom:'20',
                right:'40%',
                radius: ['80%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'right'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '40',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [],
            }
        ]
    };

    // 为echarts对象加载数据
    // myChart1.setOption(option1);

    //小额支出概况//
    var paySeChart = echarts.init(document.getElementById('jlchart2'));
    var paySeOption = {
        color: [ '#71c16f', '#2aaaef'],
        //backgroundColor: '#343a40 ',
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left:'60%',
            right: '20%',
            top: 'middle'
        },
        series: [
            {
                name: '金额',
                type: 'pie',
                top:'20',
                bottom:'20',
                right:'40%',
                radius: ['80%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'right'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '40',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: []
            }
        ]
    };

    // 为echarts对象加载数据
    // myChart2.setOption(option2);

    $.subMenu({
        menu: '#sub-menu', miniMenu: '#sub-mini-menu', miniMenuList: '#mini-menu-list',
        toMenu: '#to-menu', toMiniMenu: '#to-mini-menu',
        key: 'menu.1.0.0',
        miniHint: '#sub-mini-hint', hintKey: 'menu.hint.1.0.1',
        callback: function (info) {
            if (info.mini) {
                $('.panel-title').addClass('fluid');
                $('#sub-menu').removeClass('panel-sidebar');
            } else {
                $('.panel-title').removeClass('fluid');
                $('#sub-menu').addClass('panel-sidebar');
            }
            autoFlashHeight();
            echartsReset();
        }
    });
});