city-life-line/src/views/subSystem/alarm/AlarmAttachments.vue

<template>
  <div v-if="images.length" class="alarm-attachments">
    <div class="attachment-images">
      <el-image
        v-for="(file, index) in images"
        :key="file.url"
        class="attachment-thumbnail"
        :src="file.url"
        :alt="file.name"
        :title="`点击查看大图：${file.name}`"
        :preview-src-list="previewUrls"
        :initial-index="index"
        preview-teleported
        fit="cover"
        lazy
      >
        <template #placeholder><span class="image-placeholder">加载中…</span></template>
        <template #error><span class="image-placeholder">图片加载失败</span></template>
      </el-image>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { imageAttachments } from './common/utils/alarmReviewModel'

const props = defineProps({
  value: { type: String, default: '' },
  baseUrl: { type: String, default: '' }
})
const images = computed(() => imageAttachments(props.value, props.baseUrl))
const previewUrls = computed(() => images.value.map(file => file.url))
</script>

<style scoped>
.alarm-attachments { margin-top: 12px; }
.attachment-images { display: flex; flex-wrap: wrap; gap: 10px; }
.attachment-thumbnail { width: 96px; height: 72px; flex: 0 0 96px; border: 1px solid #e4e7ed; border-radius: 4px; background: #fff; cursor: zoom-in; }
.attachment-thumbnail:hover { border-color: var(--el-color-primary); }
.image-placeholder { display: flex; align-items: center; justify-content: center; height: 100%; color: #909399; font-size: 12px; }
</style>