Explorar o código

feat:修改农事规划样式显示和返回的时候bug修改

wangsisi hai 4 días
pai
achega
7f535a6b8b

+ 86 - 14
src/components/pageComponents/FarmWorkPlanTimeline.vue

@@ -11,19 +11,23 @@
                 <span class="term-name">{{ t.displayName }}</span>
             </div>
             <div v-for="(p, idx) in phenologyList" :key="`phenology-${uniqueTimestamp}-${idx}`" class="phenology-bar">
+                <div class="start-time">
+                    <div class="time-text">起始时间</div>
+                    <span>{{ p.startDate }}</span>
+                </div>
                 <div
                     v-for="(r, rIdx) in Array.isArray(p.reproductiveList) ? p.reproductiveList : []"
                     :key="`reproductive-${uniqueTimestamp}-${idx}-${rIdx}`"
                     class="reproductive-item"
                 >
-                    <div class="arranges">
+                    <div class="arranges" :style="p.startDate && rIdx === 0 ? 'padding-top: 30px;' : ''">
                         <div
                             v-for="(fw, aIdx) in Array.isArray(r.farmWorkArrangeList) ? r.farmWorkArrangeList : []"
                             :key="`arrange-${uniqueTimestamp}-${idx}-${rIdx}-${aIdx}`"
                             class="arrange-card"
                             :style="
                                 shouldShowIncompleteStatus(fw.farmWorkId)
-                                    ? 'padding-bottom: 18px;'
+                                    ? 'padding-bottom: 25px;'
                                     : 'padding-bottom: 10px'
                             "
                             :class="getArrangeStatusClass(fw)"
@@ -31,7 +35,7 @@
                         >
                             <div class="card-header">
                                 <div class="header-left">
-                                    <span class="farm-work-name">{{ fw.farmWorkName || "--" }}</span>
+                                    <span class="farm-work-name van-ellipsis">{{ fw.farmWorkName || "--" }}</span>
                                     <span class="tag-standard">{{ farmWorkType[fw.type] }}</span>
                                 </div>
                                 <div class="header-right" v-if="!isStandard">
@@ -53,7 +57,23 @@
                             </div>
                         </div>
                     </div>
-                    <div class="phenology-name">{{ r.name }}</div>
+                    <template v-if="r.name === r.phenologyName">
+                        <div 
+                            class="phenology-name single" 
+                            :style="r.phenologyName === getNextPhenologyName(idx, rIdx) ? 'padding: 6px 0;' : ''"
+                        >
+                            {{ r.name }}
+                        </div>
+                    </template>
+                    <template v-else>
+                        <div class="phenology-name">{{ r.name }}</div>
+                        <div 
+                            class="phenology-name mr" 
+                            :style="r.phenologyName === getNextPhenologyName(idx, rIdx) ? 'padding: 6px 0;' : ''"
+                        >
+                            {{ r.phenologyName }}
+                        </div>
+                    </template>
                 </div>
             </div>
         </div>
@@ -213,6 +233,31 @@ const shouldShowIncompleteStatus = (farmWorkId) => {
     return false;
 };
 
+// 获取下一个reproductive-item的phenologyName
+const getNextPhenologyName = (currentPhenologyIdx, currentReproductiveIdx) => {
+    const currentPhenology = phenologyList.value[currentPhenologyIdx];
+    if (!currentPhenology || !Array.isArray(currentPhenology.reproductiveList)) {
+        return null;
+    }
+    
+    // 如果当前reproductive-item不是最后一个,获取同一个物候期的下一个
+    if (currentReproductiveIdx < currentPhenology.reproductiveList.length - 1) {
+        const nextReproductive = currentPhenology.reproductiveList[currentReproductiveIdx + 1];
+        return nextReproductive?.phenologyName || null;
+    }
+    
+    // 如果当前reproductive-item是最后一个,获取下一个物候期的第一个reproductive-item
+    if (currentPhenologyIdx < phenologyList.value.length - 1) {
+        const nextPhenology = phenologyList.value[currentPhenologyIdx + 1];
+        if (nextPhenology && Array.isArray(nextPhenology.reproductiveList) && nextPhenology.reproductiveList.length > 0) {
+            const firstReproductive = nextPhenology.reproductiveList[0];
+            return firstReproductive?.phenologyName || null;
+        }
+    }
+    
+    return null;
+};
+
 // 计算物候期需要的实际高度(基于农事数量)
 const getPhenologyRequiredHeight = (item) => {
     // 统计该物候期内的农事数量
@@ -427,6 +472,7 @@ const getFarmWorkPlan = () => {
                               id: it.id ?? it.phenologyId ?? it.name ?? `${it.progress}-${it.progress2}`,
                               progress: Number(it.progress) || 0, // 起点 %
                               progress2: Number(it.progress2) || 0, // 终点 %
+                              startDate: it.startDate,
                               startTimeMs: safeParseDate(
                                   it.startDate || it.beginDate || it.startTime || it.start || it.start_at
                               ),
@@ -434,7 +480,6 @@ const getFarmWorkPlan = () => {
                           };
                       })
                     : [];
