|
|
|
@ -26,7 +26,7 @@ function ParkingLiveData() { |
|
|
|
const defaultData = { |
|
|
|
start_time: moment().subtract('days').startOf('day').format("YYYY-MM-DD"), |
|
|
|
end_time: moment().endOf("day").format("YYYY-MM-DD"), |
|
|
|
operator_id:'0', |
|
|
|
operator_id: '0', |
|
|
|
}; |
|
|
|
// 分页数据 |
|
|
|
const [pageInfo, setPageInfo] = useState({ |
|
|
|
@ -90,7 +90,10 @@ function ParkingLiveData() { |
|
|
|
// }, [isAjax]); |
|
|
|
//出入场趋势 |
|
|
|
const getRevenueOption = (data) => { |
|
|
|
if (!data.entry_list) return |
|
|
|
if (!data.entry_list || data.entry_list.length <= 0) { |
|
|
|
setRevenueData({}) |
|
|
|
return |
|
|
|
} |
|
|
|
data.entry_list.sort((a, b) => { |
|
|
|
return new Date(a.hour) - new Date(b.hour); |
|
|
|
}); |
|
|
|
@ -139,7 +142,19 @@ function ParkingLiveData() { |
|
|
|
|
|
|
|
}; |
|
|
|
}); |
|
|
|
setRevenueData(lineChartOption(areaNames, xAxisData, "数量（次）", seriesData)); |
|
|
|
let tooltip = { |
|
|
|
formatter: (params) => { |
|
|
|
var str = ""; |
|
|
|
str = params[0].axisValue.match(/(\S*):/) ? params[0].axisValue.match(/(\S*):/) : params[0].axisValue |
|
|
|
str = str[1] ? str[1] + ':59' : str |
|
|
|
return `<div class="tooltip-box"> |
|
|
|
${params[0].axisValue}-${str}<br/> |
|
|
|
入场次数：${params[0].data}(次)<br/> |
|
|
|
出场次数：${params[1].data}(次) |
|
|
|
</div>` |
|
|
|
} |
|
|
|
} |
|
|
|
setRevenueData({ ...lineChartOption(areaNames, xAxisData, "数量（次）", seriesData), ...tooltip }); |
|
|
|
}; |
|
|
|
//泊位占用趋势 |
|
|
|
const getLineOption = (data) => { |
|
|
|
@ -147,7 +162,6 @@ function ParkingLiveData() { |
|
|
|
setParkingData({}) |
|
|
|
return |
|
|
|
} |
|
|
|
if (!data || data.length <= 0) return |
|
|
|
// 获取所有地区名称 |
|
|
|
data.sort((a, b) => { |
|
|
|
return new Date(a.hour) - new Date(b.hour); |
|
|
|
@ -194,7 +208,15 @@ function ParkingLiveData() { |
|
|
|
|
|
|
|
}; |
|
|
|
}); |
|
|
|
setParkingData(lineChartOption(areaNames, xAxisData, "泊位占用率", seriesData)); |
|
|
|
let tooltip = { |
|
|
|
formatter: (params) => { |
|
|
|
return `<div class="tooltip-box"> |
|
|
|
时间：${params[0].axisValue}<br/> |
|
|
|
占用率：${params[0].value}%<br/> |
|
|
|
</div>` |
|
|
|
} |
|
|
|
} |
|
|
|
setParkingData({ ...lineChartOption(areaNames, xAxisData, "泊位占用率", seriesData), ...tooltip }); |
|
|
|
}; |
|
|
|
//泊位占用率 环形图 |
|
|
|
const getParkingOption = (data) => { |
|
|
|
@ -202,12 +224,21 @@ function ParkingLiveData() { |
|
|
|
setRingData({}) |
|
|
|
return |
|
|
|
} |
|
|
|
const areaNames = [data.vacant_name, data.occupied_name]; |
|
|
|
const areaNames = [data.occupied_name, data.vacant_name]; |
|
|
|
let todata = [ |
|
|
|
{ value: parseFloat(data.vacancy_rate), name: data.vacant_name }, |
|
|
|
{ value: parseFloat(data.occupancy_rate), name: data.occupied_name }, |
|
|
|
{ value: parseFloat(data.vacancy_rate), name: data.vacant_name, num: data.vacant_berths }, |
|
|
|
{ value: parseFloat(data.occupancy_rate), name: data.occupied_name, num: data.occupied_berths }, |
|
|
|
] |
|
|
|
setRingData(ringChartOption(areaNames, todata)); |
|
|
|
let tooltip = { |
|
|
|
formatter: (params) => { |
|
|
|
return `<div class="tooltip-box"> |
|
|
|
${params.name}<br/> |
|
|
|
数量：${params.data.num}(辆)<br/> |
|
|
|
占比：${params.data.value}% |
|
|
|
</div>` |
|
|
|
} |
|
|
|
} |
|
|
|
setRingData(ringChartOption(areaNames, todata, tooltip)); |
|
|
|
}; |
|
|
|
//会员车占比 环形图 |
|
|
|
const getRingOption = (data) => { |
|
|
|
@ -217,10 +248,19 @@ function ParkingLiveData() { |
|
|
|
} |
|
|
|
const areaNames = [data.member_name, data.no_member_name]; |
|
|
|
let todata = [ |
|
|
|
{ value: parseFloat(data.member_car_percentage), name: data.member_name }, |
|
|
|
{ value: parseFloat(data.non_member_car_percentage), name: data.no_member_name }, |
|
|
|
{ value: parseFloat(data.member_car_percentage), name: data.member_name, num: data.member_car_count }, |
|
|
|
{ value: parseFloat(data.non_member_car_percentage), name: data.no_member_name, num: data.non_member_car_count }, |
|
|
|
] |
|
|
|
setCarData(ringChartOption(areaNames, todata)); |
|
|
|
let tooltip = { |
|
|
|
formatter: (params) => { |
|
|
|
return `<div class="tooltip-box"> |
|
|
|
${params.name}<br/> |
|
|
|
数量：${params.data.num}(辆)<br/> |
|
|
|
占比：${params.data.value}% |
|
|
|
</div>` |
|
|
|
} |
|
|
|
} |
|
|
|
setCarData(ringChartOption(areaNames, todata, tooltip)); |
|
|
|
}; |
|
|
|
|
|
|
|
function getParkingIncome(data) { |
|
|
|
@ -382,10 +422,14 @@ function ParkingLiveData() { |
|
|
|
> |
|
|
|
<i>?</i> |
|
|
|
</Tooltip> |
|
|
|
<ReactEcharts |
|
|
|
option={ringData} |
|
|
|
style={{ height: "300px", width: "100%", overflow: "hidden" }} |
|
|
|
/> |
|
|
|
{ |
|
|
|
ringData.series ? |
|
|
|
<ReactEcharts |
|
|
|
option={ringData} |
|
|
|
style={{ height: "300px", width: "100%", overflow: "hidden" }} |
|
|
|
/> : |
|
|
|
<div className="no-data-box">暂无数据</div> |
|
|
|
} |
|
|
|
</div> |
|
|
|
<div className="result-box parkinglive-right"> |
|
|
|
<div className="result-box-title">在场会员车占比</div> |
|
|
|
@ -395,10 +439,14 @@ function ParkingLiveData() { |
|
|
|
> |
|
|
|
<i>?</i> |
|
|
|
</Tooltip> |
|
|
|
<ReactEcharts |
|
|
|
option={carData} |
|
|
|
style={{ height: "300px", width: "100%", overflow: "hidden" }} |
|
|
|
/> |
|
|
|
{ |
|
|
|
carData.series ? |
|
|
|
<ReactEcharts |
|
|
|
option={carData} |
|
|
|
style={{ height: "300px", width: "100%", overflow: "hidden" }} |
|
|
|
/> : |
|
|
|
<div className="no-data-box">暂无数据</div> |
|
|
|
} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div className="result-box"> |
|
|
|
@ -409,17 +457,25 @@ function ParkingLiveData() { |
|
|
|
> |
|
|
|
<i>?</i> |
|
|
|
</Tooltip> |
|
|
|
<ReactEcharts |
|
|
|
option={revenueData} |
|
|
|
style={{ height: "300px", width: "100%", overflow: "hidden" }} |
|
|
|
/> |
|
|
|
{ |
|
|
|
revenueData.series ? |
|
|
|
<ReactEcharts |
|
|
|
option={revenueData} |
|
|
|
style={{ height: "300px", width: "100%", overflow: "hidden" }} |
|
|
|
/> : |
|
|
|
<div className="no-data-box">暂无数据</div> |
|
|
|
} |
|
|
|
</div> |
|
|
|
<div className="result-box"> |
|
|
|
<div className="result-box-title">泊位占用趋势</div> |
|
|
|
<ReactEcharts |
|
|
|
option={parkingData} |
|
|
|
style={{ height: "300px", width: "100%", overflow: "hidden" }} |
|
|
|
/> |
|
|
|
{ |
|
|
|
parkingData.series ? |
|
|
|
<ReactEcharts |
|
|
|
option={parkingData} |
|
|
|
style={{ height: "300px", width: "100%", overflow: "hidden" }} |
|
|
|
/> : |
|
|
|
<div className="no-data-box">暂无数据</div> |
|
|
|
} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
