91 lines
2.8 KiB
Vue
91 lines
2.8 KiB
Vue
<script setup lang="ts">
|
||
import type { NdmCameraDiagInfo, NdmCameraResultVO } from '@/apis';
|
||
import { CameraHistoryDiagCard, DeviceCommonCard, DeviceHeaderCard } from '@/components';
|
||
import { useSettingStore } from '@/stores';
|
||
import { destr } from 'destr';
|
||
import { NCard, NFlex, NTabPane, NTabs } from 'naive-ui';
|
||
import { computed, ref, toRefs } from 'vue';
|
||
import { storeToRefs } from 'pinia';
|
||
|
||
const props = defineProps<{
|
||
stationCode: string;
|
||
ndmCamera: NdmCameraResultVO;
|
||
}>();
|
||
|
||
const settingStore = useSettingStore();
|
||
const { debugModeEnabled } = storeToRefs(settingStore);
|
||
|
||
const { stationCode, ndmCamera } = toRefs(props);
|
||
|
||
const lastDiagInfo = computed(() => {
|
||
const result = destr<any>(ndmCamera.value.lastDiagInfo);
|
||
if (!result) return null;
|
||
if (typeof result !== 'object') return null;
|
||
return result as NdmCameraDiagInfo;
|
||
});
|
||
|
||
const commonInfo = computed(() => {
|
||
const {
|
||
createdTime,
|
||
updatedTime,
|
||
manufacturer,
|
||
gb28181Enabled,
|
||
onvifPort,
|
||
onvifUsername,
|
||
onvifPassword,
|
||
onvifMajorIndex,
|
||
onvifMinorIndex,
|
||
icmpEnabled,
|
||
// deviceType,
|
||
// cameraType,
|
||
community,
|
||
//
|
||
} = ndmCamera.value;
|
||
return {
|
||
创建时间: createdTime ?? '',
|
||
更新时间: updatedTime ?? '',
|
||
制造商: manufacturer ?? '',
|
||
GB28181使能: `${!!gb28181Enabled ? '是' : '否'}`,
|
||
ONVIF端口: `${onvifPort ?? ''}`,
|
||
ONVIF用户名: onvifUsername ?? '',
|
||
ONVIF密码: onvifPassword ?? '',
|
||
ONVIF主流索引: `${onvifMajorIndex ?? ''}`,
|
||
ONVIF辅流索引: `${onvifMinorIndex ?? ''}`,
|
||
ICMP使能: `${!!icmpEnabled ? '是' : '否'}`,
|
||
// 设备类型: deviceType ?? '',
|
||
// 相机类型: cameraType ?? '',
|
||
团体字符串: community ?? '',
|
||
};
|
||
});
|
||
|
||
const selectedTab = ref('设备状态');
|
||
</script>
|
||
|
||
<template>
|
||
<NCard size="small">
|
||
<NTabs v-model:value="selectedTab" size="small">
|
||
<NTabPane name="设备状态" tab="设备状态">
|
||
<NFlex vertical>
|
||
<DeviceHeaderCard :station-code="stationCode" :device="ndmCamera" />
|
||
<DeviceCommonCard :common-info="commonInfo" />
|
||
</NFlex>
|
||
</NTabPane>
|
||
<NTabPane name="历史诊断" tab="历史诊断">
|
||
<!-- 历史诊断组件中包含请求逻辑，当改变选择的设备时需要重新发起请求，因此添加显式的key触发组件的更新 -->
|
||
<CameraHistoryDiagCard :station-code="stationCode" :ndm-camera="ndmCamera" :key="ndmCamera.id" />
|
||
</NTabPane>
|
||
<!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
|
||
<NTabPane v-if="debugModeEnabled" name="原始数据" tab="原始数据">
|
||
<pre class="raw-data">{{ { ...ndmCamera, lastDiagInfo } }}</pre>
|
||
</NTabPane>
|
||
</NTabs>
|
||
</NCard>
|
||
</template>
|
||
|
||
<style scoped lang="scss">
|
||
.raw-data {
|
||
white-space: pre-wrap;
|
||
word-break: break-all;
|
||
}
|
||
</style>
|