逻辑图优化-攒簇

src/views/sandbox_manage/index_new_version.vue

@@ -110,6 +110,7 @@
     </div>
     <!-- 目录自定义按钮区域 -->
     <div id="custom-button-zone" class="custom-button-zone">
+      <img src="~@/assets/img/data_m/move_ico.png"/>
       <img src="~@/assets/img/sand_new/add_outline.png" class="add-classify-img" v-permission="permissionBtn.sandboxPermission.sandbox_classify_addEdit"/>
       <img src="~@/assets/img/sand_new/edit_outline.png" class="edit-classify-img" v-permission="permissionBtn.sandboxPermission.sandbox_classify_addEdit"/>
       <img src="~@/assets/img/sand_new/delete_outline.png" class="delete-classify-img" v-permission="permissionBtn.sandboxPermission.sandbox_classify_del"/>
@@ -129,9 +130,9 @@
             {{ lastLevelClassifyName }}
           </el-form-item>
           <el-form-item label="目录名称" prop="SandboxClassifyName">
-            <el-input v-model="classifyForm.SandboxClassifyName" style="width: 317px;" placeholder="请输入目录名称"></el-input>
+            <el-input v-model.trim="classifyForm.SandboxClassifyName" style="width: 317px;" placeholder="请输入目录名称"></el-input>
           </el-form-item>
-          <el-form-item label="关联品种" prop="ChartPermissionId" v-if="hasVariety && (classifyAddTitle.indexOf('添加')!==-1)">
+          <el-form-item label="关联品种" prop="ChartPermissionId" v-if="hasVariety">
             <el-cascader 
 							:options="classifyArr"
 							:props="classifyProps"
@@ -162,24 +163,23 @@
             <el-input v-model="saveOtherForm.chartName" style="width: 317px;" placeholder="请输入逻辑图名称"></el-input>
           </el-form-item>
           <el-form-item label="分类" prop="classifyId" :rules="{required:true,message:'请选择分类',trigger:'change'}" >
-            <el-popover
+            <!-- <el-popover
               placement="bottom"
               width="400"
               popper-class="classify-popper"
               trigger="click"
-              v-model="selectClassifyShow">
-                <tree :nodes="onlyClassifyTreeData" :setting="selectSetting" key="saveOther" @onCreated="getSelectZTree" @onClick="selectClassify" />
+              v-model="selectClassifyShow"> -->
+                <!-- <tree :nodes="onlyClassifyTreeData" :setting="selectSetting" key="saveOther" @onCreated="getSelectZTree" @onClick="selectClassify" /> -->
                 <el-cascader 
-                slot="reference"
                 :options="onlyClassifyTreeData"
+                @change="classifyTreeChange"
                 :props="{children: 'Children',
                   label: 'SandboxClassifyName',
-                   value: 'SandboxClassifyId',emitPath:false,checkStrictly:true}"
-                v-model="saveOtherForm.classifyId" 
-                popper-class="classify-cascader-popper"
+                   value: 'SandboxClassifyId',checkStrictly:true}"
+                v-model="saveOtherClassifys" 
                 placeholder="请选择分类">
                 </el-cascader>
-            </el-popover>
+            <!-- </el-popover> -->
           </el-form-item>
         </el-form>
         <div style="text-align: center;padding:40px 0 ;">
@@ -259,8 +259,8 @@ import { myGraph } from './common/gragh';
             showLine:false,
             showIcon:false,
             selectedMulti:false,
-            addDiyDom: this.addDiyDom,
-            // addHoverDom: this.addHoverDom,
+            // addDiyDom: this.addDiyDom,
+            addHoverDom: this.addHoverDom,
 		        // removeHoverDom: this.removeHoverDom
           },
           edit:{
@@ -281,21 +281,21 @@ import { myGraph } from './common/gragh';
           }
         },
         zTreeObj:{},
-        selectSetting:{
-          data:{
-            key:{
-              name:"SandboxClassifyName",
-              children:"Children"
-            }
-          },
-          view:{
-            showLine:false,
-            showIcon:false,
-            selectedMulti:false
-          }
-        },
-        selectClassifyShow:false,
-        selectZTreeObj:{},
+        // selectSetting:{
+        //   data:{
+        //     key:{
+        //       name:"SandboxClassifyName",
+        //       children:"Children"
+        //     }
+        //   },
+        //   view:{
+        //     showLine:false,
+        //     showIcon:false,
+        //     selectedMulti:false
+        //   }
+        // },
+        // selectClassifyShow:false,
+        // selectZTreeObj:{},
         lockLoding:null,
         viewSandbox:{},
         activeNode:{},
