skycurtain/ndm-web-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style

Browse Source
This commit is contained in:
yangsy
2025-09-17 14:11:18 +08:00
parent 97b158e807
commit 1d34fce6bd
1 changed files with 56 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
src/components/device-page/device-card/current-diag-card/nvr-record-diag-card.vue
View File

@@ -9,7 +9,7 @@ import { VideocamOutline, TimeOutline, WarningOutline, CheckmarkCircleOutline, R
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import { destr } from 'destr'; import { destr } from 'destr';
import { groupBy } from 'es-toolkit'; import { groupBy } from 'es-toolkit';
import { NCard, NFlex, NText, NTag, NTimeline, NTimelineItem, NIcon, NEmpty, NStatistic, NGrid, NGridItem, NCollapse, NCollapseItem, NButton, NPopconfirm } from 'naive-ui'; import { NCard, NFlex, NText, NTag, NTimeline, NTimelineItem, NIcon, NEmpty, NStatistic, NGrid, NGridItem, NCollapse, NCollapseItem, NButton, NPopconfirm, NScrollbar } from 'naive-ui';
import { computed, onMounted, ref, toRefs } from 'vue'; import { computed, onMounted, ref, toRefs } from 'vue';
type NvrRecordDiag = { type NvrRecordDiag = {
@@ -182,22 +182,38 @@ onMounted(() => {
<!-- 统计信息 --> <!-- 统计信息 -->
<NGrid :cols="4" :x-gap="12"> <NGrid :cols="4" :x-gap="12">
<NGridItem> <NGridItem>
<NStatistic label="总通道数" :value="recordDiagStatistics.totalChannels" /> <NStatistic label="总通道数">
<template #default>
<span style="font-size: large">{{ recordDiagStatistics.totalChannels }}</span>
</template>
</NStatistic>
</NGridItem> </NGridItem>
<NGridItem> <NGridItem>
<NStatistic label="有缺失通道" :value="recordDiagStatistics.channelsWithLoss" /> <NStatistic label="有缺失通道">
<template #default>
<span style="font-size: large">{{ recordDiagStatistics.channelsWithLoss }}</span>
</template>
</NStatistic>
</NGridItem> </NGridItem>
<NGridItem> <NGridItem>
<NStatistic label="缺失次数" :value="recordDiagStatistics.totalLossCount" /> <NStatistic label="缺失次数">
<template #default>
<span style="font-size: large">{{ recordDiagStatistics.totalLossCount }}</span>
</template>
</NStatistic>
</NGridItem> </NGridItem>
<NGridItem> <NGridItem>
<NStatistic label="缺失时长" :value="recordDiagStatistics.totalLossDuration" /> <NStatistic label="缺失时长">
<template #default>
<span style="font-size: large">{{ recordDiagStatistics.totalLossDuration }}</span>
</template>
</NStatistic>
</NGridItem> </NGridItem>
</NGrid> </NGrid>
<!-- 通道录像缺失详情 --> <!-- 通道录像缺失详情 -->
<div v-if="lostRecordList.length > 0"> <div v-if="lostRecordList.length > 0">
<NCollapse> <NCollapse accordion>
<NCollapseItem v-for="channel in lostRecordList" :key="channel.gbCode" :name="channel.gbCode"> <NCollapseItem v-for="channel in lostRecordList" :key="channel.gbCode" :name="channel.gbCode">
<template #header> <template #header>
<NFlex align="center" :size="8"> <NFlex align="center" :size="8">
@@ -205,9 +221,7 @@ onMounted(() => {
<VideocamOutline /> <VideocamOutline />
</NIcon> </NIcon>
<NText strong>{{ channel.channelName }}</NText> <NText strong>{{ channel.channelName }}</NText>
<NTag :type="channel.lostRecordList.length > 0 ? 'error' : 'success'" size="small"> <NTag :type="channel.lostRecordList.length > 0 ? 'error' : 'success'" size="small">{{ channel.lostRecordList.length > 0 ? `${channel.lostRecordList.length}次缺失` : '正常' }}</NTag>
{{ channel.lostRecordList.length > 0 ? `${channel.lostRecordList.length}次缺失` : '正常' }}
</NTag>
</NFlex> </NFlex>
</template> </template>
@@ -216,41 +230,43 @@ onMounted(() => {
<NIcon size="14" color="#666"> <NIcon size="14" color="#666">
<TimeOutline /> <TimeOutline />
</NIcon> </NIcon>
<NText depth="3" style="font-size: 12px"> {{ formatTime(channel.recordDuration.startTime) }} ~ {{ formatTime(channel.recordDuration.endTime) }} </NText> <NText depth="3" style="font-size: 12px">{{ formatTime(channel.recordDuration.startTime) }} ~ {{ formatTime(channel.recordDuration.endTime) }}</NText>
</NFlex> </NFlex>
</template> </template>
<div style="padding-left: 24px"> <NScrollbar style="height: 500px">
<!-- 录像缺失时间轴 --> <div style="padding-left: 24px">
<div v-if="channel.lostRecordList.length > 0"> <!-- 录像缺失时间轴 -->
<NText depth="2" style="margin-bottom: 12px; display: block"> 录像缺失时间段： </NText> <div v-if="channel.lostRecordList.length > 0">
<NTimeline> <NText depth="2" style="margin-bottom: 12px; display: block">录像缺失时间段：</NText>
<NTimelineItem v-for="(loss, index) in channel.lostRecordList" :key="index" type="error" :time="formatTime(loss.startTime)"> <NTimeline>
<template #icon> <NTimelineItem v-for="({ startTime, endTime }, index) in channel.lostRecordList" :key="index" type="error" :time="formatTime(startTime)">
<NIcon> <template #icon>
<WarningOutline /> <NIcon>
</NIcon> <WarningOutline />
</template> </NIcon>
<template #default> </template>
<NFlex vertical :size="4"> <template #default>
<NText> 缺失时段：{{ formatTime(loss.startTime) }} ~ {{ formatTime(loss.endTime) }} </NText> <NFlex vertical :size="4">
<NText depth="3" style="font-size: 12px"> 持续时长：{{ formatDuration(loss.startTime, loss.endTime) }} </NText> <NText>缺失时段：{{ formatTime(startTime) }} ~ {{ formatTime(endTime) }}</NText>
</NFlex> <NText depth="3" style="font-size: 12px">持续时长：{{ formatDuration(startTime, endTime) }}</NText>
</template> </NFlex>
</NTimelineItem> </template>
</NTimeline> </NTimelineItem>
</div> </NTimeline>
</div>
<!-- 无缺失状态 --> <!-- 无缺失状态 -->
<div v-else> <div v-else>
<NFlex align="center" :size="8" style="padding: 16px 0"> <NFlex align="center" :size="8" style="padding: 16px 0">
<NIcon size="16" color="#52c41a"> <NIcon size="16" color="#52c41a">
<CheckmarkCircleOutline /> <CheckmarkCircleOutline />
</NIcon> </NIcon>
<NText type="success">该通道录像完整，无缺失时间段</NText> <NText type="success">该通道录像完整，无缺失时间段</NText>
</NFlex> </NFlex>
</div>
</div> </div>
</div> </NScrollbar>
</NCollapseItem> </NCollapseItem>
</NCollapse> </NCollapse>
</div> </div>
@@ -263,17 +279,4 @@ onMounted(() => {
</NCard> </NCard>
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss"></style>
// 自定义样式
.n-collapse-item {
margin-bottom: 8px;
}
.n-timeline {
padding-left: 8px;
}
.n-statistic {
text-align: center;
}
</style>