Real-time-monitoring-frontend/src/views/teacher/teacherStatistics/components/vue-xq-test/vue-img.vue

<template>
  <div class="main-img">
    <div v-if="!imgUrl" class="no-img">
      <el-icon :size="200" class="no-img-icon">
        <Picture />
      </el-icon>
    </div>

    <!-- style="max-width: 300px" -->
    <div class="img-container" v-if="imgUrl">
      <img v-if="imgUrl" draggable="false" class="display-img" :src="imgUrl" />
      <!-- 等比缩放 -->
      <!-- <el-image :src="imgUrl" draggable="false" :preview-src-list="[]" /> -->
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch } from 'vue';
import emitter from '@/views/teacher/teacherStatistics/utils/emitter';
import { Picture } from '@element-plus/icons-vue';
import { modelApi, BASE_URL } from '@/views/teacher/teacherStatistics/utils/request';
import { formatFilePath } from '@/views/teacher/teacherStatistics/utils/dataFormatter';

// const displayImageUrl = ref<string | null>(null);
const displayImageUrl = ref<string>();

const props = defineProps({
  definitionItemJson: {
    type: Object,
    default: () => ({})
  },
  moduleId: {
    type: String,
    default: ''
  }
});

console.log('父传子1：', props.definitionItemJson.id);

watch(
  () => props.moduleId,
  (newVal, oldVal) => {
    console.log('moduleId:', newVal, oldVal);
    loadFileList(newVal);
  }
);

let imgUrl = ref<string>();

// 获取文件列表
async function loadFileList(fileId: string) {
  let endJson = {
    id: fileId
  };
  const response = await modelApi.fileStorage_file_list_post(endJson);
  if (!response.data) {
    return;
  }
  response.data.list.forEach((value: any) => {
    imgUrl.value = formatFilePath(BASE_URL, value.filePath);
  });
  console.log('imgUrl:', imgUrl);
}

emitter.on('imgUpload:' + props.definitionItemJson.id, (uploadFile) => {
  console.log('imgUpload:', uploadFile);
  displayImageUrl.value = uploadFile as string;
});

onUnmounted(() => {
  console.log('组件卸载');
});

// 页面加载
onMounted(() => {
  loadFileList(props.moduleId);
});
</script>

<style scoped>
.main-img {
  width: 100%;
  height: 100%;
}
.no-img {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.no-img-icon {
  width: 100%;
  height: 100%;
  color: #409efc;
}

.img-container {
  width: 100%;
  height: 100%;
}

.display-img {
  width: 100%;
  height: 100%;
  /* max-width: 300px; */
}
</style>