!856 feat(iot):【设备定位：100%】

Merge pull request !856 from 芋道源码/feature/iot-location

.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/api/iot/device/device/index.ts

@@ -5,6 +5,7 @@ export interface DeviceVO {
   id: number // 设备 ID，主键，自增
   deviceName: string // 设备名称
   productId: number // 产品编号
+  productName?: string // 产品名称（只有部分接口返回，例如 getDeviceLocationList）
   productKey: string // 产品标识
   deviceType: number // 设备类型
   nickname: string // 设备备注名称
@@ -21,7 +22,6 @@ export interface DeviceVO {
   mqttUsername: string // MQTT 用户名
   mqttPassword: string // MQTT 密码
   authType: string // 认证类型
-  locationType: number // 定位类型
   latitude?: number // 设备位置的纬度
   longitude?: number // 设备位置的经度
   areaId: number // 地区编码
@@ -49,14 +49,6 @@ export interface IotDevicePropertyRespVO {
   updateTime: Date // 更新时间
 }
 
-// TODO @芋艿：调整到 constants
-// IoT 设备状态枚举
-export enum DeviceStateEnum {
-  INACTIVE = 0, // 未激活
-  ONLINE = 1, // 在线
-  OFFLINE = 2 // 离线
-}
-
 // 设备认证参数 VO
 export interface IotDeviceAuthInfoVO {
   clientId: string // 客户端 ID
@@ -123,6 +115,11 @@ export const DeviceApi = {
     return await request.get({ url: `/iot/device/simple-list?`, params: { deviceType, productId } })
   },
 
+  // 获取设备位置列表（用于地图展示）
+  getDeviceLocationList: async () => {
+    return await request.get<DeviceVO[]>({ url: `/iot/device/location-list` })
+  },
+
   // 根据产品编号，获取设备的精简信息列表
   getDeviceListByProductId: async (productId: number) => {
     return await request.get({ url: `/iot/device/simple-list?`, params: { productId } })

src/api/iot/product/product/index.ts

@@ -13,7 +13,6 @@ export interface ProductVO {
   description: string // 产品描述
   status: number // 产品状态
   deviceType: number // 设备类型
-  locationType: number // 设备类型
   netType: number // 联网方式
   codecType: string // 数据格式（编解码器类型）
   deviceCount: number // 设备数量
@@ -26,12 +25,6 @@ export enum DeviceTypeEnum {
   GATEWAY_SUB = 1, // 网关子设备
   GATEWAY = 2 // 网关设备
 }
-// IOT 产品定位类型枚举类 0: 手动定位, 1: IP 定位, 2: 定位模块定位
-export enum LocationTypeEnum {
-  IP = 1, // IP 定位
-  MODULE = 2, // 设备定位
-  MANUAL = 3 // 手动定位
-}
 // IOT 数据格式（编解码器类型）枚举类
 export enum CodecTypeEnum {
   ALINK = 'Alink' // 阿里云 Alink 协议

src/api/iot/rule/data/sink/index.ts

@@ -10,6 +10,8 @@ export interface DataSinkVO {
   type?: number // 桥梁类型
   config?:
     | HttpConfig
+    | TcpConfig
+    | WebSocketConfig
     | MqttConfig
     | RocketMQConfig
     | KafkaMQConfig
@@ -30,6 +32,38 @@ export interface HttpConfig extends Config {
   body: string
 }
 
+/** TCP 配置 */
+export interface TcpConfig extends Config {
+  host: string
+  port: number
+  connectTimeoutMs: number
+  readTimeoutMs: number
+  ssl: boolean
+  sslCertPath: string
+  dataFormat: string
+  heartbeatIntervalMs: number
+  reconnectIntervalMs: number
+  maxReconnectAttempts: number
+}
+
+/** WebSocket 配置 */
+export interface WebSocketConfig extends Config {
+  serverUrl: string
+  connectTimeoutMs: number
+  sendTimeoutMs: number
+  heartbeatIntervalMs: number
+  heartbeatMessage: string
+  subprotocols: string
+  customHeaders: string
+  verifySslCert: boolean
+  dataFormat: string
+  reconnectIntervalMs: number
+  maxReconnectAttempts: number
+  enableCompression: boolean
+  sendRetryCount: number
+  sendRetryIntervalMs: number
+}
+
 /** MQTT 配置 */
 export interface MqttConfig extends Config {
   url: string

src/api/iot/statistics/index.ts

@@ -16,18 +16,6 @@ export interface IotStatisticsSummaryRespVO {
   productCategoryDeviceCounts: Record<string, number>
 }
 
-/** 时间戳-数值的键值对类型 */
-interface TimeValueItem {
-  [key: string]: number
-}
-
-/** IoT 消息统计数据类型 */
-export interface IotStatisticsDeviceMessageSummaryRespVO {
-  statType: number
-  upstreamCounts: TimeValueItem[]
-  downstreamCounts: TimeValueItem[]
-}
-
 /** 新的消息统计数据项 */
 export interface IotStatisticsDeviceMessageSummaryByDateRespVO {
   time: string
@@ -41,6 +29,17 @@ export interface IotStatisticsDeviceMessageReqVO {
   times?: string[]
 }
 
+/** 设备位置数据 VO */
+export interface DeviceLocationRespVO {
+  id: number
+  deviceName: string
+  nickname?: string
+  productName?: string
+  state: number
+  longitude: number
+  latitude: number
+}
+
 // IoT 数据统计 API
 export const StatisticsApi = {
   // 查询全局的数据统计

src/components/Map/index.ts

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

src/components/Map/index.vue

@@ -1,273 +0,0 @@
-<!-- 地图组件：基于百度地图GL实现 -->
-<!-- TODO @super：还存在两个没解决的小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,
-  (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 @super：这里加一行注释
-    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 经纬度数组
- */
-// TODO @super：拼写；尽量不要有 idea 绿色提醒哈
-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 经度,纬度字符串
- */
-// TODO @super：拼写；尽量不要有 idea 绿色提醒哈
-const regeoCode = (lonLat: string) => {
-  if (!lonLat) return
-
-  // TODO @super：拼写；尽量不要有 idea 绿色提醒哈
-  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)
-}
-
-// TODO @super：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>
-.mapContainer {
-  width: 100%;
-  height: 400px;
-}
-</style>

src/components/Map/src/MapDialog.vue

@@ -0,0 +1,259 @@
+<!-- 地图选择弹窗组件：基于百度地图 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'
+import { loadBaiduMapSdk } from './utils'
+
+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 // 地图容器是否准备好
+})
+
+// 初始经纬度（打开弹窗时传入）
+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()
+  // 加载百度地图 SDK
+  await loadBaiduMapSdk()
+  initMapInstance()
+}
+
+/** 弹窗关闭后清理地图 */
+const handleDialogClosed = () => {
+  // 销毁地图实例
+  if (state.map) {
+    state.map.destroy?.()
+    state.map = null
+  }
+  state.mapMarker = null
+  state.geocoder = null
+  state.mapContainerReady = false
+}
+
+/** 初始化地图实例 */
+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/components/Map/src/utils.ts

@@ -0,0 +1,62 @@
+/**
+ * 百度地图 SDK 加载工具
+ */
+
+// 扩展 Window 接口以包含百度地图 GL API
+declare global {
+  interface Window {
+    BMapGL: any
+  }
+}
+
+// 全局回调名称
+const CALLBACK_NAME = '__BAIDU_MAP_LOAD_CALLBACK__'
+
+// SDK 加载状态
+let loadPromise: Promise<void> | null = null
+
+/**
+ * 加载百度地图 GL SDK
+ * @param timeout 超时时间（毫秒），默认 10000
+ * @returns Promise<void>
+ */
+export const loadBaiduMapSdk = (timeout = 10000): Promise<void> => {
+  // 已加载完成
+  if (window.BMapGL) {
+    return Promise.resolve()
+  }
+
+  // 正在加载中，返回同一个 Promise
+  if (loadPromise) {
+    return loadPromise
+  }
+
+  loadPromise = new Promise((resolve, reject) => {
+    const timeoutId = setTimeout(() => {
+      loadPromise = null
+      reject(new Error('百度地图 SDK 加载超时'))
+    }, timeout)
+
+    // 全局回调
+    ;(window as any)[CALLBACK_NAME] = () => {
+      clearTimeout(timeoutId)
+      delete (window as any)[CALLBACK_NAME]
+      resolve()
+    }
+
+    // 创建 script 标签
+    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=${CALLBACK_NAME}`
+    script.onerror = () => {
+      clearTimeout(timeoutId)
+      loadPromise = null
+      delete (window as any)[CALLBACK_NAME]
+      reject(new Error('百度地图 SDK 加载失败'))
+    }
+    document.body.appendChild(script)
+  })
+
+  return loadPromise
+}

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

@@ -66,44 +66,17 @@
           <el-form-item label="设备序列号" prop="serialNumber">
             <el-input v-model="formData.serialNumber" placeholder="请输入设备序列号" />
           </el-form-item>
-          <el-form-item label="定位类型" prop="locationType">
-            <el-radio-group v-model="formData.locationType">
-              <el-radio
-                v-for="dict in getIntDictOptions(DICT_TYPE.IOT_LOCATION_TYPE)"
-                :key="dict.value"
-                :label="dict.value"
-              >
-                {{ dict.label }}
-              </el-radio>
-            </el-radio-group>
-          </el-form-item>
-          <!-- LocationTypeEnum.MANUAL：手动定位 -->
-          <template v-if="LocationTypeEnum.MANUAL === formData.locationType">
-            <el-form-item label="设备经度" prop="longitude" type="number">
-              <el-input
-                v-model="formData.longitude"
-                placeholder="请输入设备经度"
-                @blur="updateLocationFromCoordinates"
-              />
-            </el-form-item>
-            <el-form-item label="设备维度" prop="latitude" type="number">
-              <el-input
-                v-model="formData.latitude"
-                placeholder="请输入设备维度"
-                @blur="updateLocationFromCoordinates"
-              />
-            </el-form-item>
-            <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"
-              />
+          <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>
-          </template>
+          </el-form-item>
         </el-collapse-item>
       </el-collapse>
     </el-form>
@@ -112,14 +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, LocationTypeEnum, ProductApi, ProductVO } from '@/api/iot/product/product'
+import { DeviceTypeEnum, ProductApi, ProductVO } from '@/api/iot/product/product'
 import { UploadImg } from '@/components/UploadFile'
-import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
-import Map from '@/components/Map/index.vue'
+import { MapDialog } from '@/components/Map'
 import { ref } from 'vue'
 
 /** IoT 设备表单 */
@@ -132,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,
@@ -144,21 +117,24 @@ const formData = ref({
   gatewayId: undefined,
   deviceType: undefined as number | undefined,
   serialNumber: undefined,
-  locationType: undefined as number | undefined,
-  longitude: undefined,
-  latitude: undefined,
-  location: '', // 格式: "经度,纬度"
+  longitude: undefined as number | string | undefined,
+  latitude: undefined as number | string | undefined,
   groupIds: [] as number[]
 })
 
-/** 监听经纬度变化，更新location */
-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' }],
@@ -196,6 +172,52 @@ 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'
+    }
   ]
 })
 const formRef = ref() // 表单 Ref
@@ -210,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)
@@ -248,16 +260,6 @@ const submitForm = async () => {
   formLoading.value = true
   try {
     const data = formData.value as unknown as DeviceVO
-    // 如果非手动定位，不进行提交该字段
-    if (data.locationType !== LocationTypeEnum.MANUAL) {
-      data.longitude = undefined
-      data.latitude = undefined
-    }
-    // TODO @宗超：【设备定位】address 和 areaId 也要处理；
-    // 1. 手动定位时：longitude + latitude + areaId + address：要稍微注意，address 可能要去掉省市区部分？！
-    // 2. IP 定位时：IotDeviceMessage 的 buildStateUpdateOnline 时，增加 ip 字段。这样，解析到 areaId；另外看看能不能通过 https://lbsyun.baidu.com/faq/api?title=webapi/ip-api-base（只获取 location 就 ok 啦）
-    // 3. 设备定位时：问问 haohao，一般怎么做。
-
     if (formType.value === 'create') {
       await DeviceApi.createDevice(data)
       message.success(t('common.createSuccess'))
@@ -284,16 +286,11 @@ const resetForm = () => {
     gatewayId: undefined,
     deviceType: undefined,
     serialNumber: undefined,
-    locationType: undefined,
     longitude: undefined,
     latitude: undefined,
-    // TODO @宗超：【设备定位】location 是不是拿出来，不放在 formData 里
-    location: '',
     groupIds: []
   }
   formRef.value?.resetFields()
-  // 重置表单时，隐藏地图
-  showMap.value = false
 }
 
 /** 产品选择变化 */
@@ -304,22 +301,5 @@ const handleProductChange = (productId: number) => {
   }
   const product = products.value?.find((item) => item.id === productId)
   formData.value.deviceType = product?.deviceType
-  formData.value.locationType = product?.locationType
-}
-
-/** 处理位置变化 */
-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}`
-    mapRef.value.regeoCode(formData.value.location)
-  }
 }
 </script>

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

@@ -2,83 +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="定位类型">
-                <dict-tag :type="DICT_TYPE.IOT_LOCATION_TYPE" :value="device.locationType" />
-              </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">
-              <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>
 
     <!-- 认证信息弹框 -->
@@ -128,6 +90,9 @@
         <el-button @click="handleAuthInfoDialogClose">关闭</el-button>
       </template>
     </Dialog>
+
+    <!-- 地图弹窗 -->
+    <MapDialog ref="mapDialogRef" />
   </div>
 
   <!-- TODO 待开发：设备标签 -->
@@ -138,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'
 
@@ -151,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)
 }
 
 /** 复制到剪贴板方法 */

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

@@ -244,10 +244,14 @@
 <script lang="ts" setup>
 import { ProductVO } from '@/api/iot/product/product'
 import { ThingModelData } from '@/api/iot/thingmodel'
-import { DeviceApi, DeviceStateEnum, DeviceVO } from '@/api/iot/device/device'
+import { DeviceApi, DeviceVO } from '@/api/iot/device/device'
 import DeviceDetailsMessage from './DeviceDetailsMessage.vue'
 import { DataDefinition } from '@/views/iot/thingmodel/components'
-import { IotDeviceMessageMethodEnum, IoTThingModelTypeEnum } from '@/views/iot/utils/constants'
+import {
+  DeviceStateEnum,
+  IotDeviceMessageMethodEnum,
+  IoTThingModelTypeEnum
+} from '@/views/iot/utils/constants'
 
 const props = defineProps<{
   product: ProductVO

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

@@ -99,13 +99,13 @@
               <div class="text-[14px]">
                 <div class="mb-2.5 last:mb-0">
                   <span class="text-[#717c8e] mr-2.5">属性值</span>
-                  <span class="text-[#0b1d30] font-600">
+                  <span class="text-[var(--el-text-color-primary)] font-600">
                     {{ formatValueWithUnit(item) }}
                   </span>
                 </div>
                 <div class="mb-2.5 last:mb-0">
                   <span class="text-[#717c8e] mr-2.5">更新时间</span>
-                  <span class="text-[#0b1d30] text-[12px]">
+                  <span class="text-[var(--el-text-color-primary)] text-[12px]">
                     {{ item.updateTime ? formatDate(item.updateTime) : '-' }}
                   </span>
                 </div>

src/views/iot/device/device/index.vue

@@ -210,7 +210,7 @@
                   <div class="mb-2.5 last:mb-0">
                     <span class="text-[#717c8e] mr-2.5">备注名称</span>
                     <span
-                      class="text-[#0b1d30] inline-block align-middle overflow-hidden text-ellipsis whitespace-nowrap max-w-[130px]"
+                      class="text-[var(--el-text-color-primary)] inline-block align-middle overflow-hidden text-ellipsis whitespace-nowrap max-w-[130px]"
                     >
                       {{ item.nickname || item.deviceName }}
                     </span>
@@ -371,7 +371,8 @@
 <script setup lang="ts">
 import { DICT_TYPE, getIntDictOptions, getDictLabel } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
-import { DeviceApi, DeviceVO, DeviceStateEnum } from '@/api/iot/device/device'
+import { DeviceApi, DeviceVO } from '@/api/iot/device/device'
+import { DeviceStateEnum } from '@/views/iot/utils/constants'
 import DeviceForm from './DeviceForm.vue'
 import { ProductApi, ProductVO } from '@/api/iot/product/product'
 import { DeviceGroupApi, DeviceGroupVO } from '@/api/iot/device/group'
@@ -384,7 +385,7 @@ defineOptions({ name: 'IoTDevice' })
 
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
-const route = useRoute()
+const route = useRoute() // 路由对象
 
 const loading = ref(true) // 列表加载中
 const list = ref<DeviceVO[]>([]) // 列表的数据

src/views/iot/home/components/DeviceMapCard.vue

@@ -0,0 +1,187 @@
+<template>
+  <el-card class="chart-card" shadow="never">
+    <template #header>
+      <div class="flex items-center justify-between">
+        <span class="text-base font-medium text-gray-600">设备分布地图</span>
+        <div class="flex items-center gap-4 text-sm">
+          <span v-for="item in stateOptions" :key="item.value" class="flex items-center gap-1">
+            <span
+              class="inline-block w-3 h-3 rounded-full"
+              :style="{ backgroundColor: stateColorMap[item.value] }"
+            ></span>
+            <span class="text-gray-500">{{ item.label }}</span>
+          </span>
+        </div>
+      </div>
+    </template>
+    <div v-if="loading" class="h-[500px] flex justify-center items-center">
+      <el-empty description="加载中..." />
+    </div>
+    <div v-else-if="!hasData" class="h-[500px] flex justify-center items-center">
+      <el-empty description="暂无设备位置数据" />
+    </div>
+    <div v-show="hasData && !loading" ref="mapContainerRef" class="h-[500px] w-full"></div>
+  </el-card>
+</template>
+
+<script lang="ts" setup>
+import { DeviceApi, DeviceVO } from '@/api/iot/device/device'
+import { useRouter } from 'vue-router'
+import { DICT_TYPE, getDictObj, getIntDictOptions } from '@/utils/dict'
+import { DeviceStateEnum } from '@/views/iot/utils/constants'
+import { loadBaiduMapSdk } from '@/components/Map/src/utils'
+
+defineOptions({ name: 'DeviceMapCard' })
+
+const router = useRouter()
+const mapContainerRef = ref<HTMLElement>()
+let mapInstance: any = null
+const loading = ref(true)
+const deviceList = ref<DeviceVO[]>([])
+
+/** 是否有数据 */
+const hasData = computed(() => deviceList.value.length > 0)
+
+/** 状态图例列表（从字典获取） */
+const stateOptions = computed(() => getIntDictOptions(DICT_TYPE.IOT_DEVICE_STATE))
+
+/** 设备状态颜色映射 */
+const stateColorMap: Record<number, string> = {
+  [DeviceStateEnum.INACTIVE]: '#EAB308', // 待激活 - 黄色
+  [DeviceStateEnum.ONLINE]: '#22C55E', // 在线 - 绿色
+  [DeviceStateEnum.OFFLINE]: '#9CA3AF' // 离线 - 灰色
+}
+
+/** 获取设备状态配置（从字典获取） */
+const getStateConfig = (state: number): { name: string; color: string } => {
+  const dict = getDictObj(DICT_TYPE.IOT_DEVICE_STATE, state)
+  return {
+    name: dict?.label || '未知',
+    color: stateColorMap[state] || '#909399'
+  }
+}
+
+/** 创建自定义标记点图标 */
+const createMarkerIcon = (color: string, isOnline: boolean) => {
+  const size = isOnline ? 24 : 20
+  const svg = `
+    <svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24">
+      <circle cx="12" cy="12" r="8" fill="${color}" stroke="white" stroke-width="2"/>
+      ${isOnline ? `<circle cx="12" cy="12" r="10" fill="none" stroke="${color}" stroke-width="2" opacity="0.5"/>` : ''}
+    </svg>
+  `
+  const blob = new Blob([svg], { type: 'image/svg+xml' })
+  const url = URL.createObjectURL(blob)
+  return new window.BMapGL.Icon(url, new window.BMapGL.Size(size, size), {
+    anchor: new window.BMapGL.Size(size / 2, size / 2)
+  })
+}
+
+/** 初始化地图 */
+const initMap = () => {
+  if (!mapContainerRef.value || !window.BMapGL) {
+    return
+  }
+
+  // 销毁旧实例
+  if (mapInstance) {
+    mapInstance.destroy?.()
+    mapInstance = null
+  }
+
+  // 创建地图实例，默认以中国为中心
+  mapInstance = new window.BMapGL.Map(mapContainerRef.value)
+  mapInstance.centerAndZoom(new window.BMapGL.Point(106, 37.5), 5)
+  mapInstance.enableScrollWheelZoom()
+
+  // 添加控件
+  mapInstance.addControl(new window.BMapGL.ScaleControl())
+  mapInstance.addControl(new window.BMapGL.ZoomControl())
+
+  // 添加设备标记点
+  deviceList.value.forEach((device) => {
+    const config = getStateConfig(device.state)
+    const isOnline = device.state === DeviceStateEnum.ONLINE
+    const point = new window.BMapGL.Point(device.longitude, device.latitude)
+
+    // 创建标记
+    const marker = new window.BMapGL.Marker(point, {
+      icon: createMarkerIcon(config.color, isOnline)
+    })
+
+    // 创建信息窗口内容
+    const infoContent = `
+      <div style="padding: 8px; min-width: 180px;">
+        <div style="font-weight: bold; margin-bottom: 8px; font-size: 14px;">${device.nickname || device.deviceName}</div>
+        <div style="color: #666; font-size: 12px; line-height: 1.8;">
+          <div>产品: ${device.productName || '-'}</div>
+          <div>状态: <span style="color: ${config.color}; font-weight: 500;">${config.name}</span></div>
+        </div>
+        <div style="margin-top: 8px; padding-top: 8px; border-top: 1px solid #eee;">
+          <a href="javascript:void(0)" style="color: #409EFF; font-size: 12px; text-decoration: none;">点击查看详情 →</a>
+        </div>
+      </div>
+    `
+
+    // 点击标记显示信息窗口
+    marker.addEventListener('click', () => {
+      const infoWindow = new window.BMapGL.InfoWindow(infoContent, {
+        width: 220,
+        height: 140,
+        title: ''
+      })
+
+      // 信息窗口打开后绑定链接点击事件
+      infoWindow.addEventListener('open', () => {
+        setTimeout(() => {
+          const link = document.querySelector('.BMap_bubble_content a')
+          if (link) {
+            link.addEventListener('click', (e) => {
+              e.preventDefault()
+              router.push({ name: 'IoTDeviceDetail', params: { id: device.id } })
+            })
+          }
+        }, 100)
+      })
+
+      mapInstance.openInfoWindow(infoWindow, point)
+    })
+
+    mapInstance.addOverlay(marker)
+  })
+}
+
+/** 加载设备数据 */
+const loadDeviceData = async () => {
+  loading.value = true
+  try {
+    deviceList.value = await DeviceApi.getDeviceLocationList()
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 初始化 */
+const init = async () => {
+  await loadDeviceData()
+  if (!hasData.value) {
+    return
+  }
+  await loadBaiduMapSdk()
+  await nextTick()
+  initMap()
+}
+
+/** 组件挂载时初始化 */
+onMounted(() => {
+  init()
+})
+
+/** 组件卸载时销毁地图实例 */
+onUnmounted(() => {
+  if (mapInstance) {
+    mapInstance.destroy?.()
+    mapInstance = null
+  }
+})
+</script>

src/views/iot/home/index.vue

@@ -54,13 +54,18 @@
   </el-row>
 
   <!-- 第三行：消息统计行 -->
-  <el-row>
+  <el-row class="mb-4">
     <el-col :span="24">
       <MessageTrendCard />
     </el-col>
   </el-row>
 
-  <!-- TODO 第四行：地图 -->
+  <!-- 第四行：设备分布地图 -->
+  <el-row>
+    <el-col :span="24">
+      <DeviceMapCard />
+    </el-col>
+  </el-row>
 </template>
 
 <script setup lang="ts" name="Index">
@@ -69,6 +74,7 @@ import ComparisonCard from './components/ComparisonCard.vue'
 import DeviceCountCard from './components/DeviceCountCard.vue'
 import DeviceStateCountCard from './components/DeviceStateCountCard.vue'
 import MessageTrendCard from './components/MessageTrendCard.vue'
+import DeviceMapCard from './components/DeviceMapCard.vue'
 
 /** IoT 首页 */
 defineOptions({ name: 'IoTHome' })
@@ -96,8 +102,6 @@ const getStats = async () => {
   try {
     // 获取基础统计数据
     statsData.value = await StatisticsApi.getStatisticsSummary()
-  } catch (error) {
-    console.error('获取统计数据出错:', error)
   } finally {
     loading.value = false
   }

src/views/iot/product/product/ProductForm.vue

@@ -62,17 +62,6 @@
           />
         </el-select>
       </el-form-item>
-      <el-form-item label="定位类型" prop="locationType">
-        <el-radio-group v-model="formData.locationType" :disabled="formType === 'update'">
-          <el-radio
-            v-for="dict in getIntDictOptions(DICT_TYPE.IOT_LOCATION_TYPE)"
-            :key="dict.value"
-            :label="dict.value"
-          >
-            {{ dict.label }}
-          </el-radio>
-        </el-radio-group>
-      </el-form-item>
       <el-form-item label="数据格式" prop="codecType">
         <el-radio-group v-model="formData.codecType" :disabled="formType === 'update'">
           <el-radio
@@ -130,7 +119,6 @@ const formData = ref({
   picUrl: undefined,
   description: undefined,
   deviceType: undefined,
-  locationType: undefined,
   netType: undefined,
   codecType: CodecTypeEnum.ALINK
 })
@@ -139,7 +127,6 @@ const formRules = reactive({
   name: [{ required: true, message: '产品名称不能为空', trigger: 'blur' }],
   categoryId: [{ required: true, message: '产品分类不能为空', trigger: 'change' }],
   deviceType: [{ required: true, message: '设备类型不能为空', trigger: 'change' }],
-  locationType: [{ required: true, message: '定位类型不能为空', trigger: 'change' }],
   netType: [
     {
       required: true,
@@ -206,7 +193,6 @@ const resetForm = () => {
     picUrl: undefined,
     description: undefined,
     deviceType: undefined,
-    locationType: undefined,
     netType: undefined,
     codecType: CodecTypeEnum.ALINK
   }

src/views/iot/product/product/detail/ProductDetailsInfo.vue

@@ -6,9 +6,6 @@
       <el-descriptions-item label="设备类型">
         <dict-tag :type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE" :value="product.deviceType" />
       </el-descriptions-item>
-      <el-descriptions-item label="定位类型">
-        <dict-tag :type="DICT_TYPE.IOT_LOCATION_TYPE" :value="product.locationType" />
-      </el-descriptions-item>
       <el-descriptions-item label="创建时间">
         {{ formatDate(product.createTime) }}
       </el-descriptions-item>

src/views/iot/product/product/index.vue

@@ -97,7 +97,7 @@
                 </div>
                 <div class="mb-2.5 last:mb-0">
                   <span class="text-[#717c8e] mr-2.5">产品标识</span>
-                  <span class="text-[#0b1d30] inline-block align-middle overflow-hidden text-ellipsis whitespace-nowrap max-w-[140px]">
+                  <span class="text-[var(--el-text-color-primary)] inline-block align-middle overflow-hidden text-ellipsis whitespace-nowrap max-w-[140px]">
                     {{ item.productKey }}
                   </span>
                 </div>

src/views/iot/rule/data/sink/DataSinkForm.vue

@@ -24,6 +24,11 @@
         </el-select>
       </el-form-item>
       <HttpConfigForm v-if="IotDataSinkTypeEnum.HTTP === formData.type" v-model="formData.config" />
+      <TcpConfigForm v-if="IotDataSinkTypeEnum.TCP === formData.type" v-model="formData.config" />
+      <WebSocketConfigForm
+        v-if="IotDataSinkTypeEnum.WEBSOCKET === formData.type"
+        v-model="formData.config"
+      />
       <MqttConfigForm v-if="IotDataSinkTypeEnum.MQTT === formData.type" v-model="formData.config" />
       <RocketMQConfigForm
         v-if="IotDataSinkTypeEnum.ROCKETMQ === formData.type"
@@ -69,7 +74,9 @@ import {
   MqttConfigForm,
   RabbitMQConfigForm,
   RedisStreamConfigForm,
-  RocketMQConfigForm
+  RocketMQConfigForm,
+  TcpConfigForm,
+  WebSocketConfigForm
 } from './config'
 
 /** IoT 数据流转目的的表单 */
@@ -95,6 +102,15 @@ const formRules = reactive({
   // HTTP 配置
   'config.url': [{ required: true, message: '请求地址不能为空', trigger: 'blur' }],
   'config.method': [{ required: true, message: '请求方法不能为空', trigger: 'blur' }],
+  // TCP 配置 (host 和 port 与 RabbitMQ/Redis 共用)
+  'config.connectTimeoutMs': [{ required: true, message: '连接超时时间不能为空', trigger: 'blur' }],
+  'config.readTimeoutMs': [{ required: true, message: '读取超时时间不能为空', trigger: 'blur' }],
+  'config.dataFormat': [{ required: true, message: '数据格式不能为空', trigger: 'change' }],
+  // WebSocket 配置
+  'config.serverUrl': [
+    { required: true, message: 'WebSocket 服务器地址不能为空', trigger: 'blur' }
+  ],
+  'config.sendTimeoutMs': [{ required: true, message: '发送超时时间不能为空', trigger: 'blur' }],
   // MQTT 配置
   'config.username': [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
   'config.password': [{ required: true, message: '密码不能为空', trigger: 'blur' }],

src/views/iot/rule/data/sink/config/TcpConfigForm.vue

@@ -0,0 +1,103 @@
+<template>
+  <el-form-item label="服务器地址" prop="config.host">
+    <el-input v-model="config.host" placeholder="请输入 TCP 服务器地址，如：localhost" />
+  </el-form-item>
+  <el-form-item label="端口" prop="config.port">
+    <el-input-number
+      v-model="config.port"
+      :max="65535"
+      :min="1"
+      controls-position="right"
+      placeholder="请输入端口"
+    />
+  </el-form-item>
+  <el-form-item label="连接超时(ms)" prop="config.connectTimeoutMs">
+    <el-input-number
+      v-model="config.connectTimeoutMs"
+      :min="1000"
+      :step="1000"
+      controls-position="right"
+      placeholder="请输入连接超时时间"
+    />
+  </el-form-item>
+  <el-form-item label="读取超时(ms)" prop="config.readTimeoutMs">
+    <el-input-number
+      v-model="config.readTimeoutMs"
+      :min="1000"
+      :step="1000"
+      controls-position="right"
+      placeholder="请输入读取超时时间"
+    />
+  </el-form-item>
+  <el-form-item label="启用 SSL" prop="config.ssl">
+    <el-switch v-model="config.ssl" />
+  </el-form-item>
+  <el-form-item v-if="config.ssl" label="SSL 证书路径" prop="config.sslCertPath">
+    <el-input v-model="config.sslCertPath" placeholder="请输入 SSL 证书路径" />
+  </el-form-item>
+  <el-form-item label="数据格式" prop="config.dataFormat">
+    <el-select v-model="config.dataFormat" placeholder="请选择数据格式">
+      <el-option label="JSON" value="JSON" />
+      <el-option label="BINARY" value="BINARY" />
+    </el-select>
+  </el-form-item>
+  <el-form-item label="心跳间隔(ms)" prop="config.heartbeatIntervalMs">
+    <el-input-number
+      v-model="config.heartbeatIntervalMs"
+      :min="0"
+      :step="1000"
+      controls-position="right"
+      placeholder="0 表示不启用心跳"
+    />
+  </el-form-item>
+  <el-form-item label="重连间隔(ms)" prop="config.reconnectIntervalMs">
+    <el-input-number
+      v-model="config.reconnectIntervalMs"
+      :min="1000"
+      :step="1000"
+      controls-position="right"
+      placeholder="请输入重连间隔时间"
+    />
+  </el-form-item>
+  <el-form-item label="最大重连次数" prop="config.maxReconnectAttempts">
+    <el-input-number
+      v-model="config.maxReconnectAttempts"
+      :min="0"
+      controls-position="right"
+      placeholder="请输入最大重连次数"
+    />
+  </el-form-item>
+</template>
+<script lang="ts" setup>
+import { IotDataSinkTypeEnum, TcpConfig } from '@/api/iot/rule/data/sink'
+import { useVModel } from '@vueuse/core'
+import { isEmpty } from '@/utils/is'
+
+defineOptions({ name: 'TcpConfigForm' })
+
+const props = defineProps<{
+  modelValue: any
+}>()
+const emit = defineEmits(['update:modelValue'])
+const config = useVModel(props, 'modelValue', emit) as Ref<TcpConfig>
+
+/** 组件初始化 */
+onMounted(() => {
+  if (!isEmpty(config.value)) {
+    return
+  }
+  config.value = {
+    type: IotDataSinkTypeEnum.TCP + '',
+    host: '',
+    port: 8080,
+    connectTimeoutMs: 5000,
+    readTimeoutMs: 10000,
+    ssl: false,
+    sslCertPath: '',
+    dataFormat: 'JSON',
+    heartbeatIntervalMs: 30000,
+    reconnectIntervalMs: 5000,
+    maxReconnectAttempts: 3
+  }
+})
+</script>

src/views/iot/rule/data/sink/config/WebSocketConfigForm.vue

@@ -0,0 +1,117 @@
+<template>
+  <el-form-item label="服务器地址" prop="config.serverUrl">
+    <el-input
+      v-model="config.serverUrl"
+      placeholder="请输入 WebSocket 地址，如：ws://localhost:8080/ws"
+    />
+  </el-form-item>
+  <el-form-item label="连接超时(ms)" prop="config.connectTimeoutMs">
+    <el-input-number
+      v-model="config.connectTimeoutMs"
+      :min="1000"
+      :step="1000"
+      controls-position="right"
+    />
+  </el-form-item>
+  <el-form-item label="发送超时(ms)" prop="config.sendTimeoutMs">
+    <el-input-number
+      v-model="config.sendTimeoutMs"
+      :min="1000"
+      :step="1000"
+      controls-position="right"
+    />
+  </el-form-item>
+  <el-form-item label="心跳间隔(ms)" prop="config.heartbeatIntervalMs">
+    <el-input-number
+      v-model="config.heartbeatIntervalMs"
+      :min="0"
+      :step="1000"
+      controls-position="right"
+      placeholder="0 表示不启用心跳"
+    />
+  </el-form-item>
+  <el-form-item label="心跳消息" prop="config.heartbeatMessage">
+    <el-input v-model="config.heartbeatMessage" placeholder="请输入心跳消息内容（JSON 格式）" />
+  </el-form-item>
+  <el-form-item label="子协议" prop="config.subprotocols">
+    <el-input v-model="config.subprotocols" placeholder="请输入子协议列表，多个用逗号分隔" />
+  </el-form-item>
+  <el-form-item label="自定义请求头" prop="config.customHeaders">
+    <el-input
+      v-model="config.customHeaders"
+      type="textarea"
+      placeholder="请输入自定义请求头（JSON 格式）"
+    />
+  </el-form-item>
+  <el-form-item label="验证 SSL 证书" prop="config.verifySslCert">
+    <el-switch v-model="config.verifySslCert" />
+  </el-form-item>
+  <el-form-item label="数据格式" prop="config.dataFormat">
+    <el-select v-model="config.dataFormat" placeholder="请选择数据格式">
+      <el-option label="JSON" value="JSON" />
+      <el-option label="TEXT" value="TEXT" />
+    </el-select>
+  </el-form-item>
+  <el-form-item label="重连间隔(ms)" prop="config.reconnectIntervalMs">
+    <el-input-number
+      v-model="config.reconnectIntervalMs"
+      :min="1000"
+      :step="1000"
+      controls-position="right"
+    />
+  </el-form-item>
+  <el-form-item label="最大重连次数" prop="config.maxReconnectAttempts">
+    <el-input-number v-model="config.maxReconnectAttempts" :min="0" controls-position="right" />
+  </el-form-item>
+  <el-form-item label="启用压缩" prop="config.enableCompression">
+    <el-switch v-model="config.enableCompression" />
+  </el-form-item>
+  <el-form-item label="发送重试次数" prop="config.sendRetryCount">
+    <el-input-number v-model="config.sendRetryCount" :min="0" controls-position="right" />
+  </el-form-item>
+  <el-form-item label="重试间隔(ms)" prop="config.sendRetryIntervalMs">
+    <el-input-number
+      v-model="config.sendRetryIntervalMs"
+      :min="100"
+      :step="500"
+      controls-position="right"
+    />
+  </el-form-item>
+</template>
+<script lang="ts" setup>
+import { IotDataSinkTypeEnum, WebSocketConfig } from '@/api/iot/rule/data/sink'
+import { useVModel } from '@vueuse/core'
+import { isEmpty } from '@/utils/is'
+
+defineOptions({ name: 'WebSocketConfigForm' })
+
+const props = defineProps<{
+  modelValue: any
+}>()
+const emit = defineEmits(['update:modelValue'])
+const config = useVModel(props, 'modelValue', emit) as Ref<WebSocketConfig>
+
+/** 组件初始化 */
+onMounted(() => {
+  if (!isEmpty(config.value)) {
+    return
+  }
+  config.value = {
+    type: IotDataSinkTypeEnum.WEBSOCKET + '',
+    serverUrl: '',
+    connectTimeoutMs: 5000,
+    sendTimeoutMs: 10000,
+    heartbeatIntervalMs: 30000,
+    heartbeatMessage: '{"type":"heartbeat"}',
+    subprotocols: '',
+    customHeaders: '',
+    verifySslCert: true,
+    dataFormat: 'JSON',
+    reconnectIntervalMs: 5000,
+    maxReconnectAttempts: 3,
+    enableCompression: false,
+    sendRetryCount: 1,
+    sendRetryIntervalMs: 1000
+  }
+})
+</script>

src/views/iot/rule/data/sink/config/index.ts

@@ -1,4 +1,6 @@
 import HttpConfigForm from './HttpConfigForm.vue'
+import TcpConfigForm from './TcpConfigForm.vue'
+import WebSocketConfigForm from './WebSocketConfigForm.vue'
 import MqttConfigForm from './MqttConfigForm.vue'
 import RocketMQConfigForm from './RocketMQConfigForm.vue'
 import KafkaMQConfigForm from './KafkaMQConfigForm.vue'
@@ -7,6 +9,8 @@ import RedisStreamConfigForm from './RedisStreamConfigForm.vue'
 
 export {
   HttpConfigForm,
+  TcpConfigForm,
+  WebSocketConfigForm,
   MqttConfigForm,
   RocketMQConfigForm,
   KafkaMQConfigForm,

src/views/iot/utils/constants.ts

@@ -5,6 +5,13 @@ export const IOT_PROVIDE_KEY = {
   PRODUCT: 'IOT_PRODUCT'
 }
 
+/** IoT 设备状态枚举 */
+export enum DeviceStateEnum {
+  INACTIVE = 0, // 未激活
+  ONLINE = 1, // 在线
+  OFFLINE = 2 // 离线
+}
+
 /** IoT 产品物模型类型枚举类 */
 export const IoTThingModelTypeEnum = {
   PROPERTY: 1, // 属性