process_sheet/fastadmin/application/admin/view/ps/template/preview.html

<div class="panel panel-default panel-intro ps-preview" data-id="{$row.id}">
    <div class="panel-heading" style="padding:12px 15px;">
        <strong>{$row.name|htmlentities}</strong>
        <span class="text-muted" style="margin-left:8px;">{$paper|htmlentities}</span>
        <span class="label label-primary" style="margin-left:8px;">{$cellCount} 个格</span>
        {if $unlabeled}
        <span class="label label-warning">{$unlabeled} 个未绑定字段</span>
        {/if}
        <button type="button" class="btn btn-warning btn-sm" id="btn-rebuild" style="float:right;">
            <i class="fa fa-refresh"></i> 重新识别
        </button>
    </div>
    <div class="panel-body">
        <p class="help-block" style="margin-top:0;">
            红框是已绑定字段的格子，橙框是未读出色块文字的格子。位置不对或字段绑错时，可先在「编辑」里更换色块图，再点重新识别。
        </p>
        <div class="row">
            <div class="col-sm-7">
                <div class="ps-sheet">
                    <img src="{$cover}" alt="标准图">
                    {foreach name="cells" item="cell"}
                    <div class="ps-cell {if $cell.unbound}unbound{/if}"
                         style="left:{$cell.x}%;top:{$cell.y}%;width:{$cell.w}%;height:{$cell.h}%;"
                         title="{$cell.n}. {$cell.label} {$cell.key}">
                        <span>{$cell.n} {$cell.label|default='未识别'}</span>
                    </div>
                    {/foreach}
                </div>
            </div>
            <div class="col-sm-5">
                {if $markCover}
                <p class="text-muted" style="margin-bottom:6px;">色块标注图</p>
                <img src="{$markCover}" alt="色块图" style="max-width:100%;border:1px solid #ddd;margin-bottom:12px;">
                {/if}
                <table class="table table-striped table-bordered table-condensed">
                    <thead>
                    <tr>
                        <th width="40">#</th>
                        <th>色块文字</th>
                        <th>绑定字段</th>
                    </tr>
                    </thead>
                    <tbody>
                    {foreach name="cells" item="cell"}
                    <tr class="{if $cell.unbound}warning{/if}">
                        <td>{$cell.n}</td>
                        <td>{$cell.label|default='—'}</td>
                        <td>{if $cell.key}<code>{$cell.key}</code>{else}<span class="text-warning">未绑定</span>{/if}</td>
                    </tr>
                    {/foreach}
                    {if !$cells}
                    <tr><td colspan="3" class="text-center text-muted">没有识别到格子</td></tr>
                    {/if}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<style>
    .ps-sheet { position: relative; display: inline-block; width: 100%; background: #f4f4f4; }
    .ps-sheet img { display: block; width: 100%; height: auto; }
    .ps-cell {
        position: absolute;
        border: 2px solid rgba(200, 32, 32, .92);
        background: rgba(200, 32, 32, .14);
        box-sizing: border-box;
        overflow: hidden;
        color: #8b1010;
        font-size: 11px;
        line-height: 1.2;
        padding: 0 2px;
        pointer-events: none;
    }
    .ps-cell.unbound {
        border-color: #e6a23c;
        background: rgba(230, 162, 60, .18);
        color: #9a6b12;
    }
    .ps-cell span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
</style>