feat(iot):【设备定位：100%】调整百度地图选择组件（弹窗），基于 hashed-juggling-tome.md 规划

.env

@@ -34,4 +34,4 @@ VITE_APP_API_ENCRYPT_RESPONSE_KEY = 96103715984234343991809655248883
 # VITE_APP_API_ENCRYPT_RESPONSE_KEY = MIICdgIBADANBgkqhkiG9w0BAQEFAASCAmAwggJcAgEAAoGBAOH8IfIFxL/MR9XIg1UDv5z1fGXQI93E8wrU4iPFovL/sEt9uSgSkjyidC2O7N+m7EKtoN6b1u7cEwXSkwf3kfK0jdWLSQaNpX5YshqXCBzbDfugDaxuyYrNA4/tIMs7mzZAk0APuRXB35Dmupou7Yw7TFW/7QhQmGfzeEKULQvnAgMBAAECgYAw8LqlQGyQoPv5p3gRxEMOCfgL0JzD3XBJKztiRd35RDh40Nx1ejgjW4dPioFwGiVWd2W8cAGHLzALdcQT2KDJh+T/tsd4SPmI6uSBBK6Ff2DkO+kFFcuYvfclQQKqxma5CaZOSqhgenacmgTMFeg2eKlY3symV6JlFNu/IKU42QJBAOhxAK/Eq3e61aYQV2JSguhMR3b8NXJJRroRs/QHEanksJtl+M+2qhkC9nQVXBmBkndnkU/l2tYcHfSBlAyFySMCQQD445tgm/J2b6qMQmuUGQAYDN8FIkHjeKmha+l/fv0igWm8NDlBAem91lNDIPBUzHL1X1+pcts5bjmq99YdOnhtAkAg2J8dN3B3idpZDiQbC8fd5bGPmdI/pSUudAP27uzLEjr2qrE/QPPGdwm2m7IZFJtK7kK1hKio6u48t/bg0iL7AkEAuUUs94h+v702Fnym+jJ2CHEkXvz2US8UDs52nWrZYiM1o1y4tfSHm8H8bv8JCAa9GHyriEawfBraILOmllFdLQJAQSRZy4wmlaG48MhVXodB85X+VZ9krGXZ2TLhz7kz9iuToy53l9jTkESt6L5BfBDCVdIwcXLYgK+8KFdHN5W7HQ==
 
 # 百度地图
-VITE_BAIDU_MAP_KEY = 'efHIw2qmH8RzHPxK0z0rbCgzDVLup9LD'
+VITE_BAIDU_MAP_KEY = 'Y2aJXiswwPxy6mwFs1z9c7U5gwX9WfUN'

src/components/Map/index.ts

@@ -0,0 +1,3 @@
+import MapDialog from './src/MapDialog.vue'
+
+export { MapDialog }

src/components/Map/index.vue

