feat(): 新增分析大屏

src/components/MapComponets/BaseMap/index.jsx

@@ -1,21 +1,21 @@
-import React, { useState, useEffect, useRef } from "react"
-import L from "leaflet"
-import "leaflet/dist/leaflet.css"
-import "../js/BoundaryCanvas.js"
-import "leaflet.chinatmsproviders"
-import "./index.scss"
-import { useSelector } from "react-redux"
-const isDevelopment = process.env.NODE_ENV === "development"
+import React, { useState, useEffect, useRef } from "react";
+import L from "leaflet";
+import "leaflet/dist/leaflet.css";
+import "../js/BoundaryCanvas.js";
+import "leaflet.chinatmsproviders";
+import "./index.scss";
+import { useSelector } from "react-redux";
+const isDevelopment = process.env.NODE_ENV === "development";
 
 function BaseMap(props) {
-  const skin = useSelector((state) => state.common.skin)
+  const skin = useSelector((state) => state.common.skin);
   const {
     id = "map",
     scrollZoom = true,
     zoom, // 地图初始化缩放等级
     backgroundImg, // 地图背景图片
-    onClick
-  } = props
+    onClick = () => {},
+  } = props;
 
   const mapConfig = {
     center: sysConfig.map.center,
@@ -26,134 +26,151 @@ function BaseMap(props) {
     mapTileHost: sysConfig.map.mapTileHost,
     zoomOffset: sysConfig.map.zoomOffset,
     mapTileType: sysConfig.map.mapTileType,
-  }
-  console.log( sysConfig.map);
-  let mapTileType  = mapConfig.mapTileType
-  let mapLayer = {}
-  if (mapTileType === 'pgis') {
-    mapLayer = new L.TileLayer('{mapTileHost}/Maps/{mapName}/EzMap?Service=getImage&Type=RGB&ZoomOffset=0&Col={x}&Row={y}&Zoom={z}&V=1.0.0', {
-      minZoom: mapConfig.zooms[0],
-      maxZoom: mapConfig.zooms[1],
-      subdomains: [0, 1, 2],
-      tileSize: 256,
-      zoomOffset: mapConfig.zoomOffset,
-      dragging: true,
-      mapTileHost:mapConfig.mapTileHost,
-      mapName: mapConfig.mapName
-    })
-  } else if (mapTileType === 'custom') {
-    mapLayer = new L.TileLayer('{mapTileHost}/tmap-tile/{z}/{x}/{y}.png', {
-      maxZoom: mapConfig.zooms[1],
-      minZoom: mapConfig.zooms[0],
-      mapTileHost:mapConfig.mapTileHost,
-    })
-  } else if (mapTileType === 'test') {
-    mapLayer = new L.TileLayer('http://www.sdmap.gov.cn/tileservice/SDPubMap?layer=sdvec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fpng&TileMatrix={z}&TileCol={x}&TileRow={y}', {
-      minZoom: mapConfig.zooms[0],
-      maxZoom: mapConfig.zooms[1],
-      subdomains: [0, 1, 2],
-      tileSize: 256,
-      zoomOffset: mapConfig.zoomOffset,
-      dragging: true,
-      mapTileHost:mapConfig.mapTileHost,
-      mapName: mapConfig.mapName
-    })
-  
-  } else if (mapTileType === 'tianditu') {
-    mapLayer = new L.TileLayer('{mapTileHost}&layer=vec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}', {
-      minZoom: mapConfig.zooms[0],
+  };
+  console.log(sysConfig.map);
+  let mapTileType = mapConfig.mapTileType;
+  let mapLayer = {};
+  if (mapTileType === "pgis") {
+    mapLayer = new L.TileLayer(
+      "{mapTileHost}/Maps/{mapName}/EzMap?Service=getImage&Type=RGB&ZoomOffset=0&Col={x}&Row={y}&Zoom={z}&V=1.0.0",
+      {
+        minZoom: mapConfig.zooms[0],
+        maxZoom: mapConfig.zooms[1],
+        subdomains: [0, 1, 2],
+        tileSize: 256,
+        zoomOffset: mapConfig.zoomOffset,
+        dragging: true,
+        mapTileHost: mapConfig.mapTileHost,
+        mapName: mapConfig.mapName,
+      }
+    );
+  } else if (mapTileType === "custom") {
+    mapLayer = new L.TileLayer("{mapTileHost}/tmap-tile/{z}/{x}/{y}.png", {
       maxZoom: mapConfig.zooms[1],
-      subdomains: [0, 1, 2],
-      tileSize: 256,
-      zoomOffset: mapConfig.zoomOffset,
-      dragging: true,
-      mapTileHost:mapConfig.mapTileHost,
-      mapName: mapConfig.mapName
-    })
-    textLayer = new L.TileLayer('http://t0.tianditu.gov.cn/cva_w/wmts?layer=cva&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=e5e59e67c525c4879d9af763ac00aace', {
       minZoom: mapConfig.zooms[0],
-      maxZoom: mapConfig.zooms[1],
-      subdomains: [0, 1, 2],
-      tileSize: 256,
-      zoomOffset: mapConfig.zoomOffset,
-      dragging: true,
-      mapTileHost: 'http://t0.tianditu.gov.cn/cva_w/wmts?tk=e5e59e67c525c4879d9af763ac00aace',
-      mapName: mapConfig.mapName
-    })
+      mapTileHost: mapConfig.mapTileHost,
+    });
+  } else if (mapTileType === "test") {
+    mapLayer = new L.TileLayer(
+      "http://www.sdmap.gov.cn/tileservice/SDPubMap?layer=sdvec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fpng&TileMatrix={z}&TileCol={x}&TileRow={y}",
+      {
+        minZoom: mapConfig.zooms[0],
+        maxZoom: mapConfig.zooms[1],
+        subdomains: [0, 1, 2],
+        tileSize: 256,
+        zoomOffset: mapConfig.zoomOffset,
+        dragging: true,
+        mapTileHost: mapConfig.mapTileHost,
+        mapName: mapConfig.mapName,
+      }
+    );
+  } else if (mapTileType === "tianditu") {
+    mapLayer = new L.TileLayer(
+      "{mapTileHost}&layer=vec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}",
+      {
+        minZoom: mapConfig.zooms[0],
+        maxZoom: mapConfig.zooms[1],
+        subdomains: [0, 1, 2],
+        tileSize: 256,
+        zoomOffset: mapConfig.zoomOffset,
+        dragging: true,
+        mapTileHost: mapConfig.mapTileHost,
+        mapName: mapConfig.mapName,
+      }
+    );
+    textLayer = new L.TileLayer(
+      "http://t0.tianditu.gov.cn/cva_w/wmts?layer=cva&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=e5e59e67c525c4879d9af763ac00aace",
+      {
+        minZoom: mapConfig.zooms[0],
+        maxZoom: mapConfig.zooms[1],
+        subdomains: [0, 1, 2],
+        tileSize: 256,
+        zoomOffset: mapConfig.zoomOffset,
+        dragging: true,
+        mapTileHost:
+          "http://t0.tianditu.gov.cn/cva_w/wmts?tk=e5e59e67c525c4879d9af763ac00aace",
+        mapName: mapConfig.mapName,
+      }
+    );
   } else {
-    mapLayer =  L.tileLayer('{mapTileHost}/v3/tile?z={z}&x={x}&y={y}', {
+    mapLayer = L.tileLayer("{mapTileHost}/v3/tile?z={z}&x={x}&y={y}", {
       maxZoom: mapConfig.zooms[1],
       minZoom: mapConfig.zooms[0],
-      zoomOffset: mapConfig.zoomOffset  || 0,
-      mapTileHost: mapConfig.mapTileHost
-    })
+      zoomOffset: mapConfig.zoomOffset || 0,
+      mapTileHost: mapConfig.mapTileHost,
+    });
   }
 
-  const [map, setMap] = useState(null)
-  const mapRef = useRef(map)
-  mapRef.current = map
-  const [hasInit, setHasInit] = useState(false) // 地图是否已经创建
+  const [map, setMap] = useState(null);
+  const mapRef = useRef(map);
+  mapRef.current = map;
+  const [hasInit, setHasInit] = useState(false); // 地图是否已经创建
   // const [mapLayer, setMapLayer] = useState(null)
 
   const initMap = () => {
     let _map = L.map(id, {
       attributionControl: false,
       zoomControl: false,
-      crs:L.CRS.EPSG3857,
-    }).setView([mapConfig.center[0], mapConfig.center[1]], zoom ? zoom : mapConfig.zoom)
-    setMap(_map)
-    _map.on('click', function(info) {
-      onClick(info)
-    })
-    mapLayer.addTo(_map)
+      crs: L.CRS.EPSG3857,
+    }).setView(
+      [mapConfig.center[0], mapConfig.center[1]],
+      zoom ? zoom : mapConfig.zoom
+    );
+    setMap(_map);
+    if (onClick) {
+      _map.on("click", function (info) {
+        onClick(info);
+      });
+    }
+
+    mapLayer.addTo(_map);
     // setMapLayer(mapLayer)
-    mapRef.current = map
-    setHasInit(true)
-  }
+    mapRef.current = map;
+    setHasInit(true);
+  };
 
   const renderChildren = (map) => {
     return React.Children.map(props.children, (child) => {
       if (child) {
-        const cType = child.type
+        const cType = child.type;
         /* 针对下面两种组件不注入地图相关属性
          * 1. 明确声明不需要注入的
          * 2. DOM 元素
          */
         if (cType.preventAmap || typeof cType === "string") {
-          return child
+          return child;
         }
         return React.cloneElement(child, {
           __map__: map,
-        })
+        });
       }
-      return child
-    })
-  }
+      return child;
+    });
+  };
 
   useEffect(() => {
-    initMap()
-   
+    initMap();
 
     return () => {
-      mapRef.current.remove()
-    }
-  }, [])
+      mapRef.current.remove();
+    };
+  }, []);
 
   useEffect(() => {
-    if(hasInit) {
+    if (hasInit) {
       // changeMap(skin)
     }
-  }, [skin])
+  }, [skin]);
 
   useEffect(() => {
     if (map) {
       if (scrollZoom) {
-        map.scrollWheelZoom.enable()
+        map.scrollWheelZoom.enable();
       } else {
-        map.scrollWheelZoom.disable()
+        map.scrollWheelZoom.disable();
       }
     }
-  }, [scrollZoom])
+  }, [scrollZoom]);
 
   return (
     <div
@@ -163,7 +180,7 @@ function BaseMap(props) {
     >
       <div>{hasInit ? renderChildren(map) : null}</div>
     </div>
-  )
+  );
 }
 
