From 230a58494f2e80d179a4ee4672ec81e5439ed3b0 Mon Sep 17 00:00:00 2001
From: ZHW <1941286652@qq.com>
Date: Sun, 4 Jan 2026 21:33:03 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8E=BB=E6=8E=89=E7=AE=A1=E7=90=86=E5=91=98?=
 =?UTF-8?q?=E7=9A=84=E7=8A=B6=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../web/src/components/layout/AppHeader.vue   | 192 ++++++++-
 .../resources/web/src/views/LoginView.vue     |   1 -
 .../src/views/personnel/MaintenanceRecord.vue | 383 ++++++++++++++++--
 3 files changed, 531 insertions(+), 45 deletions(-)

diff --git a/src/main/resources/web/src/components/layout/AppHeader.vue b/src/main/resources/web/src/components/layout/AppHeader.vue
index f2fb007..5624472 100644
--- a/src/main/resources/web/src/components/layout/AppHeader.vue
+++ b/src/main/resources/web/src/components/layout/AppHeader.vue
@@ -4,28 +4,107 @@
       <h1 class="system-title">校园矿化水系统</h1>
     </div>
     <div class="header-right">
-      <div class="user-info" @click="goToProfile">
-        <div class="user-avatar">
-          <img :src="userAvatar" alt="用户头像" />
+      <!-- 用户信息下拉菜单 -->
+      <div class="user-dropdown">
+        <div class="user-info" @click="toggleDropdown">
+          <div class="user-avatar">
+            <img :src="userAvatar" alt="用户头像" />
+          </div>
+          <span class="user-name">{{ currentUser?.username || '未登录' }}</span>
+          <div class="dropdown-arrow">▼</div>
+        </div>
+
+        <!-- 下拉菜单 -->
+        <div v-if="showDropdown" class="dropdown-menu" @click="closeDropdown">
+          <div class="user-menu-header">
+            <div class="user-menu-avatar">
+              <img :src="userAvatar" alt="用户头像" />
+            </div>
+            <div class="user-menu-info">
+              <div class="user-menu-name">{{ currentUser?.username || '未登录' }}</div>
+              <div class="user-menu-role">{{ currentUser?.role || '普通用户' }}</div>
+            </div>
+          </div>
+          <div class="dropdown-divider"></div>
+          <div class="dropdown-item" @click="switchUser">
+            <i class="icon-switch"></i>
+            <span>切换用户</span>
+          </div>
+          <div class="dropdown-item" @click="logout">
+            <i class="icon-logout"></i>
+            <span>退出登录</span>
+          </div>
         </div>
-        <span class="user-name">张管理员</span>
-        <div class="dropdown-arrow">▼</div>
       </div>
     </div>
   </header>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, computed, onMounted, onUnmounted } from 'vue'
 import { useRouter } from 'vue-router'
+import { useAuthStore } from '@/stores/auth'
 
-const userAvatar = ref('images/用户界面/u106.jpg') // 根据实际路径调整
+// 使用更美观的默认头像
+const userAvatar = ref('https://ui-avatars.com/api/?name=User&background=667eea&color=fff&size=36')
 const router = useRouter()
+const authStore = useAuthStore()
+const showDropdown = ref(false)
+
+// 计算属性获取当前用户信息
+const currentUser = computed(() => {
+  const user = authStore.userInfo
+  if (user) {
+    // 更新头像URL
+    const name = user.realName || user.username || 'User'
+    userAvatar.value = `https://ui-avatars.com/api/?name=${encodeURIComponent(name)}&background=667eea&color=fff&size=36`
+  }
+  return user
+})
+
+// 切换下拉菜单显示状态
+const toggleDropdown = (event: Event) => {
+  event.stopPropagation()
+  showDropdown.value = !showDropdown.value
+}
+
+// 关闭下拉菜单
+const closeDropdown = (event: Event) => {
+  event.stopPropagation()
+  // 不立即关闭，让子元素点击事件处理完
+}
 
-// 跳转到个人信息页面
-const goToProfile = () => {
-  router.push('/home/profile')
+// 点击文档关闭下拉菜单
+const handleClickOutside = (event: Event) => {
+  const target = event.target as HTMLElement
+  if (!target.closest('.user-dropdown')) {
+    showDropdown.value = false
+  }
 }
+
+// 切换用户（跳转到登录页面）
+const switchUser = () => {
+  showDropdown.value = false
+  authStore.logout() // 先清除当前登录状态
+  router.push('/')
+}
+
+// 退出登录
+const logout = () => {
+  showDropdown.value = false
+  authStore.logout()
+  router.push('/')
+}
+
+// 监听点击外部区域关闭下拉菜单
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside)
+})
+
+// 组件卸载时移除事件监听
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside)
+})
 </script>
 
 <style scoped>
