eta_front/src/views/sandbox_manage/sandFlowNew/index.vue

<template>
  <div id="sand-edit-container" class="sand-edit-container">
    <span class="slide-icon slide-right" @click="slideHandle" v-show="isSlideLeft">
      <i class="el-icon-d-arrow-right"></i>
    </span>
    <div class="sand-toolbar" v-show="!isSlideLeft">
      <span class="slide-icon slide-left" @click="slideHandle">
        <i class="el-icon-d-arrow-left"></i>
      </span>
      <el-tabs v-model="activeToolTabName" stretch class="sand-toolbar-tabs">
        <el-tab-pane label="元素库" name="元素库" id="element">
          <div class="sand-elements-tab">
            <div class="sand-elements sand-elements-line">
              <span>线条</span>
              <div class="elements-row" >
                <img src="~@/assets/img/sand_new/no-arrow-straight.png" :draggable="true" @dragstart="edgeDragStart('noArrowStraight',$event)" />
                <img src="~@/assets/img/sand_new/single-arrow-straight.png" :draggable="true" @dragstart="edgeDragStart('singleArrowStraight',$event)" />
                <img src="~@/assets/img/sand_new/double-arrow-straight.png" :draggable="true" @dragstart="edgeDragStart('doubleArrowStraight',$event)"/>
                <img src="~@/assets/img/sand_new/no-arrow.png" :draggable="true" @dragstart="edgeDragStart('noArrowBend',$event)"/>
                <img src="~@/assets/img/sand_new/single-arrow.png" :draggable="true" @dragstart="edgeDragStart('singleArrowBend',$event)"/>
                <img src="~@/assets/img/sand_new/double-arrow.png" :draggable="true" @dragstart="edgeDragStart('doubleArrowBend',$event)"/>
                <img src="~@/assets/img/sand_new/no-arrow-round.png" :draggable="true" @dragstart="edgeDragStart('noArrowRoundBend',$event)"/>
                <img src="~@/assets/img/sand_new/single-arrow-round.png" :draggable="true" @dragstart="edgeDragStart('singleArrowRoundBend',$event)"/>
                <img src="~@/assets/img/sand_new/double-arrow-round.png" :draggable="true" @dragstart="edgeDragStart('doubleArrowRoundBend',$event)"/>
              </div>
            </div>
            <div class="sand-elements sand-elements-shape">
              <span>基本形状</span>
              <div class="elements-row">
                <div class="elements-shape-item" v-for="shape in myNodes" :key="shape.key">
                  <div 
                    :style="shape.styles" 
                    @mousedown="dragStart(shape,$event)">
                    {{shape.label}}
                  </div>
                </div>
              </div>
            </div>
            <div class="sand-elements sand-elements-mind">
              <span>思维导图</span>
              <div class="elements-row-mind">
                <img src="~@/assets/img/sand_new/mindmap-right.png" :draggable="true" @dragstart="edgeDragStart('singleMindmap',$event)"/>
                <img src="~@/assets/img/sand_new/mindmap-double.png" :draggable="true" @dragstart="edgeDragStart('doubleMindmap',$event)"/>
              </div>
            </div>
          </div>

        </el-tab-pane>
        <el-tab-pane label="风格" name="风格" id="style">
          <div class="sand-style-tab">
            <div class="sand-style-tab-item" :class="styleActive==1?'active':''" @click="changeStyle(1)" :draggable="false">
              <img src="~@/assets/img/sand_new/style-blue-light.png" />
            </div>
            <div class="sand-style-tab-item" :class="styleActive==2?'active':''" @click="changeStyle(2)" :draggable="false">
              <img src="~@/assets/img/sand_new/style-blue.png" />
            </div>
            <div class="sand-style-tab-item" :class="styleActive==3?'active':''" @click="changeStyle(3)" :draggable="false">
              <img src="~@/assets/img/sand_new/style-black.png" />
            </div>
            <div class="sand-style-tab-item" :class="styleActive==4?'active':''" @click="changeStyle(4)" :draggable="false">
              <img src="~@/assets/img/sand_new/style-red.png" />
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="sand-main">
      <div class="sand-main-top">
        <div class="sand-mainTop-form">
          <el-input
            v-model="sandSaveParams.Name"
            style="width: 240px; margin-right: 20px"
            placeholder="请输入逻辑图名称">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
          <el-popover
            placement="bottom"
            width="400"
            popper-class="classify-popper"
            trigger="click"
            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>
        </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="copySandHandle" style="margin-right: 20px;min-width: 120px;"
          v-permission="permissionBtn.sandboxPermission.sandbox_addMy">复制图片</el-button>
          <el-button type="primary" size="large" @click="saveChart(null)" style="min-width: 120px;" v-permission="permissionBtn.sandboxPermission.sandbox_saveView">保存</el-button>
        </div>
      </div>
      <!-- <div class="sand-main-body"> -->
        <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">
                    <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)"/>
              </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>
                </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="styleOptions.startArrow?'':'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="styleOptions.endArrow?'':'style-acitve'">
                    无
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
            
          </div>
          <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.filter(it => it.show)" :key="menu.key" @click.native="handleContext(menu.key)">
                <i :class="menu.icon" v-if="menu.icon" /> 
                {{menu.label}}
              </el-dropdown-item>
            </dropdown-menu>
				  </div>
          <el-popover
            placement="top"
            trigger="manual"
            v-model="popoverVisible">
            <div id="link-popover" :style="{height:popoverFlod?'20px':'unset'}">
              <div class="link-box">
                <div v-for="item in checkedLinkList" :key="item.RId" class="link-item" @click="navigateTo(item)">
                  {{ item.Name }}
                </div>
              </div>
              <img src="~@/assets/img/sand_new/arrow_black_down.png" class="link-fold" 
              :style="{transform:popoverFlod?'':'rotate(180deg)'}" v-show="checkedLinkList.length>1"
              @click="foldLink"/>
            </div>
            <div id="link-reference" slot="reference"></div>
          </el-popover>
        </div>
      <!-- </div> -->
    </div>
    <!-- 添加链接 -->
    <el-dialog :modal-append-to-body='false' title="添加链接" :visible.sync="addLinkShow" 
    :close-on-click-modal="false" width="872px" top="5vh">
      <div class="add-link-box">
        <div class="link-box-option">
          <el-select v-model="addLinkSearchParams.linkType" placeholder="链接类型" style="width: 240px;" @change="changeLinkType">
            <el-option :label="item.label" :value="item.value" v-for="item in linkTypeList" :key="item.value"></el-option>
          </el-select>
          <el-select v-if="addLinkSearchParams.linkType==1"
            v-model="search_dataBaseId"
            v-loadMore="dataBaseSearchLoad"
            ref="searchRef"
            :filterable="!search_dataBaseId"
            remote
            clearable
            placeholder="指标ID/指标名称"
            style="width: 240px"
            :remote-method="dataBaseSearch"
            @click.native="dataBaseInputFocus"
          >
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
            <el-option
              v-for="item in dataBaseOptions"
              :key="item.EdbInfoId"
              :label="item.EdbName"
              :value="item.EdbInfoId"
            >
            </el-option>
          </el-select>
          <el-select v-else-if="addLinkSearchParams.linkType==2"
            v-model="search_dataBaseId"
            v-loadMore="dataBaseSearchLoad"
            ref="searchRef"
            :filterable="!search_dataBaseId"
            remote
            clearable
            placeholder="图表名称"
            style="width: 240px"
            :remote-method="dataBaseSearch"
            @click.native="dataBaseInputFocus"
          >
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
            <el-option
              v-for="item in dataBaseOptions"
              :key="item.ChartInfoId"
              :label="item.ChartName"
              :value="item.ChartInfoId"
            >
            </el-option>
          </el-select>
          <el-input v-else v-model="reportKeyWord" @input="searchReport"
          placeholder="标题 / 创建人" style="width: 240px;" clearable >
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
        </div>
        <div class="link-box-content">
          <!-- 指标 -->
          <div class="link-content-dataIndex" v-if="addLinkSearchParams.linkType==1 && databaseTableData && databaseTableData.length>0">
            <el-table :data="databaseTableData" border style="box-shadow: rgba(155, 170, 219, 0.2) 0px 3px 6px;">
              <el-table-column label="指标Id" align="center">
                <template slot-scope="scope">{{ scope.row.EdbCode }}</template>
              </el-table-column>
              <el-table-column label="指标名称" align="center" width="200">
                <template slot-scope="scope">{{ scope.row.EdbName }}</template>
              </el-table-column>
              <el-table-column label="频度" align="center" width="50">
                <template slot-scope="scope">{{ scope.row.Frequency }}</template>
              </el-table-column>
              <el-table-column label="单位" align="center">
                <template slot-scope="scope">{{ scope.row.Unit }}</template>
              </el-table-column>
              <el-table-column label="起始时间" align="center" width="100">
                <template slot-scope="scope">{{ scope.row.StartDate }}</template>
              </el-table-column>
              <el-table-column label="更新时间" align="center" width="160">
                <template slot-scope="scope">{{ scope.row.ModifyTime }}</template>
              </el-table-column>
              <el-table-column label="来源" align="center">
                <template slot-scope="scope">{{ scope.row.SourceName }}</template>
              </el-table-column>
              <el-table-column label="操作" align="center" width="50">
                <template slot-scope="scope">
                  <span class="delete-button">删除</span>
                </template>
              </el-table-column>
            </el-table>
            <ul 
              class="value-ul" 
              ref="valueUl" 
              @scroll="databaseScrollHandle" 
              v-show="databaseList.length">
              <li
                class="value-item"
                v-for="item in databaseList"
                :key="item.EdbDataId"
              >
                <span class="value-label">
                  <span style="position: relative;">
                    <i class="new-tag" v-if="databaseTableData[0].LatestDate===item.DataTime"></i>
                    {{item.DataTime}}
                  </span>
                </span>
                <span :class="['value-label',{'predict-act': databaseTableData[0].DataInsertConfig.Date===item.DataTime}]" style="min-width:200px;text-align:center;">
                  <span :class="['value-style',{'predict-act': databaseTableData[0].DataInsertConfig.Date===item.DataTime}]">{{item.Value}}</span>
                </span>
              </li>
              <li class="nodata value-item" v-if="!databaseList.length">暂无数据</li>
            </ul>
          </div>
          <div class="link-content-chartIndex" v-else-if="addLinkSearchParams.linkType==2 && this.chartInfo && this.chartInfo.ChartInfoId">
            <div class="chart-name">{{ this.chartInfo.ChartName }}</div>
            <Chart :options="options" ref="chartRef" />
          </div>
          <div class="link-content-dataIndex" v-else-if="addLinkSearchParams.linkType==3 && this.reportList.length>0">
            <el-table :data="this.reportList" border style="margin-bottom: 10px;" ref="reportTable"
            @select="reportSelect" @select-all="reportSelect"> 
              <el-table-column type="selection" width="40" align="center"></el-table-column>
              <el-table-column label="报告标题" align="center" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span >{{ scope.row.Title }}</span>
                  <span  v-if="scope.row.MsgSendTime">
                    ({{ scope.row.MsgSendTime.substring(5, 7)}}{{ scope.row.MsgSendTime.substring(8, 10) }})
                  </span>
                  <span v-else-if="scope.row.PublishTime">
                    ({{ scope.row.PublishTime.substring(5, 7)}}{{ scope.row.PublishTime.substring(8, 10) }})
                  </span>
                  <span v-else-if="scope.row.CreateTime">
                    ({{ scope.row.CreateTime.substring(5, 7)}}{{ scope.row.CreateTime.substring(8, 10) }})
                  </span>
                </template>
              </el-table-column >
              <el-table-column label="发布时间" align="center">
                <template slot-scope="scope">
                  <span>{{scope.row.PrePublishTime?scope.row.PrePublishTime:scope.row.PublishTime}}</span>
                </template>
              </el-table-column>
            </el-table>
            <m-page :page_no="reportParams.CurrentIndex" :pageSize="5" :total="reportTotal" @handleCurrentChange="pageChange"/>
          </div>
          <tableNoData text="暂无数据" v-else/>
        </div>
        <div class="link-box-tags">
          <div class="link-box-tag" v-for="(item,index) in checkedLinkList" :key="item.RId">
            <span @dblclick.stop="editLinkName(item)" v-if="!item.editing" @click="linkClick(item)">{{ item.Name }}</span>
            <el-input v-else @blur="editLinkNameFinish(item)" 
              v-model.trim="editingLabel" class="label-edit-input" ref="labelEditInput"/>
            <img src="~@/assets/img/sand_new/delete_outline_1.png" @click="linkDelete(item,index)">
          </div>
        </div>
        <div class="link-box-buttons">
          <el-button type="info" style="width:120px;color:#333333;background-color:#F4F8FE" @click="addLinkShow=false">取消</el-button>
          <el-button type="primary" style="width:120px;margin-left: 30px;" @click="saveLink">确定</el-button>
        </div>
      </div>
		</el-dialog>
  </div>