@@ -1,275 +0,0 @@
-<!-- 地图组件：基于百度地图 GL 实现 -->
-<!-- TODO @AI：还存在两个没解决的小bug,一个是修改手动定位时一次加载 不知道为何定位点在地图左上角 调了半天没解决 第二个是检索地址确定定位的功能参照百度的文档没也搞好 回头再解决一下 -->
-<template>
-  <div v-if="props.isWrite">
-    <el-form ref="form" label-width="120px">
-      <el-form-item label="定位位置:">
-        <el-select
-          class="w-full"
-          v-model="state.address"
-          clearable
-          filterable
-          remote
-          reserve-keyword
-          placeholder="可输入地址查询经纬度"
-          :remote-method="autoSearch"
-          @change="handleAddressSelect"
-          :loading="state.loading"
-        >
-          <el-option
-            v-for="item in state.mapAddrOptions"
-            :key="item.value"
-            :label="item.name"
-            :value="item.value"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="设备地图:">
-        <!-- TODO @super：这里看看 unocss 哈 -->
-        <div id="bdMap" class="mapContainer"></div>
-      </el-form-item>
-    </el-form>
-  </div>
-  <div v-else>
-    <el-descriptions :column="2" border :labelStyle="{ 'font-weight': 'bold' }">
-      <el-descriptions-item label="设备位置:">{{ state.address }}</el-descriptions-item>
-    </el-descriptions>
-    <div id="bdMap" class="mapContainer"></div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { reactive, onMounted } from 'vue'
-import { propTypes } from '@/utils/propTypes'
-
-// 扩展 Window 接口以包含百度地图 GL API
-declare global {
-  interface Window {
-    BMapGL: any
-    initBaiduMap: () => void
-  }
-}
-
-const emits = defineEmits(['locateChange', 'update:center'])
-const state = reactive({
-  lonLat: '', // 经度,纬度
-  address: '',
-  loading: false,
-  latitude: '', // 纬度
-  longitude: '', // 经度
-  map: null as any, // 地图对象
-  mapAddrOptions: [] as any[],
-  mapMarker: null as any, // 标记对象
-  geocoder: null as any,
-  autoComplete: null as any,
-  tips: [] // 搜索提示
-})
-
-const props = defineProps({
-  clickMap: propTypes.bool.def(false),
-  isWrite: propTypes.bool.def(false),
-  center: propTypes.string.def('')
-})
-
-watch(
-  () => props.center,
-  // TODO @AI：这里有个 linter 报错
-  (newVal, oldVal) => {
-    if (newVal) {
-      // 当 center 变化时 重新加载mark点
-      regeoCode(newVal)
-    }
-  }
-)
-
-/** 加载百度地图 */
-const loadMap = () => {
-  state.address = ''
-  state.latitude = ''
-  state.longitude = ''
-
-  // 创建百度地图 API 脚本，动态加载
-  const script = document.createElement('script')
-  script.src = `https://api.map.baidu.com/api?v=1.0&type=webgl&ak=${
-    import.meta.env.VITE_BAIDU_MAP_KEY
-  }&callback=initBaiduMap`
-  document.body.appendChild(script)
-
-  // 定义全局回调函数
-  window.initBaiduMap = () => {
-    initMap()
-    initGeocoder()
-    initAutoComplete()
-
-    // TODO @AI：这里加一行注释
-    if (props.clickMap) {
-      state.map.addEventListener('click', (e: any) => {
-        console.log(e)
-        const point = e.latlng
-        console.log(point)
-        state.lonLat = point.lng + ',' + point.lat
-        console.log(state.lonLat)
-        regeoCode(state.lonLat)
-      })
-    }
-  }
-}
-
-/** 初始化地图 */
-const initMap = () => {
-  const mapId = 'bdMap'
-  state.map = new window.BMapGL.Map(mapId)
-  // TODO @super：这个是默认的哇？
-  state.map.centerAndZoom(new window.BMapGL.Point(116.404, 39.915), 11)
-  state.map.enableScrollWheelZoom()
-  state.map.disableDoubleClickZoom()
-
-  // 添加地图控件
-  state.map.addControl(new window.BMapGL.NavigationControl())
-  state.map.addControl(new window.BMapGL.ScaleControl())
-  state.map.addControl(new window.BMapGL.ZoomControl())
-}
-
-/** 初始化地理编码器 */
-const initGeocoder = () => {
-  state.geocoder = new window.BMapGL.Geocoder()
-}
-
-/** 初始化自动完成 */
-const initAutoComplete = () => {
-  state.autoComplete = new window.BMapGL.Autocomplete({
-    input: 'searchInput',
-    location: state.map
-  })
-}
-
-/**
- * 搜索地址
- * @param queryValue 搜索关键词
- */
-const autoSearch = (queryValue: string) => {
-  if (!queryValue) {
-    state.mapAddrOptions = []
-    return
-  }
-
-  state.loading = true
-
-  // 使用百度地图地点检索服务
-  const localSearch = new window.BMapGL.LocalSearch(state.map, {
-    onSearchComplete: (results: any) => {
-      state.loading = false
-      const temp: any[] = []
-
-      if (results && results._pois) {
-        const pois = results._pois
-        pois.forEach((p: any) => {
-          const point = p.point
-          if (point && point.lng && point.lat) {
-            temp.push({
-              name: p.title,
-              value: point.lng + ',' + point.lat
-            })
-          }
-        })
-      }
-
-      state.mapAddrOptions = temp
-    }
-  })
-
-  localSearch.search(queryValue)
-}
-
-/**
- * 处理地址选择
- * @param value 选中的地址值
- */
-const handleAddressSelect = (value: string) => {
-  if (value) {
-    regeoCode(value)
-  }
-}
-
-/**
- * 添加标记点
- * @param lnglat 经纬度数组
- */
-const setMarker = (lnglat: any) => {
-  if (!lnglat) {
-    return
-  }
-
-  // 如果点标记已存在则先移除原点
-  if (state.mapMarker !== null) {
-    state.map.removeOverlay(state.mapMarker)
-    state.lonLat = ''
-  }
-
-  // 创建新的标记点
-  const point = new window.BMapGL.Point(lnglat[0], lnglat[1])
-  state.mapMarker = new window.BMapGL.Marker(point)
-
-  // 添加点标记到地图
-  state.map.addOverlay(state.mapMarker)
-  state.map.centerAndZoom(point, 16)
-}
-
-/**
- * 经纬度转化为地址、添加标记点
- * @param lonLat 经度,纬度字符串
- */
-const regeoCode = (lonLat: string) => {
-  if (!lonLat) {
-    return
-  }
-  const lnglat = lonLat.split(',')
-  if (lnglat.length !== 2) {
-    return
-  }
-  state.longitude = lnglat[0]
-  state.latitude = lnglat[1]
-
-  // 通知父组件位置变更
-  emits('locateChange', lnglat)
-  emits('update:center', lonLat)
-
-  // 先将地图中心点设置到目标位置
-  const point = new window.BMapGL.Point(lnglat[0], lnglat[1])
-  state.map.centerAndZoom(point, 16)
-
-  // 再设置标记并获取地址
-  setMarker(lnglat)
-  getAddress(lnglat)
-}
-
-/**
- * 根据经纬度获取地址信息
- *
- * @param lnglat 经纬度数组
- */
-const getAddress = (lnglat: any) => {
-  const point = new window.BMapGL.Point(lnglat[0], lnglat[1])
-
-  state.geocoder.getLocation(point, (result: any) => {
-    if (result && result.address) {
-      state.address = result.address
-    }
-  })
-}
-
-/** 显式暴露方法，使其可以被父组件访问 */
-defineExpose({ regeoCode })
-
-onMounted(() => {
-  loadMap()
-})
-</script>
-
-<style scoped>
-// @AI：尽量 unocss 简化掉；
-.mapContainer {
-  width: 100%;
-  height: 400px;
-}
-</style>

