web-point-standard/src/views/config_point/steps/step4.vue

<template>
    <div class="h100 steps4">
        <div class="btns-view">
            <el-button>根据关键内容批量标准化设备标识</el-button>
            <el-button>根据关键内容批量对应数据字典</el-button>
        </div>
        <el-tabs type="border-card" @tab-click="clickTabs" class="tabs-h" tab-position="bottom">
            <el-tab-pane>
                <span slot="label">
              <i class="el-icon-date"></i> 我的行程
            </span>
                <js-mind-component ref="jsmind1"></js-mind-component>
            </el-tab-pane>
            <el-tab-pane class="h100" label="消息中心">
                <js-mind-component ref="jsmind2"></js-mind-component>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
    import jsMindComponent from "components/common/jsmind"
    export default {
        name: "steps4",
        data() {
            return {}
        },
        created() {},
        mounted() {},
        methods: {
            clickTabs(val) {
                console.log(this.$refs, val)
                var mind = {
                    /* 元数据，定义思维导图的名称、作者、版本等信息 */
                    meta: {
                        name: "jsMind-demo-tree",
                        author: "hizzgdev@163.com",
                        version: "0.2"
                    },
                    /* 数据格式声明 */
                    format: "node_tree",
                    /* 数据内容 */
                    data: {
                        id: "root",
                        topic: "jsMind",
                        children: [{
                                id: "easy",
                                topic: "Easy",
                                direction: "left",
                                expanded: false,
                                children: [{
                                        id: "easy1",
                                        topic: "Easy to show"
                                    },
                                    {
                                        id: "easy2",
                                        topic: "Easy to edit"
                                    },
                                    {
                                        id: "easy3",
                                        topic: "Easy to store"
                                    },
                                    {
                                        id: "easy4",
                                        topic: "Easy to embed"
                                    }
                                ]
                            },
                            {
                                id: "open",
                                topic: "Open Source",
                                direction: "right",
                                expanded: true,
                                children: [{
                                        id: "open1",
                                        topic: "on GitHub"
                                    },
                                    {
                                        id: "open2",
                                        topic: "BSD License"
                                    }
                                ]
                            },
                            {
                                id: "powerful",
                                topic: "Powerful",
                                direction: "right",
                                children: [{
                                        id: "powerful1",
                                        topic: "Base on Javascript"
                                    },
                                    {
                                        id: "powerful2",
                                        topic: "Base on HTML5"
                                    },
                                    {
                                        id: "powerful3",
                                        topic: "Depends on you"
                                    }
                                ]
                            },
                            {
                                id: "other",
                                topic: "test node",
                                direction: "left",
                                children: [{
                                        id: "other1",
                                        topic: "I'm from local variable"
                                    },
                                    {
                                        id: "other2",
                                        topic: "I can do everything"
                                    }
                                ]
                            }
                        ]
                    }
                };
                let jsMind1 = this.$refs.jsmind1.initData({}, mind)
            }
        },
        components: {
            jsMindComponent
        }
    }
</script>
<style lang="scss">
    .tabs-h {
        height: calc(100% - 50px);
        .el-tabs__content {
            height: calc(100% - 70px);
            >div {
                height: 100%;
            }
        }
    }
    .saga-mind-view {
        //   height: 450px;
    }
</style>