修改检查详情页

frontend/src/renderer/src/assets/new/conduct.svg

@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" xmlns="http://www.w3.org/2000/svg">
-  <g transform="matrix(1 0 0 1 -1015 -82 )">
-    <path d="M 1023 82  C 1027.48 82  1031 85.52  1031 90  C 1031 94.48  1027.48 98  1023 98  C 1018.52 98  1015 94.48  1015 90  C 1015 85.52  1018.52 82  1023 82  Z " fill-rule="nonzero" fill="#ffffff" stroke="none" fill-opacity="0" />
-    <path d="M 1023 82.5  C 1027.2 82.5  1030.5 85.8  1030.5 90  C 1030.5 94.2  1027.2 97.5  1023 97.5  C 1018.8 97.5  1015.5 94.2  1015.5 90  C 1015.5 85.8  1018.8 82.5  1023 82.5  Z " stroke-width="1" stroke="#ff3300" fill="none" />
-  </g>
-</svg>

frontend/src/renderer/src/assets/new/endvideo.svg

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="18px" height="14px" xmlns="http://www.w3.org/2000/svg">
-  <g transform="matrix(1 0 0 1 -8 -9 )">
-    <path d="M 18 3.09091796875001  C 18 2.63636718750001  17.7545390624998 2.22726562499999  17.3863476562499 2.00000000000001  C 17.0181738281251 1.772734375  16.5681738281251 1.8181640625  16.240904296875 2.13636718750003  L 13.5 4.40908203124998  L 13.5 2.59091796875002  C 13.5 1.18181640624999  12.4772695312499 0  11.168173828125 0  L 2.33182617187504 0  C 1.02273046875007 0.0454492187499937  0 1.18183593750001  0 2.63636718750001  L 0 11.40908203125  C 0 12.81818359375  1.02273046875007 14  2.33182617187504 14  L 11.168173828125 14  C 12.436365234375 14  13.5 12.8636328125  13.5 11.40908203125  L 13.5 9.59091796875002  L 16.240904296875 11.90908203125  C 16.4454609375 12.09091796875  16.6499999999999 12.1363671875  16.8954609375 12.1363671875  C 17.059095703125 12.1363671875  17.2227304687501 12.09091796875  17.386365234375 12  C 17.7545390624998 11.772734375  18 11.3636328125  18 10.90908203125  L 18 3.09091796875001  Z M 12.1909218750002 2.63636718750001  L 12.1909218750002 11.3636328125  C 12.1909218750002 12  11.7409218749999 12.5  11.1681914062501 12.5  L 2.33184374999996 12.5  C 1.75911328124994 12.5  1.30911328125012 12  1.30911328125012 11.3636328125  L 1.30911328125012 2.63636718750001  C 1.30911328125012 2.00000000000001  1.75911328124994 1.49999999999999  2.33184374999996 1.49999999999999  L 11.1681914062501 1.49999999999999  C 11.7409218749999 1.49999999999999  12.1909218750002 2.00000000000001  12.1909218750002 2.63636718750001  Z M 16.6909218750002 10.45455078125  L 13.5 7.77271484374999  L 13.5 6.27271484375001  L 16.7318261718749 3.59091796874999  C 16.690904296875 3.54544921874999  16.690904296875 10.45455078125  16.690904296875 10.45455078125  Z M 4.5 9.33333333333333  L 4.5 4.66666666666667  L 9 4.66666666666667  L 9 9.33333333333333  L 4.5 9.33333333333333  Z " fill-rule="nonzero" fill="#ff3300" stroke="none" transform="matrix(1 0 0 1 8 9 )" />
-  </g>
-</svg>

frontend/src/renderer/src/assets/new/jietu.svg

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="14px" xmlns="http://www.w3.org/2000/svg">
-  <g transform="matrix(1 0 0 1 -929 -83 )">
-    <path d="M 15.93125 4.01406249999999  C 15.93125 2.91763139204546  15.0426846590909 2.02904829545454  13.9463423295455 2.02904829545454  L 12.1645063920455 2.02904829545454  C 11.6868607954545 2.02904829545454  11.2775213068181 1.689453125  11.1890802556818 1.21962002840909  L 11.0076349431819 0.245703124999999  C 10.9859019886363 0.127894176136365  10.8836115056819 0.0441406249999972  10.7642045454545 0.0441406249999972  L 5.22031249999998 0.0441406249999972  C 5.1008877840909 0.0441406249999972  4.99850852272732 0.129385653409088  4.9767933238636 0.245703124999999  L 4.79385653409088 1.21803977272727  C 4.70539772727273 1.68796164772727  4.29607599431813 2.0275390625  3.81841264204547 2.0275390625  L 2.0365767045455 2.0275390625  C 0.940234375000045 2.02904829545454  0.0516690340908781 2.91763139204546  0.0516690340908781 4.01406249999999  L 0.0516690340908781 11.9538174715909  C 0.0516690340908781 13.0502485795455  0.94025213068187 13.9388316761364  2.0365767045455 14  L 13.9463423295455 14  C 15.0426846590909 13.9388316761364  15.93125 13.0502485795455  15.93125 11.9538174715909  L 15.93125 4.01406249999999  Z M 2.53284801136363 4.51024502840909  C 2.25836292613633 4.51024502840909  2.0365767045455 4.28854758522728  2.0365767045455 4.01406249999999  C 2.0365767045455 3.87761008522727  2.09245383522727 3.75349786931818  2.18242187500005 3.66354758522728  C 2.27230113636358 3.57357954545454  2.3964133522727 3.5177734375  2.53284801136363 3.5177734375  L 3.52530184659088 3.5177734375  C 3.79978693181818 3.5177734375  4.02157315340912 3.73955965909091  4.02157315340912 4.01404474431818  C 4.02157315340912 4.1504971590909  3.96576704545453 4.27450284090909  3.87579900568187 4.36447088068182  C 3.78584872159092 4.45443892045455  3.6617365056818 4.51022727272728  3.52528409090905 4.51022727272728  L 2.53284801136363 4.51022727272728  Z M 12.2094815340909 8.23203125000001  C 12.2094815340909 10.5612571022727  10.3207208806818 12.4500887784091  7.9915127840909 12.4500887784091  C 5.66226917613642 12.4500887784091  3.77345525568182 10.5612571022727  3.77345525568182 8.23203125000001  C 3.77345525568182 5.90280539772728  5.66228693181813 4.01406249999999  7.9915127840909 4.01406249999999  C 10.3207386363637 4.01406249999999  12.2094815340909 5.90280539772728  12.2094815340909 8.23203125000001  Z M 10.2726207386364 5.95090553977273  C 10.88203125 6.56036931818183  11.2170099431818 7.36988636363637  11.2170099431818 8.23203125000001  C 11.2170099431818 9.09426491477274  10.88203125 9.90379971590909  10.2726207386364 10.5131747159091  C 9.6631569602273 11.12265625  8.85363991477277 11.4576349431818  7.99149502840908 11.4576349431818  C 7.12926136363637 11.4576349431818  6.31972656250002 11.12265625  5.71035156250002 10.5131747159091  C 5.10087002840908 9.90379971590909  4.76589133522725 9.09426491477274  4.76589133522725 8.23203125000001  C 4.76589133522725 7.36990411931819  5.10087002840908 6.56036931818183  5.71035156250002 5.95090553977273  C 6.31974431818185 5.3414950284091  7.12926136363637 5.00651633522727  7.99149502840908 5.00651633522727  C 8.85363991477277 5.00651633522727  9.6631569602273 5.3414950284091  10.2726207386364 5.95090553977273  Z " fill-rule="nonzero" fill="#ffffff" stroke="none" transform="matrix(1 0 0 1 929 83 )" />
-  </g>
-</svg>

