13 changed files with 1612 additions and 2540 deletions
-
1531demon.json
-
11src/pages/InRoadMgm/BusinessMgm/Blacklist/loadable.jsx
-
28src/pages/InRoadMgm/EquipmentOpe/berthStatus/loadable.jsx
-
24src/pages/InRoadMgm/EquipmentOpe/faultReport/loadable.jsx
-
38src/pages/InRoadMgm/EquipmentOpe/patrolStatistics/loadable.jsx
-
6src/pages/InRoadMgm/PersonMgm/ReportMsg/index.jsx
-
200src/pages/InRoadMgm/PersonMgm/ReportMsg/index.scss
-
361src/pages/InRoadMgm/PersonMgm/ReportMsg/loadable.jsx
-
4src/pages/InRoadMgm/PersonMgm/index.jsx
-
145src/router/menu-bk.js
-
11src/router/menu.js
-
6src/router/router.config.js
-
9src/services/search.js
1531
demon.json
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,6 @@ |
|||
import React from "react" |
|||
import loadable from "@loadable/component" |
|||
import { LoadingImg } from "@/components" |
|||
|
|||
const ReportMsgLoadable = loadable(() => import("./loadable")) |
|||
export default (pros) => <ReportMsgLoadable {...pros} fallback={<LoadingImg />} /> |
|||
@ -0,0 +1,200 @@ |
|||
@import "@/assets/css/mixin.scss"; |
|||
$color-container-bg : var(--color-container-bg); |
|||
$color-user-list-bg : var(--color-user-list-bg); |
|||
$color-text : var(--color-text); |
|||
$color-primary : var(--color-primary); |
|||
|
|||
|
|||
.colorBtn { |
|||
width: 90px; |
|||
height: 36px; |
|||
background: linear-gradient(180deg, #3aa9ff, #59b7ff) !important; |
|||
border-radius: 4px; |
|||
&:hover { |
|||
color: var(--color-text); |
|||
border-color: transparent; |
|||
// background: var(--button-default-bg-hover); |
|||
width: 90px; |
|||
height: 36px; |
|||
background: linear-gradient(180deg, #3aa9ff, #59b7ff); |
|||
border-radius: 4px; |
|||
} |
|||
} |
|||
.colorReset { |
|||
width: 90px; |
|||
height: 36px; |
|||
border-radius: 4px; |
|||
border: none; |
|||
background: #636d80 !important; |
|||
&:hover { |
|||
color: var(--color-text); |
|||
border-color: transparent; |
|||
// background: var(--button-default-bg-hover); |
|||
width: 90px; |
|||
height: 36px; |
|||
background: #636d80; |
|||
border: none; |
|||
border-radius: 4px; |
|||
} |
|||
} |
|||
.paid-ReportMsg{ |
|||
display: flex; |
|||
padding: 15px; |
|||
width: 100%; |
|||
.paid-search{ |
|||
.search{ |
|||
font-size: 16px; |
|||
font-family: Microsoft YaHei, Microsoft YaHei-Bold; |
|||
font-weight: 700; |
|||
text-align: left; |
|||
color: #eeeff1; |
|||
} |
|||
label{ |
|||
margin:0 10px; |
|||
} |
|||
.yisa-search{ |
|||
margin-top: 10px; |
|||
display: flex; |
|||
label{ |
|||
line-height: 31px; |
|||
} |
|||
} |
|||
.ant-select:not(.ant-select-customize-input) .ant-select-selector{ |
|||
background-color: #50586c !important; |
|||
} |
|||
.ant-select-arrow .anticon{ |
|||
background-color: #50586c !important; |
|||
} |
|||
.ant-input:placeholder-shown{ |
|||
background-color: #50586c !important; |
|||
} |
|||
.timePicker{ |
|||
width: 350px; |
|||
margin-top: 22px; |
|||
.btnBox{ |
|||
display:flex ; |
|||
margin-top: 20px; |
|||
.yisa-btn{ |
|||
margin-left: 20px; |
|||
width: 130px; |
|||
} |
|||
.root_gfkk{ |
|||
margin-left: 20px; |
|||
.export-content{ |
|||
width: 130px; |
|||
height: 33px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
background: #3b97ff; |
|||
border-radius: 3px; |
|||
cursor: pointer; |
|||
color: #fff; |
|||
margin-right: 10px; |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
} |
|||
.paid-result{ |
|||
width: 100%; |
|||
height: 800px; |
|||
background: #505a6f; |
|||
border-radius: 20px; |
|||
margin-left: 17px; |
|||
.result{ |
|||
padding: 25px; |
|||
.font{ |
|||
font-family: Microsoft YaHei, Microsoft YaHei-Regular; |
|||
font-weight: 400; |
|||
text-align: left; |
|||
color: #eeeff1; |
|||
margin-bottom: 10px; |
|||
display: inline-block; |
|||
|
|||
em{ |
|||
color: #3aa8fe; |
|||
margin: 0 5px; |
|||
} |
|||
} |
|||
.yisa-table .ant-table-thead .ant-table-cell{ |
|||
background-color: #616b83 !important; |
|||
color: #ffffff !important; |
|||
font-size: 14px; |
|||
font-family: Microsoft YaHei, Microsoft YaHei-Bold; |
|||
font-weight: 700; |
|||
text-align: center; |
|||
border-right: none !important; |
|||
border-top-color: #888f9d !important; |
|||
border-color: #888f9d !important; |
|||
} |
|||
.ant-table.ant-table-bordered>.ant-table-container>.ant-table-content>table, .ant-table.ant-table-bordered>.ant-table-container>.ant-table-header>table{ |
|||
border-top: none !important; |
|||
border-left: none !important; |
|||
} |
|||
.ant-table-tbody .ant-table-row .ant-table-cell{ |
|||
background-color: #3e4557 !important; |
|||
color: #ffffff !important; |
|||
text-align: center; |
|||
font-size: 14px; |
|||
font-family: Microsoft YaHei, Microsoft YaHei-Regular; |
|||
font-weight: 400; |
|||
border-right: none !important; |
|||
border-left: none !important; |
|||
border-bottom-color: #626b7e !important; |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
} |
|||
.revenue{ |
|||
.tab-title{ |
|||
text-align: center; |
|||
font-size: 18px; |
|||
font-weight: 400; |
|||
font-family: Microsoft YaHei, Microsoft YaHei-Regular; |
|||
} |
|||
width: 700px !important; |
|||
.tab-index{ |
|||
.tab-top{ |
|||
display: flex; |
|||
margin-top: 10px; |
|||
height: 30px; |
|||
line-height: 30px; |
|||
white-space: nowrap; |
|||
overflow: hidden; |
|||
border-bottom: 1px solid #e4e7ed; |
|||
.tab-li{ |
|||
margin-left: 20px; |
|||
cursor: pointer; |
|||
} |
|||
.active{ |
|||
color:#409eff ; |
|||
cursor: pointer; |
|||
margin-left: 20px; |
|||
border-bottom: 1px solid #409eff !important; |
|||
margin-bottom: -1px !important; |
|||
} |
|||
} |
|||
.tab-bottom{ |
|||
.yisa-tab{ |
|||
.ant-table-cell{ |
|||
background-color: #616b83 !important; |
|||
color: #ffffff !important; |
|||
font-size: 14px; |
|||
font-family: Microsoft YaHei, Microsoft YaHei-Bold; |
|||
font-weight: 700; |
|||
text-align: center; |
|||
border-right: none !important; |
|||
border-left: none !important; |
|||
border-bottom-color: #868d9d !important; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.report-pic{ |
|||
width: 30px; |
|||
} |
|||
@ -0,0 +1,361 @@ |
|||
import React, { useState, useRef, useEffect } from "react"; |
|||
import { ResultFlowResult, FormSliderPicker } from "@/components" |
|||
import { Select, Button, Input, Table, message, Pagination,Image } from 'antd' |
|||
import { |
|||
pageSizeOptions |
|||
} from '@/config/character.config.js' |
|||
import "./index.scss"; |
|||
import moment from "moment"; |
|||
import { SearchOutlined, DeleteOutlined } from '@ant-design/icons'; |
|||
import ajax from '@/services' |
|||
import { useSessionStorageState } from "ahooks" |
|||
const { TextArea } = Input; |
|||
function ReportMsg(props) { |
|||
const [ajaxLoading, setAjaxLoading] = useState(false) |
|||
const [resultData, setResultData] = useState({ |
|||
data: [], |
|||
total_records: 0, |
|||
export_url: '', |
|||
process_url: "" |
|||
}) |
|||
const parameter = { |
|||
road_name: '', |
|||
name: '', |
|||
operator_id: '0', |
|||
status: '0', |
|||
report_type_name:'', |
|||
start_time: moment().format('YYYY-MM-DD 00:00:00'), |
|||
end_time: moment().format("YYYY-MM-DD 23:59:59"), |
|||
pn: 1, |
|||
page_size: Number(pageSizeOptions[0]), // 每页条数 |
|||
} |
|||
const [formData, setFormData] = useState(parameter) |
|||
const lastFormDataRef = useRef(formData) |
|||
const [lastFormData, setLastFormData] = useState(formData) |
|||
//物品型号 |
|||
const handleRoadName = (v) => { |
|||
setFormData({ ...formData, road_name: v.target.value }) |
|||
} |
|||
//上报人 |
|||
const handleName = (v) => { |
|||
setFormData({ ...formData, name: v.target.value }) |
|||
} |
|||
//在职状态 |
|||
const handleStatus=(v)=>{ |
|||
setFormData({ ...formData, name: v}) |
|||
} |
|||
//报备类型 |
|||
const handleReportTypeName = (v) => { |
|||
setFormData({ ...formData, report_type_name: v }) |
|||
} |
|||
//商户名称 |
|||
const handleDeployType = (value) => { |
|||
setFormData({ ...formData, operator_id: value }) |
|||
} |
|||
//停车场名称 |
|||
const handleParkname = (v) => { |
|||
setFormData({ ...formData, park_name: v.target.value }) |
|||
} |
|||
const onHandleDateChange = (v) => { |
|||
setFormData({ |
|||
...formData, |
|||
start_time: v.startDateTime, |
|||
end_time: v.endDateTime |
|||
}) |
|||
} |
|||
//导出 |
|||
const getExportData = () => { |
|||
let data = { |
|||
...formData |
|||
} |
|||
ajax.getFaultReportExport(data).then(res => { |
|||
window.open(res.export_url) |
|||
}) |
|||
} |
|||
//列表 |
|||
const handleColumns = (tab) => { |
|||
let result = [...deployListColumns]; |
|||
switch (tab) { |
|||
case '1': |
|||
result.splice(5, 1) |
|||
break; |
|||
|
|||
} |
|||
return result; |
|||
} |
|||
//重置数据 |
|||
const getResetData = () => { |
|||
setFormData({ |
|||
...parameter |
|||
}) |
|||
getData({ ...parameter }) |
|||
} |
|||
//列表 |
|||
const deployListColumns = [ |
|||
{ |
|||
title: '序号', |
|||
render: (text, record, index) => index + 1, |
|||
}, |
|||
{ |
|||
title: '所属运营商', |
|||
dataIndex: 'operator_name', |
|||
key: 'operator_name', |
|||
}, |
|||
{ |
|||
title: '路段', |
|||
dataIndex: 'road_name', |
|||
key: 'road_name', |
|||
}, |
|||
{ |
|||
title: '姓名', |
|||
dataIndex: 'name', |
|||
key: 'name', |
|||
}, |
|||
{ |
|||
title: '手机号', |
|||
dataIndex: 'phone', |
|||
key: 'phone', |
|||
}, |
|||
{ |
|||
title: '报备类型', |
|||
dataIndex: 'report_type_name', |
|||
key: 'report_type_name', |
|||
}, |
|||
{ |
|||
title: '报备时间', |
|||
dataIndex: 'report_time', |
|||
key: 'report_time', |
|||
}, |
|||
{ |
|||
title: '地点', |
|||
dataIndex: 'location', |
|||
key: 'location', |
|||
}, |
|||
{ |
|||
title: '备注', |
|||
dataIndex: 'notes', |
|||
key: 'notes', |
|||
}, |
|||
{ |
|||
title: '图片', |
|||
render:(text,record)=>{ |
|||
return<div className="report-pic"> |
|||
<Image src={record.report_pic}></Image> |
|||
</div> |
|||
} |
|||
}] |
|||
|
|||
// 获取列表数据 |
|||
const getData = (data = formData) => { |
|||
setAjaxLoading(true) |
|||
ajax.getReportList(data).then(res => { |
|||
setAjaxLoading(false) |
|||
if (res.status === 20000) { |
|||
let resDataArr = res.data.list.map((item) => { |
|||
item.key = item.id |
|||
return item |
|||
}) |
|||
setResultData({ |
|||
...resultData, |
|||
data: resDataArr, |
|||
total_records: res.data.total_records |
|||
}) |
|||
} else { |
|||
setResultData({ |
|||
data: [], |
|||
total_records: 0, |
|||
export_url: '', |
|||
process_url: "" |
|||
}) |
|||
message.error(res.message) |
|||
} |
|||
}, err => { |
|||
console.log(err) |
|||
}) |
|||
} |
|||
//切换分页 |
|||
const changePn = (pn, length) => { |
|||
if (formData.page_size === length) { |
|||
setFormData(Object.assign({}, formData, { pn: pn, page_size: length })) |
|||
setLastFormData(Object.assign({}, lastFormData, { pn: pn, page_size: length })) |
|||
lastFormDataRef.current = Object.assign({}, lastFormData, { pn: pn, page_size: length }) |
|||
getData(Object.assign({}, formData, { pn: pn, page_size: length })) |
|||
} |
|||
} |
|||
//切换每页条数 |
|||
const changeLength = (pn, length) => { |
|||
setFormData(Object.assign({}, formData, { pn: 1, page_size: length })) |
|||
setLastFormData(Object.assign({}, lastFormData, { pn: 1, page_size: length })) |
|||
lastFormDataRef.current = Object.assign({}, lastFormData, { pn: pn, page_size: length }) |
|||
getData(Object.assign({}, formData, { pn: 1, page_size: length })) |
|||
} |
|||
//检索数据 |
|||
const getSearchData = (data = formData) => { |
|||
getData(data) |
|||
} |
|||
|
|||
const [getMerchantDataName, setGetMerchantDataName] = useState([]) |
|||
const merchantDataName = () => { |
|||
ajax.getOperator().then(res => { |
|||
setGetMerchantDataName(res.data) |
|||
}) |
|||
} |
|||
|
|||
|
|||
|
|||
const [sessionTabList, setSessionTabList] = useSessionStorageState('ReportMsg', { |
|||
value: { |
|||
} |
|||
}) |
|||
useEffect(() => { |
|||
console.log(location) |
|||
if (sessionTabList && Object.values(sessionTabList).length > 0) { |
|||
setFormData({ |
|||
road_name: sessionTabList?.road_name, |
|||
operator_id: sessionTabList?.operator_id, |
|||
status: sessionTabList?.status, |
|||
name: sessionTabList?.name, |
|||
report_type_name: sessionTabList?.report_type_name, |
|||
start_time: sessionTabList?.start_time, |
|||
end_time: sessionTabList?.end_time, |
|||
pn: sessionTabList?.pn, |
|||
page_size: sessionTabList?.page_size, |
|||
}) |
|||
} |
|||
}, []) |
|||
console.log(formData); |
|||
useEffect(() => { |
|||
setSessionTabList({ |
|||
...formData |
|||
}) |
|||
}, [formData]) |
|||
useEffect(() => { |
|||
getData() |
|||
merchantDataName() |
|||
}, []) |
|||
return <> |
|||
<div className="paid-ReportMsg"> |
|||
<div className="paid-search"> |
|||
<label className="search">查询条件</label> |
|||
<div className="yisa-search"> |
|||
<label>收费员姓名</label> |
|||
<Input |
|||
style={{ width: 240}} |
|||
value={formData.name} |
|||
placeholder="请输入收费员姓名" |
|||
onChange={handleName} |
|||
/> |
|||
</div> |
|||
<div className="yisa-search"> |
|||
<label>路段</label> |
|||
<Input |
|||
style={{ width: 240, marginLeft: 42 }} |
|||
value={formData.road_name} |
|||
placeholder="请输入路段" |
|||
onChange={handleRoadName} |
|||
/> |
|||
</div> |
|||
<div className="yisa-search"> |
|||
<label>所属运营商</label> |
|||
<Select |
|||
style={{ width: 240}} |
|||
// allowClear |
|||
value={formData.operator_id} |
|||
options={getMerchantDataName} |
|||
onChange={handleDeployType} |
|||
/> |
|||
</div> |
|||
<div className="yisa-search"> |
|||
<label>在职状态</label> |
|||
<Select |
|||
style={{ width: 240, marginLeft: 14 }} |
|||
// allowClear |
|||
value={formData.status} |
|||
options={[ |
|||
{ |
|||
value: '0', |
|||
label: '全部' |
|||
}, |
|||
{ |
|||
value: '1', |
|||
label: '在职' |
|||
}, |
|||
{ |
|||
value: '2', |
|||
label: '离职' |
|||
} |
|||
]} |
|||
onChange={handleStatus} |
|||
/> |
|||
</div> |
|||
<div className="yisa-search"> |
|||
<label>报备类型</label> |
|||
<Select |
|||
style={{ width: 240, marginLeft: 14 }} |
|||
value={formData.report_type_name} |
|||
options={sysConfig.report_list} |
|||
onChange={handleReportTypeName} |
|||
/> |
|||
</div> |
|||
<div className="timePicker "> |
|||
<FormSliderPicker |
|||
yisaLabel='上报时间' |
|||
defaultStartDateTime={moment(formData.start_time)} |
|||
defaultEndDateTime={moment(formData.end_time)} |
|||
yisaOnChange={onHandleDateChange} |
|||
limit={730} |
|||
dropdownData={[ |
|||
{ text: "昨天", value: 1 }, |
|||
{ text: "近30天", value: 30 }, |
|||
{ text: "近90天", value: 90 }, |
|||
{ text: "近180天", value: 180 }, |
|||
]} |
|||
/> |
|||
<div className="btnBox"> |
|||
<Button type="primary" className="yisa-btn colorBtn" icon={<SearchOutlined />} onClick={() => { getSearchData() }}> |
|||
搜索 |
|||
</Button> |
|||
<Button type="primary" className="yisa-btn colorReset" icon={<DeleteOutlined />} onClick={() => { getResetData() }}> |
|||
清空 |
|||
</Button> |
|||
<Button type="primary" className="yisa-btn colorBtn" onClick={() => { getExportData() }}> |
|||
导出 |
|||
</Button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div className="paid-result"> |
|||
<div className="result"> |
|||
<span className="font">共检索到<em>{resultData.total_records}</em>条结果</span> |
|||
<ResultFlowResult ajaxLoad={ajaxLoading} resultData={resultData.data ? resultData.data : []}> |
|||
<Table |
|||
bordered |
|||
// className='yisa-table' |
|||
dataSource={resultData.data} |
|||
columns={ |
|||
handleColumns() |
|||
} |
|||
pagination={false} |
|||
loading={ajaxLoading} |
|||
/> |
|||
<Pagination |
|||
className="pagination-common" |
|||
showSizeChanger |
|||
showQuickJumper |
|||
showTotal={() => `共 ${resultData.total_records} 条`} |
|||
total={resultData.total_records} |
|||
current={lastFormData.pn} |
|||
pageSize={lastFormData.page_size} |
|||
pageSizeOptions={pageSizeOptions} |
|||
onChange={changePn} |
|||
onShowSizeChange={changeLength} |
|||
/> |
|||
</ResultFlowResult> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</> |
|||
} |
|||
|
|||
export default ReportMsg; |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue