From e50196bff10f0196307b2567ed6c0829eadd8ff6 Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期一, 10 二月 2025 12:12:25 +0800
Subject: [PATCH] 设备显示隐藏
---
src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/LayerControl.vue | 113 +++++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 91 insertions(+), 22 deletions(-)
diff --git a/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/LayerControl.vue b/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/LayerControl.vue
index 8ea5098..fd70f7b 100644
--- a/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/LayerControl.vue
+++ b/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/LayerControl.vue
@@ -14,7 +14,6 @@
:style="layerControlCardStyle"
@mousedown="startDrag"
>
-
<el-icon class="absolute top-2 right-2 cursor-pointer z-10" @click="closePanel">
<Close />
</el-icon>
@@ -27,13 +26,31 @@
<el-tab-pane label="搴曞浘" name="components"
><div class="flex flex-col gap-2">
<el-radio-group v-model="activeSourceType" class="flex flex-col gap-2" @change="changeSourceType">
- <el-radio class="w-full mr-0" v-for="item in Object.keys(gaoDeSourceTypeMap)" :key="item" :label="parseInt(item)">
+ <el-radio class="w-full mr-0" v-for="item in layerList" :key="item" :label="item">
<span>{{ gaoDeSourceTypeMap[item] }}</span>
</el-radio>
</el-radio-group>
</div></el-tab-pane
>
- <el-tab-pane label="瑕嗙洊灞�" name="overlays">
+ <el-tab-pane label="瑕嗙洊鐗�" name="overlays">
+ <el-tree
+ class="w-full"
+ :data="treeData"
+ :props="defaultProps"
+ show-checkbox
+ node-key="id"
+ default-expand-all
+ :filter-node-method="filterNode"
+ ref="overlayTreeRef"
+ @check="handleCheck"
+ @node-click="handleNodeClick"
+ >
+ <template #default="{ node, data }">
+ <span>{{ node.label }}</span>
+ </template>
+ </el-tree>
+ </el-tab-pane>
+ <!-- <el-tab-pane label="瑕嗙洊灞�" name="overlays">
<el-tree
class="w-full"
:data="treeData"
@@ -49,7 +66,7 @@
<span>{{ node.label }}</span>
</template>
</el-tree>
- </el-tab-pane>
+ </el-tab-pane> -->
</el-tabs>
</el-card>
</div>
@@ -57,48 +74,94 @@
</template>
<script setup lang="ts">
-import { Close, Folder, FolderOpened, Search } from '@element-plus/icons-vue';
-import { onMounted, ref, watch } from 'vue';
-import { useDrag } from '/@/hooks/useDrag';
-import type { GaoDeSourceType, OLMap } from '/@/model/map/OLMap';
-import { gaoDeSourceTypeMap } from '/@/model/map/OLMap';
+import { Close } from '@element-plus/icons-vue';
import { ElTree } from 'element-plus';
+import { computed, onMounted, ref, watch } from 'vue';
+import { useDrag } from '/@/hooks/useDrag';
+import type { OLMap } from '/@/model/map/OLMap';
+import { GaoDeSourceType, gaoDeSourceTypeMap, OverlayType } from '/@/model/map/OLMap';
+import { sleep } from '/@/utils/util';
const searchText = ref('');
const activeTab = ref('components');
const treeRef = ref();
-
+const layerList = [GaoDeSourceType.Vector, GaoDeSourceType.Satellite, GaoDeSourceType.SatelliteRoad];
const props = defineProps<{
olMap: OLMap;
}>();
-
+enum ROOT_OVERLAY_TYPE {
+ Marker = 'marker',
+}
+type TreeData = {
+ id: string;
+ label: string;
+ checked?: boolean;
+ children?: TreeData[];
+};
const activeSourceType = ref(props.olMap.activeSourceType);
const changeSourceType = (val: GaoDeSourceType) => {
- props.olMap.setSourceUrl(val);
+ props.olMap.applySourceType(val);
};
const overlayTreeRef = ref<InstanceType<typeof ElTree>>();
-const treeData = [
+const treeData = ref<TreeData[]>([
{
- id: 1,
+ id: ROOT_OVERLAY_TYPE.Marker,
label: '璁惧',
- checked: props.olMap.overlayIsVisible.value,
},
-];
+]);
const initTreeChecked = () => {
- treeData.forEach((item) => {
+ treeData.value.forEach((item) => {
if (item.checked) {
overlayTreeRef.value?.setCheckedKeys([item.id]);
}
});
};
-const handleCheck = (data: any, node: any) => {
- const checkedKeys = node.checkedKeys;
- const isVisible = checkedKeys.includes(1);
- props.olMap.toggleMarkerOverlayVisible(isVisible);
+
+const setTreeChecked = (checked: boolean) => {
+ treeData.value.forEach((item) => {
+ if (checked) {
+ overlayTreeRef.value?.setCheckedKeys([ROOT_OVERLAY_TYPE.Marker]);
+ } else {
+ overlayTreeRef.value?.setCheckedKeys([]);
+ }
+ });
};
+let isHumanCheckTrigger = false;
+
+
+const handleNodeClick = (data: any, node: any) => {
+ if (data.id === ROOT_OVERLAY_TYPE.Marker) {
+ props.olMap.adjustViewToMarkers();
+ }
+};
+
+const iniTreeData = async () => {
+ await sleep(0.4);
+ const foundMarker = treeData.value.find((item) => item.id === ROOT_OVERLAY_TYPE.Marker);
+ if (!foundMarker) {
+ return;
+ }
+ foundMarker.children = props.olMap.map
+ .getOverlays()
+ .getArray()
+ .map((item) => {
+ const extData = item.get('extData');
+ return {
+ id: item.getId() as string,
+ label: extData?.name,
+ // checked: item.getVisible(),
+ };
+ });
+};
+const handleCheck = (data: any, node: any) => {
+ const checkedKeys = node.checkedKeys;
+ isHumanCheckTrigger = true;
+ const isVisible = checkedKeys.includes(ROOT_OVERLAY_TYPE.Marker);
+ props.olMap.toggleMarkerOverlayVisible(isVisible);
+};
const layerControlCard = ref<HTMLDivElement>(null);
@@ -126,8 +189,10 @@
treeRef.value?.filter(val);
});
onMounted(() => {
-
initTreeChecked();
+ // iniTreeData();
+ // window.olMap = props.olMap;
+ // window.map = props.olMap.map;
});
defineEmits(['close']);
</script>
@@ -163,4 +228,8 @@
:deep(.el-card) {
cursor: inherit;
}
+
+:deep(.el-tree-node__expand-icon.is-leaf) {
+ display: none;
+}
</style>
--
Gitblit v1.9.3