foster-pc-vue/src/views/home/components/leftTabs/imgManage.vue

<template>
    <div class="img-manage">
        <div class="select-group">
            <el-date-picker
                class="date-picker"
                v-model="dateTime"
                @change="changeDate"
                size="large"
                type="date"
                format="YYYY年MM月DD日"
                value-format="YYYY-MM-DD"
                :style="{ width: '100%' }"
            />
            <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>
        <div class="fly-box">
            <img class="icon" src="@/assets/images/home/fly-icon.png" alt="" />
            <div class="fly-r">
                <div class="text">
                    <el-icon color="#2199F8" size="20"><WarningFilled /></el-icon>
                    <span>飞鸟提醒 今日是飞巡日，请立即飞巡</span>
                </div>
                <div class="btn">立即巡飞</div>
            </div>
        </div>
        <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, 10);
    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>
.img-manage {
    width: 100%;
    height: 100%;
    .select-group {
        display: flex;
        margin: 10px 0;
        .select {
            width: 140px;
            margin-left: 5px;
        }
        ::v-deep {
            //日历
            .el-input__prefix,.el-input__suffix {
                color: #fff;
                text-align: center;
            }
            .el-input__wrapper {
                background: #2199f8;
                box-shadow: none;
            }
            .el-input__inner {
                color: #fff;
            }
            //下拉框
            .el-select__placeholder,.el-select__caret{
                color: #2199f8;
            }
            .el-select__wrapper {
                box-shadow: none;
                border: 1px solid #2199F8;
            }
        }
    }
    .fly-box {
        margin-bottom: 10px;
        border: 1px solid rgba(33, 153, 248, 0.74);
        border-radius: 5px;
        padding: 7px 10px;
        display: flex;
        align-items: center;
        .icon {
            width: 48px;
            height: 48px;
            margin-right: 10px;
        }
        .fly-r {
            .text {
                display: flex;
                align-items: center;
                color: #000;
                font-weight: 500;
                span {
                    margin-left: 5px;
                }
            }
            .btn {
                margin-top: 6px;
                text-align: center;
                font-size: 12px;
                width: 68px;
                padding: 5px 0;
                border-radius: 5px;
                background: #2199f8;
                font-family: "PangMenZhengDao";
            }
        }
    }
    .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>