refactor(warningPage): 重构预警页面，对接后端接口并优化功能

1. 新增预警页面API接口封装
2. 替换旧级联选择器为可搜索弹窗树形选择器
3. 重构表格字段映射，对接后端真实返回字段
4. 新增日期范围筛选、组织架构筛选逻辑
5. 修复员工标签展示为逗号分隔的多标签样式
6. 调整员工详情页跳转路由路径
7. 新增数据拉取、格式化和监听更新逻辑

src/api/warningPage/warningPage.js

@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+
+//台账数据
+export function getWarningPageData(data) {
+  return request({ url: '/ledger/warning/ledger', method: 'post', data })
+}
+//员工综合评估预警看板
+export function getEmployeeWarningPageData(data) {
+  return request({ url: '/ledger/warning/ledgerDetail', method: 'post', data })
+}

src/views/portraitManagement/employeeProfile/index.vue

@@ -74,8 +74,8 @@
                   </div>
                   <div class="info-item-content">
                     <div class="info-item-label">标签：</div>
-                    <div class="info-item-value">
-                      <span class="info-item-tag" v-if="portrait.userTags">{{ portrait.userTags }}</span>
+                    <div class="info-item-value" v-if="portrait.userTags">
+                      <span class="info-item-tag" v-for="tag in portrait.userTags.split(',')" :key="tag">{{ tag }}</span>
                     </div>
                   </div>
                 </div>
