refactor: reorganize device card components

src/components/device-page/device-card/current-diag-card/device-header-card.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import type { NdmDeviceResultVO } from '@/apis/models';
+import { DeviceTypeName, getDeviceTypeVal } from '@/enums/device-type';
+import { NCard, NFlex, NTag } from 'naive-ui';
+import { computed, toRefs } from 'vue';
+
+const props = defineProps<{
+  device: NdmDeviceResultVO;
+}>();
+
+// const emit = defineEmits<{}>();
+
+const { device } = toRefs(props);
+
+const type = computed(() => DeviceTypeName[getDeviceTypeVal(device.value.deviceType)]);
+const name = computed(() => device.value.name ?? '-');
+const ipAddr = computed(() => device.value.ipAddress ?? '-');
+const gbCode = computed(() => Reflect.get(device.value, 'gbCode') as string | undefined);
+const status = computed(() => device.value.deviceStatus);
+</script>
+
+<template>
+  <NCard size="small" hoverable>
+    <template #header>
+      <NFlex :align="'center'">
+        <NTag v-if="status === '10'" size="small" type="success">在线</NTag>
+        <NTag v-else-if="status === '20'" size="small" type="error">离线</NTag>
+        <NTag v-else size="small" type="warning">未知</NTag>
+        <div>{{ name }}</div>
+      </NFlex>
+      <div style="font-size: small; color: #666">
+        <div>
+          <span>设备类型：</span>
+          <span>{{ type }}</span>
+        </div>
+        <div>
+          <span>IP地址：</span>
+          <span>{{ ipAddr }}</span>
+        </div>
+        <div v-if="gbCode">
+          <span>国标编码：</span>
+          <span>{{ gbCode }}</span>
+        </div>
+        <!-- <div>
+          <span>上游设备：</span>
+          <span>{{ device.linkDescription ?? '暂无' }}</span>
+        </div> -->
+        <div v-if="device.snmpEnabled">
+          <span>上次诊断时间：</span>
+          <span>{{ device.lastDiagTime ?? '暂无' }}</span>
+        </div>
+      </div>
+    </template>
+  </NCard>
+</template>
+
+<style scoped lang="scss"></style>