459 行
18 KiB
HTML
可执行文件
459 行
18 KiB
HTML
可执行文件
<style>
|
|
.dashboard-container {
|
|
padding: 0 4px;
|
|
}
|
|
|
|
/* 顶部核心指标 KPI 卡片 */
|
|
.kpi-card {
|
|
background: #ffffff;
|
|
border-radius: 10px;
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
border: 1px solid #e2e8f0;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
}
|
|
.kpi-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
|
|
}
|
|
.kpi-card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 12px;
|
|
}
|
|
.kpi-card-title {
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: #64748b;
|
|
}
|
|
.kpi-badge {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
padding: 2px 8px;
|
|
border-radius: 20px;
|
|
}
|
|
.kpi-badge-blue { background: #eff6ff; color: #2563eb; }
|
|
.kpi-badge-green { background: #f0fdf4; color: #16a34a; }
|
|
.kpi-badge-amber { background: #fffbeb; color: #d97706; }
|
|
.kpi-badge-purple { background: #faf5ff; color: #9333ea; }
|
|
|
|
.kpi-card-value {
|
|
font-size: 28px;
|
|
font-weight: 700;
|
|
color: #0f172a;
|
|
line-height: 1.1;
|
|
font-variant-numeric: tabular-nums;
|
|
margin-bottom: 12px;
|
|
}
|
|
.kpi-card-footer {
|
|
font-size: 12px;
|
|
color: #94a3b8;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
border-top: 1px solid #f8fafc;
|
|
padding-top: 10px;
|
|
}
|
|
.kpi-card-footer strong {
|
|
color: #334155;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.kpi-icon-floating {
|
|
position: absolute;
|
|
right: 18px;
|
|
top: 20px;
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 20px;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
/* 现代卡片通用样式 */
|
|
.saas-card {
|
|
background: #ffffff;
|
|
border-radius: 10px;
|
|
border: 1px solid #e2e8f0;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
|
|
margin-bottom: 20px;
|
|
overflow: hidden;
|
|
}
|
|
.saas-card-header {
|
|
padding: 16px 20px;
|
|
border-bottom: 1px solid #f1f5f9;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.saas-card-title {
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
color: #1e293b;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.saas-card-title i {
|
|
margin-right: 8px;
|
|
font-size: 16px;
|
|
}
|
|
.saas-card-body {
|
|
padding: 20px;
|
|
}
|
|
|
|
/* 待办中心快捷项 */
|
|
.todo-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 12px;
|
|
}
|
|
.todo-item {
|
|
background: #f8fafc;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 8px;
|
|
padding: 14px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
text-decoration: none !important;
|
|
transition: all 0.2s ease;
|
|
}
|
|
.todo-item:hover {
|
|
background: #f1f5f9;
|
|
border-color: #cbd5e1;
|
|
transform: translateY(-1px);
|
|
}
|
|
.todo-item-info {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.todo-icon {
|
|
width: 38px;
|
|
height: 38px;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 16px;
|
|
margin-right: 12px;
|
|
flex-shrink: 0;
|
|
}
|
|
.todo-title {
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: #334155;
|
|
}
|
|
.todo-count {
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* 服务质量与履约评分 */
|
|
.quality-stat {
|
|
text-align: center;
|
|
padding: 10px 0;
|
|
border-right: 1px solid #f1f5f9;
|
|
}
|
|
.quality-stat:last-child {
|
|
border-right: none;
|
|
}
|
|
.quality-stat .val {
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
color: #0f172a;
|
|
margin-bottom: 4px;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.quality-stat .lbl {
|
|
font-size: 12px;
|
|
color: #64748b;
|
|
}
|
|
|
|
/* 实时订单流小表格 */
|
|
.recent-table th {
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
color: #64748b;
|
|
background: #f8fafc;
|
|
border-bottom: 1px solid #e2e8f0 !important;
|
|
}
|
|
.recent-table td {
|
|
font-size: 13px;
|
|
color: #334155;
|
|
vertical-align: middle !important;
|
|
}
|
|
</style>
|
|
|
|
<div class="dashboard-container">
|
|
<!-- 顶部核心经营 KPI 矩阵 -->
|
|
<div class="row">
|
|
<!-- 交易流水 GMV -->
|
|
<div class="col-xs-12 col-sm-6 col-md-3">
|
|
<div class="kpi-card">
|
|
<div class="kpi-card-header">
|
|
<span class="kpi-card-title">平台总交易额 (GMV)</span>
|
|
<span class="kpi-badge kpi-badge-green">经营</span>
|
|
</div>
|
|
<div class="kpi-card-value">
|
|
¥{$totalGmv}
|
|
</div>
|
|
<div class="kpi-icon-floating bg-icon-green" style="background:#f0fdf4; color:#16a34a;">
|
|
<i class="fa fa-line-chart"></i>
|
|
</div>
|
|
<div class="kpi-card-footer">
|
|
<span>今日成交</span>
|
|
<strong>¥{$todayGmv}</strong>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 订单总数 -->
|
|
<div class="col-xs-12 col-sm-6 col-md-3">
|
|
<div class="kpi-card">
|
|
<div class="kpi-card-header">
|
|
<span class="kpi-card-title">累计服务订单</span>
|
|
<span class="kpi-badge kpi-badge-blue">调度</span>
|
|
</div>
|
|
<div class="kpi-card-value">
|
|
{$totalOrder} <small style="font-size: 14px; font-weight: normal; color: #64748b;">单</small>
|
|
</div>
|
|
<div class="kpi-icon-floating bg-icon-blue" style="background:#eff6ff; color:#2563eb;">
|
|
<i class="fa fa-shopping-bag"></i>
|
|
</div>
|
|
<div class="kpi-card-footer">
|
|
<span>今日新单</span>
|
|
<strong>{$todayOrderCount} 单</strong>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 认证师傅 -->
|
|
<div class="col-xs-12 col-sm-6 col-md-3">
|
|
<div class="kpi-card">
|
|
<div class="kpi-card-header">
|
|
<span class="kpi-card-title">平台在册服务师傅</span>
|
|
<span class="kpi-badge kpi-badge-amber">运力</span>
|
|
</div>
|
|
<div class="kpi-card-value">
|
|
{$totalMaster} <small style="font-size: 14px; font-weight: normal; color: #64748b;">人</small>
|
|
</div>
|
|
<div class="kpi-icon-floating bg-icon-amber" style="background:#fffbeb; color:#d97706;">
|
|
<i class="fa fa-wrench"></i>
|
|
</div>
|
|
<div class="kpi-card-footer">
|
|
<span>在线可接单</span>
|
|
<strong>{$onlineMaster} 人</strong>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 合作商户 -->
|
|
<div class="col-xs-12 col-sm-6 col-md-3">
|
|
<div class="kpi-card">
|
|
<div class="kpi-card-header">
|
|
<span class="kpi-card-title">入驻企业商户</span>
|
|
<span class="kpi-badge kpi-badge-purple">生态</span>
|
|
</div>
|
|
<div class="kpi-card-value">
|
|
{$totalMerchant} <small style="font-size: 14px; font-weight: normal; color: #64748b;">家</small>
|
|
</div>
|
|
<div class="kpi-icon-floating bg-icon-purple" style="background:#faf5ff; color:#9333ea;">
|
|
<i class="fa fa-building-o"></i>
|
|
</div>
|
|
<div class="kpi-card-footer">
|
|
<span>注册业主用户</span>
|
|
<strong>{$totalUser} 位</strong>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 中部：经营趋势与待办中心 -->
|
|
<div class="row">
|
|
<!-- 7 天订单走势复合图表 -->
|
|
<div class="col-lg-8 col-md-12">
|
|
<div class="saas-card">
|
|
<div class="saas-card-header">
|
|
<div class="saas-card-title">
|
|
<i class="fa fa-area-chart" style="color: #2563eb;"></i> 近 7 天订单与交易额走势
|
|
</div>
|
|
<div>
|
|
<span class="label label-info" style="font-weight: normal;">双轴分析</span>
|
|
</div>
|
|
</div>
|
|
<div class="saas-card-body">
|
|
<div id="chart-order-trend" style="height: 320px; width: 100%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 运营待办与风控中心 -->
|
|
<div class="col-lg-4 col-md-12">
|
|
<div class="saas-card">
|
|
<div class="saas-card-header">
|
|
<div class="saas-card-title">
|
|
<i class="fa fa-bell-o" style="color: #ea580c;"></i> 核心待办与风控中心
|
|
</div>
|
|
<span class="label label-danger">实时待处理</span>
|
|
</div>
|
|
<div class="saas-card-body">
|
|
<div class="todo-grid">
|
|
<!-- 待审核师傅 -->
|
|
<a href="master?ref=addtabs" class="todo-item addtabsit" title="点击直达师傅审核列表">
|
|
<div class="todo-item-info">
|
|
<div class="todo-icon" style="background: #eff6ff; color: #2563eb;">
|
|
<i class="fa fa-user-plus"></i>
|
|
</div>
|
|
<div class="todo-title">师傅待审</div>
|
|
</div>
|
|
<div class="todo-count" style="color: {$pendingMaster > 0 ? '#2563eb' : '#64748b'};">
|
|
{$pendingMaster}
|
|
</div>
|
|
</a>
|
|
|
|
<!-- 申诉待处理 -->
|
|
<a href="appeal?ref=addtabs" class="todo-item addtabsit" title="点击直达申诉工单处理">
|
|
<div class="todo-item-info">
|
|
<div class="todo-icon" style="background: #fef2f2; color: #dc2626;">
|
|
<i class="fa fa-shield"></i>
|
|
</div>
|
|
<div class="todo-title">申诉工单</div>
|
|
</div>
|
|
<div class="todo-count" style="color: {$waitingAppeal > 0 ? '#dc2626' : '#64748b'};">
|
|
{$waitingAppeal}
|
|
</div>
|
|
</a>
|
|
|
|
<!-- 提现待审批 -->
|
|
<a href="withdraw?ref=addtabs" class="todo-item addtabsit" title="点击直达提现审批">
|
|
<div class="todo-item-info">
|
|
<div class="todo-icon" style="background: #fffbeb; color: #d97706;">
|
|
<i class="fa fa-credit-card"></i>
|
|
</div>
|
|
<div class="todo-title">提现审批</div>
|
|
</div>
|
|
<div class="todo-count" style="color: {$waitingWithdraw > 0 ? '#d97706' : '#64748b'};">
|
|
{$waitingWithdraw}
|
|
</div>
|
|
</a>
|
|
|
|
<!-- 待指派订单 -->
|
|
<a href="order?ref=addtabs" class="todo-item addtabsit" title="点击直达待派单订单列表">
|
|
<div class="todo-item-info">
|
|
<div class="todo-icon" style="background: #faf5ff; color: #9333ea;">
|
|
<i class="fa fa-send-o"></i>
|
|
</div>
|
|
<div class="todo-title">待指派单</div>
|
|
</div>
|
|
<div class="todo-count" style="color: {$pendingDispatch > 0 ? '#9333ea' : '#64748b'};">
|
|
{$pendingDispatch}
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- 履约质量简要汇总 -->
|
|
<div style="margin-top: 24px; padding-top: 16px; border-top: 1px solid #f1f5f9;">
|
|
<div style="font-size: 13px; font-weight: 600; color: #334155; margin-bottom: 12px;">
|
|
<i class="fa fa-tachometer" style="color: #10b981; margin-right: 6px;"></i> 师傅履约质量大盘
|
|
</div>
|
|
<div class="row no-gutter">
|
|
<div class="col-xs-4 quality-stat">
|
|
<div class="val" style="color: #16a34a;">{$masterAvgScore}</div>
|
|
<div class="lbl">综合好评度</div>
|
|
</div>
|
|
<div class="col-xs-4 quality-stat">
|
|
<div class="val" style="color: #2563eb;">{$masterAvgAccept}%</div>
|
|
<div class="lbl">平均接单率</div>
|
|
</div>
|
|
<div class="col-xs-4 quality-stat">
|
|
<div class="val" style="color: #7c3aed;">{$masterAvgOntime}%</div>
|
|
<div class="lbl">准时履约率</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 底部：订单状态分布与最新订单动态 -->
|
|
<div class="row">
|
|
<!-- 订单履约状态构成 (环形图) -->
|
|
<div class="col-lg-5 col-md-12">
|
|
<div class="saas-card">
|
|
<div class="saas-card-header">
|
|
<div class="saas-card-title">
|
|
<i class="fa fa-pie-chart" style="color: #059669;"></i> 订单履约状态分布
|
|
</div>
|
|
<span class="text-muted" style="font-size: 12px;">全量 {$totalOrder} 笔订单</span>
|
|
</div>
|
|
<div class="saas-card-body">
|
|
<div id="chart-order-status" style="height: 280px; width: 100%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 实时订单动态流 -->
|
|
<div class="col-lg-7 col-md-12">
|
|
<div class="saas-card">
|
|
<div class="saas-card-header">
|
|
<div class="saas-card-title">
|
|
<i class="fa fa-list-alt" style="color: #475569;"></i> 最新实时动态订单
|
|
</div>
|
|
<a href="order?ref=addtabs" class="addtabsit btn btn-xs btn-default" style="font-size: 12px;">
|
|
查看全部订单 <i class="fa fa-angle-right"></i>
|
|
</a>
|
|
</div>
|
|
<div class="saas-card-body no-padding">
|
|
<table class="table table-hover recent-table" style="margin-bottom: 0;">
|
|
<thead>
|
|
<tr>
|
|
<th>订单编号</th>
|
|
<th>服务项目</th>
|
|
<th>下单客户</th>
|
|
<th>实付金额</th>
|
|
<th>当前状态</th>
|
|
<th>下单时间</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{volist name="recentOrders" id="item"}
|
|
<tr>
|
|
<td>
|
|
<span style="font-family: monospace; font-weight: 500;">{$item.order_no}</span>
|
|
</td>
|
|
<td>{$item.service_name}</td>
|
|
<td>{$item.user_name ?: '微信用户'}</td>
|
|
<td><strong style="color: #0f172a;">¥{$item.pay_amount}</strong></td>
|
|
<td>
|
|
{switch name="item.status"}
|
|
{case value="0"}<span class="label label-default">待支付</span>{/case}
|
|
{case value="1"}<span class="label label-warning">待接单</span>{/case}
|
|
{case value="2"}<span class="label label-info">报价中</span>{/case}
|
|
{case value="3"}<span class="label label-primary">已接单</span>{/case}
|
|
{case value="6"}<span class="label label-primary">服务中</span>{/case}
|
|
{case value="8"}<span class="label label-success">已完成</span>{/case}
|
|
{case value="9"}<span class="label label-default">已取消</span>{/case}
|
|
{case value="10"}<span class="label label-danger">售后中</span>{/case}
|
|
{default /}<span class="label label-info">进行中</span>
|
|
{/switch}
|
|
</td>
|
|
<td>{$item.createtime|date="m-d H:i",###}</td>
|
|
</tr>
|
|
{/volist}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|