feat():新增数据概览页面

src/config/ajax.js

@@ -78,8 +78,11 @@ function ajax(ajaxData = {}) {
     axios[method](url, data)
       .then(res => {
         if(res?.config?.data && JSON.parse(res.config.data)?.guard){
+          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()
           window.location.replace(sysConfig.logout_url)
@@ -92,8 +95,10 @@ function ajax(ajaxData = {}) {
       })
       .catch(err => {
         if(err?.config?.data && JSON.parse(err.config.data)?.guard){
+          if(window.queryRecord[err.config.url]){
             window.queryRecord[err.config.url].ing = false
           }
+        }
         let response = err.response
         if (response) {
           switch (response.status) {

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: `
+          <div class="map-item">
+          <div class="name">${e.data.name}</div>
+          <div class="location"><img src=${mapLocation} />${e.data.location}</div>
+          <div class="pic"><img src=${e.data.pic} /></div>
+          <div class="item"><div>慢充占用</div><div>${e.data.slow_charge}</div></div>
+          <div class="item"><div>快充占用</div><div>${e.data.fast_charge}</div></div>
+          <div class="item"><div>所属厂家</div><div>${e.data.factory}</div></div>
+          </div>
+        `,
+       })
+      });
+      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 (
+    <div
+      className={`cc-map ${className}`}
+      id={"map"}
+      style={backgroundImg ? { background: `url(${backgroundImg})` } : {}}
+    >
+      <div>
+        <div id="panel"></div>
+        {hasInit ? renderChildren(map) : null}
+      </div>
+    </div>
+  );
+}
+
+export default BaseMap;

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

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;
+            }
+        }
+    }
+    
+}

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 (
-     <div>NewEnergyOverview</div>
+    <BaseMap zoom={10} data={data} centerPoint={centerPoint}  className="overview-map">
+      <div className="search">
+      <Select
+          // value={Selectq}
+          className="select-map"
+          style={{
+            width: 340,
+            height:40
+          }}
+          options={option}
+          onChange={(e) => hangChange(e)}
+        />
+        <div className="search-pic"></div>
+      </div>
+    
+      <div className="right-bottom">
+        <div className="item">空闲充电终端</div>
+        <div className="item"><div className="green"></div><div className="text">50%以下</div></div>
+        <div className="item"><div className="orange"></div><div className="text">20%-50%</div></div>
+        <div className="item"><div className="red"></div><div className="text">20%以下</div></div>
+      </div>
+      
+    </BaseMap>
   );
 }
 

src/services/NewEnergy/dataAll.js

@@ -0,0 +1,13 @@
+import ajax from "@/config/ajax";
+
+//获取电桩监控接口 ？
+const getPointAll = (params) => {
+  return ajax({
+    url: "/api/new_power/data_look/point_data",
+    type: "post",
+    data: params,
+  });
+};
+export default {
+    getPointAll
+  };

src/services/NewEnergy/index.js

@@ -3,7 +3,11 @@ import chargeStationMgm from './ChargeStationMgm'
 import realtimeMonitor from './realtimeMonitor'
 import recordsInquiry from './recordsInquiry'
 import ChargeDeviceMgm from './ChargeDeviceMgm'
+<<<<<<< Updated upstream
 import EquipmentSupplier from './EquipmentSupplier'
+=======
+import dataall from './dataall'
+>>>>>>> Stashed changes
 
 export default {
   ...chargingMgm,
@@ -12,5 +16,6 @@ export default {
   ...realtimeMonitor,
   ...chargeStationMgm,
   recordsInquiry,
+  ...dataall
 
 }