@@ -39,6 +118,7 @@ const goToProfile = () => {
   padding: 0 30px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   z-index: 1000;
+  position: relative;
 }
 
 .system-title {
@@ -47,6 +127,11 @@ const goToProfile = () => {
   margin: 0;
 }
 
+.user-dropdown {
+  position: relative;
+  display: inline-block;
+}
+
 .user-info {
   display: flex;
   align-items: center;
@@ -84,4 +169,89 @@ const goToProfile = () => {
   font-size: 12px;
   opacity: 0.8;
 }
-</style>
\ No newline at end of file
+
+.dropdown-menu {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
+  min-width: 240px;
+  z-index: 1001;
+  margin-top: 8px;
+  overflow: hidden;
+}
+
+.user-menu-header {
+  padding: 16px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.user-menu-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: #f0f0f0;
+  overflow: hidden;
+}
+
+.user-menu-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.user-menu-info {
+  flex: 1;
+}
+
+.user-menu-name {
+  font-weight: 500;
+  color: #333;
+  margin-bottom: 4px;
+}
+
+.user-menu-role {
+  font-size: 12px;
+  color: #666;
+}
+
+.dropdown-divider {
+  height: 1px;
+  background: #f0f0f0;
+  margin: 4px 0;
+}
+
+.dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+  color: #333;
+  font-size: 14px;
+}
+
+.dropdown-item:hover {
+  background: #f5f5f5;
+}
+
+.dropdown-item i {
+  width: 16px;
+  height: 16px;
+  display: inline-block;
+}
+
+.icon-switch::before {
+  content: "🔄";
+}
+
+.icon-logout::before {
+  content: "🚪";
+}
+</style>
diff --git a/src/main/resources/web/src/views/LoginView.vue b/src/main/resources/web/src/views/LoginView.vue
index d798e05..31f1b8f 100644
--- a/src/main/resources/web/src/views/LoginView.vue
+++ b/src/main/resources/web/src/views/LoginView.vue
@@ -44,7 +44,6 @@
             <input type="checkbox" v-model="loginForm.rememberMe" />
             <span class="checkbox-text">记住我</span>
           </label>
-          <a href="#" class="forgot-password">忘记密码？</a>
         </div>
 
         <button type="submit" class="login-button" :disabled="loading">
diff --git a/src/main/resources/web/src/views/personnel/MaintenanceRecord.vue b/src/main/resources/web/src/views/personnel/MaintenanceRecord.vue
index 26cf56a..8258212 100644
--- a/src/main/resources/web/src/views/personnel/MaintenanceRecord.vue
+++ b/src/main/resources/web/src/views/personnel/MaintenanceRecord.vue
@@ -1,4 +1,3 @@
-<!-- src/views/personnel/MaintenanceRecord.vue -->
 <template>
   <div class="record-page">
     <!-- 页面标题和面包屑 -->
@@ -8,12 +7,11 @@
     </div>
 
     <!-- 返回按钮 -->
-   <div class="back-button">
-   <button @click="goBack" class="btn-back">
-      ← 返回维修人员列表
-    </button>
-   </div>
-
+    <div class="back-button">
+      <button @click="goBack" class="btn-back">
+        ← 返回维修人员列表
+      </button>
+    </div>
 
     <!-- 维修人员信息 -->
     <div class="repairman-info card">
@@ -105,7 +103,7 @@
             </td>
             <td>{{ formatDate(order.createdTime) }}</td>
             <td class="operation-buttons">
-              <button class="btn-view" @click="viewOrderDetail(order.orderId)">
+              <button class="btn-view" @click="showOrderDetail(order)">
                 查看详情
               </button>
             </td>
@@ -137,6 +135,71 @@
         下一页
       </button>
     </div>
+
+    <!-- 工单详情弹窗 -->
+    <div v-if="showDetailModal" class="modal-overlay" @click="closeDetailModal">
+      <div class="modal-content" @click.stop>
+        <div class="modal-header">
+          <h3>工单详情</h3>
+          <button class="close-btn" @click="closeDetailModal">×</button>
+        </div>
+        <div class="modal-body">
+          <div class="order-detail-info">
+            <div class="info-row">
+              <span class="info-label">工单号：</span>
+              <span>{{ currentOrder.orderId }}</span>
+            </div>
+            <div class="info-row">
+              <span class="info-label">设备ID：</span>
+              <span>{{ currentOrder.deviceId }}</span>
+            </div>
+            <div class="info-row">
+              <span class="info-label">片区：</span>
+              <span>{{ currentOrder.areaId }}</span>
+            </div>
+            <div class="info-row">
+              <span class="info-label">工单类型：</span>
+              <span>{{ formatOrderType(currentOrder.orderType) }}</span>
+            </div>
+            <div class="info-row">
+              <span class="info-label">状态：</span>
+              <span :class="`status-tag ${currentOrder.status}`">
+                {{ formatOrderStatus(currentOrder.status) }}
+              </span>
+            </div>
+            <div class="info-row">
+              <span class="info-label">创建时间：</span>
+              <span>{{ formatDate(currentOrder.createdTime) }}</span>
+            </div>
+            <div class="info-row" v-if="currentOrder.grabbedTime">
+              <span class="info-label">抢单时间：</span>
+              <span>{{ formatDate(currentOrder.grabbedTime) }}</span>
+            </div>
+            <div class="info-row" v-if="currentOrder.completedTime">
+              <span class="info-label">完成时间：</span>
+              <span>{{ formatDate(currentOrder.completedTime) }}</span>
+            </div>
+            <div class="info-row">
+              <span class="info-label">问题描述：</span>
+              <div class="description-content">{{ currentOrder.description }}</div>
+            </div>
+            <div class="info-row" v-if="currentOrder.dealNote">
+              <span class="info-label">处理结果：</span>
+              <div class="deal-note-content">{{ currentOrder.dealNote }}</div>
+            </div>
+            <div class="info-row" v-if="currentOrder.imgUrl">
+              <span class="info-label">处理图片：</span>
+              <div class="image-container">
+                <img :src="currentOrder.imgUrl" alt="维修图片" class="work-image">
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button class="btn-close" @click="closeDetailModal">关闭</button>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -146,7 +209,7 @@ import { useRoute, useRouter } from 'vue-router'
 import { request } from '@/api/request'
 import { useAuthStore } from '@/stores/auth'
 import type { WorkOrder } from '@/api/types/workorder'
-import type {ResultVO} from "@/api/types/auth";
+import type {ResultVO} from "@/api/types/auth"
 
 // 定义接口
 interface RepairmanInfo {
@@ -165,10 +228,11 @@ interface MaintenanceStaff {
    status: RepairmanStatus
  }
 
-
 // 枚举类型
 type OrderStatus = 'pending' | 'processing' | 'reviewing' | 'completed' | 'timeout'
 type RepairmanStatus = 'idle' | 'busy' | 'vacation'
+type OrderType = 'repair' | 'maintenance' | 'inspection'
+type OrderPriority = 'low' | 'medium' | 'high' | 'urgent'
 
 const route = useRoute()
 const router = useRouter()
@@ -189,6 +253,28 @@ const currentPage = ref(1)
 const pageSize = 10
 const loading = ref(false)
 
+// 弹窗相关数据
+const showDetailModal = ref(false)
+const currentOrder = ref<WorkOrder>({
+  orderId: '',
+  deviceId: '',
+  areaId: '',
+  orderType: 'repair',
+  description: '',
+  priority: 'medium',
+  status: 'pending',
+  assignedRepairmanId: '',
+  createdTime: undefined,
+  grabbedTime: undefined,
+  deadline: undefined,
+  completedTime: undefined,
+  dealNote: '',
+  imgUrl: '',
+  createdBy: '',
+  updatedTime: undefined,
+  alertId: undefined
+})
+
 // 获取维修人员信息和工单数据
 const fetchRepairmanData = async () => {
   loading.value = true
@@ -262,7 +348,6 @@ const fetchRepairmanData = async () => {
   }
 }
 
-
 // 处理中的工单
 const processingOrders = computed(() => {
   return allOrders.value.filter(order =>
@@ -319,15 +404,36 @@ const getStatusText = (status: RepairmanStatus): string => {
 // 格式化工单状态显示
 const formatOrderStatus = (status: OrderStatus): string => {
   const statusMap: Record<OrderStatus, string> = {
-    'pending': '待抢单',
+    'pending': '待处理',
     'processing': '处理中',
     'reviewing': '待审核',
     'completed': '已完成',
-    'timeout': '超时未抢'
+    'timeout': '超时'
   }
   return statusMap[status] || status
 }
 
+// 格式化工单类型
+const formatOrderType = (type: OrderType): string => {
+  const typeMap: Record<OrderType, string> = {
+    'repair': '维修',
+    'maintenance': '保养',
+    'inspection': '巡检'
+  }
+  return typeMap[type] || type
+}
+
+// 格式化工单优先级
+const formatOrderPriority = (priority: OrderPriority): string => {
+  const priorityMap: Record<OrderPriority, string> = {
+    'low': '低',
+    'medium': '中',
+    'high': '高',
+    'urgent': '紧急'
+  }
+  return priorityMap[priority] || priority
+}
+
 // 格式化日期
 const formatDate = (dateString?: string): string => {
   if (!dateString) return '-'
@@ -335,10 +441,35 @@ const formatDate = (dateString?: string): string => {
   return date.toLocaleString('zh-CN')
 }
 
-// 查看工单详情
-const viewOrderDetail = (orderId: string) => {
-  // 跳转到工单详情页面（需要根据实际路由调整）
-  router.push(`/home/work-order/detail/${orderId}`)
+// 显示工单详情弹窗
+const showOrderDetail = (order: WorkOrder) => {
+  currentOrder.value = { ...order } // 深拷贝工单数据
+  showDetailModal.value = true
+}
+
+// 关闭工单详情弹窗
+const closeDetailModal = () => {
+  showDetailModal.value = false
+  // 重置当前订单
+  currentOrder.value = {
+    orderId: '',
+    deviceId: '',
+    areaId: '',
+    orderType: 'repair',
+    description: '',
+    priority: 'medium',
+    status: 'pending',
+    assignedRepairmanId: '',
+    createdTime: undefined,
+    grabbedTime: undefined,
+    deadline: undefined,
+    completedTime: undefined,
+    dealNote: '',
+    imgUrl: '',
+    createdBy: '',
+    updatedTime: undefined,
+    alertId: undefined
+  }
 }
 
 // 返回上一页
@@ -346,9 +477,7 @@ const goBack = () => {
   router.back()
 }
 
-
 // 页面加载时获取数据
-// MaintenanceRecord.vue
 onMounted(() => {
   const repairmanId = route.params.id as string
   if (!repairmanId) {
@@ -359,7 +488,6 @@ onMounted(() => {
 
   fetchRepairmanData()
 })
-
 </script>
 
 <style scoped>
@@ -540,6 +668,183 @@ onMounted(() => {
   cursor: not-allowed;
 }
 
+/* 弹窗样式 */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.modal-content {
+  background: white;
+  border-radius: 8px;
+  width: 600px;
+  max-width: 90%;
+  max-height: 80vh;
+  overflow-y: auto;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: column;
+}
+
+.modal-header {
+  padding: 16px 20px;
+  border-bottom: 1px solid #eee;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.modal-header h3 {
+  margin: 0;
+  font-size: 18px;
+  color: #333;
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  font-size: 24px;
+  cursor: pointer;
+  color: #666;
+  padding: 4px;
+}
+
+.close-btn:hover {
+  color: #333;
+}
+
+.modal-body {
+  padding: 20px;
+  flex: 1;
+  overflow-y: auto;
+}
+
+.modal-footer {
+  padding: 16px 20px;
+  border-top: 1px solid #eee;
+  text-align: right;
+}
+
+.btn-close {
+  background: #f0f0f0;
+  color: #333;
+  border: 1px solid #ddd;
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.btn-close:hover {
+  background: #e0e0e0;
+}
+
+.order-detail-info {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.info-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  padding: 8px 0;
+  border-bottom: 1px solid #f5f5f5;
+}
+
+.info-label {
+  font-weight: 500;
+  color: #666;
+  min-width: 100px;
+  margin-right: 12px;
+  flex-shrink: 0;
+}
+
+.description-content,
+.deal-note-content {
+  flex: 1;
+  padding: 8px;
+  background-color: #fafafa;
+  border-radius: 4px;
+  line-height: 1.6;
+  white-space: pre-wrap;
+}
+
+.priority-tag,
+.status-tag {
+  display: inline-block;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.priority-tag.low {
+  background-color: #f6ffed;
+  color: #52c41a;
+}
+
+.priority-tag.medium {
+  background-color: #e6f7ff;
+  color: #1890ff;
+}
+
+.priority-tag.high {
+  background-color: #fffbe6;
+  color: #d48806;
+}
+
+.priority-tag.urgent {
+  background-color: #fff2f0;
+  color: #ff4d4f;
+}
+
+.status-tag.pending {
+  background-color: #e6f7ff;
+  color: #1890ff;
+}
+
+.status-tag.processing {
+  background-color: #fffbe6;
+  color: #d48806;
+}
+
+.status-tag.reviewing {
+  background-color: #f6ffed;
+  color: #52c41a;
+}
+
+.status-tag.completed {
+  background-color: #f0f0f0;
+  color: #8c8c8c;
+}
+
+.status-tag.timeout {
+  background-color: #fff2f0;
+  color: #ff4d4f;
+}
+
+.image-container {
+  margin-top: 8px;
+  flex: 1;
+}
+
+.work-image {
+  max-width: 100%;
+  max-height: 200px;
+  border-radius: 4px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+}
+
 /* 响应式调整 */
 @media (max-width: 768px) {
   .order-stats {
@@ -556,21 +861,33 @@ onMounted(() => {
   }
 
   .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;
-}
+    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;
-}
+  .btn-back:hover {
+    background: #e0e0e0;
+    border-color: #bbb;
+  }
+
+  .modal-content {
+    width: 95%;
+    margin: 20px;
+  }
 
+  .info-row {
+    flex-direction: column;
+  }
 
+  .info-label {
+    min-width: auto;
+    margin-bottom: 4px;
+  }
 }
 </style>