{ setActiveOne(i); getHistoryData(item)}}>
{item.name}
{item.value}
{item.time}
diff --git a/src/views/Home/options.js b/src/views/Home/options.js
index 572784c..7d439ef 100644
--- a/src/views/Home/options.js
+++ b/src/views/Home/options.js
@@ -1,4 +1,6 @@
export default function options(data = {}) {
+ const maxY = Math.ceil(Math.max(...data?.map(s => s.val)))
+ const minY = Math.floor(Math.min(...data?.map(s => s.val)))
return {
tooltip: {
trigger: "axis",
@@ -11,7 +13,7 @@ export default function options(data = {}) {
},
xAxis: {
type: "category",
- data: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
+ data: data.map(item => item.tm),
boundaryGap: false,
axisLine: {
lineStyle: {
@@ -24,6 +26,8 @@ export default function options(data = {}) {
},
yAxis: {
type: "value",
+ min: minY,
+ max:maxY,
splitLine: {
lineStyle: {
color: "#d9d9d9",
@@ -42,9 +46,9 @@ export default function options(data = {}) {
},
series: [
{
- data: [150, 230, 224, 218, 135, 147, 260],
+ data: data.map(item => item.val),
type: "line",
- name: '闸前水位',
+ name: data[0]?.typeName,
lineStyle: {
color: '#5b8ff9'
},
diff --git a/src/views/WatchData/Jcsj/index.js b/src/views/WatchData/Jcsj/index.js
index 8503fc7..692d518 100644
--- a/src/views/WatchData/Jcsj/index.js
+++ b/src/views/WatchData/Jcsj/index.js
@@ -6,7 +6,7 @@ import ReactEcharts from 'echarts-for-react';
import options from './options'
import usePageTable from '../../../components/crud/usePageTable2';
import { createCrudService } from '../../../components/crud/_';
-import { httppost5 } from '../../../utils/request';
+import { httppost2, httppost5 } from '../../../utils/request';
import { exportFile } from '../../../utils/tools.js';
import './index.less'
@@ -14,69 +14,102 @@ const RealCard = ({ item }) => {
return (
{item.label}
-
{item.value} (08-15 15:00:00)
+
{item.value} ({item.tm})
)
}
-const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
const Page = () => {
- const types = {
- 0: "闸后流量",
- 1: '闸前水位',
- 2: '闸后水位',
- 3: '雨量',
+ const types1 = {
+ 0: "闸后流量(m³/s)",
+ 1: '闸前水位(m)',
+ 2: '闸后水位(m)',
+ 3: '雨量(mm)',
}
+ const [historyList, setHistoryList] = useState([])
const pxOptions = useMemo(() => {
- // if (staData) {
- // return options(staData)
- // } else {
- // return options({})
- // }
- return options({})
- }, [])
+ if (historyList) {
+ return options(historyList)
+ } else {
+ return options([])
+ }
+ }, [historyList])
const nameList = [
{
label: "闸后流量(m³/s)",
- value: 300
+ value: ''
},
{
label: "闸前水位(m)",
- value: 300
+ value: ''
},
{
label: "闸后水位(m)",
- value: 300
+ value: ''
},
{
label: "雨量(mm)",
- value: 300
+ value: ''
}
]
const [searchVal, setSearchVal] = useState(false)
const columns = [
{ title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align: "center" },
{
- title: '监测项目', key: 'name', dataIndex: 'name', width: 150,
- render: (v) =>
{types[v]}
+ title: '监测项目', key: 'typeName', dataIndex: 'typeName', width: 150,
},
- { title: '监测值', key: 'adress', dataIndex: 'adress', width: 150 },
+ { title: '监测值', key: 'val', dataIndex: 'val', width: 150 },
{
- title: '监测时间', key: 'eventsDate', dataIndex: 'eventsDate', width: 140,
+ title: '监测时间', key: 'tm', dataIndex: 'tm', width: 140,
},
-
];
const width = useMemo(() => columns.reduce((total, cur) => total + (cur.width), 0), [columns]);
- const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.sbwh.whfabz.page).find_noCode);
+ const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.jcsj.jcsj.historyPage).find_noCode);
+ const [RealData, setRealData] = useState(nameList)
+ // 实时数据
+ const getRealData = async () => {
+ try {
+ const res = await httppost2(apiurl.jcsj.jcsj.realData)
+ if (res.code == 200) {
+ const uptData = res.data.map(item => ({
+ ...item,
+ label: types1[item.type],
+ value:item.val
+ }))
+ setRealData(uptData)
+ }
+ } catch (error) {
+ console.log(error);
+ }
+ }
+
+ // 历史数据
+ const getHistoryData = async (val) => {
+ let params = {
+ pageSo: {
+ pageSize: 10,
+ pageNumber:1
+ },
+ ...val.search,
+ }
+ try {
+ const res = await httppost2(apiurl.jcsj.jcsj.historyList,params)
+ if (res.code == 200) {
+ setHistoryList(res.data)
+ }
+ } catch (error) {
+ console.log(error);
+ }
+ }
const exportExcel = () => {
let params = {
...searchVal,
}
- httppost5(apiurl.pxjh.export, params).then(res => {
- exportFile(`统计报表.xlsx`, res.data)
+ httppost5(apiurl.jcsj.jcsj.export, params).then(res => {
+ exportFile(`监测数据.xlsx`, res.data)
})
}
useEffect(() => {
@@ -86,8 +119,14 @@ const Page = () => {
}
};
search(params)
+ getHistoryData(params)
}, [searchVal])
+ useEffect(() => {
+ getRealData()
+ }, [])
+
+
return (
<>
@@ -98,7 +137,7 @@ const Page = () => {
实时数据
- {nameList.map(item => (
+ {RealData.map(item => (
))}
diff --git a/src/views/WatchData/Jcsj/options.js b/src/views/WatchData/Jcsj/options.js
index e58cbcb..0cc7ad1 100644
--- a/src/views/WatchData/Jcsj/options.js
+++ b/src/views/WatchData/Jcsj/options.js
@@ -1,4 +1,8 @@
-export default function options(data = {}) {
+
+
+export default function options(data = []) {
+ const maxY = Math.ceil(Math.max(...data?.map(s => s.val)))
+ const minY = Math.floor(Math.min(...data?.map(s => s.val)))
return {
tooltip: {
trigger: "axis",
@@ -6,11 +10,12 @@ export default function options(data = {}) {
grid: {
top: 10,
bottom:135,
- right:30
+ right: 60,
+ left:80
},
xAxis: {
type: "category",
- data: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
+ data: data.map(item => item.tm),
boundaryGap: false,
axisLine: {
lineStyle: {
@@ -23,6 +28,8 @@ export default function options(data = {}) {
},
yAxis: {
type: "value",
+ min: minY,
+ max:maxY,
splitLine: {
lineStyle: {
color: "#d9d9d9",
@@ -41,9 +48,9 @@ export default function options(data = {}) {
},
series: [
{
- data: [150, 230, 224, 218, 135, 147, 260],
+ data: data.map(item => item.val),
type: "line",
- name: '闸前水位',
+ name: data[0]?.typeName,
lineStyle: {
color: '#5b8ff9'
},
diff --git a/src/views/WatchData/Jcsj/toolbar.js b/src/views/WatchData/Jcsj/toolbar.js
index 58d49e1..ad54231 100644
--- a/src/views/WatchData/Jcsj/toolbar.js
+++ b/src/views/WatchData/Jcsj/toolbar.js
@@ -1,20 +1,20 @@
-import React, { useEffect,useState } from 'react';
+import React, { useEffect, useState } from 'react';
import { Form, Input, Button, DatePicker } from 'antd';
import NormalSelect from '../../../components/Form/NormalSelect';
import moment from 'moment';
const { RangePicker } = DatePicker;
const ToolBar = ({ setSearchVal, onSave, storeData, exportFile1 }) => {
-
+
const types = [
{
label: "闸后流量",
value: 0,
- },
+ },
{
label: "闸前水位",
value: 1,
- },
+ },
{
label: "闸后水位",
value: 2,
@@ -24,56 +24,55 @@ const ToolBar = ({ setSearchVal, onSave, storeData, exportFile1 }) => {
value: 3,
},
]
-
- const types1 = [
- {
- label: "报警中",
- value: 0,
- },
- {
- label: "已解除",
- value: 1,
- },
- ]
const [form] = Form.useForm();
-
const onFinish = (values) => {
- let dateSo;
+ let dateTimeRangeSo;
if (values.tm) {
- dateSo = {
+ 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, dateSo});
+ setSearchVal({ ...values, dateTimeRangeSo });
}
+ useEffect(() => {
+ const start = moment().subtract(7, 'days').format('YYYY-MM-DD 00:00:00')
+ const end = moment().format('YYYY-MM-DD 23:59:59')
+ form.setFieldsValue({
+ tm: [moment(start), moment(end)]
+ })
+ form.setFieldValue("type", 0)
+ setSearchVal({ type: 0, dateTimeRangeSo: { start, end } })
+ }, [])
+
+
return (
<>
-