diff --git a/src/assets/images/fin_ddjehz.png b/src/assets/images/fin_ddjehz.png new file mode 100644 index 0000000..b20b461 Binary files /dev/null and b/src/assets/images/fin_ddjehz.png differ diff --git a/src/assets/images/fin_sf.png b/src/assets/images/fin_sf.png new file mode 100644 index 0000000..2aaf417 Binary files /dev/null and b/src/assets/images/fin_sf.png differ diff --git a/src/assets/images/fin_tsf.png b/src/assets/images/fin_tsf.png new file mode 100644 index 0000000..4ba0203 Binary files /dev/null and b/src/assets/images/fin_tsf.png differ diff --git a/src/assets/images/fin_xghdd.png b/src/assets/images/fin_xghdd.png new file mode 100644 index 0000000..eb8704e Binary files /dev/null and b/src/assets/images/fin_xghdd.png differ diff --git a/src/assets/images/fin_yh.png b/src/assets/images/fin_yh.png new file mode 100644 index 0000000..0a2a81c Binary files /dev/null and b/src/assets/images/fin_yh.png differ diff --git a/src/assets/images/fin_ys.png b/src/assets/images/fin_ys.png new file mode 100644 index 0000000..ec02c58 Binary files /dev/null and b/src/assets/images/fin_ys.png differ diff --git a/src/pages/FinancialMgm/FinancialReport/OperationReport/index.scss b/src/pages/FinancialMgm/FinancialReport/OperationReport/index.scss index 5369f7f..684a843 100644 --- a/src/pages/FinancialMgm/FinancialReport/OperationReport/index.scss +++ b/src/pages/FinancialMgm/FinancialReport/OperationReport/index.scss @@ -7,24 +7,39 @@ $color-primary : var(--color-primary); .OperationReport { padding: 10px 20px; height: 100%; + position: relative; .hfts { + position: absolute; + width: 390px; margin-bottom: 0%; - background: rgba(254, 242, 213, .47); - color: #ff974a; - height: 40px; + // background: rgba(254, 242, 213, .47); + color: #FFCC3F; font-size: 16px; - line-height: 40px; - position: relative; + // position: relative; + right: 20px; + top: 0px; + background: var(--color-table-body-bg-nth-child-even); + border-radius: 4px; + border-left: #FFCC3F 3px solid; + padding: 10px 8px; + z-index: 1; + display: flex; + + .anticon-info-circle { + padding-top: 6px; + margin-right: 4px; + } .adfg { position: absolute; - right: 0; + right: 4px; + top: 0%; cursor: pointer; svg { - width: 20px; - height: 20px; + width: 16px; + height: 16px; } } } @@ -182,29 +197,143 @@ $color-primary : var(--color-primary); height: 54px; } } + + .showdetaild { + opacity: .6; + display: flex; + cursor: pointer; + align-items: center; + + .span { + display: flex; + border-radius: 50%; + margin-left: 4px; + width: 14px; + justify-content: center; + align-items: center; + height: 14px; + border: 1px solid $color-text; + } + } + + .bleu { + color: #3AA9FF; + + .span { + border-color: #3AA9FF; + } + } } - .table_raps { - width: 1300px; - position: relative; + .detailroad { + padding: 10px; + display: flex; + + .twosa { + display: flex; + width: 50%; + + .fel { + display: flex; + width: 48px; + align-items: center; + justify-content: center; + writing-mode: vertical-lr; + height: 181px; + border-left: 5px solid rgba(29, 112, 255, .32); + background: rgba(151, 164, 204, .08); + border-radius: 3px 0 0 3px; + } + + .roadcard { + flex: 1; + display: flex; + flex-wrap: wrap; + + .scards { + width: 24%; + border-radius: 4px; + background: rgba(151, 164, 204, .08); + height: 88px; + margin-left: 2px; + + .contr { + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + + .toopl { + height: 50%; + display: flex; + align-items: center; + opacity: 0.6; + font-size: 12px; + + i { + cursor: pointer; + margin-left: 2px; + display: inline-block; + width: 14px; + height: 14px; + border: solid 1px $color-text; + border-radius: 7px; + line-height: 14px; + text-align: center; + } + } + + .money { + height: 50%; + margin-bottom: 0; + font-size: 16px; + + span { + opacity: .6; + font-size: 12px; + } + } + } + } + + .cyd { + width: 33%; + } + } + } + } + + .scrplltab { + width: 1270px; + overflow-x: scroll; + // position: relative; .poxi { cursor: pointer; background-color: var(--color-table-header-bg); width: 24px; height: 50px; - position: absolute; - right: 0; - top: 0; + position: fixed; + right: 40px; + top: 232px; padding: 10px 8px; + z-index: 1; .colsa { color: #3AA9FF; } } + + .showas { + top: 432px + } } - .yisa_table { + .table_raps { + width: 2988px; + } + + .yisa_tabled { width: 100%; .ant-table-thead { @@ -212,6 +341,18 @@ $color-primary : var(--color-primary); border: rgba(255, 255, 255, .08) 1px solid; background: var(--color-table-header-bg) !important; + i { + cursor: pointer; + margin-left: 10px; + display: inline-block; + width: 14px; + height: 14px; + border: solid 1px $color-text; + border-radius: 7px; + line-height: 14px; + text-align: center; + } + &::before { display: none; } @@ -253,9 +394,9 @@ $color-primary : var(--color-primary); } -.selectcols { - width: 140px; - height: 250px; +.selectcolsopt { + width: 160px; + height: 450px; .tirl { font-size: 16px; diff --git a/src/pages/FinancialMgm/FinancialReport/OperationReport/loadable.jsx b/src/pages/FinancialMgm/FinancialReport/OperationReport/loadable.jsx index c022d25..3528930 100644 --- a/src/pages/FinancialMgm/FinancialReport/OperationReport/loadable.jsx +++ b/src/pages/FinancialMgm/FinancialReport/OperationReport/loadable.jsx @@ -15,17 +15,23 @@ import { } from "antd"; import { dictionary, utils } from "@/config/common"; import moment from "moment"; -import { FunnelPlotOutlined, CloseOutlined } from "@ant-design/icons"; +import { + FunnelPlotOutlined, + CloseOutlined, + InfoCircleOutlined, + DownOutlined, + UpOutlined, +} from "@ant-design/icons"; import ajax from "@/services"; // import { useSessionStorageState, useUpdateEffect, useSize, useUpdate } from 'ahooks'; import { ResultFlow } from "@/components"; import "./index.scss"; -import FinSr from "@/assets/images/fin_sr.png"; -import Fintchz from "@/assets/images/fin_tchz.png"; -import Fintccard from "@/assets/images/fin_tccard.png"; -import Finyytc from "@/assets/images/fin_yytc.png"; -import Fincuotc from "@/assets/images/fin_cuotc.png"; -import Fintk from "@/assets/images/fin_tk.png"; +import Finddje from "@/assets/images/fin_ddjehz.png"; +import Finxgh from "@/assets/images/fin_xghdd.png"; +import Finss from "@/assets/images/fin_ys.png"; +import Finsf from "@/assets/images/fin_sf.png"; +import Finyh from "@/assets/images/fin_yh.png"; +import Fintsf from "@/assets/images/fin_tsf.png"; // import { useLocation } from "react-router-dom"; const { RangePicker } = DatePicker; const { TextArea } = Input; @@ -64,130 +70,235 @@ function OperationReport() { value: "2", }, ]; - + //图新展示 const tabt = [ { - text: "收入合计", + text: "订单金额合计", value: "40988.00", - icon: FinSr, - tip: "停车收入实付+停车卡订单实收+预约订单实收+错锋订单实收", + icon: Finddje, + tip: "按计费规则计算的应收金额，不含任何优惠和异常处理的值", }, { - text: "停车收入合计", + text: "修改后订单金额合计", value: "40988.00", - icon: Fintchz, - tip: "按停车支付时间在统计日期内实付金额之和", + icon: Finxgh, + tip: "按出场时间在统计日期的「停车记录查询」应收金额（含「订单修改查询」中处理完成修正应收金额）之和", }, { - text: "停车卡收入", + text: "应收合计", value: "40988.00", - icon: Fintccard, - tip: "按支付时间在统计日期的停车卡实付金额之和", + icon: Finss, + tip: "停车记录中应收金额之和", }, { - text: "预约停车收入", + text: "实付合计", value: "40988.00", - icon: Finyytc, - tip: "按支付时间在统计日期的停车预约实付金额之和", + icon: Finsf, + tip: "按出场时间在统计日期的「停车记录查询」实付金额之和", }, { - text: "错峰停车收入", + text: "优惠合计", value: "40988.00", - icon: Fincuotc, - tip: "按支付时间在统计日期的错锋订单实付金额之和", + icon: Finyh, + tip: "按出场时间在统计日期的「停车记录查询」优惠总计之和", }, { - text: "退款合计", + text: "退实付合计", value: "00.00", - icon: Fintk, - tip: "按支付时间在统计日期的错锋订单实付金额之和", + icon: Fintsf, + tip: "按出场时间在统计日期的「停车记录查询」退实付金额之和", + }, + ]; + //展开显示数据 + const Showdatat = [ + { + text: "修改后订单金额合计", + value: "40988.00", + valuet: "0.00", + }, + { + text: "应收合计", + value: "40988.00", + valuet: "0.00", + tip: "停车记录中应收金额之和", + }, + { + text: "优惠合计", + valuet: "0.00", + value: "40988.00", + }, + { + text: "实付合计", + valuet: "0.00", + value: "40988.00", + }, + + { + text: "退实付合计", + valuet: "0.00", + value: "00.00", + }, + { + text: "欠费合计", + value: "40988.00", + valuet: "0.00", + tip: "按出场时间在统计日期的「停车记录查询」欠费金额之和", + }, + { + text: "单泊位应收", + value: "40988.00", + valuet: "0.00", + class: "cyd", + tip: "应收总和/泊位数", }, ]; const col = [ { - title: "统计日期", + 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: "停车收入", + title: "停车场", align: "center", children: [ { - title: "实付", - dataIndex: "sf", - key: "sf", + title: "车场名称", + dataIndex: "ccmc", + key: "ccmc", align: "center", }, { - title: "退实付", - dataIndex: "tsf", - key: "tsf", + title: "泊位数", + dataIndex: "bws", + key: "bws", align: "center", }, - ], - }, - { - title: "停车卡收入", - align: "center", - children: [ { - title: "停车卡订单实收", - dataIndex: "tck", - key: "tck", + title: "车场类型", + dataIndex: "cclx", + key: "cclx", + align: "center", + }, + { + title: "商用状态", + dataIndex: "syzt", + key: "syzt", align: "center", }, ], }, { - title: "预约停车收入", + title: "订单金额(元)", + dataIndex: "ddje", + key: "ddje", + align: "center", + }, + { + title: ( + + 异常金额(元) + + 按出场时间统计的停车记录，出场当日异常处理中修改后订单金额和订单金额的差值 +

+ } + > + ? + + + ), + dataIndex: "ycje", + key: "ycje", + align: "center", + }, + { + title: "修改后订单金额(元)", + dataIndex: "xfhje", + key: "xfhje", + align: "center", + }, + { + title: "停车卡折扣(元)", + dataIndex: "tckzk", + key: "tckzk", + align: "center", + }, + { + title: "车场折扣(元)", + dataIndex: "cczk", + key: "cczk", + align: "center", + }, + { + title: "应收金额(元)", + dataIndex: "ysje", + key: "ysje", + align: "center", + }, + { + title: "单泊位应收(元)", + dataIndex: "dbwys", + key: "dbwys", + align: "center", + }, + { + title: "实收金额", align: "center", children: [ { - title: "预约订单实收", - dataIndex: "yydd", - key: "yydd", + title: "优惠卷金额(元)", + dataIndex: "yhqje", + key: "yhqje", align: "center", }, { - title: "预约退款", - dataIndex: "yytk", - key: "yytk", + title: "实付", + dataIndex: "sf", + key: "sf", align: "center", }, ], }, { - title: "错峰停车收入", + title: "欠费(元)", + dataIndex: "qf", + key: "qf", + align: "center", + }, + { + title: "退款金额", align: "center", children: [ { - title: "错峰订单实收", - dataIndex: "cfdd", - key: "cfdd", + title: "退优惠(元)", + dataIndex: "tyh", + key: "tyh", + align: "center", + }, + { + title: "退实付(元)", + dataIndex: "tdf", + key: "tdf", align: "center", }, ], }, - { - title: "收入合计", - dataIndex: "srhj", - key: "srhj", - align: "center", - }, - { - title: "退款合计", - dataIndex: "tkhj", - key: "tkhj", - align: "center", - }, ]; //检索 const [FormData, setFormData] = useState(formdata); @@ -206,6 +317,8 @@ function OperationReport() { const [Open, setOpen] = useState(true); //筛选 const [selectArr, setSelectArr] = useState([]); + //是否展开显示 + const [Show, setShow] = useState(false); const column = (arr) => { let copr = []; if (arr.length) { @@ -322,7 +435,7 @@ function OperationReport() { const SelectCol = () => { return ( -
+

