检查页修改功能

frontend/src/renderer/src/views/Dashboard.vue

@@ -1012,8 +1012,10 @@ function delClick(id) {
 .main-dashboard-top {
   display: flex;
   width: 100%;
-  padding: 15px 20px 0px;
+  align-items: center;
+  padding: 10px 20px;
   gap: 20px;
+  background-color: #292929;
 }
 
 .main-dashboard-top-title {

frontend/src/renderer/src/views/Detection.vue

@@ -25,12 +25,12 @@
           <!-- handleStartStop -->
           <el-button v-if="isRecording" @click="handleStartStop" type="primary" class="start-btn" style="background-image: linear-gradient(to right, rgb(236, 50, 166), rgb(160, 5, 216)); 
                   --el-button-border-color: #409EFF;
-              --el-button-border-color: transparent ">
+              --el-button-border-color: transparent;width: 120px;height: 30px;font-size: 20px;" >
             结束
           </el-button>
           <el-button v-if="isStart && isConnected" @click="saveDetectionData" type="primary" class="start-btn" style="background-image: linear-gradient(to right, #FBB106, #A817C6); 
                   --el-button-border-color: #409EFF;
-              --el-button-border-color: transparent ">
+              --el-button-border-color: transparent;width: 120px;height: 30px;font-size: 20px;">
             保存数据
           </el-button>
         </div>
@@ -86,7 +86,7 @@
 
                 </div>
                 <div style="display: flex;align-items: center;">
-                  <div :style="{ color: imuStatus == '已连接' ? '#00CC33' : '#ffffff' }" style="font-size: 14px;">{{
+                  <div :style="{ color: imuStatus == '已连接' ? '#00CC33' : '#808080' }" style="font-size: 14px;">{{
                     imuStatus
                     }}</div>
                   <el-button type="primary" class="start-btn" @click="clearAndStartTracking" :disabled="isRecording"
@@ -165,7 +165,7 @@
                     足部压力
                   </div>
                 </div>
-                <div :style="{ color: pressureStatus == '已连接' ? '#00CC33' : '#ffffff' }" style="font-size: 14px;">{{
+                <div :style="{ color: pressureStatus == '已连接' ? '#00CC33' : '#808080' }" style="font-size: 14px;">{{
                   pressureStatus }}</div>
               </div>
             </div>
@@ -239,7 +239,7 @@
                     基础信息
                   </div>
                 </div>
-                <el-icon class="edit-icon" style="width: 24px;height: 24px;font-size: 24px;">
+                <el-icon class="edit-icon" style="width: 24px;height: 24px;font-size: 24px;" @click="editPatient">
                   <Edit />
                 </el-icon>
               </div>
@@ -320,7 +320,7 @@
                     视频
                   </div>
                 </div>
-                <div :style="{ color: videoStatus == '已连接' ? '#00CC33' : '#ffffff' }" style="font-size: 14px;">{{
+                <div :style="{ color: videoStatus == '已连接' ? '#00CC33' : '#808080' }" style="font-size: 14px;">{{
                   videoStatus }}</div>
               </div>
             </div>
@@ -331,8 +331,8 @@
         </div>
       </div>
     </div>
-    <el-dialog v-model="dialogVisible" center title="诊断信息" width="600" :before-close="handleClose">
+    <el-dialog class="tsDialog" v-model="resDialogVisible" center title="诊断信息" width="600" :before-close="reshandleClose">
-      <div>
+      <div style="margin-top:10px">
         <div class="dialog-title">
           <div class="dialog-title-item">
             <div>用户ID:</div>{{ patientInfo.sessionId }}
@@ -358,9 +358,116 @@
       </div>
       <template #footer>
         <span class="dialog-footer">
-          <el-button @click="dialogVisible = false">取消</el-button>
+          <el-button style="background: #323232;border:1px solid #787878;color: #ffffff;" @click="resDialogVisible = false">取消</el-button>
-          <el-button @click="handleDiagnosticInfo('diagnosed')">暂存</el-button>
+          <el-button type="primary" style="background:#0099ff;" @click="handleDiagnosticInfo('diagnosed')">暂存</el-button>
-          <el-button type="primary" @click="handleDiagnosticInfo('completed')">
+          <el-button type="primary" style="background:#0099ff;" @click="handleDiagnosticInfo('completed')">
+            保存
+          </el-button>
+        </span>
+      </template>
+    </el-dialog>
+    <el-dialog class="tsDialog" v-model="dialogVisible" title="编辑基础信息" width="50%" :before-close="handleClose">
+      <div class="form-box" style="margin-top: 20px;">
+        <el-form ref="patientFormRef" :model="patientForm" :rules="formRules" label-width="100px" class="patient-form">
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="测试者ID" prop="testerId">
+                <el-input v-model="patientForm.id" disabled placeholder="请输入测试者ID" clearable />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="姓名" prop="name" required>
+                <el-input v-model="patientForm.name" placeholder="请输入" clearable />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="性别" prop="gender" required>
+                <el-select v-model="patientForm.gender" placeholder="请选择">
+                  <el-option label="男" value="男" />
+                  <el-option label="女" value="女" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="出生日期" prop="birth_date" required>
+                <el-date-picker v-model="patientForm.birth_date" type="date" placeholder="请选择" style="width: 100%"
+                  @change="calculateAge" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="年龄">
+                <el-input v-model="calculatedAge" placeholder="自动计算" readonly suffix-icon="Calendar" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="民族" prop="nationality">
+                <el-select v-model="patientForm.nationality" placeholder="请选择">
+                  <el-option v-for="item in nationalityOptions" :key="item.value" :label="item.label"
+                    :value="item.value" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="长期居住地" prop="residence">
+                <el-input v-model="patientForm.residence" placeholder="请输入" clearable />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="身高" prop="height" required>
+                <el-input v-model="patientForm.height" placeholder="请输入" clearable>
+                  <template #suffix>cm</template>
+                </el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="体重" prop="weight" required>
+                <el-input v-model="patientForm.weight" placeholder="请输入" clearable>
+                  <template #suffix>kg</template>
+                </el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="鞋码" prop="shoe_size">
+                <el-input v-model="patientForm.shoe_size" placeholder="请输入" clearable />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="电话号码" prop="phone" required>
+                <el-input v-model="patientForm.phone" placeholder="请输入" clearable />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="电子邮箱" prop="email">
+                <el-input v-model="patientForm.email" placeholder="请输入" clearable />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="职业" prop="occupation">
+                <el-select v-model="patientForm.occupation" placeholder="请选择">
+                  <el-option v-for="item in occupationOptions" :key="item.value" :label="item.label"
+                    :value="item.value" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="单位" prop="workplace">
+                <el-input v-model="patientForm.workplace" placeholder="请输入" clearable />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="handleClose" 
+          style="margin-right: 0px;background: #323232;border:1px solid #787878;color: #ffffff;">退出</el-button>
+          <el-button type="primary" style="background: #0099ff;" @click="handleSave" :loading="saveLoading">
             保存
           </el-button>
         </span>
@@ -378,7 +485,7 @@ import html2canvas from 'html2canvas'
 import Header from '@/views/Header.vue'
 import { useAuthStore } from '../stores/index.js'
 import * as echarts from 'echarts'
-import { getBackendUrl } from '../services/api.js'
+import { getBackendUrl ,patientAPI} from '../services/api.js'
 const authStore = useAuthStore()
 const router = useRouter()
 const route = useRoute()
@@ -418,15 +525,47 @@ let frameCount = 0
 
 // 后端服务器地址配置
 const BACKEND_URL = getBackendUrl()
+const resDialogVisible = ref(false)
+const reshandleClose = () => {
+  resDialogVisible.value = false
+}
 const dialogVisible = ref(false)
 const handleClose = () => {
   dialogVisible.value = false
 }
+// 表单引用
+const patientFormRef = ref()
+// 表单数据
+const saveLoading = ref(false)
+const patientForm = ref({
+  id: '',
+  name: '',
+  gender: '',
+  birth_date: '',
+  nationality: '',
+  residence: '',
+  height: '',
+  weight: '',
+  shoe_size: '',
+  phone: '',
+  occupation: '',
+  workplace: '',
+  email: ''
+})
+const occupationOptions = ref([
+  { label: '学生', value: '学生' }
+])
+const nationalityOptions = ref([
+  { label: '汉族', value: '汉族' }
+])
 const diagnosticForm = ref({
   diagnosis_info: '',
   treatment_info: '',
   suggestion_info: ''
 })
+const calculatedAge = ref(null)
+//修改
+
 // 模拟历史数据
 const historyData = ref([
   // { id: 3, rotLeft: '-55.2°', rotRight: '54.2°', tiltLeft: '-17.7°', tiltRight: '18.2°', pitchDown: '-20.2°', pitchUp: '10.5°' },
@@ -434,14 +573,14 @@ const historyData = ref([
   // { id: 1, rotLeft: '-56.1°', rotRight: '55.7°', tiltLeft: '-17.5°', tiltRight: '18.5°', pitchDown: '-22.2°', pitchUp: '11.5°' }
 ])
 const chartoption = ref({
-  backgroundColor: '#000000',
+  backgroundColor: '#242424',
   grid: { top: 0, right: 0, bottom: 0, left: 0 },
   animation: false,
   series: [
     {
       type: 'gauge',
       radius: '180%',
-      center: ['50%', '90%'],
+      center: ['50%', '91%'],
       startAngle: 180,
       endAngle: 0,
       min: -90,
@@ -511,7 +650,7 @@ const chartoption = ref({
       },
       data: [
         {
-          value: 20
+          value: 0
         }
       ]
     }
@@ -560,6 +699,60 @@ const resetTimer = () => {
   seconds.value = 0;
   blinkState.value = false;
 };
+const validateForm = async () => {
+  try {
+    await patientFormRef.value.validate()
+    return true
+  } catch (error) {
+    ElMessage.error('请完善必填信息')
+    return false
+  }
+}
+//保存基础信息
+const handleSave = async () => {
+  if (!(await validateForm())) return
+  saveLoading.value = true
+  try {
+    await savePatient()
+    ElMessage.success('修改成功')
+    dialogVisible.value = false
+    saveLoading.value = false
+    loadPatientInfo()
+  } catch (error) {
+    ElMessage.error('修改失败：' + error.message)
+    saveLoading.value = false
+  } finally {
+    saveLoading.value = false
+  }
+}
+const savePatient = async () => {
+  const patientData = {
+    id: patientForm.value.id,
+    name: patientForm.value.name,
+    gender: patientForm.value.gender,
+    age: calculatedAge.value,
+    birth_date: patientForm.value.birth_date,
+    height: patientForm.value.height,
+    weight: patientForm.value.weight,
+    shoe_size: patientForm.value.shoe_size,
+    phone: patientForm.value.phone,
+    occupation: patientForm.value.occupation,
+    email: patientForm.value.email,
+    nationality: patientForm.value.nationality,
+    residence: patientForm.value.residence,
+    workplace: patientForm.value.workplace
+  }
+  try {
+    const response = await patientAPI.updatePatient(patientForm.value.id, patientData)
+    if (response.success) {
+      return response.data
+    } else {
+      throw new Error(response.message || '修改失败')
+    }
+  } catch (error) {
+    throw error
+  }
+}
 function routeTo(path) {
   router.push(`/`)
 }
@@ -578,7 +771,14 @@ const calculateAge = (birthDate) => {
 const handleBack = () => {
   console.log('返回上一页')
 }
-
+const editPatient = () => {
+  // 修改患者信息
+  patientForm.value = JSON.parse(JSON.stringify(patientInfo.value))
+  if (patientForm.value.birth_date) {
+    calculatedAge.value = calculateAge(patientForm.value.birth_date)
+  }
+  dialogVisible.value = true
+}
 // WebSocket连接函数
 function connectWebSocket() {
   try {
@@ -1604,7 +1804,7 @@ async function saveRecording() {
             treatment_info: '',
             suggestion_info: ''
           }
-          dialogVisible.value = true
+          resDialogVisible.value = true
         } else {
           throw new Error(result.message || '保存失败')
         }
@@ -1794,13 +1994,6 @@ const initchart = () => {
       }
       rotationCharts = echarts.init(chartDom);
       rotationCharts.setOption(chartoption.value);
-
-      // 添加窗口大小调整监听器
-      window.addEventListener('resize', () => {
-        if (rotationCharts) {
-          rotationCharts.resize();
-        }
-      });
     } else {
       console.warn('找不到 ID 为  的 DOM 元素');
     }
@@ -1812,12 +2005,6 @@ const initchart = () => {
       }
       pitchCharts = echarts.init(chartDom2);
       pitchCharts.setOption(chartoption.value);
-      // 添加窗口大小调整监听器
-      window.addEventListener('resize', () => {
-        if (pitchCharts) {
-          pitchCharts.resize();
-        }
-      });
     } else {
       console.warn('找不到 ID 为  的 DOM 元素');
     }
@@ -1829,15 +2016,21 @@ const initchart = () => {
       }
       tiltCharts = echarts.init(chartDom3);
       tiltCharts.setOption(chartoption.value);
+    } else {
+      console.warn('找不到 ID 为  的 DOM 元素');
+    }
       // 添加窗口大小调整监听器
       window.addEventListener('resize', () => {
+        if (rotationCharts) {
+          rotationCharts.resize();
+        }
+        if (pitchCharts) {
+          pitchCharts.resize();
+        }
         if (tiltCharts) {
           tiltCharts.resize();
         }
       });
-    } else {
-      console.warn('找不到 ID 为  的 DOM 元素');
-    }
   });
 }
 
@@ -2403,10 +2596,6 @@ onUnmounted(() => {
   color: #ffffff;
 }
 
-:deep(.el-textarea__inner) {
-  background: #1D1b26;
-  color: #ffffff;
-}
 
 :deep(.el-table .el-table__cell) {
   padding: 4px 0px;
@@ -2521,6 +2710,42 @@ onUnmounted(() => {
 :deep(.el-scrollbar__wrap){
   background: #282828 !important;
 }
+:deep(.tsDialog.el-dialog){
+  background-color: #323232;
+  padding:0px;
+  padding-bottom:20px;
+}
+:deep(.tsDialog.el-dialog .el-input__wrapper){
+  background-color: #242424;
+  border: none;
+  box-shadow: none;
+}
+:deep(.tsDialog.el-dialog .el-select__wrapper){
+  background-color: #242424;
+  border: none;
+  box-shadow: none;
+}
+:deep(.tsDialog.el-dialog .el-input__inner){
+  color: #ffffff;
+}
+:deep(.tsDialog.el-dialog .el-select__placeholder){
+  color: #ffffff;
+}
+:deep(.tsDialog.el-dialog .el-dialog__header){
+  border-bottom: 1px solid #1e1e1e;
+  padding:10px 20px;
+}
+:deep(.tsDialog.el-dialog .el-textarea__inner) {
+  background: #242424;
+  color: #ffffff;
+  box-shadow:none;
+}
+:deep( .el-dialog__body){
+  padding:20px;
+}
+:deep(.el-dialog__footer){
+  padding:0px 20px;
+}
 </style>
 <style>
 .dashboard-container.dashboard-container-home .el-table--border .el-table__inner-wrapper:after,