review：【IoT 物联网】设备 location 逻辑

src/api/iot/device/device/index.ts

@@ -22,8 +22,8 @@ export interface DeviceVO {
   mqttPassword: string // MQTT 密码
   authType: string // 认证类型
   locationType: number // 定位类型
-  latitude: number // 设备位置的纬度
+  latitude?: number // 设备位置的纬度
-  longitude: number // 设备位置的经度
+  longitude?: number // 设备位置的经度
   areaId: number // 地区编码
   address: string // 设备详细地址
   serialNumber: string // 设备序列号

src/components/Map/index.vue

@@ -1,7 +1,10 @@
+<!-- 地图组件：基于高德地图实现 -->
+<!-- TODO @宗超：【设备定位】使用百度地图，和 ercharts 更好集成； -->
 <template>
   <div v-if="props.isWrite">
     <el-form ref="form" label-width="120px">
       <el-form-item label="定位位置:">
+        <!-- TODO @TODO @AI：style 改成 unocss -->
         <el-select
           style="width: 100%"
           v-model="state.address"
@@ -41,21 +44,17 @@ import { propTypes } from '@/utils/propTypes'
 
 const emits = defineEmits(['locateChange', 'update:center'])
 const state = reactive({
-  lonLat: '',
+  lonLat: '', // 经度,纬度
   address: '',
   loading: false,
-  //纬度、经度
+  latitude: '', // 纬度
-  latitude: '',
+  longitude: '', // 经度
-  longitude: '',
+  map: null as any, // 地图对象
-  //地图对象
-  map: null as any,
   mapAddrOptions: [] as any[],
-  //标记对象
+  mapMarker: null as any, // 标记对象
-  mapMarker: null as any,
   geocoder: null as any,
   autoComplete: null as any,
-  //搜索提示
+  tips: [] // 搜索提示
-  tips: []
 })
 const props = defineProps({
   clickMap: propTypes.bool.def(false),
@@ -69,11 +68,12 @@ const loadMap = () => {
   state.address = ''
   state.latitude = ''
   state.longitude = ''
+  // TODO @AI：可以使用 await 方式么？
   AMapLoader.load({
-    key: import.meta.env.VITE_AMAP_KEY, // 申请好的Web端开发者Key，首次调用 load 时必填
+    key: import.meta.env.VITE_AMAP_KEY, // 申请好的 Web 端开发者Key，首次调用 load 时必填
     version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
     plugins: [
-      //逆解析插件
+      // 逆解析插件
       'AMap.Geocoder',
       'AMap.AutoComplete'
     ]
@@ -97,15 +97,15 @@ const initMap = () => {
   let mapId = props.isWrite ? 'rwMap' : 'rMap'
   state.map = new (window as any).AMap.Map(mapId, {
     resizeEnable: true,
-    zoom: 11, //地图显示的缩放级别
+    zoom: 11, // 地图显示的缩放级别
     keyboardEnable: false
   })
 }
 
 const initGeocoder = () => {
   state.geocoder = new (window as any).AMap.Geocoder({
-    city: '010', //城市设为北京，默认：“全国”
+    city: '010', // 城市设为北京，默认：“全国”
-    radius: 500, //范围，默认：500
+    radius: 500, // 范围，默认：500
     extensions: 'all'
   })
 }
@@ -118,7 +118,8 @@ const initAutoComplete = () => {
 }
 
 const autoSearch = (queryValue: string) => {
-  state.autoComplete.search(queryValue, (status, result) => {
+  state.autoComplete.search(queryValue, (_status, result) => {
+    // TODO @AI：下面的写法可以优化下么？
     var res = result.tips || [] // 搜索成功时，result即是对应的匹配数据
     const temp = ref<any[]>([])
     res.forEach((p) => {
@@ -133,16 +134,18 @@ const autoSearch = (queryValue: string) => {
   })
 }
 
-//添加标记点
+// TODO @AI：方法注释，使用 /** */
+// 添加标记点
 const setMarker = (lnglat) => {
+  // TODO @AI: if return 简化下；
   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) // 添加点标记在地图上
@@ -152,9 +155,11 @@ const setMarker = (lnglat) => {
   }
 }
 
-//经纬度转化为地址、添加标记点
+// TODO @AI：下面的写法可以优化下；例如说：
+// 经纬度转化为地址、添加标记点
 const regeoCode = (lonLat) => {
   if (lonLat) {
+    // TODO @AI：变量名的拼写；
     let lnglat = lonLat.split(',')
     state.latitude = lnglat[0]
     state.longitude = lnglat[1]
@@ -162,10 +167,10 @@ const regeoCode = (lonLat) => {
     emits('update:center', lonLat)
     setMarker(lnglat)
     getAddress(lnglat)
-    console.log('经纬度', lnglat)
   }
 }
 
+// TODO @AI：代码优化下；
 // 把拿到的经纬度转化为地址信息
 const getAddress = (lnglat) => {
   state.geocoder.getAddress(lnglat, (status, result) => {
@@ -176,14 +181,14 @@ const getAddress = (lnglat) => {
     }
   })
 }
+
 // 显式暴露方法，使其可以被父组件访问
-defineExpose({
+defineExpose({ regeoCode })
-  regeoCode
-})
 
 onMounted(() => {
   loadMap()
 })
+// TODO @AI：style 可以改成 unocss 么？
 </script>
 
 <style scoped>

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

@@ -77,8 +77,8 @@
               </el-radio>
             </el-radio-group>
           </el-form-item>
-          <!-- 只在定位类型为GPS时显示坐标和地图 -->
+          <!-- LocationTypeEnum.MANUAL：手动定位 -->
-          <template v-if="showCoordinates">
+          <template v-if="LocationTypeEnum.MANUAL === formData.locationType">
             <el-form-item label="设备经度" prop="longitude" type="number">
               <el-input
                 v-model="formData.longitude"
@@ -135,14 +135,6 @@ 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,
@@ -181,7 +173,7 @@ const formRules = reactive({
   ],
   nickname: [
     {
-      validator: (rule, value, callback) => {
+      validator: (_rule, value: any, callback) => {
         if (value === undefined || value === null) {
           callback()
           return
@@ -227,7 +219,7 @@ const open = async (type: string, id?: number) => {
     try {
       formData.value = await DeviceApi.getDevice(id)
 
-      // 如果有经纬度，设置location字段用于地图显示
+      // 如果有经纬度，设置 location 字段用于地图显示
       if (formData.value.longitude && formData.value.latitude) {
         formData.value.location = `${formData.value.longitude},${formData.value.latitude}`
       }
@@ -239,20 +231,11 @@ const open = async (type: string, id?: number) => {
   showMap.value = true
 
   // 加载网关设备列表
-  try {
+  gatewayDevices.value = await DeviceApi.getSimpleDeviceList(DeviceTypeEnum.GATEWAY)
-    gatewayDevices.value = await DeviceApi.getSimpleDeviceList(DeviceTypeEnum.GATEWAY)
-  } catch (error) {
-    console.error('加载网关设备列表失败:', error)
-  }
   // 加载产品列表
   products.value = await ProductApi.getSimpleProductList()
-
   // 加载设备分组列表
-  try {
+  deviceGroups.value = await DeviceGroupApi.getSimpleDeviceGroupList()
-    deviceGroups.value = await DeviceGroupApi.getSimpleDeviceGroupList()
-  } catch (error) {
-    console.error('加载设备分组列表失败:', error)
-  }
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
@@ -265,15 +248,15 @@ const submitForm = async () => {
   formLoading.value = true
   try {
     const data = formData.value as unknown as DeviceVO
-
+    // 如果非手动定位，不进行提交该字段
-    // 如果定位类型是IP或MODULE，清空经纬度信息
+    if (data.locationType !== LocationTypeEnum.MANUAL) {
-    if (
-      data.locationType === LocationTypeEnum.IP ||
-      data.locationType === LocationTypeEnum.MODULE
-    ) {
       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)
@@ -304,6 +287,7 @@ const resetForm = () => {
     locationType: undefined,
     longitude: undefined,
     latitude: undefined,
+    // TODO @宗超：【设备定位】location 是不是拿出来，不放在 formData 里
     location: '',
     groupIds: []
   }
@@ -333,9 +317,8 @@ const handleLocationChange = (lnglat) => {
 const updateLocationFromCoordinates = () => {
   // 验证经纬度是否有效
   if (formData.value.longitude && formData.value.latitude) {
-    // 更新location字段，地图组件会根据此字段更新
+    // 更新 location 字段，地图组件会根据此字段更新
     formData.value.location = `${formData.value.longitude},${formData.value.latitude}`
-    console.log('更新location字段:', formData.value.location)
     mapRef.value.regeoCode(formData.value.location)
   }
 }

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

@@ -34,7 +34,7 @@
         </el-select>
       </el-form-item>
       <el-form-item label="设备类型" prop="deviceType">
-        <el-radioTO-group v-model="formData.deviceType" :disabled="formType === 'update'">
+        <el-radio-group v-model="formData.deviceType" :disabled="formType === 'update'">
           <el-radio
             v-for="dict in getIntDictOptions(DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE)"
             :key="dict.value"
@@ -42,10 +42,10 @@
           >
             {{ dict.label }}
           </el-radio>
-        </el-radioTO-group>
+        </el-radio-group>
       </el-form-item>
       <el-form-item
-        v-if="[DeviceTypeEnum.DEVICE, DeviceTypeEnum.GATEWAY].includes(formData.deviceType)"
+        v-if="[DeviceTypeEnum.DEVICE, DeviceTypeEnum.GATEWAY].includes(formData.deviceType!)"
         label="联网方式"
         prop="netType"
       >