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

feat(): 浸润线修改

qzc-dev-demo
李神峰 2025-03-25 17:18:21 +08:00
parent 2ac03a086b
commit ae58cfa58e
2 changed files with 143 additions and 159 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

250
src/views/gcaqjc/gcaqfx/jrx/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, Card,Button,message,Popconfirm } from 'antd'; import { Table, Card, Button, message, Popconfirm,Spin } from 'antd';
import ToolBar from './toolbar'; import ToolBar from './toolbar';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import ReactEcharts from 'echarts-for-react'; import ReactEcharts from 'echarts-for-react';
@ -12,25 +12,33 @@ import jrxOption from "./jrxOptions"
import { Rnd } from "react-rnd" import { Rnd } from "react-rnd"
export default function Xmzlmb() { export default function Xmzlmb() {
const typeName = {
'大坝B0+130': '1',
'大坝B0+132': '2',
'大坝B0+250': '3',
'大坝B0+252': '4',
'大坝B0+370': '5',
'大坝B0+372': '6',
}
const role = useSelector(state => state.auth.role); const role = useSelector(state => state.auth.role);
const [code, setCode] = useState([]) const [code, setCode] = useState([])
const [searchVal, setSearchVal] = useState({}) const [searchVal, setSearchVal] = useState({})
const [dataSources, setDateSources] = useState([]) const [dataSources, setDateSources] = useState([])
const [table2Data, setTable2Data] = useState([])
const [dmList, setDmList] = useState([]) const [dmList, setDmList] = useState([])
const [trData, setTrData] = useState([]) const [trData, setTrData] = useState([])
const [swiper, setSwiper] = useState(false) const [swiper, setSwiper] = useState(false)
const [timer, setTimer] = useState(100); // 定时器 const [timer, setTimer] = useState(100); // 定时器
const [dbType, setDbType] = useState('1') const [dbType, setDbType] = useState('1');
const [dbType1, setDbType1] = useState('1');
const [loading, setLoading] = useState(false);
const echartsRef = useRef(null) const echartsRef = useRef(null)
const jrxOptions = useMemo(() => { const jrxOptions = useMemo(() => {
if (dataSources && dbType) { if (dataSources && dbType && dbType1) {
return jrxOption(dataSources[0],dbType) return jrxOption(dataSources[0], dbType,dbType1)
} else { } else {
return dataSources[0]; return dataSources[0];
} }
}, [dataSources,dbType]) }, [dataSources, dbType,dbType1])
const columns = [ const columns = [
{ title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align: "center" }, { title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align: "center" },
@ -40,56 +48,60 @@ export default function Xmzlmb() {
const zcColumns = [ const zcColumns = [
{ {
title: '结果分析', key: 'status', dataIndex: 'status', width: 150, align: "center", title: '结果分析', key: 'status', dataIndex: 'status', width: 150, align: "center",
render: (rec, record) => <span style={!rec ? {color:"red"}:{}}>{rec == 1 ? "正常" : rec == 0 ? "异常" : ''}</span> render: (rec, record) => <span style={!rec ? { color: "red" } : {}}>{rec == 1 ? "正常" : rec == 0 ? "异常" : ''}</span>
}, },
]; ];
const columns1 = useMemo(() => { const columns1 = useMemo(() => {
if (trData.length > 0) { if (trData.length > 0) {
let newCol = trData.map(s => ({ let newCol = trData.map(s => ({
title: `${s}(m)`, title: `${s}(m)`,
key: s, key: s,
dataIndex: s, dataIndex: s,
width: 150, width: 150,
align: "center", align: "center",
render: (rec, record) => <span>{rec || "-"}</span> render: (rec, record) => <span>{rec || "-"}</span>
})) }))
return [...columns,...newCol,...zcColumns]; return [...columns, ...newCol, ...zcColumns];
} }
},[trData]) }, [trData])
const width = useMemo(() => columns1?.reduce((total, cur) => total + (cur.width), 0), [columns1]); const width = useMemo(() => columns1?.reduce((total, cur) => total + (cur.width), 0), [columns1]);
// 单图多线以及数据表的数据 // 单图多线以及数据表的数据
const getTableData = async(params) => { const getTableData = async (params) => {
setLoading(true);
try { try {
const res = await httppost2(apiurl.gcaqjc.gcaqfx.jrx.page, params) const res = await httppost2(apiurl.gcaqjc.gcaqfx.jrx.page, params)
let newArr = []; let newArr = [];
let newData = res.data.map((s, i) => { let newData = res.data.map((s, i) => {
newArr.push(s.list.map(c => ({ newArr.push(s.list.map(c => ({
[c.stationCode]: c.value || '-', [c.stationCode]: c.value || '-',
tm: c.tm, tm: c.tm,
}))) })))
return { return {
tm: s.tm, tm: s.tm,
rz: s.rz, rz: s.rz,
status: s.status || '', status: s.status || '',
inx:i+1 inx: i + 1
} }
}) })
let filterData = newArr.filter(s => s.length > 0).flat() let filterData = newArr.filter(s => s.length > 0).flat()
let result = newData.map(s => { let result = newData.map(s => {
let tm1 = s.tm; let tm1 = s.tm;
let r = filterData.filter(t => { let r = filterData.filter(t => {
return t.tm == tm1 return t.tm == tm1
}) })
let obj = {}; let obj = {};
r.forEach(s1 => { r.forEach(s1 => {
obj = {...s1,...obj} obj = { ...s1, ...obj }
}) })
return { return {
...s, ...s,
...obj, ...obj,
} }
}) })
if (result.length > 0) {
setLoading(false)
}
// let res1 = result.map(item => ({...item,rz:(item.rz - 100).toFixed(2)})) //为了测试 最后需要删除 // let res1 = result.map(item => ({...item,rz:(item.rz - 100).toFixed(2)})) //为了测试 最后需要删除
setDateSources(result) setDateSources(result)
} catch (error) { } catch (error) {
@ -97,25 +109,17 @@ export default function Xmzlmb() {
} }
} }
// 多图单线数据
const getTable2Data = async (params) => {
try {
const res = await httppost2(apiurl.gcaqjc.sjtjcx.czcx.list1, params)
setTable2Data(res.data)
} catch (error) {
console.log(error);
}
}
const exportExcel = () => { const exportExcel = () => {
let params = { let params = {
...searchVal, ...searchVal,
profileName: dmList.find(s => s.id == code).projNm, profileName: dmList.find(s => s.id == code).projNm,
stationCodes: trData, stationCodes: trData,
id:1 id: 1
} }
httppost5(apiurl.gcaqjc.gcaqfx.jrx.export, params).then(res => { httppost5(apiurl.gcaqjc.gcaqfx.jrx.export, params).then(res => {
exportFile(`浸润线.xlsx`,res.data) exportFile(`浸润线.xlsx`, res.data)
}) })
} }
const getDmList = async () => { const getDmList = async () => {
@ -127,11 +131,11 @@ export default function Xmzlmb() {
} }
} }
const getDmTree = async() => { const getDmTree = async () => {
try { try {
const res = await httppost2(apiurl.gcaqjc.sjtjcx.czcx.tree) const res = await httppost2(apiurl.gcaqjc.sjtjcx.czcx.tree)
let filterData = res.data.filter(s => s.profileCode == code) let filterData = res.data.filter(s => s.profileCode == code)
setTrData(filterData[0].children) setTrData(filterData[0]?.children)
} catch (error) { } catch (error) {
console.log(error); console.log(error);
} }
@ -149,9 +153,9 @@ export default function Xmzlmb() {
Math.ceil(v.scrollTop) >= parseFloat((v.scrollHeight - v.clientHeight).toString()) Math.ceil(v.scrollTop) >= parseFloat((v.scrollHeight - v.clientHeight).toString())
) { ) {
v.scrollTop = 0; v.scrollTop = 0;
// setTimeout(() => { v.scrollTop = 0 }, 1000) // setTimeout(() => { v.scrollTop = 0 }, 1000)
} }
echartsRef.current.getEchartsInstance().setOption(jrxOption(dataSources[index % dataSources.length],dbType)) echartsRef.current.getEchartsInstance().setOption(jrxOption(dataSources[index % dataSources.length], dbType,dbType1))
index++; index++;
}, Number(1000)); }, Number(1000));
setTimer(time); // 定时器保存变量 利于停止 setTimer(time); // 定时器保存变量 利于停止
@ -161,24 +165,7 @@ export default function Xmzlmb() {
const [scale, setScale] = useState(1) const [scale, setScale] = useState(1)
const scaleRef = useRef(null) const scaleRef = useRef(null)
scaleRef.current = scale; scaleRef.current = scale;
// 放大
const zoomIn = () => {
const img = document.getElementById("img");
scaleRef.current += 0.05
// setScale(scaleRef.current)
img.style.transform = `scale(${scaleRef.current})`;
}
// 缩小
const zoomOut = () => {
console.log(scaleRef);
const img = document.getElementById("img");
if (scaleRef.current > 1) {
scaleRef.current -= 0.05
// setScale(scaleRef.current)
}
img.style.transform = `scale(${scaleRef.current})`;
}
useEffect(() => { useEffect(() => {
if (trData.length > 0 && searchVal) { if (trData.length > 0 && searchVal) {
let params = { let params = {
@ -186,26 +173,29 @@ export default function Xmzlmb() {
...searchVal ...searchVal
} }
getTableData(params) getTableData(params)
getTable2Data(params)
} }
}, [trData, searchVal]); }, [trData, searchVal]);
useEffect(() => { useEffect(() => {
if (code) { if (code.length) {
getDmTree() getDmTree()
} }
if (timer) { if (timer) {
clearInterval(timer) clearInterval(timer)
} }
if (dmList.length > 0 && code) { if (dmList.length > 0 && code.length) {
let name = dmList.find(s => s.id == code)?.projNm let name = dmList.find(s => s.id == code)?.projNm
let type = name == "大坝B0+060" ? "1" : let type = (name == "大坝B0+130" || name == "大坝B0+132") ? "1" :
name == "大坝B0+090" ? "2" : (name == "大坝B0+250" || name == "大坝B0+252") ? "2" :
name == "大坝B0+120" ? "3" : '' (name == "大坝B0+370" || name == "大坝B0+372") ? "3" : '';
let type1 = typeName[name];
setDbType(type) setDbType(type)
setDbType1(type1)
} }
}, [code]) }, [code, dmList])
useEffect(() => { useEffect(() => {
getDmList() getDmList()
}, []) }, [])
@ -220,12 +210,11 @@ export default function Xmzlmb() {
clearInterval(timer); // 停止定时器 clearInterval(timer); // 停止定时器
} }
}, [swiper, dataSources]) }, [swiper, dataSources])
useEffect(() => {
useEffect(()=>{
let scale = 1 let scale = 1
const img = document.getElementById("img"); const img = document.getElementById("img");
if (!img) return;
const fun = (e) => { const fun = (e) => {
console.log(1111)
// 大于0:滚轮向上滚动 小于0:滚轮向下滚动 // 大于0:滚轮向上滚动 小于0:滚轮向下滚动
if (e.wheelDelta > 0) { if (e.wheelDelta > 0) {
scale += 0.05; scale += 0.05;
@ -241,93 +230,78 @@ export default function Xmzlmb() {
img.style.transform = `scale(${scale})`; img.style.transform = `scale(${scale})`;
} }
} }
} }
img.addEventListener("wheel",fun) img.addEventListener("wheel",fun)
return ()=>{ return ()=>{
img.removeEventListener("wheel",fun) img.removeEventListener("wheel",fun)
} }
},[]) },[loading])
return ( return (
<div className='content-box' style={{ backgroundColor: '#fff', height: '100%',display:'flex',padding:'10px' }}> <div className='content-box' style={{ backgroundColor: '#fff', height: '100%', display: 'flex', padding: '10px' }}>
<div className='lf adcdTreeSelectorBox' style={{height:'calc(100vh - 110px)',width:'260px'}}> <div className='lf adcdTreeSelectorBox' style={{ height: 'calc(100vh - 110px)', width: '260px' }}>
<ListSelect <ListSelect
setAdcd={setCode} setAdcd={setCode}
listData={dmList} listData={dmList}
/> />
</div> </div>
<div className='AdcdTreeTableBox' style={{width:'calc(100vw - 625px)'}}> <div className='AdcdTreeTableBox' style={{ width: 'calc(100vw - 625px)' }}>
<Card <Card
className='nonebox' className='nonebox'
// onMouseOver={() => { // onMouseOver={() => {
// clearInterval(timer) // clearInterval(timer)
// }} // }}
> >
<ToolBar <ToolBar
setSearchVal={setSearchVal} setSearchVal={setSearchVal}
exportFile={exportExcel} exportFile={exportExcel}
setSwiper={setSwiper} setSwiper={setSwiper}
role={role} role={role}
/> />
</Card> </Card>
<div className="ant-card-body" style={{ padding: "20px 0 0 0",overflow:"hidden" }}> {
!loading ? <div className="ant-card-body" style={{ padding: "20px 0 0 0", overflow: "hidden" }}>
<div className='body-top' style={{ height: 380, width: "100%", marginTop: 10 }} > <div style={{ height: 420, width: "100%",overflow:'hidden',position:'relative' }} >
<Rnd <Rnd
default={{ default={{
x: 0, x: 0,
y: 0, y: 0,
width: '68%', width: 1305,
height: 380 height: 380
}} }}
// style={{position:"relative"}} >
<div id="img">
> <div style={{ textAlign: "center", marginBottom: 10, fontSize: 20 }}>断面名称:{dmList.find(s => s.id == code)?.projNm}</div>
<div id="img"> <ReactEcharts
<div style={{ textAlign: "center", marginBottom: 10,fontSize:20 }}>断面名称:{ dmList.find(s => s.id == code)?.projNm}</div> option={jrxOptions}
{/* <div style={{ position: "absolute", top: -38, right: 131,cursor:"pointer",fontWeight:700 }}> style={{ width: "100%", height: 380 }}
<div notMerge={true}
style={{ padding: "0px 8px", border: "1px solid #dfdfdf", textAlign: "center" }}
title='放大'
onClick={zoomIn}
>
+
</div>
<div
style={{ padding: "0px 8px", border: "1px solid #dfdfdf", marginTop: 5, textAlign: "center" }}
title='缩小'
onClick={zoomOut}
>
-
</div>
</div> */}
<ReactEcharts
option={jrxOptions}
style={{ width: "100%", height: 380 }}
notMerge={true}
ref={echartsRef} ref={echartsRef}
/>
/> </div>
</div> </Rnd>
</Rnd> </div>
</div> <div className='body-top' style={{ marginTop: 30 }}>
<div className='body-top' style={{marginTop:60}}> <Table
<Table columns={columns1}
columns={columns1} key="inx"
key="inx" dataSource={dataSources}
dataSource={dataSources} pagination={false}
pagination={false} scroll={{ x: width, y: 250, scrollToFirstRowOnChange: true }}
scroll={{ x: width, y: 250, scrollToFirstRowOnChange: true }} onRow={record => {
onRow={record => { return {
return { onClick: () => { echartsRef.current.getEchartsInstance().setOption(jrxOption(record, dbType,dbType1)) }
onClick:() => {echartsRef.current.getEchartsInstance().setOption(jrxOption(record,dbType))} }
} }}
}}
/> />
</div> </div>
</div> </div> :
</div> <Spin size='large' style={{width:'100%',margin:'300px auto'}}></Spin>
</div> }
)
</div>
</div>
)
} }

