diff --git a/public/index.html b/public/index.html index 342ee7c..4928cb9 100644 --- a/public/index.html +++ b/public/index.html @@ -15,6 +15,8 @@ + diff --git a/src/assets/images/equip/home/stop.png b/src/assets/images/equip/home/stop.png new file mode 100644 index 0000000..6bd767f Binary files /dev/null and b/src/assets/images/equip/home/stop.png differ diff --git a/src/components/MapComponets/ParkViewCirMar/index.jsx b/src/components/MapComponets/ParkViewCirMar/index.jsx new file mode 100644 index 0000000..ecff619 --- /dev/null +++ b/src/components/MapComponets/ParkViewCirMar/index.jsx @@ -0,0 +1,122 @@ +import React, { useState, useEffect, useRef } from "react"; +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 = [], + clickCb, // 点击事件 + } = props; + let count = data.length; + var Mapmove = new AMap.Marker({ content: " ", map: map }); + const retext = (val) => { + var str = mgreen; + if (val == 1) { + str = mgred; + } else if (val == 2) { + str = mgyellow; + } + return `
+ +
`; + }; + + const [massLayer, setMassLayer] = useState(null); // 聚合点 + const massLayerRef = useRef(massLayer); + massLayerRef.current = massLayer; + + // const [CurrenZoom, setCurrenZoom] = useState(sysConfig.map.zoom); + const _renderClusterMarker = (context) => { + var factor = Math.pow(context.count / count, 1 / 18); + var div = document.createElement("div"); + var Hue = 180 - factor * 180; + var bgColor = "hsla(" + Hue + ",100%,50%,0.7)"; + var fontColor = "hsla(" + Hue + ",100%,20%,1)"; + var borderColor = "hsla(" + Hue + ",100%,40%,1)"; + var shadowColor = "hsla(" + Hue + ",100%,50%,1)"; + div.style.backgroundColor = bgColor; + var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20); + div.style.width = div.style.height = size + "px"; + div.style.border = "solid 1px " + borderColor; + div.style.borderRadius = size / 2 + "px"; + div.style.boxShadow = "0 0 1px " + shadowColor; + div.innerHTML = context.count; + div.style.lineHeight = size + "px"; + div.style.color = fontColor; + div.style.fontSize = "14px"; + div.style.textAlign = "center"; + context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2)); + context.marker.setContent(div); + }; + + useEffect(() => { + if (data.length) { + let _mass = handleLocation(data); // 处理点位数据 + addMarker(_mass); // 添加点位 + } else { + if (massLayerRef.current) { + massLayerRef.current?.setMap(null); + } + } + }, [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 mark = new AMap.Marker({ + position: [parseFloat(elem.longitude), parseFloat(elem.latitude)], + content: retext(elem.type), + name: elem.text, + id: elem.roadId || elem.id, + option: elem, + offset: new AMap.Pixel(-15, -15), + }); + mark.on("click", function (e) { + clickCb(e.target.w.option); + }); + mark.on("mouseover", function (e) { + let data = e.target.w; + // clearTimeout(timer); + Mapmove.setPosition(e.target.getPosition()); + Mapmove.setLabel({ + content: `${data.name} (${data?.option?.userTotal}/${data?.option?.berthTotal})`, + }); + }); + mark.on("mouseout", function () { + Mapmove.setLabel(""); + }); + object.push(mark); + } + return object; + }; + + //聚合点 + const addMarker = (markerArr) => { + if (massLayerRef.current) { + massLayerRef.current?.setMap(null); + } + let cluster = new AMap.MarkerClusterer(map, markerArr, { + renderClusterMarker: _renderClusterMarker, + gridSize: 80, + minClusterSize: 3, + }); + setMassLayer(cluster); + }; + + return null; +} + +export default Markers; diff --git a/src/components/MapComponets/ParkViewCirMar/index.scss b/src/components/MapComponets/ParkViewCirMar/index.scss new file mode 100644 index 0000000..50e3f72 --- /dev/null +++ b/src/components/MapComponets/ParkViewCirMar/index.scss @@ -0,0 +1,108 @@ +.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; +} + +// .amap-info-window { +// width: 150px; +// background: #fff; +// border-radius: 3px; +// padding: 3px 7px; +// box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5); +// position: relative; +// } + +// .amap-info-sharp { +// position: absolute; +// top: 21px; +// bottom: 0; +// left: 50%; +// margin-left: -8px; +// border-left: 8px solid transparent; +// border-right: 8px solid transparent; +// border-top: 8px solid #fff; +// } +.amap-marker { + .amap-marker-label { + color: #172c4d; + } +} \ No newline at end of file diff --git a/src/components/MapComponets/ParkingViewMarkers/index.jsx b/src/components/MapComponets/ParkingViewMarkers/index.jsx index 7ad3036..469b877 100644 --- a/src/components/MapComponets/ParkingViewMarkers/index.jsx +++ b/src/components/MapComponets/ParkingViewMarkers/index.jsx @@ -14,6 +14,7 @@ function Markers(props) { iconAnchor = [15, 20], // 图片偏移量 tooltipKey = "name", // 提示信息的key // contentCb, // 生成弹窗显示内容方法事件 + iszoom = false, mover = false, moveContent, clickCb, // 点击事件 @@ -26,12 +27,8 @@ function Markers(props) { const [massData, setMassData] = useState([]); // 海量点数据 const massObjRef = useRef(); massObjRef.current = massObj; - const markerContent = (type) => { - let urls = type == 1 ? mgred : type == 3 ? mgreen : mgyellow; - return `
- -
`; - }; + const [CurrenZoom, setCurrenZoom] = useState(""); + var style = [ { zIndex: 0, @@ -80,7 +77,6 @@ function Markers(props) { zIndex: 5, // 海量点图层叠加的顺序 // cursor: "pointer", style: style, // 该层内标注是否避让 - // allowCollision: true, }); // 创建海量点图层 setMassLayer(_massLayer); if (data.length) { @@ -136,8 +132,8 @@ function Markers(props) { clearTimeout(timer); Mapmove.setPosition(e.data.lnglat); Mapmove.setLabel({ - content: moveContent? - ` + content: moveContent + ? `
车场名称：${e.data.option.name} 标签：${e.data.option.label} @@ -146,7 +142,7 @@ function Markers(props) { 平均停车时长：${e.data.option.average_duration}
` - :`${e.data.name} (${e.data?.option?.userTotal}/${e.data?.option?.berthTotal})`, + : `${e.data.name} (${e.data?.option?.userTotal}/${e.data?.option?.berthTotal})`, }); // if (position) { // Mapmove.setContent( diff --git a/src/components/MapComponets/index.jsx b/src/components/MapComponets/index.jsx index 180ecbc..7169125 100644 --- a/src/components/MapComponets/index.jsx +++ b/src/components/MapComponets/index.jsx @@ -5,7 +5,8 @@ import Marker from "./Marker"; import ParkingViewMarkers from "./ParkingViewMarkers"; import MarkCenter from "./MarkCenter"; import Reat from "./Reat"; -import AMap from './AMap'; +import AMap from "./AMap"; +import ParkViewCirMar from "./ParkViewCirMar"; export { BaseMap, @@ -15,5 +16,6 @@ export { MarkCenter, ParkingViewMarkers, Reat, - AMap + AMap, + ParkViewCirMar, }; diff --git a/src/pages/DataAnalysisPrediction/ParkingOverview/Map.jsx b/src/pages/DataAnalysisPrediction/ParkingOverview/Map.jsx index f02ac4c..8c34a9a 100644 --- a/src/pages/DataAnalysisPrediction/ParkingOverview/Map.jsx +++ b/src/pages/DataAnalysisPrediction/ParkingOverview/Map.jsx @@ -32,8 +32,10 @@ function BaseMap(props) { let _map = new AMap.Map("map", { // mapStyle: "amap://styles/darkblue", //设置地图的显示样式 mapStyle: "amap://styles/blue", //设置地图的显示样式 - viewMode: "3D", //设置地图模式 - pitch: 45, + // viewMode: "3D", //设置地图模式 + // pitch: 45, + // Label: "#fff", + zoom: zoom ? zoom : mapConfig.zoom, //初始化地图层级 center: new AMap.LngLat(mapConfig.center[1], mapConfig.center[0]), //初始化地图中心点 }); @@ -46,9 +48,6 @@ function BaseMap(props) { onClick(info); }); } - - // mapLayer.addTo(_map); - // setMapLayer(mapLayer) mapRef.current = map; setHasInit(true); }; diff --git a/src/pages/DataAnalysisPrediction/ParkingOverview/index.scss b/src/pages/DataAnalysisPrediction/ParkingOverview/index.scss index b2a8756..c41819d 100644 --- a/src/pages/DataAnalysisPrediction/ParkingOverview/index.scss +++ b/src/pages/DataAnalysisPrediction/ParkingOverview/index.scss @@ -225,9 +225,27 @@ $color-primary : var(--color-primary); background: url("@/assets/images/equip/home/lb.png"); // border: #75DDFF 4px solid; margin-bottom: 0%; + cursor: pointer; + // font-size: 20px; // color: #75DDFF; // background: rgba(1,5,14,0.64); + img { + display: none; + } + } + + .stop { + border: #75ddff 1px solid; + display: flex; + justify-content: center; + align-items: center; + background-image: none; + + img { + width: 28px; + display: inline-block; + } } div { @@ -255,7 +273,7 @@ $color-primary : var(--color-primary); display: flex; height: calc(100% - 50px); flex-direction: column; - justify-content: space-between; + justify-content: space-around; } @@ -663,7 +681,7 @@ $color-primary : var(--color-primary); display: flex; height: 48px; display: flex; - justify-content: space-between; + justify-content: space-around; align-items: center; padding: 0 10px; diff --git a/src/pages/DataAnalysisPrediction/ParkingOverview/loadable.jsx b/src/pages/DataAnalysisPrediction/ParkingOverview/loadable.jsx index 48702bc..6aa82bd 100644 --- a/src/pages/DataAnalysisPrediction/ParkingOverview/loadable.jsx +++ b/src/pages/DataAnalysisPrediction/ParkingOverview/loadable.jsx @@ -11,12 +11,7 @@ import { Progress, Modal, } from "antd"; -import { - EnvironmentOutlined, - SearchOutlined, - BellOutlined, - SoundOutlined, -} from "@ant-design/icons"; +import { EnvironmentOutlined, SearchOutlined } from "@ant-design/icons"; import { json, useLocation, useNavigate } from "react-router-dom"; import ReactEcharts from "echarts-for-react"; import * as echarts from "echarts"; @@ -25,7 +20,7 @@ import "echarts-gl"; import { ImgError, ResultFlow, - ParkingViewMarkers, + ParkViewCirMar, MarkCenter, Reat, } from "@/components"; @@ -44,14 +39,10 @@ import nd from "@/assets/images/equip/home/nd.png"; import Lf3 from "@/assets/images/equip/home/left_3.png"; import Lf4 from "@/assets/images/equip/home/left_4.png"; import rd from "@/assets/images/equip/home/rd.png"; -import Lf6 from "@/assets/images/equip/home/left_6.png"; import Lf7 from "@/assets/images/equip/home/left_7.png"; import Lf8 from "@/assets/images/equip/home/ldzs.png"; import Lfa from "@/assets/images/equip/home/left_a.png"; -import Lfb from "@/assets/images/equip/home/left_b.png"; -import Lfc from "@/assets/images/equip/home/left_c.png"; -import Lff from "@/assets/images/equip/home/left_f.png"; - +import Lff from "@/assets/images/equip/home/stop.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"; @@ -103,7 +94,7 @@ const ParkingOverview = connect(function mapStateToProps(state) { }, { - text: "近3日", + text: "昨日", value: "2", }, { @@ -118,11 +109,6 @@ const ParkingOverview = connect(function mapStateToProps(state) { //底部车场类型切换 const Road = [ { - text: "全部车场", - value: "1", - }, - - { text: "路内车场", value: "2", }, @@ -287,32 +273,32 @@ const ParkingOverview = connect(function mapStateToProps(state) { status: "元", tod: false, }, - { - text: "昨日泊位利用率", - value: "usage", - img: Lfc, - status: "%", - other: true, - tod: true, - url: "/dataAlyPrediction/parkUsageAly", - }, - { - text: "昨日出入场流率", - value: "flowrate", - img: Lfc, - status: "%", - tod: true, - other: true, - }, - { - text: "昨泊位周转率", - value: "turnoverRate", - img: Lff, - status: "次", - other: true, - tod: true, - url: "/dataAlyPrediction/parkTurnoverAly", - }, + // { + // text: "昨日泊位利用率", + // value: "usage", + // img: Lfc, + // status: "%", + // other: true, + // tod: true, + // url: "/dataAlyPrediction/parkUsageAly", + // }, + // { + // text: "昨日出入场流率", + // value: "flowrate", + // img: Lfc, + // status: "%", + // tod: true, + // other: true, + // }, + // { + // text: "昨泊位周转率", + // value: "turnoverRate", + // img: Lff, + // status: "次", + // other: true, + // tod: true, + // url: "/dataAlyPrediction/parkTurnoverAly", + // }, { text: "注册会员", value: "memberTotal", @@ -349,32 +335,32 @@ const ParkingOverview = connect(function mapStateToProps(state) { img: Lfa, tod: false, }, - { - text: "昨日泊位利用率", - value: "usage", - img: Lfc, - status: "%", - tod: true, - other: true, - url: "/dataAlyPrediction/parkUsageAly", - }, - { - text: "昨日出入场流率", - value: "flowrate", - img: Lfb, - status: "%", - tod: true, - other: true, - }, - { - text: "昨泊位周转率", - value: "turnoverRate", - img: Lff, - status: "次", - tod: true, - other: true, - url: "/dataAlyPrediction/parkTurnoverAly", - }, + // { + // text: "昨日泊位利用率", + // value: "usage", + // img: Lfc, + // status: "%", + // tod: true, + // other: true, + // url: "/dataAlyPrediction/parkUsageAly", + // }, + // { + // text: "昨日出入场流率", + // value: "flowrate", + // img: Lfb, + // status: "%", + // tod: true, + // other: true, + // }, + // { + // text: "昨泊位周转率", + // value: "turnoverRate", + // img: Lff, + // status: "次", + // tod: true, + // other: true, + // url: "/dataAlyPrediction/parkTurnoverAly", + // }, { text: "注册会员", value: "memberTotal", @@ -391,6 +377,8 @@ const ParkingOverview = connect(function mapStateToProps(state) { }, ]); + //是否开启声音播放 + const [SpeakStop, setSpeakStop] = useState(false); //左侧车场信息是否展示 const [LeftCar, setLeftCar] = useState(false); //停车场和位置切换 @@ -469,7 +457,7 @@ const ParkingOverview = connect(function mapStateToProps(state) { const [RightThree, setRightThree] = useState({}); //底部车场类型切换 - const [RoadSelect, setRoadSelect] = useState("1"); + const [RoadSelect, setRoadSelect] = useState("2"); //底部车场切换数据 const [CarRoad, setCarRoad] = useState([ { @@ -581,37 +569,6 @@ const ParkingOverview = connect(function mapStateToProps(state) { timer = setTimeout(() => { setWei(data); }, 1000); - // ajax.ParkingOverview.searchGeocode({ - // key: "a54fb01ed4e07686adc0eddf4e18afd7", - // address: data, - // }).then( - // (res) => { - // console.log(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([]); @@ -812,7 +769,7 @@ const ParkingOverview = connect(function mapStateToProps(state) { }, yAxis: { type: "value", - name: "停车收入(元)", + name: "金额(元)", min: 0, // /max: 50, // interval: 10, @@ -902,7 +859,6 @@ const ParkingOverview = connect(function mapStateToProps(state) { }; //语音播报 const SpeakWord = (val) => { - setText(val); var utterThis = new window.SpeechSynthesisUtterance(val); window.speechSynthesis.speak(utterThis); }; @@ -975,7 +931,6 @@ const ParkingOverview = connect(function mapStateToProps(state) { sysConfig?.messageConst?.wssUrl || "wss://acb-pre.xihaianparking.com/PMS/ws/re" ); - // console.log(props.user.userInfo.user_uid); crtimer.onopen = function (data) { var mess = { class: "Overview", @@ -992,7 +947,8 @@ const ParkingOverview = connect(function mapStateToProps(state) { crtimer.onmessage = function (evt) { var data = JSON.parse(evt.data); if (data?.data?.type == "inOutNotice") { - SpeakWord(data?.data?.content); + let yune = data?.data?.content; + setText(yune); } else if (data?.data?.type == "arrears") { setqfdata([data?.data]); setHoShow(true); @@ -1323,7 +1279,12 @@ const ParkingOverview = connect(function mapStateToProps(state) { GetParkparkIncomeRank(RoadSelect, "1"); } }, [RoadSelect, CarShow]); - + useEffect(() => { + if (SpeakStop) { + SpeakWord(Text); + } + return () => {}; + }, [SpeakStop, Text]); useEffect(() => { getSelectData(); if (process.env.NODE_ENV !== "development") { @@ -1526,26 +1487,17 @@ const ParkingOverview = connect(function mapStateToProps(state) { )} {
-

