feiniao-farm-h5/src/views/old_mini/growth_report/index.vue

<template>
    <div class="growth-report-page" :style="{ height: `calc(100vh - ${tabBarHeight}px)` }">
        <div class="report-content">
            <div class="map-container" ref="mapContainer"></div>
        </div>

        <!-- 浮窗：长势互动 -->
        <div v-if="showInteractCard" class="interact-float">
            <div class="interact-card">
                <div class="interact-card__head">
                    <div class="interact-card__tab">
                        <img class="interact-card__star" src="@/assets/img/agricultural/start.png" alt="" />
                        <span>长势互动</span>
                    </div>
                    <el-icon class="interact-card__close" @click="showInteractCard = false"><Close /></el-icon>
                </div>
                <div class="interact-card__qa">
                    <div class="interact-card__question">{{ interactQuestionText }}</div>
                    <div class="interact-card__options">
                        <div
                            v-for="item in interactOptions"
                            :key="item.id"
                            class="interact-option"
                            :class="{ selected: selectedOptionId === item.id }"
                            @click="selectedOptionId = item.id"
                        >
                            <span class="interact-option__text">{{ item.name }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 左上角：位置切换 -->
        <!-- <div v-if="!showInteractCard" class="location-bar">
            <el-icon class="location-bar__icon"><LocationFilled /></el-icon>
            <span class="location-bar__name van-ellipsis">{{ locationName }}</span>
            <span class="location-bar__action" @click="handleSwitchLocation">切换位置</span>
        </div> -->

        <!-- <div class="map-legend" :style="{ bottom: `${inviteBottom}px` }">
            <div
                v-for="item in mapLegendItems"
                :key="item.key"
                class="map-legend__item"
            >
                <span class="map-legend__pill" :class="item.pillClass"></span>
                <span class="map-legend__text">{{ item.label }}</span>
            </div>
        </div> -->

        <crop-alert-panel
            :crop-name="currentCropName"
            @switch-category="handleSwitchCategory"
            @view-detail="handleViewDetail"
            @patrol-tip="handlePatrolTip"
            @height-change="handlePanelHeightChange"
        />
    </div>

    <!-- 录入信息邀请弹窗：分享链接带 showInviteEntry 时展示 -->
    <invite-entry-popup ref="invitePopupRef" />
</template>

<script setup>
import { computed, nextTick, onActivated, onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import { Close, LocationFilled } from "@element-plus/icons-vue";
import { convertPointToArray } from "@/utils/index";
import GrowthReportMap from "./growthReportMap.js";
import CropAlertPanel from "./components/CropAlertPanel.vue";
import inviteEntryPopup from "@/views/old_mini/entry_information/components/inviteEntryPopup.vue";
import wx from "weixin-js-sdk";

const router = useRouter();
const route = useRoute();

const DEFAULT_MAP_POINT = "POINT(113.6142086995688 23.585836479509055)";
const MAP_KEY = "CZLBZ-LJICQ-R4A5J-BN62X-YXCRJ-GNBUT";
const LOCATION_SESSION_KEY = "GROWTH_REPORT_LOCATION";
const MAP_POINT_STORAGE_KEY = "GROWTH_REPORT_MAP_POINT";

const menuIcon = require("@/assets/img/common/farm-active.png");

const mapLegendItems = computed(() => [
    { key: "zone", label: "胁迫", pillClass: "map-legend__pill--zone" },
    { key: "growth", label: "长势", pillClass: "map-legend__pill--growth" },
    { key: "pest", label: "病虫害", pillClass: "map-legend__pill--pest" },
]);

const store = useStore();
const tabBarHeight = computed(() => store.state.home.tabBarHeight);

const mapContainer = ref(null);
const growthReportMap = new GrowthReportMap();
const locationName = ref("");
const currentMapPoint = ref(
    localStorage.getItem(MAP_POINT_STORAGE_KEY) ||
        localStorage.getItem("selectedFarmPoint") ||
        store.state.home.miniUserLocationPoint ||
        DEFAULT_MAP_POINT
);
const currentCropName = ref("水稻");
const activeMenuKey = ref("hot-drought-2");
const panelHeight = ref(280);
const inviteBottom = computed(() => panelHeight.value);
const invitePopupRef = ref(null);

const showInteractCard = ref(true);
const interactQuestionText = ref("具体问题具体问题具体问题具体问题具体？");
const interactOptions = ref([
    { id: 1, name: "选项一" },
    { id: 2, name: "选项二" },
    { id: 3, name: "选项三" },
]);
const selectedOptionId = ref(null);

const stressMenuItems = [
    { key: "stress", line1: "胁迫", line2: "胁迫", icon: menuIcon },
    { key: "hot-drought-1", line1: "高温", line2: "干旱", icon: menuIcon },
    { key: "hot-drought-2", line1: "高温", line2: "干旱", icon: menuIcon },
    { key: "hot-drought-3", line1: "高温", line2: "干旱", icon: menuIcon },
];

const layerMenuItems = [
    { key: "growth", line1: "作物", line2: "长势", icon: menuIcon },
    { key: "phenology", line1: "物候", line2: "进程", icon: menuIcon },
];

function getLocationName(point = currentMapPoint.value) {
    const locationPoint = point || localStorage.getItem("selectedFarmPoint") || store.state.home.miniUserLocationPoint;
    if (!locationPoint) return;
    const farmLocation = convertPointToArray(locationPoint);
    if (!farmLocation?.length) return;
    const params = {
        key: MAP_KEY,
        location: `${farmLocation[1]},${farmLocation[0]}`,
    };
    VE_API.old_mini_map.location(params).then(({ result }) => {
        locationName.value = result?.address_component
            ? result.address_component.city + result.address_component.district
            : result?.address + "";
    });
}

function saveCurrentMapPoint(point) {
    if (!point) return;
    currentMapPoint.value = point;
    localStorage.setItem(MAP_POINT_STORAGE_KEY, point);
}

const initMap = async () => {
    await nextTick();
    if (!mapContainer.value) return;
    if (growthReportMap.kmap) {
        growthReportMap.kmap.map?.updateSize?.();
        const coordinate = convertPointToArray(currentMapPoint.value)?.map(Number);
        if (coordinate?.length === 2) {
            growthReportMap.setMapPosition(coordinate);
        }
        return;
    }
    const location = currentMapPoint.value || store.state.home.miniUserLocationPoint || DEFAULT_MAP_POINT;
    currentMapPoint.value = location;
    growthReportMap.initMap(location, mapContainer.value);
};

function applySelectedLocation() {
    const raw = sessionStorage.getItem(LOCATION_SESSION_KEY);
    if (!raw) return false;
    sessionStorage.removeItem(LOCATION_SESSION_KEY);
    let saved = null;
    try {
        saved = JSON.parse(raw);
    } catch {
        return false;
    }
    if (!saved?.point && !saved?.coordinate) return false;

    const point = saved.point || `POINT(${saved.coordinate[0]} ${saved.coordinate[1]})`;
    const coordinate = (saved.coordinate || convertPointToArray(point)).map(Number);
    saveCurrentMapPoint(point);

    if (growthReportMap.kmap && coordinate?.length === 2) {
        growthReportMap.setMapPosition(coordinate);
    }
    getLocationName(point);
    return true;
}

const handleSwitchLocation = () => {
    // 以已确认的 currentMapPoint 为准，避免地图临时中心覆盖已选位置
    const mapCenter =
        currentMapPoint.value ||
        store.state.home.miniUserLocationPoint ||
        DEFAULT_MAP_POINT;
    router.push({
        path: "/entry_select_location",
        query: {
            mapCenter,
            iconType: "current",
            from: "growth_report",
        },
    });
};

const handleSelectMenu = (key) => {
    if (!key) return;
    activeMenuKey.value = key;
};

const handleInvite = (type) => {
    const isService = type === "service";
    let inviteName = "好友";
    try {
        const userInfo = JSON.parse(localStorage.getItem("localUserInfo") || "{}");
        inviteName = userInfo.nickName || userInfo.userName || userInfo.name || inviteName;
    } catch {
        // ignore
    }
    const inviteType = isService ? "service" : "farmer";
    const query = {
        askInfo: { title: "邀请完善信息", content: "是否分享该邀请给好友" },
        shareText: isService ? "邀请您完善农服信息" : "邀请您完善地块种植信息",
        targetUrl: `growth_report`,
        paramsPage: JSON.stringify({ inviteName, showInviteEntry: 1, inviteType }),
        imageUrl: 'https://birdseye-img.sysuimars.com/temp/field.png',
    };
    wx.miniProgram.navigateTo({
        url: `/pages/subPages/share_page/index?pageParams=${JSON.stringify(query)}&type=sharePage`,
    });
}

function isTruthyFlag(value) {
    return value === 1 || value === "1" || value === true || value === "true";
}

function parseMaybeJson(value) {
    if (!value) return null;
    if (typeof value === "object") return value;
    try {
        return JSON.parse(value);
    } catch {
        return null;
    }
}

function getInviteTypeFromRoute() {
    const candidates = [
        route.query.inviteType,
        parseMaybeJson(route.query.paramsPage)?.inviteType,
        parseMaybeJson(route.query.miniJson)?.inviteType,
        parseMaybeJson(parseMaybeJson(route.query.miniJson)?.paramsPage)?.inviteType,
    ];
    return candidates.find((item) => item === "service" || item === "farmer") || "farmer";
}

function shouldShowInviteEntryPopup() {
    if (isTruthyFlag(route.query.showInviteEntry)) return true;

    const miniJson = parseMaybeJson(route.query.miniJson);
    if (miniJson) {
        if (isTruthyFlag(miniJson.showInviteEntry)) return true;
        const nested = parseMaybeJson(miniJson.paramsPage);
        if (isTruthyFlag(nested?.showInviteEntry)) return true;
    }

    const paramsPage = parseMaybeJson(route.query.paramsPage);
    if (isTruthyFlag(paramsPage?.showInviteEntry)) return true;

    return false;
}

function clearInviteEntryQuery() {
    if (!shouldShowInviteEntryPopup()) return;
    const newQuery = { ...(route.query || {}) };
    delete newQuery.showInviteEntry;
    if (newQuery.paramsPage) {
        const paramsPage = parseMaybeJson(newQuery.paramsPage);
        if (paramsPage && typeof paramsPage === "object") {
            delete paramsPage.showInviteEntry;
            newQuery.paramsPage = JSON.stringify(paramsPage);
        }
    }
    if (newQuery.miniJson) {
        const miniJson = parseMaybeJson(newQuery.miniJson);
        if (miniJson && typeof miniJson === "object") {
            delete miniJson.showInviteEntry;
            if (miniJson.paramsPage) {
                const nested = parseMaybeJson(miniJson.paramsPage);
                if (nested && typeof nested === "object") {
                    delete nested.showInviteEntry;
                    miniJson.paramsPage = JSON.stringify(nested);
                }
            }
            newQuery.miniJson = JSON.stringify(miniJson);
        }
    }
    router.replace({ path: route.path, query: newQuery });
}

function tryOpenInviteEntryPopup() {
    if (!shouldShowInviteEntryPopup()) return;
    const inviteType = getInviteTypeFromRoute();
    nextTick(() => {
        invitePopupRef.value?.open(inviteType);
        clearInviteEntryQuery();
    });
}

const handleSwitchCategory = (cropName) => {
    if (!cropName) return;
    currentCropName.value = cropName;
};

const handleViewDetail = (item) => {
    router.push({
        path: "/alert_detail",
        query: {
            title: item?.title || "具体预警",
        },
    });
};

const handlePatrolTip = () => {
};

const handlePanelHeightChange = (height) => {
    panelHeight.value = Number(height) || 0;
};

onMounted(() => {
    getLocationName();
    initMap();
    tryOpenInviteEntryPopup();
});
onActivated(() => {
    const applied = applySelectedLocation();
    if (!applied) getLocationName();
    initMap();
    tryOpenInviteEntryPopup();
});
</script>

<style lang="scss" scoped>
.growth-report-page {
    width: 100%;
    height: 100%;
    background: #f5f7fb;
    box-sizing: border-box;

    .interact-float {
        position: fixed;
        top: 10px;
        left: 10px;
        right: 10px;
        z-index: 30;
        pointer-events: none;

        .interact-card {
            pointer-events: auto;
            overflow: hidden;
            border-radius: 12px;
            background: #fff;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
        }

        .interact-card__head {
            position: relative;
            background: linear-gradient(180deg, #e5f4ff 0%, #ffffff 72%);
        }

        .interact-card__tab {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            height: 32px;
            padding: 0 32px 10px 8px;
            color: #fff;
            font-size: 16px;
            font-family: "PangMenZhengDao";
            background: url("@/assets/img/agricultural/title-bg.png") no-repeat center / 100% 100%;

            span {
                margin-top: -3px;
            }
        }

        .interact-card__star {
            width: 16px;
            height: 14px;
        }

        .interact-card__close {
            position: absolute;
            top: 8px;
            right: 10px;
            font-size: 16px;
            color: #9c9c9c;
            cursor: pointer;
        }

        .interact-card__qa {
            margin: 0 10px 10px;
            padding: 10px;
            border-radius: 8px;
            background: rgba(33, 153, 248, 0.1);
        }

        .interact-card__question {
            font-size: 14px;
            font-weight: 500;
            color: #333;
        }

        .interact-card__options {
            display: flex;
            gap: 8px;
            margin-top: 10px;
        }

        .interact-option {
            position: relative;
            flex: 1;
            min-width: 0;
            height: 36px;
            line-height: 36px;
            border-radius: 6px;
            background: #fff;
            border: 1px solid transparent;
            text-align: center;
            box-sizing: border-box;
            cursor: pointer;

            &__text {
                display: block;
                padding: 0 6px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-size: 14px;
                color: #666;
            }

            &.selected {
                border-color: #2199f8;

                .interact-option__text {
                    color: #2199f8;
                }

                &::after {
                    content: "";
                    position: absolute;
                    top: -1px;
                    right: -1px;
                    width: 18px;
                    height: 14px;
                    background: url("@/assets/img/home/checked-bg-top.png") no-repeat bottom right / 18px 13px;
                }
            }
        }
    }

    .location-bar {
        position: fixed;
        top: 12px;
        left: 12px;
        z-index: 16;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        max-width: calc(100% - 24px);
        height: 32px;
        padding: 0 12px;
        border-radius: 16px;
        background: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(4px);
        color: #fff;
        font-size: 14px;
        box-sizing: border-box;

        &__icon {
            font-size: 16px;
            flex-shrink: 0;
        }

        &__name {
            max-width: calc(100vw - 80px);
        }

        &__action {
            flex-shrink: 0;
            color: #2199f8;
        }
    }

    .side-menu {
        position: fixed;
        top: 58px;
        z-index: 15;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        padding: 10px 6px;
        border-radius: 6px;
        background: #fff;
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
        box-sizing: border-box;

        &--left {
            left: 10px;
        }

        &--right {
            right: 10px;
        }

        &__item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            width: 26px;
            color: #8a8a8a;
            cursor: pointer;

            &.active {
                color: #2199f8;

                .side-menu__icon {
                    opacity: 1;
                    filter: brightness(0) saturate(100%) invert(48%) sepia(98%) saturate(1805%) hue-rotate(178deg) brightness(98%) contrast(97%);
                }
            }
        }

        &__icon {
            width: 16px;
            height: 16px;
            object-fit: contain;
            opacity: 0.55;
            filter: grayscale(1);
        }

        &__text {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 12px;
            line-height: 14px;
            text-align: center;
        }
    }


    .invite-group {
        position: fixed;
        right: 16px;
        z-index: 20;
        pointer-events: none;
        transition: bottom 0.2s ease;

        .invite-btn {
            pointer-events: auto;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 5px;
            background: #fff;
            box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.1);
            gap: 4px;
            padding: 0 8px;
            color: #2199F8;
            font-weight: 500;
            font-size: 12px;
            .invite-icon {
                width: 16px;
            }
        }
        .invite-btn + .invite-btn {
            margin-top: 10px;
        }
    }


    .map-legend {
        position: fixed;
        left: 10px;
        z-index: 20;
        pointer-events: none;
        transition: bottom 0.2s ease;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 4px 10px;
        background: rgba(0, 0, 0, 0.46);
        backdrop-filter: blur(4px);
        border-radius: 4px;
        box-sizing: border-box;

        &--en {
            flex-direction: column;
            align-items: flex-start;
            gap: 6px;
            padding: 8px 10px;
            background: rgba(0, 0, 0, 0.72);
            border-radius: 6px;

            .map-legend__item {
                gap: 6px;
            }

            .map-legend__pill {
                width: 18px;
                height: 4px;
                flex-shrink: 0;
            }

            .map-legend__text {
                font-size: 11px;
                line-height: 1.2;
                white-space: nowrap;
            }
        }

        &__item {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        &__pill {
            width: 16px;
            height: 5px;
            border-radius: 10px;

            &--zone {
                background: #13a27f;
            }

            &--growth {
                background: #ff9138;
            }

            &--pest {
                background: #e62e2d;
            }
        }

        &__text {
            font-size: 12px;
            color: #fff;
        }
    }

    .report-content {
        position: relative;
        height: 100%;
        box-sizing: border-box;

        .map-container {
            width: 100%;
            height: 100%;
        }
    }
}
</style>