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

feat(): 渗压监测模块开发

master
李神峰 2024-12-31 17:58:52 +08:00
parent 30a603455b
commit 23c32c40fb
18 changed files with 956 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/service/apiurl.js
View File

@ -77,7 +77,15 @@ const apiurl = {
wysave: service_ykz + '/osmoticShiftR/insert',
wyedit: service_ykz + '/osmoticShiftR/update',
wydelete: service_ykz + '/osmoticShiftR/del',
wyexport:service_ykz + '/osmoticShiftR/export'
wyexport: service_ykz + '/osmoticShiftR/export',
jgfpage: service_ykz + '/osmoticJointRReal/page',
jgfexport: service_ykz + '/osmoticJointR/export',
jgflist:service_ykz + '/osmoticJointR/list'
},
syjc: {
page: service_ykz + '/osmoticPressRReal/page',
export: service_ykz + '/osmoticPressRReal/export',
list:service_ykz + '/osmoticPressR/list'
},
cdgl: {
page: service_ykz + '/osmoticStationInfo/page',

2
src/views/Home/index.less
View File

@ -23,7 +23,7 @@
}
.title_name{
position: absolute;
top: 130px;
top: 230px;
// left: 41%;
width: 350px;
height: 70px;

2
src/views/Home/zmjk/consts.ts
View File

@ -1,5 +1,5 @@
export const CanvasW = 1080;
export const CanvasH = 640;
export const CanvasH = 470;
export const Horizontal = CanvasH * 1.4 / 3;
export const ViewCenter = { x: CanvasW * 0.5, y: Horizontal };

18
src/views/Home/zmjk/index.js
View File

@ -123,7 +123,7 @@ const Page = () => {
const [list, setList ] = useState([])
const hole = 10;//zmobj.gaorNum;
const xunit = CanvasW / (2 + hole);
const xunit = CanvasW / (hole - 5);
const pts = contextCoordinates(xunit, hole);
const eqpnoList = useMemo(() => damList ? new Array(damList.length).fill(0).map((o, index) => index) : [], [damList]);
@ -186,33 +186,33 @@ const Page = () => {
<Topper2 pts={pts} waterRatio={waterRatio} />
</Stage>
<div style={{ position: 'absolute', left: 0, top: 20, width: '100%', height: 100, display: 'flex', alignContent: 'center' }}>
<div key="sider1" style={{ flexGrow: 1, width: 100 }}></div>
<div key="sider1" style={{ flexGrow: 1, width: 135 }}></div>
{
eqpnoList.map(o => (
<div key={o}
onClick={() => {}}
className='o' style={{ flexGrow: 1, width: 100, display: 'flex', justifyContent: 'center', cursor: 'pointer' }}>
<div style={{ width: 80, height: 40, backgroundColor: '#43c4e7', borderRadius: 12, color: '#fff', display: 'flex', justifyContent: 'center', alignItems: 'center', fontSize: 28 }}>#{o+1}</div>
className='o' style={{ flexGrow: 1, width: 0, display: 'flex', justifyContent: 'center', cursor: 'pointer' }}>
<div style={{ width: 60, height: 40, backgroundColor: '#43c4e7', borderRadius: 12, color: '#fff', display: 'flex', justifyContent: 'center', alignItems: 'center', fontSize: 28 }}>#{o+1}</div>
</div>
))
}
<div key="sider2" style={{ flexGrow: 1, width: 100 }}></div>
<div key="sider2" style={{ flexGrow: 1, width: 135 }}></div>
</div>
<div style={{ position: 'absolute', left: 0, bottom: 20, width: '100%', height: 100, display: 'flex', alignContent: 'center' }}>
<div key="sider1" style={{ flexGrow: 1, width: 100 }}></div>
<div style={{ position: 'absolute', left: 0, bottom: 155, width: '100%', height: 100, display: 'flex', alignContent: 'center' }}>
<div key="sider1" style={{ flexGrow: 1, width: 280 }}></div>
{
eqpnoList.map(o => (
<div key={o} className='o' style={{ flexGrow: 1, width: 100, display: 'flex', justifyContent: 'center' }}>
<div
onClick={() => {}}
style={{ width: 80, height: 32, border: '1px solid #4c5dce', backgroundColor: '#315da2', borderRadius: 4, color: '#fff', display: 'flex', justifyContent: 'center', alignItems: 'center', fontSize: 18, cursor: 'pointer' }}
style={{ width: 60, height: 32, border: '1px solid #4c5dce', backgroundColor: '#315da2', borderRadius: 4, color: '#fff', display: 'flex', justifyContent: 'center', alignItems: 'center', fontSize: 18, cursor: 'pointer' }}
>
{renAperture(damList[o]?.realAperture)}
</div>
</div>
))
}
<div key="sider2" style={{ flexGrow: 1, width: 100 }}></div>
<div key="sider2" style={{ flexGrow: 1, width: 280 }}></div>
</div>
</dvi>
</div>

2
src/views/Home/zmjk/index.less
View File

@ -3,7 +3,7 @@
display: flex;
height: 100%;
.sg_zmjk_left{
top: 85px;
top: 250px;
position: relative;
width: 1080px;
height: 640px;

1
src/views/SafeWatch/Dmgl/index.js
View File

@ -24,7 +24,6 @@ const Page = () => {
title: '断面名称', key: 'profileName', dataIndex: 'profileName', width: 150,
},
{ title: '备注', key: 'remark', dataIndex: 'remark', width: 150},
{
title: '操作', key: 'operation', width: 200, fixed: 'right',align: 'center',
render: (value, row, index) => (

32
src/views/SafeWatch/SlWatch/TableData.js Normal file
View File

@ -0,0 +1,32 @@
import {Table} from 'antd';
import React, {useEffect, useState} from 'react';
import moment from 'moment'
const Tabledata = ({tableData}) => {
const columns = [
{ title: '序号', key: 'inx', dataIndex: 'inx', align: "center", render: (v, r, i) => <span>{i + 1}</span> },
{ title: '测点编号', key: 'stationCode', dataIndex: 'stationCode'},
{ title: '水位(mm)', key: 'value', dataIndex: 'value'},
{ title: '水压(KPa)', key: 'press', dataIndex: 'press'},
{ title: '水位高程(m)', key: 'waterEle', dataIndex: 'waterEle'},
{ title: '温度(°℃)', key: 'temp', dataIndex: 'temp'},
{ title: '模数(F)', key: 'modulus', dataIndex: 'modulus'},
{title: '监测时间', key: 'tm', dataIndex: 'tm'},
];
return (
<>
<Table rowKey="tm"
sticky
columns={columns}
pagination={false}
dataSource={tableData}
scroll={{ y: "420px"}}
/>
</>
)
}
export default Tabledata

65
src/views/SafeWatch/SlWatch/historyToolbar.js Normal file
View File

@ -0,0 +1,65 @@
import React, { useEffect, useState } from 'react';
import { Form, Input, Button, DatePicker, Radio } from 'antd';
import NormalSelect from '../../../components/Form/NormalSelect';
import moment from 'moment';
const { RangePicker } = DatePicker;
const ToolBar = ({ setHistorySearchVal, exportFile1, setTabVal }) => {
const start = moment().subtract(7, 'days').format('YYYY-MM-DD 00:00:00')
const end = moment().format('YYYY-MM-DD 23:59:59')
const [form] = Form.useForm();
const onFinish = (values) => {
let dateTimeRangeSo;
if (values.tm) {
dateTimeRangeSo = {
start: moment(values.tm[0]).format('YYYY-MM-DD HH:mm:ss'),
end: moment(values.tm[1]).format('YYYY-MM-DD HH:mm:ss')
}
}
delete values.tm
setHistorySearchVal({ ...values, dateTimeRangeSo });
}
useEffect(() => {
form.setFieldValue('tm', [moment(start), moment(end)])
setHistorySearchVal({ dateTimeRangeSo: { start: start, end: end } })
}, [])
return (
<>
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
<Form form={form} className='toolbarBox' layout="inline" onFinish={onFinish}>
<Form.Item label="时间段" name="tm">
<RangePicker
allowClear
showTime
style={{ width: "280px" }}
format="YYYY-MM-DD"
/>
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">查询</Button>
</Form.Item>
<Form.Item>
<Button onClick={() => form.resetFields()}>重置</Button>
</Form.Item>
<Form.Item>
<Button onClick={() => exportFile1()}>导出</Button>
</Form.Item>
<Form.Item style={{ marginLeft: '140px' }}>
<Radio.Group onChange={(e) => { setTabVal(e.target.value) }} defaultValue="1" size="large" buttonStyle="outline">
<Radio.Button value="1">数据图</Radio.Button>
<Radio.Button value="2">数据表</Radio.Button>
</Radio.Group>
</Form.Item>
</Form>
</div>
</>
);
}
export default ToolBar;

141
src/views/SafeWatch/SlWatch/index.js
View File

@ -1,46 +1,68 @@
import React, { Fragment, useRef, useMemo,useEffect,useState } from 'react';
import React, { Fragment, useRef, useMemo, useEffect, useState } from 'react';
import BasicCrudModal from '../../../components/crud/BasicCrudModal';
import { Table, Card, Modal, Form, Input, Button, Row,Col, Timeline, message, Tabs,Image } from 'antd';
import { Table, Card, Modal, Form, Input, Button, Row, Col, Timeline, message, Tabs, Image } from 'antd';
import ToolBar from './toolbar';
import ReactEcharts from 'echarts-for-react';
import apiurl from '../../../service/apiurl';
import usePageTable from '../../../components/crud/usePageTable2';
import { createCrudService } from '../../../components/crud/_';
import { httppost5 } from '../../../utils/request';
import { httppost5, httppost2 } from '../../../utils/request';
import { exportFile } from '../../../utils/tools.js';
import HistoryToolBar from './historyToolbar'
import TableData from './TableData';
import drpOption from './options'
const Page = () => {
const types = {
0: "设备维修",
1: '设备更换',
2:"结构加固"
}
const [searchVal, setSearchVal] = useState(false)
const [jgfOpen, setJgfOpen] = useState(false)
const [clickItem, setClickItem] = useState(false)
const [tabVal, setTabVal] = useState('1')
const [historySearchVal, setHistorySearchVal] = useState(false)
const [tableData, setTableData] = useState([])
const option = useMemo(() => drpOption(tableData), [tableData])
const columns = [
{ title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align:"center" },
{ title: '监测断面', key: 'projectName', dataIndex: 'projectName', width: 150},
{ title: '测点编号', key: 'projectAddr', dataIndex: 'projectAddr', width: 150},
{ title: '测压管水位(m)', key: 'projectAddr', dataIndex: 'projectAddr', width: 150},
{ title: '渗压(KPa)', key: 'projectAddr', dataIndex: 'projectAddr', width: 150},
{ title: '振弦(Hz)', key: 'projectAddr', dataIndex: 'projectAddr', width: 150},
{ title: '温度(℃)', key: 'projectAddr', dataIndex: 'projectAddr', width: 150},
{ title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align: "center" },
{ title: '测点编号', key: 'stationCode', dataIndex: 'stationCode', width: 150 },
{ title: '水位(mm)', key: 'value', dataIndex: 'value', width: 150 },
{ title: '水压(KPa)', key: 'press', dataIndex: 'press', width: 150 },
{ title: '水位高程(m)', key: 'waterEle', dataIndex: 'waterEle', width: 150 },
{ title: '温度(°℃)', key: 'temp', dataIndex: 'temp', width: 150 },
{ title: '模数(F)', key: 'modulus', dataIndex: 'modulus', width: 150 },
{ title: '测点位置', key: 'location', dataIndex: 'location', width: 150,ellipse:true },
{
title: '监测时间', key: 'createTime', dataIndex: 'createTime', width: 140,
title: '监测时间', key: 'tm', dataIndex: 'tm', width: 140,
},
];
const width = useMemo(() => columns.reduce((total, cur) => total + (cur.width), 0), [columns]);
const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.sbwh.whfabz.page).find_noCode);
// 导出
const exportExcel = () => {
let params = {
...searchVal,
}
httppost5(apiurl.sbwh.cgtzgl.export, params).then(res => {
exportFile(`渗流监测.xlsx`,res.data)
})
}
const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.aqjc.syjc.page).find_noCode);
useEffect(()=>{
// 导出
const exportExcel = () => {
let params = {
...historySearchVal,
}
httppost5(apiurl.aqjc.syjc.export, params).then(res => {
exportFile(`${clickItem.stationCode}.xlsx`, res.data)
})
}
// 单击行的回调
const clickRow = (r) => {
setClickItem(r)
setJgfOpen(true)
}
const getHistoryData = async (parmas) => {
try {
const res = await httppost2(apiurl.aqjc.syjc.list, parmas)
if (res.code == 200) {
setTableData(res.data)
}
} catch (error) {
console.log(error);
}
}
useEffect(() => {
const params = {
search: {
...searchVal,
@ -48,12 +70,20 @@ const Page = () => {
};
search(params)
}, [searchVal])
useEffect(() => {
if (historySearchVal && clickItem) {
const params = {
...historySearchVal,
stationCode: clickItem.stationCode
}
getHistoryData(params)
}
}, [historySearchVal, clickItem])
return (
<>
<div className='content-root clearFloat xybm' style={{paddingBottom:"0"}}>
<div className='lf CrudAdcdTreeTableBox' style={{width:"100%",overflowY:"auto"}}>
<div className='content-root clearFloat xybm' style={{ paddingBottom: "0" }}>
<div className='lf CrudAdcdTreeTableBox' style={{ width: "100%", overflowY: "auto" }}>
<Card className='nonebox'>
<ToolBar
setSearchVal={setSearchVal}
@ -61,9 +91,54 @@ const Page = () => {
/>
</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 )"}}/>
<Table
columns={columns}
rowKey="tm"
{...tableProps}
scroll={{ x: width, y: "calc( 100vh - 400px )" }}
onRow={(r) => {
return {
onClick: () => {
clickRow(r)
}
}
}}
/>
</div>
</div>
<Modal
open={jgfOpen}
width={1000}
title={<div style={{ display: 'flex', columnGap: 10, alignItems: 'center' }}>
<span style={{ width: 5, height: 16, background: "#3477f5" }}></span>
<span style={{ fontSize: 16, marginLeft: 10 }}>{clickItem.stationCode}</span>
</div>}
footer={null}
onCancel={() => setJgfOpen(false)}
destroyOnClose
>
<>
<HistoryToolBar
exportFile1={exportExcel}
setTabVal={setTabVal}
setHistorySearchVal={setHistorySearchVal}
/>
<div style={{ height: 504, padding: '5px 10px 20px 10px' }}>
{
tabVal == '1' ?
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>
: null
}
{
tabVal === '2' ? <div style={{ marginTop: '10px' }}><TableData tableData={tableData} /></div> : null
}
</div>
</>
</Modal>
</div>
</>
);

296
src/views/SafeWatch/SlWatch/options.js Normal file
View File

@ -0,0 +1,296 @@
export default function options(data) {
// 水位
const rzMin = Math.floor(Math.min(...data.map(item => item.value)));
const rzMax = Math.ceil(Math.max(...data.map(item => item.value)));
// 水压
const pressMin = Math.floor(Math.min(...data.map(item => item.press)));
const pressMax = Math.ceil(Math.max(...data.map(item => item.press)));
// 高程
const waterEleMin = Math.floor(Math.min(...data.map(item => item.waterEle)));
const waterEleMax = Math.ceil(Math.max(...data.map(item => item.waterEle)));
// 温度
const tempMin = Math.floor(Math.min(...data.map(item => item.temp)));
const tempMax = Math.ceil(Math.max(...data.map(item => item.temp)));
// 模数
const modulusMin = Math.floor(Math.min(...data.map(item => item.modulus)));
const modulusMax = Math.ceil(Math.max(...data.map(item => item.modulus)));
return {
tooltip: {
trigger: 'axis',
},
legend: {
top: '3%',
data: ['水位','水压','水位高程','温度', '模数']
},
grid: {
left: 35,
right: 120
},
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: '#8c8c8c',
width: 1,
}
},
axisTick: {
show: false,
},
}
],
yAxis: [
{
type: 'value',
position: 'left',
name: "水位(mm)",
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: rzMin,
max: rzMax,
},
{
type: 'value',
position: 'right',
name: "水压(KPa)",
offset: -40,
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: pressMin,
max: pressMax,
},
{
type: 'value',
position: 'right',
name: "水位高程(m)",
offset: -120,
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: waterEleMin,
max: waterEleMax,
},
{
type: 'value',
position: 'right',
name: "温度(°℃)",
offset: 25,
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: tempMin,
max: tempMax,
},
{
type: 'value',
position: 'right',
name: "模数(F)",
offset: 80,
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: modulusMin,
max: modulusMax,
}
],
series: [
{
yAxisIndex: 0,
name: '水位',
type: 'line',
color: "#d6eaec",
data: data.map(o => o.value),
symbol: 'none', // 设置标记点为'none'，即去掉圆点
smooth: 0.5
},
{
yAxisIndex: 1,
name: '水压',
type: 'line',
color: "#60a0f8",
lineStyle: {
// type: "dashed"
},
data: data.map(o => o.press),
symbol: 'none', // 设置标记点为'none'，即去掉圆点
smooth: 0.5
},
{
yAxisIndex: 2,
name: '水位高程',
type: 'line',
// color: "#60a0f8",
lineStyle: {
// type: "dashed"
},
data: data.map(o => o.waterEle),
symbol: 'none', // 设置标记点为'none'，即去掉圆点
smooth: 0.5
},
{
yAxisIndex: 3,
name: '温度',
type: 'line',
// color: "#60a0f8",
lineStyle: {
// type: "dashed"
},
data: data.map(o => o.temp),
symbol: 'none', // 设置标记点为'none'，即去掉圆点
smooth: 0.5
},
{
yAxisIndex: 4,
name: '模数',
type: 'line',
// color: "#60a0f8",
lineStyle: {
// type: "dashed"
},
data: data.map(o => o.modulus),
symbol: 'none', // 设置标记点为'none'，即去掉圆点
smooth: 0.5
},
]
}
}

13
src/views/SafeWatch/SlWatch/toolbar.js
View File

@ -38,20 +38,17 @@ const ToolBar = ({ setSearchVal, exportFile1, storeData, role }) => {
<>
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
<Form form={form} className='toolbarBox' layout="inline" onFinish={onFinish}>
<Form.Item label="监测断面" name="projectName">
<Form.Item label="测点编号" name="stationCode">
<NormalSelect allowClear style={{ width: '150px' }} options={types} />
</Form.Item>
<Form.Item label="测点编号" name="maintainType">
<NormalSelect allowClear style={{ width: '150px' }} options={types} />
</Form.Item>
<Form.Item label="监测时间" name="tm">
{/* <Form.Item label="监测时间" name="tm">
<RangePicker
allowClear
showTime
style={{ width: "330px" }}
format="YYYY-MM-DD HH:mm:ss"
/>
</Form.Item>
</Form.Item> */}
<Form.Item>
<Button type="primary" htmlType="submit">查询</Button>
</Form.Item>
@ -59,9 +56,9 @@ const ToolBar = ({ setSearchVal, exportFile1, storeData, role }) => {
<Form.Item>
<Button onClick={() => form.resetFields()}>重置</Button>
</Form.Item>
<Form.Item>
{/* <Form.Item>
<Button onClick={() => exportFile1()}>导出</Button>
</Form.Item>
</Form.Item> */}
</Form>
</div>
</>

30
src/views/SafeWatch/TransformWatch/TableData.js Normal file
View File

@ -0,0 +1,30 @@
import {Table} from 'antd';
import React, {useEffect, useState} from 'react';
import moment from 'moment'
const Tabledata = ({tableData}) => {
const columns = [
{ title: '序号', key: 'inx', dataIndex: 'inx', align: "center", render: (v, r, i) => <span>{i + 1}</span> },
{ title: '监测点', key: 'stationCode', dataIndex: 'stationCode' },
{ title: '缝开度(mm)', key: 'value', dataIndex: 'value'},
{ title: '温度(°℃)', key: 'temp', dataIndex: 'temp'},
{ title: '模数(F)', key: 'modulus', dataIndex: 'modulus'},
{title: '监测时间', key: 'tm', dataIndex: 'tm'},
];
return (
<>
<Table rowKey="tm"
sticky
columns={columns}
pagination={false}
dataSource={tableData}
scroll={{ y: "420px"}}
/>
</>
)
}
export default Tabledata

65
src/views/SafeWatch/TransformWatch/historyToolbar.js Normal file
View File

@ -0,0 +1,65 @@
import React, { useEffect, useState } from 'react';
import { Form, Input, Button, DatePicker, Radio } from 'antd';
import NormalSelect from '../../../components/Form/NormalSelect';
import moment from 'moment';
const { RangePicker } = DatePicker;
const ToolBar = ({ setHistorySearchVal, exportFile1, setTabVal }) => {
const start = moment().subtract(7, 'days').format('YYYY-MM-DD 00:00:00')
const end = moment().format('YYYY-MM-DD 23:59:59')
const [form] = Form.useForm();
const onFinish = (values) => {
let dateTimeRangeSo;
if (values.tm) {
dateTimeRangeSo = {
start: moment(values.tm[0]).format('YYYY-MM-DD HH:mm:ss'),
end: moment(values.tm[1]).format('YYYY-MM-DD HH:mm:ss')
}
}
delete values.tm
setHistorySearchVal({ ...values, dateTimeRangeSo });
}
useEffect(() => {
form.setFieldValue('tm', [moment(start), moment(end)])
setHistorySearchVal({ dateTimeRangeSo: { start: start, end: end } })
}, [])
return (
<>
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
<Form form={form} className='toolbarBox' layout="inline" onFinish={onFinish}>
<Form.Item label="时间段" name="tm">
<RangePicker
allowClear
showTime
style={{ width: "280px" }}
format="YYYY-MM-DD"
/>
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">查询</Button>
</Form.Item>
<Form.Item>
<Button onClick={() => form.resetFields()}>重置</Button>
</Form.Item>
<Form.Item>
<Button onClick={() => exportFile1()}>导出</Button>
</Form.Item>
<Form.Item style={{ marginLeft: '140px' }}>
<Radio.Group onChange={(e) => { setTabVal(e.target.value) }} defaultValue="1" size="large" buttonStyle="outline">
<Radio.Button value="1">数据图</Radio.Button>
<Radio.Button value="2">数据表</Radio.Button>
</Radio.Group>
</Form.Item>
</Form>
</div>
</>
);
}
export default ToolBar;

155
src/views/SafeWatch/TransformWatch/index.js
View File

@ -2,28 +2,31 @@ import React, { Fragment, useRef, useMemo, useEffect, useState } from 'react';
import BasicCrudModal from '../../../components/crud/BasicCrudModal';
import { Table, Card, Modal, Form, Input, Button, Row, Col, Timeline, message, Tabs, Image } from 'antd';
import ToolBar from './toolbar';
import ReactEcharts from 'echarts-for-react';
import ModalForm from './form';
import apiurl from '../../../service/apiurl';
import usePageTable from '../../../components/crud/usePageTable2';
import { createCrudService } from '../../../components/crud/_';
import { CrudOpRender_text } from '../../../components/crud/CrudOpRender';
import { httppost5 } from '../../../utils/request';
import { httppost2, httppost5 } from '../../../utils/request';
import { exportFile } from '../../../utils/tools.js';
import HistoryToolBar from './historyToolbar'
import TableData from './TableData';
import drpOption from './options'
const Page = () => {
const types = {
0: "设备维修",
1: '设备更换',
2: "结构加固"
}
const refModal = useRef();
const [searchVal, setSearchVal] = useState(false)
const [tabsActive, setTabsActive] = useState("1")
const [tabsActive, setTabsActive] = useState(0)
const [jgfOpen, setJgfOpen] = useState(false)
const [clickItem, setClickItem] = useState(false)
const [tabVal, setTabVal] = useState('1')
const [historySearchVal, setHistorySearchVal] = useState(false)
const [ tableData, setTableData ] = useState([])
const option = useMemo(() => drpOption(tableData), [tableData])
const wColumns = [
{ title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align: "center" },
{ title: '监测点', key: 'stationCode', dataIndex: 'stationCode', width: 150},
{ title: 'X方向位移(mm)', key: 'x', dataIndex: 'x', width: 150},
{ title: '监测点', key: 'stationCode', dataIndex: 'stationCode', width: 150 },
{ title: 'X方向位移(mm)', key: 'x', dataIndex: 'x', width: 150 },
{ title: 'Y方向位移(mm)', key: 'y', dataIndex: 'y', width: 150 },
{ title: 'H方向位移(mm)', key: 'h', dataIndex: 'h', width: 150 },
{
@ -41,15 +44,20 @@ const Page = () => {
];
const jColumns = [
{ title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align: "center" },
{ title: '监测点', key: 'stationCode', dataIndex: 'stationCode', width: 150},
{ title: '缝开度(mm)', key: 'createUserName', dataIndex: 'createUserName', width: 150 },
{ title: '监测点', key: 'stationCode', dataIndex: 'stationCode', width: 150 },
{ title: '缝开度(mm)', key: 'value', dataIndex: 'value', width: 150 },
{ title: '温度(°℃)', key: 'temp', dataIndex: 'temp', width: 150 },
{ title: '模数(F)', key: 'modulus', dataIndex: 'modulus', width: 150 },
{
title: '监测时间', key: 'tm', dataIndex: 'tm', width: 140,
},
{ title: '测点位置', key: 'location', dataIndex: 'location', width: 150,ellipse:true },
];
const columns = useMemo(() => {
return tabsActive == '1' ? wColumns : jColumns
},[tabsActive])
return tabsActive == 0 ? wColumns : jColumns
}, [tabsActive])
const width = useMemo(() => columns.reduce((total, cur) => total + (cur.width), 0), [columns]);
@ -68,7 +76,13 @@ const Page = () => {
const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.aqjc.bxjc.wypage).find_noCode);
const { tableProps: tableProps1, search: search1, refresh: refresh1 } = usePageTable(createCrudService(apiurl.aqjc.bxjc.jgfpage).find_noCode);
const dataSource = useMemo(() => {
if (tableProps || tableProps1) {
return tabsActive == 0 ? tableProps : tableProps1
}
}, [tabsActive, tableProps, tableProps1])
/**
* @description 处理成功的回调
*/
@ -77,39 +91,68 @@ const Page = () => {
}
// 导出
const exportExcel = () => {
let params = {
...searchVal,
}
httppost5(apiurl.aqjc.bxjc.wyexport, params).then(res => {
exportFile(`${tabsActive == '1' ? '水平位移':'结构缝开度'}.xlsx`,res.data)
// 导出
const exportExcel = () => {
const exportUrl = tabsActive == 0 ? apiurl.aqjc.bxjc.wyexport : apiurl.aqjc.bxjc.jgfexport;
const params = tabsActive == 0 ? searchVal :historySearchVal
httppost5(exportUrl, params).then(res => {
exportFile(`${tabsActive == 0 ? '水平位移':clickItem.stationCode}.xlsx`, res.data)
})
}
// 获取结构缝历史数据
const getHistoryData = async (parmas) => {
try {
const res = await httppost2(apiurl.aqjc.bxjc.jgflist, parmas)
if (res.code == 200) {
setTableData(res.data)
}
} catch (error) {
console.log(error);
}
}
// 单击行的回调
const clickRow = (r) => {
if (tabsActive != 0) {
setClickItem(r)
setJgfOpen(true)
}
}
useEffect(() => {
const params = {
search: {
...searchVal,
type: tabsActive
}
};
search(params)
}, [searchVal])
tabsActive == 0 ? search(params) : search1(params);
}, [searchVal, tabsActive])
useEffect(() => {
if (historySearchVal && clickItem) {
const params = {
...historySearchVal,
stationCode:clickItem.stationCode
}
getHistoryData(params)
}
}, [historySearchVal,clickItem])
return (
<>
<div className='content-root clearFloat xybm' style={{ paddingBottom: "0" }}>
<Tabs
defaultActiveKey="1"
onChange={(e) => {setTabsActive(e) }}
defaultActiveKey={0}
onChange={(e) => { setTabsActive(e) }}
items={[
{
label: '水平位移',
key: '1',
key: 0,
},
{
label: '结构缝开度',
key: '2',
key: 1,
}
]}
@ -120,21 +163,67 @@ const Page = () => {
setSearchVal={setSearchVal}
onSave={command('save')}
tabsActive={tabsActive}
exportFile1={exportExcel}
/>
</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 )" }} />
{dataSource &&
<Table
columns={columns}
rowKey="tm"
{...dataSource}
scroll={{ x: width, y: "calc( 100vh - 400px )" }}
onRow={(r) => {
return {
onClick: () => {
clickRow(r)
}
}
}}
/>
}
</div>
</div>
<BasicCrudModal
width={1000}
ref={refModal}
title=""
title=''
component={ModalForm}
onCrudSuccess={successCallback}
/>
<Modal
open={jgfOpen}
width={1000}
title={<div style={{display:'flex',columnGap:10,alignItems:'center'}}>
<span style={{width:5,height:16,background:"#3477f5"}}></span>
<span style={{fontSize:16, marginLeft:10}}>{clickItem.stationCode}</span>
</div>}
footer={null}
onCancel={() => setJgfOpen(false)}
destroyOnClose
>
<>
<HistoryToolBar
exportFile1={exportExcel}
setTabVal={setTabVal}
setHistorySearchVal={setHistorySearchVal}
/>
<div style={{ height: 504, padding: '5px 10px 20px 10px' }}>
{
tabVal == '1' ?
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>
:null
}
{
tabVal==='2'?<div style={{marginTop:'10px'}}><TableData tableData={tableData}/></div>:null
}
</div>
</>
</Modal>
</div>
</>
);

194
src/views/SafeWatch/TransformWatch/options.js Normal file
View File

@ -0,0 +1,194 @@
export default function options(data) {
// 缝开度
const kdMin = Math.floor(Math.min(...data.map(item => item.value)));
const kdMax = Math.ceil(Math.max(...data.map(item => item.value)));
// 温度
const tempMin = Math.floor(Math.min(...data.map(item => item.temp)));
const tempMax = Math.ceil(Math.max(...data.map(item => item.temp)));
// 模数
const modulusMin = Math.floor(Math.min(...data.map(item => item.modulus)));
const modulusMax = Math.ceil(Math.max(...data.map(item => item.modulus)));
return {
tooltip: {
trigger: 'axis',
},
legend: {
top:'3%',
data: ['缝开度', '温度', '模数']
},
grid: {
left: 35,
right:120
},
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: '#8c8c8c',
width: 1,
}
},
axisTick: {
show: false,
},
}
],
yAxis: [
{
type: 'value',
position: 'left',
name: "缝开度(mm)",
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: kdMin,
max: kdMax,
},
{
type: 'value',
position: 'right',
offset: 80,
name: "温度(°℃)",
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: tempMin,
max: tempMax,
},
{
type: 'value',
position: 'right',
name: "模数(F)",
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: modulusMin,
max: modulusMax,
}
],
series: [
{
yAxisIndex: 0,
name: '缝开度',
type: 'line',
color: "#d6eaec",
data: data.map(o => o.value),
symbol: 'none', // 设置标记点为'none'，即去掉圆点
smooth: 0.5
},
{
// xAxisIndex: 1,
yAxisIndex: 1,
name: '温度',
type: 'line',
color: "#60a0f8",
lineStyle: {
// type: "dashed"
},
data: data.map(o => o.temp),
symbol: 'none', // 设置标记点为'none'，即去掉圆点
smooth: 0.5
},
{
yAxisIndex: 2,
name: '模数',
type: 'line',
// color: "#60a0f8",
lineStyle: {
// type: "dashed"
},
data: data.map(o => o.modulus),
symbol: 'none', // 设置标记点为'none'，即去掉圆点
smooth: 0.5
},
]
}
}

11
src/views/SafeWatch/TransformWatch/toolbar.js
View File

@ -26,7 +26,8 @@ const ToolBar = ({ setSearchVal, onSave, tabsActive, exportFile1 }) => {
<Form.Item label="监测点" name="stationCode">
<Input allowClear style={{ width: '150px' }} />
</Form.Item>
<Form.Item label={`${tabsActive == '1' ? '上报时间' : '监测时间'}`} name="tm">
{tabsActive == 0 &&
<Form.Item label='上报时间' name="tm">
<RangePicker
allowClear
showTime
@ -34,6 +35,8 @@ const ToolBar = ({ setSearchVal, onSave, tabsActive, exportFile1 }) => {
format="YYYY-MM-DD HH:mm:ss"
/>
</Form.Item>
}
<Form.Item>
<Button type="primary" htmlType="submit">查询</Button>
</Form.Item>
@ -41,11 +44,13 @@ const ToolBar = ({ setSearchVal, onSave, tabsActive, exportFile1 }) => {
<Form.Item>
<Button onClick={() => form.resetFields()}>重置</Button>
</Form.Item>
<Form.Item>
{tabsActive == 0 &&
<Form.Item>
<Button onClick={() => exportFile1()}>导出</Button>
</Form.Item>
}
{
(onSave && tabsActive == '1') ?
(onSave && tabsActive == 0) ?
<Form.Item>
<Button onClick={onSave}>新增</Button>
</Form.Item>

8
src/views/SafeWatch/WarnRuleConfig/form.js
View File

@ -57,6 +57,14 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
<NormalSelect disabled={mode==='view'} style={{width:'100%'}} allowClear options={types} />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label="测点位置"
name="location"
>
<Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
</Form.Item>
</Col>
</Row>
{

3
src/views/SafeWatch/WarnRuleConfig/index.js
View File

@ -20,7 +20,8 @@ const Page = () => {
const [searchVal, setSearchVal] = useState(false)
const columns = [
{ title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align:"center" },
{ title: '测点', key: 'stationCode', dataIndex: 'stationCode', width: 150},
{ title: '测点', key: 'stationCode', dataIndex: 'stationCode', width: 150 },
{ title: '测点位置', key: 'location', dataIndex: 'location', width: 150,ellipse:true },
{
title: '类型', key: 'type', dataIndex: 'type', width: 150,
render: (v) => <span>{types[v]}</span>