如何在自定义Cumulocity应用中使用Out of the Box组件（如Radial Gauge）

当然没问题！Cumulocity早就为这种场景考虑到了——你完全可以在自定义应用里复用和Cockpit一致的开箱即用（Out of the Box）组件，比如你提到的Radial Gauge，这样既能保证界面风格统一，又能节省开发时间。下面是具体的实现步骤：

1. 安装官方UI组件库 #

Cumulocity提供了@c8y/components这个官方组件包，包含了所有Cockpit中使用的OOTB组件。首先在你的自定义应用项目中安装它：

npm install @c8y/components --save

⚠️ 重要提示：一定要确保组件库的版本和你Cumulocity平台的版本保持一致，避免出现兼容性问题。比如你的平台版本是10.21.x，就安装对应版本：

npm install @c8y/components@10.21.x --save

2. 引入并使用Radial Gauge组件 #

假设你的自定义应用是基于Angular构建的（Cumulocity官方推荐的技术栈），具体操作如下：

• 导入组件模块：在你要使用Radial Gauge的Angular模块中，导入RadialGaugeModule：

import { RadialGaugeModule } from '@c8y/components';

@NgModule({
  imports: [
    // ...其他已导入的模块
    RadialGaugeModule
  ]
})
export class YourCustomFeatureModule { }

• 在模板中使用组件：直接在组件模板里添加Radial Gauge标签，并绑定所需的属性：

<c8y-radial-gauge
  [value]="deviceTemperature"
  [min]="0"
  [max]="100"
  [unit]="'°C'"
  [status]="getGaugeStatus(deviceTemperature)"
></c8y-radial-gauge>

• 添加逻辑支持：在组件类中定义数据和状态判断逻辑：

export class YourCustomComponent {
  // 假设这是从设备获取的温度数据
  deviceTemperature = 68;

  getGaugeStatus(temp: number): string {
    if (temp > 80) return 'danger';   // 红色警示状态
    if (temp > 60) return 'warning'; // 黄色警告状态
    return 'success';                // 正常绿色状态
  }
}

3. 确保界面风格和Cockpit完全一致 #

为了让自定义应用的视觉风格和Cockpit无缝统一，还需要做以下设置：

• 引入官方主题样式：在angular.json的styles数组中添加Cumulocity的官方样式文件：

"styles": [
  "node_modules/@c8y/style/main.css",
  // ...你的自定义样式文件（如果有）
]

• 遵循Cumulocity设计规范：尽量使用组件库提供的配套样式类和设计组件（比如按钮、卡片等），避免自定义过多样式，这样整体风格会和Cockpit保持一致。

内容的提问来源于stack exchange，提问作者Katherine Chen