|
@@ -1,13 +1,225 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
-照片管理
|
|
|
+ <div class="img-manage">
|
|
|
+ <div class="select-group">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="dateTime"
|
|
|
+ @change="changeDate"
|
|
|
+ size="large"
|
|
|
+ type="month"
|
|
|
+ format="YYYY年MM月"
|
|
|
+ value-format="YYYY-MM"
|
|
|
+ :style="{ width: activeTab ? '100%' : 'calc(100% - 145px)' }"
|
|
|
+ />
|
|
|
+ <el-select class="select" v-model="value" size="large">
|
|
|
+ <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <img class="fly" src="@/assets/images/home/fly-bg.png" alt="">
|
|
|
+ <div class="photo-list">
|
|
|
+ <div class="photo-item" v-for="(item, index) in imageList" :key="index">
|
|
|
+ <album-carousel-item
|
|
|
+ lbum-carousel-item
|
|
|
+ :key="index"
|
|
|
+ :name="item.code"
|
|
|
+ :farmId="766"
|
|
|
+ :images="[item]"
|
|
|
+ :lock="false"
|
|
|
+ ></album-carousel-item>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
+import { onMounted, onUnmounted, ref } from "vue";
|
|
|
+import albumCarouselItem from "../../album_compoents/albumCarouselItem.vue";
|
|
|
+import config from "@/api/config";
|
|
|
+const resize = "?imageView/1/w/240/h/240";
|
|
|
|
|
|
+function getCurrentMonth() {
|
|
|
+ const now = new Date();
|
|
|
+ const formattedDate = now.toISOString().slice(0, 7);
|
|
|
+ return formattedDate;
|
|
|
+}
|
|
|
+
|
|
|
+const dateTime = ref(getCurrentMonth());
|
|
|
+const changeDate = () => {
|
|
|
+ geImgaeList();
|
|
|
+};
|
|
|
+const value = ref("Option1");
|
|
|
+
|
|
|
+const options = [
|
|
|
+ {
|
|
|
+ value: "Option1",
|
|
|
+ label: "全部区",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "Option2",
|
|
|
+ label: "Option2",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "Option3",
|
|
|
+ label: "Option3",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "Option4",
|
|
|
+ label: "Option4",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "Option5",
|
|
|
+ label: "Option5",
|
|
|
+ },
|
|
|
+];
|
|
|
+
|
|
|
+const imageList = ref([]);
|
|
|
+const geImgaeList = () => {
|
|
|
+ // VE_API.image.imageList({ date: dateTime.value }).then((res) => {
|
|
|
+ let imgsArr = [];
|
|
|
+ const obj = [
|
|
|
+ {
|
|
|
+ address: "",
|
|
|
+ angle: "",
|
|
|
+ baseMap: "",
|
|
|
+ bigPeriodId: null,
|
|
|
+ bigPeriodName: "",
|
|
|
+ blueZoneId: null,
|
|
|
+ detail1: null,
|
|
|
+ detail2: null,
|
|
|
+ district: '"广州市增城区"',
|
|
|
+ gardenId: null,
|
|
|
+ gardenImgCount: null,
|
|
|
+ gardenImgIndex: null,
|
|
|
+ gardenName: "农场2",
|
|
|
+ growText: '当前属于<span style="color: #f8c404">小果</span>,未检测到生长异常<br/>未发现病虫害',
|
|
|
+ id: "710541621225066496",
|
|
|
+ imageCode: null,
|
|
|
+ localPath: "",
|
|
|
+ localResPath: "",
|
|
|
+ location: "POINT (113.740975 23.468493)",
|
|
|
+ markText: "",
|
|
|
+ miniUserId: null,
|
|
|
+ miniUserName: "",
|
|
|
+ modelId: null,
|
|
|
+ pingzhong: "",
|
|
|
+ planId: null,
|
|
|
+ regionId: null,
|
|
|
+ regionImgCount: null,
|
|
|
+ regionImgIndex: null,
|
|
|
+ regionName: "",
|
|
|
+ resFilename: "",
|
|
|
+ shotCode: "",
|
|
|
+ smallPeriodId: null,
|
|
|
+ smallPeriodName: "",
|
|
|
+ source: "app",
|
|
|
+ sourceCode: "",
|
|
|
+ speciesId2: "02-02",
|
|
|
+ status: null,
|
|
|
+ sysId: null,
|
|
|
+ treeGeoHash: "ws0vs0rdjkcd",
|
|
|
+ treeId: 164701,
|
|
|
+ uploadDate: "2025-05-14",
|
|
|
+ watermarks: [],
|
|
|
+ weather: null,
|
|
|
+ workspaceId: "",
|
|
|
+ code: formatDatePart("2505111813_T_WSPM_110.802_21.473"),
|
|
|
+ treeCode:"2505111813_T_WSPM_110.802_21.473",
|
|
|
+ sampleId: "873",
|
|
|
+ filename: "shuichan/DJI_20250511181340_0001_T_code-w7yf1kgwzqhb.JPG",
|
|
|
+ url:'https://birdseye-img.sysuimars.com/shuichan/DJI_20250514163710_0004_T_code-w7ydmzr9ctry.JPG?imageView/1/w/240/h/240'
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ // res.data.map((item) => {
|
|
|
+ // imgsArr.push({ ...obj, uploadDate: formatDatePart(item.code), treeCode: item.code, filename: item.url });
|
|
|
+ // });
|
|
|
+ imageList.value = obj;
|
|
|
+ // });
|
|
|
+};
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ geImgaeList();
|
|
|
+});
|
|
|
+
|
|
|
+// 提取前6位并转换为日期格式
|
|
|
+function formatDatePart(originalStr) {
|
|
|
+ // 提取前6位数字
|
|
|
+ const datePart = originalStr.substring(0, 6);
|
|
|
+
|
|
|
+ // 解析为日期格式
|
|
|
+ const year = "20" + datePart.substring(0, 2); // 前两位是年份,加上20前缀
|
|
|
+ const month = datePart.substring(2, 4); // 中间两位是月份
|
|
|
+ const day = datePart.substring(4, 6); // 最后两位是日
|
|
|
+
|
|
|
+ // 组合成YYYY-MM-DD格式
|
|
|
+ const formattedDate = `${year}-${month}-${day}`;
|
|
|
+ // 返回新字符串(不改变原字符串)
|
|
|
+ return formattedDate;
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-
|
|
|
-</style>
|
|
|
+.img-manage {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ .select-group {
|
|
|
+ display: flex;
|
|
|
+ margin: 10px 0;
|
|
|
+ .select {
|
|
|
+ width: 140px;
|
|
|
+ margin-left: 5px;
|
|
|
+ }
|
|
|
+ // ::v-deep {
|
|
|
+ // .el-select__wrapper {
|
|
|
+ // background: rgba(255, 255, 255, 0.07);
|
|
|
+ // box-shadow: none;
|
|
|
+ // }
|
|
|
+ // .el-select__placeholder,
|
|
|
+ // .el-select__caret,
|
|
|
+ // .el-input__prefix {
|
|
|
+ // color: #fff;
|
|
|
+ // text-align: center;
|
|
|
+ // }
|
|
|
+ // .el-input__wrapper {
|
|
|
+ // background: #323232;
|
|
|
+ // box-shadow: none;
|
|
|
+ // }
|
|
|
+ // .el-input__inner {
|
|
|
+ // color: #fff;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ .fly{
|
|
|
+ width: 100%;
|
|
|
+ height: 70px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ .photo-list {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ overflow: auto;
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 100px);
|
|
|
+ .photo-item {
|
|
|
+ width: calc(50% - 5px);
|
|
|
+ .img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+ ::v-deep {
|
|
|
+ .carousel-item .tag-box.leftTop {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .carousel-item img {
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .photo-item:nth-last-child(2n) {
|
|
|
+ margin-left: 10px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|