@@ -307,6 +307,7 @@ import { myGraph } from './common/gragh';
         },
         graph:null,
         initData:{},
+        customButtonDom:'',
         // ------- 添加分类弹窗
         classifyAddTitle:"添加分类",
         classifyAddShow:false,
@@ -335,8 +336,7 @@ import { myGraph } from './common/gragh';
           chartName:"",
           classifyId:""
         },
-        saveOtherClassifys:'',
-        locationActiveNode:'',
+        saveOtherClassifys:[],
         operationType:'view',
         popoverVisible:false,
         popoverFlod:true,
@@ -345,14 +345,20 @@ import { myGraph } from './common/gragh';
         checkedLinkList:[],
         linkNode:null,
         popoverTimeout:null,
-        isSlideLeft:false
+        isSlideLeft:false,
+        locationParentIds:''
       }
     },
     created(){
       this.getClassify()
-      this.getSandboxClassify()
       this.getSandboxClassifyOnly()
-      this.getSandboxList()
+      if(sessionStorage.getItem("sandboxEditBack")){
+        this.locationParentIds=sessionStorage.getItem("sandboxEditBack").split(',')
+        this.getSandboxDetailFun(this.locationParentIds[this.locationParentIds.length-1])
+      }else{
+        this.getSandboxList()
+      }
+      this.getSandboxClassify()
       // this.setting.async={
         // enable:false,
         // type:'head'
@@ -386,7 +392,7 @@ import { myGraph } from './common/gragh';
       
       this.popoverDom.addEventListener('mouseenter',this.clearPopoverTimeout)
       this.popoverDom.addEventListener('mouseleave',this.closePopover)
-
+      this.customButtonDom = $('#custom-button-zone')[0]
     },
     beforeDestroy(){
       this.popoverDom.removeEventListener('mouseenter',this.clearPopoverTimeout)
@@ -406,6 +412,8 @@ import { myGraph } from './common/gragh';
       },
       // 获取沙盘图分类
       getSandboxClassify(parentNode,locationNode) {
+        // parentNode--父节点
+        // locationNode--展开父节点后需要定位的子节点，拖拽后
         console.log(parentNode,locationNode,'parentNode,locationNode');
         const sandboxClassifyId = parentNode ? parentNode.SandboxClassifyId:0
         sandInterface.getSandboxClassify({SandboxClassifyId:sandboxClassifyId,IsShowMe:this.searchParams.IsShowMe}).then(res=>{
@@ -429,19 +437,26 @@ import { myGraph } from './common/gragh';
                 }else{
                   searchNode=this.zTreeObj.getNodesByParam('SandboxId',+locationId,parentNode)
                 }
-                console.log(searchNode,'searchNode');
+                // console.log(searchNode,'searchNode');
                 if(!(searchNode && searchNode.length>0)) return 
                 this.zTreeClick(null,'',searchNode[0],1)
                 this.zTreeObj.selectNode(searchNode[0])
               }else{
                 requestAnimationFrame(()=>{
                   searchNode=this.zTreeObj.getNodesByParam('SandboxClassifyId',+locationId)
-                  console.log(searchNode,'searchNode');
+                  // console.log(searchNode,'searchNode');
                   if(!(searchNode && searchNode.length>0)) return 
                   this.zTreeClick(null,'',searchNode[0],1)
                   this.zTreeObj.selectNode(searchNode[0])
                 })
               }
+            }else if(this.locationParentIds && this.locationParentIds.length>0){
+              // 获取分类列表后需要定位
+              requestAnimationFrame(()=>{
+                this.sandboxLocation(this.locationParentIds)
+                this.locationParentIds=[]
+                sessionStorage.removeItem('sandboxEditBack')
+              })
 
             }
           }
@@ -475,16 +490,22 @@ import { myGraph } from './common/gragh';
           }
         })
       },
+      getSandboxDetailFun(SandboxId){
+        sandInterface.getSandboxDetail({SandboxId:SandboxId || this.activeNode.SandboxId}).then(res=>{
+          console.log(res);
+          if(res.Ret == 200){
+            this.viewSandbox=res.Data
+            this.rightType='chart'
+            this.initData = JSON.parse(this.viewSandbox.Content)
+          }
+        })
+      },
       getZTree(zTree){
         this.zTreeObj=zTree
       },
