From f0b8f07df5913ba434e471bf5119f6680bd656c7 Mon Sep 17 00:00:00 2001 From: lishenfeng Date: Wed, 25 Dec 2024 13:48:51 +0800 Subject: [PATCH] =?UTF-8?q?feat():=20=E6=B5=8B=E8=AF=95=E6=9B=B2=E7=BA=BF?= =?UTF-8?q?=E6=95=B4=E5=90=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/AppRouters.tsx | 14 +- .../InformationSearch/StaticTable/index.js | 199 +++++++++-- .../InformationSearch/StaticTable/index.less | 30 ++ src/views/Home/index.js | 36 +- src/views/TestLine/createData.js | 21 ++ src/views/TestLine/drpOption.js | 326 ++++++++++++++++++ src/views/TestLine/index.js | 283 +++++++++++++++ src/views/TestLine/index.less | 3 + src/views/TestLine/toolbar.js | 89 +++++ 9 files changed, 969 insertions(+), 32 deletions(-) create mode 100644 src/views/TestLine/createData.js create mode 100644 src/views/TestLine/drpOption.js create mode 100644 src/views/TestLine/index.js create mode 100644 src/views/TestLine/index.less create mode 100644 src/views/TestLine/toolbar.js diff --git a/src/views/AppRouters.tsx b/src/views/AppRouters.tsx index 867098f..9307887 100644 --- a/src/views/AppRouters.tsx +++ b/src/views/AppRouters.tsx @@ -23,6 +23,7 @@ import UserInfo from './SystemMangant/UserInfo1' import Dept from './SystemMangant/dept' import Role from './SystemMangant/role' import MenuM from './SystemMangant/menuM' +import TestLine from './TestLine' // const HomePage = lazy(() => import('./Home')) const AppRouters: React.FC = () => { @@ -56,11 +57,11 @@ const AppRouters: React.FC = () => { { path: 'sbwh/sbwzgl/kchsgl', element: }, { path: 'sbwh/sbwzgl/bpbjgl', element: }, // 工程运行 - { path: 'gcyx/xxcx/jbqk', element: }, - { path: 'gcyx/xxcx/yxqk', element: }, - { path: 'gcyx/xxcx/tjbb', element: }, - { path: 'gcyx/xxcx/czrz', element: }, - { path: 'gcyx/jsyj/sbgzjl', element: }, + // { path: 'gcyx/xxcx/jbqk', element: }, + // { path: 'gcyx/xxcx/yxqk', element: }, + // { path: 'gcyx/xxcx/tjbb', element: }, + // { path: 'gcyx/xxcx/czrz', element: }, + // { path: 'gcyx/jsyj/sbgzjl', element: }, // 系统管理 { path: 'xtgl/yhxx', element: }, @@ -68,6 +69,9 @@ const AppRouters: React.FC = () => { { path: 'xtgl/jsgl', element: }, { path: 'xtgl/cdgl', element: }, + // 测试曲线 + { path: 'testLine/testLine', element: }, + ], }, { path: '/login', element: }, diff --git a/src/views/Gcyx/InformationSearch/StaticTable/index.js b/src/views/Gcyx/InformationSearch/StaticTable/index.js index d60eab9..1fdba2a 100644 --- a/src/views/Gcyx/InformationSearch/StaticTable/index.js +++ b/src/views/Gcyx/InformationSearch/StaticTable/index.js @@ -6,10 +6,20 @@ import usePageTable from '../../../../components/crud/usePageTable2'; import { createCrudService } from '../../../../components/crud/_'; import { httppost5, httppost2 } from '../../../../utils/request'; import { exportFile } from '../../../../utils/tools.js'; - +import './index.less' const url = "http://223.75.53.141:9102/test.by-lyf.tmp" const Page = () => { + const projectType = { + 0: '闸后流量', + 1: '雨量', + 2: '闸前水位', + 3:'闸后水位' + } + const bbType = { + 0: '日报表', + 1: '年报表', + } const [searchVal, setSearchVal] = useState(false) const [requsetUrlObj, setRequsetUrlObj] = useState({}) const requsetUrlObjRef = useRef(null) @@ -32,7 +42,7 @@ const Page = () => { align: "center", 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 = [ @@ -64,37 +74,34 @@ const Page = () => { dataIndex: 'drpD', width: 100, align: 'center', - sorter: (a, b) => a.drpD - b.drpD + 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}`] + if (i < 17) { + item.sorter = (a,b) => a[`drpH${i + 8}`] - b[`drpH${i + 8}`] } 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({ ...item, key: item.key.replace('rz', 'drp'), - dataIndex: item.dataIndex.replace('rz', 'drp'), - }) + dataIndex: item.dataIndex.replace('rz', 'drp'), + }) } }) - return searchVal.type == 1 ? cols :timeColumns + 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 ? yearColumns : yearColumns; return columns.reduce((total, cur) => total + (cur.width), 0) }, [searchVal]); - + const [staData, setStaData] = useState({}) const [data, setData] = useState([]) + const getData = async (params) => { try { 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 = () => { let params = { ...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 => { - exportFile(`统计报表.xlsx`, res.data) + + exportFile(`${fileName}.xlsx`, res.data) }) } @@ -120,7 +153,8 @@ const Page = () => { let urlObj; let obj = { 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) { case 0: @@ -129,7 +163,8 @@ const Page = () => { 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 + export: type == 0 ? apiurl.gcyx.tjbb.jyrbbExport : apiurl.gcyx.tjbb.jynbbExport, + yearSummary:type == 1 ? apiurl.gcyx.tjbb.jynbbSummary : '' } break; case 2: @@ -143,14 +178,26 @@ const Page = () => { } 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(() => { 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) } + if (searchVal.type1 == 1) { + getStaData(searchVal) + } }, [searchVal]) @@ -168,15 +215,125 @@ const Page = () => { ( <> -

