feat：修改作物档案页面UI

src/components/pageComponents/ArchivesFarmTimeLine.vue

@@ -11,13 +11,12 @@
             <template v-else>
                 <div class="timeline-middle-line"></div>
                 <div
-                    v-for="(t, tIdx) in solarTerms"
+                    v-for="(t, tIdx) in phenologyStartDates"
                     :key="`term-${uniqueTimestamp}-${tIdx}`"
                     class="timeline-term"
                     :style="getTermStyle(t, tIdx)"
                 >
-                    <span class="term-name">{{ t.displayName }}</span>
-                    <span class="term-date">{{ formatDate(t.createDate) }}</span>
+                    <span class="term-name">{{ formatDate(t.startDate) }}</span>
                 </div>
                 <div
                     v-for="(p, idx) in phenologyList"
@@ -136,7 +135,7 @@
 </template>
 
 <script setup>
-import { ref, nextTick, watch, onMounted, onUnmounted } from "vue";
+import { ref, nextTick, watch, onMounted, onUnmounted, computed } from "vue";
 import { ElMessage } from "element-plus";
 import { Empty, Popup } from "vant";
 import { base_img_url2 } from "@/api/config";
@@ -185,6 +184,34 @@ const emits = defineEmits(["row-click"]);
 
 const solarTerms = ref([]);
 const phenologyList = ref([]);
+// 从物候期列表中提取起始时间，用于时间轴显示
+const phenologyStartDates = computed(() => {
+    if (!phenologyList.value || phenologyList.value.length === 0) {
+        return [];
+    }
+    // 从每个物候期中提取起始时间，并去重排序
+    const startDatesMap = new Map();
+    phenologyList.value.forEach((phenology) => {
+        if (phenology.startDate) {
+            const dateKey = phenology.startDate;
+            // 如果该日期还没有添加过，或者需要更新信息
+            if (!startDatesMap.has(dateKey)) {
+                startDatesMap.set(dateKey, {
+                    startDate: phenology.startDate,
+                    id: phenology.id || `phenology-${dateKey}`,
+                });
+            }
+        }
+    });
+    // 转换为数组并按时间排序
+    const result = Array.from(startDatesMap.values()).sort((a, b) => {
+        const timeA = safeParseDate(a.startDate);
+        const timeB = safeParseDate(b.startDate);
+        if (isNaN(timeA) || isNaN(timeB)) return 0;
+        return timeA - timeB;
+    });
+    return result;
+});
 const timelineContainerRef = ref(null);
 const timelineListRef = ref(null);
 // 标记是否为首次加载
