refactor: 优化多个页面的UI和交互逻辑

1. 调整两个图表的轴标签样式，添加旋转避免文字重叠
2. 统一多个页面的"查获人/被查人"为"责任人"文案
3. 将预警页面原生表格替换为ElTable并添加分页功能

src/views/ledger/realtimeInterception/index.vue

@@ -7,8 +7,8 @@
       <el-form-item label="队室/班组" prop="teamName">
         <el-input v-model="queryParams.teamName" placeholder="请输入队室/班组" clearable @keyup.enter="handleQuery" />
       </el-form-item>
-      <el-form-item label="查获人" prop="inspectorName">
-        <el-input v-model="queryParams.inspectorName" placeholder="请输入查获人" clearable @keyup.enter="handleQuery" />
+      <el-form-item label="责任人" prop="inspectorName">
+        <el-input v-model="queryParams.inspectorName" placeholder="请输入责任人" clearable @keyup.enter="handleQuery" />
       </el-form-item>
 
       <el-form-item label="记录日期">
@@ -35,7 +35,7 @@
       </el-table-column>
       <el-table-column label="部门名称" align="center" prop="deptName" />
       <el-table-column label="队室/班组" align="center" prop="teamName" />
-      <el-table-column label="查获人" align="center" prop="inspectorName" />
+      <el-table-column label="责任人" align="center" prop="inspectorName" />
       <el-table-column label="通道号" align="center" prop="channelNo" />
       <el-table-column label="旅客姓名" align="center" prop="passengerName" />
       <el-table-column label="航班号" align="center" prop="flightNo" />

src/views/ledger/servicePatrol/index.vue

@@ -7,8 +7,8 @@
       <el-form-item label="队室/班组" prop="teamName">
         <el-input v-model="queryParams.teamName" placeholder="请输入队室/班组" clearable @keyup.enter="handleQuery" />
       </el-form-item>
-      <el-form-item label="被查人" prop="inspectedName">
-        <el-input v-model="queryParams.inspectedName" placeholder="请输入被查人" clearable @keyup.enter="handleQuery" />
+      <el-form-item label="责任人" prop="inspectedName">
+        <el-input v-model="queryParams.inspectedName" placeholder="请输入责任人" clearable @keyup.enter="handleQuery" />
       </el-form-item>
 
       <el-form-item label="记录日期">
@@ -36,7 +36,7 @@
       <el-table-column label="部门名称" align="center" prop="deptName" />
       <el-table-column label="队室/班组" align="center" prop="teamName" />
       <el-table-column label="巡查人" align="center" prop="inspectorName" />
-      <el-table-column label="被查人" align="center" prop="inspectedName" />
+      <el-table-column label="责任人" align="center" prop="inspectedName" />
       <el-table-column label="服务类型" align="center" prop="serviceType" />
       <el-table-column label="问题描述" align="center" prop="problemDesc" show-overflow-tooltip />
       <el-table-column label="扣分" align="center" prop="deductScore">

src/views/ledger/supervisionProblem/index.vue

@@ -10,8 +10,8 @@
       <el-form-item label="巡查人" prop="inspectorName">
         <el-input v-model="queryParams.inspectorName" placeholder="请输入巡查人" clearable @keyup.enter="handleQuery" />
       </el-form-item>
-      <el-form-item label="被查人" prop="inspectedName">
-        <el-input v-model="queryParams.inspectedName" placeholder="请输入被查人" clearable @keyup.enter="handleQuery" />
+      <el-form-item label="责任人" prop="inspectedName">
+        <el-input v-model="queryParams.inspectedName" placeholder="请输入责任人" clearable @keyup.enter="handleQuery" />
       </el-form-item>
       <el-form-item label="记录日期">
         <el-date-picker v-model="dateRange" type="daterange" value-format="YYYY-MM-DD"
@@ -39,7 +39,7 @@
       <el-table-column label="队室/班组" align="center" prop="teamName" />
       <el-table-column label="小组" align="center" prop="groupName" />
       <el-table-column label="巡查人" align="center" prop="inspectorName" />
-      <el-table-column label="被查人" align="center" prop="inspectedName" />
+      <el-table-column label="责任人" align="center" prop="inspectedName" />
       <el-table-column label="问题类型" align="center" prop="problemType" />
       <el-table-column label="问题描述" align="center" prop="problemDesc" show-overflow-tooltip />
       <el-table-column label="问题地点" align="center" prop="location" />

src/views/portraitManagement/components/ProfilePositionDistribution.vue

