|
|
|
@ -10,18 +10,13 @@ import { |
|
|
|
AutoComplete, |
|
|
|
Tooltip, |
|
|
|
Checkbox, |
|
|
|
Modal, |
|
|
|
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 { ResultFlow } from "@/components"; |
|
|
|
@ -35,16 +30,15 @@ import Equip5 from "@/assets/images/equip/equip5.png"; |
|
|
|
const { RangePicker } = DatePicker; |
|
|
|
const { TextArea } = Input; |
|
|
|
function ExceptionParkReport() { |
|
|
|
const [tipForm] = Form.useForm(); |
|
|
|
const formdata = { |
|
|
|
operator_id: "0", //商户 |
|
|
|
name: "", //停车场名称 |
|
|
|
park_type: "", //车场类型 1=路内 2=路外 |
|
|
|
operator_status: [], //商用状态(1为待上线，2为商用，3为试运营，4为下线) |
|
|
|
area: [], |
|
|
|
parkName: "", //停车场名称 |
|
|
|
parkType: "", //车场类型 1=路内 2=路外 |
|
|
|
area_id: ["0"], |
|
|
|
date_type: "1", |
|
|
|
is_excel: 0, |
|
|
|
start_time: moment().startOf("day").format("YYYY-MM-DD"), |
|
|
|
end_time: moment().endOf("day").format("YYYY-MM-DD"), |
|
|
|
start_date: moment().startOf("day").format("YYYY-MM-DD"), |
|
|
|
end_date: moment().endOf("day").format("YYYY-MM-DD"), |
|
|
|
pn: 1, |
|
|
|
page_size: dictionary?.pageSizeOptions1[0], |
|
|
|
}; |
|
|
|
@ -52,30 +46,30 @@ function ExceptionParkReport() { |
|
|
|
const tabt = [ |
|
|
|
{ |
|
|
|
text: "设备总数(个)", |
|
|
|
value: 4642, |
|
|
|
value: "deviceTotal", |
|
|
|
icon: Equip1, |
|
|
|
}, |
|
|
|
{ |
|
|
|
text: "离线次数(次)", |
|
|
|
value: 1, |
|
|
|
value: "offlineTimes", |
|
|
|
icon: Equip2, |
|
|
|
tip: "离线时间大于20分钟，记为1次离线，连续离线不会记多次", |
|
|
|
}, |
|
|
|
{ |
|
|
|
text: "离线总时长", |
|
|
|
value: "32天20时49分0秒", |
|
|
|
value: "offlineDuration", |
|
|
|
icon: Equip3, |
|
|
|
}, |
|
|
|
{ |
|
|
|
text: "离线时长占比", |
|
|
|
value: "99.58%", |
|
|
|
value: "offlineDurationRate", |
|
|
|
icon: Equip4, |
|
|
|
tip: "离线设备总时长/离线设备工作时长*100%", |
|
|
|
}, |
|
|
|
{ |
|
|
|
text: "离线时长占比", |
|
|
|
subtext: "(全部设备)", |
|
|
|
value: "0.71%", |
|
|
|
value: "offlineDurationRateTotal", |
|
|
|
icon: Equip5, |
|
|
|
tip: "离线设备总时长/全区所有设备工作时长*100%", |
|
|
|
}, |
|
|
|
@ -84,38 +78,38 @@ function ExceptionParkReport() { |
|
|
|
const col = [ |
|
|
|
{ |
|
|
|
title: "车场名称", |
|
|
|
dataIndex: "road_name", |
|
|
|
key: "road_name", |
|
|
|
dataIndex: "parkName", |
|
|
|
key: "parkName", |
|
|
|
align: "center", |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "设备总数", |
|
|
|
dataIndex: "date", |
|
|
|
key: "date", |
|
|
|
dataIndex: "deviceTotal", |
|
|
|
key: "deviceTotal", |
|
|
|
align: "center", |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "离线次数", |
|
|
|
dataIndex: "date", |
|
|
|
key: "date", |
|
|
|
dataIndex: "offlineTimes", |
|
|
|
key: "offlineTimes", |
|
|
|
align: "center", |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "离线总时长", |
|
|
|
dataIndex: "date", |
|
|
|
key: "date", |
|
|
|
dataIndex: "offlineDuration", |
|
|
|
key: "offlineDuration", |
|
|
|
align: "center", |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "离线设备离线时长占比", |
|
|
|
dataIndex: "date", |
|
|
|
key: "date", |
|
|
|
dataIndex: "offlineDurationRate", |
|
|
|
key: "offlineDurationRate", |
|
|
|
align: "center", |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "全部设备离线时长占比", |
|
|
|
dataIndex: "date", |
|
|
|
key: "date", |
|
|
|
dataIndex: "offlineDurationRateTotal", |
|
|
|
key: "offlineDurationRateTotal", |
|
|
|
align: "center", |
|
|
|
}, |
|
|
|
]; |
|
|
|
@ -128,6 +122,7 @@ function ExceptionParkReport() { |
|
|
|
const [FormDatas, setFormDatas] = useState( |
|
|
|
form_data ? JSON.parse(form_data) : formdata |
|
|
|
); |
|
|
|
const [Textcl, setTextcl] = useState(""); |
|
|
|
//页码状态 |
|
|
|
const [loading, setLoading] = useState(false); |
|
|
|
//页面数据 |
|
|
|
@ -135,7 +130,13 @@ function ExceptionParkReport() { |
|
|
|
data: [], |
|
|
|
total: 0, |
|
|
|
}); |
|
|
|
|
|
|
|
const [DataTop, setDataTop] = useState({ |
|
|
|
deviceTotal: 0, |
|
|
|
offlineTimes: 0, |
|
|
|
offlineDuration: 0, |
|
|
|
offlineDurationRate: 0, |
|
|
|
offlineDurationRateTotal: 0, |
|
|
|
}); |
|
|
|
//获取区域 |
|
|
|
const [Area, setArea] = useState([]); |
|
|
|
//商户 |
|
|
|
@ -143,7 +144,7 @@ function ExceptionParkReport() { |
|
|
|
//自动填充 |
|
|
|
const [options, setOptions] = useState([]); |
|
|
|
|
|
|
|
const [Open, setOpen] = useState(true); |
|
|
|
const [Open, setOpen] = useState(false); |
|
|
|
//筛选 |
|
|
|
const [selectArr, setSelectArr] = useState([]); |
|
|
|
//是否展开显示 |
|
|
|
@ -217,8 +218,8 @@ function ExceptionParkReport() { |
|
|
|
setFormData({ |
|
|
|
...FormData, |
|
|
|
date_type: e, |
|
|
|
start_time: start, |
|
|
|
end_time: end, |
|
|
|
start_date: start, |
|
|
|
end_date: end, |
|
|
|
}); |
|
|
|
}; |
|
|
|
|
|
|
|
@ -336,11 +337,21 @@ function ExceptionParkReport() { |
|
|
|
link.click(); |
|
|
|
document.body.removeChild(link); |
|
|
|
}; |
|
|
|
const SubmitPush = () => { |
|
|
|
tipForm |
|
|
|
.validateFields() |
|
|
|
.then((res) => { |
|
|
|
ReportPaySummaryReport(res.filename); |
|
|
|
}) |
|
|
|
.catch((err) => { |
|
|
|
console.log(err); |
|
|
|
}); |
|
|
|
}; |
|
|
|
//导出 |
|
|
|
const ReportPaySummaryReport = () => { |
|
|
|
ajax.ElectInvoice.getOperationReport({ |
|
|
|
const ReportPaySummaryReport = (val) => { |
|
|
|
ajax.ElectInvoice.getPstaticsexport({ |
|
|
|
...FormDatas, |
|
|
|
is_excel: 1, |
|
|
|
export_name: val, |
|
|
|
}).then( |
|
|
|
(res) => { |
|
|
|
if (parseInt(res?.status) === 20000) { |
|
|
|
@ -354,17 +365,39 @@ function ExceptionParkReport() { |
|
|
|
} |
|
|
|
); |
|
|
|
}; |
|
|
|
//获取页面sf显示数据 |
|
|
|
const getTopData = (data) => { |
|
|
|
ajax.ElectInvoice.getPstatics({ |
|
|
|
...data, |
|
|
|
area_id: data?.area_id?.length |
|
|
|
? data?.area_id[data.area_id.length - 1] |
|
|
|
: "", |
|
|
|
}).then( |
|
|
|
(res) => { |
|
|
|
if (parseInt(res?.status) === 20000) { |
|
|
|
setDataTop(res?.data); |
|
|
|
} else { |
|
|
|
message.error(res?.message); |
|
|
|
} |
|
|
|
}, |
|
|
|
(err) => { |
|
|
|
console.log(err); |
|
|
|
} |
|
|
|
); |
|
|
|
}; |
|
|
|
//获取页面显示数据 |
|
|
|
const getData = (data) => { |
|
|
|
setLoading(false); |
|
|
|
ajax.ElectInvoice.getOperationReport({ |
|
|
|
ajax.ElectInvoice.getPstaticslist({ |
|
|
|
...data, |
|
|
|
area: data?.area?.length ? data?.area[data.area.length - 1] : "", |
|
|
|
area_id: data?.area_id?.length |
|
|
|
? data?.area_id[data.area_id.length - 1] |
|
|
|
: "", |
|
|
|
}).then( |
|
|
|
(res) => { |
|
|
|
if (parseInt(res?.status) === 20000) { |
|
|
|
setData({ |
|
|
|
data: res?.data?.list || [], |
|
|
|
data: res?.data || [], |
|
|
|
total: res?.total || 0, |
|
|
|
}); |
|
|
|
setLoading(true); |
|
|
|
@ -384,7 +417,8 @@ function ExceptionParkReport() { |
|
|
|
"FormData_OperationReport", |
|
|
|
JSON.stringify(FormDatas) |
|
|
|
); |
|
|
|
// getData(FormDatas); |
|
|
|
getData(FormDatas); |
|
|
|
getTopData(FormDatas); |
|
|
|
//调用接口 |
|
|
|
}, [FormDatas]); |
|
|
|
useEffect(() => { |
|
|
|
@ -434,23 +468,23 @@ function ExceptionParkReport() { |
|
|
|
format={TimeChange().mat} |
|
|
|
picker={TimeChange().str} |
|
|
|
allowClear={false} |
|
|
|
value={FormData.start_time ? moment(FormData.start_time) : null} |
|
|
|
value={FormData.start_date ? moment(FormData.start_date) : null} |
|
|
|
onChange={(date, dateString) => { |
|
|
|
console.log(date, dateString); |
|
|
|
if (TimeChange().str == "week") { |
|
|
|
setFormData({ |
|
|
|
...FormData, |
|
|
|
start_time: date |
|
|
|
start_date: date |
|
|
|
? moment(date).day(1).format("YYYY-MM-DD") |
|
|
|
: null, |
|
|
|
}); |
|
|
|
} else { |
|
|
|
setFormData({ ...FormData, start_time: dateString }); |
|
|
|
setFormData({ ...FormData, start_date: dateString }); |
|
|
|
} |
|
|
|
}} |
|
|
|
disabledDate={(current) => |
|
|
|
current > moment(FormData.end_time) || |
|
|
|
current < moment(FormData.end_time).subtract(120, "days") |
|
|
|
current > moment(FormData.end_date) || |
|
|
|
current < moment(FormData.end_date).subtract(120, "days") |
|
|
|
} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
@ -464,22 +498,22 @@ function ExceptionParkReport() { |
|
|
|
format={TimeChange().mat} |
|
|
|
picker={TimeChange().str} |
|
|
|
allowClear={false} |
|
|
|
value={FormData.end_time ? moment(FormData.end_time) : null} |
|
|
|
value={FormData.end_date ? moment(FormData.end_date) : null} |
|
|
|
onChange={(date, dateString) => { |
|
|
|
if (TimeChange().str == "week") { |
|
|
|
setFormData({ |
|
|
|
...FormData, |
|
|
|
end_time: date |
|
|
|
end_date: date |
|
|
|
? moment(date).day(7).format("YYYY-MM-DD") |
|
|
|
: null, |
|
|
|
}); |
|
|
|
} else { |
|
|
|
setFormData({ ...FormData, end_time: dateString }); |
|
|
|
setFormData({ ...FormData, end_date: dateString }); |
|
|
|
} |
|
|
|
}} |
|
|
|
disabledDate={(current) => |
|
|
|
current < moment(FormData.start_time) || |
|
|
|
current > moment(FormData.start_time).add(120, "days") |
|
|
|
current < moment(FormData.start_date) || |
|
|
|
current > moment(FormData.start_date).add(120, "days") |
|
|
|
} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
@ -490,7 +524,7 @@ function ExceptionParkReport() { |
|
|
|
<Cascader |
|
|
|
options={Area} |
|
|
|
expandTrigger="hover" |
|
|
|
value={FormData.area} |
|
|
|
value={FormData.area_id} |
|
|
|
style={{ |
|
|
|
width: "100%", |
|
|
|
}} |
|
|
|
@ -503,7 +537,7 @@ function ExceptionParkReport() { |
|
|
|
onChange={(e) => |
|
|
|
setFormData({ |
|
|
|
...FormData, |
|
|
|
area: e, |
|
|
|
area_id: e, |
|
|
|
}) |
|
|
|
} |
|
|
|
/> |
|
|
|
@ -532,7 +566,7 @@ function ExceptionParkReport() { |
|
|
|
<span className="lab">停车场</span> |
|
|
|
<div className="inputs"> |
|
|
|
<AutoComplete |
|
|
|
value={FormData.name} |
|
|
|
value={FormData.parkName} |
|
|
|
style={{ |
|
|
|
width: "100%", |
|
|
|
}} |
|
|
|
@ -543,7 +577,7 @@ function ExceptionParkReport() { |
|
|
|
console.log(e); |
|
|
|
setFormData({ |
|
|
|
...FormData, |
|
|
|
name: e, |
|
|
|
parkName: e, |
|
|
|
}); |
|
|
|
}} |
|
|
|
/> |
|
|
|
@ -553,7 +587,7 @@ function ExceptionParkReport() { |
|
|
|
<span className="lab">车场类型</span> |
|
|
|
<div className="inputs"> |
|
|
|
<Select |
|
|
|
value={FormData.park_type} |
|
|
|
value={FormData.parkType} |
|
|
|
style={{ |
|
|
|
width: "100%", |
|
|
|
}} |
|
|
|
@ -575,7 +609,7 @@ function ExceptionParkReport() { |
|
|
|
onChange={(e) => |
|
|
|
setFormData({ |
|
|
|
...FormData, |
|
|
|
park_type: e, |
|
|
|
parkType: e, |
|
|
|
}) |
|
|
|
} |
|
|
|
/> |
|
|
|
@ -636,7 +670,7 @@ function ExceptionParkReport() { |
|
|
|
)} |
|
|
|
</div> |
|
|
|
{ele?.subtext ? <div className="gnu">{ele.subtext}</div> : ""} |
|
|
|
<div className="gnum">{ele.value}</div> |
|
|
|
<div className="gnum">{DataTop[ele.value]}</div> |
|
|
|
</div> |
|
|
|
); |
|
|
|
})} |
|
|
|
@ -648,7 +682,7 @@ function ExceptionParkReport() { |
|
|
|
<span |
|
|
|
className={"sear_ser"} |
|
|
|
onClick={() => { |
|
|
|
Data?.total && ReportPaySummaryReport(); |
|
|
|
Data?.total && setOpen(true); |
|
|
|
// setFormDatas({ ...FormData }); |
|
|
|
}} |
|
|
|
> |
|
|
|
@ -700,6 +734,41 @@ function ExceptionParkReport() { |
|
|
|
</ResultFlow> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<Modal |
|
|
|
open={Open} |
|
|
|
footer={null} |
|
|
|
onCancel={() => { |
|
|
|
setOpen(false); |
|
|
|
tipForm.resetFields(); |
|
|
|
}} |
|
|
|
// width={300} |
|
|
|
className="modal-invoic" |
|
|
|
title={"提示"} |
|
|
|
> |
|
|
|
<Form form={tipForm}> |
|
|
|
<Form.Item |
|
|
|
label="文件名" |
|
|
|
name="filename" |
|
|
|
rules={[{ required: true }]} |
|
|
|
> |
|
|
|
<Input placeholder={"请输入文件名"} /> |
|
|
|
</Form.Item> |
|
|
|
</Form> |
|
|
|
<div className="submitBtn"> |
|
|
|
<p className="ant-btn submit" onClick={() => SubmitPush()}> |
|
|
|
提交 |
|
|
|
</p> |
|
|
|
<p |
|
|
|
className="ant-btn cancel" |
|
|
|
onClick={() => { |
|
|
|
tipForm.resetFields(); |
|
|
|
setOpen(false); |
|
|
|
}} |
|
|
|
> |
|
|
|
取消 |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
</Modal> |
|
|
|
</div> |
|
|
|
); |
|
|
|
} |
|
|
|
|
