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
Unified 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. 191
      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]) }, [userId, dateRange])
useEffect(() => { useEffect(() => {
console.log('userId', userId) //console.log('userId', userId)
if (reportList && mapObj) { if (reportList && mapObj) {
mapObj.clearMap(); mapObj.clearMap();
renderMarkers(); renderMarkers();

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

@ -91,7 +91,7 @@ const DetailForm = (props) => {
]; ];
const renderContent = (data) => { const renderContent = (data) => {
if (data) { if (data) {
console.log('data1111', data) // console.log('data1111', data)
if (moment(data.time).isAfter(moment('2023-08-03 00:00:00'))) { if (moment(data.time).isAfter(moment('2023-08-03 00:00:00'))) {
return <div className='maintenanceNew'> return <div className='maintenanceNew'>
<Descriptions title="基础信息" bordered style={{ marginBottom: 20 }}> <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) => { const handleChangeRecord = (newRecord) => {
console.log('userId', newRecord) //console.log('userId', newRecord)
let target = null; let target = null;
if (!recordCopy || (newRecord != recordCopy)) { if (!recordCopy || (newRecord != recordCopy)) {
target = newRecord; target = newRecord;
} }
console.log('userId', target) //console.log('userId', target)
setRecordCopy(target) setRecordCopy(target)
} }

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

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

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

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

Write Preview
Loading…
Cancel
Save