feat:修改时间轴bug，修改基本信息显示和逻辑

src/components/pageComponents/ArchivesFarmTimeLine.vue

@@ -12,7 +12,11 @@
                 <div v-for="(p, idx) in phenologyList" :key="`phenology-${uniqueTimestamp}-${idx}`"
                     class="phenology-bar">
                     <div class="phenology-title"
-                        :class="{ 'phenology-red': !shouldShowBlue(p), 'phenology-blue': shouldShowBlue(p) }"
+                        :class="{
+                            'phenology-title--wide': showPhenologyName && !phenologyNeedsTwoLabelColumns(p),
+                            'phenology-red': !shouldShowBlue(p),
+                            'phenology-blue': shouldShowBlue(p),
+                        }"
                         v-if="shouldShowPhenologyBarTitle(idx)">
                         {{ p.phenologyName }}
                     </div>
@@ -81,11 +85,17 @@
                         </div>
                         <template v-if="showPhenologyName">
                             <template v-if="r.name === p.phenologyName">
-                                <div class="phenology-name text-blue"
-                                    :class="{ 'phenology-red': !shouldShowBlueLeft(p, r), 'phenology-blue': shouldShowBlueLeft(p, r) }"
-                                    :style="r.phenologyName === getNextPhenologyName(idx, rIdx) ? 'padding: 6px 0;' : ''">
-                                    {{ r.name }}
-                                </div>
+                                <template v-if="!shouldShowPhenologyBarTitle(idx)">
+                                    <div class="phenology-name"
+                                        :class="{
+                                            single: showPhenologyName && !phenologyNeedsTwoLabelColumns(p),
+                                            'phenology-red': !shouldShowBlueLeft(p, r),
+                                            'text-blue': shouldShowBlueLeft(p, r),
+                                        }"
+                                        :style="p.phenologyName === getNextPhenologyName(idx, rIdx) ? 'padding: 6px 0;' : ''">
+                                        {{ p.phenologyName }}
+                                    </div>
+                                </template>
                             </template>
                             <template v-else>
                                 <template v-if="p.phenologyName === getNextPhenologyName(idx, rIdx)">
@@ -406,6 +416,13 @@ const shouldShowPhenologyBarTitle = (idx) => {
     return list[idx]?.phenologyName !== list[idx - 1]?.phenologyName;
 };
 
