agriculture-one-map/src/views/home/index.vue

<template>
    <div class="base-container no-events">
        <fnHeader showDate></fnHeader>
        <div class="content">
            <navigation style="margin-left: 50px" @handleTab="handleTab" @updateLegend="updateLegend"></navigation>
            <div class="left yes-events" :class="{ 'collapsed-left': isLeftShrink }">
                <div class="home-btn">
                    <div class="btn" @click="changeLeftComponent(0)" :class="{ active: activeBtn === 0 }">实时感知</div>
                    <div class="btn" @click="changeLeftComponent(1)" :class="{ active: activeBtn === 1 }">诊断识别</div>
                </div>
                <tool-list
                    direction="left"
                    ref="leftTool"
                    :list="leftToolList[activeBtn]"
                    @handleActive="handleActiveLeft"
                ></tool-list>
                <component :is="components[currentComponent]" />
                <!-- 箭头 -->
                <div class="arrow" @click="handleShrink('left')">
                    <el-icon class="icon" :class="{ 'arrow-left': isLeftShrink }" color="#141414"
                        ><DArrowLeft
                    /></el-icon>
                </div>
            </div>
            <div class="home-bottom">
                <img v-if="!showSpaceTime" class="img yes-events" @click="handlePage" src="@/assets/images/home/table-btn-sk.png" alt="" />
                <space-time v-if="showSpaceTime" @collapse="handleSpaceTimeCollapse" :class="{ 'expanded': showSpaceTime }"></space-time>
            </div>
            <div class="right yes-events" :class="{ 'collapsed-right': isRightShrink }">
                <div class="home-btn">
                    <div class="btn" @click="changeRightComponent(0)" :class="{ active: activeRightBtn === 0 }">
                        精细农事
                    </div>
                    <div class="btn" @click="changeRightComponent(1)" :class="{ active: activeRightBtn === 1 }">
                        人机执行
                    </div>
                </div>
                <component :is="components[currentRightComponent]" @airLineCallback="airLineCallback" @startEditLine="startEditLine" />
                <tool-list
                    direction="right"
                    ref="rightTool"
                    :list="rightToolList[activeRightBtn]"
                    @handleActive="handleActiveRight"
                ></tool-list>
                <!-- 箭头 -->
                <div class="arrow" @click="handleShrink('right')">
                    <el-icon class="icon" :class="{ 'arrow-right': isRightShrink }" color="#141414"><DArrowLeft /></el-icon>
                </div>
            </div>

            <div v-if="isEditLine"  class="map-bg map-legend" style="right: 580px" @click="deleteLine">删除</div>

            <!-- 图例 -->
            <!-- <img class="legend yes-events" src="@/assets/images/home/legend-img.png" alt="" /> -->
            <div v-if="legendArr && legendArr.length" class="map-bg map-legend yes-events">
                <div class="item" v-for="(legend, legendI) in legendArr" :key="legendI">
                    <span class="legend-block" :style="{ background: legend.color }"></span>
                    {{ legend.name }}
                </div>
            </div>
            <div v-else class="map-bg map-legend yes-events">
                <div class="item">
                    <img src="@/assets/images/map/status/status-bh.png" alt="" />
                    病害异常
                </div>
                <div class="item">
                    <img src="@/assets/images/map/status/status-ch.png" alt="" />
                    虫害异常
                </div>
                <div class="item">
                    <img src="@/assets/images/map/status/status-zc.png" alt="" />
                    正常
                </div>
                <!-- <div class="item">
                    <img src="@/assets/images/map/status/defalut-icon.png" alt="" />
                    无照片
                </div> -->
            </div>
        </div>
    </div>
    <div ref="mapRef" class="bottom-map"></div>

    <!-- 图片弹窗 -->
    <PicturePreview :imageUrl="urls" :curIndex="urlsIndex"></PicturePreview>
    <album-carousel></album-carousel>
    <PdfDialog title="果园报告"></PdfDialog>

    <!-- 对比 -->
    <compareDialog></compareDialog>

    <div class="compare-start-btn yes-events" v-show="showCompareBtn" @click="showCompare">
        <img src="@/assets/images/home/compare-btn.png" alt="" />
    </div>

    <!-- 作物档案 -->
    <div class="file-wrap map-file" id="popup-file">
        <div class="file-title">
            <img src="@/assets/images/common/chart-yellow.png" alt="" />
            作物档案
            <span id="tag-nh" class="tag">小农户</span>
        </div>
        <div class="overview-file">
            <div class="box-title">总体档案</div>
            <div class="base-data" id="file-overview"></div>
            <div class="list" id="file-text">
                <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="overview-file">
            <div class="box-title">产量信息</div>
            <div class="box-wrap" id="file-output">
                <div class="box-item">
                    <div class="item-name"></div>
                    <div class="item-val"></div>
                </div>
            </div>
        </div>

        <div class="overview-file">
            <div class="box-title">生态评估</div>
            <div class="box-wrap" id="file-quality">
                <div class="box-item">
                    <div class="item-name"></div>
                    <div class="item-val"></div>
                </div>
            </div>
        </div>
    </div>
    <FarmFightTask class="farm-fight-task" :farmId="currentFarm.id"></FarmFightTask>
</template>

<script setup>
import { onMounted, onUnmounted, ref } from "vue";
import config from "@/api/config.js";
import timeLine from "@/components/timeLine.vue";
import PicturePreview from "@/components/PicturePreview.vue";
import fnHeader from "@/components/fnHeader.vue";
import navigation from "@/components/navigation.vue";
import chartBox from "@/components/chartBox.vue";
import toolList from "@/components/toolList.vue";
import fileBar from "@/components/fileBar.vue";
import HomeMap from "./map/homeMap";
import homePage from "./components/homePage.vue";
import phenologyPage from "./components/phenologyPage.vue";
import indicatorChart from "./components/indicatorChart.vue";
import homeFile from "./components/homeFile.vue";
import { useRouter } from "vue-router";
import SamplePointLayer from "./map/samplePointLayer";
import { useStore } from "vuex";
import RegionLayer from "./map/regionLayer";
import BlueRegionLayer from "./map/blueRegionLayer";
import eventBus from "@/api/eventBus";
import AlbumCarousel from "./album_compoents/albumCarousel.vue";
import compareDialog from "./album_compoents/compareDialog.vue";
import album from "./album/index.vue";
import PdfDialog from "../../components/PdfDialog";
import StaticMapLayers from "@/components/static_map_change/Layers.js";
import FarmFightTask from "./components/farmFightTask";
import leftFly from "./components/leftComponents/leftFly.vue";
import leftWeather from "./components/leftComponents/leftWeather.vue";
import leftStation from "./components/leftComponents/leftStation.vue";
import weatherPage from "./components/leftComponents/weatherPage.vue";
import leftDiseases from "./components/leftComponents/leftDiseases.vue";
import leftNutrition from "./components/leftComponents/leftNutrition.vue";
import rightAerial from "./components/rightComponents/rightAerial.vue";
import recordList from "./components/rightComponents/recordList.vue";
import AirLineStringLayer from "./map/airLineStringLayer";
import spaceTime from "./components/spaceTime/index.vue";

const activeBtn = ref(0);
const leftTool = ref(null);
function changeLeftComponent(i) {
    activeBtn.value = i;
    handleActiveLeft(leftToolList[i][0]);
    // if(i){
    //     isDisable.value = false
    // }else{
    //     isDisable.value = true
    // }
    leftTool.value.resetActive(0);
}

const rightTool = ref(null);
const activeRightBtn = ref(0);
function changeRightComponent(i) {
    activeRightBtn.value = i;
    handleActiveRight(rightToolList[i][0]);
    rightTool.value.resetActive(0);
}

