沙盘图修改

src/views/sandbox_manage/common/events.js

@@ -46,7 +46,7 @@ export const myEvents = (graph,mindmapDataUseFun) => {
 			edit_area.style.left = `${pos.x}px`;
 			edit_area.style.top = `${pos.y}px`;
 			edit_area.style.width = `${width * zoom}px`;
-			edit_area.style.height = `${height}px`;
+			// edit_area.style.height = `${height}px`;
 
 			edit_area.style.lineHeight = `${text.lineHeight * zoom}px`;
 			edit_area.style.textAlign = `center`;
@@ -65,12 +65,12 @@ export const myEvents = (graph,mindmapDataUseFun) => {
 			}
 
 			// 动态增加框的高度
-			// edit_area.oninput = () => {
-			// 	const domH = (edit_area.getBoundingClientRect().height) /zoom;
-			// 	node.size(width,domH > 50 ? domH : 50);
-			// 	// node.size(width,domH > height ? domH : height);
+			edit_area.oninput = () => {
+				const domH = (edit_area.getBoundingClientRect().height) /zoom;
+				node.size(width,domH > 50 ? domH : 50);
+				// node.size(width,domH > height ? domH : height);
 
-			// }
+			}
 
 			//失焦后设置内容
 			edit_area.onblur = () => {
@@ -99,12 +99,13 @@ export const myEvents = (graph,mindmapDataUseFun) => {
 				}
 				if(node.shape.indexOf('mindmap')==-1){
 					const domH = (edit_area.getBoundingClientRect().height) /zoom;
-					// node.size(width,domH > 50 ? domH : 50);
-					node.size(width,domH);
+					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})
+					// node.size(width,domH);
+					node.size(width,domH > 50 ? domH : 50);
+					// node.fit({ deep: true })
 				}
 
 				$('#sand-chart-container')[0].removeChild(edit_area);

src/views/sandbox_manage/index_new_version.vue

