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 [
|
||||
{ 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: [
|
||||
{
|
||||
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/sbwh/wxyhgl/wxfabz', icon: 'sz',
|
||||
id: id(), title: '设备维护', redirect: '/mgr/sbwh/wxyhgl/wxfabz', icon: 'sz',
|
||||
children: [
|
||||
{
|
||||
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',
|
||||
children: [
|
||||
{ id: id(), title: '采购台账管理', path: '/mgr/sbwh/sbwzgl/cgtzgl' },
|
||||
{ id: id(), title: '库存核算管理', path: '/mgr/jcsj/bjgl/kchsgl' },
|
||||
{ id: id(), title: '备品备件管理', path: '/mgr/jcsj/bjgl/bpbjgl' },
|
||||
{ id: id(), title: '综合分析考核', path: '/mgr/jcsj/bjgl/zhfxkh' },
|
||||
{ id: id(), title: '库存核算管理', path: '/mgr/sbwh/sbwzgl/kchsgl' },
|
||||
{ id: id(), title: '备品备件管理', path: '/mgr/sbwh/sbwzgl/bpbjgl' },
|
||||
{ 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: [
|
||||
{
|
||||
id: id(), title: '信息查询', redirect: '/mgr/gcyx/xxcx/jbqk',
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { config } from '../config'
|
||||
|
||||
|
||||
const service_fxdd = '/gunshiApp/tsg'
|
||||
const service_xyt = '/gunshiApp/tsg'//登陆先用小玉潭
|
||||
|
|
@ -11,7 +11,14 @@ const apiurl = {
|
|||
router: service_xyt + '/getRouters',
|
||||
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 { Dispatch } from '../models/store'
|
||||
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'))
|
||||
|
|
@ -28,9 +38,22 @@ const AppRouters: React.FC = () => {
|
|||
element: <DashboardLayout />,
|
||||
children: [
|
||||
{ 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 /> },
|
||||
|
|
|
|||
|
|
@ -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