19 changed files with 2811 additions and 474 deletions
-
144src/components/DataSelect/index.jsx
-
17src/components/DataSelect/index.scss
-
16src/components/TableModule/index.jsx
-
2src/components/index.jsx
-
250src/pages/DataAnalysisPrediction/ParkingBusinessAly/CarTypeAly/index.scss
-
817src/pages/DataAnalysisPrediction/ParkingBusinessAly/CarTypeAly/loadable.jsx
-
581src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkBerthAly/loadable.jsx
-
656src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkTurnoverAly/loadable.jsx
-
199src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkingAlyOverview/index.scss
-
563src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkingAlyOverview/loadable.jsx
-
4src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkingLiveData/loadable.jsx
-
14src/pages/FinancialMgm/OrderInquiry/ReturnOrderInquiry/index.jsx
-
2src/pages/InRoadMgm/RecordInquiry/ArrearsInquiries/loadable.jsx
-
2src/pages/InRoadMgm/RecordInquiry/ArrearsRecordTotal/loadable.jsx
-
2src/pages/InRoadMgm/RecordInquiry/DisabledCarParkRecordTotal/loadable.jsx
-
2src/pages/InRoadMgm/RecordInquiry/EntryExitOptPDA/loadable.jsx
-
2src/pages/InRoadMgm/RecordInquiry/GeomagneticSignalMgm/loadable.jsx
-
2src/pages/InRoadMgm/RecordInquiry/ParkRecordTotal/loadable.jsx
-
2src/pages/InRoadMgm/RecordInquiry/UnRecordOrder/loadable.jsx
@ -0,0 +1,144 @@ |
|||
import React, { useState, useEffect } from 'react' |
|||
import moment from 'moment' |
|||
import { Select, DatePicker, } from "antd"; |
|||
// import { Dropdown, Menu } from 'antd' |
|||
// import Icon from '../Icon' |
|||
import './index.scss' |
|||
|
|||
function DataSelect(props) { |
|||
console.log(props) |
|||
const { |
|||
formData = { |
|||
date_type:'4' |
|||
}, |
|||
SetTimeNow, |
|||
} = props |
|||
|
|||
//时间状态切换 |
|||
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 }; |
|||
}; |
|||
|
|||
|
|||
return ( |
|||
<> |
|||
<div className="yisa-search"> |
|||
<label>日期 |
|||
<div className="daf"> |
|||
<Select |
|||
value={formData?.date_type||''} |
|||
placeholder="请选择" |
|||
options={[ |
|||
{ |
|||
value: "1", |
|||
label: "日", |
|||
}, |
|||
{ |
|||
value: "2", |
|||
label: "周", |
|||
}, |
|||
{ |
|||
value: "3", |
|||
label: "月", |
|||
}, |
|||
{ |
|||
value: "4", |
|||
label: "年", |
|||
}, |
|||
]} |
|||
onChange={(e) => SetTimeNow(e)} |
|||
/> |
|||
</div> |
|||
</label> |
|||
<DatePicker |
|||
style={{ width: "100%" }} |
|||
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 className="yisa-search"> |
|||
<label>至</label> |
|||
<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> |
|||
</> |
|||
) |
|||
} |
|||
|
|||
export default DataSelect |
|||
@ -0,0 +1,17 @@ |
|||
.quick-menu { |
|||
flex: 1; |
|||
width: 100%; |
|||
padding: 5px 0; |
|||
color: #3d97eb; |
|||
ul { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
margin-bottom: 0; |
|||
li { |
|||
display: inline-block; |
|||
flex: auto; |
|||
text-align: center; |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
} |
|||
@ -1,5 +1,255 @@ |
|||
@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); |
|||
|
|||
.edit-order-inquiry { |
|||
display: flex; |
|||
padding-top: 10px; |
|||
width: 100%; |
|||
height: 100%; |
|||
overflow-y: auto; |
|||
@include scrollBar(var(--color-user-list-bg), #3B97FF); |
|||
|
|||
.paid-search { |
|||
display: block; |
|||
width: 375px; |
|||
padding: 10px 10px 20px 20px; |
|||
|
|||
.title { |
|||
width: 100%; |
|||
font-size: 16px; |
|||
font-family: Microsoft YaHei, Microsoft YaHei-Bold; |
|||
font-weight: 700; |
|||
text-align: left; |
|||
color: var(--color-text); |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.form-Wrap { |
|||
height: calc(100% - 45px); |
|||
overflow-y: auto; |
|||
scrollbar-width: none; |
|||
-ms-overflow-style: none; |
|||
|
|||
&::-webkit-scrollbar { |
|||
display: none; |
|||
} |
|||
} |
|||
|
|||
.ant-select-selector, |
|||
.ant-picker, |
|||
.ant-input { |
|||
background-color: var(--color-search-list-item-bg) !important; |
|||
box-shadow: none !important; |
|||
color: var(--color-search-list-item-value); |
|||
border-color: var(--color-search-list-item-bd) !important; |
|||
} |
|||
|
|||
.yisa-search { |
|||
width: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 24px; |
|||
|
|||
label { |
|||
color: var(--color-search-list-item-text); |
|||
flex: 0 0 27%; |
|||
max-width: 27%; |
|||
text-align: right; |
|||
padding-right: 8px; |
|||
.daf { |
|||
display: inline-block; |
|||
} |
|||
} |
|||
|
|||
.form-con { |
|||
flex: 1; |
|||
width: 220px; |
|||
} |
|||
} |
|||
|
|||
.form-btn { |
|||
display: flex; |
|||
flex-flow: row nowrap; |
|||
justify-content: space-between; |
|||
margin: 40px 0px 0px; |
|||
padding: 0 3px; |
|||
|
|||
.ant-btn+.ant-btn { |
|||
margin-left: 10px; |
|||
} |
|||
|
|||
.ant-btn span { |
|||
font-size: 16px; |
|||
font-family: Microsoft YaHei, Microsoft YaHei-Regular; |
|||
font-weight: 400; |
|||
text-align: center; |
|||
color: #ffffff; |
|||
} |
|||
|
|||
.reset { |
|||
width: 90px; |
|||
height: 36px; |
|||
background: var(--button-default-bg); |
|||
} |
|||
|
|||
.submit { |
|||
width: calc(100% - 100px); |
|||
height: 36px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.ant-btn+.ant-btn { |
|||
margin-left: 10px; |
|||
} |
|||
|
|||
.green { |
|||
background-color: #67c23a; |
|||
border-color: #67c23a; |
|||
} |
|||
.soll-result { |
|||
overflow: auto; |
|||
.result { |
|||
display: block !important; |
|||
} |
|||
} |
|||
.paid-result { |
|||
width: calc(100% - 375px); |
|||
padding-bottom: 15px; |
|||
padding: 20px; |
|||
background: var(--color-user-list-bg); |
|||
border-top-left-radius: 20px; |
|||
box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.08); |
|||
|
|||
.result { |
|||
@include flex-columns; |
|||
.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; |
|||
} |
|||
} |
|||
.overview-left { |
|||
display: inline-block; |
|||
width: 46%; |
|||
margin-right: 20px; |
|||
} |
|||
.overview-right { |
|||
display: inline-block; |
|||
width: 50%; |
|||
} |
|||
.row-head { |
|||
height: 32px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
margin-bottom: 13px; |
|||
|
|||
.number-wrapper { |
|||
display: inline-flex; |
|||
align-items: center; |
|||
font-size: 14px; |
|||
|
|||
.letter { |
|||
color: var(--color-text); |
|||
font-size: 14px; |
|||
} |
|||
|
|||
.total-number { |
|||
color: var(--color-primary); |
|||
font-weight: bold; |
|||
margin: 0 4px; |
|||
font-size: 14px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.cc-result-flow { |
|||
width: 100%; |
|||
height: calc(100% - 34px - 13px); |
|||
|
|||
.yisa-table { |
|||
width: 100%; |
|||
height: calc(100% - 32px - 15px); |
|||
overflow-y: auto !important; |
|||
@include scrollBar(var(--color-user-list-bg), #3B97FF); |
|||
|
|||
.ant-table-thead { |
|||
th { |
|||
background: #616b83 !important; |
|||
} |
|||
} |
|||
|
|||
.ant-table-tbody { |
|||
td { |
|||
background: #3E4557 !important; |
|||
border-bottom-color: var(--color-table-border-bottom-color); |
|||
} |
|||
|
|||
tr:nth-child(even) { |
|||
td { |
|||
background: #3E4557 !important; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
} |
|||
|
|||
.modal-pay-configuration { |
|||
|
|||
.submitBtn { |
|||
text-align: center; |
|||
margin: 20px 0 0; |
|||
|
|||
.ant-btn { |
|||
width: 80px; |
|||
height: 35px; |
|||
border: none; |
|||
border-radius: 4px; |
|||
|
|||
span { |
|||
color: #ffffff; |
|||
} |
|||
} |
|||
|
|||
.submit { |
|||
background: #409eff; |
|||
} |
|||
|
|||
.cancel { |
|||
background: var(--button-default-bg); |
|||
margin-left: 20px; |
|||
} |
|||
} |
|||
} |
|||
@ -1,15 +1,810 @@ |
|||
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 { 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 React, { useState, useEffect } from "react"; |
|||
import { ResultFlowResult, DataSelect } from "@/components"; |
|||
import { Select, Input, Button, Table, message, Pagination, DatePicker, Modal, Cascader, Tooltip } from "antd"; |
|||
import { useSessionStorageState } from "ahooks"; |
|||
import { dictionary } from "@/config/common"; |
|||
import { useNavigate } from "react-router-dom"; |
|||
import { setTabList } from "@/store/common.js"; |
|||
import { useSelector, useDispatch } from "react-redux"; |
|||
import { QuestionCircleFilled } from "@ant-design/icons" |
|||
import moment from "moment"; |
|||
import ReactEcharts from "echarts-for-react"; |
|||
import "./index.scss"; |
|||
import ajax from "@/services"; |
|||
//车辆类型分析 |
|||
function CarTypeAly() { |
|||
return <div>CarTypeAly</div> |
|||
// session缓存 |
|||
const [defaultParams, setDefaultParams] = useSessionStorageState( |
|||
"formData_carTypeAly", |
|||
{ defaultValue: null } |
|||
); |
|||
//区域的下拉数据 |
|||
const [areaList, setAreaList] = useState([]); |
|||
// 默认数据 |
|||
const defaultData = { |
|||
confirm_start_time: moment().subtract('days').startOf('day').format("YYYY-MM-DD HH:mm:ss"), |
|||
confirm_end_time: moment().endOf("day").format("YYYY-MM-DD HH:mm:ss"), |
|||
create_start_time: moment().subtract('days').startOf('day').format("YYYY-MM-DD HH:mm:ss"), |
|||
create_end_time: moment().endOf("day").format("YYYY-MM-DD HH:mm:ss"), |
|||
app_name: "", // 应用名称 |
|||
app_type: 0, //应用类型 |
|||
pay_merchant_id: 0, //支付商户名称 |
|||
}; |
|||
// 分页数据 |
|||
const [pageInfo, setPageInfo] = useState({ |
|||
pn: defaultParams ? defaultParams?.pn : 1, |
|||
page_size: defaultParams ? defaultParams?.page_size : 15, |
|||
}); |
|||
// 表单数据 |
|||
const [formData, setFormData] = useState({ |
|||
data_type:'1', |
|||
...defaultData, |
|||
...defaultParams, |
|||
}); |
|||
// 搜索提交数据-存储 |
|||
const [holdData, setHoldData] = useState(formData); |
|||
// 访问接口，isAjax改变时执行 |
|||
const [isAjax, setIsAjax] = useState(false); |
|||
// 检索按钮加载状态 |
|||
const [loading, setLoading] = useState(false); |
|||
// 表格加载状态 |
|||
const [tabLoading, setTabLoading] = useState(false); |
|||
// 表格返回数据 |
|||
const [resultData, setResultData] = useState({ |
|||
total: 0, |
|||
list: [], |
|||
}); |
|||
// |
|||
const [revenueData, setRevenueData] = useState({}); |
|||
const [parkingData, setParkingData] = useState({}); |
|||
// |
|||
const [ringData, setRingData] = useState({}); |
|||
const [searchSelectList, setSearchSelectList] = useState([]); //搜索下拉数据 |
|||
const [sessionTabList, setSessionTabList] = useSessionStorageState('carTypeAly', { |
|||
value: { |
|||
} |
|||
}) |
|||
useEffect(() => { |
|||
if (sessionTabList && Object.values(sessionTabList).length > 0) { |
|||
setFormData({ |
|||
...formData, ...sessionTabList |
|||
}) |
|||
getData({ |
|||
...sessionTabList |
|||
}) |
|||
} else { |
|||
getData() |
|||
} |
|||
}, [isAjax]) |
|||
useEffect(() => { |
|||
setSessionTabList({ |
|||
...formData |
|||
}) |
|||
}, [formData]) |
|||
useEffect(() => { |
|||
getSelectList(); |
|||
}, []); |
|||
|
|||
// 访问接口，获取表格 |
|||
// useEffect(() => { |
|||
// getData(); |
|||
// }, [isAjax]); |
|||
//时间状态切换 |
|||
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, |
|||
}); |
|||
}; |
|||
//出入场趋势 |
|||
const getRevenueOption = (data) => { |
|||
// 获取所有地区名称 |
|||
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.area_name))]; |
|||
// 获取所有日期 |
|||
const dates = [...new Set(data.map((item) => item.pay_date))].sort( |
|||
(a, b) => a.pay_date - b.pay_date |
|||
); |
|||
// 构建数据对象 |
|||
const seriesData = areaNames.map((areaName, index) => { |
|||
// 获取该地区的数据 |
|||
const areaData = data.filter((item) => item.area_name === areaName); |
|||
// 构建该地区的数据对象 |
|||
return { |
|||
name: areaName, |
|||
type: "line", |
|||
itemStyle: { |
|||
normal: { |
|||
label: { |
|||
show: true, //开启显示 |
|||
position: 'top', //在上方显示 |
|||
textStyle: { //数值样式 |
|||
color: 'white',//字体颜色 |
|||
fontSize: 10//字体大小 |
|||
} |
|||
}, |
|||
}, |
|||
}, |
|||
data: dates.map((item) => { |
|||
for (const { pay_date, income } of areaData) { |
|||
console.log(pay_date, income); |
|||
if (pay_date === item) return income; |
|||
} |
|||
return 0; |
|||
}), |
|||
yAxisIndex: index == 1 ? 1 : null, |
|||
}; |
|||
}); |
|||
console.log(21, areaNames, seriesData) |
|||
// 构建X轴数据 |
|||
const xAxisData = dates.map((date) => { |
|||
return { |
|||
value: date, |
|||
textStyle: { |
|||
align: "center", |
|||
lineStyle: { |
|||
color: "skyblue", // 设置线的颜色为天蓝色 |
|||
shadowBlur: 6, |
|||
}, |
|||
}, |
|||
}; |
|||
}); |
|||
|
|||
setRevenueData({ |
|||
title: { |
|||
text: "", |
|||
textStyle: { |
|||
color: "#fff", |
|||
}, |
|||
}, |
|||
tooltip: { |
|||
trigger: "axis", |
|||
}, |
|||
legend: { |
|||
type: "scroll", |
|||
right: "5%", |
|||
//data: areaNames, |
|||
data: ["临时停车次数", "常时停车次数"], |
|||
itemWidth: 18, |
|||
itemHeight: 12, |
|||
textStyle: { |
|||
fontSize: 14, |
|||
color: 'white', |
|||
}, |
|||
}, |
|||
xAxis: { |
|||
//data: xAxisData, |
|||
data: ["00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00"], |
|||
type: 'category', |
|||
boundaryGap: false, // 不留白，从原点开始 |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: "#bbb", |
|||
}, |
|||
}, |
|||
axisLabel: { |
|||
textStyle: { |
|||
color: "#bbb", |
|||
}, |
|||
}, |
|||
}, |
|||
yAxis: { |
|||
type: "value", |
|||
name: '数量（次）', |
|||
min: 0, |
|||
//max: 50, |
|||
//interval: 10, |
|||
//splitNumber: 6, //设置坐标轴的分割段数 |
|||
}, |
|||
color: ["#4DC3FF", "#FFD767"], |
|||
//series: seriesData, |
|||
series: [ |
|||
{ |
|||
"name": "临时停车次数", |
|||
"type": "line", |
|||
"data": [ |
|||
12, |
|||
12, |
|||
24 |
|||
] |
|||
}, |
|||
{ |
|||
"name": "常时停车次数", |
|||
"type": "line", |
|||
"data": [ |
|||
9, |
|||
4, |
|||
4 |
|||
] |
|||
} |
|||
], |
|||
grid: { |
|||
x: 50, |
|||
y: 55, |
|||
x2: 70, |
|||
y2: 20, |
|||
}, |
|||
}); |
|||
}; |
|||
//泊位占用趋势 |
|||
const getParkingOption = (data) => { |
|||
// 获取所有地区名称 |
|||
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.area_name))]; |
|||
// 获取所有日期 |
|||
const dates = [...new Set(data.map((item) => item.pay_date))].sort( |
|||
(a, b) => a.pay_date - b.pay_date |
|||
); |
|||
// 构建数据对象 |
|||
const seriesData = areaNames.map((areaName, index) => { |
|||
// 获取该地区的数据 |
|||
const areaData = data.filter((item) => item.area_name === areaName); |
|||
// 构建该地区的数据对象 |
|||
return { |
|||
name: areaName, |
|||
type: "line", |
|||
itemStyle: { |
|||
normal: { |
|||
label: { |
|||
show: true, //开启显示 |
|||
position: 'top', //在上方显示 |
|||
textStyle: { //数值样式 |
|||
color: 'white',//字体颜色 |
|||
fontSize: 10//字体大小 |
|||
} |
|||
}, |
|||
}, |
|||
}, |
|||
data: dates.map((item) => { |
|||
for (const { pay_date, income } of areaData) { |
|||
console.log(pay_date, income); |
|||
if (pay_date === item) return income; |
|||
} |
|||
return 0; |
|||
}), |
|||
yAxisIndex: index == 1 ? 1 : null, |
|||
}; |
|||
}); |
|||
console.log(21, areaNames, seriesData) |
|||
// 构建X轴数据 |
|||
const xAxisData = dates.map((date) => { |
|||
return { |
|||
value: date, |
|||
textStyle: { |
|||
align: "center", |
|||
lineStyle: { |
|||
color: "skyblue", // 设置线的颜色为天蓝色 |
|||
shadowBlur: 6, |
|||
}, |
|||
}, |
|||
}; |
|||
}); |
|||
|
|||
setParkingData({ |
|||
title: { |
|||
text: "", |
|||
textStyle: { |
|||
color: "#fff", |
|||
}, |
|||
}, |
|||
tooltip: { |
|||
trigger: "axis", |
|||
}, |
|||
// legend: { |
|||
// type: "scroll", |
|||
// right: "5%", |
|||
// //data: areaNames, |
|||
// //data: ["临时停车次数", "常时停车次数"], |
|||
// itemWidth: 18, |
|||
// itemHeight: 12, |
|||
// textStyle: { |
|||
// fontSize: 14, |
|||
// color: 'white', |
|||
// }, |
|||
// }, |
|||
xAxis: { |
|||
//data: xAxisData, |
|||
data: ["00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00"], |
|||
type: 'category', |
|||
boundaryGap: false, // 不留白，从原点开始 |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: "#bbb", |
|||
}, |
|||
}, |
|||
axisLabel: { |
|||
textStyle: { |
|||
color: "#bbb", |
|||
}, |
|||
}, |
|||
|
|||
}, |
|||
yAxis: { |
|||
type: "value", |
|||
name: '泊位占用率', |
|||
min: 0, |
|||
max: 100, |
|||
interval: 10, |
|||
//splitNumber: 6, //设置坐标轴的分割段数 |
|||
axisLabel: { |
|||
formatter: "{value}%", |
|||
textStyle: { |
|||
color: "#bbb", |
|||
}, |
|||
}, |
|||
}, |
|||
color: ["#4DC3FF", "#FFD767"], |
|||
//series: seriesData, |
|||
series: |
|||
{ |
|||
"name": "临时停车次数", |
|||
"type": "line", |
|||
"data": [40, 0, 90, 34, 98, 100, 70, 80], |
|||
areaStyle: { |
|||
normal: {//自定义颜色，渐变色填充折线图区域 |
|||
color: { |
|||
type: 'linear', |
|||
x: 0, |
|||
y: 0, |
|||
x2: 0, |
|||
y2: 1, |
|||
colorStops: [{ |
|||
offset: 0, color: '#FFB8B8' // 0% 处的颜色 |
|||
}, { |
|||
offset: 1, color: '#F481F8' // 100% 处的颜色 |
|||
}], |
|||
globalCoord: false // 缺省为 false |
|||
} |
|||
}, |
|||
} |
|||
}, |
|||
grid: { |
|||
x: 50, |
|||
y: 55, |
|||
x2: 70, |
|||
y2: 20, |
|||
}, |
|||
}); |
|||
}; |
|||
// |
|||
const getRingOption = (data) => { |
|||
// 获取所有地区名称 |
|||
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.area_name))]; |
|||
|
|||
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, |
|||
}, |
|||
}); |
|||
}; |
|||
|
|||
function getParkingIncome() { |
|||
ajax |
|||
.getParkingIncome() |
|||
.then((res) => { |
|||
if (res.status === 20000) { |
|||
console.log(res) |
|||
getRevenueOption(res.data); |
|||
getParkingOption(res.data); |
|||
getRingOption(res.data) |
|||
} |
|||
}) |
|||
.catch((err) => console.error(err)); |
|||
} |
|||
|
|||
// 获取下拉数据 |
|||
const getSelectList = () => { |
|||
ajax.getPayRecordTotalSelect().then( |
|||
(res) => { |
|||
if (parseInt(res?.status) === 20000) { |
|||
setSearchSelectList(res.data || {}); |
|||
} |
|||
}, |
|||
(err) => { |
|||
console.log(err); |
|||
} |
|||
); |
|||
}; |
|||
|
|||
// 获取列表数据 |
|||
const getData = (v) => { |
|||
let postData = { ...formData }; |
|||
if (!loading) { |
|||
postData = { ...holdData }; |
|||
} |
|||
setDefaultParams({ ...postData, ...pageInfo }); |
|||
setTabLoading(true); |
|||
ajax.getAppList({ ...postData, ...pageInfo, ...v }).then( |
|||
(res) => { |
|||
if (parseInt(res?.status) === 20000) { |
|||
setResultData(res?.data || {}); |
|||
} else { |
|||
message.error(res?.message); |
|||
} |
|||
setLoading(false); |
|||
setTabLoading(false); |
|||
}, |
|||
(err) => { |
|||
console.log(err); |
|||
setLoading(false); |
|||
setTabLoading(false); |
|||
} |
|||
); |
|||
}; |
|||
|
|||
// 检索数据 |
|||
const handleSearch = () => { |
|||
setLoading(true); |
|||
setPageInfo({ ...pageInfo, ...{ pn: 1 } }); |
|||
setHoldData(formData); |
|||
setIsAjax(!isAjax); |
|||
}; |
|||
|
|||
useEffect(() => { |
|||
getParkingIncome(); |
|||
}, []); |
|||
//区域下拉框数据 |
|||
useEffect(() => { |
|||
ajax |
|||
.getAreaTree() |
|||
.then((res) => { |
|||
if (res.status === 20000) { |
|||
setAreaList(res.data); |
|||
} |
|||
}) |
|||
.catch((err) => { |
|||
console.error(err); |
|||
}); |
|||
}, []); |
|||
return ( |
|||
<> |
|||
<div className="edit-order-inquiry"> |
|||
<div className="paid-search"> |
|||
<div className="title">查询条件</div> |
|||
<div className="form-Wrap"> |
|||
<div className="yisa-search"> |
|||
<label>区域</label> |
|||
<Cascader |
|||
className="form-con" |
|||
popupClassName="start-exception-deal-cascader" |
|||
options={areaList} |
|||
placeholder="请选择区域" |
|||
expandTrigger="hover" |
|||
fieldNames={{ |
|||
label: "name", |
|||
value: "id", |
|||
children: "children", |
|||
}} |
|||
value={formData.region} |
|||
onChange={(v, option) => { |
|||
setFormData({ ...formData, region: v ? v : null }); |
|||
}} |
|||
/> |
|||
</div> |
|||
<div className="yisa-search"> |
|||
<label>运营商</label> |
|||
<Select |
|||
className="form-con" |
|||
placeholder="请选择" |
|||
options={searchSelectList?.flow_type_list || []} |
|||
value={formData.pay_merchant_id} |
|||
onChange={(v) => |
|||
setFormData({ ...formData, pay_merchant_id: v }) |
|||
} |
|||
/> |
|||
</div> |
|||
<div className="yisa-search"> |
|||
<label>车场类型</label> |
|||
<Select |
|||
className="form-con" |
|||
placeholder="请选择车场类型" |
|||
options={[ |
|||
{ |
|||
label: '全部', |
|||
value: '0', |
|||
}, |
|||
{ |
|||
label: '路内车场', |
|||
value: '1', |
|||
}, |
|||
{ |
|||
label: '路外车场', |
|||
value: '2', |
|||
}, |
|||
]} |
|||
value={formData.pay_merchant_id} |
|||
onChange={(v) => |
|||
setFormData({ ...formData, pay_merchant_id: v }) |
|||
} |
|||
/> |
|||
</div> |
|||
<div className="yisa-search"> |
|||
<label>停车场</label> |
|||
<Input |
|||
className="form-con" |
|||
placeholder="请输入" |
|||
value={formData?.park} |
|||
onChange={(e) => |
|||
setFormData({ ...formData, park: e.target.value }) |
|||
} |
|||
/> |
|||
</div> |
|||
<div className="yisa-search"> |
|||
<label>日期 |
|||
<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> |
|||
</label> |
|||
<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 className="yisa-search"> |
|||
<label>至</label> |
|||
<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 className="form-btn"> |
|||
<Button |
|||
className="reset" |
|||
onClick={() => setFormData(defaultData)} |
|||
> |
|||
重置 |
|||
</Button> |
|||
<Button |
|||
className="submit" |
|||
type="primary" |
|||
onClick={handleSearch} |
|||
loading={loading} |
|||
> |
|||
查询 |
|||
</Button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div className="paid-result soll-result"> |
|||
<div className="result"> |
|||
<div className="parkinglive-box"> |
|||
<div className="result-box parkinglive-left"> |
|||
<div className="result-box-title">新能源车辆占比</div> |
|||
<Tooltip |
|||
placement="topLeft" |
|||
title={<span>展示统计期间出现过的能源车辆数与非新能源车辆数之间的对比情况</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>展示统计时间段内不同车型车之间数量的对比情况</span>} |
|||
> |
|||
<i>?</i> |
|||
</Tooltip> |
|||
<ReactEcharts |
|||
option={ringData} |
|||
style={{ height: "300px", width: "100%", overflow: "hidden" }} |
|||
/> |
|||
</div> |
|||
</div> |
|||
<div className="parkinglive-box"> |
|||
<div className="result-box parkinglive-left"> |
|||
<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="result-box parkinglive-right"> |
|||
<div className="result-box-title">新能源车排行</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</> |
|||
); |
|||
} |
|||
|
|||
export default CarTypeAly; |
|||
@ -1,15 +1,574 @@ |
|||
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 { 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 React, { useState, useEffect } from "react"; |
|||
import { ResultFlowResult, DataSelect } from "@/components"; |
|||
import { Select, Input, Button, Table, message, Pagination, DatePicker, Modal, Cascader, Tooltip } from "antd"; |
|||
import { useSessionStorageState } from "ahooks"; |
|||
import { dictionary } from "@/config/common"; |
|||
import { useNavigate } from "react-router-dom"; |
|||
import { setTabList } from "@/store/common.js"; |
|||
import { useSelector, useDispatch } from "react-redux"; |
|||
import { QuestionCircleFilled } from "@ant-design/icons" |
|||
import moment from "moment"; |
|||
import ReactEcharts from "echarts-for-react"; |
|||
import "./index.scss"; |
|||
import ajax from "@/services"; |
|||
function ParkBerthAly() { |
|||
return <div>ParkBerthAly</div> |
|||
// session缓存 |
|||
const [defaultParams, setDefaultParams] = useSessionStorageState( |
|||
"formData_carTypeAly", |
|||
{ defaultValue: null } |
|||
); |
|||
//区域的下拉数据 |
|||
const [areaList, setAreaList] = useState([]); |
|||
// 默认数据 |
|||
const defaultData = { |
|||
confirm_start_time: moment().subtract('days').startOf('day').format("YYYY-MM-DD HH:mm:ss"), |
|||
confirm_end_time: moment().endOf("day").format("YYYY-MM-DD HH:mm:ss"), |
|||
create_start_time: moment().subtract('days').startOf('day').format("YYYY-MM-DD HH:mm:ss"), |
|||
create_end_time: moment().endOf("day").format("YYYY-MM-DD HH:mm:ss"), |
|||
app_name: "", // 应用名称 |
|||
app_type: 0, //应用类型 |
|||
pay_merchant_id: 0, //支付商户名称 |
|||
}; |
|||
// 分页数据 |
|||
const [pageInfo, setPageInfo] = useState({ |
|||
pn: defaultParams ? defaultParams?.pn : 1, |
|||
page_size: defaultParams ? defaultParams?.page_size : 15, |
|||
}); |
|||
// 表单数据 |
|||
const [formData, setFormData] = useState({ |
|||
...defaultData, |
|||
...defaultParams, |
|||
}); |
|||
// 搜索提交数据-存储 |
|||
const [holdData, setHoldData] = useState(formData); |
|||
// 访问接口，isAjax改变时执行 |
|||
const [isAjax, setIsAjax] = useState(false); |
|||
// 检索按钮加载状态 |
|||
const [loading, setLoading] = useState(false); |
|||
// 表格加载状态 |
|||
const [tabLoading, setTabLoading] = useState(false); |
|||
// 表格返回数据 |
|||
const [resultData, setResultData] = useState({ |
|||
total: 0, |
|||
list: [], |
|||
}); |
|||
// |
|||
const [revenueData, setRevenueData] = useState({}); |
|||
const [parkingData, setParkingData] = useState({}); |
|||
// |
|||
const [ringData, setRingData] = useState({}); |
|||
const [searchSelectList, setSearchSelectList] = useState([]); //搜索下拉数据 |
|||
const [sessionTabList, setSessionTabList] = useSessionStorageState('carTypeAly', { |
|||
value: { |
|||
} |
|||
}) |
|||
useEffect(() => { |
|||
if (sessionTabList && Object.values(sessionTabList).length > 0) { |
|||
setFormData({ |
|||
...formData, ...sessionTabList |
|||
}) |
|||
getData({ |
|||
...sessionTabList |
|||
}) |
|||
} else { |
|||
getData() |
|||
} |
|||
}, [isAjax]) |
|||
useEffect(() => { |
|||
setSessionTabList({ |
|||
...formData |
|||
}) |
|||
}, [formData]) |
|||
useEffect(() => { |
|||
getSelectList(); |
|||
}, []); |
|||
|
|||
// 访问接口，获取表格 |
|||
// useEffect(() => { |
|||
// getData(); |
|||
// }, [isAjax]); |
|||
|
|||
//出入场趋势 |
|||
const getRevenueOption = (data) => { |
|||
// 获取所有地区名称 |
|||
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.area_name))]; |
|||
// 获取所有日期 |
|||
const dates = [...new Set(data.map((item) => item.pay_date))].sort( |
|||
(a, b) => a.pay_date - b.pay_date |
|||
); |
|||
// 构建数据对象 |
|||
const seriesData = areaNames.map((areaName, index) => { |
|||
// 获取该地区的数据 |
|||
const areaData = data.filter((item) => item.area_name === areaName); |
|||
// 构建该地区的数据对象 |
|||
return { |
|||
name: areaName, |
|||
type: "line", |
|||
itemStyle: { |
|||
normal: { |
|||
label: { |
|||
show: true, //开启显示 |
|||
position: 'top', //在上方显示 |
|||
textStyle: { //数值样式 |
|||
color: 'white',//字体颜色 |
|||
fontSize: 10//字体大小 |
|||
} |
|||
}, |
|||
}, |
|||
}, |
|||
data: dates.map((item) => { |
|||
for (const { pay_date, income } of areaData) { |
|||
console.log(pay_date, income); |
|||
if (pay_date === item) return income; |
|||
} |
|||
return 0; |
|||
}), |
|||
yAxisIndex: index == 1 ? 1 : null, |
|||
}; |
|||
}); |
|||
console.log(21, areaNames, seriesData) |
|||
// 构建X轴数据 |
|||
const xAxisData = dates.map((date) => { |
|||
return { |
|||
value: date, |
|||
textStyle: { |
|||
align: "center", |
|||
lineStyle: { |
|||
color: "skyblue", // 设置线的颜色为天蓝色 |
|||
shadowBlur: 6, |
|||
}, |
|||
}, |
|||
}; |
|||
}); |
|||
|
|||
setRevenueData({ |
|||
title: { |
|||
text: "", |
|||
textStyle: { |
|||
color: "#fff", |
|||
}, |
|||
}, |
|||
tooltip: { |
|||
trigger: "axis", |
|||
}, |
|||
legend: { |
|||
type: "scroll", |
|||
right: "5%", |
|||
//data: areaNames, |
|||
data: ["临时停车次数", "常时停车次数"], |
|||
itemWidth: 18, |
|||
itemHeight: 12, |
|||
textStyle: { |
|||
fontSize: 14, |
|||
color: 'white', |
|||
}, |
|||
}, |
|||
xAxis: { |
|||
//data: xAxisData, |
|||
data: ["00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00"], |
|||
type: 'category', |
|||
boundaryGap: false, // 不留白，从原点开始 |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: "#bbb", |
|||
}, |
|||
}, |
|||
axisLabel: { |
|||
textStyle: { |
|||
color: "#bbb", |
|||
}, |
|||
}, |
|||
}, |
|||
yAxis: { |
|||
type: "value", |
|||
name: '数量（次）', |
|||
min: 0, |
|||
//max: 50, |
|||
//interval: 10, |
|||
//splitNumber: 6, //设置坐标轴的分割段数 |
|||
}, |
|||
color: ["#4DC3FF", "#FFD767"], |
|||
//series: seriesData, |
|||
series: [ |
|||
{ |
|||
"name": "临时停车次数", |
|||
"type": "line", |
|||
"data": [ |
|||
12, |
|||
12, |
|||
24 |
|||
] |
|||
}, |
|||
{ |
|||
"name": "常时停车次数", |
|||
"type": "line", |
|||
"data": [ |
|||
9, |
|||
4, |
|||
4 |
|||
] |
|||
} |
|||
], |
|||
grid: { |
|||
x: 50, |
|||
y: 55, |
|||
x2: 70, |
|||
y2: 20, |
|||
}, |
|||
}); |
|||
}; |
|||
//泊位占用趋势 |
|||
const getParkingOption = (data) => { |
|||
// 获取所有地区名称 |
|||
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.area_name))]; |
|||
// 获取所有日期 |
|||
const dates = [...new Set(data.map((item) => item.pay_date))].sort( |
|||
(a, b) => a.pay_date - b.pay_date |
|||
); |
|||
// 构建数据对象 |
|||
const seriesData = areaNames.map((areaName, index) => { |
|||
// 获取该地区的数据 |
|||
const areaData = data.filter((item) => item.area_name === areaName); |
|||
// 构建该地区的数据对象 |
|||
return { |
|||
name: areaName, |
|||
type: "line", |
|||
itemStyle: { |
|||
normal: { |
|||
label: { |
|||
show: true, //开启显示 |
|||
position: 'top', //在上方显示 |
|||
textStyle: { //数值样式 |
|||
color: 'white',//字体颜色 |
|||
fontSize: 10//字体大小 |
|||
} |
|||
}, |
|||
}, |
|||
}, |
|||
data: dates.map((item) => { |
|||
for (const { pay_date, income } of areaData) { |
|||
console.log(pay_date, income); |
|||
if (pay_date === item) return income; |
|||
} |
|||
return 0; |
|||
}), |
|||
yAxisIndex: index == 1 ? 1 : null, |
|||
}; |
|||
}); |
|||
console.log(21, areaNames, seriesData) |
|||
// 构建X轴数据 |
|||
const xAxisData = dates.map((date) => { |
|||
return { |
|||
value: date, |
|||
textStyle: { |
|||
align: "center", |
|||
lineStyle: { |
|||
color: "skyblue", // 设置线的颜色为天蓝色 |
|||
shadowBlur: 6, |
|||
}, |
|||
}, |
|||
}; |
|||
}); |
|||
|
|||
setParkingData({ |
|||
title: { |
|||
text: "", |
|||
textStyle: { |
|||
color: "#fff", |
|||
}, |
|||
}, |
|||
tooltip: { |
|||
trigger: "axis", |
|||
}, |
|||
// legend: { |
|||
// type: "scroll", |
|||
// right: "5%", |
|||
// //data: areaNames, |
|||
// //data: ["临时停车次数", "常时停车次数"], |
|||
// itemWidth: 18, |
|||
// itemHeight: 12, |
|||
// textStyle: { |
|||
// fontSize: 14, |
|||
// color: 'white', |
|||
// }, |
|||
// }, |
|||
xAxis: { |
|||
//data: xAxisData, |
|||
data: ["00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00"], |
|||
type: 'category', |
|||
boundaryGap: false, // 不留白，从原点开始 |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: "#bbb", |
|||
}, |
|||
}, |
|||
axisLabel: { |
|||
textStyle: { |
|||
color: "#bbb", |
|||
}, |
|||
}, |
|||
|
|||
}, |
|||
yAxis: { |
|||
type: "value", |
|||
name: '泊位占用率', |
|||
min: 0, |
|||
max: 100, |
|||
interval: 10, |
|||
//splitNumber: 6, //设置坐标轴的分割段数 |
|||
axisLabel: { |
|||
formatter: "{value}%", |
|||
textStyle: { |
|||
color: "#bbb", |
|||
}, |
|||
}, |
|||
}, |
|||
color: ["#4DC3FF", "#FFD767"], |
|||
//series: seriesData, |
|||
series: |
|||
{ |
|||
"name": "临时停车次数", |
|||
"type": "line", |
|||
"data": [40, 0, 90, 34, 98, 100, 70, 80], |
|||
areaStyle: { |
|||
normal: {//自定义颜色，渐变色填充折线图区域 |
|||
color: { |
|||
type: 'linear', |
|||
x: 0, |
|||
y: 0, |
|||
x2: 0, |
|||
y2: 1, |
|||
colorStops: [{ |
|||
offset: 0, color: '#FFB8B8' // 0% 处的颜色 |
|||
}, { |
|||
offset: 1, color: '#F481F8' // 100% 处的颜色 |
|||
}], |
|||
globalCoord: false // 缺省为 false |
|||
} |
|||
}, |
|||
} |
|||
}, |
|||
grid: { |
|||
x: 50, |
|||
y: 55, |
|||
x2: 70, |
|||
y2: 20, |
|||
}, |
|||
}); |
|||
}; |
|||
// |
|||
const getRingOption = (data) => { |
|||
// 获取所有地区名称 |
|||
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.area_name))]; |
|||
|
|||
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, |
|||
}, |
|||
}); |
|||
}; |
|||
|
|||
function getParkingIncome() { |
|||
ajax |
|||
.getParkingIncome() |
|||
.then((res) => { |
|||
if (res.status === 20000) { |
|||
console.log(res) |
|||
getRevenueOption(res.data); |
|||
getParkingOption(res.data); |
|||
getRingOption(res.data) |
|||
} |
|||
}) |
|||
.catch((err) => console.error(err)); |
|||
} |
|||
|
|||
// 获取下拉数据 |
|||
const getSelectList = () => { |
|||
ajax.getPayRecordTotalSelect().then( |
|||
(res) => { |
|||
if (parseInt(res?.status) === 20000) { |
|||
setSearchSelectList(res.data || {}); |
|||
} |
|||
}, |
|||
(err) => { |
|||
console.log(err); |
|||
} |
|||
); |
|||
}; |
|||
|
|||
// 获取列表数据 |
|||
const getData = (v) => { |
|||
let postData = { ...formData }; |
|||
if (!loading) { |
|||
postData = { ...holdData }; |
|||
} |
|||
setDefaultParams({ ...postData, ...pageInfo }); |
|||
setTabLoading(true); |
|||
ajax.getAppList({ ...postData, ...pageInfo, ...v }).then( |
|||
(res) => { |
|||
if (parseInt(res?.status) === 20000) { |
|||
setResultData(res?.data || {}); |
|||
} else { |
|||
message.error(res?.message); |
|||
} |
|||
setLoading(false); |
|||
setTabLoading(false); |
|||
}, |
|||
(err) => { |
|||
console.log(err); |
|||
setLoading(false); |
|||
setTabLoading(false); |
|||
} |
|||
); |
|||
}; |
|||
|
|||
// 检索数据 |
|||
const handleSearch = () => { |
|||
setLoading(true); |
|||
setPageInfo({ ...pageInfo, ...{ pn: 1 } }); |
|||
setHoldData(formData); |
|||
setIsAjax(!isAjax); |
|||
}; |
|||
|
|||
useEffect(() => { |
|||
getParkingIncome(); |
|||
}, []); |
|||
//区域下拉框数据 |
|||
useEffect(() => { |
|||
ajax |
|||
.getAreaTree() |
|||
.then((res) => { |
|||
if (res.status === 20000) { |
|||
setAreaList(res.data); |
|||
} |
|||
}) |
|||
.catch((err) => { |
|||
console.error(err); |
|||
}); |
|||
}, []); |
|||
return ( |
|||
<> |
|||
<div className="edit-order-inquiry"> |
|||
<div className="paid-result soll-result"> |
|||
<div className="result"> |
|||
<div className="parkinglive-box"> |
|||
<div className="result-box parkinglive-left"> |
|||
<div className="result-box-title">新能源车辆占比</div> |
|||
<Tooltip |
|||
placement="topLeft" |
|||
title={<span>展示统计期间出现过的能源车辆数与非新能源车辆数之间的对比情况</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>展示统计时间段内不同车型车之间数量的对比情况</span>} |
|||
> |
|||
<i>?</i> |
|||
</Tooltip> |
|||
<ReactEcharts |
|||
option={ringData} |
|||
style={{ height: "300px", width: "100%", overflow: "hidden" }} |
|||
/> |
|||
</div> |
|||
</div> |
|||
<div className="parkinglive-box"> |
|||
<div className="result-box parkinglive-left"> |
|||
<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="result-box parkinglive-right"> |
|||
<div className="result-box-title">新能源车排行</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</> |
|||
); |
|||
} |
|||
|
|||
export default ParkBerthAly; |
|||
@ -1,15 +1,649 @@ |
|||
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 { 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 React, { useState, useEffect } from "react"; |
|||
import { ResultFlowResult } from "@/components"; |
|||
import { Select, Input, Button, Table, message, Pagination, DatePicker, Modal, Cascader, Tooltip } from "antd"; |
|||
import { useSessionStorageState } from "ahooks"; |
|||
import { dictionary } from "@/config/common"; |
|||
import { useNavigate } from "react-router-dom"; |
|||
import { setTabList } from "@/store/common.js"; |
|||
import { useSelector, useDispatch } from "react-redux"; |
|||
import { QuestionCircleFilled } from "@ant-design/icons" |
|||
import moment from "moment"; |
|||
import ReactEcharts from "echarts-for-react"; |
|||
import "./index.scss"; |
|||
import ajax from "@/services"; |
|||
|
|||
function ParkTurnoverAly() { |
|||
return <div>ParkTurnoverAly</div> |
|||
// session缓存 |
|||
const [defaultParams, setDefaultParams] = useSessionStorageState( |
|||
"formData_parkingAlyPeriod", |
|||
{ defaultValue: null } |
|||
); |
|||
//区域的下拉数据 |
|||
const [areaList, setAreaList] = useState([]); |
|||
// 默认数据 |
|||
const defaultData = { |
|||
confirm_start_time: moment().subtract('days').startOf('day').format("YYYY-MM-DD HH:mm:ss"), |
|||
confirm_end_time: moment().endOf("day").format("YYYY-MM-DD HH:mm:ss"), |
|||
create_start_time: moment().subtract('days').startOf('day').format("YYYY-MM-DD HH:mm:ss"), |
|||
create_end_time: moment().endOf("day").format("YYYY-MM-DD HH:mm:ss"), |
|||
app_name: "", // 应用名称 |
|||
app_type: 0, //应用类型 |
|||
pay_merchant_id: 0, //支付商户名称 |
|||
}; |
|||
// 分页数据 |
|||
const [pageInfo, setPageInfo] = useState({ |
|||
pn: defaultParams ? defaultParams?.pn : 1, |
|||
page_size: defaultParams ? defaultParams?.page_size : 15, |
|||
}); |
|||
// 表单数据 |
|||
const [formData, setFormData] = useState({ |
|||
...defaultData, |
|||
...defaultParams, |
|||
}); |
|||
// 搜索提交数据-存储 |
|||
const [holdData, setHoldData] = useState(formData); |
|||
// 访问接口，isAjax改变时执行 |
|||
const [isAjax, setIsAjax] = useState(false); |
|||
// 检索按钮加载状态 |
|||
const [loading, setLoading] = useState(false); |
|||
// 表格加载状态 |
|||
const [tabLoading, setTabLoading] = useState(false); |
|||
// 表格返回数据 |
|||
const [resultData, setResultData] = useState({ |
|||
total: 0, |
|||
list: [], |
|||
}); |
|||
//停车场收入概览数据 |
|||
const [revenueData, setRevenueData] = useState({}); |
|||
const [searchSelectList, setSearchSelectList] = useState([]); //搜索下拉数据 |
|||
const [sessionTabList, setSessionTabList] = useSessionStorageState('parkingAlyPeriod', { |
|||
value: { |
|||
} |
|||
}) |
|||
const columns = [ |
|||
{ |
|||
title: '时间', |
|||
dataIndex: 'index', |
|||
key: 'index', |
|||
// width: 100, |
|||
// fixed: 'left', |
|||
}, |
|||
|
|||
{ |
|||
title: '入场次数（次）', |
|||
dataIndex: 'age', |
|||
key: 'age', |
|||
}, |
|||
{ |
|||
title: '总泊位数（个）', |
|||
dataIndex: 'age', |
|||
key: 'age', |
|||
}, |
|||
{ |
|||
title: '日均泊位周转次数（次）', |
|||
dataIndex: 'age', |
|||
key: 'age', |
|||
}, |
|||
|
|||
] |
|||
useEffect(() => { |
|||
if (sessionTabList && Object.values(sessionTabList).length > 0) { |
|||
setFormData({ |
|||
...formData, ...sessionTabList |
|||
}) |
|||
getData({ |
|||
...sessionTabList |
|||
}) |
|||
} else { |
|||
getData() |
|||
} |
|||
}, [isAjax]) |
|||
useEffect(() => { |
|||
setSessionTabList({ |
|||
...formData |
|||
}) |
|||
}, [formData]) |
|||
useEffect(() => { |
|||
getSelectList(); |
|||
}, []); |
|||
|
|||
// 访问接口，获取表格 |
|||
// useEffect(() => { |
|||
// getData(); |
|||
// }, [isAjax]); |
|||
//时间状态切换 |
|||
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, |
|||
}); |
|||
}; |
|||
// |
|||
const getRevenueOption = (data) => { |
|||
// 获取所有地区名称 |
|||
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.area_name))]; |
|||
// 获取所有日期 |
|||
const dates = [...new Set(data.map((item) => item.pay_date))].sort( |
|||
(a, b) => a.pay_date - b.pay_date |
|||
); |
|||
// 构建数据对象 |
|||
const seriesData = areaNames.map((areaName, index) => { |
|||
// 获取该地区的数据 |
|||
const areaData = data.filter((item) => item.area_name === areaName); |
|||
// 构建该地区的数据对象 |
|||
return { |
|||
name: areaName, |
|||
type: "line", |
|||
itemStyle: { |
|||
normal: { |
|||
label: { |
|||
show: true, //开启显示 |
|||
position: 'top', //在上方显示 |
|||
textStyle: { //数值样式 |
|||
color: 'white',//字体颜色 |
|||
fontSize: 10//字体大小 |
|||
} |
|||
}, |
|||
}, |
|||
}, |
|||
data: dates.map((item) => { |
|||
for (const { pay_date, income } of areaData) { |
|||
console.log(pay_date, income); |
|||
if (pay_date === item) return income; |
|||
} |
|||
return 0; |
|||
}), |
|||
yAxisIndex: index == 1 ? 1 : null, |
|||
}; |
|||
}); |
|||
console.log(21, areaNames, seriesData) |
|||
// 构建X轴数据 |
|||
const xAxisData = dates.map((date) => { |
|||
return { |
|||
value: date, |
|||
textStyle: { |
|||
align: "center", |
|||
lineStyle: { |
|||
color: "skyblue", // 设置线的颜色为天蓝色 |
|||
shadowBlur: 6, |
|||
}, |
|||
}, |
|||
}; |
|||
}); |
|||
|
|||
setRevenueData({ |
|||
title: { |
|||
text: "", |
|||
textStyle: { |
|||
color: "#fff", |
|||
}, |
|||
}, |
|||
tooltip: { |
|||
trigger: "axis", |
|||
}, |
|||
xAxis: { |
|||
data: xAxisData, |
|||
type: 'category', |
|||
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", |
|||
}, |
|||
}, |
|||
}, |
|||
color: ["#4DC3FF", "#FFD767"], |
|||
//series: seriesData, |
|||
series: |
|||
{ |
|||
"name": "西区", |
|||
"type": "line", |
|||
"data": [ |
|||
12, |
|||
12, |
|||
24 |
|||
] |
|||
}, |
|||
grid: { |
|||
x: 50, |
|||
y: 55, |
|||
x2: 70, |
|||
y2: 20, |
|||
}, |
|||
}); |
|||
}; |
|||
|
|||
function getParkingIncome() { |
|||
ajax |
|||
.getParkingIncome() |
|||
.then((res) => { |
|||
if (res.status === 20000) { |
|||
console.log(res) |
|||
getRevenueOption(res.data); |
|||
} |
|||
}) |
|||
.catch((err) => console.error(err)); |
|||
} |
|||
|
|||
// 获取下拉数据 |
|||
const getSelectList = () => { |
|||
ajax.getPayRecordTotalSelect().then( |
|||
(res) => { |
|||
if (parseInt(res?.status) === 20000) { |
|||
setSearchSelectList(res.data || {}); |
|||
} |
|||
}, |
|||
(err) => { |
|||
console.log(err); |
|||
} |
|||
); |
|||
}; |
|||
|
|||
// 获取列表数据 |
|||
const getData = (v) => { |
|||
let postData = { ...formData }; |
|||
if (!loading) { |
|||
postData = { ...holdData }; |
|||
} |
|||
setDefaultParams({ ...postData, ...pageInfo }); |
|||
setTabLoading(true); |
|||
ajax.getAppList({ ...postData, ...pageInfo, ...v }).then( |
|||
(res) => { |
|||
if (parseInt(res?.status) === 20000) { |
|||
setResultData(res?.data || {}); |
|||
} else { |
|||
message.error(res?.message); |
|||
} |
|||
setLoading(false); |
|||
setTabLoading(false); |
|||
}, |
|||
(err) => { |
|||
console.log(err); |
|||
setLoading(false); |
|||
setTabLoading(false); |
|||
} |
|||
); |
|||
}; |
|||
|
|||
// 检索数据 |
|||
const handleSearch = () => { |
|||
setLoading(true); |
|||
setPageInfo({ ...pageInfo, ...{ pn: 1 } }); |
|||
setHoldData(formData); |
|||
setIsAjax(!isAjax); |
|||
}; |
|||
|
|||
// 导出 |
|||
const handleExport = () => { |
|||
if (resultData.list?.length > 0) { |
|||
let { pn, page_size, ...params } = defaultParams; |
|||
ajax.getAppList(params).then( |
|||
(res) => { |
|||
if (parseInt(res?.status) === 20000) { |
|||
message.success(res?.message); |
|||
} else { |
|||
message.error(res?.message); |
|||
} |
|||
}, |
|||
(err) => { |
|||
console.log(err); |
|||
} |
|||
); |
|||
} else { |
|||
message.error("暂无数据"); |
|||
} |
|||
}; |
|||
useEffect(() => { |
|||
getParkingIncome(); |
|||
}, []); |
|||
//区域下拉框数据 |
|||
useEffect(() => { |
|||
ajax |
|||
.getAreaTree() |
|||
.then((res) => { |
|||
if (res.status === 20000) { |
|||
setAreaList(res.data); |
|||
} |
|||
}) |
|||
.catch((err) => { |
|||
console.error(err); |
|||
}); |
|||
}, []); |
|||
return ( |
|||
<> |
|||
<div className="edit-order-inquiry"> |
|||
<div className="paid-search"> |
|||
<div className="title">查询条件</div> |
|||
<div className="form-Wrap"> |
|||
<div className="yisa-search"> |
|||
<label>区域</label> |
|||
<Cascader |
|||
className="form-con" |
|||
popupClassName="start-exception-deal-cascader" |
|||
options={areaList} |
|||
placeholder="请选择区域" |
|||
expandTrigger="hover" |
|||
fieldNames={{ |
|||
label: "name", |
|||
value: "id", |
|||
children: "children", |
|||
}} |
|||
value={formData.region} |
|||
onChange={(v, option) => { |
|||
setFormData({ ...formData, region: v ? v : null }); |
|||
}} |
|||
/> |
|||
</div> |
|||
<div className="yisa-search"> |
|||
<label>运营商</label> |
|||
<Select |
|||
className="form-con" |
|||
placeholder="请选择" |
|||
options={searchSelectList?.flow_type_list || []} |
|||
value={formData.pay_merchant_id} |
|||
onChange={(v) => |
|||
setFormData({ ...formData, pay_merchant_id: v }) |
|||
} |
|||
/> |
|||
</div> |
|||
<div className="yisa-search"> |
|||
<label>车场类型</label> |
|||
<Select |
|||
className="form-con" |
|||
placeholder="请选择车场类型" |
|||
options={[ |
|||
{ |
|||
label: '全部', |
|||
value: '0', |
|||
}, |
|||
{ |
|||
label: '路内车场', |
|||
value: '1', |
|||
}, |
|||
{ |
|||
label: '路外车场', |
|||
value: '2', |
|||
}, |
|||
]} |
|||
value={formData.pay_merchant_id} |
|||
onChange={(v) => |
|||
setFormData({ ...formData, pay_merchant_id: v }) |
|||
} |
|||
/> |
|||
</div> |
|||
<div className="yisa-search"> |
|||
<label>停车场</label> |
|||
<Input |
|||
className="form-con" |
|||
placeholder="请输入" |
|||
value={formData?.park} |
|||
onChange={(e) => |
|||
setFormData({ ...formData, park: e.target.value }) |
|||
} |
|||
/> |
|||
</div> |
|||
<div className="yisa-search"> |
|||
<label>计费类型</label> |
|||
<Select |
|||
className="form-con" |
|||
placeholder="请选择计费类型" |
|||
options={[ |
|||
{ |
|||
label: '全部', |
|||
value: '0', |
|||
}, |
|||
{ |
|||
label: '一类区', |
|||
value: '1', |
|||
}, |
|||
{ |
|||
label: '二类区', |
|||
value: '2', |
|||
}, |
|||
{ |
|||
label: '三类区', |
|||
value: '3', |
|||
}, |
|||
]} |
|||
value={formData.pay_merchant_id} |
|||
onChange={(v) => |
|||
setFormData({ ...formData, pay_merchant_id: v }) |
|||
} |
|||
/> |
|||
</div> |
|||
<div className="yisa-search"> |
|||
<label>日期 |
|||
<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> |
|||
</label> |
|||
<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 className="yisa-search"> |
|||
<label>至</label> |
|||
<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 className="form-btn"> |
|||
<Button |
|||
className="reset" |
|||
onClick={() => setFormData(defaultData)} |
|||
> |
|||
重置 |
|||
</Button> |
|||
<Button |
|||
className="submit" |
|||
type="primary" |
|||
onClick={handleSearch} |
|||
loading={loading} |
|||
> |
|||
查询 |
|||
</Button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div className="paid-result usage-result"> |
|||
<div className="result"> |
|||
<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="result-box"> |
|||
<Table |
|||
columns={columns} |
|||
dataSource={[ |
|||
{ |
|||
index: 1, |
|||
}, |
|||
{ |
|||
index: 1, |
|||
}, |
|||
{ |
|||
index: 1, |
|||
}, |
|||
{ |
|||
index: 1, |
|||
}, |
|||
{ |
|||
index: 1, |
|||
}, |
|||
{ |
|||
index: 1, |
|||
}, |
|||
{ |
|||
index: 1, |
|||
}, |
|||
]} |
|||
bordered |
|||
size="middle" |
|||
// scroll={{ |
|||
// x: 'calc(700px + 50%)', |
|||
// y: 240, |
|||
// }} |
|||
/> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</> |
|||
); |
|||
} |
|||
|
|||
export default ParkTurnoverAly; |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue