feiniao-farm-h5/src/views/old_mini/monitor/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="handlePage">作物档案</div>
                <div class="header-right">
                    <div class="add-variety-btn" v-if="varietyTabs.length > 0" @click="handleAddVariety">
                        <el-icon size="12">
                            <Plus />
                        </el-icon>
                        <span>新增品种</span>
                    </div>
                    <el-date-picker style="width: 110px" v-model="date" type="year" placeholder="全部日期" />
                </div>
            </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">
                <div class="report-box" v-if="hasReport">
                    <div class="box-content">
                        <div class="box-title" @click="handleReportClick">
                            <span>农情互动报告</span>
                            <el-icon>
                                <CaretRight />
                            </el-icon>
                        </div>
                        <span class="box-text">点击查看您的长势报告</span>
                    </div>
                    <img src="@/assets/img/monitor/report-icon.png" alt="" class="report-icon" />
                </div>
                <div class="time-line" :class="{ 'no-report': !hasReport }">
                    <archives-farm-time-line key="monitor" :farmId="farmIdData" :regionId="regionData"></archives-farm-time-line>
                </div>
            </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 { ref, computed, onActivated, onDeactivated, onMounted } from "vue";
import customHeader from "@/components/customHeader.vue";
import { useStore } from "vuex";
import wx from "weixin-js-sdk";
import weatherInfo from "@/components/weatherInfo.vue";
import { useRouter, useRoute } from "vue-router";
import selectRegionPopup from "@/components/popup/selectRegionPopup.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import ArchivesFarmTimeLine from "@/components/pageComponents/ArchivesFarmTimeLine.vue";
import agriExecutePopup from "@/components/popup/agriExecutePopup.vue";
import startInteractPopup from "@/components/popup/startInteractPopup.vue";

const startInteractPopupRef = ref(null);
const handlePage = () => {
    router.push("/interaction_list");
}

const agriExecutePopupRef = ref(null);


// 品种选择（作物档案内）- 根据主体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 regionData = ref(null);
const titlePopup = ref("");
const currentVariety = ref(null);
const handleVarietyClick = (tab, index) => {
    activeVariety.value = index;
    farmIdData.value = tab.farmId;
    regionData.value = tab.regionId;
    currentVariety.value = tab;
    if (tab.lastViewTime == null) {
        titlePopup.value = `勾选 ${tab.regionName} 区域`;
        showSelectRegionPopup.value = true;
    }
};

const date = ref(new Date());

const showSelectRegionPopup = ref(false);

const handleAddVariety = () => {
    router.push("/interaction?addVariety=true&subjectId=" + gardenId.value);
};

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 defaultGardenId = ref(null);
const isHeaderShow = ref(false);
const isDefaultFarm = ref(false);
const weatherInfoRef = ref(null);
const hasReport = ref(false);
onActivated(() => {
    sessionStorage.removeItem('interactionListScrollTop');
    // 用来接收我的农场跳转过来的农场详情逻辑
    if (route.query.isHeaderShow) {
        isHeaderShow.value = true;
        defaultGardenId.value = route.query.farmId;
        // 统一转换为布尔值
        isDefaultFarm.value = route.query.defaultFarm === "true" || route.query.defaultFarm === true;
    }
    getReport();
});

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

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 finished = ref(false);
const currentPage = ref(1);

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


// 组件卸载时停止语音播放
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);
    getReport();
    getVarietyTabs();

    startInteractPopupRef.value.getPhenologyInitOrConfirmStatus();
};

function handleReportClick() {
    router.push({
        path: "/growth_report",
        query: { farmId: gardenId.value },
    });
}

const getReport = () => {
    VE_API.farm.growthReportBySubject({ subjectId: gardenId.value, limit: 20 }).then(({ data }) => {
        if (data && data.length > 0) {
            hasReport.value = true;
        } else {
            hasReport.value = false;
        }
    });
}
</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;
                }
            }

            .header-right {
                display: flex;
                align-items: center;
                gap: 12px;

                .add-variety-btn {
                    display: flex;
                    align-items: center;
                    gap: 3px;
                    padding: 4px 10px;
                    border: 1px solid #DCDCDC;
                    border-radius: 3px;
                    background: #fff;
                }
            }
        }

        .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;

            .report-box {
                background: linear-gradient(120deg, #eef8ff, #bbe3ff);
                border-radius: 4px;
                padding: 6px 0 0 16px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 12px;

                .box-content {
                    .box-title {
                        font-size: 16px;
                        color: #2199f8;
                        font-weight: 500;
                        margin-bottom: 4px;
                        display: flex;
                        align-items: center;
                    }

                    .box-text {
                        color: #4e5969;
                    }
                }

                .report-icon {
                    width: 120px;
                    height: 85px;
                }
            }

            .time-line {
                height: calc(100% - 100px);

                &.no-report {
                    height: 100%;
                }
            }
        }
    }
}
</style>