-      getSelectZTree(zTree){
-        this.selectZTreeObj=zTree
-      },
-      selectClassify(event,treeId,treeNode,clickFlag){
-        this.sandSaveParams.SandboxClassifyId = treeNode.SandboxClassifyId
-        this.selectClassifyShow = false
-      },
+      // getSelectZTree(zTree){
+      //   this.selectZTreeObj=zTree
+      // },
       zTreeDragBefore(treeId,treeNodes){
         return this.permissionBtn.isShowBtn('sandboxPermission','sandbox_classify_move')
       },
@@ -496,19 +517,18 @@ import { myGraph } from './common/gragh';
         (treeNodes[0].isCatalogue && targetNode.Level==5 && moveType=='inner')){
           return false
         }
-
-        // 接口失败后的还原
-        // this.movingRecoveData.treeNode=treeNodes[0]
-        // if(treeNodes[0].getPreNode()){
-        //   this.movingRecoveData.targetNode = treeNodes[0].getPreNode()
-        //   this.movingRecoveData.moveType = "next"
-        // }else if(treeNodes[0].getNextNode()){
-        //   this.movingRecoveData.targetNode = treeNodes[0].getNextNode()
-        //   this.movingRecoveData.moveType = "prev"
-        // }else if(treeNodes[0].getParentNode()){
-        //   this.movingRecoveData.targetNode = treeNodes[0].getParentNode()
-        //   this.movingRecoveData.moveType = "inner"
-        // }
+        // 用于接口失败后的还原位置
+        this.movingRecoveData.treeNode=treeNodes[0]
+        if(treeNodes[0].getPreNode()){
+          this.movingRecoveData.targetNode = treeNodes[0].getPreNode()
+          this.movingRecoveData.moveType = "next"
+        }else if(treeNodes[0].getNextNode()){
+          this.movingRecoveData.targetNode = treeNodes[0].getNextNode()
+          this.movingRecoveData.moveType = "prev"
+        }else if(treeNodes[0].getParentNode()){
+          this.movingRecoveData.targetNode = treeNodes[0].getParentNode()
+          this.movingRecoveData.moveType = "inner"
+        }
       },
       zTreeDrop(e,treeId,treeNodes,targetNode,moveType,isCopy){
         console.log(treeId,treeNodes[0],targetNode,moveType,isCopy,'zTreeDrop');
@@ -527,6 +547,7 @@ import { myGraph } from './common/gragh';
           PrevType:prevNode?(prevNode.isCatalogue?1:2):0,
           NextType:nextNode?(nextNode.isCatalogue?1:2):0
         }
+        // console.log(this.movingRecoveData,'this.movingRecoveData');
         sandInterface.sandboxClassifyMove(params).then(res=>{
           if(res.Ret == 200){
             this.$message.success('移动分类成功')
@@ -534,33 +555,17 @@ import { myGraph } from './common/gragh';
               this.zTreeObj.removeChildNodes(parentNode)
             }
             this.getSandboxClassify(parentNode,treeNodes[0])
+          }else{
+            // 接口失败后的还原位置
+            let result=this.zTreeObj.moveNode(this.movingRecoveData.targetNode,this.movingRecoveData.treeNode,this.movingRecoveData.moveType)
+            if(!result){
+              this.$message.error('目录位置还原失败，刷新目录')
+              setTimeout(()=>{
+                this.getSandboxClassify()
+              },1000)
+            }
           }
         })
-        // if((!targetNode) && (!moveType)) return
-        // let parentNode = treeNodes[0].getParentNode()
-        // let prevNode = treeNodes[0].getPreNode()
-        // let nextNode = treeNodes[0].getNextNode()
-        // //移动分类
-        // let params={
-        //   ClassifyId:treeNodes[0].SandboxClassifyId,
-        //   SandboxId:treeNodes[0].isCatalogue?0:treeNodes[0].SandboxId,
-        //   ParentClassifyId:parentNode?parentNode.SandboxClassifyId:0,
-        //   PrevId:prevNode? (prevNode.isCatalogue?prevNode.SandboxClassifyId:prevNode.SandboxId) :0,
-        //   NextId:nextNode? (nextNode.isCatalogue?nextNode.SandboxClassifyId:nextNode.SandboxId) :0,
-        //   PrevType:prevNode?(prevNode.isCatalogue?1:2):0,
-        //   NextType:nextNode?(nextNode.isCatalogue?1:2):0
-        // }
-        // console.log(params);
-        // sandInterface.sandboxClassifyMove(params).then(res=>{
-        //   if(res.Ret == 200){
-        //     this.$message.success('移动分类成功')
-        //   }else{
-        //     // let result=this.zTreeObj.moveNode(this.movingRecoveData.targetNode,this.movingRecoveData.treeNode,this.movingRecoveData.moveType)
-        //     // if(!result){
-        //     //   window.location.reload()
-        //     // }
-        //   }
-        // })
       },
       zTreeExpandBefore(treeId, treeNode){
         // console.log( treeId, treeNode);
@@ -590,14 +595,7 @@ import { myGraph } from './common/gragh';
             // this.rightType='list'
           }else{
             // 沙盘图
-            sandInterface.getSandboxDetail({SandboxId:this.activeNode.SandboxId}).then(res=>{
-              console.log(res);
-              if(res.Ret == 200){
-                this.viewSandbox=res.Data
-                this.rightType='chart'
-                this.initData = JSON.parse(this.viewSandbox.Content)
-              }
-            })
+            this.getSandboxDetailFun()
           }
         }
 
