智慧小区安全防护系统实训——数据可视化报告
杨小龙
1.项目背景
随着现代化住宅小区建设的不断发展，智慧社区随之出现。由于城市用地的稀缺，导致住宅密集化、高层化，人口密集度也随之提升，对于人口这就为小区安防系统提出了更高的要求。
2.项目目标
智慧小区安全防护系统的可视化展现；
3.项目步骤
3.1 物联网云平台可视化组件配置运用
步骤 1 创建一个可视化项目：
登入OneNET云平台在首页“ 产品服务 ”中点击“ 数据可视化View ”后，点击“ 立即试用 ”按钮进入。
首先新建一个可视化项目，在弹出的模板选择页面，选择一个 2D 项目模板下的“空白模板”作为本次项目可视化的基础模板，填写位于右侧的项目名称、项目描述后，点击“确定”完成可视化项目创建。（也可以选择具有一定页面效果的模板比如“模板-智慧园区“，后续根据需要删减部分控件。）
步骤 2 增加数据源模板
点击左侧菜单“数据管理”下“数据源模板”子菜单，右侧页面中，点击“创建数据源模板”，预先为界面展示距离的变化图表建立一个数据来源模板。
在展开的配置项中，先设定第一项的“数据类型”为“OneNET Studio”，这时页面会切换为配置从“OneNET Studio”抓取数据所需的必要信息。依次填写带“*”的所有项：
（1）名称，设置数据源的名称，注意不能是中文，该名称将作为关键字与数据一起传递到可视化组件页面中解析。比如下图所示，设为“distance”。
（2）userId：填写用户 ID；
（3）accessKey：填写用户的 accessKey；该项与上一项均需进入用户中心、“访问权限”页面查看获取。
（4）项目 ID：在 OneNET Studio 中创建的应用项目的 ID，可参考之前实训任务中项目管理的步骤查看获取。
（5）设备：点选输入框，等待平台将上述已经填写的 3 项内容作为条件匹配查找设备，并将符合的设备以下拉的方式展示，以本次任务为例，显示了之 前 实 训 环 节 已 经 添 加 入 项 目 的 设 备“controller”，选中该设备。
注：如这里提示获取设备列表失败，则相应检查（2）、（3）、（4）中填写的信息是否正确。
（6）功能点：选择一个设备中可以用于读取的属性功能名作为数据产生点。本例中选择“距离”。
（7）点击“创建”按钮，耐心等待平台返回创建结果。
步骤 3 编辑可视化页面及各个组件：
回到“可视化项目”列表展示页面，点击已创建好可视化项目缩略图下方的“编辑”按钮，进入页面编辑状态，如果是采用已有模板，则需将页面多余的控件加以删除，保留背景等基础效果，如果是空白模板，则直接添加本次实训所需的控件：常规图表中的平滑折线图，如下左图，添加后效果如右图所示。
双击添加的控件，右侧出现对应控件的“样式”属性修改 Tab 页，根据项目看板展示效果所需，自行展开具体的属性列表项，调整各项属性，达到最优显示效果。
步骤 4 设置图表的数据来源：
保持折线图处于选择状态（可再次双击折线图，右侧出现属性修改页），现在切换到“数据”属性 Tab页。选择“数据绑定方式”为“数据源”，此时“数据源选择”下拉列表为“请选择”状态，点击“管理数据源”按钮，弹出“数据源管理”页面。
点击“数据源模板”Tab 页，展示目前所有的数据源模板，可以看到一条在之前步骤中已经创建好的记录（名称为 distance），点击该记录操作列中最右图标：“以此模板创建数据源”。关闭窗口回到视图编辑页面。
此时“数据源选择”下拉列表会出现一条可选的记录，形如“distance_XXXX”，代表以“distance”模板生成的记录，平台自动追加后缀加以命名。选择该条记录作为折线图的数据源。
步骤 5 设置不使用数据过滤器：
点击 “使用数据过滤器”前面的勾选框，去掉勾选，即不使用数据过滤器。
点击“数据处理结果”按钮，查看弹出的窗口中展示的数据，这些数据就是设备定时上报的属性点形成的（图例中的 value 对应的值，就是上报的间隔距离值）。关闭弹出窗口继续下一步。
步骤 6 设置图表的横轴列展示字段名与数据提供字段相匹配：
现在切换回“样式”属性 Tab 页。展开“数据系列”的节点，修改列字段名为“value”，保持与数据源中提供的数值字段“value”相一致。（保存数据系列一即可）
步骤 7 预览可视化视图并回到编辑状态迭代优化视图效果：
编辑视图界面，可以看到折线图已显示出实际的折线数据图表，可以点击右上角“预览”按钮，在全页面状态下查看整个可视化视图的效果。
步骤 8 保存视图，完成可视化项目：
完成视图编辑后，点击顶部的“保存”按钮（编辑状态和预览状态均可），完成项目保存。
3.2 设备地理位置可视化展现
步骤 1 新增一个数据源模板：
参考前述实训任务中数据源模板创建步骤，填入必要的信息，“名称”项填入“location”，“功能点”项，从现有设备中选择“地理位置”属性点。
步骤 2 为可视化视图添加地理位置组件：
编辑前述实训任务中创建的可视化视图页面，选择控件列表中的“地图”、“基础地图”控件放入页面中。调整控件大小并摆放在整个视图的合理位置。
步骤 3 设置地图控件的数据来源：
选中地图控件，右侧属性页切换到“数据”Tab 页。参考前述实训任务中数据源配置的方式，从已有的数据源模板“location”创建出所需的数据源，如下图location_XXXX。
步骤 4 增加过滤代码，匹配地图控件的格式要求：
此时地图控件并不能体现出上报数据的具体位置，需要通过修改数据过滤器代码（如下图红框处）来匹配控件格式要求。
将数据过滤器编辑框中，自动生成的过滤器代码全选，删除，对照下图红框部分，输入新的过滤逻辑代码，注意“[”、“{”等括号的配对关系，以及“.”、“,”等间隔符号正确性。
编辑完成后点击下方的保存按钮，让过滤器生效。
再次点击“数据处理结果”按钮，查看弹出的窗口中展示的数据，是否如下图在报文字段上一致。关闭弹窗进入下一步。
步骤 5 预览并持续编辑可视化视图，保存完成项目：
4.项目总结
在最后一次的项目实验中，利用OneNET云平台的数据可视化展示出了更为直观的数据，但由于美工设计能力不行，只能设计简单展示页面，不过这样的展示会比数据流更易理解。
