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很重要；
最后 感谢阅读 如果有不足之处 请指出
