feat: 告警信息loading
This commit is contained in:
parent
a1611a971a
commit
7f09acbb44
@ -26,8 +26,12 @@
|
|||||||
</div>
|
</div>
|
||||||
</CardItem>
|
</CardItem>
|
||||||
|
|
||||||
|
<div v-if="loading" class="loading-wrapper">
|
||||||
|
<van-loading size="24px" vertical>加载中...</van-loading>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- 空状态提示 -->
|
<!-- 空状态提示 -->
|
||||||
<EmptyBox v-if="list.length === 0" placeholder="暂无相关预警信息" />
|
<EmptyBox v-if="!loading && list.length === 0" placeholder="暂无相关预警信息" />
|
||||||
</div>
|
</div>
|
||||||
</PageContainer>
|
</PageContainer>
|
||||||
</template>
|
</template>
|
||||||
@ -60,15 +64,18 @@ const handleSearch = value => {
|
|||||||
|
|
||||||
// 预警列表数据
|
// 预警列表数据
|
||||||
const list = ref([]);
|
const list = ref([]);
|
||||||
|
const loading = ref(false);
|
||||||
|
|
||||||
const getData = async (keyword = '') => {
|
const getData = async (keyword = '') => {
|
||||||
const normalizedKeyword = keyword.trim();
|
const normalizedKeyword = keyword.trim();
|
||||||
|
loading.value = true;
|
||||||
|
|
||||||
if (route.query.mock) {
|
if (route.query.mock) {
|
||||||
list.value = warningMessageMock.filter(item => {
|
list.value = warningMessageMock.filter(item => {
|
||||||
if (!normalizedKeyword) return true;
|
if (!normalizedKeyword) return true;
|
||||||
return item.title.includes(normalizedKeyword);
|
return item.title.includes(normalizedKeyword);
|
||||||
});
|
});
|
||||||
|
loading.value = false;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -81,10 +88,12 @@ const getData = async (keyword = '') => {
|
|||||||
keyword: normalizedKeyword,
|
keyword: normalizedKeyword,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
list.value = result.data.records;
|
list.value = result.data;
|
||||||
} catch (_error) {
|
} catch (_error) {
|
||||||
showToast('获取数据失败,请稍后重试');
|
showToast('获取数据失败,请稍后重试');
|
||||||
list.value = [];
|
list.value = [];
|
||||||
|
} finally {
|
||||||
|
loading.value = false;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -126,6 +135,12 @@ const handleClickBack = () => {
|
|||||||
gap: 8px;
|
gap: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.loading-wrapper {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 24px 0;
|
||||||
|
}
|
||||||
|
|
||||||
/* ==================== Block 层级 ==================== */
|
/* ==================== Block 层级 ==================== */
|
||||||
.time-block {
|
.time-block {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user