@@ -699,7 +697,7 @@ import { myGraph } from './common/gragh';
         this.lastLevelClassifyName = pNode ? pNode.SandboxClassifyName:''
         this.classifyForm.SandboxClassifyId = node.SandboxClassifyId
         this.classifyForm.SandboxClassifyName = node.SandboxClassifyName
-        this.classifyAddTitle="重命名"
+        this.classifyAddTitle="编辑分类"
         this.classifyAddShow=true
       },
       deleteClassify(e,node){
@@ -752,11 +750,6 @@ import { myGraph } from './common/gragh';
           if (res.Ret === 200) {
             this.zTreeObj.removeNode(currentNode)
             this.$message.success(res.Msg);
-            // if(type && res.Data.SandboxId){
-              
-            // }else{
-
-            // }
           }
         });
       },
@@ -827,9 +820,6 @@ import { myGraph } from './common/gragh';
         let scrollTop = this.$refs.pictureListRef.scrollTop;
         let clientHeight = this.$refs.pictureListRef.clientHeight;
         let scrollHeight = this.$refs.pictureListRef.scrollHeight;
-        // console.log('scrollTop:',scrollTop)
-        // console.log('clientHeight:',clientHeight)
-        // console.log('scrollHeight:',scrollHeight)
         if(scrollTop + clientHeight >= scrollHeight-10 && this.pictureHaveMore){
           this.searchParams.CurrentIndex++
           this.getSandboxList();
@@ -847,17 +837,9 @@ import { myGraph } from './common/gragh';
         this.sandboxLocation(ParentClassifys)
       },
       async sandboxLocation(ParentClassifys){
-        console.log(ParentClassifys,'ParentClassifys');
         let beActiveNode=''
         for (let i = 0; i < ParentClassifys.length; i++) {
           const element = ParentClassifys[i];
-          // if(i == (ParentClassifys.length-1)){
-          //   console.log(+element,beActiveNode,'element');
-          //   let searchNode=this.zTreeObj.getNodesByParam('SandboxId',+element,beActiveNode)
-          //   console.log(searchNode[0]);
-          //   this.zTreeObj.selectNode(searchNode[0],false,false)
-          //   return 
-          // }
           let searchNode=this.zTreeObj.getNodesByParam('SandboxClassifyId',+element,beActiveNode)
           console.log(searchNode,'searchNode',i);
           if(!(searchNode&&searchNode.length>0)){
@@ -881,12 +863,11 @@ import { myGraph } from './common/gragh';
             beActiveNode = searchNode[0]
           }
         }
-        this.locationActiveNode=beActiveNode
         // 选中
-        requestAnimationFrame(()=>{
+        this.activeNode = beActiveNode
+        setTimeout(()=>{
           this.zTreeObj.selectNode(beActiveNode)
-          this.activeNode = beActiveNode
-        })
+        },300)
       },
       expandNodeAsync(parentNode,activeId,isLast=false){
         return new Promise((resolve,reject)=>{
@@ -992,16 +973,15 @@ import { myGraph } from './common/gragh';
         })
         .catch(() => {});
       },
