添加浏览器版本提示

front/public/index.html

@@ -16,23 +16,236 @@
     <title>
         <%= htmlWebpackPlugin.options.title %>
     </title>
-  <meta
-    content="vab,vab官网,后台管理框架,vue后台管理框架,vue-admin-beautiful,vue-admin-beautiful-pro,vue-admin-beautiful官网,vue-admin-beautiful文档,vue-element-admin,vue-element-admin官网,vue-element-admin文档,vue-admin,vue-admin官网,vue-admin文档"
-    name="keywords" />
-  <meta
-    content="<%= VUE_APP_TITLE %>官网与文档基于vue-admin-beautiful-pro构建，简称vab（是一款超棒的vue+element中后台前端快速开发框架），QQ群972435319，作者：<%= VUE_APP_AUTHOR %>"
-    name="description" />
+    <meta content="vab,vab官网,后台管理框架,vue后台管理框架,vue-admin-beautiful,vue-admin-beautiful-pro,vue-admin-beautiful官网,vue-admin-beautiful文档,vue-element-admin,vue-element-admin官网,vue-element-admin文档,vue-admin,vue-admin官网,vue-admin文档" name="keywords" />
+    <meta content="<%= VUE_APP_TITLE %>官网与文档基于vue-admin-beautiful-pro构建，简称vab（是一款超棒的vue+element中后台前端快速开发框架），QQ群972435319，作者：<%= VUE_APP_AUTHOR %>" name="description" />
     <meta content="<%= VUE_APP_AUTHOR %>" name="author" />
-  <link href="<%= BASE_URL %>static/css/loading.css" rel="stylesheet" />
+    <style>
+        * {
+            font-weight: normal;
+            font-style: normal;
+        }
+        
+        .mask-layer {
+            position: absolute;
+            top: 0;
+            left: 0;
+            bottom: 0;
+            right: 0;
+            background: rgba(0, 0, 0, 0.6);
+        }
+        
+        .model-container {
+            width: 360px;
+            height: 150px;
+            background: #fff;
+            border-radius: 10px;
+            /* box-shadow: 0px 0px 12px 4px #ff3; */
+            text-align: center;
+            font-size: 18px;
+            color: #333;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            -webkit-transform: translate(-50%, -50%);
+            -moz-transform: translate(-50%, -50%);
+            -ms-transform: translate(-50%, -50%);
+            -o-transform: translate(-50%, -50%);
+            transform: translate(-50%, -50%);
+            z-index: 99999999999;
+        }
+        
+        .model-container .model-title {
+            font-size: 16px;
+        }
+        
+        .model-container .controls {
+            position: absolute;
+            bottom: 10px;
+            width: 100%;
+            padding: 12px;
+            padding-top: 40px;
+        }
+        
+        .model-container a {
+            display: inline-block;
+            width: 49%;
+            text-align: center;
+            cursor: pointer;
+        }
+        
+        .model-container .confirm {
+            width: 60px;
+            height: 30px;
+            background: #0087ff;
+            border-radius: 0.04rem !important;
+            font-size: 14px;
+            font-weight: 400;
+            color: #fff;
+            line-height: 30px;
+        }
+        
+        .model-container .cancel {
+            width: 60px;
+            height: 30px;
+            background: #0087ff;
+            border-radius: 0.04rem !important;
+            font-size: 14px;
+            font-weight: 400;
+            color: #fff;
+            line-height: 30px;
+            margin-left: 100px;
+        }
+    </style>
+
     <script>
+        function judgeAgent() {
+            let userAgent = navigator.userAgent // 取得浏览器的userAgent字符串
+            console.log('userAgent------------>', userAgent)
+            let isOpera = userAgent.indexOf('Opera') > -1
+                //判断是否Opera浏览器
+            if (isOpera) {
+                return 'Opera'
+            }
+            //判断是否Firefox浏览器
+            if (userAgent.indexOf('Firefox') > -1) {
+                return 'FF'
+            }
+            //判断是否chorme浏览器
+            if (userAgent.indexOf('Chrome') > -1) {
+                return 'Chrome'
+            }
+            //判断是否Safari浏览器
+            if (userAgent.indexOf('Safari') > -1) {
+                return 'Safari'
+            }
+            //判断是否IE浏览器
+            if (
+                userAgent.indexOf('compatible') > -1 &&
+                userAgent.indexOf('MSIE') > -1 &&
+                !isOpera
+            ) {
+                return 'IE'
+            }
+            //判断是否Edge浏览器
+            if (userAgent.indexOf('Trident') > -1) {
+                return 'Edge'
+            }
+        }
+
+        function downloadFile(name, url) {
+            const alink = document.createElement('a')
+            alink.download = name // 文件名,大部分浏览器兼容,IE10及以下不兼容
+            alink.href = url // 创建 url地址
+            alink.click() // 自动点击
+        }
+
+        function getPCNum() {
+            const agent = navigator.userAgent.toLowerCase()
+            if (agent.indexOf('win32') >= 0 || agent.indexOf('wow32') >= 0) {
+                return 32
+            }
+            if (agent.indexOf('win64') >= 0 || agent.indexOf('wow64') >= 0) {
+                return 64
+            }
+        }
+
+        console.log('------判断浏览器------>', judgeAgent())
+
+        var ModelBox = (function() {
+            var ModelBox = function(option) {
+                this.option = option || {}
+                console.log(999, 'init')
+                this.init()
+            }
+            ModelBox.prototype = {
+                isShow: false,
+                init: function() {
+                    var _this = this
+                    _this.isShow = this.option.isShow
+                    var html =
+                        '<div class="model-container">' +
+                        '<h1 class="model-title">title</h1>' +
+                        '<div class="model-content"></div>' +
+                        '<div class="controls">' +
+                        '<a class="confirm">下载</a>' +
+                        '<a class="cancel">取消</a>' +
+                        '</div>' +
+                        '</div>'
+                    var ModelBoxCon = document.createElement('div')
+                    ModelBoxCon.setAttribute('class', 'mask-layer')
+                    ModelBoxCon.innerHTML = html
+                    ModelBoxCon.querySelector('.model-title').innerHTML =
+                        _this.option.title
+                    ModelBoxCon.querySelector('.model-content').innerHTML =
+                        _this.option.content
+                    document.getElementsByTagName('html')[0].appendChild(ModelBoxCon)
+                    if (!_this.isShow) {
+                        ModelBoxCon.style.display = 'none'
+                    }
+                    ModelBoxCon.querySelector('.cancel').onclick =
+                        ModelBoxCon.querySelector('.confirm').onclick =
+                        _this.eventsFn.bind('', this, ModelBoxCon)
+                },
+                show: function() {
+                    document.querySelector('.mask-layer').style.display = 'block'
+                    this.isShow = true
+                },
+                hide: function() {
+                    document.querySelector('.mask-layer').style.display = 'none'
+                    this.isShow = false
+                },
+                eventsFn: function(e, doc, target) {
+                    var _thisEvent = target.target
+                    if (_thisEvent.classList.contains('confirm')) {
+                        e.option.confirmCallBack()
+                    }
+                    doc.style.display = 'none'
+                    e.isShow = false
+                    return false
+                },
+            } || {}
+            return ModelBox
+        })()
+
+        var opt = new ModelBox({
+            title: '当前系统不支持IE内核，建议使用Chrome浏览器或360浏览器极速模式',
+            content: '',
+            isShow: false,
+            confirmCallBack: function() {
+                // 获取当前系统的方法
+                const agent = getPCNum()
+                console.log('agent------------>', agent)
+                if (agent == 64) {
+                    // 64位操作系统
+                    downloadFile(
+                        'ChromeStandaloneSetup64.exe',
+                        '/static/download/ChromeStandaloneSetup64.exe'
+                    )
+                } else {
+                    // 32位操作系统
+                    downloadFile(
+                        'ChromeStandalonesetup32.exe',
+                        '/static/download/standalonesetup32.exe'
+                    )
+                }
+            },
+        })
+
+        // 提示下载谷歌
+        if (judgeAgent() !== 'Chrome') {
+            //alert('哈哈哈不支持')
+            opt.show()
+        }
     </script>
