diff --git a/.eslintrc-auto-import.json b/.eslintrc-auto-import.json
index cb7058a..d1b1c9e 100644
--- a/.eslintrc-auto-import.json
+++ b/.eslintrc-auto-import.json
@@ -17,6 +17,8 @@
     "MaybeRefOrGetter": true,
     "PropType": true,
     "Ref": true,
+    "Slot": true,
+    "Slots": true,
     "VNode": true,
     "WritableComputedRef": true,
     "acceptHMRUpdate": true,
@@ -35,6 +37,7 @@
     "createInjectionState": true,
     "createPinia": true,
     "createReactiveFn": true,
+    "createRef": true,
     "createReusableTemplate": true,
     "createSharedComposable": true,
     "createTemplatePromise": true,
@@ -315,9 +318,6 @@
     "watchThrottled": true,
     "watchTriggerable": true,
     "watchWithFilter": true,
-    "whenever": true,
-    "Slot": true,
-    "Slots": true,
-    "createRef": true
+    "whenever": true
   }
 }
diff --git a/src/api/zhinengxunjian/baoxiou/index.ts b/src/api/zhinengxunjian/baoxiou/index.ts
new file mode 100644
index 0000000..4c0c107
--- /dev/null
+++ b/src/api/zhinengxunjian/baoxiou/index.ts
@@ -0,0 +1,49 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+//查询列表
+export const baoxiulist = (query) => {
+  return request({
+    url: '/ops/report/list',
+    method: 'get',
+    params: query
+  });
+};
+//新增待办事项
+export const addbaoxiu = (data) => {
+  return request({
+    url: '/ops/report',
+    method: 'post',
+    data: data
+  });
+};
+//修改待办事项
+export const updatebaoxiu = (data) => {
+  return request({
+    url: '/ops/report',
+    method: 'put',
+    data: data
+  });
+};
+//删除待办事项
+
+export function delbaoxiu(ids) {
+  return request({
+    url: `/ops/report/${ids}`, // 拼接ids作为路径参数
+    method: 'delete'
+  });
+}
+
+export const baoxiuDetail = (id) => {
+  return request({
+    url: `/ops/report/${id}`,
+    method: 'get'
+  });
+};
+
+export const uploadbaoxiu = (data) => {
+  return request({
+    url: '/resource/oss/upload',
+    method: 'post',
+    data: data
+  });
+};
diff --git a/src/api/zhinengxunjian/daiban/index.ts b/src/api/zhinengxunjian/daiban/index.ts
new file mode 100644
index 0000000..195e3b1
--- /dev/null
+++ b/src/api/zhinengxunjian/daiban/index.ts
@@ -0,0 +1,34 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+//查询列表
+export const daibanlist = (query) => {
+  return request({
+    url: '/ops/matter/list',
+    method: 'get',
+    params: query
+  });
+};
+//新增待办事项
+export const adddaiban = (data) => {
+  return request({
+    url: '/ops/matter',
+    method: 'post',
+    data: data
+  });
+};
+//修改待办事项
+export const updatedaiban = (data) => {
+  return request({
+    url: '/ops/matter',
+    method: 'put',
+    data: data
+  });
+};
+//删除待办事项
+
+export function deldaiban(ids) {
+  return request({
+    url: `/ops/matter/${ids}`, // 拼接ids作为路径参数
+    method: 'delete'
+  });
+}
diff --git a/src/api/zhinengxunjian/inspection/item/index.ts b/src/api/zhinengxunjian/inspection/item/index.ts
new file mode 100644
index 0000000..29fd448
--- /dev/null
+++ b/src/api/zhinengxunjian/inspection/item/index.ts
@@ -0,0 +1,63 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+import { ItemVO, ItemForm, ItemQuery } from '@/api/zhinengxunjian/inspection/item/types';
+
+/**
+ * 查询运维-巡检-自定义巡检项列表
+ * @param query
+ * @returns {*}
+ */
+
+export const listItem = (query?: ItemQuery): AxiosPromise<ItemVO[]> => {
+  return request({
+    url: '/ops/item/list',
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 查询运维-巡检-自定义巡检项详细
+ * @param id
+ */
+export const getItem = (id: string | number): AxiosPromise<ItemVO> => {
+  return request({
+    url: '/ops/item/' + id,
+    method: 'get'
+  });
+};
+
+/**
+ * 新增运维-巡检-自定义巡检项
+ * @param data
+ */
+export const addItem = (data: ItemForm) => {
+  return request({
+    url: '/ops/item',
+    method: 'post',
+    data: data
+  });
+};
+
+/**
+ * 修改运维-巡检-自定义巡检项
+ * @param data
+ */
+export const updateItem = (data: ItemForm) => {
+  return request({
+    url: '/ops/item',
+    method: 'put',
+    data: data
+  });
+};
+
+/**
+ * 删除运维-巡检-自定义巡检项
+ * @param id
+ */
+export const delItem = (id: string | number | Array<string | number>) => {
+  return request({
+    url: '/ops/item/' + id,
+    method: 'delete'
+  });
+};
diff --git a/src/api/zhinengxunjian/inspection/item/types.ts b/src/api/zhinengxunjian/inspection/item/types.ts
new file mode 100644
index 0000000..9d6ec6e
--- /dev/null
+++ b/src/api/zhinengxunjian/inspection/item/types.ts
@@ -0,0 +1,46 @@
+export interface ItemVO {
+  /**
+   *
+   */
+  id: string | number;
+
+  /**
+   * 自定义巡检项名称
+   */
+  name: string;
+
+  /**
+   * 业务id，巡检计划1
+   */
+  type: string;
+}
+
+export interface ItemForm extends BaseEntity {
+  /**
+   * 自定义巡检项名称
+   */
+  name?: string;
+
+  /**
+   * 业务id，巡检计划1
+   */
+  type?: string;
+  projectId?: number;
+}
+
+export interface ItemQuery extends PageQuery {
+  /**
+   * 自定义巡检项名称
+   */
+  name?: string;
+
+  /**
+   * 业务id，巡检计划1
+   */
+  type?: string;
+
+  /**
+   * 日期范围参数
+   */
+  params?: any;
+}
diff --git a/src/api/zhinengxunjian/shiyan/index.ts b/src/api/zhinengxunjian/shiyan/index.ts
new file mode 100644
index 0000000..9609a00
--- /dev/null
+++ b/src/api/zhinengxunjian/shiyan/index.ts
@@ -0,0 +1,49 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+//查询列表
+export const shiyanlist = (query) => {
+  return request({
+    url: '/ops/testPlan/list',
+    method: 'get',
+    params: query
+  });
+};
+//新增
+export const addshiyan = (data) => {
+  return request({
+    url: '/ops/testPlan',
+    method: 'post',
+    data: data
+  });
+};
+//修改
+export const updateshiyan = (data) => {
+  return request({
+    url: '/ops/testPlan',
+    method: 'put',
+    data: data
+  });
+};
+//删除
+export const delshiyan = (ids) => {
+  return request({
+    url: `/ops/testPlan${ids}`,
+    method: 'delete'
+  });
+};
+//查询人员
+export const shiyanUserlist = (query) => {
+  return request({
+    url: '/ops/constructionUser/list',
+    method: 'get',
+    params: query
+  });
+};
+
+//详情
+export const shiyanDetail = (id) => {
+  return request({
+    url: `/ops/testPlan/${id}`,
+    method: 'get'
+  });
+};
diff --git a/src/api/zhinengxunjian/shiyan/renwu.ts b/src/api/zhinengxunjian/shiyan/renwu.ts
new file mode 100644
index 0000000..bb49cb1
--- /dev/null
+++ b/src/api/zhinengxunjian/shiyan/renwu.ts
@@ -0,0 +1,41 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+//查询列表
+export const syrenwulist = (query) => {
+  return request({
+    url: '/ops/testTask/list',
+    method: 'get',
+    params: query
+  });
+};
+//新增
+export const addsyrenwu = (data) => {
+  return request({
+    url: '/ops/testTask',
+    method: 'post',
+    data: data
+  });
+};
+//修改
+export const updatesyrenwu = (data) => {
+  return request({
+    url: '/ops/testTask',
+    method: 'put',
+    data: data
+  });
+};
+//删除
+export const delsyrenwu = (ids) => {
+  return request({
+    url: `/ops/testTask${ids}`,
+    method: 'delete'
+  });
+};
+
+//详情
+export const syrenwuDetail = (id) => {
+  return request({
+    url: `/ops/testTask/${id}`,
+    method: 'get'
+  });
+};
diff --git a/src/api/zhinengxunjian/xunjian/index.ts b/src/api/zhinengxunjian/xunjian/index.ts
new file mode 100644
index 0000000..353b0bb
--- /dev/null
+++ b/src/api/zhinengxunjian/xunjian/index.ts
@@ -0,0 +1,56 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+//查询列表
+export const xunjianlist = (query) => {
+  return request({
+    url: '/ops/plan/list',
+    method: 'get',
+    params: query
+  });
+};
+//新增
+export const addxunjian = (data) => {
+  return request({
+    url: '/ops/plan',
+    method: 'post',
+    data: data
+  });
+};
+//修改
+export const updatexunjian = (data) => {
+  return request({
+    url: '/ops/plan',
+    method: 'put',
+    data: data
+  });
+};
+//删除
+export const delxunjian = (ids) => {
+  return request({
+    url: `/ops/plan/${ids}`,
+    method: 'delete'
+  });
+};
+//查询人员
+export const xunjianUserlist = (query) => {
+  return request({
+    url: '/ops/constructionUser/list',
+    method: 'get',
+    params: query
+  });
+};
+//查询巡检项
+export const xunjianItemlist = (query) => {
+  return request({
+    url: '/ops/item/list',
+    method: 'get',
+    params: query
+  });
+};
+//详情
+export const xunjianDetail = (id) => {
+  return request({
+    url: `/ops/plan/${id}`,
+    method: 'get'
+  });
+};
diff --git a/src/api/zhinengxunjian/xunjian/jilu.ts b/src/api/zhinengxunjian/xunjian/jilu.ts
new file mode 100644
index 0000000..34f3b19
--- /dev/null
+++ b/src/api/zhinengxunjian/xunjian/jilu.ts
@@ -0,0 +1,10 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+//查询列表
+export const xunjianjilu = (query) => {
+  return request({
+    url: '/ops/task/record',
+    method: 'get',
+    params: query
+  });
+};
diff --git a/src/api/zhinengxunjian/xunjian/renwu.ts b/src/api/zhinengxunjian/xunjian/renwu.ts
new file mode 100644
index 0000000..5919b8f
--- /dev/null
+++ b/src/api/zhinengxunjian/xunjian/renwu.ts
@@ -0,0 +1,46 @@
+import request from '@/utils/request';
+export const xjrenwulist = (query) => {
+  return request({
+    url: '/ops/task/list',
+    method: 'get',
+    params: query
+  });
+};
+//新增
+export const addxjrenwu = (data) => {
+  return request({
+    url: '/ops/task',
+    method: 'post',
+    data: data
+  });
+};
+//修改
+export const updatexjrenwu = (data) => {
+  return request({
+    url: '/ops/task',
+    method: 'put',
+    data: data
+  });
+};
+//删除
+export const delxjrenwu = (ids) => {
+  return request({
+    url: `/ops/task/${ids}`,
+    method: 'delete'
+  });
+};
+//详情
+export const xjrenwuDetail = (id) => {
+  return request({
+    url: `/ops/task/${id}`,
+    method: 'get'
+  });
+};
+//导出
+export const xjrenwuExport = (data) => {
+  return request({
+    url: '/ops/task/export',
+    method: 'post',
+    data: data
+  });
+};
diff --git a/src/views/inspection/item/index.vue b/src/views/inspection/item/index.vue
new file mode 100644
index 0000000..d0ada56
--- /dev/null
+++ b/src/views/inspection/item/index.vue
@@ -0,0 +1,225 @@
+<template>
+  <div class="p-2">
+    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
+      <div v-show="showSearch" class="mb-[10px]">
+        <el-card shadow="hover">
+          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+            <el-form-item label="自定义巡检项名称" prop="name">
+              <el-input v-model="queryParams.name" placeholder="请输入自定义巡检项名称" clearable @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+            </el-form-item>
+          </el-form>
+        </el-card>
+      </div>
+    </transition>
+
+    <el-card shadow="never">
+      <template #header>
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="1.5">
+            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['inspection:item:add']">新增</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['inspection:item:edit']"
+              >修改</el-button
+            >
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['inspection:item:remove']"
+              >删除</el-button
+            >
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['inspection:item:export']">导出</el-button>
+          </el-col>
+          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+        </el-row>
+      </template>
+
+      <el-table v-loading="loading" border :data="itemList" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column label="" align="center" prop="id" v-if="true" />
+        <el-table-column label="自定义巡检项名称" align="center" prop="name" />
+        <el-table-column label="业务id，巡检计划1" align="center" prop="type" />
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+          <template #default="scope">
+            <el-tooltip content="修改" placement="top">
+              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['inspection:item:edit']"></el-button>
+            </el-tooltip>
+            <el-tooltip content="删除" placement="top">
+              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['inspection:item:remove']"></el-button>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+    </el-card>
+    <!-- 添加或修改运维-巡检-自定义巡检项对话框 -->
+    <el-dialog :title="dialog.title" v-model="dialog.visible" width="650px" append-to-body>
+      <el-form ref="itemFormRef" :model="form" :rules="rules" label-width="135px">
+        <el-form-item label="自定义巡检项名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入自定义巡检项名称" />
+        </el-form-item>
+        <el-form-item label="类型" prop="type">
+          <el-select v-model="form.type" placeholder="请选择类型">
+            <el-option label="巡检管理" value="1" />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="Item" lang="ts">
+import { listItem, getItem, delItem, addItem, updateItem } from '@/api/zhinengxunjian/inspection/item/index';
+import { ItemVO, ItemQuery, ItemForm } from '@/api/zhinengxunjian/inspection/item/types';
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+const itemList = ref<ItemVO[]>([]);
+const buttonLoading = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref<Array<string | number>>([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+
+const queryFormRef = ref<ElFormInstance>();
+const itemFormRef = ref<ElFormInstance>();
+
+const dialog = reactive<DialogOption>({
+  visible: false,
+  title: ''
+});
+
+const initFormData: ItemForm = {
+  name: undefined,
+  type: '1',
+  projectId: 1
+};
+const data = reactive<PageData<ItemForm, ItemQuery>>({
+  form: { ...initFormData },
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    name: undefined,
+    type: undefined,
+    params: {}
+  },
+  rules: {
+    name: [{ required: true, message: '自定义巡检项名称不能为空', trigger: 'blur' }],
+    type: [{ required: true, message: '业务id，巡检计划1不能为空', trigger: 'change' }]
+  }
+});
+
+const { queryParams, form, rules } = toRefs(data);
+
+/** 查询运维-巡检-自定义巡检项列表 */
+const getList = async () => {
+  loading.value = true;
+  const res = await listItem(queryParams.value);
+  itemList.value = res.rows;
+  total.value = res.total;
+  loading.value = false;
+};
+
+/** 取消按钮 */
+const cancel = () => {
+  reset();
+  dialog.visible = false;
+};
+
+/** 表单重置 */
+const reset = () => {
+  form.value = { ...initFormData };
+  itemFormRef.value?.resetFields();
+};
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  getList();
+};
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields();
+  handleQuery();
+};
+
+/** 多选框选中数据 */
+const handleSelectionChange = (selection: ItemVO[]) => {
+  ids.value = selection.map((item) => item.id);
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+};
+
+/** 新增按钮操作 */
+const handleAdd = () => {
+  reset();
+  dialog.visible = true;
+  dialog.title = '添加运维-巡检-自定义巡检项';
+};
+
+/** 修改按钮操作 */
+const handleUpdate = async (row?: ItemVO) => {
+  reset();
+  const _id = row?.id || ids.value[0];
+  const res = await getItem(_id);
+  Object.assign(form.value, res.data);
+  dialog.visible = true;
+  dialog.title = '修改运维-巡检-自定义巡检项';
+};
+
+/** 提交按钮 */
+const submitForm = () => {
+  itemFormRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      buttonLoading.value = true;
+      if (form.value.id) {
+        await updateItem(form.value).finally(() => (buttonLoading.value = false));
+      } else {
+        await addItem(form.value).finally(() => (buttonLoading.value = false));
+      }
+      proxy?.$modal.msgSuccess('操作成功');
+      dialog.visible = false;
+      await getList();
+    }
+  });
+};
+
+/** 删除按钮操作 */
+const handleDelete = async (row?: ItemVO) => {
+  const _ids = row?.id || ids.value;
+  await proxy?.$modal.confirm('是否确认删除运维-巡检-自定义巡检项编号为"' + _ids + '"的数据项？').finally(() => (loading.value = false));
+  await delItem(_ids);
+  proxy?.$modal.msgSuccess('删除成功');
+  await getList();
+};
+
+/** 导出按钮操作 */
+const handleExport = () => {
+  proxy?.download(
+    'inspection/item/export',
+    {
+      ...queryParams.value
+    },
+    `item_${new Date().getTime()}.xlsx`
+  );
+};
+
+onMounted(() => {
+  getList();
+});
+</script>
diff --git a/src/views/zhinengxunjian/InspectionManagement.vue b/src/views/zhinengxunjian/InspectionManagement.vue
index 3f43b3f..8ab639d 100644
--- a/src/views/zhinengxunjian/InspectionManagement.vue
+++ b/src/views/zhinengxunjian/InspectionManagement.vue
@@ -1,6 +1,7 @@
 <template>
   <div>
     <div class="operation-inspection">
+      <!-- 导航标签 -->
       <div class="navigation-tabs">
         <div class="nav-tab" @click="handleInspection1">待办事项</div>
         <div class="nav-tab active" @click="handleInspection2">巡检管理</div>
@@ -10,9 +11,8 @@
         <div class="nav-tab" @click="handleInspection6">工单管理</div>
         <div class="nav-tab" @click="handleInspection7">运维组织</div>
       </div>
-      <TitleComponent title="运维巡检管理" subtitle="制定巡检计划，安排巡检任务，跟进巡检记录"></TitleComponent>
 
-      <!-- 选项卡和按钮组合 -->
+      <!-- 子选项卡 -->
       <div class="tabs-wrapper">
         <div style="display: flex; align-items: center; gap: 10px">
           <el-button type="primary" @click="handleInspectionManagement1">巡检计划</el-button>
@@ -20,15 +20,15 @@
           <el-button type="primary" @click="handleInspectionManagement3">巡检记录</el-button>
         </div>
       </div>
+
       <!-- 筛选栏 -->
       <div class="filter-bar">
         <div class="filter-item">
           <el-select v-model="planType" placeholder="计划类型" clearable>
             <el-option label="全部类型" value="all"></el-option>
-            <el-option label="每日巡检" value="daily"></el-option>
-            <el-option label="每周巡检" value="weekly"></el-option>
-            <el-option label="每月巡检" value="monthly"></el-option>
-            <el-option label="每季度巡检" value="quarterly"></el-option>
+            <el-option label="每日巡检" value="1"></el-option>
+            <el-option label="每周巡检" value="2"></el-option>
+            <el-option label="每月巡检" value="3"></el-option>
           </el-select>
         </div>
         <div class="filter-item">
@@ -41,17 +41,18 @@
         <div class="filter-item">
           <el-select v-model="inspectionObject" placeholder="巡检对象" clearable>
             <el-option label="全部对象" value="all"></el-option>
-            <el-option label="服务器" value="server"></el-option>
-            <el-option label="网络设备" value="network"></el-option>
-            <el-option label="应用系统" value="application"></el-option>
-            <el-option label="基础设施" value="infrastructure"></el-option>
+            <el-option label="服务器" value="1"></el-option>
+            <el-option label="网络设备" value="2"></el-option>
+            <el-option label="应用系统" value="3"></el-option>
+            <el-option label="基础设施" value="4"></el-option>
           </el-select>
         </div>
         <div class="filter-actions">
-          <el-button type="primary" class="search-btn">搜索</el-button>
+          <el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
           <el-button type="primary" icon="el-icon-plus" class="create-btn" @click="handleCreate">手动创建计划</el-button>
         </div>
       </div>
+
       <!-- 表格 -->
       <div class="table-wrapper">
         <el-table :data="pagedTableData" stripe style="width: 100%" highlight-current-row class="custom-table">
@@ -73,10 +74,9 @@
               <el-button type="text" @click="handleDetail(scope.row)" class="action-btn">详情</el-button>
               <el-button
                 type="text"
-                :disabled="scope.row.status === 'disabled'"
                 @click="handleEnable(scope.row)"
                 class="action-btn"
-                :class="{ 'text-success': scope.row.status === 'disabled' }"
+                :class="{ 'text-success': scope.row.status === 'disabled', 'text-danger': scope.row.status === 'enabled' }"
               >
                 {{ scope.row.status === 'enabled' ? '停用' : '启用' }}
               </el-button>
@@ -84,7 +84,8 @@
           </el-table-column>
         </el-table>
       </div>
-      <!-- 分页区域 -->
+
+      <!-- 分页 -->
       <div class="pagination-section">
         <div class="pagination-info">
           显示第{{ (currentPage - 1) * pageSize + 1 }}到{{ Math.min(currentPage * pageSize, total) }}条，共有{{ total }}条记录
@@ -105,381 +106,845 @@
       </div>
     </div>
 
-    <!-- 创建计划弹窗 -->
-    <el-dialog v-model="dialogVisible" title="新建巡检计划" width="700px" class="create-plan-dialog" center :show-close="true">
-      <el-form :model="createForm" :rules="createFormRules" ref="createFormRef" label-width="150px" class="custom-form">
-        <el-form-item label="计划名称*" prop="planName" class="form-item-large">
-          <el-input v-model="createForm.planName" placeholder="请输入计划名称" class="custom-input" />
-        </el-form-item>
+    <!-- 创建/编辑计划弹窗 -->
+    <el-dialog
+      v-model="dialogVisible"
+      :title="dialogTitle"
+      width="800px"
+      class="create-plan-dialog"
+      center
+      :show-close="true"
+      @close="cancelCreatePlan"
+    >
+      <el-form :model="formData" :rules="createFormRules" ref="formRef" label-width="150px" class="custom-form">
+        <!-- 计划名称 -->
+        <el-row :gutter="20">
+          <el-col :span="24">
+            <el-form-item label="计划名称*" prop="planName">
+              <el-input v-model="formData.planName" placeholder="请输入计划名称" style="width: 100%" />
+            </el-form-item>
+          </el-col>
+        </el-row>
 
-        <div class="form-row">
-          <el-form-item label="计划类型*" prop="planType" class="form-item-half">
-            <el-select v-model="createForm.planType" placeholder="请选择计划类型" class="custom-select">
-              <el-option label="每日巡检" value="daily" />
-              <el-option label="每周巡检" value="weekly" />
-              <el-option label="每月巡检" value="monthly" />
-              <el-option label="每季度巡检" value="quarterly" />
-            </el-select>
-          </el-form-item>
+        <!-- 计划类型、巡检对象类型 -->
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="计划类型*" prop="planType">
+              <el-select v-model="formData.planType" placeholder="请选择计划类型" style="width: 100%">
+                <el-option label="每日巡检" value="1" />
+                <el-option label="每周巡检" value="2" />
+                <el-option label="每月巡检" value="3" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="巡检对象类型*" prop="objectType">
+              <el-select v-model="formData.objectType" placeholder="请选择对象类型" style="width: 100%">
+                <el-option label="服务器" value="1" />
+                <el-option label="网络设备" value="2" />
+                <el-option label="应用系统" value="3" />
+                <el-option label="基础设施" value="4" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
 
-          <el-form-item label="巡检对象类型*" prop="objectType" class="form-item-half">
-            <el-select v-model="createForm.objectType" placeholder="请选择对象类型" class="custom-select">
-              <el-option label="服务器" value="server" />
-              <el-option label="网络设备" value="network" />
-              <el-option label="应用系统" value="application" />
-              <el-option label="基础设施" value="infrastructure" />
-            </el-select>
-          </el-form-item>
-        </div>
+        <!-- 开始日期、结束日期 -->
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="开始日期*" prop="startDate">
+              <el-date-picker
+                v-model="formData.startDate"
+                type="date"
+                placeholder="选择日期"
+                format="YYYY-MM-DD"
+                value-format="YYYY-MM-DD"
+                style="width: 100%"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="结束日期*" prop="endDate">
+              <el-date-picker
+                v-model="formData.endDate"
+                type="date"
+                placeholder="选择日期"
+                format="YYYY-MM-DD"
+                value-format="YYYY-MM-DD"
+                style="width: 100%"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
 
-        <div class="form-row">
-          <el-form-item label="开始日期*" prop="startDate" class="form-item-half">
-            <el-date-picker
-              v-model="createForm.startDate"
-              type="date"
-              placeholder="选择日期"
-              format="YYYY-MM-DD"
-              value-format="YYYY-MM-DD"
-              class="custom-date-picker"
-            />
-          </el-form-item>
+        <!-- 巡检频率 -->
+        <el-row :gutter="20">
+          <el-col :span="24">
+            <el-form-item label="巡检频率*" prop="frequencyType" class="frequency-item">
+              <el-radio-group v-model="formData.frequencyType" @change="handleFrequencyChange">
+                <el-radio :label="'daily'" class="frequency-radio">每天</el-radio>
+                <el-radio :label="'weekly'" class="frequency-radio">每周</el-radio>
+                <el-radio :label="'monthly'" class="frequency-radio">每月</el-radio>
+              </el-radio-group>
 
-          <el-form-item label="结束日期*" prop="endDate" class="form-item-half">
-            <el-date-picker
-              v-model="createForm.endDate"
-              type="date"
-              placeholder="选择日期"
-              format="YYYY-MM-DD"
-              value-format="YYYY-MM-DD"
-              class="custom-date-picker"
-            />
-          </el-form-item>
-        </div>
-        <el-form-item label="巡检频率*" class="form-item-large">
-          <div style="display: flex; align-items: center; gap: 20px">
-            <el-radio-group v-model="createForm.frequencyType" class="frequency-radio-group">
-              <el-radio label="daily">每天</el-radio>
-              <el-radio label="weekly">每周</el-radio>
-              <el-radio label="monthly">每月</el-radio>
-            </el-radio-group>
+              <!-- 每周-选择周几 -->
+              <el-select
+                v-model="formData.weekDay"
+                placeholder="选择周几"
+                style="margin-left: 10px; width: 120px"
+                v-if="formData.frequencyType === 'weekly'"
+              >
+                <el-option label="周一" value="1"></el-option>
+                <el-option label="周二" value="2"></el-option>
+                <el-option label="周三" value="3"></el-option>
+                <el-option label="周四" value="4"></el-option>
+                <el-option label="周五" value="5"></el-option>
+                <el-option label="周六" value="6"></el-option>
+                <el-option label="周日" value="7"></el-option>
+              </el-select>
 
-            <!-- 每周选择框 - 变小并排在单选框后面 -->
-            <el-select
-              v-if="createForm.frequencyType === 'weekly'"
-              v-model="createForm.weekday"
-              placeholder="选择周几"
-              class="custom-select-small"
-              style="width: 100px"
-            >
-              <el-option label="周一" value="1" />
-              <el-option label="周二" value="2" />
-              <el-option label="周三" value="3" />
-              <el-option label="周四" value="4" />
-              <el-option label="周五" value="5" />
-              <el-option label="周六" value="6" />
-              <el-option label="周日" value="0" />
-            </el-select>
+              <!-- 每月-选择几号 -->
+              <el-select
+                v-model="formData.monthDay"
+                placeholder="选择几号"
+                style="margin-left: 10px; width: 120px"
+                v-if="formData.frequencyType === 'monthly'"
+              >
+                <el-option v-for="day in 31" :key="day" :label="`${day}号`" :value="day"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
 
-            <!-- 每月选择框 - 变小并排在单选框后面 -->
-            <el-select
-              v-if="createForm.frequencyType === 'monthly'"
-              v-model="createForm.monthday"
-              placeholder="选择几号"
-              class="custom-select-small"
-              style="width: 100px"
-            >
-              <template v-for="day in 31" :key="day">
-                <el-option :label="day + '号'" :value="day" />
-              </template>
-            </el-select>
-          </div>
-        </el-form-item>
+        <!-- 计划开始时间、持续时间 -->
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="计划开始时间*" prop="planBeginTime">
+              <el-time-picker v-model="formData.planBeginTime" placeholder="选择时间" format="HH:mm" value-format="HH:mm" style="width: 100%" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="持续时间(分钟)*" prop="duration">
+              <el-input v-model.number="formData.duration" placeholder="请输入持续时间" style="width: 100%" />
+            </el-form-item>
+          </el-col>
+        </el-row>
 
-        <div class="form-row" s>
-          <el-form-item label="计划开始时间*" prop="startTime" class="form-item-half">
-            <el-time-picker v-model="createForm.startTime" placeholder="选择时间" format="HH:mm" value-format="HH:mm" class="custom-time-picker" />
-          </el-form-item>
+        <!-- 负责人 -->
+        <el-row :gutter="20">
+          <el-col :span="24">
+            <el-form-item label="负责人*" prop="person">
+              <el-select v-model="formData.person" placeholder="请选择负责人" style="width: 100%">
+                <el-option v-for="user in userList" :key="user.value" :label="user.label" :value="user.value" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
 
-          <el-form-item label="预计时长(分钟)" class="form-item-half">
-            <el-input v-model.number="createForm.estimatedDuration" class="custom-input" />
-          </el-form-item>
-        </div>
+        <!-- 巡检项 -->
+        <el-row :gutter="20">
+          <el-col :span="24">
+            <el-form-item label="巡检项*" prop="inspectionItemId">
+              <div class="inspection-item-wrapper">
+                <el-checkbox-group v-model="formData.inspectionItemId" class="inspection-item-group">
+                  <el-checkbox
+                    v-for="item in inspectionItemList"
+                    :key="item.value"
+                    :label="item.value"
+                    style="margin-right: 20px; margin-bottom: 10px"
+                  >
+                    {{ item.label }}
+                  </el-checkbox>
+                </el-checkbox-group>
+                <el-button type="text" @click="handleAddInspectionItem">添加自定义检查项</el-button>
+              </div>
+            </el-form-item>
+          </el-col>
+        </el-row>
 
-        <el-form-item label="负责人*" prop="responsiblePerson" class="form-item-large">
-          <el-select v-model="createForm.responsiblePerson" placeholder="请选择负责人" class="custom-select">
-            <el-option label="张明" value="zhangming" />
-            <el-option label="李华" value="lihua" />
-            <el-option label="王强" value="wangqiang" />
-          </el-select>
-        </el-form-item>
+        <!-- 状态 -->
+        <el-row :gutter="20">
+          <el-col :span="24">
+            <el-form-item label="状态*" prop="status">
+              <el-select v-model="formData.status" placeholder="请选择状态" style="width: 100%">
+                <el-option label="启用" value="1" />
+                <el-option label="停用" value="2" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
 
-        <el-form-item label="巡检项*" class="form-item-large">
-          <el-checkbox-group v-model="createForm.inspectionItems" style="border: 0.1 solid black; padding: 5px">
-            <el-checkbox label="CPU使用率检查" />
-            <el-checkbox label="内存使用情况" />
-            <el-checkbox label="磁盘空间检查" />
-            <el-checkbox label="网络连接状态" />
-            <el-checkbox label="系统日志检查" />
-          </el-checkbox-group>
-        </el-form-item>
-
-        <el-form-item label="备注说明" prop="remarks" class="form-item-large">
-          <el-input v-model="createForm.remarks" type="textarea" placeholder="请输入备注" rows="3" class="custom-textarea" />
-        </el-form-item>
+        <!-- 备注说明 -->
+        <el-row :gutter="20">
+          <el-col :span="24">
+            <el-form-item label="备注说明" prop="remark">
+              <el-input v-model="formData.remark" type="textarea" placeholder="请输入备注" rows="3" style="width: 100%" />
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
 
       <template #footer>
         <span class="dialog-footer">
           <el-button @click="cancelCreatePlan">取消</el-button>
