feat(): 修改demo数据

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]);
 

src/models/_/defs.ts

@@ -28,4 +28,5 @@ export type DamItem = {
   "坝顶长度": string,
   "坝顶宽度": string,
   "创建日期": string,
+  'index':string
 }

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' }
     
       ],
     },

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<Dispatch>();
@@ -42,6 +42,7 @@ const AppRouters: React.FC = () => {
         { path: 'txls', element: <TxlsPage /> },
 
         { path: 'manage', element: <ManagePage /> },
+        { path: 'ywmanage', element: <YwManagePage /> },
  
         { path: '*', element: <NotFound /> },
       ]

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',

src/views/Dyls/DataTable2.tsx

@@ -15,16 +15,41 @@ const DataTable: React.FC<{
 
   const { pager2, crud } = ctx;
   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' },
+    {
+      title: '时间', key: '时间', dataIndex: '时间', width: 120, align: 'center',
+      render: (v: any, r: any, i: any) => <span>{timeLabels[i]}</span>
+    },
   
-    { 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) => <span>{voltageData[i]}</span>
+      
+     },
   ], []);
 
+  
   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 = () => {

src/views/Dyls/_.ts

@@ -26,7 +26,6 @@ export function usePageContext(): IContextProp {
   const crud = useCrud<CRUD_TYPER>();
   const pager = usePageTable<DamItem>((opt: any) => paginateDemo('8.json', opt));
   const pager2 = usePageTable<DamItem>((opt: any) => paginateDemo('9.json', opt));
-
   const saveOrUpdate = async (val: FormPropType): Promise<void> => {
 
     if (crud.loading || (crud.mode !== 'add' && crud.mode !== 'edit')) {

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',

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<ColumnsType<DamItem>>(() => [
  
     { 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) => <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);

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',

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<ColumnsType<DamItem>>(() => [
  
     { 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) => <span>{timeLabels[i]}</span>
+      
+     },
+    { 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) => <span>{voltageData[i]}</span>
+      
+     },
   ], []);
 
   const [openIntroduction, setOpenIntroduction] = useState(false);

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) => (
         <Space split={<Divider type="vertical" />}>
-          <div className='act-but'><Button className='but3' type="link" 
-          onClick={async() =>
-          {
-            console.log("www",row)
-            showModal()
-            
+          <div className='act-but'><Button className='but3' type="link"
+            onClick={async () => {
+              console.log("www", row)
+              showModal()
+
             }}>编辑</Button></div>
+          <Popconfirm title="确定要删除吗?" onConfirm={() => { }}>
             <Button type="link" >	删除</Button>
-            <Button type="link" >	采集项管理</Button>
-            <Button type="link" >	 	站点管理</Button>
-
-           
-
+          </Popconfirm>
+          <Button type="link" onClick={() => handleMang(row)}>	站点配置管理</Button>
         </Space>
       )
     }
@@ -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<ColumnsType<DamItem>>(() => [
+    { 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 (
     <>
       <Table
@@ -76,25 +105,163 @@ const DataTable: React.FC<{
         rowKey={row => row.大坝代码}
         {...pager.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="测站编码" label="测站编码" rules={[{ required: true }]}>
-        <Input />
-      </Form.Item>
-      <Form.Item>
-        <Space>
-        
-          <Button htmlType="reset">Reset</Button>
-        </Space>
-      </Form.Item>
-    </Form>
-    </Modal>
+      <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="测站编码" label="测站编码" rules={[{ required: true }]}>
+            <Input />
+          </Form.Item>
+          <Form.Item>
+            <Space>
+
+              <Button htmlType="reset">Reset</Button>
+            </Space>
+          </Form.Item>
+        </Form>
+      </Modal>
+
+
+      <Modal width={1000} destroyOnClose title="站点配置管理" open={isStaModalOpen} onOk={() => setIsStaModalOpen(false)} onCancel={() => setIsStaModalOpen(false)} >
+        <div className='container'>
+          <div className='header'>
+            <h4 style={{ fontWeight: 'bold' }}>站点信息</h4>
+            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+              <span>RTU编码：2025051002</span>
+              <span>站名：{(staRecord as any)["站名"] || '未设置'}</span>
+              <span>站码：{(staRecord as any)["测站编码"] || '未设置'}</span>
+              <span>基础高程：{(staRecord as any)["基础准高程"] || '未设置'}</span>
+            </div>
+          </div>
+          <div style={{ marginLeft: 'auto', textAlign: 'right', marginTop: 10, marginBottom: 10 }}>
+
+            <Button onClick={()=>setAddStaOpen(true)}>新增</Button>
+          </div>
+          <Table
+            columns={columns1}
+            dataSource={[]}
+          />
+        </div>
+      </Modal>
+
+
+
+      <Modal
+        title='增加站点采集项信息'
+        open={addStaOpen}
+        destroyOnClose
+        onCancel={()=>setAddStaOpen(false)}
+         footer={[
+  
+    <Button key="submit" type="primary" onClick={() => setAddStaOpen(false)}>
+      增加
+    </Button>
+  ]}
+      >
+        <Form
+          form={form1}
+          onFinish={() => { }}
+          onValuesChange={onValuesChange}
+        >
+          <Form.Item
+            name='通道号'
+            label='通道号'
+            labelCol={{ span: 5 }}
+        wrapperCol={{ span: 16 }}
+            rules={[{ required: true }]}
+          >
+            <Input style={{ width: '100%' }} allowClear />
+          </Form.Item>
+          <Form.Item
+            name='采集项代码'
+            label='采集项代码'
+            rules={[{ required: true }]}
+            labelCol={{ span: 5 }}
+        wrapperCol={{ span: 16 }}
+          >
+            <Input style={{ width: '100%' }} allowClear />
+          </Form.Item>
+          <Form.Item
+            name='采集项名称'
+            label='采集项名称'
+            labelCol={{ span: 5 }}
+        wrapperCol={{ span: 16 }}
+            rules={[{ required: true }]}
+          >
+            <Input style={{ width: '100%' }} allowClear />
+          </Form.Item>
+          <Form.Item
+            name="是否计算量"
+            label="是否计算量"
+            rules={[{ required: true }]}
+            labelCol={{ span: 5 }}
+        wrapperCol={{ span: 16 }}
+          >
+          <Select>
+              <Select.Option value="1">原始采集量</Select.Option>
+              <Select.Option value="2">公式计算</Select.Option>
+              <Select.Option value="3">参数修正</Select.Option>
+            </Select>
+          </Form.Item>
+
+            {/* 添加提示文字 */}
+          {
+            change == '2' &&<div style={{ marginLeft: '20.8%', marginBottom: '16px', color: '#666', fontSize: '12px',marginTop:'-4%' }}>
+      在其他采集量的基础上，通过公式计算得出
+    </div>
+        }
+          {
+            change == "2" &&
+
+           <>
+           <Form.Item
+            name='计算公式'
+            label='计算公式'
+            labelCol={{ span: 5 }}
+        wrapperCol={{ span: 16 }}
+            rules={[{ required: true }]}
+          >
+            <Input style={{ width: '100%' }} allowClear />
+          </Form.Item>
+
+          <Form.Item
+            name='x输入'
+            label='x输入'
+            labelCol={{ span: 5 }}
+        wrapperCol={{ span: 16 }}
+            rules={[{ required: true }]}
+          >
+            <Input style={{ width: '100%' }} allowClear />
+          </Form.Item>
+
+          <Form.Item
+            name='参数a'
+            label='参数a'
+            labelCol={{ span: 5 }}
+        wrapperCol={{ span: 16 }}
+            rules={[{ required: true }]}
+          >
+            <Input style={{ width: '100%' }} allowClear />
+          </Form.Item>
+
+
+          <Form.Item
+            name='参数b'
+            label='参数b'
+            labelCol={{ span: 5 }}
+        wrapperCol={{ span: 16 }}
+            rules={[{ required: true }]}
+          >
+            <Input style={{ width: '100%' }} allowClear />
+              </Form.Item>
+              </>
+          }
+        </Form>
+      </Modal>
     </>
   )
 }

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',

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<ColumnsType<DamItem>>(() => [
  
     { 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) => <span>{timeLabels[i]}</span>
+      
+     },
+    {
+      title: '数据(m)', key: '数据(m)', dataIndex: '数据(m)', width: 120, align: 'center',
+      render: (v: any, r: any, i: any) => <span>{voltageData[i]}</span>
+      
+     },
   
   ], []);
 

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 (
     <div className='content-body common-style'>
@@ -45,7 +52,12 @@ const SysUserPage: React.FC = () => {
     /></Col>
   */}
       
-     <Col span={12}><img src={Pic} style={{width:'100%'}} /></Col>
+        <Col span={12} style={{position:'relative'}}>
+          <img src={Pic} style={{ width: '100%' }} />
+          <div style={{ position: 'absolute', top: 0, color: "#fff", left: '1%', fontSize: 16 }}>
+            {generateFormattedDateTime()}
+          </div>
+        </Col>
 
 
      

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<ColumnsType<DataType>>(() => [
+    { title: '序号', dataIndex: 'index', key: 'index', render: (v: any, r: any, i: any) => <span>{i+1}</span> },
+    { 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 ? <Badge color='green' text="正常" /> : <Badge color='red' text="异常" />) },
+    {
+      title: '操作', key: '_', width: 100, align: 'center', fixed: 'right', render: (value: any, row: any) => (
+        <Space split={<Divider type="vertical" />}>
+          <div className='act-but'><Button className='but3' type="link"
+            onClick={async () => {
+              console.log("www", row)
+              showModal()
+              setRecord(row)
+            }}>编辑</Button></div>
+          <Button type="link" onClick={() => handleMang(row)}>	操作记录</Button>
+        </Space>
+      )
+    }
+  ], []);
+
+
+ 
+  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<ColumnsType<DataType>>(() => [
+    { 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 (
+    <>
+      <Table
+        columns={columns}
+        rowKey={row => row.index}
+        // {...pager.tableProps}
+        dataSource={tableData}
+      />
+      <Modal title="修改协议" open={isModalOpen} onOk={handleOk} onCancel={handleCancel} footer={[
+
+          <Button key="submit" type="primary" onClick={() => setIsModalOpen(false)}>
+            修改
+          </Button>
+        ]}>
+        <Form form={form} initialValues={record}>
+          <Form.Item 
+            name="stationCode"
+            label="协议编码"
+            labelCol={{ span: 5 }}
+            wrapperCol={{ span: 16 }}
+            rules={[{ required: true }]}
+
+          >
+            <Input />
+          </Form.Item>
+         <Form.Item 
+            name="stationName"
+            label="协议名称"
+            labelCol={{ span: 5 }}
+            wrapperCol={{ span: 16 }}
+            rules={[{ required: true }]}
+
+          >
+            <Input />
+          </Form.Item>
+          <Form.Item 
+            name="channelNo"
+            label="端口"
+            labelCol={{ span: 5 }}
+            wrapperCol={{ span: 16 }}
+            rules={[{ required: true }]}
+
+          >
+            <Input />
+          </Form.Item>
+          <Form.Item 
+            name="collectionCode"
+            label="站点数量"
+            labelCol={{ span: 5 }}
+            wrapperCol={{ span: 16 }}
+            rules={[{ required: true }]}
+
+          >
+            <Input />
+          </Form.Item>
+          <Form.Item 
+            name="collectionName"
+            label="传输协议"
+            labelCol={{ span: 5 }}
+            wrapperCol={{ span: 16 }}
+            rules={[{ required: true }]}
+
+          >
+            <Input />
+          </Form.Item>
+          <Form.Item 
+            name="dataType"
+            label="数据协议名称"
+            labelCol={{ span: 5 }}
+            wrapperCol={{ span: 16 }}
+            rules={[{ required: true }]}
+
+          >
+            <Input />
+          </Form.Item>
+          <Form.Item 
+            name="isCalculated"
+            label="数据协议"
+            labelCol={{ span: 5 }}
+            wrapperCol={{ span: 16 }}
+            rules={[{ required: true }]}
+
+          >
+            <Input />
+          </Form.Item>
+          <Form.Item 
+            name="lastTime1"
+            label="备注"
+            labelCol={{ span: 5 }}
+            wrapperCol={{ span: 16 }}
+
+          >
+            <TextArea rows={4} />
+          </Form.Item>
+        </Form>
+      </Modal>
+
+
+      <Modal width={1000} destroyOnClose title="查看记录" open={isStaModalOpen} onOk={() => setIsStaModalOpen(false)} onCancel={() => setIsStaModalOpen(false)} footer={null}>
+        <div className='container'>
+          <Table
+            columns={columns1}
+            dataSource={[]}
+          />
+        </div>
+      </Modal>
+
+
+
+      <Modal
+        title='增加站点采集项信息'
+        open={addStaOpen}
+        destroyOnClose
+        footer={[
+
+          <Button key="submit" type="primary" onClick={() => setAddStaOpen(false)}>
+            增加
+          </Button>
+        ]}
+      >
+        <Form
+          form={form1}
+          onFinish={() => { }}
+          onValuesChange={onValuesChange}
+        >
+          <Form.Item
+            name='通道号'
+            label='通道号'
+            labelCol={{ span: 5 }}
+            wrapperCol={{ span: 16 }}
+            rules={[{ required: true }]}
+          >
+            <Input style={{ width: '100%' }} allowClear />
+          </Form.Item>
+          <Form.Item
+            name='采集项代码'
+            label='采集项代码'
+            rules={[{ required: true }]}
+            labelCol={{ span: 5 }}
+            wrapperCol={{ span: 16 }}
+          >
+            <Input style={{ width: '100%' }} allowClear />
+          </Form.Item>
+          <Form.Item
+            name='采集项名称'
+            label='采集项名称'
+            labelCol={{ span: 5 }}
+            wrapperCol={{ span: 16 }}
+            rules={[{ required: true }]}
+          >
+            <Input style={{ width: '100%' }} allowClear />
+          </Form.Item>
+          <Form.Item
+            name="是否计算量"
+            label="是否计算量"
+            rules={[{ required: true }]}
+            labelCol={{ span: 5 }}
+            wrapperCol={{ span: 16 }}
+          >
+            <Select>
+              <Select.Option value="1">原始采集量</Select.Option>
+              <Select.Option value="2">公式计算</Select.Option>
+              <Select.Option value="3">参数修正</Select.Option>
+            </Select>
+          </Form.Item>
+
+          {/* 添加提示文字 */}
+          {
+            change == '2' && <div style={{ marginLeft: '20.8%', marginBottom: '16px', color: '#666', fontSize: '12px', marginTop: '-4%' }}>
+              在其他采集量的基础上，通过公式计算得出
+            </div>
+          }
+          {
+            change == "2" &&
+
+            <>
+              <Form.Item
+                name='计算公式'
+                label='计算公式'
+                labelCol={{ span: 5 }}
+                wrapperCol={{ span: 16 }}
+                rules={[{ required: true }]}
+              >
+                <Input style={{ width: '100%' }} allowClear />
+              </Form.Item>
+
+              <Form.Item
+                name='x输入'
+                label='x输入'
+                labelCol={{ span: 5 }}
+                wrapperCol={{ span: 16 }}
+                rules={[{ required: true }]}
+              >
+                <Input style={{ width: '100%' }} allowClear />
+              </Form.Item>
+
+              <Form.Item
+                name='参数a'
+                label='参数a'
+                labelCol={{ span: 5 }}
+                wrapperCol={{ span: 16 }}
+                rules={[{ required: true }]}
+              >
+                <Input style={{ width: '100%' }} allowClear />
+              </Form.Item>
+
+
+              <Form.Item
+                name='参数b'
+                label='参数b'
+                labelCol={{ span: 5 }}
+                wrapperCol={{ span: 16 }}
+                rules={[{ required: true }]}
+              >
+                <Input style={{ width: '100%' }} allowClear />
+              </Form.Item>
+            </>
+          }
+        </Form>
+      </Modal>
+    </>
+  )
+}
+
+export default DataTable

src/views/YwManage/Manage.tsx

@@ -0,0 +1,30 @@
+import { Button, Form, Input, Modal, Select } from 'antd'
+import React, { useState } from 'react'
+import DataTable from './DataTable'
+import SearchBar from './SearchBar'
+import { usePageContext } from './_'
+
+
+const SysUserPage: React.FC = () => {
+
+  const ctx = usePageContext();
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const handleOk = () => {
+    setIsModalOpen(false);
+  };
+
+  const handleCancel = () => {
+    setIsModalOpen(false);
+  };
+
+  const [isShow, setIsShow] = useState(false); // 控制modal显示和隐藏
+  return (
+    <div className='content-body common-style'>
+      {/* <SearchBar ctx={ctx} /> */}
+      <DataTable ctx={ctx} />
+      
+    </div>
+  )
+}
+
+export default SysUserPage

src/views/YwManage/SearchBar.tsx

@@ -0,0 +1,66 @@
+import { SearchOutlined } from '@ant-design/icons'
+import { Button, Col, Form, Input, Row, Select, Space } from 'antd'
+import React from 'react'
+import { IContextProp } from './_'
+import { DatePicker} from 'antd';
+
+const { RangePicker } = DatePicker;
+const SearchBar: React.FC<{
+  ctx: IContextProp
+}> = ({ ctx }) => {
+  const { pager } = ctx;
+
+  const doSearch = (data: any) => {
+    pager.search({
+      search: {
+        username: data.name,
+      }
+    })
+  }
+
+  return (
+    <Form layout="horizontal" onFinish={doSearch}>
+      <Row gutter={32}>
+
+      <Col flex={0} style={{ width: 260 }}>
+          <Form.Item name="管理单位" label="管理单位">
+            <Input placeholder='请输入管理单位' allowClear />
+          </Form.Item>
+        </Col>
+        <Col flex={0} style={{ width: 260 }}>
+          <Form.Item name="测站编码" label="测站编码">
+            <Input placeholder='请输入测站编码' allowClear />
+          </Form.Item>
+        </Col>
+      
+        <Col flex={0} style={{ width: 260 }}>
+          <Form.Item name="站名" label="站名">
+            <Input placeholder='请输入站名' allowClear />
+         
+          </Form.Item>
+        </Col>
+        <Col flex={0} style={{ width: 260 }}>
+          <Form.Item name="协议" label="协议">
+          <Select>
+              <Select.Option value="1">暂无</Select.Option>
+             
+            </Select>
+          </Form.Item>
+        </Col>
+        <Col>
+          <Space>
+            <Button htmlType='submit' icon={<SearchOutlined />} type="primary">
+              查询
+            </Button>
+            <Button htmlType='submit' type="primary">
+              新建
+            </Button>
+          </Space>
+          
+        </Col>
+      </Row>
+    </Form>
+  )
+}
+
+export default SearchBar

src/views/YwManage/_.ts

@@ -0,0 +1,69 @@
+import { message } from "antd";
+import useCrud, { BasicCrudType, CrudContext } from "../../components/crud/useCrud";
+import usePageTable, { PageTableContext } from "../../components/crud/usePageTable";
+import { DamItem } from "../../models/_/defs";
+import { httpGet, httpPost, paginate, paginateDemo } from "../../utils/request";
+
+
+type CRUD_TYPER = BasicCrudType;
+
+
+export type IContextProp = {
+  pager: PageTableContext<DamItem>;
+  crud: CrudContext<CRUD_TYPER>;
+  saveOrUpdate: (val: FormPropType) => Promise<void>;
+  del: (val: any) => Promise<void>;
+}
+
+
+export type FormPropType = {
+}
+
+
+export function usePageContext(): IContextProp {
+  const crud = useCrud<CRUD_TYPER>();
+  const pager = usePageTable<DamItem>((opt: any) => paginateDemo('4_1.json', opt));
+
+
+  const saveOrUpdate = async (val: FormPropType): Promise<void> => {
+
+    if (crud.loading || (crud.mode !== 'add' && crud.mode !== 'edit')) {
+      return;
+    }
+
+    crud.setLoading(true);
+
+    /*
+    const res: any = await httpPost(apiPaths.whitelist[crud.mode], val);
+    if (res) {
+      message.success('操作成功');
+      pager.refresh();
+      crud.goto(null, null);
+    }
+    */
+
+    crud.setLoading(false);
+  }
+
+  const del = async (val: any) => {
+
+    crud.setLoading(true);
+    /*
+    const res: any = await httpGet(`${apiPaths.whitelist.del}/${val?.userId}`);
+    if (res) {
+      message.success('操作成功');
+      pager.refresh();
+    }
+    */
+    crud.setLoading(false);
+  }
+
+  return {
+    crud,
+    pager,
+    saveOrUpdate,
+    del
+  }
+}
+
+