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

<template>
    <custom-header name="农场详情" bgColor="#f2f3f5"></custom-header>
    <div class="farm-details-page">
        <div class="tab-wrapper">
            <div v-for="tab in tabs" :key="tab.key" class="tab-item"
                :class="{ 'tab-item--active': activeTab === tab.key }" @click="activeTab = tab.key">
                {{ tab.label }}
            </div>
        </div>
        <!-- 作物档案 -->
        <div class="archives-time-line" v-show="activeTab === 'crop'">
            <div class="archives-time-line-header" @click="handleJump">
                <div class="line-title">作物档案</div>
                <div class="filter-wrapper">
                    <el-date-picker style="width: 110px" v-model="date" type="year" placeholder="全部日期" />
                </div>
            </div>
            <!-- 品种选择 -->
            <div class="variety-tabs">
                <div
                    v-for="v in varietyTabs"
                    :key="v.key"
                    class="variety-tab"
                    :class="{ 'variety-tab--active': activeVariety === v.key }"
                    @click="activeVariety = v.key"
                >
                    {{ v.label }}
                </div>
            </div>
            <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 :farmId="farmId"></archives-farm-time-line>
                </div>
            </div>
        </div>
        <!-- 农场信息 -->
        <div class="farm-info" v-show="activeTab === 'farm'">
            <div class="map"></div>
            <div class="info-box">
                <div class="line-title">基本信息</div>
                <div class="info-list">
                    <div class="info-row">
                        <span class="info-label">农场名称：</span>
                        <span class="info-value">{{ farmInfo.name }}</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">联系人：</span>
                        <span class="info-value">{{ farmInfo.contact }}</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">联系电话：</span>
                        <span class="info-value">{{ farmInfo.phone }}</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">种植作物：</span>
                        <div class="info-value crop-tags">
                            <span v-for="crop in farmInfo.crops" :key="crop" class="crop-tag">
                                {{ crop }}
                            </span>
                        </div>
                    </div>
                    <div class="info-row">
                        <span class="info-label">农场位置：</span>
                        <span class="info-value">{{ farmInfo.location }}</span>
                    </div>
                </div>
            </div>
            <el-divider class="info-divider" />
            <div class="info-box">
                <div class="line-title">农场设施</div>
                <div class="info-list">
                    <div class="info-row">
                        <span class="info-label">土壤类型：</span>
                        <span class="info-value">砂质土</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">灌溉方式：</span>
                        <div class="info-value crop-tags">
                            <span v-for="crop in farmInfo.crops" :key="crop" class="crop-tag">
                                {{ crop }}
                            </span>
                        </div>
                    </div>
                    <div class="info-row info-row-column">
                        <span class="info-label">农机设备：</span>
                        <div class="info-value">
                            <div class="device-box">
                                <div
                                    class="device-item"
                                    v-for="device in farmDevices"
                                    :key="device.id"
                                >
                                    <span class="device-name">{{ device.name }}</span>
                                    <span class="device-count">{{ device.count }}架</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="info-row info-row-column">
                        <span class="info-label">希望改善问题：</span>
                        <div class="info-value problem-tags">
                            <span
                                v-for="item in improveProblems"
                                :key="item"
                                class="problem-tag"
                            >
                                {{ item }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import customHeader from "@/components/customHeader.vue";
import ArchivesFarmTimeLine from "@/components/pageComponents/ArchivesFarmTimeLine.vue";

const router = useRouter();
const tabs = [
    { key: "crop", label: "作物档案" },
    { key: "farm", label: "农场信息" },
];

const handleReportClick = () => {
    router.push("/farm_picture");
}

const activeTab = ref("crop");

// 品种选择（作物档案内）
const varietyTabs = [
    { key: "feizixiao", label: "妃子笑" },
    { key: "guiwei", label: "桂味" },
    { key: "nuomici", label: "糯米糍" },
    { key: "xiantaofang", label: "仙桃芳" },
];
const activeVariety = ref("feizixiao");

const farmInfo = {
    name: "从化荔博园",
    contact: "张扬",
    phone: "19871533125",
    crops: ["桂味", "糯米糍", "井岗红糯"],
    location: "广东省广州市从化区某某街道",
};

const farmDevices = [
    { id: 1, name: "植保无人机", count: 10 },
    { id: 2, name: "植保无人机", count: 10 },
    { id: 3, name: "植保无人机", count: 10 },
    { id: 4, name: "植保无人机", count: 10 },
    { id: 5, name: "植保无人机", count: 10 },
    { id: 6, name: "植保无人机", count: 10 },
];

const improveProblems = ["土壤改良", "树势增强", "品质提升"];

// onMounted(() => {
//     getReport();
// });

const date = ref(new Date());
const farmId = ref(766);
const hasReport = ref(true);
const getReport = () => {
    VE_API.farm.growthReportByFarm({ farmId: farmId.value, limit: 20 }).then(({ data }) => {
        if (data && data.length > 0) {
            hasReport.value = true;
        } else {
            hasReport.value = false;
        }
    });
}
</script>

<style lang="scss" scoped>
.farm-details-page {
    background: #f2f3f5;
    height: 100vh;
    padding: 10px 12px;

    .tab-wrapper {
        display: flex;
        align-items: center;
        gap: 8px;

        .tab-item {
            padding: 5px 12px;
            border-radius: 25px;
            color: #8B8B8B;
            background: #F7F8FA;
        }

        .tab-item--active {
            background: #1990ff;
            color: #ffffff;
        }
    }

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

    .archives-time-line {
        position: relative;
        height: calc(100% - 102px);

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


            .filter-wrapper {
                display: flex;
                gap: 10px;
            }
        }

        .variety-tabs {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 12px;

            .variety-tab {
                padding: 4px 12px;
                border-radius: 2px;
                color: #767676;
                background: #fff;
            }

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

        .archives-time-line-content {
            height: calc(100% - 84px);
            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%;
                }
            }
        }
    }

    .farm-info {
        background: #fff;
        border-radius: 8px;
        padding: 10px;
        margin-top: 12px;

        .map {
            width: 100%;
            height: 142px;
            background: red;
            border-radius: 5px;
        }

        .info-box {
            margin-top: 12px;

            .info-list {
                margin-top: 10px;
                margin-left: 5px;

                .info-row {
                    display: flex;
                    align-items: flex-start;
                    margin-bottom: 6px;

                    .info-label {
                        min-width: 80px;
                        color: #4E5969;
                    }

                    .crop-tags {
                        display: flex;
                        flex-wrap: wrap;
                        gap: 6px;
                    }

                    .crop-tag {
                        padding: 2px 8px;
                        background: #E8F3FF;
                        color: #2199f8;
                        border-radius: 2px;
                        font-size: 12px;
                    }

                    .problem-tags {
                        display: flex;
                        flex-wrap: wrap;
                        gap: 6px;
                        .problem-tag {
                            padding: 2px 8px;
                            background: rgba(58, 173, 148, 0.1);
                            color: #3AAD94;
                            border-radius: 2px;
                            font-size: 13px;
                        }
                    }

                    .device-box {
                        padding: 6px;
                        border-radius: 4px;
                        border: 0.5px solid rgba(33, 153, 248, 0.2);
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: space-between;
                        .device-item {
                            display: flex;
                            padding: 4px 0;
                            gap: 15px;
                            font-size: 13px;
                            color: #1D2129;
                            .device-count {
                                padding: 2px 8px;
                                background: #E8F3FF;
                                color: #2199f8;
                                border-radius: 2px;
                            }
                        }
                    }
                }
                .info-row-column {
                    display: flex;
                    flex-direction: column;
                    gap: 4px;
                }
            }
        }
    }
}
</style>