From 69cda63e9ca4de044adf16b6d1adf5afd17756eb Mon Sep 17 00:00:00 2001
From: ZHW <1941286652@qq.com>
Date: Mon, 15 Dec 2025 22:40:12 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AE=BE=E5=A4=87=E8=AF=A6=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main/resources/web/src/api/waterMaker.ts  | 101 ++
 src/main/resources/web/src/router/index.ts    |  13 +
 .../src/views/equipment/WaterMakerDetail.vue  | 916 +++++-------------
 .../views/equipment/WaterSupplierDetail.vue   | 383 ++++++++
 4 files changed, 759 insertions(+), 654 deletions(-)
 create mode 100644 src/main/resources/web/src/api/waterMaker.ts
 create mode 100644 src/main/resources/web/src/views/equipment/WaterSupplierDetail.vue

diff --git a/src/main/resources/web/src/api/waterMaker.ts b/src/main/resources/web/src/api/waterMaker.ts
new file mode 100644
index 0000000..a652bc1
--- /dev/null
+++ b/src/main/resources/web/src/api/waterMaker.ts
@@ -0,0 +1,101 @@
+// src/api/waterMaker.ts
+import { request } from '@/api/request'
+import type { ResultVO } from '@/api/types/auth'
+
+// 设备基本信息接口
+interface MachineInfo {
+  deviceId: string
+  model: string
+  area: string
+  location: string
+  installDate: string
+  status: 'online' | 'offline' | 'warning' | 'error'
+  lastOnlineTime: string
+}
+
+// 实时数据接口
+interface RealtimeData {
+  tapWaterTds: number       // 自来水TDS
+  pureWaterTds: number      // 纯净水TDS
+  temperature: number
+  pressure: number
+  flow1: number
+  flow2: number
+  updateTime: string
+}
+
+// 滤芯状态接口
+interface FilterStatus {
+  id: string
+  name: string
+  usage: number
+  remainingDays: number
+}
+
+// 历史数据记录接口
+interface HistoryRecord {
+  date: string                          // 日期
+  tapWaterTdsAvg: number                // 自来水TDS平均值
+  pureWaterTdsAvg: number               // 纯净水TDS平均值
+  mineralWaterTdsAvg: number            // 矿化水TDS平均值
+}
+
+// 维护记录接口
+interface MaintenanceRecord {
+  orderNo: string
+  maintenanceType: string
+  maintainer: string
+  maintenanceTime: string
+  status: 'completed' | 'processing' | 'pending'
+}
+
+// API服务类
+export class WaterMakerApi {
+  // 获取设备基本信息
+  static async getDeviceById(deviceId: string): Promise<ResultVO<MachineInfo>> {
+    return await request<ResultVO<MachineInfo>>(
+      `/api/web/device/${deviceId}`,
+      { method: 'GET' }
+    )
+  }
+
+  // 获取实时数据
+  static async getRealtimeData(deviceId: string): Promise<ResultVO<RealtimeData>> {
+    return await request<ResultVO<RealtimeData>>(
+      `/api/web/device/${deviceId}/realtime`,
+      { method: 'GET' }
+    )
+  }
+
+  // 获取滤芯状态
+  static async getFilterStatus(deviceId: string): Promise<ResultVO<FilterStatus[]>> {
+    return await request<ResultVO<FilterStatus[]>>(
+      `/api/web/device/${deviceId}/filter-status`,
+      { method: 'GET' }
+    )
+  }
+
+  // 获取历史数据
+  static async getHistoryData(deviceId: string, date: string): Promise<ResultVO<HistoryRecord[]>> {
+    return await request<ResultVO<HistoryRecord[]>>(
+      `/api/web/device/${deviceId}/history?date=${date}`,
+      { method: 'GET' }
+    )
+  }
+
+  // 获取维护记录
+  static async getMaintenanceRecords(deviceId: string): Promise<ResultVO<MaintenanceRecord[]>> {
+    return await request<ResultVO<MaintenanceRecord[]>>(
+      `/api/web/device/${deviceId}/maintenance-records`,
+      { method: 'GET' }
+    )
+  }
+
+  // 刷新设备数据
+  static async refreshDeviceData(deviceId: string): Promise<ResultVO<any>> {
+    return await request<ResultVO<any>>(
+      `/api/web/device/${deviceId}/refresh`,
+      { method: 'POST' }
+    )
+  }
+}
diff --git a/src/main/resources/web/src/router/index.ts b/src/main/resources/web/src/router/index.ts
index 70d20ac..a38c5ed 100644
--- a/src/main/resources/web/src/router/index.ts
+++ b/src/main/resources/web/src/router/index.ts
@@ -41,6 +41,12 @@ const router = createRouter({
                         title: '设备监控'
                     }
                 },
