增强观测视图中的图像预览功能

- 使用 ElImageViewer 实现高级图像预览
- 为表格和详细信息视图中的图像添加了单击预览功能
- 通过悬停效果和响应式样式改进图像显示
- 支持带索引跟踪的多图像预览
- 为没有图像的观测点添加回退文本

src/views/monitor/observations/index.vue

@@ -4,6 +4,7 @@ import { ElMessage, ElMessageBox } from 'element-plus'
 import { getObservationList, reviewObservation, deleteObservation } from '@/api/monitor/observation'
 import { formatDateTime } from '@/utils/format'
 import { sortArrayByField } from '@/utils/sort'
+import { ElImageViewer } from 'element-plus'
 
 // 查询参数
 const queryParams = reactive({
@@ -26,7 +27,8 @@ const speciesList = ref([
 
 // 图片预览
 const picturePreviewVisible = ref(false)
-const picturePreviewUrl = ref('')
+const picturePreviewUrls = ref([])
+const picturePreviewIndex = ref(0)
 
 // 查看表单
 const viewDialogVisible = ref(false)
@@ -201,6 +203,18 @@ const submitReview = async () => {
   }
 }
 
+// 处理图片预览
+const handlePreviewImage = (url, urls) => {
+  picturePreviewUrls.value = urls
+  picturePreviewIndex.value = urls.indexOf(url)
+  picturePreviewVisible.value = true
+}
+
+// 关闭图片预览
+const closePreview = () => {
+  picturePreviewVisible.value = false
+}
+
 onMounted(() => {
   getList()
 })
@@ -259,10 +273,12 @@ onMounted(() => {
             <el-image
               v-if="row.image_urls && row.image_urls.length > 0"
               :src="row.image_urls[0]"
-              :preview-src-list="row.image_urls"
+              class="preview-image"
               fit="cover"
               style="width: 50px; height: 50px"
+              @click="handlePreviewImage(row.image_urls[0], row.image_urls)"
             />
+            <span v-else class="text-gray-500">暂无图片</span>
           </template>
         </el-table-column>
         <el-table-column label="位置" width="150" show-overflow-tooltip align="center">
@@ -350,15 +366,18 @@ onMounted(() => {
           <div>审核意见: {{ viewForm.review_comment }}</div>
           <div>审核时间: {{ formatDateTime(viewForm.review_time) }}</div>
         </el-descriptions-item>
-        <el-descriptions-item label="图片" :span="2" v-if="viewForm.image_urls && viewForm.image_urls.length > 0">
-          <el-image
-            v-for="(url, index) in viewForm.image_urls"
-            :key="index"
-            :src="url"
-            :preview-src-list="viewForm.image_urls"
-            fit="cover"
-            style="width: 100px; height: 100px; margin-right: 10px"
-          />
+        <el-descriptions-item label="图片记录" :span="2">
+          <div class="image-list">
+            <el-image
+              v-for="(url, index) in viewForm.image_urls"
+              :key="index"
+              :src="url"
+              class="preview-image"
+              fit="cover"
+              style="width: 100px; height: 100px; margin-right: 10px; margin-bottom: 10px"
+              @click="handlePreviewImage(url, viewForm.image_urls)"
+            />
+          </div>
         </el-descriptions-item>
         <el-descriptions-item label="视频" :span="2" v-if="viewForm.video_urls && viewForm.video_urls.length > 0">
           <video
@@ -392,15 +411,18 @@ onMounted(() => {
         <el-descriptions-item label="天气">{{ reviewForm.weather }}</el-descriptions-item>
         <el-descriptions-item label="温度">{{ reviewForm.temperature }}°C</el-descriptions-item>
         <el-descriptions-item label="记录内容" :span="2">{{ reviewForm.content }}</el-descriptions-item>
-        <el-descriptions-item label="图片" :span="2" v-if="reviewForm.image_urls && reviewForm.image_urls.length > 0">
-          <el-image
-            v-for="(url, index) in reviewForm.image_urls"
-            :key="index"
-            :src="url"
-            :preview-src-list="reviewForm.image_urls"
-            fit="cover"
-            style="width: 100px; height: 100px; margin-right: 10px"
-          />
+        <el-descriptions-item label="图片记录" :span="2">
+          <div class="image-list">
+            <el-image
+              v-for="(url, index) in reviewForm.image_urls"
+              :key="index"
+              :src="url"
+              class="preview-image"
+              fit="cover"
+              style="width: 100px; height: 100px; margin-right: 10px; margin-bottom: 10px"
+              @click="handlePreviewImage(url, reviewForm.image_urls)"
+            />
+          </div>
         </el-descriptions-item>
         <el-descriptions-item label="视频" :span="2" v-if="reviewForm.video_urls && reviewForm.video_urls.length > 0">
           <video
@@ -437,43 +459,105 @@ onMounted(() => {
       </template>
     </el-dialog>
 
-    <!-- 图片预览 -->
-    <el-dialog v-model="picturePreviewVisible" append-to-body>
-      <img w-full :src="picturePreviewUrl" alt="Preview Image" />
-    </el-dialog>
+    <!-- 图片预览组件 -->
+    <div v-if="picturePreviewVisible" class="preview-container">
+      <el-image-viewer
+        v-if="picturePreviewUrls.length"
+        :initial-index="picturePreviewIndex"
+        :url-list="picturePreviewUrls"
+        @close="closePreview"
+      />
+    </div>
   </div>
 </template>
 
-<style scoped>
-.filter-container {
-  margin-bottom: 20px;
-}
+<style lang="scss" scoped>
+.app-container {
+  padding: 20px;
 
-.list-container {
-  margin-top: 20px;
-  margin-bottom: 60px;
-}
+  .filter-container {
+    margin-bottom: 20px;
+  }
 
-.dialog-footer {
-  text-align: right;
-}
+  .list-container {
+    .preview-image {
+      cursor: pointer;
+      border-radius: 4px;
+      transition: all 0.3s;
 
-.fixed-pagination {
-  position: fixed;
-  right: 20px;
-  bottom: 20px;
-  padding: 10px 20px;
-  background-color: white;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-  border-radius: 4px;
-  z-index: 1000;
-}
+      &:hover {
+        transform: scale(1.05);
+        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+      }
+    }
+  }
 
-.text-center {
-  text-align: center;
-}
+  :deep(.el-dialog__wrapper) {
+    .el-dialog {
+      background: transparent;
+      box-shadow: none;
 
-.text-gray-500 {
-  color: #909399;
+      .el-dialog__header,
+      .el-dialog__body {
+        padding: 0;
+        background: transparent;
+      }
+    }
+  }
+
+  :deep(.el-image-viewer__wrapper) {
+    .el-image-viewer__btn {
+      color: #fff;
+
+      &:hover {
+        color: #409EFF;
+      }
+    }
+
+    .el-image-viewer__actions {
+      opacity: 0.9;
+
+      &__inner {
+        padding: 8px 16px;
+      }
+    }
+
+    .el-image-viewer__img {
+      background-color: transparent;
+    }
+
+    .el-image-viewer__close {
+      top: 20px;
+      right: 20px;
+      width: 40px;
+      height: 40px;
+      font-size: 24px;
+      color: #fff;
+      background-color: rgba(0, 0, 0, 0.5);
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &:hover {
+        background-color: #409EFF;
+      }
+    }
+  }
+
+  .image-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+  }
+
+  .preview-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 2000;
+  }
 }
 </style>