26
src/views/gcaqjc/gcaqfx/jrx/jrxOptions.js
View File

@ -1,13 +1,23 @@
export default function jrxOptions(data = {}, type = "1") { export default function jrxOptions(data = {}, type = "1",typeName='1') {
// debugger
const yMin = type == "3" ? 70 : type == "2" ? 67 : const yMin = type == "3" ? 70 : type == "2" ? 67 :
type == '1' ? 59 : 70; type == '1' ? 59 : 70;
const yMax = type == "3" ? 129 : type == "2" ? 117 const yMax = type == "3" ? 129 : type == "2" ? 117
: type == "1" ? 118 : 150; : type == "1" ? 118 : 150;
const type1 = ["SY05", "SY06", "SY07", "SY08"] const type1 = ["SY01", "SY04", "SY07", "SY16"];
const type2 = ["SY09", "SY10", "SY11", "SY12"] const type2 = ["SY10", "SY13"];
const type3 = [ "SY11", "SY12","SY13"] const type3 = ["SY02", "SY05", "SY08", "SY17"];
const alltype = type == "1" ? type1 : type == "2" ? type2 : type3; const type4 = ["SY11", "SY14"];
const type5 = ["SY03", "SY06", "SY09"];
const type6 = ["SY12", "SY15"];
const alltype = typeName == "1" ? type1 :
typeName == "2" ? type2 :
typeName == "3" ? type3 :
typeName == "4" ? type4 :
typeName == "5" ? type5 :
typeName == "6" ? type6 :[]
;
// 字体颜色 // 字体颜色
const textColor = '#666' const textColor = '#666'
@ -57,14 +67,14 @@ export default function jrxOptions(data = {}, type = "1") {
const gz3 = data[alltype[2]] ? const gz3 = data[alltype[2]] ?
type == "3" ? [[58.5, 95], [58.5, data[alltype[2]]]] : type == "3" ? [[58.5, 95], [58.5, data[alltype[2]]]] :
type == "2" ? [[60, 97], [60, data[alltype[2]] || 105]] : type == "2" ? [[58, 92], [58, data[alltype[2]]]] :
type == "1" ? [[58, 81], [58, data[alltype[2]]]] : type == "1" ? [[58, 81], [58, data[alltype[2]]]] :
[[73, 161], [73, data[alltype[2]]]] : []; [[73, 161], [73, data[alltype[2]]]] : [];
const gz4 = data[alltype[3]] ? const gz4 = data[alltype[3]] ?
type == "3" ? [] : type == "3" ? [] :
type == "2" ? [[77, 96], [77, data[alltype[3]]]] : type == "2" ? [[77, 82], [77, data[alltype[3]]]] :
type == "1" ? [[79, 78], [79, data[alltype[3]]]] : type == "1" ? [[79, 78], [79, data[alltype[3]]]] :
[[85, 166], [85, data[alltype[3]]]] : []; [[85, 166], [85, data[alltype[3]]]] : [];
@ -83,7 +93,7 @@ export default function jrxOptions(data = {}, type = "1") {
[xValue, data?.rz], [xValue, data?.rz],
[45.5, data[alltype[0]]], [45.5, data[alltype[0]]],
[50, data[alltype[1]]], [50, data[alltype[1]]],
[55, data[alltype[2]] || 97], [58, data[alltype[2]]],
[77, data[alltype[3]]] [77, data[alltype[3]]]
] : ] :
type == "1"? type == "1"?