前端vue用jsmind写思维导图
时间：2024-04-11 11:15:23 来源：网络cs 作者：晨起 栏目：运营工具 阅读：
1、下载依赖
npm 安装npm install --save jsmind yarn 安装yarn jsmind版本:"jsmind": "^0.4.6",2、完整代码：
<template> <!-- 普通菜单 --> <div class="jsmind_layout"> <div class="jsmind_toolbar" v-if="showBar"> <el-button @click="editNode" size="medium">查看节点</el-button> <!-- <el-button @click="removeNode" size="medium">删除节点</el-button> --> <el-button @click="zoomIn" size="medium" :disabled="isZoomIn">放大</el-button> <el-button @click="zoomOut" size="medium" :disabled="isZoomOut" class="pad">缩小</el-button> <span>展开：</span> <el-select v-model="level" placeholder="展开节点" @change="expand_to_level" class="pad pad-left" size="medium"> <el-option v-for="item in nodeOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> <span>主题：</span> <el-select v-model="localTheme" placeholder="选择主题" @change="set_theme" size="medium"> <el-option v-for="item in themeOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </div> <div id="jsmind_container" ref="container"> </div> </div> <el-dialog v-model="dialogVisible1" title="查看节点" width="30%" :before-close="handleClose"> <div class="dilogText" v-if="obj.topic"> <span>名称： {{ obj.topic ? obj.topic : '-' }}</span> </div> <div class="dilogText" v-if="obj.orgName"> <span>部门： {{ obj.orgName ? obj.orgName : '-' }}</span> </div> <div class="dilogText" v-if="obj.jobType"> <span>描述： {{ obj.jobType ? obj.jobType : '-' }}</span> </div> <div class="dilogText" v-if="obj.stepStatus"> <span>状态： <el-tag type="success" v-if="obj.stepStatus == '正在进行'">正在进行</el-tag> <el-tag type="warning" v-if="obj.stepStatus == '已超期'">已超期</el-tag> <el-tag v-if="obj.stepStatus == '已审批'">已审批</el-tag> <el-tag type="danger" v-if="obj.stepStatus == '已完成'">已完成</el-tag> </span> </div> <div class="dilogText" v-if="obj.startDate"> <span>开始时间： {{ obj.startDate ? obj.startDate : '-'}}</span> </div> <div class="dilogText" v-if="obj.endDate"> <span>结束时间： {{ obj.endDate ? obj.endDate : '-' }}</span> </div> <div class="dilogText" v-if="obj.attachment" style="display: flex;align-items: center;"> <span>附件： {{ obj.attachment ? obj.attachment : '-'}}</span> <el-button style="font-size: 14px; position: absolute; right: 14rem;" type="text" @click="onDownld"> 下载</el-button> </div> <div class="dilogText" v-if="obj.annotation"> <span>批注：{{ obj.annotation ? obj.annotation : '-'}}</span> </div> <template #footer> <span class="dialog-footer"> <el-button @click="dialogVisible1 = false">关 闭</el-button> </span> </template> </el-dialog></template> <script>import 'jsmind/style/jsmind.css'import jsMind from 'jsmind/js/jsmind.js'window.jsMind = jsMind// require('jsmind/js/jsmind.draggable.js')// require('jsmind/js/jsmind.screenshot.js')export default { components: { }, props: { showBar: { // 是否显示工具栏，显示启用编辑 type: Boolean, default: true }, theme: { // 主题 type: String, default: 'info' }, lineColor: { // 线条颜色 type: String, default: 'skyblue' } }, data() { return { form: {}, i: 0, mind: {}, jm: null, isZoomIn: false, isZoomOut: false, dialogVisible1: false, level: 0, nodeOptions: [ { value: 1, label: '展开到一级节点' }, { value: 2, label: '展开到二级节点' }, { value: 3, label: '展开到三级节点' }, { value: 0, label: '展开全部节点' }, { value: -1, label: '隐藏全部节点' } ], themeOptions: [ // { value: '', label: 'default' }, // { value: 'primary', label: 'primary' }, // { value: 'warning', label: '警告' }, // { value: 'danger', label: '危险' }, // { value: 'success', label: '成功' }, { value: 'info', label: '青色' }, // { value: 'nephrite', label: 'nephrite' }, // { value: 'clouds', label: 'clouds' }, // { value: 'asbestos', label: 'asbestos' }, // { value: 'belizehole', label: 'belizehole' }, { value: 'greensea', label: '绿色' }, { value: 'wisteria', label: '紫色' }, { value: 'asphalt', label: '灰色' }, { value: 'orange', label: '黄色' }, { value: 'pumpkin', label: '南瓜色' }, { value: 'pomegranate', label: '石榴色' }, ], localTheme: this.theme, nodeOption: { content: '', bgColor: '', fontColor: '', fontSize: '', fontWeight: '', fontStyle: '' }, obj: { topic:'', orgName:'', title:'', jobType:'', stepStatus:'', startDate:'', endDate:'', attachment:'', annotation:'', } } }, created() { }, mounted() { if (this.$route.params.id) { this.getData(this.$route.params.id); } // this.mouseWheel() }, methods: { //获取值 getData(id) { this.$API.workinformation.oaTaskStep.getlogShow({ taskId: id }).then(res => { if(res.data) { const list = res.data const newList = { id: list.id, children: list.list, topic: list.topic, manageStartTime: list.manageStartTime, manageEndTime: list.manageEndTime }; this.mind = { meta: { name: 'jsMind remote', author: 'hizzgdev@163.com', version: '0.2', }, format: 'node_tree', data: newList }; } this.open_empty() }).catch(error => { this.$message.error(error) }) }, open_empty() { const options = { container: 'jsmind_container', // 必选，容器ID editable: this.showBar, // 可选，是否启用编辑 theme: this.localTheme, // 可选，主题 view: { line_width: 2, // 思维导图线条的粗细 line_color: this.lineColor // 思维导图线条的颜色 }, shortcut: { enable: true // 禁用快捷键 }, layout: { hspace: 50, // 节点之间的水平间距 vspace: 20, // 节点之间的垂直间距 pspace: 13 // 节点与连接线之间的水平间距（用于容纳节点收缩/展开控制器） }, mode: 'side' // 显示模式，子节点只分布在根节点右侧 } this.jm = jsMind.show(options, this.mind) // 改变窗口大小重置画布 window.onresize = () => { this.jm.resize() } this.getDepth(this.jm.mind.root, 1) }, // 获取层级数 i getDepth(obj, k) { this.i = Math.max(this.i, k) if (obj.children) { obj.children.forEach((v) => { this.getDepth(v, k + 1) }) } }, expand_all() { this.jm.expand_all() }, collapse_all() { this.jm.collapse_all() }, expand_to_level(num) { switch (num) { case -1: this.collapse_all() break case 0: this.expand_all() break default: this.jm.expand_to_depth(num) break } }, zoomIn() { if (this.jm.view.zoomIn()) { this.isZoomOut = false } else { this.isZoomIn = true } }, zoomOut() { if (this.jm.view.zoomOut()) { this.isZoomIn = false } else { this.isZoomOut = true } }, prompt_info(msg) { this.$message({ type: 'warning', message: msg }) }, set_theme(themeName) { this.jm.set_theme(themeName) }, scrollFunc(e) { e = e || window.event if (e.wheelDelta) { if (e.wheelDelta > 0) { this.zoomIn() } else { this.zoomOut() } } else if (e.detail) { if (e.detail > 0) { this.zoomIn() } else { this.zoomOut() } } this.jm.resize() }, // 鼠标滚轮放大缩小 mouseWheel() { if (document.addEventListener) { document.addEventListener('domMouseScroll', this.scrollFunc, false) } this.$refs.container.onmousewheel = this.scrollFunc }, // 获取选中标签的 ID get_selected_nodeid() { let selectedNode = this.jm.get_selected_node() if (selectedNode) { return selectedNode.id } else { return null } }, // 删除节点 removeNode() { let selectedId = this.get_selected_nodeid() if (!selectedId) { this.$message({ type: 'warning', message: '请先选择一个节点!' }) return } this.jm.remove_node(selectedId) this.i = 0 this.getDepth(this.jm.mind.root, 1) }, handleSuccess() { let a = document.getElementsByClassName("el-overlay")[3] a.style = "display:none" this.$nextTick(() => { this.dialogVisible1 = false }) }, // 编辑节点 editNode() { let selectedId = this.get_selected_nodeid() if (!selectedId) { this.$message({ type: 'warning', message: '请先选择一个节点!' }) return } let a = document.getElementsByClassName("el-overlay")[3] a.style = "display:block" this.dialogVisible1 = true let nodeObj = this.jm.get_node(selectedId) this.obj.topic = nodeObj.topic this.obj.orgName = nodeObj.data.orgName, this.obj.title = nodeObj.data.title, this.obj.jobType = nodeObj.data.jobType, this.obj.stepStatus = nodeObj.data.stepStatus, this.obj.startDate = nodeObj.data.startDate ? nodeObj.data.startDate : nodeObj.data.manageStartTime, this.obj.endDate = nodeObj.data.endDate ? nodeObj.data.endDate : nodeObj.data.manageEndTime, this.obj.attachment = nodeObj.data.attachment, this.obj.annotation = nodeObj.data.annotation console.log('33333333',nodeObj.data) }, sureEditNode() { let a = document.getElementsByClassName("el-overlay")[3] a.style = "display:none" let selectedId = this.get_selected_nodeid() this.jm.update_node(selectedId, this.nodeOption.content) this.jm.set_node_font_style(selectedId, this.nodeOption.fontSize, this.nodeOption.fontWeight, this.nodeOption.fontStyle) this.jm.set_node_color(selectedId, this.nodeOption.bgColor, this.nodeOption.fontColor) this.nodeOption = { content: '', bgColor: '', fontColor: '', fontSize: '', fontWeight: '', fontStyle: '' } this.dialogVisible1 = false } }, beforeDestroy() { document.removeEventListener('domMouseScroll', this.scrollFunc, false) }}</script> <style lang="less" scoped>.jsmind_layout { display: flex; flex-direction: column; width: 100%; height: calc(100% - 40px); overflow: hidden; .jsmind_toolbar { width: 100%; padding: 0 10px 10px 10px; height: auto; flex-shrink: 0; display: flex; align-items: center; flex-wrap: wrap; background-color: #f8f9fa; box-shadow: 0 0 4px #b8b8b8; } /deep/ .el-button--medium, /deep/ .el-input--medium { margin-top: 10px; } #jsmind_container { flex: 1 1 auto; } /deep/.jsmind-inner { overflow: hidden auto !important; } /deep/.el-upload-list { display: none !important; } /* 隐藏滚动条 */ .jsmind-inner::-webkit-scrollbar { display: none; } .pad { margin-right: 10px; } .pad-left { margin-left: 10px; } /deep/ jmnode.selected { background-color: #b9b9b9; color: #fff; box-shadow: 2px 2px 8px #777; } /deep/ jmnode:hover { box-shadow: 2px 2px 8px #777; } .form-con { padding-top: 20px; } .ele-width { width: 96%; } :deep(.el-overlay) { display: block !important; }}.dilogText { font-size: 16px; margin: 10px 0px;}</style>
3、数据格式：
{ "manageStartTime": "2024-01-15", "manageEndTime": "2024-01-18", "list": [ { "id": "1749596797626675202", "parentId": "0", "children": [ { "id": "1749596948705505282", "parentId": "1749596797626675202", "children": [ { "id": "1749597460314124290", "parentId": "1749596948705505282", "hasChildren": false, "name": "", "topic": "1", "key": -1, "value": -1, "title": "", "creatTime": "", "orgName": "一队1", "description": "2", "jobType": "任务名称任务名称任务名称任务名称任务名", "remark": "", "direction": "left", "stepStatus": "已超期", "startDate": "2024-01-23 00:00:00", "endDate": "2024-01-23 00:00:00", "principal": "詹宁123", "attachment": "22", "attachmentAddress": "", "annotation": "" }, { "id": "1749643728044810241", "parentId": "1749596948705505282", "hasChildren": false, "name": "", "topic": "1111", "key": -1, "value": -1, "title": "", "creatTime": "", "orgName": "", "description": "222", "jobType": "任务名称任务名称任务名称任务名称任务名", "remark": "", "direction": "left", "stepStatus": "正在进行", "startDate": "", "endDate": "", "principal": "", "attachment": "", "attachmentAddress": "", "annotation": "" }, { "id": "1749644214860898307", "parentId": "1749596948705505282", "hasChildren": false, "name": "", "topic": "步骤2", "key": -1, "value": -1, "title": "", "creatTime": "", "orgName": "", "description": "222", "jobType": "任务名称任务名称任务名称任务名称任务名", "remark": "", "direction": "left", "stepStatus": "正在进行", "startDate": "", "endDate": "", "principal": "", "attachment": "", "attachmentAddress": "", "annotation": "" } ], "hasChildren": true, "name": "", "topic": "22", "key": -1, "value": -1, "title": "", "creatTime": "", "orgName": "机关首长", "description": "22", "jobType": "任务名称任务名称任务名称任务名称任务名", "remark": "", "direction": "left", "stepStatus": "已超期", "startDate": "2024-01-23 00:00:00", "endDate": "2024-01-24 00:00:00", "principal": "副局长1号AAAAA", "attachment": "", "attachmentAddress": "", "annotation": "" }, { "id": "1749644214860898306", "parentId": "1749596797626675202", "hasChildren": false, "name": "", "topic": "步骤1", "key": -1, "value": -1, "title": "", "creatTime": "", "orgName": "", "description": "3333333", "jobType": "任务名称任务名称任务名称任务名称任务名", "remark": "", "direction": "left", "stepStatus": "正在进行", "startDate": "", "endDate": "", "principal": "", "attachment": "", "attachmentAddress": "", "annotation": "" }, { "id": "1749644351012200449", "parentId": "1749596797626675202", "hasChildren": false, "name": "", "topic": "步骤1", "key": -1, "value": -1, "title": "", "creatTime": "", "orgName": "", "description": "3333333", "jobType": "任务名称任务名称任务名称任务名称任务名", "remark": "", "direction": "left", "stepStatus": "正在进行", "startDate": "", "endDate": "", "principal": "", "attachment": "", "attachmentAddress": "", "annotation": "" } ], "hasChildren": true, "name": "", "topic": "123", "key": -1, "value": -1, "title": "", "creatTime": "", "orgName": "首长首长222", "description": "123", "jobType": "任务名称任务名称任务名称任务名称任务名", "remark": "", "direction": "left", "stepStatus": "正在进行", "startDate": "2024-01-24 00:00:00", "endDate": "2024-01-25 00:00:00", "principal": "canmouyichu", "attachment": "障碍物数据 (2).xlsx", "attachmentAddress": "", "annotation": "" }, { "id": "1749598509187919873", "parentId": "0", "children": [ { "id": "1749598725676920834", "parentId": "1749598509187919873", "hasChildren": false, "name": "", "topic": "2.1", "key": -1, "value": -1, "title": "", "creatTime": "", "orgName": "一队1", "description": "2.1", "jobType": "任务名称任务名称任务名称任务名称任务名", "remark": "", "direction": "left", "stepStatus": "已超期", "startDate": "2024-01-23 00:00:00", "endDate": "2024-01-24 00:00:00", "principal": "詹宁123", "attachment": "22", "attachmentAddress": "", "annotation": "" } ], "hasChildren": true, "name": "", "topic": "2", "key": -1, "value": -1, "title": "", "creatTime": "", "orgName": "机关首长", "description": "2", "jobType": "任务名称任务名称任务名称任务名称任务名", "remark": "", "direction": "left", "stepStatus": "已超期", "startDate": "2024-01-24 00:00:00", "endDate": "2024-01-24 00:00:00", "principal": "副局长1号AAAAA", "attachment": "2", "attachmentAddress": "", "annotation": "" }, { "id": "1749654320818278402", "parentId": "0", "hasChildren": false, "name": "", "topic": "222", "key": -1, "value": -1, "title": "", "creatTime": "", "orgName": "", "description": "333", "jobType": "任务名称任务名称任务名称任务名称任务名", "remark": "", "direction": "left", "stepStatus": "正在进行", "startDate": "", "endDate": "", "principal": "", "attachment": "", "attachmentAddress": "", "annotation": "" }, { "id": "1749662052795404290", "parentId": "0", "hasChildren": false, "name": "", "topic": "步骤2", "key": -1, "value": -1, "title": "", "creatTime": "", "orgName": "首长首长222", "description": "2.2", "jobType": "任务名称任务名称任务名称任务名称任务名", "remark": "", "direction": "left", "stepStatus": "已超期", "startDate": "2024-01-23 00:00:00", "endDate": "2024-01-23 00:00:00", "principal": "canmouyichu", "attachment": "", "attachmentAddress": "", "annotation": "" }, { "id": "1749662644481683457", "parentId": "0", "hasChildren": false, "name": "", "topic": "2.6", "key": -1, "value": -1, "title": "", "creatTime": "", "orgName": "首长首长222", "description": "2.6", "jobType": "任务名称任务名称任务名称任务名称任务名", "remark": "", "direction": "left", "stepStatus": "已超期", "startDate": "2024-01-24 00:00:00", "endDate": "2024-01-24 00:00:00", "principal": "canmouyichu", "attachment": "", "attachmentAddress": "", "annotation": "" } ], "id": "1746789335255597057", "topic": "任务名称任务名称任务名称任务名称任务名"}4、效果如下：
注意：数据格式看对，里面topic很重要；
最后 感谢阅读 如果有不足之处 请指出
本文链接：https://www.kjpai.cn/news/2024-04-11/156973.html，文章来源：网络cs，作者：晨起，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
下一篇：返回列表