let store = useStore();
const components = {
    leftFly,
    leftWeather,
    leftStation,
    homePage,
    weatherPage,
    phenologyPage,
    leftDiseases,
    leftNutrition,
    rightAerial,
    recordList,
};
//当前农场
const currentFarm = {
    id: sessionStorage.getItem("farmId"),
    name: store.getters.userinfo.curFarmName,
};
//当前区域
const currentRegion = {
    id: null,
    name: null,
};
let homeMap = new HomeMap();
let staticMapLayers = null;
let samplePointLayer = null;
let regionLayer = null;
let blueRegionLayer = null;
let airLineStringLayer = null;
const router = useRouter();
const mapRef = ref();
onMounted(() => {
    homeMap.initMap("POINT(113.61448114737868 23.585550924763083)", mapRef.value);
    // homeMap.initMap(store.getters.userinfo.location, mapRef.value);
    // regionLayer = new RegionLayer(homeMap.kmap.map, currentFarm, currentRegion)
    samplePointLayer = new SamplePointLayer(homeMap.kmap);
    VE_API.warning
        .fetchWarningLayer({
            k: "gspgjdfbt",
            resultType: "json",
        })
        .then(({ data }) => {
            staticMapLayers = new StaticMapLayers(homeMap.kmap, data);
            eventBus.on("showGspgjdfbt", function (v) {
                if (v) {
                    staticMapLayers.showSingle("聚类结果3", true);
                } else {
                    staticMapLayers.hideAll();
                }
            });
        });
    blueRegionLayer = new BlueRegionLayer(homeMap.kmap);
    airLineStringLayer = new AirLineStringLayer(homeMap.kmap);

    //区域切换监听事件
    eventBus.on("area:id", areaId);
    //选项卡子项事件监听
    // 是否开启指标对比
    eventBus.on("compareTree", handleCompare);
    eventBus.on("clickToCompare:point", toggleCompare);
});

onUnmounted(() => {
    eventBus.off("area:id", areaId);
    eventBus.off("compareTree", handleCompare);
    eventBus.off("clickToCompare:point", toggleCompare);
});

function handleCompare(v) {
    isShrink.value = v;
    if (v === false) {
        showCompareBtn.value = v;
    }
}

const showSpaceTime = ref(false);

const handlePage = () => {
    showSpaceTime.value = true;
    // 收缩左右两边
    isLeftShrink.value = true;
    isRightShrink.value = true;
};

const handleSpaceTimeCollapse = () => {
    showSpaceTime.value = false;
    // 展开左右两边
    isLeftShrink.value = false;
    isRightShrink.value = false;
};

const blueList = ref([]);
const getBlueRegionList = (callback) => {
    if (!organId.value) {
        return;
    }
    let selectAll = undefined;
    if (regionId.value === 0) {
        selectAll = 1;
    }
    const areaId = selectAll ? undefined : regionId.value;
    VE_API.farm.blueRegionList({ farmId: organId.value, regionId: areaId, selectAll }).then(({ data }) => {
        blueList.value = data.map((item) => {
            let color = "rgba(255, 255, 255, 0.5)"; //失效区域
            if (item.status === 2) {
                //物候期风险
                // color = "rgba(63, 255, 53, 0.5)";
                color = "#2BFE00";
            }
            if (item.status === 3) {
                //生长异常
                // color = "rgba(255, 252, 61, 0.5)";
                color = "#FF7410";
            }
            if (item.status === 4) {
                //病虫害
                // color = "rgba(255, 73, 73, 0.5)";
                color = "#F82121";
            }
            return {
                ...item,
                color,
            };
        });
        blueRegionLayer.initData(blueList.value);
        callback && callback();
    });
};
// 图例
const legendArr = ref([]);

const organId = ref(null);
const regionId = ref(null);
const tabName = ref("");
const tabId = ref(0);
function updateLegend(matchedData,parsedLegendConfig,isInit) {
    legendArr.value = parsedLegendConfig;
    // 将匹配的数据传递给samplePointLayer进行点位颜色更新
    if (samplePointLayer && matchedData && matchedData.length > 0) {
        if (isInit) {
            samplePointLayer.initData(organId.value, regionId.value,true,matchedData);
        }else{
            samplePointLayer.updatePointColors(matchedData);
        }
    }
}

//选项卡事件监听
const handleTab = async ({ name, id, isUpdate, params, legend, colorObj }) => {
    tabName.value = name;
    tabId.value = id;
    // if (id === 0) {
    //     getBlueRegionList(() => {
    //         if (isUpdate) {
    //             handleTabItem(params);
    //         }
    //     });
    // } else {
    //     getFarmIndexReport(() => {
    //         if (isUpdate) {
    //             handleTabItem(params);
    //         }
    //     });
    // }
    // 切换点位数据
    // samplePointLayer.changePointType(name, params)
};

