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

feat: 增加自动刷新功能

Browse Source
This commit is contained in:
Xu Zhimeng 2025-02-12 17:45:03 +08:00
parent 5e563ac93d
commit b02bb5490f
8 changed files with 286 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
public/static/config.js
View File

@ -14,5 +14,10 @@ window._CONFIG = {
online:
'https://ibasemaps-api.arcgis.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}?token=AAPK2b935e8bbf564ef581ca3c6fcaa5f2a71ZH84cPqqFvyz3KplFRHP8HyAwJJkh6cnpcQ-qkWh5aiyDQsGJbsXglGx0QM2cPm',
offline: 'http://localhost:8001/map/{z}/{x}/{y}.jpg'
},
// alarm模块alarm history配置
VUE_APP_ALARM_HISTORY: {
refreshInterval: 30 * 1000, // 刷新间隔
alarmTimeRange: 60 * 60 * 1000 // 告警时间范围
}
}

74
src/views/abnormalAlarm/alarmCenter/alarmHistory/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div style="height: 100%">
<SearchBar type="alarmCenter" @search="handleSearch"></SearchBar>
<SearchBar ref="searchBarRef" type="alarmCenter" @search="handleSearch"></SearchBar>
<div class="chart-layout" id="alarmChartBar"></div>
<a-card :bordered="false" style="height: calc(100% - 280px); margin-left: 20px">
<a-tabs default-active-key="alarmHistory" @change="handleTabChange">
@ -16,7 +16,7 @@
:scroll="{ y: 390 }"
>
<template slot="info" slot-scope="{ record }">
<a-popover>
<a-popover :class="{ 'is-recent': record.isRecent }">
<template slot="content">
{{ JSON.parse(record.alarmInfo) }}{{ JSON.parse(record.operator).units }}
</template>
@ -101,6 +101,8 @@ const columns = [
},
]
const { refreshInterval, alarmTimeRange } = window._CONFIG.VUE_APP_ALARM_HISTORY
export default {
components: {
SearchBar,
@ -139,27 +141,27 @@ export default {
paramsArg: {},
}
},
mounted() {
let currentTime = moment()
let agoDays = moment().subtract(6, 'days')
this.handleSearch({ startDate: agoDays.format('YYYY-MM-DD'), endDate: currentTime.format('YYYY-MM-DD') })
activated() {
this.$refs.searchBarRef.onSearch()
},
deactivated() {
this.stopTimer()
},
methods: {
getUid() {
return (Math.random() + new Date().getTime()).toString(32).slice(0, 8)
},
handleSearch({ startDate, endDate, types }) {
handleSearch(queryParams) {
this.ipagination.current = 1
const { alarmDate, types } = queryParams
const [startDate, endDate] = alarmDate
if (startDate && endDate) {
this.paramsArg = {
startDate,
endDate,
types,
}
this.paramsArg = queryParams
this.getAlarmLogBar({ startDate, endDate, types })
this.getTypeAlarmPie({ startDate, endDate })
this.getAlarmLogTable({ startDate, endDate, types })
this.getAlarmTop({ startDate, endDate, types })
this.getAlarmLogTable()
} else {
this.$message.warning('The Start Time Or End Time Cannot Be Empty!')
}
@ -180,20 +182,30 @@ export default {
}
})
},
getAlarmLogTable(obj) {
getAlarmLogTable() {
const { alarmDate, types, autoRefresh } = this.paramsArg
const [startDate, endDate] = alarmDate
this.loading = true
let params = {
pageNo: this.ipagination.current,
pageSize: this.ipagination.pageSize,
type: obj.types || null,
startDate: obj.startDate,
endDate: obj.endDate,
type: types || null,
startDate,
endDate,
}
postAction('/alarmLog/findPage', params).then((res) => {
this.loading = false
if (res.success) {
this.ipagination.total = res.result.total
res.result.records.forEach((item) => {
const isRecent = moment(item.alarmStartDate).isAfter(moment().add(-alarmTimeRange, 'millisecond'))
item.isRecent = isRecent
})
this.dataSource = res.result.records
if (autoRefresh) {
this.startTimer()
}
} else {
this.$message.warning('This operation fails. Contact your system administrator')
}
@ -285,12 +297,12 @@ export default {
handlePageChange(page, pageSize) {
this.ipagination.current = page
this.ipagination.pageSize = pageSize
this.getAlarmLogTable(this.paramsArg)
this.getAlarmLogTable()
},
handleSizeChange(current, size) {
this.ipagination.current = current
this.ipagination.pageSize = size
this.getAlarmLogTable(this.paramsArg)
this.getAlarmLogTable()
},
handleTabChange(key) {
if (key == 'alarmAnalysis') {
@ -455,6 +467,18 @@ export default {
this.alarmTop.resize()
})
},
startTimer() {
this.timer = window.setTimeout(() => {
this.$refs.searchBarRef.handleAutoRefreshChange()
}, refreshInterval)
},
stopTimer() {
if (this.timer) {
window.clearTimeout(this.timer)
this.timer = null
}
},
},
}
</script>
@ -521,4 +545,16 @@ export default {
bottom: 0;
transform: translateX(-50%);
}
.is-recent {
color: #f62424;
}
.custom-table {
::v-deep {
.ant-table-row-cell-ellipsis:has(.is-recent) {
color: #f62424;
}
}
}
</style>

2
src/views/abnormalAlarm/analysisMonitor/alarmAnalysis/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div style="height: 100%">
<SearchBar type="alarmAnalysis" @search="handleSearch"></SearchBar>
<SearchBar type="alarmAnalysis" @search="handleSearch" :show-auto-refresh="false"></SearchBar>
<div style="width: 100%; height: calc(100% - 50px)">
<a-spin :spinning="spinning">
<div class="chart-layout" id="analysisChartBar"></div>

80
src/views/abnormalAlarm/analysisMonitor/alarmHistory/index.vue
View File

@ -1,7 +1,7 @@
<template>
<div style="height: 100%">
<div v-if="!isDetail" style="height: 100%">
<SearchBar type="analysisMonitor" :options="stationOptions" @search="handleSearch"></SearchBar>
<SearchBar ref="searchBarRef" type="analysisMonitor" :options="stationOptions" @search="handleSearch"></SearchBar>
<div class="analysis-main">
<TableList
size="middle"
@ -59,6 +59,7 @@
white-space: nowrap;
text-overflow: ellipsis;
"
:class="{ 'is-recent': record.isRecent }"
>{{ text }}</span
>
</a-popover>
@ -272,6 +273,9 @@ const columns_info = [
width: 200,
},
]
const { refreshInterval, alarmTimeRange } = window._CONFIG.VUE_APP_ALARM_HISTORY
export default {
components: {
SearchBar,
@ -282,10 +286,7 @@ export default {
popClicked: false,
popHovered: false,
stationOptions: [],
paramsArg: {
startDate: dateFormat(new Date(), 'yyyy-MM-dd'),
endDate: dateFormat(new Date(), 'yyyy-MM-dd'),
},
paramsArg: {},
columns,
columns_info,
dataSource: [],
@ -312,19 +313,14 @@ export default {
sampleInfo: {},
}
},
mounted() {
this.getBeforeDate(6)
activated() {
this.getStationList()
this.getPageData()
this.$refs.searchBarRef.onSearch()
},
deactivated() {
this.stopTimer()
},
methods: {
// 获取n天前的日期
getBeforeDate(n) {
let currentTime = moment()
let agoDays = moment().subtract(n, 'days')
this.paramsArg.startDate = agoDays.format('YYYY-MM-DD')
this.paramsArg.endDate = currentTime.format('YYYY-MM-DD')
},
handleHoverChange(visible, row) {
row.popClicked = false
row.popHovered = visible
@ -352,13 +348,17 @@ export default {
})
},
getPageData() {
const { alarmDate, sources, stations, nuclides, autoRefresh } = this.paramsArg
const [startDate, endDate] = alarmDate
this.stopTimer()
this.loading = true
let param = {
source: this.paramsArg.sources,
stations: this.paramsArg.stations,
nuclides: this.paramsArg.nuclides,
startDate: this.paramsArg.startDate,
endDate: this.paramsArg.endDate,
source: sources,
stations,
nuclides,
startDate,
endDate,
pageNo: this.ipagination.current,
pageSize: this.ipagination.pageSize,
}
@ -366,13 +366,20 @@ export default {
this.loading = false
if (res.success) {
this.dataSource = res.result.records.map((item) => {
const isRecent = moment(item.alarmStartDate).isAfter(moment().add(-alarmTimeRange, 'millisecond'))
return {
...item,
popClicked: false,
popHovered: false,
isRecent,
}
})
this.ipagination.total = res.result.total
if (autoRefresh) {
this.startTimer()
}
} else {
this.$message.warning('This operation fails. Contact your system administrator')
}
@ -384,14 +391,9 @@ export default {
this.loading = false
})
},
handleSearch({ startDate, endDate, stations, sources }) {
handleSearch(queryParams) {
this.ipagination.current = 1
this.paramsArg = {
startDate,
endDate,
stations,
sources,
}
this.paramsArg = queryParams
this.getPageData()
},
async rowClick(record) {
@ -415,6 +417,18 @@ export default {
handleback() {
this.isDetail = false
},
startTimer() {
this.timer = window.setTimeout(() => {
this.$refs.searchBarRef.handleAutoRefreshChange()
}, refreshInterval)
},
stopTimer() {
if (this.timer) {
window.clearTimeout(this.timer)
this.timer = null
}
},
},
}
</script>
@ -520,4 +534,16 @@ export default {
background-color: rgba(13, 113, 139, 0.2);
}
}
.is-recent {
color: #f62424;
}
.custom-table {
::v-deep {
.ant-table-row-cell-ellipsis:has(.is-recent) {
color: #f62424;
}
}
}
</style>

31
src/views/abnormalAlarm/components/searchBar.vue
View File

@ -115,11 +115,7 @@
</a-col>
<a-col flex="380px">
<a-form-model-item label="Alarm date">
<a-range-picker
dropdownClassName="asd"
:default-value="[moment(queryParams.startDate), moment(queryParams.endDate)]"
@change="onRangeDateChange"
/>
<a-range-picker dropdownClassName="asd" v-model="queryParams.alarmDate" value-format="YYYY-MM-DD" />
</a-form-model-item>
</a-col>
<a-col flex="108px">
@ -128,12 +124,16 @@
Search
</a-button>
</a-col>
<a-col v-if="showAutoRefresh">
<a-form-model-item label=" ">
<a-checkbox v-model="queryParams.autoRefresh" @change="handleAutoRefreshChange">Auto Refresh</a-checkbox>
</a-form-model-item>
</a-col>
</a-row>
</div>
</template>
<script>
import dateFormat from '@/components/jeecg/JEasyCron/format-date'
import moment from 'moment'
export default {
props: {
@ -145,6 +145,10 @@ export default {
type: Array,
default: () => [],
},
showAutoRefresh: {
type: Boolean,
default: true,
},
},
components: {
VNodes: {
@ -187,8 +191,8 @@ export default {
names: undefined,
stations: undefined,
sources: undefined,
startDate: moment().subtract(6, 'days').format('YYYY-MM-DD'),
endDate: moment().format('YYYY-MM-DD'),
alarmDate: [moment().subtract(6, 'days').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')],
autoRefresh: false, // 是否自动刷新
},
}
},
@ -293,13 +297,16 @@ export default {
this.allVal_source = false
}
},
onRangeDateChange(date, dateString) {
this.queryParams.startDate = dateString[0]
this.queryParams.endDate = dateString[1]
},
onSearch() {
this.$emit('search', this.queryParams)
},
handleAutoRefreshChange() {
if (this.queryParams.autoRefresh) {
this.$set(this.queryParams.alarmDate, 1, moment().format('YYYY-MM-DD'))
this.onSearch()
}
},
},
}
</script>

74
src/views/abnormalAlarm/databaseMonitor/alarmHistory/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div style="height: 100%">
<SearchBar type="DbMonitor" :options="nameOptions" @search="handleSearch"></SearchBar>
<SearchBar ref="searchBarRef" type="DbMonitor" :options="nameOptions" @search="handleSearch"></SearchBar>
<div class="server-main">
<TableList
size="middle"
@ -13,7 +13,7 @@
:scroll="{ y: 655 }"
>
<template slot="info" slot-scope="{ record }">
<a-popover>
<a-popover :class="{ 'is-recent': record.isRecent }">
<template slot="content">
{{ JSON.parse(record.alarmInfo) }}{{ JSON.parse(record.operator).units }}
</template>
@ -69,6 +69,9 @@ const columns = [
},
},
]
const { refreshInterval, alarmTimeRange } = window._CONFIG.VUE_APP_ALARM_HISTORY
export default {
components: {
SearchBar,
@ -95,11 +98,12 @@ export default {
paramsArg: {},
}
},
mounted() {
let currentTime = moment()
let agoDays = moment().subtract(6, 'days')
activated() {
this.getDbList()
this.getDbAlarmHistory({ startDate: agoDays.format('YYYY-MM-DD'), endDate: currentTime.format('YYYY-MM-DD') })
this.$refs.searchBarRef.onSearch()
},
deactivated() {
this.stopTimer()
},
methods: {
getDbList() {
@ -116,21 +120,21 @@ export default {
}
})
},
handleSearch({ startDate, endDate, names }) {
handleSearch(queryParams) {
this.ipagination.current = 1
this.paramsArg = {
startDate,
endDate,
names,
}
this.getDbAlarmHistory({ startDate, endDate, names })
this.paramsArg = queryParams
this.getDbAlarmHistory()
},
getDbAlarmHistory(obj) {
getDbAlarmHistory() {
const { alarmDate, names, autoRefresh } = this.paramsArg
const [startDate, endDate] = alarmDate
this.stopTimer()
this.loading = true
let params = {
sourceId: obj.names || null,
startDate: obj.startDate,
endDate: obj.endDate,
sourceId: names || null,
startDate: startDate,
endDate: endDate,
pageNo: this.ipagination.current,
pageSize: this.ipagination.pageSize,
}
@ -139,12 +143,21 @@ export default {
this.loading = false
if (res.success) {
this.ipagination.total = res.result.total
res.result.records.forEach((item) => {
const isRecent = moment(item.alarmStartDate).isAfter(moment().add(-alarmTimeRange, 'millisecond'))
item.isRecent = isRecent
})
this.dataSource = res.result.records
if (autoRefresh) {
this.startTimer()
}
} else {
this.$message.warning('This operation fails. Contact your system administrator')
}
})
.catch((err) => {
console.log('%c [ err ]-157', 'font-size:13px; background:pink; color:#bf2c9f;', err)
this.loading = false
this.$message.warning('This operation fails. Contact your system administrator')
})
@ -152,12 +165,23 @@ export default {
handlePageChange(page, pageSize) {
this.ipagination.current = page
this.ipagination.pageSize = pageSize
this.getDbAlarmHistory(this.paramsArg)
this.getDbAlarmHistory()
},
handleSizeChange(current, size) {
this.ipagination.current = current
this.ipagination.pageSize = size
this.getDbAlarmHistory(this.paramsArg)
this.getDbAlarmHistory()
},
startTimer() {
this.timer = window.setTimeout(() => {
this.$refs.searchBarRef.handleAutoRefreshChange()
}, refreshInterval)
},
stopTimer() {
if (this.timer) {
window.clearTimeout(this.timer)
this.timer = null
}
},
},
}
@ -183,4 +207,16 @@ export default {
font-size: 16px;
// color: #f62424;
}
.is-recent {
color: #f62424;
}
.custom-table {
::v-deep {
.ant-table-row-cell-ellipsis:has(.is-recent) {
color: #f62424;
}
}
}
</style>

74
src/views/abnormalAlarm/emailMonitor/alarmHistory/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div style="height: 100%">
<SearchBar type="emailMonitor" :options="nameOptions" @search="handleSearch"></SearchBar>
<SearchBar ref="searchBarRef" type="emailMonitor" :options="nameOptions" @search="handleSearch"></SearchBar>
<div class="server-main">
<TableList
size="middle"
@ -13,7 +13,7 @@
:scroll="{ y: 655 }"
>
<template slot="info" slot-scope="{ record }">
<a-popover>
<a-popover :class="{ 'is-recent': record.isRecent }">
<template slot="content">
{{ JSON.parse(record.alarmInfo) }}{{ JSON.parse(record.operator).units }}
</template>
@ -69,6 +69,9 @@ const columns = [
},
},
]
const { refreshInterval, alarmTimeRange } = window._CONFIG.VUE_APP_ALARM_HISTORY
export default {
components: {
SearchBar,
@ -95,11 +98,12 @@ export default {
paramsArg: {},
}
},
mounted() {
let currentTime = moment()
let agoDays = moment().subtract(6, 'days')
activated() {
this.getEmailList()
this.getEmailAlarmHistory({ startDate: agoDays.format('YYYY-MM-DD'), endDate: currentTime.format('YYYY-MM-DD') })
this.$refs.searchBarRef.onSearch()
},
deactivated() {
this.stopTimer()
},
methods: {
getEmailList() {
@ -116,21 +120,21 @@ export default {
}
})
},
handleSearch({ startDate, endDate, names }) {
handleSearch(queryParams) {
this.ipagination.current = 1
this.paramsArg = {
startDate,
endDate,
names,
}
this.getEmailAlarmHistory({ startDate, endDate, names })
this.paramsArg = queryParams
this.getEmailAlarmHistory()
},
getEmailAlarmHistory(obj) {
getEmailAlarmHistory() {
const { alarmDate, names, autoRefresh } = this.paramsArg
const [startDate, endDate] = alarmDate
this.stopTimer()
this.loading = true
let params = {
sourceId: obj.names || null,
startDate: obj.startDate,
endDate: obj.endDate,
sourceId: names || null,
startDate,
endDate,
pageNo: this.ipagination.current,
pageSize: this.ipagination.pageSize,
}
@ -139,7 +143,16 @@ export default {
this.loading = false
if (res.success) {
this.ipagination.total = res.result.total
res.result.records.forEach((item) => {
const isRecent = moment(item.alarmStartDate).isAfter(moment().add(-alarmTimeRange, 'millisecond'))
item.isRecent = isRecent
})
this.dataSource = res.result.records
if (autoRefresh) {
this.startTimer()
}
} else {
this.$message.warning('This operation fails. Contact your system administrator')
}
@ -152,12 +165,23 @@ export default {
handlePageChange(page, pageSize) {
this.ipagination.current = page
this.ipagination.pageSize = pageSize
this.getEmailAlarmHistory(this.paramsArg)
this.getEmailAlarmHistory()
},
handleSizeChange(current, size) {
this.ipagination.current = current
this.ipagination.pageSize = size
this.getEmailAlarmHistory(this.paramsArg)
this.getEmailAlarmHistory()
},
startTimer() {
this.timer = window.setTimeout(() => {
this.$refs.searchBarRef.handleAutoRefreshChange()
}, refreshInterval)
},
stopTimer() {
if (this.timer) {
window.clearTimeout(this.timer)
this.timer = null
}
},
},
}
@ -183,4 +207,16 @@ export default {
font-size: 18px;
color: #f62424;
}
.is-recent {
color: #f62424;
}
.custom-table {
::v-deep {
.ant-table-row-cell-ellipsis:has(.is-recent) {
color: #f62424;
}
}
}
</style>

62
src/views/abnormalAlarm/serverMonitor/alarmHistory/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div style="height: 100%">
<SearchBar type="serverMonitor" :options="nameOptions" @search="handleSearch"></SearchBar>
<SearchBar ref="searchBarRef" type="serverMonitor" :options="nameOptions" @search="handleSearch"></SearchBar>
<div class="server-main">
<TableList
size="middle"
@ -13,7 +13,7 @@
:scroll="{ y: 655 }"
>
<template slot="info" slot-scope="{ record }">
<a-popover>
<a-popover :class="{ 'is-recent': record.isRecent }">
<template slot="content">
{{ JSON.parse(record.alarmInfo) }}{{ JSON.parse(record.operator).units }}
</template>
@ -69,6 +69,9 @@ const columns = [
},
},
]
const { refreshInterval, alarmTimeRange } = window._CONFIG.VUE_APP_ALARM_HISTORY
export default {
components: {
SearchBar,
@ -95,11 +98,12 @@ export default {
paramsArg: {},
}
},
mounted() {
let currentTime = moment()
let agoDays = moment().subtract(6, 'days')
activated() {
this.getServerList()
this.getServerAlarmHistory({ startDate: agoDays.format('YYYY-MM-DD'), endDate: currentTime.format('YYYY-MM-DD') })
this.$refs.searchBarRef.onSearch()
},
deactivated() {
this.stopTimer()
},
methods: {
getServerList() {
@ -116,21 +120,21 @@ export default {
}
})
},
handleSearch({ startDate, endDate, names }) {
handleSearch(queryParams) {
this.ipagination.current = 1
this.paramsArg = {
startDate,
endDate,
names,
}
this.getServerAlarmHistory({ startDate, endDate, names })
this.paramsArg = queryParams
this.getServerAlarmHistory()
},
getServerAlarmHistory(obj) {
getServerAlarmHistory() {
const { alarmDate, names, autoRefresh } = this.paramsArg
const [startDate, endDate] = alarmDate
this.stopTimer()
this.loading = true
let params = {
sourceId: obj.names || null,
startDate: obj.startDate,
endDate: obj.endDate,
sourceId: names || null,
startDate: startDate,
endDate: endDate,
pageNo: this.ipagination.current,
pageSize: this.ipagination.pageSize,
}
@ -139,7 +143,16 @@ export default {
this.loading = false
if (res.success) {
this.ipagination.total = res.result.total
res.result.records.forEach((item) => {
const isRecent = moment(item.alarmStartDate).isAfter(moment().add(-alarmTimeRange, 'millisecond'))
item.isRecent = isRecent
})
this.dataSource = res.result.records
if (autoRefresh) {
this.startTimer()
}
} else {
this.$message.warning('This operation fails. Contact your system administrator')
}
@ -152,12 +165,23 @@ export default {
handlePageChange(page, pageSize) {
this.ipagination.current = page
this.ipagination.pageSize = pageSize
this.getServerAlarmHistory(this.paramsArg)
this.getServerAlarmHistory()
},
handleSizeChange(current, size) {
this.ipagination.current = current
this.ipagination.pageSize = size
this.getServerAlarmHistory(this.paramsArg)
this.getServerAlarmHistory()
},
startTimer() {
this.timer = window.setTimeout(() => {
this.$refs.searchBarRef.handleAutoRefreshChange()
}, refreshInterval)
},
stopTimer() {
if (this.timer) {
window.clearTimeout(this.timer)
this.timer = null
}
},
},
}