From 80c9d517ab1d3d5576c14cc5f01d57fe5976b894 Mon Sep 17 00:00:00 2001 From: Teo <2642673902@qq.com> Date: Tue, 3 Jun 2025 19:57:53 +0800 Subject: [PATCH] =?UTF-8?q?=E8=BF=9B=E5=BA=A6=E5=A1=AB=E6=8A=A5=E5=8D=95?= =?UTF-8?q?=E9=80=89=E4=BC=98=E5=8C=96,=E9=A1=B9=E7=9B=AE=E5=88=97?= =?UTF-8?q?=E8=A1=A8=E5=9C=B0=E5=9B=BE=E5=8A=9F=E8=83=BD=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/openLayersMap/index.vue | 52 ++--- src/views/progress/progressPaper/index.vue | 82 +++++-- src/views/project/project/index.vue | 16 +- ....timestamp-1748937305764-ace4a759799f1.mjs | 206 ++++++++++++++++++ 4 files changed, 301 insertions(+), 55 deletions(-) create mode 100644 vite.config.ts.timestamp-1748937305764-ace4a759799f1.mjs diff --git a/src/components/openLayersMap/index.vue b/src/components/openLayersMap/index.vue index d288bd7..fe7e39c 100644 --- a/src/components/openLayersMap/index.vue +++ b/src/components/openLayersMap/index.vue @@ -22,7 +22,7 @@

{{ item.location.name + '被选中为' + item.option }} @@ -30,35 +30,27 @@

