CN109710369B - 全图形化用户界面展示方法和装置 - Google Patents

Abstract

本发明提供了一种全图形化用户界面展示方法和装置，方法包括：基于bootstrap框架，分为左边部分、中间部分和右边部分；从左往右自动排序页面内所有元素，并旋转反向左边部分内的所有元素，生成树状全图形化用户界面；增加class样式属性和id标识属性至页面内所有元素对应的行列；加载显示树状全图形化用户界面，并增加url网址属性至树状全图形化用户界面显示的每一对象；获取点击指令对应的对象的url网址属性；根据url网址属性，查找对应的id标识属性，并在新页面中显示相应的信息。通过本发明的技术方案，用户一目了然地查看项目审查进度以及结果，降低了系统整体的操作难度，提升用户工作效率，实现了多元素缩放。

Description

全图形化用户界面展示方法和装置

技术领域

本发明涉及计算机技术领域，具体而言，涉及一种全图形化用户界面展示方法和一种全图形化用户界面展示装置。

背景技术

相关技术中，管理系统一般都采用传统的列表格式界面展示，存在以下技术缺陷：

(1)样式毫无新意、操作繁琐，相对比较复杂，不容易学习，用户需要花费较长的时间去适应。

(2)查看项目审查进度以及结果时，需要点击多步，进行查看，难以做到一目了然，影响用户的工作效率。

发明内容

本发明旨在至少解决现有技术或相关技术中存在的技术问题之一。

为此，本发明的一个目的在于提供一种全图形化用户界面展示方法。

本发明的另一个目的在于提供一种全图形化用户界面展示装置。

为了实现上述目的，本发明的第一方面的技术方案提供了一种全图形化用户界面展示方法，包括：基于bootstrap框架，将页面十二等分，页面按照5:2:5从左到右分为左边部分、中间部分和右边部分；基于页面规范标准代码，从左往右自动排序页面内所有元素，并旋转反向左边部分内的所有元素，生成树状全图形化用户界面；增加class样式属性和id标识属性至页面内所有元素对应的行列；当接收到树状全图形化用户界面的展示指令时，加载显示树状全图形化用户界面，并增加url网址属性至树状全图形化用户界面显示的每一对象；当接收到针对树状全图形化用户界面的点击指令时，获取点击指令对应的对象的url网址属性；根据url网址属性，查找对应的id标识属性，并在新页面中显示相应的信息。

在该技术方案中，通过基于bootstrap框架，将页面十二等分，页面按照5:2:5从左到右分为左边部分、中间部分和右边部分，有利于降低开发难度，通过基于页面规范标准代码，从左往右自动排序页面内所有元素，并旋转反向左边部分内的所有元素，生成树状全图形化用户界面，有利于树状全图形化用户界面的对称性，而且减少了代码编写量，进一步降低了开发难度，通过增加class样式属性和id标识属性至页面内所有元素对应的行列，有利于实现全图形化用户界面的展示，采用全图形化用户界面展示有利于用户一目了然地查看项目审查进度以及结果，而且降低了系统整体的操作难度，有利于减少用户的工作量，提升用户工作效率，通过当接收到树状全图形化用户界面的展示指令时，加载显示树状全图形化用户界面，并增加url网址属性至树状全图形化用户界面显示的每一对象，之后当接收到针对树状全图形化用户界面的点击指令时，获取点击指令对应的对象的url网址属性，并根据url网址属性，查找对应的id标识属性，并在新页面中显示相应的信息，在以树状全图形化用户界面展示的同时，也能够在接收到点击指令时，展示相应的详细信息，在保障了用户一目了然查看项目审核进度以及结果的同时，也能够在有需求时展示详细信息，保障了系统整体功能的实现。

需要说明的是，bootstrap框架是一种前端开发框架。

在上述技术方案中，优选地，根据url网址属性，查找对应的id标识属性，并在新页面中显示相应的信息，具体包括：将url网址属性赋到jQuery框架中，通过jQuery框架中的dialog.js框架，在当前树状全图形化用户界面中打开点击指令对应的对象的新页面；在点击指令对应的对象的新页面的打开过程中，根据url网址属性查找对应的id标识属性，并在新页面中显示相应的信息。

在该技术方案中，通过将url网址属性赋到jQuery框架中，通过jQuery框架中的dialog.js框架，在当前树状全图形化用户界面中打开点击指令对应的对象的新页面，之后在点击指令对应的对象的新页面的打开过程中，根据url网址属性查找对应的id标识属性，并在新页面中显示相应的信息，在保障了用户一目了然查看项目审核进度以及结果的同时，也能够在有需求时展示详细信息，保障了系统整体功能的实现。

需要说明的是，jQuery框架是一种快速、简洁的直译式脚本语言框架；dialog.js框架是jQuery框架中的一种。

在上述任一项技术方案中，优选地，还包括：基于jQuery框架，获取当前树状全图形化用户界面中所有元素的宽度参数和高度参数；基于jQuery框架，获取当前树状全图形化用户界面中每一元素内的文字大小数值；当接收到针对树状全图形化用户界面的缩放指令时，获取鼠标的位置信息和滚动幅度信息；根据鼠标的位置信息和滚动幅度信息，计算所有元素的目标宽度参数和目标高度参数，并更新当前树状全图形化用户界面中所有元素的宽度参数和高度参数为目标宽度参数和目标高度参数；根据目标宽度参数和目标高度参数，计算对应的元素内的目标文字大小数值，并更新当前树状全图形化用户界面中每一元素内的文字大小数值为对应的目标文字大小数值。

在该技术方案中，通过基于jQuery框架，获取当前树状全图形化用户界面中所有元素的宽度参数和高度参数，以及基于jQuery框架，获取当前树状全图形化用户界面中每一元素内的文字大小数值，有利于实现多元素的缩放，通过根据鼠标的位置信息和滚动幅度信息，计算所有元素的目标宽度参数和目标高度参数，并更新当前树状全图形化用户界面中所有元素的宽度参数和高度参数为目标宽度参数和目标高度参数，之后根据目标宽度参数和目标高度参数，计算对应的元素内的目标文字大小数值，并更新当前树状全图形化用户界面中每一元素内的文字大小数值为对应的目标文字大小数值，实现了多元素缩放，而且几乎不增加占用的系统整体以及服务器运行负荷，同时进一步有利于降低用户操作难度，提升界面展示的直观性。

