chenglb
/
PMS_Frontend_v1.0.0
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

fix():对接数据预测分析部分页面

tags/PMS_Frontend_v1.0.6-develop
xingjx 1 year ago
parent
35500c501e
commit
4d9ba3555a
9 changed files with 422 additions and 48 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/components/TableModule/index.jsx
  2. 4
      src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkBerthAly/loadable.jsx
  3. 2
      src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkUsageAly/loadable.jsx
  4. 156
      src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkingAlyDuration/loadable.jsx
  5. 8
      src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkingAlyOverview/loadable.jsx
  6. 165
      src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkingAlyPeriod/loadable.jsx
  7. 1
      src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkingAlyReport/loadable.jsx
  8. 89
      src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkingLiveData/loadable.jsx
  9. 27
      src/services/DataAnalysisPrediction/ParkingBusinessAly/index.js

2
src/components/TableModule/index.jsx
View File

@ -61,7 +61,7 @@ const TableModule = forwardRef((props, ref) => {
const [sessionTabList, setSessionTabList] = useSessionStorageState(pageName, {
value: ''
})
console.log(locale);
//console.log(locale);
const [formData, setFormData] = useState()
const [inputSelectGroup, setInputSelectGroup] = useState([])
const [deftime, setDeftime] = useState([])

4
src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkBerthAly/loadable.jsx
View File

@ -32,7 +32,7 @@ function ParkBerthAly() {
// 分页数据
const [pageInfo, setPageInfo] = useState({
pn: 1,
length: 10
page_size: 10
});
// 表单数据
const [formData, setFormData] = useState({
@ -128,7 +128,7 @@ function ParkBerthAly() {
showSizeChanger: true,
current: pageInfo.pn,
//total: resultData?.totalRecords,
pageSize: pageInfo.length,
pageSize: pageInfo.page_size,
pageSizeOptions: Array.from(
new Set([...[15], ...(dictionary?.pageSizeOptions || [])])
),

2
src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkUsageAly/loadable.jsx
View File

@ -181,7 +181,7 @@ function ParkUsageAly() {
},
data: dates.map((item) => {
for (const { date, berth_utilization } of areaData) {
if (date === item) return berth_utilization;
if (date === item) return parseFloat(berth_utilization);
}
return 0;
}),

156
src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkingAlyDuration/loadable.jsx
View File

@ -30,7 +30,7 @@ function ParkingAlyDuration() {
// 分页数据
const [pageInfo, setPageInfo] = useState({
pn: 1,
length: 10
page_size: 10
});
// 表单数据
const [formData, setFormData] = useState({
@ -50,11 +50,16 @@ function ParkingAlyDuration() {
total: 0,
list: [],
});
// 停车排行榜返回数据
// 泊位周转排行榜返回数据
const [tableData, setTableData] = useState({
area_list: [],
road_list: [],
});
// 停车排行榜返回数据setTableCarData
const [tableCarData, setTableCarData] = useState({
area_list: [],
road_list: [],
});
//停车场收入概览数据
const [revenueData, setRevenueData] = useState({});
const [searchSelectList, setSearchSelectList] = useState([]); //搜索下拉数据
@ -144,7 +149,7 @@ function ParkingAlyDuration() {
showSizeChanger: true,
current: pageInfo.pn,
//total: resultData?.totalRecords,
pageSize: pageInfo.length,
pageSize: pageInfo.page_size,
pageSizeOptions: Array.from(
new Set([...[15], ...(dictionary?.pageSizeOptions || [])])
),
@ -684,8 +689,8 @@ function ParkingAlyDuration() {
};
// 获取日均泊位列表数据
const getData = (v) => {
ajax.getParkingAlyDurationBerthList({ ...v}).then(
const getData = (v, pn = {}) => {
ajax.getParkingAlyDurationBerthList({ ...v, ...pn }).then(
(res) => {
if (parseInt(res?.status) === 20000) {
setTableData(res?.data || {});
@ -703,17 +708,17 @@ function ParkingAlyDuration() {
);
};
// 获取停车时长列表数据
const getListData = (v) => {
const getListData = (v, pn = {}) => {
let postData = { ...formData, sort: 1 };
if (!loading) {
postData = { ...holdData };
}
setDefaultParams({ ...postData, ...pageInfo });
setTabLoading(true);
ajax.getParkingAlyDurationParkingList({ ...postData, ...v, ...pageInfo }).then(
ajax.getParkingAlyDurationParkingList({ ...postData, ...v, ...pageInfo, ...pn }).then(
(res) => {
if (parseInt(res?.status) === 20000) {
//setResultData(res?.data || {});
setTableCarData(res?.data || {});
} else {
message.error(res?.message);
}
@ -775,6 +780,26 @@ function ParkingAlyDuration() {
message.error("暂无数据");
}
};
// 停车排行导出
const handleExportCar = () => {
if (tableData.list.area_list?.length > 0) {
let { pn, page_size, ...params } = defaultParams;
ajax.getParkingAlyDurationExp(defaultParams).then(
(res) => {
if (res) {
window.open(res.export_url)
} else {
message.error(res?.message);
}
},
(err) => {
console.log(err);
}
);
} else {
message.error("暂无数据");
}
};
//区域下拉框数据
useEffect(() => {
ajax
@ -981,7 +1006,11 @@ function ParkingAlyDuration() {
<Tabs
defaultActiveKey="2"
activeKey={tabKey}
onChange={changeKey}
onChange={(key) => {
setTabKey(key);
setPageInfo({ ...pageInfo, ...{ pn: 1 } });
getData({}, { pn: 1 })
}}
items={[
{
label: `序号`,
@ -992,8 +1021,16 @@ function ParkingAlyDuration() {
label: <div className="tab-title">
<div className="title">区域</div>
<div className="btn">
<div onClick={() => { message.success('升序'); getData({ sort: 1 }) }}>▲</div>
<div onClick={() => { message.success('降序'); getData({ sort: 2 }) }}>▼</div>
<div onClick={() => {
message.success('升序');
setPageInfo({ ...pageInfo, ...{ pn: 1 } });
getData({ sort: 1 }, { pn: 1 })
}}>▲</div>
<div onClick={() => {
message.success('降序');
setPageInfo({ ...pageInfo, ...{ pn: 1 } });
getData({ sort: 2 }, { pn: 1 })
}}>▼</div>
</div>
</div>,
key: '1',
@ -1013,8 +1050,16 @@ function ParkingAlyDuration() {
label: <div className="tab-title">
<div className="title">停车场</div>
<div className="btn">
<div onClick={() => { message.success('升序'); getData({ sort: 1 }) }}>▲</div>
<div onClick={() => { message.success('降序'); getData({ sort: 2 }) }}>▼</div>
<div onClick={() => {
message.success('升序');
setPageInfo({ ...pageInfo, ...{ pn: 1 } });
getData({ sort: 1 }, { pn: 1 })
}}>▲</div>
<div onClick={() => {
message.success('降序');
setPageInfo({ ...pageInfo, ...{ pn: 1 } });
getData({ sort: 2 }, { pn: 1 })
}}>▼</div>
</div>
</div>,
key: '2',
@ -1050,17 +1095,96 @@ function ParkingAlyDuration() {
</div>
<div className="result-box duration-right">
<div className="result-box-title">平均停车时长排行榜</div>
<div className="export-btn" onClick={() => { window.open('/get_parking_duration_export') }}>导出</div>
<Table
<div className="export-btn" onClick={() => { handleExportCar }}>导出</div>
<Tabs
defaultActiveKey="2"
activeKey={tabKey}
onChange={(key) => {
setTabKey(key);
setPageInfo({ ...pageInfo, ...{ pn: 1 } });
getListData({}, { pn: 1 })
}}
items={[
{
label: `序号`,
key: '0',
disabled: "true"
},
{
label: <div className="tab-title">
<div className="title">区域</div>
<div className="btn">
<div onClick={() => {
message.success('升序');
setPageInfo({ ...pageInfo, ...{ pn: 1 } });
getListData({ sort: 1 }, { pn: 1 })
}}>▲</div>
<div onClick={() => {
message.success('降序');
setPageInfo({ ...pageInfo, ...{ pn: 1 } });
getListData({ sort: 2 }, { pn: 1 })
}}>▼</div>
</div>
</div>,
key: '1',
children: <><Table
showHeader={false}
columns={columns}
dataSource={tableData?.list?.area_list || []}
rowKey={'area_name'}
bordered
pagination={false}
size="middle"
/>
<Pagination {...paginationProps} className="pagination-common" total={tableData?.area_total_records} />
</>,
},
{
label: <div className="tab-title">
<div className="title">停车场</div>
<div className="btn">
<div onClick={() => {
message.success('升序');
setPageInfo({ ...pageInfo, ...{ pn: 1 } });
getListData({ sort: 1 }, { pn: 1 })
}}>▲</div>
<div onClick={() => {
message.success('降序');
setPageInfo({ ...pageInfo, ...{ pn: 1 } });
getListData({ sort: 2 }, { pn: 1 })
}}>▼</div>
</div>
</div>,
key: '2',
children: <><Table
showHeader={false}
columns={parkColumns}
dataSource={[]}
dataSource={tableData?.list?.road_list}
rowKey={'area_name'}
bordered
pagination={false}
size="middle"
//scroll={{ y: 305 }}
// scroll={{
// x: 'calc(700px + 50%)',
// y: 240,
// }}
/>
<Pagination {...paginationProps} className="pagination-common" total={tableData?.area_total_records} />
</>,
},
{
label: `停车次数`,
key: '3',
disabled: "true"
},
{
label: `平均停车时长`,
key: '4',
disabled: "true"
},
]}
/>
</div>
</div>
</div>

8
src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkingAlyOverview/loadable.jsx
View File

@ -32,7 +32,7 @@ function ParkingAlyOverview() {
// 分页数据
const [pageInfo, setPageInfo] = useState({
pn: 1,
length: 10
page_size: 10
});
// 表单数据
const [formData, setFormData] = useState({
@ -163,7 +163,7 @@ function ParkingAlyOverview() {
showSizeChanger: true,
current: pageInfo.pn,
//total: resultData?.totalRecords,
pageSize: pageInfo.length,
pageSize: pageInfo.page_size,
pageSizeOptions: Array.from(
new Set([...[15], ...(dictionary?.pageSizeOptions || [])])
),
@ -700,7 +700,7 @@ function ParkingAlyOverview() {
<Tabs
defaultActiveKey="2"
activeKey={tabKey}
onChange={() => {
onChange={(key) => {
setTabKey(key);
setPageInfo({ ...pageInfo, ...{ pn: 1 } });
getListData({}, { pn: 1 })
@ -762,7 +762,7 @@ function ParkingAlyOverview() {
showHeader={false}
columns={parkColumns}
dataSource={tableData?.list?.road_list || []}
rowKey={'area_name'}
rowKey={'road_name'}
bordered
pagination={false}
size="middle"

165
src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkingAlyPeriod/loadable.jsx
View File

@ -171,7 +171,153 @@ function ParkingAlyPeriod() {
};
//停车饱和趋势分析分析 折线图
const getParkOption = (data) => {
const areaNames = data[0].name ? [...new Set(data.map((item) => item.name))] : ['入场车次', '出场车次'];
// data = [
// {
// "hour": 0,
// "occupancy_rate": "0.01%",
// "charge_type": "2",
// "charge_type_name": "二类区"
// },
// {
// "hour": 1,
// "occupancy_rate": 0,
// "charge_type": "2",
// "charge_type_name": "二类区"
// },
// {
// "hour": 2,
// "occupancy_rate": 0,
// "charge_type": "2",
// "charge_type_name": "二类区"
// },
// {
// "hour": 3,
// "occupancy_rate": 0,
// "charge_type": "2",
// "charge_type_name": "二类区"
// },
// {
// "hour": 4,
// "occupancy_rate": 0,
// "charge_type": "2",
// "charge_type_name": "二类区"
// },
// {
// "hour": 5,
// "occupancy_rate": 0,
// "charge_type": "2",
// "charge_type_name": "二类区"
// },
// {
// "hour": 6,
// "occupancy_rate": 0,
// "charge_type": "2",
// "charge_type_name": "二类区"
// },
// {
// "hour": 7,
// "occupancy_rate": 0,
// "charge_type": "2",
// "charge_type_name": "二类区"
// },
// {
// "hour": 8,
// "occupancy_rate": 0,
// "charge_type": "2",
// "charge_type_name": "二类区"
// },
// {
// "hour": 9,
// "occupancy_rate": "0.1%",
// "charge_type": "2",
// "charge_type_name": "二类区"
// },
// {
// "hour": 10,
// "occupancy_rate": "0.01%",
// "charge_type": "2",
// "charge_type_name": "二类区"
// },
// {
// "hour": 11,
// "occupancy_rate": "0.04%",
// "charge_type": "2",
// "charge_type_name": "二类区"
// },
// {
// "hour": 12,
// "occupancy_rate": "0.06%",
// "charge_type": "2",
// "charge_type_name": "二类区"
// },
// {
// "hour": 13,
// "occupancy_rate": "0.04%",
// "charge_type": "2",
// "charge_type_name": "二类区"
// },
// {
// "hour": 14,
// "occupancy_rate": "0.06%",
// "charge_type": "2",
// "charge_type_name": "二类区"
// },
// {
// "hour": 15,
// "occupancy_rate": "0.01%",
// "charge_type": "2",
// "charge_type_name": "二类区"
// },
// {
// "hour": 16,
// "occupancy_rate": "0.04%",
// "charge_type": "2",
// "charge_type_name": "二类区"
// },
// {
// "hour": 17,
// "occupancy_rate": "0.04%",
// "charge_type": "2",
// "charge_type_name": "二类区"
// },
// {
// "hour": 18,
// "occupancy_rate": "0.07%",
// "charge_type": "2",
// "charge_type_name": "二类区"
// },
// {
// "hour": 19,
// "occupancy_rate": 0,
// "charge_type": "2",
// "charge_type_name": "二类区"
// },
// {
// "hour": 20,
// "occupancy_rate": 0,
// "charge_type": "2",
// "charge_type_name": "二类区"
// },
// {
// "hour": 21,
// "occupancy_rate": "0.01%",
// "charge_type": "2",
// "charge_type_name": "二类区"
// },
// {
// "hour": 22,
// "occupancy_rate": 0,
// "charge_type": "2",
// "charge_type_name": "二类区"
// },
// {
// "hour": 23,
// "occupancy_rate": 0,
// "charge_type": "2",
// "charge_type_name": "二类区"
// }
// ]
const areaNames = data[0].charge_type_name ? [...new Set(data.map((item) => item.charge_type_name))] : [''];
// 获取所有横坐标
const dates = [...new Set(data.map((item) => item.hour))].sort(
(a, b) => a.hour - b.hour
@ -179,10 +325,10 @@ function ParkingAlyPeriod() {
// 构建数据对象
const seriesData = areaNames.map((areaName, index) => {
// 获取数据
const areaData = data[0].name ? data.filter((item) => item.name === areaName) : data
const areaData = data[0].charge_type_name ? data.filter((item) => item.charge_type_name === areaName) : data
// 构建数据对象
return {
name: areaNames.length > 1 ? areaName : '',
name: areaName,
type: "line",
itemStyle: {
label: {
@ -193,8 +339,8 @@ function ParkingAlyPeriod() {
},
},
data: dates.map((item) => {
for (const { hour, total_in_records, total_out_records } of areaData) {
if (hour === item) return index == 1 ? total_in_records : total_out_records;
for (const { hour, occupancy_rate } of areaData) {
if (hour === item) return parseFloat(occupancy_rate);
}
return 0;
}),
@ -212,14 +358,17 @@ function ParkingAlyPeriod() {
};
});
setParkData(lineChartOption(areaNames, xAxisData, "饱和度", seriesData));
};
function getParkingIncome(data) {
ajax
.getParkingAlyPeriodLine(data)
.then((res) => {
if (res.status === 20000) {
getRevenueOption(res.data.list);
setResultData(res.data)
}
})
.catch((err) => console.error(err));
@ -491,21 +640,21 @@ function ParkingAlyPeriod() {
<div className="result-icon"><Icon type="shijian" /></div>
<div className="result-content">
<div className="title">停车高峰时段</div>
<div className="time">||"--"</div>
<div className="time">{resultData.peak_hours || "--"}</div>
</div>
</div>
<div className="result-header reb">
<div className="result-icon"><Icon type="shijian" /></div>
<div className="result-content">
<div className="title">入场压力时段</div>
<div className="time"></div>
<div className="time">{resultData.entry_pressure_hours || "--"}</div>
</div>
</div>
<div className="result-header rec">
<div className="result-icon"><Icon type="shijian" /></div>
<div className="result-content">
<div className="title">出场压力时段</div>
<div className="time">00:00 - 22:00</div>
<div className="time">{resultData.exit_pressure_hours || "--"}</div>
</div>
</div>
</div>

1
src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkingAlyReport/loadable.jsx
View File

@ -183,6 +183,7 @@ function ParkingAlyReport() {
formSearch={formSearch}
search={search}
total={total}
rowKey={"road_name"}
initFormData={{}}
pageName={'parkingAlyReport'}
// exportUrl=""

89
src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkingLiveData/loadable.jsx
View File

@ -94,14 +94,67 @@ function ParkingLiveData() {
// }, [isAjax]);
//出入场趋势
const getRevenueOption = (data) => {
if (!data.entry_list) return
data.entry_list.sort((a, b) => {
return new Date(a.hour) - new Date(b.hour);
});
data.entry_list.sort((a, b) => {
return new Date(a.hour) - new Date(b.hour);
});
const areaNames = ['入场', '出场'];
// 获取所有日期
const dates = [...new Set(data.entry_list.map((item) => item.hour))].sort(
(a, b) => a.hour - b.hour
);
// 构建数据对象
const seriesData = areaNames.map((areaName, index) => {
let newsave = ''
if (index == 0) {
newsave = data.entry_list.map((item) => { return item.entry_count })
} else {
newsave = data.exit_list.map((item) => { return item.exit_count })
}
// 获取数据
//const areaData = data[0].name ? data.filter((item) => item.name === areaName) : data
// 构建数据对象
return {
name: areaNames.length > 1 ? areaName : '',
type: "line",
itemStyle: {
label: {
show: true, //开启显示
position: 'top', //在上方显示
color: 'white',//字体颜色
fontSize: 10//字体大小
},
},
data: newsave
};
});
// 构建X轴数据
const xAxisData = dates.map((date) => {
return {
value: date,
align: "center",
lineStyle: {
color: "skyblue", // 设置线的颜色为天蓝色
shadowBlur: 6,
},
};
});
setRevenueData(lineChartOption(areaNames, xAxisData, "数量（次）", seriesData));
};
//泊位占用趋势
const getLineOption = (data) => {
// 获取所有地区名称
data.sort((a, b) => {
return new Date(a.date) - new Date(b.date);
return new Date(a.hour) - new Date(b.hour);
});
const areaNames = data[0].name ? [...new Set(data.map((item) => item.name))] : [''];
// 获取所有日期
const dates = [...new Set(data.map((item) => item.date))].sort(
(a, b) => a.date - b.date
const dates = [...new Set(data.map((item) => item.hour))].sort(
(a, b) => a.hour - b.hour
);
// 构建数据对象
const seriesData = areaNames.map((areaName, index) => {
@ -120,8 +173,8 @@ function ParkingLiveData() {
},
},
data: dates.map((item) => {
for (const { date, record_count } of areaData) {
if (date === item) return record_count;
for (const { hour, occupancy_rate } of areaData) {
if (hour === item) return parseFloat(occupancy_rate);
}
return 0;
}),
@ -140,9 +193,9 @@ function ParkingLiveData() {
};
});
setRevenueData(lineChartOption(areaNames, xAxisData, "数量（次）", seriesData));
setParkingData(lineChartOption(areaNames, xAxisData, "数量（次）", seriesData));
};
//泊位占用趋势
//泊位占用率 环形图
const getParkingOption = (data) => {
console.log(data)
const areaNames = [data.vacant_name, data.occupied_name];
@ -152,7 +205,7 @@ function ParkingLiveData() {
]
setRingData(ringChartOption(areaNames, todata));
};
//会员车占比
//会员车占比 环形图
const getRingOption = (data) => {
const areaNames = [data.member_name, data.no_member_name];
let todata = [
@ -181,6 +234,26 @@ function ParkingLiveData() {
}
})
.catch((err) => console.error(err));
ajax
.getParkingLiveDataLine(data)
.then((res) => {
if (res.status === 20000) {
console.log(res)
getRevenueOption(res.data.list)
}
})
.catch((err) => console.error(err));
ajax
.getParkingLiveDataParkLine(data)
.then((res) => {
if (res.status === 20000) {
console.log(res)
getLineOption(res.data.list)
}
})
.catch((err) => console.error(err));
}
// 获取下拉数据

27
src/services/DataAnalysisPrediction/ParkingBusinessAly/index.js
View File

@ -73,6 +73,14 @@ const getParkingAlyDurationParkingExp = (params) => {
data: params,
});
};
//停车业务分析-停车时长分析-平均停车时长排行榜导出
const getParkingAlyDurationExp = (params) => {
return ajax({
url: "/get_parking_duration_export",
type: "post",
data: params,
});
};
//停车业务分析-停车时段分析-出入场车流量分析 折线图
const getParkingAlyPeriodLine = (params) => {
return ajax({
@ -145,6 +153,22 @@ const getParkingLiveDataVip = (params) => {
data: params,
});
};
//停车业务分析-停车实况数据-出入场趋势 折线图
const getParkingLiveDataLine = (params) => {
return ajax({
url: "/api/ana/dataanalysis/show_inout_record_data",
type: "post",
data: params,
});
};
//停车业务分析-停车实况数据-泊位占用趋势 折线图
const getParkingLiveDataParkLine = (params) => {
return ajax({
url: "/api/ana/dataanalysis/get_berth_occupancy",
type: "post",
data: params,
});
};
//停车业务分析-泊位周转分析-列表
const getparkTurnoverAlyList = (params) => {
return ajax({
@ -198,6 +222,7 @@ export default {
getParkingAlyDurationBerthList,
getParkingAlyDurationParkingList,
getParkingAlyDurationParkingExp,
getParkingAlyDurationExp,
getParkingAlyPeriodLine,
getParkingAlyPeriodParkLine,
@ -211,6 +236,8 @@ export default {
getParkingLiveDataPark,
getParkingLiveDataVip,
getParkingLiveDataLine,
getParkingLiveDataParkLine,
getparkTurnoverAlyList,

Write Preview
Loading…
Cancel
Save