From 986f57395682b534eacec1b9d93f072575a3174a Mon Sep 17 00:00:00 2001
From: wzclm <2855471171@qq.com>
Date: Fri, 21 Feb 2025 03:35:02 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E6=8A=A5=E5=91=8A=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E8=AF=B7=E6=B1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/report/daily.js             |  122 +++
 src/layout/AdminLayout.vue          |    2 +-
 src/views/report/analysis/index.vue |    2 +-
 src/views/report/daily/index.vue    | 1585 +++++++++++++++++++--------
 4 files changed, 1275 insertions(+), 436 deletions(-)
 create mode 100644 src/api/report/daily.js

diff --git a/src/api/report/daily.js b/src/api/report/daily.js
new file mode 100644
index 0000000..5d53439
--- /dev/null
+++ b/src/api/report/daily.js
@@ -0,0 +1,122 @@
+import request from '@/utils/request'
+
+/**
+ * 获取报告列表
+ * @param {Object} params - 查询参数
+ * @param {number} [params.page=1] - 页码
+ * @param {number} [params.pageSize=10] - 每页条数
+ * @param {number} [params.status] - 状态筛选
+ * @param {string} [params.startDate] - 开始日期
+ * @param {string} [params.endDate] - 结束日期
+ * @param {string} [params.keyword] - 搜索关键词
+ * @returns {Promise} 返回报告列表数据
+ */
+export function getReportList(params = {}) {
+  return request.get('/api/reports', {
+    params: {
+      page: 1,
+      pageSize: 10,
+      ...params
+    }
+  })
+}
+
+/**
+ * 获取报告详情
+ * @param {string|number} id - 报告ID
+ * @returns {Promise} 返回报告详情数据
+ */
+export function getReportDetail(id) {
+  return request.get(`/api/reports/${id}`)
+}
+
+/**
+ * 删除报告
+ * @param {string|number} id - 报告ID
+ * @returns {Promise} 返回删除结果
+ */
+export function deleteReport(id) {
+  return request.delete(`/api/reports/${id}`)
+}
+
+/**
+ * 审核报告
+ * @param {string|number} id - 报告ID
+ * @param {Object} data - 审核数据
+ * @param {boolean} data.approved - 是否通过
+ * @param {string} [data.comment] - 审核意见
+ * @returns {Promise} 返回审核结果
+ */
+export function reviewReport(id, data) {
+  return request.post(`/api/reports/${id}/review`, {
+    status: data.approved ? 2 : 3, // 2表示通过，3表示驳回
+    review_comment: !data.approved ? data.comment : undefined // 仅在驳回时发送审核意见
+  })
+}
+
+/**
+ * 获取报告统计信息
+ * @returns {Promise} 返回统计数据
+ */
+export function getReportStatistics() {
+  return request.get('/api/reports/statistics')
+}
+
+/**
+ * 批量导出报告
+ * @param {Object} params - 导出参数
+ * @param {Array<number>} params.ids - 报告ID列表
+ * @returns {Promise} 返回二进制文件流
+ */
+export function batchExportReports(params) {
+  return request.post('/api/reports/batch/export', {
+    ids: params.ids,
+    format: 'excel'
+  }, {
+    responseType: 'arraybuffer',
+    headers: {
+      'Accept': 'application/vnd.ms-excel',
+      'Content-Type': 'application/json'
+    }
+  })
+}
+
+/**
+ * 批量删除报告
+ * @param {Array<number>} ids - 报告ID列表
+ * @returns {Promise} 返回删除结果
+ */
+export function batchDeleteReports(ids) {
+  return request.post('/api/reports/batch/delete', { ids })
+}
+
+/**
+ * 导出单个报告
+ * @param {string|number} id - 报告ID
+ * @returns {Promise} 返回二进制文件流
+ */
+export function exportReport(id) {
+  return request.post(`/api/reports/${id}/export`, { id }, {
+    responseType: 'arraybuffer',
+    headers: {
+      'Accept': 'application/vnd.ms-excel',
+      'Content-Type': 'application/json'
+    }
+  })
+}
+
+/**
+ * 获取报告趋势数据
+ * @param {Object} params - 查询参数
+ * @param {number} [params.days=30] - 统计天数
+ * @param {string} [params.type] - 报告类型
+ * @returns {Promise} 返回趋势数据
+ */
+export function getReportTrend(params = {}) {
+  return request.get('/api/reports/statistics', {
+    params: {
+      days: 30,
+      ...params
+    }
+  })
+}
\ No newline at end of file
diff --git a/src/layout/AdminLayout.vue b/src/layout/AdminLayout.vue
index 1b79df0..1879a3d 100644
--- a/src/layout/AdminLayout.vue
+++ b/src/layout/AdminLayout.vue
@@ -136,7 +136,7 @@ const handleLogout = () => {
             <el-icon><component :is="icons.Document" /></el-icon>
             <span>报告管理</span>
           </template>
-          <el-menu-item index="/report/daily">日常报告</el-menu-item>
+          <el-menu-item index="/report/daily">报告管理</el-menu-item>
           <el-menu-item index="/report/analysis">分析报告</el-menu-item>
           <el-menu-item index="/report/about">项目背景</el-menu-item>
         </el-sub-menu>
diff --git a/src/views/report/analysis/index.vue b/src/views/report/analysis/index.vue
index cd5802d..0b7544d 100644
--- a/src/views/report/analysis/index.vue
+++ b/src/views/report/analysis/index.vue
@@ -460,7 +460,7 @@ const handleRefresh = () => {
 </template>
 
 <style lang="scss" scoped>
-@use "./styles/variables" as v;
+@use "../../../styles/variables.scss" as *;
 
 .analysis-report {
   .card-header {
diff --git a/src/views/report/daily/index.vue b/src/views/report/daily/index.vue
index a364a1b..996a4a5 100644
--- a/src/views/report/daily/index.vue
+++ b/src/views/report/daily/index.vue
@@ -1,328 +1,1029 @@
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, computed, h, onUnmounted, watch } from 'vue';
 import { ElMessage, ElMessageBox, ElLoading } from 'element-plus';
-import { Plus, Document, Download, TrendCharts, Connection } from '@element-plus/icons-vue';
+import { Plus, Document, Search, Refresh } from '@element-plus/icons-vue';
 import * as echarts from 'echarts';
+import {
+  getReportList,
+  getReportDetail,
+  deleteReport,
+  reviewReport,
+  exportReport,
+  batchExportReports,
+  batchDeleteReports,
+  getReportTrend
+} from '@/api/report/daily.js';
+import { formatDateTime } from '@/utils/format';
+import { sortArrayByField } from '@/utils/sort';
 
-// 示例数据
-const tableData = ref([
-  {
-    id: 1,
-    title: "A区巡护日报",
-    reporter: "张三",
-    department: "巡护部",
-    type: "巡护报告",
-    content: "今日巡护发现...",
-    summary: "今日巡护总体情况良好，发现并处理2处异常情况",
-    data: [
-      { type: "巡护路线", value: "3条" },
-      { type: "巡护时长", value: "4小时" },
-      { type: "发现问题", value: 2, trend: "down" },
-      { type: "处理完成", value: 2 }
-    ],
-    attachments: ["report1.pdf", "image1.jpg"],
-    status: "已提交",
-    createTime: "2024-03-20 10:30",
-  },
-  // ... 其他数据
-]);
+// 状态选项
+const statusOptions = [
+  { label: '草稿', value: 0 },
+  { label: '待审核', value: 1 },
+  { label: '已审核', value: 2 },
+  { label: '已驳回', value: 3 }
+];
 
-// 分页
-const currentPage = ref(1);
-const pageSize = ref(10);
+// 报告类型选项
+const reportTypeOptions = [
+  { label: '日报', value: 'daily' },
+  { label: '周报', value: 'weekly' },
+  { label: '月报', value: 'monthly' },
+  { label: '自定义', value: 'custom' }
+];
 
-// 新建报告
-const dialogVisible = ref(false);
-const formData = ref({
-  title: "",
-  type: "",
-  content: "",
-  attachments: []
+// 搜索条件
+const searchForm = ref({
+  dateRange: [], // 创建时间范围
+  reportCode: '',
+  status: '',
+  title: '',
+  type: ''
 });
 
-// 查看详情
-const detailVisible = ref(false);
-const currentReport = ref(null);
+// 表格数据
+const tableData = ref([]);
+const allData = ref([]); // 保存所有数据
+const loading = ref(false);
 
-const handleView = (row) => {
-  currentReport.value = row;
-  detailVisible.value = true;
+// 分页配置
+const currentPage = ref(1);
+const pageSize = ref(10);
+const total = ref(0);
+
+// 获取日常报告列表
+const getList = async () => {
+  loading.value = true;
+  try {
+    // 构建查询参数（仅保留后端支持的参数）
+    const params = {
+      page: currentPage.value,
+      pageSize: pageSize.value,
+      status: searchForm.value.status !== '' ? Number(searchForm.value.status) : undefined,
+    };
+
+    // 移除所有 undefined 的参数
+    Object.keys(params).forEach(key => {
+      if (params[key] === undefined) {
+        delete params[key];
+      }
+    });
+
+    const res = await getReportList(params);
+    if (res.success) {
+      // 保存所有数据
+      allData.value = res.data.list;
+      // 前端过滤和排序
+      updateTableData();
+      total.value = res.data.pagination.total;
+      // 同步分页参数
+      currentPage.value = res.data.pagination.page;
+      pageSize.value = res.data.pagination.pageSize;
+    } else {
+      ElMessage.error(res.message || '获取报告列表失败');
+    }
+  } catch (error) {
+    console.error('获取报告列表错误:', error);
+    ElMessage.error('获取报告列表失败');
+  } finally {
+    loading.value = false;
+  }
 };
 
-const handleCreate = () => {
-  dialogVisible.value = true;
+// 前端过滤数据
+const filteredData = computed(() => {
+  let result = [...allData.value];
+
+  // 创建时间范围过滤
+  if (searchForm.value.dateRange?.length === 2) {
+    const startTime = new Date(searchForm.value.dateRange[0]).getTime();
+    const endTime = new Date(searchForm.value.dateRange[1]).getTime();
+    result = result.filter(item => {
+      const itemTime = new Date(item.created_at).getTime();
+      return itemTime >= startTime && itemTime <= endTime;
+    });
+  }
+
+  // 报告类型过滤
+  if (searchForm.value.type) {
+    result = result.filter(item => item.report_type === searchForm.value.type);
+  }
+
+  // 报告编号过滤
+  if (searchForm.value.reportCode) {
+    const keyword = searchForm.value.reportCode.toLowerCase();
+    result = result.filter(item =>
+      item.report_code?.toLowerCase().includes(keyword)
+    );
+  }
+
+  // 报告标题过滤
+  if (searchForm.value.title) {
+    const keyword = searchForm.value.title.toLowerCase();
+    result = result.filter(item =>
+      item.title?.toLowerCase().includes(keyword)
+    );
+  }
+
+  // 按创建时间正序排序
+  return sortArrayByField(result, 'created_at', 'asc');
+});
+
+// 更新表格数据
+const updateTableData = () => {
+  const start = (currentPage.value - 1) * pageSize.value;
+  const end = start + pageSize.value;
+  tableData.value = filteredData.value.slice(start, end);
+  total.value = filteredData.value.length;
 };
 
-const handleSubmit = () => {
-  // TODO: 提交表单
-  ElMessage.success('提交成功');
-  dialogVisible.value = false;
+// 趋势图表相关
+let myChart = null;
+const chartLoading = ref(false);
+
+// 获取趋势数据
+const getTrendData = async () => {
+  if (!myChart) return;
+
+  chartLoading.value = true;
+  try {
+    const res = await getReportTrend({ days: 30 });
+    if (!res.success) {
+      ElMessage.error(res.message || '获取趋势数据失败');
+      return;
+    }
+
+    // 获取最近30天的日期数组
+    const last30Days = [];
+    const today = new Date();
+
+    for (let i = 30; i >= 0; i--) {
+      const date = new Date(today);
+      date.setDate(today.getDate() - i);
+      last30Days.push(formatDateTime(date, 'MM-DD'));
+    }
+
+    // 初始化数据数组
+    const dailyData = new Array(30).fill(0);
+    const weeklyData = new Array(30).fill(0);
+    const monthlyData = new Array(30).fill(0);
+    const customData = new Array(30).fill(0);
+
+    // 填充数据
+    res.data.trend.forEach(item => {
+      const reportDate = new Date(item.date);
+      const dayIndex = 29 - Math.floor((today - reportDate) / (1000 * 60 * 60 * 24));
+
+      if (dayIndex >= 0 && dayIndex < 30) {
+        dailyData[dayIndex] = item.daily || 0;
+        weeklyData[dayIndex] = item.weekly || 0;
+        monthlyData[dayIndex] = item.monthly || 0;
+        customData[dayIndex] = item.custom || 0;
+      }
+    });
+
+    const option = {
+      backgroundColor: '#ffffff',
+      title: {
+        text: '近30天报告提交趋势',
+        left: 'center',
+        top: 20,
+        textStyle: {
+          fontSize: 18,
+          fontWeight: 600,
+          color: '#1f2937'
+        }
+      },
+      tooltip: {
+        trigger: 'axis',
+        backgroundColor: 'rgba(255, 255, 255, 0.95)',
+        borderColor: '#eee',
+        borderWidth: 1,
+        padding: [10, 20],
+        textStyle: {
+          color: '#666'
+        },
+        formatter: function(params) {
+          let result = params[0].axisValue + '<br/>';
+          let total = 0;
+          params.forEach(item => {
+            total += item.value;
+            result += `${item.marker} ${item.seriesName}：${item.value}<br/>`;
+          });
+          result += `<br/><b>总计：${total}</b>`;
+          return result;
+        }
+      },
+      legend: {
+        bottom: '5%',
+        itemWidth: 12,
+        itemHeight: 12,
+        textStyle: {
+          color: '#666',
+          fontSize: 12
+        },
+        data: ['日报', '周报', '月报', '自定义']
+      },
+      grid: {
+        left: '3%',
+        right: '4%',
+        top: '15%',
+        bottom: '15%',
+        containLabel: true
+      },
+      xAxis: {
+        type: 'category',
+        boundaryGap: false,
+        data: last30Days,
+        axisLine: {
+          show: false
+        },
+        axisTick: {
+          show: false
+        },
+        axisLabel: {
+          color: '#999',
+          fontSize: 12,
+          rotate: 45
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: '#f5f5f5'
+          }
+        }
+      },
+      yAxis: {
+        type: 'value',
+        splitLine: {
+          lineStyle: {
+            color: '#f5f5f5'
+          }
+        },
+        axisLine: {
+          show: false
+        },
+        axisTick: {
+          show: false
+        },
+        axisLabel: {
+          color: '#999',
+          fontSize: 12
+        }
+      },
+      series: [
+        {
+          name: '日报',
+          type: 'line',
+          smooth: true,
+          symbol: 'circle',
+          symbolSize: 8,
+          showSymbol: false,
+          lineStyle: {
+            width: 3,
+            color: '#4B91FF'
+          },
+          itemStyle: {
+            color: '#4B91FF',
+            borderWidth: 2,
+            borderColor: '#fff'
+          },
+          emphasis: {
+            focus: 'series',
+            showSymbol: true
+          },
+          areaStyle: {
+            opacity: 0.15,
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: '#4B91FF' },
+              { offset: 1, color: '#fff' }
+            ])
+          },
+          data: dailyData
+        },
+        {
+          name: '周报',
+          type: 'line',
+          smooth: true,
+          symbol: 'circle',
+          symbolSize: 8,
+          showSymbol: false,
+          lineStyle: {
+            width: 3,
+            color: '#36CE9E'
+          },
+          itemStyle: {
+            color: '#36CE9E',
+            borderWidth: 2,
+            borderColor: '#fff'
+          },
+          emphasis: {
+            focus: 'series',
+            showSymbol: true
+          },
+          areaStyle: {
+            opacity: 0.15,
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: '#36CE9E' },
+              { offset: 1, color: '#fff' }
+            ])
+          },
+          data: weeklyData
+        },
+        {
+          name: '月报',
+          type: 'line',
+          smooth: true,
+          symbol: 'circle',
+          symbolSize: 8,
+          showSymbol: false,
+          lineStyle: {
+            width: 3,
+            color: '#FFB72B'
+          },
+          itemStyle: {
+            color: '#FFB72B',
+            borderWidth: 2,
+            borderColor: '#fff'
+          },
+          emphasis: {
+            focus: 'series',
+            showSymbol: true
+          },
+          areaStyle: {
+            opacity: 0.15,
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: '#FFB72B' },
+              { offset: 1, color: '#fff' }
+            ])
+          },
+          data: monthlyData
+        },
+        {
+          name: '自定义',
+          type: 'line',
+          smooth: true,
+          symbol: 'circle',
+          symbolSize: 8,
+          showSymbol: false,
+          lineStyle: {
+            width: 3,
+            color: '#FF7070'
+          },
+          itemStyle: {
+            color: '#FF7070',
+            borderWidth: 2,
+            borderColor: '#fff'
+          },
+          emphasis: {
+            focus: 'series',
+            showSymbol: true
+          },
+          areaStyle: {
+            opacity: 0.15,
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: '#FF7070' },
+              { offset: 1, color: '#fff' }
+            ])
+          },
+          data: customData
+        }
+      ]
+    };
+
+    myChart.setOption(option);
+  } catch (error) {
+    console.error('获取趋势数据失败:', error);
+    ElMessage.error('获取趋势数据失败');
+  } finally {
+    chartLoading.value = false;
+  }
 };
 
