ETA1.1.5 暂提

config/index.js

@@ -38,7 +38,7 @@ module.exports = {
     proxyTable:{
 		'/adminapi': {
       target: "http://8.136.199.33:7778",
-      // target: "http://192.168.77.7:8602",
+      // target: "http://192.168.77.7:8606",
 			// secure:false,  // 如果是https接口，需要配置这个参数
 			changeOrigin:true, // 如果接口跨域，需要进行这个参数配置
 			pathRewrite:{

package.json

@@ -15,10 +15,12 @@
   "dependencies": {
     "@antv/hierarchy": "^0.6.11",
     "@antv/x6": "^1.29.1",
+    "@antv/x6-vue-shape": "^1.5.4",
     "@fullcalendar/interaction": "^5.10.1",
     "@fullcalendar/timegrid": "^5.10.1",
     "@fullcalendar/vue": "^5.10.1",
     "@tinymce/tinymce-vue": "^2.1.0",
+    "@vue/composition-api": "^1.5.0",
     "axios": "^0.15.3",
     "babel-helper-vue-jsx-merge-props": "^2.0.3",
     "babel-plugin-syntax-jsx": "^6.18.0",
@@ -39,7 +41,7 @@
     "js-md5": "^0.7.3",
     "less-loader": "^4.1.0",
     "lodash": "^4.17.21",
-    "minio": "^7.0.18",
+    "minio": "7.0.18",
     "pptxgenjs": "^3.10.0",
     "qrcode": "^1.4.4",
     "sortablejs": "^1.15.0",

src/api/modules/sandApi.js

@@ -126,6 +126,10 @@ export default {
 	getSandboxClassify: params => {
 		return http.get('/sandbox/classify/list',params)
 	},
+	// 获取沙盘图分类-仅有分类
+	getSandboxClassifyOnly: params => {
+		return http.get('/sandbox/classifyList',params)
+	},
 	//新增沙盘图分类
 	addSandboxClassify: params => {
 		return http.post('/sandbox/classify/add',params)
@@ -134,7 +138,7 @@ export default {
 	editSandboxClassify: params => {
 		return http.post('/sandbox/classify/edit',params)
 	},
-	//沙盘图分类移动
+	//沙盘图/分类移动
 	sandboxClassifyMove: params => {
 		return http.post('/sandbox/classify/move',params)
 	},
@@ -154,5 +158,12 @@ export default {
 	getSandboxDetail: params => {
 		return http.get('/sandbox/detail',params)
 	},
-	
+	//保存沙盘图V2
+	sandboxSaveV2: params => {
+		return http.post('/sandbox/saveV2',params)
+	},
+	//沙盘图链接检测 {EdbInfoIdList,ChartInfoIdList,ReportIdList}
+	sandboxLinkCheck: params => {
+		return http.post('/sandbox/link/check',params)
+	},
 }

src/views/sandbox_manage/common/edge.js

@@ -103,7 +103,7 @@ export const myEdgeOption = (type,xP=0,yP=0) => {
           }
         },
       }
-    case 'noArrowBoundBend': 
+    case 'noArrowRoundBend': 
 			return {
         ...bendLine,
         connector: {
@@ -111,7 +111,7 @@ export const myEdgeOption = (type,xP=0,yP=0) => {
           args: { radius: 8 },
         },
       }
-    case 'singleArrowBoundBend': 
+    case 'singleArrowRoundBend': 
 			return {
         ...bendLine,
         connector: {
@@ -127,7 +127,7 @@ export const myEdgeOption = (type,xP=0,yP=0) => {
           }
         },
       }
-    case 'doubleArrowBoundBend': 
+    case 'doubleArrowRoundBend': 
 			return {
         ...bendLine,
         connector: {

src/views/sandbox_manage/common/events.js

@@ -3,14 +3,14 @@ import { configOpt } from './toolConfig';
 import _ from "lodash"
 const { line} = configOpt;
 /* 节点操作监听事件 */
-export const myEvents = (graph,mindmapData) => {
+export const myEvents = (graph,mindmapDataUse) => {
 
 		/* 节点双击编辑 */
 		graph.on('node:dblclick', ({ node, e }) => {
 			// 节点当前设置的样式同步到编辑区
 
 			const { text, rect} = node.attrs;
-			console.log(node,'nodenode');
+			// console.log(node,'nodenode');
 			const edit_area = document.createElement('div');
 			edit_area.contentEditable = "true";
 			edit_area.id = "editable-wrapper";
@@ -22,7 +22,7 @@ export const myEvents = (graph,mindmapData) => {
 
 			const position = node.position();
       const size = node.size();
-			console.log(position,size);
+			// console.log(position,size);
       // const pos = graph.localToClient(position);
       const pos = graph.localToGraph(position);
       const zoom = graph.zoom();
@@ -72,29 +72,29 @@ export const myEvents = (graph,mindmapData) => {
 			edit_area.onblur = () => {
 				let newval = edit_area.innerText.replace(/(\n[\s\t]*\r*\n)/g,'\n');
 
-				console.log(node.shape,'edit_area');
+				// console.log(node.shape,'edit_area');
 
 				node.attr('text/textWrap/text', newval);
 				node.attr('text/text', newval);
 
 				if(node.shape.indexOf('mindmap')!==-1){
-					// node.attr('text/text', newval);
-					let changeData=[mindmapData]
-					console.log(mindmapData,'mindmapData',node.zIndex,'node.zIndex',node);
 
+          // console.log(args.node.size());
 					// 转化成需要修改的索引队列
 					let indexSequence = node.id.split('-').map(idn => +idn-1)
-					console.log(indexSequence,'indexSequence');
-					let selectMindmap = {}
-					for (let i = 0; i < indexSequence.length; i++) {
+
+					let index = indexSequence[0] || 0
+					let mindMapDataCurrent = mindmapDataUse[index]?mindmapDataUse[index].mindmapData:{}
+
+					let changeData=[mindMapDataCurrent]
+
+					// console.log(indexSequence,'indexSequence');
+					let selectMindmap = changeData[0]
+					for (let i = 1; i < indexSequence.length; i++) {
 						let element = indexSequence[i]
-						if(i==0){
-							selectMindmap = changeData[element]
-						}else{
-							selectMindmap= selectMindmap.children[element]
-						}
+						selectMindmap= selectMindmap.children[element]
 					}
-					console.log(selectMindmap);
+					// console.log(selectMindmap);
 					selectMindmap.label = newval
 				}
 				// else{
@@ -142,12 +142,20 @@ export const myEvents = (graph,mindmapData) => {
 
 		/* 节点右键 */
 		graph.on('node:contextmenu',({node,e}) => {
-			graph.select(node);
+			graph.resetSelection(node);
 			const dom = $('#contextMenu-wrapper')[0];
 			dom.style.left = e.clientX-3 + 'px';
 			dom.style.top = e.clientY-3 + 'px';
 		})
 
+		/* 节点右键 */
+		graph.on('blank:contextmenu',({node,e}) => {
+			console.log(node,e);
+			graph.select(node);
+			const dom = $('#contextMenu-wrapper')[0];
+			dom.style.left = e.clientX-3 + 'px';
+			dom.style.top = e.clientY-3 + 'px';
+		})
 		/* 选中事件 */
 		// graph.on('cell:selected',({cell,options}) => {
 		// 	// console.log(cell)
@@ -194,7 +202,7 @@ export const myEvents = (graph,mindmapData) => {
 
 		/* 监听选中事件 */
 		graph.on('selection:changed',({selected}) => {
-			console.log(selected,'选中修改');
+			// console.log(selected,'选中修改');
 			// selected.length ? store.commit('sand/SET_SELECT_CELL',selected[0]) : store.commit('sand/SET_SELECT_CELL',null);
 			changeSelection(selected)
 		})
@@ -205,7 +213,7 @@ export const myEvents = (graph,mindmapData) => {
 		// 	selected.length ? store.commit('sand/SET_SELECT_CELL',selected[0]) : store.commit('sand/SET_SELECT_CELL',null);
 		// })
 		graph.on('edge:mouseenter', ({ cell }) => {
-			console.log(cell,'myEdgeOption');
+			// console.log(cell,'myEdgeOption');
 			// console.log(cell.store.data);
 			if(cell.store.data.shape=="mindmap-edge"){
 				// 思维导图的边
@@ -305,7 +313,7 @@ export const bindKey = (graph) => {
 
 /* 右键事件 */
 export const contextEvent = (graph,key) => {
-	console.log(key)
+	// console.log(key)
 	switch (key) {
 		case 'copy':
 			nodeCopyAndPaste(graph);
@@ -319,7 +327,7 @@ export const contextEvent = (graph,key) => {
 /* 删除节点 清空选区*/
 const nodeDelete = (graph) => {
 	const select_cell = graph.getSelectedCells();
-	console.log(select_cell)
+	// console.log(select_cell)
 	if (select_cell.length) {
 
 		// 移除工具

src/views/sandbox_manage/common/gragh.js

@@ -3,8 +3,8 @@ import { bindKey,myEvents } from './events';
 import { configOpt } from './toolConfig';
 
 const { line } = configOpt;
-
-export function myGraph (wrapper,mindmapData) {
+// wrapper DOM的Id mindmapDataUse 思维导图数组，传递给事件 type 模式，编辑和查看
+export function myGraph (wrapper,mindmapDataUse,type='edit') {
 	console.log(wrapper,'wrapperwrapper');
 	const graph = new Graph({
 		container: document.getElementById(wrapper),
@@ -24,7 +24,10 @@ export function myGraph (wrapper,mindmapData) {
 		selecting: {
 			enabled: true,
 			showNodeSelectionBox: false,
-			multiple: true
+			multiple: true,
+			multipleSelectionModifiers:['shift'],
+			rubberband:true,
+			modifiers:['ctrl']
 		},
 		snapline: true, //对齐线
 		// panning: { //画布拖动
@@ -68,6 +71,16 @@ export function myGraph (wrapper,mindmapData) {
 					},
 			},
 		},
+		interacting:type=='view'?{
+			nodeMovable:false,
+			magnetConnectable:false,
+			edgeMovable:false,
+			edgeLabelMovable:false,
+			arrowheadMovable:false,
+			vertexMovable:false,
+			vertexMovable:false,
+			vertexDeletable:false
+		}:{},
 		connecting: {
 			snap: true,
 			// 允许连接到空白位置
@@ -105,25 +118,26 @@ export function myGraph (wrapper,mindmapData) {
 			},
 		},//连线
 		resizing: {
-			enabled: true,
+			enabled: type=='view'?false:true,
 			orthogonal: false,
 		},
 		scaling: {
 			min: 0.5,
 			max: 2
 		},
-        //小地图
-        minimap: {
-            enabled: true,
-            container: document.getElementById("minimap"),
-        }
+		//小地图
+		minimap: {
+				enabled: true,
+				container: document.getElementById("minimap"),
+		}
 	})
 
 	/* 节点操作事件 */
-	myEvents(graph,mindmapData);
+	if(type!='view') myEvents(graph,mindmapDataUse);
+	
 
 	/* 键盘事件 */
-	bindKey(graph);
+	if(type!='view') bindKey(graph);
 
 	return graph;
 }

src/views/sandbox_manage/common/mindmap.js

@@ -3,7 +3,9 @@ import Hierarchy from '@antv/hierarchy'
 export default {
   data() {
     return {
-      
+      mindMapDataCurrent:{},
+      positionCurrent:{},
+      addTypeCurrent:''
     }
   },
   mounted() {
@@ -22,7 +24,11 @@ export default {
           },
           {
             tagName: 'image',
-            selector: 'img',
+            selector: 'leftImg',
+          },
+          {
+            tagName: 'image',
+            selector: 'rightImg',
           },
           {
             tagName: 'text',
@@ -39,7 +45,19 @@ export default {
             width:100,
             height:50
           },
-          img: {
+          leftImg: {
+            ref: 'body',
+            refX: -16,
+            refY: '50%',
+            refY2: -8,
+            width: 16,
+            height: 16,
+            'xlink:href':
+              'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*SYCuQ6HHs5cAAAAAAAAAAAAAARQnAQ',
+            event: 'add:topic:left',
+            class: 'left-topic-image',
+          },
+          rightImg: {
             ref: 'body',
             refX: '100%',
             refY: '50%',
@@ -48,8 +66,8 @@ export default {
             height: 16,
             'xlink:href':
               'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*SYCuQ6HHs5cAAAAAAAAAAAAAARQnAQ',
-            event: 'add:topic',
-            class: 'topic-image',
+            event: 'add:topic:right',
+            class: 'right-topic-image',
           },
           label: {
             fontSize: 14,
@@ -62,10 +80,9 @@ export default {
       },
       true,
     )
-
-    // 分支主题
+    // 左分支主题
     Graph.registerNode(
-      'mindmap-topic-child',
+      'mindmap-topic-left',          
       {
         inherit: 'rect',
         markup: [
@@ -74,40 +91,152 @@ export default {
             selector: 'body',
           },
           {
-            tagName: 'text',
-            selector: 'label',
+            tagName: 'image',
+            selector: 'leftImg',
           },
           {
-            tagName: 'path',
-            selector: 'line',
+            tagName: 'image',
+            selector: 'rightImg',
+          },
+          {
+            tagName: 'text',
+            selector: 'label',
           },
         ],
         attrs: {
           body: {
-            fill: '#ffffff',
-            strokeWidth: 0,
+            rx: 6,
+            ry: 6,
             stroke: '#5F95FF',
+            fill: '#EFF4FF',
+            strokeWidth: 1,
+            width:100,
+            height:50
+          },
+          leftImg: {
+            ref: 'body',
+            refX: -16,
+            refY: '50%',
+            refY2: -8,
+            width: 16,
+            height: 16,
+            'xlink:href':
+              'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*SYCuQ6HHs5cAAAAAAAAAAAAAARQnAQ',
+            event: 'add:topic:left',
+            class: 'left-topic-image',
           },
           label: {
             fontSize: 14,
             fill: '#262626',
-            textVerticalAnchor: 'bottom',
+            textWrap:{
+              width:-10
+            }
+          }
+        },
+      },
+      true,
+    )    
+    // 右分支主题
+    Graph.registerNode(
+      'mindmap-topic-right',          
+      {
+        inherit: 'rect',
+        markup: [
+          {
+            tagName: 'rect',
+            selector: 'body',
           },
-          line: {
+          {
+            tagName: 'image',
+            selector: 'leftImg',
+          },
+          {
+            tagName: 'image',
+            selector: 'rightImg',
+          },
+          {
+            tagName: 'text',
+            selector: 'label',
+          },
+        ],
+        attrs: {
+          body: {
+            rx: 6,
+            ry: 6,
             stroke: '#5F95FF',
-            strokeWidth: 2,
-            d: 'M 0 15 L 60 15',
+            fill: '#EFF4FF',
+            strokeWidth: 1,
+            width:100,
+            height:50
           },
+          rightImg: {
+            ref: 'body',
+            refX: '100%',
+            refY: '50%',
+            refY2: -8,
+            width: 16,
+            height: 16,
+            'xlink:href':
+              'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*SYCuQ6HHs5cAAAAAAAAAAAAAARQnAQ',
+            event: 'add:topic:right',
+            class: 'right-topic-image',
+          },
+          label: {
+            fontSize: 14,
+            fill: '#262626',
+            textWrap:{
+              width:-10
+            }
+          }
         },
       },
       true,
     )
+    // 分支主题
+    // Graph.registerNode(
+    //   'mindmap-topic-child',
+    //   {
+    //     inherit: 'rect',
+    //     markup: [
+    //       {
+    //         tagName: 'rect',
+    //         selector: 'body',
+    //       },
+    //       {
+    //         tagName: 'text',
+    //         selector: 'label',
+    //       },
+    //       {
+    //         tagName: 'path',
+    //         selector: 'line',
+    //       },
+    //     ],
+    //     attrs: {
+    //       body: {
+    //         fill: '#ffffff',
+    //         strokeWidth: 0,
+    //         stroke: '#5F95FF',
+    //       },
+    //       label: {
+    //         fontSize: 14,
+    //         fill: '#262626',
+    //         textVerticalAnchor: 'bottom',
+    //       },
+    //       line: {
+    //         stroke: '#5F95FF',
+    //         strokeWidth: 2,
+    //         d: 'M 0 15 L 60 15',
+    //       },
+    //     },
+    //   },
+    //   true,
+    // )
 
     // 连接器
     Graph.registerConnector(
       'mindmap',
       (sourcePoint, targetPoint, routerPoints, options) => {
-        console.log(sourcePoint, targetPoint, routerPoints, options,'sourcePoint, targetPoint, routerPoints, options');
+        // console.log(sourcePoint, targetPoint, routerPoints, options,'sourcePoint, targetPoint, routerPoints, options');
         const midX = sourcePoint.x + 10
         const midY = sourcePoint.y
         const ctrX = (targetPoint.x - midX) / 5 + midX
@@ -131,7 +260,7 @@ export default {
         },
         attrs: {
           line: {
-            targetMarker: '',
+            targetMarker: false,
             stroke: '#A2B1C3',
             strokeWidth: 2,
           },
@@ -143,41 +272,59 @@ export default {
   },
   methods: {
     setGraph(){
-      this.graph.on('add:topic', ({ node }) => {
-        console.log(this.mindMapData,'this.mindMapData');
+      this.graph.on('add:topic:left', ({ node }) => {
+        if(this.operationType=='view') return 
+        // console.log(this.mindMapDataCurrent,'this.mindMapDataCurrent');
         const { id } = node
+        this.setCurrent(id)
         const type = node.prop('type')
-        console.log(type,'typetypetype');
-        if (this.addChildNode(id, type)) {
-          this.mindMapRender(this.mindmapPosition)      
+        if (this.addChildNode(id, type,'left')) {
+          this.mindMapRender()      
+        }
+      })
+
+      this.graph.on('add:topic:right', ({ node }) => {
+        if(this.operationType=='view') return 
+        // console.log(this.mindMapDataCurrent,'this.mindMapDataCurrent');
+        const { id } = node
+        this.setCurrent(id)
+        const type = node.prop('type')
+        if (this.addChildNode(id, type,'right')) {
+          this.mindMapRender()      
         }
       })
-    
       this.graph.on('node:change:size', (args) => { 
+        if(this.operationType=='view') return 
         if(args.node.shape.indexOf('mindmap')!==-1){
-          console.log(args.node);
-          console.log(args.node.size());
-					let changeData=[this.mindMapData]
 
           let indexSequence = args.node.id.split('-').map(idn => +idn-1)
-					console.log(indexSequence,'indexSequence');
-					let selectMindmap = {}
-					for (let i = 0; i < indexSequence.length; i++) {
+
+					let index = indexSequence[0] || 0
+					let mindMapDataCurrent = this.mindmapDataUse[index]?this.mindmapDataUse[index].mindmapData:{}
+
+					let changeData=[mindMapDataCurrent]
+					// console.log(indexSequence,'indexSequence');
+					// console.log(changeData,'changeData');
+					let selectMindmap = changeData[0]
+					for (let i = 1; i < indexSequence.length; i++) {
 						let element = indexSequence[i]
-						if(i==0){
-							selectMindmap = changeData[element]
-						}else{
-							selectMindmap= selectMindmap.children[element]
-						}
+            selectMindmap= selectMindmap.children[element]
 					}
-					console.log(selectMindmap);
+					// console.log(selectMindmap);
 					selectMindmap.width = args.node.size().width
 					selectMindmap.height = args.node.size().height
         }
       })
       this.graph.on('node:change:position', (args) => { 
-        if(args.node.id==='1'){
-          this.mindmapPosition = args.current
+        if(this.operationType=='view') return 
+        if(args.node.shape.indexOf('mindmap')!==-1){
+          // console.log(Number(args.node.id));
+          let index = Number(args.node.id)
+          if(index){
+            let indexReal=index-1
+            this.mindmapDataUse[indexReal].position = args.current
+            this.setCurrent(args.node.id)
+          }
         }
       })
 
@@ -191,21 +338,38 @@ export default {
       //   }
       // })
       
-      this.graph.bindKey('tab', (e) => {
+      this.graph.bindKey('tab', (e) => {  
+        if(this.operationType=='view') return 
         e.preventDefault()
-        const selectedNodes = this.graph.getSelectedCells().filter((item) => item.isNode())
+        const selectedNodes = this.graph.getSelectedCells().filter((item) => {
+          return item.shape.indexOf('mindmap')!=-1 && item.isNode()
+        })
         if (selectedNodes.length) {
           const node = selectedNodes[0]
-          if (this.addChildNode(node.id, type)) {
-            // this.mindMapRender()
+          this.setCurrent(node.id)
+          let type = node.prop('type')
+          let direction = node.shape.indexOf('left')!=-1?'left':'right'
+          if (this.addChildNode(node.id, type,direction)) {
+            this.mindMapRender()
           }
         }
       })
     },
-    mindMapRender(){
-
-      console.log(this.mindMapData);
-      const result = Hierarchy.mindmap(this.mindMapData, {
+    // 通过id设置当前操作的思维导图
+    setCurrent(id){
+      // console.log(id);
+      let index = parseInt(id.split('-')[0])-1 || 0
+      this.mindMapDataCurrent = this.mindmapDataUse[index]?this.mindmapDataUse[index].mindmapData:{}
+      this.positionCurrent = this.mindmapDataUse[index]?this.mindmapDataUse[index].position:{x:0,y:0}
+      this.addTypeCurrent = this.mindmapDataUse[index]?this.mindmapDataUse[index].addType:'singleMindmap'
+    },
+    mindMapRender(i){
+      // console.log(this.mindMapDataCurrent);
+      let mindMapType = i || i==0?this.mindmapDataUse[i].addType:this.addTypeCurrent
+      this.mindMapDataCurrent = i || i==0?this.mindmapDataUse[i].mindmapData:this.mindMapDataCurrent
+      this.positionCurrent = i || i==0?this.mindmapDataUse[i].position:this.positionCurrent
+      console.log(this.mindMapDataCurrent,this.positionCurrent,this.addTypeCurrent);
+      const result = Hierarchy.mindmap(this.mindMapDataCurrent, {
         direction: 'H',
         getHeight(d) {
           return d.height
@@ -219,22 +383,24 @@ export default {
         getVGap() {
           return 20
         },
-        getSide: () => {
-          return 'right'
+        getSide: (d) => {
+          return mindMapType.indexOf('double') != -1?d.data.direction || 'left':'right'
         }
       })
       const cells = []
-      let xGap = this.mindmapPosition?this.mindmapPosition.x-result.x:0
-      let yGap = this.mindmapPosition?this.mindmapPosition.y-result.y:0
+      let xGap = this.positionCurrent?this.positionCurrent.x-result.x:0
+      let yGap = this.positionCurrent?this.positionCurrent.y-result.y:0
     
       const traverse = (hierarchyItem) => {
         if (hierarchyItem) {
           const { data, children } = hierarchyItem
-          console.log(hierarchyItem,'hierarchyItemhierarchyItemhierarchyItem');
+          // console.log(hierarchyItem,'hierarchyItemhierarchyItemhierarchyItem');
+          let mindmapDirection = mindMapType.indexOf('double') != -1?data.direction:'right'
+          // console.log(mindmapDirection,data.label,data.direction);
           cells.push(
             this.graph.createNode({
               id: data.id,
-              shape: data.type === 'mindmap-topic-child' ? 'mindmap-topic-child' : 'mindmap-topic',
+              shape:mindmapDirection=='right'?'mindmap-topic-right':mindmapDirection=='left'?'mindmap-topic-left':'mindmap-topic',
               x: xGap+hierarchyItem.x,
               y: yGap+hierarchyItem.y,
               width: data.width,
@@ -246,30 +412,23 @@ export default {
           if (children) {
             children.forEach((item) => {
               const { id, data } = item
+              let mindmapChildDirection = mindMapType.indexOf('double') != -1?data.direction:'right'
               cells.push(
                 this.graph.createEdge({
                   shape: 'mindmap-edge',
                   source: {
                     cell: hierarchyItem.id,
-                    anchor:
-                      data.type === 'mindmap-topic-child'
-                        ? {
-                            name: 'right',
-                            args: {
-                              dx: -16,
-                            },
-                          }
-                        : {
-                            name: 'center',
-                            // args: {
-                            //   dx: '25%',
-                            // },
-                          },
+                    anchor: {
+                      name: 'center',
+                      args: {
+                        dx: mindmapChildDirection=='right'?'25%':mindmapChildDirection=='left'?'-25%':0,
+                      },
+                    },
                   },
                   target: {
                     cell: id,
                     anchor: {
-                      name: 'left',
+                      name: mindmapChildDirection =='left'?'right':'left',
                     },
                   },
                 }),
@@ -280,7 +439,7 @@ export default {
         }
       }
       traverse(result)
-      console.log(cells,'result');
+      // console.log(cells,'result');
       this.graph.removeCells(cells)
       this.graph.addCell(cells)
       // this.graph.resetCells(cells)
@@ -307,8 +466,8 @@ export default {
       }
       return null
     },
-    addChildNode (id, type){
-      const res = this.findItem(this.mindMapData, id)
+    addChildNode (id, type,direction='left'){
+      const res = this.findItem(this.mindMapDataCurrent, id)
       const dataItem = res && res.node
       if (dataItem) {
         let item = null
@@ -320,14 +479,16 @@ export default {
             label: `分支主题${length + 1}`,
             width: 100,
             height: 40,
+            direction
           }
-        } else if (type === 'topic-branch') {
+        } else if (type === 'topic-branch' || type=='topic-child') {
           item = {
             id: `${id}-${length + 1}`,
-            type: 'topic',
+            type: 'topic-child',
             label: `子主题${length + 1}`,
             width: 60,
             height: 30,
+            direction
           }
         }
         if (item) {
@@ -342,7 +503,7 @@ export default {
       return null
     },
     removeNode (id) {
-      const res = this.findItem(this.mindMapData, id)
+      const res = this.findItem(this.mindMapDataCurrent, id)
       const dataItem = res && res.parent
       if (dataItem && dataItem.children) {
         const { children } = dataItem

src/views/sandbox_manage/common/node.js

@@ -9,41 +9,40 @@ const styleConfig=store.state.sand.styleConfig
 //定义图形
 const configStyles = {
 	rect: {
-		width: '60px',
-		height: '40px',
-		border: `1px solid ${border.borderColor}`,
-		backgroundColor: border.fill,
+		width: '30px',
+		height: '18px',
+		border: `2px solid #27292A`
 	},
 	roundRect: {
-		width: '60px',
-		height: '40px',
-		border: `1px solid ${border.borderColor}`,
-		backgroundColor: border.fill,
+		width: '30px',
+		height: '18px',
+		border: `2px solid #27292A`,
 		borderRadius:"8px"
 	},
 	ellipse:{
-		width: '60px',
-		height: '40px',
-		border: `1px solid ${border.borderColor}`,
-		backgroundColor: border.fill,
+		width: '30px',
+		height: '18px',
+		border: `2px solid #27292A`,
 		borderRadius:"100%"
 	},
 	rhomboid:{
-		width: '50px',
-		height: '50px',
-		border: `1px solid ${border.borderColor}`,
-		backgroundColor: border.fill,
-		transform: 'rotate(-45deg) scale(0.7)'
+		width: '14px',
+		height: '14px',
+		border: `2px solid #27292A`,
+		transform: 'rotate(-45deg) skew(10deg, 10deg)',
+		position:'relative',
+		left:'4px',
+		marginRight:'6px'
 	},
 	text: {
-		width: '60px',
-		height: '40px',
+		width: '30px',
+		height: '18px',
 		textAlign: 'center',
-		lineHeight: '40px',
-		background: '#fff',
-		color: text.color,
+		lineHeight: '18px',
+		border: `2px solid #27292A`,
+		color: '#333333',
 		fontSize: '14px',
-		fontWeight: 'normal',
+		fontWeight: 'bold',
 	},
 }
 
@@ -52,6 +51,7 @@ export const myNodes = [
 		shape: 'rect',
 		key: 'rect',
 		label:'',
+		img:'~@/assets/img/chart_m/User_act.png',
 		styles: {
 			...configStyles.rect,
 		}
@@ -83,7 +83,7 @@ export const myNodes = [
 	{
 		shape: 'rect',
 		key: 'text',
-		label: '文本框',
+		label: 'T',
 		styles: {
 			...configStyles.text,
 		}

src/views/sandbox_manage/common/options.js

@@ -4,16 +4,25 @@ export const contextMenuOption = [
 	{
 		label: '复制',
 		key: 'copy',
-		icon: 'el-icon-document-copy'
+		icon: 'el-icon-document-copy',
+		show:true
 	},
 	{
 		label: '删除',
 		key: 'del',
-		icon: 'el-icon-delete'
+		icon: 'el-icon-delete',
+		show:true
 	},
 	{
 		label: '添加链接',
 		key: 'addLink',
-		icon: 'el-icon-delete'
+		icon: 'el-icon-link',
+		show:true
+	},
+	{
+		label: '清除链接',
+		key: 'deleteLink',
+		icon: 'el-icon-delete',
+		show:true
 	},
 ]

src/views/sandbox_manage/sandFlowNew/popover.vue

@@ -0,0 +1,83 @@
+<template>
+  <el-popover
+    placement="top"
+    trigger="manual"
+    v-model="popoverVisible">
+    <div id="link-popover" :style="{height:popoverFlod?'20px':'unset'}">
+      <div class="link-box">
+        <div v-for="item in checkedLinkList" :key="item.RId" class="link-item">
+          {{ item.Name }}
+        </div>
+      </div>
+      <img src="~@/assets/img/sand_new/arrow_black_down.png" class="link-fold" 
+      :style="{transform:popoverFlod?'':'rotate(180deg)'}" v-show="checkedLinkList.length>1"
+      @click="foldLink"/>
+    </div>
+    <div id="link-reference" slot="reference">不可拖拽</div>
+  </el-popover>
+</template>
+
+<script>
+  export default {
+    name:'linkPopover',
+    inject: ["getGraph", "getNode"],
+    data() {
+      return {
+        checkedLinkList:[],
+        popoverFlod:true,
+        node:null,
+        popoverVisible:false
+      }
+    },
+    mounted(){
+      const self = this;
+      this.node = this.getNode();
+      const graph = this.getGraph()
+      console.log(this.node,'this.node');
+      graph.on("node:mouseenter", ({ node, e }) => {
+        console.log(node, e);
+        this.popoverVisible=true
+        if(node.data){
+          this.checkedLinkList = node.data.linkData || []
+        }
+        console.log(this.checkedLinkList);
+      });
+    },
+    methods:{
+      foldLink(){
+        this.popoverFlod=!this.popoverFlod 
+        if(this.node.data){
+          this.node.data.linkFold = this.popoverFlod
+        }
+        this.popoverVisible=false
+        this.$nextTick(()=>{
+          this.popoverVisible=true
+        })
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  #link-popover{
+    display: flex;
+    justify-content: space-between;
+    transition: all 0.3s ease;
+    overflow: hidden;
+    .link-box{
+      .link-item{
+        &:hover{
+          text-decoration: underline;
+          color: #0052D9;
+          cursor: pointer;
+        }
+      }
+    }
+    .link-fold{
+      transition: all 0.3s ease;
+      height: 16px;
+      width: 16px;
+      cursor: pointer;
+    }
+  }
+</style>