-export default BaseMap
+export default BaseMap;

src/components/MapComponets/MarkCenter/index.jsx

@@ -0,0 +1,47 @@
+import React, { useState, useEffect, useRef } from "react";
+import L from "leaflet";
+import "leaflet/dist/leaflet.css";
+// import "leaflet-canvas-marker"
+import "../js/leaflet.canvas-markers";
+// import "./index.scss";
+import Rerm from "../Marker/default-marker2.png";
+
+function Markers(props) {
+  const map = props.__map__;
+  const {
+    data = {},
+    iconSize = [30, 40], // 点位图片大小
+    iconAnchor = [11, 11], // 图片偏移量
+  } = props;
+  const [Marker, setMarker] = useState(null);
+  useEffect(() => {
+    if (data.lng) {
+      addMarker(data);
+    }
+  }, [data]);
+  const addMarker = (data) => {
+    if (Marker) {
+      map.removeLayer(Marker);
+    }
+    let marker = L.marker([data.lat, data.lng], {
+      icon: L.icon({
+        iconUrl: Rerm,
+        iconSize,
+        iconAnchor,
+      }),
+    })
+      .addTo(map)
+      .bindTooltip(`<span>${data.name}</span>`, {
+        offset: [20, -5],
+        direction: "right",
+      });
+    setMarker(marker);
+    setTimeout(() => {
+      map.setView([data.lat, data.lng]);
+    }, 800);
+  };
+
+  return null;
+}
+
+export default Markers;

src/components/MapComponets/ParkingViewMarkers/index.jsx

