修改心电图显示，多张
This commit is contained in:
parent
427996cdfb
commit
91fe36aa57
@ -101,14 +101,59 @@
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="心电图" name="ecg">
|
||||
<div class="ecg-image-container">
|
||||
<template v-if="selectedPersonData && selectedPersonData.ecgimageurl">
|
||||
<el-image
|
||||
:src="selectedPersonData.ecgimageurl"
|
||||
:preview-src-list="[selectedPersonData.ecgimageurl]"
|
||||
fit="contain"
|
||||
class="ecg-image"
|
||||
:preview-teleported="true"
|
||||
/>
|
||||
<template v-if="ecgImages && ecgImages.length > 0">
|
||||
<!-- 心电图分页导航 -->
|
||||
<div class="ecg-pagination-header" v-if="ecgImages.length > 1">
|
||||
<div class="ecg-pagination-info">
|
||||
第 {{ currentEcgIndex + 1 }} 张，共 {{ ecgImages.length }} 张
|
||||
</div>
|
||||
<div class="ecg-pagination-controls">
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="'el-icon-arrow-left'"
|
||||
circle
|
||||
size="small"
|
||||
:disabled="currentEcgIndex <= 0"
|
||||
@click="prevEcgImage"
|
||||
/>
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="'el-icon-arrow-right'"
|
||||
circle
|
||||
size="small"
|
||||
:disabled="currentEcgIndex >= ecgImages.length - 1"
|
||||
@click="nextEcgImage"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 心电图显示 -->
|
||||
<div class="ecg-image-display">
|
||||
<el-image
|
||||
:src="ecgImages[currentEcgIndex]"
|
||||
:preview-src-list="ecgImages"
|
||||
:initial-index="currentEcgIndex"
|
||||
fit="contain"
|
||||
class="ecg-image"
|
||||
:preview-teleported="true"
|
||||
/>
|
||||
</div>
|
||||
<!-- 心电图缩略图导航 -->
|
||||
<div class="ecg-thumbnails" v-if="ecgImages.length > 1">
|
||||
<div
|
||||
v-for="(image, index) in ecgImages"
|
||||
:key="index"
|
||||
class="ecg-thumbnail"
|
||||
:class="{ 'active': index === currentEcgIndex }"
|
||||
@click="goToEcgImage(index)"
|
||||
>
|
||||
<el-image
|
||||
:src="image"
|
||||
fit="cover"
|
||||
class="thumbnail-image"
|
||||
/>
|
||||
<div class="thumbnail-index">{{ index + 1 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-empty description="暂无心电图" />
|
||||
@ -236,6 +281,8 @@ export default {
|
||||
timeList: [], // 新增：时间列表
|
||||
activeTime: '', // 新增：当前激活的时间
|
||||
dateFilter: null, // 新增：日期筛选值
|
||||
currentEcgIndex: 0, // 新增：当前心电图索引
|
||||
ecgImages: [], // 新增：心电图图片数组
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -269,6 +316,8 @@ export default {
|
||||
this.timeList = []
|
||||
this.dateFilter = null // 重置日期筛选
|
||||
this.doctorMessage = '' // 重置医生通知内容
|
||||
this.currentEcgIndex = 0 // 重置心电图索引
|
||||
this.ecgImages = [] // 重置心电图数组
|
||||
|
||||
// 打开对话框并设置设备信息
|
||||
this.dialogVisible = true
|
||||
@ -298,6 +347,8 @@ export default {
|
||||
this.selectedPersonData = null
|
||||
this.hasData = false
|
||||
this.activeTime = ''
|
||||
this.currentEcgIndex = 0 // 重置心电图索引
|
||||
this.ecgImages = [] // 重置心电图数组
|
||||
},
|
||||
async loadPersonData() {
|
||||
try {
|
||||
@ -315,6 +366,8 @@ export default {
|
||||
const response = await EcgdataApi.getEcgdataByTime(selectedTime.collecttime, this.selectedPerson.userid)
|
||||
this.selectedPersonData = response
|
||||
this.hasData = !!this.selectedPersonData
|
||||
// 处理心电图图片数组
|
||||
this.processEcgImages()
|
||||
} catch (error) {
|
||||
console.error('获取指定时间的心电数据失败:', error)
|
||||
this.$message.error('获取数据失败')
|
||||
@ -329,6 +382,8 @@ export default {
|
||||
this.activeTime = ''
|
||||
this.selectedPersonData = null
|
||||
this.hasData = false
|
||||
this.currentEcgIndex = 0 // 重置心电图索引
|
||||
this.ecgImages = [] // 重置心电图数组
|
||||
},
|
||||
// 新增：发送医生通知方法
|
||||
async sendDoctorNotification() {
|
||||
@ -500,6 +555,45 @@ export default {
|
||||
|
||||
return { times, values }
|
||||
},
|
||||
// 新增：处理心电图图片数组
|
||||
processEcgImages() {
|
||||
this.currentEcgIndex = 0
|
||||
this.ecgImages = []
|
||||
|
||||
if (this.selectedPersonData && this.selectedPersonData.ecgimageurls) {
|
||||
// 检查是否是多个图片URL（数组形式）
|
||||
if (Array.isArray(this.selectedPersonData.ecgimageurls)) {
|
||||
this.ecgImages = this.selectedPersonData.ecgimageurls.filter(url => url && url.trim())
|
||||
}
|
||||
} else if (this.selectedPersonData && this.selectedPersonData.ecgimageurl) {
|
||||
// 兼容旧的字段名 ecgimageurl
|
||||
if (Array.isArray(this.selectedPersonData.ecgimageurl)) {
|
||||
this.ecgImages = this.selectedPersonData.ecgimageurl.filter(url => url && url.trim())
|
||||
} else if (typeof this.selectedPersonData.ecgimageurl === 'string') {
|
||||
// 如果是字符串，可能包含多个URL，用逗号分隔
|
||||
const urls = this.selectedPersonData.ecgimageurl.split(',').map(url => url.trim()).filter(url => url)
|
||||
this.ecgImages = urls.length > 0 ? urls : [this.selectedPersonData.ecgimageurl]
|
||||
}
|
||||
}
|
||||
},
|
||||
// 新增：上一张心电图
|
||||
prevEcgImage() {
|
||||
if (this.currentEcgIndex > 0) {
|
||||
this.currentEcgIndex--
|
||||
}
|
||||
},
|
||||
// 新增：下一张心电图
|
||||
nextEcgImage() {
|
||||
if (this.currentEcgIndex < this.ecgImages.length - 1) {
|
||||
this.currentEcgIndex++
|
||||
}
|
||||
},
|
||||
// 新增：跳转到指定心电图
|
||||
goToEcgImage(index) {
|
||||
if (index >= 0 && index < this.ecgImages.length) {
|
||||
this.currentEcgIndex = index
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -662,9 +756,38 @@ export default {
|
||||
|
||||
.ecg-image-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 300px;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.ecg-pagination-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 0 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.ecg-pagination-info {
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.ecg-pagination-controls {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.ecg-image-display {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ecg-image {
|
||||
@ -672,6 +795,62 @@ export default {
|
||||
max-height: 400px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0,0,0,0.08);
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.ecg-image:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.ecg-thumbnails {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
margin-top: 15px;
|
||||
flex-wrap: wrap;
|
||||
max-width: 100%;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.ecg-thumbnail {
|
||||
position: relative;
|
||||
width: 80px;
|
||||
height: 60px;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
border: 2px solid transparent;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.ecg-thumbnail:hover {
|
||||
border-color: #409EFF;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 8px rgba(64, 158, 255, 0.3);
|
||||
}
|
||||
|
||||
.ecg-thumbnail.active {
|
||||
border-color: #409EFF;
|
||||
box-shadow: 0 2px 8px rgba(64, 158, 255, 0.4);
|
||||
}
|
||||
|
||||
.thumbnail-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.thumbnail-index {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
padding: 2px 4px;
|
||||
border-radius: 3px;
|
||||
min-width: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.no-ecg-image {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user