在上述任一项技术方案中，优选地，还包括：当接收到设计单位端上传的待审核内容时，对应更改审查中心端相对应的元素的src图像文件路径属性，以渲染相对应的审查中心端的树状全图形化用户界面的对应元素的颜色。

在该技术方案中，通过当接收到设计单位端上传的待审核内容时，对应更改审查中心端相对应的元素的src图像文件路径属性，以渲染相对应的审查中心端的树状全图形化用户界面的对应元素的颜色，有利于用户通过颜色比较直观地了解到树状全图形化用户界面的对应元素的分类，进而有利于提升用户的工作效率。

在上述任一项技术方案中，优选地，还包括：接收审查中心端发送的审查结果信息；根据审查结果信息，对应更改设计单位端相对应的元素的src图像文件路径属性，以渲染相对应的设计单位端的树状全图形化用户界面的对应元素的颜色。

在该技术方案中，通过接收审查中心端发送的审查结果信息，之后根据审查结果信息，对应更改设计单位端相对应的元素的src图像文件路径属性，以渲染相对应的设计单位端的树状全图形化用户界面的对应元素的颜色，进一步有利于用户通过颜色比较直观地了解到树状全图形化用户界面的对应元素的分类，进而有利于提升用户的工作效率。

在上述任一项技术方案中，优选地，还包括：当某一个元素包含多个子元素时，监控各个子元素的src图像文件路径属性，当根据所述各个子元素的src图像文件路径属性，确定所述各个子元素对应项目均审查通过时，对应更改审查中心端相对应的父元素的src图像文件路径属性，以渲染相对应的所述审查中心端的所述树状全图形化用户界面的对应元素的颜色。

在该技术方案中，所述全图形化用户界面可以支持多层级的元素展示，对于复杂项目，往往可分解为多个层级的子项目执行，在传统的网页文本或表格显示方式下，用户难以把握各个项目及子项目之间的关系，使用本发明提供的全图形化用户界面，用户可以方便地从整体上了解到项目进度状态，在从整体上了解到项目审查状态之后，对于感兴趣的子元素对应的子项目，可以方便地点击并获取详细信息；并且，此种方式由于不需要加载完整的项目信息，对服务器造成的负载较低。特别是，对于分解层次越多的项目，该技术方案相比于现有技术达到的效果越好。此外，该技术方案中，通过监控各个子元素的src图像文件路径属性，当根据所述各个子元素的src图像文件路径属性，确定所述各个子元素对应项目均审查通过时，对应更改审查中心端相对应的父元素的src图像文件路径属性，以渲染相对应的所述审查中心端的所述树状全图形化用户界面的对应元素的颜色，实现了分解层次较多的项目的使用场景下，用户通过颜色比较直观地了解到树状全图形化用户界面的对应元素的分类，当子元素项目颜色全部一致地显示审查通过后，才启动父元素项目的审查工作，防止用户在子元素对应项目完成之前点击父元素，有利于提升用户的工作效率。

在上述任一项技术方案中，优选地，所述基于bootstrap框架，将页面十二等分，所述页面按照5:2:5从左到右分为左边部分、中间部分和右边部分之前，还包括步骤：向数据库发送获取项目人员信息的请求；接收数据库反馈的项目人员信息，其中包括人员名称、项目名称、人员与项目的关联关系，以及分别与人员、项目对应的用于提取详细信息的id标识属性；根据所述人员名称、项目名称、以及人员与项目的关联关系，生成对应的元素组，其中，任一元素组包括某一人员对应的元素、以及所述某一人员关联的项目对应的元素；以及，记录所述分别与人员、项目对应的用于提取详细信息的id标识属性。

在该技术方案中，提供了一种快捷的元素的生成方法，只需要从数据库提取少量信息，即可生成完整的全图形化显示界面，后续根据用户需要，再触发url对应窗口，展示用户所需详细信息；根据该技术方案，对服务器的资源消耗要小于传统的web显示界面，并且直观、简便。

本发明的第二方面的技术方案提出了一种全图形化用户界面展示装置，包括：等分单元，用于基于bootstrap框架，将页面十二等分，页面按照5:2:5从左到右分为左边部分、中间部分和右边部分；生成单元，基于页面规范标准代码，从左往右自动排序页面内所有元素，并旋转反向左边部分内的所有元素，生成树状全图形化用户界面；增加单元，增加class样式属性和id标识属性至页面内所有元素对应的行列；加载单元，用于当接收到树状全图形化用户界面的展示指令时，加载显示树状全图形化用户界面，并增加url网址属性至树状全图形化用户界面显示的每一对象；获取单元，用于当接收到针对树状全图形化用户界面的点击指令时，获取点击指令对应的对象的url网址属性；显示单元，用于根据url网址属性，查找对应的id标识属性，并在新页面中显示相应的信息。

在该技术方案中，通过基于bootstrap框架，将页面十二等分，页面按照5:2:5从左到右分为左边部分、中间部分和右边部分，有利于降低开发难度，通过基于页面规范标准代码，从左往右自动排序页面内所有元素，并旋转反向左边部分内的所有元素，生成树状全图形化用户界面，有利于树状全图形化用户界面的对称性，而且减少了代码编写量，进一步降低了开发难度，通过增加class样式属性和id标识属性至页面内所有元素对应的行列，有利于实现全图形化用户界面的展示，采用全图形化用户界面展示有利于用户一目了然地查看项目审查进度以及结果，而且降低了系统整体的操作难度，有利于减少用户的工作量，提升用户工作效率，通过当接收到树状全图形化用户界面的展示指令时，加载显示树状全图形化用户界面，并增加url网址属性至树状全图形化用户界面显示的每一对象，之后当接收到针对树状全图形化用户界面的点击指令时，获取点击指令对应的对象的url网址属性，并根据url网址属性，查找对应的id标识属性，并在新页面中显示相应的信息，在以树状全图形化用户界面展示的同时，也能够在接收到点击指令时，展示相应的详细信息，在保障了用户一目了然查看项目审核进度以及结果的同时，也能够在有需求时展示详细信息，保障了系统整体功能的实现。

