refactor(warningManage): 重构预警相关接口及页面逻辑

- 将红线指标预警相关接口移至新文件 redLineWarning.js
- 将预警页面数据接口调整到 warningManage 目录下
- 移除 warningPage 文件夹内冗余接口和样式代码
- 删除红线预警和预警页面中多余的统计卡片及相关样式
- 修改红线预警模块数据请求逻辑，使用单一接口替代原有多个接口合并调用
- 调整查询条件回显逻辑，支持更多参数回传并自动刷新数据
- 在预警页面员工列表中新增“详情”操作列，支持跳转至红线预警详情页
- 移除预警页面中冗余的 summaryCards 数据及相关 UI 代码
- 优化员工预警行样式及新增详情链接样式，提升交互体验

src/api/warningManage/redLineWarning.js

@@ -0,0 +1,5 @@
+import request from '@/utils/request'
+//红线指标预警
+export function getRedLineWarningPageData(data) {
+    return request({ url: '/ledger/warning/ledgerReduceDetail', method: 'post', data })
+}

src/views/warningManage/redLineWarning/index.vue

@@ -43,20 +43,6 @@
             </div>
         </div>
 
-        <div class="cards-container">
-            <div class="cards-grid" style="overflow-x: auto; white-space: nowrap;">
-                <div class="card" v-for="(item, index) in summaryCards" :key="index"
-                    style="display: inline-block; width: 200px; flex-shrink: 0;">
-                    <div class="card-header">
-                        <i :class="item.icon"></i>
-                        <h3>{{ item.title }}</h3>
-                        <span class="card-badge">{{ item.badge }}</span>
-                    </div>
-                    <div class="value-large" :style="{ color: item.color }">{{ item.value }}</div>
-                </div>
-            </div>
-        </div>
-
         <div class="employee-section">
             <div class="section-title">
                 <i class="fas fa-users" style="color:#dc2626;"></i> 员工综合预警
@@ -124,9 +110,9 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, watch } from 'vue'
+import { ref, computed, reactive, onMounted, watch } from 'vue'
 import { getDeptUserTree } from '@/api/item/items'
-import { getWarningPageData, getEmployeeWarningPageData } from '@/api/warningPage/warningPage'
+import { getRedLineWarningPageData } from '@/api/warningManage/redLineWarning'
 import { useDict } from '@/utils/dict'
 import { useRoute } from 'vue-router'
 
@@ -143,17 +129,7 @@ const selectedAlertLevel = ref('')
 const selectedOrg = ref('')
 const cascadeOptions = ref([])
 
