free-sun
/
Highways4Good
14
0
Fork 0
Code Issues Pull Requests 1 Projects Releases Wiki Activity
Browse Source

feat:首页管理卡片布局+注释console.log()

dev
zhaobing 2 years ago
parent
e82ddb016c
commit
8811dd5162
5 changed files with 132 additions and 73 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      web/client/src/sections/fillion/components/gis/patrolGis.js
  2. 2
      web/client/src/sections/fillion/components/maintenanceTable.js
  3. 4
      web/client/src/sections/fillion/components/patrolTable.js
  4. 4
      web/client/src/sections/fillion/containers/maintenanceSpotCheck.js
  5. 193
      web/client/src/sections/quanju/containers/footer/guanli/index.js

2
web/client/src/sections/fillion/components/gis/patrolGis.js
View File

@ -49,7 +49,7 @@ function PatrolGis(props) {
}, [userId, dateRange])
useEffect(() => {
console.log('userId', userId)
//console.log('userId', userId)
if (reportList && mapObj) {
mapObj.clearMap();
renderMarkers();

2
web/client/src/sections/fillion/components/maintenanceTable.js
View File

@ -91,7 +91,7 @@ const DetailForm = (props) => {
];
const renderContent = (data) => {
if (data) {
console.log('data1111', data)
// console.log('data1111', data)
if (moment(data.time).isAfter(moment('2023-08-03 00:00:00'))) {
return <div className='maintenanceNew'>
<Descriptions title="基础信息" bordered style={{ marginBottom: 20 }}>

4
web/client/src/sections/fillion/components/patrolTable.js
View File

@ -1063,12 +1063,12 @@ const PatrolTable = (props) => {
};
const handleChangeRecord = (newRecord) => {
console.log('userId', newRecord)
//console.log('userId', newRecord)
let target = null;
if (!recordCopy || (newRecord != recordCopy)) {
target = newRecord;
}
console.log('userId', target)
//console.log('userId', target)
setRecordCopy(target)
}

4
web/client/src/sections/fillion/containers/maintenanceSpotCheck.js
View File

@ -462,7 +462,7 @@ const MaintenanceSpotCheck = (props) => {
id: item.id
}
})
console.log('data1', data)
//console.log('data1', data)
setReportData(data)
}
})
@ -517,7 +517,7 @@ const MaintenanceSpotCheck = (props) => {
setVis(false)
}
}
console.log('setReportData', reportData)
//console.log('setReportData', reportData)
const lookhandler = () => {
if ((dateRange && dateRange instanceof Array && dateRange[0] != '')) {

193
web/client/src/sections/quanju/containers/footer/guanli/index.js
View File

@ -68,72 +68,116 @@ const Guanli = (props) => {
useEffect(() => {
requestleftDatas();
// requestRightDatas()
roadManagement()
}, [])
const renderContent = () => {
return <div style={{ height: "100%" }}>
{rightitemlist && rightitemlist.length !== 0 ? rightitemlist?.map(({ enforcementdate, enforcementreslt, roadname, picfile }, index) => {
if (index < 120) {
return <div key={index} className='guanli-right-item'>
<Tooltip title={<div className='popover-content'>
<div style={{ width: '100%', height: "100%", marginTop: "0",paddingBottom: 20, display: "flex" }}>
{picfile?.length > 0 ? <Carousel autoplay style={{ width: 200, height: 200, margin: "20px 0px 0px 20px" }}>
{picfile?.map(v => <img className='picfileimg'
style={{ width: 200, height: 200,display: 'inline-block', }}
// src={`/_file-server/${v.storageUrl}`}
src={v.url}
width={`200px`}
/>)}
</Carousel>
: <div style={{
width: 200, height: 200, margin: "20px 0px 0px 20px",
}} />
}
<div style={{ width: 240, marginLeft: 20, marginTop: 20, display: "flex", flexDirection: "column", justifyContent: "space-around" }}>
<p style={{ color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC", display: "flex" }}>
执法日期:<span style={{
color: "#EEF4FF", marginLeft: "10px", fontFamily: " PingFangSC-Medium, PingFang SC",
overflow: 'hidden', whiteSpace: "nowrap", textOverflow: "ellipsis"
}}>
{enforcementdate && moment(enforcementdate).format("YYYY-MM-DD") || "--"}
</span></p>
<p style={{ color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC", display: "flex" }}>
执法道路:<span title={roadname} style={{
color: "#EEF4FF", marginLeft: "10px", fontFamily: " PingFangSC-Medium, PingFang SC",
overflow: 'hidden', whiteSpace: "nowrap", textOverflow: "ellipsis", display: 'inline-block', width: 160
}}>
{roadname}
</span></p>
<p style={{ color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC", display: "flex" }}>
执法成果:<span title={enforcementreslt} style={{
color: "#EEF4FF", marginLeft: "10px", fontFamily: " PingFangSC-Medium, PingFang SC",
overflow: 'hidden', whiteSpace: "nowrap", textOverflow: "ellipsis", display: 'inline-block', width: 160
}}>
{enforcementreslt}</span></p>
</div>
</div>
</div>}
placement="leftTop"
overlayStyle={{ minWidth: 500, minHeight: 200, paddingTop: 10, margin: 0, backgroundImage: `url(../../../../../assets/images/leadership/beijinglan.png)` }}
overlayClassName='popover'
// const renderContent = () => {
// console.log('rightitemlist', rightitemlist)
// return <div style={{ height: "100%" }}>
// {rightitemlist && rightitemlist.length !== 0 ? rightitemlist?.map(({ enforcementdate, enforcementreslt, roadname, picfile }, index) => {
// if (index < 120) {
// return <div key={index} className='guanli-right-item'>
// <Tooltip title={<div className='popover-content'>
// <div style={{ width: '100%', height: "100%", marginTop: "0", paddingBottom: 20, display: "flex" }}>
// {picfile?.length > 0 ? <Carousel autoplay style={{ width: 200, height: 200, margin: "20px 0px 0px 20px" }}>
// {picfile?.map(v => <img className='picfileimg'
// style={{ width: 200, height: 200, display: 'inline-block', }}
// // src={`/_file-server/${v.storageUrl}`}
// src={v.url}
// width={`200px`}
// />)}
// </Carousel>
// : <div style={{
// width: 200, height: 200, margin: "20px 0px 0px 20px",
// }} />
// }
>
<div style={{ width: '100%', height: '100%', display: 'flex', color: "rgba(216, 240, 255, 0.8)" }}>
<div style={{ width: '50%', textAlign: "center", }}>{enforcementdate && moment(enforcementdate).format("YYYY-MM-DD") || "--"}</div>
<div title={enforcementreslt} style={{ width: '50%', textAlign: "center", overflow: 'hidden', whiteSpace: "nowrap", textOverflow: "ellipsis" }}>{enforcementreslt}</div>
</div>
</Tooltip>
// <div style={{ width: 240, marginLeft: 20, marginTop: 20, display: "flex", flexDirection: "column", justifyContent: "space-around" }}>
// <p style={{ color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC", display: "flex" }}>
// 执法日期:<span style={{
// color: "#EEF4FF", marginLeft: "10px", fontFamily: " PingFangSC-Medium, PingFang SC",
// overflow: 'hidden', whiteSpace: "nowrap", textOverflow: "ellipsis"
// }}>
// {enforcementdate && moment(enforcementdate).format("YYYY-MM-DD") || "--"}
// </span></p>
// <p style={{ color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC", display: "flex" }}>
// 执法道路:<span title={roadname} style={{
// color: "#EEF4FF", marginLeft: "10px", fontFamily: " PingFangSC-Medium, PingFang SC",
// overflow: 'hidden', whiteSpace: "nowrap", textOverflow: "ellipsis", display: 'inline-block', width: 160
// }}>
// {roadname}
// </span></p>
// <p style={{ color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC", display: "flex" }}>
// 执法成果:<span title={enforcementreslt} style={{
// color: "#EEF4FF", marginLeft: "10px", fontFamily: " PingFangSC-Medium, PingFang SC",
// overflow: 'hidden', whiteSpace: "nowrap", textOverflow: "ellipsis", display: 'inline-block', width: 160
// }}>
// {enforcementreslt}</span></p>
// </div>
// </div>
// </div>}
// placement="leftTop"
// overlayStyle={{ minWidth: 500, minHeight: 200, paddingTop: 10, margin: 0, backgroundImage: `url(../../../../../assets/images/leadership/beijinglan.png)` }}
// overlayClassName='popover'
// >
// <div style={{ width: '100%', height: '100%', display: 'flex', color: "rgba(216, 240, 255, 0.8)" }}>
// <div style={{ width: '50%', textAlign: "center", }}>{enforcementdate && moment(enforcementdate).format("YYYY-MM-DD") || "--"}</div>
// <div title={enforcementreslt} style={{ width: '50%', textAlign: "center", overflow: 'hidden', whiteSpace: "nowrap", textOverflow: "ellipsis" }}>{enforcementreslt}</div>
// </div>
// </Tooltip>
// </div>
// }
// }) : ""}
// </div>
// }
const renderContent = rightitemlist.map(({ enforcementdate, enforcementreslt, roadname, picfile }, index) => {
return (
<div key={index} style={{ width: '100%', }} className='carCard'>
<div style={{ width: '90%', height: '96%', margin: '2% 5%', overflow: 'hidden', display: "flex" }}>
{picfile?.length > 0 ? <Carousel autoplay style={{ width: 200, height: 200, margin: "20px 0px 0px 20px" }}>
{picfile?.map(v => <div style={{ width: 200, height: 200 }}>
<img className='picfileimg'
style={{ width: 200, height: 150, display: 'inline-block', }}
// src={`/_file-server/${v.storageUrl}`}
src={v.url}
width={`200px`}
/>
</div>)}
</Carousel>
: <div style={{
width: 200, height: 200, margin: "20px 0px 0px 20px",
}} />
}
<div style={{ width: 240, marginLeft: 20, marginTop: 20, display: "flex", flexDirection: "column", justifyContent: "space-around" }}>
<p style={{ whiteSpace: "nowrap", color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC", display: "flex" }}>
执法日期:<span style={{
color: "#EEF4FF", marginLeft: "10px", fontFamily: " PingFangSC-Medium, PingFang SC",
overflow: 'hidden', whiteSpace: "nowrap", textOverflow: "ellipsis"
}}>
{enforcementdate && moment(enforcementdate).format("YYYY-MM-DD") || "--"}
</span></p>
<p style={{ whiteSpace: "nowrap", color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC", display: "flex" }}>
执法道路:<span title={roadname} style={{
color: "#EEF4FF", marginLeft: "10px", fontFamily: " PingFangSC-Medium, PingFang SC",
overflow: 'hidden', whiteSpace: "nowrap", textOverflow: "ellipsis", display: 'inline-block', width: 160
}}>
{roadname}
</span></p>
<p style={{ whiteSpace: "nowrap", color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC", display: "flex" }}>
执法成果:<span title={enforcementreslt} style={{
color: "#EEF4FF", marginLeft: "10px", fontFamily: " PingFangSC-Medium, PingFang SC",
overflow: 'hidden', whiteSpace: "nowrap", textOverflow: "ellipsis", display: 'inline-block', width: 160
}}>
{enforcementreslt}</span></p>
</div>
}
}) : ""}
</div>
}
</div>
</div>
)
})
const renderLeftContent = () => {
// setleftDatas(leftDatas=>leftDatas.sort((a,b)=>b.total - a.total))
@ -143,6 +187,7 @@ const Guanli = (props) => {
}
// renderContent()
// console.log(' renderContent.length', renderContent.length)
return (
<>
<div className='guanli-left'>
@ -169,19 +214,33 @@ const Guanli = (props) => {
<span>处罚</span>
<span>处理日期</span>
</div> */}
<div style={{ width: "90%",margin:"auto", display: "flex", color: "#FFF" }}>
{/* <div style={{ width: "90%", margin: "auto", display: "flex", color: "#FFF" }}>
<div style={{ width: '50%', textAlign: "center" }}>执法日期</div>
<div style={{ width: '50%', textAlign: "center", }}>执法成果</div>
</div>
{rightitemlist && rightitemlist.length !== 0 ? <AutoRollComponent content={renderContent()}
containerStyle={{ position: "relative", height: "90%", }}
</div> */}
{rightitemlist && rightitemlist.length !== 0 ? <AutoRollComponent content={renderContent}
containerStyle={{ position: "relative", height: "100%", }}
divHeight={"100%"} divId={"chart-overview-deviceList"} /> : <NoData style={{ height: "20%" }} />}
{/* {
renderContent.length > 3 ? <Carousel
autoplay
infinite
// autoplaySpeed={300000}
autoplaySpeed={1000 * 3}
vertical={true}
//slidesToShow={3}
>
{renderContent}
</Carousel> : renderContent
} */}
</Module>
</div>
</div >
</>
)
}
function mapStateToProps (state) {
function mapStateToProps(state) {
const { auth, depMessage, global } = state;
const pakData = (dep) => {
return dep.map((d) => {

Write Preview
Loading…
Cancel
Save