wuhongjian
/
hi-ucs
1
0
Fork 0
Code Issues Pull Requests Projects Releases 10 Wiki Activity

添加浏览器版本提示

This commit is contained in:
unknown 2022-10-08 19:09:33 +08:00
parent 7b4b410538
commit 4a78bfa72e
2 changed files with 392 additions and 178 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

384
front/public/index.html
View File

@ -9,98 +9,312 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" /> <meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" /> <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title> <title>
<%= htmlWebpackPlugin.options.title %> <%= htmlWebpackPlugin.options.title %>
</title> </title>
<meta <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" />
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文档" <meta content="<%= VUE_APP_TITLE %>官网与文档基于vue-admin-beautiful-pro构建，简称vab（是一款超棒的vue+element中后台前端快速开发框架），QQ群972435319，作者：<%= VUE_APP_AUTHOR %>" name="description" />
name="keywords" /> <meta content="<%= VUE_APP_AUTHOR %>" name="author" />
<meta <style>
content="<%= VUE_APP_TITLE %>官网与文档基于vue-admin-beautiful-pro构建，简称vab（是一款超棒的vue+element中后台前端快速开发框架），QQ群972435319，作者：<%= VUE_APP_AUTHOR %>" * {
name="description" /> font-weight: normal;
<meta content="<%= VUE_APP_AUTHOR %>" name="author" /> font-style: normal;
<link href="<%= BASE_URL %>static/css/loading.css" rel="stylesheet" /> }
<script>
</script> .mask-layer {
<link href="./leaflet/libs/leaflet/1.3.1/leaflet.css" rel="stylesheet"> position: absolute;
<link href="./leaflet/dist/leaflet/iclient-leaflet.css" rel="stylesheet"> top: 0;
<link href="./leaflet/libs/leaflet/plugins/leaflet.draw/leaflet.draw.css" rel="stylesheet"> left: 0;
<link href="./leaflet/libs/leaflet.markercluster/dist/MarkerCluster.css" rel="stylesheet"> bottom: 0;
<link href="./leaflet/libs/leaflet.markercluster/dist/MarkerCluster.Default.css" rel="stylesheet"> right: 0;
<link href="./supermap/css/supermap.css" rel="stylesheet"> background: rgba(0, 0, 0, 0.6);
<link href="./static/css/widgets.css" rel="stylesheet"> }
<!-- 平台配置文件 -->
<script type="text/javascript" src="./static/config/basicConfig.js"></script> .model-container {
<script type="text/javascript" src="./static/config/mapConfig.js"></script> width: 360px;
<script type="text/javascript" src="./static/config/location.js"></script> height: 150px;
<!-- ==========地图相关配置========== --> background: #fff;
<script type="text/javascript" src="./leaflet/libs/leaflet/1.3.1/leaflet.js"></script> border-radius: 10px;
<script type="text/javascript" src="./static/js/jquery-3.6.0.min.js"></script> /* box-shadow: 0px 0px 12px 4px #ff3; */
<script type="text/javascript" src="./leaflet/dist/leaflet/iclient-leaflet.min.js"></script> text-align: center;
<script type="text/javascript" src="./leaflet/libs/leaflet/plugins/leaflet.draw/leaflet.draw.js"></script> font-size: 18px;
<!-- <script type="text/javascript" src="./leaflet/libs/leaflet.markercluster/dist/leaflet.markercluster.js"></script> --> color: #333;
<script type="text/javascript" src="./leaflet/dist/leaflet/leaflet-ant-path.js"></script> position: absolute;
<script type="text/javascript" src="./leaflet/dist/leaflet/leaflet.textpath.js"></script> top: 50%;
<script type="text/javascript" src="./leaflet/dist/leaflet/leaflet.polylineoffset.js"></script> left: 50%;
<script type="text/javascript" src="./leaflet/dist/leaflet/leaflet.polylineDecorator.js"></script> -webkit-transform: translate(-50%, -50%);
<script type="text/javascript" src="./leaflet/ersi-leaflet.js"></script> -moz-transform: translate(-50%, -50%);
<script type="text/javascript" src="./leaflet/libs/proj4/proj4.js"></script> -ms-transform: translate(-50%, -50%);
<script type="text/javascript" src="./static/js/proj4leaflet.js"></script> -o-transform: translate(-50%, -50%);
<script type="text/javascript" src="./supermap/atmosphere.js"></script> transform: translate(-50%, -50%);
<script type="text/javascript" src="./leaflet/MovingMarker.js"></script> z-index: 99999999999;
<script type="text/javascript" src="./leaflet/leaflet.motion.min.js"></script> }
<script type="text/javascript" src="./leaflet/leaflet.polylineDecorator.js"></script>
<script type="text/javascript" src="./leaflet/leaflet-tooltip-layout.dist.js"></script> .model-container .model-title {
<script type="text/javascript" src="./leaflet/leaflet.canvas-markers.js"></script> font-size: 16px;
<script type="text/javascript" src="./leaflet/leaflet.markercluster.js"></script> }
<script type="text/javascript" src="./leaflet/TextIconOverlay_min.js"></script>
<script type="text/javascript" src="./leaflet/MarkerClusterer_min.js"></script> .model-container .controls {
<!-- 热力图 --> position: absolute;
<script type="text/javascript" src="./leaflet/leaflet-heat.js"></script> bottom: 10px;
<!-- 加载WMTS服务 --> width: 100%;
<script type="text/javascript" src="./leaflet/leaflet-tilelayer-wmts.js"></script> padding: 12px;
<!-- 大华平台相关包 --> padding-top: 40px;
<script type="text/javascript" src="./static/js/encrypt.js"></script> }
<script type="text/javascript" src="./static/js/DHWs.js"></script>
.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="<%= 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>
<script type="text/javascript" src="./static/config/location.js"></script>
<!-- ==========地图相关配置========== -->
<script type="text/javascript" src="./leaflet/libs/leaflet/1.3.1/leaflet.js"></script>
<script type="text/javascript" src="./static/js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="./leaflet/dist/leaflet/iclient-leaflet.min.js"></script>
<script type="text/javascript" src="./leaflet/libs/leaflet/plugins/leaflet.draw/leaflet.draw.js"></script>
<!-- <script type="text/javascript" src="./leaflet/libs/leaflet.markercluster/dist/leaflet.markercluster.js"></script> -->
<script type="text/javascript" src="./leaflet/dist/leaflet/leaflet-ant-path.js"></script>
<script type="text/javascript" src="./leaflet/dist/leaflet/leaflet.textpath.js"></script>
<script type="text/javascript" src="./leaflet/dist/leaflet/leaflet.polylineoffset.js"></script>
<script type="text/javascript" src="./leaflet/dist/leaflet/leaflet.polylineDecorator.js"></script>
<script type="text/javascript" src="./leaflet/ersi-leaflet.js"></script>
<script type="text/javascript" src="./leaflet/libs/proj4/proj4.js"></script>
<script type="text/javascript" src="./static/js/proj4leaflet.js"></script>
<script type="text/javascript" src="./supermap/atmosphere.js"></script>
<script type="text/javascript" src="./leaflet/MovingMarker.js"></script>
<script type="text/javascript" src="./leaflet/leaflet.motion.min.js"></script>
<script type="text/javascript" src="./leaflet/leaflet.polylineDecorator.js"></script>
<script type="text/javascript" src="./leaflet/leaflet-tooltip-layout.dist.js"></script>
<script type="text/javascript" src="./leaflet/leaflet.canvas-markers.js"></script>
<script type="text/javascript" src="./leaflet/leaflet.markercluster.js"></script>
<script type="text/javascript" src="./leaflet/TextIconOverlay_min.js"></script>
<script type="text/javascript" src="./leaflet/MarkerClusterer_min.js"></script>
<!-- 热力图 -->
<script type="text/javascript" src="./leaflet/leaflet-heat.js"></script>
<!-- 加载WMTS服务 -->
<script type="text/javascript" src="./leaflet/leaflet-tilelayer-wmts.js"></script>
<!-- 大华平台相关包 -->
<script type="text/javascript" src="./static/js/encrypt.js"></script>
<script type="text/javascript" src="./static/js/DHWs.js"></script>
<!-- 站点配置 --> <!-- 站点配置 -->
<script> <script>
window.SITE_CONFIG = {}; window.SITE_CONFIG = {}
window.SITE_CONFIG['backUrl'] = _global.config.backUrl; window.SITE_CONFIG['backUrl'] = _global.config.backUrl
window.SITE_CONFIG['previewUrl'] = _global.config.previewUrl; window.SITE_CONFIG['previewUrl'] = _global.config.previewUrl
window.SITE_CONFIG['frontUrl'] = _global.config.previewUrl + 'document/#/devModelFile/'; window.SITE_CONFIG['frontUrl'] =
window.SITE_CONFIG['apiURL'] = 'http://'+ _global.config.websocketURL; _global.config.previewUrl + 'document/#/devModelFile/'
window.SITE_CONFIG['websocketURL'] = _global.config.websocketURL; window.SITE_CONFIG['apiURL'] = 'http://' + _global.config.websocketURL
window.SITE_CONFIG['POI_URL'] = _global.config.POI_URL; window.SITE_CONFIG['websocketURL'] = _global.config.websocketURL
window.SITE_CONFIG['POI_URL'] = _global.config.POI_URL
</script> </script>
</head> </head>
<body> <body>
<noscript> <noscript>
<strong> <strong>
We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
properly without JavaScript enabled. Please enable it to continue. properly without JavaScript enabled. Please enable it to continue.
</strong> </strong>
</noscript> </noscript>
<div id="app"> <div id="app">
<div class="first-loading-wrp"> <div class="first-loading-wrp">
<div class="loading-wrp"> <div class="loading-wrp">
<span class="dot dot-spin"> <span class="dot dot-spin">
<i></i> <i></i>
<i></i> <i></i>
<i></i> <i></i>
<i></i> <i></i>
</span> </span>
</div> </div>
<h1> <h1>
<%= VUE_APP_TITLE %> <%= VUE_APP_TITLE %>
</h1> </h1>
</div>
</div> </div>
</div> <!-- built files will be auto injected -->
<!-- built files will be auto injected -->
</body> </body>
</html> </html>

186
front/src/main.js
View File

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