|
@@ -115,20 +115,14 @@
|
|
|
</template>
|
|
</template>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
- <!-- 图片弹窗 -->
|
|
|
|
|
- <popup v-model:show="showImagePopup" class="image-popup" z-index="9999" teleport="body">
|
|
|
|
|
- <album-carousel class="popup-content" :key="imageList?.length" labelText="" :imgData="currentImageData"
|
|
|
|
|
- :images="imageList" :imgType="imgType" disableClick></album-carousel>
|
|
|
|
|
- </popup>
|
|
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script setup>
|
|
<script setup>
|
|
|
import { ref, nextTick, watch, onMounted, onUnmounted, computed } from "vue";
|
|
import { ref, nextTick, watch, onMounted, onUnmounted, computed } from "vue";
|
|
|
import { useRouter } from "vue-router";
|
|
import { useRouter } from "vue-router";
|
|
|
import { ElMessage } from "element-plus";
|
|
import { ElMessage } from "element-plus";
|
|
|
-import { Empty, Popup } from "vant";
|
|
|
|
|
|
|
+import { Empty, showImagePreview } from "vant";
|
|
|
import { base_img_url2 } from "@/api/config";
|
|
import { base_img_url2 } from "@/api/config";
|
|
|
-import AlbumCarousel from "@/components/album_compoents/albumCarousel";
|
|
|
|
|
|
|
|
|
|
const router = useRouter();
|
|
const router = useRouter();
|
|
|
|
|
|
|
@@ -221,8 +215,6 @@ const uniqueTimestamp = ref(Date.now());
|
|
|
let resizeObserver = null;
|
|
let resizeObserver = null;
|
|
|
// 标记是否为空数据
|
|
// 标记是否为空数据
|
|
|
const isEmpty = ref(false);
|
|
const isEmpty = ref(false);
|
|
|
-// 控制图片弹窗显示/隐藏
|
|
|
|
|
-const showImagePopup = ref(false);
|
|
|
|
|
// 标记是否正在请求数据,防止重复请求
|
|
// 标记是否正在请求数据,防止重复请求
|
|
|
const isRequesting = ref(false);
|
|
const isRequesting = ref(false);
|
|
|
// 记录上一次请求的 farmId,避免相同 farmId 重复请求
|
|
// 记录上一次请求的 farmId,避免相同 farmId 重复请求
|
|
@@ -330,28 +322,38 @@ const fetchImageUrls = async (params) => {
|
|
|
}
|
|
}
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
-// 点击图片
|
|
|
|
|
-const imgType = ref('');
|
|
|
|
|
-const imageList = ref([]);
|
|
|
|
|
-const currentImageData = ref({});
|
|
|
|
|
-const handleImageClick = (fw) => {
|
|
|
|
|
- if (fw.sourceType !== 7) {
|
|
|
|
|
- imgType.value = fw.sourceDataJson.resFilename?.[0]?.source || '';
|
|
|
|
|
- imageList.value = fw.sourceDataJson.resFilename || [];
|
|
|
|
|
- } else {
|
|
|
|
|
- imgType.value = '';
|
|
|
|
|
- imageList.value = fw.sourceDataJson.executeImageUrls || [];
|
|
|
|
|
- }
|
|
|
|
|
- currentImageData.value = {
|
|
|
|
|
- ...fw,
|
|
|
|
|
- executeName: fw.sourceDataJson.executorName,
|
|
|
|
|
- executeDate: formatDate(fw.updateTime),
|
|
|
|
|
- farmName: fw.sourceDataJson.farmName,
|
|
|
|
|
- prescriptionList: fw.sourceDataJson.pesticideFertilizerNames,
|
|
|
|
|
- farmWorkName: fw.sourceDataJson.farmWorkName,
|
|
|
|
|
- droneDate: formatDateToYYMMDD(fw.updateTime)
|
|
|
|
|
|
|
+// 与 albumCarouselItem.getPhotoSrc 一致:拼 CDN 前缀;无水印预览用 Vant ImagePreview
|
|
|
|
|
+const resolveFarmWorkImagePath = (photo) => {
|
|
|
|
|
+ if (photo == null) return "";
|
|
|
|
|
+ if (typeof photo === "string") return photo;
|
|
|
|
|
+ return photo.cloudFilename || photo.filename || "";
|
|
|
|
|
+};
|
|
|
|
|
+
|
|
|
|
|
+const buildFarmWorkPreviewUrls = (fw) => {
|
|
|
|
|
+ const sd = fw?.sourceDataJson;
|
|
|
|
|
+ if (!sd) return [];
|
|
|
|
|
+ const toFullUrl = (path) => {
|
|
|
|
|
+ if (!path) return "";
|
|
|
|
|
+ if (/^https?:\/\//i.test(path)) return path;
|
|
|
|
|
+ return base_img_url2 + path;
|
|
|
};
|
|
};
|
|
|
- showImagePopup.value = true;
|
|
|
|
|
|
|
+ if (fw.sourceType === 7) {
|
|
|
|
|
+ const arr = sd.executeImageUrls || [];
|
|
|
|
|
+ return arr.map((p) => toFullUrl(resolveFarmWorkImagePath(p))).filter(Boolean);
|
|
|
|
|
+ }
|
|
|
|
|
+ const arr = sd.resFilename || [];
|
|
|
|
|
+ return arr.map((p) => toFullUrl(resolveFarmWorkImagePath(p))).filter(Boolean);
|
|
|
|
|
+};
|
|
|
|
|
+
|
|
|
|
|
+const handleImageClick = (fw) => {
|
|
|
|
|
+ const images = buildFarmWorkPreviewUrls(fw);
|
|
|
|
|
+ if (!images.length) return;
|
|
|
|
|
+ showImagePreview({
|
|
|
|
|
+ images,
|
|
|
|
|
+ startPosition: 0,
|
|
|
|
|
+ closeable: true,
|
|
|
|
|
+ showIndex: true,
|
|
|
|
|
+ });
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
// 顶部物候标题:相邻两段 phenologyName 相同时只显示一次(保留第一段)
|
|
// 顶部物候标题:相邻两段 phenologyName 相同时只显示一次(保留第一段)
|
|
@@ -806,19 +808,9 @@ watch(
|
|
|
|
|
|
|
|
const handleStatusDetail = (fw) => {
|
|
const handleStatusDetail = (fw) => {
|
|
|
router.push({
|
|
router.push({
|
|
|
- path: "/work_detail",
|
|
|
|
|
- query: { farmWorkLibId: fw.farmWorkLibId, farmId: props.farmId },
|
|
|
|
|
- })
|
|
|
|
|
- // router.push({
|
|
|
|
|
- // path: props.pageType === 'agri_plan' ? "/agricultural_detail" : "/status_detail",
|
|
|
|
|
- // query: { farmId: props.farmId, regionId: props.regionId,date: fw.createTime.slice(0,10) },
|
|
|
|
|
- // });
|
|
|
|
|
- // if (props.pageType === 'agri_record') {
|
|
|
|
|
- // router.push({
|
|
|
|
|
- // path: "/status_detail",
|
|
|
|
|
- // query: { miniJson: JSON.stringify({ farmWorkLibId: fw.farmWorkLibId, farmWorkRecordId: fw.farmWorkRecordId, farmId: props.farmId }) },
|
|
|
|
|
- // });
|
|
|
|
|
- // }
|
|
|
|
|
|
|
+ path: props.pageType === 'agri_plan' ? "/agricultural_detail" : "/work_detail",
|
|
|
|
|
+ query: { farmId: props.farmId, regionId: props.regionId,date: fw?.createTime?.slice(0,10),farmWorkLibId: fw?.farmWorkLibId },
|
|
|
|
|
+ });
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
// 格式化日期为 MM-DD 格式
|
|
// 格式化日期为 MM-DD 格式
|
|
@@ -842,17 +834,6 @@ const formatDateForAPI = (dateStr) => {
|
|
|
return `${y}-${m}-${d}`;
|
|
return `${y}-${m}-${d}`;
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
-// 格式化日期为 YYMMDD 格式(如:260110,26为年份,01为月份,10为日)
|
|
|
|
|
-const formatDateToYYMMDD = (dateStr) => {
|
|
|
|
|
- if (!dateStr) return "";
|
|
|
|
|
- const date = new Date(dateStr);
|
|
|
|
|
- if (Number.isNaN(date.getTime())) return "";
|
|
|
|
|
- const y = `${date.getFullYear()}`.substring(2); // 获取后两位年份,如 2026 -> 26
|
|
|
|
|
- const m = `${date.getMonth() + 1}`.padStart(2, "0");
|
|
|
|
|
- const d = `${date.getDate()}`.padStart(2, "0");
|
|
|
|
|
- return `${y}${m}${d}`;
|
|
|
|
|
-};
|
|
|
|
|
-
|
|
|
|
|
// 获取下一个即将到来的节气(当前节气)的 progress
|
|
// 获取下一个即将到来的节气(当前节气)的 progress
|
|
|
const getNextTermProgress = () => {
|
|
const getNextTermProgress = () => {
|
|
|
if (!solarTerms.value || solarTerms.value.length === 0) return Infinity;
|
|
if (!solarTerms.value || solarTerms.value.length === 0) return Infinity;
|
|
@@ -1410,14 +1391,3 @@ watch(
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
</style>
|
|
</style>
|
|
|
-
|
|
|
|
|
-<style lang="scss" scoped>
|
|
|
|
|
-.image-popup {
|
|
|
|
|
- width: 327px;
|
|
|
|
|
- border-radius: 8px;
|
|
|
|
|
-
|
|
|
|
|
- .popup-content {
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- }
|
|
|
|
|
-}
|
|
|
|
|
-</style>
|
|
|