aiit_react_sdk v1.0.4
aiit_sdk
https://www.npmjs.com/package/aiit_sdk
ChangeButton API
参数 | 说明 | 类型 |
---|---|---|
startText | 点击前的 button 参数 | string |
endText | 点击后的 button 参数 | string |
AlarmModel
参数 | 说明 | 类型 |
---|---|---|
alarmStatus | 任务状态 0 未设置 1 已设置 | string |
owner | 任务类型 参数 | string |
taskName | 任务名称 参数 | string |
AlarmUsrListUrl | 报警列表用户接口 ip | string |
AlarmMangeUrl | 报警任务相关功能 ip | string |
onClose | 关闭弹窗 事件 | callback |
PageTable
参数 | 说明 | 类型 |
---|---|---|
columns | 表格列的配置描述 | array |
dataSource | 数据数组 | array |
total | 总共的行数 | int |
showSizeChanger | 是否可以改变页面大小 pageSize | Boolean |
onShowSizeChange | 页面大小改变的回调 | function |
onChange | 页面改变的回调 | function |
VirtualLayer
参数 | 说明 | 类型 |
---|---|---|
returnData | 选择完成后,返回的数据 | object |
setReturnData | 和 returnData 一起作为 useState 的一对 hooks | function |
store | 确定是数据源还是存储源,false 为存储源,ture 为数据源,默认为 false | Boolean |
showSizeChanger | 是否可以改变页面大小 pageSize | Boolean |
baseApi | api 生成工具的 api,默认为 api 生成工具的正式服 api | string |
baseLayer | 虚拟层的 api,默认为虚拟层的正式服 api | string |
token | token 参数 | string |
returnData的返回格式为{
"db_name": 表名,
"url": 表名相应的api,
"databaseId": 数据库id,
"databaseName": 数据库名字,
"databaseType": 数据库类型
}
Login
登录界面
参数 | 说明 | 类型 |
---|---|---|
token | token 参数 | string |
setToken | 将 token 存入 | func |
loginUrl | 登录参数传递的 url 接口 | string |
redirectUrl | 登录成功后跳转的界面的 url | string |
例子
const [returnData, setReturnData] = useState({});
########################################
<BrowserRouter>
<Routes>
<Route
path="/"
element={<Login redirectUrl="/bar" setToken={setToken} loginUrl="127.0.0.1:8000/login" token={token}/> }
/>
<Route path="/bar" element={<div>1235</div>} />
</Routes>
</BrowserRouter>
ForceNetworkGraph
基于 d3 的力导向图
参数 | 说明 | 类型 |
---|---|---|
nameNeed(必选) | 力导向图名字 | string |
pointOnclick(可选) | 点击节点的回调函数 | func |
width (必选) | 画布宽,支持 px/vw/vh | string |
height (必选) | 画布高,支持 px/vw/vh | string |
nodeEdgeSource (必选) | 传入力导向图的参数 | Object |
style (可选) | 可以写"dark"或"light"表示在不同背景下的效果 | string |
scale (可选) | 初始缩放比例默认为 1 | string |
position (可选) | 初始位置 | Object |
nodeEdgeSource 参数 | 参数 | 说明 | 类型 | | -------------------- | -------------------: | -----: | | nodes_labels(必选) | 代表节点列表 | array | | relation_types (必选) | 代表关系边列表 | array |
nodes_labels 参数 | 参数 | 说明 | 类型 | | -------------------- | -------------------: | -----: | | name(必选) | 节点名称 | string | | index (必选) | 节点 index | number | | propery (必选) | 节点属性 | array | | color (可选) | 节点颜色 | string | | radius (可选) | 节点大小半径 | number | | fontSize (可选) | 字体大小 | number |
relation_types 参数 | 参数 | 说明 | 类型 | | -------------------- | -------------------: | -----: | | source(必选) | 起始节点的 index | number | | target (必选) | 目标节点 index | number | | value (必选) | 关系边的长 | number | | color (可选) | 关系边的颜色 | string | | relation (必选) | 关系的名称标注 | string | | fontSize (可选) | 字体大小 | number |
// nodeEdgeSource格式如下
const nodeEdgeA = {
nodes_labels: [
{
name: "Patent_type",
index: 0,
propery: ["name"],
},
{
name: "国家",
index: 1,
propery: ["专利名", "发明人", "瑞", "专业"],
// color: "#a0d911",
},
{
name: "人物",
index: 2,
propery: ["专利名", "发明人", "瑞", "专业"],
color: "#87e8de",
radius: 20,
},
{
name: "Patent_temp",
index: 3,
propery: [
"优先权",
"代理人",
"国际申请",
"分类号",
"摘要",
"专利类型",
"申请日",
"专利申请号",
"专利代理机构",
"进入国家阶段日期",
"主分类号",
"公开\\(公告\\)号",
"国际公布",
"name",
"公开(公告)日",
"分案原申请号",
"发明(设计)人",
"地址",
"申请(专利权)人",
],
color: "#87e8de",
},
],
relation_types: [
{
source: 1,
target: 0,
value: 1.3,
relation: "is in type ",
color: "red",
},
{
source: 2,
target: 3,
value: 1.3,
relation: "是公民",
},
{
source: 3,
target: 2,
value: 1.3,
relation: "miumiu",
},
],
};
const clickPoint = (element, e, d) => {
console.log(element, d, e);
d3.select(element).attr("fill", "blue");
};
return(
<div>
<ForceNetworkGraph
nodeEdgeSource={nodeEdgeA}
nameNeed="TupuA"
pointOnclick={clickPoint}
width="50vw"
height="40vh"
scale="1.2"
position={{ top: -100, bottom: 10, left: -100, right: 10 }}
/>
</div>
)