diff --git a/src/assets/images/location.png b/src/assets/images/location.png index 064c05034a28571a91968c270482f9d2494c66c0..c678a7c66feed9b6d70aae9626b51c929d4c718a 100644 Binary files a/src/assets/images/location.png and b/src/assets/images/location.png differ diff --git a/src/pages/GlobalModalServices/modals/PipelinePassage/PipeMap/index.less b/src/pages/GlobalModalServices/modals/PipelinePassage/PipeMap/index.less index 6ab7db41055e2ef4390c025fe6304f44741e0f87..04c1b037a24d37c9655674bf4404b9f09044f32e 100644 --- a/src/pages/GlobalModalServices/modals/PipelinePassage/PipeMap/index.less +++ b/src/pages/GlobalModalServices/modals/PipelinePassage/PipeMap/index.less @@ -3,7 +3,6 @@ width: 1346px; height: 723px; border-radius: 20px; - overflow: hidden; // position: relative; .mapTitle { @@ -166,7 +165,7 @@ margin-bottom: 8px; background: rgba(67, 177, 255, 0.08); border-radius: 18px; - overflow: hidden; + // overflow: hidden; .listItem { display: flex; @@ -233,41 +232,33 @@ margin-bottom: 12px; } - .layerGroup { - display: flex; - flex-direction: column; - gap: 12px; - } + :global { + .ant-tree { + background: transparent; + color: #CBEDFF; - .layerItem { - .subLayers { - margin-left: 12px; - margin-top: 8px; - display: flex; - flex-direction: column; - gap: 8px; - - .subLayerImg{ - width: 14px; - height: 16px; + .ant-tree-switcher { + display: none !important; // 添加此属性，隐藏展开/折叠按钮 } - } - .subLayer { - display: flex; - align-items: center; - gap: 8px; - color: rgb(203, 227, 240); - font-size: 16px; - font-weight: 400; - line-height: 21px; + .ant-tree-node-content-wrapper { + color: #CBEDFF; + } + + .ant-tree-checkbox { + .ant-tree-checkbox-inner { + background-color: transparent; + border-color: #CBEDFF; + } + } - .dot { - width: 8px; - height: 8px; - border-radius: 50%; + .ant-tree-checkbox-checked { + .ant-tree-checkbox-inner { + background-color: #1890ff; + border-color: #1890ff; + } } - } + } } } } @@ -383,4 +374,22 @@ } } +.subLayer { + display: flex; + align-items: center; + gap: 8px; + cursor: pointer; + + .dot { + width: 18px; + height: 18px; + border-radius: 50%; + } + + .subLayerImg { + width: 14px; + height: 16px; + } +} + diff --git a/src/pages/GlobalModalServices/modals/PipelinePassage/PipeMap/index.tsx b/src/pages/GlobalModalServices/modals/PipelinePassage/PipeMap/index.tsx index e2cd3e725f8fb937a3fff9fca19a93adc05b0b44..4e95f8778a7a91bbe5aabf1dc9bd76a192797877 100644 --- a/src/pages/GlobalModalServices/modals/PipelinePassage/PipeMap/index.tsx +++ b/src/pages/GlobalModalServices/modals/PipelinePassage/PipeMap/index.tsx @@ -1,6 +1,6 @@ import CooglMap from '@/components/CooglMap'; import services from '@/services'; -import { Checkbox, } from 'antd'; +import { Checkbox, Tree } from 'antd'; import React, { useEffect, useRef, useState } from 'react'; import locationIcon from '@/assets/images/location.png'; import pipeMapDetail from '@/assets/images/pipe-map-detail.png'; @@ -11,6 +11,7 @@ import pipeMapCenter1 from '@/assets/images/pipe-map-center-1.png'; import pipeMapCenter2 from '@/assets/images/pipe-map-center-2.png'; import styles from './index.less'; import type { TabsProps } from 'antd'; +import type { DataNode } from 'antd/es/tree'; // 添加类型定义 interface PipelineType { @@ -35,6 +36,110 @@ const Map: React.FC = () => { // 修改默认展开状态为空数组（都收起） const [expandedTypes, setExpandedTypes] = useState([]); + // 修改状态结构，记录每个类型的显示状态 + // const [selectedSubLayers, setSelectedSubLayers] = useState>({ + // '干线': true, + // '支线': true, + // '小型': true, + // '缆线': true + // }); + + // 修改为使用 Tree 的选中状态管理 + const [checkedKeys, setCheckedKeys] = useState([ + 'pipeline', 'monitor', 'pipeline-干线', 'pipeline-支线', 'pipeline-小型', 'pipeline-缆线' + ]); + + // 将管廊数据按类型分组 + const groupedPipelines = pipelineData.reduce((acc: any, cur: any) => { + const type = cur.lx || '其他'; + if (!acc[type]) { + acc[type] = []; + } + acc[type].push({ + id: cur.id, + name: cur.mc, + ...cur + }); + return acc; + }, {}); + + // 修改 pipelineTypes 的定义，添加数量显示 + const pipelineTypes: PipelineType[] = [ + { + type: '干线', + name: '干线', + items: groupedPipelines['干线'] || [], + expanded: expandedTypes.includes('干线'), + count: groupedPipelines['干线']?.length || 0 + }, + { + type: '支线', + name: '支线', + items: groupedPipelines['支线'] || [], + expanded: expandedTypes.includes('支线'), + count: groupedPipelines['支线']?.length || 0 + }, + { + type: '小型', + name: '小型', + items: groupedPipelines['小型'] || [], + expanded: expandedTypes.includes('小型'), + count: groupedPipelines['小型']?.length || 0 + }, + { + type: '缆线', + name: '缆线', + items: groupedPipelines['缆线'] || [], + expanded: expandedTypes.includes('缆线'), + count: groupedPipelines['缆线']?.length || 0 + } + ]; + + // 构建 Tree 的数据结构 + const treeData: DataNode[] = [ + { + title: '管廊', + key: 'pipeline', + children: pipelineTypes.map(type => ({ + title: ( +
+ + {type.name} +
+ ), + key: `pipeline-${type.type}`, + })), + }, + { + title: '监控中心', + key: 'monitor', + children: [ + { + title: ( +
+ + 总控中心 +
+ ), + key: 'monitor-总控', + }, + { + title: ( +
+ + 分控中心 +
+ ), + key: 'monitor-分控', + }, + ], + }, + ]; + // 获取管廊基本信息 const getPipelineData = async (lx?: string) => { try { @@ -109,7 +214,6 @@ const Map: React.FC = () => { getPipelineData(); getPipelineCoords(); }, []); - // 绘制管廊路线 const drawPipelines = () => { @@ -122,16 +226,44 @@ const Map: React.FC = () => { if (!item.processedCoordinates?.length) return; // 使用CooglMap的Polyline组件绘制线 - return ( - handlePipelineClick(item)} - /> - ); + // return ( + // handlePipelineClick(item)} + // /> + // ); + return drawPipelinesFromCoord(item); }); }; + + // 绘制管廊路线 + const drawPipelinesFromCoord = (item: any) => { + + // 找到对应的管廊基本信息 + const pipelineInfo = pipelineData.find(p => p.mc === item.gridName); + const type = pipelineInfo?.lx; + + // 只渲染有类型且类型被选中的线路 + if (!type || !checkedKeys.includes(`pipeline-${type}`)) { + return null; + } + + return ( + handlePipelineClick(item)} + /> + ); + }; // 监听选中图层变化时重新绘制 useEffect(() => { @@ -181,15 +313,53 @@ const Map: React.FC = () => { } }; - // 处理图层切换 - const handleLayerChange = (values: string[]) => { - setSelectedLayers(values); - }; + // 处理子图层选择变化 + // const handleSubLayerChange = (type: string, checked: boolean) => { + // setSelectedSubLayers(prev => ({ + // ...prev, + // [type]: checked + // })); + + // // 根据类型筛选显示管廊 + // if (mapRef.current) { + // pipelineCoords.forEach((item: any) => { + // const layerName = `pipeline-${item.id}`; + // const layer = mapRef.current.getLayer(layerName); + // if (layer && item.lx === type) { + // layer.setVisible(checked); + // } + // }); + // } + // }; + + // 处理一级图层选择变化 + // const handleLayerChange = (checkedValues: string[]) => { + // setSelectedLayers(checkedValues); + + // // 如果取消选中管廊，则隐藏所有子图层 + // if (!checkedValues.includes('pipeline')) { + // setSelectedSubLayers(prev => + // Object.keys(prev).reduce((acc, key) => ({ + // ...acc, + // [key]: false + // }), {}) + // ); + // } + // // 如果选中管廊，则显示所有子图层 + // else if (checkedValues.includes('pipeline')) { + // setSelectedSubLayers(prev => + // Object.keys(prev).reduce((acc, key) => ({ + // ...acc, + // [key]: true + // }), {}) + // ); + // } + // }; // 处理图例点击 - const handleLegendClick = (type: string) => { - getPipelineData(type); - }; + // const handleLegendClick = (type: string) => { + // getPipelineData(type); + // }; // 处理详情点击 const handleDetailClick = (item: any) => { @@ -203,52 +373,6 @@ const Map: React.FC = () => { // TODO: 打开详情弹窗 }; - // 将管廊数据按类型分组 - const groupedPipelines = pipelineData.reduce((acc: any, cur: any) => { - const type = cur.lx || '其他'; - if (!acc[type]) { - acc[type] = []; - } - acc[type].push({ - id: cur.id, - name: cur.mc, - ...cur - }); - return acc; - }, {}); - - // 修改 pipelineTypes 的定义，添加数量显示 - const pipelineTypes: PipelineType[] = [ - { - type: '干线', - name: '干线', - items: groupedPipelines['干线'] || [], - expanded: expandedTypes.includes('干线'), - count: groupedPipelines['干线']?.length || 0 - }, - { - type: '支线', - name: '支线', - items: groupedPipelines['支线'] || [], - expanded: expandedTypes.includes('支线'), - count: groupedPipelines['支线']?.length || 0 - }, - { - type: '小型', - name: '小型', - items: groupedPipelines['小型'] || [], - expanded: expandedTypes.includes('小型'), - count: groupedPipelines['小型']?.length || 0 - }, - { - type: '缆线', - name: '缆线', - items: groupedPipelines['缆线'] || [], - expanded: expandedTypes.includes('缆线'), - count: groupedPipelines['缆线']?.length || 0 - } - ]; - // 处理类型展开/收起 const toggleTypeExpand = (type: string) => { setExpandedTypes(prev => @@ -282,12 +406,59 @@ const Map: React.FC = () => { handleLocationClick(item); }; + // 处理 Tree 选中变化 + const onCheck = (checked: any) => { + // console.log('==>checked', checked); + + // 如果取消选中管廊总图层，同时取消所有子图层 + if (selectedLayers.includes('pipeline') && !checked.includes('pipeline')) { + const newChecked = checked.filter((key: string) => !key.startsWith('pipeline')); + setCheckedKeys(newChecked); + setSelectedLayers(newChecked); + return; + } + + // 如果选中管廊总图层，同时选中所有子图层 + if (!selectedLayers.includes('pipeline') && checked.includes('pipeline')) { + const allPipelineKeys = pipelineTypes.map(type => `pipeline-${type.type}`); + setCheckedKeys([...checked, ...allPipelineKeys]); + setSelectedLayers(checked.filter((key: string) => !key.includes('-'))); + return; + } + + // 正常更新选中状态 + setCheckedKeys(checked); + setSelectedLayers(checked.filter((key: string) => !key.includes('-'))); + }; + + // 过滤需要显示的管廊数据 + const filteredPipelineCoords = pipelineCoords.filter(item => { + // 首先检查是否选中了管廊图层 + if (!selectedLayers.includes('pipeline')) return false; + + // 找到对应的管廊基本信息来获取类型 + const pipelineInfo = pipelineData.find(p => p.mc === item.gridName); + const type = pipelineInfo?.lx; + + // 检查该类型是否被选中 + const typeKey = `pipeline-${type}`; + // console.log('==>item', { + // gridName: item.gridName, + // type, + // typeKey, + // isChecked: checkedKeys.includes(typeKey), + // checkedKeys + // }); + + // 只有当类型存在且该类型被选中时才显示 + return type && checkedKeys.includes(typeKey); + }); + return (
@@ -295,30 +466,56 @@ const Map: React.FC = () => {
管廊分布
{/* 管廊路线图层 */} - {selectedLayers.includes('pipeline') && pipelineCoords?.map((item: any, index: number) => { - if (!item?.processedCoordinates?.length) return null; - + {filteredPipelineCoords.map((item: any) => { // 找到对应的管廊基本信息 - const pipelineInfo = pipelineData.find(p => p.mc === item.gridName); - const type = pipelineInfo?.lx; - // const type = pipelineInfo?.lx || '其他'; + // const pipelineInfo = pipelineData.find(p => p.mc === item.gridName); + // const type = pipelineInfo?.lx; - // 根据类型设置不同颜色 - const color = type === '干线' ? '#AD6BFF' : - type === '支线' ? '#FDFFC6' : - type === '小型' ? '#6FDCFF' : '#4874FF'; - - return ( - handlePipelineClick(item)} - /> - ); + // // 只渲染有类型且类型被选中的线路 + // if (!type || !checkedKeys.includes(`pipeline-${type}`)) { + // return null; + // } + + // return ( + // handlePipelineClick(item)} + // /> + // ); + return drawPipelinesFromCoord(item); })} + {/* 监控中心图层 */} + {selectedLayers.includes('monitor') && ( + <> + {/* {checkedKeys.includes('monitor-总控') && ( + + )} + {checkedKeys.includes('monitor-分控') && ( + + )} */} + + )} + {/* 选中管廊的信息展示 */} {selectedPipeline && ( { {/* 图层控制 */}
图层图例
- -
-
- 管廊 -
- {pipelineTypes.map(type => ( -
handleLegendClick(type.type)} - style={{ cursor: 'pointer' }} - > - - {type.name} -
- ))} -
-
-
- 监控中心 -
-
- - 总控中心 -
-
- - 分控中心 -
-
-
-
- + onCheck(checked.checked)} + // onCheck={checked => onCheck(checked.checked)} + treeData={treeData} + defaultExpandAll + // showLine={false} // 添加此属性，隐藏展开/折叠按钮 + // switcherIcon={
} // 添加此属性，隐藏展开/折叠按钮 -- 自定义树节点的展开/折叠图标（带有默认 rotate 角度样式） + />
{/* 右侧列表 */}