foster-pc-vue/src/views/home/index.vue

<template>
    <div class="base-container no-events">
        <fnHeader showDate></fnHeader>
        <div class="content">
            <navigation @handleTab="handleTab"></navigation>
            <div class="left yes-events">
                <tool-list direction="left" :list="leftToolList" @handleActive="handleActiveLeft"></tool-list>
                <component :is="components[currentComponent]" />
                <!-- 箭头 -->
                <div class="arrow" @click="handleShrink('left')">
                    <el-icon class="icon" color="#141414"><DArrowLeft /></el-icon>
                </div>
            </div>
            <div class="home-bottom">
                <!-- <time-line class="time-wrap yes-events"></time-line>
        <img class="fly-icon" src="@/assets/images/home/fly-icon.png" alt=""> -->
                <!-- <div class="log-box yes-events">
          <chart-box class="overflow">
            <template #title-name>
              <div class="box-name" @click="handleSelectArea">果园日志</div>
            </template>
            <div class="log-content">
              2月13日，共抽样193棵树，拍摄了193张照片，{{indicatorChartData.content}}
            </div>
            <div class="chart-wrap">
              <indicator-chart :key="0 + 'log'" type="feature" :chartData="indicatorChartData"></indicator-chart>
            </div>
          </chart-box>
        </div> -->
                <!-- <div class="file-box yes-events">
                    <chart-box name="果园档案">
                        <template #title-right>
                        <el-icon class="arrow-icon cursor-pointer" color="#141414"
                            ><DArrowLeft
                        /></el-icon>
                        <div class="edit-btn cursor-pointer" @click="toFilePage">编辑</div>
                        </template>
                        <file-bar></file-bar>
                    </chart-box>
                </div> -->
                <div class="garden-file yes-events" :class="{ isShrink: isShrink }">
                    <home-file></home-file>
                    <!-- 箭头 -->
                    <div class="arrow" @click="handleShrink('bottom')">
                        <el-icon class="icon" color="#141414"><DArrowLeft /></el-icon>
                    </div>
                </div>
            </div>
            <div class="right yes-events">
                <div class="list album-r">
                    <chart-box name="农事列表" arrow="arrow-left" :class="{ 'list-wrap': rightIndex === 0 }">
                        <template v-if="rightIndex === 0">
                            <album></album>
                            <!-- <img class="tabs" src="@/assets/images/home/ns-tabs.png" alt="">
              <div class="img-box">
                <img @click="handleAct(item)" v-for="item in 2" :key="item" :src="require(`@/assets/images/home/0${act<=2&&act==item?item+'-act':item}.png`)" alt="">
              </div> -->
                        </template>
                        <template v-if="rightIndex === 1">
                            <div class="img-box1">
                                <img src="@/assets/images/home/fh01.png" alt="" />
                                <img src="@/assets/images/home/fh02.png" alt="" />
                            </div>
                        </template>
                        <template v-if="rightIndex === 2">
                            <div class="btn-wrap">
                                <div :class="{ active: btnIndex === 0 }" @click="handleBtn(0)">
                                    {{ btnIndex === 0 && btnName != "" ? "采样分区：" + btnName : "选择采样分区" }}
                                </div>
                                <div :class="{ active: btnIndex === 1 }" @click="handleBtn(1)">
                                    {{ btnIndex === 1 && btnName != "" ? "单树编号：" + btnName : "选择树" }}
                                </div>
                            </div>
                            <div class="img-box2" v-show="showPoint">
                                <img v-if="showType === 'point'" src="@/assets/images/home/line-chart.png" alt="" />
                                <img v-else src="@/assets/images/home/line-chart2.png" alt="" />
                                <img src="@/assets/images/home/fh01.png" alt="" />
                            </div>
                            <div class="img-box2" v-show="!showPoint">
                                <img v-if="showType === 'point'" src="@/assets/images/home/line-chart1.png" alt="" />
                                <img v-else src="@/assets/images/home/line-chart3.png" alt="" />
                                <img src="@/assets/images/home/fh02.png" alt="" />
                            </div>
                        </template>
                    </chart-box>
                </div>
                <tool-list direction="right" :list="rightToolList" @handleActive="handleActiveRight"></tool-list>
            </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">
                <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>
