2 Commits
ebd9dbc016
...
eacc07349c
| Author | SHA1 | Message | Date |
|---|---|---|---|
陈宇航
|
eacc07349c |
Merge branch 'develop' of http://120.27.195.166:3000/chenglb/PMS_Frontend_v1.0.0 into develop
|
1 year ago |
|
陈宇航
|
b4986fd089 |
fix(): 处理系统表格和滚动条的问题等
|
1 year ago |
14 changed files with 465 additions and 49 deletions
-
51src/pages/OutRoadMgm/OutDeviceMgm/OutDevice/index.scss
-
3src/pages/OutRoadMgm/OutDeviceMgm/OutDevice/loadable.jsx
-
9src/pages/OutRoadMgm/OutDeviceMgm/OutMonitorMgm/index.scss
-
2src/pages/OutRoadMgm/OutDeviceMgm/OutMonitorMgm/loadable.jsx
-
9src/pages/OutRoadMgm/OutDeviceMgm/OutNvrMgm/index.scss
-
3src/pages/OutRoadMgm/OutDeviceMgm/OutNvrMgm/loadable.jsx
-
6src/pages/OutRoadMgm/OutPersonMgm/TollCollector/index.jsx
-
188src/pages/OutRoadMgm/OutPersonMgm/TransitionReport/index.jsx
-
17src/pages/OutRoadMgm/OutPersonMgm/TransitionReport/index.scss
-
148src/pages/OutRoadMgm/OutRemoteDevice/index.jsx
-
43src/pages/OutRoadMgm/OutRemoteDevice/index.scss
-
4src/pages/OutRoadMgm/index.jsx
-
7src/router/router.config.js
-
20src/services/OutRoadMgm/OutPersonMgm.js
@ -0,0 +1,148 @@ |
|||
|
|||
import React, { useState, useEffect } from "react"; |
|||
import { message, Pagination, Table, Select, Input, DatePicker, Button, Popover, Modal } from "antd"; |
|||
import { connect } from "react-redux"; |
|||
import loadable from "@loadable/component" |
|||
import { LoadingImg } from "@/components" |
|||
import { dictionary } from "@/config/common"; |
|||
import moment from "moment"; |
|||
import { useSessionStorageState } from "ahooks"; |
|||
import ajax from "@/services"; |
|||
import "./index.scss"; |
|||
|
|||
function OutRemoteDevice(props) { |
|||
const uid = props?.user?.userInfo?.user_uid; |
|||
console.log(uid); |
|||
// 默认数据 |
|||
const defaultData = { |
|||
pn: 1, |
|||
page_size: dictionary?.pageSizeOptions1[0] |
|||
}; |
|||
const [formData, setFormData] = useState(defaultData); // 表单数据 |
|||
const [loading, setLoading] = useState(false); // 检索按钮加载状态 |
|||
|
|||
// 表格返回数据 |
|||
const [resultData, setResultData] = useState({ |
|||
total_records: 0, |
|||
list: [], |
|||
}); |
|||
|
|||
// 列表 |
|||
const tableColumns = [ |
|||
{ |
|||
title: "序号", |
|||
width: 60, |
|||
align: "center", |
|||
fixed: 'left', |
|||
render: (text, record, index) => index + 1, |
|||
}, |
|||
{ |
|||
title: "版本", |
|||
dataIndex: "version_code", |
|||
key: "version_code", |
|||
align: "center", |
|||
render: (text, record, index) => text || "--", |
|||
}, |
|||
{ |
|||
title: "描述", |
|||
dataIndex: "note", |
|||
key: "note", |
|||
align: "center", |
|||
render: (text, record, index) => text || "--", |
|||
}, |
|||
]; |
|||
|
|||
// 分页 |
|||
const $changePn = (pn, page_size) => { |
|||
let temFormData = {}; |
|||
if (formData.page_size == page_size) { |
|||
temFormData = { |
|||
...formData, |
|||
pn |
|||
}; |
|||
} else { |
|||
temFormData = { |
|||
...formData, |
|||
pn: 1, |
|||
page_size, |
|||
}; |
|||
}; |
|||
setFormData(temFormData); |
|||
$getTableList(temFormData); |
|||
}; |
|||
|
|||
// 获取表格数据 |
|||
const $getTableList = (value = {}) => { |
|||
let _data = { |
|||
...formData, |
|||
...value |
|||
}; |
|||
setLoading(true); |
|||
setResultData({ list: [], total_records: 0 }); |
|||
ajax.getOutRemoteDeviceData(_data).then((res) => { |
|||
setLoading(false); |
|||
if (res.status === 20000) { |
|||
setResultData(res?.data || {}); |
|||
} else { |
|||
setLoading(false); |
|||
message.error(res.message); |
|||
} |
|||
}).catch((error) => { |
|||
setLoading(false); |
|||
message.error(error.message); |
|||
}); |
|||
}; |
|||
useEffect(() => { |
|||
$getTableList(); |
|||
}, []); |
|||
|
|||
return ( |
|||
<div className="remote-device-management"> |
|||
<div className="paid-result"> |
|||
<div className="result"> |
|||
<div className="row-head"> |
|||
<span className="number-wrapper">共查询到<span className="total-number"> {resultData.total_records || 0} </span>条结果</span> |
|||
<div > |
|||
<Button type="primary"> |
|||
前场管理系统升级 |
|||
</Button> |
|||
</div> |
|||
</div> |
|||
<div className="result-data"> |
|||
<Table |
|||
rowKey={(row) => row.id} |
|||
className="table yisa-table-scroll" |
|||
dataSource={resultData?.list || []} |
|||
columns={tableColumns} |
|||
pagination={false} |
|||
loading={loading} |
|||
scroll={{ y: "calc(100% - 50px)" }} |
|||
/> |
|||
<Pagination |
|||
className="pagination-common" |
|||
showSizeChanger={true} |
|||
showQuickJumper={true} |
|||
showTotal={() => `共 ${resultData.total_records || 0} 条`} |
|||
total={resultData.total_records} |
|||
current={formData.pn} |
|||
pageSize={formData.page_size} |
|||
pageSizeOptions={dictionary?.pageSizeOptions1} |
|||
onChange={$changePn} |
|||
/> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
); |
|||
} |
|||
|
|||
export default connect(function mapStateToProps(state) { |
|||
return { |
|||
user: state.user, |
|||
}; |
|||
})((props) => { |
|||
|
|||
return( |
|||
<OutRemoteDevice {...props} fallback={<LoadingImg />} /> |
|||
) |
|||
}) |
|||
@ -0,0 +1,43 @@ |
|||
@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); |
|||
|
|||
.remote-device-management { |
|||
padding-top: 10px; |
|||
width: 100%; |
|||
height: 100%; |
|||
.paid-result { |
|||
height: calc(100% - 40px); |
|||
margin: 20px; |
|||
padding: 20px; |
|||
background: var(--color-user-list-bg); |
|||
// border-top-left-radius: 20px; |
|||
box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.08); |
|||
.row-head { |
|||
height: 32px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
margin-bottom: 13px; |
|||
|
|||
.total-number { |
|||
margin: 0 2px; |
|||
color: var(--color-primary); |
|||
} |
|||
|
|||
.colorBtn { |
|||
height: 36px; |
|||
border-radius: 4px; |
|||
} |
|||
} |
|||
.result { |
|||
height: 100%; |
|||
.result-data { |
|||
width: 100%; |
|||
height: calc(100% - 45px - 47px); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue