qzc修改
parent
4d97627ac1
commit
85dc624c7e
|
|
@ -44,6 +44,7 @@
|
|||
"react-audio-player": "^0.17.0",
|
||||
"react-cookies": "^0.1.1",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-draggable": "^4.4.6",
|
||||
"react-konva": "^18.2.3",
|
||||
"react-org-tree": "^1.0.1",
|
||||
"react-pdf": "^7.3.3",
|
||||
|
|
@ -53,6 +54,7 @@
|
|||
"react-router-dom": "^6.3.0",
|
||||
"react-scripts": "5.0.1",
|
||||
"react-window": "^1.8.10",
|
||||
"react-zoom-pan-pinch": "^3.7.0",
|
||||
"redux": "^4.2.0",
|
||||
"typescript": "^4.7.4"
|
||||
},
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 482 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
|
|
@ -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/hdsq'},
|
||||
{ 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'},
|
||||
]
|
||||
},
|
||||
|
|
@ -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/sljx' },
|
||||
{ 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/ndsltjb' },
|
||||
{ id: id(), title: '年度位移统计表', path: '/mgr/gcaqjc/sjtjcx/ndwytjb' },
|
||||
]
|
||||
},
|
||||
],
|
||||
|
|
|
|||
|
|
@ -93,6 +93,7 @@ const apiurl = {
|
|||
azd: service_fxdd + '/shpPlacement/getDetailsAndAddvcdDataList',//安置点
|
||||
getqsydw: service_fxdd + '/iaCBsnssinfo/getDetailsAndAddvcdDataList',//企事业单位list
|
||||
getyhjmh: service_fxdd + '/iaCFlrvvlg/getDetailsAndAddvcdDataList',//沿河居民户list
|
||||
turangshangqing: '',
|
||||
|
||||
|
||||
wxqdetail: service_fxdd + '/iaCDanad/detail',
|
||||
|
|
@ -229,6 +230,21 @@ const apiurl = {
|
|||
page: service_fxdd + "/osmoticShiftR/year/stat",
|
||||
export: service_fxdd + "/osmoticShiftR/year/stat/export",
|
||||
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/",
|
||||
}
|
||||
}
|
||||
},
|
||||
// 工程安全分析
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ module.exports = function (app) {
|
|||
// target: 'http://192.168.66.199:24105/',//正式
|
||||
// target: 'http://36.139.207.50:18083/',//移动云
|
||||
// target: 'http://192.168.66.49:24105/',//移动云
|
||||
// target: 'http://192.168.66.32:24105/',//ls
|
||||
changeOrigin: true,
|
||||
})
|
||||
);
|
||||
|
|
|
|||
|
|
@ -25,13 +25,14 @@ import Csgl from './fxzb/csgl'
|
|||
import Qxdw_Gc from './fxzb/qxdw/gc/index.js'
|
||||
import Qxwl_Gc from './fxzb/qxwl/gc'
|
||||
// 工程安全监测
|
||||
import Bzt from './gcaqjc/bzt'
|
||||
import Bzt from './gcaqjc/bzt2'
|
||||
import Yhyj from "./gcaqjc/gcaqyj/yhyj"
|
||||
import Yjgzpz from "./gcaqjc/gcaqyj/yjgzpz"
|
||||
import Sljc from "./gcaqjc/sjtjcx/sljc"
|
||||
import Syjc from "./gcaqjc/sjtjcx/syjc"
|
||||
import Wyjc from "./gcaqjc/sjtjcx/wyjc"
|
||||
import Czcx from "./gcaqjc/sjtjcx/czcx"
|
||||
import Sjlr from "./gcaqjc/sjtjcx/sjlr"
|
||||
import Ndsytjb from "./gcaqjc/sjtjcx/ndsytjb"
|
||||
import Ndsltjb from "./gcaqjc/sjtjcx/ndsltjb"
|
||||
import Ndwytjb from "./gcaqjc/sjtjcx/ndwytjb"
|
||||
|
|
@ -92,6 +93,8 @@ import Gcdsj from './sq/qzq/gcdsj'
|
|||
import Sksq from './sq/qth/sksq'
|
||||
import Hdsq from './sq/qth/hdsq'
|
||||
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 Zcdjxx from './sq/qys/'
|
||||
// import Zcdjxx from './sq/qfg/zcdjxx'
|
||||
|
|
@ -171,6 +174,8 @@ const AppRouters: React.FC = () => {
|
|||
{ path: 'sq/qth/sksq', element: <Sksq /> },
|
||||
{ path: 'sq/qth/hdsq', element: <Hdsq /> },
|
||||
{ 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}/> },
|
||||
|
|
@ -182,6 +187,7 @@ const AppRouters: React.FC = () => {
|
|||
{ path: 'gcaqjc/sjtjcx/sljx', element: <Sljc /> },
|
||||
{ path: 'gcaqjc/sjtjcx/wyjx', element: <Wyjc /> },
|
||||
{ path: 'gcaqjc/sjtjcx/czcx', element: <Czcx /> },
|
||||
{ path: 'gcaqjc/sjtjcx/sjlr', element: <Sjlr /> },
|
||||
{ path: 'gcaqjc/sjtjcx/ndsytjb', element: <Ndsytjb /> },
|
||||
{ path: 'gcaqjc/sjtjcx/ndsltjb', element: <Ndsltjb /> },
|
||||
{ path: 'gcaqjc/sjtjcx/ndwytjb', element: <Ndwytjb /> },
|
||||
|
|
|
|||
|
|
@ -18,7 +18,6 @@ export default class PicStLayer extends BaseLayer {
|
|||
|
||||
onAdd() {
|
||||
PicStMapDataPromise().then((data) => {
|
||||
|
||||
this._dispatch.runtime.setMarkers({
|
||||
[this.getLayerName()]: data || []
|
||||
});
|
||||
|
|
|
|||
|
|
@ -2,6 +2,75 @@ import { SkRealPromiseWX } from "../../../../models/_/real";
|
|||
import BaseLayer from "../baselayer";
|
||||
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 {
|
||||
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 {
|
||||
id : i.stcd,
|
||||
name: i.stnm,
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -13,11 +13,11 @@ const Tabledata = ({tableData}) => {
|
|||
return (
|
||||
<>
|
||||
<Table rowKey="adcd"
|
||||
sticky
|
||||
columns={columns}
|
||||
pagination={false}
|
||||
dataSource={tableData}
|
||||
scroll={{ y: "420px"}}
|
||||
sticky
|
||||
columns={columns}
|
||||
pagination={false}
|
||||
dataSource={tableData}
|
||||
scroll={{ y: "420px"}}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -46,9 +46,9 @@ const ToolBar = ({search, defaultParams}) => {
|
|||
<Form.Item>
|
||||
<Button type="primary" htmlType="submit">查询</Button>
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
{/* <Form.Item>
|
||||
<Button htmlType="submit">导出</Button>
|
||||
</Form.Item>
|
||||
</Form.Item> */}
|
||||
</Form>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -88,12 +88,17 @@ function ShuikuPop({ id, data, dispatch }) {
|
|||
<Tabs.TabPane tab="数据查询" key="2">
|
||||
<Sksjcx record={data}/>
|
||||
</Tabs.TabPane>
|
||||
<Tabs.TabPane tab="图像监测" key="3">
|
||||
<Txjc record={data}/>
|
||||
</Tabs.TabPane>
|
||||
<Tabs.TabPane tab="视频监测" key="4">
|
||||
<Spjc record={data}/>
|
||||
</Tabs.TabPane>
|
||||
{
|
||||
data.id!=="61610701"?
|
||||
<>
|
||||
<Tabs.TabPane tab="图像监测" key="3">
|
||||
<Txjc record={data}/>
|
||||
</Tabs.TabPane>
|
||||
<Tabs.TabPane tab="视频监测" key="4">
|
||||
<Spjc record={data}/>
|
||||
</Tabs.TabPane>
|
||||
</>:null
|
||||
}
|
||||
</Tabs>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
// },
|
||||
]
|
||||
};
|
||||
}
|
||||
|
|
@ -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);
|
||||
|
|
@ -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;
|
||||
|
|
@ -41,6 +41,7 @@ import ShenLiu from './ShenLiu/index.js';
|
|||
import WeiYi from './WeiYi/index.js';
|
||||
import XunJian from './XunJian.js'
|
||||
import DaiChuLi from './DaiChuLi.js'
|
||||
import TuRang from './TuRang'
|
||||
|
||||
|
||||
import YinShuiGongCheng from './YinShuiGongCheng';//这个先不搞
|
||||
|
|
@ -88,6 +89,12 @@ function FeaturePops({ mapobj }) {
|
|||
<PciStPop id={id} data={data} dispatch={dispatch} record={data}/>
|
||||
</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') {
|
||||
// Comp = HdswPop;
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import AdcdLayer from "./Markers/AdcdLayer";
|
|||
import AdcdAllLayer from "./Markers/AdcdAllLayer";
|
||||
import FzdxLayer from "./Markers/FzdxLayer";
|
||||
import PicStLayer from "./Markers/PicStLayer";
|
||||
import TuRangLayer from "./Markers/TuRangLayer"
|
||||
import HdswLayer from "./Markers/HdswLayer";
|
||||
import XjHdswLayer from "./Markers/XjHdswLayer";
|
||||
import XxjyswzLayer from "./Markers/XxjyswzLayer";
|
||||
|
|
@ -90,6 +91,7 @@ export default class LayerMgr {
|
|||
HeLiuZhuJiLayer,
|
||||
// FzdxLayer,
|
||||
PicStLayer,
|
||||
TuRangLayer,
|
||||
// XjHdswLayer,
|
||||
// SmallSkRiskLayer, RhbjqLayer, XjRealDrpLayer, WarnLayer, ForecastLayer, RadarLayer, XxjyswzLayer
|
||||
];
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ export default function TuLi() {
|
|||
|
||||
return (
|
||||
<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_text1' style={{width:'40%',marginTop:'-2px'}}>
|
||||
<img width={20} height={20} src={`${process.env.PUBLIC_URL}/assets/xyt/fxdd/dm.png`} alt="" />
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import './index.less'
|
|||
import Yujing from './item_yujing/index.js'
|
||||
import Yuqing from './item_yuqing'
|
||||
import ShuiKu from './item_shuiku'
|
||||
import TuRangShangQing from './item_turangshangqing'
|
||||
import GongShui from './item_gongshui'
|
||||
import GongCheng from './item_gongcheng'
|
||||
import JianCe from './item_jiance'
|
||||
|
|
@ -22,7 +23,7 @@ import AnZhiDian from './item_anzhidian'
|
|||
import QSYDW from './item_qishiyedanwei'
|
||||
import YHJMH from './item_yanhejuminhu'
|
||||
import SetWxqStation from '../setMapStation/wxq'
|
||||
import Bzt from '../../gcaqjc/bzt'
|
||||
import Bzt from '../../gcaqjc/bzt2'
|
||||
|
||||
import Tuli from '../TuLi/Tuli.js'
|
||||
import Tuli2 from '../TuLi/Tuli2.js';
|
||||
|
|
@ -41,17 +42,13 @@ const items = [
|
|||
{ key:'1', label:'综合监视', children:[
|
||||
{ key:'11', label:'预警', labelRight:'预警', icon:'yujing' },
|
||||
{ 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:'16', label:'监测设备状态', labelRight:'监测设备运行', icon:'jianceshebeizhuangtai' },
|
||||
{ key:'17', label:'水质', labelRight:'水质', icon:'shuizhi' },
|
||||
// { key:'17', label:'水质', labelRight:'水质', icon:'shuizhi' },
|
||||
{ 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:'21', label:'巡查巡检', labelRight:'工程巡检', icon:'jianceshebeizhuangtai' },
|
||||
// { key:'22', label:'大坝', labelRight:'基本信息', icon:'daba' },
|
||||
|
|
@ -66,6 +63,11 @@ const items = [
|
|||
{ key:'4', label:'水资源调度', children:[
|
||||
{ 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' })
|
||||
}else if(a==='4'){
|
||||
setCheckedObj({ key:'41', label:'供水', labelRight:'今日供水实况', icon:'gongshui' })
|
||||
}else if(a==='5'){
|
||||
setCheckedObj({ key:'51', label:'水库', labelRight:'基本信息', icon:'shuiku' })
|
||||
}else{
|
||||
}
|
||||
}} 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 === '雨情' ? <Yuqing mySetTms={setTms} show={showTable}/>:null }
|
||||
{ checkedObj.label === '水情' ? <ShuiKu/>:null }
|
||||
{ checkedObj.label === '水库水情' ? <ShuiKu/>:null }
|
||||
{ checkedObj.label === '土壤墒情' ? <TuRangShangQing/>:null }
|
||||
{ checkedObj.label === '供水' ? <GongShui/>:null }
|
||||
{ checkedObj.label === '工程安全' ? <GongCheng/>:null }
|
||||
{ checkedObj.label === '监测设备状态' ? <JianCe/>:null }
|
||||
{ checkedObj.label === '水质' ? <ShuiZhi/>:null }
|
||||
{/* { checkedObj.label === '水质' ? <ShuiZhi/>:null } */}
|
||||
{ checkedObj.label === '视频点' ? <ShiPinDian/>:null }
|
||||
|
||||
{ checkedObj.label === '巡查巡检' ? <XunChaXunJian/>:null }
|
||||
|
|
@ -231,7 +236,7 @@ const HomePage = ({showPanels}) => {
|
|||
|
||||
<div className='homePage_leftBottomBox'>
|
||||
{ checkedObj.label==='雨情'?<Tuli/>:null }
|
||||
{ checkedObj.label==='水情'?<Tuli2/>:null }
|
||||
{ checkedObj.label==='水库水情'?<Tuli2/>:null }
|
||||
{ checkedObj.label==='供水'?<Tuli3/>:null }
|
||||
{ (checkedObj.label==='水库'||checkedObj.label==='大坝'||checkedObj.label==='溢洪道'||checkedObj.label==='视频点')?<Tuli4/>:null }
|
||||
{ (checkedObj.label==='危险区'||checkedObj.label==='安置点'||checkedObj.label==='企事业单位'||checkedObj.label==='沿河居民户')?<Tuli5/>:null }
|
||||
|
|
|
|||
|
|
@ -80,7 +80,7 @@ const Page = () => {
|
|||
<div>蓄水日期:</div>
|
||||
<div>{tableData?.storageDate?.slice(0,10)}</div>
|
||||
</dit>
|
||||
<dit className='home_shuizhi_item2'>
|
||||
{/* <dit className='home_shuizhi_item2'>
|
||||
<div>图片资料</div>
|
||||
<div></div>
|
||||
</dit>
|
||||
|
|
@ -118,12 +118,12 @@ const Page = () => {
|
|||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div> */}
|
||||
{/* */}
|
||||
<dit className='home_shuizhi_item2'>
|
||||
{/* <dit className='home_shuizhi_item2'>
|
||||
<div>视频资料:</div>
|
||||
<div></div>
|
||||
</dit>
|
||||
</dit> */}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -98,7 +98,7 @@ const Page = () => {
|
|||
<div>工程特性表:</div>
|
||||
<div style={{color:'#007AFDB3',cursor:'pointer'}} onClick={()=>setOpen(true)}>工程特性表详情</div>
|
||||
</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>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ const Page = () => {
|
|||
<div className="home_gongshui_item">
|
||||
<div className="home_gongshui_item_title">
|
||||
<img width={50} src={`${process.env.PUBLIC_URL}/assets/xyt/homeImg/gongshui2.png`} alt=""/>
|
||||
灌溉发电
|
||||
灌溉用水
|
||||
</div>
|
||||
<div className="home_gongshui_item_text" style={{display:'flex',flexDirection:'column'}}>
|
||||
<div style={{display:'flex'}}>
|
||||
|
|
|
|||
|
|
@ -4,10 +4,79 @@ import {reservoirlist, reswarn} from "../../../service/sssq"
|
|||
import { SkRealPromiseWX } from "../../../models/_/real";
|
||||
import genDamImage from '../../../components/DamGraph/DamImage'
|
||||
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 dispatch = useDispatch();
|
||||
const [ checked, setChecked ] = useState(0)
|
||||
const [data,setData] = useState([])
|
||||
console.log('aaa',data);
|
||||
useEffect(()=>{
|
||||
|
|
@ -21,21 +90,21 @@ const Page = () => {
|
|||
},[])
|
||||
|
||||
const getData = async (params) => {
|
||||
setData(await reservoirlist(params))
|
||||
const data1 = await reservoirlist(params)
|
||||
const data2 = [...data1,sj]
|
||||
setData(data2)
|
||||
}
|
||||
|
||||
const getShuiKu = ()=>{
|
||||
SkRealPromiseWX.get().then((res) => {
|
||||
const list = res.map((i)=>{
|
||||
const list = [...res,sj].map((i)=>{
|
||||
return {
|
||||
id : i.stcd,
|
||||
name: i.stnm,
|
||||
...i
|
||||
}
|
||||
})
|
||||
const data = list[0]
|
||||
|
||||
|
||||
const data = list[checked]
|
||||
dispatch.runtime.setFeaturePop({
|
||||
id: data.id,
|
||||
type: 'shuiku',
|
||||
|
|
@ -48,19 +117,34 @@ const Page = () => {
|
|||
}
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
{
|
||||
data ? (
|
||||
<MyImg record={{...data[0]}}/>
|
||||
) : (
|
||||
<div className="noPic">暂无数据</div>
|
||||
)
|
||||
}
|
||||
<div style={{position:'absolute',right:'14px',top:'15px',color:'#409EFF',cursor:'pointer',fontWeight:'500'}} onClick={getShuiKu}>详情</div>
|
||||
</div>
|
||||
|
||||
<div className="home_yuqing">
|
||||
<div className="home_yuqing_header" style={{marginBottom:'10px'}}>
|
||||
{
|
||||
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>
|
||||
{
|
||||
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/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 // 区域颜色的透明度
|
||||
},
|
||||
},
|
||||
]
|
||||
};
|
||||
}
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -25,7 +25,7 @@ const MyImg = ({ record }) => {
|
|||
return (
|
||||
<div style={{
|
||||
flexGrow: 1,
|
||||
height: '33vh',
|
||||
height: '300px',
|
||||
overflow: 'hidden',
|
||||
position: 'relative',
|
||||
backgroundColor: "#eff3f6",
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
@ -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;
|
||||
// }
|
||||
}
|
||||
|
|
@ -6,6 +6,7 @@ import apiurl from '../../../../service/apiurl';
|
|||
import { exportFile } from '../../../../utils/tools.js';
|
||||
import { httppost2,httppost5 } from '../../../../utils/request';
|
||||
import "./index.less"
|
||||
import MyTable from './table'
|
||||
const Page = () => {
|
||||
const role = useSelector(state => state.auth.role);
|
||||
|
||||
|
|
@ -16,10 +17,10 @@ const Page = () => {
|
|||
const [loading, setLoading] = useState(false)
|
||||
const wyList = ["X","Y","H"]
|
||||
const columns1 = [
|
||||
{ title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align:"center" },
|
||||
{ title: '序号', key: 'inx', dataIndex: 'inx', width: 150, align:"center"},
|
||||
];
|
||||
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(() => {
|
||||
if (newCols?.length > 0) {
|
||||
return newCols?.reduce((total, cur) => total + (cur.width), 0)
|
||||
|
||||
}
|
||||
}, [newCols]);
|
||||
console.log('width',width);
|
||||
|
||||
const exportExcel = () => {
|
||||
let params = {
|
||||
...searchVal,
|
||||
|
|
@ -112,7 +114,17 @@ const Page = () => {
|
|||
const getTable2Data = async (params) => {
|
||||
try {
|
||||
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) {
|
||||
console.log(error);
|
||||
}
|
||||
|
|
@ -154,7 +166,7 @@ const Page = () => {
|
|||
/>
|
||||
</Card>
|
||||
<div className="ant-card-body" style={{ padding: "20px 0 0 0" }}>
|
||||
<Table
|
||||
{/* <Table
|
||||
columns={newCols}
|
||||
rowKey="inx"
|
||||
loading={loading}
|
||||
|
|
@ -197,7 +209,17 @@ const Page = () => {
|
|||
</Table.Summary>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
/> */}
|
||||
{
|
||||
(newCols?.length>0 && width!==undefined)?
|
||||
<MyTable
|
||||
columns={newCols}
|
||||
dataSource={dataSource}
|
||||
width={width}
|
||||
loading={loading}
|
||||
table2Data={table2Data}
|
||||
/>:null
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
@ -78,6 +78,9 @@ const ToolBar = ({ setSearchVal, onSave, storeData,role }) => {
|
|||
allowClear
|
||||
style={{ width: "350px" }}
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
onChange={(v)=>{
|
||||
form.setFieldValue('ranger',null)
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="常用时段" name="ranger">
|
||||
|
|
|
|||
|
|
@ -35,6 +35,8 @@ const ToolBar = ({ setSearchVal, onSave, storeData,role }) => {
|
|||
const [form] = Form.useForm();
|
||||
const [dmList, setDmList] = useState([])
|
||||
const [codeList, setCodeList] = useState([])
|
||||
const [dmCode,setDmCode] = useState('')
|
||||
|
||||
|
||||
const getDmList = async () => {
|
||||
try {
|
||||
|
|
@ -48,7 +50,7 @@ const ToolBar = ({ setSearchVal, onSave, storeData,role }) => {
|
|||
const getStationCode = async () => {
|
||||
try {
|
||||
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) {
|
||||
console.log(error);
|
||||
}
|
||||
|
|
@ -102,6 +104,9 @@ const ToolBar = ({ setSearchVal, onSave, storeData,role }) => {
|
|||
allowClear
|
||||
style={{ width: "350px" }}
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
onChange={(v)=>{
|
||||
form.setFieldValue('ranger',null)
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="常用时段" name="ranger">
|
||||
|
|
@ -116,13 +121,17 @@ const ToolBar = ({ setSearchVal, onSave, storeData,role }) => {
|
|||
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}
|
||||
options={codeList.filter(o=>dmCode?o.profileCode===dmCode:true)}
|
||||
/>
|
||||
</Form.Item>
|
||||
{searchBtn ? <Form.Item>
|
||||
|
|
|
|||
|
|
@ -93,6 +93,9 @@ const ToolBar = ({ setSearchVal, onSave, storeData,role }) => {
|
|||
allowClear
|
||||
style={{ width: "350px" }}
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
onChange={(v)=>{
|
||||
form.setFieldValue('ranger',null)
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="常用时段" name="ranger">
|
||||
|
|
|
|||
|
|
@ -125,7 +125,7 @@ export default function drpOption (data) {
|
|||
],
|
||||
series: [
|
||||
{
|
||||
name: '发电灌溉',
|
||||
name: '灌溉用水',
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
smooth: true,
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ const Page = () => {
|
|||
{ title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align:"center" },
|
||||
{ title: '时间', key: 'tm', dataIndex: 'tm', width: 200, ellipsis: true, align:"center" },
|
||||
{
|
||||
title: '发电灌溉',
|
||||
title: '灌溉用水',
|
||||
align: "center",
|
||||
children: [
|
||||
{
|
||||
|
|
@ -62,7 +62,7 @@ const Page = () => {
|
|||
{ title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align:"center" },
|
||||
{ title: '时间', key: 'tm', dataIndex: 'tm', width: 100, ellipsis: true, align:"center" },
|
||||
{
|
||||
title: '发电灌溉',
|
||||
title: '灌溉用水',
|
||||
align: "center",
|
||||
children: [
|
||||
{
|
||||
|
|
@ -266,7 +266,7 @@ const Page = () => {
|
|||
<div style={{flex:1}}>
|
||||
<div style={{color:"#ffa87c",display:"flex",columnGap:20}}>
|
||||
<div className='des-title'>
|
||||
<div>发电灌溉总合计(万m³)：</div>
|
||||
<div>灌溉用水总合计(万m³)：</div>
|
||||
<div style={{margin:"10px 0"}}>水厂取水总合计(万m³)：</div>
|
||||
<div>供水总合计(万m³)：</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ let title = "总计";
|
|||
let color = ["#73a0fa", "#52c1f5"];
|
||||
let echartData = [
|
||||
{
|
||||
name: "发电灌溉",
|
||||
name: "灌溉用水",
|
||||
value: parseFloat(obj?.shgs?.toFixed(2))
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -2,12 +2,87 @@ import React, { useEffect, useState } from 'react'
|
|||
import { reservoirlist, } from "../../../../service/sssq";
|
||||
import Sssw from './sssw';
|
||||
import Sjcx from '../../../Home/MapCtrl/components/Sksjcx/index'
|
||||
import NormalSelect from '../../../../components/Form/NormalSelect';
|
||||
import "./index.less"
|
||||
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() {
|
||||
const [tableData, setTableData] = useState([])
|
||||
const [selected, setSelected] = useState(0)
|
||||
|
||||
const getData = async (params) => {
|
||||
setTableData(await reservoirlist(params));
|
||||
const data = await await reservoirlist(params)
|
||||
setTableData([...data,sj]);
|
||||
}
|
||||
useEffect(() => {
|
||||
let option = {
|
||||
|
|
@ -25,10 +100,18 @@ export default function Sksq() {
|
|||
<img alt='' src={`${process.env.PUBLIC_URL}/assets/panelTitle.png`} />
|
||||
<span style={{marginLeft:10}}>实时水位</span>
|
||||
</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 className='sssw-content'>
|
||||
<Sssw data={tableData[0] || {}}/>
|
||||
<Sssw data={tableData[selected] || {}}/>
|
||||
</div>
|
||||
</div>
|
||||
<div className='content-right'>
|
||||
|
|
@ -39,7 +122,7 @@ export default function Sksq() {
|
|||
</div>
|
||||
</div>
|
||||
<div className='sjcx-content'>
|
||||
<Sjcx record={{...tableData[0],height:true} || {}}/>
|
||||
<Sjcx record={{...tableData[selected],height:true} || {}}/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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'，即去掉圆点
|
||||
},
|
||||
]
|
||||
};
|
||||
}
|
||||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
@ -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 ?? '-' } <span style={{fontSize:14}}>m³/s</span></div>
|
||||
<div className='name'>溢洪流量</div>
|
||||
</div>
|
||||
<div className='drp-item'>
|
||||
<div className='value'>{detail?.h3 ?? '-' } <span style={{fontSize:14}}>万m³</span></div>
|
||||
<div className='name'>当日溢洪量</div>
|
||||
</div>
|
||||
<div className='drp-item'>
|
||||
<div className='value'>{detail?.h6 ?? '-' } <span style={{fontSize:14}}>万m³</span></div>
|
||||
<div className='name'>当月溢洪量</div>
|
||||
</div>
|
||||
<div className='drp-item'>
|
||||
<div className='value'>{detail?.h12 ?? '-' } <span style={{fontSize:14}}>万m³</span></div>
|
||||
<div className='name'>当年溢洪量</div>
|
||||
</div>
|
||||
<div className='drp-item'>
|
||||
<div className='value'>{detail?.h24 ?? '-' } <span style={{fontSize:14}}>次</span></div>
|
||||
<div className='name'>本年溢洪次数</div>
|
||||
</div> <div className='drp-item'>
|
||||
<div className='value'>{detail?.h48 ?? '-' } <span style={{fontSize:14}}>万m³</span></div>
|
||||
<div className='name'>本年单次最大溢洪量</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
@ -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
|
||||
// },
|
||||
]
|
||||
};
|
||||
}
|
||||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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"> </div>
|
||||
<div className="footer-num"></div>
|
||||
</div>
|
||||
<div className="footer-item">
|
||||
<div className="footer-name"> </div>
|
||||
<div className="footer-num"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -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 ?? '-' }% <span style={{fontSize:14}}>RH</span></div>
|
||||
<div className='name'>实时数据</div>
|
||||
</div>
|
||||
<div className='drp-item'>
|
||||
<div className='value'>{detail?.h3 ?? '-' }% <span style={{fontSize:14}}>RH</span></div>
|
||||
<div className='name'>近1周（极值）</div>
|
||||
</div>
|
||||
<div className='drp-item'>
|
||||
<div className='value'>{detail?.h6 ?? '-' }% <span style={{fontSize:14}}>RH</span></div>
|
||||
<div className='name'>近1月（极值）</div>
|
||||
</div>
|
||||
<div className='drp-item'>
|
||||
<div className='value'>{detail?.h12 ?? '-' }% <span style={{fontSize:14}}>RH</span></div>
|
||||
<div className='name'>近3月（极值）</div>
|
||||
</div>
|
||||
<div className='drp-item'>
|
||||
<div className='value'>{detail?.h24 ?? '-' }% <span style={{fontSize:14}}>RH</span></div>
|
||||
<div className='name'>近6月（极值）</div>
|
||||
</div> <div className='drp-item'>
|
||||
<div className='value'>{detail?.h48 ?? '-' }% <span style={{fontSize:14}}>RH</span></div>
|
||||
<div className='name'>近1年（极值）</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
@ -14,8 +14,8 @@ export default function Zrtx() {
|
|||
title: '序号', dataIndex: 'index', key: 'index', align: "center",
|
||||
render: (r, c,i) => <span>{i + 1}</span>
|
||||
},
|
||||
{ title: '水位(m)', dataIndex: 'q', key: 'rz',align:"center" },
|
||||
{ title: '流量(m³/s)', dataIndex: 'z', key: 'z',align:"center" },
|
||||
{ title: '水位(m)', dataIndex: 'z', key: 'z',align:"center" },
|
||||
{ title: '流量(m³/s)', dataIndex: 'q', key: 'rz',align:"center" },
|
||||
{
|
||||
title: '操作', dataIndex: 'op', key: 'op', align: "center",width:200,
|
||||
render: (value, row, index) => (<CrudOpRender_text del={true} edit={true} command={(cmd) => () => command(cmd)(row)} />)
|
||||
|
|
@ -27,7 +27,7 @@ export default function Zrtx() {
|
|||
}, [data])
|
||||
const getData = async () => {
|
||||
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})))
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
|
|
|
|||
|
|
@ -118,7 +118,7 @@ const Page = () => {
|
|||
setNum(data.total)
|
||||
}
|
||||
})()
|
||||
})
|
||||
},[])
|
||||
|
||||
|
||||
return (
|
||||
|
|
|
|||
Loading…
Reference in New Issue