使用系统ws订阅报警数据

订阅报警数据

import React from 'react';
import { app, use } from 'xadmin';

// 定义一个简单的React组件
const TestComponent = () => {
 return <a>hello world</a >
}

// 定义一个简单的按钮组件
const TestButton = () => {
const [state, setState] = React.useState('')
// 当前登陆用户信息
const { user } = use('auth.user')
// 当前登陆用户token
const userToken = user?.token
const userName = user?.username

const { onData, subscribe } = use('ws')
// 订阅数据ws推送的返回数据
onData(data => {
   setState(`${data.tableData?.name}:${data.desc}`)
})

React.useEffect(() => {
 const where = {
   "tableDataSetting": [
      { "table": { "id": "sbb1" }, "selectRecord": [{ "id": "bjsb" }] },
     { "table": { "id": "cj" }, "selectRecord": [{ "id": "33" }] },
   ]
}
   /**
    *  订阅数据, 
    *  第一个参数指定订阅数据类型
    *  第二个参数可指定订阅哪些表和记录的报警数据,格式为where所示
   */
   return subscribe('warning', {})
 }, [])

 return (
   <>
     <p>当前用户:{userName}</p >
     <p>{state}</p >
   </>
 )
}

// 定义一个新的widget，注册为'测试按钮'，并添加到组件中
const TestWidget = {
 title: '测试按钮', // 标题
 category: ['通用组件', '自定义组件'], // 分类
 component: TestButton, // 组件
 initLayout: { width: 40, height: 20 }, // 初始化布局
}

// 在dashboardWidgets中注册新的widget
app.use({
 name: 'airiot.test',
 routers: {
   '/app/': {
     path: 'myTest', // 指定路径
     breadcrumbName: '我的测试组件页', // 面包屑名称
     component: TestComponent // 注册组件
   },
 },
 dashboardWidgets: {
   'test.widget': TestWidget // 注册widget
 }
})
订阅报警数据​

订阅报警数据
