OperationalService/web/client/src/sections/data/containers/dataTableComponent.jsx

/*
 * @Author: zhaobing
 * @Date: 2023-11-02 09:32:25
 */
import React, { useState, useEffect } from 'react';
import { connect } from 'react-redux';
import { Table, Button, Alert, Spin } from '@douyinfe/semi-ui'; 
// import { ApiTable } from '../../../../utils/webapi';
import FileSaver from 'file-saver';
import moment from 'moment';

const DataTableComponent = (props) => {
    const {dataList}=props
    const [currentPage, setCurrentPage] = useState(1);
    const [exportingFlag, setExportingFlag] = useState(false);
    const [isRequesting, setIsRequesting] = useState(false);
    const [arr,setArr]=useState(dataList.items)
    const [data,setData]=useState([])
    // const [list,setList]=useState(dataList.sensors)
    const [columns,setColumns]=useState([])
    //初始化     
    useEffect(()=>{
        setArr(dataList.items)
    },[dataList])
    useEffect(()=>{

        // let arr=[{readingNumber:{name: '电表示数', unit: 'kWh'}}]
        // let dataSource = [{values: {total: 24138.97}, time: "2023-11-03 14:18:27.000"},{values: {total: 24138.97}, time: "2023-11-03 14:18:27.000"}]
        let columns = []
        columns.push({
            title: '设备位置',
            dataIndex: 'position',
            key: 'position',
        });
        for (let index in arr) {
            columns.push({
                title: arr[index].name + '(' + arr[index].unit + ')',
                dataIndex: index,
                sorter: (a, b) => b[index] - a[index],
                key: index,
            })
        };
        columns.push({
            title: '采集时间',
            dataIndex: 'acqTime',
            sorter: (a, b) => b['realTime'] - a['realTime'],
            key: 'acqTime',
        });
        //设备
        const data1=[]
        if (JSON.stringify(dataList) != "{}") {
            let themeItems = dataList.items
            let themeStations = dataList.sensors
            for (let i = 0; i < themeStations.length; i++) {
                for (let k = 0; k < themeStations[i].data.length; k++) {
                    let cdataT={}
                    let startT = "";
                    let endT = "";
                    let dataTS = themeStations[i].data[k];
                    cdataT.key = `station-${themeStations[i].id}-${k}`;
                    cdataT.position = themeStations[i].name;
                    cdataT.acqTime = moment(dataTS.time).format('YYYY-MM-DD HH:mm:ss');
                    cdataT.realTime = moment(dataTS.time).valueOf();
                    if (startT == "") {
                        startT = dataTS.time;
                        endT = dataTS.time;
                    } else {
                        if (moment(startT) >= moment(dataTS.time))
                            startT = dataTS.time;
                        if (moment(endT) <= moment(dataTS.time))
                            endT = dataTS.time;
                    }
                    //动态列的值
                    for (let themeItem in arr) {
                        cdataT[themeItem] = dataTS.values[themeItem];
                    }
                    data1.push(cdataT) 
                }
            }
        }
        
        setData(data1)
        setColumns(columns)
    },[dataList])







    const exporting = () => {
        setIsRequesting(true);
    };

    const pageChange = (page, pageSize) => {
        setCurrentPage(page);
    };

    const exportCsv = (data, title, filename) => {
        setExportingFlag(true);
    };

    const exportVibrationCsv = (data, title, filename) => {
        setExportingFlag(true);
    };

    const renderViberationChart = () => {
    };

    useEffect(() => {
        setCurrentPage(1);
    }, [props]);
    


    return (
        <div>
            <Spin spinning={isRequesting}>
                <div>
                {/* <p style={{ textAlign: 'right', margin: 8 }}>
                                {
                                    data.length ? <Button type="ghost" onClick={exporting}>导出</Button> : null
                                }
                 </p> */}
                <Table dataSource={data} columns={columns} pagination={{ current: currentPage, onChange:pageChange }} />
                </div>
            </Spin>
        </div>
    );
};

const mapStateToProps = (state) => {
    const { auth, global, dataContinuityType, dataContinuity,pepProjectId} = state;
    return {
       user: auth.user,
       actions: global.actions,
       dataContinuityType: dataContinuityType.data || [],
       dataContinuity: dataContinuity.data || [],
       pepProjectId:global.pepProjectId
    };
};

export default connect(mapStateToProps)(DataTableComponent);