diff --git a/src/assets/images/map/charge20.png b/src/assets/images/map/charge20.png new file mode 100644 index 0000000..031bf54 Binary files /dev/null and b/src/assets/images/map/charge20.png differ diff --git a/src/assets/images/map/charge50.png b/src/assets/images/map/charge50.png new file mode 100644 index 0000000..68c83dd Binary files /dev/null and b/src/assets/images/map/charge50.png differ diff --git a/src/assets/images/map/chargelow.png b/src/assets/images/map/chargelow.png new file mode 100644 index 0000000..07573bc Binary files /dev/null and b/src/assets/images/map/chargelow.png differ diff --git a/src/assets/images/search.png b/src/assets/images/search.png new file mode 100644 index 0000000..5c3000e Binary files /dev/null and b/src/assets/images/search.png differ diff --git a/src/components/MapComponets/index.jsx b/src/components/MapComponets/index.jsx index 7169125..91bda0d 100644 --- a/src/components/MapComponets/index.jsx +++ b/src/components/MapComponets/index.jsx @@ -18,4 +18,4 @@ export { Reat, AMap, ParkViewCirMar, -}; +}; \ No newline at end of file diff --git a/src/config/ajax.js b/src/config/ajax.js index e348cb2..4ef8ea7 100644 --- a/src/config/ajax.js +++ b/src/config/ajax.js @@ -78,7 +78,10 @@ function ajax(ajaxData = {}) { axios[method](url, data) .then(res => { if(res?.config?.data && JSON.parse(res.config.data)?.guard){ - window.queryRecord[res.config.url].ing = false + if(window.queryRecord[res.config.url]){ + window.queryRecord[res.config.url].ing = false + } + } if (res.data.status === 30009 || res.data.status === 40006 || res.data.status === 40005 ) { removeToken() @@ -92,7 +95,9 @@ function ajax(ajaxData = {}) { }) .catch(err => { if(err?.config?.data && JSON.parse(err.config.data)?.guard){ - window.queryRecord[err.config.url].ing = false + if(window.queryRecord[err.config.url]){ + window.queryRecord[err.config.url].ing = false + } } let response = err.response if (response) { diff --git a/src/pages/NewEnergy/NewEnergyOverview/Map.jsx b/src/pages/NewEnergy/NewEnergyOverview/Map.jsx new file mode 100644 index 0000000..84a7091 --- /dev/null +++ b/src/pages/NewEnergy/NewEnergyOverview/Map.jsx @@ -0,0 +1,164 @@ +import React, { useState, useEffect, useRef } from "react"; +import { EnvironmentOutlined, SearchOutlined } from "@ant-design/icons"; +import mgreen from "@/assets/images/equip/home/mark_green.png"; +import Charge50 from "@/assets/images/map/charge50.png" +import Charge20 from "@/assets/images/map/charge20.png" +import Chargelow from "@/assets/images/map/chargelow.png" +import mapLocation from '@/assets/images/map/map-location.png' + +import citys from './data' +import ajax from "@/services"; +function BaseMap(props) { + const { + className = "", + zoom, // 地图初始化缩放等级 + backgroundImg, // 地图背景图片 + onClick = () => { }, + setPointData=()=>{},//传给父组件点位 + data=[], + centerPoint=[], + + } = props; + + const mapConfig = { + center: sysConfig.map.center, + zoom: sysConfig.map.zoom, + zooms: sysConfig.map.zooms, + maxZoom: sysConfig.map.zooms[1], + minZoom: sysConfig.map.zooms[0], + mapTileHost: sysConfig.map.mapTileHost, + zoomOffset: sysConfig.map.zoomOffset, + mapTileType: sysConfig.map.mapTileType, + }; + + const [map, setMap] = useState(null); + const mapRef = useRef(map); + mapRef.current = map; + const [hasInit, setHasInit] = useState(false); // 地图是否已经创建 + let style = [{ + url: Charge50, + anchor: new AMap.Pixel(22, 22), + size: new AMap.Size(44, 44) + }, { + url: Charge20, + anchor: new AMap.Pixel(22, 22), + size: new AMap.Size(44, 44) + }, { + url: Chargelow, + anchor: new AMap.Pixel(22, 22), + size: new AMap.Size(44, 44) + } + ]; + + + const initMap = () => { + let _map = new AMap.Map("map", { + mapStyle: "amap://styles/grey", //设置地图的显示样式 + // mapStyle: "amap://styles/blue", //设置地图的显示样式 + // viewMode: "3D", //设置地图模式 + // pitch: 45, + // Label: "#fff", + + zoom: zoom ? zoom : mapConfig.zoom, //初始化地图层级 + center: new AMap.LngLat(mapConfig.center[1], mapConfig.center[0]), //初始化地图中心点 + }); + + + setMap(_map); + if (onClick) { + _map.on("click", function (info) { + onClick(info); + + }); + } + mapRef.current = map; + setHasInit(true); + }; + + + const renderChildren = (map) => { + return React.Children.map(props.children, (child) => { + if (child) { + const cType = child.type; + /* 针对下面两种组件不注入地图相关属性 + * 1. 明确声明不需要注入的 + * 2. DOM 元素 + */ + if (cType.preventAmap || typeof cType === "string") { + return child; + } + return React.cloneElement(child, { + __map__: map, + }); + } + return child; + }); + }; + + useEffect(() => { + initMap(); + + return () => { + // mapRef.current.remove(); + }; + }, []); + + useEffect(() => { + if (map&&data.length!=0) { + var mass = new AMap.MassMarks(data, { + opacity: 0.8, + zIndex: 111, + cursor: 'pointer', + style: style + }); + var marker = new AMap.Marker({ content: ' ', map: map }); + console.log(mass); + mass.on('mouseover', function (e) { + + marker.setPosition(e.data.lnglat); + marker.setLabel({ + content: ` +
+
${e.data.name}
+
${e.data.location}
+
+
慢充占用
${e.data.slow_charge}
+
快充占用
${e.data.fast_charge}
+
所属厂家
${e.data.factory}
+
+ `, + }) + }); + mass.on('mouseout', function (e) { + + marker.setPosition(e.data.lnglat); + marker.setLabel() + }); + mass.setMap(map); + //这里经纬度需要注意，data里面的lnglat数据格式不知道为什么给改了 + map.setZoomAndCenter(15, [data[0].lnglat.lng,data[0].lnglat.lat]) + + + } + }, [map,data]); + //设置中心点 + useEffect(()=>{ + if(centerPoint.length!=0){ + map.setZoomAndCenter(15, centerPoint) + } + },[centerPoint]) + return ( +
+
+
+ {hasInit ? renderChildren(map) : null} +
+
+ ); +} + +export default BaseMap; diff --git a/src/pages/NewEnergy/NewEnergyOverview/data.jsx b/src/pages/NewEnergy/NewEnergyOverview/data.jsx new file mode 100644 index 0000000..6cff79c --- /dev/null +++ b/src/pages/NewEnergy/NewEnergyOverview/data.jsx @@ -0,0 +1,22 @@ +let citys = [{ + "lnglat": [116.258446, 37.686622], + "name": "景县", + "style": 2 +}, { + "lnglat": [113.559954, 22.124049], + "name": "圣方济各堂区", + "style": 2 +}, { + "lnglat": [116.366794, 39.915309], + "name": "西城区", + "style": 2 +}, { + "lnglat": [116.486409, 39.921489], + "name": "朝阳区", + "style": 2 +}, { + "lnglat": [116.286968, 39.863642], + "name": "丰台区", + "style": 2 +}, ] +export default citys \ No newline at end of file diff --git a/src/pages/NewEnergy/NewEnergyOverview/index.scss b/src/pages/NewEnergy/NewEnergyOverview/index.scss new file mode 100644 index 0000000..37aebc9 --- /dev/null +++ b/src/pages/NewEnergy/NewEnergyOverview/index.scss @@ -0,0 +1,109 @@ +.overview-map{ + .search{ + .select-map{ + position: absolute; + z-index: 1001; + background-color:#303950 ; + top: 20px; + left: 20px; + border-radius: 20px; + .ant-select-selector{ + height: 40px; + border:0px; + .ant-select-selection-item{ + padding-top: 4px; + } + } + .ant-select-arrow{ + display: none; + } + + } + .search-pic{ + background-image: url("../../../assets/images/search.png"); + width: 30px; + height: 30px; + background-repeat: no-repeat; + background-size: 100% 100%; + z-index: 1002; + position: absolute; + left: 310px; + top: 25px; + } + } + .right-bottom{ + padding: 20px; + width: 168px; + height:175px; + background: #303950; + border-radius: 4px; + position: absolute; + right: 20px; + bottom: 20px; + z-index: 1001; + font-size: 14px; + font-family: Microsoft YaHei, Microsoft YaHei-Regular; + .item{ + margin-bottom: 15px; + display: flex; + .green{ + margin-right: 15px; + width: 32px; + height: 19px; + background: #2adc41; + border-radius: 4px; + } + .orange{ + margin-right: 15px; + width: 32px; + height: 19px; + background: #f9bc2f; + border-radius: 4px; + } + .red{ + margin-right: 15px; + width: 32px; + height: 19px; + background: #ec5761; + border-radius: 4px; + } + } + } + + .amap-marker-label{ + background: linear-gradient(180deg,#1e283c, #293144); + border: #1e283c; + top: 55px !important; + left: -155px !important; + .map-item{ + color: #fff; + padding: 20px; + width: 340px; + height: 360px; + .name{ + margin-bottom:8px; + } + .location{ + margin-bottom:3px; + img{ + width: 23px; + } + } + .pic{ + margin-bottom: 10px; + img{ + width: 300px; + height: 168px; + } + } + .item{ + padding:10px 0px; + border-bottom: 1px solid#EEEFF1; + opacity: 0.7; + display: flex; + justify-content: space-between; + } + } + } + +} diff --git a/src/pages/NewEnergy/NewEnergyOverview/loadable.jsx b/src/pages/NewEnergy/NewEnergyOverview/loadable.jsx index 1ed6bc7..cf90ca0 100644 --- a/src/pages/NewEnergy/NewEnergyOverview/loadable.jsx +++ b/src/pages/NewEnergy/NewEnergyOverview/loadable.jsx @@ -1,16 +1,71 @@ import React, { useState, useRef, useEffect } from "react"; -import { message, Pagination, Table, Space, Modal, Button,DatePicker } from "antd"; -// import { dictionary, utils } from "@/config/common"; +import { message,Select, Pagination, Input, Table, Space, Modal, Button, DatePicker } from "antd"; import moment from 'moment' -// import { useSessionStorageState, useUpdateEffect, useSize, useUpdate } from 'ahooks'; import ajax from "@/services"; -// import "./index.scss"; -// import errorImg from "@/assets/images/layout/error.png" -// import { useLocation } from "react-router-dom"; +import BaseMap from "./Map" +import "./index.scss"; +const { Search } = Input; function NewEnergyOverview() { + const [data, setData] = useState([]) + const [option,setOption]=useState([]) + //中心点经纬度 + const [centerPoint,setCenterPoint]=useState([]) + const hangChange=(e)=>{ + console.log(e); + let arr=[JSON.parse(e).lng,JSON.parse(e).lat] + setCenterPoint(arr) + } + //点位数据 + const getPointData=()=>{ + ajax.getPointAll().then((res) => { + if (res.status === 20000) { + setData(res.data) + }else{ + message.error(res.message) + } + }); + } + useEffect(()=>{ + getPointData() + },[]) + useEffect(()=>{ + if(data.length!=0){ + //处理data数据 + let arr=data.map((item)=>{ + return { + label:item.name, + value:JSON.stringify(item.lnglat) + } + }) + setOption(arr) + } + },[data]) + return ( -
NewEnergyOverview
+ +
+