diff --git a/src/views/stationOperation/components/MapMarker.vue b/src/views/stationOperation/components/MapMarker.vue index 83b15e6..7b1dc75 100644 --- a/src/views/stationOperation/components/MapMarker.vue +++ b/src/views/stationOperation/components/MapMarker.vue @@ -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 = `
` - } else if (quality == "good") { + } else if (quality == 'good') { rippleDiv.innerHTML = `
` - } else if(quality == "bad"){ + } else if (quality == 'bad') { rippleDiv.innerHTML = `
` @@ -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,15 +219,16 @@ 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 => { - return item.stationId === result.stationId - }) || {} + let params = + this.currList.find((item) => { + return item.stationId === result.stationId + }) || {} this.currStationInfo = { ...result, ...params } } else { this.$message.error(message) @@ -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, + }, + }, }