IDCOL/webConfig/src/App.vue

<template>
    <div id="app">
        <Header v-if="headersShow"></Header>
        <div class="scrollbar_style"  :class="{'padding':headersShow}">
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
    Date.prototype.format = function(fmt) { 
        let ret;
        const opt = {
            "Y+": this.getFullYear().toString(),        // 年
            "m+": (this.getMonth() + 1).toString(),     // 月
            "d+": this.getDate().toString(),            // 日
            "H+": this.getHours().toString(),           // 时
            "M+": this.getMinutes().toString(),         // 分
            "S+": this.getSeconds().toString()          // 秒
            // 有其他格式化字符需求可以继续添加，必须转化成字符串
        };
        for (let k in opt) {
            ret = new RegExp("(" + k + ")").exec(fmt);
            if (ret) {
                fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
            }
        }
        return fmt; 
    }
    Number.prototype.formatNumberRgx = function() {
        var parts = this.toString().split(".");
        parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        return parts.join(".");
    };

    import Header from './components/header.vue'
    import { mapGetters } from 'vuex'
    import allUel from './api/allUel.js'
    import base from './api/base.js'
    import jqueryK from './api/jqueryK.js'

    export default {
        name: 'App',
        data(){
            return{
                headersShow:false,
                password:'654321'
            }
        },
        computed:{
            ...mapGetters({
                token:'token',
                client_key:'client_key',
                username:'username',
                version:'version',
                
                routerStr:'routerStr',

                avatar:'avatar',
                browserLanguage:'browserLanguage',

            }),
        },
        components: {
            Header
        },
        created(){
            let data = {};
            var storage = window.localStorage;
            var street = window.location.href.split("/")[2];
            let protocolStr = document.location.protocol;
            let subStrW = protocolStr=='https:'?'wss:':'ws:';
            let subStrT = new RegExp('https:');//创建正则表达式对象
            if(street == 'localhost:8080' || street == '127.0.0.1:8080'){
                street = '120.77.179.55'
                protocolStr = 'http:';
                data = {
                    avatar: "http://120.77.179.55/upload/image/73e766a761584c547ce785af826a4e6d.jpg",
                    client_key: "23be0e4c9a2e91b330bfeb7d20229e71",
                    id: "1",
                    name: "admin",
                    privilege: "",
                    role: 1,
                    token: "27cc9eaa89c63c65df47901692a70bc7",
                    username: "admin",
                    version: "0",
                }
                // data = {
                //     token:"41b3914983146b748c636d0f46cd1103",
                //     username:"plmpo",
                //     id:"92",
                //     role:4,
                //     name:"123",
                //     privilege:"2,3,4,5,6,7,9,10,12,13,14,15,16,17,34,51,53,55,60,19,20,21,22,23,24,25,26,27,28,29,31,52,54,56,63,33,35,36,37,40,41,42,43,62",
                //     avatar:"",
                //     client_key:"23be0e4c9a2e91b330bfeb7d20229e71",
                //     version:"0"
                // }
                storage.setItem('userData',JSON.stringify(data))
            }
            for(let i in allUel){
                for(let key in allUel[i]){
                    if(i == 'websocket'){
                        allUel[i][key]=allUel[i][key].replace(new RegExp('ws:'),subStrW);
                    }else{
                        allUel[i][key]=allUel[i][key].replace(subStrT,protocolStr);
                    }
                }
            }
            let subStr=new RegExp('120.77.179.55');//创建正则表达式对象
            for(let i in allUel){
                for(let key in allUel[i]){
                    allUel[i][key]=allUel[i][key].replace(subStr,street);
                }
            }
            let linkTypeArr =  window.location.href.split("/");
            let linkType = linkTypeArr[linkTypeArr.length-1].split("?")[0];
            if(storage.getItem('userData')){
                data = JSON.parse(storage.getItem('userData'))
                this.$store.commit('USERDATAFUN',{
                    username:data.username,
                    id:data.id,
                    role:data.role,
                    lastLoginTime:data.lastLoginTime,
                    client_key:data.client_key,
                    privilege:data.privilege,
                    token:data.token,
                    number:data.number,
                    avatar:data.avatar,
                    version:data.version,
                })

                if(linkType == '' || linkType == 'login'){
                    linkType = 'dashboard'
                    this.$router.push({path:'/dashboard'})
                    document.title = 'IDCOL-dashboard'
                }
                this.$store.commit('ROUTERSTRFUN',{
                    routerStr:'/'+linkType
                })
                document.title = 'IDCOL-'+linkType
                if(linkType == 'login'||linkType == 'retrievePassword'){
                    this.headersShow = false
                }else{
                    this.headersShow = true
                }
            }else{
                if(linkType != 'retrievePassword'){
                    storage.setItem('userData','')
                    this.$store.commit('ROUTERSTRFUN',{
                      routerStr:'/login',
                    })
                    this.$router.push({path:'/login'});
                }
            }
            this.$router.beforeEach((to, from, next) => {
                console.log(to.path,'--------')
                if(to.path == '/login'||to.path == '/retrievePassword'){
                    this.headersShow = false
                }else{
                    this.headersShow = true
                }
                this.$store.commit('ROUTERSTRFUN',{
                    routerStr:to.path
                })

                next();
            })
        },
        mounted(){
            let this_ = this;
            let width = document.body.offsetWidth;
            if(width >= 1920){
                $('html').css({'font-size':'95.01%'})
                this.$store.commit('REMRATIOFUN',{
                    remRatio:0.9501*16,
                })
            }else{
                $('html').css({'font-size':width*62.5/1200+'%'})
                this.$store.commit('REMRATIOFUN',{
                    remRatio:width*62.5/1200/100*16,
                })
            }
            window.onresize = function(){
                width = document.body.offsetWidth;
                // console.log(width)
                if(width >= 1920){
                    $('html').css({'font-size':'95.01%'})
                    this_.$store.commit('REMRATIOFUN',{
                        remRatio:0.9501*16,
                    })
                }else{
                    $('html').css({'font-size':width*62.5/1200+'%'})
                    this_.$store.commit('REMRATIOFUN',{
                        remRatio:width*62.5/1200/100*16,
                    })
                }
                this_.$store.commit('UPDATEREMRATIOFUN',{
                    updateRemRatio:this_.updateRemRatio+1,
                })
            }
            //ie 
            if (navigator.browserLanguage != "undefined" && navigator.browserLanguage != null) { 
                if (navigator.systemLanguage == "zh-CN") {
                    this_.$store.commit('BROWSERLANGUAGE',{
                        browserLanguage:'bd',
                    })
                    // this_.loadJS('https://webapi.amap.com/maps?v=1.4.6&key=192cfd61cc0fbe8c2cf8d5c314f43bb3&plugin=AMap.MarkerClusterer,AMap.ToolBar,AMap.Autocomplete,AMap.PlaceSearch,AMap.Geocoder',function(){})

                }else{
                    this_.$store.commit('BROWSERLANGUAGE',{
                        browserLanguage:'google',
                    })
                    this_.loadJS('https://maps.googleapis.com/maps/api/js?key=AIzaSyD_FHQc9qTI5SPvTBV0SQ-aPS2HJHm8H9U&language=en',function(){
                        this_.loadJS('./js/richmarker.js',function(){})
                    })
                }
            } 
            //firefox、chrome,360 
            else { 
                if (navigator.language == "zh-CN") {
                    // this_.loadJS('https://webapi.amap.com/maps?v=1.4.6&key=192cfd61cc0fbe8c2cf8d5c314f43bb3&plugin=AMap.MarkerClusterer,AMap.ToolBar,AMap.Autocomplete,AMap.PlaceSearch,AMap.Geocoder',function(){})
                    this_.$store.commit('BROWSERLANGUAGE',{
                        browserLanguage:'bd',
                    })
                }else{
                    this_.$store.commit('BROWSERLANGUAGE',{
                        browserLanguage:'google',
                    })
                    this_.loadJS('https://maps.googleapis.com/maps/api/js?key=AIzaSyD_FHQc9qTI5SPvTBV0SQ-aPS2HJHm8H9U&language=en',function(){
                        this_.loadJS('./js/richmarker.js',function(){})
                    })
                }
            }
            console.log(this.browserLanguage,'================')
            
        },
        methods:{
            loadJS( url, callback ){
                let script = document.createElement('script'),
                fn = callback || function(){};
                script.type = 'text/javascript';
                //IE
                if(script.readyState){
                  script.onreadystatechange = function(){
                    if( script.readyState == 'loaded' || script.readyState == 'complete' ){
                      script.onreadystatechange = null;
                      fn();
                    }
                  };
                }else{
                  //其他浏览器
                  script.onload = function(){
                    fn();
                  };
                }
                script.src = url;
                document.getElementsByTagName('head')[0].appendChild(script);
            },
            login(){
                var storage = window.localStorage;
                let client_key = jqueryK.md5(navigator.userAgent);
                base.ajax_post(
                    allUel.common.login,
                    {
                        // username:this.username,
                        // password:this.password,
                        username:'admin',
                        password:'654321',
                        client_key:client_key,
                    },
                    {},
                    data => {
                        // this.$message({
                        //   showClose: true,
                        //   message: 'Login successfully',
                        //   type: 'success'
                        // });
                        console.log(data)
                        data.data.client_key = client_key;
                        data.data.version = this.version;
                        this.$store.commit('USERDATAFUN',{
                            username:data.data.username,
                            id:data.data.id,
                            role:data.data.role,
                            lastLoginTime:data.data.lastLoginTime,
                            client_key:data.data.client_key,
                            privilege:data.data.privilege,
                            token:data.data.token,
                            number:data.data.number,
                            avatar:data.data.avatar,
                            version:data.data.version,
                        })
                        // this.$router.push({path:'/dashboard'})
                        // this.$store.commit('ROUTERSTRFUN',{
                        //   routerStr:'/dashboard',
                        // })
                        storage.setItem('userData',JSON.stringify(data.data))
                        if(this.checkboxRememberPassword){
                          storage.setItem('rememberPassword','true');
                          storage.setItem('udfn',this.username);
                          storage.setItem('udfp',jqueryK.base64Encode(this.password));
                        }
                        
                        this.$store.commit('HEADERIDFUN',{
                            headerUpdate: this.headerUpdate+1,
                        })
                    },
                    this
                )
            },
        }
    }
