ZYT/zyt
2
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

Merge branch 'master' into cs

Browse Source
This commit is contained in:
Your Name
2026-05-05 13:30:23 +08:00
parent d6e105f912 1d6a2b9cbf
commit c03e7051d7
4 changed files with 1304 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
admin/src/views/stats/conversion/index.vue
+187 -23
View File
@@ -105,24 +105,27 @@
</div>
<el-row :gutter="20" class="mt-4">
<el-col :xs="24" :lg="14">
<el-col :span="24">
<el-card class="!border-none" shadow="never">
<template #header>
<div class="card-header">
<span>转化排行</span>
<span class="card-hint">{{ dateRangeText }}</span>
<span class="card-hint">{{ dateRangeText }} · TOP 10</span>
</div>
</template>
<v-charts
v-if="rankingChartHasData"
class="stats-chart"
class="stats-chart stats-chart-wide"
:option="rankingChartOption"
autoresize
/>
<el-empty v-else description="暂无图表数据" />
</el-card>
</el-col>
<el-col :xs="24" :lg="10">
</el-row>
<el-row :gutter="20" class="mt-4">
<el-col :xs="24" :lg="12">
<el-card class="!border-none" shadow="never">
<template #header>
<div class="card-header">
@@ -139,10 +142,7 @@
<el-empty v-else description="暂无金额数据" />
</el-card>
</el-col>
</el-row>
<el-row :gutter="20" class="mt-4">
<el-col :xs="24" :lg="10">
<el-col :xs="24" :lg="12">
<el-card class="!border-none" shadow="never">
<template #header>
<div class="card-header">
@@ -159,35 +159,82 @@
<el-empty v-else description="暂无加粉数据" />
</el-card>
</el-col>
<el-col :xs="24" :lg="14">
<el-card class="!border-none" shadow="never">
</el-row>
<el-row :gutter="20" class="mt-4">
<el-col :span="24">
<el-card class="!border-none stats-detail-card" shadow="never">
<template #header>
<div class="card-header">
<span>明细列表</span>
<span class="card-hint">{{ entityLabel }}维度</span>
<div class="card-header-main">
<span class="card-title">明细列表</span>
<span class="card-hint">{{ entityLabel }}维度 · {{ dateRangeText }}</span>
</div>
</div>
</template>
<el-table
:data="pager.lists"
:row-key="queryParams.dimension === 'dept' ? 'id' : undefined"
:row-key="rowKeyFn"
:tree-props="queryParams.dimension === 'dept' ? treeProps : undefined"
:default-expand-all="false"
size="large"
:indent="20"
:row-class-name="rowClassName"
size="default"
style="width: 100%"
max-height="560"
max-height="640"
border
>
<el-table-column
:label="entityLabel"
prop="name"
fixed="left"
min-width="280"
min-width="300"
class-name="dept-name-column"
show-overflow-tooltip
>
<template #default="{ row }">
<span class="dept-name-cell" :title="row.name">
{{ row.name }}
</span>
<div class="dept-name-cell" :title="row.name">
<span
v-if="isMemberRow(row)"
class="member-icon"
:class="{
'is-leader': row.is_leader,
'is-unbound': row.type === 'unbound'
}"
>
<el-icon><User /></el-icon>
</span>
<span class="entity-name">{{ row.name }}</span>
<el-tag
v-if="row.type === 'member' && row.is_leader"
size="small"
type="warning"
effect="light"
round
class="role-tag"
>
组长
</el-tag>
<el-tag
v-if="row.type === 'member' && row.role"
size="small"
:type="row.role === '医生' ? 'success' : 'info'"
effect="plain"
round
class="role-tag"
>
{{ row.role }}
</el-tag>
<el-tag
v-if="row.type === 'unbound'"
size="small"
type="danger"
effect="plain"
round
class="role-tag"
>
未绑定
</el-tag>
</div>
</template>
</el-table-column>
<el-table-column
@@ -215,6 +262,7 @@
<script setup lang="ts" name="conversionStatsPage">
import { computed, onMounted, reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { User } from '@element-plus/icons-vue'
import vCharts from 'vue-echarts'
import { getConversionStatsOverview } from '@/api/stats'
@@ -619,6 +667,27 @@ const renderMetric = (key: string, source: Record<string, any>, type = 'count',
return String(value ?? 0)
}
const rowKeyFn = (row: Record<string, any>) => {
if (row?.id !== undefined && row?.id !== null) {
return String(row.id)
}
return ''
}
const isMemberRow = (row: Record<string, any>) => {
return row?.type === 'member' || row?.type === 'unbound'
}
const rowClassName = ({ row }: { row: Record<string, any> }) => {
if (row?.type === 'unbound') {
return 'member-row member-row--unbound'
}
if (row?.type === 'member') {
return row.is_leader ? 'member-row member-row--leader' : 'member-row'
}
return ''
}
onMounted(async () => {
await fetchOverview()
})
@@ -672,6 +741,27 @@ onMounted(async () => {
justify-content: space-between;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.card-header-main {
display: flex;
align-items: baseline;
gap: 10px;
}
.card-header-tip {
display: flex;
align-items: center;
gap: 6px;
color: #909399;
font-size: 12px;
}
.card-title {
font-size: 15px;
font-weight: 600;
color: #1f2937;
}
.card-hint {
@@ -680,19 +770,93 @@ onMounted(async () => {
}
.dept-name-cell {
display: inline-block;
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: 6px;
max-width: 100%;
white-space: nowrap;
width: 100%;
line-height: 1.4;
overflow: hidden;
}
.entity-name {
flex: 1 1 0;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
white-space: nowrap;
color: inherit;
}
.member-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: #e6f0ff;
color: #4a78ff;
font-size: 13px;
flex-shrink: 0;
}
.member-icon.is-leader {
background: #fff4e0;
color: #f59e0b;
}
.member-icon.is-unbound {
background: #fde8e8;
color: #ef4444;
}
.role-tag {
margin-left: 0;
flex-shrink: 0;
}
:deep(.dept-name-column .cell) {
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
display: flex;
align-items: center;
}
:deep(.member-row) td {
background-color: #fafbff !important;
}
:deep(.member-row--leader) td {
background-color: #fff8ec !important;
}
:deep(.member-row--leader .entity-name) {
color: #d97706;
font-weight: 600;
}
:deep(.member-row--unbound) td {
background-color: #fff5f5 !important;
}
:deep(.member-row--unbound .entity-name) {
color: #ef4444;
font-family: monospace;
font-size: 12px;
}
.stats-detail-card :deep(.el-card__body) {
padding-top: 0;
}
.stats-chart {
height: 360px;
}
.stats-chart-wide {
height: 380px;
}
</style>