From 636f422c4808aa5ac3467911ba163b487f5bf0ea Mon Sep 17 00:00:00 2001 From: lishenfeng Date: Fri, 17 Oct 2025 16:41:45 +0800 Subject: [PATCH] =?UTF-8?q?feat():=E6=B8=97=E6=B5=81=E7=9B=91=E6=B5=8B?= =?UTF-8?q?=E8=A1=A8=E6=A0=BC=E6=B7=BB=E5=8A=A0=E6=9B=B4=E5=A4=9A=E4=BF=A1?= =?UTF-8?q?=E6=81=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../homePanelsLayoutPage/item_gongcheng.js | 31 +- src/views/gcaqjc/bzt2/index.js | 276 ++++++++++-------- 2 files changed, 171 insertions(+), 136 deletions(-) diff --git a/src/views/Home/homePanelsLayoutPage/item_gongcheng.js b/src/views/Home/homePanelsLayoutPage/item_gongcheng.js index 7044ed496..efc16cda2 100644 --- a/src/views/Home/homePanelsLayoutPage/item_gongcheng.js +++ b/src/views/Home/homePanelsLayoutPage/item_gongcheng.js @@ -13,7 +13,9 @@ import moment from 'moment'; const Page = () => { const dispatch = useDispatch(); const [ tableData, setTableData ] = useState([]) - const [ checked, setChecked ] = useState('渗压监测') + const [checked, setChecked] = useState('渗压监测') + const [filteredWyList, setFilteredWyList] = useState([]) // 添加过滤后的位移列表状态 + const [showAllWyData, setShowAllWyData] = useState(false) // 控制是否显示所有数据 const columns = useMemo(() => { if(checked==='渗压监测'){ return [ @@ -57,6 +59,15 @@ const Page = () => { message.error('查询失败') return } + if (val === '位移监测') { + // 过滤符合条件的数据：监测点为ZY开头且有监测时间和x、y、h方向的值 + const filtered = data?.filter(item => + item.de || + item.dn || + item.du + ) || []; + setFilteredWyList(filtered) + } setChecked(val) setTableData(data) console.log('list',data) @@ -89,12 +100,13 @@ const Page = () => { ({ onClick:()=>{ @@ -109,6 +121,11 @@ const Page = () => { }) } /> + {checked == '位移监测' &&
+ setShowAllWyData(!showAllWyData)}> + {showAllWyData ? '收起更多信息' : '更多信息'} + +
} diff --git a/src/views/gcaqjc/bzt2/index.js b/src/views/gcaqjc/bzt2/index.js index 72f9b11e9..d59ed73ad 100644 --- a/src/views/gcaqjc/bzt2/index.js +++ b/src/views/gcaqjc/bzt2/index.js @@ -1,5 +1,5 @@ -import React, { useState, useEffect,useMemo,useRef } from 'react' -import { Table, Tabs,Modal,message,Tooltip } from 'antd'; +import React, { useState, useEffect, useMemo, useRef } from 'react' +import { Table, Tabs, Modal, message, Tooltip } from 'antd'; import { useDispatch, useSelector } from 'react-redux' import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch"; import Draggable from 'react-draggable'; @@ -13,17 +13,21 @@ import TuLi from '../../Home/TuLi/Tuli6.js'; import './index.less' -export default function Page({isHome}) { +export default function Page({ isHome }) { const dispatch = useDispatch(); - const [shouqi,setShouQi] = useState(false) - const [syList,setSyList] = useState([]) - const [slList,setSlList] = useState([]) - const [wyList,setWyList] = useState([]) - const [dmList,setDmList] = useState([]) + const [shouqi, setShouQi] = useState(false) + const [syList, setSyList] = useState([]) + const [slList, setSlList] = useState([]) + const [wyList, setWyList] = useState([]) + const [dmList, setDmList] = useState([]) const [openSy, setOpenSy] = useState(false) const [openSl, setOpenSl] = useState(false) const [openWy, setOpenWy] = useState(false) const [openDm, setOpenDm] = useState(false) + + const [filteredWyList, setFilteredWyList] = useState([]) // 添加过滤后的位移列表状态 + const [showAllWyData, setShowAllWyData] = useState(false) // 控制是否显示所有数据 + const myWidth = window.innerWidth const myHeight = window.innerHeight @@ -31,117 +35,125 @@ export default function Page({isHome}) { const columnsSy = [ - { title: '监测点', key: 'stationCode', dataIndex: 'stationCode',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)=>
{v?.slice(5,16)}
}, - { title: '管水位(m)', key: 'value', dataIndex: 'value',align: "center", ellipsis: true, render:(v,row)=>
{v}
}, + { title: '监测点', key: 'stationCode', dataIndex: 'stationCode', 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) =>
{v?.slice(5, 16)}
}, + { title: '管水位(m)', key: 'value', dataIndex: 'value', align: "center", ellipsis: true, render: (v, row) =>
{v}
}, ] const columnsSl = [ - { title: '监测点', key: 'stationCode', dataIndex: 'stationCode',align: "center", ellipsis: true }, - { title: '监测时间', key: 'tm', dataIndex: 'tm',align: "center",width: 150, ellipsis: true, render:(v,row)=>
{v?.slice(5,16)}
}, - { title: '渗流量(L/s)', key: 'value', dataIndex: 'value',align: "center", ellipsis: true, render:(v,row)=>
{v}
}, + { title: '监测点', key: 'stationCode', dataIndex: 'stationCode', align: "center", ellipsis: true }, + { title: '监测时间', key: 'tm', dataIndex: 'tm', align: "center", width: 150, ellipsis: true, render: (v, row) =>
{v?.slice(5, 16)}
}, + { title: '渗流量(L/s)', key: 'value', dataIndex: 'value', align: "center", ellipsis: true, render: (v, row) =>
{v}
}, ] const columnsWy = [ - { 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)=>
{v?.slice(5,10)}
{v?.slice(11,16)||'-'}
}, - { title:
x方向
(mm)
, key: 'de', dataIndex: 'de',align: "center", ellipsis: true, render:(v,row)=>
{v||'-'}
}, - { title:
y方向
(mm)
, key: 'dn', dataIndex: 'dn',align: "center", ellipsis: true, render:(v,row)=>
{v||'-'}
}, - { title:
h方向
(mm)
, key: 'du', dataIndex: 'du',align: "center", ellipsis: true, render:(v,row)=>
{v||'-'}
}, + { 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) =>
{v?.slice(5, 10)}
{v?.slice(11, 16) || '-'}
}, + { title:
x方向
(mm)
, key: 'de', dataIndex: 'de', align: "center", ellipsis: true, render: (v, row) =>
{v || '-'}
}, + { title:
y方向
(mm)
, key: 'dn', dataIndex: 'dn', align: "center", ellipsis: true, render: (v, row) =>
{v || '-'}
}, + { title:
h方向
(mm)
, key: 'du', dataIndex: 'du', align: "center", ellipsis: true, render: (v, row) =>
{v || '-'}
}, ] - useEffect(()=>{ + useEffect(() => { getSyData() getSlData() getWyData() getDmData() - },[]) + }, []) - const getSyData = async()=>{ - const {code, data} = await httpget2(apiurl.home.sy) + const getSyData = async () => { + const { code, data } = await httpget2(apiurl.home.sy) - if(code!==200){ + if (code !== 200) { return } - setSyList(data||[]) + setSyList(data || []) } - const getSlData = async()=>{ - const {code, data} = await httpget2(apiurl.home.sl) - if(code!==200){ + const getSlData = async () => { + const { code, data } = await httpget2(apiurl.home.sl) + if (code !== 200) { return } - setSlList(data||[]) + setSlList(data || []) } - const getWyData = async()=>{ - const {code, data} = await httpget2(apiurl.home.wy) - if(code!==200){ + const getWyData = async () => { + const { code, data } = await httpget2(apiurl.home.wy) + if (code !== 200) { return } 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 {code, data} = await httppost2(apiurl.home.dmList) - if(code!==200){ + const getDmData = async () => { + const { code, data } = await httppost2(apiurl.home.dmList) + if (code !== 200) { return } - console.log('断面',data) + console.log('断面', data) setDmList(data) } - + return (
-
+
{ - syList.map((item)=> -
{ + syList.map((item) => +
{ setOpenSy(true) setModalData(item) }}> {item.stationCode} - +
) } { - slList.map((item)=> -
{ + slList.map((item) => +
{ setOpenSl(true) setModalData(item) }}> {item.stationCode} - +
) } { - wyList.map((item)=> -
{ + wyList.map((item) => +
{ setOpenWy(true) setModalData(item) }} > {item.cdnm} - +
) } @@ -149,93 +161,99 @@ export default function Page({isHome}) { { - !isHome? -
- - 渗压监测
} key="1"> -
-
({ - onClick:()=>{ - setOpenSy(true) - setModalData(data) - } + !isHome ? +
+ + 渗压监测
} key="1"> +
+
({ + onClick: () => { + setOpenSy(true) + setModalData(data) + } }) - } - /> - - - 渗流监测} key="2"> -
-
({ - onClick:()=>{ - setOpenSl(true) - setModalData(data) - } + } + /> + + + 渗流监测} key="2"> +
+
({ + onClick: () => { + setOpenSl(true) + setModalData(data) + } }) - } - /> - - - 位移监测} key="3"> -
-
({ - onClick:()=>{ - setOpenWy(true) - setModalData(data) - } + } + /> + + + 位移监测} key="3"> +
+ +
({ + onClick: () => { + setOpenWy(true) + setModalData(data) + } }) - } - /> + } + /> +
+ setShowAllWyData(!showAllWyData)}> + {showAllWyData ? '收起更多信息' : '更多信息'} + +
+ + + +
+ setShouQi(!shouqi)} />
- - -
- setShouQi(!shouqi)}/> -
- :null + : null } -
- +
+
- setOpenSy(false)} destroyOnClose={true}> - setOpenSy(false)}/> + setOpenSy(false)} destroyOnClose={true}> + setOpenSy(false)} /> - setOpenSl(false)} destroyOnClose={true}> - setOpenSl(false)}/> + setOpenSl(false)} destroyOnClose={true}> + setOpenSl(false)} /> - setOpenWy(false)} destroyOnClose={true}> - setOpenWy(false)}/> + setOpenWy(false)} destroyOnClose={true}> + setOpenWy(false)} /> - setOpenDm(false)} destroyOnClose={true}> - setOpenDm(false)}/> + setOpenDm(false)} destroyOnClose={true}> + setOpenDm(false)} />
)