isoftstone/lc_frontend
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

挂架平效果

Browse Source
This commit is contained in:
chenlin
2026-01-16 12:31:23 +08:00
parent c9b35826ad
commit 96d93c867e
7 changed files with 748 additions and 228 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
src/views/screen/components/AlertList.vue
View File

@@ -5,32 +5,59 @@
<img width="50%" src="@/assets/images/line_1.png" />
</div>
<div class="list" :style="{ maxHeight: maxHeight }">
<!-- 表格头部 -->
<div v-if="tableTitle && tableTitle.length > 0" class="table-header">
<div class="header-item" v-for="(title, index) in tableTitle" :key="index">
{{ title.name }}
</div>
</div>
<div class="list-wrapper" ref="listWrapperRef" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
<!-- 表格模式 -->
<!-- 骨架屏 -->
<template v-if="props.loading">
<!-- 表格模式骨架屏 -->
<template v-if="tableTitle && tableTitle.length > 0">
<div @click="handleItemClick(item)" class="table-row cursor-pointer" v-for="(item, index) in listData" :key="`table-${index}`" @mouseenter="handleMouseEnter">
<div class="table-cell" v-for="(title, cellIndex) in tableTitle" :key="`cell-${index}-${cellIndex}`">
{{ item[title.key] || '-' }}
<div class="table-header">
<div class="header-item skeleton-pulse" v-for="(title, index) in tableTitle" :key="`header-skeleton-${index}`"></div>
</div>
<div class="list-wrapper">
<div class="table-row skeleton-row" v-for="i in 10" :key="`table-skeleton-${i}`">
<div class="table-cell skeleton-pulse" v-for="(title, cellIndex) in tableTitle" :key="`cell-skeleton-${i}-${cellIndex}`"></div>
</div>
</div>
</template>
<!-- 列表模式 -->
<!-- 列表模式骨架屏 -->
<template v-else>
<div @click="handleItemClick(item)" class="list-item cursor-pointer" v-for="(item, index) in listData" :key="`list-${index}`" @mouseenter="handleMouseEnter">
<span class="alert-text" :class="[{ error: item.alarm_level_code == 'severity' }, { warn: item.alarm_level_code == 'major' }]">
{{ (index + 1) }} {{ item.description }}
</span>
<div class="list-wrapper">
<div class="list-item skeleton-item" v-for="i in 10" :key="`list-skeleton-${i}`">
<div class="alert-text skeleton-pulse"></div>
</div>
</div>
</template>
</div>
</template>
<!-- 实际内容 -->
<template v-else>
<!-- 表格头部 -->
<div v-if="tableTitle && tableTitle.length > 0" class="table-header">
<div class="header-item" v-for="(title, index) in tableTitle" :key="index">
{{ title.name }}
</div>
</div>
<div class="list-wrapper" ref="listWrapperRef" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
<!-- 表格模式 -->
<template v-if="tableTitle && tableTitle.length > 0">
<div @click="handleItemClick(item)" class="table-row cursor-pointer" v-for="(item, index) in listData" :key="`table-${index}`" @mouseenter="handleMouseEnter">
<div class="table-cell" v-for="(title, cellIndex) in tableTitle" :key="`cell-${index}-${cellIndex}`">
{{ item[title.key] || '-' }}
</div>
</div>
</template>
<!-- 列表模式 -->
<template v-else>
<div @click="handleItemClick(item)" class="list-item cursor-pointer" v-for="(item, index) in listData" :key="`list-${index}`" @mouseenter="handleMouseEnter">
<span class="alert-text" :class="[{ error: item.alarm_level_code == 'severity' }, { warn: item.alarm_level_code == 'major' }]">
{{ (index + 1) }} {{ item.description }}
</span>
</div>
</template>
</div>
</template>
</div>
</div>
</template>
@@ -51,6 +78,7 @@ interface TableTitle {
}
interface Props {
loading?: boolean
title?: string
listData: AlertItem[]
maxHeight?: string
@@ -313,4 +341,31 @@ onUnmounted(() => {
}
}
}
// 骨架屏样式
.skeleton-pulse {
animation: skeleton-loading-alertlist 1.5s ease-in-out infinite;
background-color: #444;
border-radius: 4px;
}
.skeleton-row {
margin-bottom: 4px;
}
.skeleton-item {
margin-bottom: 4px;
}
@keyframes skeleton-loading-alertlist {
0% {
opacity: 1;
}
50% {
opacity: 0.4;
}
100% {
opacity: 1;
}
}
</style>