From 22cf89f7e9a0e6c7b7a63e1d9a643b9c11e27ac3 Mon Sep 17 00:00:00 2001
From: xudan <staysky25@outlook.com>
Date: Mon, 1 Dec 2025 15:09:07 +0800
Subject: [PATCH] =?UTF-8?q?feat(area-edit):=20=E5=B0=86=E9=97=A8=E5=8C=BA?=
 =?UTF-8?q?=E5=9F=9F=E8=AE=BE=E5=A4=87ID=E8=BE=93=E5=85=A5=E6=A1=86?=
 =?UTF-8?q?=E6=94=B9=E4=B8=BA=E4=B8=8B=E6=8B=89=E9=80=89=E6=8B=A9=EF=BC=8C?=
 =?UTF-8?q?=E9=80=9A=E8=BF=87=E6=9F=A5=E8=AF=A2=E8=AE=BE=E5=A4=87=E6=98=A0?=
 =?UTF-8?q?=E5=B0=84=E5=88=97=E8=A1=A8=E5=AE=9E=E7=8E=B0=E8=AE=BE=E5=A4=87?=
 =?UTF-8?q?=E7=BB=91=E5=AE=9A=E4=BB=A5=E6=8F=90=E5=8D=87=E7=94=A8=E6=88=B7?=
 =?UTF-8?q?=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                       |  2 +-
 src/apis/device/api.ts                 | 48 ++++++++++++++
 src/apis/device/index.ts               |  1 +
 src/components/card/area-edit-card.vue | 88 +++++++++++++++++++++-----
 4 files changed, 122 insertions(+), 17 deletions(-)
 create mode 100644 src/apis/device/api.ts
 create mode 100644 src/apis/device/index.ts

diff --git a/.env.development b/.env.development
index a7c671d..41af242 100644
--- a/.env.development
+++ b/.env.development
@@ -4,5 +4,5 @@ ENV_WEBSOCKET_BASE=/ws
 ENV_STORAGE_WEBSOCKET_BASE=/vwedWs
 
 # 开发环境token配置 - 可以手动设置或从另一个项目获取后填入
-ENV_DEV_TOKEN=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE3NjQxNjM2MzIsInVzZXJuYW1lIjoiYWRtaW4ifQ.IC24_YwD10DPM6PYyB-aBHoN4BMmDnQYe_8ZGI-Cyzg
+ENV_DEV_TOKEN=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE3NjQ3MDExNDcsInVzZXJuYW1lIjoiYWRtaW4ifQ.NHLOjXm9JblCXXaDmc8PRvqB-uIpjwltrFh2EH4usIc
 ENV_DEV_TENANT_ID=1000
diff --git a/src/apis/device/api.ts b/src/apis/device/api.ts
new file mode 100644
index 0000000..9a8c984
--- /dev/null
+++ b/src/apis/device/api.ts
@@ -0,0 +1,48 @@
+import http from '@core/http';
+
+const enum API {
+  根据设备类型查询 = '/device/mapping/queryByType',
+}
+
+/**
+ * 设备映射数据传输对象
+ */
+export interface DeviceMappingDTO {
+  id: string;
+  deviceUniqueName: string;
+  protocolType: string;
+  mappingType: string;
+  brandName: string | null;
+  ipAddress: string | null;
+  port: number;
+  slaveId: number;
+  enabled: number;
+  sceneId: string | null;
+}
+
+/**
+ * 设备类型映射
+ */
+export const DeviceTypeMapping = {
+  '0': '非保持呼叫器',
+  '4': '保持呼叫器',
+  '1': '门',
+  '2': '电梯',
+  '3': '光电传感器'
+} as const;
+
+/**
+ * 根据设备类型查询所有映射关系
+ * @param type 设备类型（必填）
+ * @returns DeviceMappingDTO[] 设备映射列表
+ */
+export async function queryDeviceMappingByType(type: string): Promise<DeviceMappingDTO[]> {
+  type ResponseType = DeviceMappingDTO[];
+  try {
+    const response = await http.get<ResponseType>(`${API.根据设备类型查询}?type=${type}`);
+    return response || [];
+  } catch (error) {
+    console.error('根据设备类型查询映射关系失败:', error);
+    return [];
+  }
+}
\ No newline at end of file
diff --git a/src/apis/device/index.ts b/src/apis/device/index.ts
new file mode 100644
index 0000000..308f5ae
--- /dev/null
+++ b/src/apis/device/index.ts
@@ -0,0 +1 @@
+export * from './api';
\ No newline at end of file
diff --git a/src/components/card/area-edit-card.vue b/src/components/card/area-edit-card.vue
index 185764c..065b28b 100644
--- a/src/components/card/area-edit-card.vue
+++ b/src/components/card/area-edit-card.vue
@@ -1,10 +1,11 @@
 <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 { PointBindModalRef } from '@common/modal/point-bind-modal.vue';
 import type { EditorService } from '@core/editor.service';
 import sTheme from '@core/theme.service';
-import { ref, shallowRef } from 'vue';
+import {  ref, shallowRef, watch } from 'vue';
 import { computed, inject, type InjectionKey, type ShallowRef } from 'vue';
 
 type Props = {
@@ -54,6 +55,60 @@ const points = computed<MapPen[]>(
 );
 
 const actions = computed<MapPen[]>(() => points.value?.filter(({ point }) => point?.type === MapPointType.动作点));
+
+// 设备映射相关状态
+const deviceMappings = ref<DeviceMappingDTO[]>([]);
+const selectedDeviceId = ref<string>('');
+const loading = ref<boolean>(false);
+
+// 根据门类型获取设备映射
+const fetchDeviceMappings = async () => {
+  if (!area.value || (area.value?.type as any) !== DOOR_AREA_TYPE) return;
+
+  loading.value = true;
+  try {
+    // 根据门类型获取对应的设备映射
+    const deviceType = '1'; // 门的类型是"1"
+    deviceMappings.value = await queryDeviceMappingByType(deviceType);
+
+    // 如果当前有绑定的设备ID，设置选中值
+    if (area.value.doorDeviceId) {
+      selectedDeviceId.value = area.value.doorDeviceId;
+    }
+  } catch (error) {
+    console.error('获取设备映射失败:', error);
+    deviceMappings.value = [];
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 监听区域变化，获取设备映射
+watch(area, (newArea) => {
+  if (newArea && (newArea.type as any) === DOOR_AREA_TYPE) {
+    fetchDeviceMappings();
+  }
+}, { immediate: true });
+
+// 设备选择变化处理函数
+const handleDeviceChange = (deviceId: string) => {
+  if (!props.id) return;
+
+  selectedDeviceId.value = deviceId;
+
+  // 更新区域信息，保存设备ID
+  editor.value.updateArea(props.id, { doorDeviceId: deviceId });
+
+  // 同时更新关联路段的设备ID
+  if (area.value?.routes) {
+    area.value.routes.forEach((rid: string) => {
+      const rpen = editor.value.getPenById(rid) as any;
+      const merged = { ...(rpen?.route || {}), deviceId };
+      editor.value.updatePen(rid, { route: merged }, true);
+    });
+  }
+};
+
 </script>
 
 <template>
@@ -196,21 +251,22 @@ const actions = computed<MapPen[]>(() => points.value?.filter(({ point }) => poi
               <a-typography-text>{{ $t('设备ID') }}:</a-typography-text>
             </a-col>
             <a-col :span="24">
-              <a-input
-                :placeholder="$t('请输入设备ID')"
-                :value="area.doorDeviceId"
-                @change="
-                  (e: any) => {
-                    const v = e?.target?.value;
-                    editor.updateArea(id, { doorDeviceId: v });
-                    (area.routes || []).forEach((rid: string) => {
-                      const rpen = editor.getPenById(rid) as any;
-                      const merged = { ...(rpen?.route || {}), deviceId: v };
-                      editor.updatePen(rid, { route: merged }, true);
-                    });
-                  }
-                "
-              />
+              <a-select
+                v-model:value="selectedDeviceId"
+                :placeholder="$t('请选择设备')"
+                :loading="loading"
+                allow-clear
+                @change="handleDeviceChange"
+              >
+                <a-select-option
+                  v-for="device in deviceMappings"
+                  :key="device.id"
+                  :value="device.id"
+                  :label="device.deviceUniqueName"
+                >
+                  {{ device.deviceUniqueName }}
+                </a-select-option>
+              </a-select>
             </a-col>
           </a-row>