需要说明的是，bootstrap框架是一种前端开发框架。

在上述技术方案中，优选地，获取单元还用于：将url网址属性赋到jQuery框架中，通过jQuery框架中的dialog.js框架，在当前树状全图形化用户界面中打开点击指令对应的对象的新页面；显示单元还用于：在点击指令对应的对象的新页面的打开过程中，根据url网址属性查找对应的id标识属性，并在新页面中显示相应的信息。

在该技术方案中，通过将url网址属性赋到jQuery框架中，通过jQuery框架中的dialog.js框架，在当前树状全图形化用户界面中打开点击指令对应的对象的新页面，之后在点击指令对应的对象的新页面的打开过程中，根据url网址属性查找对应的id标识属性，并在新页面中显示相应的信息，在保障了用户一目了然查看项目审核进度以及结果的同时，也能够在有需求时展示详细信息，保障了系统整体功能的实现。

需要说明的是，jQuery框架是一种快速、简洁的直译式脚本语言框架；dialog.js框架是jQuery框架中的一种。

在上述任一项技术方案中，优选地，获取单元还用于：基于jQuery框架，获取当前树状全图形化用户界面中所有元素的宽度参数和高度参数；获取单元还用于：基于jQuery框架，获取当前树状全图形化用户界面中每一元素内的文字大小数值；获取单元还用于：当接收到针对树状全图形化用户界面的缩放指令时，获取鼠标的位置信息和滚动幅度信息；更新单元，用于根据鼠标的位置信息和滚动幅度信息，计算所有元素的目标宽度参数和目标高度参数，并更新当前树状全图形化用户界面中所有元素的宽度参数和高度参数为目标宽度参数和目标高度参数；更新单元还用于：根据目标宽度参数和目标高度参数，计算对应的元素内的目标文字大小数值，并更新当前树状全图形化用户界面中每一元素内的文字大小数值为对应的目标文字大小数值。

在该技术方案中，通过基于jQuery框架，获取当前树状全图形化用户界面中所有元素的宽度参数和高度参数，以及基于jQuery框架，获取当前树状全图形化用户界面中每一元素内的文字大小数值，有利于实现多元素的缩放，通过根据鼠标的位置信息和滚动幅度信息，计算所有元素的目标宽度参数和目标高度参数，并更新当前树状全图形化用户界面中所有元素的宽度参数和高度参数为目标宽度参数和目标高度参数，之后根据目标宽度参数和目标高度参数，计算对应的元素内的目标文字大小数值，并更新当前树状全图形化用户界面中每一元素内的文字大小数值为对应的目标文字大小数值，实现了多元素缩放，而且几乎不增加占用的系统整体以及服务器运行负荷，同时进一步有利于降低用户操作难度，提升界面展示的直观性。

在上述任一项技术方案中，优选地，还包括：更改单元，用于当接收到设计单位端上传的待审核内容时，对应更改审查中心端相对应的元素的src图像文件路径属性，以渲染相对应的审查中心端的树状全图形化用户界面的对应元素的颜色。

在该技术方案中，通过当接收到设计单位端上传的待审核内容时，对应更改审查中心端相对应的元素的src图像文件路径属性，以渲染相对应的审查中心端的树状全图形化用户界面的对应元素的颜色，有利于用户通过颜色比较直观地了解到树状全图形化用户界面的对应元素的分类，进而有利于提升用户的工作效率。

在上述任一项技术方案中，优选地，还包括：接收单元，用于接收审查中心端发送的审查结果信息；更改单元还用于：根据审查结果信息，对应更改设计单位端相对应的元素的src图像文件路径属性，以渲染相对应的设计单位端的树状全图形化用户界面的对应元素的颜色。

在该技术方案中，通过接收审查中心端发送的审查结果信息，之后根据审查结果信息，对应更改设计单位端相对应的元素的src图像文件路径属性，以渲染相对应的设计单位端的树状全图形化用户界面的对应元素的颜色，进一步有利于用户通过颜色比较直观地了解到树状全图形化用户界面的对应元素的分类，进而有利于提升用户的工作效率。

在上述任一项技术方案中，优选地，还包括：监控单元，用于当某一个元素包含多个子元素时，监控各个子元素的src图像文件路径属性，当根据所述各个子元素的src图像文件路径属性，确定所述各个子元素对应项目均审查通过时，对应更改审查中心端相对应的父元素的src图像文件路径属性，以渲染相对应的所述审查中心端的所述树状全图形化用户界面的对应元素的颜色。

在该技术方案中，所述全图形化用户界面可以支持多层级的元素展示，对于复杂项目，往往可分解为多个层级的子项目执行，在传统的网页文本或表格显示方式下，用户难以把握各个项目及子项目之间的关系，使用本发明提供的全图形化用户界面，用户可以方便地从整体上了解到项目进度状态，在从整体上了解到项目审查状态之后，对于感兴趣的子元素对应的子项目，可以方便地点击并获取详细信息；并且，此种方式由于不需要加载完整的项目信息，对服务器造成的负载较低。特别是，对于分解层次越多的项目，该技术方案相比于现有技术达到的效果越好。此外，该技术方案中，通过监控各个子元素的src图像文件路径属性，当根据所述各个子元素的src图像文件路径属性，确定所述各个子元素对应项目均审查通过时，对应更改审查中心端相对应的父元素的src图像文件路径属性，以渲染相对应的所述审查中心端的所述树状全图形化用户界面的对应元素的颜色，实现了分解层次较多的项目的使用场景下，用户通过颜色比较直观地了解到树状全图形化用户界面的对应元素的分类，当子元素项目颜色全部一致地显示审查通过后，才启动父元素项目的审查工作，防止用户在子元素对应项目完成之前点击父元素，有利于提升用户的工作效率。

