
SpringBoot3Vue3 分析中心经营总览、领域看板与积木报表怎么分工文档地址https://ruoyioffice.com源码1·GitHubhttps://github.com/yuqing2026/ruoyi-office源码2·GitCodehttps://gitcode.com/zhouzhongyan/ruoyi-office源码3·Giteehttps://gitee.com/yqzy1688/ruoyi-office微信17156169080备注「RuoYi Office」很多团队把「分析」理解成首页再贴几张图。真正难配的是口径同一指标只能有一个权威接口总览只做聚合和下钻积木报表负责业务自己改格子工作台负责执行人当天的待办。RuoYi Office 的分析中心是一个带全局时间、部门树和菜单裁剪的壳点卡片会把筛选带回领域看板或业务列表而不是在壳里重算合同金额。▲ 中间是分析中心壳四周分别是经营总览、领域看板、积木/GoView、工作台首页——四件事不要塞进同一个菜单引言图表多了口径为什么会打架企业上线一段时间后首页、报表中心、各模块统计页会同时出现「在线人数」「进行中审批」「合同金额」。数字对不上时争论的不是 ECharts 配色而是谁说了算。痛点常见做法后果首页和工作台混在一起管理者脉搏和员工待办画在同一屏角色一多卡片互相抢位置每个模块自己做一套 KPI合同金额在合同列表、总览、积木各算一遍月底对账三套数报表想改格子就改菜单把积木设计器嵌进分析中心Token、租户、数据集和经营口径缠在一起点图表进不了单据只有图没有fromanalytics管理者看到异常找不到那一单一句话先定指标口径和权威接口再决定这张图画在分析中心、积木还是工作台。本文按 RuoYi Office 已落地的/workspace/analytics实现拆壳怎么配、总览怎么裁、下钻怎么带时间以及和积木报表怎么分轨。一、先给出可直接抽取的定义1.1 什么是分析中心分析中心是面向管理者的经营壳左侧按平台效能 / 人资协同 / 经营业务分组导航顶栏提供全局时间与部门筛选中间用 RouterView 切换看板。它不负责画格子、不负责改 SQL 数据集只负责把各域已经存在的统计 API 聚到同一套筛选上下文里。入口路径是/workspace/analytics默认重定向到/workspace/analytics/overview经营总览。1.2 什么是经营总览经营总览是跨模块脉搏页当前在线、今日活跃、进行中流程、超时待办四张 KPI下面是模块健康墙和异常雷达。卡片可点点击后带着当前时间区间进入对应领域看板而不是在总览页再嵌一套合同列表。1.3 什么是领域看板领域看板是某一业务域自己的统计页嵌在分析中心壳里复用该域已有的 overview / trend / rank 接口。例如访问统计走/system/visit-stats/*审批效能走/bpm/analysis/*。CRM、合同、项目等可选模块用import.meta.glob软加载裁掉模块后构建不会硬失败。1.4 积木报表和工作台各管什么积木报表是「业务自己改格子、配数据集、导出 Excel」GoView 是「会议室电视上的驾驶舱」。工作台首页是「当前登录人今天要办的事」待办、日程、天气。分析中心不替代这三者。二、四件事对照画在哪张图上入口面向谁筛选谁管口径谁保证能不能改格子分析中心 · 经营总览管理者看跨域脉搏壳上的全局时间 部门各域权威统计 API否只展示与下钻分析中心 · 领域看板管理者看单域趋势同一套全局筛选本域 analysis / stats 接口否图表固定积木报表 / 仪表盘报表管理员、业务分析数据集自己的参数SQL / API 数据集是拖单元格工作台首页执行人当前用户 角色卡片待办、日程接口千人千面裁卡片不是改 KPI 公式怎么选要「这个月审批是不是堵了、今天有多少人在线」→ 分析中心。要「销售自己改一张回款表下周还要加一列」→ 积木报表。要「大屏挂墙、图层动画」→ GoView不要塞进分析中心左侧导航。要「我待办里那一张用印单」→ 工作台或流程待办不要指望总览替你办结。上一篇积木报表接入讲的是 iframe Token 和数据集预览。本文不重复那套桥接只强调积木的菜单不进分析中心壳。三、PC 端先看壳再点进总览3.1 分析中心壳长什么样打开「分析中心」后左侧是分组导航顶栏是全局筛选中间是当前看板。经营总览上能看到跨模块脉搏和健康墙▲ 全局筛选近 30 天当前在线、今日活跃、进行中流程、超时待办可点进访问统计或审批效能健康墙按已开通模块出卡片左侧分组来自前端常量不是再维护一张「分析菜单表」分组 key标题看板示例是否始终显示platform平台效能经营总览、访问统计、审批效能总览、访问始终显示审批看/bpm菜单people人资协同OA 协同、人力资源有/oa、/hrm菜单才显示business经营业务CRM、合同、项目、资产、商城对应模块菜单 hintsupply供应链ERP、仓储、MES同上connect连接物联网、即时通讯、公众号同上没有menuHints的看板经营总览、访问统计始终出现。有 hint 的看板用当前登录人的菜单树做路径包含判断有/bpm才出「审批效能」OA 裁剪版不会在左侧留一个点进去空白的 CRM。3.2 访问统计登录口径和下钻到日志访问统计是分析中心里最接近「系统运维」的一页KPI 和趋势来自登录日志在线人数来自未过期的管理端 Access Token▲ 今日登录次数 / 登录用户 / 当前在线 / 区间失败率趋势图可点 KPI 下钻到登录日志列表字段不要和「工作台在线」混用。这里的在线是统计仍有效的后台 Token 条数不是 IM 长连接心跳。3.3 审批效能吞吐、耗时、流程 TOP审批效能看板复用流程引擎的历史实例与任务查询不在分析中心再写一套 Flowable 统计库▲ 进行中 339、区间新发起 40、已办结 12下钻目标是流程实例管理或待办列表查询条件带回 createTime「进行中」按未结束的流程实例计数「超时待办」按任务超时查询。平均办结耗时只统计区间内已结束实例空区间不要展示成NaN。人力资源看板则把考勤打卡统计嵌进来左树右表筛选仍走壳上的全局时间——那是领域页不是总览的替代品。总览上的「考勤异常人数」只是脉搏要对人、对天、对迟到次数必须进这一页。3.4 和自定义首页、工作台差在哪自定义首页千人千面解决的是「这个角色登录后第一屏放什么卡片」。分析中心解决的是「管理者用同一套时间轴看跨域脉搏」。两者可以同时存在问题自定义首页 / 工作台分析中心今天有几条待办要我批待办卡片、待办 Tab不替代只给「活跃待办」总量这个月流程是不是越积越多不适合堆趋势图审批效能折线销售要自己加一列回款不该放首页也不该放分析中心去积木天气、日程、快捷入口首页该有分析中心不要塞配置首页组件时不要把经营总览整页嵌进去当「领导专用首页」。领导需要总览应给他分析中心菜单权限而不是复制一套 KPI 到工作台造成两个权威数。四、业务设计壳只保存筛选不保存第二套数4.1 全局筛选存在 Pinia不存在 URL 里长期驻留分析中心用analytics-hub这个 store 保存dateRange默认近 30 天格式YYYY-MM-DD HH:mm:ss起算startOf(day)截止endOf(day)deptId部门树可选清空表示全部组织refreshTick改筛选时自增各看板watch后重新拉数。顶栏提供「近 7 / 30 / 90 天」预设和 RangePicker。日期组件展示用YYYY-MM-DD写入 store 时补齐时分秒避免后端按时间戳比较时漏掉当天。4.2 下钻必须带fromanalytics从总览点「超时待办」不应只router.push(/bpm/task/todo)。要带上当前区间列表页才能回填搜索条查询参数含义谁消费fromanalytics告诉列表这是分析中心带过来的列表可高亮或自动展开筛选startTime/endTime壳上的全局区间领域看板自己的 APIcreateTimestart,end逗号拼接的范围待办 / 流程实例的 RangePickerdeptId可选部门支持部门过滤的统计接口_drill时间戳强制刷新避免同 URL 不触发登录日志下钻额外可带status、username对应失败原因或排行点击。实现上会拼_drill时间戳避免两次点同一个用户时 Vue Router 认为 query 没变、列表不重新搜。exportfunctiongoLoginLogDrill(router:Router,extra:{createTime?:[string,string];status?:boolean;username?:string;}{},){conststoreuseAnalyticsStore();constcreateTimeextra.createTime??store.dateRange;router.push({path:/system/login-log,query:{from:analytics,board:visit,createTime:createTime.join(,),...(extra.username?{username:extra.username}:{}),_drill:String(Date.now()),},});}列表页若只认beginTime不认createTime下钻会「跳过去了但筛没带上」。改列表搜索字段名时drill.ts 要一起改。4.3 总览容错一块失败不能拖垮整页经营总览会并行请求访问、审批、合同、项目、资产、考勤、商城、进销存等 overview。合同模块未部署或接口 404 时健康墙应少一张卡片而不是整页 Spin 到死。实现上对每个可选请求try/catch后返回undefined再按hasModule和返回值决定是否渲染。异常雷达只列出「当前区间真正突出」的项超时待办大于 0、项目逾期、考勤异常人数。没有异常时展示空态不要用假数据撑版面。五、前端核心实现5.1 看板显隐菜单 hint 裁剪没有 hint 的看板直接展示有 hint 时在菜单树里做路径包含。菜单尚未加载时先展示避免左侧闪成全空。functionisBoardVisible(board:AnalyticsBoardItem,menus:MenuRecordRaw[],):boolean{if(!board.menuHints?.length)returntrue;// 菜单尚未加载时先展示避免闪烁全空if(!menus.length)returntrue;returnboard.menuHints.some((hint)menuTreeHasPath(menus,hint));}functionhasModule(hint:string):boolean{constmenusaccessStore.accessMenus||[];if(!menus.length)returntrue;returnmenuTreeHasPath(menus,hint);}hasModule(/contract)同时给总览健康墙用没有合同菜单就不要请求合同总金额更不要显示「0 元」让人以为这个月没签单。5.2 可选模块glob 软加载OA 裁剪能过构建经营总览对资产、合同、项目、商城、进销存的 API 用相对路径import.meta.glob。宿主若裁掉api/asset目录glob 结果为空函数返回undefined生产构建不会因为硬import失败。constassetStatsModulesimport.meta.glob(../../../../../api/asset/stats/index.ts,);exportfunctiongetAssetOverviewOptional(){returncallOptionalApi(assetStatsModules,getAssetOverview);}exportfunctiongetContractOverviewOptional(){returncallOptionalApi(contractStatsModules,getOverviewStats);}CRM 等领域页同样用 glob 取出统计子页 loader没有文件时 DomainMount 展示「当前版本未包含该业务模块」而不是编译期红字。CRM 挂载页还会按客户、漏斗、业绩、画像、排行等 Tab 各绑一个 loader某个子页被裁掉就只少一个 Tab不要把整块 CRM 统计打成硬依赖。provide(analyticsEmbed, true)让被嵌进来的统计页知道自己在壳里可以藏掉自己那一套重复的日期条避免页上出现两排「近 7 天」。领域页若忽略这个注入用户会搞不清哪一排才是全局筛选。5.3 下钻把 store 里的区间写进 queryexportfunctiongoAnalyticsBoard(router:Router,boardPath:string,extraQuery:Recordstring,string{},){conststoreuseAnalyticsStore();constquery:Recordstring,string{from:analytics,startTime:store.dateRange[0],endTime:store.dateRange[1],...extraQuery,};if(store.deptId!null){query.deptIdString(store.deptId);}router.push({path:boardPath,query});}审批下钻把目标分成待办、已办、流程实例三条路径createTime用逗号拼接和列表页 RangePicker 的回填约定对齐。不要各写各的begin/start三种名字。5.4 访问统计分接口 Promise.allSettled访问看板一次拉 overview、趋势、小时分布、失败原因、用户排行、部门排行。单一图表失败只让该块空着KPI 仍可显示。这和总览的settled()是同一条原则分析页的可用性优先于一张图的完美。5.5 顶栏日期怎么写入 storeRangePicker 绑的是 dayjsstore 里必须是后端能直接当beginTime/endTime用的字符串。预设按钮和手动选区间都要走同一套startOf/endOf否则「近 7 天」和日历框会对不上。constrangeValuecomputed({get:()store.dateRange.map((s)dayjs(s))as[dayjs.Dayjs,dayjs.Dayjs],set:(v:[dayjs.Dayjs,dayjs.Dayjs]|null){if(!v?.[0]||!v?.[1])return;constnext:AnalyticsDateRange[v[0].startOf(day).format(YYYY-MM-DD HH:mm:ss),v[1].endOf(day).format(YYYY-MM-DD HH:mm:ss),];store.setDateRange(next);store.bumpRefresh();},});部门树allow-clear后deptId为undefined请求里不要传0。重置按钮同时清时间和部门并bumpRefresh各看板只 watchrefreshTick也能刷新。六、后端口径谁算在线、谁算进行中6.1 访问总览登录日志 Token 未过期区间登录次数、登录用户数、失败次数来自登录日志表失败率 失败 / (成功 失败)。「今日」单独按当天 0 点到次日 0 点再查一次不和区间混用。当前在线统计用户类型为管理端、过期时间仍大于现在的 Access Token 数量。它回答的是「此刻有多少后台会话还活着」不是「IM 里亮着绿点的人数」。趋势接口会把区间内每一天补齐没有登录的日期填 0避免折线在日历上出现空洞被误读成系统那天没开。6.2 审批总览未结束实例 vs 超时任务进行中流程用历史流程实例查询unfinished()并带上租户 ID。超时待办走任务查询的超时条件。区间新发起、区间办结按开始时间 / 结束时间落在筛选窗口内计数。平均办结耗时只对已结束实例算 Duration再换算成小时。实例很少时数字会很小演示环境常见 0.x 小时不要因此改成「按工作日八小时折算」除非产品明确要求——那是另一套口径应单独做字段不要覆盖原值。进行中计数示意租户条件必须带上否则会串到其它租户的未结实例longrunningCounthistoryService.createHistoricProcessInstanceQuery().processInstanceTenantId(tenantId).unfinished().count();longoverdueTaskCounttaskService.createTaskQuery().taskTenantId(tenantId).active().taskDueBefore(newDate()).count();平均办结耗时不是扫全量历史而是对区间内已结束实例按结束时间倒序最多取 200 条再算 Duration。实例极多时这是估算看板应理解为「近期办结样本的平均小时」不要写成精确到秒的 SLA 考核唯一依据。区间新发起、区间办结要另查开始时间 / 结束时间落在窗口内的实例。不要用「进行中 本区间办结」反推新发起漏掉跨月仍未结束的单。6.3 健康墙金额用模块自己的 overview禁止壳内四则运算合同总金额、在建项目、在用资产、本月支付、今日销售全部调用各模块已经用于自己统计页的接口。分析中心只做展示和跳转。若在 Vue 里把分转成元商城支付金额/ 100这是展示单位换算仍然以接口返回的分为权威不要在壳里再乘折扣。6.4 登录失败原因用结果码映射不要把英文枚举甩到图上失败原因分布来自登录日志的 result 字段。前端图表需要中文名账号或密码不正确、用户被禁用、验证码不存在、验证码不正确。映射放在服务端看板只展示name/value。新增一种登录失败码时先补标签再上图否则饼图会出现空白扇区或原始数字。「当前在线」不走登录日志走 Token 表。把两个口径画在同一张 KPI 行可以但图注要写清一个是区间行为一个是此刻会话。七、和创新相关的几条取舍7.1 菜单裁剪优于配置开关用现有 RBAC 菜单判断模块在不在比再做一张「分析中心模块开关」表更不容易漂。租户没买商城菜单里就没有/mall健康墙自然少卡。代价是菜单 path 改名时menuHints要一起改。7.2 软加载优于「注释掉 import」OA 商业裁剪会物理去掉部分模块目录。硬 import 会让前端构建失败。glob 为空即视为模块不存在和后端 profile 裁剪是同一方向的隔离。7.3 下钻回填优于「另开无筛选的列表」管理者从超时待办点进去如果列表是默认「全部待办」等于没下钻。createTime逗号拼接是和现有 RangePicker 的约定列表页需要能解析这一对值。7.4 空态诚实优于假繁荣商城本月支付 0.00、ERP 今日销售 0在演示库里很常见。保留 0不要改成「–」除非接口失败。接口失败则整卡不渲染和「真的是 0」区分开。八、接口与字段备忘8.1 访问统计接口作用关键字段GET /system/visit-stats/overview总览 KPIloginCount、todayLoginUserCount、onlineCount、failRateGET /system/visit-stats/trend按日趋势date、loginCount、loginUserCount、failCountGET /system/visit-stats/hour-dist小时分布name、valueGET /system/visit-stats/fail-reason失败原因账号密码、禁用、验证码等标签GET /system/visit-stats/user-rank用户活跃排行可下钻 usernameGET /system/visit-stats/dept-rank部门活跃排行deptId查询参数统一beginTime、endTime、deptId、limit。时间与壳上 store 一致用字符串日期时间不要再转成数组。8.2 审批效能接口作用关键字段GET /bpm/analysis/overview吞吐 KPIrunningCount、overdueTaskCount、新发起、已办结、平均耗时GET /bpm/analysis/trend发起 / 办结趋势date、发起量、办结量GET /bpm/analysis/by-process流程 TOP流程名、definitionKey、发起 / 办结 / 进行中8.3 前端路由path组件职责/workspace/analytics壳BoardNav FilterBar RouterView/workspace/analytics/overview经营总览/workspace/analytics/visit访问统计/workspace/analytics/bpm审批效能/workspace/analytics/hrm等领域页或 DomainMount 软加载九、技术亮点总结设计要点实现方式价值壳与看板分离布局组件 子路由筛选一套图多张菜单 hint 裁剪路径包含判断没买的模块不露入口可选 API globimport.meta.glob 空则跳过OA 裁剪能过构建总览并行容错Promise.all 单接口 catch一块 404 不整页挂下钻带筛选queryfrom 时间 部门能从异常点进单据在线口径未过期管理端 Token和 IM 在线解耦进行中口径Flowable 未结束实例不和待办条数混用金额不重算复用模块 overview月底对账只有一个权威数日期写入startOf/endOf day 补时分秒当天数据不会被比丢积木分轨独立报表菜单Token 桥不进经营壳十、快速体验在线演示https://ruoyioffice.com/web/账号 admin / admin123推荐路径登录后打开「分析中心」确认左侧有经营总览、访问统计以及当前版本已开通的领域看板看经营总览四张脉搏和健康墙点「超时待办」或「进行中流程」确认地址栏带fromanalytics和时间切到访问统计看登录趋势点 KPI 试着进登录日志切到审批效能对照流程 TOP 与流程实例列表是否同一批 definitionKey打开「报表管理 → 报表设计器」确认那是积木不在分析中心左侧回到工作台首页确认待办卡片和总览「活跃待办」不是同一块 UI用没有合同菜单的角色登录若环境有确认健康墙少了合同卡而不是报错。本地启动后端单体入口端口 48080前端pnpm dev:antd端口 5800。分析中心路由在 workspace 下不在独立/report站点。源码仓库GitHubhttps://github.com/yuqing2026/ruoyi-office GitCodehttps://gitcode.com/zhouzhongyan/ruoyi-office Giteehttps://gitee.com/yqzy1688/ruoyi-office版本锚点本文描述的是 Spring Boot 3.5 Vue 3 分析中心壳/workspace/analytics与各域 stats/analysis 接口这一档实现。积木报表 iframe Token 见另文不要把两套菜单配成同一个入口。结语分析中心的核心不是把所有图表堆到一屏而是承认三件事经营脉搏要统一筛选和下钻自助报表要独立设计器执行人首页要待办而不是 KPI。壳只保存时间和部门数字仍由各域权威接口说出。菜单在看板才在模块被裁掉构建和页面都要能软着陆。同一套思路还可以用在「工作台卡片要不要显示合同金额」执行人不看总盘管理者不在待办里对账。先问这张图是给谁看的再决定画在哪。相关阅读建议积木报表 Token 与数据集那篇看设计器怎么嵌待办列表字段那篇看执行人入口该留哪些列。不要把三篇写成「再做一个 BI」。欢迎在评论区说说你们是总览和下钻为主还是业务必须自己改积木格子。若你们把分析中心和报表设计器做成同一个菜单也可以说说对账时数字怎么对齐。常见问题FAQ分析中心和积木报表应该怎么选、怎么分工分析中心适合管理者看固定口径的脉搏与下钻积木适合业务改格子、配 SQL/API 数据集、导出 Excel。RuoYi Office 里两者是不同菜单/workspace/analytics与报表设计器。GoView 再分一轨只做挂墙驾驶舱。经营总览的「当前在线」和 IM 在线是一回事吗不是。分析中心在线人数统计的是未过期的管理端 Access Token。IM 在线是长连接/心跳。对账或值班大屏不要混用这两个数字。点了超时待办列表为什么还是全部任务下钻必须带fromanalytics和createTime逗号拼接的起止。列表页要能解析这对参数回填 RangePicker。只跳路径、不带 query等于没下钻。OA 裁剪掉合同/商城后分析中心会不会构建失败总览对可选模块使用import.meta.glob目录不存在则跳过请求和卡片。领域页用 DomainMount 空态提示「当前版本未包含该业务模块」。不要改回硬 import。健康墙上合同金额为 0是接口挂了还是真没数据接口失败时该卡不渲染渲染出来的 0 表示 overview 返回了 0。先看 Network 是否 200再对合同模块自己的统计页是否同一数字。不要在分析中心再写一套金额汇总 SQL。为什么审批效能的「进行中」和待办条数不一致进行中按未结束的流程实例计待办按当前人任务计。一个实例可以有多个待办或待办在别人名下。看板标题已经写成「进行中流程」不要改成「我的待办数」。想要体验 RuoYi Office 的强大功能在线演示https://ruoyioffice.com/web/账号 admin / admin123源码仓库GitHubhttps://github.com/yuqing2026/ruoyi-office GitCodehttps://gitcode.com/zhouzhongyan/ruoyi-office Giteehttps://gitee.com/yqzy1688/ruoyi-office技术咨询添加微信17156169080备注「RuoYi Office」⭐如果觉得不错请给个 Star 支持一下