feiniao-farm-h5/src/views/old_mini/monitor/subPages/plan.vue

<template>
    <div class="plan-page">
        <custom-header name="农事规划"></custom-header>
        <div class="plan-content">
            <div class="filter-wrap">
                <div class="season-tabs">
                    <div
                        v-for="s in seasons"
                        :key="s.value"
                        class="season-tab"
                        :class="{ active: s.value === activeSeason }"
                        @click="handleSeasonClick(s.value)"
                    >
                        {{ s.label }}
                    </div>
                </div>
                <div class="status-filter">
                    <div v-for="status in statusList" :key="status.value" class="status-item" :class="status.color">
                        <div class="status-dot"></div>
                        <span class="status-text">{{ status.label }}</span>
                    </div>
                </div>
            </div>
            <div class="timeline-container" ref="timelineContainerRef">
                <div class="timeline-list" :style="getListStyle">
                    <div class="timeline-middle-line"></div>
                    <!-- 物候期覆盖条（progress 为起点，progress2 为终点，单位 %） -->
                    <div
                        v-for="(p, idx) in phenologyList"
                        :key="p.id ?? idx"
                        class="phenology-bar"
                        :style="getPhenologyBarStyle(p)"
                    >
                        <div class="reproductive-list">
                            <div
                                v-for="(r, rIdx) in Array.isArray(p.reproductiveList) ? p.reproductiveList : []"
                                :key="r.id ?? rIdx"
                                class="reproductive-item"
                            >
                                {{ r.name }}
                                <div class="arranges">
                                    <div
                                        v-for="(fw, aIdx) in Array.isArray(r.farmWorkArrangeList)
                                            ? r.farmWorkArrangeList
                                            : []"
                                        :key="fw.id ?? aIdx"
                                        class="arrange-box"
                                        :class="getArrangeStatusClass(fw)"
                                        @click="handleRowClick(fw)"
                                    >
                                        <span class="arrange-text">{{ fw.farmWorkName }}</span>
                                        <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>
                        </div>
                    </div>
                    <div v-for="t in solarTerms" :key="t.id" class="timeline-term" :style="getTermStyle(t)">
                        <span class="term-name">{{ t.displayName }}</span>
                    </div>
                </div>
            </div>
            <div class="control-section">
                <div class="toggle-group">
                    <el-switch v-model="isDefaultEnabled" />
                    <span class="toggle-label">{{ isDefaultEnabled ? "默认" : "" }}发起农情需求</span>
                </div>
                <div class="add-button-group">
                    <div class="add-button button" @click="addNewTask">新增农事</div>
                    <div class="button" @click="manageTask">农事管理</div>
                </div>
            </div>
        </div>
    </div>
    <!-- 农事信息弹窗 -->
    <detail-dialog ref="detailDialogRef"></detail-dialog>
    <!-- 新增：激活上传弹窗 -->
    <active-upload-popup></active-upload-popup>
</template>

<script setup>
import { reactive, ref, onMounted, computed } from "vue";
import customHeader from "@/components/customHeader.vue";
import { useRouter, useRoute } from "vue-router";
import detailDialog from "@/components/detailDialog.vue";
import activeUploadPopup from "@/components/popup/activeUploadPopup.vue";
import { SuccessFilled, WarningFilled } from "@element-plus/icons-vue";
const router = useRouter();
const route = useRoute();

// 状态列表数据
const seasons = reactive([
    { value: "spring", label: "春季" },
    { value: "summer", label: "夏季" },
    { value: "autumn", label: "秋季" },
    { value: "winter", label: "冬季" },
]);
const activeSeason = ref("");

const statusList = reactive([
    { value: "pending", label: "待触发", color: "gray" },
    { value: "executing", label: "待完成", color: "blue" },
    { value: "completed", label: "已完成", color: "green" },
    { value: "expired", label: "已过期", color: "orange" },
]);

const solarTerms = ref([]);
const phenologyList = ref([]);

