From 71b9a675b008a340169c5abbeb879ce141288f69 Mon Sep 17 00:00:00 2001
From: chenqiang <chenqiang@yisa.com>
Date: Wed, 15 Nov 2023 17:35:39 +0800
Subject: [PATCH] =?UTF-8?q?feat():=20=E6=96=B0=E5=A2=9E=E5=81=9C=E8=BD=A6?=
=?UTF-8?q?=E5=88=86=E6=9E=90=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../MemberStat/ParkingAly/index.scss | 490 +++++++++++--
.../MemberStat/ParkingAly/loadable.jsx | 701 +++++++++++++++++-
.../MemberStat/RegisterAly/index.scss | 600 ++++++++++++++++
.../MemberStat/RegisterAly/loadable.jsx | 792 ++++++++++++++++++++-
4 files changed, 2488 insertions(+), 95 deletions(-)
diff --git a/src/pages/DataAnalysisPrediction/MemberStat/ParkingAly/index.scss b/src/pages/DataAnalysisPrediction/MemberStat/ParkingAly/index.scss
index 67fcb3f..ef01119 100644
--- a/src/pages/DataAnalysisPrediction/MemberStat/ParkingAly/index.scss
+++ b/src/pages/DataAnalysisPrediction/MemberStat/ParkingAly/index.scss
@@ -11,50 +11,62 @@ $color-primary : var(--color-primary);
-.paid-schedule{
+.paid-schedule {
display: flex;
padding: 15px;
width: 100%;
- .paid-search{
- .search{
+
+ .paid-search {
+ .search {
font-size: 16px;
font-family: Microsoft YaHei, Microsoft YaHei-Bold;
font-weight: 700;
text-align: left;
color: #eeeff1;
}
- label{
- margin:0 10px;
+
+ label {
+ margin: 0 10px;
}
- .yisa-search{
+
+ .yisa-search {
margin-top: 10px;
display: flex;
- label{
+
+ label {
line-height: 31px;
}
}
- .ant-select:not(.ant-select-customize-input) .ant-select-selector{
+
+ .ant-select:not(.ant-select-customize-input) .ant-select-selector {
background-color: #50586c !important;
}
- .ant-select-arrow .anticon{
+
+ .ant-select-arrow .anticon {
background-color: #50586c !important;
}
- .ant-input:placeholder-shown{
+
+ .ant-input:placeholder-shown {
background-color: #50586c !important;
}
- .timePicker{
+
+ .timePicker {
width: 350px;
margin-top: 22px;
- .btnBox{
- display:flex ;
- margin-top: 20px;
- .yisa-btn{
- margin-left: 20px;
- width: 130px;
- }
- .root_gfkk{
- margin-left: 20px;
- .export-content{
+
+ .btnBox {
+ display: flex;
+ margin-top: 20px;
+
+ .yisa-btn {
+ margin-left: 20px;
+ width: 130px;
+ }
+
+ .root_gfkk {
+ margin-left: 20px;
+
+ .export-content {
width: 130px;
height: 33px;
display: flex;
@@ -66,48 +78,55 @@ $color-primary : var(--color-primary);
color: #fff;
margin-right: 10px;
}
- }
-
}
+
+ }
}
}
- .paid-result{
+
+ .paid-result {
width: 100%;
height: 834px;
background: #505a6f;
border-radius: 20px;
margin-left: 17px;
- .result{
+
+ .result {
padding: 25px;
- .font{
+
+ .font {
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
font-weight: 400;
text-align: left;
color: #eeeff1;
margin-bottom: 10px;
display: inline-block;
-
- em{
+
+ em {
color: #3aa8fe;
margin: 0 5px;
}
}
- .yisa-table .ant-table-thead .ant-table-cell{
+
+ .yisa-table .ant-table-thead .ant-table-cell {
background-color: #616b83 !important;
- color: #ffffff !important;
- font-size: 14px;
- font-family: Microsoft YaHei, Microsoft YaHei-Bold;
- font-weight: 700;
+ color: #ffffff !important;
+ font-size: 14px;
+ font-family: Microsoft YaHei, Microsoft YaHei-Bold;
+ font-weight: 700;
text-align: center;
border-right: none !important;
border-top-color: #888f9d !important;
border-color: #888f9d !important;
}
- .ant-table.ant-table-bordered>.ant-table-container>.ant-table-content>table, .ant-table.ant-table-bordered>.ant-table-container>.ant-table-header>table{
+
+ .ant-table.ant-table-bordered>.ant-table-container>.ant-table-content>table,
+ .ant-table.ant-table-bordered>.ant-table-container>.ant-table-header>table {
border-top: none !important;
border-left: none !important;
}
- .ant-table-tbody .ant-table-row .ant-table-cell{
+
+ .ant-table-tbody .ant-table-row .ant-table-cell {
background-color: #3e4557 !important;
color: #ffffff !important;
text-align: center;
@@ -119,20 +138,23 @@ $color-primary : var(--color-primary);
border-bottom-color: #626b7e !important;
}
}
-
+
}
}
-.revenue{
- .tab-title{
+
+.revenue {
+ .tab-title {
text-align: center;
font-size: 18px;
font-weight: 400;
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
}
+
width: 700px !important;
- .tab-index{
- .tab-top{
+
+ .tab-index {
+ .tab-top {
display: flex;
margin-top: 10px;
height: 30px;
@@ -140,21 +162,24 @@ $color-primary : var(--color-primary);
white-space: nowrap;
overflow: hidden;
border-bottom: 1px solid #e4e7ed;
- .tab-li{
+
+ .tab-li {
margin-left: 20px;
cursor: pointer;
}
- .active{
- color:#409eff ;
+
+ .active {
+ color: #409eff;
cursor: pointer;
margin-left: 20px;
border-bottom: 1px solid #409eff !important;
margin-bottom: -1px !important;
}
}
- .tab-bottom{
- .yisa-tab{
- .ant-table-cell{
+
+ .tab-bottom {
+ .yisa-tab {
+ .ant-table-cell {
background-color: #616b83 !important;
color: #ffffff !important;
font-size: 14px;
@@ -169,51 +194,368 @@ $color-primary : var(--color-primary);
}
}
}
-.scheduleBtn{
+
+.scheduleBtn {
background: #409eff;
- border: none;
- width: 50px;
- border-radius: 4px;
- cursor: pointer;
+ border: none;
+ width: 50px;
+ border-radius: 4px;
+ cursor: pointer;
}
-.operateBtn{
- div{
+
+.operateBtn {
+ div {
cursor: pointer;
margin-top: 5px;
}
}
-.selectChance{
+
+.selectChance {
padding: 20px;
- .timeChance{
+
+ .timeChance {
margin-left: 10px;
- span{
+
+ span {
color: #aaa;
}
}
- .yisa-search{
+
+ .yisa-search {
margin-top: 20px;
}
- .submitBtn{
+
+ .submitBtn {
text-align: center;
margin-top: 20px;
- .submit{
+
+ .submit {
width: 80px;
- height: 35px;
- background: #409eff;
- border: none;
- border-radius: 4px;
- cursor: pointer;
- color: #fff;
+ height: 35px;
+ background: #409eff;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ color: #fff;
}
- .cancel{
- width: 80px;
- height: 35px;
- background: #fff;
- border: none;
- border-radius: 4px;
- color: #3e4557;
- cursor: pointer;
- margin-left: 20px;
+
+ .cancel {
+ width: 80px;
+ height: 35px;
+ background: #fff;
+ border: none;
+ border-radius: 4px;
+ color: #3e4557;
+ cursor: pointer;
+ margin-left: 20px;
}
}
}
+
+.ParkingAly {
+ padding: 10px 0 10px 20px;
+ height: 100%;
+ position: relative;
+
+ .hfts {
+ position: absolute;
+ width: 390px;
+ margin-bottom: 0%;
+ // background: rgba(254, 242, 213, .47);
+ color: #FFCC3F;
+ font-size: 16px;
+ // position: relative;
+ right: 20px;
+ top: 0px;
+ background: var(--color-table-body-bg-nth-child-even);
+ border-radius: 4px;
+ border-left: #FFCC3F 3px solid;
+ padding: 10px 8px;
+ z-index: 1;
+ display: flex;
+
+ .anticon-info-circle {
+ padding-top: 6px;
+ margin-right: 4px;
+ }
+
+ .adfg {
+ position: absolute;
+ right: 4px;
+ top: 0%;
+ cursor: pointer;
+
+ svg {
+ width: 16px;
+ height: 16px;
+ }
+ }
+ }
+
+ .ttopi p {
+ margin-bottom: 0;
+ }
+
+ .body_cenf {
+ display: flex;
+ height: 100%;
+
+ .left_search {
+ width: 370px;
+ height: 100%;
+
+ .hrestit {
+ height: 21px;
+ width: 370px;
+ font-size: 16px;
+ font-family: Microsoft YaHei, Microsoft YaHei-Bold;
+ font-weight: 700;
+ text-align: left;
+ margin: 10px 0 10px;
+ }
+
+ .form_item {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ padding: 0 10px 16px 0;
+
+ .lab {
+ width: 90px;
+ text-align: right;
+ margin-right: 10px;
+ }
+
+ .labb {
+ width: 90px;
+ text-align: right;
+ margin-right: 10px;
+ // display: flex;
+ display: flex;
+ align-items: center;
+
+ .daf {
+ margin-left: 4px;
+ // border: 1px solid var(--color-table-border-bottom-color);
+ }
+ }
+
+ .labs {
+ width: 120px;
+ text-align: right;
+ // border: 1px solid var(--color-table-border-bottom-color);
+ margin-right: 10px;
+ }
+
+ .inputs {
+ flex: 1;
+ // border: 1px solid var(--color-table-border-bottom-color);
+ border-radius: 4px;
+ overflow: hidden;
+ }
+
+ .inputst {
+ // flex: 228px;
+ // 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;
+ font-size: 16px;
+
+ span {
+ width: 110px;
+ height: 36px;
+ border-radius: 4px;
+ color: #ffffff;
+ margin-right: 10px;
+ text-align: center;
+ line-height: 36px;
+ cursor: pointer;
+ }
+
+ .sear_ser,
+ .sear_rep {
+ background: linear-gradient(180deg, #3aa9ff, #59b7ff);
+ }
+
+ .sear_res {
+ background: #636d80;
+ }
+
+ .lent {
+ width: 230px;
+ margin-left: 20px;
+ }
+ }
+ }
+
+ .right_tab {
+ width: calc(100% - 370px);
+ height: 100%;
+ padding: 20px;
+ background: var(--color-user-list-bg);
+ box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.12);
+ border-radius: 28px 0 0 0;
+
+ .result-box {
+ color: #ffffff;
+ background: #3e4557;
+ border-radius: 4px;
+ margin-bottom: 20px;
+
+ .result-box-title {
+ height: 21px;
+ font-size: 16px;
+ font-family: Microsoft YaHei, Microsoft YaHei-Bold;
+ font-weight: 700;
+ text-align: left;
+ margin: 18px 0 18px 18px;
+ display: inline-block;
+
+ }
+
+ i {
+ border: 1px solid;
+ border-radius: 22px;
+ display: inline-block;
+ text-align: center;
+ font-size: 12px;
+ width: 22px;
+ cursor: pointer;
+ }
+
+ .bhd-select {
+ float: right;
+ margin: 12px 28px;
+ }
+
+ .ant-table .ant-table-thead tr th {
+ background: #3e4557;
+ }
+ }
+
+ .sd {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 12px;
+
+ p {
+ margin-bottom: 0%;
+ font-size: 14px;
+ color: $color-text;
+
+ span {
+ font-weight: 700;
+ margin: 0 4px;
+ color: $color-primary;
+ }
+ }
+
+
+ .sear_ser {
+ display: block;
+ width: 68px;
+ height: 34px;
+ border-radius: 4px;
+ color: #ffffff;
+ text-align: center;
+ line-height: 34px;
+ cursor: pointer;
+ background: linear-gradient(180deg, #3aa9ff, #59b7ff);
+ }
+ }
+
+ .scrplltab {
+ width: 100%;
+ overflow-x: scroll;
+ // position: relative;
+ @include scrollBar(var(--color-user-list-bg), #3B97FF);
+
+ .poxi {
+ cursor: pointer;
+ background-color: var(--color-table-header-bg);
+ width: 24px;
+ height: 50px;
+ position: fixed;
+ right: 20px;
+ top: 277px;
+ padding: 10px 8px;
+ z-index: 12;
+
+ .colsa {
+ color: #3AA9FF;
+ }
+ }
+
+ .showas {
+ top: 477px
+ }
+ }
+
+
+ .yisa_tabled {
+ width: 100%;
+
+ .ant-table-thead {
+ th {
+ border: rgba(255, 255, 255, .08) 1px solid;
+ // background: var(--color-table-header-bg) !important;
+
+ 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);
+
+ }
+
+ // .ant-table-tbody {
+ // td {
+ // background: var(--color-table-body-bg) !important;
+ // border-bottom-color: var(--color-table-border-bottom-color);
+ // }
+
+ // tr:nth-child(even) {
+ // td {
+ // background: var(--color-table-body-bg-nth-child-even) !important;
+ // }
+ // }
+
+ // tr:nth-child(odd) {
+ // td {
+ // background: var(--color-table-body-bg-nth-child-even) !important;
+ // }
+ // }
+ // }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/pages/DataAnalysisPrediction/MemberStat/ParkingAly/loadable.jsx b/src/pages/DataAnalysisPrediction/MemberStat/ParkingAly/loadable.jsx
index 427bf43..b68159d 100644
--- a/src/pages/DataAnalysisPrediction/MemberStat/ParkingAly/loadable.jsx
+++ b/src/pages/DataAnalysisPrediction/MemberStat/ParkingAly/loadable.jsx
@@ -1,15 +1,694 @@
import React, { useState, useRef, useEffect } from "react";
-// import { message, Pagination, Table, Space, Modal, } from "antd";
-// import { dictionary, utils } from "@/config/common";
-// import moment from 'moment'
+import {
+ message,
+ Pagination,
+ Table,
+ Select,
+ Input,
+ Popover,
+ Cascader,
+ AutoComplete,
+ Tooltip,
+ Checkbox,
+ Form,
+ DatePicker,
+} from "antd";
+import { dictionary, utils } from "@/config/common";
+import moment from "moment";
+import ReactEcharts from "echarts-for-react";
+import ajax from "@/services";
// import { useSessionStorageState, useUpdateEffect, useSize, useUpdate } from 'ahooks';
-// import ajax from "@/services"
-// import { FormInput, FormSelect, OptionPanel, ResultPanel, FormSliderPicker, AreaCascader, ImgResize, ImgZoom, } from "@/components"
-// import "./index.scss";
-// import errorImg from "@/assets/images/layout/error.png"
-// import { useLocation } from "react-router-dom";
-function ParkingAly() {//停车分析
- return <div>ParkingAly</div>
+import { ResultFlow } from "@/components";
+import "./index.scss";
+
+function ParkingAly() {
+ //停车分析
+ //页面检索-重复
+ const formdata = {
+ operator_id: "0", //商户
+ park_type: "", //车场类型 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],
+ };
+ const col = [
+ {
+ title: "日期",
+ dataIndex: "date",
+ key: "date",
+ align: "center",
+ },
+ {
+ title: "会员停车次数(次)",
+ dataIndex: "date",
+ key: "date",
+ align: "center",
+ },
+ {
+ title: "非会员停车次数(次)",
+ dataIndex: "date",
+ key: "date",
+ align: "center",
+ },
+ {
+ title: "会员停车占比",
+ dataIndex: "date",
+ key: "date",
+ align: "center",
+ },
+ ];
+ let form_data = sessionStorage.getItem("FormData_ParkingAly");
+ //检索
+ const [FormData, setFormData] = useState(
+ form_data ? JSON.parse(form_data) : formdata
+ );
+ //检索2
+ const [FormDatas, setFormDatas] = useState(
+ form_data ? JSON.parse(form_data) : formdata
+ );
+ //页码状态
+ const [loading, setLoading] = useState(false);
+ //页面数据
+ const [Data, setData] = useState({
+ data: [],
+ total: 0,
+ });
+ const [revenueData, setRevenueData] = useState({});
+
+ //获取区域
+ const [Area, setArea] = useState([]);
+ //商户
+ const [Yunying, setYunying] = useState([]);
+ //自动填充
+ const [options, setOptions] = useState([]);
+
+ const [Open, setOpen] = useState(true);
+ //筛选
+ const [selectArr, setSelectArr] = useState([]);
+ //是否展开显示
+ const [Show, setShow] = useState(false);
+ const column = (arr) => {
+ let copr = [];
+ if (arr.length) {
+ col.forEach((ele, index) => {
+ if (ele.children) {
+ var lisr = [];
+ let bool = false;
+ ele.children.forEach((val) => {
+ if (!arr.includes(val.key)) {
+ lisr.push(val);
+ bool = true;
+ }
+ });
+ if (bool) {
+ copr.push({ ...ele, children: [...lisr] });
+ }
+ } else {
+ if (!arr.includes(ele.key)) {
+ copr.push(ele);
+ }
+ }
+ });
+ } else {
+ copr = col;
+ }
+ return [...copr];
+ };
+ const onSearch = (searchText) => {
+ console.log(searchText);
+ setOptions([]);
+ };
+
+ //时间状态切换
+ const TimeChange = () => {
+ let e = FormData.date_type;
+ let str = "day";
+ let mat = "YYYY-MM-DD";
+ if (e == 4) {
+ str = "year";
+ mat = "YYYY";
+ } else if (e == 3) {
+ str = "month";
+ mat = "YYYY-MM";
+ } else if (e == 2) {
+ str = "week";
+ mat = "YYYY-MM-DD";
+ }
+ return { str, mat };
+ };
+ //切换时间变化
+ const SetTimeNow = (e) => {
+ let start = "";
+ let end = "";
+ if (e == 4) {
+ start = moment().format("YYYY");
+ end = moment().format("YYYY");
+ } else if (e == 3) {
+ start = moment().format("YYYY-MM");
+ end = moment().format("YYYY-MM");
+ } else if (e == 2) {
+ start = moment().day(1).format("YYYY-MM-DD");
+ end = moment().day(7).format("YYYY-MM-DD");
+ } else {
+ start = moment().startOf("day").format("YYYY-MM-DD");
+ end = moment().endOf("day").format("YYYY-MM-DD");
+ }
+ setFormData({
+ ...FormData,
+ date_type: e,
+ start_time: start,
+ end_time: end,
+ });
+ };
+
+ //页码
+ function onShowSizeChange(pn, page_size) {
+ let temFormData = {};
+ if (FormData.page_size == page_size) {
+ temFormData = {
+ ...FormData,
+ pn,
+ };
+ } else {
+ temFormData = {
+ ...FormData,
+ pn: 1,
+ page_size,
+ };
+ }
+ setFormData(temFormData);
+ setFormDatas(temFormData);
+ }
+
+ //获取页面筛选数据
+ 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 Daownload = (url) => {
+ var link = document.createElement("a");
+ link.setAttribute("target", "_blank");
+ link.style.display = "none";
+ link.href = url ? url : "";
+ document.body.appendChild(link);
+ link.click();
+ document.body.removeChild(link);
+ };
+ //导出
+ const ReportPaySummaryReport = () => {
+ ajax.ElectInvoice.getOperationReport({
+ ...FormDatas,
+ is_excel: 1,
+ }).then(
+ (res) => {
+ if (parseInt(res?.status) === 20000) {
+ Daownload(res?.data?.url);
+ } else {
+ message.error(res?.message);
+ }
+ },
+ (err) => {
+ console.log(err);
+ }
+ );
+ };
+ 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: "非会员停车次数",
+ },
+ ]
+ ) => {
+ // 获取所有地区名称
+ 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
+ );
+ // 构建X轴数据
+ const xAxisData = dates.map((date) => {
+ return {
+ value: date,
+ textStyle: {
+ align: "center",
+ lineStyle: {
+ color: "#3AA9FF", // 设置线的颜色为天蓝色
+ shadowBlur: 6,
+ },
+ },
+ };
+ });
+
+ setRevenueData({
+ title: {
+ text: "",
+ textStyle: {
+ color: "#fff",
+ },
+ },
+ tooltip: {
+ trigger: "axis",
+ formatter: (params) => {
+ return `<div class="ttopi">
+ <p>${params[0].axisValue}</p>
+ <p>
+ ${params[0].marker} ${params[0].seriesName} ${
+ params[0].data
+ }(次)
+ </p>
+ <p>
+ ${params[1].marker} ${params[1].seriesName} ${
+ params[1].data
+ }(次)
+ </p>
+ <p>停车记录总数 ${params[0].data + params[1].data}(次)</p>
+ </div>`;
+ },
+ },
+ legend: {
+ type: "scroll",
+ top: 0,
+ left: "center",
+ data: areaNames,
+ itemWidth: 18,
+ itemHeight: 12,
+ width: "40%",
+ textStyle: {
+ fontSize: 14,
+ color: "white",
+ },
+ },
+ xAxis: {
+ data: xAxisData,
+ 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: ["#3AA9FF", "#F997DF"],
+ //series: seriesData,
+ series: [
+ {
+ name: "非会员停车次数",
+ type: "line",
+ data: filterad(dates, data, "非会员停车次数"),
+ },
+ {
+ name: "会员停车次数",
+ type: "line",
+ data: filterad(dates, data, "会员停车次数"),
+ },
+ ],
+ grid: {
+ x: 50,
+ y: 55,
+ x2: 70,
+ y2: 20,
+ },
+ });
+ };
+ //获取页面显示数据
+ const getData = (data) => {
+ setLoading(false);
+ ajax.ElectInvoice.getOperationReport({
+ ...data,
+ area: data?.area?.length ? data?.area[data.area.length - 1] : "",
+ }).then(
+ (res) => {
+ if (parseInt(res?.status) === 20000) {
+ setData({
+ data: res?.data?.list || [],
+ total: res?.total || 0,
+ });
+ setLoading(true);
+ } else {
+ message.error(res?.message);
+ }
+ setLoading(true);
+ },
+ (err) => {
+ console.log(err);
+ setLoading(true);
+ }
+ );
+ };
+ useEffect(() => {
+ sessionStorage.setItem("FormData_ParkingAly", JSON.stringify(FormDatas));
+ // getData(FormDatas);
+ //调用接口
+ }, [FormDatas]);
+ useEffect(() => {
+ getSelectData();
+ getRevenueOption();
+ }, []);
+ return (
+ <div className="ParkingAly">
+ <div className="body_cenf">
+ <div className="left_search">
+ <div className="hrestit">查询条件</div>
+
+ <div className="form_item">
+ <span className="lab">运营商</span>
+ <div className="inputs">
+ <Select
+ value={FormData.operator_id}
+ style={{
+ width: "100%",
+ }}
+ placeholder="请选择"
+ options={Yunying}
+ onChange={(e) =>
+ setFormData({
+ ...FormData,
+ operator_id: e,
+ })
+ }
+ />
+ </div>
+ </div>
+
+ <div className="form_item">
+ <span className="lab">车场类型</span>
+ <div className="inputs">
+ <Select
+ value={FormData.park_type}
+ style={{
+ width: "100%",
+ }}
+ placeholder="请选择"
+ options={[
+ {
+ value: "",
+ label: "全部",
+ },
+ {
+ value: "1",
+ label: "路内车场",
+ },
+ {
+ value: "2",
+ label: "路外车场",
+ },
+ ]}
+ onChange={(e) =>
+ setFormData({
+ ...FormData,
+ park_type: e,
+ })
+ }
+ />
+ </div>
+ </div>
+ <div className="form_item">
+ <div className="labb">
+ 日期
+ <div className="daf">
+ <Select
+ value={FormData.date_type}
+ // style={{
+ // width: "100%",
+ // }}
+ placeholder="请选择"
+ options={[
+ {
+ value: "1",
+ label: "日",
+ },
+ {
+ value: "2",
+ label: "周",
+ },
+ {
+ value: "3",
+ label: "月",
+ },
+ {
+ value: "4",
+ label: "年",
+ },
+ ]}
+ onChange={(e) => SetTimeNow(e)}
+ />
+ </div>
+ </div>
+ <div className="inputs">
+ <DatePicker
+ style={{ width: "100%" }}
+ // showTime
+ format={TimeChange().mat}
+ picker={TimeChange().str}
+ allowClear={false}
+ value={FormData.start_time ? moment(FormData.start_time) : null}
+ onChange={(date, dateString) => {
+ if (TimeChange().str == "week") {
+ setFormData({
+ ...FormData,
+ start_time: date
+ ? moment(date).day(1).format("YYYY-MM-DD")
+ : null,
+ });
+ } else if (TimeChange().str == "day") {
+ if (date > moment(FormData.end_time)) {
+ setFormData({
+ ...FormData,
+ end_time: dateString,
+ start_time: FormData.end_time,
+ });
+ } else {
+ setFormData({
+ ...FormData,
+ start_time: dateString,
+ });
+ }
+ } else {
+ setFormData({ ...FormData, start_time: dateString });
+ }
+ }}
+ disabledDate={(current) => current > moment(FormData.end_time)}
+ />
+ </div>
+ </div>
+ <div className="form_item">
+ <span className="lab">至</span>
+ <div className="inputs">
+ <DatePicker
+ style={{ width: "100%" }}
+ // showTime
+ format={TimeChange().mat}
+ picker={TimeChange().str}
+ allowClear={false}
+ value={FormData.end_time ? moment(FormData.end_time) : null}
+ onChange={(date, dateString) => {
+ if (TimeChange().str == "week") {
+ setFormData({
+ ...FormData,
+ end_time: date
+ ? moment(date).day(7).format("YYYY-MM-DD")
+ : null,
+ });
+ } else if (TimeChange().str == "day") {
+ if (date < moment(FormData.start_time)) {
+ setFormData({
+ ...FormData,
+ start_time: dateString,
+ end_time: FormData.start_time,
+ });
+ } else {
+ setFormData({
+ ...FormData,
+ end_time: dateString,
+ });
+ }
+ } else {
+ setFormData({ ...FormData, end_time: dateString });
+ }
+ }}
+ disabledDate={(current) =>
+ current < moment(FormData.start_time)
+ }
+ />
+ </div>
+ </div>
+ <div className="but_on">
+ <span
+ className="sear_res"
+ onClick={() => {
+ var reset = formdata;
+ setFormData(reset);
+ setFormDatas(reset);
+ }}
+ >
+ 重置
+ </span>
+ <span
+ className={"sear_ser lent"}
+ onClick={() => {
+ var fortm = FormData;
+ setFormData({
+ ...fortm,
+ pn: 1,
+ });
+ setFormDatas({
+ ...fortm,
+ pn: 1,
+ });
+ }}
+ >
+ 查询
+ </span>
+ </div>
+ </div>
+ <div className="right_tab">
+ <div className="result-box">
+ <div className="result-box-title">会员停车趋势分析</div>
+ <Tooltip
+ placement="topLeft"
+ title={<span>展示统计期间会员与非会员分别的停车次数趋势</span>}
+ >
+ <i>?</i>
+ </Tooltip>
+ <ReactEcharts
+ option={revenueData}
+ style={{ height: "300px", width: "100%", overflow: "hidden" }}
+ />
+ </div>
+ <div className="sd">
+ <p>
+ 共查询到<span> {Data?.total || 0}</span>条数据
+ </p>
+ <span
+ className={"sear_ser"}
+ onClick={() => {
+ ReportPaySummaryReport();
+ // setFormDatas({ ...FormData });
+ }}
+ >
+ 导出
+ </span>
+ </div>
+ <ResultFlow
+ hasLoad={true}
+ loading={loading}
+ resultData={Data.data}
+ message={"暂无数据"}
+ >
+ <div className="scrplltab">
+ <div className="table_raps">
+ <Table
+ className="yisa_tabled"
+ columns={column(selectArr)}
+ rowKey={(record) => record.id}
+ dataSource={Data.data}
+ pagination={false}
+ scroll={{
+ // x: 1300,
+ y: "calc(100vh - 720px)",
+ }}
+ />
+ </div>
+ </div>
+
+ <div>
+ <Pagination
+ className="pagination-common"
+ showSizeChanger={true}
+ showQuickJumper={true}
+ // showTotal={() => `共 ${total_records} 条`}
+ total={Data.total}
+ current={FormData.pn}
+ pageSize={FormData.page_size}
+ pageSizeOptions={dictionary?.pageSizeOptions}
+ onChange={onShowSizeChange}
+ onShowSizeChange={onShowSizeChange}
+ />
+ </div>
+ </ResultFlow>
+ </div>
+ </div>
+ </div>
+ );
}
-export default ParkingAly;
\ No newline at end of file
+export default ParkingAly;
diff --git a/src/pages/DataAnalysisPrediction/MemberStat/RegisterAly/index.scss b/src/pages/DataAnalysisPrediction/MemberStat/RegisterAly/index.scss
index 1838f71..6eb2777 100644
--- a/src/pages/DataAnalysisPrediction/MemberStat/RegisterAly/index.scss
+++ b/src/pages/DataAnalysisPrediction/MemberStat/RegisterAly/index.scss
@@ -3,3 +3,603 @@ $color-container-bg : var(--color-container-bg);
$color-user-list-bg : var(--color-user-list-bg);
$color-text : var(--color-text);
$color-primary : var(--color-primary);
+@import "@/assets/css/mixin.scss";
+$color-container-bg : var(--color-container-bg);
+$color-user-list-bg : var(--color-user-list-bg);
+$color-text : var(--color-text);
+$color-primary : var(--color-primary);
+
+
+
+.paid-schedule {
+ display: flex;
+ padding: 15px;
+ width: 100%;
+
+ .paid-search {
+ .search {
+ font-size: 16px;
+ font-family: Microsoft YaHei, Microsoft YaHei-Bold;
+ font-weight: 700;
+ text-align: left;
+ color: #eeeff1;
+ }
+
+ label {
+ margin: 0 10px;
+ }
+
+ .yisa-search {
+ margin-top: 10px;
+ display: flex;
+
+ label {
+ line-height: 31px;
+ }
+ }
+
+ .ant-select:not(.ant-select-customize-input) .ant-select-selector {
+ background-color: #50586c !important;
+ }
+
+ .ant-select-arrow .anticon {
+ background-color: #50586c !important;
+ }
+
+ .ant-input:placeholder-shown {
+ background-color: #50586c !important;
+ }
+
+ .timePicker {
+ width: 350px;
+ margin-top: 22px;
+
+ .btnBox {
+ display: flex;
+ margin-top: 20px;
+
+ .yisa-btn {
+ margin-left: 20px;
+ width: 130px;
+ }
+
+ .root_gfkk {
+ margin-left: 20px;
+
+ .export-content {
+ width: 130px;
+ height: 33px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: #3b97ff;
+ border-radius: 3px;
+ cursor: pointer;
+ color: #fff;
+ margin-right: 10px;
+ }
+ }
+
+ }
+ }
+ }
+
+ .paid-result {
+ width: 100%;
+ height: 834px;
+ background: #505a6f;
+ border-radius: 20px;
+ margin-left: 17px;
+
+ .result {
+ padding: 25px;
+
+ .font {
+ font-family: Microsoft YaHei, Microsoft YaHei-Regular;
+ font-weight: 400;
+ text-align: left;
+ color: #eeeff1;
+ margin-bottom: 10px;
+ display: inline-block;
+
+ em {
+ color: #3aa8fe;
+ margin: 0 5px;
+ }
+ }
+
+ .yisa-table .ant-table-thead .ant-table-cell {
+ background-color: #616b83 !important;
+ color: #ffffff !important;
+ font-size: 14px;
+ font-family: Microsoft YaHei, Microsoft YaHei-Bold;
+ font-weight: 700;
+ text-align: center;
+ border-right: none !important;
+ border-top-color: #888f9d !important;
+ border-color: #888f9d !important;
+ }
+
+ .ant-table.ant-table-bordered>.ant-table-container>.ant-table-content>table,
+ .ant-table.ant-table-bordered>.ant-table-container>.ant-table-header>table {
+ border-top: none !important;
+ border-left: none !important;
+ }
+
+ .ant-table-tbody .ant-table-row .ant-table-cell {
+ background-color: #3e4557 !important;
+ color: #ffffff !important;
+ text-align: center;
+ font-size: 14px;
+ font-family: Microsoft YaHei, Microsoft YaHei-Regular;
+ font-weight: 400;
+ border-right: none !important;
+ border-left: none !important;
+ border-bottom-color: #626b7e !important;
+ }
+ }
+
+ }
+
+}
+
+.revenue {
+ .tab-title {
+ text-align: center;
+ font-size: 18px;
+ font-weight: 400;
+ font-family: Microsoft YaHei, Microsoft YaHei-Regular;
+ }
+
+ width: 700px !important;
+
+ .tab-index {
+ .tab-top {
+ display: flex;
+ margin-top: 10px;
+ height: 30px;
+ line-height: 30px;
+ white-space: nowrap;
+ overflow: hidden;
+ border-bottom: 1px solid #e4e7ed;
+
+ .tab-li {
+ margin-left: 20px;
+ cursor: pointer;
+ }
+
+ .active {
+ color: #409eff;
+ cursor: pointer;
+ margin-left: 20px;
+ border-bottom: 1px solid #409eff !important;
+ margin-bottom: -1px !important;
+ }
+ }
+
+ .tab-bottom {
+ .yisa-tab {
+ .ant-table-cell {
+ background-color: #616b83 !important;
+ color: #ffffff !important;
+ font-size: 14px;
+ font-family: Microsoft YaHei, Microsoft YaHei-Bold;
+ font-weight: 700;
+ text-align: center;
+ border-right: none !important;
+ border-left: none !important;
+ border-bottom-color: #868d9d !important;
+ }
+ }
+ }
+ }
+}
+
+.scheduleBtn {
+ background: #409eff;
+ border: none;
+ width: 50px;
+ border-radius: 4px;
+ cursor: pointer;
+}
+
+.operateBtn {
+ div {
+ cursor: pointer;
+ margin-top: 5px;
+ }
+}
+
+.selectChance {
+ padding: 20px;
+
+ .timeChance {
+ margin-left: 10px;
+
+ span {
+ color: #aaa;
+ }
+ }
+
+ .yisa-search {
+ margin-top: 20px;
+ }
+
+ .submitBtn {
+ text-align: center;
+ margin-top: 20px;
+
+ .submit {
+ width: 80px;
+ height: 35px;
+ background: #409eff;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ color: #fff;
+ }
+
+ .cancel {
+ width: 80px;
+ height: 35px;
+ background: #fff;
+ border: none;
+ border-radius: 4px;
+ color: #3e4557;
+ cursor: pointer;
+ margin-left: 20px;
+ }
+ }
+}
+
+.RegisterAly {
+ padding: 10px 0 10px 20px;
+ height: 100%;
+ position: relative;
+
+ .hfts {
+ position: absolute;
+ width: 390px;
+ margin-bottom: 0%;
+ // background: rgba(254, 242, 213, .47);
+ color: #FFCC3F;
+ font-size: 16px;
+ // position: relative;
+ right: 20px;
+ top: 0px;
+ background: var(--color-table-body-bg-nth-child-even);
+ border-radius: 4px;
+ border-left: #FFCC3F 3px solid;
+ padding: 10px 8px;
+ z-index: 1;
+ display: flex;
+
+ .anticon-info-circle {
+ padding-top: 6px;
+ margin-right: 4px;
+ }
+
+ .adfg {
+ position: absolute;
+ right: 4px;
+ top: 0%;
+ cursor: pointer;
+
+ svg {
+ width: 16px;
+ height: 16px;
+ }
+ }
+ }
+
+ .ttopi p {
+ margin-bottom: 0;
+ }
+
+ .body_cenf {
+ display: flex;
+ height: 100%;
+
+ .left_search {
+ width: 370px;
+ height: 100%;
+
+ .hrestit {
+ height: 21px;
+ width: 370px;
+ font-size: 16px;
+ font-family: Microsoft YaHei, Microsoft YaHei-Bold;
+ font-weight: 700;
+ text-align: left;
+ margin: 10px 0 10px;
+ }
+
+ .form_item {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ padding: 0 10px 16px 0;
+
+ .lab {
+ width: 90px;
+ text-align: right;
+ margin-right: 10px;
+ }
+
+ .labb {
+ width: 90px;
+ text-align: right;
+ margin-right: 10px;
+ // display: flex;
+ display: flex;
+ align-items: center;
+
+ .daf {
+ margin-left: 4px;
+ // border: 1px solid var(--color-table-border-bottom-color);
+ }
+ }
+
+ .labs {
+ width: 120px;
+ text-align: right;
+ // border: 1px solid var(--color-table-border-bottom-color);
+ margin-right: 10px;
+ }
+
+ .inputs {
+ flex: 1;
+ // border: 1px solid var(--color-table-border-bottom-color);
+ border-radius: 4px;
+ overflow: hidden;
+ }
+
+ .inputst {
+ // flex: 228px;
+ // 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;
+ font-size: 16px;
+
+ span {
+ width: 110px;
+ height: 36px;
+ border-radius: 4px;
+ color: #ffffff;
+ margin-right: 10px;
+ text-align: center;
+ line-height: 36px;
+ cursor: pointer;
+ }
+
+ .sear_ser,
+ .sear_rep {
+ background: linear-gradient(180deg, #3aa9ff, #59b7ff);
+ }
+
+ .sear_res {
+ background: #636d80;
+ }
+
+ .lent {
+ width: 230px;
+ margin-left: 20px;
+ }
+ }
+ }
+
+ .right_tab {
+ width: calc(100% - 370px);
+ height: 100%;
+ padding: 20px;
+ background: var(--color-user-list-bg);
+ box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.12);
+ border-radius: 28px 0 0 0;
+
+ .parkinglive-box {
+ display: flex;
+
+ .result-box {
+ color: #ffffff;
+ background: #3e4557;
+ border-radius: 4px;
+ margin-bottom: 20px;
+
+ .result-box-title {
+ height: 21px;
+ font-size: 16px;
+ font-family: Microsoft YaHei, Microsoft YaHei-Bold;
+ font-weight: 700;
+ text-align: left;
+ margin: 18px 0 18px 18px;
+ display: inline-block;
+ }
+
+ i {
+ border: 1px solid;
+ border-radius: 22px;
+ display: inline-block;
+ text-align: center;
+ font-size: 12px;
+ width: 22px;
+ cursor: pointer;
+ }
+
+ .ant-table .ant-table-thead tr th {
+ background: #3e4557;
+ }
+ }
+
+ .parkinglive-left {
+ width: 50%;
+ margin-right: 20px;
+ }
+
+ .parkinglive-right {
+ width: 50%;
+ }
+ }
+
+ .result-box {
+ color: #ffffff;
+ background: #3e4557;
+ border-radius: 4px;
+ margin-bottom: 20px;
+
+ .result-box-title {
+ height: 21px;
+ font-size: 16px;
+ font-family: Microsoft YaHei, Microsoft YaHei-Bold;
+ font-weight: 700;
+ text-align: left;
+ margin: 18px 0 18px 18px;
+ display: inline-block;
+
+ }
+
+ i {
+ border: 1px solid;
+ border-radius: 22px;
+ display: inline-block;
+ text-align: center;
+ font-size: 12px;
+ width: 22px;
+ cursor: pointer;
+ }
+
+ .bhd-select {
+ float: right;
+ margin: 12px 28px;
+ }
+
+ .ant-table .ant-table-thead tr th {
+ background: #3e4557;
+ }
+ }
+
+ .sd {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 12px;
+
+ p {
+ margin-bottom: 0%;
+ font-size: 14px;
+ color: $color-text;
+
+ span {
+ font-weight: 700;
+ margin: 0 4px;
+ color: $color-primary;
+ }
+ }
+
+
+ .sear_ser {
+ display: block;
+ width: 68px;
+ height: 34px;
+ border-radius: 4px;
+ color: #ffffff;
+ text-align: center;
+ line-height: 34px;
+ cursor: pointer;
+ background: linear-gradient(180deg, #3aa9ff, #59b7ff);
+ }
+ }
+
+ .scrplltab {
+ width: 100%;
+ overflow-x: scroll;
+ // position: relative;
+ @include scrollBar(var(--color-user-list-bg), #3B97FF);
+
+ .poxi {
+ cursor: pointer;
+ background-color: var(--color-table-header-bg);
+ width: 24px;
+ height: 50px;
+ position: fixed;
+ right: 20px;
+ top: 277px;
+ padding: 10px 8px;
+ z-index: 12;
+
+ .colsa {
+ color: #3AA9FF;
+ }
+ }
+
+ .showas {
+ top: 477px
+ }
+ }
+
+
+ .yisa_tabled {
+ width: 100%;
+
+ .ant-table-thead {
+ th {
+ border: rgba(255, 255, 255, .08) 1px solid;
+ // background: var(--color-table-header-bg) !important;
+
+ 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);
+
+ }
+
+ // .ant-table-tbody {
+ // td {
+ // background: var(--color-table-body-bg) !important;
+ // border-bottom-color: var(--color-table-border-bottom-color);
+ // }
+
+ // tr:nth-child(even) {
+ // td {
+ // background: var(--color-table-body-bg-nth-child-even) !important;
+ // }
+ // }
+
+ // tr:nth-child(odd) {
+ // td {
+ // background: var(--color-table-body-bg-nth-child-even) !important;
+ // }
+ // }
+ // }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/pages/DataAnalysisPrediction/MemberStat/RegisterAly/loadable.jsx b/src/pages/DataAnalysisPrediction/MemberStat/RegisterAly/loadable.jsx
index 146b183..06bbe32 100644
--- a/src/pages/DataAnalysisPrediction/MemberStat/RegisterAly/loadable.jsx
+++ b/src/pages/DataAnalysisPrediction/MemberStat/RegisterAly/loadable.jsx
@@ -1,15 +1,787 @@
import React, { useState, useRef, useEffect } from "react";
-// import { message, Pagination, Table, Space, Modal, } from "antd";
-// import { dictionary, utils } from "@/config/common";
-// import moment from 'moment'
+import {
+ message,
+ Pagination,
+ Table,
+ Select,
+ Input,
+ Popover,
+ Cascader,
+ AutoComplete,
+ Tooltip,
+ Checkbox,
+ Form,
+ DatePicker,
+} from "antd";
+import { dictionary, utils } from "@/config/common";
+import moment from "moment";
+import ReactEcharts from "echarts-for-react";
+import ajax from "@/services";
// import { useSessionStorageState, useUpdateEffect, useSize, useUpdate } from 'ahooks';
-// import ajax from "@/services"
-// import { FormInput, FormSelect, OptionPanel, ResultPanel, FormSliderPicker, AreaCascader, ImgResize, ImgZoom, } from "@/components"
-// import "./index.scss";
-// import errorImg from "@/assets/images/layout/error.png"
-// import { useLocation } from "react-router-dom";
+import { ResultFlow } from "@/components";
+import "./index.scss";
function RegisterAly() {
- return <div>RegisterAly</div>
+ 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],
+ };
+ const col = [
+ {
+ title: "日期",
+ dataIndex: "date",
+ key: "date",
+ align: "center",
+ },
+ {
+ title: "会员注册(个)",
+ children: [
+ {
+ title: "APP",
+ dataIndex: "date",
+ key: "date",
+ align: "center",
+ },
+ {
+ title: "公众号",
+ dataIndex: "date",
+ key: "date",
+ align: "center",
+ },
+ {
+ title: "其他",
+ dataIndex: "date",
+ key: "date",
+ align: "center",
+ },
+ ],
+ },
+ {
+ title: "车牌绑定(个)",
+ dataIndex: "date",
+ key: "date",
+ align: "center",
+ },
+ {
+ title: "累计会员注册(个)",
+ dataIndex: "date",
+ key: "date",
+ align: "center",
+ },
+ {
+ title: "累计车牌绑定(个)",
+ dataIndex: "date",
+ key: "date",
+ align: "center",
+ },
+ ];
+ let form_data = sessionStorage.getItem("FormData_ParkingAly");
+ //检索
+ const [FormData, setFormData] = useState(
+ form_data ? JSON.parse(form_data) : formdata
+ );
+ //检索2
+ const [FormDatas, setFormDatas] = useState(
+ form_data ? JSON.parse(form_data) : formdata
+ );
+ //页码状态
+ const [loading, setLoading] = useState(false);
+ //页面数据
+ const [Data, setData] = useState({
+ data: [],
+ total: 0,
+ });
+
+ const [ringData, setRingData] = useState({});
+ const [revenueData, setRevenueData] = useState({});
+
+ //获取区域
+ const [Area, setArea] = useState([]);
+ //商户
+ const [Yunying, setYunying] = useState([]);
+ //自动填充
+ const [options, setOptions] = useState([]);
+
+ //筛选
+ const [selectArr, setSelectArr] = useState([]);
+ //是否展开显示
+ const column = (arr) => {
+ let copr = [];
+ if (arr.length) {
+ col.forEach((ele, index) => {
+ if (ele.children) {
+ var lisr = [];
+ let bool = false;
+ ele.children.forEach((val) => {
+ if (!arr.includes(val.key)) {
+ lisr.push(val);
+ bool = true;
+ }
+ });
+ if (bool) {
+ copr.push({ ...ele, children: [...lisr] });
+ }
+ } else {
+ if (!arr.includes(ele.key)) {
+ copr.push(ele);
+ }
+ }
+ });
+ } else {
+ copr = col;
+ }
+ return [...copr];
+ };
+
+ //时间状态切换
+ const TimeChange = () => {
+ let e = FormData.date_type;
+ let str = "day";
+ let mat = "YYYY-MM-DD";
+ if (e == 4) {
+ str = "year";
+ mat = "YYYY";
+ } else if (e == 3) {
+ str = "month";
+ mat = "YYYY-MM";
+ } else if (e == 2) {
+ str = "week";
+ mat = "YYYY-MM-DD";
+ }
+ return { str, mat };
+ };
+ //切换时间变化
+ const SetTimeNow = (e) => {
+ let start = "";
+ let end = "";
+ if (e == 4) {
+ start = moment().format("YYYY");
+ end = moment().format("YYYY");
+ } else if (e == 3) {
+ start = moment().format("YYYY-MM");
+ end = moment().format("YYYY-MM");
+ } else if (e == 2) {
+ start = moment().day(1).format("YYYY-MM-DD");
+ end = moment().day(7).format("YYYY-MM-DD");
+ } else {
+ start = moment().startOf("day").format("YYYY-MM-DD");
+ end = moment().endOf("day").format("YYYY-MM-DD");
+ }
+ setFormData({
+ ...FormData,
+ date_type: e,
+ start_time: start,
+ end_time: end,
+ });
+ };
+
+ //页码
+ function onShowSizeChange(pn, page_size) {
+ let temFormData = {};
+ if (FormData.page_size == page_size) {
+ temFormData = {
+ ...FormData,
+ pn,
+ };
+ } else {
+ temFormData = {
+ ...FormData,
+ pn: 1,
+ page_size,
+ };
+ }
+ setFormData(temFormData);
+ setFormDatas(temFormData);
+ }
+
+ //获取页面筛选数据
+ 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 Daownload = (url) => {
+ var link = document.createElement("a");
+ link.setAttribute("target", "_blank");
+ link.style.display = "none";
+ link.href = url ? url : "";
+ document.body.appendChild(link);
+ link.click();
+ document.body.removeChild(link);
+ };
+ //导出
+ const ReportPaySummaryReport = () => {
+ ajax.ElectInvoice.getOperationReport({
+ ...FormDatas,
+ is_excel: 1,
+ }).then(
+ (res) => {
+ if (parseInt(res?.status) === 20000) {
+ Daownload(res?.data?.url);
+ } else {
+ message.error(res?.message);
+ }
+ },
+ (err) => {
+ console.log(err);
+ }
+ );
+ };
+ 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 getRingOption = (
+ 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: "非会员停车次数",
+ },
+ ]
+ ) => {
+ // 获取所有地区名称
+ data.sort((a, b) => {
+ return new Date(a.pay_date) - new Date(b.pay_date);
+ });
+ console.log(data);
+ const areaNames = [...new Set(data.map((item) => item.type))];
+
+ setRingData({
+ title: {
+ text: "",
+ textStyle: {
+ color: "#fff",
+ },
+ },
+ tooltip: {
+ trigger: "axis",
+ },
+ legend: {
+ type: "scroll",
+ //right: "5%",
+ top: "bottom",
+ bottom: "center",
+ //data: areaNames,
+ data: ["常时停车", "临时停车"],
+ itemWidth: 18,
+ itemHeight: 12,
+ textStyle: {
+ fontSize: 14,
+ color: "white",
+ },
+ },
+
+ color: ["#4DC3FF", "#FFD767"],
+ //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: [
+ { value: 1048, name: "常时停车" },
+ { value: 735, name: "临时停车" },
+ ],
+ },
+ ],
+ grid: {
+ x: 50,
+ y: 55,
+ x2: 70,
+ y2: 20,
+ },
+ });
+ };
+
+ //新增用户趋势图
+ 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: "车牌绑定",
+ },
+ ]
+ ) => {
+ // 获取所有地区名称
+ 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
+ );
+ // 构建X轴数据
+ const xAxisData = dates.map((date) => {
+ return {
+ value: date,
+ textStyle: {
+ align: "center",
+ lineStyle: {
+ color: "#3AA9FF", // 设置线的颜色为天蓝色
+ shadowBlur: 6,
+ },
+ },
+ };
+ });
+
+ setRevenueData({
+ title: {
+ text: "",
+ textStyle: {
+ color: "#fff",
+ },
+ },
+ tooltip: {
+ trigger: "axis",
+ formatter: (params) => {
+ return `<div class="ttopi">
+ <p>${params[0].axisValue}</p>
+ <p>
+ ${params[0].marker} 净增${params[0].seriesName} ${params[0].data}(个)
+ </p>
+ <p>
+ ${params[1].marker} 净增${params[1].seriesName} ${params[1].data}(个)
+ </p>
+ </div>`;
+ },
+ },
+ legend: {
+ type: "scroll",
+ top: 0,
+ left: "center",
+ data: areaNames,
+ itemWidth: 18,
+ itemHeight: 12,
+ width: "40%",
+ textStyle: {
+ fontSize: 14,
+ color: "white",
+ },
+ },
+ xAxis: {
+ data: xAxisData,
+ 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: ["#3AA9FF", "#F997DF"],
+ //series: seriesData,
+ series: [
+ {
+ name: "会员注册",
+ type: "line",
+ data: filterad(dates, data, "会员注册"),
+ },
+ {
+ name: "车牌绑定",
+ type: "line",
+ data: filterad(dates, data, "车牌绑定"),
+ },
+ ],
+ grid: {
+ x: 50,
+ y: 55,
+ x2: 70,
+ y2: 20,
+ },
+ });
+ };
+ //获取页面显示数据
+ const getData = (data) => {
+ setLoading(false);
+ ajax.ElectInvoice.getOperationReport({
+ ...data,
+ area: data?.area?.length ? data?.area[data.area.length - 1] : "",
+ }).then(
+ (res) => {
+ if (parseInt(res?.status) === 20000) {
+ setData({
+ data: res?.data?.list || [],
+ total: res?.total || 0,
+ });
+ setLoading(true);
+ } else {
+ message.error(res?.message);
+ }
+ setLoading(true);
+ },
+ (err) => {
+ console.log(err);
+ setLoading(true);
+ }
+ );
+ };
+ useEffect(() => {
+ sessionStorage.setItem("FormData_ParkingAly", JSON.stringify(FormDatas));
+ getData(FormDatas);
+ //调用接口
+ }, [FormDatas]);
+ useEffect(() => {
+ getSelectData();
+ getRevenueOption();
+ getRingOption();
+ }, []);
+ return (
+ <div className="RegisterAly">
+ <div className="body_cenf">
+ <div className="left_search">
+ <div className="hrestit">查询条件</div>
+ <div className="form_item">
+ <div className="labb">
+ 日期
+ <div className="daf">
+ <Select
+ value={FormData.date_type}
+ // style={{
+ // width: "100%",
+ // }}
+ placeholder="请选择"
+ options={[
+ {
+ value: "1",
+ label: "日",
+ },
+ {
+ value: "2",
+ label: "周",
+ },
+ {
+ value: "3",
+ label: "月",
+ },
+ {
+ value: "4",
+ label: "年",
+ },
+ ]}
+ onChange={(e) => SetTimeNow(e)}
+ />
+ </div>
+ </div>
+ <div className="inputs">
+ <DatePicker
+ style={{ width: "100%" }}
+ // showTime
+ format={TimeChange().mat}
+ picker={TimeChange().str}
+ allowClear={false}
+ value={FormData.start_time ? moment(FormData.start_time) : null}
+ onChange={(date, dateString) => {
+ if (TimeChange().str == "week") {
+ setFormData({
+ ...FormData,
+ start_time: date
+ ? moment(date).day(1).format("YYYY-MM-DD")
+ : null,
+ });
+ } else if (TimeChange().str == "day") {
+ if (date > moment(FormData.end_time)) {
+ setFormData({
+ ...FormData,
+ end_time: dateString,
+ start_time: FormData.end_time,
+ });
+ } else {
+ setFormData({
+ ...FormData,
+ start_time: dateString,
+ });
+ }
+ } else {
+ setFormData({ ...FormData, start_time: dateString });
+ }
+ }}
+ disabledDate={(current) => current > moment(FormData.end_time)}
+ />
+ </div>
+ </div>
+ <div className="form_item">
+ <span className="lab">至</span>
+ <div className="inputs">
+ <DatePicker
+ style={{ width: "100%" }}
+ // showTime
+ format={TimeChange().mat}
+ picker={TimeChange().str}
+ allowClear={false}
+ value={FormData.end_time ? moment(FormData.end_time) : null}
+ onChange={(date, dateString) => {
+ if (TimeChange().str == "week") {
+ setFormData({
+ ...FormData,
+ end_time: date
+ ? moment(date).day(7).format("YYYY-MM-DD")
+ : null,
+ });
+ } else if (TimeChange().str == "day") {
+ if (date < moment(FormData.start_time)) {
+ setFormData({
+ ...FormData,
+ start_time: dateString,
+ end_time: FormData.start_time,
+ });
+ } else {
+ setFormData({
+ ...FormData,
+ end_time: dateString,
+ });
+ }
+ } else {
+ setFormData({ ...FormData, end_time: dateString });
+ }
+ }}
+ disabledDate={(current) =>
+ current < moment(FormData.start_time)
+ }
+ />
+ </div>
+ </div>
+ <div className="but_on">
+ <span
+ className="sear_res"
+ onClick={() => {
+ var reset = formdata;
+ setFormData(reset);
+ setFormDatas(reset);
+ }}
+ >
+ 重置
+ </span>
+ <span
+ className={"sear_ser lent"}
+ onClick={() => {
+ var fortm = FormData;
+ setFormData({
+ ...fortm,
+ pn: 1,
+ });
+ setFormDatas({
+ ...fortm,
+ pn: 1,
+ });
+ }}
+ >
+ 查询
+ </span>
+ </div>
+ </div>
+ <div className="right_tab">
+ <div className="parkinglive-box">
+ <div className="result-box parkinglive-left">
+ <div className="result-box-title">泊位占用率</div>
+ <Tooltip
+ placement="topLeft"
+ title={
+ <span>
+ 展示当前的实时泊位利用率泊位利用率=占用泊位数/总泊位数*100%
+ </span>
+ }
+ >
+ <i>?</i>
+ </Tooltip>
+ <ReactEcharts
+ option={ringData}
+ style={{ height: "300px", width: "100%", overflow: "hidden" }}
+ />
+ </div>
+ <div className="result-box parkinglive-right">
+ <div className="result-box-title">在场会员车占比</div>
+ <Tooltip
+ placement="topLeft"
+ title={
+ <span>
+ 展示当前的在场会员车占比在场会员车占比=场内会员车辆数/场内车辆总数*100%
+ </span>
+ }
+ >
+ <i>?</i>
+ </Tooltip>
+ <ReactEcharts
+ option={ringData}
+ style={{ height: "300px", width: "100%", overflow: "hidden" }}
+ />
+ </div>
+ </div>
+ <div className="result-box">
+ <div className="result-box-title">新增用户趋势图</div>
+ <Tooltip
+ placement="topLeft"
+ title={
+ <span>展示统计时间段内每日或每月产生的注册会员数量趋势</span>
+ }
+ >
+ <i>?</i>
+ </Tooltip>
+ <ReactEcharts
+ option={revenueData}
+ style={{ height: "300px", width: "100%", overflow: "hidden" }}
+ />
+ </div>
+ <div className="sd">
+ <p>
+ 共查询到<span> {Data?.total || 0}</span>条数据
+ </p>
+ <span
+ className={"sear_ser"}
+ onClick={() => {
+ ReportPaySummaryReport();
+ // setFormDatas({ ...FormData });
+ }}
+ >
+ 导出
+ </span>
+ </div>
+ <ResultFlow
+ hasLoad={true}
+ loading={loading}
+ resultData={Data.data}
+ message={"暂无数据"}
+ >
+ <div className="scrplltab">
+ <div className="table_raps">
+ <Table
+ className="yisa_tabled"
+ columns={column(selectArr)}
+ rowKey={(record) => record.id}
+ dataSource={Data.data}
+ pagination={false}
+ scroll={{
+ // x: 1300,
+ y: "calc(100vh - 720px)",
+ }}
+ />
+ </div>
+ </div>
+
+ <div>
+ <Pagination
+ className="pagination-common"
+ showSizeChanger={true}
+ showQuickJumper={true}
+ // showTotal={() => `共 ${total_records} 条`}
+ total={Data.total}
+ current={FormData.pn}
+ pageSize={FormData.page_size}
+ pageSizeOptions={dictionary?.pageSizeOptions}
+ onChange={onShowSizeChange}
+ onShowSizeChange={onShowSizeChange}
+ />
+ </div>
+ </ResultFlow>
+ </div>
+ </div>
+ </div>
+ );
}
-export default RegisterAly;
\ No newline at end of file
+export default RegisterAly;