334 lines
9.9 KiB
JavaScript
334 lines
9.9 KiB
JavaScript
import React, { useState, useEffect,useMemo,useRef } from 'react'
|
|
import { Table, Card,Button,message,Popconfirm } from 'antd';
|
|
import ToolBar from './toolbar';
|
|
import { useSelector } from 'react-redux';
|
|
import ReactEcharts from 'echarts-for-react';
|
|
import apiurl from '../../../../service/apiurl';
|
|
import { httppost2, httppost5 } from '../../../../utils/request';
|
|
import { exportFile } from '../../../../utils/tools.js';
|
|
import ListSelect from "../../../../components/Form/ListSelect1";
|
|
import './index.less'
|
|
import jrxOption from "./jrxOptions"
|
|
import { Rnd } from "react-rnd"
|
|
|
|
export default function Xmzlmb() {
|
|
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 echartsRef = useRef(null)
|
|
const jrxOptions = useMemo(() => {
|
|
if (dataSources && dbType) {
|
|
return jrxOption(dataSources[0],dbType)
|
|
} else {
|
|
return dataSources[0];
|
|
}
|
|
}, [dataSources,dbType])
|
|
|
|
const columns = [
|
|
{ title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align: "center" },
|
|
{ title: '时间', key: 'tm', dataIndex: 'tm', width: 150, align: "center" },
|
|
{ title: '库水位(m)', key: 'rz', dataIndex: 'rz', width: 150, align: "center" },
|
|
];
|
|
const zcColumns = [
|
|
{
|
|
title: '结果分析', key: 'status', dataIndex: 'status', width: 150, align: "center",
|
|
render: (rec, record) => <span style={!rec ? {color:"red"}:{}}>{rec == 1 ? "正常" : rec == 0 ? "异常" : ''}</span>
|
|
},
|
|
];
|
|
const columns1 = useMemo(() => {
|
|
if (trData.length > 0) {
|
|
let newCol = trData.map(s => ({
|
|
title: `${s}(m)`,
|
|
key: s,
|
|
dataIndex: s,
|
|
width: 150,
|
|
align: "center",
|
|
render: (rec, record) => <span>{rec || "-"}</span>
|
|
}))
|
|
return [...columns,...newCol,...zcColumns];
|
|
}
|
|
},[trData])
|
|
const width = useMemo(() => columns1?.reduce((total, cur) => total + (cur.width), 0), [columns1]);
|
|
// 单图多线以及数据表的数据
|
|
const getTableData = async(params) => {
|
|
try {
|
|
const res = await httppost2(apiurl.gcaqjc.gcaqfx.jrx.page, params)
|
|
let newArr = [];
|
|
let newData = res.data.map((s, i) => {
|
|
newArr.push(s.list.map(c => ({
|
|
[c.stationCode]: c.value || '-',
|
|
tm: c.tm,
|
|
|
|
})))
|
|
return {
|
|
tm: s.tm,
|
|
rz: s.rz,
|
|
status: s.status || '',
|
|
inx:i+1
|
|
}
|
|
})
|
|
let filterData = newArr.filter(s => s.length > 0).flat()
|
|
let result = newData.map(s => {
|
|
let tm1 = s.tm;
|
|
let r = filterData.filter(t => {
|
|
return t.tm == tm1
|
|
})
|
|
let obj = {};
|
|
r.forEach(s1 => {
|
|
obj = {...s1,...obj}
|
|
})
|
|
return {
|
|
...s,
|
|
...obj,
|
|
}
|
|
})
|
|
// let res1 = result.map(item => ({...item,rz:(item.rz - 100).toFixed(2)})) //为了测试 最后需要删除
|
|
setDateSources(result)
|
|
} catch (error) {
|
|
console.log(error);
|
|
}
|
|
}
|
|
|
|
// 多图单线数据
|
|
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,
|
|
profileName: dmList.find(s => s.id == code).projNm,
|
|
stationCodes: trData,
|
|
id:1
|
|
}
|
|
httppost5(apiurl.gcaqjc.gcaqfx.jrx.export, params).then(res => {
|
|
exportFile(`浸润线.xlsx`,res.data)
|
|
})
|
|
}
|
|
|
|
const getDmList = async () => {
|
|
try {
|
|
const res = await httppost2(apiurl.gcaqjc.sjtjcx.sycx.list)
|
|
setDmList(res.data.map(s => ({ projNm: s.profileName, id: s.profileCode })));
|
|
} catch (error) {
|
|
console.log(error);
|
|
}
|
|
}
|
|
|
|
const getDmTree = async() => {
|
|
try {
|
|
const res = await httppost2(apiurl.gcaqjc.sjtjcx.czcx.tree)
|
|
let filterData = res.data.filter(s => s.profileCode == code)
|
|
setTrData(filterData[0].children)
|
|
} catch (error) {
|
|
console.log(error);
|
|
}
|
|
}
|
|
|
|
|
|
const InitialScroll = (data) => {
|
|
let index = 0;
|
|
const v = document.getElementsByClassName("ant-table-body")[0];
|
|
if (data.length >= Number(1)) {
|
|
// 只有当大于10条数据的时候 才会看起滚动
|
|
const time = setInterval(() => {
|
|
v.scrollTop += Number(14);
|
|
if (
|
|
Math.ceil(v.scrollTop) >= parseFloat((v.scrollHeight - v.clientHeight).toString())
|
|
) {
|
|
v.scrollTop = 0;
|
|
// setTimeout(() => { v.scrollTop = 0 }, 1000)
|
|
}
|
|
echartsRef.current.getEchartsInstance().setOption(jrxOption(dataSources[index % dataSources.length],dbType))
|
|
index++;
|
|
}, Number(1000));
|
|
setTimer(time); // 定时器保存变量 利于停止
|
|
}
|
|
};
|
|
|
|
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 = {
|
|
stationCodes: trData,
|
|
...searchVal
|
|
}
|
|
getTableData(params)
|
|
getTable2Data(params)
|
|
}
|
|
|
|
}, [trData, searchVal]);
|
|
|
|
useEffect(() => {
|
|
if (code) {
|
|
getDmTree()
|
|
}
|
|
if (timer) {
|
|
clearInterval(timer)
|
|
}
|
|
if (dmList.length > 0 && code) {
|
|
let name = dmList.find(s => s.id == code)?.projNm
|
|
let type = name == "大坝B0+060" ? "1" :
|
|
name == "大坝B0+090" ? "2" :
|
|
name == "大坝B0+120" ? "2" : ''
|
|
setDbType(type)
|
|
}
|
|
}, [code])
|
|
useEffect(() => {
|
|
getDmList()
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
if (swiper && dataSources.length > 0) {
|
|
InitialScroll(dataSources)
|
|
} else {
|
|
clearInterval(timer)
|
|
}
|
|
return () => {
|
|
clearInterval(timer); // 停止定时器
|
|
}
|
|
}, [swiper, dataSources])
|
|
|
|
useEffect(()=>{
|
|
let scale = 1
|
|
const img = document.getElementById("img");
|
|
const fun = (e) => {
|
|
console.log(1111)
|
|
// 大于0:滚轮向上滚动 小于0:滚轮向下滚动
|
|
if (e.wheelDelta > 0) {
|
|
scale += 0.05;
|
|
img.style.transform = `scale(${scale})`;
|
|
} else {
|
|
if (scale == 1) {
|
|
img.style.left = 0 + "px";
|
|
img.style.top = 0 + "px";
|
|
}
|
|
// 缩放值大于1时,可以缩小,反之亦然
|
|
if (scale > 1) {
|
|
scale -= 0.05;
|
|
img.style.transform = `scale(${scale})`;
|
|
}
|
|
}
|
|
}
|
|
img.addEventListener("wheel",fun)
|
|
return ()=>{
|
|
img.removeEventListener("wheel",fun)
|
|
}
|
|
|
|
},[])
|
|
|
|
return (
|
|
<div className='content-box' style={{ backgroundColor: '#fff', height: '100%',display:'flex',padding:'10px' }}>
|
|
<div className='lf adcdTreeSelectorBox' style={{height:'calc(100vh - 110px)',width:'260px'}}>
|
|
<ListSelect
|
|
setAdcd={setCode}
|
|
listData={dmList}
|
|
/>
|
|
</div>
|
|
<div className='AdcdTreeTableBox' style={{width:'calc(100vw - 625px)'}}>
|
|
<Card
|
|
className='nonebox'
|
|
// onMouseOver={() => {
|
|
// clearInterval(timer)
|
|
// }}
|
|
>
|
|
<ToolBar
|
|
setSearchVal={setSearchVal}
|
|
exportFile={exportExcel}
|
|
setSwiper={setSwiper}
|
|
role={role}
|
|
/>
|
|
</Card>
|
|
<div className="ant-card-body" style={{ padding: "20px 0 0 0",overflow:"hidden" }}>
|
|
|
|
<div className='body-top' style={{ height: 380, width: "100%", marginTop: 10 }} >
|
|
<Rnd
|
|
default={{
|
|
x: 0,
|
|
y: 0,
|
|
width: '68%',
|
|
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}}>
|
|
<Table
|
|
columns={columns1}
|
|
key="inx"
|
|
dataSource={dataSources}
|
|
pagination={{pageSize:5}}
|
|
scroll={{ x: width, y: 250, scrollToFirstRowOnChange: true }}
|
|
onRow={record => {
|
|
return {
|
|
onClick:() => {echartsRef.current.getEchartsInstance().setOption(jrxOption(record,dbType))}
|
|
}
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|