ioc-admin-ui/src/views/systemManagement/strategyConfiguration/smartMeeting.vue

<template>
    <div class="sub-container">
        <div class="left-pane">
            <el-input placeholder="请输入关键字" suffix-icon="el-icon-search" v-model="filterText"></el-input>
            <el-tree ref="tree" :data="data" :props="defaultProps" node-key="id" default-expand-all
                :filter-node-method="filterNode" @node-click="handleNodeClick">
            </el-tree>
        </div>
        <div class="right-pane">
            <div>
                <p class="info">选择设备</p>
            </div>
            <div style="display: flex; margin-left: 20px;">
                <div>
                    <el-tree :data="data1" :default-checked-keys="[1]" :props="defaultProps" show-checkbox node-key="id"
                        @node-click="handleNodeClick">
                    </el-tree>
                    <el-tree :data="data2" :default-checked-keys="[1]" :props="defaultProps" show-checkbox node-key="id"
                        @node-click="handleNodeClick">
                    </el-tree>
                </div>
                <div style="margin-left: 200px">
                    <el-tree :data="data3" :default-checked-keys="[1]" :props="defaultProps" show-checkbox node-key="id"
                        @node-click="handleNodeClick">
                    </el-tree>
                    <el-tree :data="data4" :props="defaultProps" show-checkbox node-key="id" @node-click="handleNodeClick">
                    </el-tree>
                </div>
            </div>
        </div>
    </div>
</div></template>

<script>
export default {
    data() {
        return {
            total: 0,
            filterText: '',
            data: [
                {
                    label: '3F',
                    children: [{
                        label: '301会议室',
                    }, {
                        label: '302会议室'
                    }, {
                        label: '303会议室'
                    }]
                },
                {
                    label: '4F',
                    children: [{
                        label: '401会议室',
                    }, {
                        label: '402会议室'
                    }, {
                        label: '403会议室'
                    }]
                }
            ],
            data1: [{
                id: 1,
                label: '闸机系统-人脸门禁设备',
                children: [{

                }]
            }],
            data2: [{
                id: 1,
                label: '能源系统-灯光控制设备',
                children: [{

                }]
            }],
            data3: [{
                id: 1,
                label: '能源系统-空调控制设备',
                children: [{

                }]
            }],
            data4: [{
                label: '能源系统-灯光控制设备',
                children: [{

                }]
            }],
            defaultProps: {
                children: 'children',
                label: 'label'
            }
        }
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val);
        }
    },
    methods: {
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        handleNodeClick() {
            //
        }
    }
}
</script>

<style lang="less" scoped>
.sub-container {
    position: relative;
    line-height: 20px;
    background-color: rgba(255, 255, 255, 1);
    color: rgba(16, 16, 16, 1);
    font-size: 14px;
    text-align: center;
    //box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);

    .left-pane {
        width: 300px;
        padding: 0 15px 0 15px;

        .el-tree {
            height: 650px;
            margin: 15px;
            background-color: rgb(247, 245, 243)
        }
    }

    .right-pane {
        width: 1340px;
        position: absolute;
        margin-left: 330px;
        top: 0;
        margin-right: 20px;

        .info {
            text-align: left;
            padding: 10px;
            font-size: 25px;
        }
    }
}
</style>