fix: 补齐渠道全量合计筛选导出及有效端目标遗漏

This commit is contained in:
Yvan
2026-11-05 10:57:06 +08:00
parent 297a892518
commit 1aa15d3dc8
22 changed files with 545 additions and 88 deletions
+29 -11
View File
@@ -1,21 +1,27 @@
<template>
<div class="sw-page">
<div class="channel-status-summary"><el-card v-for="card in statusCards" :key="card.label" shadow="never"><el-tooltip content="统计当前筛选结果的全部渠道,正常、锁定、解除合作三类互斥,合计等于渠道数量。"><span>{{ card.label }}</span></el-tooltip><strong>{{ card.value == null ? '—' : channelCount(card.value) }}</strong></el-card></div>
<div class="kra-search-box">
<el-form :model="query" :inline="true" @submit.prevent="search">
<el-form-item label="所属平台"><el-select v-model="sources" multiple collapse-tags clearable placeholder="选择平台" style="width: 210px"><el-option v-for="(label, value) in platforms" :key="value" :label="label" :value="value" /></el-select></el-form-item>
<el-form-item label="商务账号"><el-input v-model="query.busierAccount" clearable placeholder="新商务 / SDK 商务账号" /></el-form-item>
<el-form-item label="渠道名称"><el-input v-model="query.keyword" clearable placeholder="渠道名称 / 账号 / 负责人" /></el-form-item>
<el-form-item label="手机号"><el-input v-model="query.phone" clearable placeholder="支持部分号码" /></el-form-item>
<el-form-item label="结算周期"><el-select v-model="query.settlementDays" clearable placeholder="全部周期" style="width:130px"><el-option label="1 天(日结)" :value="1" /><el-option label="7 天(周结)" :value="7" /></el-select></el-form-item>
<el-form-item label="渠道层级"><el-select v-model="query.promoteLevel" clearable placeholder="全部层级" style="width: 140px"><el-option v-for="(label, value) in levels" :key="value" :label="label" :value="Number(value)" /></el-select></el-form-item>
<el-form-item label="渠道类型"><el-select v-model="query.registerType" clearable placeholder="全部类型" style="width: 140px"><el-option label="个人" :value="0" /><el-option label="公会" :value="1" /></el-select></el-form-item>
<el-form-item label="锁定状态"><el-select v-model="query.lockStatus" clearable placeholder="全部状态" style="width: 140px"><el-option v-for="(label, value) in statuses" :key="value" :label="label" :value="Number(value)" /></el-select></el-form-item>
<el-form-item label="状态"><el-select v-model="query.lockStatus" clearable placeholder="全部状态" style="width: 140px"><el-option v-for="(label, value) in statuses" :key="value" :label="label" :value="Number(value)" /></el-select></el-form-item>
<el-form-item label="有效端"><el-select v-model="query.effective" clearable placeholder="全部" style="width:120px"><el-option label="是" :value="true" /><el-option label="否" :value="false" /></el-select></el-form-item>
<el-form-item label="注册时间"><el-date-picker v-model="createdDates" type="daterange" value-format="YYYY-MM-DD" start-placeholder="注册开始时间" end-placeholder="注册结束时间" style="width:290px" /></el-form-item>
<el-form-item label="登录时间"><el-date-picker v-model="loginDates" type="daterange" value-format="YYYY-MM-DD" start-placeholder="登录开始时间" end-placeholder="登录结束时间" style="width:290px" /></el-form-item>
<el-form-item><el-button type="primary" icon="search" native-type="submit">搜索</el-button></el-form-item>
</el-form>
</div>
<div class="kra-table-box">
<div class="kra-btn-list"><el-button v-if="canAdd" type="primary" icon="plus" @click="adding = true">添加渠道</el-button></div>
<el-alert v-if="!available" class="mb-4" type="warning" :closable="false" title="渠道数据尚未接入。" />
<el-table scrollbar-always-on v-loading="loading" :data="rows" :row-key="row => `${row.sourceDb}:${row.id}`">
<el-alert v-if="error" class="mb-4" type="error" :closable="false" :title="error" />
<el-table scrollbar-always-on v-loading="loading" :data="rows" :row-key="row => `${row.sourceDb}:${row.id}`" @sort-change="sortChanged">
<el-table-column prop="platformName" label="所属平台" width="104"><template #default="{ row }"><platform-tag :code="row.sourceDb" :label="row.platformName" /></template></el-table-column>
<el-table-column prop="id" label="ID" min-width="90" class-name="sw-col-meta" />
<el-table-column prop="account" label="渠道名称" class-name="sw-col-identity" min-width="150" show-overflow-tooltip />
@@ -23,14 +29,17 @@
<el-table-column prop="busierDisplayName" label="归属商务" min-width="200" show-overflow-tooltip />
<el-table-column label="上级渠道" min-width="130" show-overflow-tooltip><template #default="{ row }">{{ row.parentName || '—' }}</template></el-table-column>
<el-table-column label="负责人" min-width="100"><template #default="{ row }">{{ row.realName || '—' }}</template></el-table-column>
<el-table-column prop="phone" label="手机号" min-width="130" class-name="sw-col-meta"><template #default="{ row }">{{ row.phone || '—' }}</template></el-table-column>
<el-table-column label="结算周期" width="110"><template #default="{ row }">{{ row.settlementDays == null ? '—' : `${row.settlementDays} 天` }}</template></el-table-column>
<el-table-column label="渠道类型" min-width="100"><template #default="{ row }"><el-tag v-if="row.registerType === 0 || row.registerType === 1" size="small" :type="row.registerType === 1 ? 'warning' : 'info'" effect="plain">{{ row.registerType === 1 ? '公会' : '个人' }}</el-tag><span v-else class="sw-empty-value">—</span></template></el-table-column>
<el-table-column label="推广游戏" min-width="115"><template #default="{ row }"><el-button v-if="row.gameCount != null" link type="primary" @click="openGames(row)">{{ channelCount(row.gameCount) }} 款</el-button><span v-else>未接入</span></template></el-table-column>
<el-table-column label="玩家数量" min-width="110" align="right" class-name="sw-col-number"><template #default="{ row }"><metric-value :value="row.playerCount" /></template></el-table-column>
<el-table-column label="累计充值" min-width="150" align="right" class-name="sw-col-number"><template #default="{ row }"><metric-value kind="money" :value="row.totalPayAmount" /></template></el-table-column>
<el-table-column label="注册时间" min-width="120" class-name="sw-col-meta"><template #default="{ row }">{{ dateText(row.createdAt) }}</template></el-table-column>
<el-table-column prop="createdAt" label="注册时间" min-width="150" sortable="custom" :sort-orders="['descending','ascending',null]" class-name="sw-col-meta"><template #default="{ row }">{{ dateText(row.createdAt) }}</template></el-table-column>
<el-table-column label="最后登录时间" min-width="150" class-name="sw-col-meta"><template #default="{ row }">{{ row.lastLoginAt ? dateText(row.lastLoginAt) : '—' }}</template></el-table-column>
<el-table-column label="有效端" width="100"><template #default="{ row }"><el-tag size="small" :type="row.effective ? 'success' : 'info'">{{ row.effective ? '是' : '否' }}</el-tag></template></el-table-column>
<el-table-column label="达标时间" min-width="120" class-name="sw-col-meta"><template #default="{ row }">{{ dateText(row.qualifiedAt) }}</template></el-table-column>
<el-table-column label="锁定状态" min-width="110"><template #default="{ row }"><el-tag size="small" :type="{ 0: 'success', '-1': 'danger', '-2': 'info' }[row.lockStatus] || 'info'" effect="plain">{{ statuses[row.lockStatus] ?? row.lockStatus ?? '—' }}</el-tag></template></el-table-column>
<el-table-column label="状态" min-width="110"><template #default="{ row }"><el-tag size="small" :type="{ 0: 'success', '-1': 'danger', '-2': 'info' }[row.lockStatus] || 'info'" effect="plain">{{ statuses[row.lockStatus] ?? row.lockStatus ?? '—' }}</el-tag></template></el-table-column>
<el-table-column label="操作" width="90" fixed="right"><template #default="{ row }"><el-button type="primary" link @click="openProfile(row)">画像</el-button></template></el-table-column>
</el-table>
<div class="kra-pagination"><el-pagination v-model:current-page="query.pageNum" v-model:page-size="query.pageSize" :total="total" :page-sizes="[10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" @size-change="search" @current-change="load" /></div>
@@ -64,7 +73,9 @@ const platforms = { lx: '龙翔', hw: '汇玩', yq: '游趣' }
const levels = { 1: '一级渠道', 2: '二级渠道', 3: '三级渠道' }
const statuses = { 0: '正常', '-1': '已锁定', '-2': '解除合作' }
const sources = ref(Object.keys(platforms))
const query = reactive({ pageNum: 1, pageSize: 10, busierAccount: '', keyword: '', promoteLevel: undefined, registerType: undefined, lockStatus: undefined, effective: undefined })
const query = reactive({ pageNum: 1, pageSize: 10, busierAccount: '', keyword: '', phone: '', settlementDays: undefined, promoteLevel: undefined, registerType: undefined, lockStatus: undefined, effective: undefined, sortField: '', sortOrder: '' })
const createdDates = ref([]), loginDates = ref([]), statusCounts = ref(null), error = ref('')
const statusCards = computed(() => [{ label: '渠道数量', value: statusCounts.value ? total.value : null }, { label: '正常渠道', value: statusCounts.value?.normal }, { label: '锁定渠道', value: statusCounts.value?.locked }, { label: '解除合作', value: statusCounts.value?.terminated }])
const rows = ref([])
const total = ref(0)
const available = ref(true)
@@ -78,16 +89,23 @@ const openProfile = row => { profileChannel.value = row; profileOpen.value = tru
let requestVersion = 0
const load = async () => {
const version = ++requestVersion
if (!sources.value.length) { rows.value = []; total.value = 0; available.value = true; loading.value = false; return }
loading.value = true
if (!sources.value.length) { rows.value = []; total.value = 0; statusCounts.value = null; error.value = ''; available.value = true; loading.value = false; return }
loading.value = true; error.value = ''
try {
const res = await listChannels({ ...query, sourceDb: sources.value.join(','), busierAccount: query.busierAccount.trim(), keyword: query.keyword.trim() })
const res = await listChannels({ ...query, sourceDb: sources.value.join(','), busierAccount: query.busierAccount.trim(), keyword: query.keyword.trim(), phone: query.phone.trim(), createdBegin: createdDates.value?.[0] || '', createdEnd: createdDates.value?.[1] || '', loginBegin: loginDates.value?.[0] || '', loginEnd: loginDates.value?.[1] || '' })
if (version !== requestVersion) return
if (res.code === 0) { rows.value = res.data.rows; total.value = res.data.total; available.value = res.data.available !== false }
else { rows.value = []; total.value = 0 }
} catch { if (version === requestVersion) { rows.value = []; total.value = 0 } } finally { if (version === requestVersion) loading.value = false }
if (res.code === 0) { rows.value = res.data.rows; total.value = res.data.total; statusCounts.value = res.data.available === false ? null : res.data.statusCounts; available.value = res.data.available !== false }
else { rows.value = []; total.value = 0; statusCounts.value = null; error.value = res.msg || '渠道查询失败' }
} catch { if (version === requestVersion) { rows.value = []; total.value = 0; statusCounts.value = null; error.value = '渠道查询失败,请重试' } } finally { if (version === requestVersion) loading.value = false }
}
const sortChanged = ({ prop, order }) => { query.sortField = order ? prop : ''; query.sortOrder = order === 'ascending' ? 'asc' : 'desc'; return search() }
const search = () => { query.pageNum = 1; if (!sources.value.length) ElMessage.warning('请选择平台'); return load() }
const openGames = row => { selected.value = row; gamesOpen.value = true }
onMounted(load)
</script>
<style scoped>
.channel-status-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin-bottom: 16px; }
.channel-status-summary span { color: var(--el-text-color-secondary); font-size: 13px; }
.channel-status-summary strong { display: block; font-size: 26px; margin-top: 10px; }
@media(max-width:600px) { .channel-status-summary { grid-template-columns: repeat(2,minmax(0,1fr)); } }
</style>
@@ -25,6 +25,7 @@
<el-alert v-if="error || metricError" :title="error || metricError" type="error" :closable="false" class="mb-3" />
<el-table scrollbar-always-on v-if="tab === 'accounts'" v-loading="loading" :data="pagedMembers" row-key="userId" @sort-change="sortMembers">
<el-table-column prop="userId" label="ID" width="80" class-name="sw-col-meta" />
<el-table-column prop="groupName" label="小组" width="125" sortable="custom"><template #default="{ row }">{{ row.groupName || '—' }}</template></el-table-column>
<el-table-column prop="userName" label="商务账号" class-name="sw-col-identity" min-width="130" show-overflow-tooltip />
<el-table-column label="商务等级" width="105"><template #default="{ row }"><level-tag :level="row.level" /></template></el-table-column>
<el-table-column prop="parentUserName" label="上级商务" min-width="120" show-overflow-tooltip />
@@ -34,7 +35,6 @@
<el-table-column v-for="metric in ['open', 'effective']" :key="metric" :label="metric === 'open' ? '开端数' : '有效端数'" width="105"><template #header><el-tooltip :content="periodTip"><span>{{ metric === 'open' ? '开端数' : '有效端数' }}</span></el-tooltip></template><template #default="{ row }"><el-button v-if="row.metrics?.[metric]" link :class="metric" @click="details(row, metric)">{{ row.metrics[metric] }}</el-button><span v-else :class="metric">{{ metricLoading ? '…' : row.metrics ? 0 : '—' }}</span></template></el-table-column>
<el-table-column label="有效率" width="90"><template #default="{ row }"><span :class="row.rate != null && Number(row.rate) < 50 ? 'low-rate' : 'effective'">{{ row.rate == null ? '—' : `${row.rate}%` }}</span></template></el-table-column>
<el-table-column prop="hireDate" label="入职日期" width="115" class-name="sw-col-meta"><template #default="{ row }">{{ row.hireDate || '—' }}</template></el-table-column>
<el-table-column prop="groupName" label="小组" width="125" sortable="custom"><template #default="{ row }">{{ row.groupName || '—' }}</template></el-table-column>
<el-table-column label="在职状态" width="100"><template #default="{ row }"><el-tag size="small" :type="employmentTypes[row.employment]">{{ employmentLabels[row.employment] }}</el-tag></template></el-table-column>
<el-table-column label="操作" width="195" fixed="right"><template #default="{ row }"><el-button link type="primary" @click="showPortrait(row)">画像</el-button><el-button v-if="row.canEdit" link type="primary" @click="openEdit(row)">编辑</el-button><el-button v-if="row.canSetGoal" link type="primary" @click="openGoal('person', row.userId, displayMember(row))">设目标</el-button></template></el-table-column>
</el-table>
@@ -126,7 +126,7 @@ const showBindings = row => { selectedID.value = row.userId; bindingsOpen.value
const showPortrait = row => { selectedID.value = row.userId; selectedName.value = displayMember(row); portraitOpen.value = true }
const memberDrawer = ref(false), editing = ref(false), memberForm = ref(), saving = ref(false), form = ref({})
const rules = computed(() => ({ userName: [{ required: true, message: '请输入商务账号' }], realName: [{ required: true, message: '请输入负责人姓名' }], hireDate: [{ required: true, message: '请选择入职日期' }], phoneNumber: [{ pattern: /^[0-9 -]*$/, message: '联系电话只允许数字、空格和短横线', trigger: 'blur' }], password: [{ validator: (_r, value, cb) => cb((editing.value && !value || value?.length >= 5 && value.length <= 50) ? undefined : new Error('密码为5至50个字符')) }] }))
const openCreate = () => { editing.value = false; form.value = { userName: '', realName: '', phoneNumber: '', hireDate: '', password: '' }; memberDrawer.value = true }
const openCreate = () => { const today = new Date(); editing.value = false; form.value = { userName: '', realName: '', phoneNumber: '', hireDate: `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`, password: '' }; memberDrawer.value = true }
const openEdit = row => { editing.value = true; form.value = { ...row, password: '' }; memberDrawer.value = true }
const saveMember = async () => { if (saving.value || !await memberForm.value.validate().catch(() => false)) return; saving.value = true; try { const data = editing.value ? { userId: form.value.userId, realName: form.value.realName, phoneNumber: form.value.phoneNumber, hireDate: form.value.hireDate, employment: form.value.employment, password: form.value.password } : { ...form.value, nickName: form.value.realName, status: '0' }; const res = await (editing.value ? updateMember(data) : createBusiness(data)); if (res.code === 0) { ElMessage.success('保存成功'); memberDrawer.value = false; await refresh() } } finally { saving.value = false } }
onMounted(refresh)
+3 -3
View File
@@ -4,7 +4,7 @@
<el-alert v-if="error" :title="error" type="warning" :closable="false" />
<div v-for="row in rows" :key="row.key" class="goal-row">
<span>{{ row.label }}</span><strong>{{ displayMetric(row.key, row.actual) }} / {{ displayTarget(row.goal, row.target) }}</strong>
<div class="goal-progress"><span><i :class="{ achieved: row.achieved }" :style="{ width: `${progressWidth(row.rate)}%` }" /></span><small>{{ rateText(row.rate) }}</small></div>
<div class="goal-progress"><span><i :class="{ achieved: row.achieved }" :style="{ width: `${row.target === 0 && row.achieved ? 100 : progressWidth(row.rate)}%` }" /></span><small>{{ rateText(row.rate) }}</small></div>
<el-tag :type="row.achieved ? 'success' : 'primary'">{{ row.achieved ? '已达标' : '未达标' }}</el-tag>
</div>
</el-card>
@@ -12,9 +12,9 @@
<script setup>
import { computed, onMounted, ref } from 'vue'
import { getMyGoal } from '@/api/performance'
import { performanceMetrics, displayMetric, displayTarget, completionRate, progressWidth, rateText, goalAchieved } from '../performance-display'
import { displayMetric, displayTarget, progressWidth, rateText, personalGoalRows } from '../performance-display'
const data = ref(null), error = ref(''), loading = ref(false)
const rows = computed(() => performanceMetrics.filter(metric => Number(data.value?.goal?.[metric.goal]) > 0).map(metric => { const target = data.value.goal[metric.goal], actual = data.value.actual[metric.key]; return { ...metric, target, actual, rate: completionRate(actual, target), achieved: goalAchieved(actual, target, metric.key) } }))
const rows = computed(() => personalGoalRows(data.value))
onMounted(async () => { loading.value = true; try { const res = await getMyGoal(); if (res.code === 0) data.value = res.data; else error.value = res.msg || '本月目标读取失败' } catch { error.value = '本月目标读取失败,请刷新重试' } finally { loading.value = false } })
</script>
<style scoped>
+47 -26
View File
@@ -1,8 +1,5 @@
<template>
<div class="sw-page">
<div v-if="isChannel" v-loading="loading" class="report-cards">
<el-card v-for="card in cards" :key="card.label" shadow="never"><div class="report-card-label">{{ card.label }}</div><strong>{{ card.value }}</strong></el-card>
</div>
<div class="kra-search-box">
<el-form :model="query" :inline="true" @submit.prevent="search">
<el-form-item label="所属平台"><el-select v-model="sources" multiple collapse-tags clearable placeholder="选择平台" style="width: 210px" @change="sourceChanged"><el-option v-for="(label, value) in platforms" :key="value" :label="label" :value="value" /></el-select></el-form-item>
@@ -12,7 +9,10 @@
</el-form-item>
<el-form-item v-if="isChannel" label="渠道类型"><el-select v-model="query.promoteType" clearable placeholder="全部渠道类型" style="width: 150px"><el-option label="公会" :value="1" /><el-option label="个人" :value="0" /></el-select></el-form-item>
<el-form-item v-if="isChannel" label="渠道名称"><el-input v-model="query.promoteName" clearable placeholder="渠道名称或账号" /></el-form-item>
<el-form-item label="统计时间"><el-date-picker v-model="dates" type="daterange" value-format="YYYY-MM-DD" start-placeholder="开始日期" end-placeholder="结束日期" range-separator="至" :clearable="false" :shortcuts="shortcuts" style="width: 300px" /></el-form-item>
<el-form-item v-if="isChannel" label="是否有注册"><el-select v-model="query.hasRegister" clearable placeholder="全部" style="width:130px" @change="search"><el-option label="有注册" :value="true" /><el-option label="无注册" :value="false" /></el-select></el-form-item>
<el-form-item v-if="isChannel" label="是否有充值"><el-select v-model="query.hasPay" clearable placeholder="全部" style="width:130px" @change="search"><el-option label="有充值" :value="true" /><el-option label="无充值" :value="false" /></el-select></el-form-item>
<el-form-item v-if="isChannel" label="统计时间"><div class="report-date-range"><el-date-picker v-model="dates[0]" type="date" value-format="YYYY-MM-DD" placeholder="统计开始时间" :shortcuts="startShortcuts" clearable /><span>至</span><el-date-picker v-model="dates[1]" type="date" value-format="YYYY-MM-DD" placeholder="统计结束时间" :shortcuts="endShortcuts" clearable /></div></el-form-item>
<el-form-item v-else label="统计时间"><el-date-picker v-model="dates" type="daterange" value-format="YYYY-MM-DD" start-placeholder="开始日期" end-placeholder="结束日期" range-separator="至" :clearable="false" :shortcuts="shortcuts" style="width: 300px" /></el-form-item>
<el-form-item><el-button type="primary" icon="search" native-type="submit">{{ isChannel ? '搜索' : '查询' }}</el-button></el-form-item>
</el-form>
</div>
@@ -20,30 +20,31 @@
<div v-if="!isChannel" class="report-heading"><strong>核心指标</strong><el-text type="info">统计周期:{{ period }}</el-text></div>
<el-alert v-if="error" class="mb-4" type="error" :closable="false" :title="error" />
<el-alert v-else-if="!available" class="mb-4" type="warning" :closable="false" title="统计所需业务汇总尚未接入。" />
<div class="sw-table-toolbar"><span class="sw-sort-label" role="status">{{ currentSort }}</span></div>
<el-table scrollbar-always-on v-loading="loading" :data="rows" :row-key="row => `${row.sourceDb}:${isChannel ? row.promoteId : row.gameId}`" :default-sort="{ prop: 'totalPay', order: 'descending' }" :show-summary="!isChannel" :summary-method="summaries" @sort-change="sortChanged">
<div class="sw-table-toolbar"><span class="sw-sort-label" role="status">{{ currentSort }}</span><el-button v-if="isChannel" :loading="exporting" :disabled="loading || !loadedQuery || !available" @click="download">导出</el-button></div>
<el-table scrollbar-always-on v-loading="loading" :data="rows" :row-key="row => `${row.sourceDb}:${isChannel ? row.promoteId : row.gameId}`" :default-sort="isChannel ? undefined : { prop: 'totalPay', order: 'descending' }" show-summary :summary-method="summaries" @sort-change="sortChanged">
<el-table-column prop="sourceDbLabel" label="所属平台" width="104"><template #default="{ row }"><platform-tag :code="row.sourceDb" :label="row.sourceDbLabel" /></template></el-table-column>
<el-table-column :prop="isChannel ? 'promoteName' : 'gameName'" :label="isChannel ? '渠道名称' : '游戏名称'" min-width="170" show-overflow-tooltip class-name="sw-col-identity" />
<el-table-column :prop="isChannel ? 'promoteName' : 'gameName'" :label="isChannel ? '渠道名称' : '游戏名称'" min-width="190" show-overflow-tooltip class-name="sw-col-identity"><template #default="{ row }"><el-button v-if="isChannel && row.promoteId > 0" link type="primary" @click="openChannel(row)">{{ row.promoteName }}</el-button><span v-else>{{ isChannel ? row.promoteName : row.gameName }}</span></template></el-table-column>
<el-table-column v-if="isChannel" prop="busierName" label="归属商务" min-width="140" show-overflow-tooltip />
<el-table-column v-if="isChannel" label="渠道类型" min-width="100"><template #default="{ row }"><el-tag v-if="row.promoteType === 0 || row.promoteType === 1" size="small" :type="row.promoteType === 1 ? 'warning' : 'info'" effect="plain">{{ row.promoteType === 1 ? '公会' : '个人' }}</el-tag><span v-else class="sw-empty-value">—</span></template></el-table-column>
<el-table-column v-else prop="gameId" label="游戏ID" min-width="100" sortable="custom" class-name="sw-col-meta" />
<el-table-column v-for="column in columns" :key="column.key" :prop="column.key" :label="column.label" :min-width="column.width || 110" sortable="custom" align="right" class-name="sw-col-number"><template #header><el-tooltip :content="metricTips[column.key]" placement="top"><span>{{ column.label }}</span></el-tooltip></template><template #default="{ row }"><metric-value :kind="column.type" :value="row[column.key]" /></template></el-table-column>
</el-table>
<p v-if="isChannel" class="sw-table-summary">合计:有效端 <el-text type="success">{{ result?.effectiveCount == null ? '未接入' : result.effectiveCount }}</el-text> 个</p>
<div class="kra-pagination"><el-pagination v-model:current-page="query.pageNum" v-model:page-size="query.pageSize" :total="total" :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper" @size-change="search" @current-change="load" /></div>
</div>
<channel-profile-drawer v-if="isChannel" v-model="profileOpen" :channel="profileChannel" />
</div>
</template>
<script setup>
import { computed, onMounted, reactive, ref } from 'vue'
import { computed, h, onMounted, reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { listAnalytics } from '@/api/analytics'
import { listAnalytics, exportChannelAnalytics } from '@/api/analytics'
import { listLedgerGames } from '@/api/ledger'
import { channelCount, channelMoney } from '../channel-display'
import { channelCount } from '../channel-display'
import { createGameOptionsLoader } from '../game-options-loader'
import PlatformTag from './PlatformTag.vue'
import MetricValue from './MetricValue.vue'
import ChannelProfileDrawer from './ChannelProfileDrawer.vue'
import { metricTips, remoteSort, sortDescription } from '../table-display'
import { analysisGameSelection } from '../analysis-game-selection'
const fetchGameOptions = createGameOptionsLoader(listLedgerGames)
@@ -52,39 +53,59 @@ const isChannel = computed(() => props.kind === 'channel')
const platforms = { lx: '龙翔', hw: '汇玩', yq: '游趣' }
const day = () => { const n = new Date(); return new Date(n.getFullYear(), n.getMonth(), n.getDate()) }
const ymd = value => `${value.getFullYear()}-${String(value.getMonth() + 1).padStart(2, '0')}-${String(value.getDate()).padStart(2, '0')}`
const end = day(), begin = day(); if (isChannel.value) begin.setDate(begin.getDate() - 29)
const dates = ref([ymd(begin), ymd(end)])
const dates = ref(isChannel.value ? ['', ''] : [ymd(day()), ymd(day())])
const shortcuts = [
{ text: '今日', value: () => [day(), day()] }, { text: '昨日', value: () => { const d = day(); d.setDate(d.getDate() - 1); return [d, new Date(d)] } },
{ text: '本周', value: () => { const e = day(), b = day(); b.setDate(b.getDate() - (b.getDay() || 7) + 1); return [b, e] } },
{ text: '本月', value: () => { const e = day(); return [new Date(e.getFullYear(), e.getMonth(), 1), e] } }
]
const startShortcuts = shortcuts.map(item => ({ text: item.text, value: () => item.value()[0] }))
const endShortcuts = shortcuts.map(item => ({ text: item.text, value: () => item.value()[1] }))
const sources = ref(Object.keys(platforms)), games = ref([]), gameOptions = ref([]), gameLoading = ref(false)
const selectedGame = computed({ get: () => games.value[0] || '', set: value => { games.value = value ? [value] : [] } })
const query = reactive({ pageNum: 1, pageSize: 10, promoteType: undefined, promoteName: '', sortField: 'totalPay', sortOrder: 'desc' })
const query = reactive({ pageNum: 1, pageSize: 10, promoteType: undefined, promoteName: '', hasRegister: undefined, hasPay: undefined, sortField: isChannel.value ? '' : 'totalPay', sortOrder: 'desc' })
const rows = ref([]), total = ref(0), summary = ref(null), result = ref(null), loading = ref(false), available = ref(true), error = ref('')
const loadedQuery = ref(null), exporting = ref(false)
let version = 0, gameVersion = 0
const period = computed(() => result.value?.beginTime && result.value?.endTime ? `${result.value.beginTime} 至 ${result.value.endTime}` : dates.value.join(' 至 '))
const fields = { newRegisterCount: { key: 'newRegisterCount', label: '新增注册', type: 'count' }, activeCount: { key: 'activeCount', label: '活跃玩家', type: 'count' }, payUserCount: { key: 'payUserCount', label: '付费玩家', type: 'count' }, newPayUserCount: { key: 'newPayUserCount', label: '新增付费', type: 'count' }, totalPay: { key: 'totalPay', label: '充值金额', type: 'money', width: 145 }, payRate: { key: 'payRate', label: '付费率', type: 'percent' }, arpu: { key: 'arpu', label: 'ARPU', type: 'money' }, arppu: { key: 'arppu', label: 'ARPPU', type: 'money' } }
const columns = computed(() => (isChannel.value ? ['newRegisterCount', 'activeCount', 'totalPay', 'payUserCount', 'newPayUserCount', 'payRate'] : ['newRegisterCount', 'activeCount', 'payUserCount', 'totalPay', 'payRate', 'arpu', 'arppu', 'newPayUserCount']).map(key => fields[key]))
const format = (type, value) => value == null ? '未接入' : type === 'money' ? channelMoney(value) : type === 'percent' ? `${value}%` : channelCount(value)
const cards = computed(() => [{ label: '渠道总数', key: 'channelCount', type: 'count' }, { label: '渠道总注册玩家', key: 'totalRegisterCount', type: 'count' }, { label: '渠道总充值', key: 'totalPayAmount', type: 'money' }, { label: '平均付费率', key: 'avgPayRate', type: 'percent' }].map(card => ({ label: card.label, value: error.value ? '未获取' : format(card.type, result.value?.[card.key]) })))
const summaries = ({ columns: tableColumns }) => tableColumns.map((column, index) => { if (index === 0) return '全部游戏'; if (index === 1) return ''; const field = fields[column.property]; return field ? format(field.type, summary.value?.[column.property]) : '' })
const clear = () => { rows.value = []; total.value = 0; summary.value = null; result.value = null }
const summaries = ({ columns: tableColumns }) => tableColumns.map((column, index) => {
if (index === 0) return isChannel.value ? '全部' : '全部游戏'
if (index === 1) return isChannel.value ? h('span', { class: 'report-summary-title', title: '合计覆盖当前筛选结果的全部页;有效端按所选区间内达标的渠道数统计。' }, [h('strong', '合计'), h('span', '有效端 '), h('strong', { class: 'report-effective-count' }, result.value?.effectiveCount == null ? '—' : channelCount(result.value.effectiveCount))]) : ''
const field = fields[column.property]
return field ? summary.value ? h(MetricValue, { kind: field.type, value: summary.value[column.property] }) : '—' : isChannel.value ? '—' : ''
})
const profileOpen = ref(false), profileChannel = ref(null)
const openChannel = row => { profileChannel.value = { id: row.promoteId, sourceDb: row.sourceDb, account: row.promoteName }; profileOpen.value = true }
const clear = () => { rows.value = []; total.value = 0; summary.value = null; result.value = null; loadedQuery.value = null }
const load = async () => {
if (dates.value[0] && dates.value[1] && dates.value[0] > dates.value[1]) { ElMessage.warning('统计开始时间不能晚于结束时间'); return }
const current = ++version
if (!sources.value.length) { clear(); loading.value = false; available.value = true; return }
loading.value = true; error.value = ''
try {
const res = await listAnalytics(props.kind, { ...query, promoteName: query.promoteName.trim(), sourceDb: sources.value.join(','), gameName: games.value.join(','), beginTime: dates.value[0], endTime: dates.value[1] })
const requested = { ...query, promoteName: query.promoteName.trim(), sourceDb: sources.value.join(','), gameName: games.value.join(','), beginTime: dates.value[0] || '', endTime: dates.value[1] || '' }
const res = await listAnalytics(props.kind, requested)
if (current !== version) return
if (res.code === 0) { result.value = res.data; rows.value = res.data.rows; total.value = res.data.total; summary.value = res.data.summary; available.value = res.data.available !== false }
if (res.code === 0) { result.value = res.data; rows.value = res.data.rows; total.value = res.data.total; summary.value = res.data.summary; available.value = res.data.available !== false; loadedQuery.value = requested }
else { clear(); error.value = res.msg || '统计查询失败' }
} catch { if (current === version) { clear(); error.value = '统计查询失败,请重试' } } finally { if (current === version) loading.value = false }
}
const download = async () => {
if (exporting.value || loading.value || !loadedQuery.value) return
exporting.value = true
try {
const response = await exportChannelAnalytics(loadedQuery.value), blob = response instanceof Blob ? response : response.data
if (!(blob instanceof Blob)) return
if (blob.type.includes('json')) { const data = JSON.parse(await blob.text()); ElMessage.error(data.msg || '导出失败'); return }
const url = URL.createObjectURL(blob), link = document.createElement('a')
link.href = url; link.download = '渠道数据统计.xlsx'; link.click(); setTimeout(() => URL.revokeObjectURL(url), 1000)
} catch { ElMessage.error('导出失败,请重试') } finally { exporting.value = false }
}
const search = () => { query.pageNum = 1; if (!sources.value.length) ElMessage.warning('请选择平台'); return load() }
const sortChanged = event => { Object.assign(query, remoteSort(event, 'totalPay')); return search() }
const currentSort = computed(() => sortDescription(query, { ...Object.fromEntries(Object.values(fields).map(f => [f.key, f.label])), gameId: '游戏ID' }))
const sortChanged = event => { Object.assign(query, remoteSort(event, isChannel.value ? '' : 'totalPay')); return search() }
const currentSort = computed(() => query.sortField ? sortDescription(query, { ...Object.fromEntries(Object.values(fields).map(f => [f.key, f.label])), gameId: '游戏ID' }) : '排序:默认顺序')
const gameChanged = () => { analysisGameSelection.value = selectedGame.value; return search() }
const sourceChanged = async () => {
++version; ++gameVersion; games.value = []; gameOptions.value = []; gameLoading.value = false; loading.value = false; error.value = ''; clear()
@@ -107,9 +128,9 @@ onMounted(async () => {
</script>
<style scoped>
.report-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.report-card-label { color: var(--el-text-color-secondary); font-size: 13px; margin-bottom: 12px; }
.report-cards strong { font-size: 25px; overflow-wrap: anywhere; }
.report-date-range { display: flex; align-items: center; gap: 8px; }
.report-date-range :deep(.el-date-editor) { width: 165px; }
:deep(.report-summary-title) { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
:deep(.report-effective-count) { color: var(--el-color-success); }
.report-heading { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
@media (max-width: 800px) { .report-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
</style>
+5 -1
View File
@@ -8,7 +8,11 @@ export const displayMember = member => member?.nickName || member?.userName || '
export const displayMetric = (key, value) => value == null ? '—' : key === 'pay' || key === 'amount' ? channelMoney(value) : channelCount(value)
export const displayTarget = (key, value) => value == null ? '—' : key === 'amount' ? channelMoney(value) : Number(value).toLocaleString('zh-CN', { maximumFractionDigits: 2 })
export const completionRate = (actual, target) => target == null || Number(target) <= 0 ? null : Number(actual || 0) / Number(target) * 100
export const goalAchieved = (actual, target, key) => target != null && Number(target) > 0 && (key === 'pay' ? compareAmounts(actual, String(target)) >= 0 : Number(actual) >= target)
export const goalAchieved = (actual, target, key) => actual != null && target != null && Number(target) >= 0 && (key === 'pay' ? compareAmounts(actual, String(target)) >= 0 : Number(actual) >= target)
export const personalGoalRows = data => performanceMetrics.filter(metric => data?.goal?.[metric.goal] != null).map(metric => {
const target = data.goal[metric.goal], actual = data.actual?.[metric.key]
return { ...metric, target, actual, rate: completionRate(actual, target), achieved: goalAchieved(actual, target, metric.key) }
})
export const rateText = rate => rate == null ? '—' : `${rate.toFixed(1)}%`
export const progressWidth = rate => Math.max(0, Math.min(100, rate || 0))
export const dateText = value => value == null ? '—' : new Date(Number(value) * 1000).toLocaleDateString('zh-CN').replaceAll('/', '-')
+10 -2
View File
@@ -1,15 +1,23 @@
import test from 'node:test'
import assert from 'node:assert/strict'
import { goalAchieved, completionRate, hasGoal, monthOffset } from './performance-display.js'
import { goalAchieved, completionRate, hasGoal, monthOffset, personalGoalRows } from './performance-display.js'
test('goal attainment compares exact cents even when rounded percentages look complete', () => {
assert.equal(goalAchieved('9007199254740990.99', 9007199254740991, 'pay'), false)
assert.equal(goalAchieved('9007199254740991.00', 9007199254740991, 'pay'), true)
assert.equal(goalAchieved('100.00', 0, 'pay'), false)
assert.equal(goalAchieved('100.00', 0, 'pay'), true)
assert.equal(goalAchieved(10, 10, 'open'), true)
assert.equal(completionRate(12, 10), 120)
})
test('zero targets remain visible and attainable while blank targets hide their rows', () => {
const rows = personalGoalRows({ goal: { open: 0, effective: null, amount: 0 }, actual: { open: 0, effective: 3, pay: '0.00' } })
assert.deepEqual(rows.map(row => row.key), ['open', 'pay'])
assert.ok(rows.every(row => row.achieved && row.rate === null))
assert.deepEqual(personalGoalRows({ goal: { open: null, effective: null, amount: null } }), [])
assert.equal(goalAchieved(null, 0, 'open'), false)
})
test('empty and zero targets stay distinct and year boundaries retain the month', () => {
assert.equal(hasGoal({ open: null, effective: null, amount: null }), false)
assert.equal(hasGoal({ open: 0, effective: null, amount: null }), true)