|
|
@@ -1,35 +1,109 @@
|
|
|
<template>
|
|
|
<div class="history-risk-report-page">
|
|
|
<custom-header :name="$t('历史风险报告')" isGoBack @goback="handleGoBack"></custom-header>
|
|
|
- <div v-loading="loading" class="history-risk-report-content">
|
|
|
- <div v-if="reportContent" class="rich-text" v-html="reportContent"></div>
|
|
|
- <div v-else-if="!loading" class="empty-text">{{ t('暂无内容') }}</div>
|
|
|
+ <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">当前农场土壤为壤土,酸性至微酸性(pH
|
|
|
+ 6.5),有机质含量(6.25%),肥力良好。在后续的种植管理中,需保持土壤肥力,合理施肥,必要时需加入生石灰中和酸性,避免土壤酸化加剧。</div>
|
|
|
+ <div class="part-text" v-else>当前农场土壤为壤土,酸性至微酸性(pH 5.9),有机质含量(5.52%),肥力良好,但酸性偏低。在后续的种植管理中,需保持土壤肥力,合理施肥,需加入生石灰中和酸性,降低土壤酸化问题。</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>当前农场耕作管理制度完善,未出现频繁翻耕等问题。在后续的种植管理中,需继续维持合理的农事规划和农事操作,保持土壤活力。但由于农场长期种植单一作物,导致土壤养分失衡,因此建议在施肥时多补充有机质和微量元素。同时,建议在水稻休耕时期轮种紫云英等绿肥作物,改善土壤问题。</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="report-box">
|
|
|
+ <div class="box-title">设施投入建议</div>
|
|
|
+ <div class="box-text">
|
|
|
+ <div class="part-text" v-if="currentFarmVariety === 1">考虑到当前农场历史高发风险为高温干旱风险,高发概率达到80%,建议提前规划好喷灌/滴灌系统,以维持农场的日常灌溉,降低高温干旱风险的影响。</div>
|
|
|
+ <div class="part-text" v-else>考虑到当前农场历史高发风险为低温冻害和暴雨涝渍风险,历史出现概率均超过90%,建议提前规划好排水沟渠以及灌溉系统,以便灵活排水灌水,合理控制田间温度和水层深度。</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { useI18n } from "@/i18n";
|
|
|
-const { t } = useI18n();
|
|
|
-import { onActivated, onMounted, ref } from "vue";
|
|
|
-import { useRouter } from "vue-router";
|
|
|
+import { ref, computed } from "vue";
|
|
|
+import { useRouter ,useRoute} from "vue-router";
|
|
|
import customHeader from "@/components/customHeader.vue";
|
|
|
|
|
|
const router = useRouter();
|
|
|
const loading = ref(false);
|
|
|
-const reportContent = ref("");
|
|
|
-
|
|
|
-const getReportDetail = () => {
|
|
|
- loading.value = true;
|
|
|
- VE_API.bbs
|
|
|
- .postDetail({ id: "829511846204542976" })
|
|
|
- .then((res) => {
|
|
|
- reportContent.value = res?.data?.content || "";
|
|
|
- })
|
|
|
- .finally(() => {
|
|
|
- loading.value = 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) {
|
|
|
@@ -38,54 +112,301 @@ const handleGoBack = () => {
|
|
|
}
|
|
|
router.replace("/growth_report");
|
|
|
};
|
|
|
-
|
|
|
-onMounted(() => {
|
|
|
- getReportDetail();
|
|
|
-});
|
|
|
-
|
|
|
-onActivated(() => {
|
|
|
- getReportDetail();
|
|
|
-});
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
.history-risk-report-page {
|
|
|
width: 100%;
|
|
|
height: 100vh;
|
|
|
- background: #ffffff;
|
|
|
+ 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;
|
|
|
|
|
|
- .history-risk-report-content {
|
|
|
- height: calc(100vh - 40px);
|
|
|
- padding: 12px 16px 20px;
|
|
|
+ .report-content-wrap {
|
|
|
+ flex: 1;
|
|
|
+ overflow: auto;
|
|
|
box-sizing: border-box;
|
|
|
- overflow-y: auto;
|
|
|
+ position: relative;
|
|
|
-webkit-overflow-scrolling: touch;
|
|
|
}
|
|
|
|
|
|
- .rich-text {
|
|
|
- font-size: 14px;
|
|
|
- line-height: 1.75;
|
|
|
- color: #333333;
|
|
|
- word-break: break-word;
|
|
|
+ .report-content {
|
|
|
+ background: #abd4ff;
|
|
|
+ background-size: 100% auto;
|
|
|
+ background-position: top center;
|
|
|
+ padding: 0 10px 26px 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: relative;
|
|
|
|
|
|
- ::v-deep(img) {
|
|
|
- max-width: 100%;
|
|
|
- height: auto;
|
|
|
- border-radius: 6px;
|
|
|
+ &.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%);
|
|
|
}
|
|
|
|
|
|
- ::v-deep(table) {
|
|
|
- width: 100% !important;
|
|
|
- table-layout: fixed;
|
|
|
+ .header-img {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .empty-text {
|
|
|
- padding-top: 40px;
|
|
|
- text-align: center;
|
|
|
- color: #999999;
|
|
|
- font-size: 14px;
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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>
|