隐藏列

{col.map((ele) => { if (ele.children) { @@ -333,7 +446,7 @@ function OperationReport() { value={selectArr.includes(val.key)} onChange={() => onChange(val.key)} disabled={ - selectArr.length == 9 && !selectArr.includes(val.key) + selectArr.length == 18 && !selectArr.includes(val.key) } > {val.title} @@ -348,7 +461,7 @@ function OperationReport() { value={selectArr.includes(ele.key)} onChange={() => onChange(ele.key)} disabled={ - selectArr.length == 9 && !selectArr.includes(ele.key) + selectArr.length == 18 && !selectArr.includes(ele.key) } > {ele.title} @@ -391,6 +504,7 @@ function OperationReport() {
{Open && (

+ 实际运营情况报表，按出场时间统计停车实际运营收费情况，会根据异常处理动态更新；本报表适用于运营人员了解车场实际运营情况以及帮助财务人员掌握车场财务情况。 @@ -605,23 +711,23 @@ function OperationReport() { options={[ { value: "1", - label: "全部", + label: "待上线", }, { value: "2", - label: "错位共享停车场", + label: "商用", }, { value: "3", - label: "公共事业集团", + label: "试运行", }, { value: "4", - label: "社会类停车场", + label: "下线", }, { value: "5", - label: "智慧互通", + label: "废弃", }, ]} onChange={(e) => @@ -683,35 +789,117 @@ function OperationReport() {

); })} +
{ + setShow(!Show); + }} + className={Show ? "showdetaild bleu" : "showdetaild"} + > + {Show ? "收起" : "展开"} + + {Show ? : } + +
+ {Show ? ( +
+
+
路内
+
+ {Showdatat.map((ele) => { + return ( +
+
+ + {ele.text} + {ele.tip && ( + {ele.tip}

} + > + ? + + )} + +

+ {ele.value} + 元 +

+
+
+ ); + })} +
+
+
+
路外
+
+ {Showdatat.map((ele) => { + return ( +
+
+ + {ele.text} + {ele.tip && ( + {ele.tip}

} + > + ? + + )} + +

+ {ele.valuet} + 元 +

+
+
+ ); + })} +
+
+
+ ) : ( + "" + )} -
- record.id} - dataSource={Data.data} - pagination={false} - scroll={{ - // x: 1300, - y: "calc(100vh - 400px)", - }} - /> +
-
+
+
+
record.id} + dataSource={Data.data} + pagination={false} + scroll={{ + // x: 1300, + y: "calc(100vh - 400px)", + }} + /> + +
ParkingIncomeReport
+ 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: ( + + 停车费收入 + 数据来源：停车支付订单，按支付时间统计的值（含预付金额）

+ } + > + ? + + + ), + 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: ( + + 停车费退款 + + 数据来源：退款成功或异常处理退款处理完成时间在筛选范围的停车订单 +

+ } + > + ? + + + ), + 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 ( +
+

隐藏列

+ {col.map((ele) => { + if (ele.children) { + return ele.children.map((val) => { + return ( +
+ onChange(val.key)} + disabled={ + selectArr.length == 13 && !selectArr.includes(val.key) + } + > + {val.title} + +
+ ); + }); + } else { + return ( +
+ onChange(ele.key)} + disabled={ + selectArr.length == 13 && !selectArr.includes(ele.key) + } + > + {ele.title} + +
+ ); + } + })} +
+ ); + }; + //获取页面显示数据 + 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 ( +
+ {Open && ( +

+ + 停车收入报表，按支付时间统计收入和退款信息，异常处理订单数据不影响本报表；本报表适用于财务人员了解车场收入情况。 + { + setOpen(false); + }} + > + + +

+ )} + +
+
+
查询条件
+
+
+ 日期 +
+ + setFormData({ + ...FormData, + sell_name: e, + }) + } + /> +
+
+
+ 所属商户 +
+ + setFormData({ + ...FormData, + sell_name: e, + }) + } + /> +
+
+
+ 商用状态 +
+
record.id} + dataSource={Data.data} + pagination={false} + scroll={{ + // x: 1300, + y: "calc(100vh - 400px)", + }} + /> + + + +
+ `共 ${total_records} 条`} + total={Data.total} + current={FormData.pn} + pageSize={FormData.page_size} + pageSizeOptions={dictionary?.pageSizeOptions} + onChange={onShowSizeChange} + onShowSizeChange={onShowSizeChange} + /> +
+ + + + + ); } -export default ParkingIncomeReport; \ No newline at end of file +export default ParkingIncomeReport; diff --git a/src/pages/FinancialMgm/FinancialReport/PayChannelStat/index.scss b/src/pages/FinancialMgm/FinancialReport/PayChannelStat/index.scss index 1838f71..021373f 100644 --- a/src/pages/FinancialMgm/FinancialReport/PayChannelStat/index.scss +++ b/src/pages/FinancialMgm/FinancialReport/PayChannelStat/index.scss @@ -3,3 +3,301 @@ $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); + +.PayChannelStat { + padding: 10px 20px; + height: 100%; + position: relative; + + .hfts { + position: absolute; + width: 390px; + margin-bottom: 0%; + // background: rgba(254, 242, 213, .47); + color: #FFCC3F; + font-size: 16px; + // position: relative; + right: 20px; + top: 0px; + background: var(--color-table-body-bg-nth-child-even); + border-radius: 4px; + border-left: #FFCC3F 3px solid; + padding: 10px 8px; + z-index: 12; + display: flex; + + .anticon-info-circle { + padding-top: 6px; + margin-right: 4px; + } + + .adfg { + position: absolute; + right: 4px; + top: 0%; + cursor: pointer; + + svg { + width: 16px; + height: 16px; + } + } + } + + .body_cenf { + display: flex; + height: 100%; + + .left_search { + width: 370px; + height: 100%; + + + .form_item { + width: 100%; + display: flex; + align-items: center; + padding: 0 10px 16px 0; + + .lab { + width: 90px; + text-align: right; + margin-right: 10px; + } + + .labb { + width: 90px; + text-align: right; + margin-right: 10px; + // display: flex; + display: flex; + align-items: center; + + .daf { + margin-left: 4px; + border: 1px solid var(--color-table-border-bottom-color); + } + } + + // .labs { + // width: 120px; + // text-align: right; + // border: 1px solid var(--color-table-border-bottom-color); + // margin-right: 10px; + // } + + .inputs { + flex: 1; + border: 1px solid var(--color-table-border-bottom-color); + border-radius: 4px; + overflow: hidden; + } + + .inputst { + // flex: 228px; + border: 1px solid var(--color-table-border-bottom-color); + border-radius: 4px; + overflow: hidden; + } + } + + .but_on { + display: flex; + // align-items: center; + margin: 0 10px 0 0; + justify-content: space-between; + + span { + width: 110px; + height: 36px; + border-radius: 4px; + color: #ffffff; + margin-right: 10px; + text-align: center; + line-height: 36px; + cursor: pointer; + } + + .sear_ser, + .sear_rep { + background-color: $color-primary; + } + + .sear_res { + background: #636d80; + } + + .lent { + width: 230px; + margin-left: 20px; + } + } + } + + .right_tab { + flex: 1; + height: 100%; + padding: 20px; + background: var(--color-user-list-bg); + box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.12); + border-radius: 28px 0 0 0; + + .prossess { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + + .cors { + width: 120px; + height: 120px; + border-radius: 50%; + // background: $color-container-bg; + background: rgba(255, 255, 255, 0.08); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + .cirr { + width: 100%; + text-align: center; + } + + .frdf { + font-size: 24px; + font-weight: 700; + + } + } + + .pros { + width: 220px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin-bottom: 8px; + + .dsf { + text-align: center; + } + + + + .dfsf { + font-size: 14px; + margin-top: 8px; + } + } + } + + .scrplltab { + width: 1270px; + overflow-x: scroll; + // position: relative; + + .poxi { + cursor: pointer; + background-color: var(--color-table-header-bg); + width: 24px; + height: 50px; + position: fixed; + right: 40px; + top: 421px; + padding: 10px 8px; + z-index: 1; + + .colsa { + color: #3AA9FF; + } + } + + .showas { + top: 432px + } + } + + .table_raps { + width: 2012px; + } + + .yisa_tabled { + width: 100%; + + .ant-table-thead { + th { + border: rgba(255, 255, 255, .08) 1px solid; + background: var(--color-table-header-bg) !important; + + i { + cursor: pointer; + margin-left: 10px; + display: inline-block; + width: 14px; + height: 14px; + border: solid 1px $color-text; + border-radius: 7px; + line-height: 14px; + text-align: center; + } + + &::before { + display: none; + } + } + + .ant-table-selection-column { + text-align: center; + padding: 0; + } + } + + .ant-table-tbody { + td { + background: var(--color-table-body-bg) !important; + border-bottom-color: var(--color-table-border-bottom-color); + } + + tr:nth-child(even) { + td { + background: var(--color-table-body-bg-nth-child-even) !important; + } + } + + tr:nth-child(odd) { + td { + background: var(--color-table-body-bg-nth-child-even) !important; + } + } + } + } + } + } +} + + +.ant-tooltip-inner, +.ant-tooltip-arrow-content:before { + background-color: $color-container-bg; +} + + +.selectcans { + width: 160px; + height: 276px; + + .tirl { + font-size: 16px; + margin-bottom: 4px; + + + } + + .ant-checkbox-inner { + border-color: $color-text; + } + + font-size: 14px; + color: $color-text; +} \ No newline at end of file diff --git a/src/pages/FinancialMgm/FinancialReport/PayChannelStat/loadable.jsx b/src/pages/FinancialMgm/FinancialReport/PayChannelStat/loadable.jsx index ce66809..0dfe70c 100644 --- a/src/pages/FinancialMgm/FinancialReport/PayChannelStat/loadable.jsx +++ b/src/pages/FinancialMgm/FinancialReport/PayChannelStat/loadable.jsx @@ -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
PayChannelStat
+ 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: ( + + 退款合计 + 停车退款+预约停车退款+异常支付退款+重复支付退款

} + > + ? + + + ), + dataIndex: "srhj", + key: "srhj", + align: "center", + }, + { + title: ( + + 停车收入 + + 按支付时间在统计日期的停车支付订单实付金额之和（含预付抵扣金额） +

+ } + > + ? + + + ), + dataIndex: "tcsr", + key: "tcsr", + align: "center", + }, + { + title: ( + + 停车退款 + 按退款时间在统计日期停车记录中实付退款金额之和

} + > + ? + + + ), + dataIndex: "tctk", + key: "tctk", + align: "center", + }, + { + title: ( + + 停车卡收入 + 按支付时间在统计日期的停车卡实付金额之和

} + > + ? + + + ), + dataIndex: "tcksr", + key: "tcksr", + align: "center", + }, + { + title: ( + + 预约停车收入 + 按支付时间在统计日期的停车预约实付金额之和

} + > + ? + + + ), + dataIndex: "yytcsr", + key: "yytcsr", + align: "center", + }, + { + title: ( + + 预约停车退款 + 按退款时间在统计日期的预约停车退款金额之和

} + > + ? + + + ), + dataIndex: "yytctk", + key: "yytctk", + align: "center", + }, + { + title: ( + + 错峰停车收入 + 按支付时间在统计日期的错锋订单实付金额之和

} + > + ? + + + ), + dataIndex: "cftcsr", + key: "cftcsr", + align: "center", + }, + { + title: ( + + 异常支付 + 按支付时间在统计日期的异常支付的支付金额之和

} + > + ? + + + ), + dataIndex: "yczf", + key: "yczf", + align: "center", + }, + { + title: ( + + 异常支付退款 + 按退款时间在统计日期的异常支付的退款金额之和

} + > + ? + + + ), + dataIndex: "异常支付退款", + key: "异常支付退款", + align: "center", + }, + { + title: ( + + 重复支付 + 按支付时间在统计日期的重复支付的支付金额之和

} + > + ? + + + ), + dataIndex: "cfzf", + key: "cfzf", + align: "center", + }, + { + title: ( + + 重复支付退款 + 按退款时间在统计日期的重复支付的退款金额之和

} + > + ? + + + ), + 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: ( + + 收入合计 + 停车收入+停车卡订单实收+预约订单实收+错锋订单实收

} + > + ? + + + ), + 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 ( +
+

隐藏列

+ {col.map((ele) => { + if (ele.children) { + return ele.children.map((val) => { + return ( +
+ onChange(val.key)} + disabled={ + selectArr.length == 10 && !selectArr.includes(val.key) + } + > + {val.title} + +
+ ); + }); + } else { + return ( +
+ onChange(ele.key)} + disabled={ + selectArr.length == 10 && !selectArr.includes(ele.key) + } + > + {ele.title} + +
+ ); + } + })} +
+ ); + }; + //获取页面显示数据 + 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 ( +
+ {Open && ( +

+ + 渠道统计，统计支付日期内的各渠道各业务类型收入和退款情况，以环形图呈现渠道收入的占比情况，选中每个渠道可以查看该渠道的堆叠图；适用于运营和财务人员掌握各渠道收入和退款情况。 + { + setOpen(false); + }} + > + + +

+ )} + +
+
+
查询条件
+
+
+ 日期 +
+
record.id} + dataSource={Data.data} + pagination={false} + scroll={{ + // x: 1000, + y: "calc(100vh - 660px)", + }} + /> + + + +
+ `共 ${total_records} 条`} + total={Data.total} + current={FormData.pn} + pageSize={FormData.page_size} + pageSizeOptions={dictionary?.pageSizeOptions} + onChange={onShowSizeChange} + onShowSizeChange={onShowSizeChange} + /> +
+ + + + + ); } -export default PayChannelStat; \ No newline at end of file +export default PayChannelStat; diff --git a/src/pages/FinancialMgm/FinancialReport/PaySummaryReport/index.scss b/src/pages/FinancialMgm/FinancialReport/PaySummaryReport/index.scss index 0008ba6..18ad82c 100644 --- a/src/pages/FinancialMgm/FinancialReport/PaySummaryReport/index.scss +++ b/src/pages/FinancialMgm/FinancialReport/PaySummaryReport/index.scss @@ -7,24 +7,39 @@ $color-primary : var(--color-primary); .PaySummaryReport { padding: 10px 20px; height: 100%; + position: relative; .hfts { + position: absolute; + width: 390px; margin-bottom: 0%; - background: rgba(254, 242, 213, .47); - color: #ff974a; - height: 40px; + // background: rgba(254, 242, 213, .47); + color: #FFCC3F; font-size: 16px; - line-height: 40px; - position: relative; + // position: relative; + right: 20px; + top: 0px; + background: var(--color-table-body-bg-nth-child-even); + border-radius: 4px; + border-left: #FFCC3F 3px solid; + padding: 10px 8px; + z-index: 1; + display: flex; + + .anticon-info-circle { + padding-top: 6px; + margin-right: 4px; + } .adfg { position: absolute; - right: 0; + right: 4px; + top: 0%; cursor: pointer; svg { - width: 20px; - height: 20px; + width: 16px; + height: 16px; } } } diff --git a/src/pages/FinancialMgm/FinancialReport/PaySummaryReport/loadable.jsx b/src/pages/FinancialMgm/FinancialReport/PaySummaryReport/loadable.jsx index 3761f4b..b99b832 100644 --- a/src/pages/FinancialMgm/FinancialReport/PaySummaryReport/loadable.jsx +++ b/src/pages/FinancialMgm/FinancialReport/PaySummaryReport/loadable.jsx @@ -15,7 +15,11 @@ import { } from "antd"; import { dictionary, utils } from "@/config/common"; import moment from "moment"; -import { FunnelPlotOutlined, CloseOutlined } from "@ant-design/icons"; +import { + FunnelPlotOutlined, + CloseOutlined, + InfoCircleOutlined, +} from "@ant-design/icons"; import ajax from "@/services"; // import { useSessionStorageState, useUpdateEffect, useSize, useUpdate } from 'ahooks'; import { ResultFlow } from "@/components"; @@ -347,6 +351,7 @@ function PaySummaryReport() {
{Open && (

+ 总收入报表，统计支付日期内的各业务类型的收入和退款情况；适用于运营人员分析各业务营收情况。 {Open && (

+ PDA统计，按支付时间统计PDA收缴的各渠道金额；适用于运营人员了解PDA收费情况。 -

-
record.id} - dataSource={Data.data} - pagination={false} - scroll={{ - // x: 1300, - y: "calc(100vh - 300px)", - }} - /> +
+
+
record.id} + dataSource={Data.data} + pagination={false} + scroll={{ + // x: 1300, + y: "calc(100vh - 300px)", + }} + /> + +
{Open && (

+ 预付报表，统计路内停车预付费缴费情况；适用于运营人员和财务人员了解预付情况。