Calculation/app/view/financial/summary.ejs

<link rel="stylesheet" href="/public/css/bootstrap/bootstrap-select.min.css">
<% include ./sub_menu.ejs %>
<div class="panel-content">
    <div class="panel-title">
        <div class="title-main  d-flex">
            <% include ./sub_mini_menu.ejs %>
            <div class="col-12 pl-0">
                <div class="d-inline-block mr-2" style="width: 300px;">
                    <div class="input-group input-group-sm pr-1">
                        <style>
                            .select-border {
                                border: 1px solid #ced4da;
                            }
                        </style>
                        <select class="form-control form-control-sm" multiple id="tender-select" data-style="select-border">
                            <option value="0" selected>全部</option>
                        </select>
                    </div>
                </div>
                <div class="d-inline-block">
                    <!-- <label for="">开始时间</label><input type="text"  class="form-control form-control-sm"> -->
                    <div class="form-inline">
                        <div class="form-group mx-sm-3 mb-2">
                            <label for="inputPassword2" class="">开始日期：</label>
                            <input class="datepicker-here form-control form-control-sm mt-0" placeholder="选择开始日期" data-view="months" data-min-view="months" data-date-format="yyyy-MM" data-language="zh" type="text" id="start-month">
                            <label for="inputPassword2" class="ml-2">结束日期：</label>
                            <input class="datepicker-here form-control form-control-sm  mt-0" placeholder="选择结束始日期" data-view="months" data-min-view="months" data-date-format="yyyy-MM" data-language="zh" type="text" id="end-month">
                            <button class="btn btn-sm btn-primary ml-1" id="search-btn">查询</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="d-inline-block ml-auto">
            </div>
        </div>
    </div>
    <div class="content-wrap">
        <div class="c-body">
            <div class="sjs-height-0">
                <div class="row mt-3 col-12">
                    <div class="col-4 px-0">
                        <div class="card ml-3">
                            <div class="card-header card-white d-flex justify-content-between">
                                <div class="card-big-htext"><span class="card-icon mr-2"></span>金额概况</div>
                                <div class="mt-1">元</div>
                            </div>
                            <div class="card-body p-0">
                                <div class="">
                                    <table class="table table-middle">
                                        <thead class="text-center align-middle thead-light" style="height: 50px;line-height: 25px">
                                        <tr>
                                            <th>累计划拨</th>
                                            <th>累计支付</th>
                                            <th>待支付</th>
                                        </tr>
                                        </thead>
                                        <tbody class="text-center" style="height: 53.5px;">
                                        <tr>
                                            <td id="transfer_price">-</td>
                                            <td id="pay_price">-</td>
                                            <td id="pend_price">-</td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="card ml-3 mt-3">
                            <div class="card-header card-white d-flex justify-content-between">
                                <div class="card-big-htext"><span class="card-icon mr-2"></span>支付进度</div>
                                <div class="mt-1"></div>
                            </div>
                            <div class="card-body p-0">
                                <div class="progress my-5 mx-4" id="pay_progress">
                                </div>
                            </div>
                        </div>
                        <div class="card ml-3 mt-3">
                            <div class="card-header card-white d-flex justify-content-between">
                                <div class="card-big-htext"><span class="card-icon mr-2"></span>资金支出明细</div>
                                <div class="mt-1">元</div>
                            </div>
                            <div class="card-body p-0">
                                <table class="table table-middle">
                                    <thead class="text-center thead-light">
                                    <tr>
                                        <th>支出类型</th>
                                        <th>支出金额</th>
                                        <th>占比%</th>
                                    </tr>
                                    </thead>
                                    <tbody id="pay_used_table">
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="col-8 px-0">
                        <div class="ml-3">
                            <div class="card">
                                <div class="card-header card-white d-flex justify-content-between">
                                    <div class="card-big-htext"><span class="card-icon mr-2"></span>标段支出概况</div>
                                    <div class="mt-1"></div>
                                </div>
                                <div class="card-body p-0">
                                    <div id="jlchart3" style="height: 300%; width: 100%;"> </div>
                                </div>
                            </div>
                        </div>
                        <div class="ml-3 mt-3 row px-0">
                            <div class="col-6 px-0">
                                <div class="card">
                                    <div class="card-header card-white d-flex justify-content-between">
                                        <div class="card-big-htext"><span class="card-icon mr-2"></span>支出明细占比</div>
                                        <div class="mt-1"></div>
                                    </div>
                                    <div class="card-body p-0">
                                        <div id="jlchart1" style="height: 335%; width: 100%;"> </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="card">
                                    <div class="card-header card-white d-flex justify-content-between">
                                        <div class="card-big-htext"><span class="card-icon mr-2"></span>小额支出占比</div>
                                        <div class="mt-1"></div>
                                    </div>
                                    <div class="card-body p-0">
                                        <div id="jlchart2" style="height: 335%; width: 100%;"> </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<script src="/public/js/bootstrap/bootstrap-select.min.js"></script>
<script>
    const usedList = JSON.parse(unescape('<%- escape(JSON.stringify(usedList)) %>'));
    let tenders, transferList, transferTenderList, payList;
</script>