From c630470aa18bc849be9f5b91ab38492c75b62a99 Mon Sep 17 00:00:00 2001
From: ZHW <1941286652@qq.com>
Date: Tue, 30 Dec 2025 15:01:09 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E7=89=87=E5=8C=BA=E9=83=A8=E5=88=86?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../com/campus/water/service/AreaService.java |  30 ++-
 .../resources/web/src/views/area/Campus.vue   | 146 +++++++++++----
 .../resources/web/src/views/area/Urban.vue    |  10 -
 .../web/src/views/equipment/WaterMaker.vue    | 173 ++++++++++--------
 .../web/src/views/equipment/WaterSupplier.vue | 139 ++++++++------
 .../web/src/views/personnel/Admin.vue         | 152 +++++++++++++--
 .../src/views/personnel/MaintenanceRecord.vue |  32 ++++
 7 files changed, 486 insertions(+), 196 deletions(-)

diff --git a/src/main/java/com/campus/water/service/AreaService.java b/src/main/java/com/campus/water/service/AreaService.java
index 0121db1..73ad277 100644
--- a/src/main/java/com/campus/water/service/AreaService.java
+++ b/src/main/java/com/campus/water/service/AreaService.java
@@ -1,3 +1,4 @@
+// src/main/java/com/campus/water/service/AreaService.java
 package com.campus.water.service;
 
 import com.campus.water.entity.Area;
@@ -95,7 +96,14 @@ public class AreaService {
         existingArea.setUpdatedTime(LocalDateTime.now());
 
         // 5. 保存修改
-        return areaRepository.save(existingArea);
+        Area updatedArea = areaRepository.save(existingArea);
+
+        // 6. 更新关联管理员的areaId
+        if (existingArea.getManager() != null && !existingArea.getManager().trim().isEmpty()) {
+            bindAdminToArea(existingArea.getManager(), updatedArea.getAreaId());
+        }
+
+        return updatedArea;
     }
 
     /**
@@ -195,8 +203,11 @@ public class AreaService {
         String adminId = area.getManager();
         if (adminId != null && !adminId.trim().isEmpty()) {
             // 校验管理员是否存在
-            Admin admin = adminRepository.findById(adminId)
-                    .orElseThrow(() -> new RuntimeException("区域管理员不存在，ID：" + adminId));
+            Optional<Admin> adminOpt = adminRepository.findByAdminId(adminId);
+            if (adminOpt.isEmpty()) {
+                throw new RuntimeException("区域管理员不存在，ID：" + adminId);
+            }
+            Admin admin = adminOpt.get();
 
             // 校验管理员角色是否为区域管理员
             if (!RoleConstants.ROLE_AREA_ADMIN.equals(admin.getRole().name())) {
@@ -212,10 +223,15 @@ public class AreaService {
      */
     private void bindAdminToArea(String adminId, String areaId) {
         if (adminId != null && !adminId.trim().isEmpty() && areaId != null) {
-            Admin admin = adminRepository.findById(adminId).get(); // 已在前序校验，无需再次处理空值
-            admin.setAreaId(areaId); // 给管理员设置关联的区域ID（Admin实体需有areaId字段）
-            adminRepository.save(admin);
+            Optional<Admin> adminOpt = adminRepository.findByAdminId(adminId);
+            if (adminOpt.isPresent()) {
+                Admin admin = adminOpt.get();
+                admin.setAreaId(areaId); // 给管理员设置关联的区域ID
+                adminRepository.save(admin);
+            } else {
+                throw new RuntimeException("管理员不存在，ID：" + adminId);
+            }
         }
     }
 
-}
\ No newline at end of file
+}
diff --git a/src/main/resources/web/src/views/area/Campus.vue b/src/main/resources/web/src/views/area/Campus.vue
index b6ac21f..bf196da 100644
--- a/src/main/resources/web/src/views/area/Campus.vue
+++ b/src/main/resources/web/src/views/area/Campus.vue
@@ -1,4 +1,3 @@
-<!-- src/views/area/Campus.vue -->
 <template>
   <div class="campus-page">
     <!-- 页面标题和面包屑 -->
@@ -12,6 +11,20 @@
       <!-- 新增校区按钮 -->
       <button class="btn-add" @click="handleAddCampus">新增校区</button>
 
+      <!-- 父片区筛选 -->
+      <div class="filter-box">
+        <label>所属市区：</label>
+        <select
+          v-model="selectedCityFilter"
+          class="area-select"
+          @change="handleCityFilterChange"
+        >
+          <option value="">全部市区</option>
+          <option v-for="city in cityList" :key="city.areaId" :value="city.areaId">
+            {{ city.areaName }}
+          </option>
+        </select>
+      </div>
     </div>
 
     <!-- 校区表格 -->
@@ -20,6 +33,7 @@
         <thead>
           <tr>
             <th>校区名称</th>
+            <th>所属市区</th> <!-- 新增列显示所属市区 -->
             <th>地址</th>
             <th>负责人</th>
             <th>联系电话</th>
@@ -30,8 +44,9 @@
         <tbody>
           <tr v-for="campus in filteredCampus" :key="campus.areaId">
             <td>{{ campus.areaName }}</td>
+            <td>{{ getCityName(campus.parentAreaId) }}</td> <!-- 显示所属市区名称 -->
             <td>{{ campus.address }}</td>
-            <td>{{ campus.manager }}</td>
+            <td>{{ getManagerName(campus.manager) }}</td>
             <td>{{ campus.managerPhone }}</td>
             <td>{{ formatDate(campus.createdTime) }}</td>
             <td class="operation-buttons">
@@ -50,7 +65,7 @@
             </td>
           </tr>
           <tr v-if="filteredCampus.length === 0">
-            <td colspan="6" class="no-data">
+            <td colspan="7" class="no-data">
               {{ loading ? '正在加载数据...' : '暂无校区数据' }}
             </td>
           </tr>
@@ -172,6 +187,7 @@
   </div>
 </template>
 
+
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
@@ -208,10 +224,11 @@ interface Area {
 }
 
 // 响应式数据
-const campusList = ref<Area[]>([])
-const cityList = ref<Area[]>([])
+const campusList = ref<Area[]>([]) // 所有校区列表
+const cityList = ref<Area[]>([]) // 所有市区列表
 const adminList = ref<Admin[]>([])
 const selectedManager = ref<Admin | null>(null)
+const selectedCityFilter = ref('') // 新增：筛选用的市区ID
 const selectedCampus = ref('')
 const currentPage = ref(1)
 const pageSize = ref(10)
@@ -244,13 +261,20 @@ const formatDate = (date: Date | undefined) => {
   return d.toLocaleDateString('zh-CN')
 }
 
-// 筛选后的校区列表
+// 获取市区名称
+const getCityName = (cityId: string | null) => {
+  if (!cityId) return '未知市区'
+  const city = cityList.value.find(c => c.areaId === cityId)
+  return city ? city.areaName : '未知市区'
+}
+
+// 筛选后的校区列表 - 按父级市区筛选
 const filteredCampus = computed(() => {
   let filtered = [...campusList.value]
 
-  // 根据下拉选择筛选校区
-  if (selectedCampus.value) {
-    filtered = filtered.filter(campus => campus.areaId === selectedCampus.value)
+  // 按父级市区筛选
+  if (selectedCityFilter.value) {
+    filtered = filtered.filter(campus => campus.parentAreaId === selectedCityFilter.value)
   }
 
   // 分页处理
@@ -261,13 +285,16 @@ const filteredCampus = computed(() => {
 
 // 总页数计算
 const totalPages = computed(() => {
-  const filteredCount = selectedCampus.value
-    ? campusList.value.filter(campus => campus.areaId === selectedCampus.value).length
-    : campusList.value.length
+  let filteredCount = campusList.value.length
+
+  if (selectedCityFilter.value) {
+    filteredCount = campusList.value.filter(campus => campus.parentAreaId === selectedCityFilter.value).length
+  }
+
   return Math.ceil(filteredCount / pageSize.value)
 })
 
-// 获取校区列表
+// 获取所有校区列表（通过多次调用市区接口获取所有校区）
 const fetchCampusList = async () => {
   loading.value = true
   try {
@@ -278,8 +305,7 @@ const fetchCampusList = async () => {
       return
     }
 
-    // 需要先获取所有市区，然后获取所有校区
-    // 方案1: 获取所有市区，然后获取每个市区下的校区
+    // 先获取所有市区
     const citiesResponse = await request<{
       code: number
       msg: string
@@ -294,11 +320,12 @@ const fetchCampusList = async () => {
       return
     }
 
-    const cities = citiesResponse.data
-    const allCampuses: Area[] = []
+    // 更新市区列表
+    cityList.value = citiesResponse.data
 
     // 获取每个市区下的校区
-    for (const city of cities) {
+    const allCampuses: Area[] = []
+    for (const city of citiesResponse.data) {
       try {
         const campusResponse = await request<{
           code: number
@@ -332,7 +359,7 @@ const fetchCampusList = async () => {
   }
 }
 
-// 获取市区列表
+// 获取市区列表（实际已经在fetchCampusList中获取了）
 const fetchCityList = async () => {
   try {
     const token = authStore.token
@@ -368,7 +395,6 @@ const fetchCityList = async () => {
 }
 
 // 获取区域管理员列表
-// 修改获取管理员列表的函数
 const fetchAdminList = async () => {
   try {
     const token = authStore.token
@@ -378,7 +404,6 @@ const fetchAdminList = async () => {
       return
     }
 
-    // 先获取所有管理员，然后在前端过滤
     const response = await request<{
       code: number
       msg: string
@@ -388,7 +413,6 @@ const fetchAdminList = async () => {
     })
 
     if (response?.code === 200 && response?.data) {
-      // 过滤出区域管理员
       const areaAdmins = response.data.filter(admin =>
         admin.role === 'AREA_ADMIN' || admin.role === 'ROLE_AREA_ADMIN'
       )
@@ -408,11 +432,10 @@ const fetchAdminList = async () => {
   }
 }
 
-
-// 处理负责人选择变化
+// 处理负责人选择变化 - 修改为传递管理员ID而不是姓名
 const onManagerChange = () => {
   if (selectedManager.value) {
-    formData.value.manager = selectedManager.value.adminName
+    formData.value.manager = selectedManager.value.adminId // 传递管理员ID而非姓名
     formData.value.managerPhone = selectedManager.value.phone
   } else {
     formData.value.manager = ''
@@ -420,6 +443,11 @@ const onManagerChange = () => {
   }
 }
 
+// 处理市区筛选变化
+const handleCityFilterChange = () => {
+  currentPage.value = 1 // 重置到第一页
+}
+
 // 新增校区
 const handleAddCampus = () => {
   isEdit.value = false
@@ -428,7 +456,7 @@ const handleAddCampus = () => {
     areaId: '',
     areaName: '',
     areaType: 'campus',
-    parentAreaId: null, // 重置为null，让用户选择
+    parentAreaId: null,
     address: '',
     manager: '',
     managerPhone: '',
@@ -445,9 +473,15 @@ const handleEdit = (campus: Area) => {
   formData.value = { ...campus }
 
   // 尝试匹配现有的负责人
-  const matchedAdmin = adminList.value.find(admin => admin.adminName === campus.manager)
+  const matchedAdmin = adminList.value.find(admin => admin.adminId === campus.manager)
   selectedManager.value = matchedAdmin || null
 
+  // 如果没有找到匹配的管理员，尝试通过姓名匹配（兼容性处理）
+  if (!selectedManager.value) {
+    const matchedByName = adminList.value.find(admin => admin.adminName === campus.manager)
+    selectedManager.value = matchedByName || null
+  }
+
   showModal.value = true
 }
 
@@ -497,7 +531,6 @@ const confirmDelete = async () => {
   }
 }
 
-// 保存校区信息
 // 保存校区信息
 const handleSave = async () => {
   saving.value = true
@@ -515,6 +548,12 @@ const handleSave = async () => {
       return
     }
 
+    // 验证选择的负责人是否是区域管理员
+    if (selectedManager.value.role !== 'ROLE_AREA_ADMIN' && selectedManager.value.role !== 'AREA_ADMIN') {
+      alert('所选负责人必须是区域管理员角色');
+      return;
+    }
+
     let response
 
     if (isEdit.value) {
@@ -524,10 +563,10 @@ const handleSave = async () => {
         msg: string
         data: Area
       }>('/api/web/area/update', {
-        method: 'PUT',
+        method: 'POST', // 改为POST以匹配后端端点
         headers: {
           'Content-Type': 'application/json',
-          'Authorization': `Bearer ${authStore.token}`
+          'Authorization': `Bearer ${authStore.token}` // 添加认证头
         },
         body: JSON.stringify({
           areaId: formData.value.areaId,
@@ -535,8 +574,8 @@ const handleSave = async () => {
           areaType: 'campus',
           parentAreaId: formData.value.parentAreaId,
           address: formData.value.address,
-          manager: formData.value.manager,
-          managerPhone: formData.value.managerPhone
+          manager: selectedManager.value.adminId, // 使用管理员ID而不是姓名
+          managerPhone: selectedManager.value.phone
         })
       })
 
@@ -571,11 +610,11 @@ const handleSave = async () => {
         areaType: 'campus',
         parentAreaId: formData.value.parentAreaId,
         address: formData.value.address,
-        manager: formData.value.manager,
-        managerPhone: formData.value.managerPhone
+        manager: selectedManager.value.adminId, // 使用管理员ID而不是姓名
+        managerPhone: selectedManager.value.phone
       }
 
-      console.log('发送的校区数据:', newCampus) // 调试日志
+      console.log('发送的校区数据:', newCampus)
 
       response = await request<{
         code: number
@@ -585,7 +624,7 @@ const handleSave = async () => {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
-          'Authorization': `Bearer ${authStore.token}`
+          'Authorization': `Bearer ${authStore.token}` // 添加认证头
         },
         body: JSON.stringify(newCampus)
       })
@@ -605,19 +644,29 @@ const handleSave = async () => {
         ? '权限不足或登录已过期，请重新登录'
         : error.message.includes('Network')
             ? '网络连接失败，请检查网络'
-            : error.message || '保存失败，请稍后重试'
+            : error.message.includes('400')
+                ? '请求参数错误，请检查输入数据'
+                : error.message || '保存失败，请稍后重试'
     alert(`保存校区失败：${ errorMsg}`)
   } finally {
     saving.value = false
   }
 }
 
+// 根据管理员ID获取管理员姓名
+const getManagerName = (managerId: string) => {
+  if (!managerId) return '未分配'
+  const admin = adminList.value.find(admin => admin.adminId === managerId)
+  return admin ? admin.adminName : '未知负责人'
+}
+
+
 // 初始化加载数据
 onMounted(async () => {
   console.log('Token:', authStore.token)
   await fetchCityList() // 先加载市区列表
   await fetchAdminList() // 加载管理员列表
-  fetchCampusList()
+  fetchCampusList() // 获取所有校区数据
 })
 </script>
 
@@ -902,6 +951,27 @@ onMounted(async () => {
   cursor: not-allowed;
 }
 
+/* 在现有样式基础上添加筛选框样式 */
+.filter-box {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #666;
+}
+
+.area-select {
+  padding: 8px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  min-width: 180px;
+  font-size: 14px;
+}
+
+.filter-box label {
+  white-space: nowrap;
+}
+
+
 /* 响应式调整 */
 @media (max-width: 768px) {
   .action-bar {
diff --git a/src/main/resources/web/src/views/area/Urban.vue b/src/main/resources/web/src/views/area/Urban.vue
index 724304f..93a6027 100644
--- a/src/main/resources/web/src/views/area/Urban.vue
+++ b/src/main/resources/web/src/views/area/Urban.vue
@@ -11,16 +11,6 @@
       <!-- 新增片区按钮 -->
       <button class="btn-add" @click="handleAddArea">新增片区</button>
 
-      <!-- 片区下拉筛选 -->
-      <div class="filter-box">
-        <label>选择片区：</label>
-        <select v-model="selectedArea" @change="handleAreaChange" class="area-select">
-          <option value="">全部片区</option>
-          <option v-for="area in areaList" :key="area.areaId" :value="area.areaId">
-            {{ area.areaName }}
-          </option>
-        </select>
-      </div>
     </div>
 
     <!-- 片区表格 -->
diff --git a/src/main/resources/web/src/views/equipment/WaterMaker.vue b/src/main/resources/web/src/views/equipment/WaterMaker.vue
index 3aa1665..6c7d192 100644
--- a/src/main/resources/web/src/views/equipment/WaterMaker.vue
+++ b/src/main/resources/web/src/views/equipment/WaterMaker.vue
@@ -1,43 +1,37 @@
 <template>
   <div class="water-maker-page">
-    <!-- 页面标题和面包屑 -->
     <div class="page-header">
       <h2>制水机管理</h2>
       <div class="breadcrumb">校园矿化水平台 / 设备监控 / 制水机</div>
     </div>
 
-    <!-- 操作按钮区 -->
     <div class="action-bar">
       <button class="btn-add" @click="showAddModal = true">添加制水机</button>
-
       <div class="filters">
-        <!-- 搜索框 -->
         <div class="search-box">
           <input
-              type="text"
-              placeholder="搜索设备ID或位置..."
-              v-model="searchKeyword"
-              @input="handleSearch"
+            v-model="searchKeyword"
+            type="text"
+            placeholder="搜索设备ID或位置..."
+            @input="handleSearch"
           >
           <button class="search-btn" @click="handleSearch">搜索</button>
         </div>
-
-        <!-- 片区筛选 -->
         <select
-            v-model="selectedArea"
-            class="filter-select"
-            @change="handleSearch"
+          v-model="selectedArea"
+          class="filter-select"
+          @change="currentPage = 1"
         >
           <option value="">全部片区</option>
-          <option value="A">A</option>
-          <option value="B">B</option>
+          <option value="A">A区</option>
+          <option value="B">B区</option>
+          <option value="C">C区</option>
+          <option value="D">D区</option>
         </select>
-
-        <!-- 状态筛选 -->
         <select
-            v-model="selectedStatus"
-            class="filter-select"
-            @change="handleSearch"
+          v-model="selectedStatus"
+          class="filter-select"
+          @change="currentPage = 1"
         >
           <option value="">全部状态</option>
           <option value="online">在线</option>
@@ -48,56 +42,55 @@
       </div>
     </div>
 
-    <!-- 设备表格 - 新增设备机型列 -->
     <div class="card">
       <table class="equipment-table">
         <thead>
-        <tr>
-          <th>设备ID</th>
-          <th>设备机型</th> <!-- 新增机型列 -->
-          <th>所属片区</th>
-          <th>详细位置</th>
-          <th>状态</th>
-          <th>最后上传时间</th>
-          <th>操作</th>
-        </tr>
+          <tr>
+            <th>设备ID</th>
+            <th>设备名称</th>
+            <th>设备类型</th>
+            <th>所属片区</th>
+            <th>安装位置</th>
+            <th>状态</th>
+            <th>操作</th>
+          </tr>
         </thead>
         <tbody>
-        <tr v-for="device in paginatedDevices" :key="device.deviceId">
-          <td>{{ device.deviceId }}</td>
-          <td>{{ device.deviceType === 'water_maker' ? '制水机' : device.deviceType }}</td>
-          <td>{{ device.areaId }}</td>
-          <td>{{ device.installLocation }}</td>
-          <td>
-              <span :class="`status-tag ${device.status}`">
-                {{ formatStatus(device.status) }}
-              </span>
-          </td>
-          <td>{{ formatDate(device.lastHeartbeatTime) }}</td>
-          <td class="operation-buttons">
-            <button class="btn-view" @click="viewDevice(device.deviceId)">查看详情</button>
-            <button class="btn-edit" @click="openEditModal(device)">编辑</button>
-            <button
+          <tr v-for="device in paginatedDevices" :key="device.deviceId">
+            <td>{{ device.deviceId }}</td>
+            <td>{{ device.deviceName }}</td>
+            <td>{{ device.deviceType }}</td>
+            <td>{{ device.areaId }}</td>
+            <td>{{ device.installLocation }}</td>
+            <td>
+               <span :class="`status-tag ${device.status}`">
+                  {{ formatStatus(device.status) }}
+               </span>
+            </td>
+            <td class="operation-buttons">
+              <button class="btn-view" @click="viewDevice(device.deviceId)">查看详情</button>
+              <button class="btn-edit" @click="openEditModal(device)">编辑</button>
+              <button
                 class="btn-delete"
                 @click="deleteDevice(device.deviceId)"
-            >
-              删除
-            </button>
-          </td>
-        </tr>
-        <tr v-if="paginatedDevices.length === 0">
-          <td colspan="7" class="no-data">暂无设备数据</td>
-        </tr>
+                :disabled="device.status === 'online'"
+              >
+                删除
+              </button>
+            </td>
+          </tr>
+          <tr v-if="paginatedDevices.length === 0">
+            <td colspan="7" class="no-data">暂无设备数据</td>
+          </tr>
         </tbody>
       </table>
     </div>
 
-    <!-- 分页控件 -->
     <div class="pagination">
       <button
-          class="page-btn"
-          :disabled="currentPage === 1"
-          @click="currentPage--"
+        class="page-btn"
+        :disabled="currentPage === 1"
+        @click="currentPage--"
       >
         上一页
       </button>
@@ -105,9 +98,9 @@
         第 {{ currentPage }} 页 / 共 {{ totalPages }} 页 (共 {{ filteredDevices.length }} 条记录)
       </span>
       <button
-          class="page-btn"
-          :disabled="currentPage === totalPages"
-          @click="currentPage++"
+        class="page-btn"
+        :disabled="currentPage === totalPages"
+        @click="currentPage++"
       >
         下一页
       </button>
@@ -297,7 +290,7 @@ import { request } from '@/api/request'
 import type { ResultVO } from '@/api/types/auth'
 
 // 设备状态类型定义
-type DeviceStatus = 'online' | 'offline' | 'fault'
+type DeviceStatus = 'online' | 'offline' | 'warning' | 'fault'
 
 // 设备类型定义
 interface WaterMakerDevice {
@@ -307,8 +300,7 @@ interface WaterMakerDevice {
   areaId: string
   installLocation: string
   status: DeviceStatus
-  lastHeartbeatTime?: string
-  createTime?: string
+  // 移除了 lastHeartbeatTime 字段
 }
 
 // 区域类型定义
@@ -406,8 +398,8 @@ const loadDevices = async (): Promise<void> => {
         deviceType: item.deviceType,
         areaId: item.areaId,
         installLocation: item.installLocation,
-        status: item.status,
-        lastHeartbeatTime: item.lastHeartbeatTime
+        status: item.status
+        // 移除了 lastHeartbeatTime
       }))
     }
 
@@ -618,17 +610,18 @@ const formatStatus = (status: DeviceStatus): string => {
   const statusMap: Record<string, string> = {
     online: '在线',
     offline: '离线',
+    warning: '警告',
     fault: '故障'
   }
   return statusMap[status] || status
 }
 
-// 时间格式化
-const formatDate = (dateString?: string): string => {
-  if (!dateString) return '-'
-  const date = new Date(dateString)
-  return date.toLocaleString('zh-CN')
-}
+// 移除时间格式化函数
+// const formatDate = (dateString?: string): string => {
+//   if (!dateString) return '-'
+//   const date = new Date(dateString)
+//   return date.toLocaleString('zh-CN')
+// }
 
 // 搜索处理
 const handleSearch = () => {
@@ -929,7 +922,7 @@ onMounted(async () => {
 </script>
 
 <style scoped>
-/* 样式与供水机页面保持一致 */
+/* 样式与终端机页面保持一致 */
 .water-maker-page {
   padding: 20px;
 }
@@ -1032,6 +1025,34 @@ onMounted(async () => {
   background-color: #f8f9fa;
 }
 
+.status-tag {
+  display: inline-block;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.status-tag.online {
+  background-color: #e6f7ee;
+  color: #00875a;
+}
+
+.status-tag.offline {
+  background-color: #f5f5f5;
+  color: #8c8c8c;
+}
+
+.status-tag.warning {
+  background-color: #fff7e6;
+  color: #d48806;
+}
+
+.status-tag.fault {
+  background-color: #ffebe6;
+  color: #cf1322;
+}
+
 .operation-buttons {
   display: flex;
   gap: 8px;
@@ -1062,13 +1083,13 @@ onMounted(async () => {
 }
 
 .btn-edit {
-  background-color: #e6f7ff;
-  color: #1890ff;
+  background-color: #faad14;
+  color: white;
 }
 
 .btn-delete {
-  background-color: #ffebe6;
-  color: #ff4d4f;
+  background-color: #ff4d4f;
+  color: white;
 }
 
 .no-data {
diff --git a/src/main/resources/web/src/views/equipment/WaterSupplier.vue b/src/main/resources/web/src/views/equipment/WaterSupplier.vue
index 48d7e12..77fb97f 100644
--- a/src/main/resources/web/src/views/equipment/WaterSupplier.vue
+++ b/src/main/resources/web/src/views/equipment/WaterSupplier.vue
@@ -652,7 +652,7 @@ onMounted(() => {
 </script>
 
 <style scoped>
-/* 样式与制水机页面保持一致 */
+/* 样式与终端机页面保持一致 */
 .water-supplier-page {
   padding: 20px;
 }
@@ -678,7 +678,7 @@ onMounted(() => {
   justify-content: space-between;
   align-items: center;
   margin-bottom: 16px;
-  flex-wrap:wrap;
+  flex-wrap: wrap;
   gap: 16px;
 }
 
@@ -697,36 +697,6 @@ onMounted(() => {
   background: #359e75;
 }
 
-.btn-edit {
-  background: #e6f7ff;
-  color: #1890ff;
-  border: none;
-  padding: 4px 8px;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 12px;
-  transition: background 0.3s;
-}
-
-.btn-edit:hover {
-  background: #bae7ff;
-}
-
-.btn-delete {
-  background: #cf1322;
-  color: white;
-  border: none;
-  padding: 8px 16px;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 14px;
-  transition: background 0.3s;
-}
-
-.btn-delete:hover {
-  background: #b80c1a;
-}
-
 .filters {
   display: flex;
   gap: 12px;
@@ -751,7 +721,7 @@ onMounted(() => {
   border: none;
   padding: 8px 16px;
   border-radius: 4px;
-  cursor:pointer;
+  cursor: pointer;
 }
 
 .filter-select {
@@ -764,7 +734,7 @@ onMounted(() => {
 
 .equipment-table {
   width: 100%;
-  border-collapse:collapse;
+  border-collapse: collapse;
 }
 
 .equipment-table th,
@@ -785,32 +755,71 @@ onMounted(() => {
   background-color: #f8f9fa;
 }
 
+.status-tag {
+  display: inline-block;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.status-tag.online {
+  background-color: #e6f7ee;
+  color: #00875a;
+}
+
+.status-tag.offline {
+  background-color: #f5f5f5;
+  color: #8c8c8c;
+}
+
+.status-tag.warning {
+  background-color: #fff7e6;
+  color: #d48806;
+}
+
+.status-tag.error {
+  background-color: #ffebe6;
+  color: #cf1322;
+}
+
 .operation-buttons {
   display: flex;
   gap: 8px;
+  flex-wrap: wrap;
 }
 
 .operation-buttons button {
   padding: 4px 8px;
   border-radius: 4px;
   font-size: 12px;
-  cursor:pointer;
-  border:none;
+  cursor: pointer;
+  border: none;
   transition: opacity 0.3s;
 }
 
-.operation-buttons button:hover {
+.operation-buttons button:hover:not(:disabled) {
   opacity: 0.9;
 }
 
+.operation-buttons button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
 .btn-view {
   background-color: #e6f7ff;
   color: #1890ff;
 }
 
+.btn-edit {
+  background-color: #faad14;
+  color: white;
+}
+
 .btn-delete {
-  background-color: #ffebe6;
-  color: #cf1322;
+  background-color: #ff4d4f;
+  color: white;
 }
 
 .no-data {
@@ -834,7 +843,7 @@ onMounted(() => {
   border: 1px solid #ddd;
   background: white;
   border-radius: 4px;
-  cursor:pointer;
+  cursor: pointer;
 }
 
 .page-btn:disabled {
@@ -862,13 +871,11 @@ onMounted(() => {
   border-radius: 8px;
   min-width: 400px;
   max-width: 500px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
 
 .modal-content h3 {
   margin-top: 0;
   margin-bottom: 20px;
-  color: #333;
 }
 
 .form-group {
@@ -877,12 +884,13 @@ onMounted(() => {
 
 .form-group label {
   display: block;
-  margin-bottom: 8px;
+  margin-bottom: 4px;
   font-weight: 500;
 }
 
 .form-group input,
-.form-group select {
+.form-group select,
+.form-group textarea {
   width: 100%;
   padding: 8px 12px;
   border: 1px solid #ddd;
@@ -890,6 +898,11 @@ onMounted(() => {
   box-sizing: border-box;
 }
 
+.form-group textarea {
+  min-height: 80px;
+  resize: vertical;
+}
+
 .form-actions {
   display: flex;
   justify-content: flex-end;
@@ -901,30 +914,44 @@ onMounted(() => {
   padding: 8px 16px;
   border-radius: 4px;
   cursor: pointer;
-  font-size: 14px;
+  border: 1px solid #ddd;
 }
 
 .form-actions button[type="button"] {
   background: #f5f5f5;
-  border: 1px solid #ddd;
-  color: #333;
 }
 
 .form-actions button[type="submit"] {
   background: #42b983;
-  border: none;
   color: white;
+  border: none;
 }
 
-.help-text {
-  font-size: 12px;
+/* 新增：下拉框样式 */
+.select-input {
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  box-sizing: border-box;
+  background: white;
+  cursor: pointer;
+}
+
+.select-input:focus {
+  outline: none;
+  border-color: #42b983;
+}
+
+/* 新增：无数据提示样式 */
+.no-data-message {
+  margin-top: 8px;
   color: #8c8c8c;
-  margin-top: 4px;
-  margin-bottom: 0;
+  font-size: 12px;
 }
 
 /* 响应式调整 */
-@media (max-width:  768px) {
+@media (max-width: 768px) {
   .filters {
     flex-direction: column;
     width: 100%;
@@ -933,5 +960,11 @@ onMounted(() => {
   .search-box, .filter-select {
     width: 100%;
   }
+
+  .modal-content {
+    width: 90%;
+    min-width: auto;
+  }
 }
 </style>
+
diff --git a/src/main/resources/web/src/views/personnel/Admin.vue b/src/main/resources/web/src/views/personnel/Admin.vue
index c07dc5f..400fb85 100644
--- a/src/main/resources/web/src/views/personnel/Admin.vue
+++ b/src/main/resources/web/src/views/personnel/Admin.vue
@@ -31,6 +31,7 @@
           <th>账号</th>
           <th>联系电话</th>
           <th>身份</th>
+          <th>关联区域</th>
           <th>状态</th>
           <th>操作</th>
         </tr>
@@ -41,6 +42,12 @@
           <td>{{ admin.account }}</td>
           <td>{{ admin.phone }}</td>
           <td>{{ formatRole(admin.role) }}</td>
+          <td>
+            <span v-if="admin.role === 'ROLE_AREA_ADMIN'" class="area-list">
+              {{ admin.areas ? admin.areas.join(', ') : '未关联区域' }}
+            </span>
+            <span v-else>-</span>
+          </td>
           <td>
               <span :class="`status-tag ${admin.status}`">
                 {{ admin.status === 'active' ? '启用' : '禁用' }}
@@ -69,7 +76,7 @@
           </td>
         </tr>
         <tr v-if="filteredAdmins.length === 0">
-          <td colspan="6" class="no-data">暂无管理员数据</td>
+          <td colspan="7" class="no-data">暂无管理员数据</td>
         </tr>
         </tbody>
       </table>
@@ -119,12 +126,26 @@
             </div>
             <div class="form-group">
               <label for="role" class="form-label required">身份：</label>
-              <select id="role" v-model="formData.role" required>
+              <select id="role" v-model="formData.role" @change="handleRoleChange" required>
                 <option value="ROLE_SUPER_ADMIN">超级管理员</option>
                 <option value="ROLE_AREA_ADMIN">区域管理员</option>
                 <option value="ROLE_VIEWER">查看者</option>
               </select>
             </div>
+
+            <!-- 区域选择 - 仅当选择区域管理员时显示 -->
+            <div class="form-group" v-if="formData.role === 'ROLE_AREA_ADMIN'">
+              <label class="form-label required">关联区域：</label>
+              <select v-model="selectedAreas" multiple required>
+                <option v-for="area in areaList" :key="area.areaId" :value="area.areaId">
+                  {{ area.areaName }}
+                </option>
+              </select>
+              <p v-if="!selectedAreas.length && formData.role === 'ROLE_AREA_ADMIN'" class="error-message">
+                请选择关联的区域
+              </p>
+            </div>
+
             <div class="form-group">
               <label for="password" class="form-label">初始密码：</label>
               <input
@@ -166,12 +187,16 @@
             </div>
             <div class="form-group">
               <label for="edit-role" class="form-label required">身份：</label>
-              <select id="edit-role" v-model="editFormData.role" required>
+              <select id="edit-role" v-model="editFormData.role" @change="handleEditRoleChange" required>
                 <option value="ROLE_SUPER_ADMIN">超级管理员</option>
                 <option value="ROLE_AREA_ADMIN">区域管理员</option>
                 <option value="ROLE_VIEWER">查看者</option>
               </select>
             </div>
+
+            <!-- 区域选择 - 仅当选择区域管理员时显示 -->
+            <!-- 已移除，不再允许编辑关联区域 -->
+
             <div class="form-group">
               <label for="edit-password" class="form-label">重置密码：</label>
               <input
@@ -193,7 +218,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { request } from '@/api/request'
 import { useAuthStore } from '@/stores/auth'
@@ -202,6 +227,17 @@ import type { ResultVO } from '@/api/types/auth'
 // 管理员状态类型
 type AdminStatus = 'active' | 'disabled'
 
+// 区域信息接口
+interface Area {
+  areaId: string
+  areaName: string
+  areaType: string
+  parentAreaId: string | null
+  address: string
+  manager: string
+  managerPhone: string
+}
+
 // 管理员数据接口
 interface Admin {
   adminId: string
@@ -210,6 +246,7 @@ interface Admin {
   phone: string
   role: string
   status: AdminStatus
+  areas?: string[] // 关联的区域名称数组
 }
 
 // 表单数据接口
@@ -243,6 +280,15 @@ const loading = ref(false)
 const showAddModal = ref(false)
 const showEditModal = ref(false)
 
+// 区域列表
+const areaList = ref<Area[]>([])
+
+// 选中的区域ID数组（新增）
+const selectedAreas = ref<string[]>([])
+
+// 存储原始管理员数据（用于编辑时保留原有区域关联）
+const originalAdminData = ref<Admin | null>(null)
+
 // 弹窗表单数据
 const formData = ref<FormData>({
   name: '',
@@ -262,6 +308,35 @@ const editFormData = ref<EditFormData>({
   password: ''
 })
 
+// 加载区域列表
+const loadAreaList = async () => {
+  try {
+    const token = authStore.token
+
+    if (!token) {
+      console.warn('未获取到 Token，跳转到登录页')
+      router.push('/login')
+      return
+    }
+
+    const response = await request<ResultVO<Area[]>>('/api/web/area/list', {
+      method: 'GET',
+    })
+
+    if (response.code === 200) {
+      areaList.value = response.data || []
+    } else {
+      console.error('获取区域列表失败:', response.message)
+    }
+  } catch (error: any) {
+    console.error('请求区域列表异常:', error)
+    if (error.message.includes('401')) {
+      authStore.logout()
+      router.push('/login')
+    }
+  }
+}
+
 // 获取管理员列表
 const fetchAdminList = async () => {
   loading.value = true
@@ -290,12 +365,13 @@ const fetchAdminList = async () => {
         account: admin.adminId || '',
         phone: admin.phone || '未知电话',
         role: admin.role || '未知角色',
-        status: 'active' as AdminStatus
+        status: 'active' as AdminStatus,
+        areas: admin.areas || [] // 添加关联区域信息
       }))
     } else {
       const errorMsg = response.message || `获取失败（错误码：${response.code}）`
       console.error('获取管理员列表失败:', errorMsg)
-      alert(`获取管理员列表失败：${errorMsg}`)
+      alert(`获取管理员列表失败：${ errorMsg}`)
     }
   } catch (error: any) {
     console.error('请求异常:', error)
@@ -304,7 +380,7 @@ const fetchAdminList = async () => {
         : error.message.includes('Net')
             ? '网络连接失败，请检查网络'
             : error.message || '获取数据失败，请稍后重试'
-    alert(`获取管理员列表失败：${errorMsg}`)
+    alert(`获取管理员列表失败：${ errorMsg}`)
 
     if (error.message.includes('401')) {
       authStore.logout()
@@ -346,8 +422,23 @@ const handleSearch = () => {
   fetchAdminList()
 }
 
+// 角色变化处理 - 清空区域选择
+const handleRoleChange = () => {
+  if (formData.value.role !== 'ROLE_AREA_ADMIN') {
+    selectedAreas.value = []
+  }
+}
+
+// 编辑角色变化处理 - 清空区域选择
+const handleEditRoleChange = () => {
+  if (editFormData.value.role !== 'ROLE_AREA_ADMIN') {
+    // 不再清空区域，因为不再允许编辑
+  }
+}
+
 // 页面加载时获取数据
-onMounted(() => {
+onMounted(async () => {
+  await loadAreaList()
   fetchAdminList()
 })
 
@@ -382,6 +473,9 @@ const handleEdit = async (id: string) => {
     // 查找要编辑的管理员信息
     const adminToEdit = admins.value.find(admin => admin.adminId === id);
     if (adminToEdit) {
+      // 保存原始管理员数据
+      originalAdminData.value = { ...adminToEdit };
+
       // 填充编辑表单数据
       editFormData.value = {
         adminId: adminToEdit.adminId,
@@ -391,6 +485,7 @@ const handleEdit = async (id: string) => {
         role: adminToEdit.role,
         password: ''
       };
+
       showEditModal.value = true;
     }
   } catch (error: any) {
@@ -402,13 +497,15 @@ const handleEdit = async (id: string) => {
 // 提交编辑表单
 const handleEditSubmit = async () => {
   try {
+    // 不再处理区域选择逻辑，直接提交
     const submitData = {
       adminId: editFormData.value.adminId,
       adminName: editFormData.value.name,
       account: editFormData.value.account,
       phone: editFormData.value.phone,
       role: editFormData.value.role,
-      password: editFormData.value.password || undefined // 如果密码为空则不传递
+      password: editFormData.value.password || undefined,
+      // areaIds: undefined // 不传递区域信息
     };
 
     const response = await request<ResultVO>(`/api/web/admin/save`, {
@@ -428,6 +525,7 @@ const handleEditSubmit = async () => {
         role: 'ROLE_SUPER_ADMIN',
         password: ''
       };
+      originalAdminData.value = null;
       // 重新获取列表
       fetchAdminList();
     } else {
@@ -468,7 +566,7 @@ const performDelete = async (id: string) => {
     } else {
       const errorMsg = response.message || `删除失败（错误码：${response.code}）`;
       console.error('删除管理员失败:', errorMsg);
-      alert(`删除管理员失败：${errorMsg}`);
+      alert(`删除管理员失败：${ errorMsg}`);
     }
   } catch (error: any) {
     console.error('请求异常:', error);
@@ -477,7 +575,7 @@ const performDelete = async (id: string) => {
         : error.message.includes('Network')
             ? '网络连接失败，请检查网络'
             : error.message || '删除失败，请稍后重试';
-    alert(`删除管理员失败：${errorMsg}`);
+    alert(`删除管理员失败：${ errorMsg}`);
 
     if (error.message.includes('401')) {
       authStore.logout();
@@ -489,10 +587,17 @@ const performDelete = async (id: string) => {
 // 提交新增管理员表单
 const handleSubmit = async () => {
   try {
+    // 验证区域管理员是否选择了区域
+    if (formData.value.role === 'ROLE_AREA_ADMIN' && (!selectedAreas.value || selectedAreas.value.length === 0)) {
+      alert('区域管理员必须关联至少一个区域')
+      return
+    }
+
     // 补充默认密码
     const submitData = {
       ...formData.value,
-      password: formData.value.password || '123456'
+      password: formData.value.password || '123456',
+      areaIds: formData.value.role === 'ROLE_AREA_ADMIN' ? selectedAreas.value : undefined
     }
 
     const response = await request<ResultVO>(`/api/web/admin/save`, {
@@ -511,6 +616,7 @@ const handleSubmit = async () => {
         role: 'ROLE_SUPER_ADMIN',
         password: ''
       }
+      selectedAreas.value = [] // 重置区域选择
       // 重新获取列表
       fetchAdminList()
     } else {
@@ -630,6 +736,11 @@ const handleSubmit = async () => {
   color: #8c8c8c;
 }
 
+.area-list {
+  color: #666;
+  font-size: 12px;
+}
+
 .operation-buttons {
   display: flex;
   gap: 8px;
@@ -780,6 +891,17 @@ const handleSubmit = async () => {
   cursor: not-allowed;
 }
 
+.form-group select[multiple] {
+  height: 120px;
+}
+
+.error-message {
+  color: #cf1322;
+  font-size: 12px;
+  margin-top: 4px;
+  margin-bottom: 0;
+}
+
 .form-actions {
   display: flex;
   gap: 16px;
@@ -829,5 +951,11 @@ const handleSubmit = async () => {
   .search-box input {
     width: 100%;
   }
+
+  .admin-table th,
+  .admin-table td {
+    padding: 8px 10px;
+    font-size: 12px;
+  }
 }
 </style>
diff --git a/src/main/resources/web/src/views/personnel/MaintenanceRecord.vue b/src/main/resources/web/src/views/personnel/MaintenanceRecord.vue
index 42bdb5e..c99e339 100644
--- a/src/main/resources/web/src/views/personnel/MaintenanceRecord.vue
+++ b/src/main/resources/web/src/views/personnel/MaintenanceRecord.vue
@@ -7,6 +7,14 @@
       <div class="breadcrumb">校园矿化水平台 / 人员管理 / 维修人员 / 维修记录</div>
     </div>
 
+    <!-- 返回按钮 -->
+   <div class="back-button">
+   <button @click="goBack" class="btn-back">
+      ← 返回维修人员列表
+    </button>
+   </div>
+
+
     <!-- 维修人员信息 -->
     <div class="repairman-info card">
       <h3>维修人员信息</h3>
@@ -305,6 +313,12 @@ const viewOrderDetail = (orderId: string) => {
   router.push(`/home/work-order/detail/${orderId}`)
 }
 
+// 返回上一页
+const goBack = () => {
+  router.back()
+}
+
+
 // 页面加载时获取数据
 // MaintenanceRecord.vue
 onMounted(() => {
@@ -565,5 +579,23 @@ onMounted(() => {
   .order-tabs {
     flex-direction: column;
   }
+
+  .btn-back {
+  background: #f0f0f0;
+  color: #333;
+  border: 1px solid #ddd;
+  padding: 8px 16px;
+  border-radius: 4px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.btn-back:hover {
+  background: #e0e0e0;
+  border-color: #bbb;
+}
+
+
 }
 </style>
-- 
2.34.1


From 673b22b3105bed02433f396e93e59e19a1630d72 Mon Sep 17 00:00:00 2001
From: ZHW <1941286652@qq.com>
Date: Tue, 30 Dec 2025 19:13:33 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E7=89=87=E5=8C=BA=E9=83=A8=E5=88=86?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../campus/water/service/AdminService.java    |  63 ++--
 .../resources/web/src/views/area/Campus.vue   | 286 +++++++++++++++++-
 .../resources/web/src/views/area/Urban.vue    |  24 +-
 .../web/src/views/equipment/WaterMaker.vue    | 134 +++++---
 .../web/src/views/equipment/WaterSupplier.vue | 214 +++++++++++--
 .../web/src/views/personnel/Admin.vue         | 135 ++++++---
 6 files changed, 700 insertions(+), 156 deletions(-)

diff --git a/src/main/java/com/campus/water/service/AdminService.java b/src/main/java/com/campus/water/service/AdminService.java
index e21d723..bfe1837 100644
--- a/src/main/java/com/campus/water/service/AdminService.java
+++ b/src/main/java/com/campus/water/service/AdminService.java
@@ -69,42 +69,43 @@ public class AdminService {
     }
 
     /**
-     * 新增/修改管理员（支持指定角色）
-     * 重写保存方法，增加区域校验（区域管理员必须关联区域）
-     */
-    public Admin saveAdmin(Admin admin) {
-        admin.setUpdatedTime(LocalDateTime.now());
-        if (admin.getCreatedTime() == null) {
-            admin.setCreatedTime(LocalDateTime.now());
-        }
+ * 新增/修改管理员（支持指定角色）
+ * 重写保存方法，增加区域校验（区域管理员必须关联区域）
+ */
+public Admin saveAdmin(Admin admin) {
+    admin.setUpdatedTime(LocalDateTime.now());
+    if (admin.getCreatedTime() == null) {
+        admin.setCreatedTime(LocalDateTime.now());
+    }
 
-        // 区域管理员（ROLE_AREA_ADMIN）的专属校验逻辑
-        if (admin.getRole() == Admin.AdminRole.ROLE_AREA_ADMIN) {
-            // 1. 若未填写区域ID（null/空字符串），直接放行（支持先创建管理员，后续补填）
-            if (admin.getAreaId() == null || admin.getAreaId().trim().isEmpty()) {
-                admin.setAreaId(null); // 统一置为null，避免空字符串冗余数据
-                // 无需校验，直接允许保存
-            } else {
-                // 2. 若填写了区域ID，进行严格校验：区域存在 + 类型为校区（禁止市区）
-                String areaId = admin.getAreaId().trim();
-                // 校验区域是否存在
-                Area targetArea = areaRepository.findById(areaId)
-                        .orElseThrow(() -> new RuntimeException("关联的区域不存在：" + areaId));
-                // 核心校验：仅允许关联校区，禁止关联市区
-                if (Area.AreaType.zone.equals(targetArea.getAreaType())) {
-                    throw new RuntimeException("区域管理员仅允许关联校区，不能关联市区，请重新选择");
-                }
-                // 校验通过，保留填写的合法校区ID
-                admin.setAreaId(areaId);
-            }
+    // 区域管理员（ROLE_AREA_ADMIN）的专属校验逻辑
+    if (admin.getRole() == Admin.AdminRole.ROLE_AREA_ADMIN) {
+        // 1. 若未填写区域ID（null或空字符串），直接放行（支持先创建管理员，后续补填）
+        if (admin.getAreaId() == null || admin.getAreaId().trim().isEmpty()) {
+            admin.setAreaId(null); // 统一置为null，避免空字符串冗余数据
+            // 无需校验，直接允许保存
         } else {
-            // 非区域管理员，清空区域ID，避免冗余数据
-            admin.setAreaId(null);
+            // 2. 若填写了区域ID，进行严格校验：区域存在 + 类型为校区（禁止市区）
+            String areaId = admin.getAreaId().trim();
+            // 校验区域是否存在
+            Area targetArea = areaRepository.findById(areaId)
+                    .orElseThrow(() -> new RuntimeException("关联的区域不存在：" + areaId));
+            // 核心校验：仅允许关联校区，禁止关联市区
+            if (Area.AreaType.zone.equals(targetArea.getAreaType())) {
+                throw new RuntimeException("区域管理员仅允许关联校区，不能关联市区，请重新选择");
+            }
+            // 校验通过，保留填写的合法校区ID
+            admin.setAreaId(areaId);
         }
-
-        return adminRepository.save(admin);
+    } else {
+        // 非区域管理员，清空区域ID，避免冗余数据
+        admin.setAreaId(null);
     }
 
+    return adminRepository.save(admin);
+}
+
+
     /**
      * 删除管理员
      */
diff --git a/src/main/resources/web/src/views/area/Campus.vue b/src/main/resources/web/src/views/area/Campus.vue
index bf196da..82fa3f1 100644
--- a/src/main/resources/web/src/views/area/Campus.vue
+++ b/src/main/resources/web/src/views/area/Campus.vue
@@ -50,6 +50,12 @@
             <td>{{ campus.managerPhone }}</td>
             <td>{{ formatDate(campus.createdTime) }}</td>
             <td class="operation-buttons">
+              <button
+                class="btn-stats"
+                @click="handleViewStats(campus.areaId, campus.areaName)"
+              >
+                统计
+              </button>
               <button
                 class="btn-edit"
                 @click="handleEdit(campus)"
@@ -65,7 +71,7 @@
             </td>
           </tr>
           <tr v-if="filteredCampus.length === 0">
-            <td colspan="7" class="no-data">
+            <td colspan="8" class="no-data">
               {{ loading ? '正在加载数据...' : '暂无校区数据' }}
             </td>
           </tr>
@@ -184,10 +190,87 @@
         </div>
       </div>
     </div>
+
+    <!-- 设备统计弹窗 -->
+    <div class="modal-mask" v-if="showStatsModal">
+      <div class="modal-container stats-modal">
+        <div class="modal-header">
+          <h3>设备统计信息</h3>
+          <button class="close-btn" @click="showStatsModal = false">×</button>
+        </div>
+        <div class="modal-body">
+          <div v-if="loadingStats" class="loading-stats">
+            正在加载统计信息...
+          </div>
+          <div v-else-if="currentAreaStats" class="stats-content">
+            <div class="stats-header">
+              <h4>{{ currentAreaStats.areaName }}设备统计</h4>
+            </div>
+
+            <div class="stats-grid">
+              <div class="stat-card">
+                <div class="stat-value">{{ currentAreaStats.totalDeviceCount || 0 }}</div>
+                <div class="stat-label">总设备数</div>
+              </div>
+              <div class="stat-card">
+                <div class="stat-value online">{{ currentAreaStats.onlineDeviceCount || 0 }}</div>
+                <div class="stat-label">在线设备</div>
+              </div>
+              <div class="stat-card">
+                <div class="stat-value offline">{{ currentAreaStats.offlineDeviceCount || 0 }}</div>
+                <div class="stat-label">离线设备</div>
+              </div>
+              <div class="stat-card">
+                <div class="stat-value fault">{{ currentAreaStats.faultDeviceCount || 0 }}</div>
+                <div class="stat-label">故障设备</div>
+              </div>
+              <div class="stat-card">
+                <div class="stat-value maker">{{ currentAreaStats.waterMakerCount || 0 }}</div>
+                <div class="stat-label">制水机</div>
+              </div>
+              <div class="stat-card">
+                <div class="stat-value supply">{{ currentAreaStats.waterSupplyCount || 0 }}</div>
+                <div class="stat-label">供水机</div>
+              </div>
+            </div>
+
+            <div class="stats-details">
+              <h5>详细统计</h5>
+              <div class="detail-item">
+                <span>在线率:</span>
+                <span class="detail-value">
+                  {{
+                    currentAreaStats.totalDeviceCount > 0
+                      ? ((currentAreaStats.onlineDeviceCount / currentAreaStats.totalDeviceCount) * 100).toFixed(2) + '%'
+                      : '0%'
+                  }}
+                </span>
+              </div>
+              <div class="detail-item">
+                <span>故障率:</span>
+                <span class="detail-value">
+                  {{
+                    currentAreaStats.totalDeviceCount > 0
+                      ? ((currentAreaStats.faultDeviceCount / currentAreaStats.totalDeviceCount) * 100).toFixed(2) + '%'
+                      : '0%'
+                  }}
+                </span>
+              </div>
+            </div>
+          </div>
+          <div v-else class="no-stats-data">
+            暂无统计信息
+          </div>
+
+          <div class="form-actions">
+            <button type="button" class="btn-cancel" @click="showStatsModal = false">关闭</button>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
-
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
@@ -223,6 +306,18 @@ interface Area {
   updatedTime?: Date
 }
 
+// 区域设备统计视图对象
+interface AreaDeviceStatsVO {
+  areaId: string
+  areaName: string
+  totalDeviceCount: number
+  onlineDeviceCount: number
+  offlineDeviceCount: number
+  faultDeviceCount: number
+  waterMakerCount: number
+  waterSupplyCount: number
+}
+
 // 响应式数据
 const campusList = ref<Area[]>([]) // 所有校区列表
 const cityList = ref<Area[]>([]) // 所有市区列表
@@ -235,11 +330,14 @@ const pageSize = ref(10)
 const showModal = ref(false)
 const isEdit = ref(false)
 const showDeleteConfirm = ref(false)
+const showStatsModal = ref(false)
+const currentAreaStats = ref<AreaDeviceStatsVO | null>(null)
 const deleteCampusId = ref('')
 const deleteCampusName = ref('')
 const loading = ref(false)  // 添加加载状态
 const saving = ref(false)   // 添加保存状态
 const deleting = ref(false) // 添加删除状态
+const loadingStats = ref(false) // 添加统计加载状态
 
 // 表单数据
 const formData = ref<Area>({
@@ -395,6 +493,7 @@ const fetchCityList = async () => {
 }
 
 // 获取区域管理员列表
+// 获取区域管理员列表 - 修改为获取可分配校区的区域管理员
 const fetchAdminList = async () => {
   try {
     const token = authStore.token
@@ -404,34 +503,37 @@ const fetchAdminList = async () => {
       return
     }
 
+    // 修改接口调用，使用新接口获取可分配校区的区域管理员
     const response = await request<{
       code: number
       msg: string
       data: Admin[]
-    }>('/api/web/admin/list', {
+    }>('/api/web/admin/available-area-admins', {
       method: 'GET',
     })
 
     if (response?.code === 200 && response?.data) {
+      // 过滤出区域管理员（保持原有逻辑以兼容）
       const areaAdmins = response.data.filter(admin =>
         admin.role === 'AREA_ADMIN' || admin.role === 'ROLE_AREA_ADMIN'
       )
       adminList.value = areaAdmins
     } else {
-      console.error('获取管理员列表失败:', response?.msg || '未知错误')
-      alert(`获取管理员列表失败：${response?.msg || '未知错误'}`)
+      console.error('获取可分配校区的区域管理员失败:', response?.msg || '未知错误')
+      alert(`获取可分配校区的区域管理员失败：${response?.msg || '未知错误'}`)
     }
   } catch (error: any) {
-    console.error('获取管理员列表异常:', error)
+    console.error('获取可分配校区的区域管理员异常:', error)
     const errorMsg = error.message.includes('401') || error.message.includes('403')
         ? '权限不足或登录已过期，请重新登录'
         : error.message.includes('Network')
             ? '网络连接失败，请检查网络'
-            : error.message || '获取管理员列表失败，请稍后重试'
-    alert(`获取管理员列表失败：${errorMsg}`)
+            : error.message || '获取可分配校区的区域管理员失败，请稍后重试'
+    alert(`获取可分配校区的区域管理员失败：${errorMsg}`)
   }
 }
 
+
 // 处理负责人选择变化 - 修改为传递管理员ID而不是姓名
 const onManagerChange = () => {
   if (selectedManager.value) {
@@ -562,14 +664,13 @@ const handleSave = async () => {
         code: number
         msg: string
         data: Area
-      }>('/api/web/area/update', {
-        method: 'POST', // 改为POST以匹配后端端点
+      }>(`/api/web/area/update/${formData.value.areaId}`, { // 修改URL格式以包含areaId
+        method: 'PUT', // 使用PUT方法
         headers: {
           'Content-Type': 'application/json',
           'Authorization': `Bearer ${authStore.token}` // 添加认证头
         },
         body: JSON.stringify({
-          areaId: formData.value.areaId,
           areaName: formData.value.areaName,
           areaType: 'campus',
           parentAreaId: formData.value.parentAreaId,
@@ -653,6 +754,7 @@ const handleSave = async () => {
   }
 }
 
+
 // 根据管理员ID获取管理员姓名
 const getManagerName = (managerId: string) => {
   if (!managerId) return '未分配'
@@ -660,6 +762,51 @@ const getManagerName = (managerId: string) => {
   return admin ? admin.adminName : '未知负责人'
 }
 
+// 获取区域设备统计信息
+const fetchAreaDeviceStats = async (areaId: string) => {
+  loadingStats.value = true
+  try {
+    const token = authStore.token
+    if (!token) {
+      console.warn('未获取到 Token，跳转到登录页')
+      router.push('/login')
+      return
+    }
+
+    const response = await request<{
+      code: number
+      msg: string
+      data: AreaDeviceStatsVO
+    }>(`/api/web/area/device-stats/${areaId}`, {
+      method: 'GET',
+    })
+
+    if (response?.code === 200 && response?.data) {
+      currentAreaStats.value = response.data
+      showStatsModal.value = true
+    } else {
+      const errorMsg = response?.msg || `获取统计信息失败（错误码：${response?.code || '未知'}）`
+      console.error('获取统计信息失败:', errorMsg)
+      alert(`获取统计信息失败：${errorMsg}`)
+    }
+  } catch (error: any) {
+    console.error('获取统计信息异常:', error)
+    const errorMsg = error.message.includes('401') || error.message.includes('403')
+        ? '权限不足或登录已过期，请重新登录'
+        : error.message.includes('Network')
+            ? '网络连接失败，请检查网络'
+            : error.message || '获取统计信息失败，请稍后重试'
+    alert(`获取统计信息失败：${errorMsg}`)
+  } finally {
+    loadingStats.value = false
+  }
+}
+
+// 处理查看统计信息
+const handleViewStats = (areaId: string, areaName: string) => {
+  document.title = `查看${areaName}统计信息`
+  fetchAreaDeviceStats(areaId)
+}
 
 // 初始化加载数据
 onMounted(async () => {
@@ -791,6 +938,22 @@ onMounted(async () => {
   opacity: 0.9;
 }
 
+/* 统计按钮样式 */
+.btn-stats {
+  background-color: #e6f7ff;
+  color: #1890ff;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  cursor: pointer;
+  border: none;
+  transition: opacity 0.3s;
+}
+
+.btn-stats:hover {
+  opacity: 0.9;
+}
+
 .no-data {
   text-align: center;
   padding: 40px 0;
@@ -971,6 +1134,103 @@ onMounted(async () => {
   white-space: nowrap;
 }
 
+/* 统计弹窗样式 */
+.stats-modal {
+  width: 600px;
+  max-width: 90%;
+}
+
+.stats-content {
+  padding: 16px 0;
+}
+
+.stats-header {
+  margin-bottom: 20px;
+  text-align: center;
+}
+
+.stats-header h4 {
+  margin: 0;
+  color: #333;
+  font-size: 18px;
+}
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+  margin-bottom: 24px;
+}
+
+.stat-card {
+  text-align: center;
+  padding: 16px;
+  border: 1px solid #f0f0f0;
+  border-radius: 8px;
+  background-color: #fafafa;
+}
+
+.stat-value {
+  font-size: 24px;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 4px;
+}
+
+.stat-value.online {
+  color: #52c41a;
+}
+
+.stat-value.offline {
+  color: #faad14;
+}
+
+.stat-value.fault {
+  color: #ff4d4f;
+}
+
+.stat-value.maker {
+  color: #722ed1;
+}
+
+.stat-value.supply {
+  color: #13c2c2;
+}
+
+.stat-label {
+  font-size: 14px;
+  color: #666;
+}
+
+.stats-details {
+  border-top: 1px solid #f0f0f0;
+  padding-top: 16px;
+}
+
+.stats-details h5 {
+  margin: 0 0 12px 0;
+  color: #333;
+  font-size: 16px;
+}
+
+.detail-item {
+  display: flex;
+  justify-content: space-between;
+  padding: 6px 0;
+  border-bottom: 1px solid #f8f8f8;
+}
+
+.detail-value {
+  font-weight: 500;
+  color: #1890ff;
+}
+
+.loading-stats,
+.no-stats-data {
+  text-align: center;
+  padding: 40px 0;
+  color: #8c8c8c;
+}
 
 /* 响应式调整 */
 @media (max-width: 768px) {
@@ -986,5 +1246,9 @@ onMounted(async () => {
   .campus-select, .area-select {
     width: 100%;
   }
+
+  .stats-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
 }
 </style>
diff --git a/src/main/resources/web/src/views/area/Urban.vue b/src/main/resources/web/src/views/area/Urban.vue
index 93a6027..b10fb5e 100644
--- a/src/main/resources/web/src/views/area/Urban.vue
+++ b/src/main/resources/web/src/views/area/Urban.vue
@@ -344,7 +344,6 @@ const confirmDelete = async () => {
 }
 
 // 保存片区信息
-// 在 handleSave 方法中修改新增逻辑
 const handleSave = async () => {
   saving.value = true
   try {
@@ -358,14 +357,25 @@ const handleSave = async () => {
     let response
 
     if (isEdit.value) {
-      // 编辑模式 - 保持原有逻辑
+      // 编辑模式 - 修改URL格式以包含areaId作为路径参数
       response = await request<{
         code: number
         msg: string
         data: Area
-      }>('/api/web/area/update', {
+      }>(`/api/web/area/update/${formData.value.areaId}`, { // 修改URL格式
         method: 'PUT',
-        body: JSON.stringify(formData.value)
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${authStore.token}` // 添加认证头
+        },
+        body: JSON.stringify({
+          areaName: formData.value.areaName,
+          areaType: formData.value.areaType,
+          parentAreaId: formData.value.parentAreaId,
+          address: formData.value.address,
+          manager: formData.value.manager,
+          managerPhone: formData.value.managerPhone
+        })
       })
 
       if (response.code === 200) {
@@ -392,6 +402,10 @@ const handleSave = async () => {
         data: Area
       }>('/api/web/area/add', {
         method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${authStore.token}` // 添加认证头
+        },
         body: JSON.stringify(newArea)
       })
 
@@ -418,6 +432,8 @@ const handleSave = async () => {
 }
 
 
+
+
 // 初始化加载数据
 onMounted(() => {
   console.log('Token:', authStore.token)
diff --git a/src/main/resources/web/src/views/equipment/WaterMaker.vue b/src/main/resources/web/src/views/equipment/WaterMaker.vue
index 6c7d192..1085f96 100644
--- a/src/main/resources/web/src/views/equipment/WaterMaker.vue
+++ b/src/main/resources/web/src/views/equipment/WaterMaker.vue
@@ -17,17 +17,41 @@
           >
           <button class="search-btn" @click="handleSearch">搜索</button>
         </div>
-        <select
-          v-model="selectedArea"
-          class="filter-select"
-          @change="currentPage = 1"
-        >
-          <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 class="area-filter">
+          <select
+            v-model="selectedCity"
+            class="filter-select"
+            @change="onCityChange"
+          >
+            <option value="">选择市区</option>
+            <option
+              v-for="city in cityList"
+              :key="city.areaId"
+              :value="city.areaId"
+            >
+              {{ city.areaName }}
+            </option>
+          </select>
+
+          <select
+            v-model="selectedCampus"
+            class="filter-select"
+            :disabled="!selectedCity"
+            @change="onCampusChange"
+          >
+            <option value="">选择校区</option>
+            <option
+              v-for="campus in campusList"
+              :key="campus.areaId"
+              :value="campus.areaId"
+            >
+              {{ campus.areaName }}
+            </option>
+          </select>
+        </div>
+
         <select
           v-model="selectedStatus"
           class="filter-select"
@@ -266,7 +290,7 @@
         <form @submit.prevent="confirmFault">
           <div class="form-group">
             <label>故障类型:</label>
-            <input v-model="faultInfo.faultType" type="text" placeholder="请输入故障类型" required>
+            <textarea v-model="faultInfo.faultType" placeholder="请输入故障类型" required></textarea>
           </div>
           <div class="form-group">
             <label>故障描述:</label>
@@ -317,7 +341,8 @@ interface Area {
 // 响应式数据
 const devices = ref<WaterMakerDevice[]>([])
 const searchKeyword = ref('')
-const selectedArea = ref('') // 片区筛选值
+const selectedCity = ref('') // 市区筛选值
+const selectedCampus = ref('') // 校区筛选值
 const selectedStatus = ref('') // 状态筛选值
 const currentPage = ref(1)
 const pageSize = 10 // 每页显示数量
@@ -382,9 +407,25 @@ const loadDevices = async (): Promise<void> => {
 
     console.log('开始加载制水机设备数据...')
 
+    // 构建请求参数
+    const params = new URLSearchParams()
+    if (selectedStatus.value && selectedStatus.value !== '') {
+      params.append('status', selectedStatus.value)
+    }
+    // 如果选择了校区，则按校区筛选；如果只选择了市区，则按市区筛选；否则不筛选
+    if (selectedCampus.value && selectedCampus.value !== '') {
+      params.append('areaId', selectedCampus.value)
+    } else if (selectedCity.value && selectedCity.value !== '') {
+      params.append('areaId', selectedCity.value)
+    }
+    params.append('deviceType', 'water_maker')
+
+    const queryString = params.toString()
+    const url = `/api/web/device-status/by-type${queryString ? `?${queryString}` : ''}`
+
     // 直接按设备类型查询所有制水机
     const result = await request<ResultVO<WaterMakerDevice[]>>(
-      `/api/web/device-status/by-type?deviceType=water_maker`,
+      url,
       { method: 'GET' }
     )
 
@@ -491,6 +532,20 @@ const loadCampusListByCity = async (cityId: string): Promise<void> => {
   }
 }
 
+// 市区选择变化时的处理
+const onCityChange = async () => {
+  // 清空校区选择
+  selectedCampus.value = ''
+  campusList.value = []
+
+  if (selectedCity.value) {
+    await loadCampusListByCity(selectedCity.value)
+  } else {
+    // 如果清空市区选择，也清空校区列表
+    campusList.value = []
+  }
+}
+
 // 根据市区ID加载编辑模式下的校区列表
 const loadEditCampusListByCity = async (cityId: string): Promise<void> => {
   try {
@@ -529,18 +584,8 @@ const loadEditCampusListByCity = async (cityId: string): Promise<void> => {
   }
 }
 
-// 市区选择变化时的处理
-const onCityChange = async () => {
-  // 清空校区选择和设备ID
-  selectedCampusId.value = ''
-  campusList.value = []
 
-  if (selectedCityId.value) {
-    await loadCampusListByCity(selectedCityId.value)
-  }
-}
-
-// 校区选择变化时的处理
+// 校区选择变化时的处理（用于添加设备）
 const onCampusChange = () => {
   // 设置areaId为选中校区的areaName（不是areaId）
   const selectedCampus = campusList.value.find(campus => campus.areaId === selectedCampusId.value)
@@ -587,7 +632,18 @@ const filteredDevices = computed(() => {
         device.deviceId.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
         device.installLocation.toLowerCase().includes(searchKeyword.value.toLowerCase())
 
-    const areaMatch = selectedArea.value === '' || device.areaId === selectedArea.value
+    // 如果选择了校区，则匹配校区；如果只选择了市区，则匹配市区；否则不过滤片区
+    let areaMatch = true
+    if (selectedCampus.value && selectedCampus.value !== '') {
+      areaMatch = device.areaId === selectedCampus.value ||
+                 device.areaId === campusList.value.find(c => c.areaId === selectedCampus.value)?.areaName
+    } else if (selectedCity.value && selectedCity.value !== '') {
+      // 检查设备的片区是否属于所选市区的校区
+      areaMatch = campusList.value.some(campus =>
+        device.areaId === campus.areaId || device.areaId === campus.areaName
+      ) || device.areaId === selectedCity.value
+    }
+
     const statusMatch = selectedStatus.value === '' || device.status === selectedStatus.value
 
     return keywordMatch && areaMatch && statusMatch
@@ -616,16 +672,10 @@ const formatStatus = (status: DeviceStatus): string => {
   return statusMap[status] || status
 }
 
-// 移除时间格式化函数
-// const formatDate = (dateString?: string): string => {
-//   if (!dateString) return '-'
-//   const date = new Date(dateString)
-//   return date.toLocaleString('zh-CN')
-// }
-
 // 搜索处理
 const handleSearch = () => {
   currentPage.value = 1 // 重置到第一页
+  loadDevices() // 重新加载数据
 }
 
 // 查看详情
@@ -633,8 +683,6 @@ const viewDevice = (id: string) => {
   router.push(`/home/equipment/water-maker/${id}`)
 }
 
-// 显示离线模态框
-// 显示故障模态框
 // 确认设置为离线
 const confirmOffline = async () => {
   try {
@@ -709,7 +757,6 @@ const confirmFault = async () => {
   }
 }
 
-// 更新设备状态为在线
 // 删除设备
 const deleteDevice = async (deviceId: string) => {
   if (!confirm(`确定要删除设备 ${deviceId} 吗？此操作不可恢复。`)) {
@@ -916,8 +963,8 @@ const addDevice = async () => {
 // 组件挂载时加载数据
 onMounted(async () => {
   console.log('🚀 开始加载设备数据...')
-  await loadDevices()
   await loadCityList()
+  await loadDevices() // 加载设备数据
 })
 </script>
 
@@ -971,6 +1018,7 @@ onMounted(async () => {
   display: flex;
   gap: 12px;
   align-items: center;
+  flex-wrap: wrap;
 }
 
 .search-box {
@@ -994,12 +1042,18 @@ onMounted(async () => {
   cursor: pointer;
 }
 
+.area-filter {
+  display: flex;
+  gap: 8px;
+}
+
 .filter-select {
   padding: 8px 12px;
   border: 1px solid #ddd;
   border-radius: 4px;
   background: white;
   cursor: pointer;
+  min-width: 120px;
 }
 
 .equipment-table {
@@ -1227,10 +1281,14 @@ onMounted(async () => {
     width: 100%;
   }
 
-  .search-box, .filter-select {
+  .search-box, .area-filter, .filter-select {
     width: 100%;
   }
 
+  .area-filter {
+    flex-direction: column;
+  }
+
   .modal-content {
     width: 90%;
     min-width: auto;
diff --git a/src/main/resources/web/src/views/equipment/WaterSupplier.vue b/src/main/resources/web/src/views/equipment/WaterSupplier.vue
index 77fb97f..9a5627e 100644
--- a/src/main/resources/web/src/views/equipment/WaterSupplier.vue
+++ b/src/main/resources/web/src/views/equipment/WaterSupplier.vue
@@ -22,18 +22,39 @@
           <button class="search-btn">搜索</button>
         </div>
 
-        <!-- 片区筛选 -->
-        <select
-          v-model="selectedArea"
-          class="filter-select"
-          @change="handleSearch"
-        >
-          <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 class="area-filter">
+          <select
+            v-model="selectedCity"
+            class="filter-select"
+            @change="onCityChange"
+          >
+            <option value="">选择市区</option>
+            <option
+              v-for="city in cityList"
+              :key="city.areaId"
+              :value="city.areaId"
+            >
+              {{ city.areaName }}
+            </option>
+          </select>
+
+          <select
+            v-model="selectedCampus"
+            class="filter-select"
+            :disabled="!selectedCity"
+            @change="onCampusChange"
+          >
+            <option value="">选择校区</option>
+            <option
+              v-for="campus in campusList"
+              :key="campus.areaId"
+              :value="campus.areaId"
+            >
+              {{ campus.areaName }}
+            </option>
+          </select>
+        </div>
 
         <!-- 状态筛选 -->
         <select
@@ -127,10 +148,13 @@
             <label>所属片区:</label>
             <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>
+              <option
+                v-for="area in cityList"
+                :key="area.areaId"
+                :value="area.areaId"
+              >
+                {{ area.areaName }}
+              </option>
             </select>
           </div>
           <div class="form-group">
@@ -172,10 +196,13 @@
             <label>所属片区:</label>
             <select v-model="editingDevice.areaId" @change="loadAvailableMakersForEdit" required>
               <option value="">请选择片区</option>
-              <option value="A">A区</option>
-              <option value="B">B区</option>
-              <option value="C">C区</option>
-              <option value="D">D区</option>
+              <option
+                v-for="area in cityList"
+                :key="area.areaId"
+                :value="area.areaId"
+              >
+                {{ area.areaName }}
+              </option>
             </select>
           </div>
           <div class="form-group">
@@ -243,16 +270,32 @@ interface DeviceDetail {
   parentMakerId?: string
 }
 
+// 区域类型定义
+interface Area {
+  areaId: string
+  areaName: string
+  areaType: string
+  parentAreaId: string | null
+  address: string
+  manager: string
+  managerPhone: string
+}
+
 // 响应式数据
 const devices = ref<WaterSupplierDevice[]>([])
 const searchKeyword = ref('')
-const selectedArea = ref('') // 片区筛选值
+const selectedCity = ref('') // 市区筛选值
+const selectedCampus = ref('') // 校区筛选值
 const selectedStatus = ref('') // 状态筛选值
 const currentPage = ref(1)
 const pageSize = 10 // 每页显示数量
 const router = useRouter()
 const authStore = useAuthStore()
 
+// 片区相关数据
+const cityList = ref<Area[]>([]) // 市区列表
+const campusList = ref<Area[]>([]) // 校区列表
+
 // 新增：添加设备相关状态
 const showAddModal = ref(false)
 const newDevice = ref({
@@ -283,6 +326,103 @@ const availableMakersForEdit = ref<{id: string, name: string}[]>([])
 const showDeleteModal = ref(false)
 const currentDeviceId = ref('')
 
+// 加载市区列表
+const loadCityList = async (): Promise<void> => {
+  try {
+    const token = authStore.token
+    if (!token) {
+      console.warn('未获取到 Token，跳转到登录页')
+      await router.push('/login')
+      return
+    }
+
+    console.log('开始加载市区列表...')
+
+    const result = await request<any>('/api/web/area/cities', { method: 'GET' })
+
+    if (result && typeof result === 'object' && 'code' in result) {
+      if (result.code === 200 && result.data && Array.isArray(result.data)) {
+        cityList.value = result.data
+        console.log(`获取到${cityList.value.length}个市区`)
+      } else {
+        console.warn('API响应非成功状态或数据格式错误:', result)
+        cityList.value = []
+      }
+    } else if (Array.isArray(result)) {
+      cityList.value = result
+    } else {
+      console.warn('API响应数据格式错误:', result)
+      cityList.value = []
+    }
+  } catch (error) {
+    console.error('加载市区列表失败:', error)
+    cityList.value = []
+    if ((error as Error).message.includes('401')) {
+      authStore.logout()
+      await router.push('/login')
+    }
+  }
+}
+
+// 根据市区ID加载校区列表
+const loadCampusListByCity = async (cityId: string): Promise<void> => {
+  try {
+    const token = authStore.token
+    if (!token) {
+      console.warn('未获取到 Token，跳转到登录页')
+      await router.push('/login')
+      return
+    }
+
+    console.log(`开始加载市区 ${cityId} 的校区列表...`)
+
+    const result = await request<any>(`/api/web/area/campuses/${cityId}`, { method: 'GET' })
+
+    if (result && typeof result === 'object' && 'code' in result) {
+      if (result.code === 200 && result.data && Array.isArray(result.data)) {
+        campusList.value = result.data
+        console.log(`获取到${campusList.value.length}个校区`)
+      } else {
+        console.warn('API响应非成功状态或数据格式错误:', result)
+        campusList.value = []
+      }
+    } else if (Array.isArray(result)) {
+      campusList.value = result
+    } else {
+      console.warn('API响应数据格式错误:', result)
+      campusList.value = []
+    }
+  } catch (error) {
+    console.error('加载校区列表失败:', error)
+    campusList.value = []
+    if ((error as Error).message.includes('401')) {
+      authStore.logout()
+      await router.push('/login')
+    }
+  }
+}
+
+// 市区选择变化时的处理
+const onCityChange = async () => {
+  // 清空校区选择
+  selectedCampus.value = ''
+  campusList.value = []
+
+  if (selectedCity.value) {
+    await loadCampusListByCity(selectedCity.value)
+  } else {
+    // 如果清空市区选择，也清空校区列表
+    campusList.value = []
+  }
+}
+
+// 校区选择变化时的处理
+const onCampusChange = () => {
+  // 选择校区后直接触发设备加载
+  currentPage.value = 1
+  loadWaterSuppliers()
+}
+
 // 加载供水机列表
 const loadWaterSuppliers = async () => {
   try {
@@ -299,8 +439,9 @@ const loadWaterSuppliers = async () => {
     if (selectedStatus.value && selectedStatus.value !== '') {
       params.append('status', selectedStatus.value);
     }
-    if (selectedArea.value && selectedArea.value !== '') {
-      params.append('areaId', selectedArea.value);
+    // 只有在选择了校区时才按校区筛选，市区选择不作为筛选条件
+    if (selectedCampus.value && selectedCampus.value !== '') {
+      params.append('areaId', selectedCampus.value)
     }
     params.append('deviceType', 'water_supply'); // 供水机类型
 
@@ -421,13 +562,21 @@ const loadAvailableMakersForEdit = async () => {
 }
 
 // 多条件过滤设备数据
+// 修改 filteredDevices 的计算属性，只根据校区进行筛选
 const filteredDevices = computed(() => {
   return devices.value.filter(device => {
     const keywordMatch = searchKeyword.value.trim() === '' ||
       device.id.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
       device.location.toLowerCase().includes(searchKeyword.value.toLowerCase())
 
-    const areaMatch = selectedArea.value === '' || device.area === selectedArea.value
+    // 只根据校区进行筛选，如果校区未选择则不过滤片区
+    let areaMatch = true
+    if (selectedCampus.value && selectedCampus.value !== '') {
+      // 只有在选择了校区时才进行片区匹配
+      areaMatch = device.area === selectedCampus.value
+    }
+    // 如果没有选择校区，则不进行片区过滤
+
     const statusMatch = selectedStatus.value === '' || device.status === selectedStatus.value
 
     return keywordMatch && areaMatch && statusMatch
@@ -646,7 +795,8 @@ const deleteDevice = async () => {
 }
 
 // 页面加载时获取数据
-onMounted(() => {
+onMounted(async () => {
+  await loadCityList() // 加载市区列表
   loadWaterSuppliers()
 })
 </script>
@@ -701,6 +851,7 @@ onMounted(() => {
   display: flex;
   gap: 12px;
   align-items: center;
+  flex-wrap: wrap;
 }
 
 .search-box {
@@ -724,12 +875,18 @@ onMounted(() => {
   cursor: pointer;
 }
 
+.area-filter {
+  display: flex;
+  gap: 8px;
+}
+
 .filter-select {
   padding: 8px 12px;
   border: 1px solid #ddd;
   border-radius: 4px;
   background: white;
   cursor: pointer;
+  min-width: 120px;
 }
 
 .equipment-table {
@@ -957,14 +1114,17 @@ onMounted(() => {
     width: 100%;
   }
 
-  .search-box, .filter-select {
+  .search-box, .area-filter, .filter-select {
     width: 100%;
   }
 
+  .area-filter {
+    flex-direction: column;
+  }
+
   .modal-content {
     width: 90%;
     min-width: auto;
   }
 }
 </style>
-
diff --git a/src/main/resources/web/src/views/personnel/Admin.vue b/src/main/resources/web/src/views/personnel/Admin.vue
index 400fb85..bc8d0fe 100644
--- a/src/main/resources/web/src/views/personnel/Admin.vue
+++ b/src/main/resources/web/src/views/personnel/Admin.vue
@@ -1,4 +1,3 @@
-<!-- src/views/personnel/Admin.vue -->
 <template>
   <div class="admin-page">
     <!-- 页面标题和面包屑 -->
@@ -37,14 +36,14 @@
         </tr>
         </thead>
         <tbody>
-        <tr v-for="admin in filteredAdmins" :key="admin.adminId">
+        <tr v-for="admin in paginatedAdmins" :key="admin.adminId">
           <td>{{ admin.name }}</td>
           <td>{{ admin.account }}</td>
           <td>{{ admin.phone }}</td>
           <td>{{ formatRole(admin.role) }}</td>
           <td>
             <span v-if="admin.role === 'ROLE_AREA_ADMIN'" class="area-list">
-              {{ admin.areas ? admin.areas.join(', ') : '未关联区域' }}
+              {{ admin.areaName || (admin.areaId ? getAreaNameById(admin.areaId) : '') || '未关联区域' }}
             </span>
             <span v-else>-</span>
           </td>
@@ -75,7 +74,7 @@
             </button>
           </td>
         </tr>
-        <tr v-if="filteredAdmins.length === 0">
+        <tr v-if="paginatedAdmins.length === 0">
           <td colspan="7" class="no-data">暂无管理员数据</td>
         </tr>
         </tbody>
@@ -92,7 +91,7 @@
         上一页
       </button>
       <span class="page-info">
-        第 {{ currentPage }} 页 / 共 {{ totalPages }} 页
+        第 {{ currentPage }} 页 / 共 {{ totalPages }} 页 (共 {{ filteredAdmins.length }} 条记录)
       </span>
       <button
           class="page-btn"
@@ -133,17 +132,15 @@
               </select>
             </div>
 
-            <!-- 区域选择 - 仅当选择区域管理员时显示 -->
+            <!-- 区域选择 - 仅当选择区域管理员时显示，改为单选下拉菜单，选填 -->
             <div class="form-group" v-if="formData.role === 'ROLE_AREA_ADMIN'">
-              <label class="form-label required">关联区域：</label>
-              <select v-model="selectedAreas" multiple required>
-                <option v-for="area in areaList" :key="area.areaId" :value="area.areaId">
+              <label class="form-label">关联片区（选填）：</label>
+              <select v-model="selectedAreaId">
+                <option value="">请选择片区（可选）</option>
+                <option v-for="area in unassignedAreas" :key="area.areaId" :value="area.areaId">
                   {{ area.areaName }}
                 </option>
               </select>
-              <p v-if="!selectedAreas.length && formData.role === 'ROLE_AREA_ADMIN'" class="error-message">
-                请选择关联的区域
-              </p>
             </div>
 
             <div class="form-group">
@@ -194,8 +191,13 @@
               </select>
             </div>
 
-            <!-- 区域选择 - 仅当选择区域管理员时显示 -->
-            <!-- 已移除，不再允许编辑关联区域 -->
+            <!-- 编辑表单中显示关联区域（只读） -->
+            <div class="form-group" v-if="editFormData.role === 'ROLE_AREA_ADMIN' && originalAdminData?.areaId">
+              <label class="form-label">关联区域：</label>
+              <div class="readonly-area">
+                {{ getAreaNameById(originalAdminData.areaId) }}
+              </div>
+            </div>
 
             <div class="form-group">
               <label for="edit-password" class="form-label">重置密码：</label>
@@ -246,7 +248,8 @@ interface Admin {
   phone: string
   role: string
   status: AdminStatus
-  areas?: string[] // 关联的区域名称数组
+  areaId?: string
+  areaName?: string
 }
 
 // 表单数据接口
@@ -256,6 +259,7 @@ interface FormData {
   phone: string
   role: string
   password?: string
+  areaId?: string
 }
 
 // 编辑表单数据接口
@@ -266,6 +270,7 @@ interface EditFormData {
   phone: string
   role: string
   password?: string
+  areaId?: string
 }
 
 const authStore = useAuthStore()
@@ -280,11 +285,11 @@ const loading = ref(false)
 const showAddModal = ref(false)
 const showEditModal = ref(false)
 
-// 区域列表
-const areaList = ref<Area[]>([])
+// 未分配的区域列表（未设置负责人的片区）
+const unassignedAreas = ref<Area[]>([])
 
-// 选中的区域ID数组（新增）
-const selectedAreas = ref<string[]>([])
+// 选中的区域ID（单选，新增）
+const selectedAreaId = ref<string>('')
 
 // 存储原始管理员数据（用于编辑时保留原有区域关联）
 const originalAdminData = ref<Admin | null>(null)
@@ -295,7 +300,8 @@ const formData = ref<FormData>({
   account: '',
   phone: '',
   role: 'ROLE_SUPER_ADMIN',
-  password: ''
+  password: '',
+  areaId: undefined
 })
 
 // 编辑表单数据
@@ -305,11 +311,12 @@ const editFormData = ref<EditFormData>({
   account: '',
   phone: '',
   role: 'ROLE_SUPER_ADMIN',
-  password: ''
+  password: '',
+  areaId: undefined
 })
 
-// 加载区域列表
-const loadAreaList = async () => {
+// 加载未设置负责人的区域列表
+const loadUnassignedAreas = async () => {
   try {
     const token = authStore.token
 
@@ -319,17 +326,17 @@ const loadAreaList = async () => {
       return
     }
 
-    const response = await request<ResultVO<Area[]>>('/api/web/area/list', {
+    const response = await request<ResultVO<Area[]>>('/api/web/area/without-manager', {
       method: 'GET',
     })
 
     if (response.code === 200) {
-      areaList.value = response.data || []
+      unassignedAreas.value = response.data || []
     } else {
-      console.error('获取区域列表失败:', response.message)
+      console.error('获取未设置负责人片区列表失败:', response.message)
     }
   } catch (error: any) {
-    console.error('请求区域列表异常:', error)
+    console.error('请求未设置负责人片区列表异常:', error)
     if (error.message.includes('401')) {
       authStore.logout()
       router.push('/login')
@@ -366,7 +373,8 @@ const fetchAdminList = async () => {
         phone: admin.phone || '未知电话',
         role: admin.role || '未知角色',
         status: 'active' as AdminStatus,
-        areas: admin.areas || [] // 添加关联区域信息
+        areaId: admin.areaId,
+        areaName: admin.areaName || undefined // 添加区域名称
       }))
     } else {
       const errorMsg = response.message || `获取失败（错误码：${response.code}）`
@@ -401,6 +409,15 @@ const formatRole = (role: string): string => {
   return roleMap[role] || role
 }
 
+// 根据区域ID获取区域名称
+// 在script部分添加类型安全的函数
+const getAreaNameById = (areaId: string | undefined): string => {
+  if (!areaId) return '未知区域'
+  const area = unassignedAreas.value.find(a => a.areaId === areaId)
+  return area ? area.areaName : '未知区域'
+}
+
+
 // 筛选后的管理员列表
 const filteredAdmins = computed(() => {
   return admins.value.filter(admin => {
@@ -411,7 +428,14 @@ const filteredAdmins = computed(() => {
   })
 })
 
-// 分页计算
+// 分页计算 - 计算当前页显示的数据
+const paginatedAdmins = computed(() => {
+  const start = (currentPage.value - 1) * pageSize
+  const end = start + pageSize
+  return filteredAdmins.value.slice(start, end)
+})
+
+// 总页数计算
 const totalPages = computed(() => {
   return Math.ceil(filteredAdmins.value.length / pageSize)
 })
@@ -425,7 +449,7 @@ const handleSearch = () => {
 // 角色变化处理 - 清空区域选择
 const handleRoleChange = () => {
   if (formData.value.role !== 'ROLE_AREA_ADMIN') {
-    selectedAreas.value = []
+    selectedAreaId.value = ''  // 清空单选区域
   }
 }
 
@@ -438,7 +462,7 @@ const handleEditRoleChange = () => {
 
 // 页面加载时获取数据
 onMounted(async () => {
-  await loadAreaList()
+  await loadUnassignedAreas()
   fetchAdminList()
 })
 
@@ -483,7 +507,8 @@ const handleEdit = async (id: string) => {
         account: adminToEdit.account,
         phone: adminToEdit.phone,
         role: adminToEdit.role,
-        password: ''
+        password: '',
+        areaId: adminToEdit.areaId
       };
 
       showEditModal.value = true;
@@ -505,7 +530,7 @@ const handleEditSubmit = async () => {
       phone: editFormData.value.phone,
       role: editFormData.value.role,
       password: editFormData.value.password || undefined,
-      // areaIds: undefined // 不传递区域信息
+      // areaId: undefined // 不传递区域信息，因为不允许编辑关联区域
     };
 
     const response = await request<ResultVO>(`/api/web/admin/save`, {
@@ -523,7 +548,8 @@ const handleEditSubmit = async () => {
         account: '',
         phone: '',
         role: 'ROLE_SUPER_ADMIN',
-        password: ''
+        password: '',
+        areaId: undefined
       };
       originalAdminData.value = null;
       // 重新获取列表
@@ -584,20 +610,29 @@ const performDelete = async (id: string) => {
   }
 }
 
+// 添加区域过滤方法
+const campusAreas = computed(() => {
+  return unassignedAreas.value.filter(area => area.areaType === '校园')
+})
+
 // 提交新增管理员表单
 const handleSubmit = async () => {
   try {
-    // 验证区域管理员是否选择了区域
-    if (formData.value.role === 'ROLE_AREA_ADMIN' && (!selectedAreas.value || selectedAreas.value.length === 0)) {
-      alert('区域管理员必须关联至少一个区域')
-      return
-    }
-
-    // 补充默认密码
+    // 补充默认密码和区域ID
     const submitData = {
-      ...formData.value,
+      adminName: formData.value.name,  // 修改这里：从 name 改为 adminName
+      account: formData.value.account,
+      phone: formData.value.phone,
+      role: formData.value.role,
       password: formData.value.password || '123456',
-      areaIds: formData.value.role === 'ROLE_AREA_ADMIN' ? selectedAreas.value : undefined
+      // 只有在选择了区域时才传递areaId
+      areaId: selectedAreaId.value ? selectedAreaId.value : undefined
+    }
+
+    // 验证账号唯一性等其他验证
+    if (!formData.value.name || !formData.value.account || !formData.value.phone) {
+      alert('请填写必填项：姓名、账号、联系电话')
+      return
     }
 
     const response = await request<ResultVO>(`/api/web/admin/save`, {
@@ -614,9 +649,10 @@ const handleSubmit = async () => {
         account: '',
         phone: '',
         role: 'ROLE_SUPER_ADMIN',
-        password: ''
+        password: '',
+        areaId: undefined
       }
-      selectedAreas.value = [] // 重置区域选择
+      selectedAreaId.value = '' // 重置区域选择
       // 重新获取列表
       fetchAdminList()
     } else {
@@ -627,6 +663,7 @@ const handleSubmit = async () => {
     alert(`添加管理员失败：${error.message}`)
   }
 }
+
 </script>
 
 <style scoped>
@@ -895,6 +932,14 @@ const handleSubmit = async () => {
   height: 120px;
 }
 
+.readonly-area {
+  padding: 8px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  background-color: #f5f5f5;
+  font-size: 14px;
+}
+
 .error-message {
   color: #cf1322;
   font-size: 12px;
-- 
2.34.1