|
|
@@ -0,0 +1,567 @@
|
|
|
+<template>
|
|
|
+ <div class="achievement-report-page">
|
|
|
+ <custom-header name="报告详情"></custom-header>
|
|
|
+ <div class="report-content-wrap" v-loading="loading">
|
|
|
+ <div class="report-content" ref="reportDom">
|
|
|
+ <!-- <img src="@/assets/img/home/qrcode.png" alt="" class="code-icon" /> -->
|
|
|
+ <img class="header-img" src="@/assets/img/home/report.png" alt="" />
|
|
|
+ <div class="report-header">
|
|
|
+ <!-- <img class="header-book" src="@/assets/img/home/book.png" alt="" /> -->
|
|
|
+ <div class="time-tag">{{ workItem?.executeDate }}</div>
|
|
|
+ <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">{{ workItem?.farmName }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="report-box">
|
|
|
+ <div class="box-title">农情总结</div>
|
|
|
+ <div class="box-text">
|
|
|
+ {{ workItem?.resultInfo || "--" }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="report-box">
|
|
|
+ <div class="box-title">物候与长势</div>
|
|
|
+ <div class="box-text">
|
|
|
+ <div class="box-bg">
|
|
|
+ <span class="box-subtitle">背景描述：</span>
|
|
|
+ {{ workItem?.growthInfo?.description || "--" }}
|
|
|
+ </div>
|
|
|
+ <div class="box-advice">
|
|
|
+ <span class="box-subtitle">对策建议：</span>
|
|
|
+ {{ workItem?.growthInfo?.advice || "--" }}
|
|
|
+ </div>
|
|
|
+ <div class="box-sum">
|
|
|
+ 总结，该问题解决好了，可以达到什么效果。
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="report-box">
|
|
|
+ <div class="box-title">病虫害问题</div>
|
|
|
+ <div class="box-text">
|
|
|
+ <div class="box-bg">
|
|
|
+ <span class="box-subtitle">背景描述：</span>
|
|
|
+ {{ workItem?.growthInfo?.description || "--" }}
|
|
|
+ </div>
|
|
|
+ <div class="box-advice">
|
|
|
+ <span class="box-subtitle">对策建议：</span>
|
|
|
+ {{ workItem?.growthInfo?.advice || "--" }}
|
|
|
+ </div>
|
|
|
+ <div class="box-sum">
|
|
|
+ 总结，该问题解决好了，可以达到什么效果。
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="report-box">
|
|
|
+ <div class="box-title">未来预测</div>
|
|
|
+ <div class="box-text">
|
|
|
+ <div class="box-bg">
|
|
|
+ <span class="box-subtitle">背景描述：</span>
|
|
|
+ {{ workItem?.futureInfo?.description || "--" }}
|
|
|
+ </div>
|
|
|
+ <div class="box-advice">
|
|
|
+ <span class="box-subtitle">对策建议：</span>
|
|
|
+ {{ workItem?.futureInfo?.advice || "--" }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="report-box">
|
|
|
+ <div class="box-text next-info">
|
|
|
+ <div class="box-bg">
|
|
|
+ <span class="box-subtitle">下一次农情互动预告：</span>
|
|
|
+ {{ workItem?.nextInfo?.advice || "--" }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import CustomHeader from "@/components/customHeader.vue";
|
|
|
+import { ref, onActivated, onDeactivated, onUnmounted } from "vue";
|
|
|
+import { useRoute } from "vue-router";
|
|
|
+
|
|
|
+const route = useRoute();
|
|
|
+const loading = ref(false);
|
|
|
+const workItem = ref({
|
|
|
+ executeDate: '2026-02-02',
|
|
|
+ farmName: '荔枝博览园',
|
|
|
+ resultInfo: '近7天时间地点，当下农情指标（物候期指标等等），面临的风险和出现的问题。',
|
|
|
+ growthInfo: {
|
|
|
+ description: '当前处于蒂蛀虫高发期，请及时采集。处于蒂蛀虫高发期',
|
|
|
+ advice: '根据问题写一下需要注意的事项有哪些；简单描述农事该怎么做（可以链接详细的操作贴）；更加详细的意见，等待专家进一步确认。如果都没有问题，那么这个时期高发什么风险，需要密切关注。',
|
|
|
+ },
|
|
|
+ futureInfo: {
|
|
|
+ description: '为什么这个气象风险很重要，对产量有什么影响；',
|
|
|
+ advice: '如果需要做农事，就建议农事，如果暂时不需要做农事，就提醒密切关注长势动态。',
|
|
|
+ },
|
|
|
+ nextInfo: {
|
|
|
+ advice: '时间和主题，主要是为了什么互动，说明其重要性。',
|
|
|
+ },
|
|
|
+});
|
|
|
+function formatArea(val) {
|
|
|
+ const num = typeof val === "number" ? val : parseFloat(val);
|
|
|
+ if (Number.isNaN(num)) return val;
|
|
|
+ return Number.isInteger(num) ? num : num.toFixed(2) + "亩";
|
|
|
+}
|
|
|
+const paramsPage = ref({});
|
|
|
+onActivated(() => {
|
|
|
+ window.scrollTo(0, 0);
|
|
|
+ paramsPage.value = route.query.miniJson ? JSON.parse(route.query.miniJson) : {};
|
|
|
+ // getDetail();
|
|
|
+ // getResultReport();
|
|
|
+});
|
|
|
+
|
|
|
+const getDetail = () => {
|
|
|
+ if (!paramsPage.value.id) return;
|
|
|
+ loading.value = true;
|
|
|
+ VE_API.z_farm_work_record
|
|
|
+ .getDetail({ id: paramsPage.value.id })
|
|
|
+ .then(({ data }) => {
|
|
|
+ workItem.value = data[0];
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ loading.value = false;
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+// 清理数据的函数
|
|
|
+const clearData = () => {
|
|
|
+ workItem.value = {};
|
|
|
+ paramsPage.value = {};
|
|
|
+ loading.value = false;
|
|
|
+};
|
|
|
+
|
|
|
+onDeactivated(() => {
|
|
|
+ clearData();
|
|
|
+});
|
|
|
+
|
|
|
+onUnmounted(() => {
|
|
|
+ clearData();
|
|
|
+});
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.achievement-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%);
|
|
|
+
|
|
|
+ .report-content-wrap {
|
|
|
+ height: calc(100% - 40px);
|
|
|
+ // padding-bottom: 60px;
|
|
|
+ overflow: auto;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: relative;
|
|
|
+ .bottom-btn {
|
|
|
+ z-index: 2;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ background: #fff;
|
|
|
+ height: 60px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0 12px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ box-shadow: 2px 2px 4.5px 0px rgba(0, 0, 0, 0.4);
|
|
|
+ .btn-item {
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ padding: 0 24px;
|
|
|
+ border-radius: 20px;
|
|
|
+ font-size: 14px;
|
|
|
+ &.second {
|
|
|
+ color: #666666;
|
|
|
+ border: 1px solid rgba(153, 153, 153, 0.5);
|
|
|
+ }
|
|
|
+ &.primay {
|
|
|
+ padding: 0 34px;
|
|
|
+ background: linear-gradient(180deg, #76c3ff, #2199f8);
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .code-icon {
|
|
|
+ position: absolute;
|
|
|
+ right: 10px;
|
|
|
+ top: 12px;
|
|
|
+ width: 48px;
|
|
|
+ }
|
|
|
+ .report-content {
|
|
|
+ // background: url("@/assets/img/home/report_bg.png") no-repeat center center;
|
|
|
+ background: linear-gradient(0deg, #9BCCFF, #9BCCFF),
|
|
|
+ linear-gradient(160deg, rgba(255, 255, 255, 0.16) 30%, rgba(255, 255, 255, 0) 72%);
|
|
|
+ background-size: 100% auto;
|
|
|
+ background-position: top center;
|
|
|
+ padding: 24px 16px 16px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: relative;
|
|
|
+ min-height: 100%;
|
|
|
+ .header-img {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .report-header {
|
|
|
+ position: relative;
|
|
|
+ .header-book {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ bottom: -6px;
|
|
|
+ height: 88px;
|
|
|
+ z-index: 10;
|
|
|
+ }
|
|
|
+ .time-tag {
|
|
|
+ background: linear-gradient(137.86deg, #9fd5ff 5.87%, #2199f8 82.98%);
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ .report-title {
|
|
|
+ font-family: "PangMenZhengDao";
|
|
|
+ font-size: 34px;
|
|
|
+ line-height: 38px;
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+ .report-info {
|
|
|
+ padding: 10px 0 16px 0;
|
|
|
+ .info-item {
|
|
|
+ width: fit-content;
|
|
|
+ display: flex;
|
|
|
+ height: 33px;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 18px 0 6px;
|
|
|
+ background: linear-gradient(90deg, rgba(255, 255, 255, 0.58) 0%, rgba(255, 255, 255, 0.0696) 100%);
|
|
|
+ border-radius: 20px;
|
|
|
+ border: 0.5px solid rgba(33, 153, 248, 0.35);
|
|
|
+ gap: 6px;
|
|
|
+ .info-icon {
|
|
|
+ width: 26px;
|
|
|
+ height: 26px;
|
|
|
+ object-fit: cover;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ .info-text {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #2199f8;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .info-item + .info-item {
|
|
|
+ margin-top: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .report-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 8px;
|
|
|
+ background: linear-gradient(0deg, #ffffff 86.32%, #2199f8 136.87%);
|
|
|
+ border: 1px solid #ffffff;
|
|
|
+ border-radius: 8px;
|
|
|
+ gap: 5px;
|
|
|
+ position: relative;
|
|
|
+ .report-box-item {
|
|
|
+ flex: 1;
|
|
|
+ background: rgba(33, 153, 248, 0.1);
|
|
|
+ border-radius: 8px;
|
|
|
+ min-height: 62px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 2px 4px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ .item-content {
|
|
|
+ color: #2199f8;
|
|
|
+ font-size: 14px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .item-title {
|
|
|
+ color: #000000;
|
|
|
+ font-size: 10px;
|
|
|
+ text-align: center;
|
|
|
+ padding-top: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .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;
|
|
|
+ .box-subtitle {
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ .box-bg {
|
|
|
+ font-weight: 400;
|
|
|
+ color: rgba(0, 0, 0, 0.5);
|
|
|
+ }
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ &.next-info {
|
|
|
+ padding: 8px 0 8px 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .report-box + .report-box {
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+ .report-excute {
|
|
|
+ position: relative;
|
|
|
+ margin-top: 12px;
|
|
|
+ .tag-label {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ padding: 4px 10px;
|
|
|
+ background: rgba(54, 52, 52, 0.8);
|
|
|
+ color: #fff;
|
|
|
+ font-size: 12px;
|
|
|
+ border-radius: 8px 0 8px 0;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+ ::v-deep {
|
|
|
+ .carousel-container .carousel-wrapper .carousel-img {
|
|
|
+ min-width: calc(100vw - 32px);
|
|
|
+ width: calc(100vw - 32px);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .download-btn {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 20px;
|
|
|
+ left: 50%;
|
|
|
+ // background: #fff;
|
|
|
+ // box-shadow: 2px 2px 4.5px 0px #00000066;
|
|
|
+ // width: 100%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ }
|
|
|
+
|
|
|
+ .review-hide-box {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ z-index: -1;
|
|
|
+ bottom: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .review-image {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 8px;
|
|
|
+ margin: 12px;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 8px;
|
|
|
+ .review-mask {
|
|
|
+ z-index: 1;
|
|
|
+ pointer-events: none;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 8px;
|
|
|
+ background: linear-gradient(
|
|
|
+ 360deg,
|
|
|
+ rgba(0, 0, 0, 0.78) 0%,
|
|
|
+ rgba(0, 0, 0, 0.437208) 19.87%,
|
|
|
+ rgba(0, 0, 0, 0) 33.99%
|
|
|
+ );
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: baseline;
|
|
|
+ justify-content: end;
|
|
|
+ padding: 12px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ color: #fff;
|
|
|
+ .review-text {
|
|
|
+ font-family: "PangMenZhengDao";
|
|
|
+ font-size: 16px;
|
|
|
+ margin-bottom: 1px;
|
|
|
+ }
|
|
|
+ .review-content {
|
|
|
+ font-size: 10px;
|
|
|
+ line-height: 15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .vs-wrap {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ z-index: 10;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .review-image-item {
|
|
|
+ position: relative;
|
|
|
+ flex: 1;
|
|
|
+ .review-image-item-title {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ background: rgba(54, 52, 52, 0.6);
|
|
|
+ padding: 4px 10px;
|
|
|
+ border-radius: 8px 0 8px 0;
|
|
|
+ backdrop-filter: 4px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ // .review-image-item-img {
|
|
|
+ // width: 100%;
|
|
|
+ // height: 250px;
|
|
|
+ // object-fit: cover;
|
|
|
+ // }
|
|
|
+ .review-image-item-img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+ object-position: center;
|
|
|
+ }
|
|
|
+ .left-img {
|
|
|
+ border-radius: 8px 0 0 8px;
|
|
|
+ }
|
|
|
+ .right-img {
|
|
|
+ border-radius: 0 8px 8px 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.cavans-popup {
|
|
|
+ width: 100%;
|
|
|
+ max-width: 100%;
|
|
|
+ max-height: 92vh;
|
|
|
+ background: none;
|
|
|
+ border-radius: 12px;
|
|
|
+ overflow: auto;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ backdrop-filter: 4px;
|
|
|
+ .cavans-content {
|
|
|
+ text-align: center;
|
|
|
+ padding: 0 12px;
|
|
|
+ height: fit-content;
|
|
|
+ overflow: auto;
|
|
|
+ .current-img {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 底部操作按钮
|
|
|
+ .bottom-actions {
|
|
|
+ flex-shrink: 0;
|
|
|
+
|
|
|
+ .action-buttons {
|
|
|
+ padding: 12px 0 4px 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+
|
|
|
+ .action-btn {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+ &.text-btn {
|
|
|
+ font-size: 12px;
|
|
|
+ color: rgba(255, 255, 255, 0.7);
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon-circle {
|
|
|
+ width: 48px;
|
|
|
+ height: 48px;
|
|
|
+ border-radius: 50%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: #fff;
|
|
|
+ margin-bottom: 4px;
|
|
|
+
|
|
|
+ .el-icon {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ width: 50px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.blue-btn .icon-circle {
|
|
|
+ background: #2199f8;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.green-btn .icon-circle {
|
|
|
+ background: #07c160;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.orange-btn .icon-circle {
|
|
|
+ background: #ff790b;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-label {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .cancel-btn {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #fff;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
