|
|
|
@ -2,6 +2,7 @@ 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 { lineChartOption, ringChartOption } from "../echarts.config"; |
|
|
|
import { dictionary } from "@/config/common"; |
|
|
|
import { useNavigate } from "react-router-dom"; |
|
|
|
import { setTabList } from "@/store/common.js"; |
|
|
|
@ -16,20 +17,16 @@ import ajax from "@/services"; |
|
|
|
function ParkUsageAly() { |
|
|
|
// session缓存 |
|
|
|
const [defaultParams, setDefaultParams] = useSessionStorageState( |
|
|
|
"formData_parkingAlyPeriod", |
|
|
|
"formData_parkUageAly", |
|
|
|
{ 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, //支付商户名称 |
|
|
|
start_time: moment().subtract('days').startOf('day').format("YYYY-MM-DD HH:mm:ss"), |
|
|
|
end_time: moment().endOf("day").format("YYYY-MM-DD HH:mm:ss"), |
|
|
|
date_type: '1', // |
|
|
|
}; |
|
|
|
// 分页数据 |
|
|
|
const [pageInfo, setPageInfo] = useState({ |
|
|
|
@ -57,33 +54,33 @@ function ParkUsageAly() { |
|
|
|
//停车场收入概览数据 |
|
|
|
const [revenueData, setRevenueData] = useState({}); |
|
|
|
const [searchSelectList, setSearchSelectList] = useState([]); //搜索下拉数据 |
|
|
|
const [sessionTabList, setSessionTabList] = useSessionStorageState('parkingAlyPeriod', { |
|
|
|
const [sessionTabList, setSessionTabList] = useSessionStorageState('parkUageAly', { |
|
|
|
value: { |
|
|
|
} |
|
|
|
}) |
|
|
|
const columns = [ |
|
|
|
{ |
|
|
|
title: '时间', |
|
|
|
dataIndex: 'index', |
|
|
|
key: 'index', |
|
|
|
dataIndex: 'date', |
|
|
|
key: 'date', |
|
|
|
// width: 100, |
|
|
|
// fixed: 'left', |
|
|
|
}, |
|
|
|
|
|
|
|
{ |
|
|
|
title: '停车总时长', |
|
|
|
dataIndex: 'age', |
|
|
|
key: 'age', |
|
|
|
dataIndex: 'total_duration', |
|
|
|
key: 'total_duration', |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '日均泊位停车时长', |
|
|
|
dataIndex: 'age', |
|
|
|
key: 'age', |
|
|
|
dataIndex: 'avg_berth_duration', |
|
|
|
key: 'avg_berth_duration', |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '日均泊位利用率', |
|
|
|
dataIndex: 'age', |
|
|
|
key: 'age', |
|
|
|
dataIndex: 'berth_utilization', |
|
|
|
key: 'berth_utilization', |
|
|
|
}, |
|
|
|
|
|
|
|
] |
|
|
|
@ -92,11 +89,11 @@ function ParkUsageAly() { |
|
|
|
setFormData({ |
|
|
|
...formData, ...sessionTabList |
|
|
|
}) |
|
|
|
getData({ |
|
|
|
getCheck({ |
|
|
|
...sessionTabList |
|
|
|
}) |
|
|
|
} else { |
|
|
|
getData() |
|
|
|
getCheck() |
|
|
|
} |
|
|
|
}, [isAjax]) |
|
|
|
useEffect(() => { |
|
|
|
@ -116,7 +113,8 @@ function ParkUsageAly() { |
|
|
|
const TimeChange = () => { |
|
|
|
let e = formData.date_type; |
|
|
|
let str = "day"; |
|
|
|
let mat = "YYYY-MM-DD"; |
|
|
|
//let mat = "YYYY-MM-DD"; |
|
|
|
let mat = "YYYY-MM-DD HH:mm:ss"; |
|
|
|
if (e == 4) { |
|
|
|
str = "year"; |
|
|
|
mat = "YYYY"; |
|
|
|
@ -153,129 +151,66 @@ function ParkUsageAly() { |
|
|
|
end_time: end, |
|
|
|
}); |
|
|
|
}; |
|
|
|
// |
|
|
|
|
|
|
|
//泊位利用率变化趋势，折线图 |
|
|
|
const getRevenueOption = (data) => { |
|
|
|
// 获取所有地区名称 |
|
|
|
data.sort((a, b) => { |
|
|
|
return new Date(a.pay_date) - new Date(b.pay_date); |
|
|
|
return new Date(a.date) - new Date(b.date); |
|
|
|
}); |
|
|
|
console.log(data); |
|
|
|
const areaNames = [...new Set(data.map((item) => item.area_name))]; |
|
|
|
const areaNames = data[0].name ? [...new Set(data.map((item) => item.name))] : ['']; |
|
|
|
// 获取所有日期 |
|
|
|
const dates = [...new Set(data.map((item) => item.pay_date))].sort( |
|
|
|
(a, b) => a.pay_date - b.pay_date |
|
|
|
const dates = [...new Set(data.map((item) => item.date))].sort( |
|
|
|
(a, b) => a.date - b.date |
|
|
|
); |
|
|
|
// 构建数据对象 |
|
|
|
const seriesData = areaNames.map((areaName, index) => { |
|
|
|
// 获取该地区的数据 |
|
|
|
const areaData = data.filter((item) => item.area_name === areaName); |
|
|
|
const areaData = data[0].name ? data.filter((item) => item.name === areaName) : data |
|
|
|
// 构建该地区的数据对象 |
|
|
|
return { |
|
|
|
name: areaName, |
|
|
|
name: areaNames.length > 1 ? 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; |
|
|
|
for (const { date, berth_utilization } of areaData) { |
|
|
|
if (date === item) return berth_utilization; |
|
|
|
} |
|
|
|
return 0; |
|
|
|
}), |
|
|
|
yAxisIndex: index == 1 ? 1 : null, |
|
|
|
}; |
|
|
|
}); |
|
|
|
console.log(21, areaNames, seriesData) |
|
|
|
console.log(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, |
|
|
|
}, |
|
|
|
}; |
|
|
|
}); |
|
|
|
setRevenueData(lineChartOption(areaNames, xAxisData, "泊位利用率", seriesData)); |
|
|
|
}; |
|
|
|
|
|
|
|
function getParkingIncome() { |
|
|
|
ajax |
|
|
|
.getParkingIncome() |
|
|
|
.getParkUsageAlyLine() |
|
|
|
.then((res) => { |
|
|
|
if (res.status === 20000) { |
|
|
|
console.log(res) |
|
|
|
getRevenueOption(res.data); |
|
|
|
getRevenueOption(res.data.list); |
|
|
|
setResultData(res.data) |
|
|
|
} |
|
|
|
}) |
|
|
|
.catch((err) => console.error(err)); |
|
|
|
@ -295,30 +230,23 @@ function ParkUsageAly() { |
|
|
|
); |
|
|
|
}; |
|
|
|
|
|
|
|
// 获取列表数据 |
|
|
|
const getData = (v) => { |
|
|
|
// 携带参数处理 |
|
|
|
const getCheck = (v) => { |
|
|
|
let postData = { ...formData }; |
|
|
|
if (!loading) { |
|
|
|
postData = { ...holdData }; |
|
|
|
} |
|
|
|
setDefaultParams({ ...postData, ...pageInfo }); |
|
|
|
setTabLoading(true); |
|
|
|
ajax.getAppList({ ...postData, ...v, ...pageInfo }).then( |
|
|
|
(res) => { |
|
|
|
if (parseInt(res?.status) === 20000) { |
|
|
|
setResultData(res?.data || {}); |
|
|
|
} else { |
|
|
|
message.error(res?.message); |
|
|
|
} |
|
|
|
setLoading(false); |
|
|
|
setTabLoading(false); |
|
|
|
}, |
|
|
|
(err) => { |
|
|
|
console.log(err); |
|
|
|
if (moment(formData.end_time) - moment(formData.start_time) > 1000 * 31 * 24 * 3600) { |
|
|
|
message.error("时间范围限制为31天！") |
|
|
|
setLoading(false); |
|
|
|
setTabLoading(false); |
|
|
|
return |
|
|
|
} |
|
|
|
); |
|
|
|
setTabLoading(true); |
|
|
|
let params = { ...postData, ...v, ...pageInfo } |
|
|
|
//请求接口 |
|
|
|
getParkingIncome(params) |
|
|
|
}; |
|
|
|
|
|
|
|
// 检索数据 |
|
|
|
@ -349,9 +277,7 @@ function ParkUsageAly() { |
|
|
|
message.error("暂无数据"); |
|
|
|
} |
|
|
|
}; |
|
|
|
useEffect(() => { |
|
|
|
getParkingIncome(); |
|
|
|
}, []); |
|
|
|
|
|
|
|
//区域下拉框数据 |
|
|
|
useEffect(() => { |
|
|
|
ajax |
|
|
|
@ -384,9 +310,9 @@ function ParkUsageAly() { |
|
|
|
value: "id", |
|
|
|
children: "children", |
|
|
|
}} |
|
|
|
value={formData.region} |
|
|
|
value={formData.area_id} |
|
|
|
onChange={(v, option) => { |
|
|
|
setFormData({ ...formData, region: v ? v : null }); |
|
|
|
setFormData({ ...formData, area_id: v ? v : null }); |
|
|
|
}} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
@ -396,9 +322,9 @@ function ParkUsageAly() { |
|
|
|
className="form-con" |
|
|
|
placeholder="请选择" |
|
|
|
options={searchSelectList?.flow_type_list || []} |
|
|
|
value={formData.pay_merchant_id} |
|
|
|
value={formData.operator_id} |
|
|
|
onChange={(v) => |
|
|
|
setFormData({ ...formData, pay_merchant_id: v }) |
|
|
|
setFormData({ ...formData, operator_id: v }) |
|
|
|
} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
@ -421,9 +347,9 @@ function ParkUsageAly() { |
|
|
|
value: '2', |
|
|
|
}, |
|
|
|
]} |
|
|
|
value={formData.pay_merchant_id} |
|
|
|
value={formData.car_parking_type} |
|
|
|
onChange={(v) => |
|
|
|
setFormData({ ...formData, pay_merchant_id: v }) |
|
|
|
setFormData({ ...formData, car_parking_type: v }) |
|
|
|
} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
@ -432,9 +358,9 @@ function ParkUsageAly() { |
|
|
|
<Input |
|
|
|
className="form-con" |
|
|
|
placeholder="请输入" |
|
|
|
value={formData?.park} |
|
|
|
value={formData?.road_name} |
|
|
|
onChange={(e) => |
|
|
|
setFormData({ ...formData, park: e.target.value }) |
|
|
|
setFormData({ ...formData, road_name: e.target.value }) |
|
|
|
} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
@ -489,10 +415,6 @@ function ParkUsageAly() { |
|
|
|
value: "3", |
|
|
|
label: "月", |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: "4", |
|
|
|
label: "年", |
|
|
|
}, |
|
|
|
]} |
|
|
|
onChange={(e) => SetTimeNow(e)} |
|
|
|
/> |
|
|
|
@ -593,6 +515,7 @@ function ParkUsageAly() { |
|
|
|
</div> |
|
|
|
<div className="paid-result usage-result"> |
|
|
|
<div className="result"> |
|
|
|
<div className="export-btn" onClick={()=>{window.open('')}}>导出</div> |
|
|
|
<div className="result-box"> |
|
|
|
<div className="result-box-title">泊位利用率变化趋势</div> |
|
|
|
<Tooltip |
|
|
|
@ -609,29 +532,7 @@ function ParkUsageAly() { |
|
|
|
<div className="result-box"> |
|
|
|
<Table |
|
|
|
columns={columns} |
|
|
|
dataSource={[ |
|
|
|
{ |
|
|
|
index: 1, |
|
|
|
}, |
|
|
|
{ |
|
|
|
index: 1, |
|
|
|
}, |
|
|
|
{ |
|
|
|
index: 1, |
|
|
|
}, |
|
|
|
{ |
|
|
|
index: 1, |
|
|
|
}, |
|
|
|
{ |
|
|
|
index: 1, |
|
|
|
}, |
|
|
|
{ |
|
|
|
index: 1, |
|
|
|
}, |
|
|
|
{ |
|
|
|
index: 1, |
|
|
|
}, |
|
|
|
]} |
|
|
|
dataSource={resultData.list || []} |
|
|
|
bordered |
|
|
|
size="middle" |
|
|
|
// scroll={{ |
|
|
|
|
