vue2 使用思维导图 jsmind

1、首先安装

npm install vue-jsmind

2、在main.js 里面引入

import jm from 'vue-jsmind'
Vue.use(jm)
if (window.jsMind) {
    Vue.prototype.jsMind = window.jsMind
}

3、页面使用

//后端返回的数据
data:[
    {rylx: "网格员", xgnr: "上报事件35件"}
    {rylx: "网格员", xgnr: "安全检查 53 户"}
]

最终结果

<template>
      <div id="jsmind_container_box"></div>
</template>

<script>
import rootIcon from '@/assets/images/img_ry.png'

export default {
    props: {
        data: {
            type: Array
        }
    },
    computed: {
        findParentId() {
            return function(item) {
                var parentItem = this.testData.filter(p => {
                    return item.rylx == p.topic
                })
                return parentItem[0].id
            }
        },
        uniqueItem() {
            return function(arr) {
                var uniqueArr = [...new Set(arr.map(item => item.rylx))].map(rylx =>
                    arr.find(item => item.rylx === rylx)
                )
                return uniqueArr
            }
        }
    },
    data() {
        return {
            testData: [],
            mind: {
                /* 元数据，定义思维导图的名称、作者、版本等信息 */
                meta: {
                    name: '思维导图',
                    author: '****',
                    version: '0.2'
                },
                /* 数据格式声明 */
                format: 'node_array',
                /* 数据内容 */
                data: []
            },
            styles: {
                level1: {
                    background: '#d7e2ff',
                    color: '#7581f8',
                    borderRadius: '80px',
                    fontWeight: 'bold',
                    boxShadow: 'none',
                    borderRadius: '80px',
                    fontSize: '14px',
                    border: 'none',
                    padding: '12px 20px'
                },
                level2: {
                    background: '#FFFFFF',
                    color: '#7581f8',
                    borderRadius: '80px',
                    fontWeight: '400',
                    boxShadow: 'none',
                    borderRadius: '80px',
                    border: '1px solid #7581f8',
                    fontSize: '14px',
                    color: '#7581f8',
                    padding: '8px 24px'
                }
            }
        }
    },
    mounted() {
        this.handleMind()
    },
    methods: {
        handleMind() {
            var that = this
            const root = {
                id: 'root',
                topic: '',
                'background-image': rootIcon,
                width: '200',
                height: '200',
                isroot: 'true'
            }
            var middleIndex = parseInt(that.data.length / 2)
            var newArr = this.uniqueItem(that.data)
            newArr.forEach((item, index) => {
                let query = {
                    id: String(index),
                    parentid: 'root',
                    topic: item.rylx,
                    direction: middleIndex == '1' ? 'right' : index < middleIndex ? 'left' : 'right'
                }

                that.testData.push(query)
            })
            that.data.forEach((item, index) => {
                if (item.xgnr.length) {
                    let childItem = {
                        id: index + '0',
                        parentid: this.findParentId(item),
                        topic: item.xgnr,
                        direction: 'left'
                    }
                    that.testData.push(childItem)
                }
            })

            that.testData.unshift(root)
            that.mind.data = that.testData
            that.init()
            that.applyStyles()
        },
        init() {
            var options = {
                container: 'jsmind_container_box',
                editable: false,
                view: {
                    engine: 'canvas', // 思维导图各节点之间线条的绘制引擎
                    line_width: 2, // 思维导图线条的粗细
                    line_color: '#D9D9D9' // 思维导图线条的颜色
                },
                layout: {
                    hspace: 80, // 节点之间的水平间距
                    vspace: 10, // 节点之间的垂直间距
                    pspace: 10 // 节点与连接线之间的水平间距(用于容纳节点收缩/展开控制器)
                }
            }
            this.jm = jsMind.show(options)
            this.jm.show(this.mind)
        },

        applyStyles() {
            const root = this.jm.get_root()._data.view
            root.element.style.borderRadius = '699px'
            root.element.style.backgroundSize = 'cover'
            root.element.style.boxShadow = 'none'
            this.repeatItem(this.jm.get_root().children, this.styles.level1)
        },
        repeatItem(nodes, style) {
            for (let i = 0; i < nodes.length; i++) {
                const node = nodes[i]
                node._data.view.element.style.color = style.color
                node._data.view.element.style.fontSize = style.fontSize
                node._data.view.element.style.borderRadius = style.borderRadius
                node._data.view.element.style.background = style.background
                node._data.view.element.style.fontWeight = style.fontWeight
                node._data.view.element.style.boxShadow = style.boxShadow
                node._data.view.element.style.border = style.border
                node._data.view.element.style.padding = style.padding
                if (nodes[i].children.length) {
                    this.repeatItem(nodes[i].children, this.styles.level2)
                }
            }
        }
    }
}
</script>
<style scoped>
#jsmind_container_box {
    width: 100%;
    height: 302px !important;
    border: 1px solid #d9d9d9;
}
</style>