neic-hefeng/src/components/CenterPage.vue

/* 中间页面 */
<template>
    <div class='status-bar'>
        <el-row :gutter="20">
            <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">
                <div>
                    <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>
                </div>
            </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
    }
}
</script>

<style scoped>
    .status-bar {
        height: 91vh;
        background-color: blue;
    }
</style>