台站是Unoperating，icon 上面的波纹去掉， 不允许弹出数据接收弹窗
This commit is contained in:
parent
b083dbed80
commit
9f6575ff04
|
|
@ -26,30 +26,30 @@ export default {
|
|||
props: {
|
||||
list: {
|
||||
type: Array,
|
||||
required: true
|
||||
required: true,
|
||||
},
|
||||
currList: {
|
||||
type: Array,
|
||||
required: true
|
||||
required: true,
|
||||
},
|
||||
orgList: {
|
||||
type: Array,
|
||||
required: true
|
||||
required: true,
|
||||
},
|
||||
markerType: {
|
||||
type: Number,
|
||||
default: 1
|
||||
default: 1,
|
||||
},
|
||||
radius: {
|
||||
type: Number
|
||||
}
|
||||
type: Number,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currStationInfo: {},
|
||||
isGettingInfo: false,
|
||||
columns: {},
|
||||
popupTitle: ''
|
||||
popupTitle: '',
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -59,7 +59,7 @@ export default {
|
|||
this.changeCircleRadius()
|
||||
})
|
||||
|
||||
this.getStationInfo = debounce(stationInfo => {
|
||||
this.getStationInfo = debounce((stationInfo) => {
|
||||
// 查询设施详情时去抖动
|
||||
if (this.isHover) {
|
||||
this._getStationInfo(stationInfo)
|
||||
|
|
@ -69,13 +69,14 @@ export default {
|
|||
methods: {
|
||||
initCircles() {
|
||||
const circleRadius = this.getRadius() * 2
|
||||
console.log('this.list', this.list)
|
||||
|
||||
this.list
|
||||
.filter(
|
||||
stationInfo =>
|
||||
(stationInfo) =>
|
||||
stationInfo.stationType !== MarkerType.NuclearFacility && stationInfo.stationType !== MarkerType.NRL
|
||||
)
|
||||
.forEach(stationInfo => {
|
||||
.forEach((stationInfo) => {
|
||||
this.map.addOverlay(this.getCircle(stationInfo, circleRadius))
|
||||
})
|
||||
},
|
||||
|
|
@ -92,17 +93,17 @@ export default {
|
|||
element: circleDiv,
|
||||
id: `circle_${stationType}_${stationId}`,
|
||||
positioning: 'center-center',
|
||||
className: 'circle-overlay'
|
||||
className: 'circle-overlay',
|
||||
})
|
||||
},
|
||||
|
||||
// 修改圆的半径
|
||||
changeCircleRadius() {
|
||||
const overlays = this.map.getOverlays().getArray()
|
||||
const circleOverlays = overlays.filter(item => item.id.indexOf('circle') == 0) // 根据id标识获取所有的圆
|
||||
const circleOverlays = overlays.filter((item) => item.id.indexOf('circle') == 0) // 根据id标识获取所有的圆
|
||||
const circleRadius = this.getRadius() * 2
|
||||
|
||||
circleOverlays.forEach(circle => {
|
||||
circleOverlays.forEach((circle) => {
|
||||
const circleEle = circle.getElement()
|
||||
circleEle.style.width = circleRadius + 'px'
|
||||
circleEle.style.height = circleRadius + 'px'
|
||||
|
|
@ -111,10 +112,7 @@ export default {
|
|||
|
||||
// 半径计算
|
||||
getRadius() {
|
||||
const metersPerUnit = this.map
|
||||
.getView()
|
||||
.getProjection()
|
||||
.getMetersPerUnit()
|
||||
const metersPerUnit = this.map.getView().getProjection().getMetersPerUnit()
|
||||
|
||||
const distance = (this.radius * 1000) / metersPerUnit
|
||||
const resolution = this.map.getView().getResolution()
|
||||
|
|
@ -123,7 +121,7 @@ export default {
|
|||
|
||||
// 初始化marker
|
||||
initMarkers() {
|
||||
this.list.forEach(stationInfo => {
|
||||
this.list.forEach((stationInfo) => {
|
||||
this.map.addOverlay(this.getMarker(stationInfo))
|
||||
})
|
||||
},
|
||||
|
|
@ -153,18 +151,19 @@ export default {
|
|||
position: fromLonLat([lon, lat]),
|
||||
element: img,
|
||||
id: `marker_${stationInfo.stationType}_${stationInfo.stationId}`,
|
||||
positioning: 'center-center'
|
||||
positioning: 'center-center',
|
||||
})
|
||||
},
|
||||
|
||||
// 初始化波纹
|
||||
initRipples() {
|
||||
this.currList
|
||||
.filter((stationInfo) => stationInfo.status !== 'Unoperating')
|
||||
// .filter(
|
||||
// stationInfo =>
|
||||
// stationInfo.stationType !== MarkerType.NuclearFacility && stationInfo.stationType !== MarkerType.NRL
|
||||
// )
|
||||
.forEach(stationInfo => {
|
||||
.forEach((stationInfo) => {
|
||||
this.map.addOverlay(this.getRipple(stationInfo))
|
||||
})
|
||||
},
|
||||
|
|
@ -172,15 +171,15 @@ export default {
|
|||
getRipple({ lon, lat, stationId, stationType, quality }) {
|
||||
const rippleDiv = document.createElement('div')
|
||||
rippleDiv.className = 'custom-ripple'
|
||||
if (quality == "excellent") {
|
||||
if (quality == 'excellent') {
|
||||
rippleDiv.innerHTML = ` <div class="inner-ripple-excellent-1"></div>
|
||||
<div class="inner-ripple-excellent-2"></div>
|
||||
`
|
||||
} else if (quality == "good") {
|
||||
} else if (quality == 'good') {
|
||||
rippleDiv.innerHTML = ` <div class="inner-ripple-good-1"></div>
|
||||
<div class="inner-ripple-good-2"></div>
|
||||
`
|
||||
} else if(quality == "bad"){
|
||||
} else if (quality == 'bad') {
|
||||
rippleDiv.innerHTML = ` <div class="inner-ripple-bad-1"></div>
|
||||
<div class="inner-ripple-bad-2"></div>
|
||||
`
|
||||
|
|
@ -191,7 +190,7 @@ export default {
|
|||
element: rippleDiv,
|
||||
id: `ripple_${stationType}_${stationId}`,
|
||||
positioning: 'center-center',
|
||||
className: 'ripple-overlay'
|
||||
className: 'ripple-overlay',
|
||||
})
|
||||
},
|
||||
|
||||
|
|
@ -200,7 +199,7 @@ export default {
|
|||
this.popupOverlay = new Overlay({
|
||||
element: this.$refs.mapPopupRef,
|
||||
positioning: 'top-center',
|
||||
id: POPUP_OVERLAY_ID
|
||||
id: POPUP_OVERLAY_ID,
|
||||
})
|
||||
this.map.addOverlay(this.popupOverlay)
|
||||
},
|
||||
|
|
@ -220,13 +219,14 @@ export default {
|
|||
try {
|
||||
const { success, result, message } = await getAction('/jeecg-station-operation/stationOperation/findInfo', {
|
||||
stationId: stationInfo.stationId,
|
||||
type: stationInfo.stationType
|
||||
type: stationInfo.stationType,
|
||||
})
|
||||
if (success) {
|
||||
result.lon = decimalToDms(result.lon || result.longitude)
|
||||
result.lat = decimalToDms(result.lat || result.latitude, false)
|
||||
|
||||
let params = this.currList.find(item => {
|
||||
let params =
|
||||
this.currList.find((item) => {
|
||||
return item.stationId === result.stationId
|
||||
}) || {}
|
||||
this.currStationInfo = { ...result, ...params }
|
||||
|
|
@ -243,7 +243,7 @@ export default {
|
|||
//关闭地图弹窗
|
||||
closeMapPopup() {
|
||||
this.popupOverlay.setPosition(null)
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
list() {
|
||||
|
|
@ -257,19 +257,22 @@ export default {
|
|||
},
|
||||
currList: {
|
||||
handler(newVal, oldVal) {
|
||||
this.orgList.forEach(item => {
|
||||
var layer = this.map.getOverlays().getArray().find(layer=> {
|
||||
return layer.id === `ripple_${item.stationType}_${item.stationId}`;
|
||||
});
|
||||
this.orgList.forEach((item) => {
|
||||
var layer = this.map
|
||||
.getOverlays()
|
||||
.getArray()
|
||||
.find((layer) => {
|
||||
return layer.id === `ripple_${item.stationType}_${item.stationId}`
|
||||
})
|
||||
if (layer) {
|
||||
this.map.removeOverlay(layer);
|
||||
this.map.removeOverlay(layer)
|
||||
}
|
||||
})
|
||||
this.initRipples()
|
||||
},
|
||||
deep:true
|
||||
}
|
||||
}
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
|
|
@ -362,7 +365,12 @@ export default {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background-image: radial-gradient(circle, transparent 10%, rgba(187, 138, 18, 0.2) 30%, rgba(187, 138, 18, 0.5) 60%);
|
||||
background-image: radial-gradient(
|
||||
circle,
|
||||
transparent 10%,
|
||||
rgba(187, 138, 18, 0.2) 30%,
|
||||
rgba(187, 138, 18, 0.5) 60%
|
||||
);
|
||||
animation: rippleEffect @duration linear 0s infinite;
|
||||
}
|
||||
|
||||
|
|
@ -373,7 +381,12 @@ export default {
|
|||
height: 100%;
|
||||
border-radius: 50%;
|
||||
transform: scale(0);
|
||||
background-image: radial-gradient(circle, transparent 10%, rgba(187, 138, 18, 0.2) 30%, rgba(187, 138, 18, 0.5) 60%);
|
||||
background-image: radial-gradient(
|
||||
circle,
|
||||
transparent 10%,
|
||||
rgba(187, 138, 18, 0.2) 30%,
|
||||
rgba(187, 138, 18, 0.5) 60%
|
||||
);
|
||||
animation: rippleEffect @duration linear @delay infinite;
|
||||
}
|
||||
.inner-ripple-bad-1 {
|
||||
|
|
|
|||
|
|
@ -548,8 +548,8 @@ export default {
|
|||
|
||||
// 地图图标点击
|
||||
onMarkerClick(stationInfo) {
|
||||
const { stationType } = stationInfo
|
||||
if (stationType !== 'NRL' && stationType !== 'Nuclear Facility') {
|
||||
const { stationType, status } = stationInfo
|
||||
if (stationType !== 'NRL' && stationType !== 'Nuclear Facility' && status !== 'Unoperating') {
|
||||
this.$refs.mapPane.handleOpenAnalyzeModal(stationInfo)
|
||||
}
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user