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

feat()：闸门监控修改需求

qzc-dev-demo
李神峰 2025-03-21 17:36:23 +08:00
parent d573f06534
commit b3d4946b8a
11 changed files with 1123 additions and 722 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -348,7 +348,7 @@ export async function loadMenu(): Promise<MenuItem[]> {
{ {
id: id(), title: '白蚁防治', redirect: '/mgr/sg/byfz/bypc', id: id(), title: '白蚁防治', redirect: '/mgr/sg/byfz/bypc',
children: [ children: [
{ id: id(), title: '白蚁普查', path: '/mgr/sg/byfz/bypc' }, { id: id(), title: '白蚁监测', path: '/mgr/sg/byfz/bypc' },
{ id: id(), title: '防治宣传', path: '/mgr/sg/byfz/byxc' }, { id: id(), title: '防治宣传', path: '/mgr/sg/byfz/byxc' },
] ]
}, },

141
src/views/rcgl/byfz/bypc/index.js
View File

@ -1,6 +1,6 @@
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 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,Tag } from 'antd';
import {FileWordOutlined,FilePdfOutlined,FileZipOutlined,FileExcelOutlined } from '@ant-design/icons'; import {FileWordOutlined,FilePdfOutlined,FileZipOutlined,FileExcelOutlined } from '@ant-design/icons';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import ToolBar from './toolbar'; import ToolBar from './toolbar';
@ -9,13 +9,20 @@ import apiurl from '../../../../service/apiurl';
import usePageTable from '../../../../components/crud/usePageTable2'; import usePageTable from '../../../../components/crud/usePageTable2';
import { createCrudService } from '../../../../components/crud/_'; import { createCrudService } from '../../../../components/crud/_';
import {CrudOpRender_text} from '../../../../components/crud/CrudOpRender'; import {CrudOpRender_text} from '../../../../components/crud/CrudOpRender';
import './index.less';
const url = "http://223.75.53.141:9102/test.by-lyf.tmp" const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
const Page = () => { const Page = () => {
const role = useSelector(state => state.auth.role); const role = useSelector(state => state.auth.role);
const editBtn = role?.rule?.find(item => item.menuName == "编辑") || true; const editBtn = role?.rule?.find(item => item.menuName == "编辑") || true;
const viewBtn = 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 delBtn = role?.rule?.find(item => item.menuName == "删除") || true;
const [stats, setStats] = useState({
total: 400,
withMosquito: 14,
withoutMosquito: 382,
noData: 4
});
const surveyType = { const surveyType = {
1: "日常检查排查", 1: "日常检查排查",
2: "定期普查", 2: "定期普查",
@ -33,38 +40,62 @@ const Page = () => {
} }
const refModal = useRef(); const refModal = useRef();
const [searchVal, setSearchVal] = useState({}) const [searchVal, setSearchVal] = useState({})
const columns = [ // const columns = [
{ title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align: "center" }, // { title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align: "center" },
{title: '填报日期', key: 'reportDate', dataIndex: 'reportDate', width: 140,}, // {title: '填报日期', key: 'reportDate', dataIndex: 'reportDate', width: 140,},
{ // {
title: '普查类型', key: 'surveyType', dataIndex: 'surveyType', width: 200, // title: '普查类型', key: 'surveyType', dataIndex: 'surveyType', width: 200,
render: (value) => <span>{value ? surveyType[value] : ''}</span> // render: (value) => <span>{value ? surveyType[value] : ''}</span>
}, // },
{ // {
title: '普查方式', key: 'surveyWay', dataIndex: 'surveyWay', width: 200, // title: '普查方式', key: 'surveyWay', dataIndex: 'surveyWay', width: 200,
render: (value) => <span>{value ? surveyWay[value] : ''}</span> // render: (value) => <span>{value ? surveyWay[value] : ''}</span>
}, // },
{ // {
title: '危害情况', key: 'isHarm', dataIndex: 'isHarm', width: 200, // title: '危害情况', key: 'isHarm', dataIndex: 'isHarm', width: 200,
render: (value, row) =>( // render: (value, row) =>(
<span style={row.harmNum > 0 ? { color: "red" } : {}}>{isHarm[row.harmNum > 0 ? 1 : 0]}</span>) // <span style={row.harmNum > 0 ? { color: "red" } : {}}>{isHarm[row.harmNum > 0 ? 1 : 0]}</span>)
}, // },
{title: '白蚁危害处数', key: 'harmNum', dataIndex: 'harmNum', width: 100}, // {title: '白蚁危害处数', key: 'harmNum', dataIndex: 'harmNum', width: 100},
{title: '已处置处数', key: 'handleNum', dataIndex: 'handleNum', width: 100}, // {title: '已处置处数', key: 'handleNum', dataIndex: 'handleNum', width: 100},
{title: '上报人', key: 'reportUserName', dataIndex: 'reportUserName', width: 100}, // {title: '上报人', key: 'reportUserName', dataIndex: 'reportUserName', width: 100},
{ // {
title: '操作', key: 'operation', width: 200, fixed: 'right',align: 'center', // title: '操作', key: 'operation', width: 200, fixed: 'right',align: 'center',
render: (value, row, index) => ( // render: (value, row, index) => (
<CrudOpRender_text // <CrudOpRender_text
edit={editBtn ? true : false} // edit={editBtn ? true : false}
del={delBtn ? true : false} // del={delBtn ? true : false}
view={viewBtn ? true : false} // view={viewBtn ? true : false}
command={(cmd) => () => command(cmd)(row)} />) // command={(cmd) => () => command(cmd)(row)} />)
}, // },
]; // ];
const columns = [
{
title: '监测时间',
dataIndex: 'time',
key: 'time',
width: 180
},
{
title: '测点编号',
dataIndex: 'code',
key: 'code',
width: 120
},
{
title: '有无白蚁',
dataIndex: 'hasMosquito',
key: 'hasMosquito',
width: 100,
render: (text) => (
<Tag color={text ? 'red' : 'green'} style={{borderRadius: '50%', padding: '4px 8px'}}>
{text ? '有' : '无'}
</Tag>
)
}
];
const width = useMemo(() => columns.reduce((total, cur) => total + (cur.width), 0), [columns]); const width = useMemo(() => columns.reduce((total, cur) => total + (cur.width), 0), [columns]);
const command = (type) => (params) => { const command = (type) => (params) => {
@ -104,12 +135,50 @@ const Page = () => {
return ( return (
<> <>
<div className='content-root clearFloat xybm' style={{paddingRight:"0",paddingBottom:"0"}}> <div className='content-root clearFloat xybm' style={{paddingRight:"0",paddingBottom:"0"}}>
<div className='lf CrudAdcdTreeTableBox' style={{width:"100%",overflowY:"auto"}}> <div className='lf CrudAdcdTreeTableBox' style={{ width: "100%" }}>
<Row gutter={16} className='statsRow'>
<Col span={6}>
<div className='statItem'>
<div className='valueWrapper'>
<span className='number' style={{ color: '#722ed1' }}>{stats.total}</span>
<span className="unit">个</span>
</div>
<span className='label'>总监测点数</span>
</div>
</Col>
<Col span={6}>
<div className='statItem'>
<div className='valueWrapper'>
<span className='number' style={{ color: '#f5222d' }}>{stats.withMosquito}</span>
<span className="unit">个</span>
</div>
<span className='label'>有白蚁</span>
</div>
</Col>
<Col span={6}>
<div className='statItem'>
<div className='valueWrapper'>
<span className='number' style={{ color: '#52c41a' }}>{stats.withoutMosquito}</span>
<span className="unit">个</span>
</div>
<span className='label'>无白蚁</span>
</div>
</Col>
<Col span={6}>
<div className='statItem'>
<div className='valueWrapper'>
<span className='number' style={{ color: '#8c8c8c' }}>{stats.noData}</span>
<span className="unit">个</span>
</div>
<span className='label'>无数据</span>
</div>
</Col>
</Row>
<Card className='nonebox'> <Card className='nonebox'>
<ToolBar <ToolBar
setSearchVal={setSearchVal} setSearchVal={setSearchVal}
onSave={command('save')} // onSave={command('save')}
role={role} // role={role}
/> />
</Card> </Card>
<div className="ant-card-body" style={{ padding: "20px 0 0 0" }}> <div className="ant-card-body" style={{ padding: "20px 0 0 0" }}>

59
src/views/rcgl/byfz/bypc/index.less
View File

@ -1,30 +1,33 @@
.basic-info{ .statsRow {
position: relative; display: flex;
font-size: 16px; justify-content: space-between;
margin-bottom: 20px; margin-bottom: 24px;
padding:5px 25px; padding: 16px;
border-bottom: 1px solid #eee;
&::before{ .statItem {
position: absolute;
top:8px;
left:0;
content: "";
display: block;
width: 5px;
height: 20px;
background-color: #0079fe;
}
}
.time-line{
width: 50%;
margin-left: 6%;
margin-top: 1%;
.time-line-item{
display: flex; display: flex;
// align-items: center; flex-direction: column;
column-gap: 20px; text-align: center;
.item-right{ align-items: center;
flex:1 .unit {
} font-size: 14px;
} margin-right: 8px;
color: rgba(0, 0, 0, 0.65);
}
.valueWrapper {
display: flex;
align-items: baseline;
}
.number {
display: block;
font-size: 32px;
font-weight: 600;
}
.label {
color: rgba(0, 0, 0, 0.65);
font-size: 16px;
}
}
} }

28
src/views/rcgl/byfz/bypc/toolbar.js
View File

@ -5,8 +5,8 @@ import moment from 'moment';
import NormalSelect from '../../../../components/Form/NormalSelect'; import NormalSelect from '../../../../components/Form/NormalSelect';
const { RangePicker } = DatePicker; const { RangePicker } = DatePicker;
const ToolBar = ({ setSearchVal, onSave, storeData, role }) => { const ToolBar = ({ setSearchVal, onSave, storeData, role }) => {
const addBtn = role?.rule?.find(item => item.menuName == "新增")|| true; // const addBtn = role?.rule?.find(item => item.menuName == "新增")|| true;
const searchBtn = role?.rule?.find(item => item.menuName == "查询")|| true; // const searchBtn = role?.rule?.find(item => item.menuName == "查询")|| true;
const [form] = Form.useForm(); const [form] = Form.useForm();
const onFinish = (values) => { const onFinish = (values) => {
@ -31,29 +31,27 @@ const ToolBar = ({ setSearchVal, onSave, storeData, role }) => {
<> <>
<div style={{display:'flex',justifyContent:'space-between'}}> <div style={{display:'flex',justifyContent:'space-between'}}>
<Form form={form} className='toolbarBox' layout="inline" onFinish={onFinish}> <Form form={form} className='toolbarBox' layout="inline" onFinish={onFinish}>
<Form.Item label="年份" name="year"> <Form.Item label="监测日期" name="year">
<DatePicker <DatePicker
allowClear allowClear
style={{ width: "150px" }} style={{ width: "150px" }}
picker="year"
/> />
</Form.Item> </Form.Item>
<Form.Item label="危害情况" name="isHarm"> <Form.Item label="测点编号" name="year">
<Input
allowClear
style={{ width: "150px" }}
/>
</Form.Item>
{/* <Form.Item label="危害情况" name="isHarm">
<NormalSelect <NormalSelect
allowClear allowClear
style={{ width: '150px' }} style={{ width: '150px' }}
options={[{ label: "无危害 ", value: 0 },{ label: "有危害 ", value: 1 }]} /> options={[{ label: "无危害 ", value: 0 },{ label: "有危害 ", value: 1 }]} />
</Form.Item> </Form.Item> */}
{searchBtn ? <Form.Item> <Form.Item>
<Button type="primary" htmlType="submit">查询</Button> <Button type="primary" htmlType="submit">查询</Button>
</Form.Item> : null } </Form.Item>
{
(onSave && addBtn) ?
<Form.Item>
<Button onClick={onSave}>新增</Button>
</Form.Item>
:null
}
</Form> </Form>
</div> </div>
</> </>

65
src/views/rcgl/zmjk/ModalContent.js Normal file
View File

@ -0,0 +1,65 @@
import React,{useState,useEffect} from 'react'
import {Card,Table} from 'antd'
import ModalToolBar from './ModalToolBar';
import { httppost5 } from '../../../utils/request';
import { exportFile } from '../../../utils/tools';
import apiurl from '../../../service/apiurl';
export default function ModalContent() {
const columns = [
{
title: '序号',
key: 'inx',
width: 80,
render: (r, i) => <span>{i + 1}</span>
},
{
title: '闸门名称',
key: 'project',
width: 150,
},
{
title: '操作内容',
key: 'project',
width: 150,
},
{
title: '操作结果',
key: 'project',
width: 150,
}
,
{
title: '操作时间',
key: 'project',
width: 150,
}
]
const [searchVal, setSearchVal] = useState(false)
const exportExcel = () => {
let params = {
...searchVal,
// pageSo: {
// pageNumber: tableProps.pagination.current,
// pageSize:tableProps.pagination.pageSize
// }
}
httppost5(apiurl.gcaqjc.sjtjcx.ndsytjb.export, params).then(res => {
exportFile(`闸门操作记录.xlsx`,res.data)
})
}
return (
<div>
<Card className='nonebox'>
<ModalToolBar
setSearchVal={setSearchVal}
exportFile={exportExcel}
/>
</Card>
<div className="ant-card-body" style={{ padding: "20px 0 0 0" }}>
<Table columns={columns} rowKey="inx" dataSource={[]} />
</div>
</div>
)
}

118
src/views/rcgl/zmjk/ModalToolBar.js Normal file
View File

@ -0,0 +1,118 @@
import React, { useEffect, useState } from 'react';
import { Form, Input, Button, DatePicker } from 'antd';
import moment from 'moment';
import NormalSelect from '../../../components/Form/NormalSelect';
const { RangePicker } = DatePicker;
const ToolBar = ({ setSearchVal, exportFile }) => {
const optionsType = [
{
label: "今日",
value: 1
},
{
label: "近一周",
value: 2
},
{
label: "近一月",
value: 3
},
{
label: "近三月",
value: 4
},
{
label: "近一年",
value: 5
},
]
const types = [
{ label: "主坝", value: 1 },
{ label: "副坝", value: 2 },
{ label: "灌溉发电洞", value: 3 },
]
const [form] = Form.useForm();
const onFinish = (values) => {
let dateTimeSo;
if (values.tm) {
dateTimeSo = {
start: moment(values.tm[0]).format('YYYY-MM-DD 00:00:00'),
end: moment(values.tm[1]).format('YYYY-MM-DD 00:00:00')
}
}
delete values.tm
setSearchVal({ ...values, dateTimeSo });
}
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;
}
}
useEffect(() => {
let dateTimeSo = {
start: moment().subtract(1, "years").format('YYYY-MM-DD 00:00:00'),
end: moment().format('YYYY-MM-DD 00:00:00')
}
form.setFieldValue("tm", [moment(dateTimeSo.start), moment(dateTimeSo.end)])
setSearchVal({ dateTimeSo })
}, [])
return (
<>
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
<Form form={form} className='toolbarBox' layout="inline" onFinish={onFinish} onValuesChange={onValuesChange}>
<Form.Item label="闸门名称" name="maintainType">
<NormalSelect allowClear style={{ width: '150px' }} options={types} />
</Form.Item>
<Form.Item label="日期范围" name="tm">
<RangePicker
allowClear
style={{ width: "220px" }}
format="YYYY-MM-DD"
/>
</Form.Item>
<Form.Item label="常用时段" name="ranger">
<NormalSelect
allowClear
style={{ width: "100px" }}
options={optionsType}
/>
</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={() => exportFile()}>导出</Button>
</Form.Item>
</Form>
</div>
</>
);
}
export default ToolBar;

427
src/views/rcgl/zmjk/index.js
View File

@ -1,5 +1,6 @@
import React, { useEffect, useMemo, useState } from 'react' import React, { useEffect, useMemo, useState } from 'react'
import { Modal, Tabs, Descriptions, Image } from 'antd'; import { Modal, Tabs, Descriptions, Image, Divider, Table } from 'antd';
import {DoubleRightOutlined} from '@ant-design/icons'
import { Stage } from 'react-konva'; import { Stage } from 'react-konva';
import Sider from './Sider'; import Sider from './Sider';
import Topper1 from './Topper1'; import Topper1 from './Topper1';
@ -11,11 +12,12 @@ import HFivePlayer from '../../../components/video1Plary'
import './index.less'; import './index.less';
import { httpget, httpget2, httppost2 } from '../../../utils/request'; import { httpget, httpget2, httppost2 } from '../../../utils/request';
import apiurl from '../../../service/apiurl'; import apiurl from '../../../service/apiurl';
import ModalContent from './ModalContent';
const url = "http://223.75.53.141:9102/test.by-lyf.tmp" const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
const CanvasW = 1080 const CanvasW = 1080
const CanvasH = 640 const CanvasH = 640
// const waterRatio = 0 // const waterRatio = 0
const zmobj ={ const zmobj = {
"hpCode": "HP0074208040002120", "hpCode": "HP0074208040002120",
"stcd": "4265630075", "stcd": "4265630075",
"ctrlType": "PLC", "ctrlType": "PLC",
@ -44,84 +46,11 @@ const zmobj ={
"lgtd": 112.242945, "lgtd": 112.242945,
"lttd": 30.848166, "lttd": 30.848166,
"runtime": [ "runtime": [
null, null,
{ {
"stcd": "4265630075",
"gateNumber": 1,
"realAperture": 376,
"setAperture": 0,
"sensorLever": null,
"altitudeLever": null,
"remoteSignal": 0,
"powerSignal": 0,
"openingSignal": 0,
"closeingSignal": 0,
"errorSignal": 0,
"openedSignal": 0,
"closedSignal": 0,
"tm": "2024-09-25 20:03:26",
"_online": true
},
{
"stcd": "4265630075",
"gateNumber": 2,
"realAperture": 388,
"setAperture": 0,
"sensorLever": null,
"altitudeLever": null,
"remoteSignal": 0,
"powerSignal": 0,
"openingSignal": 0,
"closeingSignal": 0,
"errorSignal": 0,
"openedSignal": 0,
"closedSignal": 0,
"tm": "2024-09-25 20:03:26",
"_online": true
},
{
"stcd": "4265630075",
"gateNumber": 3,
"realAperture": 394,
"setAperture": 0,
"sensorLever": null,
"altitudeLever": null,
"remoteSignal": 0,
"powerSignal": null,
"openingSignal": 0,
"closeingSignal": 0,
"errorSignal": 0,
"openedSignal": 0,
"closedSignal": 0,
"tm": "2024-09-25 20:03:26",
"_online": true
}
],
"real": {
"stcd": "4265630075",
"stationName": "五岭包节制闸",
"z1": null,
"zz1": null,
"z1tm": null,
"z2": null,
"zz2": null,
"z2tm": null,
"hq": null,
"hqtm": null,
"demtl": null
},
"cctvs": [],
"_idx": 88,
"_fav": false,
"_sort": 10086
}
const runtime = [
null,
{
"stcd": "4265630075", "stcd": "4265630075",
"gateNumber": 1, "gateNumber": 1,
"realAperture": 976, "realAperture": 376,
"setAperture": 0, "setAperture": 0,
"sensorLever": null, "sensorLever": null,
"altitudeLever": null, "altitudeLever": null,
@ -132,9 +61,10 @@ const runtime = [
"errorSignal": 0, "errorSignal": 0,
"openedSignal": 0, "openedSignal": 0,
"closedSignal": 0, "closedSignal": 0,
"tm": "2024-09-25 20:03:31" "tm": "2024-09-25 20:03:26",
}, "_online": true
{ },
{
"stcd": "4265630075", "stcd": "4265630075",
"gateNumber": 2, "gateNumber": 2,
"realAperture": 388, "realAperture": 388,
@ -148,9 +78,10 @@ const runtime = [
"errorSignal": 0, "errorSignal": 0,
"openedSignal": 0, "openedSignal": 0,
"closedSignal": 0, "closedSignal": 0,
"tm": "2024-09-25 20:03:31" "tm": "2024-09-25 20:03:26",
}, "_online": true
{ },
{
"stcd": "4265630075", "stcd": "4265630075",
"gateNumber": 3, "gateNumber": 3,
"realAperture": 394, "realAperture": 394,
@ -164,24 +95,154 @@ const runtime = [
"errorSignal": 0, "errorSignal": 0,
"openedSignal": 0, "openedSignal": 0,
"closedSignal": 0, "closedSignal": 0,
"tm": "2024-09-25 20:03:31" "tm": "2024-09-25 20:03:26",
"_online": true
}
],
"real": {
"stcd": "4265630075",
"stationName": "五岭包节制闸",
"z1": null,
"zz1": null,
"z1tm": null,
"z2": null,
"zz2": null,
"z2tm": null,
"hq": null,
"hqtm": null,
"demtl": null
},
"cctvs": [],
"_idx": 88,
"_fav": false,
"_sort": 10086
}
const runtime = [
null,
{
"stcd": "4265630075",
"gateNumber": 1,
"realAperture": 976,
"setAperture": 0,
"sensorLever": null,
"altitudeLever": null,
"remoteSignal": 0,
"powerSignal": 0,
"openingSignal": 0,
"closeingSignal": 0,
"errorSignal": 0,
"openedSignal": 0,
"closedSignal": 0,
"tm": "2024-09-25 20:03:31"
},
{
"stcd": "4265630075",
"gateNumber": 2,
"realAperture": 388,
"setAperture": 0,
"sensorLever": null,
"altitudeLever": null,
"remoteSignal": 0,
"powerSignal": 0,
"openingSignal": 0,
"closeingSignal": 0,
"errorSignal": 0,
"openedSignal": 0,
"closedSignal": 0,
"tm": "2024-09-25 20:03:31"
},
{
"stcd": "4265630075",
"gateNumber": 3,
"realAperture": 394,
"setAperture": 0,
"sensorLever": null,
"altitudeLever": null,
"remoteSignal": 0,
"powerSignal": null,
"openingSignal": 0,
"closeingSignal": 0,
"errorSignal": 0,
"openedSignal": 0,
"closedSignal": 0,
"tm": "2024-09-25 20:03:31"
} }
] ]
const myType = { const myType = {
// 闸前水位站 2闸后水位站 3流量站 // 闸前水位站 2闸后水位站 3流量站
'1':'闸前水位/水深(m)', '1': '闸前水位/水深(m)',
'2':'闸后水位/水深(m)', '2': '闸后水位/水深(m)',
'3':'流量 (m³/s)', '3': '流量 (m³/s)',
} }
const Page = () => { const Page = () => {
const [itemIndex,setItemIndex] = useState(null)
const [waterRatio,setWaterRatio] = useState(0) const jcColumns = [
const [data,setData] = useState({}) {
const [list, setList ] = useState([]) title: '项目',
const [damList, setDamList ] = useState([]) key: 'project',
const [videoList, setVideoList ] = useState([]) width: 150,
},
{
title: '实时数据',
key: 'project',
width: 150,
},
{
title: '数据采集时间',
key: 'project',
width: 150,
}
]
const zfColumns = [
{
title: '闸阀名称',
key: 'project',
width: 150,
},
{
title: '当前开关状态',
key: 'project',
width: 150,
},
{
title: '数据采集时间',
key: 'project',
width: 150,
}
]
const jlColumns = [
{
title: '闸阀名称',
key: 'project',
width: 150,
},
{
title: '操作内容',
key: 'project',
width: 150,
},
{
title: '操作结果',
key: 'project',
width: 150,
},
{
title: '操作时间',
key: 'project',
width: 150,
}
]
const [itemIndex, setItemIndex] = useState(null)
const [waterRatio, setWaterRatio] = useState(0)
const [data, setData] = useState({})
const [list, setList] = useState([])
const [damList, setDamList] = useState([])
const [videoList, setVideoList] = useState([])
const [videoArr, setvideoArr] = useState({}) const [videoArr, setvideoArr] = useState({})
const [open, setOpen] = useState(false) const [open, setOpen] = useState(false)
@ -191,42 +252,42 @@ const Page = () => {
const pts = contextCoordinates(xunit, hole); const pts = contextCoordinates(xunit, hole);
const eqpnoList = useMemo(() => damList ? new Array(damList.length).fill(0).map((o, index) => index) : [], [damList]); const eqpnoList = useMemo(() => damList ? new Array(damList.length).fill(0).map((o, index) => index) : [], [damList]);
useEffect(()=>{ useEffect(() => {
getList() getList()
},[]) }, [])
const getList = async()=>{ const getList = async () => {
const {code, data} = await httppost2(apiurl.zmjk.getList) const { code, data } = await httppost2(apiurl.zmjk.getList)
if(code!==200){ if (code !== 200) {
return return
} }
const obj = data[0]||{} const obj = data[0] || {}
getInformation(obj.gateCode) getInformation(obj.gateCode)
getDamData(obj.stcd) getDamData(obj.stcd)
getVideo(obj.gateCode) getVideo(obj.gateCode)
setData(obj) setData(obj)
} }
const getInformation = async(gateCode)=>{ const getInformation = async (gateCode) => {
const {code, data} = await httpget2(apiurl.zmjk.getInformation,{gateCode}) const { code, data } = await httpget2(apiurl.zmjk.getInformation, { gateCode })
if(code!==200){ if (code !== 200) {
return return
} }
data.map((item)=>{ data.map((item) => {
if(item.type===2){ if (item.type === 2) {
setWaterRatio(item.value/5||0) setWaterRatio(item.value / 5 || 0)
} }
}) })
setList(data) setList(data)
} }
const getDamData = async(stcd)=>{ const getDamData = async (stcd) => {
const {code, data} = await httpget2(apiurl.zmjk.getDamData,{stcd}) const { code, data } = await httpget2(apiurl.zmjk.getDamData, { stcd })
if(code!==200){ if (code !== 200) {
return return
} }
const list = [] const list = []
data.map((item)=>{ data.map((item) => {
list.push({ list.push({
...item ...item
}) })
@ -234,38 +295,71 @@ const Page = () => {
setDamList(list) setDamList(list)
} }
const getVideo = async(valveCode)=>{ const getVideo = async (valveCode) => {
const {code, data} = await httppost2(apiurl.zmjk.getVideo,{valveCode}) const { code, data } = await httppost2(apiurl.zmjk.getVideo, { valveCode })
if(code!==200){ if (code !== 200) {
return return
} }
setVideoList(data) setVideoList(data)
getVideoSrc(data[0]?.indexCode)
} }
const getVideoSrc = async (current) => { const getVideoSrc = async (current) => {
const res = await httpget2(`${apiurl.gsxl.zfzl.videosrc}${current}`)//32023a7f27d8448fa10511f24e96acff const res = await httpget2(`${apiurl.gsxl.zfzl.videosrc}${current}`)//32023a7f27d8448fa10511f24e96acff
if (res.code == 200 && res.data?.length !== 0) { if (res.code == 200 && res.data?.length !== 0) {
setvideoArr({src:res.data}) setvideoArr({ src: res.data })
}else{ } else {
setvideoArr({}) setvideoArr({})
} }
} }
const getNum = (a,b)=>{ const getNum = (a, b) => {
const aa = Number(a||0) const aa = Number(a || 0)
const bb = Number(b||0) const bb = Number(b || 0)
const num = Number(aa-bb).toFixed(3) const num = Number(aa - bb).toFixed(3)
return num return num
} }
return ( return (
<> <>
<div className='content-root clearFloat xybm sg_zmjk' style={{paddingRight:"0",paddingBottom:"0"}}> <div className='content-root clearFloat xybm sg_zmjk' style={{ paddingRight: "0", paddingBottom: "0" }}>
<div className='lf CrudAdcdTreeTableBox' style={{width:"100%",overflowY:"auto"}}> <div className='lf CrudAdcdTreeTableBox' style={{ width: "100%" }}>
{/* <Card className='nonebox'> {/* <Card className='nonebox'>
</Card> */} </Card> */}
<div className="ant-card-body" style={{ padding: "20px 0 0 0" }}> <div className="ant-card-body" style={{ padding: "20px 0 0 0" }}>
<dvi className="sg_zmjk_left"> <div className="sg_zmjk_left">
<div className='sg_zmjk_left_title'>
<Divider type="vertical" style={{ width: 5, background: '#259def', height: 20 }} />
闸阀监控
</div>
<div className='sz_left_up_table'>
<Table
columns={zfColumns}
rowKey={(record) => record.id}
dataSource={[]}
pagination={false}
/>
</div>
<div className='sg_zmjk_left_title' style={{ marginTop: 175,display:'flex',justifyContent:'space-between' }}>
<div><Divider type="vertical" style={{ width: 5, background: '#259def', height: 20 }} />
最近操作记录</div>
<div onClick={() => setOpen(true)}>
<div style={{display:'flex',columnGap:10,cursor:'pointer',fontSize:14,color:'#000',fontWeight:400}}>
<span>查看更多信息</span>
<DoubleRightOutlined />
</div>
</div>
</div>
<div className='sz_left_up_table'>
<Table
columns={jlColumns}
rowKey={(record) => record.id}
dataSource={[]}
pagination={false}
/>
</div>
</div>
{/* <div className="sg_zmjk_left">
<Stage width={1080} height={640}> <Stage width={1080} height={640}>
<Sider pts={pts} side="left" /> <Sider pts={pts} side="left" />
<Sider pts={pts} side="right" /> <Sider pts={pts} side="right" />
@ -302,12 +396,14 @@ const Page = () => {
} }
<div key="sider2" style={{ flexGrow: 1, width: 100 }}></div> <div key="sider2" style={{ flexGrow: 1, width: 100 }}></div>
</div> </div>
</dvi> </div> */}
<dvi className="sg_zmjk_right"> <div className="sg_zmjk_right">
<div className='sg_zmjk_right_video'> <div className='sg_zmjk_right_video'>
<div className='sg_zmjk_right_video_title'>视频监控</div> <div className='sg_zmjk_right_video_title'>
<Divider type="vertical" style={{ width: 5, background: '#259def', height: 20 }} />
监控视频</div>
<div className='sg_zmjk_right_video_content'> <div className='sg_zmjk_right_video_content'>
<div className='sg_zmjk_right_video_content_left'> {/* <div className='sg_zmjk_right_video_content_left'>
{ {
videoList.map((item,index)=>( videoList.map((item,index)=>(
<div className={index===itemIndex?'sg_zmjk_right_video_content_left_item itemChecked':'sg_zmjk_right_video_content_left_item'} onClick={()=>{setItemIndex(index);getVideoSrc(item.indexCode)}}> <div className={index===itemIndex?'sg_zmjk_right_video_content_left_item itemChecked':'sg_zmjk_right_video_content_left_item'} onClick={()=>{setItemIndex(index);getVideoSrc(item.indexCode)}}>
@ -315,20 +411,20 @@ const Page = () => {
</div> </div>
)) ))
} }
</div> </div> */}
<div className='sg_zmjk_right_video_content_right'> <div className='sg_zmjk_right_video_content_right'>
{ {
videoArr?.src && videoArr?.src &&
<div <div
className="content-video" className="content-video"
style={{ width: '100%', height: '100%',cursor: "pointer" }} style={{ width: '100%', height: '100%', cursor: "pointer" }}
onClick={() => { onClick={() => {
// if (controlerParams.type == 1) { // if (controlerParams.type == 1) {
// setVideoOpen(true) // setVideoOpen(true)
// setIsShow(!isShow) // setIsShow(!isShow)
// } // }
}} }}
> >
<HFivePlayer size={1} wsUrl={videoArr} playerID={'111'} /> <HFivePlayer size={1} wsUrl={videoArr} playerID={'111'} />
{/* <div style={{textAlign:"right"}}>注：单击视频显示/隐藏云台</div> */} {/* <div style={{textAlign:"right"}}>注：单击视频显示/隐藏云台</div> */}
</div> </div>
@ -337,9 +433,17 @@ const Page = () => {
</div> </div>
</div> </div>
<div className='sg_zmjk_right_information'> <div className='sg_zmjk_right_information'>
<div className='sg_zmjk_right_information_title'>监测数据</div> <div className='sg_zmjk_right_information_title'>
<div style={{height:'144px',overflowY:'auto',padding:'20px'}}> <Divider type="vertical" style={{ width: 5, background: '#259def', height: 20 }} />
{ 监测数据</div>
<div style={{ width: '100%', marginTop: 10 }}>
<Table
columns={jcColumns}
rowKey={(record) => record.id}
dataSource={[]}
pagination={false}
/>
{/* {
list?.map((item)=>{ list?.map((item)=>{
if(item.type===1){ if(item.type===1){
return ( return (
@ -367,45 +471,46 @@ const Page = () => {
) )
} }
}) })
} } */}
</div> </div>
</div> </div>
<div className='sg_zmjk_right_more' onClick={()=>setOpen(true)}>查看更多信息</div> {/* <div className='sg_zmjk_right_more' onClick={() => setOpen(true)}>查看更多信息</div> */}
</dvi> </div>
</div> </div>
</div> </div>
</div> </div>
<Modal <Modal
open={open} open={open}
width={1000} width={1100}
title="" title="闸门操作记录"
footer={null} footer={null}
onCancel={() => { onCancel={() => {
setOpen(false) setOpen(false)
}} }}
> >
<div style={{height:'600px'}}> <div style={{ height: '600px' }}>
<Tabs> <ModalContent/>
{/* <Tabs>
<Tabs.TabPane tab="基本信息" key="item-1"> <Tabs.TabPane tab="基本信息" key="item-1">
<Descriptions bordered size="small" column={3} > <Descriptions bordered size="small" column={3} >
<Descriptions.Item label="启闭设备类型" style={{ width: '16.5%' }}>{{1:'卷扬式',2:'螺杆式',3:'凹轮式',4:'涡轮式',5:'丝杆式'}?.[data?.hdgrTp]||'-'}</Descriptions.Item> <Descriptions.Item label="启闭设备类型" style={{ width: '16.5%' }}>{{ 1: '卷扬式', 2: '螺杆式', 3: '凹轮式', 4: '涡轮式', 5: '丝杆式' }?.[data?.hdgrTp] || '-'}</Descriptions.Item>
<Descriptions.Item label="动力类型" style={{ width: '16.5%' }}>{{1:'手动',2:'电动',3:'手电两用'}?.[data?.pwrTp]||'-'}</Descriptions.Item> <Descriptions.Item label="动力类型" style={{ width: '16.5%' }}>{{ 1: '手动', 2: '电动', 3: '手电两用' }?.[data?.pwrTp] || '-'}</Descriptions.Item>
<Descriptions.Item label="水闸类型" style={{ width: '16.5%' }}>{{1:'分（泄）洪闸',2:'节制闸',3:'排（退）水闸',4:'引（进）水闸',5:'挡潮闸',6:'船闸',9:'其他'}?.[data?.wagaType]||'-'}</Descriptions.Item> <Descriptions.Item label="水闸类型" style={{ width: '16.5%' }}>{{ 1: '分（泄）洪闸', 2: '节制闸', 3: '排（退）水闸', 4: '引（进）水闸', 5: '挡潮闸', 6: '船闸', 9: '其他' }?.[data?.wagaType] || '-'}</Descriptions.Item>
<Descriptions.Item label="进口高程">{data?.inEle||'-'} m</Descriptions.Item> <Descriptions.Item label="进口高程">{data?.inEle || '-'} m</Descriptions.Item>
<Descriptions.Item label="出口高程">{data?.outEle||'-'} m</Descriptions.Item> <Descriptions.Item label="出口高程">{data?.outEle || '-'} m</Descriptions.Item>
<Descriptions.Item label="闸门孔数">{data?.gaorNum||'-'} 孔</Descriptions.Item> <Descriptions.Item label="闸门孔数">{data?.gaorNum || '-'} 孔</Descriptions.Item>
<Descriptions.Item label="设计流量">{data?.dsfl||'-'} m³/s</Descriptions.Item> <Descriptions.Item label="设计流量">{data?.dsfl || '-'} m³/s</Descriptions.Item>
<Descriptions.Item label="实达流量">{data?.stfl||'-'} m³/s</Descriptions.Item> <Descriptions.Item label="实达流量">{data?.stfl || '-'} m³/s</Descriptions.Item>
<Descriptions.Item label="闸门尺寸">{data?.gateSize||'-'} m*m</Descriptions.Item> <Descriptions.Item label="闸门尺寸">{data?.gateSize || '-'} m*m</Descriptions.Item>
<Descriptions.Item label="工程等级">{{1:'Ⅰ',2:'Ⅱ',3:'Ⅲ',4:'Ⅳ',5:'Ⅴ'}?.[data?.engGrad]||'-'}</Descriptions.Item> <Descriptions.Item label="工程等级">{{ 1: 'Ⅰ', 2: 'Ⅱ', 3: 'Ⅲ', 4: 'Ⅳ', 5: 'Ⅴ' }?.[data?.engGrad] || '-'}</Descriptions.Item>
<Descriptions.Item label="运行状况">{{1:'在用良好',2:'在用故障',3:'停用'}?.[data?.runStat]||'-'}</Descriptions.Item> <Descriptions.Item label="运行状况">{{ 1: '在用良好', 2: '在用故障', 3: '停用' }?.[data?.runStat] || '-'}</Descriptions.Item>
<Descriptions.Item label="建成时间">{data?.compDate||'-'}</Descriptions.Item> <Descriptions.Item label="建成时间">{data?.compDate || '-'}</Descriptions.Item>
</Descriptions> </Descriptions>
</Tabs.TabPane> </Tabs.TabPane>
<Tabs.TabPane tab="工程图片" key="item-2"> <Tabs.TabPane tab="工程图片" key="item-2">
<Image width={800} src={url + data?.files?.filePath} alt='' /> <Image width={800} src={url + data?.files?.filePath} alt='' />
</Tabs.TabPane> </Tabs.TabPane>
</Tabs> </Tabs> */}
</div> </div>
</Modal> </Modal>
</> </>

43
src/views/rcgl/zmjk/index.less
View File

@ -2,12 +2,24 @@
.ant-card-body{ .ant-card-body{
display: flex; display: flex;
height: 100%; height: 100%;
column-gap: 20px;
.sg_zmjk_left{ .sg_zmjk_left{
top: 30px; // top: 30px;
position: relative; position: relative;
width: 1080px; width: 930px;
height: 640px; // height: 640px;
transform: scale(0.9,1); .sg_zmjk_left_title{
height: 35px;
line-height: 35px;
border-bottom: 1px solid #bbb;
font-weight: 600;
font-size: 18px;
}
.sz_left_up_table{
margin-top: 10px;
// height: 355px;
}
} }
.sg_zmjk_right{ .sg_zmjk_right{
@ -19,16 +31,18 @@
.sg_zmjk_right_video{ .sg_zmjk_right_video{
height: 400px; height: 400px;
margin: 30px 20px 30px -30px; // margin: 30px 20px 30px -30px;
border-radius: 5px; border-radius: 5px;
border: 1px solid #bbb; // border: 1px solid #bbb;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.sg_zmjk_right_video_title{ .sg_zmjk_right_video_title{
height: 35px; height: 35px;
line-height: 35px; line-height: 35px;
padding-left: 10px; // padding-left: 10px;
border-bottom: 1px solid #bbb; border-bottom: 1px solid #bbb;
font-weight: 600;
font-size: 18px;
} }
.sg_zmjk_right_video_content{ .sg_zmjk_right_video_content{
flex: 1; flex: 1;
@ -57,7 +71,7 @@
} }
} }
.sg_zmjk_right_video_content_right{ .sg_zmjk_right_video_content_right{
flex: 1; width: 100%;
height: 100%; height: 100%;
padding: 10px; padding: 10px;
} }
@ -65,14 +79,16 @@
} }
.sg_zmjk_right_information{ .sg_zmjk_right_information{
height: 180px; height: 180px;
margin: -10px 20px 30px -30px; // margin: -10px 20px 30px -30px;
border-radius: 5px; border-radius: 5px;
border: 1px solid #bbb; // border: 1px solid #bbb;
.sg_zmjk_right_information_title{ .sg_zmjk_right_information_title{
height: 35px; height: 35px;
line-height: 35px; line-height: 35px;
padding-left: 10px; // padding-left: 10px;
border-bottom: 1px solid #bbb; border-bottom: 1px solid #bbb;
font-weight: 600;
font-size: 18px;
} }
.sg_zmjk_right_information_content{ .sg_zmjk_right_information_content{
display: flex; display: flex;
@ -83,10 +99,7 @@
} }
} }
} }
.sg_zmjk_right_more{
margin: -10px 20px 30px -30px;
cursor: pointer;
}
} }
} }
} }

88
src/views/sq/qys/gcys/buildInfo/index.js
View File

@ -23,7 +23,7 @@ export default function BuildInfo() {
<Form.Item <Form.Item
label="坝型" label="坝型"
name="resName" name="resName"
rules={[{ required: true }]}
> >
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} /> <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
</Form.Item> </Form.Item>
@ -32,7 +32,7 @@ export default function BuildInfo() {
<Form.Item <Form.Item
label="坝顶高程(m)" label="坝顶高程(m)"
name="resName" name="resName"
rules={[{ required: true }]}
> >
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} /> <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
</Form.Item> </Form.Item>
@ -41,7 +41,7 @@ export default function BuildInfo() {
<Form.Item <Form.Item
label="坝顶长度(m)" label="坝顶长度(m)"
name="resName" name="resName"
rules={[{ required: true }]}
> >
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} /> <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
</Form.Item> </Form.Item>
@ -50,7 +50,7 @@ export default function BuildInfo() {
<Form.Item <Form.Item
label="坝顶宽度(m)" label="坝顶宽度(m)"
name="resName" name="resName"
rules={[{ required: true }]}
> >
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} /> <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
</Form.Item> </Form.Item>
@ -58,7 +58,7 @@ export default function BuildInfo() {
<Form.Item <Form.Item
label="最大坝高(m)" label="最大坝高(m)"
name="resName" name="resName"
rules={[{ required: true }]}
> >
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} /> <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
</Form.Item> </Form.Item>
@ -73,7 +73,7 @@ export default function BuildInfo() {
<Form.Item <Form.Item
label="坝型" label="坝型"
name="resName" name="resName"
rules={[{ required: true }]}
> >
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} /> <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
</Form.Item> </Form.Item>
@ -82,7 +82,7 @@ export default function BuildInfo() {
<Form.Item <Form.Item
label="坝顶高程(m)" label="坝顶高程(m)"
name="resName" name="resName"
rules={[{ required: true }]}
> >
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} /> <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
</Form.Item> </Form.Item>
@ -91,7 +91,7 @@ export default function BuildInfo() {
<Form.Item <Form.Item
label="坝顶长度(m)" label="坝顶长度(m)"
name="resName" name="resName"
rules={[{ required: true }]}
> >
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} /> <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
</Form.Item> </Form.Item>
@ -100,7 +100,7 @@ export default function BuildInfo() {
<Form.Item <Form.Item
label="坝顶宽度(m)" label="坝顶宽度(m)"
name="resName" name="resName"
rules={[{ required: true }]}
> >
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} /> <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
</Form.Item> </Form.Item>
@ -108,7 +108,7 @@ export default function BuildInfo() {
<Form.Item <Form.Item
label="最大坝高(m)" label="最大坝高(m)"
name="resName" name="resName"
rules={[{ required: true }]}
> >
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} /> <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
</Form.Item> </Form.Item>
@ -123,7 +123,7 @@ export default function BuildInfo() {
<Form.Item <Form.Item
label="型式" label="型式"
name="resName" name="resName"
rules={[{ required: true }]}
> >
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} /> <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
</Form.Item> </Form.Item>
@ -132,7 +132,7 @@ export default function BuildInfo() {
<Form.Item <Form.Item
label="堰顶型式" label="堰顶型式"
name="resName" name="resName"
rules={[{ required: true }]}
> >
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} /> <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
</Form.Item> </Form.Item>
@ -141,7 +141,7 @@ export default function BuildInfo() {
<Form.Item <Form.Item
label="地基特性" label="地基特性"
name="resName" name="resName"
rules={[{ required: true }]}
> >
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} /> <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
</Form.Item> </Form.Item>
@ -150,7 +150,7 @@ export default function BuildInfo() {
<Form.Item <Form.Item
label="溢流堰顶高程(m)" label="溢流堰顶高程(m)"
name="resName" name="resName"
rules={[{ required: true }]}
> >
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} /> <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
</Form.Item> </Form.Item>
@ -159,7 +159,7 @@ export default function BuildInfo() {
<Form.Item <Form.Item
label="溢流堰净宽(m)" label="溢流堰净宽(m)"
name="resName" name="resName"
rules={[{ required: true }]}
> >
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} /> <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
</Form.Item> </Form.Item>
@ -168,7 +168,7 @@ export default function BuildInfo() {
<Form.Item <Form.Item
label="消能型式" label="消能型式"
name="resName" name="resName"
rules={[{ required: true }]}
> >
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} /> <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
</Form.Item> </Form.Item>
@ -176,7 +176,7 @@ export default function BuildInfo() {
<Form.Item <Form.Item
label="校核洪水下泄流量(m3/s)" label="校核洪水下泄流量(m3/s)"
name="resName" name="resName"
rules={[{ required: true }]}
> >
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} /> <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
</Form.Item> </Form.Item>
@ -184,7 +184,7 @@ export default function BuildInfo() {
<Form.Item <Form.Item
label="设计洪水下泄流量(m3/s)" label="设计洪水下泄流量(m3/s)"
name="resName" name="resName"
rules={[{ required: true }]}
> >
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} /> <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
</Form.Item> </Form.Item>
@ -192,7 +192,7 @@ export default function BuildInfo() {
<Form.Item <Form.Item
label="消能防冲下泄流量(m3/s)" label="消能防冲下泄流量(m3/s)"
name="resName" name="resName"
rules={[{ required: true }]}
> >
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} /> <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
</Form.Item> </Form.Item>
@ -207,7 +207,7 @@ export default function BuildInfo() {
<Form.Item <Form.Item
label="型式" label="型式"
name="resName" name="resName"
rules={[{ required: true }]}
> >
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} /> <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
</Form.Item> </Form.Item>
@ -216,7 +216,7 @@ export default function BuildInfo() {
<Form.Item <Form.Item
label="衬砌型式" label="衬砌型式"
name="resName" name="resName"
rules={[{ required: true }]}
> >
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} /> <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
</Form.Item> </Form.Item>
@ -225,7 +225,7 @@ export default function BuildInfo() {
<Form.Item <Form.Item
label="地基特性" label="地基特性"
name="resName" name="resName"
rules={[{ required: true }]}
> >
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} /> <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
</Form.Item> </Form.Item>
@ -234,7 +234,7 @@ export default function BuildInfo() {
<Form.Item <Form.Item
label="进口底板高程(m)" label="进口底板高程(m)"
name="resName" name="resName"
rules={[{ required: true }]}
> >
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} /> <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
</Form.Item> </Form.Item>
@ -243,7 +243,7 @@ export default function BuildInfo() {
<Form.Item <Form.Item
label="断面尺寸(m)" label="断面尺寸(m)"
name="resName" name="resName"
rules={[{ required: true }]}
> >
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} /> <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
</Form.Item> </Form.Item>
@ -252,7 +252,7 @@ export default function BuildInfo() {
<Form.Item <Form.Item
label="洞长(m)" label="洞长(m)"
name="resName" name="resName"
rules={[{ required: true }]}
> >
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} /> <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
</Form.Item> </Form.Item>
@ -260,7 +260,7 @@ export default function BuildInfo() {
<Form.Item <Form.Item
label="设计流量(m3/s)" label="设计流量(m3/s)"
name="resName" name="resName"
rules={[{ required: true }]}
> >
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} /> <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
</Form.Item> </Form.Item>
@ -268,7 +268,7 @@ export default function BuildInfo() {
<Form.Item <Form.Item
label="进口闸门型式" label="进口闸门型式"
name="resName" name="resName"
rules={[{ required: true }]}
> >
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} /> <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
</Form.Item> </Form.Item>
@ -276,7 +276,7 @@ export default function BuildInfo() {
<Form.Item <Form.Item
label="进口启闭机型式" label="进口启闭机型式"
name="resName" name="resName"
rules={[{ required: true }]}
> >
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} /> <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
</Form.Item> </Form.Item>
@ -291,7 +291,7 @@ export default function BuildInfo() {
<Form.Item <Form.Item
label="型式" label="型式"
name="resName" name="resName"
rules={[{ required: true }]}
> >
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} /> <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
</Form.Item> </Form.Item>
@ -300,7 +300,7 @@ export default function BuildInfo() {
<Form.Item <Form.Item
label="衬砌型式" label="衬砌型式"
name="resName" name="resName"
rules={[{ required: true }]}
> >
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} /> <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
</Form.Item> </Form.Item>
@ -309,7 +309,7 @@ export default function BuildInfo() {
<Form.Item <Form.Item
label="地基特性" label="地基特性"
name="resName" name="resName"
rules={[{ required: true }]}
> >
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} /> <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
</Form.Item> </Form.Item>
@ -318,7 +318,7 @@ export default function BuildInfo() {
<Form.Item <Form.Item
label="进口底板高程(m)" label="进口底板高程(m)"
name="resName" name="resName"
rules={[{ required: true }]}
> >
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} /> <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
</Form.Item> </Form.Item>
@ -327,7 +327,7 @@ export default function BuildInfo() {
<Form.Item <Form.Item
label="断面尺寸(m)" label="断面尺寸(m)"
name="resName" name="resName"
rules={[{ required: true }]}
> >
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} /> <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
</Form.Item> </Form.Item>
@ -336,7 +336,7 @@ export default function BuildInfo() {
<Form.Item <Form.Item
label="洞长(m)" label="洞长(m)"
name="resName" name="resName"
rules={[{ required: true }]}
> >
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} /> <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
</Form.Item> </Form.Item>
@ -344,7 +344,7 @@ export default function BuildInfo() {
<Form.Item <Form.Item
label="设计流量(m3/s)" label="设计流量(m3/s)"
name="resName" name="resName"
rules={[{ required: true }]}
> >
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} /> <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
</Form.Item> </Form.Item>
@ -352,7 +352,7 @@ export default function BuildInfo() {
<Form.Item <Form.Item
label="进口闸门型式" label="进口闸门型式"
name="resName" name="resName"
rules={[{ required: true }]}
> >
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} /> <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
</Form.Item> </Form.Item>
@ -360,7 +360,7 @@ export default function BuildInfo() {
<Form.Item <Form.Item
label="进口启闭机型式" label="进口启闭机型式"
name="resName" name="resName"
rules={[{ required: true }]}
> >
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} /> <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
</Form.Item> </Form.Item>
@ -375,7 +375,7 @@ export default function BuildInfo() {
<Form.Item <Form.Item
label="坝型" label="坝型"
name="resName" name="resName"
rules={[{ required: true }]}
> >
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} /> <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
</Form.Item> </Form.Item>
@ -384,7 +384,7 @@ export default function BuildInfo() {
<Form.Item <Form.Item
label="坝顶高程(m)" label="坝顶高程(m)"
name="resName" name="resName"
rules={[{ required: true }]}
> >
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} /> <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
</Form.Item> </Form.Item>
@ -393,7 +393,7 @@ export default function BuildInfo() {
<Form.Item <Form.Item
label="坝顶长度(m)" label="坝顶长度(m)"
name="resName" name="resName"
rules={[{ required: true }]}
> >
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} /> <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
</Form.Item> </Form.Item>
@ -402,7 +402,7 @@ export default function BuildInfo() {
<Form.Item <Form.Item
label="坝顶宽度(m)" label="坝顶宽度(m)"
name="resName" name="resName"
rules={[{ required: true }]}
> >
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} /> <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
</Form.Item> </Form.Item>
@ -410,7 +410,7 @@ export default function BuildInfo() {
<Form.Item <Form.Item
label="最大坝高(m)" label="最大坝高(m)"
name="resName" name="resName"
rules={[{ required: true }]}
> >
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} /> <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
</Form.Item> </Form.Item>
@ -425,7 +425,7 @@ export default function BuildInfo() {
<Form.Item <Form.Item
label="防汛路长度(m)" label="防汛路长度(m)"
name="resName" name="resName"
rules={[{ required: true }]}
> >
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} /> <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
</Form.Item> </Form.Item>
@ -434,7 +434,7 @@ export default function BuildInfo() {
<Form.Item <Form.Item
label="路面宽度(m)" label="路面宽度(m)"
name="resName" name="resName"
rules={[{ required: true }]}
> >
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} /> <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
</Form.Item> </Form.Item>

872
src/views/sq/qys/gcys/projectBasicInfo/index.js
View File

@ -1,6 +1,6 @@
import React,{useState,useEffect} from 'react' import React, { useState, useEffect } from 'react'
import { Row, Col, Form, Input, DatePicker, Button,Upload,message,Modal } from "antd" import { Row, Col, Form, Input, DatePicker, Button, Upload, message, Modal } from "antd"
import {PaperClipOutlined,DeleteOutlined} from '@ant-design/icons'; import { PaperClipOutlined, DeleteOutlined } from '@ant-design/icons';
import NormalSelect from '../../../../../components/Form/NormalSelect'; import NormalSelect from '../../../../../components/Form/NormalSelect';
import { formItemLayout } from '../../../../../components/crud/FormLayoutProps' import { formItemLayout } from '../../../../../components/crud/FormLayoutProps'
import apiurl from '../../../../../service/apiurl'; import apiurl from '../../../../../service/apiurl';
@ -8,451 +8,481 @@ import { httpget2, httppost2 } from '../../../../../utils/request';
import moment from 'moment' import moment from 'moment'
import "./index.less" import "./index.less"
export default function ProjectBasciInfo() { export default function ProjectBasciInfo() {
const [form] = Form.useForm(); const [form] = Form.useForm();
const [data, setData] = useState() const [data, setData] = useState()
const [fileList, setFileList] = useState([]) //上传文件列表 const [fileList, setFileList] = useState([]) //上传文件列表
const [fileIds, setFileIds] = useState([]) const [fileIds, setFileIds] = useState([])
const [loading, setLoading] = useState(false) const [loading, setLoading] = useState(false)
const [iframeId, setIframeId] = useState('') const [iframeId, setIframeId] = useState('')
const [perviewOpen, setPerviewOpen] = useState(false) const [perviewOpen, setPerviewOpen] = useState(false)
const [skdisabled, setSkDisabled] = useState(true) const [skdisabled, setSkDisabled] = useState(true)
const optionsLevel = [ const optionsLevel = [
{ {
label: "大 (1)型", label: "大 (1)型",
value:"1" value: "1"
}, },
{ {
label: "大 (2)型", label: "大 (2)型",
value:"2" value: "2"
}, },
{ {
label: "中型", label: "中型",
value:"3" value: "3"
}, },
{ {
label: "小 (1)型", label: "小 (1)型",
value:"4" value: "4"
}, },
{ {
label: "小 (2)型", label: "小 (2)型",
value:"5" value: "5"
}, },
{ {
label: "其他", label: "其他",
value:"9" value: "9"
}
]
const getData = async () => {
try {
const res = await httppost2(apiurl.dataResourcesCenter.projectAndWater.shuikuBasicinfo.detail)
// debugger;
if (res.code == 200) {
form.setFieldsValue(res.data[0])
setData(res.data[0])
if (res.data[0].files.length > 0) {
getFileInfo(res.data[0]?.files[0]?.fileId)
}
}
} catch (error) {
console.log(error);
}
} }
]
const beforeUpload = (file) => { const getData = async () => {
const isPdf = file.type === 'application/pdf' try {
if (!isPdf) {
message.error("请上传pdf文件")
}
return isPdf
}
const fileChange = (info) => { const res = await httppost2(apiurl.dataResourcesCenter.projectAndWater.shuikuBasicinfo.detail)
// debugger;
if (info.file.status === "done") { if (res.code == 200) {
setLoading(false); form.setFieldsValue(res.data[0])
setData(res.data[0])
} if (res.data[0].files.length > 0) {
if (info.file.status === "uploading") { getFileInfo(res.data[0]?.files[0]?.fileId)
setLoading(true);
}
if (info.file.status === "error") {
message.error("文件上传失败")
setLoading(false);
}
if (info?.file.type === "application/pdf") {
let fileIds = info.fileList.map(file => {
return file.response?.data?.fileId
})
setFileIds(fileIds)
setFileList(info.fileList)
} }
} }
} catch (error) {
const deleteFile = (fileId) => { console.log(error);
let filterFile = fileList.filter(item => item.response?.data?.fileId !== fileId);
setFileList(filterFile)
} }
}
const onFinish = async () => { const beforeUpload = (file) => {
try { const isPdf = file.type === 'application/pdf'
let oldFiles = fileList.map(item => ({ fileId: item.response?.data?.fileId })) if (!isPdf) {
const values = form.getFieldsValue(); message.error("请上传pdf文件")
const params = {
...data,
...values,
files:oldFiles
}
const res = await httppost2(apiurl.dataResourcesCenter.projectAndWater.shuikuBasicinfo.update,params)
if (res.code == 200) {
message.success("修改成功")
setSkDisabled(true)
getData()
}
} catch (error) {
console.log(error);
}
} }
return isPdf
}
const getFileInfo = async(id) => { const fileChange = (info) => {
try { let newFileList = [...info.fileList];
const res = await httpget2(`${apiurl.dataResourcesCenter.projectAndWater.shuikuBasicinfo.getFile}/${id}`) newFileList = newFileList.slice(-1);
let obj ={ // 处理文件状态
name: res.data.fileName, newFileList = newFileList.map(file => {
response: { if (file.response) {
data: { return {
filePath: res.data.filePath, ...file,
fileId:res.data.fileId status: 'done', // 确保状态正确
} url: file.response.url,
}, fileId: file.response.data?.fileId
} };
setFileList([obj]) }
} catch (error) { return file;
console.log(error); });
if (info.file.status === "done") {
} setLoading(false);
message.success(`${info.file.name} 上传成功`);
} }
useEffect(() => { if (info.file.status === "uploading") {
setLoading(true);
}
if (info.file.status === "error") {
message.error("文件上传失败")
setLoading(false);
}
if (info?.file.type === "application/pdf") {
let fileIds = info.fileList.map(file => {
return file.response?.data?.fileId
})
setFileIds(fileIds)
setFileList(newFileList)
}
}
const deleteFile = (fileId) => {
let filterFile = fileList.filter(item => item.response?.data?.fileId !== fileId);
setFileList(filterFile)
}
const onFinish = async () => {
try {
let oldFiles = fileList.map(item => ({ fileId: item.response?.data?.fileId }))
const values = form.getFieldsValue();
const params = {
...data,
...values,
files: oldFiles
}
const res = await httppost2(apiurl.dataResourcesCenter.projectAndWater.shuikuBasicinfo.update, params)
if (res.code == 200) {
message.success("修改成功")
setSkDisabled(true)
getData() getData()
}, []) }
} catch (error) {
console.log(error);
}
}
const getFileInfo = async (id) => {
try {
const res = await httpget2(`${apiurl.dataResourcesCenter.projectAndWater.shuikuBasicinfo.getFile}/${id}`)
let obj = {
name: res.data.fileName,
response: {
data: {
filePath: res.data.filePath,
fileId: res.data.fileId
}
},
}
setFileList([obj])
} catch (error) {
console.log(error);
}
}
console.log('f', fileList);
useEffect(() => {
getData()
}, [])
return ( return (
<div className='basic-info-content'> <div className='basic-info-content'>
<Form <Form
form={form} form={form}
{...formItemLayout} {...formItemLayout}
onFinish={onFinish} onFinish={onFinish}
> >
<Row> <Row>
<Col span={8}> <Col span={8}>
<Form.Item <Form.Item
label="水库名称" label="水库名称"
name="resName" name="resName"
rules={[{ required: true }]} rules={[{ required: true }]}
> >
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} /> <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
</Form.Item> </Form.Item>
</Col> </Col>
<Col span={8}> <Col span={8}>
<Form.Item <Form.Item
label="水库代码" label="水库代码"
name="resCode" name="resCode"
rules={[{ required: true }]} rules={[{ required: true }]}
> >
<Input allowClear style={{width:'300px'}} disabled/> <Input allowClear style={{ width: '300px' }} disabled />
</Form.Item> </Form.Item>
</Col> </Col>
<Col span={8}> <Col span={8}>
<Form.Item <Form.Item
label="注册登记号" label="注册登记号"
name="regSn" name="regSn"
> >
<Input allowClear style={{width:'300px'}} disabled={skdisabled}/> <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
</Form.Item> </Form.Item>
</Col> </Col>
</Row> </Row>
<Row> <Row>
<Col span={8}> <Col span={8}>
<Form.Item <Form.Item
label="注册登记时间" label="注册登记时间"
name="regTime" name="regTime"
getValueFromEvent={(e, dateString) => moment(dateString).format('YYYY-MM-DD HH:mm:ss')} getValueFromEvent={(e, dateString) => moment(dateString).format('YYYY-MM-DD HH:mm:ss')}
getValueProps={value => ({ getValueProps={value => ({
value: value ? moment(value) : undefined value: value ? moment(value) : undefined
})} })}
> >
<DatePicker allowClear style={{width:'300px'}} disabled={skdisabled}/> <DatePicker allowClear style={{ width: '300px' }} disabled={skdisabled} />
</Form.Item> </Form.Item>
</Col> </Col>
<Col span={8}> <Col span={8}>
<Form.Item <Form.Item
label="工程位置" label="工程位置"
name="resLoc" name="resLoc"
> >
<Input allowClear style={{width:'300px'}} disabled={skdisabled}/> <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
</Form.Item> </Form.Item>
</Col> </Col>
<Col span={8}> <Col span={8}>
<Form.Item <Form.Item
label="所在河流(水系)名称" label="所在河流(水系)名称"
name="basName" name="basName"
> >
<Input allowClear style={{width:'300px'}} disabled={skdisabled}/> <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
</Form.Item> </Form.Item>
</Col> </Col>
</Row> </Row>
<Row> <Row>
<Col span={8}> <Col span={8}>
<Form.Item <Form.Item
label="水库规模" label="水库规模"
name="engScal" name="engScal"
rules={[{ required: true }]} rules={[{ required: true }]}
> >
<NormalSelect <NormalSelect
style={{ width: '300px' }} style={{ width: '300px' }}
allowClear allowClear
options={optionsLevel} options={optionsLevel}
disabled={skdisabled} disabled={skdisabled}
/> />
</Form.Item> </Form.Item>
</Col> </Col>
<Col span={8}> <Col span={8}>
<Form.Item <Form.Item
label="主要功能" label="主要功能"
name="rsvFunction" name="rsvFunction"
> >
<Input allowClear style={{width:'300px'}} disabled={skdisabled}/> <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
</Form.Item> </Form.Item>
</Col> </Col>
<Col span={8}> <Col span={8}>
<Form.Item <Form.Item
label="经度" label="经度"
name="lgtd" name="lgtd"
rules={[{ required: true }]} rules={[{ required: true }]}
> >
<Input allowClear style={{width:'300px'}} disabled={skdisabled}/> <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
</Form.Item> </Form.Item>
</Col> </Col>
</Row> </Row>
<Row> <Row>
<Col span={8}> <Col span={8}>
<Form.Item <Form.Item
label="纬度" label="纬度"
name="lttd" name="lttd"
rules={[{ required: true }]} rules={[{ required: true }]}
> >
<Input allowClear style={{width:'300px'}} disabled={skdisabled}/> <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
</Form.Item> </Form.Item>
</Col> </Col>
<Col span={8}> <Col span={8}>
<Form.Item <Form.Item
label="设计灌溉面积(亩)" label="设计灌溉面积(亩)"
name="designIrrArea" name="designIrrArea"
> >
<Input allowClear style={{width:'300px'}} disabled={skdisabled}/> <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
</Form.Item> </Form.Item>
</Col> </Col>
<Col span={8}> <Col span={8}>
<Form.Item <Form.Item
label="实际灌溉面积(亩)" label="实际灌溉面积(亩)"
name="actualIrrArea" name="actualIrrArea"
> >
<Input allowClear style={{width:'300px'}} disabled={skdisabled}/> <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
</Form.Item> </Form.Item>
</Col> </Col>
</Row> </Row>
<Row> <Row>
<Col span={8}> <Col span={8}>
<Form.Item <Form.Item
label="受益人口(人)" label="受益人口(人)"
name="feedPop" name="feedPop"
> >
<Input allowClear style={{width:'300px'}} disabled={skdisabled}/> <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
</Form.Item> </Form.Item>
</Col> </Col>
<Col span={8}> <Col span={8}>
<Form.Item <Form.Item
label="开工日期" label="开工日期"
name="startDate" name="startDate"
getValueFromEvent={(e, dateString) => moment(dateString).format('YYYY-MM-DD HH:mm:ss')} getValueFromEvent={(e, dateString) => moment(dateString).format('YYYY-MM-DD HH:mm:ss')}
getValueProps={value => ({ getValueProps={value => ({
value: value ? moment(value) : undefined value: value ? moment(value) : undefined
})} })}
> >
<DatePicker allowClear style={{ width: '300px' }} disabled={skdisabled}/> <DatePicker allowClear style={{ width: '300px' }} disabled={skdisabled} />
</Form.Item> </Form.Item>
</Col> </Col>
<Col span={8}> <Col span={8}>
<Form.Item <Form.Item
label="竣工日期" label="竣工日期"
name="compDate" name="compDate"
getValueFromEvent={(e, dateString) => moment(dateString).format('YYYY-MM-DD HH:mm:ss')} getValueFromEvent={(e, dateString) => moment(dateString).format('YYYY-MM-DD HH:mm:ss')}
getValueProps={value => ({ getValueProps={value => ({
value: value ? moment(value) : undefined value: value ? moment(value) : undefined
})} })}
> >
<DatePicker allowClear style={{ width: '300px' }} disabled={skdisabled}/> <DatePicker allowClear style={{ width: '300px' }} disabled={skdisabled} />
</Form.Item> </Form.Item>
</Col> </Col>
</Row> </Row>
<Row> <Row>
<Col span={8}> <Col span={8}>
<Form.Item <Form.Item
label="是否病险" label="是否病险"
name="isDanger" name="isDanger"
> >
<NormalSelect <NormalSelect
style={{ width: '300px' }} style={{ width: '300px' }}
allowClear allowClear
options={[ options={[
{ {
label: '否', label: '否',
value:0, value: 0,
}, },
{ {
label: '是', label: '是',
value:1, value: 1,
}, },
]} ]}
disabled={skdisabled} disabled={skdisabled}
/> />
</Form.Item> </Form.Item>
</Col> </Col>
<Col span={8}> <Col span={8}>
<Form.Item <Form.Item
label="是否有闸控制" label="是否有闸控制"
name="spillwayGate" name="spillwayGate"
> >
<NormalSelect <NormalSelect
style={{ width: '300px' }} style={{ width: '300px' }}
allowClear allowClear
options={[ options={[
{ {
label: '否', label: '否',
value:"0", value: "0",
}, },
{ {
label: '是', label: '是',
value:"1", value: "1",
}, },
]} ]}
disabled={skdisabled} disabled={skdisabled}
/> />
</Form.Item> </Form.Item>
</Col> </Col>
<Col span={8}> <Col span={8}>
<Form.Item <Form.Item
label="工程特性表" label="工程特性表"
name="" name=""
rules={[{ required: true }]} rules={[{ required: true }]}
> >
<Upload <Upload
name='file' name='file'
action="/gunshiApp/tsg/attResBase/file/upload/singleSimple" action="/gunshiApp/tsg/attResBase/file/upload/singleSimple"
onChange={fileChange} onChange={fileChange}
fileList={fileList} fileList={fileList}
maxCount={1} maxCount={1}
disabled={loading} disabled={loading}
beforeUpload={beforeUpload} beforeUpload={beforeUpload}
itemRender={(origin,file) => { showUploadList={false}
return ( >
<div style={{display:"flex",alignItems:"center",columnGap:10}}> {fileList.map(file => (
<PaperClipOutlined /> <div key={file.uid} style={{ display: "flex", alignItems: "center", columnGap: 10 }}>
<span <PaperClipOutlined />
style={{ cursor: "pointer" }} <span
onClick={() => { setPerviewOpen(true); setIframeId(file.response?.data?.fileId)}} style={{ cursor: "pointer" }}
> onClick={(e) => {
{file?.name}</span> e.stopPropagation(); // 阻止触发上传
{skdisabled ? null : if (file.response?.data?.fileId) {
<DeleteOutlined setPerviewOpen(true);
style={{ marginLeft: 20, cursor: "pointer" }} setIframeId(file.response.data.fileId);
onClick={() => deleteFile(file.response?.data?.fileId)} }
/> }}
} >
</div> {file.name}
) </span>
}} {!skdisabled && (
> <DeleteOutlined
{skdisabled ? null : style={{ marginLeft: 20, cursor: "pointer" }}
<div style={{display:"flex",alignItems:"center",columnGap:10,color:"#4f85ec",cursor:skdisabled?"not-allowed":"pointer"}}> onClick={(e) => {
<PaperClipOutlined /> e.stopPropagation(); // 阻止触发上传
<a style={{cursor:"pointer"}}>上传PDF文件</a> deleteFile(file.response?.data?.fileId);
</div> }}
} />
</Upload> )}
</Form.Item> </div>
</Col> ))}
</Row> {!skdisabled && fileList.length === 0 && (
<Row> <div style={{
<Col span={24}> display: "flex",
<Form.Item alignItems: "center",
label="供水效益" columnGap: 10,
name="benefit" color: "#4f85ec",
labelCol={{ span: 2, offset: 0 }} cursor: "pointer"
wrapperCol={{span:21,offset:0}} }}>
> <PaperClipOutlined />
<Input allowClear disabled={skdisabled}/> <a>上传PDF文件</a>
</Form.Item> </div>
</Col> )}
</Row> </Upload>
<Row> </Form.Item>
<Col span={24}> </Col>
<Form.Item </Row>
label="工程概况" <Row>
name="projOverview" <Col span={24}>
labelCol={{ span: 2, offset: 0 }} <Form.Item
wrapperCol={{span:21,offset:0}} label="供水效益"
> name="benefit"
<Input.TextArea allowClear style={{width:'100%',minHeight:'100px'}} disabled={skdisabled}/> labelCol={{ span: 2, offset: 0 }}
</Form.Item> wrapperCol={{ span: 21, offset: 0 }}
</Col> >
</Row> <Input allowClear disabled={skdisabled} />
<Row style={{marginTop:80}}> </Form.Item>
<Col span={24}> </Col>
<Form.Item </Row>
wrapperCol={{span:14,offset:10}} <Row>
> <Col span={24}>
{ <Form.Item
skdisabled ? <Button type="primary" onClick={() => setSkDisabled(false)}>编辑</Button> : label="工程概况"
<div style={{ display: 'flex', columnGap: 20 }}> name="projOverview"
<Button onClick={() => setSkDisabled(true)}>取消</Button> labelCol={{ span: 2, offset: 0 }}
<Button type="primary" onClick={() => { onFinish() }}>保存</Button> wrapperCol={{ span: 21, offset: 0 }}
</div> >
} <Input.TextArea allowClear style={{ width: '100%', minHeight: '100px' }} disabled={skdisabled} />
</Form.Item>
</Form.Item> </Col>
</Col> </Row>
</Row> <Row style={{ marginTop: 80 }}>
</Form> <Col span={24}>
<Form.Item
<Modal wrapperCol={{ span: 14, offset: 10 }}
>
{
skdisabled ? <Button type="primary" onClick={() => setSkDisabled(false)}>编辑</Button> :
<div style={{ display: 'flex', columnGap: 20 }}>
<Button onClick={() => setSkDisabled(true)}>取消</Button>
<Button type="primary" onClick={() => { onFinish() }}>保存</Button>
</div>
}
</Form.Item>
</Col>
</Row>
</Form>
<Modal
open={perviewOpen} open={perviewOpen}
width={1000} width={1000}
title="" title=""
footer={null} footer={null}
style={{marginTop:"-5%"}} style={{ marginTop: "-5%" }}
onCancel={() => { onCancel={() => {
setPerviewOpen(false) setPerviewOpen(false)
}} }}
> >
<iframe <iframe
style={{ style={{
height: '80vh', height: '80vh',
width: '100%', width: '100%',
border: 0, border: 0,
marginTop: 20, marginTop: 20,
}} }}
src={`${process.env.PUBLIC_URL}/static/pdf/web/viewer.html?file=${encodeURIComponent(`/gunshiApp/tsg/attResBase/file/download/${iframeId}`)}`} src={`${process.env.PUBLIC_URL}/static/pdf/web/viewer.html?file=${encodeURIComponent(`/gunshiApp/tsg/attResBase/file/download/${iframeId}`)}`}
/> />
</Modal> </Modal>
</div> </div>

2
src/views/sq/qzq/qzqda/toolbar.js
View File

@ -27,7 +27,7 @@ const ToolBar = ({ setSearchVal, onExport, storeData, role }) => {
<Form form={form} className='toolbarBox' layout="inline" onFinish={onFinish}> <Form form={form} className='toolbarBox' layout="inline" onFinish={onFinish}>
<Form.Item label="类型" name="types"> <Form.Item label="类型" name="types">
<Select options={[ <Select options={[
{value:1,label:'大事记'}, {value:2,label:'调度指令'}, {value:3,label:'维修养护'},{value:4,label:'安全鉴定'}, {value:5,label:"除险加固"}, {value:6,label:'白蚁普查'} {value:1,label:'大事记'}, {value:2,label:'调度指令'}, {value:3,label:'维修养护'},{value:4,label:'安全鉴定'}, {value:5,label:"除险加固"}, {value:6,label:'白蚁监测'}
]} allowClear mode='multiple' maxTagCount='responsive' style={{ width: "200px" }}/> ]} allowClear mode='multiple' maxTagCount='responsive' style={{ width: "200px" }}/>
</Form.Item> </Form.Item>
<Form.Item label="发生日期" name="tm"> <Form.Item label="发生日期" name="tm">