agriculture-one-map/src/components/FileWrap.vue

<template>
    <div class="file-wrap" :class="className">
        <div class="file-title" v-if="className !== 'styleName2'">
            <img src="@/assets/images/common/chart-yellow.png" alt="" />
            果树档案
            <span class="tag" v-if="showTag">小农户</span>
        </div>
        <!-- 暂无数据状态 -->
        <div v-if="dynamicDataBlocks.length === 0" class="empty-state">
            <div class="empty-content">
                <div class="empty-icon">📋</div>
                <div class="empty-text">暂无数据</div>
            </div>
        </div>

        <!-- 动态渲染所有数据块 -->
        <template v-if="className === 'styleName2'">
            <!-- 动态渲染所有数据块 -->
            <div class="file-wrap-content" :class="styleName2">
                <div class="file-title">
                    <img src="@/assets/images/common/chart-yellow.png" alt="" />
                    果树档案
                    <span class="tag" v-if="showTag">小农户</span>
                </div>
                <div class="overview-file" v-for="block in dynamicDataBlocks" :key="block.id">
                    <!-- 总体档案显示基础数据和列表 -->
                    <template v-if="block.isOverview">
                        <div class="box-flex">
                            <div class="box-title">{{ block.title }}</div>
                            <div class="base-data">
                                <div class="base-item base-min" v-for="item in block.indicators" :key="item.label">
                                    <span class="label">{{ item.name }}</span>
                                    <div class="value">{{ item.val || "--" }}{{ item.unit }}</div>
                                </div>
                                <!-- <div class="base-item" v-for="(item, index) in block.indicators" :key="item.name">
                                    <span class="label">{{ item.name }}</span>
                                    <div v-if="index === 0" class="value">
                                        <el-select
                                            v-model="selectedSpeciesId"
                                            size="small"
                                            @change="changeSelect"
                                            class="type-select"
                                        >
                                            <el-option
                                                v-for="option in selectOptions"
                                                :key="option.id"
                                                :label="option.name"
                                                :value="option.id"
                                            />
                                        </el-select>
                                    </div>
                                    <div v-else class="value">{{ item.val || "--" }}{{ item.unit }}</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.speakTitleName || "--" }}
                                    </div>
                                    {{ item.content?.renderedContent || "--" }}
                                </div>
                            </div>
                        </div>
                    </template>
                </div>
            </div>
            <div class="box-r">
                <div class="overview-file" v-for="block in dynamicDataBlocks" :key="block.id">
                    <!-- 其他数据块显示指标数据 -->
                    <template v-if="!block.isOverview">
                        <div class="box-flex">
                            <div class="box-title">{{ block.title }}</div>
                            <div class="box-wrap">
                                <div
                                    class="box-item"
                                    v-for="(item, index) in block.indicators"
                                    :key="index"
                                    @click="toggleAcitve(item.name, item.field)"
                                >
                                    <div class="item-name">{{ item.name }}</div>
                                    <div class="item-val">{{ item.val || "--" }}{{ item.unit }}</div>
                                </div>
                            </div>
                        </div>
                    </template>
                </div>
            </div>
        </template>
        <template v-else>
            <div class="overview-file" v-for="block in dynamicDataBlocks" :key="block.id">
                <div class="box-title">{{ block.title }}</div>

                <!-- 总体档案显示基础数据和列表 -->
                <template v-if="block.isOverview">
                    <div class="base-data">
                        <div class="base-item" v-for="item in block.indicators" :key="item.label">
                            <span class="label">{{ item.name }}</span>
                            <div class="value">{{ item.val || "--" }}{{ item.unit }}</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.speakTitleName || "--" }}
                            </div>
                            {{ item.content?.renderedContent || "--" }}
                        </div>
                    </div>
                </template>
                <!-- 其他数据块显示指标数据 -->
                <template v-else>
                    <div class="box-wrap">
                        <div
                            class="box-item"
                            v-for="(item, index) in block.indicators"
                            :key="index"
                            @click="toggleAcitve(item.name)"
                        >
                            <div class="item-name">{{ item.name }}</div>
                            <div class="item-val">{{ item.val || "--" }}{{ item.unit }}</div>
                        </div>
                    </div>
                </template>
            </div>
        </template>
    </div>
</template>

<script setup>
import { ref, defineProps, defineEmits, watch } from "vue";
import eventBus from "@/api/eventBus";

// 定义 props
const props = defineProps({
    sampleId: {
        type: [String, Number],
        default: null,
    },
    showTag: {
        type: Boolean,
        default: false,
    },
    className: {
        type: String,
        default: "styleName1",
    },
});

// 定义 emits
const emit = defineEmits(["update:activeOutput"]);

// 动态数据块列表
const dynamicDataBlocks = ref([]);

const photoList = ref([
    { speakTitleName: "病虫", statement: "--" },
    { speakTitleName: "异常", statement: "--" },
    { speakTitleName: "营养", statement: "--" },
    { speakTitleName: "农事", statement: "--" },
]);

const activeOuput = ref(null);

