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 ? (
<div className="tx-item">
<Image
@ -150,7 +150,7 @@ function Skssjc({data}) {
) : (
<div className="noPic">暂无数据</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></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="content">气象预警</div>
</div>
</div> */}
<div className="bodyBoxItem" onClick={()=>{setOpen(true);setkey('位移告警')}}>
<div className="num">{dataObj.shiftWarn?.length||0}</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) => {
let height;
let comHeight;
if (h1 & h2 & h3) {
if (h1 && h2 && h3) {
comHeight = (h1 - h3) / (h2 - h3)
// height = comHeight * 100 < 80 ? `${comHeight}%` : "80%"
height = `${comHeight * 80}%`
return height
return comHeight > 0 ? height : 10
} else {
return ''
}
@ -25,33 +26,33 @@ const MyImg = ({ record }) => {
return (
<div style={{
flexGrow: 1,
height: '300px',
height: '36vh',
overflow: 'hidden',
position: 'relative',
backgroundColor: "#eff3f6",
borderRadius:"2%"
borderRadius: "2%"
}}>
<img
src={`${process.env.PUBLIC_URL}/assets/images/waterz.png`}
style={
{
position: 'absolute',
bottom:computerHeight(record.rz,record.crestElev,record.deadLev),
bottom: computerHeight(record.rz, record.crestElev, record.deadLev),
// 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={
{
position: 'absolute',
left: 40,
// width: '65%',
bottom:computerHeight(record.desFloodLev,record.crestElev,record.deadLev),
bottom: computerHeight(record.desFloodLev, record.crestElev, record.deadLev),
display: 'flex',
alignItems: 'center',
gap: 8,
@ -61,29 +62,29 @@ const MyImg = ({ record }) => {
style={{
width: 90,
height: 15,
}}
}}
/>
<div style={{
// width: "210px",
// border: '2px solid #fff',
// backgroundColor: '#0bcbeb',
// padding: '2px 16px',
color:'#ff0a0a',
color: '#ff0a0a',
fontSize: 16,
justifyContent: 'space-between',
display: 'flex',
columnGap:10
columnGap: 10
}}>
设计洪水位 <strong>{record.desFloodLev?record.desFloodLev.toFixed(2):"-"}m</strong>
</div>
设计洪水位 <strong>{record.desFloodLev ? record.desFloodLev.toFixed(2) : "-"}m</strong>
</div>
</div>
<div style={
{
position: 'absolute',
left: 40,
// width: '65%',
bottom:computerHeight(record.flLowLimLev,record.crestElev,record.deadLev),
bottom: computerHeight(record.flLowLimLev, record.crestElev, record.deadLev),
display: 'flex',
alignItems: 'center',
gap: 8
@ -91,63 +92,50 @@ const MyImg = ({ record }) => {
<img src={`${process.env.PUBLIC_URL}/assets/images/orange.png`}
style={{
width: 90,
height:15
}}
height: 15
}}
/>
<div style={{
// width: "210px",
// border: '2px solid red',
// backgroundColor: '#0008',
// padding: '2px 16px',
color:'#ff7200',
color: '#ff7200',
fontSize: 16,
justifyContent: 'space-between',
display: 'flex',
columnGap:10
columnGap: 10
}}>
汛限水位 <strong>{record.flLowLimLev?record.flLowLimLev.toFixed(2):"-"}m</strong>
</div>
汛限水位 <strong>{record.flLowLimLev ? record.flLowLimLev.toFixed(2) : "-"}m</strong>
</div>
</div>
<div style={
{
position: 'absolute',
// left: 150,
// left:78,
width: '82%',
bottom:computerHeight(record.rz,record.crestElev,record.deadLev),
left:'40px',
// width: '82%',
bottom: computerHeight(record.rz, record.crestElev, record.deadLev),
display: 'flex',
alignItems: 'center',
gap: 8,
justifyContent: 'end',
}}>
<div style={{width:'105px',overflow:'hidden'}}>
<img src={`${process.env.PUBLIC_URL}/assets/images/blue2.png`}
style={{
flex:0.5,
// width: 30,
height:15
}}
/>
<div style={{display:'inline-block',width:"100px",overflow:'hidden'}}>
<img src={`${process.env.PUBLIC_URL}/assets/images/blue2.png`}
style={{
flex: 0.5,
// width: 60,
height: 15,
}}
/>
</div>
<div style={{
// flexGrow: 0.5,
// border: '2px solid #fff',
// 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 style={{color: '#06caff',fontSize: 16}}>
<div style={{ display: 'flex', columnGap: 10 }}>
<span style={{width:"4rem"}}>实时水位</span> <strong>{record.rz ? record.rz.toFixed(2) : "-"}m</strong>
</div>
</div>
</div>
<div style={{
position: 'absolute', left: 40,
@ -157,25 +145,20 @@ const MyImg = ({ record }) => {
<img src={`${process.env.PUBLIC_URL}/assets/images/white1.png`}
style={{
width: 90,
height:15
}}
height: 15
}}
/>
<div style={{
// width: "210px",
// border: '2px solid #fff',
// color: "#fff",
// backgroundColor: '#0bcbeb',
// padding: '2px 16px',
color:'#bfbfbf',
color: '#fff',
fontSize: 16,
justifyContent: 'space-between',
display: 'flex',
columnGap:10
columnGap: 10
}}>
死水位 <strong>{record.deadLev?record.deadLev.toFixed(2):''}m</strong>
</div>
死水位 <strong>{record.deadLev ? record.deadLev.toFixed(2) : ''}m</strong>
</div>
</div>
</div>
)
}