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

<template>
    <div class="agri-file" :style="{ height: `calc(100vh - ${tabBarHeight}px)` }">
        <!-- 天气遮罩 -->
        <div class="weather-mask" v-show="isExpanded" @click="handleMaskClick"></div>
        <!-- 天气 -->
        <weather-info ref="weatherInfoRef" :hasWeather="false" from="monitor" class="weather-info"
            @weatherExpanded="weatherExpanded" @changeGarden="changeGarden" @changeGardenTab="changeGardenTab"
            :isGarden="true" :gardenId="defaultGardenId">
            <template #types-content>
                <div class="type-tabs">
                    <div class="type-item" @click="changeType('荔枝')"
                        :class="{ 'type-item-active': activeType === '荔枝' }">荔枝</div>
                    <!-- <div class="type-item" @click="changeType('水稻')" :class="{ 'type-item-active': activeType === '水稻' }">水稻</div> -->
                    <!-- <div class="type-item" @click="changeType('柑橘')" :class="{ 'type-item-active': activeType === '柑橘' }">柑橘</div> -->
                    <!-- <div class="type-item" @click="changeType('小麦')" :class="{ 'type-item-active': activeType === '小麦' }">小麦</div> -->
                </div>
            </template>
        </weather-info>
        <!-- 农场列表 -->
        <div v-show="activeGardenTab === 'list'">
            <garden-list ref="gardenListRef" :garden-id="selectedGardenId" @loaded="handleGardenLoaded"
                @selectGarden="handleGardenSelected" />
        </div>

        <div class="file-content" v-show="activeGardenTab === 'current'">
            <div class="map-legend">
                <div v-for="item in mapLegendItems" :key="item.label" class="map-legend__item">
                    <span class="map-legend__dot" :class="item.dotClass"></span>
                    <span class="map-legend__text">{{ item.label }}</span>
                </div>
            </div>
            <div class="map-container" ref="mapContainer"></div>
            <file-float @map-farm-record="onFarmRecordMap"></file-float>
        </div>
    </div>
</template>

<script setup>
import { computed, onActivated, ref } from "vue";
import { useRoute } from "vue-router";
import { useStore } from "vuex";
import weatherInfo from "@/components/weatherInfo.vue";
import gardenList from "@/components/gardenList.vue";
import fileFloat from "./components/fileFloat.vue";
import FileMap from "./fileMap.js";

const store = useStore();
const route = useRoute();
const tabBarHeight = computed(() => store.state.home.tabBarHeight);

const isExpanded = ref(false);
const weatherInfoRef = ref(null);
const defaultGardenId = ref(null);
const selectedGardenId = ref(null);
const gardenListRef = ref(null);
const activeGardenTab = ref("current");
const activeType = ref("荔枝");

const mapLegendItems = [
    { label: "管理分区", dotClass: "map-legend__dot--zone" },
    { label: "长势异常", dotClass: "map-legend__dot--growth" },
    { label: "病虫害异常", dotClass: "map-legend__dot--pest" },
];

const fileMap = new FileMap();

const onFarmRecordMap = ({ polygonWkt, records }) => {
    fileMap.setFarmRecordOverlay?.(polygonWkt, records);
};

const weatherExpanded = (isExpandedValue) => {
    isExpanded.value = isExpandedValue;
};

const handleMaskClick = () => {
    if (weatherInfoRef.value?.toggleExpand) {
        weatherInfoRef.value.toggleExpand();
    }
};

const changeGardenTab = (tab) => {
    activeGardenTab.value = tab;
};
const changeType = (type) => {
    activeType.value = type;
};

const handleGardenLoaded = ({ hasFarm }) => {
    weatherInfoRef.value?.setGardenLoaded?.(hasFarm);
};

const handleGardenSelected = (garden) => {
    selectedGardenId.value = garden?.id ?? null;
    weatherInfoRef.value?.setSelectedGarden?.(garden);
};

