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

feat():对接停车实况数据页面

tags/PMS_Frontend_v1.0.6-develop
xingjx 1 year ago
parent
ffb4759c85
commit
683d41f838
5 changed files with 39 additions and 185 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkingAlyDuration/loadable.jsx
  2. 48
      src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkingAlyOverview/loadable.jsx
  3. 156
      src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkingLiveData/loadable.jsx
  4. 8
      src/pages/DataAnalysisPrediction/ParkingBusinessAly/TemporaryParkStat/loadable.jsx
  5. 10
      src/services/DataAnalysisPrediction/ParkingBusinessAly/index.js

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

@ -977,7 +977,7 @@ function ParkingAlyDuration() {
<div className="duration-box"> <div className="duration-box">
<div className="result-box duration-left"> <div className="result-box duration-left">
<div className="result-box-title">日均泊位周转次数排行榜</div> <div className="result-box-title">日均泊位周转次数排行榜</div>
<div className="export-btn" onClick={() => { window.open('/api/ana/dataanalysis/get_turn_times_export') }}>导出</div>
<div className="export-btn" onClick={() => { }}>导出</div>
<Tabs <Tabs
defaultActiveKey="2" defaultActiveKey="2"
activeKey={tabKey} activeKey={tabKey}

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

@ -173,13 +173,10 @@ function ParkingAlyOverview() {
...{ pn: current, length: size } ...{ pn: current, length: size }
}); });
//setIsAjax(!isAjax) //setIsAjax(!isAjax)
getListData({})
getListData({}, { pn: current })
}, },
} }
// useEffect(() => {
// getListData()
// }, [pageInfo])
useEffect(() => { useEffect(() => {
getSelectList(); getSelectList();
@ -349,14 +346,14 @@ function ParkingAlyOverview() {
}; };
// 获取排行榜列表数据 // 获取排行榜列表数据
const getListData = (v) => {
const getListData = (v, pn = {}) => {
let postData = { ...formData, sort: 1 }; let postData = { ...formData, sort: 1 };
if (!loading) { if (!loading) {
postData = { ...holdData }; postData = { ...holdData };
} }
setDefaultParams({ ...postData, ...pageInfo });
setDefaultParams({ ...postData, ...pageInfo, ...pn });
setTabLoading(true); setTabLoading(true);
ajax.getParkingAlyOverviewList({ ...postData, ...v, ...pageInfo }).then(
ajax.getParkingAlyOverviewList({ ...postData, ...v, ...pageInfo, ...pn }).then(
(res) => { (res) => {
if (parseInt(res?.status) === 20000) { if (parseInt(res?.status) === 20000) {
setTableData(res?.data || {}); setTableData(res?.data || {});
@ -703,12 +700,9 @@ function ParkingAlyOverview() {
defaultActiveKey="2" defaultActiveKey="2"
activeKey={tabKey} activeKey={tabKey}
onChange={() => { onChange={() => {
changeKey();
setPageInfo({
...pageInfo,
...{ pn: 1 }
});
getListData({})
setTabKey(key);
setPageInfo({ ...pageInfo, ...{ pn: 1 } });
getListData({}, { pn: 1 })
}} }}
items={[ items={[
{ {
@ -722,19 +716,13 @@ function ParkingAlyOverview() {
<div className="btn"> <div className="btn">
<div onClick={() => { <div onClick={() => {
message.success('升序'); message.success('升序');
setPageInfo({
...pageInfo,
...{ pn: 1 }
});
getListData({ sort: 1 })
setPageInfo({ ...pageInfo, ...{ pn: 1 } });
getListData({ sort: 1 }, { pn: 1 })
}}>▲</div> }}>▲</div>
<div onClick={() => { <div onClick={() => {
message.success('降序'); message.success('降序');
setPageInfo({
...pageInfo,
...{ pn: 1 }
});
getListData({ sort: 2 })
setPageInfo({ ...pageInfo, ...{ pn: 1 } });
getListData({ sort: 2 }, { pn: 1 })
}}>▼</div> }}>▼</div>
</div> </div>
</div>, </div>,
@ -758,19 +746,13 @@ function ParkingAlyOverview() {
<div className="btn"> <div className="btn">
<div onClick={() => { <div onClick={() => {
message.success('升序'); message.success('升序');
setPageInfo({
...pageInfo,
...{ pn: 1 }
});
getListData({ sort: 1 })
setPageInfo({ ...pageInfo, ...{ pn: 1 } });
getListData({ sort: 1 }, { pn: 1 })
}}>▲</div> }}>▲</div>
<div onClick={() => { <div onClick={() => {
message.success('降序'); message.success('降序');
setPageInfo({
...pageInfo,
...{ pn: 1 }
});
getListData({ sort: 2 })
setPageInfo({ ...pageInfo, ...{ pn: 1 } });
getListData({ sort: 2 }, { pn: 1 })
}}>▼</div> }}>▼</div>
</div> </div>
</div>, </div>,

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

@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
import { ResultFlowResult } from "@/components"; import { ResultFlowResult } from "@/components";
import { Select, Input, Button, Table, message, Pagination, DatePicker, Modal, Cascader, Tooltip } from "antd"; import { Select, Input, Button, Table, message, Pagination, DatePicker, Modal, Cascader, Tooltip } from "antd";
import { useSessionStorageState } from "ahooks"; import { useSessionStorageState } from "ahooks";
import { lineChartOption, ringChartOption } from "../echarts.config";
import { dictionary } from "@/config/common"; import { dictionary } from "@/config/common";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { setTabList } from "@/store/common.js"; import { setTabList } from "@/store/common.js";
@ -11,6 +12,7 @@ import moment from "moment";
import ReactEcharts from "echarts-for-react"; import ReactEcharts from "echarts-for-react";
import "./index.scss"; import "./index.scss";
import ajax from "@/services"; import ajax from "@/services";
import { constant } from "lodash";
//停车实况数据 //停车实况数据
function ParkingLiveData() { function ParkingLiveData() {
// session缓存 // session缓存
@ -223,146 +225,14 @@ function ParkingLiveData() {
}; };
//泊位占用趋势 //泊位占用趋势
const getParkingOption = (data) => { const getParkingOption = (data) => {
// 获取所有地区名称
data.sort((a, b) => {
return new Date(a.pay_date) - new Date(b.pay_date);
});
console.log(data);
const areaNames = [...new Set(data.map((item) => item.area_name))];
// 获取所有日期
const dates = [...new Set(data.map((item) => item.pay_date))].sort(
(a, b) => a.pay_date - b.pay_date
);
// 构建数据对象
const seriesData = areaNames.map((areaName, index) => {
// 获取该地区的数据
const areaData = data.filter((item) => item.area_name === areaName);
// 构建该地区的数据对象
return {
name: areaName,
type: "line",
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
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;
}
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: "skyblue", // 设置线的颜色为天蓝色
shadowBlur: 6,
},
},
};
});
console.log(data)
setParkingData({
title: {
text: "",
textStyle: {
color: "#fff",
},
},
tooltip: {
trigger: "axis",
},
// legend: {
// type: "scroll",
// right: "5%",
// //data: areaNames,
// //data: ["临时停车次数", "常时停车次数"],
// itemWidth: 18,
// itemHeight: 12,
// textStyle: {
// fontSize: 14,
// color: 'white',
// },
// },
xAxis: {
//data: xAxisData,
data: ["00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00"],
type: 'category',
boundaryGap: false, // 不留白，从原点开始
axisLine: {
lineStyle: {
color: "#bbb",
},
},
axisLabel: {
textStyle: {
color: "#bbb",
},
},
},
yAxis: {
type: "value",
name: '泊位占用率',
min: 0,
max: 100,
interval: 10,
//splitNumber: 6, //设置坐标轴的分割段数
axisLabel: {
formatter: "{value}%",
textStyle: {
color: "#bbb",
},
},
},
color: ["#4DC3FF", "#FFD767"],
//series: seriesData,
series:
{
"name": "临时停车次数",
"type": "line",
"data": [40, 0, 90, 34, 98, 100, 70, 80],
areaStyle: {
normal: {//自定义颜色，渐变色填充折线图区域
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#FFB8B8' // 0% 处的颜色
}, {
offset: 1, color: '#F481F8' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
},
}
},
grid: {
x: 50,
y: 55,
x2: 70,
y2: 20,
},
});
const areaNames = [data.vacant_name, data.occupied_name];
let todata = [
{ value: parseFloat(data.vacancy_rate), name: data.vacant_name },
{ value: parseFloat(data.occupancy_rate), name: data.occupied_name },
]
setRingData(ringChartOption(areaNames, todata));
}; };
// //
const getRingOption = (data) => { const getRingOption = (data) => {
@ -437,13 +307,13 @@ function ParkingLiveData() {
function getParkingIncome() { function getParkingIncome() {
ajax ajax
.getParkingIncome()
.getParkingLiveDataPark()
.then((res) => { .then((res) => {
if (res.status === 20000) { if (res.status === 20000) {
console.log(res) console.log(res)
getRevenueOption(res.data);
getParkingOption(res.data);
getRingOption(res.data)
//getRevenueOption(res.data);
getParkingOption(res.data.list[0]);
//getRingOption(res.data)
} }
}) })
.catch((err) => console.error(err)); .catch((err) => console.error(err));

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

@ -187,14 +187,6 @@ function TemporaryParkStat() {
}; };
//临时停车次数占比 //临时停车次数占比
const getRingOption = (data) => { const getRingOption = (data) => {
// "date": "2023-11-03",
// "temp_park_name": "临时停车",
// "temp_park_count": "70688",
// "temp_park_percentage": "18.03%",
// "long_park_name": "长时间停车",
// "long_park_count": "321031",
// "long_park_percentage": "81.88%",
// "total_park_count": "392059"
const areaNames = [data.temp_park_name, data.long_park_name]; const areaNames = [data.temp_park_name, data.long_park_name];
let todata = [ let todata = [
{ value: parseFloat(data.temp_park_percentage), name: data.temp_park_name }, { value: parseFloat(data.temp_park_percentage), name: data.temp_park_name },

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

@ -105,6 +105,14 @@ const getParkUsageAlyLine = (params) => {
data: params, data: params,
}); });
}; };
//停车业务分析-停车实况数据-泊位占用率
const getParkingLiveDataPark = (params) => {
return ajax({
url: "/api/ana/dataanalysis/show_parking_live_rate",
type: "post",
data: params,
});
};
export default { export default {
getParkingAlyOverviewBase, getParkingAlyOverviewBase,
getParkingAlyOverviewLine, getParkingAlyOverviewLine,
@ -124,4 +132,6 @@ export default {
getNightParkStatLine, getNightParkStatLine,
getParkUsageAlyLine, getParkUsageAlyLine,
getParkingLiveDataPark,
} }
Write Preview
Loading…
Cancel
Save