| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288 |
- <template>
- <div class="timeline-container" ref="timelineContainerRef">
- <div class="timeline-list" ref="timelineListRef">
- <empty
- v-if="isEmpty"
- image="https://birdseye-img.sysuimars.com/birdseye-look-mini/custom-empty-image.png"
- image-size="80"
- description="暂无数据"
- class="empty-state"
- />
- <template v-else>
- <div class="timeline-middle-line"></div>
- <div
- v-for="(t, tIdx) in phenologyStartDates"
- :key="`term-${uniqueTimestamp}-${tIdx}`"
- class="timeline-term"
- :style="getTermStyle(t, tIdx)"
- >
- <span class="term-name">{{ formatDate(t.startDate) }}</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),
- {
- '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" v-if="pageType === 'agri_plan'">
- <div class="left-info">
- <div class="left-date">{{ formatDate(fw.createTime) }}</div>
- <div class="text van-ellipsis" v-if="fw?.sourceType === 6">
- 上传者:{{ fw.sourceDataJson.userName }}
- </div>
- <div class="text green van-ellipsis" v-if="fw?.sourceType === 7">
- 执行者:{{ fw.sourceDataJson.executorName }}
- </div>
- </div>
- <div class="title-text van-ellipsis">{{ fw.title }}</div>
- </div>
- <div class="card-left agri-record-card" v-else>
- <div class="left-info">
- <div class="left-date">{{ formatDate(fw.createTime) }}</div>
- <div class="text van-ellipsis">
- <span class="text-name">梢期杀虫</span>
- <span @click="handleStatusDetail(fw)" class="text-detail">详情</span>
- </div>
- </div>
- <div class="title-text van-ellipsis" v-show="shouldShowBlue(p)">
- <el-icon class="icon"><WarningFilled /></el-icon>
- <span>未执行</span>
- </div>
- </div>
- <div
- class="card-right"
- v-if="fw.sourceDataJson && fw.sourceDataJson.resFilename && fw.sourceDataJson.resFilename.length > 0 || fw.sourceType === 7"
- @click.stop="handleImageClick(fw)"
- >
- <img v-if="fw.sourceType === 7" :src="base_img_url2 + fw.sourceDataJson?.executeImageUrls?.[0]" alt="" />
- <img v-else :src="base_img_url2 + fw.sourceDataJson?.resFilename?.[0]?.filename" alt="" />
- <div class="num" v-if="fw?.sourceDataJson?.imageIds || fw.sourceType === 7">
- {{ fw?.sourceDataJson?.imageIds?.length || fw?.sourceDataJson?.executeImageUrls?.length || 0 }}
- </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>
- </template>
- </div>
- </div>
- <!-- 图片弹窗 -->
- <popup v-model:show="showImagePopup" class="image-popup" z-index="9999" teleport="body">
- <album-carousel
- class="popup-content"
- :key="imageList?.length"
- labelText=""
- :imgData="currentImageData"
- :images="imageList"
- :imgType="imgType"
- disableClick
- ></album-carousel>
- </popup>
- </template>
- <script setup>
- import { ref, nextTick, watch, onMounted, onUnmounted, computed } from "vue";
- import { useRouter } from "vue-router";
- import { ElMessage } from "element-plus";
- import { Empty, Popup } from "vant";
- import { base_img_url2 } from "@/api/config";
- import AlbumCarousel from "@/components/album_compoents/albumCarousel";
- const router = useRouter();
- const props = defineProps({
- // 农场 ID,用于请求农事规划数据
- farmId: {
- type: [String, Number],
- default: null,
- },
- // 是否禁用所有点击事件(用于只读展示)
- disableClick: {
- type: Boolean,
- default: false,
- },
- // 是否是标准农事
- isStandard: {
- type: Boolean,
- default: false,
- },
- // 方案ID
- schemeId: {
- type: [Number, String],
- default: null,
- },
- // 类型:agri_record / agri_plan
- pageType: {
- type: String,
- default: "agri_plan",
- },
- });
- const farmWorkType = {
- 0: "预警农事",
- 1: "标准农事",
- 2: "建议农事",
- 3: "自建农事",
- };
- const emits = defineEmits(["row-click"]);
- const solarTerms = ref([]);
- const phenologyList = ref([]);
- // 从物候期列表中提取起始时间,用于时间轴显示
- const phenologyStartDates = computed(() => {
- if (!phenologyList.value || phenologyList.value.length === 0) {
- return [];
- }
- // 从每个物候期中提取起始时间,并去重排序
- const startDatesMap = new Map();
- phenologyList.value.forEach((phenology) => {
- if (phenology.startDate) {
- const dateKey = phenology.startDate;
- // 如果该日期还没有添加过,或者需要更新信息
- if (!startDatesMap.has(dateKey)) {
- startDatesMap.set(dateKey, {
- startDate: phenology.startDate,
- id: phenology.id || `phenology-${dateKey}`,
- });
- }
- }
- });
- // 转换为数组并按时间排序
- const result = Array.from(startDatesMap.values()).sort((a, b) => {
- const timeA = safeParseDate(a.startDate);
- const timeB = safeParseDate(b.startDate);
- if (isNaN(timeA) || isNaN(timeB)) return 0;
- return timeA - timeB;
- });
- return result;
- });
- 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 isEmpty = ref(false);
- // 控制图片弹窗显示/隐藏
- const showImagePopup = ref(false);
- // 标记是否正在请求数据,防止重复请求
- const isRequesting = ref(false);
- // 记录上一次请求的 farmId,避免相同 farmId 重复请求
- const lastRequestedFarmId = ref(null);
- // 获取当前季节
- const getCurrentSeason = () => {
- const month = new Date().getMonth() + 1; // 1-12
- if (month >= 1 && 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(() => {});
- };
- // 获取图片 URL 列表
- const fetchImageUrls = async (params) => {
- try {
- const res = await VE_API.ali.getTreeImageList(params);
- if (res.code === 0 && Array.isArray(res.data)) {
- return res.data.map((item) => {
- if (item.filename) {
- return {
- ...item,
- cloudFilename: item.filename, // 兼容组件
- };
- }
- return null;
- }).filter(item => item !== null);
- }
- return [];
- } catch (error) {
- console.error("获取图片列表失败:", error);
- return [];
- }
- };
- // 点击图片
- const imgType = ref('');
- const imageList = ref([]);
- const currentImageData = ref({});
- const handleImageClick = (fw) => {
- console.log(fw, "fw");
- if(fw.sourceType !== 7) {
- imgType.value = fw.sourceDataJson.resFilename?.[0]?.source || '';
- imageList.value = fw.sourceDataJson.resFilename || [];
- } else {
- imgType.value = '';
- imageList.value = fw.sourceDataJson.executeImageUrls || [];
- }
- currentImageData.value = {
- ...fw,
- executeName: fw.sourceDataJson.executorName,
- executeDate: formatDate(fw.updateTime),
- farmName: fw.sourceDataJson.farmName,
- prescriptionList:fw.sourceDataJson.pesticideFertilizerNames,
- farmWorkName: fw.sourceDataJson.farmWorkName,
- droneDate : formatDateToYYMMDD(fw.updateTime)
- };
- showImagePopup.value = true;
- };
- // 获取下一个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 = (phenologyStartDates.value?.length || 0) * 50;
- // 返回物候期总高度和基础高度的较大值,确保物候期起始时间能正常显示
- return Math.max(totalHeight, baseHeight);
- }
- // 如果没有物候期数据,返回基础高度
- const baseHeight = (phenologyStartDates.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 = phenologyStartDates.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?.sourceType;
- if (t == 7) return "status-complete";
- if (t == 8) 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());
- }
- emits("row-click", item);
- };
- // 获取农事规划数据
- const getFarmWorkPlan = () => {
- if (!props.farmId) return;
- // 如果正在请求,或者 farmId 与上次请求的相同,直接返回,防止重复请求
- if (isRequesting.value || lastRequestedFarmId.value === props.farmId) return;
- // 设置请求标志和记录 farmId
- isRequesting.value = true;
- lastRequestedFarmId.value = props.farmId;
- // 更新时间戳,确保key变化,触发DOM重新渲染
- uniqueTimestamp.value = Date.now();
- // 重置测量高度,等待重新测量
- timelineListHeight.value = 0;
- // 重置空数据状态
- isEmpty.value = false;
- let savedScrollTop = 0;
- if (!isInitialLoad.value && timelineContainerRef.value) {
- savedScrollTop = timelineContainerRef.value.scrollTop || 0;
- }
- VE_API.monitor
- .getArchivesList({ farmId: props.farmId })
- .then(async ({ 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;
- // 物候期数据
- const processedPhenologyList = Array.isArray(data?.phenologyList)
- ? await Promise.all(
- data.phenologyList.map(async (it) => {
- const reproductiveList = Array.isArray(it.reproductiveList)
- ? await Promise.all(
- it.reproductiveList.map(async (r) => {
- const farmWorkArrangeList = Array.isArray(r.broadcastList)
- ? await Promise.all(
- r.broadcastList.map(async (fw) => {
- let sourceDataJson =
- fw.sourceData && JSON.parse(fw.sourceData);
- // 如果有 imageIds,获取图片 URL
- if (
- sourceDataJson &&
- sourceDataJson.imageIds &&
- Array.isArray(sourceDataJson.imageIds) &&
- sourceDataJson.imageIds.length > 0
- ) {
- const resFilenameList = await fetchImageUrls(
- {
- imageIds: sourceDataJson.imageIds,
- page: 1,
- limit: 100,
- }
- );
- sourceDataJson.resFilename = resFilenameList;
- // 调用 findSuitabilityByPoint 接口获取天气适宜性信息
- if (fw.farmId && fw.createTime) {
- try {
- const dateStr = formatDateForAPI(fw.createTime);
- if (dateStr) {
- const suitabilityRes = await VE_API.ali.findSuitabilityByPoint({
- farmId: fw.farmId,
- date: dateStr,
- });
- if (suitabilityRes && suitabilityRes.code === 0 && suitabilityRes.data) {
- // 将返回的数据合并到 sourceDataJson
- sourceDataJson.suitability = suitabilityRes.data;
- }
- }
- } catch (error) {
- console.error("获取天气适宜性信息失败:", error);
- }
- }
- }
- return {
- ...fw,
- phenologyName: r.phenologyName,
- sourceDataJson,
- 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,
- };
- })
- )
- : [];
- phenologyList.value = processedPhenologyList;
- // 使用多次 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);
- }
- // 判断是否为空数据:没有节气或没有物候期数据
- if (solarTerms.value.length === 0 && phenologyList.value.length === 0) {
- isEmpty.value = true;
- } else {
- isEmpty.value = false;
- }
- } else {
- // 接口返回错误码,显示暂无数据
- isEmpty.value = true;
- solarTerms.value = [];
- phenologyList.value = [];
- }
- })
- .catch((error) => {
- console.error("获取农事规划数据失败:", error);
- ElMessage.error("获取农事规划数据失败");
- // 接口报错,显示暂无数据
- isEmpty.value = true;
- solarTerms.value = [];
- phenologyList.value = [];
- })
- .finally(() => {
- // 请求完成,重置请求标志
- isRequesting.value = false;
- });
- };
- const updateFarmWorkPlan = () => {
- solarTerms.value = [];
- phenologyList.value = [];
- isEmpty.value = false;
- getFarmWorkPlan();
- };
- watch(
- () => props.farmId,
- (val, oldVal) => {
- // 如果 farmId 没有值,则不触发
- if (!val) return;
- // 如果 farmId 变化了,重置上次请求的 farmId,允许请求新数据
- if (val !== oldVal) {
- lastRequestedFarmId.value = null;
- }
- // getFarmWorkPlan 内部已经有防重复请求的检查,这里直接调用即可
- isInitialLoad.value = true;
- updateFarmWorkPlan();
- },
- { immediate: true }
- );
- const handleStatusDetail = (fw) => {
- router.push({
- path: "/status_detail",
- query: { miniJson: JSON.stringify({ id: fw.id }) },
- });
- };
- // 格式化日期为 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}`;
- };
- // 格式化日期为 YYYY-MM-DD 格式(用于接口调用)
- const formatDateForAPI = (dateStr) => {
- if (!dateStr) return null;
- const date = new Date(dateStr);
- if (Number.isNaN(date.getTime())) return null;
- const y = date.getFullYear();
- const m = `${date.getMonth() + 1}`.padStart(2, "0");
- const d = `${date.getDate()}`.padStart(2, "0");
- return `${y}-${m}-${d}`;
- };
- // 格式化日期为 YYMMDD 格式(如:260110,26为年份,01为月份,10为日)
- const formatDateToYYMMDD = (dateStr) => {
- if (!dateStr) return "";
- const date = new Date(dateStr);
- if (Number.isNaN(date.getTime())) return "";
- const y = `${date.getFullYear()}`.substring(2); // 获取后两位年份,如 2026 -> 26
- const m = `${date.getMonth() + 1}`.padStart(2, "0");
- const d = `${date.getDate()}`.padStart(2, "0");
- return `${y}${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: 13px; /* 位于节气文字列中间(列宽约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: 39px;
- 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, 0.15);
- color: #808080;
- border: 1px solid rgba(128, 128, 128, 0.35);
- line-height: 16px;
- box-sizing: border-box;
- }
- }
- .arranges {
- display: flex;
- max-width: calc(100vw - 118px);
- min-width: calc(100vw - 118px);
- gap: 5px;
- letter-spacing: 0px;
- // min-height: 90px;
- .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;
- margin-bottom: 10px;
- // &.last-card {
- // margin-bottom: 0;
- // }
- .card-content {
- color: #242424;
- display: flex;
- justify-content: space-between;
- align-items: center;
- font-size: 14px;
- .card-left {
- width: calc(100% - 45px);
- .left-info {
- display: flex;
- align-items: center;
- gap: 5px;
- .left-date {
- color: #fff;
- background: #2199f8;
- padding: 1px 5px;
- border-radius: 2px;
- font-size: 12px;
- }
- .text {
- font-size: 12px;
- color: rgba(33, 153, 248, 0.5);
- width: calc(100% - 50px);
- text-align: left;
- &.green {
- color: rgba(82, 192, 60, 0.5);
- }
- }
- }
- .title-text {
- margin-top: 2px;
- width: 99%;
- text-align: left;
- }
- &.agri-record-card {
- .text{
- font-size: 14px;
- .text-name{
- color: #000;
- }
- .text-detail{
- color: rgba(0, 0, 0, 0.2);
- margin-left: 5px;
- }
- }
- .title-text{
- display: flex;
- align-items: center;
- gap: 3px;
- .icon{
- font-size: 16px;
- }
- }
- }
- }
- .card-right {
- display: flex;
- align-items: center;
- position: relative;
- img {
- width: 45px;
- height: 45px;
- border-radius: 4px;
- object-fit: cover;
- }
- .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-normal {
- border-color: #2199f8;
- &::before {
- border-right-color: #2199f8;
- }
- }
- .arrange-card.status-warning {
- border-color: #f67d7d;
- .card-left {
- .left-info {
- .left-date {
- background: #f67d7d;
- }
- }
- }
- .card-right {
- .num {
- background: #f67d7d;
- }
- }
- &::before {
- border-right-color: #f67d7d;
- }
- }
- .arrange-card.status-complete {
- border-color: #52c03c;
- .card-left {
- .left-info {
- .left-date {
- background: #52c03c;
- }
- }
- }
- .card-right {
- .num {
- background: #52c03c;
- }
- }
- &::before {
- border-right-color: #52c03c;
- }
- }
- // 未来节气对应的农事卡片:跟随左侧物候期的“未开始”灰色样式
- .arrange-card.future-card {
- border-color: #e4e4e4;
- .card-left {
- .left-info {
- .left-date {
- background: #e4e4e4;
- }
- }
- }
- &::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: 20px;
- line-height: 26px;
- background: #fff;
- font-size: 12px;
- }
- }
- .empty-state {
- display: flex;
- justify-content: center;
- align-items: center;
- min-height: 200px;
- width: 100%;
- }
- }
- </style>
- <style lang="scss" scoped>
- .image-popup {
- width: 327px;
- border-radius: 8px;
- .popup-content {
- width: 100%;
- }
- }
- </style>
|