feiniao-farm-h5/src/views/old_mini/monitor/subPages/farmInfo.vue

<template>
    <custom-header name="农场基本信息" bgColor="#f2f3f5"></custom-header>
    <div class="farm-details-page">
        <div class="info-box info-card">
            <div class="section-header">
                <div class="line-title">基本信息</div>
                <div class="edit-btn-box">
                    <div class="edit-btn" @click="handleAddVariety">新增品种</div>
                    <div class="edit-btn" @click="handleEditFarmInfo">编辑信息</div>
                </div>
            </div>
            <div class="info-list">
                <div class="info-row">
                    <span class="info-label">农场名称：</span>
                    <span class="info-value">{{ farmInfo.subjectName }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">农场面积：</span>
                    <span class="info-value">{{ farmInfo.farmArea }}亩</span>
                </div>
                <div class="info-row">
                    <span class="info-label">农场位置：</span>
                    <span class="info-value">{{ farmInfo.farmAddress }}</span>
                </div>
            </div>
        </div>
        <div class="info-box info-card">
            <div class="section-header">
                <div class="line-title">土壤性质</div>
                <div class="edit-btn" @click="handleEditSoil">编辑信息</div>
            </div>
            <div class="info-list grid-list">
                <div class="grid-item">
                    <div class="grid-value">壤土</div>
                    <div class="grid-name">质地</div>
                </div>
                <div class="grid-item">
                    <div class="grid-value">1%</div>
                    <div class="grid-name">有机质</div>
                </div>
                <div class="grid-item">
                    <div class="grid-value">5.5</div>
                    <div class="grid-name">PH</div>
                </div>
            </div>
        </div>
        <div class="info-box info-card">
            <div class="section-header">
                <div class="line-title">历史高发风险</div>
                <div class="edit-btn only-text" @click="handleEditFarmFacility">查看更多<el-icon><ArrowRight /></el-icon></div>
            </div>
            <div class="info-list">
                <span class="text-label">物候风险:</span> 风险描述风险描述风险描述风险描述风险
            </div>
        </div>
        <div class="info-box info-card">
            <div class="section-header">
                <div class="line-title">种植类别</div>
            </div>
            <div class="info-list">
                <div class="info-row">
                    <span class="info-label">过往种植：</span>
                    <div class="info-value crop-tags">
                        <span v-for="crop in farmInfo.regionList" :key="crop.regionId" class="crop-tag dark-tag">
                            {{ crop.regionName }}
                        </span>
                        <span class="crop-tag border-tag" @click="handleAddVariety">+新增品种</span>
                    </div>
                </div>
                <div class="info-row line-break">
                    <div class="info-label">当季作物：</div>
                    <div class="season-box">
                        <div class="info-value crop-tags">
                            <span class="crop-tag">
                                桂味
                            </span>
                        </div>
                        <div class="season-content">
                            <div class="season-item">桂味-上市时间：06.08</div>
                            <div class="season-item">桂味-上市时间：06.08</div>
                        </div>
                    </div>
                    <div class="season-box">
                        <div class="info-value crop-tags">
                            <span class="crop-tag">
                                桂味
                            </span>
                        </div>
                        <div class="season-content">
                            <div class="season-item">桂味-上市时间：06.08</div>
                            <div class="season-item">桂味-上市时间：06.08</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <FarmInfoPopup ref="farmInfoPopupRef" :farmId="route.query.subjectId" @success="fetchFarmSubjectDetail" />

    <SoilPopup ref="soilPopupRef" />
</template>

<script setup>
import { ref, onMounted } from "vue";
import customHeader from "@/components/customHeader.vue";
import { useRouter, useRoute } from "vue-router";
import FarmInfoPopup from "@/views/old_mini/home/components/farmInfoPopup.vue";
import SoilPopup from "./soilPopup.vue";

const router = useRouter();
const route = useRoute();
const farmInfo = ref({});

onMounted(() => {
    fetchFarmSubjectDetail();
    fetchBasicFarmFormData();
});

function fetchFarmSubjectDetail() {
    VE_API.basic_farm.fetchFarmSubjectDetail({ subjectId: route.query.subjectId }).then(({ data }) => {
        farmInfo.value = data || {};
    });
}

const basicFarmInfo = ref({});
function fetchBasicFarmFormData() {
    VE_API.basic_farm.fetchBasicFarmFormData({ subjectId: route.query.subjectId }).then(({ data, code }) => {
        if (code === 0) {
            basicFarmInfo.value = {
                ...data,
                irrigation: data.irrigationMethods.filter(item => item.selected),
            }
        }
    });
}

const farmInfoPopupRef = ref(null);
const handleEditFarmInfo = () => {
    // // 回显地块：存到 polygonData，创建页会优先使用这里的数据
    // if (data.geomWkt) {
    //     const polygonData = {
    //         geometryArr: [data.geomWkt],
    //         mianji: data.mianji,
    //         isConfirmed: true,
    //     };
    //     store.commit("home/SET_FARM_POLYGON", polygonData);
    // } else {
    //     store.commit("home/SET_FARM_POLYGON", null);
    // }

    // const params = {
    //     ...farmInfo.value,
    //     name: farmInfo.value.subjectName,
    //     fzr: farmInfo.value.contactName,
    //     tel: farmInfo.value.contactPhone,
    //     mianji: farmInfo.value.farmArea,
    //     address: farmInfo.value.farmAddress,
    // };

    // // 回显其他表单字段
    // store.commit("home/SET_EDIT_FARM_DATA", params);

    // // 带上 from=details，创建页提交/取消后能正确返回
    // router.push(`/create_farm?type=edit&farmId=${route.query.subjectId}&from=details`);

    farmInfoPopupRef.value.handleShow();
};

const soilPopupRef = ref(null);
const handleEditSoil = () => {
    soilPopupRef.value.open();
};

const handleEditFarmFacility = () => {
    router.push(`/prescription?subjectId=${route.query.subjectId}`);
};

const handleAddVariety = () => {
    router.push(`/interaction?addVariety=true&subjectId=${route.query.subjectId}`);
};
</script>

<style lang="scss" scoped>
.farm-details-page {
    background: #f2f3f5;
    height: calc(100vh - 40px);
    padding: 0 12px;
    overflow: auto;

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

    .info-card{
        margin-top: 12px;
        background: #fff;
        border-radius: 6px;
        padding: 10px;
    }

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

        .section-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .edit-btn-box {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .edit-btn {
            padding: 4px 12px;
            font-size: 12px;
            color: #86909c;
            border-radius: 999px;
            border: 0.5px solid #d0d3d8;
            background-color: #ffffff;
            &.only-text {
                border: none;
            }
        }

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

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

                &.line-break {
                    display: block;
                }

                &.center-row {
                    align-items: center;
                }

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

                .crop-tags {
                    display: flex;
                    align-items: center;
                    flex-wrap: wrap;
                    gap: 6px;

                    .crop-tag {
                        padding: 2px 8px;
                        background: #E8F3FF;
                        color: #2199f8;
                        border-radius: 2px;
                        font-size: 12px;
                        height: 22px;
                        box-sizing: border-box;
                        &.dark-tag {
                            background: #F8F8F8;
                            color: #7F7F7F;
                        }
                        &.border-tag {
                            border: 0.5px solid #2199F8;
                        }
                    }
                }

                .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-value {
                    width: 100%;
                }

                .device-box {
                    padding: 6px;
                    border-radius: 4px;
                    border: 0.5px solid rgba(33, 153, 248, 0.2);
                    display: grid;
                    grid-template-columns: repeat(2, minmax(0, 1fr));
                    column-gap: 12px;
                    row-gap: 4px;

                    .device-item {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        padding: 4px 0;
                        min-width: 0;
                        gap: 8px;
                        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;
            }
        }

        .season-box {
            padding-top: 8px;
            .season-content {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 2px;
                .season-item {
                    padding-top: 6px;
                }
            }
        }

        .text-label {
            color: #4E5969;
        }

        .grid-list {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 6px;
            .grid-item {
                background: #F5F5F5;
                border-radius: 5px;
                padding: 3px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                height: 50px;
                .grid-value {
                    font-size: 16px;
                    color: #1D2129;
                    // line-height: 22px;
                }
                .grid-name {
                    // line-height: 14px;
                    font-size: 12px;
                    color: rgba(78, 89, 105, 0.5);
                }
            }
        }
    }
}
</style>