@@ -341,12 +341,12 @@ const searchHandler = (query) => {
 const goToWarningPage = () => {
   if (currentQuery.value) {
     router.push({
-      path: '/warningPage',
+      path: '/index',
       query: { id: currentQuery.value.id },
    
     })
   } else {
-    router.push('/warningPage')
+    router.push('/index')
   }
 }
 
@@ -606,6 +606,7 @@ onUnmounted(() => {
               display: flex;
               align-items: center;
               flex-wrap: wrap;
+              gap: 2px;
             }
             .info-item-tag {
               font-size: 14px;

src/views/warningPage/index.vue

@@ -28,15 +28,27 @@
                     <el-date-picker v-model="endDate" type="date" placeholder="结束日期" style="width: 150px;" />
 
                 </div>
+                <el-popover trigger="click" placement="bottom" :width="480" ref="treePopoverRef">
+                    <template #reference>
+                        <el-input v-model="selectedOrgLabel" placeholder="组织架构/员工" clearable style="width: 480px;"
+                            @clear="handleTreeClear" />
+                    </template>
+                    <el-tree
+                        :data="cascadeOptions"
+                        :props="treeProps"
+                        node-key="value"
+                        highlight-current
+                        :current-node-key="selectedOrg"
+                        @node-click="handleTreeNodeClick"
+                    />
+                </el-popover>
             </div>
             <div class="filter-group">
                 <el-select v-model="selectedAlertLevel" placeholder="预警等级" clearable style="width: 250px;">
                     <el-option label="全部" value=""></el-option>
                     <el-option v-for="item in alert_level" :key="item.value" :label="item.label" :value="item.value" />
                 </el-select>
-                <el-cascader v-model="selectedOrg" :options="cascadeOptions"
-                    :props="{ expandTrigger: 'hover', label: 'label', value: 'value', children: 'children', emitPath: false }"
-                    placeholder="组织架构/员工" clearable style="width: 280px;" />
+
             </div>
         </div>
 
@@ -77,32 +89,35 @@
                             </tr>
                         </thead>
                         <tbody>
-                            <tr v-for="emp in filteredEmployees" :key="emp.id" :class="getRowClass(emp.baseScore)">
-                                <td>{{ emp.id }}</td>
-                                <td><strong>{{ emp.name }}</strong></td>
-                                <td>{{ emp.dept }}</td>
+                            <tr v-for="emp in filteredEmployees" :key="emp.id" :class="getRowClass(emp.overallScore)">
+                                <td>{{ emp.userId }}</td>
+                                <td><strong>{{ emp.nickName }}</strong></td>
+                                <td>{{ emp.deptName }}</td>
                                 <td>
-                                    <span v-if="emp.baseScore < 75" class="score-danger">{{ emp.baseScore }} 分</span>
-                                    <span v-else-if="emp.baseScore >= 90" class="score-excellent">{{ emp.baseScore }}
+                                    <span v-if="emp.overallScore < 75" class="score-danger">{{ emp.overallScore }}
+                                        分</span>
+                                    <span v-else-if="emp.overallScore >= 90" class="score-excellent">{{ emp.overallScore
+                                        }}
                                         分</span>
-                                    <span v-else style="font-weight:600;">{{ emp.baseScore }} 分</span>
+                                    <span v-else style="font-weight:600;">{{ emp.overallScore }} 分</span>
                                 </td>
                                 <td>
-                                    <span v-if="emp.baseScore < 75" class="status-badge"
+                                    <span v-if="emp.overallScore < 75" class="status-badge"
                                         style="animation: subtlePulse 1s infinite;"><i
                                             class="fas fa-exclamation-triangle"></i> 红色预警</span>
-                                    <span v-else-if="emp.baseScore >= 90" class="status-excellent"
+                                    <span v-else-if="emp.overallScore >= 90" class="status-excellent"
                                         style="background:#d1fae5; color:#065f46;"><i class="fas fa-star"></i>
                                         优秀标杆</span>
                                     <span v-else class="status-warning">正常范围</span>
                                 </td>
-                                <td style="font-size:0.75rem;">{{ emp.riskDesc }}</td>
+                                <td style="font-size:0.75rem;">{{ emp.coreRisksOrOutstandingAchievements }}</td>
                                 <td>
-                                    <span v-if="emp.baseScore < 75" style="color:#b91c1c;"><i class="fas fa-bell"></i>
-                                        紧急干预</span>
-                                    <span v-else-if="emp.baseScore >= 90" style="color:#15803d;"><i
-                                            class="fas fa-crown"></i> 表彰激励</span>
-                                    <span v-else>常规辅导</span>
+                                    <span v-if="emp.overallScore < 75" style="color:#b91c1c;"><i
+                                            class="fas fa-bell"></i>
+                                        {{ getAlertLabel(emp.statusLabel) }}</span>
+                                    <span v-else-if="emp.overallScore >= 90" style="color:#15803d;"><i
+                                            class="fas fa-crown"></i> {{ getAlertLabel(emp.statusLabel) }}</span>
+                                    <span v-else>{{ getAlertLabel(emp.statusLabel) }}</span>
                                 </td>
                             </tr>
                         </tbody>
@@ -127,6 +142,7 @@
 <script setup>
 import { ref, computed, onMounted, watch } from 'vue'
 import { getDeptUserTree } from '@/api/item/items'
+import { getWarningPageData, getEmployeeWarningPageData } from '@/api/warningPage/warningPage'
 import { useDict } from '@/utils/dict'
 import { useRoute } from 'vue-router'
 
@@ -136,11 +152,14 @@ const { alert_level } = useDict('alert_level')
 
 const dateRangeInput = ref(null)
 const activeRange = ref('month')
-const currentFilterText = ref('')
+
 const startDate = ref(null)
 const endDate = ref(null)
 const selectedAlertLevel = ref('')
 const selectedOrg = ref('')
+const selectedOrgLabel = ref('')
+const treePopoverRef = ref(null)
+const treeProps = { label: 'label', children: 'children' }
 const cascadeOptions = ref([])
 
 const summaryCards = ref([
@@ -161,7 +180,7 @@ const newNames = [
 ]
 const deptList = ["旅检一部", "旅检二部", "旅检三部"]
 const scores = [68, 92, 55, 96, 72, 88, 48, 94, 81, 63, 91]
-const riskDescList = [
+const coreRisksOrOutstandingAchievementsList = [
     "违规操作2次+投诉1起，考试成绩62分",
     "优秀服务案例，安保测试满分，无违规",
     "安保测试未通过，不安全事件责任人",
@@ -182,32 +201,36 @@ for (let i = 0; i < newNames.length; i++) {
         id: String(10021 + i),
         name: newNames[i],
         dept: deptList[i % deptList.length],
-        baseScore: scores[i % scores.length],
-        riskDesc: riskDescList[i % riskDescList.length]
+        overallScore: scores[i % scores.length],
+        coreRisksOrOutstandingAchievements: coreRisksOrOutstandingAchievementsList[i % coreRisksOrOutstandingAchievementsList.length]
     })
 }
 
-// 将组织架构数据转换为级联选择器格式
+// 将组织架构数据转换为树形数据
 const transformCascadeData = (nodes) => {
     if (!nodes) return []
     return nodes.map(node => {
         const label = node.nickName || node.deptName || node.name || node.label
-        const value = node.id || node.deptId
-
-        let children = []
-        if (node.children && node.children.length > 0) {
-            children = transformCascadeData(node.children)
-        }
-        // 如果是用户节点，没有子节点
-        if (node.nodeType === 'user' || node.deptType === 'user') {
-            children = []
+        const deptType = node.deptType || node.nodeType
+
+        let value
+        if (deptType === 'BRIGADE') {
+            value = String(node.deptId)
+        } else if (deptType === 'MANAGER') {
+            value = String(node.teamId)
+        } else if (deptType === 'TEAMS') {
+            value = String(node.groupId)
+        } else {
+            value = String(node.userId ?? node.id ?? node.deptId ?? '')
         }
 
+        const children = node.children && node.children.length > 0 ? transformCascadeData(node.children) : undefined
+
         return {
             label,
             value,
-            nodeType: node.nodeType || node.deptType,
-            children: children.length > 0 ? children : undefined
+            deptType,
+            children
         }
     })
 }
@@ -232,18 +255,35 @@ const getSelectedInfo = (selectedValue) => {
     return findNodeByValue(cascadeOptions.value, selectedValue)
 }
 
-const filteredEmployees = computed(() => {
-    let result = [...employeesData.value]
-
-    // 模糊搜索筛选
-    if (currentFilterText.value.trim()) {
-        const keyword = currentFilterText.value.trim().toLowerCase()
-        result = result.filter(emp =>
-            emp.name.toLowerCase().includes(keyword) ||
-            emp.dept.toLowerCase().includes(keyword) ||
-            emp.id.toLowerCase().includes(keyword)
-        )
+const handleTreeNodeClick = (data) => {
+    selectedOrg.value = data.value
+    selectedOrgLabel.value = data.label
+    treePopoverRef.value?.hide()
+    fetchWarningData()
+}
+
+const handleTreeClear = () => {
+    selectedOrg.value = ''
+    selectedOrgLabel.value = ''
+    fetchWarningData()
+}
+
+const findNodeLabelByValue = (nodes, value) => {
+    if (!nodes) return ''
+    for (const node of nodes) {
+        if (node.value === value) return node.label
+        if (node.children) {
+            const found = findNodeLabelByValue(node.children, value)
+            if (found) return found
+        }
     }
+    return ''
+}
+
+const filteredEmployees = computed(() => {
+    let result = employeesData.value.ledgerWarningDetailItemList
+
+
 
     // 预警等级筛选
     if (selectedAlertLevel.value) {
@@ -253,44 +293,30 @@ const filteredEmployees = computed(() => {
         if (alertItem) {
             const label = alertItem.label
             if (label.includes('红色') || label.includes('预警')) {
-                result = result.filter(emp => emp.baseScore < 75)
+                result = result.filter(emp => emp.overallScore < 75)
             } else if (label.includes('优秀') || label.includes('标杆')) {
-                result = result.filter(emp => emp.baseScore >= 90)
+                result = result.filter(emp => emp.overallScore >= 90)
             } else if (label.includes('正常')) {
-                result = result.filter(emp => emp.baseScore >= 75 && emp.baseScore < 90)
+                result = result.filter(emp => emp.overallScore >= 75 && emp.overallScore < 90)
             }
         }
     }
 
-    // 组织架构筛选
-    if (selectedOrg.value) {
-        const selectedInfo = getSelectedInfo(selectedOrg.value)
-        if (selectedInfo) {
-            if (selectedInfo.nodeType === 'user') {
-                // 筛选特定用户
-                result = result.filter(emp => emp.name === selectedInfo.label)
-            } else {
-                // 筛选特定部门
-                result = result.filter(emp => emp.dept.includes(selectedInfo.label))
-            }
-        }
-    }
+
 
     return result
 })
 
 const redAlertCount = computed(() => {
-    return filteredEmployees.value.filter(emp => emp.baseScore < 75).length
+    return employeesData.value?.redAlertNum || 0
 })
 
 const excellentCount = computed(() => {
-    return filteredEmployees.value.filter(emp => emp.baseScore >= 90).length
+    return employeesData.value?.excellentBenchmarkNum || 0
 })
 
 const avgScore = computed(() => {
-    if (!filteredEmployees.value.length) return "0"
-    const total = filteredEmployees.value.reduce((sum, emp) => sum + emp.baseScore, 0)
-    return (total / filteredEmployees.value.length).toFixed(1)
+    return employeesData.value?.averageComprehensiveScore || 0
 })
 
 const getRowClass = (score) => {
@@ -299,6 +325,12 @@ const getRowClass = (score) => {
     return ""
 }
 
+const getAlertLabel = (value) => {
+    if (!value) return ''
+    const item = alert_level.value.find(d => d.value === value)
+    return item ? item.label : value
+}
+
 const setActiveRange = (range) => {
     activeRange.value = range
     // 清除自定义日期
@@ -308,19 +340,89 @@ const setActiveRange = (range) => {
     }
 }
 
-const handleSearch = () => {
-    console.log('执行筛选', {
-        activeRange: activeRange.value,
-        startDate: startDate.value,
-        endDate: endDate.value,
-        selectedAlertLevel: selectedAlertLevel.value,
-        selectedOrg: selectedOrg.value
-    })
+
+const formatDate = (d) => {
+    if (!d) return ''
+    const date = new Date(d)
+    const y = date.getFullYear()
+    const m = String(date.getMonth() + 1).padStart(2, '0')
+    const day = String(date.getDate()).padStart(2, '0')
+    return `${y}-${m}-${day}`
+}
+
+const getDateRangeFromActive = () => {
+    const now = new Date()
+    let start = new Date(now)
+    if (activeRange.value === 'week') {
+        start.setDate(now.getDate() - 7)
+    } else if (activeRange.value === 'month') {
+        start.setMonth(now.getMonth() - 1)
+    } else if (activeRange.value === 'quarter') {
+        start.setMonth(now.getMonth() - 3)
+    } else {
+        start.setFullYear(now.getFullYear() - 1)
+    }
+    return { startDate: formatDate(start), endDate: formatDate(now) }
+}
+
+const warningDataMap = {
+    ledgerSupervisionProblem: 0,
+    ledgerRealtimeInterception: 1,
+    ledgerUnsafeEvent: 2,
+    ledgerSecurityTest: 3,
+    ledgerComplaint: 4,
+    ledgerServicePatrol: 5,
+    ledgerExamScore: 6,
+    ledgerTerminalBonus: 7,
+    ledgerRewardApproval: 8
+}
+
+const fetchWarningData = async () => {
+    
+    let params = {}
+    if (startDate.value && endDate.value) {
+        params.startDate = formatDate(startDate.value)
+        params.endDate = formatDate(endDate.value)
+    } else {
+        const range = getDateRangeFromActive()
+        params.startDate = range.startDate
+        params.endDate = range.endDate
+    }
+
+    const selectedInfo = getSelectedInfo(selectedOrg.value)
+    if (selectedInfo) {
+        if (selectedInfo.deptType === 'BRIGADE') params.deptId = selectedInfo.value
+        else if (selectedInfo.deptType === 'MANAGER') params.teamId = selectedInfo.value
+        else if (selectedInfo.deptType === 'TEAMS') params.groupId = selectedInfo.value
+        else if (selectedInfo.deptType === 'user') params.userId = selectedInfo.value
+    }
+
+    try {
+        const [r1, r2] = await Promise.all([
+            getWarningPageData(params),
+            getEmployeeWarningPageData(params)
+        ])
+        if (r1.data) {
+            const d = r1.data
+            summaryCards.value.forEach((card, idx) => {
+                for (const [key, i] of Object.entries(warningDataMap)) {
+                    if (i === idx) {
+                        card.value = d[key] !== undefined ? String(d[key]) : card.value
+                        break
+                    }
+                }
+            })
+        }
+        if (r2.data) {
+            employeesData.value = r2.data
+        }
+    } catch (error) {
+        console.error('获取预警数据失败:', error)
+    }
 }
 
 onMounted(async () => {
     try {
-        // 获取组织架构数据
         const res = await getDeptUserTree()
         if (res.data) {
             cascadeOptions.value = transformCascadeData(res.data)
@@ -328,6 +430,23 @@ onMounted(async () => {
     } catch (error) {
         console.error('获取组织架构数据失败:', error)
     }
+    fetchWarningData()
+})
+
+watch(startDate, () => {
+    fetchWarningData()
+})
+watch(endDate, () => {
+    fetchWarningData()
+})
+watch(activeRange, () => {
+    fetchWarningData()
+})
+
+watch(cascadeOptions, (val) => {
+    if (val.length && selectedOrg.value) {
+        selectedOrgLabel.value = findNodeLabelByValue(val, selectedOrg.value)
+    }
 })
 
 // 监听路由参数变化，回显到级联选择器
@@ -335,9 +454,12 @@ watch(() => route.query, (query) => {
     const { id } = query
     if (id) {
         selectedOrg.value = id
+        selectedOrgLabel.value = findNodeLabelByValue(cascadeOptions.value, id)
     } else {
         selectedOrg.value = ''
+        selectedOrgLabel.value = ''
     }
+    fetchWarningData()
 }, { immediate: true })
 </script>