tsg-web/src/views/Home/homePanelsLayoutPage/item_daba.js

import React, { Fragment, useRef, useMemo,useEffect,useState } from 'react';
import { Table, Modal, message, Image } from 'antd';
import { QuestionCircleOutlined } from '@ant-design/icons';
import usePageTable from '../../../components/crud/usePageTable2'
import { createCrudService } from '../../../components/crud/_';
import { httppost2 } from '../../../utils/request';
import apiurl from '../../../service/apiurl';
import SetDrpStation from '../setMapStation/drp.js'
import moment from 'moment';



const Page = () => {
    const [ tableData, setTableData ] = useState({})//在线
    console.log('tableData',tableData)
    const [ left, setLeft ] = useState(0)
    const [ imgList, setImgList ] = useState([
        { url:'https://axhub.im/ax9/6cde96761d7f938f/images/__-gis/u913.png' },
        { url:'https://axhub.im/ax9/6cde96761d7f938f/images/__-gis/u914.png' },
        { url:'https://axhub.im/ax9/6cde96761d7f938f/images/__-gis/u915.png' },
        { url:'https://img2.baidu.com/it/u=223726554,3148772466&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800' },
        { url:'https://t7.baidu.com/it/u=2604797219,1573897854&fm=193&f=GIF' },
        { url:'https://t7.baidu.com/it/u=2942499027,2479446682&fm=193&f=GIF' }

    ])
    const getData = async(val)=>{
        const { code, data} = await httppost2(apiurl.home.db)
        if(code!==200){
            return
        }
        setTableData(data[0])
    }

    useEffect(()=>{
        getData()
    },[])

  

    return (
        <>
        <div className="home_shuizhi">
            <dit className='home_shuizhi_item2'>
                <div>建筑物型式:</div>
                <div>{tableData.buildType}</div>
            </dit>
            <dit className='home_shuizhi_item2'>
                <div>地基特性:</div>
                <div>{tableData.foundCharacter}</div>
            </dit>
            <dit className='home_shuizhi_item2'>
                <div>坝顶高程(m):</div>
                <div>{tableData.damTopElev}</div>
            </dit>
            <dit className='home_shuizhi_item2'>
                <div>最大坝高(m):</div>
                <div>{tableData.damMaxHeig}</div>
            </dit>
            <dit className='home_shuizhi_item2'>
                <div>坝顶长度(m):</div>
                <div>{tableData.damTopLen}</div>
            </dit>
            <dit className='home_shuizhi_item2'>
                <div>坝顶宽度(m):</div>
                <div>{tableData.damTopWid}</div>
            </dit>
            {/* <dit className='home_shuizhi_item2'>
                <div>防浪墙顶高程(m):</div>
                <div>{tableData.damWaveWall}</div>
            </dit>
            <dit className='home_shuizhi_item2'>
                <div>开工日期:</div>
                <div>{tableData?.startDate?.slice(0,10)}</div>
            </dit>
            <dit className='home_shuizhi_item2'>
                <div>竣工日期:</div>
                <div>{tableData?.endDate?.slice(0,10)}</div>
            </dit>
            <dit className='home_shuizhi_item2'>
                <div>蓄水日期:</div>
                <div>{tableData?.storageDate?.slice(0,10)}</div>
            </dit> */}
            {/* <dit className='home_shuizhi_item2'>
                <div>图片资料</div>
                <div></div>
            </dit>
            <div style={{margin:'10px 35px',height:'70ox',overflow:'hidden' }}>
                <div style={{width:100*(imgList.length||0),position:'relative',left:left+'px'}}>
                    {
                        imgList.map((item)=>{
                            return (
                                <div style={{marginRight:'10px',display:"inline-block"}}>
                                    <Image width={90} height={60} src={item.url}/>
                                </div>
                            )
                        })
                    }
                </div>
                <img 
                    src={`${process.env.PUBLIC_URL}/assets/xyt/homeImg/leftBtn.svg`} 
                    alt="" 
                    style={{position:'absolute',left:'20px',marginTop:'-40px',cursor:'pointer'}}
                    onClick={()=>{
                        const imgLength = imgList.length
                        if(left<0){
                            setLeft(left+100)
                        }  
                    }}
                />
                <img 
                    src={`${process.env.PUBLIC_URL}/assets/xyt/homeImg/rightBtn.svg`} 
                    alt="" 
                    style={{position:'absolute',right:'30px',marginTop:'-40px',cursor:'pointer'}}
                    onClick={()=>{
                        const imgLength = imgList.length
                        if(imgLength>3 && left>(3-imgLength)*100){
                            setLeft(left-100)
                        }  
                    }}
                />
            </div> */}
            {/*  */}
            {/* <dit className='home_shuizhi_item2'>
                <div>视频资料:</div>
                <div></div>
            </dit> */}
        </div>
        </>
    )
}

export default Page