From 63b98c549cf3536c91615a2e5fd60b687cf21ac0 Mon Sep 17 00:00:00 2001 From: lishenfeng Date: Fri, 20 Dec 2024 17:39:29 +0800 Subject: [PATCH] =?UTF-8?q?feat():=20=E7=9B=91=E6=B5=8B=E6=95=B0=E6=8D=AE?= =?UTF-8?q?=E5=AF=B9=E6=8E=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/service/apiurl.js | 10 +++ src/views/AppRouters.tsx | 2 + src/views/Gcyx/WatchWarn/Sbgzjl/index.js | 65 +++++++++++++++ src/views/Gcyx/WatchWarn/Sbgzjl/index.less | 0 src/views/Gcyx/WatchWarn/Sbgzjl/toolbar.js | 61 ++++++++++++++ src/views/Home/index.js | 88 ++++++++++++++++---- src/views/Home/options.js | 10 ++- src/views/WatchData/Jcsj/index.js | 95 +++++++++++++++------- src/views/WatchData/Jcsj/options.js | 17 ++-- src/views/WatchData/Jcsj/toolbar.js | 49 ++++++----- 10 files changed, 318 insertions(+), 79 deletions(-) create mode 100644 src/views/Gcyx/WatchWarn/Sbgzjl/index.js create mode 100644 src/views/Gcyx/WatchWarn/Sbgzjl/index.less create mode 100644 src/views/Gcyx/WatchWarn/Sbgzjl/toolbar.js diff --git a/src/service/apiurl.js b/src/service/apiurl.js index 20f6d49..03f4e0d 100644 --- a/src/service/apiurl.js +++ b/src/service/apiurl.js @@ -31,6 +31,12 @@ const apiurl = { edit: service_ykz +'/warnRule/update', delete:service_ykz +'/warnRule/del' } + }, + jcsj: { + realData: service_ykz + '/stPptnRReal/data', + historyList: service_ykz + '/stPptnRReal/his/data', + historyPage:service_ykz + '/stPptnRReal/page/data', + export:service_ykz + '/stPptnRReal/export' } }, sbwh: { @@ -100,6 +106,10 @@ const apiurl = { czrz: { page: service_ykz + '/gatePoreOpLog/page', export:service_ykz + '/gatePoreOpLog/export' + }, + sbgzjl: { + page: service_ykz + '/deviceFailureRecord/page', + export:service_ykz + '/deviceFailureRecord/export' } }, systemM: { diff --git a/src/views/AppRouters.tsx b/src/views/AppRouters.tsx index d8f55ba..867098f 100644 --- a/src/views/AppRouters.tsx +++ b/src/views/AppRouters.tsx @@ -15,6 +15,7 @@ import BasicSituation from "./Gcyx/InformationSearch/BasicSituation"; import RunSituation from "./Gcyx/InformationSearch/RunSituation"; import StaticTable from "./Gcyx/InformationSearch/StaticTable"; import OperateLog from "./Gcyx/InformationSearch/OperateLog"; +import Sbgzjl from "./Gcyx/WatchWarn/Sbgzjl"; import Jcsj from './WatchData/Jcsj'; import PoliceRecord from './WatchData/PoliceMangant/PoliceRecord' import PoliceRuleConfig from './WatchData/PoliceMangant/PoliceRuleConfig' @@ -59,6 +60,7 @@ const AppRouters: React.FC = () => { { path: 'gcyx/xxcx/yxqk', element: }, { path: 'gcyx/xxcx/tjbb', element: }, { path: 'gcyx/xxcx/czrz', element: }, + { path: 'gcyx/jsyj/sbgzjl', element: }, // 系统管理 { path: 'xtgl/yhxx', element: }, diff --git a/src/views/Gcyx/WatchWarn/Sbgzjl/index.js b/src/views/Gcyx/WatchWarn/Sbgzjl/index.js new file mode 100644 index 0000000..4e26cfb --- /dev/null +++ b/src/views/Gcyx/WatchWarn/Sbgzjl/index.js @@ -0,0 +1,65 @@ +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 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 { exportFile } from '../../../../utils/tools.js'; +const Page = () => { + const [searchVal, setSearchVal] = useState(false) + const columns = [ + { title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align:"center" }, + { title: '设备名称', key: 'deviceName', dataIndex: 'deviceName', width: 150, ellipsis: true }, + { title: '故障信息', key: 'failureInfo', dataIndex: 'failureInfo', width: 200, ellipsis: true }, + { + title: '故障原因', key: 'failureReason', dataIndex: 'failureReason', width: 170, + }, + { + title: '故障产生时间', key: 'failureCreateTime', dataIndex: 'failureCreateTime', width: 140, + }, + { title: '故障解除时间', key: 'failureReliefTime', dataIndex: 'failureReliefTime', width: 140}, + ]; + + + const width = useMemo(() => columns.reduce((total, cur) => total + (cur.width), 0), [columns]); + const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.gcyx.sbgzjl.page).find_noCode); + + const exportExcel = () => { + let params = { + ...searchVal, + } + httppost5(apiurl.gcyx.sbgzjl.export, params).then(res => { + exportFile(`设备故障记录.xlsx`,res.data) + }) + } + useEffect(() => { + const params = { + search: { + ...searchVal, + } + }; + search(params) + }, [searchVal]) + + + return ( + <> +
+
+ + + +
+ + + + + + ); +} + +export default Page; diff --git a/src/views/Gcyx/WatchWarn/Sbgzjl/index.less b/src/views/Gcyx/WatchWarn/Sbgzjl/index.less new file mode 100644 index 0000000..e69de29 diff --git a/src/views/Gcyx/WatchWarn/Sbgzjl/toolbar.js b/src/views/Gcyx/WatchWarn/Sbgzjl/toolbar.js new file mode 100644 index 0000000..06a0cb2 --- /dev/null +++ b/src/views/Gcyx/WatchWarn/Sbgzjl/toolbar.js @@ -0,0 +1,61 @@ +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 = Array(10).fill(0).map((item,i) => ({ + // label: `${i + 1}#闸孔`, + // value: i + 1 + // })) + + 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}); + } + + return ( + <> +
+
+ + {/* */} + + + + + + + + + + + + + + + + + +
+ + ); +} + +export default ToolBar; \ No newline at end of file diff --git a/src/views/Home/index.js b/src/views/Home/index.js index 52c83b7..1561991 100644 --- a/src/views/Home/index.js +++ b/src/views/Home/index.js @@ -13,6 +13,7 @@ import { Select } from 'antd'; import { httpget2, httppost2 } from '../../utils/request'; import apiurl from '../../service/apiurl'; import HFivePlayer from '../../components/video1Plary'; +import moment from 'moment'; const MenuTitleCard = ({ key, title }) => { return (
@@ -48,37 +49,87 @@ export default function Home() { ] + const types1 = { + 0: "闸后流量(m³/s)", + 1: '闸前水位(m)', + 2: '闸后水位(m)', + 3: '雨量(mm)', + } const runData = [ { name: '闸后流量(m³/s)', - value: 4300, - time: '2024-08-15 15:00:00' + value: '', + time: '' }, { name: '闸前水位(m)', - value: 9.82, - time: '2024-08-15 15:00:00' + value: '', + time: '' }, { name: '闸后流量(m)', - value: 8.87, - time: '2024-08-15 15:00:00' + value: '', + time: '' }, { name: '雨量(mm)', - value: 10.5, - time: '2024-08-15 15:00:00' + value: '', + time: '' } ] + const [RealData, setRealData] = useState(runData) + // 实时数据 + const getRealData = async () => { + try { + const res = await httppost2(apiurl.jcsj.jcsj.realData) + if (res.code == 200) { + const uptData = res.data.map(item => ({ + ...item, + name: types1[item.type], + value:item.val, + time:item.tm + })) + setRealData(uptData) + getHistoryData(uptData[0]) + } + } catch (error) { + console.log(error); + } + } - const pxOptions = useMemo(() => { - // if (staData) { - // return options(staData) - // } else { - // return options({}) - // } - return options({}) - }, []) + const [historyList, setHistoryList] = useState([]) + + const pxOptions = useMemo(() => { + if (historyList) { + return options(historyList) + } else { + return options([]) + } + }, [historyList]) + + const getHistoryData = async (val) => { + 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: 10, + pageNumber:1 + }, + type:val.type, + dateTimeRangeSo:{ + start, + end + } + } + try { + const res = await httppost2(apiurl.jcsj.jcsj.historyList,params) + if (res.code == 200) { + setHistoryList(res.data) + } + } catch (error) { + console.log(error); + } + } //安全监测数据 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' }))) //操作日志 @@ -134,6 +185,7 @@ export default function Home() { resize: true }) getVideoList() + getRealData() }, []) return ( @@ -164,8 +216,8 @@ export default function Home() {
运行监测数据
- {runData.map((item, i) => ( -
setActiveOne(i)}> + {RealData.map((item, i) => ( +
{ 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 ( <> -
+
- + - + - + - +