沙盘图修改

src/utils/buttonConfig.js

@@ -401,10 +401,14 @@ export const etaTablePermission = {
  * --------------------------------------------------------------------------ETA逻辑------------------------------------------------
 */
 export const sandboxPermission = {
-    sandbox_variety:'sandbox:variety',//沙盘品种选择，控制筛选项和列表项
+    sandbox_variety:'sandbox:variety',//沙盘品种选择，添加目录的时候控制显示
     sandbox_addMy:'sandbox:addMy',//复制图片
     sandbox_del:'sandbox:del',//删除
     sandbox_saveView:'sandbox:saveView',//添加/编辑/查看
+    sandbox_search:'sandbox:search',//搜索
+    sandbox_classify_move:'sandbox:classify:move',//分类操作：移动
+    sandbox_classify_del:'sandbox:classify:del',//分类操作：删除
+    sandbox_classify_addEdit:'sandbox:classify:addEdit',//分类操作：添加/编辑
 }
 /*
  * --------------------------------------------------------------------------语义分析------------------------------------------------

src/views/sandbox_manage/common/events.js

@@ -2,9 +2,10 @@ import { store } from "../../../main";
 import { configOpt } from './toolConfig';
 import _ from "lodash"
 const { line} = configOpt;
-/* 节点操作监听事件 */
-export const myEvents = (graph,mindmapDataUse) => {
 
+/* 节点操作监听事件 */
+export const myEvents = (graph,mindmapDataUseFun) => {
+		
 		/* 节点双击编辑 */
 		graph.on('node:dblclick', ({ node, e }) => {
 			// 节点当前设置的样式同步到编辑区
@@ -83,7 +84,7 @@ export const myEvents = (graph,mindmapDataUse) => {
 				graph.stopBatch('editText')
 
 				if(node.shape.indexOf('mindmap')!==-1){
-
+					const mindmapDataUse=mindmapDataUseFun()
 					let ids = node.id.split('-')
 					let mindmapDataIndex = mindmapDataUse.findIndex(mindmap => mindmap.mindmapData.id == ids[0])
 					let mindMapDataCurrent = mindmapDataUse[mindmapDataIndex]?mindmapDataUse[mindmapDataIndex].mindmapData:{}
@@ -231,75 +232,21 @@ export const myEvents = (graph,mindmapDataUse) => {
 				cell.removeTools()
 			}
 		})
-		graph.history.on('batch', ({ cell }) => {
-			console.log(arguments,'arguments--batch');
-		})
 }
 
 /* 绑定键盘事件 */
-export const bindKey = (graph,mindmapDataUse,mindmapAssistData) => {
+export const bindKey = (graph,mindmapDataUseFun,mindmapAssistData) => {
 	 // 删除
 	graph.bindKey(['delete', 'backspace'], () => {
-		const select_cell = graph.getSelectedCells();
-		let delete_cells=[]
-		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"){
-				continue
-			}else if(cell.shape.indexOf('mindmap')!=-1){
-				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)
-		}
-		let shouldOperations=[]
-		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)
-		})
-		// 删除前备份
-		mindmapAssistData.mindmapDataRecoverUse.push(JSON.stringify(mindmapDataUse))
-		mindmapAssistData.mindmapDataRecoverPtr++
-		console.log(shouldOperations,'shouldOperations');
-		shouldOperations.map(it =>{
-			it.map(it1 =>{
-				deleteMindmapData(it1,mindmapDataUse)
-			})
-		})
-		console.log(mindmapDataUse,'mindmapDataUse');
-
+		const mindmapDataUse=mindmapDataUseFun()
+		deleteNodes(graph,mindmapDataUse,mindmapAssistData)
 		return false
 	}, 'keydown');
 
 	/* cv */
 	graph.bindKey('ctrl+c', () => {
-		const select_cell = graph.getSelectedCells();
+		// 去除思维导图的节点
+		const select_cell = graph.getSelectedCells().filter(it => it.shape.indexOf('mindmap')==-1);
 		if (select_cell.length) {
 			graph.copy(select_cell)
 		}
@@ -330,32 +277,21 @@ export const bindKey = (graph,mindmapDataUse,mindmapAssistData) => {
 }
 
 /* 右键事件 */
-export const contextEvent = (graph,key) => {
+export const contextEvent = (graph,key,mindmapDataUse,mindmapAssistData) => {
 	// console.log(key)
 	switch (key) {
 		case 'copy':
 			nodeCopyAndPaste(graph);
 			break;
 		case 'del': 
-			nodeDelete(graph);
+			nodeDelete(graph,mindmapDataUse,mindmapAssistData);
 			break;
 	}
 }
 
 /* 删除节点 清空选区*/
-const nodeDelete = (graph) => {
-	const select_cell = graph.getSelectedCells();
-	// console.log(select_cell)
-	if (select_cell.length) {
-
-		// 移除工具
-		select_cell.forEach(item => item.removeTools());
-		graph.removeCells(select_cell);
-
-		//重置工具栏
-		// store.commit('sand/SET_SELECT_STATUS',{key:'default'});
-		// store.commit('sand/SET_SELECT_CELL',null);
-	}
+const nodeDelete = (graph,mindmapDataUse,mindmapAssistData) => {
+	deleteNodes(graph,mindmapDataUse,mindmapAssistData)
 }
 /* 复制粘贴节点 */
 const nodeCopyAndPaste = (graph) => {
@@ -371,28 +307,89 @@ const nodeCopyAndPaste = (graph) => {
 }
 
 /* 关联三种基础图形选中样式 */
-const setSelectedOptions = ({ rect, text }, key) => {
-	console.log({ rect, text },'{ rect, text }',key);
-	return ['rect','date'].includes(key) ? {
-		text: { //文本设置
-			size: text.fontSize,
-			fontWeight: text.fontWeight, //
-			color: text.fill
-		},
-		border: { //线框设置
-			// isDash: 0, // 0实 1虚线
-			width: rect.strokeWidth,
-			fill: rect.fill,
-			borderColor: rect.stroke,
-		},
-
-	} : key === 'text' ? {
-		text: { //文本设置
-			size: text.fontSize,
-			fontWeight: text.fontWeight,
-			color: text.fill
-		},
-	}: {}
+// const setSelectedOptions = ({ rect, text }, key) => {
+// 	console.log({ rect, text },'{ rect, text }',key);
+// 	return ['rect','date'].includes(key) ? {
+// 		text: { //文本设置
+// 			size: text.fontSize,
+// 			fontWeight: text.fontWeight, //
+// 			color: text.fill
+// 		},
+// 		border: { //线框设置
+// 			// isDash: 0, // 0实 1虚线
+// 			width: rect.strokeWidth,
+// 			fill: rect.fill,
+// 			borderColor: rect.stroke,
+// 		},
+
+// 	} : key === 'text' ? {
+// 		text: { //文本设置
+// 			size: text.fontSize,
+// 			fontWeight: text.fontWeight,
+// 			color: text.fill
+// 		},
+// 	}: {}
+// }
+
+const deleteNodes=(graph,mindmapDataUse,mindmapAssistData)=>{
+	console.log(mindmapDataUse,mindmapAssistData,'最源数据');
+	const select_cell = graph.getSelectedCells();
+	let delete_cells=[]
+	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"){
+			continue
+		}else if(cell.shape.indexOf('mindmap')!=-1){
+			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)
+	}
+	let shouldOperations=[]
+	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');
+	shouldOperations.map(it =>{
+		it.map(it1 =>{
+			deleteMindmapData(it1,mindmapDataUse)
+		})
+	})
+	// console.log(mindmapDataUse,'mindmapDataUse',mindmapAssistData,'mindmapAssistData');
+
 }
 
 const deleteMindmapData=(id,data)=>{
@@ -410,10 +407,15 @@ const deleteMindmapData=(id,data)=>{
 	for (let i = 1; i < ids.length-1; i++) {
 		const element = ids[i];
 		findId = findId+'-'+element
+		if(!(mindmapData && mindmapData.children)){
+			return 
+		}
 		mindmapData=mindmapData.children.find(it => it.id==findId)
 	}
 	let endId = ids[ids.length-1]
-
+	if(!(mindmapData && mindmapData.children)){
+		return 
+	}
 	let endIndex = mindmapData.children.findIndex(it => it.id == findId+'-'+endId)
 	mindmapData.children.splice(endIndex,1)
 	// console.log(data);

src/views/sandbox_manage/common/gragh.js

@@ -1,19 +1,19 @@
 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 mindmapDataUse 思维导图数组，传递给事件 type 模式，编辑和查看
-export function myGraph (wrapper,mindmapDataUse,mindmapAssistData,type='edit') {
-	console.log(wrapper,'wrapperwrapper');
+// wrapper DOM的Id mindmapDataUseFun 返回思维导图数组函数，传递给事件 type 模式，编辑和查看
+export function myGraph (wrapper,mindmapDataUseFun,mindmapAssistData,type='edit') {
 	const graph = new Graph({
 		container: document.getElementById(wrapper),
 		// width: $(window).width(),
 		// height: $(window).height(),
 		history:{
 			enabled:true,
-			// applyOptionsList:['options1','options2'],
-			// revertOptionsList:['options3','options4'],
 			beforeAddCommand(event, args){
 				console.log(event, args,'event, args');
 				if(args.key=='tools'){
@@ -22,7 +22,7 @@ export function myGraph (wrapper,mindmapDataUse,mindmapAssistData,type='edit') {
 				}
 			}
 		},
-		autoResize: true, 
+		autoResize: false, 
 		background: {
 			color: '#fff',
 		},
@@ -119,7 +119,7 @@ export function myGraph (wrapper,mindmapDataUse,mindmapAssistData,type='edit') {
 				return new Shape.Edge({
 					attrs: {
 						line: {
-							stroke: line.color,
+							stroke: styleConfig.lineColor,
 							strokeWidth: line.width,
 							strokeDasharray: "",//虚线间隔
 							sourceMarker: false,//起始箭头 
@@ -146,11 +146,11 @@ export function myGraph (wrapper,mindmapDataUse,mindmapAssistData,type='edit') {
 	})
 
 	/* 节点操作事件 */
-	if(type!='view') myEvents(graph,mindmapDataUse);
+	if(type!='view') myEvents(graph,mindmapDataUseFun);
 	
 
 	/* 键盘事件 */
-	if(type!='view') bindKey(graph,mindmapDataUse,mindmapAssistData);
+	if(type!='view') bindKey(graph,mindmapDataUseFun,mindmapAssistData);
 
 	return graph;
 }

src/views/sandbox_manage/common/mindmap.js

@@ -15,7 +15,7 @@ export default {
   },
   created() {
     this.styleConfig=this.$store.state.sand.styleConfig
-    console.log(this.styleConfig,'this.styleConfig');
+    // console.log(this.styleConfig,'this.styleConfig');
     // 中心主题
     Graph.registerNode(
       'mindmap-topic',          
@@ -36,7 +36,7 @@ export default {
           },
           {
             tagName: 'text',
-            selector: 'label',
+            selector: 'text',
           },
         ],
         attrs: {
@@ -73,7 +73,7 @@ export default {
             event: 'add:topic:right',
             class: 'right-topic-image',
           },
-          label: {
+          text: {
             fontSize: 14,
             fill: this.$store.state.sand.styleConfig.color,
             textWrap:{
@@ -104,7 +104,7 @@ export default {
           },
           {
             tagName: 'text',
-            selector: 'label',
+            selector: 'text',
           },
         ],
         attrs: {
@@ -129,7 +129,7 @@ export default {
             event: 'add:topic:left',
             class: 'left-topic-image',
           },
-          label: {
+          text: {
             fontSize: 14,
             fill: this.$store.state.sand.styleConfig.color,
             textWrap:{
@@ -160,7 +160,7 @@ export default {
           },
           {
             tagName: 'text',
-            selector: 'label',
+            selector: 'text',
           },
         ],
         attrs: {
@@ -185,7 +185,7 @@ export default {
             event: 'add:topic:right',
             class: 'right-topic-image',
           },
-          label: {
+          text: {
             fontSize: 14,
             fill:this.$store.state.sand.styleConfig.color,
             textWrap:{
@@ -208,7 +208,7 @@ export default {
     //       },
     //       {
     //         tagName: 'text',
-    //         selector: 'label',
+    //         selector: 'text',
     //       },
     //       {
     //         tagName: 'path',
@@ -221,7 +221,7 @@ export default {
     //         strokeWidth: 0,
     //         stroke: '#5F95FF',
     //       },
-    //       label: {
+    //       text: {
     //         fontSize: 14,
     //         fill: '#262626',
     //         textVerticalAnchor: 'bottom',
@@ -300,7 +300,6 @@ export default {
         if(args.node.shape.indexOf('mindmap')!==-1){
           let ids = args.node.id.split('-')
 					let mindmapDataIndex = this.mindmapDataUse.findIndex(mindmap => mindmap.mindmapData.id == ids[0])
-          console.log(mindmapDataIndex,'mindmapDataIndex',ids,'ids');
 					let mindMapDataCurrent = this.mindmapDataUse[mindmapDataIndex]?this.mindmapDataUse[mindmapDataIndex].mindmapData:{}
 
 					let findId = ids[0]
@@ -316,7 +315,6 @@ export default {
         }
       })
       this.graph.on('node:change:position', (args) => { 
-        console.log(this.mindmapDataUse,'mindmapDataUsemindmapDataUsemindmapDataUse');
         if(this.operationType=='view') return 
         if(args.node.shape.indexOf('mindmap')!==-1 && Number(args.node.id)){
 
@@ -378,7 +376,6 @@ export default {
       let mindMapType = i || i==0?this.mindmapDataUse[i].addType:this.addTypeCurrent
       this.mindMapDataCurrent = i || i==0?this.mindmapDataUse[i].mindmapData:this.mindMapDataCurrent
       this.positionCurrent = i || i==0?this.mindmapDataUse[i].position:this.positionCurrent
-      console.log(this.mindMapDataCurrent,this.positionCurrent,this.addTypeCurrent,'mindMapRendermindMapRendermindMapRendermindMapRender');
       const result = Hierarchy.mindmap(this.mindMapDataCurrent, {
         direction: 'H',
         getHeight(d) {
@@ -400,16 +397,15 @@ 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');
+      // console.log(result,'result');
       // return 
       const traverse = (hierarchyItem) => {
         if (hierarchyItem) {
           const { data, children } = hierarchyItem
-          console.log(hierarchyItem,'hierarchyItemhierarchyItemhierarchyItem');
+          // console.log(hierarchyItem,'hierarchyItemhierarchyItemhierarchyItem');
           let mindmapDirection = mindMapType.indexOf('double') != -1?data.direction:'right'
           // console.log(mindmapDirection,data.label,data.direction);
           let currentCell=this.graph.getCellById(data.id)
-          console.log(currentCell,'this.graph.getCellById(data.id)');
 
           if(!currentCell){
             // 没有 新增
@@ -428,7 +424,7 @@ export default {
                     stroke: this.$store.state.sand.styleConfig.borderColor,
                     fill: this.$store.state.sand.styleConfig.backgroundColor
                   },
-                  label:{
+                  text:{
                     fill:this.$store.state.sand.styleConfig.color
                   }
                 },
@@ -481,7 +477,7 @@ export default {
       traverse(result)
       // 排下序，把边放最后面 不然 边 会找不到 节点
       let sortCells = cells.sort(cell => cell.shape.indexOf('edge'))
-      console.log(sortCells,'result');
+      // console.log(sortCells,'result');
       // return 
       // this.graph.removeCells(sortCells)
       this.graph.addCell(sortCells)
@@ -511,6 +507,11 @@ 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) {

src/views/sandbox_manage/common/node.js

@@ -137,13 +137,9 @@ export const myNodeOption = (key) => {
 				ports: {
 					items: [
 							{ group: 'port-top', id: 'p_top' },
-							{ group: 'port-top', id: 'p_top-1' },
 							{ group: 'port-bottom', id: 'p_bottom' },
-							{ group: 'port-bottom', id: 'p_bottom-1' },
 							{ group: 'port-left', id: 'p_left' },
-							{ group: 'port-left', id: 'p_left-1' },
 							{ group: 'port-right', id: 'p_right' },
-							{ group: 'port-right', id: 'p_right-1' },
 					],
 					groups: {
 							"port-top": {
@@ -201,13 +197,9 @@ export const myNodeOption = (key) => {
 				ports: {
 					items: [
 						{ group: 'port-top', id: 'p_top' },
-						{ group: 'port-top', id: 'p_top-1' },
 						{ group: 'port-bottom', id: 'p_bottom' },
-						{ group: 'port-bottom', id: 'p_bottom-1' },
 						{ group: 'port-left', id: 'p_left' },
-						{ group: 'port-left', id: 'p_left-1' },
 						{ group: 'port-right', id: 'p_right' },
-						{ group: 'port-right', id: 'p_right-1' },
 					],
 					groups: {
 							"port-top": {
@@ -385,13 +377,9 @@ export const myNodeOption = (key) => {
 				ports: {
 					items: [
 							{ group: 'port-top', id: 'p_top' },
-							{ group: 'port-top', id: 'p_top-1' },
 							{ group: 'port-bottom', id: 'p_bottom' },
-							{ group: 'port-bottom', id: 'p_bottom-1' },
 							{ group: 'port-left', id: 'p_left' },
-							{ group: 'port-left', id: 'p_left-1' },
 							{ group: 'port-right', id: 'p_right' },
-							{ group: 'port-right', id: 'p_right-1' },
 					],
 					groups: {
 							"port-top": {

src/views/sandbox_manage/index_new_version.vue

@@ -1,12 +1,15 @@
 <template>
   <div id="sandbox-index-container">
-    <div class="sandbox-content-tree-box">
+    <span class="slide-icon slide-right" @click="slideHandle" v-show="isSlideLeft">
+      <i class="el-icon-d-arrow-right"></i>
+    </span>
+    <div class="sandbox-content-tree-box" v-show="!isSlideLeft">
       <div class="sandbox-content-tree-header">
-        <el-button type="primary" style="width: 170px;" @click="addSand">添加逻辑</el-button>
+        <el-button type="primary" style="width: 170px;" @click="addSand" v-permission="permissionBtn.sandboxPermission.sandbox_saveView">添加逻辑</el-button>
         <el-checkbox v-model="searchParams.IsShowMe" @change="onlyMeHandler">只看我的</el-checkbox>
       </div>
       <div class="sandbox-content-tree-body">
-        <div style="padding: 0 20px;">
+        <div style="padding: 0 20px;" v-permission="permissionBtn.sandboxPermission.sandbox_search">
           <el-select v-model="searchSandboxId" v-loadMore="searchLoad" :filterable="!searchSandboxId" remote @change="sandboxChange"
           clearable placeholder="请输入逻辑图名称" style="width: 100%; margin-bottom: 20px;" :remote-method="searchHandle"
           @click.native="inputFocusHandle">
@@ -23,14 +26,17 @@
         <div class="sandbox-content-tree">
           <tree :nodes="treeData" :setting="setting" @onCreated="getZTree" @onDrop="zTreeDrop" key="classify" 
           @onExpand="zTreeExpand"/>
-          <div class="add-classify">
+          <div class="add-classify" v-permission="permissionBtn.sandboxPermission.sandbox_classify_addEdit">
             <img src="~@/assets/img/sand_new/add_ico.png"/>
             <span @click="addLevelOneHandle">添加分类</span>
           </div>
+          <span class="slide-icon slide-left" @click="slideHandle">
+            <i class="el-icon-d-arrow-left"></i>
+          </span>
         </div>
       </div>
     </div>
-    <div class="sandbox-pictures-box" v-show="rightType=='list'">
+    <div class="sandbox-pictures-box" v-show="rightType=='list'" v-permission="permissionBtn.sandboxPermission.sandbox_saveView">
       <div class="pictures-count">
         共{{total}}个逻辑图
       </div>
@@ -45,8 +51,9 @@
             <div class="item-bottom">
               <span>{{ picture.CreateTime.slice(0,10) }}</span>
               <div class="item-bottom-buttons">
-                <span class="join_txt" @click="copyHandle(picture)">复制</span>
-                <span class="join_txt" @click="deleteHandle(picture,'inList')">删除</span>
+                <span class="join_txt" @click="copyHandle(picture)" v-permission="permissionBtn.sandboxPermission.sandbox_addMy">复制</span>
+                <span class="join_txt" @click="deleteHandle(picture,'inList')" style="color: #C54322;"
+                v-permission="permissionBtn.sandboxPermission.sandbox_del">删除</span>
               </div>
             </div>
           </div>
@@ -61,7 +68,7 @@
         <div class="sandbox-chartHead-author">作者：<span>{{ this.viewSandbox.SysUserName }}</span></div>
         <div class="sandbox-chartHead-title">{{ this.viewSandbox.Name }}</div>
         <div class="sandbox-chartHead-options">
-          <div class="chartHead-options-button" @click="editSand">
+          <div class="chartHead-options-button" @click="editSand" v-permission="permissionBtn.sandboxPermission.sandbox_saveView">
             <img src="~@/assets/img/sand_new/edit_outline.png" />
             <span>编辑</span> 
           </div>
@@ -69,13 +76,13 @@
             <img src="~@/assets/img/sand_new/save-other.png" />
             <span>另存为</span> 
           </div>
-          <div class="chartHead-options-button" @click="copySandHandle">
+          <div class="chartHead-options-button" @click="copySandHandle" v-permission="permissionBtn.sandboxPermission.sandbox_addMy">
             <img src="~@/assets/img/sand_new/copy.png" />
             <span>复制</span> 
           </div>
           <div class="chartHead-options-button" @click="deleteHandle(viewSandbox,'inchart')">
             <img src="~@/assets/img/sand_new/remove.png" />
-            <span style="color: red;">删除</span> 
+            <span style="color: red;" v-permission="permissionBtn.sandboxPermission.sandbox_del">删除</span> 
           </div>
         </div>
       </div>
@@ -103,9 +110,9 @@
     </div>
     <!-- 目录自定义按钮区域 -->
     <div id="custom-button-zone" class="custom-button-zone">
-      <img src="~@/assets/img/sand_new/add_outline.png" class="add-classify-img"/>
-      <img src="~@/assets/img/sand_new/edit_outline.png" class="edit-classify-img"/>
-      <img src="~@/assets/img/sand_new/delete_outline.png" class="delete-classify-img"/>
+      <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"/>
     </div>
     <!-- 添加分类 -->
     <el-dialog
@@ -197,7 +204,7 @@ import { myGraph } from './common/gragh';
     components:{tree},
     computed:{
       hasVariety(){
-        return true
+        return this.permissionBtn.isShowBtn('sandboxPermission','sandbox_variety')
       }
     },
     mixins:[mindmap],
@@ -217,7 +224,7 @@ import { myGraph } from './common/gragh';
             })
           }
         }
-      },
+      }
 	  },
     data() {
       return {
@@ -261,11 +268,15 @@ import { myGraph } from './common/gragh';
           },
           edit:{
             enable:true,
-            isCopy:false,
             showRemoveBtn:false,
-            showRenameBtn:false
+            showRenameBtn:false,
+            drag:{
+              isCopy:false,
+              isMove:false,
+            }
           },
           callback:{
+            beforeDrag:this.zTreeDragBefore,
             beforeDrop:this.zTreeDropBefore,
             onDrop:this.zTreeDrop,
             beforeExpand:this.zTreeExpandBefore,
@@ -337,6 +348,7 @@ import { myGraph } from './common/gragh';
         checkedLinkList:[],
         linkNode:null,
         popoverTimeout:null,
+        isSlideLeft:false
       }
     },
     created(){
@@ -377,10 +389,12 @@ import { myGraph } from './common/gragh';
       
       this.popoverDom.addEventListener('mouseenter',this.clearPopoverTimeout)
       this.popoverDom.addEventListener('mouseleave',this.closePopover)
+
     },
     beforeDestroy(){
       this.popoverDom.removeEventListener('mouseenter',this.clearPopoverTimeout)
       this.popoverDom.removeEventListener('mouseleave',this.closePopover)
+
     },
     methods:{
       /* 获取品种 */
@@ -449,6 +463,9 @@ import { myGraph } from './common/gragh';
         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,'treeId,treeNodes,targetNode,moveType,isCop');
         // console.log(!treeNodes[0].isCatalogue,targetNode.Level,moveType);
@@ -955,13 +972,16 @@ import { myGraph } from './common/gragh';
         if(treeNode.isCatalogue){
           //目录添加自定义按钮
           let dom = $('#custom-button-zone')[0].cloneNode(true)
+          let addClassifyDom = $(dom).find('.add-classify-img')[0]
+          let editClassifyDom = $(dom).find('.add-classify-img')[0]
+          let delClassifyDom = $(dom).find('.add-classify-img')[0]
           if(treeNode.Level>4){
-            $(dom).find('.add-classify-img')[0].style.display='none'
+            addClassifyDom && (addClassifyDom.style.display='none')
           }else{
-            $(dom).find('.add-classify-img')[0].addEventListener("click",(e)=>this.addClassify(e,treeNode))
+            addClassifyDom && addClassifyDom.addEventListener("click",(e)=>this.addClassify(e,treeNode))
           }
-          $(dom).find('.edit-classify-img')[0].addEventListener("click",(e)=>this.editClassify(e,treeNode))
-          $(dom).find('.delete-classify-img')[0].addEventListener("click",(e)=>this.deleteClassify(e,treeNode))
+          editClassifyDom && editClassifyDom.addEventListener("click",(e)=>this.editClassify(e,treeNode))
+          delClassifyDom && delClassifyDom.addEventListener("click",(e)=>this.deleteClassify(e,treeNode))
 
           aObj.append(dom);
         }
@@ -1037,6 +1057,19 @@ import { myGraph } from './common/gragh';
                 svg.setAttribute('viewBox',`${x-25} ${y-25} ${width+50} ${height+50}`)
                 // 在图表右下方 加上"来源：弘则研究"字样
                 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)
@@ -1125,6 +1158,19 @@ import { myGraph } from './common/gragh';
           //设置viewBox使图像居中
           svg.setAttribute('viewBox',`${x-25} ${y-25} ${width+50} ${height+50}`)
           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)
@@ -1160,7 +1206,7 @@ import { myGraph } from './common/gragh';
       //==============================画布
       // 初始化画布
       init() {
-        const graph = new myGraph('sand-chart-body',null,'view');
+        const graph = new myGraph('sand-chart-body',null,'','view');
         console.log(graph,'graph');
         this.graph = graph;
         graph.on('node:mouseenter', ({ node, e }) => {
@@ -1252,6 +1298,10 @@ import { myGraph } from './common/gragh';
       closePopover(){
         this.popoverVisible=false
       },
+      /* 向左收起 展开 */
+      slideHandle() {
+        this.isSlideLeft = !this.isSlideLeft;
+      },
     }
   }
 </script>
@@ -1272,6 +1322,7 @@ import { myGraph } from './common/gragh';
     border-radius: 4px;
     box-sizing: border-box;
     margin-right: 16px;
+    position: relative;
     .sandbox-content-tree-header{
       box-sizing: border-box;
       padding: 20px;
@@ -1364,9 +1415,6 @@ import { myGraph } from './common/gragh';
             span{
               color: #0052D9;
               cursor: pointer;
-              &:last-child{
-                color: #C54322;
-              }
             }
           }
         }
@@ -1388,6 +1436,7 @@ import { myGraph } from './common/gragh';
       align-items: center;
       justify-content: space-between;
       flex-wrap: nowrap;
+      white-space: nowrap;
       .sandbox-chartHead-author{
         font-size: 16px;
         color: #666666;
@@ -1395,6 +1444,7 @@ import { myGraph } from './common/gragh';
       .sandbox-chartHead-title{
         font-size: 16px;
         color: #333333;
+        padding: 0 12px;
       }
       .sandbox-chartHead-options{
         display: flex;
@@ -1418,8 +1468,26 @@ import { myGraph } from './common/gragh';
     }
   }
 
-
-
+  .slide-icon {
+    padding: 20px 0;
+    /* display: block; */
+    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3);
+    border-radius: 5px;
+    cursor: pointer;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 99;
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.05);
+    }
+    &.slide-left {
+      right: 0;
+    }
+    &.slide-right {
+      left: 0;
+    }
+  }
   @media screen and (max-width:1680px) {
     .sandbox-content-tree-box{
       min-width: 330px;

src/views/sandbox_manage/sandFlowNew/index.vue

@@ -1,6 +1,12 @@
 <template>
   <div id="sand-edit-container" class="sand-edit-container">
-    <div class="sand-toolbar">
+    <span class="slide-icon slide-right" @click="slideHandle" v-show="isSlideLeft">
+      <i class="el-icon-d-arrow-right"></i>
+    </span>
+    <div class="sand-toolbar" v-show="!isSlideLeft">
+      <span class="slide-icon slide-left" @click="slideHandle">
+        <i class="el-icon-d-arrow-left"></i>
+      </span>
       <el-tabs v-model="activeToolTabName" stretch class="sand-toolbar-tabs">
         <el-tab-pane label="元素库" name="元素库" id="element">
           <div class="sand-elements-tab">
@@ -91,8 +97,9 @@
             <img src="~@/assets/img/sand_new/eye-show-black.png" />
             <span>链接展示</span>
           </div> -->
-          <el-button size="large" type="primary" plain @click="copySandHandle" style="margin-right: 20px;min-width: 120px;">复制图片</el-button>
-          <el-button type="primary" size="large" @click="saveChart(null)" style="min-width: 120px;">保存</el-button>
+          <el-button size="large" type="primary" plain @click="copySandHandle" style="margin-right: 20px;min-width: 120px;"
+          v-permission="permissionBtn.sandboxPermission.sandbox_addMy">复制图片</el-button>
+          <el-button type="primary" size="large" @click="saveChart(null)" style="min-width: 120px;" v-permission="permissionBtn.sandboxPermission.sandbox_saveView">保存</el-button>
         </div>
       </div>
       <div class="sand-main-body">
@@ -111,7 +118,7 @@
                 <div :class="nodeTextDisable?'tool-disabled':''" class="dropdown-box">
                   <el-tooltip content="字体" placement="top" :open-delay="250">
                     <div class="dropdown-content"  >
-                      <div class="dropdown-content-text" >{{ styleOptions.fontF }}</div>
+                      <div class="dropdown-content-text" style="width:28px">{{ styleOptions.fontF }}</div>
                       <img src="~@/assets/img/sand_new/tools/select-icon.png" style="width: 8px;height: 5px;"/>
                     </div>
                   </el-tooltip>
@@ -279,7 +286,7 @@
                 <el-tooltip content="线条宽度" placement="top" :open-delay="250">
                   <div class="dropdown-content"  >
                     <img :src="nodeEdgeDisable? 
-                      require('@/assets/img/sand_new/tools/line-width.png'):
+                      require('@/assets/img/sand_new/tools/line-width-disabled.png'):
                       require('@/assets/img/sand_new/tools/line-width.png')" 
                       style="vertical-align: middle;"/>
                   </div>
@@ -608,8 +615,6 @@ import { myGraph } from '../common/gragh';
 import { myNodes,myNodeOption } from '../common/node';
 import { myEdgeOption } from '../common/edge';
 import { Addon } from '@antv/x6'
-import { configOpt } from '../common/toolConfig';
-// import {setGraph,render} from "../common/mindmap"
 import mindmap from "../common/mindmap"
 import {styleSettings,familyOptions,fontSizeOptions,colorsOptions,lineHeightOptions} from "../common/toolConfig"
 import { ElDropdownMenu as DropdownMenu } from 'element-ui';
@@ -623,9 +628,7 @@ import { chartSetMixin } from '../../dataEntry_manage/mixins/chartPublic'
 import Chart from '../../dataEntry_manage/components/chart.vue'
 import mPage from "@/components/mPage.vue";
 import { svgToBase64 } from '@/utils/svgToblob'
-// import popover from './popover.vue';
-import { Graph} from '@antv/x6'
-const { line} = configOpt;
+
   export default {
     name:"sandFlowIndex",
     components:{
@@ -645,7 +648,7 @@ const { line} = configOpt;
         mindmapDataUse:[],
         mindmapAssistData:{
           mindmapDataRecoverUse:[],//用于恢复撤销和重做时被删除的思维导图数据
-          mindmapDataRecoverPtr:-1, //当前索引
+          // mindmapDataRecoverPtr:-1, //当前索引
         },
         sandSaveParams:{
           Name:'',
@@ -712,7 +715,8 @@ const { line} = configOpt;
         popoverTriggerDom:null,
         popoverTimeout:null,
         linkNode:null,
-        popoverFlod:true
+        popoverFlod:true,
+        isSlideLeft:false
       }
     },
     mixins:[mindmap,chartSetMixin],
@@ -724,12 +728,11 @@ const { line} = configOpt;
       /* 选中搜索指标 展开目录 选中指标 展示数据 */
       search_dataBaseId(newval) {
         if (newval) {
-          console.log(newval);
           if(this.addLinkSearchParams.linkType==1){
             let search_obj = this.dataBaseOptions.find(
               (item) => item.EdbInfoId === newval
             );
-            console.log(search_obj,'search_obj');
+            // console.log(search_obj,'search_obj');
             if(search_obj){
               this.checkedLinkList.push({
                 RId:this.addLinkSearchParams.linkType+'-'+search_obj.EdbInfoId,
@@ -874,6 +877,7 @@ const { line} = configOpt;
             Name,
             SandboxClassifyId,
             Content: JSON.stringify(this.graph.toJSON()),
+            PicUrl:'',
             MindmapData:JSON.stringify(this.mindmapDataUse)
           }).then((res) => {
             if(res.Ret !== 200) return
@@ -882,29 +886,31 @@ const { line} = configOpt;
       },
       // 初始化画布
       init() {
-        const graph = new myGraph('sand-chart-container',this.mindmapDataUse,this.mindmapAssistData);
-        graph.history.on('change', (args) => { 
+        const graph = new myGraph('sand-chart-container',this.getMindmapDataUse,this.mindmapAssistData);
+        this.graph = graph;
+        
+        this.graph.history.on('change', (args) => { 
           // console.log(args,'change-history');
-          this.canUndo = graph.canUndo()
-          this.canRedo = graph.canRedo()
+          this.canUndo = this.graph.canUndo()
+          this.canRedo = this.graph.canRedo()
           // console.log(this.canUndo,this.canRedo);
         })
-        graph.history.on('undo', (args) => { 
-          console.log(args,'undo-history');
+        this.graph.history.on('undo', (args) => { 
+          // console.log(args,'undo-history');
           // let ids=[]
           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 
-          // console.log(mindmapNodes,'mindmapNodes');
+          console.log(mindmapNodes,'mindmapNodes');
           let mindmapUndoType=mindmapNodes[0].event
           if(mindmapUndoType=="cell:added"){
             this.mindmapRecoverRemove(mindmapNodes)
           }else if(mindmapUndoType=="cell:removed"){
             this.mindmapRecoverAdd()
           }
-          console.log(this.mindmapDataUse);
+          // console.log(this.mindmapDataUse);
         })
-        graph.history.on('redo', (args) => { 
-          console.log(args,'redo-history');
+        this.graph.history.on('redo', (args) => { 
+          // console.log(args,'redo-history');
           // let ids=[]
           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 
@@ -915,12 +921,18 @@ const { line} = configOpt;
           }else if(mindmapUndoType=="cell:removed"){
             this.mindmapRecoverRemove(mindmapNodes)
           }
-          console.log(this.mindmapDataUse,'mindmapDataUse');
+          // console.log(this.mindmapDataUse,'mindmapDataUse');
         })
-        graph.on('node:mouseenter', ({ node, e }) => {
-          console.log(node);
+        this.graph.on('node:mouseenter', ({ node, e }) => {
+          // console.log(node);
           let data = node.data
           this.linkNode = node
+          let isMindmap = node.shape.indexOf('mindmap')!=-1
+          this.contextMenuOption.map(item =>{
+            if(item.key=='copy'){
+              item.show=!isMindmap
+            }
+          })
           if(data && data.linkData && data.linkData.length>0){
             this.popoverFlod = data.linkFold
             this.popoverVisible=false
@@ -941,10 +953,9 @@ const { line} = configOpt;
                 this.checkedLinkList = currentLinks.filter(link =>{
                   return EdbInfoIdList.includes(link.Id) || ChartInfoIdList.includes(link.Id) || ReportIdList.includes(link.Id)
                 })
-                let clinetPositon=graph.localToClient(node.position())
+                let clinetPositon=this.graph.localToClient(node.position())
                 let size=node.size()
-                console.log(clinetPositon.y,'clinetPositon');
-                // const dom = $('#link-reference')[0];
+                // console.log(clinetPositon.y,'clinetPositon');
                 // console.log(this.popoverTriggerDom,'domdomdom');
                 this.popoverTriggerDom.style.left = clinetPositon.x+size.width/2 + 'px';
                 this.popoverTriggerDom.style.top = clinetPositon.y + 'px';
@@ -977,7 +988,7 @@ const { line} = configOpt;
           }
         })
       
-        graph.on('node:mouseleave', ({ node, e }) => {
+        this.graph.on('node:mouseleave', ({ node, e }) => {
           if(!this.popoverTimeout){
             this.popoverTimeout= setTimeout(()=>{
               this.popoverVisible=false
@@ -989,17 +1000,15 @@ const { line} = configOpt;
 
         })
 
-        graph.on('node:change:position', (args) => { 
-          console.log(args);
+        this.graph.on('node:change:position', (args) => { 
           if(args.node.data && args.node.data.linkData && args.node.data.linkData.length>0
           &&this.popoverVisible){
-            console.log(args.node.data.linkData);
+            // console.log(args.node.data.linkData);
             this.changePopoverPositon(args)
 
           }
         })
 
-        this.graph = graph;
         this.dnd = new Addon.Dnd({
           target: this.graph,
           animation: true,
@@ -1009,6 +1018,9 @@ const { line} = configOpt;
         });
         this.setGraph()
 		  },
+      getMindmapDataUse(){
+        return this.mindmapDataUse
+      },
       dragStart(data,e) {
         // console.log(data,e,"触发了")
         const { key,shape } = data;
@@ -1021,7 +1033,6 @@ const { line} = configOpt;
       },
       edgeDragStart(type,e){
         this.addType = type
-        console.log(type,"触发了边")
       },
       edgeDragover(e){
         e.preventDefault()
@@ -1030,12 +1041,12 @@ const { line} = configOpt;
         if(!this.addType){
           return 
         }
-        console.log(this.addType,e);
-        console.log(this.graph);
+        // console.log(this.addType,e);
+        // console.log(this.graph);
         let position = this.graph.clientToLocal({x:e.clientX,y:e.clientY})
         if(this.addType.indexOf("Mindmap")!==-1){
           //插入思维导图
-          console.log("插入思维导图");
+          // console.log("插入思维导图");
           this.generateMindmapData(position,this.addType)
           this.mindMapRender(this.mindmapDataUse.length-1)
         }else{
@@ -1103,7 +1114,7 @@ const { line} = configOpt;
 
         for (let i = 0; i < cells.length; i++) {
           const element = cells[i];
-          console.log(element);
+          // console.log(element);
           if(element.shape.indexOf("edge") !=-1){
             element.setAttrs({
               line:{
@@ -1122,7 +1133,7 @@ const { line} = configOpt;
                 fill:styleData.backgroundColor,
                 stroke:styleData.borderColor,
               },
-              label:{
+              text:{
                 fill:styleData.color
               }
             })
@@ -1137,7 +1148,7 @@ const { line} = configOpt;
         }else if(key=="deleteLink"){
           this.deleteLink()
         }else{
-          contextEvent(this.graph, key);
+          contextEvent(this.graph, key,this.mindmapDataUse,this.mindmapAssistData);
         }
         this.hideContextMenu();
       },
@@ -1150,13 +1161,13 @@ const { line} = configOpt;
       },
       addLinkDialogOpen(){
         const select_cell = this.graph.getSelectedCells()[0]
-        console.log(select_cell);
+        // console.log(select_cell);
         if(select_cell){
           this.checkedLinkList = select_cell.data ? select_cell.data.linkData ||[]:[]
         }else{
           this.checkedLinkList=[]
         }
-        console.log(this.checkedLinkList);
+        // console.log(this.checkedLinkList);
         this.addLinkSearchParams.linkType=1
         this.changeLinkType()
         this.addLinkShow=true
@@ -1169,7 +1180,7 @@ const { line} = configOpt;
         }
       },
       saveLink(){
-        console.log("保存链接",select_cell);
+        // console.log("保存链接",select_cell);
         const select_cell = this.graph.getSelectedCells()[0]
         if(select_cell.data){
           select_cell.data.linkData = this.checkedLinkList
@@ -1189,7 +1200,7 @@ const { line} = configOpt;
         // })
         // console.log(source,'sourcesource');
         // select_cell.addChild(source)
-        console.log(select_cell);
+        // console.log(select_cell);
         this.$message.success("链接保存成功")
         this.addLinkShow=false
       },
@@ -1213,8 +1224,8 @@ const { line} = configOpt;
           img.onload = ()=>{
             canvas.width = img.width;
             canvas.height = img.height;
-            console.log('width',img.width)
-            console.log('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);
@@ -1249,6 +1260,21 @@ const { line} = configOpt;
             //设置viewBox使图像居中
             svg.setAttribute('viewBox',`${x-25} ${y-25} ${width+50} ${height+50}`)
             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--
+            }
+            // console.log(leftImg,rightImg,'rightImg');
+
             let textNode = document.createElement('text')
             textNode.setAttribute('x',x-tx+width-90)
             textNode.setAttribute('y',y-ty+height+22)
@@ -1345,6 +1371,19 @@ const { line} = configOpt;
             svg.setAttribute('viewBox',`${x-25} ${y-25} ${width+50} ${height+50}`)
             // 在图表右下方 加上"来源：弘则研究"字样
             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)
@@ -1444,7 +1483,7 @@ const { line} = configOpt;
         let refXValue;
         let currentAttr= this.selectCells[0].getAttrs()
         if(attr.indexOf('fontWeight')!=-1){
-          styleValue = currentAttr.text.fontWeight == "normal"?'bold':'normal'
+          styleValue = currentAttr.text.fontWeight == "bold"?'normal':'bold'
         }else if(attr.indexOf('fontStyle')!=-1){
           styleValue = currentAttr.text.fontStyle == "italic"?'normal':'italic'
         }else if(attr.indexOf('textDecoration')!=-1){
@@ -1459,13 +1498,13 @@ const { line} = configOpt;
             refXValue='100%'
           }
         }
-        console.log(this.selectCells[0].attr(attr),styleValue,'styleValue');
+        // console.log(this.selectCells[0].attr(attr),styleValue,'styleValue');
 
         if(this.selectCells[0].shape.indexOf('edge')!=-1){
           // 边的情况
           attrReal=attrReal.replace('body','line')
         }
-        console.log(attrReal,'attrReal');
+        // console.log(attrReal,'attrReal');
         if(this.selectCells[0].attr(attrReal) === styleValue){
           return 
         }
@@ -1636,7 +1675,7 @@ const { line} = configOpt;
         }
 		  },200),
       async getChartDetail(ChartInfoId) {
-        console.log(ChartInfoId);
+        // console.log(ChartInfoId);
         const res = await dataBaseInterface.getChartInfoById({ChartInfoId})
         if (res.Ret !== 200) return;
         this.chartInfo = res.Data.ChartInfo || {}
@@ -1660,7 +1699,7 @@ const { line} = configOpt;
       linkClick(item){
         if(this.activeItemRId == item.RId) return
         this.activeItemRId = item.RId
-        console.log(item);
+        // console.log(item);
         if(item.Type==3){
           this.$message.info('研报类型的暂无回显')
         }else if(item.Type==1){
@@ -1674,7 +1713,7 @@ const { line} = configOpt;
         }
 
 
-        console.log('回显');
+        // console.log('回显');
       },
       linkDelete(item,index){
         if(this.activeItemRId == item.RId){
@@ -1768,7 +1807,7 @@ const { line} = configOpt;
         unselectIds.map(item =>{
           let rId = this.addLinkSearchParams.linkType+'-'+item
           let index = this.checkedLinkList.findIndex(link => rId==link.RId)
-          console.log(index);
+          // console.log(index);
           if(index!=-1){
             this.checkedLinkList.splice(index,1)
           }
@@ -1793,7 +1832,7 @@ const { line} = configOpt;
         this.popoverVisible=false
       },
       navigateTo(item){
-        console.log(item,'item');
+        // console.log(item,'item');
         if(item.Type == 1){
           if(item.databaseType==0){
             // 普通指标
@@ -1818,7 +1857,7 @@ const { line} = configOpt;
         this.popoverVisible=false
         let clinetPositon=this.graph.localToClient(args.current)
         let size=args.node.size()
-        console.log(this.popoverTriggerDom,'domdomdom');
+        // console.log(this.popoverTriggerDom,'domdomdom');
         this.popoverTriggerDom.style.left = clinetPositon.x+size.width/2 + 'px';
         this.popoverTriggerDom.style.top = clinetPositon.y + 'px';
         this.$nextTick(()=>{
@@ -1829,7 +1868,7 @@ const { line} = configOpt;
         let shouldOperations=[]
         this.mindmapDataUse.map((item,index)=>{
           let levelIds = mindmapNodes.filter(mindMap => mindMap.data.id.startsWith(item.mindmapData.id)).map(mindMap => mindMap.data.id)
-          console.log(levelIds,'levelIds');
+          // console.log(levelIds,'levelIds');
           if(!(levelIds && levelIds.length>0)) return 
           // console.log(levelIds,'levelIds');
           let mindMapIds=[...levelIds]
@@ -1837,20 +1876,20 @@ const { line} = configOpt;
             const element = levelIds[i]
             mindMapIds=mindMapIds.filter( id => id.indexOf(element) !=0 || id==element)
           }
-          console.log(mindMapIds,'mindMapIds');
+          // console.log(mindMapIds,'mindMapIds');
           shouldOperations.push(mindMapIds)
         })
-        // 重做删除时 恢复数据指针回退
-        // if(
-        //   this.mindmapAssistData.mindmapDataRecoverPtr==(this.mindmapAssistData.mindmapDataRecoverUse.length-1)){
-        //   // this.mindmapAssistData.mindmapDataRecoverPtr--
-        this.mindmapAssistData.mindmapDataRecoverUse.push(JSON.stringify(this.mindmapDataUse))
-        // }
-        this.mindmapAssistData.mindmapDataRecoverPtr++
-        console.log(this.mindmapAssistData.mindmapDataRecoverUse[this.mindmapAssistData.mindmapDataRecoverPtr],
-        this.mindmapDataUse,this.mindmapAssistData.mindmapDataRecoverPtr,this.mindmapAssistData.mindmapDataRecoverUse.length,
-        'this.mindmapAssistData.mindmapDataRecoverPtr');
-        console.log(shouldOperations,'shouldOperations');
+        // 重做删除时 恢复数据指针前进
+        console.log(this.canRedo,'this.canRedo');
+        if(!this.canRedo){
+          console.log('canredo no');
+          this.mindmapAssistData.mindmapDataRecoverUse=[JSON.stringify(this.mindmapDataUse)]
+        }else{
+          console.log('canredo');
+          this.mindmapAssistData.mindmapDataRecoverUse.push(JSON.stringify(this.mindmapDataUse))
+        }
+
+        console.log(this.mindmapAssistData.mindmapDataRecoverUse,this.mindmapDataUse,this.mindmapAssistData.mindmapDataRecoverUse.length);
         shouldOperations.map(it =>{
           it.map(it1 =>{
             this.deleteMindmapData(it1,this.mindmapDataUse)
@@ -1859,15 +1898,14 @@ const { line} = configOpt;
       },
       mindmapRecoverAdd(){
         // 重做添加时 恢复数据指针前进
-        this.mindmapDataUse=JSON.parse(this.mindmapAssistData.mindmapDataRecoverUse[this.mindmapAssistData.mindmapDataRecoverPtr]) 
-        this.mindmapAssistData.mindmapDataRecoverUse.pop()
-        this.mindmapAssistData.mindmapDataRecoverPtr--
-        console.log(this.mindmapAssistData.mindmapDataRecoverUse[this.mindmapAssistData.mindmapDataRecoverPtr],
-        this.mindmapDataUse,this.mindmapAssistData.mindmapDataRecoverPtr,this.mindmapAssistData.mindmapDataRecoverUse.length,
-        'this.mindmapAssistData.mindmapDataRecoverPtr');
+        console.log(this.mindmapAssistData.mindmapDataRecoverUse.length,this.mindmapAssistData.mindmapDataRecoverUse);
+        let recoverData = this.mindmapAssistData.mindmapDataRecoverUse.pop()
+        console.log(JSON.parse(recoverData) ,this.mindmapAssistData.mindmapDataRecoverUse.length,this.mindmapAssistData.mindmapDataRecoverUse,'回复的数据');
+        if(recoverData) this.mindmapDataUse=JSON.parse(recoverData) 
+        console.log(this.mindmapDataUse,'回复后');
       },
       deleteMindmapData(id,data){
-        console.log(id,data,'id,data');
+        // console.log(id,data,'id,data');
         // return 
         let ids = id.split('-')
         let mindmapDataIndex = data.findIndex(mindmap => mindmap.mindmapData.id == ids[0])
@@ -1884,11 +1922,15 @@ const { line} = configOpt;
           mindmapData=mindmapData.children.find(it => it.id==findId)
         }
         let endId = ids[ids.length-1]
-        console.log(mindmapData.children,'mindmapData.children');
+        // console.log(mindmapData.children,'mindmapData.children');
         let endIndex = mindmapData.children.findIndex(it => it.id == findId+'-'+endId)
         mindmapData.children.splice(endIndex,1)
         // console.log(data);
-      }
+      },
+      /* 向左收起 展开 */
+      slideHandle() {
+        this.isSlideLeft = !this.isSlideLeft;
+      },
     },
   }
 </script>
@@ -1909,6 +1951,7 @@ const { line} = configOpt;
       box-sizing: border-box;
       margin-right: 20px;
       padding-bottom: 20px;
+      position: relative;
       .sand-elements-tab{
         padding: 0 30px;
         overflow: auto;
@@ -2040,12 +2083,16 @@ const { line} = configOpt;
             cursor: pointer;
             .dropdown-box{
               position: relative;
+              img{
+                height: 16px;
+                width: 16px;
+              }
               .dropdown-content{
                 display: flex;
                 align-items: center;
 
                 .dropdown-content-text{
-                  width: 28px;
+                  width: 30px;
                   white-space: nowrap;
                   overflow: hidden;
                   margin-right: 5px;
@@ -2085,35 +2132,6 @@ const { line} = configOpt;
             cursor:not-allowed;
           }
         }
-        .sand-mainBody-chart{
-          height: calc(100% - 50px);
-          // flex: 1;
-          position: relative;
-          display: flex;
-          .contextMenu-wrapper {
-            position: fixed;
-            z-index: 99;
-            top: -9999px;
-            left: -9999px;
-            background: #fff;
-            padding: 10px 0;
-            /* border: 1px solid #999; */
-            box-shadow: 0 1px 4px #999;
-          }
-          #link-reference{
-            position: fixed;
-            z-index: -1;
-            top: -99999px;
-            left: -99999px;
-            background-color: transparent;
-          }
-          .minimap{
-            position:absolute;
-            right:6px;
-            bottom:6px;
-            box-sizing: border-box;
-          }
-        }
       }
     }
     .add-link-box{
@@ -2268,11 +2286,32 @@ const { line} = configOpt;
       cursor: pointer;
     }
   }
+
+  .slide-icon {
+    padding: 20px 0;
+    /* display: block; */
+    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3);
+    border-radius: 5px;
+    cursor: pointer;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 99;
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.05);
+    }
+    &.slide-left {
+      right: 0;
+    }
+    &.slide-right {
+      left: 0;
+    }
+  }
   @media screen and (max-width:1680px) {
     #sand-edit-container{
       .sand-toolbar{
-        min-width: 330px;
-        width: 330px;
+        min-width: 320px;
+        width: 320px;
       }
     }
   }
@@ -2290,8 +2329,26 @@ const { line} = configOpt;
     }
   }
   .sand-mainBody-chart{
-    #sand-chart-container{
-      flex: 1;
+    height: calc(100% - 50px);
+    flex: 1;
+    position: relative;
+    display: flex;
+    .contextMenu-wrapper {
+      position: fixed;
+      z-index: 99;
+      top: -9999px;
+      left: -9999px;
+      background: #fff;
+      padding: 10px 0;
+      /* border: 1px solid #999; */
+      box-shadow: 0 1px 4px #999;
+    }
+    #link-reference{
+      position: fixed;
+      z-index: -1;
+      top: -99999px;
+      left: -99999px;
+      background-color: transparent;
     }
     .x6-graph-scroller {
       flex: 1;
@@ -2307,25 +2364,36 @@ const { line} = configOpt;
         border-radius: 0;
       }
     }
-    .x6-widget-minimap-viewport{
-      border-color: red;
-      .x6-widget-minimap-viewport-zoom{
+    .minimap{
+      position:absolute;
+      right:6px;
+      bottom:6px;
+      box-sizing: border-box;
+      .x6-widget-minimap-viewport{
         border-color: red;
+        .x6-widget-minimap-viewport-zoom{
+          border-color: red;
+        }
+      }
+      .x6-widget-minimap{
+        // min-width:300px;
+        // min-height:200px;
+        width: auto !important;
+        height: auto !important;
       }
-    }
-    .x6-widget-minimap{
-      width: auto !important;
-      height: auto !important;
     }
   }
   .left-topic-image,.right-topic-image {
     visibility: hidden;
+    width: 0;
     cursor: pointer;
   }
   .x6-node:hover .left-topic-image {
+    width: unset;
     visibility: visible;
   }
   .x6-node:hover .right-topic-image {
+    width: unset;
     visibility: visible;
   }
   .x6-node-selected rect {

src/vuex/modules/sand.js

@@ -2,7 +2,7 @@
 import { configOpt,styleSettings } from '@/views/sandbox_manage/common/toolConfig';
 
 const setSandboxToolStatus=(state,payload)=>{
-	console.log(payload,'payload');
+	console.log(payload,'payload',state);
 	if(!(payload&&payload.length>0)){
 		state.toolStatus.textDisabled=true
 		state.toolStatus.edgeDisabled=true
@@ -47,7 +47,7 @@ const setSandboxToolStatus=(state,payload)=>{
 				colorSet.add(attrs.text.fill)
 				lineHeightSet.add(Math.round((attrs.text.lineHeight/attrs.text.fontSize)*10)/10)
 				textAlignSet.add(attrs.text.textAnchor)
-				if(element.data && element.data.key!='text'){
+				if(!(element.data) || element.data.key!='text'){
 					// console.log('不是text');
 					backgroundColorSet.add(attrs.body.fill)
 					lineColorSet.add(attrs.body.stroke)