+// 是否存在与物候期不同的生育期行（需要左右两列竖条）；否则物候条占满单列宽度即可
+const phenologyNeedsTwoLabelColumns = (p) => {
+    const list = Array.isArray(p?.reproductiveList) ? p.reproductiveList : [];
+    if (!list.length) return false;
+    return list.some((r) => r.name !== p.phenologyName);
+};
+
 // 获取下一个reproductive-item的phenologyName
 const getNextPhenologyName = (currentPhenologyIdx, currentReproductiveIdx) => {
     const currentPhenology = phenologyList.value[currentPhenologyIdx];
@@ -1298,16 +1315,22 @@ watch(
 
         .phenology-title {
             width: 18px;
-            height: 99.5%;
+            top: 0;
+            bottom: 0;
+            left: -1px;
+            height: auto;
             color: #fff;
             font-size: 12px;
             position: absolute;
-            // left: 39px;
-            left: -1px;
             z-index: 10;
             text-align: center;
             display: flex;
             align-items: center;
+            justify-content: center;
+            writing-mode: vertical-rl;
+            text-orientation: upright;
+            letter-spacing: 3px;
+            word-break: break-all;
 
             &.phenology-blue {
                 background: #2199f8;
@@ -1317,6 +1340,10 @@ watch(
                 background: #f1f1f1;
                 color: #808080;
             }
+
+            &.phenology-title--wide {
+                width: 39px;
+            }
         }
 
         .reproductive-item {
@@ -1339,6 +1366,8 @@ watch(
                 padding: 4px 0;
                 font-size: 12px;
                 box-sizing: border-box;
+                writing-mode: vertical-rl;
+                text-orientation: upright;
 
                 &.mr {
                     margin-right: 3px;
@@ -1347,8 +1376,11 @@ watch(
                 &.single {
                     width: 39px;
                     line-height: 39px;
-                    // z-index: 10;
-                    // position: relative;
+
+                    &.text-blue,
+                    &.text-red {
+                        line-height: 16px;
+                    }
                 }
 
                 &.phenology-blue {
@@ -1690,12 +1722,14 @@ watch(
         }
     }
 
-    .reproductive-item+.reproductive-item {
-        padding-top: 3px;
+    .reproductive-item + .reproductive-item {
+        margin-top: 4px;
+        padding-top: 0;
     }
 
-    .phenology-bar+.phenology-bar {
-        padding-top: 3px;
+    .phenology-bar + .phenology-bar {
+        margin-top: 4px;
+        padding-top: 0;
     }
 
     .timeline-term {

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

@@ -1,21 +1,16 @@
 <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">采样时间: {{ imgInfo.samplingTime }}</div>
-                    <div class="sampling-desc">本次采样{{ imgInfo.regions }}，拍摄了 {{ imgInfo.total }} 棵树</div>
-                </div>
-            </div>
-
-            <!-- 农情照片卡片 -->
-            <div class="card-wrap">
+             <div class="card-wrap">
                 <div class="card-box photo-card">
-                    <div class="card-title">农情照片</div>
-                    <div class="ratio-tip">{{ route.query.content }}</div>
+                    <div class="card-title">
+                        <span>农情照片</span>
+                        <span class="date">{{ imgInfo.samplingTime }}</span>
+                    </div>
+                    <div class="ratio-tip">
+                        <div>物候进程</div>
+                    </div>
                     <div class="photo-grid">
                         <div
                             v-for="(photo, index) in imgInfo.imageList"
@@ -84,8 +79,6 @@ const getFarmImagePage = () => {
         box-sizing: border-box;
 
         .card-wrap {
-            margin-bottom: 12px;
-
             .card-box {
                 background: #fff;
                 border-radius: 8px;
@@ -110,17 +103,22 @@ const getFarmImagePage = () => {
             .photo-card {
                 .card-title {
                     font-size: 16px;
-                    font-weight: bold;
-                    color: #333;
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
                     margin-bottom: 12px;
+                    .date {
+                        font-size: 12px;
+                        color: rgba(0, 0, 0, 0.2);
+                    }
                 }
 
                 .ratio-tip {
                     font-size: 14px;
-                    color: #2199f8;
-                    padding: 10px 12px;
+                    // color: #2199f8;
+                    padding: 5px 8px;
                     background: rgba(33, 153, 248, 0.08);
-                    border-radius: 8px;
+                    border-radius: 5px;
                 }
 
                 .photo-grid {

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

@@ -1,88 +1,61 @@
 <template>
     <custom-header name="农场信息" bgColor="#f2f3f5"></custom-header>
     <div class="farm-details-page">
-        <div class="farm-info">
-            <div class="map-wrap">
-                <div class="map-area" ref="mapContainer"></div>
-                <div class="map-text" @click="handleEditMap">点击编辑地块</div>
+        <div class="map-wrap info-card">
+            <div class="map-area" ref="mapContainer"></div>
+            <div class="map-text" @click="handleEditMap">点击编辑地块</div>
+        </div>
+        <div class="info-box info-card">
+            <div class="section-header">
+                <div class="line-title">基本信息</div>
+                <div class="edit-btn-box">
+                    <div class="edit-btn" @click="handleAddVariety">新增品种</div>
+                    <div class="edit-btn" @click="handleEditFarmInfo">编辑信息</div>
+                </div>
             </div>
-            <div class="info-box">
-                <div class="section-header">
-                    <div class="line-title">基本信息</div>
-                    <div class="edit-btn" @click="handleEditFarmInfo">点击编辑</div>
+            <div class="info-list">
+                <div class="info-row">
+                    <span class="info-label">农场名称：</span>
+                    <span class="info-value">{{ farmInfo.subjectName }}</span>
                 </div>
-                <div class="info-list">
-                    <div class="info-row">
-                        <span class="info-label">农场名称：</span>
-                        <span class="info-value">{{ farmInfo.subjectName }}</span>
-                    </div>
-                    <div class="info-row">
-                        <span class="info-label">联系人：</span>
-                        <span class="info-value">{{ farmInfo.contactName }}</span>
-                    </div>
-                    <div class="info-row center-row">
-                        <span class="info-label">联系电话：</span>
-                        <span class="info-value">{{ farmInfo.contactPhone }}</span>
-                    </div>
-                    <div class="info-row">
-                        <span class="info-label">种植品种：</span>
-                        <div class="info-value crop-tags">
-                            <span v-for="crop in farmInfo.regionList" :key="crop.regionId" class="crop-tag">
-                                {{ crop.regionName }}
-                            </span>
-                            <div class="add-variety-btn" @click="handleAddVariety">
-                                <el-icon size="12">
-                                    <Plus />
-                                </el-icon>
-                                <span>新增品种</span>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="info-row">
-                        <span class="info-label">农场位置：</span>
-                        <span class="info-value">{{ farmInfo.farmAddress }}</span>
-                    </div>
+                <div class="info-row">
+                    <span class="info-label">联系人：</span>
+                    <span class="info-value">{{ farmInfo.contactName }}</span>
                 </div>
-            </div>
-            <el-divider class="info-divider" />
-            <div class="info-box">
-                <div class="section-header">
-                    <div class="line-title">农场设施</div>
-                    <div class="edit-btn" @click="handleEditFarmFacility">点击编辑</div>
+                <div class="info-row center-row">
+                    <span class="info-label">联系电话：</span>
+                    <span class="info-value">{{ farmInfo.contactPhone }}</span>
                 </div>
-                <div class="info-list">
-                    <div class="info-row">
-                        <span class="info-label">土壤类型：</span>
-                        <span class="info-value">{{ basicFarmInfo.soil }}</span>
-                    </div>
-                    <div class="info-row">
-                        <span class="info-label">灌溉方式：</span>
-                        <div class="info-value crop-tags">
-                            <span v-for="method in basicFarmInfo.irrigation" :key="method.code" class="crop-tag">
-                                {{ method.name }}
-                            </span>
-                        </div>
-                    </div>
-                    <div class="info-row info-row-column">
-                        <span class="info-label">农机设备：</span>
-                        <div class="info-value device-value">
-                            <div class="device-box">
-                                <div class="device-item" v-for="device in basicFarmInfo.machineryList"
-                                    :key="device.code">
-                                    <span class="device-name">{{ device.name }}</span>
-                                    <span class="device-count">{{ device.quantity || 0 }}{{ device.unit }}</span>
-                                </div>
-                            </div>
-                        </div>
+                <div class="info-row">
+                    <span class="info-label">种植面积：</span>
+                    <span class="info-value">{{ farmInfo.farmArea }}亩</span>
+                </div>
+                <div class="info-row">
+                    <span class="info-label">农场位置：</span>
+                    <span class="info-value">{{ farmInfo.farmAddress }}</span>
+                </div>
+                <div class="info-row">
+                    <span class="info-label">种植品种：</span>
+                    <div class="info-value crop-tags">
+                        <span v-for="crop in farmInfo.regionList" :key="crop.regionId" class="crop-tag">
+                            {{ crop.regionName }}
+                        </span>
                     </div>
-                    <div class="info-row info-row-column">
-                        <span class="info-label">希望改善问题：</span>
-                        <div class="info-value problem-tags">
-                            <span v-for="item in basicFarmInfo.improvementProblems" :key="item.code"
-                                class="problem-tag">
-                                {{ item.name }}
-                            </span>
-                        </div>
+                </div>
+            </div>
+        </div>
+        <div class="info-box info-card">
+            <div class="section-header">
+                <div class="line-title">农场设施</div>
+                <div class="edit-btn" @click="handleEditFarmFacility">编辑信息</div>
+            </div>
+            <div class="info-list">
+                <div class="info-row">
+                    <span class="info-label">灌溉方式：</span>
+                    <div class="info-value crop-tags">
+                        <span v-for="method in basicFarmInfo.irrigation" :key="method.code" class="crop-tag">
+                            {{ method.name }}
+                        </span>
                     </div>
                 </div>
             </div>
@@ -175,10 +148,7 @@ function fetchBasicFarmFormData() {
         if (code === 0) {
             basicFarmInfo.value = {
                 ...data,
-                soil: data.soilTypes.find(item => item.selected).name,
                 irrigation: data.irrigationMethods.filter(item => item.selected),
-                machineryList: data.machinery.filter(item => item.selected),
-                improvementProblems: data.improvementAreas.filter(item => item.selected),
             }
         }
     });
@@ -245,7 +215,7 @@ const handleAddVariety = () => {
 <style lang="scss" scoped>
 .farm-details-page {
     background: #f2f3f5;
-    height: calc(100vh - 60px);
+    height: calc(100vh - 40px);
     padding: 10px 12px;
     overflow: auto;
 
@@ -267,144 +237,143 @@ const handleAddVariety = () => {
         }
     }
 
-    .farm-info {
+    .info-card{
+        margin-top: 12px;
         background: #fff;
-        border-radius: 8px;
+        border-radius: 6px;
         padding: 10px;
+    }
 
-        .map-wrap {
-            position: relative;
+    .map-wrap {
+        position: relative;
 
-            .map-area {
-                width: 100%;
-                height: 142px;
-                clip-path: inset(0px round 5px);
-            }
+        .map-area {
+            width: 100%;
+            height: 142px;
+            clip-path: inset(0px round 5px);
+        }
 
-            .map-text {
-                position: absolute;
-                right: 13px;
-                bottom: 8px;
-                font-size: 12px;
-                color: #ffffff;
-                background: rgba(0, 0, 0, 0.5);
-                padding: 8px 12px;
-                border-radius: 25px;
-                border: 1px solid rgba(255, 255, 255, 0.5);
-            }
+        .map-text {
+            position: absolute;
+            right: 13px;
+            bottom: 16px;
+            font-size: 12px;
+            color: #ffffff;
+            background: rgba(0, 0, 0, 0.5);
+            padding: 8px 12px;
+            border-radius: 25px;
+            border: 1px solid rgba(255, 255, 255, 0.5);
+        }
+    }
+
+    .info-box {
+        margin-top: 12px;
+
+        .section-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+
+        .edit-btn-box {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .edit-btn {
+            padding: 4px 12px;
+            font-size: 12px;
+            color: #86909c;
+            border-radius: 999px;
+            border: 0.5px solid #d0d3d8;
+            background-color: #ffffff;
         }
 
-        .info-box {
-            margin-top: 12px;
+        .info-list {
+            margin-top: 10px;
+            margin-left: 5px;
 
-            .section-header {
+            .info-row {
                 display: flex;
-                align-items: center;
-                justify-content: space-between;
-            }
+                align-items: flex-start;
+                margin-bottom: 6px;
 
-            .edit-btn {
-                padding: 4px 12px;
-                font-size: 12px;
-                color: #86909c;
-                border-radius: 999px;
-                border: 0.5px solid #d0d3d8;
-                background-color: #ffffff;
-            }
+                &.center-row {
+                    align-items: center;
+                }
 
-            .info-list {
-                margin-top: 10px;
-                margin-left: 5px;
+                .info-label {
+                    min-width: 80px;
+                    color: #4E5969;
+                }
 
-                .info-row {
+                .crop-tags {
                     display: flex;
-                    align-items: flex-start;
-                    margin-bottom: 6px;
-                    &.center-row {
-                        align-items: center;
+                    align-items: center;
+                    flex-wrap: wrap;
+                    gap: 6px;
+
+                    .crop-tag {
+                        padding: 2px 8px;
+                        background: #E8F3FF;
+                        color: #2199f8;
+                        border-radius: 2px;
+                        font-size: 12px;
                     }
+                }
 
-                    .info-label {
-                        min-width: 80px;
-                        color: #4E5969;
+                .problem-tags {
+                    display: flex;
+                    flex-wrap: wrap;
+                    gap: 6px;
+
+                    .problem-tag {
+                        padding: 2px 8px;
+                        background: rgba(58, 173, 148, 0.1);
+                        color: #3AAD94;
+                        border-radius: 2px;
+                        font-size: 13px;
                     }
+                }
+
+                .device-value {
+                    width: 100%;
+                }
+
+                .device-box {
+                    padding: 6px;
+                    border-radius: 4px;
+                    border: 0.5px solid rgba(33, 153, 248, 0.2);
+                    display: grid;
+                    grid-template-columns: repeat(2, minmax(0, 1fr));
+                    column-gap: 12px;
+                    row-gap: 4px;
 
-                    .crop-tags {
+                    .device-item {
                         display: flex;
                         align-items: center;
-                        flex-wrap: wrap;
-                        gap: 6px;
-                        .crop-tag {
+                        justify-content: space-between;
+                        padding: 4px 0;
+                        min-width: 0;
+                        gap: 8px;
+                        font-size: 13px;
+                        color: #1D2129;
+
+                        .device-count {
                             padding: 2px 8px;
                             background: #E8F3FF;
                             color: #2199f8;
                             border-radius: 2px;
-                            font-size: 12px;
-                        }
-                        .add-variety-btn {
-                            display: flex;
-                            align-items: center;
-                            gap: 3px;
-                            padding: 3px 6px;
-                            border: 1px solid #DCDCDC;
-                            border-radius: 3px;
-                            background: #fff;
-                            font-size: 12px;
-                        }
-                    }
-
-                    .problem-tags {
-                        display: flex;
-                        flex-wrap: wrap;
-                        gap: 6px;
-
-                        .problem-tag {
-                            padding: 2px 8px;
-                            background: rgba(58, 173, 148, 0.1);
-                            color: #3AAD94;
-                            border-radius: 2px;
-                            font-size: 13px;
-                        }
-                    }
-
-                    .device-value {
-                        width: 100%;
-                    }
-
-                    .device-box {
-                        padding: 6px;
-                        border-radius: 4px;
-                        border: 0.5px solid rgba(33, 153, 248, 0.2);
-                        display: grid;
-                        grid-template-columns: repeat(2, minmax(0, 1fr));
-                        column-gap: 12px;
-                        row-gap: 4px;
-
-                        .device-item {
-                            display: flex;
-                            align-items: center;
-                            justify-content: space-between;
-                            padding: 4px 0;
-                            min-width: 0;
-                            gap: 8px;
-                            font-size: 13px;
-                            color: #1D2129;
-
-                            .device-count {
-                                padding: 2px 8px;
-                                background: #E8F3FF;
-                                color: #2199f8;
-                                border-radius: 2px;
-                            }
                         }
                     }
                 }
+            }
 
-                .info-row-column {
-                    display: flex;
-                    flex-direction: column;
-                    gap: 4px;
-                }
+            .info-row-column {
+                display: flex;
+                flex-direction: column;
+                gap: 4px;
             }
         }
     }