devicestate.vue 1.37 KB
<template>
    <div class="manage-container device-log-wrapper">
        <iframe
          :src="devLogUrl"
          width="100%"
          :height="iframeHeight"
          frameborder="0"
          name="device_log"
          class="log-iframe"></iframe>
    </div>
</template>

<script>
export default {
    data() {
        return {
            devLogUrl: '',
            iframeHeight: 0,
        }
    },
    created() {
        this.iframeHeight = this.computedHeight('px');
        window.addEventListener('resize', () => {
            this.iframeHeight = this.computedHeight('px');
        })
        this.devLogUrl = window._vionConfig.logUrl;
    },
    mounted() {
        this.devLogUrl = window._vionConfig.logUrl;
    },
    methods: {
        computedHeight(unit) {
            let computedH = 0
                , winH = $(window).height()
                , scale = 0.16;
            if(winH <= 720) {
                scale = 0.18
            } else if (winH <= 768) {
                scale = 0.17
            } else if (winH <= 900) {
                scale = 0.17
            } else if (winH <= 1080) {
                scale = 0.16
            }
            computedH = winH - winH * scale;
            computedH = unit ? computedH + unit : computedH;
            return computedH;
        }
    }
}
</script>

<style scoped>
    .log-iframe {
        margin-top: 10px;
    }
</style>