-      addDiyDom(treeId, treeNode) {
-        // console.log(treeNode,'treeId, treeNode');
+      addHoverDom(treeId, treeNode){
         var aObj = $("#" + treeNode.tId + "_a");
-        if ($("#diyBtn_"+treeNode.SandboxClassifyId).length>0) return;
+        if (aObj.find('#custom-button-zone').length>0) return;
+        let dom = this.customButtonDom.cloneNode(true)
+        let addClassifyDom = $(dom).find('.add-classify-img')[0]
+        let editClassifyDom = $(dom).find('.edit-classify-img')[0]
+        let delClassifyDom = $(dom).find('.delete-classify-img')[0]
         if(treeNode.isCatalogue){
           //目录添加自定义按钮
-          let dom = $('#custom-button-zone')[0].cloneNode(true)
-          let addClassifyDom = $(dom).find('.add-classify-img')[0]
-          let editClassifyDom = $(dom).find('.edit-classify-img')[0]
-          let delClassifyDom = $(dom).find('.delete-classify-img')[0]
           if(treeNode.Level>4){
             addClassifyDom && (addClassifyDom.style.display='none')
           }else{
@@ -1010,15 +990,13 @@ import { myGraph } from './common/gragh';
           editClassifyDom && editClassifyDom.addEventListener("click",(e)=>this.editClassify(e,treeNode))
           delClassifyDom && delClassifyDom.addEventListener("click",(e)=>this.deleteClassify(e,treeNode))
 
-          aObj.append(dom);
+        }else{
+          addClassifyDom && (addClassifyDom.style.display='none')
+          editClassifyDom && (editClassifyDom.style.display='none')
+          delClassifyDom && (delClassifyDom.style.display='none')
         }
-
+        aObj.append(dom);
       },
-      // removeHoverDom(treeId, treeNode) {
-      //   console.log(treeId, treeNode,'treeId, treeNode');
-      //   $("#diyBtn_"+treeNode.SandboxClassifyId).unbind().remove();
-	    //   $("#diyBtn_space_" +treeNode.SandboxClassifyId).unbind().remove();
-      // }
       addSand(){
         const { href } = this.$router.resolve({ path: '/sandflow' });
         window.open(href, '_blank');
@@ -1033,6 +1011,7 @@ import { myGraph } from './common/gragh';
       },
       saveOtherSubmit: _.debounce( function() {
         // console.log(this.viewSandbox);
+        // console.log(this.saveOtherClassifys,this.saveOtherForm,'this.saveOtherForm');
         // return 
         if(!this.graph.toJSON().cells.length) return this.$message.warning('画布无内容');
         this.$refs.saveOtherFormRef.validate(valid=>{
@@ -1065,12 +1044,14 @@ import { myGraph } from './common/gragh';
                 this.lockLoding.close();
                 return;
               }
-              console.log(sandData,'sandData');
+              // console.log(sandData,'sandData');
               this.lockLoding.close();
               this.$message.success("另存为成功")
-              let saveOtherIds = this.saveOtherClassifys.split(',')
-              saveOtherIds.push(sandData.SandboxId)
-              this.sandboxLocation(saveOtherIds)
+              //沙盘图详情
+              this.getSandboxDetailFun(sandData.SandboxId)
+
+              this.saveOtherClassifys.push(sandData.SandboxId)
+              this.sandboxLocation(this.saveOtherClassifys)
               this.saveOtherShow=false
             },{
               preserveDimensions:true,//让svg为实际图片大小
@@ -1084,19 +1065,7 @@ 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)
@@ -1113,6 +1082,12 @@ import { myGraph } from './common/gragh';
                 .x6-port {
                     visibility: hidden;
                 }
+                .left-topic-image{
+                  visibility:hidden;
+                }
+                .right-topic-image{
+                  visibility: hidden;
+                }
                 ` 
             })
           }
@@ -1122,10 +1097,11 @@ import { myGraph } from './common/gragh';
       },500),
       saveOtherClosed(){
         this.saveOtherForm={
-          chartName:"逻辑图名称",
+          chartName:"",
           classifyId:""
         }
-        this.selectZTreeObj.cancelSelectedNode()
+        this.saveOtherClassifys=[]
+        // this.selectZTreeObj.cancelSelectedNode()
         this.$refs.saveOtherFormRef.clearValidate()
       },
       copySandHandle: _.debounce(function() {
@@ -1185,19 +1161,6 @@ 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)
@@ -1213,14 +1176,26 @@ import { myGraph } from './common/gragh';
             }
           .x6-port {
               visibility: hidden;
+          }
+          .left-topic-image{
+            visibility:hidden;
+          }
+          .right-topic-image{
+            visibility: hidden;
           }` 
         })
       },500),
