<template>
    <div class="page-pack">
        <div class="container">
            <div class="tabla-pack">
                <div class="tr">
                    <div class="th-l">北进口VOC浓度</div>
                    <div class="th-r">
                        <span class="text">{{northCONC}}</span>
                    </div>
                </div>
                <div class="tr">
                    <div class="th-l">南进口VOC浓度</div>
                    <div class="th-r">
                        <span class="text">{{southCONC}}</span>
                    </div>
                </div>
                <div class="tr">
                    <div class="th-l">出口VOC浓度</div>
                    <div class="th-r">
                        <span class="text">{{exitCONC}}</span>
                    </div>
                </div>
                <div class="time">时间: {{timeNow}}</div>
            </div>
        </div>
    </div>
</template>

<script>
    import Moment from 'moment'

    export default {
        name: 'StationVoc',
        data () {
            return {
                // 屏幕显示当前时间
                timeNow: '',
                // 当前时间定时器
                nowTimer: '',
                // 数据请求定时器
                dataTimer: '',
                // 出口VOC浓度
                exitCONC: null,
                // 北进口VOC浓度
                northCONC: null,
                // 南进口VOC浓度
                southCONC: null
            }
        },
        methods: {
            // 计算实时时间
            getTimeNow () {
                this.timeNow = Moment().format('YYYY-MM-DD HH:mm:ss')
                this.nowTimer = setInterval(() => {
                    this.timeNow = Moment().format('YYYY-MM-DD HH:mm:ss')
                }, 1000)
            },
            // 获取VOC实时数据
            getVOCRealData () {
                this.$fetch('led-controller/VOC-get', {}).then(response => {
                    this.exitCONC = _.cloneDeep(response.exitCONC)
                    this.northCONC = _.cloneDeep(response.northCONC)
                    this.southCONC = _.cloneDeep(response.southCONC)
                })
            }
        },
        mounted () {
            setTimeout(() => {
                this.width = document.body.offsetWidth
                this.height = document.body.offsetHeight
                // 计算实时时间
                this.getTimeNow()
                // 获取VOC实时数据
                this.getVOCRealData()
                this.dataTimer = setInterval(() => {
                    // 获取VOC实时数据
                    this.getVOCRealData()
                }, 60000)
            }, 0)
        },
        beforeDestroy () {
            clearInterval(this.nowTimer)
            clearInterval(this.dataTimer)
        }
    }
</script>

<style lang="scss" scoped>
    .page-pack {
        width: 100%;
        height: 100%;
        .container {
            width: 1842px;
            height: 921px;
            background-color: #111;
            .tabla-pack {
                overflow: hidden;
                .tr {
                    overflow: hidden;
                    .th-l {
                        height: 225px;
                        width: 1218.5px;
                        border-right: 5px solid yellow;
                        border-bottom: 5px solid yellow;
                        float: left;
                        text-align: center;
                        color: yellow;
                        font-size: 150px;
                        line-height: 225px;
                    }
                    .th-r {
                        float: right;
                        height: 225px;
                        width: 618.5px;
                        border-bottom: 5px solid yellow;
                        text-align: center;
                        color: yellow;
                        line-height: 225px;
                        .text {
                            font-size: 150px;
                        }
                    }
                }
                .time {
                    height: 225px;
                    width: 1842px;
                    color: yellow;
                    font-size: 150px;
                    line-height: 225px;
                }
            }
        }      
    }
</style>