onMounted(() => {
    getFarmWorkPlan();
});

const getFarmWorkPlan = () => {
    VE_API.monitor
        .farmWorkPlan({ farmId: route.query.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) => ({
                          id: it.id ?? it.phenologyId ?? it.name ?? `${it.progress}-${it.progress2}`,
                          progress: Number(it.progress) || 0, // 起点 %
                          progress2: Number(it.progress2) || 0, // 终点 %
                          // 兼容多种可能的开始时间字段
                          startTimeMs: safeParseDate(
                              it.startDate || it.beginDate || it.startTime || it.start || it.start_at
                          ),
                          reproductiveList: Array.isArray(it.reproductiveList) ? it.reproductiveList : [],
                      }))
                    : [];

                // // 测试数据：补充完成/预警案例以展示样式
                // if (phenologyList.value.length > 0) {
                //     const rlist = phenologyList.value[0]?.reproductiveList;
                //     if (Array.isArray(rlist) && rlist.length > 0) {
                //         const first = rlist[0];
                //         if (!Array.isArray(first.farmWorkArrangeList)) first.farmWorkArrangeList = [];
                //         first.farmWorkArrangeList.push(
                //             { id: "test-complete", farmWorkName: "测试完成", farmWorkType: 5 },
                //             { id: "test-warning", farmWorkName: "测试预警", farmWorkType: 6 }
                //         );
                //     }
                // }
            }
        })
        .catch((error) => {
            console.error("获取农事规划数据失败:", error);
        });
};

// 切换开关状态
const isDefaultEnabled = ref(true);
// 新增农事
const addNewTask = () => {
    router.push({
        path: "/modify_work",
        query: { data: JSON.stringify(["生长异常"]), gardenId: 766, isAdd: true },
    });
};


const handleRowClick = (item) => {
    console.log("item", item);
    // 0:默认，1-4:正常，5:完成，6:预警
    if (item.flowStatus === 5) {
        router.push({
            path: "/review_work",
            query: {
                json: JSON.stringify({ id: item.farmWorkRecordId }),
            },
        });
    } else if (item.flowStatus === null) {
        detailDialogRef.value.showDialog(item.farmWorkId);
    } else if (item.flowStatus === 6 || item.flowStatus < 5 && item.flowStatus >= 0) {
        router.push({
            path: "/completed_work",
            query: {
                json: JSON.stringify({ id: item.farmWorkRecordId }),
            },
        });
    }
};

const manageTask = () => {
    router.push({
        path: "/agri_services_manage",
        query: {
            type: "manage",
        },
    });
};

const detailDialogRef = ref(null);
const timelineContainerRef = ref(null);

// 安全解析时间到时间戳（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 getListStyle = computed(() => {
    const total = (solarTerms.value?.length || 0) * 100;
    const minH = 50 + total + 50; // 上下各 50
    return { minHeight: `${minH}px` };
});

const getTermStyle = (t) => {
    const p = Math.max(0, Math.min(100, Number(t?.progress) || 0));
    const total = (solarTerms.value?.length || 0) * 100;
    const top = 50 + (p / 100) * total;
    return {
        position: "absolute",
        top: `${top}px`,
        left: 0,
        transform: "translateY(-50%)",
        width: "30px",
        height: "20px",
        display: "flex",
        alignItems: "center",
    };
};

// 点击季节 → 滚动到对应节气（立春/立夏/立秋/立冬）
const handleSeasonClick = (seasonValue) => {
    activeSeason.value = seasonValue;
    const mapping = {
        spring: "立春",
        summer: "立夏",
        autumn: "立秋",
        winter: "立冬",
    };
    const targetName = mapping[seasonValue];
    if (!targetName) return;
    const target = (solarTerms.value || []).find((t) => (t?.displayName || "") === targetName);
    if (!target) return;
    const p = Math.max(0, Math.min(100, Number(target.progress) || 0));
    const total = (solarTerms.value?.length || 0) * 100;
    const targetTop = 50 + (p / 100) * total; // 内容内的像素位置
    const wrap = timelineContainerRef.value;
    if (!wrap) return;
    const viewH = wrap.clientHeight || 0;
    const maxScroll = Math.max(0, wrap.scrollHeight - viewH);
    // 将目标位置稍微靠上（使用 0.35 视口高度做偏移）
    let scrollTop = Math.max(0, targetTop - viewH * 0.1);
    if (scrollTop > maxScroll) scrollTop = maxScroll;
    wrap.scrollTo({ top: scrollTop, behavior: "smooth" });
};