frontend/src/renderer/src/assets/new/startvideo.svg

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="14px" height="18px" xmlns="http://www.w3.org/2000/svg">
-  <g transform="matrix(1 0 0 1 -10 -7 )">
-    <path d="M 6.85372340217753 8.92622950819672  C 6.93351063622007 9.0218579213627  7.06648935754654 9.0218579213627  7.14627659782247 8.92622950819672  L 9.95212765957447 5.31967213114754  C 10.0452127638797 5.19672131147541  9.9654255298371 5.00546447873976  9.80585106175199 5.00546447873976  L 4.19414893824801 5.00546447873976  C 4.0345744701629 5.00546447873976  3.95478723612035 5.19672131147541  4.04787234042553 5.31967213114754  L 6.85372340217753 8.92622950819672  Z M 10.90908203125 18  C 11.3636328125 18  11.772734375 17.7545390624998  12 17.3863476562499  C 12.227265625 17.0181738281251  12.1818359375 16.5681738281251  11.8636328125 16.240904296875  L 9.59091796875002 13.5  L 11.40908203125 13.5  C 12.81818359375 13.5  14 12.4772695312499  14 11.168173828125  L 14 2.33182617187504  C 13.95455078125 1.02273046875007  12.8181640625 0  11.3636328125 0  L 2.59091796875002 0  C 1.18181640624999 0  0 1.02273046875007  0 2.33182617187504  L 0 11.168173828125  C 0 12.436365234375  1.13636718749999 13.5  2.59091796875002 13.5  L 4.40908203124998 13.5  L 2.09091796874999 16.240904296875  C 1.90908203124999 16.4454609375  1.86363281250003 16.6499999999999  1.86363281250003 16.8954609375  C 1.86363281250003 17.059095703125  1.90908203124999 17.2227304687501  2.00000000000001 17.386365234375  C 2.22726562499999 17.7545390624998  2.63636718750001 18  3.09091796875001 18  L 10.90908203125 18  Z M 11.3636328125 12.1909218750002  L 2.63636718750001 12.1909218750002  C 2.00000000000001 12.1909218750002  1.49999999999999 11.7409218749999  1.49999999999999 11.1681914062501  L 1.49999999999999 2.33184374999996  C 1.49999999999999 1.75911328124994  2.00000000000001 1.30911328125012  2.63636718750001 1.30911328125012  L 11.3636328125 1.30911328125012  C 12 1.30911328125012  12.5 1.75911328124994  12.5 2.33184374999996  L 12.5 11.1681914062501  C 12.5 11.7409218749999  12 12.1909218750002  11.3636328125 12.1909218750002  Z M 3.54544921874999 16.6909218750002  L 6.22728515625001 13.5  L 7.72728515624999 13.5  L 10.40908203125 16.7318261718749  C 10.45455078125 16.690904296875  3.54544921874999 16.690904296875  3.54544921874999 16.690904296875  Z " fill-rule="nonzero" fill="#00cc00" stroke="none" transform="matrix(1 0 0 1 10 7 )" />
-  </g>
-</svg>

frontend/src/renderer/src/assets/new/useravatar.svg

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px" height="30px" xmlns="http://www.w3.org/2000/svg">
-  <g transform="matrix(1 0 0 1 -1519 -247 )">
-    <path d="M 0 30  L 30 30  L 30 25.3520850046661  C 29.7331107822556 24.3697506507965  29.0723405719793 23.28918286154  28.163781532849 22.6604888750634  C 26.2434181092335 21.1673406571817  20.4410297002444 18.7311514595851  20.4410297002444 18.7311514595851  L 16.6828991292978 25.2342048822017  L 16.1460233334481 23.642823228933  L 17.0545823725779 21.5602743987295  L 14.9896754654644 19.5956056909904  L 12.9247685583507 21.5602743987295  L 13.9572220119076 23.5249431064687  L 13.3171008707022 25.1163247597374  L 9.68286471418241 18.4953912146564  C 9.68286471418241 18.4953912146564  3.90112537426421 20.931580412253  1.96011288157752 22.4247286301347  C 1.05155384244745 23.1516560519982  0.390783632171406 24.1143437187904  0 25.3520850046661  L 0 30  Z M 23.26995216299 8.90780792088933  C 23.26995216299 5.7053979272745  23.26995216299 0.0667987360631344  15.4026568468871 0.0667987360631344  C 7.55601059985543 0.0667987360631344  7.55601059985543 5.7053979272745  7.53536153078426 8.90780792088933  C 7.51471246171332 12.2280980369685  10.7566163058816 18.122104160186  15.3820077778159 18.122104160186  C 20.1725918023196 18.0042240377216  23.26995216299 12.1102179145042  23.26995216299 8.90780792088933  Z " fill-rule="nonzero" fill="#b7bac0" stroke="none" transform="matrix(1 0 0 1 1519 247 )" />
-  </g>
-</svg>

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

@@ -3,30 +3,31 @@
     <Header />
     <div class="displaycontainer">
       <div class="displayleft">
+        <img src="@/assets/detection/progress.png" alt=""  style=" margin-left:10px;margin-right:15px">
         <div style="
           font-size: 18px;
           font-weight: 700;
           font-style: normal;
-          color: #3BF2C6;
+          color: #3BF2C6;"
-          margin-left:20px">检测中...</div>
+         >检测中...</div>
         <div class="patientInfotop1">{{ patientInfo.name }}</div>
-        <div style="font-size: 22px;"> {{ patientInfo.gender }}</div>
+        <div style="font-size: 20px;"> {{ patientInfo.gender }}</div>
         <div class="username-line"></div>
-        <div style="font-size: 22px;">{{ calculateAge(patientInfo.birth_date) }}</div>
+        <div style="font-size: 20px;">{{ calculateAge(patientInfo.birth_date) }}岁</div>
-        <el-button type="primary" class="endbutton" @click="endClick">结束监测</el-button>
+        <el-button type="primary" class="endbutton" @click="endClick">结束检测</el-button>
       </div>
       <div class="displayleft">
         <div class="icon-box" title="截图" @click="saveDetectionData">
-          <img src="@/assets/new/jietu.svg" alt="">
+          <img src="@/assets/detection/screenshot.png" alt="">
         </div>
         <div v-if="!isStartVideo" class="icon-box" @click="startVideoClick" title="开始录像">
-          <img  src="@/assets/new/startvideo.svg" alt="">
+          <img  src="@/assets/detection/startvideo.png" alt="">
         </div>
         <div v-if="isStartVideo" class="icon-box" @click="stopVideoClick" title="结束录像">
-          <img src="@/assets/new/endvideo.svg" alt="">
+          <img src="@/assets/detection/endvideo.png" alt="">
         </div>
         <div class="startvideo-box" v-if="isStartVideo">
-          <img src="@/assets/new/conduct.png" alt="" class="conductanimated">
+          <img src="@/assets/detection/conduct.png" alt="" class="conductanimated">
           录像中: {{ formattedTime }}
         </div>
         <div class="startvideo-box" v-if="!isStartVideo">
@@ -34,10 +35,10 @@
       </div>
       <div class="displayleft">
         <div class="icon-box" title="相机参数设置" @click="cameraUpdate">
-          <img src="@/assets/new/settings.svg" alt="" >
+          <img src="@/assets/detection/settings.png" alt="" >
         </div>
         <div class="icon-box" title="查看档案" @click="routerClick">
-          <img src="@/assets/new/archive.svg" alt="" >
+          <img src="@/assets/detection/archive.png" alt="" >
         </div>
       </div>
     </div>
@@ -48,20 +49,26 @@
           <div class="body-posture-box">
             <div class="body-title-display">
               <div class="body-son-display">
-                <img src="@/assets/new/title1.svg" alt="" style="margin-right: 8px;">
+                <img src="@/assets/detection/title1.png" alt="" style="margin-right: 8px;">
                 <div class="body-posture-text">身体姿态</div>
               </div>
               <div class="body-son-display">
-                <img src="@/assets/new/refresh.svg" alt="" style="margin-right: 8px;cursor: pointer;"
+                <img :src="femtoboltStatus == '已连接'?refresh_active:refresh" alt="" style="margin-right: 8px;cursor: pointer;"
                   @click="refreshClick('femtobolt')" title="重启深度相机">
                 <div class="connecttext" :style="{ color: femtoboltStatus == '已连接' ? '#3bf2c6' : '#808080' }">
                   {{ femtoboltStatus }}
                 </div>
               </div>
             </div>
