台站运行管理页面状态接口联调
This commit is contained in:
parent
8772c16c9b
commit
851af6c968
|
|
@ -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 = ` <div class="inner-ripple-1"></div>
|
||||
<div class="inner-ripple-2"></div>
|
||||
`
|
||||
if (quality == "excellent") {
|
||||
rippleDiv.innerHTML = ` <div class="inner-ripple-excellent-1"></div>
|
||||
<div class="inner-ripple-excellent-2"></div>
|
||||
`
|
||||
} else if (quality == "good") {
|
||||
rippleDiv.innerHTML = ` <div class="inner-ripple-good-1"></div>
|
||||
<div class="inner-ripple-good-2"></div>
|
||||
`
|
||||
} else if(quality == "bad"){
|
||||
rippleDiv.innerHTML = ` <div class="inner-ripple-bad-1"></div>
|
||||
<div class="inner-ripple-bad-2"></div>
|
||||
`
|
||||
}
|
||||
|
||||
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 {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user