-// 趋势图表
-let trendChart = null;
-
-// 初始化趋势图表
+// 初始化图表
 const initTrendChart = () => {
   const chartDom = document.getElementById('trendChart');
   if (!chartDom) return;
-  const myChart = echarts.init(chartDom);
-  const option = {
-    backgroundColor: 'transparent',
-    title: {
-      text: '近7天报告提交趋势',
-      textStyle: {
-        fontSize: 16,
-        fontWeight: 500,
-        color: '#303133'
-      },
-      padding: [20, 0]
-    },
-    tooltip: {
-      trigger: 'axis',
-      backgroundColor: 'rgba(255, 255, 255, 0.95)',
-      borderColor: '#eee',
-      padding: [10, 15],
-      textStyle: {
-        color: '#666'
-      },
-      axisPointer: {
-        type: 'line',
-        lineStyle: {
-          color: '#409EFF',
-          opacity: 0.2
-        }
-      }
-    },
-    grid: {
-      left: '3%',
-      right: '4%',
-      bottom: '3%',
-      containLabel: true
-    },
-    xAxis: {
-      type: 'category',
-      data: ['3-14', '3-15', '3-16', '3-17', '3-18', '3-19', '3-20'],
-      boundaryGap: false,
-      axisLine: {
-        lineStyle: {
-          color: '#E5E7EB'
-        }
-      },
-      axisTick: {
-        show: false
-      },
-      axisLabel: {
-        color: '#666',
-        padding: [8, 0]
-      }
-    },
-    yAxis: {
-      type: 'value',
-      splitLine: {
-        lineStyle: {
-          color: '#E5E7EB',
-          type: 'dashed'
-        }
-      },
-      axisLabel: {
-        color: '#666'
-      }
-    },
-    series: [
-      {
-        name: '巡护报告',
-        type: 'line',
-        data: [5, 6, 4, 8, 7, 6, 5],
-        smooth: true,
-        symbol: 'circle',
-        symbolSize: 8,
-        lineStyle: {
-          width: 3,
-          color: '#409EFF'
-        },
-        itemStyle: {
-          color: '#409EFF',
-          borderWidth: 2,
-          borderColor: '#fff'
-        },
-        areaStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            {
-              offset: 0,
-              color: 'rgba(64, 158, 255, 0.2)'
-            },
-            {
-              offset: 1,
-              color: 'rgba(64, 158, 255, 0.02)'
-            }
-          ])
-        }
-      },
-      {
-        name: '监测报告',
-        type: 'line',
-        data: [3, 4, 3, 5, 4, 5, 4],
-        smooth: true,
-        symbol: 'circle',
-        symbolSize: 8,
-        lineStyle: {
-          width: 3,
-          color: '#67C23A'
-        },
-        itemStyle: {
-          color: '#67C23A',
-          borderWidth: 2,
-          borderColor: '#fff'
-        },
-        areaStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            {
-              offset: 0,
-              color: 'rgba(103, 194, 58, 0.2)'
-            },
-            {
-              offset: 1,
-              color: 'rgba(103, 194, 58, 0.02)'
-            }
-          ])
-        }
-      }
-    ],
-    legend: {
-      data: ['巡护报告', '监测报告'],
-      right: 20,
-      top: 20,
-      itemWidth: 12,
-      itemHeight: 12,
-      textStyle: {
-        color: '#666'
-      }
-    }
-  };
 