-      selectClassify(event,treeId,treeNode,clickFlag){
-        // console.log(treeNode);
-        this.saveOtherForm.classifyId = treeNode.SandboxClassifyId
-        this.saveOtherClassifys=this.getParentClassifyIds(treeNode)
-        this.selectClassifyShow = false
+      // selectClassify(event,treeId,treeNode,clickFlag){
+      //   // console.log(treeNode);
+      //   this.saveOtherForm.classifyId = treeNode.SandboxClassifyId
+      //   this.saveOtherClassifys=this.getParentClassifyIds(treeNode)
+      //   this.selectClassifyShow = false
+      // },
+      classifyTreeChange(value){
+        if(!value){
+          this.saveOtherForm.classifyId=''
+        }
+        this.saveOtherForm.classifyId=value[value.length-1]
       },
       getParentClassifyIds(treeNode){
         let parentNode = treeNode.getParentNode()

src/views/sandbox_manage/sandFlowNew/index.vue

@@ -73,35 +73,33 @@
             placeholder="请输入逻辑图名称">
             <i slot="prefix" class="el-input__icon el-icon-search"></i>
           </el-input>
-          <el-popover
+          <!-- <el-popover
             placement="bottom"
             width="400"
             popper-class="classify-popper"
             trigger="click"
-            v-model="selectClassifyShow">
-              <tree :nodes="treeData" :setting="selectSetting" @onCreated="getSelectZTree" @onClick="selectClassify" />
+            v-model="selectClassifyShow"> -->
+              <!-- <tree :nodes="treeData" :setting="selectSetting" @onCreated="getSelectZTree" @onClick="selectClassify" /> -->
               <el-cascader 
-                slot="reference"
                 :options="treeData"
                 :props="{children: 'Children',
                   label: 'SandboxClassifyName',
                     value: 'SandboxClassifyId',emitPath:false,checkStrictly:true}"
                 v-model="sandSaveParams.SandboxClassifyId" 
-                popper-class="classify-cascader-popper"
                 placeholder="请选择分类">
               </el-cascader>
-          </el-popover>
+          <!-- </el-popover> -->
         </div>
         <div class="sand-mainTop-option">
           <!-- <div class="sand-option-linkShow">
             <img src="~@/assets/img/sand_new/eye-show-black.png" />
             <span>链接展示</span>
           </div> -->
-          <!-- <el-button size="large" type="primary" @click="backList" style="margin-right: 20px;min-width: 120px;"
-          v-if="$route.query.SandboxId">返回</el-button> -->
+          <el-button size="large" type="primary" plain @click="backList" style="margin-right: 20px;min-width: 120px;"
+          v-if="$route.query.SandboxId">返回</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>
+          <el-button type="primary" size="large" @click="saveChart" style="min-width: 120px;" v-permission="permissionBtn.sandboxPermission.sandbox_saveView">保存</el-button>
         </div>
       </div>
       <!-- <div class="sand-main-body"> -->
@@ -625,7 +623,7 @@ import { contextEvent } from '../common/events';
 import { mapState } from 'vuex'
 import { dataBaseInterface,sandInterface,reportlist} from '@/api/api.js';
 import * as sheetInterface from "@/api/modules/sheetApi.js";
-import tree from "vue-giant-tree";
+// import tree from "vue-giant-tree";
 import { chartSetMixin } from '../../dataEntry_manage/mixins/chartPublic'
 import Chart from '../../dataEntry_manage/components/chart.vue'
 import mPage from "@/components/mPage.vue";
@@ -634,8 +632,26 @@ import { svgToBase64 } from '@/utils/svgToblob'
   export default {
     name:"sandFlowIndex",
     components:{
-      DropdownMenu,tree,Chart,mPage
+      // tree,
+      DropdownMenu,Chart,mPage
     },
+    beforeRouteLeave(to,from,next) {
+		// 添加页切换路由提示保存
+		if(!this.$route.query.SandboxId) {
+			this.$confirm("在离开页面之前，是否保存当前内容？", "保存提示", {
+					type: "warning"
+				}).then(() => {
+					this.saveChart('exit',()=>{
+            next()
+          });
+				}).catch(() => {
+					next();
+				})
+		}else {
+			next();
+		}
+
+	},
     data() {
       return {
         contextMenuOption,
@@ -657,21 +673,21 @@ import { svgToBase64 } from '@/utils/svgToblob'
           SandboxClassifyId:'',
           SandboxId:+this.$route.query.SandboxId || 0,
         },
-        selectClassifyShow:false,
-        zTreeObj:{},
-        selectSetting:{
-          data:{
-            key:{
-              name:"SandboxClassifyName",
-              children:"Children"
-            }
-          },
-          view:{
-            showLine:false,
-            showIcon:false,
-            selectedMulti:false
-          }
-        },
+        // selectClassifyShow:false,
+        // selectZTreeObj:{},
+        // selectSetting:{
+        //   data:{
+        //     key:{
+        //       name:"SandboxClassifyName",
+        //       children:"Children"
+        //     }
+        //   },
+        //   view:{
+        //     showLine:false,
+        //     showIcon:false,
+        //     selectedMulti:false
+        //   }
+        // },
         treeData:[],
         lockLoding: null,
         loopTimer:null,
@@ -785,7 +801,13 @@ import { svgToBase64 } from '@/utils/svgToblob'
           newval.length && !this.chartInfo.WarnMsg && this.setChartOptionHandle(newval);
         },
         deep: true,
-    },
+      },
+      styleActive:{
+        handler(newval, oldval) {
+          this.$store.commit("sand/SET_CELL_STYLE",newval)
+        },
+        immediate:true
+      }
 	  },
     computed:{
       myNodes(){
@@ -851,13 +873,13 @@ import { svgToBase64 } from '@/utils/svgToblob'
           }
         })
       },
