feat:map

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 // 地区编码

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 // 设备数量

src/components/Map/index.vue

@@ -0,0 +1,190 @@
+<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
+      }
+    }
+  })
+}
+
+onMounted(() => {
+  loadMap()
+})
+</script>
+
+<style scoped>
+.mapContainer {
+  width: 100%;
+  height: 400px;
+}
+</style>

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 物模型单位

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

@@ -66,6 +66,41 @@
           <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>
+          <el-form-item label="设备经度" prop="longitude" type="number">
+            <el-input v-model="formData.longitude" placeholder="请输入设备经度">
+              <template #append>
+                <el-link
+                  :underline="false"
+                  href="https://api.map.baidu.com/lbsapi/getpoint/index.html"
+                  target="_blank"
+                  >坐标拾取</el-link
+                >
+              </template>
+            </el-input>
+          </el-form-item>
+          <el-form-item label="设备维度" prop="latitude" type="number">
+            <el-input v-model="formData.latitude" placeholder="请输入设备维度">
+              <template #append>
+                <el-link
+                  :underline="false"
+                  href="https://api.map.baidu.com/lbsapi/getpoint/index.html"
+                  target="_blank"
+                  >坐标拾取</el-link
+                >
+              </template>
+            </el-input>
+          </el-form-item>
         </el-collapse-item>
       </el-collapse>
     </el-form>
@@ -80,6 +115,7 @@ import { DeviceApi, DeviceVO } from '@/api/iot/device/device'
 import { DeviceGroupApi } from '@/api/iot/device/group'
 import { DeviceTypeEnum, ProductApi, ProductVO } from '@/api/iot/product/product'
 import { UploadImg } from '@/components/UploadFile'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 
 /** IoT 设备表单 */
 defineOptions({ name: 'IoTDeviceForm' })
@@ -100,6 +136,9 @@ const formData = ref({
   gatewayId: undefined,
   deviceType: undefined as number | undefined,
   serialNumber: undefined,
+  locationType: undefined,
+  longitude: undefined,
+  latitude: undefined,
   groupIds: [] as number[]
 })
 const formRules = reactive({
@@ -215,6 +254,9 @@ const resetForm = () => {
     gatewayId: undefined,
     deviceType: undefined,
     serialNumber: undefined,
+    locationType: undefined,
+    longitude: undefined,
+    latitude: undefined,
     groupIds: []
   }
   formRef.value?.resetFields()

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

@@ -1,88 +1,152 @@
 <!-- 设备信息 -->
 <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="8">
+          <el-card>
+            <template #header>
+              <div class="flex items-center">
+                <Icon icon="ep:info-filled" class="mr-2 text-primary" />
+                <span>设备信息</span>
+              </div>
+            </template>
+            <div class="info-list">
+              <div class="info-item">
+                <span class="label">产品名称：</span>
+                <span class="value">{{ product.name }}</span>
+              </div>
+              <div class="info-item">
+                <span class="label">ProductKey：</span>
+                <span class="value">
+                  {{ product.productKey }}
+                  <el-button @click="copyToClipboard(product.productKey)" link>复制</el-button>
+                </span>
+              </div>
+              <div class="info-item">
+                <span class="label">设备类型：</span>
+                <span class="value">
+                  <dict-tag :type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE" :value="product.deviceType" />
+                </span>
+              </div>
+              <div class="info-item">
+                <span class="label">定位类型：</span>
+                <span class="value">
+                  <dict-tag :type="DICT_TYPE.IOT_LOCATION_TYPE" :value="device.locationType" />
+                </span>
+              </div>
+              <div class="info-item">
+                <span class="label">DeviceName：</span>
+                <span class="value">
+                  {{ device.deviceName }}
+                  <el-button @click="copyToClipboard(device.deviceName)" link>复制</el-button>
+                </span>
+              </div>
+              <div class="info-item">
+                <span class="label">备注名称：</span>
+                <span class="value">{{ device.nickname }}</span>
+              </div>
+              <div class="info-item">
+                <span class="label">创建时间：</span>
+                <span class="value">{{ formatDate(device.createTime) }}</span>
+              </div>
+              <div class="info-item">
+                <span class="label">当前状态：</span>
+                <span class="value">
+                  <dict-tag :type="DICT_TYPE.IOT_DEVICE_STATE" :value="device.state" />
+                </span>
+              </div>
+              <div class="info-item">
+                <span class="label">激活时间：</span>
+                <span class="value">{{ formatDate(device.activeTime) }}</span>
+              </div>
+              <div class="info-item">
+                <span class="label">最后上线时间：</span>
+                <span class="value">{{ formatDate(device.onlineTime) }}</span>
+              </div>
+              <div class="info-item">
+                <span class="label">最后离线时间：</span>
+                <span class="value">{{ formatDate(device.offlineTime) }}</span>
+              </div>
+              <div class="info-item">
+                <span class="label">认证信息：</span>
+                <span class="value">
+                  <el-button type="primary" @click="handleAuthInfoDialogOpen" plain>查看</el-button>
+                </span>
+              </div>
+            </div>
+          </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="16">
+          <el-card class="map-card">
+            <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>
+            <Map v-if="showMap" :center="getLocationString()" />
+          </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 +157,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 +169,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 +210,29 @@ const handleAuthInfoDialogClose = () => {
   authDialogVisible.value = false
 }
 </script>
+
+<style scoped>
+.info-list .info-item {
+  display: flex;
+  margin-bottom: 16px;
+}
+
+.info-list .info-item .label {
+  width: 100px;
+  color: var(--el-text-color-secondary);
+}
+
+.info-list .info-item .value {
+  flex: 1;
+  color: var(--el-text-color-primary);
+}
+
+.map-card {
+  height: 100%;
+}
+
+.map-card :deep(.el-card__body) {
+  height: calc(100% - 55px);
+  padding: 0;
+}
+</style>

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: true, 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
   }

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>