在上述任一项技术方案中，优选地，还包括：元素生成单元，用于向数据库发送获取项目人员信息的请求；接收数据库反馈的项目人员信息，其中包括人员名称、项目名称、人员与项目的关联关系，以及分别与人员、项目对应的用于提取详细信息的id标识属性；根据所述人员名称、项目名称、以及人员与项目的关联关系，生成对应的元素组，其中，任一元素组包括某一人员对应的元素、以及所述某一人员关联的项目对应的元素；以及，记录所述分别与人员、项目对应的用于提取详细信息的id标识属性。

在该技术方案中，提供了一种快捷的元素的生成方法，只需要从数据库提取少量信息，即可生成完整的全图形化显示界面，后续根据用户需要，再触发url对应窗口，展示用户所需详细信息；根据该技术方案，对服务器的资源消耗要小于传统的web显示界面，并且直观、简便。

本发明的第三方面的技术方案提出了一种计算机设备，计算机设备包括处理器，处理器用于执行存储器中存储的计算机程序时实现如上述本发明的第一方面的技术方案提出的任一项的全图形化用户界面展示方法的步骤。

在该技术方案中，计算机设备包括处理器，处理器用于执行存储器中存储的计算机程序时实现如上述本发明的第一方面的技术方案提出的任一项的全图形化用户界面展示方法的步骤，因此具有上述本发明的第一方面的技术方案提出的任一项的全图形化用户界面展示方法的全部有益效果，在此不再赘述。

本发明的第四方面的技术方案提出了一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现本发明的第一方面的技术方案提出的任一项的全图形化用户界面展示方法的步骤。

在该技术方案中，计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现本发明的第一方面的技术方案提出的任一项的全图形化用户界面展示方法的步骤，因此具有上述本发明的第一方面的技术方案提出的任一项的全图形化用户界面展示方法的全部有益效果，在此不再赘述。

通过以上技术方案，基于bootstrap框架，生成树状全图形化用户界面，采用全图形化用户界面展示有利于用户一目了然地查看项目审查进度以及结果，而且降低了系统整体的操作难度，有利于减少用户的工作量，提升用户工作效率，而且在几乎不增加占用的系统整体以及服务器运行负荷的情况下，实现了多元素缩放。

本发明的附加方面和优点将在下面的描述部分中给出，部分将从下面的描述中变得明显，或通过本发明的实践了解到。

附图说明

本发明的上述和/或附加的方面和优点从结合下面附图对实施例的描述中将变得明显和容易理解，其中：

图1示出了根据本发明的一个实施例的全图形化用户界面展示方法的示意流程图；

图2示出了根据本发明的一个实施例的全图形化用户界面展示装置的示意框图；

图3示出了根据本发明的一个实施例的全图形化用户界面的示意图；

图4示出了根据本发明的一个实施例的全图形化用户界面的示意图。

具体实施方式

为了能够更清楚地理解本发明的上述目的、特征和优点，下面结合附图和具体实施方式对本发明进行进一步的详细描述。需要说明的是，在不冲突的情况下，本申请的实施例及实施例中的特征可以相互组合。

在下面的描述中阐述了很多具体细节以便于充分理解本发明，但是，本发明还可以采用其他不同于在此描述的其他方式来实施，因此，本发明的保护范围并不受下面公开的具体实施例的限制。

如图1所示，根据本发明的实施例的全图形化用户界面展示方法，包括：

S102，基于bootstrap框架，将页面十二等分，页面按照5:2:5从左到右分为左边部分、中间部分和右边部分；

S104，基于页面规范标准代码，从左往右自动排序页面内所有元素，并旋转反向左边部分内的所有元素，生成树状全图形化用户界面；

S106，增加class样式属性和id标识属性至页面内所有元素对应的行列；

S108，当接收到树状全图形化用户界面的展示指令时，加载显示树状全图形化用户界面，并增加url网址属性至树状全图形化用户界面显示的每一对象；

S110，当接收到针对树状全图形化用户界面的点击指令时，获取点击指令对应的对象的url网址属性；

S112，根据url网址属性，查找对应的id标识属性，并在新页面中显示相应的信息。

在该实施例中，通过基于bootstrap框架，将页面十二等分，页面按照5:2:5从左到右分为左边部分、中间部分和右边部分，有利于降低开发难度，通过基于页面规范标准代码，从左往右自动排序页面内所有元素，并旋转反向左边部分内的所有元素，生成树状全图形化用户界面，有利于树状全图形化用户界面的对称性，而且减少了代码编写量，进一步降低了开发难度，通过增加class样式属性和id标识属性至页面内所有元素对应的行列，有利于实现全图形化用户界面的展示，具体如图3所示，采用全图形化用户界面展示有利于用户一目了然地查看项目审查进度以及结果，而且降低了系统整体的操作难度，有利于减少用户的工作量，提升用户工作效率，通过当接收到树状全图形化用户界面的展示指令时，加载显示树状全图形化用户界面，并增加url网址属性至树状全图形化用户界面显示的每一对象，之后当接收到针对树状全图形化用户界面的点击指令时，获取点击指令对应的对象的url网址属性，并根据url网址属性，查找对应的id标识属性，并在新页面中显示相应的信息，具体如图4所示，在以树状全图形化用户界面展示的同时，也能够在接收到点击指令时，展示相应的详细信息，在保障了用户一目了然查看项目审核进度以及结果的同时，也能够在有需求时展示详细信息，保障了系统整体功能的实现。

需要说明的是，bootstrap框架是一种前端开发框架。

在上述实施例中，优选地，根据url网址属性，查找对应的id标识属性，并在新页面中显示相应的信息，具体包括：将url网址属性赋到jQuery框架中，通过jQuery框架中的dialog.js框架，在当前树状全图形化用户界面中打开点击指令对应的对象的新页面；在点击指令对应的对象的新页面的打开过程中，根据url网址属性查找对应的id标识属性，并在新页面中显示相应的信息。

在该实施例中，通过将url网址属性赋到jQuery框架中，通过jQuery框架中的dialog.js框架，在当前树状全图形化用户界面中打开点击指令对应的对象的新页面，之后在点击指令对应的对象的新页面的打开过程中，根据url网址属性查找对应的id标识属性，并在新页面中显示相应的信息，在保障了用户一目了然查看项目审核进度以及结果的同时，也能够在有需求时展示详细信息，保障了系统整体功能的实现。

