优化

src/main/resources/web/src/views/equipment/WaterSupplier.vue

@@ -124,13 +124,24 @@
           </div>
           <div class="form-group">
             <label>所属片区:</label>
-            <select v-model="newDevice.areaId" required>
+            <select v-model="newDevice.areaId" @change="loadAvailableMakers" required>
+              <option value="">请选择片区</option>
               <option value="A">A区</option>
               <option value="B">B区</option>
               <option value="C">C区</option>
               <option value="D">D区</option>
             </select>
           </div>
+          <div class="form-group">
+            <label>关联制水机:</label>
+            <select v-model="newDevice.parentMakerId" :disabled="!newDevice.areaId">
+              <option value="">请选择关联制水机</option>
+              <option v-for="maker in availableMakers" :key="maker.id" :value="maker.id">
+                {{ maker.name }}
+              </option>
+            </select>
+            <p v-if="!newDevice.areaId" class="help-text">请先选择片区以加载可关联的制水机</p>
+          </div>
           <div class="form-group">
             <label>安装位置:</label>
             <input v-model="newDevice.installLocation" type="text" required>
@@ -191,11 +202,15 @@ const showAddModal = ref(false)
 const newDevice = ref({
   deviceId: '',
   deviceName: '',
-  areaId: 'A',
+  areaId: '',
+  parentMakerId: '', // 关联的制水机ID
   installLocation: '',
   deviceType: 'water_supply'
 })
 
+// 新增：可关联的制水机列表
+const availableMakers = ref<{id: string, name: string}[]>([])
+
 // 新增：删除设备相关状态
 const showDeleteModal = ref(false)
 const currentDeviceId = ref('')
@@ -249,6 +264,50 @@ const loadWaterSuppliers = async () => {
   }
 }
 
