agriculture-one-map/src/views/home/components/homeFile.vue

<template>
    <div class="file-wrap">
        <div class="file-title">
            <img src="@/assets/images/common/chart-yellow.png" alt="" />
            果园档案
        </div>

        <div class="box-wrap">
            <div class="overview-file">
                <div class="box-title">总体档案</div>
                <div class="base-data">
                    <div class="base-item" v-for="(item, index) in photoBaseData" :key="item.label">
                        <span class="label">{{ item.label }}</span>
                        <div v-if="index === 0" class="value">
                            <el-select
                                v-model="item.speciesItemId"
                                size="small"
                                @change="changeSelect"
                                class="type-select"
                                >
                                <el-option
                                    v-for="item in selectOptions"
                                    :key="item.speciesItemId"
                                    :label="item.speciesItemName"
                                    :value="item.speciesItemId"
                                />
                            </el-select>
                        </div>
                        <div v-else class="value">{{ item.value }}</div>
                    </div>
                </div>
                <div class="list">
                    <div class="list-item" v-for="item in photoList" :key="item.key">
                        <div class="list-name">
                            <img src="@/assets/images/common/title-icon.png" alt="" />
                            {{ item.key }}
                        </div>
                        {{ item.statement }}
                    </div>
                </div>
            </div>

            <div class="box-r">
                <div class="overview-file">
                    <div class="box-title">产量详情</div>
                    <div class="box-wrap">
                        <div
                            class="box-item"
                            v-for="(item, index) in outputBox"
                            :key="index"
                            @click="toggleAcitve(item.name)"
                            :class="{ active: activeOuput === item.name }"
                        >
                            <div class="item-name">{{ item.name }}</div>
                            <div class="item-val">{{ item.value }}<span>{{ item.unit }}</span></div>
                        </div>
                    </div>
                </div>

                <div class="overview-file">
                    <div class="box-title">生态评估</div>
                    <div class="box-wrap">
                        <div
                            class="box-item"
                            v-for="(item, index) in qualityBox"
                            :key="index"
                            @click="toggleQualityAcitve(item.name)"
                            :class="{ active: activeOuput === item.name }"
                        >
                            <div class="item-name">{{ item.name }}</div>
                            <div class="item-val">{{ item.value }}<span>{{ item.unit }}</span></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import eventBus from "@/api/eventBus";
import { onMounted, ref, } from "vue";
const outputBox = ref([
    { id: 1, name: "产量估计", value: "1100", unit: "斤/亩" },
    { id: 2, name: "高质果率", value: "66", unit: "%" },
]);

const qualityBox = ref([
    { id: 5, name: "通风率", value: "78", unit: "%" },
    { id: 6, name: "透光率", value: "56", unit: "%" },
    { id: 7, name: "病虫等级", value: "80", unit: "%" },
]);

const photoBaseData = ref([
    {
        label: "品种",
        value: "桂味",
    },
    {
        label: "冠幅平均表面积",
        value: "8.7平方米",
    },
    {
        label: "平均总枝条",
        value: "2000",
    },
    {
        label: "平均树龄",
        value: "10年",
    },
]);

const photoList = ref([
    {key: "物候", statement: "营养老熟 延迟，12月10日 末次老熟"},
    {key: "病虫", statement: "病虫 2025年02月19日，发现毛毡病异常1级"},
    {key: "异常", statement: "2025年03月17日，发现花量大异常3级"},
    {key: "农事", statement: "无营养异常"},
]);

const activeOuput = ref(1);

// 品种
onMounted(() => {
    
    getSpeciesItemList(766, 2)
})
const selectOptions = ref([])
const getSpeciesItemList = (farmId,regionId) =>{
    VE_API.farm.getSpeciesItemList({farmId,regionId}).then(res =>{
        selectOptions.value = res.data
        selectOptions.value.unshift({speciesItemId:"0",speciesItemName:"全部"})
        photoBaseData.value[0].speciesItemId = res.data[0].speciesItemId
    })
}

function changeSelect() {}


// 产量详情
function toggleAcitve(name) {
    activeOuput.value = name;
    eventBus.emit("change:mapPoint", name)
}
</script>

<style lang="scss" scoped>
.file-wrap {
    margin-top: 16px;
    background: url("@/assets/images/home/file-bg-w.png") no-repeat top center / 100% 100%;
    margin-left: 12px;
    padding: 12px 18px 20px 16px;
    .file-title {
        font-size: 20px;
        color: #ffd489;
    }
    .box-wrap {
        display: flex;
        .box-r {
            padding-left: 24px;
        }
    }
    .overview-file {
        padding-top: 20px;
        .box-title {
            font-size: 16px;
            padding-left: 13px;
            margin-bottom: 16px;
            position: relative;
            display: flex;
            justify-content: space-between;
            color: #fff;
            &::before {
                content: "";
                position: absolute;
                left: 0;
                top: 3px;
                width: 3px;
                height: 16px;
                background: #fff;
                border-radius: 11px;
            }
        }
        .title {
            color: #f3c11d;
            font-size: 16px;
            font-family: "PangMenZhengDao";
            margin-bottom: 20px;
            .big {
                width: 13px;
                height: 13px;
                margin: -10px 0 0 4px;
            }
            .small {
                width: 7px;
                height: 7px;
                margin-left: -3px;
            }
        }
        .base-data {
            background: rgba(207, 207, 207, 0.1);
            border-radius: 4px;
            padding: 6px 0;
            display: flex;
            .base-item {
                // flex: 1;
                text-align: center;
                padding: 0 14px;
                .label {
                    font-size: 12px;
                    color: #666666;
                    width: max-content;
                    display: block;
                    margin: 0 auto;
                    padding-bottom: 2px;
                }
                .value {
                    padding-top: 2px;
                    font-size: 16px;
                    color: #ffffff;
                    width: max-content;
                    margin: 0 auto;
                }
                .type-select {
                    width: 72px;
                    ::v-deep {
                        .el-select__wrapper {
                            background: rgba(247, 190, 90, 0.1);
                            box-shadow: 0 0 0 1px #F7BE5A inset;
                            color: #FFD489;
                        }
                        .el-select__placeholder {
                            color: #FFD489;
                        }
                    }
                }
            }
            .base-item + .base-item {
                border-left: 1px solid rgba(102, 102, 102, 0.42);
            }
        }
        .list {
            margin-top: 15px;
            width: max-content;
            font-size: 14px;
            .list-item {
                color: #bbbbbb;
                display: flex;
                margin-bottom: 8px;
                .list-name {
                    color: #f3c11d;
                    margin-right: 6px;
                    img {
                        width: 17px;
                        height: 13px;
                    }
                }
            }
        }
    }
    .overview-file + .overview-file {
        margin-top: 8px;
    }
    .box-wrap {
        display: flex;
        .box-item {
            box-sizing: border-box;
            min-width: 110px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 6px 16px;
            background: rgba(207, 207, 207, 0.1);
            border-radius: 4px;
            border: 1px solid rgba(207, 207, 207, 0.1);
            cursor: pointer;
            .item-name {
                font-size: 12px;
                color: #666666;
                width: max-content;
            }
            .item-val {
                font-size: 18px;
                color: #fff;
                width: max-content;
                padding-top: 3px;
                span {
                    font-size: 12px;
                    padding-left: 2px;
                }
            }
            &.active {
                background: rgba(255, 212, 137, 0.16);
                border: 1px solid #ffd489;
                .item-name {
                    color: #bbbbbb;
                }
            }
        }
        .box-item + .box-item {
            margin-left: 8px;
        }
    }
}
</style>