From 02f6bb5ea96f0599f1762d7f8098a66386da8a99 Mon Sep 17 00:00:00 2001 From: fandaiyang <1147379969@qq.com> Date: Tue, 4 Mar 2025 02:55:47 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E7=85=A7=E6=98=8E=E9=81=93=E8=B7=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../LightingMap/RoadList/index.less | 7 +- .../LightingMap/RoadList/index.tsx | 21 +++- .../UrbanLighting/LightingMap/index.tsx | 112 +++++++++++++++--- .../NewLeftSidebar/CityRealTimeCQI/index.tsx | 5 +- 4 files changed, 119 insertions(+), 26 deletions(-) diff --git a/src/pages/GlobalModalServices/modals/UrbanLighting/LightingMap/RoadList/index.less b/src/pages/GlobalModalServices/modals/UrbanLighting/LightingMap/RoadList/index.less index 208b46af..b8cc8543 100644 --- a/src/pages/GlobalModalServices/modals/UrbanLighting/LightingMap/RoadList/index.less +++ b/src/pages/GlobalModalServices/modals/UrbanLighting/LightingMap/RoadList/index.less @@ -73,7 +73,7 @@ .item { width: 313px; - height: 50px; + min-height: 50px; border-radius: 18px; background: rgba(67, 177, 255, 0.13); margin-bottom: 10px; @@ -101,4 +101,9 @@ padding-left: 24px; } } + + .itemActive { + border-radius: 18px; + background: rgba(67, 177, 255, 0.5); + } } diff --git a/src/pages/GlobalModalServices/modals/UrbanLighting/LightingMap/RoadList/index.tsx b/src/pages/GlobalModalServices/modals/UrbanLighting/LightingMap/RoadList/index.tsx index d41bcb80..59f1fdd4 100644 --- a/src/pages/GlobalModalServices/modals/UrbanLighting/LightingMap/RoadList/index.tsx +++ b/src/pages/GlobalModalServices/modals/UrbanLighting/LightingMap/RoadList/index.tsx @@ -5,9 +5,17 @@ import gsap from 'gsap'; import React, { useEffect, useRef, useState } from 'react'; import InfiniteScroll from 'react-infinite-scroll-component'; import styles from './index.less'; +import classNames from 'classnames'; + +interface IRoadList { + setMapRoads: (list:any) => void; + selectedRoad: any; // 所选道路 + setSelectedRoad: (data: any) => void; +} /** @name 道路列表 */ -const RoadList: React.FC = () => { +const RoadList: React.FC = (props) => { + const { setMapRoads, selectedRoad, setSelectedRoad } = props; /** 展开状态值 */ const [expandStatus, setExpandStatus] = useState(true); /** 道路列表元素 */ @@ -50,8 +58,10 @@ const RoadList: React.FC = () => { pageInfo.current = record.page; if (page === 0) { setData(record.list); + setMapRoads(record.list) } else setData((pre) => { + setMapRoads([...pre, ...record.list]) return [...pre, ...record.list]; }); } @@ -65,7 +75,6 @@ const RoadList: React.FC = () => { useEffect(() => { loadMoreData(0); }, []); - console.log(data); return (
@@ -121,9 +130,13 @@ const RoadList: React.FC = () => { return ( { - message.warning('功能未开放'); + setSelectedRoad(item) + // message.warning('功能未开放'); }} justify="space-between" align="center" diff --git a/src/pages/GlobalModalServices/modals/UrbanLighting/LightingMap/index.tsx b/src/pages/GlobalModalServices/modals/UrbanLighting/LightingMap/index.tsx index e6c64c2f..72ed3fa7 100644 --- a/src/pages/GlobalModalServices/modals/UrbanLighting/LightingMap/index.tsx +++ b/src/pages/GlobalModalServices/modals/UrbanLighting/LightingMap/index.tsx @@ -19,6 +19,10 @@ const Map: React.FC = () => { locationData: [], }); + const [roadData, setRoadData] = useState([]) + + const [selectedRoad, setSelectedRoad] = useState({}) + const tabItems = useMemo( () => [ { @@ -46,44 +50,88 @@ const Map: React.FC = () => { }); services.DataBase.getWgjzInfoData({ - typeCode: 'wg-hdwg', - data: { - industryCode: '06', - gridType: '05', - }, - }).then((res) => { - if (res.code === 0) { - const records = res.data.responsibilityGrid; - setDataSource({ - locationData: records, - }); + typeCode: 'wg-zm-wg1', + }).then(res => { + if (res) { + if (res?.length > 0) { + setDataSource({ + locationData: res, + }); + const allRoadData = res?.map(item => item.childrenGeoJson.features)?.flat() || [] + console.log('allRoadData', allRoadData) + setRoadData(allRoadData) + } } - }); + }) + + // services.DataBase.getWgjzInfoData({ + // typeCode: 'wg-hdwg', + // data: { + // industryCode: '06', + // gridType: '05', + // }, + // }).then((res) => { + // if (res.code === 0) { + // const records = res.data.responsibilityGrid; + // setDataSource({ + // locationData: records, + // }); + // } + // }); }, []); /** @description 地图渲染需要的点位数据 */ const mapData = useMemo(() => { if (dataSource.num?.length > 0 && dataSource.locationData?.length > 0) { const result = dataSource.locationData.map((v: any) => { - const points = JSON.parse(v.gridRange) as { - coordinates: [number, number][][][]; - }; + // const points = JSON.parse(v.gridRange) as { + // coordinates: [number, number][][][]; + // }; + const points = v.geoJson.features[0]?.geometry - const center = calculatePolygonCentroid(points.coordinates[0][0]); + const center = calculatePolygonCentroid(points?.coordinates[0][0]); - const num = dataSource.num.find((item) => item.name == v.gridName)?.num; + const num = dataSource.num.find((item) => item.name === v.name)?.num; return { points: points.coordinates[0][0], center, num: num, - name: v.gridName, + name: v.name, + childrenGeoJson: v.childrenGeoJson }; }); + console.log(result) return result; } return undefined; }, [dataSource]); + const mergeRoadData = async (item: any) => { + const res = await services.DataBase.getGzInfoData({ + typeCode: 'gz-dl-dlgzd', + params: { + current: 1, + size: 1000, + roadName: item.roadName + } + }) + if (res.code === 200) { + const { records } = res.data + const result = records[0] || {} + if (item.roadName === result.roadName) { + item.luxObj = result + } + } + } + + // 处理道路数据 + const handleMapRoad = async (list: any) => { + console.log(list) + // list.forEach((item: any) => { + // mergeRoadData(item) + // }) + } + return (
@@ -93,6 +141,7 @@ const Map: React.FC = () => { key={index} onClick={() => { setActiveTab(item.key); + setSelectedRoad({}) }} className={classNames(styles.tabItem, { [styles.active]: activeTab === item.key, @@ -105,7 +154,13 @@ const Map: React.FC = () => { { //道路列表 - activeTab === '2' && + activeTab === '2' && ( + setSelectedRoad(data)} + /> + ) } @@ -129,6 +184,25 @@ const Map: React.FC = () => {
+ { + activeTab === '2' && ( + <> + { + item?.childrenGeoJson?.features?.map((v: any) => { + return ( + + + ) + }) + } + + ) + } ); })} diff --git a/src/pages/NewHome/NewLeftSidebar/CityRealTimeCQI/index.tsx b/src/pages/NewHome/NewLeftSidebar/CityRealTimeCQI/index.tsx index fac3a694..bda3a9f0 100644 --- a/src/pages/NewHome/NewLeftSidebar/CityRealTimeCQI/index.tsx +++ b/src/pages/NewHome/NewLeftSidebar/CityRealTimeCQI/index.tsx @@ -2,6 +2,7 @@ import { message } from '@/layouts/messageStore'; import { useGlobalModalServices } from '@/pages/GlobalModalServices/provider'; import services from '@/services'; import { + cqiDisplay, getCqiLineChartStyles, getCqiStatusStyle, getCqiStatusTexts, @@ -104,7 +105,7 @@ const CityRealTimeCQI: React.FC = memo(() => { color: getCqiStatusStyle(cqiData?.currentIndex?.cqi)?.color, }} > - {cqiData?.currentIndex?.cqi} + {cqiDisplay(cqiData?.currentIndex?.cqi)}
{getCqiStatusTexts(cqiData?.currentIndex?.cqi)?.desc} @@ -164,7 +165,7 @@ const CityRealTimeCQI: React.FC = memo(() => { : getCqiStatusStyle(item.value)?.color, }} > - {item.value} + {cqiDisplay(item.value)}
))} -- GitLab