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

<template>
    <custom-header v-if="isHeaderShow" name="农场详情"></custom-header>
    <div class="monitor-index" :style="{ height: `calc(100vh - ${tabBarHeight}px)` }">
        <!-- 天气遮罩 -->
        <div class="weather-mask" v-show="isExpanded" @click="handleMaskClick"></div>
        <!-- 天气 -->
        <weather-info ref="weatherInfoRef" class="weather-info" @weatherExpanded="weatherExpanded"
            @changeGarden="changeGarden" :isGarden="true" :gardenId="defaultGardenId"></weather-info>
        <!-- 作物档案 -->
        <div class="archives-time-line">
            <div class="archives-time-line-header">
                <div class="line-title" @click="handleFarmInfoClick">农事记录</div>
                <!-- <el-date-picker style="width: 110px" v-model="date" type="year" placeholder="全部日期" /> -->
            </div>
            <!-- 品种选择 -->
            <div class="variety-tabs" v-if="varietyTabs.length > 0">
                <div v-for="(v, index) in varietyTabs" :key="index" class="variety-tab"
                    :class="{ 'variety-tab--active': activeVariety === index }" @click="handleVarietyClick(v, index)">
                    {{ v.regionName }}
                </div>
            </div>
            <template v-if="!varietyTabs.length">
                <div class="lock-img" @click="handleLockClick">
                    <img src="@/assets/img/home/lock-blue.png" alt="" class="lock-img-item" />
                    <div class="lock-text">
                        专属数字农场，种好卖好
                        <div>点击解锁一键溯源增产</div>
                    </div>

                    <div class="lock-btn">点击解锁</div>
                </div>
                <img class="example-img" src="@/assets/img/monitor/example.png" alt="">
            </template>
            <div class="archives-time-line-content">
                <archives-farm-time-line key="agri_record" :farmId="farmIdData" :regionId="regionData" :containerId="containerData"
                    pageType="agri_record"></archives-farm-time-line>
            </div>
        </div>
    </div>

    <!-- 勾选区域引导弹窗 -->
    <select-region-popup v-model:show="showSelectRegionPopup" :title="titlePopup" @confirm="handleGoSelectRegion"
        @skip="handleSkipSelectRegion" />

    <agri-execute-popup ref="agriExecutePopupRef" />

    <start-interact-popup ref="startInteractPopupRef" />
</template>

<script setup>
import customHeader from "@/components/customHeader.vue";
import { ref, computed, onActivated, onDeactivated, onMounted } from "vue";
import { useStore } from "vuex";
import wx from "weixin-js-sdk";
import weatherInfo from "@/components/weatherInfo.vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import ArchivesFarmTimeLine from "@/components/pageComponents/ArchivesFarmTimeLine.vue";
import selectRegionPopup from "@/components/popup/selectRegionPopup.vue";
import agriExecutePopup from "@/components/popup/agriExecutePopup.vue";
import startInteractPopup from "@/components/popup/startInteractPopup.vue";

const agriExecutePopupRef = ref(null);
const startInteractPopupRef = ref(null);

const handleFarmInfoClick = () => {
    // const query = {
    //     askInfo: { title: "农场认领", content: "是否分享该链接给好友" },
    //     shareText: "邀您参与农情互动，获取专家精准指导",
    //     targetUrl: `home`,
    //     paramsPage: JSON.stringify({isFarmer:true}),
    //     imageUrl: 'https://birdseye-img.sysuimars.com/birdseye-look-mini/share-lz-bg.png',
    // };
    // wx.miniProgram.navigateTo({
    //     url: `/pages/subPages/share_page/index?pageParams=${JSON.stringify(query)}&type=sharePage`,
    // });
}

// 品种选择（作物档案内）- 根据主体ID动态获取分区列表
const varietyTabs = ref([]);
const activeVariety = ref(0);

const getVarietyTabs = async (isShowPopup = true) => {
    if (!gardenId.value) {
        return;
    }
    try {
        const res = await VE_API.monitor.listRegionsBySubjectId({
            subjectId: gardenId.value,
        });
        varietyTabs.value = res.data || []
        if (varietyTabs.value.length > 0) {
            handleVarietyClick(varietyTabs.value[activeVariety.value], activeVariety.value)
            if(isShowPopup) {
                agriExecutePopupRef.value.showPopup(varietyTabs.value[activeVariety.value].farmId);
            }
        }
    } catch (error) {
        console.error("获取主体分区列表失败:", error);
    }
};

