<template>
  <div class="container">
        <div class="page-pack" style="transform-origin: 0 0">
        <div class="title-pack">中通客车涂装车间</div>
        <div class="table-pack">
            <div class="tr clear-float">
                <div class="th-l">昨日进车数量</div>
                <div class="th-2">{{yesterdayDataIN}}</div>
                <div class="th-3">昨日交车数量</div>
                <div class="th-4">{{yesterdayDataOUT}}</div>
            </div>
            <div class="tr clear-float">
                <div class="th-l">当日进车数量</div>
                <div class="th-2">{{todayDataIN}}</div>
                <div class="th-3">当日交车数量</div>
                <div class="th-4">{{todayDataOUT}}</div>
            </div>
            <div class="tr clear-float">
                <div class="th-l">电泳当日进车数量</div>
                <div class="th-2">{{electrophoresesDataIN}}</div>
                <div class="th-3">电泳当日交车数量</div>
                <div class="th-4">{{electrophoresesDataOUT}}</div>
            </div>
            <div class="tr clear-float">
                <div class="th-l">隔热防腐当日进车</div>
                <div class="th-2">{{insulatingAnticorrosiveDataIN}}</div>
                <div class="th-3">隔热防腐当日交车</div>
                <div class="th-4">{{insulatingAnticorrosiveDataOUT}}</div>
            </div>
            <div class="tr clear-float">
                <div class="th-l">腻子当日进车数量</div>
                <div class="th-2">{{puttyDataIN}}</div>
                <div class="th-3">腻子当日交车数量</div>
                <div class="th-4">{{puttyDataOUT}}</div>
            </div>
            <div class="tr clear-float">
                <div class="th-l">中涂当日进车数量</div>
                <div class="th-2">{{floatingCoatDataIN}}</div>
                <div class="th-3">中涂当日交车数量</div>
                <div class="th-4">{{floatingCoatDataOUT}}</div>
            </div>
            <div class="tr clear-float">
                <div class="th-l borderBot">面/清漆当日进车数量</div>
                <div class="th-2 borderBot">{{surfaceVarnishDataIN}}</div>
                <div class="th-3 borderBot">面/清漆当日交车数量</div>
                <div class="th-4 borderBot">{{surfaceVarnishDataOUT}}</div>
            </div>
            <div class="time">时间：{{ timeNow }}</div>
        </div>
    </div>
  </div>
</template>