//区域切换监听事件
function areaId({ areaId, farmId }) {
    organId.value = farmId;
    regionId.value = areaId;
    if (tabId.value === 0) {
        getBlueRegionList();
    }
}

const blueZone = ref("ws0y1meyhxp4");

const urls = ref([]);
const urlsIndex = ref(0);

const btnIndex = ref(null);
const btnName = ref("");

//柱状图点击事件监听
eventBus.on("echart:barClick", (e) => {
    btnName.value = "";
    btnIndex.value = null;
    eventBus.emit("clear:area");
    samplePointLayer.updateAreaStatus(false);
    const arr = ["花穗伸长", "啃食虫害", "毛毡病"];
    const isDraw = arr.includes(e);
    const index = arr.indexOf(e);
    if (isDraw) {
        if (index === 0) {
            regionLayer.selectAreaMultiple([
                { value: 0, color: "green" },
                { value: 1, color: "green" },
                { value: 2, color: "green" },
                { value: 3, color: "green1" },
                { value: 4, color: "green1" },
                { value: 5, color: "green2" },
                { value: 6, color: "green1" },
                { value: 7, color: "green2" },
                { value: 8, color: "green2" },
                { value: 9, color: "green" },
                { value: 10, color: "green" },
                { value: 11, color: "green1" },
                { value: 12, color: "green2" },
                { value: 13, color: "green" },
                { value: 14, color: "green2" },
            ]);
        } else if (index === 1) {
            regionLayer.selectAreaMultiple([{ value: 6, color: "red" }]);
        } else {
            regionLayer.selectAreaMultiple([
                { value: 12, color: "red2" },
                { value: 10, color: "red" },
                { value: 1, color: "red" },
            ]);
        }
    }
});

//黄板点击事件监听
eventBus.on("click:yellowBlock", (e) => {
    const arr = ["113.61396985128522", "113.61390710255375", "113.61491218688275"];
    if (arr[0] == e) {
        urls.value = ["HB-ws0y1menggxv"];
        urlsIndex.value = 0;
    }
    if (arr[1] == e) {
        urls.value = ["HB-ws0y1mg0pvd"];
        urlsIndex.value = 3;
    }
    if (arr[2] == e) {
        urls.value = ["HB-ws0y1mg9wpcp"];
        urlsIndex.value = 6;
    }
    eventBus.emit("dialog:show", true);
});

eventBus.on("click:updateArea", (e) => {
    blueZone.value = e.value;
    btnName.value = e.name;
    regionLayer.selectArea(e.name * 1 === 0 ? 0 : e.name * 1 - 1, "blue");
    //getFarmLog()
});

const currentComponent = ref("leftFly");
const handleActiveLeft = (e) => {
    currentComponent.value = e.componentName;
};
const leftToolList = [
    [
        {
            title: "飞巡感知",
            componentName: "leftFly",
        },
        {
            title: "气象感知",
            componentName: "leftWeather",
        },
        {
            title: "人工感知",
            componentName: "phenologyPage",
        },
        {
            title: "站点感知",
            componentName: "leftStation",
        },
    ],
    [
        {
            title: "首页",
            name: "home",
            componentName: "homePage",
        },
        {
            title: "气象预警",
            componentName: "weatherPage",
        },
        {
            title: "物候调节",
            componentName: "phenologyPage",
        },
        {
            title: "病虫指标",
            componentName: "leftDiseases"
        },
        {
            title: "营养评估",
            componentName: "leftNutrition"
        },
    ],
];

const rightIndex = ref(0);
// const handleActiveRight = ({ index }) => {
//     rightIndex.value = index;
//     btnIndex.value = null;
//     btnName.value = "";
//     samplePointLayer.updateAreaStatus(false);
//     if (index !== 0) {
//         act.value = null;
//     }
// };

const currentRightComponent = ref("recordList");
const handleActiveRight = (e) => {
    currentRightComponent.value = e.componentName;
};

