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

123
src/views/screen/components/HighRiskAlertPanel.vue
View File

@@ -4,29 +4,37 @@
<div>
<img style="margin: 8px 0" src="@/assets/images/title_border_line_1.png" />
</div>
<!-- 骨架屏 -->
<!-- 实际内容 -->
<div class="tip-container">
<div class="tip-image">
<img src="@/assets/images/screen/circle_image.png" width="80" height="80" />
<span class="number">{{ alertData?.total || 0 }}</span>
<div v-if="props.loading" style="width: 20px; height: 20px;" class="number skeleton-pulse"></div>
<span v-else class="number">{{ alertData?.total || 0 }}</span>
</div>
<img src="@/assets/images/screen/tip_bg_image.png" width="100%" height="70" />
<div class="tip-content">
<div class="col-item">
<img src="@/assets/images/screen/warning_img.png" width="23" />
<span>告警总数</span>
<span style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">{{ alertData?.total || 0 }}</span>
<div v-if="props.loading" style="width: 20px; height: 20px;" class="skeleton-pulse"></div>
<span v-else style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">{{ alertData?.total || 0 }}</span>
</div>
<div class="col-item">
<span>已处理</span>
<span style="font-size: 1.2rem; marker-start: 2vw; color: greenyellow;">{{ alertData?.processed || 0 }}</span>
<div v-if="props.loading" style="width: 20px; height: 20px;" class="skeleton-pulse"></div>
<span v-else style="font-size: 1.2rem; marker-start: 2vw; color: greenyellow;">{{ alertData?.processed || 0 }}</span>
</div>
<div class="col-item" style="display: flex; margin-left: 1vw; align-items: center;">
<span>待处理</span>
<span style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">{{ alertData?.pending || 0 }}</span>
<div v-if="props.loading" style="width: 20px; height: 20px;" class="skeleton-pulse"></div>
<span v-else style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">{{ alertData?.pending || 0 }}</span>
</div>
<div class="col-item" style="display: flex; margin-left: 1vw; align-items: center;">
<span>处理中</span>
<span style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">{{ alertData?.processing }}</span>
<div v-if="props.loading" style="width: 20px; height: 20px;" class="skeleton-pulse"></div>
<span v-else style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">{{ alertData?.processing }}</span>
</div>
</div>
</div>
@@ -45,7 +53,7 @@
</div>
</div>
</div> -->
<AlertList style="margin-right: 1vw;" title="告警详情" :list-data="alertDetails" :linkUrl="linkUrl"></AlertList>
<AlertList style="margin-right: 1vw;" title="告警详情" :list-data="alertDetails" :linkUrl="linkUrl" :loading="props.loading"></AlertList>
</div>
</template>
@@ -73,6 +81,7 @@ interface Props {
alertDetails?: AlertItem[]
sourceIndex?: number
linkUrl?: string
loading?: boolean
}
// 默认值
@@ -84,7 +93,8 @@ const props = withDefaults(defineProps<Props>(), {
processing: 0
}),
alertDetails: () => [],
sourceIndex: 1
sourceIndex: 1,
loading: false
})
</script>
@@ -265,5 +275,104 @@ const props = withDefaults(defineProps<Props>(), {
}
}
}
// 骨架屏样式
.skeleton-container {
.skeleton-tip-container {
position: relative;
width: 100%;
height: 70px;
.skeleton-tip-image {
position: absolute;
top: -5px;
right: 10px;
z-index: 2;
.skeleton-circle {
width: 80px;
height: 80px;
background-color: #3a3a3a;
border-radius: 50%;
}
.skeleton-number {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 30px;
height: 20px;
background-color: #3a3a3a;
border-radius: 4px;
}
}
.skeleton-bg {
width: 100%;
height: 70px;
background-color: #3a3a3a;
border-radius: 4px;
}
.skeleton-tip-content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
justify-content: space-around;
padding: 8px 15px;
.skeleton-col-item {
display: flex;
align-items: center;
gap: 8px;
.skeleton-icon {
width: 23px;
height: 23px;
background-color: #3a3a3a;
border-radius: 4px;
}
.skeleton-text {
flex: 1;
height: 16px;
background-color: #3a3a3a;
border-radius: 4px;
}
.skeleton-value {
width: 40px;
height: 18px;
background-color: #3a3a3a;
border-radius: 4px;
}
}
}
}
}
// 骨架屏动画
.skeleton-pulse {
animation: skeleton-loading-highrisk 1.5s ease-in-out infinite;
background-color: #444;
border-radius: 4px;
}
@keyframes skeleton-loading-highrisk {
0% {
opacity: 1;
}
50% {
opacity: 0.4;
}
100% {
opacity: 1;
}
}
}
</style>