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

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" ? "3" : ''
      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={false}
              scroll={{ x: width, y: 250, scrollToFirstRowOnChange: true }}
              onRow={record => {
                return {
                  onClick:() => {echartsRef.current.getEchartsInstance().setOption(jrxOption(record,dbType))}
                }
              }}
          />
          </div>
      </div>
      </div>
      </div>
  )
}