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

曲线图界面中，请求接口增加 loading，及修复一些问题

Browse Source 
删除memory、disk
This commit is contained in:
任珮宇 2024-01-30 15:50:19 +08:00
parent 2f00795b75
commit a00d8465c0
4 changed files with 101 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,17 +1,19 @@
<template> <template>
<div style="height: 100%"> <div style="height: 100%">
<SearchBar type="alarmAnalysis" @search="handleSearch"></SearchBar> <SearchBar type="alarmAnalysis" @search="handleSearch"></SearchBar>
<div class="chart-layout" id="analysisChartBar"></div> <a-spin :spinning="spinning">
<div class="chart-box"> <div class="chart-layout" id="analysisChartBar"></div>
<div class="chart-box-left"> <div class="chart-box">
<BoxTitle title="Station Alarm number"></BoxTitle> <div class="chart-box-left">
<div class="chart-box-left-bar" id="chartLeft"></div> <BoxTitle title="Station Alarm number"></BoxTitle>
<div class="chart-box-left-bar" id="chartLeft"></div>
</div>
<div class="chart-box-right">
<BoxTitle title="Anaysis Sources Alarms"></BoxTitle>
<div class="chart-box-right-pie" id="chartRight"></div>
</div>
</div> </div>
<div class="chart-box-right"> </a-spin>
<BoxTitle title="Anaysis Sources Alarms"></BoxTitle>
<div class="chart-box-right-pie" id="chartRight"></div>
</div>
</div>
</div> </div>
</template> </template>
@ -29,6 +31,7 @@ export default {
}, },
data() { data() {
return { return {
spinning: false,
xData: [], xData: [],
yData: [], yData: [],
xData_left: [], xData_left: [],
@ -50,6 +53,7 @@ export default {
endDate, endDate,
types, types,
} }
this.spinning = true
this.getAnalysisLogBar({ startDate, endDate }) this.getAnalysisLogBar({ startDate, endDate })
this.getStationNum({ startDate, endDate }) this.getStationNum({ startDate, endDate })
this.getAnalysisSource({ startDate, endDate }) this.getAnalysisSource({ startDate, endDate })
@ -59,45 +63,60 @@ export default {
startDate: obj.startDate, startDate: obj.startDate,
endDate: obj.endDate, endDate: obj.endDate,
} }
getAction('/alarmAnalysisLog/byTime', params).then((res) => { getAction('/alarmAnalysisLog/byTime', params)
if (res.success) { .then((res) => {
this.xData = res.result.xData this.spinning = false
this.yData = res.result.yData if (res.success) {
this.drawAnalysis_bar() this.xData = res.result.xData
} else { this.yData = res.result.yData
this.$message.warning('This operation fails. Contact your system administrator') this.drawAnalysis_bar()
} } else {
}) this.$message.warning('This operation fails. Contact your system administrator')
}
})
.finally(() => {
this.spinning = false
})
}, },
getStationNum(obj) { getStationNum(obj) {
let params = { let params = {
startDate: obj.startDate, startDate: obj.startDate,
endDate: obj.endDate, endDate: obj.endDate,
} }
getAction('/alarmAnalysisLog/byStatoin', params).then((res) => { getAction('/alarmAnalysisLog/byStatoin', params)
if (res.success) { .then((res) => {
this.xData_left = res.result.xData this.spinning = false
this.yData_left = res.result.yData if (res.success) {
this.drawLeftChart() this.xData_left = res.result.xData
} else { this.yData_left = res.result.yData
this.$message.warning('This operation fails. Contact your system administrator') this.drawLeftChart()
} } else {
}) this.$message.warning('This operation fails. Contact your system administrator')
}
})
.finally(() => {
this.spinning = false
})
}, },
getAnalysisSource(obj) { getAnalysisSource(obj) {
let params = { let params = {
startDate: obj.startDate, startDate: obj.startDate,
endDate: obj.endDate, endDate: obj.endDate,
} }
getAction('/alarmAnalysisLog/bySource', params).then((res) => { getAction('/alarmAnalysisLog/bySource', params)
if (res.success) { .then((res) => {
this.pieData = res.result.pieData this.spinning = false
this.pieTotal = res.result.pieTotal if (res.success) {
this.drawRightChart() this.pieData = res.result.pieData
} else { this.pieTotal = res.result.pieTotal
this.$message.warning('This operation fails. Contact your system administrator') this.drawRightChart()
} } else {
}) this.$message.warning('This operation fails. Contact your system administrator')
}
})
.finally(() => {
this.spinning = false
})
}, },
drawAnalysis_bar() { drawAnalysis_bar() {
let myChart = echarts.init(document.getElementById('analysisChartBar')) let myChart = echarts.init(document.getElementById('analysisChartBar'))

48
src/views/abnormalAlarm/databaseMonitor/instances/monitor.vue
View File

@ -2,21 +2,23 @@
<div style="height: 100%"> <div style="height: 100%">
<ConditionBox :value="queryParams" @change="getData" @refresh="getData"></ConditionBox> <ConditionBox :value="queryParams" @change="getData" @refresh="getData"></ConditionBox>
<div class="monitor-content"> <div class="monitor-content">
<a-row :gutter="10" style="height: 100%"> <a-spin :spinning="spinning">
<a-col :span="12" style="height: 33.3333%" v-for="(el, i) in chartData" :key="i"> <a-row :gutter="10" style="height: 100%">
<div class="monitor-content-item"> <a-col :span="12" style="height: 33.3333%" v-for="(el, i) in chartData" :key="i">
<AreaChart <div class="monitor-content-item">
:title="el.title" <AreaChart
:layout="`area${i}`" :title="el.title"
:color="el.color" :layout="`area${i}`"
:dataSource="el.list" :color="el.color"
:newUnits="el.newUnits" :dataSource="el.list"
:units="el.units" :newUnits="el.newUnits"
> :units="el.units"
</AreaChart> >
</div> </AreaChart>
</a-col> </div>
</a-row> </a-col>
</a-row>
</a-spin>
<!-- <div style="height: auto; margin-top: 15px; padding-right: 10px"> <!-- <div style="height: auto; margin-top: 15px; padding-right: 10px">
<BoxTitle title="Connect List"></BoxTitle> <BoxTitle title="Connect List"></BoxTitle>
<a-row :gutter="20" style="height: auto; margin-top: 15px"> <a-row :gutter="20" style="height: auto; margin-top: 15px">
@ -60,6 +62,7 @@ export default {
}, },
data() { data() {
return { return {
spinning: false,
queryParams: { queryParams: {
hostId: '', hostId: '',
start: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'), start: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
@ -360,7 +363,8 @@ export default {
methods: { methods: {
// 获取数据 // 获取数据
async getData() { async getData() {
const hide = this.$message.loading('loading...', 0) // const hide = this.$message.loading('loading...', 0)
this.spinning = true
try { try {
const { success, result, message } = await getAction('/systemMonitor/dbDetail', this.queryParams) const { success, result, message } = await getAction('/systemMonitor/dbDetail', this.queryParams)
if (success) { if (success) {
@ -383,8 +387,10 @@ export default {
} }
} catch (error) { } catch (error) {
console.error(error) console.error(error)
this.spinning = false
} finally { } finally {
hide() // hide()
this.spinning = false
} }
}, },
//生成图表（运管系统代码） //生成图表（运管系统代码）
@ -455,6 +461,14 @@ export default {
margin-top: 10px; margin-top: 10px;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
/deep/.ant-spin-nested-loading {
width: 100%;
height: 100%;
}
/deep/.ant-spin-container {
width: 100%;
height: 100%;
}
&-item { &-item {
width: 100%; width: 100%;
height: 100%; height: 100%;

8
src/views/abnormalAlarm/emailMonitor/instances/index.vue
View File

@ -271,18 +271,18 @@ export default {
}, },
onEmailChange(val) { onEmailChange(val) {
this.spinning = true this.spinning = true
this.guageStore.clear() if (this.guageStore) this.guageStore.clear()
this.emailId = val this.emailId = val
}, },
onDateChange(val) { onDateChange(val) {
this.spinning = true this.spinning = true
this.areaMailLine.clear() if (this.areaMailLine) this.areaMailLine.clear()
this.startDate = this.getBeforeDate(val - 1) this.startDate = this.getBeforeDate(val - 1)
this.getEmailStatistics() this.getEmailStatistics()
}, },
onRangeDateChange(date, dateString) { onRangeDateChange(date, dateString) {
this.spinning = true this.spinning = true
this.areaMailLine.clear() if (this.areaMailLine) this.areaMailLine.clear()
this.startDate = dateString[0] this.startDate = dateString[0]
this.endDate = dateString[1] this.endDate = dateString[1]
this.getEmailStatistics() this.getEmailStatistics()
@ -315,7 +315,7 @@ export default {
s = s.substring(0, s.length - 1) s = s.substring(0, s.length - 1)
res.result.usage = s res.result.usage = s
this.emailSpace = res.result this.emailSpace = res.result
this.drawGuageStore() // this.drawGuageStore()
} else { } else {
this.$message.warning('This operation fails. Contact your system administrator') this.$message.warning('This operation fails. Contact your system administrator')
} }

21
src/views/abnormalAlarm/serverMonitor/instances/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div style="height: 100%;"> <div style="height: 100%">
<a-card :bordered="false" style="height:100%;margin-left: 20px;"> <a-card :bordered="false" style="height: 100%; margin-left: 20px">
<a-tabs default-active-key="detais" @change="handleTabChange"> <a-tabs default-active-key="detais" @change="handleTabChange">
<a-tab-pane key="detais" tab="DETAILS"> <a-tab-pane key="detais" tab="DETAILS">
<Details></Details> <Details></Details>
@ -14,22 +14,22 @@
<a-tab-pane key="cpu" tab="CPU"> <a-tab-pane key="cpu" tab="CPU">
<Cpu></Cpu> <Cpu></Cpu>
</a-tab-pane> </a-tab-pane>
<a-tab-pane key="memory" tab="MEMORY"> <!-- <a-tab-pane key="memory" tab="MEMORY">
MEMORY MEMORY
</a-tab-pane> </a-tab-pane>
<a-tab-pane key="disk" tab="DISK"> <a-tab-pane key="disk" tab="DISK">
DISK DISK
</a-tab-pane> </a-tab-pane> -->
</a-tabs> </a-tabs>
</a-card> </a-card>
</div> </div>
</template> </template>
<script> <script>
import Details from './details.vue'; import Details from './details.vue'
import ServiceProcess from './serviceProcess.vue'; import ServiceProcess from './serviceProcess.vue'
import Monitor from './monitor.vue'; import Monitor from './monitor.vue'
import Cpu from './cpu.vue'; import Cpu from './cpu.vue'
export default { export default {
components: { components: {
Details, Details,
@ -39,13 +39,12 @@ export default {
}, },
methods: { methods: {
handleTabChange(key) { handleTabChange(key) {
console.log(key); console.log(key)
}, },
}, },
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@import "~@/assets/less/TabMenu.less"; @import '~@/assets/less/TabMenu.less';
</style> </style>