diff --git a/src/assets/images/pic_history.jpg b/src/assets/images/pic_history.jpg new file mode 100644 index 0000000..65b1688 Binary files /dev/null and b/src/assets/images/pic_history.jpg differ diff --git a/src/assets/images/pic_history.png b/src/assets/images/pic_history.png index 9c60e47..eaa8723 100644 Binary files a/src/assets/images/pic_history.png and b/src/assets/images/pic_history.png differ diff --git a/src/components/DashboardLayout/index.tsx b/src/components/DashboardLayout/index.tsx index 5f623b9..ce20170 100644 --- a/src/components/DashboardLayout/index.tsx +++ b/src/components/DashboardLayout/index.tsx @@ -62,7 +62,7 @@ const DashboardLayout: React.FC = () => { useEffect(() => { if (leafMenu) { - document.title = '小玉潭水库 · ' + leafMenu.title + document.title = leafMenu.title } }, [leafMenu]); diff --git a/src/models/_/defs.ts b/src/models/_/defs.ts index 0a9a298..0c92a04 100644 --- a/src/models/_/defs.ts +++ b/src/models/_/defs.ts @@ -28,4 +28,5 @@ export type DamItem = { "坝顶长度": string, "坝顶宽度": string, "创建日期": string, + 'index':string } \ No newline at end of file diff --git a/src/models/auth/_.ts b/src/models/auth/_.ts index 97c4949..de1bbdd 100644 --- a/src/models/auth/_.ts +++ b/src/models/auth/_.ts @@ -79,7 +79,7 @@ export function loadMenu(user: LoginUser): MenuItem[] { { id: id(), title: '报文数据', redirect: '/mgr/data', icon: 'xtgl.png', children: [ - { id: id(), title: '报文历史', path: '/mgr/data' }, + { id: id(), title: '报文查询', path: '/mgr/data' }, // { id: id(), title: '测站查询', path: '/mgr/cezhan' }, ], @@ -91,12 +91,13 @@ export function loadMenu(user: LoginUser): MenuItem[] { { id: id(), title: '流量历史', path: '/mgr/llls' }, // { id: id(), title: '闸阀开度历史', path: '/mgr/Zfkd' }, { id: id(), title: '图像历史', path: '/mgr/txls' }, - { id: id(), title: '电压历史', path: '/mgr/dyls' }, + { id: id(), title: '工况历史', path: '/mgr/dyls' }, ], }, { id: id(), title: '系统管理', redirect: '/mgr/manage', icon: 'xtgl.png', children: [ - { id: id(), title: '站点信息管理', path: '/mgr/manage' } + { id: id(), title: '站点信息管理', path: '/mgr/manage' }, + { id: id(), title: '运维管理', path: '/mgr/ywmanage' } ], }, diff --git a/src/views/AppRouters.tsx b/src/views/AppRouters.tsx index c17c5ce..46a437c 100644 --- a/src/views/AppRouters.tsx +++ b/src/views/AppRouters.tsx @@ -14,7 +14,7 @@ import ZfkdPage from './Zfkd/Zfkd'; import DylsPage from './Dyls/Dyls'; import ManagePage from './Manage/Manage'; import TxlsPage from './Txls/Txls'; - +import YwManagePage from './YwManage/Manage' const AppRouters: React.FC = () => { const dispatch = useDispatch(); @@ -42,6 +42,7 @@ const AppRouters: React.FC = () => { { path: 'txls', element: }, { path: 'manage', element: }, + { path: 'ywmanage', element: }, { path: '*', element: }, ] diff --git a/src/views/Dyls/Charts.tsx b/src/views/Dyls/Charts.tsx index 5838d98..e3a4ff2 100644 --- a/src/views/Dyls/Charts.tsx +++ b/src/views/Dyls/Charts.tsx @@ -1,7 +1,7 @@ import React from 'react'; import {Card} from 'antd'; import ReactEcharts from 'echarts-for-react'; - +import moment from 'moment'; export default class Pie extends React.Component{ @@ -12,15 +12,34 @@ export default class Pie extends React.Component{ getOption =()=> { + // 使用moment生成时间数据 + 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('MM-DD HH:mm')); + } + + return timeLabels; + }; + // 生成副标题的时间范围 + const getTimeRange = (count = 15) => { + const now = moment(); + const startTime = now.clone().subtract(count - 1, 'hours'); + return `${startTime.format('YYYY-MM-DD HH:mm:ss')}至${now.format('YYYY-MM-DD HH:mm:ss')}`; + }; + let option = { title: { text: '电压数据', - subtext: '2023-07-01 17：06：00至2023-07-21 17：06：00 ' + subtext: getTimeRange(15) }, xAxis: { type: 'category', - data: ['07-01 17:00', '07-02 8:00', '07-03 1:00', '07-04 13:00', '07-05 06:00', '07-06 04:00', '07-09 05:00','07-01 17:00', '07-02 8:00', '07-03 1:00', '07-04 13:00', '07-05 06:00', '07-06 04:00', '07-09 05:00'], + data:generateTimeData(15), // 动态生成15个小时的时间标签 + // data: ['07-01 17:00', '07-02 8:00', '07-03 1:00', '07-04 13:00', '07-05 06:00', '07-06 04:00', '07-09 05:00','07-01 17:00', '07-02 8:00', '07-03 1:00', '07-04 13:00', '07-05 06:00', '07-06 04:00', '07-09 05:00'], axisLine: { lineStyle: { color: '#000', diff --git a/src/views/Dyls/DataTable2.tsx b/src/views/Dyls/DataTable2.tsx index 1ccc3da..e4faebb 100644 --- a/src/views/Dyls/DataTable2.tsx +++ b/src/views/Dyls/DataTable2.tsx @@ -15,16 +15,41 @@ const DataTable: React.FC<{ const { pager2, crud } = ctx; const columns = useMemo>(() => [ - { title: '站名', key: '站名', dataIndex: '站名', width: 120, align: 'center' }, { 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) => {timeLabels[i]} + }, - { title: '数据(v)', key: '数据(v)', dataIndex: '数据(v)', width: 120, align: 'center' }, + { + title: '数据(v)', key: '数据(v)', dataIndex: '数据(v)', width: 120, align: 'center', + render: (v: any, r: any, i: any) => {voltageData[i]} + + }, ], []); + const [openIntroduction, setOpenIntroduction] = useState(false); +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 = [5, 3, 5, 6, 2, 3, 4, 2, 8, 15, 10, 16, 17, 12, 10]; + + // 时间标签 + const timeLabels = generateTimeData(15); + const onCloseIntroduction = () => { diff --git a/src/views/Dyls/_.ts b/src/views/Dyls/_.ts index 14052e0..b7e140f 100644 --- a/src/views/Dyls/_.ts +++ b/src/views/Dyls/_.ts @@ -26,7 +26,6 @@ export function usePageContext(): IContextProp { const crud = useCrud(); const pager = usePageTable((opt: any) => paginateDemo('8.json', opt)); const pager2 = usePageTable((opt: any) => paginateDemo('9.json', opt)); - const saveOrUpdate = async (val: FormPropType): Promise => { if (crud.loading || (crud.mode !== 'add' && crud.mode !== 'edit')) { diff --git a/src/views/Historydata/Charts.tsx b/src/views/Historydata/Charts.tsx index dc71f5c..2a60eb0 100644 --- a/src/views/Historydata/Charts.tsx +++ b/src/views/Historydata/Charts.tsx @@ -1,6 +1,7 @@ import React from 'react'; import {Card} from 'antd'; import ReactEcharts from 'echarts-for-react'; +import moment from 'moment'; @@ -12,15 +13,34 @@ export default class Pie extends React.Component{ getOption =()=> { - + // 使用moment生成时间数据 + 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('MM-DD HH:mm')); + } + + return timeLabels; + }; + // 生成副标题的时间范围 + const getTimeRange = (count = 15) => { + const now = moment(); + const startTime = now.clone().subtract(count - 1, 'hours'); + return `${startTime.format('YYYY-MM-DD HH:mm:ss')}至${now.format('YYYY-MM-DD HH:mm:ss')}`; + }; let option = { title: { text: '小时降雨量数据', - subtext: '2023-07-01至2023-07-15' + subtext: getTimeRange(15) }, xAxis: { type: 'category', - data: ['07-01 17:00', '07-02 8:00', '07-03 1:00', '07-04 13:00', '07-05 06:00', '07-06 04:00', '07-09 05:00','07-01 17:00', '07-02 8:00', '07-03 1:00', '07-04 13:00', '07-05 06:00', '07-06 04:00', '07-09 05:00'], + data:generateTimeData(15), // 动态生成15个小时的时间标签 + + // data: ['07-01 17:00', '07-02 8:00', '07-03 1:00', '07-04 13:00', '07-05 06:00', '07-06 04:00', '07-09 05:00','07-01 17:00', '07-02 8:00', '07-03 1:00', '07-04 13:00', '07-05 06:00', '07-06 04:00', '07-09 05:00'], axisLine: { lineStyle: { color: '#000', diff --git a/src/views/Historydata/DataTable2.tsx b/src/views/Historydata/DataTable2.tsx index 041da7c..d5e4851 100644 --- a/src/views/Historydata/DataTable2.tsx +++ b/src/views/Historydata/DataTable2.tsx @@ -14,13 +14,38 @@ const DataTable: React.FC<{ }> = ({ 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>(() => [ { title: '站名', key: '站名', dataIndex: '站名', width: 120, align: 'center' }, { title: '测站编码', key: '测站编码', dataIndex: '测站编码', width: 120, align: 'center' }, - { title: '时间', key: '时间', dataIndex: '时间', width: 120, align: 'center' }, - { title: '数据(mm)', key: '数据(mm)', dataIndex: '数据(mm)', width: 120, align: 'center' }, + { + title: '时间', key: '时间', dataIndex: '时间', width: 120, align: 'center', + render: (v: any, r: any, i: any) => {timeLabels[i]} + + }, + { + title: '数据(mm)', key: '数据(mm)', dataIndex: '数据(mm)', width: 120, align: 'center', + render: (v: any, r: any, i: any) => {voltageData[i]} + + }, ], []); const [openIntroduction, setOpenIntroduction] = useState(false); diff --git a/src/views/Llls/Charts.tsx b/src/views/Llls/Charts.tsx index 9780cb8..de502ea 100644 --- a/src/views/Llls/Charts.tsx +++ b/src/views/Llls/Charts.tsx @@ -1,6 +1,7 @@ import React from 'react'; import {Card} from 'antd'; import ReactEcharts from 'echarts-for-react'; +import moment from 'moment'; @@ -12,15 +13,32 @@ export default class Pie extends React.Component{ getOption =()=> { - + 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('MM-DD HH:mm')); + } + + return timeLabels; + }; + // 生成副标题的时间范围 + const getTimeRange = (count = 15) => { + const now = moment(); + const startTime = now.clone().subtract(count - 1, 'hours'); + return `${startTime.format('YYYY-MM-DD HH:mm:ss')}至${now.format('YYYY-MM-DD HH:mm:ss')}`; + }; let option = { title: { text: '瞬时流量数据', - subtext: '2023-07-01 17：06：00至2023-07-21 17：06：00 ' + subtext: getTimeRange(15) }, xAxis: { type: 'category', - data: ['07-01 17:00', '07-02 8:00', '07-03 1:00', '07-04 13:00', '07-05 06:00', '07-06 04:00', '07-09 05:00','07-01 17:00', '07-02 8:00', '07-03 1:00', '07-04 13:00', '07-05 06:00', '07-06 04:00', '07-09 05:00'], + data:generateTimeData(15), // 动态生成15个小时的时间标签 + // data: ['07-01 17:00', '07-02 8:00', '07-03 1:00', '07-04 13:00', '07-05 06:00', '07-06 04:00', '07-09 05:00','07-01 17:00', '07-02 8:00', '07-03 1:00', '07-04 13:00', '07-05 06:00', '07-06 04:00', '07-09 05:00'], axisLine: { lineStyle: { color: '#000', diff --git a/src/views/Llls/DataTable2.tsx b/src/views/Llls/DataTable2.tsx index 66b7760..14ea0db 100644 --- a/src/views/Llls/DataTable2.tsx +++ b/src/views/Llls/DataTable2.tsx @@ -14,13 +14,37 @@ const DataTable: React.FC<{ }> = ({ 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 timeLabels = generateTimeData(15); + const voltageData = [5, 5,5, 6, 5,4,8,7,9, 8,6,4,6,6,9, 6,5,7,8,9,3]; + + const columns = useMemo>(() => [ { title: '站名', key: '站名', dataIndex: '站名', width: 120, align: 'center' }, { title: '测站编码', key: '测站编码', dataIndex: '测站编码', width: 120, align: 'center' }, - { title: '时间', key: '时间', dataIndex: '时间', width: 120, align: 'center' }, - { title: '通道', key: '通道', dataIndex: '通道', width: 120, align: 'center' }, { title: '数据(m³/s)', key: '数据(m³/s)', dataIndex: '数据(m³/s)', width: 120, align: 'center' }, + { + title: '时间', key: '时间', dataIndex: '时间', width: 120, align: 'center', + render: (v: any, r: any, i: any) => {timeLabels[i]} + + }, + { title: '通道', key: '通道', dataIndex: '通道', width: 120, align: 'center' }, + { + title: '数据(m³/s)', key: '数据(m³/s)', dataIndex: '数据(m³/s)', width: 120, align: 'center', + render: (v: any, r: any, i: any) => {voltageData[i]} + + }, ], []); const [openIntroduction, setOpenIntroduction] = useState(false); diff --git a/src/views/Manage/DataTable.tsx b/src/views/Manage/DataTable.tsx index b725e12..05a678c 100644 --- a/src/views/Manage/DataTable.tsx +++ b/src/views/Manage/DataTable.tsx @@ -1,4 +1,4 @@ -import { Button, Divider, Drawer, Form, Input, Modal, Popconfirm, Space, Table } from 'antd'; +import { Button, Divider, Drawer, Form, Input, Modal, Popconfirm, Space, Table,Select } from 'antd'; import { ColumnsType } from 'antd/lib/table'; import moment from 'moment'; import React, { useMemo, useState } from 'react'; @@ -27,21 +27,18 @@ const DataTable: React.FC<{ { title: '归属协议', key: '归属协议', dataIndex: '归属协议', width: 120, align: 'center' }, { title: '创建日期', key: '创建日期', dataIndex: '创建日期', width: 120, align: 'center' }, { - title: '操作', key: '_', width: 100, align: 'center', fixed: 'right',render: (value:any,row:any) => ( + title: '操作', key: '_', width: 100, align: 'center', fixed: 'right', render: (value: any, row: any) => ( }> -
+ { }}> - - - - - + + ) } @@ -54,13 +51,20 @@ const DataTable: React.FC<{ setOpenIntroduction(false); }; const [form] = Form.useForm(); + const [form1] = Form.useForm(); // 弹框 const [isModalOpen, setIsModalOpen] = useState(false); - + const [isStaModalOpen, setIsStaModalOpen] = useState(false); + const [staRecord, setStaRecord] = useState({}) const showModal = () => { setIsModalOpen(true); }; + const handleMang = (row: any) => { + console.log(row); + setIsStaModalOpen(true) + setStaRecord(row) + } const handleOk = () => { setIsModalOpen(false); }; @@ -69,6 +73,31 @@ const DataTable: React.FC<{ setIsModalOpen(false); }; + const columns1 = useMemo>(() => [ + { title: '序号', key: '序号', dataIndex: '序号', align: 'center' }, + { title: '通道号', key: '通道号', dataIndex: '通道号', align: 'center' }, + { title: '采集代码', key: '采集代码', dataIndex: '采集代码', align: 'center' }, + { title: '采集名称', key: '采集名称', dataIndex: '采集名称', align: 'center' }, + { title: '是否计算量', key: '是否计算量', dataIndex: '是否计算量', align: 'center' }, + { title: '计算公式', key: '计算公式', dataIndex: '计算公式', align: 'center' }, + { title: '参数a', key: '参数a', dataIndex: '参数a', align: 'center' }, + { title: '参数b', key: '参数b', dataIndex: '参数b', align: 'center' }, + { title: '参数b', key: '参数c', dataIndex: '参数c', align: 'center' }, + { title: '默认项', key: '默认项', dataIndex: '默认项', align: 'center' }, + { title: '操作', key: '操作', dataIndex: '操作', align: 'center' }, + + ] + , []); + + + const [addStaOpen, setAddStaOpen] = useState(false) + + const [change, setChange] = useState('') + const onValuesChange = (v:any, r:any) => { + if ('是否计算量' in v) { + setChange(v['是否计算量']) + } + } return ( <> row.大坝代码} {...pager.tableProps} /> - -
- - - - - - - - - - - - - - - - - + +
+ + + + + + + + + + + + + + + + + + + + setIsStaModalOpen(false)} onCancel={() => setIsStaModalOpen(false)} > +
+
+