- +
@@ -98,6 +90,7 @@ const props = defineProps({ }); const treeData = ref([]); const layerType = ref(null); +const layerTypeList = ref(['光伏板', '桩点/支架', '方阵', '逆变器', '箱变']); const contextMenu = ref(null); const selectLayer = ref([]); const treeRef = ref(); @@ -325,7 +318,7 @@ const showMenu = (event: MouseEvent, data) => { }; // 处理菜单项点击事件的方法 -const handleMenuItemClick = (option: string) => { +const handleMenuItemClick = (option: string, index: number) => { isMenuVisible.value = false; if (selectLayer.value.some((item) => item.location.name === contextMenu.value.name)) { @@ -335,14 +328,17 @@ const handleMenuItemClick = (option: string) => { if (option !== '名称' && option !== '箱变') return proxy?.$modal.msgError('只能选择一个类型'); } selectLayer.value.push({ location: contextMenu.value, option }); - console.log('selectLayer.value', selectLayer.value); + layerType.value = index ? index : layerType.value; // 设置 layerType 为对应的索引值 emit('handleCheckChange', selectLayer.value); }; //删除菜单 -const delLayer = (index) => { +const delLayer = (index, option) => { selectLayer.value.splice(index, 1); + if (option != '名称') { + if (selectLayer.value.every((item) => item.option == '名称')) layerType.value = null; + } emit('handleCheckChange', selectLayer.value); }; @@ -478,9 +474,7 @@ const addFacilities = async () => { const reset = () => { selectLayer.value = []; treeRef.value?.setCheckedKeys([]); - for (const key in layerData) { - map.removeLayer(layerData[key]); - } + sharedSource.clear(); // 清空共享 source 中的所有要素 layerType.value = null; }; diff --git a/src/views/progress/progressPaper/index.vue b/src/views/progress/progressPaper/index.vue index d8f460d..07144a1 100644 --- a/src/views/progress/progressPaper/index.vue +++ b/src/views/progress/progressPaper/index.vue @@ -1,12 +1,12 @@ @@ -45,11 +46,13 @@ import { useUserStoreHook } from '@/store/modules/user'; import { getProjectSquare, listProgressCategory, addDaily, workScheduleListPosition } from '@/api/progress/plan'; import { ProgressCategoryVO, progressPlanDetailForm } from '@/api/progress/plan/types'; import { Circle, Fill, Stroke, Style, Text } from 'ol/style'; +import { defaults as defaultInteractions } from 'ol/interaction'; import Feature from 'ol/Feature'; import { Point, Polygon } from 'ol/geom'; import VectorSource from 'ol/source/Vector'; import VectorLayer from 'ol/layer/Vector'; import Node from 'element-plus/es/components/tree/src/model/node.mjs'; +import { ElCheckbox } from 'element-plus'; const { proxy } = getCurrentInstance() as ComponentInternalInstance; // 获取用户 store @@ -96,20 +99,14 @@ const handleSelect = (projectId: string) => { /** 进度类别树选中事件 */ const handleCheckChange = (data: any, checked: boolean, indeterminate: boolean) => { const node: Node | undefined = treeRef.value?.getNode(data.id); - if (node && node.level === 3) { - console.log('第三级节点被选中:', data, '选中状态:', checked); - } - if (!node || node.level !== 3 || !checked) return; + if (!checked) return (submitForm.value.id = ''); // 只处理第三级节点的选中事件 const parent = node.parent; if (!parent) return; - - // 遍历兄弟节点，取消选中除当前节点之外的其他第三级节点 - parent.childNodes.forEach((sibling: Node) => { - if (sibling !== node) { - treeRef.value.setChecked(sibling.data.id, false, false); - } - }); + //消除所有节点的选中状态 + treeRef.value.setCheckedKeys([], false); + // 设置当前点击项为选中 + treeRef.value.setChecked(data.id, true, false); submitForm.value.id = data.id; // 设置提交表单的id }; @@ -172,9 +169,20 @@ const loadNode = async (node: any, resolve: (data: any[]) => void) => { /** 提交按钮点击事件 */ const submit = () => { console.log('sunbmitForm', submitForm.value); + const { finishedDetailIdList, id } = submitForm.value; + if (!id || finishedDetailIdList.length === 0) return proxy?.$modal.msgWarning('请选择图层以及日期'); + loading.value = true; addDaily(submitForm.value) .then(() => { proxy?.$modal.msgSuccess('提交成功'); + const scale = Math.max(map.getView().getZoom() / 10, 1); // 获取当前缩放比例 + sharedSource.getFeatures().forEach((feature) => { + if (feature.get('highlighted')) { + feature.setStyle(successStyle(feature.get('name'), scale)); // 转为成功样式 + feature.set('highlighted', false); // 重置高亮状态 + feature.set('status', '2'); // 设置为完成状态 + } + }); resetTreeAndMap(); }) .catch((error) => { @@ -186,6 +194,8 @@ const submit = () => { const resetTreeAndMap = () => { // 重置树形结构选中状态 treeRef.value?.setCheckedKeys([]); + //取消加载状态 + loading.value = false; // 清除地图上的所有高亮 const scale = Math.max(map.getView().getZoom() / 10, 1); // 获取当前缩放比例 sharedSource.getFeatures().forEach((feature) => { @@ -205,6 +215,22 @@ const handleChange = (value: number) => { getList(); }; +//限定部分节点能选择 +const renderContent = (context, { node }) => { + if (node.level === 3) { + return h('span', { class: 'custom-tree-node' }, [ + h(ElCheckbox, { + modelValue: node.checked, + 'onUpdate:modelValue': (val) => node.setChecked(val), + style: 'margin-right: 8px;margin-left: -20px;' + }), + h('span', node.label) + ]); + } else { + return h('span', node.label); + } +}; + //切换项目重置方阵 const resetMatrix = () => { matrixValue.value = undefined; @@ -271,26 +297,29 @@ const initOLMap = () => { zoom: false, rotate: false, attribution: false + }), + interactions: defaultInteractions({ + doubleClickZoom: false // 禁用双击缩放 }) }); map.on('click', (e: any) => { const zoom = map.getView().getZoom(); const scale = Math.max(zoom / 10, 1); // 缩放比例，根据需要调整公式 map.forEachFeatureAtPixel(e.pixel, (feature: Feature) => { - if (feature.get('status') === '2') return; // 如果是完成状态，直接返回 - const isHighlighted = feature.get('highlighted') === true; const geomType = feature.getGeometry().getType(); + if (feature.get('status') === '2' || geomType != 'Polygon') return; // 如果是完成状态，直接返回 + + const isHighlighted = feature.get('highlighted') === true; + if (isHighlighted) { feature.setStyle(defaultStyle(feature.get('name'), scale)); // 清除高亮样式 feature.set('highlighted', false); submitForm.value.finishedDetailIdList = submitForm.value.finishedDetailIdList.filter((id) => id !== feature.get('id')); // 从已完成列表中移除 return; } - if (geomType === 'Polygon') { - feature.setStyle(highlightStyle(feature.get('name'), scale)); - feature.set('highlighted', true); - submitForm.value.finishedDetailIdList.push(feature.get('id')); // 添加到已完成列表 - } + feature.setStyle(highlightStyle(feature.get('name'), scale)); + feature.set('highlighted', true); + submitForm.value.finishedDetailIdList.push(feature.get('id')); // 添加到已完成列表 }); }); map.getView().on('change:resolution', () => { @@ -455,10 +484,13 @@ onMounted(() => { z-index: 1; } .header { - height: 90px; + height: 70px; width: 100%; position: absolute; z-index: 2; + background: rgba(255, 255, 255, 0.2); /* 半透明白色 */ + backdrop-filter: blur(10px); /* 背景模糊 */ + -webkit-backdrop-filter: blur(10px); /* 兼容 Safari */ } .aside { position: absolute; @@ -476,4 +508,8 @@ onMounted(() => { right: 70px; z-index: 3; } +.custom-tree-node { + display: flex; + align-items: center; +} diff --git a/src/views/project/project/index.vue b/src/views/project/project/index.vue index bbe66fa..13b3afb 100644 --- a/src/views/project/project/index.vue +++ b/src/views/project/project/index.vue @@ -45,7 +45,17 @@ - + + +