feiniao-farm-h5/src/views/old_mini/agri_file/pages/diagnosisReport copy.vue

<template>
    <div class="diagnosis-report-page">
        <custom-header :name="t('agriFile.initialReport')" :isGoBack="true" @goback="handleBack" />

        <div class="diagnosis-report-body">
            <div class="report-hero">
                <div class="report-hero__title">{{ reportData.title }}</div>
                <div class="report-hero__desc">{{ reportData.intro }}</div>
            </div>

            <!-- 基本情况与种植价值 -->
            <div class="report-section">
                <div class="report-section__title">{{ reportData.basic.title }}</div>
                <div v-for="card in reportData.basic.cards" :key="card.title" class="info-card">
                    <div class="info-card__title">{{ card.title }}</div>
                    <div v-for="(para, idx) in card.paragraphs" :key="idx" class="info-card__text">
                        {{ para }}
                    </div>
                </div>
            </div>

            <!-- 决定产量的气象风险 -->
            <div class="report-section">
                <div class="report-section__title">{{ reportData.weatherRisk.title }}</div>
                <div class="info-card__text mb-10">{{ reportData.weatherRisk.intro }}</div>
                <div class="section-divider">
                    <span>{{ reportData.weatherRisk.groupTitle }}</span>
                </div>
                <div class="info-card fertilizer-card">
                    <div v-for="item in reportData.weatherRisk.items" :key="item.tag" class="tag-block">
                        <span class="tag-block__tag">{{ item.tag }}</span>
                        <div class="tag-block__text">{{ item.content }}</div>
                    </div>
                    <div class="suggest-card">
                        <div class="suggest-card__title">{{ reportData.weatherRisk.suggest.title }}</div>
                        <div v-for="row in reportData.weatherRisk.suggest.rows" :key="row.label"
                            class="suggest-card__row">
                            <span class="suggest-card__label">{{ row.label }}</span>
                            <span>{{ row.content }}</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 肥料供给效率分析 -->
            <div class="report-section">
                <div class="report-section__title">{{ reportData.fertilizer.title }}</div>
                <div class="info-card fertilizer-card">
                    <div class="info-card__text">{{ reportData.fertilizer.intro }}</div>
                    <div class="section-divider">
                        <span>{{ reportData.fertilizer.groupTitle }}</span>
                    </div>
                    <div v-for="item in reportData.fertilizer.items" :key="item.tag" class="tag-block">
                        <span class="tag-block__tag">{{ item.tag }}</span>
                        <div class="tag-block__text">{{ item.content }}</div>
                    </div>
                    <div class="suggest-card">
                        <div class="suggest-card__title">{{ reportData.fertilizer.suggest.title }}</div>
                        <div v-for="row in reportData.fertilizer.suggest.rows" :key="row.label"
                            class="suggest-card__row">
                            <span class="suggest-card__label">{{ row.label }}</span>
                            <span>{{ row.content }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="share-btn" @click="handleShare">{{ t("agriFile.forwardReport") }}</div>
    </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import customHeader from "@/components/customHeader.vue";
import { useI18n } from "@/i18n";
import wx from "weixin-js-sdk";

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

/** 假数据：后续可替换为接口 */
const reportData = ref({
    title: "《广州市从化区妃子笑荔枝初始种植诊断报告》",
    intro: "针对您的果园坐标、妃子笑荔枝和种植类型，飞鸟结合从化区长期种植条件，为您生成专属初始种植诊断报告",
    basic: {
        title: "基本情况与种植价值",
        cards: [
            {
                title: "种植基础",
                paragraphs: [
                    "从化地处北回归线附近低纬度地带，属南亚热带季风气候，年均气温约20℃上下，雨量充足、光照充沛，森林覆盖率高的低山丘陵为荔枝提供了较理想的生长环境。",
                ],
            },
            {
                title: "品种价值",
                paragraphs: [
                    "妃子笑为当地率先登场的早熟品种，早结、丰产稳产性好，果果大核小、肉厚清甜，商品性较好，且抗逆性和成花着果能力在同产区中表现突出。",
                    "产期价值：本地妃子笑多在5月下旬至6月中旬成熟采收，比当地桂味、糯米糍、槐枝等中晚熟品种提早约一个月上市，能在荔枝上市初期先供应市场、填补尝鲜空档。",
                ],
            },
            {
                title: "商品定位",
                paragraphs: [
                    "依托从化自然环境与当季鲜采优势，妃子笑宜以「本地早熟、果大肉厚清甜、新摘即卖」为卖点，面向本地及周边短途鲜食市场，强调产地直供与口感新鲜度。",
                ],
            }
        ],
    },
    weatherRisk: {
        title: "决定产量的气象风险",
        intro: "飞鸟系统基于当地多年气象与物候窗口，梳理对产量形成影响最大的关键风险，帮助提前布局应对。",
        groupTitle: "开花坐果期",
        items: [
            {
                tag: "风险判断",
                content:
                    "开花坐果期阴雨涝渍年发生概率55.0%，历史强度等级4级，是制约坐果稳定的重要风险，需重点对待。",
            },
            {
                tag: "主要影响",
                content:
                    "本物候期尚无花、果器官，研判重点放在叶和梢。高温、强光叠加缺水后，嫩叶失水速度超过根系补水速度，首先表现萎蔫与灼伤。",
            },
            {
                tag: "重点准备",
                content:
                    "围绕排水防涝、保温防寒和抗旱灌水提前备好物资与预案，把灾害应对前移到敏感窗口来临之前。",
            },
        ],
        suggest: {
            title: "飞鸟建议",
            rows: [
                {
                    label: "优先能力：",
                    content:
                        "重点提升防灾保果与应急稳产的成套管理能力，尤其是排水防涝、保温防寒和抗旱灌水的机动响应。",
                },
                {
                    label: "管理方向：",
                    content:
                        "围绕开花坐果和果实膨大两大敏感窗口，把灾害应对前移到物候来临之前，守住产量形成的稳定期。",
                },
            ],
        },
    },
    fertilizer: {
        title: "肥料供给效率分析",
        intro: "飞鸟系统结合历史土壤、地形水文和遥感长势数据，进一步分析发现，当地肥料利用效率的主要限制在于酸性黏重土壤的通气缓冲和湿热旱交替下的根系活力波动。",
        groupTitle: "土壤长期供肥",
        items: [
            {
                tag: "主要问题",
                content:
                    "当地为赤红壤黏壤土，pH约5.4偏酸，有机质水平中等，养分缓冲与保蓄能力总体偏弱。",
            },
            {
                tag: "形成原因",
                content:
                    "暴雨涝渍年发生概率65.0%，长期强降雨易促使可移动养分淋失，进一步削弱酸性土壤的养分缓冲能力。",
            },
            {
                tag: "生产影响",
                content:
                    "养分流失加快、供应节奏不稳，可能影响花芽分化、开花坐果和幼果稳定所需的营养基础。",
            },
        ],
        suggest: {
            title: "飞鸟建议",
            rows: [
                {
                    label: "优先能力：",
                    content:
                        "重点提升排水防涝、土壤改良与分期稳肥的成套管理能力，尤其是酸性黏重土壤的通气缓冲与根系养护。",
                },
                {
                    label: "管理方向：",
                    content:
                        "围绕开花坐果和果实膨大两大敏感窗口，把灾害应对前移到物候来临之前，守住产量形成的稳定期。",
                },
            ],
        },
    },
});

const handleBack = () => {
    router.back();
};

const handleShare = () => {
    const query = {
        askInfo: { title: "转发报告", content: "是否分享给好友" },
        shareText: reportData.value.title,
        targetUrl: "diagnosis_report",
        paramsPage: JSON.stringify({
            id: route.query.id,
            fromShare: 1,
        }),
        imageUrl: "https://birdseye-img.sysuimars.com/temp/field.png",
    };
    wx.miniProgram.navigateTo({
        url: `/pages/subPages/share_page/index?pageParams=${JSON.stringify(query)}&type=sharePage`,
    });
};
</script>

<style lang="scss" scoped>
.diagnosis-report-page {
    min-height: 100vh;
    background: #f5f6f8;
    box-sizing: border-box;
    padding-bottom: 90px;
}

.diagnosis-report-body {
    padding: 10px 10px 60px;
    max-height: calc(100vh - 40px);
    overflow: auto;
    box-sizing: border-box;
}

.report-hero {
    padding: 0px 0px 10px;
    text-align: center;

    &__title {
        font-size: 16px;
        font-weight: bold;
        line-height: 24px;
        color: #000000;
    }

    &__desc {
        margin-top: 10px;
        font-size: 16px;
        font-weight: 350;
        line-height: 24px;
        color: rgba(6, 6, 6, 0.5);
        text-align: left;
    }
}

.report-section {
    background: #fff;
    padding: 10px;
    border-radius: 10px;

    &+& {
        margin-top: 18px;
    }

    &__title {
        margin-bottom: 10px;
        font-size: 16px;
        font-weight: 600;
        line-height: 24px;
        color: #000000;
    }
}

.mb-10 {
        margin-bottom: 10px;
    }

.info-card {
    padding: 10px;
    border-radius: 4px;
    background: #F7F8FA;
    box-sizing: border-box;

    &.fertilizer-card {
        background: transparent;
        padding: 0;

        .info-card__text {
            margin-bottom: 10px;
        }
    }

    &+& {
        margin-top: 10px;
    }

    &__title {
        margin-bottom: 4px;
        font-size: 14px;
        font-weight: 500;
        line-height: 22px;
        color: #1D2129;
    }

    &__text {
        // margin-bottom: 10px;
        font-size: 12px;
        line-height: 20px;
        color: #4E5969;

        &+& {
            margin-top: 2px;
        }
    }
}

.section-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    color: #1D2129;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;

    &::before,
    &::after {
        content: "";
        flex: 1;
        height: 1px;
        background: linear-gradient(90deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%);
    }

    &::before {
        background: linear-gradient(270deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%);
    }
}

