PSDP Screen Repository
预算看板 — 分公司大屏
业务流程全解析
技术架构与业务逻辑说明，涵盖旧屏（screen-new）与新屏（manageScreen）分公司页面的完整对比
Vue 3 + Vite + Pinia
Element Plus + ECharts
2026.03
01 / Overview
项目技术全景
该项目是一个 预算看板系统，根据用户的组织层级（分公司/营服/网格）， 自动路由到对应的大屏页面，展示财务指标、KPI 完成情况和组织排名。
⚙
技术栈
框架: Vue 3.3 + Vue Router 4 + Pinia
构建: Vite 5
UI: Element Plus 2.5 + ECharts 5.5
部署路径: /wghtml/asiahtml/budgetv/
构建: Vite 5
UI: Element Plus 2.5 + ECharts 5.5
部署路径: /wghtml/asiahtml/budgetv/
🔒
两套大屏并行
旧屏 /screen → views/screen-new/
新屏 /manageScreen → views/manageScreen/
两套屏共享同一套后端 API，入口逻辑完全一致
新屏 /manageScreen → views/manageScreen/
两套屏共享同一套后端 API，入口逻辑完全一致
src/
├── main.js
├── permission.js
├── router/index.js
├── store/modules/user.js
├── plugins/spost.js
├── components/Screen/
├── views/
│ ├── screen-new/ ← 旧屏
│ │ ├── layout.vue
│ │ ├── header.vue
│ │ ├── branchCompany/
│ │ ├── grid/
│ │ └── campService/
│ ├── manageScreen/ ← 新屏
│ │ ├── layout.vue
│ │ ├── header.vue
│ │ ├── component/ ← 共享组件
│ │ ├── branchCompany/
│ │ ├── grid/
│ │ └── campService/
├── main.js
├── permission.js
├── router/index.js
├── store/modules/user.js
├── plugins/spost.js
├── components/Screen/
├── views/
│ ├── screen-new/ ← 旧屏
│ │ ├── layout.vue
│ │ ├── header.vue
│ │ ├── branchCompany/
│ │ ├── grid/
│ │ └── campService/
│ ├── manageScreen/ ← 新屏
│ │ ├── layout.vue
│ │ ├── header.vue
│ │ ├── component/ ← 共享组件
│ │ ├── branchCompany/
│ │ ├── grid/
│ │ └── campService/
02 / Entry Flow
页面入口与路由决策
用户访问系统后，layout.vue 调用 getBaseInfo 接口获取用户信息， 根据 ruleType 自动决定跳转到哪个子页面。
用户访问
/screen 或 /manageScreen
layout.vue
渲染 Header + router-view
getBaseInfo
API: /ManagementChart/getBaseInfo
ruleType 判断
决定路由目标
01 / 02
分公司
ruleType 为 '01' 或 '02' 时跳转
路由:
路由:
/*/branchCompany
13 / 135 / 136
营服
ruleType 为 '13'/'135'/'136' 时跳转
路由:
路由:
/*/campService
其他
网格
其他 ruleType 值跳转
路由:
路由:
/*/grid
// layout.vue 中的核心路由逻辑
if (['13', '135', '136'].includes(ruleType)) router.push('/*/campService')
else if (['01', '02'].includes(ruleType)) router.push('/*/branchCompany') // ← 分公司
else router.push('/*/grid')
if (['13', '135', '136'].includes(ruleType)) router.push('/*/campService')
else if (['01', '02'].includes(ruleType)) router.push('/*/branchCompany') // ← 分公司
else router.push('/*/grid')
03 / State Management
Header 控件与全局状态
Header 提供 4 个核心筛选控件，所有操作通过 Pinia Store 同步到子组件。旧屏和新屏的 Header + Store 逻辑完全一致。
Header 四大控件
日期选择器monthId
维度切换 (月累/当月)dimension: LJ |
DY
组织选择 (树形)sellArea +
ruleType
核算方式切换tabType
数据流向
Header 事件 → layout.vue 处理 → useUserStore().$patch →
子组件 watch(userInfo) → 重新请求数据
// Pinia Store 中的 userInfo 结构
userInfo: {
ruleType: '01', // 组织类型
sellArea: 'TJ_CITY',// 组织ID
sellAreaDesc: '天津',// 组织名
monthId: '202603',// 月份
dimension: 'LJ', // LJ累计 | DY当月
tabType: 'INDEX_VALUE_JYZRZT_SJKJHJ',
dayId: ...,
zqgzType: ...
}
userInfo: {
ruleType: '01', // 组织类型
sellArea: 'TJ_CITY',// 组织ID
sellAreaDesc: '天津',// 组织名
monthId: '202603',// 月份
dimension: 'LJ', // LJ累计 | DY当月
tabType: 'INDEX_VALUE_JYZRZT_SJKJHJ',
dayId: ...,
zqgzType: ...
}
04 / Old Screen Layout
旧屏分公司 — 整体布局 screen-new
三列等宽布局，上下两个区域。上方展示核心财务指标，下方展示组织完成排名。
■
旧屏 screen-new/branchCompany 布局
topContent (上半区)
收入及业务
income/
毛利
grossProfit/
经营利润
profit/
bottomContent (下半区)
收入排名
income/
毛利排名
grossProfit/
利润排名
profit/
关键特征
中间列为 毛利 (grossProfit)
公式: 毛利 = 联网毛利 + 算网毛利 - 网络成本(业务相关)
含坏账/不含坏账切换
收入模块有独立卡片组件 (incomeCard / businessCard)
使用 ringCirle 渐变环形进度
组件引用
topContent/component/
├── incomeCard.vue
├── businessCard.vue
├── yourselfDialog.vue
└── branchPluschartDialog.vue
组件内置在 topContent 子目录下
├── incomeCard.vue
├── businessCard.vue
├── yourselfDialog.vue
└── branchPluschartDialog.vue
组件内置在 topContent 子目录下
05 / Old Income Module
旧屏 — 收入及业务模块
收入模块是最复杂的模块，包含主营业务收入概览、固定卡片、自选卡片、渠道筛选和趋势图。
主营业务收入区域
完成值WC (万元)
预算完成率 (环形图)YS_WCL
同比增量 / 增幅TBZL / TBZF
月累模式: 全年目标 + 序时目标 + 序时缺口
当月模式: 当月目标 + 完成缺口
固定卡片 (4张)
📈 联网收入
📈 算网收入
🌱 全视界 产品
🌱 融合主宽 业务
卡片展示: 完成值、完成率、目标、缺口、同比，布局为 2列网格
渠道筛选
全渠道 / 公众(GZ) / 政企(ZQ) 三种渠道
使用 el-radio-group 切换，当 tabType 为客户口径时隐藏
使用 el-radio-group 切换，当 tabType 为客户口径时隐藏
自选指标体系
自选弹框 (yourselfDialog.vue):
• 收入类: 联网收入(固定) / 算网收入(固定) / 子项目可选
• 业务类: 全视界(固定) / 融合主宽(固定) / 其他可选
展开/收起: 选中后在虚线下方展示自选卡片
API: getUserZbInfoData / updateUserZbInfo
• 收入类: 联网收入(固定) / 算网收入(固定) / 子项目可选
• 业务类: 全视界(固定) / 融合主宽(固定) / 其他可选
展开/收起: 选中后在虚线下方展示自选卡片
API: getUserZbInfoData / updateUserZbInfo
趋势图弹框
branchPluschartDialog.vue
需先选中某个卡片，点击"查看趋势图"按钮打开
支持收入指标和业务指标两种模式
需先选中某个卡片，点击"查看趋势图"按钮打开
支持收入指标和业务指标两种模式
06 / Old GrossProfit & Profit
旧屏 — 毛利与经营利润
💰
毛利模块 (grossProfit)
公式: 毛利 = 联网毛利 + 算网毛利 - 网络成本(业务相关)
含坏账/不含坏账切换el-radio-group
业务毛利 完成值AY_BNLJ
预算完成率 (橙色环)AY_YSWCLV
联网毛利
算网毛利
网络成本(业务相关)
坏账成本 (条件显示)
📈
经营利润模块 (profit)
公式: 经营利润 = 毛利 - 坏账 - 网络成本(不含业务) - 综合成本 - 数字化成本
经营利润 完成值AY_BNLJ
预算完成率 (绿色环)AY_YSWCLV
全年/序时目标 + 缺口NBD_MNYS /
XSYS_MB
网络成本
综合成本
数字化成本
其他成本
底部组织排名区 (bottomContent)
三列对应: 收入排名 | 毛利排名 | 利润排名
• 支持 同级组织 / 次级组织 切换
• 进度条配色: 红色(收入) | 橙色(毛利) | 蓝色(利润)
• 展示: 排名序号 + 组织名 + 进度条 + 完成值 + 完成率
• API: getFgsSrCardTjData / getFgsMlCardTjData / getFgsLrCardTjData
• 支持 同级组织 / 次级组织 切换
• 进度条配色: 红色(收入) | 橙色(毛利) | 蓝色(利润)
• 展示: 排名序号 + 组织名 + 进度条 + 完成值 + 完成率
• API: getFgsSrCardTjData / getFgsMlCardTjData / getFgsLrCardTjData
07 / New Screen Layout
新屏分公司 — 整体布局 manageScreen
新屏将中间列从 毛利 改为 成本， 并统一使用 IndicatorCard 表格式组件替代旧的独立卡片。
■
新屏 manageScreen/branchCompany 布局
topContent (上半区)
收入及业务
income/
成本
cost/ NEW!
经营利润
profit/
bottomContent (下半区)
收入排名
income/
成本排名
cost/
利润排名
profit/
新屏关键变化
中间列: 毛利 → 成本
卡片组件统一为 IndicatorCard 表格式
共享组件提升到 manageScreen/component/
新增 costDialog 成本自选弹框
新增 drawerDialog 抽屉式详情
组件引用方式变化
manageScreen/component/ ← 集中共享
├── IndicatorCard.vue
├── CompareValue.vue
├── yourSelfDialog.vue
├── costDialog.vue NEW
├── branchPluschartDialog.vue
└── drawerDialog.vue NEW
├── IndicatorCard.vue
├── CompareValue.vue
├── yourSelfDialog.vue
├── costDialog.vue NEW
├── branchPluschartDialog.vue
└── drawerDialog.vue NEW
08 / New Income Module
新屏收入模块 — 变化详解
保持不变的部分
主营业务收入区域布局
完成值 + 预算完成率 + 同比
LJ/DY 两种维度切换逻辑
自选弹框 + 展开收起机制
趋势图弹框 (选中卡片后可用)
渠道筛选 (全渠道/公众/政企)
API 接口完全一致
发生变化的部分
卡片展示: 独立卡片 → IndicatorCard 表格
新增指标分类: 基准 / 弹性 / 业务 三类标签
进度环: ringCirle → ProgressRing
渠道筛选: radio-button → 纯文本点击切换
新增 DrawerDialog 抽屉式详情查看
背景色: #eef5fd → #f9fcfe (更浅)
目前使用 Mock 数据，待联调接口
IndicatorCard 表格组件说明
新屏用 IndicatorCard 替代了旧屏的独立卡片 (incomeCard / businessCard)。
每个 IndicatorCard 接受
columns 和 data 数组，以表格形式渲染多行数据。
分为三个分类: 基准(蓝色)、弹性(橙色)、业务(绿色)，
支持行选中、点击穿透到 DrawerDialog 查看详情。
09 / New Cost Module
新屏独有 — 成本模块 NEW
新屏将旧屏的"毛利"列替换为"成本"列，独立展示成本相关指标。这是新旧屏最大的业务逻辑差异。
成本模块结构
头部: 完成值 + 预算完成率 + 同比
基准类 IndicatorCard (蓝标)
弹性类 IndicatorCard (橙标)
联网通信
算网数智
网络(业务相关)
网络/综合/数字化等
自选弹框 (costDialog)
使用独立的 costDialog.vue，
与收入的 yourSelfDialog 结构类似，但筛选项针对成本指标。
支持展开/收起自选成本卡片。
与收入的 yourSelfDialog 结构类似，但筛选项针对成本指标。
支持展开/收起自选成本卡片。
与旧屏毛利的核心差异
| 维度 | 旧屏 (毛利) | 新屏 (成本) |
|---|---|---|
| 指标方向 | 计算结果 (收入 - 成本) | 直接展示成本项 |
| 坏账切换 | 含坏账 / 不含坏账 toggle | 无 (成本直接展示) |
| 展示形式 | 独立卡片 | IndicatorCard 表格 |
| 自选弹框 | yourselfDialog | costDialog (新) |
⚠ 当前状态
成本模块目前使用 硬编码 Mock 数据，接口待联调。
字段映射与列配置已完成，对接时只需替换 data 数组。
字段映射与列配置已完成，对接时只需替换 data 数组。
10 / Full Comparison
新旧屏分公司完整对比
| 对比维度 | 旧屏 (screen-new) | 新屏 (manageScreen) |
|---|---|---|
| 路由 | /screen/branchCompany | /manageScreen/branchCompany |
| 三列布局 | 收入 | 毛利 | 利润 | 收入 | 成本 | 利润 |
| 卡片组件 | incomeCard / businessCard (独立卡片) | IndicatorCard (表格式, 基准/弹性/业务分类) |
| 进度环 | ringCirle (渐变切片环) | ProgressRing (简约环) |
| 渠道筛选 | el-radio-button 组 | 纯 div 文字切换 |
| 自选弹框 | yourselfDialog (含收入 + 业务) | yourSelfDialog + costDialog (分开) |
| 组件位置 | topContent/component/ 内 | manageScreen/component/ 集中管理 |
| 详情查看 | 跳转外部页面 (Portal.firePortalEvent) | DrawerDialog 抽屉式 + 外部跳转 |
| 背景色 | #eef5fd (浅蓝) | #f9fcfe (更浅) |
| 数据状态 | 接口已对接，线上运行 | 布局完成，Mock 数据，待联调 |
11 / API Endpoints
核心 API 接口速查
所有接口前缀为 /ManagementChart/，通过 spost 工具函数调用，参数以 FormData 格式发送。
收入相关
getBaseInfo获取用户基础信息
getFgsSrCardData收入卡片 (全渠道)
getFgsSrCardDataGzZq收入卡片
(公众/政企)
getUserZbInfoData自选指标数据
updateUserZbInfo保存自选配置
排名 & 利润
getFgsSrCardTjData收入组织排名
getFgsSrCardCjData收入次级组织
getFgsMlCardData毛利卡片数据
getFgsMlCardTjData毛利组织排名
getFgsLrCardData利润卡片数据
getFgsLrCardTjData利润组织排名
// 通用请求参数结构
{
monthId: '202603', // 月份
sellArea: 'TJ_CITY', // 组织ID
srType: 'LJ', // LJ累计 | DY当月
kjType: 'INDEX_VALUE_...', // 核算方式
qdType?: '公众' | '政企', // 渠道 (可选)
ymType: 'FGS', // 页面类型=分公司
zbType: 'SR' | 'ML' | 'LR' // 收入|毛利|利润
}
{
monthId: '202603', // 月份
sellArea: 'TJ_CITY', // 组织ID
srType: 'LJ', // LJ累计 | DY当月
kjType: 'INDEX_VALUE_...', // 核算方式
qdType?: '公众' | '政企', // 渠道 (可选)
ymType: 'FGS', // 页面类型=分公司
zbType: 'SR' | 'ML' | 'LR' // 收入|毛利|利润
}
12 / Field Reference
核心数据字段速查表
收入字段 (Income)
WC完成值 (万元)
YS_WCL预算完成率 (%)
YS_MB全年/当月目标
XSYS_MB序时目标
YS_WCQK完成缺口
TBZL同比增量
TBZF同比增幅 (%)
QNTQ_LJ去年同期 (判断是否有同比)
毛利/利润字段 (Profit)
AY_BNLJ完成值 (万元)
AY_YSWCLV预算完成率 (%)
NBD_MNYS全年目标
XSYS_MB序时目标
AY_YSQK序时缺口
AY_TBZL同比增量
AY_TBZF同比增幅 (%)
FGS_PM组织排名
业务指标字段 (全视界 / 融合主宽)
QSJ_DD /
RHZK_DD到达数
QSJ_JZ_M /
RHZK_JZ_M净增数
QSJ_DDMB_M到达目标
QSJ_DDWCL_M到达完成率
QSJ_MB_M净增目标
QSJ_WCL_M净增完成率
13 / Developer Tips
联调建议与开发提示
1
接口联调顺序建议
先联调 收入模块 (income) - 逻辑与旧屏一致
再联调 成本模块 (cost) - 新增模块
最后联调 利润模块 (profit) 和 bottomContent
2
Mock 数据替换方式
在新屏各模块中找到硬编码的
incomeData / bussinessData 数组，
替换为接口返回数据即可。列配置 (columns) 和标题列 (titleColumns) 通常不需修改。
3
参考旧屏实现
新屏的 API 调用逻辑可直接参考旧屏同名文件:
screen-new/branchCompany/topContent/income/index.vue 中的
screen-new/branchCompany/topContent/income/index.vue 中的
getIncomeInfo() 和 getCardData() 方法可以直接复用。
4
注意事项
• spost 第一个参数是 loading store，用于自动管理加载状态
• 请求参数需要
• 同比值判断: 如果
• 目标为 0 时显示"无目标"而不是 0
• 请求参数需要
JSON.stringify 后放入 JsonParam• 同比值判断: 如果
QNTQ_LJ === 0 则显示"去年无发生"• 目标为 0 时显示"无目标"而不是 0
PSDP Screen Repository
业务流程解析完毕
如有疑问，请参阅源码中对应的 Vue 文件
旧屏路径: views/screen-new/branchCompany/
新屏路径: views/manageScreen/branchCompany/
Vue 3 + Vite
Pinia 状态管理
Element Plus
ECharts 图表