-            <div ref="wholeBodyRef" style="display: flex;justify-content: center;height:calc( 100% - 50px);padding-top: 0px;">
+            <div ref="wholeBodyRef" style="display: flex;justify-content: center;height:calc( 100% - 50px);padding-top: 0px;"
-              <img :src="(femtoboltStatus === '已连接' && depthCameraImgSrc) ? depthCameraImgSrc : noImageSvg" alt="深度相机视频流"
+              :style="{alignItems:(femtoboltStatus === '已连接' && depthCameraImgSrc)?'':'center'}">
-                style="width: 100%;height: calc(100%);object-fit:contain;">
+              <img v-if="(femtoboltStatus === '已连接' && depthCameraImgSrc)" :src="depthCameraImgSrc" alt="深度相机视频流"
+                style="width: 100%;height: calc(100%);">
+                <!-- object-fit:contain; -->
+              <div v-else style="width:60px;height:60px">
+                <img :src="noImageSvg" >
+                <div style="font-size:14px;color:#ffffff99">连接失败</div>
+              </div>
             </div>
           </div>
         </el-col>
@@ -70,21 +77,19 @@
           <div class="body-header-box">
             <div class="body-title-display">
               <div class="body-son-display">
-                <img src="@/assets/new/title2.svg" alt="" style="margin-right: 8px;">
+                <img src="@/assets/detection/title2.png" alt="" style="margin-right: 8px;">
                 <div class="body-posture-text">头部姿态</div>
-                <el-button type="primary" class="start-btn" @click="calibrationClick" 
+                <div class="calibration-zero" @click="calibrationClick" style="margin-left:20px">
-                  style="background-color: #266fff;font-size: 14px;margin-left: 20px;
+                  <img src="@/assets/detection/calibration.png" style="margin-right:7px">
-                      --el-button-border-color: transparent !important;height:26px;border:none;width: 70px;">
                   校准
-                </el-button>
+                </div>
-                <el-button type="primary" class="start-btn" @click="clearAndStartTracking" 
+                <div class="calibration-zero" @click="clearAndStartTracking">
-                style="background-color: #266fff;font-size: 14px;margin-left: 10px;
+                  <img src="@/assets/detection/zero.png" style="margin-right:7px">
-                      --el-button-border-color: transparent !important;height:26px;border:none;width: 70px;">
                   清零
-              </el-button>
+                </div>
               </div>
               <div class="body-son-display">
-                <img src="@/assets/new/refresh.svg" alt="" style="margin-right: 8px;cursor: pointer;" title="重启IMU"
+                <img :src="imuStatus == '已连接'?refresh_active:refresh" alt="" style="margin-right: 8px;cursor: pointer;" title="重启IMU"
                 @click="refreshClick('imu')">
                 <div class="connecttext" :style="{ color: imuStatus == '已连接' ? '#3bf2c6' : '#808080' }">
                   {{ imuStatus }}
@@ -96,24 +101,25 @@
               <div class="body-header-bottombox-left">
                 <div class="body-header-bottombox-lefttext" style="height: 20%;"></div>
                 <div class="body-header-bottombox-lefttext">
-                  <div class="currencytext1">左侧最大</div>
+                  <div class="currencytext1">左最大旋转角度</div>
                   <div class="currencytext2">{{
                     headPoseMaxValues.rotationLeftMax.toFixed(1) }}°</div>
                 </div>
                 <div class="body-header-bottombox-lefttext">
                   <div>
-                    <span class="currencytext1">倾斜角：</span>
+                    <div class="currencytext1">倾斜角</div>
-                    <span class="currencytext3">{{ headlist.tilt }}°</span>
+                    <div class="currencytext2">{{ headlist.tilt }}°</div>
                   </div>
                   <div style="margin-top: 20px;">
                     <span>
-                      <span class="currencytext1">左：</span>
+                      <span class="currencytext4">左</span>
                       <span class="currencytext3">
                         {{ headPoseMaxValues.tiltLeftMax.toFixed(1) }}°
                       </span>
                     </span>
+                    <span>|</span>
                     <span style="padding-left: 20px;">
-                      <span class="currencytext1">右：</span>
+                      <span class="currencytext4">右</span>
                       <span class="currencytext3">
                         {{ headPoseMaxValues.tiltRightMax.toFixed(1) }}°
                       </span>
@@ -124,9 +130,9 @@
               <div class="body-header-bottombox-content">
                 <div style="text-align: center; width: 100%;" >
                   <span class="currencytext1">旋转角：</span>
-                  <span class="currencytext3">{{ headlist.rotation }}°</span>
+                  <span class="currencytext2">{{ headlist.rotation }}°</span>
                 </div>
-                <div style="width: 100%;height: 80%;" alt="">
+                <div style="width: 100%;height: 80%;">
                   <Model v-if="patientInfo != null && patientInfo.id != null&& patientInfo.id != ''"  :rotation="Number(headlist.rotation)" :tilt="Number(headlist.tilt)" :pitch="Number(headlist.pitch)" :gender="patientInfo.gender || '男'" />
                 </div>
                
@@ -134,26 +140,27 @@
               <div class="body-header-bottombox-right">
                 <div class="body-header-bottombox-righttext" style="height: 20%;"></div>
                 <div class="body-header-bottombox-righttext">
-                  <div class="currencytext1">右侧最大</div>
+                  <div class="currencytext1">右最大旋转角度</div>
                   <div class="currencytext2">
                     {{ headPoseMaxValues.rotationRightMax.toFixed(1) }}°
                   </div>
                 </div>
                 <div class="body-header-bottombox-righttext">
                   <div>
-                    <span class="currencytext1">俯仰角：</span>
+                    <div class="currencytext1">俯仰角</div>
-                    <span class="currencytext3">{{ headlist.pitch }}°</span>
+                    <div class="currencytext2">{{ headlist.pitch }}°</div>
                   </div>
                   <div style="margin-top: 20px;">
                     <span>
-                      <span class="currencytext1">俯：</span>
+                      <span class="currencytext4">俯</span>
                       <span class="currencytext3">
                         {{  headPoseMaxValues.pitchDownMax.toFixed(1) }}°
                       </span>
                     </span>
+                    <span>|</span>
                     <span style="padding-left: 20px;">
-                      <span class="currencytext1">仰：</span>
+                      <span class="currencytext4">仰</span>
-                      <span class="currencytext3">
+                      <span  style="text-align:right">
                         {{  headPoseMaxValues.pitchUpMax.toFixed(1) }}°
                       </span>
                     </span>
@@ -169,7 +176,7 @@
                 <div class="body-posture-text">足部压力</div>
               </div>
               <div class="body-son-display">
-                <img src="@/assets/new/refresh.svg" alt="" style="margin-right: 8px;cursor: pointer;" title="重启足底压力板"
+                <img :src="pressureStatus == '已连接'?refresh_active:refresh" alt="" style="margin-right: 8px;cursor: pointer;" title="重启足底压力板"
                 @click="refreshClick('pressure')">
                 <div class="connecttext" :style="{ color: pressureStatus == '已连接' ? '#3bf2c6' : '#808080' }">
                   {{ pressureStatus }}
@@ -205,8 +212,14 @@
                   <div class="currencytext1">左足</div>
                   <div class="currencytext1">右足</div>
                 </div>
-                <div style="position: relative;width: 100%;height:calc(100% - 60px) ;">
+                <div style="position: relative;width: 100%;height:calc(100% - 60px) ;" 
-                  <img :src="(pressureStatus === '已连接' && footImgSrc) ? footImgSrc : noImageSvg" style="width: 100%;height: 100%;" alt="">
+                :class="(pressureStatus === '已连接' && footImgSrc)?'':'noImageSvg-bg'">
+                  
+                  <img v-if="(pressureStatus === '已连接' && footImgSrc)"  :src="footImgSrc" style="width: 100%;height: 100%;" alt="">
+                  <div v-else style="width:60px;height:60px">
+                    <img :src="noImageSvg" >
+                    <div style="font-size:14px;color:#ffffff99">连接失败</div>
+                  </div>
                   <div class="xline"></div>
                   <div class="yline"></div>
                 </div>