需要说明的是，jQuery框架是一种快速、简洁的直译式脚本语言框架；dialog.js框架是jQuery框架中的一种。

在上述任一项实施例中，优选地，还包括：基于jQuery框架，获取当前树状全图形化用户界面中所有元素的宽度参数和高度参数；基于jQuery框架，获取当前树状全图形化用户界面中每一元素内的文字大小数值；当接收到针对树状全图形化用户界面的缩放指令时，获取鼠标的位置信息和滚动幅度信息；根据鼠标的位置信息和滚动幅度信息，计算所有元素的目标宽度参数和目标高度参数，并更新当前树状全图形化用户界面中所有元素的宽度参数和高度参数为目标宽度参数和目标高度参数；根据目标宽度参数和目标高度参数，计算对应的元素内的目标文字大小数值，并更新当前树状全图形化用户界面中每一元素内的文字大小数值为对应的目标文字大小数值。

在该实施例中，通过基于jQuery框架，获取当前树状全图形化用户界面中所有元素的宽度参数和高度参数，以及基于jQuery框架，获取当前树状全图形化用户界面中每一元素内的文字大小数值，有利于实现多元素的缩放，通过根据鼠标的位置信息和滚动幅度信息，计算所有元素的目标宽度参数和目标高度参数，并更新当前树状全图形化用户界面中所有元素的宽度参数和高度参数为目标宽度参数和目标高度参数，之后根据目标宽度参数和目标高度参数，计算对应的元素内的目标文字大小数值，并更新当前树状全图形化用户界面中每一元素内的文字大小数值为对应的目标文字大小数值，实现了多元素缩放，而且几乎不增加占用的系统整体以及服务器运行负荷，同时进一步有利于降低用户操作难度，提升界面展示的直观性。

在上述任一项实施例中，优选地，还包括：当接收到设计单位端上传的待审核内容时，对应更改审查中心端相对应的元素的src图像文件路径属性，以渲染相对应的审查中心端的树状全图形化用户界面的对应元素的颜色。

在该实施例中，通过当接收到设计单位端上传的待审核内容时，对应更改审查中心端相对应的元素的src图像文件路径属性，以渲染相对应的审查中心端的树状全图形化用户界面的对应元素的颜色，有利于用户通过颜色比较直观地了解到树状全图形化用户界面的对应元素的分类，进而有利于提升用户的工作效率。

具体地，比如以蓝色背景图像代表可操作颜色，以灰色背景图像代表不可操作颜色，当接收到设计单位端上传的待审核内容，则在审查中心端对应显示蓝色背景图像，用户可以点开查看相关内容。

在上述任一项实施例中，优选地，还包括：接收审查中心端发送的审查结果信息；根据审查结果信息，对应更改设计单位端相对应的元素的src图像文件路径属性，以渲染相对应的设计单位端的树状全图形化用户界面的对应元素的颜色。

在该实施例中，通过接收审查中心端发送的审查结果信息，之后根据审查结果信息，对应更改设计单位端相对应的元素的src图像文件路径属性，以渲染相对应的设计单位端的树状全图形化用户界面的对应元素的颜色，进一步有利于用户通过颜色比较直观地了解到树状全图形化用户界面的对应元素的分类，进而有利于提升用户的工作效率。

具体地，比如以红色背景图像代表审核未通过，以绿色背景图像代表审核通过，当审查结果信息是通过时，则在设计单位端对应显示红色背景图像，用户可以进行修改等操作，当审查结果信息是未通过时，则在设计单位端对应显示绿色背景图像，用户可以明了为审查通过，进行下一步操作。

在上述任一项实施例中，优选地，还包括：当某一个元素包含多个子元素时，监控各个子元素的src图像文件路径属性，当根据所述各个子元素的src图像文件路径属性，确定所述各个子元素对应项目均审查通过时，对应更改审查中心端相对应的父元素的src图像文件路径属性，以渲染相对应的所述审查中心端的所述树状全图形化用户界面的对应元素的颜色。

在该实施例中，所述全图形化用户界面可以支持多层级的元素展示，对于复杂项目，往往可分解为多个层级的子项目执行，在传统的网页文本或表格显示方式下，用户难以把握各个项目及子项目之间的关系，使用本发明提供的全图形化用户界面，用户可以方便地从整体上了解到项目进度状态，在从整体上了解到项目审查状态之后，对于感兴趣的子元素对应的子项目，可以方便地点击并获取详细信息；并且，此种方式由于不需要加载完整的项目信息，对服务器造成的负载较低。特别是，对于分解层次越多的项目，该实施例相比于现有技术达到的效果越好。此外，该实施例中，通过监控各个子元素的src图像文件路径属性，当根据所述各个子元素的src图像文件路径属性，确定所述各个子元素对应项目均审查通过时，对应更改审查中心端相对应的父元素的src图像文件路径属性，以渲染相对应的所述审查中心端的所述树状全图形化用户界面的对应元素的颜色，实现了分解层次较多的项目的使用场景下，用户通过颜色比较直观地了解到树状全图形化用户界面的对应元素的分类，当子元素项目颜色全部一致地显示审查通过后，才启动父元素项目的审查工作，防止用户在子元素对应项目完成之前点击父元素，有利于提升用户的工作效率。

在上述任一项实施例中，优选地，所述基于bootstrap框架，将页面十二等分，所述页面按照5:2:5从左到右分为左边部分、中间部分和右边部分之前，还包括步骤：向数据库发送获取项目人员信息的请求；接收数据库反馈的项目人员信息，其中包括人员名称、项目名称、人员与项目的关联关系，以及分别与人员、项目对应的用于提取详细信息的id标识属性；根据所述人员名称、项目名称、以及人员与项目的关联关系，生成对应的元素组，其中，任一元素组包括某一人员对应的元素、以及所述某一人员关联的项目对应的元素；以及，记录所述分别与人员、项目对应的用于提取详细信息的id标识属性。

