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