diff --git a/nezha-fronted/src/components/common/language/cn.js b/nezha-fronted/src/components/common/language/cn.js index 67e9819f4..c771cbd91 100644 --- a/nezha-fronted/src/components/common/language/cn.js +++ b/nezha-fronted/src/components/common/language/cn.js @@ -128,7 +128,7 @@ const cn = { name:"数据库名称", username:"用户名", password:"密码", - alertPath:'Alert API', + alertPath:'网站URL', alertPrefix:'Alert prefix', haMode:'HA mode', haVip:'Virtual IP', @@ -837,7 +837,12 @@ const cn = { second:'秒', day:'天', maxSeries:'Query max series', - unsaved:'未保存提示' + unsaved:'未保存提示', + mapConfig:"地图属性", + mapTitle:"配置地图", + lat:"纬度", + lng:"经度", + zoom:"缩放" }, email: { email: "邮件", diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js index e2055cc6b..57019f8a6 100644 --- a/nezha-fronted/src/components/common/language/en.js +++ b/nezha-fronted/src/components/common/language/en.js @@ -134,7 +134,7 @@ const en = { name:"Database name", username:"Username", password:"Password", - alertPath:'Alert API', + alertPath:'Site URL', alertPrefix:'Alert prefix', haMode:'HA mode', haVip:'Virtual IP', @@ -840,7 +840,12 @@ const en = { second:'second', day:'day', maxSeries:'Query max series', - unsaved:'Unsaved tip' + unsaved:'Unsaved tip', + mapConfig:"Map attribute", + mapTitle:"Configurate map", + lat:"latitude", + lng:"longitude", + zoom:"zoom" }, email:{ email:'Email', diff --git a/nezha-fronted/src/components/page/config/system.vue b/nezha-fronted/src/components/page/config/system.vue index c7059393a..310673957 100644 --- a/nezha-fronted/src/components/page/config/system.vue +++ b/nezha-fronted/src/components/page/config/system.vue @@ -42,6 +42,14 @@ + +
+
{{$t('config.system.basic.lat')}}
+
{{$t('config.system.basic.lng')}}
+
{{$t('config.system.basic.zoom')}}
+
+
+
@@ -54,6 +62,9 @@ + +
+
@@ -359,7 +370,11 @@ import {uSize} from '../../common/js/validate' import bus from '../../../libs/bus'; import draggable from 'vuedraggable' - + // 引入Leaflet对象 挂载到Vue上,便于全局使用,也可以单独页面中单独引用 + import 'leaflet/dist/leaflet.css' + import * as L from 'leaflet' + import icon from 'leaflet/dist/images/marker-icon.png'; + import iconShadow from 'leaflet/dist/images/marker-shadow.png'; export default { name: "system", components:{draggable}, @@ -378,7 +393,11 @@ default_cabinet_usize:'', query_max_series:'', unsaved_change:'on', + map_config:{"longitude":116.39,"latitude":39.9,"zoom":4,"minZoom":1,"maxZoom":10} }, + mapConfigVisible:false, + map:null, + marker:null, basicCopy:null, basicRules:{ system_name:[{required:true,message:this.$t('validate.required'),trigger:'blur'},], @@ -538,6 +557,59 @@ } }, methods:{ + initMap:function(){ + if(this.map){ + this.map.remove(); + this.map=null; + } + let DefaultIcon = L.icon({ + iconUrl: icon, + iconSize: [26, 40], + iconAnchor: [13, 40], + shadowUrl: iconShadow + }); + L.Marker.prototype.options.icon = DefaultIcon; + let map = L.map("map",{ + minZoom:this.basic.map_config.minZoom, + maxZoom:this.basic.map_config.maxZoom, + attributionControl:false, + zoomControl:false, + maxBounds:L.latLngBounds(L.latLng(-90,-180),L.latLng(90,180)) + }).setView([this.basic.map_config.latitude,this.basic.map_config.longitude],this.basic.map_config.zoom); + + L.tileLayer( + "/static/Tiles/{z}/{x}/{y}.png", + {noWrap:true} + ).addTo(map); + + let attribution=L.control.attribution({position:'bottomright',prefix:''}) + attribution.addAttribution(' © OpenStreetMap contributors') + attribution.addTo(map) + + L.control.zoom({ + position:'bottomright', + zoomInText:``, + zoomOutText:``, + zoomInTitle:'', + zoomOutTitle:'', + }).addTo(map) + + let marker = L.marker([this.basic.map_config.latitude,this.basic.map_config.longitude]).addTo(map); + map.on("click", function(e) { + var lat = e.latlng.lat; + var lng = e.latlng.lng; + marker.setLatLng([lat,lng]); + }); + this.map = map; + this.marker = marker; + }, + mapClose:function(){ + this.mapConfigVisible=false + let latlng = this.marker.getLatLng(); + this.basic.map_config.latitude = latlng.lat; + this.basic.map_config.longitude = latlng.lng; + this.basic.map_config.zoom = this.map.getZoom(); + }, selectTab:function(tab){ this.querySetInfo(tab.name) }, @@ -937,10 +1009,19 @@ //openUrl 跳转页面 openUrl(item){ // window.open(item.url) + }, + queryDefaultMapConfig:function(){ + this.$get("/sysConfig?paramKey=map_center_config").then(response=>{ + if(response.code == 200){ + console.log(response.data) + this.basic.map_config = JSON.parse(response.data.paramKey.map_center_config); + } + }) } }, mounted() { this.querySetInfo('basic'); + this.queryDefaultMapConfig(); } } @@ -955,6 +1036,20 @@ width: 61.8% !important; position: relative; } + .system .system-map{ + width: 100%; + margin-bottom:18px + } + .system-map .system-map-item{ + display: inline-block; + margin-right: 10px; + } + .system-map .system-map-item .label{ + margin-right: 10px; + } + .system-map .el-input{ + width: 95px !important; + } .linkBox{ max-height: 800px; width: 800px; @@ -1121,6 +1216,13 @@ .system-config-form .el-form-item__content{ width: 512px; } + .system .map-config-dialog .el-dialog{ + height: 45%; + } + .map-config-dialog .el-dialog__body{ + height: calc(100% - 48px) !important; + + } .system-config-form .el-input{ width:512px; text-align: left;