From 91fe36aa576553c280ab0e6c6d7e735cfd97cd02 Mon Sep 17 00:00:00 2001
From: Flow <958079825@qq.com>
Date: Tue, 26 Aug 2025 14:24:11 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=BF=83=E7=94=B5=E5=9B=BE?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=EF=BC=8C=E5=A4=9A=E5=BC=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Device_Data_Components/ECG_datas.vue      | 195 +++++++++++++++++-
 1 file changed, 187 insertions(+), 8 deletions(-)

diff --git a/src/views/devices/Device_Data_Components/ECG_datas.vue b/src/views/devices/Device_Data_Components/ECG_datas.vue
index fe1c32de7..57d10fa5d 100644
--- a/src/views/devices/Device_Data_Components/ECG_datas.vue
+++ b/src/views/devices/Device_Data_Components/ECG_datas.vue
@@ -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 {