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>
  )