Merge branch 'master' of http://10.0.41.100:3000/lishenfeng/tsg-web
xielei
commit
7dc9e7d805
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
|
|
@ -418,7 +418,23 @@ export async function loadMenu(): Promise<MenuItem[]> {
|
|||
},
|
||||
],
|
||||
},
|
||||
|
||||
{
|
||||
id: id(), title: '水资源调度', redirect: '/mgr/szydd/gsnlfx', icon: 'fxzb',
|
||||
children: [
|
||||
{
|
||||
id: id(), title: '供水能力分析', path: '/mgr/szydd/gsnlfx',
|
||||
},
|
||||
{
|
||||
id: id(), title: '调度记录', path: '/mgr/szydd/diaodu',
|
||||
},
|
||||
{
|
||||
id: id(), title: '供水统计分析', path: '/mgr/szydd/gstjfx',
|
||||
},
|
||||
{
|
||||
id: id(), title: '典型年降雨资料', path: '/mgr/szydd/dxnjyzl',
|
||||
},
|
||||
]
|
||||
},
|
||||
|
||||
|
||||
// { id: id(), title: '基本情况', path: '/mgr/home', icon: 'jbqk' },
|
||||
|
|
|
|||
|
|
@ -434,6 +434,7 @@ const apiurl = {
|
|||
},
|
||||
// 供水兴利
|
||||
gsxl: {
|
||||
gsWater:service_fxdd + "/gateValveReal/predict/water",
|
||||
dxnjyzl: {
|
||||
page: service_fxdd + '/tyYearRainfall/page',
|
||||
edit: service_fxdd + '/tyYearRainfall/update',
|
||||
|
|
@ -921,6 +922,7 @@ const apiurl = {
|
|||
|
||||
// 水库弹框详情
|
||||
reservoirmonitor: service_fxdd + '/reservoir/water/monitor/data', //图像监测-列表
|
||||
reservoirmonitor1: service_fxdd + '/reservoir/water/data/page', //图像监测-列表
|
||||
|
||||
// 水库基础信息
|
||||
attResBase: service_fxdd + '/attResBase/attResBase', //基本信息
|
||||
|
|
@ -1138,6 +1140,14 @@ const apiurl = {
|
|||
upload:service_fxdd + '/SzRegulatoryFramework/file/upload/singleSimple',
|
||||
download:service_fxdd + '/SzRegulatoryFramework/file/download/',
|
||||
list:service_fxdd + '/SzRegulatoryFramework/page'
|
||||
},
|
||||
|
||||
ddjl:{
|
||||
page: service_fxdd + '/dispatchRecord/page',
|
||||
save: service_fxdd + '/dispatchRecord/insert',
|
||||
edit: service_fxdd + '/dispatchRecord/update',
|
||||
del: service_fxdd + '/dispatchRecord/del',
|
||||
export: service_fxdd + '/dispatchRecord/export',
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -110,6 +110,8 @@ import Ajtj from './sz/szzf/ajtj'
|
|||
import Clyj from './sz/szzf/clyj'
|
||||
|
||||
import Krgl from './KrLine'
|
||||
import Gsnlfx from './gxsl/gsnlfx'
|
||||
import Ddjl from './szydd/ddjl'
|
||||
|
||||
|
||||
|
||||
|
|
@ -222,8 +224,11 @@ const AppRouters: React.FC = () => {
|
|||
// 供水兴利
|
||||
{ path: 'gsxl/zfzl', element: <Zfzl /> },
|
||||
{ path: 'gsxl/zfjk', element: <Zfjk /> },
|
||||
{ path: 'gsxl/gstjfx', element: <Gstjfx /> },
|
||||
{ path: 'gsxl/dxnjyzl', element: <Dxnjyzl /> },
|
||||
|
||||
{ path: 'szydd/diaodu', element: <Ddjl/> },
|
||||
{ path: 'szydd/gsnlfx', element: <Gsnlfx /> },
|
||||
{ path: 'szydd/gstjfx', element: <Gstjfx /> },
|
||||
{ path: 'szydd/dxnjyzl', element: <Dxnjyzl /> },
|
||||
|
||||
{ path: 'fxzb/jczw/yqz', element: <HomePage /> },
|
||||
{ path: 'fxzb/jczw/sqz', element: <HomePage /> },
|
||||
|
|
|
|||
|
|
@ -203,7 +203,7 @@ const ModalForm = ({ mode, record,onEdit,onSave,onCrudSuccess }) => {
|
|||
{mode == "view" ? null :
|
||||
<div style={{display:"flex",alignItems:"center",columnGap:10,color:"#4f85ec",cursor:"pointer"}}>
|
||||
<PaperClipOutlined />
|
||||
<a style={{ cursor: "pointer" }}>上传PDF文件
|
||||
<a style={{ cursor: "pointer" }}>上传附件
|
||||
<span style={{ marginLeft:10,color:"#dfdfdf" }}>(支持扩展名：.xls .xlsx .doc .docx .pdf .jpg .png)</span></a>
|
||||
</div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -203,7 +203,7 @@ const ModalForm = ({ mode, record,onEdit,onSave,onCrudSuccess }) => {
|
|||
{mode == "view" ? null :
|
||||
<div style={{display:"flex",alignItems:"center",columnGap:10,color:"#4f85ec",cursor:"pointer"}}>
|
||||
<PaperClipOutlined />
|
||||
<a style={{ cursor: "pointer" }}>上传PDF文件
|
||||
<a style={{ cursor: "pointer" }}>上传附件
|
||||
<span style={{ marginLeft:10,color:"#dfdfdf" }}>(支持扩展名：.xls .xlsx .doc .docx .pdf .jpg .png)</span></a>
|
||||
</div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -74,6 +74,7 @@ const Page = () => {
|
|||
tm:c.tm
|
||||
})))
|
||||
return {
|
||||
drp:s.drp,
|
||||
tm: s.tm,
|
||||
rz: s.rz,
|
||||
inx:i+1
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ const Page = () => {
|
|||
const columns4 = [
|
||||
{
|
||||
title: '降雨量(mm)', key: 'drp', dataIndex: 'drp', width: 120, align: "center",
|
||||
render: (rec, record) => <span>{ rec ?? "-"}</span>
|
||||
render: (rec, record) => <span>{ record?.drp ?? "-"}</span>
|
||||
},
|
||||
];
|
||||
const getDmTree = async() => {
|
||||
|
|
@ -76,6 +76,7 @@ const Page = () => {
|
|||
tm:c.tm
|
||||
})))
|
||||
return {
|
||||
drp:s.drp,
|
||||
tm: s.tm,
|
||||
rz: s.rz,
|
||||
inx:i+1
|
||||
|
|
|
|||
|
|
@ -11,9 +11,9 @@ import {CrudOpRender_text} from '../../../components/crud/CrudOpRender';
|
|||
|
||||
const Page = () => {
|
||||
const role = useSelector(state => state.auth.role);
|
||||
const editBtn = role?.rule?.find(item => item.menuName == "编辑");
|
||||
const viewBtn = role?.rule?.find(item => item.menuName == "查看");
|
||||
const delBtn = role?.rule?.find(item => item.menuName == "删除");
|
||||
const editBtn = role?.rule?.find(item => item.menuName == "编辑") || true;
|
||||
const viewBtn = role?.rule?.find(item => item.menuName == "查看") || true;
|
||||
const delBtn = role?.rule?.find(item => item.menuName == "删除") || true;
|
||||
const expandedRowRender = (record) => {
|
||||
const columns = [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@ import NormalSelect from '../../../components/Form/NormalSelect';
|
|||
import moment from 'moment';
|
||||
const { RangePicker } = DatePicker;
|
||||
const ToolBar = ({ setSearchVal, onSave, storeData, role }) => {
|
||||
const addBtn = role?.rule?.find(item => item.menuName == "新增");
|
||||
const searchBtn = role?.rule?.find(item => item.menuName == "查询");
|
||||
const addBtn = role?.rule?.find(item => item.menuName == "新增") || true;
|
||||
const searchBtn = role?.rule?.find(item => item.menuName == "查询") || true;
|
||||
const [form] = Form.useForm();
|
||||
const types = [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -0,0 +1,100 @@
|
|||
import React,{useEffect,useMemo,useState} from 'react'
|
||||
import { Button, DatePicker, Table } from 'antd';
|
||||
import { createCrudService } from '../../../components/crud/_';
|
||||
import usePageTable from '../../../components/crud/usePageTable2';
|
||||
import moment from 'moment';
|
||||
import apiurl from '../../../service/apiurl';
|
||||
import {reservoirmonitor} from '../../../service/sssq'
|
||||
import ReactEcharts from 'echarts-for-react';
|
||||
import drpOption from './drpOption';
|
||||
const {RangePicker} = DatePicker;
|
||||
export default function KrLine({ record }) {
|
||||
const tm = [
|
||||
moment().subtract(7, 'days').add(1, 'hour').set({ minute: 0, second: 0 }),
|
||||
moment().add(1, 'hour').set({ minute: 0, second: 0 }),
|
||||
];
|
||||
const stm = moment().subtract(7, 'days').add(1, 'hour').set({ minute: 0, second: 0 }).format("YYYY-MM-DD HH:mm:ss");
|
||||
const etm = moment().add(1, 'hour').set({ minute: 0, second: 0 }).format("YYYY-MM-DD HH:mm:ss");
|
||||
const columns = [
|
||||
{title: '时间', key: '', dataIndex: '', align: 'center',render:(rec)=>moment(rec.tm).format('MM-DD HH:mm')},
|
||||
{
|
||||
title: '水位(m)', key: 'rz', dataIndex: 'rz', align: 'center',
|
||||
render: (rec) => <span>{rec ? rec.toFixed(2) : "-"}</span>},
|
||||
{
|
||||
title: '库容(万m³)', key: 'w', dataIndex: 'w', align: 'center',
|
||||
render: (rec) => <span>{rec ??"-"}</span>,
|
||||
},
|
||||
];
|
||||
const [data, setData] = useState([]);
|
||||
const [params, setParams] = useState({})
|
||||
const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.sssq.reservoirmonitor1).find_noCode);
|
||||
const option = useMemo(() => {
|
||||
return drpOption({data});
|
||||
}, [data])
|
||||
const searchTm = (e) => {
|
||||
setParams({
|
||||
...params,
|
||||
stm: e[0].format("YYYY-MM-DD HH:mm:ss"),
|
||||
etm: e[1].format("YYYY-MM-DD HH:mm:ss"),
|
||||
tm:e,
|
||||
})
|
||||
};
|
||||
|
||||
const doSearch = () => {
|
||||
search({ search: params })
|
||||
getData(params)
|
||||
}
|
||||
|
||||
|
||||
const getData = async (params) => {
|
||||
setData(await reservoirmonitor(params));
|
||||
}
|
||||
useEffect(() => {
|
||||
const params = {
|
||||
search: {
|
||||
stm,
|
||||
etm
|
||||
}
|
||||
}
|
||||
if (record?.stcd) {
|
||||
search(params)
|
||||
getData({stcd:record.stcd,...params.search})
|
||||
setParams({tm,stcd:record.stcd})
|
||||
}
|
||||
}, [record])
|
||||
return (
|
||||
<div>
|
||||
<div className="top-toobar" style={{marginBottom:20,width:"100%"}}>
|
||||
<RangePicker showTime allowClear style={{width: "330px"}}
|
||||
onChange={searchTm}
|
||||
format="YYYY-MM-DD HH:mm"
|
||||
value={params.tm}
|
||||
/>
|
||||
<Button type="primary" onClick={doSearch} style={{marginLeft: "10px"}}>查询</Button>
|
||||
<Button onClick={()=>setParams({...params,tm,stm,etm})} style={{marginLeft: "10px"}}>重置</Button>
|
||||
</div>
|
||||
<div style={{width:"100%"}}>
|
||||
|
||||
<Table
|
||||
columns={columns}
|
||||
rowKey="inx"
|
||||
{...tableProps}
|
||||
scroll={{ y: "calc( 100vh - 700px )" }}
|
||||
style={{height:"calc( 100vh - 650px )"}}
|
||||
/>
|
||||
<div className="top-right" style={{height:"40vh",marginTop:40}}>
|
||||
{
|
||||
data.length > 0 ?
|
||||
<ReactEcharts
|
||||
option={option}
|
||||
style={{width: "100%", height: '100%'}}
|
||||
/> : <div style={{textAlign: "center", margin: "10%"}}>
|
||||
<img src={`${process.env.PUBLIC_URL}/assets/noData.png`} alt=""/>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,130 @@
|
|||
import echarts from 'echarts/lib/echarts'
|
||||
|
||||
export default function drpOption ({
|
||||
data,
|
||||
}) {
|
||||
const maxVal = Math.max(...data.map(obj => obj.drp))
|
||||
// const minVal = Math.min(...data.map(obj => obj.drp))
|
||||
const maxSw = Math.ceil(Math.max(...data.map(obj => obj.rz)))
|
||||
const minSw = Math.floor(Math.min(...data.map(obj => obj.rz)))
|
||||
const maxKr = Math.max(...data.map(obj => obj.w))
|
||||
const minKr = Math.min(...data.map(obj => obj.w))
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
grid: {
|
||||
top: '18%',
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
width: '90%',
|
||||
height: '70%'
|
||||
},
|
||||
legend: {
|
||||
// 显示图例
|
||||
show: true,
|
||||
left:60
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: data.map(o => o.tm),
|
||||
inverse: true,
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#333',
|
||||
fontSize: 12,
|
||||
formatter: val => val.substr('2020-'.length, 11)
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#07a6ff',
|
||||
width: 0.5
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
position: 'left',
|
||||
name: '水位(m)',
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#07a6ff',
|
||||
width: 0.25,
|
||||
type: 'dotted'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#333',
|
||||
fontSize: 12
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
min: minSw,
|
||||
max: maxSw
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
position: 'right',
|
||||
name: '库容(万m³)',
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#07a6ff',
|
||||
width: 0.25,
|
||||
type: 'dotted'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#333',
|
||||
fontSize: 12
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
min: minKr - 0.1,
|
||||
max: maxKr + 0.1
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
yAxisIndex:0,
|
||||
name: '水位',
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
color: '#0AE0B5',
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
data: data.map(o => o.rz ? o.rz.toFixed(2):null )
|
||||
},
|
||||
{
|
||||
yAxisIndex:1,
|
||||
name: '库容',
|
||||
type: 'line',
|
||||
color: '#007AFD',
|
||||
symbol: 'none',
|
||||
showSymbol: false,
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
data: data.map(o => o.w)
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,236 @@
|
|||
|
||||
import React, { useEffect, useState,useMemo } from 'react'
|
||||
import { Button ,Modal,Form,Row,Col} from "antd"
|
||||
import { reservoirlist, } from "../../../service/sssq";
|
||||
import apiurl from '../../../service/apiurl';
|
||||
import MyImg from '../../Home/MapCtrl/components/Skssjc/myImg'
|
||||
import { httppost2, httpget2, httppost5 } from '../../../utils/request';
|
||||
import NormalSelect from '../../../components/Form/NormalSelect';
|
||||
import moment from 'moment';
|
||||
import KrLine from './KrLine';
|
||||
import "./index.less"
|
||||
export default function Gsnlfx() {
|
||||
const month = moment().month() + 1;
|
||||
const optionsType = Array(12 - month + 1).fill(0).map((item,i) => ({label: (i + month) + "月",value: i + month}))
|
||||
const typeObj = {
|
||||
1: "枯 ",
|
||||
2: "偏枯 ",
|
||||
3: "平",
|
||||
4: "偏丰",
|
||||
5:"丰"
|
||||
}
|
||||
const [form] = Form.useForm()
|
||||
const [tableData, setTableData] = useState([])
|
||||
const [ssgData, setSsGData] = useState({}) //输水管数据
|
||||
const [gsDays, setGsDays] = useState()
|
||||
const [lslOpen, setLslOpen] = useState(false)
|
||||
const [simailarData, setSimailarData] = useState([])
|
||||
const [lslData, setlslData] = useState(null)
|
||||
|
||||
const getData = async (params) => {
|
||||
setTableData(await reservoirlist(params));
|
||||
}
|
||||
// 相似年下拉
|
||||
const getSimilarData = async() => {
|
||||
try {
|
||||
const res = await httppost2(apiurl.gsxl.zfzl.similar)
|
||||
setSimailarData(res.data.map(item => ({
|
||||
label: item.year + "年" + `(${typeObj[item.status]},${item.drp}mm)`,
|
||||
value:item.year
|
||||
})))
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
// 输水管流量数据
|
||||
const getInputData = async() => {
|
||||
try {
|
||||
const res = await httppost2(apiurl.gsxl.zfzl.input)
|
||||
const ssg = res.data.find(item => item.sttp == "PQ");
|
||||
const fsg = res.data.find(item => item.sttp == "QQ");
|
||||
setSsGData({ssg,fsg})
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
// 获取可供水时间
|
||||
const getWaterTimeData = async(params={}) => {
|
||||
try {
|
||||
const res = await httpget2(apiurl.gsxl.zfzl.kyTime,params)
|
||||
let r = {
|
||||
type: "可供水天数",
|
||||
value: Object.keys(res.data)[0],
|
||||
tm: Object.values(res.data)[0]
|
||||
}
|
||||
setGsDays(r)
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
const providerWater = useMemo(() => {
|
||||
if (tableData[0]?.nowCap && tableData[0]?.deadCap) {
|
||||
let num = ((tableData[0]?.nowCap - tableData[0]?.deadCap) / 10000).toFixed(2)
|
||||
return num
|
||||
} else {
|
||||
return "--"
|
||||
}
|
||||
}, [tableData])
|
||||
|
||||
const generate = () => {
|
||||
setLslOpen(true)
|
||||
}
|
||||
|
||||
const computerResult = async() => {
|
||||
const values = form.getFieldsValue();
|
||||
try {
|
||||
const res = await httpget2(apiurl.gsxl.gsWater, values)
|
||||
if (res.code == 200) {
|
||||
setLslOpen(false);
|
||||
setlslData((res.data / 10000).toFixed(2))
|
||||
getWaterTimeData(values)
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
|
||||
}
|
||||
}
|
||||
useEffect(() => {
|
||||
let option = {
|
||||
sources: ["SW", "SK"],
|
||||
args: "",
|
||||
};
|
||||
getData(option)
|
||||
getInputData()
|
||||
getWaterTimeData()
|
||||
getSimilarData()
|
||||
}, [])
|
||||
return (
|
||||
<div div className='content-root clearFloat xybm' style={{ paddingRight: "0", paddingBottom: "0" }}>
|
||||
<div className="gsnl-content">
|
||||
<div className='content-left'>
|
||||
<div className='gb-top-title'>
|
||||
<span className='gb-top-icon'></span>
|
||||
<span style={{fontSize:18}}>供水能力分析</span>
|
||||
</div>
|
||||
<div className='content-card'>
|
||||
<div className='card-item'>
|
||||
<div className='card-title'>
|
||||
<img alt='' src={`${process.env.PUBLIC_URL}/assets/images/ksw.jpg`} />
|
||||
<span>当前库水位（m）</span>
|
||||
</div>
|
||||
<div className='card-value'>
|
||||
<span className='nl-value'>{tableData[0]?.rz ?? "-"}</span>
|
||||
<span className='nl-time'>（{tableData[0]?.drpTm ?? "--"}）</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className='card-item'>
|
||||
<div className='card-title'>
|
||||
<img alt='' src={`${process.env.PUBLIC_URL}/assets/images/gsl.jpg`} />
|
||||
<span>可供水量（万m³）</span>
|
||||
</div>
|
||||
<div className='card-value'>
|
||||
<span className='nl-value'>{providerWater}</span>
|
||||
<span className='nl-time'>（{tableData[0]?.drpTm ?? "--"}）</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className='card-item'>
|
||||
<div className='card-title'>
|
||||
<img alt='' src={`${process.env.PUBLIC_URL}/assets/images/ggll.jpg`} />
|
||||
<span>灌溉流量（m³/s）</span>
|
||||
</div>
|
||||
<div className='card-value'>
|
||||
<span className='nl-value'>{ssgData?.ssg?.v ?? "--"}</span>
|
||||
<span className='nl-time'>（{ssgData?.ssg?.tm ?? "--"}）</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className='card-item'>
|
||||
<div className='card-title'>
|
||||
<img alt='' src={`${process.env.PUBLIC_URL}/assets/images/scll.jpg`} />
|
||||
<span>水厂流量（m³/s）</span>
|
||||
</div>
|
||||
<div className='card-value'>
|
||||
<span className='nl-value'>{ssgData?.fsg?.v ?? "--"}</span>
|
||||
<span className='nl-time'>（{ssgData?.fsg?.tm ?? "--"}）</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className='card-item'>
|
||||
<div className='card-title'>
|
||||
<img alt='' src={`${process.env.PUBLIC_URL}/assets/images/yclsl.jpg`} />
|
||||
<span>预测来水量（万m³）</span>
|
||||
</div>
|
||||
<div className='yc-content'>
|
||||
<span className='yc-input'>{lslData ?? "预测生成"}</span>
|
||||
<Button
|
||||
type='primary'
|
||||
style={{ width: "30%", marginBottom: 10, marginLeft: "40%" }}
|
||||
onClick={generate}
|
||||
>预测生成</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className='card-item'>
|
||||
<div className='card-title' style={{marginBottom:30}}>
|
||||
<img alt='' src={`${process.env.PUBLIC_URL}/assets/images/gsts.jpg`} />
|
||||
<span>可供水天数（天）</span>
|
||||
</div>
|
||||
<div className='card-value'>
|
||||
<span className='nl-value'>{gsDays?.value ?? "--"}</span>
|
||||
<span className='nl-time'>（{gsDays?.tm ?? "--"}）</span>
|
||||
</div>
|
||||
{/* <div className='yc-content'>
|
||||
<Button type='primary' style={{width:"30%",marginBottom:10,marginLeft:"40%"}}>计算</Button>
|
||||
</div> */}
|
||||
</div>
|
||||
<MyImg record={tableData[0] || {}}/>
|
||||
</div>
|
||||
</div>
|
||||
<div className='content-right'>
|
||||
<div className='gb-top-title'>
|
||||
<span className='gb-top-icon'></span>
|
||||
<span style={{fontSize:18}}>库容过程线</span>
|
||||
</div>
|
||||
<KrLine record={tableData[0] || {}}/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Modal
|
||||
title="预测来水量"
|
||||
open={lslOpen}
|
||||
onCancel={() => setLslOpen(false)}
|
||||
width={500}
|
||||
okText="计算"
|
||||
destroyOnClose
|
||||
onOk={computerResult}
|
||||
>
|
||||
<Form form={form}>
|
||||
<Row>
|
||||
<Col span={24}>
|
||||
<Form.Item
|
||||
label="选择相似年"
|
||||
name="year"
|
||||
rules={[{ required: true }]}
|
||||
wrapperCol={{span:19}}
|
||||
labelCol={{span:6}}
|
||||
>
|
||||
<NormalSelect options={simailarData} allowClear/>
|
||||
</Form.Item >
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col span={24}>
|
||||
<Form.Item
|
||||
label="预测截止月份"
|
||||
name="month"
|
||||
rules={[{ required: true }]}
|
||||
wrapperCol={{span:19}}
|
||||
labelCol={{span:6}}
|
||||
>
|
||||
<NormalSelect options={optionsType} allowClear/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form>
|
||||
</Modal>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
.gb-top-title{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
column-gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
.gb-top-icon{
|
||||
width: 5px;
|
||||
height: 20px;
|
||||
background-color: #0079fe;
|
||||
}
|
||||
}
|
||||
.gsnl-content{
|
||||
display: flex;
|
||||
column-gap: 10px;
|
||||
padding-right:10px;
|
||||
.content-left{
|
||||
width: 700px;
|
||||
padding: 10px;
|
||||
border: 1px solid #dfdfdf;
|
||||
border-radius: 5px;
|
||||
overflow-y: auto;
|
||||
height: calc( 100vh - 100px);
|
||||
.content-card{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
column-gap: 20px;
|
||||
padding-top: 10px;
|
||||
.card-item{
|
||||
width: 325px;
|
||||
border: 1px solid #dfdfdf;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 20px;
|
||||
padding: 10px;
|
||||
padding-bottom: 0;
|
||||
box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.4);
|
||||
.card-title{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
column-gap: 10px;
|
||||
font-size: 18px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.card-value{
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
flex-wrap: nowrap;
|
||||
.nl-value{
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
color:#02a7f0;
|
||||
}
|
||||
.nl-time{
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
img{
|
||||
width: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.yc-content{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.yc-input{
|
||||
display: inline-block;
|
||||
width: 80%;
|
||||
height: 40px;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
background-color: #f0f6ff;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.content-right{
|
||||
width: 850px;
|
||||
border: 1px solid #dfdfdf;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
|
|
@ -86,8 +86,8 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
|||
|
||||
const surveyType = [
|
||||
{label:"日常检查排查",value:1},
|
||||
{label:"定期普查",value:1},
|
||||
{label:"专项调查",value:1},
|
||||
{label:"定期普查",value:2},
|
||||
{label:"专项调查",value:3},
|
||||
]
|
||||
const surveyWay = [
|
||||
{label:"人工排查法",value:1},
|
||||
|
|
|
|||
|
|
@ -0,0 +1,315 @@
|
|||
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 NormalSelect from '../../../components/Form/NormalSelect';
|
||||
|
||||
import "./index.less"
|
||||
import moment from 'moment';
|
||||
const { RangePicker } = DatePicker
|
||||
const { Dragger } = Upload;
|
||||
const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
|
||||
|
||||
|
||||
const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
||||
|
||||
const [form] = Form.useForm();
|
||||
const [fileList, setFileList] = useState([]) //上传文件列表
|
||||
const [fileIds, setFileIds] = useState([])
|
||||
const [iframeSrc, setIframeSrc] = useState('')
|
||||
const [pdfViewOPen, setPdfViewOPen] = useState(false)
|
||||
const [flag,setFlag] = useState(false)
|
||||
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
/**
|
||||
* @description 文件下载
|
||||
* @param {String} params 文件fileId
|
||||
*/
|
||||
const download = (params) => {
|
||||
let downloadLink = document.createElement("a");
|
||||
downloadLink.href = `http://local.gunshiiot.com:18083/gunshiApp/tsg/dispatchRecord/file/download/${params.fileId}`;
|
||||
downloadLink.download = `${params.fileName}`;
|
||||
downloadLink.style.display = "none";
|
||||
// 将链接添加到页面中
|
||||
document.body.appendChild(downloadLink);
|
||||
|
||||
// 模拟点击事件，开始下载
|
||||
downloadLink.click();
|
||||
}
|
||||
/**
|
||||
* @description 上传图片
|
||||
* @param {string} file 上传的文件
|
||||
*/
|
||||
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)
|
||||
}
|
||||
/**
|
||||
* @description pdf文件预览
|
||||
* @param {String} params 文件预览url
|
||||
*/
|
||||
const viewPdf = (params) => {
|
||||
setIframeSrc(params)
|
||||
setPdfViewOPen(true)
|
||||
}
|
||||
|
||||
|
||||
const onfinish = (values) => {
|
||||
let oldFiles = fileList?.map(item => ({fileId:item.response?.data?.fileId}) )
|
||||
if (mode === 'edit') {
|
||||
values.files = oldFiles;
|
||||
values.id = record.id;
|
||||
// values.opUserId = record.opUserId;
|
||||
onEdit(apiurl.ddjl.edit,values)
|
||||
}
|
||||
if (mode === 'save') {
|
||||
values.files = oldFiles
|
||||
onSave(apiurl.ddjl.save,values)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 删除上传的图片
|
||||
* @param {string} id 删除的id
|
||||
*/
|
||||
const deleteFile = (fileId) => {
|
||||
console.log(fileId);
|
||||
let filterFile = fileList.filter(item => item.response?.data?.fileId !== fileId);
|
||||
setFileList(filterFile)
|
||||
}
|
||||
useEffect(() => {
|
||||
if (mode != 'save') {
|
||||
const imgFile = record?.files?.map(o => ({
|
||||
name: o.fileName,
|
||||
response: {
|
||||
data: {
|
||||
filePath: o.filePath,
|
||||
fileId:o.fileId
|
||||
}
|
||||
},
|
||||
}))
|
||||
setFileList(imgFile)
|
||||
}
|
||||
}, [record, mode])
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<Form
|
||||
form={form}
|
||||
{...formItemLayout}
|
||||
onFinish={onfinish}
|
||||
initialValues={record}
|
||||
onValuesChange={(v,b)=>{
|
||||
setFlag(b.status===0?false:true)
|
||||
}}
|
||||
>
|
||||
<Row>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="调度开始时间"
|
||||
name="startTime"
|
||||
getValueFromEvent={(e,dateString) => dateString}
|
||||
getValueProps={(value) => ({ value: value ? moment(value) : undefined })}
|
||||
rules={[{required: true}]}
|
||||
>
|
||||
<DatePicker disabled={mode==='view'} format={'YYYY-MM-DD HH:mm:ss'} style={{width:'100%'}} showTime allowClear />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="调度结束时间"
|
||||
name="endTime"
|
||||
getValueFromEvent={(e,dateString) => dateString}
|
||||
getValueProps={(value) => ({ value: value ? moment(value) : undefined })}
|
||||
rules={[{required: flag}]}
|
||||
>
|
||||
<DatePicker disabled={mode==='view'||!flag} format={'YYYY-MM-DD HH:mm:ss'} style={{width:'100%'}} showTime allowClear />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="操作人"
|
||||
name="opUserName"
|
||||
rules={[{required: true}]}
|
||||
>
|
||||
<Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="调度状态"
|
||||
name="status"
|
||||
rules={[{required: true}]}
|
||||
>
|
||||
<NormalSelect disabled={mode==='view'} options={[{label:"执行中",value:0},{label:"完成",value:1}]}/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row>
|
||||
<Col span={24}>
|
||||
<Form.Item
|
||||
label="调度原因"
|
||||
name="dispatchReason"
|
||||
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="dispatchDetail"
|
||||
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 }}
|
||||
>
|
||||
{mode !== "view" &&
|
||||
<Dragger
|
||||
name='file'
|
||||
// multiple
|
||||
action="/gunshiApp/tsg/dispatchRecord/file/upload/singleSimple"
|
||||
onChange={fileChange}
|
||||
onDrop={(info) => { console.log(info.dataTransfer.files); }}
|
||||
fileList={fileList}
|
||||
disabled={loading}
|
||||
// onSuccess={handleSuccess}
|
||||
>
|
||||
<p className="ant-upload-text">点击或拖拽文件到此区域上传</p>
|
||||
<p className="ant-upload-hint">
|
||||
支持扩展名：.doc .docx .pdf .jpg .png .xlsx .xls
|
||||
</p>
|
||||
</Dragger>
|
||||
}
|
||||
<Row gutter={[16]}>
|
||||
{
|
||||
fileList?.length > 0 && fileList?.map(file => {
|
||||
return (
|
||||
<Col span={12}>
|
||||
<div className="file-item" style={{width:"75%"}}>
|
||||
<div className='file-description'>
|
||||
{file.name.indexOf('.docx') > -1 ?
|
||||
<div
|
||||
onClick={() => { download(file.response?.data?.fileId) }}
|
||||
style={{ cursor: 'pointer' }}
|
||||
>
|
||||
<FileWordOutlined
|
||||
style={{ fontSize: 40 }}
|
||||
/>
|
||||
</div>
|
||||
:
|
||||
file.name.indexOf('.pdf') > -1 ?
|
||||
<div
|
||||
onClick={() => { viewPdf(file.response?.data?.fileId) }}
|
||||
style={{ cursor: 'pointer' }}
|
||||
>
|
||||
<FilePdfOutlined style={{ fontSize: 40 }} />
|
||||
</div>
|
||||
:
|
||||
file.name.indexOf('.zip') > -1 ?
|
||||
<div
|
||||
onClick={() => { download(file.response?.data?.fileId) }}
|
||||
style={{ cursor: 'pointer' }}
|
||||
>
|
||||
<FileZipOutlined style={{ fontSize: 40 }} />
|
||||
</div>
|
||||
:
|
||||
file.name.indexOf('.xlsx') > -1 ?
|
||||
<div
|
||||
onClick={() => { download(file.response?.data?.fileId) }}
|
||||
style={{ cursor: 'pointer' }}
|
||||
>
|
||||
<FileExcelOutlined style={{ fontSize: 40 }} />
|
||||
</div>
|
||||
:
|
||||
<Image width={60} src={url +file.response?.data?.filePath} alt='' />
|
||||
}
|
||||
<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>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
{
|
||||
mode==='view'?null:(
|
||||
<>
|
||||
<Form.Item {...btnItemLayout}>
|
||||
<Button type="primary" htmlType="submit">
|
||||
{mode === 'save' ? '提交' : '修改'}
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</>
|
||||
)
|
||||
}
|
||||
</Form>
|
||||
<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/dispatchRecord/file/download/${iframeSrc}`)}`}
|
||||
/>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default ModalForm;
|
||||
|
|
@ -0,0 +1,184 @@
|
|||
import React, { Fragment, useRef, useMemo,useEffect,useState } from 'react';
|
||||
import BasicCrudModal from '../../../components/crud/BasicCrudModal';
|
||||
import { Table, Card, Alert } from 'antd';
|
||||
import { useSelector } from 'react-redux';
|
||||
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 { exportFile } from '../../../utils/tools.js';
|
||||
import { httppost2, httppost5 } from '../../../utils/request';
|
||||
import moment from 'moment';
|
||||
|
||||
const statusVal = {'0':'执行中','1':'完成'}
|
||||
|
||||
|
||||
const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
|
||||
const Page = () => {
|
||||
const role = useSelector(state => state.auth.role);
|
||||
const editBtn = role?.rule?.find(item => item.menuName == "编辑")||true;
|
||||
const viewBtn = role?.rule?.find(item => item.menuName == "查看")||true;
|
||||
const delBtn = role?.rule?.find(item => item.menuName == "删除")||true;
|
||||
const refModal = useRef();
|
||||
const [searchVal, setSearchVal] = useState(false)
|
||||
const [isChecked, setIsChecked] = useState(false)
|
||||
const [delVal, setDelVal] = useState([])
|
||||
const [num,setNum] = useState(0)
|
||||
|
||||
|
||||
const columns = [
|
||||
{ title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align: "center" },
|
||||
{title: '调度开始时间', key: 'startTime', dataIndex: 'startTime', width: 140,},
|
||||
{title: '调度结束时间', key: 'endTime', dataIndex: 'endTime', width: 140,},
|
||||
{title: '调度原因', key: 'dispatchReason', dataIndex: 'dispatchReason', width: 140,},
|
||||
{title: '调度详情', key: 'dispatchDetail', dataIndex: 'dispatchDetail', width: 140,},
|
||||
{title: '操作人', key: 'opUserName', dataIndex: 'opUserName', width: 140,},
|
||||
{title: '调度状态', key: 'status', dataIndex: 'status', width: 140, render:(v)=>statusVal[v]},
|
||||
{
|
||||
title: '操作', key: 'operation', width: 200, fixed: 'right',align: 'center',
|
||||
render: (value, row, index) => (
|
||||
<CrudOpRender_text
|
||||
edit={editBtn ? true : false}
|
||||
del={delBtn ? true : false}
|
||||
view={viewBtn ? true : false}
|
||||
command={(cmd) => () => command(cmd)(row)} />)
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
const width = useMemo(() => columns.reduce((total, cur) => total + (cur.width), 0), [columns]);
|
||||
|
||||
const command = (type) => (params) => {
|
||||
if (type === 'save') {
|
||||
refModal.current.showSave({status:0});
|
||||
} else if (type === 'edit') {
|
||||
refModal.current.showEdit({ ...params });
|
||||
} else if (type === 'view') {
|
||||
refModal.current.showView(params);
|
||||
} else if (type === 'del') {
|
||||
let myParams
|
||||
if(params.id){
|
||||
myParams = [params.id]
|
||||
}else{
|
||||
myParams = params
|
||||
}
|
||||
refModal.current.onDelete(apiurl.ddjl.del,myParams);
|
||||
setIsChecked(false)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const exportExcel = () => {
|
||||
let params = {
|
||||
...searchVal,
|
||||
"pageSo": {
|
||||
"pageSize": tableProps.pagination.current,
|
||||
"pageNumber": tableProps.pagination.pageSize
|
||||
},
|
||||
}
|
||||
httppost5(apiurl.ddjl.export, params).then(res => {
|
||||
exportFile(`调度记录.xlsx`,res.data)
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.ddjl.page).find_noCode);
|
||||
|
||||
console.log(tableProps);
|
||||
|
||||
/**
|
||||
* @description 处理成功的回调
|
||||
*/
|
||||
useEffect(() => {
|
||||
if (searchVal) {
|
||||
const params = {
|
||||
search: {
|
||||
...searchVal,
|
||||
}
|
||||
};
|
||||
search(params)
|
||||
}
|
||||
}, [searchVal])
|
||||
|
||||
useEffect(()=>{
|
||||
(async()=>{
|
||||
const { code, data } = await httppost2(apiurl.ddjl.page,{
|
||||
"pageSo": {
|
||||
"pageSize": 10,
|
||||
"pageNumber": 1
|
||||
},
|
||||
"dateSo": {
|
||||
"start": moment().format('YYYY-01-01 00:00:00'),
|
||||
"end": moment().format('YYYY-MM-DD HH:mm:ss')
|
||||
}
|
||||
})
|
||||
if(code===200){
|
||||
setNum(data.total)
|
||||
}
|
||||
})()
|
||||
})
|
||||
|
||||
|
||||
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')}
|
||||
setIsChecked={(v)=>setIsChecked(v)}
|
||||
setDelVal={(v)=>setDelVal(v)}
|
||||
isChecked={isChecked}
|
||||
exportFile={exportExcel}
|
||||
role={role}
|
||||
/>
|
||||
</Card>
|
||||
<div className="ant-card-body" style={{ padding: "20px 0 0 0" }}>
|
||||
|
||||
<Alert
|
||||
message={moment().format('YYYY')+'年共接收调度令'+num+'个。'}
|
||||
style={{marginBottom:'10px'}}
|
||||
type="info"
|
||||
/>
|
||||
|
||||
{
|
||||
isChecked?
|
||||
<Alert
|
||||
message={'已选择'+delVal.length+'项'}
|
||||
style={{marginBottom:'10px'}}
|
||||
type="error"
|
||||
action={delVal.length>0?<CrudOpRender_text del={true} command={(type) => () => command(type)(delVal)} />:null}
|
||||
/>:null
|
||||
}
|
||||
<Table
|
||||
columns={columns}
|
||||
rowKey="inx"
|
||||
{...tableProps}
|
||||
scroll={{ x: width , y: "calc( 100vh - 400px )"}}
|
||||
rowSelection={
|
||||
isChecked?
|
||||
{
|
||||
type: 'checkbox',
|
||||
onChange: (v,e)=>setDelVal(e.map((i)=>i.id))
|
||||
}:null
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<BasicCrudModal
|
||||
width={1000}
|
||||
ref={refModal}
|
||||
title=""
|
||||
component={ModalForm}
|
||||
onCrudSuccess={refresh}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
.basic-info{
|
||||
position: relative;
|
||||
font-size: 16px;
|
||||
margin-bottom: 20px;
|
||||
padding:5px 25px;
|
||||
border-bottom: 1px solid #eee;
|
||||
&::before{
|
||||
position: absolute;
|
||||
top:8px;
|
||||
left:0;
|
||||
content: "";
|
||||
display: block;
|
||||
width: 5px;
|
||||
height: 20px;
|
||||
background-color: #0079fe;
|
||||
}
|
||||
}
|
||||
.time-line{
|
||||
width: 50%;
|
||||
margin-left: 6%;
|
||||
margin-top: 1%;
|
||||
.time-line-item{
|
||||
display: flex;
|
||||
// align-items: center;
|
||||
column-gap: 20px;
|
||||
.item-right{
|
||||
flex:1
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
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, setIsChecked, setDelVal, isChecked, exportFile }) => {
|
||||
const addBtn = role?.rule?.find(item => item.menuName == "新增")||true;
|
||||
const searchBtn = role?.rule?.find(item => item.menuName == "查询")||true;
|
||||
const [form] = Form.useForm();
|
||||
|
||||
const delChange = ()=>{
|
||||
if(isChecked){
|
||||
setIsChecked(false)
|
||||
setIsChecked(false)
|
||||
}else{
|
||||
setIsChecked(true)
|
||||
setIsChecked(true)
|
||||
setDelVal([])
|
||||
}
|
||||
}
|
||||
|
||||
const onFinish = (values) => {
|
||||
let dateSo;
|
||||
if (values.tm) {
|
||||
dateSo = {
|
||||
start: moment(values.tm[0]).format('YYYY-MM-DD 00:00:00'),
|
||||
end: moment(values.tm[1]).format('YYYY-MM-DD 00:00:00')
|
||||
}
|
||||
}
|
||||
delete values.tm
|
||||
setSearchVal({...values, dateSo});
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
let dateSo = {
|
||||
start: moment().format('YYYY-01-01 00:00:00'),
|
||||
end: moment().format('YYYY-MM-DD 00:00:00')
|
||||
}
|
||||
form.setFieldValue("tm", [moment(dateSo.start), moment(dateSo.end)])
|
||||
setSearchVal({ dateSo })
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<>
|
||||
<div style={{display:'flex',justifyContent:'space-between'}}>
|
||||
<Form form={form} className='toolbarBox' layout="inline" onFinish={onFinish}>
|
||||
<Form.Item label="时间段" name="tm">
|
||||
<RangePicker
|
||||
allowClear
|
||||
style={{ width: "300px" }}
|
||||
format="YYYY-MM-DD"
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="操作人" name="opUserName">
|
||||
<Input allowClear style={{width:'150px'}}/>
|
||||
</Form.Item>
|
||||
<Form.Item label="调度状态" name="status">
|
||||
<NormalSelect options={[{label:"执行中",value:"0"},{label:"完成",value:"1"}]} style={{width:'150px'}}/>
|
||||
</Form.Item>
|
||||
{searchBtn ? <Form.Item>
|
||||
<Button type="primary" htmlType="submit">查询</Button>
|
||||
</Form.Item> : null }
|
||||
|
||||
<Form.Item>
|
||||
<Button onClick={() => form.resetFields()}>重置</Button>
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Button size='Default' onClick={delChange} type={isChecked?"primary":""}>删除</Button>
|
||||
</Form.Item>
|
||||
{
|
||||
(onSave && addBtn) ?
|
||||
<Form.Item>
|
||||
<Button onClick={onSave}>新增</Button>
|
||||
</Form.Item>
|
||||
:null
|
||||
}
|
||||
<Form.Item>
|
||||
<Button size='Default' onClick={exportFile}>导出</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default ToolBar;
|
||||
|
|
@ -148,6 +148,7 @@ const Page = () => {
|
|||
<div className='CalendarBox' style={{margin:20}}>
|
||||
<Calendar
|
||||
mode="month"
|
||||
|
||||
onChange={onChange}
|
||||
headerRender={({ value, onChange }) => <HeaderRender value={value} onChange={onChange} tm={tm} callback={getData} role={role} />}//doUpload={this.canOp ? this.doUpload : null}
|
||||
dateCellRender={dateCellRender}
|
||||
|
|
|
|||
|
|
@ -114,7 +114,7 @@ const ToolBar = ({ value, onChange, tm, callback,role }) => {
|
|||
<Button
|
||||
type="primary"
|
||||
className='but4'
|
||||
onClick={() => onChange(moment().subtract(1, 'months'))}
|
||||
onClick={() => onChange(tm.clone().subtract(1, 'month'))}
|
||||
icon={<LeftOutlined />}
|
||||
>上一月</Button>
|
||||
</Form.Item>
|
||||
|
|
@ -152,7 +152,7 @@ const ToolBar = ({ value, onChange, tm, callback,role }) => {
|
|||
<Button
|
||||
type="primary"
|
||||
className='but4'
|
||||
onClick={() => onChange(moment().startOf('month'))}
|
||||
onClick={() => onChange(tm.clone().add(1, 'month'))}
|
||||
icon={<RightOutlined />}
|
||||
>下一月</Button>
|
||||
</Form.Item>
|
||||
|
|
|
|||
Loading…
Reference in New Issue