diff --git a/react-ui/config/config.ts b/react-ui/config/config.ts index cebef5c0..b2ff93b9 100644 --- a/react-ui/config/config.ts +++ b/react-ui/config/config.ts @@ -76,7 +76,7 @@ export default defineConfig({ * @name layout 插件 * @doc https://umijs.org/docs/max/layout-menu */ - title: 'Ant Design Pro', + title: '复杂智能软件', layout: { locale: true, ...defaultSettings, diff --git a/react-ui/config/defaultSettings.ts b/react-ui/config/defaultSettings.ts index e72ccdb3..0d58faa1 100644 --- a/react-ui/config/defaultSettings.ts +++ b/react-ui/config/defaultSettings.ts @@ -14,9 +14,9 @@ const Settings: ProLayoutProps & { contentWidth: 'Fluid', fixedHeader: false, fixSiderbar: false, - splitMenus: true, + splitMenus: false, colorWeak: false, - title: 'Ant Design Pro', + title: '复杂智能软件', pwa: true, logo: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg', iconfontUrl: '', diff --git a/react-ui/config/proxy.ts b/react-ui/config/proxy.ts index 5f33242d..3f381754 100644 --- a/react-ui/config/proxy.ts +++ b/react-ui/config/proxy.ts @@ -15,14 +15,15 @@ export default { // localhost:8000/api/** -> https://preview.pro.ant.design/api/** '/api/': { // 要代理的地址 - target: 'http://localhost:8082', + // target: 'http://172.20.32.181:31205', + target: 'http://172.20.32.150:8082', // 配置了这个可以从 http 代理到 https // 依赖 origin 的功能可能需要这个，比如 cookie changeOrigin: true, pathRewrite: { '^/api': '' }, }, '/profile/avatar/': { - target: 'http://localhost:8082', + target: 'http://172.20.32.181:31205', changeOrigin: true, } }, diff --git a/react-ui/config/routes.ts b/react-ui/config/routes.ts index ffad02ff..224541ce 100644 --- a/react-ui/config/routes.ts +++ b/react-ui/config/routes.ts @@ -46,6 +46,49 @@ export default [ }, ], }, + { + name: 'pipeline', + path: '/pipeline', + routes: [ + { + name: '流水线', + path: '/pipeline', + component: './Pipeline/index', + }, + { + name: '训练', + path: '/pipeline/pytorchtext/:id/:name', + component: './Pipeline/editPipeline/index', + }, + ], + }, + { + name: 'experiment', + path: '/experiment', + routes: [ + { + name: '实验', + path: '/experiment', + component: './Experiment/index', + }, + { + name: '实验训练', + path: '/experiment/pytorchtext/:workflowId/:id', + component: './Experiment/experimentText/index', + }, + ], + }, + { + name: 'developmentEnvironment', + path: '/developmentEnvironment', + routes: [ + { + name: '开发环境', + path: '/developmentEnvironment', + component: './DevelopmentEnvironment/index', + }, + ], + }, { name: 'system', path: '/system', diff --git a/react-ui/jest.config.ts b/react-ui/jest.config.ts index ad09a2b3..1de2a1af 100644 --- a/react-ui/jest.config.ts +++ b/react-ui/jest.config.ts @@ -12,7 +12,7 @@ export default async () => { ...config, testEnvironmentOptions: { ...(config?.testEnvironmentOptions || {}), - url: 'http://localhost:8081', + url: 'http://localhost:8000', }, setupFiles: [...(config.setupFiles || []), './tests/setupTests.jsx'], globals: { diff --git a/react-ui/package.json b/react-ui/package.json index 3763e5e1..0a55edde 100644 --- a/react-ui/package.json +++ b/react-ui/package.json @@ -56,13 +56,14 @@ "@ant-design/icons": "^5.0.0", "@ant-design/pro-components": "^2.4.4", "@ant-design/use-emotion-css": "1.0.4", + "@antv/g6": "^4.8.24", "@umijs/route-utils": "^4.0.1", "antd": "^5.4.4", "classnames": "^2.3.2", "fabric": "^5.3.0", "highlight.js": "^11.7.0", "lodash": "^4.17.21", - "moment": "^2.29.4", + "moment": "^2.30.1", "omit.js": "^2.0.2", "pnpm": "^8.9.0", "query-string": "^8.1.0", diff --git a/react-ui/public/assets/images/component-icon-1--Omitted.png b/react-ui/public/assets/images/component-icon-1--Omitted.png new file mode 100644 index 00000000..f4e53527 Binary files /dev/null and b/react-ui/public/assets/images/component-icon-1--Omitted.png differ diff --git a/react-ui/public/assets/images/component-icon-1-Failed.png b/react-ui/public/assets/images/component-icon-1-Failed.png new file mode 100644 index 00000000..ca81ea52 Binary files /dev/null and b/react-ui/public/assets/images/component-icon-1-Failed.png differ diff --git a/react-ui/public/assets/images/component-icon-1-Omitted.png b/react-ui/public/assets/images/component-icon-1-Omitted.png new file mode 100644 index 00000000..f4e53527 Binary files /dev/null and b/react-ui/public/assets/images/component-icon-1-Omitted.png differ diff --git a/react-ui/public/assets/images/component-icon-1-Pending.png b/react-ui/public/assets/images/component-icon-1-Pending.png new file mode 100644 index 00000000..7f4c9eca Binary files /dev/null and b/react-ui/public/assets/images/component-icon-1-Pending.png differ diff --git a/react-ui/public/assets/images/component-icon-1-Running.png b/react-ui/public/assets/images/component-icon-1-Running.png new file mode 100644 index 00000000..06562f00 Binary files /dev/null and b/react-ui/public/assets/images/component-icon-1-Running.png differ diff --git a/react-ui/public/assets/images/component-icon-1-Succeeded.png b/react-ui/public/assets/images/component-icon-1-Succeeded.png new file mode 100644 index 00000000..9b74bfc7 Binary files /dev/null and b/react-ui/public/assets/images/component-icon-1-Succeeded.png differ diff --git a/react-ui/public/assets/images/component-icon-1.png b/react-ui/public/assets/images/component-icon-1.png new file mode 100644 index 00000000..5e5d7149 Binary files /dev/null and b/react-ui/public/assets/images/component-icon-1.png differ diff --git a/react-ui/public/assets/images/component-icon-2-Failed.png b/react-ui/public/assets/images/component-icon-2-Failed.png new file mode 100644 index 00000000..e9808639 Binary files /dev/null and b/react-ui/public/assets/images/component-icon-2-Failed.png differ diff --git a/react-ui/public/assets/images/component-icon-2-Omitted.png b/react-ui/public/assets/images/component-icon-2-Omitted.png new file mode 100644 index 00000000..6ee447f3 Binary files /dev/null and b/react-ui/public/assets/images/component-icon-2-Omitted.png differ diff --git a/react-ui/public/assets/images/component-icon-2-Pending.png b/react-ui/public/assets/images/component-icon-2-Pending.png new file mode 100644 index 00000000..20c62415 Binary files /dev/null and b/react-ui/public/assets/images/component-icon-2-Pending.png differ diff --git a/react-ui/public/assets/images/component-icon-2-Running.png b/react-ui/public/assets/images/component-icon-2-Running.png new file mode 100644 index 00000000..14d102cd Binary files /dev/null and b/react-ui/public/assets/images/component-icon-2-Running.png differ diff --git a/react-ui/public/assets/images/component-icon-2-Succeeded.png b/react-ui/public/assets/images/component-icon-2-Succeeded.png new file mode 100644 index 00000000..4cb50702 Binary files /dev/null and b/react-ui/public/assets/images/component-icon-2-Succeeded.png differ diff --git a/react-ui/public/assets/images/component-icon-2.png b/react-ui/public/assets/images/component-icon-2.png new file mode 100644 index 00000000..2f4fba75 Binary files /dev/null and b/react-ui/public/assets/images/component-icon-2.png differ diff --git a/react-ui/public/assets/images/component-icon-3-Failed.png b/react-ui/public/assets/images/component-icon-3-Failed.png new file mode 100644 index 00000000..e14d6801 Binary files /dev/null and b/react-ui/public/assets/images/component-icon-3-Failed.png differ diff --git a/react-ui/public/assets/images/component-icon-3-Omitted.png b/react-ui/public/assets/images/component-icon-3-Omitted.png new file mode 100644 index 00000000..4bd1c261 Binary files /dev/null and b/react-ui/public/assets/images/component-icon-3-Omitted.png differ diff --git a/react-ui/public/assets/images/component-icon-3-Pending.png b/react-ui/public/assets/images/component-icon-3-Pending.png new file mode 100644 index 00000000..b5590219 Binary files /dev/null and b/react-ui/public/assets/images/component-icon-3-Pending.png differ diff --git a/react-ui/public/assets/images/component-icon-3-Running.png b/react-ui/public/assets/images/component-icon-3-Running.png new file mode 100644 index 00000000..2dda9dd8 Binary files /dev/null and b/react-ui/public/assets/images/component-icon-3-Running.png differ diff --git a/react-ui/public/assets/images/component-icon-3-Succeeded.png b/react-ui/public/assets/images/component-icon-3-Succeeded.png new file mode 100644 index 00000000..a915145d Binary files /dev/null and b/react-ui/public/assets/images/component-icon-3-Succeeded.png differ diff --git a/react-ui/public/assets/images/component-icon-3.png b/react-ui/public/assets/images/component-icon-3.png new file mode 100644 index 00000000..941b323a Binary files /dev/null and b/react-ui/public/assets/images/component-icon-3.png differ diff --git a/react-ui/public/assets/images/component-icon-4-Failed.png b/react-ui/public/assets/images/component-icon-4-Failed.png new file mode 100644 index 00000000..4b1d6592 Binary files /dev/null and b/react-ui/public/assets/images/component-icon-4-Failed.png differ diff --git a/react-ui/public/assets/images/component-icon-4-Omitted.png b/react-ui/public/assets/images/component-icon-4-Omitted.png new file mode 100644 index 00000000..03e3d391 Binary files /dev/null and b/react-ui/public/assets/images/component-icon-4-Omitted.png differ diff --git a/react-ui/public/assets/images/component-icon-4-Pending.png b/react-ui/public/assets/images/component-icon-4-Pending.png new file mode 100644 index 00000000..3c4b6f6f Binary files /dev/null and b/react-ui/public/assets/images/component-icon-4-Pending.png differ diff --git a/react-ui/public/assets/images/component-icon-4-Running.png b/react-ui/public/assets/images/component-icon-4-Running.png new file mode 100644 index 00000000..b991a59a Binary files /dev/null and b/react-ui/public/assets/images/component-icon-4-Running.png differ diff --git a/react-ui/public/assets/images/component-icon-4-Succeeded.png b/react-ui/public/assets/images/component-icon-4-Succeeded.png new file mode 100644 index 00000000..0338686f Binary files /dev/null and b/react-ui/public/assets/images/component-icon-4-Succeeded.png differ diff --git a/react-ui/public/assets/images/component-icon-4.png b/react-ui/public/assets/images/component-icon-4.png new file mode 100644 index 00000000..fd240707 Binary files /dev/null and b/react-ui/public/assets/images/component-icon-4.png differ diff --git a/react-ui/public/assets/images/component-icon-5-Failed.png b/react-ui/public/assets/images/component-icon-5-Failed.png new file mode 100644 index 00000000..34e79c11 Binary files /dev/null and b/react-ui/public/assets/images/component-icon-5-Failed.png differ diff --git a/react-ui/public/assets/images/component-icon-5-Omitted.png b/react-ui/public/assets/images/component-icon-5-Omitted.png new file mode 100644 index 00000000..c3476b75 Binary files /dev/null and b/react-ui/public/assets/images/component-icon-5-Omitted.png differ diff --git a/react-ui/public/assets/images/component-icon-5-Pending.png b/react-ui/public/assets/images/component-icon-5-Pending.png new file mode 100644 index 00000000..31125144 Binary files /dev/null and b/react-ui/public/assets/images/component-icon-5-Pending.png differ diff --git a/react-ui/public/assets/images/component-icon-5-Running.png b/react-ui/public/assets/images/component-icon-5-Running.png new file mode 100644 index 00000000..ad44c4c0 Binary files /dev/null and b/react-ui/public/assets/images/component-icon-5-Running.png differ diff --git a/react-ui/public/assets/images/component-icon-5-Succeeded.png b/react-ui/public/assets/images/component-icon-5-Succeeded.png new file mode 100644 index 00000000..6981591e Binary files /dev/null and b/react-ui/public/assets/images/component-icon-5-Succeeded.png differ diff --git a/react-ui/public/assets/images/component-icon-5.png b/react-ui/public/assets/images/component-icon-5.png new file mode 100644 index 00000000..b86bd925 Binary files /dev/null and b/react-ui/public/assets/images/component-icon-5.png differ diff --git a/react-ui/public/assets/images/component-icon-6-Failed.png b/react-ui/public/assets/images/component-icon-6-Failed.png new file mode 100644 index 00000000..5bf8ed50 Binary files /dev/null and b/react-ui/public/assets/images/component-icon-6-Failed.png differ diff --git a/react-ui/public/assets/images/component-icon-6-Omitted.png b/react-ui/public/assets/images/component-icon-6-Omitted.png new file mode 100644 index 00000000..89e477ca Binary files /dev/null and b/react-ui/public/assets/images/component-icon-6-Omitted.png differ diff --git a/react-ui/public/assets/images/component-icon-6-Pending.png b/react-ui/public/assets/images/component-icon-6-Pending.png new file mode 100644 index 00000000..24e83971 Binary files /dev/null and b/react-ui/public/assets/images/component-icon-6-Pending.png differ diff --git a/react-ui/public/assets/images/component-icon-6-Running.png b/react-ui/public/assets/images/component-icon-6-Running.png new file mode 100644 index 00000000..e45b1fbb Binary files /dev/null and b/react-ui/public/assets/images/component-icon-6-Running.png differ diff --git a/react-ui/public/assets/images/component-icon-6-Succeeded.png b/react-ui/public/assets/images/component-icon-6-Succeeded.png new file mode 100644 index 00000000..8d4a4680 Binary files /dev/null and b/react-ui/public/assets/images/component-icon-6-Succeeded.png differ diff --git a/react-ui/public/assets/images/component-icon-6.png b/react-ui/public/assets/images/component-icon-6.png new file mode 100644 index 00000000..7676a037 Binary files /dev/null and b/react-ui/public/assets/images/component-icon-6.png differ diff --git a/react-ui/public/assets/images/component-icon-7-Failed.png b/react-ui/public/assets/images/component-icon-7-Failed.png new file mode 100644 index 00000000..2427996b Binary files /dev/null and b/react-ui/public/assets/images/component-icon-7-Failed.png differ diff --git a/react-ui/public/assets/images/component-icon-7-Omitted.png b/react-ui/public/assets/images/component-icon-7-Omitted.png new file mode 100644 index 00000000..33a4445e Binary files /dev/null and b/react-ui/public/assets/images/component-icon-7-Omitted.png differ diff --git a/react-ui/public/assets/images/component-icon-7-Pending.png b/react-ui/public/assets/images/component-icon-7-Pending.png new file mode 100644 index 00000000..12a5aa4e Binary files /dev/null and b/react-ui/public/assets/images/component-icon-7-Pending.png differ diff --git a/react-ui/public/assets/images/component-icon-7-Running.png b/react-ui/public/assets/images/component-icon-7-Running.png new file mode 100644 index 00000000..0328188f Binary files /dev/null and b/react-ui/public/assets/images/component-icon-7-Running.png differ diff --git a/react-ui/public/assets/images/component-icon-7-Succeeded.png b/react-ui/public/assets/images/component-icon-7-Succeeded.png new file mode 100644 index 00000000..30676934 Binary files /dev/null and b/react-ui/public/assets/images/component-icon-7-Succeeded.png differ diff --git a/react-ui/public/assets/images/component-icon-7.png b/react-ui/public/assets/images/component-icon-7.png new file mode 100644 index 00000000..28c1803d Binary files /dev/null and b/react-ui/public/assets/images/component-icon-7.png differ diff --git a/react-ui/public/assets/images/duty-message.png b/react-ui/public/assets/images/duty-message.png new file mode 100644 index 00000000..3b187643 Binary files /dev/null and b/react-ui/public/assets/images/duty-message.png differ diff --git a/react-ui/public/assets/images/static-message.png b/react-ui/public/assets/images/static-message.png new file mode 100644 index 00000000..097f48a2 Binary files /dev/null and b/react-ui/public/assets/images/static-message.png differ diff --git a/react-ui/public/fonts/font.css b/react-ui/public/fonts/font.css index 136b2788..5d110456 100644 --- a/react-ui/public/fonts/font.css +++ b/react-ui/public/fonts/font.css @@ -1,4 +1,4 @@ -@font-face { - font-family: Alibaba; +@font-face { + font-family: Alibaba; src: url('./ALIBABA-PUHUITI-MEDIUM.TTF'); - } + } \ No newline at end of file diff --git a/react-ui/src/pages/DevelopmentEnvironment/index.jsx b/react-ui/src/pages/DevelopmentEnvironment/index.jsx new file mode 100644 index 00000000..378d12f8 --- /dev/null +++ b/react-ui/src/pages/DevelopmentEnvironment/index.jsx @@ -0,0 +1,14 @@ +import React ,{ useState,useEffect,useRef }from 'react'; +import {getJupyterUrl} from '@/services/developmentEnvironment/index.js' +const developmentEnvironment = React.FC = () => { + const [iframeUrl,setIframeUrl]=useState('') + useEffect(()=>{ + getJupyterUrl().then(ret=>{ + console.log(ret); + setIframeUrl(ret.msg) + }) + },[]) + return ( + + )}; +export default developmentEnvironment; \ No newline at end of file diff --git a/react-ui/src/pages/Experiment/experimentText/editPipeline.less b/react-ui/src/pages/Experiment/experimentText/editPipeline.less new file mode 100644 index 00000000..d0562f67 --- /dev/null +++ b/react-ui/src/pages/Experiment/experimentText/editPipeline.less @@ -0,0 +1,30 @@ +#graph { + height: 100%; + width: 100%; + position: relative; + } +.editPipelinePropsContent{ + display: flex; + align-items: center; + width: 100%; + height:43px; + background:#f8fbff; + color:#1d1d20; + font-size:15px; + font-family: 'Alibaba'; + padding: 0 20px; +} +.centerContainer{ + flex: 1; + display: flex; + flex-direction: column; +} +.buttonList{ + display: flex; + align-items: center; + padding: 0 30px; + width: 100%; + height:45px; + background:#ffffff; + box-shadow:0px 3px 6px rgba(146, 146, 146, 0.09); +} \ No newline at end of file diff --git a/react-ui/src/pages/Experiment/experimentText/index.jsx b/react-ui/src/pages/Experiment/experimentText/index.jsx new file mode 100644 index 00000000..30022345 --- /dev/null +++ b/react-ui/src/pages/Experiment/experimentText/index.jsx @@ -0,0 +1,335 @@ +import React ,{ useState,useEffect,useRef }from 'react'; +import { useParams } from 'react-router-dom' +import Props from './props'; +import { useEmotionCss } from '@ant-design/use-emotion-css'; +import G6 from '@antv/g6'; +import Styles from './editPipeline.less' +import { s8 } from '../../../utils'; +import { Button, message} from 'antd'; +import {SaveOutlined} from '@ant-design/icons'; +import {saveWorkflow,getWorkflowById,} from '@/services/pipeline/index.js' +import {getExperimentIns} from '@/services/experiment/index.js' +import { useNavigate} from 'react-router-dom'; +const ExperimentText = React.FC = () => { + const propsRef=useRef() + const navgite=useNavigate(); + const locationParams =useParams () //新版本获取路由参数接口 + let graph=null + const [experimentStatusObj,setExperimentStatusObj]=useState({}) + const pipelineContainer = useEmotionCss(() => { + return { + display: 'flex', + backgroundColor:'#fff', + height:'81vh' + }; + }); + const graphStyle = useEmotionCss(() => { + return { + width:'100%', + backgroundColor:'#f9fafb', + flex:1 + }; + }); + const graphRef=useRef() + const onDragEnd=(val)=>{ + console.log(val,'eee'); + const _x = val.x + const _y = val.y + const point = graph.getPointByClient(_x, _y); + let model = {}; + // 元模型 + model = { + ...val, + x: point.x, + y: point.y, + id: val.component_name+'-'+s8(), + isCluster: false, + }; + console.log(graph, model); + + graph.addItem('node', model, true); + console.log(graph); + + } + const formChange=(val)=>{ + } + const handlerClick=(e)=>{ + console.log(propsRef,graph); + // let cache = []; + // let json_str = JSON.stringify(graph, function(key, value) { + // if (typeof value === 'object' && value !== null) { + // if (cache.indexOf(value) !== -1) { + // return; + // } + // cache.push(value); + // } + // return value; + // }); + // console.log(json_str); + propsRef.current.showDrawer(e,locationParams.id) + } + const getGraphData=(data)=>{ + if(graph){ + console.log(graph); + graph.data(data) + graph.render() + } + else{ + setTimeout(()=>{ + getGraphData(data) + },500) + } + } + const getFirstWorkflow=(val)=>{ + getWorkflowById(val).then(ret=>{ + console.log(ret,'retttttttttt'); + if(ret.code==200){ + if(graph&&ret.data&&ret.data.dag){ + console.log(JSON.parse(ret.data.dag)); + getExperimentIns(locationParams.id).then(res=>{ + if(res.code==200){ + const experimentStatusObjs=JSON.parse(res.data.nodes_status) + const newNodeList= JSON.parse(ret.data.dag).nodes.map(item=>{console.log(experimentStatusObjs); return {...item,component_id:experimentStatusObjs&&experimentStatusObjs[item.id]&&experimentStatusObjs[item.id].id,img:experimentStatusObjs&&experimentStatusObjs[item.id]&&experimentStatusObjs[item.id].phase?item.img.slice(0,item.img.length-4)+'-'+experimentStatusObjs[item.id].phase+'.png':item.img}}) + const newData={...JSON.parse(ret.data.dag),nodes:newNodeList} + console.log(newData); + getGraphData(newData) + // setExperimentStatusObj(JSON.parse(ret.data.nodes_status)) + } + + }) + + + } + } + // graph&&graph.data(JSON.parse(ret.dag)) + // graph.render() + }) + } + // const getExperimentIn=(val)=>{ + // getExperimentIns(val).then(ret=>{ + // if(ret.code==200){ + // console.log(JSON.parse(ret.data.nodes_status)); + // setExperimentStatusObj(JSON.parse(ret.data.nodes_status)) + // setTimeout(() => { + // console.log(experimentStatusObj); + + // }, 1000); + // } + + // }) + // } + useEffect(()=>{ + + initGraph() + getFirstWorkflow(locationParams.workflowId) + },[]) + const initGraph=()=>{ + G6.registerNode( + 'rect-node', + { + // draw anchor-point circles according to the anchorPoints in afterDraw + getAnchorPoints(cfg) { + return ( + cfg.anchorPoints || [ + // 上下各3，左右各1 + [0.1, 0.05], + [0.5, 0.05], + [0.9, 0.05], + [0, 0.5], + [1, 0.5], + [0.1, 1], + [0.5, 1], + [0.9, 1], + + // 四边中间 + // [0.5, 0.05], + // [0, 0.5], + // [1, 0.5], + // [0.5, 1], + // 四个角落 + // [0.05, 0.05], + // [0.9, 0.05], + // [0.05, 1], + // [0.9, 1], + ] + ); + }, + afterDraw(cfg, group) { + // console.log(group, cfg, 12312); + const image = group.addShape('image', { + attrs: { + x: -25, + y: -13, + width: 23, + height: 21, + img: cfg.img, + cursor: 'pointer', + }, + draggable: true, + }); + // if (cfg.label) { + // group.addShape('text', { + // attrs: { + // x: 0, + // y: cfg.height / 2 - 5, + // textAlign: 'center', + // textBaseline: 'middle', + // text: cfg.label, + // fill: '#fff', + // }, + // draggable: true, + // }); + // } + const bbox = group.getBBox(); + const anchorPoints = this.getAnchorPoints(cfg); + // console.log(anchorPoints); + anchorPoints.forEach((anchorPos, i) => { + group.addShape('circle', { + attrs: { + r: 5, + x: bbox.x + bbox.width * anchorPos[0], + y: bbox.y + bbox.height * anchorPos[1], + fill: '#000', + stroke: '#000', + }, + name: `anchor-point`, // the name, for searching by group.find(ele => ele.get('name') === 'anchor-point') + anchorPointIdx: i, // flag the idx of the anchor-point circle + links: 0, // cache the number of edges connected to this shape + visible: false, // invisible by default, shows up when links > 1 or the node is in showAnchors state + draggable: true, // allow to catch the drag events on this shape + }); + }); + return image; + }, + + // response the state changes and show/hide the link-point circles + setState(name, value, item) { + // 默认显示全部锚点，防止过宽导致锚点无法被选中 + // if (name === 'showAnchors') { + const anchorPoints = item.getContainer().findAll(ele => ele.get('name') === 'anchor-point'); + anchorPoints.forEach(point => { + // if (value) point.show(); + // else point.hide(); + point.show(); + }); + // } + }, + }, + 'rect' + ); + console.log(graphRef,'graphRef'); + graph = new G6.Graph({ + container: graphRef.current, + grid: true, + width: graphRef.current.clientWidth ||500, + height: graphRef.current.clientHeight||760, + animate: false, + groupByTypes: false, + + plugins: [], + enabledStack: true, + modes: { + default: [ + 'drag-canvas', + 'zoom-canvas', + ], + altSelect: [ + { + type: 'brush-select', + trigger: 'drag', + }, + 'drag-node', + ], + }, + + defaultNode: { + type: 'rect-node', + size: 70, + + labelCfg: { + style: { + fill: '#000', + fontSize: 12, + cursor: 'pointer', + x: 0, + y: 0, + textAlign: 'left', + textBaseline: 'middle', + }, + }, + style: { + fill: 'transparent', + stroke: 'transparent', + }, + }, + // nodeStateStyles: { + // nodeSelected: { + // fill: 'red', + // shadowColor: 'red', + // stroke: 'red', + // 'text-shape': { + // fill: 'red', + // stroke: 'red', + // }, + // }, + // }, + defaultEdge: { + // type: 'quadratic', + type: 'polyline', + + style: { + endArrow: { + path: G6.Arrow.triangle(), + }, + cursor: 'pointer', + endArrow: true, + lineWidth: 1, + opacity: 1, + stroke: '#a2a6b5', + radius: 10, + }, + nodeStateStyle: { + hover: { + opacity: 1, + stroke: '#8fe8ff', + }, + }, + labelCfg: { + autoRotate: true, + // refY: 10, + style: { + fontSize: 10, + fill: '#FFF', + }, + }, + }, + defaultCombo: { + type: 'rect', + fixCollapseSize: 70, + style: { + fill: '#00e0ff0d', + stroke: '#00e0ff', + lineDash: [5, 10], + cursor: 'pointer', + }, + }, + linkCenter: true, + fitView: true, + fitViewPadding: [60, 60, 60, 80], + }); + graph.on('dblclick', handlerClick); + window.onresize = () => { + if (!graph || graph.get('destroyed')) return; + if (!graphRef.current || !graphRef.current.scrollWidth || !graphRef.current.scrollHeight) return; + graph.changeSize(graphRef.current.scrollWidth, graphRef.current.scrollHeight - 20); + }; + } + return (
+
+
+
+
+
+ +
)}; +export default ExperimentText; \ No newline at end of file diff --git a/react-ui/src/pages/Experiment/experimentText/props.jsx b/react-ui/src/pages/Experiment/experimentText/props.jsx new file mode 100644 index 00000000..3bf1029b --- /dev/null +++ b/react-ui/src/pages/Experiment/experimentText/props.jsx @@ -0,0 +1,265 @@ +import React, { useState,useImperativeHandle ,forwardRef } from 'react'; +import { Button, Drawer,Form, Input ,Tabs } from 'antd'; +import Styles from './editPipeline.less' +import{getQueryByExperimentLog}from '@/services/experiment/index.js' +import { ProfileOutlined, DatabaseOutlined} from '@ant-design/icons'; +const { TextArea } = Input; +const Props = forwardRef(({onParentChange}, ref) =>{ + const [form] = Form.useForm(); + const [stagingItem,setStagingItem]=useState({}) + const [messageItem,setMessageItem]=useState('') + + const items = [ + { + key: '1', + label: '日志详情', + children:
, + icon: + }, + { + key: '2', + label: '配置参数', + icon:, + children:
+
+ + 基本信息 +
+ + + + + + +
+ + 任务信息 +
+ + + + + + + + + + + + + + + + + +