src/components/Map/src/MapDialog.vue

@@ -0,0 +1,291 @@
+<!-- 地图选择弹窗组件：基于百度地图 GL 实现 -->
+<template>
+  <Dialog
+    title="百度地图"
+    v-model="dialogVisible"
+    @opened="handleDialogOpened"
+    @closed="handleDialogClosed"
+  >
+    <div class="w-full">
+      <!-- 第一行：位置搜索 -->
+      <el-form label-width="80px">
+        <el-form-item label="定位位置">
+          <el-select
+            class="w-full"
+            v-model="state.address"
+            clearable
+            filterable
+            remote
+            reserve-keyword
+            placeholder="可输入地址查询经纬度"
+            :remote-method="autoSearch"
+            @change="handleAddressSelect"
+            :loading="state.loading"
+          >
+            <el-option
+              v-for="item in state.mapAddressOptions"
+              :key="item.value"
+              :label="item.name"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <!-- 第二行：坐标显示 -->
+        <el-form-item label="当前坐标">
+          <div class="flex items-center gap-4">
+            <span>经度: {{ state.longitude || '-' }}</span>
+            <span>纬度: {{ state.latitude || '-' }}</span>
+          </div>
+        </el-form-item>
+      </el-form>
+      <!-- 第三行：地图 -->
+      <div
+        v-if="state.mapContainerReady"
+        ref="mapContainerRef"
+        class="w-full h-[400px] mt-[10px]"
+      ></div>
+      <div v-else class="w-full h-[400px] mt-[10px] flex items-center justify-center">
+        <span class="text-gray-400">地图加载中...</span>
+      </div>
+    </div>
+    <template #footer>
+      <el-button @click="handleConfirm" type="primary">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref, nextTick } from 'vue'
+
+// 扩展 Window 接口以包含百度地图 GL API
+declare global {
+  interface Window {
+    BMapGL: any
+    initBaiduMapDialog: () => void
+  }
+}
+
+const emits = defineEmits(['confirm'])
+
+const dialogVisible = ref(false)
+const mapContainerRef = ref<HTMLElement>()
+const state = reactive({
+  lonLat: '', // 经纬度字符串，格式为 "经度,纬度"
+  address: '', // 地址信息
+  loading: false, // 地址搜索加载状态
+  latitude: '', // 纬度
+  longitude: '', // 经度
+  map: null as any, // 百度地图实例
+  mapAddressOptions: [] as any[], // 地址搜索选项
+  mapMarker: null as any, // 地图标记点
+  geocoder: null as any, // 地理编码器实例
+  mapContainerReady: false, // 地图容器是否准备好
+  sdkLoaded: false // 百度地图 SDK 是否已加载
+})
+
+// 初始经纬度（打开弹窗时传入）
+const initLongitude = ref<number | undefined>()
+const initLatitude = ref<number | undefined>()
+
+/** 打开弹窗 */
+const open = (longitude?: number, latitude?: number) => {
+  initLongitude.value = longitude
+  initLatitude.value = latitude
+  state.longitude = longitude ? String(longitude) : ''
+  state.latitude = latitude ? String(latitude) : ''
+  state.address = ''
+  state.mapAddressOptions = []
+  dialogVisible.value = true
+}
+
+defineExpose({ open })
+
+/** 弹窗打开动画完成后初始化地图 */
+const handleDialogOpened = async () => {
+  // 先显示地图容器
+  state.mapContainerReady = true
+
+  // 等待下一个 DOM 更新周期，确保地图容器已渲染
+  await nextTick()
+  if (!state.sdkLoaded) {
+    loadMapSdk()
+  } else {
+    initMapInstance()
+  }
+}
+
+/** 弹窗关闭后清理地图 */
+const handleDialogClosed = () => {
+  // 销毁地图实例
+  if (state.map) {
+    state.map.destroy?.()
+    state.map = null
+  }
+  state.mapMarker = null
+  state.geocoder = null
+  state.mapContainerReady = false
+}
+
+/** 加载百度地图 SDK */
+const loadMapSdk = () => {
+  // 检查是否已加载百度地图 SDK
+  if (window.BMapGL) {
+    state.sdkLoaded = true
+    initMapInstance()
+    return
+  }
+
+  // 动态创建脚本标签加载百度地图 SDK
+  const script = document.createElement('script')
+  script.src = `https://api.map.baidu.com/api?v=1.0&type=webgl&ak=${
+    import.meta.env.VITE_BAIDU_MAP_KEY
+  }&callback=initBaiduMapDialog`
+  document.body.appendChild(script)
+  // 定义回调函数，SDK 加载完成后调用
+  window.initBaiduMapDialog = () => {
+    state.sdkLoaded = true
+    initMapInstance()
+  }
+}
+
+/** 初始化地图实例 */
+const initMapInstance = () => {
+  if (!mapContainerRef.value) {
+    return
+  }
+
+  // 初始化地图和地理编码器
+  initMap()
+  initGeocoder()
+
+  // 监听地图点击事件
+  state.map.addEventListener('click', (e: any) => {
+    const point = e.latlng
+    state.lonLat = point.lng + ',' + point.lat
+    regeoCode(state.lonLat)
+  })
+
+  // 如果有初始经纬度，加载标记点
+  if (initLongitude.value && initLatitude.value) {
+    const lonLat = `${initLongitude.value},${initLatitude.value}`
+    regeoCode(lonLat)
+  }
+}
+
+/** 初始化地图 */
+const initMap = () => {
+  state.map = new window.BMapGL.Map(mapContainerRef.value)
+  state.map.centerAndZoom(new window.BMapGL.Point(116.404, 39.915), 11)
+  state.map.enableScrollWheelZoom()
+  state.map.disableDoubleClickZoom()
+
+  state.map.addControl(new window.BMapGL.NavigationControl())
+  state.map.addControl(new window.BMapGL.ScaleControl())
+  state.map.addControl(new window.BMapGL.ZoomControl())
+}
+
+/** 初始化地理编码器 */
+const initGeocoder = () => {
+  state.geocoder = new window.BMapGL.Geocoder()
+}
+
+/** 搜索地址 */
+const autoSearch = (queryValue: string) => {
+  if (!queryValue) {
+    state.mapAddressOptions = []
+    return
+  }
+
+  state.loading = true
+
+  // noinspection JSUnusedGlobalSymbols
+  const localSearch = new window.BMapGL.LocalSearch(state.map, {
+    onSearchComplete: (results: any) => {
+      state.loading = false
+      const temp: any[] = []
+
+      if (results && results._pois) {
+        results._pois.forEach((p: any) => {
+          const point = p.point
+          if (point && point.lng && point.lat) {
+            temp.push({
+              name: p.title,
+              value: point.lng + ',' + point.lat
+            })
+          }
+        })
+      }
+
+      state.mapAddressOptions = temp
+    }
+  })
+
+  localSearch.search(queryValue)
+}
+
+/** 处理地址选择 */
+const handleAddressSelect = (value: string) => {
+  if (value) {
+    regeoCode(value)
+  }
+}
+
+/** 添加标记点 */
+const setMarker = (lnglat: string[]) => {
+  if (!lnglat) {
+    return
+  }
+
+  if (state.mapMarker !== null) {
+    state.map.removeOverlay(state.mapMarker)
+  }
+
+  const point = new window.BMapGL.Point(lnglat[0], lnglat[1])
+  state.mapMarker = new window.BMapGL.Marker(point)
+
+  state.map.addOverlay(state.mapMarker)
+  state.map.centerAndZoom(point, 16)
+}
+
+/** 经纬度转地址、添加标记点 */
+const regeoCode = (lonLat: string) => {
+  if (!lonLat) {
+    return
+  }
+  const lnglat = lonLat.split(',')
+  if (lnglat.length !== 2) {
+    return
+  }
+
+  state.longitude = lnglat[0]
+  state.latitude = lnglat[1]
+  const point = new window.BMapGL.Point(lnglat[0], lnglat[1])
+  state.map.centerAndZoom(point, 16)
+
+  setMarker(lnglat)
+  getAddress(lnglat)
+}
+
+/** 根据经纬度获取地址信息 */
+const getAddress = (lnglat: string[]) => {
+  const point = new window.BMapGL.Point(lnglat[0], lnglat[1])
+  state.geocoder.getLocation(point, (result: any) => {
+    if (result && result.address) {
+      state.address = result.address
+    }
+  })
+}
+
+/** 确认选择 */
+const handleConfirm = () => {
+  if (state.longitude && state.latitude) {
+    emits('confirm', {
+      longitude: state.longitude,
+      latitude: state.latitude,
+      address: state.address
+    })
+  }
+  dialogVisible.value = false
+}
+</script>

