diff --git a/src/assets/images/equip/home/kx.png b/src/assets/images/equip/home/kx.png new file mode 100644 index 0000000..1faea59 Binary files /dev/null and b/src/assets/images/equip/home/kx.png differ diff --git a/src/assets/images/equip/home/mark_green.png b/src/assets/images/equip/home/mark_green.png new file mode 100644 index 0000000..e85fb68 Binary files /dev/null and b/src/assets/images/equip/home/mark_green.png differ diff --git a/src/assets/images/equip/home/mark_red.png b/src/assets/images/equip/home/mark_red.png new file mode 100644 index 0000000..8e3a5c2 Binary files /dev/null and b/src/assets/images/equip/home/mark_red.png differ diff --git a/src/assets/images/equip/home/mark_yellow.png b/src/assets/images/equip/home/mark_yellow.png new file mode 100644 index 0000000..501c3f8 Binary files /dev/null and b/src/assets/images/equip/home/mark_yellow.png differ diff --git a/src/assets/images/equip/home/poto.png b/src/assets/images/equip/home/poto.png new file mode 100644 index 0000000..5ca4063 Binary files /dev/null and b/src/assets/images/equip/home/poto.png differ diff --git a/src/assets/images/equip/home/rerm.png b/src/assets/images/equip/home/rerm.png new file mode 100644 index 0000000..1db8392 Binary files /dev/null and b/src/assets/images/equip/home/rerm.png differ diff --git a/src/assets/images/equip/home/yc.png b/src/assets/images/equip/home/yc.png new file mode 100644 index 0000000..c52be4a Binary files /dev/null and b/src/assets/images/equip/home/yc.png differ diff --git a/src/components/MapComponets/BaseMap/index.jsx b/src/components/MapComponets/BaseMap/index.jsx index 608cd29..f2d3153 100644 --- a/src/components/MapComponets/BaseMap/index.jsx +++ b/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 (
{hasInit ? renderChildren(map) : null}
- ) + ); } -export default BaseMap +export default BaseMap; diff --git a/src/components/MapComponets/MarkCenter/index.jsx b/src/components/MapComponets/MarkCenter/index.jsx new file mode 100644 index 0000000..c734569 --- /dev/null +++ b/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(`${data.name}`, { + offset: [20, -5], + direction: "right", + }); + setMarker(marker); + setTimeout(() => { + map.setView([data.lat, data.lng]); + }, 800); + }; + + return null; +} + +export default Markers; diff --git a/src/components/MapComponets/ParkingViewMarkers/index.jsx b/src/components/MapComponets/ParkingViewMarkers/index.jsx new file mode 100644 index 0000000..b41489c --- /dev/null +++ b/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(`${elem[tooltipKey]}`, { + 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 = `
+
请选择点位
+
+ `; + data.forEach((elem) => { + let _data = elem.data.data; + if (_data.name && _data.locationId) { + template += `
${_data.name}
`; + } + }); + template += `
`; + return template; + }; + + return null; +} + +export default Markers; diff --git a/src/components/MapComponets/ParkingViewMarkers/index.scss b/src/components/MapComponets/ParkingViewMarkers/index.scss new file mode 100644 index 0000000..44b8500 --- /dev/null +++ b/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; +} diff --git a/src/components/MapComponets/index.jsx b/src/components/MapComponets/index.jsx index 5b5f195..0b42135 100644 --- a/src/components/MapComponets/index.jsx +++ b/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, +}; diff --git a/src/pages/DataAnalysisPrediction/MemberStat/ParkingAly/index.scss b/src/pages/DataAnalysisPrediction/MemberStat/ParkingAly/index.scss index 8d3ecb8..6af9af0 100644 --- a/src/pages/DataAnalysisPrediction/MemberStat/ParkingAly/index.scss +++ b/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; diff --git a/src/pages/DataAnalysisPrediction/MemberStat/ParkingAly/loadable.jsx b/src/pages/DataAnalysisPrediction/MemberStat/ParkingAly/loadable.jsx index 188a192..841b72f 100644 --- a/src/pages/DataAnalysisPrediction/MemberStat/ParkingAly/loadable.jsx +++ b/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() { 车场类型
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)} />
@@ -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) } /> @@ -811,11 +872,9 @@ function PayAly() { var fortm = FormData; setFormData({ ...fortm, - pn: 1, }); setFormDatas({ ...fortm, - pn: 1, }); }} > @@ -841,7 +900,25 @@ function PayAly() { -
全部|订单
+
+ { + setVipo("1"); + getRingOption(Data.list, "1", Vipt); + }} + > + 金额 + + | + { + setVipo("2"); + getRingOption(Data.list, "2", Vipt); + }} + > + 订单 + +
-
全部|订单
+
+ { + setVipt("1"); + getRingOption(Data.list, Vipo, "1"); + }} + > + 金额 + + | + { + setVipt("2"); + getRingOption(Data.list, Vipo, "2"); + }} + > + 订单 + +
- + {/*
-
+ */} diff --git a/src/pages/DataAnalysisPrediction/MemberStat/RegisterAly/loadable.jsx b/src/pages/DataAnalysisPrediction/MemberStat/RegisterAly/loadable.jsx index 868aa73..a7641f7 100644 --- a/src/pages/DataAnalysisPrediction/MemberStat/RegisterAly/loadable.jsx +++ b/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 (
@@ -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)} />
@@ -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) } /> @@ -757,11 +741,9 @@ function RegisterAly() { var fortm = FormData; setFormData({ ...fortm, - pn: 1, }); setFormDatas({ ...fortm, - pn: 1, }); }} > @@ -857,7 +839,7 @@ function RegisterAly() { -
+ {/*
-
+
*/} diff --git a/src/pages/DataAnalysisPrediction/ParkingOverview/index.scss b/src/pages/DataAnalysisPrediction/ParkingOverview/index.scss index 187b8c5..3a6dddc 100644 --- a/src/pages/DataAnalysisPrediction/ParkingOverview/index.scss +++ b/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; + } } \ No newline at end of file diff --git a/src/pages/DataAnalysisPrediction/ParkingOverview/loadable.jsx b/src/pages/DataAnalysisPrediction/ParkingOverview/loadable.jsx index 5b816ea..59d31fb 100644 --- a/src/pages/DataAnalysisPrediction/ParkingOverview/loadable.jsx +++ b/src/pages/DataAnalysisPrediction/ParkingOverview/loadable.jsx @@ -3,17 +3,27 @@ import { message, Pagination, Input, + Tooltip, + Checkbox, AutoComplete, Table, Select, Modal, } from "antd"; -import { UserOutlined } from "@ant-design/icons"; -// import { dictionary, utils } from "@/config/common"; +import { EnvironmentOutlined, SearchOutlined } from "@ant-design/icons"; +import ReactEcharts from "echarts-for-react"; + +import { + ImgError, + ResultFlow, + ParkingViewMarkers, + BaseMap, + MarkCenter, +} from "@/components"; +import { dictionary, utils } from "@/config/common"; // import moment from 'moment' // import { useSessionStorageState, useUpdateEffect, useSize, useUpdate } from 'ahooks'; import ajax from "@/services"; -import { BaseMap } from "@/components"; import "./index.scss"; import Btckd from "@/assets/images/equip/home/bottom_checked.png"; import Pkhl from "@/assets/images/equip/home/pkhome_left.png"; @@ -25,89 +35,747 @@ import Lf4 from "@/assets/images/equip/home/left_4.png"; import Lf5 from "@/assets/images/equip/home/left_5.png"; import Lf6 from "@/assets/images/equip/home/left_6.png"; import Lf7 from "@/assets/images/equip/home/left_7.png"; +import Kx from "@/assets/images/equip/home/kx.png"; +import Yc from "@/assets/images/equip/home/yc.png"; +import Poto from "@/assets/images/equip/home/poto.png"; + // import errorImg from "@/assets/images/layout/error.png" // import { useLocation } from "react-router-dom"; function ParkingOverview() { + let timer = null; + //地图数据展示is + const MapS = [ + { + text: "热力图", + value: "1", + }, + { + text: "停车场", + value: "2", + }, + ]; + //右侧时间选择 + const Dayfour = [ + { + text: "今日", + value: "1", + }, + + { + text: "近7日", + value: "2", + }, + { + text: "近30日", + value: "3", + }, + { + text: "近12月", + value: "4", + }, + ]; + //底部车场类型切换 + const Road = [ + { + text: "全部车场", + value: "1", + }, + + { + text: "路内车场", + value: "2", + }, + { + text: "路外车场", + value: "3", + }, + ]; + //默认泊位列表检索 + const defaultform = { + berthCode: "", //编号 + parkingName: "", //停车场 + operatorId: "", //商户 + berthType: "", //泊位类型 + plate: "", //车牌 + pn: 1, + size: dictionary?.pageSizeOptions1[0], + }; + //默认泊位列表 + const column = [ + { + title: "泊位号", + dataIndex: "berthCode", + key: "berthCode", + align: "center", + }, + { + title: "所属路段", + dataIndex: "parkingName", + key: "parkingName", + align: "center", + }, + { + title: "区域", + dataIndex: "areaName", + key: "areaName", + align: "center", + }, + { + title: "商户", + dataIndex: "operatorName", + key: "operatorName", + align: "center", + }, + { + title: "泊位类型", + dataIndex: "berthTypeName", + key: "berthTypeName", + align: "center", + }, + { + title: "当前泊车", + dataIndex: "plate", + key: "plate", + align: "center", + }, + { + title: "更新时间", + dataIndex: "updateTime", + key: "updateTime", + align: "center", + }, + ]; + //泊位详情展示 + const DataDetail = [ + { + text: "商户:", + value: "operatorName", + }, + { + text: "泊位号:", + value: "berthCode", + }, + { + text: "入场时间:", + value: "inTime", + }, + { + text: "停车时长:", + value: "parkTime", + }, + { + text: "车牌号:", + value: "plate", + }, + { + text: "计费金额:", + value: "receivable_amount", + }, + { + text: "实收金额:", + value: "actual_amount", + }, + { + text: "停车场:", + value: "parkingName", + }, + ]; + //左侧数据储存 + const [LeftDataTop, setLeftDataTop] = useState({ + parkTotal: 0, + berthTotal: 0, + orderTotal: 0, + income: 0, + memberTotal: 0, + }); + const [LeftDataOther, setLeftDataOther] = useState({ + usage: 0, + turnoverRate: 0, + }); //左侧展示栏 const [LeftShow, setLeftShow] = useState([ { text: "车场总数", - value: "233", + value: "parkTotal", img: Lf1, status: "", }, { text: "泊位总数", - value: "42,176", + value: "berthTotal", img: Lf2, status: "", }, { text: "近7日交易订单数", - value: "60,637", + value: "orderTotal", img: Lf3, status: "单", }, { text: "近7日收入", - value: "264,578.000", + value: "income", img: Lf4, status: "元", }, { text: "近7日泊位利用率", - value: "228.80", + value: "usage", img: Lf5, status: "%", + other: true, + url: "/dataAlyPrediction/parkUsageAly", }, { text: "近7日泊位周转率", - value: "1.00", + value: "turnoverRate", img: Lf6, status: "次", + other: true, + url: "/dataAlyPrediction/parkTurnoverAly", }, { text: "注册会员", - value: "466,188", + value: "memberTotal", img: Lf7, status: "", }, ]); - //底部车场类型切换 - const Road = [ - { - text: "全部车场", - value: "0", - }, - { - text: "路内车场", - value: "1", - }, - { - text: "路外车场", - value: "2", - }, - ]; + //左侧车场信息是否展示 + const [LeftCar, setLeftCar] = useState(false); + //停车场和位置切换 + const [Selectq, setSelectq] = useState("1"); + //左侧泊位总数弹框展开类型等 + const [BoOpenClass, setBoOpenClass] = useState({ + width: 1632, + title: "泊位列表", + type: 1, + }); + //左侧泊位总数弹框展开 + const [BoOpen, setBoOpen] = useState(false); + //泊位详情 + const [BoOpenDetail, setBoOpenDetail] = useState(false); + + //商户 + const [Yunying, setYunying] = useState([]); + //检索 + const [FormData, setFormData] = useState(defaultform); + //页码状态 + const [loading, setLoading] = useState(false); + //页面数据 + const [Data, setData] = useState({ + data: [], + total: 0, + }); + + //中间 + const [Zata, setZata] = useState({ + income: "0", + parkNumber: "0", + }); + + //地图数据展示选择 + const [MapShow, setMapShow] = useState(["1", "2"]); + //地图点位数据 + const [MapData, setMapData] = useState([]); + //页面显示的车场数据 + const [RoadData, setRoadData] = useState({}); + //储存选择的位置信息 + const [Center, setCenter] = useState({ + lng: "", + lat: "", + name: "", + }); + //检索 + const [Value, setValue] = useState(""); + //检索下拉 + const [Option, setOption] = useState([]); + + //右侧时间切换 + const [DaySel, setDaySel] = useState("1"); + const [DaySet, setDaySet] = useState("1"); + const [DaySes, setDaySes] = useState("1"); + //右侧echarts列表数据 + const [RightOne, setRightOne] = useState({}); + const [RightTwo, setRightTwo] = useState({}); + const [RightThree, setRightThree] = useState({}); + //底部车场类型切换 - const [RoadSelect, setRoadSelect] = useState("0"); + const [RoadSelect, setRoadSelect] = useState("1"); //底部车场切换数据 const [CarRoad, setCarRoad] = useState([ { text: "西海岸新区", value: "1", }, - { - text: "西海岸东区", - value: "2", - }, - { - text: "西海岸南区", - value: "3", - }, ]); //底部车场切换展示 const [CarShow, setCarShow] = useState(0); + + //页码 + function onShowSizeChange(pn, size) { + let temFormData = {}; + if (FormData.size == size) { + temFormData = { + ...FormData, + pn, + }; + } else { + temFormData = { + ...FormData, + pn: 1, + size, + }; + } + setFormData(temFormData); + getData(temFormData); + } + //停车场和位置切换 + const hangChange = (val) => { + setSelectq(val); + if (val == "2") { + setLeftCar(false); + } + setOption([]); + }; + //地图点位点击 + const ClickMap = (val) => { + setRoadData(val); + setLeftCar(true); + }; + //选择 + const onSelect = (data) => { + if (Selectq == "1") { + let add = Option.filter((ele) => ele.parkName == data)[0].road_id || ""; + let arr = MapData.filter((ele) => ele.roadId == add)[0]; + if (arr) { + setRoadData(arr); + setLeftCar(true); + } else { + setLeftCar(false); + message.error("未找到相关车场信息"); + } + } else { + let dasd = Option.filter((ele) => ele.address == data)[0] || {}; + setCenter({ + lng: dasd?.longitude || "", + lat: dasd?.latitude || "", + name: dasd.address || "", + }); + } + }; + //输入 + const AutoChange = (data) => { + setValue(data); + }; + //模糊 + const AutoChangesize = (data) => { + if (data) { + if (Selectq == "1") { + ajax.ParkingOverview.searchPark({ + type: RoadSelect, + keywords: data, + }).then( + (res) => { + if (parseInt(res?.status) === 20000) { + setOption( + res?.data.map((ele) => { + return { + label: ( +
+ + {ele.parkName} +
+ ), + value: ele.parkName, + ...ele, + }; + }) + ); + } else { + message.error(res?.message); + } + setLoading(true); + }, + (err) => { + console.log(err); + setLoading(true); + } + ); + } else { + ajax.ParkingOverview.searchGeocode({ + keywords: data, + }).then( + (res) => { + if (parseInt(res?.status) === 20000) { + setOption( + res?.data.map((ele) => { + return { + label: ( +
+ + {ele.address} +
+ ), + value: ele.address, + ...ele, + }; + }) + ); + } else { + message.error(res?.message); + } + setLoading(true); + }, + (err) => { + console.log(err); + setLoading(true); + } + ); + } + } else { + setOption([]); + } + }; + + //右侧时间切换 + const SelectDay = (str, val) => { + if (str == 1) { + setDaySel(val); + GetComplaintType(RoadSelect, val); + } else if (str == 2) { + setDaySet(val); + GetParkingEvaluate(RoadSelect, val); + } else if (str == 3) { + setDaySes(val); + GetRevenueAnalysis(RoadSelect, val); + } + }; + function sum(arr) { + var len = arr.length; + if (len == 0) { + return 0; + } else if (len == 1) { + return arr[0]; + } else { + return arr[0] + sum(arr.slice(1)); + } + } + //右侧上、中echarts + const getOingOption = ( + datas = [ + { + key: "停车次数", + value: 0, + }, + { + key: "功能异常", + value: 0, + }, + ] + ) => { + // 获取所有地区名称 + const arrleft = + datas.map((ele) => { + return { + name: ele.key, + value: ele.value, + }; + }) || []; + setRightOne({ + title: { + text: "{a|" + sum(datas.map((ele) => ele.value)) + "}{c|次}", + x: "center", + y: "center", + subtext: "客诉总数", + subtextStyle: { + color: "#fff", + fontSize: 14, + }, + textStyle: { + rich: { + a: { + fontSize: 30, + color: "#4DC3FF", + }, + + c: { + fontSize: 14, + color: "#4DC3FF", + // padding: [5,0] + }, + }, + }, + }, + tooltip: { + trigger: "item", + formatter: (params) => { + return `
${params.marker} ${params.name} ${params.value}次 ${params.percent}%
`; + }, + }, + legend: { + type: "scroll", + //right: "5%", + top: "bottom", + bottom: "center", + //data: areaNames, + data: datas.map((ele) => ele.key), + itemWidth: 18, + itemHeight: 12, + textStyle: { + fontSize: 14, + color: "white", + }, + }, + + // color: ["#34F3B6", "#4DC3FF"], + //series: seriesData, + series: [ + { + // name: 'Access From', + type: "pie", + radius: ["60%", "70%"], + avoidLabelOverlap: false, + label: { + show: false, + position: "center", + }, + // emphasis: { + // label: { + // show: true, + // fontSize: 40, + + // fontWeight: "bold", + // }, + // }, + labelLine: { + show: false, + }, + data: arrleft, + }, + ], + grid: { + x: 50, + y: 55, + x2: 70, + y2: 20, + }, + }); + }; + const getRingOption = ( + datas = [ + { + key: "1星", + value: 0, + }, + { + key: "2星", + value: 0, + }, + { + key: "3星", + value: 0, + }, + { + key: "4星", + value: 0, + }, + { + key: "5星", + value: 0, + }, + ] + ) => { + // 获取所有地区名称 + + const arrRight = + datas.map((ele) => { + return { + name: ele.key, + value: ele.value, + }; + }) || []; + setRightTwo({ + title: { + text: "{a|" + sum(datas.map((ele) => ele.value)) + "}{c|次}", + x: "center", + y: "center", + subtext: "评价总数", + subtextStyle: { + color: "#fff", + fontSize: 14, + }, + textStyle: { + rich: { + a: { + fontSize: 30, + color: "#4DC3FF", + }, + + c: { + fontSize: 14, + color: "#4DC3FF", + // padding: [5,0] + }, + }, + }, + }, + tooltip: { + trigger: "item", + formatter: (params) => { + return `
${params.marker} ${params.name} ${params.value}次 ${params.percent}%
`; + }, + }, + legend: { + type: "scroll", + //right: "5%", + top: "bottom", + bottom: "center", + //data: areaNames, + data: ["1星", "2星", "3星", "4星", "5星"], + itemWidth: 18, + itemHeight: 12, + textStyle: { + fontSize: 14, + color: "white", + }, + }, + + // color: ["#34F3B6", "#4DC3FF"], + //series: seriesData, + series: [ + { + // name: 'Access From', + type: "pie", + radius: ["60%", "70%"], + avoidLabelOverlap: false, + label: { + show: false, + position: "center", + }, + // emphasis: { + // label: { + // show: true, + // fontSize: 40, + // fontWeight: "bold", + // }, + // }, + labelLine: { + show: false, + }, + data: arrRight, + }, + ], + grid: { + x: 50, + y: 55, + x2: 70, + y2: 20, + }, + }); + }; + //右下 + const getRevenueOption = ( + data = [ + { + key: "", + value: 0, + }, + ] + ) => { + // 获取所有地区名称 + + setRightThree({ + title: { + text: "", + textStyle: { + color: "#fff", + }, + }, + tooltip: { + trigger: "axis", + formatter: (params) => { + console.log(params); + return `
+ ${params[0].axisValue} ${params[0].seriesName} ${params[0].value} +
`; + }, + }, + legend: { + type: "scroll", + top: 0, + left: "center", + data: "停车收入(元)", + itemWidth: 18, + itemHeight: 12, + width: "40%", + textStyle: { + fontSize: 14, + color: "white", + }, + }, + xAxis: { + data: data.map((ele) => ele.key), + type: "category", + boundaryGap: false, // 不留白，从原点开始 + axisLine: { + lineStyle: { + color: "#bbb", + }, + }, + axisLabel: { + textStyle: { + color: "#bbb", + }, + }, + }, + yAxis: { + type: "value", + name: "停车收入(元)", + min: 0, + // /max: 50, + interval: 10, + // splitNumber: 6, //设置坐标轴的分割段数 + axisLabel: { + //formatter: "{value}元", + textStyle: { + color: "#bbb", + }, + }, + splitLine: { + show: true, // 是否显示分隔线。默认数值轴显示，类目轴不显示 + interval: "0", // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有 + lineStyle: { + color: ["#cccccc42"], // 分隔线颜色，可以设置成单个颜色，也可以设置成颜色数组，分隔线会按数组中颜色的顺序依次循环设置颜色 + width: 1.3, // 分隔线线宽 + type: "dashed", // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型） + }, + }, + }, + color: ["#0DE1FA"], + //series: seriesData, + series: [ + { + name: "停车收入", + type: "line", + areaStyle: { + //color: '#94C9EC' + + color: "rgba(13,225,250, .31)", + }, + data: data.map((ele) => ele.value), + }, + ], + grid: { + x: 50, + y: 35, + x2: 20, + y2: 30, + }, + }); + }; + //底部车场切换 const BottomCar = (val) => { let length = CarRoad.length; @@ -130,29 +798,329 @@ function ParkingOverview() { const BottomTab = (val) => { setRoadSelect(val); }; + + //获取左边数据(不包括7日利用率和周转) + const GetOverviewData = (val) => { + ajax.ParkingOverview.GetOverviewData({ type: val }).then( + (res) => { + if (parseInt(res?.status) === 20000) { + setLeftDataTop({ ...res?.data }); + } else { + message.error(res?.message); + } + setLoading(true); + }, + (err) => { + console.log(err); + setLoading(true); + } + ); + }; + //获取左边数据(7日利用率和周转) + const GetUseInfo = (val) => { + ajax.ParkingOverview.GetUseInfo({ type: val }).then( + (res) => { + if (parseInt(res?.status) === 20000) { + setLeftDataOther({ ...res.data }); + } else { + message.error(res?.message); + } + setLoading(true); + }, + (err) => { + console.log(err); + setLoading(true); + } + ); + }; + + //获取泊位页面筛选数据 + const getSelectData = () => { + ajax.getAllOperator().then( + (res) => { + if (parseInt(res?.status) === 20000) { + setYunying(res.data); + } else { + message.error(res?.message); + } + setLoading(true); + }, + (err) => { + console.log(err); + setLoading(true); + } + ); + }; + //获取点位数据 + const getMapData = (val) => { + ajax.ParkingOverview.getMapData({ type: val }).then( + (res) => { + if (parseInt(res?.status) === 20000) { + let arrcopy = res?.data.map((ele, index) => { + if (ele.usageRate) { + let user = ele.usageRate.slice(0, ele.usageRate.length - 1); + if (user >= 50) { + return { + ...ele, + lat: ele.latitude, + lng: ele.longitude, + type: 1, + id: index, + text: ele.parkName, + }; + } else if (user <= 20) { + return { + ...ele, + lat: ele.latitude, + lng: ele.longitude, + type: 3, + id: index, + text: ele.parkName, + }; + } else { + return { + ...ele, + lat: ele.latitude, + lng: ele.longitude, + type: 2, + id: index, + text: ele.parkName, + }; + } + } + }); + setMapData(arrcopy); + } else { + message.error(res?.message); + } + setLoading(true); + }, + (err) => { + console.log(err); + setLoading(true); + } + ); + }; + //获取今日收入和服务车辆- + const GetDataStatic = (val) => { + ajax.ParkingOverview.GetDataStatic({ type: val }).then( + (res) => { + if (parseInt(res?.status) === 20000) { + setZata(res?.data); + } else { + message.error(res?.message); + } + setLoading(true); + }, + (err) => { + console.log(err); + setLoading(true); + } + ); + }; + //获取收入分析 + const GetRevenueAnalysis = (val, item) => { + ajax.ParkingOverview.GetRevenueAnalysis({ type: val, dateType: item }).then( + (res) => { + if (parseInt(res?.status) === 20000) { + // setZata(res?.data); + getRevenueOption(res.data || []); + } else { + message.error(res?.message); + } + setLoading(true); + }, + (err) => { + console.log(err); + setLoading(true); + } + ); + }; //获取车场评价 + const GetParkingEvaluate = (val, item) => { + ajax.ParkingOverview.GetParkingEvaluate({ type: val, dateType: item }).then( + (res) => { + if (parseInt(res?.status) === 20000) { + // setZata(res?.data); + getRingOption(res?.data); + } else { + message.error(res?.message); + } + setLoading(true); + }, + (err) => { + console.log(err); + setLoading(true); + } + ); + }; //获取客诉类型分析 + const GetComplaintType = (val, item) => { + ajax.ParkingOverview.GetComplaintType({ type: val, dateType: item }).then( + (res) => { + if (parseInt(res?.status) === 20000) { + getOingOption(res?.data); + } else { + message.error(res?.message); + } + setLoading(true); + }, + (err) => { + console.log(err); + setLoading(true); + } + ); + }; + + //获取泊位页面显示数据 + const getData = (data) => { + setLoading(false); + ajax.ParkingOverview.getParkingBoW({ + ...data, + }).then( + (res) => { + if (parseInt(res?.status) === 20000) { + setData({ + data: res?.data || [], + total: res.total || 0, + }); + setLoading(true); + } else { + message.error(res?.message); + } + setLoading(true); + }, + (err) => { + console.log(err); + setLoading(true); + } + ); + }; + //获取实时泊位显示数据 + const getSituationData = (data) => { + setLoading(false); + ajax.ParkingOverview.getSituationData({ + roadId: data, + }).then( + (res) => { + if (parseInt(res?.status) === 20000) { + setBoOpenClass({ + width: 1540, + title: RoadData?.text || "--", + type: 2, + }); + setData({ + data: res?.data || [], + }); + setBoOpen(true); + setLoading(true); + } else { + message.error(res?.message); + } + setLoading(true); + }, + (err) => { + console.log(err); + setLoading(true); + } + ); + }; + //获取实时泊位显示详情数据 + const getSituationDetailData = (data) => { + setLoading(false); + ajax.ParkingOverview.getSituationDetailData({ + roadId: data, + }).then( + (res) => { + setBoOpen(false); + if (parseInt(res?.status) === 20000) { + setData({ + data: res?.data, + }); + setBoOpenClass({ + ...BoOpenClass, + width: 1060, + type: 3, + }); + setBoOpenDetail(true); + setLoading(true); + } else { + message.error(res?.message); + } + setLoading(true); + }, + (err) => { + console.log(err); + setLoading(true); + } + ); + }; + useEffect(() => { + setDaySel("1"); + setDaySet("1"); + setDaySes("1"); + getMapData(RoadSelect); + GetDataStatic(RoadSelect); + GetOverviewData(RoadSelect); + GetUseInfo(RoadSelect); + GetRevenueAnalysis(RoadSelect, "1"); + GetParkingEvaluate(RoadSelect, "1"); + GetComplaintType(RoadSelect, "1"); + }, [RoadSelect]); + useEffect(() => { + getSelectData(); + return () => {}; + }, []); return (
西海岸新区停车信息管理平台
停车业务概览
- {LeftShow.map((ele) => { - return ( -
- -
-
-

{ele.value}

- {ele.status} +
+ {LeftShow.map((ele) => { + return ( +
{ + if (ele?.url) { + window.location = `/#${ele.url}`; + } + if (ele.text == "泊位总数") { + getData(FormData); + setBoOpenClass({ + width: 1632, + title: "泊位列表", + type: 1, + }); + setBoOpen(true); + } + }} + key={ele.text} + > + +
+
+