-const summaryCards = ref([
-    { icon: 'fas fa-clipboard-list', title: '部门监察问题', badge: '部门级', value: '13项', color: '#b45309' },
-    { icon: 'fas fa-microchip', title: '实时质控拦截', badge: '部门级', value: '347次', color: '#2563eb' },
-    { icon: 'fas fa-bug', title: '不安全事件', badge: '一级预警', value: '18起', color: '#dc2626' },
-    { icon: 'fas fa-shield-virus', title: '安保测试记录', badge: '部门级', value: '4项', color: '#e67e22' },
-    { icon: 'fas fa-comment-dots', title: '旅客服务投诉', badge: '服务响应', value: '11件', color: '#e67e22' },
-    { icon: 'fas fa-clipboard-check', title: '服务巡查', badge: '部门级', value: '5项', color: '#333' },
-    { icon: 'fas fa-graduation-cap', title: '培训及考试成绩', badge: '平均分数', value: '92.4分', color: '#333' },
-    { icon: 'fas fa-plane-departure', title: '航站楼', badge: '吞吐量', value: '2.8万', color: '#059669' },
-    { icon: 'fas fa-gift', title: '小额奖励', badge: '奖励次数', value: '156次', color: '#7c3aed' }
-])
+
 
 const newNames = [
     "刘孟", "王苡衡", "周海涵", "何欣怡", "王崎",
@@ -361,17 +337,7 @@ const getDateRangeFromActive = () => {
     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 () => {
     queryParams.pageNum = 1
@@ -396,23 +362,9 @@ const fetchWarningData = async () => {
     }
 
     try {
-        const [r1, r2] = await Promise.all([
-            getWarningPageData(params),
-            getEmployeeWarningPageData(params)
-        ])
+        const r1 = await getRedLineWarningPageData(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
+            employeesData.value = r1.data
         }
     } catch (error) {
         console.error('获取预警数据失败:', error)
@@ -432,16 +384,36 @@ onMounted(async () => {
     fetchWarningData()
 })
 
-// 监听路由参数变化，回显到级联选择器
+// 监听路由参数变化，回显查询条件并查询
 watch(() => route.query, (query) => {
-    const { id } = query
+    const { id, startDate: sd, endDate: ed, activeRange: ar, alertLevel, org } = query
+
+    // 回显员工选择
     if (id) {
         selectedOrg.value = `user_${id}`
+    } else if (org) {
+        selectedOrg.value = org
     } else {
         selectedOrg.value = ''
     }
+
+    // 回显日期范围
+    if (sd && ed) {
+        startDate.value = sd
+        endDate.value = ed
+        activeRange.value = 'custom'
+    } else {
+        startDate.value = null
+        endDate.value = null
+        activeRange.value = ar || 'month'
+    }
+
+    // 回显预警等级
+    selectedAlertLevel.value = alertLevel || ''
+
+    queryParams.pageNum = 1
     fetchWarningData()
-})
+}, { immediate: true })
 </script>
 
 <style scoped>
@@ -615,77 +587,7 @@ watch(() => route.query, (query) => {
     background: #1d4ed8;
 }
 
-.cards-container {
-    width: 100%;
-    margin-bottom: 36px;
-    overflow-x: auto;
-}
 
-.cards-grid {
-    display: flex;
-
-    gap: 16px;
-    flex-wrap: nowrap;
-    min-width: max-content;
-}
-
-.card {
-    background: #ffffff;
-    border-radius: 20px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.05);
-    transition: all 0.2s;
-    border: 1px solid #eef2f6;
-    padding: 1rem 0.5rem;
-    display: flex;
-    flex-direction: column;
-    text-align: center;
-    min-width: 280px;
-    flex-shrink: 0;
-}
-
-.card:hover {
-    transform: translateY(-3px);
-    box-shadow: 0 12px 20px -10px rgba(0, 0, 0, 0.1);
-    border-color: #cbd5e1;
-}
-
-.card-header {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 6px;
-    border-bottom: none;
-    padding-bottom: 0;
-    margin-bottom: 12px;
-}
-
-.card-header i {
-    font-size: 1.5rem;
-    color: #2563eb;
-}
-
-.card-header h3 {
-    font-size: 0.85rem;
-    font-weight: 700;
-    margin: 0;
-    white-space: nowrap;
-}
-
-.card-badge {
-    font-size: 0.6rem;
-    background: #f1f5f9;
-    padding: 2px 8px;
-    border-radius: 30px;
-    margin-top: 4px;
-    display: inline-block;
-}
-
-.value-large {
-    font-size: 1.8rem;
-    font-weight: 800;
-    line-height: 1.2;
-    margin: 8px 0 4px 0;
-}
 
 .employee-section {
     margin-top: 20px;

src/views/warningManage/warningPage/index.vue

@@ -43,20 +43,6 @@
             </div>
         </div>
 
-        <div class="cards-container">
-            <div class="cards-grid" style="overflow-x: auto; white-space: nowrap;">
-                <div class="card" v-for="(item, index) in summaryCards" :key="index"
-                    style="display: inline-block; width: 200px; flex-shrink: 0;">
-                    <div class="card-header">
-                        <i :class="item.icon"></i>
-                        <h3>{{ item.title }}</h3>
-                        <span class="card-badge">{{ item.badge }}</span>
-                    </div>
-                    <div class="value-large" :style="{ color: item.color }">{{ item.value }}</div>
-                </div>
-            </div>
-        </div>
-
         <div class="employee-section">
             <div class="section-title">
                 <i class="fas fa-users" style="color:#dc2626;"></i> 员工综合预警
@@ -101,6 +87,11 @@
                                 <span v-else>{{ getAlertLabel(row.statusLabel) }}</span>
                             </template>
                         </el-table-column>
+                        <el-table-column label="详情" width="80">
+                            <template #default="{ row }">
+                                <span class="detail-link" @click="goToDetail(row)">详情</span>
+                            </template>
+                        </el-table-column>
                     </el-table>
                     <el-pagination v-show="total > 0" :total="total" v-model:current-page="queryParams.pageNum"
                         v-model:page-size="queryParams.pageSize" :page-sizes="[10, 20, 50, 100]"
@@ -124,13 +115,15 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, watch } from 'vue'
+import { ref, computed, reactive, onMounted, watch } from 'vue'
+import { useRouter } from 'vue-router'
 import { getDeptUserTree } from '@/api/item/items'
-import { getWarningPageData, getEmployeeWarningPageData } from '@/api/warningPage/warningPage'
+import { getEmployeeWarningPageData } from '@/api/warningManage/warningPage'
 import { useDict } from '@/utils/dict'
 import { useRoute } from 'vue-router'
 
 const route = useRoute()
+const router = useRouter()
 
 const { alert_level } = useDict('alert_level')
 
@@ -143,18 +136,6 @@ const selectedAlertLevel = ref('')
 const selectedOrg = ref('')
 const cascadeOptions = ref([])
 
-const summaryCards = ref([
-    { icon: 'fas fa-clipboard-list', title: '部门监察问题', badge: '部门级', value: '13项', color: '#b45309' },
-    { icon: 'fas fa-microchip', title: '实时质控拦截', badge: '部门级', value: '347次', color: '#2563eb' },
-    { icon: 'fas fa-bug', title: '不安全事件', badge: '一级预警', value: '18起', color: '#dc2626' },
-    { icon: 'fas fa-shield-virus', title: '安保测试记录', badge: '部门级', value: '4项', color: '#e67e22' },
-    { icon: 'fas fa-comment-dots', title: '旅客服务投诉', badge: '服务响应', value: '11件', color: '#e67e22' },
-    { icon: 'fas fa-clipboard-check', title: '服务巡查', badge: '部门级', value: '5项', color: '#333' },
-    { icon: 'fas fa-graduation-cap', title: '培训及考试成绩', badge: '平均分数', value: '92.4分', color: '#333' },
-    { icon: 'fas fa-plane-departure', title: '航站楼', badge: '吞吐量', value: '2.8万', color: '#059669' },
-    { icon: 'fas fa-gift', title: '小额奖励', badge: '奖励次数', value: '156次', color: '#7c3aed' }
-])
-
 const newNames = [
     "刘孟", "王苡衡", "周海涵", "何欣怡", "王崎",
     "黄政", "刘韵儿", "汪安霖", "张诗敏", "张维", "陈凯琳"
@@ -326,6 +307,23 @@ const getRowClass = ({ row }) => {
     return ""
 }
 
+const goToDetail = (row) => {
+    const query = { }
+    if (startDate.value && endDate.value) {
+        query.startDate = formatDate(startDate.value)
+        query.endDate = formatDate(endDate.value)
+    } else {
+        query.activeRange = activeRange.value
+    }
+    if (selectedAlertLevel.value) {
+        query.alertLevel = selectedAlertLevel.value
+    }
+    if (selectedOrg.value) {
+        query.org = selectedOrg.value
+    }
+    router.push({ path: '/warningManage/redLineWarning', query })
+}
+
 const getAlertLabel = (value) => {
     if (!value) return ''
     const item = alert_level.value.find(d => d.value === value)
@@ -379,18 +377,6 @@ const getDateRangeFromActive = () => {
     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 () => {
     queryParams.pageNum = 1
     let params = {}
@@ -414,21 +400,7 @@ const fetchWarningData = async () => {
     }
 
     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
-                    }
-                }
-            })
-        }
+        const r2 = await getEmployeeWarningPageData(params)
         if (r2.data) {
             employeesData.value = r2.data
         }
@@ -633,78 +605,6 @@ watch(() => route.query, (query) => {
     background: #1d4ed8;
 }
 
-.cards-container {
-    width: 100%;
-    margin-bottom: 36px;
-    overflow-x: auto;
-}
-
-.cards-grid {
-    display: flex;
-
-    gap: 16px;
-    flex-wrap: nowrap;
-    min-width: max-content;
-}
-
-.card {
-    background: #ffffff;
-    border-radius: 20px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.05);
-    transition: all 0.2s;
-    border: 1px solid #eef2f6;
-    padding: 1rem 0.5rem;
-    display: flex;
-    flex-direction: column;
-    text-align: center;
-    min-width: 280px;
-    flex-shrink: 0;
-}
-
-.card:hover {
-    transform: translateY(-3px);
-    box-shadow: 0 12px 20px -10px rgba(0, 0, 0, 0.1);
-    border-color: #cbd5e1;
-}
-
-.card-header {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 6px;
-    border-bottom: none;
-    padding-bottom: 0;
-    margin-bottom: 12px;
-}
-
-.card-header i {
-    font-size: 1.5rem;
-    color: #2563eb;
-}
-
-.card-header h3 {
-    font-size: 0.85rem;
-    font-weight: 700;
-    margin: 0;
-    white-space: nowrap;
-}
-
-.card-badge {
-    font-size: 0.6rem;
-    background: #f1f5f9;
-    padding: 2px 8px;
-    border-radius: 30px;
-    margin-top: 4px;
-    display: inline-block;
-}
-
-.value-large {
-    font-size: 1.8rem;
-    font-weight: 800;
-    line-height: 1.2;
-    margin: 8px 0 4px 0;
-}
-
 .employee-section {
     margin-top: 20px;
     width: 100%;
@@ -792,6 +692,16 @@ watch(() => route.query, (query) => {
     font-size: 0.85rem;
 }
 
+.detail-link {
+    color: #2563eb;
+    cursor: pointer;
+    font-weight: 500;
+}
+
+.detail-link:hover {
+    text-decoration: underline;
+}
+
 footer {
     text-align: center;
     margin-top: 32px;