Calculation/app/view/contract/panel.ejs

<% include ./sub_menu.ejs %>
<div class="panel-content">
    <div class="panel-title">
        <div class="title-main  d-flex">
            <% include ./sub_mini_menu.ejs %>
            <h2>合同概况</h2>
        </div>
    </div>
    <div class="content-wrap">
        <div class="c-body">
            <div class="sjs-height-0">
                <div class="m-3">
                    <!--概况-->
                    <div class="row mx-0 mb-3">

                        <div class="col-6 pl-0 pr-5">
                            <div class="card text-center mb-3">
                                <div class="card-body">
                                    <h5 class="card-title">支出合同结算进度</h5>
                                    <div class="mb-0">
                                        <div class="progress">
                                            <div class="progress-bar bg-danger" style="width: <%- ctx.helper.round(prices.expenses_rate, 0) %>%;" data-placement="bottom" data-toggle="tooltip" data-original-title="已支付：￥<%- ctx.helper.formatMoney(prices.expenses_yf_price) %>"><%- ctx.helper.round(prices.expenses_rate, 0) %>%</div>
                                            <div class="progress-bar bg-gray" style="width: <%- ctx.helper.sub(100, ctx.helper.round(prices.expenses_rate, 0)) %>%;" data-placement="bottom" data-toggle="tooltip" data-original-title="未支付：￥<%- ctx.helper.formatMoney(ctx.helper.sub(prices.expenses_total_price, prices.expenses_yf_price)) %>"><%- ctx.helper.sub(100, ctx.helper.round(prices.expenses_rate, 0)) %>%</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-6">
                                    <div class="card">
                                        <div class="mt-3" id="expensesPieChart" style="height: 300px; width: 100%;"></div>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="card text-center">
                                        <div class="card-body">
                                            <h5 class="card-title"><%- ctx.helper.formatMoney(prices.expenses_total_price) %></h5>
                                            <p class="card-text text-muted">支出合同总金额</p>
                                        </div>
                                    </div>
                                    <div class="card text-center my-3">
                                        <div class="card-body">
                                            <h5 class="card-title"><%- ctx.helper.formatMoney(ctx.helper.sub(prices.expenses_total_price, prices.expenses_yf_price)) %></h5>
                                            <p class="card-text text-muted">未支付</p>
                                        </div>
                                    </div>
                                    <div class="card text-center">
                                        <div class="card-body">
                                            <h5 class="card-title"><%- ctx.helper.formatMoney(prices.expenses_yf_price) %></h5>
                                            <p class="card-text text-muted">已支付</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 px-0 mt-3">
                                <div class="card">
                                    <div class="mt-3" id="expensesBarChart" style="height: 400px; width: 100%;"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-6 pl-5 pr-0">
                            <!--收入合同进度-->
                            <div class="card text-center mb-3">
                                <div class="card-body">
                                    <h5 class="card-title">收入合同结算进度</h5>
                                    <div class="mb-0">
                                        <div class="progress">
                                            <div class="progress-bar bg-danger" style="width: <%- ctx.helper.round(prices.income_rate, 0) %>%;" data-placement="bottom" data-toggle="tooltip" data-original-title="已回款：￥<%- ctx.helper.formatMoney(prices.income_yf_price) %>"><%- ctx.helper.round(prices.income_rate, 0) %>%</div>
                                            <div class="progress-bar bg-gray" style="width: <%- ctx.helper.sub(100, ctx.helper.round(prices.income_rate, 0)) %>%;" data-placement="bottom" data-toggle="tooltip" data-original-title="未回款：￥<%- ctx.helper.formatMoney(ctx.helper.sub(prices.income_total_price, prices.income_yf_price)) %>"><%- ctx.helper.sub(100, ctx.helper.round(prices.income_rate, 0)) %>%</div>                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-6">
                                    <div class="card">
                                        <div class="mt-3" id="incomePieChart" style="height: 300px; width: 100%;"></div>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="card text-center">
                                        <div class="card-body">
                                            <h5 class="card-title"><%- ctx.helper.formatMoney(prices.income_total_price) %></h5>
                                            <p class="card-text text-muted">收入合同总金额</p>
                                        </div>
                                    </div>
                                    <div class="card text-center my-3">
                                        <div class="card-body">
                                            <h5 class="card-title"><%- ctx.helper.formatMoney(ctx.helper.sub(prices.income_total_price, prices.income_yf_price)) %></h5>
                                            <p class="card-text text-muted">未回款</p>
                                        </div>
                                    </div>
                                    <div class="card text-center">
                                        <div class="card-body">
                                            <h5 class="card-title"><%- ctx.helper.formatMoney(prices.income_yf_price) %></h5>
                                            <p class="card-text text-muted">已回款</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 px-0 mt-3">
                                <div class="card">
                                    <div class="mt-3" id="incomeBarChart" style="height: 400px; width: 100%;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    const thisUrl = JSON.parse(unescape('<%- escape(JSON.stringify(thisUrl)) %>'));
    const prices = JSON.parse(unescape('<%- escape(JSON.stringify(prices)) %>'));
    const expensesList = JSON.parse(unescape('<%- escape(JSON.stringify(expensesList)) %>'));
    const incomeList = JSON.parse(unescape('<%- escape(JSON.stringify(incomeList)) %>'));
    const incomePayList = JSON.parse(unescape('<%- escape(JSON.stringify(incomePayList)) %>'));
    const expensesPayList = JSON.parse(unescape('<%- escape(JSON.stringify(expensesPayList)) %>'));
    let contractPays = [];
</script>