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

Merge branch 'feature-station-renpy'

Browse Source
This commit is contained in:
任珮宇 2023-09-21 18:39:34 +08:00
commit 71ee6027b2
6 changed files with 267 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/CustomChart/index.vue
View File

@ -83,6 +83,6 @@ export default {
</script>
<style lang="less" scoped>
.custom-chart {
height: 100% !important;
// height: 100% !important;
}
</style>

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

@ -28,6 +28,14 @@ export default {
type: Array,
required: true
},
currList: {
type: Array,
required: true
},
orgList: {
type: Array,
required: true
},
markerType: {
type: Number,
default: 1
@ -151,23 +159,32 @@ export default {
// 初始化波纹
initRipples() {
this.list
.filter(
stationInfo =>
stationInfo.stationType !== MarkerType.NuclearFacility && stationInfo.stationType !== MarkerType.NRL
)
this.currList
// .filter(
// stationInfo =>
// stationInfo.stationType !== MarkerType.NuclearFacility && stationInfo.stationType !== MarkerType.NRL
// )
.forEach(stationInfo => {
this.map.addOverlay(this.getRipple(stationInfo))
})
},
getRipple({ lon, lat, stationId, stationType }) {
getRipple({ 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]),
@ -209,7 +226,10 @@ export default {
result.lon = decimalToDms(result.lon || result.longitude)
result.lat = decimalToDms(result.lat || result.latitude, false)
this.currStationInfo = result
let params = this.currList.find(item => {
return item.stationId === result.stationId
}) || {}
this.currStationInfo = { ...result, ...params }
} else {
this.$message.error(message)
}
@ -234,6 +254,20 @@ export default {
if (this.markerType == 2) {
this.initCircles()
}
},
currList: {
handler(newVal, oldVal) {
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.initRipples()
},
deep:true
}
}
}
@ -266,6 +300,7 @@ export default {
line-height: 30px;
border-bottom: 1px solid #0a544e;
margin-bottom: 0;
color: rgb(187, 138, 18);
}
}
@ -301,7 +336,7 @@ export default {
@duration: 1.8s;
@delay: 0.9s;
.inner-ripple-1 {
.inner-ripple-excellent-1 {
position: absolute;
top: 0;
width: 100%;
@ -311,7 +346,7 @@ export default {
animation: rippleEffect @duration linear 0s infinite;
}
.inner-ripple-2 {
.inner-ripple-excellent-2 {
position: absolute;
top: 0;
width: 100%;
@ -321,6 +356,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 {

29
src/views/stationOperation/components/MapPane.vue
View File

@ -18,15 +18,15 @@
</div>
<div>
<img
v-if="active == 1"
v-if="active == 1 && showPane"
src="@/assets/images/station-operation/station-operate-active.png"
@click="showPane = !showPane"
@click="handleHide"
/>
<img v-else src="@/assets/images/station-operation/station-operate.png" @click="onPaneChange(1)" />
</div>
<div>
<img
v-if="active == 2"
v-if="active == 2 && showPane"
src="@/assets/images/station-operation/filter-station-active.png"
@click="showPane = !showPane"
/>
@ -233,9 +233,10 @@
<!-- 右侧图表展示栏 -->
<div class="data-receive-status-chart" :class="{ 'on-screen': !leftPaneShow }">
<template v-if="showChart">
<RealTimeDataChart ref="realtimeChartRef" :list="statusList" :scale-settings="initialDataRecieveSettings" />
<RealTimeDataChart ref="realtimeChartRef" :spinning="spinLoading" :list="statusList" :scale-settings="initialDataRecieveSettings" />
<resize-observer @notify="handleResize" />
</template>
<div v-show="maskVisi" style="z-index: 1;position: absolute;top: 0;left: 0;width:100%;height: 100%;background: rgba(0, 0, 0, .45);"></div>
</div>
<!-- 右侧图表展示栏结束 -->
</div>
@ -419,7 +420,9 @@ export default {
markerList: [], // 要在地图上展示的marker列表
showPane: true
showPane: true,
spinLoading: false,
maskVisi: false
}
},
created() {
@ -468,6 +471,7 @@ export default {
// 面板改变
onPaneChange(active) {
this.showPane = true
this.active = active
const source = this.circleLayer.getSource()
source.clear() // 清理图层
@ -483,6 +487,12 @@ export default {
}
},
handleHide() {
this.showPane = !this.showPane
this.emitDrawCircle(1)
this.emitFilter()
},
// 根据 Filter 筛选Marker
emitFilter() {
const filterType = this.filterList.filter(item => item.checked).map(item => item.type)
@ -719,6 +729,8 @@ export default {
// 获取数据接收状态列表
async getDataRecieveStatusList() {
this.maskVisi = true
this.spinLoading = true
try {
this.isGettingStatusList = true
const { success, result, message } = await getAction(
@ -727,6 +739,8 @@ export default {
userId: this.$store.getters.userInfo.id
}
)
this.maskVisi = false
this.spinLoading = false
if (success) {
const statusList = []
result.forEach(item => {
@ -745,6 +759,8 @@ export default {
this.$message.error(message)
}
} catch (error) {
this.maskVisi = false
this.spinLoading = false
console.error(error)
} finally {
this.isGettingStatusList = false
@ -1157,8 +1173,7 @@ export default {
right: 15px;
width: calc(100% - 270px);
height: 100%;
overflow: auto;
padding: 0 15px 10px;
padding: 0 0 10px 15px;
border: 1px solid @borderColor;
transition: width 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);

15
src/views/stationOperation/components/RealTimeDataChart.vue
View File

@ -1,5 +1,5 @@
<template>
<div>
<div style="width: 100%;height: 100%;overflow: auto;padding-top: 76px;">
<!-- 图例 -->
<div class="legend">
<div
@ -15,6 +15,7 @@
</div>
<!-- 图例结束 -->
<custom-chart ref="customChartRef" :option="option" :height="list.length * 295"></custom-chart>
<a-spin style="z-index: 11;position: absolute;top: 45%;left: 48%;" :spinning="spinning" />
</div>
</template>
@ -79,6 +80,9 @@ export default {
title: {
type: String
},
spinning: {
type: Boolean
},
list: {
type: Array,
default: () => []
@ -295,9 +299,16 @@ export default {
<style lang="less" scoped>
.legend {
margin: 32px 0;
width: 100%;
padding: 25px 0;
display: flex;
justify-content: center;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
background: #022024;
z-index: 11;
&-item {
color: #ade6ee;

36
src/views/stationOperation/components/markerPopupColumns.js
View File

@ -116,6 +116,24 @@ export default {
}, {
label: 'TYPE',
key: 'type'
}, {
label: 'USED',
key: 'used'
}, {
label: 'PHD',
key: 'phd'
}, {
label: 'PHDF',
key: 'phdf'
}, {
label: 'MET',
key: 'met'
}, {
label: 'SOH',
key: 'soh'
}, {
label: 'PHDF+MET+SOH',
key: 'phdMetSoh'
}],
[MarkerType.ImsRnStationG]: [{
label: 'COUNTRYCODE',
@ -153,6 +171,24 @@ export default {
}, {
label: 'TYPE',
key: 'type'
}, {
label: 'USED',
key: 'used'
}, {
label: 'PHD',
key: 'phd'
}, {
label: 'PHDF',
key: 'phdf'
}, {
label: 'MET',
key: 'met'
}, {
label: 'SOH',
key: 'soh'
}, {
label: 'PHDF+MET+SOH',
key: 'phdMetSoh'
}],
[MarkerType.NRL]: [{
label: 'COUNTRYCODE',

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

@ -144,7 +144,14 @@
ref="mapRef"
token="AAPK2b935e8bbf564ef581ca3c6fcaa5f2a71ZH84cPqqFvyz3KplFRHP8HyAwJJkh6cnpcQ-qkWh5aiyDQsGJbsXglGx0QM2cPm"
>
<MapMarker :list="markerList" :marker-type="markerType" :radius="circleRadius" @markerClick="onMarkerClick" />
<MapMarker
:list="markerList"
:currList="upDateStationList"
:orgList="orgStationList"
:marker-type="markerType"
:radius="circleRadius"
@markerClick="onMarkerClick"
/>
<MapPane
ref="mapPane"
:treeData="treeData"
@ -164,7 +171,7 @@ import DataListItem from './components/DataListItem.vue'
import ScrollContainer from '@/components/ScrollContainer/index.vue'
import { getAction } from '../../api/manage'
import { cloneDeep } from 'lodash'
const key= "updateList"
export default {
components: {
Map,
@ -173,6 +180,19 @@ export default {
ScrollContainer,
DataListItem
},
watch: {
"$route": {
handler:function(val,oldVal) {
if (val.name!=="station-operation") {
this.$message.destroy()
clearInterval(this.timer);
this.timer = null
}
},
deep:true,
immediate:true
}
},
data() {
return {
activeKey: '1',
@ -183,6 +203,9 @@ export default {
dataList: [], // 左侧All Data 列表
followedDataList: [], // 关注
markerList: [], // 地图上标记点列表
markerList_clone: [], // 地图上标记点列表
upDateStationList: [], // 有效率列表（显示波纹）
orgStationList: [], // 地图上标记点列表
markerType: 1, // 是否绘制地图上的圆
circleRadius: 0,
@ -201,7 +224,9 @@ export default {
stationTypeList: [],
treeData: [] // 台站树列表
treeData: [], // 台站树列表
timer: null,
updataFilterType: []
}
},
created() {
@ -210,6 +235,10 @@ export default {
this.getStationTypeList()
this.getStationTree()
},
beforeDestroy () {
clearInterval(this.timer);
this.timer = null
},
methods: {
// 获取站点列表
async getStationList() {
@ -219,7 +248,13 @@ export default {
this.originalDataList = res // 保留初始版本
this.dataList = cloneDeep(res)
this.markerList = cloneDeep(res)
this.markerList_clone = cloneDeep(res)
this.getDataProvisionEfficiency(this.markerList_clone,"one")
this.timer = setInterval(() => {
setTimeout(() => {
this.getDataProvisionEfficiency(this.markerList_clone)
}, 0);
}, 15000);
this.$nextTick(() => {
this.$refs.scrollContainerRef.checkScrollEnd()
})
@ -230,6 +265,55 @@ export default {
}
},
// 查询台站数据提供率及有效率
async getDataProvisionEfficiency(arr, str) {
if (str && this.$route.path=="/station-operation") {
this.$message.loading({ content: 'Loading station data, please wait...', key, duration: 0 })
}
getAction('/stationOperation/getDataProvisionEfficiency').then(res => {
if (res.success) {
this.$message.destroy()
if (str && this.$route.path == "/station-operation") {
this.$message.success({ content: 'Loaded!', key, duration: 2 })
}
res.result.forEach(item => {
arr.forEach(el => {
if (parseInt(item.id) == el.stationId&&el.stationType!="Nuclear Facility"&&el.stationType!="NRL") {
item.stationType = el.stationType
item.stationId = el.stationId
}
})
})
this.orgStationList = res.result
if (this.updataFilterType.length>0) {
this.upDateStationList = this.orgStationList.filter(item => this.updataFilterType.includes(item.stationType))
} else {
this.upDateStationList = res.result
}
if (this.markerList.length > 0) {
let curList = []
this.markerList.forEach(item => {
if (item.stationType!="Nuclear Facility" && item.stationType!="NRL") {
this.orgStationList.forEach(el => {
if (parseInt(el.id) == item.stationId) {
curList.push(el)
}
})
}
})
this.upDateStationList=curList
} else {
this.upDateStationList=[]
}
} else {
this.$message.warning("This operation fails. Contact your system administrator")
}
}).catch(error => {
this.$message.destroy()
console.error(error)
})
},
// 获取已关注站点列表
async getFollowedStationList() {
try {
@ -360,6 +444,23 @@ export default {
// 修改地图上的marker列表
onChangeMarker(markerList) {
this.markerList = markerList
let curList = []
if (markerList.length>0) {
markerList.forEach(item => {
if (item.stationType!="Nuclear Facility" && item.stationType!="NRL") {
this.orgStationList.forEach(el => {
if (parseInt(el.id) == item.stationId) {
el.stationType = item.stationType
el.stationId = item.stationId
curList.push(el)
}
})
}
})
this.upDateStationList=curList
} else {
this.upDateStationList=[]
}
},
// 是否绘制圆圈
@ -372,6 +473,7 @@ export default {
* 根据类型筛选地图上的marker列表
*/
onFilterMarker({ filterType, filterDataQuality }) {
this.updataFilterType = filterType
console.log(
'%c [ filterType, filterDataQuality ]-343',
'font-size:13px; background:pink; color:#bf2c9f;',
@ -379,6 +481,7 @@ export default {
filterDataQuality
)
this.markerList = this.originalDataList.filter(item => filterType.includes(item.stationType))
this.upDateStationList = this.orgStationList.filter(item => filterType.includes(item.stationType))
},
// 地图图标点击