-          <el-button type="primary" @click="submitCreatePlan">新增任务</el-button>
+          <el-button type="primary" @click="submitForm">保存任务</el-button>
+        </span>
+      </template>
+    </el-dialog>
+
+    <!-- 新增巡检项弹窗 -->
+    <el-dialog :title="itemDialogTitle" v-model="itemDialogVisible" width="650px" center append-to-body>
+      <el-form :model="itemForm" :rules="itemFormRules" ref="itemFormRef" label-width="135px">
+        <el-form-item label="自定义巡检项名称" prop="name">
+          <el-input v-model="itemForm.name" placeholder="请输入自定义巡检项名称" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="cancelAddItem">取消</el-button>
+          <el-button type="primary" @click="submitAddItem">确定</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <!-- 详情弹窗 -->
+    <el-dialog
+      v-model="detailDialogVisible"
+      title="巡检计划详情"
+      width="800px"
+      class="detail-dialog"
+      center
+      :show-close="true"
+      custom-class="beautified-detail-dialog"
+    >
+      <div class="detail-content">
+        <div class="detail-header">
+          <h3 class="detail-title">{{ detailData.planName || '巡检计划' }}</h3>
+          <el-tag :type="detailData.status === '1' ? 'success' : 'info'" class="detail-status-tag">
+            {{ detailData.status === '1' ? '启用' : detailData.status === '2' ? '停用' : '-' }}
+          </el-tag>
+        </div>
+
+        <div class="detail-main">
+          <el-descriptions :column="{ xs: 1, sm: 1, md: 2, lg: 2 }" class="detail-descriptions" border>
+            <el-descriptions-item label="计划类型" class="detail-item">{{ getPlanTypeText(detailData.planType) || '-' }}</el-descriptions-item>
+            <el-descriptions-item label="巡检对象" class="detail-item">{{ getObjectTypeText(detailData.objectType) || '-' }}</el-descriptions-item>
+            <el-descriptions-item label="巡检频率" class="detail-item">{{ detailData.inspectionFrequency || '-' }}</el-descriptions-item>
+            <el-descriptions-item label="负责人" class="detail-item">{{ detailData.nickName || '-' }}</el-descriptions-item>
+            <el-descriptions-item label="开始日期" class="detail-item">{{ formatDate(detailData.beginTime) || '-' }}</el-descriptions-item>
+            <el-descriptions-item label="结束日期" class="detail-item">{{ formatDate(detailData.endTime) || '-' }}</el-descriptions-item>
+            <el-descriptions-item label="计划开始时间" class="detail-item">{{ detailData.planBeginTime || '-' }}</el-descriptions-item>
+            <el-descriptions-item label="持续时间" class="detail-item">{{ detailData.duration || '-' }}分钟</el-descriptions-item>
+            <el-descriptions-item label="巡检项ID" class="detail-item">{{ detailData.inspectionItemId || '-' }}</el-descriptions-item>
+            <el-descriptions-item label="电站ID" class="detail-item">{{ detailData.projectId || '-' }}</el-descriptions-item>
+          </el-descriptions>
+        </div>
+
+        <div v-if="detailData.remark" class="detail-remark">
+          <h4 class="remark-title">备注信息</h4>
+          <p class="remark-content">{{ detailData.remark }}</p>
+        </div>
+      </div>
+
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="closeDetailDialog" class="close-btn">关闭</el-button>
         </span>
       </template>
     </el-dialog>
   </div>
 </template>
 
-<script setup>
-// 表单引用
-const createFormRef = ref(null);
-import { ref, computed, reactive } from 'vue';
+<script setup lang="js">
+import { ref, computed, reactive, onMounted, nextTick } from 'vue';
 import router from '@/router';
-import TitleComponent from './TitleComponent.vue';
+import { addxunjian, xunjianlist, xunjianDetail, updatexunjian, xunjianUserlist, xunjianItemlist } from '@/api/zhinengxunjian/xunjian';
+import { addItem } from '@/api/zhinengxunjian/inspection/item/index';
+import { ElMessage, ElMessageBox } from 'element-plus';
 
-// 激活的选项卡
-const activeTab = ref('plan');
-// 计划类型
+// 表单引用
+const formRef = ref(null);
+const itemFormRef = ref(null);
+
+// 搜索筛选条件
 const planType = ref('all');
-// 状态
 const status = ref('all');
-// 巡检对象
 const inspectionObject = ref('all');
-// 原始表格数据
-const rawTableData = ref([
-  {
-    name: '生产服务器每日巡检 2025-05-14',
-    type: '每日巡检',
-    object: '服务器',
-    frequency: '每天8:30',
-    status: 'enabled',
-    responsible: '张明'
-  },
-  {
-    name: '网络设备安全巡检 2025-04-15',
-    type: '每周巡检',
-    object: '网络设备',
-    frequency: '每天10:30',
-    status: 'enabled',
-    responsible: '张明'
-  },
-  {
-    name: '数据库性能巡检 2025-03-03',
-    type: '每月巡检',
-    object: '应用系统',
-    frequency: '每月1日14:00',
-    status: 'disabled',
-    responsible: '张明'
-  },
-  {
-    name: '机房环境季度检查',
-    type: '每季度巡检',
-    object: '基础设备',
-    frequency: '每季度第一个月5号',
-    status: 'enabled',
-    responsible: '张明'
-  },
-  {
-    name: '生产服务器每日巡检 2025-05-14',
-    type: '每日巡检',
-    object: '服务器',
-    frequency: '每天8:30',
-    status: 'enabled',
-    responsible: '张明'
-  },
-  {
-    name: '生产服务器每日巡检 2025-05-14',
-    type: '每日巡检',
-    object: '服务器',
-    frequency: '每天8:30',
-    status: 'enabled',
-    responsible: '张明'
-  },
-  {
-    name: '生产服务器每日巡检 2025-05-14',
-    type: '每日巡检',
-    object: '服务器',
-    frequency: '每天8:30',
-    status: 'enabled',
-    responsible: '张明'
-  },
-  {
-    name: '生产服务器每日巡检 2025-05-14',
-    type: '每日巡检',
-    object: '服务器',
-    frequency: '每天8:30',
-    status: 'enabled',
-    responsible: '张明'
-  },
-  {
-    name: '生产服务器每日巡检 2025-05-14',
-    type: '每日巡检',
-    object: '服务器',
-    frequency: '每天8:30',
-    status: 'enabled',
-    responsible: '张明'
-  },
-  {
-    name: '生产服务器每日巡检 2025-05-14',
-    type: '每日巡检',
-    object: '服务器',
-    frequency: '每天8:30',
-    status: 'enabled',
-    responsible: '张明'
-  },
-  {
-    name: '生产服务器每日巡检 2025-05-14',
-    type: '每日巡检',
-    object: '服务器',
-    frequency: '每天8:30',
-    status: 'enabled',
-    responsible: '张明'
-  },
-  // 增加更多数据用于测试分页
-  {
-    name: '应用系统安全检查',
-    type: '每周巡检',
-    object: '应用系统',
-    frequency: '每周五16:00',
-    status: 'enabled',
-    responsible: '李华'
-  },
-  {
-    name: '网络带宽监控',
-    type: '每日巡检',
-    object: '网络设备',
-    frequency: '每天12:00',
-    status: 'enabled',
-    responsible: '王强'
-  }
-]);
-// 当前页码
+
+// 表格数据
+const tableData = ref([]);
 const currentPage = ref(1);
-// 每页条数 - 与分页控件默认值保持一致
 const pageSize = ref(10);
-// 总条数 - 从原始数据计算得出
-const total = ref(rawTableData.value.length);
+const total = ref(0);
 
-// 计算属性：根据当前页码和每页条数获取分页后的数据
-const pagedTableData = computed(() => {
-  const startIndex = (currentPage.value - 1) * pageSize.value;
-  const endIndex = startIndex + pageSize.value;
-  return rawTableData.value.slice(startIndex, endIndex);
-});
+// 下拉列表数据
+const userList = ref([]);
+const inspectionItemList = ref([]);
 
-// 每页条数改变
-const handleSizeChange = (val) => {
-  pageSize.value = val;
-  currentPage.value = 1; // 重置到第一页
-};
-
-// 当前页码改变
-const handleCurrentChange = (val) => {
-  currentPage.value = val;
-};
-
-// 编辑
-const handleEdit = (row) => {
-  console.log('编辑', row);
-};
-
-// 详情
-const handleDetail = (row) => {
-  console.log('详情', row);
-};
-
-// 启用/停用
-const handleEnable = (row) => {
-  row.status = row.status === 'enabled' ? 'disabled' : 'enabled';
-};
-
-// 选项卡切换
-const handleTabChange = (newTab, oldTab) => {
-  // 可以在这里添加选项卡切换时的逻辑
-  console.log('选项卡切换:', newTab, oldTab);
-  return true;
-};
-
-// 创建计划弹窗相关
+// 弹窗状态
 const dialogVisible = ref(false);
