组装“设备监控”页面

通过拖拽组件、配置组件，开发高级页面显示设备位置功能。“设备监控”是在地图上显示电梯设备的实时位置，本节我们将采用高级页面实现。

“设备监控”高级页面由地图组件和监控组件（CaseMapControllerWidget.zip）拼装而成，地图widget负责显示地图，监控widget负责根据电梯的经纬度坐标，将其显示在地图上，显示设备的页面构想如下图所示。

“CaseMapControllerWidget”组件已经开发完成，您可以直接在本文中获取组件包，上传到租户账号下直接使用。

图1 设备监控效果

设备监控页面大致开发流程：

图2 设备监控页面开发流程

操作步骤

上传监控组件。
1. 下载监控widget文件包CaseMapControllerWidget.zip到本地。
2. 进入“设备维修管理系统”应用，在应用开发界面左侧列表单击，选择“高级页面 > 组件”，单击“提交新组件”。
3. 单击“请选择源文件(.zip)”，选择下载的“CaseMapControllerWidget.zip”包，填写基本信息（名字“CaseMapControllerWidget”和发行说明），单击“提交”进行上传。
如果提示您已安装此组件，建议参考如何更新自定义组件中操作，下载文档中的组件，在AstroZero中更新此组件。
创建空白高级页面。
1. 单击，进入工作目录。
2. 在“Equipment”目录下，将鼠标放在“Page”上，单击界面上出现的，在弹出菜单中选择“高级页面”。
3. 设置“标签”和“名称”为“monitor”，并选择“流式布局”，单击“添加”。
  图3 添加高级页面
拖拽组件到页面编辑区。
1. 单击左上角，打开组件列表。在“地图”组件下，拖拽一个通用“地图”到页面编辑区，如下图所示。
  图4 地图组件
2. 单击左侧列表的“全部”，然后再单击“自定义”页签，搜索“CaseMapControllerWidget”，将1中上传的自定义组件拖到地图上。
配置自定义组件CaseMapControllerWidget。
1. 将页面向下滑动，再单击页面下部的空白处，右侧显示当前视图组件列表。
2. 单击“CaseMapControllerWidget”组件，会在右侧显示该组件的属性配置面板。
  图5 自定义Widget配置图标
3. 修改属性参数：设置“Flow Prefix”为租户命名空间前缀“HW__”。
  
  请注意“HW__”这里命名空间前缀后有2个下划线。当前组件代码中，调用的服务名称为“queryEquipments”，因此只有在此配置前缀后，才能拼装出正确的名称“HW__queryEquipments”。
  
  图6 设置基础参数
4. 配置桥接器的参数信息。
  在“数据”页签，然后单击“通用AppCube Flow数据桥接器”，选择桥接器如下图所示。
  图7 设置桥接器
  数据参数说明如下。
  - 桥接器实例：调用的桥接器名称，选中“通用AppCube Flow数据桥接器”。
  - 请求方法：调用的方法名，如get（查询）、put（增加）、post（修改）和delete（删除），保持默认。
  - 端点：选中“Flow”。如果选API，表示调用服务编排的API。
  - 前缀：调用服务编排的版本号，此处不用配置。
5. 在“事件”页签，配置事件，使自定义widget与地图widget关联。
  1. 在“事件”页签下，单击“AddMarkersToMap”后的设置图标，选择“新建动作 > 地图 (widget2) > 在地图上添加或清除覆盖物”，单击“确定”。
    图8 配置事件
  2. 再单击“centerAndZoom”后的设置图标，选择“新建动作 > 地图 (widget2) > 修改地图配置数据”，单击“确定”。
    图9 配置地图事件
单击页面上方的，保存页面。
单击页面上方的，发布页面。