feat(analytics): A3 流失预警页——三分法/分层/CSV导出/跳聊天
Co-Authored-By: Claude Code <noreply@anthropic.com>
This commit is contained in:
浅念
@@ -1,8 +1,226 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<h2>流失预警</h2>
|
||||
<p>实现于后续任务</p>
|
||||
<div class="churn-page">
|
||||
<div class="toolbar">
|
||||
<el-radio-group v-model="channel" @change="reload">
|
||||
<el-radio-button value="wechat">微信</el-radio-button>
|
||||
<el-radio-button value="whatsapp">WhatsApp</el-radio-button>
|
||||
</el-radio-group>
|
||||
<el-select v-if="kind === 'real'" v-model="tier" @change="reload" class="tier-select">
|
||||
<el-option :value="30" label="沉默 30-60 天" />
|
||||
<el-option :value="60" label="沉默 60-90 天" />
|
||||
<el-option :value="90" label="沉默 90 天+" />
|
||||
</el-select>
|
||||
<el-button :loading="exporting" @click="exportCsv">导出 CSV</el-button>
|
||||
<span v-if="asOfText" class="as-of">数据截至 {{ asOfText }}</span>
|
||||
</div>
|
||||
|
||||
<!-- el-tabs 的事件名是 tab-change(无 change;v-model 只换值不触发重查) -->
|
||||
<el-tabs v-model="kind" @tab-change="reload">
|
||||
<el-tab-pane label="真流失" name="real" />
|
||||
<el-tab-pane label="从未激活" name="inactive" />
|
||||
<el-tab-pane label="待交接" name="handover" />
|
||||
</el-tabs>
|
||||
<div class="kind-hint">{{ kindHint }}</div>
|
||||
|
||||
<el-alert v-if="error" type="error" :title="error" :closable="false" class="error-bar" />
|
||||
|
||||
<el-table v-loading="loading" :data="rows" :row-class-name="rowClass" @row-click="goChat">
|
||||
<el-table-column prop="nickname" label="客户" min-width="160" show-overflow-tooltip />
|
||||
<el-table-column label="归属员工" min-width="150">
|
||||
<template #default="{ row }">{{ row.owner_account_id || row.user_id || '-' }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="最后沟通" width="170">
|
||||
<template #default="{ row }">{{ row.last_chat_time ? formatTime(row.last_chat_time) : '从未沟通' }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="hist_msgs" label="历史消息量" width="110" sortable />
|
||||
<el-table-column prop="active_days" label="活跃天数" width="100" sortable />
|
||||
</el-table>
|
||||
|
||||
<el-pagination
|
||||
:current-page="page"
|
||||
:page-size="pageSize"
|
||||
:total="total"
|
||||
layout="total, prev, pager, next"
|
||||
class="pager"
|
||||
@current-change="onPageChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
<script setup lang="ts">
|
||||
// A3 流失预警(spec §3.3):三分法 tab(真流失/从未激活/待交接) + 渠道切换 +
|
||||
// 沉默分层(仅真流失) + CSV 导出 + 行点击跳聊天窗。
|
||||
// 数据来自 /analytics/churn;/analytics/health 挂载拉一次做「数据截至」角标。
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { getAnalyticsHealth, getChurn, type Channel, type ChurnRow } from '@/api/analytics'
|
||||
import { exportListToCsv } from '@/utils/csvExport'
|
||||
import { channelLabel, formatTime, formatTimeShort } from '@/utils/format'
|
||||
|
||||
type ChurnKind = 'real' | 'inactive' | 'handover'
|
||||
|
||||
// 三分法口径随 tab 展示(小字),避免用户把「从未激活」误读成「真流失的轻档」
|
||||
const KIND_HINTS: Record<ChurnKind, string> = {
|
||||
real: '真流失＝历史消息 ≥5 且连续沉默（按上方分层筛选）',
|
||||
inactive: '从未激活＝加好友后从未有过沟通',
|
||||
handover: '待交接＝归属员工已离职，客户等待重新分配',
|
||||
}
|
||||
|
||||
const router = useRouter()
|
||||
const channel = ref<Channel>('wechat')
|
||||
const kind = ref<ChurnKind>('real')
|
||||
const tier = ref(30)
|
||||
const page = ref(1)
|
||||
const pageSize = 20
|
||||
const rows = ref<ChurnRow[]>([])
|
||||
const total = ref(0)
|
||||
const loading = ref(false)
|
||||
const exporting = ref(false)
|
||||
const error = ref('')
|
||||
const asOf = ref<number | null>(null)
|
||||
|
||||
let seq = 0 // 竞态守卫:channel/tier/tab 快速切换时旧响应作废(DashboardView 定型模式)
|
||||
|
||||
async function load() {
|
||||
const my = ++seq
|
||||
loading.value = true
|
||||
error.value = ''
|
||||
try {
|
||||
const resp = await getChurn({
|
||||
channel: channel.value,
|
||||
type: kind.value,
|
||||
// tier 仅 real 分支生效(后端 inactive/handover 忽略);值恒为 30/60/90 不会 422
|
||||
tier: tier.value,
|
||||
min_msgs: 5,
|
||||
page: page.value,
|
||||
page_size: pageSize,
|
||||
})
|
||||
if (my !== seq) return
|
||||
rows.value = resp.items
|
||||
total.value = resp.total
|
||||
} catch (e) {
|
||||
if (my === seq) error.value = e instanceof Error ? e.message : String(e)
|
||||
} finally {
|
||||
// 过期请求不清 loading(新一轮还在飞)也不覆盖 error
|
||||
if (my === seq) loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 筛选切换回第一页再查
|
||||
function reload() {
|
||||
page.value = 1
|
||||
load()
|
||||
}
|
||||
|
||||
// 分页翻页:vue-tsc strict 不推 inline-arrow 参数,单列包装(项目惯例)
|
||||
function onPageChange(p: number): void {
|
||||
page.value = p
|
||||
load()
|
||||
}
|
||||
|
||||
const asOfText = computed(() => formatTimeShort(asOf.value))
|
||||
const kindHint = computed(() => KIND_HINTS[kind.value])
|
||||
|
||||
// 归属账号缺失(未映射/历史数据)无法定位聊天窗,不标可点击样式(全局类,style.css)
|
||||
function rowClass({ row }: { row: ChurnRow }): string {
|
||||
return row.owner_account_id ? 'yk-clickable-row' : ''
|
||||
}
|
||||
|
||||
// 行点击跳聊天窗(项目惯例,同 CustomerList.viewChat):微信→员工聊天窗口
|
||||
// single tab;WA→ChatTimeline。owner 为空不跳,响亮提示。
|
||||
function goChat(row: ChurnRow) {
|
||||
if (!row.owner_account_id) {
|
||||
ElMessage.warning('该客户缺少归属账号，无法查看聊天记录')
|
||||
return
|
||||
}
|
||||
if (row.channel === 'wechat') {
|
||||
router.push({
|
||||
name: 'staff-chat',
|
||||
params: { ownerId: row.owner_account_id, tab: 'single', talkerId: row.friend_id },
|
||||
})
|
||||
return
|
||||
}
|
||||
router.push({
|
||||
name: 'chat',
|
||||
params: { channel: row.channel, ownerId: row.owner_account_id, talkerId: row.friend_id },
|
||||
})
|
||||
}
|
||||
|
||||
// CSV 平铺带「归属员工」列 = v1 简化:spec 的「按员工分组」语义由表格列承担
|
||||
// (spec §3.3 注)。exportListToCsv 自带全量翻页 + BOM + 10000 行安全上限。
|
||||
async function exportCsv() {
|
||||
exporting.value = true
|
||||
try {
|
||||
await exportListToCsv<ChurnRow>({
|
||||
fetchPage: (p, size) =>
|
||||
getChurn({
|
||||
channel: channel.value,
|
||||
type: kind.value,
|
||||
tier: tier.value,
|
||||
min_msgs: 5,
|
||||
page: p,
|
||||
page_size: size,
|
||||
}),
|
||||
columns: [
|
||||
{ key: 'nickname', label: '客户' },
|
||||
{ key: 'channel', label: '渠道', format: (r) => channelLabel(r.channel) },
|
||||
{ key: 'owner_account_id', label: '归属员工' },
|
||||
{
|
||||
key: 'last_chat_time',
|
||||
label: '最后沟通',
|
||||
format: (r) => (r.last_chat_time ? formatTime(r.last_chat_time) : '从未沟通'),
|
||||
},
|
||||
{ key: 'hist_msgs', label: '历史消息量' },
|
||||
{ key: 'active_days', label: '活跃天数' },
|
||||
],
|
||||
filename: `流失预警_${kind.value}_${channel.value}`,
|
||||
})
|
||||
} catch (e) {
|
||||
ElMessage.error(`导出失败：${e instanceof Error ? e.message : String(e)}`)
|
||||
} finally {
|
||||
exporting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
load()
|
||||
// health(数据截至)与筛选无关,挂载拉一次即可;失败只影响角标(静默隐藏),
|
||||
// 不进页面 error alert
|
||||
getAnalyticsHealth()
|
||||
.then((h) => {
|
||||
asOf.value = h.data_as_of
|
||||
})
|
||||
.catch(() => {})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.toolbar {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.tier-select {
|
||||
width: 150px;
|
||||
}
|
||||
.as-of {
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 12px;
|
||||
margin-left: auto;
|
||||
}
|
||||
.kind-hint {
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 12px;
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
.error-bar {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.pager {
|
||||
margin-top: 12px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user