feat(): 设备维护模块开发
parent
9f371e041a
commit
3c5bd3ac4e
|
|
@ -0,0 +1,184 @@
|
||||||
|
import React,{useState,useEffect} from 'react'
|
||||||
|
import { Upload, Row, Col,Image,message,Modal } from "antd"
|
||||||
|
import { DeleteOutlined, FileWordOutlined, FilePdfOutlined,FileJpgOutlined, FileZipOutlined, FilePptOutlined, FileExcelOutlined } from '@ant-design/icons';
|
||||||
|
import './index.less'
|
||||||
|
import { httpget, httpGetFile, httppost } from '../../utils/request';
|
||||||
|
import apiurl from '../../service/apiurl';
|
||||||
|
const { Dragger } = Upload;
|
||||||
|
export default function FileUpload({ mode,setFileIds,files }) {
|
||||||
|
const [fileList, setFileList] = useState([]) //上传文件列表
|
||||||
|
const [iframeSrc, setIframeSrc] = useState('')
|
||||||
|
const [pdfViewOPen, setPdfViewOPen] = useState(false)
|
||||||
|
const [loading, setLoading] = useState(false)
|
||||||
|
/**
|
||||||
|
* @description 删除上传的图片
|
||||||
|
* @param {string} id 删除的id
|
||||||
|
*/
|
||||||
|
const deleteFile = async(fileId) => {
|
||||||
|
let filterFile = fileList.filter(item => item.response?.data?.fileId !== fileId);
|
||||||
|
setFileList(filterFile)
|
||||||
|
setFileIds(filterFile.map(item => item.response?.data?.fileId))
|
||||||
|
}
|
||||||
|
|
||||||
|
const fileChange = (info) => {
|
||||||
|
if (info.file.status === "done") {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
if (info.file.status === "uploading") {
|
||||||
|
setLoading(true);
|
||||||
|
}
|
||||||
|
if (info.file.status === "error") {
|
||||||
|
message.error("文件上传失败")
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
let fileIds = info.fileList.map(file => {
|
||||||
|
return file.response?.data?.fileId
|
||||||
|
})
|
||||||
|
setFileIds(fileIds)
|
||||||
|
setFileList(info.fileList)
|
||||||
|
console.log("info.fileList",info.fileList);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description 文件下载
|
||||||
|
* @param {String} params 文件fileId
|
||||||
|
*/
|
||||||
|
const download = (params) => {
|
||||||
|
let downloadLink = document.createElement("a");
|
||||||
|
// downloadLink.href = `http://192.168.66.7:20010/fileAssociations/downloadFile/${params?.fileId}`;
|
||||||
|
downloadLink.href = `http://223.75.53.141:81/shzh/jcsj/fileAssociations/downloadFile/${params?.fileId}`;
|
||||||
|
downloadLink.download = `${params.fileName}`;
|
||||||
|
downloadLink.style.display = "none";
|
||||||
|
// 将链接添加到页面中
|
||||||
|
document.body.appendChild(downloadLink);
|
||||||
|
|
||||||
|
// 模拟点击事件，开始下载
|
||||||
|
downloadLink.click();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description pdf文件预览
|
||||||
|
* @param {String} params 文件预览url
|
||||||
|
*/
|
||||||
|
const viewPdf = (params) => {
|
||||||
|
setIframeSrc(params.fileId)
|
||||||
|
setPdfViewOPen(true)
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (mode != "save" && files) {
|
||||||
|
setFileList(files.map(file => ({...file,name:file.fileName,response:{data:{name:file.fileName,fileId:file.fileId}}})))
|
||||||
|
setFileIds(files.map(item => item.response?.data?.fileId))
|
||||||
|
}
|
||||||
|
}, [mode,files])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{mode !== "view" &&
|
||||||
|
<Dragger
|
||||||
|
name='file'
|
||||||
|
// multiple
|
||||||
|
action="/shzh/jcsj/fileAssociations/uploadFile"
|
||||||
|
onChange={fileChange}
|
||||||
|
onDrop={(info) => { console.log(info.dataTransfer.files); }}
|
||||||
|
fileList={fileList}
|
||||||
|
disabled={loading}
|
||||||
|
showUploadList={false}
|
||||||
|
// onSuccess={handleSuccess}
|
||||||
|
>
|
||||||
|
<p className="ant-upload-text">点击或拖拽文件到此区域上传</p>
|
||||||
|
<p className="ant-upload-hint">
|
||||||
|
支持扩展名：.rar .zip .doc .docx .pdf .jpg .png .ppt
|
||||||
|
</p>
|
||||||
|
</Dragger>
|
||||||
|
}
|
||||||
|
<Row gutter={[16]}>
|
||||||
|
{
|
||||||
|
loading ? <span>文件正在上传中，请等待</span> :
|
||||||
|
fileList.length > 0 && fileList.map(file => {
|
||||||
|
return (
|
||||||
|
<Col span={12}>
|
||||||
|
<div className={mode == "view" ? 'file-item view-file' : 'file-item'}>
|
||||||
|
<div className='file-description'>
|
||||||
|
{file.name.indexOf('.docx') > -1 ?
|
||||||
|
<div
|
||||||
|
onClick={() => { download(file.response?.data) }}
|
||||||
|
style={{ cursor: 'pointer' }}
|
||||||
|
>
|
||||||
|
<FileWordOutlined
|
||||||
|
style={{ fontSize: 40 }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
:
|
||||||
|
file.name.indexOf('.pdf') > -1 ?
|
||||||
|
<div
|
||||||
|
onClick={() => { download(file.response?.data) }}
|
||||||
|
style={{ cursor: 'pointer' }}
|
||||||
|
>
|
||||||
|
<FilePdfOutlined style={{ fontSize: 40 }} />
|
||||||
|
</div>
|
||||||
|
:
|
||||||
|
file.name.indexOf('.zip') > -1 ?
|
||||||
|
<div
|
||||||
|
onClick={() => { download(file.response?.data) }}
|
||||||
|
style={{ cursor: 'pointer' }}
|
||||||
|
>
|
||||||
|
<FileZipOutlined style={{ fontSize: 40 }} />
|
||||||
|
</div>
|
||||||
|
:
|
||||||
|
file.name.indexOf('.ppt') > -1 ?
|
||||||
|
<div
|
||||||
|
onClick={() => { viewPdf(file.response?.data) }}
|
||||||
|
style={{ cursor: 'pointer' }}
|
||||||
|
>
|
||||||
|
<FilePptOutlined style={{ fontSize: 40 }} />
|
||||||
|
</div> :
|
||||||
|
file.name.indexOf('.xlsx') > -1 ?
|
||||||
|
<div
|
||||||
|
onClick={() => { download(file.response?.data) }}
|
||||||
|
style={{ cursor: 'pointer' }}
|
||||||
|
>
|
||||||
|
<FileExcelOutlined style={{ fontSize: 40 }} />
|
||||||
|
</div>
|
||||||
|
:
|
||||||
|
|
||||||
|
<FileJpgOutlined style={{ fontSize: 40 }} onClick={() => { download(file.response?.data) }} />
|
||||||
|
}
|
||||||
|
<span>{file.name}</span>
|
||||||
|
</div>
|
||||||
|
<div className={mode == "view" ? 'delete-icon disable-icon' : 'delete-icon'} onClick={() => deleteFile(file.response?.data?.fileId)}>
|
||||||
|
<DeleteOutlined />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Col>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</Row>
|
||||||
|
|
||||||
|
<Modal
|
||||||
|
open={pdfViewOPen}
|
||||||
|
width={1000}
|
||||||
|
title=""
|
||||||
|
footer={null}
|
||||||
|
style={{marginTop:"-5%"}}
|
||||||
|
onCancel={() => {
|
||||||
|
setPdfViewOPen(false)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<iframe
|
||||||
|
style={{
|
||||||
|
height: '80vh',
|
||||||
|
width: '100%',
|
||||||
|
border: 0,
|
||||||
|
marginTop: 20,
|
||||||
|
}}
|
||||||
|
src={`${process.env.PUBLIC_URL}/static/pdf/web/viewer.html?file=${encodeURIComponent(`/gunshiApp/tsg/projectEvents/file/download/${iframeSrc}`)}`}
|
||||||
|
/>
|
||||||
|
</Modal>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
.file-item{
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 10px !important;
|
||||||
|
align-items: center;
|
||||||
|
border: 1px solid #dedede;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 1%;
|
||||||
|
.file-description{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
column-gap: 10px;
|
||||||
|
img{
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
// margin-right: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.delete-icon{
|
||||||
|
// margin-left: 1%;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -194,7 +194,7 @@ export async function loadMenu(): Promise<MenuItem[]> {
|
||||||
return [
|
return [
|
||||||
{ id: id(), title: '首页', path: '/mgr/home', icon: 'yzt' },
|
{ id: id(), title: '首页', path: '/mgr/home', icon: 'yzt' },
|
||||||
{
|
{
|
||||||
id: id(), title: '监测数据', path: '/mgr/jcsj/jcsj', icon: 'sz',
|
id: id(), title: '监测数据', redirect: '/mgr/jcsj/jcsj', icon: 'sz',
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
id: id(), title: '监测数据', path: '/mgr/jcsj/jcsj',
|
id: id(), title: '监测数据', path: '/mgr/jcsj/jcsj',
|
||||||
|
|
@ -210,7 +210,7 @@ export async function loadMenu(): Promise<MenuItem[]> {
|
||||||
},
|
},
|
||||||
{ id: id(), title: '安全监测', path: '/mgr/aqjc', icon: 'sz' },
|
{ id: id(), title: '安全监测', path: '/mgr/aqjc', icon: 'sz' },
|
||||||
{
|
{
|
||||||
id: id(), title: '设备维护', path: '/mgr/sbwh/wxyhgl/wxfabz', icon: 'sz',
|
id: id(), title: '设备维护', redirect: '/mgr/sbwh/wxyhgl/wxfabz', icon: 'sz',
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
id: id(), title: '维修养护管理', redirect: '/mgr/sbwh/wxyhgl/wxfabz',
|
id: id(), title: '维修养护管理', redirect: '/mgr/sbwh/wxyhgl/wxfabz',
|
||||||
|
|
@ -224,15 +224,15 @@ export async function loadMenu(): Promise<MenuItem[]> {
|
||||||
id: id(), title: '设备物资管理', redirect: '/mgr/sbwh/sbwzgl/cgtzgl',
|
id: id(), title: '设备物资管理', redirect: '/mgr/sbwh/sbwzgl/cgtzgl',
|
||||||
children: [
|
children: [
|
||||||
{ id: id(), title: '采购台账管理', path: '/mgr/sbwh/sbwzgl/cgtzgl' },
|
{ id: id(), title: '采购台账管理', path: '/mgr/sbwh/sbwzgl/cgtzgl' },
|
||||||
{ id: id(), title: '库存核算管理', path: '/mgr/jcsj/bjgl/kchsgl' },
|
{ id: id(), title: '库存核算管理', path: '/mgr/sbwh/sbwzgl/kchsgl' },
|
||||||
{ id: id(), title: '备品备件管理', path: '/mgr/jcsj/bjgl/bpbjgl' },
|
{ id: id(), title: '备品备件管理', path: '/mgr/sbwh/sbwzgl/bpbjgl' },
|
||||||
{ id: id(), title: '综合分析考核', path: '/mgr/jcsj/bjgl/zhfxkh' },
|
{ id: id(), title: '综合分析考核', path: '/mgr/sbwh/sbwzgl/zhfxkh' },
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: id(), title: '工程运行', path: '/mgr/gcyx/xxcx/jbqk', icon: 'sz',
|
id: id(), title: '工程运行', redirect: '/mgr/gcyx/xxcx/jbqk', icon: 'sz',
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
id: id(), title: '信息查询', redirect: '/mgr/gcyx/xxcx/jbqk',
|
id: id(), title: '信息查询', redirect: '/mgr/gcyx/xxcx/jbqk',
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
import { config } from '../config'
|
|
||||||
|
|
||||||
const service_fxdd = '/gunshiApp/tsg'
|
const service_fxdd = '/gunshiApp/tsg'
|
||||||
const service_xyt = '/gunshiApp/tsg'//登陆先用小玉潭
|
const service_xyt = '/gunshiApp/tsg'//登陆先用小玉潭
|
||||||
|
|
@ -11,7 +11,14 @@ const apiurl = {
|
||||||
router: service_xyt + '/getRouters',
|
router: service_xyt + '/getRouters',
|
||||||
role: service_xyt + '/system/menu/list'
|
role: service_xyt + '/system/menu/list'
|
||||||
},
|
},
|
||||||
|
sbwh: {
|
||||||
|
whfabz: {
|
||||||
|
page: service_fxdd + '/resPerson/page',
|
||||||
|
save: service_fxdd + '/resPerson/save',
|
||||||
|
edit: service_fxdd + '/resPerson/edit',
|
||||||
|
delete:service_fxdd + '/resPerson/delete',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,8 +4,18 @@ import { Navigate, useRoutes } from 'react-router'
|
||||||
import DashboardLayout from '../components/DashboardLayout'
|
import DashboardLayout from '../components/DashboardLayout'
|
||||||
import { Dispatch } from '../models/store'
|
import { Dispatch } from '../models/store'
|
||||||
import LoginPage from './Login/index1'
|
import LoginPage from './Login/index1'
|
||||||
|
import Whfabz from "./Sbwh/Whfabz";
|
||||||
|
import Ssgcjl from "./Sbwh/Ssgcjl";
|
||||||
|
import Whxmys from "./Sbwh/Whxmys";
|
||||||
|
import Cgtzgl from "./Sbwh/Cgtzgl";
|
||||||
|
import Kchsgl from "./Sbwh/Kchsgl";
|
||||||
|
import BasicSituation from "./Gcyx/InformationSearch/BasicSituation";
|
||||||
|
import RunSituation from "./Gcyx/InformationSearch/RunSituation";
|
||||||
|
import StaticTable from "./Gcyx/InformationSearch/StaticTable";
|
||||||
|
import OperateLog from "./Gcyx/InformationSearch/OperateLog";
|
||||||
|
import Jcsj from './WatchData/Jcsj'
|
||||||
|
import PoliceRecord from './WatchData/PoliceMangant/PoliceRecord'
|
||||||
|
import PoliceRuleConfig from './WatchData/PoliceMangant/PoliceRuleConfig'
|
||||||
|
|
||||||
|
|
||||||
const HomePage = lazy(() => import('./Home'))
|
const HomePage = lazy(() => import('./Home'))
|
||||||
|
|
@ -28,9 +38,22 @@ const AppRouters: React.FC = () => {
|
||||||
element: <DashboardLayout />,
|
element: <DashboardLayout />,
|
||||||
children: [
|
children: [
|
||||||
{ path: 'home', element: <HomePage /> },
|
{ path: 'home', element: <HomePage /> },
|
||||||
|
// 监测数据
|
||||||
|
{ path: 'jcsj/jcsj', element: <Jcsj /> },
|
||||||
|
{ path: 'jcsj/bjgl/bjjl', element: <PoliceRecord /> },
|
||||||
|
{ path: 'jcsj/bjgl/bjgzpz', element: <PoliceRuleConfig /> },
|
||||||
|
|
||||||
|
// 设备维护
|
||||||
|
{ path: 'sbwh/wxyhgl/wxfabz', element: <Whfabz /> },
|
||||||
|
{ path: 'sbwh/wxyhgl/ssgcjl', element: <Ssgcjl /> },
|
||||||
|
{ path: 'sbwh/wxyhgl/whxmys', element: <Whxmys /> },
|
||||||
|
{ path: 'sbwh/sbwzgl/cgtzgl', element: <Cgtzgl /> },
|
||||||
|
{ path: 'sbwh/sbwzgl/kchsgl', element: <Kchsgl /> },
|
||||||
|
// 工程运行
|
||||||
|
{ path: 'gcyx/xxcx/jbqk', element: <BasicSituation /> },
|
||||||
|
{ path: 'gcyx/xxcx/yxqk', element: <RunSituation /> },
|
||||||
|
{ path: 'gcyx/xxcx/tjbb', element: <StaticTable /> },
|
||||||
|
{ path: 'gcyx/xxcx/czrz', element: <OperateLog /> },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{ path: '/login', element: <LoginPage /> },
|
{ path: '/login', element: <LoginPage /> },
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,445 @@
|
||||||
|
import React,{useState,useEffect} from 'react'
|
||||||
|
import { Row, Col, Form, Input, DatePicker, Button, Upload, message, Modal, Divider } from "antd"
|
||||||
|
import { formItemLayout } from '../../../../components/crud/FormLayoutProps'
|
||||||
|
import moment from 'moment';
|
||||||
|
import './index.less'
|
||||||
|
export default function BasicSituation() {
|
||||||
|
const [form] = Form.useForm();
|
||||||
|
const [skdisabled, setSkDisabled] = useState(true)
|
||||||
|
return (
|
||||||
|
|
||||||
|
<div className='content-root clearFloat xybm xxcx' style={{paddingBottom:"0"}}>
|
||||||
|
<div className='lf CrudAdcdTreeTableBox' style={{ width: "100%", overflowY: "auto" }}>
|
||||||
|
<Form
|
||||||
|
form={form}
|
||||||
|
{...formItemLayout}
|
||||||
|
// onFinish={onFinish}
|
||||||
|
>
|
||||||
|
<Row >
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item>
|
||||||
|
<div style={{ display: 'flex', columnGap: 20,marginBottom:20 }}>
|
||||||
|
{
|
||||||
|
skdisabled ? <Button type="primary" onClick={() => setSkDisabled(false)}>编辑</Button> :
|
||||||
|
<div style={{ display: 'flex', columnGap: 20 }}>
|
||||||
|
<Button onClick={() => setSkDisabled(true)}>取消</Button>
|
||||||
|
<Button type="primary" onClick={() => { }}>保存</Button>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
<Button onClick={() => { }} >导出</Button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<div style={{width:'100%',padding:'15px 10px',background:"#e0edff",fontSize:16,color:'#02a7f0',fontWeight:700}}>水文</div>
|
||||||
|
<Row style={{background:"#f0f8fe",padding:10}}>
|
||||||
|
<Col span={8}>
|
||||||
|
<Form.Item
|
||||||
|
label="全流域面积(km²)"
|
||||||
|
name="resName"
|
||||||
|
style={{marginBottom:0}}
|
||||||
|
labelCol={{
|
||||||
|
style: { marginLeft:"6%"}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={8}>
|
||||||
|
<Form.Item
|
||||||
|
label="利用水文系列年限(年)"
|
||||||
|
name="resCode"
|
||||||
|
labelCol={{
|
||||||
|
style: { marginLeft:"13%"}
|
||||||
|
}}
|
||||||
|
style={{marginBottom:0}}
|
||||||
|
>
|
||||||
|
<Input allowClear style={{width:'300px'}} disabled={skdisabled}/>
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={8}>
|
||||||
|
<Form.Item
|
||||||
|
label="多年平均年径流量(m³)"
|
||||||
|
name="regSn"
|
||||||
|
style={{marginBottom:0}}
|
||||||
|
labelCol={{
|
||||||
|
style: { marginLeft:"8%"}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Input allowClear style={{width:'300px'}} disabled={skdisabled}/>
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row style={{background:"#f0f8fe",padding:'10px'}}>
|
||||||
|
<Col span={8}>
|
||||||
|
<Form.Item
|
||||||
|
label="多年平均流量(m³/s)"
|
||||||
|
name="regTime"
|
||||||
|
style={{marginBottom:0}}
|
||||||
|
labelCol={{
|
||||||
|
style: { marginLeft:"2.5%"}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Input allowClear style={{width:'300px'}} disabled={skdisabled}/>
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={8}>
|
||||||
|
<Form.Item
|
||||||
|
label="设计洪水标准P%相应流量(m³/s)"
|
||||||
|
name="resLoc"
|
||||||
|
labelCol={{
|
||||||
|
style: { marginLeft:"0%"}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Input allowClear style={{width:'300px'}} disabled={skdisabled}/>
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<div style={{width:'100%',padding:'15px 10px',background:"#e0edff",fontSize:16,color:'#02a7f0',fontWeight:700}}>工程规模</div>
|
||||||
|
<Row style={{background:"#f0f8fe",padding:10}}>
|
||||||
|
<Col span={8}>
|
||||||
|
<Form.Item
|
||||||
|
label="设计灌溉面积(万亩)"
|
||||||
|
name="resName"
|
||||||
|
style={{marginBottom:0}}
|
||||||
|
labelCol={{
|
||||||
|
style: { marginLeft:"2.5%"}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={8}>
|
||||||
|
<Form.Item
|
||||||
|
label="灌溉保证率(%)"
|
||||||
|
name="resCode"
|
||||||
|
labelCol={{
|
||||||
|
style: { marginLeft:"21%"}
|
||||||
|
}}
|
||||||
|
style={{marginBottom:0}}
|
||||||
|
>
|
||||||
|
<Input allowClear style={{width:'300px'}} disabled={skdisabled}/>
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={8}>
|
||||||
|
<Form.Item
|
||||||
|
label="设计引水流量(m³/s)"
|
||||||
|
name="regSn"
|
||||||
|
style={{marginBottom:0}}
|
||||||
|
labelCol={{
|
||||||
|
style: { marginLeft:"11%"}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Input allowClear style={{width:'300px'}} disabled={skdisabled}/>
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row style={{background:"#f0f8fe",padding:'10px'}}>
|
||||||
|
<Col span={8}>
|
||||||
|
<Form.Item
|
||||||
|
label="外江设计洪水位(m)"
|
||||||
|
name="resName"
|
||||||
|
style={{marginBottom:0}}
|
||||||
|
labelCol={{
|
||||||
|
style: { marginLeft:"2.5%"}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={8}>
|
||||||
|
<Form.Item
|
||||||
|
label="外江最高运行水位(m)"
|
||||||
|
name="resCode"
|
||||||
|
labelCol={{
|
||||||
|
style: { marginLeft:"13%"}
|
||||||
|
}}
|
||||||
|
style={{marginBottom:0}}
|
||||||
|
>
|
||||||
|
<Input allowClear style={{width:'300px'}} disabled={skdisabled}/>
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={8}>
|
||||||
|
<Form.Item
|
||||||
|
label="灌溉设计水位(m)"
|
||||||
|
name="regSn"
|
||||||
|
labelCol={{
|
||||||
|
style: { marginLeft:"14%"}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Input allowClear style={{width:'300px'}} disabled={skdisabled}/>
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<div style={{width:'100%',padding:'15px 10px',background:"#e0edff",fontSize:16,color:'#02a7f0',fontWeight:700}}>建设征地与移民安置</div>
|
||||||
|
<Row style={{background:"#f0f8fe",padding:10}}>
|
||||||
|
<Col span={8}>
|
||||||
|
<Form.Item
|
||||||
|
label="永久征地面积(亩)"
|
||||||
|
name="resName"
|
||||||
|
style={{marginBottom:0}}
|
||||||
|
labelCol={{
|
||||||
|
style: { marginLeft:"5.5%"}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={8}>
|
||||||
|
<Form.Item
|
||||||
|
label="临时用地(亩)"
|
||||||
|
name="resCode"
|
||||||
|
labelCol={{
|
||||||
|
style: { marginLeft:"24%"}
|
||||||
|
}}
|
||||||
|
style={{marginBottom:0}}
|
||||||
|
>
|
||||||
|
<Input allowClear style={{width:'300px'}} disabled={skdisabled}/>
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={8}>
|
||||||
|
<Form.Item
|
||||||
|
label="搬迁安置人口(人)"
|
||||||
|
name="regSn"
|
||||||
|
style={{marginBottom:0}}
|
||||||
|
labelCol={{
|
||||||
|
style: { marginLeft:"15%"}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Input allowClear style={{width:'300px'}} disabled={skdisabled}/>
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<div style={{width:'100%',padding:'15px 10px',background:"#e0edff",fontSize:16,color:'#02a7f0',fontWeight:700}}>主要建筑物及设备</div>
|
||||||
|
<Row style={{background:"#f0f8fe",padding:10}}>
|
||||||
|
<Col span={8}>
|
||||||
|
<Form.Item
|
||||||
|
label="水闸形式"
|
||||||
|
name="resName"
|
||||||
|
style={{marginBottom:0}}
|
||||||
|
labelCol={{
|
||||||
|
style: { marginLeft:"15.5%"}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={16}>
|
||||||
|
<Form.Item
|
||||||
|
label="水闸地基特性"
|
||||||
|
name="resCode"
|
||||||
|
labelCol={{
|
||||||
|
style: { marginLeft:"11%"}
|
||||||
|
}}
|
||||||
|
style={{marginBottom:0}}
|
||||||
|
>
|
||||||
|
<Input allowClear style={{width:'133%'}} disabled={skdisabled}/>
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row style={{background:"#f0f8fe",padding:'10px 10px 0 10px'}}>
|
||||||
|
<Col span={8}>
|
||||||
|
<Form.Item
|
||||||
|
label="水闸地震动参数(g)"
|
||||||
|
name="resName"
|
||||||
|
style={{marginBottom:0}}
|
||||||
|
labelCol={{
|
||||||
|
style: { marginLeft:"3.5%"}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={8}>
|
||||||
|
<Form.Item
|
||||||
|
label="水闸地震基本烈度(度)"
|
||||||
|
name="resCode"
|
||||||
|
labelCol={{
|
||||||
|
style: { marginLeft:"11.5%"}
|
||||||
|
}}
|
||||||
|
style={{marginBottom:0}}
|
||||||
|
>
|
||||||
|
<Input allowClear style={{width:'300px'}} disabled={skdisabled}/>
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={8}>
|
||||||
|
<Form.Item
|
||||||
|
label="水闸地震设计烈度(度)"
|
||||||
|
name="regSn"
|
||||||
|
labelCol={{
|
||||||
|
style: { marginLeft:"10%"}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Input allowClear style={{width:'300px'}} disabled={skdisabled}/>
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row style={{background:"#f0f8fe",padding:'0 10px'}}>
|
||||||
|
<Col span={8}>
|
||||||
|
<Form.Item
|
||||||
|
label="水闸闸顶高程(m)"
|
||||||
|
name="resName"
|
||||||
|
style={{marginBottom:0}}
|
||||||
|
labelCol={{
|
||||||
|
style: { marginLeft:"5.5%"}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={8}>
|
||||||
|
<Form.Item
|
||||||
|
label="水闸底槛高程(m)"
|
||||||
|
name="resCode"
|
||||||
|
labelCol={{
|
||||||
|
style: { marginLeft:"17%"}
|
||||||
|
}}
|
||||||
|
style={{marginBottom:0}}
|
||||||
|
>
|
||||||
|
<Input allowClear style={{width:'300px'}} disabled={skdisabled}/>
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={8}>
|
||||||
|
<Form.Item
|
||||||
|
label="水闸闸孔尺寸(m)"
|
||||||
|
name="regSn"
|
||||||
|
labelCol={{
|
||||||
|
style: { marginLeft:"16%"}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Input allowClear style={{width:'300px'}} disabled={skdisabled}/>
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row style={{background:"#f0f8fe",padding:'0 10px'}}>
|
||||||
|
<Col span={8}>
|
||||||
|
<Form.Item
|
||||||
|
label="水闸工作闸门数量(个)"
|
||||||
|
name="resName"
|
||||||
|
style={{marginBottom:0}}
|
||||||
|
labelCol={{
|
||||||
|
style: { marginLeft:"0%"}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={8}>
|
||||||
|
<Form.Item
|
||||||
|
label="水闸事故闸门数量(个)"
|
||||||
|
name="resCode"
|
||||||
|
labelCol={{
|
||||||
|
style: { marginLeft:"11%"}
|
||||||
|
}}
|
||||||
|
style={{marginBottom:0}}
|
||||||
|
>
|
||||||
|
<Input allowClear style={{width:'300px'}} disabled={skdisabled}/>
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={8}>
|
||||||
|
<Form.Item
|
||||||
|
label="水闸闸室长度(m)"
|
||||||
|
name="regSn"
|
||||||
|
labelCol={{
|
||||||
|
style: { marginLeft:"16%"}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Input allowClear style={{width:'300px'}} disabled={skdisabled}/>
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row style={{background:"#f0f8fe",padding:'0 10px'}}>
|
||||||
|
<Col span={8}>
|
||||||
|
<Form.Item
|
||||||
|
label="荆江大堤堤防级别(级)"
|
||||||
|
name="resName"
|
||||||
|
style={{marginBottom:0}}
|
||||||
|
labelCol={{
|
||||||
|
style: { marginLeft:"0%"}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={8}>
|
||||||
|
<Form.Item
|
||||||
|
label="荆江大堤堤顶宽度(m)"
|
||||||
|
name="resCode"
|
||||||
|
labelCol={{
|
||||||
|
style: { marginLeft:"11%"}
|
||||||
|
}}
|
||||||
|
style={{marginBottom:0}}
|
||||||
|
>
|
||||||
|
<Input allowClear style={{width:'300px'}} disabled={skdisabled}/>
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={8}>
|
||||||
|
<Form.Item
|
||||||
|
label="穿堤箱涵长度(m)"
|
||||||
|
name="regSn"
|
||||||
|
labelCol={{
|
||||||
|
style: { marginLeft:"16%"}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Input allowClear style={{width:'300px'}} disabled={skdisabled}/>
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row style={{background:"#f0f8fe",padding:'0 10px'}}>
|
||||||
|
<Col span={8}>
|
||||||
|
<Form.Item
|
||||||
|
label="箱涵尺寸"
|
||||||
|
name="resName"
|
||||||
|
style={{marginBottom:0}}
|
||||||
|
labelCol={{
|
||||||
|
style: { marginLeft:"15%"}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={8}>
|
||||||
|
<Form.Item
|
||||||
|
label="消能方式"
|
||||||
|
name="resCode"
|
||||||
|
labelCol={{
|
||||||
|
style: { marginLeft:"26%"}
|
||||||
|
}}
|
||||||
|
style={{marginBottom:0}}
|
||||||
|
>
|
||||||
|
<Input allowClear style={{width:'300px'}} disabled={skdisabled}/>
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={8}>
|
||||||
|
<Form.Item
|
||||||
|
label="消力池长度(m)"
|
||||||
|
name="regSn"
|
||||||
|
labelCol={{
|
||||||
|
style: { marginLeft:"19%"}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Input allowClear style={{width:'300px'}} disabled={skdisabled}/>
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row style={{background:"#f0f8fe",padding:'0 10px'}}>
|
||||||
|
<Col span={8}>
|
||||||
|
<Form.Item
|
||||||
|
label="出口海漫长度(m)"
|
||||||
|
name="resName"
|
||||||
|
style={{marginBottom:0}}
|
||||||
|
labelCol={{
|
||||||
|
style: { marginLeft:"5%"}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</Form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
.xxcx{
|
||||||
|
.ant-form-item-label > label{
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
// .ant-form-item{
|
||||||
|
// margin-bottom: 0;
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,73 @@
|
||||||
|
import React, { Fragment, useRef, useMemo,useEffect,useState } from 'react';
|
||||||
|
import { Table, Card, Modal, Form, Input, Button, Row,Col, Timeline, message, Tabs,Image } from 'antd';
|
||||||
|
import ToolBar from './toolbar';
|
||||||
|
import apiurl from '../../../../service/apiurl';
|
||||||
|
import usePageTable from '../../../../components/crud/usePageTable2';
|
||||||
|
import { createCrudService } from '../../../../components/crud/_';
|
||||||
|
import { httppost5 } from '../../../../utils/request';
|
||||||
|
import { exportFile } from '../../../../utils/tools.js';
|
||||||
|
const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
|
||||||
|
const Page = () => {
|
||||||
|
const types = {
|
||||||
|
0: "设备维修",
|
||||||
|
1: '设备更换',
|
||||||
|
2:"结构加固"
|
||||||
|
}
|
||||||
|
const [searchVal, setSearchVal] = useState(false)
|
||||||
|
const columns = [
|
||||||
|
{ title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align:"center" },
|
||||||
|
{ title: '闸孔编号', key: 'name', dataIndex: 'name', width: 150, ellipsis: true },
|
||||||
|
{ title: '操作人员', key: 'adress', dataIndex: 'adress', width: 200, ellipsis: true },
|
||||||
|
{
|
||||||
|
title: '操作时间', key: 'eventsDate', dataIndex: 'eventsDate', width: 140,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作内容', key: 'eventsDate', dataIndex: 'eventsDate', width: 140,
|
||||||
|
},
|
||||||
|
{ title: '设定开度(m)', key: 'type', dataIndex: 'type', width: 140},
|
||||||
|
{ title: '操作前开度(m)', key: 'type', dataIndex: 'type', width: 140},
|
||||||
|
{ title: 'ip', key: 'type', dataIndex: 'type', 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.pxjh.export, params).then(res => {
|
||||||
|
exportFile(`统计报表.xlsx`,res.data)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
useEffect(() => {
|
||||||
|
const params = {
|
||||||
|
search: {
|
||||||
|
...searchVal,
|
||||||
|
}
|
||||||
|
};
|
||||||
|
search(params)
|
||||||
|
}, [searchVal])
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className='content-root clearFloat xybm' style={{paddingRight:"0",paddingBottom:"0"}}>
|
||||||
|
<div className='lf CrudAdcdTreeTableBox' style={{width:"100%",overflowY:"auto"}}>
|
||||||
|
<Card className='nonebox'>
|
||||||
|
<ToolBar
|
||||||
|
setSearchVal={setSearchVal}
|
||||||
|
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 )"}}/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Page;
|
||||||
|
|
@ -0,0 +1,63 @@
|
||||||
|
import React, { useEffect,useState } from 'react';
|
||||||
|
import { Form, Input, Button, DatePicker } from 'antd';
|
||||||
|
import NormalSelect from '../../../../components/Form/NormalSelect';
|
||||||
|
|
||||||
|
import moment from 'moment';
|
||||||
|
const { RangePicker } = DatePicker;
|
||||||
|
const ToolBar = ({ setSearchVal, onSave, storeData, exportFile1 }) => {
|
||||||
|
|
||||||
|
const types = Array(10).fill(0).map((item,i) => ({
|
||||||
|
label: `${i + 1}#闸孔`,
|
||||||
|
value: i + 1
|
||||||
|
}))
|
||||||
|
|
||||||
|
const [form] = Form.useForm();
|
||||||
|
|
||||||
|
const onFinish = (values) => {
|
||||||
|
let dateSo;
|
||||||
|
if (values.tm) {
|
||||||
|
dateSo = {
|
||||||
|
start: moment(values.tm[0]).format('YYYY-MM-DD HH:mm:ss'),
|
||||||
|
end: moment(values.tm[1]).format('YYYY-MM-DD HH:mm:ss')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
delete values.tm
|
||||||
|
setSearchVal({...values, dateSo});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div style={{display:'flex',justifyContent:'space-between'}}>
|
||||||
|
<Form form={form} className='toolbarBox' layout="inline" onFinish={onFinish}>
|
||||||
|
<Form.Item label="闸孔编号" name="type">
|
||||||
|
<NormalSelect allowClear style={{ width: '150px' }} options={types} />
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item label="操作人员" name="name">
|
||||||
|
<Input allowClear style={{width:'150px'}}/>
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item label="操作时间" name="tm">
|
||||||
|
<RangePicker
|
||||||
|
allowClear
|
||||||
|
showTime
|
||||||
|
style={{ width: "300px" }}
|
||||||
|
format="YYYY-MM-DD HH:mm:ss"
|
||||||
|
/>
|
||||||
|
</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>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ToolBar;
|
||||||
|
|
@ -0,0 +1,65 @@
|
||||||
|
import React, { useMemo,useEffect,useState } from 'react';
|
||||||
|
import { Table } from 'antd';
|
||||||
|
import apiurl from '../../../../service/apiurl';
|
||||||
|
import usePageTable from '../../../../components/crud/usePageTable2';
|
||||||
|
import { createCrudService } from '../../../../components/crud/_';
|
||||||
|
import clsx from 'clsx'
|
||||||
|
import './index.less'
|
||||||
|
const Page = () => {
|
||||||
|
const types = {
|
||||||
|
0: "防汛物资",
|
||||||
|
1: '食品和饮水',
|
||||||
|
2: "防护用具",
|
||||||
|
3: "照明设备",
|
||||||
|
4: "金属材料类",
|
||||||
|
5:"其它",
|
||||||
|
}
|
||||||
|
const [searchVal, setSearchVal] = useState({})
|
||||||
|
const columns = [
|
||||||
|
{ title: '闸孔编号', key: 'inx', dataIndex: 'inx', width: 80},
|
||||||
|
{
|
||||||
|
title: '闸门电源状态', key: 'name', dataIndex: 'name', width: 150,
|
||||||
|
render: (v) => <div style={{display:'flex',alignItems:'center',columnGap:10}}>
|
||||||
|
<span className={clsx({noOpen_style:true,open_style:true})}></span>
|
||||||
|
<span>正常</span>
|
||||||
|
</div>
|
||||||
|
},
|
||||||
|
{ title: '闸门上升中', key: 'adress', dataIndex: 'adress', width: 150},
|
||||||
|
{ title: '闸门下降中', key: 'type', dataIndex: 'type', width: 150},
|
||||||
|
{ title: '闸门故障状态', key: 'type', dataIndex: 'type', width: 150},
|
||||||
|
{ title: '上限位', key: 'type', dataIndex: 'type', width: 140},
|
||||||
|
{ title: '下限位', key: 'type', dataIndex: 'type', width: 140},
|
||||||
|
{ title: '实时开度(m)', key: 'type', dataIndex: 'type', width: 140},
|
||||||
|
{
|
||||||
|
title: '监测时间', key: 'eventsDate', dataIndex: 'eventsDate', width: 150,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
|
||||||
|
const width = useMemo(() => columns.reduce((total, cur) => total + (cur.width), 0), [columns]);
|
||||||
|
|
||||||
|
const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.sbwh.whfabz.page).find_noCode);
|
||||||
|
useEffect(()=>{
|
||||||
|
const params = {
|
||||||
|
search: {
|
||||||
|
...searchVal,
|
||||||
|
}
|
||||||
|
};
|
||||||
|
search(params)
|
||||||
|
}, [searchVal])
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className='content-root clearFloat xybm' style={{paddingBottom:"0"}}>
|
||||||
|
<div className='lf CrudAdcdTreeTableBox' style={{width:"100%",overflowY:"auto"}}>
|
||||||
|
<div className="ant-card-body" style={{ padding: "20px 0 0 0" }}>
|
||||||
|
<Table columns={columns} rowKey="inx" {...tableProps} scroll={{ x: width , y: "calc( 100vh - 400px )"}}/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Page;
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
.noOpen_style{
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 1px solid #000;
|
||||||
|
}
|
||||||
|
.open_style{
|
||||||
|
background-color: #95f204;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,110 @@
|
||||||
|
import React, { Fragment, useRef, useMemo,useEffect,useState } from 'react';
|
||||||
|
import { Table, Card, Modal, Form, Input, Button, Row,Col, Timeline, message, Tabs,Image } from 'antd';
|
||||||
|
import ToolBar from './toolbar';
|
||||||
|
import apiurl from '../../../../service/apiurl';
|
||||||
|
import usePageTable from '../../../../components/crud/usePageTable2';
|
||||||
|
import { createCrudService } from '../../../../components/crud/_';
|
||||||
|
import { httppost5 } from '../../../../utils/request';
|
||||||
|
import { exportFile } from '../../../../utils/tools.js';
|
||||||
|
|
||||||
|
const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
|
||||||
|
const Page = () => {
|
||||||
|
|
||||||
|
const [searchVal, setSearchVal] = useState(false)
|
||||||
|
const timeColumns = [
|
||||||
|
{ title: '日期', key: 'date', dataIndex: 'date', width: 120, align: "center", fixed: "left" },
|
||||||
|
...Array(16).fill(0).map((item,index) => ({
|
||||||
|
title: `${index+9}时`,
|
||||||
|
key: `drpH${index+9}`,
|
||||||
|
dataIndex: `drpH${index+9}`,
|
||||||
|
width: 80,
|
||||||
|
align: "center",
|
||||||
|
sorter: (a, b) => a[`drpH${index+9}`] - b[`drpH${index+9}`]
|
||||||
|
})),
|
||||||
|
...Array(8).fill(0).map((item,index) => ({
|
||||||
|
title: `${index+1}时`,
|
||||||
|
key: `drpH${index+1}`,
|
||||||
|
dataIndex: `drpH${index+1}`,
|
||||||
|
width: 80,
|
||||||
|
align: "center",
|
||||||
|
sorter: (a, b) => a[`drpH${index+1}`] - b[`drpH${index+1}`]
|
||||||
|
})),
|
||||||
|
{ title: '日累计', key: 'drpD', dataIndex: 'drpD', width: 100, align: "center",sorter: (a, b) => a.drpD - b.drpD, },
|
||||||
|
|
||||||
|
];
|
||||||
|
|
||||||
|
const dayColumns = [
|
||||||
|
{ title: '日期', key: 'date', dataIndex: 'date', width: 120, align: "center", fixed: "left" },
|
||||||
|
...Array(30).fill(0).map((item,index) => ({
|
||||||
|
title: `${index+1}天`,
|
||||||
|
key: `drpM${index+1}`,
|
||||||
|
dataIndex: `drpM${index+1}`,
|
||||||
|
width: 100,
|
||||||
|
align: "center",
|
||||||
|
}))
|
||||||
|
];
|
||||||
|
const yearColumns = [
|
||||||
|
{ title: '日期', key: 'date', dataIndex: 'date', width: 120, align: "center", fixed: "left" },
|
||||||
|
...Array(12).fill(0).map((item,index) => ({
|
||||||
|
title: `${index+1}月`,
|
||||||
|
key: `drpM${index+1}`,
|
||||||
|
dataIndex: `drpM${index+1}`,
|
||||||
|
width: 100,
|
||||||
|
align: "center",
|
||||||
|
}))
|
||||||
|
];
|
||||||
|
|
||||||
|
const width = useMemo(() => {
|
||||||
|
let columns = searchVal.type1 == 0 ? timeColumns : searchVal.type1 == 1 ? dayColumns : yearColumns;
|
||||||
|
return columns.reduce((total, cur) => total + (cur.width), 0)
|
||||||
|
}, [searchVal.type1]);
|
||||||
|
const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.sbwh.whfabz.page).find_noCode);
|
||||||
|
// 导出
|
||||||
|
const exportExcel = () => {
|
||||||
|
let params = {
|
||||||
|
...searchVal,
|
||||||
|
}
|
||||||
|
httppost5(apiurl.pxjh.export, params).then(res => {
|
||||||
|
exportFile(`统计报表.xlsx`,res.data)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
useEffect(()=>{
|
||||||
|
const params = {
|
||||||
|
search: {
|
||||||
|
...searchVal,
|
||||||
|
}
|
||||||
|
};
|
||||||
|
search(params)
|
||||||
|
}, [searchVal])
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className='content-root clearFloat xybm' style={{paddingRight:"0",paddingBottom:"0"}}>
|
||||||
|
<div className='lf CrudAdcdTreeTableBox' style={{width:"100%",overflowY:"auto"}}>
|
||||||
|
<Card className='nonebox'>
|
||||||
|
<ToolBar
|
||||||
|
setSearchVal={setSearchVal}
|
||||||
|
exportFile1={exportExcel}
|
||||||
|
/>
|
||||||
|
</Card>
|
||||||
|
<div className="ant-card-body" style={{ padding: "20px 0 0 0" }}>
|
||||||
|
<Table
|
||||||
|
title={() => (
|
||||||
|
<>
|
||||||
|
<h2 style={{ textAlign: "center" }}>{searchVal?.year}闸后流量报表</h2>
|
||||||
|
<div style={{ textAlign: "right" }}>单位：m³/s</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
columns={searchVal.type1 == 0 ? timeColumns : searchVal.type1 == 1 ? dayColumns :yearColumns}
|
||||||
|
rowKey="inx"
|
||||||
|
{...tableProps}
|
||||||
|
scroll={{ x: width, y: "calc( 100vh - 400px )" }} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Page;
|
||||||
|
|
@ -0,0 +1,119 @@
|
||||||
|
import React, { useEffect,useState } from 'react';
|
||||||
|
import { Form, Input, Button, DatePicker } from 'antd';
|
||||||
|
import NormalSelect from '../../../../components/Form/NormalSelect';
|
||||||
|
|
||||||
|
import moment from 'moment';
|
||||||
|
const { RangePicker } = DatePicker;
|
||||||
|
const ToolBar = ({ setSearchVal, onSave, storeData, exportFile1 }) => {
|
||||||
|
|
||||||
|
const types = [
|
||||||
|
{
|
||||||
|
label: "闸后流量",
|
||||||
|
value: 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "雨量",
|
||||||
|
value: 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "闸前水位",
|
||||||
|
value: 2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "闸后水位",
|
||||||
|
value: 3
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const types1 = [
|
||||||
|
{
|
||||||
|
label: "日报表",
|
||||||
|
value: 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "月报表",
|
||||||
|
value: 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "年报表",
|
||||||
|
value: 2
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
const [timeType, setTimeType] = useState(0)
|
||||||
|
const [form] = Form.useForm();
|
||||||
|
|
||||||
|
const onFinish = (values) => {
|
||||||
|
let dateSo;
|
||||||
|
if (values.tm) {
|
||||||
|
dateSo = {
|
||||||
|
start: moment(values.tm[0]).format('YYYY-MM-DD HH:mm:ss'),
|
||||||
|
end: moment(values.tm[1]).format('YYYY-MM-DD HH:mm:ss')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
delete values.tm
|
||||||
|
setSearchVal({...values, dateSo});
|
||||||
|
}
|
||||||
|
|
||||||
|
const onValuesChange = (val) => {
|
||||||
|
if ('type1' in val) {
|
||||||
|
setTimeType(val.type1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
useEffect(() => {
|
||||||
|
form.setFieldValue('type1', 0)
|
||||||
|
setSearchVal({type1:0})
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div style={{display:'flex',justifyContent:'space-between'}}>
|
||||||
|
<Form
|
||||||
|
form={form}
|
||||||
|
className='toolbarBox'
|
||||||
|
layout="inline"
|
||||||
|
onFinish={onFinish}
|
||||||
|
onValuesChange={onValuesChange}
|
||||||
|
>
|
||||||
|
<Form.Item label="统计项目" name="name">
|
||||||
|
<NormalSelect allowClear style={{ width: '150px' }} options={types} />
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item label="统计维度" name="type1">
|
||||||
|
<NormalSelect allowClear style={{ width: '150px' }} options={types1} />
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item label="统计时间" name="tm">
|
||||||
|
{timeType == 0 ?
|
||||||
|
<RangePicker
|
||||||
|
allowClear
|
||||||
|
style={{ width: "300px" }}
|
||||||
|
format="YYYY-MM-DD"
|
||||||
|
/>: timeType == 1 ?
|
||||||
|
<DatePicker
|
||||||
|
allowClear
|
||||||
|
style={{ width: "150px" }}
|
||||||
|
picker="month"/> :
|
||||||
|
<DatePicker
|
||||||
|
allowClear
|
||||||
|
style={{ width: "150px" }}
|
||||||
|
picker="year"/>
|
||||||
|
}
|
||||||
|
</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>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ToolBar;
|
||||||
|
|
@ -0,0 +1,178 @@
|
||||||
|
import React,{useEffect,useState,useMemo,useRef} from 'react';
|
||||||
|
import { Form, Button, Input, Row,Upload, Col, Table, DatePicker, InputNumber,message,Image,Modal,Typography ,Popconfirm } from 'antd';
|
||||||
|
import { DeleteOutlined,FileWordOutlined,FilePdfOutlined,FileZipOutlined,FileExcelOutlined } from '@ant-design/icons';
|
||||||
|
import { formItemLayout, btnItemLayout } from '../../../components/crud/FormLayoutProps';
|
||||||
|
|
||||||
|
import apiurl from '../../../service/apiurl';
|
||||||
|
import FileUpload from '../../../components/fileUpload';
|
||||||
|
import NormalSelect from '../../../components/Form/NormalSelect';
|
||||||
|
|
||||||
|
import "./index.less"
|
||||||
|
import moment from 'moment';
|
||||||
|
const { RangePicker } = DatePicker
|
||||||
|
const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
|
||||||
|
|
||||||
|
const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
||||||
|
const types = [
|
||||||
|
{
|
||||||
|
label: "设备维修",
|
||||||
|
value: 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "设备更换",
|
||||||
|
value: 1
|
||||||
|
},{
|
||||||
|
label: "结构加固",
|
||||||
|
value: 2
|
||||||
|
},
|
||||||
|
]
|
||||||
|
const [form] = Form.useForm();
|
||||||
|
const [fileIds, setFileIds] = useState()
|
||||||
|
const onfinish = (values) => {
|
||||||
|
values.eventsDate = values.eventsDate?moment(values.eventsDate).format("YYYY-MM-DD 00:00:00"):''
|
||||||
|
if (mode === 'edit') {
|
||||||
|
values.files = fileIds;
|
||||||
|
values.id = record.id;
|
||||||
|
onEdit(apiurl.rcgl.gcdsj.edit,values)
|
||||||
|
}
|
||||||
|
if (mode === 'save') {
|
||||||
|
values.files = fileIds
|
||||||
|
onSave(apiurl.rcgl.gcdsj.save,values)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Form
|
||||||
|
form={form}
|
||||||
|
{...formItemLayout}
|
||||||
|
onFinish={onfinish}
|
||||||
|
initialValues={record}
|
||||||
|
>
|
||||||
|
<Row>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
label="项目名称"
|
||||||
|
name="name"
|
||||||
|
rules={[{ required: true }]}
|
||||||
|
>
|
||||||
|
<Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
label="方案名称"
|
||||||
|
name="name"
|
||||||
|
rules={[{ required: true }]}
|
||||||
|
>
|
||||||
|
<Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
|
||||||
|
</Row>
|
||||||
|
<Row>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
label="项目地点"
|
||||||
|
name="adress"
|
||||||
|
>
|
||||||
|
<Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
label="项目负责人"
|
||||||
|
name="name"
|
||||||
|
>
|
||||||
|
<Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
label="维护类型"
|
||||||
|
name="type"
|
||||||
|
rules={[{ required: true }]}
|
||||||
|
>
|
||||||
|
<NormalSelect
|
||||||
|
allowClear
|
||||||
|
disabled={mode==='view'}
|
||||||
|
style={{ width: "100%" }}
|
||||||
|
options={types}
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
label="计划维护时间"
|
||||||
|
name="eventsDate"
|
||||||
|
getValueFromEvent={(e,dateString) => dateString}
|
||||||
|
getValueProps={(value) => {
|
||||||
|
return {
|
||||||
|
value: value ? [value[0]&&moment(value[0]),value[1]&&moment(value[1])] : undefined
|
||||||
|
};
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<RangePicker disabled={mode==='view'} format={'YYYY-MM-DD'} style={{width:'100%'}} allowClear />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
|
||||||
|
<Row>
|
||||||
|
<Col span={24}>
|
||||||
|
<Form.Item
|
||||||
|
label="维护内容"
|
||||||
|
name="eventsDesc"
|
||||||
|
labelCol={{ span: 3 }}
|
||||||
|
wrapperCol={{ span: 19 }}
|
||||||
|
>
|
||||||
|
<Input.TextArea disabled={mode==='view'} style={{width:'100%',minHeight:'100px'}} allowClear />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
label="费用预估（元）"
|
||||||
|
name="eventsDesc"
|
||||||
|
>
|
||||||
|
<Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
|
||||||
|
<Row>
|
||||||
|
<Col span={24}>
|
||||||
|
<Form.Item
|
||||||
|
label="附件"
|
||||||
|
name="fieldId"
|
||||||
|
labelCol={{ span: 3 }}
|
||||||
|
wrapperCol={{ span: 19 }}
|
||||||
|
>
|
||||||
|
<FileUpload
|
||||||
|
mode={mode}
|
||||||
|
files={record?.files}
|
||||||
|
setFileIds={setFileIds}
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
{
|
||||||
|
mode==='view'?null:(
|
||||||
|
<>
|
||||||
|
<Form.Item {...btnItemLayout}>
|
||||||
|
<Button type="primary" htmlType="submit">
|
||||||
|
{mode === 'save' ? '提交' : '修改'}
|
||||||
|
</Button>
|
||||||
|
</Form.Item>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</Form>
|
||||||
|
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ModalForm;
|
||||||
|
|
@ -0,0 +1,126 @@
|
||||||
|
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 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 { exportFile } from '../../../utils/tools.js';
|
||||||
|
|
||||||
|
const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
|
||||||
|
const Page = () => {
|
||||||
|
const types = {
|
||||||
|
0: "防汛物资",
|
||||||
|
1: '食品和饮水',
|
||||||
|
2: "防护用具",
|
||||||
|
3: "照明设备",
|
||||||
|
4: "金属材料类",
|
||||||
|
5:"其它",
|
||||||
|
}
|
||||||
|
const refModal = useRef();
|
||||||
|
const [searchVal, setSearchVal] = useState(false)
|
||||||
|
const columns = [
|
||||||
|
{ title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align:"center" },
|
||||||
|
{ title: '物资名称', key: 'name', dataIndex: 'name', width: 150, ellipsis: true },
|
||||||
|
{
|
||||||
|
title: '类型', key: 'type', dataIndex: 'type', width: 140,
|
||||||
|
render: (value) => <span>{types[value]}</span>,
|
||||||
|
},
|
||||||
|
{ title: '规格型号', key: 'adress', dataIndex: 'adress', width: 150, ellipsis: true },
|
||||||
|
{ title: '数量', key: 'type', dataIndex: 'type', width: 140},
|
||||||
|
{ title: '计量单位', key: 'type', dataIndex: 'type', width: 140},
|
||||||
|
{ title: '单价(元)', key: 'type', dataIndex: 'type', width: 140},
|
||||||
|
{
|
||||||
|
title: '采购时间', key: 'eventsDate', dataIndex: 'eventsDate', width: 150,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '供方名称', key: 'eventsDate', dataIndex: 'eventsDate', width: 150,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作', key: 'operation', width: 200, fixed: 'right',align: 'center',
|
||||||
|
render: (value, row, index) => (
|
||||||
|
<CrudOpRender_text
|
||||||
|
edit={ true }
|
||||||
|
del={ true }
|
||||||
|
view={ true }
|
||||||
|
command={(cmd) => () => command(cmd)(row)} />)
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
|
||||||
|
const width = useMemo(() => columns.reduce((total, cur) => total + (cur.width), 0), [columns]);
|
||||||
|
|
||||||
|
const command = (type) => (params) => {
|
||||||
|
if (type === 'save') {
|
||||||
|
refModal.current.showSave();
|
||||||
|
} else if (type === 'edit') {
|
||||||
|
refModal.current.showEdit({ ...params });
|
||||||
|
} else if (type === 'view') {
|
||||||
|
refModal.current.showView(params);
|
||||||
|
} else if (type === 'del') {
|
||||||
|
refModal.current.onDeleteGet(apiurl.rcgl.gcdsj.delete + `/${params.id}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.sbwh.whfabz.page).find_noCode);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description 处理成功的回调
|
||||||
|
*/
|
||||||
|
const successCallback = () => {
|
||||||
|
refresh()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 导出
|
||||||
|
const exportExcel = () => {
|
||||||
|
let params = {
|
||||||
|
...searchVal,
|
||||||
|
}
|
||||||
|
httppost5(apiurl.pxjh.export, params).then(res => {
|
||||||
|
exportFile(`采购台账管理.xlsx`,res.data)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
useEffect(()=>{
|
||||||
|
const params = {
|
||||||
|
search: {
|
||||||
|
...searchVal,
|
||||||
|
}
|
||||||
|
};
|
||||||
|
search(params)
|
||||||
|
}, [searchVal])
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className='content-root clearFloat xybm' style={{paddingRight:"0",paddingBottom:"0"}}>
|
||||||
|
<div className='lf CrudAdcdTreeTableBox' style={{width:"100%",overflowY:"auto"}}>
|
||||||
|
<Card className='nonebox'>
|
||||||
|
<ToolBar
|
||||||
|
setSearchVal={setSearchVal}
|
||||||
|
onSave={command('save')}
|
||||||
|
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 )"}}/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<BasicCrudModal
|
||||||
|
width={1000}
|
||||||
|
ref={refModal}
|
||||||
|
title="维护方案"
|
||||||
|
component={ModalForm}
|
||||||
|
onCrudSuccess={successCallback}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Page;
|
||||||
|
|
@ -0,0 +1,89 @@
|
||||||
|
import React, { useEffect,useState } from 'react';
|
||||||
|
import { Form, Input, Button, DatePicker } from 'antd';
|
||||||
|
import NormalSelect from '../../../components/Form/NormalSelect';
|
||||||
|
|
||||||
|
import moment from 'moment';
|
||||||
|
const { RangePicker } = DatePicker;
|
||||||
|
const ToolBar = ({ setSearchVal, onSave, storeData, exportFile1 }) => {
|
||||||
|
|
||||||
|
const types = [
|
||||||
|
{
|
||||||
|
label: "防汛物资",
|
||||||
|
value: 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "食品和饮水",
|
||||||
|
value: 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "防护用具",
|
||||||
|
value: 2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "照明设备",
|
||||||
|
value: 3
|
||||||
|
}, {
|
||||||
|
label: "金属材料类",
|
||||||
|
value: 4
|
||||||
|
}, {
|
||||||
|
label: "其它",
|
||||||
|
value: 5
|
||||||
|
},
|
||||||
|
]
|
||||||
|
const [form] = Form.useForm();
|
||||||
|
|
||||||
|
const onFinish = (values) => {
|
||||||
|
let dateSo;
|
||||||
|
if (values.tm) {
|
||||||
|
dateSo = {
|
||||||
|
start: moment(values.tm[0]).format('YYYY-MM-DD HH:mm:ss'),
|
||||||
|
end: moment(values.tm[1]).format('YYYY-MM-DD HH:mm:ss')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
delete values.tm
|
||||||
|
setSearchVal({...values, dateSo});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div style={{display:'flex',justifyContent:'space-between'}}>
|
||||||
|
<Form form={form} className='toolbarBox' layout="inline" onFinish={onFinish}>
|
||||||
|
<Form.Item label="物资名称" name="name">
|
||||||
|
<Input allowClear style={{width:'150px'}}/>
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item label="类型" name="type">
|
||||||
|
<NormalSelect allowClear style={{ width: '150px' }} options={types} />
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item label="采购时间" name="tm">
|
||||||
|
<RangePicker
|
||||||
|
allowClear
|
||||||
|
showTime
|
||||||
|
style={{ width: "300px" }}
|
||||||
|
format="YYYY-MM-DD HH:mm:ss"
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item>
|
||||||
|
<Button type="primary" htmlType="submit">查询</Button>
|
||||||
|
</Form.Item>
|
||||||
|
|
||||||
|
<Form.Item>
|
||||||
|
<Button onClick={() => form.resetFields()}>重置</Button>
|
||||||
|
</Form.Item>
|
||||||
|
{
|
||||||
|
(onSave) ?
|
||||||
|
<Form.Item>
|
||||||
|
<Button onClick={onSave}>新增</Button>
|
||||||
|
</Form.Item>
|
||||||
|
:null
|
||||||
|
}
|
||||||
|
<Form.Item>
|
||||||
|
<Button onClick={()=>exportFile1()}>导出</Button>
|
||||||
|
</Form.Item>
|
||||||
|
</Form>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ToolBar;
|
||||||
|
|
@ -0,0 +1,189 @@
|
||||||
|
import React,{useEffect,useState,useMemo,useRef} from 'react';
|
||||||
|
import { Form, Button, Input, Row,Upload, Col, Table, DatePicker, InputNumber,message,Image,Modal,Typography ,Popconfirm } from 'antd';
|
||||||
|
import { DeleteOutlined,FileWordOutlined,FilePdfOutlined,FileZipOutlined,FileExcelOutlined } from '@ant-design/icons';
|
||||||
|
import { formItemLayout, btnItemLayout } from '../../../components/crud/FormLayoutProps';
|
||||||
|
|
||||||
|
import apiurl from '../../../service/apiurl';
|
||||||
|
import FileUpload from '../../../components/fileUpload';
|
||||||
|
import NormalSelect from '../../../components/Form/NormalSelect';
|
||||||
|
|
||||||
|
import "./index.less"
|
||||||
|
import moment from 'moment';
|
||||||
|
const { RangePicker } = DatePicker
|
||||||
|
const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
|
||||||
|
|
||||||
|
const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
||||||
|
const types = [
|
||||||
|
{
|
||||||
|
label: "防汛物资",
|
||||||
|
value: 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "食品和饮水",
|
||||||
|
value: 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "防护用具",
|
||||||
|
value: 2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "照明设备",
|
||||||
|
value: 3
|
||||||
|
}, {
|
||||||
|
label: "金属材料类",
|
||||||
|
value: 4
|
||||||
|
}, {
|
||||||
|
label: "其它",
|
||||||
|
value: 5
|
||||||
|
},
|
||||||
|
]
|
||||||
|
const types1 = [
|
||||||
|
{
|
||||||
|
label: "出库",
|
||||||
|
value: 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "入库",
|
||||||
|
value: 1
|
||||||
|
},
|
||||||
|
]
|
||||||
|
const [form] = Form.useForm();
|
||||||
|
const [fileIds, setFileIds] = useState()
|
||||||
|
const onfinish = (values) => {
|
||||||
|
values.eventsDate = values.eventsDate?moment(values.eventsDate).format("YYYY-MM-DD 00:00:00"):''
|
||||||
|
if (mode === 'edit') {
|
||||||
|
values.files = fileIds;
|
||||||
|
values.id = record.id;
|
||||||
|
onEdit(apiurl.rcgl.gcdsj.edit,values)
|
||||||
|
}
|
||||||
|
if (mode === 'save') {
|
||||||
|
values.files = fileIds
|
||||||
|
onSave(apiurl.rcgl.gcdsj.save,values)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Form
|
||||||
|
form={form}
|
||||||
|
{...formItemLayout}
|
||||||
|
onFinish={onfinish}
|
||||||
|
initialValues={record}
|
||||||
|
>
|
||||||
|
<Row>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
label="物资名称"
|
||||||
|
name="name"
|
||||||
|
rules={[{ required: true }]}
|
||||||
|
>
|
||||||
|
<Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
label="类型"
|
||||||
|
name="type"
|
||||||
|
rules={[{ required: true }]}
|
||||||
|
>
|
||||||
|
<NormalSelect
|
||||||
|
allowClear
|
||||||
|
disabled={mode==='view'}
|
||||||
|
style={{ width: "100%" }}
|
||||||
|
options={types1}
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
|
||||||
|
</Row>
|
||||||
|
<Row>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
label="类别"
|
||||||
|
name="type"
|
||||||
|
rules={[{ required: true }]}
|
||||||
|
>
|
||||||
|
<NormalSelect
|
||||||
|
allowClear
|
||||||
|
disabled={mode==='view'}
|
||||||
|
style={{ width: "100%" }}
|
||||||
|
options={types}
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
label="规格型号"
|
||||||
|
name="name"
|
||||||
|
>
|
||||||
|
<Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
label="记录数量"
|
||||||
|
name="type"
|
||||||
|
rules={[{ required: true }]}
|
||||||
|
>
|
||||||
|
<InputNumber isabled={mode==='view'} style={{width:'100%'}} allowClear/>
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
label="计量单位"
|
||||||
|
name="eventsDate"
|
||||||
|
>
|
||||||
|
<Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
|
||||||
|
<Row>
|
||||||
|
<Col span={24}>
|
||||||
|
<Form.Item
|
||||||
|
label="备注"
|
||||||
|
name="eventsDesc"
|
||||||
|
labelCol={{ span: 3 }}
|
||||||
|
wrapperCol={{ span: 19 }}
|
||||||
|
>
|
||||||
|
<Input.TextArea disabled={mode==='view'} style={{width:'100%',minHeight:'100px'}} allowClear />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
|
||||||
|
<Row>
|
||||||
|
<Col span={24}>
|
||||||
|
<Form.Item
|
||||||
|
label="附件"
|
||||||
|
name="fieldId"
|
||||||
|
labelCol={{ span: 3 }}
|
||||||
|
wrapperCol={{ span: 19 }}
|
||||||
|
>
|
||||||
|
<FileUpload
|
||||||
|
mode={mode}
|
||||||
|
files={record?.files}
|
||||||
|
setFileIds={setFileIds}
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
{
|
||||||
|
mode==='view'?null:(
|
||||||
|
<>
|
||||||
|
<Form.Item {...btnItemLayout}>
|
||||||
|
<Button type="primary" htmlType="submit">
|
||||||
|
{mode === 'save' ? '提交' : '修改'}
|
||||||
|
</Button>
|
||||||
|
</Form.Item>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</Form>
|
||||||
|
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ModalForm;
|
||||||
|
|
@ -0,0 +1,132 @@
|
||||||
|
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 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 { exportFile } from '../../../utils/tools.js';
|
||||||
|
|
||||||
|
const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
|
||||||
|
const Page = () => {
|
||||||
|
const types = {
|
||||||
|
0: "防汛物资",
|
||||||
|
1: '食品和饮水',
|
||||||
|
2: "防护用具",
|
||||||
|
3: "照明设备",
|
||||||
|
4: "金属材料类",
|
||||||
|
5:"其它",
|
||||||
|
}
|
||||||
|
|
||||||
|
const types1 = {
|
||||||
|
0: "出库",
|
||||||
|
1: '入库',
|
||||||
|
}
|
||||||
|
const refModal = useRef();
|
||||||
|
const [searchVal, setSearchVal] = useState(false)
|
||||||
|
const columns = [
|
||||||
|
{ title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align:"center" },
|
||||||
|
{ title: '物资名称', key: 'name', dataIndex: 'name', width: 150, ellipsis: true },
|
||||||
|
{
|
||||||
|
title: '类型', key: 'type', dataIndex: 'type', width: 140,
|
||||||
|
render: (value) => <span>{types1[value]}</span>,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '类别', key: 'type', dataIndex: 'type', width: 140,
|
||||||
|
render: (value) => <span>{types[value]}</span>,
|
||||||
|
},
|
||||||
|
{ title: '规格型号', key: 'adress', dataIndex: 'adress', width: 150, ellipsis: true },
|
||||||
|
{ title: '记录数量', key: 'type', dataIndex: 'type', width: 140},
|
||||||
|
{ title: '计量单位', key: 'type', dataIndex: 'type', width: 140},
|
||||||
|
{ title: '记录人', key: 'type', dataIndex: 'type', width: 140},
|
||||||
|
{
|
||||||
|
title: '记录时间', key: 'eventsDate', dataIndex: 'eventsDate', width: 150,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作', key: 'operation', width: 200, fixed: 'right',align: 'center',
|
||||||
|
render: (value, row, index) => (
|
||||||
|
<CrudOpRender_text
|
||||||
|
edit={ true }
|
||||||
|
del={ true }
|
||||||
|
view={ true }
|
||||||
|
command={(cmd) => () => command(cmd)(row)} />)
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
|
||||||
|
const width = useMemo(() => columns.reduce((total, cur) => total + (cur.width), 0), [columns]);
|
||||||
|
|
||||||
|
const command = (type) => (params) => {
|
||||||
|
if (type === 'save') {
|
||||||
|
refModal.current.showSave();
|
||||||
|
} else if (type === 'edit') {
|
||||||
|
refModal.current.showEdit({ ...params });
|
||||||
|
} else if (type === 'view') {
|
||||||
|
refModal.current.showView(params);
|
||||||
|
} else if (type === 'del') {
|
||||||
|
refModal.current.onDeleteGet(apiurl.rcgl.gcdsj.delete + `/${params.id}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.sbwh.whfabz.page).find_noCode);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description 处理成功的回调
|
||||||
|
*/
|
||||||
|
const successCallback = () => {
|
||||||
|
refresh()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 导出
|
||||||
|
const exportExcel = () => {
|
||||||
|
let params = {
|
||||||
|
...searchVal,
|
||||||
|
}
|
||||||
|
httppost5(apiurl.pxjh.export, params).then(res => {
|
||||||
|
exportFile(`采购台账管理.xlsx`,res.data)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
useEffect(()=>{
|
||||||
|
const params = {
|
||||||
|
search: {
|
||||||
|
...searchVal,
|
||||||
|
}
|
||||||
|
};
|
||||||
|
search(params)
|
||||||
|
}, [searchVal])
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className='content-root clearFloat xybm' style={{paddingRight:"0",paddingBottom:"0"}}>
|
||||||
|
<div className='lf CrudAdcdTreeTableBox' style={{width:"100%",overflowY:"auto"}}>
|
||||||
|
<Card className='nonebox'>
|
||||||
|
<ToolBar
|
||||||
|
setSearchVal={setSearchVal}
|
||||||
|
onSave={command('save')}
|
||||||
|
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 )"}}/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<BasicCrudModal
|
||||||
|
width={1000}
|
||||||
|
ref={refModal}
|
||||||
|
title="核算管理"
|
||||||
|
component={ModalForm}
|
||||||
|
onCrudSuccess={successCallback}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Page;
|
||||||
|
|
@ -0,0 +1,94 @@
|
||||||
|
import React, { useEffect,useState } from 'react';
|
||||||
|
import { Form, Input, Button, DatePicker } from 'antd';
|
||||||
|
import NormalSelect from '../../../components/Form/NormalSelect';
|
||||||
|
|
||||||
|
import moment from 'moment';
|
||||||
|
const { RangePicker } = DatePicker;
|
||||||
|
const ToolBar = ({ setSearchVal, onSave, storeData, exportFile1 }) => {
|
||||||
|
|
||||||
|
const types = [
|
||||||
|
{
|
||||||
|
label: "防汛物资",
|
||||||
|
value: 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "食品和饮水",
|
||||||
|
value: 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "防护用具",
|
||||||
|
value: 2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "照明设备",
|
||||||
|
value: 3
|
||||||
|
}, {
|
||||||
|
label: "金属材料类",
|
||||||
|
value: 4
|
||||||
|
}, {
|
||||||
|
label: "其它",
|
||||||
|
value: 5
|
||||||
|
},
|
||||||
|
]
|
||||||
|
const types1 = [
|
||||||
|
{
|
||||||
|
label: "出库",
|
||||||
|
value: 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "入库",
|
||||||
|
value: 1
|
||||||
|
},
|
||||||
|
]
|
||||||
|
const [form] = Form.useForm();
|
||||||
|
|
||||||
|
const onFinish = (values) => {
|
||||||
|
let dateSo;
|
||||||
|
if (values.tm) {
|
||||||
|
dateSo = {
|
||||||
|
start: moment(values.tm[0]).format('YYYY-MM-DD HH:mm:ss'),
|
||||||
|
end: moment(values.tm[1]).format('YYYY-MM-DD HH:mm:ss')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
delete values.tm
|
||||||
|
setSearchVal({...values, dateSo});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div style={{display:'flex',justifyContent:'space-between'}}>
|
||||||
|
<Form form={form} className='toolbarBox' layout="inline" onFinish={onFinish}>
|
||||||
|
<Form.Item label="物资名称" name="name">
|
||||||
|
<Input allowClear style={{width:'150px'}}/>
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item label="类别" name="type">
|
||||||
|
<NormalSelect allowClear style={{ width: '150px' }} options={types} />
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item label="类型" name="type">
|
||||||
|
<NormalSelect allowClear style={{ width: '150px' }} options={types1} />
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item>
|
||||||
|
<Button type="primary" htmlType="submit">查询</Button>
|
||||||
|
</Form.Item>
|
||||||
|
|
||||||
|
<Form.Item>
|
||||||
|
<Button onClick={() => form.resetFields()}>重置</Button>
|
||||||
|
</Form.Item>
|
||||||
|
{
|
||||||
|
(onSave) ?
|
||||||
|
<Form.Item>
|
||||||
|
<Button onClick={onSave}>新增</Button>
|
||||||
|
</Form.Item>
|
||||||
|
:null
|
||||||
|
}
|
||||||
|
<Form.Item>
|
||||||
|
<Button onClick={()=>exportFile1()}>导出</Button>
|
||||||
|
</Form.Item>
|
||||||
|
</Form>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ToolBar;
|
||||||
|
|
@ -0,0 +1,167 @@
|
||||||
|
import React,{useEffect,useState,useMemo,useRef} from 'react';
|
||||||
|
import { Form, Button, Input, Row,Upload, Col, Table, DatePicker, InputNumber,message,Image,Modal,Typography ,Popconfirm } from 'antd';
|
||||||
|
import { formItemLayout, btnItemLayout } from '../../../components/crud/FormLayoutProps';
|
||||||
|
import apiurl from '../../../service/apiurl';
|
||||||
|
import FileUpload from '../../../components/fileUpload';
|
||||||
|
import NormalSelect from '../../../components/Form/NormalSelect';
|
||||||
|
|
||||||
|
import "./index.less"
|
||||||
|
import moment from 'moment';
|
||||||
|
const { RangePicker } = DatePicker
|
||||||
|
const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
|
||||||
|
|
||||||
|
const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
||||||
|
const types = [
|
||||||
|
{
|
||||||
|
label: "技术难题",
|
||||||
|
value: 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "安全事故",
|
||||||
|
value: 1
|
||||||
|
},{
|
||||||
|
label: "质量问题",
|
||||||
|
value: 2
|
||||||
|
},
|
||||||
|
]
|
||||||
|
const [form] = Form.useForm();
|
||||||
|
const [fileIds, setFileIds] = useState()
|
||||||
|
const onfinish = (values) => {
|
||||||
|
values.eventsDate = values.eventsDate?moment(values.eventsDate).format("YYYY-MM-DD 00:00:00"):''
|
||||||
|
if (mode === 'edit') {
|
||||||
|
values.files = fileIds;
|
||||||
|
values.id = record.id;
|
||||||
|
onEdit(apiurl.rcgl.gcdsj.edit,values)
|
||||||
|
}
|
||||||
|
if (mode === 'save') {
|
||||||
|
values.files = fileIds
|
||||||
|
onSave(apiurl.rcgl.gcdsj.save,values)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Form
|
||||||
|
form={form}
|
||||||
|
{...formItemLayout}
|
||||||
|
onFinish={onfinish}
|
||||||
|
initialValues={record}
|
||||||
|
>
|
||||||
|
<Row>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
label="项目名称"
|
||||||
|
name="name"
|
||||||
|
rules={[{ required: true }]}
|
||||||
|
>
|
||||||
|
<Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
label="方案名称"
|
||||||
|
name="name"
|
||||||
|
rules={[{ required: true }]}
|
||||||
|
>
|
||||||
|
<Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
|
||||||
|
</Row>
|
||||||
|
<Row>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
label="过程名称"
|
||||||
|
name="adress"
|
||||||
|
rules={[{ required: true }]}
|
||||||
|
>
|
||||||
|
<Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
label="完成情况（%）"
|
||||||
|
name="name"
|
||||||
|
>
|
||||||
|
<InputNumber min={0} max={100} disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
label="问题类型"
|
||||||
|
name="type"
|
||||||
|
>
|
||||||
|
<NormalSelect
|
||||||
|
allowClear
|
||||||
|
disabled={mode==='view'}
|
||||||
|
style={{ width: "100%" }}
|
||||||
|
options={types}
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
label="问题发生时间"
|
||||||
|
name="eventsDate"
|
||||||
|
getValueFromEvent={(e,dateString) => dateString}
|
||||||
|
getValueProps={(value) => {
|
||||||
|
return {
|
||||||
|
value: value ? [value[0]&&moment(value[0]),value[1]&&moment(value[1])] : undefined
|
||||||
|
};
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<RangePicker disabled={mode==='view'} format={'YYYY-MM-DD'} style={{width:'100%'}} allowClear />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
|
||||||
|
<Row>
|
||||||
|
<Col span={24}>
|
||||||
|
<Form.Item
|
||||||
|
label="问题描述"
|
||||||
|
name="eventsDesc"
|
||||||
|
labelCol={{ span: 3 }}
|
||||||
|
wrapperCol={{ span: 19 }}
|
||||||
|
>
|
||||||
|
<Input.TextArea disabled={mode==='view'} style={{width:'100%',minHeight:'100px'}} allowClear />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
|
||||||
|
|
||||||
|
<Row>
|
||||||
|
<Col span={24}>
|
||||||
|
<Form.Item
|
||||||
|
label="附件"
|
||||||
|
name="fieldId"
|
||||||
|
labelCol={{ span: 3 }}
|
||||||
|
wrapperCol={{ span: 19 }}
|
||||||
|
>
|
||||||
|
<FileUpload
|
||||||
|
mode={mode}
|
||||||
|
files={record?.files}
|
||||||
|
setFileIds={setFileIds}
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
{
|
||||||
|
mode==='view'?null:(
|
||||||
|
<>
|
||||||
|
<Form.Item {...btnItemLayout}>
|
||||||
|
<Button type="primary" htmlType="submit">
|
||||||
|
{mode === 'save' ? '提交' : '修改'}
|
||||||
|
</Button>
|
||||||
|
</Form.Item>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</Form>
|
||||||
|
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ModalForm;
|
||||||
|
|
@ -0,0 +1,102 @@
|
||||||
|
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 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';
|
||||||
|
|
||||||
|
const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
|
||||||
|
const Page = () => {
|
||||||
|
const types = {
|
||||||
|
0: "设备维修",
|
||||||
|
1: '设备更换',
|
||||||
|
2:"结构加固"
|
||||||
|
}
|
||||||
|
const refModal = useRef();
|
||||||
|
const [searchVal, setSearchVal] = useState(false)
|
||||||
|
const columns = [
|
||||||
|
{ title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align:"center" },
|
||||||
|
{ title: '方案名称', key: 'name', dataIndex: 'name', width: 150, ellipsis: true },
|
||||||
|
{ title: '过程地点', key: 'adress', dataIndex: 'adress', width: 200, ellipsis: true },
|
||||||
|
{ title: '记录人', key: 'type', dataIndex: 'type', width: 140,},
|
||||||
|
{
|
||||||
|
title: '记录时间', key: 'eventsDate', dataIndex: 'eventsDate', width: 140,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作', key: 'operation', width: 200, fixed: 'right',align: 'center',
|
||||||
|
render: (value, row, index) => (
|
||||||
|
<CrudOpRender_text
|
||||||
|
edit={ true }
|
||||||
|
del={ true }
|
||||||
|
view={ true }
|
||||||
|
command={(cmd) => () => command(cmd)(row)} />)
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
|
||||||
|
const width = useMemo(() => columns.reduce((total, cur) => total + (cur.width), 0), [columns]);
|
||||||
|
|
||||||
|
const command = (type) => (params) => {
|
||||||
|
if (type === 'save') {
|
||||||
|
refModal.current.showSave();
|
||||||
|
} else if (type === 'edit') {
|
||||||
|
refModal.current.showEdit({ ...params });
|
||||||
|
} else if (type === 'view') {
|
||||||
|
refModal.current.showView(params);
|
||||||
|
} else if (type === 'del') {
|
||||||
|
refModal.current.onDeleteGet(apiurl.rcgl.gcdsj.delete + `/${params.id}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.sbwh.whfabz.page).find_noCode);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description 处理成功的回调
|
||||||
|
*/
|
||||||
|
const successCallback = () => {
|
||||||
|
refresh()
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(()=>{
|
||||||
|
const params = {
|
||||||
|
search: {
|
||||||
|
...searchVal,
|
||||||
|
}
|
||||||
|
};
|
||||||
|
search(params)
|
||||||
|
}, [searchVal])
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className='content-root clearFloat xybm' style={{paddingRight:"0",paddingBottom:"0"}}>
|
||||||
|
<div className='lf CrudAdcdTreeTableBox' style={{width:"100%",overflowY:"auto"}}>
|
||||||
|
<Card className='nonebox'>
|
||||||
|
<ToolBar
|
||||||
|
setSearchVal={setSearchVal}
|
||||||
|
onSave={command('save')}
|
||||||
|
/>
|
||||||
|
</Card>
|
||||||
|
<div className="ant-card-body" style={{ padding: "20px 0 0 0" }}>
|
||||||
|
<Table columns={columns} rowKey="inx" {...tableProps} scroll={{ x: width , y: "calc( 100vh - 400px )"}}/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<BasicCrudModal
|
||||||
|
width={1000}
|
||||||
|
ref={refModal}
|
||||||
|
title="过程记录"
|
||||||
|
component={ModalForm}
|
||||||
|
onCrudSuccess={successCallback}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Page;
|
||||||
|
|
@ -0,0 +1,58 @@
|
||||||
|
import React, { useEffect,useState } from 'react';
|
||||||
|
import { Form, Input, Button, DatePicker } from 'antd';
|
||||||
|
import NormalSelect from '../../../components/Form/NormalSelect';
|
||||||
|
|
||||||
|
import moment from 'moment';
|
||||||
|
const { RangePicker } = DatePicker;
|
||||||
|
const ToolBar = ({ setSearchVal, onSave, storeData, role }) => {
|
||||||
|
const [form] = Form.useForm();
|
||||||
|
|
||||||
|
const onFinish = (values) => {
|
||||||
|
let dateSo;
|
||||||
|
if (values.tm) {
|
||||||
|
dateSo = {
|
||||||
|
start: moment(values.tm[0]).format('YYYY-MM-DD HH:mm:ss'),
|
||||||
|
end: moment(values.tm[1]).format('YYYY-MM-DD HH:mm:ss')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
delete values.tm
|
||||||
|
setSearchVal({...values, dateSo});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div style={{display:'flex',justifyContent:'space-between'}}>
|
||||||
|
<Form form={form} className='toolbarBox' layout="inline" onFinish={onFinish}>
|
||||||
|
<Form.Item label="项目名称" name="name">
|
||||||
|
<Input allowClear style={{width:'150px'}}/>
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item label="记录时间" name="tm">
|
||||||
|
<RangePicker
|
||||||
|
allowClear
|
||||||
|
showTime
|
||||||
|
style={{ width: "300px" }}
|
||||||
|
format="YYYY-MM-DD HH:mm:ss"
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item>
|
||||||
|
<Button type="primary" htmlType="submit">查询</Button>
|
||||||
|
</Form.Item>
|
||||||
|
|
||||||
|
<Form.Item>
|
||||||
|
<Button onClick={() => form.resetFields()}>重置</Button>
|
||||||
|
</Form.Item>
|
||||||
|
{
|
||||||
|
(onSave) ?
|
||||||
|
<Form.Item>
|
||||||
|
<Button onClick={onSave}>新增</Button>
|
||||||
|
</Form.Item>
|
||||||
|
:null
|
||||||
|
}
|
||||||
|
</Form>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ToolBar;
|
||||||
|
|
@ -0,0 +1,178 @@
|
||||||
|
import React,{useEffect,useState,useMemo,useRef} from 'react';
|
||||||
|
import { Form, Button, Input, Row,Upload, Col, Table, DatePicker, InputNumber,message,Image,Modal,Typography ,Popconfirm } from 'antd';
|
||||||
|
import { DeleteOutlined,FileWordOutlined,FilePdfOutlined,FileZipOutlined,FileExcelOutlined } from '@ant-design/icons';
|
||||||
|
import { formItemLayout, btnItemLayout } from '../../../components/crud/FormLayoutProps';
|
||||||
|
|
||||||
|
import apiurl from '../../../service/apiurl';
|
||||||
|
import FileUpload from '../../../components/fileUpload';
|
||||||
|
import NormalSelect from '../../../components/Form/NormalSelect';
|
||||||
|
|
||||||
|
import "./index.less"
|
||||||
|
import moment from 'moment';
|
||||||
|
const { RangePicker } = DatePicker
|
||||||
|
const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
|
||||||
|
|
||||||
|
const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
||||||
|
const types = [
|
||||||
|
{
|
||||||
|
label: "设备维修",
|
||||||
|
value: 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "设备更换",
|
||||||
|
value: 1
|
||||||
|
},{
|
||||||
|
label: "结构加固",
|
||||||
|
value: 2
|
||||||
|
},
|
||||||
|
]
|
||||||
|
const [form] = Form.useForm();
|
||||||
|
const [fileIds, setFileIds] = useState()
|
||||||
|
const onfinish = (values) => {
|
||||||
|
values.eventsDate = values.eventsDate?moment(values.eventsDate).format("YYYY-MM-DD 00:00:00"):''
|
||||||
|
if (mode === 'edit') {
|
||||||
|
values.files = fileIds;
|
||||||
|
values.id = record.id;
|
||||||
|
onEdit(apiurl.rcgl.gcdsj.edit,values)
|
||||||
|
}
|
||||||
|
if (mode === 'save') {
|
||||||
|
values.files = fileIds
|
||||||
|
onSave(apiurl.rcgl.gcdsj.save,values)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Form
|
||||||
|
form={form}
|
||||||
|
{...formItemLayout}
|
||||||
|
onFinish={onfinish}
|
||||||
|
initialValues={record}
|
||||||
|
>
|
||||||
|
<Row>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
label="项目名称"
|
||||||
|
name="name"
|
||||||
|
rules={[{ required: true }]}
|
||||||
|
>
|
||||||
|
<Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
label="方案名称"
|
||||||
|
name="name"
|
||||||
|
rules={[{ required: true }]}
|
||||||
|
>
|
||||||
|
<Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
|
||||||
|
</Row>
|
||||||
|
<Row>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
label="项目地点"
|
||||||
|
name="adress"
|
||||||
|
>
|
||||||
|
<Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
label="项目负责人"
|
||||||
|
name="name"
|
||||||
|
>
|
||||||
|
<Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
label="维护类型"
|
||||||
|
name="type"
|
||||||
|
rules={[{ required: true }]}
|
||||||
|
>
|
||||||
|
<NormalSelect
|
||||||
|
allowClear
|
||||||
|
disabled={mode==='view'}
|
||||||
|
style={{ width: "100%" }}
|
||||||
|
options={types}
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
label="计划维护时间"
|
||||||
|
name="eventsDate"
|
||||||
|
getValueFromEvent={(e,dateString) => dateString}
|
||||||
|
getValueProps={(value) => {
|
||||||
|
return {
|
||||||
|
value: value ? [value[0]&&moment(value[0]),value[1]&&moment(value[1])] : undefined
|
||||||
|
};
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<RangePicker disabled={mode==='view'} format={'YYYY-MM-DD'} style={{width:'100%'}} allowClear />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
|
||||||
|
<Row>
|
||||||
|
<Col span={24}>
|
||||||
|
<Form.Item
|
||||||
|
label="维护内容"
|
||||||
|
name="eventsDesc"
|
||||||
|
labelCol={{ span: 3 }}
|
||||||
|
wrapperCol={{ span: 19 }}
|
||||||
|
>
|
||||||
|
<Input.TextArea disabled={mode==='view'} style={{width:'100%',minHeight:'100px'}} allowClear />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
label="费用预估（元）"
|
||||||
|
name="eventsDesc"
|
||||||
|
>
|
||||||
|
<Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
|
||||||
|
<Row>
|
||||||
|
<Col span={24}>
|
||||||
|
<Form.Item
|
||||||
|
label="附件"
|
||||||
|
name="fieldId"
|
||||||
|
labelCol={{ span: 3 }}
|
||||||
|
wrapperCol={{ span: 19 }}
|
||||||
|
>
|
||||||
|
<FileUpload
|
||||||
|
mode={mode}
|
||||||
|
files={record?.files}
|
||||||
|
setFileIds={setFileIds}
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
{
|
||||||
|
mode==='view'?null:(
|
||||||
|
<>
|
||||||
|
<Form.Item {...btnItemLayout}>
|
||||||
|
<Button type="primary" htmlType="submit">
|
||||||
|
{mode === 'save' ? '提交' : '修改'}
|
||||||
|
</Button>
|
||||||
|
</Form.Item>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</Form>
|
||||||
|
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ModalForm;
|
||||||
|
|
@ -0,0 +1,106 @@
|
||||||
|
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 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';
|
||||||
|
|
||||||
|
const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
|
||||||
|
const Page = () => {
|
||||||
|
const types = {
|
||||||
|
0: "设备维修",
|
||||||
|
1: '设备更换',
|
||||||
|
2:"结构加固"
|
||||||
|
}
|
||||||
|
const refModal = useRef();
|
||||||
|
const [searchVal, setSearchVal] = useState(false)
|
||||||
|
const columns = [
|
||||||
|
{ title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align:"center" },
|
||||||
|
{ title: '项目名称', key: 'name', dataIndex: 'name', width: 150, ellipsis: true },
|
||||||
|
{ title: '项目地点', key: 'adress', dataIndex: 'adress', width: 200, ellipsis: true },
|
||||||
|
{
|
||||||
|
title: '维护类型', key: 'type', dataIndex: 'type', width: 140,
|
||||||
|
render: (value) => <span>{types[value]}</span>,
|
||||||
|
},
|
||||||
|
{ title: '编制人', key: 'type', dataIndex: 'type', width: 140,},
|
||||||
|
{
|
||||||
|
title: '编制时间', key: 'eventsDate', dataIndex: 'eventsDate', width: 140,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作', key: 'operation', width: 200, fixed: 'right',align: 'center',
|
||||||
|
render: (value, row, index) => (
|
||||||
|
<CrudOpRender_text
|
||||||
|
edit={ true }
|
||||||
|
del={ true }
|
||||||
|
view={ true }
|
||||||
|
command={(cmd) => () => command(cmd)(row)} />)
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
|
||||||
|
const width = useMemo(() => columns.reduce((total, cur) => total + (cur.width), 0), [columns]);
|
||||||
|
|
||||||
|
const command = (type) => (params) => {
|
||||||
|
if (type === 'save') {
|
||||||
|
refModal.current.showSave();
|
||||||
|
} else if (type === 'edit') {
|
||||||
|
refModal.current.showEdit({ ...params });
|
||||||
|
} else if (type === 'view') {
|
||||||
|
refModal.current.showView(params);
|
||||||
|
} else if (type === 'del') {
|
||||||
|
refModal.current.onDeleteGet(apiurl.rcgl.gcdsj.delete + `/${params.id}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.sbwh.whfabz.page).find_noCode);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description 处理成功的回调
|
||||||
|
*/
|
||||||
|
const successCallback = () => {
|
||||||
|
refresh()
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(()=>{
|
||||||
|
const params = {
|
||||||
|
search: {
|
||||||
|
...searchVal,
|
||||||
|
}
|
||||||
|
};
|
||||||
|
search(params)
|
||||||
|
}, [searchVal])
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className='content-root clearFloat xybm' style={{paddingRight:"0",paddingBottom:"0"}}>
|
||||||
|
<div className='lf CrudAdcdTreeTableBox' style={{width:"100%",overflowY:"auto"}}>
|
||||||
|
<Card className='nonebox'>
|
||||||
|
<ToolBar
|
||||||
|
setSearchVal={setSearchVal}
|
||||||
|
onSave={command('save')}
|
||||||
|
/>
|
||||||
|
</Card>
|
||||||
|
<div className="ant-card-body" style={{ padding: "20px 0 0 0" }}>
|
||||||
|
<Table columns={columns} rowKey="inx" {...tableProps} scroll={{ x: width , y: "calc( 100vh - 400px )"}}/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<BasicCrudModal
|
||||||
|
width={1000}
|
||||||
|
ref={refModal}
|
||||||
|
title="维护方案"
|
||||||
|
component={ModalForm}
|
||||||
|
onCrudSuccess={successCallback}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Page;
|
||||||
|
|
@ -0,0 +1,75 @@
|
||||||
|
import React, { useEffect,useState } from 'react';
|
||||||
|
import { Form, Input, Button, DatePicker } from 'antd';
|
||||||
|
import NormalSelect from '../../../components/Form/NormalSelect';
|
||||||
|
|
||||||
|
import moment from 'moment';
|
||||||
|
const { RangePicker } = DatePicker;
|
||||||
|
const ToolBar = ({ setSearchVal, onSave, storeData, role }) => {
|
||||||
|
|
||||||
|
const types = [
|
||||||
|
{
|
||||||
|
label: "设备维修",
|
||||||
|
value: 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "设备更换",
|
||||||
|
value: 1
|
||||||
|
},{
|
||||||
|
label: "结构加固",
|
||||||
|
value: 2
|
||||||
|
},
|
||||||
|
]
|
||||||
|
const [form] = Form.useForm();
|
||||||
|
|
||||||
|
const onFinish = (values) => {
|
||||||
|
let dateSo;
|
||||||
|
if (values.tm) {
|
||||||
|
dateSo = {
|
||||||
|
start: moment(values.tm[0]).format('YYYY-MM-DD HH:mm:ss'),
|
||||||
|
end: moment(values.tm[1]).format('YYYY-MM-DD HH:mm:ss')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
delete values.tm
|
||||||
|
setSearchVal({...values, dateSo});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div style={{display:'flex',justifyContent:'space-between'}}>
|
||||||
|
<Form form={form} className='toolbarBox' layout="inline" onFinish={onFinish}>
|
||||||
|
<Form.Item label="项目名称" name="name">
|
||||||
|
<Input allowClear style={{width:'150px'}}/>
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item label="维护类型" name="type">
|
||||||
|
<NormalSelect allowClear style={{ width: '150px' }} options={types} />
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item label="编制时间" name="tm">
|
||||||
|
<RangePicker
|
||||||
|
allowClear
|
||||||
|
showTime
|
||||||
|
style={{ width: "300px" }}
|
||||||
|
format="YYYY-MM-DD HH:mm:ss"
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item>
|
||||||
|
<Button type="primary" htmlType="submit">查询</Button>
|
||||||
|
</Form.Item>
|
||||||
|
|
||||||
|
<Form.Item>
|
||||||
|
<Button onClick={() => form.resetFields()}>重置</Button>
|
||||||
|
</Form.Item>
|
||||||
|
{
|
||||||
|
(onSave) ?
|
||||||
|
<Form.Item>
|
||||||
|
<Button onClick={onSave}>新增</Button>
|
||||||
|
</Form.Item>
|
||||||
|
:null
|
||||||
|
}
|
||||||
|
</Form>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ToolBar;
|
||||||
|
|
@ -0,0 +1,160 @@
|
||||||
|
import React,{useEffect,useState,useMemo,useRef} from 'react';
|
||||||
|
import { Form, Button, Input, Row,Upload, Col, Table, DatePicker, InputNumber,message,Image,Modal,Typography ,Popconfirm } from 'antd';
|
||||||
|
import { DeleteOutlined,FileWordOutlined,FilePdfOutlined,FileZipOutlined,FileExcelOutlined } from '@ant-design/icons';
|
||||||
|
import { formItemLayout, btnItemLayout } from '../../../components/crud/FormLayoutProps';
|
||||||
|
|
||||||
|
import apiurl from '../../../service/apiurl';
|
||||||
|
import FileUpload from '../../../components/fileUpload';
|
||||||
|
import NormalSelect from '../../../components/Form/NormalSelect';
|
||||||
|
|
||||||
|
import "./index.less"
|
||||||
|
import moment from 'moment';
|
||||||
|
const { RangePicker } = DatePicker
|
||||||
|
const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
|
||||||
|
|
||||||
|
const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
||||||
|
const types = [
|
||||||
|
{
|
||||||
|
label: "设备维修",
|
||||||
|
value: 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "设备更换",
|
||||||
|
value: 1
|
||||||
|
},{
|
||||||
|
label: "结构加固",
|
||||||
|
value: 2
|
||||||
|
},
|
||||||
|
]
|
||||||
|
const [form] = Form.useForm();
|
||||||
|
const [fileIds, setFileIds] = useState()
|
||||||
|
const onfinish = (values) => {
|
||||||
|
values.eventsDate = values.eventsDate?moment(values.eventsDate).format("YYYY-MM-DD 00:00:00"):''
|
||||||
|
if (mode === 'edit') {
|
||||||
|
values.files = fileIds;
|
||||||
|
values.id = record.id;
|
||||||
|
onEdit(apiurl.rcgl.gcdsj.edit,values)
|
||||||
|
}
|
||||||
|
if (mode === 'save') {
|
||||||
|
values.files = fileIds
|
||||||
|
onSave(apiurl.rcgl.gcdsj.save,values)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Form
|
||||||
|
form={form}
|
||||||
|
{...formItemLayout}
|
||||||
|
onFinish={onfinish}
|
||||||
|
initialValues={record}
|
||||||
|
>
|
||||||
|
<Row>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
label="项目名称"
|
||||||
|
name="name"
|
||||||
|
rules={[{ required: true }]}
|
||||||
|
>
|
||||||
|
<Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
label="验收时间"
|
||||||
|
name="eventsDate"
|
||||||
|
getValueFromEvent={(e,dateString) => dateString}
|
||||||
|
getValueProps={(value) => {
|
||||||
|
return {
|
||||||
|
value: value ? [value[0]&&moment(value[0]),value[1]&&moment(value[1])] : undefined
|
||||||
|
};
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<RangePicker disabled={mode==='view'} format={'YYYY-MM-DD'} style={{width:'100%'}} allowClear />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
|
||||||
|
</Row>
|
||||||
|
<Row>
|
||||||
|
<Col span={24}>
|
||||||
|
<Form.Item
|
||||||
|
label="验收检查"
|
||||||
|
name="eventsDesc"
|
||||||
|
labelCol={{ span: 3 }}
|
||||||
|
wrapperCol={{ span: 19 }}
|
||||||
|
>
|
||||||
|
<Input.TextArea disabled={mode==='view'} style={{width:'100%',minHeight:'100px'}} allowClear />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row>
|
||||||
|
<Col span={24}>
|
||||||
|
<Form.Item
|
||||||
|
label="质量评估"
|
||||||
|
name="eventsDesc"
|
||||||
|
labelCol={{ span: 3 }}
|
||||||
|
wrapperCol={{ span: 19 }}
|
||||||
|
>
|
||||||
|
<Input.TextArea disabled={mode==='view'} style={{width:'100%',minHeight:'100px'}} allowClear />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row>
|
||||||
|
<Col span={24}>
|
||||||
|
<Form.Item
|
||||||
|
label="预算审核"
|
||||||
|
name="eventsDesc"
|
||||||
|
labelCol={{ span: 3 }}
|
||||||
|
wrapperCol={{ span: 19 }}
|
||||||
|
>
|
||||||
|
<Input.TextArea disabled={mode==='view'} style={{width:'100%',minHeight:'100px'}} allowClear />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row>
|
||||||
|
<Col span={24}>
|
||||||
|
<Form.Item
|
||||||
|
label="备注"
|
||||||
|
name="eventsDesc"
|
||||||
|
labelCol={{ span: 3 }}
|
||||||
|
wrapperCol={{ span: 19 }}
|
||||||
|
>
|
||||||
|
<Input.TextArea disabled={mode==='view'} style={{width:'100%',minHeight:'100px'}} allowClear />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
|
||||||
|
<Row>
|
||||||
|
<Col span={24}>
|
||||||
|
<Form.Item
|
||||||
|
label="成果归档"
|
||||||
|
name="fieldId"
|
||||||
|
labelCol={{ span: 3 }}
|
||||||
|
wrapperCol={{ span: 19 }}
|
||||||
|
>
|
||||||
|
<FileUpload
|
||||||
|
mode={mode}
|
||||||
|
files={record?.files}
|
||||||
|
setFileIds={setFileIds}
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
{
|
||||||
|
mode==='view'?null:(
|
||||||
|
<>
|
||||||
|
<Form.Item {...btnItemLayout}>
|
||||||
|
<Button type="primary" htmlType="submit">
|
||||||
|
{mode === 'save' ? '提交' : '修改'}
|
||||||
|
</Button>
|
||||||
|
</Form.Item>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</Form>
|
||||||
|
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ModalForm;
|
||||||
|
|
@ -0,0 +1,102 @@
|
||||||
|
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 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';
|
||||||
|
|
||||||
|
const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
|
||||||
|
const Page = () => {
|
||||||
|
const types = {
|
||||||
|
0: "设备维修",
|
||||||
|
1: '设备更换',
|
||||||
|
2:"结构加固"
|
||||||
|
}
|
||||||
|
const refModal = useRef();
|
||||||
|
const [searchVal, setSearchVal] = useState(false)
|
||||||
|
const columns = [
|
||||||
|
{ title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align:"center" },
|
||||||
|
{ title: '项目名称', key: 'name', dataIndex: 'name', width: 150, ellipsis: true },
|
||||||
|
{ title: '验收时间', key: 'adress', dataIndex: 'adress', width: 200, ellipsis: true },
|
||||||
|
{ title: '记录人', key: 'type', dataIndex: 'type', width: 140,},
|
||||||
|
{
|
||||||
|
title: '记录时间', key: 'eventsDate', dataIndex: 'eventsDate', width: 140,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作', key: 'operation', width: 200, fixed: 'right',align: 'center',
|
||||||
|
render: (value, row, index) => (
|
||||||
|
<CrudOpRender_text
|
||||||
|
edit={ true }
|
||||||
|
del={ true }
|
||||||
|
view={ true }
|
||||||
|
command={(cmd) => () => command(cmd)(row)} />)
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
|
||||||
|
const width = useMemo(() => columns.reduce((total, cur) => total + (cur.width), 0), [columns]);
|
||||||
|
|
||||||
|
const command = (type) => (params) => {
|
||||||
|
if (type === 'save') {
|
||||||
|
refModal.current.showSave();
|
||||||
|
} else if (type === 'edit') {
|
||||||
|
refModal.current.showEdit({ ...params });
|
||||||
|
} else if (type === 'view') {
|
||||||
|
refModal.current.showView(params);
|
||||||
|
} else if (type === 'del') {
|
||||||
|
refModal.current.onDeleteGet(apiurl.rcgl.gcdsj.delete + `/${params.id}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.sbwh.whfabz.page).find_noCode);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description 处理成功的回调
|
||||||
|
*/
|
||||||
|
const successCallback = () => {
|
||||||
|
refresh()
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(()=>{
|
||||||
|
const params = {
|
||||||
|
search: {
|
||||||
|
...searchVal,
|
||||||
|
}
|
||||||
|
};
|
||||||
|
search(params)
|
||||||
|
}, [searchVal])
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className='content-root clearFloat xybm' style={{paddingRight:"0",paddingBottom:"0"}}>
|
||||||
|
<div className='lf CrudAdcdTreeTableBox' style={{width:"100%",overflowY:"auto"}}>
|
||||||
|
<Card className='nonebox'>
|
||||||
|
<ToolBar
|
||||||
|
setSearchVal={setSearchVal}
|
||||||
|
onSave={command('save')}
|
||||||
|
/>
|
||||||
|
</Card>
|
||||||
|
<div className="ant-card-body" style={{ padding: "20px 0 0 0" }}>
|
||||||
|
<Table columns={columns} rowKey="inx" {...tableProps} scroll={{ x: width , y: "calc( 100vh - 400px )"}}/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<BasicCrudModal
|
||||||
|
width={1000}
|
||||||
|
ref={refModal}
|
||||||
|
title="验收记录"
|
||||||
|
component={ModalForm}
|
||||||
|
onCrudSuccess={successCallback}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Page;
|
||||||
|
|
@ -0,0 +1,72 @@
|
||||||
|
import React, { useEffect,useState } from 'react';
|
||||||
|
import { Form, Input, Button, DatePicker } from 'antd';
|
||||||
|
import NormalSelect from '../../../components/Form/NormalSelect';
|
||||||
|
|
||||||
|
import moment from 'moment';
|
||||||
|
const { RangePicker } = DatePicker;
|
||||||
|
const ToolBar = ({ setSearchVal, onSave, storeData, role }) => {
|
||||||
|
|
||||||
|
const types = [
|
||||||
|
{
|
||||||
|
label: "设备维修",
|
||||||
|
value: 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "设备更换",
|
||||||
|
value: 1
|
||||||
|
},{
|
||||||
|
label: "结构加固",
|
||||||
|
value: 2
|
||||||
|
},
|
||||||
|
]
|
||||||
|
const [form] = Form.useForm();
|
||||||
|
|
||||||
|
const onFinish = (values) => {
|
||||||
|
let dateSo;
|
||||||
|
if (values.tm) {
|
||||||
|
dateSo = {
|
||||||
|
start: moment(values.tm[0]).format('YYYY-MM-DD HH:mm:ss'),
|
||||||
|
end: moment(values.tm[1]).format('YYYY-MM-DD HH:mm:ss')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
delete values.tm
|
||||||
|
setSearchVal({...values, dateSo});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div style={{display:'flex',justifyContent:'space-between'}}>
|
||||||
|
<Form form={form} className='toolbarBox' layout="inline" onFinish={onFinish}>
|
||||||
|
<Form.Item label="项目名称" name="name">
|
||||||
|
<Input allowClear style={{width:'150px'}}/>
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item label="记录时间" name="tm">
|
||||||
|
<RangePicker
|
||||||
|
allowClear
|
||||||
|
showTime
|
||||||
|
style={{ width: "300px" }}
|
||||||
|
format="YYYY-MM-DD HH:mm:ss"
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item>
|
||||||
|
<Button type="primary" htmlType="submit">查询</Button>
|
||||||
|
</Form.Item>
|
||||||
|
|
||||||
|
<Form.Item>
|
||||||
|
<Button onClick={() => form.resetFields()}>重置</Button>
|
||||||
|
</Form.Item>
|
||||||
|
{
|
||||||
|
(onSave) ?
|
||||||
|
<Form.Item>
|
||||||
|
<Button onClick={onSave}>新增</Button>
|
||||||
|
</Form.Item>
|
||||||
|
:null
|
||||||
|
}
|
||||||
|
</Form>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ToolBar;
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
export default function Jcsj() {
|
||||||
|
return (
|
||||||
|
<div>index</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,83 @@
|
||||||
|
import React, { Fragment, useRef, useMemo,useEffect,useState } from 'react';
|
||||||
|
import { Table, Card, Modal, Form, Input, Button, Row,Col, Timeline, message, Tabs,Image } from 'antd';
|
||||||
|
import ToolBar from './toolbar';
|
||||||
|
import apiurl from '../../../../service/apiurl';
|
||||||
|
import usePageTable from '../../../../components/crud/usePageTable2';
|
||||||
|
import { createCrudService } from '../../../../components/crud/_';
|
||||||
|
import { httppost5 } from '../../../../utils/request';
|
||||||
|
import { exportFile } from '../../../../utils/tools.js';
|
||||||
|
const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
|
||||||
|
const Page = () => {
|
||||||
|
const types = {
|
||||||
|
0: "闸后流量",
|
||||||
|
1: '闸前水位',
|
||||||
|
2:'闸后水位'
|
||||||
|
}
|
||||||
|
const types1 = {
|
||||||
|
0: "报警中",
|
||||||
|
1: '已解除',
|
||||||
|
}
|
||||||
|
const [searchVal, setSearchVal] = useState(false)
|
||||||
|
const columns = [
|
||||||
|
{ title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align:"center" },
|
||||||
|
{
|
||||||
|
title: '监测项目', key: 'name', dataIndex: 'name', width: 150,
|
||||||
|
render: (v) => <span>{types[v]}</span>
|
||||||
|
},
|
||||||
|
{ title: '监测值', key: 'adress', dataIndex: 'adress', width: 150},
|
||||||
|
{ title: '阈值下限', key: 'adress', dataIndex: 'adress', width: 150},
|
||||||
|
{ title: '阈值上限', key: 'adress', dataIndex: 'adress', width: 150},
|
||||||
|
{
|
||||||
|
title: '状态', key: 'adress', dataIndex: 'adress', width: 150,
|
||||||
|
render: (v) => <span>{types[v]}</span>
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '报警时间', key: 'eventsDate', dataIndex: 'eventsDate', width: 140,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '持续时长', key: 'eventsDate', dataIndex: 'eventsDate', 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.pxjh.export, params).then(res => {
|
||||||
|
exportFile(`统计报表.xlsx`,res.data)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
useEffect(() => {
|
||||||
|
const params = {
|
||||||
|
search: {
|
||||||
|
...searchVal,
|
||||||
|
}
|
||||||
|
};
|
||||||
|
search(params)
|
||||||
|
}, [searchVal])
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className='content-root clearFloat xybm' style={{paddingRight:"0",paddingBottom:"0"}}>
|
||||||
|
<div className='lf CrudAdcdTreeTableBox' style={{width:"100%",overflowY:"auto"}}>
|
||||||
|
<Card className='nonebox'>
|
||||||
|
<ToolBar
|
||||||
|
setSearchVal={setSearchVal}
|
||||||
|
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 )"}}/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Page;
|
||||||
|
|
@ -0,0 +1,83 @@
|
||||||
|
import React, { useEffect,useState } from 'react';
|
||||||
|
import { Form, Input, Button, DatePicker } from 'antd';
|
||||||
|
import NormalSelect from '../../../../components/Form/NormalSelect';
|
||||||
|
|
||||||
|
import moment from 'moment';
|
||||||
|
const { RangePicker } = DatePicker;
|
||||||
|
const ToolBar = ({ setSearchVal, onSave, storeData, exportFile1 }) => {
|
||||||
|
|
||||||
|
const types = [
|
||||||
|
{
|
||||||
|
label: "闸后流量",
|
||||||
|
value: 0,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "闸前水位",
|
||||||
|
value: 1,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "闸后水位",
|
||||||
|
value: 2,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
const types1 = [
|
||||||
|
{
|
||||||
|
label: "报警中",
|
||||||
|
value: 0,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "已解除",
|
||||||
|
value: 1,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
const [form] = Form.useForm();
|
||||||
|
|
||||||
|
const onFinish = (values) => {
|
||||||
|
let dateSo;
|
||||||
|
if (values.tm) {
|
||||||
|
dateSo = {
|
||||||
|
start: moment(values.tm[0]).format('YYYY-MM-DD HH:mm:ss'),
|
||||||
|
end: moment(values.tm[1]).format('YYYY-MM-DD HH:mm:ss')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
delete values.tm
|
||||||
|
setSearchVal({...values, dateSo});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div style={{display:'flex',justifyContent:'space-between'}}>
|
||||||
|
<Form form={form} className='toolbarBox' layout="inline" onFinish={onFinish}>
|
||||||
|
<Form.Item label="监测项目" name="type">
|
||||||
|
<NormalSelect allowClear style={{ width: '150px' }} options={types} />
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item label="报警时间" name="tm">
|
||||||
|
<RangePicker
|
||||||
|
allowClear
|
||||||
|
showTime
|
||||||
|
style={{ width: "300px" }}
|
||||||
|
format="YYYY-MM-DD HH:mm:ss"
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item label="状态" name="status">
|
||||||
|
<NormalSelect allowClear style={{ width: '150px' }} options={types1} />
|
||||||
|
</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>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ToolBar;
|
||||||
|
|
@ -0,0 +1,108 @@
|
||||||
|
import React,{useEffect,useState,useMemo,useRef} from 'react';
|
||||||
|
import { Form, Button, Input, Row,Upload, Col, Table, DatePicker, InputNumber,message,Image,Modal,Typography ,Popconfirm } from 'antd';
|
||||||
|
import { formItemLayout, btnItemLayout } from '../../../../components/crud/FormLayoutProps';
|
||||||
|
import apiurl from '../../../../service/apiurl';
|
||||||
|
import NormalSelect from '../../../../components/Form/NormalSelect';
|
||||||
|
|
||||||
|
import "./index.less"
|
||||||
|
import moment from 'moment';
|
||||||
|
const { RangePicker } = DatePicker
|
||||||
|
const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
|
||||||
|
|
||||||
|
const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
||||||
|
const types = [
|
||||||
|
{
|
||||||
|
label: "闸后流量",
|
||||||
|
value: 0,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "闸前水位",
|
||||||
|
value: 1,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "闸后水位",
|
||||||
|
value: 2,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "雨量",
|
||||||
|
value: 3,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
const [form] = Form.useForm();
|
||||||
|
const onfinish = (values) => {
|
||||||
|
values.eventsDate = values.eventsDate?moment(values.eventsDate).format("YYYY-MM-DD 00:00:00"):''
|
||||||
|
if (mode === 'edit') {
|
||||||
|
values.id = record.id;
|
||||||
|
onEdit(apiurl.rcgl.gcdsj.edit,values)
|
||||||
|
}
|
||||||
|
if (mode === 'save') {
|
||||||
|
onSave(apiurl.rcgl.gcdsj.save,values)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Form
|
||||||
|
form={form}
|
||||||
|
{...formItemLayout}
|
||||||
|
onFinish={onfinish}
|
||||||
|
initialValues={record}
|
||||||
|
>
|
||||||
|
<Row>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
label="监测项目"
|
||||||
|
name="name"
|
||||||
|
rules={[{ required: true }]}
|
||||||
|
>
|
||||||
|
<NormalSelect allowClear style={{ width: '100%' }} options={types} />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
label="阈值下限"
|
||||||
|
name="name"
|
||||||
|
rules={[{ required: true }]}
|
||||||
|
>
|
||||||
|
<InputNumber disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
|
||||||
|
</Row>
|
||||||
|
<Row>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
label="阈值上限"
|
||||||
|
name="adress"
|
||||||
|
rules={[{ required: true }]}
|
||||||
|
>
|
||||||
|
<InputNumber disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
label="备注"
|
||||||
|
name="remark"
|
||||||
|
>
|
||||||
|
<Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
{
|
||||||
|
mode==='view'?null:(
|
||||||
|
<>
|
||||||
|
<Form.Item {...btnItemLayout}>
|
||||||
|
<Button type="primary" htmlType="submit">
|
||||||
|
{mode === 'save' ? '提交' : '修改'}
|
||||||
|
</Button>
|
||||||
|
</Form.Item>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</Form>
|
||||||
|
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ModalForm;
|
||||||
|
|
@ -0,0 +1,110 @@
|
||||||
|
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 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';
|
||||||
|
|
||||||
|
const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
|
||||||
|
const Page = () => {
|
||||||
|
const types = {
|
||||||
|
0: "设备维修",
|
||||||
|
1: '设备更换',
|
||||||
|
2:"结构加固"
|
||||||
|
}
|
||||||
|
const refModal = useRef();
|
||||||
|
const [searchVal, setSearchVal] = useState(false)
|
||||||
|
const columns = [
|
||||||
|
{ title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align:"center" },
|
||||||
|
|
||||||
|
{
|
||||||
|
title: '监测项目', key: 'name', dataIndex: 'name', width: 150,
|
||||||
|
render: (v) => <span>{types[v]}</span>
|
||||||
|
},
|
||||||
|
{ title: '监测值', key: 'adress', dataIndex: 'adress', width: 150},
|
||||||
|
{ title: '阈值下限', key: 'adress', dataIndex: 'adress', width: 150},
|
||||||
|
{ title: '阈值上限', key: 'adress', dataIndex: 'adress', width: 150},
|
||||||
|
{ title: '是否启用', key: 'adress', dataIndex: 'adress', width: 150},
|
||||||
|
{
|
||||||
|
title: '配置时间', key: 'adress', dataIndex: 'adress', width: 150,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '最近报警时间', key: 'eventsDate', dataIndex: 'eventsDate', width: 140,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作', key: 'operation', width: 200, fixed: 'right',align: 'center',
|
||||||
|
render: (value, row, index) => (
|
||||||
|
<CrudOpRender_text
|
||||||
|
edit={ true }
|
||||||
|
del={ true }
|
||||||
|
command={(cmd) => () => command(cmd)(row)} />)
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
|
||||||
|
const width = useMemo(() => columns.reduce((total, cur) => total + (cur.width), 0), [columns]);
|
||||||
|
|
||||||
|
const command = (type) => (params) => {
|
||||||
|
if (type === 'save') {
|
||||||
|
refModal.current.showSave();
|
||||||
|
} else if (type === 'edit') {
|
||||||
|
refModal.current.showEdit({ ...params });
|
||||||
|
} else if (type === 'view') {
|
||||||
|
refModal.current.showView(params);
|
||||||
|
} else if (type === 'del') {
|
||||||
|
refModal.current.onDeleteGet(apiurl.rcgl.gcdsj.delete + `/${params.id}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.sbwh.whfabz.page).find_noCode);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description 处理成功的回调
|
||||||
|
*/
|
||||||
|
const successCallback = () => {
|
||||||
|
refresh()
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(()=>{
|
||||||
|
const params = {
|
||||||
|
search: {
|
||||||
|
...searchVal,
|
||||||
|
}
|
||||||
|
};
|
||||||
|
search(params)
|
||||||
|
}, [searchVal])
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className='content-root clearFloat xybm' style={{paddingRight:"0",paddingBottom:"0"}}>
|
||||||
|
<div className='lf CrudAdcdTreeTableBox' style={{width:"100%",overflowY:"auto"}}>
|
||||||
|
<Card className='nonebox'>
|
||||||
|
<ToolBar
|
||||||
|
setSearchVal={setSearchVal}
|
||||||
|
onSave={command('save')}
|
||||||
|
/>
|
||||||
|
</Card>
|
||||||
|
<div className="ant-card-body" style={{ padding: "20px 0 0 0" }}>
|
||||||
|
<Table columns={columns} rowKey="inx" {...tableProps} scroll={{ x: width , y: "calc( 100vh - 400px )"}}/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<BasicCrudModal
|
||||||
|
width={1000}
|
||||||
|
ref={refModal}
|
||||||
|
title="报警规则"
|
||||||
|
component={ModalForm}
|
||||||
|
onCrudSuccess={successCallback}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Page;
|
||||||
|
|
@ -0,0 +1,65 @@
|
||||||
|
import React, { useEffect,useState } from 'react';
|
||||||
|
import { Form, Input, Button, DatePicker } from 'antd';
|
||||||
|
import NormalSelect from '../../../../components/Form/NormalSelect';
|
||||||
|
|
||||||
|
import moment from 'moment';
|
||||||
|
const { RangePicker } = DatePicker;
|
||||||
|
const ToolBar = ({ setSearchVal, onSave, storeData, role }) => {
|
||||||
|
|
||||||
|
const types = [
|
||||||
|
{
|
||||||
|
label: "闸后流量",
|
||||||
|
value: 0,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "闸前水位",
|
||||||
|
value: 1,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "闸后水位",
|
||||||
|
value: 2,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
const [form] = Form.useForm();
|
||||||
|
|
||||||
|
const onFinish = (values) => {
|
||||||
|
let dateSo;
|
||||||
|
if (values.tm) {
|
||||||
|
dateSo = {
|
||||||
|
start: moment(values.tm[0]).format('YYYY-MM-DD HH:mm:ss'),
|
||||||
|
end: moment(values.tm[1]).format('YYYY-MM-DD HH:mm:ss')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
delete values.tm
|
||||||
|
setSearchVal({...values, dateSo});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div style={{display:'flex',justifyContent:'space-between'}}>
|
||||||
|
<Form form={form} className='toolbarBox' layout="inline" onFinish={onFinish}>
|
||||||
|
<Form.Item label="监测点" name="type">
|
||||||
|
<NormalSelect allowClear style={{ width: '150px' }} options={types} />
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item>
|
||||||
|
<Button type="primary" htmlType="submit">查询</Button>
|
||||||
|
</Form.Item>
|
||||||
|
|
||||||
|
<Form.Item>
|
||||||
|
<Button onClick={() => form.resetFields()}>重置</Button>
|
||||||
|
</Form.Item>
|
||||||
|
{
|
||||||
|
(onSave) ?
|
||||||
|
<Form.Item>
|
||||||
|
<Button onClick={onSave}>新增</Button>
|
||||||
|
</Form.Item>
|
||||||
|
:null
|
||||||
|
}
|
||||||
|
</Form>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ToolBar;
|
||||||
Loading…
Reference in New Issue