jsMind --轨迹关系图

<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>