src/views/iot/device/device/DeviceForm.vue

@@ -66,31 +66,17 @@
           <el-form-item label="设备序列号" prop="serialNumber">
             <el-input v-model="formData.serialNumber" placeholder="请输入设备序列号" />
           </el-form-item>
-          <el-form-item label="设备经度" prop="longitude" type="number">
-            <el-input
-              v-model="formData.longitude"
-              placeholder="请输入设备经度"
-              @blur="updateLocationFromCoordinates"
-            />
+          <el-form-item label="设备位置" prop="longitude">
+            <div class="flex items-center gap-2 w-full">
+              <el-input v-model="formData.longitude" placeholder="经度" class="flex-1">
+                <template #prepend>经度</template>
+              </el-input>
+              <el-input v-model="formData.latitude" placeholder="纬度" class="flex-1">
+                <template #prepend>纬度</template>
+              </el-input>
+              <el-button type="primary" @click="openMapDialog">坐标拾取</el-button>
+            </div>
           </el-form-item>
-          <el-form-item label="设备维度" prop="latitude" type="number">
-            <el-input
-              v-model="formData.latitude"
-              placeholder="请输入设备维度"
-              @blur="updateLocationFromCoordinates"
-            />
-          </el-form-item>
-          <!-- TODO @AI：然后后面有个按钮【标注地图】可以手动按需调整； -->
-          <div class="pl-0 h-[400px] w-full ml-[-18px]" v-if="showMap">
-            <Map
-              :isWrite="true"
-              :clickMap="true"
-              :center="formData.location"
-              @locate-change="handleLocationChange"
-              ref="mapRef"
-              class="h-full w-full"
-            />
-          </div>
         </el-collapse-item>
       </el-collapse>
     </el-form>
