chore

src/components/station-card.vue

@@ -0,0 +1,54 @@
+<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>