From 851af6c968582ce59acce74450bf1fa02f30fc23 Mon Sep 17 00:00:00 2001 From: renpy Date: Fri, 25 Aug 2023 11:05:10 +0800 Subject: [PATCH] =?UTF-8?q?=20=E5=8F=B0=E7=AB=99=E8=BF=90=E8=A1=8C?= =?UTF-8?q?=E7=AE=A1=E7=90=86=E9=A1=B5=E9=9D=A2=E7=8A=B6=E6=80=81=E6=8E=A5?= =?UTF-8?q?=E5=8F=A3=E8=81=94=E8=B0=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../stationOperation/components/MapMarker.vue | 65 +++++++++++++++++-- src/views/stationOperation/index.vue | 38 ++++++++++- 2 files changed, 93 insertions(+), 10 deletions(-) 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 {