// 物候期覆盖条样式（使用像素计算，避免 100% 高度为 0 的问题）
const getPhenologyBarStyle = (item) => {
    const p1 = Math.max(0, Math.min(100, Number(item?.progress) || 0));
    const p2 = Math.max(0, Math.min(100, Number(item?.progress2) || 0));
    const start = Math.min(p1, p2);
    const end = Math.max(p1, p2);
    const total = (solarTerms.value?.length || 0) * 100; // 有效绘制区高度（px）
    const topPx = 50 + (start / 100) * total;
    const heightPx = Math.max(2, ((end - start) / 100) * total);
    const now = Date.now();
    const isFuture = Number.isFinite(item?.startTimeMs) ? item.startTimeMs > now : start > 0; // 无开始时间时按起点>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",
        width: "25px",
        top: `${topPx}px`,
        height: `${heightPx}px`,
        background: barColor,
        color: isFuture ? "#747778" : "#fff",
        "--bar-before-bg": beforeBg,
        zIndex: 2,
    };
};

// 农事状态样式映射（0:默认，1-4:正常，5:完成，6:预警）
const getArrangeStatusClass = (fw) => {
    const t = fw?.flowStatus;
    if (t == null) return "status-default";
    if (t >= 0 && t <= 4) return "status-normal";
    if (t === 5) return "status-complete";
    if (t === 6) return "status-warning";
    return "status-default";
};
</script>

