xh-erp.7in6.com/application/admin/view/dashboard/index.html

<style type="text/css">
    .sm-st {
        background: #fff;
        padding: 20px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        margin-bottom: 20px;
    }

    .sm-st-icon {
        width: 60px;
        height: 60px;
        display: inline-block;
        line-height: 60px;
        text-align: center;
        font-size: 30px;
        background: #eee;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        float: left;
        margin-right: 10px;
        color: #fff;
    }

    .sm-st-info {
        padding-top: 2px;
    }

    .sm-st-info span {
        display: block;
        font-size: 24px;
        font-weight: 600;
    }

    .orange {
        background: #fa8564 !important;
    }

    .tar {
        background: #45cf95 !important;
    }

    .sm-st .green {
        background: #86ba41 !important;
    }

    .pink {
        background: #AC75F0 !important;
    }

    .yellow-b {
        background: #fdd752 !important;
    }

    .stat-elem {

        background-color: #fff;
        padding: 18px;
        border-radius: 40px;

    }

    .stat-info {
        text-align: center;
        background-color: #fff;
        border-radius: 5px;
        margin-top: -5px;
        padding: 8px;
        -webkit-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.05);
        box-shadow: 0 1px 0px rgba(0, 0, 0, 0.05);
        font-style: italic;
    }

    .stat-icon {
        text-align: center;
        margin-bottom: 5px;
    }

    .st-red {
        background-color: #F05050;
    }

    .st-green {
        background-color: #27C24C;
    }

    .st-violet {
        background-color: #7266ba;
    }

    .st-blue {
        background-color: #23b7e5;
    }

    .stats .stat-icon {
        color: #28bb9c;
        display: inline-block;
        font-size: 26px;
        text-align: center;
        vertical-align: middle;
        width: 50px;
        float: left;
    }

    .stat {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
    }

    .stat .value {
        font-size: 20px;
        line-height: 24px;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: 500;
    }

    .stat .name {
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 5px 0;
    }

    .stat.lg .value {
        font-size: 26px;
        line-height: 28px;
    }

    .stat-col {
        margin:0 0 10px 0;
    }
    .stat.lg .name {
        font-size: 16px;
    }

    .stat-col .progress {
        height: 2px;
    }

    .stat-col .progress-bar {
        line-height: 2px;
        height: 2px;
    }

    .item {
        padding: 30px 0;
    }


    #statistics .panel {
        min-height: 150px;
    }

    #statistics .panel h5 {
        font-size: 14px;
    }

    html, body {
        background: #f5f6f8;
    }

    .panel-intro {
        margin-bottom: 0;
        background: transparent;
    }

    .proc-dash {
        margin-bottom: 0;
        padding-top: 12px;
    }

    .proc-kpi-section {
        margin-bottom: 14px;
        flex-shrink: 0;
    }

    .proc-kpi-section:last-of-type {
        margin-bottom: 16px;
    }

    .proc-kpi-section-title {
        font-size: 14px;
        font-weight: 600;
        color: #555;
        margin: 0 0 10px 2px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .proc-kpi-section-title i {
        color: #23b7e5;
        font-size: 13px;
    }

    .proc-dash-overview {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
        margin: 0;
    }

    .proc-dash-overview.cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    @media (max-width: 991px) {
        .proc-dash-overview,
        .proc-dash-overview.cols-3 {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 479px) {
        .proc-dash-overview,
        .proc-dash-overview.cols-3 {
            grid-template-columns: 1fr;
        }
    }

    .proc-overview-item {
        background: #fff;
        border-radius: 8px;
        padding: 14px 16px;
        display: flex;
        align-items: center;
        gap: 12px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
        min-height: 78px;
    }

    .proc-overview-item .overview-icon {
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        border-radius: 8px;
        font-size: 18px;
        color: #fff;
    }

    .proc-overview-item.item-supplier .overview-icon { background: #23b7e5; }
    .proc-overview-item.item-confirm .overview-icon { background: #f0ad4e; }
    .proc-overview-item.item-approval .overview-icon { background: #7266ba; }
    .proc-overview-item.item-completed .overview-icon { background: #27C24C; }

    .proc-overview-item .overview-body {
        min-width: 0;
        flex: 1;
    }

    .proc-overview-item .overview-title {
        font-size: 13px;
        font-weight: 600;
        color: #444;
        margin-bottom: 6px;
    }

    .proc-overview-item .overview-metrics {
        display: flex;
        align-items: baseline;
        gap: 18px;
    }

    .proc-overview-item .overview-metric {
        display: flex;
        align-items: baseline;
        gap: 4px;
        min-width: 0;
    }

    .proc-overview-item .overview-num {
        font-size: 22px;
        line-height: 1.2;
        font-weight: 700;
        color: #222;
    }

    .proc-overview-item.item-confirm .overview-num { color: #f0ad4e; }
    .proc-overview-item.item-approval .overview-num { color: #7266ba; }
    .proc-overview-item.item-completed .overview-num { color: #27C24C; }

    .proc-overview-item.item-confirm .overview-num-single { color: #f0ad4e; }
    .proc-overview-item.item-approval .overview-num-single { color: #7266ba; }
    .proc-overview-item.item-completed .overview-num-single { color: #27C24C; }

    .proc-overview-item .overview-num-single {
        font-size: 26px;
        line-height: 1.2;
        font-weight: 700;
        color: #222;
    }

    .proc-overview-item .overview-metric-label {
        font-size: 12px;
        color: #999;
        white-space: nowrap;
    }

    .proc-overview-item .overview-link {
        display: block;
        margin-top: 6px;
        font-size: 12px;
    }

    .proc-overview-item.item-confirm .overview-link {
        color: #f0ad4e;
    }

    .proc-overview-item.item-approval .overview-link {
        color: #7266ba;
    }

    .proc-overview-item.item-completed .overview-link {
        color: #27C24C;
    }

    .proc-overview-item.item-confirm .overview-link:hover {
        color: #ec971f;
    }

    .proc-overview-item.item-approval .overview-link:hover {
        color: #6254b2;
    }

    .proc-overview-item.item-completed .overview-link:hover {
        color: #1e983e;
    }

    .proc-dash-pending {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 14px;
    }

    .proc-dash-pending .label {
        font-size: 13px;
        padding: 7px 12px;
        border-radius: 20px;
    }

    .proc-stage-cards-row {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        margin: 0 0 20px;
    }

    @media (max-width: 991px) {
        .proc-stage-cards-row {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 479px) {
        .proc-stage-cards-row {
            grid-template-columns: 1fr;
        }
    }

    .proc-stage-cards-row > .proc-stage-col {
        min-width: 0;
    }

    .proc-stage-card {
        background: #fff;
        border-radius: 8px;
        padding: 14px 12px 12px;
        margin-bottom: 0;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
        border-top: 4px solid #ddd;
        height: 100%;
        display: flex;
        flex-direction: column;
        transition: box-shadow .2s ease;
    }

    .proc-stage-card:hover {
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    }

    .proc-stage-card.stage-issued { border-top-color: #23b7e5; }
    .proc-stage-card.stage-confirm { border-top-color: #f0ad4e; }
    .proc-stage-card.stage-approval { border-top-color: #7266ba; }
    .proc-stage-card.stage-completed { border-top-color: #27C24C; }

    .proc-stage-card .stage-title {
        font-size: 15px;
        font-weight: 600;
        color: #333;
        margin-bottom: 4px;
    }

    .proc-stage-card .stage-desc {
        font-size: 12px;
        color: #999;
        margin-bottom: 12px;
        min-height: 32px;
        line-height: 1.4;
    }

    .proc-stage-card .stage-metrics {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
        border-top: 1px solid #f0f0f0;
        padding-top: 12px;
        margin-top: auto;
    }

    .proc-stage-card .metric-block {
        text-align: center;
        padding: 0 6px;
    }

    .proc-stage-card .metric-block + .metric-block {
        border-left: 1px solid #f0f0f0;
    }

    .proc-stage-card .metric-block .metric-num {
        font-size: 26px;
        line-height: 1.2;
        font-weight: 700;
        color: #222;
        min-height: 32px;
    }

    .proc-stage-card .metric-block .metric-label {
        font-size: 12px;
        color: #888;
        margin-top: 4px;
        white-space: nowrap;
    }

    .proc-stage-card .metric-block.metric-week .metric-num {
        color: #7266ba;
    }

    .proc-stage-card.stage-issued .metric-block .metric-num { color: #23b7e5; }
    .proc-stage-card.stage-confirm .metric-block .metric-num { color: #f0ad4e; }
    .proc-stage-card.stage-approval .metric-block .metric-num { color: #7266ba; }
    .proc-stage-card.stage-completed .metric-block .metric-num { color: #27C24C; }

    .proc-stage-card .stage-link {
        display: inline-block;
        margin-top: 12px;
        font-size: 12px;
    }

    .proc-dash-table th,
    .proc-dash-table td {
        text-align: center !important;
        vertical-align: middle !important;
    }

    .proc-dash-table th:first-child,
    .proc-dash-table td:first-child {
        text-align: left !important;
    }

    .proc-dash-table td strong {
        font-size: 16px;
    }

    .proc-dash-chart-row {
        margin-top: 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(340px, 32%);
        gap: 12px;
        align-items: stretch;
        height: 300px;
    }

    .proc-dash-chart-row .chart-col,
    .proc-dash-chart-row .side-col {
        min-width: 0;
        height: 100%;
        overflow: visible;
    }

    .proc-dash-chart-row #procuremen-echart {
        height: 100%;
        min-height: 0;
        width: 100%;
        background: #fff;
        border-radius: 4px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
        box-sizing: border-box;
        padding: 0 4px 2px 0;
    }

    .proc-summary-panel {
        background: #fff;
        border-radius: 4px;
        padding: 12px 14px;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    @media (max-width: 991px) {
        .proc-dash-chart-row {
            grid-template-columns: 1fr;
            height: auto;
        }

        .proc-dash-chart-row .chart-col {
            height: 260px;
        }

        .proc-dash-chart-row .side-col {
            height: auto;
        }

        .proc-dash-chart-row .side-col .proc-summary-panel {
            height: auto;
            overflow: visible;
        }
    }

    .panel-intro > .panel-body {
        padding: 15px 15px 12px;
        box-sizing: border-box;
    }

    .proc-rank-panel .rank-head {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 10px;
        flex-shrink: 0;
        flex-wrap: wrap;
    }

    .proc-rank-panel .rank-title {
        font-size: 13px;
        font-weight: 600;
        color: #444;
        flex: 1;
        min-width: 0;
    }

    .proc-rank-panel .rank-supplier-inline {
        font-size: 12px;
        color: #666;
        white-space: nowrap;
    }

    .proc-rank-panel .rank-supplier-inline strong {
        font-size: 16px;
        color: #23b7e5;
        margin-left: 2px;
    }

    .proc-rank-panel .rank-period {
        font-size: 11px;
        color: #999;
        background: #f5f5f5;
        padding: 2px 8px;
        border-radius: 10px;
        white-space: nowrap;
    }

    .proc-rank-panel .rank-tabs {
        margin-bottom: 10px;
        border-bottom: 1px solid #eee;
        flex-shrink: 0;
    }

    .proc-rank-panel .rank-tabs > li > a {
        padding: 5px 8px;
        font-size: 12px;
        color: #888;
        border: none !important;
        margin-right: 0;
    }

    .proc-rank-panel .rank-tabs > li.active > a,
    .proc-rank-panel .rank-tabs > li.active > a:hover {
        color: #23b7e5;
        background: transparent;
        border-bottom: 2px solid #23b7e5 !important;
    }

    .proc-rank-panel .rank-list {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
    }

    .proc-rank-panel .rank-list .tab-pane {
        padding-top: 2px;
    }

    .proc-rank-panel .rank-item {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 10px;
        padding: 8px 10px;
        background: #fafbfc;
        border-radius: 6px;
    }

    .proc-rank-panel .rank-item:last-child {
        margin-bottom: 0;
    }

    .proc-rank-panel .rank-no {
        flex: 0 0 22px;
        width: 22px;
        height: 22px;
        line-height: 22px;
        text-align: center;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 700;
        color: #888;
        background: #eee;
        margin-top: 1px;
    }

    .proc-rank-panel .rank-no-1 { background: #ffd666; color: #874d00; }
    .proc-rank-panel .rank-no-2 { background: #e8e8e8; color: #595959; }
    .proc-rank-panel .rank-no-3 { background: #ffbb96; color: #873800; }

    .proc-rank-panel .rank-body {
        flex: 1;
        min-width: 0;
    }

    .proc-rank-panel .rank-name-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
        margin-bottom: 4px;
    }

    .proc-rank-panel .rank-name {
        font-size: 13px;
        color: #333;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1;
        min-width: 0;
    }

    .proc-rank-panel .rank-value {
        font-size: 15px;
        font-weight: 700;
        color: #23b7e5;
        flex-shrink: 0;
    }

    .proc-rank-panel .rank-bar {
        height: 5px;
        margin: 0;
        background: #e8e8e8;
        border-radius: 3px;
    }

    .proc-rank-panel .rank-bar .progress-bar {
        background: #23b7e5;
        border-radius: 2px;
    }

    .proc-rank-panel .rank-empty {
        text-align: center;
        color: #bbb;
        font-size: 13px;
        padding: 20px 0 8px;
    }
</style>
<?php $ps = isset($procuremenStats) && is_array($procuremenStats) ? $procuremenStats : ['kpi'=>[], 'today'=>[], 'week'=>[], 'pending'=>[], 'supplierRank'=>['quote'=>[], 'selected'=>[], 'period_label'=>'本周'], 'updated'=>'']; ?>
<?php $supplierRank = isset($ps['supplierRank']) && is_array($ps['supplierRank']) ? $ps['supplierRank'] : ['quote'=>[], 'selected'=>[], 'period_label'=>'本月', 'supplier_total'=>0]; ?>
<?php $kpi = isset($ps['kpi']) && is_array($ps['kpi']) ? $ps['kpi'] : ['supplier'=>['total'=>0],'confirm'=>['today'=>0,'month'=>0],'approval'=>['today'=>0,'month'=>0],'completed'=>['today'=>0,'month'=>0]]; ?>
<div class="panel panel-default panel-intro">
    <div class="panel-body">
        <div class="proc-dash">
                    <div class="proc-kpi-section">
                        <div class="proc-kpi-section-title"><i class="fa fa-calendar-o"></i> 今日数据</div>
                        <div class="proc-dash-overview cols-3">
                            <div class="proc-overview-item item-confirm">
                                <div class="overview-icon"><i class="fa fa-check-square-o"></i></div>
                                <div class="overview-body">
                                    <div class="overview-title">待确认</div>
                                    <div class="overview-num overview-num-single">{$kpi.confirm.today|default='0'}</div>
                                    <a href="javascript:;" class="overview-link addtabsit" data-url="procuremen/audit"><i class="fa fa-external-link"></i> 供应商确认</a>
                                </div>
                            </div>
                            <div class="proc-overview-item item-approval">
                                <div class="overview-icon"><i class="fa fa-shopping-cart"></i></div>
                                <div class="overview-body">
                                    <div class="overview-title">待审批</div>
                                    <div class="overview-num overview-num-single">{$kpi.approval.today|default='0'}</div>
                                    <a href="javascript:;" class="overview-link addtabsit" data-url="procuremen/confirm"><i class="fa fa-external-link"></i> 供应商审批</a>
                                </div>
                            </div>
                            <div class="proc-overview-item item-completed">
                                <div class="overview-icon"><i class="fa fa-flag-checkered"></i></div>
                                <div class="overview-body">
                                    <div class="overview-title">已完结</div>
                                    <div class="overview-num overview-num-single">{$kpi.completed.today|default='0'}</div>
                                    <a href="javascript:;" class="overview-link addtabsit" data-url="procuremenarchive/index"><i class="fa fa-external-link"></i> 历史存证档案查询</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="proc-kpi-section">
                        <div class="proc-kpi-section-title"><i class="fa fa-calendar"></i> 本月数据</div>
                        <div class="proc-dash-overview cols-3">
                            <div class="proc-overview-item item-confirm">
                                <div class="overview-icon"><i class="fa fa-check-square-o"></i></div>
                                <div class="overview-body">
                                    <div class="overview-title">待确认</div>
                                    <div class="overview-num overview-num-single">{$kpi.confirm.month|default='0'}</div>
                                    <a href="javascript:;" class="overview-link addtabsit" data-url="procuremen/audit"><i class="fa fa-external-link"></i> 供应商确认</a>
                                </div>
                            </div>
                            <div class="proc-overview-item item-approval">
                                <div class="overview-icon"><i class="fa fa-shopping-cart"></i></div>
                                <div class="overview-body">
                                    <div class="overview-title">待审批</div>
                                    <div class="overview-num overview-num-single">{$kpi.approval.month|default='0'}</div>
                                    <a href="javascript:;" class="overview-link addtabsit" data-url="procuremen/confirm"><i class="fa fa-external-link"></i> 供应商审批</a>
                                </div>
                            </div>
                            <div class="proc-overview-item item-completed">
                                <div class="overview-icon"><i class="fa fa-flag-checkered"></i></div>
                                <div class="overview-body">
                                    <div class="overview-title">已完结</div>
                                    <div class="overview-num overview-num-single">{$kpi.completed.month|default='0'}</div>
                                    <a href="javascript:;" class="overview-link addtabsit" data-url="procuremenarchive/index"><i class="fa fa-external-link"></i> 历史存证档案查询</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="proc-dash-chart-row">
                        <div class="chart-col">
                            <div id="procuremen-echart" class="btn-refresh"></div>
                        </div>
                        <div class="side-col">
                            <div class="proc-summary-panel proc-rank-panel">
                                <div class="rank-head">
                                    <span class="rank-title"><i class="fa fa-bar-chart"></i> 供应商排名</span>
                                    <span class="rank-supplier-inline">供应商总数 <strong>{$supplierRank.supplier_total|default='0'}</strong></span>
                                </div>
                                <ul class="nav nav-tabs rank-tabs">
                                    <li class="active"><a href="#rank-quote" data-toggle="tab">参与报价</a></li>
                                    <li><a href="#rank-selected" data-toggle="tab">被选中</a></li>
                                </ul>
                                <div class="tab-content rank-list">
                                    <div class="tab-pane active" id="rank-quote">
                                        {notempty name="supplierRank.quote"}
                                        {foreach name="supplierRank.quote" item="item"}
                                        <div class="rank-item">
                                            <span class="rank-no rank-no-{$item.rank|default='0'}">{$item.rank|default='0'}</span>
                                            <div class="rank-body">
                                                <div class="rank-name-row">
                                                    <span class="rank-name" title="{$item.name|default=''|htmlentities}">{$item.name|default=''|htmlentities}</span>
                                                    <span class="rank-value">{$item.value|default='0'}次</span>
                                                </div>
                                                <div class="progress rank-bar">
                                                    <div class="progress-bar" style="width:{$item.percent|default='0'}%"></div>
                                                </div>
                                            </div>
                                        </div>
                                        {/foreach}
                                        {else /}
                                        <div class="rank-empty">本月暂无报价数据</div>
                                        {/notempty}
                                    </div>
                                    <div class="tab-pane" id="rank-selected">
                                        {notempty name="supplierRank.selected"}
                                        {foreach name="supplierRank.selected" item="item"}
                                        <div class="rank-item">
                                            <span class="rank-no rank-no-{$item.rank|default='0'}">{$item.rank|default='0'}</span>
                                            <div class="rank-body">
                                                <div class="rank-name-row">
                                                    <span class="rank-name" title="{$item.name|default=''|htmlentities}">{$item.name|default=''|htmlentities}</span>
                                                    <span class="rank-value">{$item.value|default='0'}次</span>
                                                </div>
                                                <div class="progress rank-bar">
                                                    <div class="progress-bar" style="width:{$item.percent|default='0'}%"></div>
                                                </div>
                                            </div>
                                        </div>
                                        {/foreach}
                                        {else /}
                                        <div class="rank-empty">本月暂无选中记录</div>
                                        {/notempty}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
        </div>
    </div>
</div>