|
|
@@ -11,13 +11,12 @@
|
|
|
<template v-else>
|
|
|
<div class="timeline-middle-line"></div>
|
|
|
<div
|
|
|
- v-for="(t, tIdx) in solarTerms"
|
|
|
+ v-for="(t, tIdx) in termDateList"
|
|
|
:key="`term-${uniqueTimestamp}-${tIdx}`"
|
|
|
class="timeline-term"
|
|
|
:style="getTermStyle(t, tIdx)"
|
|
|
>
|
|
|
- <span class="term-name">{{ t.displayName }}</span>
|
|
|
- <span class="term-date">{{ formatDate(t.createDate) }}</span>
|
|
|
+ <span class="term-name">{{ formatDate(t.startDate) }}</span>
|
|
|
</div>
|
|
|
<div
|
|
|
v-for="(p, idx) in phenologyList"
|
|
|
@@ -56,7 +55,7 @@
|
|
|
<div class="card-content">
|
|
|
<div class="card-left">
|
|
|
<div class="left-info">
|
|
|
- <div class="left-date">{{ formatDate(fw.createTime) }}</div>
|
|
|
+ <div class="left-date">{{ formatDate(fw.updateTime) }}</div>
|
|
|
<div class="text van-ellipsis" v-if="fw?.sourceType === 6">
|
|
|
上传者:{{ fw.sourceDataJson.userName }}
|
|
|
</div>
|
|
|
@@ -185,6 +184,8 @@ const emits = defineEmits(["row-click"]);
|
|
|
|
|
|
const solarTerms = ref([]);
|
|
|
const phenologyList = ref([]);
|
|
|
+// 由 phenologyList 每项的 startDate 生成,用于左侧时间轴展示(替代原 solarTerms 在此块的展示)
|
|
|
+const termDateList = ref([]);
|
|
|
const timelineContainerRef = ref(null);
|
|
|
const timelineListRef = ref(null);
|
|
|
// 标记是否为首次加载
|
|
|
@@ -423,8 +424,8 @@ const calculateTotalHeightByFarmWorks = () => {
|
|
|
const getTermStyle = (t, index) => {
|
|
|
// 优先使用实际测量的timeline-list高度,如果没有测量到则使用计算值作为后备
|
|
|
const totalHeight = timelineListHeight.value > 0 ? timelineListHeight.value : calculateTotalHeightByFarmWorks();
|
|
|
- // 获取节气总数
|
|
|
- const termCount = solarTerms.value?.length || 1;
|
|
|
+ // 左侧时间轴条数(来自 termDateList,即物候期 startDate 数量)
|
|
|
+ const termCount = termDateList.value?.length || 1;
|
|
|
|
|
|
// 等分高度:总高度 / 节气数量
|
|
|
const termHeight = totalHeight / termCount;
|
|
|
@@ -602,6 +603,14 @@ const getFarmWorkPlan = () => {
|
|
|
)
|
|
|
: [];
|
|
|
phenologyList.value = processedPhenologyList;
|
|
|
+ // 由物候期 startDate 生成左侧时间轴数据,按 startTimeMs 排序
|
|
|
+ termDateList.value = processedPhenologyList
|
|
|
+ .map((it) => ({ startDate: it.startDate, startTimeMs: it.startTimeMs }))
|
|
|
+ .sort((a, b) => {
|
|
|
+ const ma = Number.isNaN(a.startTimeMs) ? Infinity : a.startTimeMs;
|
|
|
+ const mb = Number.isNaN(b.startTimeMs) ? Infinity : b.startTimeMs;
|
|
|
+ return ma - mb;
|
|
|
+ });
|
|
|
// 使用多次 nextTick 和 requestAnimationFrame 确保DOM完全渲染
|
|
|
nextTick(() => {
|
|
|
requestAnimationFrame(() => {
|
|
|
@@ -696,6 +705,7 @@ const getFarmWorkPlan = () => {
|
|
|
isEmpty.value = true;
|
|
|
solarTerms.value = [];
|
|
|
phenologyList.value = [];
|
|
|
+ termDateList.value = [];
|
|
|
}
|
|
|
})
|
|
|
.catch((error) => {
|
|
|
@@ -705,25 +715,35 @@ const getFarmWorkPlan = () => {
|
|
|
isEmpty.value = true;
|
|
|
solarTerms.value = [];
|
|
|
phenologyList.value = [];
|
|
|
+ termDateList.value = [];
|
|
|
});
|
|
|
};
|
|
|
|
|
|
const updateFarmWorkPlan = () => {
|
|
|
solarTerms.value = [];
|
|
|
phenologyList.value = [];
|
|
|
+ termDateList.value = [];
|
|
|
isEmpty.value = false;
|
|
|
getFarmWorkPlan();
|
|
|
};
|
|
|
|
|
|
+// 记录上次已请求的 farmId,避免 immediate 与后续重复触发导致同一 farmId 请求两次
|
|
|
+const lastRequestedFarmId = ref(null);
|
|
|
watch(
|
|
|
() => props.farmId,
|
|
|
(val) => {
|
|
|
- if (val) {
|
|
|
- isInitialLoad.value = true;
|
|
|
- updateFarmWorkPlan();
|
|
|
+ if (!val) {
|
|
|
+ lastRequestedFarmId.value = null;
|
|
|
+ return;
|
|
|
}
|
|
|
+ if (lastRequestedFarmId.value == val) {
|
|
|
+ return; // 同一 farmId 不重复请求(使用 == 兼容 string/number)
|
|
|
+ }
|
|
|
+ lastRequestedFarmId.value = val;
|
|
|
+ isInitialLoad.value = true;
|
|
|
+ updateFarmWorkPlan();
|
|
|
},
|
|
|
- // { immediate: true }
|
|
|
+ { immediate: true }
|
|
|
);
|
|
|
|
|
|
// 格式化日期为 MM-DD 格式
|
|
|
@@ -939,7 +959,7 @@ watch(
|
|
|
color: #fff;
|
|
|
font-size: 12px;
|
|
|
position: absolute;
|
|
|
- left: 32px;
|
|
|
+ left: 39px;
|
|
|
z-index: 10;
|
|
|
text-align: center;
|
|
|
display: flex;
|
|
|
@@ -1002,11 +1022,11 @@ watch(
|
|
|
}
|
|
|
.arranges {
|
|
|
display: flex;
|
|
|
- max-width: calc(100vw - 111px);
|
|
|
- min-width: calc(100vw - 111px);
|
|
|
+ max-width: calc(100vw - 118px);
|
|
|
+ min-width: calc(100vw - 118px);
|
|
|
gap: 5px;
|
|
|
letter-spacing: 0px;
|
|
|
- min-height: 90px;
|
|
|
+ // min-height: 90px;
|
|
|
.arrange-card {
|
|
|
width: 95%;
|
|
|
border: 0.5px solid #2199f8;
|
|
|
@@ -1177,15 +1197,10 @@ watch(
|
|
|
.term-name {
|
|
|
display: inline-block;
|
|
|
width: 100%;
|
|
|
- min-height: 32px;
|
|
|
+ min-height: 20px;
|
|
|
line-height: 26px;
|
|
|
background: #fff;
|
|
|
font-size: 12px;
|
|
|
- margin-top: -4px;
|
|
|
- }
|
|
|
- .term-date {
|
|
|
- font-size: 10px;
|
|
|
- margin: -11px 0 0 -6px;
|
|
|
}
|
|
|
}
|
|
|
.empty-state {
|