|
|
@@ -1,488 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="history-risk-report-page">
|
|
|
- <custom-header :name="$t('历史风险报告')" isGoBack @goback="handleGoBack"></custom-header>
|
|
|
- <div class="report-content-wrap" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.1)">
|
|
|
- <div class="report-content has-report" :style="{ minHeight: 'calc(100vh - 40px)' }">
|
|
|
- <img class="header-img" src="@/assets/img/home/report.png" alt="" />
|
|
|
-
|
|
|
- <div class="report-header">
|
|
|
- <div class="report-title">农场历史风险报告</div>
|
|
|
- <div class="report-info">
|
|
|
- <div class="info-item">
|
|
|
- <img class="info-icon" src="@/assets/img/home/farm.png" alt="" />
|
|
|
- <span class="info-text">{{ currentFarmName }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="report-box">
|
|
|
- <div class="box-title">历史气象风险统计</div>
|
|
|
- <div class="box-text">
|
|
|
- <div class="box-bg">
|
|
|
- <div class="types-info">
|
|
|
- 基于历史气象站点与遥感数据,飞鸟统计近10年不同物候期冻害、高温干旱等风险的发生频率与平均等级。统计结果如下
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="warning-part" v-if="currentFarmVariety == 1">
|
|
|
- <div class="report-part">
|
|
|
- <div class="part-title">梢期历史气象风险</div>
|
|
|
- <img class="part-img" src="@/assets/img/common/lz-chart-1.png" alt="" />
|
|
|
- </div>
|
|
|
- <div class="report-part">
|
|
|
- <div class="part-title">花期历史气象风险</div>
|
|
|
- <img class="part-img" src="@/assets/img/common/lz-chart-2.png" alt="" />
|
|
|
- </div>
|
|
|
- <div class="report-part">
|
|
|
- <div class="part-title">果期历史气象风险</div>
|
|
|
- <img class="part-img" src="@/assets/img/common/lz-chart-3.png" alt="" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="warning-part" v-else>
|
|
|
- <div class="report-part">
|
|
|
- <div class="part-title">营养生长期历史气象风险</div>
|
|
|
- <img class="part-img" src="@/assets/img/common/sd-chart-1.png" alt="" />
|
|
|
- </div>
|
|
|
- <div class="report-part">
|
|
|
- <div class="part-title">穗期历史气象风险</div>
|
|
|
- <img class="part-img" src="@/assets/img/common/sd-chart-2.png" alt="" />
|
|
|
- </div>
|
|
|
- <div class="report-part">
|
|
|
- <div class="part-title">灌浆结实期历史气象风险</div>
|
|
|
- <img class="part-img" src="@/assets/img/common/sd-chart-3.png" alt="" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="report-box">
|
|
|
- <div class="box-title">土壤改良分析</div>
|
|
|
- <div class="box-text">
|
|
|
- <div
|
|
|
- class="part-text"
|
|
|
- v-if="currentFarmVariety == 1"
|
|
|
- v-html="boldKeywordsInText(SOIL_ANALYSIS_LYCHEE, SOIL_ANALYSIS_LYCHEE_BOLD_KEYWORDS)"
|
|
|
- ></div>
|
|
|
- <div
|
|
|
- class="part-text"
|
|
|
- v-else
|
|
|
- v-html="boldKeywordsInText(SOIL_ANALYSIS_RICE, SOIL_ANALYSIS_RICE_BOLD_KEYWORDS)"
|
|
|
- ></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="report-box">
|
|
|
- <div class="box-title">耕作习惯分析</div>
|
|
|
- <div class="box-text">
|
|
|
- <div class="part-text" v-if="currentFarmVariety == 1">当前农场耕作管理制度完善,未出现频繁翻耕等问题。在后续的种植管理中,需继续维持合理的农事规划和农事操作,保持土壤活力。</div>
|
|
|
- <div
|
|
|
- class="part-text"
|
|
|
- v-else
|
|
|
- v-html="boldKeywordsInText(FARMING_HABIT_RICE, FARMING_HABIT_RICE_BOLD_KEYWORDS)"
|
|
|
- ></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="report-box">
|
|
|
- <div class="box-title">设施投入建议</div>
|
|
|
- <div class="box-text">
|
|
|
- <div
|
|
|
- class="part-text"
|
|
|
- v-if="currentFarmVariety == 1"
|
|
|
- v-html="boldKeywordsInText(FACILITY_ADVICE_LYCHEE, FACILITY_ADVICE_LYCHEE_BOLD_KEYWORDS)"
|
|
|
- ></div>
|
|
|
- <div
|
|
|
- class="part-text"
|
|
|
- v-else
|
|
|
- v-html="boldKeywordsInText(FACILITY_ADVICE_RICE, FACILITY_ADVICE_RICE_BOLD_KEYWORDS)"
|
|
|
- ></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script setup>
|
|
|
-import { ref, computed } from "vue";
|
|
|
-import { useRouter ,useRoute} from "vue-router";
|
|
|
-import customHeader from "@/components/customHeader.vue";
|
|
|
-import { boldKeywordsInText } from "@/utils/boldKeywords";
|
|
|
-
|
|
|
-const SOIL_ANALYSIS_LYCHEE =
|
|
|
- "当前农场土壤为壤土,酸性至微酸性(pH 6.5),有机质含量(6.25%),肥力良好。在后续的种植管理中,需保持土壤肥力,合理施肥,必要时需加入生石灰中和酸性,避免土壤酸化加剧。";
|
|
|
-
|
|
|
-const SOIL_ANALYSIS_LYCHEE_BOLD_KEYWORDS = [
|
|
|
- "壤土",
|
|
|
- "酸性至微酸性(pH 6.5)",
|
|
|
- "有机质含量(6.25%)",
|
|
|
- "必要时需加入生石灰中和酸性",
|
|
|
-];
|
|
|
-
|
|
|
-const SOIL_ANALYSIS_RICE =
|
|
|
- "当前农场土壤为壤土,酸性至微酸性(pH 5.9),有机质含量(5.52%),肥力良好,但酸性偏低。在后续的种植管理中,需保持土壤肥力,合理施肥,需加入生石灰中和酸性,降低土壤酸化问题。";
|
|
|
-
|
|
|
-const SOIL_ANALYSIS_RICE_BOLD_KEYWORDS = [
|
|
|
- "壤土",
|
|
|
- "酸性至微酸性(pH 5.9)",
|
|
|
- "有机质含量(5.52%)",
|
|
|
- "需加入生石灰中和酸性",
|
|
|
-];
|
|
|
-
|
|
|
-const FARMING_HABIT_RICE =
|
|
|
- "当前农场耕作管理制度完善,未出现频繁翻耕等问题。在后续的种植管理中,需继续维持合理的农事规划和农事操作,保持土壤活力。但由于农场长期种植单一作物,导致土壤养分失衡,因此建议在施肥时多补充有机质和微量元素。同时,建议在水稻休耕时期轮种紫云英等绿肥作物,改善土壤问题。";
|
|
|
-
|
|
|
-const FARMING_HABIT_RICE_BOLD_KEYWORDS = [
|
|
|
- "长期种植单一作物",
|
|
|
- "多补充有机质和微量元素",
|
|
|
- "轮种紫云英等绿肥作物",
|
|
|
-];
|
|
|
-
|
|
|
-const FACILITY_ADVICE_LYCHEE =
|
|
|
- "考虑到当前农场历史高发风险为高温干旱风险,高发概率达到80%,建议提前规划好喷灌/滴灌系统,以维持农场的日常灌溉,降低高温干旱风险的影响。";
|
|
|
-
|
|
|
-const FACILITY_ADVICE_LYCHEE_BOLD_KEYWORDS = [
|
|
|
- "高发风险为高温干旱风险",
|
|
|
- "80%",
|
|
|
- "规划好喷灌/滴灌系统",
|
|
|
-];
|
|
|
-
|
|
|
-const FACILITY_ADVICE_RICE =
|
|
|
- "考虑到当前农场历史高发风险为低温冻害和暴雨涝渍风险,历史出现概率均超过90%,建议提前规划好排水沟渠以及灌溉系统,以便灵活排水灌水,合理控制田间温度和水层深度。";
|
|
|
-
|
|
|
-const FACILITY_ADVICE_RICE_BOLD_KEYWORDS = [
|
|
|
- "高发风险为低温冻害和暴雨涝渍风险",
|
|
|
- "90%",
|
|
|
- "规划好排水沟渠以及灌溉系统",
|
|
|
-];
|
|
|
-
|
|
|
-const router = useRouter();
|
|
|
-const loading = ref(false);
|
|
|
-const route = useRoute();
|
|
|
-const currentFarmName = computed(() => route.query.currentFarmName);
|
|
|
-const currentFarmVariety = computed(() => route.query.farmVariety);
|
|
|
-const riskList = ref([{ title: "梢期历史气象风险", description: "xxx" }]);
|
|
|
-const adviceList = ref([{ title: "xxx", description: "xxx" }]);
|
|
|
-const patrolList = ref([{ title: "xxx", description: "xxx" }]);
|
|
|
-const workItems = ref([
|
|
|
- {
|
|
|
- title: "xxx",
|
|
|
- backgroundDesc: "xxx",
|
|
|
- suggestion: "xxx",
|
|
|
- summary: "xxx",
|
|
|
- },
|
|
|
-]);
|
|
|
-
|
|
|
-const handleGoBack = () => {
|
|
|
- if (window.history.length > 1) {
|
|
|
- router.back();
|
|
|
- return;
|
|
|
- }
|
|
|
- router.replace("/growth_report");
|
|
|
-};
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped lang="scss">
|
|
|
-.history-risk-report-page {
|
|
|
- width: 100%;
|
|
|
- height: 100vh;
|
|
|
- background: linear-gradient(195.35deg, #d4e4ff 16.34%, rgba(93, 189, 255, 0) 50.3%),
|
|
|
- linear-gradient(156.64deg, rgba(255, 255, 255, 0.16) 27.7%, rgba(255, 255, 255, 0) 72.82%);
|
|
|
- overflow: hidden;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
-
|
|
|
- .report-content-wrap {
|
|
|
- flex: 1;
|
|
|
- overflow: auto;
|
|
|
- box-sizing: border-box;
|
|
|
- position: relative;
|
|
|
- -webkit-overflow-scrolling: touch;
|
|
|
- }
|
|
|
-
|
|
|
- .report-content {
|
|
|
- background: #abd4ff;
|
|
|
- background-size: 100% auto;
|
|
|
- background-position: top center;
|
|
|
- padding: 0 10px 26px 10px;
|
|
|
- box-sizing: border-box;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- &.has-report {
|
|
|
- min-height: 100%;
|
|
|
- background: linear-gradient(0deg, #9bccff, #9bccff),
|
|
|
- linear-gradient(156.64deg, rgba(255, 255, 255, 0.16) 27.7%, rgba(255, 255, 255, 0) 72.82%);
|
|
|
- }
|
|
|
-
|
|
|
- .header-img {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .type-tabs {
|
|
|
- background: rgba(255, 255, 255, 0.8);
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- flex-wrap: wrap;
|
|
|
- gap: 8px;
|
|
|
- width: fit-content;
|
|
|
- border-radius: 5px;
|
|
|
- padding: 5px;
|
|
|
- margin-bottom: 22px;
|
|
|
-
|
|
|
- .type-item {
|
|
|
- height: 28px;
|
|
|
- line-height: 28px;
|
|
|
- text-align: center;
|
|
|
- padding: 0 6px;
|
|
|
- min-width: 80px;
|
|
|
- color: #9a9a9a;
|
|
|
- background: #ffffff;
|
|
|
- box-sizing: border-box;
|
|
|
- border-radius: 2px;
|
|
|
-
|
|
|
- &.type-item-active {
|
|
|
- background: #2199f8;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .report-header {
|
|
|
- position: relative;
|
|
|
- padding-top: 14px;
|
|
|
-
|
|
|
- .time-tag {
|
|
|
- background: #2199f8;
|
|
|
- border-radius: 5px 0 5px 0;
|
|
|
- height: 23px;
|
|
|
- line-height: 23px;
|
|
|
- font-size: 13px;
|
|
|
- font-weight: 500;
|
|
|
- color: #fff;
|
|
|
- padding: 0 9px;
|
|
|
- width: fit-content;
|
|
|
- margin-bottom: 4px;
|
|
|
- }
|
|
|
-
|
|
|
- .report-title {
|
|
|
- font-family: "PangMenZhengDao";
|
|
|
- font-size: 34px;
|
|
|
- line-height: 38px;
|
|
|
- color: #000000;
|
|
|
- }
|
|
|
-
|
|
|
- .report-info {
|
|
|
- padding: 12px 0 28px 0;
|
|
|
-
|
|
|
- .info-item {
|
|
|
- width: fit-content;
|
|
|
- display: flex;
|
|
|
- height: 33px;
|
|
|
- align-items: center;
|
|
|
- padding: 0 18px 0 6px;
|
|
|
- background: rgba(255, 255, 255, 0.58);
|
|
|
- backdrop-filter: blur(5px);
|
|
|
- border-radius: 20px;
|
|
|
- gap: 6px;
|
|
|
-
|
|
|
- .info-icon {
|
|
|
- width: 26px;
|
|
|
- height: 26px;
|
|
|
- object-fit: cover;
|
|
|
- border-radius: 50%;
|
|
|
- }
|
|
|
-
|
|
|
- .info-text {
|
|
|
- font-size: 14px;
|
|
|
- color: #000;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .report-box {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- padding: 8px 12px;
|
|
|
- background: #fff;
|
|
|
- border: 1px solid #ffffff;
|
|
|
- border-radius: 8px;
|
|
|
- gap: 5px;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .box-title {
|
|
|
- position: absolute;
|
|
|
- top: -8px;
|
|
|
- left: -1px;
|
|
|
- height: 32px;
|
|
|
- line-height: 26px;
|
|
|
- font-family: "PangMenZhengDao";
|
|
|
- font-size: 14px;
|
|
|
- padding: 0 10px;
|
|
|
- color: #ffffff;
|
|
|
- background: url("@/assets/img/home/title-bg.png") no-repeat center center / 100% 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .box-text {
|
|
|
- padding: 22px 0 8px 0;
|
|
|
- font-weight: 350;
|
|
|
- line-height: 21px;
|
|
|
- width: 100%;
|
|
|
- box-sizing: border-box;
|
|
|
-
|
|
|
- .pre-text {
|
|
|
- white-space: pre-line;
|
|
|
- word-break: break-word;
|
|
|
- }
|
|
|
-
|
|
|
- .box-subtitle {
|
|
|
- color: #000;
|
|
|
- }
|
|
|
-
|
|
|
- .box-bg {
|
|
|
- font-weight: 400;
|
|
|
- color: rgba(0, 0, 0, 0.5);
|
|
|
- margin-bottom: 8px;
|
|
|
- }
|
|
|
-
|
|
|
- .part-text {
|
|
|
- :deep(.text-bold) {
|
|
|
- font-weight: 700;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .types-info {
|
|
|
- background: rgba(33, 153, 248, 0.1);
|
|
|
- color: #000000;
|
|
|
- padding: 6px;
|
|
|
- border-radius: 5px;
|
|
|
-
|
|
|
- .text-bold {
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .tp-img {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: repeat(3, 1fr);
|
|
|
- gap: 6px;
|
|
|
- width: 100%;
|
|
|
- margin-top: 8px;
|
|
|
- box-sizing: border-box;
|
|
|
-
|
|
|
- img {
|
|
|
- width: 100%;
|
|
|
- height: 78px;
|
|
|
- object-fit: contain;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .report-part {
|
|
|
- color: rgba(0, 0, 0, 0.5);
|
|
|
-
|
|
|
- .part-title {
|
|
|
- background: #2199f8;
|
|
|
- height: 24px;
|
|
|
- line-height: 24px;
|
|
|
- padding: 0 8px;
|
|
|
- color: #fff;
|
|
|
- border-radius: 2px;
|
|
|
- width: fit-content;
|
|
|
- }
|
|
|
-
|
|
|
- .part-img {
|
|
|
- width: 100%;
|
|
|
- height: 180px;
|
|
|
- margin-top: 6px;
|
|
|
- object-fit: cover;
|
|
|
- }
|
|
|
-
|
|
|
- .part-text {
|
|
|
- padding-top: 6px;
|
|
|
- :deep(.text-bold) {
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .part-top {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .warning-part+.warning-part {
|
|
|
- margin-top: 8px;
|
|
|
- }
|
|
|
-
|
|
|
- .report-part+.report-part {
|
|
|
- margin-top: 8px;
|
|
|
- }
|
|
|
-
|
|
|
- .warning-part {
|
|
|
- background: rgba(178, 178, 178, 0.08);
|
|
|
- border-radius: 5px;
|
|
|
- padding: 11px 6px 6px;
|
|
|
- color: rgba(0, 0, 0, 0.5);
|
|
|
- width: 100%;
|
|
|
- box-sizing: border-box;
|
|
|
-
|
|
|
- .warning-title {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- gap: 10px;
|
|
|
- padding-bottom: 13px;
|
|
|
-
|
|
|
- .title-l {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .title-line {
|
|
|
- width: 68px;
|
|
|
- height: 1px;
|
|
|
- background: linear-gradient(90deg,
|
|
|
- rgba(118, 118, 118, 0) 0%,
|
|
|
- rgba(118, 118, 118, 0.4) 100%);
|
|
|
-
|
|
|
- &.title-line-right {
|
|
|
- background: linear-gradient(270deg,
|
|
|
- rgba(118, 118, 118, 0) 0%,
|
|
|
- rgba(118, 118, 118, 0.4) 100%);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .title-block {
|
|
|
- width: 6px;
|
|
|
- height: 6px;
|
|
|
- background: rgba(61, 61, 61, 0.2);
|
|
|
- transform: rotate(45deg);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .box-advice {
|
|
|
- color: rgba(0, 0, 0, 0.5);
|
|
|
- padding-top: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .box-sum {
|
|
|
- margin-top: 10px;
|
|
|
- background: rgba(33, 153, 248, 0.1);
|
|
|
- border-radius: 5px;
|
|
|
- padding: 10px;
|
|
|
- line-height: 20px;
|
|
|
- color: #2199f8;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .report-box+.report-box {
|
|
|
- margin-top: 20px;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|