一、项目背景与目标

1.项目背景

在数字化转型的背景下，对如何进一步发挥数据在经营决策的价值提出了新的挑战。从业务方面，当前的指标散落在各个系统中，来源多样化、数据口径不一致，存在的问题有指标找不到、指标没有、业务无法判断指标的正确性。从技术方面，数据化指标展现响应能力慢、展示工具缺失、开发周期长，无法快速的对业务提供有价值的决策支持。

2.项目目标

组件化移动驾驶舱平台专为中高层管理人员、中层机构人员及前台业务人员而设计，旨在打造一款商业智能化工具。该工具通过移动端展示标准化与定制化数据，支持对关键业务指标的查询、监控和分析，使用户能够快速获取最新业务信息。该项目需要解决以往前端页面开发周期长、页面灵活性低、移动端页面复用性差、经营与考核指标难以区分以及业务人员无法独立完成页面搭建的问题。

二、项目方案

在充分分析和调研了业务痛点之后，我们整合各方资源，成立了常熟农商银行组件化移动驾驶舱系统项目组，组件化移动驾驶舱项目秉承“高内聚、低耦合”的设计理念，进行组件化、页面化架构研发。旨在为用户提供一个功能强大、编码简易、安全可靠的移动开发平台。组件化移动驾驶舱项目精心构建于三大核心支柱之上：美观的前端界面，确保用户享受视觉盛宴与无缝交互体验；高效的数据指标集市，作为桥梁无缝衔接前后端，加速信息流的双向畅通；以及稳健的应用后端服务，专注于精准执行业务逻辑并与数据库紧密协作，保障业务运行的准确无误与数据的安全守护。三者深度融合，共同塑造了一个高度模块化、运行流畅的完整项目。

数据指标集市当前的指标数量1000+，指标通过口径需求分为经营驾驶舱、考核驾驶舱，满足经营和考核管理多种需求。经营驾驶舱首页包含经营分析、近三年业绩、风险指标、营利指标四大模块(指标数量850+)；考核驾驶舱首页包含经营分析、大零售贷款、对公贷款三个大类(指标数量150+)，两个驾驶舱都包含首页、专题、实时、探索、我的五个页面。通过点击“切换”按钮，可以切换至经营驾驶舱或者考核驾驶舱，从而查看不同口径的指标。

在确保可视化页面流畅稳定显示的同时，对后端功能进行了全面革新。例如，后端管理功能层面新增了多项指标校验功能，包括基础数据核验、总分平衡审查和指标间逻辑验证；指标配置方面，允许用户以可视化方式自定义指标的显示样式；报告自动生成功能能够处理报告中的数据和图表展示；数据导入功能简化了通过EXCEL表格的数据输入；数据补录功能使得手动补充特定指标数据变得更加便捷，并支持线下内容呈现；系统管理则覆盖了用户、角色、机构及数据配置等多个方面的管理需求。

后端管理功能展示

基于稳定的应用架构和标准指标，构建了一个拖拽式设计器工具。该设计器的技术核心依赖于UI组件库（Vue3 element plus）和数据可视化图表库（Echarts）。目前，已开发了30个标准化组件，并可通过设计器内的拖拽功能，将这些标准的组件搭建成组件树。用户能够利用设计器中的组件设置功能，灵活调整以配置出多样化的组件树。同时，应用支撑系统控制权限，确保数据的安全性和页面的多样性。最终，通过发布模板展示组件化的移动驾驶舱页面。

设计器工具展示

组件中颜色调整

三、创新点

1.组件化

组件化移动驾驶舱项目规划展现了一个清晰且富有远见的路线图，旨在通过组件化设计和拖拽式开发平台来显著提升软件开发效率、灵活性和用户体验。

第一阶段：构建基础组件库

1. 组件定义与分类：

   - 核心组件：如图形、表格、图表、按钮等。当前完成图形组件是30个。

设计器组件展示

设计器组件拖拉展示

   - 业务特定组件：针对特定业务需求设计的组件，如新市民、市场份额等。

专题-新市民

   - 布局组件：如栅格系统、卡片布局等，用于页面的整体架构设计。

栅格、表格布局

2. 技术实现：

   - 可复用性：确保每个组件都是独立的，易于在不同页面和系统中重用。

   - 灵活性：组件应支持丰富的配置选项，以满足不同场景下的需求。

   - 性能优化：考虑组件的加载速度和渲染效率，特别是在复杂页面中的应用。

3. 开发与测试：

   - 采用敏捷开发模式，快速迭代组件并收集反馈。

   - 建立完善的测试体系，确保组件的稳定性和兼容性。

4. 应用搭建：

   - 开发一套易于使用的页面搭建工具，让技术人员也能通过拖拽组件来构建页面。

   - 支持页面预览、编辑、模版保存和发布。  

页面预览

模板保存

完整发布

第二阶段：扩展应用与共享功能

1. 组件定义与分类：

   - 核心组件：继续搭建图形、表格、图表等。初步计划完成图形组件是15个。

2. 业务应用搭建：

   - 优化页面搭建工具，让非技术人员也能通过拖拽组件来构建页面。

   - 优化页面预览、编辑和发布流程，确保业务人员能够自主完成页面搭建。 

3. 系统适配与集成：

   - 研究并实现组件和页面在不同系统中的适配方案。

   - 开发接口或插件，以便将组件化移动驾驶舱页面嵌入到其他应用系统中。