@@ -0,0 +1,189 @@
+import React, { useState, useEffect, useRef } from "react";
+import L from "leaflet";
+import "leaflet/dist/leaflet.css";
+// import "leaflet-canvas-marker"
+import "../js/leaflet.canvas-markers";
+import "./index.scss";
+import mgreen from "@/assets/images/equip/home/mark_green.png";
+import mgred from "@/assets/images/equip/home/mark_red.png";
+import mgyellow from "@/assets/images/equip/home/mark_yellow.png";
+
+function Markers(props) {
+  const map = props.__map__;
+  const {
+    data = [],
+    iconSize = [30, 40], // 点位图片大小
+    iconAnchor = [15, 20], // 图片偏移量
+    tooltipKey = "name", // 提示信息的key
+    // contentCb, // 生成弹窗显示内容方法事件
+    clickCb, // 点击事件
+  } = props;
+  const [massLayer, setMassLayer] = useState(null); // 海量点图层
+  const massLayerRef = useRef(massLayer);
+  massLayerRef.current = massLayer;
+  const [massObj, setMassObj] = useState({}); // 海量点对象
+  const massObjRef = useRef();
+  massObjRef.current = massObj;
+  //   const imgurls = (val) => {
+
+  // }
+  useEffect(() => {
+    return () => {
+      if (map && massLayerRef.current) {
+        if (massLayerRef.current._latlngMarkers) {
+          // 判断是否有点位存在
+          massLayerRef.current.clearLayers(); // 清除点位图层
+        }
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    if (map && !massLayer) {
+      let _massLayer = L.canvasIconLayer({}); // 创建海量点图层
+      setMassLayer(_massLayer);
+      _massLayer.addTo(map);
+      if (data.length) {
+        let _mass = handleLocation(data); // 处理点位数据
+        addMarker(_mass, _massLayer); // 添加点位
+      }
+    }
+  }, [map]);
+
+  useEffect(() => {
+    if (massLayerRef.current) {
+      if (massLayerRef.current._latlngMarkers) {
+        // 判断是否有点位存在
+        massLayerRef.current.clearLayers(); // 清除点位图层
+        massLayerRef.current._onClickListeners = []; // 清除监听事件
+      }
+      if (data.length) {
+        let _mass = handleLocation(data); // 处理点位数据
+        addMarker(_mass, massLayerRef.current); // 添加点位
+      }
+    }
+  }, [data]);
+
+  const handleLocation = (arr = []) => {
+    if (!Array.isArray(arr)) {
+      console.log("传值必须为数组");
+      return false;
+    }
+    let object = {};
+    for (let i = 0; i < arr.length; i++) {
+      let elem = arr[i];
+      if (!parseFloat(elem.latitude) || !parseFloat(elem.longitude)) {
+        // 经纬度必须有
+        continue;
+      }
+      let typeKey = "type_" + elem.type;
+      if (object.hasOwnProperty(typeKey)) {
+        object[typeKey].nodes.push({
+          lnglat: [parseFloat(elem.lat), parseFloat(elem.lng)],
+          name: elem.text,
+          style: 0,
+          locationId: elem.id,
+          type: elem.type,
+          action: elem.action,
+          data: elem,
+        });
+      } else {
+        object[typeKey] = {
+          type: elem.type,
+          iconStyle: [
+            L.icon({
+              iconUrl:
+                elem.type == 1 ? mgred : elem.type == 3 ? mgreen : mgyellow,
+              iconSize: iconSize,
+              iconAnchor: iconAnchor,
+            }),
+          ],
+          nodes: [
+            {
+              lnglat: [parseFloat(elem.lat), parseFloat(elem.lng)],
+              name: elem.text,
+              style: 0,
+              locationId: elem.id,
+              type: elem.type,
+              action: elem.action,
+              data: elem,
+            },
+          ],
+        };
+      }
+    }
+    setMassObj(object);
+    return object;
+  };
+
+  const addMarker = (markerArr, _massLayer) => {
+    for (let [key, value] of Object.entries(markerArr)) {
+      if (!value.hasOwnProperty("massMarkers")) {
+        value.massMarkers = [];
+        value.nodes.forEach((elem) => {
+          let marker = L.marker([elem.lnglat[0], elem.lnglat[1]], {
+            icon: value.iconStyle[0],
+          });
+          marker.data = elem;
+          value.massMarkers.push(marker);
+          marker.bindTooltip(`<span>${elem[tooltipKey]}</span>`, {
+            offset: [20, -5],
+            direction: "right",
+          });
+        });
+        _massLayer.addLayers(value.massMarkers);
+      } else {
+        _massLayer.addLayers(value.massMarkers);
+      }
+    }
+    _massLayer._onClickListeners = [];
+    if (clickCb) {
+      _massLayer.addOnClickListener(function (e, data) {
+        if (data.length == "1") {
+          let elem = data[0].data.data.data;
+          clickCb(elem);
+        } else {
+          map.openPopup(renderMarkerList(data), e.latlng, {
+            className: "markers-list-box",
+          });
+          let dom = document.querySelectorAll(".marker-list-item");
+          dom.forEach((elem) => {
+            elem.addEventListener("click", function (e) {
+              map.closePopup();
+              let type = e.target.dataset.type,
+                id = e.target.dataset.id;
+              let marker = massObjRef.current["type_" + type].nodes.filter(
+                (i) => i.locationId == id
+              )[0];
+              let elem = marker.data;
+              clickCb(elem);
+            });
+          });
+        }
+      });
+    }
+    let markers = [];
+    for (let [key, value] of Object.entries(markerArr)) {
+      markers = [...markers, ...value.massMarkers];
+    }
+  };
+
+  const renderMarkerList = (data) => {
+    let template = `<div class="marker-list-content">
+      <div class="marker-list-header">请选择点位</div>
+      <div class="marker-list">
+    `;
+    data.forEach((elem) => {
+      let _data = elem.data.data;
+      if (_data.name && _data.locationId) {
+        template += `<div class="marker-list-item" data-type="${_data.type}" data-id="${_data.locationId}" title="${_data.name}">${_data.name}</div>`;
+      }
+    });
+    template += `</div></div>`;
+    return template;
+  };
+
+  return null;
+}
+
+export default Markers;

src/components/MapComponets/ParkingViewMarkers/index.scss

@@ -0,0 +1,71 @@
+.markers-list-box {
+  width: 300px !important;
+  .leaflet-popup-content-wrapper {
+    padding: 0;
+    border-radius: 0;
+    color: #ccddff;
+    background: #172c4d !important;
+  }
+  .leaflet-popup-content {
+    margin: 0;
+    width: 100% !important;
+  }
+  .leaflet-popup-tip-container {
+    .leaflet-popup-tip {
+      background: #172c4d;
+    }
+  }
+  .leaflet-popup-close-button {
+    display: none;
+  }
+  .marker-list-content {
+    .marker-list-header {
+      height: 32px;
+      line-height: 32px;
+      vertical-align: middle;
+      padding: 0 10px;
+      font-size: 14px;
+      font-weight: bold;
+      letter-spacing: 1px;
+      width: 100%;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+    .marker-list {
+      padding: 10px;
+      color: var(--color-text);
+      max-height: 200px;
+      overflow-y: auto;
+      overflow-x: hidden;
+      &::-webkit-scrollbar-track-piece {
+        background-color: transparent;
+        border-radius: 8px;
+      }
+      &::-webkit-scrollbar {
+        width: 8px;
+        height: 8px;
+      }
+      &::-webkit-scrollbar-thumb {
+        background-clip: padding-box;
+        border-radius: 8px;
+        min-height: 28px;
+      }
+      .marker-list-item {
+        width: 100%;
+        height: 24px;
+        line-height: 24px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        cursor: pointer;
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+}
+.construction-polygon {
+  font-size: 14px;
+}

src/components/MapComponets/index.jsx

@@ -1,11 +1,15 @@
-import BaseMap from "./BaseMap"
-import BaseGaodeMap from "./BaseGaodeMap"
-import Markers from "./Markers"
-import Marker from "./Marker"
+import BaseMap from "./BaseMap";
+import BaseGaodeMap from "./BaseGaodeMap";
+import Markers from "./Markers";
+import Marker from "./Marker";
+import ParkingViewMarkers from "./ParkingViewMarkers";
+import MarkCenter from "./MarkCenter";
 
 export {
   BaseMap,
   BaseGaodeMap,
   Markers,
-  Marker
-}
+  Marker,
+  MarkCenter,
+  ParkingViewMarkers,
+};

src/pages/DataAnalysisPrediction/MemberStat/ParkingAly/index.scss

@@ -404,6 +404,9 @@ $color-primary : var(--color-primary);
       background: var(--color-user-list-bg);
       box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.12);
       border-radius: 28px 0 0 0;
+      overflow-y: scroll;
+      // position: relative;
+      @include scrollBar(var(--color-user-list-bg), #3B97FF);
 
       .result-box {
         color: #ffffff;
@@ -475,9 +478,7 @@ $color-primary : var(--color-primary);
 
       .scrplltab {
         width: 100%;
-        overflow-x: scroll;
-        // position: relative;
-        @include scrollBar(var(--color-user-list-bg), #3B97FF);
+
 
         .poxi {
           cursor: pointer;

src/pages/DataAnalysisPrediction/MemberStat/ParkingAly/loadable.jsx

@@ -26,13 +26,10 @@ function ParkingAly() {
   //页面检索-重复
   const formdata = {
     operator_id: "0", //商户
-    park_type: "", //车场类型  1=路内 2=路外
+    data_source: "", //车场类型  1=路内 2=路外
     date_type: "1",
-    is_excel: 0,
-    start_time: moment().startOf("day").format("YYYY-MM-DD"),
-    end_time: moment().endOf("day").format("YYYY-MM-DD"),
-    pn: 1,
-    page_size: dictionary?.pageSizeOptions1[0],
+    start_date: moment().startOf("day").format("YYYY-MM-DD"),
+    end_date: moment().endOf("day").format("YYYY-MM-DD"),
   };
   const col = [
     {
@@ -43,20 +40,20 @@ function ParkingAly() {
     },
     {
       title: "会员停车次数(次)",
-      dataIndex: "date",
-      key: "date",
+      dataIndex: "member_count",
+      key: "member_count",
       align: "center",
     },
     {
       title: "非会员停车次数(次)",
-      dataIndex: "date",
-      key: "date",
+      dataIndex: "un_member_count",
+      key: "un_member_count",
       align: "center",
     },
     {
       title: "会员停车占比",
-      dataIndex: "date",
-      key: "date",
+      dataIndex: "ratio",
+      key: "ratio",
       align: "center",
     },
   ];
@@ -159,11 +156,29 @@ function ParkingAly() {
     setFormData({
       ...FormData,
       date_type: e,
-      start_time: start,
-      end_time: end,
+      start_date: start,
+      end_date: end,
     });
   };
-
+  //数据上传
+  const DateFormt = (e) => {
+    let start = "";
+    let end = "";
+    if (e == 4) {
+      start = moment(FormData.start_date).startOf("year").format("YYYY-MM-DD");
+      end = moment(FormData.end_date).endOf("year").format("YYYY-MM-DD");
+    } else if (e == 3) {
+      start = moment(FormData.start_date).startOf("month").format("YYYY-MM-DD");
+      end = moment(FormData.end_date).endOf("month").format("YYYY-MM-DD");
+    } else {
+      start = FormData.start_date;
+      end = FormData.end_date;
+    }
+    return {
+      start_date: start,
+      end_date: end,
+    };
+  };
   //页码
   function onShowSizeChange(pn, page_size) {
     let temFormData = {};
@@ -228,54 +243,17 @@ function ParkingAly() {
       }
     );
   };
-  const filterad = (dates, data, name) => {
-    const areaData = data.filter((item) => item.type === name);
-    const arr = dates.map((item) => {
-      for (const { pay_date, income } of areaData) {
-        console.log(pay_date, income);
-        if (pay_date === item) return income;
-      }
-      return 0;
-    });
-    return arr;
-  };
   const getRevenueOption = (
     data = [
       {
-        income: 4,
-        // area: "1",
-        pay_date: "2023-08-21",
-        type: "非会员停车次数",
-      },
-      {
-        income: 14,
-        // area: "1",
-        pay_date: "2023-08-21",
-        type: "会员停车次数",
-      },
-      {
-        income: 12,
-        // area: "2",
-        pay_date: "2023-08-19",
-        type: "会员停车次数",
-      },
-      {
-        income: 40,
-        // area: "1",
-        pay_date: "2023-08-25",
-        type: "非会员停车次数",
+        date: moment().startOf("day").format("YYYY-MM-DD"),
+        member_count: 0,
+        un_member_count: 0,
       },
     ]
   ) => {
-    // 获取所有地区名称
-    data.sort((a, b) => {
-      return new Date(a.pay_date) - new Date(b.pay_date);
-    });
-    const areaNames = [...new Set(data.map((item) => item.type))];
     // 获取所有日期
-    const dates = [...new Set(data.map((item) => item.pay_date))].sort(
-      (a, b) => a.pay_date - b.pay_date
-    );
+    const dates = [...new Set(data.map((item) => item.date))];
     // 构建X轴数据
     const xAxisData = dates.map((date) => {
       return {
@@ -320,7 +298,7 @@ function ParkingAly() {
         type: "scroll",
         top: 0,
         left: "center",
-        data: areaNames,
+        data: ["非会员停车次数", "会员停车次数"],
         itemWidth: 18,
         itemHeight: 12,
         width: "40%",
@@ -373,12 +351,12 @@ function ParkingAly() {
         {
           name: "非会员停车次数",
           type: "line",
-          data: filterad(dates, data, "非会员停车次数"),
+          data: data.map((ele) => ele.un_member_count),
         },
         {
           name: "会员停车次数",
           type: "line",
-          data: filterad(dates, data, "会员停车次数"),
+          data: data.map((ele) => ele.member_count),
         },
       ],
       grid: {
@@ -392,16 +370,17 @@ function ParkingAly() {
   //获取页面显示数据
   const getData = (data) => {
     setLoading(false);
-    ajax.ElectInvoice.getOperationReport({
+    ajax.ElectInvoice.getParking({
       ...data,
-      area: data?.area?.length ? data?.area[data.area.length - 1] : "",
+      ...DateFormt(data.date_type),
     }).then(
       (res) => {
         if (parseInt(res?.status) === 20000) {
           setData({
-            data: res?.data?.list || [],
-            total: res?.total || 0,
+            data: res?.data || [],
+            total: res?.data.length || 0,
           });
+          getRevenueOption(res?.data);
           setLoading(true);
         } else {
           message.error(res?.message);
@@ -416,7 +395,7 @@ function ParkingAly() {
   };
   useEffect(() => {
     sessionStorage.setItem("FormData_ParkingAly", JSON.stringify(FormDatas));
-    // getData(FormDatas);
+    getData(FormDatas);
     //调用接口
   }, [FormDatas]);
   useEffect(() => {
@@ -453,7 +432,7 @@ function ParkingAly() {
             <span className="lab">车场类型</span>
             <div className="inputs">
               <Select
-                value={FormData.park_type}
+                value={FormData.data_source}
                 style={{
                   width: "100%",
                 }}
@@ -475,7 +454,7 @@ function ParkingAly() {
                 onChange={(e) =>
                   setFormData({
                     ...FormData,
-                    park_type: e,
+                    data_source: e,
                   })
                 }
               />
@@ -504,10 +483,6 @@ function ParkingAly() {
                       value: "3",
                       label: "月",
                     },
-                    {
-                      value: "4",
-                      label: "年",
-                    },
                   ]}
                   onChange={(e) => SetTimeNow(e)}
                 />
@@ -520,33 +495,33 @@ function ParkingAly() {
                 format={TimeChange().mat}
                 picker={TimeChange().str}
                 allowClear={false}
-                value={FormData.start_time ? moment(FormData.start_time) : null}
+                value={FormData.start_date ? moment(FormData.start_date) : null}
                 onChange={(date, dateString) => {
                   if (TimeChange().str == "week") {
                     setFormData({
                       ...FormData,
-                      start_time: date
+                      start_date: date
                         ? moment(date).day(1).format("YYYY-MM-DD")
                         : null,
                     });
                   } else if (TimeChange().str == "day") {
-                    if (date > moment(FormData.end_time)) {
+                    if (date > moment(FormData.end_date)) {
                       setFormData({
                         ...FormData,
-                        end_time: dateString,
-                        start_time: FormData.end_time,
+                        end_date: dateString,
+                        start_date: FormData.end_date,
                       });
                     } else {
                       setFormData({
                         ...FormData,
-                        start_time: dateString,
+                        start_date: dateString,
                       });
                     }
                   } else {
-                    setFormData({ ...FormData, start_time: dateString });
+                    setFormData({ ...FormData, start_date: dateString });
                   }
                 }}
-                disabledDate={(current) => current > moment(FormData.end_time)}
+                disabledDate={(current) => current > moment(FormData.end_date)}
               />
             </div>
           </div>
@@ -559,34 +534,34 @@ function ParkingAly() {
                 format={TimeChange().mat}
                 picker={TimeChange().str}
                 allowClear={false}
-                value={FormData.end_time ? moment(FormData.end_time) : null}
+                value={FormData.end_date ? moment(FormData.end_date) : null}
                 onChange={(date, dateString) => {
                   if (TimeChange().str == "week") {
                     setFormData({
                       ...FormData,
-                      end_time: date
+                      end_date: date
                         ? moment(date).day(7).format("YYYY-MM-DD")
                         : null,
                     });
                   } else if (TimeChange().str == "day") {
-                    if (date < moment(FormData.start_time)) {
+                    if (date < moment(FormData.start_date)) {
                       setFormData({
                         ...FormData,
-                        start_time: dateString,
-                        end_time: FormData.start_time,
+                        start_date: dateString,
+                        end_date: FormData.start_date,
                       });
                     } else {
                       setFormData({
                         ...FormData,
-                        end_time: dateString,
+                        end_date: dateString,
                       });
                     }
                   } else {
-                    setFormData({ ...FormData, end_time: dateString });
+                    setFormData({ ...FormData, end_date: dateString });
                   }
                 }}
                 disabledDate={(current) =>
-                  current < moment(FormData.start_time)
+                  current < moment(FormData.start_date)
                 }
               />
             </div>
@@ -608,11 +583,9 @@ function ParkingAly() {
                 var fortm = FormData;
                 setFormData({
                   ...fortm,
-                  pn: 1,
                 });
                 setFormDatas({
                   ...fortm,
-                  pn: 1,
                 });
               }}
             >
@@ -662,15 +635,11 @@ function ParkingAly() {
                   rowKey={(record) => record.id}
                   dataSource={Data.data}
                   pagination={false}
-                  scroll={{
-                    // x: 1300,
-                    y: "calc(100vh - 720px)",
-                  }}
                 />
               </div>
             </div>
 
-            <div>
+            {/* <div>
               <Pagination
                 className="pagination-common"
                 showSizeChanger={true}
@@ -683,7 +652,7 @@ function ParkingAly() {
                 onChange={onShowSizeChange}
                 onShowSizeChange={onShowSizeChange}
               />
-            </div>
+            </div> */}
           </ResultFlow>
         </div>
       </div>

src/pages/DataAnalysisPrediction/MemberStat/PayAly/index.scss

@@ -405,7 +405,8 @@ $color-primary : var(--color-primary);
       background: var(--color-user-list-bg);
       box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.12);
       border-radius: 28px 0 0 0;
-@include scrollBar(var(--color-user-list-bg), #3B97FF);
+      @include scrollBar(var(--color-user-list-bg), #3B97FF);
+
       .parkinglive-box {
         display: flex;
 
@@ -423,6 +424,10 @@ $color-primary : var(--color-primary);
             text-align: left;
             margin: 18px 0 18px 18px;
             display: inline-block;
+
+            span {
+              cursor: pointer;
+            }
           }
 
           i {

src/pages/DataAnalysisPrediction/MemberStat/PayAly/loadable.jsx

@@ -23,55 +23,52 @@ import "./index.scss";
 function PayAly() {
   const formdata = {
     operator_id: "0", //商户
-    park_type: "", //车场类型  1=路内 2=路外
+    data_source: "", //车场类型  1=路内 2=路外
     date_type: "1",
-    is_excel: 0,
-    start_time: moment().startOf("day").format("YYYY-MM-DD"),
-    end_time: moment().endOf("day").format("YYYY-MM-DD"),
-    pn: 1,
-    page_size: dictionary?.pageSizeOptions1[0],
+    start_date: moment().startOf("day").format("YYYY-MM-DD"),
+    end_date: moment().endOf("day").format("YYYY-MM-DD"),
   };
   const col = [
     {
       title: "日期",
-      dataIndex: "date",
-      key: "date",
+      dataIndex: "analyse_date",
+      key: "analyse_date",
       align: "center",
     },
     {
-      title: "线上支付订单(元)",
-      dataIndex: "date",
-      key: "date",
+      title: "线上支付订单(个)",
+      dataIndex: "all_online_count",
+      key: "all_online_count",
       align: "center",
     },
     {
       title: "线上支付金额(元)",
-      dataIndex: "date",
-      key: "date",
+      dataIndex: "all_online_amount",
+      key: "all_online_amount",
       align: "center",
     },
     {
-      title: "线下支付订单(元)",
-      dataIndex: "date",
-      key: "date",
+      title: "线下支付订单(个)",
+      dataIndex: "all_offline_count",
+      key: "all_offline_count",
       align: "center",
     },
     {
       title: "线下支付金额(元)",
-      dataIndex: "date",
-      key: "date",
+      dataIndex: "all_offline_amount",
+      key: "all_offline_amount",
       align: "center",
     },
     {
       title: "订单实收金额(元)",
-      dataIndex: "date",
-      key: "date",
+      dataIndex: "all_amount",
+      key: "all_amount",
       align: "center",
     },
     {
       title: "期间订单实收金额(元)",
-      dataIndex: "date",
-      key: "date",
+      dataIndex: "should_amount",
+      key: "should_amount",
       align: "center",
     },
   ];
@@ -90,14 +87,15 @@ function PayAly() {
   const [Data, setData] = useState({
     data: [],
     total: 0,
+    list: {},
   });
 
   const [ringData, setRingData] = useState({});
   const [lingData, setLingData] = useState({});
   const [revenueData, setRevenueData] = useState({});
-
-  //获取区域
-  const [Area, setArea] = useState([]);
+  //金额和订单切换
+  const [Vipo, setVipo] = useState("1");
+  const [Vipt, setVipt] = useState("1");
   //商户
   const [Yunying, setYunying] = useState([]);
   //自动填充
@@ -171,11 +169,29 @@ function PayAly() {
     setFormData({
       ...FormData,
       date_type: e,
-      start_time: start,
-      end_time: end,
+      start_date: start,
+      end_date: end,
     });
   };
-
+  //数据上传
+  const DateFormt = (e) => {
+    let start = "";
+    let end = "";
+    if (e == 4) {
+      start = moment(FormData.start_date).startOf("year").format("YYYY-MM-DD");
+      end = moment(FormData.end_date).endOf("year").format("YYYY-MM-DD");
+    } else if (e == 3) {
+      start = moment(FormData.start_date).startOf("month").format("YYYY-MM-DD");
+      end = moment(FormData.end_date).endOf("month").format("YYYY-MM-DD");
+    } else {
+      start = FormData.start_date;
+      end = FormData.end_date;
+    }
+    return {
+      start_date: start,
+      end_date: end,
+    };
+  };
   //页码
   function onShowSizeChange(pn, page_size) {
     let temFormData = {};
@@ -240,73 +256,96 @@ function PayAly() {
       }
     );
   };
-  const filterad = (dates, data, name) => {
-    const areaData = data.filter((item) => item.type === name);
-    const arr = dates.map((item) => {
-      for (const { pay_date, income } of areaData) {
-        console.log(pay_date, income);
-        if (pay_date === item) return income;
-      }
-      return 0;
+  const FilterLine = (data, dates, str) => {
+    let aee = [];
+    dates.forEach((ele) => {
+      data.forEach((val) => {
+        if (ele == val.analyse_date) {
+          aee.push(val[str] || 0);
+        }
+      });
     });
-    return arr;
+    return aee;
   };
   const getRingOption = (
-    data = [
-      {
-        income: 60,
-        // area: "1",
-        qu: 60,
-        pay_date: "2023-08-21",
-        type: "会员",
-      },
-      {
-        income: 40,
-        qu: 40,
-        // area: "1",
-        pay_date: "2023-08-25",
-        type: "非会员",
-      },
-    ],
-    datas = [
-      {
-        income: 60,
-        // area: "1",
-        qu: 60,
-        pay_date: "2023-08-21",
-        type: "线上支付",
-      },
-      {
-        income: 40,
-        qu: 40,
-        // area: "1",
-        pay_date: "2023-08-25",
-        type: "线下支付",
-      },
-    ]
+    data = {
+      member_count: res.member_count || 0,
+      un_member_count: res.un_member_count || 0,
+      all_member_count: res.all_member_count || 0,
+      member_amount: res.member_amount || 0,
+      un_member_amount: res.un_member_amount || 0,
+      all_member_amount: res.all_member_amount || 0,
+      member_online_count: res.member_online_count || 0,
+      member_offline_count: res.member_offline_count || 0,
+      member_all_count: res.member_all_count || 0,
+      member_online_amount: res.member_online_amount || 0,
+      member_offline_amount: res.member_offline_amount || 0,
+      member_all_amount: res.member_all_amount || 0,
+    },
+    one = "1",
+    two = "2"
   ) => {
     // 获取所有地区名称
     const arrleft =
-      data.map((ele) => {
-        return {
-          name: ele.type,
-          value: ele.income,
-          qu: ele.qu,
-        };
-      }) || [];
+      one == "1"
+        ? [
+            {
+              name: "会员",
+              value: data.member_amount,
+            },
+            {
+              name: "非会员",
+              value: data.un_member_amount,
+            },
+          ]
+        : [
+            {
+              name: "会员",
+              value: data.member_count,
+            },
+            {
+              name: "非会员",
+              value: data.un_member_count,
+            },
+          ] || [];
     const arrRight =
-      datas.map((ele) => {
-        return {
-          name: ele.type,
-          value: ele.income,
-          qu: ele.qu,
-        };
-      }) || [];
+      two == "2"
+        ? [
+            {
+              name: "线上支付",
+              value: data.member_online_amount,
+            },
+            {
+              name: "线下支付",
+              value: data.member_offline_amount,
+            },
+          ]
+        : [
+            {
+              name: "线上支付",
+              value: data.member_online_count,
+            },
+            {
+              name: "线下支付",
+              value: data.member_offline_count,
+            },
+          ] || [];
+    let leftt =
+      one == "1"
+        ? `实收总额：${data.all_member_amount}元`
+        : `总支付订单数：${data.all_member_count}次`;
+    let rightt =
+      two == "1"
+        ? `会员实收金额：${data.member_all_amount}元`
+        : `会员总支付订单数：${data.member_all_count}次`;
     setLingData({
       title: {
-        text: "",
+        text: leftt,
+        x: "center",
+        y: "bottom",
         textStyle: {
           color: "#fff",
+          fontSize: 14,
         },
       },
       tooltip: {
@@ -316,7 +355,9 @@ function PayAly() {
               <p>
                 ${params.marker} ${params.name} 
               </p>
-              <p> 实收金额 ${params.value}(元)
+              <p> ${one == "1" ? "实收金额" : "支付订单数"} ${params.value}(${
+            one == "1" ? "元" : "次"
+          })
               </p>
               <p> 占比 ${params.percent}%
               </p>
@@ -326,8 +367,9 @@ function PayAly() {
       legend: {
         type: "scroll",
         //right: "5%",
-        top: "bottom",
-        bottom: "center",
+        x: "right",
+        y: "center",
+        orient: "vertical",
         //data: areaNames,
         data: ["会员", "非会员"],
         itemWidth: 18,
@@ -372,9 +414,12 @@ function PayAly() {
     });
     setRingData({
       title: {
-        text: "",
+        text: rightt,
+        x: "center",
+        y: "bottom",
         textStyle: {
           color: "#fff",
+          fontSize: 14,
         },
       },
       tooltip: {
@@ -384,7 +429,10 @@ function PayAly() {
               <p>
                 ${params.marker} ${params.name} 
               </p>
-              <p> 实收金额 ${params.value}(元)
+              <p> <p> ${two == "1" ? "实收金额" : "支付订单数"} ${
+            params.value
+          }(${two == "1" ? "元" : "次"})
+              </p>
               </p>
               <p> 占比 ${params.percent}%
               </p>
@@ -394,8 +442,9 @@ function PayAly() {
       legend: {
         type: "scroll",
         //right: "5%",
-        top: "bottom",
-        bottom: "center",
+        x: "right",
+        y: "center",
+        orient: "vertical",
         //data: areaNames,
         data: ["线上支付", "线下支付"],
         itemWidth: 18,
@@ -444,39 +493,23 @@ function PayAly() {
   const getRevenueOption = (
     data = [
       {
-        income: 4,
-        // area: "1",
-        pay_date: "2023-08-21",
-        type: "线下支付",
-      },
-      {
-        income: 14,
-        // area: "1",
-        pay_date: "2023-08-21",
-        type: "线上支付",
-      },
-      {
-        income: 12,
-        // area: "2",
-        pay_date: "2023-08-19",
-        type: "线下支付",
-      },
-      {
-        income: 40,
-        // area: "1",
-        pay_date: "2023-08-25",
-        type: "线上支付",
+        analyse_date: moment().startOf("day").format("YYYY-MM-DD"),
+        all_online_count: 0,
+        all_online_amount: 0,
+        all_offline_count: 0,
+        all_offline_amount: 0,
+        all_amount: 0,
+        should_amount: 0,
       },
     ]
   ) => {
     // 获取所有地区名称
     data.sort((a, b) => {
-      return new Date(a.pay_date) - new Date(b.pay_date);
+      return new Date(a.analyse_date) - new Date(b.analyse_date);
     });
-    const areaNames = [...new Set(data.map((item) => item.type))];
     // 获取所有日期
-    const dates = [...new Set(data.map((item) => item.pay_date))].sort(
-      (a, b) => a.pay_date - b.pay_date
+    const dates = [...new Set(data.map((item) => item.analyse_date))].sort(
+      (a, b) => a.analyse_date - b.analyse_date
     );
     // 构建X轴数据
     const xAxisData = dates.map((date) => {
@@ -522,7 +555,7 @@ function PayAly() {
         type: "scroll",
         top: 0,
         left: "center",
-        data: areaNames,
+        data: ["线下支付", "线上支付"],
         itemWidth: 18,
         itemHeight: 12,
         width: "40%",
@@ -575,12 +608,12 @@ function PayAly() {
         {
           name: "线下支付",
           type: "line",
-          data: filterad(dates, data, "线下支付"),
+          data: FilterLine(data, dates, "all_offline_count"),
         },
         {
           name: "线上支付",
           type: "line",
-          data: filterad(dates, data, "线上支付"),
+          data: FilterLine(data, dates, "all_online_count"),
         },
       ],
       grid: {
@@ -594,16 +627,49 @@ function PayAly() {
   //获取页面显示数据
   const getData = (data) => {
     setLoading(false);
-    ajax.ElectInvoice.getOperationReport({
+    ajax.ElectInvoice.getPayFx({
       ...data,
-      area: data?.area?.length ? data?.area[data.area.length - 1] : "",
+      ...DateFormt(data.date),
     }).then(
       (res) => {
         if (parseInt(res?.status) === 20000) {
           setData({
-            data: res?.data?.list || [],
-            total: res?.total || 0,
+            data: res?.data || [],
+            total: res?.data?.length || 0,
+            list: {
+              member_count: res.member_count || 0,
+              un_member_count: res.un_member_count || 0,
+              all_member_count: res.all_member_count || 0,
+              member_amount: res.member_amount || 0,
+              un_member_amount: res.un_member_amount || 0,
+              all_member_amount: res.all_member_amount || 0,
+              member_online_count: res.member_online_count || 0,
+              member_offline_count: res.member_offline_count || 0,
+              member_all_count: res.member_all_count || 0,
+              member_online_amount: res.member_online_amount || 0,
+              member_offline_amount: res.member_offline_amount || 0,
+              member_all_amount: res.member_all_amount || 0,
+            },
           });
+          getRevenueOption(res?.data || []);
+          getRingOption(
+            {
+              member_count: res.member_count || 0,
+              un_member_count: res.un_member_count || 0,
+              all_member_count: res.all_member_count || 0,
+              member_amount: res.member_amount || 0,
+              un_member_amount: res.un_member_amount || 0,
+              all_member_amount: res.all_member_amount || 0,
+              member_online_count: res.member_online_count || 0,
+              member_offline_count: res.member_offline_count || 0,
+              member_all_count: res.member_all_count || 0,
+              member_online_amount: res.member_online_amount || 0,
+              member_offline_amount: res.member_offline_amount || 0,
+              member_all_amount: res.member_all_amount || 0,
+            },
+            Vipo,
+            Vipt
+          );
           setLoading(true);
         } else {
           message.error(res?.message);
@@ -618,13 +684,12 @@ function PayAly() {
   };
   useEffect(() => {
     sessionStorage.setItem("FormData_PayAly", JSON.stringify(FormDatas));
-    // getData(FormDatas);
+    getData(FormDatas);
     //调用接口
   }, [FormDatas]);
   useEffect(() => {
     getSelectData();
-    getRevenueOption();
-    getRingOption();
+    // getRevenueOption();
   }, []);
   return (
     <div className="PayAly">
@@ -656,7 +721,7 @@ function PayAly() {
             <span className="lab">车场类型</span>
             <div className="inputs">
               <Select
-                value={FormData.park_type}
+                value={FormData.data_source}
                 style={{
                   width: "100%",
                 }}
@@ -678,7 +743,7 @@ function PayAly() {
                 onChange={(e) =>
                   setFormData({
                     ...FormData,
-                    park_type: e,
+                    data_source: e,
                   })
                 }
               />
@@ -707,10 +772,6 @@ function PayAly() {
                       value: "3",
                       label: "月",
                     },
-                    {
-                      value: "4",
-                      label: "年",
-                    },
                   ]}
                   onChange={(e) => SetTimeNow(e)}
                 />
@@ -723,33 +784,33 @@ function PayAly() {
                 format={TimeChange().mat}
                 picker={TimeChange().str}
                 allowClear={false}
-                value={FormData.start_time ? moment(FormData.start_time) : null}
+                value={FormData.start_date ? moment(FormData.start_date) : null}
                 onChange={(date, dateString) => {
                   if (TimeChange().str == "week") {
                     setFormData({
                       ...FormData,
-                      start_time: date
+                      start_date: date
                         ? moment(date).day(1).format("YYYY-MM-DD")
                         : null,
                     });
                   } else if (TimeChange().str == "day") {
-                    if (date > moment(FormData.end_time)) {
+                    if (date > moment(FormData.end_date)) {
                       setFormData({
                         ...FormData,
-                        end_time: dateString,
-                        start_time: FormData.end_time,
+                        end_date: dateString,
+                        start_date: FormData.end_date,
                       });
                     } else {
                       setFormData({
                         ...FormData,
-                        start_time: dateString,
+                        start_date: dateString,
                       });
                     }
                   } else {
-                    setFormData({ ...FormData, start_time: dateString });
+                    setFormData({ ...FormData, start_date: dateString });
                   }
                 }}
-                disabledDate={(current) => current > moment(FormData.end_time)}
+                disabledDate={(current) => current > moment(FormData.end_date)}
               />
             </div>
           </div>
@@ -762,34 +823,34 @@ function PayAly() {
                 format={TimeChange().mat}
                 picker={TimeChange().str}
                 allowClear={false}
-                value={FormData.end_time ? moment(FormData.end_time) : null}
+                value={FormData.end_date ? moment(FormData.end_date) : null}
                 onChange={(date, dateString) => {
                   if (TimeChange().str == "week") {
                     setFormData({
                       ...FormData,
-                      end_time: date
+                      end_date: date
                         ? moment(date).day(7).format("YYYY-MM-DD")
                         : null,
                     });
                   } else if (TimeChange().str == "day") {
-                    if (date < moment(FormData.start_time)) {
+                    if (date < moment(FormData.start_date)) {
                       setFormData({
                         ...FormData,
-                        start_time: dateString,
-                        end_time: FormData.start_time,
+                        start_date: dateString,
+                        end_date: FormData.start_date,
                       });
                     } else {
                       setFormData({
                         ...FormData,
-                        end_time: dateString,
+                        end_date: dateString,
                       });
                     }
                   } else {
-                    setFormData({ ...FormData, end_time: dateString });
+                    setFormData({ ...FormData, end_date: dateString });
                   }
                 }}
                 disabledDate={(current) =>
-                  current < moment(FormData.start_time)
+                  current < moment(FormData.start_date)
                 }
               />
             </div>
@@ -811,11 +872,9 @@ function PayAly() {
                 var fortm = FormData;
                 setFormData({
                   ...fortm,
-                  pn: 1,
                 });
                 setFormDatas({
                   ...fortm,
-                  pn: 1,
                 });
               }}
             >
@@ -841,7 +900,25 @@ function PayAly() {
                   </Tooltip>
                 </div>
 
-                <div>全部|订单</div>
+                <div>
+                  <span
+                    onClick={() => {
+                      setVipo("1");
+                      getRingOption(Data.list, "1", Vipt);
+                    }}
+                  >
+                    金额
+                  </span>
+                  |
+                  <span
+                    onClick={() => {
+                      setVipo("2");
+                      getRingOption(Data.list, "2", Vipt);
+                    }}
+                  >
+                    订单
+                  </span>
+                </div>
               </div>
 
               <ReactEcharts
@@ -865,7 +942,25 @@ function PayAly() {
                   </Tooltip>
                 </div>
 
-                <div>全部|订单</div>
+                <div>
+                  <span
+                    onClick={() => {
+                      setVipt("1");
+                      getRingOption(Data.list, Vipo, "1");
+                    }}
+                  >
+                    金额
+                  </span>
+                  |
+                  <span
+                    onClick={() => {
+                      setVipt("2");
+                      getRingOption(Data.list, Vipo, "2");
+                    }}
+                  >
+                    订单
+                  </span>
+                </div>
               </div>
 
               <ReactEcharts
@@ -924,7 +1019,7 @@ function PayAly() {
                 />
               </div>
             </div>
-
+            {/* 
             <div>
               <Pagination
                 className="pagination-common"
@@ -938,7 +1033,7 @@ function PayAly() {
                 onChange={onShowSizeChange}
                 onShowSizeChange={onShowSizeChange}
               />
-            </div>
+            </div> */}
           </ResultFlow>
         </div>
       </div>

src/pages/DataAnalysisPrediction/MemberStat/RegisterAly/loadable.jsx

@@ -23,11 +23,8 @@ import "./index.scss";
 function RegisterAly() {
   const formdata = {
     date_type: "1",
-    is_excel: 0,
-    start_time: moment().startOf("day").format("YYYY-MM-DD"),
-    end_time: moment().endOf("day").format("YYYY-MM-DD"),
-    pn: 1,
-    page_size: dictionary?.pageSizeOptions1[0],
+    start_date: moment().startOf("day").format("YYYY-MM-DD"),
+    end_date: moment().endOf("day").format("YYYY-MM-DD"),
   };
   const col = [
     {
@@ -38,43 +35,26 @@ function RegisterAly() {
     },
     {
       title: "会员注册(个)",
-      children: [
-        {
-          title: "APP",
-          dataIndex: "date",
-          key: "date",
-          align: "center",
-        },
-        {
-          title: "公众号",
-          dataIndex: "date",
-          key: "date",
-          align: "center",
-        },
-        {
-          title: "其他",
-          dataIndex: "date",
-          key: "date",
-          align: "center",
-        },
-      ],
+      dataIndex: "user_count",
+      key: "user_count",
+      align: "center",
     },
     {
       title: "车牌绑定(个)",
-      dataIndex: "date",
-      key: "date",
+      dataIndex: "car_count",
+      key: "car_count",
       align: "center",
     },
     {
       title: "累计会员注册(个)",
-      dataIndex: "date",
-      key: "date",
+      dataIndex: "all_user_count",
+      key: "all_user_count",
       align: "center",
     },
     {
       title: "累计车牌绑定(个)",
-      dataIndex: "date",
-      key: "date",
+      dataIndex: "all_car_count",
+      key: "all_car_count",
       align: "center",
     },
   ];
@@ -93,14 +73,19 @@ function RegisterAly() {
   const [Data, setData] = useState({
     data: [],
     total: 0,
+    list: {
+      binding_count: "",
+      user_count: "",
+      car_count: "",
+      unbinding_car_count: "",
+      unbinding_user_count: "",
+    },
   });
 
   const [ringData, setRingData] = useState({});
   const [lingData, setLingData] = useState({});
   const [revenueData, setRevenueData] = useState({});
 
-  //获取区域
-  const [Area, setArea] = useState([]);
   //商户
   const [Yunying, setYunying] = useState([]);
   //自动填充
@@ -174,11 +159,29 @@ function RegisterAly() {
     setFormData({
       ...FormData,
       date_type: e,
-      start_time: start,
-      end_time: end,
+      start_date: start,
+      end_date: end,
     });
   };
-
+  //数据上传
+  const DateFormt = (e) => {
+    let start = "";
+    let end = "";
+    if (e == 4) {
+      start = moment(FormData.start_date).startOf("year").format("YYYY-MM-DD");
+      end = moment(FormData.end_date).endOf("year").format("YYYY-MM-DD");
+    } else if (e == 3) {
+      start = moment(FormData.start_date).startOf("month").format("YYYY-MM-DD");
+      end = moment(FormData.end_date).endOf("month").format("YYYY-MM-DD");
+    } else {
+      start = FormData.start_date;
+      end = FormData.end_date;
+    }
+    return {
+      start_date: start,
+      end_date: end,
+    };
+  };
   //页码
   function onShowSizeChange(pn, page_size) {
     let temFormData = {};
@@ -243,73 +246,58 @@ function RegisterAly() {
       }
     );
   };
-  const filterad = (dates, data, name) => {
-    const areaData = data.filter((item) => item.type === name);
-    const arr = dates.map((item) => {
-      for (const { pay_date, income } of areaData) {
-        console.log(pay_date, income);
-        if (pay_date === item) return income;
-      }
-      return 0;
+  const FilterLine = (data, dates, str) => {
+    let aee = [];
+    dates.forEach((ele) => {
+      data.forEach((val) => {
+        if (ele == val.date) {
+          aee.push(val[str] || 0);
+        }
+      });
     });
-    return arr;
+    return aee;
   };
+
   const getRingOption = (
-    data = [
-      {
-        income: 60,
-        // area: "1",
-        qu: 60,
-        pay_date: "2023-08-21",
-        type: "绑定车牌数",
-      },
-      {
-        income: 40,
-        qu: 40,
-        // area: "1",
-        pay_date: "2023-08-25",
-        type: "未绑定车牌数",
-      },
-    ],
-    datas = [
-      {
-        income: 60,
-        // area: "1",
-        qu: 60,
-        pay_date: "2023-08-21",
-        type: "绑定车牌会员数",
-      },
-      {
-        income: 40,
-        qu: 40,
-        // area: "1",
-        pay_date: "2023-08-25",
-        type: "非绑定车牌会员数",
-      },
-    ]
+    data = {
+      binding_count: "0",
+      user_count: "0",
+      car_count: "0",
+      unbinding_car_count: "0",
+      unbinding_user_count: "0",
+    }
   ) => {
     // 获取所有地区名称
     const arrleft =
-      data.map((ele) => {
-        return {
-          name: ele.type,
-          value: ele.income,
-          qu: ele.qu,
-        };
-      }) || [];
+      [
+        {
+          name: "绑定车牌数",
+          value: data.binding_count,
+        },
+        {
+          name: "未绑定车牌数",
+          value: data.unbinding_car_count,
+        },
+      ] || [];
     const arrRight =
-      datas.map((ele) => {
-        return {
-          name: ele.type,
-          value: ele.income,
-          qu: ele.qu,
-        };
-      }) || [];
+      [
+        {
+          name: "绑定车牌会员数",
+          value: data.binding_count,
+        },
+        {
+          name: "非绑定车牌会员数",
+          value: data.unbinding_user_count,
+        },
+      ] || [];
     setLingData({
       title: {
-        text: "",
+        text: "已知车辆数量：" + data.car_count + "辆",
+        x: "center",
+        y: "bottom",
         textStyle: {
           color: "#fff",
+          fontSize: 14,
         },
       },
       tooltip: {
@@ -328,8 +316,9 @@ function RegisterAly() {
       legend: {
         type: "scroll",
         //right: "5%",
-        top: "bottom",
-        bottom: "center",
+        x: "right",
+        y: "center",
+        orient: "vertical",
         //data: areaNames,
         data: ["绑定车牌数", "未绑定车牌数"],
         itemWidth: 18,
@@ -377,9 +366,12 @@ function RegisterAly() {
     });
     setRingData({
       title: {
-        text: "",
+        text: "注册用户总数：" + data.user_count + "个",
+        x: "center",
+        y: "bottom",
         textStyle: {
           color: "#fff",
+          fontSize: 14,
         },
       },
       tooltip: {
@@ -398,8 +390,9 @@ function RegisterAly() {
       legend: {
         type: "scroll",
         //right: "5%",
-        top: "bottom",
-        bottom: "center",
+        x: "right",
+        y: "center",
+        orient: "vertical",
         //data: areaNames,
         data: ["绑定车牌会员数", "非绑定车牌会员数"],
         itemWidth: 18,
@@ -448,39 +441,21 @@ function RegisterAly() {
   const getRevenueOption = (
     data = [
       {
-        income: 4,
-        // area: "1",
-        pay_date: "2023-08-21",
-        type: "会员注册",
-      },
-      {
-        income: 14,
-        // area: "1",
-        pay_date: "2023-08-21",
-        type: "车牌绑定",
-      },
-      {
-        income: 12,
-        // area: "2",
-        pay_date: "2023-08-19",
-        type: "会员注册",
-      },
-      {
-        income: 40,
-        // area: "1",
-        pay_date: "2023-08-25",
-        type: "车牌绑定",
+        date: moment().startOf("day").format("YYYY-MM-DD"),
+        user_count: "0",
+        car_count: "0",
+        all_user_count: 0,
+        all_car_count: 0,
       },
     ]
   ) => {
     // 获取所有地区名称
     data.sort((a, b) => {
-      return new Date(a.pay_date) - new Date(b.pay_date);
+      return new Date(a.date) - new Date(b.date);
     });
-    const areaNames = [...new Set(data.map((item) => item.type))];
     // 获取所有日期
-    const dates = [...new Set(data.map((item) => item.pay_date))].sort(
-      (a, b) => a.pay_date - b.pay_date
+    const dates = [...new Set(data.map((item) => item.date))].sort(
+      (a, b) => a.date - b.date
     );
     // 构建X轴数据
     const xAxisData = dates.map((date) => {
@@ -521,7 +496,7 @@ function RegisterAly() {
         type: "scroll",
         top: 0,
         left: "center",
-        data: areaNames,
+        data: ["会员注册", "车牌绑定"],
         itemWidth: 18,
         itemHeight: 12,
         width: "40%",
@@ -548,10 +523,9 @@ function RegisterAly() {
       yAxis: {
         type: "value",
         name: "数量(个)",
-        min: 0,
         // /max: 50,
-        interval: 10,
-        splitNumber: 6, //设置坐标轴的分割段数
+        // interval: 10,// min: 0,
+
         axisLabel: {
           //formatter: "{value}元",
           textStyle: {
@@ -574,12 +548,12 @@ function RegisterAly() {
         {
           name: "会员注册",
           type: "line",
-          data: filterad(dates, data, "会员注册"),
+          data: FilterLine(data, dates, "user_count"),
         },
         {
           name: "车牌绑定",
           type: "line",
-          data: filterad(dates, data, "车牌绑定"),
+          data: FilterLine(data, dates, "car_count"),
         },
       ],
       grid: {
@@ -593,15 +567,30 @@ function RegisterAly() {
   //获取页面显示数据
   const getData = (data) => {
     setLoading(false);
-    ajax.ElectInvoice.getOperationReport({
+    ajax.ElectInvoice.getRegister({
       ...data,
-      area: data?.area?.length ? data?.area[data.area.length - 1] : "",
+      ...DateFormt(data.date_type),
     }).then(
       (res) => {
         if (parseInt(res?.status) === 20000) {
           setData({
-            data: res?.data?.list || [],
-            total: res?.total || 0,
+            data: res?.data || [],
+            total: res?.data?.length || 0,
+            list: {
+              binding_count: res.binding_count,
+              user_count: res.user_count,
+              car_count: res.car_count,
+              unbinding_car_count: res.unbinding_car_count,
+              unbinding_user_count: res.unbinding_user_count,
+            },
+          });
+          getRevenueOption(res?.data);
+          getRingOption({
+            binding_count: res.binding_count,
+            user_count: res.user_count,
+            car_count: res.car_count,
+            unbinding_car_count: res.unbinding_car_count,
+            unbinding_user_count: res.unbinding_user_count,
           });
           setLoading(true);
         } else {
@@ -617,13 +606,12 @@ function RegisterAly() {
   };
   useEffect(() => {
     sessionStorage.setItem("FormData_RegisterAly", JSON.stringify(FormDatas));
-    // getData(FormDatas);
+    getData(FormDatas);
     //调用接口
   }, [FormDatas]);
   useEffect(() => {
     getSelectData();
-    getRevenueOption();
-    getRingOption();
+    // getRingOption();
   }, []);
   return (
     <div className="RegisterAly">
@@ -653,10 +641,6 @@ function RegisterAly() {
                       value: "3",
                       label: "月",
                     },
-                    {
-                      value: "4",
-                      label: "年",
-                    },
                   ]}
                   onChange={(e) => SetTimeNow(e)}
                 />
@@ -669,33 +653,33 @@ function RegisterAly() {
                 format={TimeChange().mat}
                 picker={TimeChange().str}
                 allowClear={false}
-                value={FormData.start_time ? moment(FormData.start_time) : null}
+                value={FormData.start_date ? moment(FormData.start_date) : null}
                 onChange={(date, dateString) => {
                   if (TimeChange().str == "week") {
                     setFormData({
                       ...FormData,
-                      start_time: date
+                      start_date: date
                         ? moment(date).day(1).format("YYYY-MM-DD")
                         : null,
                     });
                   } else if (TimeChange().str == "day") {
-                    if (date > moment(FormData.end_time)) {
+                    if (date > moment(FormData.end_date)) {
                       setFormData({
                         ...FormData,
-                        end_time: dateString,
-                        start_time: FormData.end_time,
+                        end_date: dateString,
+                        start_date: FormData.end_date,
                       });
                     } else {
                       setFormData({
                         ...FormData,
-                        start_time: dateString,
+                        start_date: dateString,
                       });
                     }
                   } else {
-                    setFormData({ ...FormData, start_time: dateString });
+                    setFormData({ ...FormData, start_date: dateString });
                   }
                 }}
-                disabledDate={(current) => current > moment(FormData.end_time)}
+                disabledDate={(current) => current > moment(FormData.end_date)}
               />
             </div>
           </div>
@@ -708,34 +692,34 @@ function RegisterAly() {
                 format={TimeChange().mat}
                 picker={TimeChange().str}
                 allowClear={false}
-                value={FormData.end_time ? moment(FormData.end_time) : null}
+                value={FormData.end_date ? moment(FormData.end_date) : null}
                 onChange={(date, dateString) => {
                   if (TimeChange().str == "week") {
                     setFormData({
                       ...FormData,
-                      end_time: date
+                      end_date: date
                         ? moment(date).day(7).format("YYYY-MM-DD")
                         : null,
                     });
                   } else if (TimeChange().str == "day") {
-                    if (date < moment(FormData.start_time)) {
+                    if (date < moment(FormData.start_date)) {
                       setFormData({
                         ...FormData,
-                        start_time: dateString,
-                        end_time: FormData.start_time,
+                        start_date: dateString,
+                        end_date: FormData.start_date,
                       });
                     } else {
                       setFormData({
                         ...FormData,
-                        end_time: dateString,
+                        end_date: dateString,
                       });
                     }
                   } else {
-                    setFormData({ ...FormData, end_time: dateString });
+                    setFormData({ ...FormData, end_date: dateString });
                   }
                 }}
                 disabledDate={(current) =>
-                  current < moment(FormData.start_time)
+                  current < moment(FormData.start_date)
                 }
               />
             </div>
@@ -757,11 +741,9 @@ function RegisterAly() {
                 var fortm = FormData;
                 setFormData({
                   ...fortm,
-                  pn: 1,
                 });
                 setFormDatas({
                   ...fortm,
-                  pn: 1,
                 });
               }}
             >
@@ -857,7 +839,7 @@ function RegisterAly() {
               </div>
             </div>
 
-            <div>
+            {/* <div>
               <Pagination
                 className="pagination-common"
                 showSizeChanger={true}
@@ -870,7 +852,7 @@ function RegisterAly() {
                 onChange={onShowSizeChange}
                 onShowSizeChange={onShowSizeChange}
               />
-            </div>
+            </div> */}
           </ResultFlow>
         </div>
       </div>

src/pages/DataAnalysisPrediction/ParkingOverview/index.scss

@@ -17,6 +17,23 @@ $color-primary : var(--color-primary);
     width: 100%;
     height: 50px;
     background: url("../../../assets/images/equip/home/pvhome_title.png");
+
+    i {
+      width: 14px;
+      height: 14px;
+      font-size: 12px;
+      border-radius: 50%;
+      cursor: pointer;
+      margin-left: 4px;
+      border: #ffffff 1px solid;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+
+  .curpoin {
+    cursor: pointer;
   }
 
   .pk_header {
@@ -46,6 +63,82 @@ $color-primary : var(--color-primary);
     border-radius: 2px;
     display: flex;
     overflow: hidden;
+
+    .serdd {
+      width: 18px;
+      height: 100%;
+      cursor: pointer;
+      color: #A9C6FF;
+      display: flex;
+      z-index: 1001;
+      align-items: center;
+    }
+  }
+
+  .select_modals {
+    z-index: 1000;
+    position: absolute;
+    top: 133px;
+    left: 392px;
+    width: 340px;
+    height: 414px;
+    background: rgba(30, 38, 53, 0.64);
+    border: 1px solid #a9c6ff;
+    border-radius: 2px;
+    display: flex;
+    padding: 20px 18px 20px 20px;
+    overflow: hidden;
+    flex-direction: column;
+
+    p {
+      margin-bottom: 0%;
+    }
+
+    .p {
+
+      margin-left: 6px;
+      width: 280px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .address_home {
+      display: flex;
+      align-items: center;
+    }
+
+    .imgd {
+      width: 300px;
+      height: 168px;
+
+    }
+
+    .parent {
+      display: flex;
+      flex-direction: column;
+      height: 50px;
+      border-bottom: 1px #bbb dotted;
+      justify-content: center;
+    }
+
+    .a_href {
+      cursor: pointer;
+      color: #75bcff;
+      text-align: right;
+    }
+
+    .zhanbo {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+
+      p {
+        span {
+          margin-right: 6px;
+        }
+      }
+    }
   }
 
   .show_c {
@@ -82,6 +175,7 @@ $color-primary : var(--color-primary);
           max-width: 170px;
           overflow: hidden;
           text-overflow: ellipsis;
+          white-space: nowrap;
         }
 
         i {
@@ -117,10 +211,19 @@ $color-primary : var(--color-primary);
       margin-bottom: 0%;
     }
 
+    .dlex_f {
+      display: flex;
+      height: calc(100% - 50px);
+      flex-direction: column;
+      justify-content: space-between;
+    }
+
+
+
     .lf_s {
       width: 100%;
       display: flex;
-      padding: 14px 0 14px 20px;
+      padding: 0 0 0 20px;
 
       img {
         width: 80px;
@@ -145,6 +248,7 @@ $color-primary : var(--color-primary);
             max-width: 170px;
             overflow: hidden;
             text-overflow: ellipsis;
+            white-space: nowrap;
           }
 
           i {
@@ -157,6 +261,127 @@ $color-primary : var(--color-primary);
     }
   }
 
+  .right_ssdf {
+    width: 168px;
+    height: 270px;
+    z-index: 1000;
+
+    position: absolute;
+    bottom: 38px;
+    right: 390px;
+
+    .c_t {
+      background: rgba(30, 38, 53, 0.64);
+      height: 100px;
+      margin-bottom: 10px;
+      padding: 20px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+
+      .ant-checkbox-wrapper {
+        display: flex;
+        justify-content: space-between;
+        flex-direction: row-reverse;
+        margin-left: 0;
+
+        &::after {
+          display: none;
+        }
+      }
+    }
+
+    .colcr {
+      background: rgba(30, 38, 53, 0.64);
+      height: 160px;
+      padding: 20px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+
+
+      .tkr {
+        font-size: 14px;
+        font-family: Microsoft YaHei, Microsoft YaHei-Bold;
+        font-weight: 700;
+        text-align: left;
+        color: #ffffff;
+      }
+
+      .cd_color {
+        display: flex;
+        justify-content: space-between;
+        color: #bbb;
+
+        &:nth-last-child(2) {
+          span {
+            &:nth-last-child(1) {
+              width: 40px;
+              height: 16px;
+              background: #FFA200;
+            }
+          }
+
+        }
+
+        &:nth-last-child(3) {
+          span {
+            &:nth-last-child(1) {
+              width: 40px;
+              height: 16px;
+              background: #12D4B2;
+            }
+          }
+
+        }
+
+        &:nth-last-child(1) {
+          span {
+            &:nth-last-child(1) {
+              width: 40px;
+              height: 16px;
+              background: #F44465;
+            }
+          }
+
+        }
+      }
+    }
+  }
+
+  .right_home {
+    z-index: 1000;
+    position: absolute;
+    top: 96px;
+    right: 50px;
+    width: 320px;
+    height: 87%;
+    background: rgba(30, 38, 53, 0.64);
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    .day_select {
+      margin: 10px auto;
+      width: 280px;
+      height: 20px;
+      background: rgba(30, 38, 53, 0.65);
+      display: flex;
+      align-items: center;
+
+      .day_item {
+        display: block;
+        width: 25%;
+        text-align: center;
+        cursor: pointer;
+      }
+
+      .day_checked {
+        background: url("../../../assets/images/equip/home/right_checked.png") no-repeat;
+      }
+    }
+  }
+
   .pk_footer {
     z-index: 1000;
     position: absolute;
@@ -228,6 +453,7 @@ $color-primary : var(--color-primary);
         text-align: center;
         overflow: hidden;
         text-overflow: ellipsis;
+        white-space: nowrap;
       }
 
       .q {
@@ -235,4 +461,242 @@ $color-primary : var(--color-primary);
       }
     }
   }
+}
+
+.modal-boeat {
+  .ant-modal-header {
+    font-size: 18px;
+    font-family: Microsoft YaHei, Microsoft YaHei-Bold;
+    font-weight: 700;
+    text-align: center;
+    background: linear-gradient(0deg, #526991 0%, #47597a 100%);
+  }
+
+  .ant-modal-body {
+    padding: 1px 20px 20px;
+  }
+
+  .ant-modal-footer {
+    display: flex;
+    justify-content: center;
+
+    span {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 80px;
+      cursor: pointer;
+      height: 36px;
+      background: #4a6184;
+      border-radius: 2px;
+    }
+  }
+
+  .boweizs {
+    .header_bohome {
+      display: flex;
+      padding: 20px 0 30px;
+
+      .form_item {
+        display: flex;
+        align-items: center;
+        padding: 0 10px 16px 0;
+
+        .lab {
+          text-align: right;
+          margin-right: 10px;
+        }
+
+        .inputs {
+          width: 200px;
+          // border: 1px solid var(--color-table-border-bottom-color);
+          border-radius: 4px;
+          overflow: hidden;
+        }
+      }
+
+      .but_on {
+        display: flex;
+        // align-items: center;
+        margin: 0 10px 0 0;
+        justify-content: space-between;
+        font-size: 16px;
+
+        span {
+          width: 80px;
+          height: 32px;
+          border-radius: 4px;
+          color: #ffffff;
+          margin-right: 10px;
+          text-align: center;
+          line-height: 32px;
+          cursor: pointer;
+        }
+
+        .sear_ser,
+        .sear_rep {
+          background: linear-gradient(180deg, #3aa9ff, #59b7ff);
+        }
+      }
+    }
+
+    .ant-table-thead {
+      th {
+        border: rgba(255, 255, 255, .08) 1px solid;
+
+        i {
+          cursor: pointer;
+          margin-left: 10px;
+          display: inline-block;
+          width: 14px;
+          height: 14px;
+          border: solid 1px $color-text;
+          border-radius: 7px;
+          line-height: 14px;
+          text-align: center;
+        }
+
+        &::before {
+          display: none;
+        }
+      }
+
+      .ant-table-selection-column {
+        text-align: center;
+        padding: 0;
+      }
+    }
+
+    .ant-table-body {
+      @include scrollBar(var(--color-user-list-bg), #3B97FF);
+
+    }
+
+
+  }
+
+  .Kcar {
+    display: flex;
+    flex-wrap: wrap;
+    height: 600px;
+    overflow-y: scroll;
+    @include scrollBar(var(--color-user-list-bg), #3B97FF);
+
+    .casd {
+      width: 280px;
+      height: 268px;
+      background: #39445d;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin: 20px 18px 0 0;
+      padding: 30px 0 0 0;
+
+      img {
+        width: 192px;
+        margin-bottom: 23px;
+      }
+
+      p {
+        width: 156px;
+        height: 36px;
+        background: #6B758C;
+        border-radius: 4px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      span {
+        margin-top: 10px;
+      }
+    }
+
+    .curoin {
+      cursor: pointer;
+
+      p {
+        background: #127bfc;
+      }
+    }
+  }
+
+  .detail_roda {
+    .shoe {
+      display: flex;
+      flex-wrap: wrap;
+      padding: 30px 0;
+
+      .item_cas {
+        width: 30%;
+        display: flex;
+
+        .lanf {
+          width: 60px;
+        }
+
+        .imfdg {
+          margin-left: 4px;
+          width: 240px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+    }
+
+    .tu_per {
+      display: flex;
+      flex-direction: column;
+
+      .proe {
+        display: flex;
+        align-items: center;
+
+        img {
+          width: 18px;
+          height: 16px;
+        }
+
+        span {
+          font-size: 16px;
+          font-family: Microsoft YaHei, Microsoft YaHei-Regular;
+          margin-left: 7px;
+        }
+      }
+
+    }
+
+    .zhao_p {
+      display: flex;
+      justify-content: space-between;
+      margin-top: 20px;
+
+      .content {
+        width: 320px;
+        height: 218px;
+        background: #39445d;
+        display: flex;
+        flex-direction: column;
+
+        p {
+          text-align: center;
+          line-height: 40px;
+          margin-bottom: 0%;
+        }
+
+        .imffg {
+          margin: 0% auto;
+          width: 300px;
+          height: 168px;
+        }
+      }
+    }
+  }
+}
+
+.labds {
+  span {
+    margin-right: 10px;
+  }
 }

src/services/ElectInvoice/index.js

@@ -1,5 +1,5 @@
 import ajax from "../../config/ajax";
-//为电子发票和财务报表，以及清分结算接口数据
+//为电子发票和财务报表，以及清分结算接口数据 会员统计 设备分析
 
 //-------------------------------------------------电子发票---------------
 //************************发票记录
@@ -143,6 +143,35 @@ const downLoadRefund = (params) => {
     data: params,
   });
 };
+//-------------------------------------------------会员统计---------------
+//************************停车分析
+//获取列表数据
+const getParking = (params) => {
+  return ajax({
+    url: "/api/ana/member/member_parking",
+    type: "post",
+    data: params,
+  });
+};
+//************************注册分析
+//获取列表数据
+const getRegister= (params) => {
+  return ajax({
+    url: "/api/ana/member/member_register",
+    type: "post",
+    data: params,
+  });
+};
+//************************支付分析
+//获取列表数据
+const getPayFx= (params) => {
+  return ajax({
+    url: "/api/ana/member/member_order",
+    type: "post",
+    data: params,
+  });
+};
+//-------------------------------------------------设备分析---------------
 export default {
   getInvoiceMess,
   FlushRed,
@@ -162,4 +191,8 @@ export default {
   getRepeatDetail,
   getPayRepeatRefund,
   downLoadRefund,
+
+  getParking,
+  getRegister,
+  getPayFx,
 };

src/services/ParkingOverview/index.js

@@ -0,0 +1,100 @@
+import ajax from "../../config/ajax";
+//-----------------------------停车业务概括数据----------------------------------
+export default {
+  //获取泊位总数弹框数据列表
+  getParkingBoW: (params) => {
+    return ajax({
+      url: "/api/ana/overview/berthList",
+      type: "post",
+      data: params,
+    });
+  },
+  //获取实时泊位显示数据
+  getSituationData: (params) => {
+    return ajax({
+      url: "/api/ana/overview/berthSituation",
+      type: "get",
+      data: params,
+    });
+  },
+  //获取实时泊位显示数据详情
+  getSituationDetailData: (params) => {
+    return ajax({
+      url: "/api/ana/overview/getBerthDetail",
+      type: "get",
+      data: params,
+    });
+  },
+  //获取地图车场数据
+  getMapData: (params) => {
+    return ajax({
+      url: "/api/ana/overview/getParks",
+      type: "get",
+      data: params,
+    });
+  },
+  //获取停车场模糊检索
+  searchPark: (params) => {
+    return ajax({
+      url: "/api/ana/overview/searchPaking",
+      type: "get",
+      data: params,
+    });
+  },
+  //获取位置模糊检索
+  searchGeocode: (params) => {
+    return ajax({
+      url: "/api/ana/overview/geocode",
+      type: "get",
+      data: params,
+    });
+  },
+  //获取今日收入和服务车辆
+  GetDataStatic: (params) => {
+    return ajax({
+      url: "/api/ana/overview/dataStatic",
+      type: "get",
+      data: params,
+    });
+  },
+  //获取收入分析
+  GetRevenueAnalysis: (params) => {
+    return ajax({
+      url: "/api/ana/overview/revenueAnalysis",
+      type: "get",
+      data: params,
+    });
+  },
+  //获取车场评价
+  GetParkingEvaluate: (params) => {
+    return ajax({
+      url: "/api/ana/overview/parkingEvaluate",
+      type: "get",
+      data: params,
+    });
+  },
+  //获取客诉类型分析
+  GetComplaintType: (params) => {
+    return ajax({
+      url: "/api/ana/overview/complaintType",
+      type: "get",
+      data: params,
+    });
+  },
+  //获取左边数据(不包括7日利用率和周转)
+  GetOverviewData: (params) => {
+    return ajax({
+      url: "/api/ana/overview/overviewData",
+      type: "get",
+      data: params,
+    });
+  },
+  //获取左边数据(7日利用率和周转)
+  GetUseInfo: (params) => {
+    return ajax({
+      url: "/api/ana/overview/berthUseInfo",
+      type: "get",
+      data: params,
+    });
+  },
+};

src/services/index.js

@@ -21,6 +21,7 @@ import BusinessConf from "./SystemMgm";
 import ElectInvoice from "./ElectInvoice";
 import FinancialMgm from "./FinancialMgm";
 import DataAnalysisPrediction from "./DataAnalysisPrediction";
+import ParkingOverview from "./ParkingOverview";
 const api = {};
 export default {
   ...api,
@@ -47,4 +48,5 @@ export default {
   ElectInvoice,
   ...FinancialMgm,
   ...DataAnalysisPrediction,
+  ParkingOverview,
 };