</template>

<script>
// 路由的name 属性在main.js中更改
// import '@antv/x6-vue-shape'
import { myGraph } from '../common/gragh';
import { myNodes,myNodeOption } from '../common/node';
import { myEdgeOption } from '../common/edge';
import { Addon } from '@antv/x6'
import mindmap from "../common/mindmap"
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';
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 { chartSetMixin } from '../../dataEntry_manage/mixins/chartPublic'
import Chart from '../../dataEntry_manage/components/chart.vue'
import mPage from "@/components/mPage.vue";
import { svgToBase64 } from '@/utils/svgToblob'

  export default {
    name:"sandFlowIndex",
    components:{
      DropdownMenu,tree,Chart,mPage
    },
    data() {
      return {
        contextMenuOption,
        graph: null,
        dnd:null,
        initData: {},
        activeToolTabName:"元素库",
        addType:"",
        styleActive:1,
        canUndo:false,
        canRedo:false,
        mindmapDataUse:[],
        mindmapAssistData:{
          mindmapDataRecoverUse:[],//用于恢复撤销和重做时被删除的思维导图数据
          // mindmapDataRecoverPtr:-1, //当前索引
        },
        sandSaveParams:{
          Name:'',
          SandboxClassifyId:'',
          SandboxId:+this.$route.query.SandboxId || 0,
        },
        selectClassifyShow:false,
        zTreeObj:{},
        selectSetting:{
          data:{
            key:{
              name:"SandboxClassifyName",
              children:"Children"
            }
          },
          view:{
            showLine:false,
            showIcon:false,
            selectedMulti:false
          }
        },
        treeData:[],
        lockLoding: null,
        loopTimer:null,
        // 添加链接弹窗
        addLinkShow:false,
        addLinkSearchParams:{
          linkType:1
        },
        linkTypeList:[
          {value:1,label:"ETA指标/预测指标"},
          {value:2,label:"ETA图库"},
          {value:3,label:"ETA研报"}
        ],
        //添加链接：指标
        search_dataBaseId:'',
        dataBaseParams:{
          pages:1,
          searchText:'',
          search_have_more:false
        },
        dataBaseOptions:[],

        databaseTableData:[],
        databaseList:[],
        databaseHaveMore:false,
        databasePageNo:1,
        chartInfo:{},
        edbData:[],
        options:{},
        reportKeyWord:'',
        reportParams:{
          CurrentIndex:1,
          PageSize:5,
        },
        reportList:[],
        selections:[],
        checkedLinkList:[],
        reportTotal:0,
        editingLabel:'',
        activeItemRId:'',
        popoverVisible:false,
        popoverDom:null,
        popoverTriggerDom:null,
        popoverTimeout:null,
        linkNode:null,
        popoverFlod:true,
        isSlideLeft:false
      }
    },
    mixins:[mindmap,chartSetMixin],
    watch: {
      initData(newval) {
        // console.log(newval)
        if(!this.graph){
          this.init()
        }
        this.$nextTick(()=>{
          this.graph.fromJSON(newval);
          this.graph.zoomToFit()
        })
      },
      /* 选中搜索指标 展开目录 选中指标 展示数据 */
      search_dataBaseId(newval) {
        if (newval) {
          if(this.addLinkSearchParams.linkType==1){
            let search_obj = this.dataBaseOptions.find(
              (item) => item.EdbInfoId === newval
            );
            // console.log(search_obj,'search_obj');
            if(search_obj){
              this.checkedLinkList.push({
                RId:this.addLinkSearchParams.linkType+'-'+search_obj.EdbInfoId,
                Id:search_obj.EdbInfoId,
                Name:search_obj.EdbName,
                Type:this.addLinkSearchParams.linkType,
                editing:false,
                databaseType:search_obj.EdbInfoType, //0 普通指标 | 1 预测指标
                detailParams:{
                  code:search_obj.UniqueCode,
                  id:search_obj.EdbInfoId,
                  classifyId:search_obj.ClassifyId
                }
              })
              this.activeItemRId=this.addLinkSearchParams.linkType+'-'+search_obj.EdbInfoId
              this.initGetData()
            }
          }else{
            let search_obj = this.dataBaseOptions.find(
              (item) => item.ChartInfoId === newval
            );
            if(search_obj){
              this.checkedLinkList.push({
                RId:this.addLinkSearchParams.linkType+'-'+search_obj.ChartInfoId,
                Id:search_obj.ChartInfoId,
                Name:search_obj.ChartName,
                Type:this.addLinkSearchParams.linkType,
                editing:false,
                detailParams:{
                  code:search_obj.UniqueCode,
                  id:search_obj.ChartInfoId
                }
              })
              this.activeItemRId=this.addLinkSearchParams.linkType+'-'+search_obj.ChartInfoId
              this.getChartDetail(search_obj.ChartInfoId)
            }
          }
        }
      },
      edbData: {
        handler(newval, oldval) {
          newval.length && !this.chartInfo.WarnMsg && this.setChartOptionHandle(newval);
        },
        deep: true,
    },
	  },
    computed:{
      myNodes(){
        return myNodes
      },
      myEdgeOption(){
        return myEdgeOption
      },
      familyOptions(){
        return familyOptions
      },
      fontSizeOptions(){
        return fontSizeOptions
      },
      colorsOptions(){
        return colorsOptions
      },
      lineHeightOptions(){
        return lineHeightOptions
      },
      ...mapState({
        selectCells: state => state.sand.selectCells,
        styleOptions: state => state.sand.styleOptions,
        toolStatus:state => state.sand.toolStatus,
      }),
      nodeTextDisable(){
        return this.toolStatus.nodeDisabled && this.toolStatus.textDisabled
      },
      nodeEdgeDisable(){
        return this.toolStatus.nodeDisabled && this.toolStatus.edgeDisabled
      }
    },
    created(){
      this.getSandboxClassify();
      this.$route.query.SandboxId && this.getGraphData(this.$route.query.SandboxId)
    },
    mounted(){
      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];
      this.popoverTriggerDom = $('#link-reference')[0];
      
      this.popoverDom.addEventListener('mouseenter',this.clearPopoverTimeout)
      this.popoverDom.addEventListener('mouseleave',this.closePopover)
      
      // Graph.registerNode("link-popover", {
      //   inherit: "vue-shape",
      //   component: popover,
      // });
    },
    beforeDestroy(){
      clearInterval(this.loopTimer)
      document.getElementById('sand-mainBody-chart').removeEventListener("dragover",this.edgeDragover)
      document.getElementById('sand-mainBody-chart').removeEventListener("drop",this.edgeDrop)
      this.popoverDom.removeEventListener('mouseenter',this.clearPopoverTimeout)
      this.popoverDom.removeEventListener('mouseleave',this.closePopover)
    },
    methods: {
      getSandboxClassify(){
        sandInterface.getSandboxClassifyOnly().then(res=>{
          if (res.Ret === 200) {
            this.treeData=res.Data.AllNodes || []
          }
        })
      },
      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=>{
          if(res.Ret == 200 && res.Data){
            this.sandSaveParams.SandboxId=res.Data.SandboxId
            this.sandSaveParams.Name=res.Data.Name
            this.sandSaveParams.SandboxClassifyId=res.Data.SandboxClassifyId
            this.initData = JSON.parse(res.Data.Content)
            this.mindmapDataUse = res.Data.MindmapData?JSON.parse(res.Data.MindmapData):[]
            this.autoSave();
          }
        })
      },
      /* 编辑页 自动保存 */
      autoSave() {
        // return 
        this.loopTimer = setInterval(() => {
          if(!this.sandSaveParams.Name || !this.sandSaveParams.SandboxClassifyId) return;
          const { Name, SandboxClassifyId } = this.sandSaveParams;
          sandInterface.sandboxSaveV2({
            SandboxId:this.sandSaveParams.SandboxId,
            Name,
            SandboxClassifyId,
            Content: JSON.stringify(this.graph.toJSON()),
            PicUrl:'',
            MindmapData:this.mindmapDataUse.length>0?JSON.stringify(this.mindmapDataUse):''
          }).then((res) => {
            if(res.Ret !== 200) return
          });
        }, 10000);
      },
      // 初始化画布
      init() {
        const graph = new myGraph('sand-chart-container',this.getMindmapDataUse,this.mindmapAssistData);
        this.graph = graph;
        
        this.graph.history.on('change', (args) => { 
          // console.log(args,'change-history');
          this.canUndo = this.graph.canUndo()
          this.canRedo = this.graph.canRedo()
          // console.log(this.canUndo,this.canRedo);
        })
        this.graph.history.on('undo', (args) => { 
          // console.log(args,'undo-history');
          // let ids=[]
          let mindmapNodes=args.cmds.filter(it => it.data.props && it.data.props.shape.indexOf('mindmap')!=-1 && it.data.node)
          if(!(mindmapNodes && mindmapNodes.length>0)) return 
          console.log(mindmapNodes,'mindmapNodes');
          let mindmapUndoType=mindmapNodes[0].event
          if(mindmapUndoType=="cell:added"){
            this.mindmapRecoverRemove(mindmapNodes)
          }else if(mindmapUndoType=="cell:removed"){
            this.mindmapRecoverAdd()
          }
          // console.log(this.mindmapDataUse);
        })
        this.graph.history.on('redo', (args) => { 
          // console.log(args,'redo-history');
          // let ids=[]
          let mindmapNodes=args.cmds.filter(it => it.data.props && it.data.props.shape.indexOf('mindmap')!=-1 && it.data.node)
          if(!(mindmapNodes && mindmapNodes.length>0)) return 
          // console.log(mindmapNodes,'mindmapNodes');
          let mindmapUndoType=mindmapNodes[0].event
          if(mindmapUndoType=="cell:added"){
            this.mindmapRecoverAdd()
          }else if(mindmapUndoType=="cell:removed"){
            this.mindmapRecoverRemove(mindmapNodes)
          }
          // console.log(this.mindmapDataUse,'mindmapDataUse');
        })
        this.graph.on('node:mouseenter', ({ node, e }) => {
          // console.log(node);
          let data = node.data
          this.linkNode = node
          let isMindmap = node.shape.indexOf('mindmap')!=-1
          this.contextMenuOption.map(item =>{
            if(item.key=='copy'){
              item.show=!isMindmap
            }
          })
          if(data && data.linkData && data.linkData.length>0){
            this.popoverFlod = data.linkFold
            this.popoverVisible=false
            clearTimeout(this.popoverTimeout)
            this.popoverTimeout=null
            let currentLinks = data.linkData
            //指标id
            let edbInfoIdList = data.linkData.filter(it => it.Type==1).map(it => it.Id)
            // 图库id
            let chartInfoIdList = data.linkData.filter(it => it.Type==2).map(it => it.Id)
            // 报告id
            let reportIdList = data.linkData.filter(it => it.Type==3).map(it => it.Id)
            sandInterface.sandboxLinkCheck({EdbInfoIdList:edbInfoIdList,ChartInfoIdList:chartInfoIdList,ReportIdList:reportIdList}).then(res=>{
              if(res.Ret == 200){
                let EdbInfoIdList = res.Data.EdbInfoIdList || []
                let ChartInfoIdList = res.Data.ChartInfoIdList || []
                let ReportIdList = res.Data.ReportIdList || []
                this.checkedLinkList = currentLinks.filter(link =>{
                  return EdbInfoIdList.includes(link.Id) || ChartInfoIdList.includes(link.Id) || ReportIdList.includes(link.Id)
                })
                let clinetPositon=this.graph.localToClient(node.position())
                let size=node.size()
                // console.log(clinetPositon.y,'clinetPositon');
                // console.log(this.popoverTriggerDom,'domdomdom');
                this.popoverTriggerDom.style.left = clinetPositon.x+size.width/2 + 'px';
                this.popoverTriggerDom.style.top = clinetPositon.y + 'px';
                this.popoverVisible=true
                if(!(this.checkedLinkList.length>0)){
                  if(item.key=='addLink'){
                    item.label='添加链接'
                  }else if(item.key=='deleteLink'){
                    item.show=false
                  }
                }
              }
              this.contextMenuOption.map(item =>{
                if(item.key=='addLink'){
                  item.label='编辑链接'
                }else if(item.key=='deleteLink'){
                  item.show=true
                }
              })
            })
          }else{
            this.contextMenuOption.map(item =>{
              if(item.key=='addLink'){
                item.label='添加链接'
              }else if(item.key=='deleteLink'){
                item.show=false
              }
            })
            // console.log(this.contextMenuOption,'contextMenuOption');
          }
        })
      
        this.graph.on('node:mouseleave', ({ node, e }) => {
          if(!this.popoverTimeout){
            this.popoverTimeout= setTimeout(()=>{
              this.popoverVisible=false
              this.popoverTriggerDom.style.left = '-99999px';
              this.popoverTriggerDom.style.top = '-99999px';
              this.popoverTimeout=null
            },500)
          }

        })

        this.graph.on('node:change:position', (args) => { 
          if(args.node.data && args.node.data.linkData && args.node.data.linkData.length>0
          &&this.popoverVisible){
            // console.log(args.node.data.linkData);
            this.changePopoverPositon(args)

          }
        })

        this.dnd = new Addon.Dnd({
          target: this.graph,
          animation: true,
          validateNode() {
            return true;
          },
        });
        this.setGraph()
		  },
      getMindmapDataUse(){
        return this.mindmapDataUse
      },
      dragStart(data,e) {
        // console.log(data,e,"触发了")
        const { key,shape } = data;
        
        const	node = this.graph.createNode({
          shape,
          ...myNodeOption(key),
        });
        this.dnd.start(node,e);
      },
      edgeDragStart(type,e){
        this.addType = type
      },
      edgeDragover(e){
        e.preventDefault()
      },
      edgeDrop(e){
        if(!this.addType){
          return 
        }
        // console.log(this.addType,e);
        // console.log(this.graph);
        let position = this.graph.clientToLocal({x:e.clientX,y:e.clientY})
        if(this.addType.indexOf("Mindmap")!==-1){
          //插入思维导图
          // console.log("插入思维导图");
          this.generateMindmapData(position,this.addType)
          this.mindMapRender(this.mindmapDataUse.length-1)
        }else{
          this.graph.addEdge({
            shape:'edge',
            ...this.myEdgeOption(this.addType,position.x,position.y)
          });
        }
      },
      generateMindmapData(position,addType){
        let beId=this.mindmapDataUse.length>0?
        parseInt(this.mindmapDataUse[this.mindmapDataUse.length-1].mindmapData.id)+1+'':'1'
        let mindmapData={
          id: beId,
          type: 'topic',
          label: '中心主题',
          width: 160,
          height: 50,
          direction:'double',
          children: [
            {
              id: beId+'-1',
              type: 'topic-branch',
              label: '分支主题1',
              width: 100,
              height: 40,
              direction:'left',
              children: [
                {
                  id: beId+'-1-1',
                  type: 'topic-child',
                  label: '子主题1',
                  width: 60,
                  height: 30,
                  direction:'left',
                },
                {
                  id: beId+'-1-2',
                  type: 'topic-child',
                  label: '子主题2',
                  width: 60,
                  height: 30,
                  direction:'left',
                },
              ],
            },
            {
              id: beId+'-2',
              type: 'topic-branch',
              label: '分支主题2',
              width: 100,
              height: 40,
              direction:'right',
            },
          ],
        }
        this.mindmapDataUse.push({mindmapData,position,addType})
      },
      changeStyle(activeNum){
        this.$store.commit("sand/SET_CELL_STYLE",activeNum)
        let styleData=styleSettings[activeNum-1]

        let cells = this.graph.getCells()
        // console.log(cells);

        for (let i = 0; i < cells.length; i++) {
          const element = cells[i];
          // console.log(element);
          if(element.shape.indexOf("edge") !=-1){
            element.setAttrs({
              line:{
                stroke:styleData.lineColor
              }
            })
          }if(element.data && element.data.key == 'text'){
            element.setAttrs({
              text:{
                fill:styleData.textColor
              }
            })
          }else{
            element.setAttrs({
              body:{
                fill:styleData.backgroundColor,
                stroke:styleData.borderColor,
              },
              text:{
                fill:styleData.color
              }
            })
          }
        }
        this.styleActive = activeNum
      },
      /* 右键事件 */
      handleContext(key) {
        if(key=="addLink"){
          this.addLinkDialogOpen()
        }else if(key=="deleteLink"){
          this.deleteLink()
        }else{
          contextEvent(this.graph, key,this.mindmapDataUse,this.mindmapAssistData);
        }
        this.hideContextMenu();
      },

      /* 隐藏右键menu */
      hideContextMenu() {
        const dom = $('#contextMenu-wrapper')[0];
        dom.style.left = '-9999px';
        dom.style.top = '-9999px';
      },
      addLinkDialogOpen(){
        const select_cell = this.graph.getSelectedCells()[0]
        // console.log(select_cell);
        if(select_cell){
          this.checkedLinkList = select_cell.data ? select_cell.data.linkData ||[]:[]
        }else{
          this.checkedLinkList=[]
        }
        // console.log(this.checkedLinkList);
        this.addLinkSearchParams.linkType=1
        this.changeLinkType()
        this.addLinkShow=true
      },
      deleteLink(){
        const select_cell = this.graph.getSelectedCells()[0]
        if(select_cell){
          select_cell.data.linkData=[]
          this.$message.success('清除链接成功')
        }
      },
      saveLink(){
        // console.log("保存链接",select_cell);
        const select_cell = this.graph.getSelectedCells()[0]
        if(select_cell.data){
          select_cell.data.linkData = this.checkedLinkList
          select_cell.data.linkFold = true
        }else{
          select_cell.setData({linkData:this.checkedLinkList})
          if(!select_cell.data.linkFold){
            select_cell.data.linkFold=true
          }
        }
        this.$message.success("链接保存成功")
        this.addLinkShow=false
      },
      // backList(){
      //   // this.sandSaveParams.SandboxId this.sandSaveParams.Name
      //   this.$router.push({path:"/sandlist",query:{SandboxName:'阿巴阿巴A1',SandboxId:142}})
      // },
      copySandHandle: _.debounce(function() {
        const { cells } = this.graph.toJSON();
        if(!cells.length) return this.$message.warning('当前画布无可复制内容');

        this.lockLoding = this.$loading({
          lock: true,
          text: '复制图片中...',
          target: '.right-wrapper',
          spinner: 'el-icon-loading',
          background: 'rgba(255, 255, 255, 0.8)'
        });
        this.graph.toSVG(async(dataUri) => {
          const canvas = document.createElement("canvas");
          const ctx = canvas.getContext("2d");
          const img = new Image();
          img.crossOrigin = "Anonymous";
          img.src = svgToBase64(dataUri);
          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);
            ctx.drawImage(img, 0, 0);
            if(window.ClipboardItem) {
              canvas.toBlob(async (blob) => {
                  const data = [new ClipboardItem({ [blob.type]: blob })]; 
                  await navigator.clipboard.write(data).then(
                  () => {
                      this.$message.success('复制成功！')
                  },
                  () => {
                      this.$message.warning('浏览器不支持')
                  }
                  ).finally(()=>{
                      this.lockLoding && this.lockLoding.close();
                  });
              });
            }else {
              this.lockLoding && this.lockLoding.close();
              this.$message.warning('当前协议暂不支持，仅支持https协议')
            }	
          }
        },{
          preserveDimensions:true,//让svg为实际图片大小
          beforeSerialize:(svg)=>{
            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) 
            //设置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)
            // textNode.setAttribute('font-size','16px')
            // textNode.setAttribute('font-style','italic')
            // textNode.innerText = '来源：弘则研究'
            // gNode.appendChild(textNode)
              },
          copyStyles:false,
          stylesheet: `
              svg{
                  background-color:white;
              }
            .x6-port {
                visibility: hidden;
            }` 
            
        })
      },500),
      saveChart: _.debounce( function(callback=null) {
        if(!this.sandSaveParams.Name) 
          return this.$message.warning('请填写逻辑图名称');
        if(!this.sandSaveParams.SandboxClassifyId) 
          return this.$message.warning('请选择所属分类');

        if(!this.graph.toJSON().cells.length) return this.$message.warning('请绘制画布内容');

        const { Name, SandboxClassifyId,SandboxId} = this.sandSaveParams;

        this.lockLoding = this.$loading({
          lock: true,
          text: '保存中...',
          target: '.sand-edit-container',
          spinner: 'el-icon-loading',
          background: 'rgba(255, 255, 255, 0.8)'
        });
        // return
        const { cells } = this.graph.toJSON();
        this.graph.toSVG(async (dataUri) => {
          const params = new FormData();
          params.append('Img',dataUri)
          const { Data } = await dataBaseInterface.uploadImgSvg(params);
          // if(!Data){
          //   this.lockLoding.close();
          //   return;
          // }
          let SandboxId = this.sandSaveParams.SandboxId
          // console.log({
          //   SandboxId,
          //   Name,
          //   SandboxClassifyId: Number(SandboxClassifyId),
          //   Content: JSON.stringify(this.graph.toJSON()),
          //   PicUrl: Data?Data.ResourceUrl:'',
          //   SvgData: dataUri,
          //   MindmapData:JSON.stringify(this.mindmapDataUse)
          // });
          // return 
          const { Ret , Data : sandData} = await sandInterface.sandboxSaveV2({
            SandboxId,
            Name,
            SandboxClassifyId: Number(SandboxClassifyId),
            Content: JSON.stringify(this.graph.toJSON()),
            PicUrl: Data?Data.ResourceUrl:'',
            SvgData: dataUri,
            MindmapData:JSON.stringify(this.mindmapDataUse)
          })

          if(Ret !== 200){
            this.lockLoding.close();
            return;
          }
          this.$message.success(`${SandboxId ? '编辑成功' : '保存成功'}`);
          this.lockLoding.close();
          //如果是新增,直接跳转到编辑页面
          if(!SandboxId){
            this.$router.replace({
              path: '/sandflow',
              query: {
                SandboxId:sandData.SandboxId,
              },
            });
          }
          
          callback && callback();
        },{
          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+60)
            svg.setAttribute('height',height+60) 
            //设置viewBox使图像居中
            svg.setAttribute('viewBox',`${x-30} ${y-30} ${width+60} ${height+60}`)
            // // 在图表右下方 加上"来源：弘则研究"字样
            // let gNode = svg.getElementsByClassName('x6-graph-svg-viewport')[0]
            // 去掉不该截图的添加图标
            let leftImg = svg.getElementsByClassName('left-topic-image')
            for (let i = 0; i < leftImg.length; i++) {
              const element = leftImg[i];
              element.parentElement.removeChild(element)
              i--
            }
            let rightImg = svg.getElementsByClassName('right-topic-image')
            for (let i = 0; i < rightImg.length; i++) {
              const element = rightImg[i];
              element.parentElement.removeChild(element)
              i--
            }
            // let textNode = document.createElement('text')
            // textNode.setAttribute('x',(x-tx+width)/zoom-85)
            // textNode.setAttribute('y',(y-ty+height)/zoom+27)
            // textNode.setAttribute('font-size','16px')
            // textNode.setAttribute('font-style','italic')
            // textNode.innerText = '来源：弘则研究'
            // gNode.appendChild(textNode)
              },
          copyStyles:false,
          stylesheet: `
              svg{
                  background-color:white;
              }
            .x6-port {
                visibility: hidden;
            }
            ` 
        })
          
      },500),
      toolClickOptions(type,disabled){
        // 设置元素属性的时候请一起设置，分几步设置，撤销的时候就要分几步。或者使用事务来设置
        if(disabled) return
        let value = arguments[2]
        switch (type) {
          case 'undo':
            this.graph.undo()
            break;
          case 'redo':
            this.graph.redo()
            break;
          case 'changeFamily':
            this.styleOptions.fontF = value
            this.setGraphStyle('text/fontFamily',value)
            break;
          case 'changeSize':
            this.styleOptions.fontS = value
            this.setGraphStyle('text/fontSize',value)
            break;
          case 'changeWeight':
            this.styleOptions.fontW = this.styleOptions.fontW=='normal'?'bold':'normal'
            this.setGraphStyle('text/fontWeight')
            break;
          case 'changeFontStyle':
            this.styleOptions.fontStyle = this.styleOptions.fontStyle=='normal'?'italic':'normal'
            this.setGraphStyle('text/fontStyle')
            break;
          case 'changeDecoration':
            this.styleOptions.textDecoration = this.styleOptions.textDecoration=='none'?'underline':'none'
            this.setGraphStyle('text/textDecoration')
            break;
          case 'changeColor':
            this.setGraphStyle('text/fill',value)
            break;
          case 'changeLineHeight':
            this.styleOptions.lineHeight = value
            this.setGraphStyle('text/lineHeight',value)
            break;
          case 'changeTextAlign':
            this.styleOptions.textAlign = value
            this.setGraphStyle('text/textAnchor',value)
            break;
          case 'changeBackgroundColor':
            this.setGraphStyle('body/fill',value)
            break;
          case 'changeLineColor':
            this.setGraphStyle('body/stroke',value)
            break;
          case 'changeLineWidth':
            this.styleOptions.lineWidth = value
            this.setGraphStyle('body/strokeWidth',value)
            break;
          case 'changeStrokeDasharray':
            this.styleOptions.lineStyle = value
            this.setGraphStyle('body/strokeDasharray',value)
            break;
          case 'changeRouter':
            this.styleOptions.connectStyle = value
            this.setGraphStyle('router/name',value)
            break;
          case 'changeSourceMarker':
            this.styleOptions.startArrow = value
            this.setGraphStyle('line/sourceMarker',value)
            break;
          case 'changeTargetMarker':
            this.styleOptions.endArrow = value
            this.setGraphStyle('line/targetMarker',value)
            break;
          default:
            break;
        }
      },
      setGraphStyle(attr,value){
        // console.log(attr,value);
        let styleValue = value
        let attrReal = attr
        let refXValue;
        let currentAttr= this.selectCells[0].getAttrs()
        if(attr.indexOf('fontWeight')!=-1){
          styleValue = currentAttr.text.fontWeight == "bold"?'normal':'bold'
        }else if(attr.indexOf('fontStyle')!=-1){
          styleValue = currentAttr.text.fontStyle == "italic"?'normal':'italic'
        }else if(attr.indexOf('textDecoration')!=-1){
          styleValue = currentAttr.text.textDecoration == "underline"?'none':'underline'
        }else if(attr.indexOf('textAnchor')!=-1){
          //需要特殊设置
          if(styleValue=='start'){
            refXValue='0%'
          }else if(styleValue=='middle'){
            refXValue=0.5
          }else{
            refXValue='100%'
          }
        }
        // console.log(this.selectCells[0].attr(attr),styleValue,'styleValue');

        if(this.selectCells[0].shape.indexOf('edge')!=-1){
          // 边的情况
          attrReal=attrReal.replace('body','line')
        }
        // console.log(attrReal,'attrReal');
        if(this.selectCells[0].attr(attrReal) === styleValue){
          return 
        }
        this.selectCells.map(cell=>{
          // lineHeight和fontsize 是一个倍数关系，每一个都可能不一样。
          if(attr.indexOf('lineHeight')!=-1){
            let fontSizeCurrent = cell.getAttrs().text.fontSize
            cell.setAttrs({
              text:{
                relativeLineHeight:styleValue, //设置相对行高
                lineHeight:styleValue*fontSizeCurrent //设置行高
              }
            })
          }else if(attr.indexOf('fontSize')!=-1){
            let relativeLineHeightCurrent = cell.getAttrs().text.relativeLineHeight || 1.3
            cell.setAttrs({
              text:{
                fontSize:styleValue,//设置字号
                lineHeight:styleValue*relativeLineHeightCurrent //设置行高
              }
            })
          }else if(attr=='body/stroke'){
            // 线条颜色和边框颜色
            cell.attr(attrReal,styleValue)
          }else if(attr=='body/strokeWidth'){
            // 线条粗细和边框粗细
            cell.attr(attrReal,styleValue)
          }else if(attr=='body/strokeDasharray'){
            // 线条样式和边框样式
            cell.attr(attrReal,styleValue)
          }else if(attr=='router/name'){
            // 1-直线  2-弯折线 3-圆角弯折线
            let routerName=styleValue==1?'normal':'manhattan'
            let connectorName=styleValue==3?'rounded':'normal'
            this.graph.startBatch('setConnetorStyle')
            if(routerName=='normal'){
              // 变成直线，清除路径点
              cell.setVertices([])
            }else{
              // 变弯折线 添加路径点
              let sourcePoint = cell.getSourcePoint() //起始点
              let targetPoint = cell.getTargetPoint() //终止点
              let fisrtPoint = {x:(sourcePoint.x+targetPoint.x)/2,y:sourcePoint.y}
              let secondPoint = {x:(sourcePoint.x+targetPoint.x)/2,y:targetPoint.y}
              cell.setVertices([fisrtPoint,secondPoint])
            }
            cell.setRouter({name:routerName,args: {padding: {left: 10}}})
            cell.setConnector({name:connectorName,args: { radius: 8 }})
            this.graph.stopBatch('setConnetorStyle')
          }else if(attr.indexOf('textAnchor')!=-1){
            // 居左居中居右设置
            // cell.attr('text/refX',refXValue)
            cell.setAttrs({
              text:{
                refX:refXValue,//设置相对位置
                textAnchor:styleValue //设置对齐方式
              }
            })
          }else{
            cell.attr(attr,styleValue)
          }

        })
      },
      // -------------------------------添加链接
      changeLinkType(){
        this.search_dataBaseId=''
        this.dataBaseOptions=[]
        this.dataBaseParams={
          pages:1,
          searchText:'',
          search_have_more:false
        }

        this.databaseTableData=[]
        this.databaseList=[]
        this.databaseHaveMore=false
        this.databasePageNo=1
        
        this.chartInfo={}
        this.edbData=[]

        this.reportKeyWord=''
        this.reportList=[]
      },
      /* 搜索 */
      dataBaseSearch(query) {
        this.dataBaseParams.pages = 1;
        this.dataBaseParams.searchText = query;
        this.dataBaseSearchApi(this.dataBaseParams.searchText)
      },
      // 加载更多
      dataBaseSearchLoad() {
        if(!this.dataBaseParams.search_have_more) return;
        this.dataBaseSearchApi(this.dataBaseParams.searchText,++this.dataBaseParams.pages);
      },
      /* 聚焦获取当前检索 */
      dataBaseInputFocus(e) {
        this.dataBaseParams.pages = 1;
        this.dataBaseParams.searchText = e.target.value;
        if(this.dataBaseParams.searchText) {
          this.dataBaseSearchApi(this.dataBaseParams.searchText);
        }else {
          this.searchOptions = [];
          this.dataBaseParams.search_have_more=false
        }

      },
      dataBaseSearchApi(query,page=1) {
        if(this.addLinkSearchParams.linkType==1){
          sheetInterface.searchTarget({
            KeyWord:query,
            CurrentIndex: page
          }).then(res => {
            if(res.Ret !== 200) return
            const { List,Paging } = res.Data;
            this.dataBaseParams.search_have_more = page < Paging.Pages;
            this.dataBaseOptions = page === 1 ? List : this.dataBaseOptions.concat(List);
          })
        }else{
          dataBaseInterface.chartSearchByEs({
            Keyword: query,
            IsShowMe:false,
            CurrentIndex: page
          })
          .then((res) => {
            if (res.Ret !== 200) return
            const { List,Paging } = res.Data;
            this.dataBaseParams.search_have_more = page < Paging.Pages;
            this.dataBaseOptions = page === 1 ? List : [...this.dataBaseOptions,...List];
          });
        }

      },
      initGetData() {
        this.databasePageNo = 1;
        if(this.$refs.edb_detail_data){
          this.$refs.valueUl.scrollTop=0
        }
        this.getDatabaseList();
      },
      getDatabaseList(){
        dataBaseInterface.targetList({
          PageSize: 20,
          CurrentIndex: this.databasePageNo,
          EdbInfoId: this.search_dataBaseId,
        }).then(res => {
          if(res.Ret === 200) {
            if(res.Data) {
              this.databaseTableData = [res.Data.Item] || [];
              this.databaseHaveMore =  this.databasePageNo < res.Data.Paging.Pages ? true : false;
              this.databaseList = this.databasePageNo === 1 ? (res.Data.Item.DataList || []) : this.databaseList.concat(res.Data.Item.DataList);
            }else {
              this.databaseTableData = [];
              this.databaseList = [];  
            }
          }
        })
      },
      databaseScrollHandle:_.throttle(function() {
        let scrollTop = this.$refs.valueUl.scrollTop;
        let clientHeight = this.$refs.valueUl.clientHeight;
        let scrollHeight = this.$refs.valueUl.scrollHeight;
        if(scrollTop===0) return
        if(scrollTop + clientHeight >= scrollHeight-10 && this.databaseHaveMore){
          this.databasePageNo++
          this.getDatabaseList()
        }
		  },200),
      async getChartDetail(ChartInfoId) {
        // console.log(ChartInfoId);
        const res = await dataBaseInterface.getChartInfoById({ChartInfoId})
        if (res.Ret !== 200) return;
        this.chartInfo = res.Data.ChartInfo || {}
        this.edbData = res.Data.EdbInfoList|| []

        const chartTypeMap = {
          7: this.initBarData, //柱形图
          10: this.initSectionScatterData //截面散点
        }

        chartTypeMap[this.chartInfo.ChartType] && chartTypeMap[this.chartInfo.ChartType](res.Data);

      },
      editLinkName(item){
        this.editingLabel = item.Name
        item.editing=true
        this.$nextTick(() => {
          this.$refs.labelEditInput[0].focus();
        });
      },
      linkClick(item){
        if(this.activeItemRId == item.RId) return
        this.activeItemRId = item.RId
        // console.log(item);
        if(item.Type==3){
          this.$message.info('研报类型的暂无回显')
        }else if(item.Type==1){
          this.addLinkSearchParams.linkType=item.Type
          this.changeLinkType()
          this.initGetData() 
        }else if(item.Type==2){
          this.addLinkSearchParams.linkType=item.Type
          this.changeLinkType()
          this.getChartDetail(item.Id)
        }


        // console.log('回显');
      },
      linkDelete(item,index){
        if(this.activeItemRId == item.RId){
          this.activeItemRId=""
          this.changeLinkType()
        }
        if(item.Type==3){
          let deleteId=this.selections.filter(it=> it.Id==item.Id)
          // console.log(deleteId);
          if(deleteId[0]){
            this.$refs.reportTable && this.$refs.reportTable.toggleRowSelection(deleteId[0],false)
          }
        }
        this.checkedLinkList.splice(index,1)
      },
      editLinkNameFinish(item){
        if (this.editingLabel) {
          item.editing=false
          item.Name = this.editingLabel
        } else {
          this.$message.warning('不能为空');
        }
      },
      searchReport(){
        this.reportParams.CurrentIndex=1
        if(!this.reportKeyWord){
          this.reportList=[]
          this.reportTotal=0
        }else{
          this.getReportList()
        }
      },
      getReportList(){
        let params={
          CurrentIndex: this.reportParams.CurrentIndex,
          PageSize: this.reportParams.PageSize,
          KeyWord:this.reportKeyWord,
          State:2
        }
        reportlist(params).then((res) => {
          if (res.Ret === 200) {
            this.reportList = res.Data.List || [];
            this.reportTotal = parseInt(res.Data.Paging.Totals);
          }
        });    
      },
      pageChange(page_no){
        this.reportParams.CurrentIndex = page_no;
        this.getReportList();
      },
      reportSelect(selection){
        this.selections=selection
        // console.log(selection);
        let allIds = this.reportList.map(it => {
          return it.Id
        })
        let simpleSelections = selection.map(it => {
          return {Id:it.Id,Code:it.ReportCode,Name:it.Title}
        })

        let unselectIds=[]

        if(simpleSelections.length>0){
          allIds.map(id =>{
            if(simpleSelections.every(sele => id!=sele.Id )){
              unselectIds.push(id)
            }
          })
        }else{
          unselectIds=allIds
        }
        // console.log(simpleSelections,unselectIds);
        //没有就增加
        simpleSelections.map(item =>{
          let rId = this.addLinkSearchParams.linkType+'-'+item.Id
          if(this.checkedLinkList.every(sele => rId!=sele.RId )){
            this.checkedLinkList.push({
              RId:rId,
              Id:item.Id,
              Name:item.Name,
              Type:this.addLinkSearchParams.linkType,
              editing:false,
              detailParams:{id:item.Id,code:item.Code}
            })
          }
          // else{
          //   this.$message.warning(`${item.Name}已添加，请勿重复添加`)
          // }
        })
        //有就去掉
        unselectIds.map(item =>{
          let rId = this.addLinkSearchParams.linkType+'-'+item
          let index = this.checkedLinkList.findIndex(link => rId==link.RId)
          // console.log(index);
          if(index!=-1){
            this.checkedLinkList.splice(index,1)
          }
        })
        // console.log(this.checkedLinkList,'this.checkedLinkList');
      },
      foldLink(){
        this.popoverFlod=!this.popoverFlod 
        if(this.linkNode){
          this.linkNode.data.linkFold = this.popoverFlod
        }
        this.popoverVisible=false
        this.$nextTick(()=>{
          this.popoverVisible=true
        })
      },
      clearPopoverTimeout(){
        clearTimeout(this.popoverTimeout)
        this.popoverTimeout=null 
      },
      closePopover(){
        this.popoverVisible=false
      },
      navigateTo(item){
        // console.log(item,'item');
        if(item.Type == 1){
          if(item.databaseType==0){
            // 普通指标
            const { href } = this.$router.resolve({ path: '/database',query:item.detailParams});
            window.open(href, '_blank');
          }else{
            // 预测指标
            const { href } = this.$router.resolve({ path: '/predictEdb',query:item.detailParams});
            window.open(href, '_blank');
          }
        }else if(item.Type == 2){
          // 跳转到图库详情
          const { href } = this.$router.resolve({ path: '/chartsetting',query:item.detailParams});
          window.open(href, '_blank');
        }else if(item.Type == 3){
          // 跳转到研报
          const { href } = this.$router.resolve({ path: '/reportdtl',query:item.detailParams});
          window.open(href, '_blank');
        }
      },
      changePopoverPositon:_.throttle(function(args){
        this.popoverVisible=false
        let clinetPositon=this.graph.localToClient(args.current)
        let size=args.node.size()
        // console.log(this.popoverTriggerDom,'domdomdom');
        this.popoverTriggerDom.style.left = clinetPositon.x+size.width/2 + 'px';
        this.popoverTriggerDom.style.top = clinetPositon.y + 'px';
        this.$nextTick(()=>{
          this.popoverVisible=true
        })
      },200) ,
      mindmapRecoverRemove(mindmapNodes){
        let shouldOperations=[]
        this.mindmapDataUse.map((item,index)=>{
          let levelIds = mindmapNodes.filter(mindMap => mindMap.data.id.startsWith(item.mindmapData.id)).map(mindMap => mindMap.data.id)
          // console.log(levelIds,'levelIds');
          if(!(levelIds && levelIds.length>0)) return 
          // console.log(levelIds,'levelIds');
          let mindMapIds=[...levelIds]
          for (let i = 0; i < levelIds.length; i++) {
            const element = levelIds[i]
            mindMapIds=mindMapIds.filter( id => id.indexOf(element) !=0 || id==element)
          }
          // console.log(mindMapIds,'mindMapIds');
          shouldOperations.push(mindMapIds)
        })
        // 重做删除时 恢复数据指针前进
        console.log(this.canRedo,'this.canRedo');
        if(!this.canRedo){
          console.log('canredo no');
          this.mindmapAssistData.mindmapDataRecoverUse=[JSON.stringify(this.mindmapDataUse)]
        }else{
          console.log('canredo');
          this.mindmapAssistData.mindmapDataRecoverUse.push(JSON.stringify(this.mindmapDataUse))
        }

        console.log(this.mindmapAssistData.mindmapDataRecoverUse,this.mindmapDataUse,this.mindmapAssistData.mindmapDataRecoverUse.length);
        shouldOperations.map(it =>{
          it.map(it1 =>{
            this.deleteMindmapData(it1,this.mindmapDataUse)
          })
        })
      },
      mindmapRecoverAdd(){
        // 重做添加时 恢复数据指针前进
        console.log(this.mindmapAssistData.mindmapDataRecoverUse.length,this.mindmapAssistData.mindmapDataRecoverUse);
        let recoverData = this.mindmapAssistData.mindmapDataRecoverUse.pop()
        console.log(JSON.parse(recoverData) ,this.mindmapAssistData.mindmapDataRecoverUse.length,this.mindmapAssistData.mindmapDataRecoverUse,'回复的数据');
        if(recoverData) this.mindmapDataUse=JSON.parse(recoverData) 
        console.log(this.mindmapDataUse,'回复后');
      },
      deleteMindmapData(id,data){
        // console.log(id,data,'id,data');
        // return 
        let ids = id.split('-')
        let mindmapDataIndex = data.findIndex(mindmap => mindmap.mindmapData.id == ids[0])
        if(ids.length==1){
          data.splice(mindmapDataIndex,1)
          return 
        }

        let mindmapData = data[mindmapDataIndex].mindmapData
        let findId = ids[0]
        for (let i = 1; i < ids.length-1; i++) {
          const element = ids[i];
          findId = findId+'-'+element
          mindmapData=mindmapData.children.find(it => it.id==findId)
        }
        let endId = ids[ids.length-1]
        // console.log(mindmapData.children,'mindmapData.children');
        let endIndex = mindmapData.children.findIndex(it => it.id == findId+'-'+endId)
        mindmapData.children.splice(endIndex,1)
        // console.log(data);
      },
      /* 向左收起 展开 */
      slideHandle() {
        this.isSlideLeft = !this.isSlideLeft;
      },
    },
  }
