tsg-web/src/views/gcaqjc/gcaqfx/jrx/index.js

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';
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 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 [dmList, setDmList] = useState([])
  const [trData, setTrData] = useState([])
  const [swiper, setSwiper] = useState(false)
  const [timer, setTimer] = useState(100); // 定时器
  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 && dbType1) {
      return jrxOption(dataSources[0], dbType,dbType1)
    } else {
      return dataSources[0];
    }
  }, [dataSources, dbType,dbType1])

  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) => {
    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,

        })))
        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,
        }
      })
      if (result.length > 0) {
        setLoading(false)
      }
      // let res1 = result.map(item => ({...item,rz:(item.rz - 100).toFixed(2)})) //为了测试  最后需要删除
      setDateSources(result)
    } 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,dbType1))
        index++;
      }, Number(1000));
      setTimer(time); // 定时器保存变量 利于停止
    }
  };

  const [scale, setScale] = useState(1)
  const scaleRef = useRef(null)
  scaleRef.current = scale;

  useEffect(() => {
    if (trData.length > 0 && searchVal) {
      let params = {
        stationCodes: trData,
        ...searchVal
      }
      getTableData(params)
    }

  }, [trData, searchVal]);

  useEffect(() => {
    if (code.length) {
      getDmTree()
    }
    if (timer) {
      clearInterval(timer)
    }
    if (dmList.length > 0 && code.length) {
      let name = dmList.find(s => s.id == code)?.projNm
      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, dmList])
  

  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");
    if (!img) return;
    const fun = (e) => {
      // 大于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)
    }
    
  },[loading])
 
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>
      {
        !loading ? <div className="ant-card-body" style={{ padding: "20px 0 0 0", overflow: "hidden" }}>

        <div style={{ height: 420, width: "100%",overflow:'hidden',position:'relative' }} >
          <Rnd
            default={{
              x: 0,
              y: 0,
              width: 1305,
              height: 380
            }}
          >
            <div id="img">
              <div style={{ textAlign: "center", marginBottom: 10, fontSize: 20 }}>断面名称:{dmList.find(s => s.id == code)?.projNm}</div>
              <ReactEcharts
                option={jrxOptions}
                style={{ width: "100%", height: 380 }}
                notMerge={true}
                ref={echartsRef}
              />
            </div>
          </Rnd>
        </div>
        <div className='body-top' style={{ marginTop: 30 }}>
          <Table
            columns={columns1}
            key="inx"
            dataSource={dataSources}
            pagination={false}
            scroll={{ x: width, y: 250, scrollToFirstRowOnChange: true }}
            onRow={record => {
              return {
                onClick: () => { echartsRef.current.getEchartsInstance().setOption(jrxOption(record, dbType,dbType1)) }
              }
            }}
          />
        </div>
        </div> :
          <Spin size='large' style={{width:'100%',margin:'300px auto'}}></Spin>
      }
      
    </div>
  </div>
)
}