From 585ebcb01acf5dae4bd7dc7830155697baa4664e Mon Sep 17 00:00:00 2001
From: lxd <1004405501@qq.com>
Date: Tue, 15 Jul 2025 10:57:51 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=8A=A8=E6=80=81=E5=BF=83?=
 =?UTF-8?q?=E7=94=B5=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/analysis/HOLTER.vue | 1075 ++++++++++++++++++---------------
 1 file changed, 596 insertions(+), 479 deletions(-)

diff --git a/src/views/analysis/HOLTER.vue b/src/views/analysis/HOLTER.vue
index 6f1f68e..0bc8c87 100644
--- a/src/views/analysis/HOLTER.vue
+++ b/src/views/analysis/HOLTER.vue
@@ -1,242 +1,270 @@
 <template>
-  <div class="holter-container">
-    <!-- 搜索条件 -->
-    <ContentWrap>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-card class="search-card" shadow="never">
       <el-form
-        class="-mb-15px"
         :model="queryParams"
         ref="queryFormRef"
         :inline="true"
-        label-width="68px"
+        label-width="80px"
+        class="search-form"
       >
-        <el-form-item label="患者姓名" prop="patientName">
-          <el-input
-            v-model="queryParams.patientName"
-            placeholder="请输入患者姓名"
-            clearable
-            @keyup.enter="handleQuery"
-            class="!w-140px"
-          />
-        </el-form-item>
-        <el-form-item label="性别" prop="gender">
-          <el-select
-            v-model="queryParams.gender"
-            placeholder="请选择性别"
-            clearable
-            class="!w-140px"
-          >
-            <el-option label="男" value="男" />
-            <el-option label="女" value="女" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="身份证号" prop="idCard">
-          <el-input
-            v-model="queryParams.idCard"
-            placeholder="请输入身份证号"
-            clearable
-            @keyup.enter="handleQuery"
-            class="!w-200px"
-          />
-        </el-form-item>
-        <el-form-item label="体检编号" prop="examNumber">
-          <el-input
-            v-model="queryParams.examNumber"
-            placeholder="请输入体检编号"
-            clearable
-            @keyup.enter="handleQuery"
-            class="!w-200px"
-          />
-        </el-form-item>
-        <el-form-item label="检查日期" prop="examDate">
-          <el-date-picker
-            v-model="queryParams.examDate"
-            type="daterange"
-            range-separator="至"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
-            value-format="YYYY-MM-DD"
-            class="!w-240px"
-          />
-        </el-form-item>
-        <el-form-item>
-          <el-button @click="handleQuery" :loading="loading">
-            <Icon icon="ep:search" />搜索
-          </el-button>
-          <el-button @click="resetQuery"> <Icon icon="ep:refresh" />重置 </el-button>
-          <el-button type="primary" @click="handleSelectPatients">
-            <Icon icon="ep:user" />选择患者
-          </el-button>
-        </el-form-item>
+        <div class="search-fields">
+          <div class="search-field name-field">
+            <el-form-item label="患者姓名" prop="name">
+              <el-input
+                v-model="queryParams.name"
+                placeholder="请输入患者姓名"
+                clearable
+                @keyup.enter="handleQuery"
+                style="width: 180px"
+              >
+                <template #prefix>
+                  <Icon icon="ep:user" />
+                </template>
+              </el-input>
+            </el-form-item>
+          </div>
+          <div class="search-field gender-field">
+            <el-form-item label="性别" prop="gender">
+              <el-select
+                v-model="queryParams.gender"
+                placeholder="请选择性别"
+                clearable
+                style="width: 150px"
+              >
+                <el-option label="男" value="1" />
+                <el-option label="女" value="2" />
+              </el-select>
+            </el-form-item>
+          </div>
+          <div class="search-field examid-field">
+            <el-form-item label="检查ID" prop="examid">
+              <el-input
+                v-model="queryParams.examid"
+                placeholder="请输入检查ID"
+                clearable
+                @keyup.enter="handleQuery"
+                style="width: 180px"
+              >
+                <template #prefix>
+                  <Icon icon="ep:document" />
+                </template>
+              </el-input>
+            </el-form-item>
+          </div>
+          <div class="search-field date-field">
+            <el-form-item label="检查日期" prop="examDate">
+              <el-date-picker
+                v-model="queryParams.examDate"
+                type="daterange"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                value-format="YYYY-MM-DD"
+                style="width: 280px"
+              />
+            </el-form-item>
+          </div>
+        </div>
+        <el-row>
+          <el-col :span="24" class="search-buttons-row">
+            <div class="search-buttons-group">
+              <el-button type="primary" @click="handleQuery" :icon="Search"> 搜索 </el-button>
+              <el-button @click="resetQuery" :icon="Refresh"> 重置 </el-button>
+              <el-button type="success" @click="handleSelectPatients" :icon="Plus">
+                选择患者
+              </el-button>
+              <el-button
+                type="warning"
+                @click="handleExport"
+                :loading="exportLoading"
+                :icon="Download"
+              >
+                导出数据
+              </el-button>
+            </div>
+          </el-col>
+        </el-row>
       </el-form>
-    </ContentWrap>
+    </el-card>
+  </ContentWrap>
 
-    <!-- 统计信息 -->
-    <el-row :gutter="20" class="stats-row">
-      <el-col :span="6">
-        <div class="stat-card">
-          <div class="stat-icon total">
-            <Icon icon="ep:files" />
-          </div>
-          <div class="stat-content">
-            <div class="stat-number">{{ stats.total }}</div>
-            <div class="stat-label">总检查数</div>
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-card shadow="never" class="table-card">
+      <template #header>
+        <div class="card-header">
+          <span class="card-title">Holter检查记录</span>
+          <div class="card-extra">
+            <el-tag type="info" size="small">共 {{ total }} 条记录</el-tag>
           </div>
         </div>
-      </el-col>
-      <el-col :span="6">
-        <div class="stat-card">
-          <div class="stat-icon today">
-            <Icon icon="ep:calendar-today" />
-          </div>
-          <div class="stat-content">
-            <div class="stat-number">{{ stats.today }}</div>
-            <div class="stat-label">今日检查</div>
-          </div>
-        </div>
-      </el-col>
-      <el-col :span="6">
-        <div class="stat-card">
-          <div class="stat-icon analyzed">
-            <Icon icon="ep:circle-check" />
-          </div>
-          <div class="stat-content">
-            <div class="stat-number">{{ stats.analyzed }}</div>
-            <div class="stat-label">已分析</div>
-          </div>
-        </div>
-      </el-col>
-      <el-col :span="6">
-        <div class="stat-card">
-          <div class="stat-icon pending">
-            <Icon icon="ep:clock" />
-          </div>
-          <div class="stat-content">
-            <div class="stat-number">{{ stats.pending }}</div>
-            <div class="stat-label">待分析</div>
-          </div>
-        </div>
-      </el-col>
-    </el-row>
+      </template>
 
-    <!-- 数据表格 -->
-    <ContentWrap class="table-card">
       <el-table
         v-loading="loading"
         :data="tableData"
-        @selection-change="handleSelectionChange"
-        stripe
-        border
-        style="width: 100%"
-        header-cell-class-name="table-header-bold"
+        :stripe="true"
+        :show-overflow-tooltip="true"
+        class="modern-table"
+        row-key="id"
       >
-        <el-table-column type="selection" width="48" align="center" />
-        <el-table-column prop="examNumber" label="体检编号" width="200" align="left" />
-        <el-table-column prop="patientName" label="姓名" width="140" align="left" />
-        <el-table-column prop="gender" label="性别" width="80" align="center">
+        <el-table-column prop="examid" label="检查ID" width="320" align="left">
           <template #default="{ row }">
-            <el-tag :type="row.gender === '男' ? 'primary' : 'danger'">
-              {{ row.gender }}
+            <div class="exam-id">
+              <Icon icon="ep:document" />
+              <span>{{ row.examid }}</span>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="name" label="姓名" width="120" align="left">
+          <template #default="{ row }">
+            <div class="patient-name">
+              <el-avatar :size="28" class="patient-avatar">
+                {{ row.name?.charAt(0) }}
+              </el-avatar>
+              <span>{{ row.name }}</span>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="gender" label="性别" width="70" align="center">
+          <template #default="{ row }">
+            <el-tag :type="row.gender === '1' ? 'primary' : 'danger'" class="gender-tag">
+              <Icon :icon="row.gender === '1' ? 'ep:male' : 'ep:female'" />
+              {{ row.gender === '1' ? '男' : row.gender === '2' ? '女' : '未知' }}
             </el-tag>
           </template>
         </el-table-column>
