<template>
    <div class="configPage"  :style="pageHeight">
        <div class="configMain">
            <div :span="3" class="configMain_left">
                <!-- @select="handleSelect" -->
                <el-menu
                :default-active="$route.path"
                router
                :unique-opened="true"
                :default-openeds="openeds"
                text-color="#7E7C7C"
                active-text-color="#f6ab00">
                    <!-- 引入组件 -->
                    <menu-tree :menuData="forecastData"></menu-tree>
                </el-menu>
            </div>
            <div :span="21" class="configMain_right" :style="mainHeight">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<script>
import MenuTree from '../components/configPage/menuTreeconfig.vue'
export default {
    components: {
        MenuTree
    },
    data() {
        return {
            showDia:false,            
            forecastData:[],
            electricData: [],
            openeds:['1'],
            preLeftMeun: 1,
            windowWidth: document.documentElement.clientWidth,  //实时屏幕宽度
            windowHeight: document.documentElement.clientHeight-60
        }
    },
    created(){
        this.forecastData = [
            {
                index: '/systemSettings/Overview',
                name: '系统设置首页'
            },
            {
            index: '1',
            name: '基础信息管理',
            children: [
                {
                index: '/systemSettings/regionalManagement',
                name: '区域管理'
                },
                {
                index: '/systemSettings/allStationSettingPage',
                name: '场站管理'
                },
                {
                index: '/systemSettings/unitManagement',
                name: '机组管理'
                },
                {
                index: '/systemSettings/configurationDesign',
                name: '组态设计'
                }
            ]
            },
            {
            index: '2',
            name: '测点管理',
            children: [
                {
                index: '/systemSettings/unitMeasurementPoint',
                name: '机组测点管理'
                },
                {
                index: '/systemSettings/stationPowerMeasurementPoint',
                name: '场站功率测点管理'
                },
                {
                index: '/systemSettings/standardizeTheManagement',
                name: '规范测点管理'
                }
            ]
            },
            {
            index: '3',
            name: '计算管理',
            children: [
                {
                index: '/systemSettings/calculationModelConfiguration',
                name: '计算模型配置'
                }
            ]
            },
            {
            index: '4',
            name: '数据管理',
            children: [
                {
                index: '/systemSettings/numericalWeatherForecast',
                name: '数值天气预报管理'
                },
                {
                index: '/systemSettings/generationPlan',
                name: '发电计划管理'
                },
                {
                index: '/systemSettings/forecastReporting',
                name: '预测上报管理'
                }
            ]
            },
            {
            index: '5',
            name: '系统管理',
            children: [
                {
                index: '/systemSettings/personManagement',
                name: '用户管理'
                },
                {
                index: '/systemSettings/roleManagement',
                name: '角色管理'
                },
                {
                index: '/systemSettings/menuManagement',
                name: '菜单管理'
                }
            ]
            }
        ]
    },
    computed:{
        pageHeight() {
            return {
                'height': document.documentElement.clientHeight-90 + 'px'
            }
        },
        mainHeight() {
            return {
                'height': document.documentElement.clientHeight-100 + 'px'
            }
        },
    },
    mounted() {
        this.showDia = true
    },
    methods:{
        
    }
}
</script>

<style lang="less">
.configPage{
    width: calc(100% - 20px);
    padding: 10px 10px 10px 10px;
    background: #edeffb;
    border-radius: 10px;
    .configMain{
        display: flex;
        .configMain_left{
            width: 13%;
            background: #fff;
            border-radius: 10px;
            .el-menu{
                border: none;
                margin-top: 5px;
            }
        }
        .configMain_right{
            width: 87%;
            padding-left: 10px;
            padding-top: 10px;
            margin-left: 10px;
            background: #fff;
            border-radius: 10px;
        }
    }
}
</style>