const farmIdData = ref(null);
const containerData = ref(null);
const regionData = ref(null);
const titlePopup = ref("");
const currentVariety = ref(null);
const showSelectRegionPopup = ref(false);
const handleVarietyClick = (tab, index) => {
    activeVariety.value = index;
    farmIdData.value = tab.farmId;
    containerData.value = tab.containerId;
    regionData.value = tab.regionId;
    currentVariety.value = tab;
    if (tab.lastViewTime == null) {
        titlePopup.value = `勾选 ${tab.regionName} 区域`;
        showSelectRegionPopup.value = true;
    }
};

const handleSkipSelectRegion = () => {
    VE_API.basic_farm.updateLastViewTime({
        regionId: currentVariety.value.regionId,
    }).then(() => {
        showSelectRegionPopup.value = false;
        getVarietyTabs(false);
    });
};

const handleGoSelectRegion = () => {
    showSelectRegionPopup.value = false;
    router.push({
        path: "/draw_area",
        query: {
            subjectId: gardenId.value,
            varietyId: currentVariety.value.typeId,
        },
    });
};

const showFarmPopup = ref(false); // 农场领取成功弹窗
const date = ref(new Date());

const defaultGardenId = ref(null);
const isHeaderShow = ref(false);
const isDefaultFarm = ref(false);
const weatherInfoRef = ref(null);

onActivated(() => {
    // 用来接收我的农场跳转过来的农场详情逻辑
    if (route.query.isHeaderShow) {
        isHeaderShow.value = true;
        defaultGardenId.value = route.query.farmId;
        // 统一转换为布尔值
        isDefaultFarm.value = route.query.defaultFarm === "true" || route.query.defaultFarm === true;
    }
});

const receiveFarm = (json) => {
    VE_API.monitor
        .receiveFarm({
            agriculturalStoreId: json.agriculturalStoreId,
            farmId: json.farmId,
        })
        .then((res) => {
            if (res.code === 0) {
                showFarmPopup.value = true;
                defaultGardenId.value = json.farmId;
            } else {
                ElMessage.warning(res.msg);
            }
            // 清空路由参数
            router.replace({ path: route.path });
        });
};

const store = useStore();
const tabBarHeight = computed(() => store.state.home.tabBarHeight);
const router = useRouter();
const route = useRoute();

const farmInfoRef = ref(null);

function toFarmInfo() {
    farmInfoRef.value.handleShow();
}

const handleLockClick = () => {
    wx.miniProgram.navigateTo({
        url: '/pages/subPages/phone_auth/index',
    });

    // wx.miniProgram.navigateTo({
    //     url: `/pages/subPages/share_page/index?pageParams=${JSON.stringify(query)}&type=sharePage`,
    // });
}

// 实时播报数据
const broadcastList = ref([]);
const loading = ref(false);
const finished = ref(false);
const currentPage = ref(1);
const pageSize = ref(10);

const getBroadcastList = async (page = 1, isLoadMore = false) => {
    if (!gardenId.value) {
        loading.value = false;
        return;
    }

    // 如果正在加载，直接返回（避免重复请求）
    if (loading.value) {
        return;
    }

    loading.value = true;
    try {
        const res = await VE_API.monitor.broadcastPage({
            farmId: gardenId.value,
            limit: pageSize.value,
            page: page,
        });

        const newData = res.data || [];
        if (isLoadMore) {
            broadcastList.value = [...broadcastList.value, ...newData];
        } else {
            broadcastList.value = newData;
        }

        // 判断是否还有更多数据
        if (newData.length < pageSize.value) {
            finished.value = true;
        } else {
            finished.value = false;
            // 如果未完成，页码+1，为下次加载做准备
            currentPage.value = page + 1;
        }
    } catch (error) {
        console.error("获取播报列表失败:", error);
        finished.value = true;
    } finally {
        // 确保 loading 状态被正确设置为 false
        loading.value = false;
    }
};

// 滚动加载更多
const onLoad = async () => {
    if (finished.value || loading.value) return;

    // 判断是否是首次加载（页码为1）
    const isLoadMore = currentPage.value > 1;
    const pageToLoad = currentPage.value;

    // 加载数据（页码会在 getBroadcastList 成功后自动更新）
    await getBroadcastList(pageToLoad, isLoadMore);
};

// 卡片点击事件
const handleCardClick = (card) => {
    const params = {
        farmId: gardenId.value,
    };
    router.push({
        path: card.route,
        query: { ...params, miniJson: JSON.stringify(params) },
    });
};