在该实施例中，提供了一种快捷的元素的生成方法，只需要从数据库提取少量信息，即可生成完整的全图形化显示界面，后续根据用户需要，再触发url对应窗口，展示用户所需详细信息；根据该实施例，对服务器的资源消耗要小于传统的web显示界面，并且直观、简便。

如图2所示，根据本发明的实施例的全图形化用户界面展示装置200，包括：等分单元202，用于基于bootstrap框架，将页面十二等分，页面按照5:2:5从左到右分为左边部分、中间部分和右边部分；生成单元204，基于页面规范标准代码，从左往右自动排序页面内所有元素，并旋转反向左边部分内的所有元素，生成树状全图形化用户界面；增加单元206，增加class样式属性和id标识属性至页面内所有元素对应的行列；加载单元208，用于当接收到树状全图形化用户界面的展示指令时，加载显示树状全图形化用户界面，并增加url网址属性至树状全图形化用户界面显示的每一对象；获取单元210，用于当接收到针对树状全图形化用户界面的点击指令时，获取点击指令对应的对象的url网址属性；显示单元212，用于根据url网址属性，查找对应的id标识属性，并在新页面中显示相应的信息。

在该实施例中，通过基于bootstrap框架，将页面十二等分，页面按照5:2:5从左到右分为左边部分、中间部分和右边部分，有利于降低开发难度，通过基于页面规范标准代码，从左往右自动排序页面内所有元素，并旋转反向左边部分内的所有元素，生成树状全图形化用户界面，有利于树状全图形化用户界面的对称性，而且减少了代码编写量，进一步降低了开发难度，通过增加class样式属性和id标识属性至页面内所有元素对应的行列，有利于实现全图形化用户界面的展示，具体如图3所示，采用全图形化用户界面展示有利于用户一目了然地查看项目审查进度以及结果，而且降低了系统整体的操作难度，有利于减少用户的工作量，提升用户工作效率，通过当接收到树状全图形化用户界面的展示指令时，加载显示树状全图形化用户界面，并增加url网址属性至树状全图形化用户界面显示的每一对象，之后当接收到针对树状全图形化用户界面的点击指令时，获取点击指令对应的对象的url网址属性，并根据url网址属性，查找对应的id标识属性，并在新页面中显示相应的信息，具体如图4所示，在以树状全图形化用户界面展示的同时，也能够在接收到点击指令时，展示相应的详细信息，在保障了用户一目了然查看项目审核进度以及结果的同时，也能够在有需求时展示详细信息，保障了系统整体功能的实现。

需要说明的是，bootstrap框架是一种前端开发框架。

在上述实施例中，优选地，获取单元210还用于：将url网址属性赋到jQuery框架中，通过jQuery框架中的dialog.js框架，在当前树状全图形化用户界面中打开点击指令对应的对象的新页面；显示单元212还用于：在点击指令对应的对象的新页面的打开过程中，根据url网址属性查找对应的id标识属性，并在新页面中显示相应的信息。

在该实施例中，通过将url网址属性赋到jQuery框架中，通过jQuery框架中的dialog.js框架，在当前树状全图形化用户界面中打开点击指令对应的对象的新页面，之后在点击指令对应的对象的新页面的打开过程中，根据url网址属性查找对应的id标识属性，并在新页面中显示相应的信息，在保障了用户一目了然查看项目审核进度以及结果的同时，也能够在有需求时展示详细信息，保障了系统整体功能的实现。

需要说明的是，jQuery框架是一种快速、简洁的直译式脚本语言框架；dialog.js框架是jQuery框架中的一种。

在上述任一项实施例中，优选地，获取单元210还用于：基于jQuery框架，获取当前树状全图形化用户界面中所有元素的宽度参数和高度参数；获取单元210还用于：基于jQuery框架，获取当前树状全图形化用户界面中每一元素内的文字大小数值；获取单元210还用于：当接收到针对树状全图形化用户界面的缩放指令时，获取鼠标的位置信息和滚动幅度信息；更新单元214，用于根据鼠标的位置信息和滚动幅度信息，计算所有元素的目标宽度参数和目标高度参数，并更新当前树状全图形化用户界面中所有元素的宽度参数和高度参数为目标宽度参数和目标高度参数；更新单元214还用于：根据目标宽度参数和目标高度参数，计算对应的元素内的目标文字大小数值，并更新当前树状全图形化用户界面中每一元素内的文字大小数值为对应的目标文字大小数值。

在该实施例中，通过基于jQuery框架，获取当前树状全图形化用户界面中所有元素的宽度参数和高度参数，以及基于jQuery框架，获取当前树状全图形化用户界面中每一元素内的文字大小数值，有利于实现多元素的缩放，通过根据鼠标的位置信息和滚动幅度信息，计算所有元素的目标宽度参数和目标高度参数，并更新当前树状全图形化用户界面中所有元素的宽度参数和高度参数为目标宽度参数和目标高度参数，之后根据目标宽度参数和目标高度参数，计算对应的元素内的目标文字大小数值，并更新当前树状全图形化用户界面中每一元素内的文字大小数值为对应的目标文字大小数值，实现了多元素缩放，而且几乎不增加占用的系统整体以及服务器运行负荷，同时进一步有利于降低用户操作难度，提升界面展示的直观性。

在上述任一项实施例中，优选地，还包括：更改单元216，用于当接收到设计单位端上传的待审核内容时，对应更改审查中心端相对应的元素的src图像文件路径属性，以渲染相对应的审查中心端的树状全图形化用户界面的对应元素的颜色。

在该实施例中，通过当接收到设计单位端上传的待审核内容时，对应更改审查中心端相对应的元素的src图像文件路径属性，以渲染相对应的审查中心端的树状全图形化用户界面的对应元素的颜色，有利于用户通过颜色比较直观地了解到树状全图形化用户界面的对应元素的分类，进而有利于提升用户的工作效率。

具体地，比如以蓝色背景图像代表可操作颜色，以灰色背景图像代表不可操作颜色，当接收到设计单位端上传的待审核内容，则在审查中心端对应显示蓝色背景图像，用户可以点开查看相关内容。

