feat: open camera login page

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

@@ -1,7 +1,7 @@
 <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 { DeviceType, DeviceTypeName, getDeviceTypeVal } from '@/enums/device-type';
+import { NButton, NCard, NFlex, NTag } from 'naive-ui';
 import { computed, toRefs } from 'vue';
 
 const props = defineProps<{
@@ -17,6 +17,18 @@ 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);
+
+const isCamera = computed(() => getDeviceTypeVal(device.value.deviceType) === DeviceType['Camera']);
+
+const onClickCameraLogin = () => {
+  const ipAddress = device.value.ipAddress;
+  if (ipAddress) {
+    const targetUrl = `http://${ipAddress}`;
+    window.open(targetUrl, '_blank');
+  } else {
+    window.$message.warning('未找到设备IP地址');
+  }
+};
 </script>
 
 <template>
@@ -27,6 +39,7 @@ const status = computed(() => device.value.deviceStatus);
         <NTag v-else-if="status === '20'" size="small" type="error">离线</NTag>
         <NTag v-else size="small" type="warning">未知</NTag>
         <div>{{ name }}</div>
+        <NButton v-if="isCamera" ghost size="tiny" type="default" :focusable="false" @click="onClickCameraLogin">登录</NButton>
       </NFlex>
       <div style="font-size: small; color: #666">
         <div>