</script>

<style lang="scss" scoped>
  #sand-edit-container{
    height: calc(100vh - 120px);
    min-height: 600px;
    display: flex;
    flex-wrap: nowrap;
    .sand-toolbar{
      min-width: 400px;
      width: 400px;
      background-color: white;
      border-radius: 4px;
      border: 1px solid #DCDFE6;
      height: 100%;
      box-sizing: border-box;
      margin-right: 20px;
      padding-bottom: 20px;
      position: relative;
      .sand-elements-tab{
        padding: 0 30px;
        overflow: auto;
        height: calc(100vh - 220px);
        .sand-elements{
          padding: 30px 0 20px;
          border-bottom: 1px solid #C8CDD9 ;
          span{
            display: inline-block;
            margin-bottom: 10px;
            font-size: 16px;
            color: #999999;
          }
          .elements-row{
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            margin-right: -10px;
            .elements-shape-item,img{
              margin-right: 20px;
              margin-bottom: 8px;
              cursor: pointer;
            }
            img{
              height: 18px;
              width: 18px;
            }
          }
        }
        .sand-elements-mind{
          border-bottom: none;
          padding-bottom: 0;
        }

      }
      .elements-row-mind{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        img{
          width: 100%;
          margin-bottom: 20px;
        }
      }
      .sand-style-tab{
        width: 100%;
        padding: 20px 30px;
        display: flex;
        flex-wrap: wrap;
        box-sizing: border-box;
        justify-content: space-between;
        .sand-style-tab-item{
          box-sizing: border-box;
          border: 1px solid #C8CDD9;
          padding: 10px 0;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          width: calc(50% - 7px);
          margin-bottom: 14px;
          border-radius: 4px;
          img{
            width: 64px;
            height: 54px;
          }
        }

        .active{
          border: 1px solid #0052D9;
        }
      }
    }
    .sand-main{
      flex: 1;
      display: flex;
      flex-direction: column;
      .sand-main-top{
        padding: 20px 20px 10px;
        display: flex;
        // flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        background-color: white;
        box-shadow: 0px 2px 12px 0px rgba($color: #000000, $alpha: 0.08);
        border: 1px solid #DCDFE6;
        border-radius: 4px;
        margin-bottom: 20px;
        .sand-mainTop-form{
          margin-bottom: 10px;
          margin-right: 20px;
          white-space: nowrap;
        }
        .sand-mainTop-option{
          display: flex;
          align-items: center;
          margin-bottom: 10px;
          .sand-option-linkShow{
            display: flex;
            align-items: center;
            margin-right: 30px;
            cursor: pointer;
            img{
              height: 16px;
              margin-right: 4px;
            }
          }
        }
      }
      .sand-mainBody-chart{
        .sand-mainBody-tool{
          position: absolute;
          height: 50px;
          width: 100%;
          background-color: #F5F6F7;
          box-sizing: border-box;
          border-radius: 4px;
          display: flex;
          align-items: center;
          padding-right: 10px;
          z-index: 1;
          top: 0;
          left: 0;
          .sand-tool-item{
            margin-left: 20px;
            cursor: pointer;
            .dropdown-box{
              position: relative;
              img{
                height: 16px;
                width: 16px;
              }
              .dropdown-content{
                display: flex;
                align-items: center;

                .dropdown-content-text{
                  width: 30px;
                  white-space: nowrap;
                  overflow: hidden;
                  margin-right: 5px;
                }
              }
              .disabled-item{
                background-color: transparent;
                cursor: not-allowed;
                position: absolute;
                top: 0;
                right: 0;
                left: 0;
                bottom: 0;
                z-index: 1;
              }
            }
          }
          .img-box{
            height: 16px;
            width: 17px;
            img{
              height: 16px;
              width: 17px;
            }
          }
          .sand-tool-img{
            height: 16px;
            min-width: 16px;
            position: relative;
            img{
              height: 16px;
              width: 16px;
            }
          }
          .tool-disabled{
            color: #C8CDD9;
            cursor:not-allowed;
          }
        }
      }
    }
    .add-link-box{
      padding: 15px 40px 35px;
      .link-box-option{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 30px;
      }
      .link-box-content{
        // height:300px;
        // max-height:300px;
        margin-bottom: 30px;
        .link-content-dataIndex{
          display: flex;
          flex-direction: column;
          .value-ul {
            flex-grow: 1;
            overflow-y: auto;
            margin-top: 10px;
            height: 200px;
            border-bottom: 1px solid #EBEFF6;
            //max-height: calc(100vh - 495px);
            //overflow-y: auto;
            .value-item {
              /* width: 100%; */
              padding: 10px 0;
              border: 1px solid #dcdfe6;
              border-bottom: none;
              display: flex;
              justify-content: space-around;
              >span{
                padding:0 16px;
                box-sizing: border-box;
              }
              .value-label {
                position: relative;
                color: #666;
                .value-style{
                  /* background-color: #ECF2FE;
                  color: #0052D9; */
                  padding:5px;
                  border-radius: 4px;
                  &.predict-act {
                    color: orange;
                  }
                }
                &.date{
                  &::after{
                    content: '';
                    position:absolute;
                    right:0;
                    top:-14px;
                    height:calc(100% + 28px);
                    width:1px;
                    background-color: #dcdfe6;
                  }
                }
              }
              .predict-act {
                color: orange;
              }
              .new-tag {
                width: 6px;
                height: 6px;
                display: inline-block;
                position: absolute;
                left: -12px;
                top: 50%;
                transform: translateY(-50%);
                border-radius: 50%;
                background: #f00;
              }
            }
            .nodata {
              text-align: center;
              padding: 40px 0;
              color: #999;
            }
          }
          .delete-button{
            color: #AD352F;
            font-size: 14px;
            cursor: pointer;
          }
        }
        .link-content-chartIndex{
          .chart-name{
            font-size: 16px;
            text-align: center;
            color: #333333;
          }
        }
      }
      .link-box-tags{
        display: flex;
        align-items: center;
        overflow-x: auto;
        .link-box-tag{
          display: flex;
          align-items: center;
          padding: 0 8px;
          height: 30px;
          max-width: 250px;
          background-color: #F8F8F8;
          margin-right: 30px;
          cursor: pointer;
          &:last-child{
            margin-right: 0;
          }
          span{
            color: #666666;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          img{
            height: 16px;
            width: 16px;
            margin-left: 8px;
          }
        }
      }
      .link-box-buttons{
        margin-top: 60px;
        display: flex;
        align-items: center;
        justify-content: center;

      }
    }
  }
  #link-popover{
    display: flex;
    justify-content: space-between;
    transition: all 0.3s ease;
    overflow: hidden;
    .link-box{
      .link-item{
        &:hover{
          text-decoration: underline;
          color: #0052D9;
          cursor: pointer;
        }
      }
    }
    .link-fold{
      transition: all 0.3s ease;
      height: 16px;
      width: 16px;
      cursor: pointer;
    }
  }

  .slide-icon {
    padding: 20px 0;
    /* display: block; */
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 99;
    &:hover {
      background-color: rgba(0, 0, 0, 0.05);
    }
    &.slide-left {
      right: 0;
    }
    &.slide-right {
      left: 0;
    }
  }
  @media screen and (max-width:1680px) {
    #sand-edit-container{
      .sand-toolbar{
        min-width: 320px;
        width: 320px;
      }
    }
  }
