Merge branch 'manage' of http://www.sysuimars.cn:3000/lxf/foster-pc-vue into manage

manage

@@ -1 +0,0 @@
-后台管理系统

src/views/home/album_compoents/albumDrawBox.vue

@@ -1,9 +1,9 @@
 <template>
   <photo-consumer
       class="carousel-item"
-      :src="watermark || base_img_url2 + (photo.resFilename && !name ? photo.resFilename : photo.filename) + resize"
+      :src="watermark || base_img_url3 + (photo.resFilename && !name ? photo.resFilename : photo.filename) + resize"
   >
-    <img v-if="Math.abs(current - index) < 3" crossorigin="anonymous" @load="drawWatermark($event, name)" loading="lazy" :src="watermark || (base_img_url2 + (photo.resFilename && !name ? photo.resFilename : photo.filename) + resize)" style="width: 100%;" />
+    <img v-if="Math.abs(current - index) < 3" crossorigin="anonymous" @load="drawWatermark($event, name)" loading="lazy" :src="watermark || (base_img_url3 + (photo.resFilename && !name ? photo.resFilename : photo.filename) + resize)" style="width: 100%;" />
     <canvas  ref="canvasRef" style="position: absolute;"></canvas>
     <!-- <div class="tag-text" v-if="showTagBox" >
       <span v-html="photo.growText"></span>
@@ -17,7 +17,7 @@
 
 <script setup>
 import { ref, onMounted, onBeforeUnmount, defineProps } from "vue";
-import { base_img_url2 } from "@/api/config";
+import { base_img_url3 } from "@/api/config";
 import {imageCache,loadImage} from "./cacheImg.js"
 import {dateFormat} from "@/utils/date_util.js"
 import {pointToFormat} from "@/utils/util.js"
@@ -75,7 +75,7 @@ async function drawWatermark(event,name) {
   if(!name){
     drawWatermark1(event)
   }else{
-    drawTargetRectangles2(event.target,props.photo.watermarks.find(item=>item.name === name))
+    // drawTargetRectangles2(event.target,props.photo.watermarks.find(item=>item.name === name))
   }
 }
 

src/views/home/components/leftTabs/imgManage.vue

@@ -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>