-
                 // 使用多次 nextTick 和 requestAnimationFrame 确保DOM完全渲染
                 nextTick(() => {
                     requestAnimationFrame(() => {
@@ -611,6 +656,24 @@ watch(
         align-items: stretch;
         justify-content: center;
         box-sizing: border-box;
+        position: relative;
+        .start-time{
+            position: absolute;
+            left: 88px;
+            z-index: 1;
+            letter-spacing: 0px;
+            writing-mode: initial;
+            line-height: normal;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            font-size: 12px;
+            .time-text{
+                padding: 2px 6px;
+                color: #2199f8;
+                background: rgba(33, 153, 248, 0.1);
+            }
+        }
         .reproductive-item {
             font-size: 12px;
             text-align: center;
@@ -623,17 +686,25 @@ watch(
             color: inherit;
             position: relative;
             .phenology-name {
-                width: 26px;
+                width: 20px;
+                line-height: 20px;
                 height: 100%;
                 background: #2199f8;
                 color: #fff;
-                border-radius: 2px;
-                padding: 5px 0;
+                padding: 4px 0;
+                font-size: 12px;
+                &.mr{
+                    margin-right: 3px;
+                }
+                &.single{
+                    width: 43px;
+                    line-height: 43px;
+                }
             }
             .arranges {
                 display: flex;
-                max-width: calc(100vw - 84px);
-                min-width: calc(100vw - 84px);
+                max-width: calc(100vw - 92px);
+                min-width: calc(100vw - 92px);
                 gap: 10px;
                 letter-spacing: 0px;
                 .arrange-card {
@@ -649,14 +720,17 @@ watch(
                         display: flex;
                         justify-content: space-between;
                         align-items: center;
+                        width: 100%;
                         .header-left {
                             display: flex;
                             align-items: center;
                             gap: 8px;
+                            width: calc(100% - 50px);
                             .farm-work-name {
                                 font-size: 14px;
                                 font-weight: 500;
                                 color: #1d2129;
+                                max-width: calc(100% - 74px);
                             }
                             .tag-standard {
                                 padding: 0 8px;
@@ -670,7 +744,6 @@ watch(
                         .header-right {
                             font-size: 12px;
                             color: #808080;
-                            padding: 0 8px;
                             border-radius: 25px;
                         }
                     }
@@ -739,15 +812,14 @@ watch(
         }
     }
     .reproductive-item + .reproductive-item {
-        padding-top: 3px;
+        padding-top: 11px;
     }
     .phenology-bar + .phenology-bar {
-        padding-top: 3px;
+        padding-top: 11px;
     }
     .timeline-term {
         position: absolute;
         width: 30px;
-        padding-right: 16px;
         display: flex;
         align-items: flex-start;
         z-index: 2; /* 置于中线之上 */

+ 2 - 1
src/views/old_mini/monitor/subPages/plan.vue

@@ -460,6 +460,7 @@ const handleConfirmCopyPlan = () => {
                     ElMessage.success("复制成功");
                     getListMySchemes("right");
                     currentTab.value = data;
+                    currentTabIndex.value = (tabs.value.length - 1) + 1;
                 }
             });
     } else {
@@ -615,7 +616,7 @@ const handleRowClick = (item) => {
         }
         .timeline-wrap {
             height: calc(100vh - 90px - 80px);
-            padding: 0 12px;
+            padding: 0 10px 0 4px;
             &.timeline-container-plant-wrap {
                 height: calc(100vh - 90px - 85px - 38px);
             }