18 changed files with 1073 additions and 58 deletions
-
BINsrc/assets/images/equip/equip1.png
-
BINsrc/assets/images/equip/equip2.png
-
BINsrc/assets/images/equip/equip3.png
-
BINsrc/assets/images/equip/equip4.png
-
BINsrc/assets/images/equip/equip5.png
-
291src/pages/DataAnalysisPrediction/EquipmentAly/EquipmentRunningStat/index.scss
-
717src/pages/DataAnalysisPrediction/EquipmentAly/EquipmentRunningStat/loadable.jsx
-
2src/pages/DataAnalysisPrediction/MemberStat/ParkingAly/loadable.jsx
-
2src/pages/DataAnalysisPrediction/MemberStat/PayAly/loadable.jsx
-
2src/pages/DataAnalysisPrediction/MemberStat/RegisterAly/loadable.jsx
-
20src/pages/FinancialMgm/FinancialReport/BookReport/loadable.jsx
-
16src/pages/FinancialMgm/FinancialReport/OperationReport/loadable.jsx
-
13src/pages/FinancialMgm/FinancialReport/ParkCardReport/loadable.jsx
-
15src/pages/FinancialMgm/FinancialReport/ParkingIncomeReport/loadable.jsx
-
12src/pages/FinancialMgm/FinancialReport/PayChannelStat/loadable.jsx
-
15src/pages/FinancialMgm/FinancialReport/PaySummaryReport/loadable.jsx
-
13src/pages/FinancialMgm/FinancialReport/PdaStat/loadable.jsx
-
13src/pages/FinancialMgm/FinancialReport/PreOrderReport/loadable.jsx
|
After Width: 423 | Height: 108 | Size: 5.0 KiB |
|
After Width: 423 | Height: 108 | Size: 5.1 KiB |
|
After Width: 423 | Height: 108 | Size: 5.2 KiB |
|
After Width: 423 | Height: 108 | Size: 4.8 KiB |
|
After Width: 423 | Height: 108 | Size: 5.1 KiB |
@ -1,15 +1,714 @@ |
|||
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, |
|||
Cascader, |
|||
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 Equip1 from "@/assets/images/equip/equip1.png"; |
|||
import Equip2 from "@/assets/images/equip/equip2.png"; |
|||
import Equip3 from "@/assets/images/equip/equip3.png"; |
|||
import Equip4 from "@/assets/images/equip/equip4.png"; |
|||
import Equip5 from "@/assets/images/equip/equip5.png"; |
|||
// import { useLocation } from "react-router-dom"; |
|||
const { RangePicker } = DatePicker; |
|||
const { TextArea } = Input; |
|||
function ExceptionParkReport() { |
|||
return <div>ExceptionParkReport</div> |
|||
const formdata = { |
|||
operator_id: "0", //商户 |
|||
name: "", //停车场名称 |
|||
park_type: "", //车场类型 1=路内 2=路外 |
|||
operator_status: [], //商用状态(1为待上线，2为商用，3为试运营，4为下线) |
|||
area: [], |
|||
date_type: "1", |
|||
is_excel: 0, |
|||
start_time: moment() |
|||
.startOf("day") |
|||
.subtract(1, "days") |
|||
.format("YYYY-MM-DD"), |
|||
end_time: moment().endOf("day").subtract(1, "days").format("YYYY-MM-DD"), |
|||
pn: 1, |
|||
page_size: dictionary?.pageSizeOptions1[0], |
|||
}; |
|||
//图新展示 |
|||
const tabt = [ |
|||
{ |
|||
text: "设备总数(个)", |
|||
value: 4642, |
|||
icon: Equip1, |
|||
}, |
|||
{ |
|||
text: "离线次数(次)", |
|||
value: 1, |
|||
icon: Equip2, |
|||
tip: "离线时间大于20分钟，记为1次离线，连续离线不会记多次", |
|||
}, |
|||
{ |
|||
text: "离线总时长", |
|||
value: "32天20时49分0秒", |
|||
icon: Equip3, |
|||
}, |
|||
{ |
|||
text: "离线时长占比", |
|||
value: "99.58%", |
|||
icon: Equip4, |
|||
tip: "离线设备总时长/离线设备工作时长*100%", |
|||
}, |
|||
{ |
|||
text: "离线时长占比", |
|||
subtext: "(全部设备)", |
|||
value: "0.71%", |
|||
icon: Equip5, |
|||
tip: "离线设备总时长/全区所有设备工作时长*100%", |
|||
}, |
|||
]; |
|||
|
|||
const col = [ |
|||
{ |
|||
title: "车场名称", |
|||
dataIndex: "road_name", |
|||
key: "road_name", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: "设备总数", |
|||
dataIndex: "date", |
|||
key: "date", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: "离线次数", |
|||
dataIndex: "date", |
|||
key: "date", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: "离线总时长", |
|||
dataIndex: "date", |
|||
key: "date", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: "离线设备离线时长占比", |
|||
dataIndex: "date", |
|||
key: "date", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: "全部设备离线时长占比", |
|||
dataIndex: "date", |
|||
key: "date", |
|||
align: "center", |
|||
}, |
|||
]; |
|||
let form_data = sessionStorage.getItem("FormData_OperationReport"); |
|||
//检索 |
|||
const [FormData, setFormData] = useState( |
|||
form_data ? JSON.parse(form_data) : formdata |
|||
); |
|||
//检索2 |
|||
const [FormDatas, setFormDatas] = useState( |
|||
form_data ? JSON.parse(form_data) : formdata |
|||
); |
|||
//页码状态 |
|||
const [loading, setLoading] = useState(false); |
|||
//页面数据 |
|||
const [Data, setData] = useState({ |
|||
data: [], |
|||
total: 0, |
|||
}); |
|||
|
|||
//获取区域 |
|||
const [Area, setArea] = useState([]); |
|||
//商户 |
|||
const [Yunying, setYunying] = 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([]); |
|||
}; |
|||
|
|||
//时间状态切换 |
|||
const TimeChange = () => { |
|||
let e = FormData.date_type; |
|||
let str = "date"; |
|||
let mat = "YYYY-MM-DD"; |
|||
if (e == 4) { |
|||
str = "year"; |
|||
mat = "YYYY"; |
|||
} else if (e == 3) { |
|||
str = "month"; |
|||
mat = "YYYY-MM"; |
|||
} else if (e == 2) { |
|||
str = "week"; |
|||
mat = "YYYY-MM-DD"; |
|||
} |
|||
return { str, mat }; |
|||
}; |
|||
//切换时间变化 |
|||
const SetTimeNow = (e) => { |
|||
let start = ""; |
|||
let end = ""; |
|||
if (e == 4) { |
|||
start = moment().format("YYYY"); |
|||
end = moment().format("YYYY"); |
|||
} else if (e == 3) { |
|||
start = moment().format("YYYY-MM"); |
|||
end = moment().format("YYYY-MM"); |
|||
} else if (e == 2) { |
|||
start = moment().day(1).format("YYYY-MM-DD"); |
|||
end = moment().day(7).format("YYYY-MM-DD"); |
|||
} else { |
|||
start = moment().startOf("day").subtract(1, "days").format("YYYY-MM-DD"); |
|||
end = moment().endOf("day").subtract(1, "days").format("YYYY-MM-DD"); |
|||
} |
|||
setFormData({ |
|||
...FormData, |
|||
date_type: e, |
|||
start_time: start, |
|||
end_time: end, |
|||
}); |
|||
}; |
|||
|
|||
//页码 |
|||
function onShowSizeChange(pn, page_size) { |
|||
let temFormData = {}; |
|||
if (FormData.page_size == page_size) { |
|||
temFormData = { |
|||
...FormData, |
|||
pn, |
|||
}; |
|||
} else { |
|||
temFormData = { |
|||
...FormData, |
|||
pn: 1, |
|||
page_size, |
|||
}; |
|||
} |
|||
setFormData(temFormData); |
|||
setFormDatas(temFormData); |
|||
} |
|||
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="selectcolsopt"> |
|||
<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 == 19 && !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 == 19 && !selectArr.includes(ele.key) |
|||
} |
|||
> |
|||
{ele.title} |
|||
</Checkbox> |
|||
</div> |
|||
); |
|||
} |
|||
})} |
|||
</div> |
|||
); |
|||
}; |
|||
//获取页面筛选数据 |
|||
const getSelectData = () => { |
|||
ajax.getAllOperator().then( |
|||
(res) => { |
|||
if (parseInt(res?.status) === 20000) { |
|||
setYunying(res.data); |
|||
} else { |
|||
message.error(res?.message); |
|||
} |
|||
setLoading(true); |
|||
}, |
|||
(err) => { |
|||
console.log(err); |
|||
setLoading(true); |
|||
} |
|||
); |
|||
ajax.getAreaTree().then( |
|||
(res) => { |
|||
if (parseInt(res?.status) === 20000) { |
|||
setArea(res.data); |
|||
} else { |
|||
message.error(res?.message); |
|||
} |
|||
setLoading(true); |
|||
}, |
|||
(err) => { |
|||
console.log(err); |
|||
setLoading(true); |
|||
} |
|||
); |
|||
}; |
|||
//下载 |
|||
const Daownload = (url) => { |
|||
var link = document.createElement("a"); |
|||
link.setAttribute("target", "_blank"); |
|||
link.style.display = "none"; |
|||
link.href = url ? url : ""; |
|||
document.body.appendChild(link); |
|||
link.click(); |
|||
document.body.removeChild(link); |
|||
}; |
|||
//导出 |
|||
const ReportPaySummaryReport = () => { |
|||
ajax.ElectInvoice.getOperationReport({ |
|||
...FormDatas, |
|||
is_excel: 1, |
|||
}).then( |
|||
(res) => { |
|||
if (parseInt(res?.status) === 20000) { |
|||
Daownload(res?.data?.url); |
|||
} else { |
|||
message.error(res?.message); |
|||
} |
|||
}, |
|||
(err) => { |
|||
console.log(err); |
|||
} |
|||
); |
|||
}; |
|||
//获取页面显示数据 |
|||
const getData = (data) => { |
|||
setLoading(false); |
|||
ajax.ElectInvoice.getOperationReport({ |
|||
...data, |
|||
area: data?.area?.length ? data?.area[data.area.length - 1] : "", |
|||
}).then( |
|||
(res) => { |
|||
if (parseInt(res?.status) === 20000) { |
|||
setData({ |
|||
data: res?.data?.list || [], |
|||
total: res?.total || 0, |
|||
}); |
|||
setLoading(true); |
|||
} else { |
|||
message.error(res?.message); |
|||
} |
|||
setLoading(true); |
|||
}, |
|||
(err) => { |
|||
console.log(err); |
|||
setLoading(true); |
|||
} |
|||
); |
|||
}; |
|||
useEffect(() => { |
|||
sessionStorage.setItem( |
|||
"FormData_OperationReport", |
|||
JSON.stringify(FormDatas) |
|||
); |
|||
// getData(FormDatas); |
|||
//调用接口 |
|||
}, [FormDatas]); |
|||
useEffect(() => { |
|||
getSelectData(); |
|||
}, []); |
|||
return ( |
|||
<div className="ExceptionParkReport"> |
|||
<div className="body_cenf"> |
|||
<div className="left_search"> |
|||
<div className="hrestit">查询条件</div> |
|||
<div className="form_item"> |
|||
<div className="labb"> |
|||
日期 |
|||
<div className="daf"> |
|||
<Select |
|||
value={FormData.date_type} |
|||
// style={{ |
|||
// width: "100%", |
|||
// }} |
|||
placeholder="请选择" |
|||
options={[ |
|||
{ |
|||
value: "1", |
|||
label: "日", |
|||
}, |
|||
{ |
|||
value: "2", |
|||
label: "周", |
|||
}, |
|||
{ |
|||
value: "3", |
|||
label: "月", |
|||
}, |
|||
{ |
|||
value: "4", |
|||
label: "年", |
|||
}, |
|||
]} |
|||
onChange={(e) => SetTimeNow(e)} |
|||
/> |
|||
</div> |
|||
</div> |
|||
<div className="inputs"> |
|||
<DatePicker |
|||
style={{ width: "100%" }} |
|||
// showTime |
|||
format={TimeChange().mat} |
|||
picker={TimeChange().str} |
|||
allowClear={false} |
|||
value={FormData.start_time ? moment(FormData.start_time) : null} |
|||
onChange={(date, dateString) => { |
|||
console.log(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> |
|||
<div className="form_item"> |
|||
<span className="lab">至</span> |
|||
<div className="inputs"> |
|||
<DatePicker |
|||
style={{ width: "100%" }} |
|||
// showTime |
|||
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> |
|||
<div className="form_item"> |
|||
<span className="lab">区域</span> |
|||
<div className="inputs"> |
|||
<Cascader |
|||
options={Area} |
|||
expandTrigger="hover" |
|||
value={FormData.area} |
|||
style={{ |
|||
width: "100%", |
|||
}} |
|||
changeOnSelect |
|||
fieldNames={{ |
|||
label: "name", |
|||
value: "id", |
|||
children: "children", |
|||
}} |
|||
onChange={(e) => |
|||
setFormData({ |
|||
...FormData, |
|||
area: e, |
|||
}) |
|||
} |
|||
/> |
|||
</div> |
|||
</div> |
|||
<div className="form_item"> |
|||
<span className="lab">运营商</span> |
|||
<div className="inputs"> |
|||
<Select |
|||
value={FormData.operator_id} |
|||
style={{ |
|||
width: "100%", |
|||
}} |
|||
placeholder="请选择" |
|||
options={Yunying} |
|||
onChange={(e) => |
|||
setFormData({ |
|||
...FormData, |
|||
operator_id: e, |
|||
}) |
|||
} |
|||
/> |
|||
</div> |
|||
</div> |
|||
<div className="form_item"> |
|||
<span className="lab">停车场</span> |
|||
<div className="inputs"> |
|||
<AutoComplete |
|||
value={FormData.name} |
|||
style={{ |
|||
width: "100%", |
|||
}} |
|||
placeholder="输入路段名称" |
|||
options={options} |
|||
onSearch={onSearch} |
|||
onChange={(e) => { |
|||
console.log(e); |
|||
setFormData({ |
|||
...FormData, |
|||
name: e, |
|||
}); |
|||
}} |
|||
/> |
|||
</div> |
|||
</div> |
|||
<div className="form_item"> |
|||
<span className="lab">车场类型</span> |
|||
<div className="inputs"> |
|||
<Select |
|||
value={FormData.park_type} |
|||
style={{ |
|||
width: "100%", |
|||
}} |
|||
placeholder="请选择" |
|||
options={[ |
|||
{ |
|||
value: "", |
|||
label: "全部", |
|||
}, |
|||
{ |
|||
value: "1", |
|||
label: "路内车场", |
|||
}, |
|||
{ |
|||
value: "2", |
|||
label: "路外车场", |
|||
}, |
|||
]} |
|||
onChange={(e) => |
|||
setFormData({ |
|||
...FormData, |
|||
park_type: e, |
|||
}) |
|||
} |
|||
/> |
|||
</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={() => { |
|||
var fortm = FormData; |
|||
setFormData({ |
|||
...fortm, |
|||
pn: 1, |
|||
}); |
|||
setFormDatas({ |
|||
...fortm, |
|||
pn: 1, |
|||
}); |
|||
}} |
|||
> |
|||
查询 |
|||
</span> |
|||
</div> |
|||
</div> |
|||
<div className="right_tab"> |
|||
<div className="sheisgirl"> |
|||
{tabt.map((ele) => { |
|||
return ( |
|||
<div |
|||
key={ele.text} |
|||
style={{ |
|||
background: `url(${ele.icon})`, |
|||
backgroundSize: "100% 100%", |
|||
}} |
|||
className="gchild" |
|||
> |
|||
<div className="gps">{ele.text}</div> |
|||
{ele?.subtext ? <div className="gnu">{ele.subtext}</div> : ""} |
|||
<div className="gnum">{ele.value}</div> |
|||
</div> |
|||
); |
|||
})} |
|||
</div> |
|||
<div className="sd"> |
|||
<p> |
|||
共查询到<span> {Data?.total || 0}</span>条数据 |
|||
</p> |
|||
<span |
|||
className={"sear_ser"} |
|||
onClick={() => { |
|||
ReportPaySummaryReport(); |
|||
// setFormDatas({ ...FormData }); |
|||
}} |
|||
> |
|||
导出 |
|||
</span> |
|||
</div> |
|||
<ResultFlow |
|||
hasLoad={true} |
|||
loading={loading} |
|||
resultData={Data.data} |
|||
message={"暂无数据"} |
|||
> |
|||
<div className="scrplltab"> |
|||
<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 - 480px)", |
|||
}} |
|||
/> |
|||
</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 ExceptionParkReport; |
|||
export default ExceptionParkReport; |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue