feat(dashboard): M4 �� ����̨������ #2
@ -188,15 +188,15 @@ E2E_ADMIN_PASSWORD=<开发库admin密码> python e2e/system_management.py
|
||||
| 页面 | 说明 |
|
||||
| --- | --- |
|
||||
| `/reports/personal-detail` 个人绩效明细（新组「报表统计」order19） | 人员/月份/客户类型/产品类别/岗位筛选；需规 2.4.1 全部列；行展开懒加载台账快照；页脚**全筛选合计**（注明非当前页）；导出/打印 |
|
||||
| `/reports/department-summary` 部门绩效汇总（order20） | 月份必填；全公司 5% 独立卡片；团队表（基数/12.5%/5%/占比/调整/净合计/月结冻结额）；展开成员 → 跨页下钻个人明细；未分配桶 |
|
||||
| `/reports/department-summary` 部门绩效汇总（order20） | 月份必填；全公司分成独立卡片；团队表（基数/团队分成/全公司分成/占比/调整/净合计/月结冻结额），比例列头随在线参数变化；展开成员 → 跨页下钻个人明细（人员与月份带入筛选）；未分配桶（按经理筛选时为空） |
|
||||
| `/reports/business-stats` 业务统计（order21） | 关键字/客户/归属人/状态/业务日期；发货额/回款额/绩效（累计口径提示）；展开下钻回款与台账明细 |
|
||||
| `/reports/payment-stats` 回款统计（order22） | 月份/回款日期/客户类型/产品类别；8 档区间表（空桶 0，档位由后端下发）；展开桶下钻分页明细；客户类型/产品类别对比表 |
|
||||
| `/reports/print/:code` 报表打印（顶层路由，`menu:false`） | 不挂 BasicLayout（打印不带侧栏/顶栏）；页眉公司信息走 public 端点；循环翻页取全量（上限 2000 行截断提示）；`@media print` A4 横版 + 每页表头；签字栏；PDF 由浏览器「另存为」覆盖 |
|
||||
| `/reports/print/:code` 报表打印（顶层路由，`menu:false`） | 不挂 BasicLayout（打印不带侧栏/顶栏）；页眉公司信息走 public 端点；循环翻页取全量（以接口 total 判定超过 2000 行并提示截断）；部门汇总按「团队分成 → 全公司 5% → 对账 → 成员明细 → 未分配」五块渲染；`@media print` A4 横版 + 每页表头；签字栏；PDF 由浏览器「另存为」覆盖 |
|
||||
|
||||
- 路由组「报表统计」四页 `allowedRoles: [admin, finance, leader]`（前端菜单 + 后端 `require_roles` 双层；admin 须显式列入）。
|
||||
- api 封装 `src/api/reports.ts`（类型 + 查询 + `exportReport` 裸 axios blob；产品类别标签额外覆盖 `mixed`）。
|
||||
- 权限：营销后勤「授权范围内」待业务权限清单 #6，当前不开放报表。
|
||||
- type-check 与 build 通过（2026-10-19）。e2e `report_flow.py` 待补（需 `E2E_ADMIN_PASSWORD` 环境）。
|
||||
- type-check 与 build 通过（2026-10-19）。e2e `report_flow.py` 已补 12 步：登录 → API 造数 → 四表筛选/导出下载 → 部门下钻筛选生效 → 回款多桶同时展开互不串行 → 打印视图 → 打印截断提示 → 部门汇总打印五块结构；需 `E2E_ADMIN_PASSWORD` 且前后端在跑。
|
||||
|
||||
## 端到端测试（2026-10-19 追加 · M3 台账与月结）
|
||||
|
||||
@ -210,3 +210,19 @@ E2E_ADMIN_PASSWORD=<开发库admin密码> python e2e/system_management.py
|
||||
② 三页均无 `onMounted` 初始加载 → 进页不取数；补 `onMounted(() => void load())`。
|
||||
③ 三页 `AppPagination` 用 `v-model:page-num` + `@change`（组件无该事件、也未实现 `update:*`）→ 翻页失效；统一为 `:page-num/:page-size` + `@page-change/@size-change`（usePagedList 的 onPageChange/onSizeChange）。
|
||||
**注意**：e2e 与 `pytest tests/integration` **不可并发**——conftest 每用例整体清空开发库，会清掉 e2e 造的数据造成假失败（本次排查耗时即源于此，两次假失败的报错均为「台账行消失 / 401 登录失效」）。
|
||||
|
||||
## 前端页面（2026-10-19 追加 · M4 ⑧ 工作台）
|
||||
|
||||
`/dashboard` 由 Bento 占位升级为工作台四区块（**一次聚合请求** `/api/v1/dashboard`）：
|
||||
|
||||
| 区块 | 展示 |
|
||||
| --- | --- |
|
||||
| 经营绩效总览 | KPI 四卡（本月绩效/应付/核算人数/团队数 + 月结状态）；近 6 个月绩效折线 + 回款柱状（ECharts） |
|
||||
| 待办事项 | 待审批（跳审批管理）、回款未指定批次（跳回款管理）、T+ 同步失败（未启用显式占位） |
|
||||
| 风险预警 | 回款逾期（danger）/ 审批超时（warning），点击跳处理页；总开关关闭时显示参数提示 |
|
||||
| 最近动态 | 操作日志时间线，按模块本地筛选 |
|
||||
|
||||
- **ECharts 5.6 按需引入**：`echarts/core` + `BarChart/LineChart/Grid/Tooltip` + `SVGRenderer`（与设计预览一致），只注册用到的模块。
|
||||
- **字体红线**：图表 `textStyle.fontFamily` 必须显式设为思源黑体栈——ECharts 在 Windows 默认微软雅黑（字体商用合规要求）。
|
||||
- 权限：路由 `allowedRoles: [admin, finance, leader]`，与后端 `require_roles` 双层；营销后勤待权限清单 #6。
|
||||
- `package.json` 新增依赖 `echarts@5.6.0`（MIT）；type-check 与 build 通过（2026-10-19）。
|
||||
|
||||
@ -13,6 +13,7 @@
|
||||
"dependencies": {
|
||||
"@vue/devtools-api": "^8.1.5",
|
||||
"axios": "^1.20.0",
|
||||
"echarts": "^5.6.0",
|
||||
"element-plus": "^2.14.7",
|
||||
"pinia": "^4.0.3",
|
||||
"vue": "^3.5.43",
|
||||
|
||||
23
frontend/pnpm-lock.yaml
generated
23
frontend/pnpm-lock.yaml
generated
@ -14,6 +14,9 @@ importers:
|
||||
axios:
|
||||
specifier: ^1.20.0
|
||||
version: 1.20.0(debug@4.4.3)
|
||||
echarts:
|
||||
specifier: ^5.6.0
|
||||
version: 5.6.0
|
||||
element-plus:
|
||||
specifier: ^2.14.7
|
||||
version: 2.14.7(vue@3.5.43(typescript@5.9.3))
|
||||
@ -399,6 +402,9 @@ packages:
|
||||
resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
|
||||
engines: {node: '>= 0.4'}
|
||||
|
||||
echarts@5.6.0:
|
||||
resolution: {integrity: sha512-oTbVTsXfKuEhxftHqL5xprgLoc0k7uScAwtryCgWF6hPYFLRwOUHiFmHGCBKP5NPFNkDVopOieyUqYGH8Fa3kA==}
|
||||
|
||||
element-plus@2.14.7:
|
||||
resolution: {integrity: sha512-lrG7pZyCS+mpCNVpzxxyu5r35+T6V0hzkAeIwn7HA6to772XSTHKuYCZG51OfzlqaxGbNegLxs650zAF1j43gA==}
|
||||
peerDependencies:
|
||||
@ -693,6 +699,9 @@ packages:
|
||||
resolution: {integrity: sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==}
|
||||
engines: {node: '>=12.0.0'}
|
||||
|
||||
tslib@2.3.0:
|
||||
resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==}
|
||||
|
||||
typescript@5.9.3:
|
||||
resolution: {integrity: sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==}
|
||||
engines: {node: '>=14.17'}
|
||||
@ -828,6 +837,9 @@ packages:
|
||||
webpack-virtual-modules@0.6.2:
|
||||
resolution: {integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==}
|
||||
|
||||
zrender@5.6.1:
|
||||
resolution: {integrity: sha512-OFXkDJKcrlx5su2XbzJvj/34Q3m6PvyCZkVPHGYpcCJ52ek4U/ymZyfuV1nKE23AyBJ51E/6Yr0mhZ7xGTO4ag==}
|
||||
|
||||
snapshots:
|
||||
|
||||
'@babel/helper-string-parser@7.29.7': {}
|
||||
@ -1155,6 +1167,11 @@ snapshots:
|
||||
es-errors: 1.3.0
|
||||
gopd: 1.2.0
|
||||
|
||||
echarts@5.6.0:
|
||||
dependencies:
|
||||
tslib: 2.3.0
|
||||
zrender: 5.6.1
|
||||
|
||||
element-plus@2.14.7(vue@3.5.43(typescript@5.9.3)):
|
||||
dependencies:
|
||||
'@ctrl/tinycolor': 4.2.1
|
||||
@ -1435,6 +1452,8 @@ snapshots:
|
||||
fdir: 6.5.0(picomatch@4.0.7)
|
||||
picomatch: 4.0.7
|
||||
|
||||
tslib@2.3.0: {}
|
||||
|
||||
typescript@5.9.3: {}
|
||||
|
||||
ufo@1.6.4: {}
|
||||
@ -1521,3 +1540,7 @@ snapshots:
|
||||
typescript: 5.9.3
|
||||
|
||||
webpack-virtual-modules@0.6.2: {}
|
||||
|
||||
zrender@5.6.1:
|
||||
dependencies:
|
||||
tslib: 2.3.0
|
||||
|
||||
96
frontend/src/api/dashboard.ts
Normal file
96
frontend/src/api/dashboard.ts
Normal file
@ -0,0 +1,96 @@
|
||||
import { request } from './request'
|
||||
|
||||
/** 近 6 个月趋势点（绩效按台账归属月，回款按到账月） */
|
||||
export interface TrendPoint {
|
||||
month: string
|
||||
performance_total: string | null
|
||||
receipt_total: string | null
|
||||
}
|
||||
|
||||
export interface SettlementBrief {
|
||||
exists: boolean
|
||||
status: number | null
|
||||
total_performance: string | null
|
||||
total_payable: string | null
|
||||
locked_at: string | null
|
||||
}
|
||||
|
||||
export interface OverviewBlock {
|
||||
month: string
|
||||
performance_total: string | null
|
||||
payable_total: string | null
|
||||
person_count: number
|
||||
team_count: number
|
||||
settlement: SettlementBrief
|
||||
trend: TrendPoint[]
|
||||
note: string
|
||||
}
|
||||
|
||||
export interface ApprovalTodoItem {
|
||||
order_id: number
|
||||
order_no: string
|
||||
order_type: number
|
||||
submitter_name: string | null
|
||||
create_time: string
|
||||
}
|
||||
|
||||
export interface ReceiptTodoItem {
|
||||
receipt_id: number
|
||||
receipt_batch_no: string
|
||||
business_id: number
|
||||
business_no: string | null
|
||||
amount: string
|
||||
receipt_date: string
|
||||
}
|
||||
|
||||
export interface TodoBlock {
|
||||
pending_approval_total: number
|
||||
pending_approvals: ApprovalTodoItem[]
|
||||
unassigned_receipt_total: number
|
||||
unassigned_receipts: ReceiptTodoItem[]
|
||||
sync_available: boolean
|
||||
sync_failure_total: number
|
||||
}
|
||||
|
||||
export interface WarningItem {
|
||||
code: string
|
||||
level: 'warning' | 'danger'
|
||||
object_type: string
|
||||
object_id: number
|
||||
title: string
|
||||
detail: string
|
||||
suggest: string
|
||||
link: string | null
|
||||
}
|
||||
|
||||
export interface WarningBlock {
|
||||
enabled: boolean
|
||||
receipt_overdue_days: number
|
||||
approval_timeout_days: number
|
||||
items: WarningItem[]
|
||||
receipt_overdue_total: number
|
||||
approval_timeout_total: number
|
||||
sync_available: boolean
|
||||
}
|
||||
|
||||
export interface ActivityItem {
|
||||
id: number
|
||||
module: string
|
||||
action: string
|
||||
summary: string
|
||||
username: string | null
|
||||
success: number
|
||||
create_time: string
|
||||
}
|
||||
|
||||
export interface DashboardData {
|
||||
month: string
|
||||
overview: OverviewBlock
|
||||
todos: TodoBlock
|
||||
warnings: WarningBlock
|
||||
activities: ActivityItem[]
|
||||
}
|
||||
|
||||
export function getDashboard(params: { month?: string }): Promise<DashboardData> {
|
||||
return request({ url: '/v1/dashboard', method: 'get', params })
|
||||
}
|
||||
@ -38,10 +38,16 @@ const routes: RouteRecordRaw[] = [
|
||||
redirect: '/dashboard',
|
||||
children: [
|
||||
{
|
||||
// 工作台（M4 ⑧）：与报表/审批接口同权限（admin/finance/leader），
|
||||
// 前后端双层；营销后勤可见性待权限清单 #6 答复
|
||||
path: '/dashboard',
|
||||
name: 'dashboard',
|
||||
component: () => import('@/views/dashboard/index.vue'),
|
||||
meta: { title: '首页', order: 1 },
|
||||
meta: {
|
||||
title: '首页',
|
||||
order: 1,
|
||||
allowedRoles: [ROLE_ADMIN, 'finance', 'leader'],
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/system/users',
|
||||
|
||||
@ -1,133 +1,372 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import * as echarts from 'echarts/core'
|
||||
import { BarChart, LineChart } from 'echarts/charts'
|
||||
import { GridComponent, TooltipComponent } from 'echarts/components'
|
||||
import { SVGRenderer } from 'echarts/renderers'
|
||||
import type { ECharts, EChartsCoreOption } from 'echarts/core'
|
||||
|
||||
import * as businessRoleApi from '@/api/businessRoles'
|
||||
import * as paramsApi from '@/api/params'
|
||||
import * as dashboardApi from '@/api/dashboard'
|
||||
import type { DashboardData, TrendPoint } from '@/api/dashboard'
|
||||
import { handledError } from '@/utils/error'
|
||||
|
||||
echarts.use([BarChart, LineChart, GridComponent, TooltipComponent, SVGRenderer])
|
||||
|
||||
/**
|
||||
* 工作台（M4 ⑧）：经营绩效总览 / 待办事项 / 风险预警 / 最近动态。
|
||||
*
|
||||
* - 四区块由一次聚合请求返回（后端实时派生，见 dashboard_service 注释）
|
||||
* - 总览图表严格按设计预览：SVG 渲染、无网格线、靛蓝渐变；
|
||||
* **必须显式设置 fontFamily**——ECharts 在 Windows 默认微软雅黑（字体合规红线）
|
||||
* - ⑥ T+ 同步未建：同步失败待办/同步预警显示「模块未启用」，不显示 0 条
|
||||
*/
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
/**
|
||||
* 首页仪表盘（Bento Grid，2026-10-12 视觉方向）。
|
||||
*
|
||||
* M1 阶段：计提参数与岗位配置已就绪（真实数据）；绩效/回款/待办等业务卡
|
||||
* 展示空态 —— 业务数据管理上线后接入真实统计（图表用 ECharts 渲染）。
|
||||
* 空态文案遵循全局规范：空态是邀请，说明「这里将出现什么、怎么让它出现」。
|
||||
*/
|
||||
const roleCount = ref<number | null>(null)
|
||||
const paramCount = ref<number | null>(null)
|
||||
const latestVersion = ref<string | null>(null)
|
||||
const CHART_FONT =
|
||||
"'Noto Sans SC','Source Han Sans SC','HarmonyOS Sans SC','PingFang SC',sans-serif"
|
||||
|
||||
const SETTLEMENT_STATUS_LABELS: Record<number, string> = {
|
||||
1: '草稿',
|
||||
2: '待审批',
|
||||
3: '已锁定',
|
||||
4: '已驳回',
|
||||
}
|
||||
const ORDER_TYPE_LABELS: Record<number, string> = {
|
||||
1: '二次分配方案',
|
||||
2: '月度结算',
|
||||
3: '调整单',
|
||||
}
|
||||
|
||||
const month = ref(currentMonth())
|
||||
const data = ref<DashboardData | null>(null)
|
||||
const loading = ref(false)
|
||||
|
||||
const perfChartRef = ref<HTMLDivElement | null>(null)
|
||||
const receiptChartRef = ref<HTMLDivElement | null>(null)
|
||||
let perfChart: ECharts | null = null
|
||||
let receiptChart: ECharts | null = null
|
||||
|
||||
function currentMonth(): string {
|
||||
const now = new Date()
|
||||
return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`
|
||||
}
|
||||
|
||||
async function load(): Promise<void> {
|
||||
loading.value = true
|
||||
try {
|
||||
data.value = await dashboardApi.getDashboard({ month: month.value })
|
||||
await nextTick()
|
||||
renderCharts()
|
||||
} catch (error) {
|
||||
handledError(error)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function renderCharts(): void {
|
||||
const trend = data.value?.overview.trend ?? []
|
||||
if (perfChartRef.value) {
|
||||
perfChart ??= echarts.init(perfChartRef.value, undefined, { renderer: 'svg' })
|
||||
perfChart.setOption(performanceOption(trend))
|
||||
}
|
||||
if (receiptChartRef.value) {
|
||||
receiptChart ??= echarts.init(receiptChartRef.value, undefined, { renderer: 'svg' })
|
||||
receiptChart.setOption(receiptOption(trend))
|
||||
}
|
||||
}
|
||||
|
||||
function performanceOption(trend: TrendPoint[]): EChartsCoreOption {
|
||||
return {
|
||||
textStyle: { fontFamily: CHART_FONT },
|
||||
grid: { left: 8, right: 12, top: 18, bottom: 4, containLabel: true },
|
||||
tooltip: { trigger: 'axis', valueFormatter: (value: unknown) => Number(value).toFixed(2) },
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: trend.map((item) => item.month.slice(5)),
|
||||
axisLine: { lineStyle: { color: 'rgba(28,35,51,.15)' } },
|
||||
axisTick: { show: false },
|
||||
axisLabel: { fontFamily: CHART_FONT, color: '#9aa3b2' },
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
splitLine: { show: false },
|
||||
axisLabel: { fontFamily: CHART_FONT, color: '#9aa3b2' },
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '绩效',
|
||||
type: 'line',
|
||||
smooth: 0.4,
|
||||
symbol: 'none',
|
||||
data: trend.map((item) => Number(item.performance_total ?? 0)),
|
||||
lineStyle: { color: '#2e4ba8', width: 2 },
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: 'rgba(46,75,168,.22)' },
|
||||
{ offset: 1, color: 'rgba(46,75,168,0)' },
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
|
||||
function receiptOption(trend: TrendPoint[]): EChartsCoreOption {
|
||||
return {
|
||||
textStyle: { fontFamily: CHART_FONT },
|
||||
grid: { left: 8, right: 12, top: 18, bottom: 4, containLabel: true },
|
||||
tooltip: { trigger: 'axis', valueFormatter: (value: unknown) => Number(value).toFixed(2) },
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: trend.map((item) => item.month.slice(5)),
|
||||
axisLine: { lineStyle: { color: 'rgba(28,35,51,.15)' } },
|
||||
axisTick: { show: false },
|
||||
axisLabel: { fontFamily: CHART_FONT, color: '#9aa3b2' },
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
splitLine: { show: false },
|
||||
axisLabel: { fontFamily: CHART_FONT, color: '#9aa3b2' },
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '回款',
|
||||
type: 'bar',
|
||||
data: trend.map((item) => Number(item.receipt_total ?? 0)),
|
||||
barMaxWidth: 22,
|
||||
itemStyle: { color: '#2e4ba8', borderRadius: [4, 4, 0, 0] },
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
|
||||
function handleResize(): void {
|
||||
perfChart?.resize()
|
||||
receiptChart?.resize()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// 三项统计各自容错：一张卡失败不影响其余卡片
|
||||
void (async () => {
|
||||
try {
|
||||
const page = await businessRoleApi.listBusinessRoles({ pageNum: 1, pageSize: 1 })
|
||||
roleCount.value = page.total
|
||||
} catch (error) {
|
||||
handledError(error)
|
||||
}
|
||||
})()
|
||||
void (async () => {
|
||||
try {
|
||||
const catalog = await paramsApi.getCatalog()
|
||||
paramCount.value = catalog.length
|
||||
} catch (error) {
|
||||
handledError(error)
|
||||
}
|
||||
})()
|
||||
void (async () => {
|
||||
try {
|
||||
const page = await paramsApi.listBatches({ pageNum: 1, pageSize: 1 })
|
||||
latestVersion.value = page.list[0]?.version_no ?? null
|
||||
} catch (error) {
|
||||
handledError(error)
|
||||
}
|
||||
})()
|
||||
void load()
|
||||
window.addEventListener('resize', handleResize)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', handleResize)
|
||||
perfChart?.dispose()
|
||||
receiptChart?.dispose()
|
||||
})
|
||||
|
||||
const activityModule = ref('')
|
||||
const activityModules = computed(() => {
|
||||
const modules = new Set((data.value?.activities ?? []).map((item) => item.module))
|
||||
return [...modules]
|
||||
})
|
||||
const filteredActivities = computed(() =>
|
||||
(data.value?.activities ?? []).filter(
|
||||
(item) => !activityModule.value || item.module === activityModule.value,
|
||||
),
|
||||
)
|
||||
|
||||
function go(path: string | null): void {
|
||||
if (path) void router.push(path)
|
||||
}
|
||||
|
||||
function formatTime(value: string): string {
|
||||
return value.replace('T', ' ').slice(0, 16)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div v-loading="loading">
|
||||
<div class="page-head">
|
||||
<h1 class="page-title">仪表盘</h1>
|
||||
<p class="page-desc">系统概览 · 计提参数与岗位配置就绪，业务数据管理上线后接入核算统计</p>
|
||||
<h1 class="page-title">工作台</h1>
|
||||
<p class="page-desc">经营绩效总览 · 待办与风险集中处置 · 最近动态</p>
|
||||
<span class="waterline"></span>
|
||||
</div>
|
||||
|
||||
<div class="toolbar">
|
||||
<el-date-picker
|
||||
v-model="month"
|
||||
type="month"
|
||||
value-format="YYYY-MM"
|
||||
:clearable="false"
|
||||
style="width: 140px"
|
||||
@change="load"
|
||||
/>
|
||||
<el-button type="primary" :loading="loading" @click="load">刷新</el-button>
|
||||
<span class="toolbar-note">{{ data?.overview.note ?? '' }}</span>
|
||||
</div>
|
||||
|
||||
<div class="bento">
|
||||
<!-- 绩效总额：业务上线前的空态 -->
|
||||
<div class="bento-card b-2x2">
|
||||
<!-- 经营绩效总览：KPI -->
|
||||
<div class="bento-card">
|
||||
<div class="b-eyebrow">本月绩效总额</div>
|
||||
<div class="b-empty">
|
||||
<div class="b-empty-title">暂无核算数据</div>
|
||||
<div class="b-empty-desc">回款录入并核算后，这里将显示本月绩效总额与趋势</div>
|
||||
<div class="b-num">{{ data?.overview.performance_total ?? '—' }}</div>
|
||||
</div>
|
||||
<div class="bento-card">
|
||||
<div class="b-eyebrow">本月应付绩效</div>
|
||||
<div class="b-num">{{ data?.overview.payable_total ?? '—' }}</div>
|
||||
</div>
|
||||
<div class="bento-card">
|
||||
<div class="b-eyebrow">核算人数</div>
|
||||
<div class="b-num">{{ data?.overview.person_count ?? '—' }}<small>人</small></div>
|
||||
</div>
|
||||
<div class="bento-card">
|
||||
<div class="b-eyebrow">营销团队</div>
|
||||
<div class="b-num">{{ data?.overview.team_count ?? '—' }}<small>个</small></div>
|
||||
<div class="b-sub">
|
||||
月结：
|
||||
{{
|
||||
data?.overview.settlement.exists
|
||||
? SETTLEMENT_STATUS_LABELS[data.overview.settlement.status ?? 0] ?? '—'
|
||||
: '未生成'
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 回款趋势：业务上线前的空态 -->
|
||||
<!-- 经营绩效总览：图表 -->
|
||||
<div class="bento-card b-2x2">
|
||||
<div class="b-eyebrow">近 6 个月绩效</div>
|
||||
<div ref="perfChartRef" class="chart"></div>
|
||||
</div>
|
||||
<div class="bento-card b-2x2">
|
||||
<div class="b-eyebrow">近 6 个月回款</div>
|
||||
<div class="b-empty">
|
||||
<div class="b-empty-title">暂无回款数据</div>
|
||||
<div class="b-empty-desc">业务数据管理上线后，此处展示按月回款趋势</div>
|
||||
<div ref="receiptChartRef" class="chart"></div>
|
||||
</div>
|
||||
|
||||
<!-- 待办事项 -->
|
||||
<div class="bento-card b-2x2">
|
||||
<div class="b-eyebrow">
|
||||
待办事项
|
||||
<span class="b-count">{{ data?.todos.pending_approval_total ?? 0 }}</span>
|
||||
</div>
|
||||
<div v-if="data?.todos.pending_approvals.length" class="todo-list">
|
||||
<button
|
||||
v-for="item in data.todos.pending_approvals"
|
||||
:key="item.order_id"
|
||||
class="todo-row"
|
||||
type="button"
|
||||
@click="go('/system/approvals')"
|
||||
>
|
||||
<span class="todo-title">
|
||||
{{ ORDER_TYPE_LABELS[item.order_type] ?? '审批' }} · {{ item.order_no }}
|
||||
</span>
|
||||
<span class="todo-meta">{{ item.submitter_name ?? '—' }} · {{ formatTime(item.create_time) }}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div v-else class="b-empty-mini">无待审批事项</div>
|
||||
|
||||
<div class="b-eyebrow b-eyebrow-gap">
|
||||
回款未指定批次
|
||||
<span class="b-count">{{ data?.todos.unassigned_receipt_total ?? 0 }}</span>
|
||||
</div>
|
||||
<div v-if="data?.todos.unassigned_receipts.length" class="todo-list">
|
||||
<button
|
||||
v-for="item in data.todos.unassigned_receipts"
|
||||
:key="item.receipt_id"
|
||||
class="todo-row"
|
||||
type="button"
|
||||
@click="go('/business/receipts')"
|
||||
>
|
||||
<span class="todo-title">{{ item.receipt_batch_no }} · {{ item.amount }}</span>
|
||||
<span class="todo-meta">业务 {{ item.business_no ?? item.business_id }} · {{ item.receipt_date }}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div v-else class="b-empty-mini">无未指定批次的回款</div>
|
||||
|
||||
<div class="b-eyebrow b-eyebrow-gap">T+ 同步失败</div>
|
||||
<div class="b-empty-mini">
|
||||
{{ data?.todos.sync_available ? `${data.todos.sync_failure_total} 条待处置` : '同步模块未启用（待 T+ 对接）' }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 待办 -->
|
||||
<div class="bento-card b-2x1">
|
||||
<div class="b-eyebrow">待办</div>
|
||||
<div class="b-empty-mini">业务数据管理上线后，待核算回款会出现在这里</div>
|
||||
<!-- 风险预警 -->
|
||||
<div class="bento-card b-2x2">
|
||||
<div class="b-eyebrow">
|
||||
风险预警
|
||||
<span class="b-count">{{ data?.warnings.items.length ?? 0 }}</span>
|
||||
</div>
|
||||
<div v-if="data && !data.warnings.enabled" class="b-empty-mini">
|
||||
预警已关闭（参数 warning.enabled=0）
|
||||
</div>
|
||||
<div v-else-if="data?.warnings.items.length" class="warning-list">
|
||||
<button
|
||||
v-for="item in data.warnings.items"
|
||||
:key="`${item.code}-${item.object_id}`"
|
||||
class="warning-row"
|
||||
type="button"
|
||||
@click="go(item.link)"
|
||||
>
|
||||
<el-tag
|
||||
size="small"
|
||||
:type="item.level === 'danger' ? 'danger' : 'warning'"
|
||||
disable-transitions
|
||||
>
|
||||
{{ item.level === 'danger' ? '资金' : '时效' }}
|
||||
</el-tag>
|
||||
<span class="warning-title">{{ item.title }}</span>
|
||||
<span class="warning-detail">{{ item.detail }}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div v-else class="b-empty-mini">
|
||||
暂无预警（回款逾期 {{ data?.warnings.receipt_overdue_days ?? 90 }} 天 /
|
||||
审批超时 {{ data?.warnings.approval_timeout_days ?? 3 }} 天）
|
||||
</div>
|
||||
<div class="b-eyebrow b-eyebrow-gap">同步异常预警</div>
|
||||
<div class="b-empty-mini">
|
||||
{{ data?.warnings.sync_available ? '已接入' : '同步模块未启用（待 T+ 对接）' }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 营销人员：人员管理上线后接入 -->
|
||||
<div class="bento-card">
|
||||
<div class="b-eyebrow">营销人员</div>
|
||||
<div class="b-empty-mini">人员管理上线后同步</div>
|
||||
</div>
|
||||
|
||||
<!-- 岗位角色：真实数据 -->
|
||||
<div class="bento-card">
|
||||
<div class="b-eyebrow">岗位角色</div>
|
||||
<div class="b-num">{{ roleCount ?? '—' }}<small>个</small></div>
|
||||
<button class="b-link" type="button" @click="router.push('/system/business-roles')">
|
||||
管理 ›
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 计提参数：真实数据 -->
|
||||
<div class="bento-card">
|
||||
<div class="b-eyebrow">计提参数</div>
|
||||
<div class="b-num">{{ paramCount ?? '—' }}<small>项</small></div>
|
||||
<button class="b-link" type="button" @click="router.push('/system/params')">
|
||||
维护 ›
|
||||
</button>
|
||||
<!-- 最近动态 -->
|
||||
<div class="bento-card b-full">
|
||||
<div class="b-eyebrow">
|
||||
最近动态
|
||||
<el-select
|
||||
v-model="activityModule"
|
||||
size="small"
|
||||
clearable
|
||||
placeholder="全部模块"
|
||||
style="width: 140px; margin-left: 12px"
|
||||
>
|
||||
<el-option v-for="item in activityModules" :key="item" :label="item" :value="item" />
|
||||
</el-select>
|
||||
</div>
|
||||
<div v-if="filteredActivities.length" class="activity-list">
|
||||
<div v-for="item in filteredActivities" :key="item.id" class="activity-row">
|
||||
<span class="activity-time">{{ formatTime(item.create_time) }}</span>
|
||||
<el-tag size="small" :type="item.success === 1 ? 'info' : 'danger'" disable-transitions>
|
||||
{{ item.module }} · {{ item.action }}
|
||||
</el-tag>
|
||||
<span class="activity-summary">{{ item.summary }}</span>
|
||||
<span class="activity-user">{{ item.username ?? '—' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="b-empty-mini">暂无动态</div>
|
||||
</div>
|
||||
|
||||
<!-- 常用操作 -->
|
||||
<div class="bento-card b-2x1">
|
||||
<div class="bento-card b-full">
|
||||
<div class="b-eyebrow">常用操作</div>
|
||||
<div class="b-links">
|
||||
<button class="b-op" type="button" @click="router.push('/system/params')">
|
||||
计提参数
|
||||
<button class="b-op" type="button" @click="go('/business/receipts')">录入回款</button>
|
||||
<button class="b-op" type="button" @click="go('/calc/ledger')">绩效台账</button>
|
||||
<button class="b-op" type="button" @click="go('/settlements')">月度结算</button>
|
||||
<button class="b-op" type="button" @click="go('/reports/personal-detail')">
|
||||
报表统计
|
||||
</button>
|
||||
<button class="b-op" type="button" @click="router.push('/system/business-roles')">
|
||||
岗位角色
|
||||
</button>
|
||||
<button class="b-op" type="button" @click="router.push('/system/logs')">
|
||||
操作日志
|
||||
</button>
|
||||
<span class="b-op b-op-disabled" title="业务数据管理上线后开放">录入回款</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- T+ 同步 -->
|
||||
<div class="bento-card">
|
||||
<div class="b-eyebrow">T+ 同步</div>
|
||||
<div class="b-state">待接入</div>
|
||||
<div class="b-sub">每周一次 · 手动触发</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -139,56 +378,62 @@ onMounted(() => {
|
||||
|
||||
.page-title {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.01em;
|
||||
color: var(--ys-ink);
|
||||
}
|
||||
|
||||
.page-desc {
|
||||
margin: 4px 0 0;
|
||||
font-size: 12px;
|
||||
margin: 6px 0 0;
|
||||
font-size: 13px;
|
||||
color: var(--ys-ink-3);
|
||||
}
|
||||
|
||||
.waterline {
|
||||
display: block;
|
||||
width: 56px;
|
||||
width: 46px;
|
||||
height: 2px;
|
||||
margin-top: 10px;
|
||||
border-radius: 1px;
|
||||
margin-top: 12px;
|
||||
background: linear-gradient(90deg, var(--ys-indigo), rgba(46, 75, 168, 0));
|
||||
}
|
||||
|
||||
/* Bento Grid：4 列基格，卡片按重要性混排大小 */
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.toolbar-note {
|
||||
font-size: 12px;
|
||||
color: var(--ys-ink-3);
|
||||
}
|
||||
|
||||
.bento {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
grid-auto-rows: 102px;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.bento-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 17px 20px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
padding: 16px 18px;
|
||||
background: linear-gradient(180deg, #ffffff, #fcfcfe);
|
||||
border: 1px solid var(--ys-line);
|
||||
border-radius: 10px;
|
||||
box-shadow:
|
||||
0 1px 2px rgba(28, 35, 51, 0.04),
|
||||
0 3px 10px rgba(28, 35, 51, 0.03);
|
||||
transition:
|
||||
transform 180ms cubic-bezier(0.25, 0.1, 0.25, 1),
|
||||
box-shadow 180ms cubic-bezier(0.25, 0.1, 0.25, 1);
|
||||
0 10px 24px -18px rgba(28, 35, 51, 0.18);
|
||||
transition: transform 0.18s ease, box-shadow 0.18s ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.bento-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow:
|
||||
0 1px 2px rgba(28, 35, 51, 0.05),
|
||||
0 6px 18px rgba(28, 35, 51, 0.07);
|
||||
0 2px 4px rgba(28, 35, 51, 0.05),
|
||||
0 16px 30px -18px rgba(28, 35, 51, 0.22);
|
||||
}
|
||||
|
||||
.b-2x2 {
|
||||
@ -196,149 +441,190 @@ onMounted(() => {
|
||||
grid-row: span 2;
|
||||
}
|
||||
|
||||
.b-2x1 {
|
||||
grid-column: span 2;
|
||||
.b-full {
|
||||
grid-column: span 4;
|
||||
}
|
||||
|
||||
.b-eyebrow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--ys-ink-2);
|
||||
color: var(--ys-ink-3);
|
||||
}
|
||||
|
||||
.b-eyebrow-gap {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.b-count {
|
||||
min-width: 20px;
|
||||
padding: 0 6px;
|
||||
font-size: 11px;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
color: var(--ys-indigo);
|
||||
background: var(--ys-indigo-wash);
|
||||
border-radius: 9px;
|
||||
}
|
||||
|
||||
.b-num {
|
||||
margin-top: auto;
|
||||
font-size: 24px;
|
||||
margin-top: 10px;
|
||||
font-size: 26px;
|
||||
font-weight: 600;
|
||||
font-variant-numeric: tabular-nums;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.01em;
|
||||
color: var(--ys-ink);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.b-num small {
|
||||
margin-left: 3px;
|
||||
margin-left: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: var(--ys-ink-3);
|
||||
}
|
||||
|
||||
.b-sub {
|
||||
margin-top: 3px;
|
||||
font-size: 11px;
|
||||
color: var(--ys-ink-3);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.b-state {
|
||||
margin-top: auto;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--ys-ink-2);
|
||||
}
|
||||
|
||||
.b-empty {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.b-empty-title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--ys-ink-2);
|
||||
}
|
||||
|
||||
.b-empty-desc {
|
||||
max-width: 260px;
|
||||
margin-top: 6px;
|
||||
margin-top: 4px;
|
||||
font-size: 12px;
|
||||
color: var(--ys-ink-3);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.b-empty-mini {
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
margin-top: 8px;
|
||||
font-size: 12px;
|
||||
color: var(--ys-ink-3);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.chart {
|
||||
height: 150px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.todo-list,
|
||||
.warning-list {
|
||||
max-height: 178px;
|
||||
margin-top: 8px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.todo-row,
|
||||
.warning-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
width: 100%;
|
||||
padding: 6px 4px;
|
||||
border: none;
|
||||
border-bottom: 1px dashed var(--ys-line);
|
||||
background: none;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.todo-row:hover,
|
||||
.warning-row:hover {
|
||||
background: rgba(46, 75, 168, 0.04);
|
||||
}
|
||||
|
||||
.todo-title {
|
||||
font-size: 13px;
|
||||
color: var(--ys-ink);
|
||||
}
|
||||
|
||||
.todo-meta {
|
||||
font-size: 11px;
|
||||
color: var(--ys-ink-3);
|
||||
}
|
||||
|
||||
.warning-row {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-rows: auto auto;
|
||||
column-gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.warning-title {
|
||||
font-size: 13px;
|
||||
color: var(--ys-ink);
|
||||
}
|
||||
|
||||
.warning-detail {
|
||||
grid-column: 2;
|
||||
font-size: 11px;
|
||||
color: var(--ys-ink-3);
|
||||
}
|
||||
|
||||
.activity-list {
|
||||
max-height: 150px;
|
||||
margin-top: 8px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.activity-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 5px 0;
|
||||
border-bottom: 1px dashed var(--ys-line);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.activity-time {
|
||||
width: 118px;
|
||||
color: var(--ys-ink-3);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.activity-summary {
|
||||
flex: 1;
|
||||
color: var(--ys-ink-2);
|
||||
}
|
||||
|
||||
.activity-user {
|
||||
color: var(--ys-ink-3);
|
||||
}
|
||||
|
||||
.b-links {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.b-link {
|
||||
padding: 0;
|
||||
margin-top: 6px;
|
||||
font-size: 12px;
|
||||
color: var(--ys-indigo);
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.b-link:hover {
|
||||
color: var(--ys-indigo-deep);
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.b-op {
|
||||
height: 30px;
|
||||
padding: 0 13px;
|
||||
font-size: 12px;
|
||||
font-family: inherit;
|
||||
color: var(--ys-ink);
|
||||
cursor: pointer;
|
||||
background: linear-gradient(180deg, #ffffff, #fbfcfe);
|
||||
border: 1px solid var(--ys-line);
|
||||
border-radius: 7px;
|
||||
transition:
|
||||
color 150ms cubic-bezier(0.25, 0.1, 0.25, 1),
|
||||
border-color 150ms cubic-bezier(0.25, 0.1, 0.25, 1);
|
||||
}
|
||||
|
||||
button.b-op:hover {
|
||||
padding: 6px 14px;
|
||||
font-size: 13px;
|
||||
color: var(--ys-indigo);
|
||||
border-color: rgba(46, 75, 168, 0.45);
|
||||
background: var(--ys-indigo-wash);
|
||||
border: 1px solid transparent;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.b-op-disabled {
|
||||
color: var(--ys-ink-3);
|
||||
cursor: not-allowed;
|
||||
.b-op:hover {
|
||||
border-color: var(--ys-indigo);
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.bento {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.b-full {
|
||||
grid-column: span 2;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.bento {
|
||||
grid-template-columns: 1fr;
|
||||
grid-auto-rows: auto;
|
||||
}
|
||||
|
||||
.bento-card {
|
||||
min-height: 90px;
|
||||
}
|
||||
|
||||
.b-2x2,
|
||||
.b-2x1 {
|
||||
.b-full {
|
||||
grid-column: span 1;
|
||||
grid-row: span 1;
|
||||
min-height: 130px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -346,5 +632,9 @@ button.b-op:hover {
|
||||
.bento-card {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.bento-card:hover {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user