lishenfeng
/
tsg-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

qzc修改

qzc-dev-demo
秦子超 2025-03-28 17:31:43 +08:00
parent 4d97627ac1
commit 85dc624c7e
64 changed files with 4421 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -44,6 +44,7 @@
"react-audio-player": "^0.17.0", "react-audio-player": "^0.17.0",
"react-cookies": "^0.1.1", "react-cookies": "^0.1.1",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-draggable": "^4.4.6",
"react-konva": "^18.2.3", "react-konva": "^18.2.3",
"react-org-tree": "^1.0.1", "react-org-tree": "^1.0.1",
"react-pdf": "^7.3.3", "react-pdf": "^7.3.3",
@ -53,6 +54,7 @@
"react-router-dom": "^6.3.0", "react-router-dom": "^6.3.0",
"react-scripts": "5.0.1", "react-scripts": "5.0.1",
"react-window": "^1.8.10", "react-window": "^1.8.10",
"react-zoom-pan-pinch": "^3.7.0",
"redux": "^4.2.0", "redux": "^4.2.0",
"typescript": "^4.7.4" "typescript": "^4.7.4"
}, },

1
public/assets/xyt/fxdd/bzt6.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 482 KiB

BIN
public/assets/xyt/homeImg/turangshangqing.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

6
src/models/auth/_.ts
View File

@ -216,7 +216,9 @@ export async function loadMenu(): Promise<MenuItem[]> {
{ id: id(), title: '水库水情', path: '/mgr/sq/qth/sksq'}, { id: id(), title: '水库水情', path: '/mgr/sq/qth/sksq'},
{ id: id(), title: '河道水情', path: '/mgr/sq/qth/hdsq'}, { id: id(), title: '河道水情', path: '/mgr/sq/qth/hdsq'},
{ id: id(), title: '实时雨情', path: '/mgr/sq/qth/ssyq'}, { id: id(), title: '实时雨情', path: '/mgr/sq/qth/ssyq'},
{ id: id(), title: '大坝安全监测', path: '/mgr/sq/qth/dbaqjc'}, { id: id(), title: '土壤墒情', path: '/mgr/sq/qth/trsq'},
{ id: id(), title: '水库溢洪', path: '/mgr/sq/qth/skyh'},
// { id: id(), title: '大坝安全监测', path: '/mgr/sq/qth/dbaqjc'},
{ id: id(), title: '视频监控', path: '/mgr/sq/qth/spjk'}, { id: id(), title: '视频监控', path: '/mgr/sq/qth/spjk'},
] ]
}, },
@ -412,8 +414,10 @@ export async function loadMenu(): Promise<MenuItem[]> {
{ id: id(), title: '渗压监测', path: '/mgr/gcaqjc/sjtjcx/syjx' }, { id: id(), title: '渗压监测', path: '/mgr/gcaqjc/sjtjcx/syjx' },
{ id: id(), title: '渗流监测 ', path: '/mgr/gcaqjc/sjtjcx/sljx' }, { id: id(), title: '渗流监测 ', path: '/mgr/gcaqjc/sjtjcx/sljx' },
{ id: id(), title: '位移监测 ', path: '/mgr/gcaqjc/sjtjcx/wyjx' }, { id: id(), title: '位移监测 ', path: '/mgr/gcaqjc/sjtjcx/wyjx' },
{ id: id(), title: '人工监测数据录入 ', path: '/mgr/gcaqjc/sjtjcx/sjlr' },
{ id: id(), title: '年度渗压统计表', path: '/mgr/gcaqjc/sjtjcx/ndsytjb' }, { id: id(), title: '年度渗压统计表', path: '/mgr/gcaqjc/sjtjcx/ndsytjb' },
{ id: id(), title: '年度渗流统计表', path: '/mgr/gcaqjc/sjtjcx/ndsltjb' }, { id: id(), title: '年度渗流统计表', path: '/mgr/gcaqjc/sjtjcx/ndsltjb' },
{ id: id(), title: '年度位移统计表', path: '/mgr/gcaqjc/sjtjcx/ndwytjb' },
] ]
}, },
], ],

16
src/service/apiurl.js
View File

@ -93,6 +93,7 @@ const apiurl = {
azd: service_fxdd + '/shpPlacement/getDetailsAndAddvcdDataList',//安置点 azd: service_fxdd + '/shpPlacement/getDetailsAndAddvcdDataList',//安置点
getqsydw: service_fxdd + '/iaCBsnssinfo/getDetailsAndAddvcdDataList',//企事业单位list getqsydw: service_fxdd + '/iaCBsnssinfo/getDetailsAndAddvcdDataList',//企事业单位list
getyhjmh: service_fxdd + '/iaCFlrvvlg/getDetailsAndAddvcdDataList',//沿河居民户list getyhjmh: service_fxdd + '/iaCFlrvvlg/getDetailsAndAddvcdDataList',//沿河居民户list
turangshangqing: '',
wxqdetail: service_fxdd + '/iaCDanad/detail', wxqdetail: service_fxdd + '/iaCDanad/detail',
@ -229,6 +230,21 @@ const apiurl = {
page: service_fxdd + "/osmoticShiftR/year/stat", page: service_fxdd + "/osmoticShiftR/year/stat",
export: service_fxdd + "/osmoticShiftR/year/stat/export", export: service_fxdd + "/osmoticShiftR/year/stat/export",
list1:service_fxdd + "/osmoticShiftR/year/stat/value" list1:service_fxdd + "/osmoticShiftR/year/stat/value"
},
//人工监测数据录入
sjlr:{
syjc:{
save: service_fxdd + "/osmoticPressR/insert",
edit: service_fxdd + "/osmoticPressR/update",
page: service_fxdd + "/osmoticPressR/page",
del: service_fxdd + "/osmoticPressR/del/",
},
wyjc:{
save: service_fxdd + "/osmoticShiftR/insert",
edit: service_fxdd + "/osmoticShiftR/update",
page: service_fxdd + "/osmoticShiftR/page",
del: service_fxdd + "/osmoticShiftR/del/",
}
} }
}, },
// 工程安全分析 // 工程安全分析

1
src/setupProxy.js
View File

@ -9,6 +9,7 @@ module.exports = function (app) {
// target: 'http://192.168.66.199:24105/',//正式 // target: 'http://192.168.66.199:24105/',//正式
// target: 'http://36.139.207.50:18083/',//移动云 // target: 'http://36.139.207.50:18083/',//移动云
// target: 'http://192.168.66.49:24105/',//移动云 // target: 'http://192.168.66.49:24105/',//移动云
// target: 'http://192.168.66.32:24105/',//ls
changeOrigin: true, changeOrigin: true,
}) })
); );

8
src/views/AppRouters.tsx
View File

