目 录
一、项目说明...
1.1使用技术...
1.2开发工具...
1.3架构设计...
1.4编码结构...
1.5核心类体结构...
二、仪器数据规范...
2.1 系统模块设计...
2.2 系统架构设计...
3.1用户管理...
3.2图表模块...
3.3地图设计...
3.4综合分析...
3.5浸润线设计...
3.6报警设计...
3.7 3D坝区...
3.8系统配置...
3.9日志管理...
3.10天气设计...
3.11主界面...
4.1数据库WCF服务...
4.2推送服务...
一、项目说明
系统是一款B/S架构的多工程浏览、查询与管理系统。它允许用户在已经接入互联网的计算机的浏览器中登录到监测服务器上，查看监测现场信息（监测区域地图、监测点分布列表、监测工程信息、3D效果）、监测位移变化趋势、水位数据、雨量数据、浸润线等等其它不同的监测数据图表及变化趋势，可设置报警阈值与报警方式等，浏览报警日志与操作日志以及生成报表等。
1.1使用技术
Silverlight 5.1、MVVM、XNA、Net4.0、C#3.0、WCF
1.2开发工具
VS2010、Blend5 / 4、SketchUp、FireWorks
1.3架构设计
![clip_image002[8]](http://images2015.cnblogs.com/blog/289667/201610/289667-20161010163732180-316003780.gif "clip_image002[8]")
图1-1 架构图
系统采用典型的MVVM设计模式来进行，将前端显示与后端逻辑分离。前端的使用XAML标记语言进行并利用Microsoft Expression Blend进行设计，即分层模型中的视图层，后端逻辑则混合了模型层、视图模型层、WCF数据服务层。视图层和视图模型层则通过数据绑定的方式完全将两者联系了起来。
1.4编码结构
![clip_image004[9]](http://images2015.cnblogs.com/blog/289667/201610/289667-20161010163741071-1098113735.gif "clip_image004[9]")
图1-2 系统项目设计
表：项目设计
|
项目名称 |
描述 |
|
MTSys |
Silverlight主程序 |
|
SLVisifireCharts |
基于Visifire Chart开发的图表控件 |
|
MTSys.Common.SL |
Silverlight项目调用的公用类库 |
|
MTSys.Tools |
Silverlight的自定义控件（重用性较高的控件） |
|
Silverlight3dAppContent |
3D项目 |
|
MTSys.Web |
Web站点，包含WCF和手机端 |
|
MTSys.Web.Log |
日志 |
|
MTSys.Common |
Wap+Web项目访问的公用类库 |
1.5核心类体结构
![clip_image006[6]](http://images2015.cnblogs.com/blog/289667/201610/289667-20161010163747086-1771579539.jpg "clip_image006[6]")
图1-3 类体结构图
二、仪器数据规范
|
仪器类型 |
数据类型 |
单位 |
备注 |
|
GPS |
X方向偏移值 |
MM |
|
|
Y方向偏移值 |
MM |
||
|
垂直方向偏移值 |
MM |
||
|
水平方向偏移值 及 角度 |
MM |
由x和y计算得来 |
|
|
浸润线 |
降深 |
M |
孔口高程减去水位值 |
|
库水位与干滩 |
库水位 |
M |
|
|
干滩 |
M |
||
|
内部位移 |
X方向偏移值 |
MM |
0.02-0.05 |
|
Y方向偏移值 |
MM |
||
|
降雨量 |
雨量 |
MM |
累加值 |
|
渗流量 |
流量 |
M3/S |
|
|
流速 |
M3/S |
||
|
裂缝计 |
裂缝程度 |
M |
2.1 系统模块设计
![clip_image008[7]](http://images2015.cnblogs.com/blog/289667/201610/289667-20161010163748602-982148726.gif "clip_image008[7]")
图2-1 系统功能设计
2.2 系统架构设计
系统采用典型的MVVM设计模式来进行，将前端显示与后端逻辑分离。前端的使用XAML标记语言进行并利用Microsoft Expression Blend进行设计，即分层模型中的视图层，后端逻辑则混合了模型层、视图模型层、WCF数据服务层。视图层和视图模型层则通过数据绑定的方式完全将两者联系了起来。
|
系统层 |
功能项 |
描述 |
备注 |
|
数据模型层 |
属性定义 |
提供与数据绑定相关的属性的定义及通知机制、错误机制、显示控制相关的实现 |
以特性的方式提供相应的机制 |
|
通知机制 |
提供属性改变时的通知机制，可以在属性改变时添加其他的辅助操作 |
实现INotifyPropertyChanged接口 |
|
|
WCF数据服务层 |
推送服务 |
提供以数据为中心的服务实现，在服务数据改变时主动将数据推送到相应的客户端 |
实时数据得提供实现了这种方式 |
|
经典服务 |
提供典型的从数据库中提取数据的方式 |
经典的SOA服务 |
|
|
视图模型层 |
对象实例化 |
将多个模型以视图需求为依据而进行数据的组织以提供子对象的实例化 |
|
|
命令驱动 |
提供与UI交互的子系统，并通过驱动与数据服务层进行通讯 |
调用WCF服务 |
|
|
视图模型层 |
数据绑定 |
提供各种视图模型层的对象与UI控件的数据服务的绑定 |
|
|
状态控制 |
提供辅助的方式实现对UI逻辑的动画效果的控制 |
提供动画的控制 |
Ø 模型层的设计：
以数据为中心是模型层设计的基本原则，在模型层完全使用了面向对象的概念，对每个对象使用独立的数据属性来描述，即对对象特征的现实描述，同时尽量避免方法的使用，这些模型层分立于各个功能模块的而有所不同，在系统中的模型层包括以下几个大的模型：
|
模块名 |
主要功能描述 |
备注 |
|
报警 |
提供与报警信息相关的模型设计，包括联系人信息、报警分类、报警信息等模型 |
|
|
综合分析 |
包括仪表盘信息、报警值信息等模型 |
|
|
系统设置 |
包括站点信息、地图配置、基本设置等模型 |
|
|
独立存储 |
包括与坐标轴设置、相关的读取及写入操作等模型 |
|
|
3D模型 |
包括摄像机信息、设备信息、坝体信息等模型 |
|
|
用户管理 |
包括用户、角色、权限、注册等模型 |
|
|
设备类型 |
包括站点数据、数据类型等模型 |
每种类型站点均提供相应的数据模型[目前设计到]7种类型的站点 |
|
其他模型 |
包括坐标轴、时间轴、工程信息、登陆信息、动态菜单、统计数据等模型 |
Ø 视图模型层
该层通过将模型层定义的模型与WCF服务层进行联系而向视图层提供数据服务，该层主要的功能是准备视图层所需要的各种呈现数据，提供一种相对耦合性较强的设计来提供各种服务。
|
模块名 |
主要功能描述 |
备注 |
|
报警 |
提供报警设置页面数据、报警联系等功能 |
|
|
综合分析 |
提供仪表盘呈现的数据服务及仪器列表数据等功能 |
|
|
系统设置 |
提供站点设置、地图设置、显示设置等功能相关的数据服务 |
|
|
日志管理 |
提供日志浏览、修改日志等功能 |
|
|
3D模型 |
提供与模型相关的数据服务，如模型对象、坝体对象及键盘和鼠标事件等的处理 |
目前仅提供固定模型的显示 |
|
用户管理 |
包括分配工程与用户和角色的关联及用户注册等功能 |
|
|
主页面管理 |
提供初始化的页面数据、菜单数据及主框架页面的数据 |
|
|
基站点数据 |
提供所有站点相关的数据准备及相应的基本操作、也包括提供坐标轴设置等应用 |
是所有站点视图模型的基类，以泛型的方式实现以提供给实体站点继承 |
|
子站点 |
包括与本站点类型紧密耦合的数据服务，主要是如何提供相应的WCF服务来取得数据 |
3.1用户管理
用户管理需要存储一些关键的信息，这些信息存储在相应的数据库表中，这些表包括用户表、权限表、角色表、工程信息表以及对应的关联表。具体的表结构设计如图3-1所示。其E-R图如3-2所示，在每个实体集都加入一个关系表负责联系实体。
![clip_image010[6]](http://images2015.cnblogs.com/blog/289667/201610/289667-20161010163749821-134409051.jpg "clip_image010[6]")
图3-1 用户管理数据库表结构
![clip_image012[6]](http://images2015.cnblogs.com/blog/289667/201610/289667-20161010163750946-2069879964.gif "clip_image012[6]")
图3-2 用户管理实体-关系图
表3.1：权限表数据表
|
标识 |
名称 |
说明 |
|
1 |
mapSet |
地图设置 |
|
2 |
report |
报表操作 |
|
3 |
security |
安全管理 |
|
4 |
alarm |
报警设置 |
|
5 |
journal |
日志管理 |
|
6 |
other |
其他设置 |
|
7 |
super |
超级权限 |
表3.2 角色表数据
|
标识 |
名称 |
说明 |
|
1 |
administrator |
超级用户 |
|
2 |
manager |
管理员 |
|
3 |
guest |
普通用户 |
目前大致的角色分配如下所示：
![clip_image014[6]](http://images2015.cnblogs.com/blog/289667/201610/289667-20161010163751977-2072813555.gif "clip_image014[6]")
图3-3 角色-权限分配
3.1.1 系统登陆流程设计
用户登录的主要思想是保证某个时刻只有一个活动用户，如果有相同的用户登录时系统会将另一个同名用户踢出系统，继而新的用户将可以继续使用系统。其整个流程如图所示:
![clip_image016[6]](http://images2015.cnblogs.com/blog/289667/201610/289667-20161010163753274-1873112990.gif "clip_image016[6]")
图3-4 系统登录流程
3.1.2 安全管理模块
![clip_image018[6]](http://images2015.cnblogs.com/blog/289667/201610/289667-20161010163754633-584826249.gif "clip_image018[6]")
图3-5 安全管理模块
安全管理模块是系统正常运行的关键，同时也可以对系统的访问进行控制，防止非法用户对整个系统进行不合理的更改和操作。整个系统的安全管理主要包括三个方面的模块：用户登陆、用户管理、认证管理。这个三个模块分别在系统初始化、运行中进行处理。
3.1.3. 安全配置模块
安全配置包括项目管理和安全管理两部分，其中项目管理负责对项目相关的用户、角色、工程进行关联的配置和访问控制，而安全管理则是配置角色及相应的权限。
表：项目管理
|
功能项名称 |
主要功能描述 |
备注 |
|
新建用户 |
添加一个新的用户并关联工程和角色 |
初始化一个管理项 |
|
删除用户 |
删除用户及所管理的所有的工程 |
|
|
更改密码 |
可以修改旧的密码 |
影响所有的工程 |
|
添加关联 |
配置用户与其他的工程的关联及角色设置 |
|
|
删除关联 |
删除当前的一个关联 |
表：安全关联
|
功能项名称 |
主要功能描述 |
备注 |
|
新建角色 |
添加一个新的角色 |
|
|
删除角色 |
删除系统中存在的某个角色 |
删除角色会删除所有的该角色相关的项目关联表 |
|
分配权限 |
对某个角色的权限进行关联和删除关联操作 |
3.1.4认证管理模块
认证管理负责系统中各功能模块的权限认证管理，对于页面的某个模块的所需要的特殊权限进行管理，当某个模块需要特定的权限时，可以通过认证管理进行权限的匹配而决定是否有相应的操作权限，其流程如图所示：
![clip_image020[6]](http://images2015.cnblogs.com/blog/289667/201610/289667-20161010163756102-1984669941.gif "clip_image020[6]")
图3-6 认证模型
表：认证功能描述
|
功能项名称 |
主要功能描述 |
备注 |
|
认证上下文 |
负责保存当前登录用户的角色权限 |
会将数据库中的权限列表转换成系统中的字节列表 |
|
权限验证 |
对系统中需要的某个特定的权限进行验证并返回验证的结果 |
3.2图表模块
图表的使用了开源项目：VisifireChart，由于项目在2010年进入商业化版本。所以本项目使用了最新一个开源版本，并在此基础上进行二次开发。此开源版本有许多不成熟的地方，为了适应本项目的需要，对许多的地方做了一系列的改进，具体体现在以下几个方面：
1、增加了时间轴的设置，改进后的坐标轴可以使用时间的自定义实现；
2、改进选中点的提示显示类别，提示点可以显示例外数据；
3、对多数据列的显示进行的控制，可以显示进行数据列图的显示控制；
4、可控制的坐标轴设置，动态设置坐标轴的范围并持久化；
5、坐标轴的报警范围动态改变，在图表显示阶段性的报警级别；
6、对断点数据的可视化支持；
7、多个数据列的提示的集中化；
8、双纵坐标轴的支持。
对每类仪器提供该类型下的图表的实现，目前系统实现了七种类型的实现，这些类型均通过改进的VisifireChart控件实现。下图是给出了图表功能分配：
|
模块名 |
主要功能模块 |
备注 |
|
GPS位移 |
实时曲线、历史曲线、位移趋势、星空图、数据表 |
|
|
内部位移 |
实时曲线、历史曲线、数据表 |
|
|
浸润线 |
实时曲线、历史曲线、剖面图、数据表 |
|
|
降雨量 |
实时曲线、历史曲线、数据表 |
|
|
裂缝计 |
实时曲线、历史曲线、数据表 |
|
|
库水位和干滩 |
实时曲线、历史曲线、数据表 |
|
|
渗流量 |
实时曲线、历史曲线、数据表 |
l 实时图表
通过两种方式来实现实时数据的获取，一种是通过推送服务实时从后端软件取得设备发送的数据，第二种方式则是通过定时器定时从数据库中获取实时的数据，需要通过定时器的时间间隔来保证实时性。在获取到新的数据后将同时显示在实时图表上。系统同时提供对该类型站点的变幻功能，可以更改显示的站点从而提供多个站点的实时数据的监测。
l 历史图表
历史图表提供同样也提供多个站点的数据查看功能，这儿主要提供三个功能的的实现：一是按时间类型进行数据的统计[包括小时、天、月、年]的查询以及所有数据的查询，另一种方式提供统计数据的查询，在查询数据是同时提供该查询下的最大值、最小值和平均值的呈现；第三个功能则是提供数据的报表功能，包括数据列表和到处数据图表功能。
l 位移趋势
通过对表面位移的计算得到相应的位移及高程值的变化情况，其相应的位移计算公式使用了典型的距离公式，即：
![clip_image022[6]](http://images2015.cnblogs.com/blog/289667/201610/289667-20161010163757039-989779636.gif "clip_image022[6]"){kind=small}
对每个点的位移的方向也以仪表盘方式提供给用户，这些是通过当前选中的点的坐标与第一个点的坐标的比较角度来得到相应的角度值并在仪表盘上以指针的方式显示给用户。
l 星空图
星空仅仅提供定时器的方式从数据库中获取当前可视卫星的数据状态的方式来提供诸如L1、L2信噪比并通过颜色的区分来标示卫星当前的运行状态，提供给客户对当前坐标的是否可信赖的说明，同时提供柱状图的方式来提供给客户一个数值上的直观显示。
3.3地图设计
![clip_image024[6]](http://images2015.cnblogs.com/blog/289667/201610/289667-20161010163758289-2068255549.gif "clip_image024[6]")
图3-7 地图组成
表：命名空间：MTSys.Tools.Map
|
文件 |
作用 |
备注 |
|
MapDropList.cs |
按钮列表控件 |
|
|
MapMain.xaml(.cs) |
地图主控件 |
|
|
MapMark.xaml(.cs) |
锚点 |
|
|
MapTools.xaml(.cs) |
地图工具栏 |
|
|
MarkClickEventArgs.cs |
锚点点击事件的数据 |
|
|
MoveButtonClickEventArgs.cs |
平移事件的数据 |
|
|
RightMenuForMap.cs |
地图上的右键菜单 |
|
|
ZoomChangedEventArgs.cs |
缩放事件的数据 |
3.4综合分析
l 数据列表
针对专业用户开发的功能，目的是用户打开时可以一眼看到所有仪器的运行状况，包括实时的数据及报警情况。
l 综合图表
设计采用了自定义的控件来实现，整个界面对每一类设备动态生成一个相应的仪表盘，每个仪表盘根据类型设备的分量数设置相应的控件数目。其中每个分量的仪表盘根据相应的类别取得当前时刻的最大值并将相应的报警级别标示在刻度盘上，并根据报警级别设置变化的颜色，可以直观地看到该类设备是否异常。也可以通过仪表盘导航到相应的曲线图看到该站点的详细的数据呈现。其流程如下：
![clip_image026[6]](http://images2015.cnblogs.com/blog/289667/201610/289667-20161010163759493-880242776.gif "clip_image026[6]")
图3-8 仪表盘实现原理图
3.5浸润线设计
![clip_image028[6]](http://images2015.cnblogs.com/blog/289667/201610/289667-20161010163800868-1189114967.jpg "clip_image028[6]")
图3-9 浸润线剖面设计
浸润线剖面通过将坝体的横断面作为一个平面来显示相应的渗压计的工作状态，这个功能主要体现在浸润线的绘制上，通过将仪器及水位高程通过图示的方式直观地呈现给用户，可以明显看到目前坝体的工作状态。在这儿坝体及设备需要通过后端软件将相应的信息配置在文件中。其相应流程如图所示：
![clip_image030[6]](http://images2015.cnblogs.com/blog/289667/201610/289667-20161010163802243-192651811.gif "clip_image030[6]")
图3-10 浸润线流程图
3.6报警设计
Ø 流程
![clip_image032[6]](http://images2015.cnblogs.com/blog/289667/201610/289667-20161010163803618-1962050603.gif "clip_image032[6]")
图3-11 报警流程图
Ø 报警值获取与设置
![clip_image034[6]](http://images2015.cnblogs.com/blog/289667/201610/289667-20161010163805555-671226476.gif "clip_image034[6]")
图3-12 设置报警值流程图
3.7 3D坝区
![clip_image036[6]](http://images2015.cnblogs.com/blog/289667/201610/289667-20161010163807164-219509939.jpg "clip_image036[6]")
图3-13 3D实际效果
使用3d建模工具（目前使用Sketchup）制作3D模型，导出为fbx格式，嵌入到解决方案中。
通过使用Silverlight5固有的3D模型框架来进行相应的3D模型的呈现，使用XNA游戏开发的类库进行3D模型的呈现和控制，其中3D模型则使用了第三方的软件来进行相应模型的建模，通过Silverlight5 3D模板将模型导入到内容库中，然后通过DrawingSurface进行模型的绘图和2D控制。
由于XNA的绘图操作与传统的绘图操作有较大的区别，他采用帧绘制，所以在绘图操作中需要在实时进行实时性的控制，在绘图方法中需要以帧方式进行思考，在本系统设计中考虑到了这个方面的需求，在进行模型的控制时并没有采用对摄像机旋转或平移的方式，而是使用了对3D模型依赖的绘图面[2D]面进行平移及缩放的功能等，提高了控制的效率。
目前提供的3D模型的操作包括键盘的平移，鼠标的缩放等功能。
![clip_image038[6]](http://images2015.cnblogs.com/blog/289667/201610/289667-20161010163808461-880489891.gif "clip_image038[6]"){kind=small}
3.8系统配置
发布系统中的配置功能与后端桌面软件不同，和发布系统的定位一样，都是针对普通的用户，主要用户可能配置较多、和发布系统耦合性较高的功能。现有的配置项有：地图配置、坝区信息配置、显示设置。
l 地图配置
在MTSys.Tools.Map.MapMain中把属性IsAdmin=true，即可启用地图控件的配置功能，包括上传底图、设置比例尺、移动仪器在地图上的位置、以及保存功能。
l 坝区信息配置
可配置三项：坝区名称、坝区所在区域、坝区简介。
坝区名称显示在主界面的左上角；坝区所在区域用于主界面右上角天气显示的依据，因使用的国内有限制的api，所有经常会获取不到或获取信息不完整的问题，系统已给出相应提示。（流程详见 3.10 天气设计）
l 显示设置
可设置默认的首页及语言。
3.9日志管理
![clip_image040[6]](http://images2015.cnblogs.com/blog/289667/201610/289667-20161010163810133-196095531.gif "clip_image040[6]")
图3-14 日志数据获取流程图
l 系统日志
用户管理、登陆/登出、系统配置都会调用到wcf把记录写入到数据库中。
l 报警日志
后端软件报警的时候会向数据库中添加记录，因数据量可能较大，会有10秒的延迟写入时间。
3.10天气设计
![clip_image042[6]](http://images2015.cnblogs.com/blog/289667/201610/289667-20161010163812102-727087574.gif "clip_image042[6]")
图3-15 天气信息获取流程图
备注：天气的web服务api详见官方的《天气预报WEB服务接口说明》
3.11主界面
Ø 导航
![clip_image044[6]](http://images2015.cnblogs.com/blog/289667/201610/289667-20161010163813321-480257766.gif "clip_image044[6]")
Ø 保存提示
![clip_image046[6]](http://images2015.cnblogs.com/blog/289667/201610/289667-20161010163815414-2007641653.gif "clip_image046[6]")
图3-16 保存提示流程图
系统提供两个分立的WCF服务，一个是提供数据库服务的WCF服务[DBMangerServer];另一个是提供实时数据的推送数据WCF服务[PollingServer]。
4.1数据库WCF服务
该服务除了提供向数据库取得相应数据的服务之外，还提供了诸如文件操作的服务[主要表现在报表服务、浸润线坝体数据服务等]。对每一类站点均提供相应的操作。这些操作主要包括：
|
模块名 |
主要功能描述 |
备注 |
|
获取实时数据 |
提供从数据库过滤表中提取数据的功能,每类仪器一个方法 |
|
|
获取历史数据 |
提供从数据库过滤表中的以时间类型的功能 |
|
|
文件服务 |
提供文件的存取和写入的功能 |
![clip_image048[6]](http://images2015.cnblogs.com/blog/289667/201610/289667-20161010163816571-1943878877.gif "clip_image048[6]")
图 4-1 数据库WCF服务
4.2推送服务
该服务主要提供三个方面的内容：登陆服务（只允许一个用户在线，通过该服务将已在线的同名用户下线）；报警服务（将后端的得到的报警信息推动到客户端）；数据服务（将从设备接收到的数据从后端推送到前端并呈现给用户）。
![clip_image050[6]](http://images2015.cnblogs.com/blog/289667/201610/289667-20161010163817727-648263489.gif "clip_image050[6]")
图4-2 推送服务流程图
推送服务采用典型的长连接机制来实现，通过WCF双通道服务来达到与两种不同客户端的连接，这两种客户端包括网页客户端和传统的Winform客户端，网页客户端使用Silverlight的DuplexPollingService服务实现长连接服务，而客户端则通过双通道与推送服务连接。他们使用了同一个推送的服务端。为了存储客户端的连接信息，不能使用传统的WCF机制。鉴于推送服务的特殊性要求，在实现时使用了WCF的单实例对象来提供这样的服务。其传输示意如图所示：
![clip_image052[6]](http://images2015.cnblogs.com/blog/289667/201610/289667-20161010163818805-1911912867.gif "clip_image052[6]")
图4-3 推送服务传输过程
推送服务的传输过程解析：
1) 客户端通过网页登陆系统；
2) 推送服务保存客户端的会话连接列表，这样就接可以取得一个全局的接收（如报警信息、客户登陆信息等）；
3) 网页客户端注册相应类型设备的数据接收事件，然后等待相应类型数据的接收处理；
4) 数据发送客户端同样在仪器设备数据到达时根据类型生成相应的数据类型[包括报警等]并组织相应的数据发送到推送服务；
5) 推送服务根据客户端的注册分别将相应的数据类型有选择的发送到网页客户端，如果是报警和登录信息则会发送到所有连接的客户端。
6) 重复此过程进行数据的传输。