From 8fdd3c3a89ca895880ad8874184b5c5a0b7c9d97 Mon Sep 17 00:00:00 2001
From: xudan <staysky25@outlook.com>
Date: Mon, 1 Dec 2025 15:13:40 +0800
Subject: [PATCH] =?UTF-8?q?feat(area-detail-card):=20=E4=B8=BA=E9=97=A8?=
 =?UTF-8?q?=E5=8C=BA=E5=9F=9F=E8=AF=A6=E6=83=85=E5=8D=A1=E7=89=87=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E8=AE=BE=E5=A4=87=E5=90=8D=E7=A7=B0=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=EF=BC=8C=E9=80=9A=E8=BF=87=E6=9F=A5=E8=AF=A2=E8=AE=BE=E5=A4=87?=
 =?UTF-8?q?=E6=98=A0=E5=B0=84=E5=88=97=E8=A1=A8=E5=B9=B6=E7=9B=91=E5=90=AC?=
 =?UTF-8?q?=E5=8C=BA=E5=9F=9F=E5=8F=98=E5=8C=96=E5=AE=9E=E7=8E=B0=EF=BC=8C?=
 =?UTF-8?q?=E4=BB=A5=E6=8F=90=E4=BE=9B=E6=9B=B4=E7=9B=B4=E8=A7=82=E7=9A=84?=
 =?UTF-8?q?=E8=AE=BE=E5=A4=87=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/card/area-detail-card.vue | 41 +++++++++++++++++++++++-
 1 file changed, 40 insertions(+), 1 deletion(-)

diff --git a/src/components/card/area-detail-card.vue b/src/components/card/area-detail-card.vue
index 70825e3..5f1aea5 100644
--- a/src/components/card/area-detail-card.vue
+++ b/src/components/card/area-detail-card.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
+import { type DeviceMappingDTO, queryDeviceMappingByType } from '@api/device';
 import { type MapAreaInfo, MapAreaType, type MapPen, MapPointType } from '@api/map';
 import { DOOR_AREA_TYPE } from '@api/map/door-area';
 import type { EditorService } from '@core/editor.service';
 import sTheme from '@core/theme.service';
-import { computed, inject, type InjectionKey, type ShallowRef } from 'vue';
+import { computed, inject, type InjectionKey, ref, type ShallowRef,watch } from 'vue';
 
 type Props = {
   token: InjectionKey<ShallowRef<EditorService>>;
@@ -73,6 +74,38 @@ const ruleText = computed(() => {
   return '';
 });
 
+// 设备映射相关状态
+const deviceMappings = ref<DeviceMappingDTO[]>([]);
+
+// 根据设备ID获取设备名称
+const getDeviceName = computed(() => {
+  if (!area.value?.doorDeviceId || !deviceMappings.value.length) return '';
+
+  const device = deviceMappings.value.find(d => d.id === area.value?.doorDeviceId);
+  return device?.deviceUniqueName || '';
+});
+
+// 获取设备映射数据
+const fetchDeviceMappings = async () => {
+  if (!area.value || (area.value.type as any) !== DOOR_AREA_TYPE) return;
+
+  try {
+    // 根据门类型获取对应的设备映射
+    const deviceType = '1'; // 门的类型是"1"
+    deviceMappings.value = await queryDeviceMappingByType(deviceType);
+  } catch (error) {
+    console.error('获取设备映射失败:', error);
+    deviceMappings.value = [];
+  }
+};
+
+// 监听区域变化，获取设备映射
+watch(area, (newArea) => {
+  if (newArea && (newArea.type as any) === DOOR_AREA_TYPE && newArea.doorDeviceId) {
+    fetchDeviceMappings();
+  }
+}, { immediate: true });
+
 // 无日志版：不输出调试信息
 </script>
 
@@ -119,6 +152,12 @@ const ruleText = computed(() => {
             <a-typography-text>{{ area.doorDeviceId || $t('无') }}</a-typography-text>
           </a-flex>
         </a-list-item>
+        <a-list-item v-if="area && (area.type as any) === DOOR_AREA_TYPE && getDeviceName">
+          <a-flex :gap="8" vertical>
+            <a-typography-text type="secondary">{{ $t('设备名称') }}</a-typography-text>
+            <a-typography-text>{{ getDeviceName }}</a-typography-text>
+          </a-flex>
+        </a-list-item>
         <a-list-item v-if="area && (area.type as any) === DOOR_AREA_TYPE">
           <a-flex :gap="8" vertical>
             <a-typography-text type="secondary">{{ $t('连接状态') }}</a-typography-text>