/* 中间页面 */
<template>
    <div class='center-bar'>
        <el-row :gutter="10">
            <el-col :span="8">
                <ProblemArea/>
            </el-col>
            <el-col :span="8">
                <el-row>
                    <el-col :span="24">
                        <CheckArea/>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <ControlArea/>
                    </el-col>
                </el-row>
            </el-col>
            <el-col :span="8">
                <el-row>
                    <el-col :span="24">
                        <RecommendedArea/>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <LabelArea/>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <AlarmArea/>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </div>
</template>
<script>
    import AlarmArea from './area/AlarmArea.vue'
    import CheckArea from './area/CheckArea.vue'
    import ControlArea from './area/ControlArea.vue'
    import LabelArea from './area/LabelArea.vue'
    import ProblemArea from './area/ProblemArea.vue'
    import RecommendedArea from './area/RecommendedArea.vue'

    export default {
        components: {
            AlarmArea,
            CheckArea,
            ControlArea,
            LabelArea,
            ProblemArea,
            RecommendedArea
        },
        props:{
            datas:Array,
            values:Array,
        }
    }
</script>

<style scoped>
    .center-bar {
        position: relative;
        box-sizing: border-box;
        height: 90vh;
        background-color: #000000;
        padding-top: 10px;
        padding-left: 5px;
        padding-right: 5px;
        padding-bottom: 5px;
        margin-top: 0;
        margin-right: 0;
        margin-bottom: 3px;
        margin-left: 0;
        display: flex;
        flex-direction: column;
    }
</style>