// 品种选择相关
const selectOptions = ref([]);
const selectedSpeciesId = ref(null);

function changeSelect() {
    // 品种选择变化时，重新获取数据
    if (props.sampleId) {
        getSampleFiles(props.sampleId);
    }
}

// 获取样本文件数据
const getSampleFiles = (sampleId) => {
    VE_API.home.getSampleFilesWithParams({ sampleId }).then(({ data, code }) => {
        if (code === 0) {
            // 清空之前的数据
            dynamicDataBlocks.value = [];

            data.forEach((item, index) => {
                if (item.name && item.indicators && item.indicators.length > 0) {
                    // 处理所有数值，整数不保留小数，小数保留两位
                    const processedIndicators = item.indicators.map((indicator) => {
                        if (
                            indicator.val !== "--" &&
                            indicator.val !== null &&
                            indicator.val !== undefined &&
                            !isNaN(parseFloat(indicator.val))
                        ) {
                            const num = parseFloat(indicator.val);
                            return {
                                ...indicator,
                                val: Number.isInteger(num) ? num.toString() : num.toFixed(2),
                            };
                        }
                        return indicator;
                    });

                    // 创建动态数据块
                    const dataBlock = {
                        id: index + 1,
                        title: item.name,
                        indicators: processedIndicators,
                        isOverview: index === 0, // 标记是否为总体档案
                    };

                    dynamicDataBlocks.value.push(dataBlock);
                }
            });
        }
    });

    VE_API.home.getSpeakInfo({ sampleId }).then(({ data, code }) => {
        if (code === 0) {
            photoList.value = data || [];
        }
    });
};

// 产量详情
function toggleAcitve(name) {
    activeOuput.value = name;
    // emit('update:activeOutput', name);

    // if (name.indexOf("开花") > -1) {
    //     eventBus.emit("change:watermark", "开花目标框")
    // } else if (name.indexOf("花穗") > -1) {
    //     eventBus.emit("change:watermark", "花穗目标框")
    // } else if (name.indexOf("雄花") > -1) {
    //     eventBus.emit("change:watermark", "雄花目标框")
    // } else if (name.indexOf("枝条数") > -1) {
    //     eventBus.emit("change:watermark", "")
    // } else {
    //     eventBus.emit("change:watermark", "")
    // }
}

// 重置状态
const resetState = () => {
    activeOuput.value = null;
    eventBus.emit("change:watermark", "");
    eventBus.emit("resetImgIndex");
};

// 监听 sampleId 变化，自动调用接口
watch(() => props.sampleId, (newVal) => {
    if (newVal) {
        getSampleFiles(newVal);
    }
}, { immediate: true });

// 暴露方法给父组件
defineExpose({
    getSampleFiles,
    resetState,
    activeOuput,
});
</script>

<style lang="scss" scoped>
@import "src/styles/index";

.file-wrap {
    // background: url("@/assets/images/home/file-bg.png") no-repeat top center / 100% 100%;
    background: linear-gradient(180deg, #3d3a2f 6%, rgba(10, 10, 10, 1) 50%, rgba(10, 10, 10, 1) 100%);
    border-radius: 12px;
    border: 1px solid #BBBBBB;
    margin-left: 12px;
    padding: 12px;
    margin-top: 20px;
    &.styleName1 {
        margin-top: 0;
        .overview-file {
            margin-top: 16px;
        }
    }
    &.styleName2 {
        display: flex;
        
        .file-wrap-content {
            flex: 1;
        }
        .box-r {
            padding-left: 24px;
        }
    }

    .file-title {
        font-size: 20px;
        color: #ffd489;
        display: flex;
        align-items: center;

        .tag {
            border: 1px solid #ffd489;
            border-radius: 4px;
            font-size: 12px;
            display: inline-block;
            width: 44px;
            height: 20px;
            text-align: center;
            line-height: 18px;
            margin-left: 3px;
            padding: 1px 4px;
        }
    }

    .box-wrap {
        display: flex;
        .box-r {
            padding-left: 24px;
            .overview-file:first-child {
                padding-top: 0;
            }
        }
    }
    .file-wrap-content {
        &.styleName2 {
            display: flex;
        }
    }

    .box-flex {
        padding-top: 20px;
        display: flex;
        flex-direction: column;
    }
    .box-flex + .box-flex {
        margin-top: 8px;
    }

    .overview-file {
        .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: 4px;
                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 {
                text-align: center;
                flex: 1;
                &.base-min {
                    min-width: 80px;
                }
                .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;
    }

    // 暂无数据状态样式
    .empty-state {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 450px;
        padding: 40px 20px;
        min-width: 400px;

        .empty-content {
            text-align: center;

            .empty-icon {
                font-size: 48px;
                margin-bottom: 16px;
                opacity: 0.6;
            }

            .empty-text {
                font-size: 16px;
                color: #bbbbbb;
                font-weight: 400;
            }
        }
    }

    .box-wrap {
        display: flex;
        .box-item {
            box-sizing: border-box;
            min-width: 90px;
            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>