修改x6

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,
@@ -174,7 +193,7 @@ onMounted(() => {
         name: 'group3',
          graphHeight: 400,
         layoutOptions: {
-          rowHeight: 80,
+          rowHeight: 120,
         },
       },
     ],
@@ -184,21 +203,21 @@ onMounted(() => {
       rowHeight: 100,
     },
   })
-graph.on('node:contextmenu', ({ e, node }) => {
+  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) {
+  function showContextMenu(x: number, y: number) {
-left.value = x + 260
+  left.value = x + 260
-top.value = y - 50
+  top.value = y - 50
 
-isMenuShow.value = true
+  isMenuShow.value = true
     // 创建并显示上下文菜单
     // 包含箭头样式选项
-}
+  }
   // 监听Stencil内部的Dnd事件
   stencil.on('dnd:start', (args:any) => {
     console.log('Stencil节点开始拖拽', args)
@@ -216,7 +235,7 @@ isMenuShow.value = true
     ?.appendChild(stencil.container as HTMLElement)
 
     // 监听Graph中节点创建事件
-graph.on('node:added', (args) => {
+  graph.on('node:added', (args) => {
     console.log('节点已添加到画布', args)
     const { node } = args
     
@@ -257,7 +276,7 @@ graph.on('node:added', (args) => {
       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)
@@ -479,37 +497,30 @@ graph.on('node:added', (args) => {
   const imageShapes = [
     {
       label: '圆柱槽',
-      image:
+      image: img1,
-        'http://localhost:3000/dev-api/avatar/1.png',
     },
     {
       label: '扁平槽',
-      image:
+      image:img2,
-        'http://localhost:3000/dev-api/avatar/2.png',
     },
     {
       label: '环形槽',
-      image:
+      image:img3,
-        'http://localhost:3000/dev-api/avatar/3.png',
     },
     {
       label: '管束槽',
-      image:
+      image:img4,
-        'http://localhost:3000/dev-api/avatar/4.png',
     },
     {
       label: '萃取柱',
-      image:
+      image:img5,
-        'http://localhost:3000/dev-api/avatar/5.png',
     },
     {
       label: '流化床',
-      image:
+      image:img6,
-        'http://localhost:3000/dev-api/avatar/6.png',
     },{
       label: '锥底环形槽',
-      image:
+      image:img7,
-        'http://localhost:3000/dev-api/avatar/7.png',
     },
   ]
   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:
+      image: line1,
-        'http://localhost:3000/dev-api/avatar/21.png',
       targetMarker: null,
       sourceMarker: null,
       strokeDasharray: 0
     },
     {
       label: '单箭头实线',
-      image:
+      image: line2,
-        'http://localhost:3000/dev-api/avatar/22.png',
       targetMarker: {
         name: 'block',
         width: 12,
@@ -549,8 +559,7 @@ graph.on('node:added', (args) => {
     },
     {
       label: '双箭头实线',
-      image:
+      image: line3,
-        'http://localhost:3000/dev-api/avatar/23.png',
       targetMarker: {
         name: 'block',
         width: 12,
@@ -565,16 +574,14 @@ graph.on('node:added', (args) => {
     },
     {
       label: '虚线',
-      image:
+      image: line4,
-        'http://localhost:3000/dev-api/avatar/24.png',
       targetMarker: null,
       sourceMarker: null,
       strokeDasharray: 5
     },
     {
       label: '单箭头虚线',
-      image:
+      image: line5,
-        'http://localhost:3000/dev-api/avatar/25.png',
       targetMarker: {
         name: 'block',
         width: 12,
@@ -585,8 +592,7 @@ graph.on('node:added', (args) => {
     },
     {
       label: '双箭头虚线',
-      image:
+      image: line6,
-        'http://localhost:3000/dev-api/avatar/26.png',
       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,
+      width: 130,
-      height: 60,
+      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()
+    const designData:any = graph.toJSON()
-    console.log('designData', designData)
+    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){
+      if(res === true){
-        ElMessage.success('保存成功')
+        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)
+}
 </script>
  
 <template>
@@ -819,19 +842,19 @@ function saveDesign() { // 保存设计
         </div>
       </div>
       <div class="header-content-box">
-        <div class="operation-icon-box">
+        <div class="operation-icon-box" @click="revokeClick">
           <img src="@/assets/x6/revoke.png">
           <div class="operation-icon-text">撤销</div>
         </div>
-        <div class="operation-icon-box">
+        <div class="operation-icon-box" @click="removeClick">
           <img src="@/assets/x6/redo.png">
           <div class="operation-icon-text">重做</div>
         </div>
-        <div class="operation-icon-box">
+        <div class="operation-icon-box" @click="bigClick">
           <img src="@/assets/x6/magnify.png">
           <div class="operation-icon-text">放大</div>
         </div>
-        <div class="operation-icon-box">
+        <div class="operation-icon-box"  @click="smallClick">
           <img src="@/assets/x6/reduce.png">
           <div class="operation-icon-text">缩小</div>
         </div>
@@ -871,7 +894,7 @@ function saveDesign() { // 保存设计
 
 .app-layout {
   position: fixed;
-  z-index: 9999;
+  z-index: 10;
   display: flex;
   flex-direction: column;
   width: 100vw;
@@ -999,7 +1022,8 @@ function saveDesign() { // 保存设计
   background-color: #e6f7ff;
   border: 2px dashed #1890ff;
 }
-.context-menu{
+
+.context-menu {
   position: absolute;
   z-index: 9999;
   background-color: #fff;
@@ -1014,10 +1038,11 @@ function saveDesign() { // 保存设计
 }
 </style>
 <style>
-  .x6-widget-stencil-content{
+.x6-widget-stencil-content {
-    top:0px !important;
+  top: 0px !important;
-  }
+}
-  .antvx6-header{
+
+.antvx6-header {
   width: 100%;
   height: 60px;
   display: flex;
@@ -1026,43 +1051,49 @@ function saveDesign() { // 保存设计
   padding: 10px;
   background-color: #ffffff;
   border-bottom: 1px solid #e0e0e0;
-  }
+}
-  .header-left-box{
+
+.header-left-box {
   width: 400px;
   height: 60px;
   display: flex;
   align-items: center;
-  }
+}
-  .header-content-box{
+
+.header-content-box {
   display: flex;
   align-items: center;
-  }
+}
-  .return-icon-box {
+
+.return-icon-box {
   width: 30px;
   height: 30px;
-    display:flex;
+  display: flex;
-    align-items:center;
+  align-items: center;
   justify-content: center;
   cursor: pointer;
   margin-right: 10px;
-  }
+}
-  .return-icon-box:hover{
+
+.return-icon-box:hover {
   background-color: #eeeeee;
   border-radius: 4px;
-  }
+}
-  .antvx6-header .project-name{
+
+.antvx6-header .project-name {
   font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
   font-weight: 700;
   font-style: normal;
   font-size: 16px;
   color: #333333;
   margin-right: 10px;
-  }
+}
- .antvx6-header .operation-icon-box{
+
+.antvx6-header .operation-icon-box {
   width: 46px;
   height: 46px;
-    display:flex;
+  display: flex;
-    align-content:center;
+  align-content: center;
   justify-content: center;
   flex-wrap: wrap;
   cursor: pointer;
@@ -1073,14 +1104,16 @@ function saveDesign() { // 保存设计
   font-size: 12px;
   color: #4B4B4B;
   padding-top: 5px;
-  }
+}
- .antvx6-header .operation-icon-box:hover{
+
+.antvx6-header .operation-icon-box:hover {
   background-color: #eeeeee;
   border-radius: 4px;
-  }
+}
-  .operation-icon-text{
+
+.operation-icon-text {
   width: 100%;
   text-align: center;
   padding-top: 5px;
-  }
+}
 </style>