|
@ -22,7 +22,7 @@ function ParkingAlyPeriod() { |
|
|
start_time: moment().subtract('days').startOf('day').format("YYYY-MM-DD"), |
|
|
start_time: moment().subtract('days').startOf('day').format("YYYY-MM-DD"), |
|
|
end_time: moment().endOf("day").format("YYYY-MM-DD"), |
|
|
end_time: moment().endOf("day").format("YYYY-MM-DD"), |
|
|
operator_id: '0', |
|
|
operator_id: '0', |
|
|
area_id:'0', |
|
|
|
|
|
|
|
|
area_id: '0', |
|
|
car_parking_type: '3', |
|
|
car_parking_type: '3', |
|
|
date_type: '1', |
|
|
date_type: '1', |
|
|
paytype: '0' |
|
|
paytype: '0' |
|
@ -241,8 +241,152 @@ function ParkingAlyPeriod() { |
|
|
|
|
|
|
|
|
setParkData(lineChartOption(areaNames, xAxisData, "饱和度", seriesData, areaNames)); |
|
|
setParkData(lineChartOption(areaNames, xAxisData, "饱和度", seriesData, areaNames)); |
|
|
}; |
|
|
}; |
|
|
|
|
|
const randerColor = () => { |
|
|
|
|
|
let arr = []; |
|
|
|
|
|
this.alarmTypeLine.forEach(item => { |
|
|
|
|
|
random(arr) |
|
|
|
|
|
}) |
|
|
|
|
|
return arr; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const random = (arr) => { |
|
|
|
|
|
let color = 'rgb(' + [ |
|
|
|
|
|
Math.round(Math.random() * 255), |
|
|
|
|
|
Math.round(Math.random() * 255), |
|
|
|
|
|
Math.round(Math.random() * 255) |
|
|
|
|
|
].join(',') + ')'; |
|
|
|
|
|
if (!arr.some(i => i == color)) { |
|
|
|
|
|
arr.push(color) |
|
|
|
|
|
} else { |
|
|
|
|
|
this.random(arr) |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
const color = ['#5470c6','#91cc75','#fac858','#ee6666','#73c0de','#fc8452','#3ba272','#9a60b4','#ee7ccc'] |
|
|
|
|
|
console.log(Math.round(Math.random()*10)) |
|
|
//停车饱和趋势分析分析 折线图 hour 时间对比 |
|
|
//停车饱和趋势分析分析 折线图 hour 时间对比 |
|
|
const getParkOptionHour = (data) => { |
|
|
const getParkOptionHour = (data) => { |
|
|
|
|
|
data = [ |
|
|
|
|
|
{ |
|
|
|
|
|
"date": "2023-11-20", |
|
|
|
|
|
"hour": "00:00", |
|
|
|
|
|
"occupancy_rate": "0.02%" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
"date": "2023-11-22", |
|
|
|
|
|
"hour": "01:00", |
|
|
|
|
|
"occupancy_rate": "0%" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
"date": "2023-11-22", |
|
|
|
|
|
"hour": "02:00", |
|
|
|
|
|
"occupancy_rate": "0%" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
"date": "2023-11-22", |
|
|
|
|
|
"hour": "03:00", |
|
|
|
|
|
"occupancy_rate": "0%" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
"date": "2023-11-22", |
|
|
|
|
|
"hour": "04:00", |
|
|
|
|
|
"occupancy_rate": "0%" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
"date": "2023-11-22", |
|
|
|
|
|
"hour": "05:00", |
|
|
|
|
|
"occupancy_rate": "0%" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
"date": "2023-11-22", |
|
|
|
|
|
"hour": "06:00", |
|
|
|
|
|
"occupancy_rate": "0%" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
"date": "2023-11-22", |
|
|
|
|
|
"hour": "07:00", |
|
|
|
|
|
"occupancy_rate": "0%" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
"date": "2023-11-29", |
|
|
|
|
|
"hour": "08:00", |
|
|
|
|
|
"occupancy_rate": "0.07%" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
"date": "2023-11-22", |
|
|
|
|
|
"hour": "09:00", |
|
|
|
|
|
"occupancy_rate": "0.26%" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
"date": "2023-11-24", |
|
|
|
|
|
"hour": "10:00", |
|
|
|
|
|
"occupancy_rate": "0.18%" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
"date": "2023-11-22", |
|
|
|
|
|
"hour": "11:00", |
|
|
|
|
|
"occupancy_rate": "0.11%" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
"date": "2023-11-23", |
|
|
|
|
|
"hour": "12:00", |
|
|
|
|
|
"occupancy_rate": "0.06%" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
"date": "2023-11-22", |
|
|
|
|
|
"hour": "13:00", |
|
|
|
|
|
"occupancy_rate": "0.08%" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
"date": "2023-11-21", |
|
|
|
|
|
"hour": "14:00", |
|
|
|
|
|
"occupancy_rate": "0.35%" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
"date": "2023-11-29", |
|
|
|
|
|
"hour": "15:00", |
|
|
|
|
|
"occupancy_rate": "0.26%" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
"date": "2023-11-20", |
|
|
|
|
|
"hour": "16:00", |
|
|
|
|
|
"occupancy_rate": "0.32%" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
"date": "2023-11-22", |
|
|
|
|
|
"hour": "17:00", |
|
|
|
|
|
"occupancy_rate": "0.22%" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
"date": "2023-11-22", |
|
|
|
|
|
"hour": "18:00", |
|
|
|
|
|
"occupancy_rate": "0.14%" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
"date": "2023-11-21", |
|
|
|
|
|
"hour": "19:00", |
|
|
|
|
|
"occupancy_rate": "0.01%" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
"date": "2023-11-22", |
|
|
|
|
|
"hour": "20:00", |
|
|
|
|
|
"occupancy_rate": "0%" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
"date": "2023-11-22", |
|
|
|
|
|
"hour": "21:00", |
|
|
|
|
|
"occupancy_rate": "0.05%" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
"date": "2023-11-21", |
|
|
|
|
|
"hour": "22:00", |
|
|
|
|
|
"occupancy_rate": "0.02%" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
"date": "2023-11-22", |
|
|
|
|
|
"hour": "23:00", |
|
|
|
|
|
"occupancy_rate": "0.01%" |
|
|
|
|
|
} |
|
|
|
|
|
] |
|
|
console.log(data) |
|
|
console.log(data) |
|
|
if (!data || data.length <= 0) { |
|
|
if (!data || data.length <= 0) { |
|
|
setHourData({}) |
|
|
setHourData({}) |
|
@ -255,6 +399,7 @@ function ParkingAlyPeriod() { |
|
|
); |
|
|
); |
|
|
// 构建数据对象 |
|
|
// 构建数据对象 |
|
|
let seriesData = areaNames.map((areaName, index) => { |
|
|
let seriesData = areaNames.map((areaName, index) => { |
|
|
|
|
|
let color2 = color[Math.round(Math.random()*10)] |
|
|
// 获取数据 |
|
|
// 获取数据 |
|
|
let areaData = data[0].date ? data.filter((item) => item.date === areaName) : data |
|
|
let areaData = data[0].date ? data.filter((item) => item.date === areaName) : data |
|
|
// 构建数据对象 |
|
|
// 构建数据对象 |
|
@ -268,6 +413,13 @@ function ParkingAlyPeriod() { |
|
|
color: 'white',//字体颜色 |
|
|
color: 'white',//字体颜色 |
|
|
fontSize: 10//字体大小 |
|
|
fontSize: 10//字体大小 |
|
|
}, |
|
|
}, |
|
|
|
|
|
normal: { |
|
|
|
|
|
color: color2, //改变折线点的颜色 |
|
|
|
|
|
lineStyle:{ |
|
|
|
|
|
color:color2, |
|
|
|
|
|
} |
|
|
|
|
|
//改变折线颜色 |
|
|
|
|
|
} |
|
|
}, |
|
|
}, |
|
|
data: dates.map((item) => { |
|
|
data: dates.map((item) => { |
|
|
for (var { hour, occupancy_rate } of areaData) { |
|
|
for (var { hour, occupancy_rate } of areaData) { |
|
@ -670,7 +822,7 @@ function ParkingAlyPeriod() { |
|
|
<ReactEcharts |
|
|
<ReactEcharts |
|
|
key={keyVal} |
|
|
key={keyVal} |
|
|
option={hourData} |
|
|
option={hourData} |
|
|
style={{ height: "300px", width: "100%", overflow: "hidden" }} |
|
|
|
|
|
|
|
|
style={{ height: "300px", width: "100%", overflow: "hidden", background: '#545d74' }} |
|
|
/> : |
|
|
/> : |
|
|
<div className="no-data-box">暂无数据</div> |
|
|
<div className="no-data-box">暂无数据</div> |
|
|
) |
|
|
) |
|
@ -680,7 +832,7 @@ function ParkingAlyPeriod() { |
|
|
<ReactEcharts |
|
|
<ReactEcharts |
|
|
key="9999" |
|
|
key="9999" |
|
|
option={parkData} |
|
|
option={parkData} |
|
|
style={{ height: "300px", width: "100%", overflow: "hidden" }} |
|
|
|
|
|
|
|
|
style={{ height: "300px", width: "100%", overflow: "hidden", background: '#545d74' }} |
|
|
/> |
|
|
/> |
|
|
: |
|
|
: |
|
|
<div className="no-data-box">暂无数据</div> |
|
|
<div className="no-data-box">暂无数据</div> |
|
|