dc3-web/src/App.vue

<template>
    <div id="app">
        <el-container class="el-container-iot">
            <el-menu default-active="1-4-1" class="el-menu-vertical-iot" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
                <h1>IOT DC3</h1>
                <el-submenu index="1">
                    <template slot="title">
                        <i class="el-icon-cpu"></i>
                        <span slot="title">设备管理</span>
                    </template>
                    <el-menu-item>设备接入</el-menu-item>
                    <el-menu-item>设备解析</el-menu-item>
                </el-submenu>
                <el-submenu index="2">
                    <template slot="title">
                        <i class="el-icon-odometer"></i>
                        <span slot="title">数据管理</span>
                    </template>
                    <el-menu-item>测点配置</el-menu-item>
                    <el-menu-item>数据监控</el-menu-item>
                </el-submenu>
                <el-submenu index="3">
                    <template slot="title">
                        <i class="el-icon-video-camera-solid"></i>
                        <span slot="title">媒体管理</span>
                    </template>
                    <el-menu-item>视频管理</el-menu-item>
                    <el-menu-item>图片管理</el-menu-item>
                </el-submenu>
            </el-menu>
            <el-container>
                <el-header>
                    <el-radio-group v-model="isCollapse">
                        <el-radio-button :label="false">展开</el-radio-button>
                        <el-radio-button :label="true">收起</el-radio-button>
                    </el-radio-group>
                </el-header>
                <el-main>
                    <router-view/>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<style lang="scss">
    body {
        margin: 0px;
        height: 100%;
    }

    html, #app {
        height: 100%;
    }

    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
    }

    .el-container-iot {
        height: 100%;
    }

    .el-menu-vertical-iot {
        height: 100%;
    }

    .el-menu-vertical-iot:not(.el-menu--collapse) {
        width: 200px;
    }
</style>

<script>
    export default {
        data() {
            return {
                isCollapse: false
            }
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath)
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath)
            }
        }
    }
</script>