快捷導航

vue2使用思維導圖jsmind的詳細代碼

更新時間：2024年06月18日 11:33:23 作者：emoji111111

jsMind是一個基于Js的思維導圖庫,jsMind是一個純JavaScript類庫,用于創(chuàng)建、展示和操作思維導圖,這篇文章主要給大家介紹了關(guān)于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、頁面使用

//后端返回的數(shù)據(jù)
data:[
    {rylx: "網(wǎng)格員", xgnr: "上報事件35件"}
    {rylx: "網(wǎng)格員", xgnr: "安全檢查 53 戶"}
]

最終結(jié)果

<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: {
                /* 元數(shù)據(jù)，定義思維導圖的名稱、作者、版本等信息 */
                meta: {
                    name: '思維導圖',
                    author: '****',
                    version: '0.2'
                },
                /* 數(shù)據(jù)格式聲明 */
                format: 'node_array',
                /* 數(shù)據(jù)內(nèi)容 */
                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', // 思維導圖各節(jié)點之間線條的繪制引擎
                    line_width: 2, // 思維導圖線條的粗細
                    line_color: '#D9D9D9' // 思維導圖線條的顏色
                },
                layout: {
                    hspace: 80, // 節(jié)點之間的水平間距
                    vspace: 10, // 節(jié)點之間的垂直間距
                    pspace: 10 // 節(jié)點與連接線之間的水平間距(用于容納節(jié)點收縮/展開控制器)
                }
            }
            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>