function convertPointsToArray(data) {
    return data.map((item) => {
        // 提取POINT字符串中的坐标部分
        const coords = item.point.match(/POINT\(([^)]+)\)/)[1];
        // 将坐标拆分为经度和纬度，并转换为数字
        const [lng, lat] = coords.split(" ").map(Number);
        return [lng, lat];
    });
}

//添加航线回调
const airLineCallback = (data) => {
    console.log("data", data);
    if (data?.id) {
        // VE_API.home.waylinePoint({droneId:data.id}).then(res =>{
        //     const arr = convertPointsToArray(res.data)
        //     airLineStringLayer.initData(arr,data.geom,data.code)
        // })
        const res = [
            {
                id: "13",
                droneId: "2",
                point: "POINT(110.603131056 21.36505974)",
            },
            {
                id: "14",
                droneId: "2",
                point: "POINT(110.599708557 21.36655847)",
            },
            {
                id: "15",
                droneId: "2",
                point: "POINT(110.600641966 21.36925613)",
            },
            {
                id: "16",
                droneId: "2",
                point: "POINT(110.59876442 21.36856673)",
            },
            {
                id: "17",
                droneId: "2",
                point: "POINT(110.596886873 21.37040512)",
            },
        ];
        const arr = convertPointsToArray(res);
        airLineStringLayer.initData(arr, data.geom, data.code);
    } else {
        airLineStringLayer.clearLayer();
    }
};

const isEditLine = ref(false)
function startEditLine() {
    isEditLine.value = true
    // 监听选中要素变化
      airLineStringLayer.selectInteraction.on('select', (event) => {
        console.log('event.selected.length', event.selected.length);
      });
      airLineStringLayer.enterEditMode();
      
}

function deleteLine() {
airLineStringLayer.deleteSelectedPoints();
}

const rightToolList = [
    [
        {
            title: "农事列表",
            componentName: "recordList",
            index: 0,
        },
        {
            title: "认证评估",
            componentName: "leftFly",
            index: 1,
        },
    ],
    [
        {
            title: "无人机",
            componentName: "rightAerial",
            index: 2,
        },
        {
            title: "农机设备",
            componentName: "leftFly",
            index: 2,
        },
        {
            title: "人工巡园",
            componentName: "leftFly",
            index: 2,
        },
    ],
];

// 对比
const compareData = ref([]);
const showCompareBtn = ref(false);
function toggleCompare(arr) {
    // eventBus.emit("clickToCompare:point",{farmId:fs.get("farmId"),sampleId:fs.get("sampleId"), data: fs.getProperties()})
    compareData.value = [];
    arr.map((fs) => {
        compareData.value.push({ farmId: fs.get("farmId"), sampleId: fs.get("id"), data: fs.getProperties() });
    });
    console.log("compareData", compareData.value);
    showCompareBtn.value = compareData.value.length > 1 ? true : false;
}
function showCompare() {
    eventBus.emit("showCompareDialog", compareData.value);
}

const isShrink = ref(false);
const isLeftShrink = ref(false);
const isRightShrink = ref(false);
const handleShrink = (position) => {
    switch (position) {
        case "bottom":
            isShrink.value = !isShrink.value;
            break;
        case "left":
            isLeftShrink.value = !isLeftShrink.value;
            break;
        case "right":
            isRightShrink.value = !isRightShrink.value;
            break;
    }
};

const photoList = ref([
    { key: "病虫", statement: "病虫 2025年02月19日，发现毛毡病异常1级" },
    { key: "异常", statement: "2025年03月17日，发现花量大异常3级" },
    { key: "营养", statement: "无营养异常" },
]);
</script>