</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 weatherPage from "./components/weatherPage.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";
let store = useStore();
const components = {
    homePage,
    weatherPage,
    phenologyPage,
};
//当前农场
const currentFarm = {
    id: store.getters.userinfo.curFarmId,
    name: store.getters.userinfo.curFarmName,
};
//当前区域
const currentRegion = {
    id: null,
    name: null,
};
let homeMap = new HomeMap();
let samplePointLayer = null;
let regionLayer = null;
let blueRegionLayer = 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);
    blueRegionLayer = new BlueRegionLayer(homeMap.kmap);

    getYellow();
    // getFarmLog()

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

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


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

const blueList = ref([]);
const getBlueRegionList = (callback) => {
    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);
eventBus.off("changePointLegend", toggleLegend)
eventBus.on("changePointLegend", toggleLegend)
function toggleLegend({colorObj}) {
    legendArr.value = colorObj?.list
}
//选项卡事件监听
const handleTab = async ({ name, id, isUpdate, params, legend, colorObj }) => {
    eventBus.emit("changePointType", {legend, colorObj})
    legendArr.value = colorObj?.list
    console.log('name, id, isUpdate, params', 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;
    samplePointLayer.initData(farmId, areaId);
    if (tabId.value === 0) {
        getBlueRegionList();
    } else {
        getFarmIndexReport();
    }
}

//选项卡子项事件监听
const handleTabItem = (e) => {
    console.log('eeeeeeeeee', e, reportData.value);
    // if (reportData.value.blueZoneList) {
    //     const index = reportData.value.blueZoneList.findIndex((item) => item.key === e);
    //     let arr = [];
    //     if (reportData.value.blueZoneList.length) {
    //         arr = blueListConvert(reportData.value.blueZoneList[index].obj, index);
    //     }
    //     blueRegionLayer.initData(arr, "87");
    // }
};

const reportData = ref({});
const blueListConvert = (data, index) => {
    const list = [];
    for (let key in data) {
        const filterData = reportData.value.blueZoneLegendList[index].list.filter((item) => item.val === key);
        const arr = data[key];
        arr.forEach((item) => {
            const listObj = blueList.value.filter((ele) => ele.blueZoneCode === item);
            const updateList = listObj.map((ele) => {
                return {
                    ...ele,
                    level: key,
                    name: filterData[0].name,
                    color: filterData[0].color,
                };
            });
            list.push(...updateList);
        });
    }
    return list;
};

const getFarmIndexReport = (callback) => {
    // const params = { farmId:organId.value,regionId:regionId.value, type: tabName.value };
    //   VE_API.farm.farmIndexReport(params).then(({data,code}) => {
    //     if (code === 0) {
    //         reportData.value = data || {};
    //         let arr = []
    //         if(data.blueZoneList.length){
    //           arr = blueListConvert(data.blueZoneList[0].obj,0)
    //         }
    //         blueRegionLayer.initData(arr,'87')
    //         callback && callback()
    //     }
    // });
};

const indicatorChartData = ref({});
const blueZone = ref("ws0y1meyhxp4");

const getFarmLog = () => {
    console.log("getfarmlog");
    const params = {
        id: null,
        farmId: 766,
        blueZone: blueZone.value,
    };
    VE_API.warning.fetchFarmLog(params).then(({ data }) => {
        indicatorChartData.value = data || {};
        eventBus.emit("chart:updateOption", data);
    });
};

const urls = ref([]);
const urlsIndex = ref(0);
const getYellow = () => {
    VE_API.home.getYellowList().then((res) => {
        // urls.value = res.data.map(item =>{
        //   return {
        //     ...item,
        //     imgPath:config.base_img_url2+item.cloudFilename
        //   }
        // })
        // urls.value = [
        //   "@/assets/images/home/HB-ws0y1menggxv/HB-ws0y1menggxv2025-01-07.jpg",
        //   "@/assets/images/home/HB-ws0y1menggxv/HB-ws0y1menggxv2025-01-08.jpg",
        //   "@/assets/images/home/HB-ws0y1menggxv/HB-ws0y1menggxv2025-01-09.jpg",
        //   "@/assets/images/home/HB-ws0y1menggxv/HB-ws0y1menggxv2025-01-10.jpg",
        //   "@/assets/images/home/HB-ws0y1menggxv/HB-ws0y1menggxv2025-01-11.jpg",
        //   "@/assets/images/home/HB-ws0y1menggxv/HB-ws0y1menggxv2025-01-12.jpg",
        //   "@/assets/images/home/HB-ws0y1menggxv/HB-ws0y1menggxv2025-01-13.jpg",
        // ]
    });
};

const btnIndex = ref(null);
const btnName = ref("");
const handleBtn = (e) => {
    btnName.value = "";
    btnIndex.value = e;
    eventBus.emit("clear:area");
    samplePointLayer.updateAreaStatus(e === 0 ? true : false);
    regionLayer.resetData();
    samplePointLayer.resetPoint();
};

//点击果园日志
const handleSelectArea = () => {
    btnName.value = "";
    btnIndex.value = null;
    eventBus.emit("clear:area");
    regionLayer.resetData();
    samplePointLayer.resetPoint();
    samplePointLayer.updateAreaStatus(true);
};

//农事点击高亮
const act = ref(null);
const handleAct = (v) => {
    act.value = v;
    samplePointLayer.resetPoint();
    if (v === 1) {
        regionLayer.selectAreaMultiple([
            { value: 2, color: "blue" },
            { value: 4, color: "blue1" },
            { value: 5, color: "blue2" },
            { value: 7, color: "blue" },
            { value: 13, color: "blue2" },
        ]);
    }
    if (v === 2) {
        regionLayer.selectAreaMultiple([
            { value: 1, color: "blue" },
            { value: 2, color: "blue1" },
            { value: 9, color: "blue2" },
            { value: 12, color: "blue2" },
        ]);
    }
};

//柱状图点击事件监听
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);
});

