暂存

src/api/modules/sandApi.js

@@ -120,6 +120,29 @@ export default {
 	 */
 	sandDelVersion: params => {
 		return http.post('/sandbox/version/delete',params)
-	}
-
+	},
+	// 以下是新版本逻辑图的接口
+	// 获取沙盘图分类
+	getSandboxClassify: params => {
+		return http.get('/sandbox/classify/list',params)
+	},
+	//新增沙盘图分类
+	addSandboxClassify: params => {
+		return http.post('/sandbox/classify/add',params)
+	},
+	// 编辑沙盘图分类
+	editSandboxClassify: params => {
+		return http.post('/sandbox/classify/edit',params)
+	},
+	// 删除沙盘图分类检查
+	deleteSandboxClassifyCheck: params => {
+		return http.post('/sandbox/classify/delete/check',params)
+	},
+	// 删除沙盘图/沙盘图分类
+	deleteSandbox: params => {
+		return http.post('/sandbox/classify/delete',params)
+	},
+	getSandboxListV2: params => {
+		return http.get('/sandbox/listV2',params)
+	},
 }

src/views/sandbox_manage/common/events.js

@@ -3,13 +3,14 @@ import { configOpt } from './toolConfig';
 
 const { line} = configOpt;
 /* 节点操作监听事件 */
-export const myEvents = (graph) => {
+export const myEvents = (graph,mindmapData) => {
 
 		/* 节点双击编辑 */
 		graph.on('node:dblclick', ({ node, e }) => {
 			// 节点当前设置的样式同步到编辑区
-			const { text, rect} = node.attrs;
 
+			const { text, rect} = node.attrs;
+			console.log(node,'nodenode');
 			const edit_area = document.createElement('div');
 			edit_area.contentEditable = "true";
 			edit_area.id = "editable-wrapper";
@@ -21,16 +22,22 @@ export const myEvents = (graph) => {
 
 			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;
+      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 || ' ';
+				node.attr('text/textWrap/text', '');
+			// }
 
-			edit_area.innerText = text.text || text.textWrap.text || ' ';
-			node.attr('text/textWrap/text', '');
 
 			edit_area.style.left = `${pos.x}px`;
 			edit_area.style.top = `${pos.y}px`;
@@ -64,13 +71,46 @@ export const myEvents = (graph) => {
 			//失焦后设置内容
 			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);
-				console.log(node);
-				const domH = (edit_area.getBoundingClientRect().height) /zoom;
-				// node.size(width,domH > 50 ? domH : 50);
-				node.size(width,domH);
-				
+
+				if(node.shape.indexOf('mindmap')!==-1){
+					// node.attr('text/text', newval);
+					let changeData=[mindmapData]
+					console.log(mindmapData,'mindmapData',node.zIndex,'node.zIndex',node);
+
+					// 转化成需要修改的索引队列
+					let indexSequence = node.id.split('-').map(idn => +idn-1)
+					console.log(indexSequence,'indexSequence');
+					let selectMindmap = {}
+					for (let i = 0; i < indexSequence.length; i++) {
+						let element = indexSequence[i]
+						if(i==0){
+							selectMindmap = changeData[element]
+						}else{
+							selectMindmap= selectMindmap.children[element]
+						}
+					}
+					console.log(selectMindmap);
+					selectMindmap.label = newval
+				}
+				// else{
+				// 	node.attr('text/textWrap/text', newval);
+				// 	node.attr('text/text', 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 > 50 ? domH : 50);
+					node.fit({deep:true})
+				}
+
 				$('#sand-chart-container')[0].removeChild(edit_area);
 			}
 
@@ -242,6 +282,19 @@ export const bindKey = (graph) => {
 		}
 		return false
 	});
+
+	graph.bindKey('ctrl+z', () => {
+		if(graph.canUndo()){
+			graph.undo()
+		}
+		return false
+	});
+	graph.bindKey('ctrl+y', () => {
+		if(graph.canRedo()){
+			graph.redo()
+		}
+		return false
+	});
 }
 
 /* 右键事件 */

src/views/sandbox_manage/common/gragh.js

@@ -4,11 +4,13 @@ import { configOpt } from './toolConfig';
 
 const { line } = configOpt;
 
