55 lines
1.4 KiB
Vue
55 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import { NCard, NStatistic, NTag, NIcon, NGrid, NGi } from 'naive-ui';
|
|
import { Wifi } from '@vicons/ionicons5';
|
|
import { toRefs } from 'vue';
|
|
|
|
// 定义组件props
|
|
interface Props {
|
|
name: string;
|
|
online: boolean;
|
|
offlineDeviceCount: number;
|
|
alarmCount: number;
|
|
}
|
|
|
|
const props = defineProps<Props>();
|
|
|
|
const { name, online, offlineDeviceCount, alarmCount } = toRefs(props);
|
|
</script>
|
|
|
|
<template>
|
|
<NCard bordered hoverable size="small" :title="name" class="station-card">
|
|
<template #header-extra>
|
|
<NTag :type="online ? 'success' : 'error'" size="small">
|
|
<template #icon>
|
|
<NIcon><Wifi /></NIcon>
|
|
</template>
|
|
{{ online ? '在线' : '离线' }}
|
|
</NTag>
|
|
</template>
|
|
<template #default>
|
|
<NGrid :cols="2">
|
|
<NGi>
|
|
<NStatistic label="离线设备" :value="offlineDeviceCount" :tabular-nums="true">
|
|
<template #suffix>
|
|
<span class="stat-suffix">台</span>
|
|
</template>
|
|
</NStatistic>
|
|
</NGi>
|
|
<NGi>
|
|
<NStatistic label="告警记录" :value="alarmCount" :tabular-nums="true">
|
|
<template #suffix>
|
|
<span class="stat-suffix">条</span>
|
|
</template>
|
|
</NStatistic>
|
|
</NGi>
|
|
</NGrid>
|
|
</template>
|
|
</NCard>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.stat-suffix {
|
|
font-size: 14px;
|
|
}
|
|
</style>
|