xiaoguangbin/AnalysisSystemForRadionuclide_vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

台站是Unoperating，icon 上面的波纹去掉， 不允许弹出数据接收弹窗

Browse Source
This commit is contained in:
任珮宇 2024-01-24 17:39:38 +08:00
parent b083dbed80
commit 9f6575ff04
2 changed files with 55 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
src/views/stationOperation/components/MapMarker.vue
View File

@ -26,30 +26,30 @@ export default {
props: { props: {
list: { list: {
type: Array, type: Array,
required: true required: true,
}, },
currList: { currList: {
type: Array, type: Array,
required: true required: true,
}, },
orgList: { orgList: {
type: Array, type: Array,
required: true required: true,
}, },
markerType: { markerType: {
type: Number, type: Number,
default: 1 default: 1,
}, },
radius: { radius: {
type: Number type: Number,
} },
}, },
data() { data() {
return { return {
currStationInfo: {}, currStationInfo: {},
isGettingInfo: false, isGettingInfo: false,
columns: {}, columns: {},
popupTitle: '' popupTitle: '',
} }
}, },
mounted() { mounted() {
@ -59,7 +59,7 @@ export default {
this.changeCircleRadius() this.changeCircleRadius()
}) })
this.getStationInfo = debounce(stationInfo => { this.getStationInfo = debounce((stationInfo) => {
// 查询设施详情时去抖动 // 查询设施详情时去抖动
if (this.isHover) { if (this.isHover) {
this._getStationInfo(stationInfo) this._getStationInfo(stationInfo)
@ -69,13 +69,14 @@ export default {
methods: { methods: {
initCircles() { initCircles() {
const circleRadius = this.getRadius() * 2 const circleRadius = this.getRadius() * 2
console.log('this.list', this.list)
this.list this.list
.filter( .filter(
stationInfo => (stationInfo) =>
stationInfo.stationType !== MarkerType.NuclearFacility && stationInfo.stationType !== MarkerType.NRL stationInfo.stationType !== MarkerType.NuclearFacility && stationInfo.stationType !== MarkerType.NRL
) )
.forEach(stationInfo => { .forEach((stationInfo) => {
this.map.addOverlay(this.getCircle(stationInfo, circleRadius)) this.map.addOverlay(this.getCircle(stationInfo, circleRadius))
}) })
}, },
@ -92,17 +93,17 @@ export default {
element: circleDiv, element: circleDiv,
id: `circle_${stationType}_${stationId}`, id: `circle_${stationType}_${stationId}`,
positioning: 'center-center', positioning: 'center-center',
className: 'circle-overlay' className: 'circle-overlay',
}) })
}, },
// 修改圆的半径 // 修改圆的半径
changeCircleRadius() { changeCircleRadius() {
const overlays = this.map.getOverlays().getArray() 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 const circleRadius = this.getRadius() * 2
circleOverlays.forEach(circle => { circleOverlays.forEach((circle) => {
const circleEle = circle.getElement() const circleEle = circle.getElement()
circleEle.style.width = circleRadius + 'px' circleEle.style.width = circleRadius + 'px'
circleEle.style.height = circleRadius + 'px' circleEle.style.height = circleRadius + 'px'
@ -111,10 +112,7 @@ export default {
// 半径计算 // 半径计算
getRadius() { getRadius() {
const metersPerUnit = this.map const metersPerUnit = this.map.getView().getProjection().getMetersPerUnit()
.getView()
.getProjection()
.getMetersPerUnit()
const distance = (this.radius * 1000) / metersPerUnit const distance = (this.radius * 1000) / metersPerUnit
const resolution = this.map.getView().getResolution() const resolution = this.map.getView().getResolution()
@ -123,7 +121,7 @@ export default {
// 初始化marker // 初始化marker
initMarkers() { initMarkers() {
this.list.forEach(stationInfo => { this.list.forEach((stationInfo) => {
this.map.addOverlay(this.getMarker(stationInfo)) this.map.addOverlay(this.getMarker(stationInfo))
}) })
}, },
@ -153,18 +151,19 @@ export default {
position: fromLonLat([lon, lat]), position: fromLonLat([lon, lat]),
element: img, element: img,
id: `marker_${stationInfo.stationType}_${stationInfo.stationId}`, id: `marker_${stationInfo.stationType}_${stationInfo.stationId}`,
positioning: 'center-center' positioning: 'center-center',
}) })
}, },
// 初始化波纹 // 初始化波纹
initRipples() { initRipples() {
this.currList this.currList
.filter((stationInfo) => stationInfo.status !== 'Unoperating')
// .filter( // .filter(
// stationInfo => // stationInfo =>
// stationInfo.stationType !== MarkerType.NuclearFacility && stationInfo.stationType !== MarkerType.NRL // stationInfo.stationType !== MarkerType.NuclearFacility && stationInfo.stationType !== MarkerType.NRL
// ) // )
.forEach(stationInfo => { .forEach((stationInfo) => {
this.map.addOverlay(this.getRipple(stationInfo)) this.map.addOverlay(this.getRipple(stationInfo))
}) })
}, },
@ -172,15 +171,15 @@ export default {
getRipple({ lon, lat, stationId, stationType, quality }) { getRipple({ lon, lat, stationId, stationType, quality }) {
const rippleDiv = document.createElement('div') const rippleDiv = document.createElement('div')
rippleDiv.className = 'custom-ripple' rippleDiv.className = 'custom-ripple'
if (quality == "excellent") { if (quality == 'excellent') {
rippleDiv.innerHTML = ` <div class="inner-ripple-excellent-1"></div> rippleDiv.innerHTML = ` <div class="inner-ripple-excellent-1"></div>
<div class="inner-ripple-excellent-2"></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> rippleDiv.innerHTML = ` <div class="inner-ripple-good-1"></div>
<div class="inner-ripple-good-2"></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> rippleDiv.innerHTML = ` <div class="inner-ripple-bad-1"></div>
<div class="inner-ripple-bad-2"></div> <div class="inner-ripple-bad-2"></div>
` `
@ -191,7 +190,7 @@ export default {
element: rippleDiv, element: rippleDiv,
id: `ripple_${stationType}_${stationId}`, id: `ripple_${stationType}_${stationId}`,
positioning: 'center-center', positioning: 'center-center',
className: 'ripple-overlay' className: 'ripple-overlay',
}) })
}, },
@ -200,7 +199,7 @@ export default {
this.popupOverlay = new Overlay({ this.popupOverlay = new Overlay({
element: this.$refs.mapPopupRef, element: this.$refs.mapPopupRef,
positioning: 'top-center', positioning: 'top-center',
id: POPUP_OVERLAY_ID id: POPUP_OVERLAY_ID,
}) })
this.map.addOverlay(this.popupOverlay) this.map.addOverlay(this.popupOverlay)
}, },
@ -220,15 +219,16 @@ export default {
try { try {
const { success, result, message } = await getAction('/jeecg-station-operation/stationOperation/findInfo', { const { success, result, message } = await getAction('/jeecg-station-operation/stationOperation/findInfo', {
stationId: stationInfo.stationId, stationId: stationInfo.stationId,
type: stationInfo.stationType type: stationInfo.stationType,
}) })
if (success) { if (success) {
result.lon = decimalToDms(result.lon || result.longitude) result.lon = decimalToDms(result.lon || result.longitude)
result.lat = decimalToDms(result.lat || result.latitude, false) result.lat = decimalToDms(result.lat || result.latitude, false)
let params = this.currList.find(item => { let params =
return item.stationId === result.stationId this.currList.find((item) => {
}) || {} return item.stationId === result.stationId
}) || {}
this.currStationInfo = { ...result, ...params } this.currStationInfo = { ...result, ...params }
} else { } else {
this.$message.error(message) this.$message.error(message)
@ -243,7 +243,7 @@ export default {
//关闭地图弹窗 //关闭地图弹窗
closeMapPopup() { closeMapPopup() {
this.popupOverlay.setPosition(null) this.popupOverlay.setPosition(null)
} },
}, },
watch: { watch: {
list() { list() {
@ -257,19 +257,22 @@ export default {
}, },
currList: { currList: {
handler(newVal, oldVal) { handler(newVal, oldVal) {
this.orgList.forEach(item => { this.orgList.forEach((item) => {
var layer = this.map.getOverlays().getArray().find(layer=> { var layer = this.map
return layer.id === `ripple_${item.stationType}_${item.stationId}`; .getOverlays()
}); .getArray()
.find((layer) => {
return layer.id === `ripple_${item.stationType}_${item.stationId}`
})
if (layer) { if (layer) {
this.map.removeOverlay(layer); this.map.removeOverlay(layer)
} }
}) })
this.initRipples() this.initRipples()
}, },
deep:true deep: true,
} },
} },
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@ -362,7 +365,12 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 50%; 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; animation: rippleEffect @duration linear 0s infinite;
} }
@ -373,7 +381,12 @@ export default {
height: 100%; height: 100%;
border-radius: 50%; border-radius: 50%;
transform: scale(0); 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; animation: rippleEffect @duration linear @delay infinite;
} }
.inner-ripple-bad-1 { .inner-ripple-bad-1 {

4
src/views/stationOperation/index.vue
View File

@ -548,8 +548,8 @@ export default {
// 地图图标点击 // 地图图标点击
onMarkerClick(stationInfo) { onMarkerClick(stationInfo) {
const { stationType } = stationInfo const { stationType, status } = stationInfo
if (stationType !== 'NRL' && stationType !== 'Nuclear Facility') { if (stationType !== 'NRL' && stationType !== 'Nuclear Facility' && status !== 'Unoperating') {
this.$refs.mapPane.handleOpenAnalyzeModal(stationInfo) this.$refs.mapPane.handleOpenAnalyzeModal(stationInfo)
} }
}, },