2024年11月12日前修改内容
parent
b59feaa74b
commit
055d7be7cf
35
.env.dev
35
.env.dev
|
|
@ -47,3 +47,38 @@ VUE_APP_ANYRTC_URL = https://pyrtc.hopetrytech.com:9004
|
|||
#VUE_APP_BASE_IMG_URL = http://123.132.248.154:9224
|
||||
|
||||
|
||||
添加和编辑：
|
||||
|
||||
1. 上传文件
|
||||
|
||||
2. 服务名称：
|
||||
|
||||
3. 参考空间： EPSG:3857 EPSG:4326
|
||||
|
||||
4. 数据源类型：矢量(shp)、矢量(excel)、栅格(tif)
|
||||
|
||||
1.数据源类型为shp时:
|
||||
|
||||
1. 数据类型：点(point)、线(line)、面(fill)
|
||||
|
||||
2. 上传sld样式文件
|
||||
|
||||
2.数据源类型为tif时:
|
||||
|
||||
1. 上传tif影像边界shp文件
|
||||
|
||||
|
||||
列表展示字段：
|
||||
|
||||
1.服务名称
|
||||
|
||||
2.服务地址
|
||||
|
||||
3.数据源类型
|
||||
|
||||
4.空间参考
|
||||
|
||||
5.创建时间
|
||||
|
||||
6.更新时间
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,49 @@
|
|||
NODE_ENV = development
|
||||
|
||||
VUE_APP_OIDC_AUTHORITY = http://112.233.241.108:12796
|
||||
VUE_APP_OIDC_CLIENTID = OpenAuth.Pro
|
||||
VUE_APP_OIDC_REDIRECTURI = http://112.233.241.108:1803/#/oidc-callback
|
||||
VUE_APP_OIDC_POSTLOGOUTREDIRECTURI = http://112.233.241.108:1803
|
||||
VUE_APP_OIDC_RESPONSETYPE = code
|
||||
VUE_APP_OIDC_SCOPE = openid profile openauthapi
|
||||
VUE_APP_OIDC_AUTOMATICSILENTRENEW = true
|
||||
VUE_APP_OIDC_SILENTREDIRECTURI = http://112.233.241.108:1803/silent-renew-oidc.html
|
||||
|
||||
#VUE_APP_BASE_API =http://192.168.10.123:9159/api
|
||||
#VUE_APP_BASE_IMG_URL = http://192.168.10.123:9159
|
||||
|
||||
|
||||
|
||||
#VUE_APP_BASE_API =http://223.99.16.253:9001/api
|
||||
#VUE_APP_BASE_IMG_URL =http://223.99.16.253:9001
|
||||
|
||||
|
||||
#VUE_APP_BASE_API = http://111.17.207.220:9001/api
|
||||
#VUE_APP_BASE_IMG_URL = http://111.17.207.220:9001
|
||||
#VUE_APP_WEBSOCKET_URL = ws://123.132.248.154:9225/ws
|
||||
|
||||
# 1240服务器http接口
|
||||
VUE_APP_BASE_API = http://111.17.207.220:9001/api
|
||||
# VUE_APP_BASE_API = http://192.168.10.106:88/api
|
||||
VUE_APP_BASE_IMG_URL = http://111.17.207.220:9001
|
||||
#VUE_APP_WEBSOCKET_URL = ws://123.132.248.154:9225/ws
|
||||
VUE_APP_WEBSOCKET_URL = ws://111.17.207.220:9002/ws
|
||||
VUE_APP_GEOSERVER_URL = http://111.17.207.220:9007/
|
||||
VUE_APP_ANYRTC_URL = https://pyrtc.hopetrytech.com:9004
|
||||
|
||||
# 1240 平邑测试服务器http接口
|
||||
# VUE_APP_BASE_API = http://123.132.248.154:9242/api
|
||||
# VUE_APP_BASE_IMG_URL = http://123.132.248.154:9242
|
||||
# VUE_APP_WEBSOCKET_URL = ws://123.132.248.154:9225/ws
|
||||
#VUE_APP_WEBSOCKET_URL = ws://111.17.207.220:9002/ws
|
||||
|
||||
|
||||
# 费县服务器https接口
|
||||
# VUE_APP_BASE_API = https://py.hopetrytech.com:7001/api
|
||||
# VUE_APP_BASE_IMG_URL = https://py.hopetrytech.com:7001
|
||||
# VUE_APP_WEBSOCKET_URL = wss://py.hopetrytech.com:7002/ws
|
||||
|
||||
#VUE_APP_BASE_API = http://123.132.248.154:9224/api
|
||||
#VUE_APP_BASE_IMG_URL = http://123.132.248.154:9224
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
NODE_ENV = development
|
||||
|
||||
VUE_APP_OIDC_AUTHORITY = http://112.233.241.108:12796
|
||||
VUE_APP_OIDC_CLIENTID = OpenAuth.Pro
|
||||
VUE_APP_OIDC_REDIRECTURI = http://112.233.241.108:1803/#/oidc-callback
|
||||
VUE_APP_OIDC_POSTLOGOUTREDIRECTURI = http://112.233.241.108:1803
|
||||
VUE_APP_OIDC_RESPONSETYPE = code
|
||||
VUE_APP_OIDC_SCOPE = openid profile openauthapi
|
||||
VUE_APP_OIDC_AUTOMATICSILENTRENEW = true
|
||||
VUE_APP_OIDC_SILENTREDIRECTURI = http://112.233.241.108:1803/silent-renew-oidc.html
|
||||
|
||||
#VUE_APP_BASE_API =http://192.168.10.123:9159/api
|
||||
#VUE_APP_BASE_IMG_URL = http://192.168.10.123:9159
|
||||
|
||||
|
||||
|
||||
#VUE_APP_BASE_API =http://223.99.16.253:9001/api
|
||||
#VUE_APP_BASE_IMG_URL =http://223.99.16.253:9001
|
||||
|
||||
|
||||
#VUE_APP_BASE_API = http://111.17.207.220:9001/api
|
||||
#VUE_APP_BASE_IMG_URL = http://111.17.207.220:9001
|
||||
#VUE_APP_WEBSOCKET_URL = ws://123.132.248.154:9225/ws
|
||||
|
||||
# 1240服务器http接口
|
||||
VUE_APP_BASE_API = http://111.17.207.220:9001/api
|
||||
# VUE_APP_BASE_API = http://192.168.10.106:88/api
|
||||
VUE_APP_BASE_IMG_URL = http://111.17.207.220:9001
|
||||
#VUE_APP_WEBSOCKET_URL = ws://123.132.248.154:9225/ws
|
||||
VUE_APP_WEBSOCKET_URL = ws://111.17.207.220:9002/ws
|
||||
VUE_APP_GEOSERVER_URL = http://111.17.207.220:9007/
|
||||
VUE_APP_ANYRTC_URL = https://pyrtc.hopetrytech.com:9004
|
||||
|
||||
# 1240 平邑测试服务器http接口
|
||||
# VUE_APP_BASE_API = http://123.132.248.154:9242/api
|
||||
# VUE_APP_BASE_IMG_URL = http://123.132.248.154:9242
|
||||
# VUE_APP_WEBSOCKET_URL = ws://123.132.248.154:9225/ws
|
||||
#VUE_APP_WEBSOCKET_URL = ws://111.17.207.220:9002/ws
|
||||
|
||||
|
||||
# 费县服务器https接口
|
||||
# VUE_APP_BASE_API = https://py.hopetrytech.com:7001/api
|
||||
# VUE_APP_BASE_IMG_URL = https://py.hopetrytech.com:7001
|
||||
# VUE_APP_WEBSOCKET_URL = wss://py.hopetrytech.com:7002/ws
|
||||
|
||||
#VUE_APP_BASE_API = http://123.132.248.154:9224/api
|
||||
#VUE_APP_BASE_IMG_URL = http://123.132.248.154:9224
|
||||
|
||||
|
||||
添加和编辑：
|
||||
|
||||
1. 上传文件
|
||||
|
||||
2. 服务名称：
|
||||
|
||||
3. 参考空间： EPSG:3857 EPSG:4326
|
||||
|
||||
4. 数据源类型：矢量(shp)、矢量(excel)、栅格(tif)
|
||||
|
||||
1.数据源类型为shp时:
|
||||
|
||||
1. 数据类型：点(point)、线(line)、面(fill)
|
||||
|
||||
2. 上传sld样式文件
|
||||
|
||||
2.数据源类型为tif时:
|
||||
|
||||
1. 上传tif影像边界shp文件
|
||||
|
||||
|
||||
列表展示字段：
|
||||
|
||||
1.服务名称
|
||||
|
||||
2.服务地址
|
||||
|
||||
3.数据源类型
|
||||
|
||||
4.空间参考
|
||||
|
||||
5.创建时间
|
||||
|
||||
6.更新时间
|
||||
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
{
|
||||
"method":"pingyixian",
|
||||
"gaodeApi": "4f992c089f9496201f6e4ea39ff3ab60",
|
||||
|
||||
"pingyixian":{
|
||||
"appname":"平邑县森林火灾指挥调度系统",
|
||||
"area":"平邑县",
|
||||
"baseUrl":"http://111.17.207.220:9001",
|
||||
"layerurl":"http://111.17.207.220:9006/applicationMars/getApplicationInfo/pingyixian",
|
||||
"uavWebSocketUrl":"ws://123.132.248.154:9211/",
|
||||
"map":{
|
||||
"center":[],
|
||||
"zoom":null
|
||||
},
|
||||
"waterUrl":"http://111.17.207.220:9007/geoserver/ksp/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=ksp%3Ashp_1692064004&maxFeatures=5000&outputFormat=application%2Fjson",
|
||||
"goodsUrl":"",
|
||||
"tools":{
|
||||
"routebox":true,
|
||||
"toolsbox":true,
|
||||
"monitorbox":true,
|
||||
"uavbox":true,
|
||||
"waterbox":true,
|
||||
"reportbox":true,
|
||||
"goodsbox":true,
|
||||
"griderbox":false
|
||||
}
|
||||
},
|
||||
"feixian":{
|
||||
"appname":"费县森林防火电子沙盘",
|
||||
"area":"费县",
|
||||
"baseUrl":"http://223.99.16.253:9001",
|
||||
"layerurl":"http://223.99.16.253:9006/applicationMars/getApplicationInfo",
|
||||
"uavWebSocketUrl":"ws://123.132.248.154:9211/",
|
||||
"map":{
|
||||
"center":[],
|
||||
"zoom":null
|
||||
},
|
||||
"waterUrl":"http://111.17.207.220:9007/geoserver/ksp/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=ksp%3Ashp_1691142509&maxFeatures=5000&outputFormat=application%2Fjson",
|
||||
"goodsUrl":"",
|
||||
"tools":{
|
||||
"routebox":true,
|
||||
"toolsbox":true,
|
||||
"monitorbox":false,
|
||||
"uavbox":true,
|
||||
"waterbox":true,
|
||||
"reportbox":true,
|
||||
"goodsbox":true,
|
||||
"griderbox":true
|
||||
}
|
||||
},
|
||||
"gaoxinqu":{
|
||||
"appname":"高新区森林防火电子沙盘",
|
||||
"area":"高新区",
|
||||
"baseUrl":"",
|
||||
"goodsUrl":"",
|
||||
"tools":{
|
||||
"routebox":true,
|
||||
"toolsbox":true,
|
||||
"monitorbox":true,
|
||||
"uavbox":true,
|
||||
"waterbox":true
|
||||
}
|
||||
},
|
||||
"lanlingxian":{
|
||||
"appname":"兰陵县森林防火电子沙盘",
|
||||
"area":"兰陵县",
|
||||
"baseUrl":"",
|
||||
"goodsUrl":"",
|
||||
"tools":{
|
||||
"routebox":true,
|
||||
"toolsbox":true,
|
||||
"monitorbox":true,
|
||||
"uavbox":true,
|
||||
"waterbox":true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
{
|
||||
"method":"pingyixian",
|
||||
"gaodeApi": "4f992c089f9496201f6e4ea39ff3ab60",
|
||||
|
||||
"pingyixian":{
|
||||
"appname":"平邑县森林防火指挥调度系统",
|
||||
"area":"平邑县",
|
||||
"baseUrl":"http://111.17.207.220:9001",
|
||||
"layerurl":"http://111.17.207.220:9006/applicationMars/getApplicationInfo/pingyixian",
|
||||
"uavWebSocketUrl":"ws://123.132.248.154:9211/",
|
||||
"map":{
|
||||
"center":[],
|
||||
"zoom":null
|
||||
},
|
||||
"waterUrl":"http://111.17.207.220:9007/geoserver/ksp/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=ksp%3Ashp_1692064004&maxFeatures=5000&outputFormat=application%2Fjson",
|
||||
"goodsUrl":"",
|
||||
"tools":{
|
||||
"routebox":true,
|
||||
"toolsbox":true,
|
||||
"monitorbox":true,
|
||||
"uavbox":true,
|
||||
"waterbox":true,
|
||||
"reportbox":true,
|
||||
"goodsbox":true,
|
||||
"griderbox":false
|
||||
}
|
||||
},
|
||||
"feixian":{
|
||||
"appname":"费县森林防火电子沙盘",
|
||||
"area":"费县",
|
||||
"baseUrl":"http://223.99.16.253:9001",
|
||||
"layerurl":"http://223.99.16.253:9006/applicationMars/getApplicationInfo",
|
||||
"uavWebSocketUrl":"ws://123.132.248.154:9211/",
|
||||
"map":{
|
||||
"center":[],
|
||||
"zoom":null
|
||||
},
|
||||
"waterUrl":"http://111.17.207.220:9007/geoserver/ksp/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=ksp%3Ashp_1691142509&maxFeatures=5000&outputFormat=application%2Fjson",
|
||||
"goodsUrl":"",
|
||||
"tools":{
|
||||
"routebox":true,
|
||||
"toolsbox":true,
|
||||
"monitorbox":false,
|
||||
"uavbox":true,
|
||||
"waterbox":true,
|
||||
"reportbox":true,
|
||||
"goodsbox":true,
|
||||
"griderbox":true
|
||||
}
|
||||
},
|
||||
"gaoxinqu":{
|
||||
"appname":"高新区森林防火电子沙盘",
|
||||
"area":"高新区",
|
||||
"baseUrl":"",
|
||||
"goodsUrl":"",
|
||||
"tools":{
|
||||
"routebox":true,
|
||||
"toolsbox":true,
|
||||
"monitorbox":true,
|
||||
"uavbox":true,
|
||||
"waterbox":true
|
||||
}
|
||||
},
|
||||
"lanlingxian":{
|
||||
"appname":"兰陵县森林防火电子沙盘",
|
||||
"area":"兰陵县",
|
||||
"baseUrl":"",
|
||||
"goodsUrl":"",
|
||||
"tools":{
|
||||
"routebox":true,
|
||||
"toolsbox":true,
|
||||
"monitorbox":true,
|
||||
"uavbox":true,
|
||||
"waterbox":true
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh-cn">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<meta name="author" content="山东慧创 http://www.hopetrytech.com ">
|
||||
<link rel="icon" href="<%= BASE_URL %>sitelogo.jpg">
|
||||
<title>平邑县森林火灾指挥调度系统</title>
|
||||
<style>
|
||||
.popup-container{
|
||||
text-align:left;
|
||||
}
|
||||
</style>
|
||||
<!--第三方lib-->
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="lib/include-lib.js?time=20210105"
|
||||
libpath="lib/"
|
||||
include="jquery,jquery.range,bootstrap,bootstrap-checkbox,font-awesome,web-icons,layer,haoutil,
|
||||
nprogress,toastr,admui,turf,mars3d,mars3d-widget,mars3d-esri,mars3d-echarts"
|
||||
></script>
|
||||
|
||||
|
||||
<script type="text/javascript" src="imouPlayer.js"></script>
|
||||
<link rel="stylesheet" href="index.css">
|
||||
<script>
|
||||
console.log("imouPlayer",imouPlayer)
|
||||
</script>
|
||||
<link rel="stylesheet" href="./css/divGraphic.css">
|
||||
</head>
|
||||
<body style="padding:0px;overflow: hidden;">
|
||||
<noscript>
|
||||
<strong>非常抱歉 <%= htmlWebpackPlugin.options.title %>当前浏览器不支持脚本运行，请进行设置.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh-cn">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<meta name="author" content="山东慧创 http://www.hopetrytech.com ">
|
||||
<link rel="icon" href="<%= BASE_URL %>sitelogo.jpg">
|
||||
<title>平邑县森林防火指挥调度系统</title>
|
||||
<style>
|
||||
.popup-container{
|
||||
text-align:left;
|
||||
}
|
||||
</style>
|
||||
<!--第三方lib-->
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="lib/include-lib.js?time=20210105"
|
||||
libpath="lib/"
|
||||
include="jquery,jquery.range,bootstrap,bootstrap-checkbox,font-awesome,web-icons,layer,haoutil,
|
||||
nprogress,toastr,admui,turf,mars3d,mars3d-widget,mars3d-esri,mars3d-echarts"
|
||||
></script>
|
||||
|
||||
|
||||
<script type="text/javascript" src="imouPlayer.js"></script>
|
||||
<link rel="stylesheet" href="index.css">
|
||||
<script>
|
||||
console.log("imouPlayer",imouPlayer)
|
||||
</script>
|
||||
<link rel="stylesheet" href="./css/divGraphic.css">
|
||||
</head>
|
||||
<body style="padding:0px;overflow: hidden;">
|
||||
<noscript>
|
||||
<strong>非常抱歉 <%= htmlWebpackPlugin.options.title %>当前浏览器不支持脚本运行，请进行设置.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<template>
|
||||
|
||||
<div class="dashboard-container">
|
||||
<h1>平邑县森林火灾指挥调度系统管理后台</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import PanelGroup from './components/PanelGroup'
|
||||
|
||||
export default {
|
||||
name: 'dashboard-admin',
|
||||
components: {
|
||||
// PanelGroup
|
||||
},
|
||||
|
||||
methods: {
|
||||
toAttractPage:function(){
|
||||
this.$router.push({
|
||||
path: '/attract'
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style >
|
||||
.dashboard-container {
|
||||
padding-top: 20px;
|
||||
background-image: url('~@/assets/nav/bg.png');
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.dashboard-container h1{
|
||||
color: aliceblue;
|
||||
font-size: 38px;
|
||||
margin-top: 400px;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<template>
|
||||
|
||||
<div class="dashboard-container">
|
||||
<h1>平邑县森林防火指挥调度系统管理后台</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import PanelGroup from './components/PanelGroup'
|
||||
|
||||
export default {
|
||||
name: 'dashboard-admin',
|
||||
components: {
|
||||
// PanelGroup
|
||||
},
|
||||
|
||||
methods: {
|
||||
toAttractPage:function(){
|
||||
this.$router.push({
|
||||
path: '/attract'
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style >
|
||||
.dashboard-container {
|
||||
padding-top: 20px;
|
||||
background-image: url('~@/assets/nav/bg.png');
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.dashboard-container h1{
|
||||
color: aliceblue;
|
||||
font-size: 38px;
|
||||
margin-top: 400px;
|
||||
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,52 @@
|
|||
//地球坐标系WGS84转火星坐标系GCJ02
|
||||
var pi = 3.14159265358979324;
|
||||
var a = 6378245.0;
|
||||
var ee = 0.00669342162296594323;
|
||||
/*判断是否在国内，不在国内则不做偏移*/
|
||||
function outOfChina(lon, lat)
|
||||
{
|
||||
if ((lon < 72.004 || lon > 137.8347)&&(lat < 0.8293 || lat > 55.8271)){
|
||||
return true;
|
||||
}else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
function transformLat(x,y)
|
||||
{
|
||||
var ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
|
||||
ret += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;
|
||||
ret += (20.0 * Math.sin(y * pi) + 40.0 * Math.sin(y / 3.0 * pi)) * 2.0 / 3.0;
|
||||
ret += (160.0 * Math.sin(y / 12.0 * pi) + 320 * Math.sin(y * pi / 30.0)) * 2.0 / 3.0;
|
||||
return ret;
|
||||
}
|
||||
|
||||
function transformLon(x,y)
|
||||
{
|
||||
var ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
|
||||
ret += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;
|
||||
ret += (20.0 * Math.sin(x * pi) + 40.0 * Math.sin(x / 3.0 * pi)) * 2.0 / 3.0;
|
||||
ret += (150.0 * Math.sin(x / 12.0 * pi) + 300.0 * Math.sin(x / 30.0 * pi)) * 2.0 / 3.0;
|
||||
return ret;
|
||||
}
|
||||
|
||||
export function transformWGSGCJ2(wgLat,wgLon)
|
||||
{
|
||||
var mars_point={lon:0,lat:0};
|
||||
if (outOfChina(wgLat, wgLon))
|
||||
{
|
||||
mars_point.lat = wgLat;
|
||||
mars_point.lon = wgLon;
|
||||
return;
|
||||
}
|
||||
var dLat = transformLat(wgLon - 105.0, wgLat - 35.0);
|
||||
var dLon = transformLon(wgLon - 105.0, wgLat - 35.0);
|
||||
var radLat = wgLat / 180.0 * pi;
|
||||
var magic = Math.sin(radLat);
|
||||
magic = 1 - ee * magic * magic;
|
||||
var sqrtMagic = Math.sqrt(magic);
|
||||
dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * pi);
|
||||
dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * pi);
|
||||
mars_point.lat = wgLat + dLat;
|
||||
mars_point.lon = wgLon + dLon;
|
||||
return mars_point
|
||||
}
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
//地球坐标系WGS84转火星坐标系GCJ02
|
||||
var pi = 3.14159265358979324;
|
||||
var a = 6378245.0;
|
||||
var ee = 0.00669342162296594323;
|
||||
/*判断是否在国内，不在国内则不做偏移*/
|
||||
function outOfChina(lon, lat)
|
||||
{
|
||||
if ((lon < 72.004 || lon > 137.8347)&&(lat < 0.8293 || lat > 55.8271)){
|
||||
return true;
|
||||
}else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
function transformLat(x,y)
|
||||
{
|
||||
var ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
|
||||
ret += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;
|
||||
ret += (20.0 * Math.sin(y * pi) + 40.0 * Math.sin(y / 3.0 * pi)) * 2.0 / 3.0;
|
||||
ret += (160.0 * Math.sin(y / 12.0 * pi) + 320 * Math.sin(y * pi / 30.0)) * 2.0 / 3.0;
|
||||
return ret;
|
||||
}
|
||||
|
||||
function transformLon(x,y)
|
||||
{
|
||||
var ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
|
||||
ret += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;
|
||||
ret += (20.0 * Math.sin(x * pi) + 40.0 * Math.sin(x / 3.0 * pi)) * 2.0 / 3.0;
|
||||
ret += (150.0 * Math.sin(x / 12.0 * pi) + 300.0 * Math.sin(x / 30.0 * pi)) * 2.0 / 3.0;
|
||||
return ret;
|
||||
}
|
||||
|
||||
export function transformWGSGCJ2(wgLat,wgLon)
|
||||
{
|
||||
var mars_point={lon:0,lat:0};
|
||||
if (outOfChina(wgLat, wgLon))
|
||||
{
|
||||
mars_point.lat = wgLat;
|
||||
mars_point.lon = wgLon;
|
||||
return;
|
||||
}
|
||||
var dLat = transformLat(wgLon - 105.0, wgLat - 35.0);
|
||||
var dLon = transformLon(wgLon - 105.0, wgLat - 35.0);
|
||||
var radLat = wgLat / 180.0 * pi;
|
||||
var magic = Math.sin(radLat);
|
||||
magic = 1 - ee * magic * magic;
|
||||
var sqrtMagic = Math.sqrt(magic);
|
||||
dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * pi);
|
||||
dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * pi);
|
||||
mars_point.lat = wgLat + dLat;
|
||||
mars_point.lon = wgLon + dLon;
|
||||
return mars_point
|
||||
}
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
//地球坐标系WGS84转火星坐标系GCJ02
|
||||
var pi = 3.14159265358979324;
|
||||
var a = 6378245.0;
|
||||
var ee = 0.00669342162296594323;
|
||||
/*判断是否在国内，不在国内则不做偏移*/
|
||||
function outOfChina(lon, lat)
|
||||
{
|
||||
if ((lon < 72.004 || lon > 137.8347)&&(lat < 0.8293 || lat > 55.8271)){
|
||||
return true;
|
||||
}else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
function transformLat(x,y)
|
||||
{
|
||||
var ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
|
||||
ret += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;
|
||||
ret += (20.0 * Math.sin(y * pi) + 40.0 * Math.sin(y / 3.0 * pi)) * 2.0 / 3.0;
|
||||
ret += (160.0 * Math.sin(y / 12.0 * pi) + 320 * Math.sin(y * pi / 30.0)) * 2.0 / 3.0;
|
||||
return ret;
|
||||
}
|
||||
|
||||
function transformLon(x,y)
|
||||
{
|
||||
var ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
|
||||
ret += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;
|
||||
ret += (20.0 * Math.sin(x * pi) + 40.0 * Math.sin(x / 3.0 * pi)) * 2.0 / 3.0;
|
||||
ret += (150.0 * Math.sin(x / 12.0 * pi) + 300.0 * Math.sin(x / 30.0 * pi)) * 2.0 / 3.0;
|
||||
return ret;
|
||||
}
|
||||
|
||||
export function transformWGSGCJ2(wgLat,wgLon)
|
||||
{
|
||||
var mars_point={lon:0,lat:0};
|
||||
if (outOfChina(wgLat, wgLon))
|
||||
{
|
||||
mars_point.lat = wgLat;
|
||||
mars_point.lon = wgLon;
|
||||
return;
|
||||
}
|
||||
var dLat = transformLat(wgLon - 105.0, wgLat - 35.0);
|
||||
var dLon = transformLon(wgLon - 105.0, wgLat - 35.0);
|
||||
var radLat = wgLat / 180.0 * pi;
|
||||
var magic = Math.sin(radLat);
|
||||
magic = 1 - ee * magic * magic;
|
||||
var sqrtMagic = Math.sqrt(magic);
|
||||
dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * pi);
|
||||
dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * pi);
|
||||
mars_point.lat = wgLat + dLat;
|
||||
mars_point.lon = wgLon + dLon;
|
||||
return mars_point
|
||||
}
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
import axios from 'axios'
|
||||
|
||||
export const getWeather = ()=>{
|
||||
return new Promise((resolve,reject)=>{
|
||||
try{
|
||||
// 易客云天气API http://yiketianqi.com/
|
||||
axios({
|
||||
method: 'get',
|
||||
// url: `http://v0.yiketianqi.com/api?unescape=1&version=v63&appid=88136471&appsecret=Hw4GLOcA&city=临沂`,
|
||||
url:"http://v1.yiketianqi.com/api?unescape=1&version=v61&appid=55972896&appsecret=jUb3vKAh",
|
||||
}).then((res) => {
|
||||
resolve(res.data);
|
||||
}).catch(e=>{
|
||||
reject(null);
|
||||
});
|
||||
}catch(e){
|
||||
reject(null);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export const getWindDegree = (type)=>{
|
||||
let degree = 0;
|
||||
switch(type){
|
||||
case "东风":
|
||||
degree = 90;
|
||||
break;
|
||||
case "南风":
|
||||
degree = 0;
|
||||
break;
|
||||
case "西风":
|
||||
degree = 270;
|
||||
break;
|
||||
case "北风":
|
||||
degree = 180;
|
||||
break;
|
||||
case "东北风":
|
||||
degree = 135;
|
||||
break;
|
||||
case "东南风":
|
||||
degree = 45;
|
||||
break;
|
||||
case "西北风":
|
||||
degree = 225;
|
||||
break;
|
||||
case "西南风":
|
||||
degree = 315;
|
||||
break;
|
||||
default:
|
||||
degree = null;
|
||||
break;
|
||||
}
|
||||
return degree;
|
||||
}
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
import axios from 'axios'
|
||||
|
||||
export const getWeather = ()=>{
|
||||
return new Promise((resolve,reject)=>{
|
||||
try{
|
||||
// 易客云天气API http://yiketianqi.com/
|
||||
axios({
|
||||
method: 'get',
|
||||
// url: `http://v0.yiketianqi.com/api?unescape=1&version=v63&appid=88136471&appsecret=Hw4GLOcA&city=临沂`,
|
||||
url:"http://v1.yiketianqi.com/api?unescape=1&version=v61&appid=55972896&appsecret=jUb3vKAh",
|
||||
}).then((res) => {
|
||||
resolve(res.data);
|
||||
}).catch(e=>{
|
||||
reject(null);
|
||||
});
|
||||
}catch(e){
|
||||
reject(null);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export const getWindDegree = (type)=>{
|
||||
let degree = 0;
|
||||
switch(type){
|
||||
case "东风":
|
||||
degree = 90;
|
||||
break;
|
||||
case "南风":
|
||||
degree = 0;
|
||||
break;
|
||||
case "西风":
|
||||
degree = 270;
|
||||
break;
|
||||
case "北风":
|
||||
degree = 180;
|
||||
break;
|
||||
case "东北风":
|
||||
degree = 135;
|
||||
break;
|
||||
case "东南风":
|
||||
degree = 45;
|
||||
break;
|
||||
case "西北风":
|
||||
degree = 225;
|
||||
break;
|
||||
case "西南风":
|
||||
degree = 315;
|
||||
break;
|
||||
default:
|
||||
degree = null;
|
||||
break;
|
||||
}
|
||||
return degree;
|
||||
}
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
import axios from 'axios'
|
||||
|
||||
export const getWeather = ()=>{
|
||||
return new Promise((resolve,reject)=>{
|
||||
try{
|
||||
// 易客云天气API http://yiketianqi.com/
|
||||
axios({
|
||||
method: 'get',
|
||||
// url: `http://v0.yiketianqi.com/api?unescape=1&version=v63&appid=88136471&appsecret=Hw4GLOcA&city=临沂`,
|
||||
url:"http://v1.yiketianqi.com/api?unescape=1&version=v61&appid=55972896&appsecret=jUb3vKAh",
|
||||
}).then((res) => {
|
||||
resolve(res.data);
|
||||
}).catch(e=>{
|
||||
reject(null);
|
||||
});
|
||||
}catch(e){
|
||||
reject(null);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export const getWindDegree = (type)=>{
|
||||
let degree = 0;
|
||||
switch(type){
|
||||
case "东风":
|
||||
degree = 90;
|
||||
break;
|
||||
case "南风":
|
||||
degree = 0;
|
||||
break;
|
||||
case "西风":
|
||||
degree = 270;
|
||||
break;
|
||||
case "北风":
|
||||
degree = 180;
|
||||
break;
|
||||
case "东北风":
|
||||
degree = 135;
|
||||
break;
|
||||
case "东南风":
|
||||
degree = 45;
|
||||
break;
|
||||
case "西北风":
|
||||
degree = 225;
|
||||
break;
|
||||
case "西南风":
|
||||
degree = 315;
|
||||
break;
|
||||
default:
|
||||
degree = null;
|
||||
break;
|
||||
}
|
||||
return degree;
|
||||
}
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
import axios from 'axios'
|
||||
|
||||
export const getWeather = ()=>{
|
||||
return new Promise((resolve,reject)=>{
|
||||
try{
|
||||
// 易客云天气API http://yiketianqi.com/
|
||||
axios({
|
||||
method: 'get',
|
||||
// url: `http://v0.yiketianqi.com/api?unescape=1&version=v63&appid=88136471&appsecret=Hw4GLOcA&city=临沂`,
|
||||
url:"http://v1.yiketianqi.com/api?unescape=1&version=v61&appid=55972896&appsecret=jUb3vKAh",
|
||||
}).then((res) => {
|
||||
resolve(res.data);
|
||||
}).catch(e=>{
|
||||
reject(null);
|
||||
});
|
||||
}catch(e){
|
||||
reject(null);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export const getWindDegree = (type)=>{
|
||||
let degree = 0;
|
||||
switch(type){
|
||||
case "东风":
|
||||
degree = 90;
|
||||
break;
|
||||
case "南风":
|
||||
degree = 0;
|
||||
break;
|
||||
case "西风":
|
||||
degree = 270;
|
||||
break;
|
||||
case "北风":
|
||||
degree = 180;
|
||||
break;
|
||||
case "东北风":
|
||||
degree = 135;
|
||||
break;
|
||||
case "东南风":
|
||||
degree = 45;
|
||||
break;
|
||||
case "西北风":
|
||||
degree = 225;
|
||||
break;
|
||||
case "西南风":
|
||||
degree = 315;
|
||||
break;
|
||||
default:
|
||||
degree = null;
|
||||
break;
|
||||
}
|
||||
return degree;
|
||||
}
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
import axios from 'axios'
|
||||
|
||||
export const getWeather = ()=>{
|
||||
return new Promise((resolve,reject)=>{
|
||||
try{
|
||||
// 易客云天气API http://yiketianqi.com/
|
||||
axios({
|
||||
method: 'get',
|
||||
// url: `http://v0.yiketianqi.com/api?unescape=1&version=v63&appid=88136471&appsecret=Hw4GLOcA&city=临沂`,
|
||||
url:"http://v1.yiketianqi.com/api?unescape=1&version=v61&appid=55972896&appsecret=jUb3vKAh",
|
||||
}).then((res) => {
|
||||
resolve(res.data);
|
||||
}).catch(e=>{
|
||||
reject(null);
|
||||
});
|
||||
}catch(e){
|
||||
reject(null);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export const getWindDegree = (type)=>{
|
||||
let degree = 0;
|
||||
switch(type){
|
||||
case "东风":
|
||||
degree = 90;
|
||||
break;
|
||||
case "南风":
|
||||
degree = 0;
|
||||
break;
|
||||
case "西风":
|
||||
degree = 270;
|
||||
break;
|
||||
case "北风":
|
||||
degree = 180;
|
||||
break;
|
||||
case "东北风":
|
||||
degree = 135;
|
||||
break;
|
||||
case "东南风":
|
||||
degree = 45;
|
||||
break;
|
||||
case "西北风":
|
||||
degree = 225;
|
||||
break;
|
||||
case "西南风":
|
||||
degree = 315;
|
||||
break;
|
||||
default:
|
||||
degree = null;
|
||||
break;
|
||||
}
|
||||
return degree;
|
||||
}
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
import axios from 'axios'
|
||||
|
||||
export const getWeather = ()=>{
|
||||
return new Promise((resolve,reject)=>{
|
||||
try{
|
||||
// 易客云天气API http://yiketianqi.com/
|
||||
axios({
|
||||
method: 'get',
|
||||
// url: `http://v0.yiketianqi.com/api?unescape=1&version=v63&appid=88136471&appsecret=Hw4GLOcA&city=临沂`,
|
||||
url:"http://v1.yiketianqi.com/api?unescape=1&version=v61&appid=55972896&appsecret=jUb3vKAh&citycode=371324",
|
||||
}).then((res) => {
|
||||
resolve(res.data);
|
||||
}).catch(e=>{
|
||||
reject(null);
|
||||
});
|
||||
}catch(e){
|
||||
reject(null);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export const getWindDegree = (type)=>{
|
||||
let degree = 0;
|
||||
switch(type){
|
||||
case "东风":
|
||||
degree = 90;
|
||||
break;
|
||||
case "南风":
|
||||
degree = 0;
|
||||
break;
|
||||
case "西风":
|
||||
degree = 270;
|
||||
break;
|
||||
case "北风":
|
||||
degree = 180;
|
||||
break;
|
||||
case "东北风":
|
||||
degree = 135;
|
||||
break;
|
||||
case "东南风":
|
||||
degree = 45;
|
||||
break;
|
||||
case "西北风":
|
||||
degree = 225;
|
||||
break;
|
||||
case "西南风":
|
||||
degree = 315;
|
||||
break;
|
||||
default:
|
||||
degree = null;
|
||||
break;
|
||||
}
|
||||
return degree;
|
||||
}
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
import axios from 'axios'
|
||||
|
||||
export const getWeather = ()=>{
|
||||
return new Promise((resolve,reject)=>{
|
||||
try{
|
||||
// 易客云天气API http://yiketianqi.com/
|
||||
axios({
|
||||
method: 'get',
|
||||
// url: `http://v0.yiketianqi.com/api?unescape=1&version=v63&appid=88136471&appsecret=Hw4GLOcA&city=临沂`,
|
||||
url:"http://v1.yiketianqi.com/api?unescape=1&version=v61&appid=55972896&appsecret=jUb3vKAh&citycode=371324",
|
||||
}).then((res) => {
|
||||
resolve(res.data);
|
||||
}).catch(e=>{
|
||||
reject(null);
|
||||
});
|
||||
}catch(e){
|
||||
reject(null);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export const getWindDegree = (type)=>{
|
||||
let degree = 0;
|
||||
switch(type){
|
||||
case "东风":
|
||||
degree = 90;
|
||||
break;
|
||||
case "南风":
|
||||
degree = 0;
|
||||
break;
|
||||
case "西风":
|
||||
degree = 270;
|
||||
break;
|
||||
case "北风":
|
||||
degree = 180;
|
||||
break;
|
||||
case "东北风":
|
||||
degree = 135;
|
||||
break;
|
||||
case "东南风":
|
||||
degree = 45;
|
||||
break;
|
||||
case "西北风":
|
||||
degree = 225;
|
||||
break;
|
||||
case "西南风":
|
||||
degree = 315;
|
||||
break;
|
||||
default:
|
||||
degree = null;
|
||||
break;
|
||||
}
|
||||
return degree;
|
||||
}
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
import axios from 'axios'
|
||||
|
||||
export const getWeather = ()=>{
|
||||
return new Promise((resolve,reject)=>{
|
||||
try{
|
||||
// 易客云天气API http://yiketianqi.com/
|
||||
axios({
|
||||
method: 'get',
|
||||
// url: `http://v0.yiketianqi.com/api?unescape=1&version=v63&appid=88136471&appsecret=Hw4GLOcA&city=临沂`,
|
||||
url:"http://v1.yiketianqi.com/api?unescape=1&version=v61&appid=55972896&appsecret=jUb3vKAh&city=平邑",
|
||||
}).then((res) => {
|
||||
resolve(res.data);
|
||||
}).catch(e=>{
|
||||
reject(null);
|
||||
});
|
||||
}catch(e){
|
||||
reject(null);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export const getWindDegree = (type)=>{
|
||||
let degree = 0;
|
||||
switch(type){
|
||||
case "东风":
|
||||
degree = 90;
|
||||
break;
|
||||
case "南风":
|
||||
degree = 0;
|
||||
break;
|
||||
case "西风":
|
||||
degree = 270;
|
||||
break;
|
||||
case "北风":
|
||||
degree = 180;
|
||||
break;
|
||||
case "东北风":
|
||||
degree = 135;
|
||||
break;
|
||||
case "东南风":
|
||||
degree = 45;
|
||||
break;
|
||||
case "西北风":
|
||||
degree = 225;
|
||||
break;
|
||||
case "西南风":
|
||||
degree = 315;
|
||||
break;
|
||||
default:
|
||||
degree = null;
|
||||
break;
|
||||
}
|
||||
return degree;
|
||||
}
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
import axios from 'axios'
|
||||
|
||||
export const getWeather = ()=>{
|
||||
return new Promise((resolve,reject)=>{
|
||||
try{
|
||||
// 易客云天气API http://yiketianqi.com/
|
||||
axios({
|
||||
method: 'get',
|
||||
// url: `http://v0.yiketianqi.com/api?unescape=1&version=v63&appid=88136471&appsecret=Hw4GLOcA&city=临沂`,
|
||||
url:"http://v1.yiketianqi.com/api?unescape=1&version=v61&appid=55972896&appsecret=jUb3vKAh&city=平邑",
|
||||
}).then((res) => {
|
||||
resolve(res.data);
|
||||
}).catch(e=>{
|
||||
reject(null);
|
||||
});
|
||||
}catch(e){
|
||||
reject(null);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export const getWindDegree = (type)=>{
|
||||
let degree = 0;
|
||||
switch(type){
|
||||
case "东风":
|
||||
degree = 90;
|
||||
break;
|
||||
case "南风":
|
||||
degree = 0;
|
||||
break;
|
||||
case "西风":
|
||||
degree = 270;
|
||||
break;
|
||||
case "北风":
|
||||
degree = 180;
|
||||
break;
|
||||
case "东北风":
|
||||
degree = 135;
|
||||
break;
|
||||
case "东南风":
|
||||
degree = 45;
|
||||
break;
|
||||
case "西北风":
|
||||
degree = 225;
|
||||
break;
|
||||
case "西南风":
|
||||
degree = 315;
|
||||
break;
|
||||
default:
|
||||
degree = null;
|
||||
break;
|
||||
}
|
||||
return degree;
|
||||
}
|
||||
|
|
@ -0,0 +1,430 @@
|
|||
<template>
|
||||
<div class="box">
|
||||
<div class="box-title">线索合并</div>
|
||||
<div class="tip-title">将会对选中的火情线索进行合并，请您确定合</div>
|
||||
<div class="box-container">
|
||||
<span v-for="(item,index) in checkNumber" :key="index" @click="checkItem(index)" class="check-tag" :style="{'color':item.selected?'#179fc8':'#ccc'}">
|
||||
<span :key="checkNumberRondom"> 编号：{{item.clueNo}}</span>
|
||||
<!-- <i class="el-icon el-icon-close"></i> -->
|
||||
</span>
|
||||
</div>
|
||||
<div style="text-align:center;margin:10px 28px;">
|
||||
<span style="color:#fff;">{{formData.lng}} {{formData.lat}}</span>
|
||||
</div>
|
||||
<div style="padding-bottom: 20px;">
|
||||
<el-button type="success" size="mini" @click="selectPosition()">选择位置</el-button>
|
||||
<el-button type="warning" size="mini" @click="cancle()">取消操作</el-button>
|
||||
<el-button type="primary" size="mini" @click="merage()">确认合并</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AppConfigInfo from '../../../../public/config/app.json'
|
||||
import axios from 'axios'
|
||||
let BASE_URL = process.env.VUE_APP_BASE_API
|
||||
import { parse } from '../lib/handleGeojson';
|
||||
export default {
|
||||
name: 'mergebox',
|
||||
props:['globalmap','checkList','checkNumber'],
|
||||
data(){
|
||||
return {
|
||||
active:1,
|
||||
list:[
|
||||
|
||||
],
|
||||
formData:{
|
||||
"address": "",
|
||||
"lng": "",
|
||||
"lat": "",
|
||||
"ids": [],
|
||||
"modifyId": localStorage.getItem("userId")
|
||||
},
|
||||
graphicLayer:null,
|
||||
graphicPoint:null,
|
||||
graphicWinodw:null,
|
||||
pathPointGraphicLayer:null,
|
||||
checkNumberRondom:1,
|
||||
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
checkList:function(e){
|
||||
|
||||
}
|
||||
},
|
||||
created(){
|
||||
// this.getList();
|
||||
window.wuzi = this.wuzi
|
||||
window.shuiyuan = this.shuiyuan
|
||||
},
|
||||
mounted(){
|
||||
|
||||
},
|
||||
methods:{
|
||||
checkItem(index){
|
||||
this.checkNumber.forEach((item,idx)=>{
|
||||
this.checkNumber[idx].selected = false;
|
||||
})
|
||||
|
||||
this.checkNumber[index].selected = true;
|
||||
|
||||
let obj = this.checkNumber[index]
|
||||
this.formData.lng = obj.lng;
|
||||
this.formData.lat = obj.lat;
|
||||
this.formData.address = obj.address
|
||||
|
||||
console.log("formData",this.formData);
|
||||
this.checkNumberRondom = Math.random();
|
||||
},
|
||||
selectPosition(){
|
||||
let _this = this;
|
||||
window.globalmap.once(mars3d.EventType.click, function (event) {
|
||||
window.globalmap.setCursor(false)
|
||||
const cartesian = event.cartesian
|
||||
const point = mars3d.LngLatPoint.fromCartesian(cartesian)
|
||||
point.format()
|
||||
_this.drawPoint(point.lng, point.lat, point.z);
|
||||
_this.formData.lng = point.lng;
|
||||
_this.formData.lat = point.lat;
|
||||
|
||||
let url = "https://restapi.amap.com/v3/geocode/regeo?key="+AppConfigInfo.gaodeApi+"&location=" + point.lng + "," + point.lat + "&extensions=base"
|
||||
axios({
|
||||
method: 'get',
|
||||
url: url,
|
||||
}).then(res => {
|
||||
let name = res.data.regeocode.formatted_address
|
||||
|
||||
_this.formData.address = name;
|
||||
|
||||
}).catch(err =>{
|
||||
console.log('ee',err)
|
||||
})
|
||||
|
||||
})
|
||||
},
|
||||
drawPoint(lng,lat,z){
|
||||
if(this.pathPointGraphicLayer==null){
|
||||
this.pathPointGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
window.globalmap.addLayer(this.pathPointGraphicLayer);
|
||||
}else{
|
||||
this.pathPointGraphicLayer.clear();
|
||||
}
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [lng, lat, z],
|
||||
style: {
|
||||
image: "/img/huozai.png",
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
clampToGround: true
|
||||
},
|
||||
attr: "合并后火点"
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic) // 还可以另
|
||||
},
|
||||
shuiyuan(e){
|
||||
this.$emit("shuiyuan",e);
|
||||
},
|
||||
wuzi(e){
|
||||
this.$emit("wuzi",e);
|
||||
},
|
||||
getInfo(active){
|
||||
this.listQuery.state = active;
|
||||
this.active = active;
|
||||
this.getList();
|
||||
},
|
||||
merage(){
|
||||
this.checkNumber.forEach((item,index)=>{
|
||||
this.formData.ids.push(item.id);
|
||||
})
|
||||
|
||||
if(this.checkList.length<1){
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"请选择至少1条线索",
|
||||
})
|
||||
return;
|
||||
}
|
||||
|
||||
if(!this.formData.lng && !this.formData.lat){
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"请选择合并后火点",
|
||||
})
|
||||
return;
|
||||
}
|
||||
|
||||
axios({
|
||||
method:"post",
|
||||
url:BASE_URL+"/FireManagement/MergeNewFireClueInfo",
|
||||
data:this.formData,
|
||||
headers:{
|
||||
'X-Token':localStorage.getItem("X-Token")
|
||||
}
|
||||
}).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
if(this.pathPointGraphicLayer){
|
||||
this.pathPointGraphicLayer.clear();
|
||||
this.pathPointGraphicLayer = null;
|
||||
}
|
||||
this.$emit("success");
|
||||
}
|
||||
})
|
||||
},
|
||||
cancle(){
|
||||
if(this.pathPointGraphicLayer){
|
||||
this.pathPointGraphicLayer.clear();
|
||||
this.pathPointGraphicLayer = null;
|
||||
}
|
||||
this.$emit("clsoe");
|
||||
},
|
||||
getList(){
|
||||
axios({
|
||||
method:"post",
|
||||
url:BASE_URL+"/FireManagement/LoadFireClueInfoByAreaName",
|
||||
params:this.listQuery,
|
||||
headers:{
|
||||
'X-Token':localStorage.getItem("X-Token")
|
||||
}
|
||||
}).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
this.list = res.data.data;
|
||||
}
|
||||
})
|
||||
},
|
||||
toPosition(item){
|
||||
console.log(item);
|
||||
this.$emit("changeCurrentInfo",item);
|
||||
let _self = this;
|
||||
|
||||
if(!_self.graphicLayer){
|
||||
_self.graphicLayer = new this.mars3d.layer.GraphicLayer({
|
||||
pid:88,
|
||||
})
|
||||
window.globalmap.addLayer(_self.graphicLayer)
|
||||
}
|
||||
if(_self.graphicPoint && _self.graphicWinodw){
|
||||
_self.graphicLayer.clear();
|
||||
_self.graphicPoint = null;
|
||||
_self.graphicWinodw = null;
|
||||
}
|
||||
_self.graphicPoint = new mars3d.graphic.DivLightPoint({
|
||||
position: [parseFloat(item.lng),parseFloat(item.lat)],
|
||||
style: {
|
||||
color: "#f33349",
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
|
||||
},
|
||||
})
|
||||
_self.graphicLayer.addGraphic(_self.graphicPoint)
|
||||
|
||||
_self.graphicWinodw = new mars3d.graphic.DivGraphic({
|
||||
position: [parseFloat(item.lng),parseFloat(item.lat)],
|
||||
style: {
|
||||
html: `<div class="marsTiltPanel marsTiltPanel-theme-red" style="font-size:12px;">
|
||||
<div class="marsTiltPanel-wrap">
|
||||
<div class="area">
|
||||
<div class="arrow-lt"></div>
|
||||
<div class="b-t"></div>
|
||||
<div class="b-r"></div>
|
||||
<div class="b-b"></div>
|
||||
<div class="b-l"></div>
|
||||
<div class="arrow-rb"></div>
|
||||
<div class="label-wrap">
|
||||
<div class="title">${item.address}</div>
|
||||
<div class="label-content">
|
||||
<div class="data-li">
|
||||
<div class="data-label">火情描述：${item.describe}</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-label">上报时间：</div>
|
||||
<div class="data-value"><span id="lablYeWei" class="label-num">${item.reportTime}</span><span class="label-unit"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-value">
|
||||
<span id="lablSBZT1" class="label-tag data-value-status-1" title="人员调度">人员调度</span>
|
||||
<span id="lablSBZT2" onclick="wuzi([${item.lng},${item.lat}]);" class="label-tag data-value-status-0" title="关闭状态" >物资调度</span>
|
||||
<span id="lablCSFM2" onclick="shuiyuan([${item.lng},${item.lat}])" class="label-tag data-value-status-2" title="打开状态">附近水源</span>
|
||||
<span id="lablSBZT1" class="label-tag data-value-status-1" title="路线规划">路线规划</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-t-l"></div>
|
||||
<div class="b-b-r"></div>
|
||||
</div>
|
||||
<div class="arrow" ></div>
|
||||
</div>`,horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
|
||||
clampToGround: true
|
||||
},
|
||||
attr: { remark: "示例10" },
|
||||
// 可以传入自定义测试点样式
|
||||
// testPoint: {
|
||||
// color: '#ff0000',
|
||||
// pixelSize: 8,
|
||||
// },
|
||||
pointerEvents: true // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
|
||||
})
|
||||
_self.graphicLayer.addGraphic(_self.graphicWinodw);
|
||||
|
||||
_self.graphicWinodw.flyTo();
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box{
|
||||
width:100%;
|
||||
height:100%;
|
||||
background-image: url(/img/goods-pingyixian.png);
|
||||
background-size:100% 100%;
|
||||
}
|
||||
|
||||
.box-title{
|
||||
width:100%;
|
||||
height:45px;
|
||||
overflow: hidden;
|
||||
line-height:40px;
|
||||
color:#eee;
|
||||
text-align: center;
|
||||
font-size:18px;
|
||||
}
|
||||
.tip-title{
|
||||
width:280px;
|
||||
margin:0px auto;
|
||||
height:80px;
|
||||
padding-top:20px;
|
||||
font-size: 22px;
|
||||
font-family: OPPOSans-M, OPPOSans;
|
||||
font-weight: normal;
|
||||
color: #179fc8;
|
||||
line-height: 32px;
|
||||
|
||||
}
|
||||
.tab-container{
|
||||
width:210px;
|
||||
height:60px;
|
||||
border-bottom:1px solid #2F5D55;
|
||||
padding-top:10px;
|
||||
margin:0px auto;
|
||||
}
|
||||
.tab-button{
|
||||
width:70px;
|
||||
font-size:12px;
|
||||
height:50px;
|
||||
line-height:50px;
|
||||
color:#0ABFB5;
|
||||
float:left;
|
||||
cursor:pointer;
|
||||
}
|
||||
.check-tag{
|
||||
cursor:pointer;
|
||||
margin:4px 10px;background: #112A26;border: 1px solid #1C4741;float:left;padding:3px 6px 3px 6px;border-radius: 19px 0px 19px 19px;
|
||||
}
|
||||
.box-container{
|
||||
width: calc( 100% - 20px);
|
||||
margin:0px 15px;
|
||||
margin-bottom:10px;
|
||||
height: calc( 100% - 190px);
|
||||
overflow-y:auto;
|
||||
}
|
||||
.news{
|
||||
width: calc( 100% - 10px);
|
||||
line-height:18px;
|
||||
padding:6px 15px 10px 15px;
|
||||
text-align:left;
|
||||
color:#ccc;
|
||||
background:rgba(0,0,0,0.5);
|
||||
margin:6px 0px;
|
||||
border:1px dashed #999;
|
||||
}
|
||||
.news::after{
|
||||
content:"";
|
||||
clear:both;
|
||||
display:block;
|
||||
height:0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.checkbox-container{
|
||||
width:18px;
|
||||
height:18px;
|
||||
position:relative;
|
||||
top:12px;
|
||||
margin-right:10px;
|
||||
float:left;
|
||||
background: rgba(2,0,77,0.4);
|
||||
box-shadow: inset 0px 0px 34px 0px #A15E01;
|
||||
border: 1px solid #F18B00;
|
||||
cursor: pointer;
|
||||
}
|
||||
.news-container{
|
||||
width: calc( 100% - 30px);
|
||||
float:left;
|
||||
}
|
||||
.news .title{
|
||||
line-height:40px;
|
||||
color:#E48F19;
|
||||
margin-bottom:12px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.news .title::after{
|
||||
content:"";
|
||||
width:100%;
|
||||
height:0px;
|
||||
border: 0.5px solid;
|
||||
position:absolute;
|
||||
bottom:0px;
|
||||
left:0px;
|
||||
border-image: linear-gradient(90deg, rgba(241, 139, 0, 1), rgba(86, 254, 254, 0),rgba(86, 254, 254, 0)) 1 1;
|
||||
}
|
||||
|
||||
.news .desc{
|
||||
font-size:12px;
|
||||
color:#fff;
|
||||
margin-bottom:6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,429 @@
|
|||
<template>
|
||||
<div class="box">
|
||||
<div class="box-title">线索合并</div>
|
||||
<div class="tip-title">将会对选中的火情线索进行合并，请您确定合</div>
|
||||
<div class="box-container">
|
||||
<span v-for="(item,index) in checkNumber" :key="index" @click="checkItem(index)" class="check-tag" :style="{'color':item.selected?'#179fc8':'#ccc'}">
|
||||
<span :key="checkNumberRondom"> 编号：{{item.clueNo}}</span>
|
||||
<!-- <i class="el-icon el-icon-close"></i> -->
|
||||
</span>
|
||||
</div>
|
||||
<div style="text-align:center;margin:10px 28px;">
|
||||
<span style="color:#fff;">{{formData.lng}} {{formData.lat}}</span>
|
||||
</div>
|
||||
<div style="padding-bottom: 20px;">
|
||||
<el-button type="success" size="mini" @click="selectPosition()">选择位置</el-button>
|
||||
<el-button type="warning" size="mini" @click="cancle()">取消操作</el-button>
|
||||
<el-button type="primary" size="mini" @click="merage()">确认合并</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AppConfigInfo from '../../../../public/config/app.json'
|
||||
import axios from 'axios'
|
||||
let BASE_URL = process.env.VUE_APP_BASE_API
|
||||
import { parse } from '../lib/handleGeojson';
|
||||
export default {
|
||||
name: 'mergebox',
|
||||
props:['globalmap','checkList','checkNumber'],
|
||||
data(){
|
||||
return {
|
||||
active:1,
|
||||
list:[
|
||||
|
||||
],
|
||||
formData:{
|
||||
"address": "",
|
||||
"lng": "",
|
||||
"lat": "",
|
||||
"ids": [],
|
||||
"modifyId": localStorage.getItem("userId")
|
||||
},
|
||||
graphicLayer:null,
|
||||
graphicPoint:null,
|
||||
graphicWinodw:null,
|
||||
pathPointGraphicLayer:null,
|
||||
checkNumberRondom:1,
|
||||
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
checkList:function(e){
|
||||
|
||||
}
|
||||
},
|
||||
created(){
|
||||
// this.getList();
|
||||
window.wuzi = this.wuzi
|
||||
window.shuiyuan = this.shuiyuan
|
||||
},
|
||||
mounted(){
|
||||
|
||||
},
|
||||
methods:{
|
||||
checkItem(index){
|
||||
this.checkNumber.forEach((item,idx)=>{
|
||||
this.checkNumber[idx].selected = false;
|
||||
})
|
||||
|
||||
this.checkNumber[index].selected = true;
|
||||
|
||||
let obj = this.checkNumber[index]
|
||||
this.formData.lng = obj.lng;
|
||||
this.formData.lat = obj.lat;
|
||||
this.formData.address = obj.address
|
||||
|
||||
console.log("formData",this.formData);
|
||||
this.checkNumberRondom = Math.random();
|
||||
},
|
||||
selectPosition(){
|
||||
let _this = this;
|
||||
window.globalmap.once(mars3d.EventType.click, function (event) {
|
||||
window.globalmap.setCursor(false)
|
||||
const cartesian = event.cartesian
|
||||
const point = mars3d.LngLatPoint.fromCartesian(cartesian)
|
||||
point.format()
|
||||
_this.drawPoint(point.lng, point.lat, point.z);
|
||||
_this.formData.lng = point.lng;
|
||||
_this.formData.lat = point.lat;
|
||||
|
||||
let url = "https://restapi.amap.com/v3/geocode/regeo?key="+AppConfigInfo.gaodeApi+"&location=" + point.lng + "," + point.lat + "&extensions=base"
|
||||
axios({
|
||||
method: 'get',
|
||||
url: url,
|
||||
}).then(res => {
|
||||
let name = res.data.regeocode.formatted_address
|
||||
|
||||
_this.formData.address = name;
|
||||
|
||||
}).catch(err =>{
|
||||
console.log('ee',err)
|
||||
})
|
||||
|
||||
})
|
||||
},
|
||||
drawPoint(lng,lat,z){
|
||||
if(this.pathPointGraphicLayer==null){
|
||||
this.pathPointGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
window.globalmap.addLayer(this.pathPointGraphicLayer);
|
||||
}else{
|
||||
this.pathPointGraphicLayer.clear();
|
||||
}
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [lng, lat, z],
|
||||
style: {
|
||||
image: "/img/huozai.png",
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
clampToGround: true
|
||||
},
|
||||
attr: "合并后火点"
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic) // 还可以另
|
||||
},
|
||||
shuiyuan(e){
|
||||
this.$emit("shuiyuan",e);
|
||||
},
|
||||
wuzi(e){
|
||||
this.$emit("wuzi",e);
|
||||
},
|
||||
getInfo(active){
|
||||
this.listQuery.state = active;
|
||||
this.active = active;
|
||||
this.getList();
|
||||
},
|
||||
merage(){
|
||||
this.checkNumber.forEach((item,index)=>{
|
||||
this.formData.ids.push(item.id);
|
||||
})
|
||||
|
||||
if(this.checkList.length<1){
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"请选择至少1条线索",
|
||||
})
|
||||
return;
|
||||
}
|
||||
|
||||
if(!this.formData.lng && !this.formData.lat){
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"请选择合并后火点",
|
||||
})
|
||||
return;
|
||||
}
|
||||
|
||||
axios({
|
||||
method:"post",
|
||||
url:BASE_URL+"/FireManagement/MergeNewFireClueInfo",
|
||||
data:this.formData,
|
||||
headers:{
|
||||
'X-Token':localStorage.getItem("X-Token")
|
||||
}
|
||||
}).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
if(this.pathPointGraphicLayer){
|
||||
this.pathPointGraphicLayer.clear();
|
||||
this.pathPointGraphicLayer = null;
|
||||
}
|
||||
this.$emit("success");
|
||||
}
|
||||
})
|
||||
},
|
||||
cancle(){
|
||||
if(this.pathPointGraphicLayer){
|
||||
this.pathPointGraphicLayer.clear();
|
||||
this.pathPointGraphicLayer = null;
|
||||
}
|
||||
this.$emit("clsoe");
|
||||
},
|
||||
getList(){
|
||||
axios({
|
||||
method:"post",
|
||||
url:BASE_URL+"/FireManagement/LoadFireClueInfoByAreaName",
|
||||
params:this.listQuery,
|
||||
headers:{
|
||||
'X-Token':localStorage.getItem("X-Token")
|
||||
}
|
||||
}).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
this.list = res.data.data;
|
||||
}
|
||||
})
|
||||
},
|
||||
toPosition(item){
|
||||
console.log(item);
|
||||
this.$emit("changeCurrentInfo",item);
|
||||
let _self = this;
|
||||
|
||||
if(!_self.graphicLayer){
|
||||
_self.graphicLayer = new this.mars3d.layer.GraphicLayer({
|
||||
pid:88,
|
||||
})
|
||||
window.globalmap.addLayer(_self.graphicLayer)
|
||||
}
|
||||
if(_self.graphicPoint && _self.graphicWinodw){
|
||||
_self.graphicLayer.clear();
|
||||
_self.graphicPoint = null;
|
||||
_self.graphicWinodw = null;
|
||||
}
|
||||
_self.graphicPoint = new mars3d.graphic.DivLightPoint({
|
||||
position: [parseFloat(item.lng),parseFloat(item.lat)],
|
||||
style: {
|
||||
color: "#f33349",
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
|
||||
},
|
||||
})
|
||||
_self.graphicLayer.addGraphic(_self.graphicPoint)
|
||||
|
||||
_self.graphicWinodw = new mars3d.graphic.DivGraphic({
|
||||
position: [parseFloat(item.lng),parseFloat(item.lat)],
|
||||
style: {
|
||||
html: `<div class="marsTiltPanel marsTiltPanel-theme-red" style="font-size:12px;">
|
||||
<div class="marsTiltPanel-wrap">
|
||||
<div class="area">
|
||||
<div class="arrow-lt"></div>
|
||||
<div class="b-t"></div>
|
||||
<div class="b-r"></div>
|
||||
<div class="b-b"></div>
|
||||
<div class="b-l"></div>
|
||||
<div class="arrow-rb"></div>
|
||||
<div class="label-wrap">
|
||||
<div class="title">${item.address}</div>
|
||||
<div class="label-content">
|
||||
<div class="data-li">
|
||||
<div class="data-label">火情描述：${item.describe}</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-label">上报时间：</div>
|
||||
<div class="data-value"><span id="lablYeWei" class="label-num">${item.reportTime}</span><span class="label-unit"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-value">
|
||||
<span id="lablSBZT1" class="label-tag data-value-status-1" title="人员调度">人员调度</span>
|
||||
<span id="lablSBZT2" onclick="wuzi([${item.lng},${item.lat}]);" class="label-tag data-value-status-0" title="关闭状态" >物资调度</span>
|
||||
<span id="lablCSFM2" onclick="shuiyuan([${item.lng},${item.lat}])" class="label-tag data-value-status-2" title="打开状态">附近水源</span>
|
||||
<span id="lablSBZT1" class="label-tag data-value-status-1" title="路线规划">路线规划</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-t-l"></div>
|
||||
<div class="b-b-r"></div>
|
||||
</div>
|
||||
<div class="arrow" ></div>
|
||||
</div>`,horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
|
||||
clampToGround: true
|
||||
},
|
||||
attr: { remark: "示例10" },
|
||||
// 可以传入自定义测试点样式
|
||||
// testPoint: {
|
||||
// color: '#ff0000',
|
||||
// pixelSize: 8,
|
||||
// },
|
||||
pointerEvents: true // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
|
||||
})
|
||||
_self.graphicLayer.addGraphic(_self.graphicWinodw);
|
||||
|
||||
_self.graphicWinodw.flyTo();
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box{
|
||||
width:100%;
|
||||
height:100%;
|
||||
background-image: url(/img/goods-pingyixian.png);
|
||||
background-size:100% 100%;
|
||||
}
|
||||
|
||||
.box-title{
|
||||
width:100%;
|
||||
height:45px;
|
||||
overflow: hidden;
|
||||
line-height:40px;
|
||||
color:#eee;
|
||||
text-align: center;
|
||||
font-size:18px;
|
||||
}
|
||||
.tip-title{
|
||||
width:280px;
|
||||
margin:0px auto;
|
||||
height:80px;
|
||||
padding-top:20px;
|
||||
font-size: 22px;
|
||||
font-family: OPPOSans-M, OPPOSans;
|
||||
font-weight: normal;
|
||||
color: #179fc8;
|
||||
line-height: 32px;
|
||||
|
||||
}
|
||||
.tab-container{
|
||||
width:210px;
|
||||
height:60px;
|
||||
border-bottom:1px solid #2F5D55;
|
||||
padding-top:10px;
|
||||
margin:0px auto;
|
||||
}
|
||||
.tab-button{
|
||||
width:70px;
|
||||
font-size:12px;
|
||||
height:50px;
|
||||
line-height:50px;
|
||||
color:#0ABFB5;
|
||||
float:left;
|
||||
cursor:pointer;
|
||||
}
|
||||
.check-tag{
|
||||
cursor:pointer;
|
||||
margin:4px 10px;background: #112A26;border: 1px solid #1C4741;float:left;padding:3px 6px 3px 6px;border-radius: 19px 0px 19px 19px;
|
||||
}
|
||||
.box-container{
|
||||
width: calc( 100% - 20px);
|
||||
margin:0px 15px;
|
||||
margin-bottom:10px;
|
||||
height: calc( 100% - 190px);
|
||||
overflow-y:auto;
|
||||
}
|
||||
.news{
|
||||
width: calc( 100% - 10px);
|
||||
line-height:18px;
|
||||
padding:6px 15px 10px 15px;
|
||||
text-align:left;
|
||||
color:#ccc;
|
||||
background:rgba(0,0,0,0.5);
|
||||
margin:6px 0px;
|
||||
border:1px dashed #999;
|
||||
}
|
||||
.news::after{
|
||||
content:"";
|
||||
clear:both;
|
||||
display:block;
|
||||
height:0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.checkbox-container{
|
||||
width:18px;
|
||||
height:18px;
|
||||
position:relative;
|
||||
top:12px;
|
||||
margin-right:10px;
|
||||
float:left;
|
||||
background: rgba(2,0,77,0.4);
|
||||
box-shadow: inset 0px 0px 34px 0px #A15E01;
|
||||
border: 1px solid #F18B00;
|
||||
cursor: pointer;
|
||||
}
|
||||
.news-container{
|
||||
width: calc( 100% - 30px);
|
||||
float:left;
|
||||
}
|
||||
.news .title{
|
||||
line-height:40px;
|
||||
color:#E48F19;
|
||||
margin-bottom:12px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.news .title::after{
|
||||
content:"";
|
||||
width:100%;
|
||||
height:0px;
|
||||
border: 0.5px solid;
|
||||
position:absolute;
|
||||
bottom:0px;
|
||||
left:0px;
|
||||
border-image: linear-gradient(90deg, rgba(241, 139, 0, 1), rgba(86, 254, 254, 0),rgba(86, 254, 254, 0)) 1 1;
|
||||
}
|
||||
|
||||
.news .desc{
|
||||
font-size:12px;
|
||||
color:#fff;
|
||||
margin-bottom:6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,952 @@
|
|||
<template>
|
||||
<div class="box">
|
||||
<!-- <div class="close-button" @click="close">
|
||||
<i class='el-icon el-icon-close'></i>
|
||||
</div> -->
|
||||
<div class="box-container">
|
||||
<div class="flex fc-w fz-16 column" style="margin:10px">
|
||||
<div>当前在线总人数：{{ listDataInfo.onlineCount }}人</div>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<div class="item flex jc-sb" v-for="(item,index) in listDataInfo.onOffLineInfo" :key="index">
|
||||
|
||||
<div>{{item.time}}</div>
|
||||
<div>{{ item.name }}{{ item.typeName }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState,mapGetters } from "vuex";
|
||||
import axios from "axios";
|
||||
import { getMethodCommon } from '@/api/common.js';
|
||||
let BASE_URL = process.env.VUE_APP_BASE_API;
|
||||
let BASE_IMAGE_URL = process.env.VUE_APP_BASE_IMG_URL;
|
||||
import AppConfig from '../../../../public/config/app.json'
|
||||
import { parse } from '../lib/handleGeojson.js';
|
||||
import * as turf from '@turf/turf'
|
||||
import { isJson } from "../../../utils/index";
|
||||
import { handlerData } from "../lib/userSport";
|
||||
import { getRouterFunc, drawRouterFunc, clearRouterFunc } from '../lib/routePath'
|
||||
let ANYRTC_URL = process.env.VUE_APP_ANYRTC_URL
|
||||
export default {
|
||||
name: 'monitorbox',
|
||||
computed: {
|
||||
...mapGetters([
|
||||
|
||||
]),
|
||||
//trtc
|
||||
...mapState({
|
||||
websocket:state=>state.Emergency.listenWebSocket,
|
||||
}),
|
||||
},
|
||||
props:['globalmap',"showOnlineUser"],
|
||||
data(){
|
||||
return{
|
||||
listDataInfo:[],
|
||||
pointData:[],
|
||||
markGraphicLayer: null,
|
||||
markGraphicLayerArr:[],
|
||||
startPoint:null,
|
||||
endPoint:null,
|
||||
pathPointGraphicLayer:null,
|
||||
currentUsers:[],
|
||||
firstLoad:true,
|
||||
icons:[],
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
showOnlineUser:{
|
||||
handler(newVal,oldVal){
|
||||
if(this.markGraphicLayer){
|
||||
this.markGraphicLayer.show = newVal;
|
||||
}
|
||||
},
|
||||
immediate:true
|
||||
}
|
||||
},
|
||||
created(){
|
||||
// 加载队伍图标
|
||||
|
||||
// this.getOnLineInfo()
|
||||
|
||||
//
|
||||
// console.log("IMAGE",this.downloadIcon("http://123.132.248.154:9242/2023/20231216/2023121616413488010132.png"));
|
||||
|
||||
},
|
||||
mounted(){
|
||||
window.videoCall = this.videoCall
|
||||
window.designRoute = this.designRoute;
|
||||
window.deleteRoute = this.deleteRoute;
|
||||
this.getIcons();
|
||||
|
||||
},
|
||||
methods:{
|
||||
getIcons(){
|
||||
getMethodCommon("/FireCodePC/GetUserUnit?pageIndex=1&pageSize=999").then(res=>{
|
||||
if(res.code == 200){
|
||||
res.data.forEach((item,index)=>{
|
||||
this.icons[item.unitName] = item.imaUrl
|
||||
})
|
||||
let _this = this;
|
||||
window.addEventListener("onmessageWS", this.getSocketData);
|
||||
setInterval(function(){
|
||||
_this.pointData = []
|
||||
_this.getPointer("人员信息")
|
||||
},5000)
|
||||
}
|
||||
})
|
||||
},
|
||||
getSocketData(res){
|
||||
let _this = this;
|
||||
if (!isJson(res.detail.data)) return;
|
||||
let obj = JSON.parse(res.detail.data)
|
||||
if(obj.Module){
|
||||
_this.pointData = []
|
||||
if(obj.Module == '人员信息' || obj.Module == '对讲机信息'){
|
||||
// _this.getPointer(obj.Module)
|
||||
// _this.updateOnlineUserPoint(obj.Data)
|
||||
}
|
||||
if(obj.Module == '上线'){
|
||||
_this.addLayerPoint(obj.Data);
|
||||
}
|
||||
if(obj.Module == '下线'){
|
||||
_this.delLayerPoint(obj.Data);
|
||||
}
|
||||
}
|
||||
},
|
||||
close(){
|
||||
this.markGraphicLayerArr.forEach(item =>{
|
||||
this.markGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
this.$emit('close')
|
||||
},
|
||||
videoCall(phone){
|
||||
let userId = localStorage.getItem("userName") || ''
|
||||
if(userId && phone){
|
||||
// let wind = window.open("https://ssl.hopetrytech.com:9233/#/userID="+userId+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
|
||||
let wind = window.open(ANYRTC_URL+"?userID="+userId+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
|
||||
wind.onload = function(){
|
||||
wind.document.title = "视频通话";
|
||||
}
|
||||
}
|
||||
else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"系统错误，调用视频通话接口失败"
|
||||
})
|
||||
}
|
||||
// window.navigator.mediaDevices.enumerateDevices().then(devices => {
|
||||
// let isSuppertVideo = 0;
|
||||
// for(let i=0;i<devices.length;i++){
|
||||
// if(devices[i].kind =="videoinput"){
|
||||
// isSuppertVideo++;
|
||||
// }
|
||||
// }
|
||||
// if(isSuppertVideo>0){
|
||||
// let wind = window.open("https://ssl.hopetrytech.com:9233/#/?userID="+localStorage.getItem("userName")+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
|
||||
// wind.onload = function(){
|
||||
// wind.document.title = "视频通话";
|
||||
// }
|
||||
// }else{
|
||||
// this.$message({
|
||||
// type:"warning",
|
||||
// message:"当前设备暂不支持视频通话！"
|
||||
// })
|
||||
// }
|
||||
// })
|
||||
},
|
||||
getOnLineInfo(){
|
||||
getMethodCommon("/FireManagement/GetOnOffLineInfo").then(res =>{
|
||||
this.listDataInfo = res.data
|
||||
})
|
||||
},
|
||||
getPointer(type){
|
||||
let _this = this;
|
||||
// let xmlhttp = new XMLHttpRequest();
|
||||
// xmlhttp.open("get",process.env.VUE_APP_BASE_API+"/FireManagement/GetPointByAPP");
|
||||
// xmlhttp.send();
|
||||
// xmlhttp.onreadystatechange = function (){
|
||||
// if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
|
||||
// let responseData = JSON.parse(xmlhttp.responseText);
|
||||
//
|
||||
// responseData.data.forEach(item =>{
|
||||
// _this.pointData.push(item)
|
||||
// })
|
||||
// _this.currentUsers = _this.pointData;
|
||||
// _this.updateLayerPoint();
|
||||
|
||||
// }
|
||||
// }
|
||||
getMethodCommon("FireManagement/GetPointByType?type=%E4%BA%BA%E5%91%98%E4%BF%A1%E6%81%AF&pageSize=999&pageIndex=1").then(res =>{
|
||||
res.data.forEach(item =>{
|
||||
this.pointData.push(item)
|
||||
})
|
||||
this.currentUsers = this.pointData;
|
||||
this.updateLayerPoint();
|
||||
})
|
||||
},
|
||||
downloadIcon(imageUrl){
|
||||
let _this = this;
|
||||
let xmlhttp = new XMLHttpRequest();
|
||||
xmlhttp.open("get",imageUrl);
|
||||
xmlhttp.setRequestHeader("Access-Control-Allow-Origin","*");
|
||||
xmlhttp.send();
|
||||
xmlhttp.onreadystatechange = function (){
|
||||
if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
|
||||
// let responseData = JSON.parse(xmlhttp.responseText);
|
||||
return xmlhttp.responseText;
|
||||
}
|
||||
}
|
||||
},
|
||||
updateLayerPoint(){
|
||||
// return;
|
||||
// 如果是初次加载数据
|
||||
|
||||
//初次加载添加图层
|
||||
// if(this.markGraphicLayer == null){
|
||||
// this.markGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
// window.globalmap.addLayer(this.markGraphicLayer);
|
||||
// }
|
||||
|
||||
// window.graphicLayer.clear();
|
||||
|
||||
if(this.firstLoad){
|
||||
|
||||
this.currentUsers.forEach((item,index)=>{
|
||||
// 获取图标
|
||||
let imageUrl = this.icons[item.unitName] ? BASE_IMAGE_URL +"/"+this.icons[item.unitName] : '/img/jiuyuanrenyuan.png'
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
id:item.createId,
|
||||
position:[item.lng, item.lat],
|
||||
style: {
|
||||
image:imageUrl,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
clampToGround:true,
|
||||
scale:0.5,
|
||||
label: {
|
||||
text: item.name,
|
||||
font_size: 12,
|
||||
color: "#ffffff",
|
||||
pixelOffsetY: -48,
|
||||
distanceDisplayCondition: true,
|
||||
distanceDisplayCondition_far: 500000,
|
||||
distanceDisplayCondition_near: 0
|
||||
}
|
||||
},
|
||||
popup: `<div class="marsTiltPanel marsTiltPanel-theme-blue" style="font-size:12px;">
|
||||
<div class="marsTiltPanel-wrap">
|
||||
<div class="area">
|
||||
<div class="arrow-lt"></div>
|
||||
<div class="b-t"></div>
|
||||
<div class="b-r"></div>
|
||||
<div class="b-b"></div>
|
||||
<div class="b-l"></div>
|
||||
<div class="arrow-rb"></div>
|
||||
<div class="label-wrap">
|
||||
<div class="title">人员信息</div>
|
||||
<div class="label-content">
|
||||
<div class="data-li">
|
||||
<div class="data-label">人员名称：${item.name}</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-label">电话号码：${item.phone}</div>
|
||||
<div class="data-value"><span id="lablYeWei" class="label-num"></span><span class="label-unit"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-label">所属单位：${item.unitName}</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-value">
|
||||
<span class="label-tag data-value-status-2" title="视频通话" onclick="videoCall('${item.phone}')">视频通话</span></div>
|
||||
<span id="lablSBZT1" onclick="designRoute('${item.createId}');" class="label-tag data-value-status-1" title="路线高亮">路线高亮</span>
|
||||
<span id="lablSBZT1" onclick="deleteRoute('${item.createId}');" class="label-tag data-value-status-2" title="路线隐藏">路线隐藏</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-t-l"></div>
|
||||
<div class="b-b-r"></div>
|
||||
</div>
|
||||
<div class="arrow" ></div>
|
||||
</div>`,
|
||||
popupOptions: {
|
||||
offsetY: -30,
|
||||
template: "{content}",
|
||||
horizontalOrigin: "Cesium.HorizontalOrigin.LEFT",
|
||||
verticalOrigin: "Cesium.VerticalOrigin.CENTER",
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 0.8, 8000, 0.3),
|
||||
},
|
||||
pointerEvents: true
|
||||
})
|
||||
window.graphicLayer.addGraphic(graphic);
|
||||
// graphic.addDynamicPosition(Cesium.Cartesian3.fromDegrees(parseFloat(item.lng),parseFloat(item.lat)),0);
|
||||
})
|
||||
}else{
|
||||
this.currentUsers.forEach((item,index)=>{
|
||||
let graphic = window.graphicLayer.getGraphicById(item.createId);
|
||||
if(graphic){
|
||||
graphic.setCallbackPosition([parseFloat(item.lng),parseFloat(item.lat)])
|
||||
// if(graphic.isPrivate) {
|
||||
// return
|
||||
// }
|
||||
// graphic.addDynamicPosition(Cesium.Cartesian3.fromDegrees(parseFloat(item.lng),parseFloat(item.lat)),30);
|
||||
}
|
||||
})
|
||||
}
|
||||
this.firstLoad = false;
|
||||
},
|
||||
// WebSocket直连，实时更新位置
|
||||
updateOnlineUserPoint(user){
|
||||
|
||||
if(this.markGraphicLayer == null){ //初次加载添加图层
|
||||
this.markGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
window.globalmap.addLayer(this.markGraphicLayer);
|
||||
}
|
||||
let graphic = this.markGraphicLayer.getGraphicById(user.CreateId); // 先查找是否已经在地图上
|
||||
|
||||
if(graphic){ // 如果已经再地图上，则更新位置
|
||||
graphic.addDynamicPosition(Cesium.Cartesian3.fromDegrees(parseFloat(user.Lng),parseFloat(user.Lat)),5);
|
||||
}else{ // 如果地图上没有则添加图标
|
||||
let graphicAdd = new mars3d.graphic.BillboardEntity({
|
||||
id:user.CreateId,
|
||||
position:[user.Lng, user.Lat],
|
||||
style: {
|
||||
image: "/img/jiuyuanrenyuan.png",
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
clampToGround:true,
|
||||
scale:0.3,
|
||||
label: {
|
||||
text: "",
|
||||
font_size: 14,
|
||||
color: "#ffffff",
|
||||
pixelOffsetY: 10,
|
||||
distanceDisplayCondition: true,
|
||||
distanceDisplayCondition_far: 500000,
|
||||
distanceDisplayCondition_near: 0
|
||||
}
|
||||
},
|
||||
popup: `<div class="marsTiltPanel marsTiltPanel-theme-blue" style="font-size:12px;">
|
||||
<div class="marsTiltPanel-wrap">
|
||||
<div class="area">
|
||||
<div class="arrow-lt"></div>
|
||||
<div class="b-t"></div>
|
||||
<div class="b-r"></div>
|
||||
<div class="b-b"></div>
|
||||
<div class="b-l"></div>
|
||||
<div class="arrow-rb"></div>
|
||||
<div class="label-wrap">
|
||||
<div class="title">人员信息</div>
|
||||
<div class="label-content">
|
||||
<div class="data-li">
|
||||
<div class="data-label">人员名称：</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-label">电话号码：</div>
|
||||
<div class="data-value"><span id="lablYeWei" class="label-num"></span><span class="label-unit"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-value">
|
||||
<span class="label-tag data-value-status-2" title="视频通话" onclick="videoCall('123')">视频通话</span></div>
|
||||
<span id="lablSBZT1" onclick="designRoute('${user.CreateId}');" class="label-tag data-value-status-1" title="路线高亮">路线高亮</span>
|
||||
<span id="lablSBZT1" onclick="deleteRoute('${user.CreateId}');" class="label-tag data-value-status-2" title="路线隐藏">路线隐藏</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-t-l"></div>
|
||||
<div class="b-b-r"></div>
|
||||
</div>
|
||||
<div class="arrow" ></div>
|
||||
</div>`,
|
||||
popupOptions: {
|
||||
offsetY: -30,
|
||||
template: "{content}",
|
||||
horizontalOrigin: "Cesium.HorizontalOrigin.LEFT",
|
||||
verticalOrigin: "Cesium.VerticalOrigin.CENTER",
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 0.8, 8000, 0.3),
|
||||
},
|
||||
pointerEvents: true
|
||||
})
|
||||
this.markGraphicLayer.addGraphic(graphicAdd);
|
||||
graphic.setCallbackPosition([item.lng,item.lat]);
|
||||
// graphicAdd.addDynamicPosition(Cesium.Cartesian3.fromDegrees(parseFloat(user.Lng),parseFloat(user.Lat)),0);
|
||||
}
|
||||
|
||||
},
|
||||
addLayerPoint(item){
|
||||
let graphicExists = window.graphicLayer.getGraphicById(item.CreateId); // 先查找是否已经在地图上
|
||||
if(graphicExists){
|
||||
return;
|
||||
}
|
||||
let imageUrl = this.icons[item.UnitName] ? BASE_IMAGE_URL +"/"+this.icons[item.UnitName] : '/img/jiuyuanrenyuan.png'
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
id:item.CreateId,
|
||||
position:[item.Lng, item.Lat],
|
||||
style: {
|
||||
image:imageUrl,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
clampToGround:true,
|
||||
scale:0.5,
|
||||
label: {
|
||||
text: item.Name,
|
||||
font_size: 12,
|
||||
color: "#ffffff",
|
||||
pixelOffsetY: -48,
|
||||
distanceDisplayCondition: true,
|
||||
distanceDisplayCondition_far: 500000,
|
||||
distanceDisplayCondition_near: 0
|
||||
}
|
||||
},
|
||||
popup: `<div class="marsTiltPanel marsTiltPanel-theme-blue" style="font-size:12px;">
|
||||
<div class="marsTiltPanel-wrap">
|
||||
<div class="area">
|
||||
<div class="arrow-lt"></div>
|
||||
<div class="b-t"></div>
|
||||
<div class="b-r"></div>
|
||||
<div class="b-b"></div>
|
||||
<div class="b-l"></div>
|
||||
<div class="arrow-rb"></div>
|
||||
<div class="label-wrap">
|
||||
<div class="title">人员信息</div>
|
||||
<div class="label-content">
|
||||
<div class="data-li">
|
||||
<div class="data-label">人员名称：${item.Name}</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-label">电话号码：${item.Phone}</div>
|
||||
<div class="data-value"><span id="lablYeWei" class="label-num"></span><span class="label-unit"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-label">所属单位：${item.UnitName}</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-value">
|
||||
<span class="label-tag data-value-status-2" title="视频通话" onclick="videoCall('${item.Phone}')">视频通话</span></div>
|
||||
<span id="lablSBZT1" onclick="designRoute('${item.CreateId}');" class="label-tag data-value-status-1" title="路线高亮">路线高亮</span>
|
||||
<span id="lablSBZT1" onclick="deleteRoute('${item.CreateId}');" class="label-tag data-value-status-2" title="路线隐藏">路线隐藏</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-t-l"></div>
|
||||
<div class="b-b-r"></div>
|
||||
</div>
|
||||
<div class="arrow" ></div>
|
||||
</div>`,
|
||||
popupOptions: {
|
||||
offsetY: -30,
|
||||
template: "{content}",
|
||||
horizontalOrigin: "Cesium.HorizontalOrigin.LEFT",
|
||||
verticalOrigin: "Cesium.VerticalOrigin.CENTER",
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 0.8, 8000, 0.3),
|
||||
},
|
||||
pointerEvents: true
|
||||
})
|
||||
// let graphic = new mars3d.graphic.BillboardPrimitive({
|
||||
// id:item.CreateId,
|
||||
// position:[item.Lng, item.Lat],
|
||||
// style: {
|
||||
// image: "/img/jiuyuanrenyuan.png",
|
||||
// horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
// verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
// clampToGround:true,
|
||||
// scale:0.3,
|
||||
// label: {
|
||||
// text: item.Name,
|
||||
// font_size: 14,
|
||||
// color: "#ffffff",
|
||||
// pixelOffsetY: 10,
|
||||
// distanceDisplayCondition: true,
|
||||
// distanceDisplayCondition_far: 500000,
|
||||
// distanceDisplayCondition_near: 0
|
||||
// }
|
||||
// },
|
||||
// popup: `<div class="marsTiltPanel marsTiltPanel-theme-blue" style="font-size:12px;">
|
||||
// <div class="marsTiltPanel-wrap">
|
||||
// <div class="area">
|
||||
// <div class="arrow-lt"></div>
|
||||
// <div class="b-t"></div>
|
||||
// <div class="b-r"></div>
|
||||
// <div class="b-b"></div>
|
||||
// <div class="b-l"></div>
|
||||
// <div class="arrow-rb"></div>
|
||||
// <div class="label-wrap">
|
||||
// <div class="title">人员信息</div>
|
||||
// <div class="label-content">
|
||||
// <div class="data-li">
|
||||
// <div class="data-label">人员名称：${item.Name}</div>
|
||||
// </div>
|
||||
// <div class="data-li">
|
||||
// <div class="data-label">电话号码：${item.Phone}</div>
|
||||
// <div class="data-value"><span id="lablYeWei" class="label-num"></span><span class="label-unit"></span>
|
||||
// </div>
|
||||
// </div>
|
||||
// <div class="data-li">
|
||||
// <div class="data-value">
|
||||
// <span class="label-tag data-value-status-2" title="视频通话" onclick="videoCall('${item.Phone}')">视频通话</span></div>
|
||||
// <span id="lablSBZT1" onclick="designRoute('${item.CreateId}');" class="label-tag data-value-status-1" title="人员动态">路线高亮</span>
|
||||
// <span id="lablSBZT1" onclick="deleteRoute('${item.CreateId}');" class="label-tag data-value-status-2" title="清除路线">路线隐藏</span>
|
||||
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// <div class="b-t-l"></div>
|
||||
// <div class="b-b-r"></div>
|
||||
// </div>
|
||||
// <div class="arrow" ></div>
|
||||
// </div>`,
|
||||
// popupOptions: {
|
||||
// offsetY: -30,
|
||||
// template: "{content}",
|
||||
// horizontalOrigin: "Cesium.HorizontalOrigin.LEFT",
|
||||
// verticalOrigin: "Cesium.VerticalOrigin.CENTER",
|
||||
// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
// scaleByDistance: new Cesium.NearFarScalar(1000, 0.8, 8000, 0.3),
|
||||
// },
|
||||
// pointerEvents: true
|
||||
// })
|
||||
window.graphicLayer.addGraphic(graphic);
|
||||
// graphic.addDynamicPosition(Cesium.Cartesian3.fromDegrees(parseFloat(item.Lng),parseFloat(item.Lat)),0);
|
||||
},
|
||||
delLayerPoint(arr){
|
||||
arr.forEach((item,index)=>{
|
||||
let graphic = window.graphicLayer.getGraphicById(item.id);
|
||||
window.graphicLayer.removeGraphic(graphic);
|
||||
})
|
||||
},
|
||||
deleteRoute(){
|
||||
clearRouterFunc();
|
||||
// if(this.pathPointGraphicLayer){
|
||||
// this.pathPointGraphicLayer.clear();
|
||||
// }
|
||||
},
|
||||
designRoute(userId){
|
||||
axios({
|
||||
method:"get",
|
||||
url:BASE_URL+"/Patrol/LoadUserNavigationByUserId",
|
||||
params:{
|
||||
id:userId
|
||||
},
|
||||
headers:{
|
||||
"X-Token":localStorage.getItem("X-Token")
|
||||
}
|
||||
}).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
if(res.data.data){
|
||||
this.startPoint = res.data.data.startLng+","+res.data.data.startLat;
|
||||
this.endPoint = res.data.data.endLng+","+res.data.data.endLat;
|
||||
this.getRoutePath();
|
||||
}else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"当前人员暂无规划地",
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
getRoutePath() {
|
||||
// 获取路线数据
|
||||
let startCoor = this.startPoint.split(",")
|
||||
let endCoor = this.endPoint.split(",");
|
||||
let params = {
|
||||
startlng: parseFloat(startCoor[0]),
|
||||
startlat: parseFloat(startCoor[1]),
|
||||
endlng: parseFloat(endCoor[0]),
|
||||
endlat: parseFloat(endCoor[1]),
|
||||
areaname: localStorage.getItem("areaName"),
|
||||
};
|
||||
getRouterFunc(params,"gaode").then(res => {
|
||||
drawRouterFunc(res)
|
||||
}).catch(err => {
|
||||
clearRouterFunc()
|
||||
})
|
||||
},
|
||||
drawPoint(type, lng, lat, z) { // 绘制起点、终点
|
||||
let image = null;
|
||||
if (type == "start") {
|
||||
image = "/img/route-start.png"
|
||||
} else {
|
||||
image = "/img/route-end.png"
|
||||
}
|
||||
var graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [lng, lat, z],
|
||||
style: {
|
||||
image: image,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
clampToGround: true
|
||||
},
|
||||
attr: { remark: type == 'start'?'起点':'终点' }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic) // 还可以另
|
||||
},
|
||||
// getRoutePath(){ // 获取路线数据
|
||||
// if(this.startPoint&&this.endPoint){
|
||||
// let startCoor = this.startPoint.split(",");
|
||||
// let endCoor = this.endPoint.split(",");
|
||||
// axios({
|
||||
// method: 'get',
|
||||
// url: AppConfig[localStorage.getItem('areaName')].baseUrl+'/api/FirePrevention/LoadRoad',
|
||||
// params: {
|
||||
// startlng: parseFloat(startCoor[0]),
|
||||
// startlat: parseFloat(startCoor[1]),
|
||||
// endlng: parseFloat(endCoor[0]),
|
||||
// endlat: parseFloat(endCoor[1]),
|
||||
// }
|
||||
// }).then(data => {
|
||||
// if (data.data.data.length > 0) {
|
||||
|
||||
// let LineString = data.data.data[0].route;
|
||||
|
||||
// if(LineString == null || LineString == "null"){
|
||||
|
||||
// }else{
|
||||
// let _this = this;
|
||||
// setTimeout(function () {
|
||||
// _this.drawRoutePath(parse(LineString));
|
||||
// // designPath(parse(LineString));
|
||||
// }, 1000)
|
||||
// }
|
||||
|
||||
// }else{
|
||||
|
||||
// }
|
||||
// })
|
||||
// }else{
|
||||
|
||||
// }
|
||||
// },
|
||||
drawRoutePath(geojson) { // 绘制路线
|
||||
|
||||
if(this.pathPointGraphicLayer == null){
|
||||
this.pathPointGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
window.globalmap.addLayer(this.pathPointGraphicLayer);
|
||||
}else{
|
||||
this.pathPointGraphicLayer.clear();
|
||||
}
|
||||
|
||||
|
||||
|
||||
if(geojson.type=="LineString"){
|
||||
geojson.coordinates = [geojson.coordinates]
|
||||
}
|
||||
|
||||
// 虚线部分
|
||||
var startCoor = this.startPoint.split(",");
|
||||
var endCoor =this.endPoint.split(",");
|
||||
|
||||
if(this.startPoint&&this.endPoint){
|
||||
this.drawPoint("start",parseFloat(startCoor[0]),parseFloat(startCoor[1]),0)
|
||||
this.drawPoint("end",parseFloat(endCoor[0]),parseFloat(endCoor[1]),0)
|
||||
}else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"当前人员暂无规划地",
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 起始点坐标
|
||||
var startCoorArr = [parseFloat(startCoor[0]), parseFloat(startCoor[1])]
|
||||
// 终点坐标
|
||||
var endCoorArr = [parseFloat(endCoor[0]), parseFloat(endCoor[1])]
|
||||
|
||||
var startTurfPoint = turf.point(startCoorArr);
|
||||
var endTurfPoint = turf.point(endCoorArr);
|
||||
|
||||
// 起始路线部分
|
||||
var startPath = [];
|
||||
geojson.coordinates[0].forEach((item, index) => {
|
||||
startPath.push(turf.point([item[0], item[1]]));
|
||||
})
|
||||
|
||||
var startTurfPath = turf.featureCollection(startPath);
|
||||
var startNearestPoint = turf.nearestPoint(startTurfPoint, startTurfPath);
|
||||
|
||||
var startNearestPointLngLat = null;
|
||||
if (startNearestPoint) {
|
||||
startNearestPointLngLat = startNearestPoint.geometry.coordinates;
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: [
|
||||
startCoorArr,
|
||||
startNearestPointLngLat,
|
||||
],
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.PolylineDash,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.YELLOW,
|
||||
dashLength: 8.0
|
||||
}
|
||||
},
|
||||
attr: { remark: "虚线" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
}
|
||||
|
||||
// 终点路线部分
|
||||
var endPath = [];
|
||||
geojson.coordinates[geojson.coordinates.length - 1].forEach((item, index) => {
|
||||
endPath.push(turf.point([item[0], item[1]]));
|
||||
})
|
||||
var endTurfPath = turf.featureCollection(endPath);
|
||||
var endNearestPoint = turf.nearestPoint(endTurfPoint, endTurfPath);
|
||||
|
||||
var endNearestPointLngLat = null;
|
||||
if (endNearestPoint) {
|
||||
endNearestPointLngLat = endNearestPoint.geometry.coordinates;
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: [
|
||||
endCoorArr,
|
||||
endNearestPointLngLat,
|
||||
],
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.PolylineDash,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.YELLOW,
|
||||
dashLength: 8.0
|
||||
}
|
||||
},
|
||||
attr: { remark: "虚线" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
}
|
||||
|
||||
// 漫游数据
|
||||
var tripArr = [];
|
||||
// 实线路线部分
|
||||
geojson.coordinates.forEach((item, index) => {
|
||||
tripArr = tripArr.concat(item);
|
||||
// var graphic = new mars3d.graphic.PolylineEntity({
|
||||
// positions: item,
|
||||
// style: {
|
||||
// width: 5,
|
||||
// clampToGround: true,
|
||||
// // materialType: mars3d.MaterialType.PolylineDash,
|
||||
// materialOptions: {
|
||||
// color: Cesium.Color.CYAN,
|
||||
// dashLength: 8.0
|
||||
// }
|
||||
// },
|
||||
// attr: { remark: "最优路线" }
|
||||
// })
|
||||
})
|
||||
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: tripArr,
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.LineFlow,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.CYAN,
|
||||
image: "/img/line-colour.png",
|
||||
speed: 10
|
||||
}
|
||||
},
|
||||
attr: { remark: "示例13" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
|
||||
this.pathPointGraphicLayer.flyTo();
|
||||
|
||||
this.tripFlyArray = [];
|
||||
tripArr.forEach((item, index) => {
|
||||
if (index % 20 == 0) {
|
||||
this.tripFlyArray.push(item);
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
initWebSocket() {
|
||||
let _this = this;
|
||||
if ("WebSocket" in window) {
|
||||
// 打开一个 web socket
|
||||
var ws = new WebSocket("ws://221.2.83.254:7002/ws");
|
||||
var heartCheck;
|
||||
ws.onopen = function () {
|
||||
//Web Socket 已连接上，使用 send() 方法发送数据
|
||||
console.log('WEBSOCKET-ONLINE')
|
||||
heartCheck = setInterval(function() {
|
||||
ws.send('HeartBeat');
|
||||
}, 5000);
|
||||
};
|
||||
ws.onmessage = function (evt) {
|
||||
clearInterval(heartCheck);
|
||||
heartCheck = setInterval(function() {
|
||||
ws.send('HeartBeat');
|
||||
}, 5000);
|
||||
let obj = JSON.parse(evt.data)
|
||||
if(obj.Module){
|
||||
_this.pointData = []
|
||||
if(obj.Module == '人员信息' || obj.Module == '对讲机信息'){
|
||||
_this.getPointer(obj.Module)
|
||||
}
|
||||
if(obj.Module == '上线' || obj.Module == '下线'){
|
||||
_this.getOnLineInfo()
|
||||
}
|
||||
}
|
||||
};
|
||||
ws.onclose = function () {
|
||||
clearInterval(heartCheck);
|
||||
console.log('WEBSOCKET-CLOSED')
|
||||
_this.initWebSocket()
|
||||
};
|
||||
ws.onerror= function () {
|
||||
clearInterval(heartCheck);
|
||||
console.log('WEBSOCKET-ERROR')
|
||||
_this.initWebSocket()
|
||||
};
|
||||
} else {
|
||||
// 浏览器不支持 WebSocket
|
||||
alert("您的浏览器不支持 WebSocket!");
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* .box{
|
||||
width: 100%;
|
||||
height: calc( 100% - 5px);;
|
||||
overflow: hidden;
|
||||
text-align:left;
|
||||
z-index: 99;
|
||||
} */
|
||||
/* 隐藏该图表 */
|
||||
.box{
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.box-name{
|
||||
height: 47px;
|
||||
line-height: 47px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
padding: 0 40px;
|
||||
}
|
||||
.box-title{
|
||||
width:100%;
|
||||
height:45px;
|
||||
overflow: hidden;
|
||||
line-height:40px;
|
||||
color:#eee;
|
||||
text-align: center;
|
||||
font-size:14px;
|
||||
}
|
||||
.box-container{
|
||||
width: calc( 100% - 0px);
|
||||
padding:10px 12px;
|
||||
height: calc( 100% - 50px);
|
||||
}
|
||||
.table-header{
|
||||
width: calc( 100% - 10px);
|
||||
height:25px;
|
||||
color:#fff;
|
||||
text-align: center;
|
||||
}
|
||||
.table-header div{
|
||||
float:left;
|
||||
width:25%;
|
||||
border-bottom:1px dashed #00FFF0;
|
||||
padding-bottom:8px;
|
||||
}
|
||||
.table-body{
|
||||
width:100%;
|
||||
height: calc( 100% - 0px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.table-body .item{
|
||||
width:100%;
|
||||
height:40px;
|
||||
background: #00ffee2f;
|
||||
font-size:14px;
|
||||
text-align: center;
|
||||
line-height:40px;
|
||||
}
|
||||
|
||||
.table-body .item:nth-child(2n){
|
||||
background:#0099ff50;
|
||||
}
|
||||
.close-button{
|
||||
position:absolute;
|
||||
right:20px;
|
||||
top:14px;
|
||||
cursor:pointer;
|
||||
color:#fff;
|
||||
font-weight: bold;
|
||||
width:20px;
|
||||
height:20px;
|
||||
background:#0a58bfcc;
|
||||
line-height:20px;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.table-body .item div{
|
||||
float:left;
|
||||
width:50%;
|
||||
color:#eee;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,951 @@
|
|||
<template>
|
||||
<div class="box">
|
||||
<!-- <div class="close-button" @click="close">
|
||||
<i class='el-icon el-icon-close'></i>
|
||||
</div> -->
|
||||
<div class="box-container">
|
||||
<div class="flex fc-w fz-16 column" style="margin:10px">
|
||||
<div>当前在线总人数：{{ listDataInfo.onlineCount }}人</div>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<div class="item flex jc-sb" v-for="(item,index) in listDataInfo.onOffLineInfo" :key="index">
|
||||
|
||||
<div>{{item.time}}</div>
|
||||
<div>{{ item.name }}{{ item.typeName }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState,mapGetters } from "vuex";
|
||||
import axios from "axios";
|
||||
import { getMethodCommon } from '@/api/common.js';
|
||||
let BASE_URL = process.env.VUE_APP_BASE_API;
|
||||
let BASE_IMAGE_URL = process.env.VUE_APP_BASE_IMG_URL;
|
||||
import AppConfig from '../../../../public/config/app.json'
|
||||
import { parse } from '../lib/handleGeojson.js';
|
||||
import * as turf from '@turf/turf'
|
||||
import { isJson } from "../../../utils/index";
|
||||
import { handlerData } from "../lib/userSport";
|
||||
import { getRouterFunc, drawRouterFunc, clearRouterFunc } from '../lib/routePath'
|
||||
let ANYRTC_URL = process.env.VUE_APP_ANYRTC_URL
|
||||
export default {
|
||||
name: 'monitorbox',
|
||||
computed: {
|
||||
...mapGetters([
|
||||
|
||||
]),
|
||||
//trtc
|
||||
...mapState({
|
||||
websocket:state=>state.Emergency.listenWebSocket,
|
||||
}),
|
||||
},
|
||||
props:['globalmap',"showOnlineUser"],
|
||||
data(){
|
||||
return{
|
||||
listDataInfo:[],
|
||||
pointData:[],
|
||||
markGraphicLayer: null,
|
||||
markGraphicLayerArr:[],
|
||||
startPoint:null,
|
||||
endPoint:null,
|
||||
pathPointGraphicLayer:null,
|
||||
currentUsers:[],
|
||||
firstLoad:true,
|
||||
icons:[],
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
showOnlineUser:{
|
||||
handler(newVal,oldVal){
|
||||
if(this.markGraphicLayer){
|
||||
this.markGraphicLayer.show = newVal;
|
||||
}
|
||||
},
|
||||
immediate:true
|
||||
}
|
||||
},
|
||||
created(){
|
||||
// 加载队伍图标
|
||||
|
||||
// this.getOnLineInfo()
|
||||
|
||||
//
|
||||
// console.log("IMAGE",this.downloadIcon("http://123.132.248.154:9242/2023/20231216/2023121616413488010132.png"));
|
||||
|
||||
},
|
||||
mounted(){
|
||||
window.videoCall = this.videoCall
|
||||
window.designRoute = this.designRoute;
|
||||
window.deleteRoute = this.deleteRoute;
|
||||
this.getIcons();
|
||||
|
||||
},
|
||||
methods:{
|
||||
getIcons(){
|
||||
getMethodCommon("/FireCodePC/GetUserUnit?pageIndex=1&pageSize=999").then(res=>{
|
||||
if(res.code == 200){
|
||||
res.data.forEach((item,index)=>{
|
||||
this.icons[item.unitName] = item.imaUrl
|
||||
})
|
||||
let _this = this;
|
||||
window.addEventListener("onmessageWS", this.getSocketData);
|
||||
setInterval(function(){
|
||||
_this.pointData = []
|
||||
_this.getPointer("人员信息")
|
||||
},5000)
|
||||
}
|
||||
})
|
||||
},
|
||||
getSocketData(res){
|
||||
let _this = this;
|
||||
if (!isJson(res.detail.data)) return;
|
||||
let obj = JSON.parse(res.detail.data)
|
||||
if(obj.Module){
|
||||
_this.pointData = []
|
||||
if(obj.Module == '人员信息' || obj.Module == '对讲机信息'){
|
||||
// _this.getPointer(obj.Module)
|
||||
// _this.updateOnlineUserPoint(obj.Data)
|
||||
}
|
||||
if(obj.Module == '上线'){
|
||||
_this.addLayerPoint(obj.Data);
|
||||
}
|
||||
if(obj.Module == '下线'){
|
||||
_this.delLayerPoint(obj.Data);
|
||||
}
|
||||
}
|
||||
},
|
||||
close(){
|
||||
this.markGraphicLayerArr.forEach(item =>{
|
||||
this.markGraphicLayer.removeGraphic(item)
|
||||
})
|
||||
this.$emit('close')
|
||||
},
|
||||
videoCall(phone){
|
||||
let userId = localStorage.getItem("userName") || ''
|
||||
if(userId && phone){
|
||||
// let wind = window.open("https://ssl.hopetrytech.com:9233/#/userID="+userId+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
|
||||
let wind = window.open(ANYRTC_URL+"?userID="+userId+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
|
||||
wind.onload = function(){
|
||||
wind.document.title = "视频通话";
|
||||
}
|
||||
}
|
||||
else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"系统错误，调用视频通话接口失败"
|
||||
})
|
||||
}
|
||||
// window.navigator.mediaDevices.enumerateDevices().then(devices => {
|
||||
// let isSuppertVideo = 0;
|
||||
// for(let i=0;i<devices.length;i++){
|
||||
// if(devices[i].kind =="videoinput"){
|
||||
// isSuppertVideo++;
|
||||
// }
|
||||
// }
|
||||
// if(isSuppertVideo>0){
|
||||
// let wind = window.open("https://ssl.hopetrytech.com:9233/#/?userID="+localStorage.getItem("userName")+"&callUserID="+phone, "视频通话", "location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=460");
|
||||
// wind.onload = function(){
|
||||
// wind.document.title = "视频通话";
|
||||
// }
|
||||
// }else{
|
||||
// this.$message({
|
||||
// type:"warning",
|
||||
// message:"当前设备暂不支持视频通话！"
|
||||
// })
|
||||
// }
|
||||
// })
|
||||
},
|
||||
getOnLineInfo(){
|
||||
getMethodCommon("/FireManagement/GetOnOffLineInfo").then(res =>{
|
||||
this.listDataInfo = res.data
|
||||
})
|
||||
},
|
||||
getPointer(type){
|
||||
let _this = this;
|
||||
// let xmlhttp = new XMLHttpRequest();
|
||||
// xmlhttp.open("get",process.env.VUE_APP_BASE_API+"/FireManagement/GetPointByAPP");
|
||||
// xmlhttp.send();
|
||||
// xmlhttp.onreadystatechange = function (){
|
||||
// if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
|
||||
// let responseData = JSON.parse(xmlhttp.responseText);
|
||||
//
|
||||
// responseData.data.forEach(item =>{
|
||||
// _this.pointData.push(item)
|
||||
// })
|
||||
// _this.currentUsers = _this.pointData;
|
||||
// _this.updateLayerPoint();
|
||||
|
||||
// }
|
||||
// }
|
||||
getMethodCommon("FireManagement/GetPointByType?type=%E4%BA%BA%E5%91%98%E4%BF%A1%E6%81%AF&pageSize=999&pageIndex=1").then(res =>{
|
||||
res.data.forEach(item =>{
|
||||
this.pointData.push(item)
|
||||
})
|
||||
this.currentUsers = this.pointData;
|
||||
this.updateLayerPoint();
|
||||
})
|
||||
},
|
||||
downloadIcon(imageUrl){
|
||||
let _this = this;
|
||||
let xmlhttp = new XMLHttpRequest();
|
||||
xmlhttp.open("get",imageUrl);
|
||||
xmlhttp.setRequestHeader("Access-Control-Allow-Origin","*");
|
||||
xmlhttp.send();
|
||||
xmlhttp.onreadystatechange = function (){
|
||||
if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
|
||||
// let responseData = JSON.parse(xmlhttp.responseText);
|
||||
return xmlhttp.responseText;
|
||||
}
|
||||
}
|
||||
},
|
||||
updateLayerPoint(){
|
||||
// return;
|
||||
// 如果是初次加载数据
|
||||
|
||||
//初次加载添加图层
|
||||
// if(this.markGraphicLayer == null){
|
||||
// this.markGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
// window.globalmap.addLayer(this.markGraphicLayer);
|
||||
// }
|
||||
|
||||
// window.graphicLayer.clear();
|
||||
|
||||
if(this.firstLoad){
|
||||
|
||||
this.currentUsers.forEach((item,index)=>{
|
||||
// 获取图标
|
||||
let imageUrl = this.icons[item.unitName] ? BASE_IMAGE_URL +"/"+this.icons[item.unitName] : '/img/jiuyuanrenyuan.png'
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
id:item.createId,
|
||||
position:[item.lng, item.lat],
|
||||
style: {
|
||||
image:imageUrl,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
clampToGround:true,
|
||||
scale:0.5,
|
||||
label: {
|
||||
text: item.name,
|
||||
font_size: 12,
|
||||
color: "#ffffff",
|
||||
pixelOffsetY: -48,
|
||||
distanceDisplayCondition: true,
|
||||
distanceDisplayCondition_far: 500000,
|
||||
distanceDisplayCondition_near: 0
|
||||
}
|
||||
},
|
||||
popup: `<div class="marsTiltPanel marsTiltPanel-theme-blue" style="font-size:12px;">
|
||||
<div class="marsTiltPanel-wrap">
|
||||
<div class="area">
|
||||
<div class="arrow-lt"></div>
|
||||
<div class="b-t"></div>
|
||||
<div class="b-r"></div>
|
||||
<div class="b-b"></div>
|
||||
<div class="b-l"></div>
|
||||
<div class="arrow-rb"></div>
|
||||
<div class="label-wrap">
|
||||
<div class="title">人员信息</div>
|
||||
<div class="label-content">
|
||||
<div class="data-li">
|
||||
<div class="data-label">人员名称：${item.name}</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-label">电话号码：${item.phone}</div>
|
||||
<div class="data-value"><span id="lablYeWei" class="label-num"></span><span class="label-unit"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-label">所属单位：${item.unitName}</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-value">
|
||||
<span class="label-tag data-value-status-2" title="视频通话" onclick="videoCall('${item.phone}')">视频通话</span></div>
|
||||
<span id="lablSBZT1" onclick="designRoute('${item.createId}');" class="label-tag data-value-status-1" title="路线高亮">路线高亮</span>
|
||||
<span id="lablSBZT1" onclick="deleteRoute('${item.createId}');" class="label-tag data-value-status-2" title="路线隐藏">路线隐藏</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-t-l"></div>
|
||||
<div class="b-b-r"></div>
|
||||
</div>
|
||||
<div class="arrow" ></div>
|
||||
</div>`,
|
||||
popupOptions: {
|
||||
offsetY: -30,
|
||||
template: "{content}",
|
||||
horizontalOrigin: "Cesium.HorizontalOrigin.LEFT",
|
||||
verticalOrigin: "Cesium.VerticalOrigin.CENTER",
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 0.8, 8000, 0.3),
|
||||
},
|
||||
pointerEvents: true
|
||||
})
|
||||
window.graphicLayer.addGraphic(graphic);
|
||||
// graphic.addDynamicPosition(Cesium.Cartesian3.fromDegrees(parseFloat(item.lng),parseFloat(item.lat)),0);
|
||||
})
|
||||
}else{
|
||||
this.currentUsers.forEach((item,index)=>{
|
||||
let graphic = window.graphicLayer.getGraphicById(item.createId);
|
||||
if(graphic){
|
||||
graphic.setCallbackPosition([parseFloat(item.lng),parseFloat(item.lat)])
|
||||
// if(graphic.isPrivate) {
|
||||
// return
|
||||
// }
|
||||
// graphic.addDynamicPosition(Cesium.Cartesian3.fromDegrees(parseFloat(item.lng),parseFloat(item.lat)),30);
|
||||
}
|
||||
})
|
||||
}
|
||||
this.firstLoad = false;
|
||||
},
|
||||
// WebSocket直连，实时更新位置
|
||||
updateOnlineUserPoint(user){
|
||||
|
||||
if(this.markGraphicLayer == null){ //初次加载添加图层
|
||||
this.markGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
window.globalmap.addLayer(this.markGraphicLayer);
|
||||
}
|
||||
let graphic = this.markGraphicLayer.getGraphicById(user.CreateId); // 先查找是否已经在地图上
|
||||
|
||||
if(graphic){ // 如果已经再地图上，则更新位置
|
||||
graphic.addDynamicPosition(Cesium.Cartesian3.fromDegrees(parseFloat(user.Lng),parseFloat(user.Lat)),5);
|
||||
}else{ // 如果地图上没有则添加图标
|
||||
let graphicAdd = new mars3d.graphic.BillboardEntity({
|
||||
id:user.CreateId,
|
||||
position:[user.Lng, user.Lat],
|
||||
style: {
|
||||
image: "/img/jiuyuanrenyuan.png",
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
clampToGround:true,
|
||||
scale:0.3,
|
||||
label: {
|
||||
text: "",
|
||||
font_size: 14,
|
||||
color: "#ffffff",
|
||||
pixelOffsetY: 10,
|
||||
distanceDisplayCondition: true,
|
||||
distanceDisplayCondition_far: 500000,
|
||||
distanceDisplayCondition_near: 0
|
||||
}
|
||||
},
|
||||
popup: `<div class="marsTiltPanel marsTiltPanel-theme-blue" style="font-size:12px;">
|
||||
<div class="marsTiltPanel-wrap">
|
||||
<div class="area">
|
||||
<div class="arrow-lt"></div>
|
||||
<div class="b-t"></div>
|
||||
<div class="b-r"></div>
|
||||
<div class="b-b"></div>
|
||||
<div class="b-l"></div>
|
||||
<div class="arrow-rb"></div>
|
||||
<div class="label-wrap">
|
||||
<div class="title">人员信息</div>
|
||||
<div class="label-content">
|
||||
<div class="data-li">
|
||||
<div class="data-label">人员名称：</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-label">电话号码：</div>
|
||||
<div class="data-value"><span id="lablYeWei" class="label-num"></span><span class="label-unit"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-value">
|
||||
<span class="label-tag data-value-status-2" title="视频通话" onclick="videoCall('123')">视频通话</span></div>
|
||||
<span id="lablSBZT1" onclick="designRoute('${user.CreateId}');" class="label-tag data-value-status-1" title="路线高亮">路线高亮</span>
|
||||
<span id="lablSBZT1" onclick="deleteRoute('${user.CreateId}');" class="label-tag data-value-status-2" title="路线隐藏">路线隐藏</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-t-l"></div>
|
||||
<div class="b-b-r"></div>
|
||||
</div>
|
||||
<div class="arrow" ></div>
|
||||
</div>`,
|
||||
popupOptions: {
|
||||
offsetY: -30,
|
||||
template: "{content}",
|
||||
horizontalOrigin: "Cesium.HorizontalOrigin.LEFT",
|
||||
verticalOrigin: "Cesium.VerticalOrigin.CENTER",
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 0.8, 8000, 0.3),
|
||||
},
|
||||
pointerEvents: true
|
||||
})
|
||||
this.markGraphicLayer.addGraphic(graphicAdd);
|
||||
graphic.setCallbackPosition([item.lng,item.lat]);
|
||||
// graphicAdd.addDynamicPosition(Cesium.Cartesian3.fromDegrees(parseFloat(user.Lng),parseFloat(user.Lat)),0);
|
||||
}
|
||||
|
||||
},
|
||||
addLayerPoint(item){
|
||||
let graphicExists = window.graphicLayer.getGraphicById(item.CreateId); // 先查找是否已经在地图上
|
||||
if(graphicExists){
|
||||
return;
|
||||
}
|
||||
let imageUrl = this.icons[item.UnitName] ? BASE_IMAGE_URL +"/"+this.icons[item.UnitName] : '/img/jiuyuanrenyuan.png'
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
id:item.CreateId,
|
||||
position:[item.Lng, item.Lat],
|
||||
style: {
|
||||
image:imageUrl,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
clampToGround:true,
|
||||
scale:0.5,
|
||||
label: {
|
||||
text: item.Name,
|
||||
font_size: 12,
|
||||
color: "#ffffff",
|
||||
pixelOffsetY: -48,
|
||||
distanceDisplayCondition: true,
|
||||
distanceDisplayCondition_far: 500000,
|
||||
distanceDisplayCondition_near: 0
|
||||
}
|
||||
},
|
||||
popup: `<div class="marsTiltPanel marsTiltPanel-theme-blue" style="font-size:12px;">
|
||||
<div class="marsTiltPanel-wrap">
|
||||
<div class="area">
|
||||
<div class="arrow-lt"></div>
|
||||
<div class="b-t"></div>
|
||||
<div class="b-r"></div>
|
||||
<div class="b-b"></div>
|
||||
<div class="b-l"></div>
|
||||
<div class="arrow-rb"></div>
|
||||
<div class="label-wrap">
|
||||
<div class="title">人员信息</div>
|
||||
<div class="label-content">
|
||||
<div class="data-li">
|
||||
<div class="data-label">人员名称：${item.Name}</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-label">电话号码：${item.Phone}</div>
|
||||
<div class="data-value"><span id="lablYeWei" class="label-num"></span><span class="label-unit"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-label">所属单位：${item.UnitName}</div>
|
||||
</div>
|
||||
<div class="data-li">
|
||||
<div class="data-value">
|
||||
<span class="label-tag data-value-status-2" title="视频通话" onclick="videoCall('${item.Phone}')">视频通话</span></div>
|
||||
<span id="lablSBZT1" onclick="designRoute('${item.CreateId}');" class="label-tag data-value-status-1" title="路线高亮">路线高亮</span>
|
||||
<span id="lablSBZT1" onclick="deleteRoute('${item.CreateId}');" class="label-tag data-value-status-2" title="路线隐藏">路线隐藏</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-t-l"></div>
|
||||
<div class="b-b-r"></div>
|
||||
</div>
|
||||
<div class="arrow" ></div>
|
||||
</div>`,
|
||||
popupOptions: {
|
||||
offsetY: -30,
|
||||
template: "{content}",
|
||||
horizontalOrigin: "Cesium.HorizontalOrigin.LEFT",
|
||||
verticalOrigin: "Cesium.VerticalOrigin.CENTER",
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 0.8, 8000, 0.3),
|
||||
},
|
||||
pointerEvents: true
|
||||
})
|
||||
// let graphic = new mars3d.graphic.BillboardPrimitive({
|
||||
// id:item.CreateId,
|
||||
// position:[item.Lng, item.Lat],
|
||||
// style: {
|
||||
// image: "/img/jiuyuanrenyuan.png",
|
||||
// horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
// verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
// clampToGround:true,
|
||||
// scale:0.3,
|
||||
// label: {
|
||||
// text: item.Name,
|
||||
// font_size: 14,
|
||||
// color: "#ffffff",
|
||||
// pixelOffsetY: 10,
|
||||
// distanceDisplayCondition: true,
|
||||
// distanceDisplayCondition_far: 500000,
|
||||
// distanceDisplayCondition_near: 0
|
||||
// }
|
||||
// },
|
||||
// popup: `<div class="marsTiltPanel marsTiltPanel-theme-blue" style="font-size:12px;">
|
||||
// <div class="marsTiltPanel-wrap">
|
||||
// <div class="area">
|
||||
// <div class="arrow-lt"></div>
|
||||
// <div class="b-t"></div>
|
||||
// <div class="b-r"></div>
|
||||
// <div class="b-b"></div>
|
||||
// <div class="b-l"></div>
|
||||
// <div class="arrow-rb"></div>
|
||||
// <div class="label-wrap">
|
||||
// <div class="title">人员信息</div>
|
||||
// <div class="label-content">
|
||||
// <div class="data-li">
|
||||
// <div class="data-label">人员名称：${item.Name}</div>
|
||||
// </div>
|
||||
// <div class="data-li">
|
||||
// <div class="data-label">电话号码：${item.Phone}</div>
|
||||
// <div class="data-value"><span id="lablYeWei" class="label-num"></span><span class="label-unit"></span>
|
||||
// </div>
|
||||
// </div>
|
||||
// <div class="data-li">
|
||||
// <div class="data-value">
|
||||
// <span class="label-tag data-value-status-2" title="视频通话" onclick="videoCall('${item.Phone}')">视频通话</span></div>
|
||||
// <span id="lablSBZT1" onclick="designRoute('${item.CreateId}');" class="label-tag data-value-status-1" title="人员动态">路线高亮</span>
|
||||
// <span id="lablSBZT1" onclick="deleteRoute('${item.CreateId}');" class="label-tag data-value-status-2" title="清除路线">路线隐藏</span>
|
||||
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// <div class="b-t-l"></div>
|
||||
// <div class="b-b-r"></div>
|
||||
// </div>
|
||||
// <div class="arrow" ></div>
|
||||
// </div>`,
|
||||
// popupOptions: {
|
||||
// offsetY: -30,
|
||||
// template: "{content}",
|
||||
// horizontalOrigin: "Cesium.HorizontalOrigin.LEFT",
|
||||
// verticalOrigin: "Cesium.VerticalOrigin.CENTER",
|
||||
// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
// scaleByDistance: new Cesium.NearFarScalar(1000, 0.8, 8000, 0.3),
|
||||
// },
|
||||
// pointerEvents: true
|
||||
// })
|
||||
window.graphicLayer.addGraphic(graphic);
|
||||
// graphic.addDynamicPosition(Cesium.Cartesian3.fromDegrees(parseFloat(item.Lng),parseFloat(item.Lat)),0);
|
||||
},
|
||||
delLayerPoint(arr){
|
||||
arr.forEach((item,index)=>{
|
||||
let graphic = window.graphicLayer.getGraphicById(item.id);
|
||||
window.graphicLayer.removeGraphic(graphic);
|
||||
})
|
||||
},
|
||||
deleteRoute(){
|
||||
clearRouterFunc();
|
||||
// if(this.pathPointGraphicLayer){
|
||||
// this.pathPointGraphicLayer.clear();
|
||||
// }
|
||||
},
|
||||
designRoute(userId){
|
||||
axios({
|
||||
method:"get",
|
||||
url:BASE_URL+"/Patrol/LoadUserNavigationByUserId",
|
||||
params:{
|
||||
id:userId
|
||||
},
|
||||
headers:{
|
||||
"X-Token":localStorage.getItem("X-Token")
|
||||
}
|
||||
}).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
if(res.data.data){
|
||||
this.startPoint = res.data.data.startLng+","+res.data.data.startLat;
|
||||
this.endPoint = res.data.data.endLng+","+res.data.data.endLat;
|
||||
this.getRoutePath();
|
||||
}else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"当前人员暂无规划地",
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
getRoutePath() {
|
||||
// 获取路线数据
|
||||
let startCoor = this.startPoint.split(",")
|
||||
let endCoor = this.endPoint.split(",");
|
||||
let params = {
|
||||
startlng: parseFloat(startCoor[0]),
|
||||
startlat: parseFloat(startCoor[1]),
|
||||
endlng: parseFloat(endCoor[0]),
|
||||
endlat: parseFloat(endCoor[1]),
|
||||
areaname: localStorage.getItem("areaName"),
|
||||
};
|
||||
getRouterFunc(params,"gaode").then(res => {
|
||||
drawRouterFunc(res)
|
||||
}).catch(err => {
|
||||
clearRouterFunc()
|
||||
})
|
||||
},
|
||||
drawPoint(type, lng, lat, z) { // 绘制起点、终点
|
||||
let image = null;
|
||||
if (type == "start") {
|
||||
image = "/img/route-start.png"
|
||||
} else {
|
||||
image = "/img/route-end.png"
|
||||
}
|
||||
var graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [lng, lat, z],
|
||||
style: {
|
||||
image: image,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
clampToGround: true
|
||||
},
|
||||
attr: { remark: type == 'start'?'起点':'终点' }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic) // 还可以另
|
||||
},
|
||||
// getRoutePath(){ // 获取路线数据
|
||||
// if(this.startPoint&&this.endPoint){
|
||||
// let startCoor = this.startPoint.split(",");
|
||||
// let endCoor = this.endPoint.split(",");
|
||||
// axios({
|
||||
// method: 'get',
|
||||
// url: AppConfig[localStorage.getItem('areaName')].baseUrl+'/api/FirePrevention/LoadRoad',
|
||||
// params: {
|
||||
// startlng: parseFloat(startCoor[0]),
|
||||
// startlat: parseFloat(startCoor[1]),
|
||||
// endlng: parseFloat(endCoor[0]),
|
||||
// endlat: parseFloat(endCoor[1]),
|
||||
// }
|
||||
// }).then(data => {
|
||||
// if (data.data.data.length > 0) {
|
||||
|
||||
// let LineString = data.data.data[0].route;
|
||||
|
||||
// if(LineString == null || LineString == "null"){
|
||||
|
||||
// }else{
|
||||
// let _this = this;
|
||||
// setTimeout(function () {
|
||||
// _this.drawRoutePath(parse(LineString));
|
||||
// // designPath(parse(LineString));
|
||||
// }, 1000)
|
||||
// }
|
||||
|
||||
// }else{
|
||||
|
||||
// }
|
||||
// })
|
||||
// }else{
|
||||
|
||||
// }
|
||||
// },
|
||||
drawRoutePath(geojson) { // 绘制路线
|
||||
|
||||
if(this.pathPointGraphicLayer == null){
|
||||
this.pathPointGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
window.globalmap.addLayer(this.pathPointGraphicLayer);
|
||||
}else{
|
||||
this.pathPointGraphicLayer.clear();
|
||||
}
|
||||
|
||||
|
||||
|
||||
if(geojson.type=="LineString"){
|
||||
geojson.coordinates = [geojson.coordinates]
|
||||
}
|
||||
|
||||
// 虚线部分
|
||||
var startCoor = this.startPoint.split(",");
|
||||
var endCoor =this.endPoint.split(",");
|
||||
|
||||
if(this.startPoint&&this.endPoint){
|
||||
this.drawPoint("start",parseFloat(startCoor[0]),parseFloat(startCoor[1]),0)
|
||||
this.drawPoint("end",parseFloat(endCoor[0]),parseFloat(endCoor[1]),0)
|
||||
}else{
|
||||
this.$message({
|
||||
type:"warning",
|
||||
message:"当前人员暂无规划地",
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 起始点坐标
|
||||
var startCoorArr = [parseFloat(startCoor[0]), parseFloat(startCoor[1])]
|
||||
// 终点坐标
|
||||
var endCoorArr = [parseFloat(endCoor[0]), parseFloat(endCoor[1])]
|
||||
|
||||
var startTurfPoint = turf.point(startCoorArr);
|
||||
var endTurfPoint = turf.point(endCoorArr);
|
||||
|
||||
// 起始路线部分
|
||||
var startPath = [];
|
||||
geojson.coordinates[0].forEach((item, index) => {
|
||||
startPath.push(turf.point([item[0], item[1]]));
|
||||
})
|
||||
|
||||
var startTurfPath = turf.featureCollection(startPath);
|
||||
var startNearestPoint = turf.nearestPoint(startTurfPoint, startTurfPath);
|
||||
|
||||
var startNearestPointLngLat = null;
|
||||
if (startNearestPoint) {
|
||||
startNearestPointLngLat = startNearestPoint.geometry.coordinates;
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: [
|
||||
startCoorArr,
|
||||
startNearestPointLngLat,
|
||||
],
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.PolylineDash,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.YELLOW,
|
||||
dashLength: 8.0
|
||||
}
|
||||
},
|
||||
attr: { remark: "虚线" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
}
|
||||
|
||||
// 终点路线部分
|
||||
var endPath = [];
|
||||
geojson.coordinates[geojson.coordinates.length - 1].forEach((item, index) => {
|
||||
endPath.push(turf.point([item[0], item[1]]));
|
||||
})
|
||||
var endTurfPath = turf.featureCollection(endPath);
|
||||
var endNearestPoint = turf.nearestPoint(endTurfPoint, endTurfPath);
|
||||
|
||||
var endNearestPointLngLat = null;
|
||||
if (endNearestPoint) {
|
||||
endNearestPointLngLat = endNearestPoint.geometry.coordinates;
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: [
|
||||
endCoorArr,
|
||||
endNearestPointLngLat,
|
||||
],
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.PolylineDash,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.YELLOW,
|
||||
dashLength: 8.0
|
||||
}
|
||||
},
|
||||
attr: { remark: "虚线" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
}
|
||||
|
||||
// 漫游数据
|
||||
var tripArr = [];
|
||||
// 实线路线部分
|
||||
geojson.coordinates.forEach((item, index) => {
|
||||
tripArr = tripArr.concat(item);
|
||||
// var graphic = new mars3d.graphic.PolylineEntity({
|
||||
// positions: item,
|
||||
// style: {
|
||||
// width: 5,
|
||||
// clampToGround: true,
|
||||
// // materialType: mars3d.MaterialType.PolylineDash,
|
||||
// materialOptions: {
|
||||
// color: Cesium.Color.CYAN,
|
||||
// dashLength: 8.0
|
||||
// }
|
||||
// },
|
||||
// attr: { remark: "最优路线" }
|
||||
// })
|
||||
})
|
||||
|
||||
var graphic = new mars3d.graphic.PolylineEntity({
|
||||
positions: tripArr,
|
||||
style: {
|
||||
width: 5,
|
||||
clampToGround: true,
|
||||
materialType: mars3d.MaterialType.LineFlow,
|
||||
materialOptions: {
|
||||
color: Cesium.Color.CYAN,
|
||||
image: "/img/line-colour.png",
|
||||
speed: 10
|
||||
}
|
||||
},
|
||||
attr: { remark: "示例13" }
|
||||
})
|
||||
this.pathPointGraphicLayer.addGraphic(graphic)
|
||||
|
||||
this.pathPointGraphicLayer.flyTo();
|
||||
|
||||
this.tripFlyArray = [];
|
||||
tripArr.forEach((item, index) => {
|
||||
if (index % 20 == 0) {
|
||||
this.tripFlyArray.push(item);
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
initWebSocket() {
|
||||
let _this = this;
|
||||
if ("WebSocket" in window) {
|
||||
// 打开一个 web socket
|
||||
var ws = new WebSocket("ws://221.2.83.254:7002/ws");
|
||||
var heartCheck;
|
||||
ws.onopen = function () {
|
||||
//Web Socket 已连接上，使用 send() 方法发送数据
|
||||
console.log('WEBSOCKET-ONLINE')
|
||||
heartCheck = setInterval(function() {
|
||||
ws.send('HeartBeat');
|
||||
}, 5000);
|
||||
};
|
||||
ws.onmessage = function (evt) {
|
||||
clearInterval(heartCheck);
|
||||
heartCheck = setInterval(function() {
|
||||
ws.send('HeartBeat');
|
||||
}, 5000);
|
||||
let obj = JSON.parse(evt.data)
|
||||
if(obj.Module){
|
||||
_this.pointData = []
|
||||
if(obj.Module == '人员信息' || obj.Module == '对讲机信息'){
|
||||
_this.getPointer(obj.Module)
|
||||
}
|
||||
if(obj.Module == '上线' || obj.Module == '下线'){
|
||||
_this.getOnLineInfo()
|
||||
}
|
||||
}
|
||||
};
|
||||
ws.onclose = function () {
|
||||
clearInterval(heartCheck);
|
||||
console.log('WEBSOCKET-CLOSED')
|
||||
_this.initWebSocket()
|
||||
};
|
||||
ws.onerror= function () {
|
||||
clearInterval(heartCheck);
|
||||
console.log('WEBSOCKET-ERROR')
|
||||
_this.initWebSocket()
|
||||
};
|
||||
} else {
|
||||
// 浏览器不支持 WebSocket
|
||||
alert("您的浏览器不支持 WebSocket!");
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* .box{
|
||||
width: 100%;
|
||||
height: calc( 100% - 5px);;
|
||||
overflow: hidden;
|
||||
text-align:left;
|
||||
z-index: 99;
|
||||
} */
|
||||
/* 隐藏该图表 */
|
||||
.box{
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.box-name{
|
||||
height: 47px;
|
||||
line-height: 47px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
padding: 0 40px;
|
||||
}
|
||||
.box-title{
|
||||
width:100%;
|
||||
height:45px;
|
||||
overflow: hidden;
|
||||
line-height:40px;
|
||||
color:#eee;
|
||||
text-align: center;
|
||||
font-size:14px;
|
||||
}
|
||||
.box-container{
|
||||
width: calc( 100% - 0px);
|
||||
padding:10px 12px;
|
||||
height: calc( 100% - 50px);
|
||||
}
|
||||
.table-header{
|
||||
width: calc( 100% - 10px);
|
||||
height:25px;
|
||||
color:#fff;
|
||||
text-align: center;
|
||||
}
|
||||
.table-header div{
|
||||
float:left;
|
||||
width:25%;
|
||||
border-bottom:1px dashed #00FFF0;
|
||||
padding-bottom:8px;
|
||||
}
|
||||
.table-body{
|
||||
width:100%;
|
||||
height: calc( 100% - 0px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.table-body .item{
|
||||
width:100%;
|
||||
height:40px;
|
||||
background: #00ffee2f;
|
||||
font-size:14px;
|
||||
text-align: center;
|
||||
line-height:40px;
|
||||
}
|
||||
|
||||
.table-body .item:nth-child(2n){
|
||||
background:#0099ff50;
|
||||
}
|
||||
.close-button{
|
||||
position:absolute;
|
||||
right:20px;
|
||||
top:14px;
|
||||
cursor:pointer;
|
||||
color:#fff;
|
||||
font-weight: bold;
|
||||
width:20px;
|
||||
height:20px;
|
||||
background:#0a58bfcc;
|
||||
line-height:20px;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.table-body .item div{
|
||||
float:left;
|
||||
width:50%;
|
||||
color:#eee;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,485 @@
|
|||
<template>
|
||||
|
||||
<div>
|
||||
<div class="left-panel">
|
||||
</div>
|
||||
<div class="right-panel">
|
||||
<el-form class="login-form" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm"
|
||||
label-position="left">
|
||||
<!-- <div class="header-logo">
|
||||
<div class="image">
|
||||
<img src="~@/assets/login/logo.png" alt="">
|
||||
</div>
|
||||
<div class="sys-title">
|
||||
临沂国家高新区数据资源平台
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
|
||||
|
||||
|
||||
<div style="top: 15%;left: 8%;position:absolute;">
|
||||
<div class="input-wrapper login-container">
|
||||
<label class="label">
|
||||
<img src="../../assets/login/yonghu.png">
|
||||
</label>
|
||||
<div>
|
||||
<el-input class="u-input" name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="请输入登录账号" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="top: 35%;left: 8%;position:absolute;">
|
||||
<div class="input-wrapper login-container">
|
||||
<label class="label">
|
||||
<img src="~@/assets/login/密码.png">
|
||||
</label>
|
||||
<div>
|
||||
<el-input class="u-input" name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password"
|
||||
autoComplete="on" placeholder="请输入密码"></el-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="top: 55%;left: 8%;position:absolute;">
|
||||
<el-button class="login-btn" v-waves type="primary" style="width:448px;background:#0088FF;border-radius: 10px;font-size: 24px;height: 50px;" :loading="loading" @click.native.prevent="handleLogin">
|
||||
登 录
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<div style="top: 76%;left: 10%;position:absolute;">
|
||||
<div class="left-txt">
|
||||
<span>忘记密码？</span>
|
||||
</div>
|
||||
<div class="right-txt">
|
||||
<span class="s1">还没有账号？</span><span class="s2">去注册</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tips" v-if="isIdentityAuth">
|
||||
<router-link to="/oidcRedirect">
|
||||
<el-badge is-dot>接口服务器启用了Oauth认证，请点击这里登录</el-badge>
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="comtxt">
|
||||
山东慧创信息科技有限公司
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import waves from '@/directive/waves' // 水波纹指令
|
||||
import {
|
||||
mapGetters,
|
||||
mapActions
|
||||
} from 'vuex'
|
||||
export default {
|
||||
name: 'login',
|
||||
directives: {
|
||||
waves
|
||||
},
|
||||
data() {
|
||||
const validateUsername = (rule, value, callback) => {
|
||||
if (value.length <= 0) {
|
||||
callback(new Error('用户名不能为空'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
const validatePass = (rule, value, callback) => {
|
||||
if (value.length <= 0) {
|
||||
callback(new Error('密码不能为空'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
return {
|
||||
tenant: this.tenantid || 'OpenAuthDBContext', //当前选择的租户
|
||||
tenants:[{
|
||||
value: 'OpenAuthDBContext',
|
||||
label: '默认租户'
|
||||
},{
|
||||
value: 'ErrorId404',
|
||||
label: '模拟一个不存在的租户'
|
||||
}],
|
||||
loginForm: {
|
||||
username:"",
|
||||
password:""
|
||||
},
|
||||
loginRules: {
|
||||
username: [{
|
||||
required: true,
|
||||
trigger: 'blur',
|
||||
validator: validateUsername
|
||||
}],
|
||||
password: [{
|
||||
required: true,
|
||||
trigger: 'blur',
|
||||
validator: validatePass
|
||||
}]
|
||||
},
|
||||
loading: false,
|
||||
pwdType: 'password'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'isIdentityAuth',
|
||||
'tenantid'
|
||||
])
|
||||
},
|
||||
|
||||
methods: {
|
||||
...mapActions([
|
||||
'setTenantId', //
|
||||
]),
|
||||
|
||||
tenantChange(e){
|
||||
this.setTenantId(e)
|
||||
},
|
||||
showPwd() {
|
||||
if (this.pwdType === 'password') {
|
||||
this.pwdType = ''
|
||||
} else {
|
||||
this.pwdType = 'password'
|
||||
}
|
||||
},
|
||||
handleLogin() {
|
||||
this.$refs.loginForm.validate(valid => {
|
||||
if (valid) {
|
||||
this.loading = true
|
||||
this.$store.dispatch('Login', this.loginForm).then(() => {
|
||||
this.loading = false
|
||||
this.$router.push({
|
||||
path: '/home'
|
||||
})
|
||||
}).catch(() => {
|
||||
this.loading = false
|
||||
})
|
||||
} else {
|
||||
console.log('error submit!!')
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss">
|
||||
$bg:#2d3a4b;
|
||||
$light_gray:#eee;
|
||||
$color_balck: #333;
|
||||
|
||||
/* reset element-ui css */
|
||||
.login-container {
|
||||
.el-input {
|
||||
display: inline-block;
|
||||
height: 40px;
|
||||
width: 300px;
|
||||
input {
|
||||
background: transparent;
|
||||
border: 0px;
|
||||
-webkit-appearance: none;
|
||||
border-radius: 0px;
|
||||
padding: 5px 0;
|
||||
color: $color_balck;
|
||||
height: 40px;
|
||||
|
||||
&:-webkit-autofill {
|
||||
transition: background-color 5000s ease-in-out 0s;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-form-item {
|
||||
margin-bottom: 35px;
|
||||
border-radius: 5px;
|
||||
color: #454545;
|
||||
.el-form-item__content{
|
||||
background:#fff;
|
||||
border:1px solid rgba(223, 223, 223, 1);
|
||||
}
|
||||
&:last-child{
|
||||
padding-top: 20px;
|
||||
.el-form-item__content{
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
|
||||
@media screen and (max-width: 1150px) {
|
||||
.leftImg{
|
||||
width: 450px !important;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1010px) {
|
||||
.leftImg{
|
||||
width: 380px !important;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 940px) {
|
||||
.leftImg{
|
||||
display: block;
|
||||
width: 260px !important;
|
||||
margin: 0 auto !important;
|
||||
}
|
||||
}
|
||||
$dark_gray:#D1DFE8;
|
||||
|
||||
.login-container {
|
||||
height: 100%;
|
||||
// background: url('~@/assets/login/bg1.jpg') no-repeat;
|
||||
background-color: #EBEBEA;
|
||||
background-position: 0 0;
|
||||
background-size: 62% 100%;
|
||||
text-align: center;
|
||||
&:before{
|
||||
// content: '';
|
||||
display: inline-block;
|
||||
// height: 100%; //or the input will be in new line
|
||||
vertical-align: middle;
|
||||
}
|
||||
.content{
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
> img{
|
||||
width: 568px;
|
||||
margin-right: 150px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.login-form{
|
||||
display: inline-block;
|
||||
width: 400px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.svg-container {
|
||||
color: $dark_gray;
|
||||
vertical-align: middle;
|
||||
width: 33px;
|
||||
display: inline-block;
|
||||
font-size: 22px;
|
||||
&_login {
|
||||
font-size: 31px;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 26px;
|
||||
font-weight: 400;
|
||||
color: #4452D5;
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
}
|
||||
.tips{
|
||||
color: #959595;
|
||||
font-size: 14px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 40px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.show-pwd {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 7px;
|
||||
font-size: 16px;
|
||||
color: $dark_gray;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.left-panel {
|
||||
background-image: url('/img/login-bg.png');
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
.right-panel {
|
||||
/* background-image: url('../../assets/login/矩形.png'); */
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
padding-top:20%;
|
||||
position:absolute;
|
||||
left:50%;
|
||||
top:50%;
|
||||
transform: translate(-50%,-50%);
|
||||
width:536px;
|
||||
height: 561px;
|
||||
}
|
||||
|
||||
.header-logo{
|
||||
position:absolute;
|
||||
top:12%;
|
||||
left:8%;
|
||||
}
|
||||
.header-logo .image {
|
||||
width: 41px;
|
||||
height: 41px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.header-logo .image img {
|
||||
width: 41px;
|
||||
height: 41px;
|
||||
}
|
||||
|
||||
.header-logo .sys-title {
|
||||
float: right;
|
||||
line-height: 45px;
|
||||
margin-left: 15px;
|
||||
width: 308px;
|
||||
height: 23px;
|
||||
font-size: 18px;
|
||||
font-family: Adobe Heiti Std;
|
||||
font-weight: normal;
|
||||
color: #7C7C7C;
|
||||
}
|
||||
.input-wrapper {
|
||||
float: left;
|
||||
width: 448px;
|
||||
height: 56px;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 1px 1px 0px rgba(158, 168, 184, 0.5);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.label {
|
||||
float: left;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.u-input {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 5px 0;
|
||||
color: #555;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
width: 390px;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
width: 448px;
|
||||
height: 56px;
|
||||
background: #0088FF;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.login-btn::after {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: "";
|
||||
border: 2px solid rgb(255, 255, 255);
|
||||
z-index: 2;
|
||||
margin: 0px;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
border-top-width: 2px;
|
||||
transition: border-top-width 0.1s ease 0.2s, height 0.2s ease 0.1s, width 0.2s ease 0s, margin 0.2s ease 0s;
|
||||
}
|
||||
|
||||
.login-btn:hover{
|
||||
opacity: 0.8;
|
||||
}
|
||||
.login-btn:hover::after {
|
||||
width: 60%;
|
||||
height: 0px;
|
||||
border-width: 0px 2px 2px;
|
||||
margin: 0px 20%;
|
||||
transition: border-top-width 0.1s ease 0s, height 0.2s ease 0.1s, width 0.2s ease 0.2s, margin 0.2s ease 0.2s;
|
||||
}
|
||||
|
||||
.login-btn .btn-txt {
|
||||
font-family: Source Han Sans CN;
|
||||
margin-left: 42%;
|
||||
color: #FFFFFF;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
border-radius: 50%;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.login-btn .btn-txt:hover{
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.left-txt {
|
||||
float:left;
|
||||
}
|
||||
|
||||
.left-txt span {
|
||||
width: 81px;
|
||||
height: 17px;
|
||||
font-size: 12px;
|
||||
font-family: Source Han Sans CN;
|
||||
color: #999999;
|
||||
line-height: 42px;
|
||||
}
|
||||
|
||||
.right-txt {
|
||||
float: right;
|
||||
margin-left: 250px;
|
||||
}
|
||||
|
||||
.right-txt .s1 {
|
||||
width: 81px;
|
||||
height: 17px;
|
||||
font-size: 12px;
|
||||
font-family: Source Han Sans CN;
|
||||
color: #999999;
|
||||
line-height: 42px;
|
||||
}
|
||||
|
||||
.right-txt .s2 {
|
||||
width: 81px;
|
||||
height: 17px;
|
||||
font-size: 12px;
|
||||
font-family: Source Han Sans CN;
|
||||
color: #2882FE;
|
||||
line-height: 42px;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.right-txt .s2:hover{
|
||||
color:#0F31AF;
|
||||
}
|
||||
|
||||
.comtxt {
|
||||
width: 190px;
|
||||
height: 16px;
|
||||
font-size: 12px;
|
||||
font-family: Source Han Sans CN;
|
||||
color: rgba(80, 80, 80, 0.6);
|
||||
line-height: 63px;
|
||||
position: absolute;
|
||||
bottom: 10%;
|
||||
right: 13%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,492 @@
|
|||
<template>
|
||||
|
||||
<div>
|
||||
<div class="left-panel">
|
||||
</div>
|
||||
<div class="right-panel">
|
||||
<el-form class="login-form" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm"
|
||||
label-position="left">
|
||||
<!-- <div class="header-logo">
|
||||
<div class="image">
|
||||
<img src="~@/assets/login/logo.png" alt="">
|
||||
</div>
|
||||
<div class="sys-title">
|
||||
临沂国家高新区数据资源平台
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
|
||||
|
||||
|
||||
<div style="top: 15%;left: 8%;position:absolute;">
|
||||
<div class="input-wrapper login-container">
|
||||
<label class="label">
|
||||
<img src="../../assets/login/yonghu.png">
|
||||
</label>
|
||||
<div>
|
||||
<el-input class="u-input" name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="请输入登录账号" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="top: 35%;left: 8%;position:absolute;">
|
||||
<div class="input-wrapper login-container">
|
||||
<label class="label">
|
||||
<img src="~@/assets/login/密码.png">
|
||||
</label>
|
||||
<div>
|
||||
<el-input class="u-input" name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password"
|
||||
autoComplete="on" placeholder="请输入密码"></el-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="top: 55%;left: 8%;position:absolute;">
|
||||
<el-button class="login-btn" v-waves type="primary" style="width:448px;background:#0088FF;border-radius: 10px;font-size: 24px;height: 50px;" :loading="loading" @click.native.prevent="handleLogin">
|
||||
登 录
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<div style="top: 76%;left: 10%;position:absolute;">
|
||||
<div class="left-txt">
|
||||
<span>忘记密码？</span>
|
||||
</div>
|
||||
<div class="right-txt">
|
||||
<span class="s1">还没有账号？</span><span class="s2">去注册</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tips" v-if="isIdentityAuth">
|
||||
<router-link to="/oidcRedirect">
|
||||
<el-badge is-dot>接口服务器启用了Oauth认证，请点击这里登录</el-badge>
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="comtxt">
|
||||
山东慧创信息科技有限公司
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import waves from '@/directive/waves' // 水波纹指令
|
||||
import {
|
||||
mapGetters,
|
||||
mapActions
|
||||
} from 'vuex'
|
||||
import { getMethodCommon } from '../../api/common'
|
||||
export default {
|
||||
name: 'login',
|
||||
directives: {
|
||||
waves
|
||||
},
|
||||
data() {
|
||||
const validateUsername = (rule, value, callback) => {
|
||||
if (value.length <= 0) {
|
||||
callback(new Error('用户名不能为空'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
const validatePass = (rule, value, callback) => {
|
||||
if (value.length <= 0) {
|
||||
callback(new Error('密码不能为空'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
return {
|
||||
tenant: this.tenantid || 'OpenAuthDBContext', //当前选择的租户
|
||||
tenants:[{
|
||||
value: 'OpenAuthDBContext',
|
||||
label: '默认租户'
|
||||
},{
|
||||
value: 'ErrorId404',
|
||||
label: '模拟一个不存在的租户'
|
||||
}],
|
||||
loginForm: {
|
||||
username:"",
|
||||
password:""
|
||||
},
|
||||
loginRules: {
|
||||
username: [{
|
||||
required: true,
|
||||
trigger: 'blur',
|
||||
validator: validateUsername
|
||||
}],
|
||||
password: [{
|
||||
required: true,
|
||||
trigger: 'blur',
|
||||
validator: validatePass
|
||||
}]
|
||||
},
|
||||
loading: false,
|
||||
pwdType: 'password'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'isIdentityAuth',
|
||||
'tenantid'
|
||||
])
|
||||
},
|
||||
|
||||
methods: {
|
||||
...mapActions([
|
||||
'setTenantId', //
|
||||
]),
|
||||
|
||||
tenantChange(e){
|
||||
this.setTenantId(e)
|
||||
},
|
||||
showPwd() {
|
||||
if (this.pwdType === 'password') {
|
||||
this.pwdType = ''
|
||||
} else {
|
||||
this.pwdType = 'password'
|
||||
}
|
||||
},
|
||||
handleLogin() {
|
||||
this.$refs.loginForm.validate(valid => {
|
||||
if (valid) {
|
||||
this.loading = true
|
||||
this.$store.dispatch('Login', this.loginForm).then(() => {
|
||||
getMethodCommon("/Check/GetRoles").then(res=>{
|
||||
if(res){
|
||||
alert(res);
|
||||
console.log("res123",res);
|
||||
}
|
||||
})
|
||||
this.loading = false
|
||||
this.$router.push({
|
||||
path: '/home'
|
||||
})
|
||||
}).catch(() => {
|
||||
this.loading = false
|
||||
})
|
||||
} else {
|
||||
console.log('error submit!!')
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss">
|
||||
$bg:#2d3a4b;
|
||||
$light_gray:#eee;
|
||||
$color_balck: #333;
|
||||
|
||||
/* reset element-ui css */
|
||||
.login-container {
|
||||
.el-input {
|
||||
display: inline-block;
|
||||
height: 40px;
|
||||
width: 300px;
|
||||
input {
|
||||
background: transparent;
|
||||
border: 0px;
|
||||
-webkit-appearance: none;
|
||||
border-radius: 0px;
|
||||
padding: 5px 0;
|
||||
color: $color_balck;
|
||||
height: 40px;
|
||||
|
||||
&:-webkit-autofill {
|
||||
transition: background-color 5000s ease-in-out 0s;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-form-item {
|
||||
margin-bottom: 35px;
|
||||
border-radius: 5px;
|
||||
color: #454545;
|
||||
.el-form-item__content{
|
||||
background:#fff;
|
||||
border:1px solid rgba(223, 223, 223, 1);
|
||||
}
|
||||
&:last-child{
|
||||
padding-top: 20px;
|
||||
.el-form-item__content{
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
|
||||
@media screen and (max-width: 1150px) {
|
||||
.leftImg{
|
||||
width: 450px !important;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1010px) {
|
||||
.leftImg{
|
||||
width: 380px !important;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 940px) {
|
||||
.leftImg{
|
||||
display: block;
|
||||
width: 260px !important;
|
||||
margin: 0 auto !important;
|
||||
}
|
||||
}
|
||||
$dark_gray:#D1DFE8;
|
||||
|
||||
.login-container {
|
||||
height: 100%;
|
||||
// background: url('~@/assets/login/bg1.jpg') no-repeat;
|
||||
background-color: #EBEBEA;
|
||||
background-position: 0 0;
|
||||
background-size: 62% 100%;
|
||||
text-align: center;
|
||||
&:before{
|
||||
// content: '';
|
||||
display: inline-block;
|
||||
// height: 100%; //or the input will be in new line
|
||||
vertical-align: middle;
|
||||
}
|
||||
.content{
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
> img{
|
||||
width: 568px;
|
||||
margin-right: 150px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.login-form{
|
||||
display: inline-block;
|
||||
width: 400px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.svg-container {
|
||||
color: $dark_gray;
|
||||
vertical-align: middle;
|
||||
width: 33px;
|
||||
display: inline-block;
|
||||
font-size: 22px;
|
||||
&_login {
|
||||
font-size: 31px;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 26px;
|
||||
font-weight: 400;
|
||||
color: #4452D5;
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
}
|
||||
.tips{
|
||||
color: #959595;
|
||||
font-size: 14px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 40px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.show-pwd {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 7px;
|
||||
font-size: 16px;
|
||||
color: $dark_gray;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.left-panel {
|
||||
background-image: url('/img/login-bg.png');
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
.right-panel {
|
||||
/* background-image: url('../../assets/login/矩形.png'); */
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
padding-top:20%;
|
||||
position:absolute;
|
||||
left:50%;
|
||||
top:50%;
|
||||
transform: translate(-50%,-50%);
|
||||
width:536px;
|
||||
height: 561px;
|
||||
}
|
||||
|
||||
.header-logo{
|
||||
position:absolute;
|
||||
top:12%;
|
||||
left:8%;
|
||||
}
|
||||
.header-logo .image {
|
||||
width: 41px;
|
||||
height: 41px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.header-logo .image img {
|
||||
width: 41px;
|
||||
height: 41px;
|
||||
}
|
||||
|
||||
.header-logo .sys-title {
|
||||
float: right;
|
||||
line-height: 45px;
|
||||
margin-left: 15px;
|
||||
width: 308px;
|
||||
height: 23px;
|
||||
font-size: 18px;
|
||||
font-family: Adobe Heiti Std;
|
||||
font-weight: normal;
|
||||
color: #7C7C7C;
|
||||
}
|
||||
.input-wrapper {
|
||||
float: left;
|
||||
width: 448px;
|
||||
height: 56px;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 1px 1px 0px rgba(158, 168, 184, 0.5);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.label {
|
||||
float: left;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.u-input {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 5px 0;
|
||||
color: #555;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
width: 390px;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
width: 448px;
|
||||
height: 56px;
|
||||
background: #0088FF;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.login-btn::after {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: "";
|
||||
border: 2px solid rgb(255, 255, 255);
|
||||
z-index: 2;
|
||||
margin: 0px;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
border-top-width: 2px;
|
||||
transition: border-top-width 0.1s ease 0.2s, height 0.2s ease 0.1s, width 0.2s ease 0s, margin 0.2s ease 0s;
|
||||
}
|
||||
|
||||
.login-btn:hover{
|
||||
opacity: 0.8;
|
||||
}
|
||||
.login-btn:hover::after {
|
||||
width: 60%;
|
||||
height: 0px;
|
||||
border-width: 0px 2px 2px;
|
||||
margin: 0px 20%;
|
||||
transition: border-top-width 0.1s ease 0s, height 0.2s ease 0.1s, width 0.2s ease 0.2s, margin 0.2s ease 0.2s;
|
||||
}
|
||||
|
||||
.login-btn .btn-txt {
|
||||
font-family: Source Han Sans CN;
|
||||
margin-left: 42%;
|
||||
color: #FFFFFF;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
border-radius: 50%;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.login-btn .btn-txt:hover{
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.left-txt {
|
||||
float:left;
|
||||
}
|
||||
|
||||
.left-txt span {
|
||||
width: 81px;
|
||||
height: 17px;
|
||||
font-size: 12px;
|
||||
font-family: Source Han Sans CN;
|
||||
color: #999999;
|
||||
line-height: 42px;
|
||||
}
|
||||
|
||||
.right-txt {
|
||||
float: right;
|
||||
margin-left: 250px;
|
||||
}
|
||||
|
||||
.right-txt .s1 {
|
||||
width: 81px;
|
||||
height: 17px;
|
||||
font-size: 12px;
|
||||
font-family: Source Han Sans CN;
|
||||
color: #999999;
|
||||
line-height: 42px;
|
||||
}
|
||||
|
||||
.right-txt .s2 {
|
||||
width: 81px;
|
||||
height: 17px;
|
||||
font-size: 12px;
|
||||
font-family: Source Han Sans CN;
|
||||
color: #2882FE;
|
||||
line-height: 42px;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.right-txt .s2:hover{
|
||||
color:#0F31AF;
|
||||
}
|
||||
|
||||
.comtxt {
|
||||
width: 190px;
|
||||
height: 16px;
|
||||
font-size: 12px;
|
||||
font-family: Source Han Sans CN;
|
||||
color: rgba(80, 80, 80, 0.6);
|
||||
line-height: 63px;
|
||||
position: absolute;
|
||||
bottom: 10%;
|
||||
right: 13%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,492 @@
|
|||
<template>
|
||||
|
||||
<div>
|
||||
<div class="left-panel">
|
||||
</div>
|
||||
<div class="right-panel">
|
||||
<el-form class="login-form" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm"
|
||||
label-position="left">
|
||||
<!-- <div class="header-logo">
|
||||
<div class="image">
|
||||
<img src="~@/assets/login/logo.png" alt="">
|
||||
</div>
|
||||
<div class="sys-title">
|
||||
临沂国家高新区数据资源平台
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
|
||||
|
||||
|
||||
<div style="top: 15%;left: 8%;position:absolute;">
|
||||
<div class="input-wrapper login-container">
|
||||
<label class="label">
|
||||
<img src="../../assets/login/yonghu.png">
|
||||
</label>
|
||||
<div>
|
||||
<el-input class="u-input" name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="请输入登录账号" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="top: 35%;left: 8%;position:absolute;">
|
||||
<div class="input-wrapper login-container">
|
||||
<label class="label">
|
||||
<img src="~@/assets/login/密码.png">
|
||||
</label>
|
||||
<div>
|
||||
<el-input class="u-input" name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password"
|
||||
autoComplete="on" placeholder="请输入密码"></el-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="top: 55%;left: 8%;position:absolute;">
|
||||
<el-button class="login-btn" v-waves type="primary" style="width:448px;background:#0088FF;border-radius: 10px;font-size: 24px;height: 50px;" :loading="loading" @click.native.prevent="handleLogin">
|
||||
登 录
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<div style="top: 76%;left: 10%;position:absolute;">
|
||||
<div class="left-txt">
|
||||
<span>忘记密码？</span>
|
||||
</div>
|
||||
<div class="right-txt">
|
||||
<span class="s1">还没有账号？</span><span class="s2">去注册</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tips" v-if="isIdentityAuth">
|
||||
<router-link to="/oidcRedirect">
|
||||
<el-badge is-dot>接口服务器启用了Oauth认证，请点击这里登录</el-badge>
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="comtxt">
|
||||
山东慧创信息科技有限公司
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import waves from '@/directive/waves' // 水波纹指令
|
||||
import {
|
||||
mapGetters,
|
||||
mapActions
|
||||
} from 'vuex'
|
||||
import { getMethodCommon } from '../../api/common'
|
||||
export default {
|
||||
name: 'login',
|
||||
directives: {
|
||||
waves
|
||||
},
|
||||
data() {
|
||||
const validateUsername = (rule, value, callback) => {
|
||||
if (value.length <= 0) {
|
||||
callback(new Error('用户名不能为空'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
const validatePass = (rule, value, callback) => {
|
||||
if (value.length <= 0) {
|
||||
callback(new Error('密码不能为空'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
return {
|
||||
tenant: this.tenantid || 'OpenAuthDBContext', //当前选择的租户
|
||||
tenants:[{
|
||||
value: 'OpenAuthDBContext',
|
||||
label: '默认租户'
|
||||
},{
|
||||
value: 'ErrorId404',
|
||||
label: '模拟一个不存在的租户'
|
||||
}],
|
||||
loginForm: {
|
||||
username:"",
|
||||
password:""
|
||||
},
|
||||
loginRules: {
|
||||
username: [{
|
||||
required: true,
|
||||
trigger: 'blur',
|
||||
validator: validateUsername
|
||||
}],
|
||||
password: [{
|
||||
required: true,
|
||||
trigger: 'blur',
|
||||
validator: validatePass
|
||||
}]
|
||||
},
|
||||
loading: false,
|
||||
pwdType: 'password'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'isIdentityAuth',
|
||||
'tenantid'
|
||||
])
|
||||
},
|
||||
|
||||
methods: {
|
||||
...mapActions([
|
||||
'setTenantId', //
|
||||
]),
|
||||
|
||||
tenantChange(e){
|
||||
this.setTenantId(e)
|
||||
},
|
||||
showPwd() {
|
||||
if (this.pwdType === 'password') {
|
||||
this.pwdType = ''
|
||||
} else {
|
||||
this.pwdType = 'password'
|
||||
}
|
||||
},
|
||||
handleLogin() {
|
||||
this.$refs.loginForm.validate(valid => {
|
||||
if (valid) {
|
||||
this.loading = true
|
||||
this.$store.dispatch('Login', this.loginForm).then(() => {
|
||||
getMethodCommon("/Check/GetRoles").then(res=>{
|
||||
if(res){
|
||||
alert(res);
|
||||
console.log("res123",res);
|
||||
}
|
||||
})
|
||||
this.loading = false
|
||||
this.$router.push({
|
||||
path: '/home'
|
||||
})
|
||||
}).catch(() => {
|
||||
this.loading = false
|
||||
})
|
||||
} else {
|
||||
console.log('error submit!!')
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss">
|
||||
$bg:#2d3a4b;
|
||||
$light_gray:#eee;
|
||||
$color_balck: #333;
|
||||
|
||||
/* reset element-ui css */
|
||||
.login-container {
|
||||
.el-input {
|
||||
display: inline-block;
|
||||
height: 40px;
|
||||
width: 300px;
|
||||
input {
|
||||
background: transparent;
|
||||
border: 0px;
|
||||
-webkit-appearance: none;
|
||||
border-radius: 0px;
|
||||
padding: 5px 0;
|
||||
color: $color_balck;
|
||||
height: 40px;
|
||||
|
||||
&:-webkit-autofill {
|
||||
transition: background-color 5000s ease-in-out 0s;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-form-item {
|
||||
margin-bottom: 35px;
|
||||
border-radius: 5px;
|
||||
color: #454545;
|
||||
.el-form-item__content{
|
||||
background:#fff;
|
||||
border:1px solid rgba(223, 223, 223, 1);
|
||||
}
|
||||
&:last-child{
|
||||
padding-top: 20px;
|
||||
.el-form-item__content{
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
|
||||
@media screen and (max-width: 1150px) {
|
||||
.leftImg{
|
||||
width: 450px !important;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1010px) {
|
||||
.leftImg{
|
||||
width: 380px !important;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 940px) {
|
||||
.leftImg{
|
||||
display: block;
|
||||
width: 260px !important;
|
||||
margin: 0 auto !important;
|
||||
}
|
||||
}
|
||||
$dark_gray:#D1DFE8;
|
||||
|
||||
.login-container {
|
||||
height: 100%;
|
||||
// background: url('~@/assets/login/bg1.jpg') no-repeat;
|
||||
background-color: #EBEBEA;
|
||||
background-position: 0 0;
|
||||
background-size: 62% 100%;
|
||||
text-align: center;
|
||||
&:before{
|
||||
// content: '';
|
||||
display: inline-block;
|
||||
// height: 100%; //or the input will be in new line
|
||||
vertical-align: middle;
|
||||
}
|
||||
.content{
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
> img{
|
||||
width: 568px;
|
||||
margin-right: 150px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.login-form{
|
||||
display: inline-block;
|
||||
width: 400px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.svg-container {
|
||||
color: $dark_gray;
|
||||
vertical-align: middle;
|
||||
width: 33px;
|
||||
display: inline-block;
|
||||
font-size: 22px;
|
||||
&_login {
|
||||
font-size: 31px;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 26px;
|
||||
font-weight: 400;
|
||||
color: #4452D5;
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
}
|
||||
.tips{
|
||||
color: #959595;
|
||||
font-size: 14px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 40px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.show-pwd {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 7px;
|
||||
font-size: 16px;
|
||||
color: $dark_gray;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.left-panel {
|
||||
background-image: url('/img/login-bg.png');
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
.right-panel {
|
||||
/* background-image: url('../../assets/login/矩形.png'); */
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
padding-top:20%;
|
||||
position:absolute;
|
||||
left:50%;
|
||||
top:50%;
|
||||
transform: translate(-50%,-50%);
|
||||
width:536px;
|
||||
height: 561px;
|
||||
}
|
||||
|
||||
.header-logo{
|
||||
position:absolute;
|
||||
top:12%;
|
||||
left:8%;
|
||||
}
|
||||
.header-logo .image {
|
||||
width: 41px;
|
||||
height: 41px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.header-logo .image img {
|
||||
width: 41px;
|
||||
height: 41px;
|
||||
}
|
||||
|
||||
.header-logo .sys-title {
|
||||
float: right;
|
||||
line-height: 45px;
|
||||
margin-left: 15px;
|
||||
width: 308px;
|
||||
height: 23px;
|
||||
font-size: 18px;
|
||||
font-family: Adobe Heiti Std;
|
||||
font-weight: normal;
|
||||
color: #7C7C7C;
|
||||
}
|
||||
.input-wrapper {
|
||||
float: left;
|
||||
width: 448px;
|
||||
height: 56px;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 1px 1px 0px rgba(158, 168, 184, 0.5);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.label {
|
||||
float: left;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.u-input {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 5px 0;
|
||||
color: #555;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
width: 390px;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
width: 448px;
|
||||
height: 56px;
|
||||
background: #0088FF;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.login-btn::after {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: "";
|
||||
border: 2px solid rgb(255, 255, 255);
|
||||
z-index: 2;
|
||||
margin: 0px;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
border-top-width: 2px;
|
||||
transition: border-top-width 0.1s ease 0.2s, height 0.2s ease 0.1s, width 0.2s ease 0s, margin 0.2s ease 0s;
|
||||
}
|
||||
|
||||
.login-btn:hover{
|
||||
opacity: 0.8;
|
||||
}
|
||||
.login-btn:hover::after {
|
||||
width: 60%;
|
||||
height: 0px;
|
||||
border-width: 0px 2px 2px;
|
||||
margin: 0px 20%;
|
||||
transition: border-top-width 0.1s ease 0s, height 0.2s ease 0.1s, width 0.2s ease 0.2s, margin 0.2s ease 0.2s;
|
||||
}
|
||||
|
||||
.login-btn .btn-txt {
|
||||
font-family: Source Han Sans CN;
|
||||
margin-left: 42%;
|
||||
color: #FFFFFF;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
border-radius: 50%;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.login-btn .btn-txt:hover{
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.left-txt {
|
||||
float:left;
|
||||
}
|
||||
|
||||
.left-txt span {
|
||||
width: 81px;
|
||||
height: 17px;
|
||||
font-size: 12px;
|
||||
font-family: Source Han Sans CN;
|
||||
color: #999999;
|
||||
line-height: 42px;
|
||||
}
|
||||
|
||||
.right-txt {
|
||||
float: right;
|
||||
margin-left: 250px;
|
||||
}
|
||||
|
||||
.right-txt .s1 {
|
||||
width: 81px;
|
||||
height: 17px;
|
||||
font-size: 12px;
|
||||
font-family: Source Han Sans CN;
|
||||
color: #999999;
|
||||
line-height: 42px;
|
||||
}
|
||||
|
||||
.right-txt .s2 {
|
||||
width: 81px;
|
||||
height: 17px;
|
||||
font-size: 12px;
|
||||
font-family: Source Han Sans CN;
|
||||
color: #2882FE;
|
||||
line-height: 42px;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.right-txt .s2:hover{
|
||||
color:#0F31AF;
|
||||
}
|
||||
|
||||
.comtxt {
|
||||
width: 190px;
|
||||
height: 16px;
|
||||
font-size: 12px;
|
||||
font-family: Source Han Sans CN;
|
||||
color: rgba(80, 80, 80, 0.6);
|
||||
line-height: 63px;
|
||||
position: absolute;
|
||||
bottom: 10%;
|
||||
right: 13%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,497 @@
|
|||
<template>
|
||||
|
||||
<div>
|
||||
<div class="left-panel">
|
||||
</div>
|
||||
<div class="right-panel">
|
||||
<el-form class="login-form" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm"
|
||||
label-position="left">
|
||||
<!-- <div class="header-logo">
|
||||
<div class="image">
|
||||
<img src="~@/assets/login/logo.png" alt="">
|
||||
</div>
|
||||
<div class="sys-title">
|
||||
临沂国家高新区数据资源平台
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
|
||||
|
||||
|
||||
<div style="top: 15%;left: 8%;position:absolute;">
|
||||
<div class="input-wrapper login-container">
|
||||
<label class="label">
|
||||
<img src="../../assets/login/yonghu.png">
|
||||
</label>
|
||||
<div>
|
||||
<el-input class="u-input" name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="请输入登录账号" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="top: 35%;left: 8%;position:absolute;">
|
||||
<div class="input-wrapper login-container">
|
||||
<label class="label">
|
||||
<img src="~@/assets/login/密码.png">
|
||||
</label>
|
||||
<div>
|
||||
<el-input class="u-input" name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password"
|
||||
autoComplete="on" placeholder="请输入密码"></el-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="top: 55%;left: 8%;position:absolute;">
|
||||
<el-button class="login-btn" v-waves type="primary" style="width:448px;background:#0088FF;border-radius: 10px;font-size: 24px;height: 50px;" :loading="loading" @click.native.prevent="handleLogin">
|
||||
登 录
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<div style="top: 76%;left: 10%;position:absolute;">
|
||||
<div class="left-txt">
|
||||
<span>忘记密码？</span>
|
||||
</div>
|
||||
<div class="right-txt">
|
||||
<span class="s1">还没有账号？</span><span class="s2">去注册</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tips" v-if="isIdentityAuth">
|
||||
<router-link to="/oidcRedirect">
|
||||
<el-badge is-dot>接口服务器启用了Oauth认证，请点击这里登录</el-badge>
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="comtxt">
|
||||
山东慧创信息科技有限公司
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import waves from '@/directive/waves' // 水波纹指令
|
||||
import {
|
||||
mapGetters,
|
||||
mapActions
|
||||
} from 'vuex'
|
||||
import { getMethodCommon } from '../../api/common'
|
||||
export default {
|
||||
name: 'login',
|
||||
directives: {
|
||||
waves
|
||||
},
|
||||
data() {
|
||||
const validateUsername = (rule, value, callback) => {
|
||||
if (value.length <= 0) {
|
||||
callback(new Error('用户名不能为空'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
const validatePass = (rule, value, callback) => {
|
||||
if (value.length <= 0) {
|
||||
callback(new Error('密码不能为空'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
return {
|
||||
tenant: this.tenantid || 'OpenAuthDBContext', //当前选择的租户
|
||||
tenants:[{
|
||||
value: 'OpenAuthDBContext',
|
||||
label: '默认租户'
|
||||
},{
|
||||
value: 'ErrorId404',
|
||||
label: '模拟一个不存在的租户'
|
||||
}],
|
||||
loginForm: {
|
||||
username:"",
|
||||
password:""
|
||||
},
|
||||
loginRules: {
|
||||
username: [{
|
||||
required: true,
|
||||
trigger: 'blur',
|
||||
validator: validateUsername
|
||||
}],
|
||||
password: [{
|
||||
required: true,
|
||||
trigger: 'blur',
|
||||
validator: validatePass
|
||||
}]
|
||||
},
|
||||
loading: false,
|
||||
pwdType: 'password'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'isIdentityAuth',
|
||||
'tenantid'
|
||||
])
|
||||
},
|
||||
|
||||
methods: {
|
||||
...mapActions([
|
||||
'setTenantId', //
|
||||
]),
|
||||
|
||||
tenantChange(e){
|
||||
this.setTenantId(e)
|
||||
},
|
||||
showPwd() {
|
||||
if (this.pwdType === 'password') {
|
||||
this.pwdType = ''
|
||||
} else {
|
||||
this.pwdType = 'password'
|
||||
}
|
||||
},
|
||||
handleLogin() {
|
||||
this.$refs.loginForm.validate(valid => {
|
||||
if (valid) {
|
||||
this.loading = true
|
||||
this.$store.dispatch('Login', this.loginForm).then(() => {
|
||||
getMethodCommon("/Check/GetRoles").then(res=>{
|
||||
if(res){
|
||||
if(res.result && res.result.length){
|
||||
res.result.forEach((item,index)=>{
|
||||
if(item.name == "任务下发"){
|
||||
localStorage.setItem("isTaskUser","true");
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
this.loading = false
|
||||
this.$router.push({
|
||||
path: '/home'
|
||||
})
|
||||
}).catch(() => {
|
||||
this.loading = false
|
||||
})
|
||||
} else {
|
||||
console.log('error submit!!')
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss">
|
||||
$bg:#2d3a4b;
|
||||
$light_gray:#eee;
|
||||
$color_balck: #333;
|
||||
|
||||
/* reset element-ui css */
|
||||
.login-container {
|
||||
.el-input {
|
||||
display: inline-block;
|
||||
height: 40px;
|
||||
width: 300px;
|
||||
input {
|
||||
background: transparent;
|
||||
border: 0px;
|
||||
-webkit-appearance: none;
|
||||
border-radius: 0px;
|
||||
padding: 5px 0;
|
||||
color: $color_balck;
|
||||
height: 40px;
|
||||
|
||||
&:-webkit-autofill {
|
||||
transition: background-color 5000s ease-in-out 0s;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-form-item {
|
||||
margin-bottom: 35px;
|
||||
border-radius: 5px;
|
||||
color: #454545;
|
||||
.el-form-item__content{
|
||||
background:#fff;
|
||||
border:1px solid rgba(223, 223, 223, 1);
|
||||
}
|
||||
&:last-child{
|
||||
padding-top: 20px;
|
||||
.el-form-item__content{
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
|
||||
@media screen and (max-width: 1150px) {
|
||||
.leftImg{
|
||||
width: 450px !important;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1010px) {
|
||||
.leftImg{
|
||||
width: 380px !important;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 940px) {
|
||||
.leftImg{
|
||||
display: block;
|
||||
width: 260px !important;
|
||||
margin: 0 auto !important;
|
||||
}
|
||||
}
|
||||
$dark_gray:#D1DFE8;
|
||||
|
||||
.login-container {
|
||||
height: 100%;
|
||||
// background: url('~@/assets/login/bg1.jpg') no-repeat;
|
||||
background-color: #EBEBEA;
|
||||
background-position: 0 0;
|
||||
background-size: 62% 100%;
|
||||
text-align: center;
|
||||
&:before{
|
||||
// content: '';
|
||||
display: inline-block;
|
||||
// height: 100%; //or the input will be in new line
|
||||
vertical-align: middle;
|
||||
}
|
||||
.content{
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
> img{
|
||||
width: 568px;
|
||||
margin-right: 150px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.login-form{
|
||||
display: inline-block;
|
||||
width: 400px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.svg-container {
|
||||
color: $dark_gray;
|
||||
vertical-align: middle;
|
||||
width: 33px;
|
||||
display: inline-block;
|
||||
font-size: 22px;
|
||||
&_login {
|
||||
font-size: 31px;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 26px;
|
||||
font-weight: 400;
|
||||
color: #4452D5;
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
}
|
||||
.tips{
|
||||
color: #959595;
|
||||
font-size: 14px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 40px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.show-pwd {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 7px;
|
||||
font-size: 16px;
|
||||
color: $dark_gray;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.left-panel {
|
||||
background-image: url('/img/login-bg.png');
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
.right-panel {
|
||||
/* background-image: url('../../assets/login/矩形.png'); */
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
padding-top:20%;
|
||||
position:absolute;
|
||||
left:50%;
|
||||
top:50%;
|
||||
transform: translate(-50%,-50%);
|
||||
width:536px;
|
||||
height: 561px;
|
||||
}
|
||||
|
||||
.header-logo{
|
||||
position:absolute;
|
||||
top:12%;
|
||||
left:8%;
|
||||
}
|
||||
.header-logo .image {
|
||||
width: 41px;
|
||||
height: 41px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.header-logo .image img {
|
||||
width: 41px;
|
||||
height: 41px;
|
||||
}
|
||||
|
||||
.header-logo .sys-title {
|
||||
float: right;
|
||||
line-height: 45px;
|
||||
margin-left: 15px;
|
||||
width: 308px;
|
||||
height: 23px;
|
||||
font-size: 18px;
|
||||
font-family: Adobe Heiti Std;
|
||||
font-weight: normal;
|
||||
color: #7C7C7C;
|
||||
}
|
||||
.input-wrapper {
|
||||
float: left;
|
||||
width: 448px;
|
||||
height: 56px;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 1px 1px 0px rgba(158, 168, 184, 0.5);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.label {
|
||||
float: left;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.u-input {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 5px 0;
|
||||
color: #555;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
width: 390px;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
width: 448px;
|
||||
height: 56px;
|
||||
background: #0088FF;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.login-btn::after {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: "";
|
||||
border: 2px solid rgb(255, 255, 255);
|
||||
z-index: 2;
|
||||
margin: 0px;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
border-top-width: 2px;
|
||||
transition: border-top-width 0.1s ease 0.2s, height 0.2s ease 0.1s, width 0.2s ease 0s, margin 0.2s ease 0s;
|
||||
}
|
||||
|
||||
.login-btn:hover{
|
||||
opacity: 0.8;
|
||||
}
|
||||
.login-btn:hover::after {
|
||||
width: 60%;
|
||||
height: 0px;
|
||||
border-width: 0px 2px 2px;
|
||||
margin: 0px 20%;
|
||||
transition: border-top-width 0.1s ease 0s, height 0.2s ease 0.1s, width 0.2s ease 0.2s, margin 0.2s ease 0.2s;
|
||||
}
|
||||
|
||||
.login-btn .btn-txt {
|
||||
font-family: Source Han Sans CN;
|
||||
margin-left: 42%;
|
||||
color: #FFFFFF;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
border-radius: 50%;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.login-btn .btn-txt:hover{
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.left-txt {
|
||||
float:left;
|
||||
}
|
||||
|
||||
.left-txt span {
|
||||
width: 81px;
|
||||
height: 17px;
|
||||
font-size: 12px;
|
||||
font-family: Source Han Sans CN;
|
||||
color: #999999;
|
||||
line-height: 42px;
|
||||
}
|
||||
|
||||
.right-txt {
|
||||
float: right;
|
||||
margin-left: 250px;
|
||||
}
|
||||
|
||||
.right-txt .s1 {
|
||||
width: 81px;
|
||||
height: 17px;
|
||||
font-size: 12px;
|
||||
font-family: Source Han Sans CN;
|
||||
color: #999999;
|
||||
line-height: 42px;
|
||||
}
|
||||
|
||||
.right-txt .s2 {
|
||||
width: 81px;
|
||||
height: 17px;
|
||||
font-size: 12px;
|
||||
font-family: Source Han Sans CN;
|
||||
color: #2882FE;
|
||||
line-height: 42px;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.right-txt .s2:hover{
|
||||
color:#0F31AF;
|
||||
}
|
||||
|
||||
.comtxt {
|
||||
width: 190px;
|
||||
height: 16px;
|
||||
font-size: 12px;
|
||||
font-family: Source Han Sans CN;
|
||||
color: rgba(80, 80, 80, 0.6);
|
||||
line-height: 63px;
|
||||
position: absolute;
|
||||
bottom: 10%;
|
||||
right: 13%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,497 @@
|
|||
<template>
|
||||
|
||||
<div>
|
||||
<div class="left-panel">
|
||||
</div>
|
||||
<div class="right-panel">
|
||||
<el-form class="login-form" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm"
|
||||
label-position="left">
|
||||
<!-- <div class="header-logo">
|
||||
<div class="image">
|
||||
<img src="~@/assets/login/logo.png" alt="">
|
||||
</div>
|
||||
<div class="sys-title">
|
||||
临沂国家高新区数据资源平台
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
|
||||
|
||||
|
||||
<div style="top: 15%;left: 8%;position:absolute;">
|
||||
<div class="input-wrapper login-container">
|
||||
<label class="label">
|
||||
<img src="../../assets/login/yonghu.png">
|
||||
</label>
|
||||
<div>
|
||||
<el-input class="u-input" name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="请输入登录账号" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="top: 35%;left: 8%;position:absolute;">
|
||||
<div class="input-wrapper login-container">
|
||||
<label class="label">
|
||||
<img src="~@/assets/login/密码.png">
|
||||
</label>
|
||||
<div>
|
||||
<el-input class="u-input" name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password"
|
||||
autoComplete="on" placeholder="请输入密码"></el-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="top: 55%;left: 8%;position:absolute;">
|
||||
<el-button class="login-btn" v-waves type="primary" style="width:448px;background:#0088FF;border-radius: 10px;font-size: 24px;height: 50px;" :loading="loading" @click.native.prevent="handleLogin">
|
||||
登 录
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<div style="top: 76%;left: 10%;position:absolute;">
|
||||
<div class="left-txt">
|
||||
<span>忘记密码？</span>
|
||||
</div>
|
||||
<div class="right-txt">
|
||||
<span class="s1">还没有账号？</span><span class="s2">去注册</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tips" v-if="isIdentityAuth">
|
||||
<router-link to="/oidcRedirect">
|
||||
<el-badge is-dot>接口服务器启用了Oauth认证，请点击这里登录</el-badge>
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="comtxt">
|
||||
山东慧创信息科技有限公司
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import waves from '@/directive/waves' // 水波纹指令
|
||||
import {
|
||||
mapGetters,
|
||||
mapActions
|
||||
} from 'vuex'
|
||||
import { getMethodCommon } from '../../api/common'
|
||||
export default {
|
||||
name: 'login',
|
||||
directives: {
|
||||
waves
|
||||
},
|
||||
data() {
|
||||
const validateUsername = (rule, value, callback) => {
|
||||
if (value.length <= 0) {
|
||||
callback(new Error('用户名不能为空'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
const validatePass = (rule, value, callback) => {
|
||||
if (value.length <= 0) {
|
||||
callback(new Error('密码不能为空'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
return {
|
||||
tenant: this.tenantid || 'OpenAuthDBContext', //当前选择的租户
|
||||
tenants:[{
|
||||
value: 'OpenAuthDBContext',
|
||||
label: '默认租户'
|
||||
},{
|
||||
value: 'ErrorId404',
|
||||
label: '模拟一个不存在的租户'
|
||||
}],
|
||||
loginForm: {
|
||||
username:"",
|
||||
password:""
|
||||
},
|
||||
loginRules: {
|
||||
username: [{
|
||||
required: true,
|
||||
trigger: 'blur',
|
||||
validator: validateUsername
|
||||
}],
|
||||
password: [{
|
||||
required: true,
|
||||
trigger: 'blur',
|
||||
validator: validatePass
|
||||
}]
|
||||
},
|
||||
loading: false,
|
||||
pwdType: 'password'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'isIdentityAuth',
|
||||
'tenantid'
|
||||
])
|
||||
},
|
||||
|
||||
methods: {
|
||||
...mapActions([
|
||||
'setTenantId', //
|
||||
]),
|
||||
|
||||
tenantChange(e){
|
||||
this.setTenantId(e)
|
||||
},
|
||||
showPwd() {
|
||||
if (this.pwdType === 'password') {
|
||||
this.pwdType = ''
|
||||
} else {
|
||||
this.pwdType = 'password'
|
||||
}
|
||||
},
|
||||
handleLogin() {
|
||||
this.$refs.loginForm.validate(valid => {
|
||||
if (valid) {
|
||||
this.loading = true
|
||||
this.$store.dispatch('Login', this.loginForm).then(() => {
|
||||
getMethodCommon("/Check/GetRoles").then(res=>{
|
||||
if(res){
|
||||
if(res.result && res.result.length){
|
||||
res.result.forEach((item,index)=>{
|
||||
if(item.name == "任务下发"){
|
||||
localStorage.setItem("isTaskUser","true");
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
this.loading = false
|
||||
this.$router.push({
|
||||
path: '/home'
|
||||
})
|
||||
}).catch(() => {
|
||||
this.loading = false
|
||||
})
|
||||
} else {
|
||||
console.log('error submit!!')
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss">
|
||||
$bg:#2d3a4b;
|
||||
$light_gray:#eee;
|
||||
$color_balck: #333;
|
||||
|
||||
/* reset element-ui css */
|
||||
.login-container {
|
||||
.el-input {
|
||||
display: inline-block;
|
||||
height: 40px;
|
||||
width: 300px;
|
||||
input {
|
||||
background: transparent;
|
||||
border: 0px;
|
||||
-webkit-appearance: none;
|
||||
border-radius: 0px;
|
||||
padding: 5px 0;
|
||||
color: $color_balck;
|
||||
height: 40px;
|
||||
|
||||
&:-webkit-autofill {
|
||||
transition: background-color 5000s ease-in-out 0s;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-form-item {
|
||||
margin-bottom: 35px;
|
||||
border-radius: 5px;
|
||||
color: #454545;
|
||||
.el-form-item__content{
|
||||
background:#fff;
|
||||
border:1px solid rgba(223, 223, 223, 1);
|
||||
}
|
||||
&:last-child{
|
||||
padding-top: 20px;
|
||||
.el-form-item__content{
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
|
||||
@media screen and (max-width: 1150px) {
|
||||
.leftImg{
|
||||
width: 450px !important;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1010px) {
|
||||
.leftImg{
|
||||
width: 380px !important;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 940px) {
|
||||
.leftImg{
|
||||
display: block;
|
||||
width: 260px !important;
|
||||
margin: 0 auto !important;
|
||||
}
|
||||
}
|
||||
$dark_gray:#D1DFE8;
|
||||
|
||||
.login-container {
|
||||
height: 100%;
|
||||
// background: url('~@/assets/login/bg1.jpg') no-repeat;
|
||||
background-color: #EBEBEA;
|
||||
background-position: 0 0;
|
||||
background-size: 62% 100%;
|
||||
text-align: center;
|
||||
&:before{
|
||||
// content: '';
|
||||
display: inline-block;
|
||||
// height: 100%; //or the input will be in new line
|
||||
vertical-align: middle;
|
||||
}
|
||||
.content{
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
> img{
|
||||
width: 568px;
|
||||
margin-right: 150px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.login-form{
|
||||
display: inline-block;
|
||||
width: 400px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.svg-container {
|
||||
color: $dark_gray;
|
||||
vertical-align: middle;
|
||||
width: 33px;
|
||||
display: inline-block;
|
||||
font-size: 22px;
|
||||
&_login {
|
||||
font-size: 31px;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 26px;
|
||||
font-weight: 400;
|
||||
color: #4452D5;
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
}
|
||||
.tips{
|
||||
color: #959595;
|
||||
font-size: 14px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 40px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.show-pwd {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 7px;
|
||||
font-size: 16px;
|
||||
color: $dark_gray;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.left-panel {
|
||||
background-image: url('/img/login-bg.png');
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
.right-panel {
|
||||
/* background-image: url('../../assets/login/矩形.png'); */
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
padding-top:20%;
|
||||
position:absolute;
|
||||
left:50%;
|
||||
top:50%;
|
||||
transform: translate(-50%,-50%);
|
||||
width:536px;
|
||||
height: 561px;
|
||||
}
|
||||
|
||||
.header-logo{
|
||||
position:absolute;
|
||||
top:12%;
|
||||
left:8%;
|
||||
}
|
||||
.header-logo .image {
|
||||
width: 41px;
|
||||
height: 41px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.header-logo .image img {
|
||||
width: 41px;
|
||||
height: 41px;
|
||||
}
|
||||
|
||||
.header-logo .sys-title {
|
||||
float: right;
|
||||
line-height: 45px;
|
||||
margin-left: 15px;
|
||||
width: 308px;
|
||||
height: 23px;
|
||||
font-size: 18px;
|
||||
font-family: Adobe Heiti Std;
|
||||
font-weight: normal;
|
||||
color: #7C7C7C;
|
||||
}
|
||||
.input-wrapper {
|
||||
float: left;
|
||||
width: 448px;
|
||||
height: 56px;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 1px 1px 0px rgba(158, 168, 184, 0.5);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.label {
|
||||
float: left;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.u-input {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 5px 0;
|
||||
color: #555;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
width: 390px;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
width: 448px;
|
||||
height: 56px;
|
||||
background: #0088FF;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.login-btn::after {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: "";
|
||||
border: 2px solid rgb(255, 255, 255);
|
||||
z-index: 2;
|
||||
margin: 0px;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
border-top-width: 2px;
|
||||
transition: border-top-width 0.1s ease 0.2s, height 0.2s ease 0.1s, width 0.2s ease 0s, margin 0.2s ease 0s;
|
||||
}
|
||||
|
||||
.login-btn:hover{
|
||||
opacity: 0.8;
|
||||
}
|
||||
.login-btn:hover::after {
|
||||
width: 60%;
|
||||
height: 0px;
|
||||
border-width: 0px 2px 2px;
|
||||
margin: 0px 20%;
|
||||
transition: border-top-width 0.1s ease 0s, height 0.2s ease 0.1s, width 0.2s ease 0.2s, margin 0.2s ease 0.2s;
|
||||
}
|
||||
|
||||
.login-btn .btn-txt {
|
||||
font-family: Source Han Sans CN;
|
||||
margin-left: 42%;
|
||||
color: #FFFFFF;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
border-radius: 50%;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.login-btn .btn-txt:hover{
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.left-txt {
|
||||
float:left;
|
||||
}
|
||||
|
||||
.left-txt span {
|
||||
width: 81px;
|
||||
height: 17px;
|
||||
font-size: 12px;
|
||||
font-family: Source Han Sans CN;
|
||||
color: #999999;
|
||||
line-height: 42px;
|
||||
}
|
||||
|
||||
.right-txt {
|
||||
float: right;
|
||||
margin-left: 250px;
|
||||
}
|
||||
|
||||
.right-txt .s1 {
|
||||
width: 81px;
|
||||
height: 17px;
|
||||
font-size: 12px;
|
||||
font-family: Source Han Sans CN;
|
||||
color: #999999;
|
||||
line-height: 42px;
|
||||
}
|
||||
|
||||
.right-txt .s2 {
|
||||
width: 81px;
|
||||
height: 17px;
|
||||
font-size: 12px;
|
||||
font-family: Source Han Sans CN;
|
||||
color: #2882FE;
|
||||
line-height: 42px;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.right-txt .s2:hover{
|
||||
color:#0F31AF;
|
||||
}
|
||||
|
||||
.comtxt {
|
||||
width: 190px;
|
||||
height: 16px;
|
||||
font-size: 12px;
|
||||
font-family: Source Han Sans CN;
|
||||
color: rgba(80, 80, 80, 0.6);
|
||||
line-height: 63px;
|
||||
position: absolute;
|
||||
bottom: 10%;
|
||||
right: 13%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,497 @@
|
|||
<template>
|
||||
|
||||
<div>
|
||||
<div class="left-panel">
|
||||
</div>
|
||||
<div class="right-panel">
|
||||
<el-form class="login-form" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm"
|
||||
label-position="left">
|
||||
<!-- <div class="header-logo">
|
||||
<div class="image">
|
||||
<img src="~@/assets/login/logo.png" alt="">
|
||||
</div>
|
||||
<div class="sys-title">
|
||||
临沂国家高新区数据资源平台
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
|
||||
|
||||
|
||||
<div style="top: 15%;left: 8%;position:absolute;">
|
||||
<div class="input-wrapper login-container">
|
||||
<label class="label">
|
||||
<img src="../../assets/login/yonghu.png">
|
||||
</label>
|
||||
<div>
|
||||
<el-input class="u-input" name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="请输入登录账号" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="top: 35%;left: 8%;position:absolute;">
|
||||
<div class="input-wrapper login-container">
|
||||
<label class="label">
|
||||
<img src="~@/assets/login/密码.png">
|
||||
</label>
|
||||
<div>
|
||||
<el-input class="u-input" name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password"
|
||||
autoComplete="on" placeholder="请输入密码"></el-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="top: 55%;left: 8%;position:absolute;">
|
||||
<el-button class="login-btn" v-waves type="primary" style="width:448px;background:#0088FF;border-radius: 10px;font-size: 24px;height: 50px;" :loading="loading" @click.native.prevent="handleLogin">
|
||||
登 录
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<div style="top: 76%;left: 10%;position:absolute;">
|
||||
<div class="left-txt">
|
||||
<span>忘记密码？</span>
|
||||
</div>
|
||||
<div class="right-txt">
|
||||
<span class="s1">还没有账号？</span><span class="s2">去注册</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tips" v-if="isIdentityAuth">
|
||||
<router-link to="/oidcRedirect">
|
||||
<el-badge is-dot>接口服务器启用了Oauth认证，请点击这里登录</el-badge>
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="comtxt">
|
||||
山东慧创信息科技有限公司
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import waves from '@/directive/waves' // 水波纹指令
|
||||
import {
|
||||
mapGetters,
|
||||
mapActions
|
||||
} from 'vuex'
|
||||
import { getMethodCommon } from '../../api/common'
|
||||
export default {
|
||||
name: 'login',
|
||||
directives: {
|
||||
waves
|
||||
},
|
||||
data() {
|
||||
const validateUsername = (rule, value, callback) => {
|
||||
if (value.length <= 0) {
|
||||
callback(new Error('用户名不能为空'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
const validatePass = (rule, value, callback) => {
|
||||
if (value.length <= 0) {
|
||||
callback(new Error('密码不能为空'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
return {
|
||||
tenant: this.tenantid || 'OpenAuthDBContext', //当前选择的租户
|
||||
tenants:[{
|
||||
value: 'OpenAuthDBContext',
|
||||
label: '默认租户'
|
||||
},{
|
||||
value: 'ErrorId404',
|
||||
label: '模拟一个不存在的租户'
|
||||
}],
|
||||
loginForm: {
|
||||
username:"",
|
||||
password:""
|
||||
},
|
||||
loginRules: {
|
||||
username: [{
|
||||
required: true,
|
||||
trigger: 'blur',
|
||||
validator: validateUsername
|
||||
}],
|
||||
password: [{
|
||||
required: true,
|
||||
trigger: 'blur',
|
||||
validator: validatePass
|
||||
}]
|
||||
},
|
||||
loading: false,
|
||||
pwdType: 'password'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'isIdentityAuth',
|
||||
'tenantid'
|
||||
])
|
||||
},
|
||||
|
||||
methods: {
|
||||
...mapActions([
|
||||
'setTenantId', //
|
||||
]),
|
||||
|
||||
tenantChange(e){
|
||||
this.setTenantId(e)
|
||||
},
|
||||
showPwd() {
|
||||
if (this.pwdType === 'password') {
|
||||
this.pwdType = ''
|
||||
} else {
|
||||
this.pwdType = 'password'
|
||||
}
|
||||
},
|
||||
handleLogin() {
|
||||
this.$refs.loginForm.validate(valid => {
|
||||
if (valid) {
|
||||
this.loading = true
|
||||
this.$store.dispatch('Login', this.loginForm).then(() => {
|
||||
getMethodCommon("/Check/GetRoles").then(res=>{
|
||||
if(res){
|
||||
if(res.result && res.result.length){
|
||||
res.result.forEach((item,index)=>{
|
||||
if(item.name == "任务下发"){
|
||||
localStorage.setItem("isTaskUser","true");
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
this.loading = false
|
||||
this.$router.push({
|
||||
path: '/home'
|
||||
})
|
||||
}).catch(() => {
|
||||
this.loading = false
|
||||
})
|
||||
} else {
|
||||
console.log('error submit!!')
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss">
|
||||
$bg:#2d3a4b;
|
||||
$light_gray:#eee;
|
||||
$color_balck: #333;
|
||||
|
||||
/* reset element-ui css */
|
||||
.login-container {
|
||||
.el-input {
|
||||
display: inline-block;
|
||||
height: 40px;
|
||||
width: 300px;
|
||||
input {
|
||||
background: transparent;
|
||||
border: 0px;
|
||||
-webkit-appearance: none;
|
||||
border-radius: 0px;
|
||||
padding: 5px 0;
|
||||
color: $color_balck;
|
||||
height: 40px;
|
||||
|
||||
&:-webkit-autofill {
|
||||
transition: background-color 5000s ease-in-out 0s;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-form-item {
|
||||
margin-bottom: 35px;
|
||||
border-radius: 5px;
|
||||
color: #454545;
|
||||
.el-form-item__content{
|
||||
background:#fff;
|
||||
border:1px solid rgba(223, 223, 223, 1);
|
||||
}
|
||||
&:last-child{
|
||||
padding-top: 20px;
|
||||
.el-form-item__content{
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
|
||||
@media screen and (max-width: 1150px) {
|
||||
.leftImg{
|
||||
width: 450px !important;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1010px) {
|
||||
.leftImg{
|
||||
width: 380px !important;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 940px) {
|
||||
.leftImg{
|
||||
display: block;
|
||||
width: 260px !important;
|
||||
margin: 0 auto !important;
|
||||
}
|
||||
}
|
||||
$dark_gray:#D1DFE8;
|
||||
|
||||
.login-container {
|
||||
height: 100%;
|
||||
// background: url('~@/assets/login/bg1.jpg') no-repeat;
|
||||
background-color: #EBEBEA;
|
||||
background-position: 0 0;
|
||||
background-size: 62% 100%;
|
||||
text-align: center;
|
||||
&:before{
|
||||
// content: '';
|
||||
display: inline-block;
|
||||
// height: 100%; //or the input will be in new line
|
||||
vertical-align: middle;
|
||||
}
|
||||
.content{
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
> img{
|
||||
width: 568px;
|
||||
margin-right: 150px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.login-form{
|
||||
display: inline-block;
|
||||
width: 400px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.svg-container {
|
||||
color: $dark_gray;
|
||||
vertical-align: middle;
|
||||
width: 33px;
|
||||
display: inline-block;
|
||||
font-size: 22px;
|
||||
&_login {
|
||||
font-size: 31px;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 26px;
|
||||
font-weight: 400;
|
||||
color: #4452D5;
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
}
|
||||
.tips{
|
||||
color: #959595;
|
||||
font-size: 14px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 40px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.show-pwd {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 7px;
|
||||
font-size: 16px;
|
||||
color: $dark_gray;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.left-panel {
|
||||
background-image: url('/img/login-bg.png');
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
.right-panel {
|
||||
/* background-image: url('../../assets/login/矩形.png'); */
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
padding-top:20%;
|
||||
position:absolute;
|
||||
left:50%;
|
||||
top:50%;
|
||||
transform: translate(-50%,-50%);
|
||||
width:536px;
|
||||
height: 561px;
|
||||
}
|
||||
|
||||
.header-logo{
|
||||
position:absolute;
|
||||
top:12%;
|
||||
left:8%;
|
||||
}
|
||||
.header-logo .image {
|
||||
width: 41px;
|
||||
height: 41px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.header-logo .image img {
|
||||
width: 41px;
|
||||
height: 41px;
|
||||
}
|
||||
|
||||
.header-logo .sys-title {
|
||||
float: right;
|
||||
line-height: 45px;
|
||||
margin-left: 15px;
|
||||
width: 308px;
|
||||
height: 23px;
|
||||
font-size: 18px;
|
||||
font-family: Adobe Heiti Std;
|
||||
font-weight: normal;
|
||||
color: #7C7C7C;
|
||||
}
|
||||
.input-wrapper {
|
||||
float: left;
|
||||
width: 448px;
|
||||
height: 56px;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 1px 1px 0px rgba(158, 168, 184, 0.5);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.label {
|
||||
float: left;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.u-input {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 5px 0;
|
||||
color: #555;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
width: 390px;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
width: 448px;
|
||||
height: 56px;
|
||||
background: #0088FF;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.login-btn::after {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: "";
|
||||
border: 2px solid rgb(255, 255, 255);
|
||||
z-index: 2;
|
||||
margin: 0px;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
border-top-width: 2px;
|
||||
transition: border-top-width 0.1s ease 0.2s, height 0.2s ease 0.1s, width 0.2s ease 0s, margin 0.2s ease 0s;
|
||||
}
|
||||
|
||||
.login-btn:hover{
|
||||
opacity: 0.8;
|
||||
}
|
||||
.login-btn:hover::after {
|
||||
width: 60%;
|
||||
height: 0px;
|
||||
border-width: 0px 2px 2px;
|
||||
margin: 0px 20%;
|
||||
transition: border-top-width 0.1s ease 0s, height 0.2s ease 0.1s, width 0.2s ease 0.2s, margin 0.2s ease 0.2s;
|
||||
}
|
||||
|
||||
.login-btn .btn-txt {
|
||||
font-family: Source Han Sans CN;
|
||||
margin-left: 42%;
|
||||
color: #FFFFFF;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
border-radius: 50%;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.login-btn .btn-txt:hover{
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.left-txt {
|
||||
float:left;
|
||||
}
|
||||
|
||||
.left-txt span {
|
||||
width: 81px;
|
||||
height: 17px;
|
||||
font-size: 12px;
|
||||
font-family: Source Han Sans CN;
|
||||
color: #999999;
|
||||
line-height: 42px;
|
||||
}
|
||||
|
||||
.right-txt {
|
||||
float: right;
|
||||
margin-left: 250px;
|
||||
}
|
||||
|
||||
.right-txt .s1 {
|
||||
width: 81px;
|
||||
height: 17px;
|
||||
font-size: 12px;
|
||||
font-family: Source Han Sans CN;
|
||||
color: #999999;
|
||||
line-height: 42px;
|
||||
}
|
||||
|
||||
.right-txt .s2 {
|
||||
width: 81px;
|
||||
height: 17px;
|
||||
font-size: 12px;
|
||||
font-family: Source Han Sans CN;
|
||||
color: #2882FE;
|
||||
line-height: 42px;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.right-txt .s2:hover{
|
||||
color:#0F31AF;
|
||||
}
|
||||
|
||||
.comtxt {
|
||||
width: 190px;
|
||||
height: 16px;
|
||||
font-size: 12px;
|
||||
font-family: Source Han Sans CN;
|
||||
color: rgba(80, 80, 80, 0.6);
|
||||
line-height: 63px;
|
||||
position: absolute;
|
||||
bottom: 10%;
|
||||
right: 13%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,497 @@
|
|||
<template>
|
||||
|
||||
<div>
|
||||
<div class="left-panel">
|
||||
</div>
|
||||
<div class="right-panel">
|
||||
<el-form class="login-form" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm"
|
||||
label-position="left">
|
||||
<!-- <div class="header-logo">
|
||||
<div class="image">
|
||||
<img src="~@/assets/login/logo.png" alt="">
|
||||
</div>
|
||||
<div class="sys-title">
|
||||
临沂国家高新区数据资源平台
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
|
||||
|
||||
|
||||
<div style="top: 15%;left: 8%;position:absolute;">
|
||||
<div class="input-wrapper login-container">
|
||||
<label class="label">
|
||||
<img src="../../assets/login/yonghu.png">
|
||||
</label>
|
||||
<div>
|
||||
<el-input class="u-input" name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="请输入登录账号" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="top: 35%;left: 8%;position:absolute;">
|
||||
<div class="input-wrapper login-container">
|
||||
<label class="label">
|
||||
<img src="~@/assets/login/密码.png">
|
||||
</label>
|
||||
<div>
|
||||
<el-input class="u-input" name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password"
|
||||
autoComplete="on" placeholder="请输入密码"></el-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="top: 55%;left: 8%;position:absolute;">
|
||||
<el-button class="login-btn" v-waves type="primary" style="width:448px;background:#0088FF;border-radius: 10px;font-size: 24px;height: 50px;" :loading="loading" @click.native.prevent="handleLogin">
|
||||
登 录
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<div style="top: 76%;left: 10%;position:absolute;">
|
||||
<div class="left-txt">
|
||||
<span>忘记密码？</span>
|
||||
</div>
|
||||
<div class="right-txt">
|
||||
<span class="s1">还没有账号？</span><span class="s2">去注册</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tips" v-if="isIdentityAuth">
|
||||
<router-link to="/oidcRedirect">
|
||||
<el-badge is-dot>接口服务器启用了Oauth认证，请点击这里登录</el-badge>
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="comtxt">
|
||||
山东慧创信息科技有限公司
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import waves from '@/directive/waves' // 水波纹指令
|
||||
import {
|
||||
mapGetters,
|
||||
mapActions
|
||||
} from 'vuex'
|
||||
import { getMethodCommon } from '../../api/common'
|
||||
export default {
|
||||
name: 'login',
|
||||
directives: {
|
||||
waves
|
||||
},
|
||||
data() {
|
||||
const validateUsername = (rule, value, callback) => {
|
||||
if (value.length <= 0) {
|
||||
callback(new Error('用户名不能为空'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
const validatePass = (rule, value, callback) => {
|
||||
if (value.length <= 0) {
|
||||
callback(new Error('密码不能为空'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
return {
|
||||
tenant: this.tenantid || 'OpenAuthDBContext', //当前选择的租户
|
||||
tenants:[{
|
||||
value: 'OpenAuthDBContext',
|
||||
label: '默认租户'
|
||||
},{
|
||||
value: 'ErrorId404',
|
||||
label: '模拟一个不存在的租户'
|
||||
}],
|
||||
loginForm: {
|
||||
username:"",
|
||||
password:""
|
||||
},
|
||||
loginRules: {
|
||||
username: [{
|
||||
required: true,
|
||||
trigger: 'blur',
|
||||
validator: validateUsername
|
||||
}],
|
||||
password: [{
|
||||
required: true,
|
||||
trigger: 'blur',
|
||||
validator: validatePass
|
||||
}]
|
||||
},
|
||||
loading: false,
|
||||
pwdType: 'password'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'isIdentityAuth',
|
||||
'tenantid'
|
||||
])
|
||||
},
|
||||
|
||||
methods: {
|
||||
...mapActions([
|
||||
'setTenantId', //
|
||||
]),
|
||||
|
||||
tenantChange(e){
|
||||
this.setTenantId(e)
|
||||
},
|
||||
showPwd() {
|
||||
if (this.pwdType === 'password') {
|
||||
this.pwdType = ''
|
||||
} else {
|
||||
this.pwdType = 'password'
|
||||
}
|
||||
},
|
||||
handleLogin() {
|
||||
this.$refs.loginForm.validate(valid => {
|
||||
if (valid) {
|
||||
this.loading = true
|
||||
this.$store.dispatch('Login', this.loginForm).then(() => {
|
||||
getMethodCommon("/Check/GetRoles").then(res=>{
|
||||
if(res){
|
||||
if(res.result && res.result.length){
|
||||
res.result.forEach((item,index)=>{
|
||||
if(item.name == "任务下发"){
|
||||
localStorage.setItem("isTaskUser","true");
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
this.loading = false
|
||||
this.$router.push({
|
||||
path: '/home'
|
||||
})
|
||||
}).catch(() => {
|
||||
this.loading = false
|
||||
})
|
||||
} else {
|
||||
console.log('error submit!!')
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss">
|
||||
$bg:#2d3a4b;
|
||||
$light_gray:#eee;
|
||||
$color_balck: #333;
|
||||
|
||||
/* reset element-ui css */
|
||||
.login-container {
|
||||
.el-input {
|
||||
display: inline-block;
|
||||
height: 40px;
|
||||
width: 300px;
|
||||
input {
|
||||
background: transparent;
|
||||
border: 0px;
|
||||
-webkit-appearance: none;
|
||||
border-radius: 0px;
|
||||
padding: 5px 0;
|
||||
color: $color_balck;
|
||||
height: 40px;
|
||||
|
||||
&:-webkit-autofill {
|
||||
transition: background-color 5000s ease-in-out 0s;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-form-item {
|
||||
margin-bottom: 35px;
|
||||
border-radius: 5px;
|
||||
color: #454545;
|
||||
.el-form-item__content{
|
||||
background:#fff;
|
||||
border:1px solid rgba(223, 223, 223, 1);
|
||||
}
|
||||
&:last-child{
|
||||
padding-top: 20px;
|
||||
.el-form-item__content{
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
|
||||
@media screen and (max-width: 1150px) {
|
||||
.leftImg{
|
||||
width: 450px !important;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1010px) {
|
||||
.leftImg{
|
||||
width: 380px !important;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 940px) {
|
||||
.leftImg{
|
||||
display: block;
|
||||
width: 260px !important;
|
||||
margin: 0 auto !important;
|
||||
}
|
||||
}
|
||||
$dark_gray:#D1DFE8;
|
||||
|
||||
.login-container {
|
||||
height: 100%;
|
||||
// background: url('~@/assets/login/bg1.jpg') no-repeat;
|
||||
background-color: #EBEBEA;
|
||||
background-position: 0 0;
|
||||
background-size: 62% 100%;
|
||||
text-align: center;
|
||||
&:before{
|
||||
// content: '';
|
||||
display: inline-block;
|
||||
// height: 100%; //or the input will be in new line
|
||||
vertical-align: middle;
|
||||
}
|
||||
.content{
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
> img{
|
||||
width: 568px;
|
||||
margin-right: 150px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.login-form{
|
||||
display: inline-block;
|
||||
width: 400px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.svg-container {
|
||||
color: $dark_gray;
|
||||
vertical-align: middle;
|
||||
width: 33px;
|
||||
display: inline-block;
|
||||
font-size: 22px;
|
||||
&_login {
|
||||
font-size: 31px;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 26px;
|
||||
font-weight: 400;
|
||||
color: #4452D5;
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
}
|
||||
.tips{
|
||||
color: #959595;
|
||||
font-size: 14px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 40px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.show-pwd {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 7px;
|
||||
font-size: 16px;
|
||||
color: $dark_gray;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.left-panel {
|
||||
background-image: url('/img/login-bg.png');
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
.right-panel {
|
||||
/* background-image: url('../../assets/login/矩形.png'); */
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
padding-top:20%;
|
||||
position:absolute;
|
||||
left:50%;
|
||||
top:50%;
|
||||
transform: translate(-50%,-50%);
|
||||
width:536px;
|
||||
height: 561px;
|
||||
}
|
||||
|
||||
.header-logo{
|
||||
position:absolute;
|
||||
top:12%;
|
||||
left:8%;
|
||||
}
|
||||
.header-logo .image {
|
||||
width: 41px;
|
||||
height: 41px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.header-logo .image img {
|
||||
width: 41px;
|
||||
height: 41px;
|
||||
}
|
||||
|
||||
.header-logo .sys-title {
|
||||
float: right;
|
||||
line-height: 45px;
|
||||
margin-left: 15px;
|
||||
width: 308px;
|
||||
height: 23px;
|
||||
font-size: 18px;
|
||||
font-family: Adobe Heiti Std;
|
||||
font-weight: normal;
|
||||
color: #7C7C7C;
|
||||
}
|
||||
.input-wrapper {
|
||||
float: left;
|
||||
width: 448px;
|
||||
height: 56px;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 1px 1px 0px rgba(158, 168, 184, 0.5);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.label {
|
||||
float: left;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.u-input {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 5px 0;
|
||||
color: #555;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
width: 390px;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
width: 448px;
|
||||
height: 56px;
|
||||
background: #0088FF;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.login-btn::after {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: "";
|
||||
border: 2px solid rgb(255, 255, 255);
|
||||
z-index: 2;
|
||||
margin: 0px;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
border-top-width: 2px;
|
||||
transition: border-top-width 0.1s ease 0.2s, height 0.2s ease 0.1s, width 0.2s ease 0s, margin 0.2s ease 0s;
|
||||
}
|
||||
|
||||
.login-btn:hover{
|
||||
opacity: 0.8;
|
||||
}
|
||||
.login-btn:hover::after {
|
||||
width: 60%;
|
||||
height: 0px;
|
||||
border-width: 0px 2px 2px;
|
||||
margin: 0px 20%;
|
||||
transition: border-top-width 0.1s ease 0s, height 0.2s ease 0.1s, width 0.2s ease 0.2s, margin 0.2s ease 0.2s;
|
||||
}
|
||||
|
||||
.login-btn .btn-txt {
|
||||
font-family: Source Han Sans CN;
|
||||
margin-left: 42%;
|
||||
color: #FFFFFF;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
border-radius: 50%;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.login-btn .btn-txt:hover{
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.left-txt {
|
||||
float:left;
|
||||
}
|
||||
|
||||
.left-txt span {
|
||||
width: 81px;
|
||||
height: 17px;
|
||||
font-size: 12px;
|
||||
font-family: Source Han Sans CN;
|
||||
color: #999999;
|
||||
line-height: 42px;
|
||||
}
|
||||
|
||||
.right-txt {
|
||||
float: right;
|
||||
margin-left: 250px;
|
||||
}
|
||||
|
||||
.right-txt .s1 {
|
||||
width: 81px;
|
||||
height: 17px;
|
||||
font-size: 12px;
|
||||
font-family: Source Han Sans CN;
|
||||
color: #999999;
|
||||
line-height: 42px;
|
||||
}
|
||||
|
||||
.right-txt .s2 {
|
||||
width: 81px;
|
||||
height: 17px;
|
||||
font-size: 12px;
|
||||
font-family: Source Han Sans CN;
|
||||
color: #2882FE;
|
||||
line-height: 42px;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.right-txt .s2:hover{
|
||||
color:#0F31AF;
|
||||
}
|
||||
|
||||
.comtxt {
|
||||
width: 190px;
|
||||
height: 16px;
|
||||
font-size: 12px;
|
||||
font-family: Source Han Sans CN;
|
||||
color: rgba(80, 80, 80, 0.6);
|
||||
line-height: 63px;
|
||||
position: absolute;
|
||||
bottom: 10%;
|
||||
right: 13%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
"gaodeApi": "4f992c089f9496201f6e4ea39ff3ab60",
|
||||
|
||||
"pingyixian":{
|
||||
"appname":"平邑县森林火灾指挥调度系统",
|
||||
"appname":"平邑县森林防火指挥调度系统",
|
||||
"area":"平邑县",
|
||||
"baseUrl":"http://111.17.207.220:9001",
|
||||
"layerurl":"http://111.17.207.220:9006/applicationMars/getApplicationInfo/pingyixian",
|
||||
|
|
|
|||
|
|
@ -148,8 +148,8 @@
|
|||
"pid": 10,
|
||||
"name": "最新高清影像",
|
||||
"type": "wms",
|
||||
"url": "https://fx.hopetrytech.com:7005/geoserver/PY/wms",
|
||||
"layers": "PY:yingxiang",
|
||||
"url": "http://fx.hopetrytech.com:9007/geoserver/pingyi/wms",
|
||||
"layers": "pingyi:pingyigaoqingyingxiang",
|
||||
"crs": "EPSG:4326",
|
||||
"parameters": {
|
||||
"transparent": "true",
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 99 KiB After Width: | Height: | Size: 126 KiB |
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 860 B |
Binary file not shown.
|
After Width: | Height: | Size: 889 B |
Binary file not shown.
|
After Width: | Height: | Size: 950 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 980 B |
Binary file not shown.
|
After Width: | Height: | Size: 689 B |
Binary file not shown.
|
After Width: | Height: | Size: 800 B |
Binary file not shown.
|
After Width: | Height: | Size: 619 B |
Binary file not shown.
|
After Width: | Height: | Size: 771 B |
Binary file not shown.
|
After Width: | Height: | Size: 882 B |
|
|
@ -6,7 +6,7 @@
|
|||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<meta name="author" content="山东慧创 http://www.hopetrytech.com ">
|
||||
<link rel="icon" href="<%= BASE_URL %>sitelogo.jpg">
|
||||
<title>平邑县森林火灾指挥调度系统</title>
|
||||
<title>平邑县森林防火指挥调度系统</title>
|
||||
<style>
|
||||
.popup-container{
|
||||
text-align:left;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
|
||||
<div class="dashboard-container">
|
||||
<h1>平邑县森林火灾指挥调度系统管理后台</h1>
|
||||
<h1>平邑县森林防火指挥调度系统管理后台</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -370,7 +370,6 @@
|
|||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- 在线人员弹窗 -->
|
||||
<div class="onlineuser-box" v-show="onlineuserBoxShow" v-drag >
|
||||
<div class="onlineuser-box-close-button" @click="onlineuserBoxShow = false">
|
||||
|
|
@ -431,6 +430,9 @@ import videoConfig from "./lib/videoConfig.json";
|
|||
import {compareArray} from './lib/compareArray.js'
|
||||
import OnLineUser from './widget/onlineuserbox.vue'
|
||||
|
||||
// 天气
|
||||
import {getWeather,getWindDegree} from './lib/getWeather'
|
||||
|
||||
let BASE_URL = process.env.VUE_APP_BASE_API;
|
||||
export default {
|
||||
name: "business",
|
||||
|
|
@ -1153,7 +1155,7 @@ export default {
|
|||
|
||||
// 地图鼠标右键菜单
|
||||
let mapContextmenuItems = [];
|
||||
if (localStorage.getItem("unitName") == "null" || localStorage.getItem("unitName") == "undefined") {
|
||||
if (localStorage.getItem("isTaskUser") == "true") {
|
||||
mapContextmenuItems = [
|
||||
{
|
||||
text: "设为火点",
|
||||
|
|
@ -1330,6 +1332,25 @@ export default {
|
|||
// this.setVisibleShow = true
|
||||
// }
|
||||
// }
|
||||
{
|
||||
text: "气象信息",
|
||||
show: function (e) {
|
||||
return Cesium.defined(e.cartesian);
|
||||
},
|
||||
callback: (e) => {
|
||||
const mpt = mars3d.LngLatPoint.fromCartesian(e.cartesian)
|
||||
let position = {
|
||||
lng: mpt._lng,
|
||||
lat: mpt._lat,
|
||||
};
|
||||
getWeather().then((res)=>{
|
||||
if(res){
|
||||
res.position = [mpt._lng,mpt._lat];
|
||||
_self.handlerAddWeatherGraphic(res);
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
|
@ -1609,6 +1630,93 @@ export default {
|
|||
this.HKmonitorboxShow = true;
|
||||
}
|
||||
},
|
||||
// 添加气象信息图斑
|
||||
handlerAddWeatherGraphic(info){
|
||||
if(this.weatherGraphicLayer==null){
|
||||
this.weatherGraphicLayer = new mars3d.layer.GraphicLayer()
|
||||
window.globalmap.addLayer(this.weatherGraphicLayer)
|
||||
// 绑定点击事件，用于删除图标
|
||||
let _this = this;
|
||||
this.weatherGraphicLayer.bindContextMenu([
|
||||
{
|
||||
text: "删除",
|
||||
icon: "fa fa-trash-o",
|
||||
show: (event) => {
|
||||
const graphic = event.graphic
|
||||
if (!graphic || graphic.isDestroy) {
|
||||
return false
|
||||
} else {
|
||||
return true
|
||||
}
|
||||
},
|
||||
callback: (e) => {
|
||||
const graphic = e.graphic
|
||||
if (!graphic) {
|
||||
return
|
||||
}
|
||||
const parent = graphic.parent // 右击是编辑点时
|
||||
|
||||
let graphic_wind_info = _this.weatherGraphicLayer.getGraphicById(graphic.id+"_info");
|
||||
console.log("graphic_wind_info",graphic_wind_info);
|
||||
_this.weatherGraphicLayer.removeGraphic(graphic_wind_info);
|
||||
|
||||
|
||||
_this.weatherGraphicLayer.removeGraphic(graphic)
|
||||
if (parent) {
|
||||
_this.weatherGraphicLayer.removeGraphic(parent)
|
||||
}
|
||||
}
|
||||
}
|
||||
])
|
||||
}
|
||||
|
||||
let uuid = (Math.random()*10000000).toFixed(0);
|
||||
|
||||
let graphic_wind = new mars3d.graphic.RectanglePrimitive({
|
||||
id:"graphic_wind_"+uuid,
|
||||
positions: [
|
||||
info.position,
|
||||
[info.position[0]-0.001, info.position[1]-0.001],
|
||||
],
|
||||
offsetHeight:100,
|
||||
style: {
|
||||
materialType: mars3d.MaterialType.Image,
|
||||
materialOptions: {
|
||||
image:"/img/weather_icon/wind_three.png",
|
||||
font_size: 70,
|
||||
color: new Cesium.Color(1.0, 1.0, 0.0, 1.0),
|
||||
stroke: true,
|
||||
strokeWidth: 10,
|
||||
strokeColor: new Cesium.Color(1.0, 1.0, 1.0, 0.8)
|
||||
},
|
||||
rotationDegree:getWindDegree(info.win),
|
||||
clampToGround: true
|
||||
},
|
||||
attr: { remark: "示例4" }
|
||||
})
|
||||
|
||||
|
||||
let graphic = new mars3d.graphic.DivGraphic({
|
||||
id:"graphic_wind_"+uuid+"_info",
|
||||
position: info.position,
|
||||
style: {
|
||||
html: `<h1 style="color:#eee;font-size:14px;">
|
||||
<img src="/img/weather_icon/${info.wea_img}.png" style="width:24px;height:24px;" />
|
||||
${info.win},${info.win_speed},${info.win_meter}</h1>`,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
|
||||
disableDepthTestDistance:Number.POSITIVE_INFINITY,
|
||||
clampToGround: true,
|
||||
eyeOffset:new Cesium.Cartesian3(0, 0, -5000),
|
||||
},
|
||||
attr: { remark: "示例9" },
|
||||
pointerEvents: false // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
|
||||
})
|
||||
this.weatherGraphicLayer.addGraphic(graphic);
|
||||
this.weatherGraphicLayer.addGraphic(graphic_wind);
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,54 @@
|
|||
import axios from 'axios'
|
||||
|
||||
export const getWeather = ()=>{
|
||||
return new Promise((resolve,reject)=>{
|
||||
try{
|
||||
// 易客云天气API http://yiketianqi.com/
|
||||
axios({
|
||||
method: 'get',
|
||||
// url: `http://v0.yiketianqi.com/api?unescape=1&version=v63&appid=88136471&appsecret=Hw4GLOcA&city=临沂`,
|
||||
url:"http://v1.yiketianqi.com/api?unescape=1&version=v61&appid=55972896&appsecret=jUb3vKAh&city=平邑",
|
||||
}).then((res) => {
|
||||
resolve(res.data);
|
||||
}).catch(e=>{
|
||||
reject(null);
|
||||
});
|
||||
}catch(e){
|
||||
reject(null);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export const getWindDegree = (type)=>{
|
||||
let degree = 0;
|
||||
switch(type){
|
||||
case "东风":
|
||||
degree = 90;
|
||||
break;
|
||||
case "南风":
|
||||
degree = 0;
|
||||
break;
|
||||
case "西风":
|
||||
degree = 270;
|
||||
break;
|
||||
case "北风":
|
||||
degree = 180;
|
||||
break;
|
||||
case "东北风":
|
||||
degree = 135;
|
||||
break;
|
||||
case "东南风":
|
||||
degree = 45;
|
||||
break;
|
||||
case "西北风":
|
||||
degree = 225;
|
||||
break;
|
||||
case "西南风":
|
||||
degree = 315;
|
||||
break;
|
||||
default:
|
||||
degree = null;
|
||||
break;
|
||||
}
|
||||
return degree;
|
||||
}
|
||||
|
|
@ -247,7 +247,6 @@ import { parse } from '../lib/handleGeojson';
|
|||
<span id="lablSBZT2" onclick="wuzi([${item.lng},${item.lat}]);" class="label-tag data-value-status-0" title="关闭状态" >物资调度</span>
|
||||
<span id="lablCSFM2" onclick="shuiyuan([${item.lng},${item.lat}])" class="label-tag data-value-status-2" title="打开状态">附近水源</span>
|
||||
<span id="lablSBZT1" class="label-tag data-value-status-1" title="路线规划">路线规划</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -358,7 +358,6 @@ export default {
|
|||
<span class="label-tag data-value-status-2" title="视频通话" onclick="videoCall('123')">视频通话</span></div>
|
||||
<span id="lablSBZT1" onclick="designRoute('${user.CreateId}');" class="label-tag data-value-status-1" title="路线高亮">路线高亮</span>
|
||||
<span id="lablSBZT1" onclick="deleteRoute('${user.CreateId}');" class="label-tag data-value-status-2" title="路线隐藏">路线隐藏</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -76,6 +76,7 @@
|
|||
mapGetters,
|
||||
mapActions
|
||||
} from 'vuex'
|
||||
import { getMethodCommon } from '../../api/common'
|
||||
export default {
|
||||
name: 'login',
|
||||
directives: {
|
||||
|
|
@ -152,6 +153,17 @@
|
|||
if (valid) {
|
||||
this.loading = true
|
||||
this.$store.dispatch('Login', this.loginForm).then(() => {
|
||||
getMethodCommon("/Check/GetRoles").then(res=>{
|
||||
if(res){
|
||||
if(res.result && res.result.length){
|
||||
res.result.forEach((item,index)=>{
|
||||
if(item.name == "任务下发"){
|
||||
localStorage.setItem("isTaskUser","true");
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
this.loading = false
|
||||
this.$router.push({
|
||||
path: '/home'
|
||||
|
|
|
|||
Loading…
Reference in New Issue