-  <link href="./leaflet/libs/leaflet/1.3.1/leaflet.css" rel="stylesheet">
-  <link href="./leaflet/dist/leaflet/iclient-leaflet.css" rel="stylesheet">
-  <link href="./leaflet/libs/leaflet/plugins/leaflet.draw/leaflet.draw.css" rel="stylesheet">
-  <link href="./leaflet/libs/leaflet.markercluster/dist/MarkerCluster.css" rel="stylesheet">
-  <link href="./leaflet/libs/leaflet.markercluster/dist/MarkerCluster.Default.css" rel="stylesheet">
-  <link href="./supermap/css/supermap.css" rel="stylesheet">
-  <link href="./static/css/widgets.css" rel="stylesheet">
+    <link href="<%= BASE_URL %>static/css/loading.css" rel="stylesheet" />
+
+    <link href="./leaflet/libs/leaflet/1.3.1/leaflet.css" rel="stylesheet" />
+    <link href="./leaflet/dist/leaflet/iclient-leaflet.css" rel="stylesheet" />
+    <link href="./leaflet/libs/leaflet/plugins/leaflet.draw/leaflet.draw.css" rel="stylesheet" />
+    <link href="./leaflet/libs/leaflet.markercluster/dist/MarkerCluster.css" rel="stylesheet" />
+    <link href="./leaflet/libs/leaflet.markercluster/dist/MarkerCluster.Default.css" rel="stylesheet" />
+    <link href="./supermap/css/supermap.css" rel="stylesheet" />
+    <link href="./static/css/widgets.css" rel="stylesheet" />
     <!-- 平台配置文件 -->
     <script type="text/javascript" src="./static/config/basicConfig.js"></script>
     <script type="text/javascript" src="./static/config/mapConfig.js"></script>
@@ -68,13 +281,14 @@
     <script type="text/javascript" src="./static/js/DHWs.js"></script>
     <!-- 站点配置 -->
     <script>
-      window.SITE_CONFIG = {};
-      window.SITE_CONFIG['backUrl'] = _global.config.backUrl;
-      window.SITE_CONFIG['previewUrl'] = _global.config.previewUrl;
-      window.SITE_CONFIG['frontUrl'] = _global.config.previewUrl + 'document/#/devModelFile/';
-      window.SITE_CONFIG['apiURL'] = 'http://'+ _global.config.websocketURL;
-      window.SITE_CONFIG['websocketURL'] = _global.config.websocketURL;
-      window.SITE_CONFIG['POI_URL'] = _global.config.POI_URL;
+        window.SITE_CONFIG = {}
+        window.SITE_CONFIG['backUrl'] = _global.config.backUrl
+        window.SITE_CONFIG['previewUrl'] = _global.config.previewUrl
+        window.SITE_CONFIG['frontUrl'] =
+            _global.config.previewUrl + 'document/#/devModelFile/'
+        window.SITE_CONFIG['apiURL'] = 'http://' + _global.config.websocketURL
+        window.SITE_CONFIG['websocketURL'] = _global.config.websocketURL
+        window.SITE_CONFIG['POI_URL'] = _global.config.POI_URL
     </script>
 </head>
 

front/src/main.js

@@ -27,14 +27,14 @@ import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 
 console.log(111, 'main')
-/**
+    /**
      * @author chuzhixin 1204505056@qq.com
      * @description 正式环境默认使用mock，正式项目记得注释后再打包
      */
-// if (process.env.NODE_ENV === 'production') {
-//   const { mockXHR } = require('@/utils/static')
-//   mockXHR()
-// }
+    // if (process.env.NODE_ENV === 'production') {
+    //   const { mockXHR } = require('@/utils/static')
+    //   mockXHR()
+    // }
 const emitter = mitt()
 const app = createApp(App)
 app.config.globalProperties.$emitter = emitter