// 播报相关事件
const isSpeaking = ref(false);
const speechSynthesis = window.speechSynthesis;

const handleBroadcast = () => {
    if (isSpeaking.value) {
        // 如果正在播放，则停止
        speechSynthesis.cancel();
        isSpeaking.value = false;
        return;
    }

    // 构建播报文本
    let broadcastText = "实时播报：";

    if (broadcastList.value.length === 0) {
        broadcastText += "暂无更多播报";
    } else {
        broadcastList.value.forEach((item, index) => {
            broadcastText += `${index + 1}、${item.title}。${item.content}。`;
        });
    }

    // 创建语音合成对象
    const utterance = new SpeechSynthesisUtterance(broadcastText);

    // 设置语音参数
    utterance.lang = "zh-CN";
    utterance.rate = 0.8; // 语速
    utterance.pitch = 1; // 音调
    utterance.volume = 1; // 音量

    // 播放开始事件
    utterance.onstart = () => {
        isSpeaking.value = true;
    };

    // 播放结束事件
    utterance.onend = () => {
        isSpeaking.value = false;
    };

    // 播放错误事件
    utterance.onerror = (event) => {
        isSpeaking.value = false;
        console.error("播报错误:", event.error);
    };

    // 开始播报
    speechSynthesis.speak(utterance);
};

// 组件卸载时停止语音播放
onDeactivated(() => {
    showFarmPopup.value = false;
    isDefaultFarm.value = false;
    if (isSpeaking.value) {
        speechSynthesis.cancel();
        isSpeaking.value = false;
    }
});

const isExpanded = ref(false);
const weatherExpanded = (isExpandedValue) => {
    isExpanded.value = isExpandedValue;
};

// 点击遮罩时收起天气
const handleMaskClick = () => {
    if (weatherInfoRef.value && weatherInfoRef.value.toggleExpand) {
        weatherInfoRef.value.toggleExpand();
    }
};

const gardenId = ref(store.state.home.gardenId);

// 初始化加载数据
onMounted(() => {
    if (gardenId.value) {
        getVarietyTabs();
    }
});

const changeGarden = ({ id }) => {
    gardenId.value = id;
    // 更新 store 中的状态
    store.commit("home/SET_GARDEN_ID", id);
    getVarietyTabs();

    startInteractPopupRef.value.getPhenologyInitOrConfirmStatus();
};
</script>

<style scoped lang="scss">
.monitor-index {
    width: 100%;
    height: 100%;
    padding: 13px 10px;
    box-sizing: border-box;
    background: linear-gradient(180deg, #f9f9f9 0%, #f0f8ff 31.47%, #f9f9f9 46.81%, #f9f9f9 69.38%, #f9f9f9 100%);

    .weather-mask {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.52);
        z-index: 11;
    }

    .lock-img {
        position: fixed;
        z-index: 10;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -20%);
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 16px;

        .lock-img-item {
            width: 57px;
        }

        .lock-text {
            font-size: 14px;
            color: #000;
            padding: 5px 64px;
            line-height: 21px;
            background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 50%, rgba(255, 255, 255, 0) 100%);
        }

        .lock-btn {
            width: 140px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            background: linear-gradient(180deg, #76C3FF 0%, #2199F8 100%);
            border-radius: 25px;
            color: #fff;
            font-size: 16px;
        }
    }

    .example-img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .weather-info {
        width: calc(100% - 20px);
        position: absolute;
        z-index: 12;
    }

    .archives-time-line {
        position: relative;
        margin-top: 96px;
        height: calc(100% - 90px);

        .archives-time-line-header {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .line-title {
                position: relative;
                padding-left: 14px;
                font-size: 16px;

                &::before {
                    content: "";
                    position: absolute;
                    left: 5px;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 4px;
                    height: 15px;
                    background: #2199f8;
                    border-radius: 20px;
                }
            }
        }

        .variety-tabs {
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 10px 0;
            overflow-x: auto;
            overflow-y: hidden;
            flex-wrap: nowrap;
            -webkit-overflow-scrolling: touch;

            .variety-tab {
                padding: 4px 12px;
                border-radius: 2px;
                color: #767676;
                background: #fff;
                white-space: nowrap;
                flex-shrink: 0;
            }

            .variety-tab--active {
                background: #2199F8;
                color: #ffffff;
            }
        }

        .archives-time-line-content {
            margin-top: 10px;
            height: calc(100% - 70px);
            background: #fff;
            border-radius: 8px;
            padding: 10px;
            box-sizing: border-box;
        }
    }
}
</style>