YZProjectCloud/yanzhu-ui-vue3/src/views/bim/bimSetting/ModelFloorTree.vue

<template>
    <div class="model-floor-tree scroll-box" :class="{ 'hide-tree': !showTree }">
        <div class="nav-header">
            <span class="title">结构树</span>
            <span class="toolbar">
                <el-icon color="#fff" @click="showTree=!showTree">
                    <ArrowUpBold v-if="showTree" />
                    <ArrowDownBold v-else />
                </el-icon>
            </span>
        </div>
        <!-- <a-tree
            checkable
            class="model-tree"
            :tree-data="modelTrees"
            :load-data="onLoadData"
            :replace-fields="replaceFields"
            @check="onCheckTree"
            v-model="checkedKeys"
            :selectedKeys="selectedKeys"
            @select="onSelect"
            default-expand-all
        >
            <template #title="{text}">
                <span>
                    {{text.name}}
                    <a-icon type="loading" v-show="text.disableCheckbox" />
                </span>
            </template>
        </a-tree>-->
        <div class="scroll-box">
            <a-tree ref="tree" v-model:expandedKeys="expandedKeys" v-model:selectedKeys="selectedKeys" :tree-data="modelTrees" checkable default-expand-all :load-data="loadTree"></a-tree>
        </div>
    </div>
</template>

<script>
import { getModelTree } from '@/api/bim/bimModel'
import { isLeaf } from 'ant-design-vue/es/vc-cascader/utils/commonUtil'
export default {
    props: {
        projectMessage: {
            type: Object,
            default: undefined,
        },
    },
    data() {
        return {
            modelTrees: [],
            replaceFields: {
                title: 'name',
                key: 'glid',
                value: 'glid',
            },
            expandedKeys: [],
            visibleList: [], //结构树显示构件列表
            checkedKeys: [], //用于清除选中状态
            selectedKeys: [],
            selectedFeature: undefined,
            requestedData: [], //已经请求过得不在请求
            firstClick: true,
            isMobile: false,
            showTree: true,
        }
    },
    mounted() {
        // let objs = this.projectMessage.map((d) => JSON.parse(d.gisJson))
        // for (let i = 0; i < objs.length; i++) {
        //     this.modelTrees.push({
        //         name: objs[i].name,
        //         children: [],
        //         data: objs[i],
        //     })
        // }
        this.modelTrees = [
            {
                title: '项目模型',
                level: 0,
                key: 'root',
                children: [],
                hadLoad: true,
            },
        ]
        this.projectMessage
            .map((d) => {
                d.gis = JSON.parse(d.gisJson)
                return d
            })
            .forEach((d) => {
                this.modelTrees[0].children.push({
                    title: d.modelName,
                    level: 1,
                    hasLoad: false,
                    model: d.lightweightName,
                    key: d.lightweightName,
                    glid: '',
                    children: [],
                    data: d,
                })
            })
        this.expandedKeys = ['root']
        this.$nextTick(() => {})
    },
    methods: {
        loadTree(a, b, c) {
            return new Promise((resolve, reject) => {
                if (a.hasLoad) {
                    resolve()
                    return
                }
                getModelTree(a.model, a.glid).then((d) => {
                    ;(d.data || []).forEach((e) => {
                        let title = e.externalId == 0 ? e.name : e.externalId
                        title = title.replace(/[\/\\"]/g, '')
                        a.children.push({
                            title: title,
                            key: e.glid,
                            glid: e.glid,
                            model: a.model,
                            children: [],
                            hasLoad: false,
                            isLeaf: e.externalId != 0,
                            data: e,
                        })
                    })
                    resolve()
                })
            })
        },
    },
}
</script>

<style lang="scss">
.model-floor-tree {
    position: absolute;
    width: 300px;
    top: 20px;
    left: 20px;
    color: #fff;
    background: #274754;
    &.hide-tree {
        height: 50px;
        .ant-tree {
            display: none;
        }
    }
    .nav-header {
        border-bottom: solid 1px #fff;
        line-height: 40px;
        padding: 0px 10px;
        position: relative;
        .title {
            color: rgb(0, 255, 212);
            font-weight: bold;
        }
        .toolbar {
            position: absolute;
            right: 10px;
            .el-icon {
                cursor: pointer;
            }
        }
    }
    .ant-tree {
        background: transparent;
        color: #fff;
    }
    .scroll-box {
        margin-top: 15px;
        height: 64vh;
        overflow-y: auto;

        &::-webkit-scrollbar {
            //整体样式
            height: 8px;
            width: 8px;
        }

        &::-webkit-scrollbar-thumb {
            //滑动滑块条样式
            border-radius: 1px;
            box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.2);
            background: #ffffff;
        }

        &::-webkit-scrollbar-track {
            //轨道的样式
            box-shadow: 0;
            border-radius: 0;
            background: rgba(255, 255, 255, 0.3);
        }

        .ant-tree-node-content-wrapper {
            color: #ffffff;
            white-space: nowrap;
            &.ant-tree-node-selected {
                background: #409eff54 !important;
            }
        }

        .ant-list-empty-text {
            padding: 5px;
            text-align: left;
        }
    }
}
</style>