lishenfeng
/
tsg-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改首页水库img

qzc-dev-demo
秦子超 2025-04-08 16:08:04 +08:00
parent 0b96d442dd
commit 631899e393
3 changed files with 47 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/views/Home/MapCtrl/components/Skssjc/index.js
View File

@ -131,7 +131,7 @@ function Skssjc({data}) {
) )
} }
{ {/* {
imgList.length > 0 ? ( imgList.length > 0 ? (
<div className="tx-item"> <div className="tx-item">
<Image <Image
@ -150,7 +150,7 @@ function Skssjc({data}) {
) : ( ) : (
<div className="noPic">暂无数据</div> <div className="noPic">暂无数据</div>
) )
} } */}
</div> </div>
</div> </div>

4
src/views/Home/homePanelsLayoutPage/item_yujing/index.js
View File

@ -61,10 +61,10 @@ const Page = ({mySetTms}) => {
<div className="content">超汛限告警</div> <div className="content">超汛限告警</div>
<div></div> <div></div>
</div> </div>
<div className="bodyBoxItem" onClick={()=>{setOpen(true);setkey('气象预警')}}> {/* <div className="bodyBoxItem" onClick={()=>{setOpen(true);setkey('气象预警')}}>
<div className="num">{dataObj.qxWarn?.length||0}</div> <div className="num">{dataObj.qxWarn?.length||0}</div>
<div className="content">气象预警</div> <div className="content">气象预警</div>
</div> </div> */}
<div className="bodyBoxItem" onClick={()=>{setOpen(true);setkey('位移告警')}}> <div className="bodyBoxItem" onClick={()=>{setOpen(true);setkey('位移告警')}}>
<div className="num">{dataObj.shiftWarn?.length||0}</div> <div className="num">{dataObj.shiftWarn?.length||0}</div>
<div className="content">位移告警</div> <div className="content">位移告警</div>

103
src/views/Home/homePanelsLayoutPage/myImg.js
View File

@ -13,11 +13,12 @@ const MyImg = ({ record }) => {
const computerHeight = (h1, h2, h3) => { const computerHeight = (h1, h2, h3) => {
let height; let height;
let comHeight; let comHeight;
if (h1 & h2 & h3) { if (h1 && h2 && h3) {
comHeight = (h1 - h3) / (h2 - h3) comHeight = (h1 - h3) / (h2 - h3)
// height = comHeight * 100 < 80 ? `${comHeight}%` : "80%" // height = comHeight * 100 < 80 ? `${comHeight}%` : "80%"
height = `${comHeight * 80}%` height = `${comHeight * 80}%`
return height return comHeight > 0 ? height : 10
} else { } else {
return '' return ''
} }
@ -25,33 +26,33 @@ const MyImg = ({ record }) => {
return ( return (
<div style={{ <div style={{
flexGrow: 1, flexGrow: 1,
height: '300px', height: '36vh',
overflow: 'hidden', overflow: 'hidden',
position: 'relative', position: 'relative',
backgroundColor: "#eff3f6", backgroundColor: "#eff3f6",
borderRadius:"2%" borderRadius: "2%"
}}> }}>
<img <img
src={`${process.env.PUBLIC_URL}/assets/images/waterz.png`} src={`${process.env.PUBLIC_URL}/assets/images/waterz.png`}
style={ style={
{ {
position: 'absolute', position: 'absolute',
bottom:computerHeight(record.rz,record.crestElev,record.deadLev), bottom: computerHeight(record.rz, record.crestElev, record.deadLev),
// top: '50%' // top: '50%'
transform:"translateY(100%)" transform: "translateY(100%)"
}} }}
/> />
<img src={`${process.env.PUBLIC_URL}/assets/images/dam.png`} style={{ position: 'absolute', bottom: 0, height: '100%', right: -20 }} /> <img src={`${process.env.PUBLIC_URL}/assets/images/dam.png`} style={{ position: 'absolute', bottom: 0, height: '100%', right: -20 }} />
<img src={`${process.env.PUBLIC_URL}/assets/images/ruler.png`} style={{ position: 'absolute', bottom: 0, height: '100%', left: 20 }} /> <img src={`${process.env.PUBLIC_URL}/assets/images/ruler.png`} style={{ position: 'absolute', bottom: 0, height: '100%', left: 20 }} />
<div style={ <div style={
{ {
position: 'absolute', position: 'absolute',
left: 40, left: 40,
// width: '65%', // width: '65%',
bottom:computerHeight(record.desFloodLev,record.crestElev,record.deadLev), bottom: computerHeight(record.desFloodLev, record.crestElev, record.deadLev),
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
gap: 8, gap: 8,
@ -61,29 +62,29 @@ const MyImg = ({ record }) => {
style={{ style={{
width: 90, width: 90,
height: 15, height: 15,
}} }}
/> />
<div style={{ <div style={{
// width: "210px", // width: "210px",
// border: '2px solid #fff', // border: '2px solid #fff',
// backgroundColor: '#0bcbeb', // backgroundColor: '#0bcbeb',
// padding: '2px 16px', // padding: '2px 16px',
color:'#ff0a0a', color: '#ff0a0a',
fontSize: 16, fontSize: 16,
justifyContent: 'space-between', justifyContent: 'space-between',
display: 'flex', display: 'flex',
columnGap:10 columnGap: 10
}}> }}>
设计洪水位 <strong>{record.desFloodLev?record.desFloodLev.toFixed(2):"-"}m</strong> 设计洪水位 <strong>{record.desFloodLev ? record.desFloodLev.toFixed(2) : "-"}m</strong>
</div>
</div> </div>
</div>
<div style={ <div style={
{ {
position: 'absolute', position: 'absolute',
left: 40, left: 40,
// width: '65%', // width: '65%',
bottom:computerHeight(record.flLowLimLev,record.crestElev,record.deadLev), bottom: computerHeight(record.flLowLimLev, record.crestElev, record.deadLev),
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
gap: 8 gap: 8
@ -91,63 +92,50 @@ const MyImg = ({ record }) => {
<img src={`${process.env.PUBLIC_URL}/assets/images/orange.png`} <img src={`${process.env.PUBLIC_URL}/assets/images/orange.png`}
style={{ style={{
width: 90, width: 90,
height:15 height: 15
}} }}
/> />
<div style={{ <div style={{
// width: "210px", // width: "210px",
// border: '2px solid red', // border: '2px solid red',
// backgroundColor: '#0008', // backgroundColor: '#0008',
// padding: '2px 16px', // padding: '2px 16px',
color:'#ff7200', color: '#ff7200',
fontSize: 16, fontSize: 16,
justifyContent: 'space-between', justifyContent: 'space-between',
display: 'flex', display: 'flex',
columnGap:10 columnGap: 10
}}> }}>
汛限水位 <strong>{record.flLowLimLev?record.flLowLimLev.toFixed(2):"-"}m</strong> 汛限水位 <strong>{record.flLowLimLev ? record.flLowLimLev.toFixed(2) : "-"}m</strong>
</div>
</div> </div>
</div>
<div style={ <div style={
{ {
position: 'absolute', position: 'absolute',
// left: 150, left:'40px',
// left:78, // width: '82%',
width: '82%', bottom: computerHeight(record.rz, record.crestElev, record.deadLev),
bottom:computerHeight(record.rz,record.crestElev,record.deadLev),
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
gap: 8, gap: 8,
justifyContent: 'end', justifyContent: 'end',
}}> }}>
<div style={{width:'105px',overflow:'hidden'}}> <div style={{display:'inline-block',width:"100px",overflow:'hidden'}}>
<img src={`${process.env.PUBLIC_URL}/assets/images/blue2.png`} <img src={`${process.env.PUBLIC_URL}/assets/images/blue2.png`}
style={{ style={{
flex:0.5, flex: 0.5,
// width: 30, // width: 60,
height:15 height: 15,
}} }}
/> />
</div> </div>
<div style={{ <div style={{color: '#06caff',fontSize: 16}}>
// flexGrow: 0.5, <div style={{ display: 'flex', columnGap: 10 }}>
// border: '2px solid #fff', <span style={{width:"4rem"}}>实时水位</span> <strong>{record.rz ? record.rz.toFixed(2) : "-"}m</strong>
// color: "#fff",
// backgroundColor:
// '#0008',
// padding: '2px 16px',
color:'#06caff',
fontSize: 16,
}}>
<div style={{
// justifyContent: 'space-between',
display: 'flex',
columnGap:10
}}> <span>实时水位</span> <strong>{record.rz?record.rz.toFixed(2):"-"}m</strong></div>
{/* <div style={{ justifyContent: 'space-between', display: 'flex'}}> <span>库容</span> <strong>{record.totCap}m³</strong></div> */}
</div> </div>
</div> </div>
</div>
<div style={{ <div style={{
position: 'absolute', left: 40, position: 'absolute', left: 40,
@ -157,25 +145,20 @@ const MyImg = ({ record }) => {
<img src={`${process.env.PUBLIC_URL}/assets/images/white1.png`} <img src={`${process.env.PUBLIC_URL}/assets/images/white1.png`}
style={{ style={{
width: 90, width: 90,
height:15 height: 15
}} }}
/> />
<div style={{ <div style={{
// width: "210px", color: '#fff',
// border: '2px solid #fff',
// color: "#fff",
// backgroundColor: '#0bcbeb',
// padding: '2px 16px',
color:'#bfbfbf',
fontSize: 16, fontSize: 16,
justifyContent: 'space-between', justifyContent: 'space-between',
display: 'flex', display: 'flex',
columnGap:10 columnGap: 10
}}> }}>
死水位 <strong>{record.deadLev?record.deadLev.toFixed(2):''}m</strong> 死水位 <strong>{record.deadLev ? record.deadLev.toFixed(2) : ''}m</strong>
</div>
</div> </div>
</div> </div>
</div>
) )
} }