diff --git a/src/api/patrol/event.js b/src/api/patrol/event.js
new file mode 100644
index 0000000..4582f6c
--- /dev/null
+++ b/src/api/patrol/event.js
@@ -0,0 +1,117 @@
+import request from '@/utils/request'
+
+/**
+ * 创建安防事件
+ * @param {Object} data - 事件数据
+ * @param {string} data.event_type - 事件类型：非法捕捞/环境破坏/设施损坏/其他事件
+ * @param {number} data.event_level - 事件级别：1-轻微 2-中等 3-严重
+ * @param {string} data.location_description - 位置描述
+ * @param {string} data.description - 事件描述
+ * @param {Array} [data.image_urls] - 图片地址列表
+ * @param {Array} [data.video_urls] - 视频地址列表
+ * @param {string} [data.reporter_name] - 上报人姓名
+ * @param {string} [data.reporter_phone] - 上报人电话
+ * @param {string} [data.remark] - 备注信息
+ * @returns {Promise} 返回创建结果
+ */
+export function createEvent(data) {
+  return request.post('/api/admin/patrol/events', data)
+}
+
+/**
+ * 获取安防事件列表
+ * @param {Object} params - 查询参数
+ * @param {number} [params.page=1] - 页码
+ * @param {number} [params.pageSize=10] - 每页条数
+ * @param {string} [params.keyword] - 搜索关键词
+ * @param {string} [params.event_type] - 事件类型
+ * @param {number} [params.event_level] - 事件级别
+ * @param {number} [params.handling_status] - 处理状态
+ * @param {string} [params.start_date] - 开始日期
+ * @param {string} [params.end_date] - 结束日期
+ * @returns {Promise} 返回事件列表数据
+ */
+export function getEventList(params = {}) {
+  return request.get('/api/admin/patrol/events', {
+    params: {
+      page: params.page || 1,
+      page_size: params.pageSize || 10,
+      keyword: params.keyword || undefined,
+      event_type: params.event_type || undefined,
+      event_level: params.event_level || undefined,
+      handling_status: params.handling_status || undefined,
+      start_date: params.start_date || undefined,
+      end_date: params.end_date || undefined
+    }
+  })
+}
+
+/**
+ * 获取安防事件详情
+ * @param {string|number} id - 事件ID
+ * @returns {Promise} 返回事件详情数据
+ */
+export function getEventDetail(id) {
+  return request.get(`/api/admin/patrol/events/${id}`)
+}
+
+/**
+ * 更新事件处理状态
+ * @param {string|number} id - 事件ID
+ * @param {Object} data - 更新数据
+ * @param {number} data.handling_status - 处理状态：0-待处理 1-处理中 2-已处理 3-已关闭
+ * @param {string} [data.handling_description] - 处理描述
+ * @returns {Promise} 返回更新结果
+ */
+export function updateEventStatus(id, data) {
+  return request.put(`/api/admin/patrol/events/${id}/status`, {
+    handling_status: data.handling_status,
+    handling_description: data.handling_description || '',
+    updated_by: 1  // 默认管理员ID
+  })
+}
+
+/**
+ * 导出事件列表
+ * @param {Object} params - 导出参数
+ * @param {string} [params.event_type] - 事件类型
+ * @param {number} [params.event_level] - 事件级别
+ * @param {number} [params.handling_status] - 处理状态
+ * @param {string} [params.start_date] - 开始日期
+ * @param {string} [params.end_date] - 结束日期
+ * @returns {Promise} 返回二进制文件流
+ */
+export function exportEvents(params = {}) {
+  return request.get('/api/admin/patrol/events/export/list', {
+    params,
+    responseType: 'blob',
+    headers: {
+      'Accept': 'application/vnd.ms-excel'
+    }
+  })
+}
+
+/**
+ * 批量导出事件
+ * @param {Array<string|number>} ids - 事件ID列表
+ * @returns {Promise} 返回二进制文件流
+ */
+export function batchExportEvents(ids) {
+  return request.post('/api/admin/patrol/events/export/batch',
+    { ids },
+    {
+      responseType: 'blob',
+      headers: {
+        'Accept': 'application/vnd.ms-excel'
+      }
+    }
+  )
+}
+
+/**
+ * 获取事件统计信息
+ * @returns {Promise} 返回统计数据
+ */
+export function getEventStatistics() {
+  return request.get('/api/admin/patrol/events/statistics/overview')
+}
\ No newline at end of file
diff --git a/src/views/patrol/events/index.vue b/src/views/patrol/events/index.vue
index 2b43303..b2da67e 100644
--- a/src/views/patrol/events/index.vue
+++ b/src/views/patrol/events/index.vue
@@ -1,16 +1,1050 @@
 <script setup>
