|
|
@@ -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",
|
|
|
};
|