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

59
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 { destr } from 'destr';
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';
type NvrRecordDiag = {
@@ -182,22 +182,38 @@ onMounted(() => {
<!-- 统计信息 -->
<NGrid :cols="4" :x-gap="12">
<NGridItem>
<NStatistic label="总通道数" :value="recordDiagStatistics.totalChannels" />
<NStatistic label="总通道数">
<template #default>
<span style="font-size: large">{{ recordDiagStatistics.totalChannels }}</span>
</template>
</NStatistic>
</NGridItem>
<NGridItem>
<NStatistic label="有缺失通道" :value="recordDiagStatistics.channelsWithLoss" />
<NStatistic label="有缺失通道">
<template #default>
<span style="font-size: large">{{ recordDiagStatistics.channelsWithLoss }}</span>
</template>
</NStatistic>
</NGridItem>
<NGridItem>
<NStatistic label="缺失次数" :value="recordDiagStatistics.totalLossCount" />
<NStatistic label="缺失次数">
<template #default>
<span style="font-size: large">{{ recordDiagStatistics.totalLossCount }}</span>
</template>
</NStatistic>
</NGridItem>
<NGridItem>
<NStatistic label="缺失时长" :value="recordDiagStatistics.totalLossDuration" />
<NStatistic label="缺失时长">
<template #default>
<span style="font-size: large">{{ recordDiagStatistics.totalLossDuration }}</span>
</template>
</NStatistic>
</NGridItem>
</NGrid>
<!-- 通道录像缺失详情 -->
<div v-if="lostRecordList.length > 0">
<NCollapse>
<NCollapse accordion>
<NCollapseItem v-for="channel in lostRecordList" :key="channel.gbCode" :name="channel.gbCode">
<template #header>
<NFlex align="center" :size="8">
@@ -205,9 +221,7 @@ onMounted(() => {
<VideocamOutline />
</NIcon>
<NText strong>{{ channel.channelName }}</NText>
<NTag :type="channel.lostRecordList.length > 0 ? 'error' : 'success'" size="small">
{{ channel.lostRecordList.length > 0 ? `${channel.lostRecordList.length}次缺失` : '正常' }}
</NTag>
<NTag :type="channel.lostRecordList.length > 0 ? 'error' : 'success'" size="small">{{ channel.lostRecordList.length > 0 ? `${channel.lostRecordList.length}次缺失` : '正常' }}</NTag>
</NFlex>
</template>
@@ -216,16 +230,17 @@ onMounted(() => {
<NIcon size="14" color="#666">
<TimeOutline />
</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>
</template>
<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>
<NText depth="2" style="margin-bottom: 12px; display: block">录像缺失时间段：</NText>
<NTimeline>
<NTimelineItem v-for="(loss, index) in channel.lostRecordList" :key="index" type="error" :time="formatTime(loss.startTime)">
<NTimelineItem v-for="({ startTime, endTime }, index) in channel.lostRecordList" :key="index" type="error" :time="formatTime(startTime)">
<template #icon>
<NIcon>
<WarningOutline />
@@ -233,8 +248,8 @@ onMounted(() => {
</template>
<template #default>
<NFlex vertical :size="4">
<NText> 缺失时段：{{ formatTime(loss.startTime) }} ~ {{ formatTime(loss.endTime) }} </NText>
<NText depth="3" style="font-size: 12px"> 持续时长：{{ formatDuration(loss.startTime, loss.endTime) }} </NText>
<NText>缺失时段：{{ formatTime(startTime) }} ~ {{ formatTime(endTime) }}</NText>
<NText depth="3" style="font-size: 12px">持续时长：{{ formatDuration(startTime, endTime) }}</NText>
</NFlex>
</template>
</NTimelineItem>
@@ -251,6 +266,7 @@ onMounted(() => {
</NFlex>
</div>
</div>
</NScrollbar>
</NCollapseItem>
</NCollapse>
</div>
@@ -263,17 +279,4 @@ onMounted(() => {
</NCard>
</template>
<style scoped lang="scss">
// 自定义样式
.n-collapse-item {
margin-bottom: 8px;
}
.n-timeline {
padding-left: 8px;
}
.n-statistic {
text-align: center;
}
</style>
<style scoped lang="scss"></style>