<style lang="scss" scoped>
.base-container {
    width: 100%;
    height: 100vh;
    color: #fff;
    position: absolute;
    box-sizing: border-box;
    z-index: 1;

    .content {
        width: 100%;
        height: calc(100% - 74px - 48px - 54px);
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        margin-top: 60px;
        .home-btn {
            position: absolute;
            top: -60px;
            left: 0;
            height: 54px;
            display: flex;
            border: 1px solid #444444;
            background: #101010;
            border-radius: 0 8px 8px 0;
            padding: 8px;
            box-sizing: border-box;
            width: 429px;
            .btn {
                flex: 1;
                background: rgba(79, 79, 79, 0.6);
                border-radius: 4px;
                font-size: 20px;
                font-family: "PangMenZhengDao";
                color: #fff;
                text-align: center;
                height: 38px;
                line-height: 38px;
                cursor: pointer;
                &.active {
                    background: linear-gradient(180deg, #ffd887, #ed9e1e);
                    color: #1d1d1d;
                }
            }
            .btn + .btn {
                margin-left: 8px;
            }
        }
        .left,
        .right {
            width: calc(376px + 54px);
            height: 100%;
            margin-top: 10px;
            box-sizing: border-box;
            display: flex;
            position: relative;
            transition: transform 0.3s;
        }
        .collapsed-left {
            transform: translateX(-430px);
        }
        .collapsed-right {
            transform: translateX(440px);
        }
        .arrow-left {
            transform: rotate(180deg);
        }
        .arrow-right {
            transform: rotate(-180deg);
        }
        .left,.right {
            background: #101010;
            border-radius: 4px;
            border: 1px solid #444444;
            .arrow {
                position: absolute;
                right: -16px;
                top: calc(50% - 40px);
                background: #fff;
                width: 16px;
                height: 80px;
                line-height: 80px;
                border-radius: 0 5px 5px 0;
                text-align: center;
                cursor: pointer;
                transition: transform 0.3s;
            }
        }
        .right {
            width: calc(376px + 54px + 10px);
            .album-r {
                .list-wrap {
                    width: 375px;
                }
            }
            .list {
                width: 100%;
                height: 100%;
                .btn-wrap {
                    width: 100%;
                    height: 25px;
                    line-height: 25px;
                    margin: 10px 0;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    div {
                        width: 48%;
                        height: 100%;
                        color: #ffd489;
                        border: 1px solid rgba(255, 213, 137, 0.6);
                        border-radius: 2px;
                        text-align: center;
                        font-size: 12px;
                        cursor: pointer;
                        &.active {
                            background: #ffd489;
                            color: #000;
                        }
                    }
                }
                .img-box {
                    width: 100%;
                    height: calc(100% - 35px);
                    overflow: auto;
                }
                .img-box1 {
                    width: 100%;
                    height: calc(100% - 10px);
                    overflow: auto;
                    margin-top: 10px;
                }
                .img-box2 {
                    width: 100%;
                    height: calc(100% - 45px);
                    overflow: auto;
                    margin-top: 10px;
                }
                img {
                    width: 100%;
                    height: auto;
                    object-fit: cover;
                    margin-bottom: 12px;
                    cursor: pointer;
                }
                .mt {
                    margin-top: -12px;
                }
                .list-wrap {
                    ::v-deep {
                        .chart-content {
                            padding: 16px 0 0 0;
                        }
                    }
                }
            }
            .arrow{
                left: -16px;
                transform: rotate(180deg);
            }
        }
        .overflow {
            overflow: auto;
        }
        .home-bottom {
            display: flex;
            align-items: flex-end;
            width: calc(100% - 20px - 430px * 2);
            height: 300px;
            align-self: flex-end;
            justify-content: center;
            z-index: 100;
            .img {
                width: 268px;
                height: 66px;
                cursor: pointer;
            }
            .time-wrap {
                height: 85px;
            }
            .fly-icon {
                width: 148px;
                height: 100%;
                margin-left: 27px;
            }
            .log-box {
                height: 34%;
                width: calc(100% - 340px - 28px);
                margin-right: 28px;
                .box-name {
                    width: 89px;
                    height: 22px;
                    text-align: center;
                    line-height: 22px;
                    border-radius: 20px;
                    margin: 10px 0 5px 6px;
                    cursor: pointer;
                    background: linear-gradient(0deg, #bba269 0%, #3d3523 100%);
                }
                .log-content {
                    font-size: 12px;
                    line-height: 1.5;
                    padding: 0 18px;
                }
                .chart-wrap {
                    width: 100%;
                    height: calc(100% - 50px);
                    .line {
                        margin-top: 10px;
                        margin-bottom: 12px;
                    }
                    img {
                        width: 100%;
                        margin-bottom: 10px;
                    }
                }
            }

            .garden-file {
                position: relative;
                top: 10px;
                // height: 30%;
                // min-height: 210px;
                // width: 640px;
                transition: all 0.3s;
                // width: 800px;
                // height: 320px;
                width: 100vw;
                height: 100vh;
                overflow: hidden;
                &.isShrink {
                    height: 66px;
                    width: 450px;
                    overflow: hidden;
                    .arrow {
                        .icon {
                            transform: rotate(90deg);
                        }
                    }
                }
                .arrow {
                    position: absolute;
                    right: 56px;
                    top: 36px;
                    background: #fff;
                    height: 16px;
                    width: 80px;
                    line-height: 16px;
                    border-radius: 0 0 5px 5px;
                    text-align: center;
                    cursor: pointer;
                    .icon {
                        transform: rotate(270deg);
                    }
                }
            }

            .file-box {
                height: 25%;
                min-height: 210px;
                width: 340px;
                position: relative;
                img {
                    width: 100%;
                    margin-top: 12px;
                }
                .arrow-icon {
                    top: -32px;
                    left: 50%;
                    position: absolute;
                    background: #fff;
                    width: 16px;
                    height: 80px;
                    line-height: 80px;
                    border-radius: 5px 0 0 5px;
                    text-align: center;
                    transform: translateX(-50%) rotate(270deg);
                }
                .edit-btn {
                    padding: 2px 24px;
                    background: #ffd489;
                    border-radius: 4px;
                    color: #000;
                }
            }
        }
        .legend {
            position: fixed;
            bottom: 8px;
            right: 64px;
            // width: 525px;
            height: 20px;
        }
        .map-bg {
            position: fixed;
            z-index: 2;
            background: rgba(35, 35, 35, 0.8);
            border-radius: 18px;
            padding: 7px 16px;
            right: 460px;
        }
        .map-btn {
            top: 19px;
            cursor: pointer;
        }
        .map-legend {
            bottom: 34px;
            .item {
                display: flex;
                align-items: center;
                font-size: 14px;
                img {
                    width: 16px;
                    margin-right: 6px;
                }
                .legend-block {
                    width: 16px;
                    height: 16px;
                    box-sizing: border-box;
                    border-radius: 50%;
                    border: 2px solid #fff;
                    margin-right: 6px;
                }
            }
            .legend-title {
                border-bottom: 1px solid rgba(102, 102, 102, 0.35);
            }
            .item + .item {
                padding-top: 10px;
            }
        }
    }
}
.bottom-map {
    width: 100%;
    height: 100vh;
    position: absolute;
    z-index: 0;
}

.compare-start-btn {
    position: absolute;
    z-index: 2;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
    bottom: 126px;
    // right: 445px;
    img {
        height: 55px;
    }
}
</style>

<style lang="less">
.file-wrap {
    &.map-file {
        width: 367px;
        position: relative;
        background: url("@/assets/images/home/file-bg.png") no-repeat top center / 100% 100%;
        margin-left: 12px;
        padding: 12px;
        .file-title {
            font-size: 20px;
            color: #ffd489;
            .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: 8px;
                padding: 1px 4px;
            }
        }
        .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;
                    .label {
                        font-size: 12px;
                        color: #666666;
                    }
                    .value {
                        padding-top: 2px;
                        font-size: 16px;
                        color: #ffffff;
                    }
                }
                .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 {
                // flex: 1;
                min-width: 109px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                padding: 6px;
                box-sizing: border-box;
                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;
                }
                &.active {
                    background: rgba(255, 212, 137, 0.16);
                    border: 1px solid #ffd489;
                    .item-name {
                        color: #bbbbbb;
                    }
                }
            }
            .box-item + .box-item {
                margin-left: 8px;
            }
        }
    }
}
.farm-fight-task {
    position: fixed;
    top: 100px;
    left: 25%;
    z-index: 1000;
}

/* Space-time组件展开时的样式 */
.expanded {
    position: fixed !important;
    width: 96% !important;
    margin: 0 auto;
}

</style>