冲突解决

src/views/sandbox_manage/common/edge.js

@@ -4,12 +4,7 @@ const { line} = configOpt;
 import store from "@/vuex/index"
 
 const styleConfig=store.state.sand.styleConfig
-// export const myEdges = [
-// 	{
-// 		type: 'noArrowStraight',
-//     ImgUrl:'~@/assets/icons/arrow.svg'
-// 	}
-// ]
+
 /**type--类型  xP--定位点的横坐标 yP--定位点的纵坐标
  * 创建的线条
  * 斜直线无箭头、斜直线单项箭头、斜直线双线箭头

src/views/sandbox_manage/common/events.js

@@ -5,13 +5,11 @@ const { line} = configOpt;
 
 /* 节点操作监听事件 */
 export const myEvents = (graph,mindmapDataUseFun) => {
-		
 		/* 节点双击编辑 */
 		graph.on('node:dblclick', ({ node, e }) => {
 			// 节点当前设置的样式同步到编辑区
 
 			const { text, rect} = node.attrs;
-			// console.log(node,'nodenode');
 			const edit_area = document.createElement('div');
 			edit_area.contentEditable = "true";
 			edit_area.id = "editable-wrapper";
@@ -23,25 +21,14 @@ export const myEvents = (graph,mindmapDataUseFun) => {
 
 			const position = node.position();
       const size = node.size();
-			// console.log(position,size);
-      // const pos = graph.localToClient(position);
       const pos = graph.localToGraph(position);
       const zoom = graph.zoom();
       let width = size.width,height = size.height;
 
-			// const edit_area =  $('#editable-wrapper')[0];
-			// if(node.shape.indexOf('mindmap')!==-1){
-
-			// 	edit_area.innerText = text.text
-			// 	node.attr('text/text', '');
-			// }else{
-				edit_area.innerText = text.text || text.textWrap.text || ' ';
-				// 开启editText的事务 
-				graph.startBatch('editText')
-				node.attr('text/textWrap/text', '');
-				
-			// }
-
+			edit_area.innerText = text.text || text.textWrap.text || ' ';
+			// 开启editText的事务 
+			graph.startBatch('editText')
+			node.attr('text/textWrap/text', '');
 
 			edit_area.style.left = `${pos.x}px`;
 			edit_area.style.top = `${pos.y}px`;
@@ -68,15 +55,12 @@ export const myEvents = (graph,mindmapDataUseFun) => {
 			edit_area.oninput = () => {
 				const domH = (edit_area.getBoundingClientRect().height) /zoom;
 				node.size(width,domH > 50 ? domH : 50);
-				// node.size(width,domH > height ? domH : height);
-
 			}
 
 			//失焦后设置内容
 			edit_area.onblur = () => {
 				let newval = edit_area.innerText.replace(/(\n[\s\t]*\r*\n)/g,'\n');
 
-				// console.log(node.shape,'edit_area');
 
 				node.attr('text/textWrap/text', newval);
 				node.attr('text/text', newval);
@@ -84,7 +68,8 @@ export const myEvents = (graph,mindmapDataUseFun) => {
 				graph.stopBatch('editText')
 
 				if(node.shape.indexOf('mindmap')!==-1){
-					const mindmapDataUse=mindmapDataUseFun()
+					if(!mindmapDataUseFun) return 
+					const mindmapDataUse=mindmapDataUseFun().mindmapDataUse
 					let ids = node.id.split('-')
 					let mindmapDataIndex = mindmapDataUse.findIndex(mindmap => mindmap.mindmapData.id == ids[0])
 					let mindMapDataCurrent = mindmapDataUse[mindmapDataIndex]?mindmapDataUse[mindmapDataIndex].mindmapData:{}
@@ -97,23 +82,15 @@ export const myEvents = (graph,mindmapDataUseFun) => {
 					}
 					mindMapDataCurrent.label = newval
 				}
-				if(node.shape.indexOf('mindmap')==-1){
-					const domH = (edit_area.getBoundingClientRect().height) /zoom;
-					node.size(width,domH > 50 ? domH : 50);
-					// node.size(width,domH);
-				}else{
-					const domH = (edit_area.getBoundingClientRect().height) /zoom;
-					// node.size(width,domH);
-					node.size(width,domH > 50 ? domH : 50);
-					// node.fit({ deep: true })
-				}
+
+				const domH = (edit_area.getBoundingClientRect().height) /zoom;
+				node.size(width,domH > 50 ? domH : 50);
 
 				$('#sand-chart-container')[0].removeChild(edit_area);
 			}
 		})
 		/* 鼠标移入移出控制连接桩 */
 		graph.on('node:mouseenter', ({ node, e }) => {
-			// console.log(node)
 			for(let i of document.querySelectorAll(`g[data-cell-id="${node.id}"] .x6-port-body`)) {
 				i.style.display = 'block'
 			}
@@ -135,7 +112,6 @@ export const myEvents = (graph,mindmapDataUseFun) => {
 
 		/* 选中事件 */
 		// graph.on('cell:selected',({cell,options}) => {
-		// 	// console.log(cell)
 		// 	//节点
 		// 	if(cell.shape === 'rect') {
 		// 		const { key } = cell.data;
@@ -174,21 +150,16 @@ export const myEvents = (graph,mindmapDataUseFun) => {
 		// })
 
 		const changeSelection=_.debounce((selected)=> {
-			// console.log(selected,'selected');
 			store.commit('sand/SET_SELECT_CELLS',selected)
 		},50)
 
 		/* 监听选中事件 */
 		graph.on('selection:changed',({selected}) => {
-			// console.log(selected,'选中修改');
-			// selected.length ? store.commit('sand/SET_SELECT_CELL',selected[0]) : store.commit('sand/SET_SELECT_CELL',null);
 			changeSelection(selected)
 		})
 
 		/* 监听选中事件 */
 		graph.on('edge:mouseenter', ({ cell }) => {
-			// console.log(cell,'myEdgeOption');
-			// console.log(cell.store.data);
 			if(cell.store.data.shape=="mindmap-edge"){
 				// 思维导图的边
 			}else{
@@ -236,11 +207,10 @@ export const myEvents = (graph,mindmapDataUseFun) => {
 }
 
 /* 绑定键盘事件 */
-export const bindKey = (graph,mindmapDataUseFun,mindmapAssistData) => {
+export const bindKey = (graph,mindmapDataUseFun) => {
 	 // 删除
 	graph.bindKey(['delete', 'backspace'], () => {
-		const mindmapDataUse=mindmapDataUseFun()
-		deleteNodes(graph,mindmapDataUse,mindmapAssistData)
+		deleteNodes(graph,mindmapDataUseFun)
 		return false
 	}, 'keydown');
 
@@ -278,27 +248,20 @@ export const bindKey = (graph,mindmapDataUseFun,mindmapAssistData) => {
 }
 
 /* 右键事件 */
-export const contextEvent = (graph,key,mindmapDataUse,mindmapAssistData) => {
-	// console.log(key)
+export const contextEvent = (graph,key,mindmapDataUseFun) => {
 	switch (key) {
 		case 'copy':
 			nodeCopyAndPaste(graph);
 			break;
 		case 'del': 
-			nodeDelete(graph,mindmapDataUse,mindmapAssistData);
+			deleteNodes(graph,mindmapDataUseFun);
 			break;
 	}
 }
 
-/* 删除节点 清空选区*/
-const nodeDelete = (graph,mindmapDataUse,mindmapAssistData) => {
-	deleteNodes(graph,mindmapDataUse,mindmapAssistData)
-}
 /* 复制粘贴节点 */
 const nodeCopyAndPaste = (graph) => {
 	const select_cell = graph.getSelectedCells();
-	// console.log(select_cell)
-	// return
 	if (select_cell.length) {
 		graph.copy(select_cell);
 		const copy_cell = graph.paste({ offset: 30 });
@@ -309,7 +272,6 @@ const nodeCopyAndPaste = (graph) => {
 
 /* 关联三种基础图形选中样式 */
 // const setSelectedOptions = ({ rect, text }, key) => {
-// 	console.log({ rect, text },'{ rect, text }',key);
 // 	return ['rect','date'].includes(key) ? {
 // 		text: { //文本设置
 // 			size: text.fontSize,
@@ -332,13 +294,19 @@ const nodeCopyAndPaste = (graph) => {
 // 	}: {}
 // }
 
-const deleteNodes=(graph,mindmapDataUse,mindmapAssistData)=>{
-	console.log(mindmapDataUse,mindmapAssistData,'最源数据');
+const deleteNodes=(graph,mindmapDataUseFun)=>{
 	const select_cell = graph.getSelectedCells();
 	let delete_cells=[]
+	if(!mindmapDataUseFun){
+		delete_cells = select_cell
+		if (delete_cells.length) {
+			// 移除工具
+			delete_cells.forEach(item => item.removeTools());
+			graph.removeCells(delete_cells)
+		}
+		return 
+	}
 	let mindmapCell=[]
-	// return 
-	// console.log(select_cell.length,'select_cell.length');
 	for (let i = 0; i < select_cell.length; i++) {
 		const cell = select_cell[i];
 		if(cell.shape == "mindmap-edge"){
@@ -347,63 +315,53 @@ const deleteNodes=(graph,mindmapDataUse,mindmapAssistData)=>{
 			mindmapCell.push(cell)
 			// 拿到该节点的所有子节点
 			let Successors = graph.getSuccessors(cell) 
-			// console.log(Successors,'Successors');
 			mindmapCell = [...mindmapCell,...Successors]
 		}
 		delete_cells.push(cell)
 	}
 	// 去重
 	const uniqueArr = mindmapCell.filter((item, index) => mindmapCell.findIndex(i => i.id === item.id) === index);
-	// console.log(uniqueArr,'uniqueArr');
 
 	delete_cells = [...delete_cells,...uniqueArr]
-	// return 
 	if (delete_cells.length) {
 		// 移除工具
 		delete_cells.forEach(item => item.removeTools());
 		graph.removeCells(delete_cells)
 	}
+	const mindmapAssistData = mindmapDataUseFun()
+
 	let shouldOperations=[]
-	mindmapDataUse.map((item,index)=>{
+	mindmapAssistData.mindmapDataUse.map((item,index)=>{
 		let levelIds = uniqueArr.filter(mindMap => mindMap.id.startsWith(item.mindmapData.id)).map(mindMap => mindMap.id)
-		// console.log(levelIds,'levelIds');
 		if(!(levelIds && levelIds.length>0)) return 
-		// console.log(levelIds,'levelIds');
 		let mindMapIds=[...levelIds]
 		for (let i = 0; i < levelIds.length; i++) {
 			const element = levelIds[i]
 			mindMapIds=mindMapIds.filter( id => id.indexOf(element) !=0 || id==element)
 		}
-		// console.log(mindMapIds,'mindMapIds');
 		shouldOperations.push(mindMapIds)
 	})
-	// 删除前备份
-	console.log(mindmapDataUse,'元数据');
-	mindmapAssistData.mindmapDataRecoverUse=[JSON.stringify(mindmapDataUse)]
 
-	console.log('删除备份',JSON.parse(mindmapAssistData.mindmapDataRecoverUse[0]),mindmapAssistData.mindmapDataRecoverUse.length,mindmapAssistData.mindmapDataRecoverUse);
-	
-	// console.log(shouldOperations,'shouldOperations');
+	mindmapAssistData.deletedMindmapData.push([])
 	shouldOperations.map(it =>{
 		it.map(it1 =>{
-			deleteMindmapData(it1,mindmapDataUse)
+			deleteMindmapData(it1,mindmapAssistData)
 		})
 	})
-	// console.log(mindmapDataUse,'mindmapDataUse',mindmapAssistData,'mindmapAssistData');
-
 }
 
 const deleteMindmapData=(id,data)=>{
-	// console.log(id,data,'id,data');
-	// return 
+
 	let ids = id.split('-')
-	let mindmapDataIndex = data.findIndex(mindmap => mindmap.mindmapData.id == ids[0])
+	let mindmapDataIndex = data.mindmapDataUse.findIndex(mindmap => mindmap.mindmapData.id == ids[0])
 	if(ids.length==1){
-		data.splice(mindmapDataIndex,1)
+		let spliceData=data.mindmapDataUse.splice(mindmapDataIndex,1)
+		// 备份删除掉的数据
+		data.deletedMindmapData[data.deletedMindmapData.length-1].push(spliceData)
 		return 
 	}
 
-	let mindmapData = data[mindmapDataIndex].mindmapData
+	let mindmapData = data.mindmapDataUse[mindmapDataIndex].mindmapData
 	let findId = ids[0]
 	for (let i = 1; i < ids.length-1; i++) {
 		const element = ids[i];
@@ -418,6 +376,6 @@ const deleteMindmapData=(id,data)=>{
 		return 
 	}
 	let endIndex = mindmapData.children.findIndex(it => it.id == findId+'-'+endId)
-	mindmapData.children.splice(endIndex,1)
-	// console.log(data);
+	let spliceData=mindmapData.children.splice(endIndex,1)
+	data.deletedMindmapData[data.deletedMindmapData.length-1].push(spliceData)
 }

src/views/sandbox_manage/common/gragh.js

@@ -2,12 +2,11 @@ import { Graph,Shape } from '@antv/x6';
 import { bindKey,myEvents } from './events';
 import { configOpt } from './toolConfig';
 import store from '@/vuex/index'
-console.log(store,'store');
 const styleConfig=store.state.sand.styleConfig
 
 const { line } = configOpt;
 // wrapper DOM的Id mindmapDataUseFun 返回思维导图数组函数，传递给事件 type 模式，编辑和查看
-export function myGraph (wrapper,mindmapDataUseFun,mindmapAssistData,type='edit') {
+export function myGraph (wrapper,mindmapDataUseFun,type='edit') {
 	const graph = new Graph({
 		container: document.getElementById(wrapper),
 		// width: $(window).width(),
@@ -15,7 +14,6 @@ export function myGraph (wrapper,mindmapDataUseFun,mindmapAssistData,type='edit'
 		history:{
 			enabled:true,
 			beforeAddCommand(event, args){
-				console.log(event, args,'event, args');
 				if(args.key=='tools'){
 					// 工具的改变不加入撤销和重做的队列
 					return false
@@ -61,7 +59,7 @@ export function myGraph (wrapper,mindmapDataUseFun,mindmapAssistData,type='edit'
 			visible: false,
 		},
 		highlighting: {
-			// 当链接桩可以被链接时，在链接桩外围渲染一个 2px 宽的红色矩形框
+			// 当链接桩可以被链接时，在链接桩外围渲染一个 2px 宽的天蓝色矩形框
 			magnetAvailable: {
 					name: "stroke",
 					args: {
@@ -150,7 +148,7 @@ export function myGraph (wrapper,mindmapDataUseFun,mindmapAssistData,type='edit'
 	
 
 	/* 键盘事件 */
-	if(type!='view') bindKey(graph,mindmapDataUseFun,mindmapAssistData);
+	if(type!='view') bindKey(graph,mindmapDataUseFun);
 
 	return graph;
 }

src/views/sandbox_manage/common/mindmap.js

@@ -7,7 +7,12 @@ export default {
       mindMapDataCurrent:{},
       positionCurrent:{},
       addTypeCurrent:'',
-      styleConfig:{}
+      styleConfig:{},
+      mindmapAssistData:{
+        mindmapDataUse:[],
+        deletedMindmapData:[],// 用于撤销删除，恢复删除掉的数据
+        mindmapDataRecoverUse:[],//用于 重做时 恢复思维导图数据
+      },
     }
   },
   mounted() {
@@ -15,7 +20,6 @@ export default {
   },
   created() {
     this.styleConfig=this.$store.state.sand.styleConfig
-    // console.log(this.styleConfig,'this.styleConfig');
     // 中心主题
     Graph.registerNode(
       'mindmap-topic',          
@@ -43,8 +47,6 @@ export default {
           body: {
             rx: 6,
             ry: 6,
-            // stroke: this.$store.state.sand.styleConfig.borderColor,
-            // fill: this.$store.state.sand.styleConfig.backgroundColor,
             strokeWidth: 1,
             width:100,
             height:50
@@ -111,8 +113,6 @@ export default {
           body: {
             rx: 6,
             ry: 6,
-            // stroke: this.$store.state.sand.styleConfig.borderColor,
-            // fill: this.$store.state.sand.styleConfig.backgroundColor,
             strokeWidth: 1,
             width:100,
             height:50
@@ -167,8 +167,6 @@ export default {
           body: {
             rx: 6,
             ry: 6,
-            // stroke: this.$store.state.sand.styleConfig.borderColor,
-            // fill: this.$store.state.sand.styleConfig.backgroundColor,
             strokeWidth: 1,
             width:100,
             height:50
@@ -196,53 +194,12 @@ export default {
       },
       true,
     )
-    // 分支主题
-    // Graph.registerNode(
-    //   'mindmap-topic-child',
-    //   {
-    //     inherit: 'rect',
-    //     markup: [
-    //       {
-    //         tagName: 'rect',
-    //         selector: 'body',
-    //       },
-    //       {
-    //         tagName: 'text',
-    //         selector: 'text',
-    //       },
-    //       {
-    //         tagName: 'path',
-    //         selector: 'line',
-    //       },
-    //     ],
-    //     attrs: {
-    //       body: {
-    //         fill: '#ffffff',
-    //         strokeWidth: 0,
-    //         stroke: '#5F95FF',
-    //       },
-    //       text: {
-    //         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');
         const midX = sourcePoint.x + 10
-        const midY = sourcePoint.y
+        // const midY = sourcePoint.y
         const ctrX = (targetPoint.x - midX) / 5 + midX
         const ctrY = targetPoint.y
         const pathData = `
@@ -265,7 +222,6 @@ export default {
         attrs: {
           line: {
             targetMarker: false,
-            // stroke: this.$store.state.sand.styleConfig.lineColor,
             strokeWidth: 2,
           },
         },
@@ -276,6 +232,7 @@ export default {
   },
   methods: {
     setGraph(){
+      // 添加左边节点
       this.graph.on('add:topic:left', ({ node }) => {
         if(this.operationType=='view') return 
         const { id } = node
@@ -285,7 +242,7 @@ export default {
           this.mindMapRender()      
         }
       })
-
+      // 添加右边节点
       this.graph.on('add:topic:right', ({ node }) => {
         if(this.operationType=='view') return 
         const { id } = node
@@ -295,12 +252,13 @@ export default {
           this.mindMapRender()      
         }
       })
+      // 改变大小 - 更新数据源
       this.graph.on('node:change:size', (args) => { 
         if(this.operationType=='view') return 
         if(args.node.shape.indexOf('mindmap')!==-1){
           let ids = args.node.id.split('-')
-					let mindmapDataIndex = this.mindmapDataUse.findIndex(mindmap => mindmap.mindmapData.id == ids[0])
-					let mindMapDataCurrent = this.mindmapDataUse[mindmapDataIndex]?this.mindmapDataUse[mindmapDataIndex].mindmapData:{}
+					let mindmapDataIndex = this.mindmapAssistData.mindmapDataUse.findIndex(mindmap => mindmap.mindmapData.id == ids[0])
+					let mindMapDataCurrent = this.mindmapAssistData.mindmapDataUse[mindmapDataIndex]?this.mindmapAssistData.mindmapDataUse[mindmapDataIndex].mindmapData:{}
 
 					let findId = ids[0]
 
@@ -314,39 +272,19 @@ export default {
 					mindMapDataCurrent.height = args.node.size().height
         }
       })
+      // 改变位置 - 更新数据源
       this.graph.on('node:change:position', (args) => { 
         if(this.operationType=='view') return 
         if(args.node.shape.indexOf('mindmap')!==-1 && Number(args.node.id)){
 
-          let index = this.mindmapDataUse.findIndex(it =>it.mindmapData.id == args.node.id)
-          // let index = Number(args.node.id)
+          let index = this.mindmapAssistData.mindmapDataUse.findIndex(it =>it.mindmapData.id == args.node.id)
           if(index!=-1){
-            this.mindmapDataUse[index].position = args.current
-          // this.setCurrent(args.node.id)
+            this.mindmapAssistData.mindmapDataUse[index].position = args.current
           }
         }
       })
-      // this.graph.on('node:added', ({node}) => { 
-      //   if(node.shape.indexOf('mindmap')!=-1){
-      //     // 思维导图需要处理相对应的数据
-      //     console.log('mindmap',node.id);
-      //   }
-      //   console.log(node,'node:added');
-      // })
-      // this.graph.on('node:removed', (args) => { 
-      //   console.log(args,'node:removed');
-      // })
-      // this.graph.bindKey(['backspace', 'delete'], () => {
-      //   const selectedNodes = this.graph.getSelectedCells().filter((item) => item.isNode())
-      //   if (selectedNodes.length) {
-      //     const { id } = selectedNodes[0]
-      //     if (this.removeNode(id)) {
-      //       this.mindMapRender()
-      //     }
-      //   }
-      // })
-      
-      this.graph.bindKey('tab', (e) => {  
+      // tab 键添加节点-右边的 - 更新数据源
+      this.graph.bindKey('tab', (e) => {
         if(this.operationType=='view') return 
         e.preventDefault()
         const selectedNodes = this.graph.getSelectedCells().filter((item) => {
@@ -362,20 +300,88 @@ export default {
           }
         }
       })
+      // 撤销 - 入栈
+      this.graph.history.on('undo', (args) => { 
+        let mindmapNodes=args.cmds.filter(it => it.data.props && it.data.props.shape.indexOf('mindmap')!=-1 && it.data.node)
+        if(!(mindmapNodes && mindmapNodes.length>0)) return 
+        let mindmapUndoType=mindmapNodes[0].event
+        
+        if(mindmapUndoType=="cell:added"){
+          this.mindmapDeleteRecordPush(mindmapNodes)
+        }else if(mindmapUndoType=="cell:removed"){
+          this.mindmapAddRecordPush()
+        }
+      })
+      // 重做，出栈
+      this.graph.history.on('redo', (args) => { 
+        let mindmapNodes=args.cmds.filter(it => it.data.props && it.data.props.shape.indexOf('mindmap')!=-1 && it.data.node)
+        if(!(mindmapNodes && mindmapNodes.length>0)) return
+        this.mindmapRecover()
+      })
+    },
+    // 生成思维导图初始化数据
+    generateMindmapData(position,addType){
+      let beId=this.mindmapAssistData.mindmapDataUse.length>0?
+      parseInt(this.mindmapAssistData.mindmapDataUse[this.mindmapAssistData.mindmapDataUse.length-1].mindmapData.id)+1+'':'1'
+      let mindmapData={
+        id: beId,
+        type: 'topic',
+        label: '中心主题',
+        width: 160,
+        height: 50,
+        direction:'double',
+        children: [
+          {
+            id: beId+'-1',
+            type: 'topic-branch',
+            label: '分支主题1',
+            width: 100,
+            height: 40,
+            direction:'left',
+            children: [
+              {
+                id: beId+'-1-1',
+                type: 'topic-child',
+                label: '子主题1',
+                width: 60,
+                height: 30,
+                direction:'left',
+              },
+              {
+                id: beId+'-1-2',
+                type: 'topic-child',
+                label: '子主题2',
+                width: 60,
+                height: 30,
+                direction:'left',
+              },
+            ],
+          },
+          {
+            id: beId+'-2',
+            type: 'topic-branch',
+            label: '分支主题2',
+            width: 100,
+            height: 40,
+            direction:'right',
+          },
+        ],
+      }
+      this.mindmapAssistData.mindmapDataUse.push({mindmapData,position,addType})
     },
     // 通过id设置当前操作的思维导图
     setCurrent(id){
       let rootId = id.split('-')[0]
-      let index = this.mindmapDataUse.findIndex(it =>it.mindmapData.id == rootId)
-      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'
+      let index = this.mindmapAssistData.mindmapDataUse.findIndex(it =>it.mindmapData.id == rootId)
+      this.mindMapDataCurrent = this.mindmapAssistData.mindmapDataUse[index]?this.mindmapAssistData.mindmapDataUse[index].mindmapData:{}
+      this.positionCurrent = this.mindmapAssistData.mindmapDataUse[index]?this.mindmapAssistData.mindmapDataUse[index].position:{x:0,y:0}
+      this.addTypeCurrent = this.mindmapAssistData.mindmapDataUse[index]?this.mindmapAssistData.mindmapDataUse[index].addType:'singleMindmap'
     },
     mindMapRender(i){
       this.graph.startBatch('renderMindmap')
-      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
+      let mindMapType = i || i==0?this.mindmapAssistData.mindmapDataUse[i].addType:this.addTypeCurrent
+      this.mindMapDataCurrent = i || i==0?this.mindmapAssistData.mindmapDataUse[i].mindmapData:this.mindMapDataCurrent
+      this.positionCurrent = i || i==0?this.mindmapAssistData.mindmapDataUse[i].position:this.positionCurrent
       const result = Hierarchy.mindmap(this.mindMapDataCurrent, {
         direction: 'H',
         getHeight(d) {
@@ -397,14 +403,11 @@ export default {
       const cells = []
       let xGap = this.positionCurrent?this.positionCurrent.x-result.x:0
       let yGap = this.positionCurrent?this.positionCurrent.y-result.y:0
-      // console.log(result,'result');
-      // return 
+
       const traverse = (hierarchyItem) => {
         if (hierarchyItem) {
           const { data, children } = hierarchyItem
-          // console.log(hierarchyItem,'hierarchyItemhierarchyItemhierarchyItem');
           let mindmapDirection = mindMapType.indexOf('double') != -1?data.direction:'right'
-          // console.log(mindmapDirection,data.label,data.direction);
           let currentCell=this.graph.getCellById(data.id)
 
           if(!currentCell){
@@ -434,7 +437,6 @@ export default {
             // 有，更新下位置信息
             currentCell.position(xGap+hierarchyItem.x,yGap+hierarchyItem.y)
           }
-          // return 
    
           if (children) {
             children.forEach((item) => {
@@ -477,13 +479,10 @@ export default {
       traverse(result)
       // 排下序，把边放最后面 不然 边 会找不到 节点
       let sortCells = cells.sort(cell => cell.shape.indexOf('edge'))
-      // console.log(sortCells,'result');
-      // return 
-      // this.graph.removeCells(sortCells)
+
       this.graph.addCell(sortCells)
       this.graph.stopBatch('renderMindmap')
-      // this.graph.resetCells(cells)
-      // this.graph.centerContent()
+
     },
     findItem(obj,id){
       if (obj.id === id) {
@@ -507,16 +506,13 @@ export default {
       return null
     },
     addChildNode (id, type,direction='left'){
-      console.log('添加');
       // 重做不了 清空重做栈
       this.mindmapAssistData.mindmapDataRecoverUse = []
-      // console.log(this.mindmapAssistData);
 
       const res = this.findItem(this.mindMapDataCurrent, id)
       const dataItem = res && res.node
       if (dataItem) {
         let item = null
-        // console.log(dataItem.children);
         let addId ='1'
         if(dataItem.children && dataItem.children.length>0){
           let ids = dataItem.children[dataItem.children.length-1].id.split('-')
@@ -552,15 +548,134 @@ export default {
       }
       return null
     },
-    removeNode (id) {
-      const res = this.findItem(this.mindMapDataCurrent, id)
-      const dataItem = res && res.parent
-      if (dataItem && dataItem.children) {
-        const { children } = dataItem
-        const index = children.findIndex((item) => item.id === id)
-        return children.splice(index, 1)
+    getMindmapDataUse(){
+      return this.mindmapAssistData
+    },
+    mindmapDeleteRecordPush(mindmapNodes){
+      let shouldOperations=[]
+      this.mindmapAssistData.mindmapDataUse.map((item,index)=>{
+        let levelIds = mindmapNodes.filter(mindMap => mindMap.data.id.startsWith(item.mindmapData.id)).map(mindMap => mindMap.data.id)
+        if(!(levelIds && levelIds.length>0)) return 
+        let mindMapIds=[...levelIds]
+        for (let i = 0; i < levelIds.length; i++) {
+          const element = levelIds[i]
+          mindMapIds=mindMapIds.filter( id => id.indexOf(element) !=0 || id==element)
+        }
+        shouldOperations.push(mindMapIds)
+      })
+      // 入栈
+      if(!this.canRedo){
+        this.mindmapAssistData.mindmapDataRecoverUse=[JSON.stringify(this.mindmapAssistData.mindmapDataUse)]
+      }else{
+        this.mindmapAssistData.mindmapDataRecoverUse.push(JSON.stringify(this.mindmapAssistData.mindmapDataUse))
       }
-      return null
-    }
+      shouldOperations.map(it =>{
+        it.map(it1 =>{
+          this.deleteMindmapData(it1,this.mindmapAssistData.mindmapDataUse)
+        })
+      })
+    },
+    mindmapAddRecordPush(){
+      // 入栈
+      if(!this.canRedo){
+        this.mindmapAssistData.mindmapDataRecoverUse=[JSON.stringify(this.mindmapAssistData.mindmapDataUse)]
+      }else{
+        this.mindmapAssistData.mindmapDataRecoverUse.push(JSON.stringify(this.mindmapAssistData.mindmapDataUse))
+      }
+      let recoverDeletedData=this.mindmapAssistData.deletedMindmapData.pop()
+      if(recoverDeletedData && recoverDeletedData.length>0){
+        // 添加
+        recoverDeletedData.map(it =>{
+          it.map(it1 =>{
+            this.addMindmapData(it1,this.mindmapAssistData.mindmapDataUse)
+          })
+        })
+      }
+    },
+    deleteMindmapData(id,data){
+      let ids = id.split('-')
+      let mindmapDataIndex = data.findIndex(mindmap => mindmap.mindmapData.id == ids[0])
+      if(ids.length==1){
+        data.splice(mindmapDataIndex,1)
+        return 
+      }
+
+      let mindmapData = data[mindmapDataIndex].mindmapData
+      let findId = ids[0]
+      for (let i = 1; i < ids.length-1; i++) {
+        const element = ids[i];
+        findId = findId+'-'+element
+        mindmapData=mindmapData.children.find(it => it.id==findId)
+      }
+      let endId = ids[ids.length-1]
+      let endIndex = mindmapData.children.findIndex(it => it.id == findId+'-'+endId)
+      mindmapData.children.splice(endIndex,1)
+    },
+    addMindmapData(item,data){
+      let isRoot = item.mindmapData?true:false
+      let id = isRoot?item.mindmapData.id:item.id
+      
+      if(isRoot){
+        // 恢复根节点
+        let mindmapDataIndexRoot=data.length
+        for (let i = 0; i < data.length-1; i++) {
+          const element = data[i];
+          if((+id) < (+element.mindmapData.id)){
+            mindmapDataIndexRoot=0
+            break
+          }else if((+id) > (+element.mindmapData.id) && (+id) < (+data[i+1].mindmapData.id)){
+            mindmapDataIndexRoot=i+1
+            break
+          }
+        }
+        data.splice(mindmapDataIndexRoot,0,item)
+        return
+      }
+
+      let ids = id.split('-')
+      let mindmapDataIndex = data.findIndex(mindmap => {
+        return mindmap.mindmapData.id == ids[0]
+      })
+      let mindmapData = data[mindmapDataIndex].mindmapData
+      let findId = ids[0]
+      for (let i = 1; i < ids.length-1; i++) {
+        const element = ids[i];
+        findId = findId+'-'+element
+        mindmapData=mindmapData.children.find(it => it.id==findId)
+      }
+      let endId = ids[ids.length-1]
+      let endIndex = mindmapData.children.length
+      if(mindmapData.children.length==1){
+        // 只有一个
+        let prevIdx = mindmapData.children[0].id.substring(mindmapData.children[0].id.lastIndexOf('-')+1)
+        if((+endId) < (+prevIdx)){
+          endIndex=0
+        }else{
+          endIndex=1
+        }
+      }else{
+        for (let i = 0; i < mindmapData.children.length-1; i++) {
+          // 两个及以上
+          const element = mindmapData.children[i];
+
+          let prevIdx = element.id.substring(element.id.lastIndexOf('-')+1)
+          let nextIdx = mindmapData.children[i+1].id.substring(mindmapData.children[i+1].id.lastIndexOf('-')+1)
+          // 找到对应位置，前提 id是按顺序的
+          if((+endId) < (+prevIdx)){
+            endIndex=0
+            break
+          }else if((+endId) > (+prevIdx) && (+endId) < (+nextIdx)){
+            endIndex=i+1
+            break
+          }
+        }
+      }
+      mindmapData.children.splice(endIndex,0,item)
+    },
+    mindmapRecover(){
+      // 重做添加时 恢复数据指针前进
+      let recoverData = this.mindmapAssistData.mindmapDataRecoverUse.pop()
+      if(recoverData) this.mindmapAssistData.mindmapDataUse=JSON.parse(recoverData) 
+    },
   },
 }

src/views/sandbox_manage/common/node.js

@@ -3,7 +3,6 @@ import store from "@/vuex/index"
 
 const { line,border,text } = configOpt;
 
-console.log(store,'storestorestore');
 const styleConfig=store.state.sand.styleConfig
 
 //定义图形
@@ -273,17 +272,7 @@ export const myNodeOption = (key) => {
 							// 		position: 'bottom',
 							// 		zIndex: 20,
 							// 		...portStyle
-							// },
-							// "port-left": {
-							// 		position: 'left',
-							// 		zIndex: 20,
-							// 		...portStyle
-							// },
-							// "port-right": {
-							// 		position: 'right',
-							// 		zIndex: 20,
-							// 		...portStyle
-							// },
+							// }
 					}
 				},
 			}

src/views/sandbox_manage/index_new_version.vue

@@ -110,6 +110,7 @@
     </div>
     <!-- 目录自定义按钮区域 -->
     <div id="custom-button-zone" class="custom-button-zone">
+      <img src="~@/assets/img/data_m/move_ico.png" style="pointer-events: none;" v-permission="permissionBtn.sandboxPermission.sandbox_classify_move"/>
       <img src="~@/assets/img/sand_new/add_outline.png" class="add-classify-img" v-permission="permissionBtn.sandboxPermission.sandbox_classify_addEdit"/>
       <img src="~@/assets/img/sand_new/edit_outline.png" class="edit-classify-img" v-permission="permissionBtn.sandboxPermission.sandbox_classify_addEdit"/>
       <img src="~@/assets/img/sand_new/delete_outline.png" class="delete-classify-img" v-permission="permissionBtn.sandboxPermission.sandbox_classify_del"/>
@@ -129,15 +130,18 @@
             {{ lastLevelClassifyName }}
           </el-form-item>
           <el-form-item label="目录名称" prop="SandboxClassifyName">
-            <el-input v-model="classifyForm.SandboxClassifyName" style="width: 317px;" placeholder="请输入目录名称"></el-input>
+            <el-input v-model.trim="classifyForm.SandboxClassifyName" style="width: 317px;" placeholder="请输入目录名称"></el-input>
           </el-form-item>
-          <el-form-item label="关联品种" prop="ChartPermissionId" v-if="hasVariety && (classifyAddTitle.indexOf('添加')!==-1)">
+          <el-form-item label="关联品种" prop="ChartPermissionId" v-if="hasVariety">
             <el-cascader 
+              @change="chartPermissionIdChange"
 							:options="classifyArr"
 							:props="classifyProps"
 							v-model="classifyForm.ChartPermissionId" 
 							placeholder="请选择对应品种" 
               id="classifyAddCascader"
+              ref="chartPermissionCascader"
+              :disabled="(classifyForm.SandboxClassifyId && classifyForm.Level!=1) || (!classifyForm.SandboxClassifyId && classifyForm.Level!=0)"
 						/>
           </el-form-item>
         </el-form>
@@ -162,24 +166,15 @@
             <el-input v-model="saveOtherForm.chartName" style="width: 317px;" placeholder="请输入逻辑图名称"></el-input>
           </el-form-item>
           <el-form-item label="分类" prop="classifyId" :rules="{required:true,message:'请选择分类',trigger:'change'}" >
-            <el-popover
-              placement="bottom"
-              width="400"
-              popper-class="classify-popper"
-              trigger="click"
-              v-model="selectClassifyShow">
-                <tree :nodes="onlyClassifyTreeData" :setting="selectSetting" key="saveOther" @onCreated="getSelectZTree" @onClick="selectClassify" />
-                <el-cascader 
-                slot="reference"
-                :options="onlyClassifyTreeData"
-                :props="{children: 'Children',
-                  label: 'SandboxClassifyName',
-                   value: 'SandboxClassifyId',emitPath:false,checkStrictly:true}"
-                v-model="saveOtherForm.classifyId" 
-                popper-class="classify-cascader-popper"
-                placeholder="请选择分类">
-                </el-cascader>
-            </el-popover>
+            <el-cascader 
+            :options="onlyClassifyTreeData"
+            @change="classifyTreeChange"
+            :props="{children: 'Children',
+              label: 'SandboxClassifyName',
+                value: 'SandboxClassifyId',checkStrictly:true}"
+            v-model="saveOtherClassifys" 
+            placeholder="请选择分类">
+            </el-cascader>
           </el-form-item>
         </el-form>
         <div style="text-align: center;padding:40px 0 ;">
@@ -210,7 +205,6 @@ import { myGraph } from './common/gragh';
     mixins:[mindmap],
     watch: {
       initData(newval) {
-        console.log(newval);
         if(!this.graph){
           this.$nextTick(()=>{
             this.init()
@@ -261,9 +255,7 @@ import { myGraph } from './common/gragh';
             showLine:false,
             showIcon:false,
             selectedMulti:false,
-            addDiyDom: this.addDiyDom,
-            // addHoverDom: this.addHoverDom,
-		        // removeHoverDom: this.removeHoverDom
+            addHoverDom: this.addHoverDom,
           },
           edit:{
             enable:true,
@@ -283,25 +275,11 @@ import { myGraph } from './common/gragh';
           }
         },
         zTreeObj:{},
-        selectSetting:{
-          data:{
-            key:{
-              name:"SandboxClassifyName",
-              children:"Children"
-            }
-          },
-          view:{
-            showLine:false,
-            showIcon:false,
-            selectedMulti:false
-          }
-        },
-        selectClassifyShow:false,
-        selectZTreeObj:{},
         lockLoding:null,
         viewSandbox:{},
         activeNode:{},
         addClassifyNodeTid:'',
+        locationNode:'',
         movingRecoveData:{
           targetNode:null,
           treeNode:null,
@@ -309,6 +287,7 @@ import { myGraph } from './common/gragh';
         },
         graph:null,
         initData:{},
+        customButtonDom:'',
         // ------- 添加分类弹窗
         classifyAddTitle:"添加分类",
         classifyAddShow:false,
@@ -316,7 +295,8 @@ import { myGraph } from './common/gragh';
         classifyForm:{
           SandboxClassifyId:0,
           SandboxClassifyName:'',
-          ChartPermissionId:null,
+          ChartPermissionId:0,
+          ChartPermissionName:'',
           ParentId:0,
           Level:0
         },
@@ -337,8 +317,7 @@ import { myGraph } from './common/gragh';
           chartName:"",
           classifyId:""
         },
-        saveOtherClassifys:'',
-        locationActiveNode:'',
+        saveOtherClassifys:[],
         operationType:'view',
         popoverVisible:false,
         popoverFlod:true,
@@ -347,48 +326,27 @@ import { myGraph } from './common/gragh';
         checkedLinkList:[],
         linkNode:null,
         popoverTimeout:null,
-        isSlideLeft:false
+        isSlideLeft:false,
+        locationParentIds:''
       }
     },
     created(){
       this.getClassify()
+      if(sessionStorage.getItem("sandboxEditBack")){
+        this.locationParentIds=sessionStorage.getItem("sandboxEditBack").split(',')
+        this.getSandboxDetailFun(this.locationParentIds[this.locationParentIds.length-1])
+      }else{
+        this.getSandboxList()
+      }
       this.getSandboxClassify()
-      this.getSandboxClassifyOnly()
-      this.getSandboxList()
-      // this.setting.async={
-        // enable:false,
-        // type:'head'
-      //   url:(()=>{
-      //     console.log(process.env);
-      //     // console.log(process.env.VUE_APP_API_ROOT,'process.env.VUE_APP_API_ROOT');
-      //     // if(process.env.NODE_ENV === "development"){
-      //     //   return "http://8.136.199.33:7777/adminapi/sandbox/classify/list"
-      //     // }else{
-      //       return process.env.VUE_APP_API_ROOT+'/sandbox/classify/list'
-      //     // }
-      //   })(),
-      //   type:'get',
-      //   autoParam: ["SandboxClassifyId"],
-      //   otherParam:{ "IsShowMe":this.isOnlyMe},
-      //   dataFilter: (treeId,parentNode,responseData)=>{
-      //     console.log(treeId,parentNode,responseData,'responseData');
-      //     return responseData.Data.AllNodes
-      //   },
-      //   headers:{
-      //     Authorization:localStorage.getItem("auth"),
-      //     Uuid:localStorage.getItem("uuid") || "",
-      //     AccessToken:localStorage.getItem("uuid")+"--zheshiyigename",
-      //   }
-      // }
     },
     mounted(){
-      // this.init()
       this.popoverDom = $('#link-popover')[0];
       this.popoverTriggerDom = $('#link-reference')[0];
       
       this.popoverDom.addEventListener('mouseenter',this.clearPopoverTimeout)
       this.popoverDom.addEventListener('mouseleave',this.closePopover)
-
+      this.customButtonDom = $('#custom-button-zone')[0]
     },
     beforeDestroy(){
       this.popoverDom.removeEventListener('mouseenter',this.clearPopoverTimeout)
@@ -401,20 +359,20 @@ import { myGraph } from './common/gragh';
         customInterence.getvariety({
           CompanyType: 'ficc'
         }).then(res => {
-          console.log(res);
           if(res.Ret !== 200)  return
             this.classifyArr = res.Data.List||[ ]
         })
       },
       // 获取沙盘图分类
       getSandboxClassify(parentNode,locationNode) {
-        console.log(parentNode,locationNode,'parentNode,locationNode');
+        // parentNode--父节点
+        // locationNode--展开父节点后需要定位的子节点，拖拽后
         const sandboxClassifyId = parentNode ? parentNode.SandboxClassifyId:0
         sandInterface.getSandboxClassify({SandboxClassifyId:sandboxClassifyId,IsShowMe:this.searchParams.IsShowMe}).then(res=>{
-          console.log(res);
           if (res.Ret === 200) {
             let nodesData=res.Data.AllNodes || []
             nodesData.map(item =>{
+              // 添加是否是目录的字段
               item.isCatalogue = item.SandboxId?false:true
             })
             if(parentNode){
@@ -422,46 +380,45 @@ import { myGraph } from './common/gragh';
             }else{
               this.treeData = nodesData
             }
-            if(locationNode){
+            let location = locationNode || this.locationNode
+            if(location){
               let searchNode
-              let locationId = locationNode.isCatalogue?locationNode.SandboxClassifyId:locationNode.SandboxId
+              let locationId = location.isCatalogue?location.SandboxClassifyId:location.SandboxId
               if(parentNode){
-                if(locationNode.isCatalogue){
+                if(location.isCatalogue){
                   searchNode=this.zTreeObj.getNodesByParam('SandboxClassifyId',+locationId,parentNode)
                 }else{
                   searchNode=this.zTreeObj.getNodesByParam('SandboxId',+locationId,parentNode)
                 }
-                console.log(searchNode,'searchNode');
                 if(!(searchNode && searchNode.length>0)) return 
                 this.zTreeClick(null,'',searchNode[0],1)
                 this.zTreeObj.selectNode(searchNode[0])
               }else{
                 requestAnimationFrame(()=>{
                   searchNode=this.zTreeObj.getNodesByParam('SandboxClassifyId',+locationId)
-                  console.log(searchNode,'searchNode');
                   if(!(searchNode && searchNode.length>0)) return 
                   this.zTreeClick(null,'',searchNode[0],1)
                   this.zTreeObj.selectNode(searchNode[0])
                 })
               }
+              this.locationNode=''
+            }else if(this.locationParentIds && this.locationParentIds.length>0){
+              // 获取分类列表后需要定位
+              requestAnimationFrame(()=>{
+                this.sandboxLocation(this.locationParentIds)
+                this.locationParentIds=[]
+                sessionStorage.removeItem('sandboxEditBack')
+              })
 
             }
           }
         })
       },
-      getSandboxClassifyOnly(){
-        sandInterface.getSandboxClassifyOnly().then(res=>{
-          if (res.Ret === 200) {
-            this.onlyClassifyTreeData=res.Data.AllNodes || []
-          }
-        })
-      },
       getSandboxList(type){
         if(type == 'setCurrentIndex'){
           this.searchParams.CurrentIndex=1
         }
         sandInterface.getSandboxListV2(this.searchParams).then(res=>{
-          console.log(res,'res');
           if(res.Ret == 200){
             if(!res.Data){
               this.pictureList=[]
@@ -477,45 +434,43 @@ import { myGraph } from './common/gragh';
           }
         })
       },
+      getSandboxDetailFun(SandboxId){
+        sandInterface.getSandboxDetail({SandboxId:SandboxId || this.activeNode.SandboxId}).then(res=>{
+          if(res.Ret == 200){
+            this.viewSandbox=res.Data
+            this.rightType='chart'
+            this.initData = JSON.parse(this.viewSandbox.Content)
+          }
+        })
+      },
       getZTree(zTree){
         this.zTreeObj=zTree
       },
-      getSelectZTree(zTree){
-        this.selectZTreeObj=zTree
-      },
-      selectClassify(event,treeId,treeNode,clickFlag){
-        this.sandSaveParams.SandboxClassifyId = treeNode.SandboxClassifyId
-        this.selectClassifyShow = false
-      },
       zTreeDragBefore(treeId,treeNodes){
         return this.permissionBtn.isShowBtn('sandboxPermission','sandbox_classify_move')
       },
       zTreeDropBefore(treeId,treeNodes,targetNode,moveType,isCopy){
-        console.log(treeId,treeNodes,targetNode,moveType,isCopy,'zTreeDropBefore');
         if((!targetNode) && (!moveType)) return false
         if(((!treeNodes[0].isCatalogue) && targetNode.Level==1 && moveType!='inner')||
         ((!targetNode.isCatalogue) && moveType=='inner')||
         (treeNodes[0].isCatalogue && targetNode.Level==5 && moveType=='inner')){
           return false
         }
-
-        // 接口失败后的还原
-        // this.movingRecoveData.treeNode=treeNodes[0]
-        // if(treeNodes[0].getPreNode()){
-        //   this.movingRecoveData.targetNode = treeNodes[0].getPreNode()
-        //   this.movingRecoveData.moveType = "next"
-        // }else if(treeNodes[0].getNextNode()){
-        //   this.movingRecoveData.targetNode = treeNodes[0].getNextNode()
-        //   this.movingRecoveData.moveType = "prev"
-        // }else if(treeNodes[0].getParentNode()){
-        //   this.movingRecoveData.targetNode = treeNodes[0].getParentNode()
-        //   this.movingRecoveData.moveType = "inner"
-        // }
+        // 用于接口失败后的还原位置
+        this.movingRecoveData.treeNode=treeNodes[0]
+        if(treeNodes[0].getPreNode()){
+          this.movingRecoveData.targetNode = treeNodes[0].getPreNode()
+          this.movingRecoveData.moveType = "next"
+        }else if(treeNodes[0].getNextNode()){
+          this.movingRecoveData.targetNode = treeNodes[0].getNextNode()
+          this.movingRecoveData.moveType = "prev"
+        }else if(treeNodes[0].getParentNode()){
+          this.movingRecoveData.targetNode = treeNodes[0].getParentNode()
+          this.movingRecoveData.moveType = "inner"
+        }
       },
       zTreeDrop(e,treeId,treeNodes,targetNode,moveType,isCopy){
-        console.log(treeId,treeNodes[0],targetNode,moveType,isCopy,'zTreeDrop');
         if((!targetNode) && (!moveType)) return
-        console.log(treeNodes[0].getParentNode(),targetNode.getParentNode());
         let parentNode = treeNodes[0].getParentNode()
         let prevNode = treeNodes[0].getPreNode()
         let nextNode = treeNodes[0].getNextNode()
@@ -536,48 +491,26 @@ import { myGraph } from './common/gragh';
               this.zTreeObj.removeChildNodes(parentNode)
             }
             this.getSandboxClassify(parentNode,treeNodes[0])
+          }else{
+            // 接口失败后的还原位置
+            let result=this.zTreeObj.moveNode(this.movingRecoveData.targetNode,this.movingRecoveData.treeNode,this.movingRecoveData.moveType)
+            if(!result){
+              this.$message.error('目录位置还原失败，刷新目录')
+              setTimeout(()=>{
+                this.getSandboxClassify()
+              },1000)
+            }
           }
         })
-        // if((!targetNode) && (!moveType)) return
-        // let parentNode = treeNodes[0].getParentNode()
-        // let prevNode = treeNodes[0].getPreNode()
-        // let nextNode = treeNodes[0].getNextNode()
-        // //移动分类
-        // let params={
-        //   ClassifyId:treeNodes[0].SandboxClassifyId,
-        //   SandboxId:treeNodes[0].isCatalogue?0:treeNodes[0].SandboxId,
-        //   ParentClassifyId:parentNode?parentNode.SandboxClassifyId:0,
-        //   PrevId:prevNode? (prevNode.isCatalogue?prevNode.SandboxClassifyId:prevNode.SandboxId) :0,
-        //   NextId:nextNode? (nextNode.isCatalogue?nextNode.SandboxClassifyId:nextNode.SandboxId) :0,
-        //   PrevType:prevNode?(prevNode.isCatalogue?1:2):0,
-        //   NextType:nextNode?(nextNode.isCatalogue?1:2):0
-        // }
-        // console.log(params);
-        // sandInterface.sandboxClassifyMove(params).then(res=>{
-        //   if(res.Ret == 200){
-        //     this.$message.success('移动分类成功')
-        //   }else{
-        //     // let result=this.zTreeObj.moveNode(this.movingRecoveData.targetNode,this.movingRecoveData.treeNode,this.movingRecoveData.moveType)
-        //     // if(!result){
-        //     //   window.location.reload()
-        //     // }
-        //   }
-        // })
       },
       zTreeExpandBefore(treeId, treeNode){
-        // console.log( treeId, treeNode);
         if(treeNode.Children && treeNode.Children.length>0){
           return true
         }else{
           this.getSandboxClassify(treeNode)
         }
       },
-      zTreeExpand(event, treeId, treeNode){
-        // console.log(event, treeId, treeNode);
-      },
       zTreeClick(event, treeId, treeNode,clickFlag){
-        console.log(event, treeId, treeNode,clickFlag);
-
         if(clickFlag==1){
           if(this.activeNode.SandboxClassifyId == treeNode.SandboxClassifyId &&
           this.activeNode.SandboxId == treeNode.SandboxId){
@@ -589,26 +522,18 @@ import { myGraph } from './common/gragh';
             this.searchParams.CurrentIndex=1
             this.searchParams.SandboxClassifyId = treeNode.SandboxClassifyId
             this.getSandboxList('setCurrentIndex')
-            // this.rightType='list'
           }else{
             // 沙盘图
-            sandInterface.getSandboxDetail({SandboxId:this.activeNode.SandboxId}).then(res=>{
-              console.log(res);
-              if(res.Ret == 200){
-                this.viewSandbox=res.Data
-                this.rightType='chart'
-                this.initData = JSON.parse(this.viewSandbox.Content)
-              }
-            })
+            this.getSandboxDetailFun()
           }
         }
 
         if(clickFlag==0 && treeNode.isCatalogue){
+          // 取消选中
           this.activeNode={}
           this.searchParams.CurrentIndex=1
           this.searchParams.SandboxClassifyId = ''
           this.getSandboxList('setCurrentIndex')
-          // this.rightType='list'
         }
       },
       onlyMeHandler(){
@@ -618,7 +543,6 @@ import { myGraph } from './common/gragh';
         this.getSandboxList('setCurrentIndex')
       },
       searchHandle(query) {
-        // console.log(query,"搜索");
         this.searchCurrentIndex = 1;
         this.KeyWord = query;
         this.searchSandbox()
@@ -641,7 +565,6 @@ import { myGraph } from './common/gragh';
       },
       searchLoad() {
         // 加载更多
-        console.log("加载更多");
         if(!this.searchHaveMore) return;
         this.searchCurrentIndex++
         this.searchSandbox()
@@ -649,7 +572,6 @@ import { myGraph } from './common/gragh';
       /* 聚焦获取当前检索 */
       inputFocusHandle(e) {
         // 选取
-        console.log('选取',e.target.value);
         this.searchCurrentIndex = 1;
         this.KeyWord = e.target.value;
         if(this.KeyWord) {
@@ -678,12 +600,13 @@ import { myGraph } from './common/gragh';
       },
       addClassify(e,node){
         e.stopPropagation()
-        console.log(node);
         this.addClassifyNodeTid = node.tId
         this.lastLevelClassifyName = this.getParentNodeName(node)
         this.classifyAddTitle="添加分类"
         this.classifyForm.Level = node.Level
         this.classifyForm.ParentId = node.SandboxClassifyId
+        this.classifyForm.ChartPermissionId = node.ChartPermissionId
+        this.classifyForm.ChartPermissionName = node.ChartPermissionName
         this.classifyAddShow=true
       },
       getParentNodeName(node){
@@ -695,13 +618,16 @@ import { myGraph } from './common/gragh';
         }
       },
       editClassify(e,node){
-        console.log(node);
         e.stopPropagation()
+        this.locationNode = node
         let pNode = node.getParentNode()
         this.lastLevelClassifyName = pNode ? pNode.SandboxClassifyName:''
         this.classifyForm.SandboxClassifyId = node.SandboxClassifyId
+        this.classifyForm.Level = node.Level
         this.classifyForm.SandboxClassifyName = node.SandboxClassifyName
-        this.classifyAddTitle="重命名"
+        this.classifyForm.ChartPermissionId = node.ChartPermissionId
+        this.classifyForm.ChartPermissionName = node.ChartPermissionName
+        this.classifyAddTitle="编辑分类"
         this.classifyAddShow=true
       },
       deleteClassify(e,node){
@@ -740,8 +666,7 @@ import { myGraph } from './common/gragh';
                 res.Data.DeleteStatus === 0 && node.SandboxId 
                 ? this.delHandle(node.SandboxClassifyId, node.SandboxId, 1)
                 : this.delHandle(node.SandboxClassifyId, node.SandboxId);
-              }).catch(() => {         
-              });
+              }).catch(() => {});
           }
         })
       },
@@ -754,16 +679,15 @@ import { myGraph } from './common/gragh';
           if (res.Ret === 200) {
             this.zTreeObj.removeNode(currentNode)
             this.$message.success(res.Msg);
-            // if(type && res.Data.SandboxId){
-              
-            // }else{
-
-            // }
           }
         });
       },
+      chartPermissionIdChange(value){
+        this.classifyForm.ChartPermissionName=
+        this.$refs.chartPermissionCascader.getCheckedNodes()[0] ?
+        this.$refs.chartPermissionCascader.getCheckedNodes()[0].label+'' || '':''
+      },
       classifyAddSubmit(){
-        console.log(this.classifyForm);
         //提交
         this.$refs.classifyFormRef.validate(valid=>{
           if(valid){
@@ -771,17 +695,23 @@ import { myGraph } from './common/gragh';
               //编辑
               let params={
                 SandboxClassifyId:this.classifyForm.SandboxClassifyId,
-                SandboxClassifyName:this.classifyForm.SandboxClassifyName
+                SandboxClassifyName:this.classifyForm.SandboxClassifyName,
+                ChartPermissionId:this.classifyForm.ChartPermissionId,
+                ChartPermissionName:this.classifyForm.ChartPermissionName,
               }
               sandInterface.editSandboxClassify(params).then(res=>{
                 if(res.Ret == 200){
                   this.classifyAddShow=false
                   this.$message.success(this.classifyAddTitle+"成功")
-                  let currentNode = this.zTreeObj.getSelectedNodes()[0]
+                  let parentNode = this.locationNode.getParentNode()
 
-                  currentNode.SandboxClassifyName = this.classifyForm.SandboxClassifyName
-                  this.zTreeObj.updateNode(currentNode)
-                  // this.getSandboxClassify()
+                  if(!parentNode){
+                    this.getSandboxClassify(null,this.locationNode)
+                  }else{
+                    this.zTreeObj.removeChildNodes(parentNode)
+                    this.zTreeObj.expandNode(parentNode,true,false,false,true)
+                    this.zTreeClick(null,'',this.locationNode,1)
+                  }
                 }
               })
             }else{
@@ -790,7 +720,8 @@ import { myGraph } from './common/gragh';
                 SandboxClassifyName:this.classifyForm.SandboxClassifyName,
                 ParentId:this.classifyForm.ParentId,
                 Level:this.classifyForm.Level,
-                ChartPermissionId:this.classifyForm.ChartPermissionId
+                ChartPermissionId:this.classifyForm.ChartPermissionId,
+                ChartPermissionName:this.classifyForm.ChartPermissionName,
               }
               sandInterface.addSandboxClassify(params).then(res=>{
                 if(res.Ret == 200){
@@ -800,11 +731,8 @@ import { myGraph } from './common/gragh';
                     this.getSandboxClassify()
                   }else{
                     let curNode = this.zTreeObj.getNodeByTId(this.addClassifyNodeTid)
-                    // console.log(curNode,'');
                     this.zTreeObj.removeChildNodes(curNode)
-                    // this.$nextTick(()=>{
-                      this.zTreeObj.expandNode(curNode,true,false,false,true)
-                    // })
+                    this.zTreeObj.expandNode(curNode,true,false,false,true)
                   }
                 }
               })
@@ -817,7 +745,8 @@ import { myGraph } from './common/gragh';
         this.classifyForm={
           SandboxClassifyId:0,
           SandboxClassifyName:'',
-          ChartPermissionId:null,
+          ChartPermissionId:0,
+          ChartPermissionName:'',
           ParentId:0,
           Level:0
         }
@@ -829,13 +758,9 @@ import { myGraph } from './common/gragh';
         let scrollTop = this.$refs.pictureListRef.scrollTop;
         let clientHeight = this.$refs.pictureListRef.clientHeight;
         let scrollHeight = this.$refs.pictureListRef.scrollHeight;
-        // console.log('scrollTop:',scrollTop)
-        // console.log('clientHeight:',clientHeight)
-        // console.log('scrollHeight:',scrollHeight)
         if(scrollTop + clientHeight >= scrollHeight-10 && this.pictureHaveMore){
           this.searchParams.CurrentIndex++
           this.getSandboxList();
-          console.log("加载更多");
         }
       },300),
       /* 展示详情 */
@@ -849,19 +774,10 @@ import { myGraph } from './common/gragh';
         this.sandboxLocation(ParentClassifys)
       },
       async sandboxLocation(ParentClassifys){
-        console.log(ParentClassifys,'ParentClassifys');
         let beActiveNode=''
         for (let i = 0; i < ParentClassifys.length; i++) {
           const element = ParentClassifys[i];
-          // if(i == (ParentClassifys.length-1)){
-          //   console.log(+element,beActiveNode,'element');
-          //   let searchNode=this.zTreeObj.getNodesByParam('SandboxId',+element,beActiveNode)
-          //   console.log(searchNode[0]);
-          //   this.zTreeObj.selectNode(searchNode[0],false,false)
-          //   return 
-          // }
           let searchNode=this.zTreeObj.getNodesByParam('SandboxClassifyId',+element,beActiveNode)
-          console.log(searchNode,'searchNode',i);
           if(!(searchNode&&searchNode.length>0)){
             if(!beActiveNode){
               break
@@ -883,12 +799,11 @@ import { myGraph } from './common/gragh';
             beActiveNode = searchNode[0]
           }
         }
-        this.locationActiveNode=beActiveNode
         // 选中
-        requestAnimationFrame(()=>{
+        this.activeNode = beActiveNode
+        setTimeout(()=>{
           this.zTreeObj.selectNode(beActiveNode)
-          this.activeNode = beActiveNode
-        })
+        },300)
       },
       expandNodeAsync(parentNode,activeId,isLast=false){
         return new Promise((resolve,reject)=>{
@@ -898,7 +813,6 @@ import { myGraph } from './common/gragh';
           }else{
             resultNode = this.zTreeObj.getNodesByParam('SandboxClassifyId',activeId,parentNode)
           }
-          console.log(resultNode,'resolve(resultNode)');
           if(resultNode.length>0){
             resolve(resultNode)
             return 
@@ -924,7 +838,6 @@ import { myGraph } from './common/gragh';
       },
       copyHandle:_.debounce(function ({ PicUrl }){
         if(!PicUrl) return this.$message('暂无内容可复制')
-        console.log("复制");
         this.lockLoding = this.$loading({
           lock: true,
           text: '复制图片中...',
@@ -965,7 +878,6 @@ import { myGraph } from './common/gragh';
         }
       },500),
       deleteHandle(item,type){
-        console.log(item,type);
         this.$confirm("确定删除该沙盘图吗?", "提示", {
           type: "warning",
         })
@@ -977,7 +889,6 @@ import { myGraph } from './common/gragh';
             if (res.Ret === 200) {
               this.$message.success(res.Msg);
               let result = this.zTreeObj.getNodesByParam('SandboxId',item.SandboxId)[0]
-              console.log(result);
               if(type=='inList'){
                 // 在沙盘图列表中删除
                 if(result){
@@ -985,8 +896,10 @@ import { myGraph } from './common/gragh';
                 }
               }else{
                 // 在沙盘图详情删除
-                this.sandboxLocation([result.SandboxClassifyId])
                 this.zTreeObj.removeNode(result)
+                let parentNode = result.getParentNode()
+                this.zTreeObj.selectNode(parentNode)
+                this.zTreeClick(null,'',parentNode,1)
               }
               this.getSandboxList('setCurrentIndex')
               
@@ -995,16 +908,15 @@ import { myGraph } from './common/gragh';
         })
         .catch(() => {});
       },
-      addDiyDom(treeId, treeNode) {
-        // console.log(treeNode,'treeId, treeNode');
+      addHoverDom(treeId, treeNode){
         var aObj = $("#" + treeNode.tId + "_a");
-        if ($("#diyBtn_"+treeNode.SandboxClassifyId).length>0) return;
+        if (aObj.find('#custom-button-zone').length>0) return;
+        let dom = this.customButtonDom.cloneNode(true)
+        let addClassifyDom = $(dom).find('.add-classify-img')[0]
+        let editClassifyDom = $(dom).find('.edit-classify-img')[0]
+        let delClassifyDom = $(dom).find('.delete-classify-img')[0]
         if(treeNode.isCatalogue){
           //目录添加自定义按钮
-          let dom = $('#custom-button-zone')[0].cloneNode(true)
-          let addClassifyDom = $(dom).find('.add-classify-img')[0]
-          let editClassifyDom = $(dom).find('.edit-classify-img')[0]
-          let delClassifyDom = $(dom).find('.delete-classify-img')[0]
           if(treeNode.Level>4){
             addClassifyDom && (addClassifyDom.style.display='none')
           }else{
@@ -1013,15 +925,13 @@ import { myGraph } from './common/gragh';
           editClassifyDom && editClassifyDom.addEventListener("click",(e)=>this.editClassify(e,treeNode))
           delClassifyDom && delClassifyDom.addEventListener("click",(e)=>this.deleteClassify(e,treeNode))
 
-          aObj.append(dom);
+        }else{
+          addClassifyDom && (addClassifyDom.style.display='none')
+          editClassifyDom && (editClassifyDom.style.display='none')
+          delClassifyDom && (delClassifyDom.style.display='none')
         }
-
+        aObj.append(dom);
       },
-      // removeHoverDom(treeId, treeNode) {
-      //   console.log(treeId, treeNode,'treeId, treeNode');
-      //   $("#diyBtn_"+treeNode.SandboxClassifyId).unbind().remove();
-	    //   $("#diyBtn_space_" +treeNode.SandboxClassifyId).unbind().remove();
-      // }
       addSand(){
         const { href } = this.$router.resolve({ path: '/sandflow' });
         window.open(href, '_blank');
@@ -1031,12 +941,21 @@ import { myGraph } from './common/gragh';
         window.open(href, '_blank');
       },
       saveOther(){
+        sandInterface.getSandboxClassifyOnly().then(res=>{
+          if (res.Ret === 200) {
+            this.onlyClassifyTreeData=res.Data.AllNodes || []
+          }
+        })
         this.saveOtherForm.chartName = this.viewSandbox.Name+"(1)"
         this.saveOtherShow=true
       },
+      classifyTreeChange(value){
+        if(!value){
+          this.saveOtherForm.classifyId=''
+        }
+        this.saveOtherForm.classifyId=value[value.length-1]
+      },
       saveOtherSubmit: _.debounce( function() {
-        // console.log(this.viewSandbox);
-        // return 
         if(!this.graph.toJSON().cells.length) return this.$message.warning('画布无内容');
         this.$refs.saveOtherFormRef.validate(valid=>{
           if(valid){
@@ -1068,12 +987,13 @@ import { myGraph } from './common/gragh';
                 this.lockLoding.close();
                 return;
               }
-              console.log(sandData,'sandData');
               this.lockLoding.close();
               this.$message.success("另存为成功")
-              let saveOtherIds = this.saveOtherClassifys.split(',')
-              saveOtherIds.push(sandData.SandboxId)
-              this.sandboxLocation(saveOtherIds)
+              //沙盘图详情
+              this.getSandboxDetailFun(sandData.SandboxId)
+
+              this.saveOtherClassifys.push(sandData.SandboxId)
+              this.sandboxLocation(this.saveOtherClassifys)
               this.saveOtherShow=false
             },{
               preserveDimensions:true,//让svg为实际图片大小
@@ -1088,19 +1008,6 @@ import { myGraph } from './common/gragh';
                 svg.setAttribute('viewBox',`${x-30} ${y-30} ${width+60} ${height+60}`)
                 // // 在图表右下方 加上"来源：弘则研究"字样
                 // let gNode = svg.getElementsByClassName('x6-graph-svg-viewport')[0]
-                // 去掉不该截图的添加图标
-                let leftImg = svg.getElementsByClassName('left-topic-image')
-                for (let i = 0; i < leftImg.length; i++) {
-                  const element = leftImg[i];
-                  element.parentElement.removeChild(element)
-                  i--
-                }
-                let rightImg = svg.getElementsByClassName('right-topic-image')
-                for (let i = 0; i < rightImg.length; i++) {
-                  const element = rightImg[i];
-                  element.parentElement.removeChild(element)
-                  i--
-                }
                 // let textNode = document.createElement('text')
                 // textNode.setAttribute('x',(x-tx+width)/zoom-85)
                 // textNode.setAttribute('y',(y-ty+height)/zoom+27)
@@ -1117,6 +1024,12 @@ import { myGraph } from './common/gragh';
                 .x6-port {
                     visibility: hidden;
                 }
+                .left-topic-image{
+                  visibility:hidden;
+                }
+                .right-topic-image{
+                  visibility: hidden;
+                }
                 ` 
             })
           }
@@ -1126,10 +1039,11 @@ import { myGraph } from './common/gragh';
       },500),
       saveOtherClosed(){
         this.saveOtherForm={
-          chartName:"逻辑图名称",
+          chartName:"",
           classifyId:""
         }
-        this.selectZTreeObj.cancelSelectedNode()
+        this.saveOtherClassifys=[]
+        // this.selectZTreeObj.cancelSelectedNode()
         this.$refs.saveOtherFormRef.clearValidate()
       },
       copySandHandle: _.debounce(function() {
@@ -1153,8 +1067,6 @@ import { myGraph } from './common/gragh';
         img.onload = ()=>{
           canvas.width = img.width;
           canvas.height = img.height;
-          // console.log('width',img.width)
-          // console.log('height',img.height)
           ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
           ctx.fillStyle="#fff";
           ctx.fillRect(0, 0, img.width, img.height);
@@ -1182,26 +1094,13 @@ import { myGraph } from './common/gragh';
         preserveDimensions:true,//让svg为实际图片大小
         beforeSerialize:(svg)=>{
           const {x,y,width,height} = this.graph.getContentBBox(cells)
-          let {tx,ty} = this.graph.translate()
+          // let {tx,ty} = this.graph.translate()
           //给导出的svg增加一点宽高
           svg.setAttribute('width',width+60)
           svg.setAttribute('height',height+60) 
           //设置viewBox使图像居中
           svg.setAttribute('viewBox',`${x-30} ${y-30} ${width+60} ${height+60}`)
           // let gNode = svg.getElementsByClassName('x6-graph-svg-viewport')[0]
-          // 去掉不该截图的添加图标
-          let leftImg = svg.getElementsByClassName('left-topic-image')
-          for (let i = 0; i < leftImg.length; i++) {
-            const element = leftImg[i];
-            element.parentElement.removeChild(element)
-            i--
-          }
-          let rightImg = svg.getElementsByClassName('right-topic-image')
-          for (let i = 0; i < rightImg.length; i++) {
-            const element = rightImg[i];
-            element.parentElement.removeChild(element)
-            i--
-          }
           // let textNode = document.createElement('text')
           // textNode.setAttribute('x',x-tx+width-90)
           // textNode.setAttribute('y',y-ty+height+22)
@@ -1210,38 +1109,28 @@ import { myGraph } from './common/gragh';
           // textNode.innerText = '来源：弘则研究'
           // gNode.appendChild(textNode)
             },
-        copyStyles:false,
-        stylesheet: `
+          copyStyles:false,
+          stylesheet: `
             svg{
                 background-color:white;
             }
           .x6-port {
               visibility: hidden;
+          }
+          .left-topic-image{
+            visibility:hidden;
+          }
+          .right-topic-image{
+            visibility: hidden;
           }` 
         })
       },500),
-      selectClassify(event,treeId,treeNode,clickFlag){
-        // console.log(treeNode);
-        this.saveOtherForm.classifyId = treeNode.SandboxClassifyId
-        this.saveOtherClassifys=this.getParentClassifyIds(treeNode)
-        this.selectClassifyShow = false
-      },
-      getParentClassifyIds(treeNode){
-        let parentNode = treeNode.getParentNode()
-        if(parentNode){
-          return this.getParentClassifyIds(parentNode)+','+treeNode.SandboxClassifyId
-        }else{
-          return treeNode.SandboxClassifyId+''
-        }
-      },
       //==============================画布
       // 初始化画布
       init() {
-        const graph = new myGraph('sand-chart-body',null,'','view');
-        console.log(graph,'graph');
+        const graph = new myGraph('sand-chart-body',null,'view');
         this.graph = graph;
         graph.on('node:mouseenter', ({ node, e }) => {
-          console.log(node);
           let data = node.data
           this.linkNode = node
           if(data && data.linkData && data.linkData.length>0){
@@ -1266,10 +1155,6 @@ import { myGraph } from './common/gragh';
                 })
                 let clinetPositon=graph.localToClient(node.position())
                 let size=node.size()
-                console.log(clinetPositon,'clinetPositon',node.position());
-                // const dom = $('#link-reference')[0];
-                // console.log(this.popoverTriggerDom,'domdomdom');
-                console.log(clinetPositon.x+size.width/2,clinetPositon.y);
                 this.popoverTriggerDom.style.left = clinetPositon.x+size.width/2 + 'px';
                 this.popoverTriggerDom.style.top = clinetPositon.y + 'px';
                 this.popoverVisible=true
@@ -1300,7 +1185,6 @@ import { myGraph } from './common/gragh';
         })
       },
       navigateTo(item){
-        console.log(item,'item');
         if(item.Type == 1){
           if(item.databaseType==0){
             // 普通指标

src/views/sandbox_manage/sandFlowNew/components/addLInkDia.vue

@@ -0,0 +1,649 @@
+<template>
+    <el-dialog :modal-append-to-body='false' title="添加链接" :visible.sync="show" 
+    :close-on-click-modal="false" width="872px" top="5vh">
+      <div class="add-link-box">
+        <div class="link-box-option">
+          <el-select v-model="addLinkSearchParams.linkType" placeholder="链接类型" style="width: 240px;" @change="changeLinkType">
+            <el-option :label="item.label" :value="item.value" v-for="item in linkTypeList" :key="item.value"></el-option>
+          </el-select>
+          <el-select v-if="addLinkSearchParams.linkType==1"
+            v-model="search_dataBaseId"
+            v-loadMore="dataBaseSearchLoad"
+            ref="searchRef"
+            :filterable="!search_dataBaseId"
+            remote
+            clearable
+            placeholder="指标ID/指标名称"
+            style="width: 240px"
+            :remote-method="dataBaseSearch"
+            @click.native="dataBaseInputFocus"
+          >
+            <i slot="prefix" class="el-input__icon el-icon-search"></i>
+            <el-option
+              v-for="item in dataBaseOptions"
+              :key="item.EdbInfoId"
+              :label="item.EdbName"
+              :value="item.EdbInfoId"
+            >
+            </el-option>
+          </el-select>
+          <el-select v-else-if="addLinkSearchParams.linkType==2"
+            v-model="search_dataBaseId"
+            v-loadMore="dataBaseSearchLoad"
+            ref="searchRef"
+            :filterable="!search_dataBaseId"
+            remote
+            clearable
+            placeholder="图表名称"
+            style="width: 240px"
+            :remote-method="dataBaseSearch"
+            @click.native="dataBaseInputFocus"
+          >
+            <i slot="prefix" class="el-input__icon el-icon-search"></i>
+            <el-option
+              v-for="item in dataBaseOptions"
+              :key="item.ChartInfoId"
+              :label="item.ChartName"
+              :value="item.ChartInfoId"
+            >
+            </el-option>
+          </el-select>
+          <el-input v-else v-model="reportKeyWord" @input="searchReport"
+          placeholder="标题 / 创建人" style="width: 240px;" clearable >
+            <i slot="prefix" class="el-input__icon el-icon-search"></i>
+          </el-input>
+        </div>
+        <div class="link-box-content">
+          <!-- 指标 -->
+          <div class="link-content-dataIndex" v-if="addLinkSearchParams.linkType==1 && databaseTableData && databaseTableData.length>0">
+            <el-table :data="databaseTableData" border style="box-shadow: rgba(155, 170, 219, 0.2) 0px 3px 6px;">
+              <el-table-column label="指标Id" align="center">
+                <template slot-scope="scope">{{ scope.row.EdbCode }}</template>
+              </el-table-column>
+              <el-table-column label="指标名称" align="center" width="200">
+                <template slot-scope="scope">{{ scope.row.EdbName }}</template>
+              </el-table-column>
+              <el-table-column label="频度" align="center" width="50">
+                <template slot-scope="scope">{{ scope.row.Frequency }}</template>
+              </el-table-column>
+              <el-table-column label="单位" align="center">
+                <template slot-scope="scope">{{ scope.row.Unit }}</template>
+              </el-table-column>
+              <el-table-column label="起始时间" align="center" width="100">
+                <template slot-scope="scope">{{ scope.row.StartDate }}</template>
+              </el-table-column>
+              <el-table-column label="更新时间" align="center" width="160">
+                <template slot-scope="scope">{{ scope.row.ModifyTime }}</template>
+              </el-table-column>
+              <el-table-column label="来源" align="center">
+                <template slot-scope="scope">{{ scope.row.SourceName }}</template>
+              </el-table-column>
+              <el-table-column label="操作" align="center" width="50">
+                <template slot-scope="scope">
+                  <span class="delete-button">删除</span>
+                </template>
+              </el-table-column>
+            </el-table>
+            <ul 
+              class="value-ul" 
+              ref="valueUl" 
+              @scroll="databaseScrollHandle" 
+              v-show="databaseList.length">
+              <li
+                class="value-item"
+                v-for="item in databaseList"
+                :key="item.EdbDataId"
+              >
+                <span class="value-label">
+                  <span style="position: relative;">
+                    <i class="new-tag" v-if="databaseTableData[0].LatestDate===item.DataTime"></i>
+                    {{item.DataTime}}
+                  </span>
+                </span>
+                <span :class="['value-label',{'predict-act': databaseTableData[0].DataInsertConfig.Date===item.DataTime}]" style="min-width:200px;text-align:center;">
+                  <span :class="['value-style',{'predict-act': databaseTableData[0].DataInsertConfig.Date===item.DataTime}]">{{item.Value}}</span>
+                </span>
+              </li>
+              <li class="nodata value-item" v-if="!databaseList.length">暂无数据</li>
+            </ul>
+          </div>
+          <div class="link-content-chartIndex" v-else-if="addLinkSearchParams.linkType==2 && this.chartInfo && this.chartInfo.ChartInfoId">
+            <div class="chart-name">{{ this.chartInfo.ChartName }}</div>
+            <Chart :options="options" ref="chartRef" />
+          </div>
+          <div class="link-content-dataIndex" v-else-if="addLinkSearchParams.linkType==3 && this.reportList.length>0">
+            <el-table :data="this.reportList" border style="margin-bottom: 10px;" ref="reportTable"
+            @select="reportSelect" @select-all="reportSelect"> 
+              <el-table-column type="selection" width="40" align="center"></el-table-column>
+              <el-table-column label="报告标题" align="center" show-overflow-tooltip>
+                <template slot-scope="scope">
+                  <span >{{ scope.row.Title }}</span>
+                  <span  v-if="scope.row.MsgSendTime">
+                    ({{ scope.row.MsgSendTime.substring(5, 7)}}{{ scope.row.MsgSendTime.substring(8, 10) }})
+                  </span>
+                  <span v-else-if="scope.row.PublishTime">
+                    ({{ scope.row.PublishTime.substring(5, 7)}}{{ scope.row.PublishTime.substring(8, 10) }})
+                  </span>
+                  <span v-else-if="scope.row.CreateTime">
+                    ({{ scope.row.CreateTime.substring(5, 7)}}{{ scope.row.CreateTime.substring(8, 10) }})
+                  </span>
+                </template>
+              </el-table-column >
+              <el-table-column label="发布时间" align="center">
+                <template slot-scope="scope">
+                  <span>{{scope.row.PrePublishTime?scope.row.PrePublishTime:scope.row.PublishTime}}</span>
+                </template>
+              </el-table-column>
+            </el-table>
+            <m-page :page_no="reportParams.CurrentIndex" :pageSize="5" :total="reportTotal" @handleCurrentChange="pageChange"/>
+          </div>
+          <tableNoData text="暂无数据" v-else/>
+        </div>
+        <div class="link-box-tags">
+          <div class="link-box-tag" v-for="(item,index) in checkedLinkList" :key="item.RId">
+            <span @dblclick.stop="editLinkName(item)" v-if="!item.editing" @click="linkClick(item)">{{ item.Name }}</span>
+            <el-input v-else @blur="editLinkNameFinish(item)" 
+              v-model.trim="editingLabel" class="label-edit-input" ref="labelEditInput"/>
+            <img src="~@/assets/img/sand_new/delete_outline_1.png" @click="linkDelete(item,index)">
+          </div>
+        </div>
+        <div class="link-box-buttons">
+          <el-button type="info" style="width:120px;color:#333333;background-color:#F4F8FE" @click="cancelHandle">取消</el-button>
+          <el-button type="primary" style="width:120px;margin-left: 30px;" @click="saveLink">确定</el-button>
+        </div>
+      </div>
+		</el-dialog>
+</template>
+
+<script>
+import { chartSetMixin } from '../../../dataEntry_manage/mixins/chartPublic'
+import * as sheetInterface from "@/api/modules/sheetApi.js";
+import mPage from "@/components/mPage.vue";
+import Chart from '../../../dataEntry_manage/components/chart.vue'
+import { dataBaseInterface,reportlist} from '@/api/api.js';
+
+  export default {
+    components:{
+      mPage,Chart
+    },
+    props:{
+      show:{
+        reuqired:true,
+        type:Boolean
+      },
+      linkList:{
+        type:Array,
+        default:()=>[]
+      }
+    },
+    mixins:[chartSetMixin],
+    watch:{
+      /* 选中搜索指标 展开目录 选中指标 展示数据 */
+      search_dataBaseId(newval) {
+        if (newval) {
+          if(this.addLinkSearchParams.linkType==1){
+            let search_obj = this.dataBaseOptions.find(
+              (item) => item.EdbInfoId === newval
+            );
+            if(search_obj){
+              this.checkedLinkList.push({
+                RId:this.addLinkSearchParams.linkType+'-'+search_obj.EdbInfoId,
+                Id:search_obj.EdbInfoId,
+                Name:search_obj.EdbName,
+                Type:this.addLinkSearchParams.linkType,
+                editing:false,
+                databaseType:search_obj.EdbInfoType, //0 普通指标 | 1 预测指标
+                detailParams:{
+                  code:search_obj.UniqueCode,
+                  id:search_obj.EdbInfoId,
+                  classifyId:search_obj.ClassifyId
+                }
+              })
+              this.activeItemRId=this.addLinkSearchParams.linkType+'-'+search_obj.EdbInfoId
+              this.initGetData()
+            }
+          }else{
+            let search_obj = this.dataBaseOptions.find(
+              (item) => item.ChartInfoId === newval
+            );
+            if(search_obj){
+              this.checkedLinkList.push({
+                RId:this.addLinkSearchParams.linkType+'-'+search_obj.ChartInfoId,
+                Id:search_obj.ChartInfoId,
+                Name:search_obj.ChartName,
+                Type:this.addLinkSearchParams.linkType,
+                editing:false,
+                detailParams:{
+                  code:search_obj.UniqueCode,
+                  id:search_obj.ChartInfoId
+                }
+              })
+              this.activeItemRId=this.addLinkSearchParams.linkType+'-'+search_obj.ChartInfoId
+              this.getChartDetail(search_obj.ChartInfoId)
+            }
+          }
+        }
+      },
+      edbData: {
+        handler(newval, oldval) {
+          newval.length && !this.chartInfo.WarnMsg && this.setChartOptionHandle(newval);
+        },
+        deep: true,
+      },
+      show(value){
+        if(value){
+          this.addLinkSearchParams.linkType=1
+          this.changeLinkType()
+          this.checkedLinkList = JSON.parse(JSON.stringify(this.linkList))
+        }
+      }
+    },
+    data() {
+      return {
+        linkTypeList:[
+          {value:1,label:"ETA指标/预测指标"},
+          {value:2,label:"ETA图库"},
+          {value:3,label:"ETA研报"}
+        ],
+        addLinkSearchParams:{
+          linkType:1
+        },
+        //添加链接：指标
+        search_dataBaseId:'',
+        dataBaseParams:{
+          pages:1,
+          searchText:'',
+          search_have_more:false
+        },
+        dataBaseOptions:[],
+
+        databaseTableData:[],
+        databaseList:[],
+        databaseHaveMore:false,
+        databasePageNo:1,
+        chartInfo:{},
+        edbData:[],
+        options:{},
+        reportKeyWord:'',
+        reportParams:{
+          CurrentIndex:1,
+          PageSize:5,
+        },
+        reportList:[],
+        selections:[],
+        checkedLinkList:[],
+        reportTotal:0,
+        editingLabel:'',
+        activeItemRId:'',
+      }
+    },
+    methods: {
+      // -------------------------------添加链接
+      changeLinkType(){
+        this.search_dataBaseId=''
+        this.dataBaseOptions=[]
+        this.dataBaseParams={
+          pages:1,
+          searchText:'',
+          search_have_more:false
+        }
+
+        this.databaseTableData=[]
+        this.databaseList=[]
+        this.databaseHaveMore=false
+        this.databasePageNo=1
+        
+        this.chartInfo={}
+        this.edbData=[]
+
+        this.reportKeyWord=''
+        this.reportList=[]
+      },
+      /* 搜索 */
+      dataBaseSearch(query) {
+        this.dataBaseParams.pages = 1;
+        this.dataBaseParams.searchText = query;
+        this.dataBaseSearchApi(this.dataBaseParams.searchText)
+      },
+      // 加载更多
+      dataBaseSearchLoad() {
+        if(!this.dataBaseParams.search_have_more) return;
+        this.dataBaseSearchApi(this.dataBaseParams.searchText,++this.dataBaseParams.pages);
+      },
+      /* 聚焦获取当前检索 */
+      dataBaseInputFocus(e) {
+        this.dataBaseParams.pages = 1;
+        this.dataBaseParams.searchText = e.target.value;
+        if(this.dataBaseParams.searchText) {
+          this.dataBaseSearchApi(this.dataBaseParams.searchText);
+        }else {
+          this.searchOptions = [];
+          this.dataBaseParams.search_have_more=false
+        }
+
+      },
+      dataBaseSearchApi(query,page=1) {
+        if(this.addLinkSearchParams.linkType==1){
+          sheetInterface.searchTarget({
+            KeyWord:query,
+            CurrentIndex: page
+          }).then(res => {
+            if(res.Ret !== 200) return
+            const { List,Paging } = res.Data;
+            this.dataBaseParams.search_have_more = page < Paging.Pages;
+            this.dataBaseOptions = page === 1 ? List : this.dataBaseOptions.concat(List);
+          })
+        }else{
+          dataBaseInterface.chartSearchByEs({
+            Keyword: query,
+            IsShowMe:false,
+            CurrentIndex: page
+          })
+          .then((res) => {
+            if (res.Ret !== 200) return
+            const { List,Paging } = res.Data;
+            this.dataBaseParams.search_have_more = page < Paging.Pages;
+            this.dataBaseOptions = page === 1 ? List : [...this.dataBaseOptions,...List];
+          });
+        }
+
+      },
+      initGetData() {
+        this.databasePageNo = 1;
+        if(this.$refs.edb_detail_data){
+          this.$refs.valueUl.scrollTop=0
+        }
+        this.getDatabaseList();
+      },
+      getDatabaseList(){
+        dataBaseInterface.targetList({
+          PageSize: 20,
+          CurrentIndex: this.databasePageNo,
+          EdbInfoId: this.search_dataBaseId,
+        }).then(res => {
+          if(res.Ret === 200) {
+            if(res.Data) {
+              this.databaseTableData = [res.Data.Item] || [];
+              this.databaseHaveMore =  this.databasePageNo < res.Data.Paging.Pages ? true : false;
+              this.databaseList = this.databasePageNo === 1 ? (res.Data.Item.DataList || []) : this.databaseList.concat(res.Data.Item.DataList);
+            }else {
+              this.databaseTableData = [];
+              this.databaseList = [];  
+            }
+          }
+        })
+      },
+      databaseScrollHandle:_.throttle(function() {
+        let scrollTop = this.$refs.valueUl.scrollTop;
+        let clientHeight = this.$refs.valueUl.clientHeight;
+        let scrollHeight = this.$refs.valueUl.scrollHeight;
+        if(scrollTop===0) return
+        if(scrollTop + clientHeight >= scrollHeight-10 && this.databaseHaveMore){
+          this.databasePageNo++
+          this.getDatabaseList()
+        }
+		  },200),
+      async getChartDetail(ChartInfoId) {
+        const res = await dataBaseInterface.getChartInfoById({ChartInfoId})
+        if (res.Ret !== 200) return;
+        this.chartInfo = res.Data.ChartInfo || {}
+        this.edbData = res.Data.EdbInfoList|| []
+
+        const chartTypeMap = {
+          7: this.initBarData, //柱形图
+          10: this.initSectionScatterData //截面散点
+        }
+
+        chartTypeMap[this.chartInfo.ChartType] && chartTypeMap[this.chartInfo.ChartType](res.Data);
+
+      },
+      editLinkName(item){
+        this.editingLabel = item.Name
+        item.editing=true
+        this.$nextTick(() => {
+          this.$refs.labelEditInput[0].focus();
+        });
+      },
+      linkClick(item){
+        if(this.activeItemRId == item.RId) return
+        this.activeItemRId = item.RId
+        if(item.Type==3){
+          this.$message.info('研报类型的暂无回显')
+        }else if(item.Type==1){
+          this.addLinkSearchParams.linkType=item.Type
+          this.changeLinkType()
+          this.initGetData() 
+        }else if(item.Type==2){
+          this.addLinkSearchParams.linkType=item.Type
+          this.changeLinkType()
+          this.getChartDetail(item.Id)
+        }
+
+      },
+      linkDelete(item,index){
+        if(this.activeItemRId == item.RId){
+          this.activeItemRId=""
+          this.changeLinkType()
+        }
+        if(item.Type==3){
+          let deleteId=this.selections.filter(it=> it.Id==item.Id)
+          if(deleteId[0]){
+            this.$refs.reportTable && this.$refs.reportTable.toggleRowSelection(deleteId[0],false)
+          }
+        }
+        this.checkedLinkList.splice(index,1)
+      },
+      editLinkNameFinish(item){
+        if (this.editingLabel) {
+          item.editing=false
+          item.Name = this.editingLabel
+        } else {
+          this.$message.warning('不能为空');
+        }
+      },
+      searchReport(){
+        this.reportParams.CurrentIndex=1
+        if(!this.reportKeyWord){
+          this.reportList=[]
+          this.reportTotal=0
+        }else{
+          this.getReportList()
+        }
+      },
+      getReportList(){
+        let params={
+          CurrentIndex: this.reportParams.CurrentIndex,
+          PageSize: this.reportParams.PageSize,
+          KeyWord:this.reportKeyWord,
+          State:2
+        }
+        reportlist(params).then((res) => {
+          if (res.Ret === 200) {
+            this.reportList = res.Data.List || [];
+            this.reportTotal = parseInt(res.Data.Paging.Totals);
+          }
+        });    
+      },
+      pageChange(page_no){
+        this.reportParams.CurrentIndex = page_no;
+        this.getReportList();
+      },
+      reportSelect(selection){
+        this.selections=selection
+        let allIds = this.reportList.map(it => {
+          return it.Id
+        })
+        let simpleSelections = selection.map(it => {
+          return {Id:it.Id,Code:it.ReportCode,Name:it.Title}
+        })
+
+        let unselectIds=[]
+
+        if(simpleSelections.length>0){
+          allIds.map(id =>{
+            if(simpleSelections.every(sele => id!=sele.Id )){
+              unselectIds.push(id)
+            }
+          })
+        }else{
+          unselectIds=allIds
+        }
+        //没有就增加
+        simpleSelections.map(item =>{
+          let rId = this.addLinkSearchParams.linkType+'-'+item.Id
+          if(this.checkedLinkList.every(sele => rId!=sele.RId )){
+            this.checkedLinkList.push({
+              RId:rId,
+              Id:item.Id,
+              Name:item.Name,
+              Type:this.addLinkSearchParams.linkType,
+              editing:false,
+              detailParams:{id:item.Id,code:item.Code}
+            })
+          }
+        })
+        //有就去掉
+        unselectIds.map(item =>{
+          let rId = this.addLinkSearchParams.linkType+'-'+item
+          let index = this.checkedLinkList.findIndex(link => rId==link.RId)
+          if(index!=-1){
+            this.checkedLinkList.splice(index,1)
+          }
+        })
+      },
+      saveLink(){
+        this.$emit("saveLink", this.checkedLinkList);
+      },
+      cancelHandle(){
+        this.$emit("update:show", false);
+      }
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+    .add-link-box{
+      padding: 15px 40px 35px;
+      .link-box-option{
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 30px;
+      }
+      .link-box-content{
+        margin-bottom: 30px;
+        .link-content-dataIndex{
+          display: flex;
+          flex-direction: column;
+          .value-ul {
+            flex-grow: 1;
+            overflow-y: auto;
+            margin-top: 10px;
+            height: 200px;
+            border-bottom: 1px solid #EBEFF6;
+            .value-item {
+              /* width: 100%; */
+              padding: 10px 0;
+              border: 1px solid #dcdfe6;
+              border-bottom: none;
+              display: flex;
+              justify-content: space-around;
+              >span{
+                padding:0 16px;
+                box-sizing: border-box;
+              }
+              .value-label {
+                position: relative;
+                color: #666;
+                .value-style{
+                  padding:5px;
+                  border-radius: 4px;
+                  &.predict-act {
+                    color: orange;
+                  }
+                }
+                &.date{
+                  &::after{
+                    content: '';
+                    position:absolute;
+                    right:0;
+                    top:-14px;
+                    height:calc(100% + 28px);
+                    width:1px;
+                    background-color: #dcdfe6;
+                  }
+                }
+              }
+              .predict-act {
+                color: orange;
+              }
+              .new-tag {
+                width: 6px;
+                height: 6px;
+                display: inline-block;
+                position: absolute;
+                left: -12px;
+                top: 50%;
+                transform: translateY(-50%);
+                border-radius: 50%;
+                background: #f00;
+              }
+            }
+            .nodata {
+              text-align: center;
+              padding: 40px 0;
+              color: #999;
+            }
+          }
+          .delete-button{
+            color: #AD352F;
+            font-size: 14px;
+            cursor: pointer;
+          }
+        }
+        .link-content-chartIndex{
+          .chart-name{
+            font-size: 16px;
+            text-align: center;
+            color: #333333;
+          }
+        }
+      }
+      .link-box-tags{
+        display: flex;
+        align-items: center;
+        overflow-x: auto;
+        .link-box-tag{
+          display: flex;
+          align-items: center;
+          padding: 0 8px;
+          height: 30px;
+          max-width: 250px;
+          background-color: #F8F8F8;
+          margin-right: 30px;
+          cursor: pointer;
+          &:last-child{
+            margin-right: 0;
+          }
+          span{
+            color: #666666;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+          img{
+            height: 16px;
+            width: 16px;
+            margin-left: 8px;
+          }
+        }
+      }
+      .link-box-buttons{
+        margin-top: 60px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+      }
+    }
+</style>

src/vuex/modules/sand.js

@@ -2,7 +2,6 @@
 import { configOpt,styleSettings } from '@/views/sandbox_manage/common/toolConfig';
 
 const setSandboxToolStatus=(state,payload)=>{
-	console.log(payload,'payload',state);
 	if(!(payload&&payload.length>0)){
 		state.toolStatus.textDisabled=true
 		state.toolStatus.edgeDisabled=true
@@ -35,7 +34,7 @@ const setSandboxToolStatus=(state,payload)=>{
 		for (let i = 0; i < payload.length; i++) {
 			const element = payload[i];
 			const attrs = element.getAttrs()
-			console.log(element.shape);
+			// console.log(element.shape);
 			if(element.shape.indexOf('edge')==-1){
 				state.toolStatus.textDisabled=false
 				state.toolStatus.edgeDisabled=true
@@ -68,7 +67,7 @@ const setSandboxToolStatus=(state,payload)=>{
 				endArrowSet.add(attrs.line.targetMarker)
 				const router = element.getRouter()
 				const connector = element.getConnector()
-				console.log(router,connector,'router,connector');
+				// console.log(router,connector,'router,connector');
 				if(router && router.name=="normal"){
 					connectStyleSet.add(1)
 				}else{