-  myChart.setOption(option);
-  window.addEventListener('resize', () => myChart.resize());
+  myChart = echarts.init(chartDom);
+  getTrendData();
+
+  // 监听窗口大小变化
+  window.addEventListener('resize', () => myChart?.resize());
 };
 
-onMounted(() => {
-  initTrendChart();
+// 组件卸载时清理
+onUnmounted(() => {
+  window.removeEventListener('resize', () => myChart?.resize());
+  myChart?.dispose();
+  myChart = null;
 });
 
-// 生成报告
-const handleGenerate = () => {
-  ElMessageBox.confirm('是否生成今日巡护报告？系统将自动汇总数据。', '提示', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'info'
-  }).then(() => {
-    const loadingInstance = ElLoading.service({
-      text: '正在汇总数据，请稍候...'
+// 刷新图表数据
+const refreshChart = () => {
+  getTrendData();
+};
+
+// 修改刷新按钮的点击事件处理函数
+const handleRefresh = async () => {
+  await getList();
+  refreshChart();
+};
+
+// 查看报告详情
+const detailVisible = ref(false);
+const currentReport = ref(null);
+
+const handleView = async (row) => {
+  try {
+    const res = await getReportDetail(row.id);
+    if (res.success) {
+      currentReport.value = res.data;
+      detailVisible.value = true;
+    } else {
+      ElMessage.error(res.message || '获取报告详情失败');
+    }
+  } catch (error) {
+    console.error('获取报告详情错误:', error);
+    ElMessage.error('获取报告详情失败');
+  }
+};
+
+// 审核相关变量
+const reviewVisible = ref(false);
+const reviewComment = ref('');
+const reviewingReport = ref(null);
+
+// 审核报告
+const handleReview = (row) => {
+  reviewingReport.value = row;
+  reviewComment.value = '';
+  reviewVisible.value = true;
+};
+
+// 提交审核
+const handleReviewSubmit = async (isApproved) => {
+  try {
+    if (!reviewingReport.value) {
+      ElMessage.warning('未选择要审核的报告');
+      return;
+    }
+
+    // 检查报告状态
+    if (reviewingReport.value.status === 2) {
+      ElMessage.warning('该报告已审核通过，无需重复审核');
+      return;
+    }
+
+    // 如果是驳回，必须填写审核意见
+    if (!isApproved && !reviewComment.value.trim()) {
+      ElMessage.warning('驳回报告时必须填写审核意见');
+      return;
+    }
+
+    const loading = ElLoading.service({
+      text: `正在${isApproved ? '通过' : '驳回'}报告...`,
+      background: 'rgba(0, 0, 0, 0.7)'
     });
 
-    setTimeout(() => {
-      loadingInstance.close();
-      ElMessage.success('报告生成成功，已自动整合今日巡护记录和监测数据');
-    }, 2000);
-  });
+    try {
+      const res = await reviewReport(reviewingReport.value.id, {
+        approved: isApproved,
+        comment: reviewComment.value.trim()
+      });
+
+      if (res.success) {
+        ElMessage.success(`审核${isApproved ? '通过' : '驳回'}成功`);
+        reviewVisible.value = false;
+        await getList(); // 刷新列表
+        refreshChart(); // 刷新图表
+      } else {
+        throw new Error(res.message || '审核失败');
+      }
+    } finally {
+      loading.close();
+    }
+  } catch (error) {
+    console.error('审核失败:', error);
+    ElMessage.error(error.response?.data?.message || error.message || '审核失败');
+  }
 };
 
-// 分析趋势
-const handleAnalyze = () => {
-  ElMessageBox.confirm('是否开始分析近期报告数据趋势？', '提示', {
+// 导出报告
+const handleExport = async (row) => {
+  // 检查报告状态
+  if (row.status !== 2) {
+    ElMessage.warning('只能导出已审核通过的报告');
+    return;
+  }
+
+  const loading = ElLoading.service({
+    text: '正在导出报告...',
+    background: 'rgba(0, 0, 0, 0.7)'
+  });
+
+  try {
+    const response = await exportReport(row.id);
+
+    // 检查响应状态
+    if (response instanceof ArrayBuffer && response.byteLength === 0) {
+      throw new Error('导出失败：返回数据为空');
+    }
+
+    // 检查是否是错误响应
+    if (response instanceof ArrayBuffer) {
+      try {
+        const decoder = new TextDecoder('utf-8');
+        const text = decoder.decode(response);
+        if (text.includes('"success":false') || text.includes('"error"')) {
+          const errorData = JSON.parse(text);
+          throw new Error(errorData.message || errorData.error || '导出失败');
+        }
+      } catch (e) {
+        // 如果不是JSON格式，说明是正常的文件流
+      }
+    }
+
+    // 获取文件名
+    let filename = `报告_${row.report_code}.xlsx`;
+    const contentDisposition = response.headers?.['content-disposition'];
+    if (contentDisposition) {
+      const matches = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/.exec(contentDisposition);
+      if (matches != null && matches[1]) {
+        filename = decodeURIComponent(matches[1].replace(/['"]/g, ''));
+      }
+    }
+
+    // 创建Blob对象
+    const blob = new Blob([response], { type: 'application/vnd.ms-excel' });
+
+    // 创建下载链接并触发下载
+    const url = window.URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = filename;
+    document.body.appendChild(link);
+    link.click();
+
+    // 清理
+    document.body.removeChild(link);
+    window.URL.revokeObjectURL(url);
+
+    ElMessage.success('导出成功');
+  } catch (error) {
+    console.error('导出报告失败:', error);
+    ElMessage.error(error.message || '导出失败');
+  } finally {
+    loading.close();
+  }
+};
+
+// 批量导出报告
+const handleBatchExport = async (ids) => {
+  if (!ids || ids.length === 0) {
+    ElMessage.warning('请选择要导出的报告');
+    return;
+  }
+
+  // 检查选中的报告状态
+  const unauditedReports = selectedRows.value.filter(row => row.status !== 2);
+  if (unauditedReports.length > 0) {
+    const reportCodes = unauditedReports.map(row => row.report_code).join('、');
+    ElMessage.warning(`以下报告未审核通过，不能导出：${reportCodes}`);
+    return;
+  }
+
+  const loading = ElLoading.service({
+    text: '正在批量导出报告...',
+    background: 'rgba(0, 0, 0, 0.7)'
+  });
+
+  try {
+    const response = await batchExportReports({ ids });
+
+    // 检查响应状态
+    if (response instanceof ArrayBuffer && response.byteLength === 0) {
+      throw new Error('批量导出失败：返回数据为空');
+    }
+
+    // 检查是否是错误响应
+    if (response instanceof ArrayBuffer) {
+      try {
+        const decoder = new TextDecoder('utf-8');
+        const text = decoder.decode(response);
+        if (text.includes('"success":false') || text.includes('"error"')) {
+          const errorData = JSON.parse(text);
+          throw new Error(errorData.message || errorData.error || '批量导出失败');
+        }
+      } catch (e) {
+        // 如果不是JSON格式，说明是正常的文件流
+      }
+    }
+
+    // 获取文件名
+    let filename = `批量报告_${formatDateTime(new Date(), 'YYYYMMDDHHmmss')}.xlsx`;
+    const contentDisposition = response.headers?.['content-disposition'];
+    if (contentDisposition) {
+      const matches = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/.exec(contentDisposition);
+      if (matches != null && matches[1]) {
+        filename = decodeURIComponent(matches[1].replace(/['"]/g, ''));
+      }
+    }
+
+    // 创建Blob对象
+    const blob = new Blob([response], { type: 'application/vnd.ms-excel' });
+
+    // 创建下载链接并触发下载
+    const url = window.URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = filename;
+    document.body.appendChild(link);
+    link.click();
+
+    // 清理
+    document.body.removeChild(link);
+    window.URL.revokeObjectURL(url);
+
+    ElMessage.success('批量导出成功');
+  } catch (error) {
+    console.error('批量导出报告失败:', error);
+    // 尝试解析错误信息
+    if (error.response?.data instanceof ArrayBuffer) {
+      try {
+        const decoder = new TextDecoder('utf-8');
+        const errorText = decoder.decode(error.response.data);
+        const errorJson = JSON.parse(errorText);
+        ElMessage.error(errorJson.message || '批量导出失败');
+      } catch (e) {
+        ElMessage.error(error.message || '批量导出失败');
+      }
+    } else {
+      ElMessage.error(error.message || '批量导出失败');
+    }
+  } finally {
+    loading.close();
+  }
+};
+
+// 删除报告
+const handleDelete = (row) => {
+  ElMessageBox.confirm('确认删除该报告吗？此操作不可恢复', '警告', {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
-    type: 'info'
-  }).then(() => {
-    detailVisible.value = true;
-    currentReport.value = null;
-    showTrendAnalysis.value = true;
-  });
+    type: 'warning'
+  }).then(async () => {
+    try {
+      const res = await deleteReport(row.id);
+      if (res.success) {
+        ElMessage.success('删除成功');
+        getList(); // 刷新列表
+      } else {
+        ElMessage.error(res.message || '删除失败');
+      }
+    } catch (error) {
+      console.error('删除报告失败:', error);
+      ElMessage.error('删除失败');
+    }
+  }).catch(() => {});
 };
 
-const showTrendAnalysis = ref(false);
+// 批量删除报告
+const handleBatchDelete = async (ids) => {
+  try {
+    const res = await batchDeleteReports(ids);
+    if (res.success) {
+      ElMessage.success('批量删除成功');
+      getList(); // 刷新列表
+    } else {
+      ElMessage.error(res.message || '批量删除失败');
+    }
+  } catch (error) {
+    console.error('批量删除报告失败:', error);
+    ElMessage.error('批量删除失败');
+  }
+};
+
+// 处理搜索
+const handleSearch = () => {
+  currentPage.value = 1;
+  updateTableData();
+};
+
+// 重置搜索
+const resetSearch = () => {
+  searchForm.value = {
+    dateRange: [],
+    reportCode: '',
+    status: '',
+    title: '',
+    type: ''
+  };
+  currentPage.value = 1;
+  getList();
+};
+
+// 监听搜索条件变化
+watch([searchForm, currentPage, pageSize], () => {
+  if (searchForm.value.status !== '' || searchForm.value.dateRange?.length === 2) {
+    // 如果改变了后端支持的筛选条件，重新请求数据
+    getList();
+  } else {
+    // 否则只进行前端过滤
+    updateTableData();
+  }
+}, { deep: true });
+
+// 获取状态标签类型
+const getStatusType = (status) => {
+  const map = {
+    0: 'info',
+    1: 'warning',
+    2: 'success',
+    3: 'danger'
+  };
+  return map[status] || 'info';
+};
+
+// 获取状态文本
+const getStatusText = (status) => {
+  const map = {
+    0: '草稿',
+    1: '待审核',
+    2: '已审核',
+    3: '已驳回'
+  };
+  return map[status] || '未知';
+};
+
+// 批量操作相关
+const selectedRows = ref([]);
+const selectedIds = computed(() => selectedRows.value.map(row => row.id));
+
+const handleSelectionChange = (rows) => {
+  selectedRows.value = rows;
+};
+
+// 计算统计数据
+const statistics = computed(() => {
+  if (!tableData.value) return {
+    totalCount: 0,
+    monthlyCount: 0,
+    pendingCount: 0,
+    draftCount: 0,
+    approvalRate: 0
+  };
+
+  const totalCount = total.value; // 使用后端返回的总数
+  const now = new Date();
+  const monthStart = new Date(now.getFullYear(), now.getMonth(), 1);
+  const monthlyCount = tableData.value.filter(item =>
+    new Date(item.created_at) >= monthStart
+  ).length;
+  const pendingCount = tableData.value.filter(item =>
+    item.status === 1
+  ).length;
+  const draftCount = tableData.value.filter(item =>
+    item.status === 0
+  ).length;
+
+  // 计算审核通过率时只计算已审核的报告（通过和驳回）
+  const reviewedReports = tableData.value.filter(item => item.status === 2 || item.status === 3);
+  const totalReviewed = reviewedReports.length;
+  const approvedCount = reviewedReports.filter(item => item.status === 2).length;
+  const approvalRate = totalReviewed ? Math.round((approvedCount / totalReviewed) * 100) : 0;
+
+  return {
+    totalCount,
+    monthlyCount,
+    pendingCount,
+    draftCount,
+    approvalRate
+  };
+});
+
+onMounted(() => {
+  getList();
+  initTrendChart();
+});
 </script>
 
 <template>
   <div class="daily-report">
+    <el-card class="mb-20">
+      <div id="trendChart" style="height: 300px"></div>
+    </el-card>
+
     <el-card>
       <template #header>
         <div class="card-header">
           <span>日常报告</span>
           <div class="header-btns">
-            <el-button :icon="Document" @click="handleGenerate">生成报告</el-button>
-            <el-button :icon="TrendCharts" @click="handleAnalyze">趋势分析</el-button>
-            <el-button type="primary" :icon="Plus" @click="handleCreate">新建报告</el-button>
+            <el-button :icon="Refresh" @click="handleRefresh">刷新</el-button>
           </div>
         </div>
       </template>
 
       <!-- 统计卡片 -->
       <el-row :gutter="20" class="mb-20">
-        <el-col :span="6">
+        <el-col :span="4">
           <el-card shadow="hover" class="stat-card">
-            <div class="stat-value">256</div>
+            <div class="stat-value">{{ statistics.totalCount }}</div>
             <div class="stat-label">报告总数</div>
           </el-card>
         </el-col>
-        <el-col :span="6">
+        <el-col :span="4">
           <el-card shadow="hover" class="stat-card">
-            <div class="stat-value">68</div>
+            <div class="stat-value">{{ statistics.monthlyCount }}</div>
             <div class="stat-label">本月新增</div>
           </el-card>
         </el-col>
-        <el-col :span="6">
+        <el-col :span="4">
           <el-card shadow="hover" class="stat-card">
-            <div class="stat-value">12</div>
+            <div class="stat-value">{{ statistics.draftCount }}</div>
+            <div class="stat-label">草稿</div>
+          </el-card>
+        </el-col>
+        <el-col :span="4">
+          <el-card shadow="hover" class="stat-card">
+            <div class="stat-value">{{ statistics.pendingCount }}</div>
             <div class="stat-label">待审核</div>
           </el-card>
         </el-col>
-        <el-col :span="6">
+        <el-col :span="8">
           <el-card shadow="hover" class="stat-card">
-            <div class="stat-value">98%</div>
-            <div class="stat-label">按时提交率</div>
+            <div class="stat-value">{{ statistics.approvalRate }}%</div>
+            <div class="stat-label">审核通过率</div>
           </el-card>
         </el-col>
       </el-row>
 
-      <!-- 趋势图表 -->
-      <el-card class="mb-20">
-        <template #header>
-          <div class="chart-header">
-            <span>报告趋势分析</span>
-            <el-tooltip content="系统自动分析近期报告数据，预测未来趋势">
-              <el-icon><Connection /></el-icon>
-            </el-tooltip>
-          </div>
-        </template>
-        <div id="trendChart" style="height: 300px"></div>
-      </el-card>
+      <!-- 搜索表单 -->
+      <el-form :model="searchForm" inline class="search-form">
+        <el-form-item label="创建时间" label-width="80px">
+          <el-date-picker
+            v-model="searchForm.dateRange"
+            type="daterange"
+            unlink-panels
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            :shortcuts="[
+              {
+                text: '最近一周',
+                value: () => {
+                  const end = new Date();
+                  const start = new Date();
+                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+                  return [start, end];
+                },
+              },
+              {
+                text: '最近一个月',
+                value: () => {
+                  const end = new Date();
+                  const start = new Date();
+                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+                  return [start, end];
+                },
+              },
+              {
+                text: '最近三个月',
+                value: () => {
+                  const end = new Date();
+                  const start = new Date();
+                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+                  return [start, end];
+                },
+              },
+            ]"
+            value-format="YYYY-MM-DD"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item label="报告类型" label-width="80px">
+          <el-select
+            v-model="searchForm.type"
+            placeholder="请选择类型"
+            clearable
+          >
+            <el-option
+              v-for="item in reportTypeOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="报告编号" label-width="80px">
+          <el-input
+            v-model="searchForm.reportCode"
+            placeholder="请输入报告编号"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item label="报告标题" label-width="80px">
+          <el-input
+            v-model="searchForm.title"
+            placeholder="请输入报告标题"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item label="状态" label-width="80px">
+          <el-select
+            v-model="searchForm.status"
+            placeholder="请选择状态"
+            clearable
+          >
+            <el-option
+              v-for="item in statusOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item class="search-buttons">
+          <el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
+          <el-button @click="resetSearch">重置</el-button>
+          <template v-if="selectedRows.length >= 2">
+            <el-button type="warning" @click="handleBatchExport(selectedIds)">批量导出</el-button>
+            <el-button type="danger" @click="handleBatchDelete(selectedIds)">批量删除</el-button>
+          </template>
+        </el-form-item>
+      </el-form>
 
       <!-- 报告列表 -->
-      <el-table :data="tableData" style="width: 100%">
-        <el-table-column prop="title" label="报告标题" min-width="180" />
-        <el-table-column prop="reporter" label="提交人" width="100" />
-        <el-table-column prop="summary" label="报告摘要" min-width="200" show-overflow-tooltip />
-        <el-table-column prop="type" label="类型" width="100">
+      <el-table
+        v-loading="loading"
+        :data="tableData"
+        style="width: 100%"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="55" />
+        <el-table-column type="index" label="序号" width="60" align="center"/>
+        <el-table-column prop="report_code" label="报告编号" width="160" align="center"/>
+        <el-table-column prop="title" label="报告标题" min-width="180" show-overflow-tooltip align="center"/>
+        <el-table-column prop="report_type" label="报告类型" width="100" align="center">
           <template #default="{ row }">
-            <el-tag :type="row.type === '巡护报告' ? 'success' : 'primary'">
-              {{ row.type }}
+            <el-tag
+              :type="row.report_type === 'daily' ? 'primary' :
+                     row.report_type === 'weekly' ? 'success' :
+                     row.report_type === 'monthly' ? 'warning' :
+                     row.report_type === 'custom' ? 'danger' :
+                     'info'"
+              size="small"
+            >
+              {{ row.report_type === 'daily' ? '日报' :
+                 row.report_type === 'weekly' ? '周报' :
+                 row.report_type === 'monthly' ? '月报' :
+                 row.report_type === 'custom' ? '自定义' :
+                 '未知' }}
             </el-tag>
           </template>
         </el-table-column>
-        <el-table-column prop="status" label="状态" width="100">
+        <el-table-column label="巡检人员" width="100" align="center">
           <template #default="{ row }">
-            <el-tag :type="row.status === '已提交' ? 'success' : 'warning'">
-              {{ row.status }}
+            {{ row.content?.基本信息?.inspector || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column label="巡检时间" width="160" align="center">
+          <template #default="{ row }">
+            {{ formatDateTime(row.content?.基本信息?.inspection_time) || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="status" label="状态" width="100" align="center">
+          <template #default="{ row }">
+            <el-tag :type="getStatusType(row.status)" size="small">
+              {{ getStatusText(row.status) }}
             </el-tag>
           </template>
         </el-table-column>
-        <el-table-column prop="createTime" label="提交时间" width="180" />
-        <el-table-column label="操作" width="200" fixed="right">
+        <el-table-column prop="created_at" label="创建时间" width="160" align="center">
+          <template #default="{ row }">
+            {{ formatDateTime(row.created_at) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="250" fixed="right" align="center">
           <template #default="{ row }">
             <el-button type="primary" link @click="handleView(row)">查看</el-button>
-            <el-button type="success" link @click="handleDownload(row)">下载</el-button>
-            <el-button type="warning" link @click="handleExport(row)">导出</el-button>
+            <el-button
+              v-if="row.status === 2"
+              type="success"
+              link
+              @click="handleExport(row)"
+            >导出</el-button>
+            <el-button
+              v-if="row.status === 1"
+              type="warning"
+              link
+              @click="handleReview(row)"
+            >审核</el-button>
+            <el-button
+              type="danger"
+              link
+              @click="handleDelete(row)"
+            >删除</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -332,146 +1033,173 @@ const showTrendAnalysis = ref(false);
         <el-pagination
           v-model:current-page="currentPage"
           v-model:page-size="pageSize"
-          :page-sizes="[10, 20, 50]"
+          :total="total"
+          :page-sizes="[10, 20, 50, 100]"
+          background
           layout="total, sizes, prev, pager, next"
-          :total="tableData.length"
         />
       </div>
     </el-card>
 
-    <!-- 新建报告弹窗 -->
-    <el-dialog v-model="dialogVisible" title="新建日常报告" width="700px">
-      <el-form :model="formData" label-width="100px">
-        <el-form-item label="报告标题" required>
-          <el-input v-model="formData.title" placeholder="请输入报告标题" />
-        </el-form-item>
-        <el-form-item label="报告类型" required>
-          <el-radio-group v-model="formData.type">
-            <el-radio label="巡护报告">巡护报告</el-radio>
-            <el-radio label="监测报告">监测报告</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item label="报告内容" required>
+    <!-- 报告详情弹窗 -->
+    <el-dialog
+      v-model="detailVisible"
+      title="报告详情"
+      width="900px"
+      destroy-on-close
+    >
+      <el-descriptions
+        v-if="currentReport"
+        :column="2"
+        border
+      >
+        <el-descriptions-item label="报告编号" :span="2">
+          {{ currentReport.report_code }}
+        </el-descriptions-item>
+        <el-descriptions-item label="报告标题" :span="2">
+          {{ currentReport.title }}
+        </el-descriptions-item>
+        <el-descriptions-item label="统计日期" :span="2">
+          {{ formatDateTime(currentReport.start_date) === formatDateTime(currentReport.end_date)
+             ? formatDateTime(currentReport.start_date)
+             : `${formatDateTime(currentReport.start_date)} 至 ${formatDateTime(currentReport.end_date)}` }}
+        </el-descriptions-item>
+        <el-descriptions-item label="报告状态">
+          <el-tag :type="getStatusType(currentReport.status)">
+            {{ getStatusText(currentReport.status) }}
+          </el-tag>
+        </el-descriptions-item>
+        <el-descriptions-item label="创建信息">
+          {{ currentReport.created_by }} 于 {{ formatDateTime(currentReport.created_at) }}
+        </el-descriptions-item>
+        <el-descriptions-item label="报告内容" :span="2">
+          <div v-if="currentReport.content" class="report-content">
+            <!-- 基本信息 -->
+            <div class="content-section">
+              <h4>基本信息</h4>
+              <el-descriptions :column="2" border>
+                <el-descriptions-item label="巡检人员">
+                  {{ currentReport.content.基本信息.inspector }}
+                </el-descriptions-item>
+                <el-descriptions-item label="巡检时间">
+                  {{ formatDateTime(currentReport.content.基本信息.inspection_time) }}
+                </el-descriptions-item>
+                <el-descriptions-item label="天气情况">
+                  {{ currentReport.content.基本信息.weather }}
+                </el-descriptions-item>
+                <el-descriptions-item label="环境温度">
+                  {{ currentReport.content.基本信息.temperature }}°C
+                </el-descriptions-item>
+              </el-descriptions>
+            </div>
+
+            <!-- 水质监测 -->
+            <div class="content-section">
+              <h4>水质监测</h4>
+              <el-descriptions :column="2" border>
+                <el-descriptions-item label="水温">
+                  {{ currentReport.content.水质监测.water_temperature }}°C
+                </el-descriptions-item>
+                <el-descriptions-item label="pH值">
+                  {{ currentReport.content.水质监测.ph_value }}
+                </el-descriptions-item>
+                <el-descriptions-item label="溶解氧">
+                  {{ currentReport.content.水质监测.dissolved_oxygen }} mg/L
+                </el-descriptions-item>
+                <el-descriptions-item label="浊度">
+                  {{ currentReport.content.水质监测.turbidity }} NTU
+                </el-descriptions-item>
+              </el-descriptions>
+            </div>
+
+            <!-- 生态观察 -->
+            <div class="content-section">
+              <h4>生态观察</h4>
+              <el-descriptions :column="1" border>
+                <el-descriptions-item label="植物状况">
+                  {{ currentReport.content.生态观察.plant_status }}
+                </el-descriptions-item>
+                <el-descriptions-item label="动物观察">
+                  {{ currentReport.content.生态观察.animal_observation }}
+                </el-descriptions-item>
+                <el-descriptions-item label="现场照片">
+                  <div class="photo-list">
+                    <el-tag
+                      v-for="photo in currentReport.content.生态观察.photos"
+                      :key="photo"
+                      size="small"
+                      style="margin-right: 8px"
+                    >
+                      {{ photo }}
+                    </el-tag>
+                  </div>
+                </el-descriptions-item>
+              </el-descriptions>
+            </div>
+          </div>
+        </el-descriptions-item>
+        <el-descriptions-item
+          v-if="currentReport.status >= 2"
+          label="审核信息"
+          :span="2"
+        >
+          <div>审核人：{{ currentReport.reviewer_id }}</div>
+          <div>审核时间：{{ formatDateTime(currentReport.review_time) }}</div>
+          <div>审核意见：{{ currentReport.review_comment || '无' }}</div>
+        </el-descriptions-item>
+      </el-descriptions>
+    </el-dialog>
+
+    <!-- 审核对话框 -->
+    <el-dialog
+      v-model="reviewVisible"
+      title="审核报告"
+      width="800px"
+    >
+      <el-form label-width="100px">
+        <el-form-item label="审核意见">
           <el-input
-            v-model="formData.content"
+            v-model="reviewComment"
             type="textarea"
-            rows="6"
-            placeholder="请输入报告内容"
+            :rows="4"
+            placeholder="请输入审核意见（选填）"
           />
         </el-form-item>
-        <el-form-item label="附件">
-          <el-upload action="#" multiple :auto-upload="false">
-            <el-button type="primary">选择文件</el-button>
-          </el-upload>
-        </el-form-item>
       </el-form>
       <template #footer>
         <span class="dialog-footer">
-          <el-button @click="dialogVisible = false">取消</el-button>
-          <el-button type="primary" @click="handleSubmit">提交</el-button>
+          <el-button @click="reviewVisible = false">取消</el-button>
+          <el-button type="primary" @click="handleReviewSubmit(true)">通过</el-button>
+          <el-button type="danger" @click="handleReviewSubmit(false)">驳回</el-button>
         </span>
       </template>
     </el-dialog>
-
-    <!-- 详情弹窗 -->
-    <el-dialog v-model="detailVisible" title="报告详情" width="800px">
-      <el-descriptions :column="2" border v-if="currentReport">
-        <el-descriptions-item label="报告标题" :span="2">
-          {{ currentReport.title }}
-        </el-descriptions-item>
-        <el-descriptions-item label="提交人">
-          {{ currentReport.reporter }}
-        </el-descriptions-item>
-        <el-descriptions-item label="所属部门">
-          {{ currentReport.department }}
-        </el-descriptions-item>
-        <el-descriptions-item label="报告类型">
-          {{ currentReport.type }}
-        </el-descriptions-item>
-        <el-descriptions-item label="提交时间">
-          {{ currentReport.createTime }}
-        </el-descriptions-item>
-        <el-descriptions-item label="报告内容" :span="2">
-          {{ currentReport.content }}
-        </el-descriptions-item>
-        <el-descriptions-item label="附件" :span="2">
-          <el-link
-            v-for="file in currentReport.attachments"
-            :key="file"
-            type="primary"
-            style="margin-right: 16px"
-          >
-            {{ file }}
-          </el-link>
-        </el-descriptions-item>
-        <el-descriptions-item label="数据统计" :span="2">
-          <el-row :gutter="20" class="stat-grid">
-            <el-col :span="6" v-for="item in currentReport.data" :key="item.type">
-              <div class="stat-item">
-                <div class="stat-item-label">{{ item.type }}</div>
-                <div class="stat-item-value">
-                  {{ item.value }}
-                  <el-icon v-if="item.trend" :class="item.trend">
-                    <component :is="item.trend === 'up' ? 'ArrowUp' : 'ArrowDown'" />
-                  </el-icon>
-                </div>
-              </div>
-            </el-col>
-          </el-row>
-        </el-descriptions-item>
-      </el-descriptions>
-      <template #footer>
-        <span class="dialog-footer">
-          <el-button @click="detailVisible = false">关闭</el-button>
-          <el-button type="warning" @click="handleExport(currentReport)">导出</el-button>
-        </span>
-      </template>
-    </el-dialog>
-
-    <!-- 趋势分析弹窗 -->
-    <el-dialog v-model="showTrendAnalysis" title="报告趋势分析" width="900px">
-      <div class="trend-analysis">
-        <el-descriptions :column="2" border>
-          <el-descriptions-item label="数据周期" :span="2">
-            近30天报告数据
-          </el-descriptions-item>
-          <el-descriptions-item label="报告总量">
-            增长趋势 <el-tag type="success">上升 12%</el-tag>
-          </el-descriptions-item>
-          <el-descriptions-item label="提交及时率">
-            稳定趋势 <el-tag type="info">98%</el-tag>
-          </el-descriptions-item>
-          <el-descriptions-item label="问题发现率">
-            下降趋势 <el-tag type="success">-15%</el-tag>
-          </el-descriptions-item>
-          <el-descriptions-item label="处理及时率">
-            上升趋势 <el-tag type="success">+8%</el-tag>
-          </el-descriptions-item>
-          <el-descriptions-item label="预测分析" :span="2">
-            <div class="prediction">
-              <p>1. 根据当前趋势，预计下月报告总量将增加约10%</p>
-              <p>2. 问题发现率持续下降，表明整体环境质量改善</p>
-              <p>3. 建议继续保持当前的巡护频率和监测力度</p>
-            </div>
-          </el-descriptions-item>
-        </el-descriptions>
-      </div>
-    </el-dialog>
   </div>
 </template>
 
 <style lang="scss" scoped>
-@use "./styles/variables" as v;
+@use "../../../styles/variables.scss" as *;
 
 .daily-report {
+  .mb-20 {
+    margin-bottom: 20px;
+  }
+
   .card-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-  }
 
-  .mb-20 {
-    margin-bottom: 20px;
+    span {
+      font-size: 16px;
+      font-weight: 500;
+      color: $text-primary;
+    }
+
+    .header-btns {
+      display: flex;
+      gap: 12px;
+    }
   }
 
   .stat-card {
@@ -496,95 +1224,84 @@ const showTrendAnalysis = ref(false);
     }
   }
 
+  .search-form {
+    margin-bottom: 24px;
+    padding: 24px;
+    background-color: #f8f9fa;
+    border-radius: 8px;
+
+    :deep(.el-form-item) {
+      margin-bottom: 16px;
+      margin-right: 24px;
+
+      &:last-child {
+        margin-right: 0;
+        margin-bottom: 0;
+      }
+    }
+
+    :deep(.el-input),
+    :deep(.el-select) {
+      width: 220px;
+    }
+
+    :deep(.el-date-editor.el-input__wrapper) {
+      width: 400px !important;
+    }
+
+    .search-buttons {
+      display: flex;
+      gap: 12px;
+    }
+  }
+
   .pagination-container {
     margin-top: 20px;
     display: flex;
     justify-content: flex-end;
   }
 
-  .header-btns {
+  .batch-actions {
+    margin-top: 16px;
+    padding: 16px;
+    background-color: #f8f9fa;
+    border-radius: 4px;
     display: flex;
     gap: 12px;
   }
 
-  .stat-grid {
-    padding: 12px;
+  :deep(.el-card) {
+    border-radius: 8px;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
+    transition: all 0.3s;
 
-    .stat-item {
-      text-align: center;
-      padding: 12px;
-      background: #f8f9fa;
-      border-radius: 4px;
+    &:hover {
+      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+    }
+  }
 
-      .stat-item-label {
-        font-size: 13px;
-        color: $text-secondary;
-        margin-bottom: 8px;
-      }
+  .report-content {
+    .content-section {
+      margin-bottom: 20px;
 
-      .stat-item-value {
+      h4 {
+        margin: 0 0 12px;
+        padding-left: 8px;
+        border-left: 4px solid $primary-color;
         font-size: 16px;
-        font-weight: 500;
-        color: $text-primary;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: 4px;
+        line-height: 1.5;
+      }
 
-        .up {
-          color: $success-color;
-        }
-
-        .down {
-          color: $danger-color;
-        }
+      &:last-child {
+        margin-bottom: 0;
       }
     }
-  }
 
-  .chart-header {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-
-    .el-icon {
-      color: $text-secondary;
-      cursor: help;
+    .photo-list {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
     }
   }
-
-  .trend-analysis {
-    .prediction {
-      padding: 12px;
-      background: #f8f9fa;
-      border-radius: 4px;
-
-      p {
-        margin: 8px 0;
-        color: $text-regular;
-
-        &:first-child {
-          margin-top: 0;
-        }
-
-        &:last-child {
-          margin-bottom: 0;
-        }
-      }
-    }
-  }
-}
-
-.chart-card {
-  height: 400px;
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
-  margin-bottom: 24px;
-  transition: all 0.3s;
-
-  &:hover {
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
-  }
 }
 </style>