修改检查详情页
This commit is contained in:
parent
7ff97bd871
commit
95cdd967cc
BIN
frontend/src/renderer/src/assets/detection/archive.png
Normal file
BIN
frontend/src/renderer/src/assets/detection/archive.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 402 B |
BIN
frontend/src/renderer/src/assets/detection/big.png
Normal file
BIN
frontend/src/renderer/src/assets/detection/big.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 457 B |
BIN
frontend/src/renderer/src/assets/detection/calibration.png
Normal file
BIN
frontend/src/renderer/src/assets/detection/calibration.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 447 B |
BIN
frontend/src/renderer/src/assets/detection/close.png
Normal file
BIN
frontend/src/renderer/src/assets/detection/close.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 271 B |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
BIN
frontend/src/renderer/src/assets/detection/endvideo.png
Normal file
BIN
frontend/src/renderer/src/assets/detection/endvideo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 670 B |
BIN
frontend/src/renderer/src/assets/detection/no-image.png
Normal file
BIN
frontend/src/renderer/src/assets/detection/no-image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
frontend/src/renderer/src/assets/detection/progress.png
Normal file
BIN
frontend/src/renderer/src/assets/detection/progress.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 452 B |
BIN
frontend/src/renderer/src/assets/detection/refresh.png
Normal file
BIN
frontend/src/renderer/src/assets/detection/refresh.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 470 B |
BIN
frontend/src/renderer/src/assets/detection/refresh_active.png
Normal file
BIN
frontend/src/renderer/src/assets/detection/refresh_active.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 504 B |
BIN
frontend/src/renderer/src/assets/detection/screenshot.png
Normal file
BIN
frontend/src/renderer/src/assets/detection/screenshot.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 565 B |
BIN
frontend/src/renderer/src/assets/detection/settings.png
Normal file
BIN
frontend/src/renderer/src/assets/detection/settings.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 433 B |
BIN
frontend/src/renderer/src/assets/detection/startvideo.png
Normal file
BIN
frontend/src/renderer/src/assets/detection/startvideo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 674 B |
BIN
frontend/src/renderer/src/assets/detection/title1.png
Normal file
BIN
frontend/src/renderer/src/assets/detection/title1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 456 B |
BIN
frontend/src/renderer/src/assets/detection/title2.png
Normal file
BIN
frontend/src/renderer/src/assets/detection/title2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 566 B |
11
frontend/src/renderer/src/assets/detection/useravatar.svg
Normal file
11
frontend/src/renderer/src/assets/detection/useravatar.svg
Normal file
File diff suppressed because one or more lines are too long
BIN
frontend/src/renderer/src/assets/detection/useredit.png
Normal file
BIN
frontend/src/renderer/src/assets/detection/useredit.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 294 B |
BIN
frontend/src/renderer/src/assets/detection/userinfo.png
Normal file
BIN
frontend/src/renderer/src/assets/detection/userinfo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 372 B |
BIN
frontend/src/renderer/src/assets/detection/zero.png
Normal file
BIN
frontend/src/renderer/src/assets/detection/zero.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 383 B |
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 38 KiB |
File diff suppressed because one or more lines are too long
@ -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>
|
||||
@ -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;
|
||||
margin-left:20px">检测中...</div>
|
||||
color: #3BF2C6;"
|
||||
>检测中...</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>
|
||||
<el-button type="primary" class="endbutton" @click="endClick">结束监测</el-button>
|
||||
<div style="font-size: 20px;">{{ calculateAge(patientInfo.birth_date) }}岁</div>
|
||||
<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;"
|
||||
@click="refreshClick('femtobolt')" title="重启深度相机">
|
||||
<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;">
|
||||
<img :src="(femtoboltStatus === '已连接' && depthCameraImgSrc) ? depthCameraImgSrc : noImageSvg" alt="深度相机视频流"
|
||||
style="width: 100%;height: calc(100%);object-fit:contain;">
|
||||
<div ref="wholeBodyRef" style="display: flex;justify-content: center;height:calc( 100% - 50px);padding-top: 0px;"
|
||||
:style="{alignItems:(femtoboltStatus === '已连接' && depthCameraImgSrc)?'':'center'}">
|
||||
<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"
|
||||
style="background-color: #266fff;font-size: 14px;margin-left: 20px;
|
||||
--el-button-border-color: transparent !important;height:26px;border:none;width: 70px;">
|
||||
<div class="calibration-zero" @click="calibrationClick" style="margin-left:20px">
|
||||
<img src="@/assets/detection/calibration.png" style="margin-right:7px">
|
||||
校准
|
||||
</el-button>
|
||||
<el-button type="primary" class="start-btn" @click="clearAndStartTracking"
|
||||
style="background-color: #266fff;font-size: 14px;margin-left: 10px;
|
||||
--el-button-border-color: transparent !important;height:26px;border:none;width: 70px;">
|
||||
清零
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="calibration-zero" @click="clearAndStartTracking">
|
||||
<img src="@/assets/detection/zero.png" style="margin-right:7px">
|
||||
清零
|
||||
</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>
|
||||
<span class="currencytext3">{{ headlist.tilt }}°</span>
|
||||
<div class="currencytext1">倾斜角</div>
|
||||
<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>
|
||||
<span class="currencytext3">{{ headlist.pitch }}°</span>
|
||||
<div class="currencytext1">俯仰角</div>
|
||||
<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="currencytext3">
|
||||
<span class="currencytext4">仰</span>
|
||||
<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) ;">
|
||||
<img :src="(pressureStatus === '已连接' && footImgSrc) ? footImgSrc : noImageSvg" style="width: 100%;height: 100%;" alt="">
|
||||
<div style="position: relative;width: 100%;height:calc(100% - 60px) ;"
|
||||
: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=""
|
||||
class="userinfo-edit-img">
|
||||
<img src="@/assets/detection/userinfo.png" alt=""
|
||||
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">
|
||||
<img :src="(camera1Status === '已连接' && camera1ImgSrc) ? camera1ImgSrc : noImageSvg" alt="camera1"
|
||||
style="width: 100%; height: 100%; object-fit: contain; " />
|
||||
<div class="body-video-imgbox1" ref="camera1Ref" :class="(camera1Status === '已连接' && camera1ImgSrc)?'':'noImageSvg-bg'">
|
||||
<div v-if="(camera1Status === '已连接' && camera1ImgSrc)"
|
||||
@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">
|
||||
<img :src="(camera2Status === '已连接' && camera2ImgSrc) ? camera2ImgSrc : noImageSvg" alt="camera2"
|
||||
style="width: 100%; height: 100%; object-fit: contain; " />
|
||||
<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>
|
||||
</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;
|
||||
color: #FFFFFF;
|
||||
font-size: 20px;
|
||||
color: rgb(255, 255, 255);
|
||||
}
|
||||
.body-son-display{
|
||||
display: flex;
|
||||
@ -2289,23 +2340,34 @@ function closePatientProfile(){
|
||||
}
|
||||
.currencytext1{
|
||||
min-width: 100px;
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
font-family: "Noto Sans SC";
|
||||
font-weight: 400;
|
||||
color: #D1D5DB;
|
||||
}
|
||||
.currencytext2{
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-size: 30px;
|
||||
color: #FF6600;
|
||||
text-align: r;
|
||||
font-size: 24px;
|
||||
color: #3BF2C6;
|
||||
}
|
||||
.currencytext3{
|
||||
width: 60px;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
font-weight: 400;
|
||||
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);
|
||||
border-radius: 8px;
|
||||
background-color: #374151;
|
||||
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;
|
||||
height: 29px;
|
||||
width: 90px;
|
||||
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;
|
||||
color: #D7D7D7;
|
||||
font-size: 16px;
|
||||
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);
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: rgba(148, 148, 148, 1);
|
||||
box-shadow: rgb(17, 24, 33) 0px 0px 10px;
|
||||
}
|
||||
.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;
|
||||
border:1px solid #266fff;
|
||||
background:#0b94d5;
|
||||
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);
|
||||
border-color: rgb(38, 111, 255);
|
||||
background: #14aaff;
|
||||
border-color: #14aaff;
|
||||
}
|
||||
.pop-up-camera-display :deep(.el-radio__input.is-checked .el-radio__inner){
|
||||
background: rgb(38, 111, 255);
|
||||
border-color: rgb(38, 111, 255);
|
||||
background: #14aaff;
|
||||
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;
|
||||
border-color: rgb(124, 124, 124);
|
||||
background-color: #2a3649;
|
||||
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>
|
||||
|
||||
@ -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>
|
||||
|
||||
<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);
|
||||
font-weight:400;
|
||||
font-style:normal;
|
||||
font-size:14px;
|
||||
color:#191D28;
|
||||
}
|
||||
.activate-btn {
|
||||
width: 58px;
|
||||
height: 24px;
|
||||
width: 76px;
|
||||
height: 26px;
|
||||
border-radius: 26px;
|
||||
|
||||
|
||||
margin-left: 8px;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
color: rgb(25, 29, 40);
|
||||
font-size: 13px;
|
||||
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>
|
||||
291
frontend/src/renderer/src/views/ViewUser.vue
Normal file
291
frontend/src/renderer/src/views/ViewUser.vue
Normal file
@ -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>
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user