@linkdesign/screen
Version:
屏组件库,但使用场景又不局限于屏。主要用于BI、大盘和屏
106 lines (81 loc) • 2.52 kB
Markdown
# 请求 Query
- 请求函数
- 请求参数
- 请求频率
- 过滤器
- 完成/失败回调
## 使用场景
- 数据请求
## 演示
<!--before-content-->
## 基础用法
```js
import { Text, Other } from '@linkdesign/screen';
import axios from 'axios';
const { Indicator } = Text;
const { Query } = Other;
const query = {
service: (vars) => axios({
method: 'POST',
url: '//101.132.153.153/park/data/common/query',
data: vars,
}),
variables: {
"path": "/park/changde/statistics",
"pageSize": 5,
"pageNum": 1,
"params": [{
"fieldName": "county",
"operator": "=",
"value": null,
}],
},
};
const filter = () => {
return [{
label: '停车1',
value: 1,
unit: '个',
}, {
label: '停车2',
value: 2,
unit: '万',
}, {
label: '停车3',
value: 3,
unit: '%',
}];
// return get(data, 'data.data.items.[0]', []);
};
class App extends React.Component {
render() {
return (
<Query
component="div"
className="card card1"
query={query.service}
variables={query.variables}
filters={[filter]}
>
<Indicator />
<Indicator />
<Indicator />
</Query>
);
}
}
ReactDOM.render(<App />);
```
<!--after-content-->
### API
| 参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 |
| --------------------------------- | ------------ | ---- | --------------------------------------- | ---------------------------------------------------- | ------------ |
| query | 请求函数 | Y | Function: (variables: object) => Promise<object>; | - | 返回一个promise对象 |
| variables | 指标类型 | N | Object | - | |
| interval | 请求频率 | N | Number | - | |
| filters | 过滤器 | N | Function[] | - | |
| component | 包裹子元素的标签 | N | String | - | |
| onCompleted | 请求完成的回调 | N | Function | - | |
| onError | 请求错误时的回调 | N | Function | - | |
## TODO List
- [ ] ...