feat(): 测试曲线整合
parent
499b122591
commit
f0b8f07df5
|
|
@ -23,6 +23,7 @@ import UserInfo from './SystemMangant/UserInfo1'
|
||||||
import Dept from './SystemMangant/dept'
|
import Dept from './SystemMangant/dept'
|
||||||
import Role from './SystemMangant/role'
|
import Role from './SystemMangant/role'
|
||||||
import MenuM from './SystemMangant/menuM'
|
import MenuM from './SystemMangant/menuM'
|
||||||
|
import TestLine from './TestLine'
|
||||||
// const HomePage = lazy(() => import('./Home'))
|
// const HomePage = lazy(() => import('./Home'))
|
||||||
|
|
||||||
const AppRouters: React.FC = () => {
|
const AppRouters: React.FC = () => {
|
||||||
|
|
@ -56,11 +57,11 @@ const AppRouters: React.FC = () => {
|
||||||
{ path: 'sbwh/sbwzgl/kchsgl', element: <Kchsgl /> },
|
{ path: 'sbwh/sbwzgl/kchsgl', element: <Kchsgl /> },
|
||||||
{ path: 'sbwh/sbwzgl/bpbjgl', element: <Spbjgl /> },
|
{ path: 'sbwh/sbwzgl/bpbjgl', element: <Spbjgl /> },
|
||||||
// 工程运行
|
// 工程运行
|
||||||
{ path: 'gcyx/xxcx/jbqk', element: <BasicSituation /> },
|
// { path: 'gcyx/xxcx/jbqk', element: <BasicSituation /> },
|
||||||
{ path: 'gcyx/xxcx/yxqk', element: <RunSituation /> },
|
// { path: 'gcyx/xxcx/yxqk', element: <RunSituation /> },
|
||||||
{ path: 'gcyx/xxcx/tjbb', element: <StaticTable /> },
|
// { path: 'gcyx/xxcx/tjbb', element: <StaticTable /> },
|
||||||
{ path: 'gcyx/xxcx/czrz', element: <OperateLog /> },
|
// { path: 'gcyx/xxcx/czrz', element: <OperateLog /> },
|
||||||
{ path: 'gcyx/jsyj/sbgzjl', element: <Sbgzjl /> },
|
// { path: 'gcyx/jsyj/sbgzjl', element: <Sbgzjl /> },
|
||||||
|
|
||||||
// 系统管理
|
// 系统管理
|
||||||
{ path: 'xtgl/yhxx', element: <UserInfo /> },
|
{ path: 'xtgl/yhxx', element: <UserInfo /> },
|
||||||
|
|
@ -68,6 +69,9 @@ const AppRouters: React.FC = () => {
|
||||||
{ path: 'xtgl/jsgl', element: <Role /> },
|
{ path: 'xtgl/jsgl', element: <Role /> },
|
||||||
{ path: 'xtgl/cdgl', element: <MenuM /> },
|
{ path: 'xtgl/cdgl', element: <MenuM /> },
|
||||||
|
|
||||||
|
// 测试曲线
|
||||||
|
{ path: 'testLine/testLine', element: <TestLine /> },
|
||||||
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{ path: '/login', element: <LoginPage /> },
|
{ path: '/login', element: <LoginPage /> },
|
||||||
|
|
|
||||||
|
|
@ -6,10 +6,20 @@ import usePageTable from '../../../../components/crud/usePageTable2';
|
||||||
import { createCrudService } from '../../../../components/crud/_';
|
import { createCrudService } from '../../../../components/crud/_';
|
||||||
import { httppost5, httppost2 } from '../../../../utils/request';
|
import { httppost5, httppost2 } from '../../../../utils/request';
|
||||||
import { exportFile } from '../../../../utils/tools.js';
|
import { exportFile } from '../../../../utils/tools.js';
|
||||||
|
import './index.less'
|
||||||
const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
|
const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
|
||||||
const Page = () => {
|
const Page = () => {
|
||||||
|
const projectType = {
|
||||||
|
0: '闸后流量',
|
||||||
|
1: '雨量',
|
||||||
|
2: '闸前水位',
|
||||||
|
3:'闸后水位'
|
||||||
|
}
|
||||||
|
|
||||||
|
const bbType = {
|
||||||
|
0: '日报表',
|
||||||
|
1: '年报表',
|
||||||
|
}
|
||||||
const [searchVal, setSearchVal] = useState(false)
|
const [searchVal, setSearchVal] = useState(false)
|
||||||
const [requsetUrlObj, setRequsetUrlObj] = useState({})
|
const [requsetUrlObj, setRequsetUrlObj] = useState({})
|
||||||
const requsetUrlObjRef = useRef(null)
|
const requsetUrlObjRef = useRef(null)
|
||||||
|
|
@ -32,7 +42,7 @@ const Page = () => {
|
||||||
align: "center",
|
align: "center",
|
||||||
sorter: (a, b) => a[`rzH${index + 1}`] - b[`rzH${index + 1}`]
|
sorter: (a, b) => a[`rzH${index + 1}`] - b[`rzH${index + 1}`]
|
||||||
})),
|
})),
|
||||||
{ title: '平均', key: 'rzAvg ', dataIndex: 'rzAvg', width: 100, align: "center", sorter: (a, b) => a.rzAvg - b.rzAvg},
|
{ title: '平均', key: 'rzAvg ', dataIndex: 'rzAvg', width: 100, align: "center", sorter: (a, b) => a.rzAvg - b.rzAvg },
|
||||||
];
|
];
|
||||||
|
|
||||||
const dayColumns = [
|
const dayColumns = [
|
||||||
|
|
@ -69,10 +79,10 @@ const Page = () => {
|
||||||
const cols = [changeColumns[0]];
|
const cols = [changeColumns[0]];
|
||||||
changeColumns.forEach((item, i) => {
|
changeColumns.forEach((item, i) => {
|
||||||
if (i > 0) {
|
if (i > 0) {
|
||||||
if (i < 16) {
|
if (i < 17) {
|
||||||
item.sorter = (a,b) => a[`drpH${i + 9}`] - b[`drpH${i + 9}`]
|
item.sorter = (a,b) => a[`drpH${i + 8}`] - b[`drpH${i + 8}`]
|
||||||
} else {
|
} else {
|
||||||
item.sorter = (a,b) => a[`drpH${i + 1}`] - b[`drpH${i + 1}`]
|
item.sorter = (a,b) => a[`drpH${i - 16}`] - b[`drpH${i - 16}`]
|
||||||
}
|
}
|
||||||
cols.push({
|
cols.push({
|
||||||
...item,
|
...item,
|
||||||
|
|
@ -81,20 +91,17 @@ const Page = () => {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
return searchVal.type == 1 ? cols :timeColumns
|
return searchVal.type == 1 ? cols : timeColumns
|
||||||
}, [searchVal])
|
}, [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(() => {
|
const width = useMemo(() => {
|
||||||
let columns = searchVal.type1 == 0 ? timeColumns : searchVal.type1 == 1 ? yearColumns : yearColumns;
|
let columns = searchVal.type1 == 0 ? timeColumns : searchVal.type1 == 1 ? yearColumns : yearColumns;
|
||||||
return columns.reduce((total, cur) => total + (cur.width), 0)
|
return columns.reduce((total, cur) => total + (cur.width), 0)
|
||||||
}, [searchVal]);
|
}, [searchVal]);
|
||||||
|
|
||||||
|
const [staData, setStaData] = useState({})
|
||||||
const [data, setData] = useState([])
|
const [data, setData] = useState([])
|
||||||
|
|
||||||
const getData = async (params) => {
|
const getData = async (params) => {
|
||||||
try {
|
try {
|
||||||
const res = await httppost2(requsetUrlObjRef.current?.page, params)
|
const res = await httppost2(requsetUrlObjRef.current?.page, params)
|
||||||
|
|
@ -106,13 +113,39 @@ const Page = () => {
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// 年报表总结栏
|
||||||
|
const getStaData = async (params) => {
|
||||||
|
let obj = {};
|
||||||
|
try {
|
||||||
|
const res = await httppost2(requsetUrlObjRef.current?.yearSummary, params)
|
||||||
|
if (res.code == 200) {
|
||||||
|
res.data.list?.forEach(item => {
|
||||||
|
if (!obj[item.date]) {
|
||||||
|
let arr = Object.keys(item)
|
||||||
|
params.type == 1 ? arr.splice(0,1) :arr.splice(0,2)
|
||||||
|
obj[item.date] = arr.map(o => ({[o]:item[o]}))
|
||||||
|
}
|
||||||
|
})
|
||||||
|
setStaData({...res.data,list:obj})
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.log(error);
|
||||||
|
}
|
||||||
|
}
|
||||||
// 导出
|
// 导出
|
||||||
const exportExcel = () => {
|
const exportExcel = () => {
|
||||||
let params = {
|
let params = {
|
||||||
...searchVal,
|
...searchVal,
|
||||||
}
|
}
|
||||||
|
const fileName =
|
||||||
|
(searchVal?.type1 != 1 ?
|
||||||
|
`${formatDate(searchVal?.dateRangeSo?.start)} - ${formatDate(searchVal?.dateRangeSo?.end)}` :
|
||||||
|
searchVal.year) + projectType[searchVal.type] + bbType[searchVal.type1]
|
||||||
httppost5(requsetUrlObjRef.current?.export, params).then(res => {
|
httppost5(requsetUrlObjRef.current?.export, params).then(res => {
|
||||||
exportFile(`统计报表.xlsx`, res.data)
|
|
||||||
|
exportFile(`${fileName}.xlsx`, res.data)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -120,7 +153,8 @@ const Page = () => {
|
||||||
let urlObj;
|
let urlObj;
|
||||||
let obj = {
|
let obj = {
|
||||||
page: type == 0 ? apiurl.gcyx.tjbb.swrbb : apiurl.gcyx.tjbb.swnbb,
|
page: type == 0 ? apiurl.gcyx.tjbb.swrbb : apiurl.gcyx.tjbb.swnbb,
|
||||||
export: type == 0 ? apiurl.gcyx.tjbb.swrbbExport : apiurl.gcyx.tjbb.swnbbExport
|
export: type == 0 ? apiurl.gcyx.tjbb.swrbbExport : apiurl.gcyx.tjbb.swnbbExport,
|
||||||
|
yearSummary: type == 1 ? apiurl.gcyx.tjbb.swnbbSummary : ''
|
||||||
}
|
}
|
||||||
switch (name) {
|
switch (name) {
|
||||||
case 0:
|
case 0:
|
||||||
|
|
@ -129,7 +163,8 @@ const Page = () => {
|
||||||
case 1:
|
case 1:
|
||||||
urlObj = {
|
urlObj = {
|
||||||
page: type == 0 ? apiurl.gcyx.tjbb.jyrbb : apiurl.gcyx.tjbb.jynbb,
|
page: type == 0 ? apiurl.gcyx.tjbb.jyrbb : apiurl.gcyx.tjbb.jynbb,
|
||||||
export: type == 0 ? apiurl.gcyx.tjbb.jyrbbExport : apiurl.gcyx.tjbb.jynbbExport
|
export: type == 0 ? apiurl.gcyx.tjbb.jyrbbExport : apiurl.gcyx.tjbb.jynbbExport,
|
||||||
|
yearSummary:type == 1 ? apiurl.gcyx.tjbb.jynbbSummary : ''
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
case 2:
|
case 2:
|
||||||
|
|
@ -143,14 +178,26 @@ const Page = () => {
|
||||||
}
|
}
|
||||||
return urlObj
|
return urlObj
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const formatDate = (date1) => {
|
||||||
|
const date = new Date(date1);
|
||||||
|
const year = date.getFullYear();
|
||||||
|
const month = date.getMonth() + 1;
|
||||||
|
const day = date.getDate();
|
||||||
|
|
||||||
|
return year + '年' + month + '月' + day + '日';
|
||||||
|
}
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (searchVal) {
|
if (searchVal) {
|
||||||
// const params = searchVal.type != 1 ? searchVal : { start: searchVal.dateRangeSo.start, end: searchVal.dateRangeSo.end };
|
|
||||||
const params = { ...searchVal }
|
const params = { ...searchVal }
|
||||||
setRequsetUrlObj(getUrl(searchVal.type, searchVal.type1))
|
setRequsetUrlObj(getUrl(searchVal.type, searchVal.type1))
|
||||||
requsetUrlObjRef.current = getUrl(searchVal.type, searchVal.type1)
|
requsetUrlObjRef.current = getUrl(searchVal.type, searchVal.type1)
|
||||||
getData(params)
|
getData(params)
|
||||||
}
|
}
|
||||||
|
if (searchVal.type1 == 1) {
|
||||||
|
getStaData(searchVal)
|
||||||
|
}
|
||||||
}, [searchVal])
|
}, [searchVal])
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -168,15 +215,125 @@ const Page = () => {
|
||||||
<Table
|
<Table
|
||||||
title={() => (
|
title={() => (
|
||||||
<>
|
<>
|
||||||
<h2 style={{ textAlign: "center" }}>{searchVal?.year}闸后流量报表</h2>
|
<h2 style={{ textAlign: "center" }}>{searchVal?.type1 != 1 ? `${formatDate(searchVal?.dateRangeSo?.start)} - ${formatDate(searchVal?.dateRangeSo?.end)}` : searchVal.year}{projectType[searchVal.type]}{bbType[searchVal.type1]}</h2>
|
||||||
<div style={{ textAlign: "right" }}>单位：m³/s</div>
|
<div style={{ textAlign: "right" }}>单位：{searchVal?.type != 1 ? 'm' : 'mm'}</div>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
columns={searchVal.type1 == 0 ? newTimeColumns : searchVal.type1 == 1 ? yearColumns : yearColumns}
|
columns={searchVal.type1 == 0 ? newTimeColumns : searchVal.type1 == 1 ? yearColumns : yearColumns}
|
||||||
rowKey="date"
|
rowKey="date"
|
||||||
dataSource={data}
|
dataSource={data}
|
||||||
pagination={false}
|
pagination={false}
|
||||||
scroll={{ x: width, y: "calc( 100vh - 400px )" }} />
|
scroll={{ x: width, y: "calc( 100vh - 650px )" }}
|
||||||
|
summary={(pageData) => {
|
||||||
|
return (
|
||||||
|
searchVal.type1 == 1 ?
|
||||||
|
searchVal.type != 1 ?
|
||||||
|
<Table.Summary fixed>
|
||||||
|
<Table.Summary.Row>
|
||||||
|
<Table.Summary.Cell index={100} align='center' className="xyt-custom-cell">
|
||||||
|
<div className='table-summary-ceil'>
|
||||||
|
<div className='summary-left'></div>
|
||||||
|
<div className='summary-right'>平均</div>
|
||||||
|
</div>
|
||||||
|
</Table.Summary.Cell>
|
||||||
|
{staData?.list?.["平均"]?.map((item, index) => (
|
||||||
|
<Table.Summary.Cell index={index + 1} align='center'>{item[`drpM${index + 1}`]}</Table.Summary.Cell>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
</Table.Summary.Row>
|
||||||
|
<Table.Summary.Row>
|
||||||
|
<Table.Summary.Cell index={121} align='center' className="xyt-custom-cell">
|
||||||
|
<div className='table-summary-ceil'>
|
||||||
|
<div className='summary-left'></div>
|
||||||
|
<div className='summary-right'>最高</div>
|
||||||
|
</div>
|
||||||
|
</Table.Summary.Cell>
|
||||||
|
{staData?.list?.["最高"]?.map((item, index) => (
|
||||||
|
<Table.Summary.Cell index={index + 1} align='center'>{item[`drpM${index + 1}`]}</Table.Summary.Cell>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
</Table.Summary.Row>
|
||||||
|
<Table.Summary.Row>
|
||||||
|
<Table.Summary.Cell index={46} align='center' className="xyt-custom-cell">
|
||||||
|
<div className='table-summary-ceil'>
|
||||||
|
<div className='summary-left'>月统计</div>
|
||||||
|
<div className='summary-right'>最高日期</div>
|
||||||
|
</div>
|
||||||
|
</Table.Summary.Cell>
|
||||||
|
{staData?.list?.["最高日期"]?.map((item, index) => (
|
||||||
|
<Table.Summary.Cell index={index + 1} align='center'>{item[`drpM${index + 1}`]}</Table.Summary.Cell>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
</Table.Summary.Row>
|
||||||
|
<Table.Summary.Row>
|
||||||
|
<Table.Summary.Cell index={156} align='center' className="xyt-custom-cell">
|
||||||
|
<div className='table-summary-ceil'>
|
||||||
|
<div className='summary-left'></div>
|
||||||
|
<div className='summary-right'>最低</div>
|
||||||
|
</div>
|
||||||
|
</Table.Summary.Cell>
|
||||||
|
{staData?.list?.["最低"]?.map((item, index) => (
|
||||||
|
<Table.Summary.Cell index={index + 1} align='center'>{item[`drpM${index + 1}`]}</Table.Summary.Cell>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
</Table.Summary.Row>
|
||||||
|
<Table.Summary.Row>
|
||||||
|
<Table.Summary.Cell index={155} align='center' className="xyt-custom-cell" >
|
||||||
|
<div className='table-summary-ceil'>
|
||||||
|
<div className='summary-left'></div>
|
||||||
|
<div className='summary-right'>最低日期</div>
|
||||||
|
</div>
|
||||||
|
</Table.Summary.Cell>
|
||||||
|
{staData?.list?.["最低日期"]?.map((item, index) => (
|
||||||
|
<Table.Summary.Cell index={index + 1} align='center'>{item[`drpM${index + 1}`]}</Table.Summary.Cell>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
</Table.Summary.Row>
|
||||||
|
<Table.Summary.Row>
|
||||||
|
<Table.Summary.Cell index={200} align='center' >年统计</Table.Summary.Cell>
|
||||||
|
<Table.Summary.Cell index={1} align='center' >最高水位</Table.Summary.Cell>
|
||||||
|
<Table.Summary.Cell index={2} align='center' colSpan={3}>{staData?.max}</Table.Summary.Cell>
|
||||||
|
<Table.Summary.Cell index={3} align='center'>最低水位</Table.Summary.Cell>
|
||||||
|
<Table.Summary.Cell index={4} align='center' colSpan={3}>{staData?.min}</Table.Summary.Cell>
|
||||||
|
<Table.Summary.Cell index={3} align='center'>平均水位</Table.Summary.Cell>
|
||||||
|
<Table.Summary.Cell index={4} align='center' colSpan={3}>{staData?.avg}</Table.Summary.Cell>
|
||||||
|
</Table.Summary.Row>
|
||||||
|
</Table.Summary> :
|
||||||
|
<Table.Summary fixed>
|
||||||
|
<Table.Summary.Row>
|
||||||
|
<Table.Summary.Cell index={100} align='center' >月降雨量</Table.Summary.Cell>
|
||||||
|
{staData?.list?.["月降雨量"]?.map((item, index) => (
|
||||||
|
<Table.Summary.Cell index={index + 1} align='center'>{item[`drpM${index + 1}`]}</Table.Summary.Cell>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
</Table.Summary.Row>
|
||||||
|
<Table.Summary.Row>
|
||||||
|
<Table.Summary.Cell index={21} align='center' >降雨日数</Table.Summary.Cell>
|
||||||
|
{staData?.list?.["降雨日数"]?.map((item, index) => (
|
||||||
|
<Table.Summary.Cell index={index + 1} align='center'>{item[`drpM${index + 1}`]}</Table.Summary.Cell>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
</Table.Summary.Row>
|
||||||
|
<Table.Summary.Row>
|
||||||
|
<Table.Summary.Cell index={22} align='center' >最大日量</Table.Summary.Cell>
|
||||||
|
{staData?.list?.["最大日量"]?.map((item, index) => (
|
||||||
|
<Table.Summary.Cell index={index + 1} align='center'>{item[`drpM${index + 1}`]}</Table.Summary.Cell>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
</Table.Summary.Row>
|
||||||
|
<Table.Summary.Row>
|
||||||
|
<Table.Summary.Cell index={12} align='center' >年统计</Table.Summary.Cell>
|
||||||
|
<Table.Summary.Cell index={1} align='center' colSpan={3}>降水量</Table.Summary.Cell>
|
||||||
|
<Table.Summary.Cell index={2} align='center' colSpan={3}>{staData?.drpSum}</Table.Summary.Cell>
|
||||||
|
<Table.Summary.Cell index={3} align='center' colSpan={3}>降雨日数</Table.Summary.Cell>
|
||||||
|
<Table.Summary.Cell index={4} align='center' colSpan={3}>{staData?.dayCount}</Table.Summary.Cell>
|
||||||
|
</Table.Summary.Row>
|
||||||
|
</Table.Summary>
|
||||||
|
: null
|
||||||
|
)
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
.ant-table-summary {
|
||||||
|
.xyt-custom-cell{
|
||||||
|
padding: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.table-summary-ceil{
|
||||||
|
display: flex;
|
||||||
|
height: 34px;
|
||||||
|
width: 160px;
|
||||||
|
.summary-left{
|
||||||
|
line-height: 2.1;
|
||||||
|
width: 100px;
|
||||||
|
border-right: 1px solid #f0f0f0;
|
||||||
|
}
|
||||||
|
.summary-right{
|
||||||
|
flex:1;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 2.1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ant-table-thead > tr > th,
|
||||||
|
.ant-table-tbody > tr > td,
|
||||||
|
.ant-table tfoot > tr > th,
|
||||||
|
.ant-table tfoot > tr > td {
|
||||||
|
padding: 6px !important;
|
||||||
|
}
|
||||||
|
.ant-table-summary {
|
||||||
|
background-color: #f2f9fd !important;
|
||||||
|
}
|
||||||
|
|
@ -112,7 +112,7 @@ export default function Home() {
|
||||||
const end = moment().format('YYYY-MM-DD 23:59:59')
|
const end = moment().format('YYYY-MM-DD 23:59:59')
|
||||||
let params = {
|
let params = {
|
||||||
pageSo: {
|
pageSo: {
|
||||||
pageSize: 10,
|
pageSize: 999,
|
||||||
pageNumber:1
|
pageNumber:1
|
||||||
},
|
},
|
||||||
type:val.type,
|
type:val.type,
|
||||||
|
|
@ -133,7 +133,30 @@ export default function Home() {
|
||||||
//安全监测数据
|
//安全监测数据
|
||||||
const [safeData, setSafeData] = useState(Array(5).fill(0).map((item, i) => ({ id: i, cd: "SY01", dm: '1#断面', kpa: 2749, time: '2024-08-15 15:00:00' })))
|
const [safeData, setSafeData] = useState(Array(5).fill(0).map((item, i) => ({ id: i, cd: "SY01", dm: '1#断面', kpa: 2749, time: '2024-08-15 15:00:00' })))
|
||||||
//操作日志
|
//操作日志
|
||||||
const [operateData, setOperateData] = useState(Array(5).fill(0).map((item, i) => ({ id: i, cd: '1#闸孔', content: "设定闸门开度为0.10m", name: '刘天明', kpa: 2749, time: '2024-08-15 15:00:00' })))
|
const [operateData, setOperateData] = useState([])
|
||||||
|
const getLogData = async () => {
|
||||||
|
const start = moment().subtract(7,'days').format('YYYY-MM-DD 00:00:00')
|
||||||
|
const end = moment().format('YYYY-MM-DD 23:59:59')
|
||||||
|
let params = {
|
||||||
|
pageSo: {
|
||||||
|
pageSize: 999,
|
||||||
|
pageNumber:1
|
||||||
|
},
|
||||||
|
dateTimeRangeSo:{
|
||||||
|
start,
|
||||||
|
end
|
||||||
|
}
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
const res = await httppost2(apiurl.gcyx.czrz.page, params)
|
||||||
|
if (res.code == 200) {
|
||||||
|
setOperateData(res.data?.records)
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.log(error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
//报警信息
|
//报警信息
|
||||||
const [policeData, setPoliceData] = useState(Array(5).fill(0).map((item, i) => ({ id: i, zd: '闸前水位', watchvalue: "10.23", limit: 0, max: 10, time: '2024-08-15 15:00:00' })))
|
const [policeData, setPoliceData] = useState(Array(5).fill(0).map((item, i) => ({ id: i, zd: '闸前水位', watchvalue: "10.23", limit: 0, max: 10, time: '2024-08-15 15:00:00' })))
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
|
@ -186,6 +209,7 @@ export default function Home() {
|
||||||
})
|
})
|
||||||
getVideoList()
|
getVideoList()
|
||||||
getRealData()
|
getRealData()
|
||||||
|
getLogData()
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
@ -279,10 +303,10 @@ export default function Home() {
|
||||||
<tbody style={{ height: 170 }}>
|
<tbody style={{ height: 170 }}>
|
||||||
{operateData.map((item, i) => (
|
{operateData.map((item, i) => (
|
||||||
<tr style={{ borderBottom: '2px solid #536cc6', textAlign: 'center' }} className={clsx({ 'odd_row': i % 2 })} key={i}>
|
<tr style={{ borderBottom: '2px solid #536cc6', textAlign: 'center' }} className={clsx({ 'odd_row': i % 2 })} key={i}>
|
||||||
<td>{item.cd}</td>
|
<td>{item.gatePoreCode}</td>
|
||||||
<td>{item.content}</td>
|
<td>{item.opContent}</td>
|
||||||
<td>{item.name}</td>
|
<td>{item.createUserName}</td>
|
||||||
<td style={{ width: 137 }}>{item.time}</td>
|
<td style={{ width: 137 }}>{item.createTime}</td>
|
||||||
</tr>
|
</tr>
|
||||||
))}
|
))}
|
||||||
</tbody>
|
</tbody>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
import moment from "moment";
|
||||||
|
export default function data(type) {
|
||||||
|
const now = moment(); // 获取当前时间
|
||||||
|
const startOfDay = now.clone().startOf('day'); // 获取今天的凌晨
|
||||||
|
|
||||||
|
// 初始化数组，第一个元素是今天的凌晨
|
||||||
|
let timeArray = [startOfDay];
|
||||||
|
|
||||||
|
// 生成接下来的时间点并添加到数组中，间隔为两个小时，且不超过当前时间
|
||||||
|
let nextTime = startOfDay.clone().add(1, 'hours');
|
||||||
|
while (nextTime <= now) {
|
||||||
|
timeArray.push(nextTime.format('MM-DD HH:mm'));
|
||||||
|
nextTime = nextTime.clone().add(1, 'hours');
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(timeArray);
|
||||||
|
let result;
|
||||||
|
|
||||||
|
|
||||||
|
return result
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,326 @@
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
import moment from 'moment';
|
||||||
|
|
||||||
|
export default function drpOption(time = '',tabArr) {
|
||||||
|
|
||||||
|
const h1DrpData = tabArr.find(item => item.tm == '1小时');
|
||||||
|
|
||||||
|
// 水量
|
||||||
|
let water = [
|
||||||
|
{ time: "12-24 00:00", value: 480 },
|
||||||
|
{ time: "12-24 01:00", value: 500 },
|
||||||
|
{ time: "12-24 02:00", value: 450 },
|
||||||
|
{ time: "12-24 03:00", value: 520 },
|
||||||
|
{ time: "12-24 04:00", value: 490 },
|
||||||
|
{ time: "12-24 05:00", value: 550 },
|
||||||
|
{ time: "12-24 06:00", value: 580 },
|
||||||
|
{ time: "12-24 07:00", value: 560 },
|
||||||
|
{ time: "12-24 08:00", value: 530 },
|
||||||
|
{ time: "12-24 09:00", value: 590 },
|
||||||
|
{ time: "12-24 10:00", value: 540 },
|
||||||
|
{ time: "12-24 11:00", value: 600 },
|
||||||
|
{ time: "12-24 12:00", value: 620 },
|
||||||
|
{ time: "12-24 13:00", value: 650 },
|
||||||
|
{ time: "12-24 14:00", value: 680 },
|
||||||
|
{ time: "12-24 15:00", value: 630 },
|
||||||
|
];
|
||||||
|
// 雨量
|
||||||
|
let rain = [
|
||||||
|
{ time: "12-24 00:00", value: 3.8 },
|
||||||
|
{ time: "12-24 01:00", value: 4 },
|
||||||
|
{ time: "12-24 02:00", value: 3.5 },
|
||||||
|
{ time: "12-24 03:00", value: 4.2 },
|
||||||
|
{ time: "12-24 04:00", value: 3.9 },
|
||||||
|
{ time: "12-24 05:00", value: 4.5 },
|
||||||
|
{ time: "12-24 06:00", value: 4.8 },
|
||||||
|
{ time: "12-24 07:00", value: 4.6 },
|
||||||
|
{ time: "12-24 08:00", value: 4.3 },
|
||||||
|
{ time: "12-24 09:00", value: 4.9 },
|
||||||
|
{ time: "12-24 10:00", value: 4.4 },
|
||||||
|
{ time: "12-24 11:00", value: 5.0 },
|
||||||
|
{ time: "12-24 12:00", value: 5.2 },
|
||||||
|
{ time: "12-24 13:00", value: 5.5 },
|
||||||
|
{ time: "12-24 14:00", value: 5.8 },
|
||||||
|
{ time: "12-24 15:00", value: 5.3 },
|
||||||
|
];
|
||||||
|
|
||||||
|
const data = JSON.parse(JSON.stringify(water));
|
||||||
|
const ydata = JSON.parse(JSON.stringify(rain));
|
||||||
|
if (time == "1h") {
|
||||||
|
data.push({ time: "12-24 16:00", value: 420, predict: true })
|
||||||
|
ydata.push({ time: "12-24 16:00", value: h1DrpData?.drp, predict: true })
|
||||||
|
} else if (time == "3h") {
|
||||||
|
const wData = [
|
||||||
|
{ time: "12-24 16:00", value: 420, predict: true },
|
||||||
|
{ time: "12-24 17:00", value: 450, predict: true },
|
||||||
|
{ time: "12-24 18:00", value: 480, predict: true },
|
||||||
|
]
|
||||||
|
const rData = [
|
||||||
|
{ time: "12-24 16:00", value: tabArr.find( item =>item.tm == '1小时')?.drp, predict: true },
|
||||||
|
{ time: "12-24 17:00", value: tabArr.find(item =>item.tm == '2小时')?.drp, predict: true },
|
||||||
|
{ time: "12-24 18:00", value: tabArr.find(item =>item.tm == '3小时')?.drp, predict: true },
|
||||||
|
]
|
||||||
|
data.push(...wData)
|
||||||
|
ydata.push(...rData)
|
||||||
|
} else if (time == "6h") {
|
||||||
|
const h6WData = [
|
||||||
|
{ time: "12-24 16:00", value: 420, predict: true },
|
||||||
|
{ time: "12-24 17:00", value: 450, predict: true },
|
||||||
|
{ time: "12-24 18:00", value: 480, predict: true },
|
||||||
|
{ time: "12-24 19:00", value: 510, predict: true },
|
||||||
|
{ time: "12-24 20:00", value: 540, predict: true },
|
||||||
|
{ time: "12-24 21:00", value: 480, predict: true },
|
||||||
|
]
|
||||||
|
const h6RData = [
|
||||||
|
{ time: "12-24 16:00", value: tabArr.find( item =>item.tm == '1小时')?.drp, predict: true },
|
||||||
|
{ time: "12-24 17:00", value: tabArr.find( item =>item.tm == '2小时')?.dr, predict: true },
|
||||||
|
{ time: "12-24 18:00", value: tabArr.find( item =>item.tm == '3小时')?.dr, predict: true },
|
||||||
|
{ time: "12-24 19:00", value: tabArr.find( item =>item.tm == '4小时')?.dr, predict: true },
|
||||||
|
{ time: "12-24 20:00", value: tabArr.find( item =>item.tm == '5小时')?.dr, predict: true },
|
||||||
|
{ time: "12-24 21:00", value: tabArr.find( item =>item.tm == '6小时')?.dr, predict: true },
|
||||||
|
]
|
||||||
|
|
||||||
|
data.push(...h6WData)
|
||||||
|
ydata.push(...h6RData)
|
||||||
|
} else if(time == "12h") {
|
||||||
|
const h12WData = [
|
||||||
|
{ time: "12-24 16:00", value: 420, predict: true },
|
||||||
|
{ time: "12-24 17:00", value: 450, predict: true },
|
||||||
|
{ time: "12-24 18:00", value: 480, predict: true },
|
||||||
|
{ time: "12-24 19:00", value: 510, predict: true },
|
||||||
|
{ time: "12-24 20:00", value: 540, predict: true },
|
||||||
|
{ time: "12-24 21:00", value: 480, predict: true },
|
||||||
|
{ time: "12-24 22:00", value: 420, predict: true },
|
||||||
|
{ time: "12-24 23:00", value: 450, predict: true },
|
||||||
|
{ time: "12-24 24:00", value: 480, predict: true },
|
||||||
|
{ time: "12-25 00:00", value: 510, predict: true },
|
||||||
|
{ time: "12-25 01:00", value: 540, predict: true },
|
||||||
|
{ time: "12-25 02:00", value: 480, predict: true },
|
||||||
|
]
|
||||||
|
const h12RData = [
|
||||||
|
{ time: "12-24 16:00", value: tabArr.find( item =>item.tm == '1小时')?.drp, predict: true },
|
||||||
|
{ time: "12-24 17:00", value: tabArr.find( item =>item.tm == '2小时')?.drp, predict: true },
|
||||||
|
{ time: "12-24 18:00", value: tabArr.find( item =>item.tm == '3小时')?.drp, predict: true },
|
||||||
|
{ time: "12-24 19:00", value: tabArr.find( item =>item.tm == '4小时')?.drp, predict: true },
|
||||||
|
{ time: "12-24 20:00", value: tabArr.find( item =>item.tm == '5小时')?.drp, predict: true },
|
||||||
|
{ time: "12-24 21:00", value: tabArr.find( item =>item.tm == '6小时')?.drp, predict: true },
|
||||||
|
{ time: "12-24 22:00", value: tabArr.find( item =>item.tm == '7小时')?.drp, predict: true },
|
||||||
|
{ time: "12-24 23:00", value: tabArr.find( item =>item.tm == '8小时')?.drp, predict: true },
|
||||||
|
{ time: "12-24 24:00", value: tabArr.find( item =>item.tm == '9小时')?.drp, predict: true },
|
||||||
|
{ time: "12-25 00:00", value: tabArr.find( item =>item.tm == '10小时')?.drp, predict: true },
|
||||||
|
{ time: "12-25 01:00", value: tabArr.find( item =>item.tm == '11小时')?.drp, predict: true },
|
||||||
|
{ time: "12-25 02:00", value: tabArr.find( item =>item.tm == '12小时')?.drp, predict: true },
|
||||||
|
]
|
||||||
|
|
||||||
|
data.push(...h12WData)
|
||||||
|
ydata.push(...h12RData)
|
||||||
|
} else if (time == "24h") {
|
||||||
|
const h24WData = [
|
||||||
|
{ time: "12-24 16:00", value: 420, predict: true },
|
||||||
|
{ time: "12-24 17:00", value: 450, predict: true },
|
||||||
|
{ time: "12-24 18:00", value: 480, predict: true },
|
||||||
|
{ time: "12-24 19:00", value: 510, predict: true },
|
||||||
|
{ time: "12-24 20:00", value: 540, predict: true },
|
||||||
|
{ time: "12-24 21:00", value: 480, predict: true },
|
||||||
|
{ time: "12-24 22:00", value: 420, predict: true },
|
||||||
|
{ time: "12-24 23:00", value: 450, predict: true },
|
||||||
|
{ time: "12-24 24:00", value: 480, predict: true },
|
||||||
|
{ time: "12-25 00:00", value: 510, predict: true },
|
||||||
|
{ time: "12-25 01:00", value: 540, predict: true },
|
||||||
|
{ time: "12-25 02:00", value: 480, predict: true },
|
||||||
|
|
||||||
|
{ time: "12-25 03:00", value: 420, predict: true },
|
||||||
|
{ time: "12-25 04:00", value: 450, predict: true },
|
||||||
|
{ time: "12-25 05:00", value: 480, predict: true },
|
||||||
|
{ time: "12-25 06:00", value: 510, predict: true },
|
||||||
|
{ time: "12-25 07:00", value: 540, predict: true },
|
||||||
|
{ time: "12-25 08:00", value: 480, predict: true },
|
||||||
|
{ time: "12-25 09:00", value: 420, predict: true },
|
||||||
|
{ time: "12-25 10:00", value: 450, predict: true },
|
||||||
|
{ time: "12-25 11:00", value: 480, predict: true },
|
||||||
|
{ time: "12-25 12:00", value: 510, predict: true },
|
||||||
|
{ time: "12-25 13:00", value: 540, predict: true },
|
||||||
|
{ time: "12-25 14:00", value: 480, predict: true },
|
||||||
|
]
|
||||||
|
const h24RData = [
|
||||||
|
{ time: "12-24 16:00", value: tabArr.find( item =>item.tm == '1小时')?.drp, predict: true },
|
||||||
|
{ time: "12-24 17:00", value: tabArr.find( item =>item.tm == '2小时')?.drp, predict: true },
|
||||||
|
{ time: "12-24 18:00", value: tabArr.find( item =>item.tm == '3小时')?.drp, predict: true },
|
||||||
|
{ time: "12-24 19:00", value: tabArr.find( item =>item.tm == '4小时')?.drp, predict: true },
|
||||||
|
{ time: "12-24 20:00", value: tabArr.find( item =>item.tm == '5小时')?.drp, predict: true },
|
||||||
|
{ time: "12-24 21:00", value: tabArr.find( item =>item.tm == '6小时')?.drp, predict: true },
|
||||||
|
{ time: "12-24 22:00", value: tabArr.find( item =>item.tm == '7小时')?.drp, predict: true },
|
||||||
|
{ time: "12-24 23:00", value: tabArr.find( item =>item.tm == '8小时')?.drp, predict: true },
|
||||||
|
{ time: "12-24 24:00", value: tabArr.find( item =>item.tm == '9小时')?.drp, predict: true },
|
||||||
|
{ time: "12-25 00:00", value: tabArr.find( item =>item.tm == '10小时')?.drp, predict: true },
|
||||||
|
{ time: "12-25 01:00", value: tabArr.find( item =>item.tm == '11小时')?.drp, predict: true },
|
||||||
|
{ time: "12-25 02:00", value: tabArr.find( item =>item.tm == '12小时')?.drp, predict: true },
|
||||||
|
|
||||||
|
{ time: "12-25 03:00", value: tabArr.find( item =>item.tm == '13小时')?.drp, predict: true },
|
||||||
|
{ time: "12-25 04:00", value: tabArr.find( item =>item.tm == '14小时')?.drp, predict: true },
|
||||||
|
{ time: "12-25 05:00", value: tabArr.find( item =>item.tm == '15小时')?.drp, predict: true },
|
||||||
|
{ time: "12-25 06:00", value: tabArr.find( item =>item.tm == '16小时')?.drp, predict: true },
|
||||||
|
{ time: "12-25 07:00", value: tabArr.find( item =>item.tm == '17小时')?.drp, predict: true },
|
||||||
|
{ time: "12-25 08:00", value: tabArr.find( item =>item.tm == '18小时')?.drp, predict: true },
|
||||||
|
{ time: "12-25 09:00", value: tabArr.find( item =>item.tm == '19小时')?.drp, predict: true },
|
||||||
|
{ time: "12-25 10:00", value: tabArr.find( item =>item.tm == '20小时')?.drp, predict: true },
|
||||||
|
{ time: "12-25 11:00", value: tabArr.find( item =>item.tm == '21小时')?.drp, predict: true },
|
||||||
|
{ time: "12-25 12:00", value: tabArr.find( item =>item.tm == '22小时')?.drp, predict: true },
|
||||||
|
{ time: "12-25 13:00", value: tabArr.find( item =>item.tm == '23小时')?.drp, predict: true },
|
||||||
|
{ time: "12-25 14:00", value: tabArr.find( item =>item.tm == '24小时')?.drp, predict: true },
|
||||||
|
]
|
||||||
|
data.push(...h24WData)
|
||||||
|
ydata.push(...h24RData)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
let data1 = []; //历史水量数据
|
||||||
|
let data2 = []; //预测水量数据
|
||||||
|
let data3 = []; //历史雨量数据
|
||||||
|
let data4 = []; //预测雨量数据
|
||||||
|
|
||||||
|
|
||||||
|
data.forEach((item) => {
|
||||||
|
if (item.predict && time) {
|
||||||
|
data2.push([item.time, item.value]);
|
||||||
|
} else {
|
||||||
|
data1.push([item.time, item.value]);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
ydata.forEach((item) => {
|
||||||
|
if (item.predict && time) {
|
||||||
|
data4.push([item.time, item.value]);
|
||||||
|
} else {
|
||||||
|
data3.push([item.time, item.value]);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const splitLineData1 = data1.at(-1);
|
||||||
|
const splitLineData = data1.at(-1);
|
||||||
|
const splitLineData2 = data3.at(-1);
|
||||||
|
|
||||||
|
// 如果是折线图，此处需要追加实际数据的最后一组数据，如果是柱状图，则不需要。
|
||||||
|
data2.unshift(splitLineData1);
|
||||||
|
data4.unshift(splitLineData2);
|
||||||
|
|
||||||
|
return {
|
||||||
|
grid: {
|
||||||
|
left: 0,
|
||||||
|
top: "22%",
|
||||||
|
right: "0",
|
||||||
|
bottom: 0,
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
right: "0",
|
||||||
|
top: "4%",
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: "category",
|
||||||
|
data: data.map(item => item.time),
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: "value",
|
||||||
|
name: '水位',
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: "#7a869a",
|
||||||
|
formatter: '{value} m'
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "value",
|
||||||
|
name: '雨量',
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: "#7a869a",
|
||||||
|
formatter: '{value} mm'
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "历史水量",
|
||||||
|
type: "line",
|
||||||
|
showSymbol: false,
|
||||||
|
data: data1,
|
||||||
|
smooth: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "历史雨量",
|
||||||
|
type: "line",
|
||||||
|
color: '#F59A23',
|
||||||
|
yAxisIndex: 1,
|
||||||
|
showSymbol: false,
|
||||||
|
data: data3,
|
||||||
|
smooth: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "预测水量",
|
||||||
|
yAxisIndex: 0,
|
||||||
|
type: "line",
|
||||||
|
showSymbol: true,
|
||||||
|
data: data2,
|
||||||
|
smooth: true,
|
||||||
|
itemStyle : { normal: {label : {show: true}}}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "预测雨量",
|
||||||
|
yAxisIndex: 1,
|
||||||
|
type: "line",
|
||||||
|
showSymbol: true,
|
||||||
|
data: data4,
|
||||||
|
smooth: true,
|
||||||
|
itemStyle : { normal: {label : {show: true}}}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "line",
|
||||||
|
data: [],
|
||||||
|
markLine: {
|
||||||
|
symbol: "none",
|
||||||
|
lineStyle: {
|
||||||
|
type: "solid",
|
||||||
|
width: 2,
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
// 下面绿色线
|
||||||
|
[
|
||||||
|
// 下面半截绿色的线
|
||||||
|
{
|
||||||
|
xAxis: splitLineData[0],
|
||||||
|
yAxis: 0,
|
||||||
|
lineStyle: {
|
||||||
|
color: "rgba(46, 224, 85, 1)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
xAxis: splitLineData[0],
|
||||||
|
yAxis: splitLineData[1],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
],
|
||||||
|
},
|
||||||
|
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,283 @@
|
||||||
|
import React, { Fragment, useRef, useMemo, useEffect, useState } from 'react';
|
||||||
|
import { Table, Card, Modal, Form, Input, Button, Row, Col, Typography, message, Tabs, Image, InputNumber } from 'antd';
|
||||||
|
import ToolBar from './toolbar'
|
||||||
|
import ReactEcharts from 'echarts-for-react';
|
||||||
|
import './index.less'
|
||||||
|
import drpOption from './drpOption.js'
|
||||||
|
|
||||||
|
|
||||||
|
const TableE = ({count,setEditData,tableData}) => {
|
||||||
|
const EditableCell = ({
|
||||||
|
editing,
|
||||||
|
dataIndex,
|
||||||
|
title,
|
||||||
|
inputType,
|
||||||
|
record,
|
||||||
|
index,
|
||||||
|
children,
|
||||||
|
...restProps
|
||||||
|
}) => {
|
||||||
|
const inputNode = <InputNumber min={0} style={{ textAlign: "center", flex: 1 }} />;
|
||||||
|
return (
|
||||||
|
<td {...restProps}>
|
||||||
|
{editing ? (
|
||||||
|
<Form.Item
|
||||||
|
name={dataIndex}
|
||||||
|
wrapperCol={[24]}
|
||||||
|
style={{
|
||||||
|
margin: 0,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{inputNode}
|
||||||
|
</Form.Item>
|
||||||
|
) : (
|
||||||
|
children
|
||||||
|
)}
|
||||||
|
</td>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
const [editingKey, setEditingKey] = useState('');
|
||||||
|
const [details, setDetails] = useState([])
|
||||||
|
const isEditing = (record) => {
|
||||||
|
return record.key === editingKey;
|
||||||
|
}
|
||||||
|
const columns = [
|
||||||
|
{
|
||||||
|
title: '预见期',
|
||||||
|
dataIndex: 'tm',
|
||||||
|
width: '30%',
|
||||||
|
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '雨量',
|
||||||
|
dataIndex: 'drp',
|
||||||
|
width: '30%',
|
||||||
|
editable: true,
|
||||||
|
align:'center'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '水位',
|
||||||
|
dataIndex: 'rz',
|
||||||
|
width: '20%',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作', key: 'operation', width: "20%", fixed: 'right',align: 'center',
|
||||||
|
render: (_, record) => {
|
||||||
|
const editable = isEditing(record);
|
||||||
|
return editable ? (
|
||||||
|
<span>
|
||||||
|
<Typography.Link
|
||||||
|
onClick={() => save(record.key)}
|
||||||
|
style={{
|
||||||
|
marginRight: 8,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
完成
|
||||||
|
</Typography.Link>
|
||||||
|
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
<div style={{display:"flex",justifyContent:"center",columnGap:10}}>
|
||||||
|
<Typography.Link disabled={editingKey !== ''} onClick={() => edit1(record)}>
|
||||||
|
编辑
|
||||||
|
</Typography.Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]
|
||||||
|
const [form1] = Form.useForm()
|
||||||
|
const edit1 = (record) => {
|
||||||
|
form1.setFieldsValue({
|
||||||
|
drp: '',
|
||||||
|
...record,
|
||||||
|
});
|
||||||
|
setEditingKey(record.key);
|
||||||
|
};
|
||||||
|
const save = async (key) => {
|
||||||
|
try {
|
||||||
|
const row = await form1.validateFields();
|
||||||
|
const newData = [...details];
|
||||||
|
const index = newData.findIndex((item) => key === item.key);
|
||||||
|
if (index > -1) {
|
||||||
|
const item = newData[index];
|
||||||
|
newData.splice(index, 1, {
|
||||||
|
...item,
|
||||||
|
...row,
|
||||||
|
});
|
||||||
|
setDetails(newData);
|
||||||
|
setEditData(newData);
|
||||||
|
setEditingKey('');
|
||||||
|
} else {
|
||||||
|
newData.push(row);
|
||||||
|
setDetails(newData);
|
||||||
|
setEditData(newData);
|
||||||
|
setEditingKey('');
|
||||||
|
}
|
||||||
|
} catch (errInfo) {
|
||||||
|
console.log('Validate Failed:', errInfo);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (tableData.length > 0) {
|
||||||
|
setDetails(tableData)
|
||||||
|
}
|
||||||
|
}, [tableData])
|
||||||
|
|
||||||
|
|
||||||
|
const mergedColumns = columns.map((col) => {
|
||||||
|
if (!col.editable) {
|
||||||
|
return col;
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
...col,
|
||||||
|
onCell: (record) => ({
|
||||||
|
record,
|
||||||
|
inputType: col.dataIndex === 'age' ? 'number' :
|
||||||
|
col.dataIndex === 'sex' ? 'select' : "text",
|
||||||
|
dataIndex: col.dataIndex,
|
||||||
|
title: col.title,
|
||||||
|
editing: isEditing(record),
|
||||||
|
}),
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleAddRow = (count) => {
|
||||||
|
const newArr = Array(count).fill(0).map((item, i) => ({
|
||||||
|
key: (i + 1).toString(),
|
||||||
|
tm: `${i + 1}小时`,
|
||||||
|
drp: '',
|
||||||
|
rz: '',
|
||||||
|
}))
|
||||||
|
form1.setFieldsValue(newArr[0])
|
||||||
|
setDetails([...newArr]);
|
||||||
|
setEditData([...newArr]);
|
||||||
|
setEditingKey(newArr[0].key);
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (count) {
|
||||||
|
handleAddRow(count)
|
||||||
|
}
|
||||||
|
}, [count])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Form form={form1} component={false}>
|
||||||
|
<Table
|
||||||
|
rowKey="index"
|
||||||
|
components={{
|
||||||
|
body: {
|
||||||
|
// row: EditableRow,
|
||||||
|
cell: EditableCell,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
columns={mergedColumns}
|
||||||
|
dataSource={details}
|
||||||
|
scroll={{ x: 200,y: 'calc( 100vh - 400px )'}}
|
||||||
|
pagination={false}
|
||||||
|
/>
|
||||||
|
</Form>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
export default function TestLine() {
|
||||||
|
const [form] = Form.useForm()
|
||||||
|
const [searchVal, setSearchVal] = useState({})
|
||||||
|
const [editData, setEditData] = useState([])
|
||||||
|
const [type, setType] = useState({})
|
||||||
|
const [tmCount, setTmCount] = useState('')
|
||||||
|
useEffect(() => {
|
||||||
|
let count;
|
||||||
|
if (type?.time) {
|
||||||
|
count = type.time == '1h' ? 1 :
|
||||||
|
type.time == '3h' ? 3 :
|
||||||
|
type.time == '6h' ? 6 :
|
||||||
|
type.time == '12h' ? 12 :
|
||||||
|
type.time == '24h' ? 24 : '';
|
||||||
|
setTmCount(count)
|
||||||
|
} else {
|
||||||
|
count = 1
|
||||||
|
setTmCount('')
|
||||||
|
}
|
||||||
|
}, [type])
|
||||||
|
const [tableForm, setTableForm] = useState({})
|
||||||
|
const options = useMemo(() => {
|
||||||
|
return drpOption(tableForm.time,tableForm.tabArr || [])
|
||||||
|
}, [tableForm])
|
||||||
|
|
||||||
|
const [tableData, setTableData] = useState([])
|
||||||
|
const rowObj = {
|
||||||
|
"1小时": 420,
|
||||||
|
"2小时": 450,
|
||||||
|
"3小时": 480,
|
||||||
|
"4小时": 510,
|
||||||
|
"5小时": 540,
|
||||||
|
"6小时": 480,
|
||||||
|
"7小时": 420,
|
||||||
|
"8小时": 450,
|
||||||
|
"9小时": 480,
|
||||||
|
"10小时": 510,
|
||||||
|
"11小时": 540,
|
||||||
|
"12小时": 480,
|
||||||
|
"13小时": 420,
|
||||||
|
"14小时": 450,
|
||||||
|
"15小时": 480,
|
||||||
|
"16小时": 510,
|
||||||
|
"17小时": 540,
|
||||||
|
"18小时": 480,
|
||||||
|
"19小时": 420,
|
||||||
|
"20小时": 450,
|
||||||
|
"21小时": 480,
|
||||||
|
"22小时": 510,
|
||||||
|
"23小时": 540,
|
||||||
|
"24小时": 480,
|
||||||
|
|
||||||
|
}
|
||||||
|
const save = async () => {
|
||||||
|
try {
|
||||||
|
setTableForm({ tabArr: editData, time: type.time })
|
||||||
|
const newTabl = editData.map(item => ({
|
||||||
|
...item,
|
||||||
|
rz: rowObj[item.tm],
|
||||||
|
}))
|
||||||
|
setTableData(newTabl)
|
||||||
|
|
||||||
|
} catch (errInfo) {
|
||||||
|
console.log('Validate Failed:', errInfo);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className='content-root clearFloat xybm' style={{ paddingBottom: "0" }}>
|
||||||
|
<div className='lf CrudAdcdTreeTableBox' style={{ width: "100%", overflowY: "auto" }}>
|
||||||
|
<Card className='nonebox'>
|
||||||
|
<ToolBar
|
||||||
|
setSearchVal={setSearchVal}
|
||||||
|
setType={setType}
|
||||||
|
save={save}
|
||||||
|
form1={form}
|
||||||
|
/>
|
||||||
|
</Card>
|
||||||
|
<div className="ant-card-body" style={{ padding: "20px 0 0 0", height: 'calc( 100vh - 400px )' }}>
|
||||||
|
|
||||||
|
<div style={{ display: 'flex', columnGap: 20 }}>
|
||||||
|
<div style={{ flex: 1,height: 'calc( 100vh - 400px )' }}>
|
||||||
|
<ReactEcharts option={options} style={{ width: "100%", height: '100%' }} notMerge={true} />
|
||||||
|
</div>
|
||||||
|
<div style={{ width: 380 }}>
|
||||||
|
<TableE count={tmCount} setEditData={setEditData} tableData={tableData} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
.line-box{
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,89 @@
|
||||||
|
import React, { useEffect,useState } from 'react';
|
||||||
|
import { Form, Input, Button, DatePicker, InputNumber } from 'antd';
|
||||||
|
import NormalSelect from '../../components/Form/NormalSelect';
|
||||||
|
|
||||||
|
import moment from 'moment';
|
||||||
|
const { RangePicker } = DatePicker;
|
||||||
|
const ToolBar = ({ setSearchVal, setType, save, form1 }) => {
|
||||||
|
|
||||||
|
const types = Array(5).fill(0).map((item,i) => ({
|
||||||
|
label: `${i + 1}#水库`,
|
||||||
|
value: i + 1
|
||||||
|
}))
|
||||||
|
|
||||||
|
const timeType = [
|
||||||
|
{
|
||||||
|
label: "1h",
|
||||||
|
value: "1h"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "3h",
|
||||||
|
value: "3h"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "6h",
|
||||||
|
value: "6h"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "12h",
|
||||||
|
value: "12h"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "24h",
|
||||||
|
value: "24h"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const [form] = Form.useForm();
|
||||||
|
|
||||||
|
const onFinish = (values) => {
|
||||||
|
let dateTimeRangeSo;
|
||||||
|
if (values.tm) {
|
||||||
|
dateTimeRangeSo = {
|
||||||
|
start: moment(values.tm[0]).format('YYYY-MM-DD HH:mm:ss'),
|
||||||
|
end: moment(values.tm[1]).format('YYYY-MM-DD HH:mm:ss')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
delete values.tm
|
||||||
|
// setSearchVal({...values, dateTimeRangeSo});
|
||||||
|
save()
|
||||||
|
}
|
||||||
|
|
||||||
|
const onValuesChange = (val) =>{
|
||||||
|
if ('time' in val) {
|
||||||
|
setSearchVal({time: val.time})
|
||||||
|
setType({time: val.time})
|
||||||
|
form1.resetFields()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
useEffect(() => {
|
||||||
|
const params = {
|
||||||
|
code: 1,
|
||||||
|
// time:'1h'
|
||||||
|
}
|
||||||
|
form.setFieldsValue(params)
|
||||||
|
setSearchVal(params)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div style={{display:'flex',justifyContent:'space-between'}}>
|
||||||
|
<Form form={form} className='toolbarBox' layout="inline" onFinish={onFinish} onValuesChange={onValuesChange}>
|
||||||
|
<Form.Item label="水库" name="code">
|
||||||
|
<NormalSelect allowClear style={{ width: '150px' }} options={types} />
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item label="预见期" name="time">
|
||||||
|
<NormalSelect allowClear style={{ width: '150px' }} options={timeType} />
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item>
|
||||||
|
<Button type="primary" htmlType="submit">生成</Button>
|
||||||
|
</Form.Item>
|
||||||
|
</Form>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ToolBar;
|
||||||
Loading…
Reference in New Issue