修改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,
@@ -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 }) => {
+  graph.on('node:contextmenu', ({ e, node }) => {
-    selectedNode.value = node
+      selectedNode.value = node
-  e.preventDefault()
+    e.preventDefault()
-  // 显示自定义上下文菜单，包含箭头样式选项
+    // 显示自定义上下文菜单，包含箭头样式选项
-  const pos = node.position?.() || { x: 0, y: 0 }
+    const pos = node.position?.() || { x: 0, y: 0 }
-  showContextMenu(pos.x, pos.y)
+    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,48 +235,48 @@ isMenuShow.value = true
     ?.appendChild(stencil.container as HTMLElement)
 
     // 监听Graph中节点创建事件
-graph.on('node:added', (args) => {
+  graph.on('node:added', (args) => {
-  console.log('节点已添加到画布', args)
+    console.log('节点已添加到画布', args)
-  const { node } = args
+    const { node } = args
     
-  // 检查是否是管线节点
+    // 检查是否是管线节点
-  if (node.data && node.data.lineStyle) {
+    if (node.data && node.data.lineStyle) {
-    // 应用管线样式到连接线
+      // 应用管线样式到连接线
-    const lineStyle = node.data.lineStyle
+      const lineStyle = node.data.lineStyle
-    graph.options.connecting.createEdge = () => {
+      graph.options.connecting.createEdge = () => {
-      return new Shape.Edge({
+        return new Shape.Edge({
-        attrs: {
+          attrs: {
-          line: {
+            line: {
-            stroke: '#A2B1C3',
+              stroke: '#A2B1C3',
-            strokeWidth: 2,
+              strokeWidth: 2,
-            strokeDasharray: lineStyle.strokeDasharray,
+              strokeDasharray: lineStyle.strokeDasharray,
-            targetMarker: lineStyle.targetMarker,
+              targetMarker: lineStyle.targetMarker,
-            sourceMarker: lineStyle.sourceMarker
+              sourceMarker: lineStyle.sourceMarker
-          }
+            }
-        },
+          },
-        zIndex: 0
+          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:
+      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,73 +1038,82 @@ function saveDesign() { // 保存设计
 }
 </style>
 <style>
-  .x6-widget-stencil-content{
+.x6-widget-stencil-content {
-    top:0px !important;
+  top: 0px !important;
-  }
+}
-  .antvx6-header{
+
-    width: 100%;
+.antvx6-header {
-    height: 60px;
+  width: 100%;
-    display: flex;
+  height: 60px;
-    align-items: center;
+  display: flex;
-    justify-content: space-between;
+  align-items: center;
-    padding: 10px;
+  justify-content: space-between;
-    background-color: #ffffff;
+  padding: 10px;
-    border-bottom: 1px solid #e0e0e0;
+  background-color: #ffffff;
-  }
+  border-bottom: 1px solid #e0e0e0;
-  .header-left-box{
+}
-    width: 400px;
+
-    height: 60px;
+.header-left-box {
-    display: flex;
+  width: 400px;
-    align-items: center;
+  height: 60px;
-  }
+  display: flex;
-  .header-content-box{
+  align-items: center;
-     display: flex;
+}
-    align-items: center;
+
-  }
+.header-content-box {
-  .return-icon-box {
+  display: flex;
-    width: 30px;
+  align-items: center;
-    height: 30px;
+}
-    display:flex;
+
-    align-items:center;
+.return-icon-box {
-    justify-content: center;
+  width: 30px;
-    cursor: pointer;
+  height: 30px;
-    margin-right: 10px;
+  display: flex;
-  }
+  align-items: center;
-  .return-icon-box:hover{
+  justify-content: center;
-    background-color: #eeeeee;
+  cursor: pointer;
-    border-radius: 4px;
+  margin-right: 10px;
-  }
+}
-  .antvx6-header .project-name{
+
-    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
+.return-icon-box:hover {
-    font-weight: 700;
+  background-color: #eeeeee;
-    font-style: normal;
+  border-radius: 4px;
-    font-size: 16px;
+}
-    color: #333333;
+
-    margin-right: 10px;
+.antvx6-header .project-name {
-  }
+  font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
- .antvx6-header .operation-icon-box{
+  font-weight: 700;
-    width: 46px;
+  font-style: normal;
-    height: 46px;
+  font-size: 16px;
-    display:flex;
+  color: #333333;
-    align-content:center;
+  margin-right: 10px;
-    justify-content: center;
+}
-    flex-wrap: wrap; 
+
-    cursor: pointer;
+.antvx6-header .operation-icon-box {
-    margin-right: 20px;
+  width: 46px;
-    font-family: '微软雅黑';
+  height: 46px;
-    font-weight: 400;
+  display: flex;
-    font-style: normal;
+  align-content: center;
-    font-size: 12px;
+  justify-content: center;
-    color: #4B4B4B;
+  flex-wrap: wrap;
-    padding-top: 5px;
+  cursor: pointer;
-  }
+  margin-right: 20px;
- .antvx6-header .operation-icon-box:hover{
+  font-family: '微软雅黑';
-    background-color: #eeeeee;
+  font-weight: 400;
-    border-radius: 4px;
+  font-style: normal;
-  }
+  font-size: 12px;
-  .operation-icon-text{
+  color: #4B4B4B;
-    width: 100%;
+  padding-top: 5px;
-    text-align: center;
+}
-    padding-top: 5px;
+
-  }
+.antvx6-header .operation-icon-box:hover {
+  background-color: #eeeeee;
+  border-radius: 4px;
+}
+
+.operation-icon-text {
+  width: 100%;
+  text-align: center;
+  padding-top: 5px;
+}
 </style>