在上述任一项实施例中，优选地，还包括：接收单元218，用于接收审查中心端发送的审查结果信息；更改单元216还用于：根据审查结果信息，对应更改设计单位端相对应的元素的src图像文件路径属性，以渲染相对应的设计单位端的树状全图形化用户界面的对应元素的颜色。

在该实施例中，通过接收审查中心端发送的审查结果信息，之后根据审查结果信息，对应更改设计单位端相对应的元素的src图像文件路径属性，以渲染相对应的设计单位端的树状全图形化用户界面的对应元素的颜色，进一步有利于用户通过颜色比较直观地了解到树状全图形化用户界面的对应元素的分类，进而有利于提升用户的工作效率。

具体地，比如以红色背景图像代表审核未通过，以绿色背景图像代表审核通过，当审查结果信息是通过时，则在设计单位端对应显示红色背景图像，用户可以进行修改等操作，当审查结果信息是未通过时，则在设计单位端对应显示绿色背景图像，用户可以明了为审查通过，进行下一步操作。

在上述任一项实施例中，优选地，还包括：监控单元220，用于当某一个元素包含多个子元素时，监控各个子元素的src图像文件路径属性，当根据所述各个子元素的src图像文件路径属性，确定所述各个子元素对应项目均审查通过时，对应更改审查中心端相对应的父元素的src图像文件路径属性，以渲染相对应的所述审查中心端的所述树状全图形化用户界面的对应元素的颜色。

在该实施例中，所述全图形化用户界面可以支持多层级的元素展示，对于复杂项目，往往可分解为多个层级的子项目执行，在传统的网页文本或表格显示方式下，用户难以把握各个项目及子项目之间的关系，使用本发明提供的全图形化用户界面，用户可以方便地从整体上了解到项目进度状态，在从整体上了解到项目审查状态之后，对于感兴趣的子元素对应的子项目，可以方便地点击并获取详细信息；并且，此种方式由于不需要加载完整的项目信息，对服务器造成的负载较低。特别是，对于分解层次越多的项目，该实施例相比于现有技术达到的效果越好。此外，该实施例中，通过监控各个子元素的src图像文件路径属性，当根据所述各个子元素的src图像文件路径属性，确定所述各个子元素对应项目均审查通过时，对应更改审查中心端相对应的父元素的src图像文件路径属性，以渲染相对应的所述审查中心端的所述树状全图形化用户界面的对应元素的颜色，实现了分解层次较多的项目的使用场景下，用户通过颜色比较直观地了解到树状全图形化用户界面的对应元素的分类，当子元素项目颜色全部一致地显示审查通过后，才启动父元素项目的审查工作，防止用户在子元素对应项目完成之前点击父元素，有利于提升用户的工作效率。

在上述任一项实施例中，优选地，还包括：元素生成单元222，用于向数据库发送获取项目人员信息的请求；接收数据库反馈的项目人员信息，其中包括人员名称、项目名称、人员与项目的关联关系，以及分别与人员、项目对应的用于提取详细信息的id标识属性；根据所述人员名称、项目名称、以及人员与项目的关联关系，生成对应的元素组，其中，任一元素组包括某一人员对应的元素、以及所述某一人员关联的项目对应的元素；以及，记录所述分别与人员、项目对应的用于提取详细信息的id标识属性。

在该实施例中，提供了一种快捷的元素的生成方法，只需要从数据库提取少量信息，即可生成完整的全图形化显示界面，后续根据用户需要，再触发url对应窗口，展示用户所需详细信息；根据该实施例，对服务器的资源消耗要小于传统的web显示界面，并且直观、简便。

根据本发明的实施例的计算机设备，计算机设备包括处理器，处理器用于执行存储器中存储的计算机程序时实现如上述本发明的实施例提出的任一项的全图形化用户界面展示方法的步骤。

在该实施例中，计算机设备包括处理器，处理器用于执行存储器中存储的计算机程序时实现如上述本发明的实施例提出的任一项的全图形化用户界面展示方法的步骤，因此具有上述本发明的实施例提出的任一项的全图形化用户界面展示方法的全部有益效果，在此不再赘述。

根据本发明的实施例的计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现本发明的实施例提出的任一项的全图形化用户界面展示方法的步骤。

在该实施例中，计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现本发明的实施例提出的任一项的全图形化用户界面展示方法的步骤，因此具有上述本发明的实施例提出的任一项的全图形化用户界面展示方法的全部有益效果，在此不再赘述。

以上结合附图详细说明了本发明的技术方案，本发明提出了一种全图形化用户界面展示方法和一种全图形化用户界面展示装置，通过基于bootstrap框架，生成树状全图形化用户界面，采用全图形化用户界面展示有利于用户一目了然地查看项目审查进度以及结果，而且降低了系统整体的操作难度，有利于减少用户的工作量，提升用户工作效率，而且在几乎不增加占用的系统整体以及服务器运行负荷的情况下，实现了多元素缩放。

本发明方法中的步骤可根据实际需要进行顺序调整、合并和删减。

本发明装置中的单元可根据实际需要进行合并、划分和删减。

本领域普通技术人员可以理解上述实施例的各种方法中的全部或部分步骤是可以通过程序来指令相关的硬件来完成，该程序可以存储于一计算机可读存储介质中，存储介质包括只读存储器(Read-Only Memory，ROM)、随机存储器(Random Access Memory，RAM)、可编程只读存储器(Programmable Read-only Memory，PROM)、可擦除可编程只读存储器(Erasable Programmable Read Only Memory，EPROM)、一次可编程只读存储器(One-time Programmable Read-Only Memory，OTPROM)、电子抹除式可复写只读存储器(Electrically-Erasable Programmable Read-Only Memory，EEPROM)、只读光盘(CompactDisc Read-Only Memory，CD-ROM)或其他光盘存储器、磁盘存储器、磁带存储器、或者能够用于携带或存储数据的计算机可读的任何其他介质。

以上所述仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (10)

1.一种全图形化用户界面展示方法，其特征在于，包括：

基于bootstrap框架，将页面十二等分，所述页面按照5:2:5从左到右分为左边部分、中间部分和右边部分；

基于页面规范标准代码，从左往右自动排序所述页面内所有元素，并旋转所述左边部分内的所有元素使其反向，生成树状全图形化用户界面；