@@ -211,18 +211,15 @@ import { myGraph } from './common/gragh';
     watch: {
       initData(newval) {
         console.log(newval);
-        this.graph.fromJSON(newval);
-        this.$nextTick(()=>{
+        if(!this.graph){
+          this.$nextTick(()=>{
+            this.init()
+            this.graph.fromJSON(newval);
+            this.graph.zoomToFit()
+          })
+        }else{
+          this.graph.fromJSON(newval);
           this.graph.zoomToFit()
-        })
-      },
-      rightType(newval) {
-        if(newval!='list'){
-          if(!this.graph){
-            this.$nextTick(()=>{
-              // this.init()
-            })
-          }
         }
       }
 	  },
@@ -383,7 +380,7 @@ import { myGraph } from './common/gragh';
       // }
     },
     mounted(){
-      this.init()
+      // this.init()
       this.popoverDom = $('#link-popover')[0];
       this.popoverTriggerDom = $('#link-reference')[0];
       
@@ -842,7 +839,7 @@ import { myGraph } from './common/gragh';
       /* 展示详情 */
       detailShowHandle(item) {
         this.viewSandbox=item
-        this.rightType='chart'
+        this.rightType='chart' 
         this.initData = JSON.parse(item.Content)
         let ParentClassifys = item.ParentIds.split(',').filter(Boolean)
         ParentClassifys.push(item.SandboxClassifyId)

src/views/sandbox_manage/sandFlowNew/index.vue

@@ -104,322 +104,322 @@
           <el-button type="primary" size="large" @click="saveChart(null)" style="min-width: 120px;" v-permission="permissionBtn.sandboxPermission.sandbox_saveView">保存</el-button>
         </div>
       </div>
-      <div class="sand-main-body">
-        <div class="sand-mainBody-tool" id="sand-mainBody-tool">
-          <el-tooltip content="撤销（Ctrl+Z）" placement="top" :open-delay="250">
-            <img :src="canUndo?require('@/assets/img/sand_new/tools/undo.png'):require('@/assets/img/sand_new/tools/undo-disabled.png')" 
-            class="sand-tool-item"  @click="toolClickOptions('undo',!canUndo)" :class="canUndo?'':'tool-disabled'"/>
-          </el-tooltip>
-          <el-tooltip content="恢复（Ctrl+Y）" placement="top" :open-delay="250">
-            <img :src="canRedo?require('@/assets/img/sand_new/tools/redo.png'):require('@/assets/img/sand_new/tools/redo-disabled.png')" 
-            class="sand-tool-item"  @click="toolClickOptions('redo',!canRedo)" :class="canRedo?'':'tool-disabled'"/>
-          </el-tooltip>
-          <div class="sand-tool-item">
-              <el-dropdown trigger="click" @command="(e)=>toolClickOptions('changeFamily',nodeTextDisable,e)"
+      <!-- <div class="sand-main-body"> -->
+        <div class="sand-mainBody-chart" id="sand-mainBody-chart">
+          <div class="sand-mainBody-tool" id="sand-mainBody-tool">
+            <el-tooltip content="撤销（Ctrl+Z）" placement="top" :open-delay="250">
+              <img :src="canUndo?require('@/assets/img/sand_new/tools/undo.png'):require('@/assets/img/sand_new/tools/undo-disabled.png')" 
+              class="sand-tool-item"  @click="toolClickOptions('undo',!canUndo)" :class="canUndo?'':'tool-disabled'"/>
+            </el-tooltip>
+            <el-tooltip content="恢复（Ctrl+Y）" placement="top" :open-delay="250">
+              <img :src="canRedo?require('@/assets/img/sand_new/tools/redo.png'):require('@/assets/img/sand_new/tools/redo-disabled.png')" 
+              class="sand-tool-item"  @click="toolClickOptions('redo',!canRedo)" :class="canRedo?'':'tool-disabled'"/>
+            </el-tooltip>
+            <div class="sand-tool-item">
+                <el-dropdown trigger="click" @command="(e)=>toolClickOptions('changeFamily',nodeTextDisable,e)"
+                  placement="bottom">
+                  <div :class="nodeTextDisable?'tool-disabled':''" class="dropdown-box">
+                    <el-tooltip content="字体" placement="top" :open-delay="250">
+                      <div class="dropdown-content"  >
+                        <div class="dropdown-content-text" style="width:28px">{{ styleOptions.fontF }}</div>
+                        <img src="~@/assets/img/sand_new/tools/select-icon.png" style="width: 8px;height: 5px;"/>
+                      </div>
+                    </el-tooltip>
+                    <el-tooltip content="字体" placement="top" :open-delay="250">
+                      <span v-show="nodeTextDisable" class="disabled-item" @click.stop="()=>{}"></span>
+                    </el-tooltip>
+                  </div>
+                <el-dropdown-menu slot="dropdown">
+                  <el-dropdown-item v-for="f in familyOptions" :command="f.value" :key="f.value"
+                  :class="styleOptions.fontF==f.value?'style-acitve':''">
+                      {{ f.name }}
+                  </el-dropdown-item>
+                </el-dropdown-menu>
+              </el-dropdown>
+            </div>
+            <div class="sand-tool-item">
+              <el-dropdown trigger="click" @command="(e)=>toolClickOptions('changeSize',nodeTextDisable,e)"
                 placement="bottom">
                 <div :class="nodeTextDisable?'tool-disabled':''" class="dropdown-box">
-                  <el-tooltip content="字体" placement="top" :open-delay="250">
+                  <el-tooltip content="字号" placement="top" :open-delay="250">
                     <div class="dropdown-content"  >
-                      <div class="dropdown-content-text" style="width:28px">{{ styleOptions.fontF }}</div>
+                      <div class="dropdown-content-text" >{{ styleOptions.fontS }}px</div>
                       <img src="~@/assets/img/sand_new/tools/select-icon.png" style="width: 8px;height: 5px;"/>
                     </div>
                   </el-tooltip>
-                  <el-tooltip content="字体" placement="top" :open-delay="250">
+                  <el-tooltip content="字号" placement="top" :open-delay="250">
                     <span v-show="nodeTextDisable" class="disabled-item" @click.stop="()=>{}"></span>
                   </el-tooltip>
                 </div>
-							<el-dropdown-menu slot="dropdown">
-								<el-dropdown-item v-for="f in familyOptions" :command="f.value" :key="f.value"
-                :class="styleOptions.fontF==f.value?'style-acitve':''">
-                    {{ f.name }}
-								</el-dropdown-item>
-							</el-dropdown-menu>
-						</el-dropdown>
-          </div>
-          <div class="sand-tool-item">
-            <el-dropdown trigger="click" @command="(e)=>toolClickOptions('changeSize',nodeTextDisable,e)"
-              placement="bottom">
-              <div :class="nodeTextDisable?'tool-disabled':''" class="dropdown-box">
-                <el-tooltip content="字号" placement="top" :open-delay="250">
-                  <div class="dropdown-content"  >
-                    <div class="dropdown-content-text" >{{ styleOptions.fontS }}px</div>
-                    <img src="~@/assets/img/sand_new/tools/select-icon.png" style="width: 8px;height: 5px;"/>
-                  </div>
-                </el-tooltip>
-                <el-tooltip content="字号" placement="top" :open-delay="250">
-                  <span v-show="nodeTextDisable" class="disabled-item" @click.stop="()=>{}"></span>
-                </el-tooltip>
-              </div>
-							<el-dropdown-menu slot="dropdown">
-								<el-dropdown-item v-for="s in fontSizeOptions" :command="s.value" :key="s.value"
-                :class="styleOptions.fontS==s.value?'style-acitve':''">
-                    {{ s.name }}
-								</el-dropdown-item>
-							</el-dropdown-menu>
-						</el-dropdown>
-          </div>
-          <el-tooltip content="加粗（Ctrl+B）" placement="top" :open-delay="250">
-            <div class="sand-tool-item img-box" :class="styleOptions.fontW=='bold'?'style-acitve-back':''">
-              <img :class="nodeTextDisable?'tool-disabled':''" :src="nodeTextDisable?
-                require('@/assets/img/sand_new/tools/bold-disabled.png'):
-                require('@/assets/img/sand_new/tools/bold.png')"  @click="toolClickOptions('changeWeight',nodeTextDisable)"/>
-            </div>
-
-          </el-tooltip>      
-          <el-tooltip content="斜体" placement="top" :open-delay="250">
-            <div class="sand-tool-item img-box" :class="styleOptions.fontStyle=='italic'?'style-acitve-back':''">
-              <img :class="nodeTextDisable?'tool-disabled':''" :src="nodeTextDisable?
-                require('@/assets/img/sand_new/tools/italic-disabled.png'):
-                require('@/assets/img/sand_new/tools/italic.png')"  @click="toolClickOptions('changeFontStyle',nodeTextDisable)"/>
+                <el-dropdown-menu slot="dropdown">
+                  <el-dropdown-item v-for="s in fontSizeOptions" :command="s.value" :key="s.value"
+                  :class="styleOptions.fontS==s.value?'style-acitve':''">
+                      {{ s.name }}
+                  </el-dropdown-item>
+                </el-dropdown-menu>
+              </el-dropdown>
             </div>
-          </el-tooltip>      
-          <el-tooltip content="下划线" placement="top" :open-delay="250">
-            <div class="sand-tool-item img-box" :class="styleOptions.textDecoration=='underline'?'style-acitve-back':''">
-              <img :class="nodeTextDisable?'tool-disabled':''" :src="nodeTextDisable?
-                require('@/assets/img/sand_new/tools/underline-disabled.png'):
-                require('@/assets/img/sand_new/tools/underline.png')" @click="toolClickOptions('changeDecoration',nodeTextDisable)"/>
-            </div>
-          </el-tooltip>      
-          <div class="sand-tool-item sand-tool-img">
-              <img :src="nodeTextDisable?
-                  require('@/assets/img/sand_new/tools/text-color-disabled.png'):
-                  require('@/assets/img/sand_new/tools/text-color.png')" />
-            <el-tooltip content="字体颜色" placement="top" :open-delay="250">
-              <el-color-picker
-                key="textColor"
-                v-model="styleOptions.color"
-                size="mini"
-                :predefine="colorsOptions"
-                @change="(e)=>toolClickOptions('changeColor',nodeTextDisable,e)"
-                style="position: absolute;top: 0;left: 0;width: 16px;height: 16px;opacity: 0;"
-                :disabled="nodeTextDisable"
-              />
-            </el-tooltip>
-          </div>
-          <div class="sand-tool-item">
-            <el-dropdown trigger="click" @command="(e)=>toolClickOptions('changeLineHeight',nodeTextDisable,e)" 
-              placement="bottom">
-              <div :class="nodeTextDisable?'tool-disabled':''" class="dropdown-box">
-                <el-tooltip content="文本行高" placement="top" :open-delay="250">
-                  <div class="dropdown-content"  >
-                    <img :src="nodeTextDisable? 
-                      require('@/assets/img/sand_new/tools/line-height-disabled.png'):
-                      require('@/assets/img/sand_new/tools/line-height.png')" 
-                      style="vertical-align: middle;"/>
-                  </div>
-                </el-tooltip>
-                <el-tooltip content="文本行高" placement="top" :open-delay="250">
-                  <span v-show="nodeTextDisable" class="disabled-item" @click.stop="()=>{}"></span>
-                </el-tooltip>
-              </div>
-							<el-dropdown-menu slot="dropdown">
-								<el-dropdown-item v-for="s in lineHeightOptions" :command="s" :key="s"
-                :class="styleOptions.lineHeight==s?'style-acitve':''">
-                    {{ s }}
-								</el-dropdown-item>
-							</el-dropdown-menu>
-						</el-dropdown>
-          </div>
-          <div class="sand-tool-item">
-            <el-dropdown trigger="click" @command="(e)=>toolClickOptions('changeTextAlign',nodeTextDisable,e)" 
-              placement="bottom">
-              <div :class="nodeTextDisable?'tool-disabled':''" class="dropdown-box">
-                <el-tooltip content="文本对齐" placement="top" :open-delay="250">
-                  <div class="dropdown-content"  >
-                    <img :src="nodeTextDisable? 
-                      require('@/assets/img/sand_new/tools/text-align-disabled.png'):
-                      require('@/assets/img/sand_new/tools/text-align.png')" 
-                      style="vertical-align: middle;"/>
-                  </div>
-                </el-tooltip>
-                <el-tooltip content="文本对齐" placement="top" :open-delay="250">
-                  <span v-show="nodeTextDisable" class="disabled-item" @click.stop="()=>{}"></span>
-                </el-tooltip>
-              </div>
-							<el-dropdown-menu slot="dropdown">
-                <el-dropdown-item command="middle" :class="styleOptions.textAlign=='middle'?'style-acitve':''">
-                  居中
-								</el-dropdown-item>
-								<el-dropdown-item command="start" :class="styleOptions.textAlign=='start'?'style-acitve':''">
-                  居左
-								</el-dropdown-item>
-                <el-dropdown-item command="end" :class="styleOptions.textAlign=='end'?'style-acitve':''">
-                  居右
-								</el-dropdown-item>
-							</el-dropdown-menu>
-						</el-dropdown>
-          </div>
-          <div class="sand-tool-item sand-tool-img">
-            <img :src="toolStatus.nodeDisabled?
-                  require('@/assets/img/sand_new/tools/background-color-disabled.png'):
-                  require('@/assets/img/sand_new/tools/background-color.png')" />
-            <el-tooltip content="颜色填充" placement="top" :open-delay="250">
-              <el-color-picker
-                key="backgroundColor"
-                v-model="styleOptions.backgroundColor"
-                size="mini"
-                :predefine="colorsOptions"
-                @change="(e)=>toolClickOptions('changeBackgroundColor',toolStatus.nodeDisabled,e)"
-                style="position: absolute;top: 0;left: 0;width: 16px;height: 16px;opacity: 0;"
-                :disabled="toolStatus.nodeDisabled"
-              />
-            </el-tooltip>
-          </div>
-          <div class="sand-tool-item sand-tool-img">
-            <img :src="nodeEdgeDisable?
-                  require('@/assets/img/sand_new/tools/line-color-disabled.png'):
-                  require('@/assets/img/sand_new/tools/line-color.png')" />
-            <el-tooltip content="线条颜色" placement="top" :open-delay="250">
-              <el-color-picker
-                key="lineColor"
-                v-model="styleOptions.lineColor"
-                size="mini"
-                :predefine="colorsOptions"
-                @change="(e)=>toolClickOptions('changeLineColor',nodeEdgeDisable,e)"
-                style="position: absolute;top: 0;left: 0;width: 16px;height: 16px;opacity: 0;"
-                :disabled="nodeEdgeDisable"
-              />
-            </el-tooltip>
-          </div>
-          <div class="sand-tool-item">
-            <el-dropdown trigger="click" @command="(e)=>toolClickOptions('changeLineWidth',nodeEdgeDisable,e)"
-              placement="bottom">
-              <div :class="nodeEdgeDisable?'tool-disabled':''" class="dropdown-box">
-                <el-tooltip content="线条宽度" placement="top" :open-delay="250">
-                  <div class="dropdown-content"  >
-                    <img :src="nodeEdgeDisable? 
-                      require('@/assets/img/sand_new/tools/line-width-disabled.png'):
-                      require('@/assets/img/sand_new/tools/line-width.png')" 
-                      style="vertical-align: middle;"/>
-                  </div>
-                </el-tooltip>
-                <el-tooltip content="线条宽度" placement="top" :open-delay="250">
-                  <span v-show="nodeEdgeDisable" class="disabled-item" @click.stop="()=>{}"></span>
-                </el-tooltip>
-              </div>
-							<el-dropdown-menu slot="dropdown">
-                <el-dropdown-item :command="1" :class="styleOptions.lineWidth==1?'style-acitve':''">
-                  1
-								</el-dropdown-item>
-                <el-dropdown-item :command="2" :class="styleOptions.lineWidth==2?'style-acitve':''">
-                  2
-								</el-dropdown-item>
-								<el-dropdown-item :command="3" :class="styleOptions.lineWidth==3?'style-acitve':''">
-                  3
-								</el-dropdown-item>
-							</el-dropdown-menu>
-						</el-dropdown>
-          </div>
-          <div class="sand-tool-item">
-            <el-dropdown trigger="click" @command="(e)=>toolClickOptions('changeStrokeDasharray',nodeEdgeDisable,e)"
-              placement="bottom">
-              <div :class="nodeEdgeDisable?'tool-disabled':''" class="dropdown-box">
-                <el-tooltip content="线条样式" placement="top" :open-delay="250">
-                  <div class="dropdown-content"  >
-                    <img :src="nodeEdgeDisable? 
-                      require('@/assets/img/sand_new/tools/line-style-disabled.png'):
-                      require('@/assets/img/sand_new/tools/line-style.png')" 
-                      style="vertical-align: middle;"/>
-                  </div>
-                </el-tooltip>
-                <el-tooltip content="线条样式" placement="top" :open-delay="250">
-                  <span v-show="nodeEdgeDisable" class="disabled-item" @click.stop="()=>{}"></span>
-                </el-tooltip>
+            <el-tooltip content="加粗（Ctrl+B）" placement="top" :open-delay="250">
+              <div class="sand-tool-item img-box" :class="styleOptions.fontW=='bold'?'style-acitve-back':''">
+                <img :class="nodeTextDisable?'tool-disabled':''" :src="nodeTextDisable?
+                  require('@/assets/img/sand_new/tools/bold-disabled.png'):
+                  require('@/assets/img/sand_new/tools/bold.png')"  @click="toolClickOptions('changeWeight',nodeTextDisable)"/>
               </div>
-							<el-dropdown-menu slot="dropdown">
-								<el-dropdown-item command="4 4" :class="styleOptions.lineStyle=='4 4'?'style-acitve':''">
-                  虚线
-								</el-dropdown-item>
-								<el-dropdown-item :command="null" :class="styleOptions.lineStyle==null?'style-acitve':''">
-                  实线
-								</el-dropdown-item>
-							</el-dropdown-menu>
-            </el-dropdown>
-          </div>
-          <div class="sand-tool-item">
-            <el-dropdown trigger="click" @command="(e)=>toolClickOptions('changeRouter',toolStatus.edgeDisabled,e)"
-              placement="bottom">
-              <div :class="toolStatus.edgeDisabled?'tool-disabled':''" class="dropdown-box">
-                <el-tooltip content="连线类型" placement="top" :open-delay="250">
-                  <div class="dropdown-content"  >
-                    <img :src="toolStatus.edgeDisabled? 
-                      require('@/assets/img/sand_new/tools/line-type-disabled.png'):
-                      require('@/assets/img/sand_new/tools/line-type.png')" 
-                      style="vertical-align: middle;"/>
-                  </div>
-                </el-tooltip>
-                <el-tooltip content="连线类型" placement="top" :open-delay="250">
-                  <span v-show="toolStatus.edgeDisabled" class="disabled-item" @click.stop="()=>{}"></span>
-                </el-tooltip>
-              </div>
-							<el-dropdown-menu slot="dropdown">
-								<el-dropdown-item :command="1" :class="styleOptions.connectStyle==1?'style-acitve-back':''">
-                  <img src="~@/assets/img/sand_new/tools/line-style-straight.png" style="width: 17px;height: 16px;"/>
-								</el-dropdown-item>
-								<el-dropdown-item :command="2" :class="styleOptions.connectStyle==2?'style-acitve-back':''">
-                  <img src="~@/assets/img/sand_new/tools/line-style-bend.png" style="width: 17px;height: 16px;"/>
-								</el-dropdown-item>
-                <el-dropdown-item :command="3" :class="styleOptions.connectStyle==3?'style-acitve-back':''">
-                  <img src="~@/assets/img/sand_new/tools/line-style-bend-round.png" style="width: 17px;height: 16px;"/>
-								</el-dropdown-item>
-							</el-dropdown-menu>
-            </el-dropdown>
-          </div>
-          <div class="sand-tool-item">
-            <el-dropdown trigger="click" @command="(e)=>toolClickOptions('changeSourceMarker',toolStatus.edgeDisabled,e)"
-              placement="bottom">
-              <div :class="toolStatus.edgeDisabled?'tool-disabled':''" class="dropdown-box">
-                <el-tooltip content="开始箭头" placement="top" :open-delay="250">
-                  <div class="dropdown-content"  >
-                    <img :src="toolStatus.edgeDisabled? 
-                      require('@/assets/img/sand_new/tools/arrow-start-disabled.png'):
-                      require('@/assets/img/sand_new/tools/arrow-start.png')" 
-                      style="vertical-align: middle;"/>
-                  </div>
-                </el-tooltip>
-                <el-tooltip content="开始箭头" placement="top" :open-delay="250">
-                  <span v-show="toolStatus.edgeDisabled" class="disabled-item" @click.stop="()=>{}"></span>
-                </el-tooltip>
+
+            </el-tooltip>      
+            <el-tooltip content="斜体" placement="top" :open-delay="250">
+              <div class="sand-tool-item img-box" :class="styleOptions.fontStyle=='italic'?'style-acitve-back':''">
+                <img :class="nodeTextDisable?'tool-disabled':''" :src="nodeTextDisable?
+                  require('@/assets/img/sand_new/tools/italic-disabled.png'):
+                  require('@/assets/img/sand_new/tools/italic.png')"  @click="toolClickOptions('changeFontStyle',nodeTextDisable)"/>
               </div>
-							<el-dropdown-menu slot="dropdown">
-								<el-dropdown-item command="classic" :class="styleOptions.startArrow=='classic'?'style-acitve':''">
-                  有
-								</el-dropdown-item>
-								<el-dropdown-item :command="{}" :class="typeof(styleOptions.startArrow)=='string' || styleOptions.startArrow.name?'':'style-acitve'">
-                  无
-								</el-dropdown-item>
-							</el-dropdown-menu>
-            </el-dropdown>
-          </div>
-          <div class="sand-tool-item">
-            <el-dropdown trigger="click" @command="(e)=>toolClickOptions('changeTargetMarker',toolStatus.edgeDisabled,e)"
-              placement="bottom">
-              <div :class="toolStatus.edgeDisabled?'tool-disabled':''" class="dropdown-box">
-                <el-tooltip content="结束箭头" placement="top" :open-delay="250">
-                  <div class="dropdown-content"  >
-                    <img :src="toolStatus.edgeDisabled? 
-                      require('@/assets/img/sand_new/tools/arrow-end-disabled.png'):
-                      require('@/assets/img/sand_new/tools/arrow-end.png')" 
-                      style="vertical-align: middle;"/>
-                  </div>
-                </el-tooltip>
-                <el-tooltip content="结束箭头" placement="top" :open-delay="250">
-                  <span v-show="toolStatus.edgeDisabled" class="disabled-item" @click.stop="()=>{}"></span>
-                </el-tooltip>
+            </el-tooltip>      
+            <el-tooltip content="下划线" placement="top" :open-delay="250">
+              <div class="sand-tool-item img-box" :class="styleOptions.textDecoration=='underline'?'style-acitve-back':''">
+                <img :class="nodeTextDisable?'tool-disabled':''" :src="nodeTextDisable?
+                  require('@/assets/img/sand_new/tools/underline-disabled.png'):
+                  require('@/assets/img/sand_new/tools/underline.png')" @click="toolClickOptions('changeDecoration',nodeTextDisable)"/>
               </div>
-							<el-dropdown-menu slot="dropdown">
-								<el-dropdown-item command="classic" :class="styleOptions.endArrow=='classic'?'style-acitve':''">
-                  有
-								</el-dropdown-item>
-								<el-dropdown-item :command="{}" :class="typeof(styleOptions.endArrow)=='string' || styleOptions.endArrow.name?'':'style-acitve'">
-                  无
-								</el-dropdown-item>
-							</el-dropdown-menu>
-            </el-dropdown>
+            </el-tooltip>      
+            <div class="sand-tool-item sand-tool-img">
+                <img :src="nodeTextDisable?
+                    require('@/assets/img/sand_new/tools/text-color-disabled.png'):
+                    require('@/assets/img/sand_new/tools/text-color.png')" />
+              <el-tooltip content="字体颜色" placement="top" :open-delay="250">
+                <el-color-picker
+                  key="textColor"
+                  v-model="styleOptions.color"
+                  size="mini"
+                  :predefine="colorsOptions"
+                  @change="(e)=>toolClickOptions('changeColor',nodeTextDisable,e)"
+                  style="position: absolute;top: 0;left: 0;width: 16px;height: 16px;opacity: 0;"
+                  :disabled="nodeTextDisable"
+                />
+              </el-tooltip>
+            </div>
+            <div class="sand-tool-item">
+              <el-dropdown trigger="click" @command="(e)=>toolClickOptions('changeLineHeight',nodeTextDisable,e)" 
+                placement="bottom">
+                <div :class="nodeTextDisable?'tool-disabled':''" class="dropdown-box">
+                  <el-tooltip content="文本行高" placement="top" :open-delay="250">
+                    <div class="dropdown-content"  >
+                      <img :src="nodeTextDisable? 
+                        require('@/assets/img/sand_new/tools/line-height-disabled.png'):
+                        require('@/assets/img/sand_new/tools/line-height.png')" 
+                        style="vertical-align: middle;"/>
+                    </div>
+                  </el-tooltip>
+                  <el-tooltip content="文本行高" placement="top" :open-delay="250">
+                    <span v-show="nodeTextDisable" class="disabled-item" @click.stop="()=>{}"></span>
+                  </el-tooltip>
+                </div>
+                <el-dropdown-menu slot="dropdown">
+                  <el-dropdown-item v-for="s in lineHeightOptions" :command="s" :key="s"
+                  :class="styleOptions.lineHeight==s?'style-acitve':''">
+                      {{ s }}
+                  </el-dropdown-item>
+                </el-dropdown-menu>
+              </el-dropdown>
+            </div>
+            <div class="sand-tool-item">
+              <el-dropdown trigger="click" @command="(e)=>toolClickOptions('changeTextAlign',nodeTextDisable,e)" 
+                placement="bottom">
+                <div :class="nodeTextDisable?'tool-disabled':''" class="dropdown-box">
+                  <el-tooltip content="文本对齐" placement="top" :open-delay="250">
+                    <div class="dropdown-content"  >
+                      <img :src="nodeTextDisable? 
+                        require('@/assets/img/sand_new/tools/text-align-disabled.png'):
+                        require('@/assets/img/sand_new/tools/text-align.png')" 
+                        style="vertical-align: middle;"/>
+                    </div>
+                  </el-tooltip>
+                  <el-tooltip content="文本对齐" placement="top" :open-delay="250">
+                    <span v-show="nodeTextDisable" class="disabled-item" @click.stop="()=>{}"></span>
+                  </el-tooltip>
+                </div>
+                <el-dropdown-menu slot="dropdown">
+                  <el-dropdown-item command="middle" :class="styleOptions.textAlign=='middle'?'style-acitve':''">
+                    居中
+                  </el-dropdown-item>
+                  <el-dropdown-item command="start" :class="styleOptions.textAlign=='start'?'style-acitve':''">
+                    居左
+                  </el-dropdown-item>
+                  <el-dropdown-item command="end" :class="styleOptions.textAlign=='end'?'style-acitve':''">
+                    居右
+                  </el-dropdown-item>
+                </el-dropdown-menu>
+              </el-dropdown>
+            </div>
+            <div class="sand-tool-item sand-tool-img">
+              <img :src="toolStatus.nodeDisabled?
+                    require('@/assets/img/sand_new/tools/background-color-disabled.png'):
+                    require('@/assets/img/sand_new/tools/background-color.png')" />
+              <el-tooltip content="颜色填充" placement="top" :open-delay="250">
+                <el-color-picker
+                  key="backgroundColor"
+                  v-model="styleOptions.backgroundColor"
+                  size="mini"
+                  :predefine="colorsOptions"
+                  @change="(e)=>toolClickOptions('changeBackgroundColor',toolStatus.nodeDisabled,e)"
+                  style="position: absolute;top: 0;left: 0;width: 16px;height: 16px;opacity: 0;"
+                  :disabled="toolStatus.nodeDisabled"
+                />
+              </el-tooltip>
+            </div>
+            <div class="sand-tool-item sand-tool-img">
+              <img :src="nodeEdgeDisable?
+                    require('@/assets/img/sand_new/tools/line-color-disabled.png'):
+                    require('@/assets/img/sand_new/tools/line-color.png')" />
+              <el-tooltip content="线条颜色" placement="top" :open-delay="250">
+                <el-color-picker
+                  key="lineColor"
+                  v-model="styleOptions.lineColor"
+                  size="mini"
+                  :predefine="colorsOptions"
+                  @change="(e)=>toolClickOptions('changeLineColor',nodeEdgeDisable,e)"
+                  style="position: absolute;top: 0;left: 0;width: 16px;height: 16px;opacity: 0;"
+                  :disabled="nodeEdgeDisable"
+                />
+              </el-tooltip>
+            </div>
+            <div class="sand-tool-item">
+              <el-dropdown trigger="click" @command="(e)=>toolClickOptions('changeLineWidth',nodeEdgeDisable,e)"
+                placement="bottom">
+                <div :class="nodeEdgeDisable?'tool-disabled':''" class="dropdown-box">
+                  <el-tooltip content="线条宽度" placement="top" :open-delay="250">
+                    <div class="dropdown-content"  >
+                      <img :src="nodeEdgeDisable? 
+                        require('@/assets/img/sand_new/tools/line-width-disabled.png'):
+                        require('@/assets/img/sand_new/tools/line-width.png')" 
+                        style="vertical-align: middle;"/>
+                    </div>
+                  </el-tooltip>
+                  <el-tooltip content="线条宽度" placement="top" :open-delay="250">
+                    <span v-show="nodeEdgeDisable" class="disabled-item" @click.stop="()=>{}"></span>
+                  </el-tooltip>
+                </div>
+                <el-dropdown-menu slot="dropdown">
+                  <el-dropdown-item :command="1" :class="styleOptions.lineWidth==1?'style-acitve':''">
+                    1
+                  </el-dropdown-item>
+                  <el-dropdown-item :command="2" :class="styleOptions.lineWidth==2?'style-acitve':''">
+                    2
+                  </el-dropdown-item>
+                  <el-dropdown-item :command="3" :class="styleOptions.lineWidth==3?'style-acitve':''">
+                    3
+                  </el-dropdown-item>
+                </el-dropdown-menu>
+              </el-dropdown>
+            </div>
+            <div class="sand-tool-item">
+              <el-dropdown trigger="click" @command="(e)=>toolClickOptions('changeStrokeDasharray',nodeEdgeDisable,e)"
+                placement="bottom">
+                <div :class="nodeEdgeDisable?'tool-disabled':''" class="dropdown-box">
+                  <el-tooltip content="线条样式" placement="top" :open-delay="250">
+                    <div class="dropdown-content"  >
+                      <img :src="nodeEdgeDisable? 
+                        require('@/assets/img/sand_new/tools/line-style-disabled.png'):
+                        require('@/assets/img/sand_new/tools/line-style.png')" 
+                        style="vertical-align: middle;"/>
+                    </div>
+                  </el-tooltip>
+                  <el-tooltip content="线条样式" placement="top" :open-delay="250">
+                    <span v-show="nodeEdgeDisable" class="disabled-item" @click.stop="()=>{}"></span>
+                  </el-tooltip>
+                </div>
+                <el-dropdown-menu slot="dropdown">
+                  <el-dropdown-item command="4 4" :class="styleOptions.lineStyle=='4 4'?'style-acitve':''">
+                    虚线
+                  </el-dropdown-item>
+                  <el-dropdown-item :command="null" :class="styleOptions.lineStyle==null?'style-acitve':''">
+                    实线
+                  </el-dropdown-item>
+                </el-dropdown-menu>
+              </el-dropdown>
+            </div>
+            <div class="sand-tool-item">
+              <el-dropdown trigger="click" @command="(e)=>toolClickOptions('changeRouter',toolStatus.edgeDisabled,e)"
+                placement="bottom">
+                <div :class="toolStatus.edgeDisabled?'tool-disabled':''" class="dropdown-box">
+                  <el-tooltip content="连线类型" placement="top" :open-delay="250">
+                    <div class="dropdown-content"  >
+                      <img :src="toolStatus.edgeDisabled? 
+                        require('@/assets/img/sand_new/tools/line-type-disabled.png'):
+                        require('@/assets/img/sand_new/tools/line-type.png')" 
+                        style="vertical-align: middle;"/>
+                    </div>
+                  </el-tooltip>
+                  <el-tooltip content="连线类型" placement="top" :open-delay="250">
+                    <span v-show="toolStatus.edgeDisabled" class="disabled-item" @click.stop="()=>{}"></span>
+                  </el-tooltip>
+                </div>
+                <el-dropdown-menu slot="dropdown">
+                  <el-dropdown-item :command="1" :class="styleOptions.connectStyle==1?'style-acitve-back':''">
+                    <img src="~@/assets/img/sand_new/tools/line-style-straight.png" style="width: 17px;height: 16px;"/>
+                  </el-dropdown-item>
+                  <el-dropdown-item :command="2" :class="styleOptions.connectStyle==2?'style-acitve-back':''">
+                    <img src="~@/assets/img/sand_new/tools/line-style-bend.png" style="width: 17px;height: 16px;"/>
+                  </el-dropdown-item>
+                  <el-dropdown-item :command="3" :class="styleOptions.connectStyle==3?'style-acitve-back':''">
+                    <img src="~@/assets/img/sand_new/tools/line-style-bend-round.png" style="width: 17px;height: 16px;"/>
+                  </el-dropdown-item>
+                </el-dropdown-menu>
+              </el-dropdown>
+            </div>
+            <div class="sand-tool-item">
+              <el-dropdown trigger="click" @command="(e)=>toolClickOptions('changeSourceMarker',toolStatus.edgeDisabled,e)"
+                placement="bottom">
+                <div :class="toolStatus.edgeDisabled?'tool-disabled':''" class="dropdown-box">
+                  <el-tooltip content="开始箭头" placement="top" :open-delay="250">
+                    <div class="dropdown-content"  >
+                      <img :src="toolStatus.edgeDisabled? 
+                        require('@/assets/img/sand_new/tools/arrow-start-disabled.png'):
+                        require('@/assets/img/sand_new/tools/arrow-start.png')" 
+                        style="vertical-align: middle;"/>
+                    </div>
+                  </el-tooltip>
+                  <el-tooltip content="开始箭头" placement="top" :open-delay="250">
+                    <span v-show="toolStatus.edgeDisabled" class="disabled-item" @click.stop="()=>{}"></span>
+                  </el-tooltip>
+                </div>
+                <el-dropdown-menu slot="dropdown">
+                  <el-dropdown-item command="classic" :class="styleOptions.startArrow=='classic'?'style-acitve':''">
+                    有
+                  </el-dropdown-item>
+                  <el-dropdown-item :command="{}" :class="typeof(styleOptions.startArrow)=='string' || styleOptions.startArrow.name?'':'style-acitve'">
+                    无
+                  </el-dropdown-item>
+                </el-dropdown-menu>
+              </el-dropdown>
+            </div>
+            <div class="sand-tool-item">
+              <el-dropdown trigger="click" @command="(e)=>toolClickOptions('changeTargetMarker',toolStatus.edgeDisabled,e)"
+                placement="bottom">
+                <div :class="toolStatus.edgeDisabled?'tool-disabled':''" class="dropdown-box">
+                  <el-tooltip content="结束箭头" placement="top" :open-delay="250">
+                    <div class="dropdown-content"  >
+                      <img :src="toolStatus.edgeDisabled? 
+                        require('@/assets/img/sand_new/tools/arrow-end-disabled.png'):
+                        require('@/assets/img/sand_new/tools/arrow-end.png')" 
+                        style="vertical-align: middle;"/>
+                    </div>
+                  </el-tooltip>
+                  <el-tooltip content="结束箭头" placement="top" :open-delay="250">
+                    <span v-show="toolStatus.edgeDisabled" class="disabled-item" @click.stop="()=>{}"></span>
+                  </el-tooltip>
+                </div>
+                <el-dropdown-menu slot="dropdown">
+                  <el-dropdown-item command="classic" :class="styleOptions.endArrow=='classic'?'style-acitve':''">
+                    有
+                  </el-dropdown-item>
+                  <el-dropdown-item :command="{}" :class="typeof(styleOptions.endArrow)=='string' || styleOptions.endArrow.name?'':'style-acitve'">
+                    无
+                  </el-dropdown-item>
+                </el-dropdown-menu>
+              </el-dropdown>
+            </div>
+            
           </div>
-          
-        </div>
-        <div class="sand-mainBody-chart" id="sand-mainBody-chart">
           <div id="sand-chart-container" ></div>
 
           <!-- 缩略图 -->
@@ -450,7 +450,7 @@
             <div id="link-reference" slot="reference"></div>
           </el-popover>
         </div>
-      </div>
+      <!-- </div> -->
     </div>
     <!-- 添加链接 -->
     <el-dialog :modal-append-to-body='false' title="添加链接" :visible.sync="addLinkShow" 
@@ -725,7 +725,11 @@ import { svgToBase64 } from '@/utils/svgToblob'
     watch: {
       initData(newval) {
         // console.log(newval)
-        this.graph.fromJSON(newval);
+        this.init()
+        this.$nextTick(()=>{
+          this.graph.fromJSON(newval);
+          this.graph.zoomToFit()
+        })
       },
       /* 选中搜索指标 展开目录 选中指标 展示数据 */
       search_dataBaseId(newval) {
@@ -817,7 +821,7 @@ import { svgToBase64 } from '@/utils/svgToblob'
       this.$route.query.SandboxId && this.getGraphData(this.$route.query.SandboxId)
     },
     mounted(){
-      this.init()
+      // this.init()
       document.getElementById('sand-mainBody-chart').addEventListener("dragover",this.edgeDragover)
       document.getElementById('sand-mainBody-chart').addEventListener("drop",this.edgeDrop)
       this.popoverDom = $('#link-popover')[0];
@@ -860,10 +864,7 @@ import { svgToBase64 } from '@/utils/svgToblob'
             this.sandSaveParams.Name=res.Data.Name
             this.sandSaveParams.SandboxClassifyId=res.Data.SandboxClassifyId
             this.initData = JSON.parse(res.Data.Content)
-            this.mindmapDataUse = JSON.parse(res.Data.MindmapData)
-            this.$nextTick(()=>{
-              this.graph.centerContent()
-            })
+            this.mindmapDataUse = res.Data.MindmapData?JSON.parse(res.Data.MindmapData):[]
             this.autoSave();
           }
         })
@@ -880,7 +881,7 @@ import { svgToBase64 } from '@/utils/svgToblob'
             SandboxClassifyId,
             Content: JSON.stringify(this.graph.toJSON()),
             PicUrl:'',
-            MindmapData:JSON.stringify(this.mindmapDataUse)
+            MindmapData:this.mindmapDataUse.length>0?JSON.stringify(this.mindmapDataUse):''
           }).then((res) => {
             if(res.Ret !== 200) return
           });
