diff --git a/src/views/gcaqjc/gcaqfx/jrx/index.js b/src/views/gcaqjc/gcaqfx/jrx/index.js index 7437e078a..25f3a012c 100644 --- a/src/views/gcaqjc/gcaqfx/jrx/index.js +++ b/src/views/gcaqjc/gcaqfx/jrx/index.js @@ -1,5 +1,5 @@ -import React, { useState, useEffect,useMemo,useRef } from 'react' -import { Table, Card,Button,message,Popconfirm } from 'antd'; +import React, { useState, useEffect, useMemo, useRef } from 'react' +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,26 +12,34 @@ 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" }, { title: '时间', key: 'tm', dataIndex: 'tm', width: 150, align: "center" }, @@ -40,56 +48,60 @@ export default function Xmzlmb() { const zcColumns = [ { title: '结果分析', key: 'status', dataIndex: 'status', width: 150, align: "center", - render: (rec, record) => {rec == 1 ? "正常" : rec == 0 ? "异常" : ''} - }, + render: (rec, record) => {rec == 1 ? "正常" : rec == 0 ? "异常" : ''} + }, ]; const columns1 = useMemo(() => { - if (trData.length > 0) { - let newCol = trData.map(s => ({ + if (trData.length > 0) { + let newCol = trData.map(s => ({ title: `${s}(m)`, key: s, dataIndex: s, width: 150, align: "center", - render: (rec, record) => {rec || "-"} - })) - return [...columns,...newCol,...zcColumns]; - } - },[trData]) + render: (rec, record) => {rec || "-"} + })) + return [...columns, ...newCol, ...zcColumns]; + } + }, [trData]) const width = useMemo(() => columns1?.reduce((total, cur) => total + (cur.width), 0), [columns1]); // 单图多线以及数据表的数据 - const getTableData = async(params) => { + const getTableData = async (params) => { + setLoading(true); 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, - + 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 + 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 + return t.tm == tm1 }) let obj = {}; r.forEach(s1 => { - obj = {...s1,...obj} + obj = { ...s1, ...obj } }) return { ...s, ...obj, } }) + if (result.length > 0) { + setLoading(false) + } // let res1 = result.map(item => ({...item,rz:(item.rz - 100).toFixed(2)})) //为了测试 最后需要删除 setDateSources(result) } 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 = () => { let params = { ...searchVal, profileName: dmList.find(s => s.id == code).projNm, stationCodes: trData, - id:1 + id: 1 } httppost5(apiurl.gcaqjc.gcaqfx.jrx.export, params).then(res => { - exportFile(`浸润线.xlsx`,res.data) - }) + exportFile(`浸润线.xlsx`, res.data) + }) } const getDmList = async () => { @@ -127,11 +131,11 @@ export default function Xmzlmb() { } } - const getDmTree = async() => { + 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) + setTrData(filterData[0]?.children) } catch (error) { console.log(error); } @@ -139,7 +143,7 @@ export default function Xmzlmb() { const InitialScroll = (data) => { - let index = 0; + let index = 0; const v = document.getElementsByClassName("ant-table-body")[0]; if (data.length >= Number(1)) { // 只有当大于10条数据的时候 才会看起滚动 @@ -149,9 +153,9 @@ export default function Xmzlmb() { Math.ceil(v.scrollTop) >= parseFloat((v.scrollHeight - v.clientHeight).toString()) ) { 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++; }, 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,30 +173,33 @@ 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() }, []) - + useEffect(() => { if (swiper && dataSources.length > 0) { InitialScroll(dataSources) @@ -220,12 +210,11 @@ export default function Xmzlmb() { clearInterval(timer); // 停止定时器 } }, [swiper, dataSources]) - - useEffect(()=>{ + 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; @@ -241,93 +230,78 @@ export default function Xmzlmb() { img.style.transform = `scale(${scale})`; } } - } + } img.addEventListener("wheel",fun) return ()=>{ img.removeEventListener("wheel",fun) } - - },[]) - - return ( -
-
+ + },[loading]) + +return ( +
+
-
-
- { - // clearInterval(timer) - // }} - > - - -
- -
- +
+
+ { + // clearInterval(timer) + // }} + > + + + { + !loading ?
+ +
+ -
-
断面名称:{ dmList.find(s => s.id == code)?.projNm}
- {/*
-
- + -
-
- - -
-
*/} - +
+
断面名称:{dmList.find(s => s.id == code)?.projNm}
+ -
- -
-
- { - return { - onClick:() => {echartsRef.current.getEchartsInstance().setOption(jrxOption(record,dbType))} - } - }} + /> + + + +
+
{ + return { + onClick: () => { echartsRef.current.getEchartsInstance().setOption(jrxOption(record, dbType,dbType1)) } + } + }} /> - - - - - ) + + : + + } + + + +) } diff --git a/src/views/gcaqjc/gcaqfx/jrx/jrxOptions.js b/src/views/gcaqjc/gcaqfx/jrx/jrxOptions.js index 5f48d02c4..de909759a 100644 --- a/src/views/gcaqjc/gcaqfx/jrx/jrxOptions.js +++ b/src/views/gcaqjc/gcaqfx/jrx/jrxOptions.js @@ -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"?