simulation-front/src/views/sceneLibrary/components/templateView.vue

<template>
    <div class="templateViewPanel">
        <div id="jsmind_container"></div>
    </div>
</template>

<script>
import jsMind from "@/lib/jsmind";
import "@/assets/common/css/jsmind.css";

export default {
    name: "templateView", // 模板预览
    components: {},
    data() {
        return {
            mind: {},
            jm: {},
            options: {
                container: "jsmind_container",
                editable: false,
                theme: "primary",
                mode: "side",
            },
        };
    },

    props: {
        viewData: {
            type: Array,
            default: [],
        },
        errArr: {
            type: Array,
            default: [],
        },
    },

    watch: {
        viewData(val) {
            if (val && val.length > 0) {
                this.load_jsmind();
            }
        },
    },

    methods: {
        // 用jsmind插件，进行模板预览
        load_jsmind() {
            this.mind = {
                meta: {
                    name: "templateView",
                },
                format: "node_array",
                data: this.viewData,
            };
            this.jm.show(this.mind);
            this.jm.expand_all();

            this.jm.enable_edit();
            this.errArr.forEach((i) => {
                this.jm.set_node_color(i, "red");
            });
            this.jm.disable_edit();
        },
    },

    mounted() {
        this.jm = new jsMind(this.options);
        this.load_jsmind();

        setTimeout(()=>{
            let body = $('.templateViewDia .el-dialog__body').height();
            let panel = $('.templateViewDia .templateViewPanel').height();

            if(panel < body - 10 ) {
                $('.templateViewDia .el-dialog__body').addClass('toCenter');
            }
        }, 0)
    },
};
</script>

<style lang='less' scoped>
.templateViewPanel {
    display: flex;
    justify-content: center;
    align-items: center;

    #jsmind_container {
        // display: flex;
        // justify-content: center;
        // align-items: center;
        // width: 94%;
        // height: calc(100% - 130px);
        // height: 100%;
        // min-height: 400px;
        // border: solid 1px #ccc;
        // background: #f4f4f4;
        overflow: auto;
    }
}
</style>