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

台站监控数据信息弹框标题修改

Browse Source 
查询台站监控数据信息接口增加参数
This commit is contained in:
任珮宇 2023-10-28 15:57:25 +08:00
parent aa5b97509d
commit 7afd8fb702
1 changed files with 81 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -46,9 +46,7 @@
<!-- 站点操作 --> <!-- 站点操作 -->
<div class="station-operation" v-show="active == 1"> <div class="station-operation" v-show="active == 1">
<div class="station-operation-stations"> <div class="station-operation-stations">
<div class="map-pane-content-header"> <div class="map-pane-content-header">Stations</div>
Stations
</div>
<div class="map-pane-content-main"> <div class="map-pane-content-main">
<div class="station-operation-stations-selection"> <div class="station-operation-stations-selection">
<a-space> <a-space>
@ -58,7 +56,7 @@
> >
</a-space> </a-space>
</div> </div>
<a-divider style="background-color: #0a544e; margin: 10px 0 0;"></a-divider> <a-divider style="background-color: #0a544e; margin: 10px 0 0"></a-divider>
<!-- 站点选择树 --> <!-- 站点选择树 -->
<div class="station-list-tree"> <div class="station-list-tree">
@ -72,17 +70,13 @@
</div> </div>
</div> </div>
<div class="station-operation-infomation"> <div class="station-operation-infomation">
<div class="map-pane-content-header"> <div class="map-pane-content-header">Infomation</div>
Infomation
</div>
<div class="map-pane-content-main"> <div class="map-pane-content-main">
<div class="station-operation-infomation-content"> <div class="station-operation-infomation-content">
<p class="radius-title">Radius</p> <p class="radius-title">Radius</p>
<div class="radius-search"> <div class="radius-search">
<a-input suffix="KM" v-model="radius" type="number"></a-input> <a-input suffix="KM" v-model="radius" type="number"></a-input>
<a-button type="primary" @click="handleSearchByRadius"> <a-button type="primary" @click="handleSearchByRadius"> Search </a-button>
Search
</a-button>
</div> </div>
<div class="radius-table"> <div class="radius-table">
<a-table <a-table
@ -102,9 +96,7 @@
<!-- 站点筛选 --> <!-- 站点筛选 -->
<div class="station-filter" v-show="active == 2"> <div class="station-filter" v-show="active == 2">
<div class="map-pane-content-header"> <div class="map-pane-content-header">Filter</div>
Filter
</div>
<div class="map-pane-content-main"> <div class="map-pane-content-main">
<div class="station-filter-list"> <div class="station-filter-list">
<div <div
@ -122,7 +114,7 @@
<a-checkbox v-model="filterItem.checked"></a-checkbox> <a-checkbox v-model="filterItem.checked"></a-checkbox>
</div> </div>
</div> </div>
<a-divider style="background-color: #0a544e; margin: 10px 0 0;"></a-divider> <a-divider style="background-color: #0a544e; margin: 10px 0 0"></a-divider>
<!-- 数据质量类型 --> <!-- 数据质量类型 -->
<div class="station-data-quality-list"> <div class="station-data-quality-list">
<div <div
@ -162,9 +154,7 @@
<div class="data-receive-status-list-container"> <div class="data-receive-status-list-container">
<div class="data-receive-status-list-item"> <div class="data-receive-status-list-item">
<div class="title"> <div class="title">
<span> <span> Station </span>
Particulate Station
</span>
<img src="@/assets/images/station-operation/toggle.png" @click="leftPaneShow = !leftPaneShow" /> <img src="@/assets/images/station-operation/toggle.png" @click="leftPaneShow = !leftPaneShow" />
</div> </div>
<div class="content"> <div class="content">
@ -177,9 +167,7 @@
</div> </div>
<div class="data-receive-status-list-item"> <div class="data-receive-status-list-item">
<div class="title"> <div class="title">
<span> <span> Attribute Configuration </span>
Attribute Configuration
</span>
<img src="@/assets/images/station-operation/toggle.png" @click="leftPaneShow = !leftPaneShow" /> <img src="@/assets/images/station-operation/toggle.png" @click="leftPaneShow = !leftPaneShow" />
</div> </div>
<div class="content"> <div class="content">
@ -233,10 +221,26 @@
<!-- 右侧图表展示栏 --> <!-- 右侧图表展示栏 -->
<div class="data-receive-status-chart" :class="{ 'on-screen': !leftPaneShow }"> <div class="data-receive-status-chart" :class="{ 'on-screen': !leftPaneShow }">
<template v-if="showChart"> <template v-if="showChart">
<RealTimeDataChart ref="realtimeChartRef" :spinning="spinLoading" :list="statusList" :scale-settings="initialDataRecieveSettings" /> <RealTimeDataChart
ref="realtimeChartRef"
:spinning="spinLoading"
:list="statusList"
:scale-settings="initialDataRecieveSettings"
/>
<resize-observer @notify="handleResize" /> <resize-observer @notify="handleResize" />
</template> </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
v-show="maskVisi"
style="
z-index: 1;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.45);
"
></div>
</div> </div>
<!-- 右侧图表展示栏结束 --> <!-- 右侧图表展示栏结束 -->
</div> </div>
@ -265,44 +269,44 @@ const filterList = [
title: 'IMS RN Station(P)', title: 'IMS RN Station(P)',
type: MarkerType.ImsRnStationP, type: MarkerType.ImsRnStationP,
icon: FilterIcon[MarkerType.ImsRnStationP], icon: FilterIcon[MarkerType.ImsRnStationP],
checked: true checked: true,
}, },
{ {
title: 'IMS RN Station(G)', title: 'IMS RN Station(G)',
type: MarkerType.ImsRnStationG, type: MarkerType.ImsRnStationG,
icon: FilterIcon[MarkerType.ImsRnStationG], icon: FilterIcon[MarkerType.ImsRnStationG],
checked: true checked: true,
}, },
{ {
title: 'NRL', title: 'NRL',
type: MarkerType.NRL, type: MarkerType.NRL,
icon: FilterIcon[MarkerType.NRL], icon: FilterIcon[MarkerType.NRL],
checked: true checked: true,
}, },
{ {
title: 'Nuclear Facilities', title: 'Nuclear Facilities',
type: MarkerType.NuclearFacility, type: MarkerType.NuclearFacility,
icon: FilterIcon[MarkerType.NuclearFacility], icon: FilterIcon[MarkerType.NuclearFacility],
checked: true checked: true,
}, },
{ {
title: 'Groud monitoring station', title: 'Groud monitoring station',
type: MarkerType.GroudMonitoringStation, type: MarkerType.GroudMonitoringStation,
icon: FilterIcon[MarkerType.GroudMonitoringStation], icon: FilterIcon[MarkerType.GroudMonitoringStation],
checked: true checked: true,
}, },
{ {
title: 'car', title: 'car',
type: MarkerType.Car, type: MarkerType.Car,
icon: FilterIcon[MarkerType.Car], icon: FilterIcon[MarkerType.Car],
checked: true checked: true,
}, },
{ {
title: 'ship', title: 'ship',
type: MarkerType.Ship, type: MarkerType.Ship,
icon: FilterIcon[MarkerType.Ship], icon: FilterIcon[MarkerType.Ship],
checked: true checked: true,
} },
] ]
// Filter中的数据质量列表 // Filter中的数据质量列表
@ -310,23 +314,23 @@ const dataQualityList = [
{ {
title: 'Excellent data quality', title: 'Excellent data quality',
icon: FilterIcon.State1, icon: FilterIcon.State1,
checked: true checked: true,
}, },
{ {
title: 'Good data quality', title: 'Good data quality',
icon: FilterIcon.State2, icon: FilterIcon.State2,
checked: true checked: true,
}, },
{ {
title: 'Poor data quality', title: 'Poor data quality',
icon: FilterIcon.State3, icon: FilterIcon.State3,
checked: true checked: true,
}, },
{ {
title: 'Signal interruption', title: 'Signal interruption',
icon: FilterIcon.State4, icon: FilterIcon.State4,
checked: true checked: true,
} },
] ]
// infomation-radius 表格列 // infomation-radius 表格列
@ -335,57 +339,57 @@ const columns = [
title: 'nuclearfaclity', title: 'nuclearfaclity',
dataIndex: 'nuclearFacilityName', dataIndex: 'nuclearFacilityName',
width: 100, width: 100,
ellipsis: true ellipsis: true,
}, },
{ {
title: 'station', title: 'station',
dataIndex: 'stationName', dataIndex: 'stationName',
width: 70, width: 70,
ellipsis: true ellipsis: true,
}, },
{ {
title: 'distance', title: 'distance',
dataIndex: 'radius', dataIndex: 'radius',
width: 80, width: 80,
ellipsis: true ellipsis: true,
} },
] ]
// Attribute Configuration 检验规则(自定义，非a-form校验) // Attribute Configuration 检验规则(自定义，非a-form校验)
const rules = { const rules = {
cacheTime: { cacheTime: {
required: true, required: true,
message: 'Please Input Cache Time' message: 'Please Input Cache Time',
}, },
scaleInterval: { scaleInterval: {
required: true, required: true,
message: 'Please Input Scale Interval' message: 'Please Input Scale Interval',
}, },
timelineLength: { timelineLength: {
required: true, required: true,
message: 'Please Input Timeline Length' message: 'Please Input Timeline Length',
}, },
updateIntervalTime: { updateIntervalTime: {
required: true, required: true,
message: 'Please Input Update Interval' message: 'Please Input Update Interval',
} },
} }
export default { export default {
props: { props: {
panMovePix: { panMovePix: {
type: Number, type: Number,
default: 500 default: 500,
}, },
treeData: { treeData: {
type: Array type: Array,
} },
}, },
components: { components: {
CustomModal, CustomModal,
CustomTree, CustomTree,
RealTimeDataChart RealTimeDataChart,
}, },
data() { data() {
this.columns = columns this.columns = columns
@ -409,7 +413,7 @@ export default {
cacheTime: 15, cacheTime: 15,
scaleInterval: 120, scaleInterval: 120,
timelineLength: 1440, timelineLength: 1440,
updateIntervalTime: 5 updateIntervalTime: 5,
}, // 数据接收状态配置 }, // 数据接收状态配置
isSavingDataRecieveSettings: false, isSavingDataRecieveSettings: false,
@ -425,7 +429,7 @@ export default {
spinLoading: false, spinLoading: false,
maskVisi: false, maskVisi: false,
stationInfo: undefined stationInfo: undefined,
} }
}, },
created() { created() {
@ -448,9 +452,9 @@ export default {
this.map = map this.map = map
this.circleLayer = new VectorLayer({ this.circleLayer = new VectorLayer({
source: new VectorSource({ source: new VectorSource({
features: [] features: [],
}), }),
properties: { name: 'eventCircle' } properties: { name: 'eventCircle' },
}) })
this.map.addLayer(this.circleLayer) this.map.addLayer(this.circleLayer)
}, },
@ -498,12 +502,12 @@ export default {
// 根据 Filter 筛选Marker // 根据 Filter 筛选Marker
emitFilter() { emitFilter() {
const filterType = this.filterList.filter(item => item.checked).map(item => item.type) const filterType = this.filterList.filter((item) => item.checked).map((item) => item.type)
const filterDataQuality = this.dataQualityList.filter(item => item.checked).map(item => item.title) const filterDataQuality = this.dataQualityList.filter((item) => item.checked).map((item) => item.title)
this.$emit('filterMarker', { this.$emit('filterMarker', {
filterType, filterType,
filterDataQuality filterDataQuality,
}) })
}, },
@ -516,7 +520,7 @@ export default {
handleSelectAll() { handleSelectAll() {
this.checkedKeys = this.treeData.reduce((prev, curr) => { this.checkedKeys = this.treeData.reduce((prev, curr) => {
prev.push(curr.stationId) prev.push(curr.stationId)
prev.push(...curr.children.map(child => child.stationId)) prev.push(...curr.children.map((child) => child.stationId))
return prev return prev
}, []) }, [])
}, },
@ -549,16 +553,16 @@ export default {
return return
} }
const stationIds = this.checkedKeys.filter(key => -1 == key.toString().indexOf('root_')) const stationIds = this.checkedKeys.filter((key) => -1 == key.toString().indexOf('root_'))
try { try {
this.isGettingInfomationList = true this.isGettingInfomationList = true
const { const {
success, success,
result: { GIS: markerList, table }, result: { GIS: markerList, table },
message message,
} = await postAction('/jeecg-station-operation/stationOperation/getHitEquList', { } = await postAction('/jeecg-station-operation/stationOperation/getHitEquList', {
radius: this.radius, radius: this.radius,
stationIds stationIds,
}) })
if (success) { if (success) {
const source = this.circleLayer.getSource() const source = this.circleLayer.getSource()
@ -573,7 +577,7 @@ export default {
this.dataSource = data // 设置Infomation表格内容 this.dataSource = data // 设置Infomation表格内容
this.stationList = [] // 台站列表 this.stationList = [] // 台站列表
markerList.forEach(markerItem => { markerList.forEach((markerItem) => {
// 返回的数据类型不符合要求，根据stationId判断是否是台站，增加台站类型和转换字段，以便进行marker的绘制 // 返回的数据类型不符合要求，根据stationId判断是否是台站，增加台站类型和转换字段，以便进行marker的绘制
if (markerItem.stationId) { if (markerItem.stationId) {
// 是台站 // 是台站
@ -656,13 +660,13 @@ export default {
try { try {
await this.validateForm(this.dataRecieveStatusModel, rules) await this.validateForm(this.dataRecieveStatusModel, rules)
try { try {
const stationIds = this.dataStatusCheckedKeys.filter(key => -1 == key.toString().indexOf('root_')) const stationIds = this.dataStatusCheckedKeys.filter((key) => -1 == key.toString().indexOf('root_'))
this.isSavingDataRecieveSettings = true this.isSavingDataRecieveSettings = true
const { success, message } = await postAction( const { success, message } = await postAction(
'/jeecg-station-operation/sysUserFocusStation/saveUserFocusByUserId', '/jeecg-station-operation/sysUserFocusStation/saveUserFocusByUserId',
{ {
stationIds, stationIds,
...this.dataRecieveStatusModel ...this.dataRecieveStatusModel,
} }
) )
if (success) { if (success) {
@ -704,7 +708,7 @@ export default {
const { success, result, message } = await getAction( const { success, result, message } = await getAction(
'/jeecg-station-operation/sysUserFocusStation/findUserFocusByUserId', '/jeecg-station-operation/sysUserFocusStation/findUserFocusByUserId',
{ {
userId: this.$store.getters.userInfo.id userId: this.$store.getters.userInfo.id,
} }
) )
if (success) { if (success) {
@ -740,24 +744,25 @@ export default {
const { success, result, message } = await getAction( const { success, result, message } = await getAction(
'/jeecg-station-operation/stationOperation/getDataReceivingStatus', '/jeecg-station-operation/stationOperation/getDataReceivingStatus',
{ {
userId: this.$store.getters.userInfo.id userId: this.$store.getters.userInfo.id,
oneStationId: (this.stationInfo && this.stationInfo.stationId) || '',
} }
) )
this.maskVisi = false this.maskVisi = false
this.spinLoading = false this.spinLoading = false
if (success) { if (success) {
// 如果从地图的Marker上点开，且点开的为已关注的台站，则把这个台站放到前面 // 如果从地图的Marker上点开，且点开的为已关注的台站，则把这个台站放到前面
if(this.stationInfo) { if (this.stationInfo) {
result.sort(({ stationId }) => stationId == this.stationInfo.stationId? -1: 1) // chrome 和 firefox下表现不同，但都能将目标值排到第一个 result.sort(({ stationId }) => (stationId == this.stationInfo.stationId ? -1 : 1)) // chrome 和 firefox下表现不同，但都能将目标值排到第一个
} }
const statusList = [] const statusList = []
result.forEach(item => { result.forEach((item) => {
const detectorArr = item.detectors[item.stationId] const detectorArr = item.detectors[item.stationId]
detectorArr.forEach(detector => { detectorArr.forEach((detector) => {
Object.values(detector).forEach(value => { Object.values(detector).forEach((value) => {
statusList.push({ statusList.push({
title: `${item.stationCode} ${value.detectorId}`, title: `${item.stationCode} ${value.detectorId}`,
dataList: value.dataList dataList: value.dataList,
}) })
}) })
}) })
@ -777,27 +782,27 @@ export default {
handleResize() { handleResize() {
this.$refs.realtimeChartRef.resize() this.$refs.realtimeChartRef.resize()
} },
}, },
watch: { watch: {
dataStatusModalVisible(val) { dataStatusModalVisible(val) {
if (val) { if (val) {
this.dataStatusCheckedKeys = this.initialDataRecieveSettings.sysUserFocusStations.map(item => this.dataStatusCheckedKeys = this.initialDataRecieveSettings.sysUserFocusStations.map((item) =>
parseInt(item.stationId) parseInt(item.stationId)
) )
this.dataRecieveStatusModel = { this.dataRecieveStatusModel = {
cacheTime: this.initialDataRecieveSettings.cacheTime, cacheTime: this.initialDataRecieveSettings.cacheTime,
scaleInterval: this.initialDataRecieveSettings.scaleInterval, scaleInterval: this.initialDataRecieveSettings.scaleInterval,
timelineLength: this.initialDataRecieveSettings.timelineLength, timelineLength: this.initialDataRecieveSettings.timelineLength,
updateIntervalTime: this.initialDataRecieveSettings.updateIntervalTime updateIntervalTime: this.initialDataRecieveSettings.updateIntervalTime,
} }
this.startGetDataReceiveStatusList() this.startGetDataReceiveStatusList()
} else { } else {
clearInterval(this.timer) clearInterval(this.timer)
} }
} },
} },
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@ -821,7 +826,7 @@ export default {
// 操作栏 // 操作栏
&-operators { &-operators {
user-select: none; user-select: none;
pointer-events:all; pointer-events: all;
height: 200px; height: 200px;
img { img {