多比Web组态工具用户手册

...wd......wd......wd...多比实时数据可视化开发平台用户手册北京龙博中科软件目录TOC\o"1-3"\h\u1．简介51.1功能介绍51.2编辑态功能61.3运行态功能81.4典型使用流程101.5应用案例111.5.1案例一111.5.2案例二122.安装132.1配置参数132.1.1客户端参数132.1.2服务器端参数142.1.3技术参数142.2自动安装172.3手动安装202.3.1安装Java202.3.2安装MySQL，建数据库212.3.3启动多比平台213.编辑态业务功能223.1登录223.2工程管理223.2.1工作空间管理223.2.2组态工具界面223.2.3菜单管理263.3用户权限管理303.3.1用户管理303.4实时数据集管理313.4.1添加数据源313.4.2添加数据库中的点383.4.3删除数据源393.4.4查看数据源393.4.5批量导入数据点403.4.6数据点联动413.4.7发布器和接收器423.5画面组态443.5.1新建画面443.5.2删除画面和目录453.5.3复制画面453.5.4画面重命名463.5.5画面分类463.5.6画面移动463.6画面编辑473.6.1画面编辑菜单473.6.2在画面中绘图493.6.3属性设置543.6.4图元操作553.6.5根本形状编辑563.6.6图表编辑573.6.7常用控件603.6.8画布的相关设置663.6.9弹出窗口和悬浮窗口663.7脚本683.7.1脚本技术683.7.2脚本运行管理683.7.3脚本编辑器693.8事件693.8.1事件编辑器693.8.2组件事件监视器713.8.3定时事件分组723.8.4事件处理器733.9告警733.10报表764.运行态业务操作774.1系统启动774.2运行态页面774.3切换画面784.4查看实时数据784.5查看历史数据794.6查看参数794.7告警窗口804.8支持移动设备805.常见问题汇总805.1画面编辑问题805.2属性设置问题815.2.1如何旋转控件815.3数据连接和绑定问题815.3.1连接数据库异常问题815.3.2要想使数据绑定，变动的幅度大，怎么办825.3.3图表如何绑定数据825.4运行状态异常问题835.4.1多比启动异常831．简介1.1功能介绍 随着智能手机、智能平板电脑的普及，越来越多的移动终端参与到工业自动化、信息化和智能化的应用中来，由于移动终端具有移动化、网络化、智能化的优势，可以弥补工业自动化中移动互联和灵活面向管理者实时监控的缺陷，能够实现随时随地的参与到工业自动化和实时监控中来，到达舒适工作舒适生活的目的。 多比物联网云监控平台是基于云的监控开发平台，可以让非专业人员通过简答的拖拽生成专业的监控App。 多比基于纯HTML5技术和标准的工业总线技术，可以在平板电脑、iPhone及安卓手机平板在内的多种移动设备上应用。多比物联网云监控平台可以作为现有的SCADA系统，在无需改造现有系统的情况下可以提供很好的远程移动控制和维护功能。其友好的高级可视化界面给各类用户提供了远程监控自动化系统绝佳体验。如以下列图是web组态工具的功能界面。1.2编辑态功能工程管理功能支持工程管理支持工程的增删改查各个工程在同一个服务器中，互不干扰支持对工程和数据源的权限管理画面编辑功能提供类似于visio一样的编辑工具，可以实现文件的在线编辑和发布，不需要从新部署支持翻开、保存为JSON文件支持Png/Jpg/Gif等图形文件的导出支持自定义图元，支持SVG图元支持线条编辑，允许插入点线面等实体支持文字功能，支持文字字体，大小颜色，旋转等等支持撤销和重做功能支持Javascript脚本扩展图元支持任意图片作为图元，并设置透明图支持和Java后端语言集成支持图元的异步加载，适合Web部署支持多种连线，可以自己定义连接点支持不同的线形支持多种填充方式，渐变和图案填充支持网格定位图形支持任意角度自由旋转，旋转中不改变图形其它逻辑支持自定义属性，可将很多设备属性定义在图元中自定义多类型存储属性〔整数、小数、逻辑、字符串〕支持无级别放缩〔移动设备〕支持属性的可视化编辑支持图形漫游技术支持程序或者脚本绘图API支持自定义图元库支持自己定义的调控点支持各种仪表，刀闸，信号灯，统计图的开发支持图元的透明度的设定支持类扩展支持线条的吸附功能脚本功能支持在线代码编辑功能支持代码热部署功能支持可视化到代码的自动生成支持代码到可视化设计的逆向工程支持语法高亮支持上下文提示支持文件构造预览支持单击、双击、右击，MouseOver，MouseOut，ValueChange等多种事件，支持生成事件处理函数及逆向工程数据源管理功能支持MySQL，MSSQLServer，Oracle等常见数据源管理支持实时数据缓存功能，针对并发有专门的机制优化实现实时数据增量推送数据绑定功能支持数据源可视化绑定支持任意支持数据回写功能事件可视化编辑1.3运行态功能运行时画面展示支持翻开XML文件支持多图层，支持图层的显示隐藏和锁定支持各种形式的动画，如旋转、变化位置，颜色变化等等支持自定义图元，支持SVG图元的相关动画支持文字动态更新，支持文字字体，大小颜色，旋转等等支持Javascript脚本控制图元动画支持和Java后端语言集成，动态获取数据并动画展示支持图元的异步加载，适合Web部署支持化工行业的水流线支持不同的线形支持多种填充方式，渐变和图案填充的动态变化支持自定义属性的展示，可将很多设备属性定义在图元中并用气泡展示自定义多类型存储属性〔整数、小数、逻辑、字符串〕支持无级别放缩支持属性的可视化编辑支持图形漫游技术支持程序或者脚本绘图API支持自定义图元库支持图形的锁定和解锁支持自己定义的调控点支持各种仪表，刀闸，信号灯，统计图的开发支持和服务器端的各种通信技术，如AJAX等等支持图元的透明度的设定支持类扩展支持自定义提示信息支持图形操作事件，例如在鼠标点击、移动、图形缩放、创立、删除时触发数据绑定功能支持秒级刷新预定闪烁、高亮、位移、缩放等动画效果并绑定支持40+二维和三维图表的绑定运行态操作数据源异常告警画面切换菜单画面实时数据预览菜单移动设备扫描入口移动设备支持支持安卓手机和平板电脑支持ios手机和平板电脑支持WindowsPhone的手机和平板其他支持多语言支持多种皮肤实时切换1.4典型使用流程使用web组态工具分为两个局部，编辑态和运行态。其中编辑态是指工程的绘制，数据源设置和数据绑定等，主要的操作步骤如下：登录建设工程添加组件编辑画面添加数据源绑定数据运行态是指系统的运行模式，该模式下一般为只读状态，用户可以监控不同的设备，切换不同的监控画面，查看警告信息等。1.5应用案例1.5.1案例一多比软件和某电力规划研究院签订合作协议，开发基于Web电力接线信息平台。配电站接线图是一种特定的复杂而又有规则的图形,可以采用多比技术绘制配电站接线图。它根本由一些固定的电气元件组成(或称为图元),这些图元有其固定的表现形式。传统的ActiveX控件实现的方式有许多缺点：客户端的部署很困难，如客户端不能正确下载，下载了以后不能正确执行，下载的时候需要设置IE的安全级别等等。多比编辑工具不仅提供了一个界面友好、方便使用的编辑环境,而且可以提供大量配电站电气元件图元,这样可以实现图形文件格式存储,轻松完成配电站接线图的制作。1.5.2案例二B/S构造的SCADA系统，也有人称为第四代SCADA。它集成了Internet技术、面向对象技术、DNA神经元技术等技术内核，使采集和监控的数据得以开放，能被更多的管理系统、控制系统和使用者所访问。WEBSCADA将会成为众多企业实现管控一体化所选择的第一步。WebSCADA系统与传统的SCADA系统有哪些优势具有以下优点具1)可以远程访问，使用户虽远离现场，亦可处处关心2)广泛的技术合作成为可能，多人在多方对同一问题可进展会诊，甚至全世界3)报警方式的多途径实现，不仅能在SCADA监控系统中显示，还可以通过传呼、E_Mail甚至手机短信实现4)一个用户可监控多个过程，使过程控制人员不再分身乏术；多个用户可以监控同一过程，真正实现了数据的开放性及过程信号的透明化5)最终用户参与设计，使控制过程更趋于合理，生产工艺得到更完美的表达6)仪器虚拟化，操作简单，不仅可以进展现场数据记录，更可以进展智能化分析7)多种仪器、多种控制系统的协同工作，使全局自动诊断能力增强8)无人操作和远程操作可以降低工厂运行的本钱，这时选择正确的设备是至关重要的，这样才能保证工厂运行的安全和高效。2.安装web组态工具使用之前需要进展安装，关于工具的安装，有两种方法，推荐使用第一种方法，如第一种安装方法出错无法装上，便可使用第二种。2.1配置参数2.1.1客户端参数多比客户端网络要求局域网环境；在TCP/IP协议下的固定或动态IP地址；多比客户端硬件要求硬盘：50M以上剩余空间；内存：128M以上；CPU：1.5GHz以上多比客户端软件要求微软视窗系列操作系统〔Windows2000以上〕/Andriod4+/IOS浏览器IE9+/Chrome/Safari2.1.2服务器端参数多比服务器网络要求局域网环境；能连接到因特网〔可选〕；在TCP/IP协议下的固定IP地址，或者动态IP加动态域名；多比服务器硬件要求硬盘：5G以上剩余空间；内存：4GB以上；CPU：奔腾PentiumⅣ系列，主频1.5GHz以上，在线人数到达500人以上，上建议使用双CPU服务器；磁盘阵列/光盘库/磁带机〔可选〕；多比服务器软件要求微软视窗系统环境〔Windows2000Server以上〕；2.1.3技术参数1〕平均无故障时间〔MTBF〕：≥4760小时；2) 画面调用时间：<10秒；3) 画面实时数据刷新时间：5秒～30秒；4) 实时数据查询响应时间：<3秒；5) 历史数据查询响应时间：<10秒；6) 正常情况下CPU负载：≤20%〔一分钟均值〕7) 事故情况下CPU负载：≤50%8) 系统可用率： ≥99.9%同行业技术比拟传统组态软件多比移动组态平台安卓系统不支持支持java不支持支持桌面系统支持支持Web安全极不安全，容易被WindowUAC/360等多种软件屏蔽，造成用户无法正常使用安全,不需要安装任何插件图片加载需要打包在ActiveX中，导致安装文件很大图片和文件别离，异步加载脚本语言可以和javascript交互，但是语法怪异Javascript原生，和javascript无缝集成可扩展性需要重新编译类继承的方式，非常容易扩展可维护性每次变更版本都需要重新安装页面刷新即可学习曲线现在大多数程序员都没有接触过COM，VB/Delphi等，学习难度大Javascript程序员很多，即使不会，java/.net程序员学习起来也很容易调试错误出错后，没有错误信息，非常难以调试Javascript异常和错误，非常容易调试，并且可以利用浏览器的内部调试工具在线调试2.2自动安装下载下来压缩包之后，将它解压，使用的步骤如下：首先单击里面的install.bat文件，出现下面的提示，如果有“Servicesuccessfullyinstalled.〞和“duobeemysql服务已经启动成功。〞这两条语句，表示tomcat和mysql已经安装成功。install.bat执行成功后，单击文件夹中的“启动移动组态平台.bat〞文件，成功界面如以下列图所示。如果执行成功的话，它会自动翻开本机上的浏览器，如以下列图所示，输入用户名admin，密码admin，点击“登录〞按钮。就成功进入web组态工具界面。第一次翻开的时候，速度会有点慢。常见问题：这里值得注意的是，文件的路径中，不要使用中文，例如文件路径中有“星期四〞字段，那么执行“启动移动组态平台.bat〞文件的时候，会报错。执行界面如以下列图所示。并且，路径中也不要出现空格，例如文件路径中有“星期四〞，中间有空格，以下列图是单击install.bat文件出现的错误。2.3手动安装如果自动安装不成功，可以自己手动安装〔注：卸载并删掉原先自动安装时出错的安装包，请解压一个新的安装包进展安装〕。具体的安装步骤如下。2.3.1安装Java第一种：从网上下载jdk安装包〔注：JDK必须是1.6版本以上〕，下载下来并安装之后，配置它的环境变量就可以了〔如果不会配置，可查看://wenku.baidu/view/d5b0d3287375a417866f8f8e.html中的配置步骤〕。第二种：也可以用多比平台安装包自带java配置文件，第一步是在环境变量中新建一个JAVA_HOME变量，将多比平台中的java路径拷贝到变量只中，点击确定保存。第二步是找到环境变量中的Path变量，将多比安装包java文件夹中的bin路径添加进去，点击确定保存。在桌面菜单栏中搜索cmd,然后敲击回车键，在命令框中输入：java-version,如出现以下列图式样，则JAVA_HOME配置成功。2.3.2安装MySQL，建数据库从网上下载并安装WAMP，启动WAMP中的phpMyAdmin并在其中新创立一个数据库〔配置如以下列图所示〕，作为web组态工具的数据库数据源使用。创立好数据库后，我们在mangomm数据库中导入多比安装包中的mangomm.sql表，最后点击执行〔第一次执行会需要一些时间，请耐心等待〕。2.3.3启动多比平台双击多比软件安装包tomcat\bin路径中的startup.bat配置文件，即可启动多比平台〔注：第一次启动需加载，请您耐心等待〕。建议将WAMP和Tomcat的快捷方式放在桌面上，以便下次使用；://:8080/visualizer/login.htm3.编辑态业务功能3.1登录登录web组态工具的用户名和密码都是admin。点击“登录〞按钮后就可以进入web组态工具的平台。3.2工程管理3.2.1工作空间管理Web组态工具是一套基于B/S构架的，多用户，多工程的，面向监控行业的组态软件平台。它的根本特点为：可以创立多个工程。每一个工程有多个画面，脚本等资源。可以绑定数据，添加数据源。可以运行查看相应的效果。3.2.2组态工具界面Web组态工具的界面如以下列图所示：界面主要分为4个局部，如上图所示。下面我们分别来介绍界面这四个局部的功能。功能区1：主要是页面区和数据源区。本工程内所有的页面，和所有数据源，都列举在这里。可以通过上面的“画面〞和“数据源〞选项卡进展切换。对于页面的增加、删除、页面重命名等功能，都可以在这局部功能区中实现。功能区2：组件窗口区域。Web组态工具支持很多常用的组件，这些组件使用起来也容易上手。其中包括了各种根本形状以及工业控制上常用的监控组件。功能区3：页面编辑区。页面编辑区就是我们操作工具的舞台，上部显示翻开的页面名称。功能区4：页面上添加的控件，它们的属性都在这局部功能区上。可以通过这个功能区，调整控件的属性，也可以调整画布的背景颜色和界面主题。3.2.3菜单管理Web组态工具界面上，有5个菜单，分别是文档、数据源、生成、工具和帮助。下面我们一起来看看这些菜单的使用介绍。文档菜单单击菜单栏上的“文档〞选项，可以看到菜单下面有这些子项。新建工程启动移动组态平台软件后，可选择“文档〞菜单下的“新建工程〞选项，弹出新建工程对话框。在里面输入工程名称，点确定即可完成工程的建设。同时当前工程自动切换为新建设的工程。在web组态平台软件的状态条上可以看到当前工程目录：翻开工程在web组态平台软件中，选择“文档〞菜单下的“翻开工程〞选项，在弹出的选择工程中，只列出用户对应的工作空间内的工程列表，对话框中选择需要翻开的工程的名称即可。关闭工程在web组态平台软件中，选择“文档〞菜单下的“关闭工程〞选项，就可以关闭翻开的工程了。删除工程单击“文档〞菜单下的“删除工程〞选项，会弹出下面的对话框，单击“是〞按钮，就可以将当前的工程删除。新建文档或目录“新建文档或目录〞选项，同新建页面的功能是一样的，单击这个选项，会弹出下面新建画面的框。保存单击“保存〞选项，或单击工具栏上的“保存当前文档〞按钮，会将当前页面进展保存。保存所有单击“保存所有〞选项，或单击工具栏上的“保存所有更改正的文档〞按钮，会将本工程内所有的页面进展保存。数据源菜单单击菜单栏上的“数据源〞菜单，可以看到它下面的子项如以下列图所示。数据源包含了数据库数据源、虚拟数据源、OPC数据源以及modbus数据源四种，可以设置了数据源后，对数据进展绑定。关于数据源的介绍，我们会在下面进展详细的说明。生成菜单“生成〞菜单下面只包括一项“调试应用程序〞，单击它，可以在浏览器中预览效果。工具菜单单击菜单栏上的“工具〞选项，可以看到它下面包含的内容。查看工程资源单击“查看工程资源〞选项，会在页面局部翻开工程资源管理的内容，在里面可以选择本工程内部的图片，也可以上传图片。帮助菜单Web组态工具的帮助手册和工具的信息说明，都在这局部。3.3用户权限管理3.3.1用户管理用户管理选项，用于显示当前的用户，并配置他的相应权限。单击“用户〞框的右上角的小图标，可以新增用户，也可以对现有用户进展修改。3.4实时数据集管理3.4.1添加数据源在工程管理中，用户需要在数据绑定之前添加数据项。Web组态工具的数据源包括数据库数据源、虚拟数据源、OPC数据源和Modbus数据源等等，下面是这些数据源的详细介绍。数据库数据源单击“数据源〞菜单下的“添加数据库数据源〞选项，就弹出了添加数据库数据源的信息框，在里面输入相应的信息，关于驱动类和连接字符串两个地方，都给出了相应的选项。如果“返回多行两列〞复选框被选中的话，那么“测试连接〞按钮被单击的时候，数据库中的内容就会在右侧“SQL语句测试〞下显示出来。用户可以查看是否和数据库中的一样。上面提示“数据源保存完毕。请切换到《数据点》标签编辑数据点〞，单击上方的“数据点列表〞标签，就进入到数据点页面。单击右上角的添加按钮，在点的详细信息里面，输入相应的名称和ID，单击保存按钮，就添加了一个数据点。数据点添加完之后，数据点和SQL属性上的启用按钮一定要开启，并保存。这样数据库数据源就建设好了。虚拟数据源单击“添加虚拟数据源〞选项，在弹出的Virtual数据源属性中，输入虚拟数据源的名称及更新时间，单击保存按钮，并启动左侧的按钮。切换到数据点列表选项卡，单击添加按钮，在点的详细信息里面，包含五种改变类型。“Brownian〞是小数，在给定的范围内变化。“减少〞，是从“最小〞增加到“最大〞，又从“最大〞减小到“最小〞。间隔是“改变〞给定的值。“无变化〞，是自始至终都是一个给定的数字。“随机〞，是小数，在给定的“最小〞和“最大〞处变化。“Attractor〞，是根据“最大改变次数〞间隔自动增长。关于这几种类型的不同，用户只要试试，就可以知道它们的区别了。OPCmodbusMoudbus通讯协议连接方式有两种，一种是串口，另一种是IP。串口连接方式：如以下列图所示，可自定义取名称，更新时间最好调成1秒以下，以方便工程页面及时刷新数据；在下拉框中选择设备连接计算机的端口。编辑好Moudbus串口属性后，如以下列图右侧，可测试平台是否成功连接到设备。IP连接方式：IP连接方式与串口类似，不过如以下列图所示，传输协议得改成TCP,主机文本框填写主机的IP地址，默认端口502，在以下列图右侧可测试能否连接到PLC控制器读取数据。元数据源元数据源的数据点，是用来获取多个其他数据点进展加减乘除等运算后取值的数据点。添加方式如以下列图，首先在数据源菜单中选择添加元数据源，填写数据源名称进展保存并激活〔红色圆标记处〕，然后点击数据点列表进展创立数据点。点击标志进展添加一个数据点，如以下列图所示，填写好名称，选择存盘的话则可以看历史数据，数据类型必须和获取的数据源数据类型一致，可设置选项选中的话可对该数据点在画面中进展修改。在脚本上下文的下拉框中选择需要获取数据点，然后点击进展添加，点击标志可进展删除，然后在脚本框中进展脚本代码编辑，如红色方框处所示，写好脚本后点击标志可测试脚本编辑是否能正确取到数据，成功了的话最后进展保存。抓取数据源如上图所示，点击数据源菜单下的添加抓取数据源，自定义名称，更新期间为多久抓取一次数据，URL处填写网站的链接地址〔注：可以点击标志测试所填链接是否正确〕，选择保存再点击标志，使其变成绿色激活状态，我们在点击数据点列表开场编辑数据点。如以下列图所示，名称自定义，选择存盘和编辑存盘周期，可设置多久时间存一次历史数据，根据所要抓取的数据选择数据类型，填写抓取所需的正则表达式，点击标志可测试抓取到的数据结果，最后点击保存。3.4.2添加数据库中的点数据库项可以包含一个或多个数据点。在上面的数据源完成后，可以进展数据源的点管理，包括点的增加、修改和删除。点击标志进展添加一个数据点，如以下列图所示，填写好名称，选择存盘的话则可以看历史数据，存盘周期为多少时间存一次历史数据。3.4.3删除数据源单击“查看数据源〞选项，所有的数据源就都列出来了。在里面单击“删除〞按钮即可删除不想要的数据源。3.4.4查看数据源单击菜单栏上的“数据源〞下面的子项“查看数据源〞，就可以查看当前工程内的所有数据源。以下列图是“查看数据源〞单击过后的数据源列表。3.4.5批量导入数据点多比支持批量导入数据点，首先建设好数据源，在数据点列表中，点击标志〔如以下列图红色标记处〕导出数据点添加模板，在WPS表格中翻开模板。在翻开的模板中编辑点名称、存盘周期等数据点属性；如选择存放器、Modbus数据类型等数值的编辑，请查看模板中的字段说明文档来进展填写〔如以下列图所示〕。在WPS表格中编辑好数据点后，将该文档保存到固定的路径下，然后我们回到多比平台数据点列表编辑界面，点击标志，将之前保存的文档导入进来〔如以下列图所示〕，导入进来后的数据点还需在状态列中激活，这样才能在画面中调用该数据点。3.4.6数据点联动数据点联动指的是将一个数据点的值传给另一数据点，并且可对原数据点进展编辑再赋值到目标数据点。第一步是创立好原数据点和目标数据点，如以下列图所示，目标数据点可设置属性得勾选上，数据类型应和原数据点保持一致。第二步选择工具菜单下的数据点联动，点击标志，进展添加一个点连接。第三步在翻开的点连接界面中，输出编号自动生成不需要改动，在源点下拉框中选择原数据点，在目标点下拉框中选择目标数据点。脚步框中是用来对原数据点进展JS代码编辑，比方将原数据点值*1000后赋值到目标数据点，则在脚本框中填写〔returnsource.value*100;〕。最后我们对编辑好的点链接点击保存，点击标志则删除该点链接。3.4.7发布器和接收器数据发布器：如上图所示，在数据源菜单下选择添加数据发布器，名称自定义；URL按照图中模式所来写，localhost处填写接收方机器的IP；静态参数关键字是固定的〔__device〕，值框中填写设置该发布器的ID；在点属性中选择所需要发布出去的数据点，然后点击标志添加进去，在参数名这一列中删掉原来的数据源名称，留下原数据点的名称，最后点击保存。如以下列图所示，选择查看发布器在红色方框位置点击点击成绿色激活状态。点击标志可再次编辑该发布器，点击标志可删除该发布器。接收数据源：选择数据源菜单中添加接收数据源，名称自定义，点击监听数据可测试能否成功接收到发布器中传过来的数据，如果成功则保存激活该数据源。添加一个数据点，名称自定义，存盘和存盘周期可设置多长时间存一个历史数据；参数名称框中填写之前发布器中的参数名这一列的字符，所填写的字符将与发布器中的数据点形成映射，最后保存。3.5画面组态3.5.1新建画面在工程内，单击“画面〞选项卡中的加号。在弹出的“为新建目标命名〞框中，输入新的页面名称，点击确认按钮即可。3.5.2删除画面和目录删除不需要的画面和目录，可以在画面或目录上右击选择“删除文档或目录〞选项，或是单击上方的减号，即可删除画面。3.5.3复制画面有时候很多画面上的内容差不多都一样，只有个别差异，这时候可以通过复制画面，然后再对不同的地方进展修改。选中需要复制的画面鼠标右击，出现以下列图后，点击复制画面即可。3.5.4画面重命名给已有的画面进展重命名，选中需要重命名的画面鼠标右击，会有如以下列图选项，单击重命名按钮，在弹出的重命名文本框里，输入新的名称，点击确定按钮。3.5.5画面分类点击以下列图所示的图标，然后填写新目录的名称。3.5.6画面移动右击需要移动的画面，点击移动画面，在弹出框的所属目录处，选择将该画面移动到目标目录下。3.6画面编辑3.6.1画面编辑菜单在画布的顶部有一行画布编辑菜单。到代码视图我们在画布中的编辑内容，可点击编辑菜单中的进入到代码的编辑状态。同样我们也可点击代码编辑菜单中的回到视图模式。刷新和画布大小的调节点击编辑菜单中的可实时刷新你编辑的画布内容。点击，我们会看到一个下拉框，在下拉框中我们可以调节适合自己电脑分辨率的画布大小。上一步和下一步操作我们可以通过点击编辑菜单中的左向箭头，进展回到你在画布内容编辑的上一步操作，点击右向箭头跳到下一步操作控件的复制剪切删除在编辑菜单中，我们可以点击其中的图标对单个控件进展复制剪切删除。当我们要复制剪切删除多个控件时，我们可以在画布中按住鼠标左键拉动，将我们需用的控件鼠标左键圈起来，然后再点击复制剪切删除的图标。跨页面复制控件如以下列图所示，先鼠标左键圈住要复制的控件，然后点击红色标志出按钮，会弹出一个剪贴板，点击跳到目标画面中，最后点击〔红色3〕处的标志。控件的叠放在画布中我们常常会遇到控件以及图片的叠加，这时候我们可以在编辑菜单中的对控件的叠放层次进展选择。点击将控件置于顶层，点击将控件置于底层。JS数据点击编辑菜单终点JS数据，会出现以下列图所示的下拉框，我们可以对画布中编辑的控件进展自定义JS代码编写，也可以查看画布中所有控件的默认控件值。将控件拖放到容器中容器控件类只支持常用控件类和图表控件类，首先拖拽一个容器控件到画面中，然后将其他控件拖拽放入容器控件中，修改容器的标题文字属性，可自定义容器标题。3.6.2在画面中绘图绘制文本点击组件窗口根本形状中的文本框，然后拖拽到画布中的适宜位置，点击鼠标左键，窗口中会出现一个小文本框，然后敲击键盘输入文本“演示〞，这时可以在窗口中看到输入的文字。属性：选中文本后，在画布的右侧属性栏中可进一步设置文本属性，比方文字方向、对齐方式、文本的字体、大小、颜色等。绘制矩形点击组件窗口根本形状中的矩形控件，然后拖拽到画布中的适宜位置，矩形的长宽是可以自由拉伸的。选中绘制好的矩形，在画布右侧属性栏中可以对该矩形的颜色、边框、式样等进展设定，或者点击以下列图中蓝色箭头标志也可进展样式设定。绘制直线和垂直水平线点击组件窗口根本形状中的线形控件，然后拖拽到画布中的适宜位置，这时候的直线是斜着的，可以通过拉拽将直线拉任意长短、任意方向〔注：垂直水平线皆可以〕。选中绘制好的直线，在画布右侧属性栏中可以对该直线的颜色、线宽、线形等进展设定，或者点击以下列图中蓝色箭头标志也可进展样式设定。绘制圆角矩形点击组件窗口根本形状中的圆角矩形控件，然后拖拽到画布中的适宜位置，点中该控件，点击蓝色箭头弹出样式编辑器，其中的半径属性可设置圆角大小，其他样式颜色、边框等也可进展编辑。绘制圆点击组件窗口根本形状中的Circle控件，然后拖拽到画布中的适宜位置，以下列图中的轮胎就是通过该控件组合而成，圆形的属性属性设置可参阅的相关设定。制多边形点击组件窗口根本形状中的三角形、矩形、五边形等多边形控件，然后拖拽到画布中的适宜位置。如果需要其他不规则的多边形，可如以下列图步骤所示，选中多边形，鼠标右键点击，然后点击编辑路径，这时候会出现几个圆点，选择其中任意圆点鼠标右键，添加路径节点，这时候该控件会多出一条边，可以拉伸其中的任意圆点来到达你想要的不规则多边形。属性设置请参阅的相关设定。12制多折线点击组件窗口根本形状中的多点折线控件，然后拖拽到画布中的适宜位置。折线的形状改变设置可参阅相关设定，也是通过添加路径节点和拉拽生成。属性设置则参阅的相关设定。制管道在组件窗口工业控制栏中有多种管道控件，点击所需管道拖拽到画布中的适宜位置，可拉伸管道的大小和长宽。在画布右侧属性栏中可以对该管道的颜色，旋转角度等属性进展设定。绘制按钮点击组件窗口常用控件中的高级按钮控件，然后拖拽到画布中的适宜位置。选中该控件，鼠标左键输入该按钮的名称，如以下列图所示。按钮的属性可参照的相关设定。0控件对齐在画布中按住鼠标左键，将所需要对齐的控件全部拉到蓝色框中，然后在画布上面的菜单中，会出现一个对齐下拉框，点开然后所需要的对齐方式。3.6.3属性设置画布的属性通常我们为了编辑出的页面更加美观，需要添加背风光背景图片或者调整页面区域的大小，这时候我们就会用到画布的属性了，画布的属性设置就在多比平台主界面的右侧，如以下列图所示。控件的属性多比平台的控件也是有属性可编辑的，鼠标点击我们想要设置的控件，然后你会看到在画布的右侧出现了该控件的组件配置窗口，我们点开其中的属性设置这个下拉框，然后就会显示出改控件的所有属性设置了。3.6.4图元操作图片的加载画布图片选择在组件配置窗口中，点击其中的背景图像地址中浅蓝色的方框。当我们需要在画布中放入图片，这时我们就用到了图片控件了。在画布左下角的组件窗口中，选择常用控件中的图形控件，拖拽到画布当中，点击图形控件，再点击控件的左上角图标，就会出现以下列图所示的图片选择框了。图片的上传如果你想用自己的图片来进展画布的编辑，我们可以先进展上面步骤，然后在请选择图片路径的窗口中点击上传图片按钮，会跳出本地文件浏览框，找到你所需要的图片路径，进展保存确认。不同状态显示不同的图片此种功能常用于开关类型操作，下面进展举例演示该如何具体操作。首先我们拖拽一个图形控件到画布中，然后点击该控件常用选项中的图像字典，将会跳出一个属性编辑器，设置好标识和路径后点击应用更改保存设置，选择当前图像。当我们将控件绑定数据后，数据为1时则跳到我们设置的第一幅图片。3.6.5根本形状编辑控件样式编辑点击想要样式编辑的控件，再点击右上角的蓝色箭头，即可出现该控件的样式编辑器，在其中你可以设置控件的颜色或字体或鼠标样式等。控件边框设置控件边框的设置是在上面步骤的根基上进展的，在样式编辑器中找到边框和边框圆角属性。点开边框属性，出现一个边框编辑器，在其中我们可以设置边框的线形和颜色以及边框线条的粗细。而点开边框的圆角属性则出现边框圆角编辑器，编辑器中的滑动条可设置控件圆角的大小。控件颜色的填充控件颜色填充有两种，一是填充一种颜色，二是填充多种颜色并且有渐变效果。第一种可在该控件的属性中找到；第二种则在该控件的样式编辑器中，点击属性中的渐变，将会出现渐变效果编辑器，我们可以分别设置控件中的每种颜色所占比率大小，以及渐变方式从左开场或者从上开场等等。3.6.6图表编辑柱状图多比平台的控件众多，其中的图表一类控件是我们统计数据时最常用的。在画布的左下侧的组件窗口中，点开图表控件下拉框，如以下列图所示。由于图表控件众多，下面就只举例演示一个，我们将2维柱形图控件拉到画布中，点击控件右上角蓝色箭头，跳出一个图表配置器，下面就是我们所要讲解的图表三大属性。图表属性点开图表属性文件夹，选择其中的标题名称属性，例如下面左图所示。然后点击图表配置器中的数据菜单，再设置X轴的标签，也可以自定义标签的颜色，例如下面右图所示，最后点击应用按钮对你的设置进展保存。数据属性点击图表配置器中的数据属性文件夹，下面我选择其中的数据值装饰属性进展演示，如下面左图所示，设置好后最后点击应用，效果如下面右图所示。其他属性点击图表配置器中的其他属性，其中有数字格式属性设置和字体属性设置，我们可以对图表中的数字进展计量单位和精度等设置。3.6.7常用控件视频控件将常用控件中的视频控件拖拽到画布中，点中该控件，在画布左侧显示的属性中，找到src属性，下面是两种添加视频源方式：网络视频源：将网络视频源地址填入src属性中；本地视频源：首先我们将本地视频资源放入多比平台安装包中的tomcat\webapps\visualizer\json路径下，然后将运行平台时的网址拷贝放入到src属性中，将删掉，改成visualizer/json/视频名称.视频格式。历史曲线控件拖拽常用控件中的历史曲线控件到画布中，然后将控件的长宽用鼠标拉大，运行后，点击顶部的横条，选择所需查看的数据点历史曲线，如以下列图。选择好数据点后，可以点击如以下列图红色标志，进展时间段的选择然后确定，点击红色标志后面的执行按钮，可以立刻在图表中显示出所查询曲线，点击标志，可以导出所查询的数据点历史数据。文字标签在常用控件中拖拽一个文字标签到画布中，如以下列图所示，选择该控件，在右侧属性栏中点击红色标记处可以进展数据点绑定，其他常用属性设置有文字颜色、背景颜色、字号、字体，水平对齐方式为文字在标签框中的左右对齐，垂直对齐方式为上下对齐。属性设置栏，数值精度属性可设置显示到数据小数点后多少位。去掉边框的方法是：在边框颜色属性中将边框颜色设置成透明即可。数字输入框在常用控件中拖拽一个数字输入框到画布中，如以下列图所示，选中该控件，在右侧属性栏中点击红色标记处可以进展数据点绑定。属性设置栏，数值精度属性可设置显示到数据小数点后多少位。选择该控件，点击蓝色箭头处弹出样式编辑器，鼠标选中红色框INPUT处，然后修改前风光可以改变数值颜色，修改背景颜色可改变数值框的填充颜色，同时也可以对字体，字号，字体粗细属性进展设置。图形控件图形控件中的图片上传与加载在3.6.4图元操作中有介绍，这里主要讲图形控件的几种动画设置。首先在常用控件中拖拽一个图形控件到画布中，选中该控件，在右侧属性栏中处点击红色标记处可以进展图片的加载。如以下列图所示，在该控件属性栏中有这五种常用动画效果，点击对应的动画效果后面的红色标志，然后绑定开关量类型的数据点，即可监控设备的运行停顿等状态。开关控件点击开关控件可直接控制设备开关状态。在常用控件中拖拽一个开关控件到画布中，如以下列图所示，选中该控件，点击〔红色1〕处的属性按钮，点击〔红色2〕处的函数调用，然后点击〔红色3〕处的反向控制，再在〔红色4〕处选择需要控制的数据点，点开写入值处，在列表中找到当前页面目录下的该开关控件名称，再然后点开它，找到其中的getOnoff()并鼠标点击它，最后点击〔红色6〕处确实定。如果你对开关控件的图标不满意，可以在该控件的右侧属性中，找到“onsrc〞和“offsrc〞这两个属性，分别点击以下列图红色圆标志处，加载你自己喜欢的开关两种状态图片，可进展对开关状态的图片修改替换掉。进度条〔液位显示〕在常用控件中拖拽一个进度条控件到画布中，如以下列图所示，选中该控件，在控件值属性的红色标记处绑定数据点。标题模板属性可添加进度条数值后面的尾缀；类型属性可设置进度条横向显示或垂直显示；进度条颜色属性可设置该控件的填充显示颜色。高级按钮控件高级按钮控件一般用于点击事件或者控制开关量数据点。在常用控件中拖拽一个高级按钮控件到画布中，如以下列图所示，选中该控件在右侧标题文字属性处可修改按钮中的文字。点击样式编辑器属性，选中“<>CAPTION〞，然后在前风光处可修改文字的颜色，以及其他字号、字体加粗等属性。接下来是事件的编辑方法，以下列图是点击按钮跳转页面的方法，点击〔红色1〕处按钮，然后选中〔红色2〕处所需跳转的画面，点击〔红色3〕处的切换到页面，最后点击〔红色4〕处确实认按钮。高级按钮控件也可用来做开关使用，如以下列图所示，拖拽两个高级按钮，分别为开和关，开的按钮设置方法按照以下列图红色标记12345步骤进展；关的按钮设置方法除了〔红色4〕处改为0外，其他设置步骤和开按钮一样。3.6.8画布的相关设置点击处，我们会看到一个下拉框，在下拉框中我们可以调节适合自己电脑分辨率的画布大小。如果下拉框没有符合自己想要的分辨率，也可以通过修改画布右侧属性栏中的画布高和画布宽属性。同时在右侧属性栏中也可对画布的背景颜色、背景图像以及背景图重复进展设置。3.6.9弹出窗口和悬浮窗口弹出窗口：下面我举例用容器控件作为窗口，图形控件作为触发控件，当点击图形控件时弹出容器。首先将容器控件和图形控件拖拽到画布中，容器控件设置好了后，将其属性栏中的设置成hidden，使容器隐藏起来。然后再对图形控件做如下红色标记1234处点击步骤操作，操作完成后可保存画布并运行看看其效果。悬浮窗口：下面我举例还是用容器控件作为窗口，图形控件作为触发控件，当鼠标悬浮在图形控件时弹出容器。首先将容器控件和图形控件拖拽到画布中，容器控件设置好了后，将其属性栏中的设置成hidden，使容器隐藏起来。如以下列图所示，选中图形控件，在右侧事件响应栏中找到以下列图步骤1中“显示悬停效果〞这一项，然后按照以下列图红色标记1234处点击步骤操作，操作完成后可保存画布并运行看看其效果。3.7脚本3.7.1脚本技术Web组态工具脚本采用Web上最流行的javascript脚本。《可视化平台》提供了专门的脚本编辑器。脚本中可以直接用赋值的方式对系统变量进展读写操作。在脚本中，可以访问组态画面中的任何图元，甚至是增加不同的图元，并设置他们的属性。3.7.2脚本运行管理在组态平台的控制树上的脚本管理项上点击鼠标右键，可弹出【添加脚本】菜单，选中可以添加脚本。每一个脚本有一些根本属性，重要的是设置运行方式。有周期运行和条件运行两种方式。周期运行方式就是指脚本在设定的每一个周期执行一次。条件运行，是指脚本只有在满足设定的逻辑条件的时候才会运行。3.7.3脚本编辑器Web组态工具需要提供专门的脚本编辑器。用户可以在组态页面中选中某个脚本项，即可翻开脚本编辑器，同时会加载选中的脚本。脚本编辑器支持一些根本变量的自动完成功能。脚本编辑器支持语法高亮和语法检查。3.8事件3.8.1事件编辑器点中控件，然后在画布的右侧组件配置窗口中，点开事件响应下拉框，出现众多事件响应设置，每个事件的长条按钮点击后出现动作编辑器，点击可以用代码来编辑动作，点击可删除该事件之前所编辑的动作。动作配置列表在动作编辑器的左侧有动作配置列表，点击可以添加动作，可以移除一个动作，可以修改动作名，可以移除所有的动作。动作条件在动作编辑器的顶部，可选择动作条件，最多可选择三个动作条件。选择目标配置动作除了动作条件可以配置动作外，还可以选择在编辑器中选择控件来配置动作，在动作编辑器中的选择目标下找到你想要操控的其他控件名字，再进展选择动作配置动作。3.8.2组件事件监视器组件事件监视器也是一种告警，用于管理单个或多个数据点告警，当这些数据点告警到达某种条件时而触发的告警。如以下列图所示，在工具菜单中选择组合事件监视器，点击标志添加一个监视器，输出编号是自动生成，自定义名称和报警等级。在最底下的事件类型中，将显示出所有已设置告警的数据点，鼠标点开其中的数据点，会显示该数据点的告警条件，以及P字母开头的数据点告警编号。回到条件文本框中，编辑告警编号之间的条件，有三种条件：“&&〞代表与、“||〞代表或，“!〞代表否，如以下列图所示中的“P2&&P3〞的含义是：当P2与P3都出现告警时弹出监视器。点击标志可对编辑好的条件进展测试，看是否条件检验正确，最后点击进展保存该监视器，则删除该编辑器。3.8.3定时事件分组定时事件分组是用来监控某个时间段的告警信息。选择工具菜单中的定时事件分组，点击标志添加一个定时事件，输出编号自动生成，别名、报警等级、定时类型自定义，选择所需的启动时间和完毕时间，也就是某个时间到某个时间的告警监控，如果这个事件段出现告警，则出现定时事件告警，同时也方便了在运行时告警信息查询分组搜索，最后点击进展保存。3.8.4事件处理器3.9告警3.9.1告警设置当我们需要监控一个数据点在到达某种情况下进展报警提示时，就要用到了报警功能。首先我们在需要监控的数据点中点击标志。在弹出的高级监视器框中，选择告警类型，然后点击图标进展添加。下面是我演示的一个最大值超过80时候的报警，告警标题填写自己需要的告警提示信息，编辑好了告警后，点击标志来保存，删掉报警的话点击标志。3.9.2告警推送邮件和短信功能多比支持告警信息推送功能，点击工具菜单下的用户管理项，选择所需要发送的用户，填写需要发送的目标邮件地址和手机号，如以下列图所示，发送告警短信