|
|
@@ -1,281 +1,333 @@
|
|
|
<template>
|
|
|
<div class="diagnosis-report-page">
|
|
|
- <!-- <custom-header :name="t('agriFile.initialReport')" :isGoBack="true" @goback="handleBack" /> -->
|
|
|
-
|
|
|
+ <div class="report-header">
|
|
|
+ <div class="report-header__title">
|
|
|
+ 种植报告
|
|
|
+ <img src="@/assets/img/report/star.png" alt="" class="report-header__star">
|
|
|
+ </div>
|
|
|
+ <div class="report-header__desc">梅县区雁洋镇南福村的飞鸟智慧农业</div>
|
|
|
+ <div class="report-header__desc">梅州柚子基地</div>
|
|
|
+ </div>
|
|
|
<div v-if="loading" class="diagnosis-report-status">加载中...</div>
|
|
|
<div v-else-if="!reportData" class="diagnosis-report-status">暂无报告数据</div>
|
|
|
|
|
|
- <div v-else 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 v-else class="report-main">
|
|
|
+ <div class="base-bg">
|
|
|
+ <div class="base-title">
|
|
|
+ <img src="@/assets/img/report/base-title.png" alt="" class="base-title__icon">
|
|
|
+ <span class="base-title__text">基本信息</span>
|
|
|
+ </div>
|
|
|
+ <div class="base-content">
|
|
|
+ <div class="base-content__row">
|
|
|
+ <span class="base-content__label">种植作物：</span>
|
|
|
+ <span class="base-content__value">柚子—金柚</span>
|
|
|
+ </div>
|
|
|
+ <div class="base-content__row">
|
|
|
+ <span class="base-content__label">品种特质：</span>
|
|
|
+ <span class="base-content__value">晚熟型特色柚类品种，生育周期长、品质形成期较长，能够充分利用成熟前的光温条件，因此对膨果期水分管理和成熟期气候调控要求较高。</span>
|
|
|
+ </div>
|
|
|
+ <div class="base-content__row">
|
|
|
+ <span class="base-content__label">物候信息：</span>
|
|
|
+ <span class="base-content__value">当前处于果实膨大后期至成熟前期，预计11月上中旬采收。</span>
|
|
|
+ </div>
|
|
|
+ <div class="base-content__row">
|
|
|
+ <span class="base-content__label">土壤条件：</span>
|
|
|
+ <span class="base-content__value">土壤类型为赤红壤，表层（0-30 cm）黏粒含量约35%，属于偏黏质地；土壤pH约5.2，有机碳含量约12 g/kg，总氮含量约0.8 g/kg。根据土壤养分评价，该地块氮素供应处于中等偏低水平。</span>
|
|
|
+ </div>
|
|
|
+ <div class="base-content__row">
|
|
|
+ <span class="base-content__label">地形条件：</span>
|
|
|
+ <span class="base-content__value">丘陵缓坡，海拔约150 m，坡度约8°，东南坡。</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 锚点导航 -->
|
|
|
+ <div class="report-tabs">
|
|
|
+ <div
|
|
|
+ v-for="tab in tabs"
|
|
|
+ :key="tab.key"
|
|
|
+ class="report-tabs__item"
|
|
|
+ :class="{ active: activeTab === tab.key }"
|
|
|
+ @click="scrollToSection(tab.key)"
|
|
|
+ >
|
|
|
+ <svg class="report-tabs__icon" viewBox="0 0 24 24" fill="none">
|
|
|
+ <path
|
|
|
+ v-for="(d, i) in tab.paths"
|
|
|
+ :key="i"
|
|
|
+ :d="d"
|
|
|
+ stroke="currentColor"
|
|
|
+ stroke-width="1.6"
|
|
|
+ stroke-linecap="round"
|
|
|
+ stroke-linejoin="round"
|
|
|
+ />
|
|
|
+ </svg>
|
|
|
+ <span>{{ tab.label }}</span>
|
|
|
+ <i v-if="activeTab === tab.key" class="report-tabs__arrow"></i>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
<div
|
|
|
- v-for="(section, sIdx) in reportData.sections"
|
|
|
- :key="sIdx"
|
|
|
- class="report-section"
|
|
|
+ v-for="tab in tabs"
|
|
|
+ :id="`report-section-${tab.key}`"
|
|
|
+ :key="tab.key"
|
|
|
+ class="report-panel"
|
|
|
>
|
|
|
- <div class="report-section__title">{{ section.displayTitle || section.title }}</div>
|
|
|
-
|
|
|
- <!-- 基本情况与种植价值：灰色卡片（无 ### 分组） -->
|
|
|
- <template v-if="section.type === 'basic'">
|
|
|
- <div v-for="card in section.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 class="report-panel__title">
|
|
|
+ <span>{{ tab.label }}</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div
|
|
|
+ v-for="(section, sIdx) in SECTION_MAP[tab.key]"
|
|
|
+ :key="sIdx"
|
|
|
+ class="report-block"
|
|
|
+ >
|
|
|
+ <div v-if="section.title" class="report-block__divider">
|
|
|
+ <span>{{ section.title }}</span>
|
|
|
</div>
|
|
|
- </template>
|
|
|
|
|
|
- <!-- 气象风险 / 肥料 / 病虫害：分组 + 飞鸟建议 -->
|
|
|
- <template v-else>
|
|
|
- <div v-if="section.intro" class="info-card__text mb-10">{{ section.intro }}</div>
|
|
|
+ <!-- 导语在图表前（品质潜力） -->
|
|
|
+ <p
|
|
|
+ v-if="section.intro && section.introFirst"
|
|
|
+ class="report-block__intro"
|
|
|
+ >{{ section.intro }}</p>
|
|
|
+
|
|
|
+ <!-- 图表占位（后续替换图片） -->
|
|
|
+ <div v-if="section.showChart && !section.chartAfter" class="report-block__chart">
|
|
|
+ <img
|
|
|
+ class="report-block__chart-img"
|
|
|
+ :class="{ 'report-block__chart-img--natural': section.chartNatural }"
|
|
|
+ :src="section.chartSrc || ''"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
|
|
|
- <div v-for="(group, gIdx) in section.groups" :key="gIdx" class="risk-group">
|
|
|
- <div class="section-divider">
|
|
|
- <span>{{ group.title }}</span>
|
|
|
- </div>
|
|
|
- <div class="info-card fertilizer-card">
|
|
|
- <div v-for="item in group.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>
|
|
|
+ <p v-if="section.note" class="report-block__note">{{ section.note }}</p>
|
|
|
+
|
|
|
+ <!-- 导语在图表后（气象风险） -->
|
|
|
+ <p
|
|
|
+ v-if="section.intro && !section.introFirst"
|
|
|
+ class="report-block__intro"
|
|
|
+ >{{ section.intro }}</p>
|
|
|
+
|
|
|
+ <!-- 段落型 -->
|
|
|
+ <div
|
|
|
+ v-if="section.type === 'text'"
|
|
|
+ class="report-block__card"
|
|
|
+ >
|
|
|
+ <p class="report-block__text">{{ section.content }}</p>
|
|
|
</div>
|
|
|
|
|
|
- <div v-if="section.suggest" class="suggest-card">
|
|
|
- <div class="suggest-card__title">{{ section.suggest.title }}</div>
|
|
|
+ <!-- 条目型 -->
|
|
|
+ <template v-else-if="section.type === 'list'">
|
|
|
<div
|
|
|
- v-for="row in section.suggest.rows"
|
|
|
- :key="row.label"
|
|
|
- class="suggest-card__row"
|
|
|
+ v-for="(item, iIdx) in section.items"
|
|
|
+ :key="iIdx"
|
|
|
+ class="report-block__card"
|
|
|
+ :class="{
|
|
|
+ 'report-block__card--plain': section.plain,
|
|
|
+ 'report-block__card--blue': section.cardTone === 'blue',
|
|
|
+ }"
|
|
|
>
|
|
|
- <span class="suggest-card__label">{{ row.label }}</span>
|
|
|
- <span>{{ row.content }}</span>
|
|
|
+ <div class="report-block__item-title">{{ item.title }}</div>
|
|
|
+ <p class="report-block__text">{{ item.content }}</p>
|
|
|
</div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 图表在内容后（农事管理） -->
|
|
|
+ <div v-if="section.showChart && section.chartAfter" class="report-block__chart report-block__chart--after">
|
|
|
+ <img
|
|
|
+ class="report-block__chart-img"
|
|
|
+ :src="section.chartSrc || ''"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
</div>
|
|
|
- </template>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <!-- <div v-if="reportData" class="share-btn" @click="handleShare">{{ t("agriFile.forwardReport") }}</div> -->
|
|
|
+ <!-- <div v-if="reportData" class="share-btn" @click="handleShare">转发报告</div> -->
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
import { onMounted, ref } from "vue";
|
|
|
-import { useRouter, useRoute } from "vue-router";
|
|
|
+import { useRoute } from "vue-router";
|
|
|
import { ElMessage } from "element-plus";
|
|
|
-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 loading = ref(false);
|
|
|
-const reportData = ref(null);
|
|
|
-
|
|
|
// ---------------------------------------------------------------------------
|
|
|
-// Markdown 解析：将接口 report 文本转成页面结构
|
|
|
+// 常量
|
|
|
// ---------------------------------------------------------------------------
|
|
|
+const ENTRY_FARM_DATA_KEY = "ENTRY_FARM_DATA";
|
|
|
|
|
|
-/** 去掉 markdown 标题前缀，保留书名号 */
|
|
|
-const cleanTitle = (text = "") =>
|
|
|
- String(text)
|
|
|
- .replace(/^#+\s*/, "")
|
|
|
- .trim();
|
|
|
-
|
|
|
-/** 去掉「一、」「二、」等章节序号，用于展示 */
|
|
|
-const stripChapterNo = (title = "") =>
|
|
|
- String(title)
|
|
|
- .replace(/^[一二三四五六七八九十百]+[、.．]\s*/, "")
|
|
|
- .trim();
|
|
|
-
|
|
|
-/** 是否为「基本情况与种植价值」章节（结构与其它章节不同：仅有一级列表卡片） */
|
|
|
-const isBasicSectionTitle = (title = "") => /基本情况|种植价值/.test(title);
|
|
|
-
|
|
|
-/** 解析 `- 标签：内容` / `- 标签:内容` */
|
|
|
-const parseLabeledItem = (line) => {
|
|
|
- const text = String(line).replace(/^[-*•]\s+/, "").trim();
|
|
|
- const match = text.match(/^([^：:]+)[：:]\s*(.+)$/);
|
|
|
- if (!match) return null;
|
|
|
- return {
|
|
|
- label: match[1].trim(),
|
|
|
- content: match[2].trim(),
|
|
|
- };
|
|
|
+const TABS = [
|
|
|
+ {
|
|
|
+ key: "weather",
|
|
|
+ label: "气象风险",
|
|
|
+ paths: ["M13 2L4 14h7l-1 8 9-12h-7l1-8z"],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: "quality",
|
|
|
+ label: "品质潜力",
|
|
|
+ paths: [
|
|
|
+ "M12 21c0-6 4-10 9-11-1 6-5 10-9 11z",
|
|
|
+ "M12 21c0-6-4-10-9-11 1 6 5 10 9 11z",
|
|
|
+ "M12 21V10",
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: "input",
|
|
|
+ label: "必要投入",
|
|
|
+ paths: [
|
|
|
+ "M7 3h7l4 4v14a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z",
|
|
|
+ "M14 3v4h4",
|
|
|
+ "M9 13h6",
|
|
|
+ "M9 17h6",
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: "manage",
|
|
|
+ label: "农事管理",
|
|
|
+ paths: [
|
|
|
+ "M6 4h12a1 1 0 0 1 1 1v15H5V5a1 1 0 0 1 1-1z",
|
|
|
+ "M9 2v3",
|
|
|
+ "M15 2v3",
|
|
|
+ "M5 9h14",
|
|
|
+ "M9 13h.01",
|
|
|
+ "M12 13h.01",
|
|
|
+ "M15 13h.01",
|
|
|
+ "M9 17h.01",
|
|
|
+ "M12 17h.01",
|
|
|
+ ],
|
|
|
+ },
|
|
|
+];
|
|
|
+
|
|
|
+/** 各模块演示内容（后续接接口解析结果） */
|
|
|
+const SECTION_MAP = {
|
|
|
+ weather: [
|
|
|
+ {
|
|
|
+ title: "气候条件",
|
|
|
+ type: "text",
|
|
|
+ content:
|
|
|
+ "梅州属亚热带季风气候，年平均气温约21~23℃，年降雨量约1470~1800 mm，无霜期300天以上，光热水资源总体充足，能够较好满足金柚生长需求（适宜年均温约18~21℃，≥10℃积温约6000℃以上，年降雨量约1500 mm左右或以上）。",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "主要气象风险",
|
|
|
+ type: "list",
|
|
|
+ showChart: true,
|
|
|
+ chartSrc: require("@/assets/img/report/p1.png"),
|
|
|
+ intro: "通过统计该点位近10年历史气象数据，得到各阶段主要气象风险构成（如图）。结果显示，该点位主要气象风险集中在以下关键阶段：",
|
|
|
+ items: [
|
|
|
+ {
|
|
|
+ title: "春梢—开花期低温冷害和阴雨寡照，影响授粉坐果稳定性。",
|
|
|
+ content:
|
|
|
+ "该阶段低温冷害和阴雨寡照风险占比分别约为30%和34%。低温冷害可能降低花粉活性，阴雨寡照会削弱光合作用，共同影响花器发育和坐果形成。",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "坐果—幼果期暴雨涝渍和阴雨涝渍，影响幼果正常发育。",
|
|
|
+ content:
|
|
|
+ "该阶段暴雨涝渍和阴雨涝渍风险占比分别约为32%和28%。持续降雨容易导致根区水分过多、土壤通气下降，影响根系吸收和幼果稳定生长。",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "果实膨大期高温干旱和旱涝急转，影响果实膨大与水分平衡。",
|
|
|
+ content:
|
|
|
+ "该阶段高温干旱、暴雨涝渍和旱涝急转风险分别为约34%、24%和18%。高温干旱易造成树体水分胁迫，旱涝急转则会引起果实快速吸水膨胀，增加裂果风险。",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "转色—成熟期台风大风和连续降雨，影响果实品质形成。",
|
|
|
+ content:
|
|
|
+ "该阶段台风大风、连续降雨和暴雨涝渍风险分别为约28%、26%和20%。台风大风易造成落果和枝条损伤，连续降雨会降低光合积累，影响糖分形成和品质稳定。",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ quality: [
|
|
|
+ {
|
|
|
+ type: "list",
|
|
|
+ introFirst: true,
|
|
|
+ intro: "围绕金柚品质形成过程，基于“生长环境—光合积累—果实发育—成熟品质”四个维度分析该点位品质形成优势及限制因素，结果如图：",
|
|
|
+ showChart: true,
|
|
|
+ chartNatural: true,
|
|
|
+ chartSrc: require("@/assets/img/report/p2.png"),
|
|
|
+ note: "注：橙色表示高于平均水平，蓝色表示低于平均水平；单元格内上方为偏离幅度，下方为原始值（点位/平均水平）",
|
|
|
+ items: [
|
|
|
+ {
|
|
|
+ title: "生长环境条件总体适宜，为金柚生长提供基础保障。",
|
|
|
+ content:
|
|
|
+ "重点关注温度和水分条件。该点位秋梢生长期、春梢—开花期和果实膨大期平均气温分别为28.5℃、17.8℃和27.3℃，与梅州平均水平接近；对应累计降水量分别为420 mm、260 mm和680 mm，整体满足金柚生长和果实发育需求。",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "光合积累条件较好，但秋梢期光照略显不足。",
|
|
|
+ content:
|
|
|
+ "重点关注日照条件。春梢—开花期累计日照时数为210 h，高于梅州平均（140 h），有利于树体营养积累和后续果实品质形成；但秋梢期日照时数为510 h，低于平均水平（720 h），可能影响秋梢营养储备。",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "果实发育期温差条件优势明显，有利于果实膨大。",
|
|
|
+ content:
|
|
|
+ "重点关注膨果期温度、水分和高温胁迫。果实膨大期平均昼夜温差为9.1℃，高于梅州平均（7.5℃），较大的昼夜温差有利于糖分积累和干物质形成；同时高温日数为22天，低于平均水平（35天），可降低高温对果实发育的不利影响。",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "成熟期具备较好的品质形成条件，但降雨偏多限制品质稳定。",
|
|
|
+ content:
|
|
|
+ "重点关注转色—成熟期光照、温差和水分条件。该阶段平均昼夜温差为9.8℃，累计日照时数为480 h，均高于梅州平均（8.8℃、450 h），有利于糖分积累和风味形成；但累计降水量达到150 mm，高于平均水平（88 mm），成熟期水分偏多可能增加裂果风险，并影响品质稳定。",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ input: [
|
|
|
+ {
|
|
|
+ type: "list",
|
|
|
+ cardTone: "blue",
|
|
|
+ items: [
|
|
|
+ {
|
|
|
+ title: "必须投入",
|
|
|
+ content:
|
|
|
+ "排灌设施：当前处于果实膨大后期至成熟前期，果实对水分稳定性要求较高。该点位土壤偏黏，雨后排水压力较大，建议配置蓄水、滴灌/微喷及排水沟，实现旱时补水、雨时排涝。",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "建议投入",
|
|
|
+ content:
|
|
|
+ "防风防灾设施：该点位位于丘陵缓坡区域，成熟前期果实负载增加，强风和强降雨可能造成落果、枝条损伤及坡面冲刷。建议加强树体支撑、防风加固和坡面排水措施。",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "优化投入",
|
|
|
+ content:
|
|
|
+ "水肥一体化与墒情监测：土壤保肥保水能力一般，且养分供应存在不足风险。建议配置墒情监测和水肥一体化设备，根据果实膨大和成熟需求精准调控水肥，提高果实品质和投入效率。",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ manage: [
|
|
|
+ {
|
|
|
+ type: "text",
|
|
|
+ content: "结合金柚生长发育特点，将风险防控措施与关键农事目标相结合，形成全年动态管理方案。",
|
|
|
+ showChart: true,
|
|
|
+ chartAfter: true,
|
|
|
+ chartSrc: require("@/assets/img/report/p3.png"),
|
|
|
+ },
|
|
|
+ ],
|
|
|
};
|
|
|
|
|
|
-/** 判断是否为「飞鸟建议」小节 */
|
|
|
-const isSuggestHeading = (title) => /飞鸟建议/.test(title || "");
|
|
|
-
|
|
|
-/**
|
|
|
- * 将 markdown 报告解析为 { title, intro, sections }
|
|
|
- * - basic：基本情况与种植价值（- 标签：内容 → 灰色卡片）
|
|
|
- * - risk：含 ### 分组 + 可选飞鸟建议
|
|
|
- */
|
|
|
-const parseReportMarkdown = (markdown) => {
|
|
|
- const lines = String(markdown || "")
|
|
|
- .replace(/\r\n/g, "\n")
|
|
|
- .split("\n")
|
|
|
- .map((line) => line.trimEnd());
|
|
|
-
|
|
|
- let title = "";
|
|
|
- const introLines = [];
|
|
|
- const sections = [];
|
|
|
- let currentSection = null;
|
|
|
- let currentGroup = null;
|
|
|
- let inIntro = true;
|
|
|
-
|
|
|
- const createSection = (rawTitle) => {
|
|
|
- const fullTitle = cleanTitle(rawTitle);
|
|
|
- const basic = isBasicSectionTitle(fullTitle);
|
|
|
- return {
|
|
|
- title: fullTitle,
|
|
|
- displayTitle: stripChapterNo(fullTitle),
|
|
|
- type: basic ? "basic" : "risk",
|
|
|
- intro: "",
|
|
|
- cards: [],
|
|
|
- groups: [],
|
|
|
- suggest: null,
|
|
|
- _introLines: [],
|
|
|
- };
|
|
|
- };
|
|
|
-
|
|
|
- const flushGroup = () => {
|
|
|
- if (!currentSection || !currentGroup) return;
|
|
|
- // 基本情况章节不应出现 ###，若误入则并入卡片
|
|
|
- if (currentSection.type === "basic") {
|
|
|
- currentGroup.items.forEach((item) => {
|
|
|
- currentSection.cards.push({
|
|
|
- title: item.tag,
|
|
|
- paragraphs: [item.content],
|
|
|
- });
|
|
|
- });
|
|
|
- currentGroup = null;
|
|
|
- return;
|
|
|
- }
|
|
|
- if (isSuggestHeading(currentGroup.title)) {
|
|
|
- currentSection.suggest = {
|
|
|
- title: currentGroup.title,
|
|
|
- rows: currentGroup.items.map((item) => ({
|
|
|
- label: `${item.tag}：`,
|
|
|
- content: item.content,
|
|
|
- })),
|
|
|
- };
|
|
|
- } else {
|
|
|
- currentSection.groups.push({
|
|
|
- title: currentGroup.title,
|
|
|
- items: currentGroup.items,
|
|
|
- });
|
|
|
- }
|
|
|
- currentGroup = null;
|
|
|
- };
|
|
|
-
|
|
|
- for (const raw of lines) {
|
|
|
- const line = raw.trim();
|
|
|
- if (!line) continue;
|
|
|
-
|
|
|
- if (/^#\s+/.test(line) && !/^##/.test(line)) {
|
|
|
- title = cleanTitle(line);
|
|
|
- continue;
|
|
|
- }
|
|
|
-
|
|
|
- if (/^##\s+/.test(line)) {
|
|
|
- flushGroup();
|
|
|
- inIntro = false;
|
|
|
- currentSection = createSection(line);
|
|
|
- sections.push(currentSection);
|
|
|
- continue;
|
|
|
- }
|
|
|
-
|
|
|
- if (/^###\s+/.test(line)) {
|
|
|
- flushGroup();
|
|
|
- if (!currentSection) {
|
|
|
- currentSection = createSection("");
|
|
|
- sections.push(currentSection);
|
|
|
- }
|
|
|
- // 基本情况章节忽略 ###，当作普通内容跳过标题行
|
|
|
- if (currentSection.type === "basic") {
|
|
|
- currentGroup = null;
|
|
|
- continue;
|
|
|
- }
|
|
|
- currentGroup = {
|
|
|
- title: cleanTitle(line).replace(/^\d+\.\s*/, ""),
|
|
|
- items: [],
|
|
|
- };
|
|
|
- continue;
|
|
|
- }
|
|
|
-
|
|
|
- if (/^[-*•]\s+/.test(line)) {
|
|
|
- const item = parseLabeledItem(line);
|
|
|
- if (!item) continue;
|
|
|
- if (!currentSection) {
|
|
|
- currentSection = createSection("");
|
|
|
- sections.push(currentSection);
|
|
|
- }
|
|
|
-
|
|
|
- // 基本情况：一律进灰色卡片
|
|
|
- if (currentSection.type === "basic") {
|
|
|
- const exist = currentSection.cards.find((c) => c.title === item.label);
|
|
|
- if (exist) {
|
|
|
- exist.paragraphs.push(item.content);
|
|
|
- } else {
|
|
|
- currentSection.cards.push({
|
|
|
- title: item.label,
|
|
|
- paragraphs: [item.content],
|
|
|
- });
|
|
|
- }
|
|
|
- continue;
|
|
|
- }
|
|
|
-
|
|
|
- if (currentGroup) {
|
|
|
- currentGroup.items.push({
|
|
|
- tag: item.label,
|
|
|
- content: item.content,
|
|
|
- });
|
|
|
- } else {
|
|
|
- // risk 章节若列表在 ### 之前，先挂到临时卡片，一般不会出现
|
|
|
- currentSection.cards.push({
|
|
|
- title: item.label,
|
|
|
- paragraphs: [item.content],
|
|
|
- });
|
|
|
- }
|
|
|
- continue;
|
|
|
- }
|
|
|
-
|
|
|
- if (inIntro && !currentSection) {
|
|
|
- introLines.push(line);
|
|
|
- } else if (currentSection && !currentGroup) {
|
|
|
- currentSection._introLines.push(line);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- flushGroup();
|
|
|
+// ---------------------------------------------------------------------------
|
|
|
+// 页面状态
|
|
|
+// ---------------------------------------------------------------------------
|
|
|
+const route = useRoute();
|
|
|
+const loading = ref(false);
|
|
|
+const reportData = ref(null);
|
|
|
+const activeTab = ref("weather");
|
|
|
+const tabs = TABS;
|
|
|
|
|
|
- sections.forEach((section) => {
|
|
|
- section.intro = (section._introLines || []).join("");
|
|
|
- delete section._introLines;
|
|
|
- // 再次按标题校正类型，避免误判
|
|
|
- if (isBasicSectionTitle(section.title)) {
|
|
|
- section.type = "basic";
|
|
|
- } else if (section.groups.length || section.suggest) {
|
|
|
- section.type = "risk";
|
|
|
- }
|
|
|
- });
|
|
|
+const entryFarmData = JSON.parse(localStorage.getItem(ENTRY_FARM_DATA_KEY) || "null");
|
|
|
|
|
|
- return {
|
|
|
- title: title || "初始种植诊断报告",
|
|
|
- intro: introLines.join(""),
|
|
|
- sections,
|
|
|
- };
|
|
|
+// ---------------------------------------------------------------------------
|
|
|
+// 锚点定位
|
|
|
+// ---------------------------------------------------------------------------
|
|
|
+const scrollToSection = (key) => {
|
|
|
+ activeTab.value = key;
|
|
|
+ const el = document.getElementById(`report-section-${key}`);
|
|
|
+ if (!el) return;
|
|
|
+ el.scrollIntoView({ behavior: "smooth", block: "start" });
|
|
|
};
|
|
|
|
|
|
-const ENTRY_FARM_DATA_KEY = "ENTRY_FARM_DATA";
|
|
|
-const entryFarmData = JSON.parse(localStorage.getItem(ENTRY_FARM_DATA_KEY) || "null");
|
|
|
-
|
|
|
// ---------------------------------------------------------------------------
|
|
|
// 接口
|
|
|
// ---------------------------------------------------------------------------
|
|
|
@@ -287,7 +339,7 @@ const fetchReport = async () => {
|
|
|
tel: entryFarmData.phone,
|
|
|
});
|
|
|
if (res?.code === 200 && res.data?.report) {
|
|
|
- reportData.value = parseReportMarkdown(res.data.report);
|
|
|
+ reportData.value = res.data.report;
|
|
|
} else {
|
|
|
ElMessage.error(res?.msg || "获取诊断报告失败");
|
|
|
}
|
|
|
@@ -298,14 +350,10 @@ const fetchReport = async () => {
|
|
|
}
|
|
|
};
|
|
|
|
|
|
-const handleBack = () => {
|
|
|
- router.back();
|
|
|
-};
|
|
|
-
|
|
|
const handleShare = () => {
|
|
|
const query = {
|
|
|
askInfo: { title: "转发报告", content: "是否分享给好友" },
|
|
|
- shareText: reportData.value?.title || "",
|
|
|
+ shareText: "",
|
|
|
targetUrl: "diagnosis_report",
|
|
|
paramsPage: JSON.stringify({
|
|
|
id: route.query.id,
|
|
|
@@ -326,10 +374,41 @@ onMounted(() => {
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.diagnosis-report-page {
|
|
|
- min-height: 100vh;
|
|
|
+ height: 100vh;
|
|
|
+ overflow-y: auto;
|
|
|
+ -webkit-overflow-scrolling: touch;
|
|
|
background: #f5f6f8;
|
|
|
box-sizing: border-box;
|
|
|
- padding-bottom: 90px;
|
|
|
+ padding-bottom: 60px;
|
|
|
+
|
|
|
+ .report-header {
|
|
|
+ width: 100%;
|
|
|
+ height: 148px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 36px 20px 0;
|
|
|
+ background: url("@/assets/img/report/title-bg.png") no-repeat center center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ color: #fff;
|
|
|
+
|
|
|
+ &__title {
|
|
|
+ position: relative;
|
|
|
+ font-size: 35px;
|
|
|
+ font-family: 'pangmenzhengdao';
|
|
|
+ }
|
|
|
+
|
|
|
+ &__star {
|
|
|
+ width: 23px;
|
|
|
+ height: 23px;
|
|
|
+ margin-top: -8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &__desc {
|
|
|
+ font-size: 13px;
|
|
|
+ line-height: 20px;
|
|
|
+ font-weight: 400;
|
|
|
+ opacity: 0.95;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.diagnosis-report-status {
|
|
|
@@ -339,176 +418,253 @@ onMounted(() => {
|
|
|
color: #86909c;
|
|
|
}
|
|
|
|
|
|
-.diagnosis-report-body {
|
|
|
- padding: 10px 10px 20px;
|
|
|
- max-height: calc(100vh - 40px);
|
|
|
- overflow: auto;
|
|
|
- box-sizing: border-box;
|
|
|
-}
|
|
|
-
|
|
|
-.report-hero {
|
|
|
- padding: 0 0 10px;
|
|
|
- text-align: center;
|
|
|
+.report-main {
|
|
|
+ padding: 0 12px;
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+
|
|
|
+ .base-bg {
|
|
|
+ width: 100%;
|
|
|
+ height: 335px;
|
|
|
+ margin: 12px 0;
|
|
|
+ padding: 5px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: url("@/assets/img/report/base-bg.png") no-repeat center center /100% 100%;
|
|
|
+ .base-title {
|
|
|
+ display: flex;
|
|
|
+ gap: 5px;
|
|
|
+ .base-title__icon {
|
|
|
+ width: 44px;
|
|
|
+ height: 44px;
|
|
|
+ }
|
|
|
+ .base-title__text {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #fff;
|
|
|
+ margin-top: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .base-content {
|
|
|
+ background: linear-gradient(180deg, rgba(255, 255, 255, 0.79) 0%, #FFFFFF 11.7%, #FFFFFF 100%);
|
|
|
+ border-radius: 10px;
|
|
|
+ border: 1px solid #FFFFFF;
|
|
|
+ padding: 12px 14px;
|
|
|
+ margin-top: -10px;
|
|
|
+ font-size: 13px;
|
|
|
+ line-height: 22px;
|
|
|
+
|
|
|
+ &__row {
|
|
|
+ & + & {
|
|
|
+ margin-top: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- &__title {
|
|
|
- font-size: 16px;
|
|
|
- font-weight: bold;
|
|
|
- line-height: 24px;
|
|
|
- color: #000;
|
|
|
- }
|
|
|
+ &__label {
|
|
|
+ color: #86909c;
|
|
|
+ }
|
|
|
|
|
|
- &__desc {
|
|
|
- margin-top: 10px;
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 350;
|
|
|
- line-height: 24px;
|
|
|
- color: rgba(6, 6, 6, 0.5);
|
|
|
- text-align: left;
|
|
|
+ &__value {
|
|
|
+ color: #1d2129;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-.report-section {
|
|
|
- background: #fff;
|
|
|
- padding: 10px;
|
|
|
- border-radius: 10px;
|
|
|
+.report-tabs {
|
|
|
+ display: flex;
|
|
|
+ gap: 8px;
|
|
|
+ padding-bottom: 6px;
|
|
|
|
|
|
- & + & {
|
|
|
- margin-top: 18px;
|
|
|
+ &__item {
|
|
|
+ position: relative;
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 4px;
|
|
|
+ height: 64px;
|
|
|
+ border-radius: 10px;
|
|
|
+ background: #eef0f3;
|
|
|
+ color: #86909c;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 16px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border: 1px solid transparent;
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ background: #fff;
|
|
|
+ border-color: rgba(33, 153, 248, 0.45);
|
|
|
+ color: #1d2129;
|
|
|
+ font-weight: 500;
|
|
|
+ box-shadow: 0 2px 8px rgba(33, 153, 248, 0.08);
|
|
|
+
|
|
|
+ .report-tabs__icon {
|
|
|
+ color: #2199f8;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- &__title {
|
|
|
- margin-bottom: 10px;
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 600;
|
|
|
- line-height: 24px;
|
|
|
- color: #000;
|
|
|
+ &__icon {
|
|
|
+ width: 22px;
|
|
|
+ height: 22px;
|
|
|
+ color: #86909c;
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-.risk-group {
|
|
|
- & + & {
|
|
|
- margin-top: 14px;
|
|
|
+ &__arrow {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ bottom: -6px;
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ margin-left: -6px;
|
|
|
+ border-left: 6px solid transparent;
|
|
|
+ border-right: 6px solid transparent;
|
|
|
+ border-top: 6px solid #fff;
|
|
|
+ filter: drop-shadow(0 1px 0 rgba(33, 153, 248, 0.25));
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-.mb-10 {
|
|
|
- margin-bottom: 10px;
|
|
|
-}
|
|
|
-
|
|
|
-.info-card {
|
|
|
- padding: 10px;
|
|
|
- border-radius: 4px;
|
|
|
- background: #f7f8fa;
|
|
|
- box-sizing: border-box;
|
|
|
+.report-panel {
|
|
|
+ margin-top: 12px;
|
|
|
+ padding: 16px 12px 18px;
|
|
|
+ border-radius: 12px;
|
|
|
+ background: #fff;
|
|
|
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
|
|
|
+ scroll-margin-top: 8px;
|
|
|
|
|
|
- &.fertilizer-card {
|
|
|
- background: transparent;
|
|
|
- padding: 0;
|
|
|
+ &__title {
|
|
|
+ position: relative;
|
|
|
+ display: inline-block;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 700;
|
|
|
+ line-height: 26px;
|
|
|
+ color: #1d2129;
|
|
|
|
|
|
- .info-card__text {
|
|
|
- margin-bottom: 10px;
|
|
|
+ &::after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ bottom: 2px;
|
|
|
+ width: 36px;
|
|
|
+ height: 8px;
|
|
|
+ border-radius: 4px;
|
|
|
+ background: rgba(33, 153, 248, 0.35);
|
|
|
+ z-index: -1;
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
+.report-block {
|
|
|
& + & {
|
|
|
- margin-top: 10px;
|
|
|
+ margin-top: 16px;
|
|
|
}
|
|
|
|
|
|
- &__title {
|
|
|
- margin-bottom: 4px;
|
|
|
+ &__divider {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 10px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ color: #1d2129;
|
|
|
font-size: 14px;
|
|
|
font-weight: 500;
|
|
|
- line-height: 22px;
|
|
|
- color: #1d2129;
|
|
|
- }
|
|
|
-
|
|
|
- &__text {
|
|
|
- font-size: 12px;
|
|
|
line-height: 20px;
|
|
|
- color: #4e5969;
|
|
|
|
|
|
- & + & {
|
|
|
- margin-top: 2px;
|
|
|
+ &::before,
|
|
|
+ &::after {
|
|
|
+ content: "";
|
|
|
+ flex: 1;
|
|
|
+ height: 1px;
|
|
|
+ background: #e5e6eb;
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
-
|
|
|
-.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%);
|
|
|
+ &__chart {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ width: 100%;
|
|
|
+ overflow-x: auto;
|
|
|
+ overflow-y: hidden;
|
|
|
+ -webkit-overflow-scrolling: touch;
|
|
|
+ border-radius: 8px;
|
|
|
+
|
|
|
+ &--after {
|
|
|
+ margin-top: 10px;
|
|
|
+ margin-bottom: 0;
|
|
|
+
|
|
|
+ .report-block__chart-img {
|
|
|
+ height: auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-.tag-block {
|
|
|
- padding: 12px;
|
|
|
- border-radius: 8px;
|
|
|
- background: #f7f8fa;
|
|
|
+ &__chart-img {
|
|
|
+ display: block;
|
|
|
+ width: auto;
|
|
|
+ max-width: none;
|
|
|
+ height: 145px;
|
|
|
|
|
|
- & + & {
|
|
|
- margin-top: 10px;
|
|
|
+ &--natural {
|
|
|
+ height: 245px;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- &__tag {
|
|
|
- display: inline-block;
|
|
|
- padding: 0 10px;
|
|
|
- border-radius: 2px;
|
|
|
- background: #2199f8;
|
|
|
- color: #fff;
|
|
|
- font-size: 12px;
|
|
|
- line-height: 22px;
|
|
|
+ &__intro {
|
|
|
+ margin: 0 0 10px;
|
|
|
+ font-size: 13px;
|
|
|
+ line-height: 20px;
|
|
|
+ color: #1d2129;
|
|
|
}
|
|
|
|
|
|
- &__text {
|
|
|
- margin-top: 4px;
|
|
|
+ &__note {
|
|
|
+ margin: 0 0 12px;
|
|
|
font-size: 12px;
|
|
|
- line-height: 20px;
|
|
|
- color: #4e5969;
|
|
|
+ line-height: 18px;
|
|
|
+ color: #86909c;
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-.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;
|
|
|
+ &__plain {
|
|
|
+ & + & {
|
|
|
+ margin-top: 12px;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- &__row {
|
|
|
- font-size: 12px;
|
|
|
- line-height: 20px;
|
|
|
- color: #4e5969;
|
|
|
+ &__card {
|
|
|
+ padding: 12px;
|
|
|
+ border-radius: 8px;
|
|
|
+ background: #f7f8fa;
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
|
& + & {
|
|
|
- margin-top: 8px;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &--blue {
|
|
|
+ background: #edf6ff;
|
|
|
+
|
|
|
+ .report-block__item-title {
|
|
|
+ color: #2199f8;
|
|
|
+ }
|
|
|
+
|
|
|
+ .report-block__text {
|
|
|
+ color: #1d2129;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- &__label {
|
|
|
- color: #000;
|
|
|
+ &__item-title {
|
|
|
+ margin-bottom: 4px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #1d2129;
|
|
|
+ }
|
|
|
+
|
|
|
+ &__text {
|
|
|
+ margin: 0;
|
|
|
+ font-size: 13px;
|
|
|
+ line-height: 20px;
|
|
|
+ color: #4e5969;
|
|
|
}
|
|
|
}
|
|
|
|
wangsisi
