vue2 + SimpleMindMap 制作思维导图

vue2 + SimpleMindMap 制作思维导图
该代码包含SimpleMindMap已知的所有功能，有需要的小伙伴可自行copy，框架使用el-ementui。其中有些图标是阿里巴巴矢量图的图片，可自行进行替换。保姆级教程
以下是vue文件：

<template><div style="width: 100%;height: 100%;"><div style="width: 100%;height: 100%;"><div class="mind-map-container" id="mind-map-container" ref="mindMapContainer"><div class="mindmap-tools" v-show="!readonly"><div class="tools-bk"><div style="float: left;"><el-buttonv-if="!isStart"size="small"@click="back"><i class="el-icon-back" style="font-weight: bold;font-size: 15px;"></i><div style="margin-top: 5px;">后退</div></el-button></div><div style="float: left;margin-left: 5px;"><el-buttonv-if="!isEnd"size="small"@click="forward"><i class="el-icon-right" style="font-weight: bold;font-size: 15px;"></i><div style="margin-top: 5px;">前进</div></el-button></div><div style="float: left;margin-left: 5px;"><el-button:disabled="activeNodes.length === 0"size="small"@click="addNode"><i class="el-icon-circle-plus" style="font-size: 15px;"></i><div style="margin-top: 5px;">同级节点</div></el-button></div><div style="float: left;margin-left: 5px;"><el-button:disabled="activeNodes.length === 0"size="small"@click="addChildNode"><i class="el-icon-share" style="font-size: 15px;"></i><div style="margin-top: 5px;">子节点</div></el-button></div><div style="float: left;margin-left: 5px;"><el-button:disabled="activeNodes.length === 0"size="small"@click="dropNode"><i class="el-icon-delete-solid" style="font-size: 15px;"></i><div style="margin-top: 5px;">删除节点</div></el-button></div><div style="float: left;margin-left: 5px;"><el-button:disabled="activeNodes.length === 0"size="small"@click="beizhu()"><i class="el-icon-s-comment" style="font-size: 15px;"></i><div style="margin-top: 5px;">备注</div></el-button></div><div style="float: left;margin-left: 5px;"><el-button:disabled="activeNodes.length === 0"size="small"@click="addGeneralization"><i class="el-icon-collection" style="font-size: 15px;"></i><div style="margin-top: 5px;">添加概要</div></el-button></div><div style="float: left;margin-left: 5px;"><el-button:disabled="activeNodes.length === 0":type="activedPanel === 'icon' ? 'primary' : 'default'"size="small"@click="activePanel('icon')"><i class="el-icon-s-marketing" style="font-size: 15px;"></i><div style="margin-top: 5px;">设置图标</div></el-button></div></div><div class="tools-bk"><div style="float: left;"><el-button:type="activedPanel === 'theme' ? 'primary' : 'default'"size="small"@click="activePanel('theme')"><i class="el-icon-collection-tag" style="font-size: 15px;"></i><div style="margin-top: 5px;">选择主题</div></el-button></div><div style="float: left;margin-left: 5px;"><el-button:type="activedPanel === 'layout' ? 'primary' : 'default'"size="small"@click="activePanel('layout')"><i class="el-icon-set-up" style="font-size: 15px;"></i><div style="margin-top: 5px;">选择结构</div></el-button></div><div style="float: left;margin-left: 5px;"><el-button:type="activedPanel === 'base' ? 'primary' : 'default'"size="small"@click="activePanel('base')"><i class="el-icon-setting" style="font-size: 15px;"></i><div style="margin-top: 5px;">基础设置</div></el-button></div></div><div class="tools-bk"><div style="float: left;"><el-button size="small" @click="exportPng"><div><i class="el-icon-upload" style="font-size: 15px;"></i><div style="margin-top: 5px;">导出图片</div></div></el-button></div><div style="float: left;margin-left: 5px;"><el-button size="small" @click="getFullData"><div><i class="el-icon-circle-plus-outline" style="font-size: 15px;"></i><div style="margin-top: 5px;">保存</div></div></el-button></div>
<!--                        <el-button class="my-button" size="small" @click="exportPng"><div class="my-button"><i class="el-icon-upload" style="font-size: 15px;"></i><div>导出图片</div></div></el-button><el-button class="my-button" size="small" @click="getFullData"><div class="my-button"><i class="el-icon-circle-plus-outline" style="font-size: 15px;"></i><div>保存</div></div></el-button>--></div></div><divid="mindMapContainer"@[e-mail]@[e-mail]></div><div class="active-panel" v-show="!readonly && activedPanel !== ''"><!-- 图标 --><div class="active-panel-box" v-if="activedPanel === 'icon'"><div class="title">选择图标<span class="close" @click="activedPanel = ''">×</span></div><div class="content icon"><div class="icon-group" v-for="group of nodeIconList" :key="group.type"><div class="group-title">{{ group.name }}</div><div class="group-content"><spanclass="icon-item":class="activeNodes.length === 0 ? 'disabled' : ''"v-for="icon of group.list":key="icon.name"@click="setIcon(group.type, icon.name)"v-html="icon.icon"></span></div></div></div></div><!-- 主题 --><div class="active-panel-box" v-else-if="activedPanel === 'theme'"><div class="title">选择主题<span class="close" @click="activedPanel = ''">×</span></div><div class="content"><liv-for="item of themes":key="item.value"@click="changeTheme(item.value)":class="theme === item.value ? 'active' : ''"><img :src="`/graph/themes/${item.value}.jpg`" /><div>{{ item.label }}</div></li></div></div><!-- 结构 --><div class="active-panel-box" v-else-if="activedPanel === 'layout'"><div class="title">选择结构<span class="close" @click="activedPanel = ''">×</span></div><div class="content"><liv-for="item of layouts":key="item.value"@click="changeLayout(item.value)":class="layout === item.value ? 'active' : ''"><img :src="`/graph/structures/${item.value}.png`" /><div>{{ item.label }}</div></li></div></div><!-- 基础设置 --><div class="active-panel-box" v-else-if="activedPanel === 'base'"><div class="title">基础设置<span class="close" @click="activedPanel = ''">×</span></div><div class="content" style="margin: 10px"><div>背景设置</div><div v-for="(color, index) in colorArr" @click="changeColor(color, 1)" :key="index" :style="{ backgroundColor: color, width: '17px',height: '17px', display: 'inline-block', margin: '5px', cursor: 'pointer' }"></div><div class="block" style="display: flex;align-items: center;font-size: 15px;"><div style="float: left">更多颜色</div><el-color-picker v-model="backgroundColor" style="float: left;margin-left: 10px;" @change="changeColor('', 2)"></el-color-picker></div><div class="fgx"></div><div style="margin-top: 15px;">连线</div><div class="lx-config"><div class="block" style=""><div style="float: left">颜色</div><el-color-picker v-model="lineColor" style="float: left;margin-left: 10px;" @change="changeColor('', 3)"></el-color-picker></div><div style="overflow: hidden;float: right;margin-left: 10px;width: 60%;display: flex;align-items: center;"><div style="float: left">宽度</div><el-select v-model="lineWidth" @change="changeColor('', 4)" placeholder="请选择" style="width:70%;float: left;margin-left: 10px;"><el-optionv-for="option in lineWidthoptions":key="option.value":value="option.value":label="option.label"><span:style="{display: 'inline-block',width: '30%',marginLeft: '15%',border: `${option.value}px solid black`, // 使用动态颜色（可选）backgroundColor: 'black', // 动态设置线条宽度borderBottomStyle: 'solid',}"></span></el-option></el-select></div><div style="overflow: hidden;float: left;display: flex;align-items: center;margin-top: 15px;"><div style="float: left">显示箭头</div><el-switch  @change="changeColor('', 5)"v-model="showLineMarker"active-color="#13ce66"inactive-color="#ff4949"></el-switch></div><div class="block" style="display: flex;align-items: center;float: right;width: 60%;margin-top: 10px;"><div style="float: left">风格</div><el-select v-model="lineStyle" @change="changeColor('', 6)" placeholder="请选择" style="width:70%;float: left;margin-left: 10px;"><el-optionv-for="option in lineStyleoptions":key="option.value":value="option.value":label="option.label"><span><img v-if="option.label == '直线'" style="width: 30px" src="/graph/map/zhilian.png"><img v-if="option.label == '曲线'" style="width: 30px" src="/graph/map/quxian.png"><img v-if="option.label == '直连'" style="width: 30px" src="/graph/map/zhixian.png"></span></el-option></el-select></div></div><div class="fgx"></div>
<!--                            <div style="margin-top: 5px;">节点设置</div><el-tabs type="border-card" style="margin-top: 5px;font-size: 13px;"><el-tab-pane label="根节点"><div style="overflow: hidden;margin-top: 5px;"><div style="float: left;align-items: center;display: flex;"><div>背景</div><el-color-picker v-model="root.fillColor" @change="rootColor(1)" style="margin-left: 10px;"></el-color-picker></div><div style="margin-left: 10%;float: left;align-items: center;display: flex;"><div>文字</div><el-color-picker v-model="root.color" @change="rootColor(2)" style="margin-left: 10px;"></el-color-picker></div><div style="float: right;align-items: center;display: flex;"><div>边框</div><el-color-picker v-model="root.borderColor" @change="rootColor(3)" style="margin-left: 10px;"></el-color-picker></div></div><div style="overflow: hidden;margin-top: 10px;"><table style="width: 100%;"><tr><td style="width: 15%;">圆角</td><td style="width: 35%;"><el-select v-model="root.borderRadius" @change="rootColor(4)" placeholder="请选择"><el-optionv-for="option in radiusOptions":key="option.value":value="option.value":label="option.label"></el-option></el-select></td><td style="width: 15%;">大小</td><td style="width: 35%;"><el-select v-model="root.fontSize" @change="rootColor(5)" placeholder="请选择"><el-optionv-for="option in fontSizeOptions":key="option.value":value="option.value":label="option.label"><span :style="{fontSize: `${option.value}px` }">{{ option.value }}</span></el-option></el-select></td></tr><tr><td colspan="4"></td></tr><tr><td colspan="4"></td></tr><tr style="margin-top: 10px;"><td>宽度</td><td colspan="3"><el-select v-model="root.borderWidth" @change="rootColor(6)" placeholder="请选择" style="width: 60%;"><el-optionv-for="option in lineWidthoptions":key="option.value":value="option.value":label="option.label"><span:style="{display: 'inline-block',width: '30%',marginLeft: '15%',border: `${option.value}px solid black`, // 使用动态颜色（可选）backgroundColor: 'black', // 动态设置线条宽度borderBottomStyle: 'solid',}"></span></el-option></el-select></td></tr></table></div></el-tab-pane><el-tab-pane label="二级"><div style="overflow: hidden;margin-top: 5px;"><div style="float: left;align-items: center;display: flex;"><div>背景</div><el-color-picker v-model="second.fillColor" style="margin-left: 10px;"></el-color-picker></div><div style="margin-left: 10%;float: left;align-items: center;display: flex;"><div>文字</div><el-color-picker v-model="second.color" style="margin-left: 10px;"></el-color-picker></div><div style="float: right;align-items: center;display: flex;"><div>边框</div><el-color-picker v-model="second.borderColor" style="margin-left: 10px;"></el-color-picker></div></div><div style="overflow: hidden;margin-top: 10px;"><table style="width: 100%;"><tr><td style="width: 15%;">圆角</td><td style="width: 35%;"><el-select v-model="second.borderRadius" placeholder="请选择"><el-optionv-for="option in radiusOptions":key="option.value":value="option.value":label="option.label"></el-option></el-select></td><td style="width: 15%;">大小</td><td style="width: 35%;"><el-select v-model="second.fontSize" placeholder="请选择"><el-optionv-for="option in fontSizeOptions":key="option.value":value="option.value":label="option.label"><span :style="{fontSize: `${option.value}px` }">{{ option.value }}</span></el-option></el-select></td></tr><tr><td colspan="4"></td></tr><tr><td colspan="4"></td></tr><tr style="margin-top: 10px;"><td>宽度</td><td colspan="3"><el-select v-model="second.borderWidth" placeholder="请选择" style="width: 60%;"><el-optionv-for="option in lineWidthoptions":key="option.value":value="option.value":label="option.label"><span:style="{display: 'inline-block',width: '30%',marginLeft: '15%',border: `${option.value}px solid black`, // 使用动态颜色（可选）backgroundColor: 'black', // 动态设置线条宽度borderBottomStyle: 'solid',}"></span></el-option></el-select></td></tr></table></div></el-tab-pane><el-tab-pane label="三级"><div style="overflow: hidden;margin-top: 5px;"><div style="float: left;align-items: center;display: flex;"><div>背景</div><el-color-picker v-model="node.fillColor" style="margin-left: 10px;"></el-color-picker></div><div style="margin-left: 10%;float: left;align-items: center;display: flex;"><div>文字</div><el-color-picker v-model="node.color" style="margin-left: 10px;"></el-color-picker></div><div style="float: right;align-items: center;display: flex;"><div>边框</div><el-color-picker v-model="node.borderColor" style="margin-left: 10px;"></el-color-picker></div></div><div style="overflow: hidden;margin-top: 10px;"><table style="width: 100%;"><tr><td style="width: 15%;">圆角</td><td style="width: 35%;"><el-select v-model="node.borderRadius" placeholder="请选择"><el-optionv-for="option in radiusOptions":key="option.value":value="option.value":label="option.label"></el-option></el-select></td><td style="width: 15%;">大小</td><td style="width: 35%;"><el-select v-model="node.fontSize" placeholder="请选择"><el-optionv-for="option in fontSizeOptions":key="option.value":value="option.value":label="option.label"><span :style="{fontSize: `${option.value}px` }">{{ option.value }}</span></el-option></el-select></td></tr><tr><td colspan="4"></td></tr><tr><td colspan="4"></td></tr><tr style="margin-top: 10px;"><td>宽度</td><td colspan="3"><el-select v-model="node.borderWidth" placeholder="请选择" style="width: 60%;"><el-optionv-for="option in lineWidthoptions":key="option.value":value="option.value":label="option.label"><span:style="{display: 'inline-block',width: '30%',marginLeft: '15%',border: `${option.value}px solid black`, // 使用动态颜色（可选）backgroundColor: 'black', // 动态设置线条宽度borderBottomStyle: 'solid',}"></span></el-option></el-select></td></tr></table></div></el-tab-pane></el-tabs>--></div></div><!-- 大纲--><div class="active-panel-box" v-else-if="activedPanel === 'dagang'"><div class="title">大纲<span class="close" @click="activedPanel = ''">×</span></div><div style="height: 81%;width: 100%;overflow: auto;"><el-tree :data="dagangData"default-expand-allref="tree"node-key="uid"draggable="false":highlight-current="true":expand-on-click-node="false":allow-drag="checkAllowDrag"@node-click="handleNodeClick"></el-tree></div></div><!-- 快捷键--><div class="active-panel-box" v-else-if="activedPanel === 'kuaijiejian'"><div class="title">快捷键<span class="close" @click="activedPanel = ''">×</span></div><div style="height: 81%;width: 100%;overflow: auto;"><div style="margin-left: 10px;"><div>节点操作</div><div style="margin-top: 10px;font-size: 14px;color: #898989;"><table style="width: 100%;"><tbody><tr v-for="(item, index) in kuaijiejian" :key="index"><td style="width: 10%;padding-top: 10px;" v-html="item.img"></td><td style="width: 30%;padding-top: 8px;">{{ item.name }}</td><td style="text-align: right;;padding-top: 8px;padding-right: 10px;color: #c1c1c1">{{ item.caozuo }}</td></tr></tbody></table></div></div><div style="margin-left: 10px;"><div style="margin-top: 20px;">画布操作</div><div style="margin-top: 10px;font-size: 14px;color: #898989;"><table style="width: 100%;"><tbody><tr v-for="(item, index) in kuaijiejian2" :key="index"><td style="width: 10%;padding-top: 10px;" v-html="item.img"></td><td style="width: 30%;padding-top: 8px;">{{ item.name }}</td><td style="text-align: right;;padding-top: 8px;padding-right: 10px;color: #c1c1c1">{{ item.caozuo }}</td></tr></tbody></table></div></div></div></div></div><div class="mind-map-scale"><img style="width: 20px;margin: 5px;"@click="toggle_mini_map(showMiniMap == true? false : true)"src="/graph/map/ditu.png" alt="地图" title="地图" /><img style="width: 20px;margin: 5px;" src="/graph/map/qp.png" alt="全屏" title="全屏" @click="qp()" /><img style="width: 16px;margin: 5px;" src="/graph/map/gbqp.png" alt="关闭全屏" title="关闭全屏" @click="gbqp()" /><img style="width: 16px;margin: 5px;height: 20px;" src="/graph/map/shujiegou.png" alt="大纲" title="大纲" @click="activePanel('dagang')" /><img style="width: 20px;margin: 5px;" src="/graph/map/sypm.png" alt="回到根目录" title="回到根目录" @click="rootCenter"><img style="width: 20px;margin: 5px;" src="/graph/map/jianpan.png" alt="快捷键" title="快捷键" @click="activePanel('kuaijiejian')" /><img style="width: 20px;margin: 5px;" src="/graph/map/jia.png" alt="放大" title="放大" @click="zoomIn"><el-inputstyle="display: inline-block; width: 60px; text-align: center;margin-left: 0.5rem"v-model="showScale"readonly/><img style="width: 20px;margin: 5px;" src="/graph/map/jian.png" alt="缩小" title="缩小" @click="zoomOut"></div><div class="node-count"><div style="margin-left: 10px;margin-right: 10px;font-size: 13px;color: #b1b1b1;">节点&nbsp;{{ count }} 字数&nbsp;{{ nodeCount }}</div></div><div v-if="showContextMenu" class="context-menu" :style="{ top: `${menuPosition.y}px`, left: `${menuPosition.x}px` }"><ul><li @click="addChildTable">添加表</li><li @click="delChildTable">删除表</li><li @click="addChildNode">添加子节点</li><li @click="addNode">添加同级节点</li><li @click="dropNode">删除节点</li><li @click="upNode">上移节点</li><li @click="downNode">下移节点</li><li @click="copyNode">复制节点</li><li @click="pasteNode">粘贴节点</li></ul></div><!-- 备注--><div v-if="dialogVisible" class="beizhuVisible"><div class="beizhu-1"><div class="beizhu-title"><div class="beizhu-title-left">备注</div><div class="beizhu-title-right" @click="confirmGb()"><i class="el-icon-close"></i></div></div><el-inputv-model="note":rows="4"type="textarea"placeholder="请输入内容"style="margin-top: 30px;width: 96%;margin-left: 2%;"/><div class="beizhu-button"><el-button @click="confirmGb()">取消</el-button><el-button type="primary" @click="confirm">确定</el-button></div></div></div><div v-if="dialogVisible" @click="confirmGb()" class="beizhu-zzc"></div><!-- 添加表 --><div v-if="tableVisible" class="beizhuVisible" style="width: 80%;margin-left: 10%;height: 60vh;top: 10%;"><div class="beizhu-1" style="height: 100%;"><div class="beizhu-title"><div class="beizhu-title-left">表信息</div><div class="beizhu-title-right" @click="tableFirm()"><i class="el-icon-close"></i></div></div><div style="height: calc(100% - 150px);"><el-table:data="tableData"style="width: 100%;margin-bottom: 20px;height: 100%;overflow: auto;"bordershow-checkboxref="table":row-key="(row) => row.id":header-cell-class-name="cellClass"@selection-change="handleSelectionChange":tree-props="{children: 'children', hasChildren: 'hasChildren'}"><el-table-columntype="selection"align="center":selectable = "selectable"width="55"></el-table-column><el-table-columnprop="dictKey"label="表昵称"sortablewidth="280"></el-table-column><el-table-columnprop="dictValue"label="中文名称"sortablewidth="280"></el-table-column><el-table-columnprop="remark"label="英文名称"><template #default="scope">{{ scope.row.remark.length <= 2 ? '' : scope.row.remark }}</template></el-table-column></el-table></div><div class="beizhu-button"><el-button @click="tableFirm()">取消</el-button><el-button type="primary" @click="tableCommit">确定</el-button></div></div></div><div v-if="tableVisible" @click="tableFirm()" class="beizhu-zzc"></div><!-- 小地图 --><divv-if="showMiniMap"class="navigatorBox":class="{ isDark: isDark }"ref="navigatorBox"@mousedown="onMousedown"@mousemove="onMousemove"@mouseup="onMouseup"><divclass="svgBox"ref="svgBox":style="{transform: `scale(${svgBoxScale})`,left: svgBoxLeft + 'px',top: svgBoxTop + 'px'}"><img :src="mindMapImg" @mousedown.prevent /></div><div class="windowBox" :style="viewBoxStyle"></div></div></div></div></div></template>