</script>

<style type="text/css" lang="less">

    @font-face {
        font-family: 'PingFang-SC-Heavy';
        src: url('./style/font-pf/PingFangHeavy.eot');
        src:
          url('./style/font-pf/PingFangHeavy.eot?#font-spider') format('embedded-opentype'),
          url('./style/font-pf/PingFangHeavy.woff') format('woff'),
          url('./style/font-pf/PingFangHeavy.ttf') format('truetype'),
          url('./style/font-pf/PingFangHeavy.svg') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    @font-face {
        font-family: 'PingFangSC-Medium';
        src: url('./style/font-pf/PingFangMedium.ttf');
        font-weight: normal;
        font-style: normal;
    }

    @font-face {
        font-family: 'AlibabaPuHuiTiR';
        src: url('./style/font-al/Alibaba-PuHuiTi-Regular.eot');
        src:
          url('./style/font-al/Alibaba-PuHuiTi-Regular.eot?#font-spider') format('embedded-opentype'),
          url('./style/font-al/Alibaba-PuHuiTi-Regular.woff') format('woff'),
          url('./style/font-al/Alibaba-PuHuiTi-Regular.ttf') format('truetype'),
          url('./style/font-al/Alibaba-PuHuiTi-Regular.svg') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    @font-face {
        font-family: 'AlibabaPuHuiTiH';
        src: url('./style/font-al/Alibaba-PuHuiTi-Heavy.ttf');
        src:
          url('./style/font-al/Alibaba-PuHuiTi-Heavy.eot?#font-spider') format('embedded-opentype'),
          url('./style/font-al/Alibaba-PuHuiTi-Heavy.woff') format('woff'),
          url('./style/font-al/Alibaba-PuHuiTi-Heavy.ttf') format('truetype'),
          url('./style/font-al/Alibaba-PuHuiTi-Heavy.svg') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    @font-face {
        font-family: 'AlibabaPuHuiTiB';
        src: url('./style/font-al/Alibaba-PuHuiTi-Bold.ttf');
        src:
          url('./style/font-al/Alibaba-PuHuiTi-Bold.eot?#font-spider') format('embedded-opentype'),
          url('./style/font-al/Alibaba-PuHuiTi-Bold.woff') format('woff'),
          url('./style/font-al/Alibaba-PuHuiTi-Bold.ttf') format('truetype'),
          url('./style/font-al/Alibaba-PuHuiTi-Bold.svg') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    @font-face {
        font-family: 'AlibabaPuHuiTiL';
        src: url('./style/font-al/Alibaba-PuHuiTi-Light.ttf');
        src:
          url('./style/font-al/Alibaba-PuHuiTi-Light.eot?#font-spider') format('embedded-opentype'),
          url('./style/font-al/Alibaba-PuHuiTi-Light.woff') format('woff'),
          url('./style/font-al/Alibaba-PuHuiTi-Light.ttf') format('truetype'),
          url('./style/font-al/Alibaba-PuHuiTi-Light.svg') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    @font-face {
        font-family: 'AlibabaPuHuiTiM';
        src: url('./style/font-al/Alibaba-PuHuiTi-Medium.ttf');
        src:
          url('./style/font-al/Alibaba-PuHuiTi-Medium.eot?#font-spider') format('embedded-opentype'),
          url('./style/font-al/Alibaba-PuHuiTi-Medium.woff') format('woff'),
          url('./style/font-al/Alibaba-PuHuiTi-Medium.ttf') format('truetype'),
          url('./style/font-al/Alibaba-PuHuiTi-Medium.svg') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    // @font-face {
    //     font-family: 'bodoni-MT';
    //     src: url('./style/bodoniMT/bodoniMT.ttf');
    // }

    html,body,p,h1,h2,h3,h4,h5,ul,li{
        margin: 0px;
        padding: 0px;
    }
    html,body,#app{
          height: 100%;
          width:100%;
    }
    li{
        list-style:none;/*li去点*/
        box-sizing: border-box;
    }
    a{
        text-decoration: none;
        box-sizing: border-box;
    }
    i{
        font-style: inherit;
    }
    input{
        padding:0;
        outline-style: none;
        box-sizing: border-box;
    }
    div{
        box-sizing: border-box; //border、padding并入宽度。
    }
      /*滚动条样式*/
    .el-table__body-wrapper::-webkit-scrollbar {/*滚动条整体样式*/
        width: 3px;     /*高宽分别对应横竖滚动条的尺寸*/
        height: 8px;
    }
    .el-table__body-wrapper::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 3px;
        background: #DAE6E0;
    }
    .el-table__body-wrapper::-webkit-scrollbar-track {/*滚动条里面轨道*/
        background: #F6F8F7;
    }
    .el-table{
        th>.cell,td>.cell{
            padding: 0;
        }
        .el-table__body-wrapper{
            width: calc(100% - 1.5rem);
            margin-right: 1.5rem;
        }
    }

    .scrollbar_style{
        // margin-right: 8px;
        overflow: auto;
    }
      /*.scrollbar_style::-webkit-scrollbar-button{
         width: 10px;
         height: 10px;
      }*/
    .scrollbar_style::-webkit-scrollbar {/*滚动条整体样式*/
        width: 3px;     /*高宽分别对应横竖滚动条的尺寸*/
        height: 5px;
    }
    .scrollbar_style::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 3px;
        background: #DAE6E0;
    }
    .scrollbar_style::-webkit-scrollbar-track {/*滚动条里面轨道*/
        background: #F6F8F7;
    }
    /*弹框样式*/
    .el-dialog__header{
        border-bottom: 1px solid #E8E8E8;
        span{
            color: #444444; 
        }
    }
    .el-dialog__headerbtn {
        top: 13px;
        font-size: 30px;
    }
    .el-dialog__body{
        .dialog_foot{
            text-align:center;padding: 60px 0 20px 0;
            .el-button{
                width:320px;
                height:60px;
                border-radius: 6px;
                font-size:16px;
            }
        }
    }

    #app{

        >.scrollbar_style{
            // width: calc(100% - 8px);
            width: calc(100%);
            height: calc(100%);
            &.padding{
                height: calc(100% - 4.1rem);
            }
        }
    }
    .el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover{
        color: initial;
        background-color: #f5f7fa;
    }
    .el-dropdown-menu{
        max-height: 360px;
        .el-dropdown-menu__item{
            &.select{
                color: #409eff;
                font-weight: 700;
            }
        }
    }
    /*弹框样式*/
    .solar_dialig{
        .el-dialog__header{
            border-bottom: 1px solid #E8E8E8;
            span{
                color: #444444; 
            }
        }
        .el-dialog__headerbtn {
            top: 13px;
            font-size: 30px;
        }
        .el-dialog__body{
            .dialog_foot{
                text-align:center;padding: 60px 0 20px 0;
                .el-button{
                    width:320px;
                    height:60px;
                    border-radius: 6px;
                    font-size:16px;
                }
            }
        }
    }
</style>