增加class样式属性和id标识属性至所述页面内所有元素对应的行列；

当接收到所述树状全图形化用户界面的展示指令时，加载显示所述树状全图形化用户界面，并增加url网址属性至所述树状全图形化用户界面显示的每一对象；

当接收到针对所述树状全图形化用户界面的点击指令时，获取所述点击指令对应的对象的url网址属性；

根据所述url网址属性，查找对应的id标识属性，并在新页面中显示相应的信息。

2.根据权利要求1所述的全图形化用户界面展示方法，其特征在于，所述根据所述url网址属性，查找对应的id标识属性，并在新页面中显示相应的信息，具体包括：

将所述url网址属性赋到jQuery框架中，通过所述jQuery框架中的dialog.js框架，在当前所述树状全图形化用户界面中打开所述点击指令对应的对象的所述新页面；

在所述点击指令对应的对象的所述新页面的打开过程中，根据所述url网址属性查找对应的id标识属性，并在所述新页面中显示相应的信息。

3.根据权利要求2所述的全图形化用户界面展示方法，其特征在于，还包括：

基于所述jQuery框架，获取当前所述树状全图形化用户界面中所有元素的宽度参数和高度参数；

基于所述jQuery框架，获取当前所述树状全图形化用户界面中每一元素内的文字大小数值；

当接收到针对所述树状全图形化用户界面的缩放指令时，获取鼠标的位置信息和滚动幅度信息；

根据所述鼠标的位置信息和滚动幅度信息，计算所有元素的目标宽度参数和目标高度参数，并更新当前所述树状全图形化用户界面中所有元素的宽度参数和高度参数为所述目标宽度参数和所述目标高度参数；

根据所述目标宽度参数和所述目标高度参数，计算对应的元素内的目标文字大小数值，并更新当前所述树状全图形化用户界面中每一元素内的文字大小数值为对应的所述目标文字大小数值。

4.根据权利要求3所述的全图形化用户界面展示方法，其特征在于，还包括：

当接收到设计单位端上传的待审核内容时，对应更改审查中心端相对应的元素的src图像文件路径属性，以渲染相对应的所述审查中心端的所述树状全图形化用户界面的对应元素的颜色。

5.根据权利要求4所述的全图形化用户界面展示方法，其特征在于，还包括：

接收所述审查中心端发送的审查结果信息；

根据所述审查结果信息，对应更改所述设计单位端相对应的元素的src图像文件路径属性，以渲染相对应的所述设计单位端的所述树状全图形化用户界面的对应元素的颜色。

6.根据权利要求4所述的全图形化用户界面展示方法，其特征在于，还包括：

当某一个元素包含多个子元素时，监控各个子元素的src图像文件路径属性，当根据所述各个子元素的src图像文件路径属性，确定所述各个子元素对应项目均审查通过时，对应更改审查中心端相对应的父元素的src图像文件路径属性，以渲染相对应的所述审查中心端的所述树状全图形化用户界面的对应元素的颜色。

7.根据权利要求1至6中任一项所述的全图形化用户界面展示方法，其特征在于，所述基于bootstrap框架，将页面十二等分，所述页面按照5:2:5从左到右分为左边部分、中间部分和右边部分之前，还包括步骤：

向数据库发送获取项目人员信息的请求；

接收数据库反馈的项目人员信息，其中包括人员名称、项目名称、人员与项目的关联关系，以及分别与人员、项目对应的用于提取详细信息的id标识属性；

根据所述人员名称、项目名称、以及人员与项目的关联关系，生成对应的元素组，其中，任一元素组包括某一人员对应的元素、以及所述某一人员关联的项目对应的元素；以及，记录所述分别与人员、项目对应的用于提取详细信息的id标识属性。

8.一种全图形化用户界面展示装置，其特征在于，包括：

等分单元，用于基于bootstrap框架，将页面十二等分，所述页面按照5:2:5从左到右分为左边部分、中间部分和右边部分；

生成单元，基于页面规范标准代码，从左往右自动排序所述页面内所有元素，并旋转所述左边部分内的所有元素使其反向，生成树状全图形化用户界面；

增加单元，增加class样式属性和id标识属性至所述页面内所有元素对应的行列；

加载单元，用于当接收到所述树状全图形化用户界面的展示指令时，加载显示所述树状全图形化用户界面，并增加url网址属性至所述树状全图形化用户界面显示的每一对象；

获取单元，用于当接收到针对所述树状全图形化用户界面的点击指令时，获取所述点击指令对应的对象的url网址属性；

显示单元，用于根据所述url网址属性，查找对应的id标识属性，并在新页面中显示相应的信息。

9.根据权利要求8所述的全图形化用户界面展示装置，其特征在于，

所述获取单元还用于：将所述url网址属性赋到jQuery框架中，通过所述jQuery框架中的dialog.js框架，在当前所述树状全图形化用户界面中打开所述点击指令对应的对象的所述新页面；

所述显示单元还用于：在所述点击指令对应的对象的所述新页面的打开过程中，根据所述url网址属性查找对应的id标识属性，并在所述新页面中显示相应的信息。

10.根据权利要求9所述的全图形化用户界面展示装置，其特征在于，

所述获取单元还用于：基于所述jQuery框架，获取当前所述树状全图形化用户界面中所有元素的宽度参数和高度参数；

所述获取单元还用于：基于所述jQuery框架，获取当前所述树状全图形化用户界面中每一元素内的文字大小数值；

所述获取单元还用于：当接收到针对所述树状全图形化用户界面的缩放指令时，获取鼠标的位置信息和滚动幅度信息；

更新单元，用于根据所述鼠标的位置信息和滚动幅度信息，计算所有元素的目标宽度参数和目标高度参数，并更新当前所述树状全图形化用户界面中所有元素的宽度参数和高度参数为所述目标宽度参数和所述目标高度参数；

所述更新单元还用于：根据所述目标宽度参数和所述目标高度参数，计算对应的元素内的目标文字大小数值，并更新当前所述树状全图形化用户界面中每一元素内的文字大小数值为对应的所述目标文字大小数值。