@@ -60,76 +60,76 @@ router.beforeEach((to, from, next) => {
 
 
 // 判断浏览器
-function judgeAgent() {
-  let userAgent = navigator.userAgent // 取得浏览器的userAgent字符串
-  console.log('userAgent------------>', userAgent);
-  let isOpera = userAgent.indexOf('Opera') > -1
-  //判断是否Opera浏览器
-  if (isOpera) {
-    return 'Opera'
-  }
-  //判断是否Firefox浏览器
-  if (userAgent.indexOf('Firefox') > -1) {
-    return 'FF'
-  }
-  //判断是否chorme浏览器
-  if (userAgent.indexOf('Chrome') > -1) {
-    return 'Chrome'
-  }
-  //判断是否Safari浏览器
-  if (userAgent.indexOf('Safari') > -1) {
-    return 'Safari'
-  }
-  //判断是否IE浏览器
-  if (
-    userAgent.indexOf('compatible') > -1 &&
-    userAgent.indexOf('MSIE') > -1 &&
-    !isOpera
-  ) {
-    return 'IE'
-  }
-  //判断是否Edge浏览器
-  if (userAgent.indexOf('Trident') > -1) {
-    return 'Edge'
-  }
-}
-function downloadFile(name, url) {
-  const alink = document.createElement('a');
-  alink.download = name;// 文件名,大部分浏览器兼容,IE10及以下不兼容
-  alink.href = url;// 创建 url地址
-  alink.click(); // 自动点击
-}
+// function judgeAgent() {
+//     let userAgent = navigator.userAgent // 取得浏览器的userAgent字符串
+//     console.log('userAgent------------>', userAgent);
+//     let isOpera = userAgent.indexOf('Opera') > -1
+//         //判断是否Opera浏览器
+//     if (isOpera) {
+//         return 'Opera'
+//     }
+//     //判断是否Firefox浏览器
+//     if (userAgent.indexOf('Firefox') > -1) {
+//         return 'FF'
+//     }
+//     //判断是否chorme浏览器
+//     if (userAgent.indexOf('Chrome') > -1) {
+//         return 'Chrome'
+//     }
+//     //判断是否Safari浏览器
+//     if (userAgent.indexOf('Safari') > -1) {
+//         return 'Safari'
+//     }
+//     //判断是否IE浏览器
+//     if (
+//         userAgent.indexOf('compatible') > -1 &&
+//         userAgent.indexOf('MSIE') > -1 &&
+//         !isOpera
+//     ) {
+//         return 'IE'
+//     }
+//     //判断是否Edge浏览器
+//     if (userAgent.indexOf('Trident') > -1) {
+//         return 'Edge'
+//     }
+// }
 
-function getPCNum() {
-  const agent = navigator.userAgent.toLowerCase();
-  if (agent.indexOf('win32') >= 0 || agent.indexOf('wow32') >= 0) {
-    return 32;
-  }
-  if (agent.indexOf('win64') >= 0 || agent.indexOf('wow64') >= 0) {
-    return 64;
-  }
-}
+// function downloadFile(name, url) {
+//     const alink = document.createElement('a');
+//     alink.download = name; // 文件名,大部分浏览器兼容,IE10及以下不兼容
+//     alink.href = url; // 创建 url地址
+//     alink.click(); // 自动点击
+// }
 
-console.log('------判断浏览器------>', judgeAgent());
+// function getPCNum() {
+//     const agent = navigator.userAgent.toLowerCase();
+//     if (agent.indexOf('win32') >= 0 || agent.indexOf('wow32') >= 0) {
+//         return 32;
+//     }
+//     if (agent.indexOf('win64') >= 0 || agent.indexOf('wow64') >= 0) {
+//         return 64;
+//     }
+// }
 
-// 提示下载谷歌
-if (judgeAgent() !== 'Chrome') {
-  ElMessageBox.confirm('当前仅支持Chrome浏览器，是否进行下载？', '提示', {
-    confirmButtonText: '下载',
-    cancelButtonText: '取消',
-    type: 'warning'
-  }).then(() => {
-    // 获取当前系统的方法
-    const agent = getPCNum();
-    console.log('agent------------>', agent);
-    if (agent == 64) {
-      // 64位操作系统
-      // downloadFile(_global.config.loginInfo.name_32, _global.config.loginInfo.url_32);
-      downloadFile('ChromeStandaloneSetup64.exe', '/static/download/ChromeStandaloneSetup64.exe');
-    } else {
-      // 32位操作系统
-      downloadFile('ChromeStandalonesetup32.exe', '/static/download/standalonesetup32.exe');
-    }
-  }).catch(() => {
-  });
-}
+// console.log('------判断浏览器------>', judgeAgent());
+
+// // 提示下载谷歌
+// if (judgeAgent() !== 'Chrome') {
+//     ElMessageBox.confirm('当前仅支持Chrome浏览器，是否进行下载？', '提示', {
+//         confirmButtonText: '下载',
+//         cancelButtonText: '取消',
+//         type: 'warning'
+//     }).then(() => {
+//         // 获取当前系统的方法
+//         const agent = getPCNum();
+//         console.log('agent------------>', agent);
+//         if (agent == 64) {
+//             // 64位操作系统
+//             // downloadFile(_global.config.loginInfo.name_32, _global.config.loginInfo.url_32);
+//             downloadFile('ChromeStandaloneSetup64.exe', '/static/download/ChromeStandaloneSetup64.exe');
+//         } else {
+//             // 32位操作系统
+//             downloadFile('ChromeStandalonesetup32.exe', '/static/download/standalonesetup32.exe');
+//         }
+//     }).catch(() => {});
+// }