@@ -99,13 +85,15 @@
       <el-button @click="dialogVisible = false">取 消</el-button>
     </template>
   </Dialog>
+  <!-- 地图选择弹窗 -->
+  <MapDialog ref="mapDialogRef" @confirm="handleMapConfirm" />
 </template>
 <script setup lang="ts">
 import { DeviceApi, DeviceVO } from '@/api/iot/device/device'
 import { DeviceGroupApi } from '@/api/iot/device/group'
 import { DeviceTypeEnum, ProductApi, ProductVO } from '@/api/iot/product/product'
 import { UploadImg } from '@/components/UploadFile'
-import Map from '@/components/Map/index.vue'
+import { MapDialog } from '@/components/Map'
 import { ref } from 'vue'
 
 /** IoT 设备表单 */
@@ -118,8 +106,7 @@ const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formType = ref('') // 表单的类型：create - 新增；update - 修改
-const showMap = ref(false) // 是否显示地图组件
-const mapRef = ref(null)
+const mapDialogRef = ref() // 地图弹窗 Ref
 
 const formData = ref({
   id: undefined,
@@ -130,21 +117,24 @@ const formData = ref({
   gatewayId: undefined,
   deviceType: undefined as number | undefined,
   serialNumber: undefined,
-  longitude: undefined,
-  latitude: undefined,
-  location: '', // 格式: "经度,纬度" // TODO @AI：单独搞个字段出来，不放在 formData 里！
+  longitude: undefined as number | string | undefined,
+  latitude: undefined as number | string | undefined,
   groupIds: [] as number[]
 })
 
-/** 监听经纬度变化，更新 location */
-// TODO @AI：交互上，想改成上面展示 longitude、latitude 两个地址；然后后面有个按钮【标注地图】可以手动按需调整；
-watch([() => formData.value.longitude, () => formData.value.latitude], ([newLong, newLat]) => {
-  if (newLong && newLat) {
-    formData.value.location = `${newLong},${newLat}`
-    // 有了经纬度数据后显示地图
-    showMap.value = true
-  }
-})
+/** 打开地图选择弹窗 */
+const openMapDialog = () => {
+  mapDialogRef.value?.open(
+    formData.value.longitude ? Number(formData.value.longitude) : undefined,
+    formData.value.latitude ? Number(formData.value.latitude) : undefined
+  )
+}
+
+/** 处理地图选择确认 */
+const handleMapConfirm = (data: { longitude: string; latitude: string; address: string }) => {
+  formData.value.longitude = data.longitude
+  formData.value.latitude = data.latitude
+}
 
 const formRules = reactive({
   productId: [{ required: true, message: '产品不能为空', trigger: 'blur' }],
@@ -182,8 +172,53 @@ const formRules = reactive({
       message: '序列号只能包含字母、数字、中划线和下划线',
       trigger: 'blur'
     }
+  ],
+  longitude: [
+    {
+      validator: (_rule: any, value: any, callback: any) => {
+        if (value !== undefined && value !== null && value !== '') {
+          const num = Number(value)
+          if (isNaN(num)) {
+            callback(new Error('经度必须是有效数字'))
+            return
+          }
+          if (num < -180 || num > 180) {
+            callback(new Error('经度范围为 -180 到 180'))
+            return
+          }
+          if (!formData.value.latitude && formData.value.latitude !== 0) {
+            callback(new Error('请同时填写纬度'))
+            return
+          }
+        }
+        callback()
+      },
+      trigger: 'blur'
+    }
+  ],
+  latitude: [
+    {
+      validator: (_rule: any, value: any, callback: any) => {
+        if (value !== undefined && value !== null && value !== '') {
+          const num = Number(value)
+          if (isNaN(num)) {
+            callback(new Error('纬度必须是有效数字'))
+            return
+          }
+          if (num < -90 || num > 90) {
+            callback(new Error('纬度范围为 -90 到 90'))
+            return
+          }
+          if (!formData.value.longitude && formData.value.longitude !== 0) {
+            callback(new Error('请同时填写经度'))
+            return
+          }
+        }
+        callback()
+      },
+      trigger: 'blur'
+    }
   ]
-  // TODO @AI：加个校验。如果 longitude、latitude 有一个非空，必须两个都非空；
 })
 const formRef = ref() // 表单 Ref
 const products = ref<ProductVO[]>([]) // 产品列表
@@ -197,25 +232,15 @@ const open = async (type: string, id?: number) => {
   formType.value = type
   resetForm()
 
-  // 默认不显示地图，等待数据加载
-  showMap.value = false
-
   // 修改时，设置数据
   if (id) {
     formLoading.value = true
     try {
       formData.value = await DeviceApi.getDevice(id)
-
-      // 如果有经纬度，设置 location 字段用于地图显示
-      if (formData.value.longitude && formData.value.latitude) {
-        formData.value.location = `${formData.value.longitude},${formData.value.latitude}`
-      }
     } finally {
       formLoading.value = false
     }
   }
-  // 如果有经纬信息，则数据加载完成后，显示地图
-  showMap.value = true
 
   // 加载网关设备列表
   gatewayDevices.value = await DeviceApi.getSimpleDeviceList(DeviceTypeEnum.GATEWAY)
@@ -263,12 +288,9 @@ const resetForm = () => {
     serialNumber: undefined,
     longitude: undefined,
     latitude: undefined,
-    location: '',
     groupIds: []
   }
   formRef.value?.resetFields()
-  // 重置表单时，隐藏地图
-  showMap.value = false
 }
 
 /** 产品选择变化 */
@@ -280,22 +302,4 @@ const handleProductChange = (productId: number) => {
   const product = products.value?.find((item) => item.id === productId)
   formData.value.deviceType = product?.deviceType
 }
-
-/** 处理位置变化 */
-// todo @AI：这了有 linter 报错：TS7044: Parameter lnglat implicitly has an any type, but a better type may be inferred from usage.
-const handleLocationChange = (lnglat) => {
-  formData.value.longitude = lnglat[0]
-  formData.value.latitude = lnglat[1]
-}
-
-/** 根据经纬度更新地图位置 */
-const updateLocationFromCoordinates = () => {
-  // 验证经纬度是否有效
-  if (formData.value.longitude && formData.value.latitude) {
-    // 更新 location 字段，地图组件会根据此字段更新
-    formData.value.location = `${formData.value.longitude},${formData.value.latitude}`
-    // TODO @AI：这里有告警；
-    mapRef.value.regeoCode(formData.value.location)
-  }
-}
 </script>

src/views/iot/device/device/detail/DeviceDetailsInfo.vue

@@ -2,81 +2,45 @@
 <template>
   <div>
     <ContentWrap>
-      <el-row :gutter="16">
-        <!-- 左侧设备信息 -->
-        <el-col :span="12">
-          <el-card class="h-full">
-            <template #header>
-              <div class="flex items-center">
-                <Icon icon="ep:info-filled" class="mr-2 text-primary" />
-                <span>设备信息</span>
-              </div>
+      <el-descriptions :column="3" border>
+          <el-descriptions-item label="产品名称">{{ product.name }}</el-descriptions-item>
+          <el-descriptions-item label="ProductKey">{{ product.productKey }}</el-descriptions-item>
+          <el-descriptions-item label="设备类型">
+            <dict-tag :type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE" :value="product.deviceType" />
+          </el-descriptions-item>
+          <el-descriptions-item label="DeviceName">{{ device.deviceName }}</el-descriptions-item>
+          <el-descriptions-item label="备注名称">{{ device.nickname }}</el-descriptions-item>
+          <el-descriptions-item label="当前状态">
+            <dict-tag :type="DICT_TYPE.IOT_DEVICE_STATE" :value="device.state" />
+          </el-descriptions-item>
+          <el-descriptions-item label="创建时间">
+            {{ formatDate(device.createTime) }}
+          </el-descriptions-item>
+          <el-descriptions-item label="激活时间">
+            {{ formatDate(device.activeTime) }}
+          </el-descriptions-item>
+          <el-descriptions-item label="最后上线时间">
+            {{ formatDate(device.onlineTime) }}
+          </el-descriptions-item>
+          <el-descriptions-item label="最后离线时间">
+            {{ formatDate(device.offlineTime) }}
+          </el-descriptions-item>
+          <el-descriptions-item label="设备位置">
+            <template v-if="hasLocation">
+              <span class="mr-2">{{ device.longitude }}, {{ device.latitude }}</span>
+              <el-button type="primary" link @click="openMapDialog">
+                <Icon icon="ep:location" class="mr-1" />
+                查看地图
+              </el-button>
             </template>
-            <el-descriptions :column="2" border>
-              <el-descriptions-item label="产品名称">{{ product.name }}</el-descriptions-item>
-              <el-descriptions-item label="ProductKey">
-                {{ product.productKey }}
-              </el-descriptions-item>
-              <el-descriptions-item label="设备类型">
-                <dict-tag :type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE" :value="product.deviceType" />
-              </el-descriptions-item>
-              <el-descriptions-item label="DeviceName">
-                {{ device.deviceName }}
-              </el-descriptions-item>
-              <el-descriptions-item label="备注名称">{{ device.nickname }}</el-descriptions-item>
-              <el-descriptions-item label="创建时间">
-                {{ formatDate(device.createTime) }}
-              </el-descriptions-item>
-              <el-descriptions-item label="当前状态">
-                <dict-tag :type="DICT_TYPE.IOT_DEVICE_STATE" :value="device.state" />
-              </el-descriptions-item>
-              <el-descriptions-item label="激活时间">
-                {{ formatDate(device.activeTime) }}
-              </el-descriptions-item>
-              <el-descriptions-item label="最后上线时间">
-                {{ formatDate(device.onlineTime) }}
-              </el-descriptions-item>
-              <el-descriptions-item label="最后离线时间">
-                {{ formatDate(device.offlineTime) }}
-              </el-descriptions-item>
-              <el-descriptions-item label="认证信息">
-                <el-button type="primary" @click="handleAuthInfoDialogOpen" plain size="small"
-                  >查看</el-button
-                >
-              </el-descriptions-item>
-            </el-descriptions>
-          </el-card>
-        </el-col>
-
-        <!-- 右侧地图 -->
-        <el-col :span="12">
-          <el-card class="h-full">
-            <template #header>
-              <div class="flex items-center justify-between">
-                <div class="flex items-center">
-                  <Icon icon="ep:location" class="mr-2 text-primary" />
-                  <span>设备位置</span>
-                </div>
-                <div class="text-[14px] text-[var(--el-text-color-secondary)]">
-                  最后上线时间：
-                  {{ device.onlineTime ? formatDate(device.onlineTime) : '--' }}
-                </div>
-              </div>
-            </template>
-            <div class="h-[400px] w-full">
-              <!-- TODO @AI：是不是可以通过 getLocationString() 简化判断； -->
-              <Map v-if="showMap" :center="getLocationString()" class="h-full w-full" />
-              <div
-                v-else
-                class="flex items-center justify-center h-full w-full bg-[var(--el-fill-color-light)] text-[var(--el-text-color-secondary)]"
-              >
-                <Icon icon="ep:warning" class="mr-2 text-warning" />
-                <span>暂无位置信息</span>
-              </div>
-            </div>
-          </el-card>
-        </el-col>
-      </el-row>
+            <span v-else class="text-[var(--el-text-color-secondary)]">暂无位置信息</span>
+          </el-descriptions-item>
+          <el-descriptions-item label="认证信息">
+            <el-button type="primary" @click="handleAuthInfoDialogOpen" plain size="small">
+              查看
+            </el-button>
+          </el-descriptions-item>
+        </el-descriptions>
     </ContentWrap>
 
     <!-- 认证信息弹框 -->
@@ -126,6 +90,9 @@
         <el-button @click="handleAuthInfoDialogClose">关闭</el-button>
       </template>
     </Dialog>
+
+    <!-- 地图弹窗 -->
+    <MapDialog ref="mapDialogRef" />
   </div>
 
   <!-- TODO 待开发：设备标签 -->
@@ -136,7 +103,7 @@ import { ProductVO } from '@/api/iot/product/product'
 import { formatDate } from '@/utils/formatTime'
 import { DeviceVO } from '@/api/iot/device/device'
 import { DeviceApi, IotDeviceAuthInfoVO } from '@/api/iot/device/device'
-import Map from '@/components/Map/index.vue'
+import { MapDialog } from '@/components/Map'
 import { ref, computed } from 'vue'
 import { useClipboard } from '@vueuse/core'
 
@@ -149,18 +116,16 @@ const emit = defineEmits(['refresh']) // 定义 Emits
 const authDialogVisible = ref(false) // 定义设备认证信息弹框的可见性
 const authPasswordVisible = ref(false) // 定义密码可见性状态
 const authInfo = ref<IotDeviceAuthInfoVO>({} as IotDeviceAuthInfoVO) // 定义设备认证信息对象
+const mapDialogRef = ref() // 地图弹窗 Ref
 
-/** 控制地图显示的标志 */
-const showMap = computed(() => {
+/** 是否有位置信息 */
+const hasLocation = computed(() => {
   return !!(device.longitude && device.latitude)
 })
 
-/** 获取位置字符串，用于地图组件 */
-const getLocationString = () => {
-  if (device.longitude && device.latitude) {
-    return `${device.longitude},${device.latitude}`
-  }
-  return ''
+/** 打开地图弹窗 */
+const openMapDialog = () => {
+  mapDialogRef.value?.open(device.longitude, device.latitude)
 }
 
 /** 复制到剪贴板方法 */