-        <el-table-column prop="age" label="年龄" width="80" align="center" />
-        <el-table-column prop="examTime" label="检查时间" width="150" align="center" />
-        <el-table-column prop="duration" label="时长" width="100" align="center">
+        <el-table-column prop="age" label="年龄" width="90" align="center">
           <template #default="{ row }">
-            <el-tag type="info">{{ row.duration }}</el-tag>
+            <div class="age-badge">{{ row.age }}岁</div>
           </template>
         </el-table-column>
-        <el-table-column label="分析" width="120" align="center">
+        <el-table-column prop="wearstarttime" label="佩戴开始时间" width="210" align="center">
           <template #default="{ row }">
-            <el-button type="primary" size="small" plain @click="handleAnalysis(row)"
-              >Holter</el-button
+            <el-date-picker
+              v-model="row.wearstarttime"
+              type="datetime"
+              placeholder="选择佩戴时间"
+              format="YYYY-MM-DD HH:mm:ss"
+              value-format="YYYY-MM-DD HH:mm:ss"
+              size="small"
+              style="width: 190px"
+              @change="handleWearTimeChange(row)"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column prop="duration" label="时长" width="140" align="center">
+          <template #default="{ row }">
+            <el-time-picker
+              v-model="row.duration"
+              placeholder="选择时长"
+              format="HH:mm:ss"
+              value-format="HH:mm:ss"
+              size="small"
+              style="width: 120px"
+              @change="handleDurationChange(row)"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column label="分析" width="100" align="center">
+          <template #default="{ row }">
+            <el-button
+              type="primary"
+              size="small"
+              class="analysis-btn"
+              @click="handleAnalysis(row)"
             >
+              <Icon icon="ep:monitor" />
+              Holter
+            </el-button>
           </template>
         </el-table-column>
-        <el-table-column prop="reportStatus" label="报告" width="120" align="center">
+        <el-table-column prop="reportgenerated" label="报告" width="100" align="center">
           <template #default="{ row }">
-            <el-tag :type="row.reportStatus === '已生成' ? 'success' : 'info'">
-              {{ row.reportStatus }}
+            <el-tag :type="row.reportgenerated === 1 ? 'success' : 'warning'" class="status-tag">
+              <Icon :icon="row.reportgenerated === 1 ? 'ep:circle-check' : 'ep:clock'" />
+              {{ row.reportgenerated === 1 ? '已生成' : '未生成' }}
             </el-tag>
           </template>
         </el-table-column>
-        <el-table-column label="上传" width="120" align="center">
+        <el-table-column label="上传" width="100" align="center">
           <template #default="{ row }">
-            <el-button type="primary" size="small" plain @click="handleUpload(row)">上传</el-button>
+            <el-button type="primary" size="small" class="upload-btn" @click="handleUpload(row)">
+              <Icon icon="ep:upload" />
+              上传
+            </el-button>
           </template>
         </el-table-column>
-        <el-table-column label="申请" width="120" align="center">
+        <el-table-column prop="superiorrequest" label="申请" width="100" align="center">
           <template #default="{ row }">
-            <el-tag :type="row.applicationStatus === '已申请' ? 'success' : 'info'">
-              {{ row.applicationStatus }}
+            <el-tag :type="row.superiorrequest === 1 ? 'success' : 'info'" class="status-tag">
+              <Icon :icon="row.superiorrequest === 1 ? 'ep:check' : 'ep:circle-close'" />
+              {{ row.superiorrequest === 1 ? '已申请' : '未申请' }}
             </el-tag>
           </template>
         </el-table-column>
-        <el-table-column label="下载" width="120" align="center">
+        <el-table-column label="下载" width="100" align="center">
           <template #default="{ row }">
