Calculation/app/view/quality/inspection_overview.ejs

<% include ./sub_menu.ejs %>
<% const inspectionUrl = '/sp/' + ctx.subProject.id + '/quality/tender/' + ctx.tender.id + '/inspection'; %>
<div class="panel-content quality-inspection-overview" data-inspection-url="<%= inspectionUrl %>">
    <div class="panel-title">
        <div class="title-main d-flex">
            <% include ./sub_mini_menu.ejs %>
            <div>巡检概况</div>
        </div>
    </div>
    <div class="content-wrap">
        <div class="c-body p-3">
            <div class="row mb-3">
                <div class="col-md-5 mb-3 mb-md-0">
                    <div class="card h-100">
                        <div class="card-header d-flex align-items-center">
                            <strong>整改中（<%= overview.counts.rectification %>）</strong>
                            <a class="ml-auto" href="<%= inspectionUrl %>/rectification">查看全部</a>
                        </div>
                        <div class="overview-rectifications">
                            <table class="table table-sm table-hover mb-0">
                                <thead>
                                    <tr>
                                        <th class="overview-inspection-column">巡检</th>
                                        <th>待完成整改人</th>
                                        <th class="text-center overview-progress-column">进度</th>
                                        <th class="text-center overview-days-column">已持续</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <% overview.rectifications.forEach(item => { %>
                                        <tr>
                                            <td>
                                                <a href="<%= inspectionUrl %>/<%= item.id %>/information"><%= item.code || '查看巡检' %></a>
                                                <div class="text-muted text-truncate" title="<%= item.check_item %>"><%= item.check_item || '-' %></div>
                                            </td>
                                            <td><%= item.pendingUsers.length ? item.pendingUsers.join('、') : '-' %></td>
                                            <td class="text-center"><%= item.total ? '已完成 ' + item.done + '/' + item.total : '-' %></td>
                                            <td class="text-center"><span class="badge badge-light"><%= item.elapsedDays === null ? '-' : item.elapsedDays === 0 ? '今天' : item.elapsedDays + '天' %></span></td>
                                        </tr>
                                    <% }); %>
                                    <% if (!overview.rectifications.length) { %>
                                        <tr><td colspan="4" class="text-center text-muted py-5">暂无正在整改的巡检</td></tr>
                                    <% } %>
                                </tbody>
                            </table>
                        </div>
                        <div class="card-footer text-muted small">
                            按本轮整改持续时间排序<%= overview.counts.rectification > 10 ? '，展示前10条' : '' %>。
                        </div>
                    </div>
                </div>
                <div class="col-md-7">
                    <div class="card h-100">
                        <div class="card-header"><strong>巡检状态分布</strong></div>
                        <div class="card-body">
                            <% if (overview.total) { %>
                                <div id="quality-overview-pie" class="overview-pie" role="img" aria-label="巡检状态分布：整改中<%= overview.counts.rectification %>，审批中<%= overview.counts.report + overview.counts.reply %>，已完成<%= overview.counts.completed %>"></div>
                            <% } else { %>
                                <div class="overview-pie d-flex align-items-center justify-content-center text-muted">暂无巡检状态数据</div>
                            <% } %>
                            <div class="overview-status-links d-flex justify-content-around text-center">
                                <a href="<%= inspectionUrl %>/rectification">整改中 <strong><%= overview.counts.rectification %></strong></a>
                                <div class="dropdown">
                                    <button id="quality-overview-approval" type="button" class="btn btn-link btn-sm dropdown-toggle p-0" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">审批中 <strong><%= overview.counts.report + overview.counts.reply %></strong></button>
                                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="quality-overview-approval">
                                        <a class="dropdown-item" href="<%= inspectionUrl %>?status=2">上报审批（<%= overview.counts.report %>）</a>
                                        <a class="dropdown-item" href="<%= inspectionUrl %>/approval">批复审批（<%= overview.counts.reply %>）</a>
                                    </div>
                                </div>
                                <a href="<%= inspectionUrl %>?status=3">已完成 <strong><%= overview.counts.completed %></strong></a>
                            </div>
                        </div>
                        <div class="card-footer text-muted small">审批中包含上报审批和批复审批，占比以这三类巡检合计为基数。</div>
                    </div>
                </div>
            </div>
            <div class="card mb-3">
                <div class="card-header d-flex align-items-center">
                    <strong>巡检完成趋势</strong>
                </div>
                <div class="card-body">
                    <% if (!overview.trend.hasData) { %><p class="text-center text-muted mb-0"><%= overview.trend.year %>年暂无提交或完成巡检记录</p><% } %>
                    <div id="quality-overview-trend" class="overview-trend" role="img" aria-label="<%= overview.trend.year %>年提交巡检、完成巡检及完成占比趋势"></div>
                </div>
                <div class="card-footer text-muted small">
                    <div>提交巡检按实际首次提交月份统计，退回重报不重复计数；完成巡检按整张巡检单最终完成月份统计。</div>
                    <div>完成占比＝完成巡检 ÷ 提交巡检 × 100%；按当月统计，当月无提交巡检时显示0%。</div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    const qualityInspectionOverview = JSON.parse(unescape('<%- escape(JSON.stringify({ statuses: overview.statuses, total: overview.total, trend: overview.trend })) %>'));
</script>