|
|
@@ -16,65 +16,62 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="photo-wrap">
|
|
|
- <div class="photo-list">
|
|
|
- <div class="photo-item">
|
|
|
+ <List
|
|
|
+ class="photo-list"
|
|
|
+ v-model:loading="loading"
|
|
|
+ :finished="finished"
|
|
|
+ :immediate-check="false"
|
|
|
+ finished-text="没有更多了"
|
|
|
+ @load="getPhotoList"
|
|
|
+ >
|
|
|
+ <div class="photo-item" v-for="(dateItem, dateIndex) in photoListByDate" :key="dateIndex">
|
|
|
<div class="photo-item-top">
|
|
|
- <span class="date-text">2024年7月2日</span>
|
|
|
+ <span class="date-text">{{ dateItem.dateText }}</span>
|
|
|
<div class="weather-wrap">
|
|
|
<div class="weather-item">
|
|
|
- <el-icon><Sunny /></el-icon>
|
|
|
- <span>晴</span>
|
|
|
+ <i :class="'qi-'+ dateItem.weather.iconDay + '-fill'"></i>
|
|
|
+ <span>{{ dateItem.weather.textDay }}</span>
|
|
|
</div>
|
|
|
<div class="weather-item">
|
|
|
- <el-icon><Sunny /></el-icon>
|
|
|
- <span>36℃</span>
|
|
|
+ <img src="@/assets/img/home/temperature.png" alt="">
|
|
|
+ <span>{{ dateItem.weather.tempMax }}℃</span>
|
|
|
</div>
|
|
|
<div class="weather-item">
|
|
|
- <el-icon><Sunny /></el-icon>
|
|
|
- <span>74%</span>
|
|
|
+ <img src="@/assets/img/home/humidity.png" alt="">
|
|
|
+ <span>{{ dateItem.weather.humidity }}%</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="photo-item-bottom">
|
|
|
- <div class="region-text">2区</div>
|
|
|
- <div class="photo-img-wrap">
|
|
|
- 456
|
|
|
- </div>
|
|
|
+ <div class="photo-img-wrap">
|
|
|
+ <photo-provider :photo-closable="true">
|
|
|
+ <photo-consumer
|
|
|
+ v-for="src in dateItem.images"
|
|
|
+ intro="执行照片"
|
|
|
+ :key="src"
|
|
|
+ :src="src.path"
|
|
|
+ >
|
|
|
+ <div class="photo-img">
|
|
|
+ <img :src="src.path" />
|
|
|
+ </div>
|
|
|
+ </photo-consumer>
|
|
|
+ </photo-provider>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <!-- <List
|
|
|
- class="photo-list"
|
|
|
- v-model:loading="loading"
|
|
|
- :finished="finished"
|
|
|
- finished-text="没有更多了"
|
|
|
- @load="getPhotoList"
|
|
|
- >
|
|
|
- <div class="photo-item" v-for="(item, index) in treeImgList" :key="index">
|
|
|
- <album-carousel-item
|
|
|
- :key="index"
|
|
|
- :farmId="farmOrganId"
|
|
|
- :images="[item]"
|
|
|
- :lock="false"
|
|
|
- :isShowNum="false"
|
|
|
- ></album-carousel-item>
|
|
|
- </div>
|
|
|
- </List> -->
|
|
|
+ </List>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { onActivated, ref } from "vue";
|
|
|
-import { useRouter } from "vue-router";
|
|
|
+import { ref, onMounted, nextTick } from "vue";
|
|
|
+import { useRouter, useRoute } from "vue-router";
|
|
|
import { List } from "vant";
|
|
|
-// import albumCarouselItem from "@/views/old_mini/feature_index/pages/album_compoents/albumCarouselItem.vue";
|
|
|
import { base_img_url2, resize } from "@/api/config";
|
|
|
import customHeader from "@/components/customHeader.vue";
|
|
|
|
|
|
const router = useRouter();
|
|
|
-
|
|
|
+const route = useRoute();
|
|
|
const tabActive = ref(0);
|
|
|
const tabsList = ["物候", "病虫", "生长"];
|
|
|
const handleTabAct = (index) => {
|
|
|
@@ -83,47 +80,189 @@ const handleTabAct = (index) => {
|
|
|
|
|
|
const value1 = ref("");
|
|
|
|
|
|
-const treeImgList = ref([]);
|
|
|
+// 按日期分组的图片列表
|
|
|
+const photoListByDate = ref([]);
|
|
|
const loading = ref(false);
|
|
|
const finished = ref(false);
|
|
|
-const curPage = ref(1);
|
|
|
-const farmOrganId = ref(766);
|
|
|
-const getPhotoList = () => {
|
|
|
+// 日期列表
|
|
|
+const dateList = ref([]);
|
|
|
+// 当前加载的日期索引
|
|
|
+const currentDateIndex = ref(0);
|
|
|
+// 是否正在加载日期列表
|
|
|
+const isLoadingDates = ref(false);
|
|
|
+// 是否正在请求图片数据（独立标志，避免与 List 组件的 loading 冲突）
|
|
|
+const isRequestingImages = ref(false);
|
|
|
+// 当前页码
|
|
|
+const currentPageIndex = ref(0);
|
|
|
+const farmId = ref(766);
|
|
|
+
|
|
|
+// 格式化日期显示
|
|
|
+const formatDate = (dateStr) => {
|
|
|
+ if (!dateStr) return "";
|
|
|
+ const date = new Date(dateStr);
|
|
|
+ const year = date.getFullYear();
|
|
|
+ const month = date.getMonth() + 1;
|
|
|
+ const day = date.getDate();
|
|
|
+ return `${year}年${month}月${day}日`;
|
|
|
+};
|
|
|
+
|
|
|
+// 获取有图片的日期列表
|
|
|
+const findHasImagesDate = (isLoadMore = false) => {
|
|
|
+ if (isLoadingDates.value) return Promise.resolve();
|
|
|
+
|
|
|
+ isLoadingDates.value = true;
|
|
|
const params = {
|
|
|
- organId: farmOrganId.value,
|
|
|
- regionId: sessionStorage.getItem("select:areaId"),
|
|
|
- page: curPage.value,
|
|
|
- limit: 21,
|
|
|
+ farmId: farmId.value,
|
|
|
+ pageIndex: currentPageIndex.value,
|
|
|
+ limit: 10,
|
|
|
};
|
|
|
- VE_API.garden.getTreeImg(params).then(({ data, count }) => {
|
|
|
- let photoArr = [];
|
|
|
- data.forEach((item) => {
|
|
|
- photoArr.push({
|
|
|
- ...item,
|
|
|
- path: base_img_url2 + (item.resFilename || item.filename) + "?x-oss-process=image/resize,w_300",
|
|
|
- });
|
|
|
+ return VE_API.farm
|
|
|
+ .findHasImagesDate(params)
|
|
|
+ .then(({ data }) => {
|
|
|
+ if (data && Array.isArray(data) && data.length > 0) {
|
|
|
+ if (isLoadMore) {
|
|
|
+ // 如果是加载更多，追加到现有日期列表
|
|
|
+ dateList.value = [...dateList.value, ...data];
|
|
|
+ } else {
|
|
|
+ // 首次加载，重置日期列表
|
|
|
+ dateList.value = data;
|
|
|
+ currentDateIndex.value = 0;
|
|
|
+ currentPageIndex.value = 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ finished.value = false;
|
|
|
+ loading.value = false;
|
|
|
+ isLoadingDates.value = false;
|
|
|
+
|
|
|
+ // 如果是首次加载，等待 List 组件触发加载
|
|
|
+ if (!isLoadMore && data.length > 0) {
|
|
|
+ loading.value = false;
|
|
|
+ finished.value = false;
|
|
|
+ isRequestingImages.value = false;
|
|
|
+ // 使用 nextTick 确保 DOM 更新后，List 组件能检测到需要加载
|
|
|
+ nextTick(() => {
|
|
|
+ if (!finished.value && currentDateIndex.value < dateList.value.length) {
|
|
|
+ getPhotoList();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 没有更多日期了
|
|
|
+ finished.value = true;
|
|
|
+ isLoadingDates.value = false;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((error) => {
|
|
|
+ console.error("findHasImagesDate 请求失败:", error);
|
|
|
+ isLoadingDates.value = false;
|
|
|
+ finished.value = true;
|
|
|
});
|
|
|
- treeImgList.value.push(...photoArr);
|
|
|
+};
|
|
|
+
|
|
|
+// 加载下一个日期的图片
|
|
|
+const loadNextDateImages = () => {
|
|
|
+ // 如果已经加载完所有日期，尝试加载更多日期
|
|
|
+ if (currentDateIndex.value >= dateList.value.length) {
|
|
|
+ // 不是直接设置 finished，而是尝试获取更多日期
|
|
|
+ loadMoreDates();
|
|
|
+ return;
|
|
|
+ }
|
|
|
|
|
|
- // 加载状态结束
|
|
|
- loading.value = false;
|
|
|
- curPage.value = curPage.value + 1;
|
|
|
+ // 如果已经标记为完成，直接返回
|
|
|
+ if (finished.value) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
|
|
|
- // 数据全部加载完成
|
|
|
- if (treeImgList.value.length >= count) {
|
|
|
- finished.value = true;
|
|
|
+ // 如果正在请求，直接返回（避免重复请求）
|
|
|
+ if (isRequestingImages.value) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 设置请求标志和 loading 状态
|
|
|
+ isRequestingImages.value = true;
|
|
|
+ loading.value = true;
|
|
|
+ const currentDate = dateList.value[currentDateIndex.value];
|
|
|
+
|
|
|
+ const params = {
|
|
|
+ farmId: farmId.value,
|
|
|
+ // farmId: route.query.farmId,
|
|
|
+ date: currentDate,
|
|
|
+ };
|
|
|
+
|
|
|
+ VE_API.farm
|
|
|
+ .getImageInfo(params)
|
|
|
+ .then(({ data }) => {
|
|
|
+ if (data.images.length > 0) {
|
|
|
+ // 处理图片数据，添加图片路径
|
|
|
+ const photoArr = data.images.map((item) => ({
|
|
|
+ ...item,
|
|
|
+ path: base_img_url2 + (item.resFilename || item.filename) + "?x-oss-process=image/resize,w_300",
|
|
|
+ }));
|
|
|
+
|
|
|
+ // 将当前日期的图片数据添加到列表中
|
|
|
+ photoListByDate.value.push({
|
|
|
+ date: currentDate,
|
|
|
+ dateText: formatDate(currentDate),
|
|
|
+ images: photoArr,
|
|
|
+ weather: data.weather,
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 移动到下一个日期
|
|
|
+ currentDateIndex.value++;
|
|
|
+ })
|
|
|
+ .catch((error) => {
|
|
|
+ console.error("获取图片失败:", error);
|
|
|
+ // 请求失败时也移动到下一个日期，避免卡住
|
|
|
+ currentDateIndex.value++;
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ // 使用 finally 确保状态总是被重置
|
|
|
+ isRequestingImages.value = false;
|
|
|
+ loading.value = false;
|
|
|
+
|
|
|
+ // 检查是否还有更多日期需要加载
|
|
|
+ if (currentDateIndex.value >= dateList.value.length) {
|
|
|
+ // 当前日期列表已加载完，尝试加载更多日期
|
|
|
+ loadMoreDates();
|
|
|
+ }
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+// 加载更多日期
|
|
|
+const loadMoreDates = () => {
|
|
|
+ if (isLoadingDates.value || finished.value) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // pageIndex + 1，获取下一页日期
|
|
|
+ currentPageIndex.value++;
|
|
|
+ loading.value = true;
|
|
|
+
|
|
|
+ findHasImagesDate(true).then(() => {
|
|
|
+ // 如果获取到新日期，继续加载图片
|
|
|
+ if (currentDateIndex.value < dateList.value.length) {
|
|
|
+ loadNextDateImages();
|
|
|
}
|
|
|
});
|
|
|
};
|
|
|
|
|
|
-onActivated(() => {
|
|
|
- // treeImgList.value = [];
|
|
|
- // finished.value = false;
|
|
|
- // farmOrganId.value = JSON.parse(localStorage.getItem("gardenItemData")).organId;
|
|
|
- // if (curPage.value !== 1) {
|
|
|
- // curPage.value = 1;
|
|
|
- // // getPhotoList();
|
|
|
- // }
|
|
|
+// 滚动加载触发
|
|
|
+const getPhotoList = () => {
|
|
|
+ // 如果已经完成，直接返回
|
|
|
+ if (finished.value) {
|
|
|
+ loading.value = false; // 确保 loading 状态被重置
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 调用加载函数（loadNextDateImages 内部会检查 loading 状态）
|
|
|
+ loadNextDateImages();
|
|
|
+};
|
|
|
+
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ farmId.value = route.query.farmId;
|
|
|
+ findHasImagesDate();
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
@@ -155,6 +294,7 @@ onActivated(() => {
|
|
|
.photo-header {
|
|
|
display: flex;
|
|
|
width: 100%;
|
|
|
+ margin-bottom: 20px;
|
|
|
.select-wrap {
|
|
|
display: flex;
|
|
|
width: calc(100% - 120px);
|
|
|
@@ -175,68 +315,67 @@ onActivated(() => {
|
|
|
}
|
|
|
.photo-wrap {
|
|
|
width: 100%;
|
|
|
- height: calc(100vh - 135px);
|
|
|
+ height: calc(100vh - 95px);
|
|
|
overflow: auto;
|
|
|
.photo-list {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- height: 100%;
|
|
|
+ width: 100%;
|
|
|
.photo-item {
|
|
|
+ width: 100%;
|
|
|
.photo-item-top {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- margin-top: 16px;
|
|
|
+ margin-bottom: 12px;
|
|
|
.date-text {
|
|
|
font-weight: 500;
|
|
|
- margin-right: 4px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333;
|
|
|
+ margin-right: 20px;
|
|
|
}
|
|
|
- .weather-wrap{
|
|
|
+ .weather-wrap {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- .weather-item{
|
|
|
+ .weather-item {
|
|
|
display: flex;
|
|
|
+ gap: 4px;
|
|
|
align-items: center;
|
|
|
- margin-left: 16px;
|
|
|
+ font-size: 12px;
|
|
|
+ margin-right: 10px;
|
|
|
+ img {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .photo-item-bottom{
|
|
|
- margin-top: 12px;
|
|
|
- .region-text{
|
|
|
- width: 68px;
|
|
|
- text-align: center;
|
|
|
- font-weight: 500;
|
|
|
- padding: 5px 0;
|
|
|
- border-radius: 4px;
|
|
|
- border: 1px solid #BBBBBB;
|
|
|
- }
|
|
|
- .photo-img-wrap{
|
|
|
- margin-top: 8px;
|
|
|
- }
|
|
|
- // width: 31.4%;
|
|
|
- // height: 110px;
|
|
|
- // border-radius: 8px;
|
|
|
- // margin-right: 10px;
|
|
|
- // margin-bottom: 8px;
|
|
|
- // position: relative;
|
|
|
- // ::v-deep {
|
|
|
- // .carousel-container {
|
|
|
- // height: 100%;
|
|
|
- // .carousel-wrapper {
|
|
|
- // height: 100%;
|
|
|
- // .carousel-item {
|
|
|
- // height: 100%;
|
|
|
- // .carousel-item img {
|
|
|
- // height: 100% !important;
|
|
|
- // }
|
|
|
- // }
|
|
|
- // }
|
|
|
- // }
|
|
|
+ .photo-img-wrap {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 10px;
|
|
|
+ // .region-text {
|
|
|
+ // width: 68px;
|
|
|
+ // text-align: center;
|
|
|
+ // font-weight: 500;
|
|
|
+ // font-size: 12px;
|
|
|
+ // padding: 5px 0;
|
|
|
+ // border-radius: 4px;
|
|
|
+ // border: 1px solid #bbbbbb;
|
|
|
+ // color: #666;
|
|
|
+ // margin-bottom: 8px;
|
|
|
// }
|
|
|
+ .photo-img {
|
|
|
+ width: 110px;
|
|
|
+ height: 110px;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 8px;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- .photo-item:nth-of-type(3n) {
|
|
|
- margin-right: 0;
|
|
|
+ .photo-item + .photo-item {
|
|
|
+ margin-top: 20px;
|
|
|
}
|
|
|
}
|
|
|
}
|
