web组态--新一代全流程低代码物联网平台

​ 先上图，实际完成效果：

(https://i-blog.csdnimg.cn/blog_migrate/0826adb3f2f29642e3641c...)
​

(data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)

(https://i-blog.csdnimg.cn/blog_migrate/070342d0357a7f6a62a998...)
​

(data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)

(https://i-blog.csdnimg.cn/blog_migrate/f0774eddce33cae1d561b5...)
​

(data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)

(https://i-blog.csdnimg.cn/blog_migrate/fc842ebefaf27590088815...)
​

(data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)

(https://i-blog.csdnimg.cn/blog_migrate/4b4a7283d6712feacfbe22...)
​

(data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)

(https://i-blog.csdnimg.cn/blog_migrate/f161563ff126351f0a6ff5...)
​

(data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)

(https://i-blog.csdnimg.cn/blog_migrate/13784371e0e886bd0770bf...)
​
(data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)

 

(https://i-blog.csdnimg.cn/blog_migrate/3163f3969b72436073075e...)
​

(data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)

(https://i-blog.csdnimg.cn/blog_migrate/0c3ec559b181cc4a87732d...)
​

(data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)

1.添加应用图纸

登录by组态后台：http://www.byzt.net:90

​

(https://i-blog.csdnimg.cn/blog_migrate/0917965d2dbe2d77fdcec6...)
​

(data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)

点击组态管理-画面管理，先新建一个组态画面，填写画面名称，保存，进入组态画面。

​

(https://i-blog.csdnimg.cn/blog_migrate/7091cf03477c45134bda0b...)
​

(data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)

选择画面管理，点击图示位置编辑画面，来构建组态。

​

(https://i-blog.csdnimg.cn/blog_migrate/7091cf03477c45134bda0b...)
​

(data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)

开始画组态图。

​

(https://i-blog.csdnimg.cn/blog_migrate/28a9efba7fedeeb7d9ce76...)
​

(data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)

2.组态绘制基础部分

(https://i-blog.csdnimg.cn/blog_migrate/2d271ff30463a1248a266e...)
​

(data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)

由上面划分，我们可以在设计中设计自己需要的组件。在左侧菜单栏中选择图标使用现成的组件

(https://i-blog.csdnimg.cn/blog_migrate/5624369b5dcce44a85e2a9...)
​

(data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)

可以点击我的图库，上传截图的图片资源。

(https://i-blog.csdnimg.cn/blog_migrate/17446edb3a70a977e5dd42...)
​

(data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)

在常用功能栏进行所需组件的绘制，例如添加图形、添加文本、图形之间的对齐等。

(https://i-blog.csdnimg.cn/blog_migrate/56fbee9f59eee99fd396f8...)
​

(data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)

在编辑操作区主要是对图形边框、背影、是否立体进行操作。

(https://i-blog.csdnimg.cn/blog_migrate/bbcaac5383a8dc2ef8e609...)
​

(da:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)

3 .绑定云平台数据

点击数据按钮，在弹出的标签页中选择数据点及配置虚拟变量，点击确定，进行绑定。

(https://i-blog.csdnimg.cn/blog_migrate/b111ac9a6aafd7094cef15...)

(data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)

是不是很简单！！！

技术文档
官网网站：http://www.hcy-soft.com
体验地址：by组态[web组态插件]