+// 加载指定片区内可用的制水机设备
+const loadAvailableMakers = async () => {
+  if (!newDevice.value.areaId) {
+    availableMakers.value = []
+    return
+  }
+
+  try {
+    const token = authStore.token
+    if (!token) {
+      router.push('/login')
+      return
+    }
+
+    // 请求该片区内的所有制水机
+    const params = new URLSearchParams();
+    params.append('areaId', newDevice.value.areaId);
+    params.append('deviceType', 'water_maker');
+
+    const queryString = params.toString();
+    const url = `/api/web/device-status/by-type${queryString ? `?${queryString}` : ''}`;
+
+    const response = await request<ResultVO<any[]>>(url, { method: 'GET' });
+
+    if (response.code === 200 && response.data && Array.isArray(response.data)) {
+      // 转换为选项格式，包含ID和位置信息
+      availableMakers.value = response.data.map((maker: any) => ({
+        id: maker.deviceId,
+        name: `${maker.deviceId} - ${maker.installLocation}`
+      }))
+    } else {
+      console.error('获取制水机列表失败:', response.message);
+      availableMakers.value = []
+    }
+  } catch (error) {
+    console.error('加载制水机列表失败:', error);
+    availableMakers.value = []
+    if ((error as Error).message.includes('401')) {
+      authStore.logout()
+      router.push('/login')
+    }
+  }
+}
+
 // 多条件过滤设备数据
 const filteredDevices = computed(() => {
   return devices.value.filter(device => {
@@ -310,7 +369,8 @@ const addDevice = async () => {
       deviceName: newDevice.value.deviceName,
       areaId: newDevice.value.areaId,
       installLocation: newDevice.value.installLocation,
-      deviceType: newDevice.value.deviceType
+      deviceType: newDevice.value.deviceType,
+      parentMakerId: newDevice.value.parentMakerId || null // 关联的制水机ID
     }
 
     const result = await request<ResultVO<any>>('/api/web/device/add', {
@@ -321,6 +381,7 @@ const addDevice = async () => {
     if (result.code === 200) {
       await loadWaterSuppliers()
       showAddModal.value = false
+      resetAddForm()
       alert('设备添加成功')
     } else {
       alert(`设备添加失败: ${result.message}`)
@@ -335,6 +396,19 @@ const addDevice = async () => {
   }
 }
 
+// 重置添加表单
+const resetAddForm = () => {
+  newDevice.value = {
+    deviceId: '',
+    deviceName: '',
+    areaId: '',
+    parentMakerId: '',
+    installLocation: '',
+    deviceType: 'water_supply'
+  }
+  availableMakers.value = []
+}
+
 // 删除设备
 const deleteDevice = async () => {
   try {
@@ -649,6 +723,13 @@ onMounted(() => {
   color: white;
 }
 
+.help-text {
+  font-size: 12px;
+  color: #8c8c8c;
+  margin-top: 4px;
+  margin-bottom: 0;
+}
+
 /* 响应式调整 */
 @media (max-width:  768px) {
   .filters {

src/main/resources/web/src/views/equipment/WaterSupplierDetail.vue

@@ -1,4 +1,3 @@
-<!-- src/views/equipment/WaterSupplierDetail.vue -->
 <template>
   <div class="water-supplier-detail-page">
     <!-- 页面标题和面包屑 -->
@@ -55,6 +54,37 @@
       </div>
     </div>
 
+    <!-- 关联的制水机信息卡片 -->
+    <div class="card detail-card" v-if="associatedMaker">
+      <h3>关联的制水机</h3>
+      <div class="detail-grid">
+        <div class="detail-item">
+          <span class="label">制水机ID:</span>
+          <span class="value">{{ associatedMaker.deviceId }}</span>
+        </div>
+        <div class="detail-item">
+          <span class="label">制水机名称:</span>
+          <span class="value">{{ associatedMaker.deviceName }}</span>
+        </div>
+        <div class="detail-item">
+          <span class="label">制水机状态:</span>
+          <span class="value">
+            <span :class="`status-tag ${associatedMaker.status}`">
+              {{ formatStatus(associatedMaker.status) }}
+            </span>
+          </span>
+        </div>
+        <div class="detail-item">
+          <span class="label">安装位置:</span>
+          <span class="value">{{ associatedMaker.installLocation }}</span>
+        </div>
+        <div class="detail-item">
+          <span class="label">所属片区:</span>
+          <span class="value">{{ associatedMaker.areaId }}</span>
+        </div>
+      </div>
+    </div>
+
     <!-- 实时数据卡片 -->
     <div class="card detail-card" v-if="deviceDetail && deviceDetail.realtimeData">
       <h3>实时数据</h3>
@@ -71,10 +101,7 @@
           <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">
@@ -119,6 +146,7 @@ interface DeviceInfo {
   status: string
   createTime?: string
   lastHeartbeatTime?: string
+  parentMakerId?: string // 关联的制水机ID
 }
 
 // 根据 WaterSupplyRealtimeData 实体类定义
@@ -142,6 +170,7 @@ const route = useRoute()
 const router = useRouter()
 const authStore = useAuthStore()
 const deviceDetail = ref<DeviceDetail | null>(null)
+const associatedMaker = ref<DeviceInfo | null>(null) // 关联的制水机信息
 const loading = ref(true)
 const error = ref('')
 
@@ -219,6 +248,11 @@ const loadDeviceDetail = async () => {
     if (result.code === 200 && result.data) {
       deviceDetail.value = result.data
       console.log('设备详情数据:', deviceDetail.value)
+
+      // 如果供水机有关联的制水机，加载制水机信息
+      if (result.data.deviceInfo.parentMakerId) {
+        await loadAssociatedMaker(result.data.deviceInfo.parentMakerId)
+      }
     } else {
       error.value = result.message || '获取设备详情失败'
     }
@@ -234,6 +268,80 @@ const loadDeviceDetail = async () => {
   }
 }
 
+// 加载指定片区内可用的制水机设备
+const loadAvailableMakers = async () => {
+  if (!newDevice.value.areaId) {
+    availableMakers.value = []
+    return
+  }
+
+  try {
+    const token = authStore.token
+    if (!token) {
+      router.push('/login')
+      return
+    }
+
+    // 请求该片区内的所有制水机
+    const params = new URLSearchParams();
+    params.append('areaId', newDevice.value.areaId);
+    params.append('deviceType', 'water_maker');
+
+    const queryString = params.toString();
+    const url = `/api/web/device-status/by-type${queryString ? `?${queryString}` : ''}`;
+
+    const response = await request<ResultVO<any[]>>(url, { method: 'GET' });
+
+    if (response.code === 200 && response.data && Array.isArray(response.data)) {
+      // 转换为选项格式，包含ID和位置信息
+      availableMakers.value = response.data.map((maker: any) => ({
+        id: maker.deviceId,
+        name: `${maker.deviceId} - ${maker.installLocation}`
+      }))
+    } else {
+      console.error('获取制水机列表失败:', response.message);
+      availableMakers.value = []
+    }
+  } catch (error) {
+    console.error('加载制水机列表失败:', error);
+    availableMakers.value = []
+    if ((error as Error).message.includes('401')) {
+      authStore.logout()
+      router.push('/login')
+    }
+  }
+}
+
+
+// 加载关联的制水机信息
+const loadAssociatedMaker = async (makerId: string) => {
+  try {
+    const token = authStore.token
+    if (!token) {
+      router.push('/login')
+      return
+    }
+
+    const result = await request<ResultVO<DeviceDetail>>(
+      `/api/web/device/${makerId}`,
+      { method: 'GET' }
+    )
+
+    if (result.code === 200 && result.data) {
+      associatedMaker.value = result.data.deviceInfo
+      console.log('关联的制水机数据:', associatedMaker.value)
+    } else {
+      console.error('获取关联制水机失败:', result.message)
+    }
+  } catch (err) {
+    console.error('加载关联制水机失败:', err)
+    if ((err as Error).message.includes('401')) {
+      authStore.logout()
+      router.push('/login')
+    }
+  }
+}
+
 // 组件挂载时加载数据
 onMounted(() => {
   if (deviceId) {