diff --git a/business-css/frontend/src/assets/x6/1.png b/business-css/frontend/src/assets/x6/1.png new file mode 100644 index 0000000..d1a8200 Binary files /dev/null and b/business-css/frontend/src/assets/x6/1.png differ diff --git a/business-css/frontend/src/assets/x6/2.png b/business-css/frontend/src/assets/x6/2.png new file mode 100644 index 0000000..9a9e270 Binary files /dev/null and b/business-css/frontend/src/assets/x6/2.png differ diff --git a/business-css/frontend/src/assets/x6/3.png b/business-css/frontend/src/assets/x6/3.png new file mode 100644 index 0000000..25fbd1e Binary files /dev/null and b/business-css/frontend/src/assets/x6/3.png differ diff --git a/business-css/frontend/src/assets/x6/4.png b/business-css/frontend/src/assets/x6/4.png new file mode 100644 index 0000000..77bdc3a Binary files /dev/null and b/business-css/frontend/src/assets/x6/4.png differ diff --git a/business-css/frontend/src/assets/x6/5.png b/business-css/frontend/src/assets/x6/5.png new file mode 100644 index 0000000..c7ea006 Binary files /dev/null and b/business-css/frontend/src/assets/x6/5.png differ diff --git a/business-css/frontend/src/assets/x6/6.png b/business-css/frontend/src/assets/x6/6.png new file mode 100644 index 0000000..743acbd Binary files /dev/null and b/business-css/frontend/src/assets/x6/6.png differ diff --git a/business-css/frontend/src/assets/x6/7.png b/business-css/frontend/src/assets/x6/7.png new file mode 100644 index 0000000..cc936d4 Binary files /dev/null and b/business-css/frontend/src/assets/x6/7.png differ diff --git a/business-css/frontend/src/assets/x6/line1.png b/business-css/frontend/src/assets/x6/line1.png new file mode 100644 index 0000000..5819e60 Binary files /dev/null and b/business-css/frontend/src/assets/x6/line1.png differ diff --git a/business-css/frontend/src/assets/x6/line2.png b/business-css/frontend/src/assets/x6/line2.png new file mode 100644 index 0000000..f4b70a4 Binary files /dev/null and b/business-css/frontend/src/assets/x6/line2.png differ diff --git a/business-css/frontend/src/assets/x6/line3.png b/business-css/frontend/src/assets/x6/line3.png new file mode 100644 index 0000000..ec3bdd6 Binary files /dev/null and b/business-css/frontend/src/assets/x6/line3.png differ diff --git a/business-css/frontend/src/assets/x6/line4.png b/business-css/frontend/src/assets/x6/line4.png new file mode 100644 index 0000000..27f8d75 Binary files /dev/null and b/business-css/frontend/src/assets/x6/line4.png differ diff --git a/business-css/frontend/src/assets/x6/line5.png b/business-css/frontend/src/assets/x6/line5.png new file mode 100644 index 0000000..c22b125 Binary files /dev/null and b/business-css/frontend/src/assets/x6/line5.png differ diff --git a/business-css/frontend/src/assets/x6/line6.png b/business-css/frontend/src/assets/x6/line6.png new file mode 100644 index 0000000..cf9acdc Binary files /dev/null and b/business-css/frontend/src/assets/x6/line6.png differ diff --git a/business-css/frontend/src/components/antvx6/index.vue b/business-css/frontend/src/components/antvx6/index.vue index 9196d6e..a5adf17 100644 --- a/business-css/frontend/src/components/antvx6/index.vue +++ b/business-css/frontend/src/components/antvx6/index.vue @@ -17,6 +17,20 @@ import { import insertCss from 'insert-css' import { updateProjects} from "@/api/business/project"; +import img1 from '@/assets/x6/1.png' +import img2 from '@/assets/x6/2.png' +import img3 from '@/assets/x6/3.png' +import img4 from '@/assets/x6/4.png' +import img5 from '@/assets/x6/5.png' +import img6 from '@/assets/x6/6.png' +import img7 from '@/assets/x6/7.png' + +import line1 from '@/assets/x6/line1.png' +import line2 from '@/assets/x6/line2.png' +import line3 from '@/assets/x6/line3.png' +import line4 from '@/assets/x6/line4.png' +import line5 from '@/assets/x6/line5.png' +import line6 from '@/assets/x6/line6.png' const emit = defineEmits([ 'closeAntvx6']); const props = defineProps({ projectInfo: { @@ -64,6 +78,11 @@ let currentLineStyle = 'solid' // 默认实线 onMounted(() => { preWork() + if(projectInfo.value.topology != null && projectInfo.value.topology != ''){ + + } + + // #region 初始化画布 graph = new Graph({ container: document.getElementById('graph-container') as HTMLElement, @@ -127,7 +146,7 @@ onMounted(() => { // #region 使用插件 graph - .use( + .use( new Transform({ resizing: false, // 通过拖拽边缘调整节点大小 rotating: true, // 允许旋转节点 @@ -172,9 +191,9 @@ onMounted(() => { collapsable: false, title: '管线', name: 'group3', - graphHeight: 400, + graphHeight: 400, layoutOptions: { - rowHeight: 80, + rowHeight: 120, }, }, ], @@ -184,21 +203,21 @@ onMounted(() => { rowHeight: 100, }, }) -graph.on('node:contextmenu', ({ e, node }) => { - selectedNode.value = node - e.preventDefault() - // 显示自定义上下文菜单，包含箭头样式选项 - const pos = node.position?.() || { x: 0, y: 0 } - showContextMenu(pos.x, pos.y) -}) -function showContextMenu(x: number, y: number) { -left.value = x + 260 -top.value = y - 50 + graph.on('node:contextmenu', ({ e, node }) => { + selectedNode.value = node + e.preventDefault() + // 显示自定义上下文菜单，包含箭头样式选项 + const pos = node.position?.() || { x: 0, y: 0 } + showContextMenu(pos.x, pos.y) + }) + function showContextMenu(x: number, y: number) { + left.value = x + 260 + top.value = y - 50 -isMenuShow.value = true - // 创建并显示上下文菜单 - // 包含箭头样式选项 -} + isMenuShow.value = true + // 创建并显示上下文菜单 + // 包含箭头样式选项 + } // 监听Stencil内部的Dnd事件 stencil.on('dnd:start', (args:any) => { console.log('Stencil节点开始拖拽', args) @@ -216,48 +235,48 @@ isMenuShow.value = true ?.appendChild(stencil.container as HTMLElement) // 监听Graph中节点创建事件 -graph.on('node:added', (args) => { - console.log('节点已添加到画布', args) - const { node } = args - - // 检查是否是管线节点 - if (node.data && node.data.lineStyle) { - // 应用管线样式到连接线 - const lineStyle = node.data.lineStyle - graph.options.connecting.createEdge = () => { - return new Shape.Edge({ - attrs: { - line: { - stroke: '#A2B1C3', - strokeWidth: 2, - strokeDasharray: lineStyle.strokeDasharray, - targetMarker: lineStyle.targetMarker, - sourceMarker: lineStyle.sourceMarker - } - }, - zIndex: 0 - }) + graph.on('node:added', (args) => { + console.log('节点已添加到画布', args) + const { node } = args + + // 检查是否是管线节点 + if (node.data && node.data.lineStyle) { + // 应用管线样式到连接线 + const lineStyle = node.data.lineStyle + graph.options.connecting.createEdge = () => { + return new Shape.Edge({ + attrs: { + line: { + stroke: '#A2B1C3', + strokeWidth: 2, + strokeDasharray: lineStyle.strokeDasharray, + targetMarker: lineStyle.targetMarker, + sourceMarker: lineStyle.sourceMarker + } + }, + zIndex: 0 + }) + } + // 移除管线节点，因为它只是一个样式选择器 + setTimeout(() => { + graph.removeNode(node) + }, 100) + } else { + // 设置固定大小 + node.size(160, 160) + // 去掉背景节点 + node.attr('body/fill', 'none') + // 图片居中 + node.attr('image/refX', 0) + node.attr('image/refY', 0) + node.attr('image/width', 160) // 修改宽度 + node.attr('image/height', 160) // 修改高度 + // 删除节点上的文字 + node.attr('text/text', '') + node.attr('label/text', '') } - // 移除管线节点，因为它只是一个样式选择器 - setTimeout(() => { - graph.removeNode(node) - }, 100) - } else { - // 设置固定大小 - node.size(160, 160) - // 去掉背景节点 - node.attr('body/fill', 'none') - // 图片居中 - node.attr('image/refX', 0) - node.attr('image/refY', 0) - node.attr('image/width', 160) // 修改宽度 - node.attr('image/height', 160) // 修改高度 - // 删除节点上的文字 - node.attr('text/text', '') - node.attr('label/text', '') - } -}) + }) // #endregion // #region 快捷键与事件 @@ -308,7 +327,6 @@ graph.on('node:added', (args) => { // delete graph.bindKey('backspace', () => { - debugger const cells = graph.getSelectedCells() if (cells.length) { graph.removeCells(cells) @@ -476,40 +494,33 @@ graph.on('node:added', (args) => { // stencil.load([r1, r2, r3, r4, r5, r6], 'group1') - const imageShapes = [ + const imageShapes = [ { label: '圆柱槽', - image: - 'http://localhost:3000/dev-api/avatar/1.png', + image: img1, }, { label: '扁平槽', - image: - 'http://localhost:3000/dev-api/avatar/2.png', + image:img2, }, { label: '环形槽', - image: - 'http://localhost:3000/dev-api/avatar/3.png', + image:img3, }, { label: '管束槽', - image: - 'http://localhost:3000/dev-api/avatar/4.png', + image:img4, }, { label: '萃取柱', - image: - 'http://localhost:3000/dev-api/avatar/5.png', + image:img5, }, { label: '流化床', - image: - 'http://localhost:3000/dev-api/avatar/6.png', + image:img6, },{ label: '锥底环形槽', - image: - 'http://localhost:3000/dev-api/avatar/7.png', + image:img7, }, ] const imageNodes = imageShapes.map((item) => @@ -523,22 +534,21 @@ graph.on('node:added', (args) => { }, }), ) + console.log(imageNodes) stencil.load(imageNodes, 'group2') // 创建管线节点 const lineShapes = [ { label: '实线', - image: - 'http://localhost:3000/dev-api/avatar/21.png', + image: line1, targetMarker: null, sourceMarker: null, strokeDasharray: 0 }, { label: '单箭头实线', - image: - 'http://localhost:3000/dev-api/avatar/22.png', + image: line2, targetMarker: { name: 'block', width: 12, @@ -549,8 +559,7 @@ graph.on('node:added', (args) => { }, { label: '双箭头实线', - image: - 'http://localhost:3000/dev-api/avatar/23.png', + image: line3, targetMarker: { name: 'block', width: 12, @@ -565,16 +574,14 @@ graph.on('node:added', (args) => { }, { label: '虚线', - image: - 'http://localhost:3000/dev-api/avatar/24.png', + image: line4, targetMarker: null, sourceMarker: null, strokeDasharray: 5 }, { label: '单箭头虚线', - image: - 'http://localhost:3000/dev-api/avatar/25.png', + image: line5, targetMarker: { name: 'block', width: 12, @@ -585,8 +592,7 @@ graph.on('node:added', (args) => { }, { label: '双箭头虚线', - image: - 'http://localhost:3000/dev-api/avatar/26.png', + image: line6, targetMarker: { name: 'block', width: 12, @@ -602,32 +608,28 @@ graph.on('node:added', (args) => { ] const lineNodes = lineShapes.map((item) => { - // 创建一个临时的边作为管线节点的视觉表示 -// shape: 'custom-image', -// label: item.label, -// attrs: { -// image: { -// 'xlink:href': item.image, -// }, -// }, // 创建一个节点来显示管线样式 const node = graph.createNode({ shape: 'custom-image', label: item.label, - width: 120, - height: 60, + width: 130, + height: 100, attrs: { image: { 'xlink:href': item.image, + width: 31, + height: 31, + refX: 50, + refY: 20 }, body: { stroke: 'transparent', - fill: 'transparent' + fill: '#f8f8f8' }, label: { text: item.label, refX: 60, - refY: 50, + refY: 65, textAnchor: 'middle', fontSize: 12, fill: '#666' @@ -646,6 +648,11 @@ graph.on('node:added', (args) => { }) stencil.load(lineNodes, 'group3') + if (!graph || !projectInfo.value || !projectInfo.value.topology) return; + graph.clearCells(); + const topology:any = JSON.parse(projectInfo.value.topology) + if(!topology.designData)return + graph.fromJSON(topology.designData); // #endregion }) @@ -749,8 +756,11 @@ function closeAntvx6() { function saveDesign() { // 保存设计 try { // 获取画布内容并转换为JSON - const designData = graph.toJSON() - console.log('designData', designData) + const designData:any = graph.toJSON() + let cells = [] + if(designData !=null && designData.cells.length>0){ + cells = designData.cells + } const topology = { projectId: projectInfo.value.projectId, name: projectInfo.value.name, @@ -764,22 +774,23 @@ function saveDesign() { // 保存设计 material:{ showProperties:[] }, - designData:designData - } + + }, + designData:cells } // 添加保存信息 const saveData = { - id: projectInfo.value.projectId, + projectId: projectInfo.value.projectId, topology: JSON.stringify(topology) } updateProjects(saveData).then((res:any) => { - if(res.code === 200 || res.code === 200){ - ElMessage.success('保存成功') + if(res === true){ + ElMessage({ + type: "success", + message: "保存成功", + }); } }); - // 打印到控制台 - console.log('保存的设计数据:', saveData) - // 返回保存的数据 return saveData } catch (error) { @@ -787,6 +798,18 @@ function saveDesign() { // 保存设计 return null } } +function revokeClick(){ + graph.undo() +} +function removeClick(){ + graph.clearCells(); +} +function bigClick(){ + graph.zoom(0.1) +} +function smallClick(){ + graph.zoom(-0.1) +}