@@ -409,27 +436,27 @@ const calculateTotalHeightByFarmWorks = () => {
     // 如果有物候期数据，直接使用计算出的总高度
     // totalHeight 已经包含了从 10 开始的起始位置和所有物候期的高度
     if (totalHeight > 10) {
-        // 确保总高度至少能容纳所有节气（每个节气至少50px）
-        const baseHeight = (solarTerms.value?.length || 0) * 50;
-        // 返回物候期总高度和基础高度的较大值，确保节气能正常显示
+        // 确保总高度至少能容纳所有物候期起始时间（每个至少50px）
+        const baseHeight = (phenologyStartDates.value?.length || 0) * 50;
+        // 返回物候期总高度和基础高度的较大值，确保物候期起始时间能正常显示
         return Math.max(totalHeight, baseHeight);
     }
 
     // 如果没有物候期数据，返回基础高度
-    const baseHeight = (solarTerms.value?.length || 0) * 50;
+    const baseHeight = (phenologyStartDates.value?.length || 0) * 50;
     return baseHeight || 100; // 至少返回100px，避免为0
 };
 
 const getTermStyle = (t, index) => {
     // 优先使用实际测量的timeline-list高度，如果没有测量到则使用计算值作为后备
     const totalHeight = timelineListHeight.value > 0 ? timelineListHeight.value : calculateTotalHeightByFarmWorks();
-    // 获取节气总数
-    const termCount = solarTerms.value?.length || 1;
+    // 获取物候期起始时间总数（使用新数组）
+    const termCount = phenologyStartDates.value?.length || 1;
 
-    // 等分高度：总高度 / 节气数量
+    // 等分高度：总高度 / 物候期起始时间数量
     const termHeight = totalHeight / termCount;
 
-    // 计算top位置：索引 * 每个节气的高度
+    // 计算top位置：索引 * 每个物候期起始时间的高度
     const top = index * termHeight;
 
     return {
@@ -939,7 +966,7 @@ watch(
             color: #fff;
             font-size: 12px;
             position: absolute;
-            left: 32px;
+            left: 39px;
             z-index: 10;
             text-align: center;
             display: flex;
@@ -1002,11 +1029,11 @@ watch(
             }
             .arranges {
                 display: flex;
-                max-width: calc(100vw - 111px);
-                min-width: calc(100vw - 111px);
+                max-width: calc(100vw - 118px);
+                min-width: calc(100vw - 118px);
                 gap: 5px;
                 letter-spacing: 0px;
-                min-height: 90px;
+                // min-height: 90px;
                 .arrange-card {
                     width: 95%;
                     border: 0.5px solid #2199f8;
@@ -1177,15 +1204,10 @@ watch(
         .term-name {
             display: inline-block;
             width: 100%;
-            min-height: 32px;
+            min-height: 20px;
             line-height: 26px;
             background: #fff;
             font-size: 12px;
-            margin-top: -4px;
-        }
-        .term-date {
-            font-size: 10px;
-            margin: -11px 0 0 -6px;
         }
     }
     .empty-state {

src/views/old_mini/monitor/index.vue

@@ -19,7 +19,19 @@
                 <el-date-picker style="width: 110px" v-model="date" type="year" placeholder="全部日期" />
             </div>
             <div class="archives-time-line-content">
-                <archives-farm-time-line :farmId="gardenId"></archives-farm-time-line>
+                <div class="report-box">
+                    <div class="box-content">
+                        <div class="box-title">
+                            <span>农情互动报告</span>
+                            <el-icon><CaretRight /></el-icon>
+                        </div>
+                        <span class="box-text">当前处于蒂蛀虫高发期，请及时采集</span>
+                    </div>
+                    <img src="@/assets/img/monitor/report-icon.png" alt="" class="report-icon" />
+                </div>
+                <div class="time-line">
+                    <archives-farm-time-line :farmId="gardenId"></archives-farm-time-line>
+                </div>
             </div>
         </div>
     </div>
@@ -324,7 +336,7 @@ function handlePage(url) {
     height: 100%;
     padding: 13px 10px;
     box-sizing: border-box;
-    background: linear-gradient(180deg, #F9F9F9 0%, #F0F8FF 31.47%, #F9F9F9 46.81%, #F9F9F9 69.38%, #F9F9F9 100%);
+    background: linear-gradient(180deg, #f9f9f9 0%, #f0f8ff 31.47%, #f9f9f9 46.81%, #f9f9f9 69.38%, #f9f9f9 100%);
     .weather-mask {
         position: fixed;
         top: 0;
@@ -339,20 +351,20 @@ function handlePage(url) {
         position: absolute;
         z-index: 3;
     }
-    .archives-time-line{
+    .archives-time-line {
         position: relative;
         margin-top: 96px;
         height: calc(100% - 90px);
-        .archives-time-line-header{
+        .archives-time-line-header {
             display: flex;
             align-items: center;
             justify-content: space-between;
-            .line-title{
+            .line-title {
                 position: relative;
                 padding-left: 14px;
                 font-size: 16px;
                 &::before {
-                    content: '';
+                    content: "";
                     position: absolute;
                     left: 5px;
                     top: 50%;
@@ -364,13 +376,42 @@ function handlePage(url) {
                 }
             }
         }
-        .archives-time-line-content{
+        .archives-time-line-content {
             margin-top: 10px;
             height: calc(100% - 35px);
             background: #fff;
             border-radius: 8px;
             padding: 10px;
             box-sizing: border-box;
+            .report-box {
+                background: linear-gradient(120deg, #eef8ff, #bbe3ff);
+                border-radius: 4px;
+                padding: 6px 0 0 16px;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                margin-bottom: 12px;
+                .box-content {
+                    .box-title {
+                        font-size: 16px;
+                        color: #2199f8;
+                        font-weight: 500;
+                        margin-bottom: 4px;
+                        display: flex;
+                        align-items: center;
+                    }
+                    .box-text {
+                        color: #4e5969;
+                    }
+                }
+                .report-icon {
+                    width: 120px;
+                    height: 85px;
+                }
+            }
+            .time-line{
+                height: calc(100% - 100px);
+            }
         }
     }
 }