feat:添加种植方案页面

src/views/old_mini/mine/index.vue

@@ -206,12 +206,12 @@ const cellItems = computed(() => {
     } else {
         return [
             {
-                title: "我的消息",
+                title: "系统提醒",
                 path: "/message",
             },
             {
-                title: "农事方案",
-                path: "/agricultural_plan",
+                title: "种植方案",
+                path: "/plan?farmId=101532&pageType=plant",
             },
             {
                 title: "服务记录",

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

@@ -1,8 +1,14 @@
 <template>
     <div class="plan-page">
-        <custom-header name="农事规划"></custom-header>
+        <custom-header :name="pageType === 'plant' ? '种植方案' : '农事规划'"></custom-header>
         <div class="plan-content">
-            <div class="timeline-container" ref="timelineContainerRef">
+            <div class="plan-content-header" v-if="pageType === 'plant'">
+                <el-select class="select-item" v-model="value" placeholder="选择品类">
+                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+                </el-select>
+                <tab-list type="light" v-model="active" :tabs="tabs" @change="handleTabChange" />
+            </div>
+            <div class="timeline-container" ref="timelineContainerRef" :class="{ 'timeline-container-plant': pageType === 'plant' }">
                 <div class="timeline-list" :style="getListStyle">
                     <div class="timeline-middle-line"></div>
                     <!-- 物候期覆盖条（progress 为起点，progress2 为终点，单位 %） -->
@@ -88,12 +94,17 @@
     <!-- 新增：激活上传弹窗 -->
     <active-upload-popup ref="activeUploadPopupRef" @handleUploadSuccess="getFarmWorkPlan"></active-upload-popup>
     <!-- 互动设置弹窗 -->
-    <interact-popup ref="interactPopupRef" @handleSaveSuccess="getFarmWorkPlan" @handleDeleteInteract="handleDeleteInteract"></interact-popup>
+    <interact-popup
+        ref="interactPopupRef"
+        @handleSaveSuccess="getFarmWorkPlan"
+        @handleDeleteInteract="handleDeleteInteract"
+    ></interact-popup>
 </template>
 
 <script setup>
 import { ref, onMounted, computed, nextTick } from "vue";
 import customHeader from "@/components/customHeader.vue";
+import tabList from "@/components/pageComponents/TabList.vue";
 import { useRouter, useRoute } from "vue-router";
 import detailDialog from "@/components/detailDialog.vue";
 import eventBus from "@/api/eventBus";
@@ -120,7 +131,41 @@ const getCurrentSeason = () => {
     }
 };
 
+const active = ref(1);
+const tabs = ref([
+    {
+        id: 1,
+        name: "标准化方案",
+    },
+    {
+        id: 2,
+        name: "全托管方案",
+    },
+    {
+        id: 3,
+        name: "半托管方案",
+    },
+]);
+const handleTabChange = (id, item) => {
+    active.value = id;
+    console.log(id, item);
+};
+
+const value = ref("1");
+const options = ref([
+    {
+        value: "1",
+        label: "荔枝",
+    },
+    {
+        value: "2",
+        label: "全托管方案",
+    },
+]);
+
+const pageType = ref("");
 onMounted(() => {
+    pageType.value = route.query.pageType || "";
     getFarmWorkPlan();
 });
 
@@ -214,9 +259,9 @@ const handleEdit = (item) => {
     if (interactPopupRef.value) {
         interactPopupRef.value.showPopup({
             arrangeIdVal: item.id,
-            interactTitleVal: item.farmWorkName || '梢期杀虫', // 使用农事名称作为标题
-            interactTimeVal: item.interactTime || '', // 如果有已保存的互动时间
-            forceTriggerTimeVal: item.forceTriggerTime || '', // 如果有已保存的强制触发时间
+            interactTitleVal: item.farmWorkName || "梢期杀虫", // 使用农事名称作为标题
+            interactTimeVal: item.interactTime || "", // 如果有已保存的互动时间
+            forceTriggerTimeVal: item.forceTriggerTime || "", // 如果有已保存的强制触发时间
             interactQuestionVal: item.interactQuestion, // 如果有已保存的互动问题
         });
     }
@@ -264,7 +309,7 @@ const getListStyle = computed(() => {
     const minP = minProgress.value;
     const maxP = maxProgress.value;
     const range = Math.max(1, maxP - minP); // 避免除0
-    const total = (solarTerms.value?.length || 0) * 250;
+    const total = (solarTerms.value?.length || 0) * 450;
     const minH = total; // 无上下留白
     return { minHeight: `${minH}px` };
 });
@@ -274,7 +319,7 @@ const getTermStyle = (t) => {
     const minP = minProgress.value;
     const maxP = maxProgress.value;
     const range = Math.max(1, maxP - minP); // 避免除0
-    const total = (solarTerms.value?.length || 0) * 250;
+    const total = (solarTerms.value?.length || 0) * 450;
     // 将progress映射到0开始的位置，最小progress对应top: 0
     const normalizedP = range > 0 ? ((p - minP) / range) * 100 : 0;
     const top = (normalizedP / 100) * total;
@@ -305,7 +350,7 @@ const handleSeasonClick = (seasonValue) => {
     const minP = minProgress.value;
     const maxP = maxProgress.value;
     const range = Math.max(1, maxP - minP);
-    const total = (solarTerms.value?.length || 0) * 250;
+    const total = (solarTerms.value?.length || 0) * 450;
     const normalizedP = range > 0 ? ((p - minP) / range) * 100 : 0;
     const targetTop = (normalizedP / 100) * total; // 内容内的像素位置
     const wrap = timelineContainerRef.value;
@@ -327,7 +372,7 @@ const getPhenologyBarStyle = (item) => {
     const minP = minProgress.value;
     const maxP = maxProgress.value;
     const range = Math.max(1, maxP - minP);
-    const total = (solarTerms.value?.length || 0) * 250; // 有效绘制区高度（px）
+    const total = (solarTerms.value?.length || 0) * 450; // 有效绘制区高度（px）
     // 将progress映射到0开始的位置
     const normalizedStart = range > 0 ? ((start - minP) / range) * 100 : 0;
     const normalizedEnd = range > 0 ? ((end - minP) / range) * 100 : 0;
@@ -393,7 +438,7 @@ const getPhenologyBarHeight = (item) => {
     const minP = minProgress.value;
     const maxP = maxProgress.value;
     const range = Math.max(1, maxP - minP);
-    const total = (solarTerms.value?.length || 0) * 250;
+    const total = (solarTerms.value?.length || 0) * 450;
     // 将progress映射到0开始的位置
     const normalizedStart = range > 0 ? ((start - minP) / range) * 100 : 0;
     const normalizedEnd = range > 0 ? ((end - minP) / range) * 100 : 0;
@@ -409,22 +454,42 @@ const getReproductiveItemHeight = (phenologyItem) => {
     // 如果列表为空，返回 barHeight；否则等分
     return listLength > 0 ? barHeight / listLength : barHeight;
 };
-
 </script>
 
 <style scoped lang="scss">
 .plan-page {
     width: 100%;
     height: 100vh;
-    background: #fff;
+    background: #f5f7fb;
     .plan-content {
         padding: 12px 0;
+        .plan-content-header {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            margin-bottom: 10px;
+            margin-left: 12px;
+            .select-item{
+                width: 82px;
+                ::v-deep {
+                    .el-select__wrapper {
+                        box-shadow: none;
+                        border-radius: 25px;
+                        border: 0.5px solid rgba(153, 153, 153, 0.5);
+                    }
+                }
+            }
+        }
+        
         .timeline-container {
             height: calc(100vh - 40px - 73px);
             overflow: auto;
             position: relative;
             box-sizing: border-box;
             padding: 0 12px;
+            &.timeline-container-plant{
+                height: calc(100vh - 40px - 73px - 38px);
+            }
             .timeline-list {
                 position: relative;
             }
@@ -588,7 +653,7 @@ const getReproductiveItemHeight = (phenologyItem) => {
                     width: 100%;
                     height: 46px;
                     line-height: 30px;
-                    background: #fff;
+                    background: #f5f7fb;
                     font-size: 13px;
                     word-break: break-all;
                     writing-mode: vertical-rl;

src/views/old_mini/plan/index.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="farm-card-page">
-        <custom-header name="农事方案"></custom-header>
+        <custom-header name="种植方案"></custom-header>
         <!-- <Tabs v-model:active="activeTab" class="tabs-wrap" v-if="!route.query.containerId">
             <Tab title="专家方案">
                 <expert-list :isShowHeader="true"></expert-list>

src/views/old_mini/user/farmDetails.vue

@@ -27,7 +27,7 @@
                                 <div class="farm-info-footer-item-value">1450<span class="unit">元</span></div>
                             </div>
                         </div>
-                        <div class="footer-action" @click="handleDetail('plan?farmId=101532&miniJson={\'farmId\':101532}')">农事规划</div>
+                        <div class="footer-action" @click="handleDetail('plan')">农事规划</div>
                     </div>
                 </template>
             </farm-info-card>