Calculation/app/view/tender/index.ejs

<div class="panel-content">
    <div class="panel-title fluid">
        <div class="title-main  d-flex justify-content-between">
            <div>
                <div class="btn-group">
                    <div class="form-check-inline">
                        <label class="form-check-label">
                            <input class="form-check-input" type="checkbox">
                            查看计量进度
                        </label>
                    </div>
                </div>
                <div class="btn-group">
                    <select class="form-control form-control-sm m-0">
                        <option>标段类型筛选</option>
                        <% for(const index in tenderConst.typeString) { %>
                        <option value="<%= index %>"><%= tenderConst.typeString[index] %></option>
                        <% } %>
                    </select>
                </div>
            </div>
            <div>
                <a href="#add-bd" data-toggle="modal" data-target="#add-bd" class="btn btn-sm btn-primary pull-right">新建标段</a>
            </div>
        </div>
    </div>
    <div class="content-wrap">
        <div class="c-body">
            <!--默认-->
            <table class="table table-bordered table-sm">
                <thead>
                <th>名称</th>
                <th>标段类型</th>
                <th>计量期数</th>
                <th>审批状态</th>
                <th>0号台帐合同</th>
                <th>本期完成</th>
                <th>截止本期合同</th>
                <th>截止本期变更</th>
                <th>接着本期完成</th>
                <th>截止上期完成</th>
                <th>本期应付</th>
                </thead>
                <% if(tenderList.length > 0) { %>
                <% tenderList.forEach(function(tender) { %>
                <tr>
                    <td><a href="biaoduan-detail.html"><%= tender.name %></a></td>
                    <td><%= tenderConst.typeString[tender.type] %></td>
                    <td>15</td>
                    <td><%= tenderConst.statusString[tender.status] %></td>
                    <td>0</td>
                    <td>0</td>
                    <td>0</td>
                    <td>0</td>
                    <td>0</td>
                    <td>0</td>
                    <td>0</td>
                </tr>
                <% }) %>
                <% } %>
            </table>
            <!--查看计量进度-->
            <table class="table table-bordered table-sm">
                <thead>
                <th>名称</th>
                <th width="120">标段类型</th>
                <th width="120">完成期数</th>
                <th>累计合同计量</th>
                <th>截止本期累计完成/本期完成/未完成</th>
                </thead>
                <% if(tenderList.length > 0) { %>
                <% tenderList.forEach(function(tender) { %>
                <tr>
                    <td><a href="biaoduan-detail.html"><%= tender.name %></a></td>
                    <td><%= tenderConst.typeString[tender.type] %></td>
                    <td>15</td>
                    <td>￥5,000,000.00</td>
                    <td>
                        <div class="progress">
                            <div class="progress-bar bg-success" style="width: 45%;" data-placement="bottom"
                                 data-toggle="tooltip" data-original-title="截止本期累计完成：￥731,121,121.00">45%
                            </div>
                            <div class="progress-bar bg-info" style="width:25%;" data-placement="bottom"
                                 data-toggle="tooltip" data-original-title="本期完成：￥31,121,121.00">25%
                            </div>
                            <div class="progress-bar bg-gray" style="width:30%;" data-placement="bottom"
                                 data-toggle="tooltip" data-original-title="未完成：￥71,121,121.00">30%
                            </div>
                        </div>
                    </td>
                </tr>
                <% }) %>
                <% } %>
            </table>
            <!--按标段类型筛选后，增加显示图表-->
            <div class="row mt-5">
                <div class="col-4">
                    <!--图表1-->
                    <div id="chartContainer1" style="width:100%;height:400px"></div>
                </div>
                <div class="col-8">
                    <!--图表2-->
                    <div id="chartContainer2" style="width:100%;height:400px"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<%- jsValidator %>
<script type="text/javascript">
    let tenderList = '<%- JSON.stringify(tenderList) %>';
    tenderList = JSON.parse(tenderList);

</script>
<script src=/public/js/echarts/echarts.min.js></script>
<script src="/public/js/tender.js"></script>