diff --git a/.env.development b/.env.development
index d8640f1..85a7063 100644
--- a/.env.development
+++ b/.env.development
@@ -11,4 +11,7 @@ VITE_BASE_URL=/
 VITE_MOCK_API=true
 
 # 是否开启调试工具
-VITE_DEV_TOOLS=true
\ No newline at end of file
+VITE_DEV_TOOLS=true
+
+# 高德地图API密钥
+VITE_AMAP_KEY=your_amap_key_here
\ No newline at end of file
diff --git a/src/api/patrol/plan.js b/src/api/patrol/plan.js
new file mode 100644
index 0000000..254f0cf
--- /dev/null
+++ b/src/api/patrol/plan.js
@@ -0,0 +1,116 @@
+import request from '@/utils/request'
+
+/**
+ * 获取巡护计划列表
+ * @param {Object} params - 查询参数
+ * @param {number} [params.page=1] - 页码
+ * @param {number} [params.pageSize=10] - 每页条数
+ * @param {string} [params.keyword] - 搜索关键词
+ * @param {string} [params.planType] - 计划类型：daily-日常巡护，special-专项巡护
+ * @param {number} [params.status] - 状态：0-禁用，1-启用
+ * @param {string} [params.startDate] - 开始日期
+ * @param {string} [params.endDate] - 结束日期
+ * @returns {Promise} 返回计划列表数据
+ */
+export function getPlanList(params = {}) {
+  return request.get('/api/admin/patrol/plans', {
+    params: {
+      page: params.page || 1,
+      page_size: params.pageSize || 10,
+      keyword: params.keyword || undefined,
+      plan_type: params.planType || undefined,
+      status: params.status === undefined ? undefined : Number(params.status),
+      start_date: params.startDate || undefined,
+      end_date: params.endDate || undefined
+    }
+  })
+}
+
+/**
+ * 创建巡护计划
+ * @param {Object} data - 计划数据
+ * @param {string} data.plan_name - 计划名称，最大100字符
+ * @param {string} data.plan_type - 计划类型：daily-日常巡护，special-专项巡护
+ * @param {string} data.start_date - 开始日期，ISO日期格式
+ * @param {string} data.end_date - 结束日期，必须大于start_date
+ * @param {Array<Object>} data.area_scope - 巡护区域范围点位列表，至少3个点位
+ * @param {string} [data.task_frequency] - 任务频次：daily、weekly、monthly
+ * @param {string} [data.description] - 计划描述，最大1000字符
+ * @param {number} [data.status] - 状态：0-禁用，1-启用，默认1
+ * @returns {Promise} 返回创建结果
+ */
+export function createPlan(data) {
+  return request.post('/api/admin/patrol/plans', data)
+}
+
+/**
+ * 获取巡护计划详情
+ * @param {string|number} id - 计划ID
+ * @returns {Promise} 返回计划详情数据
+ */
+export function getPlanDetail(id) {
+  return request.get(`/api/admin/patrol/plans/${id}`)
+}
+
+/**
+ * 更新巡护计划
+ * @param {string|number} id - 计划ID
+ * @param {Object} data - 更新数据，参数同创建计划
+ * @returns {Promise} 返回更新结果
+ */
+export function updatePlan(id, data) {
+  return request.put(`/api/admin/patrol/plans/${id}`, data)
+}
+
+/**
+ * 更新巡护计划状态
+ * @param {string|number} id - 计划ID
+ * @param {number} status - 状态值：0-禁用，1-启用
+ * @returns {Promise} 返回状态更新结果
+ */
+export function updatePlanStatus(id, status) {
+  return request.put(`/api/admin/patrol/plans/${id}/status`, {
+    status: status === 1 ? 1 : 0
+  })
+}
+
+/**
+ * 检查计划名称是否可用
+ * @param {string} name - 计划名称
+ * @param {string|number} [excludeId] - 排除的计划ID（用于编辑时检查）
+ * @returns {Promise} 返回检查结果
+ */
+export function checkPlanName(name, excludeId) {
+  return request.get('/api/admin/patrol/plans/check-name', {
+    params: {
+      plan_name: name,
+      exclude_id: excludeId
+    }
+  })
+}
+
+/**
+ * 删除巡护计划
+ * @param {string|number} id - 计划ID
+ * @returns {Promise} 返回删除结果
+ */
+export function deletePlan(id) {
+  return request.delete(`/api/admin/patrol/plans/${id}`)
+}
+
+/**
+ * 批量删除巡护计划
+ * @param {Array<string|number>} ids - 计划ID列表
+ * @returns {Promise} 返回批量删除结果
+ */
+export function batchDeletePlans(ids) {
+  return request.post('/api/admin/patrol/plans/batch/delete', { ids })
+}
+
+/**
+ * 获取巡护计划统计数据
+ * @returns {Promise} 返回统计数据
+ */
+export function getPlanStatistics() {
+  return request.get('/api/admin/patrol/plans/statistics')
+}
diff --git a/src/api/patrol/record.js b/src/api/patrol/record.js
new file mode 100644
index 0000000..377a8ac
--- /dev/null
+++ b/src/api/patrol/record.js
@@ -0,0 +1,163 @@
+import request from '@/utils/request'
+
+/**
+ * 创建巡护记录
+ * @param {Object} data - 记录数据
+ * @param {number} data.task_id - 关联的任务ID
+ * @param {string} data.record_time - 记录时间
+ * @param {Array<Object>} data.patrol_points - 巡护点位列表
+ * @param {string} data.description - 巡护描述
+ * @param {Array<Object>} [data.images] - 图片列表
+ * @param {Array<Object>} [data.files] - 附件列表
+ * @param {Object} [data.weather] - 天气信息
+ * @returns {Promise} 返回创建结果
+ */
+export function createRecord(data) {
+  return request.post('/api/admin/patrol/records', data)
+}
+
+/**
+ * 获取巡护记录列表
+ * @param {Object} params - 查询参数
+ * @param {number} [params.page=1] - 页码
+ * @param {number} [params.pageSize=10] - 每页条数
+ * @param {string} [params.keyword] - 搜索关键词
+ * @param {string} [params.startDate] - 开始日期
+ * @param {string} [params.endDate] - 结束日期
+ * @param {number} [params.taskId] - 任务ID
+ * @param {number} [params.patrolerId] - 巡护员ID
+ * @returns {Promise} 返回记录列表数据
+ */
+export function getRecordList(params = {}) {
+  return request.get('/api/admin/patrol/records', {
+    params: {
+      page: params.page || 1,
+      page_size: params.pageSize || 10,
+      keyword: params.keyword || undefined,
+      start_date: params.startDate || undefined,
+      end_date: params.endDate || undefined,
+      task_id: params.taskId || undefined,
+      patroler_id: params.patrolerId || undefined
+    }
+  })
+}
+
+/**
+ * 获取巡护记录详情
+ * @param {string|number} id - 记录ID
+ * @returns {Promise} 返回记录详情数据
+ */
+export function getRecordDetail(id) {
+  return request.get(`/api/admin/patrol/records/${id}`)
+}
+
+/**
+ * 导出巡护记录
+ * @param {Object} params - 导出参数
+ * @param {string} [params.startDate] - 开始日期
+ * @param {string} [params.endDate] - 结束日期
+ * @param {number} [params.taskId] - 任务ID
+ * @param {number} [params.patrolerId] - 巡护员ID
+ * @param {string} [params.format='excel'] - 导出格式
+ * @returns {Promise} 返回二进制文件流
+ */
+export function exportRecords(params = {}) {
+  return request.get('/api/admin/patrol/records/export/list', {
+    params: {
+      start_date: params.startDate || undefined,
+      end_date: params.endDate || undefined,
+      task_id: params.taskId || undefined,
+      patroler_id: params.patrolerId || undefined,
+      format: params.format || 'excel'
+    },
+    responseType: 'blob',
+    headers: {
+      'Accept': 'application/vnd.ms-excel'
+    }
+  })
+}
+
+/**
+ * 获取巡护统计信息
+ * @returns {Promise} 返回统计数据
+ */
+export function getRecordStatistics() {
+  return request.get('/api/admin/patrol/records/statistics/overview')
+}
+
+/**
+ * 获取任务相关的巡护记录
+ * @param {string|number} taskId - 任务ID
+ * @param {Object} params - 查询参数
+ * @param {number} [params.page=1] - 页码
+ * @param {number} [params.pageSize=10] - 每页条数
+ * @returns {Promise} 返回任务相关的记录列表
+ */
+export function getTaskRecords(taskId, params = {}) {
+  return request.get(`/api/admin/patrol/records/task/${taskId}`, {
+    params: {
+      page: params.page || 1,
+      page_size: params.pageSize || 10
+    }
+  })
+}
+
+/**
+ * 更新巡护记录
+ * @param {string|number} id - 记录ID
+ * @param {Object} data - 更新数据
+ * @returns {Promise} 返回更新结果
+ */
+export function updateRecord(id, data) {
+  return request.put(`/api/admin/patrol/records/${id}`, data)
+}
+
+/**
+ * 删除巡护记录
+ * @param {string|number} id - 记录ID
+ * @returns {Promise} 返回删除结果
+ */
+export function deleteRecord(id) {
+  return request.delete(`/api/admin/patrol/records/${id}`)
+}
+
+/**
+ * 批量删除巡护记录
+ * @param {Array<string|number>} ids - 记录ID列表
+ * @returns {Promise} 返回批量删除结果
+ */
+export function batchDeleteRecords(ids) {
+  return request.post('/api/admin/patrol/records/batch/delete', { ids })
+}
+
+/**
+ * 上传巡护记录图片
+ * @param {File} file - 图片文件
+ * @returns {Promise} 返回上传结果
+ */
+export function uploadRecordImage(file) {
+  const formData = new FormData()
+  formData.append('image', file)
+
+  return request.post('/api/admin/patrol/records/upload/image', formData, {
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    }
+  })
+}
+
+/**
+ * 上传巡护记录附件
+ * @param {File} file - 附件文件
+ * @returns {Promise} 返回上传结果
+ */
+export function uploadRecordFile(file) {
+  const formData = new FormData()
+  formData.append('file', file)
+
+  return request.post('/api/admin/patrol/records/upload/file', formData, {
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    }
+  })
+}
\ No newline at end of file
diff --git a/src/api/patrol/task.js b/src/api/patrol/task.js
new file mode 100644
index 0000000..2d2e4af
--- /dev/null
+++ b/src/api/patrol/task.js
@@ -0,0 +1,93 @@
+import request from '@/utils/request'
+
+/**
+ * 创建巡护任务
+ * @param {Object} data - 任务数据
+ * @param {string} data.title - 任务标题
+ * @param {string} data.description - 任务描述
+ * @param {string} data.start_time - 开始时间
+ * @param {string} data.end_time - 结束时间
+ * @param {number} data.executor_id - 执行人ID
+ * @param {Array} data.patrol_points - 巡护点位列表
+ * @param {string} data.patrol_area - 巡护区域
+ * @param {number} data.priority - 优先级：0-普通，1-重要，2-紧急
+ * @returns {Promise} 返回创建结果
+ */
+export function createTask(data) {
+  return request.post('/api/admin/patrol/tasks', data)
+}
+
+/**
+ * 获取巡护任务列表
+ * @param {Object} params - 查询参数
+ * @param {number} [params.page=1] - 页码
+ * @param {number} [params.pageSize=10] - 每页条数
+ * @param {string} [params.keyword] - 搜索关键词
+ * @param {string} [params.status] - 任务状态
+ * @param {string} [params.startDate] - 开始日期
+ * @param {string} [params.endDate] - 结束日期
+ * @param {number} [params.executorId] - 执行人ID
+ * @returns {Promise} 返回任务列表数据
+ */
+export function getTaskList(params = {}) {
+  return request.get('/api/admin/patrol/tasks', {
+    params: {
+      page: params.page || 1,
+      pageSize: params.pageSize || 10,
+      keyword: params.keyword || undefined,
+      status: params.status || undefined,
+      start_date: params.startDate || undefined,
+      end_date: params.endDate || undefined,
+      executor_id: params.executorId || undefined
+    }
+  })
+}
+
+/**
+ * 获取巡护任务详情
+ * @param {string|number} id - 任务ID
+ * @returns {Promise} 返回任务详情数据
+ */
+export function getTaskDetail(id) {
+  return request.get(`/api/admin/patrol/tasks/${id}`)
+}
+
+/**
+ * 更新巡护任务
+ * @param {string|number} id - 任务ID
+ * @param {Object} data - 更新数据
+ * @returns {Promise} 返回更新结果
+ */
+export function updateTask(id, data) {
+  return request.put(`/api/admin/patrol/plans/${id}`, data)
+}
+
+/**
+ * 获取执行人的任务列表
+ * @param {string|number} executorId - 执行人ID
+ * @param {Object} params - 查询参数
+ * @param {number} [params.page=1] - 页码
+ * @param {number} [params.pageSize=10] - 每页条数
+ * @param {string} [params.status] - 任务状态
+ * @returns {Promise} 返回执行人的任务列表
+ */
+export function getExecutorTasks(executorId, params = {}) {
+  return request.get(`/api/admin/patrol/tasks/executor/${executorId}`, {
+    params: {
+      page: params.page || 1,
+      pageSize: params.pageSize || 10,
+      status: params.status || undefined
+    }
+  })
+}
+
+/**
+ * 取消巡护任务
+ * @param {string|number} id - 任务ID
+ * @param {Object} data - 取消原因等数据
+ * @param {string} data.reason - 取消原因
+ * @returns {Promise} 返回取消结果
+ */
+export function cancelTask(id, data = {}) {
+  return request.post(`/api/admin/patrol/tasks/${id}/cancel`, data)
+}
\ No newline at end of file
diff --git a/src/layout/AdminLayout.vue b/src/layout/AdminLayout.vue
index 4534706..5b8b3a9 100644
--- a/src/layout/AdminLayout.vue
+++ b/src/layout/AdminLayout.vue
@@ -91,6 +91,7 @@ const handleLogout = () => {
         :default-active="activeMenu"
         class="el-menu-vertical"
         @select="handleSelect"
+        unique-opened
       >
         <el-menu-item index="/dashboard">
           <el-icon><component :is="icons.DataBoard" /></el-icon>
@@ -130,6 +131,7 @@ const handleLogout = () => {
             <el-icon><component :is="icons.Location" /></el-icon>
             <span>巡护管理</span>
           </template>
+          <el-menu-item index="/patrol/plans">巡护计划</el-menu-item>
           <el-menu-item index="/patrol/tasks">巡护任务</el-menu-item>
           <el-menu-item index="/patrol/records">巡护记录</el-menu-item>
           <el-menu-item index="/patrol/events">安防事件</el-menu-item>
diff --git a/src/router/index.js b/src/router/index.js
index d508240..ca9f0fe 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -69,6 +69,11 @@ const router = createRouter({
           name: 'PatrolEvents',
           component: () => import('../views/patrol/events/index.vue')
         },
+        {
+          path: 'patrol/plans',
+          name: 'PatrolPlans',
+          component: () => import('../views/patrol/plans/index.vue')
+        },
         {
           path: 'patrol/records',
           name: 'PatrolRecords',
@@ -112,7 +117,8 @@ const router = createRouter({
         {
           path: 'system/data',
           name: 'DataManagement',
-          component: () => import('../views/system/data/index.vue')
+          component: () => import('@/views/system/data/index.vue'),
+          meta: { title: '数据管理', icon: 'data' }
         },
         {
           path: 'system/carousel',
diff --git a/src/utils/map.js b/src/utils/map.js
new file mode 100644
index 0000000..277dc0c
--- /dev/null
+++ b/src/utils/map.js
@@ -0,0 +1,54 @@
+/**
+ * 将经纬度转换为地址
+ * @param {number} longitude - 经度
+ * @param {number} latitude - 纬度
+ * @returns {Promise<string>} 返回地址字符串
+ */
+export async function getAddressFromLocation(longitude, latitude) {
+  try {
+    // 使用高德地图API进行地理编码
+    const response = await fetch(
+      `https://restapi.amap.com/v3/geocode/regeo?key=${import.meta.env.VITE_AMAP_KEY}&location=${longitude},${latitude}`
+    );
+    const data = await response.json();
+
+    if (data.status === '1' && data.regeocode) {
+      return data.regeocode.formatted_address;
+    }
+    return null;
+  } catch (error) {
+    console.error('地理编码错误:', error);
+    return null;
+  }
+}
+
+/**
+ * 处理巡护路线点位信息，添加地址信息
+ * @param {Array} points - 路线点位数组
+ * @returns {Promise<Array>} 返回带有地址信息的点位数组
+ */
+export async function getRoutePointsWithAddress(points) {
+  if (!points || !Array.isArray(points)) return [];
+
+  try {
+    const pointsWithAddress = await Promise.all(
+      points.map(async (point, index) => {
+        const address = await getAddressFromLocation(point.longitude, point.latitude);
+        return {
+          ...point,
+          index: index + 1,
+          address: address || '未能获取地址'
+        };
+      })
+    );
+
+    return pointsWithAddress;
+  } catch (error) {
+    console.error('处理路线点位错误:', error);
+    return points.map((point, index) => ({
+      ...point,
+      index: index + 1,
+      address: '未能获取地址'
+    }));
+  }
+}
\ No newline at end of file
diff --git a/src/views/monitor/environment/index.vue b/src/views/monitor/environment/index.vue
index d2ffeb6..4eb4fe1 100644
--- a/src/views/monitor/environment/index.vue
+++ b/src/views/monitor/environment/index.vue
@@ -468,7 +468,7 @@ onMounted(() => {
 </template>
 
 <style lang="scss" scoped>
-@use "./styles/variables" as v;
+@use "../../../styles/variables.scss" as *;
 
 .env-container {
   .env-card {
diff --git a/src/views/monitor/species/index.vue b/src/views/monitor/species/index.vue
index 3fdbe1c..6d53446 100644
--- a/src/views/monitor/species/index.vue
+++ b/src/views/monitor/species/index.vue
@@ -297,7 +297,7 @@ const handleExportConfirm = () => {
 </template>
 
 <style lang="scss" scoped>
-@use "./styles/variables" as v;
+@use "../../../styles/variables.scss" as *;
 
 .species-container {
   padding: 20px;
diff --git a/src/views/patrol/plans/index.vue b/src/views/patrol/plans/index.vue
new file mode 100644
index 0000000..c8872f2
--- /dev/null
+++ b/src/views/patrol/plans/index.vue
@@ -0,0 +1,921 @@
+<template>
+  <div class="patrol-plans">
+    <el-card class="main-card">
+      <template #header>
+        <div class="card-header">
+          <span class="header-title">巡护计划管理</span>
+          <div class="header-btns">
+            <el-button type="primary" :icon="Plus" @click="newPlanDialogVisible = true">新建计划</el-button>
+            <el-button :icon="Refresh" @click="handleRefresh">刷新</el-button>
+          </div>
+        </div>
+      </template>
+
+      <!-- 搜索工具栏 -->
+      <div class="toolbar">
+        <div class="search-area">
+          <el-input
+            v-model="searchText"
+            placeholder="搜索计划名称"
+            clearable
+            class="search-input"
+            @keyup.enter="handleSearch"
+          >
+            <template #prefix>
+              <el-icon><Search /></el-icon>
+            </template>
+          </el-input>
+
+          <el-select
+            v-model="typeFilter"
+            placeholder="计划类型"
+            clearable
+            class="filter-select"
+          >
+            <el-option value="daily" label="日常巡护" />
+            <el-option value="special" label="专项巡护" />
+          </el-select>
+
+          <el-select
+            v-model="statusFilter"
+            placeholder="计划状态"
+            clearable
+            class="filter-select"
+          >
+            <el-option :value="0" label="禁用" />
+            <el-option :value="1" label="启用" />
+          </el-select>
+
+          <el-date-picker
+            v-model="dateRange"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            value-format="YYYY-MM-DD"
+            class="date-picker"
+          />
+
+          <div class="search-buttons">
+            <el-button type="primary" @click="handleSearch">
+              <el-icon><Search /></el-icon>
+              搜索
+            </el-button>
+            <el-button @click="resetFilters">重置</el-button>
+          </div>
+        </div>
+
+        <div class="action-area">
+          <el-button
+            type="danger"
+            :disabled="selectedPlans.length === 0"
+            @click="handleBatchDelete"
+          >
+            <el-icon><Delete /></el-icon>
+            批量删除
+          </el-button>
+        </div>
+      </div>
+
+      <!-- 计划列表 -->
+      <div class="table-container">
+        <el-table
+          v-loading="loading"
+          :data="tableData"
+          border
+          stripe
+          :header-cell-style="{ background: '#f5f7fa' }"
+          @selection-change="selectedPlans = $event"
+        >
+          <el-table-column type="selection" width="55" />
+
+          <el-table-column prop="plan_name" label="计划名称" min-width="200" show-overflow-tooltip align="center"/>
+
+          <el-table-column prop="plan_type" label="类型" width="100" align="center">
+            <template #default="{ row }">
+              <el-tag :type="row.plan_type === 'daily' ? 'info' : 'warning'">
+                {{ row.plan_type === 'daily' ? '日常巡护' : '专项巡护' }}
+              </el-tag>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="执行时间" width="240">
+            <template #default="{ row }">
+              {{ formatDateTime(row.start_date, 'YYYY-MM-DD') }} 至
+              {{ formatDateTime(row.end_date, 'YYYY-MM-DD') }}
+            </template>
+          </el-table-column>
+
+          <el-table-column prop="task_frequency" label="任务频次" width="100" align="center">
+            <template #default="{ row }">
+              {{ {
+                'daily': '每日',
+                'weekly': '每周',
+                'monthly': '每月'
+              }[row.task_frequency] || '-' }}
+            </template>
+          </el-table-column>
+
+          <el-table-column prop="status" label="状态" width="100" align="center">
+            <template #default="{ row }">
+              <el-tag :type="row.status === 1 ? 'success' : 'info'">
+                {{ row.status === 1 ? '启用' : '禁用' }}
+              </el-tag>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="操作" width="200" fixed="right" align="center">
+            <template #default="{ row }">
+              <el-button link type="primary" @click="handleView(row)">查看</el-button>
+              <el-button
+                link
+                type="primary"
+                @click="handleStatusChange(row)"
+              >
+                {{ row.status === 1 ? '禁用' : '启用' }}
+              </el-button>
+              <el-button link type="danger" @click="handleDelete(row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <!-- 分页器 - 只在总数大于页面大小时显示 -->
+        <div v-if="total > pageSize" class="pagination-container">
+          <el-pagination
+            v-model:current-page="currentPage"
+            v-model:page-size="pageSize"
+            :total="total"
+            :page-sizes="[10, 20, 50, 100]"
+            background
+            layout="total, sizes, prev, pager, next, jumper"
+            @size-change="handleSizeChange"
+            @current-change="handlePageChange"
+          />
+        </div>
+      </div>
+    </el-card>
+
+    <!-- 新建计划弹窗 -->
+    <el-dialog
+      v-model="newPlanDialogVisible"
+      title="新建巡护计划"
+      width="600px"
+      @close="handleDialogClose"
+    >
+      <el-form
+        ref="newPlanFormRef"
+        :model="newPlanForm"
+        :rules="rules"
+        label-width="100px"
+      >
+        <el-form-item label="计划名称" prop="plan_name">
+          <el-input v-model="newPlanForm.plan_name" placeholder="请输入计划名称" />
+        </el-form-item>
+
+        <el-form-item label="计划类型" prop="plan_type">
+          <el-radio-group v-model="newPlanForm.plan_type">
+            <el-radio value="daily">日常巡护</el-radio>
+            <el-radio value="special">专项巡护</el-radio>
+          </el-radio-group>
+        </el-form-item>
+
+        <el-form-item label="执行时间" required>
+          <el-col :span="11">
+            <el-form-item prop="start_date">
+              <el-date-picker
+                v-model="newPlanForm.start_date"
+                type="date"
+                placeholder="开始日期"
+                style="width: 100%"
+                value-format="YYYY-MM-DD"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="2" class="text-center">
+            <span class="text-gray-500">至</span>
+          </el-col>
+          <el-col :span="11">
+            <el-form-item prop="end_date">
+              <el-date-picker
+                v-model="newPlanForm.end_date"
+                type="date"
+                placeholder="结束日期"
+                style="width: 100%"
+                value-format="YYYY-MM-DD"
+              />
+            </el-form-item>
+          </el-col>
+        </el-form-item>
+
+        <el-form-item label="任务频次" prop="task_frequency">
+          <el-radio-group v-model="newPlanForm.task_frequency">
+            <el-radio value="daily">每日</el-radio>
+            <el-radio value="weekly">每周</el-radio>
+            <el-radio value="monthly">每月</el-radio>
+          </el-radio-group>
+        </el-form-item>
+
+        <el-form-item label="巡护区域" prop="area_scope">
+          <div class="address-input-container">
+            <div class="address-input">
+              <el-input
+                v-model="addressInput"
+                placeholder="请输入巡护点位地址"
+                class="address-input-field"
+              >
+                <template #append>
+                  <el-button @click="handleAddAddress">添加</el-button>
+                </template>
+              </el-input>
+            </div>
+            <div v-if="addressList.length > 0" class="address-list">
+              <el-table :data="addressList" size="small" border>
+                <el-table-column label="序号" type="index" width="60" align="center" />
+                <el-table-column label="地址" prop="address" min-width="200" show-overflow-tooltip />
+                <el-table-column label="经度" prop="longitude" width="100" align="center" />
+                <el-table-column label="纬度" prop="latitude" width="100" align="center" />
+                <el-table-column label="操作" width="80" align="center">
+                  <template #default="{ $index }">
+                    <el-button
+                      type="danger"
+                      link
+                      @click="handleRemoveAddress($index)"
+                    >
+                      删除
+                    </el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </div>
+            <div class="address-tip">
+              <el-alert
+                title="请至少添加3个巡护点位，系统将自动连接各点形成巡护区域"
+                type="info"
+                :closable="false"
+              />
+            </div>
+          </div>
+        </el-form-item>
+
+        <el-form-item label="计划描述" prop="description">
+          <el-input
+            v-model="newPlanForm.description"
+            type="textarea"
+            :rows="4"
+            placeholder="请输入计划描述"
+          />
+        </el-form-item>
+
+        <el-form-item label="计划状态" prop="status">
+          <el-radio-group v-model="newPlanForm.status">
+            <el-radio :value="1">启用</el-radio>
+            <el-radio :value="0">禁用</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+
+      <template #footer>
+        <el-button @click="newPlanDialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleNewPlanSubmit">确定</el-button>
+      </template>
+    </el-dialog>
+
+    <!-- 计划详情弹窗 -->
+    <el-dialog
+      v-model="detailDialogVisible"
+      title="巡护计划详情"
+      width="600px"
+    >
+      <el-descriptions v-if="currentPlan" :column="1" border>
+        <el-descriptions-item label="计划名称">
+          {{ currentPlan.plan_name }}
+        </el-descriptions-item>
+
+        <el-descriptions-item label="计划类型">
+          <el-tag :type="currentPlan.plan_type === 'daily' ? 'info' : 'warning'">
+            {{ currentPlan.plan_type === 'daily' ? '日常巡护' : '专项巡护' }}
+          </el-tag>
+        </el-descriptions-item>
+
+        <el-descriptions-item label="执行时间">
+          {{ formatDateTime(currentPlan.start_date, 'YYYY-MM-DD') }} 至
+          {{ formatDateTime(currentPlan.end_date, 'YYYY-MM-DD') }}
+        </el-descriptions-item>
+
+        <el-descriptions-item label="任务频次">
+          {{ {
+            'daily': '每日',
+            'weekly': '每周',
+            'monthly': '每月'
+          }[currentPlan.task_frequency] || '-' }}
+        </el-descriptions-item>
+
+        <el-descriptions-item label="巡护区域">
+          <div v-if="currentPlan.area_scope?.length">
+            <div v-for="(point, index) in currentPlan.area_scope" :key="index">
+              经度: {{ point.longitude }}, 纬度: {{ point.latitude }}
+            </div>
+          </div>
+          <span v-else>-</span>
+        </el-descriptions-item>
+
+        <el-descriptions-item label="计划状态">
+          <el-tag :type="currentPlan.status === 1 ? 'success' : 'info'">
+            {{ currentPlan.status === 1 ? '启用' : '禁用' }}
+          </el-tag>
+        </el-descriptions-item>
+
+        <el-descriptions-item label="计划描述">
+          {{ currentPlan.description || '-' }}
+        </el-descriptions-item>
+
+        <el-descriptions-item label="创建时间">
+          {{ formatDateTime(currentPlan.created_at) }}
+        </el-descriptions-item>
+
+        <el-descriptions-item label="更新时间">
+          {{ formatDateTime(currentPlan.updated_at) }}
+        </el-descriptions-item>
+      </el-descriptions>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Search, Plus, Delete, Refresh } from '@element-plus/icons-vue'
+import { formatDateTime } from '@/utils/format'
+import {
+  getPlanList,
+  createPlan,
+  updatePlan,
+  getPlanDetail,
+  deletePlan,
+  updatePlanStatus,
+  batchDeletePlans,
+  checkPlanName
+} from '@/api/patrol/plan'
+
+// 表格数据
+const tableData = ref([])
+const loading = ref(false)
+const selectedPlans = ref([])
+
+// 分页相关
+const currentPage = ref(1)
+const pageSize = ref(10)
+const total = ref(0)
+
+// 搜索和筛选条件
+const searchText = ref('')
+const typeFilter = ref('')
+const statusFilter = ref(null)
+const dateRange = ref(['', ''])
+
+// 新建计划相关
+const newPlanDialogVisible = ref(false)
+const newPlanForm = reactive({
+  plan_name: '',
+  plan_type: 'daily',
+  description: '',
+  start_date: '',
+  end_date: '',
+  area_scope: [],
+  task_frequency: 'daily',
+  status: 1
+})
+
+const newPlanFormRef = ref()
+
+// 表单验证规则
+const rules = {
+  plan_name: [
+    { required: true, message: '请输入计划名称', trigger: 'blur' },
+    { max: 100, message: '计划名称最大100字符', trigger: 'blur' },
+    {
+      validator: async (rule, value, callback) => {
+        if (!value) {
+          callback()
+          return
+        }
+        try {
+          const res = await checkPlanName(value, newPlanForm.id)
+          if (res.success && !res.data.available) {
+            callback(new Error('计划名称已存在'))
+          } else {
+            callback()
+          }
+        } catch (error) {
+          console.error('检查计划名称错误:', error)
+          callback()
+        }
+      },
+      trigger: 'blur'
+    }
+  ],
+  plan_type: [{ required: true, message: '请选择计划类型', trigger: 'change' }],
+  start_date: [{ required: true, message: '请选择开始日期', trigger: 'change' }],
+  end_date: [
+    { required: true, message: '请选择结束日期', trigger: 'change' },
+    {
+      validator: (rule, value, callback) => {
+        if (value && newPlanForm.start_date && value <= newPlanForm.start_date) {
+          callback(new Error('结束日期必须大于开始日期'))
+        } else {
+          callback()
+        }
+      },
+      trigger: 'change'
+    }
+  ],
+  area_scope: [{
+    type: 'array',
+    required: true,
+    min: 3,
+    message: '请至少选择3个巡护点位',
+    trigger: 'change'
+  }],
+  task_frequency: [{ required: false }],
+  description: [{ max: 1000, message: '描述最大1000字符', trigger: 'blur' }]
+}
+
+// 获取计划列表
+const getList = async () => {
+  loading.value = true
+  try {
+    const params = {
+      keyword: searchText.value,
+      planType: typeFilter.value || undefined,
+      status: statusFilter.value === null ? undefined : Number(statusFilter.value),
+      startDate: dateRange.value[0] ? formatDateTime(dateRange.value[0], 'YYYY-MM-DD') : '',
+      endDate: dateRange.value[1] ? formatDateTime(dateRange.value[1], 'YYYY-MM-DD') : '',
+      page: Number(currentPage.value),
+      pageSize: Number(pageSize.value)
+    }
+
+    const res = await getPlanList(params)
+    if (res.success) {
+      tableData.value = res.data.list
+      total.value = Number(res.data.pagination.total)
+      currentPage.value = Number(res.data.pagination.page)
+      pageSize.value = Number(res.data.pagination.page_size)
+    } else {
+      ElMessage.error(res.message || '获取计划列表失败')
+    }
+  } catch (error) {
+    console.error('获取计划列表错误:', error)
+    ElMessage.error('获取计划列表失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+// 重置表单
+const resetForm = () => {
+  Object.assign(newPlanForm, {
+    plan_name: '',
+    plan_type: 'daily',
+    description: '',
+    start_date: '',
+    end_date: '',
+    area_scope: [],
+    task_frequency: 'daily',
+    status: 1
+  })
+  addressList.value = [] // 清空地址列表
+  if (newPlanFormRef.value) {
+    newPlanFormRef.value.resetFields()
+  }
+}
+
+// 处理新建计划提交
+const handleNewPlanSubmit = async () => {
+  if (!newPlanFormRef.value) return
+
+  try {
+    await newPlanFormRef.value.validate()
+
+    const submitData = {
+      plan_name: newPlanForm.plan_name.trim(),
+      plan_type: newPlanForm.plan_type,
+      description: newPlanForm.description?.trim(),
+      start_date: newPlanForm.start_date,
+      end_date: newPlanForm.end_date,
+      area_scope: newPlanForm.area_scope,
+      task_frequency: newPlanForm.task_frequency,
+      status: newPlanForm.status
+    }
+
+    const res = await createPlan(submitData)
+    if (res.success) {
+      ElMessage.success('创建成功')
+      newPlanDialogVisible.value = false
+      getList()
+    } else {
+      ElMessage.error(res.message || '创建失败')
+    }
+  } catch (error) {
+    console.error('创建计划错误:', error)
+    ElMessage.error('创建失败，请检查输入是否正确')
+  }
+}
+
+// 处理关闭弹窗
+const handleDialogClose = () => {
+  resetForm()
+}
+
+// 处理搜索
+const handleSearch = () => {
+  currentPage.value = 1
+  getList()
+}
+
+// 重置筛选条件
+const resetFilters = () => {
+  searchText.value = ''
+  typeFilter.value = ''
+  statusFilter.value = null
+  dateRange.value = ['', '']
+  currentPage.value = 1
+  getList()
+}
+
+// 处理分页变化
+const handlePageChange = (page) => {
+  currentPage.value = Number(page)
+  getList()
+}
+
+const handleSizeChange = (size) => {
+  pageSize.value = Number(size)
+  currentPage.value = 1
+  getList()
+}
+
+// 计划详情相关
+const detailDialogVisible = ref(false)
+const currentPlan = ref(null)
+
+// 查看计划详情
+const handleView = async (row) => {
+  try {
+    const res = await getPlanDetail(row.id)
+    if (res.success) {
+      currentPlan.value = res.data
+      detailDialogVisible.value = true
+    } else {
+      ElMessage.error(res.message || '获取计划详情失败')
+    }
+  } catch (error) {
+    console.error('获取计划详情错误:', error)
+    ElMessage.error('获取计划详情失败')
+  }
+}
+
+// 更新计划状态
+const handleStatusChange = async (row) => {
+  try {
+    const newStatus = row.status === 1 ? 0 : 1
+    const res = await updatePlanStatus(row.id, newStatus)
+    if (res.success) {
+      ElMessage.success('状态更新成功')
+      getList()
+    } else {
+      ElMessage.error(res.message || '状态更新失败')
+    }
+  } catch (error) {
+    console.error('更新计划状态错误:', error)
+    ElMessage.error('状态更新失败')
+  }
+}
+
+// 删除计划
+const handleDelete = (row) => {
+  ElMessageBox.confirm('确定要删除该计划吗？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(async () => {
+    try {
+      const res = await deletePlan(row.id)
+      if (res.success) {
+        ElMessage.success('删除成功')
+        getList()
+      } else {
+        ElMessage.error(res.message || '删除失败')
+      }
+    } catch (error) {
+      console.error('删除计划错误:', error)
+      ElMessage.error('删除失败')
+    }
+  }).catch(() => {})
+}
+
+// 批量删除计划
+const handleBatchDelete = () => {
+  if (selectedPlans.value.length === 0) {
+    ElMessage.warning('请选择要删除的计划')
+    return
+  }
+
+  ElMessageBox.confirm(`确定要删除选中的 ${selectedPlans.value.length} 个计划吗？`, '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(async () => {
+    try {
+      const ids = selectedPlans.value.map(plan => plan.id)
+      const res = await batchDeletePlans(ids)
+      if (res.success) {
+        ElMessage.success('批量删除成功')
+        selectedPlans.value = []
+        getList()
+      } else {
+        ElMessage.error(res.message || '批量删除失败')
+      }
+    } catch (error) {
+      console.error('批量删除计划错误:', error)
+      ElMessage.error('批量删除失败')
+    }
+  }).catch(() => {})
+}
+
+// 添加刷新方法
+const handleRefresh = () => {
+  getList()
+}
+
+// 在 script setup 部分添加新的响应式变量和方法
+const addressList = ref([]) // 用于存储地址列表
+const addressInput = ref('') // 用于存储当前输入的地址
+
+// 添加地址转换方法
+const convertAddressToCoords = async (address) => {
+  try {
+    const response = await fetch(
+      `https://restapi.amap.com/v3/geocode/geo?key=${import.meta.env.VITE_AMAP_KEY}&address=${encodeURIComponent(address)}`
+    )
+    const data = await response.json()
+
+    if (data.status === '1' && data.geocodes && data.geocodes.length > 0) {
+      const [longitude, latitude] = data.geocodes[0].location.split(',')
+      return {
+        address,
+        longitude: Number(longitude),
+        latitude: Number(latitude)
+      }
+    }
+    throw new Error('地址解析失败')
+  } catch (error) {
+    console.error('地址转换错误:', error)
+    ElMessage.error('地址转换失败')
+    return null
+  }
+}
+
+// 添加地址
+const handleAddAddress = async () => {
+  if (!addressInput.value.trim()) {
+    ElMessage.warning('请输入地址')
+    return
+  }
+
+  const result = await convertAddressToCoords(addressInput.value.trim())
+  if (result) {
+    addressList.value.push(result)
+    newPlanForm.area_scope = addressList.value.map(item => ({
+      longitude: item.longitude,
+      latitude: item.latitude
+    }))
+    addressInput.value = '' // 清空输入
+  }
+}
+
+// 删除地址
+const handleRemoveAddress = (index) => {
+  addressList.value.splice(index, 1)
+  newPlanForm.area_scope = addressList.value.map(item => ({
+    longitude: item.longitude,
+    latitude: item.latitude
+  }))
+}
+
+onMounted(() => {
+  getList()
+})
+</script>
+
+<style lang="scss" scoped>
+.patrol-plans {
+  padding: 16px;
+  background-color: #f0f2f5;
+  min-height: calc(100vh - 120px);
+  height: 100%;
+  box-sizing: border-box;
+
+  .main-card {
+    background-color: #fff;
+    border-radius: 8px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
+    height: 100%;
+
+    .card-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 8px 0;
+
+      .header-title {
+        font-size: 18px;
+        font-weight: 600;
+        color: #1f2f3d;
+      }
+
+      .header-btns {
+        display: flex;
+        gap: 12px;
+      }
+    }
+
+    :deep(.el-card__body) {
+      height: calc(100% - 60px);
+      padding: 16px;
+    }
+  }
+
+  .toolbar {
+    padding: 16px;
+    background-color: #f8f9fa;
+    border-radius: 8px;
+    margin-bottom: 12px;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 16px;
+
+    .search-area {
+      display: flex;
+      gap: 12px;
+      flex-wrap: wrap;
+      flex: 1;
+      align-items: flex-start;
+
+      .search-input {
+        width: 220px;
+      }
+
+      .filter-select {
+        width: 160px;
+      }
+
+      .date-picker {
+        width: 360px;
+      }
+
+      .search-buttons {
+        display: flex;
+        gap: 8px;
+      }
+    }
+
+    .action-area {
+      display: flex;
+      gap: 12px;
+      align-items: flex-start;
+    }
+  }
+
+  .table-container {
+    height: calc(100% - 140px);
+    padding: 0;
+    position: relative;
+
+    :deep(.el-table) {
+      border-radius: 8px 8px 0 0;
+      overflow: hidden;
+
+      th {
+        background-color: #f5f7fa !important;
+        color: #606266;
+        font-weight: 600;
+        height: 48px;
+      }
+
+      td {
+        padding: 12px 0;
+      }
+    }
+  }
+
+  .pagination-container {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    padding: 12px 16px;
+    background-color: #fff;
+    margin-top: 0;
+    border-top: 1px solid #f0f0f0;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    border-radius: 0 0 8px 8px;
+  }
+}
+
+// 对话框样式优化
+:deep(.el-dialog) {
+  border-radius: 8px;
+  overflow: hidden;
+
+  .el-dialog__header {
+    margin: 0;
+    padding: 20px 24px;
+    border-bottom: 1px solid #dcdfe6;
+    background-color: #f8f9fa;
+
+    .el-dialog__title {
+      font-size: 16px;
+      font-weight: 600;
+      color: #1f2f3d;
+    }
+  }
+
+  .el-dialog__body {
+    padding: 24px;
+  }
+
+  .el-dialog__footer {
+    padding: 16px 24px;
+    border-top: 1px solid #dcdfe6;
+    background-color: #f8f9fa;
+  }
+}
+
+// 表单项样式优化
+:deep(.el-form-item) {
+  margin-bottom: 22px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  .el-form-item__label {
+    font-weight: 500;
+    color: #606266;
+  }
+
+  .el-form-item__content {
+    .el-input__wrapper,
+    .el-select {
+      width: 100%;
+    }
+
+    .el-textarea__inner {
+      min-height: 100px;
+    }
+  }
+}
+
+// 标签样式优化
+:deep(.el-tag) {
+  border-radius: 4px;
+  padding: 0 8px;
+  height: 24px;
+  line-height: 24px;
+}
+
+// 按钮样式优化
+:deep(.el-button) {
+  &.is-link {
+    padding: 4px 8px;
+    height: auto;
+  }
+
+  &.is-disabled {
+    opacity: 0.6;
+  }
+}
+
+.address-input-container {
+  .address-input {
+    margin-bottom: 12px;
+
+    .address-input-field {
+      width: 100%;
+    }
+  }
+
+  .address-list {
+    margin-bottom: 12px;
+    max-height: 240px;
+    overflow-y: auto;
+  }
+
+  .address-tip {
+    margin-top: 8px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/patrol/records/index.vue b/src/views/patrol/records/index.vue
index 8dceebc..497a567 100644
--- a/src/views/patrol/records/index.vue
+++ b/src/views/patrol/records/index.vue
@@ -1,229 +1,1128 @@
 <script setup>
-import { ref, computed, reactive } from "vue";
-import { ElMessage } from "element-plus";
-import { Search } from "@element-plus/icons-vue";
+import { ref, onMounted, onUnmounted, computed } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Search, Refresh, Download, Plus, MapLocation, Odometer, Timer, Clock } from '@element-plus/icons-vue'
+import { formatDateTime } from '@/utils/format'
+import * as echarts from 'echarts'
+import {
+  getRecordList,
+  getRecordDetail,
+  exportRecords,
+  getRecordStatistics,
+  createRecord
+} from '@/api/patrol/record'
+import { getTaskList } from '@/api/patrol/task'
+import { getAddressFromLocation } from '@/utils/map'
+import { useUserStore } from '@/stores/user'
 
-const tableData = ref([
-  {
-    id: 1,
-    taskTitle: "A区日常巡查",
-    patroller: "张三",
-    route: "A区-1号点位-2号点位-3号点位",
-    findings: "发现水质异常，已通知相关部门",
-    images: ["image1.jpg", "image2.jpg"],
-    status: "正常",
-    completedTime: "2024-03-20 11:00",
+// 获取用户信息
+const userStore = useUserStore()
+
+// 搜索表单
+const searchForm = ref({
+  keyword: '',
+  startDate: '',
+  endDate: '',
+  taskId: '',
+  patrolerId: ''
+})
+
+// 表格数据
+const tableData = ref([])
+const loading = ref(false)
+const currentPage = ref(1)
+const pageSize = ref(10)
+const total = ref(0)
+
+// 统计数据
+const statistics = ref({
+  overview: {
+    total_count: 0,
+    in_progress_count: 0,
+    completed_count: 0,
+    completion_rate: 0
   },
-  {
-    id: 2,
-    taskTitle: "B区设备检查",
-    patroller: "李四",
-    route: "B区-监测站-水质监测点",
-    findings: "设备运行正常，已完成例行维护",
-    images: ["image3.jpg"],
-    status: "正常",
-    completedTime: "2024-03-20 16:00",
+  distance_stats: {
+    total_distance: 0,
+    avg_distance: 0,
+    total_duration: 0,
+    avg_duration: 0
   },
-]);
+  daily_trends: [],
+  weather_stats: []
+})
 
-const dialogVisible = ref(false);
-const currentRecord = ref(null);
+// 详情对话框
+const detailDialogVisible = ref(false)
+const currentRecord = ref(null)
 
-const handleView = (row) => {
-  currentRecord.value = row;
-  dialogVisible.value = true;
-};
+// 图表实例
+const overviewChartRef = ref(null)
+const trendChartRef = ref(null)
+const weatherChartRef = ref(null)
+let overviewChart = null
+let trendChart = null
+let weatherChart = null
 
-const searchText = ref("");
+// 对话框相关
+const dialogVisible = ref(false)
+const formRef = ref(null)
 
-const filteredTableData = computed(() => {
-  if (!searchText.value) return tableData.value;
+// 表单数据
+const form = ref({
+  task_id: '',
+  executor_id: userStore.userId,
+  start_time: '',
+  end_time: '',
+  route_points: [],
+  distance: 0,
+  duration: 0,
+  weather: '',
+  findings: '',
+  image_urls: [],
+  video_urls: [],
+  status: 0
+})
 
-  const searchLower = searchText.value.toLowerCase();
-  return tableData.value.filter(
-    (item) =>
-      item.taskTitle.toLowerCase().includes(searchLower) ||
-      item.patroller.toLowerCase().includes(searchLower) ||
-      item.findings.toLowerCase().includes(searchLower)
-  );
-});
+// 表单验证规则
+const rules = {
+  task_id: [
+    { required: true, message: '请选择关联任务', trigger: 'change' }
+  ],
+  start_time: [
+    { required: true, message: '请选择开始时间', trigger: 'change' }
+  ],
+  route_points: [
+    { required: true, message: '请添加巡护点位', trigger: 'change' },
+    { type: 'array', min: 2, message: '至少需要2个巡护点位', trigger: 'change' }
+  ],
+  findings: [
+    { required: true, message: '请输入巡护发现', trigger: 'blur' },
+    { min: 10, max: 500, message: '描述长度在10到500个字符之间', trigger: 'blur' }
+  ]
+}
 
-const exportDialogVisible = ref(false);
-const exportForm = reactive({
-  timeRange: [],
-  format: "excel",
-  types: ["basic", "findings", "images"],
-});
+// 任务选项
+const taskOptions = ref([])
 
-const handleExport = () => {
-  exportDialogVisible.value = true;
-};
+// 格式化巡护时长
+const formatDuration = (minutes) => {
+  if (!minutes) return '-'
+  const hours = Math.floor(minutes / 60)
+  const remainingMinutes = minutes % 60
+  if (hours > 0) {
+    return `${hours}小时${remainingMinutes}分钟`
+  }
+  return `${remainingMinutes}分钟`
+}
 
-const handleExportConfirm = () => {
-  console.log("导出数据:", exportForm);
-  ElMessage.success("导出成功");
-  exportDialogVisible.value = false;
-};
+// 格式化距离
+const formatDistance = (meters) => {
+  if (!meters) return '-'
+  const distance = parseFloat(meters)
+  if (distance >= 1000) {
+    return `${(distance / 1000).toFixed(2)}公里`
+  }
+  return `${distance.toFixed(2)}米`
+}
 
-const currentPage = ref(1);
-const pageSize = ref(10);
+// 初始化概览图表
+const initOverviewChart = () => {
+  if (!overviewChartRef.value) return
+  overviewChart = echarts.init(overviewChartRef.value)
 
-const paginatedData = computed(() => {
-  const start = (currentPage.value - 1) * pageSize.value;
-  const end = start + pageSize.value;
-  return filteredTableData.value.slice(start, end);
-});
+  const option = {
+    tooltip: {
+      trigger: 'item',
+      formatter: '{b}: {c} ({d}%)'
+    },
+    legend: {
+      bottom: '5%',
+      left: 'center',
+      itemWidth: 10,
+      itemHeight: 10,
+      textStyle: {
+        color: '#606266',
+        fontSize: 12
+      }
+    },
+    series: [
+      {
+        name: '巡护记录',
+        type: 'pie',
+        radius: ['50%', '70%'],
+        center: ['50%', '45%'],
+        avoidLabelOverlap: false,
+        itemStyle: {
+          borderRadius: 10,
+          borderColor: '#fff',
+          borderWidth: 2
+        },
+        label: {
+          show: false
+        },
+        emphasis: {
+          label: {
+            show: true,
+            fontSize: 14,
+            fontWeight: 'bold'
+          },
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: 'rgba(0, 0, 0, 0.5)'
+          }
+        },
+        labelLine: {
+          show: false
+        },
+        data: [
+          {
+            value: statistics.value.overview.completed_count,
+            name: '已完成',
+            itemStyle: { color: '#67C23A' }
+          },
+          {
+            value: statistics.value.overview.in_progress_count,
+            name: '进行中',
+            itemStyle: { color: '#E6A23C' }
+          }
+        ]
+      }
+    ]
+  }
 
+  overviewChart.setOption(option)
+}
+
+// 初始化趋势图表
+const initTrendChart = () => {
+  if (!trendChartRef.value) return;
+
+  const chart = echarts.init(trendChartRef.value);
+  const option = {
+    grid: {
+      top: '15%',
+      right: '3%',
+      bottom: '15%',
+      left: '3%',
+      containLabel: true
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'cross',
+        label: {
+          backgroundColor: '#6a7985'
+        }
+      }
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: statistics.value.daily_trends.map(item => item.date),
+      axisLabel: {
+        fontSize: 12,
+        color: '#666',
+        rotate: 45,
+        margin: 14
+      }
+    },
+    yAxis: [
+      {
+        type: 'value',
+        name: '巡护次数',
+        nameTextStyle: {
+          padding: [0, 0, 0, 0]
+        },
+        splitLine: {
+          lineStyle: {
+            type: 'dashed'
+          }
+        },
+        axisLabel: {
+          formatter: '{value} 次',
+          margin: 10
+        }
+      }
+    ],
+    series: [
+      {
+        name: '巡护次数',
+        type: 'line',
+        smooth: true,
+        areaStyle: {
+          opacity: 0.3,
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: 'rgba(128, 255, 165, 0.8)'
+            },
+            {
+              offset: 1,
+              color: 'rgba(1, 191, 236, 0.1)'
+            }
+          ])
+        },
+        emphasis: {
+          focus: 'series'
+        },
+        itemStyle: {
+          color: '#67C23A'
+        },
+        data: statistics.value.daily_trends.map(item => item.count)
+      }
+    ]
+  };
+
+  chart.setOption(option);
+  window.addEventListener('resize', () => chart.resize());
+}
+
+// 初始化天气图表
+const initWeatherChart = () => {
+  if (!weatherChartRef.value) return
+  weatherChart = echarts.init(weatherChartRef.value)
+
+  const colors = ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#909399']
+  const option = {
+    tooltip: {
+      trigger: 'item',
+      formatter: '{b}: {c} ({d}%)'
+    },
+    legend: {
+      top: '5%',
+      left: 'center',
+      itemWidth: 10,
+      itemHeight: 10,
+      textStyle: {
+        color: '#606266',
+        fontSize: 12
+      }
+    },
+    series: [
+      {
+        name: '天气分布',
+        type: 'pie',
+        radius: ['40%', '70%'],
+        center: ['50%', '55%'],
+        data: statistics.value.weather_stats.map((item, index) => ({
+          value: item.count,
+          name: item.weather_text,
+          itemStyle: {
+            color: colors[index % colors.length]
+          }
+        })),
+        label: {
+          show: true,
+          position: 'outside',
+          formatter: '{b}\n{d}%',
+          color: '#606266',
+          fontSize: 12
+        },
+        labelLine: {
+          length: 10,
+          length2: 10,
+          lineStyle: {
+            color: '#C0C4CC'
+          }
+        },
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: 'rgba(0, 0, 0, 0.5)'
+          }
+        }
+      }
+    ]
+  }
+
+  weatherChart.setOption(option)
+}
+
+// 更新所有图表
+const updateCharts = () => {
+  initOverviewChart()
+  initTrendChart()
+  initWeatherChart()
+}
+
+// 监听窗口大小变化
+const handleResize = () => {
+  overviewChart?.resize()
+  trendChart?.resize()
+  weatherChart?.resize()
+}
+
+// 获取统计信息并更新图表
+const getStatistics = async () => {
+  try {
+    const res = await getRecordStatistics()
+    if (res.success) {
+      statistics.value = res.data
+      updateCharts()
+    }
+  } catch (error) {
+    console.error('获取统计信息错误:', error)
+  }
+}
+
+// 获取记录列表
+const getList = async () => {
+  loading.value = true
+  try {
+    const res = await getRecordList({
+      page: currentPage.value,
+      page_size: pageSize.value,
+      ...searchForm.value
+    })
+    if (res.success) {
+      tableData.value = res.data.list
+      total.value = res.data.pagination.total
+    } else {
+      ElMessage.error(res.message || '获取列表失败')
+    }
+  } catch (error) {
+    console.error('获取巡护记录列表错误:', error)
+    ElMessage.error('获取列表失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+// 查看详情
+const handleView = async (row) => {
+  try {
+    const res = await getRecordDetail(row.id)
+    if (res.success) {
+      currentRecord.value = res.data
+      detailDialogVisible.value = true
+    } else {
+      ElMessage.error(res.message || '获取详情失败')
+    }
+  } catch (error) {
+    console.error('获取巡护记录详情错误:', error)
+    ElMessage.error('获取详情失败')
+  }
+}
+
+// 查看图片
+const handleViewImages = (row) => {
+  if (!row.image_urls?.length) return
+  // 在这里实现图片预览逻辑
+}
+
+// 查看视频
+const handleViewVideos = (row) => {
+  if (!row.video_urls?.length) return
+  // 在这里实现视频预览逻辑
+}
+
+// 导出记录
+const handleExport = async () => {
+  try {
+    const res = await exportRecords({
+      startDate: searchForm.value.startDate,
+      endDate: searchForm.value.endDate,
+      taskId: searchForm.value.taskId,
+      patrolerId: searchForm.value.patrolerId
+    })
+
+    // 创建下载链接
+    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 handleSearch = () => {
+  currentPage.value = 1
+  getList()
+}
+
+// 重置搜索
+const resetSearch = () => {
+  searchForm.value = {
+    keyword: '',
+    startDate: '',
+    endDate: '',
+    taskId: '',
+    patrolerId: ''
+  }
+  currentPage.value = 1
+  getList()
+}
+
+// 刷新列表
+const handleRefresh = () => {
+  getList()
+  getStatistics()
+}
+
+// 监听分页变化
 const handleSizeChange = (val) => {
-  pageSize.value = val;
-  currentPage.value = 1;
-};
+  pageSize.value = val
+  getList()
+}
 
 const handleCurrentChange = (val) => {
-  currentPage.value = val;
-};
+  currentPage.value = val
+  getList()
+}
+
+// 获取任务列表
+const getTaskOptions = async () => {
+  try {
+    const res = await getTaskList({ status: 'ongoing' })
+    if (res.success) {
+      taskOptions.value = res.data.list
+    }
+  } catch (error) {
+    console.error('获取任务列表失败:', error)
+  }
+}
+
+// 处理新建记录
+const handleAdd = async () => {
+  // 重置表单数据
+  form.value = {
+    task_id: '',
+    executor_id: userStore.userId,
+    start_time: '',
+    end_time: '',
+    route_points: [],
+    distance: 0,
+    duration: 0,
+    weather: '',
+    findings: '',
+    image_urls: [],
+    video_urls: [],
+    status: 0
+  }
+
+  // 获取任务列表
+  await getTaskOptions()
+
+  // 打开对话框
+  dialogVisible.value = true
+}
+
+// 处理添加点位
+const handleAddPoint = async () => {
+  try {
+    // 这里应该打开地图选择点位的组件
+    // 暂时使用模拟数据
+    const newPoint = {
+      longitude: 116.404,
+      latitude: 39.915,
+      timestamp: new Date().toISOString()
+    }
+    form.value.route_points.push(newPoint)
+  } catch (error) {
+    console.error('添加点位失败:', error)
+    ElMessage.error('添加点位失败')
+  }
+}
+
+// 处理删除点位
+const handleRemovePoint = (index) => {
+  form.value.route_points.splice(index, 1)
+}
+
+// 处理图片上传成功
+const handleImageSuccess = (response) => {
+  if (response.success) {
+    form.value.image_urls.push(response.data.url)
+    ElMessage.success('图片上传成功')
+  } else {
+    ElMessage.error(response.message || '图片上传失败')
+  }
+}
+
+// 处理视频上传成功
+const handleVideoSuccess = (response) => {
+  if (response.success) {
+    form.value.video_urls.push(response.data.url)
+    ElMessage.success('视频上传成功')
+  } else {
+    ElMessage.error(response.message || '视频上传失败')
+  }
+}
+
+// 处理上传错误
+const handleUploadError = (error) => {
+  console.error('上传失败:', error)
+  ElMessage.error('上传失败')
+}
+
+// 图片上传前验证
+const beforeImageUpload = (file) => {
+  const isImage = file.type.startsWith('image/')
+  const isLt5M = file.size / 1024 / 1024 < 5
+
+  if (!isImage) {
+    ElMessage.error('只能上传图片文件！')
+    return false
+  }
+  if (!isLt5M) {
+    ElMessage.error('图片大小不能超过 5MB！')
+    return false
+  }
+  return true
+}
+
+// 视频上传前验证
+const beforeVideoUpload = (file) => {
+  const isVideo = file.type.startsWith('video/')
+  const isLt50M = file.size / 1024 / 1024 < 50
+
+  if (!isVideo) {
+    ElMessage.error('只能上传视频文件！')
+    return false
+  }
+  if (!isLt50M) {
+    ElMessage.error('视频大小不能超过 50MB！')
+    return false
+  }
+  return true
+}
+
+// 提交表单
+const handleSubmit = async () => {
+  if (!formRef.value) return
+
+  try {
+    await formRef.value.validate()
+
+    const submitData = {
+      ...form.value,
+      start_time: new Date(form.value.start_time).toISOString(),
+      end_time: form.value.end_time ? new Date(form.value.end_time).toISOString() : undefined
+    }
+
+    const res = await createRecord(submitData)
+    if (res.success) {
+      ElMessage.success('创建成功')
+      dialogVisible.value = false
+      getList() // 刷新列表
+    } else {
+      ElMessage.error(res.message || '创建失败')
+    }
+  } catch (error) {
+    console.error('提交表单错误:', error)
+    ElMessage.error('表单验证失败，请检查输入')
+  }
+}
+
+// 获取上传请求头
+const uploadHeaders = computed(() => ({
+  Authorization: `Bearer ${userStore.token}`
+}))
+
+onMounted(() => {
+  getList()
+  getStatistics()
+  window.addEventListener('resize', handleResize)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize)
+  overviewChart?.dispose()
+  trendChart?.dispose()
+  weatherChart?.dispose()
+})
 </script>
 
 <template>
-  <div class="record-container">
-    <el-card>
+  <div class="patrol-records">
+    <el-card class="statistics-card">
+      <div class="statistics-grid">
+        <!-- 概览统计 -->
+        <div class="stat-item overview-chart">
+          <div class="chart-header">
+            <h3>巡护概览</h3>
+            <div class="total-info">
+              <span class="total-label">总记录数</span>
+              <span class="total-value">{{ statistics.overview.total_count }}</span>
+            </div>
+          </div>
+          <div ref="overviewChartRef" class="chart-container"></div>
+          <div class="completion-rate">
+            <span class="rate-label">完成率</span>
+            <span class="rate-value">{{ statistics.overview.completion_rate }}%</span>
+          </div>
+        </div>
+
+        <!-- 趋势统计 -->
+        <div class="stat-item trend-chart">
+          <div class="chart-header">
+            <h3>巡护趋势</h3>
+            <div class="trend-legend">
+              <span class="legend-item">
+                <i class="legend-color" style="background-color: #409EFF"></i>
+                巡护次数
+              </span>
+              <span class="legend-item">
+                <i class="legend-color" style="background-color: #67C23A"></i>
+                巡护距离
+              </span>
+            </div>
+          </div>
+          <div ref="trendChartRef" class="chart-container"></div>
+        </div>
+
+        <!-- 天气分布 -->
+        <div class="stat-item weather-chart">
+          <div class="chart-header">
+            <h3>天气分布</h3>
+          </div>
+          <div ref="weatherChartRef" class="chart-container"></div>
+        </div>
+
+        <!-- 巡护统计 -->
+        <div class="stat-item patrol-stats">
+          <div class="chart-header">
+            <h3>巡护统计</h3>
+          </div>
+          <div class="stats-grid">
+            <div class="stat-block">
+              <div class="stat-icon">
+                <el-icon><MapLocation /></el-icon>
+              </div>
+              <div class="stat-content">
+                <div class="stat-value">{{ (statistics.distance_stats.avg_distance / 1000).toFixed(2) }}km</div>
+                <div class="stat-label">平均距离</div>
+              </div>
+            </div>
+            <div class="stat-block">
+              <div class="stat-icon">
+                <el-icon><Odometer /></el-icon>
+              </div>
+              <div class="stat-content">
+                <div class="stat-value">{{ (statistics.distance_stats.total_distance / 1000).toFixed(2) }}km</div>
+                <div class="stat-label">总距离</div>
+              </div>
+            </div>
+            <div class="stat-block">
+              <div class="stat-icon">
+                <el-icon><Timer /></el-icon>
+              </div>
+              <div class="stat-content">
+                <div class="stat-value">{{ Math.floor(statistics.distance_stats.avg_duration / 60) }}h {{ statistics.distance_stats.avg_duration % 60 }}m</div>
+                <div class="stat-label">平均时长</div>
+              </div>
+            </div>
+            <div class="stat-block">
+              <div class="stat-icon">
+                <el-icon><Clock /></el-icon>
+              </div>
+              <div class="stat-content">
+                <div class="stat-value">{{ Math.floor(statistics.distance_stats.total_duration / 60) }}h {{ statistics.distance_stats.total_duration % 60 }}m</div>
+                <div class="stat-label">总时长</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-card>
+
+    <el-card class="main-card">
       <template #header>
         <div class="card-header">
           <span>巡护记录</span>
-          <div class="header-right">
-            <el-input
-              v-model="searchText"
-              placeholder="搜索巡护记录"
-              style="width: 200px; margin-right: 16px"
-            >
-              <template #prefix>
-                <el-icon><Search /></el-icon>
-              </template>
-            </el-input>
-            <el-button type="primary" @click="handleExport">导出记录</el-button>
+          <div class="header-btns">
+            <el-button type="primary" :icon="Plus" @click="handleAdd">
+              新建记录
+            </el-button>
+            <el-button :icon="Download" @click="handleExport">导出</el-button>
+            <el-button :icon="Refresh" @click="handleRefresh">刷新</el-button>
           </div>
         </div>
       </template>
 
-      <el-table :data="paginatedData" style="width: 100%">
-        <el-table-column prop="id" label="ID" width="80" />
-        <el-table-column prop="taskTitle" label="任务名称" min-width="150" />
-        <el-table-column prop="patroller" label="巡护人员" width="100" />
-        <el-table-column prop="route" label="巡护路线" min-width="200" />
-        <el-table-column prop="findings" label="发现问题" min-width="200">
+      <!-- 搜索表单 -->
+      <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-date-picker
+            v-model="searchForm.startDate"
+            type="date"
+            placeholder="开始日期"
+            value-format="YYYY-MM-DD"
+            style="width: 150px"
+          />
+          <span class="mx-2">至</span>
+          <el-date-picker
+            v-model="searchForm.endDate"
+            type="date"
+            placeholder="结束日期"
+            value-format="YYYY-MM-DD"
+            style="width: 150px"
+          />
+        </el-form-item>
+        <el-form-item label="任务ID">
+          <el-input
+            v-model="searchForm.taskId"
+            placeholder="请输入任务ID"
+            clearable
+            style="width: 160px"
+          />
+        </el-form-item>
+        <el-form-item label="巡护员ID">
+          <el-input
+            v-model="searchForm.patrolerId"
+            placeholder="请输入巡护员ID"
+            clearable
+            style="width: 160px"
+          />
+        </el-form-item>
+        <el-form-item>
+          <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%"
+      >
+        <el-table-column type="index" label="序号" width="60" align="center" />
+        <el-table-column prop="task_name" label="任务名称" min-width="150" show-overflow-tooltip align="center">
           <template #default="{ row }">
-            <el-tooltip
-              v-if="row.findings.length > 20"
-              :content="row.findings"
-              placement="top"
-            >
-              <span>{{ row.findings.slice(0, 20) }}...</span>
+            <el-tooltip :content="row.task_name" placement="top">
+              <span>{{ row.task_name }}</span>
             </el-tooltip>
-            <span v-else>{{ row.findings }}</span>
           </template>
         </el-table-column>
-        <el-table-column prop="status" label="状态" width="100">
+        <el-table-column prop="executor_name" label="巡护员" width="120" align="center"/>
+        <el-table-column label="巡护时间" width="160" align="center">
           <template #default="{ row }">
-            <el-tag :type="row.status === '正常' ? 'success' : 'warning'">
-              {{ row.status }}
+            {{ formatDateTime(row.start_time) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="巡护时长" width="120" align="center">
+          <template #default="{ row }">
+            {{ formatDuration(row.duration) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="巡护距离" width="120" align="center">
+          <template #default="{ row }">
+            {{ formatDistance(row.distance) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="findings" label="巡护发现" min-width="200" show-overflow-tooltip align="center"/>
+        <el-table-column prop="weather" label="天气" width="100" align="center" />
+        <el-table-column label="状态" width="100" align="center">
+          <template #default="{ row }">
+            <el-tag :type="row.status === 1 ? 'success' : 'warning'">
+              {{ row.status === 1 ? '已完成' : '进行中' }}
             </el-tag>
           </template>
         </el-table-column>
-        <el-table-column prop="completedTime" label="完成时间" width="180" />
-        <el-table-column label="操作" width="120" fixed="right">
+        <el-table-column label="图片" width="80" align="center">
           <template #default="{ row }">
-            <el-button type="primary" size="small" @click="handleView(row)">
-              查看详情
+            <el-button
+              v-if="row.image_urls?.length"
+              type="primary"
+              link
+              @click="handleViewImages(row)"
+            >
+              查看({{ row.image_urls.length }})
             </el-button>
+            <span v-else>-</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="视频" width="80" align="center">
+          <template #default="{ row }">
+            <el-button
+              v-if="row.video_urls?.length"
+              type="primary"
+              link
+              @click="handleViewVideos(row)"
+            >
+              查看({{ row.video_urls.length }})
+            </el-button>
+            <span v-else>-</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="100" fixed="right" align="center">
+          <template #default="{ row }">
+            <el-button type="primary" link @click="handleView(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="total"
           :page-sizes="[10, 20, 50, 100]"
-          layout="total, sizes, prev, pager, next, jumper"
-          :total="filteredTableData.length"
+          background
+          layout="total, sizes, prev, pager, next"
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
         />
       </div>
     </el-card>
 
-    <!-- 详情弹窗 -->
-    <el-dialog v-model="dialogVisible" title="巡护记录详情" width="700px">
-      <template v-if="currentRecord">
-        <el-descriptions :column="2" border>
-          <el-descriptions-item label="任务名称" :span="2">
-            {{ currentRecord.taskTitle }}
-          </el-descriptions-item>
-          <el-descriptions-item label="巡护人员">
-            {{ currentRecord.patroller }}
-          </el-descriptions-item>
-          <el-descriptions-item label="完成时间">
-            {{ currentRecord.completedTime }}
-          </el-descriptions-item>
-          <el-descriptions-item label="巡护路线" :span="2">
-            {{ currentRecord.route }}
-          </el-descriptions-item>
-          <el-descriptions-item label="发现问题" :span="2">
-            {{ currentRecord.findings }}
-          </el-descriptions-item>
-          <el-descriptions-item label="现场照片" :span="2">
+    <!-- 详情对话框 -->
+    <el-dialog
+      v-model="detailDialogVisible"
+      title="巡护记录详情"
+      width="800px"
+    >
+      <el-descriptions v-if="currentRecord" :column="2" border>
+        <el-descriptions-item label="任务名称" :span="2">
+          {{ currentRecord.task_name }}
+        </el-descriptions-item>
+        <el-descriptions-item label="计划名称" :span="2">
+          {{ currentRecord.plan_name }}
+        </el-descriptions-item>
+        <el-descriptions-item label="巡护员">
+          {{ currentRecord.executor_name }}
+        </el-descriptions-item>
+        <el-descriptions-item label="巡护日期">
+          {{ currentRecord.patrol_date }}
+        </el-descriptions-item>
+        <el-descriptions-item label="开始时间">
+          {{ formatDateTime(currentRecord.start_time) }}
+        </el-descriptions-item>
+        <el-descriptions-item label="结束时间">
+          {{ formatDateTime(currentRecord.end_time) || '-' }}
+        </el-descriptions-item>
+        <el-descriptions-item label="巡护时长">
+          {{ formatDuration(currentRecord.duration) }}
+        </el-descriptions-item>
+        <el-descriptions-item label="巡护距离">
+          {{ formatDistance(currentRecord.distance) }}
+        </el-descriptions-item>
+        <el-descriptions-item label="天气">
+          {{ currentRecord.weather }}
+        </el-descriptions-item>
+        <el-descriptions-item label="状态">
+          <el-tag :type="currentRecord.status === 1 ? 'success' : 'warning'">
+            {{ currentRecord.status === 1 ? '已完成' : '进行中' }}
+          </el-tag>
+        </el-descriptions-item>
+        <el-descriptions-item label="巡护发现" :span="2">
+          {{ currentRecord.findings || '-' }}
+        </el-descriptions-item>
+        <el-descriptions-item label="巡护轨迹" :span="2">
+          <div v-if="currentRecord.route_points?.length">
+            <div v-for="(point, index) in currentRecord.route_points" :key="index">
+              点位{{ index + 1 }}: 经度{{ point.longitude }}, 纬度{{ point.latitude }}, 时间{{ formatDateTime(point.timestamp) }}
+            </div>
+          </div>
+          <span v-else>-</span>
+        </el-descriptions-item>
+        <el-descriptions-item label="图片" :span="2">
+          <div v-if="currentRecord.image_urls?.length" class="image-list">
             <el-image
-              v-for="(img, index) in currentRecord.images"
+              v-for="(url, index) in currentRecord.image_urls"
               :key="index"
-              :src="img"
+              :src="url"
+              :preview-src-list="currentRecord.image_urls"
               fit="cover"
-              style="width: 100px; height: 100px; margin-right: 8px"
-            >
-              <template #error>
-                <div class="image-placeholder">暂无图片</div>
-              </template>
-            </el-image>
-          </el-descriptions-item>
-        </el-descriptions>
-      </template>
-      <template #footer>
-        <span class="dialog-footer">
-          <el-button @click="dialogVisible = false">关闭</el-button>
-        </span>
-      </template>
+              class="preview-image"
+            />
+          </div>
+          <span v-else>-</span>
+        </el-descriptions-item>
+        <el-descriptions-item label="视频" :span="2">
+          <div v-if="currentRecord.video_urls?.length" class="video-list">
+            <video
+              v-for="(url, index) in currentRecord.video_urls"
+              :key="index"
+              :src="url"
+              controls
+              class="preview-video"
+            />
+          </div>
+          <span v-else>-</span>
+        </el-descriptions-item>
+      </el-descriptions>
     </el-dialog>
 
-    <!-- 添加导出弹窗 -->
-    <el-dialog v-model="exportDialogVisible" title="导出记录" width="500px">
-      <el-form :model="exportForm" label-width="80px">
-        <el-form-item label="时间范围">
+    <!-- 新建记录对话框 -->
+    <el-dialog
+      v-model="dialogVisible"
+      title="新建巡护记录"
+      width="800px"
+      :close-on-click-modal="false"
+      destroy-on-close
+    >
+      <el-form
+        ref="formRef"
+        :model="form"
+        :rules="rules"
+        label-width="100px"
+      >
+        <el-form-item label="关联任务" prop="task_id">
+          <el-select
+            v-model="form.task_id"
+            placeholder="请选择关联任务"
+            clearable
+            style="width: 100%"
+          >
+            <el-option
+              v-for="task in taskOptions"
+              :key="task.id"
+              :label="task.title"
+              :value="task.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="开始时间" prop="start_time">
           <el-date-picker
-            v-model="exportForm.timeRange"
-            type="daterange"
-            range-separator="至"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
+            v-model="form.start_time"
+            type="datetime"
+            placeholder="请选择开始时间"
             style="width: 100%"
           />
         </el-form-item>
-        <el-form-item label="导出内容">
-          <el-checkbox-group v-model="exportForm.types">
-            <el-checkbox label="basic">基本信息</el-checkbox>
-            <el-checkbox label="findings">发现问题</el-checkbox>
-            <el-checkbox label="images">现场照片</el-checkbox>
-          </el-checkbox-group>
+        <el-form-item label="结束时间" prop="end_time">
+          <el-date-picker
+            v-model="form.end_time"
+            type="datetime"
+            placeholder="请选择结束时间"
+            style="width: 100%"
+          />
         </el-form-item>
-        <el-form-item label="导出格式">
-          <el-radio-group v-model="exportForm.format">
-            <el-radio label="excel">Excel</el-radio>
-            <el-radio label="pdf">PDF</el-radio>
+        <el-form-item label="巡护点位" prop="route_points">
+          <el-table
+            :data="form.route_points"
+            style="width: 100%"
+            size="small"
+            border
+          >
+            <el-table-column label="序号" type="index" width="60" align="center" />
+            <el-table-column label="经度" prop="longitude" width="120" align="center" />
+            <el-table-column label="纬度" prop="latitude" width="120" align="center" />
+            <el-table-column label="时间" prop="timestamp" width="160" align="center">
+              <template #default="{ row }">
+                {{ formatDateTime(row.timestamp) }}
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" width="80" align="center">
+              <template #default="{ $index }">
+                <el-button
+                  type="danger"
+                  link
+                  @click="handleRemovePoint($index)"
+                >删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <div class="table-footer">
+            <el-button type="primary" link @click="handleAddPoint">
+              <el-icon><Plus /></el-icon>添加点位
+            </el-button>
+          </div>
+        </el-form-item>
+        <el-form-item label="巡护距离" prop="distance">
+          <el-input-number
+            v-model="form.distance"
+            :min="0"
+            :precision="2"
+            :step="0.1"
+            style="width: 200px"
+          >
+            <template #suffix>公里</template>
+          </el-input-number>
+        </el-form-item>
+        <el-form-item label="巡护时长" prop="duration">
+          <el-input-number
+            v-model="form.duration"
+            :min="0"
+            :step="1"
+            style="width: 200px"
+          >
+            <template #suffix>分钟</template>
+          </el-input-number>
+        </el-form-item>
+        <el-form-item label="天气情况" prop="weather">
+          <el-select v-model="form.weather" placeholder="请选择天气情况" style="width: 200px">
+            <el-option label="晴" value="sunny" />
+            <el-option label="多云" value="cloudy" />
+            <el-option label="阴" value="overcast" />
+            <el-option label="小雨" value="rainy" />
+            <el-option label="大雨" value="heavy_rain" />
+            <el-option label="雪" value="snowy" />
+            <el-option label="雾" value="foggy" />
+            <el-option label="大风" value="windy" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="巡护发现" prop="findings">
+          <el-input
+            v-model="form.findings"
+            type="textarea"
+            :rows="4"
+            placeholder="请输入巡护发现"
+          />
+        </el-form-item>
+        <el-form-item label="巡护图片">
+          <el-upload
+            class="upload-demo"
+            action="/api/admin/patrol/records/upload/image"
+            :headers="uploadHeaders"
+            list-type="picture-card"
+            :limit="9"
+            :on-success="handleImageSuccess"
+            :on-error="handleUploadError"
+            :before-upload="beforeImageUpload"
+          >
+            <el-icon><Plus /></el-icon>
+          </el-upload>
+        </el-form-item>
+        <el-form-item label="巡护视频">
+          <el-upload
+            class="upload-demo"
+            action="/api/admin/patrol/records/upload/video"
+            :headers="uploadHeaders"
+            :limit="5"
+            :on-success="handleVideoSuccess"
+            :on-error="handleUploadError"
+            :before-upload="beforeVideoUpload"
+          >
+            <el-button type="primary">点击上传</el-button>
+            <template #tip>
+              <div class="el-upload__tip">
+                支持常见视频格式，单个文件不超过50MB
+              </div>
+            </template>
+          </el-upload>
+        </el-form-item>
+        <el-form-item label="记录状态" prop="status">
+          <el-radio-group v-model="form.status">
+            <el-radio :value="0">进行中</el-radio>
+            <el-radio :value="1">已完成</el-radio>
           </el-radio-group>
         </el-form-item>
       </el-form>
       <template #footer>
         <span class="dialog-footer">
-          <el-button @click="exportDialogVisible = false">取消</el-button>
-          <el-button type="primary" @click="handleExportConfirm">确认导出</el-button>
+          <el-button @click="dialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="handleSubmit">确定</el-button>
         </span>
       </template>
     </el-dialog>
@@ -231,123 +1130,286 @@ const handleCurrentChange = (val) => {
 </template>
 
 <style lang="scss" scoped>
-@use "../../../styles/variables.scss" as *;
+.patrol-records {
+  .statistics-card {
+    margin-bottom: 16px;
 
-.record-container {
-  .el-card {
-    background: #ffffff;
-    border: none;
-    border-radius: 4px;
-    box-shadow: $box-shadow;
+    .statistics-grid {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 16px;
 
-    .el-card__header {
-      padding: 16px 20px;
-      border-bottom: 1px solid $border-color;
+      .stat-item {
+        background-color: #fff;
+        border-radius: 8px;
+        padding: 16px;
+        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+
+        .chart-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 16px;
+
+          h3 {
+            font-size: 16px;
+            font-weight: 500;
+            color: #303133;
+          }
+        }
+
+        .chart-container {
+          height: 200px;
+        }
+
+        .completion-rate {
+          margin-top: 16px;
+          padding: 8px;
+          background-color: #f8f9fa;
+          border-radius: 4px;
+
+          .rate-label {
+            display: block;
+            margin-bottom: 8px;
+          }
+
+          .rate-value {
+            color: #409EFF;
+            font-weight: 500;
+          }
+        }
+
+        .total-info {
+          .total-label {
+            display: block;
+            margin-bottom: 8px;
+          }
+
+          .total-value {
+            color: #409EFF;
+            font-weight: 500;
+          }
+        }
+
+        .trend-legend {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+
+          .legend-item {
+            display: flex;
+            align-items: center;
+
+            .legend-color {
+              width: 12px;
+              height: 12px;
+              border-radius: 50%;
+              margin-right: 8px;
+            }
+          }
+        }
+
+        .stats-grid {
+          display: grid;
+          grid-template-columns: repeat(2, 1fr);
+          gap: 16px;
+          padding: 16px;
+          background-color: #f8f9fa;
+          border-radius: 8px;
+
+          .stat-block {
+            display: flex;
+            align-items: center;
+            padding: 16px;
+            background: #fff;
+            border-radius: 8px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+            transition: all 0.3s;
+
+            &:hover {
+              transform: translateY(-2px);
+              box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+            }
+
+            .stat-icon {
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              width: 48px;
+              height: 48px;
+              border-radius: 12px;
+              margin-right: 16px;
+
+              :deep(.el-icon) {
+                font-size: 24px;
+              }
+            }
+
+            &:nth-child(1) .stat-icon {
+              background: rgba(64, 158, 255, 0.1);
+              :deep(.el-icon) {
+                color: #409EFF;
+              }
+            }
+
+            &:nth-child(2) .stat-icon {
+              background: rgba(103, 194, 58, 0.1);
+              :deep(.el-icon) {
+                color: #67C23A;
+              }
+            }
+
+            &:nth-child(3) .stat-icon {
+              background: rgba(230, 162, 60, 0.1);
+              :deep(.el-icon) {
+                color: #E6A23C;
+              }
+            }
+
+            &:nth-child(4) .stat-icon {
+              background: rgba(245, 108, 108, 0.1);
+              :deep(.el-icon) {
+                color: #F56C6C;
+              }
+            }
+
+            .stat-content {
+              flex: 1;
+
+              .stat-value {
+                font-size: 20px;
+                font-weight: 600;
+                color: #303133;
+                line-height: 1.4;
+              }
+
+              .stat-label {
+                font-size: 13px;
+                color: #909399;
+                margin-top: 4px;
+              }
+            }
+          }
+        }
+      }
     }
   }
-}
 
-.card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+  .main-card {
+    .card-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
 
-  span {
-    font-size: 16px;
-    font-weight: 500;
-    color: $text-primary;
+      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;
+        }
+      }
+
+      .mx-2 {
+        margin: 0 8px;
+      }
+    }
+
+    .pagination-container {
+      margin-top: 20px;
+      display: flex;
+      justify-content: flex-end;
+    }
   }
 
-  .header-right {
-    display: flex;
-    align-items: center;
-  }
-}
-
-:deep(.el-table) {
-  th.el-table__cell {
-    background-color: #fafafa;
-    color: $text-primary;
-    font-weight: 500;
-  }
-
-  .el-table__cell {
-    padding: 12px 0;
-  }
-}
-
-.el-card__body {
-  padding: 20px;
-}
-
-.image-placeholder {
-  width: 100px;
-  height: 100px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: #f5f7fa;
-  color: $text-secondary;
-  font-size: 14px;
-}
-
-:deep(.el-descriptions) {
-  .el-descriptions__label {
-    width: 120px;
-    justify-content: right;
-  }
-}
-
-.pagination-container {
-  margin-top: 20px;
-  display: flex;
-  justify-content: flex-end;
-}
-
-.el-table {
-  .el-tag {
-    transition: all 0.3s;
-  }
-
-  .el-button {
-    transition: all 0.3s;
-  }
-}
-
-.el-dialog {
-  .el-image {
-    transition: transform 0.3s;
+  .preview-image {
+    width: 100px;
+    height: 100px;
+    margin-right: 8px;
+    margin-bottom: 8px;
+    border-radius: 4px;
     cursor: pointer;
+  }
 
-    &:hover {
-      transform: scale(1.05);
+  .preview-video {
+    width: 320px;
+    margin-right: 8px;
+    margin-bottom: 8px;
+    border-radius: 4px;
+  }
+
+  .file-list {
+    .file-item {
+      margin-bottom: 8px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
     }
   }
-}
 
-.image-container {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 12px;
+  .el-dialog {
+    .el-form {
+      max-height: calc(100vh - 300px);
+      overflow-y: auto;
+      padding-right: 16px;
 
-  .el-image {
-    border-radius: 4px;
-    overflow: hidden;
-  }
-}
+      &::-webkit-scrollbar {
+        width: 6px;
+      }
 
-:deep(.el-descriptions) {
-  .el-descriptions__cell {
-    padding: 16px 24px;
-  }
+      &::-webkit-scrollbar-thumb {
+        background-color: #dcdfe6;
+        border-radius: 3px;
+      }
+    }
 
-  .el-descriptions__label {
-    color: $text-regular;
-    font-weight: normal;
-  }
+    .table-footer {
+      margin-top: 12px;
+      display: flex;
+      justify-content: center;
+    }
 
-  .el-descriptions__content {
-    color: $text-primary;
+    .el-upload {
+      &.el-upload--picture-card {
+        width: 120px;
+        height: 120px;
+        line-height: 120px;
+      }
+    }
+
+    .el-upload-list {
+      &.el-upload-list--picture-card {
+        .el-upload-list__item {
+          width: 120px;
+          height: 120px;
+        }
+      }
+    }
+
+    .el-upload__tip {
+      font-size: 12px;
+      color: #909399;
+      margin-top: 8px;
+    }
   }
 }
 </style>
diff --git a/src/views/patrol/tasks/index.vue b/src/views/patrol/tasks/index.vue
index 0fd6e10..0d2eeec 100644
--- a/src/views/patrol/tasks/index.vue
+++ b/src/views/patrol/tasks/index.vue
@@ -1,38 +1,241 @@
 <script setup>
-import { ref, reactive, computed } from "vue";
+import { ref, reactive, computed, onMounted } from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";
+import { Search, Plus, InfoFilled } from '@element-plus/icons-vue';
+import { formatDateTime } from '@/utils/format';
+import { getRoutePointsWithAddress } from '@/utils/map';
+import {
+  getTaskList,
+  createTask,
+  getTaskDetail,
+  updateTask,
+  cancelTask
+} from '@/api/patrol/task';
+import { getUserList } from '@/api/user';
 
-const tableData = ref([
-  {
-    id: 1,
-    title: "A区日常巡查",
-    area: "A区湿地",
-    assignee: "张三",
-    status: "进行中",
-    priority: "高",
-    startTime: "2024-03-20 09:00",
-    endTime: "2024-03-20 11:00",
-  },
-  {
-    id: 2,
-    title: "B区设备检查",
-    area: "B区湿地",
-    assignee: "李四",
-    status: "待开始",
-    priority: "中",
-    startTime: "2024-03-20 14:00",
-    endTime: "2024-03-20 16:00",
-  },
-]);
+// 表格数据
+const tableData = ref([]);
+const loading = ref(false);
+
+// 用户列表数据
+const userList = ref([]);
+
+// 获取任务列表
+const getList = async () => {
+  loading.value = true;
+  try {
+    const params = {
+      keyword: searchText.value,
+      status: statusFilter.value.join(','),
+      startDate: dateRange.value[0] ? formatDateTime(dateRange.value[0], 'YYYY-MM-DD') : '',
+      endDate: dateRange.value[1] ? formatDateTime(dateRange.value[1], 'YYYY-MM-DD') : '',
+      page: currentPage.value,
+      pageSize: pageSize.value
+    };
+
+    const res = await getTaskList(params);
+    if (res.success) {
+      tableData.value = res.data.list;
+      total.value = res.data.pagination.total;
+      currentPage.value = res.data.pagination.page;
+      pageSize.value = res.data.pagination.page_size;
+    } else {
+      ElMessage.error(res.message || '获取任务列表失败');
+    }
+  } catch (error) {
+    console.error('获取任务列表错误:', error);
+    ElMessage.error('获取任务列表失败');
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 获取用户列表
+const getUserData = async () => {
+  try {
+    const res = await getUserList();
+    if (res.success && Array.isArray(res.data)) {
+      userList.value = res.data;
+    } else if (res.success && Array.isArray(res.data.list)) {
+      // 如果数据在list字段中
+      userList.value = res.data.list;
+    } else {
+      console.error('获取用户列表数据格式错误:', res);
+      userList.value = []; // 设置为空数组
+    }
+  } catch (error) {
+    console.error('获取用户列表错误:', error);
+    userList.value = []; // 出错时设置为空数组
+  }
+};
+
+// 优先级转换
+const getPriorityText = (priority) => {
+  const map = {
+    0: '低',
+    1: '中',
+    2: '高'
+  };
+  return map[priority] || '低';
+};
+
+// 新建任务相关
+const newTaskDialogVisible = ref(false);
+const newTaskForm = reactive({
+  plan_id: '', // 关联的巡护计划ID
+  task_name: '', // 任务名称
+  task_type: 'regular', // 任务类型
+  patrol_date: '', // 巡护日期
+  start_time: '', // 开始时间
+  end_time: '', // 结束时间
+  route_points: [], // 巡护路线点位
+  executor_ids: [], // 执行人ID列表
+  description: '', // 任务描述
+  priority: 2, // 优先级
+  status: 0 // 状态
+});
+
+// 表单验证规则
+const rules = {
+  plan_id: [{ required: true, message: "请选择关联计划", trigger: "change" }],
+  task_name: [
+    { required: true, message: "请输入任务名称", trigger: "blur" },
+    { max: 100, message: "任务名称最大100字符", trigger: "blur" }
+  ],
+  task_type: [{ required: true, message: "请选择任务类型", trigger: "change" }],
+  patrol_date: [{ required: true, message: "请选择巡护日期", trigger: "change" }],
+  start_time: [{ required: true, message: "请选择开始时间", trigger: "change" }],
+  end_time: [{ required: true, message: "请选择结束时间", trigger: "change" }],
+  executor_ids: [{ required: true, message: "请选择执行人", trigger: "change" }],
+  description: [{ max: 1000, message: "描述最大1000字符", trigger: "blur" }]
+};
+
+// 处理新建任务提交
+const handleNewTaskSubmit = async () => {
+  if (!newTaskFormRef.value) return;
+
+  try {
+    await newTaskFormRef.value.validate();
+
+    // 构造提交数据
+    const submitData = {
+      plan_id: Number(newTaskForm.plan_id),
+      task_name: newTaskForm.task_name.trim(),
+      task_type: newTaskForm.task_type,
+      patrol_date: newTaskForm.patrol_date,
+      start_time: newTaskForm.start_time,
+      end_time: newTaskForm.end_time,
+      route_points: newTaskForm.route_points,
+      executor_ids: newTaskForm.executor_ids,
+      description: newTaskForm.description?.trim(),
+      priority: newTaskForm.priority,
+      status: newTaskForm.status
+    };
+
+    const res = await createTask(submitData);
+    if (res.success) {
+      ElMessage.success('创建成功');
+      newTaskDialogVisible.value = false;
+      getList(); // 刷新列表
+    } else {
+      ElMessage.error(res.message || '创建失败');
+    }
+  } catch (error) {
+    console.error('创建任务错误:', error);
+    ElMessage.error('创建失败，请检查输入是否正确');
+  }
+};
+
+// 重置表单
+const resetForm = () => {
+  newTaskForm.plan_id = '';
+  newTaskForm.task_name = '';
+  newTaskForm.task_type = 'regular';
+  newTaskForm.patrol_date = '';
+  newTaskForm.start_time = '';
+  newTaskForm.end_time = '';
+  newTaskForm.route_points = [];
+  newTaskForm.executor_ids = [];
+  newTaskForm.description = '';
+  newTaskForm.priority = 2;
+  newTaskForm.status = 0;
+  if (newTaskFormRef.value) {
+    newTaskFormRef.value.resetFields();
+  }
+};
+
+// 查看任务详情
+const handleView = async (row) => {
+  try {
+    const res = await getTaskDetail(row.id);
+    if (res.success) {
+      currentTask.value = res.data;
+      // 如果有路线点位信息，获取地址
+      if (currentTask.value.route_points?.length) {
+        const pointsWithAddress = await getRoutePointsWithAddress(currentTask.value.route_points);
+        currentTask.value.route_points = pointsWithAddress;
+      }
+      detailDialogVisible.value = true;
+    } else {
+      ElMessage.error(res.message || '获取任务详情失败');
+    }
+  } catch (error) {
+    console.error('获取任务详情错误:', error);
+    ElMessage.error('获取任务详情失败');
+  }
+};
+
+// 取消任务
+const handleCancel = (row) => {
+  ElMessageBox.prompt('请输入取消原因', '取消任务', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    inputPattern: /.+/,
+    inputErrorMessage: '取消原因不能为空'
+  }).then(async ({ value: reason }) => {
+    try {
+      const res = await cancelTask(row.id, { reason });
+      if (res.success) {
+        ElMessage.success('任务已取消');
+        getList(); // 刷新列表
+      } else {
+        ElMessage.error(res.message || '取消失败');
+      }
+    } catch (error) {
+      console.error('取消任务错误:', error);
+      ElMessage.error('取消失败');
+    }
+  }).catch(() => {});
+};
+
+// 搜索处理
+const handleSearch = () => {
+  getList();
+};
+
+// 重置筛选条件
+const resetFilters = () => {
+  searchText.value = "";
+  statusFilter.value = [];
+  priorityFilter.value = [];
+  dateRange.value = ['', ''];
+  currentPage.value = 1;
+  getList();
+};
+
+onMounted(() => {
+  getUserData(); // 获取用户列表
+  getList();
+});
 
 const getStatusType = (status) => {
-  const map = {
-    进行中: "success",
-    待开始: "info",
-    已完成: "primary",
-    已取消: "danger",
-  };
-  return map[status] || "info";
+  const statusMap = {
+    0: 'info',    // 待执行
+    1: 'warning', // 执行中
+    2: 'success', // 已完成
+    3: 'danger'   // 已取消
+  }
+  return statusMap[status] || 'info'
 };
 
 const getPriorityType = (priority) => {
@@ -44,79 +247,66 @@ const getPriorityType = (priority) => {
   return map[priority] || "info";
 };
 
-// 新建任务相关
-const newTaskDialogVisible = ref(false);
-const newTaskForm = reactive({
-  title: "",
-  area: "",
-  assignee: "",
-  priority: "中",
-  startTime: "",
-  endTime: "",
-  description: "",
-});
-
 // 任务详情相关
 const detailDialogVisible = ref(false);
 const currentTask = ref(null);
 
-// 任务状态更新相关
-const handleView = (row) => {
-  currentTask.value = row;
-  detailDialogVisible.value = true;
-};
+// 添加计算任务时间线的函数
+const getTaskTimeline = (task) => {
+  if (!task) return [];
 
-const handleComplete = (row) => {
-  ElMessageBox.confirm("确认完成该巡护任务？", "提示", {
-    confirmButtonText: "确定",
-    cancelButtonText: "取消",
-    type: "warning",
-  })
-    .then(() => {
-      ElMessage.success("任务已完成");
-    })
-    .catch(() => {
-      // 取消操作
-    });
-};
+  const timeline = [];
 
-const handleCancel = (row) => {
-  ElMessageBox.confirm("确认取消该巡护任务？", "提示", {
-    confirmButtonText: "确定",
-    cancelButtonText: "取消",
-    type: "warning",
-  })
-    .then(() => {
-      ElMessage.success("任务已取消");
-    })
-    .catch(() => {
-      // 取消操作
-    });
-};
-
-// 任务时间线数据
-const taskTimeline = ref([
-  {
+  // 添加创建时间节点
+  timeline.push({
     type: 'primary',
-    timestamp: '2024-03-20 09:00',
-    content: '任务创建',
-  },
-  {
-    type: 'info',
-    timestamp: '2024-03-20 09:30',
-    content: '巡护人员已接收任务',
-  },
-  {
-    type: 'warning',
-    timestamp: '2024-03-20 10:15',
-    content: '发现水质异常，已上报',
-  },
-  {
-    type: 'success',
-    timestamp: '2024-03-20 11:00',
-    content: '巡护任务完成',
-  },
-]);
+    timestamp: formatDateTime(task.created_at),
+    content: '任务创建'
+  });
+
+  // 根据任务状态添加相应的时间线节点
+  switch (task.status) {
+    case 0: // 待执行
+      break;
+    case 1: // 执行中
+      timeline.push({
+        type: 'warning',
+        timestamp: formatDateTime(task.patrol_date) + ' ' + task.start_time,
+        content: '任务开始执行'
+      });
+      break;
+    case 2: // 已完成
+      timeline.push({
+        type: 'warning',
+        timestamp: formatDateTime(task.patrol_date) + ' ' + task.start_time,
+        content: '任务开始执行'
+      });
+      timeline.push({
+        type: 'success',
+        timestamp: formatDateTime(task.patrol_date) + ' ' + task.end_time,
+        content: '任务已完成'
+      });
+      break;
+    case 3: // 已取消
+      timeline.push({
+        type: 'danger',
+        timestamp: formatDateTime(task.updated_at),
+        content: '任务已取消'
+      });
+      break;
+  }
+
+  // 如果有更新且不是取消状态，添加更新记录
+  if (task.updated_at !== task.created_at && task.status !== 3) {
+    timeline.push({
+      type: 'info',
+      timestamp: formatDateTime(task.updated_at),
+      content: '任务信息更新'
+    });
+  }
+
+  return timeline;
+};
 
 // 表单验证规则
 const validateTime = (rule, value, callback) => {
@@ -133,53 +323,12 @@ const validateTime = (rule, value, callback) => {
   callback();
 };
 
-const rules = {
-  title: [{ required: true, message: "请输入任务名称", trigger: "blur" }],
-  area: [{ required: true, message: "请输入巡护区域", trigger: "blur" }],
-  assignee: [{ required: true, message: "请输入负责人", trigger: "blur" }],
-  startTime: [
-    { required: true, message: "请选择开始时间", trigger: "change" },
-    { validator: validateTime, trigger: "change" }
-  ],
-  endTime: [
-    { required: true, message: "请选择结束时间", trigger: "change" },
-    { validator: validateTime, trigger: "change" }
-  ],
-};
-
 const newTaskFormRef = ref();
 
 const handleNewTask = () => {
   newTaskDialogVisible.value = true;
 };
 
-const handleNewTaskSubmit = async () => {
-  if (!newTaskFormRef.value) return;
-
-  try {
-    await newTaskFormRef.value.validate();
-    console.log("提交新任务:", newTaskForm);
-    ElMessage.success("创建成功");
-    newTaskDialogVisible.value = false;
-  } catch (error) {
-    console.error("表单验证失败:", error);
-  }
-};
-
-// 重置表单
-const resetForm = () => {
-  newTaskForm.title = "";
-  newTaskForm.area = "";
-  newTaskForm.assignee = "";
-  newTaskForm.priority = "中";
-  newTaskForm.startTime = "";
-  newTaskForm.endTime = "";
-  newTaskForm.description = "";
-  if (newTaskFormRef.value) {
-    newTaskFormRef.value.resetFields();
-  }
-};
-
 // 关闭弹窗时重置表单
 const handleDialogClose = () => {
   resetForm();
@@ -195,26 +344,21 @@ const dateRange = ref(['', '']);
 const statistics = computed(() => {
   const total = tableData.value.length;
   const statusCount = {
-    进行中: 0,
-    待开始: 0,
-    已完成: 0,
-    已取消: 0,
+    待执行: tableData.value.filter(task => task.status === 0).length,
+    执行中: tableData.value.filter(task => task.status === 1).length,
+    已完成: tableData.value.filter(task => task.status === 2).length,
+    已取消: tableData.value.filter(task => task.status === 3).length
   };
   const priorityCount = {
-    高: 0,
-    中: 0,
-    低: 0,
+    高: tableData.value.filter(task => task.priority === 1).length,
+    中: tableData.value.filter(task => task.priority === 2).length,
+    低: tableData.value.filter(task => task.priority === 3).length
   };
 
-  tableData.value.forEach(task => {
-    statusCount[task.status]++;
-    priorityCount[task.priority]++;
-  });
-
   return {
     total,
     statusCount,
-    priorityCount,
+    priorityCount
   };
 });
 
@@ -224,7 +368,7 @@ const filteredTableData = computed(() => {
     // 文本搜索
     const searchLower = searchText.value.toLowerCase();
     const textMatch = !searchText.value ||
-      task.title.toLowerCase().includes(searchLower) ||
+      task.task_name.toLowerCase().includes(searchLower) ||
       task.area.toLowerCase().includes(searchLower) ||
       task.assignee.toLowerCase().includes(searchLower);
 
@@ -241,7 +385,7 @@ const filteredTableData = computed(() => {
     if (dateRange.value[0] && dateRange.value[1]) {
       const startDate = new Date(dateRange.value[0]);
       const endDate = new Date(dateRange.value[1]);
-      const taskDate = new Date(task.startTime);
+      const taskDate = new Date(task.start_time);
       dateMatch = taskDate >= startDate && taskDate <= endDate;
     }
 
@@ -249,12 +393,56 @@ const filteredTableData = computed(() => {
   });
 });
 
-// 重置筛选条件
-const resetFilters = () => {
-  searchText.value = "";
-  statusFilter.value = [];
-  priorityFilter.value = [];
-  dateRange.value = ['', ''];
+// 分页相关
+const currentPage = ref(1);
+const pageSize = ref(10);
+const total = ref(0);
+
+// 添加是否显示分页的计算属性
+const showPagination = computed(() => {
+  return total.value > pageSize.value;
+});
+
+// 处理分页变化
+const handlePageChange = (page) => {
+  currentPage.value = page;
+  getList();
+};
+
+const handleSizeChange = (size) => {
+  pageSize.value = size;
+  currentPage.value = 1;
+  getList();
+};
+
+// 修改状态文本映射函数
+const getStatusText = (status) => {
+  const statusMap = {
+    0: '待执行',
+    1: '执行中',
+    2: '已完成',
+    3: '已取消'
+  }
+  return statusMap[status] || '未知'
+}
+
+// 根据用户ID获取用户名
+const getUserNames = (ids) => {
+  if (!Array.isArray(ids) || ids.length === 0) return '-';
+  if (!Array.isArray(userList.value)) {
+    console.warn('用户列表不是数组:', userList.value);
+    return `${ids.length}人`;
+  }
+
+  try {
+    return ids.map(id => {
+      const user = userList.value.find(u => u.id === id);
+      return user ? (user.real_name || user.username || `用户${id}`) : `未知用户(${id})`;
+    }).join(', ');
+  } catch (error) {
+    console.error('转换用户名出错:', error);
+    return `${ids.length}人`;
+  }
 };
 </script>
 
@@ -283,7 +471,7 @@ const resetFilters = () => {
             </div>
           </template>
           <div class="statistics-content">
-            <span class="number success">{{ statistics.statusCount.进行中 }}</span>
+            <span class="number success">{{ statistics.statusCount.执行中 }}</span>
             <span class="label">个任务</span>
           </div>
         </el-card>
@@ -296,7 +484,7 @@ const resetFilters = () => {
             </div>
           </template>
           <div class="statistics-content">
-            <span class="number info">{{ statistics.statusCount.待开始 }}</span>
+            <span class="number info">{{ statistics.statusCount.待执行 }}</span>
             <span class="label">个任务</span>
           </div>
         </el-card>
@@ -338,10 +526,10 @@ const resetFilters = () => {
             style="width: 200px; margin-left: 16px"
             clearable
           >
-            <el-option label="进行中" value="进行中" />
-            <el-option label="待开始" value="待开始" />
-            <el-option label="已完成" value="已完成" />
-            <el-option label="已取消" value="已取消" />
+            <el-option label="待执行" :value="0" />
+            <el-option label="执行中" :value="1" />
+            <el-option label="已完成" :value="2" />
+            <el-option label="已取消" :value="3" />
           </el-select>
           <el-select
             v-model="priorityFilter"
@@ -351,9 +539,9 @@ const resetFilters = () => {
             style="width: 200px; margin-left: 16px"
             clearable
           >
-            <el-option label="高" value="高" />
-            <el-option label="中" value="中" />
-            <el-option label="低" value="低" />
+            <el-option label="高" :value="1" />
+            <el-option label="中" :value="2" />
+            <el-option label="低" :value="3" />
           </el-select>
           <el-date-picker
             v-model="dateRange"
@@ -370,103 +558,208 @@ const resetFilters = () => {
         </div>
       </div>
 
-      <!-- 更新表格数据源 -->
-      <el-table :data="filteredTableData" style="width: 100%; margin-top: 20px">
-        <el-table-column prop="lan_id" label="巡护计划ID" width="100" />
-        <el-table-column prop="task_name" label="任务名称" min-width="150" />
-        <el-table-column prop="task_type" label="任务类型" min-width="150" />
-        <el-table-column prop="patrol_date" label="任务巡护日" min-width="150" />
-        <el-table-column prop="start_time" label="开始时间" min-width="150" />
-        <el-table-column prop="end_time" label="结束时间" min-width="150" />
-        <el-table-column prop="executor_ids" label="执行人ID列表" min-width="120" />
-        <el-table-column prop="status" label="状态" width="100">
+      <!-- 巡护任务列表 -->
+      <el-table
+        v-loading="loading"
+        :data="tableData"
+        style="width: 100%"
+      >
+        <el-table-column type="index" label="序号" width="60" align="center" />
+        <el-table-column prop="plan_id" label="计划ID" width="90" align="center">
+          <template #default="{ row }">
+            <el-tooltip
+              :content="`计划名称: ${row.plan_name || '-'}\n计划类型: ${row.plan_type === 'daily' ? '日常计划' : '专项计划'}`"
+              placement="top"
+            >
+              <span>{{ row.plan_id }}</span>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+        <el-table-column prop="task_name" label="任务名称" min-width="150" show-overflow-tooltip />
+        <el-table-column prop="task_type" label="任务类型" width="100" align="center">
+          <template #default="{ row }">
+            <el-tag :type="row.task_type === 'regular' ? 'success' : 'danger'">
+              {{ row.task_type === 'regular' ? '常规' : '紧急' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="patrol_date" label="巡护日期" width="100" align="center">
+          <template #default="{ row }">
+            {{ formatDateTime(row.patrol_date, 'YYYY-MM-DD') }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="start_time" label="开始时间" width="100" align="center" />
+        <el-table-column prop="end_time" label="结束时间" width="100" align="center" />
+        <el-table-column prop="executor_ids" label="执行人" width="100" align="center">
+          <template #default="{ row }">
+            <el-tooltip
+              :content="getUserNames(row.executor_ids)"
+              placement="top"
+            >
+              <span>{{ Array.isArray(row.executor_ids) ? `${row.executor_ids.length}人` : '-' }}</span>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+        <el-table-column prop="description" label="任务描述" min-width="150" show-overflow-tooltip />
+        <el-table-column prop="priority" label="优先级" width="80" align="center">
+          <template #default="{ row }">
+            <el-tag :type="row.priority === 1 ? 'danger' : row.priority === 2 ? 'warning' : 'info'">
+              {{ row.priority === 1 ? '高' : row.priority === 2 ? '中' : '低' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="status" label="状态" width="90" align="center">
           <template #default="{ row }">
             <el-tag :type="getStatusType(row.status)">
-              {{ row.status }}
+              {{ getStatusText(row.status) }}
             </el-tag>
           </template>
         </el-table-column>
-        <el-table-column prop="priority" label="优先级" width="100">
+        <el-table-column prop="created_at" label="创建时间" width="160" align="center">
           <template #default="{ row }">
-            <el-tag :type="getPriorityType(row.priority)">
-              {{ row.priority }}
-            </el-tag>
+            {{ formatDateTime(row.created_at) }}
           </template>
         </el-table-column>
-        <el-table-column label="操作" width="200" fixed="right">
+        <el-table-column label="操作" width="180" fixed="right" align="center">
           <template #default="{ row }">
-            <el-button type="primary" size="small" @click="handleView(row)">
-              查看
-            </el-button>
+            <el-button type="primary" link @click="handleView(row)">查看</el-button>
             <el-button
-              type="success"
-              size="small"
-              :disabled="row.status !== '进行中'"
-              @click="handleComplete(row)"
-            >
-              完成
-            </el-button>
+              v-if="row.status === 0"
+              type="primary"
+              link
+              @click="handleEdit(row)"
+            >编辑</el-button>
             <el-button
+              v-if="row.status === 0"
               type="danger"
-              size="small"
-              :disabled="row.status === '已完成' || row.status === '已取消'"
+              link
               @click="handleCancel(row)"
-            >
-              取消
-            </el-button>
+            >取消</el-button>
           </template>
         </el-table-column>
       </el-table>
     </el-card>
 
-    <!-- 添加任务详情弹窗 -->
-    <el-dialog v-model="detailDialogVisible" title="任务详情" width="700px">
-      <template v-if="currentTask">
-        <el-descriptions :column="2" border>
-          <el-descriptions-item label="任务名称" :span="2">
-            {{ currentTask.title }}
-          </el-descriptions-item>
-          <el-descriptions-item label="巡护区域">
-            {{ currentTask.area }}
-          </el-descriptions-item>
-          <el-descriptions-item label="负责人">
-            {{ currentTask.assignee }}
-          </el-descriptions-item>
-          <el-descriptions-item label="任务状态">
-            <el-tag :type="getStatusType(currentTask.status)">
-              {{ currentTask.status }}
-            </el-tag>
-          </el-descriptions-item>
-          <el-descriptions-item label="优先级">
-            <el-tag :type="getPriorityType(currentTask.priority)">
-              {{ currentTask.priority }}
-            </el-tag>
-          </el-descriptions-item>
-          <el-descriptions-item label="执行时间" :span="2">
-            {{ currentTask.startTime }} 至 {{ currentTask.endTime }}
-          </el-descriptions-item>
-        </el-descriptions>
+    <!-- 修改任务详情弹窗 -->
+    <el-dialog
+      v-model="detailDialogVisible"
+      title="任务详情"
+      width="900px"
+      destroy-on-close
+    >
+      <div class="task-detail">
+        <div class="detail-section">
+          <div class="section-title">计划信息</div>
+          <div class="detail-row">
+            <div class="detail-item full-width">
+              <div class="plan-info">
+                <el-descriptions :column="2" border>
+                  <el-descriptions-item label="任务名称" :span="2">
+                    {{ currentTask.task_name }}
+                  </el-descriptions-item>
+                  <el-descriptions-item label="计划信息" :span="2">
+                    <div class="plan-info">
+                      <div class="plan-item">
+                        <span class="label">计划ID：</span>
+                        <span class="value">{{ currentTask.plan_id }}</span>
+                      </div>
+                      <div class="plan-item">
+                        <span class="label">计划类型：</span>
+                        <el-tag size="small" :type="currentTask.plan_type === 1 ? 'success' : 'warning'">
+                          {{ currentTask.plan_type === 1 ? '日常计划' : '专项计划' }}
+                        </el-tag>
+                      </div>
+                      <div class="plan-item plan-name">
+                        <span class="label">计划名称：</span>
+                        <span class="value">{{ currentTask.plan_name }}</span>
+                      </div>
+                    </div>
+                  </el-descriptions-item>
+                </el-descriptions>
+              </div>
+            </div>
+          </div>
+        </div>
 
-        <!-- 添加任务进度时间线 -->
-        <div class="timeline-container">
-          <h4>任务进度</h4>
+        <div class="detail-section">
+          <div class="section-title">任务信息</div>
+          <div class="detail-row">
+            <div class="detail-item">
+              <strong>任务类型：</strong>
+              <span>{{ currentTask?.task_type === 1 ? '常规任务' : '紧急任务' }}</span>
+            </div>
+          </div>
+          <div class="detail-row">
+            <div class="detail-item">
+              <strong>巡护日期：</strong>
+              <span>{{ formatDateTime(currentTask?.patrol_date, 'YYYY-MM-DD') }}</span>
+            </div>
+            <div class="detail-item">
+              <strong>执行时间：</strong>
+              <span>{{ currentTask?.start_time }} - {{ currentTask?.end_time }}</span>
+            </div>
+          </div>
+          <div class="detail-row">
+            <div class="detail-item">
+              <strong>执行人员：</strong>
+              <span>{{ getUserNames(currentTask?.executor_ids) }}</span>
+            </div>
+            <div class="detail-item">
+              <strong>优先级：</strong>
+              <span>
+                <el-tag :type="currentTask?.priority === 1 ? 'danger' : currentTask?.priority === 2 ? 'warning' : 'info'">
+                  {{ currentTask?.priority === 1 ? '高' : currentTask?.priority === 2 ? '中' : '低' }}
+                </el-tag>
+              </span>
+            </div>
+          </div>
+          <div class="detail-row">
+            <div class="detail-item full-width">
+              <strong>任务描述：</strong>
+              <span>{{ currentTask?.description || '无' }}</span>
+            </div>
+          </div>
+          <div class="detail-row">
+            <div class="detail-item">
+              <strong>创建时间：</strong>
+              <span>{{ formatDateTime(currentTask?.created_at) }}</span>
+            </div>
+            <div class="detail-item">
+              <strong>更新时间：</strong>
+              <span>{{ formatDateTime(currentTask?.updated_at) }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="detail-section">
+          <div class="section-title">任务进度</div>
           <el-timeline>
             <el-timeline-item
-              v-for="(activity, index) in taskTimeline"
+              v-for="(activity, index) in getTaskTimeline(currentTask)"
               :key="index"
               :type="activity.type"
+              :color="activity.color"
               :timestamp="activity.timestamp"
             >
               {{ activity.content }}
             </el-timeline-item>
           </el-timeline>
         </div>
-      </template>
-      <template #footer>
-        <span class="dialog-footer">
-          <el-button @click="detailDialogVisible = false">关闭</el-button>
-        </span>
-      </template>
+
+        <div class="detail-section">
+          <div class="section-title">巡护路线</div>
+          <div v-if="currentTask.route_points?.length" class="route-points">
+            <div v-for="point in currentTask.route_points" :key="point.index" class="route-point">
+              <div class="point-title">点位{{ point.index }}:</div>
+              <div class="point-coords">经度{{ point.longitude }}, 纬度{{ point.latitude }}</div>
+              <div v-if="point.address" class="point-address">
+                <el-tag size="small" type="info">{{ point.address }}</el-tag>
+              </div>
+            </div>
+          </div>
+          <span v-else>暂无路线信息</span>
+        </div>
+      </div>
     </el-dialog>
 
     <!-- 修改新建任务弹窗，添加表单验证 -->
@@ -477,42 +770,84 @@ const resetFilters = () => {
       @close="handleDialogClose"
     >
       <el-form ref="newTaskFormRef" :model="newTaskForm" :rules="rules" label-width="100px">
-        <el-form-item label="任务名称">
-          <el-input v-model="newTaskForm.title" placeholder="请输入任务名称" />
+        <el-form-item label="关联计划" prop="plan_id">
+          <el-input v-model="newTaskForm.plan_id" placeholder="请输入计划ID" type="number" />
         </el-form-item>
-        <el-form-item label="巡护区域">
-          <el-input v-model="newTaskForm.area" placeholder="请输入巡护区域" />
+        <el-form-item label="任务名称" prop="task_name">
+          <el-input v-model="newTaskForm.task_name" placeholder="请输入任务名称" maxlength="100" show-word-limit />
         </el-form-item>
-        <el-form-item label="负责人">
-          <el-input v-model="newTaskForm.assignee" placeholder="请输入负责人" />
-        </el-form-item>
-        <el-form-item label="优先级">
-          <el-radio-group v-model="newTaskForm.priority">
-            <el-radio label="高">高</el-radio>
-            <el-radio label="中">中</el-radio>
-            <el-radio label="低">低</el-radio>
+        <el-form-item label="任务类型" prop="task_type">
+          <el-radio-group v-model="newTaskForm.task_type">
+            <el-radio :value="'regular'" label="常规">常规</el-radio>
+            <el-radio :value="'emergency'" label="紧急">紧急</el-radio>
           </el-radio-group>
         </el-form-item>
-        <el-form-item label="执行时间">
+        <el-form-item label="巡护日期" prop="patrol_date">
           <el-date-picker
-            v-model="newTaskForm.startTime"
-            type="datetime"
-            placeholder="开始时间"
-            style="width: 200px; margin-right: 10px"
-          />
-          <el-date-picker
-            v-model="newTaskForm.endTime"
-            type="datetime"
-            placeholder="结束时间"
-            style="width: 200px"
+            v-model="newTaskForm.patrol_date"
+            type="date"
+            placeholder="选择巡护日期"
+            value-format="YYYY-MM-DD"
+            style="width: 100%"
           />
         </el-form-item>
-        <el-form-item label="任务描述">
+        <el-form-item label="执行时间" required>
+          <el-col :span="11">
+            <el-form-item prop="start_time">
+              <el-time-picker
+                v-model="newTaskForm.start_time"
+                placeholder="开始时间"
+                format="HH:mm"
+                value-format="HH:mm"
+                style="width: 100%"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="2" class="text-center">
+            <span class="text-gray-500">-</span>
+          </el-col>
+          <el-col :span="11">
+            <el-form-item prop="end_time">
+              <el-time-picker
+                v-model="newTaskForm.end_time"
+                placeholder="结束时间"
+                format="HH:mm"
+                value-format="HH:mm"
+                style="width: 100%"
+              />
+            </el-form-item>
+          </el-col>
+        </el-form-item>
+        <el-form-item label="执行人" prop="executor_ids">
+          <el-select
+            v-model="newTaskForm.executor_ids"
+            multiple
+            placeholder="请选择执行人"
+            style="width: 100%"
+          >
+            <el-option
+              v-for="user in userList"
+              :key="user.id"
+              :label="user.real_name || user.username"
+              :value="user.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="优先级" prop="priority">
+          <el-radio-group v-model="newTaskForm.priority">
+            <el-radio :value="1" label="高">高</el-radio>
+            <el-radio :value="2" label="中">中</el-radio>
+            <el-radio :value="3" label="低">低</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="任务描述" prop="description">
           <el-input
             v-model="newTaskForm.description"
             type="textarea"
-            rows="4"
+            :rows="4"
             placeholder="请输入任务描述"
+            maxlength="1000"
+            show-word-limit
           />
         </el-form-item>
       </el-form>
@@ -523,6 +858,19 @@ const resetFilters = () => {
         </span>
       </template>
     </el-dialog>
+
+    <!-- 修改分页组件的条件渲染 -->
+    <div v-if="showPagination" class="pagination-container">
+      <el-pagination
+        v-model:current-page="currentPage"
+        v-model:page-size="pageSize"
+        :page-sizes="[10, 20, 50, 100]"
+        :total="total"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="handleSizeChange"
+        @current-change="handlePageChange"
+      />
+    </div>
   </div>
 </template>
 
@@ -723,4 +1071,140 @@ const resetFilters = () => {
 .mt-20 {
   margin-top: 20px;
 }
+
+.pagination-container {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.task-detail {
+  .detail-section {
+    margin-bottom: 24px;
+    padding: 16px;
+    background-color: #f8f9fa;
+    border-radius: 8px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    .section-title {
+      font-size: 16px;
+      font-weight: 500;
+      color: #303133;
+      margin-bottom: 16px;
+      padding-left: 8px;
+      border-left: 4px solid var(--el-color-primary);
+    }
+
+    .plan-info {
+      width: 100%;
+      :deep(.el-descriptions) {
+        padding: 8px;
+        .el-descriptions__label {
+          width: 120px;
+          justify-content: flex-end;
+          color: #606266;
+        }
+        .el-descriptions__content {
+          color: #303133;
+        }
+      }
+    }
+  }
+
+  .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 {
+        width: 100px;
+        margin-right: 8px;
+        color: #606266;
+        text-align: right;
+      }
+
+      span {
+        flex: 1;
+        line-height: 1.5;
+      }
+    }
+  }
+}
+
+.plan-info {
+  padding: 8px 0;
+
+  .plan-item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 8px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    &.plan-name {
+      .value {
+        flex: 1;
+        word-break: break-all;
+      }
+    }
+
+    .label {
+      min-width: 80px;
+      color: #606266;
+    }
+
+    .value {
+      color: #303133;
+      font-weight: 500;
+    }
+  }
+}
+
+.route-points {
+  .route-point {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 8px;
+    padding: 8px;
+    background-color: #f8f9fa;
+    border-radius: 4px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    .point-title {
+      font-weight: 500;
+      min-width: 60px;
+      color: #606266;
+    }
+
+    .point-coords {
+      color: #606266;
+      margin-right: auto;
+    }
+
+    .point-address {
+      flex-shrink: 0;
+    }
+  }
+}
 </style>