-            <el-button type="success" size="small" plain @click="handleDownload(row)"
-              >下载</el-button
+            <el-button
+              type="success"
+              size="small"
+              class="download-btn"
+              @click="handleDownload(row)"
             >
+              <Icon icon="ep:download" />
+              下载
+            </el-button>
+          </template>
+        </el-table-column>
+        <el-table-column prop="orgname" label="机构" width="160" align="left" show-overflow-tooltip>
+          <template #default="{ row }">
+            <div class="org-info">
+              <Icon icon="ep:office-building" />
+              <span>{{ row.orgname }}</span>
+            </div>
           </template>
         </el-table-column>
-        <el-table-column
-          prop="institution"
-          label="机构"
-          min-width="120"
-          align="left"
-          show-overflow-tooltip
-        />
       </el-table>
-      <!-- 分页 -->
-      <Pagination
-        :total="total"
-        v-model:page="queryParams.pageNo"
-        v-model:limit="queryParams.pageSize"
-        @pagination="getList"
-      />
-    </ContentWrap>
 
-    <!-- 患者选择组件 -->
-    <PatientSelect
-      ref="patientSelectRef"
-      title="选择患者"
-      type="holter"
-      :multiple="true"
-      :max-select="50"
-      @confirm="handlePatientConfirm"
-      @cancel="handlePatientCancel"
-    />
-  </div>
+      <!-- 分页 -->
+      <div class="pagination-wrapper">
+        <Pagination
+          :total="total"
+          v-model:page="queryParams.pageNo"
+          v-model:limit="queryParams.pageSize"
+          @pagination="getList"
+        />
+      </div>
+    </el-card>
+  </ContentWrap>
+
+  <!-- 患者选择组件 -->
+  <PatientSelect
+    ref="patientSelectRef"
+    title="选择患者"
+    type="holter"
+    :multiple="true"
+    :max-select="50"
+    @confirm="handlePatientConfirm"
+    @cancel="handlePatientCancel"
+  />
 </template>
 
 <script lang="ts" setup>
 import { ref, reactive, onMounted } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import PatientSelect from '@/patientcom/index.vue'
+import { ecgdataApi, ecgdataVO } from '@/api/ecgdata'
+import { Search, Refresh, Plus, Download } from '@element-plus/icons-vue'
 
 defineOptions({ name: 'AnalysisHolter' })
 
-// 定义接口类型
-interface HolterData {
-  id: number
-  examNumber: string
-  patientName: string
-  gender: string
-  age: number
-  examTime: string
-  duration: string
-  analysisStatus: string
-  reportStatus: string
-  canUpload: boolean
-  applicationStatus: string
-  institution: string
-}
-
 const loading = ref(false)
 const exportLoading = ref(false)
 const total = ref(0)
-const tableData = ref<HolterData[]>([])
-const selectedIds = ref<number[]>([])
+const tableData = ref<ecgdataVO[]>([])
 const queryFormRef = ref()
 const patientSelectRef = ref()
 
@@ -244,134 +272,51 @@ const patientSelectRef = ref()
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
-  patientName: '',
+  name: '',
   gender: '',
-  idCard: '',
-  examNumber: '',
-  ageMin: undefined as number | undefined,
-  ageMax: undefined as number | undefined,
+  examid: '',
   examDate: [],
-  examTime: '',
-  institution: ''
+  orgname: ''
 })
 
