<template>
|
<div id="content" :class="{hiddenCard: !showFlag}" @mouseover="disableMap" @mouseleave="enableMap">
|
<real-time-status/>
|
<reciprocal-rank/>
|
<alarm-reminder :map="map"/>
|
<air-change-trend/>
|
<excellent-proportion/>
|
</div>
|
</template>
|
|
<script>
|
import RealTimeStatus from '@/components/Wind/realTimeLocal/realTimeStatus'
|
import ReciprocalRank from '@/components/Wind/realTimeLocal/ReciprocalRank'
|
import AlarmReminder from '@/components/Wind/realTimeLocal/alarmReminder'
|
import AirChangeTrend from '@/components/Wind/realTimeLocal/airChangeTrend'
|
import excellentProportion from '@/components/Wind/realTimeLocal/excellentProportion'
|
export default {
|
name: 'RegionalOverview',
|
components: { ReciprocalRank, RealTimeStatus, AlarmReminder, AirChangeTrend, excellentProportion },
|
props: {
|
map: Object,
|
showFlag: Boolean
|
},
|
methods: {
|
// 鼠标移入禁用地图滚动,拖拽，点击
|
disableMap() {
|
this.map.scrollWheelZoom.disable()
|
this.map.doubleClickZoom.disable()
|
this.map.dragging.disable()
|
},
|
// 鼠标移出启用地图滚动,拖拽，点击
|
enableMap() {
|
this.map.scrollWheelZoom.enable()
|
this.map.doubleClickZoom.enable()
|
this.map.dragging.enable()
|
}
|
}
|
}
|
</script>
|
|
<style lang="less">
|
#content {
|
position: fixed;
|
right: 0;
|
top: 100px;
|
width: 400px;
|
height: calc(100% - 120px);
|
background-color: #EEF1F6;
|
border-radius: 4px;
|
padding: 0 6px 6px;
|
z-index: 1000;
|
overflow-y: scroll;
|
transition: all .3s;
|
}
|
.hiddenCard {
|
height: 0!important;
|
padding: 0!important;
|
}
|
</style>
|