+ {ele.other + ? LeftDataOther[ele.value] + : LeftDataTop[ele.value]} +

+ {ele.status} +
+ {ele.text}
- {ele.text}
-
- ); - })} + ); + })} +
+ setFormData({ + ...FormData, + berthCode: e.target.value, + }) + } + /> +
+
+
+ 停车场名称 +
+ + setFormData({ + ...FormData, + parkingName: e.target.value, + }) + } + /> +
+
+
+ 商户 +
+ + setFormData({ + ...FormData, + berthType: e, + }) + } + /> +
+
+
+ 车牌号 +
+ + setFormData({ + ...FormData, + plate: e.target.value, + }) + } + /> +
+
+
+ { + var fortm = FormData; + setFormData({ + ...fortm, + pn: 1, + }); + getData({ + ...fortm, + pn: 1, + }); + }} + > + 查询 + + { + var reset = defaultform; + setFormData(reset); + getData(reset); + }} + > + 重置 + +
+
+ +
+
+ record.id} + dataSource={Data.data} + pagination={false} + scroll={{ + // x: 1300, + y: "calc(100vh - 520px)", + }} + /> + + + +
+ `共 ${total_records} 条`} + total={Data.total} + current={FormData.pn} + pageSize={FormData.size} + pageSizeOptions={dictionary?.pageSizeOptions} + onChange={onShowSizeChange} + onShowSizeChange={onShowSizeChange} + /> +
+ + + ) : BoOpenClass.type == 2 ? ( +
+ {Data.data.map((ele) => { + return ( +
{ + if (ele.status == 1) { + getSituationDetailData(ele?.berthCode); + } + }} + > + +

{ele?.status == 1 ? ele?.plate : "车位空闲"}

+ {ele?.berthCode} +
+ ); + })} +
+ ) : ( +
+
+ {DataDetail.map((ele) => { + return ( +
+ {ele?.text} +

+ {ele?.value || "--"} +

+
+ ); + })} +
+
+
+ )} + + { + setBoOpenDetail(false); + setData({ + data: [], + total: 0, + }); + }} + > + 返回 + + } + onCancel={() => { + setBoOpenDetail(false); + setData({ + data: [], + total: 0, + }); + }} + width={BoOpenClass.width} + destroyOnClose + className="modal-boeat" + title={BoOpenClass.title} + > +
+
+ {DataDetail.map((ele) => { + return ( +
+ {ele?.text} +

+ {Data.data[ele?.value] || "--"} +

+
+ ); + })} +
+
+
+ + 入场照片 +
+
+
+
+

全景照片

+
+ +
+
+
+

车辆照片

+
+ +
+
+
+

车牌照片

+
+ +
+
+
+
+ ); } diff --git a/src/services/ElectInvoice/index.js b/src/services/ElectInvoice/index.js index f47f557..e6cdec8 100644 --- a/src/services/ElectInvoice/index.js +++ b/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, }; diff --git a/src/services/ParkingOverview/index.js b/src/services/ParkingOverview/index.js new file mode 100644 index 0000000..9d51308 --- /dev/null +++ b/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, + }); + }, +}; diff --git a/src/services/index.js b/src/services/index.js index 7141565..0b96648 100644 --- a/src/services/index.js +++ b/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, };