Calculation/app/view/budget/info.ejs

<% include ./sub_menu.ejs %>
<div class="panel-content">
    <div class="panel-title">
        <div class="title-main d-flex">
            <% include ./sub_mini_menu.ejs %>
            <div>
                <div class="d-inline-block">
                    投资概况
                </div>
            </div>
            <div class="ml-auto">
            </div>
        </div>
    </div>
    <div class="content-wrap my-3">
        <div class="dashboard-height mx-3">
            <div class="row agency-partheight mt-3">
                <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="contant-height-one">
                                <table class="table table-middle">
                                    <thead class="text-center thead-light">
                                    <tr>
                                        <th class="pl-3">费用名称</th>
                                        <th width="20%">设计概算</th>
                                        <th width="20%">预估决算</th>
                                        <th width="20%">增幅(%)</th>
                                    </tr>
                                    </thead>
                                    <tbody class="text-right" id="jianan-table">
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <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">
                            <style>
                                @media (max-width: 1400px) {
                                    .echart-height h5 {
                                        font-size: 1rem;
                                    }
                                    #total_rate {
                                        font-size: 3.5rem;
                                    }
                                }
                            </style>
                            <div class="row mx-0 echart-height" style="width: 99.91%;padding:13px 0">
                                <div class="col-6 px-0 text-right">
                                    <div class="canyu-pill canyu-bg-yellow ml-2 mr-1 my-2 p-3 text-white">
                                        <div class="icon"><i class="fa fa-pie-chart"></i></div>
                                        <div class="pr-2">
                                            <h5><b id="total_gai_tp">0</b></h5> <h6>设计概算</h6>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-6 px-0 text-right">
                                    <div class="canyu-pill canyu-bg-blue my-2 ml-1 mr-2 p-3 text-white">
                                        <div class="icon"><i class="fa fa-pie-chart"></i></div>
                                        <div class="pr-2">
                                            <h5><b id="total_final_tp">0</b></h5> <h6>预估决算</h6>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="contant-height-two">
                                <div class="canyu-band">
                                    <h1 id="total_rate" class="">0%</h1>
                                    <h3 class="text-muted">增减幅度</h3>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-4 pl-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="contant-height-one">
                                <div id="jlchart2" style="height: 100%; width: 100%;">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row agency-partheight">
                <div class="col-6 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="contant-height-one">
                                <div id="jlchart3" style="height: 90%; width: 100%;">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-6 pl-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>工程变更费用TOP10</div>
                            <div class="mt-1">元</div>
                        </div>
                        <div class="card-body p-0">
                            <div class="contant-height-one">
                                <table class="table table-middle">
                                    <thead  class="text-center thead-light">
                                    <tr>
                                        <th width="8%">序号</th>
                                        <th width="13%">变更令号</th>
                                        <th width="">变更名称</th>
                                        <th width="17%">变更性质</th>
                                        <th width="12%">变更金额</th>
                                    </tr>
                                    </thead>
                                    <tbody class="text-left">
                                    <% if (changeList.length > 0) { %>
                                        <% for (const [index, c] of changeList.entries()) { %>
                                            <tr>
                                                <td class="text-center"><%- index+1 %></td>
                                                <td><%- c.p_code %></td>
                                                <td><%- c.name %></td>
                                                <td class="text-center"><%- changeConst.qualityName[c.quality] %></td>
                                                <td class="text-right" ><%- c.total_price %></td>
                                            </tr>
                                        <% } %>
                                    <% } %>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    const total_change_tp = <%- total_change_tp %>;
</script>