DAP数据分析平台是一款专门用于企业大数据平台构建的产品，它可以对从业务系统或者ODS中抽取来的海量数据进行高效存储、计算、分析并处理。最终将有价值的数据以可视化的形式进行展现，能够有效帮助企业清晰的分析优劣势，从而调整企业策略，加快企业的信息化发展与整体竞争力。
通过不同的产品组合可以解决不同公司面临的企业困难，帮助企业范围内建立起一整套统一、规范的IT架构标准体系，包括数据规范、服务规范、流程规范、界面规范、接口规范等，彻底解决了当前面临的信息孤岛问题，有利于提高效率和降低成本。
总体概述近期对DAP产品的前端页面进行了一次整体升级，本次升级需要将DAP中的列表、按钮、表单等样式进行统一，形成规范，提升页面的美观进而提高用户体验。本篇文档主要介绍DAP产品在本次UI升级中调整的内容以及对应规范说明，为后续其他产品的升级打下基础。
1.产品体系
首先介绍公司产品体系如下图：
数通畅联的所有产品都是通过K8S云平台进行部署搭建产品环境，通过不同的产品组合方案来解决企业面临的不同信息化困境，帮助企业完善信息化发展。
DAP数据分析平台通过与ESB应用集成平台结合，使用场景主要是通过配置调度任务，执行调度任务调用ESB数据同步流程，实现数据的采集、抽取、转换、传输、调度等操作，基础数据为DAP提供同源并标准的、一致的数据保障数据分析，分析数据的准确性。
2.产品说明
DAP数据分析平台将企业的数据进行治理分析，并且通过图形组件呈现出来，充分将企业的数据利用起来，发挥数据的最大价值，为企业决策者提供直观的展示效果，从而获得更大的商业价值。在DAP数据分析平台中预置了丰富的组件，饼状图、条形图、散点图、折线图等满足企业的真实所需。它可以对从业务系统或者ODS中抽取来的海量数据进行高效存储、计算、分析并处理。最终将有价值的数据以可视化的形式进行展现，能够有效的帮助企业清晰的分析优劣势，从而调整企业策略，加快企业的信息化发展与整体竞争力。
产品介绍如下：
数据分析平台功能有：
1.数据来源（应用系统定义、数据源头配置、ODS数据定义）。
2.数仓模型（业务主题、维度配置、事实配置、模型配置）。
3.数据调度（规则校验、调度资源、调度任务、日志管理）。
4.分析模型（数据集配置、立方体配置、指标管理、业务类报表、多维度分析）。
5.展现配置（导航管理、组件管理、展现主题、装饰管理）。
6.数据服务（接收服务、查询服务、统计服务、指标服务、业务服务）。
7.数据标签（标签配置、标签定义、数据画像）。
8.统计分析（数据地图、质量分析、影响分析、血缘分析）。
9.系统管理（资源配置、组织机构、角色管理、人员管理、功能管理、系统日志）。
3.升级介绍
本次升级是对DAP产品的所有功能页面，在按钮样式、表单格式和整体页面的布局方面进行了优化，同时也新增了全局的双击清空查询条件，对部分功能弹出样式也进行了修改。接下来具体说明本次的升级内容和升级介绍。
在进行升级前还进行了规范的统计，共有3种分别是：交互规范、样式规范、校验规范。
这次页面升级引用了Bootstrap这一前端框架来构建整个页面的样式和布局，主要体现在按钮和表单方面，按钮样式用到bootstrap自带的一些样式，而表单用到了jqGrid表单控件，升级之后的页面看起来更加简洁、美观。
我们将需要引用的js和css文件统一放到“bootstrap.resource.inc.jsp”文件中，然后在jsp页面中引用该文件。去除页面多余的引用文件。
本次UI升级主要参照数通畅联已经升级的产品页面作为基础，对不同页面进行升级，主要有：列表页面，编辑页面，树形结构，页面表单。
1.页面规范
页面可以分为两种。
1.列表页：
调整前，如下图：
调整后，如下图：
2.编辑页
调整前，如下图：
调整后，如下图：
由上图可见，升级后的列表页面显示更符合视觉效果，并且未来页面按钮与左侧树形不会出现有高度不齐的现象。编辑页面都改成了由父页面进行弹出，解决了部分编辑页面不能移动的问题。
2.树形规范
调整前，如下图：
调整后，如下图：
我们对树的展现样式进行了调整，并对之前不同的树进行了统一规范。
3.布局规范
对于布局规范总体上也是分为两种来介绍，如下：
1.列表页布局：
调整前，如下图：
调整后，如下图：
通过UI升级我们对页面表单和树形的间距进行了统一的调整。按钮看起来也更加的规范，整体效果看起来更美观。
2.编辑页布局
调整前，如下图：
调整后，如下图：
编辑页面的布局调整为父页面弹出，整体的布局分布在列表页面，查看效果更舒服，更符合视觉效果。
升级介绍主要以DAP数据分析平台的事实配置进行介绍说明。分别介绍不同页面结构的布局以及页面样式。
1.页面布局
上文已经介绍过页面总体分为两种，接下来介绍列表页面的布局，
列表页也可以细分为两种。
1.左侧有树形的列表页，整体分为俩部分，一部分为左侧的树形，一部分为右侧的按钮、查询框以及表单为一部分，如下图：
为了页面的整齐划一，对页面的样式在底层进行了统一规划，避免了在不同的产品功能出现页面效果不相同。
2.右侧没有树形的列表页，就是按钮、查询框以及表单为一整体平铺在整个功能页面，如下图：
所有列表页的数据初始化显示为10条，也可以通过自己手动调整数据显示条数，如下图：
3.在字段长度不固定时，页面显示为左对齐，字段长度固定时页面显示为居中对齐，如下图：
4.为了操作便捷，在查询框添加了双击清空功能
上述为列表页布局的介绍，下面进行对编辑页面布局的介绍说明，编辑页面没有区分只有一种，只是因为不同功能而产生的数据显示不同，会对页面布局产生一些微变化，下面列举3种不同的编辑页面布局：
(1)没有不同样式的数据的编辑页面，如下图：
(2)存在大字段的数据的编辑页面，如下图：
因为字段的数据较大所以使用了TEXTEREA标签，为了查看方便，这种标签整行显示。
(3)页面数据需要通过多个按钮来实现，如下图：
2.按钮样式
按钮样式规范：使用Bootstrap中的按钮样式，大小保证一致。
3.效果展示
下面展示调整前后页面的效果，如下图：
1.应用系统定义：
列表页：
编辑页面：
2.数据源头配置
列表页：
编辑页：
3.ODS数据定义
列表页：
编辑页：
升级规范主要是对UI升级过程中需要注意的规范内容进行说明，主要说明的是交互规范、样式规范以及事件校验。
1.交互规范
统一各个页面的交互规范，包括：什么时候弹窗、什么时候打开新标签、各个功能间交互的规范等。分别从页面交互、事件交互、级层交互进行交互规范的介绍。
1.当明细页面表单信息较少或数据量少的时候，明细页面以弹窗形式打开。
2.当明细页面表单信息较多或数据量大的时候，明细页面以新标签的实现进行显示。
在升级中明确表单、事件、权限的校验规范。统一表单校验、事件校验和权限校验样式，如：什么时候使用弹窗提示，什么时候使用表单验证，按钮事件校验方式等。
2.样式规范
样式规范已经在升级策略处说明了常用的集中样式升级规范，其余则是一些特别的页面调整，如下图：
3.事件校验
1.当点击事件需要选中一条记录时，提示信息使用jAlert方式提示。
2.进行删除、清空等危险操作时，需要以“jConfirm”弹窗形式询问用户是否确认操作。
DAP数据分析平台是一款专门用于企业大数据平台构建的产品，它可以对从业务系统或者ODS中抽取来的海量数据进行高效存储、计算、分析并处理。最终将有价值的数据以可视化的形式进行展现，能够有效的帮助企业清晰的分析优劣势，从而调整企业策略，加快企业的信息化发展与整体竞争力。
1.产品理解
数据分析必须要以数据为先，分析为后。对收集来的大量第一手资料和第二手资料进行分析，以求最大化地开发数据资料的功能，发挥数据的作用。这是为了提取有用信息和形成结论而对数据加以详细研究和概括总结的过程，而本文介绍的数据分析平台就大大加强了数据分析这一部分，加强数据应用，无论数据服务和数据可视化展现都要是提升企业数据价值的表现。
2.产品应用
DAP数据分析平台应用分为可视化展现和数据服务的提供，通过数据可视化，业务组织可以提高他们在需要时查找所需信息的能力，也通过数据服务对外提供服务，业务系统可以通过服务抽取数据来保证系统的运行，企业中数据统一管理，统一规划。
3.产品展望
DAP数据平台是数通畅联数据中台的一部分，它可以提升企业的业务数据价值，从数据来源上梳理企业的业务数据，把需要提升企业业务价值的相关表放到中间库中，通过数据治理整合汇总这些数据，把这些数据变成完整的可观察的数据从而把数据展现出来。
在确保产品的易用性、稳定性以及性能的基础上，数通畅联对产品不断进行更新迭代，站在用户的角度思考产品，关注市场动向，深入了解需求，提高用户对产品的满意度，增加客户对公司的信任度。
本文由@数通畅联原创，欢迎转发，仅供学习交流使用，引用请注明出处！谢谢~
,
