Ver código fonte

feat:修改报告里面的内容

wangsisi 12 horas atrás
pai
commit
fae0370666

+ 1 - 1
src/views/old_mini/growth_report/components/PlotDetailContent.vue

@@ -85,7 +85,7 @@
 
             <div class="plot-detail-content__history-panel">
                 <div class="plot-detail-content__history-panel-header">
-                    {{ currentHistoryTab.summaryTitle }}11
+                    {{ currentHistoryTab.summaryTitle }}11 
                 </div>
             </div>
         </div>

+ 110 - 41
src/views/old_mini/growth_report/components/RiskReportContent.vue

@@ -1,46 +1,91 @@
 <template>
-    <div class="risk-report-content">
+    <div
+        class="risk-report-content"
+        :class="{ 'risk-report-content--scrollable': !loading && !isEmpty }"
+    >
         <div v-if="loading" class="panel-state">{{ t("agriFile.loading") }}</div>
-        <div v-else-if="!riskList.length" class="panel-state">{{ t("growthReport.noRiskData") }}</div>
-        <div
-            v-else
-            v-for="(item, index) in riskList"
-            :key="index"
-            class="risk-card"
-        >
-            <div class="risk-card__head">
-                <img class="risk-card__icon" src="@/assets/img/report/weather-icon.png" alt="" />
-                <span class="risk-card__label">{{ item.title || t("growthReport.weatherRisk") }}</span>
+        <div v-else-if="isEmpty" class="panel-state">{{ t("growthReport.noRiskData") }}</div>
+        <template v-else>
+            <div v-if="hasRiskSection" class="report-section">
+                <div class="report-section__head">
+                    <img class="report-section__icon" :src="riskSection.icon || weatherIcon" alt="" />
+                    <span class="report-section__title">{{ riskSection.title || t("growthReport.weatherRisk") }}</span>
+                </div>
+                <div v-if="riskSection.summary" class="risk-summary-card">
+                    {{ riskSection.summary }}
+                </div>
+                <div
+                    v-for="(item, index) in riskSection.items"
+                    :key="`risk-${index}`"
+                    class="risk-detail-card"
+                >
+                    <div
+                        class="risk-detail-card__text"
+                        v-html="formatBoldText(item.description, item.boldKeywords)"
+                    ></div>
+                </div>
             </div>
-            <div class="risk-card__content">
-                <img class="risk-card__thumb" :src="item.image || defaultThumb" alt="" />
-                <span class="risk-card__desc">{{ item.description }}</span>
+
+            <div v-if="adviceList.length" class="report-section">
+                <div class="report-section__head">
+                    <img class="report-section__icon" :src="adviceIcon" alt="" />
+                    <span class="report-section__title">{{ t("growthReport.farmAdvice") }}</span>
+                </div>
+                <div
+                    v-for="(item, index) in adviceList"
+                    :key="`advice-${index}`"
+                    class="advice-card"
+                >
+                    <div class="advice-card__title">{{ item.title }}</div>
+                    <div class="advice-card__desc">{{ item.description }}</div>
+                </div>
             </div>
-        </div>
+        </template>
     </div>
 </template>
 
 <script setup>
+import { computed } from "vue";
 import { useI18n } from "@/i18n";
+import { boldKeywordsInText } from "@/utils/boldKeywords";
 
 const { t } = useI18n();
 
