103 lines
2.9 KiB
TypeScript
103 lines
2.9 KiB
TypeScript
import { Button, Divider, Drawer, Form, Input, Modal, Popconfirm, Space, Table } from 'antd';
|
|
import { ColumnsType } from 'antd/lib/table';
|
|
import moment from 'moment';
|
|
import React, { useMemo, useState } from 'react';
|
|
import OpButton, { DelOpButton, EditOpButton } from '../../components/crud/OpButton';
|
|
import { DamItem } from '../../models/_/defs';
|
|
import { IContextProp } from './_';
|
|
|
|
|
|
|
|
|
|
const DataTable: React.FC<{
|
|
ctx: IContextProp
|
|
}> = ({ ctx }) => {
|
|
|
|
const { pager2, crud } = ctx;
|
|
const generateTimeData = (count = 15) => {
|
|
const timeLabels = [];
|
|
const now = moment();
|
|
|
|
for (let i = count - 1; i >= 0; i--) {
|
|
const time = now.clone().subtract(i, 'hours');
|
|
timeLabels.push(time.format('YYYY-MM-DD HH:mm'));
|
|
}
|
|
|
|
return timeLabels;
|
|
};
|
|
|
|
// 电压数据
|
|
const voltageData = [0, 0,15, 12, 17, 11, 13,0,5, 0,0,0,0,15, 12, 17, 11, 13,30, 0,0,0,0,0,5, 0,0,0,0,15, 12, 17,30, 11, 13];
|
|
|
|
// 时间标签
|
|
const timeLabels = generateTimeData(15);
|
|
const columns = useMemo<ColumnsType<DamItem>>(() => [
|
|
|
|
{ title: '站名', key: '站名', dataIndex: '站名', width: 120, align: 'center' },
|
|
|
|
{ title: '测站编码', key: '测站编码', dataIndex: '测站编码', width: 120, align: 'center' },
|
|
{
|
|
title: '时间', key: '时间', dataIndex: '时间', width: 120, align: 'center',
|
|
render: (v: any, r: any, i: any) => <span>{timeLabels[i]}</span>
|
|
|
|
},
|
|
{
|
|
title: '数据(mm)', key: '数据(mm)', dataIndex: '数据(mm)', width: 120, align: 'center',
|
|
render: (v: any, r: any, i: any) => <span>{voltageData[i]}</span>
|
|
|
|
},
|
|
], []);
|
|
|
|
const [openIntroduction, setOpenIntroduction] = useState(false);
|
|
|
|
|
|
const onCloseIntroduction = () => {
|
|
setOpenIntroduction(false);
|
|
};
|
|
const [form] = Form.useForm();
|
|
// 弹框
|
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
|
|
const showModal = () => {
|
|
setIsModalOpen(true);
|
|
};
|
|
|
|
const handleOk = () => {
|
|
setIsModalOpen(false);
|
|
};
|
|
|
|
const handleCancel = () => {
|
|
setIsModalOpen(false);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Table
|
|
columns={columns}
|
|
rowKey={row => row.大坝代码}
|
|
{...pager2.tableProps}
|
|
/>
|
|
<Modal title="详情" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
|
|
<Form form={form} name="validateOnly" layout="vertical" autoComplete="off" >
|
|
<Form.Item name="序号" label="序号" rules={[{ required: true }]}>
|
|
<Input />
|
|
</Form.Item>
|
|
<Form.Item name="站名" label="站名" rules={[{ required: true }]}>
|
|
<Input />
|
|
</Form.Item>
|
|
<Form.Item name="数据(mm)" label="数据(mm)" rules={[{ required: true }]}>
|
|
<Input />
|
|
</Form.Item>
|
|
<Form.Item>
|
|
<Space>
|
|
|
|
<Button htmlType="reset">Reset</Button>
|
|
</Space>
|
|
</Form.Item>
|
|
</Form>
|
|
</Modal>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default DataTable |