@@ -2029,7 +2030,7 @@ import { svgToBase64 } from '@/utils/svgToblob'
       .sand-main-top{
         padding: 20px 20px 10px;
         display: flex;
-        flex-wrap: wrap;
+        // flex-wrap: wrap;
         align-items: center;
         justify-content: space-between;
         background-color: white;
@@ -2058,14 +2059,9 @@ import { svgToBase64 } from '@/utils/svgToblob'
           }
         }
       }
-      .sand-main-body{
-        display: flex;
-        flex-direction: column;
-        flex: 1;
-        background-color: white;
-        border: 1px solid #DCDFE6;
-        border-radius: 4px;
+      .sand-mainBody-chart{
         .sand-mainBody-tool{
+          position: absolute;
           height: 50px;
           width: 100%;
           background-color: #F5F6F7;
@@ -2074,6 +2070,9 @@ import { svgToBase64 } from '@/utils/svgToblob'
           display: flex;
           align-items: center;
           padding-right: 10px;
+          z-index: 1;
+          top: 0;
+          left: 0;
           .sand-tool-item{
             margin-left: 20px;
             cursor: pointer;
@@ -2326,9 +2325,15 @@ import { svgToBase64 } from '@/utils/svgToblob'
   }
   .sand-mainBody-chart{
     height: calc(100% - 50px);
+    width: 100%;
     flex: 1;
     position: relative;
+    overflow: hidden;
     display: flex;
+    background-color: white;
+    border: 1px solid #DCDFE6;
+    border-radius: 4px;
+    padding-top: 50px;
     .contextMenu-wrapper {
       position: fixed;
       z-index: 99;
@@ -2336,7 +2341,6 @@ import { svgToBase64 } from '@/utils/svgToblob'
       left: -9999px;
       background: #fff;
       padding: 10px 0;
-      /* border: 1px solid #999; */
       box-shadow: 0 1px 4px #999;
     }
     #link-reference{
@@ -2346,6 +2350,9 @@ import { svgToBase64 } from '@/utils/svgToblob'
       left: -99999px;
       background-color: transparent;
     }
+    #sand-chart-container{
+      flex: 1;
+    }
     .x6-graph-scroller {
       flex: 1;
     }
@@ -2372,8 +2379,6 @@ import { svgToBase64 } from '@/utils/svgToblob'
         }
       }
       .x6-widget-minimap{
-        // min-width:300px;
-        // min-height:200px;
         width: auto !important;
         height: auto !important;
       }