.tag-block {
    padding: 12px;
    border-radius: 8px;
    background: #f7f8fa;

    &+& {
        margin-top: 10px;
    }

    &__tag {
        display: inline-block;
        padding: 0 10px;
        border-radius: 2px;
        background: #2199f8;
        color: #fff;
        font-size: 12px;
        line-height: 22px;
    }

    &__text {
        margin-top: 4px;
        font-size: 12px;
        line-height: 20px;
        color: #4E5969;
    }
}

.suggest-card {
    margin-top: 10px;
    padding: 12px;
    border-radius: 8px;
    background: rgba(33, 153, 248, 0.08);

    &__title {
        margin-bottom: 8px;
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        color: #2199f8;
    }

    &__row {
        font-size: 12px;
        line-height: 20px;
        color: #4E5969;

        &+& {
            margin-top: 8px;
        }
    }

    &__label {
        color: #000000;
    }
}

.share-btn {
    position: fixed;
    left: 50%;
    bottom: 64px;
    z-index: 10;
    transform: translateX(-50%);
    min-width: 120px;
    height: 40px;
    box-sizing: border-box;
    padding: 0 30px;
    border-radius: 22px;
    background: linear-gradient(180deg, #72C1FF 0%, #2199F8 100%);
    color: #fff;
    font-size: 14px;
    line-height: 40px;
    text-align: center;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
}
</style>