</style>
<style lang="scss">
  .sand-toolbar-tabs{
    .el-tabs__header{
      padding-top: 16px;
      box-shadow: 0px 2px 12px 0px rgba($color: #000000, $alpha: 0.08);
    }
  }
  .el-cascader{
    .el-input{
      width: 240px;
    }
  }
  .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;
      top: -9999px;
      left: -9999px;
      background: #fff;
      padding: 10px 0;
      box-shadow: 0 1px 4px #999;
    }
    #link-reference{
      position: fixed;
      z-index: -1;
      top: -99999px;
      left: -99999px;
      background-color: transparent;
    }
    #sand-chart-container{
      flex: 1;
    }
    .x6-graph-scroller {
      flex: 1;
    }

    .x6-port-body {
      display: none;
    }

    /* reseize 框样式 */
    .x6-widget-transform {
      .x6-widget-transform-resize {
        border-radius: 0;
      }
    }
    .minimap{
      position:absolute;
      right:6px;
      bottom:6px;
      box-sizing: border-box;
      .x6-widget-minimap-viewport{
        border-color: red;
        .x6-widget-minimap-viewport-zoom{
          border-color: red;
        }
      }
      .x6-widget-minimap{
        width: auto !important;
        height: auto !important;
      }
    }
  }
  .left-topic-image,.right-topic-image {
    visibility: hidden;
    width: 0;
    cursor: pointer;
  }
  .x6-node:hover .left-topic-image {
    width: unset;
    visibility: visible;
  }
  .x6-node:hover .right-topic-image {
    width: unset;
    visibility: visible;
  }
  .x6-node-selected rect {
    stroke-width: 2px;
  }
  #sand-mainBody-tool{
    .el-select{
      .el-input{
        .el-input__inner{
          border: none;
          background-color: #F5F6F7;
          padding-left: 0;
          padding-right: 30px;
        }
      }
    }
  }
  .style-acitve{
    color: #0052D9;
  }
  .style-acitve-back{
    background-color: #C5CBDA;
  }