<style scoped lang="scss">
.plan-page {
    width: 100%;
    height: 100vh;
    background: #fff;
    .plan-content {
        .filter-wrap {
            background: #fff;
            padding: 13px 12px;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
            border-radius: 0 0 20px 20px;
            .status-filter {
                background: #fff;
                padding: 3px 17px;
                display: flex;
                align-items: center;
                gap: 16px;
                font-size: 12px;

                .status-item {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 6px;
                    flex: 1;
                    &.gray {
                        color: #c4c6c9;
                        .status-dot {
                            background-color: #c4c6c9;
                        }
                    }

                    &.blue {
                        color: #2199f8;
                        .status-dot {
                            background-color: #2199f8;
                        }
                    }

                    &.green {
                        color: #1ca900;
                        .status-dot {
                            background-color: #1ca900;
                        }
                    }

                    &.orange {
                        color: #ff953d;
                        .status-dot {
                            background-color: #ff953d;
                        }
                    }
                    .status-dot {
                        width: 6px;
                        height: 6px;
                        border-radius: 50%;
                    }
                }
            }

            .season-tabs {
                display: flex;
                gap: 8px;
                margin-bottom: 12px;
                .season-tab {
                    flex: 1;
                    padding: 7px;
                    text-align: center;
                    background: #f3f3f3;
                    color: #898a8a;
                    border-radius: 3px;
                    border: 1px solid transparent;
                    font-size: 12px;
                }
                .season-tab.active {
                    background: #ffffff;
                    color: #2199f8;
                    border-color: #2199f8;
                }
            }
        }
        .timeline-container {
            height: calc(100vh - 93px - 40px - 73px);
            overflow: auto;
            position: relative;
            box-sizing: border-box;
            padding: 0 12px;
            .timeline-list {
                position: relative;
            }
            .timeline-middle-line {
                position: absolute;
                left: 15px; /* 位于节气文字列中间（列宽约30px） */
                top: 50px;
                bottom: 50px;
                width: 2px;
                background: #e8e8e8;
                z-index: 1;
            }
            .phenology-bar {
                display: flex;
                align-items: stretch;
                justify-content: center;
                box-sizing: border-box;
                &::before {
                    content: "";
                    position: absolute;
                    top: 0;
                    left: 25px;
                    width: calc(100vw - 100px);
                    height: 100%;
                    background: var(--bar-before-bg, rgba(201, 201, 201, 0.1));
                    z-index: 1;
                }
                .reproductive-list {
                    display: grid;
                    grid-auto-rows: 1fr; /* 子项等高，整体等分父高度 */
                    align-items: stretch;
                    justify-items: center; /* 子项居中 */
                    width: 100%;
                    height: 100%;
                    box-sizing: border-box;
                }
                .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;
                    .arranges {
                        position: absolute;
                        left: 48px; /* 列与中线右侧一段距离 */
                        top: 50%;
                        transform: translateY(-50%);
                        z-index: 3;
                        .arrange-box {
                            width: 36px;
                            height: 36px;
                            border: 1px solid rgba(199, 199, 199, 0.6);
                            border-radius: 2px;
                            background: #fff;
                            color: #a5a7a9;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            box-sizing: border-box;
                            position: relative;
                            font-size: 12px;
                            .arrange-text {
                                writing-mode: horizontal-tb;
                                line-height: 14px;
                                text-align: center;
                                padding-left: 3px;
                            }
                            .status-icon {
                                position: absolute;
                                right: -10px;
                                bottom: -10px;
                                z-index: 3;
                            }
                            &::before {
                                content: "";
                                position: absolute;
                                left: -4px;
                                top: 50%;
                                transform: translateY(-50%);
                                width: 0;
                                height: 0;
                                border-top: 4px solid transparent;
                                border-bottom: 4px solid transparent;
                                border-right: 4px solid currentColor; /* 与文字/边框颜色一致 */
                            }
                        }
                        .arrange-box + .arrange-box {
                            margin-right: 16px;
                        }
                        .arrange-box.status-warning {
                            border-color: #ff953d;
                            color: #ff953d;
                        }
                        .arrange-box.status-complete {
                            border-color: #1ca900;
                            color: #1ca900;
                        }
                        .arrange-box.status-normal {
                            border-color: #2199f8;
                            color: #2199f8;
                        }
                    }
                }
            }
            .reproductive-item + .reproductive-item {
                border-top: 2px solid #fff;
            }
            .phenology-bar + .phenology-bar {
                border-top: 2px solid #fff;
            }
            .timeline-term {
                position: absolute;
                width: 30px;
                padding-right: 16px;
                display: flex;
                align-items: center;
                z-index: 2; /* 置于中线之上 */
                .term-name {
                    display: inline-block;
                    width: 100%;
                    height: 46px;
                    line-height: 30px;
                    background: #fff;
                    font-size: 13px;
                    word-break: break-all;
                    writing-mode: vertical-rl;
                    text-orientation: upright;
                    color: rgba(174, 174, 174, 0.6);
                    letter-spacing: 2px;
                    text-align: center;
                }
            }
        }

        // 控制区域样式
        .control-section {
            position: fixed;
            width: 100%;
            left: 0;
            box-sizing: border-box;
            bottom: 0px;
            background: #fff;
            padding: 16px 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top: 1px solid #f0f0f0;

            .toggle-group {
                display: flex;
                align-items: center;
                gap: 8px;

                .toggle-label {
                    font-size: 13px;
                    color: #141414;
                }
            }

            .add-button-group {
                display: flex;
                align-items: center;
                gap: 8px;
                .button {
                    color: #2199f8;
                    border-radius: 25px;
                    padding: 9px 15px;
                    border: 1px solid #2199f8;
                }
                .add-button {
                    background: linear-gradient(120deg, #76c3ff 0%, #2199f8 100%);
                    color: white;
                    border: 1px solid transparent;
                }
            }
        }
    }
}
</style>