|
|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <div class="driving-container">
|
|
|
+ <div class="driving-container" v-loading="loading" element-loading-text="数据加载中..." element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
|
|
|
<!-- 页面头部 -->
|
|
|
<div class="page-header">
|
|
|
<h2>告警数据驾驶舱</h2>
|
|
|
@@ -128,6 +128,7 @@ export default {
|
|
|
activeCategoryTab: 'content',
|
|
|
|
|
|
|
|
|
+ loading: true,//全局加载状态
|
|
|
realTimeAlarms: [],//实时告警列表
|
|
|
|
|
|
|
|
|
@@ -173,21 +174,29 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- getRealEvent() {
|
|
|
+ async getRealEvent() {
|
|
|
// 初始化实时告警列表
|
|
|
- getRealTimeAlarm().then(res => {
|
|
|
+ try {
|
|
|
+ const res = await getRealTimeAlarm()
|
|
|
if (res.code === 200) {
|
|
|
this.realTimeAlarms = res.data || []
|
|
|
}
|
|
|
- })
|
|
|
+ } catch (error) {
|
|
|
+ console.error('获取实时告警失败:', error)
|
|
|
+ }
|
|
|
},
|
|
|
async initCharts() {
|
|
|
- await this.getAlarmEvent()
|
|
|
- this.initCategoryCharts()
|
|
|
- this.initDistributionChart()
|
|
|
- this.initTrendChart()
|
|
|
- this.initSystemChart()
|
|
|
- this.getRealEvent()
|
|
|
+ this.loading = true
|
|
|
+ try {
|
|
|
+ await this.getAlarmEvent()
|
|
|
+ this.initCategoryCharts()
|
|
|
+ this.initDistributionChart()
|
|
|
+ this.initTrendChart()
|
|
|
+ this.initSystemChart()
|
|
|
+ await this.getRealEvent()
|
|
|
+ } finally {
|
|
|
+ this.loading = false
|
|
|
+ }
|
|
|
},
|
|
|
async getAlarmEvent() {
|
|
|
try {
|
|
|
@@ -727,19 +736,22 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
|
|
|
- refreshData() {
|
|
|
+ async refreshData() {
|
|
|
// 模拟数据刷新
|
|
|
console.log('刷新数据...')
|
|
|
this.currentDate = new Date().toISOString().slice(0, 19).replace('T', ' ')
|
|
|
+ this.loading = true
|
|
|
|
|
|
- // 随机更新实时告警列表
|
|
|
- this.getRealEvent()
|
|
|
+ try {
|
|
|
+ // 随机更新实时告警列表
|
|
|
+ await this.getRealEvent()
|
|
|
|
|
|
- // 重新初始化图表以确保正确显示
|
|
|
- setTimeout(() => {
|
|
|
+ // 重新初始化图表以确保正确显示
|
|
|
this.destroyCharts()
|
|
|
- this.initCharts()
|
|
|
- }, 100)
|
|
|
+ await this.initCharts()
|
|
|
+ } finally {
|
|
|
+ this.loading = false
|
|
|
+ }
|
|
|
},
|
|
|
|
|
|
startAutoRefresh() {
|