|
|
@@ -52,25 +52,6 @@
|
|
|
>点击编辑</span
|
|
|
>
|
|
|
</div>
|
|
|
- <div
|
|
|
- v-if="
|
|
|
- getArrangeStatusClass(fw) === 'status-complete' ||
|
|
|
- getArrangeStatusClass(fw) === 'status-warning'
|
|
|
- "
|
|
|
- class="status-icon"
|
|
|
- :class="getArrangeStatusClass(fw)"
|
|
|
- >
|
|
|
- <el-icon
|
|
|
- v-if="getArrangeStatusClass(fw) === 'status-complete'"
|
|
|
- size="16"
|
|
|
- color="#1CA900"
|
|
|
- >
|
|
|
- <SuccessFilled />
|
|
|
- </el-icon>
|
|
|
- <el-icon v-else size="18" color="#FF953D">
|
|
|
- <WarnTriangleFilled />
|
|
|
- </el-icon>
|
|
|
- </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -165,14 +146,14 @@ const maxProgress = computed(() => {
|
|
|
// 计算所有节气的调整位置,确保相邻节气之间至少有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));
|
|
|
@@ -180,19 +161,23 @@ const adjustedTermPositions = computed(() => {
|
|
|
const originalTop = (normalizedP / 100) * total;
|
|
|
return {
|
|
|
...term,
|
|
|
- id: term.id ?? term.solarTermsId ?? term.termId ?? `${term.name || term.solarTermsName || term.termName || "term"}-${term.createDate || ""}`,
|
|
|
+ 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];
|
|
|
@@ -202,22 +187,22 @@ const adjustedTermPositions = computed(() => {
|
|
|
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;
|
|
|
});
|
|
|
|
|
|
@@ -225,7 +210,7 @@ const adjustedTermPositions = computed(() => {
|
|
|
const getPhenologyRequiredHeight = (item) => {
|
|
|
// 统计该物候期内的农事数量
|
|
|
let farmWorkCount = 0;
|
|
|
-
|
|
|
+
|
|
|
if (Array.isArray(item.reproductiveList)) {
|
|
|
item.reproductiveList.forEach((reproductive) => {
|
|
|
if (Array.isArray(reproductive.farmWorkArrangeList)) {
|
|
|
@@ -233,21 +218,21 @@ const getPhenologyRequiredHeight = (item) => {
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
// 如果没有农事,给一个最小高度
|
|
|
if (farmWorkCount === 0) {
|
|
|
return 50; // 最小50px
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
// 每个农事卡片的高度(根据实际内容,卡片高度可能因内容而异)
|
|
|
const farmWorkCardHeight = 100; // 增加卡片高度估算,确保能容纳内容
|
|
|
// 卡片之间的间距(与CSS中的gap保持一致)
|
|
|
const cardGap = 12;
|
|
|
-
|
|
|
+
|
|
|
// 计算总高度:卡片数量 * 卡片高度 + (卡片数量 - 1) * 间距
|
|
|
// 如果有多个卡片,需要加上它们之间的间距
|
|
|
const totalHeight = farmWorkCount * farmWorkCardHeight + (farmWorkCount > 1 ? (farmWorkCount - 1) * cardGap : 0);
|
|
|
-
|
|
|
+
|
|
|
// 返回总高度,并增加足够的余量(30px)确保所有农事都能完整显示,不会堆叠
|
|
|
return Math.max(totalHeight + 30, 50); // 最小50px,额外加30px余量确保不重叠
|
|
|
};
|
|
|
@@ -256,25 +241,26 @@ const getPhenologyRequiredHeight = (item) => {
|
|
|
const calculatePhenologyPositions = () => {
|
|
|
let currentTop = 10; // 起始位置,留出顶部间距
|
|
|
const positions = new Map();
|
|
|
-
|
|
|
+
|
|
|
// 按progress排序物候期,确保按时间顺序排列
|
|
|
const sortedPhenologyList = [...phenologyList.value].sort((a, b) => {
|
|
|
const aProgress = Math.min(Number(a?.progress) || 0, Number(a?.progress2) || 0);
|
|
|
const bProgress = Math.min(Number(b?.progress) || 0, Number(b?.progress2) || 0);
|
|
|
return aProgress - bProgress;
|
|
|
});
|
|
|
-
|
|
|
+
|
|
|
sortedPhenologyList.forEach((phenology) => {
|
|
|
const height = getPhenologyRequiredHeight(phenology);
|
|
|
// 使用与数据生成时相同的ID生成逻辑
|
|
|
- const itemId = phenology.id ?? phenology.phenologyId ?? phenology.name ?? `${phenology.progress}-${phenology.progress2}`;
|
|
|
+ const itemId =
|
|
|
+ phenology.id ?? phenology.phenologyId ?? phenology.name ?? `${phenology.progress}-${phenology.progress2}`;
|
|
|
positions.set(itemId, {
|
|
|
top: currentTop,
|
|
|
height: height,
|
|
|
});
|
|
|
currentTop += height; // 紧挨着下一个物候期,不留间距
|
|
|
});
|
|
|
-
|
|
|
+
|
|
|
return {
|
|
|
positions,
|
|
|
totalHeight: currentTop + 12, // 总高度 = 最后一个物候期底部 + 底部间距
|
|
|
@@ -284,7 +270,7 @@ const calculatePhenologyPositions = () => {
|
|
|
// 计算所有农事的总高度(基于物候期紧挨排列)
|
|
|
const calculateTotalHeightByFarmWorks = () => {
|
|
|
const { totalHeight } = calculatePhenologyPositions();
|
|
|
-
|
|
|
+
|
|
|
// 计算最后一个物候期的底部位置
|
|
|
let lastPhenologyBottom = 0;
|
|
|
if (phenologyList.value && phenologyList.value.length > 0) {
|
|
|
@@ -293,7 +279,7 @@ const calculateTotalHeightByFarmWorks = () => {
|
|
|
const bProgress = Math.min(Number(b?.progress) || 0, Number(b?.progress2) || 0);
|
|
|
return aProgress - bProgress;
|
|
|
});
|
|
|
-
|
|
|
+
|
|
|
let currentTop = 10; // 起始位置
|
|
|
sortedPhenologyList.forEach((phenology) => {
|
|
|
const height = getPhenologyRequiredHeight(phenology);
|
|
|
@@ -301,7 +287,7 @@ const calculateTotalHeightByFarmWorks = () => {
|
|
|
});
|
|
|
lastPhenologyBottom = currentTop; // 最后一个物候期的底部位置
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
// 直接使用最后一个物候期的底部位置作为总高度
|
|
|
// 在getTermStyle中,我们已经调整了最后一个节气的top位置(total - 46)
|
|
|
// 这样最后一个节气的底部(total - 46 + 46 = total)就能与物候期底部对齐
|
|
|
@@ -311,10 +297,10 @@ const calculateTotalHeightByFarmWorks = () => {
|
|
|
// 这样最后一个节气的底部就能对齐到物候期的底部
|
|
|
return Math.max(lastPhenologyBottom, totalHeight, baseHeight, 500);
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
// 基础高度:每个节气至少需要一定高度,确保节气标签能显示
|
|
|
const baseHeight = (solarTerms.value?.length || 0) * 50;
|
|
|
-
|
|
|
+
|
|
|
// 返回物候期总高度和基础高度的较大值
|
|
|
return Math.max(totalHeight, baseHeight, 500); // 最小500px
|
|
|
};
|
|
|
@@ -331,11 +317,15 @@ const getListStyle = computed(() => {
|
|
|
|
|
|
const getTermStyle = (t) => {
|
|
|
// 生成与 adjustedTermPositions 中相同的 ID
|
|
|
- const termId = t.id ?? t.solarTermsId ?? t.termId ?? `${t.name || t.solarTermsName || t.termName || "term"}-${t.createDate || ""}`;
|
|
|
-
|
|
|
+ const termId =
|
|
|
+ t.id ??
|
|
|
+ t.solarTermsId ??
|
|
|
+ t.termId ??
|
|
|
+ `${t.name || t.solarTermsName || t.termName || "term"}-${t.createDate || ""}`;
|
|
|
+
|
|
|
// 从调整后的位置映射中获取 top 值
|
|
|
const adjustedTop = adjustedTermPositions.value.get(termId);
|
|
|
-
|
|
|
+
|
|
|
// 如果找不到调整后的位置,使用原始计算方式作为后备
|
|
|
let top = adjustedTop;
|
|
|
if (adjustedTop === undefined) {
|
|
|
@@ -347,13 +337,13 @@ const getTermStyle = (t) => {
|
|
|
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 {
|
|
|
position: "absolute",
|
|
|
top: `${top}px`,
|
|
|
@@ -400,11 +390,11 @@ const getPhenologyBarStyle = (item) => {
|
|
|
// 使用与数据生成时相同的ID生成逻辑
|
|
|
const itemId = item.id ?? item.phenologyId ?? item.name ?? `${item.progress}-${item.progress2}`;
|
|
|
const position = positions.get(itemId);
|
|
|
-
|
|
|
+
|
|
|
// 如果找不到位置信息,使用默认值
|
|
|
let topPx = 10;
|
|
|
let heightPx = 50;
|
|
|
-
|
|
|
+
|
|
|
if (position) {
|
|
|
topPx = position.top;
|
|
|
heightPx = position.height;
|
|
|
@@ -417,7 +407,7 @@ const getPhenologyBarStyle = (item) => {
|
|
|
const isFuture = Number.isFinite(item?.startTimeMs) ? item.startTimeMs > now : start > 0;
|
|
|
const barColor = isFuture ? "rgba(145, 145, 145, 0.1)" : "#2199F8";
|
|
|
const beforeBg = isFuture ? "rgba(145, 145, 145, 0.1)" : "rgba(33, 153, 248, 0.1)";
|
|
|
-
|
|
|
+
|
|
|
return {
|
|
|
position: "absolute",
|
|
|
left: "46px",
|