diff --git a/src/views/stationOperation/components/MapMarker.vue b/src/views/stationOperation/components/MapMarker.vue index 763ec8f..4e840a2 100644 --- a/src/views/stationOperation/components/MapMarker.vue +++ b/src/views/stationOperation/components/MapMarker.vue @@ -161,13 +161,23 @@ export default { }) }, - getRipple({ lon, lat, stationId, stationType }) { + getRipple({ lon, lat, stationId, stationType, quality }) { + // console.log("lon, lat, stationId, stationType, quality",lon, lat, stationId, stationType, quality); const rippleDiv = document.createElement('div') rippleDiv.className = 'custom-ripple' - - rippleDiv.innerHTML = `
-
- ` + if (quality == "excellent") { + rippleDiv.innerHTML = `
+
+ ` + } else if (quality == "good") { + rippleDiv.innerHTML = `
+
+ ` + } else if(quality == "bad"){ + rippleDiv.innerHTML = `
+
+ ` + } return new Overlay({ position: fromLonLat([lon, lat]), @@ -266,6 +276,7 @@ export default { line-height: 30px; border-bottom: 1px solid #0a544e; margin-bottom: 0; + color: rgb(187, 138, 18); } } @@ -301,7 +312,7 @@ export default { @duration: 1.8s; @delay: 0.9s; - .inner-ripple-1 { + .inner-ripple-excellent-1 { position: absolute; top: 0; width: 100%; @@ -311,7 +322,7 @@ export default { animation: rippleEffect @duration linear 0s infinite; } - .inner-ripple-2 { + .inner-ripple-excellent-2 { position: absolute; top: 0; width: 100%; @@ -321,6 +332,46 @@ export default { background-image: radial-gradient(circle, transparent 10%, rgba(15, 148, 28, 0.2) 30%, rgba(15, 148, 28, 0.5) 60%); animation: rippleEffect @duration linear @delay infinite; } + .inner-ripple-good-1 { + position: absolute; + top: 0; + 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%); + animation: rippleEffect @duration linear 0s infinite; + } + + .inner-ripple-good-2 { + position: absolute; + top: 0; + width: 100%; + 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%); + animation: rippleEffect @duration linear @delay infinite; + } + .inner-ripple-bad-1 { + position: absolute; + top: 0; + width: 100%; + height: 100%; + border-radius: 50%; + background-image: radial-gradient(circle, transparent 10%, rgba(165, 58, 35, 0.2) 30%, rgba(165, 58, 35, 0.5) 60%); + animation: rippleEffect @duration linear 0s infinite; + } + + .inner-ripple-bad-2 { + position: absolute; + top: 0; + width: 100%; + height: 100%; + border-radius: 50%; + transform: scale(0); + background-image: radial-gradient(circle, transparent 10%, rgba(165, 58, 35, 0.2) 30%, rgba(165, 58, 35, 0.5) 60%); + animation: rippleEffect @duration linear @delay infinite; + } } @keyframes rippleEffect { diff --git a/src/views/stationOperation/index.vue b/src/views/stationOperation/index.vue index 3acfadf..3484244 100644 --- a/src/views/stationOperation/index.vue +++ b/src/views/stationOperation/index.vue @@ -183,6 +183,7 @@ export default { dataList: [], // 左侧All Data 列表 followedDataList: [], // 关注 markerList: [], // 地图上标记点列表 + markerList_clone: [], // 地图上标记点列表 markerType: 1, // 是否绘制地图上的圆 circleRadius: 0, @@ -201,7 +202,8 @@ export default { stationTypeList: [], - treeData: [] // 台站树列表 + treeData: [], // 台站树列表 + timer: null } }, created() { @@ -210,6 +212,10 @@ export default { this.getStationTypeList() this.getStationTree() }, + destroyed () { + clearInterval(this.timer); + this.timer = null + }, methods: { // 获取站点列表 async getStationList() { @@ -218,8 +224,14 @@ export default { const res = await getAction('/jeecg-station-operation/stationOperation/findList') this.originalDataList = res // 保留初始版本 this.dataList = cloneDeep(res) - this.markerList = cloneDeep(res) - + // this.markerList = cloneDeep(res) + this.markerList_clone = cloneDeep(res) + this.getDataProvisionEfficiency(this.markerList_clone) + this.timer = setInterval(() => { + setTimeout(() => { + this.getDataProvisionEfficiency(this.markerList_clone) + }, 0); + }, 15000); this.$nextTick(() => { this.$refs.scrollContainerRef.checkScrollEnd() }) @@ -230,6 +242,26 @@ export default { } }, + // 查询台站数据提供率及有效率 + async getDataProvisionEfficiency(arr) { + this.markerList=[] + try { + const res = await getAction('/stationOperation/getDataProvisionEfficiency') + console.log("getDataProvisionEfficiency", res); + arr.forEach(item => { + res.result.forEach(data => { + if (parseInt(data.id) == item.stationId) { + item.quality = data.quality + } + }) + this.markerList.push(item) + }) + console.log("this.markerListthis.markerListthis.markerList",this.markerList); + } catch (error) { + console.error(error) + } + }, + // 获取已关注站点列表 async getFollowedStationList() { try {