reactComponent.js

const columns = [
    {
        title: '等级',
        dataIndex: 'level',
    },
    {
        title: '来源',
        dataIndex: 'source',
    },
    {
        title: '参数',
        dataIndex: 'attr',
    },
    {
        title: '报警值',
        dataIndex: 'value',
    },
    {
        title: '时间',
        dataIndex: 'time',
    }
];

const data = [
    {
        level: '一级',
        source: '自动上报',
        attr: '电压过高',
        value: '245V',
        time: '2021-03-02'
    }
];



export default [
    // {
    //     text: '按钮',
    //     icon: 'icontopologyfont icon-topology-anniu',
    //     name: 'button',
    //     color: '#f50',
    //     data: {
    //         text: '',
    //         autoRect: true,
    //         strokeStyle: '#fff',
    //         rect: {
    //             x: 100,
    //             y: 200,
    //             width: 100,
    //             height: 35
    //         },
    //         hideAnchor: true,
    //         name: 'button',
    //         data: {
    //             // 组件属性配置
    //             props: {
    //                 type: 'primary',
    //                 children: '查询'
    //             },
    //             // 异步请求配置
    //             http: {
    //                 api: '/api/topologies?',
    //                 type: 'get',
    //                 paramsGetStyle: 'subscribe',
    //                 paramsArr: []
    //             },
    //             // 绑定如图表图例id
    //             bind: []
    //         },
    //         events: [
    //             // {
    //             //   type: 'doFn',
    //             //   action: 'Function',
    //             //   value: `let fun = (a) =>  params + a; fun(123); return 1231;  `,
    //             //   params: 123,
    //             //   name: 'onClick'
    //             // }
    //         ]
    //     }
    // },
    {
      name: '属性值',
      icon: 'icontopologyfont icon-topology-comment_lines',
      title: 'title',
      data: {
        rect: {
          width: 200,
          height: 30,
          direction: '空调2'
        },
        name: 'testImg',
      }
    },
    // {
    //     name: '属性值2',
    //     icon: 'icontopologyfont icon-topology-comment_lines',
    //     title: 'title',
    //     data: {
    //       rect: {
    //         width: 120,
    //         height: 23,
    //         direction: '空调2'
    //       },
    //       name: 'flowTest',
    //     }
    //   },
    {
        text: '统计',
        icon: 'icontopologyfont icon-topology-structured_data',
        name: '设备状态统计',
        color: '#f50',
        data: {
            text: '',
            autoRect: true,
            strokeStyle: '#fff',
            rect: {
                x: 100,
                y: 200,
                width: 276,
                height: 168
            },
            hideAnchor: true,
            name: 'reactStatistics',
            data: {
                // 组件属性配置
                props: {
                    columns: [{
                        title: '正常设备',
                        dataIndex: 'normal'
                    },{
                        title: '故障设备',
                        dataIndex: 'malfunction'
                    },{
                        title: '报警设备',
                        dataIndex: 'alert'
                    },{
                        title: '检修设备',
                        dataIndex: 'overhaul'
                    },{
                        title: '停用设备',
                        dataIndex: 'deactivate'
                    },{
                        title: '离线设备',
                        dataIndex: 'offline'
                    }],
                    dataSource: {}
                },
                // 异步请求配置
                http: {
                    api: '/device-service/device/device-status-count',
                    type: 'post',
                    paramsGetStyle: 'subscribe',
                    paramsArr: []
                },
                // 绑定如图表图例id
                bind: []
            }
        }
    },
    {
        text: '表格',
        icon: 'icontopologyfont icon-topology-calculator',
        name: 'table',
        data: {
            strokeStyle: '#fff',
            hideAnchor: true,
            rect: {
                x: 100,
                y: 200,
                width: 600,
                height: 400
            },
            name: 'table',
            data: {
                props: {
                    columns: columns,
                    dataSource: data,
                    bordered: true,
                    pagination: false,
                    size: 'small',
                },
                // 异步请求配置
                http: {
                    api: '/device-extend/device/alarm/_query?',
                    type: 'get',
                    handleResult: 'result.data',
                    paramsGetStyle: 'subscribe',
                    paramsArr: [{ title: 'pageIndex', value: 1 }, { title: 'pageSize', value: 6 }]
                }
            },
            events: [
                {
                    type: 'doFn',
                    action: 'Function',
                    value: `let fun = (a) =>  console.log(params + a); fun(123);`,
                    params: 123,
                    name: 'onClick'
                }
            ]
        }
    }
]