18 changed files with 2833 additions and 182 deletions
-
BINsrc/assets/images/fin_ddjehz.png
-
BINsrc/assets/images/fin_sf.png
-
BINsrc/assets/images/fin_tsf.png
-
BINsrc/assets/images/fin_xghdd.png
-
BINsrc/assets/images/fin_yh.png
-
BINsrc/assets/images/fin_ys.png
-
177src/pages/FinancialMgm/FinancialReport/OperationReport/index.scss
-
362src/pages/FinancialMgm/FinancialReport/OperationReport/loadable.jsx
-
409src/pages/FinancialMgm/FinancialReport/ParkingIncomeReport/index.scss
-
870src/pages/FinancialMgm/FinancialReport/ParkingIncomeReport/loadable.jsx
-
298src/pages/FinancialMgm/FinancialReport/PayChannelStat/index.scss
-
709src/pages/FinancialMgm/FinancialReport/PayChannelStat/loadable.jsx
-
31src/pages/FinancialMgm/FinancialReport/PaySummaryReport/index.scss
-
7src/pages/FinancialMgm/FinancialReport/PaySummaryReport/loadable.jsx
-
50src/pages/FinancialMgm/FinancialReport/PdaStat/index.scss
-
34src/pages/FinancialMgm/FinancialReport/PdaStat/loadable.jsx
-
31src/pages/FinancialMgm/FinancialReport/PreOrderReport/index.scss
-
3src/pages/FinancialMgm/FinancialReport/PreOrderReport/loadable.jsx
|
After Width: 80 | Height: 80 | Size: 3.8 KiB |
|
After Width: 80 | Height: 80 | Size: 4.0 KiB |
|
After Width: 80 | Height: 80 | Size: 4.2 KiB |
|
After Width: 80 | Height: 80 | Size: 4.1 KiB |
|
After Width: 80 | Height: 80 | Size: 3.8 KiB |
|
After Width: 80 | Height: 80 | Size: 4.6 KiB |
@ -1,15 +1,869 @@ |
|||
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 { |
|||
message, |
|||
Pagination, |
|||
Table, |
|||
Select, |
|||
Input, |
|||
Popover, |
|||
Modal, |
|||
AutoComplete, |
|||
Tooltip, |
|||
Checkbox, |
|||
Form, |
|||
DatePicker, |
|||
} from "antd"; |
|||
import { dictionary, utils } from "@/config/common"; |
|||
import moment from "moment"; |
|||
import { |
|||
FunnelPlotOutlined, |
|||
CloseOutlined, |
|||
InfoCircleOutlined, |
|||
DownOutlined, |
|||
UpOutlined, |
|||
} from "@ant-design/icons"; |
|||
import ajax from "@/services"; |
|||
// 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 { ResultFlow } from "@/components"; |
|||
import "./index.scss"; |
|||
import FinSr from "@/assets/images/fin_sr.png"; |
|||
import Finyh from "@/assets/images/fin_yh.png"; |
|||
import Fintk from "@/assets/images/fin_tk.png"; |
|||
// import { useLocation } from "react-router-dom"; |
|||
const { RangePicker } = DatePicker; |
|||
const { TextArea } = Input; |
|||
function ParkingIncomeReport() { |
|||
return <div>ParkingIncomeReport</div> |
|||
const [form] = Form.useForm(); |
|||
//页面检索-重复 |
|||
const formdata = { |
|||
sell_name: "", //商户 |
|||
head_name: "", //发票抬头 |
|||
order_type: "", //发票类型 |
|||
headname: "", //停车场名称 |
|||
start_time: moment().startOf("day").format("YYYY-MM-DD"), |
|||
end_time: moment().endOf("day").format("YYYY-MM-DD"), |
|||
pn: "1", |
|||
page_size: "15", |
|||
}; |
|||
//抬头类型 |
|||
const Headtype = [ |
|||
{ |
|||
label: "个人", |
|||
value: "1", |
|||
}, |
|||
{ |
|||
label: "企业", |
|||
value: "2", |
|||
}, |
|||
]; |
|||
//业务类型 |
|||
const Bussinss = [ |
|||
{ |
|||
label: "停车支付订单", |
|||
value: "1", |
|||
}, |
|||
{ |
|||
label: "停车卡订单", |
|||
value: "2", |
|||
}, |
|||
]; |
|||
//图新展示 |
|||
const tabt = [ |
|||
{ |
|||
text: "收入合计", |
|||
value: "40988.00", |
|||
icon: FinSr, |
|||
tip: "停车支付订单应收金额总计（含预付金额）", |
|||
}, |
|||
|
|||
{ |
|||
text: "优惠卷合计", |
|||
value: "40988.00", |
|||
icon: Finyh, |
|||
tip: "停车支付订单中优惠券金额总计", |
|||
}, |
|||
{ |
|||
text: "退款合计", |
|||
value: "00.00", |
|||
icon: Fintk, |
|||
tip: "退优惠金额+退实付金额的值累加", |
|||
}, |
|||
]; |
|||
//展开显示数据 |
|||
const Showdatat = [ |
|||
{ |
|||
text: "收入合计", |
|||
value: "40988.00", |
|||
valuet: "0.00", |
|||
}, |
|||
{ |
|||
text: "优惠合计", |
|||
value: "40988.00", |
|||
valuet: "0.00", |
|||
}, |
|||
{ |
|||
text: "退款合计", |
|||
valuet: "0.00", |
|||
value: "40988.00", |
|||
}, |
|||
{ |
|||
text: "单泊位应收", |
|||
value: "40988.00", |
|||
valuet: "0.00", |
|||
class: "cyd", |
|||
tip: "车场收入合计/泊位数", |
|||
}, |
|||
]; |
|||
const col = [ |
|||
{ |
|||
title: "日期", |
|||
dataIndex: "create_time", |
|||
key: "create_time", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: "区域", |
|||
dataIndex: "qy", |
|||
key: "qy", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: "所属商户", |
|||
dataIndex: "sell_name", |
|||
key: "sell_name", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: "停车场", |
|||
align: "center", |
|||
children: [ |
|||
{ |
|||
title: "车场名称", |
|||
dataIndex: "ccmc", |
|||
key: "ccmc", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: "泊位数", |
|||
dataIndex: "bws", |
|||
key: "bws", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: "车场类型", |
|||
dataIndex: "cclx", |
|||
key: "cclx", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: "商用状态", |
|||
dataIndex: "syzt", |
|||
key: "syzt", |
|||
align: "center", |
|||
}, |
|||
], |
|||
}, |
|||
{ |
|||
title: ( |
|||
<span> |
|||
停车费收入 |
|||
<Tooltip |
|||
placement="topLeft" |
|||
title={ |
|||
<p>数据来源：停车支付订单，按支付时间统计的值（含预付金额）</p> |
|||
} |
|||
> |
|||
<i>?</i> |
|||
</Tooltip> |
|||
</span> |
|||
), |
|||
align: "center", |
|||
children: [ |
|||
{ |
|||
title: "收入合计(元)", |
|||
dataIndex: "sr", |
|||
key: "sr", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: "优惠券金额(元)", |
|||
dataIndex: "yhjje", |
|||
key: "yhjje", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: "实付金额(元)", |
|||
dataIndex: "sf", |
|||
key: "sf", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: "单泊位收入(元)", |
|||
dataIndex: "dbwje", |
|||
key: "dbwje", |
|||
align: "center", |
|||
}, |
|||
], |
|||
}, |
|||
|
|||
{ |
|||
title: ( |
|||
<span> |
|||
停车费退款 |
|||
<Tooltip |
|||
placement="topLeft" |
|||
title={ |
|||
<p> |
|||
数据来源：退款成功或异常处理退款处理完成时间在筛选范围的停车订单 |
|||
</p> |
|||
} |
|||
> |
|||
<i>?</i> |
|||
</Tooltip> |
|||
</span> |
|||
), |
|||
align: "center", |
|||
children: [ |
|||
{ |
|||
title: "退款合计(元)", |
|||
dataIndex: "tk", |
|||
key: "tk", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: "退款优惠金额(元)", |
|||
dataIndex: "tyh", |
|||
key: "tyh", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: "退实付(元)", |
|||
dataIndex: "tdf", |
|||
key: "tdf", |
|||
align: "center", |
|||
}, |
|||
], |
|||
}, |
|||
]; |
|||
//检索 |
|||
const [FormData, setFormData] = useState(formdata); |
|||
//检索2 |
|||
const [FormDatas, setFormDatas] = useState(formdata); |
|||
//页码状态 |
|||
const [loading, setLoading] = useState(false); |
|||
//页面数据 |
|||
const [Data, setData] = useState({ |
|||
data: [], |
|||
total: 0, |
|||
}); |
|||
const [Picker, setPicker] = useState(""); |
|||
//自动填充 |
|||
const [options, setOptions] = useState([]); |
|||
const [Open, setOpen] = useState(true); |
|||
//筛选 |
|||
const [selectArr, setSelectArr] = useState([]); |
|||
//是否展开显示 |
|||
const [Show, setShow] = useState(false); |
|||
const column = (arr) => { |
|||
let copr = []; |
|||
if (arr.length) { |
|||
col.forEach((ele, index) => { |
|||
if (ele.children) { |
|||
var lisr = []; |
|||
let bool = false; |
|||
ele.children.forEach((val) => { |
|||
if (!arr.includes(val.key)) { |
|||
lisr.push(val); |
|||
bool = true; |
|||
} |
|||
}); |
|||
if (bool) { |
|||
copr.push({ ...ele, children: [...lisr] }); |
|||
} |
|||
} else { |
|||
if (!arr.includes(ele.key)) { |
|||
copr.push(ele); |
|||
} |
|||
} |
|||
}); |
|||
} else { |
|||
copr = col; |
|||
} |
|||
return [...copr]; |
|||
}; |
|||
const onSearch = (searchText) => { |
|||
console.log(searchText); |
|||
setOptions([ |
|||
{ |
|||
value: "1", |
|||
label: "全部", |
|||
}, |
|||
{ |
|||
value: "2", |
|||
label: "错位共享停车场", |
|||
}, |
|||
{ |
|||
value: "3", |
|||
label: "公共事业集团", |
|||
}, |
|||
{ |
|||
value: "4", |
|||
label: "社会类停车场", |
|||
}, |
|||
{ |
|||
value: "5", |
|||
label: "智慧互通", |
|||
}, |
|||
]); |
|||
// ajax.ElectInvoice.getInvoice({ searchText }).then( |
|||
// (res) => { |
|||
// if (parseInt(res?.status) === 20000) { |
|||
// setData({ |
|||
// data: res?.data.list || {}, |
|||
// total: res.data.total || 0, |
|||
// }); |
|||
// setLoading(true); |
|||
// } else { |
|||
// message.error(res?.message); |
|||
// } |
|||
// setLoading(true); |
|||
// }, |
|||
// (err) => { |
|||
// console.log(err); |
|||
// setLoading(true); |
|||
// } |
|||
// ); |
|||
}; |
|||
//时间 |
|||
const onChangeData = (dates, dataString) => { |
|||
if (Picker == "week") { |
|||
setFormData({ |
|||
...FormData, |
|||
start_time: moment(dates[0]).day(1).format("YYYY-MM-DD"), |
|||
end_time: moment(dates[1]).day(7).format("YYYY-MM-DD"), |
|||
}); |
|||
} else { |
|||
setFormData({ |
|||
...FormData, |
|||
start_time: dataString[0], |
|||
end_time: dataString[1], |
|||
}); |
|||
} |
|||
}; |
|||
//页码 |
|||
function onShowSizeChange(pn, pn_size) { |
|||
setFormData({ |
|||
...FormData, |
|||
pn: pn, |
|||
page_size: pn_size, |
|||
}); |
|||
setFormDatas({ |
|||
...FormDatas, |
|||
pn: pn, |
|||
page_size: pn_size, |
|||
}); |
|||
} |
|||
const onChange = (eal) => { |
|||
var e = eal; |
|||
var are = JSON.parse(JSON.stringify(selectArr)); |
|||
if (are.includes(e)) { |
|||
are.forEach((ele, index) => { |
|||
if (ele == e) { |
|||
are.splice(index, 1); |
|||
} |
|||
}); |
|||
} else { |
|||
are.push(e); |
|||
} |
|||
setSelectArr([...are]); |
|||
}; |
|||
|
|||
const SelectCol = () => { |
|||
return ( |
|||
<div className="selectcolpark"> |
|||
<p className="tirl">隐藏列</p> |
|||
{col.map((ele) => { |
|||
if (ele.children) { |
|||
return ele.children.map((val) => { |
|||
return ( |
|||
<div className="licd" key={val.key}> |
|||
<Checkbox |
|||
value={selectArr.includes(val.key)} |
|||
onChange={() => onChange(val.key)} |
|||
disabled={ |
|||
selectArr.length == 13 && !selectArr.includes(val.key) |
|||
} |
|||
> |
|||
{val.title} |
|||
</Checkbox> |
|||
</div> |
|||
); |
|||
}); |
|||
} else { |
|||
return ( |
|||
<div className="licd" key={ele.key}> |
|||
<Checkbox |
|||
value={selectArr.includes(ele.key)} |
|||
onChange={() => onChange(ele.key)} |
|||
disabled={ |
|||
selectArr.length == 13 && !selectArr.includes(ele.key) |
|||
} |
|||
> |
|||
{ele.title} |
|||
</Checkbox> |
|||
</div> |
|||
); |
|||
} |
|||
})} |
|||
</div> |
|||
); |
|||
}; |
|||
//获取页面显示数据 |
|||
const getData = (data) => { |
|||
setLoading(false); |
|||
ajax.ElectInvoice.getInvoiceMess({ ...data }).then( |
|||
(res) => { |
|||
if (parseInt(res?.status) === 20000) { |
|||
setData({ |
|||
data: res?.data || {}, |
|||
total: res.total || 0, |
|||
}); |
|||
setLoading(true); |
|||
} else { |
|||
message.error(res?.message); |
|||
} |
|||
setLoading(true); |
|||
}, |
|||
(err) => { |
|||
console.log(err); |
|||
setLoading(true); |
|||
} |
|||
); |
|||
}; |
|||
useEffect(() => { |
|||
getData(FormDatas); |
|||
//调用接口 |
|||
}, [FormDatas]); |
|||
|
|||
return ( |
|||
<div className="ParkingIncomeReport"> |
|||
{Open && ( |
|||
<p className="hfts"> |
|||
<InfoCircleOutlined /> |
|||
停车收入报表，按支付时间统计收入和退款信息，异常处理订单数据不影响本报表；本报表适用于财务人员了解车场收入情况。 |
|||
<span |
|||
className="adfg" |
|||
onClick={() => { |
|||
setOpen(false); |
|||
}} |
|||
> |
|||
<CloseOutlined /> |
|||
</span> |
|||
</p> |
|||
)} |
|||
|
|||
<div className="body_cenf"> |
|||
<div className="left_search"> |
|||
<div className="hrestit">查询条件</div> |
|||
<div className="form_item"> |
|||
<div className="labb"> |
|||
日期 |
|||
<div className="daf"> |
|||
<Select |
|||
value={Picker} |
|||
// style={{ |
|||
// width: "100%", |
|||
// }} |
|||
placeholder="请选择" |
|||
options={[ |
|||
{ |
|||
value: "", |
|||
label: "日", |
|||
}, |
|||
{ |
|||
value: "week", |
|||
label: "周", |
|||
}, |
|||
{ |
|||
value: "month", |
|||
label: "月", |
|||
}, |
|||
{ |
|||
value: "year", |
|||
label: "年", |
|||
}, |
|||
]} |
|||
onChange={(e) => setPicker(e)} |
|||
/> |
|||
</div> |
|||
</div> |
|||
<div className="inputs"> |
|||
<RangePicker |
|||
value={[ |
|||
FormData.start_time ? moment(FormData.start_time) : null, |
|||
FormData.end_time ? moment(FormData.end_time) : null, |
|||
]} |
|||
picker={Picker} |
|||
// showTime={true} |
|||
onChange={(dates, dataString) => |
|||
onChangeData(dates, dataString) |
|||
} |
|||
/> |
|||
</div> |
|||
</div> |
|||
<div className="form_item"> |
|||
<span className="lab">区域</span> |
|||
<div className="inputs"> |
|||
<Select |
|||
value={FormData.sell_name} |
|||
style={{ |
|||
width: "100%", |
|||
}} |
|||
placeholder="请选择" |
|||
options={[ |
|||
{ |
|||
value: "1", |
|||
label: "全部", |
|||
}, |
|||
{ |
|||
value: "2", |
|||
label: "错位共享停车场", |
|||
}, |
|||
{ |
|||
value: "3", |
|||
label: "公共事业集团", |
|||
}, |
|||
{ |
|||
value: "4", |
|||
label: "社会类停车场", |
|||
}, |
|||
{ |
|||
value: "5", |
|||
label: "智慧互通", |
|||
}, |
|||
]} |
|||
onChange={(e) => |
|||
setFormData({ |
|||
...FormData, |
|||
sell_name: e, |
|||
}) |
|||
} |
|||
/> |
|||
</div> |
|||
</div> |
|||
<div className="form_item"> |
|||
<span className="lab">所属商户</span> |
|||
<div className="inputs"> |
|||
<Select |
|||
value={FormData.sell_name} |
|||
style={{ |
|||
width: "100%", |
|||
}} |
|||
placeholder="请选择" |
|||
options={[ |
|||
{ |
|||
value: "1", |
|||
label: "全部", |
|||
}, |
|||
{ |
|||
value: "2", |
|||
label: "错位共享停车场", |
|||
}, |
|||
{ |
|||
value: "3", |
|||
label: "公共事业集团", |
|||
}, |
|||
{ |
|||
value: "4", |
|||
label: "社会类停车场", |
|||
}, |
|||
{ |
|||
value: "5", |
|||
label: "智慧互通", |
|||
}, |
|||
]} |
|||
onChange={(e) => |
|||
setFormData({ |
|||
...FormData, |
|||
sell_name: e, |
|||
}) |
|||
} |
|||
/> |
|||
</div> |
|||
</div> |
|||
<div className="form_item"> |
|||
<span className="lab">停车场</span> |
|||
<div className="inputs"> |
|||
<AutoComplete |
|||
value={FormData.headname} |
|||
style={{ |
|||
width: "100%", |
|||
}} |
|||
placeholder="输入路段名称" |
|||
options={options} |
|||
onSearch={onSearch} |
|||
onChange={(e) => { |
|||
console.log(e); |
|||
setFormData({ |
|||
...FormData, |
|||
headname: e, |
|||
}); |
|||
}} |
|||
/> |
|||
</div> |
|||
</div> |
|||
<div className="form_item"> |
|||
<span className="lab">车场类型</span> |
|||
<div className="inputs"> |
|||
<Select |
|||
value={FormData.sell_name} |
|||
style={{ |
|||
width: "100%", |
|||
}} |
|||
placeholder="请选择" |
|||
options={[ |
|||
{ |
|||
value: "", |
|||
label: "全部", |
|||
}, |
|||
{ |
|||
value: "2", |
|||
label: "路内车场", |
|||
}, |
|||
{ |
|||
value: "3", |
|||
label: "路外车场", |
|||
}, |
|||
]} |
|||
onChange={(e) => |
|||
setFormData({ |
|||
...FormData, |
|||
sell_name: e, |
|||
}) |
|||
} |
|||
/> |
|||
</div> |
|||
</div> |
|||
<div className="form_item"> |
|||
<span className="lab">商用状态</span> |
|||
<div className="inputs"> |
|||
<Select |
|||
value={FormData.sell_name} |
|||
style={{ |
|||
width: "100%", |
|||
}} |
|||
placeholder="请选择" |
|||
options={[ |
|||
{ |
|||
value: "1", |
|||
label: "待上线", |
|||
}, |
|||
{ |
|||
value: "2", |
|||
label: "商用", |
|||
}, |
|||
{ |
|||
value: "3", |
|||
label: "试运行", |
|||
}, |
|||
{ |
|||
value: "4", |
|||
label: "下线", |
|||
}, |
|||
{ |
|||
value: "5", |
|||
label: "废弃", |
|||
}, |
|||
]} |
|||
onChange={(e) => |
|||
setFormData({ |
|||
...FormData, |
|||
sell_name: e, |
|||
}) |
|||
} |
|||
/> |
|||
</div> |
|||
</div> |
|||
<div className="but_on"> |
|||
<span |
|||
className="sear_res" |
|||
onClick={() => { |
|||
var reset = formdata; |
|||
setFormData(reset); |
|||
setFormDatas(reset); |
|||
}} |
|||
> |
|||
重置 |
|||
</span> |
|||
<span |
|||
className={"sear_ser"} |
|||
onClick={() => { |
|||
setFormDatas({ ...FormData }); |
|||
}} |
|||
> |
|||
查询 |
|||
</span> |
|||
<span |
|||
className={"sear_ser"} |
|||
onClick={() => { |
|||
// setFormDatas({ ...FormData }); |
|||
}} |
|||
> |
|||
导出 |
|||
</span> |
|||
</div> |
|||
</div> |
|||
<div className="right_tab"> |
|||
<div className="colfour"> |
|||
{tabt.map((ele) => { |
|||
return ( |
|||
<div className="shujutj" key={ele.text}> |
|||
<img src={ele.icon} alt="" /> |
|||
<div className="contr"> |
|||
<span className="toopl"> |
|||
{ele.text} |
|||
<Tooltip placement="topLeft" title={<p>{ele.tip}</p>}> |
|||
<i>?</i> |
|||
</Tooltip> |
|||
</span> |
|||
<p className="money"> |
|||
{ele.value} |
|||
<span>元</span> |
|||
</p> |
|||
</div> |
|||
</div> |
|||
); |
|||
})} |
|||
<div |
|||
onClick={() => { |
|||
setShow(!Show); |
|||
}} |
|||
className={Show ? "showdetaild bleu" : "showdetaild"} |
|||
> |
|||
{Show ? "收起" : "展开"} |
|||
<span className="span"> |
|||
{Show ? <UpOutlined /> : <DownOutlined />} |
|||
</span> |
|||
</div> |
|||
</div> |
|||
{Show ? ( |
|||
<div className="detailroad"> |
|||
<div className="twosa"> |
|||
<div className="fel">路内</div> |
|||
<div className="roadcard"> |
|||
{Showdatat.map((ele) => { |
|||
return ( |
|||
<div |
|||
className={ele.class ? `scards ${ele.class}` : "scards"} |
|||
key={ele.text + "ln"} |
|||
> |
|||
<div className="contr"> |
|||
<span className="toopl"> |
|||
{ele.text} |
|||
{ele.tip && ( |
|||
<Tooltip |
|||
placement="topLeft" |
|||
title={<p>{ele.tip}</p>} |
|||
> |
|||
<i>?</i> |
|||
</Tooltip> |
|||
)} |
|||
</span> |
|||
<p className="money"> |
|||
{ele.value} |
|||
<span>元</span> |
|||
</p> |
|||
</div> |
|||
</div> |
|||
); |
|||
})} |
|||
</div> |
|||
</div> |
|||
<div className="twosa"> |
|||
<div className="fel">路外</div> |
|||
<div className="roadcard"> |
|||
{Showdatat.map((ele) => { |
|||
return ( |
|||
<div |
|||
className={ele.class ? `scards ${ele.class}` : "scards"} |
|||
key={ele.text + "lw"} |
|||
> |
|||
<div className="contr"> |
|||
<span className="toopl"> |
|||
{ele.text} |
|||
{ele.tip && ( |
|||
<Tooltip |
|||
placement="topLeft" |
|||
title={<p>{ele.tip}</p>} |
|||
> |
|||
<i>?</i> |
|||
</Tooltip> |
|||
)} |
|||
</span> |
|||
<p className="money"> |
|||
{ele.valuet} |
|||
<span>元</span> |
|||
</p> |
|||
</div> |
|||
</div> |
|||
); |
|||
})} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
) : ( |
|||
"" |
|||
)} |
|||
<ResultFlow |
|||
hasLoad={true} |
|||
loading={loading} |
|||
resultData={Data.data} |
|||
message={"暂无数据"} |
|||
> |
|||
<div className="scrplltab"> |
|||
<Tooltip |
|||
placement="leftBottom" |
|||
title={SelectCol} |
|||
trigger={"click"} |
|||
> |
|||
<div className={Show ? "poxi showas" : "poxi"} title="隐藏列"> |
|||
<FunnelPlotOutlined className={"colsa"} /> |
|||
</div> |
|||
</Tooltip> |
|||
<div className="table_raps"> |
|||
<Table |
|||
className="yisa_tabled" |
|||
columns={column(selectArr)} |
|||
rowKey={(record) => record.id} |
|||
dataSource={Data.data} |
|||
pagination={false} |
|||
scroll={{ |
|||
// x: 1300, |
|||
y: "calc(100vh - 400px)", |
|||
}} |
|||
/> |
|||
</div> |
|||
</div> |
|||
|
|||
<div> |
|||
<Pagination |
|||
className="pagination-common" |
|||
showSizeChanger={true} |
|||
showQuickJumper={true} |
|||
// showTotal={() => `共 ${total_records} 条`} |
|||
total={Data.total} |
|||
current={FormData.pn} |
|||
pageSize={FormData.page_size} |
|||
pageSizeOptions={dictionary?.pageSizeOptions} |
|||
onChange={onShowSizeChange} |
|||
onShowSizeChange={onShowSizeChange} |
|||
/> |
|||
</div> |
|||
</ResultFlow> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
); |
|||
} |
|||
|
|||
export default ParkingIncomeReport; |
|||
@ -1,15 +1,708 @@ |
|||
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 { |
|||
message, |
|||
Pagination, |
|||
Table, |
|||
Select, |
|||
Input, |
|||
Popover, |
|||
Modal, |
|||
Progress, |
|||
Tooltip, |
|||
Checkbox, |
|||
Form, |
|||
DatePicker, |
|||
} from "antd"; |
|||
import { dictionary, utils } from "@/config/common"; |
|||
import moment from "moment"; |
|||
import { |
|||
FunnelPlotOutlined, |
|||
CloseOutlined, |
|||
InfoCircleOutlined, |
|||
DownOutlined, |
|||
UpOutlined, |
|||
} from "@ant-design/icons"; |
|||
import ajax from "@/services"; |
|||
// 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 { ResultFlow } from "@/components"; |
|||
import "./index.scss"; |
|||
import FinSr from "@/assets/images/fin_sr.png"; |
|||
import Finyh from "@/assets/images/fin_yh.png"; |
|||
import Fintk from "@/assets/images/fin_tk.png"; |
|||
// import { useLocation } from "react-router-dom"; |
|||
const { RangePicker } = DatePicker; |
|||
const { TextArea } = Input; |
|||
function PayChannelStat() { |
|||
return <div>PayChannelStat</div> |
|||
const [form] = Form.useForm(); |
|||
//页面检索-重复 |
|||
const formdata = { |
|||
sell_name: "", //商户 |
|||
head_name: "", //发票抬头 |
|||
order_type: "", //发票类型 |
|||
headname: "", //停车场名称 |
|||
start_time: moment().startOf("day").format("YYYY-MM-DD"), |
|||
end_time: moment().endOf("day").format("YYYY-MM-DD"), |
|||
pn: "1", |
|||
page_size: "15", |
|||
}; |
|||
//抬头类型 |
|||
|
|||
const col = [ |
|||
{ |
|||
title: ( |
|||
<span> |
|||
退款合计 |
|||
<Tooltip |
|||
placement="topLeft" |
|||
title={<p>停车退款+预约停车退款+异常支付退款+重复支付退款</p>} |
|||
> |
|||
<i>?</i> |
|||
</Tooltip> |
|||
</span> |
|||
), |
|||
dataIndex: "srhj", |
|||
key: "srhj", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: ( |
|||
<span> |
|||
停车收入 |
|||
<Tooltip |
|||
placement="topLeft" |
|||
title={ |
|||
<p> |
|||
按支付时间在统计日期的停车支付订单实付金额之和（含预付抵扣金额） |
|||
</p> |
|||
} |
|||
> |
|||
<i>?</i> |
|||
</Tooltip> |
|||
</span> |
|||
), |
|||
dataIndex: "tcsr", |
|||
key: "tcsr", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: ( |
|||
<span> |
|||
停车退款 |
|||
<Tooltip |
|||
placement="topLeft" |
|||
title={<p>按退款时间在统计日期停车记录中实付退款金额之和</p>} |
|||
> |
|||
<i>?</i> |
|||
</Tooltip> |
|||
</span> |
|||
), |
|||
dataIndex: "tctk", |
|||
key: "tctk", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: ( |
|||
<span> |
|||
停车卡收入 |
|||
<Tooltip |
|||
placement="topLeft" |
|||
title={<p>按支付时间在统计日期的停车卡实付金额之和</p>} |
|||
> |
|||
<i>?</i> |
|||
</Tooltip> |
|||
</span> |
|||
), |
|||
dataIndex: "tcksr", |
|||
key: "tcksr", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: ( |
|||
<span> |
|||
预约停车收入 |
|||
<Tooltip |
|||
placement="topLeft" |
|||
title={<p>按支付时间在统计日期的停车预约实付金额之和</p>} |
|||
> |
|||
<i>?</i> |
|||
</Tooltip> |
|||
</span> |
|||
), |
|||
dataIndex: "yytcsr", |
|||
key: "yytcsr", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: ( |
|||
<span> |
|||
预约停车退款 |
|||
<Tooltip |
|||
placement="topLeft" |
|||
title={<p>按退款时间在统计日期的预约停车退款金额之和</p>} |
|||
> |
|||
<i>?</i> |
|||
</Tooltip> |
|||
</span> |
|||
), |
|||
dataIndex: "yytctk", |
|||
key: "yytctk", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: ( |
|||
<span> |
|||
错峰停车收入 |
|||
<Tooltip |
|||
placement="topLeft" |
|||
title={<p>按支付时间在统计日期的错锋订单实付金额之和</p>} |
|||
> |
|||
<i>?</i> |
|||
</Tooltip> |
|||
</span> |
|||
), |
|||
dataIndex: "cftcsr", |
|||
key: "cftcsr", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: ( |
|||
<span> |
|||
异常支付 |
|||
<Tooltip |
|||
placement="topLeft" |
|||
title={<p>按支付时间在统计日期的异常支付的支付金额之和</p>} |
|||
> |
|||
<i>?</i> |
|||
</Tooltip> |
|||
</span> |
|||
), |
|||
dataIndex: "yczf", |
|||
key: "yczf", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: ( |
|||
<span> |
|||
异常支付退款 |
|||
<Tooltip |
|||
placement="topLeft" |
|||
title={<p>按退款时间在统计日期的异常支付的退款金额之和</p>} |
|||
> |
|||
<i>?</i> |
|||
</Tooltip> |
|||
</span> |
|||
), |
|||
dataIndex: "异常支付退款", |
|||
key: "异常支付退款", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: ( |
|||
<span> |
|||
重复支付 |
|||
<Tooltip |
|||
placement="topLeft" |
|||
title={<p>按支付时间在统计日期的重复支付的支付金额之和</p>} |
|||
> |
|||
<i>?</i> |
|||
</Tooltip> |
|||
</span> |
|||
), |
|||
dataIndex: "cfzf", |
|||
key: "cfzf", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: ( |
|||
<span> |
|||
重复支付退款 |
|||
<Tooltip |
|||
placement="topLeft" |
|||
title={<p>按退款时间在统计日期的重复支付的退款金额之和</p>} |
|||
> |
|||
<i>?</i> |
|||
</Tooltip> |
|||
</span> |
|||
), |
|||
dataIndex: "cfzftk", |
|||
key: "cfzftk", |
|||
align: "center", |
|||
}, |
|||
]; |
|||
const Procc = [ |
|||
{ |
|||
text: "总收入", |
|||
value: 100, |
|||
num: 100, |
|||
color: "#222", |
|||
}, |
|||
{ |
|||
text: "微信", |
|||
value: 20, |
|||
num: 100, |
|||
color: "#28C445", |
|||
}, |
|||
{ |
|||
text: "余额", |
|||
value: 20, |
|||
num: 100, |
|||
color: "#3AA9FF", |
|||
}, |
|||
{ |
|||
text: "车场自收", |
|||
value: 20, |
|||
num: 100, |
|||
color: "#7781E1", |
|||
}, |
|||
{ |
|||
text: "支付宝", |
|||
value: 20, |
|||
num: 100, |
|||
color: "#00A0EA", |
|||
}, |
|||
{ |
|||
text: "现金", |
|||
value: 20, |
|||
num: 100, |
|||
color: "#09D1D6", |
|||
}, |
|||
{ |
|||
text: "系统录入", |
|||
value: 20, |
|||
num: 100, |
|||
color: "#FF6978", |
|||
}, |
|||
{ |
|||
text: "招商银行", |
|||
value: 20, |
|||
num: 100, |
|||
color: "#F9712F", |
|||
}, |
|||
{ |
|||
text: "数字人民币", |
|||
value: 20, |
|||
num: 100, |
|||
color: "#F9C842", |
|||
}, |
|||
{ |
|||
text: "ETC", |
|||
value: 20, |
|||
num: 100, |
|||
color: "#9BC2D4", |
|||
}, |
|||
]; |
|||
//检索 |
|||
const [FormData, setFormData] = useState(formdata); |
|||
//检索2 |
|||
const [FormDatas, setFormDatas] = useState(formdata); |
|||
//页码状态 |
|||
const [loading, setLoading] = useState(false); |
|||
//页面数据 |
|||
const [Data, setData] = useState({ |
|||
data: [], |
|||
total: 0, |
|||
}); |
|||
const [Picker, setPicker] = useState(""); |
|||
//自动填充 |
|||
const [options, setOptions] = useState([]); |
|||
const [Open, setOpen] = useState(true); |
|||
//筛选 |
|||
const [selectArr, setSelectArr] = useState([]); |
|||
//是否展开显示 |
|||
const [Show, setShow] = useState(false); |
|||
const column = (arr) => { |
|||
let copr = []; |
|||
if (arr.length) { |
|||
col.forEach((ele, index) => { |
|||
if (ele.children) { |
|||
var lisr = []; |
|||
let bool = false; |
|||
ele.children.forEach((val) => { |
|||
if (!arr.includes(val.key)) { |
|||
lisr.push(val); |
|||
bool = true; |
|||
} |
|||
}); |
|||
if (bool) { |
|||
copr.push({ ...ele, children: [...lisr] }); |
|||
} |
|||
} else { |
|||
if (!arr.includes(ele.key)) { |
|||
copr.push(ele); |
|||
} |
|||
} |
|||
}); |
|||
} else { |
|||
copr = col; |
|||
} |
|||
return [ |
|||
{ |
|||
title: "渠道", |
|||
dataIndex: "qd", |
|||
key: "qd", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: ( |
|||
<span> |
|||
收入合计 |
|||
<Tooltip |
|||
placement="topLeft" |
|||
title={<p>停车收入+停车卡订单实收+预约订单实收+错锋订单实收</p>} |
|||
> |
|||
<i>?</i> |
|||
</Tooltip> |
|||
</span> |
|||
), |
|||
dataIndex: "srhj", |
|||
key: "srhj", |
|||
align: "center", |
|||
}, |
|||
...copr, |
|||
]; |
|||
}; |
|||
const onSearch = (searchText) => { |
|||
console.log(searchText); |
|||
setOptions([ |
|||
{ |
|||
value: "1", |
|||
label: "全部", |
|||
}, |
|||
{ |
|||
value: "2", |
|||
label: "错位共享停车场", |
|||
}, |
|||
{ |
|||
value: "3", |
|||
label: "公共事业集团", |
|||
}, |
|||
{ |
|||
value: "4", |
|||
label: "社会类停车场", |
|||
}, |
|||
{ |
|||
value: "5", |
|||
label: "智慧互通", |
|||
}, |
|||
]); |
|||
// ajax.ElectInvoice.getInvoice({ searchText }).then( |
|||
// (res) => { |
|||
// if (parseInt(res?.status) === 20000) { |
|||
// setData({ |
|||
// data: res?.data.list || {}, |
|||
// total: res.data.total || 0, |
|||
// }); |
|||
// setLoading(true); |
|||
// } else { |
|||
// message.error(res?.message); |
|||
// } |
|||
// setLoading(true); |
|||
// }, |
|||
// (err) => { |
|||
// console.log(err); |
|||
// setLoading(true); |
|||
// } |
|||
// ); |
|||
}; |
|||
//时间 |
|||
const onChangeData = (dates, dataString) => { |
|||
if (Picker == "week") { |
|||
setFormData({ |
|||
...FormData, |
|||
start_time: moment(dates[0]).day(1).format("YYYY-MM-DD"), |
|||
end_time: moment(dates[1]).day(7).format("YYYY-MM-DD"), |
|||
}); |
|||
} else { |
|||
setFormData({ |
|||
...FormData, |
|||
start_time: dataString[0], |
|||
end_time: dataString[1], |
|||
}); |
|||
} |
|||
}; |
|||
//页码 |
|||
function onShowSizeChange(pn, pn_size) { |
|||
setFormData({ |
|||
...FormData, |
|||
pn: pn, |
|||
page_size: pn_size, |
|||
}); |
|||
setFormDatas({ |
|||
...FormDatas, |
|||
pn: pn, |
|||
page_size: pn_size, |
|||
}); |
|||
} |
|||
const onChange = (eal) => { |
|||
var e = eal; |
|||
var are = JSON.parse(JSON.stringify(selectArr)); |
|||
if (are.includes(e)) { |
|||
are.forEach((ele, index) => { |
|||
if (ele == e) { |
|||
are.splice(index, 1); |
|||
} |
|||
}); |
|||
} else { |
|||
are.push(e); |
|||
} |
|||
setSelectArr([...are]); |
|||
}; |
|||
|
|||
const SelectCol = () => { |
|||
return ( |
|||
<div className="selectcans"> |
|||
<p className="tirl">隐藏列</p> |
|||
{col.map((ele) => { |
|||
if (ele.children) { |
|||
return ele.children.map((val) => { |
|||
return ( |
|||
<div className="licd" key={val.key}> |
|||
<Checkbox |
|||
value={selectArr.includes(val.key)} |
|||
onChange={() => onChange(val.key)} |
|||
disabled={ |
|||
selectArr.length == 10 && !selectArr.includes(val.key) |
|||
} |
|||
> |
|||
{val.title} |
|||
</Checkbox> |
|||
</div> |
|||
); |
|||
}); |
|||
} else { |
|||
return ( |
|||
<div className="licd" key={ele.key}> |
|||
<Checkbox |
|||
value={selectArr.includes(ele.key)} |
|||
onChange={() => onChange(ele.key)} |
|||
disabled={ |
|||
selectArr.length == 10 && !selectArr.includes(ele.key) |
|||
} |
|||
> |
|||
{ele.title} |
|||
</Checkbox> |
|||
</div> |
|||
); |
|||
} |
|||
})} |
|||
</div> |
|||
); |
|||
}; |
|||
//获取页面显示数据 |
|||
const getData = (data) => { |
|||
setLoading(false); |
|||
ajax.ElectInvoice.getInvoiceMess({ ...data }).then( |
|||
(res) => { |
|||
if (parseInt(res?.status) === 20000) { |
|||
setData({ |
|||
data: res?.data || {}, |
|||
total: res.total || 0, |
|||
}); |
|||
setLoading(true); |
|||
} else { |
|||
message.error(res?.message); |
|||
} |
|||
setLoading(true); |
|||
}, |
|||
(err) => { |
|||
console.log(err); |
|||
setLoading(true); |
|||
} |
|||
); |
|||
}; |
|||
useEffect(() => { |
|||
getData(FormDatas); |
|||
//调用接口 |
|||
}, [FormDatas]); |
|||
|
|||
return ( |
|||
<div className="PayChannelStat"> |
|||
{Open && ( |
|||
<p className="hfts"> |
|||
<InfoCircleOutlined /> |
|||
渠道统计，统计支付日期内的各渠道各业务类型收入和退款情况，以环形图呈现渠道收入的占比情况，选中每个渠道可以查看该渠道的堆叠图；适用于运营和财务人员掌握各渠道收入和退款情况。 |
|||
<span |
|||
className="adfg" |
|||
onClick={() => { |
|||
setOpen(false); |
|||
}} |
|||
> |
|||
<CloseOutlined /> |
|||
</span> |
|||
</p> |
|||
)} |
|||
|
|||
<div className="body_cenf"> |
|||
<div className="left_search"> |
|||
<div className="hrestit">查询条件</div> |
|||
<div className="form_item"> |
|||
<div className="labb"> |
|||
日期 |
|||
<div className="daf"> |
|||
<Select |
|||
value={Picker} |
|||
// style={{ |
|||
// width: "100%", |
|||
// }} |
|||
placeholder="请选择" |
|||
options={[ |
|||
{ |
|||
value: "", |
|||
label: "日", |
|||
}, |
|||
{ |
|||
value: "week", |
|||
label: "周", |
|||
}, |
|||
{ |
|||
value: "month", |
|||
label: "月", |
|||
}, |
|||
{ |
|||
value: "year", |
|||
label: "年", |
|||
}, |
|||
]} |
|||
onChange={(e) => setPicker(e)} |
|||
/> |
|||
</div> |
|||
</div> |
|||
<div className="inputs"> |
|||
<RangePicker |
|||
value={[ |
|||
FormData.start_time ? moment(FormData.start_time) : null, |
|||
FormData.end_time ? moment(FormData.end_time) : null, |
|||
]} |
|||
picker={Picker} |
|||
// showTime={true} |
|||
onChange={(dates, dataString) => |
|||
onChangeData(dates, dataString) |
|||
} |
|||
/> |
|||
</div> |
|||
</div> |
|||
<div className="but_on"> |
|||
<span |
|||
className="sear_res" |
|||
onClick={() => { |
|||
var reset = formdata; |
|||
setFormData(reset); |
|||
setFormDatas(reset); |
|||
}} |
|||
> |
|||
重置 |
|||
</span> |
|||
<span |
|||
className={"sear_ser lent"} |
|||
onClick={() => { |
|||
setFormDatas({ ...FormData }); |
|||
}} |
|||
> |
|||
查询 |
|||
</span> |
|||
</div> |
|||
</div> |
|||
<div className="right_tab"> |
|||
<div className="prossess"> |
|||
{Procc.map((ele, index) => { |
|||
if (index == 0) { |
|||
return ( |
|||
<div className="pros"> |
|||
<div className="cors"> |
|||
<div className="cirr"> |
|||
<div |
|||
className="frdf" |
|||
style={{ |
|||
color: ele.color, |
|||
fontWeight: 700, |
|||
}} |
|||
> |
|||
{ele.value}% |
|||
</div> |
|||
<div className="dfsf sds">{ele.num}元</div> |
|||
</div> |
|||
</div> |
|||
<div className="dsf">{ele.text}</div> |
|||
</div> |
|||
); |
|||
} else { |
|||
return ( |
|||
<div className="pros"> |
|||
<Progress |
|||
type="circle" |
|||
strokeWidth={15} |
|||
strokeColor={ele.color} |
|||
format={(percent) => ( |
|||
<div className="cirr"> |
|||
<div |
|||
style={{ |
|||
color: ele.color, |
|||
fontWeight: 700, |
|||
}} |
|||
> |
|||
{percent}% |
|||
</div> |
|||
<div className="dfsf">{ele.num}元</div> |
|||
</div> |
|||
)} |
|||
percent={ele.value} |
|||
/> |
|||
<div className="dsf">{ele.text}</div> |
|||
</div> |
|||
); |
|||
} |
|||
})} |
|||
</div> |
|||
<ResultFlow |
|||
hasLoad={true} |
|||
loading={loading} |
|||
resultData={Data.data} |
|||
message={"暂无数据"} |
|||
> |
|||
<div className="scrplltab"> |
|||
<Tooltip |
|||
placement="leftBottom" |
|||
title={SelectCol} |
|||
trigger={"click"} |
|||
> |
|||
<div className={Show ? "poxi showas" : "poxi"} title="隐藏列"> |
|||
<FunnelPlotOutlined className={"colsa"} /> |
|||
</div> |
|||
</Tooltip> |
|||
<div className="table_raps"> |
|||
<Table |
|||
className="yisa_tabled" |
|||
columns={column(selectArr)} |
|||
rowKey={(record) => record.id} |
|||
dataSource={Data.data} |
|||
pagination={false} |
|||
scroll={{ |
|||
// x: 1000, |
|||
y: "calc(100vh - 660px)", |
|||
}} |
|||
/> |
|||
</div> |
|||
</div> |
|||
|
|||
<div> |
|||
<Pagination |
|||
className="pagination-common" |
|||
showSizeChanger={true} |
|||
showQuickJumper={true} |
|||
// showTotal={() => `共 ${total_records} 条`} |
|||
total={Data.total} |
|||
current={FormData.pn} |
|||
pageSize={FormData.page_size} |
|||
pageSizeOptions={dictionary?.pageSizeOptions} |
|||
onChange={onShowSizeChange} |
|||
onShowSizeChange={onShowSizeChange} |
|||
/> |
|||
</div> |
|||
</ResultFlow> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
); |
|||
} |
|||
|
|||
export default PayChannelStat; |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue