---
title: SDM 通用能力接入指南 - 基础 JS 与 Ray & SDM 两种接入方式
summary: SDM 通用能力接入指南，演示基础 JS 与 Ray & SDM 两种接入方式。
questions:
  - 基础 JS 方式如何创建 SmartAlarmAbility 实例并调用 init() 和 getBuiltInAlarmList？
  - SDM 模式下如何在 devices/index.ts 中通过 abilities 选项将 SmartAlarmAbility 注入 SmartDeviceModel？
  - SdmProvider 在 app.tsx 中的作用是什么，为什么子组件无需手动 init？
  - useBuiltInAlarm Hook 返回的 loading、data、getBuiltInAlarmList、setBuiltInAlarmStatus 分别是什么？
  - Ray & SDM 接入方式相比基础 JS 有哪些优势（TS 类型提示、React Hooks 体验）？
  - 如何通过 setBuiltInAlarmStatus 的 disabled 和 ruleIds 参数启用或禁用告警？
  - 页面中如何用 TyList 和 TySwitch 组件展示告警列表并通过 onChange 切换开关状态？
  - AlarmList 类型从 @ray-js/api/lib/cloud/interface 引入，包含哪些关键字段（id、name、enabled）？
  - initPanelEnvironment 的 useDefaultOffline 参数设为 true 时会启用什么默认行为？
  - 该示例以 SmartAlarmAbility 为例演示通用能力接入，其他能力（Support、Storage 等）的接入模式是否相同？
---

# 使用

## 起步

通过以下示例代码片段（以 SmartAlarmAbility 为例），您可以快速了解如何在面板应用开发中通过基础 JS 或 Ray & SDM 接入通用能力：

### 基础用法

以下为基础 JS 的接入示例：

```ts
import { SmartAlarmAbility } from '@ray-js/panel-sdk';

// 创建一个 alarm 实例
const Alarm = new SmartAlarmAbility().init();

// 调用 AlarmModel 的功能
Alarm.getBuiltInAlarmList(params)
  .then(result => {
    // 处理返回的结果
  })
  .catch(error => {
    // 处理错误情况
  });
```

### Ray & SDM

以下为 Ray 及 SDM 的接入示例，通过 SDM 接入，您可以更好地享受 TS 类型提示及搭配 React Hooks 带来的开发体验：

**src/devices/index.ts**

> 生成 sensor 传感器智能设备模型，并内置告警能力

```ts
import { SmartDeviceModel, SmartAlarmAbility } from '@ray-js/panel-sdk';

const options = {
  abilities: [new SmartAlarmAbility()],
};

const devices = {
  sensor: new SmartDeviceModel<SmartDeviceSchema, { alarm: SmartAlarmAbility }>(options)
};
```

**src/app.tsx**

> 通过 SdmProvider 接入 React 体系

```tsx
import React from 'react';
import 'ray';
import '@/i18n';
import { kit, SdmProvider } from '@ray-js/panel-sdk';
import { devices } from '@/devices';

const { initPanelEnvironment } = kit;

interface Props {
  children: React.ReactNode;
}

initPanelEnvironment({ useDefaultOffline: true });

export default class App extends React.Component<Props> {
  onLaunch() {
    console.info('=== App onLaunch');
  }

  render() {
    return (
      <SdmProvider value={devices.sensor}>{this.props.children}</SdmProvider>
    );
  }
}
```

**src/pages/home.tsx**

> 拉取告警列表，并通过 TyList 展示

```tsx
import React from 'react';
import { View } from '@ray-js/ray';
import { useBuiltInAlarm } from '@ray-js/panel-sdk';
import { AlarmList } from '@ray-js/api/lib/cloud/interface';
import TyList from '@ray-js/components-ty-cell';
import TySwitch from '@ray-js/components-ty-switch';

function PageSdmAlarm() {
  const { loading, data, getBuiltInAlarmList, setBuiltInAlarmStatus } = useBuiltInAlarm();

  React.useEffect(() => {
    getBuiltInAlarmList();
  }, []);

  const handleValueChange = React.useCallback(
    (item: AlarmList) => (value: boolean) => {
      setBuiltInAlarmStatus({ disabled: !value, ruleIds: item.id });
    },
    []
  );

  const rowKey = React.useCallback((item: AlarmList) => item.id, []);

  console.log('=== rerender builtInAlarm', data, loading);
  return (
    <View>
      <TyList<AlarmList>
        dataSource={data}
        renderItem={item => (
          <TyList.Item
            key={item.id}
            title={item.name}
            content={<TySwitch checked={item.enabled} onChange={handleValueChange(item)} />}
          />
        )}
        rowKey={rowKey}
      />
    </View>
  );
}
```