-defineProps({
+const props = defineProps({
     loading: {
         type: Boolean,
         default: false,
     },
-    riskList: {
+    riskSection: {
+        type: Object,
+        default: () => ({}),
+    },
+    adviceList: {
         type: Array,
         default: () => [],
     },
 });
 
-const defaultThumb = require("@/assets/img/home/banner.png");
+const weatherIcon = require("@/assets/img/report/weather-icon.png");
+const adviceIcon = require("@/assets/img/report/wh-icon.png");
+
+const hasRiskSection = computed(() => {
+    return Boolean(props.riskSection?.summary || props.riskSection?.items?.length);
+});
+
+const isEmpty = computed(() => {
+    return !hasRiskSection.value && !props.adviceList.length;
+});
+
+const formatBoldText = (text, keywords) => boldKeywordsInText(text, keywords);
 </script>
 
 <style lang="scss" scoped>
 .risk-report-content {
+    &--scrollable {
+        padding-bottom: 50px;
+    }
+
     .panel-state {
         text-align: center;
         color: #9a9a9a;
@@ -48,48 +93,72 @@ const defaultThumb = require("@/assets/img/home/banner.png");
         padding: 20px 0;
     }
 
-    .risk-card + .risk-card {
-        margin-top: 10px;
+    .report-section + .report-section {
+        margin-top: 16px;
     }
 
-    .risk-card {
+    .report-section {
         &__head {
             display: flex;
             align-items: center;
-            gap: 4px;
+            gap: 6px;
             margin-bottom: 10px;
         }
 
         &__icon {
             width: 18px;
-            height: 16px;
+            height: 15px;
         }
 
-        &__label {
-            font-weight: 500;
-            color: #474747;
+        &__title {
+            font-size: 15px;
+            font-weight: 600;
+            color: #333;
         }
+    }
 
-        &__content {
-            display: flex;
-            align-items: center;
-            gap: 10px;
+    .risk-summary-card {
+        padding: 8px;
+        border-radius: 5px;
+        background: rgba(33, 153, 248, 0.1);
+        color: #2199F8;
+        font-size: 13px;
+    }
+
+    .risk-detail-card {
+        margin-top: 8px;
+        padding: 12px;
+        border-radius: 8px;
+        background: #f7f8fa;
+
+        &__text {
+            font-size: 13px;
+            color: rgba(6, 6, 6, 0.5);
+
+            :deep(.text-bold) {
+                color: #060606;
+            }
         }
+    }
 
-        &__thumb {
-            width: 63px;
-            height: 63px;
-            border-radius: 4px;
-            object-fit: cover;
+    .advice-card {
+        margin-top: 8px;
+        padding: 12px;
+        border-radius: 8px;
+        background: #f7f8fa;
+
+        &__title {
+            font-size: 14px;
+            font-weight: 600;
+            color: #333;
+            line-height: 1.5;
+            margin-bottom: 6px;
         }
 
         &__desc {
-            color: rgba(6, 6, 6, 0.5);
-            display: -webkit-box;
-            -webkit-box-orient: vertical;
-            -webkit-line-clamp: 3;
-            line-clamp: 3;
-            overflow: hidden;
+            font-size: 13px;
+            line-height: 1.65;
+            color: rgba(0, 0, 0, 0.5);
         }
     }
 }

+ 46 - 6
src/views/old_mini/growth_report/components/RiskReportPanel.vue

@@ -47,7 +47,11 @@
             </div>
 
             <div class="panel-body">
-                <risk-report-content :loading="loading" :risk-list="riskList" />
+                <risk-report-content
+                    :loading="loading"
+                    :risk-section="riskSection"
+                    :advice-list="adviceList"
+                />
             </div>
         </template>
 
@@ -102,16 +106,52 @@ const formatReportDate = (date = new Date(), lang = "zh") => {
 
 const reportDate = computed(() => formatReportDate(new Date(), locale.value));
 const loading = ref(false);
-const riskList = computed(() => [
+const riskSection = computed(() => ({
+    title: "高温高湿风险",
+    summary:
+        "预计高温高湿风险达到高风险等级(Ⅲ级),持续性高温高湿不仅直接加重病虫危害,还将迫使种植户增加农药施用频次,推高生产成本,进而影响稻米品质与种植效益,构成基地水稻中后期生产的关键气象风险。",
+    items: [
+        {
+            description:
+                "预计未来十天潢涌基地将进入 持续高温高湿状态,日均温普遍维持在 28℃ 以上,相对湿度超过 80%,为水稻病虫害的发生与流行提供了充分的气象条件。在此背景下,水稻纹枯病 可能急剧发展,经函数对病虫气象适宜度进行计算,并叠加前期积累的气象胁迫背景,计算得到病虫胁迫指数为 6(0~9范围,0~3为低风险,4~6为中风险,7~9为高风险),达到 高风险等级(Ⅲ级),重发田块发病率 可超过 60%,可导致 10%~15% 的产量损失。",
+            boldKeywords: [
+                "持续高温高湿状态",
+                "28℃",
+                "80%",
+                "水稻纹枯病",
+                // "6",
+                "高风险等级",
+                "重发田块发病率",
+                "60%",
+                "10%~15%",
+            ],
+        },
+        {
+            description:
+                "灌浆期遇高湿阴雨天气,稻瘟病 呈 中等偏重 发生趋势,感病品种 穗颈瘟 发病率可达 22.8% 。同时,稻飞虱、稻纵卷叶螟等迁飞性害虫在高温高湿环境中繁殖速度加快,若与台风外围虫源叠加,可造成 20% 左右的减产风险。此外,25~30℃日均温与80%以上相对湿度的组合,极有利于 水稻跗线螨 种群快速增长,可能导致叶片褪绿、千粒重下降 3%~5%。",
+            boldKeywords: [
+                "稻瘟病",
+                "中等偏重",
+                "穗颈瘟",
+                "22.8%",
+                "20%",
+                "水稻跗线螨",
+                " 3%~5%",
+            ],
+        },
+    ],
+}));
+
+const adviceList = computed(() => [
     {
-        title: t("growthReport.weatherRisk"),
+        title: "田间水肥调控(即刻执行)",
         description:
-            "花期短暂,果期集中,成熟迅速花期短暂,花期短暂,果期集中,成熟迅速花期短暂",
+            "叶面补钾增强抗性:每亩喷施磷酸二氢钾100克,兑水30公斤,提高茎秆硬度和植株抗病能力。"
     },
     {
-        title: t("growthReport.weatherRisk"),
+        title: "应急防控(未来3天内完成)",
         description:
-            "花期短暂,果期集中,成熟迅速花期短暂,花期短暂,果期集中,成熟迅速花期短暂",
+            "立即喷施苯醚甲环唑·嘧菌酯悬浮剂,或井冈霉素水剂,重点喷施水稻茎秆中下部。重病田块间隔7天再补防一次。",
     },
 ]);
 

+ 3 - 0
src/views/old_mini/work_execute/index.vue

@@ -412,6 +412,9 @@ const getRegionRecordParams = (workOperationType) => ({
     farm_id: localStorage.getItem('selectedFarmId'),
     time: filterDate.value,
     work_operation_type: workOperationType,
+    // farm_id: '320',
+    // time: '2026-06-30',
+    // work_operation_type: workOperationType,
 });
 
 const taskListsByType = ref({ 0: [], 1: [], 2: [], 3: [] });