通过不同的产品组合可以办理不同公司面临的企业困难，帮助企业范围内建立起一整套统一、规范的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数据平台是数通畅联数据中台的一部分，它可以提升企业的业务数据代价，从数据来源上梳理企业的业务数据，把须要提升企业业务代价的干系表放到中间库中，通过数据管理整合汇总这些数据，把这些数据变成完全的可不雅观察的数据从而把数据展现出来。
在确保产品的易用性、稳定性以及性能的根本上，数通畅联对产品不断进行更新迭代，站在用户的角度思考产品，关注市场动向，深入理解需求，提高用户对产品的满意度，增加客户对公司的信赖度。
本文由@数通畅联原创，欢迎转发，仅供学习互换利用，引用请注明出处！
感激~
