58 lines
1.8 KiB
Vue
58 lines
1.8 KiB
Vue
<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>
|