<template>
<div id="jsmind_container"></div>
</template>
<script>
import '@/style/jsmind.css'
import jsMind from 'jsmind/js/jsmind.js'
export default {
data() {
return {
data1: {
'2022-10-13': [
{
id: null,
address: '测试',
longitude: null,
latitude: null,
startTime: '2022-10-13 17:09:52',
endTime: '2022-10-14 17:09:52',
createTime: null,
fxUserId: '1580379386153140224',
userType: '1',
actionDesc: null,
remarkDesc: null,
pushStatus: null,
ldStatus: null,
sortId: null,
deleteType: null,
fxcsFlag: null
},
{
id: null,
address: '测试1',
longitude: null,
latitude: null,
startTime: '2022-10-13 17:10:52',
endTime: '2022-10-14 17:11:52',
createTime: null,
fxUserId: '1580379386153140224',
userType: '1',
actionDesc: null,
remarkDesc: null,
pushStatus: null,
ldStatus: null,
sortId: null,
deleteType: null,
fxcsFlag: null
}
],
'2022-10-15': [
{
id: null,
address: '测试2',
longitude: null,
latitude: null,
startTime: '2022-10-15 10:48:20',
endTime: '2022-10-16 10:48:20',
createTime: null,
fxUserId: '1580379386153140224',
userType: '1',
actionDesc: '睡觉',
remarkDesc: null,
pushStatus: null,
ldStatus: null,
sortId: null,
deleteType: null,
fxcsFlag: null
}
],
'2022-10-17': [
{
id: null,
address: '测试3',
longitude: null,
latitude: null,
startTime: '2022-10-17 11:06:01',
endTime: '2022-10-18 11:06:01',
createTime: null,
fxUserId: '1580379386153140224',
userType: '1',
actionDesc: null,
remarkDesc: null,
pushStatus: null,
ldStatus: null,
sortId: null,
deleteType: null,
fxcsFlag: null
}
]
},
mind: {
/* 元数据,定义思维导图的名称、作者、版本等信息 */
meta: {
name: '轨迹关系图',
author: '',
version: '0.2'
},
/* 数据格式声明 */
format: 'node_tree',
/* 数据内容 */
data: {
id: 'root',
topic: '轨迹关系图',
children: [
{
id: 'easy1', // [必选] ID, 所有节点的ID不应有重复,否则ID重复的结节将被忽略
topic: '10月1日', // [必选] 节点上显示的内容
direction: 'right', // [可选] 节点的方向,此数据仅在第一层节点上有效,目前仅支持 left 和 right 两种,默认为 right
expanded: true, // [可选] 该节点是否是展开状态,默认为 true
children: [
{ id: '1', topic: 'Easy to show' },
{ id: '2', topic: 'Easy to edit' },
{ id: '3', topic: 'Easy to store' },
{ id: '4', topic: 'Easy to embed' },
{ id: '5', topic: 'Easy to edit' },
{ id: '6', topic: 'Easy to store' },
{ id: '7', topic: 'Easy to embed' }
]
}
]
}
},
options: {
container: 'jsmind_container', // [必选] 容器的ID
editable: false, // [可选] 是否启用编辑
theme: '', // [可选] 主题
view: {
engine: 'canvas', // 思维导图各节点之间线条的绘制引擎
hmargin: 100, // 思维导图距容器外框的最小水平距离
vmargin: 50, // 思维导图距容器外框的最小垂直距离
line_width: 2, // 思维导图线条的粗细
line_color: '#ddd' // 思维导图线条的颜色
},
layout: {
hspace: 120, // 节点之间的水平间距
vspace: 30, // 节点之间的垂直间距
pspace: 20 // 节点与连接线之间的水平间距(用于容纳节点收缩/展开控制器)
},
shortcut: {
enable: false // 是否启用快捷键 默认为true
}
}
}
},
methods: {
formatData(data) {
let objNew = []
for (let i in data) {
objNew.push({
id: i,
topic: i,
direction: 'right',
expanded: true,
children: data[i]
})
}
const obj = {
meta: {
name: '轨迹关系图',
author: '',
version: '0.2'
},
format: 'node_tree',
data: {
id: 'root',
topic: '轨迹关系图',
children: objNew
}
}
this.jm = jsMind.show(this.options, data)
}
}
}
</script>
<style lang="less" scoped>
#jsmind_container {
width: 100%;
height: 100vh;
}
.header {
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
padding: 24px;
.card {
margin-left: 20px;
}
.blod {
font-weight: 500;
}
}
</style>
网友评论