feat(dashboard): 增加CFO财务资金浮存与资产负债中枢、COO运营转化复购与合伙人断档雷达全貌分析
这个提交包含在：
chen
@@ -245,6 +245,87 @@
|
||||
width: 18px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
/* CFO 财务中枢与资产负债卡片 */
|
||||
.dashboard-index .finance-hub-card {
|
||||
padding: 16px 18px;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.dashboard-index .finance-sub-metric {
|
||||
padding: 8px 12px;
|
||||
background: #fbfbfc;
|
||||
border: 1px solid #f0f2f5;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* COO 运营全貌与雷达卡片 */
|
||||
.dashboard-index .coo-panel-card {
|
||||
padding: 16px 18px;
|
||||
min-height: 280px;
|
||||
}
|
||||
|
||||
.dashboard-index .funnel-stage {
|
||||
flex: 1;
|
||||
padding: 10px 8px;
|
||||
background: #fafafa;
|
||||
border-radius: 6px;
|
||||
text-align: center;
|
||||
margin-right: 6px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dashboard-index .funnel-stage:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.dashboard-index .radar-stat-pill {
|
||||
padding: 8px 10px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all .2s;
|
||||
}
|
||||
|
||||
.dashboard-index .radar-stat-pill:hover {
|
||||
opacity: 0.9;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.dashboard-index .health-score-dial {
|
||||
text-align: center;
|
||||
padding: 14px 10px;
|
||||
background: linear-gradient(135deg, #f8faff 0%, #f0f5ff 100%);
|
||||
border: 1px solid #d6e4ff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.dashboard-index .health-score-val {
|
||||
font-size: 34px;
|
||||
font-weight: 800;
|
||||
line-height: 1.1;
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.dashboard-index .warning-alert-row {
|
||||
background: #fffbe6;
|
||||
border: 1px solid #ffe58f;
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
color: #d46b08;
|
||||
}
|
||||
|
||||
.dashboard-index .low-stock-tag {
|
||||
display: inline-block;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
background: #fff1f0;
|
||||
color: #cf1322;
|
||||
border: 1px solid #ffa39e;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="index" class="dashboard-index panel panel-default panel-intro" v-cloak>
|
||||
@@ -343,6 +424,98 @@
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- ================= 1.1 CFO 财务全貌 · 资金流向、平台浮存与资产负债中枢 ================= -->
|
||||
<el-row :gutter="16">
|
||||
<!-- 资金浮存池 (Cash Float) -->
|
||||
<el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
|
||||
<div class="finance-hub-card card">
|
||||
<div class="sa-flex sa-row-between mb-2">
|
||||
<div class="sa-flex">
|
||||
<span class="network-badge bg-primary mr-2" style="background: #1890ff;">浮</span>
|
||||
<span class="font-bold text-dark" style="font-size: 14px;">资金浮存池 (Cash Float)</span>
|
||||
</div>
|
||||
<el-tag size="small" type="success" effect="light">平台流动免息资金</el-tag>
|
||||
</div>
|
||||
<div class="kpi-main-num text-primary" style="font-size: 24px; margin: 8px 0;">
|
||||
<span class="currency">¥</span>{{ state.finance.total_float_funds }}
|
||||
</div>
|
||||
<div class="finance-sub-metric sa-flex sa-row-between">
|
||||
<span>未提现佣金沉淀 (用户收益留存)：</span>
|
||||
<strong class="text-warning">¥{{ state.finance.commission_float }}</strong>
|
||||
</div>
|
||||
<div class="finance-sub-metric sa-flex sa-row-between">
|
||||
<span>用户账户余额沉淀 (已充未销)：</span>
|
||||
<strong class="text-dark">¥{{ state.finance.user_balance_float }}</strong>
|
||||
</div>
|
||||
<div class="sa-flex sa-row-between pt-2" style="font-size: 12px; color: var(--sa-subfont); border-top: 1px dashed var(--sa-space);">
|
||||
<span>真实净现金流 (GMV-出款-退款)：</span>
|
||||
<strong class="text-success">¥{{ state.finance.real_net_cash_flow }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<!-- 提现出款与资金风控敞口 -->
|
||||
<el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
|
||||
<div class="finance-hub-card card">
|
||||
<div class="sa-flex sa-row-between mb-2">
|
||||
<div class="sa-flex">
|
||||
<span class="network-badge bg-warning mr-2" style="background: #fa8c16;">提</span>
|
||||
<span class="font-bold text-dark" style="font-size: 14px;">提现出款与风控敞口</span>
|
||||
</div>
|
||||
<span class="cursor-pointer text-primary" style="font-size: 12px;" @click="onOpenWithdraw('all')">提现流水 →</span>
|
||||
</div>
|
||||
<div class="kpi-main-num text-warning" style="font-size: 24px; margin: 8px 0;">
|
||||
<span class="currency">¥</span>{{ state.finance.total_withdraw_paid }}
|
||||
<span class="unit" style="font-size: 12px; font-weight: normal; color: var(--sa-subfont);">已打款出款</span>
|
||||
</div>
|
||||
<div class="finance-sub-metric sa-flex sa-row-between" :style="state.finance.pending_withdraw_count > 0 ? 'background: #fff2e8; border-color: #ffbb96;' : ''">
|
||||
<span>待审核出款风控资金：</span>
|
||||
<div class="sa-flex">
|
||||
<strong :class="state.finance.pending_withdraw_count > 0 ? 'text-danger' : 'text-dark'">¥{{ state.finance.pending_withdraw_amount }}</strong>
|
||||
<el-badge v-if="state.finance.pending_withdraw_count > 0" :value="state.finance.pending_withdraw_count + '笔'" class="ml-1" type="danger" />
|
||||
<el-button v-if="state.finance.pending_withdraw_count > 0" type="danger" link size="mini" class="ml-1" @click="onOpenWithdraw(0)">审核</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="finance-sub-metric sa-flex sa-row-between">
|
||||
<span>累计申请总额：¥{{ state.finance.total_withdraw_applied }}</span>
|
||||
<span>出款兑现率：<strong class="text-purple">{{ state.finance.withdraw_cash_rate }}%</strong></span>
|
||||
</div>
|
||||
<div class="sa-flex sa-row-between pt-2" style="font-size: 12px; color: var(--sa-subfont); border-top: 1px dashed var(--sa-space);">
|
||||
<span>累计退款：¥{{ state.finance.total_refund_amount }} ({{ state.finance.total_refund_count }}笔)</span>
|
||||
<span>退款率：<strong>{{ state.finance.refund_rate }}%</strong></span>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<!-- 资产负债表与未来承兑责任 -->
|
||||
<el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
|
||||
<div class="finance-hub-card card">
|
||||
<div class="sa-flex sa-row-between mb-2">
|
||||
<div class="sa-flex">
|
||||
<span class="network-badge bg-danger mr-2" style="background: #f5222d;">债</span>
|
||||
<span class="font-bold text-dark" style="font-size: 14px;">未来承兑责任准备金 (负债中枢)</span>
|
||||
</div>
|
||||
<el-tag size="small" type="danger" effect="light">履约与承兑储备</el-tag>
|
||||
</div>
|
||||
<div class="kpi-main-num text-danger" style="font-size: 24px; margin: 8px 0;">
|
||||
<span class="currency">¥</span>{{ state.finance.total_future_liability }}
|
||||
</div>
|
||||
<div class="finance-sub-metric sa-flex sa-row-between">
|
||||
<span>① 消费兑换券补贴待释放负债 (1.5倍补贴)：</span>
|
||||
<strong class="text-danger">¥{{ state.finance.pending_voucher_liability }}</strong>
|
||||
</div>
|
||||
<div class="finance-sub-metric sa-flex sa-row-between">
|
||||
<span>② 马豆流通折算市值负债 (生态回购承兑)：</span>
|
||||
<strong class="text-purple">¥{{ state.finance.madow_market_liability }}</strong>
|
||||
</div>
|
||||
<div class="sa-flex sa-row-between pt-2" style="font-size: 12px; color: var(--sa-subfont); border-top: 1px dashed var(--sa-space);">
|
||||
<span>③ 用户未提佣金流动负债：</span>
|
||||
<strong class="text-warning">¥{{ state.finance.commission_liability }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- ================= 2. 全角色身份会员资产与收益统计全景透视 ================= -->
|
||||
<!-- 2.1 三大核心板块快速指标卡 -->
|
||||
<el-row :gutter="16">
|
||||
@@ -515,6 +688,203 @@
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- ================= 2.3 COO 运营全貌 · 用户转化漏斗、合伙人掉队雷达与库存安全 ================= -->
|
||||
<el-row :gutter="16">
|
||||
<!-- 左侧：电商用户转化漏斗与复购动销 -->
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
|
||||
<div class="coo-panel-card card">
|
||||
<div class="sa-flex sa-row-between mb-3">
|
||||
<div>
|
||||
<span class="font-bold text-dark" style="font-size: 14px;">用户转化漏斗与复购粘性</span>
|
||||
</div>
|
||||
<span class="cursor-pointer text-primary" style="font-size: 12px;" @click="onOpenUser">会员中心 →</span>
|
||||
</div>
|
||||
|
||||
<!-- 漏斗横向展示 -->
|
||||
<div class="sa-flex sa-row-between mb-3" style="background: #f8faff; padding: 12px; border-radius: 8px; border: 1px solid #e6f7ff;">
|
||||
<div class="funnel-stage">
|
||||
<div style="color: var(--sa-subfont); font-size: 11px;">全网注册</div>
|
||||
<div class="font-bold text-dark" style="font-size: 18px; margin: 4px 0;">{{ state.operation.total_registered }} <span style="font-size: 11px;">人</span></div>
|
||||
<el-tag size="mini" type="info">基数 100%</el-tag>
|
||||
</div>
|
||||
<div style="color: #1890ff; font-weight: bold; font-size: 16px;">→</div>
|
||||
<div class="funnel-stage">
|
||||
<div style="color: var(--sa-subfont); font-size: 11px;">付费买家</div>
|
||||
<div class="font-bold text-primary" style="font-size: 18px; margin: 4px 0;">{{ state.operation.paid_users_count }} <span style="font-size: 11px;">人</span></div>
|
||||
<el-tag size="mini" type="primary">转化 {{ state.operation.pay_conversion_rate }}%</el-tag>
|
||||
</div>
|
||||
<div style="color: #52c41a; font-weight: bold; font-size: 16px;">→</div>
|
||||
<div class="funnel-stage">
|
||||
<div style="color: var(--sa-subfont); font-size: 11px;">复购会员</div>
|
||||
<div class="font-bold text-success" style="font-size: 18px; margin: 4px 0;">{{ state.operation.repeat_buy_users_count }} <span style="font-size: 11px;">人</span></div>
|
||||
<el-tag size="mini" type="success">复购 {{ state.operation.repeat_purchase_rate }}%</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="finance-sub-metric sa-flex sa-row-between">
|
||||
<span>单次购买买家：<strong class="text-dark">{{ state.operation.single_buy_users_count }} 人</strong></span>
|
||||
<span>复购买家：<strong class="text-success">{{ state.operation.repeat_buy_users_count }} 人</strong></span>
|
||||
</div>
|
||||
<div class="finance-sub-metric sa-flex sa-row-between">
|
||||
<span>付费用户人均客单 (ARPU)：</span>
|
||||
<strong class="text-warning">¥{{ state.operation.arpu }}</strong>
|
||||
</div>
|
||||
<div class="sa-flex sa-row-between pt-2" style="font-size: 12px; color: var(--sa-subfont); border-top: 1px dashed var(--sa-space);">
|
||||
<span>在架商品：<strong class="text-dark">{{ state.operation.on_sale_goods_count }} 款</strong></span>
|
||||
<span>全仓总库存：<strong class="text-dark">{{ state.operation.total_stock }} 件</strong></span>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<!-- 中间：合伙人 30 天自购断档掉队雷达 -->
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
|
||||
<div class="coo-panel-card card">
|
||||
<div class="sa-flex sa-row-between mb-3">
|
||||
<div>
|
||||
<span class="font-bold text-dark" style="font-size: 14px;">合伙人 30天自购断档掉队雷达</span>
|
||||
</div>
|
||||
<span class="cursor-pointer text-primary" style="font-size: 12px;" @click="onOpenAgent('')">合伙团队 →</span>
|
||||
</div>
|
||||
|
||||
<!-- 3状态指标标签 -->
|
||||
<el-row :gutter="8" class="mb-3">
|
||||
<el-col :span="8">
|
||||
<div class="radar-stat-pill" style="background: #f6ffed; border: 1px solid #b7eb8f; text-align: center;">
|
||||
<div style="font-size: 11px; color: #389e0d;">活跃达标</div>
|
||||
<div style="font-size: 18px; font-weight: bold; color: #52c41a; margin-top: 2px;">{{ state.operation.active_partners }}</div>
|
||||
<div style="font-size: 10px; color: #8c8c8c;">>7天余量</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="radar-stat-pill" style="background: #fffbe6; border: 1px solid #ffe58f; text-align: center;">
|
||||
<div style="font-size: 11px; color: #d46b08;">即将断档</div>
|
||||
<div style="font-size: 18px; font-weight: bold; color: #fa8c16; margin-top: 2px;">{{ state.operation.warning_partners }}</div>
|
||||
<div style="font-size: 10px; color: #fa8c16;">≤7天临界</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="radar-stat-pill" style="background: #fff1f0; border: 1px solid #ffa39e; text-align: center;">
|
||||
<div style="font-size: 11px; color: #cf1322;">已断档冻结</div>
|
||||
<div style="font-size: 18px; font-weight: bold; color: #f5222d; margin-top: 2px;">{{ state.operation.frozen_partners }}</div>
|
||||
<div style="font-size: 10px; color: #8c8c8c;">无分佣资格</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 7天临界断档名单列表（若有则紧急告警，若无则展示健康与已断档） -->
|
||||
<div v-if="state.operation.warning_partners > 0">
|
||||
<div class="warning-alert-row mb-2 sa-flex sa-row-between">
|
||||
<span>⚠️ <strong>紧急唤醒：</strong>以下合伙人自购即将到期</span>
|
||||
<span style="font-weight: bold;">{{ state.operation.warning_partners }} 人临界</span>
|
||||
</div>
|
||||
<div style="max-height: 120px; overflow-y: auto;">
|
||||
<div class="sa-flex sa-row-between mb-2 pb-1" v-for="wUser in state.operation.warning_list" :key="wUser.user_id" style="border-bottom: 1px dashed #f0f2f5; font-size: 12px;">
|
||||
<div class="sa-flex">
|
||||
<sa-image :url="wUser.avatar" size="20" style="border-radius: 50%;"></sa-image>
|
||||
<div class="ml-1">
|
||||
<span class="font-bold">{{ wUser.nickname }}</span>
|
||||
<el-tag size="mini" type="info" class="ml-1">{{ wUser.level_text }}</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sa-flex">
|
||||
<el-tag size="mini" type="danger">剩余 {{ wUser.days_left }} 天</el-tag>
|
||||
<el-button type="primary" link size="mini" class="ml-1" @click="onOpenAgent('')">催单</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<div class="sa-flex sa-row-between" style="background: #f6ffed; border: 1px solid #b7eb8f; padding: 8px 12px; border-radius: 6px; font-size: 12px; color: #389e0d; margin-bottom: 8px;">
|
||||
<span>🛡️ 合伙股东自购健康度良好，暂无临近断档人员</span>
|
||||
<span>全部在保</span>
|
||||
</div>
|
||||
<div style="font-size: 11px; color: var(--sa-subfont); margin-bottom: 4px;">已断档冻结人员采样 (失去分佣资格)：</div>
|
||||
<div style="max-height: 100px; overflow-y: auto;">
|
||||
<div class="sa-flex sa-row-between mb-1 pb-1" v-for="fUser in state.operation.frozen_list.slice(0, 3)" :key="fUser.user_id" style="border-bottom: 1px dashed #f0f2f5; font-size: 12px;">
|
||||
<div class="sa-flex">
|
||||
<span class="text-muted mr-1">#{{ fUser.user_id }}</span>
|
||||
<span class="text-dark">{{ fUser.nickname }}</span>
|
||||
<span class="text-muted ml-1" style="font-size: 11px;">({{ fUser.mobile }})</span>
|
||||
</div>
|
||||
<el-tag size="mini" type="danger" effect="plain">{{ fUser.overdue_days }}</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<!-- 右侧：供应链库存告急与平台经营健康度评分 -->
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
|
||||
<div class="coo-panel-card card">
|
||||
<div class="sa-flex sa-row-between mb-2">
|
||||
<div>
|
||||
<span class="font-bold text-dark" style="font-size: 14px;">经营健康评分与供应链安全</span>
|
||||
</div>
|
||||
<el-tag size="small" :style="{ backgroundColor: state.operation.health.grade_color, color: '#fff', borderColor: state.operation.health.grade_color, fontWeight: 'bold' }">
|
||||
{{ state.operation.health.grade }}
|
||||
</el-tag>
|
||||
</div>
|
||||
|
||||
<!-- 综合评分双栏展示 -->
|
||||
<el-row :gutter="12" class="mb-3">
|
||||
<el-col :span="10">
|
||||
<div class="health-score-dial">
|
||||
<div style="font-size: 11px; color: var(--sa-subfont); margin-bottom: 4px;">综合健康度</div>
|
||||
<div class="health-score-val" :style="{ color: state.operation.health.grade_color }">{{ state.operation.health.score }}</div>
|
||||
<div style="font-size: 10px; color: var(--sa-subfont); margin-top: 4px;">满分 100分</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="14">
|
||||
<div style="font-size: 11px; color: var(--sa-subfont); line-height: 1.8;">
|
||||
<div class="sa-flex sa-row-between">
|
||||
<span>拨比健康 (30分)：</span>
|
||||
<strong class="text-dark">{{ state.operation.health.payout_score }}分</strong>
|
||||
</div>
|
||||
<div class="sa-flex sa-row-between">
|
||||
<span>合伙人活力 (25分)：</span>
|
||||
<strong class="text-dark">{{ state.operation.health.active_score }}分</strong>
|
||||
</div>
|
||||
<div class="sa-flex sa-row-between">
|
||||
<span>复购粘性 (25分)：</span>
|
||||
<strong class="text-dark">{{ state.operation.health.repeat_score }}分</strong>
|
||||
</div>
|
||||
<div class="sa-flex sa-row-between">
|
||||
<span>履约安全 (20分)：</span>
|
||||
<strong class="text-dark">{{ state.operation.health.safety_score }}分</strong>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 库存告急监测 -->
|
||||
<div class="sa-flex sa-row-between mb-1" style="border-top: 1px dashed var(--sa-space); padding-top: 8px;">
|
||||
<div class="sa-flex">
|
||||
<span class="font-bold text-dark" style="font-size: 12px;">库存告急预警 (≤10件)</span>
|
||||
<el-badge :value="state.operation.low_stock_count" class="ml-2" :type="state.operation.low_stock_count > 0 ? 'danger' : 'info'" />
|
||||
</div>
|
||||
<span class="cursor-pointer text-primary" style="font-size: 11px;" @click="onOpenStockWarning">预警中心 →</span>
|
||||
</div>
|
||||
|
||||
<div v-if="state.operation.low_stock_count > 0" style="max-height: 90px; overflow-y: auto;">
|
||||
<div class="sa-flex sa-row-between mb-1 pb-1" v-for="sku in state.operation.low_stock_list" :key="sku.sku_id" style="border-bottom: 1px solid #f8f8f8; font-size: 12px;">
|
||||
<div class="sa-flex" style="max-width: 70%;">
|
||||
<sa-image :url="sku.goods_image" size="18" style="border-radius: 2px;"></sa-image>
|
||||
<span class="ml-1 sa-table-line-1" :title="sku.goods_title">{{ sku.goods_title }}</span>
|
||||
</div>
|
||||
<div class="sa-flex">
|
||||
<span class="low-stock-tag mr-1">{{ sku.stock }}件</span>
|
||||
<el-button type="primary" link size="mini" @click="onOpenGoods(sku.goods_id)">补货</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="text-muted sa-flex sa-row-center" style="font-size: 12px; padding: 10px 0;">
|
||||
✅ 所有在售商品库存充足
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
{/if}
|
||||
|
||||
{if $auth->check('shopro/dashboard/chart')}
|
||||
|
||||
在新工单中引用
屏蔽一个用户