feat：添加农事详情页面

src/components/pageComponents/ArchivesFarmTimeLine.vue

@@ -34,7 +34,7 @@
                                     <div class="card-left" :style="{ width: fw.sourceDataJson && fw.sourceDataJson.resFilename ? 'calc(100% - 45px)' : '100%' }" v-if="pageType === 'agri_plan'">
                                         <div class="left-info">
                                             <div class="left-date">{{ formatDate(fw.createTime) }}</div>
-                                            <div class="text">
+                                            <div class="text" @click.stop="handleStatusDetail(fw)">
                                                 <span class="van-ellipsis">{{ shouldShowBlue(p) ? '物候进程' : fw.title }}</span>
                                                 <el-icon v-if="shouldShowBlue(p)"><ArrowRight /></el-icon>
                                             </div>
@@ -47,7 +47,7 @@
                                     <div class="card-left agri-record-card" v-else>
                                         <div class="left-info">
                                             <div class="left-date">{{ formatDate(fw.createTime) }}</div>
-                                            <div class="text van-ellipsis" @click="handleStatusDetail(fw)">
+                                            <div class="text van-ellipsis" @click.stop="handleStatusDetail(fw)">
                                                 <span class="text-name">梢期杀虫</span>
                                                 <el-icon><ArrowRight /></el-icon>
                                             </div>
@@ -752,7 +752,7 @@ watch(
 
 const handleStatusDetail = (fw) => {
     router.push({
-        path: "/status_detail",
+        path: props.pageType === 'agri_plan' ? "/agricultural_detail" : "/status_detail",
         query: { miniJson: JSON.stringify({ id: fw.id }) },
     });
 };

src/router/globalRoutes.js

@@ -305,6 +305,12 @@ export default [
         name: "ReviewResults",
         component: () => import("@/views/old_mini/monitor/subPages/reviewResults.vue"),
     },
+    // 农情采样详情
+    {
+        path: "/agricultural_detail",
+        name: "AgriculturalDetail",
+        component: () => import("@/views/old_mini/monitor/subPages/agriculturalDetail.vue"),
+    },
     // 农事方案
     {
         path: "/agricultural_plan",

src/views/old_mini/monitor/subPages/agriculturalDetail.vue

@@ -0,0 +1,149 @@
+<template>
+    <div class="agricultural-detail">
+        <custom-header name="农事详情"></custom-header>
+
+        <div class="detail-content">
+            <!-- 采样信息卡片 -->
+            <div class="card-wrap">
+                <div class="card-box sampling-card">
+                    <div class="sampling-title">采样时间: {{ samplingTime }}</div>
+                    <div class="sampling-desc">{{ samplingDesc }}</div>
+                </div>
+            </div>
+
+            <!-- 农情照片卡片 -->
+            <div class="card-wrap">
+                <div class="card-box photo-card">
+                    <div class="card-title">农情照片</div>
+                    <div class="area-btns">
+                        <div v-for="(area, idx) in areaList" :key="idx" class="area-btn"
+                            :class="{ active: activeAreaIndex === idx }" @click="activeAreaIndex = idx">
+                            {{ area }}区
+                        </div>
+                    </div>
+                    <div class="ratio-tip">出现新梢的果树占比为{{ currentRatio }}%</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { useRouter, useRoute } from "vue-router";
+import { ref, computed } from "vue";
+import customHeader from "@/components/customHeader.vue";
+
+const router = useRouter();
+const route = useRoute();
+
+// 从路由 miniJson 解析 id
+const detailId = ref(null);
+if (route.query.miniJson) {
+    try {
+        const mini = JSON.parse(route.query.miniJson);
+        detailId.value = mini.id ?? null;
+    } catch (_) {
+        console.error("解析 miniJson 失败", _);
+    }
+}
+
+// 采样时间、描述（后续可接接口）
+const samplingTime = ref("2025.05.06");
+const samplingDesc = ref("本次飞巡采样了1区、2区和5区,拍摄了120棵树");
+
+// 区域列表与当前选中
+const areaList = ref(["1", "2", "3", "3"]);
+const activeAreaIndex = ref(0);
+
+// 当前选中区的占比（示例数据，可按区区分）
+const ratioByArea = ["5", "8", "12", "12"];
+const currentRatio = computed(() => ratioByArea[activeAreaIndex.value] ?? "5");
+
+</script>
+
+<style lang="scss" scoped>
+.agricultural-detail {
+    min-height: 100vh;
+    width: 100%;
+    background: #f2f3f5;
+
+    .detail-content {
+        padding: 12px;
+        padding-bottom: 24px;
+        box-sizing: border-box;
+    }
+}
+
+.card-wrap {
+    margin-bottom: 12px;
+}
+
+.card-box {
+    background: #fff;
+    border-radius: 8px;
+    padding: 12px 16px;
+    box-sizing: border-box;
+}
+
+.sampling-card {
+    .sampling-title {
+        font-size: 16px;
+        font-weight: 500;
+        color: #333;
+        margin-bottom: 6px;
+    }
+
+    .sampling-desc {
+        font-size: 14px;
+        color: #767676;
+        line-height: 1.5;
+    }
+}
+
+.photo-card {
+    .card-title {
+        font-size: 16px;
+        font-weight: bold;
+        color: #333;
+        margin-bottom: 12px;
+    }
+
+    .area-btns {
+        display: flex;
+        flex-wrap: nowrap;
+        gap: 8px;
+        margin-bottom: 12px;
+        overflow-x: auto;
+        padding-bottom: 4px;
+        -webkit-overflow-scrolling: touch;
+
+        &::-webkit-scrollbar {
+            display: none;
+        }
+
+        .area-btn {
+            padding: 0 14px;
+            height: 32px;
+            line-height: 32px;
+            font-size: 14px;
+            color: #333;
+            background: #f2f3f5;
+            border-radius: 16px;
+            white-space: nowrap;
+
+            &.active {
+                background: #2199f8;
+                color: #fff;
+            }
+        }
+    }
+
+    .ratio-tip {
+        font-size: 14px;
+        color: #2199f8;
+        padding: 10px 12px;
+        background: rgba(33, 153, 248, 0.08);
+        border-radius: 8px;
+    }
+}
+</style>