|
|
@@ -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; /* 置于中线之上 */
|