4 changed files with 829 additions and 13 deletions
-
101src/config/character.config.js
-
254src/pages/DataAnalysisPrediction/ParkingIncomeAly/CityIncomeAly/index.scss
-
478src/pages/DataAnalysisPrediction/ParkingIncomeAly/CityIncomeAly/loadable.jsx
-
9src/services/DataAnalysisPrediction/ParkingIncomeAly/index.js
@ -1,5 +1,259 @@ |
|||
@import "@/assets/css/mixin.scss"; |
|||
|
|||
$color-container-bg : var(--color-container-bg); |
|||
$color-user-list-bg : var(--color-user-list-bg); |
|||
$color-text : var(--color-text); |
|||
$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); |
|||
display: flex; |
|||
flex-direction: column; |
|||
.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; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.parking-bottom { |
|||
display: flex; |
|||
margin-top: 20px; |
|||
min-height: 0; |
|||
flex: 1; |
|||
.parking-item { |
|||
flex: 1; |
|||
height: 100% !important; |
|||
&:nth-child(2) { |
|||
margin: 0 20px; |
|||
} |
|||
&:last-child { |
|||
.parking-item-title { |
|||
margin-bottom: 10px; |
|||
} |
|||
} |
|||
} |
|||
.parking-item-content { |
|||
min-height: 0; |
|||
overflow-y: hidden; |
|||
&:hover { |
|||
overflow-y: auto; |
|||
@include scrollBar(var(--color-user-list-bg), #3B97FF); |
|||
} |
|||
} |
|||
.item-tab-content { |
|||
flex: 1; |
|||
margin-top: 10px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
user-select: none; |
|||
padding-right: 10px; |
|||
.rank-item { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
height: 30px; |
|||
margin-bottom: 5px; |
|||
font-size: 16px; |
|||
.rank-left { |
|||
display: flex; |
|||
font-weight: 700; |
|||
.rank-no { |
|||
width: 25px; |
|||
height: 25px; |
|||
margin: 0 5px; |
|||
margin-right: 10px; |
|||
text-align: center; |
|||
} |
|||
} |
|||
&:nth-child(1) { |
|||
.rank-no { |
|||
background: url('@/assets/images/icon-rank-1.png') no-repeat 100% 100%; |
|||
background-size: 100% 100%; |
|||
} |
|||
} |
|||
&:nth-child(2) { |
|||
.rank-no { |
|||
background: url('@/assets/images/icon-rank-2.png') no-repeat 100% 100%; |
|||
background-size: 100% 100%; |
|||
} |
|||
} |
|||
&:nth-child(3) { |
|||
.rank-no { |
|||
background: url('@/assets/images/icon-rank-3.png') no-repeat 100% 100%; |
|||
background-size: 100% 100%; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -1,15 +1,469 @@ |
|||
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 CityIncomeAly() { |
|||
return <div>CityIncomeAly</div> |
|||
import React, { useState, useRef, useEffect } from "react" |
|||
import { Select, Input, Button, Table, message, Pagination, DatePicker, Cascader, Tooltip } from "antd" |
|||
import { dictionary } from "@/config/common" |
|||
import ReactEcharts from "echarts-for-react" |
|||
import { barChartOption, pieChartOption } from "@/config/character.config" |
|||
import utils from "@/config/utils" |
|||
import ajax from "@/services" |
|||
import moment from "moment" |
|||
import './index.scss' |
|||
|
|||
function CityIncomeAly(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 [barOption, setBarOption] = useState({...barChartOption}) |
|||
const [ysPieChartOption, setYsPieChartOption] = useState({...pieChartOption}) |
|||
const [ssPieChartOption, setSsPieChartOption] = useState({...pieChartOption}) |
|||
const [rankData, setRankData] = useState([]) |
|||
const [areaList, setAreaList] = useState([]) |
|||
const [Yunying, setYunying] = useState([]) |
|||
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.getCityRevenueAlyData({...formData}).then(res => { |
|||
if (res.status == 20000) { |
|||
initBarChart([...res.data.trend]) |
|||
initPieChart([...res.data.ysAmount], 'ys' , '元') |
|||
initPieChart([...res.data.ssAmount], 'ss', '元') |
|||
setRankData([...res.data.rank]) |
|||
} |
|||
setLoading(false) |
|||
}) |
|||
} |
|||
|
|||
const initBarChart = (data) => { |
|||
setBarOption({ |
|||
...barChartOption, |
|||
xAxis: { |
|||
...barChartOption.xAxis, |
|||
data: [...data.map(item => item.name)] |
|||
}, |
|||
yAxis: { |
|||
...barChartOption.yAxis, |
|||
axisLabel: { |
|||
...barChartOption.yAxis.axisLabel, |
|||
formatter: '{value} 元' |
|||
} |
|||
}, |
|||
series: [ |
|||
{ |
|||
...barChartOption.series[0], |
|||
name: '应收', |
|||
data: [...data.map(item => item.ys)] |
|||
}, |
|||
{ |
|||
...barChartOption.series[1], |
|||
name: '实收', |
|||
data: [...data.map(item => item.ss)] |
|||
} |
|||
] |
|||
}) |
|||
} |
|||
|
|||
const initPieChart = (data, chartName, unit) => { |
|||
let total = 0 |
|||
data.map((item) => { |
|||
total += item.value |
|||
}) |
|||
if (chartName == 'ys') { |
|||
setYsPieChartOption({ |
|||
...ysPieChartOption, |
|||
title: { |
|||
...ysPieChartOption.title, |
|||
text: `总应收金额：${utils.parseFormatNum(total)}（${unit}）` |
|||
}, |
|||
tooltip: { |
|||
...ysPieChartOption.tooltip, |
|||
formatter: (params) => { |
|||
return ` |
|||
<div> |
|||
${params.marker} |
|||
${params.name}: |
|||
|
|||
${utils.parseFormatNum(params?.value || 0)} |
|||
${unit} |
|||
</div> |
|||
` |
|||
} |
|||
}, |
|||
series: [ |
|||
{ |
|||
...ysPieChartOption.series[0], |
|||
data: data |
|||
} |
|||
] |
|||
}) |
|||
} else { |
|||
setSsPieChartOption({ |
|||
...ssPieChartOption, |
|||
title: { |
|||
...ssPieChartOption.title, |
|||
text: `总实收金额：${utils.parseFormatNum(total)}（${unit}）` |
|||
}, |
|||
tooltip: { |
|||
...ssPieChartOption.tooltip, |
|||
formatter: (params) => { |
|||
return ` |
|||
<div> |
|||
${params.marker} |
|||
${params.name}: |
|||
|
|||
${utils.parseFormatNum(params?.value || 0)} |
|||
${unit} |
|||
</div> |
|||
` |
|||
} |
|||
}, |
|||
series: [ |
|||
{ |
|||
...ssPieChartOption.series[0], |
|||
data: data |
|||
} |
|||
] |
|||
}) |
|||
} |
|||
} |
|||
|
|||
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="parking-item"> |
|||
<div className="parking-item-title">订单收入对比</div> |
|||
<div className="parking-item-content"> |
|||
<ReactEcharts |
|||
option={barOption} |
|||
style={{ overflow: "hidden" }} |
|||
/> |
|||
</div> |
|||
</div> |
|||
<div className="parking-bottom"> |
|||
<div className="parking-item"> |
|||
<div className="parking-item-title">应收金额对比</div> |
|||
<div className="parking-item-content"> |
|||
<ReactEcharts |
|||
option={ysPieChartOption} |
|||
style={{ overflow: "hidden" }} |
|||
/> |
|||
</div> |
|||
</div> |
|||
<div className="parking-item"> |
|||
<div className="parking-item-title">实收金额对比</div> |
|||
<div className="parking-item-content"> |
|||
<ReactEcharts |
|||
option={ssPieChartOption} |
|||
style={{ overflow: "hidden" }} |
|||
/> |
|||
</div> |
|||
</div> |
|||
|
|||
<div className="parking-item"> |
|||
<div className="parking-item-title">金额实缴率排行榜</div> |
|||
<div className="parking-item-content"> |
|||
<div className="item-tab-content"> |
|||
{ |
|||
rankData && rankData.map((item, index) => ( |
|||
<div className="rank-item" key={index}> |
|||
<div className="rank-left"> |
|||
<div className="rank-no">{index+1 > 3 ? (index+1) : ''}</div> |
|||
<div className="rank-label">{item.name}</div> |
|||
</div> |
|||
<div className="rank-right"> |
|||
<div className="rank-value">{utils.parseFormatNum(item.value || 0)}</div> |
|||
</div> |
|||
</div> |
|||
)) |
|||
} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
) |
|||
} |
|||
|
|||
export default CityIncomeAly; |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue