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

Merge branch 'develop' of http://120.27.195.166:3000/chenglb/PMS_Frontend_v1.0.0.git into develop

tags/PMS_Frontend_v1.0.6-develop
chenglb 1 year ago
parent
ae494b2732 af2f2ecb64
commit
3a2f33390b
12 changed files with 1857 additions and 61 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/config/character.config.js
  2. 3
      src/pages/DataAnalysisPrediction/ParkingIncomeAly/ArrearageAly/Overview/index.jsx
  3. 181
      src/pages/DataAnalysisPrediction/ParkingIncomeAly/ArrearageRecoverAly/index.scss
  4. 443
      src/pages/DataAnalysisPrediction/ParkingIncomeAly/ArrearageRecoverAly/loadable.jsx
  5. 181
      src/pages/DataAnalysisPrediction/ParkingIncomeAly/CityArrearageAly/index.scss
  6. 443
      src/pages/DataAnalysisPrediction/ParkingIncomeAly/CityArrearageAly/loadable.jsx
  7. 41
      src/pages/DataAnalysisPrediction/ParkingIncomeAly/OrderArrearageAly/loadable.jsx
  8. 181
      src/pages/DataAnalysisPrediction/ParkingIncomeAly/PriceAly/index.scss
  9. 414
      src/pages/DataAnalysisPrediction/ParkingIncomeAly/PriceAly/loadable.jsx
  10. 4
      src/pages/FinancialMgm/FinancialReport/OperationReport/loadable.jsx
  11. 4
      src/pages/FinancialMgm/FinancialReport/PdaStat/loadable.jsx
  12. 21
      src/services/DataAnalysisPrediction/ParkingIncomeAly/index.js

2
src/config/character.config.js
View File

@ -934,7 +934,7 @@ export const lineChartOption = {
{ {
name: '', name: '',
type: 'line', type: 'line',
stack: 'Total',
// stack: 'Total',
symbolSize: 1, symbolSize: 1,
symbol: 'circle', symbol: 'circle',
showSymbol: false, showSymbol: false,

3
src/pages/DataAnalysisPrediction/ParkingIncomeAly/ArrearageAly/Overview/index.jsx
View File

@ -113,21 +113,18 @@ const Overview = forwardRef((props, ref) => {
...trendLineChartOption.series[0], ...trendLineChartOption.series[0],
name: '一类区', name: '一类区',
type: 'line', type: 'line',
stack: 'Total',
data: [...stack1] data: [...stack1]
}, },
{ {
...trendLineChartOption.series[0], ...trendLineChartOption.series[0],
name: '二类区', name: '二类区',
type: 'line', type: 'line',
stack: 'Total',
data: [...stack2] data: [...stack2]
}, },
{ {
...trendLineChartOption.series[0], ...trendLineChartOption.series[0],
name: '三类区', name: '三类区',
type: 'line', type: 'line',
stack: 'Total',
data: [...stack3] data: [...stack3]
} }
] ]

181
src/pages/DataAnalysisPrediction/ParkingIncomeAly/ArrearageRecoverAly/index.scss
View File

@ -1,5 +1,186 @@
@import "@/assets/css/mixin.scss"; @import "@/assets/css/mixin.scss";
$color-container-bg : var(--color-container-bg); $color-container-bg : var(--color-container-bg);
$color-user-list-bg : var(--color-user-list-bg); $color-user-list-bg : var(--color-user-list-bg);
$color-text : var(--color-text); $color-text : var(--color-text);
$color-primary : var(--color-primary); $color-primary : var(--color-primary);
.parking-container {
display: flex;
padding-top: 10px;
height: 100%;
.parking-container-left {
display: block;
width: 375px;
padding: 10px 10px 20px 20px;
}
.parking-container-right {
width: calc(100% - 375px);
padding-bottom: 15px;
padding: 20px;
background: var(--color-user-list-bg);
border-top-left-radius: 20px;
box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.08);
.ant-tabs .ant-tabs-nav-wrap .ant-tabs-nav-list {
width: unset;
}
.ant-tabs-tab {
padding: unset;
}
.parking-content {
height: 100%;
display: flex;
flex-direction: column;
.parking-tabs {
margin-bottom: 10px;
}
.parking-wrapper {
flex: 1;
}
}
}
}
.parking-container {
.yisa-search {
width: 100%;
display: flex;
align-items: center;
margin-bottom: 24px;
label {
color: var(--color-search-list-item-text);
flex: 0 0 27% !important;
max-width: 27% !important;
text-align: right;
padding-right: 8px;
}
.form-con {
flex: 1;
width: 220px;
}
}
.form-btn {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
// margin: 40px 0px 0px;
padding: 0 3px;
.ant-btn+.ant-btn {
margin-left: 10px;
}
.ant-btn span {
font-size: 16px;
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
font-weight: 400;
text-align: center;
color: #ffffff;
}
.reset {
width: 90px;
height: 36px;
background: var(--button-default-bg);
}
.btn-export {
width: 90px;
height: 36px;
}
.submit {
width: calc(100% - 100px);
height: 36px;
}
}
.ant-select-selector,
.ant-picker,
.ant-input {
background-color: var(--color-search-list-item-bg) !important;
box-shadow: none !important;
color: var(--color-search-list-item-value);
border-color: var(--color-search-list-item-bd) !important;
}
.ant-picker {
width: 100%;
}
.parking-search {
.title {
width: 100%;
font-size: 16px;
font-family: Microsoft YaHei, Microsoft YaHei-Bold;
font-weight: 700;
text-align: left;
color: var(--color-text);
margin-bottom: 20px;
}
}
.form-Wrap {
display: flex;
flex-direction: column;
}
}
.ant-cascader-menu {
width: 260px;
}
.parking-container-right {
.export-container {
margin-bottom: 10px;
text-align: right;
}
.parking-item {
height: 350px;
}
.park-table-content {
margin-top: 20px;
.park-table {
flex: 1;
.ant-table-body {
@include scrollBar(var(--color-user-list-bg), #3B97FF);
}
.ant-table-fixed-header .ant-table-tbody tr:nth-child(2n+1) > td {
background: unset !important;
background-color: #3e4557 !important;
}
}
}
}
.parking-item {
color: #fff;
background: #3e4557;
border-radius: 4px;
display: flex;
flex-direction: column;
padding: 20px;
&-title {
height: 18px;
display: flex;
align-items: center;
position: relative;
text-indent: .5rem;
font-size: 16px;
font-weight: 700;
user-select: none;
&::before {
position: absolute;
content: "";
height: 100%;
width: 4px;
left: -2px;
background: var(--color-menu-selected-text-item);
}
}
&-content {
flex: 1;
.echarts-for-react {
height: 100% !important;
}
}
}

443
src/pages/DataAnalysisPrediction/ParkingIncomeAly/ArrearageRecoverAly/loadable.jsx
View File

@ -1,15 +1,434 @@
import React, { useState, useRef, useEffect } from "react";
// import { message, Pagination, Table, Space, Modal, } from "antd";
// import { dictionary, utils } from "@/config/common";
// import moment from 'moment'
// import { useSessionStorageState, useUpdateEffect, useSize, useUpdate } from 'ahooks';
// import ajax from "@/services"
// import { FormInput, FormSelect, OptionPanel, ResultPanel, FormSliderPicker, AreaCascader, ImgResize, ImgZoom, } from "@/components"
// import "./index.scss";
// import errorImg from "@/assets/images/layout/error.png"
// import { useLocation } from "react-router-dom";
function ArrearageRecoverAly() {
return <div>ArrearageRecoverAly</div>
import React, { useState, useRef, useEffect } from "react"
import { Select, Input, Button, Table, message, Pagination, DatePicker, Cascader, Tooltip } from "antd"
import { ExportBtnNew, ResultFlowResult } from '@/components'
import { dictionary } from "@/config/common"
import ReactEcharts from "echarts-for-react"
import { lineChartOption } from "@/config/character.config"
import ajax from "@/services"
import moment from "moment"
import './index.scss'
function ArrearageRecoverAly(props) {
const {
} = props
const [loading, setLoading] = useState(false)
const defaultFormData = {
region: [],
operator_id: "0",
park_type: 0,
date_type: "day",
start_time: "",
end_time: "",
park_bussiness_type: 0
}
const [formData, setFormData] = useState({
...defaultFormData
})
const [pageInfo, setPageInfo] = useState({
pn: 1,
length: 10
})
const [resultData, setResultDate] = useState({
list: [],
totalRecords: 0
})
const [lineOption, setLineOptions] = useState({...lineChartOption})
const [areaList, setAreaList] = useState([])
const [Yunying, setYunying] = useState([])
const tableColumns = [
{
title: "序号",
width: 60,
align: 'center',
render: (text, record, index) => index + 1,
},
{
title: "地区",
align: 'center',
dataIndex: "area",
},
{
title: "区间范围",
align: 'center',
dataIndex: "date",
},
{
title: "欠费金额",
align: 'center',
dataIndex: "money",
}
]
const paginationProps = {
className: "pagination-common",
showQuickJumper: true,
showSizeChanger: true,
current: pageInfo.pn,
total: resultData?.totalRecords,
pageSize: pageInfo.length,
pageSizeOptions: Array.from(
new Set([...[15], ...(dictionary?.pageSizeOptions || [])])
),
onChange: (current, size) => {
setPageInfo({
...pageInfo,
...{ pn: current, length: size }
});
}
}
const ajaxGetAreaData = () => {
ajax.getAreaTree().then((res) => {
if (res.status === 20000) {
setAreaList(res.data);
}
}).catch((err) => {
console.error(err)
});
}
const ajaxGetOperatorData = () => {
ajax.getAllOperator().then((res) => {
if (parseInt(res?.status) === 20000) {
setYunying(res.data);
} else {
message.error(res?.message);
}
}).catch(err => {
console.log(err)
})
}
const ajaxGetListData = () => {
setLoading(true)
ajax.getArrearCatchData({...formData}).then(res => {
if (res.status == 20000) {
setResultDate({
list: res.data.list,
totalRecords: res.totalRecords || 0
})
initTrendLineChart([...res.data.trend])
}
setLoading(false)
})
}
const initTrendLineChart = (data) => {
setLineOptions({
...lineOption,
xAxis: {
...lineOption.xAxis,
data: [...data[0]?.data.map(item => item.name)]
},
// series: [
// {
// ...lineOption.series[0],
// name: '应收金额',
// type: 'line',
// stack: 'Total',
// data: [...data.map((item) => item.ys)]
// },
// {
// ...lineOption.series[0],
// name: '欠费金额',
// type: 'line',
// stack: 'Total',
// data: [...data.map((item) => item.qf)]
// }
// ],
series: Array(data.length).fill(0).map((_, i) => ({
...lineOption.series[0],
name: data[i].area,
type: 'line',
// stack: 'Total',
data: [...data[i].data.map((item) => item.value)]
}))
})
}
const TimeChange = () => {
let e = formData.date_type;
let str = "day";
let mat = "YYYY-MM-DD";
if (e == "year") {
str = "year";
mat = "YYYY";
} else if (e == "month") {
str = "month";
mat = "YYYY-MM";
} else if (e == "week") {
str = "week";
mat = "YYYY-MM-DD";
}
return { str, mat };
}
const SetTimeNow = (e) => {
let start = "";
let end = "";
if (e == 'year') {
start = moment().format("YYYY");
end = moment().format("YYYY");
} else if (e == 'month') {
start = moment().format("YYYY-MM");
end = moment().format("YYYY-MM");
} else if (e == 'week') {
start = moment().day(1).format("YYYY-MM-DD");
end = moment().day(7).format("YYYY-MM-DD");
} else {
start = moment().startOf("day").format("YYYY-MM-DD");
end = moment().endOf("day").format("YYYY-MM-DD");
}
setFormData({
...formData,
date_type: e,
start_time: start,
end_time: end,
});
}
const handleReset = () => {
setFormData({
...defaultFormData
})
}
const handleSearch = () => {
ajaxGetListData()
}
useEffect(() => {
ajaxGetAreaData()
ajaxGetOperatorData()
ajaxGetListData()
}, [])
return (
<div className="arrearage-container parking-container">
<div className="parking-container-left">
<div className="parking-search">
<div className="title">查询条件</div>
<div className="form-Wrap">
<div className="yisa-search">
<label>区域</label>
<Cascader
className="form-con"
popupClassName="start-exception-deal-cascader"
options={areaList}
placeholder="请选择区域"
expandTrigger="hover"
fieldNames={{
label: "name",
value: "id",
children: "children",
}}
value={formData.region}
onChange={(v, option) => {
setFormData({ ...formData, region: v ? v : null });
}}
/>
</div>
<div className="yisa-search">
<label>车场业务类型</label>
<Select
value={formData.park_bussiness_type}
style={{
width: "100%",
}}
placeholder="请选择"
options={sysConfig.businessRoad}
onChange={(e) =>
setFormData({
...formData,
park_bussiness_type: e,
})
}
/>
</div>
<div className="yisa-search">
<label>运营商</label>
<Select
value={formData.operator_id}
style={{
width: "100%",
}}
placeholder="请选择"
options={Yunying}
onChange={(e) =>
setFormData({
...formData,
operator_id: e,
})
}
/>
</div>
<div className="yisa-search">
<label>车场类型</label>
<Select
className="form-con"
value={formData.park_type}
options={dictionary.parkType}
onChange={(v) => setFormData({...formData, park_type: v})}
placeholder="请选择车场类型"
/>
</div>
<div className="yisa-search">
<label>
<div className="daf">
<Select
value={formData.date_type}
placeholder="请选择"
options={[
{
value: "day",
label: "日",
},
{
value: "week",
label: "周",
},
{
value: "month",
label: "月",
},
{
value: "year",
label: "年",
},
]}
onChange={(e) => SetTimeNow(e)}
/>
</div>
</label>
<DatePicker
format={TimeChange().mat}
picker={TimeChange().str}
allowClear={false}
value={formData.start_time ? moment(formData.start_time) : null}
onChange={(date, dateString) => {
if (TimeChange().str == "week") {
setFormData({
...formData,
start_time: date
? moment(date).day(1).format("YYYY-MM-DD")
: null,
});
} else if (TimeChange().str == "day") {
if (date > moment(formData.end_time)) {
setFormData({
...formData,
end_time: dateString,
start_time: formData.end_time,
});
} else {
setFormData({
...formData,
start_time: dateString,
});
}
} else {
setFormData({ ...formData, start_time: dateString });
}
}}
disabledDate={(current) => current > moment(formData.end_time)}
/>
</div>
<div className="yisa-search">
<label>至</label>
<DatePicker
style={{ width: "100%" }}
format={TimeChange().mat}
picker={TimeChange().str}
allowClear={false}
value={formData.end_time ? moment(formData.end_time) : null}
onChange={(date, dateString) => {
if (TimeChange().str == "week") {
setFormData({
...formData,
end_time: date
? moment(date).day(7).format("YYYY-MM-DD")
: null,
});
} else if (TimeChange().str == "day") {
if (date < moment(formData.start_time)) {
setFormData({
...formData,
start_time: dateString,
end_time: formData.start_time,
});
} else {
setFormData({
...formData,
end_time: dateString,
});
}
} else {
setFormData({ ...formData, end_time: dateString });
}
}}
disabledDate={(current) =>
current < moment(formData.start_time)
}
/>
</div>
<div className="form-btn">
<Button
className="reset"
onClick={handleReset}
>
重置
</Button>
<Button
className="submit"
type="primary"
onClick={handleSearch}
>
查询
</Button>
</div>
</div>
</div>
</div>
<div className="parking-container-right">
<div className="export-container">
<ExportBtnNew
children={<Button className="export-btn" size='medium' type="primary">导出</Button>}
modalType="noImg"
totalRecords={resultData.totalRecords}
exportUrl="/api/dataAnalysis/arrearsOrder/export"
postdata={{
formData: {...formData}
}}
imgno={false}
/>
</div>
<div className="parking-item">
<div className="parking-item-title">各区域欠费趋势图</div>
<div className="parking-item-content">
<ReactEcharts
option={lineOption}
style={{ overflow: "hidden" }}
/>
</div>
</div>
<div className="park-table-content">
<ResultFlowResult
ajaxLoad={loading}
resultData={resultData?.list || []}
>
<Table
className='park-table'
dataSource={resultData?.list || []}
columns={tableColumns}
pagination={false}
scroll={{y: 290}}
loading={loading}
/>
{/* <Pagination {...paginationProps} className="pagination-common" /> */}
</ResultFlowResult>
</div>
</div>
</div>
)
} }
export default ArrearageRecoverAly; export default ArrearageRecoverAly;

181
src/pages/DataAnalysisPrediction/ParkingIncomeAly/CityArrearageAly/index.scss
View File

@ -1,5 +1,186 @@
@import "@/assets/css/mixin.scss"; @import "@/assets/css/mixin.scss";
$color-container-bg : var(--color-container-bg); $color-container-bg : var(--color-container-bg);
$color-user-list-bg : var(--color-user-list-bg); $color-user-list-bg : var(--color-user-list-bg);
$color-text : var(--color-text); $color-text : var(--color-text);
$color-primary : var(--color-primary); $color-primary : var(--color-primary);
.parking-container {
display: flex;
padding-top: 10px;
height: 100%;
.parking-container-left {
display: block;
width: 375px;
padding: 10px 10px 20px 20px;
}
.parking-container-right {
width: calc(100% - 375px);
padding-bottom: 15px;
padding: 20px;
background: var(--color-user-list-bg);
border-top-left-radius: 20px;
box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.08);
.ant-tabs .ant-tabs-nav-wrap .ant-tabs-nav-list {
width: unset;
}
.ant-tabs-tab {
padding: unset;
}
.parking-content {
height: 100%;
display: flex;
flex-direction: column;
.parking-tabs {
margin-bottom: 10px;
}
.parking-wrapper {
flex: 1;
}
}
}
}
.parking-container {
.yisa-search {
width: 100%;
display: flex;
align-items: center;
margin-bottom: 24px;
label {
color: var(--color-search-list-item-text);
flex: 0 0 27%;
max-width: 27%;
text-align: right;
padding-right: 8px;
}
.form-con {
flex: 1;
width: 220px;
}
}
.form-btn {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
// margin: 40px 0px 0px;
padding: 0 3px;
.ant-btn+.ant-btn {
margin-left: 10px;
}
.ant-btn span {
font-size: 16px;
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
font-weight: 400;
text-align: center;
color: #ffffff;
}
.reset {
width: 90px;
height: 36px;
background: var(--button-default-bg);
}
.btn-export {
width: 90px;
height: 36px;
}
.submit {
width: calc(100% - 100px);
height: 36px;
}
}
.ant-select-selector,
.ant-picker,
.ant-input {
background-color: var(--color-search-list-item-bg) !important;
box-shadow: none !important;
color: var(--color-search-list-item-value);
border-color: var(--color-search-list-item-bd) !important;
}
.ant-picker {
width: 100%;
}
.parking-search {
.title {
width: 100%;
font-size: 16px;
font-family: Microsoft YaHei, Microsoft YaHei-Bold;
font-weight: 700;
text-align: left;
color: var(--color-text);
margin-bottom: 20px;
}
}
.form-Wrap {
display: flex;
flex-direction: column;
}
}
.ant-cascader-menu {
width: 260px;
}
.parking-container-right {
.export-container {
margin-bottom: 10px;
text-align: right;
}
.parking-item {
height: 350px;
}
.park-table-content {
margin-top: 20px;
.park-table {
flex: 1;
.ant-table-body {
@include scrollBar(var(--color-user-list-bg), #3B97FF);
}
.ant-table-fixed-header .ant-table-tbody tr:nth-child(2n+1) > td {
background: unset !important;
background-color: #3e4557 !important;
}
}
}
}
.parking-item {
color: #fff;
background: #3e4557;
border-radius: 4px;
display: flex;
flex-direction: column;
padding: 20px;
&-title {
height: 18px;
display: flex;
align-items: center;
position: relative;
text-indent: .5rem;
font-size: 16px;
font-weight: 700;
user-select: none;
&::before {
position: absolute;
content: "";
height: 100%;
width: 4px;
left: -2px;
background: var(--color-menu-selected-text-item);
}
}
&-content {
flex: 1;
.echarts-for-react {
height: 100% !important;
}
}
}

443
src/pages/DataAnalysisPrediction/ParkingIncomeAly/CityArrearageAly/loadable.jsx
View File

@ -1,15 +1,434 @@
import React, { useState, useRef, useEffect } from "react";
// import { message, Pagination, Table, Space, Modal, } from "antd";
// import { dictionary, utils } from "@/config/common";
// import moment from 'moment'
// import { useSessionStorageState, useUpdateEffect, useSize, useUpdate } from 'ahooks';
// import ajax from "@/services"
// import { FormInput, FormSelect, OptionPanel, ResultPanel, FormSliderPicker, AreaCascader, ImgResize, ImgZoom, } from "@/components"
// import "./index.scss";
// import errorImg from "@/assets/images/layout/error.png"
// import { useLocation } from "react-router-dom";
function CityArrearageAly() {
return <div>CityArrearageAly</div>
import React, { useState, useRef, useEffect } from "react"
import { Select, Input, Button, Table, message, Pagination, DatePicker, Cascader, Tooltip } from "antd"
import { ExportBtnNew, ResultFlowResult } from '@/components'
import { dictionary } from "@/config/common"
import ReactEcharts from "echarts-for-react"
import { lineChartOption } from "@/config/character.config"
import ajax from "@/services"
import moment from "moment"
import './index.scss'
function CityArrearageAly(props) {
const {
} = props
const [loading, setLoading] = useState(false)
const defaultFormData = {
region: [],
operator_id: "0",
park_type: 0,
date_type: "day",
start_time: "",
end_time: "",
park_bussiness_type: 0
}
const [formData, setFormData] = useState({
...defaultFormData
})
const [pageInfo, setPageInfo] = useState({
pn: 1,
length: 10
})
const [resultData, setResultDate] = useState({
list: [],
totalRecords: 0
})
const [lineOption, setLineOptions] = useState({...lineChartOption})
const [areaList, setAreaList] = useState([])
const [Yunying, setYunying] = useState([])
const tableColumns = [
{
title: "序号",
width: 60,
align: 'center',
render: (text, record, index) => index + 1,
},
{
title: "地区",
align: 'center',
dataIndex: "area",
},
{
title: "区间范围",
align: 'center',
dataIndex: "date",
},
{
title: "欠费追缴金额",
align: 'center',
dataIndex: "money",
}
]
const paginationProps = {
className: "pagination-common",
showQuickJumper: true,
showSizeChanger: true,
current: pageInfo.pn,
total: resultData?.totalRecords,
pageSize: pageInfo.length,
pageSizeOptions: Array.from(
new Set([...[15], ...(dictionary?.pageSizeOptions || [])])
),
onChange: (current, size) => {
setPageInfo({
...pageInfo,
...{ pn: current, length: size }
});
}
}
const ajaxGetAreaData = () => {
ajax.getAreaTree().then((res) => {
if (res.status === 20000) {
setAreaList(res.data);
}
}).catch((err) => {
console.error(err)
});
}
const ajaxGetOperatorData = () => {
ajax.getAllOperator().then((res) => {
if (parseInt(res?.status) === 20000) {
setYunying(res.data);
} else {
message.error(res?.message);
}
}).catch(err => {
console.log(err)
})
}
const ajaxGetListData = () => {
setLoading(true)
ajax.getArrearCityData({...formData}).then(res => {
if (res.status == 20000) {
setResultDate({
list: res.data.list,
totalRecords: res.totalRecords || 0
})
initTrendLineChart([...res.data.trend])
}
setLoading(false)
})
}
const initTrendLineChart = (data) => {
setLineOptions({
...lineOption,
xAxis: {
...lineOption.xAxis,
data: [...data[0]?.data.map(item => item.name)]
},
// series: [
// {
// ...lineOption.series[0],
// name: '应收金额',
// type: 'line',
// stack: 'Total',
// data: [...data.map((item) => item.ys)]
// },
// {
// ...lineOption.series[0],
// name: '欠费金额',
// type: 'line',
// stack: 'Total',
// data: [...data.map((item) => item.qf)]
// }
// ],
series: Array(data.length).fill(0).map((_, i) => ({
...lineOption.series[0],
name: data[i].area,
type: 'line',
// stack: 'Total',
data: [...data[i].data.map((item) => item.value)]
}))
})
}
const TimeChange = () => {
let e = formData.date_type;
let str = "day";
let mat = "YYYY-MM-DD";
if (e == "year") {
str = "year";
mat = "YYYY";
} else if (e == "month") {
str = "month";
mat = "YYYY-MM";
} else if (e == "week") {
str = "week";
mat = "YYYY-MM-DD";
}
return { str, mat };
}
const SetTimeNow = (e) => {
let start = "";
let end = "";
if (e == 'year') {
start = moment().format("YYYY");
end = moment().format("YYYY");
} else if (e == 'month') {
start = moment().format("YYYY-MM");
end = moment().format("YYYY-MM");
} else if (e == 'week') {
start = moment().day(1).format("YYYY-MM-DD");
end = moment().day(7).format("YYYY-MM-DD");
} else {
start = moment().startOf("day").format("YYYY-MM-DD");
end = moment().endOf("day").format("YYYY-MM-DD");
}
setFormData({
...formData,
date_type: e,
start_time: start,
end_time: end,
});
}
const handleReset = () => {
setFormData({
...defaultFormData
})
}
const handleSearch = () => {
ajaxGetListData()
}
useEffect(() => {
ajaxGetAreaData()
ajaxGetOperatorData()
ajaxGetListData()
}, [])
return (
<div className="arrearage-container parking-container">
<div className="parking-container-left">
<div className="parking-search">
<div className="title">查询条件</div>
<div className="form-Wrap">
<div className="yisa-search">
<label>区域</label>
<Cascader
className="form-con"
popupClassName="start-exception-deal-cascader"
options={areaList}
placeholder="请选择区域"
expandTrigger="hover"
fieldNames={{
label: "name",
value: "id",
children: "children",
}}
value={formData.region}
onChange={(v, option) => {
setFormData({ ...formData, region: v ? v : null });
}}
/>
</div>
<div className="yisa-search">
<label>车场业务类型</label>
<Select
value={formData.park_bussiness_type}
style={{
width: "100%",
}}
placeholder="请选择"
options={sysConfig.businessRoad}
onChange={(e) =>
setFormData({
...formData,
park_bussiness_type: e,
})
}
/>
</div>
<div className="yisa-search">
<label>运营商</label>
<Select
value={formData.operator_id}
style={{
width: "100%",
}}
placeholder="请选择"
options={Yunying}
onChange={(e) =>
setFormData({
...formData,
operator_id: e,
})
}
/>
</div>
<div className="yisa-search">
<label>车场类型</label>
<Select
className="form-con"
value={formData.park_type}
options={dictionary.parkType}
onChange={(v) => setFormData({...formData, park_type: v})}
placeholder="请选择车场类型"
/>
</div>
<div className="yisa-search">
<label>
<div className="daf">
<Select
value={formData.date_type}
placeholder="请选择"
options={[
{
value: "day",
label: "日",
},
{
value: "week",
label: "周",
},
{
value: "month",
label: "月",
},
{
value: "year",
label: "年",
},
]}
onChange={(e) => SetTimeNow(e)}
/>
</div>
</label>
<DatePicker
format={TimeChange().mat}
picker={TimeChange().str}
allowClear={false}
value={formData.start_time ? moment(formData.start_time) : null}
onChange={(date, dateString) => {
if (TimeChange().str == "week") {
setFormData({
...formData,
start_time: date
? moment(date).day(1).format("YYYY-MM-DD")
: null,
});
} else if (TimeChange().str == "day") {
if (date > moment(formData.end_time)) {
setFormData({
...formData,
end_time: dateString,
start_time: formData.end_time,
});
} else {
setFormData({
...formData,
start_time: dateString,
});
}
} else {
setFormData({ ...formData, start_time: dateString });
}
}}
disabledDate={(current) => current > moment(formData.end_time)}
/>
</div>
<div className="yisa-search">
<label>至</label>
<DatePicker
style={{ width: "100%" }}
format={TimeChange().mat}
picker={TimeChange().str}
allowClear={false}
value={formData.end_time ? moment(formData.end_time) : null}
onChange={(date, dateString) => {
if (TimeChange().str == "week") {
setFormData({
...formData,
end_time: date
? moment(date).day(7).format("YYYY-MM-DD")
: null,
});
} else if (TimeChange().str == "day") {
if (date < moment(formData.start_time)) {
setFormData({
...formData,
start_time: dateString,
end_time: formData.start_time,
});
} else {
setFormData({
...formData,
end_time: dateString,
});
}
} else {
setFormData({ ...formData, end_time: dateString });
}
}}
disabledDate={(current) =>
current < moment(formData.start_time)
}
/>
</div>
<div className="form-btn">
<Button
className="reset"
onClick={handleReset}
>
重置
</Button>
<Button
className="submit"
type="primary"
onClick={handleSearch}
>
查询
</Button>
</div>
</div>
</div>
</div>
<div className="parking-container-right">
<div className="export-container">
<ExportBtnNew
children={<Button className="export-btn" size='medium' type="primary">导出</Button>}
modalType="noImg"
totalRecords={resultData.totalRecords}
exportUrl="/api/dataAnalysis/arrearsOrder/export"
postdata={{
formData: {...formData}
}}
imgno={false}
/>
</div>
<div className="parking-item">
<div className="parking-item-title">各欠费追缴趋势图</div>
<div className="parking-item-content">
<ReactEcharts
option={lineOption}
style={{ overflow: "hidden" }}
/>
</div>
</div>
<div className="park-table-content">
<ResultFlowResult
ajaxLoad={loading}
resultData={resultData?.list || []}
>
<Table
className='park-table'
dataSource={resultData?.list || []}
columns={tableColumns}
pagination={false}
scroll={{y: 290}}
loading={loading}
/>
{/* <Pagination {...paginationProps} className="pagination-common" /> */}
</ResultFlowResult>
</div>
</div>
</div>
)
} }
export default CityArrearageAly; export default CityArrearageAly;

41
src/pages/DataAnalysisPrediction/ParkingIncomeAly/OrderArrearageAly/loadable.jsx
View File

@ -49,7 +49,7 @@ function OrderArrearageAly(props) {
{ {
title: "日期", title: "日期",
align: 'center', align: 'center',
dataIndex: "date",
dataIndex: "name",
}, },
{ {
title: "应收金额", title: "应收金额",
@ -76,7 +76,11 @@ function OrderArrearageAly(props) {
setPageInfo({ setPageInfo({
...pageInfo, ...pageInfo,
...{ pn: current, length: size } ...{ pn: current, length: size }
});
})
ajaxGetListData(false, {
pn: current,
length: size
})
} }
} }
const ajaxGetAreaData = () => { const ajaxGetAreaData = () => {
@ -106,14 +110,18 @@ function OrderArrearageAly(props) {
} }
}) })
} }
const ajaxGetListData = () => {
const ajaxGetListData = (isLine=false, newPageInfo={}) => {
setLoading(true) setLoading(true)
ajax.getArrearOrderList({...formData, ...pageInfo}).then(res => {
ajax.getArrearOrderTrendData(Object.assign({...formData, ...newPageInfo}, isLine ? {} : {...pageInfo})).then(res => {
if (res.status == 20000) { if (res.status == 20000) {
setResultDate({
list: res.data,
totalRecords: res.totalRecords
})
if (isLine) {
initTrendLineChart([...res.data])
} else {
setResultDate({
list: res.data,
totalRecords: res.totalRecords
})
}
} }
setLoading(false) setLoading(false)
}) })
@ -135,14 +143,12 @@ function OrderArrearageAly(props) {
...lineOption.series[0], ...lineOption.series[0],
name: '应收金额', name: '应收金额',
type: 'line', type: 'line',
stack: 'Total',
data: [...data.map((item) => item.ys)] data: [...data.map((item) => item.ys)]
}, },
{ {
...lineOption.series[0], ...lineOption.series[0],
name: '欠费金额', name: '欠费金额',
type: 'line', type: 'line',
stack: 'Total',
data: [...data.map((item) => item.qf)] data: [...data.map((item) => item.qf)]
} }
] ]
@ -197,21 +203,22 @@ function OrderArrearageAly(props) {
} }
const handleSearch = () => { const handleSearch = () => {
ajaxGetTrendData()
setPageInfo({ setPageInfo({
...pageInfo, ...pageInfo,
pn: 1 pn: 1
}) })
ajaxGetListData(false, {pn: 1})
ajaxGetListData(true)
} }
useEffect(() => {
ajaxGetListData()
}, [JSON.stringify(pageInfo)])
// useEffect(() => {
// ajaxGetListData()
// }, [JSON.stringify(pageInfo)])
useEffect(() => { useEffect(() => {
ajaxGetAreaData() ajaxGetAreaData()
ajaxGetOperatorData() ajaxGetOperatorData()
ajaxGetTrendData()
ajaxGetListData(true)
ajaxGetListData() ajaxGetListData()
}, []) }, [])
@ -412,7 +419,7 @@ function OrderArrearageAly(props) {
children={<Button className="export-btn" size='medium' type="primary">导出</Button>} children={<Button className="export-btn" size='medium' type="primary">导出</Button>}
modalType="noImg" modalType="noImg"
totalRecords={resultData.totalRecords} totalRecords={resultData.totalRecords}
exportUrl="/api/dataAnalysis/arrearsOrder/export"
exportUrl="/api/dataAnalysis/arrearsCity/export"
postdata={{ postdata={{
formData: {...formData} formData: {...formData}
}} }}
@ -420,7 +427,7 @@ function OrderArrearageAly(props) {
/> />
</div> </div>
<div className="parking-item"> <div className="parking-item">
<div className="parking-item-title">欠费欠费趋势图</div>
<div className="parking-item-title">订单欠费趋势图</div>
<div className="parking-item-content"> <div className="parking-item-content">
<ReactEcharts <ReactEcharts
option={lineOption} option={lineOption}

181
src/pages/DataAnalysisPrediction/ParkingIncomeAly/PriceAly/index.scss
View File

@ -1,5 +1,186 @@
@import "@/assets/css/mixin.scss"; @import "@/assets/css/mixin.scss";
$color-container-bg : var(--color-container-bg); $color-container-bg : var(--color-container-bg);
$color-user-list-bg : var(--color-user-list-bg); $color-user-list-bg : var(--color-user-list-bg);
$color-text : var(--color-text); $color-text : var(--color-text);
$color-primary : var(--color-primary); $color-primary : var(--color-primary);
.parking-container {
display: flex;
padding-top: 10px;
height: 100%;
.parking-container-left {
display: block;
width: 375px;
padding: 10px 10px 20px 20px;
}
.parking-container-right {
width: calc(100% - 375px);
padding-bottom: 15px;
padding: 20px;
background: var(--color-user-list-bg);
border-top-left-radius: 20px;
box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.08);
.ant-tabs .ant-tabs-nav-wrap .ant-tabs-nav-list {
width: unset;
}
.ant-tabs-tab {
padding: unset;
}
.parking-content {
height: 100%;
display: flex;
flex-direction: column;
.parking-tabs {
margin-bottom: 10px;
}
.parking-wrapper {
flex: 1;
}
}
}
}
.parking-container {
.yisa-search {
width: 100%;
display: flex;
align-items: center;
margin-bottom: 24px;
label {
color: var(--color-search-list-item-text);
flex: 0 0 27%;
max-width: 27%;
text-align: right;
padding-right: 8px;
}
.form-con {
flex: 1;
width: 220px;
}
}
.form-btn {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
// margin: 40px 0px 0px;
padding: 0 3px;
.ant-btn+.ant-btn {
margin-left: 10px;
}
.ant-btn span {
font-size: 16px;
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
font-weight: 400;
text-align: center;
color: #ffffff;
}
.reset {
width: 90px;
height: 36px;
background: var(--button-default-bg);
}
.btn-export {
width: 90px;
height: 36px;
}
.submit {
width: calc(100% - 100px);
height: 36px;
}
}
.ant-select-selector,
.ant-picker,
.ant-input {
background-color: var(--color-search-list-item-bg) !important;
box-shadow: none !important;
color: var(--color-search-list-item-value);
border-color: var(--color-search-list-item-bd) !important;
}
.ant-picker {
width: 100%;
}
.parking-search {
.title {
width: 100%;
font-size: 16px;
font-family: Microsoft YaHei, Microsoft YaHei-Bold;
font-weight: 700;
text-align: left;
color: var(--color-text);
margin-bottom: 20px;
}
}
.form-Wrap {
display: flex;
flex-direction: column;
}
}
.ant-cascader-menu {
width: 260px;
}
.parking-container-right {
.export-container {
margin-bottom: 10px;
text-align: right;
}
.parking-item {
height: 350px;
}
.park-table-content {
margin-top: 20px;
.park-table {
flex: 1;
.ant-table-body {
@include scrollBar(var(--color-user-list-bg), #3B97FF);
}
.ant-table-fixed-header .ant-table-tbody tr:nth-child(2n+1) > td {
background: unset !important;
background-color: #3e4557 !important;
}
}
}
}
.parking-item {
color: #fff;
background: #3e4557;
border-radius: 4px;
display: flex;
flex-direction: column;
padding: 20px;
&-title {
height: 18px;
display: flex;
align-items: center;
position: relative;
text-indent: .5rem;
font-size: 16px;
font-weight: 700;
user-select: none;
&::before {
position: absolute;
content: "";
height: 100%;
width: 4px;
left: -2px;
background: var(--color-menu-selected-text-item);
}
}
&-content {
flex: 1;
.echarts-for-react {
height: 100% !important;
}
}
}

414
src/pages/DataAnalysisPrediction/ParkingIncomeAly/PriceAly/loadable.jsx
View File

@ -1,15 +1,405 @@
import React, { useState, useRef, useEffect } from "react";
// import { message, Pagination, Table, Space, Modal, } from "antd";
// import { dictionary, utils } from "@/config/common";
// import moment from 'moment'
// import { useSessionStorageState, useUpdateEffect, useSize, useUpdate } from 'ahooks';
// import ajax from "@/services"
// import { FormInput, FormSelect, OptionPanel, ResultPanel, FormSliderPicker, AreaCascader, ImgResize, ImgZoom, } from "@/components"
// import "./index.scss";
// import errorImg from "@/assets/images/layout/error.png"
// import { useLocation } from "react-router-dom";
function PriceAly() {
return <div>PriceAly</div>
import React, { useState, useRef, useEffect } from "react"
import { Select, Input, Button, Table, message, Pagination, DatePicker, Cascader, Tooltip } from "antd"
import { ResultFlowResult } from '@/components'
import { dictionary } from "@/config/common"
import ReactEcharts from "echarts-for-react"
import { lineChartOption } from "@/config/character.config"
import ajax from "@/services"
import moment from "moment"
import './index.scss'
function PriceAly(props) {
const {
} = props
const [loading, setLoading] = useState(false)
const defaultFormData = {
region: [],
operator_id: "0",
park_type: 0,
date_type: "day",
start_time: "",
end_time: "",
park_text: ""
}
const [formData, setFormData] = useState({
...defaultFormData
})
const [pageInfo, setPageInfo] = useState({
pn: 1,
length: 10
})
const [resultData, setResultDate] = useState({
list: [],
totalRecords: 0
})
const [lineOption, setLineOptions] = useState({...lineChartOption})
const [areaList, setAreaList] = useState([])
const [Yunying, setYunying] = useState([])
const tableColumns = [
{
title: "序号",
width: 60,
align: 'center',
render: (text, record, index) => index + 1,
},
{
title: "时间",
align: 'center',
dataIndex: "date",
},
{
title: "应收金额（元）",
align: 'center',
dataIndex: "ys",
},
{
title: "停车记录数（次）",
align: 'center',
dataIndex: "records",
},
{
title: "客单价（元）",
align: 'center',
dataIndex: "price",
}
]
const paginationProps = {
className: "pagination-common",
showQuickJumper: true,
showSizeChanger: true,
current: pageInfo.pn,
total: resultData?.totalRecords,
pageSize: pageInfo.length,
pageSizeOptions: Array.from(
new Set([...[15], ...(dictionary?.pageSizeOptions || [])])
),
onChange: (current, size) => {
setPageInfo({
...pageInfo,
...{ pn: current, length: size }
});
}
}
const ajaxGetAreaData = () => {
ajax.getAreaTree().then((res) => {
if (res.status === 20000) {
setAreaList(res.data);
}
}).catch((err) => {
console.error(err)
});
}
const ajaxGetOperatorData = () => {
ajax.getAllOperator().then((res) => {
if (parseInt(res?.status) === 20000) {
setYunying(res.data);
} else {
message.error(res?.message);
}
}).catch(err => {
console.log(err)
})
}
const ajaxGetListData = () => {
setLoading(true)
ajax.getArrearPriceData({...formData}).then(res => {
if (res.status == 20000) {
setResultDate({
list: res.data.list,
totalRecords: res.totalRecords || 0
})
initTrendLineChart([...res.data.trend])
}
setLoading(false)
})
}
const initTrendLineChart = (data) => {
setLineOptions({
...lineOption,
xAxis: {
...lineOption.xAxis,
data: [...data.map(item => item.name)]
},
series: [
{
...lineOption.series[0],
name: '客单价（元）',
data: [...data.map(item => item.value)]
}
]
})
}
const TimeChange = () => {
let e = formData.date_type;
let str = "day";
let mat = "YYYY-MM-DD";
if (e == "year") {
str = "year";
mat = "YYYY";
} else if (e == "month") {
str = "month";
mat = "YYYY-MM";
} else if (e == "week") {
str = "week";
mat = "YYYY-MM-DD";
}
return { str, mat };
}
const SetTimeNow = (e) => {
let start = "";
let end = "";
if (e == 'year') {
start = moment().format("YYYY");
end = moment().format("YYYY");
} else if (e == 'month') {
start = moment().format("YYYY-MM");
end = moment().format("YYYY-MM");
} else if (e == 'week') {
start = moment().day(1).format("YYYY-MM-DD");
end = moment().day(7).format("YYYY-MM-DD");
} else {
start = moment().startOf("day").format("YYYY-MM-DD");
end = moment().endOf("day").format("YYYY-MM-DD");
}
setFormData({
...formData,
date_type: e,
start_time: start,
end_time: end,
});
}
const handleReset = () => {
setFormData({
...defaultFormData
})
}
const handleSearch = () => {
ajaxGetListData()
}
useEffect(() => {
ajaxGetAreaData()
ajaxGetOperatorData()
ajaxGetListData()
}, [])
return (
<div className="arrearage-container parking-container">
<div className="parking-container-left">
<div className="parking-search">
<div className="title">查询条件</div>
<div className="form-Wrap">
<div className="yisa-search">
<label>区域</label>
<Cascader
className="form-con"
popupClassName="start-exception-deal-cascader"
options={areaList}
placeholder="请选择区域"
expandTrigger="hover"
fieldNames={{
label: "name",
value: "id",
children: "children",
}}
value={formData.region}
onChange={(v, option) => {
setFormData({ ...formData, region: v ? v : null });
}}
/>
</div>
<div className="yisa-search">
<label>运营商</label>
<Select
value={formData.operator_id}
style={{
width: "100%",
}}
placeholder="请选择"
options={Yunying}
onChange={(e) =>
setFormData({
...formData,
operator_id: e,
})
}
/>
</div>
<div className="yisa-search">
<label>车场类型</label>
<Select
className="form-con"
value={formData.park_type}
options={dictionary.parkType}
onChange={(v) => setFormData({...formData, park_type: v})}
placeholder="请选择车场类型"
/>
</div>
<div className="yisa-search">
<label>停车场</label>
<Input
className="form-con"
placeholder="请输入"
value={formData?.park_text}
onChange={(e) =>
setFormData({ ...formData, park_text: e.target.value })
}
/>
</div>
<div className="yisa-search">
<label>
<div className="daf">
<Select
value={formData.date_type}
placeholder="请选择"
options={[
{
value: "day",
label: "日",
},
{
value: "week",
label: "周",
},
{
value: "month",
label: "月",
},
{
value: "year",
label: "年",
},
]}
onChange={(e) => SetTimeNow(e)}
/>
</div>
</label>
<DatePicker
format={TimeChange().mat}
picker={TimeChange().str}
allowClear={false}
value={formData.start_time ? moment(formData.start_time) : null}
onChange={(date, dateString) => {
if (TimeChange().str == "week") {
setFormData({
...formData,
start_time: date
? moment(date).day(1).format("YYYY-MM-DD")
: null,
});
} else if (TimeChange().str == "day") {
if (date > moment(formData.end_time)) {
setFormData({
...formData,
end_time: dateString,
start_time: formData.end_time,
});
} else {
setFormData({
...formData,
start_time: dateString,
});
}
} else {
setFormData({ ...formData, start_time: dateString });
}
}}
disabledDate={(current) => current > moment(formData.end_time)}
/>
</div>
<div className="yisa-search">
<label>至</label>
<DatePicker
style={{ width: "100%" }}
format={TimeChange().mat}
picker={TimeChange().str}
allowClear={false}
value={formData.end_time ? moment(formData.end_time) : null}
onChange={(date, dateString) => {
if (TimeChange().str == "week") {
setFormData({
...formData,
end_time: date
? moment(date).day(7).format("YYYY-MM-DD")
: null,
});
} else if (TimeChange().str == "day") {
if (date < moment(formData.start_time)) {
setFormData({
...formData,
start_time: dateString,
end_time: formData.start_time,
});
} else {
setFormData({
...formData,
end_time: dateString,
});
}
} else {
setFormData({ ...formData, end_time: dateString });
}
}}
disabledDate={(current) =>
current < moment(formData.start_time)
}
/>
</div>
<div className="form-btn">
<Button
className="reset"
onClick={handleReset}
>
重置
</Button>
<Button
className="submit"
type="primary"
onClick={handleSearch}
>
查询
</Button>
</div>
</div>
</div>
</div>
<div className="parking-container-right">
<div className="parking-item">
<div className="parking-item-title">客单价分析</div>
<div className="parking-item-content">
<ReactEcharts
option={lineOption}
style={{ overflow: "hidden" }}
/>
</div>
</div>
<div className="park-table-content">
<ResultFlowResult
ajaxLoad={loading}
resultData={resultData?.list || []}
>
<Table
className='park-table'
dataSource={resultData?.list || []}
columns={tableColumns}
pagination={false}
scroll={{y: 330}}
loading={loading}
/>
{/* <Pagination {...paginationProps} className="pagination-common" /> */}
</ResultFlowResult>
</div>
</div>
</div>
)
} }
export default PriceAly; export default PriceAly;

4
src/pages/FinancialMgm/FinancialReport/OperationReport/loadable.jsx
View File

@ -268,8 +268,8 @@ function OperationReport() {
}, },
{ {
title: "单泊位应收(元)", title: "单泊位应收(元)",
dataIndex: "agio",
key: "agio",
dataIndex: "berth_amount",
key: "berth_amount",
align: "center", align: "center",
}, },
{ {

4
src/pages/FinancialMgm/FinancialReport/PdaStat/loadable.jsx
View File

@ -352,7 +352,7 @@ function PdaStat() {
if (parseInt(res?.status) === 20000) { if (parseInt(res?.status) === 20000) {
setData({ setData({
data: res?.data?.list || [], data: res?.data?.list || [],
total: res?.data?.total || 0,
total: res?.total || 0,
}); });
setLoading(true); setLoading(true);
} else { } else {
@ -627,7 +627,7 @@ function PdaStat() {
pagination={false} pagination={false}
scroll={{ scroll={{
// x: 1300, // x: 1300,
y: "calc(100vh - 300px)",
y: "calc(100vh - 340px)",
}} }}
/> />
</div> </div>

21
src/services/DataAnalysisPrediction/ParkingIncomeAly/index.js
View File

@ -49,5 +49,26 @@ export default {
type: 'post', type: 'post',
data data
}) })
},
getArrearCityData: function(data) {
return ajax({
url: '/api/dataAnalysis/arrearsCity',
type: 'post',
data
})
},
getArrearCatchData: function(data) {
return ajax({
url: '/api/dataAnalysis/arrearsCatch',
type: 'post',
data
})
},
getArrearPriceData: function(data) {
return ajax({
url: '/api/dataAnalysis/priceAnalysis',
type: 'post',
data
})
} }
} }
Write Preview
Loading…
Cancel
Save