.vue-giant-tree{
  li{
    ul{
      padding: 0 0 0 10px!important;
    }
    .button{
      z-index: 1;
      height: 30px;
      width: 20px;
      &::before{
        border:none!important;
        top: 50%!important;
        left: 50%!important;
        transform: translate(-50%,-50%)!important;
        height: 16px!important;
        width: 16px!important;
      }
    }
    .button.noline_close{
      &::before{
        content: url('../../../assets/img/set_m/slide_black.png')!important;
      }
    }
    .button.noline_open{
      &::before{
        content: url('../../../assets/img/set_m/down_black.png')!important;
      }
    }
    a{
      width: calc(100% - 22px);
      height: 30px!important;
      line-height: 30px!important;
      .node_name{
        width: calc(100% - 6px);
        color: #333333!important;
        border-radius: 0!important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .curSelectedNode{
      position: relative;
      z-index: 0;
      display: inline-flex;
      flex-wrap: nowrap;
      align-items: center;
      .node_name{
        flex: 1;
        color: unset;
        background-color: transparent;
        &::after{
          content: '';
          position: absolute;
          top: 0;
          left: -22px;
          height: 30px;
          width: calc(100% + 22px);
          background-color: #ECF2FE;
          z-index: -1;
        }
      }
      .custom-button-zone{
        display: flex!important;
      }
    }
  }

}
  .classify-popper{
    height: 400px;
    overflow: auto;
  }
  .classify-cascader-popper{
    display: none;
  }
  .label-edit-input{
    width: 220px!important;
    .el-input__inner{
      height: 26px;
      padding: 10px;
    }
  }
</style>