修改报告详情
This commit is contained in:
parent
6ec26bfeaa
commit
a04b2b5e36
BIN
frontend/src/renderer/src/assets/archive/close2.png
Normal file
BIN
frontend/src/renderer/src/assets/archive/close2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 324 B |
BIN
frontend/src/renderer/src/assets/archive/leftbutton.png
Normal file
BIN
frontend/src/renderer/src/assets/archive/leftbutton.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 221 B |
BIN
frontend/src/renderer/src/assets/archive/pitch.png
Normal file
BIN
frontend/src/renderer/src/assets/archive/pitch.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
frontend/src/renderer/src/assets/archive/rightbutton.png
Normal file
BIN
frontend/src/renderer/src/assets/archive/rightbutton.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 229 B |
BIN
frontend/src/renderer/src/assets/archive/roll.png
Normal file
BIN
frontend/src/renderer/src/assets/archive/roll.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
frontend/src/renderer/src/assets/archive/selectbottom.png
Normal file
BIN
frontend/src/renderer/src/assets/archive/selectbottom.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 362 B |
BIN
frontend/src/renderer/src/assets/archive/yaw.png
Normal file
BIN
frontend/src/renderer/src/assets/archive/yaw.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
frontend/src/renderer/src/assets/test.jpg
Normal file
BIN
frontend/src/renderer/src/assets/test.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 260 KiB |
BIN
frontend/src/renderer/src/assets/test2.png
Normal file
BIN
frontend/src/renderer/src/assets/test2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
BIN
frontend/src/renderer/src/assets/test3.jpg
Normal file
BIN
frontend/src/renderer/src/assets/test3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 175 KiB |
BIN
frontend/src/renderer/src/assets/test5.png
Normal file
BIN
frontend/src/renderer/src/assets/test5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
569
frontend/src/renderer/src/views/GenerateReport.vue
Normal file
569
frontend/src/renderer/src/views/GenerateReport.vue
Normal file
@ -0,0 +1,569 @@
|
||||
<template>
|
||||
<div class="generateReport-container">
|
||||
<div class="generateReport-container-header">
|
||||
<div class="generateReport-container-headertitle">生成报告</div>
|
||||
<div style="display: flex;">
|
||||
<div class="generateReport-container-cancelbutton" @click="closeCancel">取消</div>
|
||||
<div class="generateReport-container-confirmbutton" @click="closeCancel">确定</div>
|
||||
</div>
|
||||
<img src="@/assets/archive/close.png" alt="" @click="closeCancel" style="cursor: pointer;">
|
||||
</div>
|
||||
<div class="generateReport-container-body">
|
||||
<el-scrollbar height="calc(100%)" style="padding:0 100px">
|
||||
<div class="generateReport-container-bodytitle">体态测量报告单</div>
|
||||
<div class="generateReport-container-display">
|
||||
<div class="generateReport-container-userinfotext">检测时间：{{ detectionInfo.start_time }}</div>
|
||||
<div class="generateReport-container-userinfotext">ID：{{ detectionInfo.id }}</div>
|
||||
</div>
|
||||
<div class="generateReport-container-userinfodisplay">
|
||||
<div class="generateReport-container-userinfotext2">
|
||||
ID：{{ selectedPatient.id }}
|
||||
</div>
|
||||
<div class="generateReport-container-userinfotext2 width-210">
|
||||
姓名：{{ selectedPatient.name }}
|
||||
</div>
|
||||
<div class="generateReport-container-userinfotext2 width-195">
|
||||
性别：{{ selectedPatient.gender }}
|
||||
</div>
|
||||
<div class="generateReport-container-userinfotext2 width-195">
|
||||
年龄：{{ calculateAge(selectedPatient.birth_date) }}岁
|
||||
</div>
|
||||
<div class="generateReport-container-userinfotext2 width-235">
|
||||
身高：{{ selectedPatient.height }}cm
|
||||
</div>
|
||||
<div class="generateReport-container-userinfotext2 width-215">
|
||||
体重：{{ selectedPatient.weight }}kg
|
||||
</div>
|
||||
<div class="generateReport-container-userinfotext2 width-95">
|
||||
鞋码：{{ selectedPatient.shoe_size }}码
|
||||
</div>
|
||||
<div class="generateReport-container-userinfotext2">
|
||||
电话：{{ selectedPatient.phone }}
|
||||
</div>
|
||||
<div class="generateReport-container-userinfotext2 width-405">
|
||||
邮箱：{{ selectedPatient.email }}
|
||||
</div>
|
||||
<div class="generateReport-container-userinfotext2 width-430">
|
||||
居住地：{{ selectedPatient.residence }}
|
||||
</div>
|
||||
<div class="generateReport-container-userinfotext2 width-310">
|
||||
职业：{{ selectedPatient.occupation }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="generateReport-container-testdatatitle">【检测数据】</div>
|
||||
<div class="generateReport-containerdisplay">
|
||||
<div class="generateReport-container-leftbox">
|
||||
<div class="displayflex">
|
||||
<div class="displayflextext1">选择原始数据</div>
|
||||
<div class="displayflexselect" @click="getRawData('left')">
|
||||
{{ rawData.order }}
|
||||
<img src="@/assets/archive/selectbottom.png" class="displayflexselect-icon" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<!-- 选中后显示内容 -->
|
||||
<div v-if="rawData.order && rawData.order!=''">
|
||||
<div class="generateReport-content-title">整体数据</div>
|
||||
<div style="width: 600px;height: 337px;">
|
||||
<img :src="BACKEND_URL+'/' + rawData.screen_image" alt="" srcset="" style="width: 100%;height: 100%;">
|
||||
</div>
|
||||
<div class="generateReport-content-title">身体姿态</div>
|
||||
<div style="width: 100%;height: 454px; display: flex;justify-content: center;">
|
||||
<img :src="BACKEND_URL+'/' + rawData.body_image" alt="" srcset="" style="width: 100%;height: 100%;
|
||||
object-fit:contain; ">
|
||||
</div>
|
||||
<div class="generateReport-content-title">头部姿态</div>
|
||||
<div style="width: 555px;padding:20px 0; display: flex;justify-content: space-between;">
|
||||
<img src="@/assets/archive/roll.png">
|
||||
<img src="@/assets/archive/yaw.png">
|
||||
<img src="@/assets/archive/pitch.png">
|
||||
</div>
|
||||
<div style="width: 630px;padding:20px 0; display: flex;justify-content: space-between;">
|
||||
<div class="rollyawpitchtext">左：<span class="rollyawpitchtextcolor">
|
||||
{{headPoseMaxValuesLeft.rotationLeftMax}}°
|
||||
</span>
|
||||
</div>
|
||||
<div class="rollyawpitchtext">左：<span class="rollyawpitchtextcolor">
|
||||
{{headPoseMaxValuesLeft.tiltLeftMax}}°
|
||||
</span></div>
|
||||
<div class="rollyawpitchtext">俯：<span class="rollyawpitchtextcolor">
|
||||
{{headPoseMaxValuesLeft.pitchDownMax}}°
|
||||
</span></div>
|
||||
</div>
|
||||
<div style="width: 630px;padding:20px 0; display: flex;justify-content: space-between;">
|
||||
<div class="rollyawpitchtext">右：<span class="rollyawpitchtextcolor">
|
||||
{{headPoseMaxValuesLeft.rotationRightMax}}°
|
||||
</span></div>
|
||||
<div class="rollyawpitchtext">右：
|
||||
<span class="rollyawpitchtextcolor">
|
||||
{{headPoseMaxValuesLeft.tiltRightMax}}°
|
||||
</span>
|
||||
</div>
|
||||
<div class="rollyawpitchtext">仰：
|
||||
<span class="rollyawpitchtextcolor">
|
||||
{{headPoseMaxValuesLeft.pitchUpMax}}°
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="generateReport-content-title">足底压力</div>
|
||||
<div style="width: 600px;height: 270px; display: flex;">
|
||||
<img :src="BACKEND_URL+'/' + rawData.foot_data_image" alt="" srcset="" style="width: 100%;height: 100%;
|
||||
object-fit:contain; ">
|
||||
</div>
|
||||
<div class="generateReport-content-title">视频1图片</div>
|
||||
<div style="width: 600px;height: 338px; display: flex;">
|
||||
<img :src="BACKEND_URL+'/' + rawData.foot1_image" alt="" srcset="" style="width: 100%;height: 100%;">
|
||||
</div>
|
||||
<div class="generateReport-content-title">视频2图片</div>
|
||||
<div style="width: 600px;height: 338px; display: flex;">
|
||||
<img :src="BACKEND_URL+'/' + rawData.foot2_image" alt="" srcset="" style="width: 100%;height: 100%;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="generateReport-container-rightbox">
|
||||
<div class="displayflex">
|
||||
<div class="displayflextext1">选择矫正数据</div>
|
||||
<div class="displayflexselect" @click="getRawData('right')">
|
||||
{{ calibrationData.order }}
|
||||
<img src="@/assets/archive/selectbottom.png" class="displayflexselect-icon" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<!-- 选中后显示内容 -->
|
||||
<div v-if="calibrationData.order && calibrationData.order!=''">
|
||||
<div class="generateReport-content-title">整体数据</div>
|
||||
<div style="width: 600px;height: 337px;">
|
||||
<img :src="BACKEND_URL+'/' + calibrationData.screen_image" alt="" srcset="" style="width: 100%;height: 100%;">
|
||||
</div>
|
||||
<div class="generateReport-content-title">身体姿态</div>
|
||||
<div style="width: 100%;height: 454px; display: flex;justify-content: center;">
|
||||
<img :src="BACKEND_URL+'/' + calibrationData.body_image" alt="" srcset="" style="width: 100%;height: 100%;
|
||||
object-fit:contain; ">
|
||||
</div>
|
||||
<div class="generateReport-content-title">头部姿态</div>
|
||||
<div style="width: 555px;padding:20px 0; display: flex;justify-content: space-between;">
|
||||
<img src="@/assets/archive/roll.png">
|
||||
<img src="@/assets/archive/yaw.png">
|
||||
<img src="@/assets/archive/pitch.png">
|
||||
</div>
|
||||
<div style="width: 630px;padding:20px 0; display: flex;justify-content: space-between;">
|
||||
<div class="rollyawpitchtext">左：<span class="rollyawpitchtextcolor">
|
||||
{{headPoseMaxValuesRight.rotationLeftMax}}°
|
||||
</span>
|
||||
</div>
|
||||
<div class="rollyawpitchtext">左：<span class="rollyawpitchtextcolor">
|
||||
{{headPoseMaxValuesRight.tiltLeftMax}}°
|
||||
</span></div>
|
||||
<div class="rollyawpitchtext">俯：<span class="rollyawpitchtextcolor">
|
||||
{{headPoseMaxValuesRight.pitchDownMax}}°
|
||||
</span></div>
|
||||
</div>
|
||||
<div style="width: 630px;padding:20px 0; display: flex;justify-content: space-between;">
|
||||
<div class="rollyawpitchtext">右：<span class="rollyawpitchtextcolor">
|
||||
{{headPoseMaxValuesRight.rotationRightMax}}°
|
||||
</span></div>
|
||||
<div class="rollyawpitchtext">右：
|
||||
<span class="rollyawpitchtextcolor">
|
||||
{{headPoseMaxValuesRight.tiltRightMax}}°
|
||||
</span>
|
||||
</div>
|
||||
<div class="rollyawpitchtext">仰：
|
||||
<span class="rollyawpitchtextcolor">
|
||||
{{headPoseMaxValuesRight.pitchUpMax}}°
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="generateReport-content-title">足底压力</div>
|
||||
<div style="width: 600px;height: 270px; display: flex;">
|
||||
<img :src="BACKEND_URL+'/' + calibrationData.foot_data_image" alt="" srcset="" style="width: 100%;height: 100%;
|
||||
object-fit:contain; ">
|
||||
</div>
|
||||
<div class="generateReport-content-title">视频1图片</div>
|
||||
<div style="width: 600px;height: 338px; display: flex;">
|
||||
<img :src="BACKEND_URL+'/' + calibrationData.foot1_image" alt="" srcset="" style="width: 100%;height: 100%;">
|
||||
</div>
|
||||
<div class="generateReport-content-title">视频2图片</div>
|
||||
<div style="width: 600px;height: 338px; display: flex;">
|
||||
<img :src="BACKEND_URL+'/' + calibrationData.foot2_image" alt="" srcset="" style="width: 100%;height: 100%;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="generateReport-container-testdatatitle">【诊断结果】</div>
|
||||
<div class="generateReport-title2">记录</div>
|
||||
<div class="generateReport-border1">记录信息</div>
|
||||
<div class="generateReport-title2">处理</div>
|
||||
<div class="generateReport-border2">保持观察，不予处理</div>
|
||||
<div class="generateReport-title2">备注</div>
|
||||
<div class="generateReport-border3">备注信息</div>
|
||||
</el-scrollbar>
|
||||
|
||||
|
||||
</div>
|
||||
<SelectData v-if="isSelectData" :imageList="imageList" @closeSelectData="closeSelectData"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { patientAPI, detectionAPI,historyAPI,getBackendUrl } from '@/services/api.js'
|
||||
import SelectData from '@/views/SelectData.vue'
|
||||
|
||||
const emit = defineEmits([ 'closeGenerateReport' ]);
|
||||
const props = defineProps({
|
||||
selectedPatient: {
|
||||
required: false,
|
||||
type: Object,
|
||||
default: null
|
||||
},
|
||||
|
||||
detectionId: {
|
||||
required: false,
|
||||
type: String,
|
||||
default: ""
|
||||
}
|
||||
})
|
||||
const BACKEND_URL = getBackendUrl()
|
||||
const rawData = ref({}) // 原始数据
|
||||
const calibrationData = ref({}) // 校准数据
|
||||
const isSelectData = ref(false) // 是否选择原始数据列表
|
||||
const imageList = ref([])
|
||||
const detectionInfo= ref({})
|
||||
const headPoseMaxValuesLeft = ref({
|
||||
rotationLeftMax: 0, // 旋转-左旋最大值
|
||||
rotationRightMax: 0, // 旋转-右旋最大值
|
||||
tiltLeftMax: 0, // 倾斜-左倾最大值
|
||||
tiltRightMax: 0, // 倾斜-右倾最大值
|
||||
pitchUpMax: 0, // 俯仰-上仰最大值
|
||||
pitchDownMax: 0 })
|
||||
|
||||
const headPoseMaxValuesRight= ref({
|
||||
rotationLeftMax: 0, // 旋转-左旋最大值
|
||||
rotationRightMax: 0, // 旋转-右旋最大值
|
||||
tiltLeftMax: 0, // 倾斜-左倾最大值
|
||||
tiltRightMax: 0, // 倾斜-右倾最大值
|
||||
pitchUpMax: 0, // 俯仰-上仰最大值
|
||||
pitchDownMax: 0 })
|
||||
|
||||
function getNo(order) {
|
||||
if(order<10){
|
||||
return '0'+order
|
||||
}else{
|
||||
return order
|
||||
}
|
||||
}
|
||||
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 sessionsById = async (session_id) => {
|
||||
try {
|
||||
// 导出报告逻辑
|
||||
const response = await historyAPI.sessionsById(session_id)
|
||||
if (response.success) {
|
||||
response.data.data.forEach((element,index) => {
|
||||
element.order ='D-'+ (getNo(index + 1))
|
||||
});
|
||||
detectionInfo.value = response.data
|
||||
imageList.value = response.data.data
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error('获取失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 生命周期
|
||||
onMounted(() => {
|
||||
sessionsById(props.detectionId)
|
||||
})
|
||||
function closeCancel() {
|
||||
emit("closeGenerateReport",false)
|
||||
}
|
||||
onUnmounted(() => {
|
||||
|
||||
})
|
||||
const selectIndex = ref('left')
|
||||
function getRawData(e){
|
||||
selectIndex.value = e
|
||||
isSelectData.value = true
|
||||
}
|
||||
|
||||
function closeSelectData(is,val){
|
||||
if(is == true){
|
||||
if(selectIndex.value == 'left'){
|
||||
rawData.value = val
|
||||
if(val.head_pose !=null){
|
||||
headPoseMaxValuesLeft.value = JSON.parse(val.head_pose).headPoseMaxValues
|
||||
}
|
||||
}else if(selectIndex.value == 'right'){
|
||||
calibrationData.value = val
|
||||
if(val.head_pose !=null){
|
||||
headPoseMaxValuesRight.value = JSON.parse(val.head_pose).headPoseMaxValues
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
isSelectData.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.generateReport-container{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: #0b0c0f;
|
||||
z-index: 50;
|
||||
}
|
||||
.generateReport-container-header{
|
||||
width: 1920px;
|
||||
height: 60px;
|
||||
background: inherit;
|
||||
background-color: #191d28;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 30px;
|
||||
}
|
||||
.generateReport-container-headertitle{
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-size: 20px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.generateReport-container-cancelbutton{
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
background-color: #597194;
|
||||
border-radius: 4px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.generateReport-container-cancelbutton:hover{
|
||||
background-color: #14aaff;
|
||||
color: #fff;
|
||||
}
|
||||
.generateReport-container-confirmbutton{
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
background-color: #0b94d5;
|
||||
border-radius: 4px;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.generateReport-container-confirmbutton:hover{
|
||||
background-color: #14aaff;
|
||||
}
|
||||
.generateReport-container-body{
|
||||
margin:20px auto 0;
|
||||
width: 1600px;
|
||||
height: calc(100vh - 80px);
|
||||
background: #fff;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0px 0px 10px rgba(219, 225, 236, 0.3);
|
||||
padding: 50px 0 20px;
|
||||
|
||||
}
|
||||
.generateReport-container-display{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-bottom: 25px;
|
||||
border-bottom: 1px solid #333;
|
||||
}
|
||||
.generateReport-container-bodytitle{
|
||||
font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-size: 36px;
|
||||
color: #282828;
|
||||
text-align: center;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.generateReport-container-userinfotext{
|
||||
font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
color: #282828;
|
||||
font-size: 18px;
|
||||
}
|
||||
.generateReport-container-userinfodisplay{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content:flex-start ;
|
||||
padding: 20px 0;
|
||||
padding-top: 30px;
|
||||
border-bottom: 1px solid #333;
|
||||
}
|
||||
.generateReport-container-userinfotext2{
|
||||
width: 240px;
|
||||
font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
color: #282828;
|
||||
font-size: 18px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.width-210{ width: 210px; }
|
||||
.width-195{ width: 195px; }
|
||||
.width-215{ width: 215px; }
|
||||
.width-235{ width: 235px; }
|
||||
.width-95{ width: 95px; }
|
||||
.width-405{ width: 405px; }
|
||||
.width-430{ width: 430px; }
|
||||
.width-300{ width: 300px; }
|
||||
|
||||
.generateReport-container-testdatatitle{
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
color: #14AAFF;
|
||||
font-size: 18px;
|
||||
text-align: left;
|
||||
padding: 20px 0;
|
||||
}
|
||||
.generateReport-containerdisplay{
|
||||
display: flex;
|
||||
}
|
||||
.generateReport-container-leftbox{
|
||||
width: 50%;
|
||||
border-right:1px solid rgb(208, 208, 208) ;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.generateReport-container-rightbox{
|
||||
width: 50%;
|
||||
box-sizing: border-box;
|
||||
padding-left: 80px;
|
||||
}
|
||||
.displayflex{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.displayflextext1{
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
color: #282828;
|
||||
font-size: 18px;
|
||||
text-align: left;
|
||||
}
|
||||
.displayflexselect{
|
||||
position: relative;
|
||||
width: 200px;
|
||||
height: 40px;
|
||||
background: rgba(255, 255, 255, 1);
|
||||
box-sizing: border-box;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: rgba(220, 223, 230, 1);
|
||||
border-radius: 4px;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 10px;
|
||||
margin-left: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.displayflexselect-icon{
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.generateReport-content-title{
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
color: #282828;
|
||||
font-size: 18px;
|
||||
padding-top:30px;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
.rollyawpitchtext{
|
||||
font-style: normal;
|
||||
color: #282828;
|
||||
font-size: 24px;
|
||||
width: 170px;
|
||||
}
|
||||
.rollyawpitchtextcolor{
|
||||
color:#14AAFF;
|
||||
}
|
||||
.generateReport-title2{
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-size: 18px;
|
||||
color: #282828;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
|
||||
}
|
||||
.generateReport-border1{
|
||||
padding: 5px;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
background: rgba(255, 255, 255, 1);
|
||||
box-sizing: border-box;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: rgba(220, 223, 230, 1);
|
||||
border-radius: 4px;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 18px;
|
||||
text-decoration: none;
|
||||
color: #383838;
|
||||
}
|
||||
.generateReport-border2{
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background: rgba(255, 255, 255, 1);
|
||||
box-sizing: border-box;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: rgba(220, 223, 230, 1);
|
||||
border-radius: 4px;
|
||||
font-style: normal;
|
||||
font-size: 18px;
|
||||
text-decoration: none;
|
||||
color: #383838;
|
||||
padding: 5px;
|
||||
}
|
||||
.generateReport-border3{
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
background: rgba(255, 255, 255, 1);
|
||||
box-sizing: border-box;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: rgba(220, 223, 230, 1);
|
||||
border-radius: 4px;
|
||||
font-style: normal;
|
||||
font-size: 18px;
|
||||
text-decoration: none;
|
||||
color: #383838;
|
||||
padding: 5px;
|
||||
}
|
||||
</style>
|
||||
@ -281,13 +281,14 @@
|
||||
}
|
||||
.badge-invalid {
|
||||
text-align: center;
|
||||
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%);
|
||||
background: 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);
|
||||
font-size:14px;
|
||||
text-align: center;
|
||||
}
|
||||
.badge-trial { background-color: rgba(67, 67, 67, 1); color: #949494; }
|
||||
.badge-trial { background: rgba(67, 67, 67, 1); color: #949494; }
|
||||
.badge-valid {
|
||||
|
||||
text-align: center;
|
||||
|
||||
188
frontend/src/renderer/src/views/ImageDetails.vue
Normal file
188
frontend/src/renderer/src/views/ImageDetails.vue
Normal file
@ -0,0 +1,188 @@
|
||||
<template>
|
||||
<div class="ImageDetails-box">
|
||||
<div class="ImageDetails-header">
|
||||
<div>{{ ImageDetailsInfo.order }}</div>
|
||||
<img src="@/assets/archive/close2.png" alt="" style="cursor: pointer;" @click="handleCancel">
|
||||
</div>
|
||||
<div class="ImageDetails-imgbgbox">
|
||||
<div class="ImageDetails-leftbutton" @click="clickleft">
|
||||
<img src="@/assets/archive/leftbutton.png" alt="">
|
||||
</div>
|
||||
<div class="ImageDetails-content-imgbox" v-if="indexActive == 0">
|
||||
<img :src="BACKEND_URL+'/' + ImageDetailsInfo.screen_image" alt="" style="width: 100%;height: 100%;object-fit:contain;">
|
||||
</div>
|
||||
<div class="ImageDetails-content-imgbox" v-if="indexActive == 1">
|
||||
<img :src="BACKEND_URL+'/' + ImageDetailsInfo.body_image" alt="" style="width: 100%;height: 100%;object-fit:contain;">
|
||||
</div>
|
||||
<div class="ImageDetails-content-imgbox" v-if="indexActive == 2">
|
||||
<img :src="BACKEND_URL+'/' + ImageDetailsInfo.screen_image" alt="" style="width: 100%;height: 100%;object-fit:contain;">
|
||||
</div>
|
||||
<div class="ImageDetails-content-imgbox" v-if="indexActive == 3">
|
||||
<img :src="BACKEND_URL+'/' + ImageDetailsInfo.foot_data_image" alt="" style="width: 100%;height: 100%;object-fit:contain;">
|
||||
</div>
|
||||
<div class="ImageDetails-content-imgbox" v-if="indexActive == 4">
|
||||
<div style="display: flex;justify-content: center;align-items: center;flex-wrap: wrap;">
|
||||
<div style="width: 100%;text-align: center;font-weight: 700;
|
||||
font-style: normal;
|
||||
font-size: 20px;
|
||||
color: #FFFFFF;
|
||||
padding-bottom: 10px;">视频1</div>
|
||||
<div style="width: 640px;height: 360px;display: flex;justify-content: center;align-items: center;">
|
||||
<img :src="BACKEND_URL+'/' + ImageDetailsInfo.foot1_image" alt="" style="width: 100%;height: 100%;object-fit:contain;">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div style="display: flex;justify-content: center;align-items: center;flex-wrap: wrap;">
|
||||
<div style="width: 100%;text-align: center;font-weight: 700;
|
||||
font-style: normal;
|
||||
font-size: 20px;
|
||||
color: #FFFFFF;
|
||||
padding-bottom: 10px;">视频2</div>
|
||||
<div style="width: 640px;height: 360px;display: flex;justify-content: center;align-items: center;">
|
||||
<img :src="BACKEND_URL+'/' + ImageDetailsInfo.foot1_image" alt="" style="width: 100%;height: 100%;object-fit:contain;">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ImageDetails-leftbutton" @click="clickright">
|
||||
<img src="@/assets/archive/rightbutton.png" alt="">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div style="display: flex;justify-content: center; margin-top: 35px;">
|
||||
<div :class="indexActive == 0?'ImageDetails-buttonli-active':''" @click="clickIndex(0)"
|
||||
class="ImageDetails-buttonli" style="border-radius: 4px 0 0 4px;">整体</div>
|
||||
<div :class="indexActive == 1?'ImageDetails-buttonli-active':''" @click="clickIndex(1)"
|
||||
class="ImageDetails-buttonli" >背部</div>
|
||||
<div :class="indexActive == 2?'ImageDetails-buttonli-active':''" @click="clickIndex(2)"
|
||||
class="ImageDetails-buttonli">头部</div>
|
||||
<div :class="indexActive == 3?'ImageDetails-buttonli-active':''" @click="clickIndex(3)"
|
||||
class="ImageDetails-buttonli">足底</div>
|
||||
<div :class="indexActive == 4?'ImageDetails-buttonli-active':''" @click="clickIndex(4)"
|
||||
class="ImageDetails-buttonli" style="border-radius: 0px 4px 4px 0px;">视频截图</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
|
||||
import { getBackendUrl } from '@/services/api.js'
|
||||
const emit = defineEmits([ 'closeImageDetails' ]);
|
||||
const props = defineProps({
|
||||
ImageDetailsList: {
|
||||
required: false,
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
selectIndex: {
|
||||
required: false,
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
})
|
||||
const BACKEND_URL = getBackendUrl() // 后端地址
|
||||
const indexActive = ref(0) // 图片详情索引
|
||||
const ImageDetailsInfo = ref({}) // 图片详情信息
|
||||
const pageIndex = ref(0)
|
||||
// 生命周期
|
||||
onMounted(() => {
|
||||
pageIndex.value = props.selectIndex
|
||||
ImageDetailsInfo.value = props.ImageDetailsList[props.selectIndex]
|
||||
})
|
||||
function clickIndex(index) {
|
||||
indexActive.value = index
|
||||
}
|
||||
function clickleft() {
|
||||
if (pageIndex.value > 0) {
|
||||
pageIndex.value = pageIndex.value-1
|
||||
ImageDetailsInfo.value = props.ImageDetailsList[pageIndex.value]
|
||||
}
|
||||
}
|
||||
function clickright() {
|
||||
if (pageIndex.value < props.ImageDetailsList.length-1) {
|
||||
pageIndex.value = pageIndex.value + 1
|
||||
ImageDetailsInfo.value = props.ImageDetailsList[pageIndex.value]
|
||||
}
|
||||
}
|
||||
function handleCancel() {
|
||||
emit("closeImageDetails",false)
|
||||
}
|
||||
onUnmounted(() => {
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ImageDetails-box{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: #191d28;
|
||||
padding: 0px 30px 20px;
|
||||
z-index: 299;
|
||||
}
|
||||
.ImageDetails-header{
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Noto Sans SC';
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-size: 20px;
|
||||
color: #FFFFFF;
|
||||
text-align: left;
|
||||
}
|
||||
.ImageDetails-buttonli{
|
||||
width: 120px;
|
||||
height: 50px;
|
||||
background: rgba(55, 65, 81, 1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: 'Noto Sans SC';
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
cursor: pointer;
|
||||
}
|
||||
.ImageDetails-buttonli:hover{
|
||||
color: #14aaff;
|
||||
}
|
||||
.ImageDetails-buttonli-active{
|
||||
background: #14aaff;
|
||||
color: #FFFFFF !important;
|
||||
}
|
||||
.ImageDetails-imgbgbox{
|
||||
width: calc(100%);
|
||||
height: calc(100% - 150px);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ImageDetails-leftbutton{
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
border-radius: 50%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
margin: 0 20px;
|
||||
}
|
||||
.ImageDetails-content-imgbox{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
width: calc(100% - 160px);
|
||||
}
|
||||
</style>
|
||||
@ -108,7 +108,8 @@
|
||||
font-size: 14px;
|
||||
color: #14AAFF;
|
||||
line-height: 18px;
|
||||
cursor: pointer;">生成报告</div>
|
||||
cursor: pointer;"
|
||||
@click.stop="generateReport(scope.row,scope.$index)">生成报告</div>
|
||||
<div class="patientprofile-file-box" v-if="scope.row.detection_report != null">
|
||||
<img src="@/assets/new/file.png" alt="" @click="fileClick(scope.row)">
|
||||
<img src="@/assets/new/del.png" class="patientprofile-del" alt=""
|
||||
@ -173,13 +174,13 @@
|
||||
<div v-for="(item, index) in useImgList" :key="index"
|
||||
class="patientprofile-imgbox">
|
||||
<div class="patientprofile-imgactive">
|
||||
<img :src="BACKEND_URL+'/' + item.foot_data_image" alt="" style="width: 100%;height: 100%;">
|
||||
<img :src="BACKEND_URL+'/' + item.screen_image" alt="" style="width: 100%;height: 100%;">
|
||||
</div>
|
||||
<div class="patientprofile-imgtextbox">
|
||||
<el-checkbox
|
||||
:value="item.id" size="large" style="display:flex; align-items: center; justify-content: space-between">
|
||||
<div>{{ item.name }}</div>
|
||||
<span>2025-05-12 12:12:12</span>
|
||||
<div>{{ item.order }}</div>
|
||||
<span>{{ item.timestamp }}</span>
|
||||
</el-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
@ -218,7 +219,6 @@
|
||||
<div v-for="(item, index) in useVideoList" :key="index"
|
||||
class="patientprofile-imgbox">
|
||||
<div class="patientprofile-imgactive">
|
||||
{{ BACKEND_URL+'/' + item.screen_video.replace(/\\/g, '/') }}
|
||||
<video ref="videoPlayerRef" :src="item.screen_video ? BACKEND_URL+'/' + item.screen_video.replace(/\\/g, '/') : ''" controls width="100%" height="100%">
|
||||
您的浏览器不支持视频播放
|
||||
</video>
|
||||
@ -226,8 +226,8 @@
|
||||
<div class="patientprofile-imgtextbox">
|
||||
<el-checkbox
|
||||
:value="item.id" size="large" style="display:flex; align-items: center; justify-content: space-between">
|
||||
<div>{{ item.name }}</div>
|
||||
<span>2025-05-12 12:12:12</span>
|
||||
<div>{{ item.order }}</div>
|
||||
<span>{{ item.timestamp }}</span>
|
||||
</el-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
@ -275,12 +275,13 @@
|
||||
<el-input type="textarea" v-model="profileInfo.suggestion_info" :resize="'none'" class="patientprofile-container-dataInfobg-textarea"></el-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<GenerateReport v-if="isGenerateReport" :selectedPatient="selectedPatient"
|
||||
:detectionId="detectionId" @closeGenerateReport="closeGenerateReport"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -290,6 +291,8 @@ import { useRouter, useRoute } from 'vue-router'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { patientAPI, detectionAPI,historyAPI,getBackendUrl } from '@/services/api.js'
|
||||
import { useAuthStore } from '@/stores/index.js'
|
||||
import GenerateReport from '@/views/GenerateReport.vue'
|
||||
|
||||
const formatDate = (date) => {
|
||||
return new Date(date).toLocaleDateString('zh-CN')
|
||||
}
|
||||
@ -308,6 +311,8 @@ const props = defineProps({
|
||||
default: false
|
||||
}
|
||||
})
|
||||
const detectionId = ref('') // 列表检测ID
|
||||
const isGenerateReport = ref(false) // 是否生成报告
|
||||
const archiveType =ref(false)
|
||||
const profileInfo = ref({}) // 患者信息
|
||||
const selectedRecord = ref({})
|
||||
@ -325,12 +330,15 @@ const tempVideoList = ref([])
|
||||
// tempImgList.value = [...imageList.value]
|
||||
const useImgList = ref([])// 图片
|
||||
const useVideoList = ref([])// 视频
|
||||
// useImgList.value =[...tempImgList.value.slice(0, 4)] // 图片
|
||||
// useVideoList.value =[...tempImgList.value.slice(0, 4)] // 视频
|
||||
|
||||
const selectedData = ref([]) // 列表选中的数据
|
||||
|
||||
|
||||
function getNo(order) {
|
||||
if(order<10){
|
||||
return '0'+order
|
||||
}else{
|
||||
return order
|
||||
}
|
||||
}
|
||||
const calculateAge = (birthDate) => { // 获取年龄
|
||||
if (!birthDate) return '—'
|
||||
const today = new Date()
|
||||
@ -388,7 +396,6 @@ const sessionsById = async (session_id) => {
|
||||
try {
|
||||
imageList.value = []
|
||||
videoList.value = []
|
||||
|
||||
tempImgList.value = []
|
||||
tempVideoList.value = []
|
||||
useImgList.value = []
|
||||
@ -398,6 +405,12 @@ const sessionsById = async (session_id) => {
|
||||
// 导出报告逻辑
|
||||
const response = await historyAPI.sessionsById(session_id)
|
||||
if (response.success) {
|
||||
response.data.data.forEach((element,index) => {
|
||||
element.order ='D-'+ (getNo(index + 1))
|
||||
});
|
||||
response.data.videos.forEach((element,index) => {
|
||||
element.order ='D-'+ (getNo(index + 1))
|
||||
});
|
||||
imageList.value = response.data.data
|
||||
videoList.value = response.data.videos
|
||||
|
||||
@ -408,7 +421,7 @@ const sessionsById = async (session_id) => {
|
||||
}else{
|
||||
useImgList.value =[...tempImgList.value]
|
||||
}
|
||||
if(useVideoList.value.length>4){
|
||||
if(tempVideoList.value.length>4){
|
||||
useVideoList.value =[...tempVideoList.value.slice(0, 4)]
|
||||
}else{
|
||||
useVideoList.value =[...tempVideoList.value]
|
||||
@ -587,6 +600,15 @@ async function handleDiagnosticInfo(status) { // 保存诊断信息
|
||||
function viewPatientProfile() { // 临时方法
|
||||
|
||||
}
|
||||
|
||||
function generateReport(row,index){ // 打开生成报告页面
|
||||
// profileInfo.value = row
|
||||
detectionId.value = row.id
|
||||
isGenerateReport.value = true
|
||||
}
|
||||
function closeGenerateReport(){ // 关闭生成报告页面
|
||||
isGenerateReport.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@ -884,6 +906,7 @@ function viewPatientProfile() { // 临时方法
|
||||
width: 100%;
|
||||
height: calc(100% - 50px);
|
||||
padding: 20px;
|
||||
padding-top: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.patientprofile-container-data{
|
||||
|
||||
212
frontend/src/renderer/src/views/SelectData.vue
Normal file
212
frontend/src/renderer/src/views/SelectData.vue
Normal file
@ -0,0 +1,212 @@
|
||||
<template>
|
||||
<div class="pop-up-mask">
|
||||
<div class="selectdata-box">
|
||||
<div class="selectdata-header">
|
||||
<div>选择数据</div>
|
||||
<img src="@/assets/archive/close2.png" alt="" style="cursor: pointer;" @click="cancel(false)">
|
||||
</div>
|
||||
<div class="selectdata-imgbgbox">
|
||||
<el-checkbox-group v-model="checkboxGroup" size="large" @change="selectedChange" >
|
||||
<div v-for="(item, index) in useImgList" :key="index"
|
||||
class="selectdata-imgbox" >
|
||||
<div class="selectdata-imgactive" @click.stop="selectImg(item,index)">
|
||||
<!-- <img :src="BACKEND_URL+'/' + item.screen_image" alt="" style="width: 100%;height: 100%;"> -->
|
||||
<img :src="BACKEND_URL+'/' + item.screen_image" alt="" style="width: 100%;height: 100%;">
|
||||
</div>
|
||||
<div class="selectdata-imgtextbox" @click.stop="selectCheckbox(item)">
|
||||
<el-checkbox
|
||||
:value="item.order" size="large" style="display:flex; align-items: center; justify-content: space-between">
|
||||
<div>{{ item.order }}</div>
|
||||
<span>{{ item.timestamp }}</span>
|
||||
</el-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
<div style="display: flex;justify-content: flex-end; margin-top: 35px;">
|
||||
<div class="selectdata-cancelbutton" @click="cancel(false)">取消</div>
|
||||
<div class="selectdata-confirmbutton" @click="cancel(true)">确定</div>
|
||||
</div>
|
||||
</div>
|
||||
<ImageDetails v-if="isImageDetails" :ImageDetailsList="useImgList" :selectIndex="selectIndex"
|
||||
@closeImageDetails="closeImageDetails"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
|
||||
import ImageDetails from '@/views/ImageDetails.vue'
|
||||
import { historyAPI,getBackendUrl } from '@/services/api.js'
|
||||
|
||||
const emit = defineEmits([ 'closeSelectData' ]);
|
||||
const props = defineProps({
|
||||
imageList: {
|
||||
required: false,
|
||||
type: Object,
|
||||
default: null
|
||||
},
|
||||
})
|
||||
const BACKEND_URL = getBackendUrl()
|
||||
const useImgList = ref([])
|
||||
const selectInfo = ref({})
|
||||
const ImageDetailsList = ref([]) // 图片详情列表
|
||||
const isImageDetails = ref(false) // 是否显示图片详情
|
||||
const selectIndex = ref(0) // 图片详情选中的索引
|
||||
// 生命周期
|
||||
onMounted(() => {
|
||||
useImgList.value = props.imageList
|
||||
})
|
||||
function cancel(is) {
|
||||
if(is == true && selectInfo.value.id !=null){
|
||||
emit("closeSelectData",true,selectInfo.value)
|
||||
}else{
|
||||
emit("closeSelectData",false,{})
|
||||
}
|
||||
|
||||
}
|
||||
const checkboxGroup = ref([]) // 图片列表选中的数据
|
||||
function selectedChange(val,row){
|
||||
console.log(val,row)
|
||||
}
|
||||
function selectImg(row,index){
|
||||
selectIndex.value = index
|
||||
isImageDetails.value =true
|
||||
|
||||
}
|
||||
function selectCheckbox(row){
|
||||
setTimeout(() => {
|
||||
checkboxGroup.value = [row.order]
|
||||
selectInfo.value = row
|
||||
}, 50)
|
||||
}
|
||||
|
||||
|
||||
onUnmounted(() => {
|
||||
|
||||
})
|
||||
|
||||
function closeImageDetails(e){
|
||||
isImageDetails.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.pop-up-mask{
|
||||
position: fixed;
|
||||
z-index: 199;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
.selectdata-box{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
border-radius: 10px;
|
||||
width: 1280px;
|
||||
height: 824px;
|
||||
background: #38475f;
|
||||
box-shadow: 0px 0px 16px rgba(17, 24, 33, 1);
|
||||
padding: 0px 30px 20px;
|
||||
}
|
||||
.selectdata-header{
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Noto Sans SC';
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-size: 20px;
|
||||
color: #FFFFFF;
|
||||
text-align: left;
|
||||
}
|
||||
.selectdata-box .el-checkbox-group{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.selectdata-imgbgbox{
|
||||
width: calc(100%);
|
||||
height: 645px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.selectdata-imgbox{
|
||||
width: 270px;
|
||||
height: 180px;
|
||||
margin: 15px;
|
||||
}
|
||||
.selectdata-imgactive{
|
||||
width: 100%;
|
||||
height: calc(100% - 30px);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.selectdata-imgactive:hover{
|
||||
border: 2px solid #0b94d5;
|
||||
}
|
||||
.selectdata-imgtextbox{
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
.selectdata-cancelbutton{
|
||||
width: 80px;
|
||||
height: 40px;
|
||||
background-color: #597194;
|
||||
border-radius: 4px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.selectdata-cancelbutton:hover{
|
||||
background-color: #14aaff;
|
||||
color: #fff;
|
||||
}
|
||||
.selectdata-confirmbutton{
|
||||
width: 80px;
|
||||
height: 40px;
|
||||
background-color: #0b94d5;
|
||||
border-radius: 4px;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.selectdata-confirmbutton:hover{
|
||||
background-color: #14aaff;
|
||||
}
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user