feat(): 统计报表开发

src/service/apiurl.js

@@ -110,6 +110,18 @@ const apiurl = {
     sbgzjl: {
        page: service_ykz + '/deviceFailureRecord/page',
       export:service_ykz + '/deviceFailureRecord/export'
+    },
+    tjbb: {
+      swrbb: service_ykz + '/statistics/sdSwRb',//水位日报表
+      swrbbExport: service_ykz + "/statistics/sdSwRb/export",//水位日报表导出
+      swnbb: service_ykz + '/statistics/rjswNb',//水位年报表上方表格
+      swnbbSummary:service_ykz + '/statistics/rjswNb/stat',//水位年报表下方总结栏
+      swnbbExport: service_ykz + '/statistics/rjswNb/export',//水位年报表导出
+      jyrbb: service_ykz + '/statistics/sdJyRb',//降雨日报表
+      jyrbbExport: service_ykz + '/statistics/sdJyRb/export',//降雨日报表导出
+      jynbb: service_ykz + '/statistics/rjyNb',//降雨年报表上方表格
+      jynbbExport:service_ykz + '/statistics/rjyNb/export',//降雨年报表下方总结栏
+      jynbbSummary: service_ykz + '/statistics/rjyNb/stat',//降雨年报表导出
     }
   },
   systemM: {

src/views/Gcyx/InformationSearch/StaticTable/index.js

@@ -1,87 +1,163 @@
-import React, { Fragment, useRef, useMemo,useEffect,useState } from 'react';
+import React, { Fragment, useRef, useMemo, useEffect, useState } from 'react';
-import { Table, Card, Modal, Form, Input, Button, Row,Col, Timeline, message, Tabs,Image } from 'antd';
+import { Table, Card, Modal, Form, Input, Button, Row, Col, Timeline, message, Tabs, Image } from 'antd';
 import ToolBar from './toolbar';
 import apiurl from '../../../../service/apiurl';
 import usePageTable from '../../../../components/crud/usePageTable2';
 import { createCrudService } from '../../../../components/crud/_';
-import { httppost5 } from '../../../../utils/request';
+import { httppost5, httppost2 } from '../../../../utils/request';
 import { exportFile } from '../../../../utils/tools.js';
 
 const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
 const Page = () => {
 
   const [searchVal, setSearchVal] = useState(false)
+  const [requsetUrlObj, setRequsetUrlObj] = useState({})
+  const requsetUrlObjRef = useRef(null)
+  requsetUrlObjRef.current = requsetUrlObj;
   const timeColumns = [
     { title: '日期', key: 'date', dataIndex: 'date', width: 120, align: "center", fixed: "left" },
-    ...Array(16).fill(0).map((item,index) => ({
+    ...Array(16).fill(0).map((item, index) => ({
-      title: `${index+9}时`,
+      title: `${index + 9}时`,
-      key: `drpH${index+9}`,
+      key: `rzH${index + 9}`,
-      dataIndex: `drpH${index+9}`,
+      dataIndex: `rzH${index + 9}`,
       width: 80,
       align: "center",
-      sorter:  (a, b) => a[`drpH${index+9}`] - b[`drpH${index+9}`]
+      sorter: (a, b) => a[`rzH${index + 9}`] - b[`rzH${index + 9}`]
     })),
-    ...Array(8).fill(0).map((item,index) => ({
+    ...Array(8).fill(0).map((item, index) => ({
-      title: `${index+1}时`,
+      title: `${index + 1}时`,
-      key: `drpH${index+1}`,
+      key: `rzH${index + 1}`,
-      dataIndex: `drpH${index+1}`,
+      dataIndex: `rzH${index + 1}`,
       width: 80,
       align: "center",
-      sorter:  (a, b) => a[`drpH${index+1}`] - b[`drpH${index+1}`]
+      sorter: (a, b) => a[`rzH${index + 1}`] - b[`rzH${index + 1}`]
     })),
-    { title: '日累计', key: 'drpD', dataIndex: 'drpD', width: 100, align: "center",sorter: (a, b) => a.drpD - b.drpD, },
+    { title: '平均', key: 'rzAvg	', dataIndex: 'rzAvg', width: 100, align: "center", sorter: (a, b) => a.rzAvg	 - b.rzAvg},
-
   ];
 
   const dayColumns = [
     { title: '日期', key: 'date', dataIndex: 'date', width: 120, align: "center", fixed: "left" },
-    ...Array(30).fill(0).map((item,index) => ({
+    ...Array(30).fill(0).map((item, index) => ({
-      title: `${index+1}天`,
+      title: `${index + 1}天`,
-      key: `drpM${index+1}`,
+      key: `drpM${index + 1}`,
-      dataIndex: `drpM${index+1}`,
+      dataIndex: `drpM${index + 1}`,
       width: 100,
       align: "center",
     }))
   ];
   const yearColumns = [
     { title: '日期', key: 'date', dataIndex: 'date', width: 120, align: "center", fixed: "left" },
-    ...Array(12).fill(0).map((item,index) => ({
+    ...Array(12).fill(0).map((item, index) => ({
-      title: `${index+1}月`,
+      title: `${index + 1}月`,
-      key: `drpM${index+1}`,
+      key: `drpM${index + 1}`,
-      dataIndex: `drpM${index+1}`,
+      dataIndex: `drpM${index + 1}`,
       width: 100,
       align: "center",
     }))
   ];
 
+  const newTimeColumns = useMemo(() => {
+    const changeColumns = JSON.parse(JSON.stringify(timeColumns));
+    changeColumns[changeColumns.length - 1] = {
+      title: '日累计',
+      key: 'drpD',
+      dataIndex: 'drpD',
+      width: 100,
+      align: 'center',
+      sorter: (a, b) => a.drpD	 - b.drpD
+    }
+    const cols = [changeColumns[0]];
+    changeColumns.forEach((item, i) => {
+      if (i > 0) {
+        if (i < 16) {
+          item.sorter = (a,b) => a[`drpH${i + 9}`] - b[`drpH${i + 9}`]
+        } else {
+          item.sorter = (a,b) => a[`drpH${i + 1}`] - b[`drpH${i + 1}`]
+        }
+        cols.push({
+          ...item,
+          key: item.key.replace('rz', 'drp'),
+           dataIndex: item.dataIndex.replace('rz', 'drp'),
+          })
+      }
+    })
+    return searchVal.type == 1 ? cols :timeColumns
+  }, [searchVal])
+
+  // const newYearColumns = useMemo(() => {
+  //   return searchVal.type == 1 ? yearColumns.map(item => ({ ...item, key: item.key.replace('rz', 'drp'), dataIndex: item.dataIndex.replace('rz', 'drp') })) : yearColumns
+  // }, [searchVal])
+
   const width = useMemo(() => {
-    let columns = searchVal.type1 == 0 ? timeColumns : searchVal.type1 == 1 ? dayColumns : yearColumns;
+    let columns = searchVal.type1 == 0 ? timeColumns : searchVal.type1 == 1 ? yearColumns : yearColumns;
     return columns.reduce((total, cur) => total + (cur.width), 0)
-  }, [searchVal.type1]); 
+  }, [searchVal]);
-  const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.sbwh.whfabz.page).find_noCode);
+
+
+  const [data, setData] = useState([])
+  const getData = async (params) => {
+    try {
+      const res = await httppost2(requsetUrlObjRef.current?.page, params)
+      if (res.code == 200) {
+        setData(res.data)
+      }
+    } catch (error) {
+      console.log(error);
+
+    }
+  }
   // 导出
   const exportExcel = () => {
     let params = {
       ...searchVal,
     }
-      httppost5(apiurl.pxjh.export, params).then(res => {
+    httppost5(requsetUrlObjRef.current?.export, params).then(res => {
-        exportFile(`统计报表.xlsx`,res.data)
+      exportFile(`统计报表.xlsx`, res.data)
     })
   }
-  useEffect(()=>{
+
-    const params = {
+  const getUrl = (name, type) => {
-      search: {
+    let urlObj;
-        ...searchVal,
+    let obj = {
+      page: type == 0 ? apiurl.gcyx.tjbb.swrbb : apiurl.gcyx.tjbb.swnbb,
+      export: type == 0 ? apiurl.gcyx.tjbb.swrbbExport : apiurl.gcyx.tjbb.swnbbExport
+    }
+    switch (name) {
+      case 0:
+        urlObj = obj
+        break;
+      case 1:
+        urlObj = {
+          page: type == 0 ? apiurl.gcyx.tjbb.jyrbb : apiurl.gcyx.tjbb.jynbb,
+          export: type == 0 ? apiurl.gcyx.tjbb.jyrbbExport : apiurl.gcyx.tjbb.jynbbExport
+        }
+        break;
+      case 2:
+        urlObj = obj
+        break;
+      case 3:
+        urlObj = obj
+        break;
+      default:
+        break;
+    }
+    return urlObj
+  }
+  useEffect(() => {
+    if (searchVal) {
+      // const params = searchVal.type != 1 ? searchVal : { start: searchVal.dateRangeSo.start, end: searchVal.dateRangeSo.end };
+      const params = { ...searchVal }
+      setRequsetUrlObj(getUrl(searchVal.type, searchVal.type1))
+      requsetUrlObjRef.current = getUrl(searchVal.type, searchVal.type1)
+      getData(params)
     }
-    };
-    search(params)
   }, [searchVal])
 
 
   return (
     <>
-      <div className='content-root clearFloat xybm' style={{paddingBottom:"0"}}>
+      <div className='content-root clearFloat xybm' style={{ paddingBottom: "0" }}>
-        <div className='lf CrudAdcdTreeTableBox' style={{width:"100%",overflowY:"auto"}}>
+        <div className='lf CrudAdcdTreeTableBox' style={{ width: "100%", overflowY: "auto" }}>
           <Card className='nonebox'>
             <ToolBar
               setSearchVal={setSearchVal}
@@ -96,9 +172,10 @@ const Page = () => {
                   <div style={{ textAlign: "right" }}>单位：m³/s</div>
                 </>
               )}
-              columns={searchVal.type1 == 0 ? timeColumns : searchVal.type1 == 1 ? dayColumns :yearColumns}
+              columns={searchVal.type1 == 0 ? newTimeColumns : searchVal.type1 == 1 ? yearColumns : yearColumns}
-              rowKey="inx"
+              rowKey="date"
-              {...tableProps}
+              dataSource={data}
+              pagination={false}
               scroll={{ x: width, y: "calc( 100vh - 400px )" }} />
           </div>
         </div>

src/views/Gcyx/InformationSearch/StaticTable/toolbar.js

@@ -5,7 +5,8 @@ import NormalSelect from '../../../../components/Form/NormalSelect';
 import moment from 'moment';
 const { RangePicker } = DatePicker;
 const ToolBar = ({ setSearchVal, onSave, storeData, exportFile1 }) => {
-  
+  const start  = moment().subtract(7,'days').format('YYYY-MM-DD 00:00:00')
+  const end = moment().format('YYYY-MM-DD 23:59:59')
   const types = [
     {
       label: "闸后流量",
@@ -30,13 +31,13 @@ const ToolBar = ({ setSearchVal, onSave, storeData, exportFile1 }) => {
       label: "日报表",
       value: 0
     },
-    {
+    // {
-      label: "月报表",
+    //   label: "月报表",
-      value: 1
+    //   value: 1
-    },
+    // },
     {
       label: "年报表",
-      value: 2
+      value: 1
     },
   ]
 
@@ -44,29 +45,36 @@ const ToolBar = ({ setSearchVal, onSave, storeData, exportFile1 }) => {
   const [form] = Form.useForm();
 
   const onFinish = (values) => {
-    let dateSo;
+    let dateRangeSo;
     if (values.tm) {
-      dateSo = {
+      dateRangeSo = timeType == 0 ? {
         start: moment(values.tm[0]).format('YYYY-MM-DD HH:mm:ss'),
         end: moment(values.tm[1]).format('YYYY-MM-DD HH:mm:ss')
-      }
+      } : {year: moment(values.tm).format('YYYY')}
     }
     delete values.tm
-    setSearchVal({...values, dateSo});
+    const params = timeType == 0 ? dateRangeSo : undefined;
+    setSearchVal({
+      ...values,
+      dateRangeSo: params,
+      year: timeType == 1 ? dateRangeSo.year : undefined
+    });
   }
   
   const onValuesChange = (val) => {
     if ('type1' in val) {
       setTimeType(val.type1)
+      val.type1 == 1 ? form.setFieldValue('tm', moment()) :
+      form.setFieldValue('tm',[moment(start),moment(end)])
     }
   }
   useEffect(() => {
+     form.setFieldValue('tm',[moment(start),moment(end)])
      form.setFieldValue('type1', 0)
-    setSearchVal({type1:0})
+     form.setFieldValue('type', 0)
+    setSearchVal({type1:0,type:0,dateRangeSo:{start:start,end:end}})
   }, [])
 
-
-
   return (
     <>
       <div style={{display:'flex',justifyContent:'space-between'}}>
@@ -77,7 +85,7 @@ const ToolBar = ({ setSearchVal, onSave, storeData, exportFile1 }) => {
           onFinish={onFinish}
           onValuesChange={onValuesChange}
         >
-          <Form.Item label="统计项目" name="name">
+          <Form.Item label="统计项目" name="type">
           <NormalSelect allowClear style={{ width: '150px' }} options={types} />
           </Form.Item>
           <Form.Item label="统计维度" name="type1">
@@ -93,7 +101,7 @@ const ToolBar = ({ setSearchVal, onSave, storeData, exportFile1 }) => {
               <DatePicker 
                allowClear
                style={{ width: "150px" }}
-               picker="month"/> :
+               picker="year"/> :
                <DatePicker 
                allowClear
                style={{ width: "150px" }}