feat(): 浸润线修改
parent
2ac03a086b
commit
ae58cfa58e
|
|
@ -1,5 +1,5 @@
|
|||
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 { useSelector } from 'react-redux';
|
||||
import ReactEcharts from 'echarts-for-react';
|
||||
|
|
@ -12,25 +12,33 @@ import jrxOption from "./jrxOptions"
|
|||
import { Rnd } from "react-rnd"
|
||||
|
||||
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 [code, setCode] = useState([])
|
||||
const [searchVal, setSearchVal] = useState({})
|
||||
const [dataSources, setDateSources] = useState([])
|
||||
const [table2Data, setTable2Data] = useState([])
|
||||
const [dmList, setDmList] = useState([])
|
||||
const [trData, setTrData] = useState([])
|
||||
const [swiper, setSwiper] = useState(false)
|
||||
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 jrxOptions = useMemo(() => {
|
||||
if (dataSources && dbType) {
|
||||
return jrxOption(dataSources[0],dbType)
|
||||
if (dataSources && dbType && dbType1) {
|
||||
return jrxOption(dataSources[0], dbType,dbType1)
|
||||
} else {
|
||||
return dataSources[0];
|
||||
}
|
||||
}, [dataSources,dbType])
|
||||
}, [dataSources, dbType,dbType1])
|
||||
|
||||
const columns = [
|
||||
{ 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 getTableData = async (params) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await httppost2(apiurl.gcaqjc.gcaqfx.jrx.page, params)
|
||||
let newArr = [];
|
||||
|
|
@ -90,6 +99,9 @@ export default function Xmzlmb() {
|
|||
...obj,
|
||||
}
|
||||
})
|
||||
if (result.length > 0) {
|
||||
setLoading(false)
|
||||
}
|
||||
// let res1 = result.map(item => ({...item,rz:(item.rz - 100).toFixed(2)})) //为了测试 最后需要删除
|
||||
setDateSources(result)
|
||||
} 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 = () => {
|
||||
let params = {
|
||||
...searchVal,
|
||||
|
|
@ -131,7 +135,7 @@ export default function Xmzlmb() {
|
|||
try {
|
||||
const res = await httppost2(apiurl.gcaqjc.sjtjcx.czcx.tree)
|
||||
let filterData = res.data.filter(s => s.profileCode == code)
|
||||
setTrData(filterData[0].children)
|
||||
setTrData(filterData[0]?.children)
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
|
|
@ -151,7 +155,7 @@ export default function Xmzlmb() {
|
|||
v.scrollTop = 0;
|
||||
// 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++;
|
||||
}, Number(1000));
|
||||
setTimer(time); // 定时器保存变量 利于停止
|
||||
|
|
@ -161,24 +165,7 @@ export default function Xmzlmb() {
|
|||
const [scale, setScale] = useState(1)
|
||||
const scaleRef = useRef(null)
|
||||
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(() => {
|
||||
if (trData.length > 0 && searchVal) {
|
||||
let params = {
|
||||
|
|
@ -186,26 +173,29 @@ export default function Xmzlmb() {
|
|||
...searchVal
|
||||
}
|
||||
getTableData(params)
|
||||
getTable2Data(params)
|
||||
}
|
||||
|
||||
}, [trData, searchVal]);
|
||||
|
||||
useEffect(() => {
|
||||
if (code) {
|
||||
if (code.length) {
|
||||
getDmTree()
|
||||
}
|
||||
if (timer) {
|
||||
clearInterval(timer)
|
||||
}
|
||||
if (dmList.length > 0 && code) {
|
||||
if (dmList.length > 0 && code.length) {
|
||||
let name = dmList.find(s => s.id == code)?.projNm
|
||||
let type = name == "大坝B0+060" ? "1" :
|
||||
name == "大坝B0+090" ? "2" :
|
||||
name == "大坝B0+120" ? "3" : ''
|
||||
let type = (name == "大坝B0+130" || name == "大坝B0+132") ? "1" :
|
||||
(name == "大坝B0+250" || name == "大坝B0+252") ? "2" :
|
||||
(name == "大坝B0+370" || name == "大坝B0+372") ? "3" : '';
|
||||
let type1 = typeName[name];
|
||||
setDbType(type)
|
||||
setDbType1(type1)
|
||||
}
|
||||
}, [code])
|
||||
}, [code, dmList])
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
getDmList()
|
||||
}, [])
|
||||
|
|
@ -220,12 +210,11 @@ export default function Xmzlmb() {
|
|||
clearInterval(timer); // 停止定时器
|
||||
}
|
||||
}, [swiper, dataSources])
|
||||
|
||||
useEffect(() => {
|
||||
let scale = 1
|
||||
const img = document.getElementById("img");
|
||||
if (!img) return;
|
||||
const fun = (e) => {
|
||||
console.log(1111)
|
||||
// 大于0:滚轮向上滚动 小于0:滚轮向下滚动
|
||||
if (e.wheelDelta > 0) {
|
||||
scale += 0.05;
|
||||
|
|
@ -247,7 +236,7 @@ export default function Xmzlmb() {
|
|||
img.removeEventListener("wheel",fun)
|
||||
}
|
||||
|
||||
},[])
|
||||
},[loading])
|
||||
|
||||
return (
|
||||
<div className='content-box' style={{ backgroundColor: '#fff', height: '100%', display: 'flex', padding: '10px' }}>
|
||||
|
|
@ -271,48 +260,30 @@ export default function Xmzlmb() {
|
|||
role={role}
|
||||
/>
|
||||
</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
|
||||
default={{
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: '68%',
|
||||
width: 1305,
|
||||
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 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
|
||||
option={jrxOptions}
|
||||
style={{ width: "100%", height: 380 }}
|
||||
notMerge={true}
|
||||
ref={echartsRef}
|
||||
|
||||
/>
|
||||
</div>
|
||||
</Rnd>
|
||||
</div>
|
||||
<div className='body-top' style={{marginTop:60}}>
|
||||
<div className='body-top' style={{ marginTop: 30 }}>
|
||||
<Table
|
||||
columns={columns1}
|
||||
key="inx"
|
||||
|
|
@ -321,12 +292,15 @@ export default function Xmzlmb() {
|
|||
scroll={{ x: width, y: 250, scrollToFirstRowOnChange: true }}
|
||||
onRow={record => {
|
||||
return {
|
||||
onClick:() => {echartsRef.current.getEchartsInstance().setOption(jrxOption(record,dbType))}
|
||||
onClick: () => { echartsRef.current.getEchartsInstance().setOption(jrxOption(record, dbType,dbType1)) }
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div> :
|
||||
<Spin size='large' style={{width:'100%',margin:'300px auto'}}></Spin>
|
||||
}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -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 :
|
||||
type == '1' ? 59 : 70;
|
||||
const yMax = type == "3" ? 129 : type == "2" ? 117
|
||||
: type == "1" ? 118 : 150;
|
||||
const type1 = ["SY05", "SY06", "SY07", "SY08"]
|
||||
const type2 = ["SY09", "SY10", "SY11", "SY12"]
|
||||
const type3 = [ "SY11", "SY12","SY13"]
|
||||
const alltype = type == "1" ? type1 : type == "2" ? type2 : type3;
|
||||
const type1 = ["SY01", "SY04", "SY07", "SY16"];
|
||||
const type2 = ["SY10", "SY13"];
|
||||
const type3 = ["SY02", "SY05", "SY08", "SY17"];
|
||||
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'
|
||||
|
|
@ -57,14 +67,14 @@ export default function jrxOptions(data = {}, type = "1") {
|
|||
|
||||
const gz3 = 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]]]] :
|
||||
[[73, 161], [73, data[alltype[2]]]] : [];
|
||||
|
||||
|
||||
const gz4 = data[alltype[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]]]] :
|
||||
[[85, 166], [85, data[alltype[3]]]] : [];
|
||||
|
||||
|
|
@ -83,7 +93,7 @@ export default function jrxOptions(data = {}, type = "1") {
|
|||
[xValue, data?.rz],
|
||||
[45.5, data[alltype[0]]],
|
||||
[50, data[alltype[1]]],
|
||||
[55, data[alltype[2]] || 97],
|
||||
[58, data[alltype[2]]],
|
||||
[77, data[alltype[3]]]
|
||||
] :
|
||||
type == "1"?
|
||||
|
|
|
|||
Loading…
Reference in New Issue