Cumulocity自定义部件配置:能否为多设备配置c8y-property-selector属性?
针对多设备配置c8y-property-selector的实现方案
当然没问题!Cumulocity里的c8y-property-selector完全支持针对多设备来配置部件,我给你一步步拆解怎么实现:
1. 调整部件注册的基础配置
先看你提供的部件注册代码,需要确保配置里允许选择多个目标(设备/组):
在options参数里,除了你已经设置的groupsSelectable: true,还需要加上multiple: true来开启多选支持。修改后的代码片段如下:
c8yComponentsProvider.add({ name: 'iconmap', nameDisplay: gettext('Icon Map'), description: gettext('Displays a map with icons for devices instead of markers'), templateUrl: ':::PLUGIN_PATH:::/views/iconmap.main.html', options: { noDeviceTarget: false, groupsSelectable: true, multiple: true // 新增:开启多选设备/组支持 }, configTemplateUrl: ':::PLUGIN_PATH:::/views/config.html' });
2. 在配置模板中启用多选模式
打开你的配置页面模板config.html,给c8y-property-selector组件添加多选配置,确保它允许用户选择多个设备:
<c8y-property-selector ng-model="config.selectedDevices" options="{ multiple: true }" show-groups="true" placeholder="选择多个设备或组" ></c8y-property-selector>
这里multiple: true是核心配置,选中的设备会以数组形式存储在config.selectedDevices里,方便后续逻辑处理。
3. 在部件主逻辑中处理多设备数据
接下来在部件的主控制器里,你需要遍历选中的设备数组,分别获取每个设备的属性数据并展示。举个简单的例子:
angular.module('yourPluginModule').controller('IconMapController', function($scope, c8yInventory) { $scope.deviceData = []; // 遍历选中的多个设备 angular.forEach($scope.config.selectedDevices, function(device) { // 调用Cumulocity API获取设备详情 c8yInventory.detail(device.id).then(function(deviceDetails) { // 将每个设备的数据存入数组,供模板渲染 $scope.deviceData.push(deviceDetails); }); }); });
关于界面变化
从你提供的截图来看,当前是单设备选择的界面,开启多选后,选择器会允许用户勾选多个设备/组,选中的项会以标签的形式展示在选择框下方,方便用户查看和管理已选目标。
内容的提问来源于stack exchange,提问作者rajmohan
相关产品推荐
相关产品推荐

