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

feat():渗流监测表格添加更多信息

qzc-dev
李神峰 2025-10-17 16:41:45 +08:00
parent 04728a9ca1
commit 636f422c48
2 changed files with 171 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/views/Home/homePanelsLayoutPage/item_gongcheng.js
View File

@ -13,7 +13,9 @@ import moment from 'moment';
const Page = () => { const Page = () => {
const dispatch = useDispatch(); const dispatch = useDispatch();
const [ tableData, setTableData ] = useState([]) const [ tableData, setTableData ] = useState([])
const [ checked, setChecked ] = useState('渗压监测') const [checked, setChecked] = useState('渗压监测')
const [filteredWyList, setFilteredWyList] = useState([]) // 添加过滤后的位移列表状态
const [showAllWyData, setShowAllWyData] = useState(false) // 控制是否显示所有数据
const columns = useMemo(() => { const columns = useMemo(() => {
if(checked==='渗压监测'){ if(checked==='渗压监测'){
return [ return [
@ -57,6 +59,15 @@ const Page = () => {
message.error('查询失败') message.error('查询失败')
return return
} }
if (val === '位移监测') {
// 过滤符合条件的数据：监测点为ZY开头且有监测时间和x、y、h方向的值
const filtered = data?.filter(item =>
item.de ||
item.dn ||
item.du
) || [];
setFilteredWyList(filtered)
}
setChecked(val) setChecked(val)
setTableData(data) setTableData(data)
console.log('list',data) console.log('list',data)
@ -89,12 +100,13 @@ const Page = () => {
<Table rowKey="stationCode" <Table rowKey="stationCode"
sticky sticky
columns={columns} columns={columns}
pagination={checked == '位移监测' ?{ pagination={false}
pageSize: 100, // pagination={checked == '位移监测' ?{
showSizeChanger: true, // pageSize: 100,
pageSizeOptions: [ '100', '200']}:false} // showSizeChanger: true,
dataSource={tableData} // pageSizeOptions: [ '100', '200']}:false}
scroll={{ y: "300px"}} dataSource={checked != '位移监测' ?tableData : showAllWyData?tableData:filteredWyList}
scroll={{ y: "650px"}}
onRow={ onRow={
(data)=>({ (data)=>({
onClick:()=>{ onClick:()=>{
@ -109,6 +121,11 @@ const Page = () => {
}) })
} }
/> />
{checked == '位移监测' &&<div style={{ display: 'flex', justifyContent: 'center', marginTop: '10px' }}>
<a onClick={() => setShowAllWyData(!showAllWyData)}>
{showAllWyData ? '收起更多信息' : '更多信息'}
</a>
</div>}
</div> </div>
</div> </div>
</> </>

272
src/views/gcaqjc/bzt2/index.js
View File

@ -1,5 +1,5 @@
import React, { useState, useEffect,useMemo,useRef } from 'react' import React, { useState, useEffect, useMemo, useRef } from 'react'
import { Table, Tabs,Modal,message,Tooltip } from 'antd'; import { Table, Tabs, Modal, message, Tooltip } from 'antd';
import { useDispatch, useSelector } from 'react-redux' import { useDispatch, useSelector } from 'react-redux'
import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch"; import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
import Draggable from 'react-draggable'; import Draggable from 'react-draggable';
@ -13,17 +13,21 @@ import TuLi from '../../Home/TuLi/Tuli6.js';
import './index.less' import './index.less'
export default function Page({isHome}) { export default function Page({ isHome }) {
const dispatch = useDispatch(); const dispatch = useDispatch();
const [shouqi,setShouQi] = useState(false) const [shouqi, setShouQi] = useState(false)
const [syList,setSyList] = useState([]) const [syList, setSyList] = useState([])
const [slList,setSlList] = useState([]) const [slList, setSlList] = useState([])
const [wyList,setWyList] = useState([]) const [wyList, setWyList] = useState([])
const [dmList,setDmList] = useState([]) const [dmList, setDmList] = useState([])
const [openSy, setOpenSy] = useState(false) const [openSy, setOpenSy] = useState(false)
const [openSl, setOpenSl] = useState(false) const [openSl, setOpenSl] = useState(false)
const [openWy, setOpenWy] = useState(false) const [openWy, setOpenWy] = useState(false)
const [openDm, setOpenDm] = useState(false) const [openDm, setOpenDm] = useState(false)
const [filteredWyList, setFilteredWyList] = useState([]) // 添加过滤后的位移列表状态
const [showAllWyData, setShowAllWyData] = useState(false) // 控制是否显示所有数据
const myWidth = window.innerWidth const myWidth = window.innerWidth
const myHeight = window.innerHeight const myHeight = window.innerHeight
@ -31,67 +35,75 @@ export default function Page({isHome}) {
const columnsSy = [ const columnsSy = [
{ title: '监测点', key: 'stationCode', dataIndex: 'stationCode',align: "center", ellipsis: true }, { title: '监测点', key: 'stationCode', dataIndex: 'stationCode', align: "center", ellipsis: true },
{ title: '所属断面', key: 'profileName', dataIndex: 'profileName',width: 110,align: "center", ellipsis: true }, { title: '所属断面', key: 'profileName', dataIndex: 'profileName', width: 110, align: "center", ellipsis: true },
{ title: '监测时间', key: 'tm', dataIndex: 'tm',align: "center",width: 110, ellipsis: true, render:(v,row)=><div style={{color:row.flag===1?'red':'#3B4859'}}>{v?.slice(5,16)}</div> }, { title: '监测时间', key: 'tm', dataIndex: 'tm', align: "center", width: 110, ellipsis: true, render: (v, row) => <div style={{ color: row.flag === 1 ? 'red' : '#3B4859' }}>{v?.slice(5, 16)}</div> },
{ title: '管水位(m)', key: 'value', dataIndex: 'value',align: "center", ellipsis: true, render:(v,row)=><div style={{color:row.status===1?'red':'#3B4859'}}>{v}</div> }, { title: '管水位(m)', key: 'value', dataIndex: 'value', align: "center", ellipsis: true, render: (v, row) => <div style={{ color: row.status === 1 ? 'red' : '#3B4859' }}>{v}</div> },
] ]
const columnsSl = [ const columnsSl = [
{ title: '监测点', key: 'stationCode', dataIndex: 'stationCode',align: "center", ellipsis: true }, { title: '监测点', key: 'stationCode', dataIndex: 'stationCode', align: "center", ellipsis: true },
{ title: '监测时间', key: 'tm', dataIndex: 'tm',align: "center",width: 150, ellipsis: true, render:(v,row)=><div style={{color:row.flag===1?'red':'#3B4859'}}>{v?.slice(5,16)}</div> }, { title: '监测时间', key: 'tm', dataIndex: 'tm', align: "center", width: 150, ellipsis: true, render: (v, row) => <div style={{ color: row.flag === 1 ? 'red' : '#3B4859' }}>{v?.slice(5, 16)}</div> },
{ title: '渗流量(L/s)', key: 'value', dataIndex: 'value',align: "center", ellipsis: true, render:(v,row)=><div style={{color:row.status===1?'red':'#3B4859'}}>{v}</div> }, { title: '渗流量(L/s)', key: 'value', dataIndex: 'value', align: "center", ellipsis: true, render: (v, row) => <div style={{ color: row.status === 1 ? 'red' : '#3B4859' }}>{v}</div> },
] ]
const columnsWy = [ const columnsWy = [
{ title: '监测点', key: 'cdnm', dataIndex: 'cdnm',align: "center",width: 150, ellipsis: true }, { title: '监测点', key: 'cdnm', dataIndex: 'cdnm', align: "center", width: 150, ellipsis: true },
{ title: '监测时间', key: 'tm', dataIndex: 'tm',align: "center",width: 80, ellipsis: true, render:(v,row)=><div style={{color:row.flag===1?'red':'#3B4859'}}><div>{v?.slice(5,10)}</div><div>{v?.slice(11,16)||'-'}</div></div> }, { title: '监测时间', key: 'tm', dataIndex: 'tm', align: "center", width: 80, ellipsis: true, render: (v, row) => <div style={{ color: row.flag === 1 ? 'red' : '#3B4859' }}><div>{v?.slice(5, 10)}</div><div>{v?.slice(11, 16) || '-'}</div></div> },
{ title: <div><div>x方向</div><div>(mm)</div></div>, key: 'de', dataIndex: 'de',align: "center", ellipsis: true, render:(v,row)=><div style={{color:row.xstatus===1?'red':'#3B4859'}}>{v||'-'}</div> }, { title: <div><div>x方向</div><div>(mm)</div></div>, key: 'de', dataIndex: 'de', align: "center", ellipsis: true, render: (v, row) => <div style={{ color: row.xstatus === 1 ? 'red' : '#3B4859' }}>{v || '-'}</div> },
{ title: <div><div>y方向</div><div>(mm)</div></div>, key: 'dn', dataIndex: 'dn',align: "center", ellipsis: true, render:(v,row)=><div style={{color:row.ystatus===1?'red':'#3B4859'}}>{v||'-'}</div> }, { title: <div><div>y方向</div><div>(mm)</div></div>, key: 'dn', dataIndex: 'dn', align: "center", ellipsis: true, render: (v, row) => <div style={{ color: row.ystatus === 1 ? 'red' : '#3B4859' }}>{v || '-'}</div> },
{ title: <div><div>h方向</div><div>(mm)</div></div>, key: 'du', dataIndex: 'du',align: "center", ellipsis: true, render:(v,row)=><div style={{color:row.hstatus===1?'red':'#3B4859'}}>{v||'-'}</div> }, { title: <div><div>h方向</div><div>(mm)</div></div>, key: 'du', dataIndex: 'du', align: "center", ellipsis: true, render: (v, row) => <div style={{ color: row.hstatus === 1 ? 'red' : '#3B4859' }}>{v || '-'}</div> },
] ]
useEffect(()=>{ useEffect(() => {
getSyData() getSyData()
getSlData() getSlData()
getWyData() getWyData()
getDmData() getDmData()
},[]) }, [])
const getSyData = async()=>{ const getSyData = async () => {
const {code, data} = await httpget2(apiurl.home.sy) const { code, data } = await httpget2(apiurl.home.sy)
if(code!==200){ if (code !== 200) {
return return
} }
setSyList(data||[]) setSyList(data || [])
} }
const getSlData = async()=>{ const getSlData = async () => {
const {code, data} = await httpget2(apiurl.home.sl) const { code, data } = await httpget2(apiurl.home.sl)
if(code!==200){ if (code !== 200) {
return return
} }
setSlList(data||[]) setSlList(data || [])
} }
const getWyData = async()=>{ const getWyData = async () => {
const {code, data} = await httpget2(apiurl.home.wy) const { code, data } = await httpget2(apiurl.home.wy)
if(code!==200){ if (code !== 200) {
return return
} }
const list = data?.map((item) => ({ ...item, stationCode: item.cd })) const list = data?.map((item) => ({ ...item, stationCode: item.cd }))
setWyList(list||[]) setWyList(list || [])
// 过滤符合条件的数据：监测点为ZY开头且有监测时间和x、y、h方向的值
const filtered = list?.filter(item =>
item.de ||
item.dn ||
item.du
) || []
setFilteredWyList(filtered)
} }
const getDmData = async()=>{ const getDmData = async () => {
const {code, data} = await httppost2(apiurl.home.dmList) const { code, data } = await httppost2(apiurl.home.dmList)
if(code!==200){ if (code !== 200) {
return return
} }
console.log('断面',data) console.log('断面', data)
setDmList(data) setDmList(data)
} }
@ -101,47 +113,47 @@ export default function Page({isHome}) {
<TransformWrapper <TransformWrapper
limitToBounds={false} limitToBounds={false}
initialScale={0.7} initialScale={0.7}
initialPositionX={((myWidth-660)/2)-(isHome?450:750)} initialPositionX={((myWidth - 660) / 2) - (isHome ? 450 : 750)}
initialPositionY={((myHeight-60)/2)-(isHome?500:430)} initialPositionY={((myHeight - 60) / 2) - (isHome ? 500 : 430)}
maxScale={100} maxScale={100}
minScale={0.5} minScale={0.5}
> >
<TransformComponent> <TransformComponent>
<div style={{width:'calc( 100vw - 320px)',height:'calc( 100vh - 85px)',position:'relative'}}> <div style={{ width: 'calc( 100vw - 320px)', height: 'calc( 100vh - 85px)', position: 'relative' }}>
<img width={1500} src={`${process.env.PUBLIC_URL}/assets/xyt/fxdd/bzt6.svg`} alt="" id="img" draggable="false" /> <img width={1500} src={`${process.env.PUBLIC_URL}/assets/xyt/fxdd/bzt6.svg`} alt="" id="img" draggable="false" />
{ {
syList.map((item)=> syList.map((item) =>
<div className={'gcaqjc_bzt_sy_'+item.stationCode} onClick={()=>{ <div className={'gcaqjc_bzt_sy_' + item.stationCode} onClick={() => {
setOpenSy(true) setOpenSy(true)
setModalData(item) setModalData(item)
}}> }}>
<span>{item.stationCode}</span> <span>{item.stationCode}</span>
<img width={10} height={10} style={{marginTop:'-4px'}} src={`${process.env.PUBLIC_URL}/assets/xyt/fxdd/${item.status===1?'sy2.png':'sy.png'}`} alt="" id="img" draggable="false" /> <img width={10} height={10} style={{ marginTop: '-4px' }} src={`${process.env.PUBLIC_URL}/assets/xyt/fxdd/${item.status === 1 ? 'sy2.png' : 'sy.png'}`} alt="" id="img" draggable="false" />
</div> </div>
) )
} }
{ {
slList.map((item)=> slList.map((item) =>
<div className={'gcaqjc_bzt_sl_'+item.stationCode} onClick={()=>{ <div className={'gcaqjc_bzt_sl_' + item.stationCode} onClick={() => {
setOpenSl(true) setOpenSl(true)
setModalData(item) setModalData(item)
}}> }}>
<span>{item.stationCode}</span> <span>{item.stationCode}</span>
<img width={10} height={10} style={{marginTop:'-4px'}} src={`${process.env.PUBLIC_URL}/assets/xyt/fxdd/${item.status===1?'sl2.png':'sl.png'}`} alt="" id="img" draggable="false" /> <img width={10} height={10} style={{ marginTop: '-4px' }} src={`${process.env.PUBLIC_URL}/assets/xyt/fxdd/${item.status === 1 ? 'sl2.png' : 'sl.png'}`} alt="" id="img" draggable="false" />
</div> </div>
) )
} }
{ {
wyList.map((item)=> wyList.map((item) =>
<div <div
className={'gcaqjc_bzt_wy_'+item.cdnm} className={'gcaqjc_bzt_wy_' + item.cdnm}
onClick={()=>{ onClick={() => {
setOpenWy(true) setOpenWy(true)
setModalData(item) setModalData(item)
}} }}
> >
<span>{item.cdnm}</span> <span>{item.cdnm}</span>
<img width={10} height={10} style={{marginTop:'-4px'}} src={`${process.env.PUBLIC_URL}/assets/xyt/fxdd/${(item.xstatus===1||item.ystatus===1||item.hstatus===1)?'wy2.png':'wy.png'}`} alt="" id="img" draggable="false" /> <img width={10} height={10} style={{ marginTop: '-4px' }} src={`${process.env.PUBLIC_URL}/assets/xyt/fxdd/${(item.xstatus === 1 || item.ystatus === 1 || item.hstatus === 1) ? 'wy2.png' : 'wy.png'}`} alt="" id="img" draggable="false" />
</div> </div>
) )
} }
@ -149,93 +161,99 @@ export default function Page({isHome}) {
</TransformComponent> </TransformComponent>
</TransformWrapper> </TransformWrapper>
{ {
!isHome? !isHome ?
<div className='gcaqjc_bzt_rightBox' style={{right:shouqi?'-404px':'4px'}}> <div className='gcaqjc_bzt_rightBox' style={{ right: shouqi ? '-404px' : '4px' }}>
<Tabs defaultActiveKey="1" style={{padding:'0 5px 5px 5px'}} centered> <Tabs defaultActiveKey="1" style={{ padding: '0 5px 5px 5px' }} centered>
<Tabs.TabPane tab={<div style={{fontSize:'16px',fontWeight:500,padding:'0 15px'}}>渗压监测</div>} key="1"> <Tabs.TabPane tab={<div style={{ fontSize: '16px', fontWeight: 500, padding: '0 15px' }}>渗压监测</div>} key="1">
<div className='gcaqjc_bzt_rightBox_table'> <div className='gcaqjc_bzt_rightBox_table'>
<Table rowKey="stationCode" <Table rowKey="stationCode"
sticky sticky
columns={columnsSy} columns={columnsSy}
pagination={false} pagination={false}
dataSource={syList} dataSource={syList}
scroll={{ y: "650px"}} scroll={{ y: "650px" }}
onRow={ onRow={
(data)=>({ (data) => ({
onClick:()=>{ onClick: () => {
setOpenSy(true) setOpenSy(true)
setModalData(data) setModalData(data)
} }
}) })
} }
/> />
</div> </div>
</Tabs.TabPane> </Tabs.TabPane>
<Tabs.TabPane tab={<div style={{fontSize:'16px',fontWeight:500,padding:'0 15px'}}>渗流监测</div>} key="2"> <Tabs.TabPane tab={<div style={{ fontSize: '16px', fontWeight: 500, padding: '0 15px' }}>渗流监测</div>} key="2">
<div className='gcaqjc_bzt_rightBox_table'> <div className='gcaqjc_bzt_rightBox_table'>
<Table rowKey="stationCode" <Table rowKey="stationCode"
sticky sticky
columns={columnsSl} columns={columnsSl}
pagination={false} pagination={false}
dataSource={slList} dataSource={slList}
scroll={{ y: "650px"}} scroll={{ y: "650px" }}
onRow={ onRow={
(data)=>({ (data) => ({
onClick:()=>{ onClick: () => {
setOpenSl(true) setOpenSl(true)
setModalData(data) setModalData(data)
} }
}) })
} }
/> />
</div> </div>
</Tabs.TabPane> </Tabs.TabPane>
<Tabs.TabPane tab={<div style={{fontSize:'16px',fontWeight:500,padding:'0 15px'}}>位移监测</div>} key="3"> <Tabs.TabPane tab={<div style={{ fontSize: '16px', fontWeight: 500, padding: '0 15px' }}>位移监测</div>} key="3">
<div className='gcaqjc_bzt_rightBox_table'> <div className='gcaqjc_bzt_rightBox_table'>
<Table rowKey="stationCode"
sticky <Table rowKey="stationCode"
columns={columnsWy} sticky
// pagination={false} columns={columnsWy}
dataSource={wyList} pagination={false}
pagination={{ dataSource={showAllWyData ? wyList : filteredWyList}
pageSize: 100, // pagination={{
showSizeChanger: true, // pageSize: 100,
pageSizeOptions: [ '100', '200'], // showSizeChanger: true,
}} // pageSizeOptions: [ '100', '200'],
scroll={{ y: "650px"}} // }}
onRow={ scroll={{ y: "650px" }}
(data)=>({ onRow={
onClick:()=>{ (data) => ({
setOpenWy(true) onClick: () => {
setModalData(data) setOpenWy(true)
} setModalData(data)
}
}) })
} }
/> />
<div style={{ display: 'flex', justifyContent: 'center', marginTop: '10px' }}>
<a onClick={() => setShowAllWyData(!showAllWyData)}>
{showAllWyData ? '收起更多信息' : '更多信息'}
</a>
</div>
</div>
</Tabs.TabPane>
</Tabs>
<div className='gcaqjc_bzt_rightBox_Btn'>
<img src={`${process.env.PUBLIC_URL}/assets/xyt/fxdd/shouqi.png`} alt="" onClick={() => setShouQi(!shouqi)} />
</div> </div>
</Tabs.TabPane> </div> : null
</Tabs>
<div className='gcaqjc_bzt_rightBox_Btn'>
<img src={`${process.env.PUBLIC_URL}/assets/xyt/fxdd/shouqi.png`} alt="" onClick={()=>setShouQi(!shouqi)}/>
</div>
</div>:null
} }
<div style={{position:'absolute',left:'30px',top:'calc( 100vh - 300px )'}}> <div style={{ position: 'absolute', left: '30px', top: 'calc( 100vh - 300px )' }}>
<TuLi/> <TuLi />
</div> </div>
<Modal width={1000} wrapClassName='home_modal' bodyStyle={{padding:0}} title={null} closable={false} footer={null} open={openSy} onCancel={()=>setOpenSy(false)} destroyOnClose={true}> <Modal width={1000} wrapClassName='home_modal' bodyStyle={{ padding: 0 }} title={null} closable={false} footer={null} open={openSy} onCancel={() => setOpenSy(false)} destroyOnClose={true}>
<ShenYa id={modalData.stationCode} data={modalData} dispatch={dispatch} record={modalData} onCancel={()=>setOpenSy(false)}/> <ShenYa id={modalData.stationCode} data={modalData} dispatch={dispatch} record={modalData} onCancel={() => setOpenSy(false)} />
</Modal> </Modal>
<Modal width={1000} wrapClassName='home_modal' bodyStyle={{padding:0}} title={null} closable={false} footer={null} open={openSl} onCancel={()=>setOpenSl(false)} destroyOnClose={true}> <Modal width={1000} wrapClassName='home_modal' bodyStyle={{ padding: 0 }} title={null} closable={false} footer={null} open={openSl} onCancel={() => setOpenSl(false)} destroyOnClose={true}>
<ShenLiu id={modalData.stationCode} data={modalData} dispatch={dispatch} record={modalData} onCancel={()=>setOpenSl(false)}/> <ShenLiu id={modalData.stationCode} data={modalData} dispatch={dispatch} record={modalData} onCancel={() => setOpenSl(false)} />
</Modal> </Modal>
<Modal width={1000} wrapClassName='home_modal' bodyStyle={{padding:0}} title={null} closable={false} footer={null} open={openWy} onCancel={()=>setOpenWy(false)} destroyOnClose={true}> <Modal width={1000} wrapClassName='home_modal' bodyStyle={{ padding: 0 }} title={null} closable={false} footer={null} open={openWy} onCancel={() => setOpenWy(false)} destroyOnClose={true}>
<WeiYi id={modalData.stationCode} data={modalData} dispatch={dispatch} record={modalData} onCancel={()=>setOpenWy(false)}/> <WeiYi id={modalData.stationCode} data={modalData} dispatch={dispatch} record={modalData} onCancel={() => setOpenWy(false)} />
</Modal> </Modal>
<Modal width={1000} wrapClassName='home_modal' bodyStyle={{padding:0}} title={null} closable={false} footer={null} open={openDm} onCancel={()=>setOpenDm(false)} destroyOnClose={true}> <Modal width={1000} wrapClassName='home_modal' bodyStyle={{ padding: 0 }} title={null} closable={false} footer={null} open={openDm} onCancel={() => setOpenDm(false)} destroyOnClose={true}>
<DuanMian id={modalData.profileCode} data={modalData} dispatch={dispatch} record={modalData} onCancel={()=>setOpenDm(false)}/> <DuanMian id={modalData.profileCode} data={modalData} dispatch={dispatch} record={modalData} onCancel={() => setOpenDm(false)} />
</Modal> </Modal>
</div> </div>
) )