|
|
|
@ -3,6 +3,7 @@ import { ResultFlowResult } from "@/components"; |
|
|
|
import { Select, Input, Button, Table, message, Pagination, DatePicker, Modal, Cascader, Tooltip } from "antd"; |
|
|
|
import { Icon } from "@/components" |
|
|
|
import { useSessionStorageState } from "ahooks"; |
|
|
|
import { lineChartOption, ringChartOption } from "../echarts.config"; |
|
|
|
import moment from "moment"; |
|
|
|
import ReactEcharts from "echarts-for-react"; |
|
|
|
import "./index.scss"; |
|
|
|
@ -83,7 +84,8 @@ function ParkingAlyPeriod() { |
|
|
|
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"; |
|
|
|
@ -121,152 +123,53 @@ function ParkingAlyPeriod() { |
|
|
|
}); |
|
|
|
}; |
|
|
|
//停车场收入概览 |
|
|
|
const getRevenueOption = (data) => { |
|
|
|
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//字体大小 |
|
|
|
} |
|
|
|
}, |
|
|
|
label: { |
|
|
|
show: true, //开启显示 |
|
|
|
position: 'top', //在上方显示 |
|
|
|
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, record_count } of areaData) { |
|
|
|
if (date === item) return record_count; |
|
|
|
} |
|
|
|
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: "#3AA9FF", // 设置线的颜色为天蓝色 |
|
|
|
shadowBlur: 6, |
|
|
|
}, |
|
|
|
align: "center", |
|
|
|
lineStyle: { |
|
|
|
color: "skyblue", // 设置线的颜色为天蓝色 |
|
|
|
shadowBlur: 6, |
|
|
|
}, |
|
|
|
}; |
|
|
|
}); |
|
|
|
|
|
|
|
setRevenueData({ |
|
|
|
title: { |
|
|
|
text: "", |
|
|
|
textStyle: { |
|
|
|
color: "#fff", |
|
|
|
}, |
|
|
|
}, |
|
|
|
tooltip: { |
|
|
|
trigger: "axis", |
|
|
|
}, |
|
|
|
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": [ |
|
|
|
12, |
|
|
|
12, |
|
|
|
24 |
|
|
|
] |
|
|
|
}, |
|
|
|
{ |
|
|
|
"name": "西海岸新区", |
|
|
|
"type": "line", |
|
|
|
"data": [ |
|
|
|
9, |
|
|
|
4, |
|
|
|
4 |
|
|
|
] |
|
|
|
}, |
|
|
|
], |
|
|
|
grid: { |
|
|
|
x: 50, |
|
|
|
y: 55, |
|
|
|
x2: 70, |
|
|
|
y2: 20, |
|
|
|
}, |
|
|
|
}; |
|
|
|
}); |
|
|
|
setRevenueData(lineChartOption(areaNames, xAxisData,"停车记录数（个）", seriesData)); |
|
|
|
}; |
|
|
|
|
|
|
|
function getParkingIncome() { |
|
|
|
@ -384,9 +287,9 @@ function ParkingAlyPeriod() { |
|
|
|
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 +299,9 @@ function ParkingAlyPeriod() { |
|
|
|
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 +324,9 @@ function ParkingAlyPeriod() { |
|
|
|
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,43 +335,19 @@ function ParkingAlyPeriod() { |
|
|
|
<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> |
|
|
|
|
|
|
|
<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: "月", |
|
|
|
}, |
|
|
|
]} |
|
|
|
onChange={(e) => SetTimeNow(e)} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</label> |
|
|
|
<DatePicker |
|
|
|
style={{ width: "100%" }} |
|
|
|
// showTime |
|
|
|
showTime |
|
|
|
format={TimeChange().mat} |
|
|
|
picker={TimeChange().str} |
|
|
|
allowClear={false} |
|
|
|
@ -541,6 +420,7 @@ function ParkingAlyPeriod() { |
|
|
|
} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div className="form-btn"> |
|
|
|
<Button |
|
|
|
className="reset" |
|
|
|
|
