|
@@ -61,33 +61,17 @@
|
|
|
<el-col :span="10">
|
|
|
<div class="grid-content center-box">
|
|
|
<!--中间地图-->
|
|
|
- <div class="center-map">
|
|
|
- <!--地图左上设备统计-->
|
|
|
- <!-- <div class="map-left-top">
|
|
|
- <div class="center-alarm-label">
|
|
|
- <div class="alarm-label-title">在线</div>
|
|
|
- <div class="alarm-label-value normal-value" >{{deviceStatusData['online']}}</div>
|
|
|
- </div>
|
|
|
- <div class="center-alarm-label">
|
|
|
- <div class="alarm-label-title">离线</div>
|
|
|
- <div class="alarm-label-value alarm-value">{{deviceStatusData['offline']}}</div>
|
|
|
- </div>
|
|
|
- <div class="center-alarm-label">
|
|
|
- <div class="alarm-label-title">失联</div>
|
|
|
- <div class="alarm-label-value contact-value">{{deviceStatusData['lost']}}</div>
|
|
|
- </div>
|
|
|
- <div class="center-alarm-label">
|
|
|
- <div class="alarm-label-title">其他</div>
|
|
|
- <div class="alarm-label-value other-value">{{deviceStatusData['other']}}</div>
|
|
|
- </div>
|
|
|
- <div class="center-alarm-total-label">
|
|
|
- <div class="alarm-label-title">井设备</div>
|
|
|
- <div class="alarm-label-value total-value">{{deviceStatusData['total']}}</div>
|
|
|
- </div>
|
|
|
- </div> -->
|
|
|
+
|
|
|
+ <baidu-map class="center-map" :center="center" :zoom="zoom" @ready="mapInit">
|
|
|
+
|
|
|
+ <bml-marker-clusterer :averageCenter="true">
|
|
|
+ <bm-marker v-for="(marker,index) of markers" :key="index" :position="{lng: marker.lng, lat: marker.lat}" :icon="{url: 'https://rlfd.oss-cn-hangzhou.aliyuncs.com/smart_tool/beng_16.png', size: {width: 16, height: 16}}"></bm-marker>
|
|
|
+ <bm-marker v-for="(marker,index) of windMarkers" :key="index" :position="{lng: marker.lng, lat: marker.lat}" :icon="{url: 'https://rlfd.oss-cn-hangzhou.aliyuncs.com/smart_tool/wind_32.png', size: {width: 32, height: 32}}"></bm-marker>
|
|
|
+ </bml-marker-clusterer>
|
|
|
+ </baidu-map>
|
|
|
|
|
|
- <base-map width="100%" :options="mapOptions" />
|
|
|
- </div>
|
|
|
+ <!-- <base-map width="100%" :options="mapOptions" /> -->
|
|
|
+
|
|
|
|
|
|
<div class="center-bottom">
|
|
|
<!--地图下方频繁告警区域统计-->
|
|
@@ -122,7 +106,7 @@ import BaseBar from "@/components/Charts/BaseBarChart";
|
|
|
import BaseLine from "@/components/Charts/BaseLineChart";
|
|
|
import BaseMap from "@/components/Charts/BaseMapChart";
|
|
|
import scroll from "./scroll";
|
|
|
-
|
|
|
+import {BmlMarkerClusterer} from 'vue-baidu-map'
|
|
|
export default {
|
|
|
name: "screen_screen",
|
|
|
components: {
|
|
@@ -130,15 +114,36 @@ export default {
|
|
|
BaseBar,
|
|
|
BaseLine,
|
|
|
BaseMap,
|
|
|
- scroll
|
|
|
+ scroll,
|
|
|
+ BmlMarkerClusterer
|
|
|
},
|
|
|
props:['date','nowWeek','alarm_data','alarmData','deviceStatusData','pieOptions','barAreaOptions','barOptions','lineOptions','mapOptions'],
|
|
|
data() {
|
|
|
+
|
|
|
return {
|
|
|
-
|
|
|
+ center:'中国',
|
|
|
+ zoom:5,
|
|
|
+ markers:[],
|
|
|
+ windMarkers:[],
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
+ mapInit({ BMap, map }) {
|
|
|
+ this.map = map;
|
|
|
+ // 初始化地图,设置中心点坐标
|
|
|
+ this.map.setMapStyle({style:'dark'});
|
|
|
+ map.enableScrollWheelZoom();
|
|
|
+
|
|
|
+ for (let i = 0; i < 200; i++) {
|
|
|
+ const position = {lng: Math.random() * 40 + 85, lat: Math.random() * 30 + 21}
|
|
|
+ this.markers.push(position)
|
|
|
+ }
|
|
|
+ for (let i = 0; i < 50; i++) {
|
|
|
+ const position = {lng: Math.random() * 40 + 85, lat: Math.random() * 30 + 21}
|
|
|
+ this.windMarkers.push(position)
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
goback(){
|
|
|
this.$router.go(-1)
|
|
|
},
|