EMSV1.20 能源管理系统组态图形软件 概要设计说明书 V1.00

PAGE组态图形软件概要设计说明书文件编号生效日期受控编号保密级别一级版本号V1.00修改次数0总页数正文附录无编制季建新审核批准(版权所有,翻版必究)评审记录对《组态图形软件概要设计说明书V1.00》的评审意见：上述问题修改验证后，由验证后，本文件即可发布。评审人员签字：问题修改验证结果：验证人签字：时间：年月日变更日志编号版本修改内容修改人修改日期1V1.00定稿。季建新2014-09-15目录TOC\o"2-3"\h\z\t"标题1,1"154831引言 127491.1编写目的 1194931.2背景 1138451.3定义 155631.4参考资料 1262672总体设计 230572.1需求规定 2239962.1.1功能边界 2178952.1.2性能边界 2194422.1.3鼠标左右键功能的汇总 2144942.1.4功能清单 21763图元提供默认图元库 327941图形管理 4239032.2运行环境 484792.2.1、软件要求 4246452.3界面设计 4277962.4功能模块划分 5285682.4.1图形绘制模块（draw） 579762.4.2图形浏览（view） 554582.4.3提供js调用接口 5225752.5软件流程图 5173352.6配置文件与图形文件 6143902.6.1配置文件 6315282.6.2图形文件 6163732.7软件开发框架 7153173组态软件功能设计 7204313.1通用编辑功能 724953.1.1功能描述 751913.1.2基本绘图工具 7158353.1.3样式工具 8202353.1.4元素操作工具 9300513.2图元功能 12106413.2.1功能描述 12144853.2.2图元库 12259393.2.3图元编辑 13318483.2.4图元特殊功能锚点 1479803.3图形管理功能 16325203.3.1功能描述 16180253.3.2图形初始化流程 17156413.3.3页面集管理 18116513.3.4页面管理 18281663.3.5图层管理 1924723.3.5元素管理 20102253.4数据关联 2180533.4.1功能描述 2140953.4.2操作流程 2237263.4.3需要的webservice接口 24251023.5实时监测 25314833.5.1功能描述 25130823.4.3需要的webservice接口 2626793.4.3需要的js接口 26112343.4.4对js提供的接口 26EMS1.2B/S组态软件概要设计说明书V1.00PAGE11引言1.1编写目的本文档是对天溯B/S组态绘图软件V1.0功能需求的详细阐述。通过本说明书，可以了解到本软件的开发背景、建设要求、功能需求等。该文档罗列的功能需求以C/S绘图软件为参照，兼顾现有项目需求整合而成，开发人员开发时可依据此文档完成各个功能的开发。本文档面向的读者是：EMS1.2项目组相关人员。1.2背景目前在NTS-9000系统中，已存在一套基于C/S架构模式的绘图软件。但为了解决方便客户在浏览器中直接浏览各监测图形的需求，欲将目前C/S模式升级为B/S模式，升级后绘图部分仍采用C/S模式，实时监测部分采用B/S模式。1.3定义下表列出本报告中专门术语的定义、英文缩写词的原词组和意义、项目组内达成一致意见的专用词汇，同时继承全部的先前过程中定义过的词汇。词汇名称词汇含义备注元素指绘图过程中添加到画布中的各种对象ROOT软件安装目录1.4参考资料编号资料名称说明1图形系统需求规格说明书2原版C/S（TS-DRAW,TS-VIEW）绘图软件2总体设计2.1需求规定2.1.1功能边界（1）详细阐述软件功能；（2）向webservice发送命令并接受返回信息处理；（3）提供软件内部接口，提高软件代码的重用性与可扩展性；（4）提供公共接口，给js页面调用。2.1.2性能边界（1）间隔2-5S从webservice端刷新一次数据，并能够正确接收及处理。该时间可依据实际情况可配置；2.1.3鼠标左右键功能的汇总有些功能只针对个别类型的元素；Draw中：左键页面空白处--清空元素选中，开始绘制图形左键元素--选中元素右键页面空白处--粘贴功能菜单右键元素--数据关联菜单，定义左键单击动作菜单左键双击元素--打开元素设置（如表格）左键双击页面空白--关闭绘图模式View中：左键元素--执行draw中赋予的左键单击动作双击元素--打开详细参数窗口2.1.4功能清单序号名称说明1通用编辑功能基本绘图工具直线、水平线、垂直线、矩形、圆角矩形，折线、多边形、文字、动态文字（测点）、图片、椭圆、圆、扇形、圆弧、弦、贝塞尔曲线，连接线，母线，图表（柱图，线状图，饼图），表格（双击支持更改行数和列数，行高和列宽）；样式工具透明度线形支持实线、虚线、点划线；线宽（边框）可调；填充属性支持不填充、纯色填充，渐变填充（支持线性和中心扩散渐变）；文字支持字体、字号、加粗、斜体、下划线、靠左、靠右、居中元素操作工具点选（注意像素极小时难以选中处理）和框选；shift键加选和反选复制，粘贴（款图形操作），剪切，删除；上下左右对齐（不可选基准元素，默认极值的那个）；旋转（不支持文字），平移（支持键盘微调），缩放置顶置底全图放大、缩小、还原，等比例满屏（1:1）鹰眼网格定义左键单击动作（动作目前只提供打开其他页面的动作）2图元编辑图元管理支持自定义图元一级分类功能，图元的重命名，删除和编辑图元新建图元新建支持输入图元名称、图元状态定义，默认提供值为0的状态，可继续添加状态，状态值可定义，新建状态下的元素与默认状态相同，可编辑；添加的状态可删除，默认状态不能删除；图元新建时可选择图元所属的分类；图元保存图元保存在单独文件当中，并赋予唯一id与版本号概念图元特殊功能图元支持定义锚点图元提供默认图元库默认图元主要集成了特定系统中定制的一些特殊功能的图元（如各种仪表）3图形编辑图形管理图形中分页面集-页面-图层-元素的概念，一个页面集包含多个页面，一个页面包含多个图层，图层中添加各种元素；页面，图层都支持新建，重命名，删除，重新编辑操作；图层还支持隐藏/显示，激活，z轴操作；添加到图层中的元素支持更改当前所属图层；软件启动时默认打开页面可设置；页面尺寸，背景可调整；图形保存图形中页面集，页面都用单独文件保存，并赋予唯一id4数据关联有按键提供查看当前哪些元素未进行数据关联；右键菜单提供数据关联选项，可进行数据关联，也可查看数据关联信息；提供测点关联和对象关联（即批量测点关联）两种模式；关联摄像头对象时，点击可播放视屏；数据关联信息单独文件保存；5图形浏览提供默认隐藏的页面树，可通过小图标调入/调出定时刷新已关联元素的数据支持鹰眼导航支持告警闪烁2.2运行环境2.2.1、软件要求客户机浏览器：Chrome、Firefox、≥IE10浏览器支持flashplayerFlashplayer10以上AdobeAIRInstaller客户机需安装AdobeAIRInstaller2.3界面设计 软件界面采用扁平化设计风格，暗色系色调为主。布局模拟现下流行p图软件ps的布局结构。整个界面操作方式包含了拖拽，单机，右击等操作手法；2.4功能模块划分2.4.1图形绘制模块（draw）该模块主要提供图形绘制功能，包含了通用的编辑功能，图元编辑功能，图形编辑功能，数据关联功能。2.4.2图形浏览（view）主要是实时监测数据，主要包含实时刷新数据和报警提示；2.4.3提供js调用接口接口描述接口定义打开区域图形openAreaPage(areaId:Number)2.5软件流程图刷新刷新2.6配置文件与图形文件所有文件都存放于软件安装目录下，安装目录以下统一用root表示；2.6.1配置文件图形软件的配置文件（root/assets/xml/config.xml）：关于整个软件的一些配置软件打开时需要打开的工程的配置<proj>工程名称</proj>；数据关联时webservice地址配置：<webS>地址url</webS>；图形浏览时告警闪烁颜色配置：<warnstatusValue=”告警状态值”color=”告警颜色（16进制：#ffffff）”type=“状态类型”/>；数据刷新时间配置<refreshDataTime>刷新时间<refreshDataTime>告警刷新时间配置<refreshWarnTime>刷新时间<refreshWarnTime>2.数据范围配置文件(root/assets/xml/dataRange.xml):用于数据关联时数据范围的配置，一般情况下不做更改；2.6.2图形文件页面集文件夹(Root/assets/graphics/工程名称/页面集UID)：每新建一个页面集会为该页面集新建一个以该页面集UID命名的文件夹用于存放所有该页面集的相关文件；页面集用作给页面分类，类似图元与图元库的概念；页面集文件（Root/assets/graphics/工程名称/页面集UID/页面集UID.xml）：所建页面集的信息页面文件夹（Root/assets/graphics/工程名称/页面集UID/pages）:参照1中所述，还会在页面集文件夹下创建一个页面文件夹用于存放该页面集下的页面文件；页面文件（Root/assets/graphics/工程名称/页面集UID/pages/页面UID.xml）：页面集中每有一个页面，该页面便会在pages目录下有一个单独的文件表示；图片文件（Root/assets/graphics/工程名称/image/imageUID.jpg）:用于存放页面所引用的图片，位于本地的图片可以通过上传图片功能上传到该目录下供页面引用；图元文件（Root/assets/graphics/pel/图元库UID.xml）：图元按照图元库进行分类，每个图元库由一个以自己UID命名的xml文件表示。数据关联文件（Root/assets/graphics/工程名称/页面集UID/dataLink/dataLinkUID.xml）：每个页面对应一个数据关联文件，以dataLinkUID映射；注：工程人员在绘图完成后需把整个graphics文件夹拷贝到服务器指定目录覆盖原来的graphics目录；2.7软件开发框架采用轻量级的PUREMVC框架，代码模块分为m,v,c三层结构，模块间信息传递以消息发送/接受的形式进行；3组态软件功能设计3.1通用编辑功能3.1.1功能描述 通用编辑功能包含了一些基本绘图工具，元素样式调整工具，元素操作工具；3.1.2基本绘图工具基本绘图工具包含：选择、直线、水平线、垂直线、矩形、圆角矩形，折线、多边形、文字、动态文字（测点）、图片、椭圆、圆、扇形、圆弧、贝塞尔曲线，连接线，母线，图表（柱图，线状图，饼图），表格（双击支持更改行数和列数，行高和列宽）；3.1.2.1工具描述·所有元素都支持缩放和平移（平移支持键盘微调）操作·矩形，圆角矩形，折线，多边形，图片，圆，椭圆，扇形，圆弧，贝塞尔曲线支持旋转；·圆角矩形支持圆角调整；·折线，多变形支持基准点的调整·绘图工具的操作方式分三种：1.选择、直线、水平线、垂直线、矩形、圆角矩形、椭圆、圆、扇形、圆弧、弦，连接线，母线、表格绘制时操作方式一致；2.折线、多边形、贝塞尔曲线操作方式一致；3.文字，动态文字，图片，图表操作方式一致（与图元操作方式一致）；3.1.2.2操作流程以上1和2的操作流程：3.1.3样式工具3.1.3.1工具描述·所有元素支持透明度·线形支持实线、虚线、点划线；·线形，闭合图形支持线宽（边框）可调；·闭合图形填充属性支持不填充、纯色填充，渐变填充（支持线性和中心扩散渐变）；·文字支持字体、字号、加粗（ctrl+b）、斜体（ctrl+i）、下划线（ctrl+u）、靠左（ctrl+l）、靠右（ctrl+r）、居中（ctrl+e）·样式工具栏默认全部可用，当选择某种元素时仅该元素支持的样式可用，其余灰度处理；·样式工具栏的样式工具值与当前所选元素同步，未选或多选时显示默认值；3.1.3.2操作流程3.1.4元素操作工具3.1.4.1工具描述·点选：线性元素像素小于4像素时，默认可选中范围为4像素；·框选：在绘图模式关闭的情况下，鼠标按下空白处移动鼠标，绘制虚线选框，元素全部在虚线范围内的判断为选中；·图素的组合：选中若干图形元素进行组合操作，组合后若干元素作为一个元素处理。如下图：·shfit键加选，反选：shift下，点选元素可以加/减选该元素，框选时只可加选；·复制（ctrl+c），粘贴（ctrl+v），剪切（ctrl+x）,删除（delete）不在页面中提供按钮操作，提供快捷键；同时粘贴提供右键菜单功能，快捷键粘贴到左上角，右键菜单粘贴到鼠标位置；·上下左右对齐：在选2个元素以上的情况下，对齐方式以最上，最下，最左，最右的一条边对齐；·平移（支持键盘微调），缩放支持所有元素·旋转支持矩形，圆角矩形，折线，多边形，图片，圆，椭圆，扇形，圆弧，贝塞尔曲线和图元；旋转的中心点为图形的中心店；·置顶（ctrl+f）/置底（ctrl+d）：在当前层的所有元素中置顶或置底；·全图放大、缩小、还原，等比例满屏（1:1）：放大缩小极限为10倍，等比例满屏（1:1）不超过该值·鹰眼缩略图要同步当前页面·网格可选显示/隐藏·给元素定义左键单击动作：打开另一个页面，动作信息单独文件保存3.1.4.2操作流程框选：复制，粘贴，剪切：定义左键单击动作：3.2图元功能3.2.1功能描述图元是集成了某些特定功能或图形组合的固定组件，可以方便工程人员绘制各种系统图；图元包含了图元库和图元2个概念，图元库是图元的分类。3.2.2图元库3.2.2.1功能描述·提供默认图元库，默认图元库中主要集成了特定系统中定制的一些特殊功能的图元（如各种仪表）。默认图元库中包含：区域（表示某个区域，绘制方式和多边形类似），LED开关，场景按钮，窗帘，风机·在draw中某些默认图元提供数据以对象关联方式进行；在view中这些图元提供左键双击打开详细参数窗口。·图元库支持新建和删除两项操作（默认图元库不支持）·每个图元库以单独xml文件存储·图元库新建，删除（操作图标至于标题栏上），图元库删除操作可能会导致图形中引用了该库中图元的元素不可用，次操作前必须提示3.2.2.2操作流程3.2.3图元编辑3.2.3.1功能描述·图元编辑是对图元的一系列操作，图元支持图元新建，修改，删除，保存，以及对图元状态的编辑；图元状态也支持新建，修改，删除操作；图元删除操作可能会导致图形中引用了该图元的元素不可用，此操作前必须提示·图元默认提供值为0的图元状态，可继续添加状态，状态值可定义，新建状态下的元素与默认状态相同，可编辑；添加的状态可删除，默认状态不能删除；·图元新建时可选择图元所属的图元库；·图元状态由基本绘图工具绘制而来；·图元数据信息保存到所属图元库的xml文件中，每次新建，修改，删除图元时都需重写图元库的xml文件。·图元保存时图元数据中需记录生成此图元文件的程序版本号。图形元素的数据格式不是永远不变的，图形格式发生变化时，要能根据程序版本号，由独立的图形格式升级程序，自动升级成新版本的图元文件。自动升级工具本期不提供。每个图元应该有一个自己的版本号，初次创建时版本号为1，每次修改图元，其版本号自动加1。3.2.3.2操作流程3.2.4图元特殊功能锚点3.2.4.1功能描述·锚点的意义：在电气图中有很多的电气设备连接图，上面的图元之间要通过连接线连接起来。锚点就是连接线在图元上的附着点。锚点是整个图元共用的，不管图元有多少状态图，但锚点位置和个数都是一致的。下图所示是在图形编辑中一个连接线连接了2个开关。当手车开关移动时，连接线自动跟随。·锚点在图元新建时默认提供上下左右边的中点共4个，锚点可自行调整位置和增删，锚点与图元状态无关。且只能在默认状态（即状态1）下才可编辑锚点；·锚点的编辑需通过新建图元或修改图元功能进入图元编辑窗口才能编辑锚点；3.2.4.2操作流程3.3图形管理功能3.3.1功能描述·图形中分叶面集-页面-图层-元素的概念，一个叶面集包含多个页面，一个页面包含多个图层，图层包含多个元素；·页面是用来在其中绘制各类系统监测图的，图层是给监测图的基本图素（直线、矩形等），图元、图表（棒图、饼图、曲线）、遥测文字、专业工具（母线、连接线）、表格、视频窗口等分层排列显示用的，是元素的容器·图形列表展示时页面集合页面以树的形式展示，树下方提供新建和删除页面功能按钮；图层自成一树，显示的是当前打开页面的图层，树下方提供新建和删除图层按钮，每项之前提供显隐、激活图层按钮；其他操作以右键菜单形式提供；·对于图形所做的各种操作必须在保存之后才生效，才会写入文件，不保存关闭软件所有在上一次保存之后的操作将不做保存；·绘图软件打开时，加载配置工程下的全部页面集和其下的页面，图层，并打开默认打开的页面；·配置的工程名不存在时新建该工程目录·工程目录中包含了其下的页面集文件夹和图片文件夹，页面集文件夹以页面集对象的UID命名，页面集文件夹中包含页面集xml，页面文件夹；页面集xml仍以页面集对象UID命名，其中包含页面集名称，页面等信息，页面信息以页面的UID映射；·图片文件夹中的图片也是以图片UID命名,通过上传功能可以讲本地图片上传到该文件夹下，然后被页面元素引用。·页面文件夹中是以页面UID命名的表示页面的xml文件，其中包含页面名称，图层，元素等信息，图片元素的source属性直接指向图片的相对路劲；·所有文件的路径在2.6中以列出3.3.2图形初始化流程3.3.3页面集管理3.3.3.1功能描述·页面集支持新建，删除，重命名操作·删除页面集时连带其下页面，图层，元素一起删除；3.3.3.2操作流程3.3.4页面管理3.3.4.1功能描述·页面支持新建，删除，重命名，打开操作，页面背景色，大小可调整·删除页面时连带其下图层，元素一起删除；3.3.4.2操作流程3.3.5图层管理3.3.5.1功能描述·图层支持新建，删除，重命名，显隐，激活，Z轴操作·删除页面时连带其下图层，元素一起删除；3.3.5.2操作流程3.3.5元素管理3.3.5.1功能描述·元素支持添加，删除，更改所属图层操作·更改所属图层只限于在当前页面的所有图层中选择·删除操作只支持快捷键（delete）·删除图片元素时腰间删除图片的UID临时存储在一个集合中，再做保存时将image下对应的图片删除，删除后清空集合；·保存时到保存图片环节时，根据图片UID判断image目录下是否已存在该图片，避免重复覆盖写入；·添加的图元以图元UID形式映射到图元库xml文件中的对应图元数据·添加的图片以单独文件形式保存到image目录下，在元素中以图片UID形式映射3.3.5.2操作流程3.4数据关联3.4.1功能描述·并不是所有元素都可以进行数据关联，只有特定的（在程序中实现IDataLink接口的元素）元素可以数据关联；·可以数据关联的元素右键菜单有数据关联选项；·数据关联可以只关联一个数据点，也可以以整台对象的多个参数一次性关联；根据元素是否是对象而定；·每个页面中元素的数据关联的信息以一个单独文件保存，并以uid映射·有按键提供查看当前哪些元素可进行关联而未关联；·关联摄像头对象时，点击可播放视屏；播放窗口使用浏览器弹出（由于该技术尚不熟悉，可能后期实现方式有所改动）·页面可以关联区域树·区域关联（区域告警用）3.4.2操作流程·页面关联所提供区域树为懒加载·数据点的关联与原有的draw操作方式相同3.4.3需要的webservice接口·页面关联获取区域树接口提供的webservice接口名称参数返回值功能描述ser-GetAreaTreeByParentIdPare