CN111369641A - 一种基于Vue.js框架的污水处理工艺图组态方法 - Google Patents
一种基于Vue.js框架的污水处理工艺图组态方法 Download PDFInfo
- Publication number
- CN111369641A CN111369641A CN202010143799.5A CN202010143799A CN111369641A CN 111369641 A CN111369641 A CN 111369641A CN 202010143799 A CN202010143799 A CN 202010143799A CN 111369641 A CN111369641 A CN 111369641A
- Authority
- CN
- China
- Prior art keywords
- preset
- point location
- vue
- component
- frame
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 113
- 239000010865 sewage Substances 0.000 title claims abstract description 16
- 238000010586 diagram Methods 0.000 claims abstract description 40
- 238000009877 rendering Methods 0.000 claims abstract description 7
- 238000004364 calculation method Methods 0.000 claims description 6
- 230000000694 effects Effects 0.000 claims description 6
- 239000003086 colorant Substances 0.000 claims description 3
- 230000001960 triggered effect Effects 0.000 claims description 3
- 238000004065 wastewater treatment Methods 0.000 claims 4
- 238000013461 design Methods 0.000 description 2
- 238000007792 addition Methods 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000011160 research Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T11/00—2D [Two Dimensional] image generation
- G06T11/20—Drawing from basic elements, e.g. lines or circles
- G06T11/206—Drawing of charts or graphs
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T11/00—2D [Two Dimensional] image generation
- G06T11/60—Editing figures and text; Combining figures or text
Landscapes
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Processing Or Creating Images (AREA)
Abstract
本发明涉及一种基于Vue.js框架的污水处理工艺图组态方法，具体包括以下步骤：步骤S1：获取工艺图的预设模板，设置所述工艺图的背景图，根据所述预设模板选择对应的工艺预设组件并将所述工艺预设组件安放至预定位置；步骤S2：根据所述工艺预设组件的安放位置来设置对应点位；步骤S3：将完成所述对应点位设置的工艺图进行渲染，输出工艺图画面。与现有技术相比，本发明具有操作简便、可进行远程访问和多终端访问等优点。
Description
技术领域
本发明涉及计算机技术领域，尤其是涉及一种基于Vue.js框架的污水处理工艺图组态方法。
背景技术
由于Vue框架具备简单灵活的特性，因此越来越多的信息系统的前端采用Vue.js作为模型-视图-视图模型的开发框架。在目前的污水处理行业中，很多工艺信息还是基于本地中控系统进行查看，工作人员需登录本地的中控系统才能查看污水数据，并对相关数据进行操作，这样的操作流程不符合现在社会的数据高速流通的要求，对于使用者来说不够便捷，降低了工作效率。
发明内容
本发明的目的就是为了克服上述现有技术存在的污水处理的工艺信息需要基于本地中控系统进行查看的缺陷而提供一种基于Vue.js框架的污水处理工艺图组态方法。
本发明的目的可以通过以下技术方案来实现：
一种基于Vue.js框架的污水处理工艺图组态方法，具体包括以下步骤：
步骤S1：获取工艺图的预设模板，设置所述工艺图的背景图，根据所述预设模板选择对应的工艺预设组件并将所述工艺预设组件安放至预定位置；
步骤S2：根据所述工艺预设组件的安放位置来设置对应点位；
步骤S3：将完成所述对应点位设置的工艺图进行渲染，输出工艺图画面。
所述工艺预设组件为可伸缩矢量图形。
所述步骤S2中设置工艺预设组件的对应点位包括点位选择、点位显示效果、点位的计算逻辑公式和点位对应的点击跳转地址。
所述点位显示效果包括颜色、图片和动画。
所述步骤S3具体为：
步骤S301：获取所述工艺图的编号信息；
步骤S302：根据所述编号信息，加载所述工艺图配置的组态信息；
步骤S303：根据所述组态信息渲染出工艺图画面并输出显示。
所述组态信息包括组件信息、点位状态和工艺图元信息。
所述点位状态包括点位信息、点位不同状态配置信息、点位对应的点击触发的动作和点位计算逻辑脚本。
所述组件信息包括所述工艺预设组件的组件编号、组件类型、组件坐标位置、组件默认显示样式、子组件编号和父组件编号。
所述工艺图元信息包括所述工艺图的数据刷新时间。
与现有技术相比，本发明具有以下有益效果：
1.本发明通过预设的工艺预设组件来设计工艺图，使工艺图可在Web页面上进行组态设置，方便了工作人员进行相关工艺设计的开发与研究。
2.本发明通过工艺预设组件和对应点位渲染出的工艺图画面不局限于本地中控系统进行查看，解决了污水处理的工艺图不能远程访问和多终端访问的问题。
3.本发明工艺预设组件采用可伸缩矢量图形，操作简便，方便开发人员移动工艺预设组件并根据预设模板进行加工，提高了工艺图的适应性。
附图说明
图1为本发明的流程示意图。
具体实施方式
下面结合附图和具体实施例对本发明进行详细说明。本实施例以本发明技术方案为前提进行实施，给出了详细的实施方式和具体的操作过程，但本发明的保护范围不限于下述的实施例。
如图1所示，一种基于Vue.js框架的污水处理工艺图组态方法，具体包括以下步骤：
步骤S1：获取工艺图的预设模板，设置工艺图的背景图，根据预设模板选择对应的工艺预设组件并将工艺预设组件安放至预定位置；
步骤S2：根据工艺预设组件的安放位置来设置对应点位；
步骤S3：将完成对应点位设置的工艺图进行渲染，输出工艺图画面。
工艺预设组件为可伸缩矢量图形。
步骤S2中设置工艺预设组件的对应点位包括点位选择、点位显示效果、点位的计算逻辑公式和点位对应的点击跳转地址。
点位显示效果包括颜色、图片和动画。
步骤S3具体为：
步骤S301：获取工艺图的编号信息；
步骤S302：根据编号信息，加载工艺图配置的组态信息；
步骤S303：根据组态信息渲染出工艺图画面并输出显示。
组态信息包括组件信息、点位状态和工艺图元信息。
点位状态包括点位信息、点位不同状态配置信息、点位对应的点击触发的动作和点位计算逻辑脚本。
组件信息包括工艺预设组件的组件编号、组件类型、组件坐标位置、组件默认显示样式、子组件编号和父组件编号。
工艺图元信息包括工艺图的数据刷新时间，当工艺图画面渲染完成后，当时间间隔满足工艺图的数据刷新时间，工艺图的工艺预设组件将重新获取点位数据，并更新点位模型对象值。
此外，需要说明的是，本说明书中所描述的具体实施例，所取名称可以不同，本说明书中所描述的以上内容仅仅是对本发明结构所做的举例说明。凡依据本发明构思的构造、特征及原理所做的等小变化或者简单变化，均包括于本发明的保护范围内。本发明所属技术领域的技术人员可以对所描述的具体实例做各种各样的修改或补充或采用类似的方法，只要不偏离本发明的结构或者超越本权利要求书所定义的范围，均应属于本发明的保护范围。
Claims (9)
1.一种基于Vue.js框架的污水处理工艺图组态方法，其特征在于，具体包括以下步骤：
步骤S1：获取工艺图的预设模板，设置所述工艺图的背景图，根据所述预设模板选择对应的工艺预设组件并将所述工艺预设组件安放至预定位置；
步骤S2：根据所述工艺预设组件的安放位置来设置对应点位；
步骤S3：将完成所述对应点位设置的工艺图进行渲染，输出工艺图画面。
2.根据权利要求1所述的一种基于Vue.js框架的污水处理工艺图组态方法，其特征在于，所述工艺预设组件为可伸缩矢量图形。
3.根据权利要求1所述的一种基于Vue.js框架的污水处理工艺图组态方法，其特征在于，所述步骤S2中设置工艺预设组件的对应点位包括点位选择、点位显示效果、点位的计算逻辑公式和点位对应的点击跳转地址。
4.根据权利要求3所述的一种基于Vue.js框架的污水处理工艺图组态方法，其特征在于，所述点位显示效果包括颜色、图片和动画。
5.根据权利要求1所述的一种基于Vue.js框架的污水处理工艺图组态方法，其特征在于，所述步骤S3具体为：
步骤S301：获取所述工艺图的编号信息；
步骤S302：根据所述编号信息，加载所述工艺图配置的组态信息；
步骤S303：根据所述组态信息渲染出工艺图画面并输出显示。
6.根据权利要求5所述的一种基于Vue.js框架的污水处理工艺图组态方法，其特征在于，所述组态信息包括组件信息、点位状态和工艺图元信息。
7.根据权利要求6所述的一种基于Vue.js框架的污水处理工艺图组态方法，其特征在于，所述点位状态包括点位信息、点位不同状态配置信息、点位对应的点击触发的动作和点位计算逻辑脚本。
8.根据权利要求6所述的一种基于Vue.js框架的污水处理工艺图组态方法，其特征在于，所述组件信息包括所述工艺预设组件的组件编号、组件类型、组件坐标位置、组件默认显示样式、子组件编号和父组件编号。
9.根据权利要求6所述的一种基于Vue.js框架的污水处理工艺图组态方法，其特征在于，所述工艺图元信息包括所述工艺图的数据刷新时间。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010143799.5A CN111369641A (zh) | 2020-03-04 | 2020-03-04 | 一种基于Vue.js框架的污水处理工艺图组态方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010143799.5A CN111369641A (zh) | 2020-03-04 | 2020-03-04 | 一种基于Vue.js框架的污水处理工艺图组态方法 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN111369641A true CN111369641A (zh) | 2020-07-03 |
Family
ID=71211788
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010143799.5A Pending CN111369641A (zh) | 2020-03-04 | 2020-03-04 | 一种基于Vue.js框架的污水处理工艺图组态方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111369641A (zh) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112162752A (zh) * | 2020-09-25 | 2021-01-01 | 成都华数工创科技有限公司 | 基于互联网水处理设计方法、装置、设备及储存介质 |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101877716A (zh) * | 2010-03-10 | 2010-11-03 | 艾默生网络能源有限公司 | 组态模板的定制方法、组态模板的显示方法及服务器 |
| CN103092585A (zh) * | 2011-11-04 | 2013-05-08 | 上海宝信软件股份有限公司 | 一种用于综合监控软件的图库的组态化设计系统 |
| CN106406910A (zh) * | 2016-10-24 | 2017-02-15 | 北京亚控科技发展有限公司 | 组态方法及装置 |
| CN108427799A (zh) * | 2017-08-12 | 2018-08-21 | 中民筑友科技投资有限公司 | 一种工艺图的图形展示方法及装置 |
| CN109918070A (zh) * | 2019-03-30 | 2019-06-21 | 佛山点度物联科技有限公司 | 一种平台基于浏览器的自定义监控组态的系统及方法 |
-
2020
- 2020-03-04 CN CN202010143799.5A patent/CN111369641A/zh active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101877716A (zh) * | 2010-03-10 | 2010-11-03 | 艾默生网络能源有限公司 | 组态模板的定制方法、组态模板的显示方法及服务器 |
| CN103092585A (zh) * | 2011-11-04 | 2013-05-08 | 上海宝信软件股份有限公司 | 一种用于综合监控软件的图库的组态化设计系统 |
| CN106406910A (zh) * | 2016-10-24 | 2017-02-15 | 北京亚控科技发展有限公司 | 组态方法及装置 |
| CN108427799A (zh) * | 2017-08-12 | 2018-08-21 | 中民筑友科技投资有限公司 | 一种工艺图的图形展示方法及装置 |
| CN109918070A (zh) * | 2019-03-30 | 2019-06-21 | 佛山点度物联科技有限公司 | 一种平台基于浏览器的自定义监控组态的系统及方法 |
Non-Patent Citations (1)
| Title |
|---|
| 左娇;: "面向工控领域的组态软件的画面组态实现" * |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112162752A (zh) * | 2020-09-25 | 2021-01-01 | 成都华数工创科技有限公司 | 基于互联网水处理设计方法、装置、设备及储存介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109032722B (zh) | 更新ui组件的显示效果的方法、装置及设备、介质 | |
| CN110377285B (zh) | 一种生成页面骨架屏的方法、装置及计算机设备 | |
| CN104731584A (zh) | 一种开放式数控系统人机界面可定制的组态设计方法 | |
| CN105307030A (zh) | 弹幕显示方法及装置 | |
| CN104571802B (zh) | 一种信息处理方法及电子设备 | |
| CN110750664B (zh) | 图片的显示方法及装置 | |
| CN108519894B (zh) | 一种音乐盒加载初始化的方法 | |
| CN103942823A (zh) | 一种游戏引擎渲染方法及装置 | |
| CN111459501A (zh) | 基于SVG的Web组态画面存储与展示系统和方法及介质 | |
| CN113655975B (zh) | 图像显示方法、装置、电子设备和介质 | |
| CN104866318A (zh) | 一种多窗口中标签页的展示方法及装置 | |
| CN114201627A (zh) | 一种用于电子墨水屏的显示方法、装置、设备及存储介质 | |
| CN112306297A (zh) | 一种会议白板手写输入低延迟的实现方法 | |
| CN110471700B (zh) | 图形处理方法、装置、存储介质及电子设备 | |
| CN111369641A (zh) | 一种基于Vue.js框架的污水处理工艺图组态方法 | |
| US20140325404A1 (en) | Generating Screen Data | |
| CN113419664A (zh) | 一体机多窗模式下的白板书写区域适配方法、设备、介质 | |
| CN106648602A (zh) | 页面加载方法 | |
| CN104740873A (zh) | 游戏中的图像渲染方法 | |
| CN111104114B (zh) | 自带状态的可控制轮播图组件实现方法及系统、设备 | |
| CN114780081A (zh) | 动画展示方法、电子设备以及存储介质 | |
| CN111625237B (zh) | 文字视觉变形方法、系统及介质 | |
| US20100171760A1 (en) | Method and apparatus for presenting overlay images | |
| CN102567017B (zh) | 一种osd界面输出的简易实现方法及装置 | |
| CN111209055A (zh) | 一种基于Vue.js框架的页面功能组态方法和装置 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| WD01 | Invention patent application deemed withdrawn after publication |
Application publication date: 20200703 |