-      getSelectZTree(zTree){
-        this.selectZTreeObj=zTree
-      },
-      selectClassify(event,treeId,treeNode,clickFlag){
-        this.sandSaveParams.SandboxClassifyId = treeNode.SandboxClassifyId
-        this.selectClassifyShow = false
-      },
+      // getSelectZTree(zTree){
+      //   this.selectZTreeObj=zTree
+      // },
+      // selectClassify(event,treeId,treeNode,clickFlag){
+      //   this.sandSaveParams.SandboxClassifyId = treeNode.SandboxClassifyId
+      //   this.selectClassifyShow = false
+      // },
       getGraphData(Id){
         let SandboxId=+Id ? +Id : this.sandSaveParams.SandboxId
         sandInterface.getSandboxDetail({SandboxId}).then(res=>{
@@ -867,6 +889,7 @@ import { svgToBase64 } from '@/utils/svgToblob'
             this.sandSaveParams.SandboxClassifyId=res.Data.SandboxClassifyId
             this.initData = JSON.parse(res.Data.Content)
             this.mindmapDataUse = res.Data.MindmapData?JSON.parse(res.Data.MindmapData):[]
+            this.styleActive = res.Data.style||3
             this.autoSave();
           }
         })
@@ -883,7 +906,8 @@ import { svgToBase64 } from '@/utils/svgToblob'
             SandboxClassifyId,
             Content: JSON.stringify(this.graph.toJSON()),
             PicUrl:'',
-            MindmapData:this.mindmapDataUse.length>0?JSON.stringify(this.mindmapDataUse):''
+            MindmapData:this.mindmapDataUse.length>0?JSON.stringify(this.mindmapDataUse):'',
+            style:this.styleActive||1
           }).then((res) => {
             if(res.Ret !== 200) return
           });
@@ -1060,6 +1084,7 @@ import { svgToBase64 } from '@/utils/svgToblob'
             ...this.myEdgeOption(this.addType,position.x,position.y)
           });
         }
+        this.addType=""
       },
       generateMindmapData(position,addType){
         let beId=this.mindmapDataUse.length>0?
@@ -1111,9 +1136,8 @@ import { svgToBase64 } from '@/utils/svgToblob'
         this.mindmapDataUse.push({mindmapData,position,addType})
       },
       changeStyle(activeNum){
-        this.$store.commit("sand/SET_CELL_STYLE",activeNum)
         let styleData=styleSettings[activeNum-1]
-
+        this.styleActive = activeNum
         let cells = this.graph.getCells()
         // console.log(cells);
 
@@ -1144,7 +1168,6 @@ import { svgToBase64 } from '@/utils/svgToblob'
             })
           }
         }
-        this.styleActive = activeNum
       },
       /* 右键事件 */
       handleContext(key) {
@@ -1199,10 +1222,11 @@ import { svgToBase64 } from '@/utils/svgToblob'
         this.$message.success("链接保存成功")
         this.addLinkShow=false
       },
