<template> <!-- 建设施工过程 --> <div class="XiangXiXinXi"> <div class="img" style="margin-top: 20px"> <el-carousel trigger="click" type="card" height="347px" v-if="allImages?.underConstructionFileList.length > 0"> <el-carousel-item v-for="item in allImages?.underConstructionFileList" :key="item"> <el-image class="img_age" preview-teleported :src="item.url" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" :preview-src-list="[item.url]" :initial-index="4" /> </el-carousel-item> </el-carousel> <el-empty :image-size="30" v-else /> </div> </div> </template> <script setup name="XiangXiXinXi"> import { inject } from 'vue'; import { selectProjectImageList } from '@/api/sponeScreen/gcpjApi'; import bus from '@/bus'; const projectData = ref({}); const allImages = ref({}); async function selectProjectImage(p) { let { data } = await selectProjectImageList(p); allImages.value = data[0]; } bus.on('getProjectDate', v => { projectData.value = v; selectProjectImage({ projectNo: v.projectNo }); }); </script> <style lang="scss" scoped> .img_age { width: 500px; height: 347px; } </style>