34 changed files with 4800 additions and 1540 deletions
-
1671demon.json
-
23src/assets/fonts/font_pda/demo_index.html
-
4src/pages/InRoadMgm/BusinessMgm/ChargeRules/loadable.jsx
-
6src/pages/InRoadMgm/EquipmentOpe/berthStatus/index.jsx
-
197src/pages/InRoadMgm/EquipmentOpe/berthStatus/index.scss
-
333src/pages/InRoadMgm/EquipmentOpe/berthStatus/loadable.jsx
-
6src/pages/InRoadMgm/EquipmentOpe/faultReport/index.jsx
-
197src/pages/InRoadMgm/EquipmentOpe/faultReport/index.scss
-
329src/pages/InRoadMgm/EquipmentOpe/faultReport/loadable.jsx
-
9src/pages/InRoadMgm/EquipmentOpe/index.jsx
-
6src/pages/InRoadMgm/EquipmentOpe/patrolStatistics/index.jsx
-
228src/pages/InRoadMgm/EquipmentOpe/patrolStatistics/index.scss
-
375src/pages/InRoadMgm/EquipmentOpe/patrolStatistics/loadable.jsx
-
2src/pages/InRoadMgm/PersonMgm/Performance/SalesStat/loadable.jsx
-
54src/pages/InRoadMgm/RecordInquiry/DisabledCarParkRecordTotal/loadable.jsx
-
71src/pages/InRoadMgm/RecordInquiry/ParkRecordTotal/loadable.jsx
-
1src/pages/InRoadMgm/RecordInquiry/UnRecordOrder/loadable.jsx
-
70src/pages/InRoadMgm/RoadMgm/AddRoad/loadable.jsx
-
4src/pages/InRoadMgm/RoadMgm/ParkList/loadable.jsx
-
34src/pages/InRoadMgm/RoadMgm/RoadConf/loadable.jsx
-
4src/pages/InRoadMgm/RoadMgm/RoadDetail/loadable.jsx
-
16src/pages/InRoadMgm/Stuff/CategroyConf/loadable.jsx
-
2src/pages/InRoadMgm/index.jsx
-
7src/pages/OperationCenter/CustomerServieMgm/ErrorCorrection/loadable.jsx
-
2src/pages/OperationCenter/GeoSignalIgnore/GeoSignalIgnoreAudit/loadable.jsx
-
2src/pages/OperationCenter/GeoSignalIgnore/GeoSignalIgnoreConf/loadable.jsx
-
2src/pages/OperationCenter/GeoSignalIgnore/GeoSignalIgnoreInquiry/loadable.jsx
-
8src/pages/OperationCenter/OtherBusiness/Staggered/StaggeredMgm/loadable.jsx
-
18src/pages/SystemMgm/BusinessConfig/BusinessConf/loadable.jsx
-
43src/router/menu-bk.js
-
2527src/router/menu.js
-
22src/router/router.config.js
-
14src/services/InroadMgm/RoadMgm/RoadMgm.js
-
53src/services/search.js
1671
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 BerthStatusLoadable = loadable(() => import("./loadable")) |
||||
|
export default (pros) => <BerthStatusLoadable {...pros} fallback={<LoadingImg />} /> |
@ -0,0 +1,197 @@ |
|||||
|
@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-berthStatus{ |
||||
|
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; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
@ -0,0 +1,333 @@ |
|||||
|
import React, { useState, useRef, useEffect } from "react"; |
||||
|
import { ResultFlowResult } from "@/components" |
||||
|
import { Select, Button, Input, Table, message, Pagination } from 'antd' |
||||
|
import { |
||||
|
pageSizeOptions |
||||
|
} from '@/config/character.config.js' |
||||
|
import "./index.scss"; |
||||
|
import { SearchOutlined, DeleteOutlined } from '@ant-design/icons'; |
||||
|
import ajax from '@/services' |
||||
|
import { useSessionStorageState } from "ahooks" |
||||
|
function berthStatus(props) { |
||||
|
const [ajaxLoading, setAjaxLoading] = useState(false) |
||||
|
const [resultData, setResultData] = useState({ |
||||
|
data: [], |
||||
|
total_records: 0, |
||||
|
export_url: '', |
||||
|
process_url: "" |
||||
|
}) |
||||
|
const parameter = { |
||||
|
berth_code: '', |
||||
|
road_name: '', |
||||
|
operate_name: '0', |
||||
|
berth_type_name: '0', |
||||
|
service_type_name: '0', |
||||
|
park_name: '', |
||||
|
status:'1', |
||||
|
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 handleBerthCode = (v) => { |
||||
|
setFormData({ ...formData, model_id: v.target.value }) |
||||
|
} |
||||
|
//泊位类型 |
||||
|
const handleBerthTypeName = (v) => { |
||||
|
setFormData({ ...formData, berth_type_name: v }) |
||||
|
} |
||||
|
//商户名称 |
||||
|
const handleDeployType = (value) => { |
||||
|
setFormData({ ...formData, operate_name: value }) |
||||
|
} |
||||
|
//停车场名称 |
||||
|
const handleParkname = (v) => { |
||||
|
setFormData({ ...formData, park_name: v.target.value }) |
||||
|
} |
||||
|
//服务属性 |
||||
|
const handleServiceTypeName=(v)=>{ |
||||
|
setFormData({ ...formData, service_type_name: v}) |
||||
|
} |
||||
|
//运营状态 |
||||
|
const handleStatus=(v)=>{ |
||||
|
setFormData({ ...formData, status: v}) |
||||
|
} |
||||
|
|
||||
|
|
||||
|
//列表 |
||||
|
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: 'park_name', |
||||
|
key: 'park_name', |
||||
|
}, |
||||
|
{ |
||||
|
title: '泊位类型', |
||||
|
dataIndex: 'berth_type_name', |
||||
|
key: 'berth_type_name', |
||||
|
}, |
||||
|
{ |
||||
|
title: '泊位号', |
||||
|
dataIndex: 'berth_code', |
||||
|
key: 'berth_code', |
||||
|
}, |
||||
|
|
||||
|
{ |
||||
|
title: '服务属性', |
||||
|
dataIndex: 'service_type_name', |
||||
|
key: 'service_type_name', |
||||
|
}, |
||||
|
{ |
||||
|
title: '运营状态', |
||||
|
dataIndex: 'status_name', |
||||
|
key: 'status_name', |
||||
|
}, |
||||
|
{ |
||||
|
title: '更新时间', |
||||
|
dataIndex: 'update_time', |
||||
|
key: 'update_time', |
||||
|
}] |
||||
|
|
||||
|
// 获取列表数据 |
||||
|
const getData = (data = formData) => { |
||||
|
setAjaxLoading(true) |
||||
|
ajax.getBerthList(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('berthStatus', { |
||||
|
value: { |
||||
|
} |
||||
|
}) |
||||
|
useEffect(() => { |
||||
|
console.log(location) |
||||
|
if (sessionTabList && Object.values(sessionTabList).length > 0) { |
||||
|
setFormData({ |
||||
|
berth_code: sessionTabList?.berth_code, |
||||
|
road_name: sessionTabList?.road_name, |
||||
|
operate_name: sessionTabList?.operate_name, |
||||
|
berth_type_name: sessionTabList?.berth_type_name, |
||||
|
service_type_name: sessionTabList?.service_type_name, |
||||
|
park_name: sessionTabList?.park_name, |
||||
|
status: sessionTabList?.status, |
||||
|
pn: sessionTabList?.pn, |
||||
|
page_size: sessionTabList?.page_size, |
||||
|
}) |
||||
|
} |
||||
|
}, []) |
||||
|
console.log(formData); |
||||
|
useEffect(() => { |
||||
|
setSessionTabList({ |
||||
|
...formData |
||||
|
}) |
||||
|
}, [formData]) |
||||
|
useEffect(() => { |
||||
|
getData() |
||||
|
merchantDataName() |
||||
|
}, []) |
||||
|
return <> |
||||
|
<div className="paid-berthStatus"> |
||||
|
<div className="paid-search"> |
||||
|
<label className="search">查询条件</label> |
||||
|
<div className="yisa-search"> |
||||
|
<label>泊位编号</label> |
||||
|
<Input |
||||
|
style={{ width: 240,marginLeft:14 }} |
||||
|
value={formData.berth_code} |
||||
|
placeholder="请输入泊位编号" |
||||
|
onChange={handleBerthCode} |
||||
|
/> |
||||
|
</div> |
||||
|
<div className="yisa-search"> |
||||
|
<label>泊位类型</label> |
||||
|
<Select |
||||
|
style={{ width: 240,marginLeft:14 }} |
||||
|
// allowClear |
||||
|
value={formData.berth_type_name} |
||||
|
options={sysConfig.berth_list} |
||||
|
onChange={handleBerthTypeName} |
||||
|
/> |
||||
|
</div> |
||||
|
<div className="yisa-search"> |
||||
|
<label>商户名称</label> |
||||
|
<Select |
||||
|
style={{ width: 240,marginLeft:14 }} |
||||
|
// allowClear |
||||
|
value={formData.operate_name} |
||||
|
options={getMerchantDataName} |
||||
|
onChange={handleDeployType} |
||||
|
/> |
||||
|
</div> |
||||
|
<div className="yisa-search"> |
||||
|
<label>所属路段</label> |
||||
|
<Input |
||||
|
style={{ width: 240,marginLeft:14 }} |
||||
|
value={formData.road_name} |
||||
|
placeholder="请输入所属路段" |
||||
|
onChange={handleRoadName} |
||||
|
/> |
||||
|
</div> |
||||
|
<div className="yisa-search"> |
||||
|
<label>停车场名称</label> |
||||
|
<Input |
||||
|
style={{ width: 240}} |
||||
|
value={formData.park_name} |
||||
|
placeholder="请输入停车场名称" |
||||
|
onChange={handleParkname} |
||||
|
/> |
||||
|
</div> |
||||
|
<div className="yisa-search"> |
||||
|
<label>服务属性</label> |
||||
|
<Select |
||||
|
style={{ width: 240,marginLeft:14 }} |
||||
|
// allowClear |
||||
|
value={formData.service_type_name} |
||||
|
options={sysConfig.service_list} |
||||
|
onChange={handleServiceTypeName} |
||||
|
/> |
||||
|
</div> |
||||
|
<div className="yisa-search"> |
||||
|
<label>运营状态</label> |
||||
|
<Select |
||||
|
style={{ width: 240 ,marginLeft:14 }} |
||||
|
// allowClear |
||||
|
value={formData.status} |
||||
|
options={sysConfig.opertion_list} |
||||
|
onChange={handleStatus} |
||||
|
/> |
||||
|
</div> |
||||
|
<div className="timePicker "> |
||||
|
<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> |
||||
|
</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 berthStatus; |
@ -0,0 +1,6 @@ |
|||||
|
import React from "react" |
||||
|
import loadable from "@loadable/component" |
||||
|
import { LoadingImg } from "@/components" |
||||
|
|
||||
|
const FaultReportLoadable = loadable(() => import("./loadable")) |
||||
|
export default (pros) => <FaultReportLoadable {...pros} fallback={<LoadingImg />} /> |
@ -0,0 +1,197 @@ |
|||||
|
@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-faultReport{ |
||||
|
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; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
@ -0,0 +1,329 @@ |
|||||
|
import React, { useState, useRef, useEffect } from "react"; |
||||
|
import { ResultFlowResult, FormSliderPicker } from "@/components" |
||||
|
import { Select, Button, Input, Table, message, Pagination } 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 faultReport(props) { |
||||
|
const [ajaxLoading, setAjaxLoading] = useState(false) |
||||
|
const [resultData, setResultData] = useState({ |
||||
|
data: [], |
||||
|
total_records: 0, |
||||
|
export_url: '', |
||||
|
process_url: "" |
||||
|
}) |
||||
|
const parameter = { |
||||
|
road_name: '', |
||||
|
reason: '', |
||||
|
name: '', |
||||
|
operate_name: '0', |
||||
|
park_name: '', |
||||
|
start: moment().format('YYYY-MM-DD 00:00:00'), |
||||
|
end: 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 handleReason = (v) => { |
||||
|
setFormData({ ...formData, reason: v.target.value }) |
||||
|
} |
||||
|
//商户名称 |
||||
|
const handleDeployType = (value) => { |
||||
|
setFormData({ ...formData, operate_name: value }) |
||||
|
} |
||||
|
//停车场名称 |
||||
|
const handleParkname = (v) => { |
||||
|
setFormData({ ...formData, park_name: v.target.value }) |
||||
|
} |
||||
|
const onHandleDateChange = (v) => { |
||||
|
setFormData({ |
||||
|
...formData, |
||||
|
start: v.startDateTime, |
||||
|
end: 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: 'park_name', |
||||
|
key: 'park_name', |
||||
|
}, |
||||
|
{ |
||||
|
title: '设备类型', |
||||
|
dataIndex: 'fault_type_name', |
||||
|
key: 'fault_type_name', |
||||
|
}, |
||||
|
{ |
||||
|
title: '上报人', |
||||
|
dataIndex: 'name', |
||||
|
key: 'name', |
||||
|
}, |
||||
|
{ |
||||
|
title: '故障原因', |
||||
|
dataIndex: 'reason', |
||||
|
key: 'reason', |
||||
|
}, |
||||
|
{ |
||||
|
title: '上报时间', |
||||
|
dataIndex: 'create_time', |
||||
|
key: 'create_time', |
||||
|
}] |
||||
|
|
||||
|
// 获取列表数据 |
||||
|
const getData = (data = formData) => { |
||||
|
setAjaxLoading(true) |
||||
|
ajax.getShowFaultReport(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('faultReport', { |
||||
|
value: { |
||||
|
} |
||||
|
}) |
||||
|
useEffect(() => { |
||||
|
console.log(location) |
||||
|
if (sessionTabList && Object.values(sessionTabList).length > 0) { |
||||
|
setFormData({ |
||||
|
road_name: sessionTabList?.road_name, |
||||
|
operate_name: sessionTabList?.operate_name, |
||||
|
park_name: sessionTabList?.park_name, |
||||
|
reason: sessionTabList?.reason, |
||||
|
name: sessionTabList?.name, |
||||
|
pn: sessionTabList?.pn, |
||||
|
page_size: sessionTabList?.page_size, |
||||
|
}) |
||||
|
} |
||||
|
}, []) |
||||
|
console.log(formData); |
||||
|
useEffect(() => { |
||||
|
setSessionTabList({ |
||||
|
...formData |
||||
|
}) |
||||
|
}, [formData]) |
||||
|
useEffect(() => { |
||||
|
getData() |
||||
|
merchantDataName() |
||||
|
}, []) |
||||
|
return <> |
||||
|
<div className="paid-faultReport"> |
||||
|
<div className="paid-search"> |
||||
|
<label className="search">查询条件</label> |
||||
|
<div className="yisa-search"> |
||||
|
<label>上报人</label> |
||||
|
<Input |
||||
|
style={{ width: 240, marginLeft: 29 }} |
||||
|
value={formData.name} |
||||
|
placeholder="请输入上报人" |
||||
|
onChange={handleName} |
||||
|
/> |
||||
|
</div> |
||||
|
<div className="yisa-search"> |
||||
|
<label>商户名称</label> |
||||
|
<Select |
||||
|
style={{ width: 240, marginLeft: 14 }} |
||||
|
// allowClear |
||||
|
value={formData.operate_name} |
||||
|
options={getMerchantDataName} |
||||
|
onChange={handleDeployType} |
||||
|
/> |
||||
|
</div> |
||||
|
<div className="yisa-search"> |
||||
|
<label>所属路段</label> |
||||
|
<Input |
||||
|
style={{ width: 240, marginLeft: 14 }} |
||||
|
value={formData.road_name} |
||||
|
placeholder="请输入所属路段" |
||||
|
onChange={handleRoadName} |
||||
|
/> |
||||
|
</div> |
||||
|
<div className="yisa-search"> |
||||
|
<label>停车场名称</label> |
||||
|
<Input |
||||
|
style={{ width: 240 }} |
||||
|
value={formData.park_name} |
||||
|
placeholder="请输入停车场名称" |
||||
|
onChange={handleParkname} |
||||
|
/> |
||||
|
</div> |
||||
|
<div className="yisa-search"> |
||||
|
<label>故障原因</label> |
||||
|
<TextArea |
||||
|
style={{ width: 240, marginLeft: 14 }} |
||||
|
value={formData.reason} |
||||
|
placeholder="请输入故障原因" |
||||
|
onChange={handleReason} |
||||
|
maxLength={10} |
||||
|
/> |
||||
|
</div> |
||||
|
<div className="timePicker "> |
||||
|
<FormSliderPicker |
||||
|
yisaLabel='上报时间' |
||||
|
defaultStartDateTime={moment(formData.start)} |
||||
|
defaultEndDateTime={moment(formData.end)} |
||||
|
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 faultReport; |
@ -0,0 +1,9 @@ |
|||||
|
import berthStatus from "./berthStatus" |
||||
|
import faultReport from "./faultReport" |
||||
|
import patrolStatistics from "./patrolStatistics" |
||||
|
|
||||
|
export default { |
||||
|
berthStatus, |
||||
|
faultReport, |
||||
|
patrolStatistics |
||||
|
} |
@ -0,0 +1,6 @@ |
|||||
|
import React from "react" |
||||
|
import loadable from "@loadable/component" |
||||
|
import { LoadingImg } from "@/components" |
||||
|
|
||||
|
const PatrolStatisticsLoadable = loadable(() => import("./loadable")) |
||||
|
export default (pros) => <PatrolStatisticsLoadable {...pros} fallback={<LoadingImg />} /> |
@ -0,0 +1,228 @@ |
|||||
|
@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-patrolStatistics{ |
||||
|
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; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.iconTipColor{ |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.iconModal{ |
||||
|
.iconChoose{ |
||||
|
text-align: center; |
||||
|
} |
||||
|
.submitBtn{ |
||||
|
text-align: center; |
||||
|
margin-top: 20px; |
||||
|
.submit{ |
||||
|
width: 80px; |
||||
|
height: 35px; |
||||
|
background: #409eff; |
||||
|
border: none; |
||||
|
border-radius: 4px; |
||||
|
cursor: pointer; |
||||
|
color: #fff; |
||||
|
} |
||||
|
.cancel{ |
||||
|
width: 80px; |
||||
|
height: 35px; |
||||
|
background: #3e4557; |
||||
|
border: none; |
||||
|
border-radius: 4px; |
||||
|
color: #fff; |
||||
|
cursor: pointer; |
||||
|
margin-left: 20px; |
||||
|
} |
||||
|
} |
||||
|
} |
@ -0,0 +1,375 @@ |
|||||
|
import React, { useState, useRef, useEffect } from "react"; |
||||
|
import { ResultFlowResult, FormSliderPicker } from "@/components" |
||||
|
import { Select, Button, Input, Table, message, Pagination, Modal, Radio } 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" |
||||
|
import { |
||||
|
DownloadOutlined |
||||
|
} from '@ant-design/icons'; |
||||
|
const { TextArea } = Input; |
||||
|
function patrolStatistics(props) { |
||||
|
const [ajaxLoading, setAjaxLoading] = useState(false) |
||||
|
const [resultData, setResultData] = useState({ |
||||
|
data: [], |
||||
|
total_records: 0, |
||||
|
export_url: '', |
||||
|
process_url: "" |
||||
|
}) |
||||
|
const parameter = { |
||||
|
road_name: '', |
||||
|
warning_type_name: '', |
||||
|
operate_name: '0', |
||||
|
park_name: '', |
||||
|
start: moment().format('YYYY-MM-DD 00:00:00'), |
||||
|
end: 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 [deleteVisible, setDeleteVisible] = useState(false) |
||||
|
//物品型号 |
||||
|
const handleRoadName = (v) => { |
||||
|
setFormData({ ...formData, road_name: v.target.value }) |
||||
|
} |
||||
|
//预警类型 |
||||
|
const handleWarningTypeName = (v) => { |
||||
|
setFormData({ ...formData, warning_type_name: v }) |
||||
|
} |
||||
|
//商户名称 |
||||
|
const handleDeployType = (value) => { |
||||
|
setFormData({ ...formData, operate_name: value }) |
||||
|
} |
||||
|
//停车场名称 |
||||
|
const handleParkname = (v) => { |
||||
|
setFormData({ ...formData, park_name: v.target.value }) |
||||
|
} |
||||
|
const onHandleDateChange = (v) => { |
||||
|
setFormData({ |
||||
|
...formData, |
||||
|
start: v.startDateTime, |
||||
|
end: v.endDateTime |
||||
|
}) |
||||
|
} |
||||
|
//导出 |
||||
|
const getExportData = () => { |
||||
|
let data = { |
||||
|
...formData |
||||
|
} |
||||
|
ajax.getBerthWarningListExport(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: 'park_name', |
||||
|
key: 'park_name', |
||||
|
}, |
||||
|
{ |
||||
|
title: '预警类型', |
||||
|
dataIndex: 'warning_type_name', |
||||
|
key: 'warning_type_name', |
||||
|
}, |
||||
|
{ |
||||
|
title: '预警时间', |
||||
|
dataIndex: 'create_time', |
||||
|
key: 'create_time', |
||||
|
}, |
||||
|
{ |
||||
|
title: '点位', |
||||
|
dataIndex: 'reason', |
||||
|
key: 'reason', |
||||
|
}, |
||||
|
{ |
||||
|
title: '处理状态', |
||||
|
render: (text, record) => { |
||||
|
return <div className="iconTipColor" onClick={() => iconBtn(record)}> |
||||
|
<DownloadOutlined style={{ color: '#409eff' }} /> |
||||
|
</div> |
||||
|
} |
||||
|
}] |
||||
|
const [getIconId, setGetIconId] = useState({}) |
||||
|
const iconBtn = (record) => { |
||||
|
setGetIconId(record) |
||||
|
setDeleteVisible(true) |
||||
|
} |
||||
|
const deleteModal = () => { |
||||
|
setDeleteVisible(false) |
||||
|
} |
||||
|
const [getChangeRideo, setGetchangeRideo] = useState({}) |
||||
|
const onChangeRideo = (e) => { |
||||
|
setGetchangeRideo(e.target.value) |
||||
|
} |
||||
|
const deleteModalBtn = () => { |
||||
|
let data = { |
||||
|
status: getChangeRideo, |
||||
|
id: getIconId.info_id |
||||
|
} |
||||
|
ajax.getChooseStatus(data).then(res => { |
||||
|
if (res.status === 20000) { |
||||
|
setDeleteVisible(false) |
||||
|
message.success('更新成功') |
||||
|
setGetchangeRideo({}) |
||||
|
} else { |
||||
|
message.error(res.message) |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
const placeBtn = () => { |
||||
|
setDeleteVisible(false) |
||||
|
setGetchangeRideo({}) |
||||
|
} |
||||
|
// 获取列表数据 |
||||
|
const getData = (data = formData) => { |
||||
|
setAjaxLoading(true) |
||||
|
ajax.getBerthWarningList(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('patrolStatistics', { |
||||
|
value: { |
||||
|
} |
||||
|
}) |
||||
|
useEffect(() => { |
||||
|
console.log(location) |
||||
|
if (sessionTabList && Object.values(sessionTabList).length > 0) { |
||||
|
setFormData({ |
||||
|
road_name: sessionTabList?.road_name, |
||||
|
operate_name: sessionTabList?.operate_name, |
||||
|
park_name: sessionTabList?.park_name, |
||||
|
warning_type_name: sessionTabList?.warning_type_name, |
||||
|
pn: sessionTabList?.pn, |
||||
|
start: sessionTabList?.start, |
||||
|
end: sessionTabList?.end, |
||||
|
page_size: sessionTabList?.page_size, |
||||
|
}) |
||||
|
} |
||||
|
}, []) |
||||
|
console.log(formData); |
||||
|
useEffect(() => { |
||||
|
setSessionTabList({ |
||||
|
...formData |
||||
|
}) |
||||
|
}, [formData]) |
||||
|
useEffect(() => { |
||||
|
getData() |
||||
|
merchantDataName() |
||||
|
}, []) |
||||
|
return <> |
||||
|
<div className="paid-patrolStatistics"> |
||||
|
<div className="paid-search"> |
||||
|
<label className="search">查询条件</label> |
||||
|
<div className="yisa-search"> |
||||
|
<label>预警类型</label> |
||||
|
<Select |
||||
|
style={{ width: 240, marginLeft: 14 }} |
||||
|
value={formData.warning_type_name} |
||||
|
options={sysConfig.warning_list} |
||||
|
onChange={handleWarningTypeName} |
||||
|
/> |
||||
|
</div> |
||||
|
<div className="yisa-search"> |
||||
|
<label>商户名称</label> |
||||
|
<Select |
||||
|
style={{ width: 240, marginLeft: 14 }} |
||||
|
// allowClear |
||||
|
value={formData.operate_name} |
||||
|
options={getMerchantDataName} |
||||
|
onChange={handleDeployType} |
||||
|
/> |
||||
|
</div> |
||||
|
<div className="yisa-search"> |
||||
|
<label>所属路段</label> |
||||
|
<Input |
||||
|
style={{ width: 240, marginLeft: 14 }} |
||||
|
value={formData.road_name} |
||||
|
placeholder="请输入所属路段" |
||||
|
onChange={handleRoadName} |
||||
|
/> |
||||
|
</div> |
||||
|
<div className="yisa-search"> |
||||
|
<label>停车场名称</label> |
||||
|
<Input |
||||
|
style={{ width: 240 }} |
||||
|
value={formData.park_name} |
||||
|
placeholder="请输入停车场名称" |
||||
|
onChange={handleParkname} |
||||
|
/> |
||||
|
</div> |
||||
|
<div className="timePicker "> |
||||
|
<FormSliderPicker |
||||
|
yisaLabel='上报时间' |
||||
|
defaultStartDateTime={moment(formData.start)} |
||||
|
defaultEndDateTime={moment(formData.end)} |
||||
|
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> |
||||
|
<Modal |
||||
|
visible={deleteVisible} |
||||
|
onCancel={deleteModal} |
||||
|
footer={null} |
||||
|
className="iconModal" |
||||
|
title='处理状态' |
||||
|
> |
||||
|
<div className="iconChoose"> |
||||
|
<Radio.Group onChange={onChangeRideo} value={getChangeRideo}> |
||||
|
<Radio value={1}>已处理</Radio> |
||||
|
<Radio value={2}>未处理</Radio> |
||||
|
<Radio value={3}>处理中</Radio> |
||||
|
</Radio.Group> |
||||
|
</div> |
||||
|
<div className="submitBtn"> |
||||
|
<button type="primary" className="submit" onClick={() => { deleteModalBtn() }}> |
||||
|
提交 |
||||
|
</button> |
||||
|
<button type="primary" className="cancel colorReset" onClick={() => { placeBtn() }}> |
||||
|
取消 |
||||
|
</button> |
||||
|
</div> |
||||
|
</Modal> |
||||
|
</> |
||||
|
} |
||||
|
|
||||
|
export default patrolStatistics; |
2527
src/router/menu.js
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
Write
Preview
Loading…
Cancel
Save
Reference in new issue