添加设备图标定位功能

src/components/map/types/App.d.ts

@@ -70,6 +70,7 @@ declare const _default: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixi
             id: number;
             color: number[];
         }[]) => void;
+        locateIconById: (id: number | string) => boolean;
         mode: Ref<ViewerMode, ViewerMode>;
         isDrawingMode: () => boolean;
         placedIconsCount: () => number;
@@ -206,6 +207,7 @@ declare const _default: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixi
             id: number;
             color: number[];
         }[]) => void;
+        locateIconById: (id: number | string) => boolean;
         mode: Ref<ViewerMode, ViewerMode>;
         isDrawingMode: () => boolean;
         placedIconsCount: () => number;

src/components/map/types/components/MapCadViewer.d.ts

@@ -1,4 +1,4 @@
-import * as maplibregl from 'maplibre-gl';
+import { default as maplibregl } from 'maplibre-gl';
 import { MapboxOverlay } from '@deck.gl/mapbox';
 import { LayerItem } from './LayerPanel';
 import { CadFeature, CadData, ViewerMode, MapMarker, BoundaryConfig, MapConfig } from '../types/cad';
@@ -93,6 +93,15 @@ declare function setIconsColor(colors: {
     id: number;
     color: number[];
 }[]): void;
+/**
+ * 根据设备 id 定位 CAD 图中的设备图标：
+ * 1. 将视图平移到图标位置（图标显示在屏幕中心）
+ * 2. 调整到合适缩放级别（在全图适配 zoom 基础上放大，保留上下文）
+ * 3. 弹出设备信息弹框（复用 device-click 事件，由 APP.vue 拼接 HTML）
+ * @param id 设备图标 id（数字或字符串均可）
+ * @returns 是否找到并定位成功
+ */
+declare function locateIconById(id: number | string): boolean;
 /** 缩放至全图：重置视图为 CAD 图纸整体范围 */
 declare function zoomToFit(): void;
 declare const _default: DefineComponent<__VLS_Props, {
@@ -117,6 +126,8 @@ declare const _default: DefineComponent<__VLS_Props, {
     clearPlacedIcons: typeof clearPlacedIcons;
     /** 为指定 id 的设备图标设置颜色 [{id, color:[r,g,b]}] */
     setIconsColor: typeof setIconsColor;
+    /** 根据设备 id 定位 CAD 图中的设备图标（居中 + 调整缩放 + 弹框） */
+    locateIconById: typeof locateIconById;
     /** 当前模式 */
     mode: Ref<ViewerMode, ViewerMode>;
     /** 是否为绘制模式 */

src/views/vent/cad/dwgViewerTest.vue

@@ -32,6 +32,9 @@
             <template v-if="column.key === 'netStatus'">
               <a-tag :color="statusColor(record.netStatus)">{{ statusText(record.netStatus) }}</a-tag>
             </template>
+            <template v-if="column.key === 'strname'">
+              <div @click="locateIcon(record.deviceID)">{{ record.strname}}</div>
+            </template>
             <template v-if="column.key === 'action'">
               <a-button v-if="!isDevicePlaced(record)" type="primary" size="small" @click="enterPlacingMode(record)">布点</a-button>
               <a-button v-else type="link" size="small" danger @click="revokePlacement(record)">撤销</a-button>
@@ -68,7 +71,7 @@ const baseApiUrl = globSetting.domainUrl;
   const placingDevice = ref<DeviceRecord | null>(null);
   const currentCoord = reactive({ x: 0, y: 0, z: 0 });
   const columns = [
-    { title: '设备名称', dataIndex: 'strname', ellipsis: true, align: 'center' },
+    { title: '设备名称' ,key: 'strname', dataIndex: 'strname', ellipsis: true, align: 'center' },
     { title: '状态', key: 'netStatus', width: 60, align: 'center' },
     { title: '操作', key: 'action', width: 60, align: 'center' },
   ];
@@ -428,6 +431,17 @@ const baseApiUrl = globSetting.domainUrl;
       }
     });
   }
+/**
+ * 根据设备 id 定位 CAD 图中的设备图标（APP 调用接口）
+ * 定位后：图标显示到屏幕中间、视图调到合适远近、弹框显示设备信息
+ * @param id 设备图标 id（数字或字符串）
+ * @returns 是否定位成功（布尔，由组件返回）
+ */
+function locateIcon(id: number | string) {
+  const ok = viewerRef.value?.locateIconById(id);
+  console.log(`定位设备 ${id}:`, ok ? "成功" : "未找到");
+  return ok;
+}
   function loadCAD(data){
      cadData.value = data;
       console.log(`Loaded ${data.features.length} CAD features`);