const showPoint = ref(true);
const showType = ref("point");

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("homePage");
const handleActiveLeft = (e) => {
    currentComponent.value = e.componentName;
    if (e.title === "首页") {
        router.push("/warningHome");
    }
};
const leftToolList = [
    {
        title: "首页",
        name: "home",
        componentName: "homePage",
    },
    {
        title: "气象预警",
        componentName: "weatherPage",
    },
    {
        title: "物候调节",
        componentName: "phenologyPage",
    },
    {
        title: "病虫测报",
    },
    {
        title: "营养评估",
    },
];

const rightIndex = ref(0);
const handleActiveRight = ({ index }) => {
    rightIndex.value = index;
    btnIndex.value = null;
    btnName.value = "";
    samplePointLayer.updateAreaStatus(false);
    regionLayer.resetData();
    samplePointLayer.resetPoint();
    if (index !== 0) {
        act.value = null;
    }
};
const hanleRightIndex = (num) => {
    rightIndex.value = num;
    eventBus.emit("tool:updateAct", num);
};
const rightToolList = [
    {
        title: "农事列表",
        index: 0,
    },
    {
        title: "处方分析",
        index: 2,
    },
    {
        title: "复核对比",
        index: 1,
    },
];

// 跳转果园档案
const toFilePage = () => {
    router.push("/garden-file");
};

// 地图图例
const showMapLegend = ref(true);
const handleLegend = (e) => {
    blueRegionLayer.toggleLayer(e);
};

// 对比
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 "rigth":
            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);
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        .left,
        .right {
            width: calc(376px + 54px);
            height: 100%;
            margin-top: 10px;
            box-sizing: border-box;
            display: flex;
            position: relative;
        }
        .left {
            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;
            }
        }
        .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;
                        }
                    }
                }
            }
        }
        .overflow {
            overflow: auto;
        }
        .home-bottom {
            display: flex;
            align-items: flex-end;
            width: calc(100% - 60px - 430px * 2);
            height: 152px;
            align-self: flex-end;
            .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;
                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: 106px;
    // 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;
            }
        }
    }
}
</style>