@ -25,13 +25,14 @@ import Csgl from './fxzb/csgl'
import Qxdw_Gc from './fxzb/qxdw/gc/index.js' import Qxdw_Gc from './fxzb/qxdw/gc/index.js'
import Qxwl_Gc from './fxzb/qxwl/gc' import Qxwl_Gc from './fxzb/qxwl/gc'
// 工程安全监测 // 工程安全监测
import Bzt from './gcaqjc/bzt' import Bzt from './gcaqjc/bzt2'
import Yhyj from "./gcaqjc/gcaqyj/yhyj" import Yhyj from "./gcaqjc/gcaqyj/yhyj"
import Yjgzpz from "./gcaqjc/gcaqyj/yjgzpz" import Yjgzpz from "./gcaqjc/gcaqyj/yjgzpz"
import Sljc from "./gcaqjc/sjtjcx/sljc" import Sljc from "./gcaqjc/sjtjcx/sljc"
import Syjc from "./gcaqjc/sjtjcx/syjc" import Syjc from "./gcaqjc/sjtjcx/syjc"
import Wyjc from "./gcaqjc/sjtjcx/wyjc" import Wyjc from "./gcaqjc/sjtjcx/wyjc"
import Czcx from "./gcaqjc/sjtjcx/czcx" import Czcx from "./gcaqjc/sjtjcx/czcx"
import Sjlr from "./gcaqjc/sjtjcx/sjlr"
import Ndsytjb from "./gcaqjc/sjtjcx/ndsytjb" import Ndsytjb from "./gcaqjc/sjtjcx/ndsytjb"
import Ndsltjb from "./gcaqjc/sjtjcx/ndsltjb" import Ndsltjb from "./gcaqjc/sjtjcx/ndsltjb"
import Ndwytjb from "./gcaqjc/sjtjcx/ndwytjb" import Ndwytjb from "./gcaqjc/sjtjcx/ndwytjb"
@ -92,6 +93,8 @@ import Gcdsj from './sq/qzq/gcdsj'
import Sksq from './sq/qth/sksq' import Sksq from './sq/qth/sksq'
import Hdsq from './sq/qth/hdsq' import Hdsq from './sq/qth/hdsq'
import Ssyq from './sq/qth/ssyq' import Ssyq from './sq/qth/ssyq'
import Trsq from './sq/qth/trsq'
import Skyh from './sq/qth/skyh'
import Qzqda from './sq/qzq/qzqda' import Qzqda from './sq/qzq/qzqda'
// import Zcdjxx from './sq/qys/' // import Zcdjxx from './sq/qys/'
// import Zcdjxx from './sq/qfg/zcdjxx' // import Zcdjxx from './sq/qfg/zcdjxx'
@ -171,6 +174,8 @@ const AppRouters: React.FC = () => {
{ path: 'sq/qth/sksq', element: <Sksq /> }, { path: 'sq/qth/sksq', element: <Sksq /> },
{ path: 'sq/qth/hdsq', element: <Hdsq /> }, { path: 'sq/qth/hdsq', element: <Hdsq /> },
{ path: 'sq/qth/ssyq', element: <Ssyq /> }, { path: 'sq/qth/ssyq', element: <Ssyq /> },
{ path: 'sq/qth/trsq', element: <Trsq /> },
{ path: 'sq/qth/skyh', element: <Skyh /> },
// 预警 // 预警
{ path: 'gcaqjc/gcaqyj/bzt', element: <Bzt isHome={false}/> }, { path: 'gcaqjc/gcaqyj/bzt', element: <Bzt isHome={false}/> },
@ -182,6 +187,7 @@ const AppRouters: React.FC = () => {
{ path: 'gcaqjc/sjtjcx/sljx', element: <Sljc /> }, { path: 'gcaqjc/sjtjcx/sljx', element: <Sljc /> },
{ path: 'gcaqjc/sjtjcx/wyjx', element: <Wyjc /> }, { path: 'gcaqjc/sjtjcx/wyjx', element: <Wyjc /> },
{ path: 'gcaqjc/sjtjcx/czcx', element: <Czcx /> }, { path: 'gcaqjc/sjtjcx/czcx', element: <Czcx /> },
{ path: 'gcaqjc/sjtjcx/sjlr', element: <Sjlr /> },
{ path: 'gcaqjc/sjtjcx/ndsytjb', element: <Ndsytjb /> }, { path: 'gcaqjc/sjtjcx/ndsytjb', element: <Ndsytjb /> },
{ path: 'gcaqjc/sjtjcx/ndsltjb', element: <Ndsltjb /> }, { path: 'gcaqjc/sjtjcx/ndsltjb', element: <Ndsltjb /> },
{ path: 'gcaqjc/sjtjcx/ndwytjb', element: <Ndwytjb /> }, { path: 'gcaqjc/sjtjcx/ndwytjb', element: <Ndwytjb /> },

1
src/views/Home/MapCtrl/Markers/PicStLayer.js
View File

@ -18,7 +18,6 @@ export default class PicStLayer extends BaseLayer {
onAdd() { onAdd() {
PicStMapDataPromise().then((data) => { PicStMapDataPromise().then((data) => {
this._dispatch.runtime.setMarkers({ this._dispatch.runtime.setMarkers({
[this.getLayerName()]: data || [] [this.getLayerName()]: data || []
}); });

71
src/views/Home/MapCtrl/Markers/ShuiKuLayer.js
View File

@ -2,6 +2,75 @@ import { SkRealPromiseWX } from "../../../../models/_/real";
import BaseLayer from "../baselayer"; import BaseLayer from "../baselayer";
import ShuikuMarker from "./ShuikuMarker"; import ShuikuMarker from "./ShuikuMarker";
const sj = {
"stcd": "61610701",
"stnm": "檀树岗2",
"rvnm": "檀树岗河",
"hnnm": "长江中游下段北岸",
"bsnm": "长江",
"lgtd": "114.744317000",
"lttd": "31.505000000",
"stlc": "黄冈市红安县七里镇檀树岗村",
"alt": null,
"mdbz": null,
"mdpr": null,
"dtmnm": "吴淞",
"dtmel": null,
"dtpr": "0.000",
"sttp": "RR",
"dfrtms": null,
"fritm": null,
"frgrd": "3",
"esstym": "197103",
"bgfrym": "197103",
"edfrym": null,
"atcunit": "黄冈市水利和湖泊局",
"admauth": "黄冈水文",
"locality": "湖北水文",
"stbk": null,
"stazt": null,
"dstrvm": null,
"drna": "78",
"phcd": "TSG",
"usfl": "1",
"comments": "中小河流改造",
"moditime": "2022-02-23 00:00:00",
"remGd": null,
"ogid": null,
"vlfl": null,
"atid": null,
"sdfl": null,
"rma": null,
"mdps": null,
"mddt": null,
"stindex": null,
"starea": null,
"stlevel": null,
"code": null,
"ispbj": null,
"issxst": null,
"stpq": null,
"sthday": null,
"source": "SW",
"importancy": 0,
"clgtd": "114.744317000",
"clttd": "31.505000000",
"elev": null,
"crucial": 0,
"buildYear": null,
"adcd": null,
"lyid": null,
"resCode": "42120250085",
"rvCode": null,
"status": 1,
"agreement": null,
"simCard": null,
"bdCard": null,
"v": 104.1
}
export default class ShuiKuLayer extends BaseLayer { export default class ShuiKuLayer extends BaseLayer {
static LayerName = 'ShuiKuLayer'; static LayerName = 'ShuiKuLayer';
@ -25,7 +94,7 @@ export default class ShuiKuLayer extends BaseLayer {
// } // }
// }); // });
// } // }
const list = data.map((i)=>{ const list = [...data,sj].map((i)=>{
return { return {
id : i.stcd, id : i.stcd,
name: i.stnm, name: i.stnm,

69
src/views/Home/MapCtrl/Markers/TuRangLayer.js Normal file
View File

@ -0,0 +1,69 @@
// import clone from "clone";
import { PicStMapDataPromise } from "../../../../models/_/real";
import apiurl from "../../../../service/apiurl";
import { httppost2 } from "../../../../utils/request";
import BaseLayer from "../baselayer";
import TuRangMarker from "./TuRangMarker";
export default class TuRangLayer extends BaseLayer {
static LayerName = 'TuRangLayer';
constructor(props) {
super(props);
this.highlights = {};
}
getLayerName() {
return TuRangLayer.LayerName;
}
async onAdd() {
// const res = await httppost2(apiurl.home.turangshangqing)
const list = [
{
id:'1',
stcd: '10001',
stnm: '水田站',
wd: '53',
tm: '2025-03-19 15:00:00',
lgtd: "114.7684000",
lttd: "31.4941000"
},
{
id:'2',
stcd: '10002',
stnm: '旱田站',
wd: '21',
tm: '2025-03-19 15:00:00',
lgtd: "114.7984000",
lttd: "31.4941000"
},
]
this._dispatch.runtime.setMarkers({
[this.getLayerName()]: list || []
});
}
setSetting(setting) {
const highlights = setting?.highlight?.TuRangLayer;
if (highlights !== this._setting?.highlight?.TuRangLayer) {
const setting = {};
if (highlights) {
for (const h of highlights) {
setting[h] = true
}
}
this._dispatch.map.setMarkerSetting({
[this.getLayerName()]: setting,
});
}
this._setting = setting;
}
getComponentCls() {
return TuRangMarker;
}
}

168
src/views/Home/MapCtrl/Markers/TuRangMarker.js Normal file
View File

File diff suppressed because one or more lines are too long

10
src/views/Home/MapCtrl/Pops/ShenLiu/TableData.js
View File

@ -13,11 +13,11 @@ const Tabledata = ({tableData}) => {
return ( return (
<> <>
<Table rowKey="adcd" <Table rowKey="adcd"
sticky sticky
columns={columns} columns={columns}
pagination={false} pagination={false}
dataSource={tableData} dataSource={tableData}
scroll={{ y: "420px"}} scroll={{ y: "420px"}}
/> />
</> </>
) )

4
src/views/Home/MapCtrl/Pops/ShenLiu/toolbar.js
View File

@ -46,9 +46,9 @@ const ToolBar = ({search, defaultParams}) => {
<Form.Item> <Form.Item>
<Button type="primary" htmlType="submit">查询</Button> <Button type="primary" htmlType="submit">查询</Button>
</Form.Item> </Form.Item>
<Form.Item> {/* <Form.Item>
<Button htmlType="submit">导出</Button> <Button htmlType="submit">导出</Button>
</Form.Item> </Form.Item> */}
</Form> </Form>
</> </>
); );

17
src/views/Home/MapCtrl/Pops/ShuikuPop.js
View File

@ -88,12 +88,17 @@ function ShuikuPop({ id, data, dispatch }) {
<Tabs.TabPane tab="数据查询" key="2"> <Tabs.TabPane tab="数据查询" key="2">
<Sksjcx record={data}/> <Sksjcx record={data}/>
</Tabs.TabPane> </Tabs.TabPane>
<Tabs.TabPane tab="图像监测" key="3"> {
<Txjc record={data}/> data.id!=="61610701"?
</Tabs.TabPane> <>
<Tabs.TabPane tab="视频监测" key="4"> <Tabs.TabPane tab="图像监测" key="3">
<Spjc record={data}/> <Txjc record={data}/>
</Tabs.TabPane> </Tabs.TabPane>
<Tabs.TabPane tab="视频监测" key="4">
<Spjc record={data}/>
</Tabs.TabPane>
</>:null
}
</Tabs> </Tabs>
</div> </div>
</div> </div>

27
src/views/Home/MapCtrl/Pops/TuRang/TableData.js Normal file
View File

@ -0,0 +1,27 @@
import {Table} from 'antd';
import React, {useEffect, useState} from 'react';
import moment from 'moment'
const Tabledata = ({tableData}) => {
const columns = [
{ title: '序号', key: '', dataIndex: '', align: 'center',width:'40px',render:(a,b,c)=>c+1},
{ title: '数据时间', key: 'tm', dataIndex: 'tm', align: 'center',width:'200px',render: (rec) => <span>{rec ?? "-"}</span> },
{ title: '温度', key: '', dataIndex: '', align: 'center',render: (rec) => <span>{rec ?? "-"}</span> },
];
return (
<>
<Table rowKey="adcd"
sticky
columns={columns}
pagination={false}
dataSource={tableData}
scroll={{ y: "420px"}}
/>
</>
)
}
export default Tabledata

173
src/views/Home/MapCtrl/Pops/TuRang/drpOption.js Normal file
View File

@ -0,0 +1,173 @@
export default function drpOption(data,yjData) {
console.log("data",data);
// const maxVal = 0//Math.max(...data.map(obj => obj.drp))
// const max1 = Math.max(...[...data.map(obj => obj.value),...yjData?.map(obj => obj.value)])
// const min1 = Math.min(...[...data.map(obj => obj.value),...yjData?.map(obj => obj.value)])
// const max2 = Math.max(...data.map(obj => obj.rz))
// const min2 = Math.min(...data.map(obj => obj.rz))
// const yj = yjData?.map((item,index)=>{
// return {
// yAxisIndex: 0,
// name: item.yjName,
// type: 'line',
// color: item.color,
// lineStyle: {
// type: "dashed",
// width: 1,
// },
// data: data.map(o => item.value),
// symbol: 'none', // 设置标记点为'none'，即去掉圆点
// smooth: 0.5
// }
// })
return {
tooltip: {
trigger: 'axis',
},
grid: [
{
top: "12%",
left: "10%",
right: "8%",
width: '80%',
height: '75%'
},
],
legend: {
top:'3%',
// 显示图例
show: true,
// 图例的位置
data: ["流量"],
},
xAxis: [
{
type: 'category',
data: data.map(o => o.tm),
inverse: false,
splitLine: {
show: false
},
axisLabel: {
padding: [0, 0, 100, 0],
color: '#333',
fontSize: 12,
formatter: val => val.slice(0,10)
},
axisLine: {
lineStyle: {
color: '#d9d9d9',
width: 1,
}
},
axisTick: {
show: false,
},
}
],
yAxis: [
{
// gridIndex: 1,
type: 'value',
position: 'left',
name: "流量(L/s)",
nameTextStyle: {
padding: [0, 0, 10, 10],
color:'#333333',
fontSize: 14
},
splitLine: {
show: true,
lineStyle: {
color: '#bfbfbf',
width: 0.5,
type: 'dotted'
}
},
axisLabel: {
color: '#333',
fontSize: 12,
},
axisLine: {
show: false
// lineStyle: {
// color: '#8c8c8c',
// width: 1,
// }
},
axisTick: {
show: false,
},
// min: Math.floor(min1*0.8),
// max: Math.ceil(max1*1.2),
},
// {
// // gridIndex: 1,
// type: 'value',
// position: 'right',
// name: "库水位(m)",
// nameTextStyle: {
// padding: [0, 0, 10, 10],
// color:'#333333',
// fontSize: 14
// },
// splitLine: {
// show: false,
// lineStyle: {
// color: '#07a6ff',
// width: 0.25,
// type: 'dotted'
// }
// },
// axisLabel: {
// color: '#333',
// fontSize: 12,
// },
// axisLine: {
// show: false
// // lineStyle: {
// // color: '#8c8c8c',
// // width: 1,
// // }
// },
// axisTick: {
// show: false,
// },
// min: Math.floor(min2*0.8),
// max: Math.ceil(max2*1.2),
// }
],
series: [
{
// xAxisIndex: 1,
// yAxisIndex: 0,
name: '流量',
type: 'line',
color: "#d6eaec",
lineStyle: {
// type: "dashed"
},
data: data.map(o => o.value),
symbol: 'none', // 设置标记点为'none'，即去掉圆点
smooth: 0.5
},
// ...yj
// {
// // xAxisIndex: 1,
// yAxisIndex: 1,
// name: '库水位',
// type: 'line',
// color: "#60a0f8",
// lineStyle: {
// // type: "dashed"
// },
// data: data.map(o => o.rz),
// symbol: 'none', // 设置标记点为'none'，即去掉圆点
// smooth: 0.5
// },
]
};
}

76
src/views/Home/MapCtrl/Pops/TuRang/index.js Normal file
View File

@ -0,0 +1,76 @@
import React, { useEffect, useState, useMemo } from 'react';
import { Descriptions, Form, Button, Input, DatePicker } from 'antd';
import {CloseOutlined} from '@ant-design/icons';
import ReactEcharts from 'echarts-for-react';
import { httppost2 } from '../../../../../utils/request';
import apiurl from '../../../../../service/apiurl';
import moment from "moment"
import ToolBar from './toolbar';
import TableData from './TableData'
import drpOption from './drpOption';
function ShenLiu({ id, data, dispatch, onCancel }) {
console.log(data);
const [ tableData, setTableData ] = useState([])
const option = useMemo(() => drpOption(tableData), [tableData])
const width = 780;
const closePop = () => {
if(onCancel){
onCancel()
}
dispatch.runtime.closeFeaturePop(id);
};
const getData = async(tms,stcd)=>{
// const params = {
// type: 2,
// dateTimeRangeSo: {
// start: moment(tms[0]).format('YYYY-MM-DD HH:mm:ss'),
// end: moment(tms[1]).format('YYYY-MM-DD HH:mm:ss'),
// },
// stcd
// }
// const { code, data} = await httppost2(apiurl.home.syslList,params)
// if(code!==200){
// return
// }
setTableData([])
}
useEffect(()=>{
getData([moment().add(-1,'months'),moment()],data.stcd)
},[])
return (
<>
<div className="normalModalStyle homeModal1">
<div className="normalModalStyle_title">
<div className="normalModalStyle_title_icon"></div>
{data.stnm}
<div className="normalModalStyle_title_cancel">
<CloseOutlined onClick={closePop} style={{color:"#333"}}/>
</div>
</div>
<div style={{padding:'0 20px'}}>
<ToolBar search={(tms)=>getData(tms,data.stationCode)}/>
</div>
<div className='homeModal1_content'>
<div className='homeModal1_content_lf'>
<TableData tableData={tableData}/>
</div>
<div className='homeModal1_content_rf'>
{
tableData.length>0?
<ReactEcharts option={option} style={{width: "100%", height: '100%'}}/>
:<div style={{textAlign: "center", margin: "10%"}}><img src={`${process.env.PUBLIC_URL}/assets/noData.png`} alt=""/></div>
}
</div>
</div>
</div>
</>
)
}
export default React.memo(ShenLiu);

57
src/views/Home/MapCtrl/Pops/TuRang/toolbar.js Normal file
View File

@ -0,0 +1,57 @@
import { Form, message, Button, DatePicker } from 'antd';
import NormalSelect from '../../../../../components/Form/NormalSelect'
import moment from "moment"
const { RangePicker } = DatePicker;
const cysd = [
{ label:'今日',value:'今日',tms:[moment().format('YYYY-MM-DD 00:00:00'),moment().format('YYYY-MM-DD HH:mm:ss')]},
{ label:'近一周',value:'近一周',tms:[moment().add(-7,'days').format('YYYY-MM-DD HH:mm:ss'),moment().format('YYYY-MM-DD HH:mm:ss')]},
{ label:'近一月',value:'近一月',tms:[moment().add(-1,'months').format('YYYY-MM-DD HH:mm:ss'),moment().format('YYYY-MM-DD HH:mm:ss')]},
{ label:'近三月',value:'近三月',tms:[moment().add(-3,'months').format('YYYY-MM-DD HH:mm:ss'),moment().format('YYYY-MM-DD HH:mm:ss')]},
{ label:'近一年',value:'近一年',tms:[moment().add(-1,'years').format('YYYY-MM-DD HH:mm:ss'),moment().format('YYYY-MM-DD HH:mm:ss')]},
]
const ToolBar = ({search, defaultParams}) => {
const [form] = Form.useForm();
const onFinish = (val)=>{
search(val.tms)
}
return (
<>
<Form form={form} className='toolbarBox' layout="inline" onFinish={onFinish}>
<Form.Item label="时间段" name="tms">
<RangePicker
allowClear={false}
defaultValue={[moment().add(-1,'months'),moment()]}
onChange={(e)=>{
form.setFieldValue('cysd',null)
}}
style={{ width: "380px" }}
format="YYYY-MM-DD HH:mm:ss"
/>
</Form.Item>
<Form.Item
label="常用时段"
name='cysd'
>
<NormalSelect options={cysd} style={{ width: '180px' }} onChange={(e,data)=>{
if(e==='今天08:00~当前时间'&& moment().format('HH')<8){
return message.error('请在08:00后选择')
}
form.setFieldValue('tms',[moment(data.tms[0]),moment(data.tms[1])])
}}/>
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">查询</Button>
</Form.Item>
{/* <Form.Item>
<Button htmlType="submit">导出</Button>
</Form.Item> */}
</Form>
</>
);
}
export default ToolBar;

7
src/views/Home/MapCtrl/Pops/index.js
View File

@ -41,6 +41,7 @@ import ShenLiu from './ShenLiu/index.js';
import WeiYi from './WeiYi/index.js'; import WeiYi from './WeiYi/index.js';
import XunJian from './XunJian.js' import XunJian from './XunJian.js'
import DaiChuLi from './DaiChuLi.js' import DaiChuLi from './DaiChuLi.js'
import TuRang from './TuRang'
import YinShuiGongCheng from './YinShuiGongCheng';//这个先不搞 import YinShuiGongCheng from './YinShuiGongCheng';//这个先不搞
@ -88,6 +89,12 @@ function FeaturePops({ mapobj }) {
<PciStPop id={id} data={data} dispatch={dispatch} record={data}/> <PciStPop id={id} data={data} dispatch={dispatch} record={data}/>
</Modal> </Modal>
) )
}else if (type === 'turangshangqing') {
return (
<Modal width={1050} bodyStyle={{padding:0}} title={null} closable={false} footer={null} open={true} onCancel={()=>dispatch.runtime.closeFeaturePop(id)} destroyOnClose={true}>
<TuRang id={id} data={data} dispatch={dispatch} record={data}/>
</Modal>
)
}else if (type === 'hdsw') { }else if (type === 'hdsw') {
// Comp = HdswPop; // Comp = HdswPop;
return ( return (

2
src/views/Home/MapCtrl/layermgr.js
View File

@ -2,6 +2,7 @@ import AdcdLayer from "./Markers/AdcdLayer";
import AdcdAllLayer from "./Markers/AdcdAllLayer"; import AdcdAllLayer from "./Markers/AdcdAllLayer";
import FzdxLayer from "./Markers/FzdxLayer"; import FzdxLayer from "./Markers/FzdxLayer";
import PicStLayer from "./Markers/PicStLayer"; import PicStLayer from "./Markers/PicStLayer";
import TuRangLayer from "./Markers/TuRangLayer"
import HdswLayer from "./Markers/HdswLayer"; import HdswLayer from "./Markers/HdswLayer";
import XjHdswLayer from "./Markers/XjHdswLayer"; import XjHdswLayer from "./Markers/XjHdswLayer";
import XxjyswzLayer from "./Markers/XxjyswzLayer"; import XxjyswzLayer from "./Markers/XxjyswzLayer";
@ -90,6 +91,7 @@ export default class LayerMgr {
HeLiuZhuJiLayer, HeLiuZhuJiLayer,
// FzdxLayer, // FzdxLayer,
PicStLayer, PicStLayer,
TuRangLayer,
// XjHdswLayer, // XjHdswLayer,
// SmallSkRiskLayer, RhbjqLayer, XjRealDrpLayer, WarnLayer, ForecastLayer, RadarLayer, XxjyswzLayer // SmallSkRiskLayer, RhbjqLayer, XjRealDrpLayer, WarnLayer, ForecastLayer, RadarLayer, XxjyswzLayer
]; ];

2
src/views/Home/TuLi/Tuli6.js
View File

@ -12,7 +12,7 @@ export default function TuLi() {
return ( return (
<div className='homePage_tuli'> <div className='homePage_tuli'>
<div className='homePage_tuli_title'>雨量</div> <div className='homePage_tuli_title'>图例</div>
<div className='homePage_tuli_row'> <div className='homePage_tuli_row'>
<div className='homePage_tuli_row_text1' style={{width:'40%',marginTop:'-2px'}}> <div className='homePage_tuli_row_text1' style={{width:'40%',marginTop:'-2px'}}>
<img width={20} height={20} src={`${process.env.PUBLIC_URL}/assets/xyt/fxdd/dm.png`} alt="" /> <img width={20} height={20} src={`${process.env.PUBLIC_URL}/assets/xyt/fxdd/dm.png`} alt="" />

27
src/views/Home/homePanelsLayoutPage/index.js
View File

@ -6,6 +6,7 @@ import './index.less'
import Yujing from './item_yujing/index.js' import Yujing from './item_yujing/index.js'
import Yuqing from './item_yuqing' import Yuqing from './item_yuqing'
import ShuiKu from './item_shuiku' import ShuiKu from './item_shuiku'
import TuRangShangQing from './item_turangshangqing'
import GongShui from './item_gongshui' import GongShui from './item_gongshui'
import GongCheng from './item_gongcheng' import GongCheng from './item_gongcheng'
import JianCe from './item_jiance' import JianCe from './item_jiance'
@ -22,7 +23,7 @@ import AnZhiDian from './item_anzhidian'
import QSYDW from './item_qishiyedanwei' import QSYDW from './item_qishiyedanwei'
import YHJMH from './item_yanhejuminhu' import YHJMH from './item_yanhejuminhu'
import SetWxqStation from '../setMapStation/wxq' import SetWxqStation from '../setMapStation/wxq'
import Bzt from '../../gcaqjc/bzt' import Bzt from '../../gcaqjc/bzt2'
import Tuli from '../TuLi/Tuli.js' import Tuli from '../TuLi/Tuli.js'
import Tuli2 from '../TuLi/Tuli2.js'; import Tuli2 from '../TuLi/Tuli2.js';
@ -41,17 +42,13 @@ const items = [
{ key:'1', label:'综合监视', children:[ { key:'1', label:'综合监视', children:[
{ key:'11', label:'预警', labelRight:'预警', icon:'yujing' }, { key:'11', label:'预警', labelRight:'预警', icon:'yujing' },
{ key:'12', label:'雨情', labelRight:'统计', icon:'yuqing' }, { key:'12', label:'雨情', labelRight:'统计', icon:'yuqing' },
{ key:'13', label:'水情', labelRight:'实时水情', icon:'shuikushuiqing' }, { key:'13', label:'水库水情', labelRight:'实时水情', icon:'shuikushuiqing' },
{ key:'19', label:'土壤墒情', labelRight:'土壤墒情', icon:'turangshangqing' },
{ key:'15', label:'工程安全', labelRight:'工程安全监测', icon:'gongchenganquan' }, { key:'15', label:'工程安全', labelRight:'工程安全监测', icon:'gongchenganquan' },
{ key:'16', label:'监测设备状态', labelRight:'监测设备运行', icon:'jianceshebeizhuangtai' }, { key:'16', label:'监测设备状态', labelRight:'监测设备运行', icon:'jianceshebeizhuangtai' },
{ key:'17', label:'水质', labelRight:'水质', icon:'shuizhi' }, // { key:'17', label:'水质', labelRight:'水质', icon:'shuizhi' },
{ key:'18', label:'视频点', labelRight:'视频点', icon:'shipindian' }, { key:'18', label:'视频点', labelRight:'视频点', icon:'shipindian' },
] }, ] },
// { key:'2', label:'水库工程', children:[
// { key:'21', label:'水库', labelRight:'基本信息', icon:'shuiku' },
// { key:'22', label:'大坝', labelRight:'基本信息', icon:'daba' },
// { key:'23', label:'溢洪道', labelRight:'基本信息', icon:'yihongdao' },
// ] },
{ key:'2', label:'巡查巡检', children:[ { key:'2', label:'巡查巡检', children:[
{ key:'21', label:'巡查巡检', labelRight:'工程巡检', icon:'jianceshebeizhuangtai' }, { key:'21', label:'巡查巡检', labelRight:'工程巡检', icon:'jianceshebeizhuangtai' },
// { key:'22', label:'大坝', labelRight:'基本信息', icon:'daba' }, // { key:'22', label:'大坝', labelRight:'基本信息', icon:'daba' },
@ -66,6 +63,11 @@ const items = [
{ key:'4', label:'水资源调度', children:[ { key:'4', label:'水资源调度', children:[
{ key:'41', label:'供水', labelRight:'今日供水实况', icon:'gongshui' }, { key:'41', label:'供水', labelRight:'今日供水实况', icon:'gongshui' },
] }, ] },
{ key:'5', label:'水库工程', children:[
{ key:'51', label:'水库', labelRight:'基本信息', icon:'shuiku' },
{ key:'52', label:'大坝', labelRight:'基本信息', icon:'daba' },
{ key:'53', label:'溢洪道', labelRight:'基本信息', icon:'yihongdao' },
] },
] ]
@ -139,6 +141,8 @@ const HomePage = ({showPanels}) => {
setCheckedObj({ key:'31', label:'危险区', labelRight:'危险区列表', icon:'weixianqu' }) setCheckedObj({ key:'31', label:'危险区', labelRight:'危险区列表', icon:'weixianqu' })
}else if(a==='4'){ }else if(a==='4'){
setCheckedObj({ key:'41', label:'供水', labelRight:'今日供水实况', icon:'gongshui' }) setCheckedObj({ key:'41', label:'供水', labelRight:'今日供水实况', icon:'gongshui' })
}else if(a==='5'){
setCheckedObj({ key:'51', label:'水库', labelRight:'基本信息', icon:'shuiku' })
}else{ }else{
} }
}} expandIconPosition="end" accordion={true} bordered={false}> }} expandIconPosition="end" accordion={true} bordered={false}>
@ -200,11 +204,12 @@ const HomePage = ({showPanels}) => {
} }
{ checkedObj.label === '预警' ? <><Yujing mySetTms={setTms}/><Yuqing mySetTms={setTms} show={false}/></>:null } { checkedObj.label === '预警' ? <><Yujing mySetTms={setTms}/><Yuqing mySetTms={setTms} show={false}/></>:null }
{ checkedObj.label === '雨情' ? <Yuqing mySetTms={setTms} show={showTable}/>:null } { checkedObj.label === '雨情' ? <Yuqing mySetTms={setTms} show={showTable}/>:null }
{ checkedObj.label === '水情' ? <ShuiKu/>:null } { checkedObj.label === '水库水情' ? <ShuiKu/>:null }
{ checkedObj.label === '土壤墒情' ? <TuRangShangQing/>:null }
{ checkedObj.label === '供水' ? <GongShui/>:null } { checkedObj.label === '供水' ? <GongShui/>:null }
{ checkedObj.label === '工程安全' ? <GongCheng/>:null } { checkedObj.label === '工程安全' ? <GongCheng/>:null }
{ checkedObj.label === '监测设备状态' ? <JianCe/>:null } { checkedObj.label === '监测设备状态' ? <JianCe/>:null }
{ checkedObj.label === '水质' ? <ShuiZhi/>:null } {/* { checkedObj.label === '水质' ? <ShuiZhi/>:null } */}
{ checkedObj.label === '视频点' ? <ShiPinDian/>:null } { checkedObj.label === '视频点' ? <ShiPinDian/>:null }
{ checkedObj.label === '巡查巡检' ? <XunChaXunJian/>:null } { checkedObj.label === '巡查巡检' ? <XunChaXunJian/>:null }
@ -231,7 +236,7 @@ const HomePage = ({showPanels}) => {
<div className='homePage_leftBottomBox'> <div className='homePage_leftBottomBox'>
{ checkedObj.label==='雨情'?<Tuli/>:null } { checkedObj.label==='雨情'?<Tuli/>:null }
{ checkedObj.label==='水情'?<Tuli2/>:null } { checkedObj.label==='水库水情'?<Tuli2/>:null }
{ checkedObj.label==='供水'?<Tuli3/>:null } { checkedObj.label==='供水'?<Tuli3/>:null }
{ (checkedObj.label==='水库'||checkedObj.label==='大坝'||checkedObj.label==='溢洪道'||checkedObj.label==='视频点')?<Tuli4/>:null } { (checkedObj.label==='水库'||checkedObj.label==='大坝'||checkedObj.label==='溢洪道'||checkedObj.label==='视频点')?<Tuli4/>:null }
{ (checkedObj.label==='危险区'||checkedObj.label==='安置点'||checkedObj.label==='企事业单位'||checkedObj.label==='沿河居民户')?<Tuli5/>:null } { (checkedObj.label==='危险区'||checkedObj.label==='安置点'||checkedObj.label==='企事业单位'||checkedObj.label==='沿河居民户')?<Tuli5/>:null }

8
src/views/Home/homePanelsLayoutPage/item_daba.js
View File

@ -80,7 +80,7 @@ const Page = () => {
<div>蓄水日期:</div> <div>蓄水日期:</div>
<div>{tableData?.storageDate?.slice(0,10)}</div> <div>{tableData?.storageDate?.slice(0,10)}</div>
</dit> </dit>
<dit className='home_shuizhi_item2'> {/* <dit className='home_shuizhi_item2'>
<div>图片资料</div> <div>图片资料</div>
<div></div> <div></div>
</dit> </dit>
@ -118,12 +118,12 @@ const Page = () => {
} }
}} }}
/> />
</div> </div> */}
{/* */} {/* */}
<dit className='home_shuizhi_item2'> {/* <dit className='home_shuizhi_item2'>
<div>视频资料:</div> <div>视频资料:</div>
<div></div> <div></div>
</dit> </dit> */}
</div> </div>
</> </>
) )

2
src/views/Home/homePanelsLayoutPage/item_gongchengshuiku.js
View File

@ -98,7 +98,7 @@ const Page = () => {
<div>工程特性表:</div> <div>工程特性表:</div>
<div style={{color:'#007AFDB3',cursor:'pointer'}} onClick={()=>setOpen(true)}>工程特性表详情</div> <div style={{color:'#007AFDB3',cursor:'pointer'}} onClick={()=>setOpen(true)}>工程特性表详情</div>
</dit> </dit>
<div style={{width:'100%',color:'#007AFDB3',fontWeight:500,cursor:'pointer',marginTop:'10px',textAlign:'center'}}>更多详情</div> {/* <div style={{width:'100%',color:'#007AFDB3',fontWeight:500,cursor:'pointer',marginTop:'10px',textAlign:'center'}}>更多详情</div> */}
</div> </div>

2
src/views/Home/homePanelsLayoutPage/item_gongshui.js
View File

@ -43,7 +43,7 @@ const Page = () => {
<div className="home_gongshui_item"> <div className="home_gongshui_item">
<div className="home_gongshui_item_title"> <div className="home_gongshui_item_title">
<img width={50} src={`${process.env.PUBLIC_URL}/assets/xyt/homeImg/gongshui2.png`} alt=""/> <img width={50} src={`${process.env.PUBLIC_URL}/assets/xyt/homeImg/gongshui2.png`} alt=""/>
灌溉发电 灌溉用水
</div> </div>
<div className="home_gongshui_item_text" style={{display:'flex',flexDirection:'column'}}> <div className="home_gongshui_item_text" style={{display:'flex',flexDirection:'column'}}>
<div style={{display:'flex'}}> <div style={{display:'flex'}}>

116
src/views/Home/homePanelsLayoutPage/item_shuiku.js
View File

@ -4,10 +4,79 @@ import {reservoirlist, reswarn} from "../../../service/sssq"
import { SkRealPromiseWX } from "../../../models/_/real"; import { SkRealPromiseWX } from "../../../models/_/real";
import genDamImage from '../../../components/DamGraph/DamImage' import genDamImage from '../../../components/DamGraph/DamImage'
import MyImg from './myImg' import MyImg from './myImg'
import Ykqk from './item_shuiku/yhqk'
const sj = {
"stcd": "61610701",
"stnm": "檀树岗2",
"rvnm": "檀树岗河",
"hnnm": "长江中游下段北岸",
"bsnm": "长江",
"lgtd": "114.744317000",
"lttd": "31.505000000",
"stlc": "黄冈市红安县七里镇檀树岗村",
"alt": null,
"mdbz": null,
"mdpr": null,
"dtmnm": "吴淞",
"dtmel": null,
"dtpr": "0.000",
"sttp": "RR",
"dfrtms": null,
"fritm": null,
"frgrd": "3",
"esstym": "197103",
"bgfrym": "197103",
"edfrym": null,
"atcunit": "黄冈市水利和湖泊局",
"admauth": "黄冈水文",
"locality": "湖北水文",
"stbk": null,
"stazt": null,
"dstrvm": null,
"drna": "78",
"phcd": "TSG",
"usfl": "1",
"comments": "中小河流改造",
"moditime": "2022-02-23 00:00:00",
"remGd": null,
"ogid": null,
"vlfl": null,
"atid": null,
"sdfl": null,
"rma": null,
"mdps": null,
"mddt": null,
"stindex": null,
"starea": null,
"stlevel": null,
"code": null,
"ispbj": null,
"issxst": null,
"stpq": null,
"sthday": null,
"source": "SW",
"importancy": 0,
"clgtd": "114.744317000",
"clttd": "31.505000000",
"elev": null,
"crucial": 0,
"buildYear": null,
"adcd": null,
"lyid": null,
"resCode": "42120250085",
"rvCode": null,
"status": 1,
"agreement": null,
"simCard": null,
"bdCard": null,
"v": 104.1
}
const Page = () => { const Page = () => {
const dispatch = useDispatch(); const dispatch = useDispatch();
const [ checked, setChecked ] = useState(0)
const [data,setData] = useState([]) const [data,setData] = useState([])
console.log('aaa',data); console.log('aaa',data);
useEffect(()=>{ useEffect(()=>{
@ -21,21 +90,21 @@ const Page = () => {
},[]) },[])
const getData = async (params) => { const getData = async (params) => {
setData(await reservoirlist(params)) const data1 = await reservoirlist(params)
const data2 = [...data1,sj]
setData(data2)
} }
const getShuiKu = ()=>{ const getShuiKu = ()=>{
SkRealPromiseWX.get().then((res) => { SkRealPromiseWX.get().then((res) => {
const list = res.map((i)=>{ const list = [...res,sj].map((i)=>{
return { return {
id : i.stcd, id : i.stcd,
name: i.stnm, name: i.stnm,
...i ...i
} }
}) })
const data = list[0] const data = list[checked]
dispatch.runtime.setFeaturePop({ dispatch.runtime.setFeaturePop({
id: data.id, id: data.id,
type: 'shuiku', type: 'shuiku',
@ -46,21 +115,36 @@ const Page = () => {
}) })
}); });
} }
return ( return (
<> <>
<div> <div className="home_yuqing">
{ <div className="home_yuqing_header" style={{marginBottom:'10px'}}>
data ? ( {
<MyImg record={{...data[0]}}/> data.map((item,index)=>
) : ( <div style={{width:'50%'}}><div style={{width:'90%'}} className={checked===index?'home_yuqing_header_item avtive':'home_yuqing_header_item'} onClick={()=>setChecked(index)}>{item.stnm}</div></div>
<div className="noPic">暂无数据</div> )
) }
} </div>
<div style={{position:'absolute',right:'14px',top:'15px',color:'#409EFF',cursor:'pointer',fontWeight:'500'}} onClick={getShuiKu}>详情</div> {
</div> data ? (
<MyImg record={{...data[checked]}}/>
) : (
<div className="noPic">暂无数据</div>
)
}
<div style={{position:'absolute',right:'14px',top:'15px',color:'#409EFF',cursor:'pointer',fontWeight:'500'}} onClick={getShuiKu}>详情</div>
</div>
<div className='homePage_head2' style={{marginTop:'10px'}}>
<div className='homePage_head2_Bg'>
<img src={`${process.env.PUBLIC_URL}/assets/xyt/homeImg/titleBg2.png`} width="14" height="14" alt="" style={{margin:'0 10px'}} />
溢洪情况
</div>
</div>
<Ykqk/>
</> </>
) )
} }

106
src/views/Home/homePanelsLayoutPage/item_shuiku/drpOption.js Normal file
View File

@ -0,0 +1,106 @@
import echarts from 'echarts/lib/echarts';
export default function drpOption({data}) {
let arr =[]
data.forEach(item=>{
arr.push([item.w,item.rz])
})
return {
title: {
// text: "库容曲线图",
left: "40%",
},
legend: {
top:'3%',
// 显示图例
show: false,
// 图例的位置
data: ["溢洪流量"],
},
tooltip: {
trigger: 'axis',
},
grid: [
{
top: "20%",
left: "10%",
right: "5%",
bottom: "10%"
},
],
xAxis: [
{
// name: "流量m³/s",
nameGap: 0,
type: 'category',
data: data.map(o => o.bgtm),
splitLine: {
show: false
},
axisLabel: {
color: '#8c8c8c',
fontSize: 12,
formatter: val => val.slice(11,16)
},
axisLine: {
lineStyle: {
color: '#8c8c8c',
width: 0.5,
}
},
axisTick: {
show: false,
},
}
],
yAxis: [
{
type: 'value',
name: "流量m³/s",
nameTextStyle: {
padding: [0, 0, 5, -10],
color:'#8c8c8c',
fontSize: 12
},
splitLine: {
show: true,
lineStyle: {
color: '#cacaca',
width: 1,
type: 'dotted'
}
},
axisLabel: {
color: '#8c8c8c',
fontSize: 12,
formatter: val => val
},
axisLine: {
show: false
},
axisTick: {
show: false,
},
}
],
series: [
{
type: 'line',
name: '溢洪流量',
color: "#7699f3",
data: data.map(o => o.q),
// symbol: 'none' // 设置标记点为'none'，即去掉圆点
symbolSize:8,
areaStyle: {
// 开启阴影
shadowColor: 'rgba(0, 0, 0, 0.1)', // 阴影颜色
shadowBlur: 10, // 阴影的模糊大小
shadowOffsetX: 5, // 阴影水平方向上的偏移
shadowOffsetY: 5, // 阴影垂直方向上的偏移
opacity: 0.5 // 区域颜色的透明度
},
},
]
};
}

49
src/views/Home/homePanelsLayoutPage/item_shuiku/yhqk.js Normal file
View File

@ -0,0 +1,49 @@
import { useEffect, useState, useMemo } from "react"
import {useDispatch, useSelector} from "react-redux";
import {Descriptions} from "antd";
import ReactEcharts from 'echarts-for-react';
import drpOption from './drpOption'
import { httppost2 } from "../../../../utils/request";
import apiurl from "../../../../service/apiurl";
const Page = () => {
const [data,setData] = useState([])
const option = useMemo(() => {
return drpOption({data});
}, [data])
useEffect(()=>{
(async()=>{
const {data,code} = await httppost2(apiurl.dataResourcesCenter.projectAndWater.xl.list,{stcd:'61610700'})
if(code!==200){
return
}
setData(data)
})()
},[])
return (
<>
<div style={{width:'100%',height:'240px'}}>
<ReactEcharts
option={option}
style={{width: "100%", height: '100%'}}
/>
</div>
<div style={{padding:'15px 0px 10px 15px'}}>
<Descriptions column={2}>
<Descriptions.Item labelStyle={{color:"#8c8c8c"}} label="实时水位">{103.89}m</Descriptions.Item>
<Descriptions.Item labelStyle={{color:"#70B603"}} label="转换溢洪流量">{0.20}m³/s</Descriptions.Item>
<Descriptions.Item labelStyle={{color:"#8c8c8c"}} label="近24h溢洪量">{8.67}万m³</Descriptions.Item>
<Descriptions.Item labelStyle={{color:"#8c8c8c"}} label="采集时间">{'06-24 09:30'}</Descriptions.Item>
</Descriptions>
</div>
</>
)
}
export default Page

95
src/views/Home/homePanelsLayoutPage/item_turangshangqing.js Normal file
View File

@ -0,0 +1,95 @@
import { useEffect, useState } from "react"
import {useDispatch, useSelector} from "react-redux";
import { Table, Modal, message } from 'antd';
import { httppost2 } from '../../../utils/request';
import apiurl from '../../../service/apiurl';
const Page = () => {
const dispatch = useDispatch();
const [ tableData, setTableData ] = useState([])//在线
const columns = [
{ title: '站点', key: 'stnm', dataIndex: 'stnm',align: "center",width:80, ellipsis: true, },
{ title: '温度', key: 'wd', dataIndex: 'wd',align: "center",width:80, ellipsis: true, },
{ title: '监测时间', key: 'tm', dataIndex: 'tm',align: "center",width: 150, ellipsis: true },
];
useEffect(()=>{
dispatch.map.setLayerVisible({ TuRangLayer: true })
getData()
return ()=>{
dispatch.map.setLayerVisible({ TuRangLayer: false })
}
},[])
const getData = async()=>{
// const { code, data} = await httppost2(apiurl.home.turangshangqing)
// if(code!==200){
// return
// }
const list = [
{
id:'1',
stcd: '10001',
stnm: '水田站',
wd: '53',
tm: '2025-03-19 15:00:00',
lgtd: "114.7684000",
lttd: "31.4941000"
},
{
id:'2',
stcd: '10002',
stnm: '旱田站',
wd: '21',
tm: '2025-03-19 15:00:00',
lgtd: "114.7984000",
lttd: "31.4941000"
},
]
setTableData(list)
}
return (
<>
<div className="home_yuqing">
<div className="ant-card-body" style={{padding:"10px"}}>
<Table rowKey="stationCode"
sticky
columns={columns}
pagination={false}
dataSource={tableData}
scroll={{ y: "300px"}}
onRow={
(row)=>({
onClick:()=>{
// dispatch.runtime.setCameraTarget({
// center: [row.lgtd, row.lttd],
// zoom: 13,
// pitch: 60
// })
dispatch.runtime.setFeaturePop({
id: row.id,
data:{...row},
type: 'turangshangqing',
lgtd: row.lgtd,
lttd: row.lttd,
})
}
})
}
/>
</div>
</div>
</>
)
}
export default Page

2
src/views/Home/homePanelsLayoutPage/myImg.js
View File

@ -25,7 +25,7 @@ const MyImg = ({ record }) => {
return ( return (
<div style={{ <div style={{
flexGrow: 1, flexGrow: 1,
height: '33vh', height: '300px',
overflow: 'hidden', overflow: 'hidden',
position: 'relative', position: 'relative',
backgroundColor: "#eff3f6", backgroundColor: "#eff3f6",

283
src/views/gcaqjc/bzt2/index.js Normal file
View File

@ -0,0 +1,283 @@
import React, { useState, useEffect,useMemo,useRef } from 'react'
import { Table, Tabs,Modal,message,Tooltip } from 'antd';
import { useDispatch, useSelector } from 'react-redux'
import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
import Draggable from 'react-draggable';
import { httpget, httpget2, httppost2 } from '../../../utils/request';
import apiurl from '../../../service/apiurl';
import ShenYa from '../../Home/MapCtrl/Pops/ShenYa/index';
import ShenLiu from '../../Home/MapCtrl/Pops/ShenLiu/index.js';
import WeiYi from '../../Home/MapCtrl/Pops/WeiYi/index.js';
import DuanMian from '../../Home/MapCtrl/Pops/DuanMian/index.js';
import TuLi from '../../Home/TuLi/Tuli6.js';
import './index.less'
export default function Page({isHome}) {
const dispatch = useDispatch();
const [shouqi,setShouQi] = useState(false)
const [syList,setSyList] = useState([])
const [slList,setSlList] = useState([])
const [wyList,setWyList] = useState([])
const [dmList,setDmList] = useState([])
const [openSy, setOpenSy] = useState(false)
const [openSl, setOpenSl] = useState(false)
const [openWy, setOpenWy] = useState(false)
const [openDm, setOpenDm] = useState(false)
const [modalData, setModalData] = useState({})
const columnsSy = [
{ title: '监测点', key: 'stationCode', dataIndex: 'stationCode',align: "center", ellipsis: true },
{ title: '所属断面', key: 'profileName', dataIndex: 'profileName',width: 110,align: "center", ellipsis: true },
{ title: '监测时间', key: 'tm', dataIndex: 'tm',align: "center",width: 110, ellipsis: true, render:(v,row)=><div style={{color:row.flag===1?'red':'#3B4859'}}>{v?.slice(5,16)}</div> },
{ title: '管水位(m)', key: 'value', dataIndex: 'value',align: "center", ellipsis: true, render:(v,row)=><div style={{color:row.status===1?'red':'#3B4859'}}>{v}</div> },
]
const columnsSl = [
{ title: '监测点', key: 'stationCode', dataIndex: 'stationCode',align: "center", ellipsis: true },
{ title: '监测时间', key: 'tm', dataIndex: 'tm',align: "center",width: 150, ellipsis: true, render:(v,row)=><div style={{color:row.flag===1?'red':'#3B4859'}}>{v?.slice(5,16)}</div> },
{ title: '渗流量(L/s)', key: 'value', dataIndex: 'value',align: "center", ellipsis: true, render:(v,row)=><div style={{color:row.status===1?'red':'#3B4859'}}>{v}</div> },
]
const columnsWy = [
{ title: '监测点', key: 'stationCode', dataIndex: 'stationCode',align: "center",width: 80, ellipsis: true },
{ title: '监测时间', key: 'tm', dataIndex: 'tm',align: "center",width: 80, ellipsis: true, render:(v,row)=><div style={{color:row.flag===1?'red':'#3B4859'}}><div>{v?.slice(5,10)}</div><div>{v?.slice(11,16)}</div></div> },
{ title: <div><div>X方向</div><div>(mm)</div></div>, key: 'x', dataIndex: 'x',align: "center", ellipsis: true, render:(v,row)=><div style={{color:row.xstatus===1?'red':'#3B4859'}}>{v}</div> },
{ title: <div><div>Y方向</div><div>(mm)</div></div>, key: 'y', dataIndex: 'y',align: "center", ellipsis: true, render:(v,row)=><div style={{color:row.ystatus===1?'red':'#3B4859'}}>{v}</div> },
{ title: <div><div>H方向</div><div>(mm)</div></div>, key: 'h', dataIndex: 'h',align: "center", ellipsis: true, render:(v,row)=><div style={{color:row.hstatus===1?'red':'#3B4859'}}>{v}</div> },
]
useEffect(()=>{
getSyData()
getSlData()
getWyData()
getDmData()
},[])
const getSyData = async()=>{
const {code, data} = await httpget2(apiurl.home.sy)
const list = []
const c = ['01','04','07','16','10','13','02','05','08','17','11','14','03','06','09','12','15','24','26','28','25','27','29','18','19','20','21','22','23']
.map((i)=>{
list.push({
"stationCode": "SY"+i,
"profileName": "B0+250",
"tm": "2024-10-10 08:00:00",
"value": 195.3,
"flag": 1,
"status": 0
})
})
if(code!==200){
return
}
setSyList(list)
}
const getSlData = async()=>{
const {code, data} = await httpget2(apiurl.home.sl)
if(code!==200){
return
}
const list = [{
"stationCode": "SL01",
"profileName": null,
"tm": "2024-10-27 08:00:00",
"value": 1.18,
"flag": 1,
"status": 0
}]
setSlList(list)
}
const getWyData = async()=>{
const {code, data} = await httpget2(apiurl.home.wy)
if(code!==200){
return
}
const list = []
for(let a=1; a<33; a++){
list.push({
"stationCode": "WY"+(a<10?('0'+a):a),
"tm": "2024-10-15 08:00:00",
"flag": 1,
"x": -0.09,
"y": 0.1,
"h": 0.12,
"xstatus": 0,
"ystatus": 0,
"hstatus": 0
})
}
for(let b=1; b<37; b++){
list.push({
"stationCode": "ZY"+(b<10?('0'+b):b),
"tm": "2024-10-15 08:00:00",
"flag": 1,
"x": -0.09,
"y": 0.1,
"h": 0.12,
"xstatus": 0,
"ystatus": 0,
"hstatus": 0
})
}
setWyList(list)
}
const getDmData = async()=>{
const {code, data} = await httppost2(apiurl.home.dmList)
if(code!==200){
return
}
console.log('断面',data)
setDmList(data)
}
return (
<div className='gcaqjc_bzt'>
<TransformWrapper
limitToBounds={false}
initialScale={1}
initialPositionX={isHome?-220:-450}
initialPositionY={isHome?10:20}
maxScale={100}
minScale={0.5}
>
<TransformComponent>
<div style={{width:'calc( 100vw - 320px)',height:'calc( 100vh - 85px)',position:'relative'}}>
<img width={1500} src={`${process.env.PUBLIC_URL}/assets/xyt/fxdd/bzt6.svg`} alt="" id="img" draggable="false" />
{
syList.map((item)=>
<div className={'gcaqjc_bzt_sy_'+item.stationCode} onClick={()=>{
setOpenSy(true)
setModalData(item)
}}>
<span>{item.stationCode}</span>
<img width={10} height={10} style={{marginTop:'-4px'}} src={`${process.env.PUBLIC_URL}/assets/xyt/fxdd/${item.status===1?'sy2.png':'sy.png'}`} alt="" id="img" draggable="false" />
</div>
)
}
{/* {
slList.map((item)=>
<div className={'gcaqjc_bzt_sl_'+item.stationCode} onClick={()=>{
setOpenSl(true)
setModalData(item)
}}>
<span>{item.stationCode}</span>
<img width={10} height={10} style={{marginTop:'-4px'}} src={`${process.env.PUBLIC_URL}/assets/xyt/fxdd/${item.status===1?'sl2.png':'sl.png'}`} alt="" id="img" draggable="false" />
</div>
)
} */}
{
wyList.map((item)=>
<div
className={'gcaqjc_bzt_wy_'+item.stationCode}
onClick={()=>{
setOpenWy(true)
setModalData(item)
}}
>
<span>{item.stationCode}</span>
<img width={10} height={10} style={{marginTop:'-4px'}} src={`${process.env.PUBLIC_URL}/assets/xyt/fxdd/${(item.xstatus===1||item.ystatus===1||item.hstatus===1)?'wy2.png':'wy.png'}`} alt="" id="img" draggable="false" />
</div>
)
}
</div>
</TransformComponent>
</TransformWrapper>
{
!isHome?
<div className='gcaqjc_bzt_rightBox' style={{right:shouqi?'-404px':'4px'}}>
<Tabs defaultActiveKey="1" style={{padding:'0 5px 5px 5px'}} centered>
<Tabs.TabPane tab={<div style={{fontSize:'16px',fontWeight:500,padding:'0 15px'}}>渗压监测</div>} key="1">
<div className='gcaqjc_bzt_rightBox_table'>
<Table rowKey="stationCode"
sticky
columns={columnsSy}
pagination={false}
dataSource={syList}
scroll={{ y: "650px"}}
onRow={
(data)=>({
onClick:()=>{
setOpenSy(true)
setModalData(data)
}
})
}
/>
</div>
</Tabs.TabPane>
<Tabs.TabPane tab={<div style={{fontSize:'16px',fontWeight:500,padding:'0 15px'}}>渗流监测</div>} key="2">
<div className='gcaqjc_bzt_rightBox_table'>
<Table rowKey="stationCode"
sticky
columns={columnsSl}
pagination={false}
dataSource={slList}
scroll={{ y: "650px"}}
onRow={
(data)=>({
onClick:()=>{
setOpenSl(true)
setModalData(data)
}
})
}
/>
</div>
</Tabs.TabPane>
<Tabs.TabPane tab={<div style={{fontSize:'16px',fontWeight:500,padding:'0 15px'}}>位移监测</div>} key="3">
<div className='gcaqjc_bzt_rightBox_table'>
<Table rowKey="stationCode"
sticky
columns={columnsWy}
pagination={false}
dataSource={wyList}
scroll={{ y: "650px"}}
onRow={
(data)=>({
onClick:()=>{
setOpenWy(true)
setModalData(data)
}
})
}
/>
</div>
</Tabs.TabPane>
</Tabs>
<div className='gcaqjc_bzt_rightBox_Btn'>
<img src={`${process.env.PUBLIC_URL}/assets/xyt/fxdd/shouqi.png`} alt="" onClick={()=>setShouQi(!shouqi)}/>
</div>
</div>:null
}
{/* <div style={{position:'absolute',left:'30px',top:'calc( 100vh - 300px )'}}>
<TuLi/>
</div> */}
<Modal width={1000} wrapClassName='home_modal' bodyStyle={{padding:0}} title={null} closable={false} footer={null} open={openSy} onCancel={()=>setOpenSy(false)} destroyOnClose={true}>
<ShenYa id={modalData.stationCode} data={modalData} dispatch={dispatch} record={modalData} onCancel={()=>setOpenSy(false)}/>
</Modal>
<Modal width={1000} wrapClassName='home_modal' bodyStyle={{padding:0}} title={null} closable={false} footer={null} open={openSl} onCancel={()=>setOpenSl(false)} destroyOnClose={true}>
<ShenLiu id={modalData.stationCode} data={modalData} dispatch={dispatch} record={modalData} onCancel={()=>setOpenSl(false)}/>
</Modal>
<Modal width={1000} wrapClassName='home_modal' bodyStyle={{padding:0}} title={null} closable={false} footer={null} open={openWy} onCancel={()=>setOpenWy(false)} destroyOnClose={true}>
<WeiYi id={modalData.stationCode} data={modalData} dispatch={dispatch} record={modalData} onCancel={()=>setOpenWy(false)}/>
</Modal>
<Modal width={1000} wrapClassName='home_modal' bodyStyle={{padding:0}} title={null} closable={false} footer={null} open={openDm} onCancel={()=>setOpenDm(false)} destroyOnClose={true}>
<DuanMian id={modalData.profileCode} data={modalData} dispatch={dispatch} record={modalData} onCancel={()=>setOpenDm(false)}/>
</Modal>
</div>
)
}

674
src/views/gcaqjc/bzt2/index.less Normal file
View File

@ -0,0 +1,674 @@
.gcaqjc_bzt{
width: 100%;
height: 100%;
background-color: #ffffff;
overflow: hidden;
position: relative;
.gcaqjc_bzt_wrapperClass{
width: '100%';
}
.imgBox {
position: relative;
width: 1200px;
height: 800px;
border: 2px solid red;
overflow: hidden;
}
.imgBox img {
position: absolute;
width: 100%;
height: 100%;
cursor: pointer;
}
.gcaqjc_bzt_rightBox{
width: 400px;
background: #f5f7fa;
position: absolute;
right: 4px;
top: 30px;
border-radius: 5px;
border: 1px solid #eee;
.ant-tabs-nav{
margin-bottom: 5px;
}
.gcaqjc_bzt_rightBox_table{
width: 100%;
min-height: 750px;
background: #ffffff;
border: 1px solid #eee;
.ant-table-thead{
th{
height: 40px !important;
background-color: #e2edfd !important;
}
}
.ant-table-tbody{
.ant-table-measure-row{
td{
padding: 0 !important;
}
}
tr:nth-child(odd) {
td{
background-color: #f5f8fe !important;
}
}
}
}
}
.gcaqjc_bzt_rightBox_Btn{
position: absolute;
left: -25px;
top: 45%;
cursor: pointer;
}
[class*="gcaqjc_bzt_sy"]{
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
font-size: 10px;
color: #00c188;
cursor: pointer;
left: 0;
top: 0;
span{
transform: scaleX(0.8);
letter-spacing: -0.8px;
font-weight: 700;
font-size: 6px;
margin-bottom: 1px;
text-shadow:
0.3px 0.3px 0.3px white, /* 白色内描边 */
-0.3px -0.3px 0.3px white, /* 白色内描边 */
0px 0px 1px white; /* 黑色外描边 */
}
img{
transform: scale(0.8);
}
}
[class*="gcaqjc_bzt_sl"]{
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
font-size: 10px;
color: #00c188;
cursor: pointer;
left: 0;
top: 0;
span{
transform: scaleX(0.8);
letter-spacing: -0.8px;
font-weight: 700;
font-size: 6px;
margin-bottom: 1px;
text-shadow:
0.3px 0.3px 0.3px white, /* 白色内描边 */
-0.3px -0.3px 0.3px white, /* 白色内描边 */
0px 0px 1px white; /* 黑色外描边 */
}
img{
transform: scale(0.8);
}
}
[class*="gcaqjc_bzt_wy"]{
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
color: #00c188;
cursor: pointer;
left: 0;
top: 0;
span{
transform: scaleX(0.8);
letter-spacing: -0.8px;
font-weight: 700;
font-size: 6px;
margin-bottom: 1px;
text-shadow:
0.3px 0.3px 0.3px white, /* 白色内描边 */
-0.3px -0.3px 0.3px white, /* 白色内描边 */
0px 0px 1px white; /* 黑色外描边 */
}
img{
transform: scale(0.8);
}
}
[class*="gcaqjc_bzt_dm"]{
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
color: #00c188;
font-size: 10px;
cursor: pointer;
left: 0;
top: 0;
}
.gcaqjc_bzt_sy_SY01{
left: 971px;
top: 883px;
}
.gcaqjc_bzt_sy_SY02{
left: 986px;
top: 663px;
}
.gcaqjc_bzt_sy_SY03{
left: 973.5px;
top: 432px;
}
.gcaqjc_bzt_sy_SY04{
left: 994px;
top: 884px;
}
.gcaqjc_bzt_sy_SY05{
left: 1006px;
top: 663px;
}
.gcaqjc_bzt_sy_SY06{
left: 998px;
top: 430px;
}
.gcaqjc_bzt_sy_SY07{
left: 1034px;
top: 886px;
}
.gcaqjc_bzt_sy_SY08{
left: 1051px;
top: 668px;
}
.gcaqjc_bzt_sy_SY09{
left: 1037px;
top: 441px;
}
.gcaqjc_bzt_sy_SY10{
left: 994px;
top: 872px;
}
.gcaqjc_bzt_sy_SY11{
left: 1007px;
top: 650px;
}
.gcaqjc_bzt_sy_SY12{
left: 998px;
top: 442px;
}
.gcaqjc_bzt_sy_SY13{
left: 1035px;
top: 874px;
}
.gcaqjc_bzt_sy_SY14{
left: 1052px;
top: 656px;
}
.gcaqjc_bzt_sy_SY15{
left: 1037px;
top: 429px;
}
.gcaqjc_bzt_sy_SY16{
left: 1109px;
top: 884px;
}
.gcaqjc_bzt_sy_SY17{
left: 1126px;
top: 668px;
}
.gcaqjc_bzt_sy_SY18{
left: 645px;
top: 1230px;
}
.gcaqjc_bzt_sy_SY19{
left: 632px;
top: 1234px;
}
.gcaqjc_bzt_sy_SY20{
left: 677px;
top: 1316px;
}
.gcaqjc_bzt_sy_SY21{
left: 665px;
top: 1320px;
}
.gcaqjc_bzt_sy_SY22{
left: 710px;
top: 1401px;
}
.gcaqjc_bzt_sy_SY23{
left: 697px;
top: 1406px;
}
.gcaqjc_bzt_sy_SY24{
left: 51px;
top: 1478px;
}
.gcaqjc_bzt_sy_SY25{
left: 18px;
top: 1469px;
}
.gcaqjc_bzt_sy_SY26{
left: 46px;
top: 1491px;
}
.gcaqjc_bzt_sy_SY27{
left: 14px;
top: 1481px;
}
.gcaqjc_bzt_sy_SY28{
left: 37px;
top: 1500px;
}
.gcaqjc_bzt_sy_SY29{
left: 5px;
top: 1490px;
}
.gcaqjc_bzt_wy_WY01{
left: 961px;
top: 1003px;
}
.gcaqjc_bzt_wy_WY02{
left: 971px;
top: 872px;
}
.gcaqjc_bzt_wy_WY03{
left: 979px;
top: 764px;
}
.gcaqjc_bzt_wy_WY04{
left: 986px;
top: 650px;
}
.gcaqjc_bzt_wy_WY05{
left: 981px;
top: 547px;
}
.gcaqjc_bzt_wy_WY06{
left: 973px;
top: 443px;
}
.gcaqjc_bzt_wy_WY07{
left: 965px;
top: 327px;
}
.gcaqjc_bzt_wy_WY08{
left: 974px;
top: 1004px;
}
.gcaqjc_bzt_wy_WY09{
left: 983px;
top: 876px;
}
.gcaqjc_bzt_wy_WY10{
left: 992px;
top: 766px;
}
.gcaqjc_bzt_wy_WY11{
left: 996px;
top: 656px;
}
.gcaqjc_bzt_wy_WY12{
left: 993px;
top: 546px;
}
.gcaqjc_bzt_wy_WY13{
left: 986px;
top: 436px;
}
.gcaqjc_bzt_wy_WY14{
left: 978px;
top: 325.5px;
}
.gcaqjc_bzt_wy_WY15{
left: 1031px;
top: 1009px;
}
.gcaqjc_bzt_wy_WY16{
left: 1045px;
top: 879px;
}
.gcaqjc_bzt_wy_WY17{
left: 1049px;
top: 771px;
}
.gcaqjc_bzt_wy_WY18{
left: 1061px;
top: 663px;
}
.gcaqjc_bzt_wy_WY19{
left: 1050px;
top: 543px;
}
.gcaqjc_bzt_wy_WY20{
left: 1045px;
top: 434px;
}
.gcaqjc_bzt_wy_WY21{
left: 1037px;
top: 322px;
}
.gcaqjc_bzt_wy_WY22{
left: 1070px;
top: 1012px;
}
.gcaqjc_bzt_wy_WY23{
left: 1079px;
top: 882px;
}
.gcaqjc_bzt_wy_WY24{
left: 1088px;
top: 774px;
}
.gcaqjc_bzt_wy_WY25{
left: 1091px;
top: 666px;
}
.gcaqjc_bzt_wy_WY26{
left: 1088px;
top: 542px;
}
.gcaqjc_bzt_wy_WY27{
left: 1081px;
top: 432.5px;
}
.gcaqjc_bzt_wy_WY28{
left: 1040px;
top: 20px;
}
.gcaqjc_bzt_wy_WY29{
left: 974px;
top: 95px;
}
.gcaqjc_bzt_wy_WY30{
left: 1057px;
top: 34px;
}
.gcaqjc_bzt_wy_WY31{
left: 991px;
top: 111px;
}
.gcaqjc_bzt_wy_WY32{
left: 660px;
top: 1266px;
}
.gcaqjc_bzt_wy_ZY01{
left: 55px;
top: 1465px;
}
.gcaqjc_bzt_wy_ZY02{
left: 23px;
top: 1455px;
}
.gcaqjc_bzt_wy_ZY03{
left: 48px;
top: 1503px;
}
.gcaqjc_bzt_wy_ZY04{
left: 16px;
top: 1493px;
}
.gcaqjc_bzt_wy_ZY05{
left: 1080px;
top: 67px;
}
.gcaqjc_bzt_wy_ZY06{
left: 1104px;
top: 98px;
}
.gcaqjc_bzt_wy_ZY07{
left: 1128px;
top: 129px;
}
.gcaqjc_bzt_wy_ZY08{
left: 1151px;
top: 158px;
}
.gcaqjc_bzt_wy_ZY09{
left: 1176px;
top: 185px;
}
.gcaqjc_bzt_wy_ZY10{
left: 1203px;
top: 208px;
}
.gcaqjc_bzt_wy_ZY11{
left: 1233px;
top: 234px;
}
.gcaqjc_bzt_wy_ZY12{
left: 1259px;
top: 255px;
}
.gcaqjc_bzt_wy_ZY13{
left: 1288px;
top: 281px;
}
.gcaqjc_bzt_wy_ZY14{
left: 1314px;
top: 304px;
}
.gcaqjc_bzt_wy_ZY15{
left: 1344px;
top: 328px;
}
.gcaqjc_bzt_wy_ZY16{
left: 1026px;
top: 133px;
}
.gcaqjc_bzt_wy_ZY17{
left: 1058px;
top: 153px;
}
.gcaqjc_bzt_wy_ZY18{
left: 1092px;
top: 172px;
}
.gcaqjc_bzt_wy_ZY19{
left: 1124px;
top: 192px;
}
.gcaqjc_bzt_wy_ZY20{
left: 1152px;
top: 213px;
}
.gcaqjc_bzt_wy_ZY21{
left: 1181px;
top: 234px;
}
.gcaqjc_bzt_wy_ZY22{
left: 1210px;
top: 259px;
}
.gcaqjc_bzt_wy_ZY23{
left: 1237px;
top: 283px;
}
.gcaqjc_bzt_wy_ZY24{
left: 1266px;
top: 308px;
}
.gcaqjc_bzt_wy_ZY25{
left: 1292px;
top: 330px;
}
.gcaqjc_bzt_wy_ZY26{
left: 1320px;
top: 354px;
}
.gcaqjc_bzt_wy_ZY27{
left: 1213px;
top: 198px;
}
.gcaqjc_bzt_wy_ZY28{
left: 1242px;
top: 224px;
}
.gcaqjc_bzt_wy_ZY29{
left: 1268px;
top: 245px;
}
.gcaqjc_bzt_wy_ZY30{
left: 1297px;
top: 271px;
}
.gcaqjc_bzt_wy_ZY31{
left: 1324px;
top: 293px;
}
.gcaqjc_bzt_wy_ZY32{
left: 1251px;
top: 213px;
}
.gcaqjc_bzt_wy_ZY33{
left: 1277px;
top: 234px;
}
.gcaqjc_bzt_wy_ZY34{
left: 1307px;
top: 259px;
}
.gcaqjc_bzt_wy_ZY35{
left: 1261px;
top: 202px;
}
.gcaqjc_bzt_wy_ZY36{
left: 1289px;
top: 219px;
}
// .gcaqjc_bzt_sl_SL01{
// left: 479px;
// top: 594px;
// }
// .gcaqjc_bzt_sl_SL02{
// left: 679px;
// top: 594px;
// }
// .gcaqjc_bzt_wy_WY-G100{
// left: 394px;
// top: 376px;
// }
// .gcaqjc_bzt_wy_WY-G101{
// left: 594px;
// top: 376px;
// }
// .gcaqjc_bzt_dm_DM0234205820000010{
// left: 655px;
// top: 379px;
// }
// .gcaqjc_bzt_dm_DM0234205820000011{
// left: 555px;
// top: 379px;
// }
// .gcaqjc_bzt_dm_DM0234205820000012{
// left: 455px;
// top: 379px;
// }
// .gcaqjc_bzt_dm_DM0234205820000013{
// left: 1003px;
// top: 379px;
// }
// .gcaqjc_bzt_dm_DM0234205820000014{
// left: 42px;
// top: 379px;
// }
}

34
src/views/gcaqjc/sjtjcx/ndwytjb/index.js
View File

@ -6,6 +6,7 @@ import apiurl from '../../../../service/apiurl';
import { exportFile } from '../../../../utils/tools.js'; import { exportFile } from '../../../../utils/tools.js';
import { httppost2,httppost5 } from '../../../../utils/request'; import { httppost2,httppost5 } from '../../../../utils/request';
import "./index.less" import "./index.less"
import MyTable from './table'
const Page = () => { const Page = () => {
const role = useSelector(state => state.auth.role); const role = useSelector(state => state.auth.role);
@ -16,10 +17,10 @@ const Page = () => {
const [loading, setLoading] = useState(false) const [loading, setLoading] = useState(false)
const wyList = ["X","Y","H"] const wyList = ["X","Y","H"]
const columns1 = [ const columns1 = [
{ title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align:"center" }, { title: '序号', key: 'inx', dataIndex: 'inx', width: 150, align:"center"},
]; ];
const columns2 = [ const columns2 = [
{ title: '监测日期', key: 'tm', dataIndex: 'tm', width: 150, align:"center" }, { title: '监测日期', key: 'tm', dataIndex: 'tm', width: 250, align:"center" },
]; ];
@ -95,9 +96,10 @@ const Page = () => {
const width = useMemo(() => { const width = useMemo(() => {
if (newCols?.length > 0) { if (newCols?.length > 0) {
return newCols?.reduce((total, cur) => total + (cur.width), 0) return newCols?.reduce((total, cur) => total + (cur.width), 0)
} }
}, [newCols]); }, [newCols]);
console.log('width',width);
const exportExcel = () => { const exportExcel = () => {
let params = { let params = {
...searchVal, ...searchVal,
@ -112,7 +114,17 @@ const Page = () => {
const getTable2Data = async (params) => { const getTable2Data = async (params) => {
try { try {
const res = await httppost2(apiurl.gcaqjc.sjtjcx.ndwytjb.list1, params) const res = await httppost2(apiurl.gcaqjc.sjtjcx.ndwytjb.list1, params)
setTable2Data(res.data) const list = []
for(let i=0; i<24*3; i++){
list.push({
maxValue:'',
maxTm:'',
minValue:'',
minTm:'',
diff:'',
})
}
setTable2Data(list)
} catch (error) { } catch (error) {
console.log(error); console.log(error);
} }
@ -154,7 +166,7 @@ const Page = () => {
/> />
</Card> </Card>
<div className="ant-card-body" style={{ padding: "20px 0 0 0" }}> <div className="ant-card-body" style={{ padding: "20px 0 0 0" }}>
<Table {/* <Table
columns={newCols} columns={newCols}
rowKey="inx" rowKey="inx"
loading={loading} loading={loading}
@ -197,7 +209,17 @@ const Page = () => {
</Table.Summary> </Table.Summary>
) )
}} }}
/> /> */}
{
(newCols?.length>0 && width!==undefined)?
<MyTable
columns={newCols}
dataSource={dataSource}
width={width}
loading={loading}
table2Data={table2Data}
/>:null
}
</div> </div>
</div> </div>
</div> </div>

158
src/views/gcaqjc/sjtjcx/ndwytjb/table.js Normal file
View File

@ -0,0 +1,158 @@
import { Table } from 'antd';
import classNames from 'classnames';
import ResizeObserver from 'rc-resize-observer';
import React, { useEffect, useRef, useState } from 'react';
import { VariableSizeGrid as Grid } from 'react-window';
const VirtualTable = (props) => {
const { columns, scroll, table2Data } = props;
const [tableWidth, setTableWidth] = useState(0);
const widthColumnCount = columns.filter(({ width }) => !width).length;
const mergedColumns = columns.map((column) => {
if (column.width) {
return column;
}
return {
...column,
width: Math.floor(tableWidth / widthColumnCount),
};
});
const gridRef = useRef();
const [connectObject] = useState(() => {
const obj = {};
Object.defineProperty(obj, 'scrollLeft', {
get: () => {
if (gridRef.current) {
return gridRef.current?.state?.scrollLeft;
}
return null;
},
set: (scrollLeft) => {
if (gridRef.current) {
gridRef.current.scrollTo({
scrollLeft,
});
}
},
});
return obj;
});
const resetVirtualGrid = () => {
gridRef.current?.resetAfterIndices({
columnIndex: 0,
shouldForceUpdate: true,
});
};
useEffect(() => resetVirtualGrid, [tableWidth]);
const renderVirtualList = (rawData, { scrollbarSize, ref, onScroll }) => {
ref.current = connectObject;
const totalHeight = rawData.length * 54;
return (
<Grid
ref={gridRef}
className="virtual-grid"
columnCount={mergedColumns.length}
columnWidth={(index) => {
const { width } = mergedColumns[index];
let myWidth = width
if(mergedColumns[index]?.children?.length>0){
myWidth = width*(mergedColumns[index]?.children?.length)
}
return totalHeight > scroll.y && index === mergedColumns.length - 1
? myWidth - scrollbarSize - 1
: myWidth;
}}
height={scroll.y}
rowCount={rawData.length}
rowHeight={() => 54}
width={tableWidth}
onScroll={({ scrollLeft }) => {
onScroll({
scrollLeft,
});
}}
>
{({ columnIndex, rowIndex, style }) => {
return (
<div
className={classNames('virtual-table-cell', {
'virtual-table-cell-last': columnIndex === mergedColumns.length - 1,
})}
style={{...style,textAlign:'center'}}
>
{rawData[rowIndex][mergedColumns[columnIndex].dataIndex]}
</div>
)
}}
</Grid>
);
};
return (
<ResizeObserver
onResize={({ width }) => {
setTableWidth(width);
}}
>
<Table
{...props}
className="virtual-table"
columns={mergedColumns}
pagination={false}
components={{
body: renderVirtualList,
}}
summary={(pageData) => {
return(
<Table.Summary fixed>
<Table.Summary.Row>
<Table.Summary.Cell index={0} align='center' ></Table.Summary.Cell>
<Table.Summary.Cell index={1} align='center'>最大值</Table.Summary.Cell>
{table2Data?.length > 0 && table2Data.map((item,i) =>
<Table.Summary.Cell index={i +1} align='center'>{item?.maxValue ?? "-"}</Table.Summary.Cell>)}
</Table.Summary.Row>
<Table.Summary.Row>
<Table.Summary.Cell index={0} align='center' ></Table.Summary.Cell>
<Table.Summary.Cell index={1} align='center'>日期</Table.Summary.Cell>
{table2Data?.length > 0 && table2Data.map((item,i) =>
<Table.Summary.Cell index={i +1} align='center'>{item?.maxTm?? "-"}</Table.Summary.Cell>)}
</Table.Summary.Row>
<Table.Summary.Row >
<Table.Summary.Cell index={0} align='center' className='total-col'>全年度特征值统计</Table.Summary.Cell>
<Table.Summary.Cell index={1} align='center'>最小值</Table.Summary.Cell>
{table2Data?.length > 0 && table2Data.map((item,i) =>
<Table.Summary.Cell index={i +1} align='center'>{item?.minValue ?? "-"}</Table.Summary.Cell>)}
</Table.Summary.Row>
<Table.Summary.Row>
<Table.Summary.Cell index={0} align='center' ></Table.Summary.Cell>
<Table.Summary.Cell index={1} align='center'>日期</Table.Summary.Cell>
{table2Data?.length > 0 && table2Data.map((item,i) =>
<Table.Summary.Cell index={i +1} align='center'>{item?.minTm?? "-"}</Table.Summary.Cell>)}
</Table.Summary.Row>
<Table.Summary.Row>
<Table.Summary.Cell index={0} align='center' ></Table.Summary.Cell>
<Table.Summary.Cell index={1} align='center'>年变幅</Table.Summary.Cell>
{table2Data?.length > 0 && table2Data.map((item,i) =>
<Table.Summary.Cell index={i +1} align='center'>{item?.diff?? "-"}</Table.Summary.Cell>)}
</Table.Summary.Row>
</Table.Summary>
)
}}
/>
</ResizeObserver>
);
};
const App = ({columns,dataSource,width,loading,table2Data}) => (
<VirtualTable
columns={columns}
dataSource={dataSource}
rowKey="inx"
loading={loading}
table2Data={table2Data}
pagination={false}
scroll={{
y: 450,
x: 8000,
}}
/>
);
export default App;

25
src/views/gcaqjc/sjtjcx/sjlr/index.js Normal file
View File

@ -0,0 +1,25 @@
import React, { Fragment, useRef, useMemo,useEffect,useState } from 'react';
import { Table, Card,Modal,Form,Input,Button,Row,Col,Tabs } from 'antd';
import SyPage from './sy'
import WyPage from './wy'
const Page = () => {
const [tab,setTab] = useState('1')
return (
<>
<div className='content-root clearFloat xybm' style={{paddingRight:"0",paddingBottom:"0",paddingTop:'0'}}>
<Tabs onChange={(e)=>setTab(e)}>
<Tabs.TabPane tab='渗压监测' key='1'>
</Tabs.TabPane>
<Tabs.TabPane tab='位移监测' key='2'>
</Tabs.TabPane>
</Tabs>
{ tab==='1'?<SyPage/>:null }
{ tab==='2'?<WyPage/>:null }
</div>
</>
);
}
export default Page;

173
src/views/gcaqjc/sjtjcx/sjlr/sy/form.js Normal file
View File

@ -0,0 +1,173 @@
import React,{useEffect,useState,useMemo} from 'react';
import { Form, Button, Input, Row, Col, DatePicker, Upload,message,Image,Modal,Radio, InputNumber } from 'antd';
import { formItemLayout, btnItemLayout } from '../../../../../components/crud/FormLayoutProps';
import apiurl from '../../../../../service/apiurl';
import NormalSelect from '../../../../../components/Form/NormalSelect';
import { httppost2 } from '../../../../../utils/request';
import moment from 'moment';
const ModalForm = ({ mode, record,onEdit,onSave,onSimilarSave }) => {
console.log("record",record);
const [form] = Form.useForm();
const [dmList, setDmList] = useState([])
const [codeList, setCodeList] = useState([])
const [dmCode,setDmCode] = useState('')
const onFinish = (values) => {
if (mode === 'edit') {
onEdit(apiurl.gcaqjc.sjtjcx.sjlr.syjc.edit,{...record,...values})
}
if (mode === 'save') {
onSave(apiurl.gcaqjc.sjtjcx.sjlr.syjc.save,values)
}
}
const getDmList = async () => {
try {
const res = await httppost2(apiurl.gcaqjc.sjtjcx.sycx.list)
setDmList(res.data.map(s=>({label:s.profileName,value:s.profileCode})));
} catch (error) {
console.log(error);
}
}
const getStationCode = async () => {
try {
const res = await httppost2(apiurl.gcaqjc.gcaqyj.yjgzpz.list)
setCodeList(res.data.map(s=>({label:s.stationCode,value:s.stationCode,profileCode:s.profileCode})));
} catch (error) {
console.log(error);
}
}
useEffect(()=>{
getDmList()
getStationCode()
}, [])
return (
<>
<Form
form={form}
{...formItemLayout}
onFinish={onFinish}
initialValues={record}
>
<Row>
<Col span={12}>
<Form.Item
label="监测时间"
name="tm"
getValueFromEvent={(e,dateString) => dateString}
getValueProps={(value) => ({ value: value ? moment(value) : undefined })}
rules={[{required: true}]}
>
<DatePicker disabled={mode==='view'||mode==='edit'} format={'YYYY-MM-DD HH:mm:ss'} style={{width:'100%'}} allowClear showTime />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label="监测断面"
name="profileCode"
rules={[{ required: true }]}
>
<NormalSelect
disabled={mode==='view'||mode==='edit'}
allowClear
style={{ width: "100%" }}
options={dmList}
onChange={(v)=>{
form.setFieldValue('stationCode',null)
setDmCode(v)
}}
/>
</Form.Item>
</Col>
</Row>
<Row>
<Col span={12}>
<Form.Item
label="测点编号"
rules={[{ required: true }]}
name="stationCode"
>
<NormalSelect
disabled={mode==='view'||mode==='edit'}
allowClear
style={{ width: "100%" }}
options={codeList.filter(o=>dmCode?o.profileCode===dmCode:true)}
/>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label="通道号"
rules={[{ required: true }]}
name="chan"
>
<InputNumber disabled={mode==='view'} style={{width:'100%'}} allowClear />
</Form.Item>
</Col>
</Row>
<Row>
<Col span={12}>
<Form.Item
label="测压管水位(m)"
name="value"
>
<InputNumber disabled={mode==='view'} style={{width:'100%'}} allowClear />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label="渗压(KPa)"
name="press"
>
<InputNumber disabled={mode==='view'} style={{width:'100%'}} allowClear />
</Form.Item>
</Col>
</Row>
<Row>
<Col span={12}>
<Form.Item
label="振弦(Hz)"
name="vib"
>
<InputNumber disabled={mode==='view'} style={{width:'100%'}} allowClear />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label="温度(℃)"
name="temp"
>
<InputNumber disabled={mode==='view'} style={{width:'100%'}} allowClear />
</Form.Item>
</Col>
</Row>
{
mode==='view'?null:(
<>
<Form.Item {...btnItemLayout}>
<Button type="primary" htmlType="submit">
{mode === 'save' ? '保存' :
mode === "similarSave" ? "保存" :
'修改'}
</Button>
</Form.Item>
</>
)
}
</Form>
</>
);
}
export default ModalForm;

94
src/views/gcaqjc/sjtjcx/sjlr/sy/index.js Normal file
View File

@ -0,0 +1,94 @@
import React, { Fragment, useRef, useMemo,useEffect,useState } from 'react';
import BasicCrudModal from '../../../../../components/crud/BasicCrudModal';
import { Table, Card,Modal,Form,Input,Button,Row,Col,message } from 'antd';
import ModalForm from './form';
import ToolBar from './toolbar';
import { useSelector } from 'react-redux';
import apiurl from '../../../../../service/apiurl';
import usePageTable from '../../../../../components/crud/usePageTable2';
import { createCrudService } from '../../../../../components/crud/_';
import {CrudOpRender_text} from '../../../../../components/crud/CrudOpRender';
import "./index.less"
const Page = () => {
const role = useSelector(state => state.auth.role);
const editBtn = role?.rule?.find(item => item.menuName == "编辑")||true;
const viewBtn = role?.rule?.find(item => item.menuName == "查看")||true;
const delBtn = role?.rule?.find(item => item.menuName == "删除")||true;
const refModal = useRef();
const [searchVal, setSearchVal] = useState(false)
const columns = [
{ title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align:"center" },
{ title: '监测时间', key: 'tm', dataIndex: 'tm', align:"center", },
{ title: '监测断面', key: 'profileName', dataIndex: 'profileName', align:"center", },
{ title: '测点编号', key: 'stationCode', dataIndex: 'stationCode', align:"center", },
{ title: '测压管水位(m)', key: 'value', dataIndex: 'value', align:"center", },
{ title: '渗压(KPa)', key: 'press', dataIndex: 'press', align:"center", },
{ title: '振弦(Hz)', key: 'vib', dataIndex: 'vib', align:"center", },
{ title: '温度(℃)', key: 'temp', dataIndex: 'temp', align:"center", },
{
title: '操作', key: 'operation', width: 240, fixed: 'right',align: 'center',
render: (value, row, index) => (
<CrudOpRender_text
edit={editBtn ? true : false}
del={delBtn ? true : false}
view={viewBtn ? true : false}
command={(cmd) => () => command(cmd)(row)} />)
},
];
const width = useMemo(() => columns.reduce((total, cur) => total + (cur.width), 0), [columns]);
const command = (type) => (params) => {
if (type === 'save') {
refModal.current.showSave();
} else if (type === 'edit') {
refModal.current.showEdit({ ...params });
} else if (type === 'view') {
refModal.current.showView(params);
} else if (type === 'del') {
const url = apiurl.gcaqjc.sjtjcx.sjlr.syjc.del + params.stationCode+'/'+params.tm
refModal.current.onDeleteGet(url);
}
}
const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.gcaqjc.sjtjcx.sjlr.syjc.page).find_noCode);
useEffect(()=>{
const params = {
search: {
...searchVal,
}
};
search(params)
}, [searchVal])
return (
<>
<div className='lf CrudAdcdTreeTableBox' style={{ width: "100%" }}>
<Card className='nonebox'>
<ToolBar
setSearchVal={setSearchVal}
onSave={command('save')}
role={role}
/>
</Card>
<div className="ant-card-body" style={{padding:"20px 0 0 0"}}>
<Table columns={columns} rowKey="inx" {...tableProps} scroll={{ x: width , y: "calc( 100vh - 400px )"}}/>
</div>
</div>
<BasicCrudModal
width={1000}
ref={refModal}
title="渗压监测记录"
component={ModalForm}
onCrudSuccess={refresh}
/>
</>
);
}
export default Page;

29
src/views/gcaqjc/sjtjcx/sjlr/sy/index.less Normal file
View File

@ -0,0 +1,29 @@
.basic-info{
position: relative;
font-size: 16px;
margin-bottom: 20px;
padding:5px 25px;
border-bottom: 1px solid #eee;
&::before{
position: absolute;
top:8px;
left:0;
content: "";
display: block;
width: 5px;
height: 20px;
background-color: #0079fe;
}
}
.first-card,.second-card{
color: #fff;
padding:15px 120px;
border-radius: 10px;
}
.first-card{
background-color: #e9df1e;
}
.second-card{
background-color: #d62f28;
}

159
src/views/gcaqjc/sjtjcx/sjlr/sy/toolbar.js Normal file
View File

@ -0,0 +1,159 @@
import React, { useEffect,useState } from 'react';
import { Form, Input, Button, DatePicker } from 'antd';
import { getDictService } from '../../../../../service/SelectValue'
import AdcdFuzzyTreeSelect from '../../../../../components/Form/AdcdFuzzyTreeSelect';
import NormalSelect from '../../../../../components/Form/NormalSelect';
import { config } from '../../../../../config';
import moment from 'moment';
import { httppost2 } from '../../../../../utils/request';
import apiurl from '../../../../../service/apiurl';
const { RangePicker } = DatePicker;
const ToolBar = ({ setSearchVal, onSave, storeData,role }) => {
const searchBtn = role?.rule?.find(item => item.menuName == "查询")||true;
const addBtn = role?.rule?.find(item => item.menuName == "新增")||true;
const optionsType = [
{
label: "今日",
value:1
},
{
label: "近一周",
value:2
},
{
label:"近一月",
value:3
},
{
label:"近三月",
value:4
},
{
label:"近一年",
value:5
},
]
const [form] = Form.useForm();
const [dmList, setDmList] = useState([])
const [codeList, setCodeList] = useState([])
const [dmCode,setDmCode] = useState('')
const getDmList = async () => {
try {
const res = await httppost2(apiurl.gcaqjc.sjtjcx.sycx.list)
setDmList(res.data.map(s=>({label:s.profileName,value:s.profileCode})));
} catch (error) {
console.log(error);
}
}
const getStationCode = async () => {
try {
const res = await httppost2(apiurl.gcaqjc.gcaqyj.yjgzpz.list)
setCodeList(res.data.map(s=>({label:s.stationCode,value:s.stationCode,profileCode:s.profileCode})));
} catch (error) {
console.log(error);
}
}
const onValuesChange = (e) => {
switch (e.ranger) {
case 1:
form.setFieldValue("tm",[moment().startOf("day"),moment()])
break;
case 2:
form.setFieldValue("tm",[moment().subtract(7, 'days'),moment()])
break;
case 3:
form.setFieldValue("tm",[moment().subtract(1, 'months'),moment()])
break;
case 4:
form.setFieldValue("tm",[moment().subtract(3, 'months'),moment()])
break;
case 5:
form.setFieldValue("tm",[moment().subtract(1, 'years'),moment()])
break;
default:
break;
}
}
const onFinish = (values) => {
let dateSo;
if (values.tm) {
dateSo = {
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:dateSo});
}
useEffect(() => {
getDmList()
getStationCode()
}, [])
return (
<>
<div style={{display:'flex',justifyContent:'space-between'}}>
<Form form={form} className='toolbarBox' layout="inline" onFinish={onFinish} onValuesChange={onValuesChange}>
<Form.Item label="监测时间" name="tm">
<RangePicker
allowClear
style={{ width: "350px" }}
format="YYYY-MM-DD HH:mm:ss"
onChange={(v)=>{
form.setFieldValue('ranger',null)
}}
/>
</Form.Item>
<Form.Item label="常用时段" name="ranger">
<NormalSelect
allowClear
style={{ width: "150px" }}
options={optionsType}
/>
</Form.Item>
<Form.Item label="监测断面" name="profileCode">
<NormalSelect
allowClear
style={{ width: "150px" }}
options={dmList}
onChange={(v)=>{
form.setFieldValue('stationCode',null)
setDmCode(v)
}}
/>
</Form.Item>
<Form.Item label="测点编号" name="stationCode">
<NormalSelect
allowClear
style={{ width: "150px" }}
options={codeList.filter(o=>dmCode?o.profileCode===dmCode:true)}
/>
</Form.Item>
{searchBtn ?
<Form.Item>
<Button type="primary" htmlType="submit">查询</Button>
</Form.Item>
:null }
<Form.Item>
<Button onClick={() => form.resetFields()}>重置</Button>
</Form.Item>
{
(onSave && addBtn) ?
<Form.Item>
<Button onClick={onSave}>新增</Button>
</Form.Item>
:null
}
</Form>
</div>
</>
);
}
export default ToolBar;

119
src/views/gcaqjc/sjtjcx/sjlr/wy/form.js Normal file
View File

@ -0,0 +1,119 @@
import React,{useEffect,useState,useMemo} from 'react';
import { Form, Button, Input, Row, Col, DatePicker, Upload,message,Image,Modal,Radio } from 'antd';
import { formItemLayout, btnItemLayout } from '../../../../../components/crud/FormLayoutProps';
import apiurl from '../../../../../service/apiurl';
import NormalSelect from '../../../../../components/Form/NormalSelect';
import { httppost2 } from '../../../../../utils/request';
import moment from 'moment';
const ModalForm = ({ mode, record,onEdit,onSave,onSimilarSave }) => {
console.log("record",record);
const [form] = Form.useForm();
const [dmList, setDmList] = useState([])
const [codeList, setCodeList] = useState([])
const [dmCode,setDmCode] = useState('')
const onFinish = (values) => {
debugger
if (mode === 'edit') {
onEdit(apiurl.gcaqjc.sjtjcx.sjlr.wyjc.edit,{...record,...values})
}
if (mode === 'save') {
onSave(apiurl.gcaqjc.sjtjcx.sjlr.wyjc.save,values)
}
}
const getDmList = async () => {
try {
const res = await httppost2(apiurl.gcaqjc.sjtjcx.sycx.list)
setDmList(res.data.map(s=>({label:s.profileName,value:s.profileCode})));
} catch (error) {
console.log(error);
}
}
const getStationCode = async () => {
try {
const res = await httppost2(apiurl.gcaqjc.sjtjcx.wycx.list)
setCodeList(res.data.map(s=>({label:s.stationCode,value:s.stationCode,profileCode:s.profileCode})));
} catch (error) {
console.log(error);
}
}
useEffect(()=>{
getDmList()
getStationCode()
}, [])
return (
<>
<Form
form={form}
{...formItemLayout}
onFinish={onFinish}
initialValues={record}
>
<Form.Item
label="监测时间"
name="tm"
getValueFromEvent={(e,dateString) => dateString}
getValueProps={(value) => ({ value: value ? moment(value) : undefined })}
rules={[{required: true}]}
>
<DatePicker disabled={mode==='view'||mode==='edit'} format={'YYYY-MM-DD HH:mm:ss'} style={{width:'100%'}} allowClear showTime />
</Form.Item>
<Form.Item
label="测点编号"
rules={[{ required: true }]}
name="stationCode"
>
<NormalSelect
disabled={mode==='view'||mode==='edit'}
allowClear
style={{ width: "100%" }}
options={codeList}
/>
</Form.Item>
<Form.Item
label="X方向表面位移(mm)"
name="x"
>
<Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
</Form.Item>
<Form.Item
label="Y方向表面位移(mm)"
name="y"
>
<Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
</Form.Item>
<Form.Item
label="H方向表面位移(mm)"
name="h"
>
<Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
</Form.Item>
{
mode==='view'?null:(
<>
<Form.Item {...btnItemLayout}>
<Button type="primary" htmlType="submit">
{mode === 'save' ? '保存' :
mode === "similarSave" ? "保存" :
'修改'}
</Button>
</Form.Item>
</>
)
}
</Form>
</>
);
}
export default ModalForm;

92
src/views/gcaqjc/sjtjcx/sjlr/wy/index.js Normal file
View File

@ -0,0 +1,92 @@
import React, { Fragment, useRef, useMemo,useEffect,useState } from 'react';
import BasicCrudModal from '../../../../../components/crud/BasicCrudModal';
import { Table, Card,Modal,Form,Input,Button,Row,Col,message } from 'antd';
import ModalForm from './form';
import ToolBar from './toolbar';
import { useSelector } from 'react-redux';
import apiurl from '../../../../../service/apiurl';
import usePageTable from '../../../../../components/crud/usePageTable2';
import { createCrudService } from '../../../../../components/crud/_';
import {CrudOpRender_text} from '../../../../../components/crud/CrudOpRender';
import "./index.less"
const Page = () => {
const role = useSelector(state => state.auth.role);
const editBtn = role?.rule?.find(item => item.menuName == "编辑")||true;
const viewBtn = role?.rule?.find(item => item.menuName == "查看")||true;
const delBtn = role?.rule?.find(item => item.menuName == "删除")||true;
const refModal = useRef();
const [searchVal, setSearchVal] = useState(false)
const columns = [
{ title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align:"center" },
{ title: '监测时间', key: 'tm', dataIndex: 'tm', align:"center", },
{ title: '测点编号', key: 'stationCode', dataIndex: 'stationCode', align:"center", },
{ title: 'X方向表面位移(mm)', key: 'x', dataIndex: 'x', align:"center", },
{ title: 'Y方向表面位移(mm)', key: 'y', dataIndex: 'y', align:"center", },
{ title: 'H方向表面位移(mm)', key: 'h', dataIndex: 'h', align:"center", },
{
title: '操作', key: 'operation', width: 240, fixed: 'right',align: 'center',
render: (value, row, index) => (
<CrudOpRender_text
edit={editBtn ? true : false}
del={delBtn ? true : false}
view={viewBtn ? true : false}
command={(cmd) => () => command(cmd)(row)} />)
},
];
const width = useMemo(() => columns.reduce((total, cur) => total + (cur.width), 0), [columns]);
const command = (type) => (params) => {
if (type === 'save') {
refModal.current.showSave();
} else if (type === 'edit') {
refModal.current.showEdit({ ...params });
} else if (type === 'view') {
refModal.current.showView(params);
} else if (type === 'del') {
const url = apiurl.gcaqjc.sjtjcx.sjlr.wyjc.del + params.stationCode+'/'+params.tm
refModal.current.onDeleteGet(url);
}
}
const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.gcaqjc.sjtjcx.sjlr.wyjc.page).find_noCode);
useEffect(()=>{
const params = {
search: {
...searchVal,
}
};
search(params)
}, [searchVal])
return (
<>
<div className='lf CrudAdcdTreeTableBox' style={{ width: "100%" }}>
<Card className='nonebox'>
<ToolBar
setSearchVal={setSearchVal}
onSave={command('save')}
role={role}
/>
</Card>
<div className="ant-card-body" style={{padding:"20px 0 0 0"}}>
<Table columns={columns} rowKey="inx" {...tableProps} scroll={{ x: width , y: "calc( 100vh - 400px )"}}/>
</div>
</div>
<BasicCrudModal
width={1000}
ref={refModal}
title="渗压监测记录"
component={ModalForm}
onCrudSuccess={refresh}
/>
</>
);
}
export default Page;

29
src/views/gcaqjc/sjtjcx/sjlr/wy/index.less Normal file
View File

@ -0,0 +1,29 @@
.basic-info{
position: relative;
font-size: 16px;
margin-bottom: 20px;
padding:5px 25px;
border-bottom: 1px solid #eee;
&::before{
position: absolute;
top:8px;
left:0;
content: "";
display: block;
width: 5px;
height: 20px;
background-color: #0079fe;
}
}
.first-card,.second-card{
color: #fff;
padding:15px 120px;
border-radius: 10px;
}
.first-card{
background-color: #e9df1e;
}
.second-card{
background-color: #d62f28;
}

148
src/views/gcaqjc/sjtjcx/sjlr/wy/toolbar.js Normal file
View File

@ -0,0 +1,148 @@
import React, { useEffect,useState } from 'react';
import { Form, Input, Button, DatePicker } from 'antd';
import { getDictService } from '../../../../../service/SelectValue'
import AdcdFuzzyTreeSelect from '../../../../../components/Form/AdcdFuzzyTreeSelect';
import NormalSelect from '../../../../../components/Form/NormalSelect';
import { config } from '../../../../../config';
import moment from 'moment';
import { httppost2 } from '../../../../../utils/request';
import apiurl from '../../../../../service/apiurl';
const { RangePicker } = DatePicker;
const ToolBar = ({ setSearchVal, onSave, storeData,role }) => {
const searchBtn = role?.rule?.find(item => item.menuName == "查询")||true;
const addBtn = role?.rule?.find(item => item.menuName == "新增")||true;
const optionsType = [
{
label: "今日",
value:1
},
{
label: "近一周",
value:2
},
{
label:"近一月",
value:3
},
{
label:"近三月",
value:4
},
{
label:"近一年",
value:5
},
]
const [form] = Form.useForm();
const [dmList, setDmList] = useState([])
const [codeList, setCodeList] = useState([])
const [dmCode,setDmCode] = useState('')
const getDmList = async () => {
try {
const res = await httppost2(apiurl.gcaqjc.sjtjcx.sycx.list)
setDmList(res.data.map(s=>({label:s.profileName,value:s.profileCode})));
} catch (error) {
console.log(error);
}
}
const getStationCode = async () => {
try {
const res = await httppost2(apiurl.gcaqjc.sjtjcx.wycx.list)
setCodeList(res.data.map(s=>({label:s.stationCode,value:s.stationCode})));
} catch (error) {
console.log(error);
}
}
const onValuesChange = (e) => {
switch (e.ranger) {
case 1:
form.setFieldValue("tm",[moment().startOf("day"),moment()])
break;
case 2:
form.setFieldValue("tm",[moment().subtract(7, 'days'),moment()])
break;
case 3:
form.setFieldValue("tm",[moment().subtract(1, 'months'),moment()])
break;
case 4:
form.setFieldValue("tm",[moment().subtract(3, 'months'),moment()])
break;
case 5:
form.setFieldValue("tm",[moment().subtract(1, 'years'),moment()])
break;
default:
break;
}
}
const onFinish = (values) => {
let dateSo;
if (values.tm) {
dateSo = {
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:dateSo});
}
useEffect(() => {
getDmList()
getStationCode()
}, [])
return (
<>
<div style={{display:'flex',justifyContent:'space-between'}}>
<Form form={form} className='toolbarBox' layout="inline" onFinish={onFinish} onValuesChange={onValuesChange}>
<Form.Item label="监测时间" name="tm">
<RangePicker
allowClear
style={{ width: "350px" }}
format="YYYY-MM-DD HH:mm:ss"
onChange={(v)=>{
form.setFieldValue('ranger',null)
}}
/>
</Form.Item>
<Form.Item label="常用时段" name="ranger">
<NormalSelect
allowClear
style={{ width: "150px" }}
options={optionsType}
/>
</Form.Item>
<Form.Item label="测点编号" name="stationCode">
<NormalSelect
allowClear
style={{ width: "150px" }}
options={codeList}
/>
</Form.Item>
{searchBtn ?
<Form.Item>
<Button type="primary" htmlType="submit">查询</Button>
</Form.Item>
:null }
<Form.Item>
<Button onClick={() => form.resetFields()}>重置</Button>
</Form.Item>
{
(onSave && addBtn) ?
<Form.Item>
<Button onClick={onSave}>新增</Button>
</Form.Item>
:null
}
</Form>
</div>
</>
);
}
export default ToolBar;

3
src/views/gcaqjc/sjtjcx/sljc/toolbar.js
View File

@ -78,6 +78,9 @@ const ToolBar = ({ setSearchVal, onSave, storeData,role }) => {
allowClear allowClear
style={{ width: "350px" }} style={{ width: "350px" }}
format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss"
onChange={(v)=>{
form.setFieldValue('ranger',null)
}}
/> />
</Form.Item> </Form.Item>
<Form.Item label="常用时段" name="ranger"> <Form.Item label="常用时段" name="ranger">

13
src/views/gcaqjc/sjtjcx/syjc/toolbar.js
View File

@ -35,6 +35,8 @@ const ToolBar = ({ setSearchVal, onSave, storeData,role }) => {
const [form] = Form.useForm(); const [form] = Form.useForm();
const [dmList, setDmList] = useState([]) const [dmList, setDmList] = useState([])
const [codeList, setCodeList] = useState([]) const [codeList, setCodeList] = useState([])
const [dmCode,setDmCode] = useState('')
const getDmList = async () => { const getDmList = async () => {
try { try {
@ -48,7 +50,7 @@ const ToolBar = ({ setSearchVal, onSave, storeData,role }) => {
const getStationCode = async () => { const getStationCode = async () => {
try { try {
const res = await httppost2(apiurl.gcaqjc.gcaqyj.yjgzpz.list) const res = await httppost2(apiurl.gcaqjc.gcaqyj.yjgzpz.list)
setCodeList(res.data.map(s=>({label:s.stationCode,value:s.stationCode}))); setCodeList(res.data.map(s=>({label:s.stationCode,value:s.stationCode,profileCode:s.profileCode})));
} catch (error) { } catch (error) {
console.log(error); console.log(error);
} }
@ -102,6 +104,9 @@ const ToolBar = ({ setSearchVal, onSave, storeData,role }) => {
allowClear allowClear
style={{ width: "350px" }} style={{ width: "350px" }}
format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss"
onChange={(v)=>{
form.setFieldValue('ranger',null)
}}
/> />
</Form.Item> </Form.Item>
<Form.Item label="常用时段" name="ranger"> <Form.Item label="常用时段" name="ranger">
@ -116,13 +121,17 @@ const ToolBar = ({ setSearchVal, onSave, storeData,role }) => {
allowClear allowClear
style={{ width: "150px" }} style={{ width: "150px" }}
options={dmList} options={dmList}
onChange={(v)=>{
form.setFieldValue('stationCode',null)
setDmCode(v)
}}
/> />
</Form.Item> </Form.Item>
<Form.Item label="测点编号" name="stationCode"> <Form.Item label="测点编号" name="stationCode">
<NormalSelect <NormalSelect
allowClear allowClear
style={{ width: "150px" }} style={{ width: "150px" }}
options={codeList} options={codeList.filter(o=>dmCode?o.profileCode===dmCode:true)}
/> />
</Form.Item> </Form.Item>
{searchBtn ? <Form.Item> {searchBtn ? <Form.Item>

3
src/views/gcaqjc/sjtjcx/wyjc/toolbar.js
View File

@ -93,6 +93,9 @@ const ToolBar = ({ setSearchVal, onSave, storeData,role }) => {
allowClear allowClear
style={{ width: "350px" }} style={{ width: "350px" }}
format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss"
onChange={(v)=>{
form.setFieldValue('ranger',null)
}}
/> />
</Form.Item> </Form.Item>
<Form.Item label="常用时段" name="ranger"> <Form.Item label="常用时段" name="ranger">

2
src/views/gxsl/gstjfx/gsOption.js
View File

@ -125,7 +125,7 @@ export default function drpOption (data) {
], ],
series: [ series: [
{ {
name: '发电灌溉', name: '灌溉用水',
type: 'line', type: 'line',
symbol: 'none', symbol: 'none',
smooth: true, smooth: true,

6
src/views/gxsl/gstjfx/index.js
View File

@ -18,7 +18,7 @@ const Page = () => {
{ title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align:"center" }, { title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align:"center" },
{ title: '时间', key: 'tm', dataIndex: 'tm', width: 200, ellipsis: true, align:"center" }, { title: '时间', key: 'tm', dataIndex: 'tm', width: 200, ellipsis: true, align:"center" },
{ {
title: '发电灌溉', title: '灌溉用水',
align: "center", align: "center",
children: [ children: [
{ {
@ -62,7 +62,7 @@ const Page = () => {
{ title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align:"center" }, { title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align:"center" },
{ title: '时间', key: 'tm', dataIndex: 'tm', width: 100, ellipsis: true, align:"center" }, { title: '时间', key: 'tm', dataIndex: 'tm', width: 100, ellipsis: true, align:"center" },
{ {
title: '发电灌溉', title: '灌溉用水',
align: "center", align: "center",
children: [ children: [
{ {
@ -266,7 +266,7 @@ const Page = () => {
<div style={{flex:1}}> <div style={{flex:1}}>
<div style={{color:"#ffa87c",display:"flex",columnGap:20}}> <div style={{color:"#ffa87c",display:"flex",columnGap:20}}>
<div className='des-title'> <div className='des-title'>
<div>发电灌溉总合计(万m³)：</div> <div>灌溉用水总合计(万m³)：</div>
<div style={{margin:"10px 0"}}>水厂取水总合计(万m³)：</div> <div style={{margin:"10px 0"}}>水厂取水总合计(万m³)：</div>
<div>供水总合计(万m³)：</div> <div>供水总合计(万m³)：</div>
</div> </div>

2
src/views/gxsl/gstjfx/tjOption.js
View File

@ -3,7 +3,7 @@ let title = "总计";
let color = ["#73a0fa", "#52c1f5"]; let color = ["#73a0fa", "#52c1f5"];
let echartData = [ let echartData = [
{ {
name: "发电灌溉", name: "灌溉用水",
value: parseFloat(obj?.shgs?.toFixed(2)) value: parseFloat(obj?.shgs?.toFixed(2))
}, },
{ {

91
src/views/sq/qth/sksq/index.js
View File

@ -2,12 +2,87 @@ import React, { useEffect, useState } from 'react'
import { reservoirlist, } from "../../../../service/sssq"; import { reservoirlist, } from "../../../../service/sssq";
import Sssw from './sssw'; import Sssw from './sssw';
import Sjcx from '../../../Home/MapCtrl/components/Sksjcx/index' import Sjcx from '../../../Home/MapCtrl/components/Sksjcx/index'
import NormalSelect from '../../../../components/Form/NormalSelect';
import "./index.less" import "./index.less"
import { helpers } from '@turf/turf'; import { helpers } from '@turf/turf';
import { Label } from 'react-konva';
const sj = {
"stcd": "61610701",
"stnm": "檀树岗2",
"rvnm": "檀树岗河",
"hnnm": "长江中游下段北岸",
"bsnm": "长江",
"lgtd": "114.744317000",
"lttd": "31.505000000",
"stlc": "黄冈市红安县七里镇檀树岗村",
"alt": null,
"mdbz": null,
"mdpr": null,
"dtmnm": "吴淞",
"dtmel": null,
"dtpr": "0.000",
"sttp": "RR",
"dfrtms": null,
"fritm": null,
"frgrd": "3",
"esstym": "197103",
"bgfrym": "197103",
"edfrym": null,
"atcunit": "黄冈市水利和湖泊局",
"admauth": "黄冈水文",
"locality": "湖北水文",
"stbk": null,
"stazt": null,
"dstrvm": null,
"drna": "78",
"phcd": "TSG",
"usfl": "1",
"comments": "中小河流改造",
"moditime": "2022-02-23 00:00:00",
"remGd": null,
"ogid": null,
"vlfl": null,
"atid": null,
"sdfl": null,
"rma": null,
"mdps": null,
"mddt": null,
"stindex": null,
"starea": null,
"stlevel": null,
"code": null,
"ispbj": null,
"issxst": null,
"stpq": null,
"sthday": null,
"source": "SW",
"importancy": 0,
"clgtd": "114.744317000",
"clttd": "31.505000000",
"elev": null,
"crucial": 0,
"buildYear": null,
"adcd": null,
"lyid": null,
"resCode": "42120250085",
"rvCode": null,
"status": 1,
"agreement": null,
"simCard": null,
"bdCard": null,
"v": 104.1
}
export default function Sksq() { export default function Sksq() {
const [tableData, setTableData] = useState([]) const [tableData, setTableData] = useState([])
const [selected, setSelected] = useState(0)
const getData = async (params) => { const getData = async (params) => {
setTableData(await reservoirlist(params)); const data = await await reservoirlist(params)
setTableData([...data,sj]);
} }
useEffect(() => { useEffect(() => {
let option = { let option = {
@ -25,10 +100,18 @@ export default function Sksq() {
<img alt='' src={`${process.env.PUBLIC_URL}/assets/panelTitle.png`} /> <img alt='' src={`${process.env.PUBLIC_URL}/assets/panelTitle.png`} />
<span style={{marginLeft:10}}>实时水位</span> <span style={{marginLeft:10}}>实时水位</span>
</div> </div>
<span>站点：{tableData[0]?.stnm}</span> <span>站点：
<NormalSelect
allowClear={false}
style={{ width: '150px' }}
options={tableData.map((item,index)=>({ label: item.stnm, value: index }))}
value={selected}
onChange={(e) => setSelected(e)}
/>
</span>
</div> </div>
<div className='sssw-content'> <div className='sssw-content'>
<Sssw data={tableData[0] || {}}/> <Sssw data={tableData[selected] || {}}/>
</div> </div>
</div> </div>
<div className='content-right'> <div className='content-right'>
@ -39,7 +122,7 @@ export default function Sksq() {
</div> </div>
</div> </div>
<div className='sjcx-content'> <div className='sjcx-content'>
<Sjcx record={{...tableData[0],height:true} || {}}/> <Sjcx record={{...tableData[selected],height:true} || {}}/>
</div> </div>
</div> </div>
</div> </div>

261
src/views/sq/qth/skyh/drpOption.js Normal file
View File

@ -0,0 +1,261 @@
export default function drpOption(data,yjData) {
console.log("data",data);
// const maxVal = 0//Math.max(...data.map(obj => obj.drp))
// const max1 = Math.max(...[...data.map(obj => obj.value),...yjData?.map(obj => obj.value)])
// const min1 = Math.min(...[...data.map(obj => obj.value),...yjData?.map(obj => obj.value)])
// const max2 = Math.max(...data.map(obj => obj.rz))
// const min2 = Math.min(...data.map(obj => obj.rz))
// const yj = yjData?.map((item,index)=>{
// return {
// yAxisIndex: 0,
// name: item.yjName,
// type: 'line',
// color: item.color,
// lineStyle: {
// type: "dashed",
// width: 1,
// },
// data: data.map(o => item.value),
// symbol: 'none', // 设置标记点为'none'，即去掉圆点
// smooth: 0.5
// }
// })
return {
tooltip: {
trigger: 'axis',
},
grid: [
{
top: "12%",
left: "10%",
right: "8%",
width: '80%',
height: '35%'
},
{
bottom: '5%',
left: '10%',
right: '8%',
width: '80%',
height: '35%'
}
],
legend: {
top:'3%',
// 显示图例
show: true,
// 图例的位置
data: ["库容","水位","汛限水位","设计水位","校核水位","溢洪流量"],
},
xAxis: [
{
gridIndex: 0,
type: 'category',
data: data.map(o => o.tm),
inverse: false,
splitLine: {
show: false
},
axisLabel: {
color: '#8c8c8c',
fontSize: 12,
show: false
// formatter: val => val.slice(11,16)
},
axisLine: {
lineStyle: {
color: '#8c8c8c',
width: 0.5,
}
},
axisTick: {
show: false,
},
},
{
gridIndex: 1,
type: 'category',
data: data.map(o => o.tm),
inverse: false,
splitLine: {
show: false
},
axisLabel: {
color: '#8c8c8c',
fontSize: 12,
formatter: val => val.slice(11,16)
},
axisLine: {
lineStyle: {
color: '#8c8c8c',
width: 0.5,
}
},
axisTick: {
show: false,
},
}
],
yAxis: [
{
gridIndex: 0,
type: 'value',
position: 'left',
// name: "库容(RH)",
nameTextStyle: {
padding: [0, 0, 10, -20],
color:'#8c8c8c',
fontSize: 14
},
splitLine: {
show: true,
lineStyle: {
color: '#bfbfbf',
width: 0.5,
type: 'dotted'
}
},
axisLabel: {
color: '#8c8c8c',
fontSize: 12,
formatter: val => val+'%'
},
axisLine: {
show: false
// lineStyle: {
// color: '#8c8c8c',
// width: 1,
// }
},
axisTick: {
show: false,
},
},
{
gridIndex: 1,
type: 'value',
position: 'left',
name: '水位(m)',
nameTextStyle: {
padding: [0, 0, 10, -20],
color:'#8c8c8c',
fontSize: 14
},
splitLine: {
show: true,
lineStyle: {
color: '#bfbfbf',
width: 0.5,
type: 'dotted'
}
},
axisLabel: {
color: '#8c8c8c',
fontSize: 12,
// formatter: val => val+'%'
},
axisLine: {
show: false
},
axisTick: {
show: false
},
},
{
gridIndex: 1,
type: 'value',
position: 'right',
name: '库容(万m³)',
nameTextStyle: {
padding: [0, 0, 10, -20],
color:'#8c8c8c',
fontSize: 14
},
splitLine: {
show: false,
lineStyle: {
color: '#07a6ff',
width: 0.25,
type: 'dotted'
}
},
axisLabel: {
color: '#333',
fontSize: 12,
},
axisLine: {
show: false
},
axisTick: {
show: false
},
}
],
series: [
{
xAxisIndex: 0,
name: '溢洪流量',
type: 'line',
color: "#3478f4",
data: data.map(o => o.kr),
// symbol: 'none', // 设置标记点为'none'，即去掉圆点
symbolSize:8,
areaStyle: {
// 开启阴影
shadowColor: 'rgba(0, 0, 0, 0.1)', // 阴影颜色
shadowBlur: 10, // 阴影的模糊大小
shadowOffsetX: 5, // 阴影水平方向上的偏移
shadowOffsetY: 5, // 阴影垂直方向上的偏移
opacity: 0.3 // 区域颜色的透明度
},
},
{
xAxisIndex: 1,
yAxisIndex: 1,
name: '水位',
type: 'line',
color: "#67ddb7",
symbol: 'none', // 设置标记点为'none'，即去掉圆点
data: data.map(o => o.sw),
// symbol: 'none', // 设置标记点为'none'，即去掉圆点
},
{
name: '汛限水位',
type: 'line',
color: "#f8dda7",
symbol: 'none', // 设置标记点为'none'，即去掉圆点
data: data.map(o => 130),
// symbol: 'none', // 设置标记点为'none'，即去掉圆点
},
{
name: '设计水位',
type: 'line',
color: "#e89e42",
symbol: 'none', // 设置标记点为'none'，即去掉圆点
data: data.map(o => 100),
// symbol: 'none', // 设置标记点为'none'，即去掉圆点
},
{
name: '校核水位',
type: 'line',
color: "#da2f2d",
symbol: 'none', // 设置标记点为'none'，即去掉圆点
data: data.map(o => 160),
// symbol: 'none', // 设置标记点为'none'，即去掉圆点
},
{
name: '溢洪流量',
type: 'bar',
barWidth: '20%',
itemStyle: {
color: '#678ef2',
borderWidth: '0.3'
},
data: data.map(o => o.ll),
// symbol: 'none', // 设置标记点为'none'，即去掉圆点
},
]
};
}

70
src/views/sq/qth/skyh/index.js Normal file
View File

@ -0,0 +1,70 @@
import React, { useEffect, useState } from 'react'
import { reservoirlist, } from "../../../../service/sssq";
import { message } from 'antd';
import Sssw from './sssw';
// import Sjcx from '../../../Home/MapCtrl/components/Jcsj/index'
import Sjcx from './sjcx'
import "./index.less"
import { httppost2 } from '../../../../utils/request';
import apiurl from '../../../../service/apiurl';
import { helpers } from '@turf/turf';
import NormalSelect from '../../../../components/Form/NormalSelect';
export default function Sksq() {
const [selectList, setSelectList] = useState([])
// const [selected, setSelected] = useState(0)
const getList = async() => {
try {
const data = await reservoirlist()
setSelectList(data)
} catch (error) {
console.log(error);
}
}
useEffect(() => {
getList()
}, [])
return (
<div className='lf' style={{ height: 'calc(100vh - 168px)', width: "100%" }}>
<div className='content-sk'>
<div className='content-left'>
<div className='comomn-title'>
<div style={{display:"flex",alignItems:"center",columnGap:0}}>
<img alt='' src={`${process.env.PUBLIC_URL}/assets/panelTitle.png`} />
<span style={{marginLeft:10}}>土壤墒情</span>
</div>
<div style={{display:"flex",columnGap:10,width:"25%",alignItems:"center"}}>
<span>站点：</span>
{selectList?.[0]?.stnm}
{/* <NormalSelect
style={{ width: '77%' }}
allowClear
options={selectList}
value={selected}
onChange={(e) => setSelected(e)}
/> */}
</div>
</div>
<div className='sssw-content'>
<Sssw data={selectList?.[0] || {}}/>
</div>
</div>
<div className='content-right' style={{display:'flex',flexDirection:'column'}}>
<div className='comomn-title'>
<div style={{display:"flex",alignItems:"center",columnGap:10}}>
<img alt='' src={`${process.env.PUBLIC_URL}/assets/panelTitle.png`} />
<span>数据查询</span>
</div>
</div>
<div className='sjcx-content' style={{flex:1}}>
<Sjcx data={selectList?.[0]?.data || {}}/>
</div>
</div>
</div>
</div>
)
}

106
src/views/sq/qth/skyh/index.less Normal file
View File

@ -0,0 +1,106 @@
.content-sk{
display: flex;
column-gap: 10px;
height: calc(100vh - 90px);
.comomn-title{
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 10px;
}
.content-left{
width: 550px;
height: 100%;
background-color: #fff;
.ssjc{
.root {
display: flex;
color: #333;
padding: 1rem 1rem 1rem 1rem;
.drp-content{
display: flex;
justify-content: center;
flex-wrap: wrap;
column-gap: 40px;
margin-top: 40px;
}
.drp-item{
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
width: 220px;
height: 160px;
background-color: #eaf4fe;
margin-bottom: 40px;
.value{
font-size: 20px;
font-weight: bold;
}
.name{
font-size: 16px;
color: #40a9ff;
}
}
}
.report-time,.rain-report{
display: flex;
width: 70%;
align-items: center;
color: #689fff;
font-size: 15px;
font-weight: 500;
line-height: 1.5;
column-gap: 5px;
margin-bottom: 10px;
justify-content: center;
padding: 7px 0;
background-color: #ecf5ff;
border: 1px solid #cde5ff;
border-radius: 5px;
margin-left: 10%;
}
}
}
.content-right{
flex: 1;
height: 100%;
background-color: #fff;
.sjcx-content{
padding: 10px;
.qth_skyh_sjcx{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
.qth_skyh_sjcx_top{
padding: 0 0 15px 10px;
}
.qth_skyh_sjcx_center{
flex: 1;
padding: 0 10px;
display: flex;
flex-direction: row;
.qth_skyh_sjcx_center_left{
width: 55%;
height: 100%;
margin-bottom: 10px;
}
.qth_skyh_sjcx_center_right{
width: 45%;
height: 100%;
}
}
}
}
}
.pic-container{
padding: 10px;
}
}

77
src/views/sq/qth/skyh/sjcx.js Normal file
View File

@ -0,0 +1,77 @@
import React,{useState,useEffect, useMemo} from 'react'
import {Table} from 'antd';
import ReactEcharts from 'echarts-for-react';
import {queryStPptnDetails} from '../../../../service/ssyq'
import { httppost2 } from '../../../../utils/request'
import apiurl from '../../../../service/apiurl'
import moment from 'moment';
import Toolbar from './toolbar'
import drpOption from './drpOption';
export default function Sjcx({ data }) {
const stcd = data?.stcd||''
const [tms, setTms] = useState([moment().add(-1,'months'),moment()])
const [list, setList] = useState([])
const option = useMemo(() => drpOption(list), [list])
const columns = [
{ title: '时间', key: 'tm', dataIndex: 'tm', align: 'center',width:'120px',render: (rec) => <span>{rec.slice(5,16) ?? "-"}</span> },
{ title: '水位(m)', key: 'sw', dataIndex: 'sw', align: 'center',width:'80px',render: (rec) => <span>{rec ?? "-"}</span> },
{ title: '库容(万m³)', key: 'kr', dataIndex: 'kr', align: 'center',render: (rec) => <span>{rec ?? "-"}</span> },
{ title: '溢洪流量(m³/s)', key: 'll', dataIndex: 'll', align: 'center',render: (rec) => <span>{rec ?? "-"}</span> },
{ title: '累计溢洪量(万m³)', key: 'lj', dataIndex: 'lj', align: 'center',render: (rec) => <span>{rec ?? "-"}</span> },
];
useEffect(()=>{
getList(stcd,tms)
},[stcd,tms])
const getList = async (stcd,tms)=>{
const pam = {
stm:tms[0].format('YYYY-MM-DD HH:mm:ss'),
etm:tms[1].format('YYYY-MM-DD HH:mm:ss'),
stcd
}
// const res = await httppost2(apiurl)
const list = []
for (let i=0;i<10;i++){
list.push({
tm:'2023-02-07 12:'+(i+10)+':00',
sw:i+1+'.91',
kr:i+22+'.91',
ll:i+15+'.91',
lj:i+41+'.91',
})
}
setList(list)
}
return (
<div className='qth_skyh_sjcx'>
<div className='qth_skyh_sjcx_top'>
<Toolbar search={(tm)=>{setTms([...tm])}}/>
</div>
<div className='qth_skyh_sjcx_center'>
<div className='qth_skyh_sjcx_center_left'>
<Table
owKey="adcd"
sticky
columns={columns}
pagination={false}
dataSource={list}
scroll={{ y: "650px"}}
/>
</div>
<div className='qth_skyh_sjcx_center_right'>
{
list.length>0?
<ReactEcharts option={option} style={{width: "100%", height: '750px'}}/>
:<div style={{textAlign: "center", margin: "10%"}}><img src={`${process.env.PUBLIC_URL}/assets/noData.png`} alt=""/></div>
}
</div>
</div>
</div>
)
}

55
src/views/sq/qth/skyh/sssw.js Normal file
View File

@ -0,0 +1,55 @@
import React,{useState,useEffect} from 'react'
import {queryStPptnDetails} from '../../../../service/ssyq'
import { httppost2 } from '../../../../utils/request'
import apiurl from '../../../../service/apiurl'
export default function Sssw({ data }) {
const [detail, setDetail] = useState({})
const getDetail = async (stcd) => {
// const res = await httppost2(apiurlhome.turangshangqing.{stcd})
// setDetail{res}
}
useEffect(() => {
if (data.stcd) {
getDetail(data.stcd)
}
}, [data])
return (
<div className="ssjc">
<div className="root">
<div className="realinfo">
<div
className='report-time'
>数据更新时间: {detail?.tm}</div>
<div className='drp-content'>
<div className='drp-item'>
<div className='value'>{detail?.h ?? '-' }&nbsp;<span style={{fontSize:14}}>m³/s</span></div>
<div className='name'>溢洪流量</div>
</div>
<div className='drp-item'>
<div className='value'>{detail?.h3 ?? '-' }&nbsp;<span style={{fontSize:14}}>万m³</span></div>
<div className='name'>当日溢洪量</div>
</div>
<div className='drp-item'>
<div className='value'>{detail?.h6 ?? '-' }&nbsp;<span style={{fontSize:14}}>万m³</span></div>
<div className='name'>当月溢洪量</div>
</div>
<div className='drp-item'>
<div className='value'>{detail?.h12 ?? '-' }&nbsp;<span style={{fontSize:14}}>万m³</span></div>
<div className='name'>当年溢洪量</div>
</div>
<div className='drp-item'>
<div className='value'>{detail?.h24 ?? '-' }&nbsp;<span style={{fontSize:14}}>次</span></div>
<div className='name'>本年溢洪次数</div>
</div> <div className='drp-item'>
<div className='value'>{detail?.h48 ?? '-' }&nbsp;<span style={{fontSize:14}}>万m³</span></div>
<div className='name'>本年单次最大溢洪量</div>
</div>
</div>
</div>
</div>
</div>
)
}

37
src/views/sq/qth/skyh/toolbar.js Normal file
View File

@ -0,0 +1,37 @@
import { Form, message, Button, DatePicker } from 'antd';
import NormalSelect from '../../../../components/Form/NormalSelect'
import moment from "moment"
const { RangePicker } = DatePicker;
const ToolBar = ({search, defaultParams}) => {
const [form] = Form.useForm();
const onFinish = (val)=>{
search(val.tms)
}
return (
<>
<Form form={form} className='toolbarBox' layout="inline" onFinish={onFinish}>
<Form.Item label="时间段" name="tms">
<RangePicker
allowClear={false}
defaultValue={[moment().add(-1,'months'),moment()]}
onChange={(e)=>{
form.setFieldValue('cysd',null)
}}
style={{ width: "380px" }}
format="YYYY-MM-DD HH:mm:ss"
/>
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">查询</Button>
</Form.Item>
</Form>
</>
);
}
export default ToolBar;

172
src/views/sq/qth/trsq/drpOption.js Normal file
View File

@ -0,0 +1,172 @@
export default function drpOption(data,yjData) {
console.log("data",data);
// const maxVal = 0//Math.max(...data.map(obj => obj.drp))
// const max1 = Math.max(...[...data.map(obj => obj.value),...yjData?.map(obj => obj.value)])
// const min1 = Math.min(...[...data.map(obj => obj.value),...yjData?.map(obj => obj.value)])
// const max2 = Math.max(...data.map(obj => obj.rz))
// const min2 = Math.min(...data.map(obj => obj.rz))
// const yj = yjData?.map((item,index)=>{
// return {
// yAxisIndex: 0,
// name: item.yjName,
// type: 'line',
// color: item.color,
// lineStyle: {
// type: "dashed",
// width: 1,
// },
// data: data.map(o => item.value),
// symbol: 'none', // 设置标记点为'none'，即去掉圆点
// smooth: 0.5
// }
// })
return {
tooltip: {
trigger: 'axis',
},
grid: [
{
top: "12%",
left: "10%",
right: "8%",
width: '80%',
height: '75%'
},
],
legend: {
top:'3%',
// 显示图例
show: false,
// 图例的位置
data: ["湿度"],
},
xAxis: [
{
type: 'category',
data: data.map(o => o.tm),
inverse: false,
splitLine: {
show: false
},
axisLabel: {
padding: [0, 0, 10, 0],
color: '#333',
fontSize: 12,
formatter: val => val.slice(0,10)
},
axisLine: {
lineStyle: {
color: '#d9d9d9',
width: 1,
}
},
axisTick: {
show: false,
},
}
],
yAxis: [
{
// gridIndex: 1,
type: 'value',
position: 'left',
name: "湿度(RH)",
nameTextStyle: {
padding: [0, 0, 10, -20],
color:'#333333',
fontSize: 14
},
splitLine: {
show: true,
lineStyle: {
color: '#bfbfbf',
width: 0.5,
type: 'dotted'
}
},
axisLabel: {
color: '#333',
fontSize: 12,
formatter: val => val+'%'
},
axisLine: {
show: false
// lineStyle: {
// color: '#8c8c8c',
// width: 1,
// }
},
axisTick: {
show: false,
},
},
// {
// // gridIndex: 1,
// type: 'value',
// position: 'right',
// name: "库水位(m)",
// nameTextStyle: {
// padding: [0, 0, 10, 10],
// color:'#333333',
// fontSize: 14
// },
// splitLine: {
// show: false,
// lineStyle: {
// color: '#07a6ff',
// width: 0.25,
// type: 'dotted'
// }
// },
// axisLabel: {
// color: '#333',
// fontSize: 12,
// },
// axisLine: {
// show: false
// // lineStyle: {
// // color: '#8c8c8c',
// // width: 1,
// // }
// },
// axisTick: {
// show: false,
// },
// min: Math.floor(min2*0.8),
// max: Math.ceil(max2*1.2),
// }
],
series: [
{
// xAxisIndex: 1,
// yAxisIndex: 0,
name: '湿度',
type: 'line',
color: "#d6eaec",
lineStyle: {
// type: "dashed"
},
data: data.map(o => o.sd),
symbol: 'none', // 设置标记点为'none'，即去掉圆点
smooth: 0.5
},
// ...yj
// {
// // xAxisIndex: 1,
// yAxisIndex: 1,
// name: '库水位',
// type: 'line',
// color: "#60a0f8",
// lineStyle: {
// // type: "dashed"
// },
// data: data.map(o => o.rz),
// symbol: 'none', // 设置标记点为'none'，即去掉圆点
// smooth: 0.5
// },
]
};
}

109
src/views/sq/qth/trsq/index.js Normal file
View File

@ -0,0 +1,109 @@
import React, { useEffect, useState } from 'react'
import { reservoirlist, } from "../../../../service/sssq";
import { message } from 'antd';
import Sssw from './sssw';
// import Sjcx from '../../../Home/MapCtrl/components/Jcsj/index'
import Sjcx from './sjcx'
import "./index.less"
import { httppost2 } from '../../../../utils/request';
import apiurl from '../../../../service/apiurl';
import { helpers } from '@turf/turf';
import NormalSelect from '../../../../components/Form/NormalSelect';
export default function Sksq() {
const [tableData1, setTableData1] = useState([])
// const getData1 = async () => {
// const { data, code, msg } = await httppost2(apiurl.home.yq)
// if (code !== 200) {
// message.error(msg || '请求失败');
// }
// const list = data.map((i)=>{
// return {
// id : i.stcd,
// ...i,
// drp : i.drp ,//i.v,
// }
// })
// setTableData1(list||[])
// }
const [selectList, setSelectList] = useState([])
const [selected, setSelected] = useState(0)
const getList = async() => {
try {
// const res = await httppost2(apiurl.home.turangshangqing)
const res = [
{
id:'1',
stcd: '10001',
stnm: '水田站',
wd: '53',
tm: '2025-03-19 15:00:00',
lgtd: "114.7684000",
lttd: "31.4941000"
},
{
id:'2',
stcd: '10002',
stnm: '旱田站',
wd: '21',
tm: '2025-03-19 15:00:00',
lgtd: "114.7984000",
lttd: "31.4941000"
},
]
const list = res?.map((item,index)=>({
label:item.stnm,
value:index,
data:item
}))
setSelectList(list)
} catch (error) {
console.log(error);
}
}
useEffect(() => {
getList()
}, [])
return (
<div className='lf' style={{ height: 'calc(100vh - 168px)', width: "100%" }}>
<div className='content-sk'>
<div className='content-left'>
<div className='comomn-title'>
<div style={{display:"flex",alignItems:"center",columnGap:0}}>
<img alt='' src={`${process.env.PUBLIC_URL}/assets/panelTitle.png`} />
<span style={{marginLeft:10}}>土壤墒情</span>
</div>
<div style={{display:"flex",columnGap:10,width:"45%",alignItems:"center"}}>
<span style={{width:"18%"}}>站点：</span>
<NormalSelect
style={{ width: '77%' }}
allowClear
options={selectList}
value={selected}
onChange={(e) => setSelected(e)}
/>
</div>
</div>
<div className='sssw-content'>
<Sssw data={selectList?.[selected]?.data || {}}/>
</div>
</div>
<div className='content-right' style={{display:'flex',flexDirection:'column'}}>
<div className='comomn-title'>
<div style={{display:"flex",alignItems:"center",columnGap:10}}>
<img alt='' src={`${process.env.PUBLIC_URL}/assets/panelTitle.png`} />
<span>数据查询</span>
</div>
</div>
<div className='sjcx-content' style={{flex:1}}>
<Sjcx data={selectList?.[selected]?.data || {}}/>
</div>
</div>
</div>
</div>
)
}

121
src/views/sq/qth/trsq/index.less Normal file
View File

@ -0,0 +1,121 @@
.content-sk{
display: flex;
column-gap: 10px;
height: calc(100vh - 90px);
.comomn-title{
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 10px;
}
.content-left{
width: 550px;
height: 100%;
background-color: #fff;
.ssjc{
.root {
display: flex;
color: #333;
padding: 1rem 1rem 1rem 1rem;
.drp-content{
display: flex;
justify-content: center;
flex-wrap: wrap;
column-gap: 40px;
margin-top: 40px;
}
.drp-item{
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
width: 220px;
height: 160px;
background-color: #eaf4fe;
margin-bottom: 40px;
.value{
font-size: 20px;
font-weight: bold;
}
.name{
font-size: 16px;
color: #40a9ff;
}
}
}
.report-time,.rain-report{
display: flex;
width: 70%;
align-items: center;
color: #689fff;
font-size: 15px;
font-weight: 500;
line-height: 1.5;
column-gap: 5px;
margin-bottom: 10px;
justify-content: center;
padding: 7px 0;
background-color: #ecf5ff;
border: 1px solid #cde5ff;
border-radius: 5px;
margin-left: 10%;
}
}
}
.content-right{
flex: 1;
height: 100%;
background-color: #fff;
.sjcx-content{
padding: 10px;
.qth_trsq_sjcx{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
.qth_trsq_sjcx_top{
padding: 0 0 5px 10px;
}
.qth_trsq_sjcx_center{
padding: 0 10px;
display: flex;
flex-direction: row;
.qth_trsq_sjcx_center_left{
width: 45%;
margin-bottom: 10px;
}
.qth_trsq_sjcx_center_right{
width: 55%;
}
}
.qth_trsq_sjcx_footer{
flex: 1;
.footer-row{
display: flex;
justify-content: space-between;
.footer-item{
flex: 1;
text-align: center;
.footer-name{
background: #E0EDFF ;
padding: 4px 0;
}
.footer-num{
padding: 4px 0;
}
}
}
}
}
}
}
.pic-container{
padding: 10px;
}
}

124
src/views/sq/qth/trsq/sjcx.js Normal file
View File

@ -0,0 +1,124 @@
import React,{useState,useEffect, useMemo} from 'react'
import {Table} from 'antd';
import ReactEcharts from 'echarts-for-react';
import {queryStPptnDetails} from '../../../../service/ssyq'
import { httppost2 } from '../../../../utils/request'
import apiurl from '../../../../service/apiurl'
import moment from 'moment';
import Toolbar from './toolbar'
import drpOption from './drpOption';
export default function Sjcx({ data }) {
const stcd = data?.stcd||''
const [tms, setTms] = useState([moment().add(-1,'months'),moment()])
const [countObj,setCountObj] = useState({})
const [list, setList] = useState([])
const option = useMemo(() => drpOption(list), [list])
const columns = [
{ title: '序号', key: '', dataIndex: '', align: 'center',width:'80px',render:(a,b,c)=>c+1},
{ title: '数据时间', key: 'tm', dataIndex: 'tm', align: 'center',width:'200px',render: (rec) => <span>{rec ?? "-"}</span> },
{ title: '湿度', key: 'sd', dataIndex: 'sd', align: 'center',render: (rec) => <span>{rec ?? "-"}</span> },
];
useEffect(()=>{
getCount(stcd)
getList(stcd,tms)
},[stcd,tms])
const getList = async (stcd,tms)=>{
const pam = {
stm:tms[0].format('YYYY-MM-DD HH:mm:ss'),
etm:tms[1].format('YYYY-MM-DD HH:mm:ss'),
stcd
}
// const res = await httppost2(apiurl)
const list = []
for (let i=0;i<30;i++){
list.push({
tm:'2023-02-07 12:'+(i+10)+':00',
sd:i+7+'.91'
})
}
setList(list)
}
const getCount = async (stcd)=>{
// const res = await httppost2(apiurl)
setCountObj({})
}
return (
<div className='qth_trsq_sjcx'>
<div className='qth_trsq_sjcx_top'>
<Toolbar search={(tm)=>{setTms([...tm])}}/>
</div>
<div className='qth_trsq_sjcx_center'>
<div className='qth_trsq_sjcx_center_left'>
<Table
owKey="adcd"
sticky
columns={columns}
pagination={false}
dataSource={list}
scroll={{ y: "550px"}}
/>
</div>
<div className='qth_trsq_sjcx_center_right'>
{
list.length>0?
<ReactEcharts option={option} style={{width: "100%", height: '100%'}}/>
:<div style={{textAlign: "center", margin: "10%"}}><img src={`${process.env.PUBLIC_URL}/assets/noData.png`} alt=""/></div>
}
</div>
</div>
<div className='qth_trsq_sjcx_footer'>
<div className="footer-row">
<div className="footer-item">
<div className="footer-name">本周(极值,RH)</div>
<div className="footer-num">{countObj?.h1||0}</div>
</div>
<div className="footer-item">
<div className="footer-name">本月(极值,RH)</div>
<div className="footer-num">{countObj?.h3||0}</div>
</div>
<div className="footer-item">
<div className="footer-name">本年(极值,RH)</div>
<div className="footer-num">{countObj?.h6||0}</div>
</div>
<div className="footer-item">
<div className="footer-name">近1周(极值,RH)</div>
<div className="footer-num">{countObj?.h12||0}</div>
</div>
<div className="footer-item">
<div className="footer-name">近1月(极值,RH)</div>
<div className="footer-num"><span style={{color:"#E69224"}}>{countObj?.yearDrpDay}</span>/{countObj?.C}</div>
</div>
</div>
<div className="footer-row">
<div className="footer-item">
<div className="footer-name">近3月(极值,RH)</div>
<div className="footer-num">{countObj.today}</div>
</div>
<div className="footer-item">
<div className="footer-name">近6月(极值,RH)</div>
<div className="footer-num">{countObj?.yesterdayDrp}</div>
</div>
<div className="footer-item">
<div className="footer-name">近1年(极值,RH)</div>
<div className="footer-num">{countObj?.monthDrp}</div>
</div>
<div className="footer-item">
<div className="footer-name">&nbsp;</div>
<div className="footer-num"></div>
</div>
<div className="footer-item">
<div className="footer-name">&nbsp;</div>
<div className="footer-num"></div>
</div>
</div>
</div>
</div>
)
}

55
src/views/sq/qth/trsq/sssw.js Normal file
View File

@ -0,0 +1,55 @@
import React,{useState,useEffect} from 'react'
import {queryStPptnDetails} from '../../../../service/ssyq'
import { httppost2 } from '../../../../utils/request'
import apiurl from '../../../../service/apiurl'
export default function Sssw({ data }) {
const [detail, setDetail] = useState({})
const getDetail = async (stcd) => {
// const res = await httppost2(apiurlhome.turangshangqing.{stcd})
// setDetail{res}
}
useEffect(() => {
if (data.stcd) {
getDetail(data.stcd)
}
}, [data])
return (
<div className="ssjc">
<div className="root">
<div className="realinfo">
<div
className='report-time'
>墒情最新上报时间: {detail?.tm}</div>
<div className='drp-content'>
<div className='drp-item'>
<div className='value'>{detail?.h ?? '-' }%&nbsp;<span style={{fontSize:14}}>RH</span></div>
<div className='name'>实时数据</div>
</div>
<div className='drp-item'>
<div className='value'>{detail?.h3 ?? '-' }%&nbsp;<span style={{fontSize:14}}>RH</span></div>
<div className='name'>近1周（极值）</div>
</div>
<div className='drp-item'>
<div className='value'>{detail?.h6 ?? '-' }%&nbsp;<span style={{fontSize:14}}>RH</span></div>
<div className='name'>近1月（极值）</div>
</div>
<div className='drp-item'>
<div className='value'>{detail?.h12 ?? '-' }%&nbsp;<span style={{fontSize:14}}>RH</span></div>
<div className='name'>近3月（极值）</div>
</div>
<div className='drp-item'>
<div className='value'>{detail?.h24 ?? '-' }%&nbsp;<span style={{fontSize:14}}>RH</span></div>
<div className='name'>近6月（极值）</div>
</div> <div className='drp-item'>
<div className='value'>{detail?.h48 ?? '-' }%&nbsp;<span style={{fontSize:14}}>RH</span></div>
<div className='name'>近1年（极值）</div>
</div>
</div>
</div>
</div>
</div>
)
}

37
src/views/sq/qth/trsq/toolbar.js Normal file
View File

@ -0,0 +1,37 @@
import { Form, message, Button, DatePicker } from 'antd';
import NormalSelect from '../../../../components/Form/NormalSelect'
import moment from "moment"
const { RangePicker } = DatePicker;
const ToolBar = ({search, defaultParams}) => {
const [form] = Form.useForm();
const onFinish = (val)=>{
search(val.tms)
}
return (
<>
<Form form={form} className='toolbarBox' layout="inline" onFinish={onFinish}>
<Form.Item label="时间段" name="tms">
<RangePicker
allowClear={false}
defaultValue={[moment().add(-1,'months'),moment()]}
onChange={(e)=>{
form.setFieldValue('cysd',null)
}}
style={{ width: "380px" }}
format="YYYY-MM-DD HH:mm:ss"
/>
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">查询</Button>
</Form.Item>
</Form>
</>
);
}
export default ToolBar;

6
src/views/sq/qys/gcys/xlLine/index.js
View File

@ -14,8 +14,8 @@ export default function Zrtx() {
title: '序号', dataIndex: 'index', key: 'index', align: "center", title: '序号', dataIndex: 'index', key: 'index', align: "center",
render: (r, c,i) => <span>{i + 1}</span> render: (r, c,i) => <span>{i + 1}</span>
}, },
{ title: '水位(m)', dataIndex: 'q', key: 'rz',align:"center" }, { title: '水位(m)', dataIndex: 'z', key: 'z',align:"center" },
{ title: '流量(m³/s)', dataIndex: 'z', key: 'z',align:"center" }, { title: '流量(m³/s)', dataIndex: 'q', key: 'rz',align:"center" },
{ {
title: '操作', dataIndex: 'op', key: 'op', align: "center",width:200, title: '操作', dataIndex: 'op', key: 'op', align: "center",width:200,
render: (value, row, index) => (<CrudOpRender_text del={true} edit={true} command={(cmd) => () => command(cmd)(row)} />) render: (value, row, index) => (<CrudOpRender_text del={true} edit={true} command={(cmd) => () => command(cmd)(row)} />)
@ -27,7 +27,7 @@ export default function Zrtx() {
}, [data]) }, [data])
const getData = async () => { const getData = async () => {
try { try {
const res = await httppost2(apiurl.dataResourcesCenter.projectAndWater.xl.list) const res = await httppost2(apiurl.dataResourcesCenter.projectAndWater.xl.list,{stcd:'61610700'})
setData(res.data.map((item,i) => ({...item,inx:i + 1}))) setData(res.data.map((item,i) => ({...item,inx:i + 1})))
} catch (error) { } catch (error) {
console.log(error); console.log(error);

2
src/views/szydd/ddjl/index.js
View File

@ -118,7 +118,7 @@ const Page = () => {
setNum(data.total) setNum(data.total)
} }
})() })()
}) },[])
return ( return (