v3-big-data-web/src/App.vue

<template>
    <div id="app">
        <transition name="fade"
                    mode="out-in">
            <router-view></router-view>
        </transition>
    </div>
</template>

<script>
    import axios from 'axios'
    import { MessageBox } from 'element-ui'
    export default {
        name: 'App',
        data() {
            return {
                innerHeight: window.innerHeight,
                innerWidth: window.innerWidth,
            }
        },
        mounted() {
            document.title = process.env.VUE_APP_TITLE;
            this.banZoom();
            //根据当前浏览器宽度与额定尺寸计算transform缩放值
            document.getElementById('app').style.transform = `scale(${document.documentElement.clientWidth / 1920})`;
            //根据当前浏览器宽度与额定尺寸计算当前浏览器可观看尺寸高度
            document.getElementById('app').style.height = (window.innerHeight / (document.documentElement.clientWidth / 1920 * 100)) * 100 + 'px';
            //当尺寸改变后从新计算
            window.onresize = () => {
                return (() => {
                    document.getElementById('app').style.transform = `scale(${document.documentElement.clientWidth / 1920})`;
                    document.getElementById('app').style.height = (window.innerHeight / (document.documentElement.clientWidth / 1920 * 100)) * 100 + 'px';

                })();
            };
            this.inspectRenewal();
        },
        methods: {
            banZoom() {
                // 禁止通过 ctrl + +/- 和  ctrl + 滚轮 对页面进行缩放
                document.addEventListener('keydown', function (event) {
                    if ((event.ctrlKey === true || event.metaKey === true) &&
                        (event.which === 61 || event.which === 107 ||
                            event.which === 173 || event.which === 109 ||
                            event.which === 187 || event.which === 189)) {
                        event.preventDefault()
                    }
                }, false)
                // Chrome IE 360
                window.addEventListener('mousewheel', function (event) {
                    if (event.ctrlKey === true || event.metaKey) {
                        event.preventDefault()
                    }
                }, {
                    passive: false
                })
                // firefox
                window.addEventListener('DOMMouseScroll', function (event) {
                    if (event.ctrlKey === true || event.metaKey) {
                        event.preventDefault()
                    }
                }, {
                    passive: false
                })
            },
            //更新检查
            inspectRenewal(){
                const self = this;
                const intervalTime = 300000;
                checkForUpdates();
                self.timer = window.setInterval(checkForUpdates, intervalTime);
                async function checkForUpdates() {
                    axios.get('/version.txt').then((data) => {
                        if (data.data !== process.env.VUE_APP_RENEWAL_ENCODING){
                            MessageBox.confirm('发现新版本,是否立即刷新页面?', '系统提示', {
                                    confirmButtonText: '确定',
                                    showCancelButton:true,
                                    closeOnClickModal:false,
                                    cancelButtonText: '取消',
                                    type: 'warning'
                                }
                            ).then(() => {
                                clearInterval(self.timer);
                                location.reload(true);
                            }).catch(() => {});
                        }
                    })
                    // getFilesName().then(res=>{
                    //     if(res){
                    //         if(res !== process.env.VUE_APP_RENEWAL_ENCODING){
                    //             MessageBox.confirm('发现新版本,是否立即刷新页面?', '系统提示', {
                    //                     confirmButtonText: '确定',
                    //                     showCancelButton:true,
                    //                     closeOnClickModal:false,
                    //                     cancelButtonText: '取消',
                    //                     type: 'warning'
                    //                 }
                    //             ).then(() => {
                    //                 clearInterval(self.timer);
                    //                 location.reload(true);
                    //             }).catch(() => {});
                    //         }
                    //     }
                    // });
                }
                function getMetaContent(htmlContent) {
                    let matchContent = [];
                    const metaTags = htmlContent.match(/<meta[^>]*>/g) || [];
                    for (const tag of metaTags) {
                        if(tag.indexOf('renewalEncoding') != -1){
                            let matchName = tag.match(/content=[^]*>/g);
                            matchName =  removeChars(matchName[0], '>', '<', '"', "'");
                            matchContent =  matchName.split("=");
                        }
                    }
                    return matchContent[1];
                }
                function removeChars(str, ...chars) {
                    const pattern = new RegExp(`[${chars.join('')}]`, 'g');
                    return str.replace(pattern, '');
                }
                async function getFilesName() {
                    const response = await fetch("./index.html");
                    const htmlContent = await response.text();
                    return getMetaContent(htmlContent);
                }
            },
        },
        beforeDestroy() {
            //清除定时器
            clearInterval(this.timer);
        },
    }
</script>
<style>
    html{
        background-color: #062338;
        overflow: hidden;
    }
    #app {
        overflow: hidden;
        height: 100%;
        transform-origin: left top;
        width: 1920px;
        display: flex;
        flex-direction: column;
        flex: 1;
    }
    .el-loading-mask{
        background-color: rgba(255, 255, 255, 0)!important;
    }
    .el-loading-spinner{
        display: none;
    }
</style>