feiniao-farm-h5/src/views/old_mini/agri_file/components/reportPanel.vue

<template>
    <div class="report-panel">
        <div v-for="item in reportList" :key="item.id" class="report-card" @click="handleReportClick(item)">
            <div class="report-card__cover">
                <img :src="item.cover" alt="" />
                <span class="report-card__date">{{ item.date }}</span>
                <span class="report-card__status">
                    <i class="report-card__dot"></i>
                    {{ t("agriFile.reportUpdate") }}
                </span>
            </div>
            <div class="report-card__body">
                <div class="report-card__title">{{ item.title }}</div>
                <div class="report-card__desc">{{ item.desc }}</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { onActivated, onMounted, ref } from "vue";
import { useI18n } from "@/i18n";
import { useRouter } from "vue-router";

const router = useRouter();
const { t } = useI18n();

// ---------- 常量 ----------
const reportCover = require("@/assets/img/common/sd-1.jpg");

// ---------- 页面状态 ----------
const reportList = ref([]);

// ---------- 工具函数 ----------
const getSelectedFarm = () => {
    try {
        return JSON.parse(localStorage.getItem("selectedFarmData") || "{}");
    } catch {
        return {};
    }
};

const mapReportItem = (item, index) => ({
    id: item.id ?? `${item.time || ""}-${index}`,
    title: item.title || "",
    type: item.type || "",
    desc: item.content || "",
    date: item.time || "",
    cover: reportCover,
});

const handleReportClick = (item) => {
    router.push({
        path: "/alert_detail",
        query: {
            title: item?.title || "具体预警",
            type: item?.type || "warning",
        },
    });
};

// ---------- 业务逻辑：加载 ----------
const fetchReportList = async () => {
    const farm = getSelectedFarm();
    const farmId = farm.farm_id ?? farm.id;
    const zoneId = farm.zone_id ?? farm.zoneId;
    if (farmId == null || farmId === "" || zoneId == null || zoneId === "") {
        reportList.value = [];
        return;
    }
    try {
        const res = await VE_API.questionnaire.getReportList({
            farm_id: farmId,
            zone_id: zoneId,
        });
        const reports = Array.isArray(res?.data?.reports) ? res.data.reports : [];
        reportList.value = reports.map(mapReportItem);
    } catch {
        reportList.value = [];
    }
};

// ---------- 生命周期 ----------
onMounted(fetchReportList);
onActivated(fetchReportList);
</script>

<style lang="scss" scoped>
.report-panel {
    .report-card {
        margin-bottom: 10px;
        border-radius: 8px;
        background: #fff;

        &:last-child {
            margin-bottom: 0;
        }

        &__cover {
            position: relative;
            width: 100%;
            height: 158px;

            img {
                display: block;
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 5px;
            }
        }

        &__date {
            position: absolute;
            top: 0;
            padding: 5px 12px;
            border-radius: 4px;
            background: rgba(0, 0, 0, 0.45);
            backdrop-filter: blur(4px);
            color: #fff;
            font-size: 16px;
            border-radius: 5px 0 5px 0;
        }

        &__status {
            position: absolute;
            top: 10px;
            right: 0;
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 2px 13px;
            border-radius: 20px 0 0 20px;
            background: #ff5454;
            color: #fff;
            font-size: 12px;
        }

        &__dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #fff;
        }

        &__body {
            padding: 10px;
            margin-top: 4px;
        }

        &__title {
            font-size: 16px;
            font-weight: 500;
        }

        &__desc {
            margin-top: 4px;
            color: #9e9b9b;
        }
    }
}
</style>