-      // backList(){
-      //   // this.sandSaveParams.SandboxId this.sandSaveParams.Name
-      //   this.$router.push({path:"/sandlist",query:{SandboxName:'阿巴阿巴A1',SandboxId:142}})
-      // },
+      backList(){
+        // this.sandSaveParams.SandboxId this.sandSaveParams.Name
+        sessionStorage.setItem("sandboxEditBack",'423,390,135')
+        this.$router.push({path:"/sandlist"})
+      },
       copySandHandle: _.debounce(function() {
         const { cells } = this.graph.toJSON();
         if(!cells.length) return this.$message.warning('当前画布无可复制内容');
@@ -1223,8 +1247,7 @@ import { svgToBase64 } from '@/utils/svgToblob'
           img.onload = ()=>{
             canvas.width = img.width;
             canvas.height = img.height;
-            // console.log('width',img.width)
-            // console.log('height',img.height)
+
             ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
             ctx.fillStyle="#fff";
             ctx.fillRect(0, 0, img.width, img.height);
@@ -1249,7 +1272,7 @@ import { svgToBase64 } from '@/utils/svgToblob'
             }	
           }
         },{
-          preserveDimensions:true,//让svg为实际图片大小
+          preserveDimensions:false,//让svg为实际图片大小
           beforeSerialize:(svg)=>{
             const {x,y,width,height} = this.graph.getContentBBox(cells)
             let {tx,ty} = this.graph.translate()
@@ -1259,21 +1282,6 @@ import { svgToBase64 } from '@/utils/svgToblob'
             //设置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)
@@ -1289,11 +1297,17 @@ import { svgToBase64 } from '@/utils/svgToblob'
               }
             .x6-port {
                 visibility: hidden;
+            }
+            .left-topic-image{
+              visibility:hidden;
+            }
+            .right-topic-image{
+              visibility: hidden;
             }` 
             
         })
       },500),
-      saveChart: _.debounce( function(callback=null) {
+      saveChart: _.debounce(function(routerType='goEdit', callback=null) {
         if(!this.sandSaveParams.Name) 
           return this.$message.warning('请填写逻辑图名称');
         if(!this.sandSaveParams.SandboxClassifyId) 
@@ -1328,7 +1342,8 @@ import { svgToBase64 } from '@/utils/svgToblob'
           //   Content: JSON.stringify(this.graph.toJSON()),
           //   PicUrl: Data?Data.ResourceUrl:'',
           //   SvgData: dataUri,
-          //   MindmapData:JSON.stringify(this.mindmapDataUse)
+          //   MindmapData:JSON.stringify(this.mindmapDataUse),
+          //   style:this.styleActive||1
           // });
           // return 
           const { Ret , Data : sandData} = await sandInterface.sandboxSaveV2({
@@ -1338,7 +1353,8 @@ import { svgToBase64 } from '@/utils/svgToblob'
             Content: JSON.stringify(this.graph.toJSON()),
             PicUrl: Data?Data.ResourceUrl:'',
             SvgData: dataUri,
-            MindmapData:JSON.stringify(this.mindmapDataUse)
+            MindmapData:JSON.stringify(this.mindmapDataUse),
+            style:this.styleActive||1
           })
 
           if(Ret !== 200){
@@ -1348,7 +1364,7 @@ import { svgToBase64 } from '@/utils/svgToblob'
           this.$message.success(`${SandboxId ? '编辑成功' : '保存成功'}`);
           this.lockLoding.close();
           //如果是新增,直接跳转到编辑页面
-          if(!SandboxId){
+          if(!SandboxId && routerType=='goEdit'){
             this.$router.replace({
               path: '/sandflow',
               query: {
@@ -1361,31 +1377,20 @@ import { svgToBase64 } from '@/utils/svgToblob'
         },{
           preserveDimensions:true,//让svg为实际图片大小
           beforeSerialize:(svg)=>{
+            const zoom = this.graph.zoom();
             const {x,y,width,height} = this.graph.getContentBBox(cells)
             let {tx,ty} = this.graph.translate() // 画布偏移量
             //给导出的svg增加一点宽高
-            svg.setAttribute('width',width+50)
-            svg.setAttribute('height',height+50) 
+            svg.setAttribute('width',width+60*zoom)
+            svg.setAttribute('height',height+60*zoom) 
             //设置viewBox使图像居中
-            svg.setAttribute('viewBox',`${x-25} ${y-25} ${width+50} ${height+50}`)
+            svg.setAttribute('viewBox',`${x-30*zoom} ${y-30*zoom} ${width+60*zoom} ${height+60*zoom}`)
             // 在图表右下方 加上"来源：弘则研究"字样
             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)
+            textNode.setAttribute('x',(x-tx+width)/zoom-85)
+            textNode.setAttribute('y',(y-ty+height)/zoom+27)
             textNode.setAttribute('font-size','16px')
             textNode.setAttribute('font-style','italic')
             textNode.innerText = '来源：弘则研究'
@@ -1399,6 +1404,12 @@ import { svgToBase64 } from '@/utils/svgToblob'
             .x6-port {
                 visibility: hidden;
             }
+            .left-topic-image{
+              visibility:hidden;
+            }
+            .right-topic-image{
+              visibility: hidden;
+            }
             ` 
         })