+                {
+                    path: '/home/equipment/water-maker/:id',
+                    name: 'WaterMakerDetail',
+                    component: () => import('@/views/equipment/WaterMakerDetail.vue'),
+                    meta: { requiresAuth: true }
+                },
                 {
                     path: 'equipment/water-maker',
                     name: 'water-maker',
@@ -49,6 +55,13 @@ const router = createRouter({
                         title: '制水设备'
                     }
                 },
+                {
+                path: '/home/equipment/water-supplier/:id',
+                name: 'WaterSupplierDetail',
+                component: () => import('@/views/equipment/WaterSupplierDetail.vue'),
+                meta: { requiresAuth: true }
+                },
+
                 {
                     path: 'equipment/water-supplier',
                     name: 'water-supplier',
diff --git a/src/main/resources/web/src/views/equipment/WaterMakerDetail.vue b/src/main/resources/web/src/views/equipment/WaterMakerDetail.vue
index 7221345..b4132ec 100644
--- a/src/main/resources/web/src/views/equipment/WaterMakerDetail.vue
+++ b/src/main/resources/web/src/views/equipment/WaterMakerDetail.vue
@@ -1,171 +1,127 @@
 <!-- src/views/equipment/WaterMakerDetail.vue -->
 <template>
-  <div class="water-machine-detail">
+  <div class="water-maker-detail-page">
     <!-- 页面标题和面包屑 -->
     <div class="page-header">
-      <h2>制水机设备详情</h2>
-      <div class="breadcrumb">校园矿化水平台 / 设备管理 / 制水机 / 设备详情</div>
+      <h2>制水机详情</h2>
+      <div class="breadcrumb">校园矿化水平台 / 设备监控 / 制水机 / 详情</div>
     </div>
 
-    <!-- 设备基本信息卡片 -->
-    <div class="card device-info-card">
-      <div class="info-header">
-        <h3 class="card-title">设备基本信息</h3>
-        <button class="btn-refresh" @click="refreshData">
-          <i class="refresh-icon">↻</i> 刷新数据
-        </button>
-      </div>
+    <!-- 返回按钮 -->
+    <div class="back-button-container">
+      <button class="btn-back" @click="goBack">← 返回制水机列表</button>
+    </div>
 
-      <div class="info-grid">
-        <div class="info-item">
-          <span class="info-label">设备ID：</span>
-          <span class="info-value">{{ machineInfo.deviceId }}</span>
+    <!-- 设备基本信息卡片 -->
+    <div class="card detail-card" v-if="deviceDetail">
+      <h3>设备基本信息</h3>
+      <div class="detail-grid">
+        <div class="detail-item">
+          <span class="label">设备ID:</span>
+          <span class="value">{{ deviceDetail.deviceInfo?.deviceId }}</span>
         </div>
-        <div class="info-item">
-          <span class="info-label">设备型号：</span>
-          <span class="info-value">{{ machineInfo.model }}</span>
+        <div class="detail-item">
+          <span class="label">设备名称:</span>
+          <span class="value">{{ deviceDetail.deviceInfo?.deviceName }}</span>
         </div>
-        <div class="info-item">
-          <span class="info-label">所属片区：</span>
-          <span class="info-value">{{ machineInfo.area }}</span>
+        <div class="detail-item">
+          <span class="label">设备类型:</span>
+          <span class="value">{{ formatDeviceType(deviceDetail.deviceInfo?.deviceType) }}</span>
         </div>
-        <div class="info-item">
-          <span class="info-label">安装位置：</span>
-          <span class="info-value">{{ machineInfo.location }}</span>
+        <div class="detail-item">
+          <span class="label">所属片区:</span>
+          <span class="value">{{ deviceDetail.deviceInfo?.areaId }}</span>
         </div>
-        <div class="info-item">
-          <span class="info-label">安装日期：</span>
-          <span class="info-value">{{ formatDate(machineInfo.installDate) }}</span>
+        <div class="detail-item">
+          <span class="label">安装位置:</span>
+          <span class="value">{{ deviceDetail.deviceInfo?.installLocation }}</span>
         </div>
-        <div class="info-item">
-          <span class="info-label">运行状态：</span>
-          <span class="info-value status-tag" :class="machineInfo.status">{{ formatStatus(machineInfo.status) }}</span>
+        <div class="detail-item">
+          <span class="label">设备状态:</span>
+          <span class="value">
+            <span :class="`status-tag ${deviceDetail.deviceInfo?.status}`">
+              {{ formatStatus(deviceDetail.deviceInfo?.status) }}
+            </span>
+          </span>
         </div>
-        <div class="info-item">
-          <span class="info-label">最后在线时间：</span>
-          <span class="info-value">{{ formatDate(machineInfo.lastOnlineTime) }}</span>
+        <div class="detail-item">
+          <span class="label">创建时间:</span>
+          <span class="value">{{ formatDate(deviceDetail.deviceInfo?.createTime) }}</span>
+        </div>
+        <div class="detail-item">
+          <span class="label">最后心跳时间:</span>
+          <span class="value">{{ formatDate(deviceDetail.deviceInfo?.lastHeartbeatTime) }}</span>
         </div>
       </div>
     </div>
 
-    <!-- 设备状态和数据 -->
-    <div class="left-column">
-      <!-- 实时监测数据 -->
-      <div class="card">
-        <h3 class="card-title">实时监测数据</h3>
-        <div class="realtime-data">
-          <!-- 自来水TDS -->
-          <div class="data-item">
-            <div class="data-label">自来水TDS</div>
-            <div class="data-value">{{ realtimeData.tapWaterTds }} ppm</div>
-            <div class="data-status" :class="getTdsStatus(realtimeData.tapWaterTds, 'tap')"></div>
-          </div>
-          <!-- 纯净水TDS -->
-          <div class="data-item">
-            <div class="data-label">纯净水TDS</div>
-            <div class="data-value">{{ realtimeData.pureWaterTds }} ppm</div>
-            <div class="data-status" :class="getTdsStatus(realtimeData.pureWaterTds, 'pure')"></div>
-          </div>
-          <div class="data-item">
-            <div class="data-label">水温</div>
-            <div class="data-value">{{ realtimeData.temperature }} °C</div>
-          </div>
-          <div class="data-item">
-            <div class="data-label">出水压力</div>
-            <div class="data-value">{{ realtimeData.pressure }} MPa</div>
-          </div>
-          <div class="data-item">
-            <div class="data-label">流量计1</div>
-            <div class="data-value">{{ realtimeData.flow1 }} L/min</div>
-          </div>
-          <div class="data-item">
-            <div class="data-label">流量计2</div>
-            <div class="data-value">{{ realtimeData.flow2 }} L/min</div>
-          </div>
+    <!-- 实时数据卡片 -->
+    <div class="card detail-card" v-if="deviceDetail && deviceDetail.realtimeData">
+      <h3>实时数据</h3>
+      <div class="detail-grid">
+        <div class="detail-item">
+          <span class="label">原水TDS:</span>
+          <span class="value">{{ deviceDetail.realtimeData?.tdsValue1 || '-' }} ppm</span>
         </div>
-      </div>
-
-      <!-- 滤芯状态 -->
-      <div class="card">
-        <h3 class="card-title">滤芯状态</h3>
-        <div class="filter-status">
-          <div class="filter-item" v-for="filter in filterStatus" :key="filter.id">
-            <div class="filter-name">{{ filter.name }}</div>
-            <div class="filter-progress">
-              <div class="progress-bar" :style="{ width: filter.usage + '%' }" :class="getFilterStatusClass(filter.usage)"></div>
-            </div>
-            <div class="filter-info">
-              <span class="usage">{{ filter.usage }}%</span>
-              <span class="remaining">剩余{{ filter.remainingDays }}天</span>
-            </div>
-          </div>
+        <div class="detail-item">
+          <span class="label">纯水TDS:</span>
+          <span class="value">{{ deviceDetail.realtimeData?.tdsValue2 || '-' }} ppm</span>
         </div>
-      </div>
-    </div>
-
-    <!-- 历史数据记录 -->
-    <div class="card">
-      <div class="table-header">
-        <h3 class="card-title">历史数据记录</h3>
-        <div class="table-filter">
-          <label>日期筛选：</label>
-          <input type="date" v-model="historyDate" @change="fetchHistoryData">
+        <div class="detail-item">
+          <span class="label">矿化水TDS:</span>
+          <span class="value">{{ deviceDetail.realtimeData?.tdsValue3 || '-' }} ppm</span>
+        </div>
+        <div class="detail-item">
+          <span class="label">流量1:</span>
+          <span class="value">{{ deviceDetail.realtimeData?.waterFlow1 || '-' }} m³/h</span>
+        </div>
+        <div class="detail-item">
+          <span class="label">流量2:</span>
+          <span class="value">{{ deviceDetail.realtimeData?.waterFlow2 || '-' }} m³/h</span>
+        </div>
+        <div class="detail-item">
+          <span class="label">水压:</span>
+          <span class="value">{{ deviceDetail.realtimeData?.waterPress || '-' }} MPa</span>
+        </div>
+        <div class="detail-item">
+          <span class="label">滤芯寿命:</span>
+          <span class="value">{{ deviceDetail.realtimeData?.filterLife || '-' }}%</span>
+        </div>
+        <div class="detail-item">
+          <span class="label">漏水检测:</span>
+          <span class="value">
+            <span :class="`status-tag ${deviceDetail.realtimeData?.leakage ? 'warning' : 'normal'}`">
+              {{ deviceDetail.realtimeData?.leakage ? '检测到漏水' : '正常' }}
+            </span>
+          </span>
+        </div>
+        <div class="detail-item">
+          <span class="label">水质:</span>
+          <span class="value">{{ deviceDetail.realtimeData?.waterQuality || '-' }}</span>
+        </div>
+        <div class="detail-item">
+          <span class="label">运行状态:</span>
+          <span class="value">
+            <span :class="`status-tag ${deviceDetail.realtimeData?.status || 'normal'}`">
+              {{ formatRealtimeStatus(deviceDetail.realtimeData?.status) }}
+            </span>
+          </span>
+        </div>
+        <div class="detail-item">
+          <span class="label">数据记录时间:</span>
+          <span class="value">{{ formatDate(deviceDetail.realtimeData?.recordTime) }}</span>
         </div>
       </div>
+    </div>
 
-      <table class="history-table">
-        <thead>
-          <tr>
-            <th>日期</th>
-            <th>自来水TDS平均值 (ppm)</th>
-            <th>纯净水TDS平均值 (ppm)</th>
-            <th>矿化水TDS平均值 (ppm)</th>
-          </tr>
-        </thead>
-        <tbody>
-            <tr v-if="historyData.length > 0">
-              <td>{{ historyData[0]?.date }}</td>
-              <td>{{ historyData[0]?.tapWaterTdsAvg }}</td>
-              <td>{{ historyData[0]?.pureWaterTdsAvg }}</td>
-              <td>{{ historyData[0]?.mineralWaterTdsAvg }}</td>
-            </tr>
-          <tr v-if="historyData.length === 0">
-            <td colspan="4" class="no-data">暂无历史数据记录</td>
-          </tr>
-        </tbody>
-      </table>
+    <!-- 加载中提示 -->
+    <div v-if="loading" class="loading">
+      正在加载设备详情...
     </div>
 
-    <!-- 维护记录 -->
-    <div class="card">
-      <h3 class="card-title">维护记录</h3>
-      <table class="maintenance-table">
-        <thead>
-          <tr>
-            <th>工单编号</th>
-            <th>维护类型</th>
-            <th>维护人员</th>
-            <th>维护时间</th>
-            <th>状态</th>
-            <th>操作</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="record in maintenanceRecords" :key="record.orderNo">
-            <td>{{ record.orderNo }}</td>
-            <td>{{ record.maintenanceType }}</td>
-            <td>{{ record.maintainer }}</td>
-            <td>{{ formatDate(record.maintenanceTime) }}</td>
-            <td><span class="status-tag small" :class="record.status">{{ formatStatus(record.status) }}</span></td>
-            <td>
-              <button class="btn-view" @click="viewMaintenanceDetail(record.orderNo)">查看详情</button>
-            </td>
-          </tr>
-          <tr v-if="maintenanceRecords.length === 0">
-            <td colspan="6" class="no-data">暂无维护记录</td>
-          </tr>
-        </tbody>
-      </table>
+    <!-- 错误提示 -->
+    <div v-if="error" class="error-message">
+      {{ error }}
     </div>
   </div>
 </template>
@@ -173,304 +129,156 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { WaterMakerApi } from '@/api/waterMaker'
-
-// 设备状态类型
-type DeviceStatus = 'online' | 'offline' | 'warning' | 'error'
+import { useAuthStore } from '@/stores/auth'
+import { request } from '@/api/request'
+import type { ResultVO } from '@/api/types/auth'
 
-// 制水机基本信息接口
-interface MachineInfo {
+// 类型定义 - 根据后端实体类调整
+interface DeviceInfo {
   deviceId: string
-  model: string
-  area: string
-  location: string
-  installDate: string
-  status: DeviceStatus
-  lastOnlineTime: string
-}
-
-// 实时数据接口
-interface RealtimeData {
-  tapWaterTds: number       // 自来水TDS
-  pureWaterTds: number      // 纯净水TDS
-  temperature: number
-  pressure: number
-  flow1: number
-  flow2: number
-  updateTime: string
-}
-
-// 滤芯状态接口
-interface FilterStatus {
-  id: string
-  name: string
-  usage: number
-  remainingDays: number
-}
-
-// 历史数据记录接口
-interface HistoryRecord {
-  date: string                          // 日期
-  tapWaterTdsAvg: number                // 自来水TDS平均值
-  pureWaterTdsAvg: number               // 纯净水TDS平均值
-  mineralWaterTdsAvg: number            // 矿化水TDS平均值
-}
-
-// 维护记录接口
-interface MaintenanceRecord {
-  orderNo: string
-  maintenanceType: string
-  maintainer: string
-  maintenanceTime: string
-  status: 'completed' | 'processing' | 'pending'
-}
-
-// 路由和响应式数据
+  deviceName: string
+  deviceType: string
+  areaId: string
+  installLocation: string
+  status: string
+  createTime?: string
+  lastHeartbeatTime?: string
+}
+
+// 根据 WaterMakerRealtimeData 实体类定义
+interface WaterMakerRealtimeData {
+  tdsValue1?: number  // 原水TDS
+  tdsValue2?: number  // 纯水TDS
+  tdsValue3?: number  // 矿化水TDS
+  waterFlow1?: number // 流量1
+  waterFlow2?: number // 流量2
+  waterPress?: number // 水压
+  filterLife?: number // 滤芯寿命
+  leakage?: boolean   // 漏水检测
+  waterQuality?: string // 水质
+  status?: string     // 设备状态
+  recordTime?: string // 记录时间
+  createdTime?: string // 创建时间
+}
+
+interface DeviceDetail {
+  deviceInfo: DeviceInfo
+  realtimeData?: WaterMakerRealtimeData
+}
+
+// 响应式数据
 const route = useRoute()
 const router = useRouter()
-const historyDate = ref('')
-
-// 严格类型处理：确保deviceId是string类型
-const deviceId: string = (() => {
-  const paramId = route.params.id as string | undefined
-  return paramId ?? 'WM-2023-001'
-})()
-
-// 设备信息数据
-const machineInfo = ref<MachineInfo>({
-  deviceId: deviceId,
-  model: 'WM-RO-500G',
-  area: '校区',
-  location: '第一教学楼一楼大厅',
-  installDate: '2023-06-15',
-  status: 'online',
-  lastOnlineTime: new Date().toISOString()
-})
-
-// 实时数据
-const realtimeData = ref<RealtimeData>({
-  tapWaterTds: 186,         // 自来水TDS
-  pureWaterTds: 12,         // 纯净水TDS
-  temperature: 25.6,
-  pressure: 0.45,
-  flow1: 1.2,
-  flow2: 8.1,
-  updateTime: new Date().toISOString()
-})
-
-// 滤芯状态
-const filterStatus = ref<FilterStatus[]>([
-  { id: 'f1', name: '滤芯1', usage: 65, remainingDays: 45 },
-  { id: 'f2', name: '滤芯2', usage: 42, remainingDays: 90 },
-  { id: 'f3', name: '滤芯3', usage: 30, remainingDays: 120 }
-])
-
-// 历史数据
-const historyData = ref<HistoryRecord[]>([])
-
-// 维护记录
-const maintenanceRecords = ref<MaintenanceRecord[]>([
-  {
-    orderNo: 'ORD-20231015-002',
-    maintenanceType: '滤芯更换',
-    maintainer: '张三',
-    maintenanceTime: '2023-10-15 14:30:00',
-    status: 'completed'
-  },
-  {
-    orderNo: 'ORD-20230920-015',
-    maintenanceType: '常规检修',
-    maintainer: '李四',
-    maintenanceTime: '2023-09-20 09:15:00',
-    status: 'completed'
-  }
-])
-
-// 初始化页面数据
-onMounted(async () => {
-  // 设置默认日期为今天
-  const today = new Date().toISOString().substring(0, 10)
-  historyDate.value = today
-
-  // 并行加载所有数据
-  await Promise.all([
-    loadDeviceBasicInfo(),
-    loadRealtimeData(),
-    loadFilterStatus(),
-    fetchHistoryData(),
-    loadMaintenanceRecords()
-  ])
-})
-
-// 加载设备基本信息
-const loadDeviceBasicInfo = async () => {
-  try {
-    const result = await WaterMakerApi.getDeviceById(deviceId)
-    if (result.code === 200) {
-      const data = result.data
-      machineInfo.value = {
-        deviceId: data.deviceId,
-        model: data.model || '未知型号',
-        area: data.areaId,
-        location: data.installLocation,
-        installDate: data.installDate,
-        status: data.status,
-        lastOnlineTime: data.lastHeartbeatTime
-      }
-    }
-  } catch (error) {
-    console.error('加载设备基本信息失败:', error)
+const authStore = useAuthStore()
+const deviceDetail = ref<DeviceDetail | null>(null)
+const loading = ref(true)
+const error = ref('')
+
+// 获取设备ID
+const deviceId = route.params.id as string
+
+// 格式化设备类型
+const formatDeviceType = (type: string | undefined): string => {
+  if (!type) return '-'
+  const typeMap: Record<string, string> = {
+    'water_maker': '制水机',
+    'water_supply': '供水机'
   }
+  return typeMap[type] || type
 }
 
-// 加载实时数据
-const loadRealtimeData = async () => {
-  try {
-    const result = await WaterMakerApi.getRealtimeData(deviceId)
-    if (result.code === 200) {
-      const data = result.data
-      realtimeData.value = {
-        tapWaterTds: data.rawWaterTds || 0,
-        pureWaterTds: data.pureWaterTds || 0,
-        temperature: data.temperature || 0,
-        pressure: data.waterPressure || 0,
-        flow1: data.flowRate1 || 0,
-        flow2: data.flowRate2 || 0,
-        updateTime: new Date().toISOString()
-      }
-    }
-  } catch (error) {
-    console.error('加载实时数据失败:', error)
-  }
-}
-
-// 加载滤芯状态
-const loadFilterStatus = async () => {
-  try {
-    const result = await WaterMakerApi.getFilterStatus(deviceId)
-    if (result.code === 200) {
-      filterStatus.value = result.data.map((item: any) => ({
-        id: item.filterId,
-        name: item.filterName,
-        usage: item.usagePercentage,
-        remainingDays: item.remainingDays
-      }))
-    }
-  } catch (error) {
-    console.error('加载滤芯状态失败:', error)
-  }
-}
-
-// 获取历史数据
-const fetchHistoryData = async () => {
-  try {
-    const result = await WaterMakerApi.getHistoryData(deviceId, historyDate.value)
-    if (result.code === 200) {
-      historyData.value = result.data.map((item: any) => ({
-        date: item.statDate,
-        tapWaterTdsAvg: item.rawWaterTdsAvg,
-        pureWaterTdsAvg: item.pureWaterTdsAvg,
-        mineralWaterTdsAvg: item.mineralWaterTdsAvg
-      }))
-    }
-  } catch (error) {
-    console.error('获取历史数据失败:', error)
-  }
-}
-
-// 加载维护记录
-const loadMaintenanceRecords = async () => {
-  try {
-    const result = await WaterMakerApi.getMaintenanceRecords(deviceId)
-    if (result.code === 200) {
-      maintenanceRecords.value = result.data.map((item: any) => ({
-        orderNo: item.orderNo,
-        maintenanceType: item.type,
-        maintainer: item.maintainer,
-        maintenanceTime: item.maintenanceTime,
-        status: item.status
-      }))
-    }
-  } catch (error) {
-    console.error('加载维护记录失败:', error)
+// 格式化设备状态
+const formatStatus = (status: string | undefined): string => {
+  if (!status) return '-'
+  const statusMap: Record<string, string> = {
+    'online': '在线',
+    'offline': '离线',
+    'fault': '故障',
+    'warning': '警告'
   }
+  return statusMap[status] || status
 }
 
-// 格式化状态显示
-const formatStatus = (status: string): string => {
+// 格式化实时数据状态
+const formatRealtimeStatus = (status: string | undefined): string => {
+  if (!status) return '正常'
   const statusMap: Record<string, string> = {
-    online: '在线',
-    offline: '离线',
-    warning: '警告',
-    error: '故障',
-    completed: '已完成',
-    processing: '处理中',
-    pending: '待处理'
+    'normal': '正常',
+    'warning': '警告',
+    'error': '故障'
   }
   return statusMap[status] || status
 }
 
 // 格式化日期
-const formatDate = (dateString?: string): string => {
+const formatDate = (dateString: string | undefined): string => {
   if (!dateString) return '-'
   try {
     const date = new Date(dateString)
-    return isNaN(date.getTime()) ? '-' : date.toLocaleString('zh-CN')
+    return date.toLocaleString('zh-CN')
   } catch {
     return '-'
   }
 }
 
-// 获取TDS状态
-const getTdsStatus = (tds: number, type: 'tap' | 'pure'): string => {
-  if (type === 'pure') {
-    // 纯净水TDS判断
-    if (tds < 10) return 'excellent'
-    if (tds < 20) return 'good'
-    return 'warning'
-  } else {
-    // 自来水TDS判断
-    if (tds < 200) return 'good'
-    if (tds < 300) return 'warning'
-    return 'error'
-  }
-}
-
-// 获取滤芯状态类名
-const getFilterStatusClass = (usage: number) => {
-  if (usage < 70) return 'normal'
-  if (usage < 90) return 'warning'
-  return 'error'
+// 返回上一页
+const goBack = () => {
+  router.go(-1)
 }
 
-// 刷新数据
-const refreshData = async () => {
+// 加载设备详情
+const loadDeviceDetail = async () => {
   try {
-    const result = await WaterMakerApi.refreshDeviceData(deviceId)
-    if (result.code === 200) {
-      // 刷新所有数据
-      await Promise.all([
-        loadRealtimeData(),
-        loadFilterStatus()
-      ])
+    loading.value = true
+    error.value = ''
+
+    // 检查token
+    const token = authStore.token
+    if (!token) {
+      router.push('/login')
+      return
+    }
+
+    // 请求设备详情接口
+    const result = await request<ResultVO<DeviceDetail>>(
+        `/api/web/device/${deviceId}`,
+        { method: 'GET' }
+    )
+
+    if (result.code === 200 && result.data) {
+      deviceDetail.value = result.data
+      console.log('设备详情数据:', deviceDetail.value)
+    } else {
+      error.value = result.message || '获取设备详情失败'
     }
-  } catch (error) {
-    console.error('刷新数据失败:', error)
+  } catch (err) {
+    console.error('加载设备详情失败:', err)
+    error.value = '加载设备详情失败'
+    if ((err as Error).message.includes('401')) {
+      authStore.logout()
+      router.push('/login')
+    }
+  } finally {
+    loading.value = false
   }
 }
 
-// 查看维护详情
-const viewMaintenanceDetail = (orderNo: string) => {
-  router.push(`/home/order/detail/${orderNo}`)
-}
+// 组件挂载时加载数据
+onMounted(() => {
+  if (deviceId) {
+    loadDeviceDetail()
+  } else {
+    error.value = '无效的设备ID'
+    loading.value = false
+  }
+})
 </script>
 
 <style scoped>
-.water-machine-detail {
+.water-maker-detail-page {
   padding: 20px;
 }
 
-/* 页面头部样式 */
 .page-header {
   margin-bottom: 24px;
 }
@@ -487,76 +295,80 @@ const viewMaintenanceDetail = (orderNo: string) => {
   font-size: 14px;
 }
 
-/* 信息卡片样式 */
-.info-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 16px;
+.back-button-container {
+  margin-bottom: 20px;
 }
 
-.card-title {
-  font-size: 16px;
-  font-weight: 600;
+.btn-back {
+  background: #f0f0f0;
   color: #333;
-  margin: 0 0 16px 0;
-}
-
-.btn-refresh {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 6px 12px;
-  background-color: #f8f9fa;
-  border: 1px solid #ddd;
+  border: none;
+  padding: 8px 16px;
   border-radius: 4px;
   cursor: pointer;
   font-size: 14px;
-  transition: background-color 0.3s;
+  transition: background 0.3s;
 }
 
-.btn-refresh:hover {
-  background-color: #e9ecef;
+.btn-back:hover {
+  background: #e0e0e0;
 }
 
-.refresh-icon {
-  font-size: 16px;
+.detail-card {
+  margin-bottom: 24px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  padding: 20px;
 }
 
-/* 信息网格样式 */
-.info-grid {
+.detail-card h3 {
+  margin-top: 0;
+  margin-bottom: 20px;
+  font-size: 18px;
+  color: #333;
+  border-bottom: 1px solid #eee;
+  padding-bottom: 10px;
+}
+
+.detail-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
   gap: 16px;
 }
 
-.info-item {
+.detail-item {
   display: flex;
   flex-direction: column;
+  min-height: 60px;
+  padding: 8px 0;
 }
 
-.info-label {
-  font-size: 14px;
+.label {
+  font-weight: 500;
   color: #666;
   margin-bottom: 4px;
+  font-size: 14px;
 }
 
-.info-value {
-  font-size: 15px;
+.value {
+  font-size: 16px;
   color: #333;
-  font-weight: 500;
+  min-height: 24px;
 }
 
-/* 状态标签样式 */
 .status-tag {
   display: inline-block;
   padding: 4px 8px;
   border-radius: 4px;
   font-size: 12px;
   font-weight: 500;
+  min-width: 60px;
+  text-align: center;
 }
 
-.status-tag.online {
+.status-tag.online,
+.status-tag.normal {
   background-color: #e6f7ee;
   color: #00875a;
 }
@@ -571,234 +383,30 @@ const viewMaintenanceDetail = (orderNo: string) => {
   color: #d48806;
 }
 
+.status-tag.fault,
 .status-tag.error {
   background-color: #ffebe6;
   color: #cf1322;
 }
 
-.status-tag.completed {
-  background-color: #e6f7ee;
-  color: #00875a;
-}
-
-.status-tag.processing {
-  background-color: #e6f7ff;
-  color: #1890ff;
-}
-
-.status-tag.pending {
-  background-color: #fff7e6;
-  color: #d48806;
-}
-
-.status-tag.small {
-  padding: 2px 6px;
-  font-size: 11px;
-}
-
-/* 左侧列样式 */
-.left-column {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-  margin-bottom: 20px;
-}
-
-/* 实时数据样式 */
-.realtime-data {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 16px;
-}
-
-.data-item {
-  background-color: #f8f9fa;
-  padding: 16px;
-  border-radius: 6px;
-  text-align: center;
-}
-
-.data-label {
-  font-size: 14px;
-  color: #666;
-  margin-bottom: 8px;
-}
-
-.data-value {
-  font-size: 22px;
-  font-weight: 600;
-  color: #333;
-  margin-bottom: 4px;
-}
-
-.data-status {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  margin: 0 auto;
-}
-
-.data-status.excellent {
-  background-color: #52c41a;
-}
-
-.data-status.good {
-  background-color: #1890ff;
-}
-
-.data-status.warning {
-  background-color: #faad14;
-}
-
-.data-status.error {
-  background-color: #ff4d4f;
-}
-
-/* 滤芯状态样式 */
-.filter-status {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.filter-item {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.filter-name {
-  font-size: 14px;
-  color: #333;
-}
-
-.filter-progress {
-  height: 8px;
-  background-color: #f0f0f0;
-  border-radius: 4px;
-  overflow: hidden;
-}
-
-.progress-bar {
-  height: 100%;
-  transition: width 0.3s;
-}
-
-.progress-bar.normal {
-  background-color: #52c41a;
-}
-
-.progress-bar.warning {
-  background-color: #faad14;
-}
-
-.progress-bar.error {
-  background-color: #ff4d4f;
-}
-
-.filter-info {
-  display: flex;
-  justify-content: space-between;
-  font-size: 12px;
-  color: #666;
-}
-
-/* 表格样式 */
-.table-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 16px;
-}
-
-.table-filter {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.table-filter input {
-  padding: 6px 10px;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  font-size: 14px;
-}
-
-.history-table, .maintenance-table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.history-table th, .history-table td,
-.maintenance-table th, .maintenance-table td {
-  padding: 12px 16px;
-  text-align: left;
-  border-bottom: 1px solid #f0f0f0;
-}
-
-.history-table th, .maintenance-table th {
-  background-color: #f8f9fa;
-  font-weight: 600;
-  color: #4e5969;
-  font-size: 14px;
-}
-
-.history-table tbody tr:hover,
-.maintenance-table tbody tr:hover {
-  background-color: #f8f9fa;
-}
-
-.no-data {
+.loading, .error-message {
   text-align: center;
   padding: 40px 0;
-  color: #8c8c8c;
-}
-
-/* 按钮样式 */
-.btn-view {
-  padding: 4px 8px;
-  border-radius: 4px;
-  font-size: 12px;
-  cursor: pointer;
-  border: none;
-  transition: opacity 0.3s;
-  background-color: #e6f7ff;
-  color: #1890ff;
+  font-size: 16px;
 }
 
-.btn-view:hover {
-  opacity: 0.9;
+.error-message {
+  color: #ff4d4f;
 }
 
-/* 响应式调整 */
+/* 响应式设计 */
 @media (max-width: 768px) {
-  .info-grid {
-    grid-template-columns: 1fr 1fr;
-  }
-
-  .realtime-data {
-    grid-template-columns: 1fr;
-  }
-
-  .table-header {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 12px;
-  }
-}
-
-@media (max-width: 480px) {
-  .info-grid {
+  .detail-grid {
     grid-template-columns: 1fr;
   }
 
-  .history-table, .maintenance-table {
-    font-size: 12px;
-  }
-
-  .history-table th, .history-table td,
-  .maintenance-table th, .maintenance-table td {
-    padding: 8px 6px;
+  .water-maker-detail-page {
+    padding: 16px;
   }
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/main/resources/web/src/views/equipment/WaterSupplierDetail.vue b/src/main/resources/web/src/views/equipment/WaterSupplierDetail.vue
new file mode 100644
index 0000000..42baa37
--- /dev/null
+++ b/src/main/resources/web/src/views/equipment/WaterSupplierDetail.vue
@@ -0,0 +1,383 @@
+<!-- src/views/equipment/WaterSupplierDetail.vue -->
+<template>
+  <div class="water-supplier-detail-page">
+    <!-- 页面标题和面包屑 -->
+    <div class="page-header">
+      <h2>供水机详情</h2>
+      <div class="breadcrumb">校园矿化水平台 / 设备监控 / 供水机 / 详情</div>
+    </div>
+
+    <!-- 返回按钮 -->
+    <div class="back-button-container">
+      <button class="btn-back" @click="goBack">← 返回供水机列表</button>
+    </div>
+
+    <!-- 设备基本信息卡片 -->
+    <div class="card detail-card" v-if="deviceDetail">
+      <h3>设备基本信息</h3>
+      <div class="detail-grid">
+        <div class="detail-item">
+          <span class="label">设备ID:</span>
+          <span class="value">{{ deviceDetail.deviceInfo?.deviceId }}</span>
+        </div>
+        <div class="detail-item">
+          <span class="label">设备名称:</span>
+          <span class="value">{{ deviceDetail.deviceInfo?.deviceName }}</span>
+        </div>
+        <div class="detail-item">
+          <span class="label">设备类型:</span>
+          <span class="value">{{ formatDeviceType(deviceDetail.deviceInfo?.deviceType) }}</span>
+        </div>
+        <div class="detail-item">
+          <span class="label">所属片区:</span>
+          <span class="value">{{ deviceDetail.deviceInfo?.areaId }}</span>
+        </div>
+        <div class="detail-item">
+          <span class="label">安装位置:</span>
+          <span class="value">{{ deviceDetail.deviceInfo?.installLocation }}</span>
+        </div>
+        <div class="detail-item">
+          <span class="label">设备状态:</span>
+          <span class="value">
+            <span :class="`status-tag ${deviceDetail.deviceInfo?.status}`">
+              {{ formatStatus(deviceDetail.deviceInfo?.status) }}
+            </span>
+          </span>
+        </div>
+        <div class="detail-item">
+          <span class="label">创建时间:</span>
+          <span class="value">{{ formatDate(deviceDetail.deviceInfo?.createTime) }}</span>
+        </div>
+        <div class="detail-item">
+          <span class="label">最后心跳时间:</span>
+          <span class="value">{{ formatDate(deviceDetail.deviceInfo?.lastHeartbeatTime) }}</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 实时数据卡片 -->
+    <div class="card detail-card" v-if="deviceDetail && deviceDetail.realtimeData">
+      <h3>实时数据</h3>
+      <div class="detail-grid">
+        <div class="detail-item">
+          <span class="label">水压:</span>
+          <span class="value">{{ deviceDetail.realtimeData?.waterPress || '-' }} MPa</span>
+        </div>
+        <div class="detail-item">
+          <span class="label">流量:</span>
+          <span class="value">{{ deviceDetail.realtimeData?.waterFlow || '-' }} m³/h</span>
+        </div>
+        <div class="detail-item">
+          <span class="label">温度:</span>
+          <span class="value">{{ deviceDetail.realtimeData?.temperature || '-' }} °C</span>
+        </div>
+        <div class="detail-item">
+          <span class="label">水质(TDS):</span>
+          <span class="value">{{ deviceDetail.realtimeData?.tds || '-' }} ppm</span>
+        </div>
+        <div class="detail-item">
+          <span class="label">运行状态:</span>
+          <span class="value">
+            <span :class="`status-tag ${deviceDetail.realtimeData?.status || 'normal'}`">
+              {{ formatRunningStatus(deviceDetail.realtimeData?.status) }}
+            </span>
+          </span>
+        </div>
+        <div class="detail-item">
+          <span class="label">数据记录时间:</span>
+          <span class="value">{{ formatDate(deviceDetail.realtimeData?.timestamp) }}</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 加载中提示 -->
+    <div v-if="loading" class="loading">
+      正在加载设备详情...
+    </div>
+
+    <!-- 错误提示 -->
+    <div v-if="error" class="error-message">
+      {{ error }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useAuthStore } from '@/stores/auth'
+import { request } from '@/api/request'
+import type { ResultVO } from '@/api/types/auth'
+
+// 类型定义 - 根据后端实体类调整
+interface DeviceInfo {
+  deviceId: string
+  deviceName: string
+  deviceType: string
+  areaId: string
+  installLocation: string
+  status: string
+  createTime?: string
+  lastHeartbeatTime?: string
+}
+
+// 根据 WaterSupplyRealtimeData 实体类定义
+interface WaterSupplyRealtimeData {
+  waterFlow?: number // 流量
+  waterPress?: number // 水压
+  waterLevel?: number // 水位
+  temperature?: number // 温度
+  status?: string     // 设备状态
+  timestamp?: string // 记录时间
+  createdTime?: string // 创建时间
+}
+
+interface DeviceDetail {
+  deviceInfo: DeviceInfo
+  realtimeData?: WaterSupplyRealtimeData
+}
+
+// 响应式数据
+const route = useRoute()
+const router = useRouter()
+const authStore = useAuthStore()
+const deviceDetail = ref<DeviceDetail | null>(null)
+const loading = ref(true)
+const error = ref('')
+
+// 获取设备ID
+const deviceId = route.params.id as string
+
+// 格式化设备类型
+const formatDeviceType = (type: string | undefined): string => {
+  if (!type) return '-'
+  const typeMap: Record<string, string> = {
+    'water_maker': '制水机',
+    'water_supply': '供水机'
+  }
+  return typeMap[type] || type
+}
+
+// 格式化设备状态
+const formatStatus = (status: string | undefined): string => {
+  if (!status) return '-'
+  const statusMap: Record<string, string> = {
+    'online': '在线',
+    'offline': '离线',
+    'fault': '故障',
+    'warning': '警告'
+  }
+  return statusMap[status] || status
+}
+
+// 格式化运行状态
+const formatRunningStatus = (status: string | undefined): string => {
+  if (!status) return '正常'
+  const statusMap: Record<string, string> = {
+    'normal': '正常',
+    'warning': '警告',
+    'error': '故障'
+  }
+  return statusMap[status] || status
+}
+
+// 格式化日期
+const formatDate = (dateString: string | undefined): string => {
+  if (!dateString) return '-'
+  try {
+    const date = new Date(dateString)
+    return date.toLocaleString('zh-CN')
+  } catch {
+    return '-'
+  }
+}
+
+// 返回上一页
+const goBack = () => {
+  router.go(-1)
+}
+
+// 加载设备详情
+const loadDeviceDetail = async () => {
+  try {
+    loading.value = true
+    error.value = ''
+
+    // 检查token
+    const token = authStore.token
+    if (!token) {
+      router.push('/login')
+      return
+    }
+
+    // 请求设备详情接口
+    const result = await request<ResultVO<DeviceDetail>>(
+        `/api/web/device/${deviceId}`,
+        { method: 'GET' }
+    )
+
+    if (result.code === 200 && result.data) {
+      deviceDetail.value = result.data
+      console.log('设备详情数据:', deviceDetail.value)
+    } else {
+      error.value = result.message || '获取设备详情失败'
+    }
+  } catch (err) {
+    console.error('加载设备详情失败:', err)
+    error.value = '加载设备详情失败'
+    if ((err as Error).message.includes('401')) {
+      authStore.logout()
+      router.push('/login')
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+// 组件挂载时加载数据
+onMounted(() => {
+  if (deviceId) {
+    loadDeviceDetail()
+  } else {
+    error.value = '无效的设备ID'
+    loading.value = false
+  }
+})
+</script>
+
+<style scoped>
+.water-supplier-detail-page {
+  padding: 20px;
+}
+
+.page-header {
+  margin-bottom: 24px;
+}
+
+.page-header h2 {
+  font-size: 24px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 8px;
+}
+
+.breadcrumb {
+  color: #666;
+  font-size: 14px;
+}
+
+.back-button-container {
+  margin-bottom: 20px;
+}
+
+.btn-back {
+  background: #f0f0f0;
+  color: #333;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: background 0.3s;
+}
+
+.btn-back:hover {
+  background: #e0e0e0;
+}
+
+.detail-card {
+  margin-bottom: 24px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  padding: 20px;
+}
+
+.detail-card h3 {
+  margin-top: 0;
+  margin-bottom: 20px;
+  font-size: 18px;
+  color: #333;
+  border-bottom: 1px solid #eee;
+  padding-bottom: 10px;
+}
+
+.detail-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 16px;
+}
+
+.detail-item {
+  display: flex;
+  flex-direction: column;
+  min-height: 60px;
+  padding: 8px 0;
+}
+
+.label {
+  font-weight: 500;
+  color: #666;
+  margin-bottom: 4px;
+  font-size: 14px;
+}
+
+.value {
+  font-size: 16px;
+  color: #333;
+  min-height: 24px;
+}
+
+.status-tag {
+  display: inline-block;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 500;
+  min-width: 60px;
+  text-align: center;
+}
+
+.status-tag.online,
+.status-tag.normal {
+  background-color: #e6f7ee;
+  color: #00875a;
+}
+
+.status-tag.offline {
+  background-color: #f5f5f5;
+  color: #8c8c8c;
+}
+
+.status-tag.warning {
+  background-color: #fff7e6;
+  color: #d48806;
+}
+
+.status-tag.fault,
+.status-tag.error {
+  background-color: #ffebe6;
+  color: #cf1322;
+}
+
+.loading, .error-message {
+  text-align: center;
+  padding: 40px 0;
+  font-size: 16px;
+}
+
+.error-message {
+  color: #ff4d4f;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .detail-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .water-supplier-detail-page {
+    padding: 16px;
+  }
+}
+</style>
-- 
2.34.1