Преглед изворни кода

feat:修改农事规划显示逻辑

wangsisi пре 1 недеља
родитељ
комит
5e62ce03ac
1 измењених фајлова са 81 додато и 15 уклоњено
  1. 81 15
      src/components/pageComponents/FarmWorkPlanTimeline.vue

+ 81 - 15
src/components/pageComponents/FarmWorkPlanTimeline.vue

@@ -39,7 +39,7 @@
                             >
                                 <div class="card-header">
                                     <div class="header-left">
-                                        <span class="farm-work-name">{{ fw.farmWorkName || "农事名称" }}</span>
+                                        <span class="farm-work-name">{{ fw.farmWorkName || "--" }}</span>
                                         <span class="tag-standard">标准农事</span>
                                     </div>
                                     <div class="header-right">
@@ -162,6 +162,65 @@ const maxProgress = computed(() => {
     return progresses.length > 0 ? Math.max(...progresses) : 100;
 });
 
+// 计算所有节气的调整位置,确保相邻节气之间至少有36px间隔
+const adjustedTermPositions = computed(() => {
+    if (!solarTerms.value || solarTerms.value.length === 0) return new Map();
+    
+    const minP = minProgress.value;
+    const maxP = maxProgress.value;
+    const range = Math.max(1, maxP - minP);
+    const total = calculateTotalHeightByFarmWorks();
+    const termHeight = 46;
+    const minSpacing = 36; // 最小间隔36px
+    
+    // 计算所有节气的初始位置
+    const termsWithPositions = solarTerms.value.map((term) => {
+        const p = Math.max(0, Math.min(100, Number(term?.progress) || 0));
+        const normalizedP = range > 0 ? ((p - minP) / range) * 100 : 0;
+        const originalTop = (normalizedP / 100) * total;
+        return {
+            ...term,
+            id: term.id ?? term.solarTermsId ?? term.termId ?? `${term.name || term.solarTermsName || term.termName || "term"}-${term.createDate || ""}`,
+            progress: p,
+            originalTop,
+        };
+    });
+    
+    // 按原始位置排序
+    const sortedTerms = [...termsWithPositions].sort((a, b) => a.originalTop - b.originalTop);
+    
+    // 调整位置,确保相邻节气之间至少有36px间隔
+    const adjustedPositions = new Map();
+    const termPositions = new Array(sortedTerms.length);
+    
+    // 先确定最后一个节气的位置(与物候期底部对齐)
+    const lastIndex = sortedTerms.length - 1;
+    const lastTerm = sortedTerms[lastIndex];
+    if (lastTerm.progress === maxP && range > 0) {
+        termPositions[lastIndex] = total - termHeight;
+    } else {
+        termPositions[lastIndex] = lastTerm.originalTop;
+    }
+    adjustedPositions.set(lastTerm.id, termPositions[lastIndex]);
+    
+    // 从后往前调整,确保相邻节气之间至少有36px间隔
+    for (let i = lastIndex - 1; i >= 0; i--) {
+        const term = sortedTerms[i];
+        let adjustedTop = term.originalTop;
+        
+        // 检查与后一个节气的间隔
+        const nextTop = termPositions[i + 1];
+        if (nextTop - adjustedTop < minSpacing) {
+            adjustedTop = nextTop - minSpacing;
+        }
+        
+        termPositions[i] = adjustedTop;
+        adjustedPositions.set(term.id, adjustedTop);
+    }
+    
+    return adjustedPositions;
+});
+
 // 计算物候期需要的实际高度(基于农事数量)
 const getPhenologyRequiredHeight = (item) => {
     // 统计该物候期内的农事数量
@@ -271,21 +330,28 @@ const getListStyle = computed(() => {
 });
 
 const getTermStyle = (t) => {
-    const p = Math.max(0, Math.min(100, Number(t?.progress) || 0));
-    const minP = minProgress.value;
-    const maxP = maxProgress.value;
-    const range = Math.max(1, maxP - minP); // 避免除0
-    const total = calculateTotalHeightByFarmWorks();
-    const termHeight = 46; // 节气的实际高度(.term-name的高度)
+    // 生成与 adjustedTermPositions 中相同的 ID
+    const termId = t.id ?? t.solarTermsId ?? t.termId ?? `${t.name || t.solarTermsName || t.termName || "term"}-${t.createDate || ""}`;
     
-    // 将progress映射到0开始的位置,最小progress对应top: 0
-    const normalizedP = range > 0 ? ((p - minP) / range) * 100 : 0;
-    let top = (normalizedP / 100) * total;
+    // 从调整后的位置映射中获取 top 值
+    const adjustedTop = adjustedTermPositions.value.get(termId);
     
-    // 如果是最后一个节气(progress = maxP),调整top位置,使其底部正好在total位置
-    // 这样最后一个节气的底部就能与最后一个物候期的底部对齐
-    if (p === maxP && range > 0) {
-        top = total - termHeight; // 让最后一个节气的底部正好在total位置
+    // 如果找不到调整后的位置,使用原始计算方式作为后备
+    let top = adjustedTop;
+    if (adjustedTop === undefined) {
+        const p = Math.max(0, Math.min(100, Number(t?.progress) || 0));
+        const minP = minProgress.value;
+        const maxP = maxProgress.value;
+        const range = Math.max(1, maxP - minP);
+        const total = calculateTotalHeightByFarmWorks();
+        const termHeight = 46;
+        const normalizedP = range > 0 ? ((p - minP) / range) * 100 : 0;
+        top = (normalizedP / 100) * total;
+        
+        // 如果是最后一个节气,调整top位置
+        if (p === maxP && range > 0) {
+            top = total - termHeight;
+        }
     }
     
     return {
@@ -293,7 +359,7 @@ const getTermStyle = (t) => {
         top: `${top}px`,
         left: 0,
         width: "30px",
-        height: "20px",
+        // height: "20px",
         display: "flex",
         alignItems: "flex-start",
     };