diff --git a/public/assets/bar/shuikudd1.png b/public/assets/bar/shuikudd1.png new file mode 100644 index 0000000..d00043f Binary files /dev/null and b/public/assets/bar/shuikudd1.png differ diff --git a/public/assets/bar/shuikudd2.png b/public/assets/bar/shuikudd2.png new file mode 100644 index 0000000..5a24ad9 Binary files /dev/null and b/public/assets/bar/shuikudd2.png differ diff --git a/public/assets/bar/xiayouxh1.png b/public/assets/bar/xiayouxh1.png new file mode 100644 index 0000000..7eab856 Binary files /dev/null and b/public/assets/bar/xiayouxh1.png differ diff --git a/public/assets/bar/xiayouxh2.png b/public/assets/bar/xiayouxh2.png new file mode 100644 index 0000000..bf42d7a Binary files /dev/null and b/public/assets/bar/xiayouxh2.png differ diff --git a/public/assets/calendar.png b/public/assets/calendar.png new file mode 100644 index 0000000..e309940 Binary files /dev/null and b/public/assets/calendar.png differ diff --git a/public/assets/right-arrow.png b/public/assets/right-arrow.png new file mode 100644 index 0000000..b626a60 Binary files /dev/null and b/public/assets/right-arrow.png differ diff --git a/public/assets/yybg.png b/public/assets/yybg.png new file mode 100644 index 0000000..56f25db Binary files /dev/null and b/public/assets/yybg.png differ diff --git a/public/mapbox/sprite@2x.json b/public/mapbox/sprite@2x.json index 2f581bd..f3d22ff 100644 --- a/public/mapbox/sprite@2x.json +++ b/public/mapbox/sprite@2x.json @@ -271,6 +271,14 @@ "pixelRatio": 1, "visible": true }, + "流量站": { + "width": 32, + "height": 32, + "x": 160, + "y": 32, + "pixelRatio": 1, + "visible": true + }, "泵站": { "width": 32, "height": 32, diff --git a/public/mapbox/sprite@2x.png b/public/mapbox/sprite@2x.png index 96e20c7..7ab99c7 100644 Binary files a/public/mapbox/sprite@2x.png and b/public/mapbox/sprite@2x.png differ diff --git a/src/models/map/index.js b/src/models/map/index.js index 03a8d15..3880c50 100644 --- a/src/models/map/index.js +++ b/src/models/map/index.js @@ -614,6 +614,7 @@ const map = { if (id != 504) { dispatch.runtime.setYyfa({}) + dispatch.runtime.setXiayouxh(false) } if ( diff --git a/src/models/map/layout.js b/src/models/map/layout.js index cc3f0f6..7c253bd 100644 --- a/src/models/map/layout.js +++ b/src/models/map/layout.js @@ -87,8 +87,10 @@ export default function calcLayout(view, rightStack, hidePanels) { } else if (view === 203) { left = [ { key: '天气' }, - { key: '关联站点',style: { height: '15rem', flexGrow: 1 } }, - { key: '水库水量统计',style: { height: '22rem' } }, + { key: '关联站点', style: { height: '23rem', flexGrow: 1 } }, + { key: '白蚁监测', style: { height: '17rem', flexGrow: 1 } }, + { key: '视频监视', style: { height: '20rem', flexGrow: 1 } }, + // { key: '安全监测', style: { height: '20rem', flexGrow: 1 } }, ]; leftFullHeight = true; @@ -311,9 +313,8 @@ export default function calcLayout(view, rightStack, hidePanels) { ]; } else if (view === 203) { right = [ - { key: '白蚁监测', style: { height: '20rem', flexGrow: 1 } }, - { key: '视频监视', style: { height: '20rem', flexGrow: 1 } }, - { key: '监测告警', style: { height: '20rem', flexGrow: 1 } }, + { key: '水库水量统计',style: { height: '34rem',flexGrow: 1 } }, + { key: '监测告警', style: { height: '15rem', flexGrow: 1 } }, ]; rightFullHeight=true } else if (view === 204) { @@ -322,10 +323,11 @@ export default function calcLayout(view, rightStack, hidePanels) { ]; } else if (view === 205) { right = [ - { key: '水库预案', style: { height: '30%', flexGrow: 1 } }, - { key: '调度结果', style: { height: '70%', flexGrow: 1 } }, - { key: '方案对比', style: { height: '30%', flexGrow: 1 } }, + { key: '水库预案', style: { height: '10rem', } }, + { key: '调度结果', style: { height: '10rem', } }, + { key: '方案对比', style: { height: '10rem', } }, ]; + rightFullHeight=true } else if (view === 206) { right = [ { key: '巡查问题看板', style: { height: '70%', flexGrow: 1 } }, diff --git a/src/models/runtime/index.js b/src/models/runtime/index.js index 05dc587..0af6647 100644 --- a/src/models/runtime/index.js +++ b/src/models/runtime/index.js @@ -14,6 +14,7 @@ function initState() { layerSetting: { }, yyObj: {}, + xiayouxh:undefined, yuananType:'sh', duibifxNum:[], shkshObj:undefined, @@ -71,6 +72,9 @@ const runtime = { setYuananType(state, props) { return { ...state, yuananType: props } }, + setXiayouxh(state, props) { + return { ...state, xiayouxh: props } + }, setYyfa(state, props) { return { ...state, yyObj: props } }, diff --git a/src/views/Home/InfoDlg/EditFaDlg/ScheduleCharts.js b/src/views/Home/InfoDlg/EditFaDlg/ScheduleCharts.js new file mode 100644 index 0000000..377a344 --- /dev/null +++ b/src/views/Home/InfoDlg/EditFaDlg/ScheduleCharts.js @@ -0,0 +1,304 @@ +import React, { useState, useEffect } from 'react'; +import ReactECharts from 'echarts-for-react'; +import { makeStyles } from '@material-ui/core/styles'; +import { Dialog, DialogContent, TextField, Button } from '@material-ui/core'; +import { legend } from 'echarts/lib/theme/dark'; + +const useStyles = makeStyles({ + root: { + backgroundColor: 'transparent', + padding: 20, + }, + chart: { + height: 100, + marginBottom: 20, + }, + dialog: { + '& .MuiDialog-paper': { + backgroundColor: '#1a1b1f', + color: '#fff', + }, + }, + input: { + '& .MuiInputBase-input': { + color: '#fff', + }, + '& .MuiInputLabel-root': { + color: '#4a90e2', + }, + '& .MuiOutlinedInput-root': { + '& fieldset': { + borderColor: '#4a90e2', + }, + }, + }, + button: { + backgroundColor: '#4a90e2', + color: '#fff', + '&:hover': { + backgroundColor: '#357abd', + }, + }, +}); + +const ScheduleCharts = () => { + const classes = useStyles(); + const [flowDialogOpen, setFlowDialogOpen] = useState(false); + const [levelDialogOpen, setLevelDialogOpen] = useState(false); + const [flowValue, setFlowValue] = useState(''); + const [levelValue, setLevelValue] = useState(''); + const [chartData, setChartData] = useState(null); + + // 生成测试数据 + useEffect(() => { + const generateData = () => { + const timePoints = []; + const openingData = []; + const inflowData = []; + const outflowData = []; + const levelData = []; + + for (let i = 0; i < 96; i++) { // 24小时,每15分钟一个点 + const time = new Date('2025-05-18'); + time.setMinutes(time.getMinutes() + i * 15); + const timeStr = time.toLocaleTimeString('zh-CN', { hour12: false }); + timePoints.push(timeStr); + + // 模拟数据 + openingData.push(i < 32 ? 1.5 : i < 80 ? 2 : 1.2); + inflowData.push(Math.sin(i / 10) * 300 + 400); + outflowData.push(Math.max(0, Math.sin((i - 10) / 10) * 100 + 150)); + levelData.push(Math.min(68.04, 40 + Math.sin(i / 30) * 10 + 20)); + } + + return { timePoints, openingData, inflowData, outflowData, levelData }; + }; + + setChartData(generateData()); + }, []); + + const handleFlowConfirm = () => { + // 这里处理流量修改逻辑 + setFlowDialogOpen(false); + }; + + const handleLevelConfirm = () => { + // 这里处理水位修改逻辑 + setLevelDialogOpen(false); + }; + + const handleChartEvents = { + click: (params) => { + if (params.componentType === 'markPoint') { + if (params.seriesIndex === 1) { + setFlowDialogOpen(true); + } else{ + setLevelDialogOpen(true); + } + } + } +}; + + const getOpeningOption = () => ({ + grid: { top: 30, right: 20, bottom: 30, left: 50 }, + tooltip: { trigger: 'axis' }, + legend: { + data: ['开度'], + textStyle: { color: '#fff' }, + top: 0 + }, + xAxis: { + type: 'category', + data: chartData?.timePoints, + axisLine: { lineStyle: { color: '#4a90e2' } }, + axisLabel: { color: '#fff' }, + }, + yAxis: { + type: 'value', + name: '开度 m', + nameTextStyle: { color: '#fff' }, + axisLine: { lineStyle: { color: '#4a90e2' } }, + axisLabel: { color: '#fff' }, + splitLine: { lineStyle: { color: '#2a2b2f' } }, + }, + series: [{ + name: '开度', + data: chartData?.openingData?.map(item => item.toFixed(2)), + type: 'line', + smooth: true, + symbol:'none', + lineStyle: { color: '#4a90e2' }, + areaStyle: { color: '#4a90e2', opacity: 0.1 }, + itemStyle: { color: '#4a90e2' }, + }], + }); + + const getFlowOption = () => ({ + grid: { top: 30, right: 20, bottom: 30, left: 50 }, + tooltip: { trigger: 'axis' }, + legend: { + data: ['入库流量', '出库流量'], + textStyle: { color: '#fff' }, + top: 0 + }, + xAxis: { + type: 'category', + data: chartData?.timePoints, + axisLine: { lineStyle: { color: '#4a90e2' } }, + axisLabel: { color: '#fff' }, + }, + yAxis: { + type: 'value', + name: '流量 m³/s', + nameTextStyle: { color: '#fff' }, + axisLine: { lineStyle: { color: '#4a90e2' } }, + axisLabel: { color: '#fff' }, + splitLine: { lineStyle: { color: '#2a2b2f' } }, + }, + series: [ + { + name: '入库流量', + data: chartData?.inflowData?.map(item => item.toFixed(2)), + type: 'line', + symbol:'none', + smooth: true, + lineStyle: { color: '#ffd700' }, + areaStyle: { color: '#ffd700', opacity: 0.1 }, + itemStyle: { color: '#ffd700' }, + }, + { + name: '出库流量', + data: chartData?.outflowData?.map(item => item.toFixed(2)), + type: 'line', + symbol:'none', + smooth: true, + lineStyle: { color: '#4a90e2' }, + areaStyle: { color: '#4a90e2', opacity: 0.1 }, + itemStyle: { color: '#4a90e2' }, + markPoint: { + data: [{ type: 'max', name: '最大值' }], + itemStyle: { color: '#4a90e2' }, + label: { color: '#fff' }, + symbolSize: 40, + onClick: () => { setFlowDialogOpen(true); console.log(1111111111111); + }, + }, + }, + ], + }); + + const getLevelOption = () => ({ + grid: { top: 30, right: 20, bottom: 30, left: 50 }, + tooltip: { trigger: 'axis' }, + legend: { + data: ['水位', '校核洪水位'], + textStyle: { color: '#fff' }, + top: 0 + }, + xAxis: { + type: 'category', + data: chartData?.timePoints, + axisLine: { lineStyle: { color: '#4a90e2' } }, + axisLabel: { color: '#fff' }, + }, + yAxis: { + type: 'value', + name: '水位 m', + nameTextStyle: { color: '#fff' }, + axisLine: { lineStyle: { color: '#4a90e2' } }, + axisLabel: { color: '#fff' }, + splitLine: { lineStyle: { color: '#2a2b2f' } }, + }, + series: [{ + name: '水位', + data: chartData?.levelData?.map(item => item.toFixed(2)), + type: 'line', + symbol:'none', + smooth: true, + lineStyle: { color: '#4a90e2' }, + areaStyle: { color: '#4a90e2', opacity: 0.1 }, + itemStyle: { color: '#4a90e2' }, + markPoint: { + data: [{ type: 'max', name: '最高水位' }], + itemStyle: { color: '#4a90e2' }, + label: { color: '#fff' }, + symbolSize: 40, + onClick: () => setLevelDialogOpen(true), + }, + markLine: { + silent: true, + lineStyle: { color: '#ff4d4f' }, + data: [{ yAxis: 68.04, name: '校核洪水位' }], + label: { color: '#fff' }, + }, + }], + }); + + if (!chartData) return null; + + return ( +
+ + + + + setFlowDialogOpen(false)} + className={classes.dialog} + > + + setFlowValue(e.target.value)} + className={classes.input} + /> + + + + + setLevelDialogOpen(false)} + className={classes.dialog} + > + + setLevelValue(e.target.value)} + className={classes.input} + /> + + + +
+ ); +}; + +export default ScheduleCharts; \ No newline at end of file diff --git a/src/views/Home/InfoDlg/EditFaDlg/index.js b/src/views/Home/InfoDlg/EditFaDlg/index.js new file mode 100644 index 0000000..2031fea --- /dev/null +++ b/src/views/Home/InfoDlg/EditFaDlg/index.js @@ -0,0 +1,41 @@ +import React from 'react'; +import DpTab from '../../../../layouts/mui/DpTab'; +import Dialog from '@material-ui/core/Dialog'; +import DialogContent from '@material-ui/core/DialogContent'; +import DpPaperComponent from '../../../../layouts/mui/DpPaperCompanent'; +import DpTabs from '../../../../layouts/mui/DpTabs'; +import DpAppBar from '../../../../layouts/mui/DpAppBar'; +import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop'; +import DpCloseButton from '../../../../layouts/mui/DpCloseButton'; +import { Typography,Button } from '@material-ui/core'; +import ScheduleCharts from './ScheduleCharts' +import { useDispatch, useSelector } from 'react-redux'; + +function HDStDlg({ record, onClose }) { + const [value, setValue] = React.useState(0); + const dispatch = useDispatch(); + + return ( + +
+ + + 方案调整 + + + + + +
+
+ ) +} + +export default React.memo(HDStDlg); diff --git a/src/views/Home/InfoDlg/FlowjcDlg/TaskInspectionDetail/index.js b/src/views/Home/InfoDlg/FlowjcDlg/TaskInspectionDetail/index.js new file mode 100644 index 0000000..6ead672 --- /dev/null +++ b/src/views/Home/InfoDlg/FlowjcDlg/TaskInspectionDetail/index.js @@ -0,0 +1,239 @@ +import React, { useState } from 'react'; +import { Card, Row, Col, Table, Tag, Form, Input, DatePicker, Tabs } from 'antd'; +import './index.less'; +import moment from 'moment'; +import ModalView from './view' +const TaskInspectionDetail = () => { + const [form] = Form.useForm(); + const [activeTab, setActiveTab] = useState('dam'); + const [visible, setVisible] = useState(false) + + // 表单初始值 + const initialValues = { + taskTitle: '06-02浮桥河日常巡查', + taskType: '日常巡查', + taskContent: '20250602每日巡检任务', + startTime: moment('2025-06-02 00:00:00'), + endTime: moment('2025-06-08 23:59:59'), + receiveTime: moment('2025-06-02 09:07:31'), + completeTime: moment('2025-06-02 09:08:05'), + inspector: '姜兴军', + taskStatus: '已完成' + }; + + // 巡查类别数据 + const categories = [ + { key: 'dam', label: '大坝', count: 0 }, + { key: 'spillway', label: '溢洪道', count: 0 }, + { key: 'waterPipe', label: '输水管', count: 0 }, + { key: 'facilities', label: '管理设施', count: 0 }, + { key: 'valve', label: '阀门与启闭机', count: 0 }, + { key: 'others', label: '其他情况', count: 0 } + ]; + + const detailModal = (row) => { + setVisible(true) + } + // 表格列定义 + const columns = [ + { + title: '序号', + dataIndex: 'index', + key: 'index', + width: 80 + }, + { + title: '巡查项', + dataIndex: 'item', + key: 'item' + }, + { + title: '巡查状态', + dataIndex: 'status', + key: 'status', + render: (status) => ( + {status} + ) + }, + { + title: '问题描述', + dataIndex: 'description', + key: 'description' + }, + { + title: '巡查图片', + dataIndex: 'images', + key: 'images' + }, + { + title: '巡查视频', + dataIndex: 'videos', + key: 'videos' + }, + { + title: '是否处理', + dataIndex: 'handled', + key: 'handled' + }, + { + title: '处理人', + dataIndex: 'handler', + key: 'handler' + }, + { + title: '操作', + key: 'action', + render: (v,r) => ( + detailModal(r)}>详情 + ) + } + ]; + + // 表格数据 + const tableData = [ + { + key: '1', + index: 1, + item: '上游坝', + status: '正常', + handler: '姜兴军' + }, + { + key: '2', + index: 2, + item: '下游坝', + status: '正常', + handler: '姜兴军' + } + ]; + + const handleTabChange = (key) => { + setActiveTab(key); + // 这里可以根据选中的tab加载对应的数据 + }; + + return ( +
+ {/* 任务基本信息 */} + 基本信息}> +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + {/* 巡查信息 */} + 巡查信息}> +
+ {categories.map(category => ( +
handleTabChange(category.key)} + > + {category.label} + ({category.count}) +
+ ))} +
+
+ + (异常项:0,正常项:13) + +
+ + + setVisible(false)} + > + + ); +}; + +export default TaskInspectionDetail; \ No newline at end of file diff --git a/src/views/Home/InfoDlg/FlowjcDlg/TaskInspectionDetail/index.less b/src/views/Home/InfoDlg/FlowjcDlg/TaskInspectionDetail/index.less new file mode 100644 index 0000000..b9e19f5 --- /dev/null +++ b/src/views/Home/InfoDlg/FlowjcDlg/TaskInspectionDetail/index.less @@ -0,0 +1,140 @@ +.task-inspection-detail { + padding: 5px; + background-color: transparent; + min-height: 100vh; + + .info-card { + margin-bottom: 24px; + background-color: transparent; + border: none; + + .ant-card-body { + color: #fff; + } + + .ant-form-item-label > label { + color: rgba(255, 255, 255, 0.85); + } + + .ant-input, + .ant-picker { + background-color: rgba(255, 255, 255, 0.04); + border-color: rgba(255, 255, 255, 0.1); + color: rgba(255, 255, 255, 0.85); + + &:hover, + &:focus { + border-color: #1890ff; + } + } + + .ant-picker { + .ant-picker-input > input { + color: rgba(255, 255, 255, 0.85); + } + + .ant-picker-suffix, + .ant-picker-separator { + color: rgba(255, 255, 255, 0.45); + } + + .ant-picker-clear { + background: #1a1a27; + color: rgba(255, 255, 255, 0.45); + } + } + + .ant-input-textarea { + .ant-input { + min-height: 80px; + } + } + + .ant-picker-suffix { + color: rgba(255, 255, 255, 0.45); + } + } + + + + .inspection-card { + background-color: transparent; + border: none; + + .category-tabs { + display: flex; + margin-bottom: 16px; + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + padding-bottom: 16px; + + .category-tab { + padding: 8px 16px; + cursor: pointer; + position: relative; + transition: all 0.3s; + + &:hover { + color: #1890ff; + } + + &.active { + color: #1890ff; + + &::after { + content: ''; + position: absolute; + bottom: -16px; + left: 0; + width: 100%; + height: 2px; + background-color: #1890ff; + } + } + + .category-label { + color: rgba(255, 255, 255, 0.85); + } + + .category-count { + margin-left: 4px; + color: rgba(255, 255, 255, 0.45); + } + + &:hover .category-label, + &.active .category-label { + color: #1890ff; + } + } + } + + .table-info { + margin-bottom: 16px; + + .total-info { + color: rgba(255, 255, 255, 0.65); + } + } + + .inspection-table { + .ant-table { + background-color: transparent; + color: #fff; + + .ant-table-thead > tr > th { + background-color: rgba(255, 255, 255, 0.04); + color: rgba(255, 255, 255, 0.85); + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + } + + .ant-table-tbody > tr > td { + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + color: rgba(255, 255, 255, 0.65); + } + + .ant-table-tbody > tr:hover > td { + background-color: rgba(255, 255, 255, 0.08); + } + } + } + } +} \ No newline at end of file diff --git a/src/views/Home/InfoDlg/FlowjcDlg/TaskInspectionDetail/view.js b/src/views/Home/InfoDlg/FlowjcDlg/TaskInspectionDetail/view.js new file mode 100644 index 0000000..02116eb --- /dev/null +++ b/src/views/Home/InfoDlg/FlowjcDlg/TaskInspectionDetail/view.js @@ -0,0 +1,46 @@ +import React from 'react'; +import DpTab from '../../../../../layouts/mui/DpTab'; +import Dialog from '@material-ui/core/Dialog'; +import DialogContent from '@material-ui/core/DialogContent'; +import DpPaperComponent from '../../../../../layouts/mui/DpPaperCompanent'; +import DpTabs from '../../../../../layouts/mui/DpTabs'; +import DpAppBar from '../../../../../layouts/mui/DpAppBar'; +import DpBackgroundDrop from '../../../../../layouts/mui/DpBackdrop'; +import DpCloseButton from '../../../../../layouts/mui/DpCloseButton'; +import { Grid } from '@material-ui/core'; +import DescriptionItem from '../../../components/DescrptionItem' +function HDStDlg({ record, onClose,open }) { + const [value, setValue] = React.useState(0); + + return ( + +
+ + + setValue(v)}> + + + + +
+ {/* */} + + + + + +
+
+
+
+ ) +} + +export default React.memo(HDStDlg); diff --git a/src/views/Home/InfoDlg/FlowjcDlg/detail.js b/src/views/Home/InfoDlg/FlowjcDlg/detail.js new file mode 100644 index 0000000..7588c82 --- /dev/null +++ b/src/views/Home/InfoDlg/FlowjcDlg/detail.js @@ -0,0 +1,492 @@ +import React, { useState, useEffect } from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import { + Paper, + Table, + TableBody, + TableCell, + TableContainer, + TableHead, + TableRow, + TextField, + Button, + Box, + IconButton, + ButtonGroup, + Grid, + Select, + MenuItem +} from '@material-ui/core'; +import SearchIcon from '@material-ui/icons/Search'; +import RefreshIcon from '@material-ui/icons/Refresh'; +import { DatePicker } from 'antd'; +import moment from 'moment'; +import { useDispatch, useSelector } from 'react-redux'; +import ModalView from './view' +import ReactECharts from 'echarts-for-react'; +import { color } from 'echarts/lib/theme/light'; + +const { RangePicker } = DatePicker; + +const useStyles = makeStyles((theme) => ({ + root: { + width: '100%', + backgroundColor: 'transparent', + color: '#fff' + }, + toolbar: { + padding: theme.spacing(2), + display: 'flex', + gap: theme.spacing(2), + alignItems: 'center', + borderBottom: '1px solid rgba(255, 255, 255, 0.1)' + }, + searchRow: { + display: 'flex', + gap: theme.spacing(2), + alignItems: 'center', + flexWrap: 'wrap' + }, + searchField: { + '& .MuiInputBase-root': { + color: '#fff', + backgroundColor: 'rgba(255, 255, 255, 0.05)', + borderRadius: 4, + width: 200 + }, + '& .MuiInputLabel-root': { + color: '#fff' + }, + '& .MuiOutlinedInput-notchedOutline': { + borderColor: 'rgba(255, 255, 255, 0.1)' + } + }, + datePicker: { + '& .MuiInputBase-root': { + color: '#fff', + backgroundColor: 'rgba(255, 255, 255, 0.05)', + width: 200 + }, + '& .MuiIconButton-root': { + color: '#fff' + }, + '& .MuiOutlinedInput-notchedOutline': { + borderColor: 'rgba(255, 255, 255, 0.1)' + } + }, + buttonGroup: { + '& .MuiButton-root': { + color: '#fff', + borderColor: 'rgba(255, 255, 255, 0.3)', + '&.active': { + backgroundColor: '#2196f3', + borderColor: '#2196f3' + } + } + }, + table: { + '& .MuiTableCell-head': { + backgroundColor: 'rgba(255, 255, 255, 0.05)', + color: '#fff', + fontWeight: 'bold', + borderBottom: '1px solid rgba(255, 255, 255, 0.1)' + }, + '& .MuiTableCell-body': { + color: '#fff', + borderBottom: '1px solid rgba(255, 255, 255, 0.1)' + } + }, + status: { + padding: '4px 8px', + borderRadius: 4, + backgroundColor: 'rgba(33, 150, 243, 0.1)', + color: '#2196f3' + }, + actionButton: { + color: '#2196f3', + '&:hover': { + backgroundColor: 'rgba(33, 150, 243, 0.1)' + } + }, + bodyCell: { + color: '#fff', + borderBottom: '1px solid rgba(255, 255, 255, 0.1)', + }, + summaryRow: { + backgroundColor: 'transparent', + '& td': { + color: '#fff', + borderBottom: 'none', + }, + }, +})); + +const TaskList = ({ tab = '生态' }) => { + const classes = useStyles(); + const [startDate, setStartDate] = useState(null); + const dispatch = useDispatch(); + const [endDate, setEndDate] = useState(null); + const [activeType, setActiveType] = useState('daily'); + const [visible, setVisible] = useState(false) + const handleTypeChange = (type) => { + setActiveType(type); + }; + const [dimension, setDimension] = useState('ft'); + + const columns = [ + { id: 'sequence', label: '序号', width: 70 }, + { id: 'city', label: '时间', with: 300 }, + { id: 'district', label: '瞬时流量(m³/s)' }, + ]; + + const mockData = [ + { + sequence: 1, + city: '黄冈市', + district: '麻城市', + location: '', + taskType: '06-02浮桥河水库日常巡查', + taskContent: '20250602每日巡检', + status: '未完成', + person: '姜兴军', + startTime: '2025-06-02 00:00:00', + endTime: '2025-06-08 23:59:59', + problems: 0, + processed: 0, + createTime: '2025-06-02 02:00:00', + creator: '' + }, + { + sequence: 2, + city: '黄冈市', + district: '麻城市', + location: '', + taskType: '06-02浮桥河水库汛前巡查', + taskContent: '20250602每日巡检', + status: '未完成', + person: '熊杰', + startTime: '2025-06-02 00:00:00', + endTime: '2025-06-08 23:59:59', + problems: 0, + processed: 0, + createTime: '2025-06-02 02:00:00', + creator: '' + }, + { + sequence: 3, + city: '黄冈市', + district: '麻城市', + location: '', + taskType: '06-02浮桥河水库特别检查', + taskContent: '20250602每日巡检', + status: '未完成', + person: '白斌', + startTime: '2025-06-02 00:00:00', + endTime: '2025-06-08 23:59:59', + problems: 0, + processed: 0, + createTime: '2025-06-02 02:00:00', + creator: '' + }, + { + sequence: 4, + city: '黄冈市', + district: '麻城市', + location: '', + taskType: '06-02浮桥河水库日常巡查', + taskContent: '20250602每日巡检', + status: '未完成', + person: '于静', + startTime: '2025-06-02 00:00:00', + endTime: '2025-06-08 23:59:59', + problems: 0, + processed: 0, + createTime: '2025-06-02 02:00:00', + creator: '' + }, { + sequence: 5, + city: '黄冈市', + district: '麻城市', + location: '', + taskType: '06-02浮桥河水库日常巡查', + taskContent: '20250602每日巡检', + status: '未完成', + person: '何义红', + startTime: '2025-06-02 00:00:00', + endTime: '2025-06-08 23:59:59', + problems: 0, + processed: 0, + createTime: '2025-06-02 02:00:00', + creator: '' + }, + ]; + const flyTo = (row) => { + // dispatch?.runtime.setInfoDlg({ layerId: 'ChaoshiDetailLayer', properties: {} }) + if (row.sequence == 1) { + setVisible(true) + + } + } + const [params, setParams] = useState({ tm: [] }) + + const searchTm = (e) => { + setParams({ + ...params, + stm: e[0].format("YYYY-MM-DD HH:mm"), + etm: e[1].format("YYYY-MM-DD HH:mm"), + tm: e, + }) + }; + const [list, setList] = useState([]) + const generateData = () => { + const data = []; + const startTime = moment(); + for (let i = 0; i < 20; i++) { // 每10分钟一个点,10天共1440个点 + const time = moment(startTime).add(i * 60 * 4, 'minutes').format('YYYY-MM-DD HH:mm'); + // 生成0.2到0.4之间的随机数,保留3位小数 + const value = +(Math.random() * (0.4 - 0.2) + 0.2).toFixed(3); + data.push([time, value]); + } + const res = data.map(item => ({ time: item[0], value: item[1] })) + setList(res) + }; + useEffect(() => { + generateData() + }, []) + + const stoption = { + tooltip: { + trigger: 'axis', + formatter: function (params) { + return `时间:${params[0].name}
流量:${params[0].value} m³/s`; + } + }, + xAxis: { + type: 'category', + boundaryGap: false, + axisLabel: { + rotate: 45, + color: '#fff' + }, + data: list.map(item => moment(item.time).format('HH:mm')) + }, + yAxis: { + type: 'value', + name: '瞬时流量(m³/s)', + nameTextStyle: { + color: "#fff" + }, + min: 0, + max: 0.6, + interval: 0.1, + axisLabel: { + color: '#fff' + }, + }, + series: [ + { + name: '瞬时流量', + type: 'line', + smooth: true, + data: list.map(item => item.value), + markLine: { + silent: true, + symbol: 'none', + label: { + formatter: '{b}: {c}' + }, + data: [ + { + name: '日平均流量', + yAxis: 0.358, + lineStyle: { + color: '#FF4500' + }, + label: { + position: 'end' + } + }, + { + name: '生态流量目标', + yAxis: 0.32, + lineStyle: { + color: '#2E8B57' + }, + label: { + position: 'end' + } + } + ] + } + } + ], + grid: { + left: '5%', + right: '16%', + bottom: '15%', + containLabel: true + } + }; + + const option = { + tooltip: { + trigger: 'axis', + formatter: function (params) { + return `时间:${params[0].name}
流量:${params[0].value} m³/s`; + } + }, + xAxis: { + type: 'category', + boundaryGap: false, + axisLabel: { + rotate: 45, + color: '#fff' + }, + data: list.map(item => moment(item.time).format('HH:mm')) + }, + yAxis: { + type: 'value', + name: '瞬时流量(m³/s)', + nameTextStyle: { + color: "#fff" + }, + min: 0, + max: 0.6, + interval: 0.1, + axisLabel: { + color: '#fff' + }, + }, + series: [ + { + name: '瞬时流量', + type: 'line', + smooth: true, + data: list.map(item => item.value), + } + ], + grid: { + left: '5%', + right: '16%', + bottom: '15%', + containLabel: true + } + }; + + return ( + + + + + + +
+
时段选择:
+
+ trigger.parentElement} + /> +
+
+ + +
+
+
+
+ +
+ + + {columns.map((column) => ( + + {column.label} + + ))} + + + + {list.map((row, index) => ( + + {index + 1} + {row.time} + {row.value} + + ))} + { + tab == '生态' && <> + + + 日平均流量(m³/s) + + 0.358 + + {/* 生态流量目标行 */} + + + 生态流量目标(m³/s) + + 0.32 + + + } + + +
+ +
+ { + list.length > 0 &&
+ ; +
+ } + + + ); +}; + +export default TaskList; \ No newline at end of file diff --git a/src/views/Home/InfoDlg/FlowjcDlg/index.js b/src/views/Home/InfoDlg/FlowjcDlg/index.js new file mode 100644 index 0000000..598ad61 --- /dev/null +++ b/src/views/Home/InfoDlg/FlowjcDlg/index.js @@ -0,0 +1,41 @@ +import React from 'react'; +import DpTab from '../../../../layouts/mui/DpTab'; +import Dialog from '@material-ui/core/Dialog'; +import DialogContent from '@material-ui/core/DialogContent'; +import DpPaperComponent from '../../../../layouts/mui/DpPaperCompanent'; +import DpTabs from '../../../../layouts/mui/DpTabs'; +import DpAppBar from '../../../../layouts/mui/DpAppBar'; +import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop'; +import DpCloseButton from '../../../../layouts/mui/DpCloseButton'; +import ContentDetail from './detail' +import { Typography } from '@material-ui/core'; +function HDStDlg({ record, onClose }) { + const [value, setValue] = React.useState(0); + + return ( + +
+ + + {/* setValue(v)}> + + */} + {record?.title} + + + + + +
+
+ ) +} + +export default React.memo(HDStDlg); diff --git a/src/views/Home/InfoDlg/FlowjcDlg/view.js b/src/views/Home/InfoDlg/FlowjcDlg/view.js new file mode 100644 index 0000000..05afc7b --- /dev/null +++ b/src/views/Home/InfoDlg/FlowjcDlg/view.js @@ -0,0 +1,41 @@ +import React from 'react'; +import DpTab from '../../../../layouts/mui/DpTab'; +import Dialog from '@material-ui/core/Dialog'; +import DialogContent from '@material-ui/core/DialogContent'; +import DpPaperComponent from '../../../../layouts/mui/DpPaperCompanent'; +import DpTabs from '../../../../layouts/mui/DpTabs'; +import DpAppBar from '../../../../layouts/mui/DpAppBar'; +import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop'; +import DpCloseButton from '../../../../layouts/mui/DpCloseButton'; +import TaskInspectionDetail from './TaskInspectionDetail' +function HDStDlg({ record, onClose,open }) { + const [value, setValue] = React.useState(0); + + return ( + +
+ + + setValue(v)}> + + + + +
+ + {/* */} +
+
+
+
+ ) +} + +export default React.memo(HDStDlg); diff --git a/src/views/Home/InfoDlg/YascDlg/index.js b/src/views/Home/InfoDlg/YascDlg/index.js index 24c96c1..a2ce018 100644 --- a/src/views/Home/InfoDlg/YascDlg/index.js +++ b/src/views/Home/InfoDlg/YascDlg/index.js @@ -16,6 +16,7 @@ function HDStDlg({ record, onClose }) { const loadFa = () => { onClose() dispatch.runtime.setYyfa({ yy: 111 }) + dispatch.runtime.setXiayouxh(true) } return ( }else if (layerId === 'GwLayer') { return + }else if (layerId === 'flowjcLayer') { + return + }else if (layerId === 'editFaLayer') { + return } diff --git a/src/views/Home/MapCtrl/index.js b/src/views/Home/MapCtrl/index.js index 12b9f5a..a87f9e9 100644 --- a/src/views/Home/MapCtrl/index.js +++ b/src/views/Home/MapCtrl/index.js @@ -137,6 +137,7 @@ export default function MapCtrl({ initParams, onLoad }) { if (feature.layer.id === '关联站点') { const record = feature.properties + // debugger if (record.cd_nm == 'GN1') { dispatch?.runtime.setInfoDlg({ layerId: 'BxjcLayer', properties: record }) }else if (record.cd_nm == 'UPD1') { @@ -149,7 +150,8 @@ export default function MapCtrl({ initParams, onLoad }) { dispatch?.runtime.setInfoDlg({ layerId: 'RealSkLayer', properties: record }) } else if (record.type == 'sw') { dispatch?.runtime.setFeaturePop({ layerId: 'RealHDPop', properties: record,coordinates: [record.lgtd, record.lttd] }) - + } else if (record.flow == 1) { + dispatch?.runtime.setInfoDlg({ layerId: 'flowjcLayer', properties: record }) } // dispatch.runtime.setFeaturePop({ type: 'RealSkPop', properties: record, coordinates: [record.lgtd, record.lttd] }); } diff --git a/src/views/Home/index.js b/src/views/Home/index.js index 7c6386c..0f03df4 100644 --- a/src/views/Home/index.js +++ b/src/views/Home/index.js @@ -24,6 +24,7 @@ export default function Demo1() { const wg = useSelector(s => s.runtime.shkshObj) const showGw = useSelector(s => s.runtime.showGw) const yuananType = useSelector(s => s.runtime.yuananType); + const xiayou = useSelector(s => s.runtime.xiayouxh); console.log('wg', wg); @@ -46,6 +47,9 @@ export default function Demo1() { // // } + { + xiayou && + } {/* { isSc && diff --git a/src/views/Home/panels/GqWeatherForcast/WF.js b/src/views/Home/panels/GqWeatherForcast/WF.js index e2e07cc..25bb332 100644 --- a/src/views/Home/panels/GqWeatherForcast/WF.js +++ b/src/views/Home/panels/GqWeatherForcast/WF.js @@ -50,13 +50,13 @@ function WF() { const genWeatherContour24H = () => { dispatch.runtime.setYyfa({}) - + dispatch.runtime.setXiayouxh(false) dispatch.shyjview.showWeather24h(); } const genWeatherContourRadar = () => { dispatch.runtime.setYyfa({}) - + dispatch.runtime.setXiayouxh(false) dispatch.shyjview.showWeatherRadar(); } diff --git a/src/views/Home/panels/Jcgj/index.js b/src/views/Home/panels/Jcgj/index.js index b287821..c7994d8 100644 --- a/src/views/Home/panels/Jcgj/index.js +++ b/src/views/Home/panels/Jcgj/index.js @@ -54,7 +54,7 @@ function HDReal({ style }) { color="green" extra={
- 2025-05-26~2025-06-02 + {moment().subtract(6,'day').format('YYYY-MM-DD')}~{moment().format('YYYY-MM-DD')}
} > diff --git a/src/views/Home/panels/Jcgjz/index.js b/src/views/Home/panels/Jcgjz/index.js index b287821..8c52d09 100644 --- a/src/views/Home/panels/Jcgjz/index.js +++ b/src/views/Home/panels/Jcgjz/index.js @@ -54,7 +54,7 @@ function HDReal({ style }) { color="green" extra={
- 2025-05-26~2025-06-02 + {moment().subtract(6,'day').format('YYYY-MM-DD')}~{moment().format('YYYY-MM-DD')}
} > diff --git a/src/views/Home/panels/Sksltj/Calender/index.js b/src/views/Home/panels/Sksltj/Calender/index.js new file mode 100644 index 0000000..b87a619 --- /dev/null +++ b/src/views/Home/panels/Sksltj/Calender/index.js @@ -0,0 +1,87 @@ +import React, { useState } from 'react'; +import moment from 'moment'; +import './index.less'; + +const CustomCalendar = ({ markedDates = {} }) => { + const [currentDate, setCurrentDate] = useState(moment()); + + // 生成日历数据 + const generateCalendarData = () => { + const firstDay = moment(currentDate).startOf('month'); + const lastDay = moment(currentDate).endOf('month'); + const startDay = moment(firstDay).startOf('week'); + const endDay = moment(lastDay).endOf('week'); + + const calendar = []; + let week = []; + + for (let day = moment(startDay); day.isSameOrBefore(endDay); day.add(1, 'day')) { + week.push({ + date: moment(day), + isCurrentMonth: day.month() === currentDate.month(), + isToday: day.isSame(moment(), 'day'), + marks: markedDates[day.format('YYYY-MM-DD')] || [] + }); + + if (week.length === 7) { + calendar.push(week); + week = []; + } + } + + return calendar; + }; + + // 切换月份 + const changeMonth = (offset) => { + setCurrentDate(moment(currentDate).add(offset, 'month')); + }; + + const weekDays = ['日', '一', '二', '三', '四', '五', '六']; + const calendar = generateCalendarData(); + return ( +
+
+
+ {currentDate.format('YYYY年M月')} +
+
+ + +
+
+ +
+ {weekDays.map(day => ( +
{day}
+ ))} +
+ +
+ {calendar.map((week, weekIndex) => ( +
+ {week.map(({ date, isCurrentMonth, isToday, marks }) => ( +
+ {date.date()} + {marks.map((mark, index) => ( + + ))} +
+ ))} +
+ ))} +
+
+ ); +}; + +export default CustomCalendar; \ No newline at end of file diff --git a/src/views/Home/panels/Sksltj/Calender/index.less b/src/views/Home/panels/Sksltj/Calender/index.less new file mode 100644 index 0000000..1626caf --- /dev/null +++ b/src/views/Home/panels/Sksltj/Calender/index.less @@ -0,0 +1,96 @@ +.calendar { + background-color: #34495e; + border-radius: 8px; + padding: 5px; + color: white; + transform: scale(0.8,0.9); +} + +.header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 16px; +} + +.currentMonth { + font-size: 18px; + font-weight: bold; +} + +.navigation { + display: flex; + gap: 8px; + + button { + background-color: #2c3e50; + border: none; + color: white; + padding: 8px 16px; + border-radius: 4px; + cursor: pointer; + + &:hover { + background-color: #243342; + } + } +} + +.weekDays { + display: grid; + grid-template-columns: repeat(7, 1fr); + text-align: center; + margin-bottom: 8px; +} + +.weekDay { + padding: 8px; + font-weight: bold; +} + +.days { + display: flex; + flex-direction: column; + gap: 4px; +} + +.week { + display: grid; + grid-template-columns: repeat(7, 1fr); + gap: 4px; +} + +.day { + aspect-ratio: 1; + background-color: #2c3e50; + border-radius: 4px; + display: flex; + flex-direction: column; + align-items: center; + padding: 4px; + position: relative; + + &.otherMonth { + opacity: 0.5; + } + + &.today { + background-color: #3498db; + } +} + +.dayNumber { + font-size: 14px; + margin-bottom: 4px; +} + +.mark { + width: 6px; + height: 6px; + border-radius: 50%; + margin: 1px; + + &:first-child { + margin-top: auto; + } +} \ No newline at end of file diff --git a/src/views/Home/panels/Sksltj/barCgart.js b/src/views/Home/panels/Sksltj/barCgart.js new file mode 100644 index 0000000..ba92e12 --- /dev/null +++ b/src/views/Home/panels/Sksltj/barCgart.js @@ -0,0 +1,106 @@ +import React from 'react'; +import ReactECharts from 'echarts-for-react'; +import { makeStyles } from '@material-ui/core/styles'; + +const useStyles = makeStyles({ + chart: { + height: 100, + backgroundColor: 'transparent' + } +}); + +const WaterSupplyChart = ({type}) => { + const classes = useStyles(); + + // 生成近7天的日期 + const getDates = () => { + const dates = []; + for (let i = 6; i >= 0; i--) { + const date = new Date(); + date.setDate(date.getDate() - i); + dates.push(date.toLocaleDateString('zh-CN', { month: '2-digit', day: '2-digit' })); + } + return dates; + }; + + const option = { + backgroundColor: 'transparent', + grid: { + left: '5%', + right: '5%', + top: '20%', + bottom: '1%', + containLabel: true + }, + xAxis: { + type: 'category', + data: getDates(), + axisLine: { + lineStyle: { color: '#fff' } + }, + axisLabel: { + color: '#fff', + fontSize: 12 + } + }, + yAxis: { + type: 'value', + name: 'm³', + nameTextStyle: { + color: '#fff', + fontSize: 12 + }, + axisLine: { + show: true, + lineStyle: { color: '#fff' } + }, + axisLabel: { + color: '#fff', + fontSize: 12 + }, + splitLine: { + lineStyle: { + color: 'rgba(255, 255, 255, 0.1)', + type: 'dashed' + } + }, + min: 0, + max: 3000, + interval: 1000 + }, + tooltip: { + trigger: 'axis', + backgroundColor: 'rgba(0, 0, 0, 0.7)', + borderColor: '#4a90e2', + textStyle: { + color: '#fff' + } + }, + series: [{ + name:'供水量', + data: type == 1 ? [1800, 1700, 1900, 1800, 1800, 2200, 2200]: [900, 1900, 1200, 2600, 1000, 2100, 2300], // 示例数据 + type: 'bar', + barWidth: '40%', + itemStyle: { + color: '#4a90e2' + }, + label: { + show: false, + position: 'top', + color: '#fff', + formatter: '{c} m³' + } + }] + }; + + return ( + + ); +}; + +export default WaterSupplyChart; \ No newline at end of file diff --git a/src/views/Home/panels/Sksltj/index.js b/src/views/Home/panels/Sksltj/index.js index bcf0bc9..b521d65 100644 --- a/src/views/Home/panels/Sksltj/index.js +++ b/src/views/Home/panels/Sksltj/index.js @@ -1,15 +1,20 @@ import React, { useMemo, useState } from 'react'; -import { Switch, FormControlLabel,InputLabel, Select, MenuItem,FormControl } from '@material-ui/core/index' +import { Switch, FormControlLabel, InputLabel, Select, MenuItem, FormControl } from '@material-ui/core/index' import PanelBox from '../../components/PanelBox'; import config from '../../../../config'; import { useDispatch, useSelector } from 'react-redux'; import AreaDrpChart from './chart'; import clsx from 'clsx'; - - +import './index.less' +import moment from 'moment/moment'; +import CustomCalendar from './Calender' +import WaterSupplyChart from './barCgart' +import { parseGeoJSON } from "../../../../utils/tools"; function DrpReal({ style }) { - const [tab,setTab] = useState('生态') + const [tab, setTab] = useState('生态') + const [dimension, setDimension] = useState('ft'); + const dispatch = useDispatch(); const data = [ { @@ -44,202 +49,466 @@ function DrpReal({ style }) { "rzWarning": 0, "rzState": 1, "aRz": -4.18 - },{ - "stcd": "61612610", - "type": "sk", - "hasRz": true, - "stnm": "三河口水库", - "adcd": "421181109000", - "wscd": null, - "importancy": 0, - "lgtd": 115.166667, - "lttd": 31.333333, - "elev": 0, - "damel": 156.8, - "dsflz": 154.99, - "fsltdz": 149, - "ddz": 124, - "zcxsw": 149, - "drpTm": "2025-06-03T02:00:00.000Z", - "today": 0, - "h1": 0, - "h3": 0, - "h6": 0, - "h12": 0, - "h24": 0, - "h48": 12.5, - "drpState": 1, - "rz": 141.45, - "w": 77.8, - "a_fsltdz": -7.550000000000011, - "rzTm": "2025-06-03T01:00:00.000Z", - "rzWarning": 0, - "rzState": 1, - "aRz": -7.55 - },{ - "stcd": "61613010", - "type": "sk", - "hasRz": true, - "stnm": "明山水库", - "adcd": "421181103000", - "wscd": null, - "importancy": 0, - "lgtd": 115.066667, - "lttd": 31.016667, - "elev": 0, - "damel": 98.7, - "dsflz": 96.07, - "fsltdz": 93, - "ddz": 78.02, - "zcxsw": 93, - "drpTm": "2025-06-03T02:00:00.000Z", - "today": 0, - "h1": 0, - "h3": 0, - "h6": 0, - "h12": 0, - "h24": 0, - "h48": 12.5, - "drpState": 1, - "rz": 84.43, - "w": 49.5, - "a_fsltdz": -8.569999999999993, - "rzTm": "2025-06-03T02:00:00.000Z", - "rzWarning": 0, - "rzState": 1, - "aRz": -8.57 - },{ - "stcd": "716113901", - "type": "sk", - "hasRz": true, - "stnm": "铺头坳水库", - "adcd": "421181201000", - "wscd": null, - "importancy": 0, - "lgtd": 115.169444, - "lttd": 31.090278, - "elev": 0, - "damel": 266.7, - "dsflz": 265.54, - "fsltdz": 264.3, - "ddz": 256, - "zcxsw": 264.3, - "drpTm": "2025-04-11T05:00:00.000Z", - "today": 0, - "h1": 0, - "h3": 0, - "h6": 0, - "h12": 0, - "h24": 0, - "h48": 0, - "drpState": 2, - "rz": 263.16, - "w": 0.991, - "a_fsltdz": -1.1399999999999864, - "rzTm": "2025-04-11T05:00:00.000Z", - "rzWarning": 0, - "rzState": 2, - "pic": [ + }, { + "stcd": "61612610", + "type": "sk", + "hasRz": true, + "stnm": "三河口水库", + "adcd": "421181109000", + "wscd": null, + "importancy": 0, + "lgtd": 115.166667, + "lttd": 31.333333, + "elev": 0, + "damel": 156.8, + "dsflz": 154.99, + "fsltdz": 149, + "ddz": 124, + "zcxsw": 149, + "drpTm": "2025-06-03T02:00:00.000Z", + "today": 0, + "h1": 0, + "h3": 0, + "h6": 0, + "h12": 0, + "h24": 0, + "h48": 12.5, + "drpState": 1, + "rz": 141.45, + "w": 77.8, + "a_fsltdz": -7.550000000000011, + "rzTm": "2025-06-03T01:00:00.000Z", + "rzWarning": 0, + "rzState": 1, + "aRz": -7.55 + }, { + "stcd": "61613010", + "type": "sk", + "hasRz": true, + "stnm": "明山水库", + "adcd": "421181103000", + "wscd": null, + "importancy": 0, + "lgtd": 115.066667, + "lttd": 31.016667, + "elev": 0, + "damel": 98.7, + "dsflz": 96.07, + "fsltdz": 93, + "ddz": 78.02, + "zcxsw": 93, + "drpTm": "2025-06-03T02:00:00.000Z", + "today": 0, + "h1": 0, + "h3": 0, + "h6": 0, + "h12": 0, + "h24": 0, + "h48": 12.5, + "drpState": 1, + "rz": 84.43, + "w": 49.5, + "a_fsltdz": -8.569999999999993, + "rzTm": "2025-06-03T02:00:00.000Z", + "rzWarning": 0, + "rzState": 1, + "aRz": -8.57 + }, { + "stcd": "716113901", + "type": "sk", + "hasRz": true, + "stnm": "铺头坳水库", + "adcd": "421181201000", + "wscd": null, + "importancy": 0, + "lgtd": 115.169444, + "lttd": 31.090278, + "elev": 0, + "damel": 266.7, + "dsflz": 265.54, + "fsltdz": 264.3, + "ddz": 256, + "zcxsw": 264.3, + "drpTm": "2025-04-11T05:00:00.000Z", + "today": 0, + "h1": 0, + "h3": 0, + "h6": 0, + "h12": 0, + "h24": 0, + "h48": 0, + "drpState": 2, + "rz": 263.16, + "w": 0.991, + "a_fsltdz": -1.1399999999999864, + "rzTm": "2025-04-11T05:00:00.000Z", + "rzWarning": 0, + "rzState": 2, + "pic": [ { - "stcd": "716113901", - "tm": "2023-03-12T08:02:00.000Z", - "url": "http://223.75.53.106:8891/skjgimages/2023/0312/716113901/20230312160200.jpg" + "stcd": "716113901", + "tm": "2023-03-12T08:02:00.000Z", + "url": "http://223.75.53.106:8891/skjgimages/2023/0312/716113901/20230312160200.jpg" }, { - "stcd": "716113901", - "tm": "2023-03-12T07:15:00.000Z", - "url": "http://223.75.53.106:8891/skjgimages/2023/0312/716113902/20230312151500.jpg" + "stcd": "716113901", + "tm": "2023-03-12T07:15:00.000Z", + "url": "http://223.75.53.106:8891/skjgimages/2023/0312/716113902/20230312151500.jpg" } - ], - "aRz": -1.14 - },{ - "stcd": "716111701", - "type": "sk", - "hasRz": true, - "stnm": "桐枧冲水库", - "adcd": "421181110000", - "wscd": null, - "importancy": 0, - "lgtd": 115.135278, - "lttd": 31.3925, - "elev": 0, - "damel": 276.56, - "dsflz": 273.66, - "fsltdz": 269.86, - "ddz": 256.76, - "zcxsw": 269.86, - "drpTm": "2025-04-11T05:00:00.000Z", - "today": 0, - "h1": 0, - "h3": 0, - "h6": 0, - "h12": 0, - "h24": 0, - "h48": 0, - "drpState": 2, - "rz": 265.12, - "w": 0.689, - "a_fsltdz": -4.740000000000009, - "rzTm": "2025-04-11T05:00:00.000Z", - "rzWarning": 0, - "rzState": 2, - "pic": [ + ], + "aRz": -1.14 + }, { + "stcd": "716111701", + "type": "sk", + "hasRz": true, + "stnm": "桐枧冲水库", + "adcd": "421181110000", + "wscd": null, + "importancy": 0, + "lgtd": 115.135278, + "lttd": 31.3925, + "elev": 0, + "damel": 276.56, + "dsflz": 273.66, + "fsltdz": 269.86, + "ddz": 256.76, + "zcxsw": 269.86, + "drpTm": "2025-04-11T05:00:00.000Z", + "today": 0, + "h1": 0, + "h3": 0, + "h6": 0, + "h12": 0, + "h24": 0, + "h48": 0, + "drpState": 2, + "rz": 265.12, + "w": 0.689, + "a_fsltdz": -4.740000000000009, + "rzTm": "2025-04-11T05:00:00.000Z", + "rzWarning": 0, + "rzState": 2, + "pic": [ { - "stcd": "716111701", - "tm": "2023-03-12T07:03:00.000Z", - "url": "http://223.75.53.106:8891/skjgimages/2023/0312/716111701/20230312150300.jpg" + "stcd": "716111701", + "tm": "2023-03-12T07:03:00.000Z", + "url": "http://223.75.53.106:8891/skjgimages/2023/0312/716111701/20230312150300.jpg" }, { - "stcd": "716111701", - "tm": "2023-03-12T07:27:00.000Z", - "url": "http://223.75.53.106:8891/skjgimages/2023/0312/716111702/20230312152700.jpg" + "stcd": "716111701", + "tm": "2023-03-12T07:27:00.000Z", + "url": "http://223.75.53.106:8891/skjgimages/2023/0312/716111702/20230312152700.jpg" } - ], - "aRz": -4.74 - }, + ], + "aRz": -4.74 + }, ] - return ( - { + const map = window.__mapref; + const layer = map.getLayer('关联站点') + if (layer) { + map.removeLayer('关联站点'); + map.removeSource('关联站点'); + } + map.addLayer({ + 'id': '关联站点',//+new Date().getTime(), + 'type': 'symbol', + 'source': { + 'type': 'geojson', + 'data': { + 'type': 'FeatureCollection', + 'features': [], + }, + }, + 'layout': { + 'icon-allow-overlap': true, + 'text-allow-overlap': true, + 'icon-image': '流量站', + 'icon-size': [ + 'interpolate', ['linear'], ['zoom'], + 10, 0.4, + 14, 0.8, + ], + + 'text-allow-overlap': true, + 'text-size': [ + 'interpolate', ['linear'], ['zoom'], + 10, 10, + 14, 14, + ], + 'text-font': ['Roboto Black'], + 'text-field': [ + 'step', + ['zoom'], + '', + 12, ['get', 'stnm'] + ], + 'text-anchor': 'top', + 'text-offset': [0, 1], + + }, + 'paint': { + 'text-color': '#fff' + }, + 'visibility': 'visible', + }); + const arrData = [...stPoint, ...scPoint, ...ggPoint] + map.getSource('关联站点').setData(parseGeoJSON(arrData)) + + } + + return ( + - - { - // dispatch.map.setLayerVisible({'BxjcLayer':true}); - // dispatch.map.setLayerVisible({'SyjcLayer':false}); - // dispatch.map.setLayerVisible({'SljcLayer':false}); - // dispatch.map.setLayerVisible({'ByjcLayer':false}); - setTab('生态') - }}>生态 - { - // dispatch.map.setLayerVisible({'BxjcLayer':false}); - // dispatch.map.setLayerVisible({'SyjcLayer':true}); - // dispatch.map.setLayerVisible({'SljcLayer':false}); - // dispatch.map.setLayerVisible({'ByjcLayer':false}); - setTab('灌溉发电') - }}>灌溉发电 - {/* { - // dispatch.map.setLayerVisible({'BxjcLayer':false}); - // dispatch.map.setLayerVisible({'SyjcLayer':false}); - // dispatch.map.setLayerVisible({'SljcLayer':true}); - // dispatch.map.setLayerVisible({'ByjcLayer':false}); - setTab('发电') - }}>发电 */} - { - // dispatch.map.setLayerVisible({'BxjcLayer':false}); - // dispatch.map.setLayerVisible({'SyjcLayer':false}); - // dispatch.map.setLayerVisible({'SljcLayer':false}); - // dispatch.map.setLayerVisible({'ByjcLayer':true}); - setTab('泄洪') - }}>泄洪 - - - } + // extra={ + // <> + // + // { + // // dispatch.map.setLayerVisible({'BxjcLayer':true}); + // // dispatch.map.setLayerVisible({'SyjcLayer':false}); + // // dispatch.map.setLayerVisible({'SljcLayer':false}); + // // dispatch.map.setLayerVisible({'ByjcLayer':false}); + // setTab('生态') + // }}>生态 + // { + // // dispatch.map.setLayerVisible({'BxjcLayer':false}); + // // dispatch.map.setLayerVisible({'SyjcLayer':true}); + // // dispatch.map.setLayerVisible({'SljcLayer':false}); + // // dispatch.map.setLayerVisible({'ByjcLayer':false}); + // setTab('灌溉发电') + // }}>灌溉发电 + // {/* { + // // dispatch.map.setLayerVisible({'BxjcLayer':false}); + // // dispatch.map.setLayerVisible({'SyjcLayer':false}); + // // dispatch.map.setLayerVisible({'SljcLayer':true}); + // // dispatch.map.setLayerVisible({'ByjcLayer':false}); + // setTab('发电') + // }}>发电 */} + // { + // // dispatch.map.setLayerVisible({'BxjcLayer':false}); + // // dispatch.map.setLayerVisible({'SyjcLayer':false}); + // // dispatch.map.setLayerVisible({'SljcLayer':false}); + // // dispatch.map.setLayerVisible({'ByjcLayer':true}); + // setTab('泄洪') + // }}>泄洪 + // + // + // } > - { +
+
+
+
+
水资源统计
+
+
+
+
+
17197
+
当前蓄水(万m³)
+
+ +
+
1102
+
本年累计来水(万m³)
+
+ +
+
1209
+
本年累计供水(万m³)
+
+
+
+
+
+
+
供水统计分析
+ +
+ { + setTab('生态') + }}>生态 + { + setTab('水厂') + }}>水厂 { + setTab('灌溉') + }}>灌溉 +
+
+
+
+
+ + { + dispatch.runtime.setInfoDlg({ layerId: 'flowjcLayer', properties: { title: tab == '生态' ? '生态流量监测(浮桥河水库生态流量)' : tab == '水厂' ? '水厂流量监测(顺河镇供水监测)' : '灌溉流量监测(西干渠渠首流量监测)', tab } }); + }} /> +
+
+
+ { + tab == '生态' ? + <> +
+
+
0.363 m³/s
+
实时流量({moment().format('YYYY-MM-DD') + ' 09:00'})
+
+
+
371.12 %
+
近30天达标率
+
+
+
0.358 m³/s
+
日平均流量({moment().format('YYYY-MM-DD')})
+
+
+
0.32 m³/s
+
生态流量目标({moment().format('YYYY-MM-DD')})
+
+
+ {/* */} + + + : null + } + { + tab == '水厂' ? +
+
+
+
0.363 m³/s
+
实时流量({moment().format('YYYY-MM-DD') + ' 09:00'})
+
+
+
2213
+
当日累计供水
+
+
+
66390
+
近30天累计供水({moment().format('YYYY-MM-DD')})
+
+
+ +
+ : null + } + { + tab == '灌溉' ? +
+
+
+
0.351 m³/s
+
实时流量({moment().format('YYYY-MM-DD') + ' 09:00'})
+
+
+
3213
+
当日累计供水
+
+
+
96390
+
近30天累计供水({moment().format('YYYY-MM-DD')})
+
+
+ +
+ : null + } +
+
+
+
+
预测来水
+
+
+
+ 未来10天来水量:87.2万m³({moment().format('YYYY-MM-DD')} ~ {moment().add(9, 'day').format('YYYY-MM-DD')}) +
+
+
+
+ {/* { tab==='生态'?
@@ -313,9 +582,9 @@ function DrpReal({ style }) { }
-
+
*/} ) -} - +} + export default DrpReal; diff --git a/src/views/Home/panels/Sksltj/index.less b/src/views/Home/panels/Sksltj/index.less new file mode 100644 index 0000000..b859ee3 --- /dev/null +++ b/src/views/Home/panels/Sksltj/index.less @@ -0,0 +1,57 @@ +.water-source-box { + .source-total { + .source-container { + display: flex; + gap: 16px; + padding: 2px; + + .source-card { + flex: 1; + padding-bottom: 10px; + border-radius: 8px; + color: white; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + min-width: 125px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + } + + .source-value { + font-size: 32px; + font-weight: bold; + margin-bottom: 8px; + } + + .source-label { + font-size: 14px; + opacity: 0.9; + } + } + } +} + +.providerWater-total{ + .button-group { + font-size: 0.8rem; + color: rgb(172, 188, 190); + margin-left: 1rem; + + span { + cursor: pointer; + margin: 0 0.25rem; + display: inline-block; + border: 1px solid #209aec46; + padding: 0.1rem 0.5rem; + border-radius: 0.2rem; + } + + .active { + color: #fff; + cursor: default; + font-weight: bold; + border: 1px solid #209aec9f; + } + } +} \ No newline at end of file diff --git a/src/views/Home/panels/Skyb/index.js b/src/views/Home/panels/Skyb/index.js index 9162bb5..454a184 100644 --- a/src/views/Home/panels/Skyb/index.js +++ b/src/views/Home/panels/Skyb/index.js @@ -12,7 +12,7 @@ function DrpReal({ style }) { return ( diff --git a/src/views/Home/panels/WeatherForcast/WF.js b/src/views/Home/panels/WeatherForcast/WF.js index 5c16552..5004df2 100644 --- a/src/views/Home/panels/WeatherForcast/WF.js +++ b/src/views/Home/panels/WeatherForcast/WF.js @@ -49,7 +49,8 @@ function WF() { }, [contourSetting]); const genWeatherContour24H = () => { - dispatch.runtime.setYyfa({yy:''}) + dispatch.runtime.setYyfa({ yy: '' }) + dispatch.runtime.setXiayouxh(false) dispatch.shyjview.showWeather24h(); const map = window.__mapref if (map) { @@ -58,7 +59,8 @@ function WF() { } const genWeatherContourRadar = () => { - dispatch.runtime.setYyfa({yy:''}) + dispatch.runtime.setYyfa({ yy: '' }) + dispatch.runtime.setXiayouxh(false) dispatch.shyjview.showWeatherRadar(); const map = window.__mapref map.setLayoutProperty('热力图', 'visibility', 'none'); diff --git a/src/views/Home/panels/Yuanyfa/ddfa.js b/src/views/Home/panels/Yuanyfa/ddfa.js new file mode 100644 index 0000000..7eab408 --- /dev/null +++ b/src/views/Home/panels/Yuanyfa/ddfa.js @@ -0,0 +1,131 @@ +import React, { useState,useEffect } from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import { Card, CardContent, Typography, Box } from '@material-ui/core'; +import { useDispatch, useSelector } from 'react-redux'; + +const useStyles = makeStyles({ + cardContainer: { + marginBottom: 16, + }, + card: { + backgroundColor: 'transparent', + color: '#fff', + borderRadius: 8, + border: '1px solid #2a2b2f', + cursor: 'pointer', + transition: 'all 0.3s ease', + '&:hover': { + borderColor: '#4a90e2', + }, + }, + selectedCard: { + borderColor: '#00ff00', + boxShadow: '0 0 10px rgba(0, 255, 0, 0.2)', + }, + title: { + display: 'flex', + alignItems: 'center', + marginBottom: 16, + '& svg': { + marginRight: 8, + fontSize: 16, + }, + }, + content: { + color: '#ccc', + '& p': { + marginBottom: 8, + }, + }, + editIcon: { + marginLeft: 'auto', + color: '#4a90e2', + }, +}); + +const ScheduleCard = ({ data, selected, onClick }) => { + const classes = useStyles(); + + return ( + + + + + 调度方案-{data.date} + {/* + ✎ + */} + +
+ + 初始水位为{data.initialLevel}m,通过开启工作闸门进行提前泄洪,开度最大为 + {data.maxOpening}m,最大下泄流量为{data.maxFlow}m³/s,共持续调控 + {data.duration}小时,期间最高水位为{data.maxLevel}m,未超过校核洪水位 + {data.checkLevel}m,大坝处于安全状态。 + +
+
+
+
+ ); +}; + +// 父组件示例 +const ScheduleList = ({setfayy}) => { + const [selectedCard, setSelectedCard] = useState(null); + + const schedules = [ + { + id: '20250602', + date: '20250602', + initialLevel: 64.0, + maxOpening: 1.2, + maxFlow: 12.42, + duration: 143, + maxLevel: 66.12, + checkLevel: 68.7 + }, + { + id: '20250524', + date: '20250524', + initialLevel: 64.2, + maxOpening: 2.1, + maxFlow: 22.31, + duration: 65, + maxLevel: 67.12, + checkLevel: 68.7 + } + ]; +const [compareList, setCompareList] = useState([]) + const scheduleClick = (schedule) => { + setfayy(); + setSelectedCard(schedule.id) + const findItem = schedules.find(item => item.id == schedule.id); + setCompareList([...compareList,findItem]) + } + const dispatch = useDispatch(); + + useEffect(() => { + const redList = Array.from(new Set(compareList.map(item => item.id))) + dispatch.runtime.setDuibifx(redList) + }, [compareList]) + + return ( +
+ {schedules.map((schedule) => ( + scheduleClick(schedule)} + /> + ))} +
+ ); +}; + +export default ScheduleList; \ No newline at end of file diff --git a/src/views/Home/panels/Yuanyfa/index.js b/src/views/Home/panels/Yuanyfa/index.js index 8f87854..422ecb2 100644 --- a/src/views/Home/panels/Yuanyfa/index.js +++ b/src/views/Home/panels/Yuanyfa/index.js @@ -14,14 +14,54 @@ import Hdyj from './Hdyj'; import Shqx from './Shqx'; import ShYj from './ShYj'; import { styled } from '@material-ui/styles'; - -import { RadioGroup, Radio, Switch, FormControlLabel, InputLabel, Select, MenuItem, FormControl } from '@material-ui/core/index'; -import { backgroundColor } from 'echarts/lib/theme/dark'; +import { makeStyles } from '@material-ui/core/styles'; +import { RadioGroup, Radio, Switch, Box, FormControlLabel, InputLabel, Select, MenuItem, FormControl } from '@material-ui/core/index'; import { Description } from '@material-ui/icons'; import DescriptionItem from '../../components/DescrptionItem'; -import WaterLevelAlert from './WaterLevelAlert' +import WaterLevelAlert from './WaterLevelAlert' +import ScheduleList from './ddfa' +const useStyles = makeStyles({ + cardContainer: { + marginBottom: 16, + }, + card: { + backgroundColor: 'transparent', + color: '#fff', + borderRadius: 8, + border: '1px solid #2a2b2f', + cursor: 'pointer', + transition: 'all 0.3s ease', + '&:hover': { + borderColor: '#4a90e2', + }, + }, + selectedCard: { + borderColor: '#00ff00', + boxShadow: '0 0 10px rgba(0, 255, 0, 0.2)', + }, + title: { + display: 'flex', + alignItems: 'center', + marginBottom: 16, + '& svg': { + marginRight: 8, + fontSize: 16, + }, + }, + content: { + color: '#ccc', + '& p': { + marginBottom: 8, + }, + }, + editIcon: { + color: '#4a90e2', + }, +}); export default function Warn({ style }) { const dispatch = useDispatch(); + const classes = useStyles(); + const res = useSelector(s => s.runtime.yyObj) const [value, setValue] = React.useState(res.yy ?? ''); const [yyValue, setYyValue] = React.useState(false); @@ -66,11 +106,15 @@ export default function Warn({ style }) { }); const [dimension, setDimension] = useState('fqh'); const [checked, setChecked] = React.useState(false); + const xiayou = useSelector(s => s.runtime.xiayouxh); + const fayy = () => { setYyValue(true) - if (value) { - dispatch.runtime.setYyfa({ yy: value }) - } + dispatch.runtime.setYyfa({ yy: true }) + dispatch.runtime.setXiayouxh(true) + + // if (value) { + // } } // useEffect(() => { @@ -105,35 +149,67 @@ export default function Warn({ style }) { } // dispatch.runtime.setYyfa({}) }; - + useEffect(() => { - dispatch.runtime.setDuibifx(selectedSchemes) + dispatch.runtime.setDuibifx(selectedSchemes) }, [selectedSchemes]) - + const productFa = () => { dispatch?.runtime.setInfoDlg({ layerId: 'YuananLayer', properties: {} }) dispatch.runtime.setYyfa({}) - + dispatch.runtime.setXiayouxh(false) } const changeYY = (e) => { setValue(e.target.value) dispatch.runtime.setYyfa({}) } + + const handleFaEdit = () => { + dispatch.runtime.setInfoDlg({ layerId: 'editFaLayer', properties: {} }); + } + + const btgroup = [ + { + name: '水库调度', + key: 'dd', + icon: 'shuikudd1.png', + icon2: 'shuikudd2.png' + }, + { + name: '下游行洪', + key: 'xh', + icon: 'xiayouxh1.png', + icon2: 'xiayouxh2.png' + } + ] + const [view, setView] = useState('dd') + const handleBtnGroup = (row) => { + setView(row.key) + if (row.key == 'dd') { + dispatch.runtime.setYyfa({ yy: true }) + // dispatch.runtime.setXiayouxh(false) + } else { + dispatch.runtime.setYyfa({}) + dispatch.runtime.setXiayouxh(true) + } + } return ( 自动生成方案 - 加载方案 + {yyValue && } + {/* 加载方案 */} +
} >
- + {/* - + */} + {res.yy &&
@@ -169,10 +246,19 @@ export default function Warn({ style }) {
*/}
} - +
-
+ +
+ { + xiayou && btgroup.map(item => ( +
handleBtnGroup(item)} key={item.key}> + +
+ )) + } +
)