<script>
    import Moment from 'moment'
    export default {
        name: 'WorkShopPaintingWorkShop',
        data () {
            return {
                width: 0,
                height: 0,
                zoom: 'scale(0)',
                // 屏幕显示当前时间
                timeNow: null,
                // Data轮询定时器
                dataTimer: null,
                // 当日进车数据
                todayDataIN: null,
                // 当日出车数据
                todayDataOUT: null,
                // 昨日进车数据
                yesterdayDataIN: null,
                // 昨日出车数据
                yesterdayDataOUT: null,
                // 电泳车辆进车数据
                electrophoresesDataIN: null,
                // 电泳车辆出车数据
                electrophoresesDataOUT: null,
                // 隔热防腐当日车辆进车数据
                insulatingAnticorrosiveDataIN: null,
                // 隔热防腐当日车辆出车数据
                insulatingAnticorrosiveDataOUT: null,
                // 腻子当日车辆进车数据
                puttyDataIN: null,
                // 腻子当日车辆出车数据
                puttyDataOUT: null,
                // 中涂当日车辆进车数据
                floatingCoatDataIN: null,
                // 中涂当日车辆出车数据
                floatingCoatDataOUT: null,
                // 面/清漆当日车辆进车数据
                surfaceVarnishDataIN: null,
                // 面/清漆当日车辆出车数据
                surfaceVarnishDataOUT: null,
                tempData: [
                    {
                        'id': null,
                        'areaNo': '0',
                        'dateType': 'YESTERDAY',
                        'busType': 'IN',
                        'size': 20
                    },
                    {
                        'id': null,
                        'areaNo': '0',
                        'dateType': 'YESTERDAY',
                        'busType': 'OUT',
                        'size': 20
                    },
                    {
                        'id': null,
                        'areaNo': '0',
                        'dateType': 'TODAY',
                        'busType': 'IN',
                        'size': 20
                    },
                    {
                        'id': null,
                        'areaNo': '0',
                        'dateType': 'TODAY',
                        'busType': 'OUT',
                        'size': 20
                    },
                    {
                        'id': null,
                        'areaNo': '2',
                        'dateType': 'TODAY',
                        'busType': 'OUT',
                        'size': 29
                    },
                    {
                        'id': null,
                        'areaNo': '4',
                        'dateType': 'TODAY',
                        'busType': 'OUT',
                        'size': 22
                    }
                ]
            }
        },
        methods: {
            judgeTimeNow () {
                this.timeNow = Moment().format('YYYY-MM-DD HH-MM-SS')
                this.timer = setInterval(() => {
                    this.timeNow = Moment().format('YYYY-MM-DD HH:mm:ss')
                }, 1000)
            },
            getData () {
                this.$fetch('area-controller/statistics-get', {}).then(res => {
                    console.log(res)
                    for (let item of this.tempData) {
                        if (item.areaNo === '0') {
                            if (item.dateType === 'YESTERDAY') {
                                if (item.busType === 'IN') {
                                    this.yesterdayDataIN = _.cloneDeep(item.size)
                                } else {
                                    this.yesterdayDataOUT = _.cloneDeep(item.size)
                                }
                            }
                            if (item.dateType === 'TODAY') {
                                if (item.busType === 'IN') {
                                    this.todayDataIN = _.cloneDeep(item.size)
                                } else {
                                    this.todayDataOUT = _.cloneDeep(item.size)
                                }
                            }
                        }
                        // 判断电泳区域有无车辆数据
                        if (item.areaNo === '2') {
                            if (item.dateType === 'TODAY') {
                                if (item.busType === 'IN') {
                                    this.electrophoresesDataIN = _.cloneDeep(item.size)
                                } else {
                                    this.electrophoresesDataOUT = _.cloneDeep(item.size)
                                }
                            }
                        }
                        // 判断隔热防腐区域有无车辆数据
                        if (item.areaNo === '3') {
                            if (item.dateType === 'TODAY') {
                                if (item.busType === 'IN') {
                                    this.insulatingAnticorrosiveDataIN = _.cloneDeep(item.size)
                                } else {
                                    this.insulatingAnticorrosiveDataOUT = _.cloneDeep(item.size)
                                }
                            }
                        }
                        // 判断腻子区域有无车辆数据
                        if (item.areaNo === '4') {
                            if (item.dateType === 'TODAY') {
                                if (item.busType === 'IN') {
                                    this.puttyDataIN = _.cloneDeep(item.size)
                                } else {
                                    this.puttyDataOUT = _.cloneDeep(item.size)
                                }
                            }
                        }
                        // 判断中涂区域有无车辆数据
                        if (item.areaNo === '5') {
                            if (item.dateType === 'TODAY') {
                                if (item.busType === 'IN') {
                                    this.floatingCoatDataIN = _.cloneDeep(item.size)
                                } else {
                                    this.floatingCoatDataOUT = _.cloneDeep(item.size)
                                }
                            }
                        }
                        // 判断面/清漆区域有无车辆数据
                        if (item.areaNo === '6') {
                            if (item.dateType === 'TODAY') {
                                if (item.busType === 'IN') {
                                    this.surfaceVarnishDataIN = _.cloneDeep(item.size)
                                } else {
                                    this.surfaceVarnishDataOUT = _.cloneDeep(item.size)
                                }
                            }
                        }
                    }
                })
            }
        },
        mounted () {
            this.getData()
            setTimeout(() => {
                this.getData()
                // 实时时间
                this.judgeTimeNow()
                // 每一分钟请求一次数据
                this.dataTimer = setInterval(() => {
                    this.getData()
                }, 60000)
                this.width = document.body.offsetWidth
                this.height = document.body.offsetHeight
                // this.zoom = `scale(${this.width / 1710})`
            }, 0)
        }
    }
</script>

<style lang="scss" scoped>
    .container {
        background-color: #111;

        .page-pack {
            width: 1556px;
            height: 1037px;
            background-color: #111;
            .borderBot {
                border-bottom: 2px solid yellow;
            }

            .title-pack {
                width: 1556px;
                height: 134px;
                text-align: center;
                color: yellow;
                line-height: 134px;
                font-weight: bold;
                font-size: 60px;
            }

            .table-pack {
                overflow: hidden;

                .tr {

                    .th-l,.th-2,.th-3,.th-4 {
                        width: 30%;
                        height: 110.625px;
                        border-top: 2px solid yellow;
                        border-right: 2px solid yellow;
                        float: left;
                        text-align: center;
                        color: yellow;
                        line-height: 110.625px;
                        font-weight: bold;
                        font-size: 48px;
                    }
                    .th-2 {width: 20%; font-size:60px }
                    .th-3 {width: 29.5%;}
                    .th-4 {width: 20%;border-right: none; font-size:60px}
                }
            }
            .time {
                width: 1710px;
                height: 110.625px;
                border-top: 2px solid yellow;
                color: yellow;
                font-weight: bold;
                line-height: 110.625px;
                font-size: 48px;
            }
        }
    }
</style>