+import { ref, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Search, Refresh, Plus, Download } from '@element-plus/icons-vue'
+import { getEventList, updateEventStatus, createEvent, getEventDetail, getEventStatistics, exportEvents, batchExportEvents } from '@/api/patrol/event'
+import { formatDateTime } from '@/utils/format'
 
+// 表格数据
+const tableData = ref([])
+const loading = ref(false)
+
+// 统计数据
+const statistics = ref({
+  total: 0,
+  pending: 0,
+  processing: 0,
+  processed: 0,
+  closed: 0
+})
+
+// 分页配置
+const currentPage = ref(1)
+const pageSize = ref(10)
+const total = ref(0)
+
+// 搜索表单
+const searchForm = ref({
+  keyword: '',
+  event_type: '',
+  event_level: '',
+  handling_status: '',
+  date_range: []
+})
+
+// 图片预览
+const previewVisible = ref(false)
+const previewImages = ref([])
+const currentPreviewIndex = ref(0)
+
+// 视频预览
+const videoVisible = ref(false)
+const videoUrl = ref('')
+
+// 处理对话框
+const processDialogVisible = ref(false)
+const currentEvent = ref(null)
+const processForm = ref({
+  handling_status: 1,
+  handling_description: ''
+})
+
+// 新增表单对话框
+const createDialogVisible = ref(false)
+const createForm = ref({
+  event_type: '',
+  event_level: 1,
+  location: {
+    longitude: 120.123456,
+    latitude: 30.123456
+  },
+  location_description: '',
+  description: '',
+  image_urls: [],
+  video_urls: [],
+  reporter_name: '',
+  reporter_phone: '',
+  remark: ''
+})
+
+// 新增表单规则
+const createFormRules = {
+  event_type: [{ required: true, message: '请选择事件类型', trigger: 'change' }],
+  event_level: [{ required: true, message: '请选择事件级别', trigger: 'change' }],
+  'location.longitude': [{ required: true, message: '请输入经度', trigger: 'blur' }],
+  'location.latitude': [{ required: true, message: '请输入纬度', trigger: 'blur' }],
+  location_description: [{ required: true, message: '请输入位置描述', trigger: 'blur' }],
+  description: [{ required: true, message: '请输入事件描述', trigger: 'blur' }]
+}
+
+const createFormRef = ref()
+
+// 详情对话框
+const detailDialogVisible = ref(false)
+const eventDetail = ref(null)
+
+// 选中的行
+const selectedRows = ref([])
+
+// 获取事件列表
+const getList = async () => {
+  loading.value = true
+  try {
+    const res = await getEventList({
+      page: Number(currentPage.value),
+      pageSize: Number(pageSize.value),
+      keyword: searchForm.value.keyword,
+      event_type: searchForm.value.event_type,
+      event_level: searchForm.value.event_level,
+      handling_status: searchForm.value.handling_status,
+      start_date: searchForm.value.date_range?.[0],
+      end_date: searchForm.value.date_range?.[1]
+    })
+
+    if (res.success) {
+      tableData.value = res.data.list
+      total.value = Number(res.data.pagination.total)
+      currentPage.value = Number(res.data.pagination.page || 1)
+      pageSize.value = Number(res.data.pagination.page_size || 10)
+    } else {
+      ElMessage.error(res.message || '获取列表失败')
+    }
+  } catch (error) {
+    console.error('获取安防事件列表错误:', error)
+    ElMessage.error('获取列表失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+// 获取统计数据
+const getStatistics = async () => {
+  try {
+    const res = await getEventStatistics()
+    if (res.success) {
+      statistics.value = res.data
+    }
+  } catch (error) {
+    console.error('获取统计数据错误:', error)
+  }
+}
+
+// 处理分页大小变化
+const handleSizeChange = (val) => {
+  pageSize.value = val
+  currentPage.value = 1
+  getList()
+}
+
+// 处理当前页变化
+const handleCurrentChange = (val) => {
+  currentPage.value = val
+  getList()
+}
+
+// 处理搜索
+const handleSearch = () => {
+  currentPage.value = 1
+  getList()
+}
+
+// 重置搜索
+const resetSearch = () => {
+  searchForm.value = {
+    keyword: '',
+    event_type: '',
+    event_level: '',
+    handling_status: '',
+    date_range: []
+  }
+  currentPage.value = 1
+  getList()
+}
+
+// 刷新列表
+const handleRefresh = () => {
+  getList()
+}
+
+// 图片预览
+const handlePreviewImage = (urls) => {
+  if (!urls?.length) return
+  previewImages.value = typeof urls === 'string' ? JSON.parse(urls) : urls
+  currentPreviewIndex.value = 0
+  previewVisible.value = true
+}
+
+// 视频预览
+const handlePreviewVideo = (urls) => {
+  if (!urls?.length) return
+  videoUrl.value = typeof urls === 'string' ? JSON.parse(urls)[0] : urls[0]
+  videoVisible.value = true
+}
+
+// 处理事件
+const handleProcess = (row) => {
+  currentEvent.value = row
+  processForm.value = {
+    handling_status: row.handling_status === 0 ? 1 : 2,
+    handling_description: row.handling_description || ''
+  }
+  processDialogVisible.value = true
+}
+
+// 提交处理
+const handleSubmitProcess = async () => {
+  if (!processForm.value.handling_description?.trim()) {
+    ElMessage.warning('请输入处理描述')
+    return
+  }
+
+  // 验证状态转换是否合法
+  const currentStatus = currentEvent.value.handling_status
+  const newStatus = processForm.value.handling_status
+
+  if (
+    (currentStatus === 0 && newStatus !== 1) || // 待处理只能转为处理中
+    (currentStatus === 1 && newStatus !== 2) || // 处理中只能转为已处理
+    (currentStatus === 2 && newStatus !== 3) || // 已处理只能转为已关闭
+    currentStatus === 3 // 已关闭不能修改
+  ) {
+    ElMessage.error('非法的状态转换')
+    return
+  }
+
+  try {
+    const res = await updateEventStatus(currentEvent.value.id, {
+      handling_status: processForm.value.handling_status,
+      handling_description: processForm.value.handling_description.trim()
+    })
+
+    if (res.success) {
+      ElMessage.success('处理成功')
+      processDialogVisible.value = false
+      getList()
+    } else {
+      ElMessage.error(res.message || '处理失败')
+    }
+  } catch (error) {
+    console.error('处理事件错误:', error)
+    ElMessage.error('处理失败')
+  }
+}
+
+// 关闭事件
+const handleClose = (row) => {
+  ElMessageBox.confirm('确认关闭该事件吗？关闭后将不能再修改。', '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(async () => {
+    try {
+      const res = await updateEventStatus(row.id, {
+        handling_status: 3
+      })
+
+      if (res.success) {
+        ElMessage.success('关闭成功')
+        getList()
+      } else {
+        ElMessage.error(res.message || '关闭失败')
+      }
+    } catch (error) {
+      console.error('关闭事件错误:', error)
+      ElMessage.error('关闭失败')
+    }
+  }).catch(() => {})
+}
+
+// 新增事件
+const handleCreate = () => {
+  createForm.value = {
+    event_type: '',
+    event_level: 1,
+    location: {
+      longitude: 120.123456,
+      latitude: 30.123456
+    },
+    location_description: '',
+    description: '',
+    image_urls: [],
+    video_urls: [],
+    reporter_name: '',
+    reporter_phone: '',
+    remark: ''
+  }
+  createDialogVisible.value = true
+}
+
+// 提交新增
+const handleSubmitCreate = async () => {
+  if (!createFormRef.value) return
+
+  await createFormRef.value.validate(async (valid) => {
+    if (valid) {
+      try {
+        const res = await createEvent(createForm.value)
+        if (res.success) {
+          ElMessage.success('创建成功')
+          createDialogVisible.value = false
+          getList()
+        } else {
+          ElMessage.error(res.message || '创建失败')
+        }
+      } catch (error) {
+        console.error('创建事件错误:', error)
+        ElMessage.error('创建失败')
+      }
+    }
+  })
+}
+
+// 查看详情
+const handleDetail = async (row) => {
+  try {
+    const res = await getEventDetail(row.id)
+    if (res.success) {
+      eventDetail.value = res.data
+      detailDialogVisible.value = true
+    } else {
+      ElMessage.error(res.message || '获取详情失败')
+    }
+  } catch (error) {
+    console.error('获取事件详情错误:', error)
+    ElMessage.error('获取详情失败')
+  }
+}
+
+// 处理导出
+const handleExport = async () => {
+  try {
+    const res = await exportEvents({
+      event_type: searchForm.value.event_type,
+      event_level: searchForm.value.event_level,
+      handling_status: searchForm.value.handling_status,
+      start_date: searchForm.value.date_range?.[0],
+      end_date: searchForm.value.date_range?.[1]
+    })
+
+    // 创建下载链接
+    const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
+    const link = document.createElement('a')
+    link.href = URL.createObjectURL(blob)
+    link.download = `安防事件列表_${formatDateTime(new Date(), 'YYYY-MM-DD')}.xlsx`
+    link.click()
+    URL.revokeObjectURL(link.href)
+  } catch (error) {
+    console.error('导出错误:', error)
+    ElMessage.error('导出失败')
+  }
+}
+
+// 处理批量导出
+const handleBatchExport = async () => {
+  if (selectedRows.value.length === 0) {
+    ElMessage.warning('请选择要导出的事件')
+    return
+  }
+
+  try {
+    const res = await batchExportEvents(selectedRows.value.map(row => row.id))
+
+    // 创建下载链接
+    const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
+    const link = document.createElement('a')
+    link.href = URL.createObjectURL(blob)
+    link.download = `安防事件_批量导出_${formatDateTime(new Date(), 'YYYY-MM-DD')}.xlsx`
+    link.click()
+    URL.revokeObjectURL(link.href)
+  } catch (error) {
+    console.error('批量导出错误:', error)
+    ElMessage.error('批量导出失败')
+  }
+}
+
+// 处理选择变化
+const handleSelectionChange = (selection) => {
+  selectedRows.value = selection
+}
+
+onMounted(() => {
+  getList()
+  getStatistics()
+})
 </script>
 
 <template>
-    <div class="event-container">
-       <!-- 搜索区域 -->
-        <div class="search-container">
-            
+  <div class="event-container">
+    <!-- 统计卡片 -->
+    <el-row :gutter="20" class="statistics-cards">
+      <el-col :span="4">
+        <el-card shadow="hover" class="statistics-card total">
+          <template #header>
+            <div class="card-header">
+              <span>事件总数</span>
+            </div>
+          </template>
+          <div class="statistics-value">{{ statistics.total }}</div>
+        </el-card>
+      </el-col>
+      <el-col :span="5">
+        <el-card shadow="hover" class="statistics-card pending">
+          <template #header>
+            <div class="card-header">
+              <span>待处理事件</span>
+            </div>
+          </template>
+          <div class="statistics-value">{{ statistics.pending }}</div>
+        </el-card>
+      </el-col>
+      <el-col :span="5">
+        <el-card shadow="hover" class="statistics-card processing">
+          <template #header>
+            <div class="card-header">
+              <span>处理中事件</span>
+            </div>
+          </template>
+          <div class="statistics-value">{{ statistics.processing }}</div>
+        </el-card>
+      </el-col>
+      <el-col :span="5">
+        <el-card shadow="hover" class="statistics-card processed">
+          <template #header>
+            <div class="card-header">
+              <span>已处理事件</span>
+            </div>
+          </template>
+          <div class="statistics-value">{{ statistics.processed }}</div>
+        </el-card>
+      </el-col>
+      <el-col :span="5">
+        <el-card shadow="hover" class="statistics-card closed">
+          <template #header>
+            <div class="card-header">
+              <span>已关闭事件</span>
+            </div>
+          </template>
+          <div class="statistics-value">{{ statistics.closed }}</div>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <el-card>
+      <template #header>
+        <div class="card-header">
+          <span>安防事件</span>
+          <div class="header-btns">
+            <el-button type="primary" :icon="Plus" @click="handleCreate">新增事件</el-button>
+            <el-button type="success" :icon="Download" @click="handleExport">全部导出</el-button>
+            <el-button type="success" :icon="Download" @click="handleBatchExport" :disabled="selectedRows.length === 0">批量导出</el-button>
+            <el-button :icon="Refresh" @click="handleRefresh">刷新</el-button>
+          </div>
         </div>
-    </div>
+      </template>
+
+      <!-- 搜索区域 -->
+      <el-form :model="searchForm" inline class="search-form">
+        <el-form-item label="关键词">
+          <el-input
+            v-model="searchForm.keyword"
+            placeholder="请输入关键词"
+            clearable
+            @keyup.enter="handleSearch"
+          />
+        </el-form-item>
+        <el-form-item label="事件类型">
+          <el-select v-model="searchForm.event_type" placeholder="请选择事件类型" clearable>
+            <el-option label="非法捕捞" value="非法捕捞" />
+            <el-option label="环境破坏" value="环境破坏" />
+            <el-option label="设施损坏" value="设施损坏" />
+            <el-option label="其他事件" value="其他事件" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="事件级别">
+          <el-select v-model="searchForm.event_level" placeholder="请选择事件级别" clearable>
+            <el-option label="轻微" :value="1" />
+            <el-option label="中等" :value="2" />
+            <el-option label="严重" :value="3" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="处理状态">
+          <el-select v-model="searchForm.handling_status" placeholder="请选择处理状态" clearable>
+            <el-option label="待处理" :value="0" />
+            <el-option label="处理中" :value="1" />
+            <el-option label="已处理" :value="2" />
+            <el-option label="已关闭" :value="3" />
+          </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>
+        </el-form-item>
+      </el-form>
+
+      <!-- 表格 -->
+      <el-table
+        v-loading="loading"
+        :data="tableData"
+        style="width: 100%"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="55" align="center"/>
+        <el-table-column type="index" label="序号" width="60" align="center"/>
+        <el-table-column prop="event_code" label="事件编号" min-width="150" show-overflow-tooltip align="center"/>
+        <el-table-column prop="event_type" label="事件类型" width="120" align="center">
+          <template #default="{ row }">
+            <el-tag>{{ row.event_type }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="event_level" label="事件级别" width="100" align="center">
+          <template #default="{ row }">
+            <el-tag :type="row.event_level === 3 ? 'danger' : row.event_level === 2 ? 'warning' : 'info'">
+              {{ row.event_level === 3 ? '严重' : row.event_level === 2 ? '中等' : '轻微' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="location_description" label="位置描述" min-width="150" show-overflow-tooltip align="center"/>
+        <el-table-column prop="description" label="事件描述" min-width="200" show-overflow-tooltip align="center"/>
+        <el-table-column label="图片" width="100" align="center">
+          <template #default="{ row }">
+            <el-button
+              v-if="row.image_urls?.length"
+              type="primary"
+              link
+              @click="handlePreviewImage(row.image_urls)"
+            >
+              查看({{ row.image_urls.length }})
+            </el-button>
+            <span v-else>-</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="视频" width="100" align="center">
+          <template #default="{ row }">
+            <el-button
+              v-if="row.video_urls?.length"
+              type="primary"
+              link
+              @click="handlePreviewVideo(row.video_urls)"
+            >
+              查看({{ row.video_urls.length }})
+            </el-button>
+            <span v-else>-</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="reporter_name" label="上报人" width="120" align="center"/>
+        <el-table-column prop="handler_name" label="处理人" width="120" align="center"/>
+        <el-table-column prop="handling_status" label="处理状态" width="100" align="center">
+          <template #default="{ row }">
+            <el-tag :type="row.handling_status === 0 ? 'info' :
+                          row.handling_status === 1 ? 'warning' :
+                          row.handling_status === 2 ? 'success' : 'danger'">
+              {{ row.handling_status === 0 ? '待处理' :
+                 row.handling_status === 1 ? '处理中' :
+                 row.handling_status === 2 ? '已处理' : '已关闭' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <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="200" fixed="right" align="center">
+          <template #default="{ row }">
+            <el-button
+              type="primary"
+              link
+              @click="handleDetail(row)"
+            >查看</el-button>
+            <el-button
+              v-if="row.handling_status !== 3"
+              type="primary"
+              link
+              @click="handleProcess(row)"
+            >{{ row.handling_status === 0 ? '处理' : '修改' }}</el-button>
+            <el-button
+              v-if="row.handling_status !== 3"
+              type="danger"
+              link
+              @click="handleClose(row)"
+            >关闭</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 分页器 -->
+      <div class="pagination-container">
+        <el-pagination
+          v-if="total > pageSize"
+          v-model:current-page="currentPage"
+          v-model:page-size="pageSize"
+          :total="Number(total)"
+          :page-sizes="[10, 20, 50, 100]"
+          background
+          size="small"
+          layout="total, sizes, prev, pager, next"
+          @update:current-page="val => { currentPage = Number(val); getList() }"
+          @update:page-size="val => { pageSize = Number(val); currentPage = 1; getList() }"
+        />
+        <el-pagination
+          v-else
+          :total="total"
+          :page-size="pageSize"
+          background
+          size="small"
+          layout="total"
+        />
+      </div>
+    </el-card>
+
+    <!-- 图片预览对话框 -->
+    <el-dialog
+      v-model="previewVisible"
+      title="图片预览"
+      width="800px"
+    >
+      <div class="preview-container">
+        <el-carousel
+          v-if="previewImages.length > 0"
+          :initial-index="currentPreviewIndex"
+          height="400px"
+          indicator-position="outside"
+        >
+          <el-carousel-item v-for="(url, index) in previewImages" :key="index">
+            <el-image
+              :src="url"
+              fit="contain"
+              class="preview-image"
+            />
+          </el-carousel-item>
+        </el-carousel>
+      </div>
+    </el-dialog>
+
+    <!-- 视频预览对话框 -->
+    <el-dialog
+      v-model="videoVisible"
+      title="视频预览"
+      width="800px"
+    >
+      <div class="video-container">
+        <video
+          v-if="videoUrl"
+          :src="videoUrl"
+          controls
+          class="preview-video"
+        />
+      </div>
+    </el-dialog>
+
+    <!-- 处理对话框 -->
+    <el-dialog
+      v-model="processDialogVisible"
+      :title="currentEvent?.handling_status === 0 ? '处理事件' : '修改处理'"
+      width="600px"
+    >
+      <div class="event-detail">
+        <div class="detail-row">
+          <div class="detail-item">
+            <strong>事件编号：</strong>
+            <span>{{ currentEvent?.event_code }}</span>
+          </div>
+          <div class="detail-item">
+            <strong>事件类型：</strong>
+            <span>{{ currentEvent?.event_type }}</span>
+          </div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-item full-width">
+            <strong>事件描述：</strong>
+            <span>{{ currentEvent?.description }}</span>
+          </div>
+        </div>
+      </div>
+
+      <el-form :model="processForm" label-width="100px">
+        <el-form-item label="处理状态">
+          <el-radio-group v-model="processForm.handling_status">
+            <el-radio :value="1">处理中</el-radio>
+            <el-radio :value="2">已处理</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="处理描述">
+          <el-input
+            v-model="processForm.handling_description"
+            type="textarea"
+            :rows="4"
+            placeholder="请输入处理描述"
+          />
+        </el-form-item>
+      </el-form>
+
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="processDialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="handleSubmitProcess">确定</el-button>
+        </span>
+      </template>
+    </el-dialog>
+
+    <!-- 新增对话框 -->
+    <el-dialog
+      v-model="createDialogVisible"
+      title="新增事件"
+      width="600px"
+    >
+      <el-form
+        ref="createFormRef"
+        :model="createForm"
+        :rules="createFormRules"
+        label-width="100px"
+      >
+        <el-form-item label="事件类型" prop="event_type">
+          <el-select v-model="createForm.event_type" placeholder="请选择事件类型">
+            <el-option label="非法捕捞" value="非法捕捞" />
+            <el-option label="环境破坏" value="环境破坏" />
+            <el-option label="设施损坏" value="设施损坏" />
+            <el-option label="其他事件" value="其他事件" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="事件级别" prop="event_level">
+          <el-select v-model="createForm.event_level" placeholder="请选择事件级别">
+            <el-option label="轻微" :value="1" />
+            <el-option label="中等" :value="2" />
+            <el-option label="严重" :value="3" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="经度" prop="location.longitude">
+          <el-input v-model.number="createForm.location.longitude" placeholder="请输入经度" />
+        </el-form-item>
+        <el-form-item label="纬度" prop="location.latitude">
+          <el-input v-model.number="createForm.location.latitude" placeholder="请输入纬度" />
+        </el-form-item>
+        <el-form-item label="位置描述" prop="location_description">
+          <el-input
+            v-model="createForm.location_description"
+            type="textarea"
+            :rows="2"
+            placeholder="请输入位置描述"
+          />
+        </el-form-item>
+        <el-form-item label="事件描述" prop="description">
+          <el-input
+            v-model="createForm.description"
+            type="textarea"
+            :rows="3"
+            placeholder="请输入事件描述"
+          />
+        </el-form-item>
+        <el-form-item label="上报人">
+          <el-input v-model="createForm.reporter_name" placeholder="请输入上报人姓名" />
+        </el-form-item>
+        <el-form-item label="联系电话">
+          <el-input v-model="createForm.reporter_phone" placeholder="请输入联系电话" />
+        </el-form-item>
+        <el-form-item label="备注">
+          <el-input
+            v-model="createForm.remark"
+            type="textarea"
+            :rows="2"
+            placeholder="请输入备注信息"
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="createDialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="handleSubmitCreate">确定</el-button>
+        </span>
+      </template>
+    </el-dialog>
+
+    <!-- 详情对话框 -->
+    <el-dialog
+      v-model="detailDialogVisible"
+      title="事件详情"
+      width="800px"
+    >
+      <div class="event-detail-info" v-if="eventDetail">
+        <div class="detail-section">
+          <div class="detail-item">
+            <span class="label">事件编号：</span>
+            <span class="value">{{ eventDetail.event_code }}</span>
+          </div>
+          <div class="detail-item">
+            <span class="label">事件类型：</span>
+            <span class="value">{{ eventDetail.event_type }}</span>
+          </div>
+          <div class="detail-item">
+            <span class="label">事件级别：</span>
+            <span class="value">
+              <el-tag :type="eventDetail.event_level === 3 ? 'danger' : eventDetail.event_level === 2 ? 'warning' : 'info'">
+                {{ eventDetail.event_level === 3 ? '严重' : eventDetail.event_level === 2 ? '中等' : '轻微' }}
+              </el-tag>
+            </span>
+          </div>
+          <div class="detail-item">
+            <span class="label">处理状态：</span>
+            <span class="value">
+              <el-tag :type="eventDetail.handling_status === 0 ? 'info' :
+                            eventDetail.handling_status === 1 ? 'warning' :
+                            eventDetail.handling_status === 2 ? 'success' : 'danger'">
+                {{ eventDetail.handling_status === 0 ? '待处理' :
+                   eventDetail.handling_status === 1 ? '处理中' :
+                   eventDetail.handling_status === 2 ? '已处理' : '已关闭' }}
+              </el-tag>
+            </span>
+          </div>
+        </div>
+        <div class="detail-section">
+          <div class="detail-item full">
+            <span class="label">位置描述：</span>
+            <span class="value">{{ eventDetail.location_description }}</span>
+          </div>
+          <div class="detail-item full">
+            <span class="label">事件描述：</span>
+            <span class="value">{{ eventDetail.description }}</span>
+          </div>
+        </div>
+        <div class="detail-section">
+          <div class="detail-item">
+            <span class="label">上报人：</span>
+            <span class="value">{{ eventDetail.reporter_name || '-' }}</span>
+          </div>
+          <div class="detail-item">
+            <span class="label">联系电话：</span>
+            <span class="value">{{ eventDetail.reporter_phone || '-' }}</span>
+          </div>
+          <div class="detail-item">
+            <span class="label">创建时间：</span>
+            <span class="value">{{ formatDateTime(eventDetail.created_at) }}</span>
+          </div>
+          <div class="detail-item">
+            <span class="label">更新时间：</span>
+            <span class="value">{{ formatDateTime(eventDetail.updated_at) }}</span>
+          </div>
+        </div>
+        <div class="detail-section" v-if="eventDetail.handling_description">
+          <div class="detail-item full">
+            <span class="label">处理描述：</span>
+            <span class="value">{{ eventDetail.handling_description }}</span>
+          </div>
+        </div>
+        <div class="detail-section" v-if="eventDetail.remark">
+          <div class="detail-item full">
+            <span class="label">备注：</span>
+            <span class="value">{{ eventDetail.remark }}</span>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
 </template>
 
-<style>
+<style lang="scss" scoped>
+.event-container {
+  .statistics-cards {
+    margin-bottom: 20px;
 
+    .statistics-card {
+      height: 120px;
+      transition: all 0.3s;
+
+      &:hover {
+        transform: translateY(-5px);
+      }
+
+      :deep(.el-card__header) {
+        padding: 10px 15px;
+        border-bottom: none;
+      }
+
+      .card-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        span {
+          font-size: 14px;
+          color: #606266;
+        }
+      }
+
+      .statistics-value {
+        font-size: 28px;
+        font-weight: bold;
+        text-align: center;
+        padding: 10px 0;
+      }
+
+      &.total {
+        .statistics-value {
+          color: #409EFF;
+        }
+      }
+
+      &.pending {
+        .statistics-value {
+          color: #909399;
+        }
+      }
+
+      &.processing {
+        .statistics-value {
+          color: #E6A23C;
+        }
+      }
+
+      &.processed {
+        .statistics-value {
+          color: #67C23A;
+        }
+      }
+
+      &.closed {
+        .statistics-value {
+          color: #F56C6C;
+        }
+      }
+    }
+  }
+
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    span {
+      font-size: 16px;
+      font-weight: 500;
+    }
+
+    .header-btns {
+      display: flex;
+      gap: 12px;
+    }
+  }
+
+  .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;
+    }
+
+    .search-buttons {
+      display: flex;
+      gap: 12px;
+    }
+  }
+
+  .pagination-container {
+    margin-top: 20px;
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  .preview-container {
+    .preview-image {
+      width: 100%;
+      height: 400px;
+    }
+  }
+
+  .video-container {
+    .preview-video {
+      width: 100%;
+      max-height: 450px;
+    }
+  }
+
+  .event-detail {
+    margin-bottom: 20px;
+    padding: 16px;
+    background-color: #f8f9fa;
+    border-radius: 4px;
+
+    .detail-row {
+      display: flex;
+      margin-bottom: 16px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      .detail-item {
+        flex: 1;
+        display: flex;
+        align-items: flex-start;
+
+        &.full-width {
+          flex: 0 0 100%;
+        }
+
+        strong {
+          margin-right: 8px;
+          color: #606266;
+          white-space: nowrap;
+        }
+
+        span {
+          flex: 1;
+          line-height: 1.5;
+        }
+      }
+    }
+  }
+
+  .event-detail-info {
+    .detail-section {
+      margin-bottom: 24px;
+      padding: 16px;
+      background-color: #f8f9fa;
+      border-radius: 4px;
+      display: flex;
+      flex-wrap: wrap;
+      gap: 16px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      .detail-item {
+        flex: 0 0 calc(50% - 8px);
+        display: flex;
+        align-items: flex-start;
+
+        &.full {
+          flex: 0 0 100%;
+        }
+
+        .label {
+          min-width: 80px;
+          color: #606266;
+          margin-right: 8px;
+        }
+
+        .value {
+          flex: 1;
+          line-height: 1.5;
+          word-break: break-all;
+        }
+      }
+    }
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/views/patrol/records/index.vue b/src/views/patrol/records/index.vue
index 497a567..e4d4833 100644
--- a/src/views/patrol/records/index.vue
+++ b/src/views/patrol/records/index.vue
@@ -240,6 +240,7 @@ const initTrendChart = () => {
             type: 'dashed'
           }
         },
+        minInterval: 1,
         axisLabel: {
           formatter: '{value} 次',
           margin: 10