@@ -180,7 +180,7 @@ const updatePostChart = (data) => {
     xAxis: {
       type: 'category',
       data: chartData.categories,
-      axisLabel: { color: '#a0c4ff', fontSize: 10 },
+      axisLabel: { color: '#a0c4ff', fontSize: 10,rotate: 30 },
       axisLine: { lineStyle: { color: 'rgba(15,70,250,0.3)' } }
     },
     yAxis: {

src/views/portraitManagement/components/SupervisionDistribution.vue

@@ -33,7 +33,7 @@ const setChartsOptionsBar = computed(() => {
     xAxis: {
       type: 'category',
       data: labels,
-      axisLabel: { color: '#fff', fontSize: 14 },
+      axisLabel: { color: '#fff', fontSize: 13, rotate: 30 },
       axisLine: { lineStyle: { color: '#344067' } }
     },
     yAxis: [

src/views/warningPage/index.vue

@@ -74,52 +74,56 @@
             </div>
             <div class="employee-card">
                 <div style="overflow-x: auto;">
-                    <table class="data-table" style="width:100%;">
-                        <thead>
-                            <tr>
-                                <th>员工ID</th>
-                                <th>姓名</th>
-                                <th>所属部门</th>
-                                <th>综合评估得分</th>
-                                <th>预警等级</th>
-                                <th>核心风险/优秀事迹</th>
-                                <th>状态标签</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <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.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.overallScore }} 分</span>
-                                </td>
-                                <td>
-                                    <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.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.coreRisksOrOutstandingAchievements }}</td>
-                                <td>
-                                    <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>
-                    </table>
+                    <el-table :data="filteredEmployees" :row-class-name="getRowClass" style="width:100%;" border stripe>
+                        <el-table-column prop="userId" label="员工ID" />
+                        <el-table-column prop="nickName" label="姓名">
+                            <template #default="{ row }">
+                                <strong>{{ row.nickName }}</strong>
+                            </template>
+                        </el-table-column>
+                        <el-table-column prop="deptName" label="所属部门" />
+                        <el-table-column prop="eventTime" label="事件时间" sortable width="180" />
+                        <el-table-column prop="overallScore" label="综合评估得分" sortable>
+                            <template #default="{ row }">
+                                <span v-if="row.overallScore < 75" class="score-danger">{{ row.overallScore }} 分</span>
+                                <span v-else-if="row.overallScore >= 90" class="score-excellent">{{ row.overallScore }} 分</span>
+                                <span v-else style="font-weight:600;">{{ row.overallScore }} 分</span>
+                            </template>
+                        </el-table-column>
+                        <el-table-column prop="overallScore" label="预警等级">
+                            <template #default="{ row }">
+                                <span v-if="row.overallScore < 75" class="status-badge"
+                                    style="animation: subtlePulse 1s infinite;"><i
+                                        class="fas fa-exclamation-triangle"></i> 红色预警</span>
+                                <span v-else-if="row.overallScore >= 90" class="status-excellent"
+                                    style="background:#d1fae5; color:#065f46;"><i class="fas fa-star"></i>
+                                    优秀标杆</span>
+                                <span v-else class="status-warning">正常范围</span>
+                            </template>
+                        </el-table-column>
+                        <el-table-column prop="coreRisksOrOutstandingAchievements" label="核心风险/优秀事迹" />
+                        <el-table-column prop="statusLabel" label="状态标签">
+                            <template #default="{ row }">
+                                <span v-if="row.overallScore < 75" style="color:#b91c1c;"><i
+                                        class="fas fa-bell"></i>
+                                    {{ getAlertLabel(row.statusLabel) }}</span>
+                                <span v-else-if="row.overallScore >= 90" style="color:#15803d;"><i
+                                        class="fas fa-crown"></i> {{ getAlertLabel(row.statusLabel) }}</span>
+                                <span v-else>{{ getAlertLabel(row.statusLabel) }}</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]"
+                        layout="total, sizes, prev, pager, next, jumper"
+                        @size-change="handleSizeChange"
+                        @current-change="handlePageChange"
+                        style="margin-top: 16px; justify-content: flex-end;"
+                    />
                 </div>
                 <div class="warning-summary">
                     <div><i class="fas fa-circle" style="color:#ef4444;"></i> <strong>红色预警</strong> (综合评估 &lt; 75分) 共计
@@ -190,6 +194,10 @@ const coreRisksOrOutstandingAchievementsList = [
 ]
 
 const employeesData = ref([])
+const queryParams = reactive({
+  pageNum: 1,
+  pageSize: 10
+})
 
 for (let i = 0; i < newNames.length; i++) {
     employeesData.value.push({
@@ -250,10 +258,8 @@ const getSelectedInfo = (selectedValue) => {
     return findNodeByValue(cascadeOptions.value, selectedValue)
 }
 
-const filteredEmployees = computed(() => {
-    let result = employeesData.value.ledgerWarningDetailItemList
-
-
+const allFilteredEmployees = computed(() => {
+    let result = employeesData.value.ledgerWarningDetailItemList || []
 
     // 预警等级筛选
     if (selectedAlertLevel.value) {
@@ -272,11 +278,26 @@ const filteredEmployees = computed(() => {
         }
     }
 
-
-
     return result
 })
 
+const filteredEmployees = computed(() => {
+    const start = (queryParams.pageNum - 1) * queryParams.pageSize
+    const end = start + queryParams.pageSize
+    return allFilteredEmployees.value.slice(start, end)
+})
+
+const total = computed(() => allFilteredEmployees.value.length)
+
+function handlePageChange(newPage) {
+    queryParams.pageNum = newPage
+}
+
+function handleSizeChange(newSize) {
+    queryParams.pageSize = newSize
+    queryParams.pageNum = 1
+}
+
 const redAlertCount = computed(() => {
     return employeesData.value?.redAlertNum || 0
 })
@@ -289,9 +310,9 @@ const avgScore = computed(() => {
     return employeesData.value?.averageComprehensiveScore || 0
 })
 
-const getRowClass = (score) => {
-    if (score < 75) return "employee-warning-row"
-    if (score >= 90) return "employee-excellent-row"
+const getRowClass = ({ row }) => {
+    if (row.overallScore < 75) return "employee-warning-row"
+    if (row.overallScore >= 90) return "employee-excellent-row"
     return ""
 }
 
@@ -348,7 +369,7 @@ const warningDataMap = {
 }
 
 const fetchWarningData = async () => {
-    
+    queryParams.pageNum = 1
     let params = {}
     if (startDate.value && endDate.value) {
         params.startDate = formatDate(startDate.value)
@@ -419,6 +440,10 @@ watch(cascadeOptions, (val) => {
     }
 })
 
+watch(selectedAlertLevel, () => {
+    queryParams.pageNum = 1
+})
+
 // 监听路由参数变化，回显到级联选择器
 watch(() => route.query, (query) => {
     const { id } = query