2022-04-17

   智慧小区安全防护系统实训——数据可视化报告

                  杜海鑫

1.实验背景

项目背景随着时代的进步与科学技术的快速发展，我们对于智慧化的生活越来越需要，而我们更需要的是安全，安全的重要性不言而喻。智能小区的建设融合了一系列现代化高新技术，是IC卡技术、通信技术、计算机技术经过深度融合与集成之后而形成的一种结果，同时也是社会发展、时代进步、科学技术水平提升环境下的必然产物。智能小区使用多种高科技手段，达到防火、防盗、防煤气泄漏等安全要求，小区本身的安防系统建立采取点、线和面的立体防护，确保做到“防患于未然”。让智能小区里的住户拥有居家安全感。

2.实验目标

智慧小区安全防护系统的可视化展现

3.实验步骤

3.1建一个可视化项目

image.png

新增一个可视化项目

image.png

3.2增加数据源模板

image.png

填写相关数据（1）名称，设置数据源的名称，注意不能是中文，
该名称将作为关键字与数据一起传递到可视化组件页面中解析。比如下图所示，设为“distance”。（2）userId：填写用户 ID；（3）accessKey：填写用户accessKey；该项与上一项均需进入用户中心、“访问权限”页面查看获取。
（4）项目 ID：在 OneNET Studio 中创建的应用项目的 ID，可参考之前实训任务中项目管理的步骤查看获取。

image.png

3.3编辑可视化页面及各个组件

添加本次实训所需的控件：常规图表中的平滑折线图

image.png

3.4设置图表的数据来源

选择“数据绑定方式”为“数据源”，此时“数据源选择”下拉列表为“请选择”状态，点击“管理数据源”按钮，弹出“数据源管理”页面。点击“数据源模板”Tab 页，展示目前所有的数据源模板，可以看到一条在之前步骤中已经创建好的记录（名称为 distance）此时“数据源选择”下拉列表会出现一条可选的记录，形如“distance_XXXX”，代表以“distance”模板生成的记录，平台自动追加后缀加以命名。选择该条记录作为折线图的数据源。

image.png

3.5设置不使用数据过滤器

点击“数据处理结果”按钮，查看弹出的窗口中展示的数据，这些数据就是设备定时上报的属性点形
成的（图例中的 value 对应的值，就是上报的间隔距离值）。

image.png

3.6设置图表的横轴列展示字段名与数据提供字段相匹配

在切换回“样式”属性 Tab 页。展开“数据系列”的节点，修改列字段名为“value”，保持与数据源中提供的数值字段“value”相一致

image.png

3.7预览可视化视图并回到编辑状态迭代优化视图效果

3.8保存视图，完成可视化项

image.png

3.9新增一个数据源模板，填入必要的信息，“名称”项填入“location”，“功能

点”项，从现有设备中选择“地理位置”属性点。

3.10为可视化视图添加地理位置组件编辑前述实训任务中创建的可视化视图页面，选择控件列表中的“地图”、“基础地图”控件放入页面中。

image.png

3.11设置地图控件的数据来源

image.png

3.12增加过滤代码，匹配地图控件的格式要求

修改数据过滤器代码（如下图红框处）来匹配控件格式要求。
将数据过滤器编辑框中，自动生成的过滤器代码全选，删除，对照下图红框部分，输入新的过滤逻辑代码，注意“[”、“{”等括号的配对关系，以及“.”、“,”等间隔符号正确性。编辑完成后点击下方的保存按钮，让过滤器生效。

image.png

再次点击“数据处理结果”按钮，查看弹出的窗口中展示的数据，是否如下图在报文字段上一致。关闭弹窗进入下一步。

image.png

3.13预览并持续编辑可视化视图，保存完成项目

image.png

4.总结

最后一次的实验通过创建项目来实现对数据的可视化可以让我们更好的对数据进行观看与分析，但是由于时间的不足，我们也不能有足够的时间来对可视化图进行更好的改进机会，但是更多的是在这个实验的过程中的乐趣与收获！