|
|
@@ -32,15 +32,19 @@
|
|
|
{{ recordItemData.reCheckText || '暂无复核成效' }}
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="review-image" v-if="recordItemData.beforeImage || recordItemData.afterImage">
|
|
|
- <div class="image-wrapper" v-if="recordItemData.beforeImage">
|
|
|
+ <div class="review-image">
|
|
|
+ <!-- <div class="image-wrapper" v-if="recordItemData.beforeImage">
|
|
|
<span class="image-label">农事前</span>
|
|
|
<img :src="recordItemData.beforeImage" alt="" />
|
|
|
+ </div> -->
|
|
|
+ <div class="image-wrapper">
|
|
|
+ <span class="image-label">农事前</span>
|
|
|
+ <img :src="currentImageUrl" alt="" />
|
|
|
</div>
|
|
|
- <div class="image-wrapper" v-if="recordItemData.afterImage">
|
|
|
+ <!-- <div class="image-wrapper" v-if="recordItemData.afterImage">
|
|
|
<span class="image-label">农事后</span>
|
|
|
<img :src="recordItemData.afterImage" alt="" />
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -138,6 +142,8 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
+import { ref, computed, watch } from 'vue';
|
|
|
+import { base_img_url2 } from '@/api/config';
|
|
|
const props = defineProps({
|
|
|
onlyRecipeName: {
|
|
|
type: Boolean,
|
|
|
@@ -197,6 +203,63 @@ const getFarmTypeText = (type) => {
|
|
|
if (value === 2 || value === "2") return "建议农事";
|
|
|
return "";
|
|
|
};
|
|
|
+
|
|
|
+// 使用响应式对象存储图片 URL
|
|
|
+const imageUrlMap = ref({});
|
|
|
+// 存储正在加载的 ID,避免重复请求
|
|
|
+const loadingIds = ref(new Set());
|
|
|
+
|
|
|
+// 获取图片 URL 的函数
|
|
|
+const fetchImageUrl = (id) => {
|
|
|
+ // 如果 id 不存在或已经在加载中,直接返回
|
|
|
+ if (!id || loadingIds.value.has(id)) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 如果已经有缓存的 URL,直接返回
|
|
|
+ if (imageUrlMap.value[id]) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 标记为加载中
|
|
|
+ loadingIds.value.add(id);
|
|
|
+
|
|
|
+ // 发起异步请求获取图片 URL
|
|
|
+ VE_API.z_farm_work_record.getTriggerImg({ farmWorkRecordId: id }).then(({ data }) => {
|
|
|
+ if(data && data.length > 0){
|
|
|
+ const url = base_img_url2 + data[data.length - 1].cloudFilename;
|
|
|
+ // 更新响应式数据,这样模板会自动更新
|
|
|
+ imageUrlMap.value[id] = url;
|
|
|
+ } else {
|
|
|
+ imageUrlMap.value[id] = '';
|
|
|
+ }
|
|
|
+ }).catch(() => {
|
|
|
+ // 请求失败时,设置为空字符串避免重复请求
|
|
|
+ imageUrlMap.value[id] = '';
|
|
|
+ }).finally(() => {
|
|
|
+ // 清除加载标记
|
|
|
+ loadingIds.value.delete(id);
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+// 计算属性:根据 recordItemData.id 获取图片 URL(响应式)
|
|
|
+const currentImageUrl = computed(() => {
|
|
|
+ const id = props.recordItemData?.id;
|
|
|
+ if (id) {
|
|
|
+ // 触发获取图片 URL(如果还没有获取过)
|
|
|
+ fetchImageUrl(id);
|
|
|
+ // 直接返回响应式数据,Vue 会自动追踪变化
|
|
|
+ return imageUrlMap.value[id] || '';
|
|
|
+ }
|
|
|
+ return '';
|
|
|
+});
|
|
|
+
|
|
|
+// 监听 recordItemData.id 的变化,确保 ID 变化时重新获取
|
|
|
+watch(() => props.recordItemData?.id, (newId) => {
|
|
|
+ if (newId && !imageUrlMap.value[newId] && !loadingIds.value.has(newId)) {
|
|
|
+ fetchImageUrl(newId);
|
|
|
+ }
|
|
|
+}, { immediate: true });
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|