{/* */}

+

{ + setSpeakStop(!SpeakStop); + }} + > + +

{Text}
} - {/*
-
-
-

{Zata?.income}

- 元 -
- 今日收入 -
-
-
-

{Zata?.parkNumber}

- 次 -
- 今日服务车次数 -
-
*/}
{MapS.map((ele) => { @@ -1596,7 +1548,9 @@ const ParkingOverview = connect(function mapStateToProps(state) {
- {CarRoad[CarShow]?.type == 2 ? "收费员排行Top5" : "车场收入排行榜"} + {CarRoad[CarShow]?.type == 2 + ? "收费员排行Top5" + : "路段周转次数排行榜"}
{CarRoad[CarShow]?.type == 2 ? ( "" @@ -1662,22 +1616,26 @@ const ParkingOverview = connect(function mapStateToProps(state) {
- {CarRoad[CarShow]?.type == 2 ? "营业收入分析" : "车场周转率TOP3"} + {CarRoad[CarShow]?.type == 2 ? "实时收入占比" : "路段收费率排行榜"}
- {Dayfour.map((ele) => { - return ( - SelectDay(2, ele.value)} - > - {ele.text} - - ); - })} + {CarRoad[CarShow]?.type != 2 + ? Dayfour.map((ele) => { + return ( + SelectDay(2, ele.value)} + > + {ele.text} + + ); + }) + : ""}
{CarRoad[CarShow]?.type == 1 ? (
@@ -1717,7 +1675,7 @@ const ParkingOverview = connect(function mapStateToProps(state) { ?
-
+ {/*
{Dayfour.map((ele) => { return ( ); })} -
+
*/} - { ClickMap(ele); }} diff --git a/src/pages/FinancialMgm/SettleBill/GeneralBusiness/loadable.jsx b/src/pages/FinancialMgm/SettleBill/GeneralBusiness/loadable.jsx index 2afff2e..bf259d9 100644 --- a/src/pages/FinancialMgm/SettleBill/GeneralBusiness/loadable.jsx +++ b/src/pages/FinancialMgm/SettleBill/GeneralBusiness/loadable.jsx @@ -95,7 +95,7 @@ function GeneralBusiness() { }, { title: () => 平台方收款金额, - width: 120, + width: 150, dataIndex: "sysMoney", key: "sysMoney", align: "center", @@ -105,7 +105,7 @@ function GeneralBusiness() { }, { title: () => 平台方退款金额, - width: 120, + width: 150, dataIndex: "sysRefundMoney", key: "sysRefundMoney", align: "center", @@ -115,7 +115,7 @@ function GeneralBusiness() { }, { title: () => 渠道方收款金额, - width: 120, + width: 150, dataIndex: "billMoney", key: "billMoney", align: "center", @@ -125,7 +125,7 @@ function GeneralBusiness() { }, { title: () => 渠道方退款金额, - width: 120, + width: 150, dataIndex: "billRefundMoney", key: "billRefundMoney", align: "center", @@ -134,8 +134,8 @@ function GeneralBusiness() { }, }, { - title: "收款对账金额", - width: 120, + title: "收款对账差额", + width: 150, dataIndex: "difMoney", key: "difMoney", align: "center", @@ -144,8 +144,8 @@ function GeneralBusiness() { }, }, { - title: "退款对账金额", - width: 120, + title: "退款对账差额", + width: 150, dataIndex: "difRefundMoney", key: "tax", align: "center",