const changeGarden = (data) => {
    if (!data?.id) return;
    store.commit("home/SET_GARDEN_ID", data.id);
    let polygonWkt = [];
    if (data.name === '张振国荔枝农场') {
        polygonWkt = [
            "MULTIPOLYGON (((113.62275100940235 23.592983531854543, 113.62303908281478 23.593107898349786, 113.62303654472305 23.59310536025788, 113.62322182542005 23.59321069106511, 113.62339568470429 23.5933375956522, 113.62374594136429 23.593581252459103, 113.62388680545587 23.593600288147172, 113.62413173130858 23.593640897614932, 113.62429163108823 23.593765264110345, 113.6245467093081 23.59392643293569, 113.62459493305118 23.594147246916975, 113.6247459495097 23.594177704018023, 113.6249451897113 23.594144708825297, 113.6250822466651 23.59428684196274, 113.62527387259149 23.594512732127612, 113.6254680366095 23.594555879687107, 113.62552641271952 23.59457110823763, 113.62586524796677 23.594163744513367, 113.62598200018681 23.59397465667871, 113.62583352182014 23.59375130460569, 113.62568504345325 23.593663740440718, 113.62542742714174 23.593586328642687, 113.62523326312373 23.593450540734636, 113.62500229677528 23.593279219542012, 113.62484874222514 23.593208152973375, 113.6244819879687 23.593156122092807, 113.62425736684986 23.593066019835987, 113.62352132024535 23.59286677963439, 113.6231900992733 23.592803327341016, 113.62298070670477 23.59279190592821, 113.62262283576945 23.59266246324944, 113.62275100940235 23.592983531854543)))"
        ]
    } else if (data.name === '湛江荔枝先生基地') {
        polygonWkt = [
            "MULTIPOLYGON (((110.48938292603424 21.417825047316228, 110.4899730323636 21.417990023279287, 110.49068052543606 21.417796493784067, 110.49084867401376 21.41706679240906, 110.49043306149144 21.415388479246303, 110.48927822974991 21.415515383833224, 110.48873888525532 21.416276811355146, 110.48938292603424 21.417825047316228)))",
            "MULTIPOLYGON (((110.48996192821238 21.41538768609246, 110.49012614274784 21.415411734511736, 110.4903759544273 21.415328199567455, 110.4905258604706 21.415064079395847, 110.4906400745989 21.41417654044062, 110.49084470824545 21.413217617655164, 110.49126349338252 21.41276314060309, 110.49141339942582 21.412484743665402, 110.49060914160583 21.412625131864786, 110.49000713797136 21.41311768029294, 110.48996192821238 21.41538768609246)))",
            "MULTIPOLYGON (((110.49144762747073 21.417923243516555, 110.49146967053326 21.417909231135127, 110.49165526849174 21.41746823769546, 110.49183769383541 21.416946342581525, 110.49196777103703 21.416824196916536, 110.49210815923641 21.416644944187453, 110.4923865561741 21.416283266114533, 110.49282437699918 21.415975522491067, 110.49311308493458 21.415770095690846, 110.49327568143673 21.415638432181936, 110.49335023788149 21.41553373589761, 110.49344541632172 21.41515064267577, 110.49345255470479 21.414922214419164, 110.49277207842925 21.414636431237852, 110.49198459250442 21.414455575677493, 110.49168240095673 21.414377846617867, 110.49167605572734 21.414614206411272, 110.49148411253958 21.414625310562485, 110.4913199297302 21.414685590241334, 110.4913104118861 21.414970332408416, 110.49127789258574 21.415159896135265, 110.49120730190918 21.415339148864177, 110.49111212346895 21.41546288083657, 110.49093366389366 21.415717483164258, 110.49088924728812 21.415978430721168, 110.49090193774674 21.416193375365253, 110.49094714750589 21.41630679633994, 110.49102963548751 21.41653443144287, 110.49111767554473 21.4168675559838, 110.49114940169142 21.41712136515764, 110.49114860853774 21.41767498641832, 110.4913286544205 21.41780585677361, 110.49144762747073 21.417923243516555)))",
        ]
    }else{
        polygonWkt = [
            "MULTIPOLYGON (((110.90593903331239 21.434002814106975, 110.9064263469266 21.434169059115845, 110.90677533454084 21.43419444003331, 110.90846570363959 21.433921595171228, 110.90870756263126 21.43381885533256, 110.90895121943839 21.433709400126418, 110.90860746663844 21.43293924791419, 110.90861063925314 21.432114368098723, 110.9085186334276 21.43114989323766, 110.90719248049368 21.4311023040176, 110.90606620228414 21.431260934751265, 110.90511124526722 21.4317558626405, 110.90499068590952 21.43247287355689, 110.90494944191869 21.433569011927034, 110.90593903331239 21.434002814106975)))"
        ];
    }
    fileMap.setFarmRecordOverlay?.(polygonWkt, []);
};

const mapContainer = ref(null);
onActivated(() => {
    if (route.query?.farmId) {
        defaultGardenId.value = route.query.farmId;
    }
    const savedFarmId = localStorage.getItem("selectedFarmId");
    selectedGardenId.value = savedFarmId ? Number(savedFarmId) : null;
    gardenListRef.value?.refreshFarmList?.();

    fileMap.initMap("POINT(114.31 30.57)", mapContainer.value);
});
</script>

<style lang="scss" scoped>
.agri-file {
    width: 100%;
    height: 100%;
    background: #F5F7FB;
    box-sizing: border-box;

    .weather-mask {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.52);
        z-index: 11;
    }

    .weather-info {
        width: calc(100% - 20px);
        position: absolute;
        z-index: 12;
        left: 10px;
        top: 12px;
    }

    .file-content {
        position: relative;
        height: 100%;
        box-sizing: border-box;

        .map-legend {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            z-index: 15;
            top: 110px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 3px 10px;
            background: rgba(255, 255, 255, 0.69);
            border-radius: 25px;
        }

        .map-legend__item {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .map-legend__dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
        }

        .map-legend__dot--zone {
            background: #1C9E80;
        }

        .map-legend__dot--growth {
            background: #FF953D;
        }

        .map-legend__dot--pest {
            background: #E03131;
        }

        .map-legend__text {
            font-size: 12px;
            white-space: nowrap;
        }

        .map-container {
            width: 100%;
            height: 100%;
        }
    }

    .type-tabs {
        width: 100%;
        background: #FFF;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px;

        .type-item {
            height: 28px;
            line-height: 28px;
            text-align: center;
            padding: 0 6px;
            min-width: 78px;
            color: #9A9A9A;
            background: #EFEFEF;
            box-sizing: border-box;
            border-radius: 2px;

            &.type-item-active {
                background: #2199F8;
                color: #fff;
            }
        }
    }
}
</style>