import MindMap from 'simple-mind-map';
import MiniMap from 'simple-mind-map/src/plugins/MiniMap.js'
import Watermark from 'simple-mind-map/src/plugins/Watermark.js'
import KeyboardNavigation from 'simple-mind-map/src/plugins/KeyboardNavigation.js'
import ExportPDF from 'simple-mind-map/src/plugins/ExportPDF.js'
import ExportXMind from 'simple-mind-map/src/plugins/ExportXMind.js'
import Export from 'simple-mind-map/src/plugins/Export.js'
import Drag from 'simple-mind-map/src/plugins/Drag.js'
import Select from 'simple-mind-map/src/plugins/Select.js'
import AssociativeLine from 'simple-mind-map/src/plugins/AssociativeLine.js'
import TouchEvent from 'simple-mind-map/src/plugins/TouchEvent.js'
import NodeImgAdjust from 'simple-mind-map/src/plugins/NodeImgAdjust.js'
import SearchPlugin from 'simple-mind-map/src/plugins/Search.js'
import Painter from 'simple-mind-map/src/plugins/Painter.js'
import { getChildList } from "@/api/system/dictbiz"// import Formula from 'simple-mind-map/src/plugins/Formula.js'
import RainbowLines from 'simple-mind-map/src/plugins/RainbowLines.js'
import Demonstrate from 'simple-mind-map/src/plugins/Demonstrate.js'
import OuterFrame from 'simple-mind-map/src/plugins/OuterFrame.js'
import { nodeIconList } from 'simple-mind-map/src/svg/icons'
import xmind from 'simple-mind-map/src/parse/xmind.js'import { nodeRichTextToTextWithWrap, htmlEscape } from 'simple-mind-map/src/utils'// 注册插件
MindMap.usePlugin(MiniMap).usePlugin(Watermark).usePlugin(Drag).usePlugin(KeyboardNavigation).usePlugin(ExportPDF).usePlugin(ExportXMind).usePlugin(Export).usePlugin(Select).usePlugin(AssociativeLine).usePlugin(NodeImgAdjust).usePlugin(TouchEvent).usePlugin(SearchPlugin).usePlugin(Painter)// .usePlugin(Formula).usePlugin(RainbowLines).usePlugin(Demonstrate).usePlugin(OuterFrame)
// 主题
import cactus from './config/cactus.js'
import classic5 from './config/classic5.js'
import dark3 from './config/dark3.js'
import dark4 from './config/dark4.js'
import darkNightLceBlade from './config/darkNightLceBlade.js'
import lemonBubbles from './config/lemonBubbles.js'
import morandi from './config/morandi.js'
import neonLamp from './config/neonLamp.js'
import oreo from './config/oreo.js'
import rose from './config/rose.js'
import seaBlueLine from './config/seaBlueLine.js'
import shallowSea from './config/shallowSea.js'
import simpleBlack from './config/simpleBlack.js'
import Index from "@/page/index/index.vue";
// 注册主题
MindMap.defineTheme('cactus', cactus)
MindMap.defineTheme('classic5', classic5)
MindMap.defineTheme('dark3', dark3)
MindMap.defineTheme('dark4', dark4)
MindMap.defineTheme('darkNightLceBlade', darkNightLceBlade)
MindMap.defineTheme('lemonBubbles', lemonBubbles)
MindMap.defineTheme('morandi', morandi)
MindMap.defineTheme('neonLamp', neonLamp)
MindMap.defineTheme('oreo', oreo)
MindMap.defineTheme('rose', rose)
MindMap.defineTheme('seaBlueLine', seaBlueLine)
MindMap.defineTheme('shallowSea', shallowSea)
MindMap.defineTheme('simpleBlack', simpleBlack)let mindMapInstance = null
window.mindMapInstance = mindMapInstance
let countEl = document.createElement('div')
export default {props: {readonly: {type: Boolean,default: false,},name: {type: String,default: '思维导图',},},data() {return {data: {},nodeIconList,scale: 1,theme: 'classic5',themes: [{ value: 'classic5', label: '脑图经典5' },{ value: 'cactus', label: '仙人掌' },{ value: 'dark3', label: '暗色3' },{ value: 'dark4', label: '暗色4' },{ value: 'darkNightLceBlade', label: '暗夜冰刃' },{ value: 'lemonBubbles', label: '柠檬气泡' },{ value: 'morandi', label: '莫兰迪' },{ value: 'neonLamp', label: '霓虹灯' },{ value: 'oreo', label: '奥利奥' },{ value: 'rose', label: '玫瑰' },{ value: 'seaBlueLine', label: '海蓝线' },{ value: 'shallowSea', label: '浅海' },{ value: 'simpleBlack', label: '简约黑' },],layout: 'logicalStructure',layouts: [{ value: 'logicalStructure', label: '逻辑结构图' },{ value: 'mindMap', label: '思维导图' },{ value: 'organizationStructure', label: '组织结构图' },{ value: 'catalogOrganization', label: '目录组织图' },{ value: 'timeline', label: '时间轴' },{ value: 'timeline2', label: '时间轴2' },{ value: 'fishbone', label: '鱼骨图' },{ value: 'verticalTimeline', label: '垂直时间轴' },],activeNodes: [],currentIconList: [],activedPanel: '',// 右键showContextMenu: false,menuPosition: { x: 0, y: 0 },currentNode: null, // 当前选中节点type: '', // 节点类型isStart: false,isEnd: false,// 备注dialogVisible: false,note: '',// table表信息tableVisible: false,// 小地图showMiniMap: false,timer: null,boxWidth: 0,boxHeight: 0,svgBoxScale: 1,svgBoxLeft: 0,svgBoxTop: 0,viewBoxStyle: {left: 0,top: 0,bottom: 0,right: 0},mindMapImg: '',// 关系图显示隐藏guanxitu: false,colorArr:['#000000','#444444','#888888','#efa897','#FFFFFF','#33c9ff','#FF3333','#003cff','#FFCC00','#66FF00'],//更多颜色themeConfig: {}, // 主题配置lineConfig: {backgroundColor: null,lineColor: null,lineWidth: 1,lineStyle: 'curve',showLineMarker: false,},backgroundColor: null,lineColor: null,lineWidth: 1,lineStyle: 'curve',showLineMarker: false,// 线条配置值// 线条宽度选择lineWidthoptions: [{value: '1',label: '1'}, {value: '2',label: '2'}, {value: '3',label: '3'}, {value: '4',label: '4'}, {value: '5',label: '5'}],// 直连，曲线，直线lineStyleoptions: [{value: 'straight',label: '直线'}, {value: 'curve',label: '曲线'}, {value: 'direct',label: '直连'}],radiusOptions: [{value: 1, label: '1'},{value: 2, label: '2'},{value: 3, label: '3'},{value: 4, label: '4'},{value: 5, label: '5'},{value: 6, label: '6'},{value: 7, label: '7'},{value: 8, label: '8'},{value: 9, label: '9'},{value: 10, label: '10'},],fontSizeOptions: [{value: 10, label: '10'},{value: 12, label: '12'},{value: 15, label: '15'},{value: 18, label: '18'},{value: 20, label: '20'},{value: 25, label: '25'},{value: 30, label: '30'}],// 根节点开始root: {fillColor: '#ffffff',    // 根节点颜色color: '#ffffff',   // 节点文字颜色borderColor: '#ffffff',    // 节点边框颜色borderWidth: 1,    // 节点边框宽度borderRadius: 10,    // 节点边框圆角fontSize: 15    // 节点文字大小},// 根节点结束// 二级节点开始second: {fillColor: '#ffffff',    // 根节点颜色color: '#ffffff',   // 节点文字颜色borderColor: '#ffffff',    // 节点边框颜色borderWidth: 1,    // 节点边框宽度borderRadius: 10,    // 节点边框圆角fontSize: 15    // 节点文字大小},// 二级节点结束// 三级及以下开始node: {fillColor: '#ffffff',    // 根节点颜色color: '#ffffff',   // 节点文字颜色borderColor: '#ffffff',    // 节点边框颜色borderWidth: 1,    // 节点边框宽度borderRadius: 10,    // 节点边框圆角fontSize: 15    // 节点文字大小},// 三级及以下结束// 大纲树dagangData: [],tableData: [], // 树型表selectedRows: [], // 选中的行expandedRows: [], // 展开的行count: 0,   // 字数数量nodeCount: 0, // 节点数量nodeText: '', // 节点文本kuaijiejian:[{img: '<i class="el-icon-share" style="font-size: 15px;"></i>',name: '插入子节点',caozuo: 'Tab'},{img: '<i class="el-icon-circle-plus" style="font-size: 15px;"></i>',name: '插入同级节点',caozuo: 'Enter'},{img: '<i class="el-icon-share" style="font-size: 15px;"></i>',name: '插入父节点',caozuo: 'Shift + Tab'},{img: '<i class="el-icon-top" style="font-size: 15px;"></i>',name: '上移节点',caozuo: 'Ctrl + ↑'},{img: '<i class="el-icon-bottom" style="font-size: 15px;"></i>',name: '下移节点',caozuo: 'Ctrl + ↓'},{img: '<i class="el-icon-collection" style="font-size: 15px;"></i>',name: '插入概要',caozuo: 'Ctrl + G'},{img: '<i class="el-icon-delete-solid" style="font-size: 15px;"></i>',name: '删除节点',caozuo: 'Delete'},{img: '<i class="el-icon-document-copy" style="font-size: 15px;"></i>',name: '复制节点',caozuo: 'Ctrl + C'},{img: '<i class="el-icon-scissors" style="font-size: 15px;"></i>',name: '剪切节点',caozuo: 'Ctrl + X'},{img: '<i class="el-icon-document-checked" style="font-size: 15px;"></i>',name: '粘贴节点',caozuo: 'Ctrl + V'},{img: '<i class="el-icon-edit" style="font-size: 15px;"></i>',name: '编辑节点',caozuo: 'F2'},{img: '<i class="el-icon-sort" style="font-size: 15px;"></i>',name: '文本换行',caozuo: 'Shift + Enter'},{img: '<i class="el-icon-back" style="font-size: 15px;"></i>',name: '回退',caozuo: 'Ctrl + Z'},{img: '<i class="el-icon-right" style="font-size: 15px;"></i>',name: '前进',caozuo: 'Ctrl + Y'},{img: '<i class="el-icon-circle-check" style="font-size: 15px;"></i>',name: '全选',caozuo: 'Ctrl + A'},{img: '<i class="el-icon-s-help" style="font-size: 15px;"></i>',name: '多选',caozuo: 'Ctrl + 左键'},{img: '<i class="el-icon-menu" style="font-size: 15px;"></i>',name: '一键整理布局',caozuo: 'Ctrl + L'}],kuaijiejian2:[{img: '<i class="el-icon-zoom-in" style="font-size: 15px;"></i>',name: '放大',caozuo: 'Ctrl + +'},{img: '<i class="el-icon-zoom-out" style="font-size: 15px;"></i>',name: '缩小',caozuo: 'Ctrl + -'},{img: '<i class="el-icon-zoom-in" style="font-size: 15px;"></i>',name: '放大/缩小',caozuo: 'Ctrl + 鼠标滚轮'},{img: '<i class="el-icon-aim" style="font-size: 15px;"></i>',name: '回到根节点',caozuo: 'Ctrl + Enter'},{img: '<i class="el-icon-full-screen" style="font-size: 15px;"></i>',name: '适应画布',caozuo: 'Ctrl + i'},],}},components:{Index},computed: {showScale() {return (this.scale * 100).toFixed(0)},},beforeDestroy() {},mounted() {this.init();},unmounted() {mindMapInstance.destroy()},watch: {mindData() {mindMapInstance.destroy()this.init()},},methods: {// 计算节点数量updateCount() {this.nodeText = '';this.count = 0;this.nodeCount = 0;const data = mindMapInstance.getData();this.walk(data);countEl.innerHTML = this.nodeText;this.nodeCount = countEl.textContent.length},walk(data) {if (!data) returnthis.count++this.nodeText += String(data.data.text) || ''if (data.children && data.children.length > 0) {data.children.forEach(item => {this.walk(item)})}},back(){mindMapInstance.execCommand('BACK');},// 前进forward (){mindMapInstance.execCommand('FORWARD');},handleChange(file) {const that = thisElMessageBox.confirm('是否直接替换当前思维导图?', '警告', {confirmButtonText: '确认',cancelButtonText: '取消',type: 'warning',}).then(() => {const { raw } = filexmind.parseXmindFile(raw).then(data => {that.setData(data)})}).catch(() => {})},activePanel(type) {this.activedPanel = type === this.activedPanel ? '' : type},// 设置图标setIcon(type, name) {if (this.activeNodes.length === 0) returnlet key = type + '_' + name// 检查当前节点是否存在该图标let index = this.currentIconList.findIndex(item => {return item === key})// 存在则删除iconif (index !== -1) {this.currentIconList.splice(index, 1)} else {// 否则判断当前图标是否和要插入的图标是一个组的let typeIndex = this.currentIconList.findIndex(item => {return item.split('_')[0] === type})// 是一个组的则进行替换if (typeIndex !== -1) {this.currentIconList.splice(typeIndex, 1, key)} else {// 否则添加iconthis.currentIconList.push(key)}}this.activeNodes.forEach(node => {node.setIcon([...this.currentIconList])})},// 备注beizhu(){let nodeToMove = Array.isArray(this.activeNodes) ? this.activeNodes[0] : this.activeNodes;let note = nodeToMove.getData('note')this.note = note || ''this.dialogVisible = true},addChildTable(){this.tableData = [];getChildList(1, 500, '1871713381740707842', Object.assign({}, '')).then(res => {this.tableData = res.data.data;this.$nextTick(() => {let nodeToMove = Array.isArray(this.activeNodes) ? this.activeNodes[0] : this.activeNodes;const tableInfo = nodeToMove.getData('tableInfo');if(tableInfo){this.selectedRows = tableInfo.split(',');this.setTableSelection();}else{this.selectedRows = [];this.expandedRows = [];}});});this.tableVisible = true;this.hide();// 隐藏弹窗},addRelationLine() {mindMapInstance.createLineFromActiveNode()},addGeneralization() {mindMapInstance.execCommand('ADD_GENERALIZATION');},// 删除节点dropNode() {mindMapInstance.execCommand('REMOVE_NODE');this.hide();},// 新增同级节点addNode() {mindMapInstance.execCommand('INSERT_NODE');this.hide();},// 新增节点addChildNode() {mindMapInstance.execCommand('INSERT_CHILD_NODE');this.hide();},// 选择主题changeTheme(theme) {this.themeConfig = null;this.theme = thememindMapInstance.setTheme(this.theme);if(this.theme === this.data.theme.template){this.themeConfig = this.data.theme.config;mindMapInstance.setThemeConfig(this.themeConfig)}else{this.themeConfig = {};mindMapInstance.setThemeConfig(this.themeConfig)}},// 选择结构changeLayout(layout) {this.layout = layoutmindMapInstance.setLayout(layout)},zoomMap(e) {mindMapInstance.view.setScale(e)},zoomIn() {let scale = mindMapInstance.view.scalescale += 0.2if (scale > 2) scale = 2mindMapInstance.view.setScale(scale)},zoomOut() {let scale = mindMapInstance.view.scalescale -= 0.2if (scale < 0.1) scale = 0.1mindMapInstance.view.setScale(scale)},// 回到根目录rootCenter(){mindMapInstance.renderer.setRootNodeCenter();},getData() {return mindMapInstance.getData(true)},setData(data) {mindMapInstance.setData(data)},exportPng() {mindMapInstance.export('png', true, this.name)},// 复制节点copyNode() {if (mindMapInstance && this.currentNode) {mindMapInstance.renderer.copy()}this.hide();},// 粘贴节点pasteNode(){if (mindMapInstance && this.currentNode) {mindMapInstance.renderer.paste();}this.hide();},getNodeIndexInNodeList(node, nodeList){return nodeList.findIndex(item => {return item.uid === node.uid})},// 上移动节点upNode(){if (mindMapInstance && this.currentNode) {// 判断 this.currentNode 是否为数组let nodeToMove = Array.isArray(this.currentNode) ? this.currentNode[0] : this.currentNode;mindMapInstance.renderer.upNode(nodeToMove);}this.hide();},// 下移动节点downNode(){if (mindMapInstance && this.currentNode) {let nodeToMove = Array.isArray(this.currentNode) ? this.currentNode[0] : this.currentNode;mindMapInstance.renderer.downNode(nodeToMove);}this.hide();},// 主题设置背景颜色changeColor(color, index){if(index === 1){this.lineConfig.backgroundColor = color;}else if(index === 2){this.lineConfig.backgroundColor = this.backgroundColor}else if(index === 3){this.lineConfig.lineColor = this.lineColor}else if(index === 4){this.lineConfig.lineWidth = this.lineWidth}else if(index === 5){this.lineConfig.showLineMarker = this.showLineMarker}else if (index === 6){this.lineConfig.lineStyle = this.lineStyle}mindMapInstance.setThemeConfig({backgroundColor: this.lineConfig.backgroundColor,lineColor: this.lineConfig.lineColor,lineWidth: this.lineConfig.lineWidth,showLineMarker: this.lineConfig.showLineMarker,lineStyle: this.lineConfig.lineStyle});},// 连线设置lineConfigChange(index) {mindMapInstance.setThemeConfig({backgroundColor: this.lineConfig.backgroundColor,lineColor: this.lineConfig.lineColor,lineWidth: this.lineConfig.lineWidth,lineStyle: this.lineConfig.lineStyle,showLineMarker: this.lineConfig.showLineMarker,})},// 根节点设置/*rootColor(index){mindMapInstance.setThemeConfig({root: this.root})},*/init() {const ht = {"layout": "logicalStructure","root": {"data": {"text": "应用算法管理","expand": true,"isActive": false,"uid": "a64157ca-0a25-499f-9d49-6ca393466640"},"children": [{"data": {"text": "二级节点","uid": "aa0a4db0-f253-4be2-bba1-99a3c0c0bac3","expand": true,"richText": false,"isActive": false,"tableInfo": "T_SPDC_RGDJ_GZLB,T_SPDC_RGDJ_JBCS"},"children": []}, {"data": {"text": "二级节点","uid": "21d632f3-67d9-47af-b12c-0e8b4763bcf0","expand": true,"richText": false,"isActive": false},"children": []}, {"data": {"text": "二级节点","uid": "77f9d6ba-577a-4203-9ee0-569fb6cbc9a9","expand": true,"richText": false,"isActive": false},"children": []}],"smmVersion": "0.14.0-fix.1"},"theme": {"template": "classic5","config": {"lineStyle": "curve"}},"view": {"transform": {"scaleX": 1,"scaleY": 1,"shear": 0,"rotate": 0,"translateX": -154.5,"translateY": -21,"originX": 0,"originY": 0,"a": 1,"b": 0,"c": 0,"d": 1,"e": -154.5,"f": -21},"state": {"scale": 1,"x": -154.5,"y": -21,"sx": 0,"sy": 0}}}this.data = htlet mindData = this.dataif (this.data.root) {this.layout = this.data.layoutthis.theme = this.data.theme.templatemindData = this.data.root}// 将设置好的颜色进行同步到当前的界面和主题进行融合设置if(ht.theme.template === this.theme){this.themeConfig = ht.theme.config;// 第一个主题和最后一个主题是曲线，其他都是直线if(this.theme == 'classic5' || this.theme == 'simpleBlack'){this.themeConfig.lineStyle = 'curve';}else{this.themeConfig.lineStyle = 'direct';}if(ht.theme.config.hasOwnProperty('backgroundColor')){this.lineConfig.backgroundColor = ht.theme.config.backgroundColor;this.backgroundColor =  ht.theme.config.backgroundColor;}else{this.lineConfig.backgroundColor = classic5.backgroundColor;this.backgroundColor = classic5.backgroundColor;}if(ht.theme.config.hasOwnProperty('lineColor')){this.lineConfig.lineColor = ht.theme.config.lineColor;this.lineColor = ht.theme.config.lineColor;}else{this.lineConfig.lineColor = classic5.lineColorthis.lineColor = classic5.lineColor}if(ht.theme.config.hasOwnProperty('lineWidth')){this.lineConfig.lineWidth = ht.theme.config.lineWidth;this.lineWidth = ht.theme.config.lineWidth;}else{this.lineConfig.lineWidth = classic5.lineWidththis.lineWidth = classic5.lineWidth}if(ht.theme.config.hasOwnProperty('lineStyle')){this.lineConfig.lineStyle = ht.theme.config.lineStyle;this.lineStyle = ht.theme.config.lineStyle}else{this.lineConfig.lineStyle = classic5.lineStylethis.lineStyle = classic5.lineStyle}if(ht.theme.config.hasOwnProperty('showLineMarker')){this.lineConfig.showLineMarker = ht.theme.config.showLineMarker;this.showLineMarker = ht.theme.config.showLineMarker}else{this.lineConfig.showLineMarker = false;this.showLineMarker = false}}mindMapInstance = new MindMap({enableFreeDrag: true, // 是否允许自由拖动enableKeyboard: true, // 是否允许键盘操作enableNodeResize: true, // 是否允许节点大小调整readonly: this.readonly, // 是否只读layout: this.layout, // 'logicalStructure',theme: this.theme, //el: document.getElementById('mindMapContainer'),mousewheelAction: 'zoom', // zoom（放大缩小）、move（上下移动）data: mindData,fit: true,nodeTextEditZIndex: 1000,nodeNoteTooltipZIndex: 1000,initRootNodePosition: ['center', 'center'],themeConfig: this.themeConfig,// 自定义节点内容addCustomContentToNode: {create: node => {const tableInfo = node.nodeData.data.tableInfo;if (!tableInfo) return null;const el = document.createElement('div');el.style.cssText = `height: 18px;background: '#FFFFFF';border: 1px solid #ccc;border-radius: 5px;color: #333;text-align: center;margin-top: 1px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 12px;`;let note = node.getData('note');if (note) {el.style.width = node.width > 0 ? node.width + 'px' : 125 + 'px';}else{el.style.width = node.width > 0 ? node.width + 'px' : 100 + 'px';}el.title = tableInfo;el.innerText = tableInfo;return {el, // DOM节点width: node.width, // 宽高height: 25};},handle: ({ content, element, node }) => {if(content.width == 0){let note = node.getData('note');if(note){content.width = 125;}else{content.width = 103;}element.attr('width', content.width);}element.x(node.width / 2 - content.width / 2).y(node.height + 5);}}})mindMapInstance.on('scale', e => {this.scale = Number(e.toFixed(2))})mindMapInstance.on('node_active', (...args) => {this.activeNodes = args[1]if (this.activeNodes.length > 0) {let firstNode = this.activeNodes[0]this.currentIconList = firstNode.getData('icon') || []} else {this.currentIconList = []}})mindMapInstance.on('back_forward', (index, len) => {/*this.isStart = index <= 0this.isEnd = index >= len - 1*/})mindMapInstance.on('node_contextmenu', (e, node) => {if (e.which == 3) {this.menuPosition = { x: e.clientX +10, y: e.clientY+10 };this.showContextMenu = true;this.currentNode = node}})mindMapInstance.on('node_active', (e, node) => {this.currentNode = node})mindMapInstance.on('data_change', () => {this.dgrefresh();this.updateCount();})// 小地图监听事件mindMapInstance.on('toggle_mini_map', this.toggle_mini_map)mindMapInstance.on('data_change', this.data_change)mindMapInstance.on('node_tree_render_end', this.data_change)mindMapInstance.on('view_data_change', this.data_change)// 点击空白处mindMapInstance.on('node_click', this.hide)mindMapInstance.on('draw_click', this.hide)mindMapInstance.on('expand_btn_click', this.hide)// mindMapInstance.$on('DOMSubtreeModified', this.updateCount)},// 大纲渲染树dgrefresh() {let data = mindMapInstance.getData()// 获取思维导图树数据data.root = true // 标记根节点// 遍历树，添加一些属性let walk = root => {// 如果是富文本节点，那么调用nodeRichTextToTextWithWrap方法将<p><span></span><p>形式的节点富文本内容转换成\n换行的文本let text = (root.data.richText? nodeRichTextToTextWithWrap(root.data.text): root.data.text).replaceAll(/\n/g, '<br>')text = htmlEscape(text)text = text.replaceAll(/\n/g, '<br>')root.textCache = text // 保存一份修改前的数据，用于对比是否修改了root.label = text// 用于树组件渲染root.uid = root.data.uidif (root.children && root.children.length > 0) {root.children.forEach(item => {walk(item)})}}walk(data)this.dagangData = [data]// 赋值给树组件},hide() {this.menuPosition = { x: 0, y: 0 };this.showContextMenu = false;this.currentNode = null},// 保存getFullData(){console.log(JSON.stringify(mindMapInstance.getData(true)))console.log(JSON.stringify(mindMapInstance.getData(false)))alert(JSON.stringify(mindMapInstance.getData(true)))},// 备注confirm(){let note = this.notethis.activeNodes.forEach(node => {node.setNote(note)})this.dialogVisible = false;},confirmGb(){this.note = ''this.dialogVisible = false;},// 表信息tableFirm(){this.tableVisible = false;},// 提交表信息tableCommit(){let tableRows = this.selectedRows;var result = tableRows.join(',');let nodeToMove = Array.isArray(this.activeNodes) ? this.activeNodes[0] : this.activeNodes;nodeToMove.setData({ tableInfo: result });this.tableVisible = false;// 刷新思维导图mindMapInstance.render();this.hide();// 隐藏弹窗},// 删除表delChildTable(){let nodeToMove = Array.isArray(this.activeNodes) ? this.activeNodes[0] : this.activeNodes;// 删除表tableInfo属性nodeToMove.setData({ tableInfo: '' });this.selectedRows = [];// 刷新思维导图mindMapInstance.render();this.hide();// 隐藏弹窗},// 表选中行开始handleSelectionChange(selection) {this.selectedRows = selection.map(row => row.remark);},cellClass () {return 'selectAllbtnDis'},selectable(row,rowIndex) {if(row.remark.length <= 2){return false;  //禁用}else{return true;}},// 树回显setTableSelection() {const table = this.$refs.table;if (table && this.tableData.length > 0) {const savedSelectedRows = [...this.selectedRows]; // 保存 selectedRows 数组的状态const tempSelectedRows = savedSelectedRows.map(row => row); // 使用临时数组进行匹配this.expandedRows = new Set(); // 使用 Set 来存储唯一的父节点 idthis.recursivelySetSelection(this.tableData, tempSelectedRows, null);// 展开所有需要展开的行this.$nextTick(() => {this.expandedRows.forEach(rowId => {const row = this.findRowById(this.tableData, rowId);if (row) {table.toggleRowExpansion(row, true);}});});} else {console.error('Table or data not available');}},recursivelySetSelection(rows, tempSelectedRows) {const table = this.$refs.table;rows.forEach(row => {if (tempSelectedRows.includes(row.remark)) { // 使用 trim() 去除空格table.toggleRowSelection(row, true);this.expandParentRows(row);}if (row.children && row.children.length) {this.recursivelySetSelection(row.children, tempSelectedRows);}});},expandParentRows(row) {const parentRow = this.findParentRow(row);if (parentRow) {this.expandedRows.add(parentRow.id); // 添加父节点的 id 到 expandedRows 集合中this.expandParentRows(parentRow);}},findParentRow(row) {const parentId = row.parentId; // 假设每个子节点有一个 parentId 属性指向父节点的 idif (parentId) {return this.findRowById(this.tableData, parentId);}return null;},findRowById(rows, rowId) {for (let row of rows) {if (row.id === rowId) {return row;}if (row.children && row.children.length) {const foundRow = this.findRowById(row.children, rowId);if (foundRow) {return foundRow;}}}return null;},/*setTableSelection() {const tempSelectedRows = this.selectedRows.map(row => row);this.recursivelySetSelection(this.tableData, tempSelectedRows);},recursivelySetSelection(rows, tempSelectedRows) {const table = this.$refs.table;rows.forEach(row => {if (tempSelectedRows.includes(row.remark)) {table.toggleRowSelection(row, true);}if (row.children && row.children.length) {this.recursivelySetSelection(row.children, tempSelectedRows);}});},*/// 表选中行结束// 打开小地图toggle_mini_map(show) {this.showMiniMap = showthis.$nextTick(() => {if (show) {if (this.$refs.navigatorBox) {this.openInit()}if (this.$refs.svgBox) {this.drawMiniMap()}}})},data_change() {if (!this.showMiniMap) {return}clearTimeout(this.timer)this.timer = setTimeout(() => {this.drawMiniMap()}, 500)},openInit() {let { width, height } = this.$refs.navigatorBox.getBoundingClientRect()this.boxWidth = widththis.boxHeight = height},drawMiniMap() {let { getImgUrl, viewBoxStyle, miniMapBoxScale, miniMapBoxLeft, miniMapBoxTop } = mindMapInstance.miniMap.calculationMiniMap(this.boxWidth,this.boxHeight)// 渲染到小地图getImgUrl(img => {this.mindMapImg = img})this.viewBoxStyle = viewBoxStylethis.svgBoxScale = miniMapBoxScalethis.svgBoxLeft = miniMapBoxLeftthis.svgBoxTop = miniMapBoxTop},onMousedown(e) {mindMapInstance.miniMap.onMousedown(e)},onMousemove(e) {mindMapInstance.miniMap.onMousemove(e)},onMouseup(e) {mindMapInstance.miniMap.onMouseup(e)},qp(){let con = document.getElementById('mind-map-container')if (con.requestFullScreen) {con.requestFullScreen()} else if (con.webkitRequestFullScreen) {con.webkitRequestFullScreen()} else if (con.mozRequestFullScreen) {con.mozRequestFullScreen()}},gbqp(){if (document.exitFullscreen) {document.exitFullscreen();} else if (document.webkitExitFullscreen) {document.webkitExitFullscreen();} else if (document.mozCancelFullScreen) {document.mozCancelFullScreen();} else if (document.msExitFullscreen) {document.msExitFullscreen();}},// 大纲开始// 根节点不允许拖拽checkAllowDrag(node) {return !node.data.root},handleNodeClick(node){// 根据uid知道思维导图节点对象const targetNode = mindMapInstance.renderer.findNodeByUid(node.uid)// 如果当前已经是激活状态，那么上面都不做if (targetNode && targetNode.nodeData.data.isActive) return// 定位到目标节点mindMapInstance.execCommand('GO_TARGET_NODE', node.uid)}},
}

.mind-map-container,
#mindMapContainer {width: 100%;height: 100%;overflow: hidden;position: relative;
}
.my-button {svg {width: 1.5rem;height: 1.5rem;padding-top: 5px;}height: 3.8rem;text-align: center;line-height: 1.5rem;
}
.mindmap-tools {position: absolute;top: 10px;right: 10px;z-index: 1000;display: flex;flex-direction: row;justify-content: center;width: 100%;align-items: center;
}$iconSize: 1.4rem;.active-panel {position: absolute;top: 10rem;right: 5px;bottom: 10rem;width: 20rem;background: white;user-select: none;height: 60%;.active-panel-box {height: 100%;.title {height: 3rem;line-height: 3rem;padding: 0 0.8rem;font-weight: bold;font-size: 1.1rem;border-bottom: 1px solid #ccc;.close {float: right;cursor: pointer;font-size: 1.3rem;}}.content {height: calc(100% - 4rem);overflow-y: auto;overflow-x: hidden;&.icon {padding-right: 0.5rem;padding-left: 0.5rem;}.icon-group {margin-top: 1rem;line-height: 2;&:first-child {margin-top: 0;}}.group-title {font-weight: bold;}.group-content {display: flex;flex-direction: row;flex-wrap: wrap;.icon-item {width: $iconSize;height: $iconSize;margin-right: 0.4rem;margin-top: 0.4rem;cursor: pointer;&.disabled {cursor: not-allowed;opacity: 0.5;}svg {width: $iconSize;height: $iconSize;}}}li {list-style: none;text-align: center;margin-top: 1rem;border: 1px solid #ccc;border-radius: 4px;width: 90%;margin-left: 5%;&:first-child {margin-top: 0;}&:hover {cursor: pointer;box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);}&.active {border: 1px solid #67c23a;box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);}img {width: 100%;height: 8rem;}}}}
}
.mind-map-scale {position: absolute;bottom: 1rem;right: 1rem;z-index: 99;background: #ffffff;border-radius: 5px;opacity: 0.8;display: flex;align-items: center;
}
:deep .mind-map-scale {.el-input__wrapper .el-input__inner {text-align: center !important;}
}
.mind-map-scale img {cursor: pointer; /* 鼠标悬浮时变成小手 */
}
// 右键
.context-menu {position: fixed;background-color: white;border: 1px solid #ccc;box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);z-index: 1000;padding: 10px;border-radius: 4px;width: 120px;
}.context-menu ul {list-style: none;padding: 0;margin: 0;
}.context-menu li {padding: 8px 12px;cursor: pointer;
}.context-menu li:hover {background-color: #f0f0f0;
}
// 边框
.tools-bk{padding: 10px 20px;background: white;border-radius: 10px;font-size: 13px;color: #626262;border: 1px solid rgba(0, 0, 0, 0.06);margin-left: 10px;
}
.my-button .el-icon-document {display: inline-block;font-size: 16px; /* 根据需要调整字体大小 */color: currentColor; /* 确保图标的颜色与按钮一致 */
}
// 小地图
.navigatorBox {position: absolute;width: 350px;height: 220px;background-color: #fff;bottom: 80px;right: 70px;box-shadow: 0 0 16px #989898;border-radius: 4px;border: 1px solid #eee;cursor: pointer;user-select: none;&.isDark {background-color: #262a2e;}.svgBox {position: absolute;left: 0;transform-origin: left top;}.windowBox {position: absolute;border: 1px solid #DEDEDEFF;transition: all 0.3s;}
}
.beizhuVisible{position: absolute;top: 20%;width: 50%;z-index: 9999;background-color: white;margin-left: 25%;
}
.beizhu-1{margin: 20px;
}
.beizhu-title{overflow: hidden;height: 30px;
}
.beizhu-title-left{float: left;margin-top: 5px;
}
.beizhu-title-right{float: right;margin-top: 5px;cursor: pointer;
}
.beizhu-button{margin-top: 20px;text-align: right;
}
.beizhu-zzc{background-color: rgba(0,0,0,0.6);position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 9998;
}
.fgx{border-bottom: 1px solid #ccc;margin-top: 5px;
}
.lx-config{overflow: hidden;margin-top: 5px;font-size: 15px;.block{display: flex;align-items: center;float: left;}
}/* 禁用全选 */
::v-deep .selectAllbtnDis .cell .el-checkbox__inner {display: none;
}.el-table::before {display: none !important;
}
.node-count{position: absolute;bottom: 1rem;left: 1rem;z-index: 99;background: #fafdfc;height: 30px;border-radius: 5px;align-items: center;display: flex;
}

默认classic5的配置文件 classic5.js

// 经典5
export default {backgroundColor: 'rgb(233, 245, 241)',// 连线的颜色lineColor: 'rgb(34, 34, 34)',lineWidth: 2,// 概要连线的粗细generalizationLineWidth: 2,// 概要连线的颜色generalizationLineColor: 'rgb(34, 34, 34)',// 关联线默认状态的颜色associativeLineColor: 'rgb(56, 44, 116)',// 关联线文字颜色associativeLineTextColor: 'rgb(68, 68, 68)',lineStyle: 'curve', // 连线的类型，有直线和曲线两种// 1.曲线（curve）2.直线（straight）直连（direct）// 根节点样式root: {fillColor: 'rgb(0,182,255)',color: '#fff',borderColor: 'rgb(0,182,255)',borderWidth: 0,fontSize: 24},// 二级节点样式second: {fillColor: 'rgb(161, 213, 188)',color: 'rgb(0, 0, 0)',borderColor: '',borderWidth: 0,fontSize: 18},// 三级及以下节点样式node: {fontSize: 14,color: 'rgb(0,0,0)',borderColor: 'rgb(0, 0, 0)',borderWidth: 1,},// 概要节点样式generalization: {fontSize: 14,fillColor: 'rgb(56, 44, 116)',borderColor: '',borderWidth: 0,color: '#fff'}}