<template>
    <div class="page-pack">
        <div class="container" :style="{transform: zoom}" style="transform-origin: 0 0">
            <!-- 设备利用率 -->
            <MachineUtilizationRate
                :pollingRequestTime="pollingRequestTime">
            </MachineUtilizationRate>
            <!-- 设备故障率 -->
            <MachineFailureRate
                :pollingRequestTime="pollingRequestTime">
            </MachineFailureRate>
            <!-- 设备利用率趋势 -->
            <MachineUtilizationTrend
                :pollingRequestTime="pollingRequestTime">
            </MachineUtilizationTrend>
            <!-- 设备故障率趋势图 -->
            <MachineFailureTrend
                :pollingRequestTime="pollingRequestTime">
            </MachineFailureTrend>
            <!-- 设备运行状态 -->
            <MachineOperatingStatus
                :pollingRequestTime="pollingRequestTime">
            </MachineOperatingStatus>
            <!-- 设备状态趋势图 -->
            <MachineStateTrend
                :pollingRequestTime="pollingRequestTime">
            </MachineStateTrend>
            <!-- 设备告警 -->
            <MachineWarning
                :pollingRequestTime="pollingRequestTime">
            </MachineWarning>
        </div>
    </div>
</template>

<script>
    import MachineUtilizationRate from './components/MachineUtilizationRate'
    import MachineFailureRate from './components/MachineFailureRate'
    import MachineUtilizationTrend from './components/MachineUtilizationTrend'
    import MachineFailureTrend from './components/MachineFailureTrend'
    import MachineOperatingStatus from './components/MachineOperatingStatus'
    import MachineStateTrend from './components/MachineStateTrend'
    import MachineWarning from './components/MachineWarning'

    export default {
        name: 'CenterControl',
        components: {
            MachineUtilizationRate,
            MachineFailureRate,
            MachineUtilizationTrend,
            MachineFailureTrend,
            MachineOperatingStatus,
            MachineStateTrend,
            MachineWarning
        },
        data () {
            return {
                // 默认缩放比例
                zoom: 'scale(0)',
                // X缩放比
                width: 0,
                // Y缩放比
                height: 0,
                // 轮询请求标识时间
                pollingRequestTime: ''
            }
        },
        methods: {
            // 轮询请求图表数据
            pollingGetEchartData () {
                this.pollingRequestTime = new Date()
                setInterval(() => {
                    this.pollingRequestTime = new Date()
                }, 60000)
            }
        },
        mounted () {
            this.width = document.body.offsetWidth
            this.height = document.body.offsetHeight
            this.zoom = `scale(${this.width / 2550},${this.height / 1140})`
            // 轮询请求图表数据
            this.pollingGetEchartData()
        }
    }
</script>

<style lang="scss" scoped>
    .page-pack {
        height: 100%;
        width: 100%;
        background-color: #001927;

        .container {
            margin: 0 auto;
            width: 2550px;
            height: 1140px;
            background: url('../../assets/images/CenterControl/center_control_bg.png') no-repeat;
            position: relative;
        }
    }
</style>