站点信息

+
+ RTU编码：2025051002 + 站名：{(staRecord as any)["站名"] || '未设置'} + 站码：{(staRecord as any)["测站编码"] || '未设置'} + 基础高程：{(staRecord as any)["基础准高程"] || '未设置'} +
+
+
+ + +
+
+ + + + + + setAddStaOpen(false)} + footer={[ + + + ]} + > +
{ }} + onValuesChange={onValuesChange} + > + + + + + + + + + + + + + + {/* 添加提示文字 */} + { + change == '2' &&
+ 在其他采集量的基础上，通过公式计算得出 +
+ } + { + change == "2" && + + <> + + + + + + + + + + + + + + + + + + } + + ) } diff --git a/src/views/Swls/Charts.tsx b/src/views/Swls/Charts.tsx index c6f669c..25fa336 100644 --- a/src/views/Swls/Charts.tsx +++ b/src/views/Swls/Charts.tsx @@ -1,6 +1,7 @@ import React from 'react'; import {Card} from 'antd'; import ReactEcharts from 'echarts-for-react'; +import moment from 'moment'; @@ -12,15 +13,34 @@ export default class Pie extends React.Component{ getOption =()=> { - + // 使用moment生成时间数据 + 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('MM-DD HH:mm')); + } + + return timeLabels; + }; + // 生成副标题的时间范围 + const getTimeRange = (count = 15) => { + const now = moment(); + const startTime = now.clone().subtract(count - 1, 'hours'); + return `${startTime.format('YYYY-MM-DD HH:mm:ss')}至${now.format('YYYY-MM-DD HH:mm:ss')}`; + }; let option = { title: { text: '水位数据', - subtext: '2023-07-01 17：06：00至2023-07-21 17：06：00 ' + subtext: getTimeRange(15) }, xAxis: { type: 'category', - data: ['07-01 17:00', '07-02 8:00', '07-03 1:00', '07-04 13:00', '07-05 06:00', '07-06 04:00', '07-09 05:00','07-01 17:00', '07-02 8:00', '07-03 1:00', '07-04 13:00', '07-05 06:00', '07-06 04:00', '07-09 05:00'], + data:generateTimeData(15), // 动态生成15个小时的时间标签 + + // data: ['07-01 17:00', '07-02 8:00', '07-03 1:00', '07-04 13:00', '07-05 06:00', '07-06 04:00', '07-09 05:00','07-01 17:00', '07-02 8:00', '07-03 1:00', '07-04 13:00', '07-05 06:00', '07-06 04:00', '07-09 05:00'], axisLine: { lineStyle: { color: '#000', diff --git a/src/views/Swls/DataTable2.tsx b/src/views/Swls/DataTable2.tsx index 0f3263e..1aefd29 100644 --- a/src/views/Swls/DataTable2.tsx +++ b/src/views/Swls/DataTable2.tsx @@ -14,13 +14,38 @@ const DataTable: React.FC<{ }> = ({ 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 = [100, 100,95, 100, 100,100,100,100,95, 100,100,100,100,100,90, 100,100,100,100,95, ]; + + // 时间标签 + const timeLabels = generateTimeData(15); const columns = useMemo>(() => [ { title: '站名', key: '站名', dataIndex: '站名', width: 120, align: 'center' }, { title: '测站编码', key: '测站编码', dataIndex: '测站编码', width: 120, align: 'center' }, - { title: '时间', key: '时间', dataIndex: '时间', width: 120, align: 'center' }, - { title: '数据(m)', key: '数据(m)', dataIndex: '数据(m)', width: 120, align: 'center' }, + { + title: '时间', key: '时间', dataIndex: '时间', width: 120, align: 'center', + render: (v: any, r: any, i: any) => {timeLabels[i]} + + }, + { + title: '数据(m)', key: '数据(m)', dataIndex: '数据(m)', width: 120, align: 'center', + render: (v: any, r: any, i: any) => {voltageData[i]} + + }, ], []); diff --git a/src/views/Txls/Txls.tsx b/src/views/Txls/Txls.tsx index 77c1e1c..627a6fe 100644 --- a/src/views/Txls/Txls.tsx +++ b/src/views/Txls/Txls.tsx @@ -2,12 +2,12 @@ import { Button, Col, Form, Input, Modal, Row, Select, Tabs } from 'antd' import React, { useState } from 'react' import DataTable from './DataTable' import DataTable2 from './DataTable2' - +import moment from 'moment' import SearchBar from './SearchBar' import { usePageContext } from './_' import Charts from './Charts'; import type { TabsProps } from 'antd'; -import Pic from "../../assets/images/pic_history.png" +import Pic from "../../assets/images/pic_history.jpg" const SysUserPage: React.FC = () => { @@ -22,7 +22,14 @@ const SysUserPage: React.FC = () => { }; const [isShow, setIsShow] = useState(false); // 控制modal显示和隐藏 - +const generateFormattedDateTime = () => { + const now = moment(); + + // 生成格式：2025年06月29日 星期日 :11:03:10 + const formattedDateTime = now.format('YYYY年MM月DD日 dddd :HH:mm:ss'); + + return formattedDateTime; +}; return (
@@ -45,7 +52,12 @@ const SysUserPage: React.FC = () => { /> */} -
+ + +
+ {generateFormattedDateTime()} +
+ diff --git a/src/views/YwManage/DataTable.tsx b/src/views/YwManage/DataTable.tsx new file mode 100644 index 0000000..959525e --- /dev/null +++ b/src/views/YwManage/DataTable.tsx @@ -0,0 +1,394 @@ +import { Button, Divider, Drawer, Form, Input, Modal, Popconfirm, Space, Table, Select,Badge } 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 }) => { + interface DataType { + index: number; + key?: string; + stationCode: string; + stationName: string; + channelNo: string; + collectionCode: string; + dataType: string; + isCalculated: string; + lastTime: string; + value: string; + collectionName: string; + } + const { pager, crud } = ctx; +const { TextArea } = Input; +const [record, setRecord] = useState({}) + const columns = useMemo>(() => [ + { title: '序号', dataIndex: 'index', key: 'index', render: (v: any, r: any, i: any) => {i+1} }, + { title: '协议编码', dataIndex: 'stationCode', key: 'stationCode' }, + { title: '协议名称', dataIndex: 'stationName', key: 'stationName' }, + { title: '端口', dataIndex: 'channelNo', key: 'channelNo' }, + { title: '站点数量', dataIndex: 'collectionCode', key: 'collectionCode' }, + { title: '传输协议', dataIndex: 'collectionName', key: 'collectionName' }, + { title: '数据协议名称', dataIndex: 'dataType', key: 'dataType' }, + { title: '数据协议', dataIndex: 'isCalculated', key: 'isCalculated' }, + { title: '备注', dataIndex: 'lastTime1', key: 'lastTime1' }, + { title: '服务状态', dataIndex: 'value', key: 'value',render: val => (val ? : ) }, + { + title: '操作', key: '_', width: 100, align: 'center', fixed: 'right', render: (value: any, row: any) => ( + }> +
+ + + ) + } + ], []); + + + + const tableData: DataType[] = [ + { + index: 1, + stationCode: 'zh_tcp_5', + stationName: '水资源多孔闸门控制系统', + channelNo: '8006', + collectionCode: '211', + collectionName: 'TCP', + dataType: '水资源SZY206-2016', + isCalculated: 'sxy206-722', + lastTime: '722所RTU,原地址10.42.160.7:55017 新地址172.20.1.227:8006', + value: '正常', + }, + { + index: 3, + stationCode: 'zh_tcp_1', + stationName: '徐州伟思', + channelNo: '8002', + collectionCode: '3', + collectionName: 'TCP', + dataType: '水文SL651-2014', + isCalculated: 's1651', + lastTime: '徐州伟思RTU,原地址10.42.160.7:20001', + value: '正常', + }, + { + index: 5, + stationCode: 'zh_krp_4', + stationName: '闸门控制系统', + channelNo: '8005', + collectionCode: '33', + collectionName: 'TCP', + dataType: '水资源SZY206-2016', + isCalculated: 'szy206-722', + lastTime: '722所RTU,原地址10.42.160.7:7001 闸控系统722也是这个', + value: '正常', + }, + { + index: 6, + stationCode: 'zh_tcp_8', + stationName: '水资源闸门(ip.146)', + channelNo: '8007', + collectionCode: '14', + collectionName: 'TCP', + dataType: '水资源SZY206-2016', + isCalculated: 'szy206-722', + lastTime: '722所RTU.原地址10.42.160.146:6001', + value: '正常', + }, + { + index: 7, + stationCode: 'zh tcp_7', + stationName: '流量数据', + channelNo: '19002', + collectionCode: '1', + collectionName: 'TCP', + dataType: '水文SL651-2014', + isCalculated: 's1651', + lastTime: '武大智慧水业研究所流量数据，新端口', + value: '正常', + }, + ]; + + const [openIntroduction, setOpenIntroduction] = useState(false); + + + const onCloseIntroduction = () => { + setOpenIntroduction(false); + }; + const [form] = Form.useForm(); + const [form1] = Form.useForm(); + // 弹框 + const [isModalOpen, setIsModalOpen] = useState(false); + const [isStaModalOpen, setIsStaModalOpen] = useState(false); + const [staRecord, setStaRecord] = useState({}) + const showModal = () => { + setIsModalOpen(true); + }; + const handleMang = (row: any) => { + console.log(row); + + setIsStaModalOpen(true) + setStaRecord(row) + } + const handleOk = () => { + setIsModalOpen(false); + }; + + const handleCancel = () => { + setIsModalOpen(false); + }; + + const columns1 = useMemo>(() => [ + { title: '序号', key: '序号', dataIndex: '序号', align: 'center' }, + { title: '协议编码', key: '协议编码', dataIndex: '协议编码', align: 'center' }, + { title: '启/停原因', key: '启/停原因', dataIndex: '启/停原因', align: 'center' }, + { title: '操作ip', key: '操作ip', dataIndex: '操作ip', align: 'center' }, + { title: '操作时间', key: '操作时间', dataIndex: '操作时间', align: 'center' }, + + ] + , []); + + + const [addStaOpen, setAddStaOpen] = useState(false) + + const [change, setChange] = useState('') + const onValuesChange = (v: any, r: any) => { + if ('是否计算量' in v) { + setChange(v['是否计算量']) + } + } + return ( + <> +
row.index} + // {...pager.tableProps} + dataSource={tableData} + /> + setIsModalOpen(false)}> + 修改 + + ]}> +
+ + + + + + + + + + + + + + + + + + + + + + +