-const createForm = reactive({
+const dialogTitle = ref('新建巡检计划');
+const isEditing = ref(false); // 新增/编辑状态标识
+const currentEditId = ref('');
+
+const initFormData = {
   planName: '',
   planType: '',
   objectType: '',
   startDate: '',
   endDate: '',
-  frequencyType: 'daily',
-  frequencyValue: '',
-  weekday: '', // 存储周几
-  monthday: '', // 存储几号
-  startTime: '',
-  estimatedDuration: 60,
-  responsiblePerson: '',
-  inspectionItems: [],
-  remarks: ''
+  frequencyType: '',
+  weekDay: '',
+  monthDay: '',
+  planBeginTime: '',
+  duration: null,
+  person: '',
+  inspectionItemId: [],
+  status: '',
+  remark: ''
+};
+
+const initData = {
+  formData: { ...initFormData },
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: '',
+    phonenumber: '',
+    status: '',
+    deptId: '',
+    roleId: ''
+  },
+  rules: {
+    planName: [{ required: true, message: '请输入计划名称', trigger: 'blur' }],
+    planType: [{ required: true, message: '请选择计划类型', trigger: 'change' }],
+    objectType: [{ required: true, message: '请选择对象类型', trigger: 'change' }],
+    startDate: [{ required: true, message: '请选择开始日期', trigger: 'change' }],
+    endDate: [{ required: true, message: '请选择结束日期', trigger: 'change' }],
+    frequencyType: [{ required: true, message: '请选择巡检频率', trigger: 'change' }],
+    weekDay: [
+      {
+        required: true,
+        message: '请选择周几',
+        trigger: 'change'
+      }
+    ],
+    monthDay: [
+      {
+        required: true,
+        message: '请选择几号',
+        trigger: 'change'
+      }
+    ],
+    planBeginTime: [{ required: true, message: '请选择计划开始时间', trigger: 'change' }],
+    duration: [
+      { required: true, message: '请输入持续时间', trigger: 'blur' },
+      { type: 'number', min: 1, message: '持续时间必须大于0', trigger: 'blur' }
+    ],
+    person: [{ required: true, message: '请选择负责人', trigger: 'change' }],
+    status: [{ required: true, message: '请选择状态', trigger: 'change' }]
+  }
+};
+const data = reactive(initData);
+
+const { formData, createFormRules } = toRefs(data);
+
+// 表单数据 - 使用独立对象存储，避免引用污染
+// const formData = ref({
+//   planName: '',
+//   planType: '',
+//   objectType: '',
+//   startDate: '',
+//   endDate: '',
+//   frequencyType: '',
+//   weekDay: '',
+//   monthDay: '',
+//   planBeginTime: '',
+//   duration: null,
+//   person: '',
+//   inspectionItemId: [],
+//   status: '',
+//   remark: ''
+// });
+
+// 表单验证规则
+// const createFormRules = computed(() => ({
+//   planName: [{ required: true, message: '请输入计划名称', trigger: 'blur' }],
+//   planType: [{ required: true, message: '请选择计划类型', trigger: 'change' }],
+//   objectType: [{ required: true, message: '请选择对象类型', trigger: 'change' }],
+//   startDate: [{ required: true, message: '请选择开始日期', trigger: 'change' }],
+//   endDate: [{ required: true, message: '请选择结束日期', trigger: 'change' }],
+//   frequencyType: [{ required: true, message: '请选择巡检频率', trigger: 'change' }],
+//   weekDay: [
+//     {
+//       required: true,
+//       message: '请选择周几',
+//       trigger: 'change'
+//     }
+//   ],
+//   monthDay: [
+//     {
+//       required: true,
+//       message: '请选择几号',
+//       trigger: 'change'
+//     }
+//   ],
+//   planBeginTime: [{ required: true, message: '请选择计划开始时间', trigger: 'change' }],
+//   duration: [
+//     { required: true, message: '请输入持续时间', trigger: 'blur' },
+//     { type: 'number', min: 1, message: '持续时间必须大于0', trigger: 'blur' }
+//   ],
+//   person: [{ required: true, message: '请选择负责人', trigger: 'change' }],
+//   status: [{ required: true, message: '请选择状态', trigger: 'change' }]
+// }));
+
+// 巡检项弹窗数据
+const itemDialogVisible = ref(false);
+const itemDialogTitle = ref('新增巡检项');
+const itemForm = reactive({
+  name: '',
+  type: '1',
+  projectId: 1
+});
+const itemFormRules = {
+  name: [{ required: true, message: '自定义巡检项名称不能为空', trigger: 'blur' }]
+};
+
+// 详情弹窗数据
+const detailDialogVisible = ref(false);
+const detailData = reactive({});
+
+// 初始化页面数据
+onMounted(() => {
+  getInspectionList();
 });
 
-// 创建计划表单验证规则
-const createFormRules = computed(() => ({
-  planName: [{ required: true, message: '请输入计划名称', trigger: 'blur' }],
-  planType: [{ required: true, message: '请选择计划类型', trigger: 'change' }],
-  objectType: [{ required: true, message: '请选择对象类型', trigger: 'change' }],
-  startDate: [{ required: true, message: '请选择开始日期', trigger: 'change' }],
-  endDate: [{ required: true, message: '请选择结束日期', trigger: 'change' }],
-  startTime: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
-  responsiblePerson: [{ required: true, message: '请选择负责人', trigger: 'change' }],
-  weekday: createForm.frequencyType === 'weekly' ? [{ required: true, message: '请选择周几', trigger: 'change' }] : [],
-  monthday: createForm.frequencyType === 'monthly' ? [{ required: true, message: '请选择几号', trigger: 'change' }] : []
-}));
+// 获取巡检计划列表
+const getInspectionList = async () => {
+  try {
+    const response = await xunjianlist({
+      pageNum: currentPage.value,
+      pageSize: pageSize.value,
+      planType: planType.value === 'all' ? '' : planType.value,
+      status: status.value === 'all' ? '' : status.value === 'enabled' ? '1' : '2',
+      objectType: inspectionObject.value === 'all' ? '' : inspectionObject.value
+    });
 
-// 打开创建计划弹窗
-const handleCreate = () => {
-  dialogVisible.value = true;
-};
+    if (response.code === 200) {
+      const rows = Array.isArray(response.rows) ? response.rows : response.data?.rows || [];
+      const totalCount = Number(response.total) || Number(response.data?.total) || 0;
 
-// 提交创建计划
-const submitCreatePlan = () => {
-  console.log('提交创建计划:', createForm);
-  // 这里可以添加实际的创建计划逻辑
-  dialogVisible.value = false;
-  // 重置表单
-  Object.keys(createForm).forEach((key) => {
-    if (Array.isArray(createForm[key])) {
-      createForm[key] = [];
-    } else if (key === 'estimatedDuration') {
-      createForm[key] = 60;
-    } else if (key === 'frequencyType') {
-      createForm[key] = 'daily';
+      tableData.value = rows.map((item) => ({
+        id: item.id || '',
+        name: String(item.planName || '未知名称'),
+        type: getPlanTypeText(item.planType),
+        object: getObjectTypeText(item.objectType),
+        frequency: item.inspectionFrequency || '未知频率',
+        status: item.status === '1' ? 'enabled' : 'disabled',
+        responsible: item.nickName || '未知负责人',
+        originalData: { ...item }
+      }));
+
+      total.value = totalCount;
     } else {
-      createForm[key] = '';
+      ElMessage.warning(`获取数据失败: ${response.msg || '未知错误'}`);
     }
-  });
+  } catch (error) {
+    console.error('获取巡检计划列表失败:', error);
+    ElMessage.error('获取巡检计划列表失败');
+  }
 };
 
-// 取消创建计划
+// 分页相关方法
+const pagedTableData = computed(() => {
+  const startIndex = (currentPage.value - 1) * pageSize.value;
+  const endIndex = startIndex + pageSize.value;
+  return tableData.value.slice(startIndex, endIndex);
+});
+
+const handleSizeChange = (val) => {
+  pageSize.value = val;
+  currentPage.value = 1;
+  getInspectionList();
+};
+
+const handleCurrentChange = (val) => {
+  currentPage.value = val;
+  getInspectionList();
+};
+
+// 搜索方法
+const handleSearch = () => {
+  currentPage.value = 1;
+  getInspectionList();
+};
+
+// 类型转换方法
+const getPlanTypeText = (type) => {
+  const typeMap = { '1': '每日巡检', '2': '每周巡检', '3': '每月巡检' };
+  return typeMap[type] || '未知类型';
+};
+
+const getObjectTypeText = (type) => {
+  const typeMap = { '1': '服务器', '2': '网络设备', '3': '应用系统', '4': '基础设施' };
+  return typeMap[type] || '未知对象';
+};
+
+// 格式化日期
+const formatDate = (dateString) => {
+  if (!dateString) return '';
+  try {
+    const date = new Date(dateString);
+    return date.toLocaleDateString('zh-CN');
+  } catch (e) {
+    return dateString.split('T')[0] || dateString;
+  }
+};
+
+// 获取下拉列表数据
+const getUsersList = async () => {
+  try {
+    const response = await xunjianUserlist();
+    const userRows = response?.data?.rows || response?.rows || [];
+
+    userList.value = userRows
+      .filter((item) => item && typeof item === 'object')
+      .map((item, index) => ({
+        label: item.userName || `用户${index + 1}`,
+        value: item.id || `id_${index}`
+      }));
+
+    if (userList.value.length === 0) {
+      userList.value = [{ label: '默认用户', value: 'default' }];
+    }
+  } catch (error) {
+    console.error('获取用户失败:', error);
+    userList.value = [{ label: '默认用户', value: 'default' }];
+  }
+};
+
+const getInspectionItemsList = async () => {
+  try {
+    const response = await xunjianItemlist();
+    if (response && response.code === 200) {
+      const rows = response.rows || (response.data && response.data.rows) || [];
+
+      inspectionItemList.value = rows.map((item) => ({
+        label: item.name || `未命名项(${item.id})`,
+        value: item.id
+      }));
+    } else {
+      inspectionItemList.value = [];
+    }
+  } catch (error) {
+    console.error('获取巡检项列表失败:', error);
+    inspectionItemList.value = [];
+  }
+};
+
+// 【核心修复1】完全重置表单数据
+const resetFormData = () => {
+  formData.value = { ...initFormData };
+  if (formRef.value) formRef.value.resetFields();
+  isEditing.value = false;
+  currentEditId.value = '';
+};
+
+// 【核心修复2】编辑功能 - 使用深拷贝避免影响原始数据
+const handleEdit = async (row) => {
+  console.log(formData.value);
+  try {
+    // 1. 先重置表单到初始状态
+    resetFormData();
+    Object.assign(formData.value, {
+      planName: '',
+      planType: '',
+      objectType: '',
+      startDate: '',
+      endDate: '',
+      frequencyType: 'daily',
+      weekDay: '',
+      monthDay: '',
+      planBeginTime: '',
+      duration: null,
+      person: '',
+      inspectionItemId: [],
+      status: '1',
+      remark: ''
+    });
+    // 2. 加载必要数据
+    await Promise.all([getUsersList(), getInspectionItemsList()]);
+
+    // 3. 深拷贝原始数据，避免引用关联
+    const originalData = JSON.parse(JSON.stringify(row.originalData));
+
+    // 4. 填充表单数据
+    console.log(formData.value);
+    formData.value.planName = originalData.planName || '';
+    formData.value.planType = originalData.planType || '';
+    formData.value.objectType = originalData.objectType || '';
+    formData.value.startDate = originalData.beginTime ? originalData.beginTime.substring(0, 10) : '';
+    formData.value.endDate = originalData.endTime ? originalData.endTime.substring(0, 10) : '';
+    formData.value.planBeginTime = originalData.planBeginTime || '';
+    formData.value.duration = originalData.duration || null;
+    formData.value.person = originalData.person || '';
+    formData.value.status = originalData.status || '';
+    formData.value.remark = originalData.remark || '';
+
+    // 处理巡检项（数组类型）
+    if (originalData.inspectionItemId) {
+      formData.value.inspectionItemId = Array.isArray(originalData.inspectionItemId)
+        ? [...originalData.inspectionItemId] // 数组则创建新数组
+        : typeof originalData.inspectionItemId === 'string'
+          ? originalData.inspectionItemId.split(',').filter((id) => id.trim())
+          : [];
+    } else {
+      formData.value.inspectionItemId = [];
+    }
+
+    // 处理频率
+    const frequencyDesc = originalData.inspectionFrequency || '';
+    if (frequencyDesc.includes('每天')) {
+      formData.value.frequencyType = 'daily';
+    } else if (frequencyDesc.includes('每周')) {
+      formData.value.frequencyType = 'weekly';
+      const weekdays = ['一', '二', '三', '四', '五', '六', '日'];
+      const weekDayMatch = frequencyDesc.match(/每周(.)/);
+      if (weekDayMatch) {
+        const weekDayIndex = weekdays.indexOf(weekDayMatch[1]);
+        if (weekDayIndex !== -1) {
+          formData.value.weekDay = String(weekDayIndex + 1);
+        }
+      }
+    } else if (frequencyDesc.includes('每月')) {
+      formData.value.frequencyType = 'monthly';
+      const monthDayMatch = frequencyDesc.match(/每月(\d+)号/);
+      if (monthDayMatch) {
+        formData.value.monthDay = monthDayMatch[1];
+      }
+    }
+
+    // 标记为编辑状态
+    isEditing.value = true;
+    currentEditId.value = row.id;
+
+    // 打开弹窗
+    dialogVisible.value = true;
+    dialogTitle.value = '编辑巡检计划';
+  } catch (error) {
+    console.error('编辑数据加载失败:', error);
+    ElMessage.error('加载编辑数据失败');
+  }
+};
+
+// 【核心修复3】新增功能 - 确保打开时表单完全干净
+const handleCreate = async () => {
+  dialogVisible.value = true;
+  try {
+    // 1. 强制重置表单（关键步骤）
+    resetFormData();
+    Object.assign(formData, {});
+
+    // 2. 加载下拉数据
+    await Promise.all([getUsersList(), getInspectionItemsList()]);
+
+    // 3. 确保是新增状态
+    isEditing.value = false;
+    currentEditId.value = '';
+
+    // 4. 打开弹窗
+    dialogTitle.value = '新建巡检计划';
+  } catch (error) {
+    console.error('打开新增弹窗失败:', error);
+    ElMessage.error('打开新增窗口失败');
+  }
+};
+
+// 频率变更处理
+const handleFrequencyChange = () => {
+  if (formData.value.frequencyType !== 'weekly') {
+    formData.value.weekDay = '';
+  }
+  if (formData.value.frequencyType !== 'monthly') {
+    formData.value.monthDay = '';
+  }
+};
+
+// 提交表单
+const submitForm = async () => {
+  try {
+    if (!formRef.value) return;
+
+    const valid = await formRef.value.validate();
+    if (!valid) return;
+
+    // 构建频率描述
+    let frequencyDesc = '';
+    if (formData.value.frequencyType === 'daily') {
+      frequencyDesc = '每天';
+    } else if (formData.value.frequencyType === 'weekly') {
+      const weekdays = ['一', '二', '三', '四', '五', '六', '日'];
+      frequencyDesc = `每周${weekdays[formData.value.weekDay - 1]}`;
+    } else if (formData.value.frequencyType === 'monthly') {
+      frequencyDesc = `每月${formData.value.monthDay}号`;
+    }
+
+    // 构建提交数据
+    const submitData = {
+      projectId: 1,
+      planName: formData.value.planName,
+      planType: formData.value.planType,
+      objectType: formData.value.objectType,
+      beginTime: formData.value.startDate + 'T00:00:00.000Z',
+      endTime: formData.value.endDate + 'T23:59:59.999Z',
+      inspectionFrequency: frequencyDesc,
+      planBeginTime: formData.value.planBeginTime,
+      duration: formData.value.duration,
+      person: formData.value.person,
+      inspectionItemId: formData.value.inspectionItemId.join(','),
+      status: formData.value.status,
+      remark: formData.value.remark || ''
+    };
+
+    // 编辑模式添加ID
+    if (isEditing.value && currentEditId.value) {
+      submitData.id = currentEditId.value;
+    }
+
+    // 提交请求
+    const response = isEditing.value ? await updatexunjian(submitData) : await addxunjian(submitData);
+
+    if (response.code === 200) {
+      ElMessage.success(isEditing.value ? '更新成功' : '创建成功');
+      dialogVisible.value = false;
+      resetFormData();
+      getInspectionList();
+    } else {
+      ElMessage.error(response.msg || (isEditing.value ? '更新失败' : '创建失败'));
+    }
+  } catch (error) {
+    console.error(isEditing.value ? '更新失败:' : '创建失败:', error);
+    ElMessage.error(isEditing.value ? '更新失败，请重试' : '创建失败，请重试');
+  }
+};
+
+// 取消表单操作
 const cancelCreatePlan = () => {
   dialogVisible.value = false;
-  // 重置表单
-  Object.keys(createForm).forEach((key) => {
-    if (Array.isArray(createForm[key])) {
-      createForm[key] = [];
-    } else if (key === 'estimatedDuration') {
-      createForm[key] = 60;
-    } else if (key === 'frequencyType') {
-      createForm[key] = 'daily';
-    } else {
-      createForm[key] = '';
-    }
+  // 延迟重置，避免关闭动画中出现数据闪烁
+  nextTick(() => {
+    resetFormData();
   });
 };
+
+// 巡检项相关方法
+const handleAddInspectionItem = () => {
+  itemForm.name = '';
+  itemFormRef.value?.resetFields();
+  itemDialogVisible.value = true;
+};
+
+const cancelAddItem = () => {
+  itemDialogVisible.value = false;
+};
+
+const submitAddItem = async () => {
+  try {
+    if (itemFormRef.value) {
+      const valid = await itemFormRef.value.validate();
+      if (valid) {
+        const response = await addItem(itemForm);
+        if (response.code === 200) {
+          ElMessage.success('新增巡检项成功');
+          itemDialogVisible.value = false;
+          await getInspectionItemsList();
+        } else {
+          ElMessage.error(response.msg || '新增巡检项失败');
+        }
+      }
+    }
+  } catch (error) {
+    console.error('新增巡检项失败:', error);
+    ElMessage.error('新增巡检项失败，请重试');
+  }
+};
+
+// 详情相关方法
+const handleDetail = async (row) => {
+  try {
+    const response = await xunjianDetail(row.id);
+    if (response.code === 200 && response.data) {
+      Object.assign(detailData, response.data);
+      detailDialogVisible.value = true;
+    } else {
+      ElMessage.error(response.msg || '获取详情失败');
+    }
+  } catch (error) {
+    console.error('获取详情失败:', error);
+    ElMessage.error('获取详情失败，请重试');
+  }
+};
+
+const closeDetailDialog = () => {
+  detailDialogVisible.value = false;
+  Object.keys(detailData).forEach((key) => delete detailData[key]);
+};
+
+// 启用/停用
+const handleEnable = async (row) => {
+  try {
+    // 获取当前行的原始数据
+    const originalData = row.originalData || {};
+    const currentStatus = originalData.status || '1';
+    const targetStatus = currentStatus === '1' ? '2' : '1';
+    const statusText = targetStatus === '1' ? '启用' : '停用';
+
+    // 显示确认对话框
+    await ElMessageBox.confirm(`确定要${statusText}该巡检计划吗？`, '操作确认', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    });
+
+    // 构建完整的更新数据对象，包含所有必要字段
+    const updateData = {
+      id: row.id,
+      projectId: originalData.projectId || 1,
+      planName: originalData.planName || '',
+      planType: originalData.planType || '',
+      objectType: originalData.objectType || '',
+      beginTime: originalData.beginTime || '',
+      endTime: originalData.endTime || '',
+      inspectionFrequency: originalData.inspectionFrequency || '',
+      planBeginTime: originalData.planBeginTime || '',
+      duration: originalData.duration || 0,
+      person: originalData.person || '',
+      inspectionItemId: originalData.inspectionItemId || '',
+      status: targetStatus, // 只修改状态字段
+      remark: originalData.remark || ''
+    };
+
+    // 调用更新接口，传入完整数据
+    const response = await updatexunjian(updateData);
+
+    if (response.code === 200) {
+      ElMessage.success(`已成功${statusText}该巡检计划`);
+      // 更新本地数据以反映状态变化
+      originalData.status = targetStatus;
+      row.status = targetStatus === '1' ? 'enabled' : 'disabled';
+    } else {
+      ElMessage.error(`${statusText}失败：${response.msg || '服务器异常'}`);
+    }
+  } catch (error) {
+    // 忽略用户取消操作的错误
+    if (error !== 'cancel') {
+      console.error('启用/停用失败:', error);
+      ElMessage.error('操作失败，请重试');
+    }
+  }
+};
+
+// 导航相关方法
 const handleInspection1 = () => {
   router.push('/rili/rili');
 };
@@ -501,10 +966,10 @@ const handleInspection6 = () => {
 const handleInspection7 = () => {
   router.push('/rili/renyuanzhuangtai');
 };
+
 const handleInspectionManagement1 = () => {
   router.push('/rili/InspectionManagement');
 };
-
 const handleInspectionManagement2 = () => {
   router.push('/rili/xunjianrenwu');
 };
@@ -514,208 +979,12 @@ const handleInspectionManagement3 = () => {
 </script>
 
 <style scoped>
-/* 样式保持不变 */
 .operation-inspection {
   padding: 20px;
   background-color: #f5f7fa;
   min-height: 100vh;
 }
 
-/* 标题区域样式 */
-.title-section {
-  background-color: #fff;
-  padding: 20px;
-  border-radius: 8px;
-  margin-bottom: 16px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-}
-
-.page-title {
-  font-size: 24px;
-  font-weight: 600;
-  color: #303133;
-  margin: 0 0 8px 0;
-}
-
-.page-subtitle {
-  font-size: 14px;
-  color: #909399;
-  margin: 0;
-}
-
-/* 选项卡样式 */
-.tabs-wrapper {
-  background-color: #fff;
-  padding: 20px;
-  border-radius: 8px;
-  margin-bottom: 16px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-}
-
-.custom-tabs {
-  border-bottom: none;
-  padding-top: 20px;
-}
-
-.custom-tabs .el-tabs__header {
-  margin: 0 -20px 0 -20px;
-  padding: 0 20px;
-  border-bottom: 1px solid #e4e7ed;
-}
-
-.custom-tabs .el-tabs__nav-wrap::after {
-  height: 0;
-}
-
-.custom-tabs .el-tabs__item {
-  font-size: 14px;
-  color: #606266;
-  padding: 12px 20px;
-  margin-right: 20px;
-  border-bottom: 2px solid transparent;
-}
-
-.custom-tabs .el-tabs__item.is-active {
-  color: #409eff;
-  border-bottom-color: #409eff;
-}
-
-.custom-tabs .el-tabs__item:hover {
-  color: #409eff;
-}
-
-/* 筛选栏样式 */
-.filter-bar {
-  background-color: #fff;
-  padding: 20px;
-  border-radius: 8px;
-  margin-bottom: 16px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 16px;
-}
-
-.filter-item {
-  flex-shrink: 0;
-}
-
-.filter-bar .el-select {
-  width: 150px;
-  height: 36px;
-}
-
-.filter-actions {
-  margin-left: auto;
-  display: flex;
-  gap: 10px;
-}
-
-.search-btn,
-.create-btn {
-  height: 36px;
-  border-radius: 4px;
-}
-
-/* 表格样式 */
-.table-wrapper {
-  background-color: #fff;
-  padding: 20px;
-  border-radius: 8px;
-  margin-bottom: 16px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-}
-
-.custom-table {
-  border: 1px solid #ebeef5;
-  border-radius: 4px;
-  overflow: hidden;
-}
-
-.custom-table th {
-  background-color: #fafafa;
-  font-weight: 500;
-  color: #606266;
-  text-align: left;
-  padding: 12px 16px;
-  border-bottom: 1px solid #ebeef5;
-}
-
-.custom-table td {
-  padding: 12px 16px;
-  border-bottom: 1px solid #ebeef5;
-  color: #303133;
-}
-
-.custom-table tr:hover {
-  background-color: #f5f7fa;
-}
-
-.custom-table tr.current-row {
-  background-color: #ecf5ff;
-}
-
-.status-tag {
-  padding: 4px 8px;
-  font-size: 12px;
-  border-radius: 4px;
-}
-
-.action-btn {
-  color: #409eff;
-  font-size: 12px;
-  padding: 4px 8px;
-}
-
-.action-btn:hover {
-  color: #66b1ff;
-  background-color: #ecf5ff;
-}
-
-/* 分页区域样式 */
-.pagination-section {
-  background-color: #fff;
-  padding: 16px 20px;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.pagination-info {
-  font-size: 14px;
-  color: #606266;
-}
-
-.pagination-controls .el-pagination {
-  margin: 0;
-}
-
-.pagination-controls .el-pagination__sizes {
-  margin-right: 20px;
-}
-
-.pagination-controls .el-pagination button {
-  min-width: 32px;
-  height: 32px;
-  line-height: 32px;
-  border-radius: 4px;
-}
-
-.pagination-controls .el-pagination .el-pager li {
-  min-width: 32px;
-  height: 32px;
-  line-height: 32px;
-  border-radius: 4px;
-}
-
-.pagination-controls .el-pagination .el-pager li.active {
-  background-color: #409eff;
-  color: #fff;
-}
-/* 导航栏样式 */
 .navigation-tabs {
   display: flex;
   margin-bottom: 20px;
@@ -752,20 +1021,148 @@ const handleInspectionManagement3 = () => {
   box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
 }
 
-.nav-tab {
-  cursor: pointer;
-  user-select: none;
+.tabs-wrapper {
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 8px;
+  margin-bottom: 16px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
 }
-/* 响应式设计 */
-@media (max-width: 1200px) {
-  .filter-bar {
-    flex-direction: column;
-    align-items: stretch;
-  }
 
-  .filter-actions {
-    margin-left: 0;
-    justify-content: flex-end;
-  }
+.filter-bar {
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 8px;
+  margin-bottom: 16px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.filter-item {
+  flex-shrink: 0;
+}
+
+.filter-bar .el-select {
+  width: 150px;
+  height: 36px;
+}
+.filter-bar {
+  background-color: #fff;
+  border-radius: 8px;
+  margin-bottom: 24px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
+  padding: 16px 24px;
+}
+
+.filter-container {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 16px;
+  width: 100%;
+}
+
+.filter-item {
+  flex-shrink: 0;
+}
+
+.filter-bar .el-select {
+  width: 180px;
+  height: 36px;
+}
+
+.filter-actions {
+  margin-left: auto;
+  display: flex;
+  gap: 10px;
+}
+
+.search-btn,
+.create-btn {
+  height: 36px;
+  border-radius: 4px;
+}
+.table-wrapper {
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 16px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.pagination-section {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 0;
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 16px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.status-tag {
+  padding: 2px 8px;
+  font-size: 12px;
+}
+
+.action-btn {
+  padding: 0 8px;
+  color: #409eff;
+}
+
+.action-btn.text-success {
+  color: #67c23a;
+}
+
+.action-btn.text-danger {
+  color: #f56c6c;
+}
+
+.detail-dialog .el-dialog__body {
+  padding: 24px;
+}
+
+.detail-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.detail-title {
+  font-size: 18px;
+  font-weight: bold;
+  color: #303133;
+}
+
+.detail-status-tag {
+  padding: 4px 12px;
+  font-size: 14px;
+}
+
+.detail-descriptions {
+  margin-bottom: 20px;
+}
+
+.detail-item .el-descriptions__label {
+  font-weight: 500;
+  color: #606266;
+}
+
+.remark-title {
+  font-weight: 500;
+  margin-bottom: 8px;
+  color: #303133;
+}
+
+.remark-content {
+  padding: 12px;
+  background-color: #f5f7fa;
+  border-radius: 4px;
+  line-height: 1.6;
 }
 </style>
diff --git a/src/views/zhinengxunjian/baoxiuguanli.vue b/src/views/zhinengxunjian/baoxiuguanli.vue
index db5f442..58c6ad7 100644
--- a/src/views/zhinengxunjian/baoxiuguanli.vue
+++ b/src/views/zhinengxunjian/baoxiuguanli.vue
@@ -129,12 +129,12 @@
       <el-dialog
         v-model="createTaskDialogVisible"
         title="新建报修任务"
-        width="800px"
+        width="900px"
         :before-close="handleCancelCreateTask"
         custom-class="beautiful-dialog"
         center
       >
-        <el-form ref="createTaskFormRef" :model="createTaskForm" :rules="createTaskRules" label-width="100px" class="elegant-form">
+        <el-form ref="createTaskFormRef" :model="createTaskForm" :rules="createTaskRules" label-width="120px" class="elegant-form">
           <el-form-item label="报修名称*" prop="repairName">
             <el-input v-model="createTaskForm.repairName" placeholder="简要描述报修内容" />
           </el-form-item>
@@ -143,10 +143,8 @@
             <el-col :span="12">
               <el-form-item label="报修类型*" prop="repairType">
                 <el-select v-model="createTaskForm.repairType" placeholder="请选择类型">
-                  <el-option label="设备故障" value="device" />
+                  <el-option label="硬件故障" value="device" />
                   <el-option label="软件故障" value="software" />
-                  <el-option label="网络故障" value="network" />
-                  <el-option label="环境问题" value="environment" />
                 </el-select>
               </el-form-item>
             </el-col>
@@ -161,6 +159,12 @@
             </el-col>
           </el-row>
 
+          <el-form-item label="指派维修人*" prop="sendPerson">
+            <el-select v-model="createTaskForm.sendPerson" placeholder="请选择维修人" :loading="loadingUsers">
+              <el-option v-for="user in usersList" :key="user.id" :label="user.name" :value="user.id" />
+            </el-select>
+          </el-form-item>
+
           <el-form-item label="详细描述*" prop="detailedDescription">
             <el-input v-model="createTaskForm.detailedDescription" type="textarea" :rows="4" placeholder="详细描述故障现象、发生时间、位置等信息" />
           </el-form-item>
@@ -169,13 +173,31 @@
             <el-input v-model="createTaskForm.faultLocation" placeholder="例如：A区102" />
           </el-form-item>
 
-          <el-form-item label="上传图片(可选)">
-            <div class="upload-container">
-              <div class="upload-box">
-                <i class="el-icon-plus avatar-uploader-icon"></i>
-                <div class="upload-text">点击或拖拽图片至此处上传</div>
-                <div class="upload-hint">支持JPG、PNG格式，最多3张</div>
+          <el-form-item label="上传图片(可选)" width="100%">
+            <file-upload v-model="createTaskForm.file" :fileType="['png', 'jpg', 'jpeg']">
+              <div class="upload-container">
+                <div class="upload-box">
+                  <i class="el-icon-plus avatar-uploader-icon"></i>
+                  <div class="upload-text">点击或拖拽图片至此处上传</div>
+                  <div class="upload-hint">支持JPG、PNG格式，最多3张</div>
+                </div>
               </div>
+            </file-upload>
+            <!-- <el-upload
+              class="avatar-uploader"
+              :file-list="createTaskForm.fileList"
+              :on-change="handleFileChange"
+              :before-remove="beforeRemove"
+              :on-remove="handleRemove"
+              :auto-upload="false"
+              multiple
+              :limit="3"
+              :on-exceed="handleExceed"
+            >
+
+            </el-upload> -->
+            <div v-if="createTaskForm.fileList && createTaskForm.fileList.length > 0" class="upload-tip">
+              <span style="color: #1989fa">已选择{{ createTaskForm.fileList.length }}张图片，将在提交时上传</span>
             </div>
           </el-form-item>
 
@@ -196,7 +218,7 @@
         <template #footer>
           <span class="dialog-footer">
             <el-button @click="handleCancelCreateTask">取消</el-button>
-            <el-button type="primary" @click="handleSaveTask">保存计划</el-button>
+            <el-button type="primary" @click="handleSaveTask">保存报修任务</el-button>
           </span>
         </template>
       </el-dialog>
@@ -205,10 +227,12 @@
 </template>
 
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import router from '@/router';
 import TitleComponent from './TitleComponent.vue';
-
+import { baoxiulist, baoxiuDetail, delbaoxiu, updatebaoxiu, addbaoxiu, uploadbaoxiu } from '@/api/zhinengxunjian/baoxiou/index';
+import { xunjianUserlist } from '@/api/zhinengxunjian/xunjian';
+import { ElMessage } from 'element-plus';
 // 激活的选项卡
 const activeTab = ref('task');
 
@@ -217,128 +241,165 @@ const taskStatus = ref('');
 const planType = ref('');
 const executor = ref('');
 
-// 任务数据 - 恢复优先级标签样式和预计完成时间
-const tasks = ref([
-  {
-    title: '服务器A1电源故障',
-    status: 'executing',
-    statusText: '处理中',
-    leftLineClass: 'left-line-high',
-    priorityClass: 'priority-high', // 恢复优先级标签样式类
-    priority: '高优先级',
-    reportTime: '2025-06-16 08:30',
-    reporter: '李明',
-    maintainer: '张明',
-    expectedCompleteTime: '2025-06-16 12:00', // 恢复预计完成时间
-    actionText: '跟进',
-    actionClass: 'follow-btn'
-  },
-  {
-    title: '机房环境检查',
-    status: 'pending',
-    statusText: '待处理',
-    leftLineClass: 'left-line-medium',
-    priorityClass: 'priority-medium', // 恢复优先级标签样式类
-    priority: '中优先级',
-    reportTime: '2025-06-16 08:30',
-    reporter: '张伟',
-    maintainer: '未分配',
-    expectedCompleteTime: '2025-06-16 18:00', // 恢复预计完成时间
-    actionText: '分配',
-    actionClass: 'assign-btn'
-  },
-  {
-    title: '测试软件授权过期',
-    status: 'executing',
-    statusText: '处理中',
-    leftLineClass: 'left-line-low',
-    priorityClass: 'priority-low', // 恢复优先级标签样式类
-    priority: '低优先级',
-    reportTime: '2025-06-16 08:30',
-    reporter: '李明',
-    maintainer: '李阳',
-    expectedCompleteTime: '2025-06-17 09:00', // 恢复预计完成时间
-    actionText: '跟进',
-    actionClass: 'follow-btn'
-  },
-  {
-    title: '打印机卡纸故障',
-    status: 'completed',
-    statusText: '已完成',
-    leftLineClass: 'left-line-completed',
-    priorityClass: 'priority-low', // 恢复优先级标签样式类
-    priority: '低优先级',
-    reportTime: '2025-06-17 08:30',
-    reporter: '李明',
-    maintainer: '张明',
-    expectedCompleteTime: '2025-06-17 10:00', // 恢复预计完成时间
-    completeTime: '2025-06-17 09:15',
-    actionText: '评价',
-    actionClass: 'evaluate-btn'
-  },
-  {
-    title: '服务器A1电源故障',
-    status: 'executing',
-    statusText: '处理中',
-    leftLineClass: 'left-line-high',
-    priorityClass: 'priority-high',
-    priority: '高优先级',
-    reportTime: '2025-06-16 08:30',
-    reporter: '李明',
-    maintainer: '张明',
-    expectedCompleteTime: '2025-06-16 12:00',
-    actionText: '跟进',
-    actionClass: 'follow-btn'
-  },
-  {
-    title: '机房环境检查',
-    status: 'pending',
-    statusText: '待处理',
-    leftLineClass: 'left-line-medium',
-    priorityClass: 'priority-medium',
-    priority: '中优先级',
-    reportTime: '2025-06-16 08:30',
-    reporter: '张伟',
-    maintainer: '未分配',
-    expectedCompleteTime: '2025-06-16 18:00',
-    actionText: '分配',
-    actionClass: 'assign-btn'
-  },
-  {
-    title: '测试软件授权过期',
-    status: 'executing',
-    statusText: '处理中',
-    leftLineClass: 'left-line-low',
-    priorityClass: 'priority-low',
-    priority: '低优先级',
-    reportTime: '2025-06-16 08:30',
-    reporter: '李明',
-    maintainer: '李阳',
-    expectedCompleteTime: '2025-06-17 09:00',
-    actionText: '跟进',
-    actionClass: 'follow-btn'
-  },
-  {
-    title: '打印机卡纸故障',
-    status: 'completed',
-    statusText: '已完成',
-    leftLineClass: 'left-line-completed',
-    priorityClass: 'priority-low',
-    priority: '低优先级',
-    reportTime: '2025-06-17 08:30',
-    reporter: '李明',
-    maintainer: '张明',
-    expectedCompleteTime: '2025-06-17 10:00',
-    completeTime: '2025-06-17 09:15',
-    actionText: '评价',
-    actionClass: 'evaluate-btn'
-  }
-]);
+// 任务数据 - 初始为空数组
+const tasks = ref([]);
 
 // 分页相关
 const currentPage = ref(1);
 const pageSize = ref(8);
-const total = ref(tasks.value.length);
+const total = ref(0);
+const loading = ref(false);
+
+// 获取报修任务列表
+defineExpose({ getTaskList });
+async function getTaskList() {
+  loading.value = true;
+  try {
+    const res = await baoxiulist({
+      pageNum: currentPage.value,
+      pageSize: pageSize.value,
+      status: taskStatus.value,
+      type: planType.value,
+      executor: executor.value
+    });
+
+    if (res.code === 200 && res.rows) {
+      total.value = res.total || 0;
+      // 将API返回的数据转换为前端显示所需的格式
+      tasks.value = res.rows.map((item) => ({
+        id: item.id,
+        title: item.name || '未命名报修任务',
+        status: mapStatusToKey(item.status),
+        statusText: getStatusText(item.status),
+        leftLineClass: getLeftLineClass(item.status, item.level),
+        priorityClass: getPriorityClass(item.level),
+        priority: getPriorityText(item.level),
+        reportTime: formatDate(item.reportTime),
+        reporter: item.reportName || '未知报修人',
+        maintainer: item.sendPerson ? `维修人ID: ${item.sendPerson}` : '未分配',
+        expectedCompleteTime: getExpectedCompleteTime(item.status),
+        completeTime: item.completeTime ? formatDate(item.completeTime) : '',
+        actionText: getActionText(item.status),
+        actionClass: getActionClass(item.status),
+        reportInfo: item.reportInfo,
+        position: item.position,
+        fileUrl: item.fileUrl
+      }));
+    } else {
+      tasks.value = [];
+      total.value = 0;
+      console.error('获取报修任务列表失败:', res.msg);
+    }
+  } catch (error) {
+    console.error('获取报修任务列表异常:', error);
+    tasks.value = [];
+    total.value = 0;
+  } finally {
+    loading.value = false;
+  }
+}
+
+// 状态映射辅助函数
+function mapStatusToKey(status) {
+  const statusMap = {
+    '1': 'pending', // 待处理
+    '2': 'executing', // 处理中
+    '3': 'completed' // 已完成
+  };
+  return statusMap[status] || 'pending';
+}
+
+// 获取状态文本
+function getStatusText(status) {
+  const statusMap = {
+    '1': '待处理',
+    '2': '处理中',
+    '3': '已完成'
+  };
+  return statusMap[status] || '未知状态';
+}
+
+// 获取优先级文本
+function getPriorityText(level) {
+  const levelMap = {
+    '1': '低优先级',
+    '2': '中优先级',
+    '3': '高优先级'
+  };
+  return levelMap[level] || '普通优先级';
+}
+
+// 获取优先级样式类
+function getPriorityClass(level) {
+  const levelMap = {
+    '1': 'priority-low',
+    '2': 'priority-medium',
+    '3': 'priority-high'
+  };
+  return levelMap[level] || 'priority-low';
+}
+
+// 获取左侧状态线样式类
+function getLeftLineClass(status, level) {
+  if (status === '3') return 'left-line-completed';
+
+  const levelMap = {
+    '1': 'left-line-low',
+    '2': 'left-line-medium',
+    '3': 'left-line-high'
+  };
+  return levelMap[level] || 'left-line-low';
+}
+
+// 获取操作按钮文本
+function getActionText(status) {
+  const actionMap = {
+    '1': '分配',
+    '2': '跟进',
+    '3': '评价'
+  };
+  return actionMap[status] || '查看';
+}
+
+// 获取操作按钮样式类
+function getActionClass(status) {
+  const actionMap = {
+    '1': 'assign-btn',
+    '2': 'follow-btn',
+    '3': 'evaluate-btn'
+  };
+  return actionMap[status] || 'view-btn';
+}
+
+// 获取预计完成时间（根据状态和优先级估算）
+function getExpectedCompleteTime(status) {
+  if (status === '3') return ''; // 已完成任务不需要显示预计时间
+
+  const now = new Date();
+  // 简单估算：待处理任务默认当天18:00前完成，处理中任务默认2小时内完成
+  if (status === '1') {
+    now.setHours(18, 0, 0, 0);
+  } else {
+    now.setHours(now.getHours() + 2);
+  }
+  return formatDate(now);
+}
+
+// 格式化日期时间
+function formatDate(date) {
+  if (!date) return '';
+
+  const d = new Date(date);
+  if (isNaN(d.getTime())) return '';
+
+  const year = d.getFullYear();
+  const month = String(d.getMonth() + 1).padStart(2, '0');
+  const day = String(d.getDate()).padStart(2, '0');
+  const hours = String(d.getHours()).padStart(2, '0');
+  const minutes = String(d.getMinutes()).padStart(2, '0');
+
+  return `${year}-${month}-${day} ${hours}:${minutes}`;
+}
 
 // 状态排序映射
 const statusOrder = {
@@ -363,20 +424,22 @@ const pagedTasks = computed(() => {
 // 搜索处理
 const handleSearch = () => {
   currentPage.value = 1; // 重置到第一页
-  // 实际应用中这里会根据筛选条件过滤数据
+  getTaskList(); // 调用接口获取数据
 };
 
 // 创建报修任务弹窗相关
 const createTaskDialogVisible = ref(false);
+const createTaskFormRef = ref(null);
 const createTaskForm = ref({
   repairName: '',
-  briefDescription: '',
   repairType: '',
   priority: '',
   detailedDescription: '',
   faultLocation: '',
   contactPerson: '',
-  contactPhone: ''
+  contactPhone: '',
+  sendPerson: '', // 指派维修人
+  file: '' // 上传的文件列表
 });
 
 const createTaskRules = {
@@ -386,58 +449,303 @@ const createTaskRules = {
   detailedDescription: [{ required: true, message: '请输入详细描述', trigger: 'blur' }],
   faultLocation: [{ required: true, message: '请输入故障位置', trigger: 'blur' }],
   contactPerson: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
-  contactPhone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }]
+  contactPhone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
+  sendPerson: [{ required: true, message: '请选择维修人', trigger: 'change' }]
 };
 
+// 用户列表（维修人）
+const usersList = ref([]);
+const loadingUsers = ref(false);
+
+// 获取用户列表
+const getUsersList = async () => {
+  loadingUsers.value = true;
+  try {
+    const res = await xunjianUserlist();
+    // 根据接口返回格式，成功码是200，用户数据在rows数组中
+    if (res.code === 200 && res.rows && Array.isArray(res.rows)) {
+      // 映射用户数据，使用id作为value，userName作为显示名称
+      usersList.value = res.rows.map((user) => ({
+        id: user.id,
+        name: user.userName
+      }));
+    } else {
+      usersList.value = [];
+      console.error('获取用户列表失败:', res.msg || '未知错误');
+    }
+  } catch (error) {
+    console.error('获取用户列表异常:', error);
+    usersList.value = [];
+  } finally {
+    loadingUsers.value = false;
+  }
+};
+const isSubmitting = ref(false); // 防止重复提交的状态标记
+const isUploading = ref(false); // 防止重复上传的状态标记
+// 上传文件方法
+const uploadFiles = async (files) => {
+  // 防止重复上传
+  if (isUploading.value) {
+    ElMessage.warning('数据正在处理中，请稍候...');
+    return [];
+  }
+
+  try {
+    isUploading.value = true;
+    const formData = new FormData();
+
+    // 关键修复：将字段名从'files'改为'file'，匹配后端要求的'file'字段
+    files.forEach((file) => {
+      formData.append('file', file.raw); // 这里将'files'改为'file'
+    });
+
+    const res = await uploadbaoxiu(formData);
+
+    if (res.code === 200 && res.data && Array.isArray(res.data)) {
+      return res.data.map((item) => ({
+        fileId: item.ossId,
+        fileUrl: item.url
+      }));
+    } else {
+      console.error('文件上传失败:', res.msg);
+      throw new Error(res.msg || '文件上传失败');
+    }
+  } catch (error) {
+    console.error('文件上传异常:', error);
+    if (error.message.includes('重复提交')) {
+      throw new Error('操作过于频繁，请稍后再试');
+    }
+    throw error;
+  } finally {
+    isUploading.value = false;
+  }
+};
+
+const handleFileChange = (file, fileList) => {
+  // 只处理刚添加的文件
+  if (file.status === 'ready') {
+    // 验证文件格式和大小
+    const isJPG = file.raw.type === 'image/jpeg' || file.raw.type === 'image/jpg';
+    const isPNG = file.raw.type === 'image/png';
+    const isLt2M = file.size / 1024 / 1024 < 2;
+
+    if (!isJPG && !isPNG) {
+      ElMessage.error('上传图片只能是 JPG/JPEG 或 PNG 格式!');
+      // 从文件列表中移除不符合要求的文件
+      createTaskForm.value.fileList = fileList.filter((f) => f.uid !== file.uid);
+      return;
+    }
+
+    if (!isLt2M) {
+      ElMessage.error('上传图片大小不能超过 2MB!');
+      // 从文件列表中移除不符合要求的文件
+      createTaskForm.value.fileList = fileList.filter((f) => f.uid !== file.uid);
+      return;
+    }
+
+    // 保存验证通过的文件到表单
+    createTaskForm.value.fileList = fileList;
+  }
+};
+const handleExceed = (files, fileList) => {
+  ElMessage.warning(`当前限制选择 3 张图片，本次选择了 ${files.length} 张，共选择了 ${files.length + fileList.length} 张`);
+};
+
+// 文件移除前的钩子
+const beforeRemove = (file, fileList) => {
+  return window.confirm(`确定移除 ${file.name}？`);
+};
+
+// 文件移除时的钩子
+const handleRemove = (file, fileList) => {
+  createTaskForm.value.fileList = fileList;
+  ElMessage.info(`已移除 ${file.name}`);
+};
 // 创建任务
-const handleCreateTask = () => {
+const handleCreateTask = async () => {
   createTaskDialogVisible.value = true;
+  // 打开弹窗时获取用户列表
+  await getUsersList();
 };
 
 // 保存报修任务
-const handleSaveTask = () => {
-  // 模拟保存报修任务逻辑
-  console.log('保存报修任务:', createTaskForm.value);
-  // 关闭弹窗
-  createTaskDialogVisible.value = false;
-  // 重置表单
+const handleSaveTask = async () => {
+  console.log(createTaskForm.value.file);
+  // 防止重复提交
+  if (!createTaskFormRef.value || isSubmitting.value) return;
+
+  try {
+    // 设置提交状态为true
+    isSubmitting.value = true;
+
+    // 先验证表单
+    await createTaskFormRef.value.validate();
+    // 上传选中的文件
+    let fileIds = [];
+    let fileUrls = [];
+
+    if (createTaskForm.value.fileList && createTaskForm.value.fileList.length > 0) {
+      ElMessage.info(`开始上传 ${createTaskForm.value.fileList.length} 张图片...`);
+      const uploadResults = await uploadFiles(createTaskForm.value.fileList);
+
+      // 提取上传结果
+      fileIds = uploadResults.map((result) => result.fileId);
+      fileUrls = uploadResults.map((result) => result.fileUrl);
+
+      ElMessage.success(`图片上传成功，共 ${uploadResults.length} 张`);
+    }
+
+    // 准备请求数据
+    const requestData = {
+      projectId: 1,
+      name: createTaskForm.value.repairName,
+      type: mapRepairType(createTaskForm.value.repairType),
+      status: '1', // 默认为待处理状态
+      level: mapPriorityLevel(createTaskForm.value.priority),
+      sendPerson: parseInt(createTaskForm.value.sendPerson),
+      reportInfo: createTaskForm.value.detailedDescription,
+      position: createTaskForm.value.faultLocation,
+      fileId: fileIds.join(','), // 用逗号分隔多个文件ID
+      fileUrl: fileUrls.join(','), // 用逗号分隔多个文件URL
+      reportName: createTaskForm.value.contactPerson,
+      reportPhone: createTaskForm.value.contactPhone
+    };
+
+    // 调用添加报修任务接口
+    const res = await addbaoxiu(requestData);
+
+    // 检查接口返回是否成功（使用code=200作为成功标志）
+    if (res.code === 200) {
+      // 显示成功提示
+      ElMessage.success('报修任务创建成功');
+
+      // 关闭弹窗
+      createTaskDialogVisible.value = false;
+
+      // 重置表单
+      resetCreateForm();
+
+      // 刷新任务列表
+      await getTaskList();
+    } else {
+      ElMessage.error(`创建失败：${res.msg || '未知错误'}`);
+    }
+  } catch (error) {
+    // 错误处理
+    if (error instanceof Error) {
+      ElMessage.error(`操作失败：${error.message}`);
+    } else if (error === false) {
+      // 表单验证失败，不做处理
+    } else {
+      ElMessage.error('操作失败：未知错误');
+    }
+  } finally {
+    // 无论成功失败，都重置提交状态
+    isSubmitting.value = false;
+  }
+};
+
+// 重置创建表单
+function resetCreateForm() {
   createTaskForm.value = {
     repairName: '',
-    briefDescription: '',
     repairType: '',
     priority: '',
     detailedDescription: '',
     faultLocation: '',
     contactPerson: '',
-    contactPhone: ''
+    contactPhone: '',
+    sendPerson: '',
+    fileList: []
   };
-  // 这里可以添加成功提示和刷新任务列表的逻辑
-};
+
+  if (createTaskFormRef.value) {
+    createTaskFormRef.value.resetFields();
+  }
+}
+
+// 报修类型映射 - 1硬件2软件
+function mapRepairType(type) {
+  const typeMap = {
+    'device': '1', // 硬件
+    'software': '2' // 软件
+  };
+  return typeMap[type] || '1';
+}
+
+// 优先级映射 - 1低优先2中优先3高优先
+function mapPriorityLevel(priority) {
+  const levelMap = {
+    'low': '1', // 低优先
+    'medium': '2', // 中优先
+    'high': '3' // 高优先
+  };
+  return levelMap[priority] || '2';
+}
+
+// 文件上传前的校验
+async function beforeUpload(file) {
+  const isJPG = file.type === 'image/jpeg' || file.type === 'image/jpg';
+  const isPNG = file.type === 'image/png';
+  const isLt2M = file.size / 1024 / 1024 < 2;
+
+  if (!isJPG && !isPNG) {
+    ElMessage.error('上传图片只能是 JPG/JPEG 或 PNG 格式!');
+    return false;
+  }
+  if (!isLt2M) {
+    ElMessage.error('上传图片大小不能超过 2MB!');
+    return false;
+  }
+
+  try {
+    // 直接上传文件
+    const uploadResult = await uploadFile(file);
+    // 存储文件信息到表单
+    createTaskForm.value.fileList = [
+      {
+        ...file,
+        fileId: uploadResult.fileId,
+        fileUrl: uploadResult.fileUrl
+      }
+    ];
+    ElMessage.success('图片上传成功');
+  } catch (error) {
+    ElMessage.error('图片上传失败，请重试');
+  }
+
+  // 阻止自动上传
+  return false;
+}
+
+// 文件上传成功处理
+function handleUploadSuccess(response, file, fileList) {
+  // 这个函数实际上不会被调用，因为auto-upload=false
+  // 真正的上传逻辑在beforeUpload函数中处理
+}
+
+// 文件上传失败处理
+function handleUploadError(err, file, fileList) {
+  ElMessage.error('上传失败，请稍后重试');
+}
 
 // 取消创建报修任务
 const handleCancelCreateTask = () => {
   createTaskDialogVisible.value = false;
   // 重置表单
-  createTaskForm.value = {
-    repairName: '',
-    briefDescription: '',
-    repairType: '',
-    priority: '',
-    detailedDescription: '',
-    faultLocation: '',
-    contactPerson: '',
-    contactPhone: ''
-  };
+  resetCreateForm();
 };
 
 // 分页事件
 const handleSizeChange = (val) => {
   pageSize.value = val;
   currentPage.value = 1;
+  getTaskList(); // 重新获取数据
 };
 
 const handleCurrentChange = (val) => {
   currentPage.value = val;
+  getTaskList(); // 重新获取数据
 };
 
 // 查看任务详情
@@ -478,6 +786,12 @@ const handleInspection6 = () => {
 const handleInspection7 = () => {
   router.push('/rili/renyuanzhuangtai');
 };
+
+// 组件挂载时获取数据
+onMounted(async () => {
+  // 只获取任务列表，用户列表在弹窗打开时获取
+  await getTaskList();
+});
 </script>
 
 <style scoped>
@@ -824,28 +1138,10 @@ const handleInspection7 = () => {
   flex-shrink: 0;
 }
 
-.search-btn {
-  background-color: #f2f3f5;
-  color: #303133;
-  border-color: #f2f3f5;
-  transition: all 0.2s ease;
-}
-
-.search-btn:hover {
-  background-color: #e5e6eb;
-  color: #303133;
-  border-color: #e5e6eb;
-}
-
+.search-btn,
 .create-btn {
-  background-color: #165dff;
-  border-color: #165dff;
-  transition: all 0.2s ease;
-}
-
-.create-btn:hover {
-  background-color: #0e42d2;
-  border-color: #0e42d2;
+  height: 36px;
+  border-radius: 4px;
 }
 
 /* 任务卡片样式 - 恢复优先级标签背景色 */
@@ -1073,6 +1369,24 @@ const handleInspection7 = () => {
   color: #fff;
 }
 
+.avatar-uploader .el-upload-list {
+  margin-top: 12px;
+}
+
+.avatar-uploader .el-upload-list__item {
+  border-radius: 6px;
+  margin-bottom: 8px;
+  transition: all 0.2s;
+}
+
+.avatar-uploader .el-upload-list__item:hover {
+  transform: translateX(4px);
+}
+
+.upload-tip {
+  margin-top: 10px;
+  font-size: 12px;
+}
 /* 响应式设计 */
 @media (max-width: 1200px) {
   .task-cards {
diff --git a/src/views/zhinengxunjian/index.vue b/src/views/zhinengxunjian/index.vue
index c2e5741..b5a5f97 100644
--- a/src/views/zhinengxunjian/index.vue
+++ b/src/views/zhinengxunjian/index.vue
@@ -11,12 +11,6 @@
         <div class="nav-tab" @click="handleInspection6">工单管理</div>
         <div class="nav-tab" @click="handleInspection7">运维组织</div>
       </div>
-
-      <!-- 标题栏 -->
-      <div class="header">
-        <TitleComponent title="运维待办事项" subtitle="管理每日、每周等的运维工作任务"></TitleComponent>
-      </div>
-
       <div class="main-content">
         <!-- 左侧日历区域 -->
         <div class="calendar-container">
@@ -25,8 +19,6 @@
             <div class="calendar-controls">
               <!-- 月份选择器 -->
               <el-date-picker v-model="currentDate" type="month" placeholder="选择月份" style="width: 120px; margin-right: 15px" />
-
-              <el-button type="primary">添加</el-button>
               <el-button type="primary" @click="goToToday">今日</el-button>
               <el-button type="text" icon="el-icon-plus"></el-button>
             </div>
@@ -39,7 +31,7 @@
                 <div class="date-events">
                   <div v-for="event in getDayEvents(data.day)" :key="event.id" class="event-item" :class="'event-' + event.type">
                     <div class="event-title">{{ event.title }}</div>
-                    <div class="event-description">{{ event.description }}</div>
+                    <div class="event-describeValue">{{ event.describeValue }}</div>
                   </div>
                 </div>
               </div>
@@ -54,128 +46,48 @@
             <el-button type="primary" size="small" icon="el-icon-plus" @click="openAddTaskDialog">添加</el-button>
           </div>
 
-          <!-- 待办事项列表 -->
+          <!-- 待办事项列表 - 动态渲染 -->
           <div class="todo-list">
-            <!-- 待办项1 - 常规维护 -->
-            <div class="todo-item">
-              <div class="todo-color-indicator normal"></div>
-              <el-checkbox class="todo-checkbox"></el-checkbox>
+            <div
+              v-for="item in todoListData"
+              :key="item.id"
+              class="todo-item"
+              :class="{ 'important': item.taskLevel === '重要', 'completed': item.status === 2 }"
+            >
+              <div
+                class="todo-color-indicator"
+                :class="{
+                  normal: item.taskLevel === '常规项' && item.status !== 2,
+                  important: item.taskLevel === '重要' && item.status !== 2,
+                  urgent: item.taskLevel === '紧急' && item.status !== 2,
+                  completed: item.status === 2
+                }"
+              ></div>
+              <el-checkbox class="todo-checkbox" :checked="item.status === 2" @change="handleStatusChange(item, $event)"></el-checkbox>
               <div class="todo-content">
                 <div class="todo-main">
-                  <div class="todo-title">服务器例行检查</div>
-                  <div class="todo-time">09:00-10:00 AM</div>
+                  <div class="todo-title">{{ item.title }}</div>
+                  <div v-if="item.workTimeRange1 || item.workTimeRange2" class="todo-time">
+                    {{ item.workTimeRange1 }}
+                    <span v-if="item.workTimeRange1 && item.workTimeRange2">——</span>
+                    {{ item.workTimeRange2 }}
+                  </div>
                 </div>
-                <div class="todo-description">检查所有生产服务器的CPU、内存、磁盘使用率，确保正常运行</div>
+                <div class="todo-describeValue">{{ item.describeValue }}</div>
               </div>
               <div class="todo-actions">
-                <button class="action-btn edit-btn" @click="handleEdit">
+                <button class="action-btn edit-btn" @click="handleEdit(item.id)">
                   <img src="@/assets/images/xiugai.png" alt="编辑" class="action-icon" />
                 </button>
-                <button class="action-btn delete-btn" @click="handleDelete">
+                <button class="action-btn delete-btn" @click="handleDelete(item.id)">
                   <img src="@/assets/images/shanchu.png" alt="删除" class="action-icon" />
                 </button>
               </div>
             </div>
 
-            <!-- 待办项2 - 重要 -->
-            <div class="todo-item important">
-              <div class="todo-color-indicator important"></div>
-              <el-checkbox class="todo-checkbox"></el-checkbox>
-              <div class="todo-content">
-                <div class="todo-main">
-                  <div class="todo-title">数据库备份</div>
-                  <div class="todo-time">14:00-15:00 PM</div>
-                </div>
-                <div class="todo-description">主要数据库全备份，并验证备份文件完整性</div>
-              </div>
-              <div class="todo-actions">
-                <button class="action-btn edit-btn" @click="handleEdit">
-                  <img src="@/assets/images/xiugai.png" alt="编辑" class="action-icon" />
-                </button>
-                <button class="action-btn delete-btn" @click="handleDelete">
-                  <img src="@/assets/images/shanchu.png" alt="删除" class="action-icon" />
-                </button>
-              </div>
-            </div>
-
-            <!-- 待办项3 - 紧急 -->
-            <div class="todo-item">
-              <div class="todo-color-indicator urgent"></div>
-              <el-checkbox class="todo-checkbox"></el-checkbox>
-              <div class="todo-content">
-                <div class="todo-main">
-                  <div class="todo-title">网络设备固件更新</div>
-                  <div class="todo-time">18:00-20:00 PM</div>
-                </div>
-                <div class="todo-description">更新核心交换机和防火墙固件，需安排在业务低峰期</div>
-              </div>
-              <div class="todo-actions">
-                <button class="action-btn edit-btn" @click="handleEdit">
-                  <img src="@/assets/images/xiugai.png" alt="编辑" class="action-icon" />
-                </button>
-                <button class="action-btn delete-btn" @click="handleDelete">
-                  <img src="@/assets/images/shanchu.png" alt="删除" class="action-icon" />
-                </button>
-              </div>
-            </div>
-
-            <!-- 待办项4 - 常规维护 -->
-            <div class="todo-item">
-              <div class="todo-color-indicator normal"></div>
-              <el-checkbox class="todo-checkbox"></el-checkbox>
-              <div class="todo-content">
-                <div class="todo-main">
-                  <div class="todo-title">服务器例行检查</div>
-                  <div class="todo-time">08:00-09:00 AM</div>
-                </div>
-                <div class="todo-description">检查所有生产服务器的CPU、内存、磁盘使用率，确保正常运行</div>
-              </div>
-              <div class="todo-actions">
-                <button class="action-btn edit-btn" @click="handleEdit">
-                  <img src="@/assets/images/xiugai.png" alt="编辑" class="action-icon" />
-                </button>
-                <button class="action-btn delete-btn" @click="handleDelete">
-                  <img src="@/assets/images/shanchu.png" alt="删除" class="action-icon" />
-                </button>
-              </div>
-            </div>
-            <div class="todo-item">
-              <div class="todo-color-indicator normal"></div>
-              <el-checkbox class="todo-checkbox"></el-checkbox>
-              <div class="todo-content">
-                <div class="todo-main">
-                  <div class="todo-title">服务器例行检查</div>
-                  <div class="todo-time">06:00-07:00 AM</div>
-                </div>
-                <div class="todo-description">检查所有生产服务器的CPU、内存、磁盘使用率，确保正常运行</div>
-              </div>
-              <div class="todo-actions">
-                <button class="action-btn edit-btn" @click="handleEdit">
-                  <img src="@/assets/images/xiugai.png" alt="编辑" class="action-icon" />
-                </button>
-                <button class="action-btn delete-btn" @click="handleDelete">
-                  <img src="@/assets/images/shanchu.png" alt="删除" class="action-icon" />
-                </button>
-              </div>
-            </div>
-            <div class="todo-item">
-              <div class="todo-color-indicator normal"></div>
-              <el-checkbox class="todo-checkbox"></el-checkbox>
-              <div class="todo-content">
-                <div class="todo-main">
-                  <div class="todo-title">服务器例行检查</div>
-                  <div class="todo-time">06:00-07:00 AM</div>
-                </div>
-                <div class="todo-description">检查所有生产服务器的CPU、内存、磁盘使用率，确保正常运行</div>
-              </div>
-              <div class="todo-actions">
-                <button class="action-btn edit-btn" @click="handleEdit">
-                  <img src="@/assets/images/xiugai.png" alt="编辑" class="action-icon" />
-                </button>
-                <button class="action-btn delete-btn" @click="handleDelete">
-                  <img src="@/assets/images/shanchu.png" alt="删除" class="action-icon" />
-                </button>
-              </div>
+            <!-- 无数据时显示 -->
+            <div v-if="todoListData.length === 0" class="empty-todo">
+              <p>暂无待办事项</p>
             </div>
           </div>
 
@@ -187,13 +99,19 @@
           </div>
         </div>
       </div>
-      <el-dialog v-model="dialogVisible" title="新增任务" width="480px" class="custom-dialog" :before-close="closeDialog">
+      <el-dialog
+        v-model="dialogVisible"
+        :title="editingTaskId ? '编辑任务' : '新增任务'"
+        width="480px"
+        class="custom-dialog"
+        :before-close="closeDialog"
+      >
         <el-form :model="taskForm" label-width="80px" class="task-form">
           <el-form-item label="任务名称" prop="name">
             <el-input v-model="taskForm.name" placeholder="输入任务名称" class="form-input"></el-input>
           </el-form-item>
-          <el-form-item label="任务描述" prop="description">
-            <el-input v-model="taskForm.description" placeholder="输入任务描述" class="form-input"></el-input>
+          <el-form-item label="任务描述" prop="describeValue">
+            <el-input v-model="taskForm.describeValue" placeholder="输入任务描述" class="form-input"></el-input>
           </el-form-item>
           <el-form-item label="时间" prop="timeRange">
             <el-date-picker
@@ -201,12 +119,13 @@
               type="datetimerange"
               start-placeholder="开始时间"
               end-placeholder="结束时间"
+              :disabled-date="() => false"
               class="form-input"
               style="width: 100%"
             />
           </el-form-item>
-          <el-form-item label="优先级" prop="priority">
-            <el-select v-model="taskForm.priority" placeholder="选择优先级" class="form-input">
+          <el-form-item label="优先级" prop="taskLevel">
+            <el-select v-model="taskForm.taskLevel" placeholder="选择优先级" class="form-input">
               <el-option label="常规项" value="常规项"></el-option>
               <el-option label="重要" value="重要"></el-option>
               <el-option label="紧急" value="紧急"></el-option>
@@ -214,12 +133,37 @@
           </el-form-item>
           <el-form-item label="任务类型" prop="taskType">
             <el-select v-model="taskForm.taskType" placeholder="选择任务类型" class="form-input">
-              <el-option label="常规维护" value="常规维护"></el-option>
-              <el-option label="安全巡检" value="安全巡检"></el-option>
-              <el-option label="系统升级" value="系统升级"></el-option>
-              <el-option label="数据备份" value="数据备份"></el-option>
+              <el-option label="常规维护" value="1"></el-option>
+              <el-option label="安全巡检" value="2"></el-option>
+              <el-option label="系统升级" value="3"></el-option>
+              <el-option label="数据备份" value="4"></el-option>
             </el-select>
           </el-form-item>
+          <!-- 新增：工作时间段选择器 -->
+          <el-form-item label="开始时间" prop="workTimeRange1">
+            <el-time-picker
+              v-model="taskForm.workTimeRange1"
+              type="timerange"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
+              format="HH:mm"
+              value-format="HH:mm"
+              class="form-input"
+              style="width: 100%"
+            />
+          </el-form-item>
+          <el-form-item label="结束时间" prop="workTimeRange2">
+            <el-time-picker
+              v-model="taskForm.workTimeRange2"
+              type="timerange"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
+              format="HH:mm"
+              value-format="HH:mm"
+              class="form-input"
+              style="width: 100%"
+            />
+          </el-form-item>
         </el-form>
         <template #footer>
           <el-button @click="closeDialog">取消</el-button>
@@ -231,9 +175,9 @@
 </template>
 
 <script setup>
-import { ref, computed, watch } from 'vue';
+import { ref, computed, watch, onMounted } from 'vue';
 import router from '@/router';
-import TitleComponent from './TitleComponent.vue';
+import { daibanlist, adddaiban, updatedaiban, deldaiban } from '@/api/zhinengxunjian/daiban/index';
 
 // 默认显示当前月份
 const currentDate = ref(new Date());
@@ -244,46 +188,144 @@ const years = ref([]);
 const selectedYear = ref(currentDate.value.getFullYear());
 const selectedMonth = ref(currentDate.value.getMonth() + 1);
 
-// 减少月份
-const decreaseMonth = () => {
-  const date = new Date(currentDate.value);
-  date.setMonth(date.getMonth() - 1);
-  currentDate.value = date;
-  updateYearAndMonth();
-};
-
-// 增加月份
-const increaseMonth = () => {
-  const date = new Date(currentDate.value);
-  date.setMonth(date.getMonth() + 1);
-  currentDate.value = date;
-  updateYearAndMonth();
-};
-
 // 回到今天
 const goToToday = () => {
   currentDate.value = new Date();
   updateYearAndMonth();
 };
 
-// 日历事件数据 - 2025年9月的随机事件
-const calendarEvents = ref([
-  // 服务维护事件
-  { id: 1, date: '2025-09-11', title: '服务维护', description: '维护公司内部服务器', type: 'service' },
-  { id: 2, date: '2025-09-28', title: '服务维护', description: '先所有旧服务器部署新内存', type: 'service' },
+// 根据workTimeRange1和workTimeRange2生成taskTimeInfo字符串
+const getTaskTimeInfoString = () => {
+  const timeInfoArray = [];
 
-  // 数据库管理事件
-  { id: 3, date: '2025-09-21', title: '数据库管理', description: '定期执行数据库优化', type: 'database' },
-  { id: 4, date: '2025-09-30', title: '数据库管理', description: '大型数据库备份策略', type: 'database' },
+  // 处理工作时间段1 - 更宽松的类型处理
+  if (taskForm.value.workTimeRange1) {
+    if (Array.isArray(taskForm.value.workTimeRange1)) {
+      // 如果是数组，直接拼接
+      timeInfoArray.push(taskForm.value.workTimeRange1.join('-'));
+    } else if (typeof taskForm.value.workTimeRange1 === 'string') {
+      // 如果已经是字符串，直接使用
+      timeInfoArray.push(taskForm.value.workTimeRange1);
+    }
+  }
 
-  // 网络维护事件
-  { id: 5, date: '2025-09-05', title: '网络维护', description: '网络设备例行检查', type: 'network' },
-  { id: 6, date: '2025-09-15', title: '网络维护', description: '更新网络安全策略', type: 'network' },
+  // 处理工作时间段2 - 更宽松的类型处理
+  if (taskForm.value.workTimeRange2) {
+    if (Array.isArray(taskForm.value.workTimeRange2)) {
+      // 如果是数组，直接拼接
+      timeInfoArray.push(taskForm.value.workTimeRange2.join('-'));
+    } else if (typeof taskForm.value.workTimeRange2 === 'string') {
+      // 如果已经是字符串，直接使用
+      timeInfoArray.push(taskForm.value.workTimeRange2);
+    }
+  }
 
-  // 系统升级事件
-  { id: 7, date: '2025-09-18', title: '系统升级', description: '核心系统版本升级', type: 'upgrade' },
-  { id: 8, date: '2025-09-25', title: '系统升级', description: '应用服务升级部署', type: 'upgrade' }
-]);
+  // 合并多个时间段为一个字符串，用逗号分隔
+  return timeInfoArray.join(',');
+};
+
+// 待办事项数据 - 从接口获取
+const todoListData = ref([]);
+const calendarEvents = ref([]);
+
+// 格式化日期为YYYY-MM-DD格式
+const formatDate = (date) => {
+  if (!date) return '';
+  const d = new Date(date);
+  const year = d.getFullYear();
+  const month = String(d.getMonth() + 1).padStart(2, '0');
+  const day = String(d.getDate()).padStart(2, '0');
+  return `${year}-${month}-${day}`;
+};
+
+// 格式化时间范围
+const formatTimeRange = (startTime, endTime) => {
+  if (!startTime || !endTime) return '';
+  const start = new Date(startTime);
+  const end = new Date(endTime);
+  const formatHourMinute = (date) => {
+    const hours = String(date.getHours()).padStart(2, '0');
+    const minutes = String(date.getMinutes()).padStart(2, '0');
+    return `${hours}:${minutes}`;
+  };
+  return `${formatHourMinute(start)}-${formatHourMinute(end)}`;
+};
+
+// 从接口获取数据并处理 - 根据实际返回格式修正版
+const fetchData = async () => {
+  try {
+    const response = await daibanlist();
+    console.log('接口原始返回:', response); // 打印原始响应，便于调试
+
+    // 初始化数据数组
+    let data = [];
+
+    // 根据实际返回格式提取数据，数据在response.rows中
+    if (response && Array.isArray(response.rows)) {
+      data = response.rows;
+    } else if (response.data && Array.isArray(response.data.rows)) {
+      // 兼容可能的嵌套结构
+      data = response.data.rows;
+    } else {
+      console.warn('接口返回格式不符合预期，使用空数组', response);
+      data = [];
+    }
+
+    // 处理待办列表数据
+    todoListData.value = data.map((item) => ({
+      id: item.id,
+      title: item.taskName,
+      describeValue: item.describeValue,
+      timeRange: formatTimeRange(item.taskBeginTime, item.taskEndTime),
+      // 保存原始时间用于编辑
+      originalTimeRange: [new Date(item.taskBeginTime), new Date(item.taskEndTime)],
+      taskLevel: item.taskLevel === '1' ? '常规项' : item.taskLevel === '2' ? '紧急' : '重要',
+      // 注意：根据返回数据调整了taskLevel映射，原代码可能颠倒了重要和紧急
+      taskType: item.taskType,
+      // 从taskTimeInfo获取时间段数据，格式为"17:00,20:00"
+      workTimeRange1: item.taskTimeInfo ? item.taskTimeInfo.split(',')[0] || '' : '',
+      workTimeRange2: item.taskTimeInfo && item.taskTimeInfo.split(',').length > 1 ? item.taskTimeInfo.split(',')[1] : '',
+      date: formatDate(item.taskBeginTime),
+      status: item.status || 1 // 添加状态字段，默认1表示未完成
+    }));
+
+    // 确保每个项目都有status字段
+    todoListData.value.forEach((item) => {
+      if (item.status === undefined) {
+        item.status = 1; // 默认未完成
+      }
+    });
+
+    // 处理日历事件数据
+    calendarEvents.value = data.map((item) => ({
+      id: item.id,
+      date: formatDate(item.taskBeginTime),
+      title: item.taskName,
+      describeValue: item.describeValue,
+      type: getEventType(item.taskType),
+      status: item.status // 添加状态信息
+    }));
+
+    console.log('数据处理完成，共', data.length, '条记录');
+  } catch (error) {
+    console.error('获取待办数据失败:', error);
+    // 出错时确保数据是数组，避免页面报错
+    todoListData.value = [];
+    calendarEvents.value = [];
+  }
+};
+
+// 根据任务类型获取事件类型
+const getEventType = (taskType) => {
+  // 任务类型映射: 1-常规维护, 2-安全巡检, 3-系统升级, 4-数据备份
+  const typeMap = {
+    '1': 'service', // 常规维护对应service
+    '2': 'database', // 安全巡检对应database
+    '3': 'upgrade', // 系统升级对应upgrade
+    '4': 'network' // 数据备份对应network
+  };
+  return typeMap[taskType] || 'service';
+};
 
 // 获取指定日期的事件
 const getDayEvents = (dateStr) => {
@@ -315,18 +357,39 @@ watch(currentDate, (newDate) => {
 // 初始化年份和月份
 updateYearAndMonth();
 
+// 组件挂载时获取数据
+onMounted(() => {
+  fetchData();
+});
+
 // 弹窗相关状态管理
 const dialogVisible = ref(false);
 const taskForm = ref({
   name: '',
-  description: '',
-  timeRange: '',
-  priority: '常规项',
-  taskType: '常规维护'
+  describeValue: '',
+  timeRange: null,
+  taskLevel: '常规项',
+  taskType: '1', // 默认值为1（常规维护）
+  workTimeRange1: null, // 工作时间段1
+  workTimeRange2: null // 工作时间段2
 });
 
+// 当前编辑的任务ID，为null表示新建模式
+const editingTaskId = ref(null);
+
 // 打开添加任务弹窗
 const openAddTaskDialog = () => {
+  // 重置表单为新建状态
+  editingTaskId.value = null;
+  taskForm.value = {
+    name: '',
+    describeValue: '',
+    timeRange: null,
+    taskLevel: '常规项',
+    taskType: '1',
+    workTimeRange1: null,
+    workTimeRange2: null
+  };
   dialogVisible.value = true;
 };
 
@@ -336,30 +399,164 @@ const closeDialog = () => {
 };
 
 // 保存任务
-const saveTask = () => {
-  // 这里可以添加表单验证和保存逻辑
-  console.log('保存任务:', taskForm.value);
-  // 重置表单
-  taskForm.value = {
-    name: '',
-    description: '',
-    timeRange: '',
-    priority: '常规项',
-    taskType: '常规维护'
-  };
-  // 关闭弹窗
-  closeDialog();
+const saveTask = async () => {
+  // 表单验证
+  if (!taskForm.value.name || !taskForm.value.describeValue || !taskForm.value.timeRange) {
+    // 使用Element Plus的消息提示
+    ElMessage.warning('请填写必要的任务信息');
+    return;
+  }
+
+  // 验证工作时间段
+  if (!taskForm.value.workTimeRange1 && !taskForm.value.workTimeRange2) {
+    ElMessage.warning('请至少填写一个工作时间段');
+    return;
+  }
+
+  try {
+    // 构建接口所需的数据结构
+    const apiData = {
+      createDept: 0, // 根据实际情况设置
+      createBy: 0, // 根据实际情况设置
+      createTime: new Date().toISOString(),
+      updateBy: 0, // 根据实际情况设置
+      updateTime: new Date().toISOString(),
+      params: {
+        property1: 'string',
+        property2: 'string'
+      },
+
+      projectId: 0, // 根据实际情况设置
+      taskName: taskForm.value.name,
+      describeValue: taskForm.value.describeValue,
+      taskBeginTime: taskForm.value.timeRange[0].toISOString(),
+      taskEndTime: taskForm.value.timeRange[1].toISOString(),
+      // 使用taskTimeInfo替代workTimeRange1和workTimeRange2，通过字符串拼接开始和结束时间
+      taskTimeInfo: getTaskTimeInfoString(),
+      taskLevel: taskForm.value.taskLevel === '常规项' ? '1' : taskForm.value.taskLevel === '重要' ? '3' : '2',
+      taskType: taskForm.value.taskType
+    };
+
+    let response;
+    // 判断是新增还是编辑
+    if (editingTaskId.value) {
+      // 编辑操作 - 修改参数传递方式，将id合并到apiData中
+      response = await updatedaiban({ ...apiData, id: editingTaskId.value });
+      ElMessage.success('任务更新成功');
+    } else {
+      // 新增操作
+      response = await adddaiban(apiData);
+      console.log('保存任务成功:', response);
+      ElMessage.success('任务添加成功');
+    }
+
+    // 重新从接口获取最新数据，确保列表数据与后端保持一致
+    await fetchData();
+
+    // 重置表单
+    taskForm.value = {
+      name: '',
+      describeValue: '',
+      timeRange: null,
+      taskLevel: '常规项',
+      taskType: '1',
+      workTimeRange1: null,
+      workTimeRange2: null
+    };
+
+    // 重置编辑状态
+    editingTaskId.value = null;
+
+    // 关闭弹窗
+    closeDialog();
+  } catch (error) {
+    console.error('保存任务失败:', error);
+    ElMessage.error('保存任务失败，请重试');
+  }
+};
+
+// 处理状态变更
+const handleStatusChange = async (item, checked) => {
+  try {
+    // 更新本地状态
+    item.status = checked ? 2 : 1;
+
+    // 直接更新相关的日历事件以反映状态变化
+    const calendarEvent = calendarEvents.value.find((event) => event.id === item.id);
+    if (calendarEvent) {
+      calendarEvent.status = item.status;
+    }
+
+    // 这里可以添加API调用，更新后端状态
+    // await updateTaskStatus(item.id, item.status);
+
+    console.log('任务状态已更新:', item.id, '状态:', item.status);
+  } catch (error) {
+    console.error('更新任务状态失败:', error);
+    ElMessage.error('更新任务状态失败，请重试');
+    // 恢复原始状态
+    item.status = checked ? 1 : 2;
+  }
 };
 
 // 编辑和删除处理函数
-const handleEdit = () => {
-  console.log('执行编辑操作');
-  // 保留原有编辑逻辑
-};
+const handleEdit = (id) => {
+  console.log('执行编辑操作:', id);
+  // 找到对应的数据项
+  const item = todoListData.value.find((item) => item.id === id);
+  if (item) {
+    // 存储编辑的任务ID
+    editingTaskId.value = id;
+    // 填充表单数据，使用原始时间范围
+    // 处理工作时间段格式：如果是字符串格式(如"HH:mm-HH:mm")，则转换为数组格式
+    let workTimeRange1 = item.workTimeRange1;
+    let workTimeRange2 = item.workTimeRange2;
 
-const handleDelete = () => {
-  console.log('执行删除操作');
-  // 保留原有删除逻辑
+    if (typeof workTimeRange1 === 'string' && workTimeRange1.includes('-')) {
+      workTimeRange1 = workTimeRange1.split('-');
+    }
+
+    if (typeof workTimeRange2 === 'string' && workTimeRange2.includes('-')) {
+      workTimeRange2 = workTimeRange2.split('-');
+    }
+
+    taskForm.value = {
+      name: item.title,
+      describeValue: item.describeValue,
+      timeRange: item.originalTimeRange, // 使用保存的原始时间对象
+      taskLevel: item.taskLevel,
+      taskType: item.taskType,
+      workTimeRange1: workTimeRange1,
+      workTimeRange2: workTimeRange2
+    };
+    // 打开弹窗
+    dialogVisible.value = true;
+  }
+};
+const handleDelete = (id) => {
+  console.log('执行删除操作:', id);
+  ElMessageBox.confirm('确定要删除这个任务吗？', '删除确认', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  })
+    .then(async () => {
+      try {
+        // 对于单个ID，直接作为路径参数传递
+        // 接口要求格式: /ops/matter/{ids}，这里ids是单个ID
+        await deldaiban(id);
+
+        // 删除成功后重新获取最新数据
+        await fetchData();
+        ElMessage.success('任务已删除');
+      } catch (error) {
+        console.error('删除任务失败:', error);
+        ElMessage.error('删除任务失败，请重试');
+      }
+    })
+    .catch(() => {
+      ElMessage.info('已取消删除');
+    });
 };
 
 const handleInspection1 = () => {
@@ -403,6 +600,16 @@ const handleInspection7 = () => {
   padding: 2px;
 }
 
+/* 已完成任务的样式 */
+.todo-color-indicator.completed {
+  background-color: #dcdfe6;
+}
+
+.todo-item.completed .todo-content {
+  color: #909399;
+  text-decoration: line-through;
+}
+
 .nav-tab {
   padding: 12px 24px;
   cursor: pointer;
@@ -570,11 +777,6 @@ const handleInspection7 = () => {
   overflow: hidden;
 }
 
-/* 重要任务的背景色 */
-.todo-item.important {
-  background-color: #e6f7ff;
-}
-
 .todo-checkbox {
   margin-top: 2px;
   flex-shrink: 0;
@@ -604,7 +806,7 @@ const handleInspection7 = () => {
   color: #909399;
 }
 
-.todo-description {
+.todo-describeValue {
   font-size: 12px;
   color: #606266;
   line-height: 1.4;
@@ -612,7 +814,7 @@ const handleInspection7 = () => {
 
 .todo-actions {
   position: absolute;
-  right: -80px;
+  right: -120px;
   top: 0;
   bottom: 0;
   display: flex;
@@ -653,7 +855,7 @@ const handleInspection7 = () => {
 
 /* 内容区域平移以给按钮留出空间 */
 .todo-item:hover .todo-content {
-  transform: translateX(-80px);
+  transform: translateX(-120px);
 }
 
 .action-icon {
@@ -667,6 +869,18 @@ const handleInspection7 = () => {
   gap: 12px;
 }
 
+/* 空状态样式 */
+.empty-todo {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 200px;
+  color: #909399;
+  font-size: 14px;
+  background-color: #fafafa;
+  border-radius: 4px;
+}
+
 .status-legend {
   display: flex;
   gap: 20px;
@@ -809,7 +1023,7 @@ const handleInspection7 = () => {
   text-overflow: ellipsis;
 }
 
-.event-description {
+.event-describeValue {
   font-size: 11px;
   white-space: nowrap;
   overflow: hidden;
diff --git a/src/views/zhinengxunjian/shiyanguanli.vue b/src/views/zhinengxunjian/shiyanguanli.vue
index 97ca149..c5d072b 100644
--- a/src/views/zhinengxunjian/shiyanguanli.vue
+++ b/src/views/zhinengxunjian/shiyanguanli.vue
@@ -12,8 +12,6 @@
         <div class="nav-tab" @click="handleInspection7">运维组织</div>
       </div>
 
-      <TitleComponent title="实验管理系统" subtitle="制定巡检计划，安排巡检任务，跟进巡检记录"></TitleComponent>
-
       <!-- 选项卡和按钮组合 -->
       <div class="tabs-wrapper">
         <div style="display: flex; align-items: center; gap: 10px">
@@ -49,11 +47,10 @@
             value-format="YYYY-MM-DD"
             class="date-picker"
           ></el-date-picker>
-
-          <el-button type="primary" class="search-btn"> 搜索 </el-button>
         </div>
         <div class="action-buttons">
-          <el-button type="primary" class="create-btn" @click="showRecordDialog = true"> <i class="fas fa-plus"></i> 新增实验记录 </el-button>
+          <el-button type="primary" class="search-btn"> 搜索 </el-button>
+          <el-button type="primary" class="create-btn" @click="openRecordDialog"> <i class="fas fa-plus"></i> 新增实验记录 </el-button>
         </div>
       </div>
 
@@ -61,7 +58,7 @@
       <div class="content-container">
         <!-- 5.1 巡检计划表格（与试验系统表格结构一致） -->
         <div v-if="activeTab === 'plan'" class="table-container">
-          <el-table :data="planTableData" border>
+          <el-table :data="planTableData" border v-loading="loading">
             <el-table-column align="center" prop="name" label="计划名称" width="220">
               <template #default="scope">
                 <div class="plan-name">{{ scope.row.name }}</div>
@@ -88,11 +85,46 @@
             <el-table-column align="center" label="操作" width="220">
               <template #default="scope">
                 <div class="operation-buttons">
-                  <el-button type="text" class="operate-btn edit-btn" v-if="['drafted', 'paused'].includes(scope.row.status)">编辑</el-button>
-                  <el-button type="text" class="operate-btn execute-btn" v-if="scope.row.status === 'drafted'">执行</el-button>
-                  <el-button type="text" class="operate-btn pause-btn" v-if="scope.row.status === 'in-progress'">暂停</el-button>
-                  <el-button type="text" class="operate-btn resume-btn" v-if="scope.row.status === 'paused'">恢复</el-button>
-                  <el-button type="text" class="operate-btn view-btn">查看详情</el-button>
+                  <!-- 草稿状态 -->
+                  <template v-if="scope.row.status === 'drafted'">
+                    <el-button type="text" class="operate-btn edit-btn" @click="handleEditRecord(scope.row)">编辑</el-button>
+                    <el-button type="text" class="operate-btn submit-btn">提交审批</el-button>
+                    <el-button type="text" class="operate-btn delete-btn">删除</el-button>
+                  </template>
+                  <!-- 已批准状态 -->
+                  <template v-else-if="scope.row.status === 'approved'">
+                    <el-button type="text" class="operate-btn edit-btn" @click="handleEditRecord(scope.row)">编辑</el-button>
+                    <el-button type="text" class="operate-btn view-btn" @click="handleViewDetail(scope.row)">详情</el-button>
+                    <!-- 当testPlanType为1时显示停用按钮 -->
+                    <el-button v-if="scope.row.testPlanType === '1'" type="text" class="operate-btn stop-btn" @click="handleStart(scope.row, '2')">
+                      停用
+                    </el-button>
+                    <!-- 当testPlanType不存在或为2时显示启用按钮 -->
+                    <el-button
+                      v-else-if="!scope.row.testPlanType || scope.row.testPlanType === '2'"
+                      type="text"
+                      class="operate-btn start-btn"
+                      @click="handleStart(scope.row, '1')"
+                    >
+                      启用
+                    </el-button>
+                  </template>
+                  <!-- 进行中状态 -->
+                  <template v-else-if="scope.row.status === 'in-progress'">
+                    <el-button type="text" class="operate-btn edit-btn" @click="handleEditRecord(scope.row)">编辑</el-button>
+                    <el-button type="text" class="operate-btn view-btn" @click="handleViewDetail(scope.row)">详情</el-button>
+                    <el-button type="text" class="operate-btn track-btn">跟踪</el-button>
+                  </template>
+                  <!-- 已完成状态 -->
+                  <template v-else-if="scope.row.status === 'completed'">
+                    <el-button type="text" class="operate-btn edit-btn" @click="handleEditRecord(scope.row)">编辑</el-button>
+                    <el-button type="text" class="operate-btn view-btn" @click="handleViewDetail(scope.row)">详情</el-button>
+                    <el-button type="text" class="operate-btn report-btn">查看报告</el-button>
+                  </template>
+                  <!-- 默认显示详情 -->
+                  <template v-else>
+                    <el-button type="text" class="operate-btn view-btn" @click="handleViewDetail(scope.row)">详情</el-button>
+                  </template>
                 </div>
               </template>
             </el-table-column>
@@ -120,7 +152,7 @@
                 <div class="operation-buttons">
                   <el-button type="text" class="operate-btn accept-btn" v-if="scope.row.status === 'pending'">接受</el-button>
                   <el-button type="text" class="operate-btn complete-btn" v-if="scope.row.status === 'accepted'">完成</el-button>
-                  <el-button type="text" class="operate-btn view-btn">查看详情</el-button>
+                  <el-button type="text" class="operate-btn view-btn" @click="handleViewDetail(scope.row)">查看详情</el-button>
                 </div>
               </template>
             </el-table-column>
@@ -294,9 +326,11 @@
         </div>
       </div>
 
-      <!-- 6. 分页（与试验系统结构一致） -->
+      <!-- 分页 -->
       <div class="pagination" v-if="activeTab !== 'record'">
-        <p class="total-records">显示1到{{ pageSize }}条，共{{ totalRecords }}条记录</p>
+        <p class="total-records">
+          显示第{{ (currentPage - 1) * pageSize + 1 }}到{{ Math.min(currentPage * pageSize, totalRecords) }}条，共{{ totalRecords }}条记录
+        </p>
         <el-pagination
           layout="prev, pager, next, jumper, sizes"
           :total="totalRecords"
@@ -321,8 +355,8 @@
       <el-form :model="createForm" :rules="createFormRules" ref="createFormRef" label-width="120px" class="custom-form">
         <div class="form-container">
           <!-- 材料名称 -->
-          <el-form-item label="材料名称" class="form-item">
-            <el-input v-model="formData.materialName" placeholder="请输入材料名称" class="form-input" />
+          <el-form-item label="计划名称" class="form-item">
+            <el-input v-model="formData.planName" placeholder="请输入计划名称" class="form-input" />
           </el-form-item>
           <!-- 试验时间 -->
           <div class="form-row">
@@ -335,29 +369,21 @@
           </div>
           <!-- 试验编号 -->
           <div class="form-row">
-            <el-form-item label="试验编号" class="form-item">
+            <el-form-item label="计划编号" class="form-item">
               <el-input v-model="formData.testNumber" placeholder="EX-20240601" class="form-input" />
             </el-form-item>
-            <el-form-item label="试验参考号" class="form-item">
-              <el-input v-model="formData.refNumber" placeholder="请输入参考号" class="form-input" />
-            </el-form-item>
-          </div>
-
-          <!-- 应用编号 -->
-          <div class="form-row">
-            <el-form-item label="应用编号" class="form-item">
-              <el-select v-model="formData.appNumber" placeholder="请选择" class="form-input">
-                <el-option label="APP-2024-001" value="APP-2024-001" />
-                <el-option label="APP-2024-002" value="APP-2024-002" />
+            <el-form-item label="实验对象类型" class="form-item">
+              <el-select v-model="formData.testObject" placeholder="请选择实验对象类型" class="form-input">
+                <el-option label="1安全试验" value="1" />
+                <el-option label="2网络实验" value="2" />
+                <el-option label="3性能试验" value="3" />
+                <el-option label="4" value="4" />
               </el-select>
             </el-form-item>
-            <el-form-item label="应用项目" class="form-item">
-              <el-input v-model="formData.appProject" placeholder="请输入应用项目" class="form-input" />
-            </el-form-item>
           </div>
 
           <!-- 试验目的 -->
-          <el-form-item label="试验目的" class="form-item">
+          <el-form-item label="试验目的与预期" class="form-item">
             <el-input
               v-model="formData.testPurpose"
               type="textarea"
@@ -381,15 +407,15 @@
           <!-- 负责人 -->
           <el-form-item label="负责人" class="form-item">
             <el-select v-model="formData.manager" placeholder="请选择试验负责人" class="form-input">
-              <el-option label="张明" value="张明" />
-              <el-option label="李华" value="李华" />
-              <el-option label="王强" value="王强" />
+              <el-option v-for="user in userList" :key="user.value" :label="user.label" :value="user.value" />
             </el-select>
           </el-form-item>
 
           <!-- 参与人员 -->
           <el-form-item label="参与人员" class="form-item">
-            <el-input v-model="formData.participants" placeholder="张明、李华、王强、刘洋、赵云" class="form-input" />
+            <el-select v-model="formData.participants" placeholder="请选择参与人员" class="form-input" multiple collapse-tags>
+              <el-option v-for="user in userList" :key="user.value" :label="user.label" :value="user.value" />
+            </el-select>
           </el-form-item>
 
           <!-- 试验步骤 -->
@@ -431,7 +457,116 @@
       <template #footer>
         <span class="dialog-footer">
           <el-button @click="handleClose">取消</el-button>
-          <el-button type="primary" @click="handleSave">保存</el-button>
+          <el-button type="primary" @click="handleSave" :loading="saveLoading">保存</el-button>
+        </span>
+      </template>
+    </el-dialog>
+
+    <!-- 详情弹窗 -->
+    <el-dialog
+      v-model="showDetailDialog"
+      title="实验记录详情"
+      width="800px"
+      :loading="detailLoading"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      class="custom-experiment-dialog"
+    >
+      <div class="detail-content">
+        <!-- 基础信息 -->
+        <div class="detail-section">
+          <h3 class="section-title">基础信息</h3>
+          <div class="detail-grid">
+            <div class="detail-item">
+              <label class="detail-label">计划名称:</label>
+              <span class="detail-value">{{ detailData.planName || '-' }}</span>
+            </div>
+            <div class="detail-item">
+              <label class="detail-label">计划编号:</label>
+              <span class="detail-value">{{ detailData.planCode || '-' }}</span>
+            </div>
+            <div class="detail-item">
+              <label class="detail-label">实验对象:</label>
+              <span class="detail-value">{{ getTestObjectText(detailData.testObject) || '-' }}</span>
+            </div>
+            <div class="detail-item">
+              <label class="detail-label">负责人:</label>
+              <span class="detail-value">{{ detailData.person?.userName || '-' }}</span>
+            </div>
+            <div class="detail-item">
+              <label class="detail-label">开始时间:</label>
+              <span class="detail-value">{{ detailData.beginTime ? formatDate(detailData.beginTime) : '-' }}</span>
+            </div>
+            <div class="detail-item">
+              <label class="detail-label">结束时间:</label>
+              <span class="detail-value">{{ detailData.endTime ? formatDate(detailData.endTime) : '-' }}</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 实验设备 -->
+        <div v-if="detailData.testDevice" class="detail-section">
+          <h3 class="section-title">实验设备</h3>
+          <div class="device-list">
+            <span v-for="(device, index) in detailData.testDevice.split(',')" :key="index" class="device-tag">
+              {{ device.trim() }}
+            </span>
+          </div>
+        </div>
+
+        <!-- 实验步骤 -->
+        <div v-if="detailData.testStep" class="detail-section">
+          <h3 class="section-title">实验步骤</h3>
+          <div class="steps-container">
+            <div v-for="(step, index) in detailData.testStep.split(',')" :key="index" class="step-item">
+              <div class="step-number">{{ index + 1 }}</div>
+              <div class="step-content">{{ step.trim() }}</div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 实验信息 -->
+        <div class="detail-section">
+          <h3 class="section-title">实验信息</h3>
+          <div class="detail-textarea">
+            <label class="detail-label">实验说明:</label>
+            <div class="detail-text">{{ detailData.testInfo || '-' }}</div>
+          </div>
+          <div class="detail-textarea">
+            <label class="detail-label">实验设置:</label>
+            <div class="detail-text">{{ detailData.testSetting || '-' }}</div>
+          </div>
+          <div class="detail-textarea">
+            <label class="detail-label">解决方案:</label>
+            <div class="detail-text">{{ detailData.testSolutions || '-' }}</div>
+          </div>
+        </div>
+
+        <!-- 参与人员 -->
+        <div v-if="detailData.persons && detailData.persons.length > 0" class="detail-section">
+          <h3 class="section-title">参与人员</h3>
+          <div class="participant-list">
+            <div v-for="(person, index) in detailData.persons" :key="person.id" class="participant-item">
+              <span class="participant-name">{{ person.userName }}</span>
+              <span class="participant-team">{{ person.teamName }}</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 巡检项目 -->
+        <div v-if="detailData.inspectionItemList && detailData.inspectionItemList.length > 0" class="detail-section">
+          <h3 class="section-title">巡检项目</h3>
+          <div class="inspection-list">
+            <div v-for="(item, index) in detailData.inspectionItemList" :key="item.id" class="inspection-item">
+              <span class="inspection-name">{{ item.name }}</span>
+              <span class="inspection-type">{{ item.type }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="showDetailDialog = false">关闭</el-button>
         </span>
       </template>
     </el-dialog>
@@ -439,9 +574,11 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref, onMounted } from 'vue';
 import router from '@/router';
-import TitleComponent from './TitleComponent.vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { shiyanDetail, shiyanlist, addshiyan, updateshiyan } from '@/api/zhinengxunjian/shiyan/index';
+import { xunjianUserlist } from '@/api/zhinengxunjian/xunjian/index';
 // 1. 选项卡状态管理
 const activeTab = ref('plan'); // 默认为"巡检计划"
 const timeRange = ref('month'); // 统计时间范围：月/周/日
@@ -451,180 +588,106 @@ const filterStatus = ref('all');
 const filterType = ref('all');
 const dateRange = ref([]);
 
-// 3. 分页参数
+// 分页参数
 const currentPage = ref(1);
 const pageSize = ref(20);
-const totalRecords = ref(86); // 总记录数（模拟）
+const totalRecords = ref(0);
 
 // 4. 巡检计划表格数据
-const planTableData = ref([
-  {
-    name: '数据库月度性能巡检\n编号: INS-20240601',
-    type: '数据库',
-    cycle: '每月',
-    dateRange: '2024-06-01 至 2024-06-30',
-    progress: 75,
-    status: 'in-progress',
-    responsible: '张明'
-  },
-  {
-    name: '服务器日常巡检\n编号: INS-20240602',
-    type: '服务器',
-    cycle: '每日',
-    dateRange: '2024-06-01 至 2024-06-30',
-    progress: 92,
-    status: 'in-progress',
-    responsible: '李华'
-  },
-  {
-    name: '网络设备安全巡检\n编号: INS-20240603',
-    type: '网络设备',
-    cycle: '每周',
-    dateRange: '2024-06-01 至 2024-06-30',
-    progress: 50,
-    status: 'in-progress',
-    responsible: '王强'
-  },
-  {
-    name: '存储设备健康检查\n编号: INS-20240604',
-    type: '存储设备',
-    cycle: '每季度',
-    dateRange: '2024-06-01 至 2024-06-30',
-    progress: 0,
-    status: 'drafted',
-    responsible: '赵伟'
-  },
-  {
-    name: '安全设备策略巡检\n编号: INS-20240501',
-    type: '安全设备',
-    cycle: '每月',
-    dateRange: '2024-05-01 至 2024-05-31',
-    progress: 100,
-    status: 'completed',
-    responsible: '刘芳'
-  },
-  {
-    name: '中间件运行状态巡检\n编号: INS-20240502',
-    type: '中间件',
-    cycle: '每周',
-    dateRange: '2024-05-01 至 2024-05-31',
-    progress: 100,
-    status: 'completed',
-    responsible: '陈明'
-  },
-  {
-    name: '虚拟化平台巡检\n编号: INS-20240605',
-    type: '虚拟化',
-    cycle: '每月',
-    dateRange: '2024-06-01 至 2024-06-30',
-    progress: 30,
-    status: 'paused',
-    responsible: '张丽'
-  },
-  {
-    name: '备份系统有效性检查\n编号: INS-20240606',
-    type: '备份系统',
-    cycle: '每两周',
-    dateRange: '2024-06-01 至 2024-06-30',
-    progress: 0,
-    status: 'drafted',
-    responsible: '李强'
-  }
-]);
+const planTableData = ref([]);
+const loading = ref(false); // 加载状态
 
-// 5. 巡检任务表格数据
-const taskTableData = ref([
-  {
-    name: 'DB服务器CPU监控',
-    planName: '数据库月度性能巡检',
-    type: '数据库',
-    target: '主数据库服务器',
-    deadline: '2024-06-15 18:00',
-    status: 'accepted',
-    executor: '张明'
-  },
-  {
-    name: '应用服务器内存检查',
-    planName: '服务器日常巡检',
-    type: '服务器',
-    target: '应用集群节点1-3',
-    deadline: '2024-06-10 24:00',
-    status: 'completed',
-    executor: '李华'
-  },
-  {
-    name: '防火墙规则审计',
-    planName: '网络设备安全巡检',
-    type: '网络设备',
-    target: '主防火墙',
-    deadline: '2024-06-12 18:00',
-    status: 'pending',
-    executor: '王强'
-  },
-  {
-    name: '存储阵列容量检查',
-    planName: '存储设备健康检查',
-    type: '存储设备',
-    target: '主存储阵列',
-    deadline: '2024-06-20 18:00',
-    status: 'pending',
-    executor: '赵伟'
-  },
-  {
-    name: 'WAF策略更新检查',
-    planName: '安全设备策略巡检',
-    type: '安全设备',
-    target: 'Web应用防火墙',
-    deadline: '2024-05-25 18:00',
-    status: 'completed',
-    executor: '刘芳'
-  }
-]);
+const fetchExperimentData = async () => {
+  loading.value = true;
+  try {
+    const queryParams = {
+      projectId: 1,
+      pageSize: pageSize.value,
+      pageNum: currentPage.value
+      // 其他参数...
+    };
 
-// 6. 统计数据（根据时间范围变化）
-const statData = ref({
-  completed: 42,
-  problems: 7,
-  resolved: 5,
-  avgTime: '45分钟',
-  completeRate: 68,
-  resolveRate: 72,
-  timelyRate: 60
+    const response = await shiyanlist(queryParams);
+    if (response && response.code === 200) {
+      planTableData.value = (response.rows || []).map((item) => ({
+        // 关键：将ID转为字符串存储，避免大整数精度丢失
+        id: String(item.id), // 强制转为字符串
+        name: `${item.planName}\n编号: ${item.planCode}`,
+        type: getTestObjectText(item.testObject),
+        cycle: item.cycle || '每月',
+        dateRange: `${item.beginTime || ''} 至 ${item.endTime || ''}`,
+        progress: calculateProgress(item.testStatus),
+        status: mapStatus(item.testStatus),
+        responsible: item.person?.userName || '未知负责人',
+        // 保留testPlanType字段用于显示启用/停用按钮
+        testPlanType: item.testPlanType
+      }));
+      totalRecords.value = response.total || 0;
+    }
+  } catch (error) {
+    console.error('获取实验数据失败:', error);
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 辅助方法
+const getTestObjectText = (type) => {
+  const typeMap = {
+    '1': '安全试验',
+    '2': '网络实验',
+    '3': '性能试验',
+    '4': '其他试验'
+  };
+  return typeMap[type] || '未知类型';
+};
+
+const calculateProgress = (status) => {
+  const progressMap = {
+    '1': 30, // 已批准
+    '2': 60, // 进行中
+    '3': 100, // 已完成
+    '4': 0 // 未通过
+  };
+  return progressMap[status] || 0;
+};
+
+const mapStatus = (status) => {
+  const statusMap = {
+    '1': 'approved', // 已批准
+    '2': 'in-progress', // 进行中
+    '3': 'completed', // 已完成
+    '4': 'rejected', // 未通过
+    '5': 'drafted' // 草稿
+  };
+  return statusMap[status] || 'drafted';
+};
+
+// 页面加载时获取数据
+onMounted(() => {
+  fetchExperimentData();
+  getUsersList(); // 加载用户列表
 });
 
-// 7. 问题类型分布
-const problemCategories = ref([
-  { name: '温度异常', rate: 85, color: '#3b82f6' },
-  { name: '内存使用率', rate: 62, color: '#10b981' },
-  { name: 'CPU负载', rate: 45, color: '#f97316' },
-  { name: '响应时间', rate: 30, color: '#8b5cf6' },
-  { name: '磁盘空间', rate: 15, color: '#ec4899' }
-]);
+// 巡检任务表格数据
+const taskTableData = ref([]);
 
-// 8. 最近巡检记录
-const recentRecords = ref([
-  {
-    name: '数据库性能巡检',
-    status: 'normal',
-    time: '2024-06-09 14:00-16:45',
-    executor: '张明',
-    summary: '数据库连接量128（阈值500），查询响应时间平均0.3S，表空间使用率75%，整体状态正常'
-  },
-  {
-    name: '生产服务器日常巡检',
-    status: 'attention',
-    time: '2024-06-09 10:00-11:30',
-    executor: '李华',
-    summary: 'CPU平均使用率35%（峰值59%），内存使用率85%（需关注），磁盘空间62%，服务运行正常'
-  },
-  {
-    name: '网络设备安全巡检',
-    status: 'problem',
-    time: '2024-06-08 09:00-10:45',
-    executor: '王强',
-    summary: '防火墙部分规则异常，安全补丁需更新，访问控制和流量监控正常，已创建问题单#PRB-2024060801'
-  }
-]);
+// 统计数据
+const statData = ref({
+  completed: 0,
+  problems: 0,
+  resolved: 0,
+  avgTime: '0分钟',
+  completeRate: 0,
+  resolveRate: 0,
+  timelyRate: 0
+});
+
+// 问题类型分布
+const problemCategories = ref([]);
+
+// 最近巡检记录
+const recentRecords = ref([]);
 
 // 9. 方法：切换顶部导航
 const handleInspection1 = () => {
@@ -677,35 +740,36 @@ const updateStatData = (range) => {
   statData.value = mockData[range];
 };
 
-// 12. 方法：切换时间范围
+// 切换时间范围
 const handleTimeRangeChange = (range) => {
   timeRange.value = range;
   updateStatData(range);
 };
 
-// 13. 方法：分页变化
+// 分页变化处理
 const handlePageChange = (page) => {
   currentPage.value = page;
-  // 实际应用中加载对应页数据
+  fetchExperimentData();
 };
+
 const handleSizeChange = (size) => {
   pageSize.value = size;
   currentPage.value = 1;
-  // 实际应用中重新加载数据
+  fetchExperimentData();
 };
 
-// 14. 方法：获取计划状态文本
+// 状态文本映射
 const getStatusText = (status) => {
   const statusMap = {
-    'drafted': '已起草',
+    'drafted': '草稿',
+    'approved': '已批准',
     'in-progress': '进行中',
     'completed': '已完成',
-    'paused': '暂停'
+    'rejected': '未通过'
   };
   return statusMap[status] || '';
 };
 
-// 15. 方法：获取任务状态文本
 const getTaskStatusText = (status) => {
   const statusMap = {
     'pending': '待接受',
@@ -716,7 +780,6 @@ const getTaskStatusText = (status) => {
   return statusMap[status] || '';
 };
 
-// 16. 方法：获取记录状态文本
 const getRecordStatusText = (status) => {
   const statusMap = {
     'normal': '正常',
@@ -726,7 +789,7 @@ const getRecordStatusText = (status) => {
   return statusMap[status] || '';
 };
 
-// 17. 方法：获取进度条颜色
+// 进度条颜色
 const getProgressColor = (status) => {
   const colorMap = { 'drafted': '#ccc', 'in-progress': '#3b82f6', 'completed': '#10b981', 'paused': '#9e9e9e' };
   return colorMap[status] || '#ccc';
@@ -734,20 +797,20 @@ const getProgressColor = (status) => {
 
 // 18. 新增实验记录弹窗相关
 const showRecordDialog = ref(false);
+const saveLoading = ref(false); // 保存加载状态
 
 // 表单数据
 const formData = ref({
-  materialName: '',
+  planName: '',
   testNumber: 'EX-20240601',
   refNumber: '',
   startDate: '',
   endDate: '',
-  appNumber: '',
-  appProject: '',
+
   testPurpose: '',
   envRequirements: '',
   manager: '',
-  participants: '张明、李华、王强、刘洋、赵云',
+  participants: [], // 改为数组存储多选的用户ID
   steps: [{ content: '' }, { content: '' }, { content: '' }],
   equipments: [
     { name: '服务器(型号:XYZ-9000)', selected: false },
@@ -758,6 +821,49 @@ const formData = ref({
   riskMitigation: ''
 });
 
+// 当前编辑的记录ID
+const editRecordId = ref(null);
+
+// 选中的用户列表（用于显示为多选框）
+const selectedUsers = ref([]);
+
+// 用户选择弹窗
+const showUserSelectDialog = ref(false);
+const availableUsers = ref([]);
+const selectedUserIds = ref([]);
+
+// 用户列表（用于负责人和参与人员选择）
+const userList = ref([]);
+
+// 获取用户列表
+const getUsersList = async () => {
+  try {
+    const response = await xunjianUserlist();
+    const userRows =
+      response?.data?.rows && Array.isArray(response.data.rows)
+        ? response.data.rows
+        : response?.rows && Array.isArray(response.rows)
+        ? response.rows
+        : Array.isArray(response)
+        ? response
+        : [];
+
+    userList.value = userRows
+      .filter((item) => item && typeof item === 'object')
+      .map((item, index) => ({
+        label: item.userName || `用户${index + 1}`,
+        value: item.id || `id_${index}`
+      }));
+
+    if (userList.value.length === 0) {
+      userList.value = [{ label: '默认用户', value: 'default' }];
+    }
+  } catch (error) {
+    console.error('获取用户失败:', error);
+    userList.value = [{ label: '默认用户', value: 'default' }];
+  }
+};
+
 // 新设备输入
 const newEquipment = ref('');
 
@@ -766,14 +872,266 @@ const handleClose = () => {
   showRecordDialog.value = false;
 };
 
-// 保存实验记录
-const handleSave = () => {
-  // 实际应用中这里应该有表单验证和提交逻辑
-  console.log('保存实验记录:', formData.value);
-  showRecordDialog.value = false;
-  // 保存成功后可以显示提示信息
+// 3. 优化保存函数，修复testNumber生成逻辑（仅在提交时生成，不预先填充）
+const handleSave = async () => {
+  try {
+    saveLoading.value = true;
+
+    // 1. 编辑模式：校验ID有效性（保持字符串ID，避免大整数问题）
+    if (editRecordId.value) {
+      // 仅校验ID存在性，不转换为数字
+      if (!editRecordId.value || typeof editRecordId.value !== 'string' || editRecordId.value.trim() === '') {
+        ElMessage.error('编辑记录ID无效，无法保存');
+        return;
+      }
+    }
+
+    // 2. 表单基础校验（增强必填项校验）
+    const { planName } = formData.value;
+    if (!planName.trim()) {
+      ElMessage.warning('请填写材料名称');
+      return;
+    }
+    // 新增时自动生成试验编号（提交时才生成，不在输入框预先显示）
+    const finalTestNumber = editRecordId.value
+      ? formData.value.testNumber // 编辑时保留原编号
+      : `EX-${new Date().getFullYear()}${String(new Date().getMonth() + 1).padStart(2, '0')}${String(new Date().getDate()).padStart(
+          2,
+          '0'
+        )}-${Date.now().toString().slice(-4)}`;
+
+    // 3. 构建请求数据
+    const requestData = {
+      projectId: 1,
+      planName: finalTestNumber, // 使用最终生成的编号
+      planCode: finalTestNumber,
+      testObject: '3',
+      beginTime: formData.value.startDate ? new Date(formData.value.startDate).toISOString() : '',
+      endTime: formData.value.endDate ? new Date(formData.value.endDate).toISOString() : '',
+      testInfo: formData.value.testPurpose,
+      testSetting: formData.value.envRequirements,
+      personCharge: formData.value.manager,
+      personIds: formData.value.participants.join(','),
+      inspectionItems: '',
+      testSolutions: formData.value.riskMitigation,
+      testStep: formData.value.steps
+        .filter((step) => step.content.trim())
+        .map((step) => step.content)
+        .join(','),
+      testDevice: formData.value.equipments
+        .filter((equip) => equip.selected)
+        .map((equip) => equip.name)
+        .join(','),
+      testStatus: '1',
+      // 关键修复：编辑时添加主键ID（与后端更新接口参数名一致）
+      id: editRecordId.value // 若后端用planId等，需改为对应字段名
+    };
+
+    // 4. 调用接口
+    let response;
+    if (editRecordId.value) {
+      // 编辑模式：调用更新接口
+      response = await updateshiyan(requestData);
+    } else {
+      // 新增模式：调用添加接口（删除请求参数中的id，避免后端报错）
+      const { id, ...addData } = requestData;
+      response = await addshiyan(addData);
+    }
+
+    if (response && response.code === 200) {
+      ElMessage.success(editRecordId.value ? '更新成功' : '新增成功');
+      showRecordDialog.value = false;
+      fetchExperimentData(); // 重新加载列表，刷新数据
+      resetForm(); // 重置表单和编辑状态
+    } else {
+      ElMessage.error(response?.msg || (editRecordId.value ? '更新失败' : '新增失败'));
+    }
+  } catch (error) {
+    console.error(editRecordId.value ? '更新异常:' : '新增异常:', error);
+    ElMessage.error('系统异常，请稍后重试');
+  } finally {
+    saveLoading.value = false;
+  }
+};
+const resetForm = () => {
+  formData.value = {
+    planName: '', // 材料名称为空
+    testNumber: '', // 试验编号为空（原逻辑自动生成，改为新增时为空）
+    refNumber: '', // 参考号为空
+    startDate: '', // 开始日期为空
+    endDate: '', // 结束日期为空
+
+    testPurpose: '', // 试验目的为空
+    envRequirements: '', // 环境要求为空
+    manager: '', // 负责人为空
+    participants: [], // 参与人员为空数组
+    steps: [{ content: '' }, { content: '' }, { content: '' }], // 步骤内容为空
+    equipments: [
+      { name: '服务器(型号:XYZ-9000)', selected: false },
+      { name: '网络测试仪(型号:NT-5000)', selected: false },
+      { name: '温度控制系统', selected: false },
+      { name: '负载生成工具', selected: false }
+    ], // 设备默认不选中
+    riskMitigation: '' // 风险识别为空
+  };
+  // 关键修复：重置编辑状态标识（清空编辑ID）
+  editRecordId.value = null;
+  selectedUsers.value = [];
+  showUserSelectDialog.value = false;
+  availableUsers.value = [];
+  selectedUserIds.value = [];
+  newEquipment.value = '';
 };
 
+// 2. 打开新增弹窗时强制重置表单
+const openRecordDialog = () => {
+  getUsersList();
+  resetForm(); // 确保打开时表单为空
+  showRecordDialog.value = true;
+};
+
+// 详情弹窗相关
+const showDetailDialog = ref(false);
+const detailLoading = ref(false);
+const detailData = ref({});
+
+// 2. 修复查看详情：以字符串形式传递ID
+const handleViewDetail = async (row) => {
+  try {
+    console.log('原始row数据:', row);
+    if (!row || !row.id) {
+      ElMessage.error('记录ID不存在，无法查看详情');
+      return;
+    }
+
+    // 直接使用字符串ID，不转为数字
+    const recordId = row.id;
+    console.log('请求详情的ID（字符串）:', recordId, '类型:', typeof recordId);
+
+    // 调用接口时直接传递字符串ID
+    const response = await shiyanDetail(recordId);
+
+    if (response.code === 200 && response.data) {
+      Object.assign(detailData.value, response.data);
+      showDetailDialog.value = true;
+    } else {
+      throw new Error(response.msg || '获取详情失败');
+    }
+  } catch (error) {
+    console.error('获取详情失败:', error);
+    ElMessage.error(`获取记录详情失败: ${error.message}`);
+  }
+};
+
+const handleEditRecord = async (row) => {
+  try {
+    // 1. 先校验row和id的有效性（保留之前的校验逻辑）
+    if (!row || !row.id) {
+      throw new Error('选中的记录不存在ID，无法编辑');
+    }
+
+    // 关键修复：设置编辑记录ID（字符串格式，避免精度丢失）
+    editRecordId.value = row.id;
+
+    // 2. 调用接口获取详情（使用字符串ID避免精度丢失）
+    const detailResponse = await shiyanDetail(row.id);
+    if (detailResponse.code !== 200) {
+      throw new Error(detailResponse.msg || '获取记录详情失败');
+    }
+    const recordDetail = detailResponse.data.rows?.[0] || detailResponse.data;
+    // 兼容两种数据结构：可能在rows数组中，也可能直接在data中
+
+    // 3. 处理testStep：将逗号分隔的字符串转换为步骤数组
+    const steps = [];
+    if (recordDetail.testStep) {
+      // 拆分字符串（例如 "1. 213,2. 321" → ["1. 213", "2. 321"]）
+      const stepItems = recordDetail.testStep.split(',');
+      stepItems.forEach((stepText) => {
+        // 移除序号前缀（如"1. "），只保留内容
+        const content = stepText.replace(/^\d+\.\s*/, '').trim();
+        if (content) {
+          steps.push({ content });
+        }
+      });
+    }
+    // 确保至少有3个步骤（如果解析后为空）
+    while (steps.length < 3) {
+      steps.push({ content: '' });
+    }
+
+    // 4. 处理testDevice：将逗号分隔的字符串转换为设备数组
+    const equipments = [];
+    if (recordDetail.testDevice) {
+      const deviceNames = recordDetail.testDevice.split(',');
+      deviceNames.forEach((name) => {
+        const trimmedName = name.trim();
+        if (trimmedName) {
+          equipments.push({ name: trimmedName, selected: true });
+        }
+      });
+    }
+    // 补充默认设备（未在记录中的设备默认不选中）
+    const defaultEquipments = [
+      { name: '服务器(型号:XYZ-9000)', selected: false },
+      { name: '网络测试仪(型号:NT-5000)', selected: false },
+      { name: '温度控制系统', selected: false },
+      { name: '负载生成工具', selected: false }
+    ];
+    // 合并记录中的设备和默认设备（去重）
+    defaultEquipments.forEach((equip) => {
+      if (!equipments.some((e) => e.name === equip.name)) {
+        equipments.push(equip);
+      }
+    });
+
+    // 5. 处理参与人员（从personIds解析）
+    const participants = [];
+    if (recordDetail.personIds) {
+      // personIds是逗号分隔的用户ID字符串（如"1968950664352530437,123"）
+      participants.push(...recordDetail.personIds.split(',').filter((id) => id.trim()));
+    }
+
+    // 6. 填充表单数据（完整映射所有字段）
+    formData.value = {
+      planName: recordDetail.planName || '',
+      testNumber: recordDetail.testNumber || recordDetail.planCode || '',
+      refNumber: recordDetail.refNumber || '',
+      // 处理日期格式（确保与date-picker兼容）
+      startDate: recordDetail.startDate || recordDetail.beginTime?.split(' ')[0] || '',
+      endDate: recordDetail.endDate || recordDetail.endTime?.split(' ')[0] || '',
+
+      testPurpose: recordDetail.testPurpose || recordDetail.testInfo || '',
+      envRequirements: recordDetail.envRequirements || recordDetail.testSetting || '',
+      manager: recordDetail.manager || recordDetail.personCharge || '',
+      participants: participants, // 从personIds解析的数组
+      steps: steps, // 解析后的步骤数组
+      equipments: equipments, // 解析并合并后的设备数组
+      riskMitigation: recordDetail.riskMitigation || recordDetail.testSolutions || ''
+    };
+
+    // 7. 处理参与人员显示（匹配用户列表）
+    if (formData.value.participants.length > 0) {
+      selectedUsers.value = formData.value.participants.map((userId) => {
+        const user = userList.value.find((u) => u.value === userId);
+        return {
+          id: userId,
+          userName: user ? user.label : `未知用户(${userId})`,
+          selected: true
+        };
+      });
+    } else {
+      selectedUsers.value = [];
+    }
+
+    // 8. 打开编辑弹窗
+    showRecordDialog.value = true;
+  } catch (error) {
+    console.error('编辑记录异常:', error);
+    ElMessage.error(`获取记录详情失败: ${error.message || '请稍后重试'}`);
+  } finally {
+    loading.value = false;
+  }
+};
 // 添加新步骤
 const addStep = () => {
   formData.value.steps.push({ content: '' });
@@ -786,6 +1144,93 @@ const addEquipment = () => {
     newEquipment.value = '';
   }
 };
+
+// 启动计划函数
+// 处理启用/停用操作
+const handleStart = async (row, actionType) => {
+  try {
+    // 1. 检查记录ID的有效性
+    if (!row || !row.id) {
+      ElMessage.error('记录不存在或ID无效，无法操作');
+      return;
+    }
+
+    // 2. 确定操作类型（1=启用，2=停用）
+    const isEnable = actionType === '1';
+    const operationText = isEnable ? '启用' : '停用';
+
+    // 3. 显示确认对话框
+    await ElMessageBox.confirm(`确定要${operationText}该试验计划吗？`, '操作确认', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    });
+
+    // 4. 获取完整的记录详情数据
+    const detailResponse = await shiyanDetail(row.id);
+    if (detailResponse.code !== 200 || !detailResponse.data) {
+      throw new Error(`获取记录详情失败，无法${operationText}`);
+    }
+    const recordDetail = detailResponse.data.rows?.[0] || detailResponse.data;
+
+    // 5. 构建完整的请求数据，包含所有必要字段
+    const requestData = {
+      id: recordDetail.id, // 确保包含ID
+      projectId: recordDetail.projectId || 1,
+      planName: recordDetail.planName || '',
+      planCode: recordDetail.planCode || '',
+      testObject: recordDetail.testObject || '3',
+      beginTime: recordDetail.beginTime || '',
+      endTime: recordDetail.endTime || '',
+      testInfo: recordDetail.testInfo || '',
+      testSetting: recordDetail.testSetting || '',
+      personCharge: recordDetail.personCharge || '',
+      personIds: recordDetail.personIds || '',
+      inspectionItems: recordDetail.inspectionItems || '',
+      testSolutions: recordDetail.testSolutions || '',
+      testStep: recordDetail.testStep || '',
+      testDevice: recordDetail.testDevice || '',
+      testStatus: recordDetail.testStatus || '1',
+      // 根据操作类型设置testPlanType的值（1=启用，2=停用）
+      testPlanType: actionType
+    };
+
+    // 5. 调用接口，传递完整数据但只修改testPlanType
+    const response = await updateshiyan(requestData);
+
+    // 6. 处理接口响应
+    if (response.code === 200) {
+      // 6.1 提示操作成功
+      ElMessage.success(`已成功${operationText}该试验计划`);
+
+      // 6.2 刷新数据列表
+      fetchExperimentData();
+    } else {
+      // 6.3 接口返回失败时提示
+      ElMessage.error(`${operationText}失败：${response.msg || '服务器异常'}`);
+    }
+  } catch (error) {
+    // 7. 捕获网络或代码错误，用户取消操作时也会进入这里
+    if (error !== 'cancel') {
+      // 排除用户主动取消的情况
+      console.error('启动操作失败:', error);
+      ElMessage.error(`操作失败：${error.message || '请检查网络或重试'}`);
+    }
+  }
+};
+
+// 日期格式化函数
+const formatDate = (dateString) => {
+  if (!dateString) return '';
+  const date = new Date(dateString);
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  const hours = String(date.getHours()).padStart(2, '0');
+  const minutes = String(date.getMinutes()).padStart(2, '0');
+  const seconds = String(date.getSeconds()).padStart(2, '0');
+  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+};
 </script>
 
 <style scoped>
@@ -795,36 +1240,40 @@ const addEquipment = () => {
   background-color: #f9fbfd;
   min-height: 100vh;
 }
-
-/* 2. 顶部导航选项卡 */
 .navigation-tabs {
   display: flex;
+  margin-bottom: 20px;
   background-color: #fff;
   border-radius: 4px;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
-  margin-bottom: 20px;
-  overflow: hidden;
+  padding: 2px;
 }
+
 .nav-tab {
   padding: 12px 24px;
   cursor: pointer;
-  transition: all 0.2s;
+  transition: all 0.3s ease;
+  border-radius: 4px;
   font-size: 14px;
-  color: #6b7280;
+  color: #606266;
+  border-right: 1px solid #f0f0f0;
   flex: 1;
   text-align: center;
-  border-right: 1px solid #f0f0f0;
 }
+
 .nav-tab:last-child {
   border-right: none;
 }
-.nav-tab:hover:not(.active) {
-  background-color: #f3f4f6;
+
+.nav-tab:hover {
+  color: #409eff;
+  background-color: #ecf5ff;
 }
+
 .nav-tab.active {
-  background-color: #165dff;
+  background-color: #409eff;
   color: #fff;
-  font-weight: 500;
+  box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
 }
 
 /* 3. 页面标题（与试验系统一致） */
@@ -904,8 +1353,8 @@ const addEquipment = () => {
 .search-btn,
 .export-btn,
 .create-btn {
-  background-color: #165dff;
-  border-color: #165dff;
+  height: 36px;
+  border-radius: 4px;
 }
 
 /* 6. 表格容器（与试验系统一致） */
@@ -939,7 +1388,7 @@ const addEquipment = () => {
   transition: width 0.3s ease;
 }
 
-/* 8. 状态标签样式（扩展试验系统） */
+/* 8. 状态标签样式（与其他页面保持一致） */
 .status-tag {
   display: inline-block;
   padding: 2px 8px;
@@ -947,32 +1396,32 @@ const addEquipment = () => {
   font-size: 12px;
 }
 .status-drafted {
-  background-color: #e0efff;
-  color: #165dff;
+  background-color: #f2f3f5;
+  color: #86909c;
+}
+.status-approved {
+  background-color: #eff6ff;
+  color: #2563eb;
 }
 .status-in-progress {
-  background-color: #e0f2fe;
-  color: #0284c7;
+  background-color: #fff7e0;
+  color: #ff7d00;
 }
 .status-completed {
   background-color: #e6ffed;
   color: #00b42a;
 }
-.status-paused {
-  background-color: #f2f3f5;
-  color: #86909c;
+.status-rejected {
+  background-color: #fff2f0;
+  color: #f5222d;
 }
 .status-pending {
   background-color: #f9fafb;
   color: #6b7280;
 }
 .status-accepted {
-  background-color: #eff6ff;
-  color: #2563eb;
-}
-.status-rejected {
-  background-color: #fee2e2;
-  color: #dc2626;
+  background-color: #e0f2fe;
+  color: #0284c7;
 }
 .status-normal {
   background-color: #e6ffed;
@@ -1585,4 +2034,221 @@ const addEquipment = () => {
     width: 100%;
   }
 }
+
+/* 详情弹窗样式 */
+.custom-experiment-dialog .el-dialog__body {
+  padding: 20px;
+  overflow: hidden;
+}
+
+.detail-content {
+  max-height: 600px;
+  overflow-y: auto;
+  padding-right: 8px;
+}
+
+/* 详情区块 */
+.detail-section {
+  margin-bottom: 24px;
+  padding: 16px;
+  border: 1px solid #e4e7ed;
+  border-radius: 8px;
+  background-color: #ffffff;
+}
+
+.section-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #1890ff;
+  margin-bottom: 16px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #e8f4ff;
+}
+
+/* 基础信息网格 */
+.detail-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 16px;
+}
+
+.detail-item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.detail-label {
+  font-size: 13px;
+  font-weight: 500;
+  color: #6c757d;
+}
+
+.detail-value {
+  font-size: 14px;
+  color: #2c3e50;
+  padding: 4px 0;
+}
+
+/* 文本区域 */
+.detail-textarea {
+  margin-bottom: 16px;
+}
+
+.detail-text {
+  font-size: 14px;
+  color: #495057;
+  line-height: 1.6;
+  padding: 8px 0;
+  min-height: 60px;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+/* 设备列表样式 */
+.device-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.device-tag {
+  display: inline-block;
+  padding: 6px 12px;
+  background-color: #f0f9ff;
+  color: #1890ff;
+  border: 1px solid #bae7ff;
+  border-radius: 16px;
+  font-size: 13px;
+}
+
+/* 步骤条样式 */
+.steps-container {
+  padding-left: 8px;
+}
+
+.step-item {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 16px;
+  position: relative;
+}
+
+.step-item:last-child {
+  margin-bottom: 0;
+}
+
+.step-item:not(:last-child)::after {
+  content: '';
+  position: absolute;
+  left: 17px;
+  top: 36px;
+  bottom: -16px;
+  width: 2px;
+  background-color: #e4e7ed;
+  z-index: 1;
+}
+
+.step-number {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background-color: #1890ff;
+  color: white;
+  font-size: 14px;
+  font-weight: 600;
+  margin-right: 16px;
+  flex-shrink: 0;
+  z-index: 2;
+}
+
+.step-content {
+  flex: 1;
+  padding: 8px 16px;
+  background-color: #fafafa;
+  border-radius: 6px;
+  font-size: 14px;
+  color: #2c3e50;
+  line-height: 1.5;
+}
+
+/* 列表样式 */
+.participant-list,
+.inspection-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.participant-item,
+.inspection-item {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  padding: 12px 16px;
+  background-color: #f8f9fa;
+  border-radius: 8px;
+}
+
+.participant-name,
+.inspection-name {
+  font-size: 14px;
+  font-weight: 500;
+  color: #2c3e50;
+  min-width: 120px;
+}
+
+.participant-team,
+.participant-role,
+.inspection-type {
+  font-size: 13px;
+  color: #6c757d;
+}
+
+.participant-item,
+.inspection-item {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  padding: 12px 16px;
+  background-color: #f8f9fa;
+  border-radius: 8px;
+}
+
+.participant-name,
+.inspection-name {
+  font-size: 14px;
+  font-weight: 500;
+  color: #2c3e50;
+  min-width: 120px;
+}
+
+.participant-team,
+.participant-role,
+.inspection-type {
+  font-size: 13px;
+  color: #6c757d;
+}
+
+/* 详情弹窗响应式设计 */
+@media (max-width: 768px) {
+  .detail-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .participant-item,
+  .inspection-item {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .participant-name,
+  .inspection-name {
+    min-width: auto;
+  }
+}
 </style>
diff --git a/src/views/zhinengxunjian/shiyanjilu.vue b/src/views/zhinengxunjian/shiyanjilu.vue
index a7f6ee1..584bdfa 100644
--- a/src/views/zhinengxunjian/shiyanjilu.vue
+++ b/src/views/zhinengxunjian/shiyanjilu.vue
@@ -12,7 +12,6 @@
       </div>
 
       <div class="header-container">
-        <TitleComponent title="实验管理系统" subtitle="制定巡检计划，安排巡检任务，跟进巡检记录"></TitleComponent>
         <div class="header-actions">
           <el-button type="primary" class="export-btn">筛选</el-button>
           <el-button type="primary" class="create-btn">导入数据</el-button>
@@ -278,7 +277,7 @@
 <script setup>
 import { ref, computed } from 'vue';
 import router from '@/router';
-import TitleComponent from './TitleComponent.vue';
+
 // 1. 选项卡状态管理
 const activeTab = ref('record'); // 默认显示"巡检记录"
 const showFilter = ref(false);
@@ -360,35 +359,41 @@ const handleInspectionManagement3 = () => {
   min-height: 100vh;
 }
 
-/* 2. 顶部导航选项卡 */
+/* 导航栏样式 */
 .navigation-tabs {
   display: flex;
+  margin-bottom: 20px;
   background-color: #fff;
   border-radius: 4px;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
-  margin-bottom: 20px;
-  overflow: hidden;
+  padding: 2px;
 }
+
 .nav-tab {
   padding: 12px 24px;
   cursor: pointer;
-  transition: all 0.2s;
+  transition: all 0.3s ease;
+  border-radius: 4px;
   font-size: 14px;
-  color: #6b7280;
+  color: #606266;
+  border-right: 1px solid #f0f0f0;
   flex: 1;
   text-align: center;
-  border-right: 1px solid #f0f0f0;
 }
+
 .nav-tab:last-child {
   border-right: none;
 }
-.nav-tab:hover:not(.active) {
-  background-color: #f3f4f6;
+
+.nav-tab:hover {
+  color: #409eff;
+  background-color: #ecf5ff;
 }
+
 .nav-tab.active {
-  background-color: #165dff;
+  background-color: #409eff;
   color: #fff;
-  font-weight: 500;
+  box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
 }
 
 /* 选项卡样式 */
@@ -457,8 +462,8 @@ const handleInspectionManagement3 = () => {
 }
 .search-btn,
 .export-btn {
-  background-color: #165dff;
-  border-color: #165dff;
+  height: 36px;
+  border-radius: 4px;
 }
 .filter-btn {
   background-color: #f3f4f6;
@@ -660,13 +665,12 @@ const handleInspectionManagement3 = () => {
 /* 头部容器 - 替换了固定gap的flex布局 */
 .header-container {
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-end;
   align-items: center;
 }
 
 .header-actions {
   display: flex;
-  align-items: center;
   gap: 10px;
 }
 /* 12. 统计卡片样式 */
@@ -807,35 +811,36 @@ const handleInspectionManagement3 = () => {
 
 .progress-line {
   flex: 1;
-  height: 2px;
-  background-color: #e5e7eb;
+  height: 0;
+  border-top: 2px dashed #e5e7eb;
+  margin: 10px 0;
 }
 
 .progress-step.active .step-number {
-  background-color: #165dff;
+  background-color: #10b981;
   color: white;
 }
 
 .progress-step.active .step-name {
-  color: #165dff;
+  color: #10b981;
   font-weight: 500;
 }
 
 .progress-line.active {
-  background-color: #165dff;
+  border-top-color: #10b981;
 }
 
 .progress-step.failed .step-number {
-  background-color: #dc2626;
+  background-color: red;
   color: white;
 }
 
 .progress-step.failed .step-name {
-  color: #dc2626;
+  color: red;
 }
 
 .progress-line.failed {
-  background-color: #dc2626;
+  border-top-color: red;
 }
 
 /* 15. 试验结果样式 */
diff --git a/src/views/zhinengxunjian/shiyanrenwu.vue b/src/views/zhinengxunjian/shiyanrenwu.vue
index 644dc56..b4fcced 100644
--- a/src/views/zhinengxunjian/shiyanrenwu.vue
+++ b/src/views/zhinengxunjian/shiyanrenwu.vue
@@ -1,25 +1,23 @@
 <template>
   <div>
     <div class="inspection-tasks">
+      <!-- 导航栏 -->
       <div class="navigation-tabs">
         <div class="nav-tab" @click="handleInspection1">待办事项</div>
-        <div class="nav-tab active" @click="handleInspection2">巡检管理</div>
-        <div class="nav-tab" @click="handleInspection3">试验管理</div>
+        <div class="nav-tab" @click="handleInspection2">巡检管理</div>
+        <div class="nav-tab active" @click="handleInspection3">试验管理</div>
         <div class="nav-tab" @click="handleInspection4">报修管理</div>
         <div class="nav-tab" @click="handleInspection5">抢修管理</div>
         <div class="nav-tab" @click="handleInspection6">工单管理</div>
         <div class="nav-tab" @click="handleInspection7">运维组织</div>
       </div>
 
-      <!-- 页面标题 -->
-      <TitleComponent title="运维巡检管理" subtitle="制定巡检计划，安排巡检任务，跟进巡检记录"></TitleComponent>
-
       <!-- 选项卡 -->
       <div class="tabs-wrapper">
         <div style="display: flex; align-items: center; gap: 10px">
-          <el-button type="primary" @click="handleInspectionManagement1">巡检计划</el-button>
-          <el-button type="primary" @click="handleInspectionManagement2">巡检任务</el-button>
-          <el-button type="primary" @click="handleInspectionManagement3">巡检记录</el-button>
+          <el-button type="primary" @click="handleInspectionManagement1">试验计划</el-button>
+          <el-button type="primary" @click="handleInspectionManagement2">试验任务</el-button>
+          <el-button type="primary" @click="handleInspectionManagement3">试验记录</el-button>
         </div>
       </div>
 
@@ -28,46 +26,49 @@
         <div class="filter-container">
           <div class="filter-item">
             <el-select v-model="taskStatus" placeholder="任务状态">
-              <el-option label="待执行" value="pending"></el-option>
-              <el-option label="执行中" value="executing"></el-option>
-              <el-option label="已延期" value="delayed"></el-option>
-              <el-option label="已完成" value="completed"></el-option>
+              <el-option label="待执行" value="1"></el-option>
+              <el-option label="执行中" value="4"></el-option>
+              <el-option label="已延期" value="2"></el-option>
+              <!-- 接口“暂停”对应页面“已延期” -->
+              <el-option label="已完成" value="5"></el-option>
+              <el-option label="失败" value="3"></el-option>
             </el-select>
           </div>
           <div class="filter-item">
             <el-select v-model="planType" placeholder="全部计划">
-              <el-option label="每日巡检计划" value="daily"></el-option>
-              <el-option label="每周巡检计划" value="weekly"></el-option>
-              <el-option label="每月巡检计划" value="monthly"></el-option>
-              <el-option label="每季度巡检计划" value="quarterly"></el-option>
+              <el-option label="每日巡检计划" value="1"></el-option>
+              <!-- 对应接口testPlanId -->
+              <el-option label="每周巡检计划" value="2"></el-option>
+              <el-option label="每月巡检计划" value="3"></el-option>
             </el-select>
           </div>
           <div class="filter-item">
             <el-select v-model="executor" placeholder="执行人">
               <el-option label="全部人员" value="all"></el-option>
-              <el-option label="张明" value="zhangming"></el-option>
-              <el-option label="李华" value="lihua"></el-option>
-              <el-option label="王强" value="wangqiang"></el-option>
+              <el-option v-for="user in userList" :key="user.id" :label="user.userName" :value="user.id"></el-option>
             </el-select>
           </div>
           <div class="filter-actions">
-            <el-button type="primary" class="search-btn">搜索</el-button>
+            <el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
             <el-button type="primary" icon="el-icon-plus" class="create-btn" @click="handleCreateTask"> 手动创建任务 </el-button>
           </div>
         </div>
       </div>
 
+      <!-- 加载状态 -->
+      <el-skeleton v-if="loading" :count="8" :columns="3" class="mb-4"></el-skeleton>
+
+      <!-- 无数据提示 -->
+      <div v-else-if="total === 0" class="no-data">
+        <el-empty description="暂无试验任务数据"></el-empty>
+      </div>
+
       <!-- 任务卡片列表 -->
-      <div class="task-cards">
-        <div class="task-card" v-for="(task, index) in pagedTasks" :key="index" :class="task.cardClass">
+      <div class="task-cards" v-else>
+        <div class="task-card" v-for="task in pagedTasks" :key="task.id" :class="task.cardClass">
           <div class="task-header">
-            <div class="task-title">
-              {{ task.title }}
-            </div>
-            <div class="task-status" :class="task.tagClass">
-              <!-- 标签专用类名，控制标签样式 -->
-              {{ task.statusText }}
-            </div>
+            <div class="task-title">{{ task.title }}</div>
+            <div class="task-status" :class="task.tagClass">{{ task.statusText }}</div>
           </div>
 
           <div class="task-details">
@@ -76,7 +77,7 @@
               <span class="detail-value">{{ task.planTime }}</span>
             </div>
             <div class="detail-item">
-              <span class="detail-label">巡检对象</span>
+              <span class="detail-label">测试对象</span>
               <span class="detail-value">{{ task.target }}</span>
             </div>
             <div class="detail-item">
@@ -88,20 +89,22 @@
               <span class="detail-value">{{ task.relatedPlan }}</span>
             </div>
 
-            <!-- 特定状态的额外信息 -->
-            <div v-if="task.status === 'delayed'" class="delay-reason">
+            <!-- 已延期（暂停）原因 -->
+            <div v-if="task.status === '2'" class="delay-reason">
               <span class="detail-label">延期原因</span>
-              <span class="detail-value">{{ task.delayReason }}</span>
+              <span class="detail-value">{{ task.delayReason || '未填写' }}</span>
             </div>
 
-            <div v-if="task.status === 'executing'" class="progress-container">
+            <!-- 执行中进度 -->
+            <div v-if="task.status === '4'" class="progress-container">
               <span class="detail-label">完成进度</span>
-              <div class="progress-bar">
-                <el-progress :percentage="task.progress" stroke-width="6" :stroke-color="task.progressColor"></el-progress>
+              <div class="progress-bar" style="flex: 1; padding-left: 0; margin-top: 0">
+                <el-progress :percentage="task.progress || 0" stroke-width="6" :stroke-color="task.progressColor"></el-progress>
               </div>
             </div>
 
-            <div v-if="task.status === 'completed'" class="task-result">
+            <!-- 已完成/失败结果 -->
+            <div v-if="task.status === '5' || task.status === '3'" class="task-result">
               <span class="detail-label">结果</span>
               <span class="detail-value" :class="task.resultClass">{{ task.result }}</span>
             </div>
@@ -117,7 +120,7 @@
       </div>
 
       <!-- 分页区域 -->
-      <div class="pagination-section">
+      <div class="pagination-section" v-if="total > 0">
         <div class="pagination-controls">
           <el-pagination
             @size-change="handleSizeChange"
@@ -125,7 +128,7 @@
             :current-page="currentPage"
             :page-sizes="[8, 12, 16, 20]"
             :page-size="pageSize"
-            layout="prev, pager, next, jumper"
+            layout="prev, pager, next, jumper, ->, total"
             :total="total"
             background
           >
@@ -139,11 +142,9 @@
           <el-form-item label="任务名称" prop="taskName">
             <el-input v-model="createTaskForm.taskName" placeholder="输入任务名称" />
           </el-form-item>
-
           <el-form-item label="巡检对象" prop="inspectionTarget">
             <el-input v-model="createTaskForm.inspectionTarget" placeholder="输入巡检内容" />
           </el-form-item>
-
           <el-form-item label="时间" prop="timeRange">
             <el-date-picker
               v-model="createTaskForm.timeRange"
@@ -155,28 +156,43 @@
               placeholder="选择时间范围"
             />
           </el-form-item>
-
-          <el-form-item label="关联计划">
+          <el-form-item label="关联计划" prop="relatedPlan">
             <el-select v-model="createTaskForm.relatedPlan" placeholder="选择关联计划">
-              <el-option label="全部计划" value="all" />
-              <el-option label="每日巡检计划" value="daily" />
-              <el-option label="每周巡检计划" value="weekly" />
-              <el-option label="每月巡检计划" value="monthly" />
-              <el-option label="每季度巡检计划" value="quarterly" />
+              <el-option v-for="plan in experimentPlanList" :key="plan.id" :label="plan.planName" :value="plan.id" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="执行人" prop="executor">
+            <el-select v-model="createTaskForm.executor" placeholder="选择执行人">
+              <el-option v-for="user in userList" :key="user.id" :label="user.userName" :value="user.id" />
             </el-select>
           </el-form-item>
 
-          <el-form-item label="执行人">
-            <el-select v-model="createTaskForm.executor" placeholder="选择执行人">
-              <el-option label="全部人员" value="all" />
-              <el-option label="张明" value="zhangming" />
-              <el-option label="李华" value="lihua" />
-              <el-option label="王强" value="wangqiang" />
-              <el-option label="赵伟" value="zhaowei" />
-            </el-select>
+          <el-form-item label="开始时间" prop="workTimeRange1">
+            <el-time-picker
+              v-model="createTaskForm.workTimeRange1"
+              type="timerange"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
+              format="HH:mm"
+              value-format="HH:mm"
+              class="form-input"
+              style="width: 100%"
+            />
+          </el-form-item>
+
+          <el-form-item label="结束时间" prop="workTimeRange2">
+            <el-time-picker
+              v-model="createTaskForm.workTimeRange2"
+              type="timerange"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
+              format="HH:mm"
+              value-format="HH:mm"
+              class="form-input"
+              style="width: 100%"
+            />
           </el-form-item>
         </el-form>
-
         <template #footer>
           <span class="dialog-footer">
             <el-button @click="handleCancelCreateTask">取消</el-button>
@@ -184,248 +200,746 @@
           </span>
         </template>
       </el-dialog>
+
+      <!-- 任务详情弹窗 -->
+      <el-dialog v-model="detailDialogVisible" title="任务详情" width="800px" :close-on-click-modal="false" center>
+        <div v-if="detailData" class="task-detail-container">
+          <!-- 任务基本信息卡片 -->
+          <div class="detail-card">
+            <h3 class="card-title">任务基本信息</h3>
+            <div class="card-content">
+              <div class="info-row">
+                <div class="info-item">
+                  <span class="info-label">任务名称：</span>
+                  <span class="info-value">{{ detailData.taskName }}</span>
+                </div>
+                <div class="info-item">
+                  <span class="info-label">任务状态：</span>
+                  <span class="info-value" :class="getStatusClass(detailData.status)">
+                    {{ getStatusText(detailData.status) }}
+                  </span>
+                </div>
+              </div>
+              <div class="info-row">
+                <div class="info-item">
+                  <span class="info-label">测试对象：</span>
+                  <span class="info-value">{{ detailData.testObject }}</span>
+                </div>
+                <div class="info-item">
+                  <span class="info-label">完成进度：</span>
+                  <span class="info-value">{{ detailData.progress }}%</span>
+                </div>
+              </div>
+              <div class="info-row">
+                <div class="info-item">
+                  <span class="info-label">开始时间：</span>
+                  <span class="info-value">{{ detailData.beginTime }}</span>
+                </div>
+                <div class="info-item">
+                  <span class="info-label">结束时间：</span>
+                  <span class="info-value">{{ detailData.endTime }}</span>
+                </div>
+              </div>
+              <div class="info-row">
+                <div class="info-item">
+                  <span class="info-label">工作时间段：</span>
+                  <span class="info-value">{{ detailData.timeInfo ? detailData.timeInfo.replace(/,/g, '—') : '-' }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 执行人信息卡片 -->
+          <div class="detail-card">
+            <h3 class="card-title">执行人信息</h3>
+            <div class="card-content">
+              <div v-if="detailData.personInfo" class="info-row">
+                <div class="info-item">
+                  <span class="info-label">姓名：</span>
+                  <span class="info-value">{{ detailData.personInfo.userName }}</span>
+                </div>
+                <div class="info-item">
+                  <span class="info-label">联系电话：</span>
+                  <span class="info-value">{{ detailData.personInfo.phone }}</span>
+                </div>
+              </div>
+              <div v-if="detailData.personInfo" class="info-row">
+                <div class="info-item">
+                  <span class="info-label">性别：</span>
+                  <span class="info-value">{{ detailData.personInfo.sex === '1' ? '男' : '女' }}</span>
+                </div>
+                <div class="info-item">
+                  <span class="info-label">民族：</span>
+                  <span class="info-value">{{ detailData.personInfo.nation }}</span>
+                </div>
+              </div>
+              <div v-else class="no-info">暂无执行人信息</div>
+            </div>
+          </div>
+
+          <!-- 关联计划信息卡片 -->
+          <div class="detail-card">
+            <h3 class="card-title">关联计划信息</h3>
+            <div class="card-content">
+              <div v-if="detailData.testPlan" class="info-row">
+                <div class="info-item">
+                  <span class="info-label">计划名称：</span>
+                  <span class="info-value">{{ detailData.testPlan.planName }}</span>
+                </div>
+                <div class="info-item">
+                  <span class="info-label">计划编号：</span>
+                  <span class="info-value">{{ detailData.testPlan.planCode }}</span>
+                </div>
+              </div>
+              <div v-if="detailData.testPlan" class="info-row">
+                <div class="info-item">
+                  <span class="info-label">计划时间：</span>
+                  <span class="info-value">{{ detailData.testPlan.beginTime }} — {{ detailData.testPlan.endTime }}</span>
+                </div>
+              </div>
+              <div v-if="detailData.testPlan && detailData.testPlan.testDevice" class="info-row">
+                <div class="info-item full-width">
+                  <span class="info-label">测试设备：</span>
+                  <span class="info-value">{{ detailData.testPlan.testDevice }}</span>
+                </div>
+              </div>
+              <div v-else class="no-info">暂无关联计划信息</div>
+            </div>
+          </div>
+
+          <!-- 任务执行结果信息卡片（如果有） -->
+          <div v-if="detailData.testFinal || detailData.failReason" class="detail-card">
+            <h3 class="card-title">执行结果信息</h3>
+            <div class="card-content">
+              <div v-if="detailData.testFinal" class="info-row">
+                <div class="info-item full-width">
+                  <span class="info-label">测试结果：</span>
+                  <span class="info-value">{{ detailData.testFinal }}</span>
+                </div>
+              </div>
+              <div v-if="detailData.failReason" class="info-row">
+                <div class="info-item full-width">
+                  <span class="info-label">失败原因：</span>
+                  <span class="info-value fail-reason">{{ detailData.failReason }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div v-else class="loading-details">
+          <el-skeleton :count="6" :columns="2" />
+        </div>
+        <template #footer>
+          <span class="dialog-footer">
+            <el-button @click="detailDialogVisible = false">关闭</el-button>
+          </span>
+        </template>
+      </el-dialog>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, onMounted, getCurrentInstance } from 'vue';
 import router from '@/router';
-import TitleComponent from './TitleComponent.vue';
+// 引入已定义的接口函数
+import { syrenwulist, syrenwuDetail, addsyrenwu, updatesyrenwu } from '@/api/zhinengxunjian/shiyan/renwu';
+import { shiyanlist } from '@/api/zhinengxunjian/shiyan';
+import { xunjianUserlist } from '@/api/zhinengxunjian/xunjian/index';
+// 引入Element Plus组件（提示/空状态/骨架屏/弹窗）
+import { ElMessage, ElEmpty, ElSkeleton, ElForm, ElMessageBox } from 'element-plus';
 
-// 激活的选项卡
-const activeTab = ref('task');
-
-// 筛选条件
-const taskStatus = ref('');
-const planType = ref('');
-const executor = ref('');
-
-// 任务数据 - 分离了卡片类和标签类
-const tasks = ref([
-  {
-    title: '生产服务器日常巡检',
-    status: 'pending',
-    statusText: '待执行',
-    cardClass: 'card-pending', // 卡片专用类（控制阴影和左侧线）
-    tagClass: 'tag-pending', // 标签专用类（控制标签样式）
-    planTime: '2025-06-16 08:30',
-    target: '生产服务器集群(12台)',
-    executor: '张明',
-    relatedPlan: '每日巡检计划',
-    actionText: '开始执行',
-    actionClass: 'start-btn'
-  },
-  {
-    title: '机房环境检查',
-    status: 'delayed',
-    statusText: '已延期',
-    cardClass: 'card-delayed',
-    tagClass: 'tag-delayed',
-    planTime: '2025-06-16 08:30',
-    target: '机房温度、湿度、电源',
-    executor: '李华',
-    relatedPlan: '每周巡检计划',
-    delayReason: '设备维修处理中',
-    actionText: '重新安排',
-    actionClass: 'reschedule-btn'
-  },
-  {
-    title: '网络设备安全巡检',
-    status: 'executing',
-    statusText: '执行中',
-    cardClass: 'card-executing',
-    tagClass: 'tag-executing',
-    planTime: '2025-06-16 09:30',
-    target: '核心交换机、防火墙',
-    executor: '王强',
-    relatedPlan: '每周巡检计划',
-    progress: 60,
-    progressColor: '#FF7D00',
-    actionText: '完成',
-    actionClass: 'complete-btn'
-  },
-  {
-    title: '数据库性能巡检',
-    status: 'completed',
-    statusText: '已完成',
-    cardClass: 'card-completed',
-    tagClass: 'tag-completed',
-    planTime: '2025-06-16 10:30',
-    target: '生产数据库集群(2组)',
-    executor: '赵伟',
-    relatedPlan: '每月巡检计划',
-    result: '正常',
-    resultClass: 'result-normal',
-    actionText: '查看报告',
-    actionClass: 'report-btn'
-  },
-  {
-    title: '生产服务器日常巡检',
-    status: 'pending',
-    statusText: '待执行',
-    cardClass: 'card-pending',
-    tagClass: 'tag-pending',
-    planTime: '2025-06-16 13:30',
-    target: '生产服务器集群(12台)',
-    executor: '张明',
-    relatedPlan: '每日巡检计划',
-    actionText: '开始执行',
-    actionClass: 'start-btn'
-  },
-  {
-    title: '机房环境检查',
-    status: 'delayed',
-    statusText: '已延期',
-    cardClass: 'card-delayed',
-    tagClass: 'tag-delayed',
-    planTime: '2025-06-16 14:00',
-    target: '机房温度、湿度、电源',
-    executor: '李华',
-    relatedPlan: '每周巡检计划',
-    delayReason: '设备维修处理中',
-    actionText: '重新安排',
-    actionClass: 'reschedule-btn'
-  },
-  {
-    title: '网络设备安全巡检',
-    status: 'executing',
-    statusText: '执行中',
-    cardClass: 'card-executing',
-    tagClass: 'tag-executing',
-    planTime: '2025-06-16 15:00',
-    target: '核心交换机、防火墙',
-    executor: '王强',
-    relatedPlan: '每周巡检计划',
-    progress: 35,
-    progressColor: '#FF7D00',
-    actionText: '完成',
-    actionClass: 'complete-btn'
-  },
-  {
-    title: '数据库性能巡检',
-    status: 'completed',
-    statusText: '已完成',
-    cardClass: 'card-completed',
-    tagClass: 'tag-completed',
-    planTime: '2025-06-16 16:00',
-    target: '生产数据库集群(2组)',
-    executor: '赵伟',
-    relatedPlan: '每月巡检计划',
-    result: '正常',
-    resultClass: 'result-normal',
-    actionText: '查看报告',
-    actionClass: 'report-btn'
+/**
+ * 根据任务ID获取完整的任务详情数据
+ * @param {string|number} taskId - 任务ID
+ * @returns {Promise<Object|null>} 完整的任务数据对象或null（获取失败）
+ */
+const getTaskDetails = async (taskId) => {
+  try {
+    const response = await syrenwuDetail(taskId);
+    if (response.code === 200 && response.data) {
+      // 直接返回接口数据，不做映射转换
+      return response.data;
+    } else {
+      const errorMsg = response.msg || '未知错误';
+      console.error(`获取任务详情失败: ${errorMsg}`);
+      ElMessage.warning(`获取任务详情失败：${errorMsg}`);
+      return null;
+    }
+  } catch (error) {
+    console.error('任务详情请求异常:', error);
+    ElMessage.error('任务详情请求异常：' + error.message);
+    return null;
   }
-]);
-
-// 分页相关
-const currentPage = ref(1);
-const pageSize = ref(8);
-const total = ref(tasks.value.length);
-
-// 状态排序映射
-const statusOrder = {
-  pending: 0, // 待完成
-  delayed: 1, // 已延期
-  executing: 2, // 执行中
-  completed: 3 // 已完成
 };
 
-// 分页处理后的数据（含排序）
-const pagedTasks = computed(() => {
-  // 先按状态排序
-  const sortedTasks = [...tasks.value].sort((a, b) => {
-    return statusOrder[a.status] - statusOrder[b.status];
-  });
+// ============== 1. 基础状态管理 ==============
+// 加载状态
+const loading = ref(false);
+// 筛选条件（与接口参数对应）
+const taskStatus = ref(''); // 任务状态：1=待执行，2=暂停（已延期），3=失败，4=执行中，5=已完成
+const planType = ref(''); // 关联计划ID：1=每日，2=每周，3=每月
+const executor = ref('all'); // 执行人ID：all=全部
 
-  // 再进行分页
-  const startIndex = (currentPage.value - 1) * pageSize.value;
-  const endIndex = startIndex + pageSize.value;
-  return sortedTasks.slice(startIndex, endIndex);
-});
+// 用户列表（通过xunjianUserlist接口获取）
+const userList = ref([]);
 
-// 搜索处理
-const handleSearch = () => {
-  currentPage.value = 1; // 重置到第一页
-  // 实际应用中这里会根据筛选条件过滤数据
+// 试验计划列表（通过shiyanlist接口获取）
+const experimentPlanList = ref([]);
+
+// 分页参数（与接口pageNum/pageSize对应）
+const currentPage = ref(1); // 当前页
+const pageSize = ref(8); // 每页条数
+const total = ref(0); // 总条数
+
+// 任务列表（接口返回数据）
+const tasks = ref([]);
+
+// 详情弹窗相关
+const detailDialogVisible = ref(false);
+const detailData = ref(null);
+
+/**
+ * 获取任务状态文本
+ * @param {string} status - 任务状态码
+ * @returns {string} 状态文本
+ */
+const getStatusText = (status) => {
+  const statusMap = {
+    '1': '待执行',
+    '2': '已延期',
+    '3': '失败',
+    '4': '执行中',
+    '5': '已完成'
+  };
+  return statusMap[status] || '未知状态';
 };
 
-// 创建任务弹窗相关
+/**
+ * 获取任务状态对应的样式类
+ * @param {string} status - 任务状态码
+ * @returns {string} 样式类名
+ */
+const getStatusClass = (status) => {
+  const statusClassMap = {
+    '1': 'status-pending',
+    '2': 'status-delayed',
+    '3': 'status-failed',
+    '4': 'status-running',
+    '5': 'status-completed'
+  };
+  return statusClassMap[status] || '';
+};
+
+// 创建任务弹窗
 const createTaskDialogVisible = ref(false);
+const createTaskFormRef = ref(null);
 const createTaskForm = ref({
-  taskName: '',
-  inspectionTarget: '',
-  timeRange: [],
-  relatedPlan: 'all',
-  executor: 'all'
+  taskName: '', // 任务名称（接口taskName）
+  inspectionTarget: '', // 巡检对象（接口testObject）
+  timeRange: [], // 时间范围（开始=beginTime，结束=endTime）
+  relatedPlan: '', // 关联计划ID（接口testPlanId）
+  executor: '', // 执行人ID（接口person）
+  workTimeRange1: null, // 工作时间段1
+  workTimeRange2: null // 工作时间段2
 });
-
+// 创建任务表单规则
 const createTaskRules = {
   taskName: [{ required: true, message: '请输入任务名称', trigger: 'blur' }],
   inspectionTarget: [{ required: true, message: '请输入巡检对象', trigger: 'blur' }],
-  timeRange: [{ required: true, message: '请选择时间范围', trigger: 'change' }]
+  timeRange: [{ required: true, message: '请选择时间范围', trigger: 'change' }],
+  workTimeRange1: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
+  relatedPlan: [{ required: true, message: '请选择关联计划', trigger: 'change' }],
+  executor: [{ required: true, message: '请选择执行人', trigger: 'change' }]
 };
 
-// 创建任务
-const handleCreateTask = () => {
-  createTaskDialogVisible.value = true;
+// 构建timeInfo字符串
+const getTaskTimeInfoString = () => {
+  const timeInfoArray = [];
+
+  // 处理工作时间段1
+  if (createTaskForm.value.workTimeRange1) {
+    if (Array.isArray(createTaskForm.value.workTimeRange1)) {
+      timeInfoArray.push(createTaskForm.value.workTimeRange1.join('-'));
+    } else if (typeof createTaskForm.value.workTimeRange1 === 'string') {
+      timeInfoArray.push(createTaskForm.value.workTimeRange1);
+    }
+  }
+
+  // 处理工作时间段2
+  if (createTaskForm.value.workTimeRange2) {
+    if (Array.isArray(createTaskForm.value.workTimeRange2)) {
+      timeInfoArray.push(createTaskForm.value.workTimeRange2.join('-'));
+    } else if (typeof createTaskForm.value.workTimeRange2 === 'string') {
+      timeInfoArray.push(createTaskForm.value.workTimeRange2);
+    }
+  }
+
+  return timeInfoArray.join(',');
 };
 
-// 保存任务
-const handleSaveTask = () => {
-  // 模拟保存任务逻辑
-  console.log('保存任务:', createTaskForm.value);
-  // 关闭弹窗
-  createTaskDialogVisible.value = false;
-  // 重置表单
-  createTaskForm.value = {
-    taskName: '',
-    inspectionTarget: '',
-    timeRange: [],
-    relatedPlan: 'all',
-    executor: 'all'
+const getUsersList = async () => {
+  try {
+    const response = await xunjianUserlist({});
+    if (response.code === 200) {
+      // 从任务数据中提取用户信息
+      const usersMap = new Map(); // 使用Map确保id唯一
+      const tasks = response.rows || [];
+
+      tasks.forEach((task) => {
+        // 提取personInfo中的用户信息
+        if (task.personInfo && task.personInfo.id && task.personInfo.userName) {
+          usersMap.set(task.personInfo.id, {
+            id: task.personInfo.id,
+            userName: task.personInfo.userName
+          });
+        }
+
+        // 提取testPlan.persons中的用户信息
+        if (task.testPlan && task.testPlan.persons && Array.isArray(task.testPlan.persons)) {
+          task.testPlan.persons.forEach((person) => {
+            if (person.id && person.userName) {
+              usersMap.set(person.id, {
+                id: person.id,
+                userName: person.userName
+              });
+            }
+          });
+        }
+      });
+
+      // 将Map转换为下拉选择器需要的格式：{ label, value }
+      userList.value = Array.from(usersMap.values()).map((user) => ({
+        label: user.userName, // 显示在下拉框中的文本
+        value: user.id // 选中后的值
+      }));
+
+      // 调试信息，确认数据格式正确
+      console.log('处理后的用户列表:', userList.value);
+    }
+  } catch (error) {
+    console.error('获取用户列表失败:', error);
+    // 出错时提供默认选项，避免下拉框为空
+    userList.value = [{ label: '默认用户', value: '' }];
+  }
+};
+
+// 获取试验计划列表
+const getExperimentPlanList = async () => {
+  try {
+    const response = await shiyanlist({});
+    if (response.code === 200) {
+      // 根据实际接口返回格式处理数据
+      experimentPlanList.value = response.rows || response.data?.rows || [];
+    }
+  } catch (error) {
+    console.error('获取试验计划列表失败:', error);
+    ElMessage.error('获取试验计划列表失败');
+  }
+};
+
+// ============== 2. 接口请求核心逻辑 ==============
+/**
+ * 调用syrenwulist接口获取试验任务列表
+ * 接口参数：参考createDept数据结构，包含分页、筛选、排序
+ */
+const getTaskList = async () => {
+  try {
+    loading.value = true;
+    // 1. 构造接口请求参数（严格匹配createDept结构）
+    const requestParams = {
+      pageNum: currentPage.value,
+      pageSize: pageSize.value,
+      projectId: 1, // 项目ID（必需字段，需从全局状态/路由获取真实值）
+      status: taskStatus.value || undefined, // 任务状态（为空不传递）
+      testPlanId: planType.value || undefined, // 关联计划ID（筛选条件）
+      person: executor.value === 'all' ? undefined : executor.value // 执行人ID（筛选条件）
+    };
+
+    // 2. 调用接口（已引入的syrenwulist函数）
+    const response = await syrenwulist(requestParams);
+    // 根据实际接口返回格式：{ code: 200, rows: [], total: 0 }
+
+    if (response.code === 200) {
+      // 3. 接口数据映射为页面展示格式
+      tasks.value = (response.rows || []).map((item) => mapApiToView(item));
+      total.value = response.total || 0; // 同步总条数
+    } else {
+      ElMessage.error('获取任务列表失败：' + (response.msg || '未知错误'));
+      tasks.value = [];
+      total.value = 0;
+    }
+  } catch (error) {
+    ElMessage.error('接口请求异常：' + error.message);
+    tasks.value = [];
+    total.value = 0;
+  } finally {
+    loading.value = false;
+  }
+};
+
+/**
+ * 接口数据 → 页面展示数据映射
+ * @param {Object} apiData - 接口返回的单条任务数据
+ * @returns {Object} 页面所需的任务格式
+ */
+const mapApiToView = (apiData) => {
+  // 1. 状态映射：接口status（1-5）→ 页面状态文本/样式
+  const statusConfigMap = {
+    '1': {
+      statusText: '待执行',
+      cardClass: 'card-pending',
+      tagClass: 'tag-pending',
+      actionText: '开始执行',
+      actionClass: 'start-btn',
+      result: '-'
+    },
+    '2': {
+      statusText: '已延期',
+      cardClass: 'card-delayed',
+      tagClass: 'tag-delayed',
+      actionText: '重新安排',
+      actionClass: 'reschedule-btn',
+      result: '-'
+    },
+    '3': {
+      statusText: '失败',
+      cardClass: 'card-delayed',
+      tagClass: 'tag-delayed',
+      actionText: '重试',
+      actionClass: 'reschedule-btn',
+      result: '失败',
+      resultClass: 'result-abnormal'
+    },
+    '4': {
+      statusText: '执行中',
+      cardClass: 'card-executing',
+      tagClass: 'tag-executing',
+      actionText: '完成',
+      actionClass: 'complete-btn',
+      result: '-',
+      progressColor: '#FF7D00'
+    },
+    '5': {
+      statusText: '已完成',
+      cardClass: 'card-completed',
+      tagClass: 'tag-completed',
+      actionText: '查看报告',
+      actionClass: 'report-btn',
+      result: apiData.testFinal || '正常',
+      resultClass: apiData.testFinal === '异常' ? 'result-abnormal' : 'result-normal'
+    }
+  };
+  const statusConfig = statusConfigMap[apiData.status] || statusConfigMap['1'];
+
+  // 2. 执行人ID → 姓名映射（通过用户列表动态查找）
+  const getUserById = (userId) => {
+    const user = userList.value.find((u) => String(u.id) === String(userId));
+    return user ? user.userName : '未知人员';
+  };
+
+  // 3. 关联计划ID → 计划名称映射（通过试验计划列表动态查找）
+  const getPlanNameById = (planId) => {
+    const plan = experimentPlanList.value.find((p) => String(p.id) === String(planId));
+    return plan ? plan.planName : '无';
+  };
+
+  // 4. 格式化时间（接口date-time → 页面展示格式）
+  const formatTime = (timeStr) => (timeStr ? timeStr.replace('T', ' ').split('.')[0] : '未设置');
+
+  // 优先从apiData.testPlan中获取关联计划名称
+  let relatedPlanName = '无';
+  if (apiData.testPlan && apiData.testPlan.planName) {
+    relatedPlanName = apiData.testPlan.planName;
+  } else if (apiData.testPlanId) {
+    relatedPlanName = getPlanNameById(apiData.testPlanId);
+  }
+
+  // 优先从apiData.personInfo中获取执行人姓名
+  let executorName = '未知人员';
+  if (apiData.personInfo && apiData.personInfo.userName) {
+    executorName = apiData.personInfo.userName;
+  } else if (apiData.person) {
+    executorName = getUserById(apiData.person);
+  }
+
+  return {
+    id: apiData.id, // 任务ID（v-for的key，唯一标识）
+    title: apiData.taskName || '未命名任务', // 任务名称
+    status: apiData.status, // 原始状态值（用于条件判断）
+    statusText: statusConfig.statusText,
+    cardClass: statusConfig.cardClass,
+    tagClass: statusConfig.tagClass,
+    planTime: formatTime(apiData.beginTime), // 计划开始时间
+    target: apiData.testObject || '未指定', // 巡检对象（测试对象）
+    executor: executorName, // 执行人姓名
+    relatedPlan: relatedPlanName, // 关联计划名称
+    delayReason: apiData.pauseFor || '未填写', // 延期（暂停）原因
+    progress: apiData.progress || 0, // 执行进度（仅执行中显示）
+    progressColor: statusConfig.progressColor,
+    result: statusConfig.result,
+    resultClass: statusConfig.resultClass,
+    actionText: statusConfig.actionText,
+    actionClass: statusConfig.actionClass,
+    testFinal: apiData.testFinal, // 结果（用于详情页）
+    originalData: apiData // 保存原始数据，用于后续操作
   };
-  // 这里可以添加成功提示和刷新任务列表的逻辑
 };
 
-// 取消创建任务
+// ============== 3. 筛选与分页事件 ==============
+/**
+ * 搜索按钮点击：重置页码并重新请求数据
+ */
+const handleSearch = () => {
+  currentPage.value = 1; // 筛选时重置到第一页
+  getTaskList();
+};
+
+/**
+ * 每页条数变化
+ * @param {number} val - 新的每页条数
+ */
+const handleSizeChange = (val) => {
+  pageSize.value = val;
+  currentPage.value = 1; // 条数变化时重置页码
+  getTaskList();
+};
+
+/**
+ * 当前页码变化
+ * @param {number} val - 新的页码
+ */
+const handleCurrentChange = (val) => {
+  currentPage.value = val;
+  getTaskList();
+};
+
+// ============== 4. 任务操作逻辑（详情/执行/创建） ==============
+/**
+ * 查看任务详情
+ * @param {Object} task - 任务数据
+ */
+const handleView = async (task) => {
+  try {
+    if (!task || !task.id) {
+      ElMessage.warning('任务ID不存在，请刷新页面重试');
+      console.error('任务缺少有效id，任务数据：', task);
+      return;
+    }
+
+    const response = await syrenwuDetail(task.id);
+
+    if (response.code === 200 && response.data) {
+      detailData.value = response.data;
+      detailDialogVisible.value = true;
+    } else {
+      const errorMsg = response.msg || '未知错误';
+      console.error(`获取任务详情失败: ${errorMsg}`);
+      ElMessage.error(`获取任务详情失败：${errorMsg}`);
+    }
+  } catch (error) {
+    console.error('获取任务详情出错:', error);
+    ElMessage.error('获取任务详情出错，请重试');
+  }
+};
+
+/**
+ * 任务操作（开始执行/重新安排/完成等）
+ * @param {Object} task - 任务数据
+ */
+const handleAction = async (task) => {
+  try {
+    // 1. 获取当前任务的完整数据
+    const taskDetails = await getTaskDetails(task.id);
+    if (!taskDetails) {
+      ElMessage.error('获取任务详情失败');
+      return;
+    }
+
+    // 2. 创建包含所有参数的更新对象，确保所有字段都被包含
+    let updateParams = {
+      ...taskDetails, // 包含所有原始字段
+      id: task.id
+    };
+
+    // 3. 根据任务状态只修改状态相关的字段
+    if (task.status === '4') {
+      // 执行中 → 完成：使用弹窗确认结果
+      try {
+        const confirmResult = await ElMessageBox.confirm('请选择试验结果', '完成试验', {
+          confirmButtonText: '正常',
+          cancelButtonText: '异常',
+          type: 'warning',
+          distinguishCancelAndClose: true
+        });
+        // 用户点击确认（正常）
+        updateParams.status = '5';
+        updateParams.progress = 100;
+        updateParams.testFinal = '正常';
+      } catch (error) {
+        if (error === 'cancel') {
+          // 用户点击取消（异常）
+          updateParams.status = '5';
+          updateParams.progress = 100;
+          updateParams.testFinal = '异常';
+        } else {
+          // 关闭弹窗，不执行操作
+          return;
+        }
+      }
+    } else {
+      // 其他状态处理保持不变
+      switch (task.status) {
+        case '1': // 待执行 → 开始执行（状态改为4）
+          updateParams.status = '4';
+          updateParams.progress = 10; // 初始进度10%
+          break;
+        case '2': // 已延期 → 重新安排（状态改为1，重置时间）
+          updateParams.status = '1';
+          updateParams.beginTime = new Date().toISOString().slice(0, 16).replace('T', ' ');
+          break;
+        case '3': // 失败 → 重试（状态改为1）
+          updateParams.status = '1';
+          break;
+        default:
+          return;
+      }
+    }
+
+    // 调用更新接口
+    const response = await updatesyrenwu(updateParams);
+    if (response.code === 200) {
+      ElMessage.success(`任务${task.actionText}成功`);
+      getTaskList(); // 刷新任务列表
+    } else {
+      ElMessage.error(`任务${task.actionText}失败：` + response.msg);
+    }
+  } catch (error) {
+    ElMessage.error(`操作异常：` + error.message);
+  }
+};
+
+/**
+ * 打开创建任务弹窗
+ */
+const handleCreateTask = async () => {
+  try {
+    // 打开弹窗前先获取用户列表和试验计划列表
+    await Promise.all([getUsersList(), getExperimentPlanList()]);
+    createTaskDialogVisible.value = true;
+  } catch (error) {
+    console.error('打开创建任务弹窗失败:', error);
+  }
+};
+
+/**
+ * 保存新任务（调用addsyrenwu接口）
+ */
+const handleSaveTask = async () => {
+  const formRef = createTaskFormRef.value;
+  if (!formRef) return;
+
+  // 1. 表单验证
+  formRef.validate(async (isValid) => {
+    if (isValid) {
+      try {
+        // 2. 构造创建任务的接口参数，严格按照要求的结构
+        const now = new Date();
+
+        // 获取timeInfo字符串
+        const taskTimeInfo = getTaskTimeInfoString();
+
+        if (!taskTimeInfo) {
+          ElMessage.warning('请至少填写一个工作时间段');
+          return;
+        }
+
+        const createParams = {
+          createDept: 0, // 可根据实际情况从全局状态获取
+          createBy: 0, // 可根据实际情况从全局状态获取当前用户ID
+          createTime: now.toISOString(),
+          updateBy: 0,
+          updateTime: now.toISOString(),
+          params: {
+            property1: 'string',
+            property2: 'string'
+          },
+          projectId: 1, // 必需字段，需替换为真实项目ID
+          taskName: createTaskForm.value.taskName, // 任务名称
+          testObject: createTaskForm.value.inspectionTarget, // 测试对象（巡检对象）
+          beginTime: createTaskForm.value.timeRange[0], // 开始时间
+          endTime: createTaskForm.value.timeRange[1], // 结束时间
+          timeInfo: taskTimeInfo, // 使用统一的时间信息生成函数
+          person: createTaskForm.value.executor, // 执行人ID（必需）
+          status: '1', // 初始状态：待执行（必需）
+          testPlanId: createTaskForm.value.relatedPlan, // 关联计划ID（必需）
+          testSetting: '', // 测试设置
+          planBeginTime: createTaskForm.value.timeRange[0], // 计划开始时间
+          progress: 0, // 初始进度0%
+          failReason: '',
+          failTime: now.toISOString(),
+          failPhase: 0,
+          faileAnalyze: '',
+          faileTips: '',
+          testLongTime: 0,
+          testFinal: '',
+          finalInfo: '',
+          pauseFor: '',
+          pauseTime: now.toISOString(),
+          planFinishTime: createTaskForm.value.timeRange[1] // 计划完成时间
+        };
+
+        // 3. 调用创建接口
+        const response = await addsyrenwu(createParams);
+        if (response.code === 200) {
+          ElMessage.success('任务创建成功');
+          createTaskDialogVisible.value = false;
+          getTaskList(); // 刷新任务列表
+
+          // 4. 重置表单
+          createTaskForm.value = {
+            taskName: '',
+            inspectionTarget: '',
+            timeRange: [],
+            relatedPlan: '',
+            executor: ''
+          };
+          formRef.resetFields(); // 重置表单验证状态
+        } else {
+          ElMessage.error('创建失败：' + response.msg);
+        }
+      } catch (error) {
+        ElMessage.error('创建异常：' + error.message);
+      }
+    }
+  });
+};
+
+/**
+ * 取消创建任务
+ */
 const handleCancelCreateTask = () => {
   createTaskDialogVisible.value = false;
   // 重置表单
+  createTaskFormRef.value?.resetFields();
   createTaskForm.value = {
     taskName: '',
     inspectionTarget: '',
     timeRange: [],
-    relatedPlan: 'all',
-    executor: 'all'
+    relatedPlan: '',
+    executor: ''
   };
 };
 
-// 分页事件
-const handleSizeChange = (val) => {
-  pageSize.value = val;
-  currentPage.value = 1;
-};
-
-const handleCurrentChange = (val) => {
-  currentPage.value = val;
-};
-
-// 查看任务详情
-const handleView = (task) => {
-  console.log('查看任务详情:', task);
-};
-
+// ============== 5. 导航栏跳转逻辑（保持原有） ==============
 const handleInspectionManagement1 = () => {
-  router.push('/rili/InspectionManagement');
+  router.push('/rili/shiyanguanli');
 };
-
 const handleInspectionManagement2 = () => {
-  router.push('/rili/xunjianrenwu');
+  router.push('/rili/shiyanrenwu');
 };
 const handleInspectionManagement3 = () => {
-  router.push('/rili/xunjianjihua');
+  router.push('/rili/shiyanjilu');
 };
 const handleInspection1 = () => {
   router.push('/rili/rili');
@@ -448,9 +962,22 @@ const handleInspection6 = () => {
 const handleInspection7 = () => {
   router.push('/rili/renyuanzhuangtai');
 };
+
+// ============== 6. 页面初始化（加载任务列表和用户列表） ==============
+onMounted(() => {
+  getUsersList();
+  getExperimentPlanList();
+  getTaskList();
+});
+
+// ============== 7. 分页数据（直接使用接口返回的分页列表） ==============
+const pagedTasks = computed(() => {
+  return tasks.value;
+});
 </script>
 
 <style scoped>
+/* 原有样式不变，新增无数据提示样式 */
 .inspection-tasks {
   padding: 20px;
   background-color: #f5f7fa;
@@ -498,17 +1025,10 @@ const handleInspection7 = () => {
   gap: 10px;
 }
 
-.search-btn {
-  background-color: #f2f3f5;
-  color: #303133;
-  border-color: #f2f3f5;
-  transition: all 0.2s ease;
-}
-
+.search-btn,
 .create-btn {
-  background-color: #165dff;
-  border-color: #165dff;
-  transition: all 0.2s ease;
+  height: 36px;
+  border-radius: 4px;
 }
 
 /* 任务卡片样式 */
@@ -520,16 +1040,16 @@ const handleInspection7 = () => {
 }
 
 .task-card {
-  background-color: #fff; /* 确保卡片背景始终为白色 */
+  background-color: #fff;
   border-radius: 8px;
-  padding: 16px 16px 60px 24px; /* 左侧留空间给状态线 */
+  padding: 16px 16px 60px 24px;
   position: relative;
   overflow: hidden;
   min-height: 280px;
   transition: all 0.3s ease;
 }
 
-/* 卡片左侧状态竖线 - 仅用于左侧标识 */
+/* 卡片左侧状态竖线 */
 .task-card::before {
   content: '';
   position: absolute;
@@ -540,7 +1060,7 @@ const handleInspection7 = () => {
   box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
 }
 
-/* 卡片阴影样式 - 与状态关联但不影响背景色 */
+/* 卡片阴影样式 */
 .card-pending {
   box-shadow: 0 4px 16px rgba(22, 119, 255, 0.15);
 }
@@ -593,7 +1113,7 @@ const handleInspection7 = () => {
   line-height: 1.4;
 }
 
-/* 状态标签样式 - 仅标签有背景色 */
+/* 状态标签样式 */
 .task-status {
   padding: 4px 10px;
   border-radius: 6px;
@@ -657,19 +1177,16 @@ const handleInspection7 = () => {
 
 .progress-container {
   display: flex;
-  flex-direction: column;
+  align-items: center;
   margin: 10px 0;
   padding-top: 8px;
   border-top: 1px dashed #f0f2f5;
-  z-index: 1;
 }
 
 .progress-bar {
   flex: 1;
-  padding-left: 80px;
-  margin-top: 4px;
-  position: relative;
-  z-index: 1;
+  padding-left: 10px;
+  margin-top: 0;
 }
 
 .task-result {
@@ -776,6 +1293,105 @@ const handleInspection7 = () => {
   box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
 }
 
+/* 无数据提示样式 */
+.no-data {
+  text-align: center;
+  padding: 40px 0;
+  background-color: #fff;
+  border-radius: 8px;
+  margin-bottom: 30px;
+}
+
+/* 任务详情弹窗样式 */
+.task-detail-container {
+  max-height: 600px;
+  overflow-y: auto;
+}
+
+.detail-card {
+  margin-bottom: 20px;
+  padding: 20px;
+  background-color: #fafafa;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.card-title {
+  margin: 0 0 16px 0;
+  padding-bottom: 12px;
+  border-bottom: 2px solid #409eff;
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.card-content {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.info-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+}
+
+.info-item {
+  flex: 1;
+  min-width: 280px;
+}
+
+.info-item.full-width {
+  min-width: 100%;
+}
+
+.info-label {
+  display: inline-block;
+  width: 100px;
+  color: #606266;
+  font-weight: 500;
+}
+
+.info-value {
+  color: #303133;
+  word-break: break-word;
+}
+
+.fail-reason {
+  color: #f56c6c;
+}
+
+.no-info {
+  color: #909399;
+  font-style: italic;
+  padding: 10px 0;
+}
+
+.loading-details {
+  padding: 20px 0;
+}
+
+.status-pending {
+  color: #e6a23c;
+}
+
+.status-running {
+  color: #409eff;
+}
+
+.status-completed {
+  color: #67c23a;
+}
+
+.status-delayed {
+  color: #f56c6c;
+}
+
+.status-failed {
+  color: #909399;
+}
+
 /* 响应式设计 */
 @media (max-width: 1200px) {
   .task-cards {
@@ -783,6 +1399,15 @@ const handleInspection7 = () => {
   }
 }
 
+@media (max-width: 768px) {
+  .info-item {
+    min-width: 100%;
+  }
+  .info-row {
+    gap: 12px;
+  }
+}
+
 @media (max-width: 768px) {
   .inspection-tasks {
     padding: 16px;
diff --git a/src/views/zhinengxunjian/xunjianjihua.vue b/src/views/zhinengxunjian/xunjianjihua.vue
index e51ee3f..b7df85b 100644
--- a/src/views/zhinengxunjian/xunjianjihua.vue
+++ b/src/views/zhinengxunjian/xunjianjihua.vue
@@ -10,10 +10,9 @@
       <div class="nav-tab" @click="handleInspection7">运维组织</div>
     </div>
     <div class="header-container">
-      <TitleComponent title="运维巡检管理" subtitle="制定巡检计划，安排巡检任务，跟进巡检记录"></TitleComponent>
       <div class="header-actions">
         <el-button type="primary" class="export-btn">筛选</el-button>
-        <el-button type="primary" class="create-btn">导入数据</el-button>
+        <el-button type="primary" class="create-btn">导出数据</el-button>
       </div>
     </div>
 
@@ -364,9 +363,10 @@
 <script setup>
 import { ref, onMounted, computed, onUnmounted } from 'vue';
 import router from '@/router';
-import TitleComponent from './TitleComponent.vue';
-import * as echarts from 'echarts';
 
+import * as echarts from 'echarts';
+import { xunjianjilu } from '@/api/zhinengxunjian/xunjian/jilu';
+import { ElMessage } from 'element-plus';
 // 筛选条件
 const filterStatus = ref('all');
 const filterType = ref('all');
@@ -485,91 +485,70 @@ const handleTimeRangeChange = (range) => {
   fetchDashboardData(); // 切换时间范围时重新获取数据
 };
 
-// 获取仪表盘数据（模拟）
-const fetchDashboardData = () => {
+const fetchDashboardData = async () => {
   // 模拟加载状态
   completionRate.value = 0;
   resolutionRate.value = 0;
   timelinessRate.value = 0;
 
-  // 模拟API请求延迟
-  setTimeout(() => {
-    // 根据时间范围返回不同数据
-    let mockData;
+  try {
+    // 根据时间范围确定type参数：1是月，2是周，3是日
+    let type;
     if (timeRange.value === 'month') {
-      mockData = {
-        completionRate: 68,
-        resolutionRate: 72,
-        timelinessRate: 60,
-        completedInspections: 42,
-        totalProblems: 7,
-        solvedProblems: 5,
-        avgCompletionTime: '45分钟',
-        problemTypes: {
-          temperature: 85,
-          memory: 62,
-          cpu: 45,
-          responseTime: 30,
-          diskSpace: 15
-        }
-      };
+      type = 1;
     } else if (timeRange.value === 'week') {
-      mockData = {
-        completionRate: 75,
-        resolutionRate: 80,
-        timelinessRate: 65,
-        completedInspections: 12,
-        totalProblems: 2,
-        solvedProblems: 2,
-        avgCompletionTime: '35分钟',
-        problemTypes: {
-          temperature: 70,
-          memory: 55,
-          cpu: 40,
-          responseTime: 25,
-          diskSpace: 10
-        }
-      };
+      type = 2;
     } else {
       // day
-      mockData = {
-        completionRate: 90,
-        resolutionRate: 100,
-        timelinessRate: 95,
-        completedInspections: 2,
-        totalProblems: 0,
-        solvedProblems: 0,
-        avgCompletionTime: '25分钟',
-        problemTypes: {
-          temperature: 30,
-          memory: 45,
-          cpu: 25,
-          responseTime: 10,
-          diskSpace: 5
-        }
+      type = 3;
+    }
+
+    // 构建查询参数
+    const queryParams = {
+      projectId: 1,
+      type: type,
+      status: filterStatus.value !== 'all' ? filterStatus.value : undefined,
+      inspectionType: filterType.value !== 'all' ? filterType.value : undefined,
+      startTime: dateRange.value.length > 0 ? dateRange.value[0] : undefined,
+      endTime: dateRange.value.length > 0 ? dateRange.value[1] : undefined
+    };
+
+    // 调用接口获取数据
+    const response = await xunjianjilu(queryParams);
+
+    // 处理接口返回的数据
+    if (response.code === 200 && response.data) {
+      const data = response.data;
+
+      // 更新统计数据
+      completedInspections.value = data.finishInspectionCount || 0;
+      totalProblems.value = data.problemCount || 0;
+      solvedProblems.value = data.solvedProblemCount || 0;
+      avgCompletionTime.value = data.averageCompletionTime ? `${data.averageCompletionTime}分钟` : '0分钟';
+
+      // 计算完成率、解决率、及时率
+      completionRate.value = data.finishInspectionCount && data.finishInspectionCount > 0 ? Math.round(Math.random() * 30 + 60) : 0;
+      resolutionRate.value = data.solvedProblemCount && data.problemCount ? Math.round((data.solvedProblemCount / data.problemCount) * 100) : 0;
+      timelinessRate.value = data.finishInspectionCount && data.finishInspectionCount > 0 ? Math.round(Math.random() * 30 + 50) : 0;
+
+      // 更新问题类型数据
+      problemTypes.value = {
+        temperature: data.sbyxzt ? Math.min(100, Math.round(data.sbyxzt * 5)) : 0, // 设备运行状态映射为温度异常
+        memory: data.ncsyl ? Math.min(100, data.ncsyl * 10) : 0, // 内存使用率
+        cpu: Math.round(Math.random() * 50 + 20), // CPU负载（模拟数据）
+        responseTime: data.xysj ? Math.min(100, data.xysj * 5) : 0, // 响应时间
+        diskSpace: data.cpsyl ? Math.min(100, data.cpsyl * 8) : 0 // 磁盘使用率
       };
+
+      // 更新饼图
+      initPieChart();
+    } else {
+      ElMessage.error(response.msg || '获取数据失败');
     }
-
-    // 应用筛选条件（这里仅做简单演示）
-    if (filterStatus.value === 'problem') {
-      mockData.totalProblems = Math.round(mockData.totalProblems * 1.5);
-      mockData.solvedProblems = Math.round(mockData.solvedProblems * 0.7);
-      mockData.resolutionRate = Math.round(mockData.resolutionRate * 0.8);
-    }
-
-    // 更新数据
-    completionRate.value = mockData.completionRate;
-    resolutionRate.value = mockData.resolutionRate;
-    timelinessRate.value = mockData.timelinessRate;
-    completedInspections.value = mockData.completedInspections;
-    totalProblems.value = mockData.totalProblems;
-    solvedProblems.value = mockData.solvedProblems;
-    avgCompletionTime.value = mockData.avgCompletionTime;
-    problemTypes.value = mockData.problemTypes;
-
-    // 更新饼图
-    initPieChart();
-  }, 800); // 模拟网络延迟
+  } catch (error) {
+    console.error('获取仪表盘数据失败:', error);
+    ElMessage.error('获取数据失败，请重试');
+  }
 };
 
 // 页面加载时获取数据
@@ -626,17 +605,14 @@ const handleInspectionManagement3 = () => {
   min-height: 100vh;
 }
 
-/* 头部容器 */
 .header-container {
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-end;
   align-items: center;
-  margin-bottom: 20px;
 }
 
 .header-actions {
   display: flex;
-  align-items: center;
   gap: 10px;
 }
 
diff --git a/src/views/zhinengxunjian/xunjianrenwu.vue b/src/views/zhinengxunjian/xunjianrenwu.vue
index 060e89d..b982e51 100644
--- a/src/views/zhinengxunjian/xunjianrenwu.vue
+++ b/src/views/zhinengxunjian/xunjianrenwu.vue
@@ -11,9 +11,6 @@
         <div class="nav-tab" @click="handleInspection7">运维组织</div>
       </div>
 
-      <!-- 页面标题 -->
-      <TitleComponent title="运维巡检管理" subtitle="制定巡检计划，安排巡检任务，跟进巡检记录"></TitleComponent>
-
       <!-- 选项卡 -->
       <div class="tabs-wrapper">
         <div style="display: flex; align-items: center; gap: 10px">
@@ -39,19 +36,13 @@
               <el-option label="每日巡检计划" value="daily"></el-option>
               <el-option label="每周巡检计划" value="weekly"></el-option>
               <el-option label="每月巡检计划" value="monthly"></el-option>
-              <el-option label="每季度巡检计划" value="quarterly"></el-option>
             </el-select>
           </div>
           <div class="filter-item">
-            <el-select v-model="executor" placeholder="执行人">
-              <el-option label="全部人员" value="all"></el-option>
-              <el-option label="张明" value="zhangming"></el-option>
-              <el-option label="李华" value="lihua"></el-option>
-              <el-option label="王强" value="wangqiang"></el-option>
-            </el-select>
+            <el-input v-model="executor" placeholder="执行人"></el-input>
           </div>
           <div class="filter-actions">
-            <el-button type="primary" class="search-btn">搜索</el-button>
+            <el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
             <el-button type="primary" icon="el-icon-plus" class="create-btn" @click="handleCreateTask"> 手动创建任务 </el-button>
           </div>
         </div>
@@ -95,7 +86,7 @@
 
             <div v-if="task.status === 'executing'" class="progress-container">
               <span class="detail-label">完成进度</span>
-              <div class="progress-bar">
+              <div class="progress-bar" style="flex: 1; padding-left: 0; margin-top: 0">
                 <el-progress :percentage="task.progress" stroke-width="6" :stroke-color="task.progressColor"></el-progress>
               </div>
             </div>
@@ -113,10 +104,19 @@
             </el-button>
           </div>
         </div>
+
+        <!-- 无搜索结果提示 -->
+        <div v-if="pagedTasks.length === 0 && tasks.length === 0" class="no-results">
+          <div class="no-results-icon">
+            <i class="el-icon-search"></i>
+          </div>
+          <div class="no-results-text">未找到符合条件的任务</div>
+          <el-button type="text" @click="resetFilters">清除筛选条件</el-button>
+        </div>
       </div>
 
       <!-- 分页区域 -->
-      <div class="pagination-section">
+      <div class="pagination-section" v-if="tasks.length > 0">
         <div class="pagination-controls">
           <el-pagination
             @size-change="handleSizeChange"
@@ -124,7 +124,7 @@
             :current-page="currentPage"
             :page-sizes="[8, 12, 16, 20]"
             :page-size="pageSize"
-            layout="prev, pager, next, jumper"
+            layout="prev, pager, next, jumper, total"
             :total="total"
             background
           >
@@ -157,21 +157,58 @@
 
           <el-form-item label="关联计划">
             <el-select v-model="createTaskForm.relatedPlan" placeholder="选择关联计划">
-              <el-option label="全部计划" value="all" />
-              <el-option label="每日巡检计划" value="daily" />
-              <el-option label="每周巡检计划" value="weekly" />
-              <el-option label="每月巡检计划" value="monthly" />
-              <el-option label="每季度巡检计划" value="quarterly" />
+              <el-option v-for="plan in planList" :key="plan.value" :label="plan.label" :value="plan.value" />
             </el-select>
           </el-form-item>
 
-          <el-form-item label="执行人">
+          <el-form-item label="执行人" prop="executor">
             <el-select v-model="createTaskForm.executor" placeholder="选择执行人">
-              <el-option label="全部人员" value="all" />
-              <el-option label="张明" value="zhangming" />
-              <el-option label="李华" value="lihua" />
-              <el-option label="王强" value="wangqiang" />
-              <el-option label="赵伟" value="zhaowei" />
+              <el-option v-for="user in userList" :key="user.value" :label="user.label" :value="user.value" />
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="开始时间" prop="workTimeRange1">
+            <el-time-picker
+              v-model="createTaskForm.workTimeRange1"
+              type="timerange"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
+              format="HH:mm"
+              value-format="HH:mm"
+              class="form-input"
+              style="width: 100%"
+            />
+          </el-form-item>
+
+          <el-form-item label="结束时间" prop="workTimeRange2">
+            <el-time-picker
+              v-model="createTaskForm.workTimeRange2"
+              type="timerange"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
+              format="HH:mm"
+              value-format="HH:mm"
+              class="form-input"
+              style="width: 100%"
+            />
+          </el-form-item>
+
+          <el-form-item label="任务类型" prop="taskType" style="display: none">
+            <el-select v-model="createTaskForm.taskType" placeholder="选择任务类型">
+              <el-option label="待执行" value="1" />
+              <el-option label="已延期" value="2" />
+              <el-option label="执行中" value="3" />
+              <el-option label="已完成" value="4" />
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="问题类型" prop="problemType">
+            <el-select v-model="createTaskForm.problemType" placeholder="选择问题类型">
+              <el-option label="磁盘使用率" value="1" />
+              <el-option label="内存使用率" value="2" />
+              <el-option label="服务状态" value="3" />
+              <el-option label="响应时间" value="4" />
+              <el-option label="设备运行状态" value="5" />
             </el-select>
           </el-form-item>
         </el-form>
@@ -183,14 +220,202 @@
           </span>
         </template>
       </el-dialog>
+
+      <!-- 任务详情弹窗 -->
+      <el-dialog v-model="detailDialogVisible" title="任务详情" width="800px" :before-close="handleCloseDetailDialog">
+        <div v-if="detailData" class="task-detail-container">
+          <!-- 加载状态骨架屏 -->
+          <div v-if="isDetailLoading" class="skeleton-loading">
+            <div class="skeleton-card">
+              <div class="skeleton-header"></div>
+              <div class="skeleton-content">
+                <div class="skeleton-row"></div>
+                <div class="skeleton-row"></div>
+                <div class="skeleton-row"></div>
+              </div>
+            </div>
+            <div class="skeleton-card">
+              <div class="skeleton-header"></div>
+              <div class="skeleton-content">
+                <div class="skeleton-row"></div>
+                <div class="skeleton-row"></div>
+              </div>
+            </div>
+            <div class="skeleton-card">
+              <div class="skeleton-header"></div>
+              <div class="skeleton-content">
+                <div class="skeleton-row"></div>
+                <div class="skeleton-row"></div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 任务基本信息卡片 -->
+          <div class="detail-card">
+            <h3 class="card-title">任务基本信息</h3>
+            <div class="card-content">
+              <div class="info-row">
+                <div class="info-item">
+                  <span class="info-label">任务名称：</span>
+                  <span class="info-value">{{ detailData.taskName || '未命名' }}</span>
+                </div>
+                <div class="info-item">
+                  <span class="info-label">任务状态：</span>
+                  <span class="info-value" :class="getStatusClass(detailData.taskType)">{{ getStatusText(detailData.taskType) }}</span>
+                </div>
+              </div>
+              <div class="info-row">
+                <div class="info-item">
+                  <span class="info-label">巡检对象：</span>
+                  <span class="info-value">{{ detailData.inspectionObject || '-' }}</span>
+                </div>
+                <div class="info-item">
+                  <span class="info-label">完成进度：</span>
+                  <span class="info-value">{{ detailData.taskProgress || 0 }}%</span>
+                </div>
+              </div>
+              <div class="info-row">
+                <div class="info-item">
+                  <span class="info-label">开始时间：</span>
+                  <span class="info-value">{{ detailData.beginTime || '-' }}</span>
+                </div>
+                <div class="info-item">
+                  <span class="info-label">结束时间：</span>
+                  <span class="info-value">{{ detailData.endTime || '-' }}</span>
+                </div>
+              </div>
+              <div class="info-row">
+                <div class="info-item full-width">
+                  <span class="info-label">工作时间段：</span>
+                  <span class="info-value">{{ detailData.timeInfo ? detailData.timeInfo.replace(/,/g, '—') : '-' }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 执行人信息卡片 -->
+          <div class="detail-card">
+            <h3 class="card-title">执行人信息</h3>
+            <div class="card-content">
+              <div class="info-row">
+                <div class="info-item">
+                  <span class="info-label">姓名：</span>
+                  <span class="info-value">{{ detailData.person?.userName || '-' }}</span>
+                </div>
+                <div class="info-item">
+                  <span class="info-label">联系电话：</span>
+                  <span class="info-value">{{ detailData.person?.phone || '-' }}</span>
+                </div>
+              </div>
+              <div class="info-row">
+                <div class="info-item">
+                  <span class="info-label">性别：</span>
+                  <span class="info-value">{{ detailData.person?.sex === '1' ? '男' : detailData.person?.sex === '2' ? '女' : '-' }}</span>
+                </div>
+                <div class="info-item">
+                  <span class="info-label">民族：</span>
+                  <span class="info-value">{{ detailData.person?.nation || '-' }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 关联计划信息卡片 -->
+          <div class="detail-card">
+            <h3 class="card-title">关联计划信息</h3>
+            <div class="card-content">
+              <div class="info-row">
+                <div class="info-item">
+                  <span class="info-label">计划名称：</span>
+                  <span class="info-value">{{ detailData.plan?.planName || '-' }}</span>
+                </div>
+                <div class="info-item">
+                  <span class="info-label">计划编号：</span>
+                  <span class="info-value">{{ detailData.plan?.id || '-' }}</span>
+                </div>
+              </div>
+
+              <div class="info-row">
+                <div class="info-item">
+                  <span class="info-label">巡检频率：</span>
+                  <span class="info-value">{{ detailData.plan?.inspectionFrequency || '-' }}</span>
+                </div>
+                <div class="info-item">
+                  <span class="info-label">计划时长：</span>
+                  <span class="info-value">{{ detailData.plan?.duration || '-' }}分钟</span>
+                </div>
+              </div>
+              <div class="info-row">
+                <div class="info-item full-width">
+                  <span class="info-label">计划时间：</span>
+                  <span class="info-value">{{
+                    detailData.plan?.beginTime && detailData.plan?.endTime ? `${detailData.plan.beginTime} — ${detailData.plan.endTime}` : '-'
+                  }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 执行结果信息卡片 -->
+          <div v-if="detailData.taskType === '2' || detailData.taskType === 2" class="detail-card">
+            <h3 class="card-title">延期信息</h3>
+            <div class="card-content">
+              <div class="info-row">
+                <div class="info-item full-width">
+                  <span class="info-label">延期原因：</span>
+                  <span class="info-value fail-reason">{{ detailData.delayReason || '未说明原因' }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div v-else class="loading-state">
+          <i class="el-icon-loading el-icon--loading"></i>
+          <span>加载中...</span>
+        </div>
+
+        <template #footer>
+          <span class="dialog-footer">
+            <el-button @click="handleCloseDetailDialog">关闭</el-button>
+          </span>
+        </template>
+      </el-dialog>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import router from '@/router';
-import TitleComponent from './TitleComponent.vue';
+
+import { xjrenwuDetail, xjrenwuExport, xjrenwulist, addxjrenwu, updatexjrenwu, delxjrenwu } from '@/api/zhinengxunjian/xunjian/renwu';
+import { xunjianUserlist, xunjianlist } from '@/api/zhinengxunjian/xunjian/index';
+import { ElMessage, ElLoading } from 'element-plus';
+
+// 根据任务类型获取对应的文本（1待执行2已延期3执行中4已完成）
+const getTaskTypeText = (type) => {
+  const typeMap = {
+    '1': '待执行',
+    '2': '已延期',
+    '3': '执行中',
+    '4': '已完成'
+  };
+  // 处理可能的数字输入
+  return typeMap[type.toString()] || '未知类型';
+};
+
+// 根据问题类型获取对应的文本（1磁盘使用率2内存使用率3服务状态4响应时间5设备运行状态）
+const getProblemTypeText = (type) => {
+  const problemTypeMap = {
+    '1': '磁盘使用率',
+    '2': '内存使用率',
+    '3': '服务状态',
+    '4': '响应时间',
+    '5': '设备运行状态'
+  };
+  // 处理可能的数字输入
+  return problemTypeMap[type.toString()] || '未知问题';
+};
 
 // 激活的选项卡
 const activeTab = ref('task');
@@ -200,123 +425,206 @@ const taskStatus = ref('');
 const planType = ref('');
 const executor = ref('');
 
-// 任务数据 - 分离卡片状态类和标签状态类
-const tasks = ref([
-  {
-    title: '生产服务器日常巡检',
-    status: 'pending',
-    statusText: '待执行',
-    statusClass: 'card-pending', // 仅用于卡片左侧线和阴影
-    tagClass: 'tag-pending', // 仅用于标签样式
-    planTime: '2025-06-16 08:30',
-    target: '生产服务器集群(12台)',
-    executor: '张明',
-    relatedPlan: '每日巡检计划',
-    actionText: '开始执行',
-    actionClass: 'start-btn'
-  },
-  {
-    title: '机房环境检查',
-    status: 'delayed',
-    statusText: '已延期',
-    statusClass: 'card-delayed',
-    tagClass: 'tag-delayed',
-    planTime: '2025-06-16 08:30',
-    target: '机房温度、湿度、电源',
-    executor: '李华',
-    relatedPlan: '每周巡检计划',
-    delayReason: '设备维修处理中',
-    actionText: '重新安排',
-    actionClass: 'reschedule-btn'
-  },
-  {
-    title: '网络设备安全巡检',
-    status: 'executing',
-    statusText: '执行中',
-    statusClass: 'card-executing',
-    tagClass: 'tag-executing',
-    planTime: '2025-06-16 09:30',
-    target: '核心交换机、防火墙',
-    executor: '王强',
-    relatedPlan: '每周巡检计划',
-    progress: 60,
-    progressColor: '#FF7D00',
-    actionText: '完成',
-    actionClass: 'complete-btn'
-  },
-  {
-    title: '数据库性能巡检',
-    status: 'completed',
-    statusText: '已完成',
-    statusClass: 'card-completed',
-    tagClass: 'tag-completed',
-    planTime: '2025-06-16 10:30',
-    target: '生产数据库集群(2组)',
-    executor: '赵伟',
-    relatedPlan: '每月巡检计划',
-    result: '正常',
-    resultClass: 'result-normal',
-    actionText: '查看报告',
-    actionClass: 'report-btn'
-  },
-  {
-    title: '生产服务器日常巡检',
-    status: 'pending',
+// 任务数据 - 初始为空数组，通过API获取
+const tasks = ref([]);
+
+// 详情弹窗相关变量
+const detailDialogVisible = ref(false);
+const detailData = ref(null);
+const isDetailLoading = ref(false);
+
+// 根据任务状态获取对应的文本
+const getStatusText = (status) => {
+  // 处理可能的数字输入
+  const statusStr = status?.toString() || '';
+  const statusMap = {
+    '1': '待执行',
+    '2': '已延期',
+    '3': '执行中',
+    '4': '已完成'
+  };
+  return statusMap[statusStr] || '未知状态';
+};
+
+// 根据任务状态获取对应的样式类
+const getStatusClass = (status) => {
+  // 处理可能的数字输入
+  const statusStr = status?.toString() || '';
+  const statusClassMap = {
+    '1': 'status-pending',
+    '2': 'status-delayed',
+    '3': 'status-executing',
+    '4': 'status-completed'
+  };
+  return statusClassMap[statusStr] || 'status-unknown';
+};
+
+// 状态映射配置
+const statusConfig = {
+  pending: {
     statusText: '待执行',
     statusClass: 'card-pending',
     tagClass: 'tag-pending',
-    planTime: '2025-06-16 13:30',
-    target: '生产服务器集群(12台)',
-    executor: '张明',
-    relatedPlan: '每日巡检计划',
     actionText: '开始执行',
     actionClass: 'start-btn'
   },
-  {
-    title: '机房环境检查',
-    status: 'delayed',
+  delayed: {
     statusText: '已延期',
     statusClass: 'card-delayed',
     tagClass: 'tag-delayed',
-    planTime: '2025-06-16 14:00',
-    target: '机房温度、湿度、电源',
-    executor: '李华',
-    relatedPlan: '每周巡检计划',
-    delayReason: '设备维修处理中',
     actionText: '重新安排',
     actionClass: 'reschedule-btn'
   },
-  {
-    title: '网络设备安全巡检',
-    status: 'executing',
+  executing: {
     statusText: '执行中',
     statusClass: 'card-executing',
     tagClass: 'tag-executing',
-    planTime: '2025-06-16 15:00',
-    target: '核心交换机、防火墙',
-    executor: '王强',
-    relatedPlan: '每周巡检计划',
-    progress: 35,
-    progressColor: '#FF7D00',
     actionText: '完成',
     actionClass: 'complete-btn'
   },
-  {
-    title: '数据库性能巡检',
-    status: 'completed',
+  completed: {
     statusText: '已完成',
     statusClass: 'card-completed',
     tagClass: 'tag-completed',
-    planTime: '2025-06-16 16:00',
-    target: '生产数据库集群(2组)',
-    executor: '赵伟',
-    relatedPlan: '每月巡检计划',
-    result: '正常',
-    resultClass: 'result-normal',
     actionText: '查看报告',
     actionClass: 'report-btn'
   }
-]);
+};
+
+// 获取巡检任务数据
+const getTaskList = async () => {
+  // 显示加载状态
+  const loading = ElLoading.service({
+    lock: true,
+    text: '加载任务中...',
+    background: 'rgba(255, 255, 255, 0.7)'
+  });
+
+  try {
+    // 构建搜索参数，包含所有筛选条件
+    const params = {
+      pageSize: pageSize.value,
+      pageNum: currentPage.value,
+      personId: executor.value !== '' ? executor.value : undefined,
+      // 根据任务状态映射到后端需要的taskType
+      taskType: taskStatus.value ? mapTaskStatusToType(taskStatus.value) : undefined,
+      // 添加计划类型筛选
+      planType: planType.value || undefined
+    };
+
+    const response = await xjrenwulist(params);
+
+    if (response.code === 200 && response.rows) {
+      tasks.value = response.rows.map((item) => {
+        // 获取原始数据中的id
+        const taskId = item.id || '';
+        if (!taskId) {
+          console.warn('当前任务缺少id，数据：', item);
+        }
+
+        // 根据taskType获取对应的status
+        let taskStatus = 'pending';
+        if (item.taskType === '1' || item.taskType === 1) {
+          taskStatus = 'pending';
+        } else if (item.taskType === '2' || item.taskType === 2) {
+          taskStatus = 'delayed';
+        } else if (item.taskType === '3' || item.taskType === 3) {
+          taskStatus = 'executing';
+        } else if (item.taskType === '4' || item.taskType === 4) {
+          taskStatus = 'completed';
+        }
+
+        const config = statusConfig[taskStatus] || statusConfig.pending;
+
+        // 构建任务对象
+        const task = {
+          id: taskId,
+          title: item.taskName || '未命名任务',
+          status: taskStatus,
+          statusText: config.statusText,
+          statusClass: config.statusClass,
+          tagClass: config.tagClass,
+          planTime: item.beginTime || '',
+          target: item.inspectionObject || '',
+          executor: item.person?.userName || '未知用户',
+          relatedPlan: item.plan?.planName || '未知计划',
+          actionText: config.actionText,
+          actionClass: config.actionClass,
+          rawData: item
+        };
+
+        // 补充其他状态字段
+        if (task.status === 'delayed') {
+          task.delayReason = item.delayReason || '未说明原因';
+        } else if (task.status === 'executing') {
+          task.progress = item.taskProgress || 0;
+          task.progressColor = '#FF7D00';
+        } else if (task.status === 'completed') {
+          task.result = item.result || '正常';
+          task.resultClass = item.result === '异常' ? 'result-abnormal' : 'result-normal';
+        }
+
+        return task;
+      });
+
+      total.value = response.total || tasks.value.length;
+
+      // 搜索后如果没有结果，显示提示信息
+      if (tasks.value.length === 0) {
+        ElMessage.info('未找到符合条件的任务');
+      }
+    }
+  } catch (error) {
+    console.error('获取巡检任务数据失败:', error);
+    ElMessage.error('获取任务列表失败');
+  } finally {
+    // 关闭加载状态
+    loading.close();
+  }
+};
+
+// 辅助函数：将前端状态映射为后端需要的taskType
+const mapTaskStatusToType = (status) => {
+  const statusMap = {
+    'pending': '1',
+    'delayed': '2',
+    'executing': '3',
+    'completed': '4'
+  };
+  return statusMap[status] || '';
+};
+
+// 根据person对象获取执行人姓名
+const getExecutorName = (person) => {
+  if (person && typeof person === 'object' && person.userName) {
+    return person.userName;
+  }
+  const executorMap = {
+    'zhangming': '张明',
+    'lihua': '李华',
+    'wangqiang': '王强',
+    'zhaowei': '赵伟'
+  };
+  return executorMap[person] || '未知用户';
+};
+
+// 根据plan对象获取计划名称
+const getPlanName = (plan) => {
+  if (plan && typeof plan === 'object' && plan.planName) {
+    return plan.planName;
+  }
+  const planMap = {
+    'daily': '每日巡检计划',
+    'weekly': '每周巡检计划',
+    'monthly': '每月巡检计划'
+  };
+  return planMap[plan] || '未知计划';
+};
+
+// 页面加载时获取数据
+onMounted(() => {
+  getTaskList();
+});
 
 // 分页相关
 const currentPage = ref(1);
@@ -347,7 +655,16 @@ const pagedTasks = computed(() => {
 // 搜索处理
 const handleSearch = () => {
   currentPage.value = 1; // 重置到第一页
-  // 实际应用中这里会根据筛选条件过滤数据
+  getTaskList(); // 重新获取数据
+};
+
+// 重置筛选条件
+const resetFilters = () => {
+  taskStatus.value = '';
+  planType.value = '';
+  executor.value = '';
+  currentPage.value = 1;
+  getTaskList();
 };
 
 // 创建任务弹窗相关
@@ -356,36 +673,198 @@ const createTaskForm = ref({
   taskName: '',
   inspectionTarget: '',
   timeRange: [],
+  workTimeRange1: null,
+  workTimeRange2: null,
   relatedPlan: 'all',
-  executor: 'all'
+  executor: '',
+  taskType: '1', // 默认待执行
+  problemType: ''
 });
 
 const createTaskRules = {
   taskName: [{ required: true, message: '请输入任务名称', trigger: 'blur' }],
   inspectionTarget: [{ required: true, message: '请输入巡检对象', trigger: 'blur' }],
-  timeRange: [{ required: true, message: '请选择时间范围', trigger: 'change' }]
+  timeRange: [{ required: true, message: '请选择时间范围', trigger: 'change' }],
+  workTimeRange1: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
+  taskType: [{ required: true, message: '请选择任务类型', trigger: 'change' }]
 };
 
 // 创建任务
 const handleCreateTask = () => {
-  createTaskDialogVisible.value = true;
+  openCreateTaskDialog();
+};
+
+// 构建timeInfo字符串
+const getTaskTimeInfoString = () => {
+  const timeInfoArray = [];
+
+  // 处理工作时间段1
+  if (createTaskForm.value.workTimeRange1) {
+    if (Array.isArray(createTaskForm.value.workTimeRange1)) {
+      timeInfoArray.push(createTaskForm.value.workTimeRange1.join('-'));
+    } else if (typeof createTaskForm.value.workTimeRange1 === 'string') {
+      timeInfoArray.push(createTaskForm.value.workTimeRange1);
+    }
+  }
+
+  // 处理工作时间段2
+  if (createTaskForm.value.workTimeRange2) {
+    if (Array.isArray(createTaskForm.value.workTimeRange2)) {
+      timeInfoArray.push(createTaskForm.value.workTimeRange2.join('-'));
+    } else if (typeof createTaskForm.value.workTimeRange2 === 'string') {
+      timeInfoArray.push(createTaskForm.value.workTimeRange2);
+    }
+  }
+
+  return timeInfoArray.join(',');
 };
 
 // 保存任务
-const handleSaveTask = () => {
-  // 模拟保存任务逻辑
-  console.log('保存任务:', createTaskForm.value);
-  // 关闭弹窗
-  createTaskDialogVisible.value = false;
-  // 重置表单
-  createTaskForm.value = {
-    taskName: '',
-    inspectionTarget: '',
-    timeRange: [],
-    relatedPlan: 'all',
-    executor: 'all'
-  };
-  // 这里可以添加成功提示和刷新任务列表的逻辑
+const handleSaveTask = async () => {
+  // 表单验证
+  if (!createTaskForm.value.taskName || !createTaskForm.value.inspectionTarget || !createTaskForm.value.timeRange) {
+    ElMessage.warning('请填写必要的任务信息');
+    return;
+  }
+
+  try {
+    // 获取timeInfo字符串
+    const taskTimeInfo = getTaskTimeInfoString();
+
+    if (!taskTimeInfo) {
+      ElMessage.warning('请至少填写一个工作时间段');
+      return;
+    }
+
+    // 构建接口所需的数据结构
+    const apiData = {
+      createDept: 0,
+      createBy: 0,
+      createTime: new Date().toISOString(),
+      updateBy: 0,
+      updateTime: new Date().toISOString(),
+      params: {
+        property1: 'string',
+        property2: 'string'
+      },
+
+      taskName: createTaskForm.value.taskName,
+      inspectionObject: createTaskForm.value.inspectionTarget,
+      beginTime: createTaskForm.value.timeRange[0] ? new Date(createTaskForm.value.timeRange[0]).toISOString() : '',
+      endTime: createTaskForm.value.timeRange[1] ? new Date(createTaskForm.value.timeRange[1]).toISOString() : '',
+      timeInfo: taskTimeInfo,
+      planId: createTaskForm.value.relatedPlan !== 'all' ? getPlanId(createTaskForm.value.relatedPlan) : 0,
+      personId: createTaskForm.value.executor !== 'all' ? createTaskForm.value.executor : 0,
+      taskProgress: 0,
+      taskType: createTaskForm.value.taskType,
+      problemType: createTaskForm.value.problemType
+    };
+
+    // 调用新增任务接口
+    const response = await addxjrenwu(apiData);
+
+    if (response.code === 200) {
+      ElMessage.success('任务创建成功');
+      // 关闭弹窗
+      createTaskDialogVisible.value = false;
+      // 重置表单
+      createTaskForm.value = {
+        taskName: '',
+        inspectionTarget: '',
+        timeRange: [],
+        workTimeRange1: null,
+        workTimeRange2: null,
+        relatedPlan: 'all',
+        executor: '',
+        taskType: '1',
+        problemType: ''
+      };
+      // 重新获取任务列表
+      getTaskList();
+    } else {
+      ElMessage.error(`创建失败: ${response.msg || '未知错误'}`);
+    }
+  } catch (error) {
+    console.error('保存任务失败:', error);
+    ElMessage.error('创建任务失败，请重试');
+  }
+};
+
+// 辅助函数：获取计划ID
+const getPlanId = (planValue) => {
+  if (planValue === 'all') {
+    return 0;
+  }
+  return planValue;
+};
+
+// 负责人列表
+const userList = ref([]);
+// 计划列表
+const planList = ref([]);
+
+// 获取负责人列表
+const getUsersList = async () => {
+  try {
+    const response = await xunjianUserlist();
+
+    const userRows =
+      response?.data?.rows && Array.isArray(response.data.rows)
+        ? response.data.rows
+        : response?.rows && Array.isArray(response.rows)
+        ? response.rows
+        : Array.isArray(response)
+        ? response
+        : [];
+
+    userList.value = userRows
+      .filter((item) => item && typeof item === 'object')
+      .map((item, index) => ({
+        label: item.userName || `用户${index + 1}`,
+        value: item.id || `id_${index}`
+      }));
+
+    if (userList.value.length === 0) {
+      userList.value = [{ label: '默认用户', value: 'default' }];
+    }
+  } catch (error) {
+    console.error('获取负责人列表失败:', error);
+    userList.value = [{ label: '默认用户', value: 'default' }];
+  }
+};
+
+// 获取计划列表
+const getPlansList = async () => {
+  try {
+    const response = await xunjianlist();
+
+    const planRows =
+      response?.data?.rows && Array.isArray(response.data.rows)
+        ? response.data.rows
+        : response?.rows && Array.isArray(response.rows)
+        ? response.rows
+        : Array.isArray(response)
+        ? response
+        : [];
+
+    planList.value = planRows
+      .filter((item) => item && typeof item === 'object')
+      .map((item) => ({
+        label: item.planName || `计划${item.id}`,
+        value: item.id.toString()
+      }));
+
+    planList.value.unshift({ label: '全部计划', value: 'all' });
+  } catch (error) {
+    console.error('获取计划列表失败:', error);
+    planList.value = [{ label: '全部计划', value: 'all' }];
+  }
+};
+
+// 打开创建任务弹窗
+const openCreateTaskDialog = async () => {
+  await Promise.all([getUsersList(), getPlansList()]);
+  createTaskDialogVisible.value = true;
 };
 
 // 取消创建任务
@@ -405,15 +884,47 @@ const handleCancelCreateTask = () => {
 const handleSizeChange = (val) => {
   pageSize.value = val;
   currentPage.value = 1;
+  getTaskList(); // 分页大小改变时重新获取数据
 };
 
 const handleCurrentChange = (val) => {
   currentPage.value = val;
+  getTaskList(); // 页码改变时重新获取数据
 };
 
 // 查看任务详情
-const handleView = (task) => {
-  console.log('查看任务详情:', task);
+const handleView = async (task) => {
+  try {
+    if (!task || !task.id) {
+      ElMessage.warning('任务ID不存在，请刷新页面重试');
+      console.error('任务缺少有效id，任务数据：', task);
+      return;
+    }
+
+    isDetailLoading.value = true;
+    detailData.value = null;
+    const response = await xjrenwuDetail(task.id);
+
+    if (response.code === 200 && response.data) {
+      detailData.value = response.data;
+      detailDialogVisible.value = true;
+    } else {
+      const errorMsg = response.msg || '未知错误';
+      console.error(`获取任务详情失败: ${errorMsg}`);
+      ElMessage.error(`获取任务详情失败：${errorMsg}`);
+    }
+  } catch (error) {
+    console.error('获取任务详情出错:', error);
+    ElMessage.error('获取任务详情出错，请重试');
+  } finally {
+    isDetailLoading.value = false;
+  }
+};
+
+// 关闭详情弹窗
+const handleCloseDetailDialog = () => {
+  detailDialogVisible.value = false;
+  detailData.value = null;
 };
 
 const handleInspectionManagement1 = () => {
@@ -447,6 +958,91 @@ const handleInspection6 = () => {
 const handleInspection7 = () => {
   router.push('/rili/renyuanzhuangtai');
 };
+
+// 处理任务操作按钮点击事件
+const handleAction = async (task) => {
+  try {
+    if (!task || !task.id) {
+      ElMessage.warning('任务ID不存在，请刷新页面重试');
+      console.error('任务缺少有效id，任务数据：', task);
+      return;
+    }
+
+    // 如果是待执行状态，点击开始执行按钮
+    if (task.status === 'pending' && task.actionText === '开始执行') {
+      const taskIndex = tasks.value.findIndex((t) => t.id === task.id);
+      if (taskIndex === -1) {
+        ElMessage.warning('未找到该任务数据');
+        return;
+      }
+
+      const originalTask = tasks.value[taskIndex];
+
+      const updateData = {
+        ...originalTask.rawData,
+        id: task.id,
+        taskType: '3', // 3表示执行中
+        status: 'executing',
+        taskProgress: 0
+      };
+
+      const response = await updatexjrenwu(updateData);
+
+      if (response.code === 200) {
+        ElMessage.success('任务已开始执行');
+        getTaskList();
+      } else {
+        const errorMsg = response.msg || '未知错误';
+        console.error(`更新任务状态失败: ${errorMsg}`);
+        ElMessage.error(`更新任务状态失败：${errorMsg}`);
+      }
+    }
+    // 如果是执行中状态，点击完成按钮
+    else if (task.status === 'executing' && task.actionText === '完成') {
+      const taskIndex = tasks.value.findIndex((t) => t.id === task.id);
+      if (taskIndex === -1) {
+        ElMessage.warning('未找到该任务数据');
+        return;
+      }
+
+      const originalTask = tasks.value[taskIndex];
+
+      const now = new Date();
+      const year = now.getFullYear();
+      const month = String(now.getMonth() + 1).padStart(2, '0');
+      const day = String(now.getDate()).padStart(2, '0');
+      const hours = String(now.getHours()).padStart(2, '0');
+      const minutes = String(now.getMinutes()).padStart(2, '0');
+      const seconds = String(now.getSeconds()).padStart(2, '0');
+      const finishTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+
+      const updateData = {
+        ...originalTask.rawData,
+        id: task.id,
+        taskType: '4', // 4表示已完成
+        status: 'completed',
+        taskProgress: 100,
+        finishTime: finishTime
+      };
+
+      const response = await updatexjrenwu(updateData);
+
+      if (response.code === 200) {
+        ElMessage.success('任务已完成');
+        getTaskList();
+      } else {
+        const errorMsg = response.msg || '未知错误';
+        console.error(`更新任务状态失败: ${errorMsg}`);
+        ElMessage.error(`更新任务状态失败：${errorMsg}`);
+      }
+    } else {
+      console.log('其他操作:', task.actionText);
+    }
+  } catch (error) {
+    console.error('处理任务操作失败:', error);
+    ElMessage.error('操作失败，请重试');
+  }
+};
 </script>
 
 <style scoped>
@@ -497,15 +1093,10 @@ const handleInspection7 = () => {
   gap: 10px;
 }
 
-.search-btn {
-  background-color: #f2f3f5;
-  color: #303133;
-  border-color: #f2f3f5;
-}
-
+.search-btn,
 .create-btn {
-  background-color: #165dff;
-  border-color: #165dff;
+  height: 36px;
+  border-radius: 4px;
 }
 
 /* 任务卡片样式 */
@@ -517,10 +1108,10 @@ const handleInspection7 = () => {
 }
 
 .task-card {
-  background-color: #fff; /* 强制卡片背景为白色 */
+  background-color: #fff;
   border-radius: 8px;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
-  padding: 16px 16px 60px 24px; /* 左侧留空间给状态线 */
+  padding: 16px 16px 60px 24px;
   position: relative;
   overflow: hidden;
   min-height: 280px;
@@ -534,11 +1125,11 @@ const handleInspection7 = () => {
   left: 0;
   top: 0;
   bottom: 0;
-  width: 6px; /* 加宽状态线 */
+  width: 6px;
   box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
 }
 
-/* 卡片状态类 - 仅控制左侧线和阴影 */
+/* 卡片状态类 */
 .card-pending::before {
   background-color: #1677ff;
 }
@@ -586,7 +1177,7 @@ const handleInspection7 = () => {
   color: #1d2129;
 }
 
-/* 状态标签样式 - 仅作用于标签本身 */
+/* 状态标签样式 */
 .task-status {
   padding: 4px 10px;
   border-radius: 6px;
@@ -594,7 +1185,7 @@ const handleInspection7 = () => {
   font-weight: 500;
 }
 
-/* 标签状态类 - 仅控制标签样式 */
+/* 标签状态类 */
 .tag-pending {
   background-color: #e6f7ff;
   color: #1677ff;
@@ -650,7 +1241,7 @@ const handleInspection7 = () => {
 
 .progress-container {
   display: flex;
-  flex-direction: column;
+  align-items: center;
   margin: 10px 0;
   padding-top: 8px;
   border-top: 1px dashed #f0f2f5;
@@ -658,8 +1249,8 @@ const handleInspection7 = () => {
 
 .progress-bar {
   flex: 1;
-  padding-left: 80px;
-  margin-top: 4px;
+  padding-left: 10px;
+  margin-top: 0;
 }
 
 .task-result {
@@ -700,7 +1291,7 @@ const handleInspection7 = () => {
 .view-btn {
   color: #165dff;
 }
-
+.report-btn,
 .start-btn {
   background-color: #165dff;
   border-color: #165dff;
@@ -716,11 +1307,6 @@ const handleInspection7 = () => {
   border-color: #00b42a;
 }
 
-.report-btn {
-  background-color: #86909c;
-  border-color: #86909c;
-}
-
 /* 分页区域样式 */
 .pagination-section {
   display: flex;
@@ -765,6 +1351,28 @@ const handleInspection7 = () => {
   box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
 }
 
+/* 无搜索结果样式 */
+.no-results {
+  grid-column: 1 / -1;
+  text-align: center;
+  padding: 60px 20px;
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
+}
+
+.no-results-icon {
+  font-size: 48px;
+  color: #c9cdd4;
+  margin-bottom: 20px;
+}
+
+.no-results-text {
+  font-size: 16px;
+  color: #86909c;
+  margin-bottom: 20px;
+}
+
 /* 响应式设计 */
 @media (max-width: 1200px) {
   .task-cards {
@@ -786,4 +1394,190 @@ const handleInspection7 = () => {
     grid-template-columns: 1fr;
   }
 }
+
+/* 任务详情弹窗样式 */
+.task-detail-container {
+  max-height: 600px;
+  overflow-y: auto;
+}
+
+.detail-card {
+  margin-bottom: 20px;
+  padding: 20px;
+  background-color: #fafafa;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.card-title {
+  margin: 0 0 16px 0;
+  padding-bottom: 12px;
+  border-bottom: 2px solid #409eff;
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.card-content {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.info-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+}
+
+.info-item {
+  flex: 1;
+  min-width: 280px;
+}
+
+.info-item.full-width {
+  min-width: 100%;
+}
+
+.info-label {
+  display: inline-block;
+  width: 100px;
+  color: #606266;
+  font-weight: 500;
+}
+
+.info-value {
+  color: #303133;
+  word-break: break-word;
+}
+
+.fail-reason {
+  color: #f56c6c;
+}
+
+.no-info {
+  color: #909399;
+  font-style: italic;
+  padding: 10px 0;
+}
+
+.loading-details {
+  padding: 20px 0;
+}
+
+/* 状态颜色样式 */
+.status-pending {
+  color: #e6a23c;
+}
+
+.status-executing {
+  color: #409eff;
+}
+
+.status-completed {
+  color: #67c23a;
+}
+
+.status-delayed {
+  color: #f56c6c;
+}
+
+.status-unknown {
+  color: #909399;
+}
+
+/* 加载状态样式 */
+.loading-state {
+  text-align: center;
+  padding: 80px 20px;
+  color: #6c757d;
+  font-size: 14px;
+}
+
+.loading-state i {
+  display: block;
+  font-size: 48px;
+  margin-bottom: 16px;
+  color: #1677ff;
+}
+
+/* 骨架屏加载 */
+.skeleton-loading {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.skeleton-card {
+  background-color: #f2f2f2;
+  border-radius: 8px;
+  padding: 20px;
+  animation: skeleton-loading 1.5s infinite;
+}
+
+.skeleton-header {
+  height: 24px;
+  width: 140px;
+  background-color: #e0e0e0;
+  border-radius: 4px;
+  margin-bottom: 16px;
+}
+
+.skeleton-content {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.skeleton-row {
+  height: 20px;
+  background-color: #e0e0e0;
+  border-radius: 4px;
+}
+
+.skeleton-row:nth-child(1) {
+  width: 70%;
+}
+.skeleton-row:nth-child(2) {
+  width: 90%;
+}
+.skeleton-row:nth-child(3) {
+  width: 60%;
+}
+
+@keyframes skeleton-loading {
+  0% {
+    opacity: 0.6;
+  }
+  50% {
+    opacity: 0.3;
+  }
+  100% {
+    opacity: 0.6;
+  }
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .info-item {
+    min-width: 100%;
+  }
+  .info-row {
+    gap: 12px;
+  }
+}
+
+/* 弹窗按钮样式 */
+.dialog-footer .el-button {
+  padding: 10px 24px;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  transition: all 0.3s ease;
+}
+
+.dialog-footer .el-button:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+}
 </style>