feat(compositeCompLibrary): 实现复合组件库页面功能
- 添加Tabs组件，实现我的复合组件和公开复合组件切换 - 新增CompGrid组件，用于展示复合组件列表 - 新增CompNode组件，用于展示单个复合组件的详细信息 - 添加临时数据文件tempData，用于模拟复合组件数据master
parent
5c5c2d918c
commit
a8224cf4f7
@ -0,0 +1,52 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import styles from './style/compGrid.module.less';
|
||||
import CompNode from './compNode';
|
||||
import { complexData } from './test/tempData';
|
||||
import { Input, Grid } from '@arco-design/web-react';
|
||||
|
||||
const InputSearch = Input.Search;
|
||||
const Row = Grid.Row;
|
||||
const Col = Grid.Col;
|
||||
|
||||
interface CompGridProps {
|
||||
componentType: 'myComplex' | 'publicComplex';
|
||||
}
|
||||
|
||||
const CompGrid: React.FC<CompGridProps> = ({ componentType }) => {
|
||||
const [currentComponentType, setCurrentComponentType] = useState('');
|
||||
const [compData, setCompData] = useState([]);
|
||||
useEffect(() => {
|
||||
setCurrentComponentType(componentType);
|
||||
setCompData(complexData[`${componentType}`]);
|
||||
}, [componentType]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={styles['comp-grid-container']}>
|
||||
<InputSearch
|
||||
searchButton="搜索"
|
||||
placeholder="请输入名字"
|
||||
style={{ width: 350 }}
|
||||
/>
|
||||
<Row style={{ marginBottom: 16 }}>
|
||||
{compData.map((v, i) => {
|
||||
return (
|
||||
<Col
|
||||
xs={12}
|
||||
sm={12}
|
||||
md={12}
|
||||
lg={6}
|
||||
xl={6}
|
||||
xxl={6}
|
||||
key={i}>
|
||||
<CompNode nodeData={v} />
|
||||
</Col>
|
||||
);
|
||||
})}
|
||||
</Row>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default CompGrid;
|
||||
@ -0,0 +1,79 @@
|
||||
import React from 'react';
|
||||
import styles from './style/compNode.module.less';
|
||||
import { Card, Divider } from '@arco-design/web-react';
|
||||
import { IconDelete } from '@arco-design/web-react/icon';
|
||||
import { formatDataType } from '@/utils/common';
|
||||
|
||||
type NodeData = {
|
||||
label: string;
|
||||
|
||||
[key: string]: any
|
||||
};
|
||||
|
||||
interface CompNodeProps {
|
||||
nodeData: NodeData;
|
||||
}
|
||||
|
||||
const CompNode: React.FC<CompNodeProps> = ({ nodeData }) => {
|
||||
return (
|
||||
<div className={styles['comp-node-container']}>
|
||||
<Card style={{ width: 450, margin: 10, border: '1px solid #dfe4ea' }}>
|
||||
{/*节点渲染*/}
|
||||
<div className={styles['comp-node-box']}>
|
||||
{/*节点标题*/}
|
||||
<div className={styles['comp-node-title']}>
|
||||
{nodeData.flowName}
|
||||
</div>
|
||||
{/*节点api相关的输入输出*/}
|
||||
<div className={styles['comp-node-api']}>
|
||||
<div className={styles['api-in']}>
|
||||
<div className={styles['flex-box']}>
|
||||
<div className={styles['right-arrow']}></div>
|
||||
<div style={{ marginLeft: 5 }}>contour</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles['api-out']}>
|
||||
<div className={styles['flex-box']}>
|
||||
<div style={{ marginRight: 5 }}>done</div>
|
||||
<div className={styles['right-arrow']}></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Divider></Divider>
|
||||
{/*节点data相关的输入输出*/}
|
||||
<div className={styles['comp-node-data']}>
|
||||
<div className={styles['data-in']}>
|
||||
{nodeData.dataIns.length > 0 && nodeData.dataIns.map((v, i) => {
|
||||
return (
|
||||
<div key={i} className={styles['flex-box']}>
|
||||
<div className={styles['rectangular']}></div>
|
||||
<div style={{ marginLeft: 5 }}>{v.id} {formatDataType(v.dataType)}</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className={styles['data-out']}>
|
||||
{nodeData.dataOuts.length > 0 && nodeData.dataOuts.map((v, i) => {
|
||||
return (
|
||||
<div key={i} className={styles['flex-box']}>
|
||||
<div style={{ marginRight: 5 }}>{v.id} {formatDataType(v.dataType)}</div>
|
||||
<div className={styles['rectangular']}></div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/*其他信息渲染*/}
|
||||
<div className={styles['comp-node-other']}>
|
||||
<div className={styles['handleDelete']}>
|
||||
<IconDelete style={{ fontSize: 16 }} />
|
||||
</div>
|
||||
<div className={styles['description']}>{nodeData.description}</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CompNode;
|
||||
@ -0,0 +1,3 @@
|
||||
.comp-grid-container {
|
||||
|
||||
}
|
||||
@ -0,0 +1,87 @@
|
||||
.comp-node-container {
|
||||
|
||||
.comp-node-box {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 10px #cccccc;
|
||||
padding: 8px 0;
|
||||
|
||||
.comp-node-title {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.comp-node-api {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.api-in,
|
||||
.api-out {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
|
||||
.flex-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.right-arrow {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 5px solid transparent;
|
||||
border-bottom: 5px solid transparent;
|
||||
border-left: 10px solid #68b25b; /* 箭头颜色 */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.api-out {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.comp-node-data {
|
||||
|
||||
.data-in,
|
||||
.data-out {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.flex-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
|
||||
.rectangular {
|
||||
width: 11px;
|
||||
height: 8px;
|
||||
background-color: #68b25b;
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.data-out {
|
||||
align-items: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.comp-node-other {
|
||||
margin-top: 20px;
|
||||
|
||||
.handleDelete {
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.description {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,344 @@
|
||||
export const complexData = {
|
||||
myComplex: [
|
||||
{
|
||||
'dataIns': [],
|
||||
'dataOuts': [],
|
||||
'description': '放小夹爪',
|
||||
'flowName': '放小夹爪',
|
||||
'id': '1950503157821997058',
|
||||
'published': 1,
|
||||
'tag': '放小夹爪'
|
||||
},
|
||||
{
|
||||
'dataIns': [],
|
||||
'dataOuts': [],
|
||||
'description': '切大夹爪',
|
||||
'flowName': '切大夹爪mk1',
|
||||
'id': '1950503083498930177',
|
||||
'published': 1,
|
||||
'tag': '切大夹爪'
|
||||
},
|
||||
{
|
||||
'dataIns': [
|
||||
{
|
||||
'arrayType': 'ARRAY',
|
||||
'dataType': 'ARRAY',
|
||||
'defaultValue': [
|
||||
''
|
||||
],
|
||||
'desc': '',
|
||||
'id': 'arrry'
|
||||
}
|
||||
],
|
||||
'dataOuts': [],
|
||||
'description': '抓取底盘到打磨位',
|
||||
'flowName': '抓取底盘到打磨位',
|
||||
'id': '1950006961574699010',
|
||||
'published': 1,
|
||||
'tag': '抓取底盘到打磨位'
|
||||
},
|
||||
{
|
||||
'dataIns': [],
|
||||
'dataOuts': [],
|
||||
'description': '新地盘位到装配位',
|
||||
'flowName': '新地盘位到装配位',
|
||||
'id': '1949793478329425922',
|
||||
'published': 1,
|
||||
'tag': '新地盘位到装配位'
|
||||
},
|
||||
{
|
||||
'dataIns': [],
|
||||
'dataOuts': [],
|
||||
'description': '新切大夹爪',
|
||||
'flowName': '新切大夹爪',
|
||||
'id': '1949772493811277826',
|
||||
'published': 1,
|
||||
'tag': '新切大夹爪'
|
||||
},
|
||||
{
|
||||
'dataIns': [],
|
||||
'dataOuts': [],
|
||||
'description': '新放磨棒',
|
||||
'flowName': '新放磨棒',
|
||||
'id': '1949768489341476865',
|
||||
'published': 1,
|
||||
'tag': '新放磨棒'
|
||||
},
|
||||
{
|
||||
'dataIns': [],
|
||||
'dataOuts': [],
|
||||
'description': '新切磨棒',
|
||||
'flowName': '新切磨棒',
|
||||
'id': '1949752230570811394',
|
||||
'published': 1,
|
||||
'tag': '新切磨棒'
|
||||
},
|
||||
{
|
||||
'dataIns': [],
|
||||
'dataOuts': [],
|
||||
'description': '切磨棒',
|
||||
'flowName': '切磨棒',
|
||||
'id': '1949730326136938497',
|
||||
'published': 1,
|
||||
'tag': '切磨棒'
|
||||
},
|
||||
{
|
||||
'dataIns': [],
|
||||
'dataOuts': [
|
||||
{
|
||||
'arrayType': null,
|
||||
'dataType': null,
|
||||
'defaultValue': null,
|
||||
'desc': '',
|
||||
'id': 'input'
|
||||
},
|
||||
{
|
||||
'arrayType': 'DOUBLE',
|
||||
'dataType': 'ARRAY',
|
||||
'defaultValue': null,
|
||||
'desc': '末端点位',
|
||||
'id': 'strEndPos'
|
||||
},
|
||||
{
|
||||
'arrayType': 'DOUBLE',
|
||||
'dataType': 'ARRAY',
|
||||
'defaultValue': null,
|
||||
'desc': '中间点位',
|
||||
'id': 'strMidPos'
|
||||
},
|
||||
{
|
||||
'arrayType': 'DOUBLE',
|
||||
'dataType': 'ARRAY',
|
||||
'defaultValue': [
|
||||
-92.565,
|
||||
-411.927,
|
||||
-114.356,
|
||||
-101.013,
|
||||
-1.115,
|
||||
-179.97
|
||||
],
|
||||
'desc': '直线运动点位',
|
||||
'id': 'strPos'
|
||||
},
|
||||
{
|
||||
'arrayType': null,
|
||||
'dataType': 'INTEGER',
|
||||
'defaultValue': -1,
|
||||
'desc': '工件号',
|
||||
'id': 'ufNum'
|
||||
},
|
||||
{
|
||||
'arrayType': null,
|
||||
'dataType': 'INTEGER',
|
||||
'defaultValue': 11,
|
||||
'desc': '工具号',
|
||||
'id': 'utNum'
|
||||
}
|
||||
],
|
||||
'description': '底盘打磨',
|
||||
'flowName': '底盘打磨',
|
||||
'id': '1949723817671843842',
|
||||
'published': 1,
|
||||
'tag': '底盘打磨'
|
||||
},
|
||||
{
|
||||
'dataIns': [
|
||||
{
|
||||
'arrayType': 'ARRAY',
|
||||
'dataType': 'ARRAY',
|
||||
'defaultValue': [
|
||||
''
|
||||
],
|
||||
'desc': '',
|
||||
'id': 'shuzu'
|
||||
}
|
||||
],
|
||||
'dataOuts': [],
|
||||
'description': 'jiaqu',
|
||||
'flowName': 'jiaqu',
|
||||
'id': '1949655123964911617',
|
||||
'published': 1,
|
||||
'tag': 'jiaqu'
|
||||
},
|
||||
{
|
||||
'dataIns': [],
|
||||
'dataOuts': [],
|
||||
'description': 'h',
|
||||
'flowName': '发布test',
|
||||
'id': '1947850703236149250',
|
||||
'published': 1,
|
||||
'tag': '航'
|
||||
}
|
||||
],
|
||||
publicComplex: [
|
||||
{
|
||||
'dataIns': [],
|
||||
'dataOuts': [],
|
||||
'description': '放小夹爪',
|
||||
'flowName': '放小夹爪',
|
||||
'id': '1950503157821997058',
|
||||
'published': 1,
|
||||
'tag': '放小夹爪'
|
||||
},
|
||||
{
|
||||
'dataIns': [],
|
||||
'dataOuts': [],
|
||||
'description': '切大夹爪',
|
||||
'flowName': '切大夹爪mk1',
|
||||
'id': '1950503083498930177',
|
||||
'published': 1,
|
||||
'tag': '切大夹爪'
|
||||
},
|
||||
{
|
||||
'dataIns': [
|
||||
{
|
||||
'arrayType': 'ARRAY',
|
||||
'dataType': 'ARRAY',
|
||||
'defaultValue': [
|
||||
''
|
||||
],
|
||||
'desc': '',
|
||||
'id': 'arrry'
|
||||
}
|
||||
],
|
||||
'dataOuts': [],
|
||||
'description': '抓取底盘到打磨位',
|
||||
'flowName': '抓取底盘到打磨位',
|
||||
'id': '1950006961574699010',
|
||||
'published': 1,
|
||||
'tag': '抓取底盘到打磨位'
|
||||
},
|
||||
{
|
||||
'dataIns': [],
|
||||
'dataOuts': [],
|
||||
'description': '新地盘位到装配位',
|
||||
'flowName': '新地盘位到装配位',
|
||||
'id': '1949793478329425922',
|
||||
'published': 1,
|
||||
'tag': '新地盘位到装配位'
|
||||
},
|
||||
{
|
||||
'dataIns': [],
|
||||
'dataOuts': [],
|
||||
'description': '新切大夹爪',
|
||||
'flowName': '新切大夹爪',
|
||||
'id': '1949772493811277826',
|
||||
'published': 1,
|
||||
'tag': '新切大夹爪'
|
||||
},
|
||||
{
|
||||
'dataIns': [],
|
||||
'dataOuts': [],
|
||||
'description': '新放磨棒',
|
||||
'flowName': '新放磨棒',
|
||||
'id': '1949768489341476865',
|
||||
'published': 1,
|
||||
'tag': '新放磨棒'
|
||||
},
|
||||
{
|
||||
'dataIns': [],
|
||||
'dataOuts': [],
|
||||
'description': '新切磨棒',
|
||||
'flowName': '新切磨棒',
|
||||
'id': '1949752230570811394',
|
||||
'published': 1,
|
||||
'tag': '新切磨棒'
|
||||
},
|
||||
{
|
||||
'dataIns': [],
|
||||
'dataOuts': [],
|
||||
'description': '切磨棒',
|
||||
'flowName': '切磨棒',
|
||||
'id': '1949730326136938497',
|
||||
'published': 1,
|
||||
'tag': '切磨棒'
|
||||
},
|
||||
{
|
||||
'dataIns': [],
|
||||
'dataOuts': [
|
||||
{
|
||||
'arrayType': null,
|
||||
'dataType': null,
|
||||
'defaultValue': null,
|
||||
'desc': '',
|
||||
'id': 'input'
|
||||
},
|
||||
{
|
||||
'arrayType': 'DOUBLE',
|
||||
'dataType': 'ARRAY',
|
||||
'defaultValue': null,
|
||||
'desc': '末端点位',
|
||||
'id': 'strEndPos'
|
||||
},
|
||||
{
|
||||
'arrayType': 'DOUBLE',
|
||||
'dataType': 'ARRAY',
|
||||
'defaultValue': null,
|
||||
'desc': '中间点位',
|
||||
'id': 'strMidPos'
|
||||
},
|
||||
{
|
||||
'arrayType': 'DOUBLE',
|
||||
'dataType': 'ARRAY',
|
||||
'defaultValue': [
|
||||
-92.565,
|
||||
-411.927,
|
||||
-114.356,
|
||||
-101.013,
|
||||
-1.115,
|
||||
-179.97
|
||||
],
|
||||
'desc': '直线运动点位',
|
||||
'id': 'strPos'
|
||||
},
|
||||
{
|
||||
'arrayType': null,
|
||||
'dataType': 'INTEGER',
|
||||
'defaultValue': -1,
|
||||
'desc': '工件号',
|
||||
'id': 'ufNum'
|
||||
},
|
||||
{
|
||||
'arrayType': null,
|
||||
'dataType': 'INTEGER',
|
||||
'defaultValue': 11,
|
||||
'desc': '工具号',
|
||||
'id': 'utNum'
|
||||
}
|
||||
],
|
||||
'description': '底盘打磨',
|
||||
'flowName': '底盘打磨',
|
||||
'id': '1949723817671843842',
|
||||
'published': 1,
|
||||
'tag': '底盘打磨'
|
||||
},
|
||||
{
|
||||
'dataIns': [
|
||||
{
|
||||
'arrayType': 'ARRAY',
|
||||
'dataType': 'ARRAY',
|
||||
'defaultValue': [
|
||||
''
|
||||
],
|
||||
'desc': '',
|
||||
'id': 'shuzu'
|
||||
}
|
||||
],
|
||||
'dataOuts': [],
|
||||
'description': 'jiaqu',
|
||||
'flowName': 'jiaqu',
|
||||
'id': '1949655123964911617',
|
||||
'published': 1,
|
||||
'tag': 'jiaqu'
|
||||
},
|
||||
{
|
||||
'dataIns': [],
|
||||
'dataOuts': [],
|
||||
'description': 'h',
|
||||
'flowName': '发布test',
|
||||
'id': '1947850703236149250',
|
||||
'published': 1,
|
||||
'tag': '航'
|
||||
}
|
||||
]
|
||||
};
|
||||
Loading…
Reference in New Issue