|
|
@@ -0,0 +1,988 @@
|
|
|
+<template>
|
|
|
+ <div class="timeline-container" ref="timelineContainerRef">
|
|
|
+ <div class="timeline-list" ref="timelineListRef">
|
|
|
+ <div class="timeline-middle-line"></div>
|
|
|
+ <div
|
|
|
+ v-for="(t, tIdx) in solarTerms"
|
|
|
+ :key="`term-${uniqueTimestamp}-${tIdx}`"
|
|
|
+ class="timeline-term"
|
|
|
+ :style="getTermStyle(t, tIdx)"
|
|
|
+ >
|
|
|
+ <span class="term-name">{{ t.displayName }}</span>
|
|
|
+ <span class="term-date">01-05</span>
|
|
|
+ </div>
|
|
|
+ <div v-for="(p, idx) in phenologyList" :key="`phenology-${uniqueTimestamp}-${idx}`" class="phenology-bar">
|
|
|
+ <div
|
|
|
+ class="phenology-title"
|
|
|
+ :class="{ 'phenology-red': !shouldShowBlue(p), 'phenology-blue': shouldShowBlue(p) }"
|
|
|
+ v-if="p.reproductiveList[0]?.phenologyName === getNextPhenologyName(idx, 0)"
|
|
|
+ >
|
|
|
+ {{ p.reproductiveList[0]?.phenologyName }}
|
|
|
+ </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
|
|
|
+ v-for="(fw, aIdx) in Array.isArray(r.farmWorkArrangeList) ? r.farmWorkArrangeList : []"
|
|
|
+ :key="`arrange-${uniqueTimestamp}-${idx}-${rIdx}-${aIdx}`"
|
|
|
+ class="arrange-card"
|
|
|
+ :class="[
|
|
|
+ getArrangeStatusClass(fw),
|
|
|
+ { 'first-card': aIdx === 0 && rIdx !== 0 },
|
|
|
+ { 'last-card': aIdx === r.farmWorkArrangeList.length - 1 && rIdx !== r.farmWorkArrangeList.length - 1 },
|
|
|
+ // 右侧农事卡片跟随物候期颜色：未来节气对应的农事卡片置灰
|
|
|
+ { 'future-card': !shouldShowBlue(p) }
|
|
|
+ ]"
|
|
|
+ @click="handleRowClick(fw)"
|
|
|
+ >
|
|
|
+ <div class="card-content">
|
|
|
+ <div class="card-left">
|
|
|
+ <div class="left-date">{{ formatDate(fw.createTime) }}</div>
|
|
|
+ <span>张扬 上传了作物照片</span>
|
|
|
+ </div>
|
|
|
+ <div class="card-right">
|
|
|
+ <img src="@/assets/img/home/farm.png" alt="">
|
|
|
+ <div class="num">2</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <template v-if="r.name === r.phenologyName">
|
|
|
+ <div
|
|
|
+ class="phenology-name single"
|
|
|
+ :class="{ 'phenology-red': !shouldShowBlue(p), 'phenology-blue': shouldShowBlue(p) }"
|
|
|
+ :style="r.phenologyName === getNextPhenologyName(idx, rIdx) ? 'padding: 6px 0;' : ''"
|
|
|
+ >
|
|
|
+ {{ r.name }}
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <template v-if="r.phenologyName === getNextPhenologyName(idx, rIdx)">
|
|
|
+ <div
|
|
|
+ class="phenology-name"
|
|
|
+ :class="{ 'text-red': !shouldShowBlue(p), 'text-blue': shouldShowBlue(p) }"
|
|
|
+ >
|
|
|
+ {{ r.name }}
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <div
|
|
|
+ class="phenology-name"
|
|
|
+ :class="{ 'text-red': !shouldShowBlue(p), 'text-blue': shouldShowBlue(p) }"
|
|
|
+ >
|
|
|
+ {{ r.name }}
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="phenology-name mr"
|
|
|
+ :class="{ 'phenology-red': !shouldShowBlue(p), 'phenology-blue': shouldShowBlue(p) }"
|
|
|
+ >
|
|
|
+ {{ r.phenologyName }}
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 互动设置弹窗 -->
|
|
|
+ <interact-popup ref="interactPopupRef" @handleSaveSuccess="updateFarmWorkPlan"></interact-popup>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref, nextTick, watch, onMounted, onUnmounted } from "vue";
|
|
|
+import interactPopup from "@/components/popup/interactPopup.vue";
|
|
|
+import { ElMessage } from "element-plus";
|
|
|
+import { WarningFilled } from "@element-plus/icons-vue";
|
|
|
+
|
|
|
+const props = defineProps({
|
|
|
+ // 农场 ID，用于请求农事规划数据
|
|
|
+ farmId: {
|
|
|
+ type: [String, Number],
|
|
|
+ default: null,
|
|
|
+ },
|
|
|
+ // 页面类型：种植方案 / 农事规划，用来控制高度样式
|
|
|
+ pageType: {
|
|
|
+ type: String,
|
|
|
+ default: "",
|
|
|
+ },
|
|
|
+ // 是否禁用所有点击事件（用于只读展示）
|
|
|
+ disableClick: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ containerId: {
|
|
|
+ type: [Number, String],
|
|
|
+ default: null,
|
|
|
+ },
|
|
|
+ // 是否是标准农事
|
|
|
+ isStandard: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ // 方案ID
|
|
|
+ schemeId: {
|
|
|
+ type: [Number, String],
|
|
|
+ default: null,
|
|
|
+ },
|
|
|
+});
|
|
|
+
|
|
|
+const farmWorkType = {
|
|
|
+ 0: "预警农事",
|
|
|
+ 1: "标准农事",
|
|
|
+ 2: "建议农事",
|
|
|
+ 3: "自建农事",
|
|
|
+};
|
|
|
+
|
|
|
+const emits = defineEmits(["row-click"]);
|
|
|
+
|
|
|
+const solarTerms = ref([]);
|
|
|
+const phenologyList = ref([]);
|
|
|
+const timelineContainerRef = ref(null);
|
|
|
+const timelineListRef = ref(null);
|
|
|
+// 标记是否为首次加载
|
|
|
+const isInitialLoad = ref(true);
|
|
|
+// 存储timeline-list的实际渲染高度
|
|
|
+const timelineListHeight = ref(0);
|
|
|
+// 生成唯一的时间戳，用于确保key的唯一性
|
|
|
+const uniqueTimestamp = ref(Date.now());
|
|
|
+// ResizeObserver 实例，用于监听高度变化
|
|
|
+let resizeObserver = null;
|
|
|
+
|
|
|
+// 获取当前季节
|
|
|
+const getCurrentSeason = () => {
|
|
|
+ const month = new Date().getMonth() + 1; // 1-12
|
|
|
+ if (month >= 3 && month <= 5) {
|
|
|
+ return "spring"; // 春季：3-5月
|
|
|
+ } else if (month >= 6 && month <= 8) {
|
|
|
+ return "summer"; // 夏季：6-8月
|
|
|
+ } else if (month >= 9 && month <= 10) {
|
|
|
+ return "autumn"; // 秋季：9-10月
|
|
|
+ } else {
|
|
|
+ return "winter"; // 冬季：11-2月
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+// 安全解析时间到时间戳（ms）
|
|
|
+const safeParseDate = (val) => {
|
|
|
+ if (!val) return NaN;
|
|
|
+ if (val instanceof Date) return val.getTime();
|
|
|
+ if (typeof val === "number") return val;
|
|
|
+ if (typeof val === "string") {
|
|
|
+ // 兼容 "YYYY-MM-DD HH:mm:ss" -> Safari
|
|
|
+ const s = val.replace(/-/g, "/").replace("T", " ");
|
|
|
+ const d = new Date(s);
|
|
|
+ return isNaN(d.getTime()) ? NaN : d.getTime();
|
|
|
+ }
|
|
|
+ return NaN;
|
|
|
+};
|
|
|
+
|
|
|
+const batchValidateData = ref({});
|
|
|
+const allTrue = ref(false);
|
|
|
+const invalidIds = ref([]);
|
|
|
+const invalidArr = ref([]);
|
|
|
+// 验证农事卡片药肥报价信息是否完整
|
|
|
+const batchValidatePesticideFertilizerQuotes = (ids, items) => {
|
|
|
+ if (props.isStandard) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ VE_API.monitor
|
|
|
+ .batchValidatePesticideFertilizerQuotes({ ids, schemeId: props.schemeId })
|
|
|
+ .then(({ data, code }) => {
|
|
|
+ if (code === 0) {
|
|
|
+ batchValidateData.value = data || {};
|
|
|
+ allTrue.value = Object.values(data).every((value) => value === true);
|
|
|
+ invalidIds.value = Object.keys(data).filter((key) => data[key] !== true);
|
|
|
+
|
|
|
+ // 清空之前的arrangeIds
|
|
|
+ invalidArr.value = [];
|
|
|
+ // 遍历items，判断farmWorkId是否在invalidIds中，如果对应上了就把item.id push进去
|
|
|
+ items.forEach((item) => {
|
|
|
+ // 判断item.farmWorkId是否在invalidIds数组中（需要转换为字符串进行比较）
|
|
|
+ const farmWorkIdStr = String(item.farmWorkId);
|
|
|
+ if (invalidIds.value.includes(farmWorkIdStr)) {
|
|
|
+ invalidArr.value.push({
|
|
|
+ arrangeId: item.id,
|
|
|
+ farmWorkId: item.farmWorkId,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(() => {});
|
|
|
+};
|
|
|
+
|
|
|
+// 获取下一个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) => {
|
|
|
+ // 统计该物候期内的农事数量
|
|
|
+ let farmWorkCount = 0;
|
|
|
+
|
|
|
+ if (Array.isArray(item.reproductiveList)) {
|
|
|
+ item.reproductiveList.forEach((reproductive) => {
|
|
|
+ if (Array.isArray(reproductive.farmWorkArrangeList)) {
|
|
|
+ farmWorkCount += reproductive.farmWorkArrangeList.length;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 如果没有农事，给一个最小高度
|
|
|
+ if (farmWorkCount === 0) {
|
|
|
+ return 50; // 最小50px
|
|
|
+ }
|
|
|
+
|
|
|
+ // 每个农事卡片的高度（根据实际内容，卡片高度可能因内容而异）
|
|
|
+ // 卡片包含：padding(8px*2) + header(约25px) + content margin(4px+2px) + content(约25-30px) = 约72-77px
|
|
|
+ // 考虑到内容可能换行，实际高度可能更高，设置为120px更安全，避免卡片重叠
|
|
|
+ const farmWorkCardHeight = 120; // 卡片高度估算，确保能容纳内容且不重叠
|
|
|
+ // 卡片之间的间距（与CSS中的gap保持一致）
|
|
|
+ const cardGap = 12;
|
|
|
+
|
|
|
+ // 计算总高度：卡片数量 * 卡片高度 + (卡片数量 - 1) * 间距
|
|
|
+ // 如果有多个卡片，需要加上它们之间的间距
|
|
|
+ const totalHeight = farmWorkCount * farmWorkCardHeight + (farmWorkCount > 1 ? (farmWorkCount - 1) * cardGap : 0);
|
|
|
+
|
|
|
+ // 返回精确的总高度，只保留最小高度限制，不添加额外余量
|
|
|
+ return Math.max(totalHeight, 50); // 最小50px，精确匹配农事卡片高度
|
|
|
+};
|
|
|
+
|
|
|
+// 计算所有物候期的累积位置和总高度
|
|
|
+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}`;
|
|
|
+ positions.set(itemId, {
|
|
|
+ top: currentTop,
|
|
|
+ height: height,
|
|
|
+ });
|
|
|
+ currentTop += height; // 紧挨着下一个物候期，不留间距
|
|
|
+ });
|
|
|
+
|
|
|
+ return {
|
|
|
+ positions,
|
|
|
+ totalHeight: currentTop, // 总高度 = 最后一个物候期的底部位置，不添加额外间距
|
|
|
+ };
|
|
|
+};
|
|
|
+
|
|
|
+// 计算所有农事的总高度（基于物候期紧挨排列）
|
|
|
+const calculateTotalHeightByFarmWorks = () => {
|
|
|
+ const { totalHeight } = calculatePhenologyPositions();
|
|
|
+
|
|
|
+ // 如果有物候期数据，直接使用计算出的总高度
|
|
|
+ // totalHeight 已经包含了从 10 开始的起始位置和所有物候期的高度
|
|
|
+ if (totalHeight > 10) {
|
|
|
+ // 确保总高度至少能容纳所有节气（每个节气至少50px）
|
|
|
+ const baseHeight = (solarTerms.value?.length || 0) * 50;
|
|
|
+ // 返回物候期总高度和基础高度的较大值，确保节气能正常显示
|
|
|
+ return Math.max(totalHeight, baseHeight);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 如果没有物候期数据，返回基础高度
|
|
|
+ const baseHeight = (solarTerms.value?.length || 0) * 50;
|
|
|
+ return baseHeight || 100; // 至少返回100px，避免为0
|
|
|
+};
|
|
|
+
|
|
|
+const getTermStyle = (t, index) => {
|
|
|
+ // 优先使用实际测量的timeline-list高度，如果没有测量到则使用计算值作为后备
|
|
|
+ const totalHeight = timelineListHeight.value > 0 ? timelineListHeight.value : calculateTotalHeightByFarmWorks();
|
|
|
+ // 获取节气总数
|
|
|
+ const termCount = solarTerms.value?.length || 1;
|
|
|
+
|
|
|
+ // 等分高度：总高度 / 节气数量
|
|
|
+ const termHeight = totalHeight / termCount;
|
|
|
+
|
|
|
+ // 计算top位置：索引 * 每个节气的高度
|
|
|
+ const top = index * termHeight;
|
|
|
+
|
|
|
+ return {
|
|
|
+ position: "absolute",
|
|
|
+ top: `${top}px`,
|
|
|
+ left: 0,
|
|
|
+ width: "32px",
|
|
|
+ height: `${termHeight}px`, // 高度等分，使用实际测量的高度
|
|
|
+ display: "flex",
|
|
|
+ alignItems: "center",
|
|
|
+ };
|
|
|
+};
|
|
|
+
|
|
|
+// 点击季节 → 滚动到对应节气（立春/立夏/立秋/立冬）
|
|
|
+const handleSeasonClick = (seasonValue) => {
|
|
|
+ const mapping = {
|
|
|
+ spring: "立春",
|
|
|
+ summer: "立夏",
|
|
|
+ autumn: "立秋",
|
|
|
+ winter: "立冬",
|
|
|
+ };
|
|
|
+ const targetName = mapping[seasonValue];
|
|
|
+ if (!targetName) return;
|
|
|
+
|
|
|
+ // 查找对应的节气
|
|
|
+ const targetIndex = solarTerms.value.findIndex((t) => (t?.displayName || "") === targetName);
|
|
|
+ if (targetIndex === -1) return;
|
|
|
+
|
|
|
+ // 计算目标节气的top位置
|
|
|
+ const totalHeight = timelineListHeight.value > 0 ? timelineListHeight.value : calculateTotalHeightByFarmWorks();
|
|
|
+ const termCount = solarTerms.value?.length || 1;
|
|
|
+ const termHeight = totalHeight / termCount;
|
|
|
+ const targetTop = targetIndex * termHeight;
|
|
|
+
|
|
|
+ // 滚动到目标位置
|
|
|
+ const wrap = timelineContainerRef.value;
|
|
|
+ if (!wrap) return;
|
|
|
+ const viewH = wrap.clientHeight || 0;
|
|
|
+ const maxScroll = Math.max(0, wrap.scrollHeight - viewH);
|
|
|
+ // 将目标位置稍微靠上（使用 0.1 视口高度做偏移）
|
|
|
+ let scrollTop = Math.max(0, targetTop - viewH * 0.1);
|
|
|
+ if (scrollTop > maxScroll) scrollTop = maxScroll;
|
|
|
+ wrap.scrollTo({ top: scrollTop, behavior: "smooth" });
|
|
|
+};
|
|
|
+
|
|
|
+// 农事状态样式映射（0:取消关注，1:关注，2:托管农事，）
|
|
|
+const getArrangeStatusClass = (fw) => {
|
|
|
+ const t = fw?.isFollow;
|
|
|
+ // const warningStatus = shouldShowIncompleteStatus(fw.farmWorkId);
|
|
|
+ if (t == 0) return "normal-style";
|
|
|
+ // if (warningStatus) return "status-warning";
|
|
|
+ // if (t >= 0 && t <= 4) return "status-normal";
|
|
|
+ // if (t === 5) return "status-complete";
|
|
|
+ return "status-normal";
|
|
|
+};
|
|
|
+
|
|
|
+const handleRowClick = (item) => {
|
|
|
+ // 记录当前页面滚动位置
|
|
|
+ if (timelineContainerRef.value) {
|
|
|
+ const scrollTop = timelineContainerRef.value.scrollTop || 0;
|
|
|
+ sessionStorage.setItem('timelineScrollTop', scrollTop.toString());
|
|
|
+ }
|
|
|
+
|
|
|
+ // item.isEdit = shouldShowIncompleteStatus(item.farmWorkId);
|
|
|
+ item.invalidIds = invalidIds.value;
|
|
|
+ item.invalidArr = invalidArr.value;
|
|
|
+ emits("row-click", item);
|
|
|
+};
|
|
|
+
|
|
|
+const interactPopupRef = ref(null);
|
|
|
+const handleEdit = (item) => {
|
|
|
+ if (props.disableClick) return;
|
|
|
+ if (interactPopupRef.value) {
|
|
|
+ interactPopupRef.value.showPopup(item);
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+// 获取农事规划数据
|
|
|
+const getFarmWorkPlan = () => {
|
|
|
+ if (!props.farmId) return;
|
|
|
+ // 更新时间戳，确保key变化，触发DOM重新渲染
|
|
|
+ uniqueTimestamp.value = Date.now();
|
|
|
+ // 重置测量高度，等待重新测量
|
|
|
+ timelineListHeight.value = 0;
|
|
|
+ let savedScrollTop = 0;
|
|
|
+ if (!isInitialLoad.value && timelineContainerRef.value) {
|
|
|
+ savedScrollTop = timelineContainerRef.value.scrollTop || 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ VE_API.monitor
|
|
|
+ .getArchivesList({ farmId: props.farmId })
|
|
|
+ .then(({ data, code }) => {
|
|
|
+ if (code === 0) {
|
|
|
+ const list = Array.isArray(data?.solarTermsList) ? data.solarTermsList : [];
|
|
|
+ const filtered = list
|
|
|
+ .filter((t) => t && t.type === 1)
|
|
|
+ .map((t) => ({
|
|
|
+ id:
|
|
|
+ t.id ??
|
|
|
+ t.solarTermsId ??
|
|
|
+ t.termId ??
|
|
|
+ `${t.name || t.solarTermsName || t.termName || "term"}-${t.createDate || ""}`,
|
|
|
+ displayName: t.name || t.solarTermsName || t.termName || "节气",
|
|
|
+ createDate: t.createDate || null,
|
|
|
+ progress: Number(t.progress) || 0,
|
|
|
+ }));
|
|
|
+ solarTerms.value = filtered;
|
|
|
+ // 物候期数据
|
|
|
+ phenologyList.value = Array.isArray(data?.phenologyList)
|
|
|
+ ? data.phenologyList.map((it) => {
|
|
|
+ const reproductiveList = Array.isArray(it.reproductiveList)
|
|
|
+ ? it.reproductiveList.map((r) => {
|
|
|
+ const farmWorkArrangeList = Array.isArray(r.broadcastList)
|
|
|
+ ? r.broadcastList.map((fw) => ({
|
|
|
+ ...fw,
|
|
|
+ containerSpaceTimeId: it.containerSpaceTimeId,
|
|
|
+ }))
|
|
|
+ : [];
|
|
|
+ return {
|
|
|
+ ...r,
|
|
|
+ farmWorkArrangeList,
|
|
|
+ };
|
|
|
+ })
|
|
|
+ : [];
|
|
|
+ return {
|
|
|
+ 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
|
|
|
+ ),
|
|
|
+ reproductiveList,
|
|
|
+ };
|
|
|
+ })
|
|
|
+ : [];
|
|
|
+ // 使用多次 nextTick 和 requestAnimationFrame 确保DOM完全渲染
|
|
|
+ nextTick(() => {
|
|
|
+ requestAnimationFrame(() => {
|
|
|
+ nextTick(() => {
|
|
|
+ requestAnimationFrame(() => {
|
|
|
+ // 测量timeline-list的实际渲染高度
|
|
|
+ if (timelineListRef.value) {
|
|
|
+ const height =
|
|
|
+ timelineListRef.value.offsetHeight || timelineListRef.value.clientHeight;
|
|
|
+ if (height > 0) {
|
|
|
+ timelineListHeight.value = height;
|
|
|
+
|
|
|
+ // 如果是首次加载，滚动到当前季节对应的节气
|
|
|
+ if (isInitialLoad.value) {
|
|
|
+ const currentSeason = getCurrentSeason();
|
|
|
+ handleSeasonClick(currentSeason);
|
|
|
+ isInitialLoad.value = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (isInitialLoad.value) {
|
|
|
+ // 如果测量失败，延迟一下再尝试滚动
|
|
|
+ setTimeout(() => {
|
|
|
+ if (timelineListRef.value) {
|
|
|
+ const height =
|
|
|
+ timelineListRef.value.offsetHeight ||
|
|
|
+ timelineListRef.value.clientHeight;
|
|
|
+ if (height > 0) {
|
|
|
+ timelineListHeight.value = height;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ const currentSeason = getCurrentSeason();
|
|
|
+ handleSeasonClick(currentSeason);
|
|
|
+ isInitialLoad.value = false;
|
|
|
+ }, 200);
|
|
|
+ } else {
|
|
|
+ // 尝试恢复之前保存的滚动位置
|
|
|
+ const savedScrollTopFromStorage = sessionStorage.getItem('timelineScrollTop');
|
|
|
+ if (savedScrollTopFromStorage) {
|
|
|
+ // 等待 DOM 完全渲染后再恢复滚动位置
|
|
|
+ nextTick(() => {
|
|
|
+ requestAnimationFrame(() => {
|
|
|
+ if (timelineContainerRef.value) {
|
|
|
+ const scrollTop = Number(savedScrollTopFromStorage);
|
|
|
+ timelineContainerRef.value.scrollTop = scrollTop;
|
|
|
+ // 恢复后清除保存的位置，避免下次误恢复
|
|
|
+ sessionStorage.removeItem('timelineScrollTop');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ } else if (timelineContainerRef.value && savedScrollTop > 0) {
|
|
|
+ timelineContainerRef.value.scrollTop = savedScrollTop;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ // 收集所有farmWorkId
|
|
|
+ const farmWorkIds = [];
|
|
|
+ const farmWorks = [];
|
|
|
+ phenologyList.value.forEach((phenology) => {
|
|
|
+ if (Array.isArray(phenology.reproductiveList)) {
|
|
|
+ phenology.reproductiveList.forEach((reproductive) => {
|
|
|
+ if (Array.isArray(reproductive.farmWorkArrangeList)) {
|
|
|
+ reproductive.farmWorkArrangeList.forEach((farmWork) => {
|
|
|
+ if (farmWork.farmWorkId && farmWork.isFollow !== 0) {
|
|
|
+ farmWorkIds.push(farmWork.farmWorkId);
|
|
|
+ farmWorks.push(farmWork);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 调用验证方法，传入所有ids
|
|
|
+ if (farmWorkIds.length > 0) {
|
|
|
+ batchValidatePesticideFertilizerQuotes(farmWorkIds, farmWorks);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((error) => {
|
|
|
+ console.error("获取农事规划数据失败:", error);
|
|
|
+ ElMessage.error("获取农事规划数据失败");
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+const updateFarmWorkPlan = () => {
|
|
|
+ solarTerms.value = [];
|
|
|
+ phenologyList.value = [];
|
|
|
+ getFarmWorkPlan();
|
|
|
+};
|
|
|
+
|
|
|
+watch(
|
|
|
+ () => props.farmId || props.containerId,
|
|
|
+ (val) => {
|
|
|
+ if (val) {
|
|
|
+ isInitialLoad.value = true;
|
|
|
+ updateFarmWorkPlan();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ { immediate: true }
|
|
|
+);
|
|
|
+watch(
|
|
|
+ () => props.schemeId,
|
|
|
+ (val) => {
|
|
|
+ // if (val) {
|
|
|
+ updateFarmWorkPlan();
|
|
|
+ // }
|
|
|
+ }
|
|
|
+);
|
|
|
+
|
|
|
+// 格式化日期为 MM-DD 格式
|
|
|
+const formatDate = (dateStr) => {
|
|
|
+ if (!dateStr) return "--";
|
|
|
+ const date = new Date(dateStr);
|
|
|
+ if (Number.isNaN(date.getTime())) return dateStr;
|
|
|
+ const m = `${date.getMonth() + 1}`.padStart(2, "0");
|
|
|
+ const d = `${date.getDate()}`.padStart(2, "0");
|
|
|
+ return `${m}-${d}`;
|
|
|
+};
|
|
|
+
|
|
|
+// 获取下一个即将到来的节气（当前节气）的 progress
|
|
|
+const getNextTermProgress = () => {
|
|
|
+ if (!solarTerms.value || solarTerms.value.length === 0) return Infinity;
|
|
|
+
|
|
|
+ const now = new Date();
|
|
|
+ now.setHours(0, 0, 0, 0);
|
|
|
+
|
|
|
+ let nextTermProgress = Infinity;
|
|
|
+
|
|
|
+ // 找到当前日期之后的下一个节气（当前节气）
|
|
|
+ solarTerms.value.forEach((term) => {
|
|
|
+ const termDate = safeParseDate(term.createDate);
|
|
|
+ if (!isNaN(termDate)) {
|
|
|
+ const termDateObj = new Date(termDate);
|
|
|
+ termDateObj.setHours(0, 0, 0, 0);
|
|
|
+ // 找到大于等于当前日期的第一个节气
|
|
|
+ if (termDateObj >= now) {
|
|
|
+ const termProgress = Number(term.progress) || 0;
|
|
|
+ if (termProgress < nextTermProgress) {
|
|
|
+ nextTermProgress = termProgress;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 如果没有找到未来的节气，说明所有节气都已过，返回 Infinity（所有物候期都显示蓝色）
|
|
|
+ return nextTermProgress === Infinity ? Infinity : nextTermProgress;
|
|
|
+};
|
|
|
+
|
|
|
+// 根据物候期的 progress 判断它所属节气的 progress
|
|
|
+const getPhenologyTermProgress = (phenologyProgress) => {
|
|
|
+ if (!solarTerms.value || solarTerms.value.length === 0) return -1;
|
|
|
+
|
|
|
+ const progress = Number(phenologyProgress) || 0;
|
|
|
+
|
|
|
+ // 找到物候期所属的节气（progress 最接近且小于等于的节气）
|
|
|
+ let matchedTermProgress = -1;
|
|
|
+ solarTerms.value.forEach((term) => {
|
|
|
+ const termProgress = Number(term.progress) || 0;
|
|
|
+ if (progress >= termProgress && termProgress > matchedTermProgress) {
|
|
|
+ matchedTermProgress = termProgress;
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 如果物候期的 progress 小于所有节气，返回第一个节气的 progress
|
|
|
+ if (matchedTermProgress === -1 && solarTerms.value.length > 0) {
|
|
|
+ const firstTermProgress = Number(solarTerms.value[0].progress) || 0;
|
|
|
+ return firstTermProgress;
|
|
|
+ }
|
|
|
+
|
|
|
+ return matchedTermProgress;
|
|
|
+};
|
|
|
+
|
|
|
+// 判断物候期是否应该显示蓝色（已过或当前节气的物候期）
|
|
|
+const shouldShowBlue = (phenology) => {
|
|
|
+ // 获取下一个即将到来的节气（当前节气）的 progress
|
|
|
+ const nextTermProgress = getNextTermProgress();
|
|
|
+
|
|
|
+ // 如果所有节气都已过（nextTermProgress === Infinity），所有物候期都显示蓝色
|
|
|
+ if (nextTermProgress === Infinity) {
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 根据物候期的 progress 判断它属于哪个节气
|
|
|
+ const phenologyProgress = Math.min(Number(phenology?.progress) || 0, Number(phenology?.progress2) || 0);
|
|
|
+ const phenologyTermProgress = getPhenologyTermProgress(phenologyProgress);
|
|
|
+
|
|
|
+ // 找到下一个节气的完整信息，用于判断物候期是否属于当前节气
|
|
|
+ let nextTerm = null;
|
|
|
+ solarTerms.value.forEach((term) => {
|
|
|
+ const termProgress = Number(term.progress) || 0;
|
|
|
+ if (termProgress === nextTermProgress) {
|
|
|
+ nextTerm = term;
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 如果物候期所属的节气的 progress < 下一个节气的 progress，显示蓝色
|
|
|
+ // 如果物候期所属的节气的 progress === 下一个节气的 progress，也显示蓝色（当前节气）
|
|
|
+ // 也就是说，只有属于当前节气或之前节气的物候期才显示蓝色
|
|
|
+ if (phenologyTermProgress === -1) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 如果物候期正好属于下一个节气，需要判断它的 progress 是否在下一个节气的范围内
|
|
|
+ if (phenologyTermProgress === nextTermProgress && nextTerm) {
|
|
|
+ // 如果物候期的 progress 小于等于下一个节气的 progress，说明它属于当前节气，显示蓝色
|
|
|
+ return phenologyProgress <= nextTermProgress;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 如果物候期所属的节气的 progress < 下一个节气的 progress，显示蓝色
|
|
|
+ return phenologyTermProgress < nextTermProgress;
|
|
|
+};
|
|
|
+
|
|
|
+defineExpose({
|
|
|
+ updateFarmWorkPlan,
|
|
|
+});
|
|
|
+
|
|
|
+// 使用 ResizeObserver 监听高度变化，确保在DOM完全渲染后获取准确高度
|
|
|
+const setupResizeObserver = () => {
|
|
|
+ if (!timelineListRef.value || typeof ResizeObserver === "undefined") {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 如果已经存在观察者，先断开
|
|
|
+ if (resizeObserver) {
|
|
|
+ resizeObserver.disconnect();
|
|
|
+ }
|
|
|
+
|
|
|
+ // 创建新的观察者
|
|
|
+ resizeObserver = new ResizeObserver((entries) => {
|
|
|
+ for (const entry of entries) {
|
|
|
+ const height = entry.contentRect.height;
|
|
|
+ if (height > 0 && height !== timelineListHeight.value) {
|
|
|
+ timelineListHeight.value = height;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 开始观察
|
|
|
+ resizeObserver.observe(timelineListRef.value);
|
|
|
+};
|
|
|
+
|
|
|
+// 组件挂载后设置 ResizeObserver
|
|
|
+onMounted(() => {
|
|
|
+ nextTick(() => {
|
|
|
+ requestAnimationFrame(() => {
|
|
|
+ setupResizeObserver();
|
|
|
+ });
|
|
|
+ });
|
|
|
+});
|
|
|
+
|
|
|
+// 组件卸载前清理 ResizeObserver
|
|
|
+onUnmounted(() => {
|
|
|
+ if (resizeObserver) {
|
|
|
+ resizeObserver.disconnect();
|
|
|
+ resizeObserver = null;
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+// 在数据更新后重新设置 ResizeObserver
|
|
|
+watch(
|
|
|
+ () => phenologyList.value.length,
|
|
|
+ () => {
|
|
|
+ nextTick(() => {
|
|
|
+ requestAnimationFrame(() => {
|
|
|
+ setupResizeObserver();
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+);
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.timeline-container {
|
|
|
+ height: 100%;
|
|
|
+ overflow: auto;
|
|
|
+ position: relative;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .timeline-list {
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .timeline-middle-line {
|
|
|
+ position: absolute;
|
|
|
+ left: 15px; /* 位于节气文字列中间（列宽约30px） */
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ width: 2px;
|
|
|
+ background: #e8e8e8;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+ .phenology-bar {
|
|
|
+ align-items: stretch;
|
|
|
+ justify-content: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: relative;
|
|
|
+ .phenology-title{
|
|
|
+ width: 18px;
|
|
|
+ height: 98.5%;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 12px;
|
|
|
+ position: absolute;
|
|
|
+ left: 32px;
|
|
|
+ z-index: 10;
|
|
|
+ text-align: center;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ &.phenology-blue {
|
|
|
+ background: #2199f8;
|
|
|
+ }
|
|
|
+ &.phenology-red {
|
|
|
+ background: #F1F1F1;
|
|
|
+ color: #808080;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .reproductive-item {
|
|
|
+ font-size: 12px;
|
|
|
+ text-align: center;
|
|
|
+ word-break: break-all;
|
|
|
+ writing-mode: vertical-rl;
|
|
|
+ text-orientation: upright;
|
|
|
+ letter-spacing: 3px;
|
|
|
+ width: 100%;
|
|
|
+ line-height: 23px;
|
|
|
+ color: inherit;
|
|
|
+ position: relative;
|
|
|
+ .phenology-name {
|
|
|
+ width: 18px;
|
|
|
+ line-height: 16px;
|
|
|
+ height: 100%;
|
|
|
+ color: #fff;
|
|
|
+ padding: 4px 0;
|
|
|
+ font-size: 12px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ &.mr{
|
|
|
+ margin-right: 3px;
|
|
|
+ }
|
|
|
+ &.single{
|
|
|
+ width: 39px;
|
|
|
+ line-height: 39px;
|
|
|
+ }
|
|
|
+ &.phenology-blue {
|
|
|
+ background: #2199f8;
|
|
|
+ }
|
|
|
+ &.phenology-red {
|
|
|
+ background: #F1F1F1;
|
|
|
+ color: #808080;
|
|
|
+ }
|
|
|
+ &.text-blue{
|
|
|
+ background: rgba(33, 153, 248, 0.15);
|
|
|
+ color: #2199f8;
|
|
|
+ border: 1px solid #2199f8;
|
|
|
+ line-height: 16px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ &.text-red{
|
|
|
+ background:rgba(128, 128, 128,.15);
|
|
|
+ color: #808080;
|
|
|
+ border: 1px solid rgba(128, 128, 128,.35);
|
|
|
+ line-height: 16px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .arranges {
|
|
|
+ display: flex;
|
|
|
+ max-width: calc(100vw - 111px);
|
|
|
+ min-width: calc(100vw - 111px);
|
|
|
+ gap: 5px;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ .arrange-card {
|
|
|
+ width: 95%;
|
|
|
+ border: 0.5px solid #2199f8;
|
|
|
+ border-radius: 8px;
|
|
|
+ background: #fff;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: relative;
|
|
|
+ padding: 8px 15px 8px 10px;
|
|
|
+ writing-mode: horizontal-tb;
|
|
|
+ &.first-card{
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ &.last-card{
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ .card-content {
|
|
|
+ color: #242424;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 14px;
|
|
|
+ .card-left {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ .left-date{
|
|
|
+ color: #fff;
|
|
|
+ background: #2199f8;
|
|
|
+ padding: 1px 5px;
|
|
|
+ border-radius: 2px;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .card-right {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+ img {
|
|
|
+ width: 45px;
|
|
|
+ height: 45px;
|
|
|
+ }
|
|
|
+ .num {
|
|
|
+ position: absolute;
|
|
|
+ width: 18px;
|
|
|
+ height: 18px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ top: -4px;
|
|
|
+ right: -6px;
|
|
|
+ background: #2199f8;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 12px;
|
|
|
+ border-radius: 50%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &::before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ left: -5px;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ border-top: 5px solid transparent;
|
|
|
+ border-bottom: 5px solid transparent;
|
|
|
+ border-right: 5px solid #2199f8;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .arrange-card.normal-style {
|
|
|
+ opacity: 0.3;
|
|
|
+ }
|
|
|
+ .arrange-card.future-card .card-content {
|
|
|
+ color: #808080;
|
|
|
+ }
|
|
|
+ .arrange-card.status-warning {
|
|
|
+ border-color: #ff953d;
|
|
|
+ &::before {
|
|
|
+ border-right-color: #ff953d;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .arrange-card.status-complete {
|
|
|
+ border-color: #1ca900;
|
|
|
+ &::before {
|
|
|
+ border-right-color: #1ca900;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .arrange-card.status-normal {
|
|
|
+ border-color: #2199f8;
|
|
|
+ &::before {
|
|
|
+ border-right-color: #2199f8;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 未来节气对应的农事卡片：跟随左侧物候期的“未开始”灰色样式
|
|
|
+ .arrange-card.future-card {
|
|
|
+ border-color: #E4E4E4;
|
|
|
+ .card-left{
|
|
|
+ .left-date{
|
|
|
+ background: #E4E4E4;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &::before {
|
|
|
+ border-right-color: #E4E4E4;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .reproductive-item + .reproductive-item {
|
|
|
+ padding-top: 3px;
|
|
|
+ }
|
|
|
+ .phenology-bar + .phenology-bar {
|
|
|
+ padding-top: 3px;
|
|
|
+ }
|
|
|
+ .timeline-term {
|
|
|
+ position: absolute;
|
|
|
+ width: 32px;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ flex-direction: column;
|
|
|
+ z-index: 2; /* 置于中线之上 */
|
|
|
+ color: rgba(174, 174, 174, 0.6);
|
|
|
+ .term-name {
|
|
|
+ display: inline-block;
|
|
|
+ width: 100%;
|
|
|
+ min-height: 35px;
|
|
|
+ line-height: 30px;
|
|
|
+ background: #fff;
|
|
|
+ font-size: 12px;
|
|
|
+ word-break: break-all;
|
|
|
+ writing-mode: vertical-rl;
|
|
|
+ text-orientation: upright;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .term-date {
|
|
|
+ // position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #242424;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
wangsisi