agriculture-one-map/src/views/warningHome/components/farmInfoGroup.vue

<template>
    <div class="farm-info-group">
        <!-- 顶部标题栏 -->
        <div class="info-header">
            <div class="back-btn" v-show="isBack" @click="handleBack">返回</div>
            <div class="title">
                <img class="title-icon" src="@/assets/images/common/chart-icon.png" alt="" />
                <span class="title-text">{{ !isBack ? "农场列表" : farmList[0].farmName }}</span>
            </div>
        </div>

        <!-- 主要内容区域 -->
        <div class="info-content" :style="{ overflowY: isBack ? 'hidden' : 'auto' }">
            <!-- 农场列表为空时显示暂无数据 -->
            <div v-if="!isBack && farmList.length === 0" class="empty-data">
                <div class="empty-text">暂无数据</div>
            </div>
            <div class="farm-info" v-for="item in farmList" :key="item" @click="handleFarmInfo(item)">
                <div class="lz-icon">
                    <img src="@/assets/images/warningHome/lz-icon.png" alt="" />
                </div>
                <!-- 右侧信息区域 -->
                <div class="info-right">
                    <div class="info-item farm-code">
                        <span class="info-label">{{ isBack ? `农场编号：${item.farmCode}` : item.farmName }}</span>
                        <div class="tags">
                            <span class="tag">{{ item.speciesName }}</span>
                            <span class="tag" v-show="item.varietyName">{{ item.varietyName }}</span>
                        </div>
                    </div>
                    <div class="info-item">
                        <span class="info-label">农场面积:</span>
                        <span class="info-value">{{ item.area && item.area.toFixed(2) || 0 }}亩</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">农场位置:</span>
                        <span class="info-value">{{ item.location }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">权属人:</span>
                        <span class="info-value">{{ item.owner }}</span>
                    </div>
                </div>
            </div>
            <template v-if="isBack">
                <div class="tabs">
                    <div
                        v-for="tab in tabs"
                        :key="tab.key"
                        class="tab-item"
                        :class="{ active: activeTab === tab.key }"
                        @click="activeTab = tab.key"
                    >
                        {{ tab.label }}
                    </div>
                </div>
                <div class="tab-content">
                    <div class="timeline" v-if="activeTab === 'crop'">
                        <!-- 时间轴列表为空时显示暂无数据 -->
                        <div v-if="timelineList.length === 0" class="empty-data">
                            <div class="empty-text">暂无数据</div>
                        </div>
                        <div class="timeline-item" v-for="item in timelineList" :key="item.id">
                            <div class="timeline-left">
                                <div class="dot"></div>
                                <div class="line"></div>
                            </div>
                            <div class="timeline-right">
                                <div class="date">{{ item.recordTime && item.recordTime.slice(0, 10) || '' }}</div>
                                <div class="text">{{ item.description }}</div>
                            </div>
                        </div>
                    </div>
                    <div v-else class="perception-content">
                        <div class="perception-tabs">
                            <div
                                v-for="tab in perceptionTabs"
                                :key="tab.key"
                                class="perception-tab"
                                :class="{ 'perception-tab--active': perceptionActive === tab.key }"
                                @click="perceptionActive = tab.key"
                            >
                                <span class="label">{{ tab.label }}</span>
                                <div class="underline"></div>
                            </div>
                        </div>
                        <div class="perception-wrap">
                            <equipment v-show="perceptionActive === 'device'" :farmId="currentFarmId"></equipment>
                            <crop v-show="perceptionActive === 'crop'"></crop>
                        </div>
                    </div>
                </div>
            </template>
        </div>
    </div>
</template>

<script setup>
import { ref, watch, onMounted, onUnmounted } from "vue";
import equipment from "./equipment.vue";
import crop from "./crop.vue";
import eventBus from "@/api/eventBus";

const props = defineProps({
    farmList: {
        type: Array,
        default: () => [],
    },
});

const defaultFarmList = ref([]);
watch(() => props.farmList, (newVal) => {
    farmList.value = newVal;
    defaultFarmList.value = newVal;
});

const handleFarmClick = (farmData) => {
    farmList.value = [farmData];
    currentFarmId.value = farmData.farmId;
    isBack.value = true;
   
    if (currentFarmId.value) {
        fetchFarmPhenologyRecord(currentFarmId.value);
    }
};

onMounted(() => {
    // 在组件挂载时注册事件监听
    eventBus.on("distributionLayer:farmClick", handleFarmClick);
});

onUnmounted(() => {
    // 组件卸载时移除事件监听
    eventBus.off("distributionLayer:farmClick", handleFarmClick);
});

//查询农场物候记录
const timelineList = ref([]);
const fetchFarmPhenologyRecord = (farmId) => {
    VE_API.warning.fetchFarmPhenologyRecord({ farmId }).then(res => {
        timelineList.value = res.data || [];
    });
};

// 底部 tabs 配置
const tabs = [
    { key: "crop", label: "作物档案" },
    { key: "perception", label: "感知记录" },
];

// 感知类型 tabs
const perceptionTabs = [
    { key: "device", label: "设备感知" },
    { key: "crop", label: "作物感知" },
];

const activeTab = ref("crop"); // 默认选中感知记录
const perceptionActive = ref("device"); // 默认选中设备感知

const farmList = ref([]);
const handleBack = () => {
    farmList.value = defaultFarmList.value;
    isBack.value = false;
};

const isBack = ref(false);
const currentFarmId = ref(null);
const handleFarmInfo = (item) => {
    currentFarmId.value = item.farmId;
    activeTab.value = "crop";
    perceptionActive.value = "device";
    farmList.value = [item];
    isBack.value = true;
    fetchFarmPhenologyRecord(item.farmId);
};
</script>
<style lang="scss" scoped>
.farm-info-group {
    position: absolute;
    top: 0px;
    right: 0;
    width: 376px;
    height: 100%;
    background: #232323;
    border-radius: 4px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.16);
    .info-header {
        display: flex;
        align-items: center;
        padding: 6px 14px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.16);

        .back-btn {
            cursor: pointer;
            color: rgba(255, 255, 255, 0.55);
        }

        .title {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-size: 18px;
            .title-icon {
                width: 19px;
                height: 13px;
            }
        }
    }

    .info-content {
        padding: 5px 10px;
        height: calc(100% - 50px);

        .farm-info + .farm-info {
            margin-top: 12px;
        }
        .farm-info {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            .lz-icon {
                border-radius: 6px;
                background: rgba(70, 70, 70, 0.26);
                img {
                    width: 65px;
                    height: 65px;
                    padding: 7px;
                }
            }
            .info-right {
                font-size: 12px;
                color: #9f9f9f;
                .info-item {
                    display: flex;
                    align-items: center;
                    line-height: 18px;
                    gap: 6px;
                    cursor: pointer;
                    &.farm-code {
                        font-weight: 700;
                        font-size: 16px;
                        margin-bottom: 4px;
                        color: #ffffff;
                    }
                    .tags {
                        display: flex;
                        gap: 4px;
                        margin-left: auto;

                        .tag {
                            padding: 1px 6px;
                            border: 1px solid #ffd489;
                            border-radius: 2px;
                            color: #ffd489;
                            font-size: 12px;
                            font-weight: 400;
                        }
                    }
                }
            }
        }
        .tabs {
            display: flex;
            gap: 10px;
            margin-top: 12px;

            .tab-item {
                padding: 6px 32px;
                text-align: center;
                border-radius: 4px;
                cursor: pointer;
                color: #ffffff;
                background: rgba(166, 166, 166, 0.08);
                border: 1px solid transparent;

                &.active {
                    color: #ffd489;
                    background: rgba(255, 212, 137, 0.2);
                    border: 1px solid #ffd489;
                }
            }
        }
        .tab-content {
            margin: 12px 0;
            height: calc(100% - 145px);
            overflow-y: auto;
            .timeline {
                padding-right: 12px;
                .timeline-item {
                    display: flex;
                    align-items: flex-start;
                    font-size: 14px;
                    color: #ffffff;
                    line-height: 22px;
                    & + .timeline-item {
                        margin-top: 24px;
                    }
                    .timeline-left {
                        width: 24px;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        .dot {
                            width: 6px;
                            height: 6px;
                            border-radius: 50%;
                            background: #ffd489;
                            margin-top: 6px;
                        }
                        .line {
                            border-left: 1px dashed rgba(255, 212, 137, 0.6);
                            margin-top: 4px;
                            height: 40px;
                        }
                    }
                    .timeline-right {
                        padding-left: 8px;
                        .date {
                            color: #ffd489;
                            font-weight: 500;
                            margin-bottom: 2px;
                        }
                        .text {
                            color: #d7d7d7;
                        }
                    }
                }
            }
            .perception-content {
                height: 100%;
                .perception-tabs {
                    display: flex;
                    align-items: flex-end;
                    gap: 20px;
                    margin-bottom: 12px;
                    .perception-tab {
                        color: #ffffff;
                        cursor: pointer;
                        .underline {
                            margin-top: 6px;
                            width: 56px;
                            height: 2px;
                            background: transparent;
                            border-radius: 2px;
                        }
                        &.perception-tab--active {
                            color: #ffd489;
                            .underline {
                                background: #ffd489;
                            }
                        }
                    }
                }
                .perception-wrap {
                    height: calc(100% - 40px);
                    overflow-y: auto;
                }
            }
        }
        .empty-data {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 200px;
            .empty-text {
                color: rgba(255, 255, 255, 0.4);
                font-size: 14px;
            }
        }
    }
}
</style>