+
导出
日间/夜间停车时长趋势
{
@@ -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//字体大小
- }
- },
+ 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, 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,
- },
+ 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 });
+ if (moment(formData.end_time) - moment(formData.start_time) > 1000 * 31 * 24 * 3600) {
+ message.error("时间范围限制为31天！")
+ setLoading(false);
+ setTabLoading(false);
+ return
+ }
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);
- setLoading(false);
- setTabLoading(false);
- }
- );
+ 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 });
}}
/>
@@ -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 })
}
/>
@@ -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 })
}
/>
@@ -432,9 +358,9 @@ function ParkUsageAly() {