You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.28 04:17:49