4. 私有页面分享与协作：

   - 实现页面分享功能，允许用户将搭建好的页面以“私有”或“公开”的方式分享给其他人或系统。

   - 支持基于角色的访问控制，确保数据安全。

组件化功能架构

4.2后端管理功能

建立多层次的数据自动校验机制，通过不断更新和迭代校验规则、扩充校验范围来提升数据质量。自动化的校验系统能够分析数据，并利用智能外呼功能，将潜在问题迅速通过电话通知到业务部门，实现数据的智能化，提高响应速度。目前，已设定499条校验规则，包括451项限额校验、11项总分校验以及37项勾稽校验。

为防范信息风险，已经构建一套完善的用户角色管理体系，确保对组件化驾驶指标的访问权限进行严格限制与管控。

组件化移动驾驶舱后端管理功能构成

4.3指标标准化

构建统一指标规范，确保指标数据质量、指标口径统一，提升整体效能，奠定坚实的数据基础。

数据架构图

四、技术实现特点及优势

物理架构图

（一）设计器技术实现特点

1.现代前端技术：使用Vue3 element plus，兼容性强，支持未来扩展需求。

2.组合式Api：提高代码可读性和可维护性，拆分为独立、可复用的组件。

3.Echarts库：支持复杂数据的可视化需求。

（二）设计器优势

1.加快开发速度：预构建组件和可视化开发环境，大幅缩短开发时间。

2.降低技术门槛：可视化拖拽减少对高级编程技能的依赖。

3.提高灵活性：允许快速修改和迭代应用，响应业务需求变化。

4.促进协作和降低成本：统一平台上协作分享，节省开发和维护成本。

5.可维护性强：组件化结构简化维护和升级，错误处理迅速。

6.快速集成：后续扩展性强，可集成更多功能和系统。

五、项目过程管理

常熟农商银行组件化移动驾驶舱项目于2024年2月启动组件化移动驾驶舱项目，7月完成系统上线和生产并行运营。

六、运营情况

当前通过行内OA推送、机构实地访谈、总行部门调研机构重点负责人调研、小燕视频录制、APP端开屏教程等推广工作，这一系列线上与线下相结合的方式，不仅扩大了宣传覆盖面，还有效收集了用户反馈与建议，旨在持续优化服务与产品体验。

1.全行OA推广

全面启动全行OA系统推广，诚邀全体员工积极参与体验，并真诚收集大家的宝贵意见。目前，蓝信系统入口已顺利为9779位员工开启，实现了100%的开户率。

2.业务部门机构推广

目前收到机构反馈建议43个，处理中2个,完成41个。处理进度95%，

3.组件化访问情况

组件化驾驶舱部门机构已参与访问次数22338次。

总行部门：共21个总行部分访问了驾驶舱，组件化访问次数3972次，老版本访问次数2435次。

本地机构：共38个机构访问了驾驶舱，组件化访问次数9969次，老版本访问次数6481次。

异地机构：共43个机构访问了驾驶舱，组件化访问次数8397次，老版本访问次数6370次。

4.项目组内持续优化中

七、项目成效

功能上组件化版本在继承老版本的基础上，进行了重要功能升级：实现高度可视化的“组件化设计器”前端页面搭建功能。降低了前端页面设计开发门槛，实现了可视化拖拽开发的新体验。

在日常前端开发中，通过采用组件化策略，开发效率得到显著提升。对于现有组件的升级，新版本的开发效率比旧版本提高了133%，而在开发新组件组成主题时，相比过去也提升了71%的效率。这种改进不仅加速了整个开发流程，还有效节约了人力资源成本，并快速响应业务需求，使数据迅速传递。

当前正在开启使用驾驶舱组件化APP的先河，打造金融业示范组件驾驶舱应用试点。通过一段时间的运行后，将在全行、其他同行业推广。

场景1：实时异动数据快速响应

在某天一位支行行长在下午1:50左右发现贷款资金下降了一个多亿，无法追踪到资金动向。这时通过蓝信找到驾驶舱项目组，经过实时指标的快速查看发现有一笔****公司，金额是97,900,000元在上午11:30左右流出，在下午两点左右给出了相关信息，后面经过支行同事优质服务和产品推荐，在第三天流入了大部分资金。实时数据的时效性提高到10秒内，大额异动在30秒内可查询、可追溯。

场景2：信息整合与快速获取

支行人员反馈需要获取绩效指标(KPI)，必须到绩效系统、管会系统、报表系统查看；不同的指标在不同系统查看，不同的指标在不同报表查看，组件化移动驾驶舱经过页面设计、拖拽组件、快速部署2天的时间完成页面展示,老版本大概需要5天；同时也减少登录不同系统查找的时间。以前需要30分钟查看自己的KPI，当前需要5分钟在组件化移动驾驶舱中查看，从而此一项节省了25分钟。构建“智能化”流程，减少人工四处查找。

八、经验总结

组件化移动驾驶舱项目集中关注“标准化”和“智能化”，旨在构建统一规范，确保数据质量，促进团队协作效率，提高整体性能，同时为数据分析奠定稳固基础。通过打造智能流程减少人工干预，提升数据处理速度与精确度，释放团队创新潜力，让成员能专注于更高层次的任务。本项目涉及建立标准化指标体系和指标库、开发多重指标校验公式、实现设计器组件和页面的复用以及快速部署发布界面。此外，项目还包括利用分类驾驶舱和专题驾驶舱快速查看指标，及积累数据分析的沉淀数据。