{searchVal?.year}闸后流量报表

-
单位：m³/s
+

{searchVal?.type1 != 1 ? `${formatDate(searchVal?.dateRangeSo?.start)} - ${formatDate(searchVal?.dateRangeSo?.end)}` : searchVal.year}{projectType[searchVal.type]}{bbType[searchVal.type1]}

+
单位：{searchVal?.type != 1 ? 'm' : 'mm'}
)} columns={searchVal.type1 == 0 ? newTimeColumns : searchVal.type1 == 1 ? yearColumns : yearColumns} rowKey="date" dataSource={data} 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 ? + + + +
+
+
平均
+
+ + {staData?.list?.["平均"]?.map((item, index) => ( + {item[`drpM${index + 1}`]} + ) + )} + + + +
+
+
最高
+
+ + {staData?.list?.["最高"]?.map((item, index) => ( + {item[`drpM${index + 1}`]} + ) + )} + + + +
+
月统计
+
最高日期
+
+ + {staData?.list?.["最高日期"]?.map((item, index) => ( + {item[`drpM${index + 1}`]} + ) + )} + + + +
+
+
最低
+
+ + {staData?.list?.["最低"]?.map((item, index) => ( + {item[`drpM${index + 1}`]} + ) + )} + + + +
+
+
最低日期
+
+ + {staData?.list?.["最低日期"]?.map((item, index) => ( + {item[`drpM${index + 1}`]} + ) + )} + + + 年统计 + 最高水位 + {staData?.max} + 最低水位 + {staData?.min} + 平均水位 + {staData?.avg} + + : + + + 月降雨量 + {staData?.list?.["月降雨量"]?.map((item, index) => ( + {item[`drpM${index + 1}`]} + ) + )} + + + 降雨日数 + {staData?.list?.["降雨日数"]?.map((item, index) => ( + {item[`drpM${index + 1}`]} + ) + )} + + + 最大日量 + {staData?.list?.["最大日量"]?.map((item, index) => ( + {item[`drpM${index + 1}`]} + ) + )} + + + 年统计 + 降水量 + {staData?.drpSum} + 降雨日数 + {staData?.dayCount} + + + : null + ) + }} + /> + diff --git a/src/views/Gcyx/InformationSearch/StaticTable/index.less b/src/views/Gcyx/InformationSearch/StaticTable/index.less index e69de29..bbbbe5f 100644 --- a/src/views/Gcyx/InformationSearch/StaticTable/index.less +++ b/src/views/Gcyx/InformationSearch/StaticTable/index.less @@ -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; + } \ No newline at end of file diff --git a/src/views/Home/index.js b/src/views/Home/index.js index 1561991..8b2e63e 100644 --- a/src/views/Home/index.js +++ b/src/views/Home/index.js @@ -112,7 +112,7 @@ export default function Home() { const end = moment().format('YYYY-MM-DD 23:59:59') let params = { pageSo: { - pageSize: 10, + pageSize: 999, pageNumber:1 }, 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 [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 navigate = useNavigate(); @@ -186,6 +209,7 @@ export default function Home() { }) getVideoList() getRealData() + getLogData() }, []) return ( @@ -279,10 +303,10 @@ export default function Home() { {operateData.map((item, i) => ( - - - - + + + + ))} diff --git a/src/views/TestLine/createData.js b/src/views/TestLine/createData.js new file mode 100644 index 0000000..0e2fc99 --- /dev/null +++ b/src/views/TestLine/createData.js @@ -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 +} \ No newline at end of file diff --git a/src/views/TestLine/drpOption.js b/src/views/TestLine/drpOption.js new file mode 100644 index 0000000..2d28fc3 --- /dev/null +++ b/src/views/TestLine/drpOption.js @@ -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], + }, + ], + ], + }, + + }, + ], + } +} \ No newline at end of file diff --git a/src/views/TestLine/index.js b/src/views/TestLine/index.js new file mode 100644 index 0000000..bcfcc41 --- /dev/null +++ b/src/views/TestLine/index.js @@ -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 = ; + return ( + + ); + }; + 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 ? ( + + save(record.key)} + style={{ + marginRight: 8, + }} + > + 完成 + + + + ) : ( +
+ edit1(record)}> + 编辑 + +
+ + ); + }, + }, + ] + 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 ( + <> + +
{item.cd}{item.content}{item.name}{item.time}{item.gatePoreCode}{item.opContent}{item.createUserName}{item.createTime}
+ {editing ? ( + + {inputNode} + + ) : ( + children + )} +
+ + + ) +} + + + +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 ( + <> +
+
+ + + +
+ +
+
+ +
+
+ +
+
+
+
+
+ + ) +} diff --git a/src/views/TestLine/index.less b/src/views/TestLine/index.less new file mode 100644 index 0000000..843cec0 --- /dev/null +++ b/src/views/TestLine/index.less @@ -0,0 +1,3 @@ +.line-box{ + background-color: #fff; +} \ No newline at end of file diff --git a/src/views/TestLine/toolbar.js b/src/views/TestLine/toolbar.js new file mode 100644 index 0000000..89ca3b3 --- /dev/null +++ b/src/views/TestLine/toolbar.js @@ -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 ( + <> +
+
+ + + + + + + + + + +
+ + ); +} + +export default ToolBar; \ No newline at end of file