feat:map

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>