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

114
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" },
@ -59,6 +67,7 @@ export default function Xmzlmb() {
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 = [];
@ -90,6 +99,9 @@ export default function Xmzlmb() {
...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,15 +109,7 @@ 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,
@ -131,7 +135,7 @@ export default function Xmzlmb() {
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);
} }
@ -151,7 +155,7 @@ export default function Xmzlmb() {
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;
@ -247,7 +236,7 @@ export default function Xmzlmb() {
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' }}>
@ -271,48 +260,30 @@ export default function Xmzlmb() {
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 id="img">
<div style={{ textAlign: "center", marginBottom: 10, fontSize: 20 }}>断面名称:{dmList.find(s => s.id == code)?.projNm}</div> <div style={{ textAlign: "center", marginBottom: 10, fontSize: 20 }}>断面名称:{dmList.find(s => s.id == code)?.projNm}</div>
{/* <div style={{ position: "absolute", top: -38, right: 131,cursor:"pointer",fontWeight:700 }}>
<div
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 <ReactEcharts
option={jrxOptions} option={jrxOptions}
style={{ width: "100%", height: 380 }} style={{ width: "100%", height: 380 }}
notMerge={true} notMerge={true}
ref={echartsRef} ref={echartsRef}
/> />
</div> </div>
</Rnd> </Rnd>
</div> </div>
<div className='body-top' style={{marginTop:60}}> <div className='body-top' style={{ marginTop: 30 }}>
<Table <Table
columns={columns1} columns={columns1}
key="inx" key="inx"
@ -321,12 +292,15 @@ export default function Xmzlmb() {
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))} onClick: () => { echartsRef.current.getEchartsInstance().setOption(jrxOption(record, dbType,dbType1)) }
} }
}} }}
/> />
</div> </div>
</div> </div> :
<Spin size='large' style={{width:'100%',margin:'300px auto'}}></Spin>
}
</div> </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"?