133 lines
3.7 KiB
Vue
133 lines
3.7 KiB
Vue
<template>
|
|
<a-tooltip
|
|
placement="leftBottom"
|
|
trigger="click"
|
|
color="transparent"
|
|
:overlayInnerStyle="{ boxShadow: 'none' }"
|
|
>
|
|
<template #title>
|
|
<div class="layers-tree">
|
|
<div class="layers-tree-title">图层管理</div>
|
|
<div class="layers-tree-content">
|
|
<a-Tree
|
|
checkable
|
|
:onCheck="onCheck"
|
|
:checkedKeys="checkedKeys"
|
|
:treeData="layerConfigs"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<div class="map-item">
|
|
<i class="icon iconfont icon-layer"></i>
|
|
</div>
|
|
</a-tooltip>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { ref, onMounted, computed } from "vue";
|
|
import { useMapStore } from "@/store/modules/map";
|
|
import { useRoute } from "vue-router";
|
|
let route = useRoute();
|
|
const mapStore: any = useMapStore();
|
|
// 图层数据
|
|
const layerConfigs = computed(() => mapStore.layerData);
|
|
|
|
// 选中的图层
|
|
const checkedKeys: any = ref([]);
|
|
const onCheck = (v: any, e: any) => {
|
|
// 环保设施和环保设施在建数据获取，两者只能同时存在勾选一项
|
|
const fData = layerConfigs.value?.filter((e: any) => e.key === "facilities")?.[0];
|
|
const fbData = layerConfigs.value?.filter((e: any) => e.key === "facilities_built")?.[0];
|
|
const facilities_built_data =
|
|
(fbData && [fbData.key, ...fbData?.children?.map((e: any) => e.key)]) || [];
|
|
const facilities_data =
|
|
(fData && [fData.key, ...fData?.children?.map((e: any) => e.key)]) || [];
|
|
|
|
let checkKeys = v;
|
|
|
|
if (e?.node.key === "rare_fish_point") {
|
|
checkKeys = v?.filter((item: any) => item !== "fish_along_point");
|
|
} else if (e?.node.key === "fish_along_point") {
|
|
checkKeys = v?.filter((item: any) => item !== "rare_fish_point");
|
|
}
|
|
if (e.checked) {
|
|
if (e?.node.key === "stinfo_video_point" || e?.node.key == "stinfo") {
|
|
checkKeys = v?.filter((item: any) => item !== "stinfo_ai_video_point");
|
|
} else if (e?.node.key === "stinfo_ai_video_point") {
|
|
checkKeys = v?.filter(
|
|
(item: any) => item !== "stinfo_video_point" && item !== "stinfo"
|
|
);
|
|
}
|
|
console.log(checkKeys, "res111");
|
|
|
|
if (
|
|
checkKeys.some((e: any) => facilities_data.includes(e)) &&
|
|
checkKeys.some((e: any) => facilities_built_data.includes(e))
|
|
) {
|
|
if (
|
|
facilities_built_data.some((e: any) =>
|
|
e.includes(checkKeys[checkKeys.length - 1])
|
|
)
|
|
) {
|
|
checkKeys = checkKeys.filter((e: any) => !facilities_data.includes(e));
|
|
} else if (
|
|
facilities_data.some((e: any) => e.includes(checkKeys[checkKeys.length - 1]))
|
|
) {
|
|
checkKeys = checkKeys.filter((e: any) => !facilities_built_data.includes(e));
|
|
}
|
|
}
|
|
}
|
|
checkedKeys.value = checkKeys;
|
|
mapStore.updateLayerData(checkKeys);
|
|
};
|
|
const getCheckedKeys = () => {
|
|
const name = route.path.split("/")[2];
|
|
if (name === "shuiDianKaiFaZhuangKuang") {
|
|
checkedKeys.value = ["customBaseLayer","powerBaseStation", "eng", "eng_point"];
|
|
}
|
|
mapStore.updateLayerData(checkedKeys.value);
|
|
};
|
|
onMounted(() => {
|
|
getCheckedKeys();
|
|
// router.push({ name: 'map' })
|
|
});
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.map-item {
|
|
height: 40px;
|
|
width: 40px;
|
|
color: #000;
|
|
line-height: 40px;
|
|
text-align: center;
|
|
position: relative;
|
|
cursor: pointer;
|
|
.iconfont {
|
|
font-size: 20px;
|
|
}
|
|
&:hover {
|
|
background-color: #005292;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
.layers-tree {
|
|
width: 230px;
|
|
box-shadow: 0 1px 2px #00000026;
|
|
background-color: #fff;
|
|
cursor: initial;
|
|
border: 1px solid #ccdae7;
|
|
.layers-tree-title {
|
|
color: rgba(0, 0, 0, 0.85);
|
|
text-align: left;
|
|
padding-left: 10px;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
font-size: 16px;
|
|
border-bottom: 1px dotted #ccc;
|
|
}
|
|
.layers-tree-content {
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
}
|
|
}
|
|
</style>
|