<template>
    <div class="environmentMonitoring">
        <h2 style="margin-bottom: 20px;padding-bottom:7px;border-bottom:2px solid #ddd">环境检测</h2>
        <header class="H">
            <el-row type="flex">
                <el-col>
                    <el-select v-model="area" filterable placeholder="请选择">
                        <el-option
                            v-for="item in $store.state['areaList']"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-col>
            </el-row>
        </header>
        <section>
            <el-row type="flex">
                <el-col>
                    <E-H-T></E-H-T>
                </el-col>
                <el-col>
                    <E-H-Humidity></E-H-Humidity>
                </el-col>
            </el-row>
        </section>
    </div>
</template>

<script>
import EHT from "./charts/EHT";
import EHHumidity from "./charts/EHHumidity";

export default {
    data() {
        return {
            area: this.$store.state['areaList'][0].id
        };
    },
    components: {
        "E-H-T": EHT,
        "E-H-Humidity": EHHumidity
    },
    created() {},
    methods: {}
};
</script>

<style lang="scss" scoped>
.environmentMonitoring {
    .H {
        padding: 30px 70px 60px 70px;
    }
}
</style>