使用
起步
通过以下示例代码片段(以 SmartAlarmAbility 为例),您可以快速了解如何在面板应用开发中通过基础 JS 或 Ray & SDM 接入通用能力:
基础用法
以下为基础 JS 的接入示例:
import { SmartAlarmAbility } from '@ray-js/panel-sdk';
// 创建一个 alarm 实例
const Alarm = new SmartAlarmAbility().init();
// 调用 AlarmModel 的功能
Alarm.getBuiltInAlarmList(params)
.then(result => {
// 处理返回的结果
})
.catch(error => {
// 处理错误情况
});
👉 立即免费领取开发资源,体验涂鸦 MiniApp 小程序开发。
Ray & SDM
以下为 Ray 及 SDM 的接入示例,通过 SDM 接入,您可以更好地享受 TS 类型提示及搭配 React Hooks 带来的开发体验:
src/devices/index.ts
生成 sensor 传感器智能设备模型,并内置告警能力
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 体系
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 展示
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>
);
}
👉 立即免费领取开发资源,体验涂鸦 MiniApp 小程序开发。