@@ -250,17 +263,17 @@
             <div class="body-userinfo-content">
               <div class="body-userinfo-content-top">
                 
-                <img src="@/assets/new/useredit.svg" alt=""
+                <img src="@/assets/detection/useredit.png" alt=""
                 class="userinfo-edit-img" style="cursor: pointer;" @click="handleEditUserInfo">
                 <div class="useravatar-box">
-                  <img src="@/assets/new/useravatar.svg" alt="">
+                  <img src="@/assets/detection/useravatar.svg" alt="">
                 </div>
                 <div>
                   <div class="userinfo-text-top">
                     <div class="userinfo-text1" style="margin-right:20px ;">{{ patientInfo.name }}</div>
                     <div class="userinfo-text2"> {{ patientInfo.gender }}</div>
                     <div class="userinfo-line"></div>
-                    <div class="userinfo-text2">{{ calculateAge(patientInfo.birth_date) }}</div>
+                    <div class="userinfo-text2">{{ calculateAge(patientInfo.birth_date) }}岁</div>
                   </div>
                   <div class="userinfo-text3">
                     用户ID：{{ patientInfo.id }}
@@ -269,8 +282,11 @@
 
               </div>
               <div class="body-userinfo-content-bottom">
-                <img src="@/assets/new/userinfo.svg" alt=""
+                <img src="@/assets/detection/userinfo.png" alt=""
-                class="userinfo-edit-img">
+                class="userinfo-edit-img"   style="cursor: pointer;"
+                  @click="viewClick">
+                  <ViewUserInfo v-if="isViewUser" :patientInfo="patientInfo"
+    @closeViewUserInfo="closeViewUserInfo"/>
                 <div class="userinfo-disyplay1">
                   <div class="userinfo-text4">居住地</div>
                   <div class="userinfo-text5">
@@ -305,7 +321,7 @@
                 <div class="body-posture-text">视频</div>
               </div>
               <div class="body-son-display">
-                <img src="@/assets/new/refresh.svg" alt="" style="margin-right: 8px;cursor: pointer;"
+                <img :src="cameraStatus == '已连接'?refresh_active:refresh" alt="" style="margin-right: 8px;cursor: pointer;"
                 title="重启视频"
                 @click="refreshClick('camera')">
                 <div class="connecttext" :style="{ color: cameraStatus == '已连接' ? '#3bf2c6' : '#808080' }">
@@ -314,13 +330,29 @@
               </div>
             </div>
             <div class="body-video-content" ref="videoImgRef"> 
-              <div class="body-video-imgbox1" ref="camera1Ref"> 
+              <div class="body-video-imgbox1" ref="camera1Ref" :class="(camera1Status === '已连接' && camera1ImgSrc)?'':'noImageSvg-bg'"> 
-                <img :src="(camera1Status === '已连接' && camera1ImgSrc) ? camera1ImgSrc : noImageSvg" alt="camera1"
+                <div  v-if="(camera1Status === '已连接' && camera1ImgSrc)" 
-                  style="width: 100%; height: 100%; object-fit: contain; " />
+                @click="isBig1 = true" class="big-img">
+                  <img src="@/assets/detection/big.png">
+                </div>
+                <img v-if="(camera1Status === '已连接' && camera1ImgSrc)" :src="camera1ImgSrc" alt="camera1"
+                  style="width: 100%; height: 100%;" />
+                <div v-else style="width:60px;height:60px">
+                  <img :src="noImageSvg" >
+                  <div style="font-size:14px;color:#ffffff99">连接失败</div>
+                </div>
+              </div>
+              <div class="body-video-imgbox2" ref="camera2Ref" :class="(camera2Status === '已连接' && camera2ImgSrc)?'':'noImageSvg-bg'"> 
+                <div  v-if="(camera2Status === '已连接' && camera2ImgSrc)" 
+                @click="isBig2 = true" class="big-img">
+                  <img src="@/assets/detection/big.png">
+                </div>
+                <img v-if="(camera2Status === '已连接' && camera2ImgSrc)"  :src="camera2ImgSrc" alt="camera2"
+                  style="width: 100%; height: 100%;" />
+                <div v-else style="width:60px;height:60px">
+                  <img :src="noImageSvg" >
+                  <div style="font-size:14px;color:#ffffff99">连接失败</div>
                 </div>
-              <div class="body-video-imgbox2" ref="camera2Ref"> 
-                <img :src="(camera2Status === '已连接' && camera2ImgSrc) ? camera2ImgSrc : noImageSvg" alt="camera2"
-                    style="width: 100%; height: 100%; object-fit: contain; " />
               </div>
             </div>
           </div>
@@ -409,15 +441,30 @@
       </div>
     </div>
 
+    <!--   -->
     
 
-    <el-dialog class="historyDialogVisible" v-model="historyDialogVisible" center title="查看档案" width="100%">
+    <!-- <el-dialog class="historyDialogVisible" v-model="historyDialogVisible" center title="查看档案" width="100%">
        <HistoryDashboard v-if="historyDialogVisible" :patientId="patientId"/>
-    </el-dialog>
+    </el-dialog> -->
     <PatientProfile v-if="historyDialogVisible" 
       :archiveType="true"
       :selectedPatient="selectedPatient"
       @closePatientProfile="closePatientProfile"/>
+
+    <div v-if="isBig1" style="position: fixed;top: 0;right: 0;
+      width: 100%;height: 100vh;z-index: 9999;background: red;border: 2px solid #b0b0b0">
+      <svg @click="isBig1=false" style="position: absolute;right: 10px;top:10px;cursor: pointer;" t="1760175800150" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5743" width="24" height="24"><path d="M796 163.1L511.1 448l-285-285-63.9 64 285 285-285 285 63.8 63.8 285-285 285 285 63.8-63.8-285-285 285-285-63.8-63.9z" fill="#ffffff" p-id="5744"></path></svg>
+        <img v-if="isBig1" :src="camera1ImgSrc" alt=""
+          style="width: 100%;height: calc(100%);object-fit:contain;background:#323232;" />
+    </div>
+    
+    <div v-if="isBig2" style="position: fixed;top: 0;right: 0;
+      width: 100%;height: 100vh;z-index: 9999;background: red;border: 2px solid #b0b0b0">
+      <svg @click="isBig2=false" style="position: absolute;right: 10px;top:10px;cursor: pointer;" t="1760175800150" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5743" width="24" height="24"><path d="M796 163.1L511.1 448l-285-285-63.9 64 285 285-285 285 63.8 63.8 285-285 285 285 63.8-63.8-285-285 285-285-63.8-63.9z" fill="#ffffff" p-id="5744"></path></svg>
+        <img v-if="isBig2" :src="camera2ImgSrc" alt=""
+          style="width: 100%;height: calc(100%);object-fit:contain;background:#323232;" />
+    </div>
   </div>
 </template>
 
@@ -430,14 +477,16 @@ import Header from '@/views/Header.vue'
 import { useAuthStore } from '../stores/index.js'
 import * as echarts from 'echarts'
 import { getBackendUrl, patientAPI } from '../services/api.js'
-import noImageSvg from '@/assets/no-image.svg'
+import noImageSvg from '@/assets/detection/no-image.png'
 import DiagnosticMessage from '@/views/DiagnosticMessage.vue'
 import PatientCreate from '@/views/PatientCreate.vue'
 import HistoryDashboard from '@/views/PatientProfile.vue'
 import Model from './model.vue'
+import ViewUserInfo from '@/views/ViewUser.vue'
 
+import refresh from '@/assets/detection/refresh.png'
+import refresh_active from '@/assets/detection/refresh_active.png'
 const emit = defineEmits([ 'endChange']);
