From 14897e00a9c5332fe31c73957d85cab5462a2671 Mon Sep 17 00:00:00 2001 From: zhangjian Date: Fri, 19 Jan 2024 09:17:25 +0800 Subject: [PATCH] =?UTF-8?q?feat():=E6=96=B0=E5=A2=9E=E6=95=B0=E6=8D=AE?= =?UTF-8?q?=E6=A6=82=E8=A7=88=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/images/map/charge20.png | Bin 0 -> 1134 bytes src/assets/images/map/charge50.png | Bin 0 -> 1189 bytes src/assets/images/map/chargelow.png | Bin 0 -> 1139 bytes src/assets/images/search.png | Bin 0 -> 6977 bytes src/components/MapComponets/index.jsx | 2 +- src/config/ajax.js | 9 +- src/pages/NewEnergy/NewEnergyOverview/Map.jsx | 164 +++++++++++++++++++++ src/pages/NewEnergy/NewEnergyOverview/data.jsx | 22 +++ src/pages/NewEnergy/NewEnergyOverview/index.scss | 109 ++++++++++++++ src/pages/NewEnergy/NewEnergyOverview/loadable.jsx | 69 ++++++++- src/services/NewEnergy/dataAll.js | 13 ++ src/services/NewEnergy/index.js | 5 + 12 files changed, 383 insertions(+), 10 deletions(-) create mode 100644 src/assets/images/map/charge20.png create mode 100644 src/assets/images/map/charge50.png create mode 100644 src/assets/images/map/chargelow.png create mode 100644 src/assets/images/search.png create mode 100644 src/pages/NewEnergy/NewEnergyOverview/Map.jsx create mode 100644 src/pages/NewEnergy/NewEnergyOverview/data.jsx create mode 100644 src/pages/NewEnergy/NewEnergyOverview/index.scss create mode 100644 src/services/NewEnergy/dataAll.js diff --git a/src/assets/images/map/charge20.png b/src/assets/images/map/charge20.png new file mode 100644 index 0000000000000000000000000000000000000000..031bf54ebbf4bc71286abaf5c2aff213e2a965b5 GIT binary patch literal 1134 zcmV-!1d;oRP);&fPF)Y_yU1SNS|N{AW69;r3kgmH$3tee(FSC1QJpU|H z*~xZyX6dvw;ooe|T+aEw@BEi@&OZd0$QPUr-y?3v_+0+&JR3h9pP427|HK1fQ93?- zl2k`3I|Bs41N~gh)^nx&CjP!>nY_9Esz=K#)AIH=jC@jcKlMRv zgMav3fM8m;XbGt1S5b#rXAH-HySW$k9J>!V@M#$l0%-b8EZQ-mzuz%S!7pU4KzC>f ztX-N9HOvM0?pAjgs%mdPy9-i9vwPQEm^Z@;b?yLk`NE7GWoeh#O@}oL{JkQay%JOu zV~aVj^|Ly~?fdRQ>#qaDOF-*yTzuSL%^Q4t=I1`>VWcqc+iyOGn!3B@64?H}LovN7 zs(UavO(%c=E|%Y^vS36AqzY%#EKpTm0H0MkGVTSK1?O0B9^F+0>`)8evU^NJ+{Dry zb}}wR+65;a6SRT?{_)JgZhIIJx98!I!!i=URMRVGo}?#k!!GA|=wu6!x+V;zBO?L5 z;Mw+jPGD?UVAKnf(JIZhZLmkzEXhBp6sLYxoc_=nEb_48^lp#2#p$fVL~;7o@+qu1 zr7H-gkbHSTVfTIbB5xeO(fsn9`a@BAa>k4BHCcY6Mz%z}3n*4-DSla`WD8z%9DpQY?awYi0)Z!o$V%@YrV>EqF;B^-GJ%l*^TxfL zRULbcfM;a^93-|BFQJrtl$dv7{zR7d3l-j9MudQT{9Rt0(sh_Qq#yw(KNR|$)#SYs zm==b_a1g56!%fB2yoLKfl4OvH++Z#DGD5~BYXY+8Rl5j$GeQbLD@gfoe;S83xDIFm z#ET^dFbIT-j&0e1XB~tp7$Z=oSm3petJxCx7r3sNX;;uLnE(I)07*qoM6N<$g6HoL AmH+?% literal 0 HcmV?d00001 diff --git a/src/assets/images/map/charge50.png b/src/assets/images/map/charge50.png new file mode 100644 index 0000000000000000000000000000000000000000..68c83dd37fe70d9b9715d7a9b08b8c5764507153 GIT binary patch literal 1189 zcmV;W1X}xvP)7%Q6rP!NHfy`vL~-miPTV*#Ng7jy&`K2q1?*BTAdp(1 zw6|6f2ZRKoLh1#H0|*IG1%Xs?Kvi#m+R_UWLj56*3KUhe^bb3UYsa8w@^YmLk$2#Asee3}q$n)M_G^3yK-x zBs9T^na#g1K%!iXp>wIJNK0xey2$%EUM=NBuC`C7Wt~PHJ7(fhySNJu{55(cc_F?( za{TsPH5C`j?ijZk*wMDraPZn#aQ@?eQfgaX41h3U`Q%AGwBK?{(|aynZlv|Ht}UmZ z-ToNBqs;(fDXMp3*xqDd=yEY4a5*7x_=Y=sC!HxA)6~V#^d^SpXH&eG5`##fKWg8!8JFD z=$_BF4iW$w15Fcm6a#2|rNdy@-DM`#$i~x|)F1a_L~!CvI8JiD*w3HvrWoZlNtWkEv#l!|867%=SZ zG8y-6wp7~-NERf1xfk#K@+mt$)Kby!f+53hvzcsSl@2>q7oy??rxFmt0>x@5^ZWfa zd0g~|U?_g#PNdwtssKnNSF>LJo;Vwhk@O_nuzsY4UGXh(@|sXL0Hw<79aoisdIc+; z_ZUE)fpsrT*0D5e$EDei{}re3TyiqnlKL&0Nc*_7(jcm59Ancl8(%Q$+2@V8IF)um zB4j8q)+t1V50O^0NA>cY$K`oiI7Jz$BOdF8yLkZX+5SHOY_~>DdZvZucpm8RQJ`Ya z(wXa<&XnB)3K>_-z{uZ@*7Qcv(gbLb1sPDOr;@qQ)u&yHN?fZL0FVG24mfvYvqCe_ zXaLCJQ!(js^3CeAkds#2{gamf#4{8$gZ4TAY2dAUZ3(#(xP*R%rN`5`p{ z*uLazJKP89(8HN)q88RH&6_+G>p!k38eSD&R> zk8Sd2rOIn&fJ_+nI=Te}-&l;`t?e%Wgys7|*aJ$cW2#1*U0Ywl5 z+_uSyT9nttK;8{=j%RQdyt`_-%z${*)9?DTAppRMH>sg*v10&2L*Dn26!%ljA}9+YslOOkXPTYs!p>+5y_nYh*eVuv6KXNd&}Q7_%>J0ET+ zfYo5!`3(tw_YQVks4CDd$ckUp)yYJUa^#b@8DZ>Uz(v>&y00000NkvXXu0mjf DP%SQP literal 0 HcmV?d00001 diff --git a/src/assets/images/map/chargelow.png b/src/assets/images/map/chargelow.png new file mode 100644 index 0000000000000000000000000000000000000000..07573bc9ebccefc7ef75dd7ad2875f77286efa89 GIT binary patch literal 1139 zcmV-(1dRKMP)L+Aj_V4x8h@vhPNV2trWiD4QsCJLf>=jQ#z zXpE1>M`P5)LFbW7&4r<1RPQ`csK_%GwDG-pepg zAK4ma*0p_u=3frAutmG6aq+NnYU8o0Zp3V6}M#asD?p^|`-M9_@6ByqL=(Q9STh>4_ z9qTtnoE!`LY9B*KKjSqgIfjNLbT$6$1*hBPbG>2=m=ld~dWA(XK#$bbKz(3&GdBpo4H+66j={kVNafb}Qc{CXN*_8-Q^y%dpB7QQBA|1IyPGI%4G%*12JDdf3YpX`? z0$4WMfn`pSY`Ky@oaz9I3JpQ5%p0~G- zE&;i}8ID5-)Y{?U>Lx@Axd_W%-_;36p4F;L;DC9tD81Aq_u$}Eod551c?uunKxg2Pc-T z7@l?!5vy$Y@dc~MCk?w1|T{*8Upn?I+lyQ zUhG||_>nni1#Ii{CdN~c0y<=gLzldl0MNLDftIuf)}fz6g%&gc0f4aQ<}cxSK8gY@ zxWEmR7WHn_|Ml!)dDc*Q^%XLVmMFKN31Cw_*?Dt7OUw>v)-8NWsI-1mh8~&`5&>b) zo*27>-3Ww+s=7(jf1t!S@qLjYWU^N@qj~ zV6dLtf{Q2(Afep4KOFE8DIgNaDO`fiVMw@D`YK!kzX7WPl>u8-=%@ey002ovPDHLk FV1if~7eD|2 literal 0 HcmV?d00001 diff --git a/src/assets/images/search.png b/src/assets/images/search.png new file mode 100644 index 0000000000000000000000000000000000000000..5c3000ef5e1f819fed0468db97c3d89bedbb7143 GIT binary patch literal 6977 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 literal 0 HcmV?d00001 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
+ +
+