-// 统计数据
-const stats = reactive({
-  total: 0,
-  today: 0,
-  analyzed: 0,
-  pending: 0
-})
-
-// 模拟数据
-const mockData = [
-  {
-    id: 1,
-    examNumber: '572506080',
-    patientName: '赵艳军',
-    gender: '男',
-    age: 53,
-    examTime: '07-08 10:07',
-    duration: '0时30分',
-    analysisStatus: '已完成',
-    reportStatus: '已生成',
-    canUpload: true,
-    applicationStatus: '未申请',
-    institution: '保定慈惠医院'
-  },
-  {
-    id: 2,
-    examNumber: '1000370587',
-    patientName: '郭宣宣',
-    gender: '女',
-    age: 31,
-    examTime: '07-08 10:30',
-    duration: '0时30分',
-    analysisStatus: '分析中',
-    reportStatus: '未生成',
-    canUpload: false,
-    applicationStatus: '未申请',
-    institution: '沧州慈惠医院'
-  },
-  {
-    id: 3,
-    examNumber: '1000381275',
-    patientName: '薛巧敏',
-    gender: '男',
-    age: 34,
-    examTime: '07-08 10:28',
-    duration: '0时30分',
-    analysisStatus: '已完成',
-    reportStatus: '已生成',
-    canUpload: true,
-    applicationStatus: '已申请',
-    institution: '沧州慈惠医院'
-  },
-  {
-    id: 4,
-    examNumber: '0440000201',
-    patientName: '刘鑫',
-    gender: '男',
-    age: 41,
-    examTime: '07-08 10:11',
-    duration: '0时30分',
-    analysisStatus: '已完成',
-    reportStatus: '已生成',
-    canUpload: true,
-    applicationStatus: '未申请',
-    institution: '包头康泰医院'
-  },
-  {
-    id: 5,
-    examNumber: '532507070',
-    patientName: '李艳杰',
-    gender: '男',
-    age: 49,
-    examTime: '07-08 09:05',
-    duration: '0时30分',
-    analysisStatus: '已完成',
-    reportStatus: '已生成',
-    canUpload: true,
-    applicationStatus: '未申请',
-    institution: '高碑店全科诊所'
-  }
-]
+/** 格式化日期 */
+const formatDate = (date: Date | string) => {
+  if (!date) return ''
+  const d = new Date(date)
+  return d.toLocaleDateString('zh-CN', {
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit'
+  })
+}
 
 /** 获取列表数据 */
 const getList = async () => {
   loading.value = true
   try {
-    // 模拟API调用延迟
-    await new Promise((resolve) => setTimeout(resolve, 300))
-
-    // 这里应该调用真实的API
-    // const response = await HolterApi.getHolterPage(queryParams)
-
-    // 模拟数据筛选
-    let filteredData = [...mockData]
-
-    if (queryParams.patientName) {
-      filteredData = filteredData.filter((item) =>
-        item.patientName.includes(queryParams.patientName)
-      )
+    // 构建查询参数
+    const params = {
+      pageNo: queryParams.pageNo,
+      pageSize: queryParams.pageSize,
+      name: queryParams.name || undefined,
+      gender: queryParams.gender || undefined,
+      examid: queryParams.examid || undefined,
+      orgname: queryParams.orgname || undefined
     }
 
-    if (queryParams.gender) {
-      filteredData = filteredData.filter((item) => item.gender === queryParams.gender)
+    // 如果有日期范围，添加到参数中
+    if (queryParams.examDate && queryParams.examDate.length === 2) {
+      params['wearstarttimeBegin'] = queryParams.examDate[0]
+      params['wearstarttimeEnd'] = queryParams.examDate[1]
     }
 
-    if (queryParams.examNumber) {
-      filteredData = filteredData.filter((item) => item.examNumber.includes(queryParams.examNumber))
-    }
-
-    tableData.value = filteredData
-    total.value = filteredData.length
-
-    // 更新统计数据
-    stats.total = filteredData.length
-    stats.today = filteredData.filter((item) => item.examTime.includes('07-08')).length
-    stats.analyzed = filteredData.filter((item) => item.analysisStatus === '已完成').length
-    stats.pending = filteredData.filter((item) => item.analysisStatus !== '已完成').length
+    const data = await ecgdataApi.getecgdataPage(params)
+    tableData.value = data.list || []
+    total.value = data.total || 0
+  } catch (error) {
+    console.error('获取数据失败:', error)
+    ElMessage.error('获取数据失败')
   } finally {
     loading.value = false
   }
@@ -389,47 +334,22 @@ const resetQuery = () => {
   handleQuery()
 }
 
-/** 表格选择变化 */
-const handleSelectionChange = (selection) => {
-  selectedIds.value = selection.map((item) => item.id)
-}
-
 /** 分析 */
 const handleAnalysis = (row) => {
-  if (row.analysisStatus === '已完成') {
-    ElMessage.info('该记录已完成分析')
-    return
-  }
   ElMessage.success('开始分析...')
   // 这里调用分析API
 }
 
-/** 报告 */
-const handleReport = (row) => {
-  if (row.reportStatus === '已生成') {
-    ElMessage.success('打开报告...')
-    // 这里打开报告
-  } else {
-    ElMessage.info('报告未生成，请先完成分析')
-  }
-}
-
 /** 上传 */
 const handleUpload = (row) => {
   ElMessage.success('上传功能')
   // 这里实现上传逻辑
 }
 
-/** 申请 */
-const handleApply = (row) => {
-  ElMessage.success('申请功能')
-  // 这里实现申请逻辑
-}
-
 /** 下载 */
 const handleDownload = (row) => {
-  if (row.analysisStatus !== '已完成') {
-    ElMessage.warning('请等待分析完成后再下载')
+  if (row.reportgenerated !== 1) {
+    ElMessage.warning('请等待报告生成后再下载')
     return
   }
   ElMessage.success('开始下载...')
@@ -440,19 +360,16 @@ const handleDownload = (row) => {
 const handleExport = async () => {
   exportLoading.value = true
   try {
-    ElMessage.success('导出功能')
-    // 这里实现导出逻辑
+    await ecgdataApi.exportecgdata(queryParams)
+    ElMessage.success('导出成功')
+  } catch (error) {
+    console.error('导出失败:', error)
+    ElMessage.error('导出失败')
   } finally {
     exportLoading.value = false
   }
 }
 
-/** 批量下载 */
-const handleBatchDownload = () => {
-  ElMessage.success('批量下载功能')
-  // 这里实现批量下载逻辑
-}
-
 /** 操作分发 */
 const handleCommand = (command, row) => {
   switch (command) {
@@ -476,10 +393,15 @@ const handleDelete = async (row) => {
       cancelButtonText: '取消',
       type: 'warning'
     })
+
+    await ecgdataApi.deleteecgdata(row.id)
     ElMessage.success('删除成功')
     getList()
-  } catch {
-    ElMessage.info('已取消删除')
+  } catch (error) {
+    if (error !== 'cancel') {
+      console.error('删除失败:', error)
+      ElMessage.error('删除失败')
+    }
   }
 }
 
@@ -499,6 +421,38 @@ const handlePatientCancel = () => {
   console.log('取消选择患者')
 }
 
+/** 处理佩戴时间变化 */
+const handleWearTimeChange = async (row: ecgdataVO) => {
+  try {
+    console.log('佩戴时间已更新:', row.wearstarttime)
+    // 这里可以调用API更新佩戴时间
+    // await ecgdataApi.updateecgdata({
+    //   id: row.id,
+    //   wearstarttime: row.wearstarttime
+    // })
+    ElMessage.success('佩戴时间更新成功')
+  } catch (error) {
+    console.error('更新佩戴时间失败:', error)
+    ElMessage.error('更新佩戴时间失败')
+  }
+}
+
+/** 处理时长变化 */
+const handleDurationChange = async (row: ecgdataVO) => {
+  try {
+    console.log('时长已更新:', row.duration)
+    // 这里可以调用API更新时长
+    // await ecgdataApi.updateecgdata({
+    //   id: row.id,
+    //   duration: row.duration
+    // })
+    ElMessage.success('时长更新成功')
+  } catch (error) {
+    console.error('更新时长失败:', error)
+    ElMessage.error('更新时长失败')
+  }
+}
+
 /** 初始化 */
 onMounted(() => {
   getList()
@@ -506,177 +460,340 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-.holter-container {
-  background: #f5f7fa;
-  min-height: 100vh;
-}
+.search-card {
+  margin-bottom: 8px;
+  border-radius: 8px;
+  padding: 12px 16px;
 
-.page-header {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  padding: 30px;
-  border-radius: 12px;
-  margin-bottom: 20px;
-  color: white;
-  text-align: center;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
-
-  .page-title {
-    font-size: 28px;
-    font-weight: 600;
-    margin: 0 0 10px 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 12px;
-
-    .title-icon {
-      font-size: 32px;
-    }
-  }
-
-  .page-description {
-    font-size: 16px;
-    opacity: 0.9;
-    margin: 0;
-  }
-}
-
-.age-range {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-
-  .range-separator {
-    color: #666;
-    font-weight: 500;
-  }
-}
-
-.stats-row {
-  margin-bottom: 20px;
-
-  .stat-card {
-    background: white;
-    padding: 20px;
-    border-radius: 12px;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
-    display: flex;
-    align-items: center;
-    gap: 15px;
-    transition: transform 0.3s ease;
-
-    &:hover {
-      transform: translateY(-2px);
+  .search-form {
+    .search-fields {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 16px;
+      margin-bottom: 12px;
     }
 
-    .stat-icon {
-      width: 50px;
-      height: 50px;
-      border-radius: 12px;
+    .search-field {
       display: flex;
       align-items: center;
-      justify-content: center;
-      font-size: 24px;
-      color: white;
 
-      &.total {
-        background: linear-gradient(135deg, #667eea, #764ba2);
+      &.name-field {
+        margin-right: 16px;
       }
 
-      &.today {
-        background: linear-gradient(135deg, #f093fb, #f5576c);
+      &.gender-field {
+        margin-right: 16px;
       }
 
-      &.analyzed {
-        background: linear-gradient(135deg, #4facfe, #00f2fe);
+      &.examid-field {
+        margin-right: 16px;
       }
 
-      &.pending {
-        background: linear-gradient(135deg, #43e97b, #38f9d7);
+      &.date-field {
+        margin-right: 16px;
       }
     }
 
-    .stat-content {
-      .stat-number {
-        font-size: 28px;
-        font-weight: 700;
-        color: #333;
-        line-height: 1;
+    .el-form-item {
+      margin-bottom: 0;
+      margin-right: 0;
+
+      :deep(.el-form-item__label) {
+        padding-right: 6px;
+        font-size: 13px;
+        line-height: 32px;
+        white-space: nowrap;
       }
 
-      .stat-label {
-        font-size: 14px;
-        color: #666;
-        margin-top: 4px;
+      :deep(.el-form-item__content) {
+        line-height: 1;
+      }
+    }
+
+    // 确保下拉框有足够的宽度
+    :deep(.el-select) {
+      width: 100%;
+
+      .el-input__wrapper {
+        width: 100%;
+      }
+
+      .el-input__inner {
+        width: 100%;
       }
     }
   }
+
+  // 响应式设计
+  @media (max-width: 768px) {
+    .search-fields {
+      flex-direction: column;
+      gap: 12px;
+    }
+
+    .search-field {
+      margin-right: 0;
+      margin-bottom: 8px;
+    }
+  }
+}
+
+.search-buttons-row {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  margin-top: 8px;
+}
+
+.search-buttons-group {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
 }
 
 .table-card {
-  border-radius: 12px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
-
-  :deep(.el-table) {
-    border-radius: 12px;
-    overflow: hidden;
-    font-size: 16px; // 新增：调整表格字体大小
-
-    .el-table__header,
-    .el-table__row,
-    .el-table__cell {
-      font-size: 16px; // 新增：统一字体大小
-      text-align: center; // 新增：文字居中
-    }
-
-    .el-table__header {
-      background: #f8f9ff;
-
-      th {
-        background: #f8f9ff;
-        color: #333;
-        font-weight: 600;
-        border-bottom: 2px solid #e4e7ed;
-      }
-    }
-
-    .el-table__row {
-      &:hover {
-        background: #f8f9ff;
-      }
-    }
-  }
-}
-
-:deep(.el-input) {
-  .el-input__wrapper {
-    border-radius: 8px;
-  }
-}
-
-:deep(.el-select) {
-  .el-input__wrapper {
-    border-radius: 8px;
-  }
-}
-
-:deep(.el-date-editor) {
   border-radius: 8px;
+
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .card-title {
+      font-size: 16px;
+      font-weight: 600;
+      color: #303133;
+    }
+
+    .card-extra {
+      display: flex;
+      align-items: center;
+    }
+  }
+}
+
+.modern-table {
+  .exam-id {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-weight: 600;
+    color: #667eea;
+
+    .ep-document {
+      font-size: 12px;
+    }
+  }
+
+  .patient-name {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+
+    .patient-avatar {
+      background: linear-gradient(135deg, #667eea, #764ba2);
+      font-weight: 600;
+      font-size: 11px;
+    }
+  }
+
+  .gender-tag {
+    border-radius: 12px;
+    padding: 1px 6px;
+    font-weight: 500;
+    font-size: 11px;
+
+    .ep-male,
+    .ep-female {
+      margin-right: 1px;
+    }
+  }
+
+  .age-badge {
+    background: linear-gradient(135deg, #f093fb, #f5576c);
+    color: white;
+    padding: 1px 6px;
+    border-radius: 12px;
+    font-weight: 500;
+    font-size: 11px;
+  }
+
+  // 时间选择器样式
+  :deep(.el-date-picker),
+  :deep(.el-time-picker) {
+    .el-input__wrapper {
+      border-radius: 6px;
+      border: 1px solid #dcdfe6;
+
+      &:hover {
+        border-color: #c0c4cc;
+      }
+
+      &.is-focus {
+        border-color: #409eff;
+      }
+    }
+
+    .el-input__inner {
+      font-size: 12px;
+      padding: 0 8px;
+    }
+  }
+
+  // 确保时间选择器在表格中正确显示
+  :deep(.el-table__cell) {
+    .el-date-picker,
+    .el-time-picker {
+      width: 100%;
+    }
+  }
+
+  .time-info {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    color: #666;
+    font-size: 12px;
+
+    .ep-clock {
+      color: #667eea;
+    }
+  }
+
+  .duration-tag {
+    border-radius: 12px;
+    padding: 1px 6px;
+    font-weight: 500;
+    font-size: 11px;
+
+    .ep-timer {
+      margin-right: 1px;
+    }
+  }
+
+  .analysis-btn,
+  .upload-btn,
+  .download-btn {
+    border-radius: 12px;
+    padding: 2px 8px;
+    font-weight: 500;
+    font-size: 11px;
+    border: none;
+    transition: all 0.3s ease;
+
+    &:hover {
+      transform: translateY(-1px);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    }
+  }
+
+  .analysis-btn {
+    background: linear-gradient(135deg, #667eea, #764ba2);
+  }
+
+  .upload-btn {
+    background: linear-gradient(135deg, #4facfe, #00f2fe);
+  }
+
+  .download-btn {
+    background: linear-gradient(135deg, #43e97b, #38f9d7);
+  }
+
+  .status-tag {
+    border-radius: 12px;
+    padding: 1px 6px;
+    font-weight: 500;
+    font-size: 11px;
+
+    .ep-circle-check,
+    .ep-clock,
+    .ep-check,
+    .ep-circle-close {
+      margin-right: 2px;
+      font-size: 10px;
+    }
+  }
+
+  .org-info {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    color: #666;
+    font-size: 12px;
+
+    .ep-office-building {
+      color: #667eea;
+    }
+  }
+}
+
+.pagination-wrapper {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+:deep(.el-table) {
+  border-radius: 8px;
+  overflow: hidden;
+
+  .el-table__header {
+    background: #f5f7fa;
+
+    th {
+      background: #f5f7fa;
+      color: #303133;
+      font-weight: 600;
+      padding: 12px 8px; // 增加表头padding
+    }
+  }
+
+  .el-table__row {
+    transition: all 0.3s ease;
+
+    &:hover {
+      background: #f0f9ff;
+    }
+
+    td {
+      padding: 12px 8px; // 增加单元格padding
+    }
+  }
+
+  // 增加列间距
+  .el-table__cell {
+    border-right: 1px solid #ebeef5;
+
+    &:last-child {
+      border-right: none;
+    }
+  }
+}
+
+:deep(.el-card) {
+  border: none;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
 }
 
 :deep(.el-button) {
-  border-radius: 8px;
-  font-weight: 500;
-}
-
-:deep(.el-tag) {
   border-radius: 6px;
-  font-weight: 500;
-}
 
-.table-header-bold {
-  font-weight: 600;
-  color: #333;
-  background: #f8f9ff;
+  &.el-button--primary {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border: none;
+
+    &:hover {
+      background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
+    }
+  }
+
+  &.el-button--success {
+    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
+    border: none;
+
+    &:hover {
+      background: linear-gradient(135deg, #0f8a7d 0%, #2dd66e 100%);
+    }
+  }
 }
 </style>