{{$t("dashboard.overview.dataCenter.dataCenter")}}
@@ -192,6 +193,11 @@
import timePicker from '../../../common/timePicker';
import VueCountUp from 'vue-countupjs';
import * as world from "../../../common/js/world";
+ import 'leaflet/dist/leaflet.css'
+ // 引入Leaflet对象 挂载到Vue上，便于全局使用，也可以单独页面中单独引用
+ import * as L from 'leaflet'
+ import icon from 'leaflet/dist/images/marker-icon.png';
+ import iconShadow from 'leaflet/dist/images/marker-shadow.png';
var timeout; //第三行第三个图的dropdown下拉菜单timeout
export default {
@@ -300,7 +306,8 @@
this.queryAlertMessageData();
this.queryAlertRuleData();
this.queryAlertTrendData();
- this.queryMapChartGeoJson();
+ // this.queryMapChartGeoJson();
+ this.initMap();
this.queryAlertStatByRule();
this.queryAlertStatByAsset();
this.getDcTrafficData();
@@ -659,6 +666,53 @@
//console.info("params", params);
return params;
},
+ initMap() {
+ this.loadMapConfig().then((mapConfig)=>{
+ if(mapConfig&&this.map){
+ this.loadDataCenterMapData()
+ }
+ })
+ },
+ loadMapConfig:function(){
+ return new Promise(resolve => {
+ let DefaultIcon = L.icon({
+ iconUrl: icon,
+ shadowUrl: iconShadow
+ });
+ L.Marker.prototype.options.icon = DefaultIcon;
+ let param={paramKey:'map_center_config'}
+ this.$get('sysConfig',param).then(response=>{
+ if(response.code == 200){
+ let mapConfig=JSON.parse(response.data.paramKey.map_center_config);
+ let map = L.map("map",{
+ minZoom:2,
+ maxZoom:7,
+ attributionControl:false,
+ zoomControl:false,
+ }).setView([mapConfig.longitude,mapConfig.latitude],mapConfig.zoom);
+ this.map = map;
+
+ L.tileLayer(
+ "/static/Tiles/{z}/{x}/{y}.png"
+ ).addTo(map);
+
+ let attribution=L.control.attribution({position:'bottomright',prefix:''})
+ attribution.addAttribution(' © OpenStreetMap contributors')
+ attribution.addTo(map)
+
+ L.control.zoom({
+ position:'bottomright',
+ zoomInText:`