!789 feat【iot】:实现设备定位部分功能

Merge pull request !789 from alwayssuper/feature/iot
2025-07-04 12:43:25 +00:00
parent d1cbda5197 7115a84a76
commit 79c08fc933
17 changed files with 635 additions and 208 deletions
--- a/src/api/iot/device/device/index.ts
+++ b/src/api/iot/device/device/index.ts
@@ -21,6 +21,7 @@ export interface DeviceVO {
  mqttUsername: string // MQTT 用户名
  mqttPassword: string // MQTT 密码
  authType: string // 认证类型
+  locationType: number // 定位类型
  latitude: number // 设备位置的纬度
  longitude: number // 设备位置的经度
  areaId: number // 地区编码
--- a/src/api/iot/product/product/index.ts
+++ b/src/api/iot/product/product/index.ts
@@ -13,6 +13,7 @@ export interface ProductVO {
  description: string // 产品描述
  status: number // 产品状态
  deviceType: number // 设备类型
+  locationType: number // 设备类型
  netType: number // 联网方式
  codecType: string // 数据格式（编解码器类型）
  deviceCount: number // 设备数量
@@ -25,6 +26,12 @@ export enum DeviceTypeEnum {
  GATEWAY_SUB = 1, // 网关子设备
  GATEWAY = 2 // 网关设备
 }
+// IOT 产品定位类型枚举类 0: 手动定位, 1: IP 定位, 2: 定位模块定位
+export enum LocationTypeEnum {
+  MANUAL = 0, // 手动定位
+  IP = 1, // IP 定位
+  MODULE = 2 // 定位模块定位
+}
 // IOT 数据格式（编解码器类型）枚举类
 export enum CodecTypeEnum {
  ALINK = 'Alink' // 阿里云 Alink 协议
--- a/src/components/Map/index.vue
+++ b/src/components/Map/index.vue
@@ -0,0 +1,194 @@
+<template>
+  <div v-if="props.isWrite">
+    <el-form ref="form" label-width="120px">
+      <el-form-item label="定位位置:">
+        <el-select
+          style="width: 100%"
+          v-model="state.address"
+          clearable
+          filterable
+          remote
+          reserve-keyword
+          placeholder="可输入地址查询经纬度"
+          :remote-method="autoSearch"
+          @change="regeoCode"
+          :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="设备地图:">
+        <div id="rwMap" 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="rMap" class="mapContainer"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import AMapLoader from '@amap/amap-jsapi-loader'
+import { propTypes } from '@/utils/propTypes'
+
+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('')
+})
+const loadMap = () => {
+  ;(window as any)._AMapSecurityConfig = {
+    securityJsCode: import.meta.env.VITE_AMAP_SECURITY_CODE
+  }
+  state.address = ''
+  state.latitude = ''
+  state.longitude = ''
+  AMapLoader.load({
+    key: import.meta.env.VITE_AMAP_KEY, // 申请好的Web端开发者Key，首次调用 load 时必填
+    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+    plugins: [
+      //逆解析插件
+      'AMap.Geocoder',
+      'AMap.AutoComplete'
+    ]
+  }).then(() => {
+    initMap()
+    if (props.clickMap) {
+      state.map.on('click', (e) => {
+        state.lonLat = e.lnglat.lng + ',' + e.lnglat.lat
+        regeoCode(state.lonLat)
+      })
+    }
+    initGeocoder()
+    initAutoComplete()
+    if (props.center) {
+      regeoCode(props.center)
+    }
+  })
+}
+
+const initMap = () => {
+  let mapId = props.isWrite ? 'rwMap' : 'rMap'
+  state.map = new (window as any).AMap.Map(mapId, {
+    resizeEnable: true,
+    zoom: 11, //地图显示的缩放级别
+    keyboardEnable: false
+  })
+}
+
+const initGeocoder = () => {
+  state.geocoder = new (window as any).AMap.Geocoder({
+    city: '010', //城市设为北京，默认：“全国”
+    radius: 500, //范围，默认：500
+    extensions: 'all'
+  })
+}
+
+const initAutoComplete = () => {
+  const autoOptions = {
+    city: '全国'
+  }
+  state.autoComplete = new (window as any).AMap.AutoComplete(autoOptions)
+}
+
+const autoSearch = (queryValue: string) => {
+  state.autoComplete.search(queryValue, (status, result) => {
+    var res = result.tips || [] // 搜索成功时，result即是对应的匹配数据
+    const temp = ref<any[]>([])
+    res.forEach((p) => {
+      if ((p.name, p.location.lng && p.location.lat)) {
+        temp.value.push({
+          name: p.district + p.name,
+          value: p.location.lng + ',' + p.location.lat
+        })
+      }
+    })
+    state.mapAddrOptions = temp.value
+  })
+}
+
+//添加标记点
+const setMarker = (lnglat) => {
+  if (lnglat) {
+    if (state.mapMarker !== null) {
+      // 如果点标记已存在则先移除原点
+      state.map.remove(state.mapMarker)
+      state.lonLat = ''
+    }
+    state.mapMarker = new (window as any).AMap.Marker({
+      // 定义点标记对象
+      position: new (window as any).AMap.LngLat(lnglat[0], lnglat[1])
+    })
+    state.map.add(state.mapMarker) // 添加点标记在地图上
+    state.map.setCenter(lnglat)
+    state.map.setZoom(16)
+    state.mapMarker.setPosition(lnglat)
+  }
+}
+
+//经纬度转化为地址、添加标记点
+const regeoCode = (lonLat) => {
+  if (lonLat) {
+    let lnglat = lonLat.split(',')
+    state.latitude = lnglat[0]
+    state.longitude = lnglat[1]
+    emits('locateChange', lnglat)
+    emits('update:center', lonLat)
+    setMarker(lnglat)
+    getAddress(lnglat)
+    console.log('经纬度', lnglat)
+  }
+}
+
+// 把拿到的经纬度转化为地址信息
+const getAddress = (lnglat) => {
+  state.geocoder.getAddress(lnglat, (status, result) => {
+    if (status === 'complete' && result.info === 'OK') {
+      if (result && result.regeocode) {
+        state.address = result.regeocode.formattedAddress
+      }
+    }
+  })
+}
+// 显式暴露方法，使其可以被父组件访问
+defineExpose({
+  regeoCode
+})
+
+onMounted(() => {
+  loadMap()
+})
+</script>
+
+<style scoped>
+.mapContainer {
+  width: 100%;
+  height: 400px;
+}
+</style>
--- a/src/utils/dict.ts
+++ b/src/utils/dict.ts
@@ -233,6 +233,7 @@ export enum DICT_TYPE {
  IOT_PRODUCT_STATUS = 'iot_product_status', // IOT 产品状态
  IOT_PRODUCT_DEVICE_TYPE = 'iot_product_device_type', // IOT 产品设备类型
  IOT_CODEC_TYPE = 'iot_codec_type', // IOT 数据格式（编解码器类型）
+  IOT_LOCATION_TYPE = 'iot_location_type', // IOT 定位类型
  IOT_DEVICE_STATE = 'iot_device_state', // IOT 设备状态
  IOT_THING_MODEL_TYPE = 'iot_thing_model_type', // IOT 产品功能类型
  IOT_THING_MODEL_UNIT = 'iot_thing_model_unit', // IOT 物模型单位
--- a/src/views/iot/device/device/DeviceForm.vue
+++ b/src/views/iot/device/device/DeviceForm.vue
@@ -66,6 +66,44 @@
          <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>
+          <!-- 只在定位类型为GPS时显示坐标和地图 -->
+          <template v-if="showCoordinates">
+            <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 w-full ml-[-18px]" v-if="showMap">
+              <Map
+                :isWrite="true"
+                :clickMap="true"
+                :center="formData.location"
+                @locateChange="handleLocationChange"
+                ref="mapRef"
+                class="h-[400px] w-full"
+              />
+            </div>
+          </template>
        </el-collapse-item>
      </el-collapse>
    </el-form>
@@ -78,8 +116,11 @@
 <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 { DeviceTypeEnum, LocationTypeEnum, 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 { ref } from 'vue'

 /** IoT 设备表单 */
 defineOptions({ name: 'IoTDeviceForm' })
@@ -91,6 +132,17 @@ 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 showCoordinates = computed(() => {
+  return (
+    formData.value.locationType !== LocationTypeEnum.IP &&
+    formData.value.locationType !== LocationTypeEnum.MODULE
+  )
+})
+
 const formData = ref({
  id: undefined,
  productId: undefined,
@@ -100,8 +152,22 @@ const formData = ref({
  gatewayId: undefined,
  deviceType: undefined as number | undefined,
  serialNumber: undefined,
+  locationType: undefined as number | undefined,
+  longitude: undefined,
+  latitude: undefined,
+  location: '', // 格式: "经度,纬度"
  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 formRules = reactive({
  productId: [{ required: true, message: '产品不能为空', trigger: 'blur' }],
  deviceName: [
@@ -152,15 +218,25 @@ 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

  // 加载网关设备列表
  try {
@@ -189,6 +265,16 @@ const submitForm = async () => {
  formLoading.value = true
  try {
    const data = formData.value as unknown as DeviceVO
+
+    // 如果定位类型是IP或MODULE，清空经纬度信息
+    if (
+      data.locationType === LocationTypeEnum.IP ||
+      data.locationType === LocationTypeEnum.MODULE
+    ) {
+      data.longitude = undefined
+      data.latitude = undefined
+    }
+
    if (formType.value === 'create') {
      await DeviceApi.createDevice(data)
      message.success(t('common.createSuccess'))
@@ -215,9 +301,15 @@ const resetForm = () => {
    gatewayId: undefined,
    deviceType: undefined,
    serialNumber: undefined,
+    locationType: undefined,
+    longitude: undefined,
+    latitude: undefined,
+    location: '',
    groupIds: []
  }
  formRef.value?.resetFields()
+  // 重置表单时，隐藏地图
+  showMap.value = false
 }

 /** 产品选择变化 */
@@ -228,5 +320,23 @@ 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}`
+    console.log('更新location字段:', formData.value.location)
+    mapRef.value.regeoCode(formData.value.location)
+  }
 }
 </script>
--- a/src/views/iot/device/device/detail/DeviceDetailsInfo.vue
+++ b/src/views/iot/device/device/detail/DeviceDetailsInfo.vue
@@ -1,88 +1,135 @@
 <!-- 设备信息 -->
 <template>
-  <ContentWrap>
-    <el-descriptions :column="3" title="设备信息">
-      <el-descriptions-item label="产品名称">{{ product.name }}</el-descriptions-item>
-      <el-descriptions-item label="ProductKey">
-        {{ product.productKey }}
-        <el-button @click="copyToClipboard(product.productKey)">复制</el-button>
-      </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-button @click="copyToClipboard(device.deviceName)">复制</el-button>
-      </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> 查看 </el-button>
-      </el-descriptions-item>
-    </el-descriptions>
-  </ContentWrap>
+  <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>
+            </template>
+            <el-descriptions :column="2" border class="device-descriptions">
+              <el-descriptions-item label="产品名称">{{ product.name }}</el-descriptions-item>
+              <el-descriptions-item label="ProductKey">
+                {{ product.productKey }}
+                <el-button @click="copyToClipboard(product.productKey)" link>复制</el-button>
+              </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-button @click="copyToClipboard(device.deviceName)" link>复制</el-button>
+              </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>查看</el-button>
+              </el-descriptions-item>
+            </el-descriptions>
+          </el-card>
+        </el-col>

-  <!-- 认证信息弹框 -->
-  <Dialog
-    title="设备认证信息"
-    v-model="authDialogVisible"
-    width="640px"
-    :before-close="handleAuthInfoDialogClose"
-  >
-    <el-form :model="authInfo" label-width="120px">
-      <el-form-item label="clientId">
-        <el-input v-model="authInfo.clientId" readonly>
-          <template #append>
-            <el-button @click="copyToClipboard(authInfo.clientId)" type="primary">
-              <Icon icon="ph:copy" />
-            </el-button>
-          </template>
-        </el-input>
-      </el-form-item>
-      <el-form-item label="username">
-        <el-input v-model="authInfo.username" readonly>
-          <template #append>
-            <el-button @click="copyToClipboard(authInfo.username)" type="primary">
-              <Icon icon="ph:copy" />
-            </el-button>
-          </template>
-        </el-input>
-      </el-form-item>
-      <el-form-item label="password">
-        <el-input
-          v-model="authInfo.password"
-          readonly
-          :type="authPasswordVisible ? 'text' : 'password'"
-        >
-          <template #append>
-            <el-button @click="authPasswordVisible = !authPasswordVisible" type="primary">
-              <Icon :icon="authPasswordVisible ? 'ph:eye-slash' : 'ph:eye'" />
-            </el-button>
-            <el-button @click="copyToClipboard(authInfo.password)" type="primary">
-              <Icon icon="ph:copy" />
-            </el-button>
-          </template>
-        </el-input>
-      </el-form-item>
-    </el-form>
-    <template #footer>
-      <el-button @click="handleAuthInfoDialogClose">关闭</el-button>
-    </template>
-  </Dialog>
+        <!-- 右侧地图 -->
+        <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, 'MM-DD HH:mm:ss') : '--'
+                  }}
+                </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>
+    </ContentWrap>
+
+    <!-- 认证信息弹框 -->
+    <Dialog
+      title="设备认证信息"
+      v-model="authDialogVisible"
+      width="640px"
+      :before-close="handleAuthInfoDialogClose"
+    >
+      <el-form :model="authInfo" label-width="120px">
+        <el-form-item label="clientId">
+          <el-input v-model="authInfo.clientId" readonly>
+            <template #append>
+              <el-button @click="copyToClipboard(authInfo.clientId)" type="primary">
+                <Icon icon="ph:copy" />
+              </el-button>
+            </template>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="username">
+          <el-input v-model="authInfo.username" readonly>
+            <template #append>
+              <el-button @click="copyToClipboard(authInfo.username)" type="primary">
+                <Icon icon="ph:copy" />
+              </el-button>
+            </template>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="password">
+          <el-input
+            v-model="authInfo.password"
+            readonly
+            :type="authPasswordVisible ? 'text' : 'password'"
+          >
+            <template #append>
+              <el-button @click="authPasswordVisible = !authPasswordVisible" type="primary">
+                <Icon :icon="authPasswordVisible ? 'ph:eye-slash' : 'ph:eye'" />
+              </el-button>
+              <el-button @click="copyToClipboard(authInfo.password)" type="primary">
+                <Icon icon="ph:copy" />
+              </el-button>
+            </template>
+          </el-input>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="handleAuthInfoDialogClose">关闭</el-button>
+      </template>
+    </Dialog>
+  </div>

  <!-- TODO 待开发：设备标签 -->
  <!-- TODO 待开发：设备地图 -->
@@ -93,6 +140,8 @@ 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 { ref, computed } from 'vue'

 const message = useMessage() // 消息提示

@@ -103,6 +152,19 @@ const authDialogVisible = ref(false) // 定义设备认证信息弹框的可见
 const authPasswordVisible = ref(false) // 定义密码可见性状态
 const authInfo = ref<IotDeviceAuthInfoVO>({} as IotDeviceAuthInfoVO) // 定义设备认证信息对象

+// 控制地图显示的标志
+const showMap = computed(() => {
+  return !!(device.longitude && device.latitude)
+})
+
+// 获取位置字符串，用于地图组件
+const getLocationString = () => {
+  if (device.longitude && device.latitude) {
+    return `${device.longitude},${device.latitude}`
+  }
+  return ''
+}
+
 /** 复制到剪贴板方法 */
 const copyToClipboard = async (text: string) => {
  try {
@@ -131,3 +193,16 @@ const handleAuthInfoDialogClose = () => {
  authDialogVisible.value = false
 }
 </script>
+<style scoped>
+/* 使用少量CSS覆盖el-descriptions组件的样式，使其更符合Tailwind的间距设计 */
+.device-descriptions :deep(.el-descriptions__label),
+.device-descriptions :deep(.el-descriptions__content) {
+  @apply px-4 py-3 flex items-center;
+  min-height: 50px;
+}
+
+.device-descriptions :deep(.el-descriptions__body) {
+  @apply p-0;
+}
+</style>
+
--- a/src/views/iot/product/product/ProductForm.vue
+++ b/src/views/iot/product/product/ProductForm.vue
@@ -44,6 +44,17 @@
          </el-radio>
        </el-radio-group>
      </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
        v-if="[DeviceTypeEnum.DEVICE, DeviceTypeEnum.GATEWAY].includes(formData.deviceType)"
        label="联网方式"
@@ -119,6 +130,7 @@ const formData = ref({
  picUrl: undefined,
  description: undefined,
  deviceType: undefined,
+  locationType: undefined,
  netType: undefined,
  codecType: CodecTypeEnum.ALINK
 })
@@ -127,6 +139,7 @@ const formRules = reactive({
  name: [{ required: true, message: '产品名称不能为空', trigger: 'blur' }],
  categoryId: [{ required: true, message: '产品分类不能为空', trigger: 'change' }],
  deviceType: [{ required: true, message: '设备类型不能为空', trigger: 'change' }],
+  locationType: [{ required: false, message: '定位类型不能为空', trigger: 'change' }],
  netType: [
    {
      required: true,
@@ -193,6 +206,7 @@ const resetForm = () => {
    picUrl: undefined,
    description: undefined,
    deviceType: undefined,
+    locationType: undefined,
    netType: undefined,
    codecType: CodecTypeEnum.ALINK
  }
--- a/src/views/iot/product/product/detail/ProductDetailsInfo.vue
+++ b/src/views/iot/product/product/detail/ProductDetailsInfo.vue
@@ -6,6 +6,9 @@
      <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>