-export function myGraph (wrapper) {
+export function myGraph (wrapper,mindmapData) {
+	console.log(wrapper,'wrapperwrapper');
 	const graph = new Graph({
 		container: document.getElementById(wrapper),
 		// width: $(window).width(),
 		// height: $(window).height(),
+		history:true,
 		autoResize: true, 
 		background: {
 			color: '#fff',
@@ -118,7 +120,7 @@ export function myGraph (wrapper) {
 	})
 
 	/* 节点操作事件 */
-	myEvents(graph);
+	myEvents(graph,mindmapData);
 
 	/* 键盘事件 */
 	bindKey(graph);

src/views/sandbox_manage/common/mindmap.js

@@ -12,7 +12,7 @@ export default {
   created() {
     // 中心主题
     Graph.registerNode(
-      'topic',          
+      'mindmap-topic',          
       {
         inherit: 'rect',
         markup: [
@@ -36,6 +36,8 @@ export default {
             stroke: '#5F95FF',
             fill: '#EFF4FF',
             strokeWidth: 1,
+            width:100,
+            height:50
           },
           img: {
             ref: 'body',
@@ -52,7 +54,10 @@ export default {
           label: {
             fontSize: 14,
             fill: '#262626',
-          },
+            textWrap:{
+              width:-10
+            }
+          }
         },
       },
       true,
@@ -60,7 +65,7 @@ export default {
 
     // 分支主题
     Graph.registerNode(
-      'topic-child',
+      'mindmap-topic-child',
       {
         inherit: 'rect',
         markup: [
@@ -102,13 +107,13 @@ export default {
     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 ctrX = (targetPoint.x - midX) / 5 + midX
         const ctrY = targetPoint.y
         const pathData = `
         M ${sourcePoint.x} ${sourcePoint.y}
-        L ${midX} ${midY}
         Q ${ctrX} ${ctrY} ${targetPoint.x} ${targetPoint.y}
         `
         return options.raw ? Path.parse(pathData) : pathData
@@ -142,19 +147,40 @@ export default {
         console.log(this.mindMapData,'this.mindMapData');
         const { id } = node
         const type = node.prop('type')
+        console.log(type,'typetypetype');
         if (this.addChildNode(id, type)) {
           this.mindMapRender(this.mindmapPosition)      
         }
       })
     
+      this.graph.on('node:change:size', (args) => { 
+        if(args.node.shape.indexOf('mindmap')!==-1){
+          console.log(args.node);
+          console.log(args.node.size());
+					let changeData=[this.mindMapData]
+
+          let indexSequence = args.node.id.split('-').map(idn => +idn-1)
+					console.log(indexSequence,'indexSequence');
+					let selectMindmap = {}
+					for (let i = 0; i < indexSequence.length; i++) {
+						let element = indexSequence[i]
+						if(i==0){
+							selectMindmap = changeData[element]
+						}else{
+							selectMindmap= selectMindmap.children[element]
+						}
+					}
+					console.log(selectMindmap);
+					selectMindmap.width = args.node.size().width
+					selectMindmap.height = args.node.size().height
+        }
+      })
       this.graph.on('node:change:position', (args) => { 
         if(args.node.id==='1'){
           this.mindmapPosition = args.current
         }
       })
-      this.graph.on('cell:change:label:', (args) => { 
-        console.log(args);
-      })
+
       // this.graph.bindKey(['backspace', 'delete'], () => {
       //   const selectedNodes = this.graph.getSelectedCells().filter((item) => item.isNode())
       //   if (selectedNodes.length) {
@@ -170,7 +196,6 @@ export default {
         const selectedNodes = this.graph.getSelectedCells().filter((item) => item.isNode())
         if (selectedNodes.length) {
           const node = selectedNodes[0]
-          const type = node.prop('type')
           if (this.addChildNode(node.id, type)) {
             // this.mindMapRender()
           }
@@ -209,7 +234,7 @@ export default {
           cells.push(
             this.graph.createNode({
               id: data.id,
-              shape: data.type === 'topic-child' ? 'topic-child' : 'topic',
+              shape: data.type === 'mindmap-topic-child' ? 'mindmap-topic-child' : 'mindmap-topic',
               x: xGap+hierarchyItem.x,
               y: yGap+hierarchyItem.y,
               width: data.width,
@@ -227,7 +252,7 @@ export default {
                   source: {
                     cell: hierarchyItem.id,
                     anchor:
-                      data.type === 'topic-child'
+                      data.type === 'mindmap-topic-child'
                         ? {
                             name: 'right',
                             args: {
@@ -236,9 +261,9 @@ export default {
                           }
                         : {
                             name: 'center',
-                            args: {
-                              dx: '25%',
-                            },
+                            // args: {
+                            //   dx: '25%',
+                            // },
                           },
                   },
                   target: {
@@ -284,7 +309,6 @@ export default {
     },
     addChildNode (id, type){
       const res = this.findItem(this.mindMapData, id)
-    
       const dataItem = res && res.node
       if (dataItem) {
         let item = null
@@ -300,7 +324,7 @@ export default {
         } else if (type === 'topic-branch') {
           item = {
             id: `${id}-${length + 1}`,
-            type: 'topic-child',
+            type: 'topic',
             label: `子主题${length + 1}`,
             width: 60,
             height: 30,

src/views/sandbox_manage/common/options.js

@@ -11,4 +11,9 @@ export const contextMenuOption = [
 		key: 'del',
 		icon: 'el-icon-delete'
 	},
+	{
+		label: '添加链接',
+		key: 'addLink',
+		icon: 'el-icon-delete'
+	},
 ]

src/views/sandbox_manage/common/toolConfig.js

@@ -22,6 +22,22 @@ export let configOpt = {
 /* 定义默认颜色 */
 export const colorsOptions = ['#333','#5B9BD5','#f00','#fff','#00f','#000','#00FFFF','#70DB93','#9F5F9F','#A67D3D','#5F9F9F']
 
+export const familyOptions = [
+	{name:'微软雅黑',value:'微软雅黑'},
+	{name:'宋体',value:'宋体'},
+	{name:'黑体',value:'黑体'}
+]
+export const fontSizeOptions = [
+	{name:'12px',value:12},
+	{name:'14px',value:14},
+	{name:'16px',value:16}
+]
+export const lineHeightOptions = [
+	{name:'1',value:1},
+	{name:'1.15',value:1.15},
+	{name:'1.5',value:1.5},
+	{name:'2',value:2}
+]
 export const sizeOptions = [
 	30,
 	28,

src/views/sandbox_manage/index_new_version.vue

@@ -3,7 +3,7 @@
     <div class="sandbox-content-tree-box">
       <div class="sandbox-content-tree-header">
         <el-button type="primary" style="width: 170px;" @click="addSand">添加逻辑</el-button>
-        <el-checkbox v-model="isOnlyMe" @change="onlyMeHandler">只看我的</el-checkbox>
+        <el-checkbox v-model="searchParams.IsShowMe" @change="onlyMeHandler">只看我的</el-checkbox>
       </div>
       <div class="sandbox-content-tree-body">
         <div style="padding: 0 20px;">
@@ -21,7 +21,8 @@
           </el-select>
         </div>
         <div class="sandbox-content-tree">
-          <tree :nodes="treeData" :setting="setting" @onCreated="getZTree" @onDrop="zTreeDrop" key="classify" />
+          <tree :nodes="treeData" :setting="setting" @onCreated="getZTree" @onDrop="zTreeDrop" key="classify" 
+          @onExpand="zTreeExpand"/>
           <div class="add-classify">
             <img src="~@/assets/img/sand_new/add_ico.png"/>
             <span @click="addLevelOneHandle">添加分类</span>
@@ -29,20 +30,20 @@
         </div>
       </div>
     </div>
-    <div class="sandbox-pictures-box" style="display: none;">
+    <div class="sandbox-pictures-box" v-show="rightType=='list'">
       <div class="pictures-count">
-        共200个逻辑图
+        共{{total}}个逻辑图
       </div>
       <div class="pictures-box" ref="pictureListRef" @scroll="loadMorePublicChart">
         <el-col :span="6" style="margin-bottom:20px;padding-right: 20px;"
-        v-for="picture in pictureList" :key="picture.Id">
+        v-for="picture in pictureList" :key="picture.SandboxId">
           <div class="pictures-item">
             <div class="pictures-item-header">
-              <span class="text_oneLine">{{ picture.title }}</span>
+              <span class="text_oneLine">{{ picture.Name }}</span>
             </div>
-            <img :src="picture.url" class="picture-img" @click="detailShowHandle(picture)"/>
+            <img :src="picture.PicUrl" class="picture-img" @click="detailShowHandle(picture)"/>
             <div class="item-bottom">
-              <span>{{ picture.time.slice(0,10) }}</span>
+              <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)">删除</span>
@@ -52,10 +53,10 @@
         </el-col>
       </div>
     </div>
-    <div class="sandbox-chart-box">
+    <div class="sandbox-chart-box" v-show="rightType!='list'">
       <div class="sandbox-chart-head">
-        <div class="sandbox-chartHead-author">作者：<span>陈鸿宇</span></div>
-        <div class="sandbox-chartHead-title">逻辑图名称</div>
+        <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="addSand">
             <img src="~@/assets/img/sand_new/edit_outline.png" />
@@ -69,12 +70,17 @@
             <img src="~@/assets/img/sand_new/copy.png" />
             <span>复制</span> 
           </div>
-          <div class="chartHead-options-button" @click="deleteHandle">
+          <div class="chartHead-options-button" @click="deleteHandle(viewSandbox)">
             <img src="~@/assets/img/sand_new/remove.png" />
             <span style="color: red;">删除</span> 
           </div>
         </div>
       </div>
+      <div class="sandbox-body">
+        <div class="sand-chart-body" id="sand-chart-body"></div>
+        <!-- 缩略图 -->
+        <div id="minimap" class="minimap"></div>
+      </div>
     </div>
     <!-- 目录自定义按钮区域 -->
     <div id="custom-button-zone" class="custom-button-zone">
@@ -96,14 +102,14 @@
           <el-form-item label="上级目录" v-if="lastLevelClassifyName">
             {{ lastLevelClassifyName }}
           </el-form-item>
-          <el-form-item label="目录名称" prop="classifyName">
-            <el-input v-model="classifyForm.classifyName" style="width: 317px;" placeholder="请输入目录名称"></el-input>
+          <el-form-item label="目录名称" prop="SandboxClassifyName">
+            <el-input v-model="classifyForm.SandboxClassifyName" style="width: 317px;" placeholder="请输入目录名称"></el-input>
           </el-form-item>
-          <el-form-item label="关联品种" prop="varietyId">
+          <el-form-item label="关联品种" prop="ChartPermissionId" v-if="hasVariety && (classifyAddTitle.indexOf('添加')!==-1)">
             <el-cascader 
 							:options="classifyArr"
 							:props="classifyProps"
-							v-model="classifyForm.varietyId" 
+							v-model="classifyForm.ChartPermissionId" 
 							placeholder="请选择对应品种" 
               id="classifyAddCascader"
 						/>
@@ -137,7 +143,6 @@
               trigger="click"
               v-model="selectClassifyShow">
                 <tree :nodes="treeData" :setting="selectSetting" key="saveOther" @onCreated="getSelectZTree" @onClick="selectClassify" />
-              <!-- <el-button slot="reference">click 激活</el-button> -->
                 <el-cascader 
                 slot="reference"
                 :options="treeData"
@@ -162,65 +167,60 @@
 
 <script>
 import tree from "vue-giant-tree";
-import { dataBaseInterface } from '@/api/api.js';
+import { dataBaseInterface,sandInterface,customInterence} from '@/api/api.js';
+
+import { myGraph } from './common/gragh';
 
   export default {
     name:"sandbox_manage_index",
     components:{tree},
+    computed:{
+      hasVariety(){
+        return true
+      }
+    },
+    watch: {
+      // initData(newval) {
+      //   this.graph.fromJSON(newval);
+      //   console.log(this.graph.fromJSON(newval));
+      // },
+      rightType(newval) {
+        if(newval!='list'){
+          this.$nextTick(()=>{
+            this.init()
+          })
+        }
+      },
+	  },
     data() {
       return {
-        isOnlyMe:false,
+        SandboxClassifyId:0,
         // 逻辑图搜索名称
         search_txt:"",
         searchOptions:[],
+        rightType:"list",
         pictureHaveMore:false,
-        pictureList:[{Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
-        {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
-        {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
-        {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
-        {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
-        {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
-        {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
-        {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
-        {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
-        {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
-        {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
-        {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
-        {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
-        {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
-        {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
-        {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
-        {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
-        {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
-        {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
-        {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
-        {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
-        {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
-        {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
-        {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
-        {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
-        {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
-        {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
-        {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
-        {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
-        {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
-        {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
-        {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
-        {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
-        {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
-        {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
-        {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"}],
+        searchParams:{
+          Keyword:'',
+          SandboxClassifyId:'',
+          PageSize:12,
+          CurrentIndex:1,
+          IsShowMe:false
+        },
+        total:0,
+        pictureList:[],
         treeData:[],
         setting:{
           data:{
             key:{
-              name:"ChartClassifyName",
-              children:"Children"
+              name:"SandboxClassifyName",
+              children:"Children",
+              isParent:"isCatalogue"
             },
-            simpleData:{
-              idKey:"ChartClassifyId",
-              pIdKey:"ParentId"
-            }
+            // simpleData:{
+            //   idKey:"SandboxClassifyId",
+            //   pIdKey:"ParentId"
+            // }
           },
           view:{
             showLine:false,
@@ -235,19 +235,17 @@ import { dataBaseInterface } from '@/api/api.js';
             showRenameBtn:false
           },
           callback:{
-            beforeDrop:this.zTreeDropBefore
+            beforeDrop:this.zTreeDropBefore,
+            beforeExpand:this.zTreeExpandBefore,
+            onClick:this.zTreeClick
           }
         },
         zTreeObj:{},
         selectSetting:{
           data:{
             key:{
-              name:"ChartClassifyName",
+              name:"SandboxClassifyName",
               children:"Children"
-            },
-            simpleData:{
-              idKey:"ChartClassifyId",
-              pIdKey:"ParentId"
             }
           },
           view:{
@@ -259,24 +257,31 @@ import { dataBaseInterface } from '@/api/api.js';
         selectClassifyShow:false,
         selectZTreeObj:{},
         copyImgLoding:null,
+        viewSandbox:{},
+        graph:null,
+        initData:{},
         // ------- 添加分类弹窗
         classifyAddTitle:"添加分类",
         classifyAddShow:false,
         lastLevelClassifyName:'',
         classifyForm:{
-          classifyName:'',
-          varietyId:null
+          SandboxClassifyId:0,
+          SandboxClassifyName:'',
+          ChartPermissionId:null,
+          ParentId:0,
+          Level:0
         },
         classifyFormRules:{
-          classifyName:{required: true, message:'请输入目录名称', trigger: 'blur'},
-          varietyId:{required: true, message:'请选择对应品种', trigger: 'change'}
+          SandboxClassifyName:{required: true, message:'请输入目录名称', trigger: 'blur'},
+          ChartPermissionId:{required: true, message:'请选择对应品种', trigger: 'change'}
         },
         classifyProps: {
           children: 'Items',
           label: 'ClassifyName',
-          value: 'ChartPermissionId'
+          value: 'ChartPermissionId',
+          emitPath:false
 			  },
-        classifyArr:[{ChartPermissionId:1,ClassifyName:'品种11',Items:[{ChartPermissionId:11,ClassifyName:'品种112',Items:null}]}],
+        classifyArr:[],
         // 另存为弹窗
         saveOtherShow:false,
         saveOtherForm:{
@@ -286,13 +291,75 @@ import { dataBaseInterface } from '@/api/api.js';
       }
     },
     created(){
-      dataBaseInterface.chartClassify({IsShowMe:false}).then((res) => {
-        if (res.Ret === 200) {
-          this.treeData = res.Data.AllNodes || []
-        }
-      });
+      this.getClassify()
+      this.getSandboxClassify()
+      this.getSandboxList()
+      // this.setting.async={
+      //   enable:true,
+      //   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=ChartClassifyId"],
+      //   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()
     },
     methods:{
+      /* 获取品种 */
+      getClassify() {
+        customInterence.getvariety({
+          CompanyType: 'ficc'
+        }).then(res => {
+          console.log(res);
+          if(res.Ret !== 200)  return
+            this.classifyArr = res.Data.List||[ ]
+        })
+      },
+      // 获取沙盘图分类
+      getSandboxClassify(parentNode) {
+        const sandboxClassifyId = parentNode ? parentNode.SandboxClassifyId:0
+        sandInterface.getSandboxClassify({ChartClassifyId: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){
+              this.zTreeObj.addNodes(parentNode,nodesData)
+            }else{
+              this.treeData = nodesData
+            }
+          }
+        })
+      },
+      getSandboxList(){
+        sandInterface.getSandboxListV2(this.searchParams).then(res=>{
+          console.log(res,'res');
+          if(res.Ret == 200){
+            this.pictureList=res.Data.List || []
+            this.total = res.Data.Paging.Totals || 0
+          }
+        })
+      },
       getZTree(zTree){
         this.zTreeObj=zTree
       },
@@ -306,8 +373,28 @@ import { dataBaseInterface } from '@/api/api.js';
       zTreeDrop(treeId,treeNodes,targetNode,moveType,isCopy){
         console.log(treeId,treeNodes,targetNode,moveType,isCopy,'treeId,treeNodes,targetNode,moveType,isCop');
       },
+      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){
+          this.searchParams.CurrentIndex=1
+          this.searchParams.SandboxClassifyId = treeNode.SandboxClassifyId
+          this.rightType='list'
+          this.getSandboxList()
+        }
+      },
       onlyMeHandler(){
-        console.log("只看我的");
+        this.getSandboxClassify()
       },
       searchHandle(query) {
         console.log(query,"搜索");
@@ -338,51 +425,130 @@ import { dataBaseInterface } from '@/api/api.js';
         this.classifyAddTitle="添加分类"
         this.classifyAddShow=true
       },
-      addClassify(node){
+      addClassify(e,node){
+        e.stopPropagation()
         console.log(node);
-        this.lastLevelClassifyName = node.ChartClassifyName
+        this.lastLevelClassifyName = node.SandboxClassifyName
         this.classifyAddTitle="添加分类"
         this.classifyAddShow=true
       },
-      editClassify(node){
+      editClassify(e,node){
         console.log(node);
+        e.stopPropagation()
         let pNode = node.getParentNode()
-        this.lastLevelClassifyName = pNode ? pNode.ChartClassifyName:''
-        this.classifyForm.Id = node.ChartClassifyId
-        this.classifyForm.classifyName = node.ChartClassifyName
-        this.classifyAddTitle="编辑分类"
+        this.lastLevelClassifyName = pNode ? pNode.SandboxClassifyName:''
+        this.classifyForm.SandboxClassifyId = node.SandboxClassifyId
+        this.classifyForm.SandboxClassifyName = node.SandboxClassifyName
+        this.classifyAddTitle="重命名"
         this.classifyAddShow=true
       },
-      deleteClassify(node){
-        console.log(node.ChartClassifyId);
-        this.$confirm("确定删除该沙盘图目录吗?", "提示", {
-          type: "warning",
-        })
-        .then(() => {
-          //TODO: 删除逻辑图目录接口对接
-          console.log("请求列表");
+      deleteClassify(e,node){
+        e.stopPropagation()
+        sandInterface.deleteSandboxClassifyCheck({SandboxClassifyId:node.SandboxClassifyId}).then(res=>{
+          if (res.Ret === 200) {
+            /**
+             * 0 可删除
+             * 1 关联沙盘图
+             * 2 有子目录无沙盘图
+             */
+            const deleteLabelMap = {
+              1: '该分类下存在沙盘图，不可删除',
+              2: '确认删除当前分类及包含的子分类吗？',
+              4: res.Data.TipsMsg
+            }
+
+            if([1,4].includes(res.Data.DeleteStatus)) this.$confirm(
+                deleteLabelMap[res.Data.DeleteStatus],
+                '删除失败',
+                {
+                confirmButtonText: '知道了',
+                showCancelButton:false,
+                type: 'error'
+              })
+            else if([0,2].includes(res.Data.DeleteStatus)) this.$confirm(
+                res.Data.DeleteStatus === 2 
+                ? deleteLabelMap[res.Data.DeleteStatus]
+                : node.SandboxId?'确认删除该沙盘图吗？':'确定删除当前分类吗?', 
+                '提示',
+                {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+              }).then(() => {
+                res.Data.DeleteStatus === 0 && node.SandboxId 
+                ? this.delHandle(node.SandboxClassifyId, node.SandboxId, 1)
+                : this.delHandle(node.SandboxClassifyId, node.SandboxId);
+              }).catch(() => {         
+              });
+          }
         })
-        .catch(() => {});
+      },
+      delHandle(SandboxClassifyId,SandboxId,type){
+        let currentNode = this.zTreeObj.getSelectedNodes()[0]
+        sandInterface.deleteSandbox({
+          SandboxClassifyId,
+          SandboxId,
+        }).then((res) => {
+          if (res.Ret === 200) {
+            this.zTreeObj.removeNode(currentNode)
+            this.$message.success(res.Msg);
+            // if(type && res.Data.SandboxId){
+              
+            // }else{
+
+            // }
+          }
+        });
       },
       classifyAddSubmit(){
+        console.log(this.classifyForm);
         //提交
         this.$refs.classifyFormRef.validate(valid=>{
           if(valid){
-            // TODO: 提交接口对接
-            if(this.classifyForm.Id){
+            if(this.classifyForm.SandboxClassifyId){
               //编辑
+              let params={
+                SandboxClassifyId:this.classifyForm.SandboxClassifyId,
+                SandboxClassifyName:this.classifyForm.SandboxClassifyName
+              }
+              sandInterface.editSandboxClassify(params).then(res=>{
+                if(res.Ret == 200){
+                  this.classifyAddShow=false
+                  this.$message.success(this.classifyAddTitle+"成功")
+                  let currentNode = this.zTreeObj.getSelectedNodes()[0]
+
+                  currentNode.SandboxClassifyName = this.classifyForm.SandboxClassifyName
+                  this.zTreeObj.updateNode(currentNode)
+                  // this.getSandboxClassify()
+                }
+              })
             }else{
               //新增
+              let params={
+                SandboxClassifyName:this.classifyForm.SandboxClassifyName,
+                ParentId:this.classifyForm.ParentId,
+                Level:this.classifyForm.Level,
+                ChartPermissionId:this.classifyForm.ChartPermissionId
+              }
+              sandInterface.addSandboxClassify(params).then(res=>{
+                if(res.Ret == 200){
+                  this.classifyAddShow=false
+                  this.$message.success(this.classifyAddTitle+"成功")
+                  this.getSandboxClassify()
+                }
+              })
             }
-            this.classifyAddShow=false
-            this.$message.success(this.classifyAddTitle+"成功")
+
           }
         })
       },
       classifyAddClosed(){
         this.classifyForm={
-          classifyName:'',
-          varietyId:null
+          SandboxClassifyId:0,
+          SandboxClassifyName:'',
+          ChartPermissionId:null,
+          ParentId:0,
+          Level:0
         }
         this.lastLevelClassifyName=""
         this.$refs.classifyFormRef.clearValidate()
@@ -404,18 +570,9 @@ import { dataBaseInterface } from '@/api/api.js';
       /* 展示详情 */
       detailShowHandle(item) {
         console.log("详情展示");
-        // this.leftShowLabel = '目录';
-        // this.$nextTick(() => {
-        //   let params = {
-        //     code: item.UniqueCode,
-        //     id: item.ChartInfoId,
-        //     type: item.ChartType,
-        //     chartData:item
-        //   };
-        //   this.selectCurrentNode(params);
-        //   this.default_classify = '';
-        //   this.reloadRightWid();
-        // })
+        this.rightType='chart'
+        this.viewSandbox=item
+        this.initData = JSON.parse(item.Content)
       },
       copyHandle:_.debounce(function ({ PicUrl }){
         console.log("复制");
@@ -430,8 +587,7 @@ import { dataBaseInterface } from '@/api/api.js';
         const ctx = canvas.getContext("2d");
         const img = new Image();
         img.crossOrigin = "Anonymous";
-        // img.src = PicUrl;
-        img.src = "https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800";
+        img.src = PicUrl;
         img.onload = ()=>{
           canvas.width = img.width;
           canvas.height = img.height;
@@ -466,31 +622,41 @@ import { dataBaseInterface } from '@/api/api.js';
         })
         .then(() => {
           //TODO: 删除逻辑图接口对接
-          console.log("请求列表");
-          this.$message.success("删除成功")
+          sandInterface.deleteSandbox({
+          SandboxClassifyId:item.SandboxClassifyId,
+          SandboxId:item.SandboxId,
+          }).then((res) => {
+            if (res.Ret === 200) {
+              this.$message.success(res.Msg);
+              this.searchParams.CurrentIndex=1
+              this.getSandboxList()
+              // if(type && res.Data.SandboxId){
+                
+              // }else{
+
+              // }
+            }
+          });
         })
         .catch(() => {});
       },
       addDiyDom(treeId, treeNode) {
         console.log(treeNode,'treeId, treeNode');
         var aObj = $("#" + treeNode.tId + "_a");
-        if ($("#diyBtn_"+treeNode.ChartClassifyId).length>0) return;
+        if ($("#diyBtn_"+treeNode.SandboxClassifyId).length>0) return;
 
         let dom = $('#custom-button-zone')[0].cloneNode(true)
 
-        $(dom).find('.add-classify-img')[0].addEventListener("click",()=>this.addClassify(treeNode))
-        $(dom).find('.edit-classify-img')[0].addEventListener("click",()=>this.editClassify(treeNode))
-        $(dom).find('.delete-classify-img')[0].addEventListener("click",()=>this.deleteClassify(treeNode))
-        
-        // var editStr = "<span id='diyBtn_space_" +treeNode.ChartClassifyId+ "' > </span>"
-        //   + "<button type='button' class='diyBtn1' id='diyBtn_" + treeNode.ChartClassifyId
-        //   + "' title='"+treeNode.ChartClassifyId+"' onfocus='this.blur();'>"+treeNode.ChartClassifyId+"</button>";
+        $(dom).find('.add-classify-img')[0].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))
+
         aObj.append(dom);
       },
       // removeHoverDom(treeId, treeNode) {
       //   console.log(treeId, treeNode,'treeId, treeNode');
-      //   $("#diyBtn_"+treeNode.ChartClassifyId).unbind().remove();
-	    //   $("#diyBtn_space_" +treeNode.ChartClassifyId).unbind().remove();
+      //   $("#diyBtn_"+treeNode.SandboxClassifyId).unbind().remove();
+	    //   $("#diyBtn_space_" +treeNode.SandboxClassifyId).unbind().remove();
       // }
       addSand(){
         const { href } = this.$router.resolve({ path: '/sandflow' });
@@ -518,7 +684,6 @@ import { dataBaseInterface } from '@/api/api.js';
         this.$refs.saveOtherFormRef.clearValidate()
       },
       copySandHandle: _.debounce(function() {
-        return 
         const { cells } = this.graph.toJSON();
         if(!cells.length) return this.$message.warning('当前画布无可复制内容');
 
@@ -607,9 +772,18 @@ import { dataBaseInterface } from '@/api/api.js';
         })
       },500),
       selectClassify(event,treeId,treeNode,clickFlag){
-        this.saveOtherForm.classifyId = treeNode.ChartClassifyId
+        this.saveOtherForm.SandboxClassifyId = treeNode.SandboxClassifyId
         this.selectClassifyShow = false
-      }
+      },
+      //==============================画布
+      // 初始化画布
+      init() {
+        const graph = new myGraph('sand-chart-body');
+        this.graph = graph;
+        console.log(this.initData);
+        this.graph.fromJSON(this.initData)
+        
+		  },
     }
   }
 </script>
@@ -624,6 +798,7 @@ import { dataBaseInterface } from '@/api/api.js';
   .sandbox-content-tree-box{
     background-color: white;
     min-width: 20vw;
+    width: 20vw;
     height: 100%;
     border: solid 1px #DCDFE6;
     border-radius: 4px;
@@ -776,6 +951,7 @@ import { dataBaseInterface } from '@/api/api.js';
   @media screen and (max-width:1680px) {
     .sandbox-content-tree-box{
       min-width: 330px;
+      width: 330px;
     }
 
   }
@@ -805,6 +981,7 @@ import { dataBaseInterface } from '@/api/api.js';
     .button{
       z-index: 1;
       height: 30px;
+      width: 20px;
       &::before{
         border:none!important;
         top: 50%!important;
@@ -888,4 +1065,42 @@ import { dataBaseInterface } from '@/api/api.js';
 .classify-cascader-popper{
   display: none;
 }
+.sandbox-body{
+  height: calc(100% - 62px);
+  display: flex;
+  position: relative;
+  .minimap{
+    position:absolute;
+    right:6px;
+    bottom:6px;
+    box-sizing: border-box;
+  }
+  #sand-chart-body{
+    flex: 1;
+  }
+  .x6-graph-scroller {
+    flex: 1;
+  }
+
+  .x6-port-body {
+    display: none;
+  }
+
+  /* reseize 框样式 */
+  .x6-widget-transform {
+    .x6-widget-transform-resize {
+      border-radius: 0;
+    }
+  }
+  .x6-widget-minimap-viewport{
+    border-color: red;
+    .x6-widget-minimap-viewport-zoom{
+      border-color: red;
+    }
+  }
+  .x6-widget-minimap{
+    width: auto !important;
+    height: auto !important;
+  }
+}
 </style>

src/views/sandbox_manage/sandFlowNew/index.vue

@@ -80,17 +80,183 @@
         </div>
       </div>
       <div class="sand-main-body">
-        <div class="sand-mainBody-tool">
-          撤销
+        <div class="sand-mainBody-tool" id="sand-mainBody-tool">
+          <div class="sand-tool-item" :style="{'color':canUndo?'#000000':'#999999'}" @click="toolClickOptions('undo')">撤销</div>
+          <div class="sand-tool-item" :style="{'color':canRedo?'#000000':'#999999'}" @click="toolClickOptions('redo')">恢复</div>
+          <div class="sand-tool-item" id="sand-tool-fontSize">
+            <el-select v-model="styleOptions.fontF" placeholder="字体" @change="(e)=>toolClickOptions('changeFamily',e)">
+              <el-option :label="f.name" :value="f.value" v-for="f in familyOptions" :key="f.name"></el-option>
+            </el-select>
+          </div>
+          <div class="sand-tool-item">
+            <el-select v-model="styleOptions.fontS" placeholder="字号">
+              <el-option :label="s.name" :value="s.value" v-for="s in fontSizeOptions" :key="s.name"></el-option>
+            </el-select>
+          </div>
+          <div class="sand-tool-item">B</div>
+          <div class="sand-tool-item">I</div>
+          <div class="sand-tool-item">下划线</div>
+          <div class="sand-tool-item">
+            <el-color-picker
+              v-model="styleOptions.color"
+              size="mini"
+              :predefine="colorsOptions"
+            />
+          </div>
+          <div class="sand-tool-item">
+            <el-select v-model="styleOptions.lineHeight" placeholder="行高">
+              <el-option :label="lh.name" :value="lh.value" v-for="lh in lineHeightOptions" :key="lh.name"></el-option>
+            </el-select>
+          </div>
+          <div class="sand-tool-item">
+            <el-dropdown trigger="click" @command="setGraphStyle">
+							<div class="el-dropdown-link">
+								<img src="~@/assets/icons/line.svg" width="20" height="20" style="vertical-align: middle;">
+								<i class="el-icon-arrow-down" style="font-size:12px;"></i>
+							</div>
+							<el-dropdown-menu slot="dropdown">
+								<el-dropdown-item :command="{attr:'line/strokeDasharray',val: '4 4'}" :class="styleOptions.textAlign=='center'?'style-acitve':''">
+									<!-- <i class="iconfont icon--xuxian" style="color:'#000';fontSize:30px"></i> -->
+                  居中
+								</el-dropdown-item>
+								<el-dropdown-item :command="{attr:'line/strokeDasharray',val: null}">
+                  居左
+										<!-- <i class="iconfont icon--shixian" style="color:'#000';fontSize:30px"></i> -->
+								</el-dropdown-item>
+                <el-dropdown-item :command="{attr:'line/strokeDasharray',val: null}">
+                  居右
+										<!-- <i class="iconfont icon--shixian" style="color:'#000';fontSize:30px"></i> -->
+								</el-dropdown-item>
+							</el-dropdown-menu>
+						</el-dropdown>
+          </div>
+          <div class="sand-tool-item">填充色</div>
+          <div class="sand-tool-item">线条颜色</div>
+          <div class="sand-tool-item">
+            <el-dropdown trigger="click" @command="setGraphStyle">
+							<div class="el-dropdown-link">
+								<img src="~@/assets/icons/line.svg" width="20" height="20" style="vertical-align: middle;">
+								<i class="el-icon-arrow-down" style="font-size:12px;"></i>
+							</div>
+							<el-dropdown-menu slot="dropdown">
+								<el-dropdown-item :command="{attr:'line/strokeDasharray',val: '4 4'}" :class="styleOptions.lineWidth=='cu'?'style-acitve':''">
+									<!-- <i class="iconfont icon--xuxian" style="color:'#000';fontSize:30px"></i> -->
+                  粗
+								</el-dropdown-item>
+								<el-dropdown-item :command="{attr:'line/strokeDasharray',val: null}">
+                  细
+										<!-- <i class="iconfont icon--shixian" style="color:'#000';fontSize:30px"></i> -->
+								</el-dropdown-item>
+                <el-dropdown-item :command="{attr:'line/strokeDasharray',val: null}">
+                  很细
+										<!-- <i class="iconfont icon--shixian" style="color:'#000';fontSize:30px"></i> -->
+								</el-dropdown-item>
+							</el-dropdown-menu>
+						</el-dropdown>
+          </div>
+          <div class="sand-tool-item">
+            <el-dropdown trigger="click" @command="setGraphStyle">
+							<div class="el-dropdown-link">
+								<img src="~@/assets/icons/line.svg" width="20" height="20" style="vertical-align: middle;">
+								<i class="el-icon-arrow-down" style="font-size:12px;"></i>
+							</div>
+							<el-dropdown-menu slot="dropdown">
+								<el-dropdown-item :command="{attr:'line/strokeDasharray',val: '4 4'}" :class="styleOptions.lineStyle=='xu'?'style-acitve':''">
+									<!-- <i class="iconfont icon--xuxian" style="color:'#000';fontSize:30px"></i> -->
+                  虚线
+								</el-dropdown-item>
+								<el-dropdown-item :command="{attr:'line/strokeDasharray',val: null}">
+                  实线
+										<!-- <i class="iconfont icon--shixian" style="color:'#000';fontSize:30px"></i> -->
+								</el-dropdown-item>
+							</el-dropdown-menu>
+            </el-dropdown>
+          </div>
+          <div class="sand-tool-item">
+            <el-dropdown trigger="click" @command="setGraphStyle">
+							<div class="el-dropdown-link">
+								<img src="~@/assets/icons/line.svg" width="20" height="20" style="vertical-align: middle;">
+								<i class="el-icon-arrow-down" style="font-size:12px;"></i>
+							</div>
+							<el-dropdown-menu slot="dropdown">
+								<el-dropdown-item :command="{attr:'line/strokeDasharray',val: '4 4'}" :class="styleOptions.connectStyle=='1'?'style-acitve':''">
+									<!-- <i class="iconfont icon--xuxian" style="color:'#000';fontSize:30px"></i> -->
+                  直线
+								</el-dropdown-item>
+								<el-dropdown-item :command="{attr:'line/strokeDasharray',val: null}">
+                  弯折线
+										<!-- <i class="iconfont icon--shixian" style="color:'#000';fontSize:30px"></i> -->
+								</el-dropdown-item>
+                <el-dropdown-item :command="{attr:'line/strokeDasharray',val: null}">
+                  圆角弯折线
+										<!-- <i class="iconfont icon--shixian" style="color:'#000';fontSize:30px"></i> -->
+								</el-dropdown-item>
+							</el-dropdown-menu>
+            </el-dropdown>
+          </div>
+          <div class="sand-tool-item">
+            <el-dropdown trigger="click" @command="setGraphStyle">
+							<div class="el-dropdown-link">
+								<img src="~@/assets/icons/line.svg" width="20" height="20" style="vertical-align: middle;">
+								<i class="el-icon-arrow-down" style="font-size:12px;"></i>
+							</div>
+							<el-dropdown-menu slot="dropdown">
+								<el-dropdown-item :command="{attr:'line/strokeDasharray',val: '4 4'}" :class="styleOptions.startArrow=='1'?'style-acitve':''">
+									<!-- <i class="iconfont icon--xuxian" style="color:'#000';fontSize:30px"></i> -->
+                  有
+								</el-dropdown-item>
+								<el-dropdown-item :command="{attr:'line/strokeDasharray',val: null}">
+                  无
+										<!-- <i class="iconfont icon--shixian" style="color:'#000';fontSize:30px"></i> -->
+								</el-dropdown-item>
+							</el-dropdown-menu>
+            </el-dropdown>
+          </div>
+          <div class="sand-tool-item">
+            <el-dropdown trigger="click" @command="setGraphStyle">
+							<div class="el-dropdown-link">
+								<img src="~@/assets/icons/line.svg" width="20" height="20" style="vertical-align: middle;">
+								<i class="el-icon-arrow-down" style="font-size:12px;"></i>
+							</div>
+							<el-dropdown-menu slot="dropdown">
+								<el-dropdown-item :command="{attr:'line/strokeDasharray',val: '4 4'}" :class="styleOptions.endArrow=='1'?'style-acitve':''">
+									<!-- <i class="iconfont icon--xuxian" style="color:'#000';fontSize:30px"></i> -->
+                  有
+								</el-dropdown-item>
+								<el-dropdown-item :command="{attr:'line/strokeDasharray',val: null}">
+                  无
+										<!-- <i class="iconfont icon--shixian" style="color:'#000';fontSize:30px"></i> -->
+								</el-dropdown-item>
+							</el-dropdown-menu>
+            </el-dropdown>
+          </div>
+          
         </div>
         <div class="sand-mainBody-chart" id="sand-mainBody-chart">
           <div id="sand-chart-container" ></div>
 
           <!-- 缩略图 -->
           <div id="minimap" class="minimap"></div>
+
+          <div class="contextMenu-wrapper" id="contextMenu-wrapper" @mouseleave="hideContextMenu">
+            <dropdown-menu size="medium">
+              <el-dropdown-item v-for="menu in contextMenuOption" :key="menu.key" @click.native="handleContext(menu.key)">
+                <i :class="menu.icon" v-if="menu.icon" /> 
+                {{menu.label}}
+              </el-dropdown-item>
+            </dropdown-menu>
+				  </div>
         </div>
       </div>
     </div>
+    <!-- 添加链接 -->
+    <el-dialog :modal-append-to-body='false' title="添加链接" :visible.sync="addLinkShow" :close-on-click-modal="false" :center="true" width="700px">
+
+			<div slot="footer" class="dialog-footer" style="text-align:right;">
+				<el-button type="primary" plain size="small" @click.native="addLinkShow=false">取 消</el-button>
+				<el-button type="primary" size="small" @click.native="saveLink">保 存</el-button>
+			</div>
+		</el-dialog>
   </div>
 </template>
 
@@ -102,11 +268,17 @@ import { Addon } from '@antv/x6'
 import { configOpt } from '../common/toolConfig';
 // import {setGraph,render} from "../common/mindmap"
 import mindmap from "../common/mindmap"
-import {styleSettings} from "../common/toolConfig"
+import {styleSettings,familyOptions,fontSizeOptions,colorsOptions,lineHeightOptions} from "../common/toolConfig"
+import { ElDropdownMenu as DropdownMenu } from 'element-ui';
+import { contextMenuOption } from '../common/options';
+import { contextEvent } from '../common/events';
 
 const { line} = configOpt;
   export default {
     name:"sandFlowIndex",
+    components:{
+      DropdownMenu
+    },
     data() {
       return {
         graph: null,
@@ -115,6 +287,21 @@ const { line} = configOpt;
         activeToolTabName:"元素库",
         addEdgeType:"",
         styleActive:1,
+        // 当前的样式配置
+        styleOptions:{
+          fontF:"微软雅黑",
+          fontS:14,
+          color:'#000000',
+          lineHeight:1,
+          textAlign:'center',
+          lineStyle:"xu",
+          lineWidth:'cu',
+          connectStyle:'1',
+          startArrow:'1',
+          endArrow:'1'
+        },
+        canUndo:false,
+        canRedo:false,
         mindMapData:{
           id: "1",
           type: 'topic',
@@ -155,6 +342,8 @@ const { line} = configOpt;
           ],
         },
         mindmapPosition:{},
+        // 添加链接弹窗
+        addLinkShow:false
       }
     },
     mixins:[mindmap],
@@ -170,15 +359,27 @@ const { line} = configOpt;
       },
       myEdgeOption(){
         return myEdgeOption
+      },
+      contextMenuOption(){
+        return contextMenuOption
+      },
+      familyOptions(){
+        return familyOptions
+      },
+      fontSizeOptions(){
+        return fontSizeOptions
+      },
+      colorsOptions(){
+        return colorsOptions
+      },
+      lineHeightOptions(){
+        return lineHeightOptions
       }
     },
     mounted(){
       this.init()
       document.getElementById('sand-mainBody-chart').addEventListener("dragover",this.edgeDragover)
       document.getElementById('sand-mainBody-chart').addEventListener("drop",this.edgeDrop)
-      // console.log(document.getElementsByClassName('x6-graph-scroller-content')[0]);
-      // document.getElementsByClassName('x6-graph-scroller-content')[0].addEventListener("dragover",this.edgeDragover)
-      // document.getElementsByClassName('x6-graph-scroller-content')[0].addEventListener("drop",this.edgeDrop)
       
     },
     beforeDestroy(){
@@ -188,7 +389,13 @@ const { line} = configOpt;
     methods: {
       // 初始化画布
       init() {
-        const graph = new myGraph('sand-chart-container');
+        const graph = new myGraph('sand-chart-container',this.mindMapData);
+        graph.history.on('change', (args) => { 
+          console.log(args);
+          this.canUndo = graph.canUndo()
+          this.canRedo = graph.canRedo()
+          console.log(this.canUndo,this.canRedo);
+        })
         this.graph = graph;
         this.dnd = new Addon.Dnd({
           target: this.graph,
@@ -266,11 +473,59 @@ const { line} = configOpt;
         }
         this.styleActive = activeNum
       },
+      /* 右键事件 */
+      handleContext(key) {
+        if(key=="addLink"){
+          this.addLinkDialogOpen()
+        }else{
+          contextEvent(this.graph, key);
+        }
+        this.hideContextMenu();
+      },
+
+      /* 隐藏右键menu */
+      hideContextMenu() {
+        const dom = $('#contextMenu-wrapper')[0];
+        dom.style.left = '-9999px';
+        dom.style.top = '-9999px';
+      },
+      addLinkDialogOpen(){
+
+        this.addLinkShow=true
+        
+      },
+      saveLink(){
+        console.log("保存链接");
+        const select_cell = this.graph.getSelectedCells()[0]
+        if(select_cell.data.linkData){
+          select_cell.data.linkData = [{id:11,ids:21}]
+        }else{
+          select_cell.setData({linkData:[{id:1},{id:2}]})
+        }
+        console.log(select_cell,'select_cell');
+        this.addLinkShow=false
+      },
       copySandHandle(){
 
       },
       saveChart(){
         console.log(this.mindMapData,'this.mindMapData');
+      },
+      setGraphStyle(){
+        console.log("修改样式")
+      },
+      toolClickOptions(type){
+        console.log(arguments);
+        switch (type) {
+          case 'undo':
+            this.graph.undo()
+            break;
+          case 'redo':
+            this.graph.redo()
+            break;
+          default:
+            break;
+        }
       }
     },
   }
@@ -397,12 +652,29 @@ const { line} = configOpt;
           background-color: #F5F6F7;
           box-sizing: border-box;
           border-radius: 4px;
+          display: flex;
+          align-items: center;
+          padding-right: 10px;
+          .sand-tool-item{
+            margin-left: 10px;
+            cursor: pointer;
+          }
         }
         .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;
+          }
           .minimap{
             position:absolute;
             right:6px;
@@ -473,4 +745,24 @@ const { line} = configOpt;
   .x6-node-selected rect {
     stroke-width: 2px;
   }
+  #sand-mainBody-tool{
+    .el-select{
+      .el-input{
+        .el-input__inner{
+          border: none;
+          background-color: #F5F6F7;
+          padding-left: 0;
+          padding-right: 30px;
+        }
+      }
+    }
+  }
+  #sand-tool-fontSize{
+    .el-select{
+      width: 100px;
+    }
+  }
+  .style-acitve{
+    color: red;
+  }
 </style>