-const asd = ref(0)
 const props = defineProps({
   selectedPatient: {
     required: false,
@@ -445,6 +494,7 @@ const props = defineProps({
     default: null
   }
 })
+const isViewUser = ref(false) // 查看信息
 const isCloseCreat =ref(false) // 是否打开患者信息编辑框
 const isoperation = ref(false)  // 是否保存数据
 const isTip =ref(false)
@@ -477,10 +527,10 @@ function closeTipClick(){
 
 const isDiagnosticMessage = ref(false)
 
-const isBig =ref(false)
+const isBig1 =ref(false)
+const isBig2 =ref(false)
 const authStore = useAuthStore()
 const router = useRouter()
-const route = useRoute()
 const isRecording = ref(false)
 const isConnected = ref(false)
 const rtspImgSrc = ref('')
@@ -495,10 +545,6 @@ const videoImgRef =ref(null) // 视频流图片ref
 const camera1Ref = ref(null)
 const camera2Ref = ref(null)
 const historyDialogVisible = ref(false)
-// 录像相关变量
-let mediaRecorder = null
-let recordedChunks = []
-let recordingStream = null
 // 患者信息（从页面获取或通过API获取）
 const patientInfo = ref({
   id: '',
@@ -528,16 +574,7 @@ let frameCount = 0
 // 后端服务器地址配置
 const BACKEND_URL = getBackendUrl()
 const resDialogVisible = ref(false)
-const reshandleClose = () => {
-  resDialogVisible.value = false
-}
-const cameraHandleClose = () => { 
-  cameraDialogVisible.value = false
-}
 const dialogVisible = ref(false)
-const handleClose = () => {
-  dialogVisible.value = false
-}
 // 表单引用
 const patientFormRef = ref()
 // 表单数据
@@ -2140,6 +2177,12 @@ function handleEditUserInfo(){
 function closePatientProfile(){
   historyDialogVisible.value =false
 }
+function closeViewUserInfo(){
+  isViewUser.value = false
+}
+function viewClick(){
+  isViewUser.value = true
+}
 </script>
 
 <style scoped>
@@ -2180,7 +2223,7 @@ function closePatientProfile(){
 .icon-box{
   width: 32px;
   height: 32px;
-  background-color: rgba(40, 40, 40, 1);
+  background-color: #374151;
   border-radius: 4px;
   display: flex;
   align-items: center;
@@ -2193,9 +2236,15 @@ function closePatientProfile(){
   display: flex;
   align-items: center;
   margin-left: 10px;
+  font-family:'Noto Sans SC Bold', 'Noto Sans SC Regular', 'Noto Sans SC';
+  font-weight:700;
+  font-style:normal;
+  font-size:14px;
+  color:#FFFFFF;
 }
 .conductanimated{
   margin-right: 5px;
+
   animation: fadeInOut 1s infinite;
 }
 @keyframes fadeInOut {
@@ -2206,36 +2255,38 @@ function closePatientProfile(){
 .body-posture-box{
   width: 100%;
   height: 100%;
-  background: linear-gradient(to bottom right, #1a1e2a, #222b38);
+  background: linear-gradient(135deg, rgba(42, 54, 73, 1) 0%, rgba(42, 54, 73, 1) 0%, rgba(34, 43, 56, 1) 100%, rgba(34, 43, 56, 1) 100%);
   border: 1px solid #262d40;
   border-radius: 4px;
 }
 .body-header-box{
   width: 100%;
   height: calc(50% - 7px) ;
-  background: #282828;
+  background: linear-gradient(135deg, rgba(42, 54, 73, 1) 0%, rgba(42, 54, 73, 1) 0%, rgba(34, 43, 56, 1) 100%, rgba(34, 43, 56, 1) 100%);
+  border: 1px solid #262d40;
   border-radius: 4px;
 }
 .body-foot-box{
   margin-top: 15px;
   width: 100%;
   height: calc(50% - 7px) ;
-  background: #282828;
+  background:linear-gradient(135deg, rgba(42, 54, 73, 1) 0%, rgba(42, 54, 73, 1) 0%, rgba(34, 43, 56, 1) 100%, rgba(34, 43, 56, 1) 100%);
+  border: 1px solid #262d40;
   border-radius: 4px;
 }
 .body-title-display{
   width: 100%;
   height: 50px;
-  /* border-bottom: 1px solid #000; */
   display: flex;
   align-items: center;
   justify-content: space-between;
   box-sizing: border-box;
   padding: 0 20px;
+  font-family: "Noto Sans SC Bold", "Noto Sans SC Regular", "Noto Sans SC";
   font-weight: 700;
   font-style: normal;
-  font-size: 18px;
+  font-size: 20px;
-  color: #FFFFFF;
+  color: rgb(255, 255, 255);
 }
 .body-son-display{
   display: flex;
@@ -2289,23 +2340,34 @@ function closePatientProfile(){
 }
 .currencytext1{
   min-width: 100px;
-  font-size: 24px;
+  font-size: 16px;
-  font-weight: 400;
   color: #FFFFFF;
+  font-family: "Noto Sans SC";
+  font-weight: 400;
+  color: #D1D5DB;
 }
 .currencytext2{
   font-weight: 700;
   font-style: normal;
-  font-size: 30px;
+  font-size: 24px;
-  color: #FF6600;
+  color: #3BF2C6;
-  text-align: r;
 }
 .currencytext3{
   width: 60px;
-  font-size: 24px;
+  font-weight: 400;
-  font-weight: 700;
+  font-style: normal;
+  font-size: 16px;
+  color: #FFFFFF;
+  display: inline-block;
+  text-align: left;
+}
+.currencytext4{
+  width: 20px;
+  font-weight: 400;
+  font-style: normal;
+  font-size: 16px;
+  color:#D1D5DB;
   display: inline-block;
-  color: #266FFF;
   text-align: left;
 }
 .body-footbottom-box{
@@ -2333,7 +2395,7 @@ function closePatientProfile(){
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0px 10px;
+  padding: 0px 20px;
 }
 .body-footbottom-center{
   width: 40%;
@@ -2377,13 +2439,15 @@ function closePatientProfile(){
 .body-userinfo-box{
   width: 100%;
   height: calc(40% - 7px) ;
-  background: #282828;
+  background: linear-gradient(135deg, rgba(42, 54, 73, 1) 0%, rgba(42, 54, 73, 1) 0%, rgba(34, 43, 56, 1) 100%, rgba(34, 43, 56, 1) 100%);
+  border: 1px solid #262d40;
   border-radius: 4px;
 }
 .body-video-box{
   width: 100%;
   height: calc(60% - 7px) ;
-  background: #282828;
+  background: linear-gradient(135deg, rgba(42, 54, 73, 1) 0%, rgba(42, 54, 73, 1) 0%, rgba(34, 43, 56, 1) 100%, rgba(34, 43, 56, 1) 100%);
+  border: 1px solid #262d40;
   border-radius: 4px;
   margin-top: 15px;
 }
@@ -2396,14 +2460,15 @@ function closePatientProfile(){
   position: relative;
   width: calc(100%);
   height: calc(55%);
-  background-color: rgba(27, 27, 27, 1);
+  background-color: #374151;
-  border-radius: 8px;
+  border-radius: 8px 8px 0 0;
   display: flex;
   align-items: center;
   box-sizing: border-box;
   padding: 0 20px;
 }
 .body-userinfo-content-bottom{
+  padding:10px;
   padding-top: 20px;
   position: relative;
   width: calc(100%);
@@ -2412,6 +2477,20 @@ function closePatientProfile(){
   display: flex;
   flex-wrap: wrap;
   align-content: space-around;
+  border-width: 0px 1px 1px;
+  border-right-style: solid;
+  border-bottom-style: solid;
+  border-left-style: solid;
+  border-right-color: rgb(55, 65, 81);
+  border-bottom-color: rgb(55, 65, 81);
+  border-left-color: rgb(55, 65, 81);
+  border-top-style: initial;
+  border-top-color: initial;
+  border-radius: 0px 0px 8px 8px;
+  box-shadow: none;
+  font-family: "Noto Sans SC";
+  font-weight: 400;
+  font-style: normal;
 }
 .userinfo-disyplay1{ 
   display: flex;
@@ -2442,36 +2521,40 @@ function closePatientProfile(){
   font-size: 24px;
 }
 .userinfo-text2{
+  font-family: "Noto Sans SC";
   font-weight: 400;
   font-style: normal;
-  font-size: 14px;
-  color: rgba(255, 255, 255, 0.6);
-}
-.userinfo-text3{
-  font-weight: 700;
-  font-style: normal;
   font-size: 16px;
   color: rgba(255, 255, 255, 0.6);
 }
+.userinfo-text3{
+  font-family: "Noto Sans SC Bold", "Noto Sans SC Regular", "Noto Sans SC";
+  font-weight: 700;
+  font-style: normal;
+  font-size: 16px;
+  color: rgb(255, 255, 255);
+}
 .userinfo-text4{
+  font-family: "Noto Sans SC";
   font-weight: 400;
   font-style: normal;
   font-size: 14px;
-  color: #949494;
+  color: rgba(255, 255, 255, 0.6);
   width: 60px;
 }
 
 .userinfo-text5{
+  font-family: "Noto Sans SC";
   font-weight: 400;
   font-style: normal;
   font-size: 16px;
-  color: #FFFFFF;
+  color: rgb(255, 255, 255);
 }
 .userinfo-line{
   width: 2px;
-  height: 13px;
+  height: 16px;
   background: rgba(255, 255, 255, 0.6);
-  margin: 0 5px;
+  margin: 0 8px;
 }
 .userinfo-edit-img{
   position: absolute;
@@ -2489,10 +2572,12 @@ function closePatientProfile(){
   justify-content: center;
 }
 .body-video-imgbox1{
+  position: relative;
   width: 100%;
   height: calc(50% - 7px);
 }
 .body-video-imgbox2{
+  position: relative;
   width: 100%;
   height: calc(50% - 8px);
 }
@@ -2501,7 +2586,7 @@ function closePatientProfile(){
   font-style: normal;
   font-size: 22px;
   color: #FFFFFF;
-  margin:0 20px;
+  margin:0 30px;
   margin-left:40px
 }
 .patientInfotop2{
@@ -2511,14 +2596,14 @@ function closePatientProfile(){
   color: #FFFFFF;
 }
 .endbutton{
-  width: 72px;
+  width: 90px;
-  height: 29px;
+  height: 30px;
   background-color: rgba(11, 148, 213, 1);
   border:1px solid rgba(11, 148, 213, 1);
   font-weight: 400;
   font-style: normal;
-  font-size: 14px;
+  font-size: 16px;
-  color: #D7D7D7;
+  color: #FFFFFF;
   margin-left:20px
 }
 
@@ -2541,7 +2626,8 @@ function closePatientProfile(){
   left: 0;
   bottom: 0;
   margin: auto;
-  background: #1b1b1b;
+  border-radius: 10px;
+  background: linear-gradient(135deg, rgba(53, 67, 90, 1) 0%, rgba(53, 67, 90, 1) 0%, rgba(62, 79, 105, 1) 99%, rgba(62, 79, 105, 1) 100%);
 }
 .pop-up-camera-container{
   width: 608px;
@@ -2552,26 +2638,22 @@ function closePatientProfile(){
   left: 0;
   bottom: 0;
   margin: auto;
-  background: #1b1b1b;
+  background: linear-gradient(135deg, rgb(53, 67, 90) 0%, rgb(53, 67, 90) 0%, rgb(62, 79, 105) 99%, rgb(62, 79, 105) 100%);
   border-radius: 10px;
-  box-shadow: 0px 0px 10px rgba(80, 80, 80, 1);
+  box-shadow: rgb(17, 24, 33) 0px 0px 10px;
-  border-width: 1px;
-  border-style: solid;
-  border-color: rgba(148, 148, 148, 1);
 }
 .pop-up-camera-header{
   width: 100%;
-  height: 50px;
+  height: 60px;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  background-color: rgba(46, 52, 59, 1);
   box-sizing: border-box;
-  padding: 0 20px;
+  padding: 0 40px;
   font-family: 'Noto Sans SC';
   font-weight: 700;
   font-style: normal;
-  font-size: 16px;
+  font-size: 20px;
   color: #FFFFFF;
   text-align: left;
   border-radius:10px 10px 0 0;
@@ -2579,17 +2661,16 @@ function closePatientProfile(){
 
 .pop-up-tip-header{
   width: 100%;
-  height: 50px;
+  height: 60px;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  background-color: rgba(46, 52, 59, 1);
   box-sizing: border-box;
-  padding: 0 20px;
+  padding: 0 30px;
   font-family: 'Noto Sans SC';
   font-weight: 700;
   font-style: normal;
-  font-size: 16px;
+  font-size: 20px;
   color: #FFFFFF;
   text-align: left;
 }
@@ -2604,11 +2685,15 @@ function closePatientProfile(){
   font-style: normal;
   font-size: 14px;
   color: rgb(255, 255, 255);
-  background:#266fff;
+  background:#0b94d5;
-  border:1px solid #266fff;
+  border:1px solid #0b94d5;
   width: 80px;
   height: 40px;
 }
+.tipconfirmbutton:hover{
+  background:#14aaff;
+  border:1px solid #14aaff;
+}
 .pop-up-tip-text{
   width:100%;
   font-weight: 400;
@@ -2616,7 +2701,7 @@ function closePatientProfile(){
   font-size: 16px;
   color: #FFFFFF;
   text-align: center;
-  padding:40px 10px;
+  padding:30px 10px;
 }
 .pop-up-camera-body{
   padding: 20px 40px;
@@ -2638,10 +2723,10 @@ function closePatientProfile(){
   color: #FFFFFF;
 }
 .pop-up-camera-body :deep(.el-input__wrapper)  {
-  background-color: rgba(40, 40, 40, 1);
+  background-color: #2a3649;
   border-width: 1px;
   border-style: solid;
-  border-color: rgba(54, 54, 54, 1);
+  border-color: #2a3649;
   border-radius: 4px;
   box-shadow: none;
   height: 40px;
@@ -2664,7 +2749,7 @@ function closePatientProfile(){
   font-weight: 400;
   font-style: normal;
   font-size: 14px;
-  color: #787878;
+  color: rgba(255,255,255,0.6);
   width: 60px;
   text-align: right;
   margin-right: 20px;
@@ -2693,11 +2778,11 @@ function closePatientProfile(){
   width: 70px;
   height: 40px;
   background: inherit;
-  background-color: rgba(40, 40, 40, 1);
+  background: #2a3649;
   box-sizing: border-box;
   border-width: 1px;
   border-style: solid;
-  border-color: rgba(54, 54, 54, 1);
+  border-color: #4a576b;
   border-radius: 4px;
   display: flex;
   justify-content: center;
@@ -2708,32 +2793,32 @@ function closePatientProfile(){
   width: 70px;
   height: 40px;
   background: inherit;
-  background-color: rgba(40, 40, 40, 1);
+  background-color: #2a3649;
   box-sizing: border-box;
   border-width: 1px;
   border-style: solid;
-  border-color: rgba(38, 111, 255, 1);
+  border-color: #14aaff;
 
 }
 .pop-up-camera-display :deep(.is-checked .el-radio__label){
-  color: rgb(38, 111, 255);
+  color: #14aaff;
 }
 
 .pop-up-camera-display :deep(.el-radio__input.is-checked .el-radio__inner){
-  background: rgb(38, 111, 255);
+  background: #14aaff;
-  border-color: rgb(38, 111, 255);
+  border-color: #14aaff;
 }
 .pop-up-camera-display :deep(.el-radio__input.is-checked .el-radio__inner){
-  background: rgb(38, 111, 255);
+  background: #14aaff;
-  border-color: rgb(38, 111, 255);
+  border-color: #14aaff;
 }
 
 .pop-up-camera-display :deep(.el-radio__input.is-checked .el-radio__inner:after){
-  background-color: #282828;
+  background-color: #2a3649;
 }
 .pop-up-camera-display :deep(.el-radio__inner){
-  background-color: #282828;
+  background-color: #2a3649;
-  border-color: rgb(124, 124, 124);
+  border-color: #4a576b;
 }
 
 </style>
@@ -2751,4 +2836,71 @@ function closePatientProfile(){
   padding-top: 50px;
   padding-right: 10px;
 }
+.calibration-zero{
+  width: 70px;
+  height: 28px;
+  background-color: rgb(69, 91, 123);
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  border-radius: 4px;
+  box-shadow: none;
+  font-family: "Noto Sans SC";
+  font-weight: 400;
+  font-style: normal;
+  font-size: 14px;
+  color: rgb(255, 255, 255);
+  margin-left:10px;
+  cursor:pointer;
+}
+.calibration-zero:hover{
+  background-color: #14aaff;
+}
+.noImageSvg-bg{
+  display:flex;
+  justify-content:center;
+  align-items:center;
+}
+
+.pop-up-camera-container .formreturnCancel{
+  width: 80px;
+  height: 40px;
+  background: rgba(89, 113, 148, 1);
+  border: 1px solid rgba(89, 113, 148, 1);
+  font-family: 'Noto Sans SC';
+  font-weight: 400;
+  font-style: normal;
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.6);
+}
+.pop-up-camera-container .formreturnCancel:hover{
+  background: #14aaff;
+  color:#ffffff;
+}
+.pop-up-camera-container .formsaveCancel {
+  width: 80px;
+  height: 40px;
+  background: #0b94d5;
+  font-family: 'Noto Sans SC';
+  font-weight: 400;
+  font-style: normal;
+  font-size: 14px;
+  color: #FFFFFF;
+}
+.pop-up-camera-container .formsaveCancel:hover{
+  background: #5189ff;
+  color:#ffffff;
+}
+.big-img{
+  position: absolute;
+  left: 10px;
+  top: 10px;
+  width: 30px;
+  height: 30px;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
 </style>

frontend/src/renderer/src/views/Header.vue

@@ -9,10 +9,8 @@
           <div class="system-title">
             平衡体态检测系统
             <span v-if="licenseBadge" :class="['license-badge', licenseClass]">{{ licenseBadge }}</span>
-           
-            <!-- <button v-if="showActivateButton" class="activate-btn" @click="goActivate">激活</button> -->
             <button  v-if="showActivateButton" class="activate-btn" @click="goActivate">激活</button>
-
+            <!-- <span class="trial-text">试用期：2天</span> -->
           </div>
         </div>
         <div class="header-right">
@@ -171,7 +169,7 @@
             licenseType.value = 'trial'
             showActivateButton.value = true
           } else {
-            licenseBadge.value = '已授权'
+            licenseBadge.value = '已激活'
             licenseClass.value = 'badge-valid'
             licenseType.value = 'full'
             showActivateButton.value = false
@@ -273,18 +271,17 @@
   </style>
   <style>
   .license-badge {
+    width: 76px;
+    height: 26px;
+    line-height:26px ;
+    border-radius: 26px;
     display: inline-block;
-    padding: 2px 8px;
-    border-radius: 10px;
-    font-size: 12px;
     margin-left: 8px;
+    padding:0;
   }
   .badge-invalid { 
-    width: 79px;
-    height: 28px;
-    line-height:28px ;
     text-align: center;
-    background-color: #324065; 
+    background-color: linear-gradient(135deg, rgba(69, 91, 123, 1) 0%, rgba(69, 91, 123, 1) 0%, rgba(55, 65, 81, 1) 100%, rgba(55, 65, 81, 1) 100%); 
     font-weight: 400;
     font-style: normal;
     color: rgb(255, 255, 255);
@@ -292,26 +289,29 @@
   }
   .badge-trial { background-color: rgba(67, 67, 67, 1); color: #949494; }
   .badge-valid { 
-    width: 79px;
+   
-    height: 28px;
-    line-height:28px ;
-    border-radius: 24px;
-    padding:0;
     text-align: center;
-    background-color: rgba(38, 111, 255, 1); color: #fff;
+    background-color: rgba(59, 242, 198, 1); 
-   }
-  .activate-btn {
-    width: 58px;
-    height: 24px;
-    margin-left: 8px;
     font-weight:400;
     font-style:normal;
-    color: rgb(25, 29, 40);
+    font-size:14px;
-    font-size: 13px;
+    color:#191D28;
+   }
+  .activate-btn {
+    width: 76px;
+    height: 26px;
+    border-radius: 26px;
+
+
+    margin-left: 8px;
     border: 1px solid rgb(59, 242, 198);
     background-color: rgb(59, 242, 198);
-    border-radius: 12px;
     cursor: pointer;
+    font-weight:400;
+    font-style:normal;
+    font-size:14px;
+    color:#191D28;
+    font-family: 'Noto Sans SC';
   }
   .activate-btn:hover {
     background-color: #6cf9d8;
@@ -349,5 +349,12 @@
   height: 100vh;
   background: rgba(0, 0, 0, 0.7);
 }
-
+.trial-text{
+  font-family: "Noto Sans SC";
+  font-weight: 400;
+  font-style: normal;
+  font-size: 14px;
+  color: rgb(59, 242, 198);
+  padding-left:10px;
+}
 </style>

frontend/src/renderer/src/views/ViewUser.vue

@@ -0,0 +1,291 @@
+<template>
+  <div class="ViewUserInfo-container">
+    <img src="@/assets/detection/close.png" alt="" 
+      class="ViewUserInfo-container-close" @click="handleCancel">
+      <div class="ViewUserInfo-content-top">
+        <div class="ViewUserInfo-useravatar-box">
+          <img src="@/assets/detection/useravatar.svg" alt="">
+        </div>
+        <div>
+          <div class="ViewUserInfo--text-top">
+            <div class="ViewUserInfo-userinfo-text1" style="margin-right:20px ;">{{ patientInfo.name }}</div>
+            <div class="ViewUserInfo-userinfo-text2"> {{ patientInfo.gender }}</div>
+            <div class="ViewUserInfo-userinfo-line"></div>
+            <div class="ViewUserInfo-userinfo-text2">{{ calculateAge(patientInfo.birth_date) }}岁</div>
+          </div>
+          <div class="ViewUserInfo-userinfo-text3">
+            用户ID：{{ patientInfo.id }}
+          </div>
+        </div>
+      
+
+      </div>
+      <div style="height: 450px;">
+            <div class="ViewUserInfo-detail-display">
+              <div class="ViewUserInfo-detailinfo-leftbox">
+                <div class="ViewUserInfo-detailinfo-key">性别</div>
+                <div class="ViewUserInfo-detailinfo-value">
+                  {{ patientInfo.gender== null || patientInfo.gender== '' ? '—':patientInfo.gender }}
+                </div>
+              </div>
+              <div class="ViewUserInfo-detailinfo-rightbox">
+                <div class="ViewUserInfo-detailinfo-key">出生日期</div>
+                <div class="ViewUserInfo-detailinfo-value">
+                  <span  v-if="patientInfo && patientInfo.birth_date">
+                  {{ formatDate(patientInfo.birth_date) }}
+                  </span>
+                  <span v-else>—</span>
+                </div>
+              </div>
+            </div>
+            <div class="ViewUserInfo-detail-display">
+              <div class="ViewUserInfo-detailinfo-leftbox">
+                <div class="ViewUserInfo-detailinfo-key">年龄</div>
+                <div class="ViewUserInfo-detailinfo-value">
+                  <span  v-if="patientInfo && patientInfo.birth_date">
+                    {{ calculateAge(patientInfo.birth_date) }}
+                  </span>
+                  <span v-else>—</span>
+                </div>
+              </div>
+              <div class="ViewUserInfo-detailinfo-rightbox">
+                <div class="ViewUserInfo-detailinfo-key">民族</div>
+                <div class="ViewUserInfo-detailinfo-value">
+                  {{ patientInfo.nationality== null || patientInfo.nationality== '' ? '—':patientInfo.nationality }}
+                </div>
+              </div>
+            </div>
+            <div class="ViewUserInfo-detail-display">
+              <div class="ViewUserInfo-detailinfo-leftbox">
+                <div class="ViewUserInfo-detailinfo-key">居住地</div>
+                <div class="ViewUserInfo-detailinfo-value">
+                  {{ patientInfo.residence== null || patientInfo.residence== '' ? '—':patientInfo.residence }}
+                </div>
+              </div>
+              <div class="ViewUserInfo-detailinfo-rightbox">
+                <div class="ViewUserInfo-detailinfo-key">身高</div>
+                <div class="ViewUserInfo-detailinfo-value">
+                  <span  v-if="patientInfo && patientInfo.height">
+                    {{ patientInfo.height }}cm
+                  </span>
+                  <span v-else>—</span>
+                </div>
+              </div>
+            </div>
+            <div class="ViewUserInfo-detail-display">
+              <div class="ViewUserInfo-detailinfo-leftbox">
+                <div class="ViewUserInfo-detailinfo-key">体重</div>
+                <div class="ViewUserInfo-detailinfo-value">
+                  <span  v-if="patientInfo && patientInfo.weight">
+                    {{ patientInfo.weight }}kg
+                  </span>
+                  <span v-else>—</span>
+                </div>
+              </div>
+              <div class="ViewUserInfo-detailinfo-rightbox">
+                <div class="ViewUserInfo-detailinfo-key">鞋码</div>
+                <div class="ViewUserInfo-detailinfo-value">
+                  <span  v-if="patientInfo && patientInfo.shoe_size">
+                    {{ patientInfo.shoe_size }}码
+                  </span>
+                  <span v-else>—</span>
+                </div>
+              </div>
+            </div>
+            <div class="ViewUserInfo-detail-display">
+              <div class="ViewUserInfo-detailinfo-leftbox">
+                <div class="ViewUserInfo-detailinfo-key">电话</div>
+                <div class="ViewUserInfo-detailinfo-value">
+                  <span  v-if="patientInfo && patientInfo.phone">
+                    {{ patientInfo.phone }}
+                  </span>
+                  <span v-else>—</span>
+                </div>
+              </div>
+              <div class="ViewUserInfo-detailinfo-rightbox">
+                <div class="ViewUserInfo-detailinfo-key">邮箱</div>
+                <div class="ViewUserInfo-detailinfo-value">
+                  <span  v-if="patientInfo && patientInfo.email">
+                    {{ patientInfo.email }}
+                  </span>
+                  <span v-else>—</span>
+                </div>
+              </div>
+            </div>
+            <div class="ViewUserInfo-detail-display">
+              <div class="ViewUserInfo-detailinfo-leftbox">
+                <div class="ViewUserInfo-detailinfo-key">证件号</div>
+                <div class="ViewUserInfo-detailinfo-value">
+                  <span  v-if="patientInfo && patientInfo.idcode">
+                    {{ patientInfo.idcode }}
+                  </span>
+                  <span v-else>—</span>
+                </div>
+              </div>
+              <div class="ViewUserInfo-detailinfo-rightbox">
+                <div class="ViewUserInfo-detailinfo-key">职业</div>
+                <div class="ViewUserInfo-detailinfo-value">
+                  <span  v-if="patientInfo && patientInfo.occupation">
+                    {{ patientInfo.occupation }}
+                  </span>
+                  <span v-else>—</span>
+                </div>
+              </div>
+            </div>
+          </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, computed, onMounted  } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage, ElMessageBox } from 'element-plus'
+const emit = defineEmits([ 'closeViewUserInfo']);
+const router = useRouter()
+const props = defineProps({
+  patientInfo: {
+    required: false,
+    type: Object,
+    default: {}
+  }
+})
+
+// 生命周期
+onMounted(() => {
+  // 从认证状态管理中加载用户信息
+
+})
+
+const calculatedAge = ref('')
+const handleCancel = async () => {
+  emit('closeViewUserInfo',false)
+}
+const calculateAge = (birthDate) => {
+  if (!birthDate) return '—'
+  const today = new Date()
+  const birth = new Date(birthDate)
+  let age = today.getFullYear() - birth.getFullYear()
+  const monthDiff = today.getMonth() - birth.getMonth()
+  if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birth.getDate())) {
+    age--
+  }
+  return age
+}
+const formatDate = (date) => {
+  return new Date(date).toLocaleDateString('zh-CN')
+}
+</script>
+
+<style scoped>
+.ViewUserInfo-container{
+  position: absolute;
+  top: 40px;
+  right: 0px;
+  width: 500px;
+  height: 600px;
+  background-color: rgba(17, 24, 39, 1);
+  border-radius: 5px;
+  box-sizing: border-box;
+  padding-left: 40px;
+  padding-top: 50px;
+  z-index: 10;
+}
+.ViewUserInfo-container-close{
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  cursor: pointer;
+}
+
+.ViewUserInfo-content-top{
+  position: relative;
+  width: calc(100%);
+  height: 130px;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+}
+.ViewUserInfo-useravatar-box{
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  background: #303947;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 20px;
+}
+
+.ViewUserInfo--text-top{
+  display: flex;
+  align-items: center;
+}
+.ViewUserInfo-userinfo-text1{
+  font-family: 'Noto Sans SC Bold', 'Noto Sans SC Regular', 'Noto Sans SC';
+  font-weight: 700;
+  font-style: normal;
+  color: #FFFFFF;
+  font-size: 24px;
+}
+.ViewUserInfo-userinfo-text2{
+  font-family: "Noto Sans SC";
+  font-weight: 400;
+  font-style: normal;
+  font-size: 16px;
+  color:#FFFFFF;
+}
+.ViewUserInfo-userinfo-text3{
+  font-family: 'Noto Sans SC Bold', 'Noto Sans SC Regular', 'Noto Sans SC';
+  font-weight: 700;
+  font-style: normal;
+  font-size: 16px;
+  color: #FFFFFF;
+  padding-top: 5px;
+}
+.ViewUserInfo-userinfo-text4{
+  font-family: "Noto Sans SC";
+  font-weight: 400;
+  font-style: normal;
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.6);
+  width: 60px;
+}
+
+.ViewUserInfo-userinfo-line{
+  width: 2px;
+  height: 16px;
+  background: rgba(255, 255, 255, 0.6);
+  margin: 0 8px;
+}
+
+
+.ViewUserInfo-detail-display{
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 10px 20px;
+  padding-left: 30px;
+  padding-right: 0;
+}
+.ViewUserInfo-detailinfo-leftbox{
+  width: 235px;
+  height: 48px;
+}
+.ViewUserInfo-detailinfo-rightbox{
+  height: 48px;
+}
+
+.ViewUserInfo-detailinfo-key{
+  font-weight: 400;
+  font-style: normal;
+  font-size: 14px;
+  color: #949494;
+  padding-bottom: 3px;
+}
+.ViewUserInfo-detailinfo-value{
+  font-weight: 400;
+  font-style: normal;
+  font-size: 16px;
+  color: rgb(255, 255, 255);
+}
+</style>

frontend/src/renderer/src/views/model.vue

@@ -34,7 +34,6 @@ onMounted(() => {
 function initThreeJS() {
     // 创建场景
     scene = new THREE.Scene();
-    scene.background = new THREE.Color(0x282828); // 稍微提亮背景
     let containermodel =  document.getElementById('containermodel');
     // 创建相机
     camera = new THREE.PerspectiveCamera(75, containermodel.offsetWidth / containermodel.offsetHeight, 0.1, 1000);
@@ -42,7 +41,9 @@ function initThreeJS() {
     camera.lookAt(0, 0, 0);
     
     // 创建渲染器
-    renderer = new THREE.WebGLRenderer({ antialias: true });
+    renderer = new THREE.WebGLRenderer({ antialias: true,alpha: true  });
+    scene.background  = null; // 置空场景背景
+    renderer.setClearColor(0x000000,  0); // 设置透明度为0（完全透明）
     renderer.setSize(containermodel.offsetWidth, containermodel.offsetHeight);
     renderer.shadowMap.enabled = true;
     renderer.shadowMap.type = THREE.PCFSoftShadowMap;