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

<template>
    <div class="file-wrap yes-events"  ref="draggable" @mousedown="startDrag" :style="{ left: position.x + 'px', top: position.y + 'px' }">
        
        <!-- 箭头 -->
        <!-- <div class="arrow" @click="handleShrink('bottom')">
            <el-icon class="icon" color="#141414"><DArrowLeft /></el-icon>
        </div> -->
        <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"
                        @click.stop="toggleFileItem(item.label, index)"
                    >
                        <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, item.field)"
                            :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="toggleAcitve(item.name, item.field)"
                            :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, onBeforeUnmount, reactive } from "vue";
const outputBox = ref([
    { id: 1, name: "产量估计", field: "cl", value: "--", unit: "斤/亩" },
    { id: 2, name: "高质果率", field: "spgl", value: "--", unit: "%" },
    { id: 3, name: "雌花比例", value: "--", unit: "%" },
]);

const qualityBox = ref([
    { id: 5, name: "通风率", field: "tfl", value: "--", unit: "%" },
    { id: 6, name: "透光率", field: "tgl", value: "--", unit: "%" },
    { id: 7, name: "病虫比例", value: "--", unit: "%" },
]);

const photoBaseData = ref([
    {
        label: "品种",
        value: "--",
    },
    {
        label: "冠幅平均表面积",
        value: "--",
    },
    {
        label: "平均总枝条",
        value: "--",
    },
    {
        label: "平均树龄",
        value: "--",
    },
]);

const photoList = ref([
    { key: "物候", statement: "--" },
    { key: "病虫", statement: "--" },
    { key: "异常", statement: "--" },
    { key: "农事", statement: "--" },
]);

const activeOuput = ref(1);

// 品种
const farmId = ref(null);
onMounted(() => {
    eventBus.off("area:id", toggleAreaId);
    eventBus.on("area:id", toggleAreaId);
    farmId.value = sessionStorage.getItem("farmId");

    eventBus.off("resetFileActive", resetActive2);
    eventBus.on("resetFileActive", resetActive2);
});
function resetActive2(name) {
    activeOuput.value = name
    console.log('222resetActive2', name);
}

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(e) {
    console.log("eee", e);
    setFileData(e);
}

function toggleFileItem(name, index) {
    if (index !== 0) {
        toggleAcitve(name);
    }
}

// 产量详情
function toggleAcitve(name, field) {
    activeOuput.value = name;
    console.log("产量详情产量详情产量详情", name);
    // eventBus.emit("change:mapPoint", name)
    if (name === "透光率" || name === "通风率") {
        eventBus.emit("handleTabItem", name)
        eventBus.emit("handleActive", { name, key: "生态指标", index: 1, isFile: name === "通风率" ? true : false });
        // eventBus.emit('handleTab',"透光率")
    } else {
        eventBus.emit("change:mapPoint", field);
    }
}

const regionId = ref(null);
function toggleAreaId({ areaId, farmId }) {
    regionId.value = areaId;
    getSpeciesItemList(farmId, areaId);
    getFileData(farmId, areaId);
}

const allTypeData = ref([]);
function getFileData(farmId, regionId) {
    VE_API.farm.getFarmFiles({ farmId, regionId: regionId ? regionId : undefined }).then(({ data }) => {
        allTypeData.value = data;
        setFileData(photoBaseData.value[0].speciesItemId);
    });
}

function setFileData(type_id) {
    const res = allTypeData.value.find((item) => item.type_id == type_id);
    photoBaseData.value[1].value = res.meta_info.avg_crown + "平方米";
    photoBaseData.value[2].value = res.meta_info.avg_branch_num;
    photoBaseData.value[3].value = res.meta_info.avg_age + "年";
    photoList.value[0].key = res.meta_info.phenology_info.key;
    photoList.value[0].statement = res.meta_info.phenology_info.statement;
    photoList.value[1].key = res.meta_info.dp_alert_info.key;
    photoList.value[1].statement = res.meta_info.dp_alert_info.statement;
    photoList.value[2].key = res.meta_info.grow_alert_info.key;
    photoList.value[2].statement = res.meta_info.grow_alert_info.statement;
    photoList.value[3].key = res.meta_info.prescription_info.key;
    photoList.value[3].statement = res.meta_info.prescription_info.statement;
    // if(res.production_info.production){
    //   res.production_info.production = (res.production_info.production * 1.3).toFixed(1)
    // }
    outputBox.value[0].value = res.production_info.production;
    outputBox.value[1].value = res.production_info.quality.toFixed(0);
    outputBox.value[2].value = res.production_info.cihua_ratio.toFixed(0);
    qualityBox.value[0].value = res.ecology_info.ventilation;
    qualityBox.value[1].value = res.ecology_info.transmittance;
    qualityBox.value[2].value = res.ecology_info.dp_situation;
}

// 可拖拽
const position = reactive({ x: 0, y: window.innerHeight - 322 });
const isDragging = ref(false);
const offset = reactive({ x: 0, y: 0 });
const draggable = ref(null);
function startDrag(event) {
  isDragging.value = true;
  offset.x = event.clientX - position.x;
  offset.y = event.clientY - position.y;
  document.addEventListener('mousemove', onDrag);
  document.addEventListener('mouseup', stopDrag);
}

function onDrag(event) {
  if (!isDragging.value) return;
  position.x = event.clientX - offset.x;
  position.y = event.clientY - offset.y;
}

function stopDrag() {
  isDragging.value = false;
  document.removeEventListener('mousemove', onDrag);
  document.removeEventListener('mouseup', stopDrag);
}
</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;
    position: absolute;
    
    .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>