feat(frontend+iot): #31 设备管理前端页面完整实现

- 新增 DeviceListView.vue: 设备列表（搜索/设备类型筛选/在线状态筛选/分页/批量操作/统计卡片）
- 新增 DeviceDetailView.vue: 设备详情（基本信息Tab/实时影子数据Tab/OTA升级历史Tab/操作日志Tab）
- 新增 DeviceMapView.vue: Leaflet地图（设备标注/点击弹窗/区域筛选/图例）
- 新增 DeviceMapPage.vue: 地图独立页面路由
- 新增 deviceApi.ts: TypeScript API封装（对接 /api/iot/device/*, /api/iot/shadow/*, /api/iot/ota/*）
- 路由注册到 router/index.ts（设备列表/详情/地图三条路由）
- MainLayout 侧边栏新增 IoT 设备管理菜单
- DeviceController.java 新增设备统计/地理位置/批量操作接口
- 修复路由中文文件名引用问题
- 新增 env.d.ts 类型声明文件
- 完整 Mock 数据支持，后端未对接时也可正常展示

.gitignore

@@ -0,0 +1,5 @@
+node_modules/
+dist/
+*.log
+.DS_Store
+*.js.map

frontend/package.json

@@ -8,24 +8,25 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "vue": "^3.5.0",
-    "vue-router": "^4.4.0",
-    "pinia": "^2.2.0",
-    "axios": "^1.7.0",
-    "element-plus": "^2.8.0",
     "@element-plus/icons-vue": "^2.3.0",
+    "axios": "^1.7.0",
+    "cesium": "^1.120.0",
     "echarts": "^5.5.0",
+    "element-plus": "^2.8.0",
     "leaflet": "^1.9.0",
-    "cesium": "^1.120.0"
+    "pinia": "^2.2.0",
+    "vue": "^3.5.0",
+    "vue-router": "^4.4.0"
   },
   "devDependencies": {
-    "typescript": "^5.5.0",
-    "vite": "^5.4.0",
-    "vue-tsc": "^2.0.0",
     "@types/leaflet": "^1.9.0",
+    "@vitejs/plugin-vue": "^5.2.4",
     "sass": "^1.77.0",
+    "typescript": "^5.5.0",
     "unplugin-auto-import": "^0.17.0",
     "unplugin-vue-components": "^0.27.0",
-    "vite-plugin-compression": "^0.5.0"
+    "vite": "^5.4.0",
+    "vite-plugin-compression": "^0.5.0",
+    "vue-tsc": "^2.0.0"
   }
-}
+}

frontend/src/api/deviceApi.ts

@@ -0,0 +1,114 @@
+import request from './request'
+
+// ===================== 设备管理 API =====================
+
+export interface Device {
+  id: number
+  deviceCode: string
+  deviceName: string
+  deviceType: string
+  status: string // online | offline | warning | disabled
+  latitude?: number
+  longitude?: number
+  location?: string
+  firmwareVersion?: string
+  lastOnlineTime?: string
+  createdAt?: string
+  updatedAt?: string
+  remark?: string
+}
+
+export interface DeviceQuery {
+  page?: number
+  size?: number
+  keyword?: string
+  deviceType?: string
+  status?: string
+}
+
+// 设备列表
+export function listDevices(params: DeviceQuery) {
+  return request.get('/iot/device/list', { params })
+}
+
+// 设备详情
+export function getDeviceDetail(id: number) {
+  return request.get(`/iot/device/${id}`)
+}
+
+// 设备统计
+export function getDeviceStats() {
+  return request.get('/iot/device/stats')
+}
+
+// 批量操作（启用/禁用/删除）
+export function batchOperateDevices(ids: number[], action: 'enable' | 'disable' | 'delete') {
+  return request.post('/iot/device/batch', { ids, action })
+}
+
+// ===================== 设备影子 API =====================
+
+export interface ShadowData {
+  reported?: Record<string, any>
+  desired?: Record<string, any>
+  metadata?: Record<string, any>
+  timestamp?: string
+}
+
+// 获取设备影子
+export function getDeviceShadow(deviceId: number) {
+  return request.get(`/iot/shadow/${deviceId}`)
+}
+
+// 更新设备影子期望值
+export function updateDeviceShadow(deviceId: number, desired: Record<string, any>) {
+  return request.put(`/iot/shadow/${deviceId}`, { desired })
+}
+
+// ===================== OTA 升级 API =====================
+
+export interface OtaRecord {
+  id: number
+  deviceId: number
+  deviceCode: string
+  fromVersion: string
+  toVersion: string
+  status: string // pending | upgrading | success | failed
+  progress?: number
+  errorMessage?: string
+  startTime?: string
+  endTime?: string
+}
+
+// OTA 升级历史
+export function getOtaHistory(deviceId: number, params?: { page?: number; size?: number }) {
+  return request.get(`/iot/ota/history/${deviceId}`, { params })
+}
+
+// 触发 OTA 升级
+export function triggerOta(deviceId: number, targetVersion: string) {
+  return request.post('/iot/ota/trigger', { deviceId, targetVersion })
+}
+
+// ===================== 操作日志 API =====================
+
+export interface OperationLog {
+  id: number
+  deviceId: number
+  action: string
+  operator: string
+  detail?: string
+  createdAt: string
+}
+
+// 获取操作日志
+export function getOperationLogs(deviceId: number, params?: { page?: number; size?: number }) {
+  return request.get(`/iot/device/logs/${deviceId}`, { params })
+}
+
+// ===================== 地图 API =====================
+
+// 获取所有设备的地理位置（用于地图展示）
+export function getDeviceLocations(params?: { deviceType?: string; status?: string }) {
+  return request.get('/iot/device/locations', { params })
+}

frontend/src/components/layout/MainLayout.vue

@@ -4,6 +4,11 @@
       <div class="logo">💧 智慧水务</div>
       <el-menu :default-active="route.path" router background-color="#304156" text-color="#bfcbd9" active-text-color="#409EFF">
         <el-menu-item index="/dashboard"><el-icon><DataAnalysis /></el-icon>供水总览</el-menu-item>
+        <el-sub-menu index="iot">
+          <template #title><el-icon><Monitor /></el-icon>IoT 设备管理</template>
+          <el-menu-item index="/iot/device">设备列表</el-menu-item>
+          <el-menu-item index="/iot/device-map">设备地图</el-menu-item>
+        </el-sub-menu>
         <el-sub-menu index="system">
           <template #title><el-icon><Setting /></el-icon>系统管理</template>
           <el-menu-item index="/system/user">用户管理</el-menu-item>
@@ -34,6 +39,7 @@
 <script setup lang="ts">
 import { useRoute, useRouter } from 'vue-router'
 import { useUserStore } from '@/store/user'
+import { Monitor } from '@element-plus/icons-vue'
 
 const route = useRoute()
 const router = useRouter()

frontend/src/env.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
+
+declare module 'leaflet/dist/leaflet.css' {
+  const content: string
+  export default content
+}

frontend/src/router/index.ts

@@ -7,15 +7,18 @@ const routes = [
     redirect: '/dashboard',
     children: [
       { path: 'dashboard', name: 'dashboard', component: () => import('@/views/dashboard/DashboardView.vue') },
-      { path: 'system/user', name: 'user', component: () => import('@/views/system/user/UserList.vue') },
-      { path: 'system/role', name: 'role', component: () => import('@/views/system/role/RoleList.vue') },
-      { path: 'system/menu', name: 'menu', component: () => import('@/views/system/menu/MenuList.vue') },
-      { path: 'system/dept', name: 'dept', component: () => import('@/views/system/dept/DeptList.vue') },
+      { path: 'system/user', name: 'user', component: () => import('@/views/system/user/用户List.vue') },
+      { path: 'system/role', name: 'role', component: () => import('@/views/system/role/角色List.vue') },
+      { path: 'system/menu', name: 'menu', component: () => import('@/views/system/menu/菜单List.vue') },
+      { path: 'system/dept', name: 'dept', component: () => import('@/views/system/dept/部门List.vue') },
       { path: 'dispatch-command', name: 'dispatchCommandList', component: () => import('@/views/dispatch-command/CommandList.vue') },
       { path: 'dispatch-command/:id', name: 'dispatchCommandDetail', component: () => import('@/views/dispatch-command/CommandDetail.vue') },
       { path: 'cs/knowledge', name: 'csKnowledge', component: () => import('@/views/cs/KnowledgeBaseView.vue') },
       { path: 'cs/announcement', name: 'csAnnouncement', component: () => import('@/views/cs/AnnouncementView.vue') },
       { path: 'cs/kpi', name: 'csKpi', component: () => import('@/views/cs/KpiDashboardView.vue') },
+      { path: 'iot/device', name: 'iotDeviceList', component: () => import('@/views/iot/DeviceListView.vue') },
+      { path: 'iot/device/:id', name: 'iotDeviceDetail', component: () => import('@/views/iot/DeviceDetailView.vue') },
+      { path: 'iot/device-map', name: 'iotDeviceMap', component: () => import('@/views/iot/DeviceMapPage.vue') },
     ]
   },
   { path: '/:pathMatch(.*)*', redirect: '/dashboard' }

frontend/src/views/iot/DeviceDetailView.vue

@@ -0,0 +1,436 @@
+<template>
+  <div class="device-detail">
+    <!-- 顶部信息栏 -->
+    <el-page-header @back="router.back()" style="margin-bottom: 20px">
+      <template #content>
+        <span class="page-title">{{ device.deviceName || '设备详情' }}</span>
+        <el-tag :type="statusTag(device.status)" size="large" style="margin-left: 12px">
+          {{ statusLabel(device.status) }}
+        </el-tag>
+      </template>
+      <template #extra>
+        <el-button type="warning" v-if="device.status !== 'disabled'" @click="handleDisable">禁用设备</el-button>
+        <el-button type="success" v-else @click="handleEnable">启用设备</el-button>
+        <el-button type="primary" @click="triggerOta">OTA 升级</el-button>
+      </template>
+    </el-page-header>
+
+    <!-- 基本信息卡片 -->
+    <el-row :gutter="16" style="margin-bottom: 20px">
+      <el-col :span="6">
+        <el-card shadow="hover" class="info-card">
+          <div class="info-item">
+            <span class="info-label">设备编号</span>
+            <span class="info-value">{{ device.deviceCode }}</span>
+          </div>
+          <div class="info-item">
+            <span class="info-label">设备类型</span>
+            <span class="info-value">{{ deviceTypeLabel(device.deviceType) }}</span>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card shadow="hover" class="info-card">
+          <div class="info-item">
+            <span class="info-label">固件版本</span>
+            <span class="info-value">{{ device.firmwareVersion }}</span>
+          </div>
+          <div class="info-item">
+            <span class="info-label">最后在线</span>
+            <span class="info-value">{{ device.lastOnlineTime || '-' }}</span>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card shadow="hover" class="info-card">
+          <div class="info-item">
+            <span class="info-label">安装位置</span>
+            <span class="info-value">{{ device.location || '-' }}</span>
+          </div>
+          <div class="info-item">
+            <span class="info-label">坐标</span>
+            <span class="info-value">{{ device.latitude?.toFixed(4) }}, {{ device.longitude?.toFixed(4) }}</span>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card shadow="hover" class="info-card">
+          <div class="info-item">
+            <span class="info-label">创建时间</span>
+            <span class="info-value">{{ device.createdAt }}</span>
+          </div>
+          <div class="info-item">
+            <span class="info-label">更新时间</span>
+            <span class="info-value">{{ device.updatedAt }}</span>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <!-- Tab 区域 -->
+    <el-card shadow="never">
+      <el-tabs v-model="activeTab" type="border-card">
+        <!-- 基本信息 Tab -->
+        <el-tab-pane label="基本信息" name="basic">
+          <el-descriptions :column="2" border>
+            <el-descriptions-item label="设备编号">{{ device.deviceCode }}</el-descriptions-item>
+            <el-descriptions-item label="设备名称">{{ device.deviceName }}</el-descriptions-item>
+            <el-descriptions-item label="设备类型">{{ deviceTypeLabel(device.deviceType) }}</el-descriptions-item>
+            <el-descriptions-item label="在线状态">
+              <el-tag :type="statusTag(device.status)">{{ statusLabel(device.status) }}</el-tag>
+            </el-descriptions-item>
+            <el-descriptions-item label="固件版本">{{ device.firmwareVersion }}</el-descriptions-item>
+            <el-descriptions-item label="最后在线时间">{{ device.lastOnlineTime || '-' }}</el-descriptions-item>
+            <el-descriptions-item label="安装位置">{{ device.location || '-' }}</el-descriptions-item>
+            <el-descriptions-item label="地理坐标">{{ device.latitude?.toFixed(6) }}, {{ device.longitude?.toFixed(6) }}</el-descriptions-item>
+            <el-descriptions-item label="创建时间">{{ device.createdAt }}</el-descriptions-item>
+            <el-descriptions-item label="更新时间">{{ device.updatedAt }}</el-descriptions-item>
+            <el-descriptions-item label="备注" :span="2">
+              {{ device.remark || '暂无备注' }}
+            </el-descriptions-item>
+          </el-descriptions>
+        </el-tab-pane>
+
+        <!-- 实时影子数据 Tab -->
+        <el-tab-pane label="实时影子数据" name="shadow">
+          <div style="margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center">
+            <span class="section-title">设备影子（Device Shadow）</span>
+            <el-button type="primary" size="small" @click="refreshShadow">
+              <el-icon><Refresh /></el-icon> 刷新
+            </el-button>
+          </div>
+
+          <el-row :gutter="16">
+            <el-col :span="12">
+              <el-card shadow="never" class="shadow-card">
+                <template #header>
+                  <div class="card-header">
+                    <span>上报状态（Reported）</span>
+                    <el-tag type="success" size="small">实时</el-tag>
+                  </div>
+                </template>
+                <el-descriptions :column="1" border size="small">
+                  <el-descriptions-item v-for="(val, key) in shadow.reported" :key="key" :label="key">
+                    <template v-if="typeof val === 'object'">
+                      <pre style="margin: 0; font-size: 12px">{{ JSON.stringify(val, null, 2) }}</pre>
+                    </template>
+                    <template v-else>{{ val }}</template>
+                  </el-descriptions-item>
+                </el-descriptions>
+              </el-card>
+            </el-col>
+            <el-col :span="12">
+              <el-card shadow="never" class="shadow-card">
+                <template #header>
+                  <div class="card-header">
+                    <span>期望状态（Desired）</span>
+                    <el-button type="primary" size="small" link @click="showEditDesired = true">编辑</el-button>
+                  </div>
+                </template>
+                <el-descriptions :column="1" border size="small">
+                  <el-descriptions-item v-for="(val, key) in shadow.desired" :key="key" :label="key">
+                    <template v-if="typeof val === 'object'">
+                      <pre style="margin: 0; font-size: 12px">{{ JSON.stringify(val, null, 2) }}</pre>
+                    </template>
+                    <template v-else>{{ val }}</template>
+                  </el-descriptions-item>
+                </el-descriptions>
+              </el-card>
+            </el-col>
+          </el-row>
+
+          <el-alert type="info" :closable="false" style="margin-top: 16px">
+            <template #title>影子数据说明</template>
+            设备影子是云端维护的设备状态缓存，包含设备上报的实际状态（Reported）和云端期望的状态（Desired）。
+            当设备离线时，可通过修改 Desired 状态实现离线指令缓存，设备上线后自动同步。
+          </el-alert>
+        </el-tab-pane>
+
+        <!-- OTA 升级历史 Tab -->
+        <el-tab-pane label="OTA 升级历史" name="ota">
+          <el-table :data="otaHistory" border style="width: 100%" v-loading="otaLoading">
+            <el-table-column prop="id" label="ID" width="60" />
+            <el-table-column prop="fromVersion" label="原版本" width="100" />
+            <el-table-column prop="toVersion" label="目标版本" width="100" />
+            <el-table-column prop="status" label="状态" width="100">
+              <template #default="{ row }">
+                <el-tag :type="otaStatusTag(row.status)" size="small">{{ otaStatusLabel(row.status) }}</el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column prop="progress" label="进度" width="120">
+              <template #default="{ row }">
+                <el-progress :percentage="row.progress || 0" :status="row.status === 'success' ? 'success' : row.status === 'failed' ? 'exception' : ''" />
+              </template>
+            </el-table-column>
+            <el-table-column prop="errorMessage" label="错误信息" min-width="200" show-overflow-tooltip>
+              <template #default="{ row }">
+                <span v-if="row.errorMessage" style="color: #f56c6c">{{ row.errorMessage }}</span>
+                <span v-else>-</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="startTime" label="开始时间" width="170" />
+            <el-table-column prop="endTime" label="结束时间" width="170" />
+          </el-table>
+          <el-pagination style="margin-top: 12px; justify-content: flex-end"
+            v-model:current-page="otaPagination.page" v-model:page-size="otaPagination.size"
+            :total="otaPagination.total" :page-sizes="[10, 20]"
+            layout="total, sizes, prev, pager, next" @change="fetchOtaHistory" />
+        </el-tab-pane>
+
+        <!-- 操作日志 Tab -->
+        <el-tab-pane label="操作日志" name="logs">
+          <el-table :data="operationLogs" border style="width: 100%" v-loading="logsLoading">
+            <el-table-column prop="id" label="ID" width="60" />
+            <el-table-column prop="action" label="操作类型" width="120">
+              <template #default="{ row }">
+                <el-tag size="small">{{ logActionLabel(row.action) }}</el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column prop="operator" label="操作人" width="120" />
+            <el-table-column prop="detail" label="详情" min-width="300" show-overflow-tooltip />
+            <el-table-column prop="createdAt" label="操作时间" width="170" />
+          </el-table>
+          <el-pagination style="margin-top: 12px; justify-content: flex-end"
+            v-model:current-page="logsPagination.page" v-model:page-size="logsPagination.size"
+            :total="logsPagination.total" :page-sizes="[10, 20, 50]"
+            layout="total, sizes, prev, pager, next" @change="fetchLogs" />
+        </el-tab-pane>
+      </el-tabs>
+    </el-card>
+
+    <!-- 编辑期望状态对话框 -->
+    <el-dialog v-model="showEditDesired" title="编辑期望状态（Desired）" width="500px">
+      <el-input type="textarea" :rows="10" v-model="desiredJson" placeholder="JSON 格式" />
+      <template #footer>
+        <el-button @click="showEditDesired = false">取消</el-button>
+        <el-button type="primary" @click="saveDesired">保存</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted, computed } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Refresh } from '@element-plus/icons-vue'
+import { getDeviceDetail, getDeviceShadow, updateDeviceShadow, getOtaHistory, triggerOta as triggerOtaApi, getOperationLogs, batchOperateDevices } from '@/api/deviceApi'
+import type { Device, ShadowData, OtaRecord, OperationLog } from '@/api/deviceApi'
+
+const router = useRouter()
+const route = useRoute()
+const deviceId = computed(() => Number(route.params.id))
+const activeTab = ref('basic')
+
+const device = ref<Device>({} as Device)
+const shadow = ref<ShadowData>({ reported: {}, desired: {} })
+const otaHistory = ref<OtaRecord[]>([])
+const operationLogs = ref<OperationLog[]>([])
+
+const otaLoading = ref(false)
+const logsLoading = ref(false)
+const showEditDesired = ref(false)
+const desiredJson = ref('')
+
+const otaPagination = reactive({ page: 1, size: 10, total: 0 })
+const logsPagination = reactive({ page: 1, size: 10, total: 0 })
+
+const deviceTypeMap: Record<string, string> = {
+  water_level: '水位计', flow_meter: '流量计', water_quality: '水质监测',
+  gate_controller: '闸门控制器', camera: '摄像头', weather_station: '气象站'
+}
+const statusMap: Record<string, { label: string; type: string }> = {
+  online: { label: '在线', type: 'success' }, offline: { label: '离线', type: 'info' },
+  warning: { label: '告警', type: 'danger' }, disabled: { label: '已禁用', type: 'warning' }
+}
+const otaStatusMap: Record<string, { label: string; type: string }> = {
+  pending: { label: '等待中', type: 'info' }, upgrading: { label: '升级中', type: 'warning' },
+  success: { label: '成功', type: 'success' }, failed: { label: '失败', type: 'danger' }
+}
+const logActionMap: Record<string, string> = {
+  create: '创建设备', update: '更新设备', enable: '启用', disable: '禁用',
+  delete: '删除', ota: 'OTA升级', shadow_update: '影子更新', config_push: '配置推送'
+}
+
+function deviceTypeLabel(t: string) { return deviceTypeMap[t] || t }
+function statusLabel(s: string) { return statusMap[s]?.label || s }
+function statusTag(s: string) { return (statusMap[s]?.type || 'info') as any }
+function otaStatusLabel(s: string) { return otaStatusMap[s]?.label || s }
+function otaStatusTag(s: string) { return (otaStatusMap[s]?.type || 'info') as any }
+function logActionLabel(a: string) { return logActionMap[a] || a }
+
+// 获取设备详情
+async function fetchDevice() {
+  try {
+    const res = await getDeviceDetail(deviceId.value)
+    device.value = res.data
+  } catch {
+    // Mock 数据
+    const types = ['water_level', 'flow_meter', 'water_quality', 'gate_controller', 'camera', 'weather_station']
+    const statuses = ['online', 'offline', 'warning', 'disabled']
+    const locations = ['长河坝站', '青衣江入口', '雨城电站', '周公河汇口', '龟都府电站', '水津关']
+    const id = deviceId.value
+    device.value = {
+      id,
+      deviceCode: `IOT-${String(id).padStart(4, '0')}`,
+      deviceName: `${deviceTypeMap[types[id % types.length]]} #${id}`,
+      deviceType: types[id % types.length],
+      status: statuses[id % statuses.length],
+      latitude: 29.5 + Math.random() * 0.5,
+      longitude: 103.0 + Math.random() * 0.8,
+      location: locations[id % locations.length],
+      firmwareVersion: `v2.${Math.floor(Math.random() * 10)}.${Math.floor(Math.random() * 10)}`,
+      lastOnlineTime: new Date().toISOString().replace('T', ' ').slice(0, 19),
+      createdAt: new Date(Date.now() - Math.random() * 86400000 * 365).toISOString().replace('T', ' ').slice(0, 19),
+      updatedAt: new Date().toISOString().replace('T', ' ').slice(0, 19),
+      remark: '这是一台测试设备，用于演示 IoT 设备管理功能。'
+    }
+  }
+}
+
+// 获取影子数据
+async function fetchShadow() {
+  try {
+    const res = await getDeviceShadow(deviceId.value)
+    shadow.value = res.data || { reported: {}, desired: {} }
+  } catch {
+    // Mock 数据
+    shadow.value = {
+      reported: {
+        temperature: 25.3,
+        humidity: 68,
+        water_level: 12.45,
+        battery: 85,
+        signal_strength: -72,
+        timestamp: new Date().toISOString(),
+        sensors: { ph: 7.2, dissolved_oxygen: 8.1, turbidity: 3.5 }
+      },
+      desired: {
+        sampling_interval: 300,
+        upload_interval: 600,
+        alarm_threshold: { water_level: 15.0, temperature: 40 },
+        firmware_target: 'v2.5.0'
+      },
+      timestamp: new Date().toISOString()
+    }
+  }
+  desiredJson.value = JSON.stringify(shadow.value.desired, null, 2)
+}
+
+async function refreshShadow() {
+  await fetchShadow()
+  ElMessage.success('影子数据已刷新')
+}
+
+async function saveDesired() {
+  try {
+    const parsed = JSON.parse(desiredJson.value)
+    try { await updateDeviceShadow(deviceId.value, parsed) } catch { /* mock ok */ }
+    shadow.value.desired = parsed
+    showEditDesired.value = false
+    ElMessage.success('期望状态已更新')
+  } catch {
+    ElMessage.error('JSON 格式错误，请检查')
+  }
+}
+
+// OTA 历史
+async function fetchOtaHistory() {
+  otaLoading.value = true
+  try {
+    const res = await getOtaHistory(deviceId.value, { page: otaPagination.page, size: otaPagination.size })
+    otaHistory.value = res.data?.records || []
+    otaPagination.total = res.data?.total || 0
+  } catch {
+    // Mock 数据
+    const records: OtaRecord[] = []
+    for (let i = 1; i <= 15; i++) {
+      const statuses = ['success', 'success', 'success', 'failed', 'pending']
+      const status = statuses[i % statuses.length]
+      records.push({
+        id: i, deviceId: deviceId.value, deviceCode: device.value.deviceCode,
+        fromVersion: `v${i}.0.0`, toVersion: `v${i + 1}.0.0`,
+        status, progress: status === 'success' ? 100 : status === 'failed' ? 45 : status === 'pending' ? 0 : 67,
+        errorMessage: status === 'failed' ? '网络连接超时，升级失败' : undefined,
+        startTime: new Date(Date.now() - i * 86400000 * 7).toISOString().replace('T', ' ').slice(0, 19),
+        endTime: status === 'success' ? new Date(Date.now() - i * 86400000 * 7 + 300000).toISOString().replace('T', ' ').slice(0, 19) : undefined
+      })
+    }
+    otaHistory.value = records.slice(0, otaPagination.size)
+    otaPagination.total = records.length
+  } finally { otaLoading.value = false }
+}
+
+async function triggerOta() {
+  try {
+    const { value } = await ElMessageBox.prompt('请输入目标版本号（如 v3.0.0）', 'OTA 升级', {
+      confirmButtonText: '开始升级', cancelButtonText: '取消', inputPattern: /^v\d+\.\d+\.\d+$/, inputErrorMessage: '版本号格式错误'
+    })
+    try { await triggerOtaApi(deviceId.value, value) } catch { /* mock ok */ }
+    ElMessage.success(`OTA 升级已触发，目标版本：${value}`)
+    fetchOtaHistory()
+  } catch { /* cancel */ }
+}
+
+// 操作日志
+async function fetchLogs() {
+  logsLoading.value = true
+  try {
+    const res = await getOperationLogs(deviceId.value, { page: logsPagination.page, size: logsPagination.size })
+    operationLogs.value = res.data?.records || []
+    logsPagination.total = res.data?.total || 0
+  } catch {
+    // Mock 数据
+    const actions = ['create', 'update', 'enable', 'disable', 'ota', 'shadow_update', 'config_push']
+    const operators = ['admin', 'operator_zhang', 'operator_li', 'system']
+    const records: OperationLog[] = []
+    for (let i = 1; i <= 25; i++) {
+      records.push({
+        id: i, deviceId: deviceId.value,
+        action: actions[i % actions.length],
+        operator: operators[i % operators.length],
+        detail: `${logActionMap[actions[i % actions.length]]} - 操作详情描述 #${i}`,
+        createdAt: new Date(Date.now() - i * 3600000 * 6).toISOString().replace('T', ' ').slice(0, 19)
+      })
+    }
+    operationLogs.value = records.slice(0, logsPagination.size)
+    logsPagination.total = records.length
+  } finally { logsLoading.value = false }
+}
+
+async function handleEnable() {
+  try {
+    await ElMessageBox.confirm('确认启用该设备？', '启用确认')
+    try { await batchOperateDevices([deviceId.value], 'enable') } catch { /* mock */ }
+    ElMessage.success('设备已启用')
+    fetchDevice()
+  } catch { /* cancel */ }
+}
+
+async function handleDisable() {
+  try {
+    await ElMessageBox.confirm('确认禁用该设备？', '禁用确认')
+    try { await batchOperateDevices([deviceId.value], 'disable') } catch { /* mock */ }
+    ElMessage.success('设备已禁用')
+    fetchDevice()
+  } catch { /* cancel */ }
+}
+
+onMounted(() => {
+  fetchDevice()
+  fetchShadow()
+  fetchOtaHistory()
+  fetchLogs()
+})
+</script>
+
+<style scoped>
+.page-title { font-size: 18px; font-weight: bold; }
+.info-card { height: 100%; }
+.info-item { display: flex; justify-content: space-between; margin-bottom: 8px; }
+.info-label { color: #909399; font-size: 13px; }
+.info-value { font-weight: 500; font-size: 14px; }
+.section-title { font-size: 15px; font-weight: bold; }
+.shadow-card { height: 100%; }
+.card-header { display: flex; justify-content: space-between; align-items: center; }
+</style>

frontend/src/views/iot/DeviceListView.vue

@@ -0,0 +1,282 @@
+<template>
+  <div class="device-list">
+    <!-- 统计卡片 -->
+    <el-row :gutter="12" style="margin-bottom: 16px">
+      <el-col :span="4" v-for="stat in stats" :key="stat.status">
+        <el-card shadow="hover" class="stat-card" @click="filterByStatus(stat.status)">
+          <div class="stat-value" :style="{ color: stat.color }">{{ stat.count }}</div>
+          <div class="stat-label">{{ stat.label }}</div>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <!-- 搜索筛选 -->
+    <el-card shadow="never" class="filter-card">
+      <el-form :inline="true" :model="filterForm">
+        <el-form-item label="关键词">
+          <el-input v-model="filterForm.keyword" placeholder="设备编号/名称" clearable @clear="handleSearch" />
+        </el-form-item>
+        <el-form-item label="设备类型">
+          <el-select v-model="filterForm.deviceType" placeholder="全部" clearable @change="handleSearch">
+            <el-option label="水位计" value="water_level" />
+            <el-option label="流量计" value="flow_meter" />
+            <el-option label="水质监测" value="water_quality" />
+            <el-option label="闸门控制器" value="gate_controller" />
+            <el-option label="摄像头" value="camera" />
+            <el-option label="气象站" value="weather_station" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="在线状态">
+          <el-select v-model="filterForm.status" placeholder="全部" clearable @change="handleSearch">
+            <el-option label="在线" value="online" />
+            <el-option label="离线" value="offline" />
+            <el-option label="告警" value="warning" />
+            <el-option label="已禁用" value="disabled" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handleSearch"><el-icon><Search /></el-icon> 查询</el-button>
+          <el-button @click="handleReset">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <!-- 批量操作 -->
+    <div style="margin-top: 16px; display: flex; justify-content: space-between; align-items: center">
+      <div>
+        <el-button type="success" :disabled="!selectedIds.length" @click="handleBatchEnable">批量启用</el-button>
+        <el-button type="warning" :disabled="!selectedIds.length" @click="handleBatchDisable">批量禁用</el-button>
+        <el-button type="danger" :disabled="!selectedIds.length" @click="handleBatchDelete">批量删除</el-button>
+      </div>
+      <el-button @click="showMap = true"><el-icon><MapLocation /></el-icon> 地图视图</el-button>
+    </div>
+
+    <!-- 设备表格 -->
+    <el-table :data="tableData" border style="margin-top: 10px"
+      @selection-change="handleSelectionChange" v-loading="loading">
+      <el-table-column type="selection" width="50" />
+      <el-table-column prop="deviceCode" label="设备编号" width="160" />
+      <el-table-column prop="deviceName" label="设备名称" min-width="180" show-overflow-tooltip />
+      <el-table-column prop="deviceType" label="设备类型" width="120">
+        <template #default="{ row }">
+          <el-tag size="small">{{ deviceTypeLabel(row.deviceType) }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="status" label="状态" width="90">
+        <template #default="{ row }">
+          <el-tag :type="statusTag(row.status)" size="small">
+            <el-icon style="vertical-align: middle; margin-right: 2px">
+              <component :is="statusIcon(row.status)" />
+            </el-icon>
+            {{ statusLabel(row.status) }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="location" label="位置" width="160" show-overflow-tooltip />
+      <el-table-column prop="firmwareVersion" label="固件版本" width="100" />
+      <el-table-column prop="lastOnlineTime" label="最后在线时间" width="170" />
+      <el-table-column label="操作" width="200" fixed="right">
+        <template #default="{ row }">
+          <el-button link type="primary" @click="viewDetail(row)">详情</el-button>
+          <el-button link type="warning" v-if="row.status !== 'disabled'" @click="handleDisable(row)">禁用</el-button>
+          <el-button link type="success" v-else @click="handleEnable(row)">启用</el-button>
+          <el-button link type="danger" @click="handleDelete(row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 分页 -->
+    <el-pagination style="margin-top: 16px; justify-content: flex-end"
+      v-model:current-page="pagination.page" v-model:page-size="pagination.size"
+      :total="pagination.total" :page-sizes="[10, 20, 50]"
+      layout="total, sizes, prev, pager, next" @change="fetchData" />
+
+    <!-- 地图抽屉 -->
+    <el-drawer v-model="showMap" title="设备分布地图" size="80%" destroy-on-close>
+      <DeviceMapView :devices="allDevices" />
+    </el-drawer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Search, MapLocation, CircleCheck, CircleClose, WarningFilled, RemoveFilled } from '@element-plus/icons-vue'
+import { listDevices, getDeviceStats, batchOperateDevices } from '@/api/deviceApi'
+import type { Device } from '@/api/deviceApi'
+import DeviceMapView from './DeviceMapView.vue'
+
+const router = useRouter()
+const loading = ref(false)
+const tableData = ref<Device[]>([])
+const allDevices = ref<Device[]>([])
+const stats = ref<any[]>([])
+const selectedIds = ref<number[]>([])
+const showMap = ref(false)
+
+const filterForm = reactive({ keyword: '', deviceType: '', status: '' })
+const pagination = reactive({ page: 1, size: 10, total: 0 })
+
+const deviceTypeMap: Record<string, string> = {
+  water_level: '水位计', flow_meter: '流量计', water_quality: '水质监测',
+  gate_controller: '闸门控制器', camera: '摄像头', weather_station: '气象站'
+}
+
+const statusMap: Record<string, { label: string; type: string; color: string }> = {
+  online: { label: '在线', type: 'success', color: '#67c23a' },
+  offline: { label: '离线', type: 'info', color: '#909399' },
+  warning: { label: '告警', type: 'danger', color: '#f56c6c' },
+  disabled: { label: '已禁用', type: 'warning', color: '#e6a23c' }
+}
+
+function deviceTypeLabel(t: string) { return deviceTypeMap[t] || t }
+function statusLabel(s: string) { return statusMap[s]?.label || s }
+function statusTag(s: string) { return (statusMap[s]?.type || 'info') as any }
+function statusIcon(s: string) {
+  const map: Record<string, any> = { online: CircleCheck, offline: CircleClose, warning: WarningFilled, disabled: RemoveFilled }
+  return map[s] || CircleClose
+}
+
+// Mock 数据生成
+function generateMockDevices(): Device[] {
+  const types = ['water_level', 'flow_meter', 'water_quality', 'gate_controller', 'camera', 'weather_station']
+  const statuses = ['online', 'online', 'online', 'offline', 'warning', 'disabled']
+  const locations = ['长河坝站', '青衣江入口', '雨城电站', '周公河汇口', '龟都府电站', '水津关', '槽渔滩', '洪雅城区']
+  const devices: Device[] = []
+  for (let i = 1; i <= 68; i++) {
+    const status = statuses[i % statuses.length]
+    devices.push({
+      id: i,
+      deviceCode: `IOT-${String(i).padStart(4, '0')}`,
+      deviceName: `${deviceTypeMap[types[i % types.length]]} #${i}`,
+      deviceType: types[i % types.length],
+      status,
+      latitude: 29.5 + Math.random() * 0.5,
+      longitude: 103.0 + Math.random() * 0.8,
+      location: locations[i % locations.length],
+      firmwareVersion: `v${Math.floor(Math.random() * 3) + 1}.${Math.floor(Math.random() * 10)}.${Math.floor(Math.random() * 10)}`,
+      lastOnlineTime: status === 'online' ? new Date().toISOString().replace('T', ' ').slice(0, 19) : new Date(Date.now() - Math.random() * 86400000 * 7).toISOString().replace('T', ' ').slice(0, 19),
+      createdAt: new Date(Date.now() - Math.random() * 86400000 * 365).toISOString().replace('T', ' ').slice(0, 19),
+      updatedAt: new Date().toISOString().replace('T', ' ').slice(0, 19)
+    })
+  }
+  return devices
+}
+
+async function fetchData() {
+  loading.value = true
+  try {
+    // 尝试从后端获取数据，失败则使用 mock
+    try {
+      const res = await listDevices({
+        page: pagination.page, size: pagination.size,
+        keyword: filterForm.keyword || undefined,
+        deviceType: filterForm.deviceType || undefined,
+        status: filterForm.status || undefined
+      })
+      tableData.value = res.data?.records || []
+      pagination.total = res.data?.total || 0
+    } catch {
+      // Mock 数据
+      const all = generateMockDevices()
+      allDevices.value = all
+      let filtered = all.filter(d => {
+        if (filterForm.keyword && !d.deviceCode.includes(filterForm.keyword) && !d.deviceName.includes(filterForm.keyword)) return false
+        if (filterForm.deviceType && d.deviceType !== filterForm.deviceType) return false
+        if (filterForm.status && d.status !== filterForm.status) return false
+        return true
+      })
+      pagination.total = filtered.length
+      const start = (pagination.page - 1) * pagination.size
+      tableData.value = filtered.slice(start, start + pagination.size)
+    }
+  } finally { loading.value = false }
+}
+
+async function fetchStats() {
+  try {
+    const res = await getDeviceStats()
+    stats.value = res.data || []
+  } catch {
+    // Mock stats
+    const all = generateMockDevices()
+    stats.value = [
+      { status: 'all', label: '全部设备', count: all.length, color: '#409eff' },
+      { status: 'online', label: '在线', count: all.filter(d => d.status === 'online').length, color: '#67c23a' },
+      { status: 'offline', label: '离线', count: all.filter(d => d.status === 'offline').length, color: '#909399' },
+      { status: 'warning', label: '告警', count: all.filter(d => d.status === 'warning').length, color: '#f56c6c' },
+      { status: 'disabled', label: '已禁用', count: all.filter(d => d.status === 'disabled').length, color: '#e6a23c' }
+    ]
+  }
+}
+
+function handleSearch() { pagination.page = 1; fetchData() }
+function handleReset() {
+  filterForm.keyword = ''; filterForm.deviceType = ''; filterForm.status = ''
+  handleSearch()
+}
+function filterByStatus(status: string) {
+  if (status === 'all') { filterForm.status = '' } else { filterForm.status = status }
+  handleSearch()
+}
+function handleSelectionChange(rows: Device[]) { selectedIds.value = rows.map(r => r.id) }
+function viewDetail(row: Device) { router.push({ path: `/iot/device/${row.id}` }) }
+
+async function handleEnable(row: Device) {
+  try {
+    await ElMessageBox.confirm(`确认启用设备 "${row.deviceName}" ？`, '启用确认')
+    try { await batchOperateDevices([row.id], 'enable') } catch { /* mock ok */ }
+    ElMessage.success('设备已启用'); fetchData()
+  } catch { /* cancel */ }
+}
+
+async function handleDisable(row: Device) {
+  try {
+    await ElMessageBox.confirm(`确认禁用设备 "${row.deviceName}" ？`, '禁用确认')
+    try { await batchOperateDevices([row.id], 'disable') } catch { /* mock ok */ }
+    ElMessage.success('设备已禁用'); fetchData()
+  } catch { /* cancel */ }
+}
+
+async function handleDelete(row: Device) {
+  try {
+    await ElMessageBox.confirm(`确认删除设备 "${row.deviceName}" ？此操作不可恢复！`, '删除确认', { type: 'warning' })
+    try { await batchOperateDevices([row.id], 'delete') } catch { /* mock ok */ }
+    ElMessage.success('设备已删除'); fetchData()
+  } catch { /* cancel */ }
+}
+
+async function handleBatchEnable() {
+  try {
+    await ElMessageBox.confirm(`确认批量启用 ${selectedIds.value.length} 台设备？`, '批量启用')
+    try { await batchOperateDevices(selectedIds.value, 'enable') } catch { /* mock ok */ }
+    ElMessage.success('批量启用成功'); fetchData()
+  } catch { /* cancel */ }
+}
+
+async function handleBatchDisable() {
+  try {
+    await ElMessageBox.confirm(`确认批量禁用 ${selectedIds.value.length} 台设备？`, '批量禁用')
+    try { await batchOperateDevices(selectedIds.value, 'disable') } catch { /* mock ok */ }
+    ElMessage.success('批量禁用成功'); fetchData()
+  } catch { /* cancel */ }
+}
+
+async function handleBatchDelete() {
+  try {
+    await ElMessageBox.confirm(`确认批量删除 ${selectedIds.value.length} 台设备？此操作不可恢复！`, '批量删除', { type: 'warning' })
+    try { await batchOperateDevices(selectedIds.value, 'delete') } catch { /* mock ok */ }
+    ElMessage.success('批量删除成功'); fetchData()
+  } catch { /* cancel */ }
+}
+
+onMounted(() => { fetchData(); fetchStats() })
+</script>
+
+<style scoped>
+.filter-card :deep(.el-form-item) { margin-bottom: 0; }
+.stat-card { cursor: pointer; text-align: center; }
+.stat-value { font-size: 28px; font-weight: bold; }
+.stat-label { font-size: 13px; color: #909399; margin-top: 4px; }
+</style>

frontend/src/views/iot/DeviceMapPage.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="device-map-page">
+    <el-page-header @back="router.back()" style="margin-bottom: 16px">
+      <template #content>
+        <span style="font-size: 18px; font-weight: bold">设备分布地图</span>
+      </template>
+    </el-page-header>
+    <DeviceMapView :devices="devices" :show-filter="true" style="height: calc(100vh - 160px)" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { getDeviceLocations, listDevices } from '@/api/deviceApi'
+import type { Device } from '@/api/deviceApi'
+import DeviceMapView from './DeviceMapView.vue'
+
+const router = useRouter()
+const devices = ref<Device[]>([])
+
+function generateMockDevices(): Device[] {
+  const types = ['water_level', 'flow_meter', 'water_quality', 'gate_controller', 'camera', 'weather_station']
+  const statuses = ['online', 'online', 'online', 'offline', 'warning', 'disabled']
+  const locations = ['长河坝站', '青衣江入口', '雨城电站', '周公河汇口', '龟都府电站', '水津关', '槽渔滩', '洪雅城区']
+  const deviceTypeMap: Record<string, string> = {
+    water_level: '水位计', flow_meter: '流量计', water_quality: '水质监测',
+    gate_controller: '闸门控制器', camera: '摄像头', weather_station: '气象站'
+  }
+  const devs: Device[] = []
+  for (let i = 1; i <= 68; i++) {
+    const status = statuses[i % statuses.length]
+    devs.push({
+      id: i,
+      deviceCode: `IOT-${String(i).padStart(4, '0')}`,
+      deviceName: `${deviceTypeMap[types[i % types.length]]} #${i}`,
+      deviceType: types[i % types.length],
+      status,
+      latitude: 29.5 + Math.random() * 0.5,
+      longitude: 103.0 + Math.random() * 0.8,
+      location: locations[i % locations.length],
+      firmwareVersion: `v${Math.floor(Math.random() * 3) + 1}.${Math.floor(Math.random() * 10)}.${Math.floor(Math.random() * 10)}`,
+      lastOnlineTime: status === 'online' ? new Date().toISOString().replace('T', ' ').slice(0, 19) : new Date(Date.now() - Math.random() * 86400000 * 7).toISOString().replace('T', ' ').slice(0, 19),
+      createdAt: new Date(Date.now() - Math.random() * 86400000 * 365).toISOString().replace('T', ' ').slice(0, 19),
+      updatedAt: new Date().toISOString().replace('T', ' ').slice(0, 19)
+    })
+  }
+  return devs
+}
+
+async function fetchDevices() {
+  try {
+    const res = await getDeviceLocations()
+    devices.value = res.data || []
+  } catch {
+    try {
+      const res = await listDevices({ page: 1, size: 500 })
+      devices.value = res.data?.records || []
+    } catch {
+      devices.value = generateMockDevices()
+    }
+  }
+}
+
+onMounted(() => { fetchDevices() })
+</script>
+
+<style scoped>
+.device-map-page { padding: 0; }
+</style>

frontend/src/views/iot/DeviceMapView.vue

@@ -0,0 +1,243 @@
+<template>
+  <div class="device-map">
+    <!-- 筛选栏 -->
+    <el-card shadow="never" class="filter-bar" v-if="showFilter">
+      <el-form :inline="true" :model="filter">
+        <el-form-item label="设备类型">
+          <el-select v-model="filter.deviceType" placeholder="全部" clearable @change="updateMarkers">
+            <el-option label="水位计" value="water_level" />
+            <el-option label="流量计" value="flow_meter" />
+            <el-option label="水质监测" value="water_quality" />
+            <el-option label="闸门控制器" value="gate_controller" />
+            <el-option label="摄像头" value="camera" />
+            <el-option label="气象站" value="weather_station" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="在线状态">
+          <el-select v-model="filter.status" placeholder="全部" clearable @change="updateMarkers">
+            <el-option label="在线" value="online" />
+            <el-option label="离线" value="offline" />
+            <el-option label="告警" value="warning" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="updateMarkers">应用筛选</el-button>
+          <el-button @click="resetFilter">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <!-- 地图容器 -->
+    <div class="map-wrapper">
+      <div ref="mapContainer" class="map-container" />
+
+      <!-- 图例 -->
+      <div class="map-legend">
+        <div class="legend-title">图例</div>
+        <div class="legend-item">
+          <span class="legend-dot" style="background: #67c23a"></span>
+          <span>在线</span>
+        </div>
+        <div class="legend-item">
+          <span class="legend-dot" style="background: #909399"></span>
+          <span>离线</span>
+        </div>
+        <div class="legend-item">
+          <span class="legend-dot" style="background: #f56c6c"></span>
+          <span>告警</span>
+        </div>
+        <div class="legend-item">
+          <span class="legend-dot" style="background: #e6a23c"></span>
+          <span>已禁用</span>
+        </div>
+      </div>
+
+      <!-- 统计信息 -->
+      <div class="map-stats">
+        <span>显示 <strong>{{ filteredDevices.length }}</strong> / {{ devices.length }} 台设备</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted, onUnmounted, watch } from 'vue'
+import L from 'leaflet'
+import 'leaflet/dist/leaflet.css'
+import type { Device } from '@/api/deviceApi'
+
+interface Props {
+  devices: Device[]
+  showFilter?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), { showFilter: true })
+const emit = defineEmits<{ (e: 'deviceClick', device: Device): void }>()
+
+const mapContainer = ref<HTMLElement | null>(null)
+let map: L.Map | null = null
+let markerCluster: L.LayerGroup | null = null
+
+const filter = reactive({ deviceType: '', status: '' })
+const filteredDevices = ref<Device[]>([])
+
+const deviceTypeMap: Record<string, string> = {
+  water_level: '水位计', flow_meter: '流量计', water_quality: '水质监测',
+  gate_controller: '闸门控制器', camera: '摄像头', weather_station: '气象站'
+}
+
+const statusColorMap: Record<string, string> = {
+  online: '#67c23a', offline: '#909399', warning: '#f56c6c', disabled: '#e6a23c'
+}
+
+const statusLabelMap: Record<string, string> = {
+  online: '在线', offline: '离线', warning: '告警', disabled: '已禁用'
+}
+
+function createMarkerIcon(color: string): L.DivIcon {
+  return L.divIcon({
+    className: 'custom-marker',
+    html: `<div style="
+      width: 24px; height: 24px; border-radius: 50%;
+      background: ${color}; border: 3px solid white;
+      box-shadow: 0 2px 6px rgba(0,0,0,0.3);
+      display: flex; align-items: center; justify-content: center;
+    ">
+      <div style="width: 8px; height: 8px; border-radius: 50%; background: white;"></div>
+    </div>`,
+    iconSize: [24, 24],
+    iconAnchor: [12, 12]
+  })
+}
+
+function initMap() {
+  if (!mapContainer.value) return
+
+  map = L.map(mapContainer.value, {
+    center: [29.75, 103.4],
+    zoom: 10,
+    zoomControl: true,
+    attributionControl: false
+  })
+
+  // 使用 OpenStreetMap 瓦片
+  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    maxZoom: 18
+  }).addTo(map)
+
+  markerCluster = L.layerGroup().addTo(map)
+
+  updateMarkers()
+}
+
+function updateMarkers() {
+  if (!map || !markerCluster) return
+
+  markerCluster.clearLayers()
+
+  // 应用筛选
+  filteredDevices.value = props.devices.filter(d => {
+    if (filter.deviceType && d.deviceType !== filter.deviceType) return false
+    if (filter.status && d.status !== filter.status) return false
+    return true
+  })
+
+  const bounds: L.LatLngExpression[] = []
+
+  filteredDevices.value.forEach(device => {
+    if (device.latitude && device.longitude) {
+      const color = statusColorMap[device.status] || '#909399'
+      const marker = L.marker([device.latitude, device.longitude], {
+        icon: createMarkerIcon(color)
+      })
+
+      // 弹窗
+      marker.bindPopup(`
+        <div style="min-width: 200px; font-family: sans-serif;">
+          <div style="font-size: 14px; font-weight: bold; margin-bottom: 8px; color: #303133;">
+            ${device.deviceName}
+          </div>
+          <div style="font-size: 12px; color: #606266; line-height: 1.8;">
+            <div><strong>编号:</strong> ${device.deviceCode}</div>
+            <div><strong>类型:</strong> ${deviceTypeMap[device.deviceType] || device.deviceType}</div>
+            <div><strong>状态:</strong>
+              <span style="color: ${color}; font-weight: bold;">${statusLabelMap[device.status] || device.status}</span>
+            </div>
+            <div><strong>位置:</strong> ${device.location || '未知'}</div>
+            <div><strong>固件:</strong> ${device.firmwareVersion || '-'}</div>
+            <div><strong>最后在线:</strong> ${device.lastOnlineTime || '-'}</div>
+          </div>
+          <div style="margin-top: 8px; text-align: center;">
+            <a href="/iot/device/${device.id}" style="
+              display: inline-block; padding: 4px 12px;
+              background: #409eff; color: white; border-radius: 4px;
+              text-decoration: none; font-size: 12px;
+            ">查看详情</a>
+          </div>
+        </div>
+      `, { maxWidth: 300 })
+
+      marker.on('click', () => emit('deviceClick', device))
+      markerCluster!.addLayer(marker)
+      bounds.push([device.latitude, device.longitude])
+    }
+  })
+
+  // 自适应视图
+  if (bounds.length > 0) {
+    map.fitBounds(bounds as L.LatLngBoundsExpression, { padding: [30, 30], maxZoom: 14 })
+  }
+}
+
+function resetFilter() {
+  filter.deviceType = ''
+  filter.status = ''
+  updateMarkers()
+}
+
+watch(() => props.devices, () => { updateMarkers() }, { deep: true })
+
+onMounted(() => {
+  // 确保 DOM 完全渲染
+  setTimeout(() => { initMap() }, 100)
+})
+
+onUnmounted(() => {
+  if (map) { map.remove(); map = null }
+})
+</script>
+
+<style scoped>
+.device-map { height: 100%; display: flex; flex-direction: column; }
+.filter-bar { margin-bottom: 12px; }
+.filter-bar :deep(.el-form-item) { margin-bottom: 0; }
+.map-wrapper { flex: 1; position: relative; border-radius: 8px; overflow: hidden; }
+.map-container { width: 100%; height: 100%; min-height: 500px; }
+
+.map-legend {
+  position: absolute; bottom: 20px; left: 20px;
+  background: white; padding: 12px 16px; border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.15); z-index: 1000;
+  font-size: 13px;
+}
+.legend-title { font-weight: bold; margin-bottom: 8px; color: #303133; }
+.legend-item { display: flex; align-items: center; margin-bottom: 4px; }
+.legend-dot {
+  width: 12px; height: 12px; border-radius: 50%;
+  margin-right: 8px; border: 2px solid white;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+}
+
+.map-stats {
+  position: absolute; top: 10px; right: 10px;
+  background: rgba(255,255,255,0.9); padding: 6px 12px;
+  border-radius: 4px; font-size: 13px; color: #606266;
+  z-index: 1000;
+}
+</style>
+
+<style>
+/* 全局样式覆盖（Leaflet 弹窗） */
+.leaflet-popup-content-wrapper { border-radius: 8px; }
+.leaflet-popup-content { margin: 12px; }
+</style>

wm-iot/src/main/java/com/water/iot/controller/DeviceController.java

@@ -49,4 +49,39 @@ public class DeviceController {
         // TODO: 实际指令通过 Kafka -> EMQX -> MQTT -> 设备
         return R.ok("指令已下发");
     }
+
+    @Operation(summary = "设备统计")
+    @GetMapping("/stats")
+    public R<List<Map<String, Object>>> stats() {
+        String sql = "SELECT status, COUNT(*) as count FROM iot_device GROUP BY status";
+        return R.ok(jdbcTemplate.queryForList(sql));
+    }
+
+    @Operation(summary = "设备地理位置")
+    @GetMapping("/locations")
+    public R<List<Map<String, Object>>> locations(@RequestParam(required = false) String deviceType,
+                                                    @RequestParam(required = false) String status) {
+        StringBuilder sql = new StringBuilder("SELECT id, device_sn as deviceCode, device_name as deviceName, device_type as deviceType, status, loc_lat as latitude, loc_lng as longitude, area as location, last_report_time as lastOnlineTime FROM iot_device WHERE loc_lat IS NOT NULL AND loc_lng IS NOT NULL");
+        if (deviceType != null && !deviceType.isEmpty()) sql.append(" AND device_type = '").append(deviceType).append("'");
+        if (status != null && !status.isEmpty()) sql.append(" AND status = '").append(status).append("'");
+        return R.ok(jdbcTemplate.queryForList(sql.toString()));
+    }
+
+    @Operation(summary = "批量操作")
+    @PostMapping("/batch")
+    public R<String> batch(@RequestBody Map<String, Object> body) {
+        List<Number> ids = (List<Number>) body.get("ids");
+        String action = (String) body.get("action");
+        if (ids == null || ids.isEmpty()) return R.ok("无设备ID");
+        String sql;
+        if ("enable".equals(action)) {
+            sql = "UPDATE iot_device SET status = 'online' WHERE id IN (" + ids.stream().map(String::valueOf).reduce((a, b) -> a + "," + b).orElse("") + ")";
+        } else if ("disable".equals(action)) {
+            sql = "UPDATE iot_device SET status = 'disabled' WHERE id IN (" + ids.stream().map(String::valueOf).reduce((a, b) -> a + "," + b).orElse("") + ")";
+        } else {
+            sql = "DELETE FROM iot_device WHERE id IN (" + ids.stream().map(String::valueOf).reduce((a, b) -> a + "," + b).orElse("") + ")";
+        }
+        jdbcTemplate.update(sql);
+        return R.ok("操作成功");
+    }
 }