From 84016faa094aece3bd17d956aa9a6573faa83446 Mon Sep 17 00:00:00 2001 From: lishenfeng Date: Thu, 29 Jan 2026 17:58:01 +0800 Subject: [PATCH] =?UTF-8?q?feat():=20=E5=AF=B9=E5=85=A8=E5=A4=A9=E5=80=99?= =?UTF-8?q?=E7=9A=84=E9=9B=A8=E6=83=85=E7=9B=91=E6=B5=8B=E5=BC=80=E5=8F=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ant_override.less | 14 +- src/service/apiurl.js | 18 +- src/service/station.js | 37 ++ .../components/AllWeatherControl/index.js | 91 +++-- .../components/AllWeatherControl/index.less | 5 +- .../components/ManagementCycle/index.js | 77 ++++- .../AllWeatherModal/RainMonitor/RightPanel.js | 235 +++++++++++++ .../AllWeatherModal/RainMonitor/drpOption.js | 179 ++++++++++ .../AllWeatherModal/RainMonitor/index.js | 98 ++++++ .../AllWeatherModal/RainMonitor/index.less | 324 ++++++++++++++++++ .../ModalComponents/AllWeatherModal/index.js | 38 +- src/views/Home/components/UI/PdfView/index.js | 4 +- 12 files changed, 1043 insertions(+), 77 deletions(-) create mode 100644 src/service/station.js create mode 100644 src/views/Home/components/Business/SiQuan/components/ModalComponents/AllWeatherModal/RainMonitor/RightPanel.js create mode 100644 src/views/Home/components/Business/SiQuan/components/ModalComponents/AllWeatherModal/RainMonitor/drpOption.js create mode 100644 src/views/Home/components/Business/SiQuan/components/ModalComponents/AllWeatherModal/RainMonitor/index.js create mode 100644 src/views/Home/components/Business/SiQuan/components/ModalComponents/AllWeatherModal/RainMonitor/index.less diff --git a/src/components/ant_override.less b/src/components/ant_override.less index 195da0a..eab0edf 100644 --- a/src/components/ant_override.less +++ b/src/components/ant_override.less @@ -285,7 +285,19 @@ input:-webkit-autofill:active { th { color: #fff; } td { color: rgba(255, 255, 255, 0.8); } } - + .ant-picker-time-panel-cell-inner{ + color: #fff!important; + + } + + .ant-picker-time-panel-column > li.ant-picker-time-panel-cell-selected .ant-picker-time-panel-cell-inner{ + background: #00a0e9; + } + .ant-picker-time-panel-column > li.ant-picker-time-panel-cell .ant-picker-time-panel-cell-inner:hover{ + background: #013056 !important; + } + + .ant-picker-cell { color: rgba(255, 255, 255, 0.5); // Default inactive color diff --git a/src/service/apiurl.js b/src/service/apiurl.js index 905522e..8a19c4d 100644 --- a/src/service/apiurl.js +++ b/src/service/apiurl.js @@ -7,6 +7,10 @@ const apiurl = { router: service + '/getRouters', role: service + '/system/menu/list' }, + station: { + rainlist: service + '/real/rain/list',//雨量站 + reservoirlist: service + '/reservoir/water/listV2',//水库水位站 + }, sq: { qfg: { info:service + '/attResBase/list' @@ -23,12 +27,22 @@ const apiurl = { }, qth: { rainList: { - list:service + '/attResBase/rainBasinDivision/queryStPptnDetails/list', + list: service + '/attResBase/rainBasinDivision/queryStPptnDetails/list', + queryStPptnDetails: service + '/attResBase/rainBasinDivision/queryStPptnDetails/stcd', //实时雨量近几小时数据 + tableList: service + '/attResBase/rainBasinDivision/queryStStbprpPerHour/StcdAndStartTimeAndEndTime',//小时历史雨量表格数据 + chartList: service + '/attResBase/rainBasinDivision/queryStStbprpPerHourChart/StcdAndStartTimeAndEndTime',//小时历史雨量图数据 + dayTableList: service + '/attResBase/rainBasinDivision/queryStStbprpPerDay/StcdAndStartTimeAndEndTime',//日历史雨量表格数据 + dayChartList: service + '/attResBase/rainBasinDivision/queryStStbprpPerDayChart/StcdAndStartTimeAndEndTime',//日小时历史雨量图数据 + nearbyHistory:service + '/attResBase/maxRain' //获取历史近几小时数据 }, + reservoir: { + list:service + '/screen/monitoring/rsvr' + } }, qzq: { list: service + '/projectEvents/doc/page', - export: service + '/projectEvents/export' + export: service + '/projectEvents/export', + info :service + '/wholeCycle/get' } } } diff --git a/src/service/station.js b/src/service/station.js new file mode 100644 index 0000000..6bbe8bf --- /dev/null +++ b/src/service/station.js @@ -0,0 +1,37 @@ +import apiurl from "./apiurl"; +import { httpget, httppost } from "@/utils/request"; +import {message} from 'antd'; + +//雨情列表 +export async function rainlist(params) { + const {data, code, msg} = await httppost(apiurl.station.rainlist, params) || {}; + if (code !== 200) { + message.error(msg || '请求失败'); + return []; + } + const mapData = data.map(i=>({ + ...i, + lgtd : Number(i.lgtd)-1, + lttd : Number(i.lttd)-1.2, + })) + + return mapData||[]; +} + + +//水库列表 +export async function reservoirlist(params) { + const {data, code, msg} = await httppost(apiurl.station.reservoirlist, params) || {}; + if (code !== 200) { + message.error(msg || '请求失败'); + return []; + } + + const mapData = data.map(i=>({ + ...i, + lgtd : Number(i.lgtd)-1, + lttd : Number(i.lttd)-1.2, + })) + + return mapData||[]; +} \ No newline at end of file diff --git a/src/views/Home/components/Business/SiQuan/components/AllWeatherControl/index.js b/src/views/Home/components/Business/SiQuan/components/AllWeatherControl/index.js index 64ea239..5b262bc 100644 --- a/src/views/Home/components/Business/SiQuan/components/AllWeatherControl/index.js +++ b/src/views/Home/components/Business/SiQuan/components/AllWeatherControl/index.js @@ -1,14 +1,19 @@ -import React,{useState,useEffect} from 'react'; +import React, { useState, useEffect } from 'react'; import { Table } from 'antd'; +import CommonModal from '@/views/Home/components/UI/CommonModal'; import arrowIcon from '@/assets/images/card/arrow.png'; import smallCard from '@/assets/images/card/smallCard.png'; import wrj from '@/assets/images/card/wrj.png'; import apiurl from '@/service/apiurl'; -import { httpget,httppost } from '@/utils/request'; +import { httpget, httppost } from '@/utils/request'; import './index.less'; +import RightPanel from '../ModalComponents/AllWeatherModal/RainMonitor/RightPanel'; const AllWeatherControl = () => { + const [reservoirItem, setReservoirItem] = useState({}) const [rainList, setRainList] = useState([]) + const [detailVisible, setDetailVisible] = useState(false) + const [selectedStcd, setSelectedStcd] = useState(null) const rainColumns = [ { title: '站名', @@ -16,7 +21,7 @@ const AllWeatherControl = () => { key: 'stnm', align: 'center', width: 140, - ellipsis:true + ellipsis: true }, { title: '今日', @@ -41,17 +46,28 @@ const AllWeatherControl = () => { // Reservoir Data const reservoirData = [ - { label: '主坝坝前', value: '103.17', unit: 'm', showArrow: true, underline: true }, - { label: '汛限水位', value: '104.50', unit: 'm' }, - { label: '距汛限', value: '-1.67', unit: 'm', isNegative: true }, - { label: '副坝坝前', value: '104.17', unit: 'm' }, - { label: '当前库容', value: '3867.0', unit: '万m³'}, - { label: '有效库容', value: '2867.0', unit: '万m³'}, + { label: '主坝坝前', value: reservoirItem?.rz, unit: 'm', upArrow: reservoirItem?.status > 0, underline: true,downArrow:reservoirItem?.status < 0 }, + { label: '汛限水位', value: reservoirItem?.flLowLimLev, unit: 'm' }, + { label: '距汛限', value: reservoirItem?.gapFlLowLimLev, unit: 'm', isNegative: reservoirItem?.gapFlLowLimLev < 0 }, + { label: '副坝坝前', value: reservoirItem?.rz, unit: 'm' }, + { label: '当前库容', value: reservoirItem?.nowCap, unit: '万m³' }, + { label: '有效库容', value: reservoirItem?.effectiveCap, unit: '万m³' }, ]; + //指定水库获取 + const getReservoir = async () => { + try { + const result = await httpget(apiurl.sq.qth.reservoir.list); + if (result.code == 200) { + setReservoirItem(result.data[0]) + } + } catch (error) { + console.log(error); + } + } const getRainList = async () => { try { - const result = await httpget(apiurl.sq.qth.rainList); + const result = await httpget(apiurl.sq.qth.rainList.list); if (result.code == 200) { setRainList(result.data) } @@ -61,8 +77,9 @@ const AllWeatherControl = () => { } useEffect(() => { getRainList() + getReservoir() }, []) - + return (
{/* 雨情 Section */} @@ -81,31 +98,47 @@ const AllWeatherControl = () => { rowKey={'stcd'} rowClassName={(record) => record.isTotal ? 'total-row' : ''} bordered={false} - scroll={{y:300}} + scroll={{ y: 300 }} + onRow={(record) => ({ + onClick: () => { + setSelectedStcd(record); + setDetailVisible(true); + } + })} /> + setDetailVisible(false)} + width={'70%'} + bodyStyle={{ background: 'transparent', padding: 12 }} + > + +
{/* 水库水情 Section */}
-
- arrow - 水库水情 -
+
+ arrow + 水库水情 +
{reservoirData.map((item, index) => ( -
-
+
{item.value} {item.unit}
{item.label}
- {item.showArrow && ↑} + {item.upArrow && ↑} + {item.downArrow && ↓}
))}
@@ -114,15 +147,15 @@ const AllWeatherControl = () => { {/* 无人机 Section */}
-
- arrow - 无人机 -
- 视频墙 +
+ arrow + 无人机 +
+ 视频墙
-
diff --git a/src/views/Home/components/Business/SiQuan/components/AllWeatherControl/index.less b/src/views/Home/components/Business/SiQuan/components/AllWeatherControl/index.less index f6ba746..a01c4b4 100644 --- a/src/views/Home/components/Business/SiQuan/components/AllWeatherControl/index.less +++ b/src/views/Home/components/Business/SiQuan/components/AllWeatherControl/index.less @@ -148,12 +148,15 @@ margin-top: 2px; } - .arrow-up { + .arrow-up,.arrow-down { color: #ff4d4f; position: absolute; right: 5px; top: 5px; } + .arrow-down{ + color: #68c639; + } } } } diff --git a/src/views/Home/components/Business/SiQuan/components/ManagementCycle/index.js b/src/views/Home/components/Business/SiQuan/components/ManagementCycle/index.js index 2a604f5..2aeb618 100644 --- a/src/views/Home/components/Business/SiQuan/components/ManagementCycle/index.js +++ b/src/views/Home/components/Business/SiQuan/components/ManagementCycle/index.js @@ -1,17 +1,66 @@ -import React from 'react'; +import React,{useState,useEffect} from 'react'; import smallCard from '@/assets/images/card/smallCard.png'; +import apiurl from '@/service/apiurl'; +import { httpget } from '@/utils/request'; +import PdfView from '@/views/Home/components/UI/PdfView'; import './index.less'; const ManagementCycle = () => { + const [info, setInfo] = useState({}) + const [pdfVisible, setPdfVisible] = useState(false); + const [pdfConfig, setPdfConfig] = useState({ title: '', url: '', fileId: '' }); + const data = [ - { label: '安全鉴定', value: '三类坝' }, - { label: '病险水库', value: '是' }, - { label: '除险加固', value: '2024年11月' }, - { label: '降等报废', value: '无' }, - { label: '调度规则', value: '2023年12月', underline: true }, - { label: '应急预案', value: '2023年12月', underline: true }, + { label: '安全鉴定', value: info?.identifyType }, + { label: '病险水库', value: info?.isDanger }, + { label: '除险加固', value: info?.startDate }, + { label: '降等报废', value: info?.implementationMeasure }, + { + label: '调度规则', + value: info?.dispatchTime, + underline: true, + clickable: true, + fileId:info?.dispatchFileIds?.length? info?.dispatchFileIds[0] + '':undefined // Assuming this field exists + }, + { + label: '应急预案', + value: info?.emergencyTime, + underline: true, + clickable: true, + fileId:info?.emergencyFileIds?.length? info?.emergencyFileIds[0] + '':undefined // Assuming this field exists + }, ]; + const handleItemClick = (item) => { + const url = '/gunshiApp/ss/resPlanB/file/download/'; + // if (!item?.dispatchFileIds || item?.dispatchFileIds.length) return; + // const field = item.label == '调度规程' ? item?.dispatchFileIds[0] + '' : + // item?.emergencyFileIds[0] + '' + if (item.clickable) { + setPdfConfig({ + title: item.label, + url, + fileId:item.fileId + }); + setPdfVisible(true); + } + }; + + const getInfo = async () => { + try { + const result = await httpget(apiurl.sq.qzq.info) + if (result.code == 200) { + setInfo(result.data) + } + } catch (error) { + console.log(error); + } + } + + useEffect(() => { + getInfo() + }, []) + return (
@@ -19,7 +68,11 @@ const ManagementCycle = () => {
handleItemClick(item)} >
{item.value} @@ -28,6 +81,14 @@ const ManagementCycle = () => {
))}
+ + setPdfVisible(false)} + />
); }; diff --git a/src/views/Home/components/Business/SiQuan/components/ModalComponents/AllWeatherModal/RainMonitor/RightPanel.js b/src/views/Home/components/Business/SiQuan/components/ModalComponents/AllWeatherModal/RainMonitor/RightPanel.js new file mode 100644 index 0000000..5b449e6 --- /dev/null +++ b/src/views/Home/components/Business/SiQuan/components/ModalComponents/AllWeatherModal/RainMonitor/RightPanel.js @@ -0,0 +1,235 @@ +import React, { useEffect, useMemo, useState } from 'react'; +import { DatePicker, Button, Table } from 'antd'; +import { SearchOutlined } from '@ant-design/icons'; +import ReactEcharts from 'echarts-for-react'; +import apiurl from '@/service/apiurl'; +import { httpget, httppost } from '@/utils/request'; +import moment from 'moment'; +import drpOption from './drpOption'; +import './index.less'; + +const { RangePicker } = DatePicker; + +export default function RightPanel({ stcd, cleanMode = false }) { + const days = moment().diff(moment().startOf('year'), 'days') + 1; + const defaultRange = [ + moment().subtract(7, 'days').add(1, 'hour').set({ minute: 0, second: 0 }), + moment().add(1, 'hour').set({ minute: 0, second: 0 }), + ]; + + const [dates, setDates] = useState(defaultRange); + const [viewMode, setViewMode] = useState('hour'); + const [historyTableList, setHistoryTableList] = useState([]); + const [historyChartList, setHistoryChartList] = useState({}); + const [historyRainDetail, sethistoryRainDetail] = useState({}); + const [rainDetail, setRainDetail] = useState({}); + + const columns = [ + { title: '时间', dataIndex: 'time', key: 'time', align: 'center', width: 200 }, + { + title: viewMode === 'hour' ? '小时雨量(mm)' : '日雨量(mm)', + dataIndex: 'sumDrp', + key: 'sumDrp', + align: 'center', + render: (rec) => {rec ?? '-'}, + }, + ]; + + const option = useMemo(() => { + return drpOption({ echartData: historyChartList }); + }, [historyChartList]); + + const bottomStats = [ + { label: '最大1h雨量(mm)', value: historyRainDetail?.h1 ?? '-' }, + { label: '最大3h雨量(mm)', value: historyRainDetail?.h3 ?? '-' }, + { label: '最大6h雨量(mm)', value: historyRainDetail?.h6 ?? '-' }, + { label: '最大12h雨量(mm)', value: historyRainDetail?.h12 ?? '-' }, + { label: '本年降雨天数', value: rainDetail?.yearDrpDay, suffix: true, total: days }, + { label: '今日雨量(mm)', value: rainDetail?.today ?? '-' }, + { label: '昨日雨量(mm)', value: rainDetail?.yesterdayDrp ?? '-' }, + { label: '本月雨量(mm)', value: rainDetail?.monthDrp ?? '-' }, + { label: '本年雨量(mm)', value: rainDetail?.yearDrp ?? '-' }, + { label: '本年最大日雨量(mm)', value: rainDetail?.maxDrp ?? '-', suffix: true, total: rainDetail?.maxDrpTime }, + ]; + + const getRainDetail = async (stcd) => { + const result = await httpget(apiurl.sq.qth.rainList.queryStPptnDetails, { stcd }); + if (result.code === 200) { + setRainDetail(result.data); + } + }; + + const getRainHistoryData = async (params) => { + try { + const result = await httppost(apiurl.sq.qth.rainList.tableList, params); + if (result.code === 200) { + setHistoryTableList(result.data); + } + } catch (error) { + console.log(error); + } + }; + + const getRainHistoryChartData = async (params) => { + try { + const result = await httppost(apiurl.sq.qth.rainList.chartList, params); + if (result.code === 200) { + setHistoryChartList(result.data); + } + } catch (error) { + console.log(error); + } + }; + + const getDayRainHistoryData = async (params) => { + try { + const result = await httppost(apiurl.sq.qth.rainList.dayTableList, params); + if (result.code === 200) { + setHistoryTableList(result.data); + } + } catch (error) { + console.log(error); + } + }; + + const getDayRainHistoryChartData = async (params) => { + try { + const result = await httppost(apiurl.sq.qth.rainList.dayChartList, params); + if (result.code === 200) { + setHistoryChartList(result.data); + } + } catch (error) { + console.log(error); + } + }; + + const getRainHistoryDetail = async (params) => { + try { + const result = await httppost(apiurl.sq.qth.rainList.nearbyHistory, params); + if (result.code === 200) { + sethistoryRainDetail(result.data); + } + } catch (error) { + console.log(error); + } + }; + + const handleSearch = () => { + if (!stcd) return; + const params = { + startTime: dates + ? viewMode === 'hour' + ? dates[0]?.format('YYYY-MM-DD HH:mm:00') + : dates[0]?.format('YYYY-MM-DD 00:00:00') + : undefined, + endTime: dates + ? viewMode === 'hour' + ? dates[1]?.format('YYYY-MM-DD HH:mm:59') + : dates[1]?.format('YYYY-MM-DD 59:59:59') + : undefined, + stcd, + }; + if (viewMode === 'hour') { + getRainHistoryData(params); + getRainHistoryChartData(params); + } else { + getDayRainHistoryData(params); + getDayRainHistoryChartData(params); + } + getRainHistoryDetail(params); + }; + + useEffect(() => { + if (stcd) { + getRainDetail(stcd); + handleSearch(); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [stcd]); + + useEffect(() => { + if (stcd) { + handleSearch(); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [viewMode]); + + return ( +
+
+
+
+ {!cleanMode &&
数据查询
} +
+ + +
+ + +
+
+
+ +
+
+ + +
+
+ +
+
+ + +
+ {bottomStats.slice(0, 5).map((i, idx) =>
{i.label}
)} + {bottomStats.slice(0, 5).map((i, idx) => ( +
+ {i.value} + {i.total && /{i.total}} +
+ ))} + {bottomStats.slice(5, 10).map((i, idx) =>
{i.label}
)} + {bottomStats.slice(5, 10).map((i, idx) => ( +
+ {i.value} + {i.total && {i.total ? `(${moment(i.total).format('YYYY-MM-DD')})` : ''}} +
+ ))} +
+ + + + ); +} diff --git a/src/views/Home/components/Business/SiQuan/components/ModalComponents/AllWeatherModal/RainMonitor/drpOption.js b/src/views/Home/components/Business/SiQuan/components/ModalComponents/AllWeatherModal/RainMonitor/drpOption.js new file mode 100644 index 0000000..bcefe0d --- /dev/null +++ b/src/views/Home/components/Business/SiQuan/components/ModalComponents/AllWeatherModal/RainMonitor/drpOption.js @@ -0,0 +1,179 @@ + +import { useMemo } from 'react'; +import echarts from 'echarts/lib/echarts'; + +export default function DrpOption({ echartData, grid }) { + let totalDrp = 0; + const DRPLEVEL = [10, 20, 50, 100, 250]; + const maxVal = DRPLEVEL.find(o => o > totalDrp); + const xMaxVal = echartData?.actual ? DRPLEVEL.find(o => { + let max = Math.max(...echartData?.actual || []) + return o > max + }):maxVal + const yMaxVal = echartData?.actual ? DRPLEVEL.find(o => { + let max = Math.max(...echartData?.total) + return o > max + }): maxVal + + return { + + tooltip: { + trigger: 'axis', + }, + grid: grid || { + x: 40, + y: 30, + x2: 30, + y2: 28, + borderWidth: 0 + }, + legend: { + // 显示图例 + show: true, + // 图例的位置 + data: ['实测', '累计'], + textStyle: { color: '#fff' }, + }, + calculable: true, + xAxis: [ + { + type: 'category', + data: echartData?.time, + splitLine: { + show: false + }, + axisLabel: { + color: '#fff', + fontSize: 12, + formatter: val => val.substr('2020-'.length, 11) + }, + axisLine: { + lineStyle: { + color: '#07a6ff', + width: 0.5, + } + }, + axisTick: { + show: false, + }, + } + ], + yAxis: [ + { + type: 'value', + position: 'left', + name: "雨量mm", + nameTextStyle: { color: '#fff' }, + splitLine: { + show: true, + lineStyle: { + color: '#07a6ff', + width: 0.25, + type: 'dashed' + } + }, + axisLabel: { + color: '#fff', + fontSize: 12, + }, + axisLine: { + show: false + }, + axisTick: { + show: false, + }, + min: 0, + max: xMaxVal + }, + { + type: 'value', + position: 'right', + nameTextStyle: { color: '#fff' }, + name:"累计mm", + splitLine: { + show: true, + lineStyle: { + color: '#07a6ff', + width: 0.25, + type: 'dashed' + } + }, + axisLabel: { + color: '#fff', + fontSize: 12, + }, + axisLine: { + show: false + }, + axisTick: { + show: false, + }, + min: 0, + max: yMaxVal + } + ], + series: [ + { + name: '实测', + type: 'bar', + barWidth: '60%', + data: echartData?.actual, + itemStyle: { + normal: { + barBorderRadius: [3, 3, 0, 0], + color: new echarts.graphic.LinearGradient( + 0, 0, 0, 1, + [ + { offset: 0, color: '#3876cd' }, + { offset: 0.5, color: '#45b4e7' }, + { offset: 1, color: '#54ffff' } + ] + ), + }, + }, + label: { + show: false, + }, + markPoint: { + data: [ + { type: 'max', name: '最大值', symbol: 'circle', symbolSize: 1, symbolOffset: [0, -12] }, + ] + }, + }, + { + yAxisIndex: 1, + name: '累计', + type: 'line', + showSymbol: false, + label: { + show: false, + }, + data: echartData?.total, + lineStyle: { + normal: { + width: 1, + } + }, + areaStyle: { + normal: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, + color: 'rgba(3, 194, 236, 0.3)' + }, { + offset: 0.8, + color: 'rgba(3, 194, 236, 0)' + } + ], false), + shadowColor: 'rgba(0, 0, 0, 0.1)', + shadowBlur: 10 + } + }, + itemStyle: { + normal: { + color: '#03C2EC' + } + }, + } + ] + }; +} diff --git a/src/views/Home/components/Business/SiQuan/components/ModalComponents/AllWeatherModal/RainMonitor/index.js b/src/views/Home/components/Business/SiQuan/components/ModalComponents/AllWeatherModal/RainMonitor/index.js new file mode 100644 index 0000000..ee714a3 --- /dev/null +++ b/src/views/Home/components/Business/SiQuan/components/ModalComponents/AllWeatherModal/RainMonitor/index.js @@ -0,0 +1,98 @@ +import React, { useEffect, useMemo, useState } from 'react'; +import { Select } from 'antd'; +import usePageTable from '@/components/crud/usePageTable'; +import { createCrudService } from '@/components/crud/_'; +import apiurl from '@/service/apiurl'; +import { httpget,httppost } from '@/utils/request'; +import moment from 'moment'; +import { rainlist } from '@/service/station'; +import RightPanel from './RightPanel'; +import './index.less'; + +const RainMonitor = () => { + //实时雨量 + const [selectList, setSelectList] = useState([]) + const [selected, setSelected] = useState('') + const [rainDetail, setRainDetail] = useState({}) + + const stats = [ + { label: '近1小时', value: rainDetail?.h1 ?? '-', unit: 'mm' }, + { label: '近3小时', value: rainDetail?.h3 ?? '-', unit: 'mm' }, + { label: '近6小时', value: rainDetail?.h6 ?? '-', unit: 'mm' }, + { label: '近12小时', value: rainDetail?.h12 ?? '-', unit: 'mm' }, + { label: '近24小时', value: rainDetail?.h24 ?? '-', unit: 'mm' }, + { label: '近48小时', value: rainDetail?.h48 ?? '-', unit: 'mm' }, + ]; + + + + // 获取雨情站点 + const getRainStationList = async() => { + try { + const data = await rainlist({}) + setSelectList(data.map(item => ({ label: item.stnm, value: item.stcd,...item}))) + setSelected(data[0].stcd) + } catch (error) { + console.log(error); + } + } + + // 获取实时详细雨量的 近几小时数据 + const getRainDetail = async (stcd) => { + const result = await httpget(apiurl.sq.qth.rainList.queryStPptnDetails, { stcd }); + if (result.code == 200) { + setRainDetail(result.data) + } + } + + useEffect(() => { + getRainStationList(); + }, []); + + useEffect(() => { + if (selected) { + getRainDetail(selected); + } + }, [selected]); + + return ( +
+
+ {/* Left Side: Stats Cards */} +
+
+
实时雨情
+
+ 站点： +
- -
- -
- - ); -}; + const ReservoirPanel = () => { const columns = [ @@ -107,7 +75,7 @@ const SafetyPanel = () => { }; const AllWeatherModal = ({ active }) => { - if (active === 'rain') return ; + if (active === 'rain') return ; if (active === 'reservoir') return ; if (active === 'flow') return ; return ; diff --git a/src/views/Home/components/UI/PdfView/index.js b/src/views/Home/components/UI/PdfView/index.js index 5c67495..d17ba7d 100644 --- a/src/views/Home/components/UI/PdfView/index.js +++ b/src/views/Home/components/UI/PdfView/index.js @@ -1,7 +1,9 @@ import React from "react"; import CommonModal from '../CommonModal'; - +import { config } from "@/config"; const PdfView = ({ visible, title, onClose, url, fileId }) => { + console.log(url); + return (