fix():修复首页bug
parent
2a31f17099
commit
b96bdc2426
|
|
@ -179,7 +179,7 @@ export default function Home() {
|
|||
//操作日志
|
||||
const [operateData, setOperateData] = useState([])
|
||||
const getLogData = async () => {
|
||||
const start = moment().subtract(7, 'days').format('YYYY-MM-DD 00:00:00')
|
||||
const start = moment().subtract(6, 'days').format('YYYY-MM-DD 00:00:00')
|
||||
const end = moment().format('YYYY-MM-DD 23:59:59')
|
||||
let params = {
|
||||
pageSo: {
|
||||
|
|
@ -204,7 +204,7 @@ export default function Home() {
|
|||
//报警信息
|
||||
const [policeData, setPoliceData] = useState(Array(5).fill(0).map((item, i) => ({ id: i, zd: '闸前水位', watchvalue: "10.23", limit: 0, max: 10, time: '2024-08-15 15:00:00' })))
|
||||
const getPoliceData = async (val) => {
|
||||
const start = moment().subtract(7, 'days').format('YYYY-MM-DD 00:00:00')
|
||||
const start = moment().subtract(6, 'days').format('YYYY-MM-DD 00:00:00')
|
||||
const end = moment().format('YYYY-MM-DD 23:59:59')
|
||||
let params = {
|
||||
pageSo: {
|
||||
|
|
@ -421,14 +421,14 @@ export default function Home() {
|
|||
<div className='content-right'>
|
||||
{/* 操作日志 */}
|
||||
<div className='operate-log'>
|
||||
<div className='project-title'>操作日志</div>
|
||||
<div className='project-title'>七天操作日志</div>
|
||||
<div className='project-content'>
|
||||
<table style={{ width: '100%' }}>
|
||||
<thead>
|
||||
<tr style={{ background: '#455a87', height: 35, fontSize: 14 }}>
|
||||
<th>闸孔编号</th>
|
||||
<th>操作内容</th>
|
||||
<th>操作人员</th>
|
||||
{/* <th>操作人员</th> */}
|
||||
<th style={{ width: 137 }}>操作时间</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
|
@ -436,8 +436,8 @@ export default function Home() {
|
|||
{operateData.length > 0 ? operateData.map((item, i) => (
|
||||
<tr style={{ borderBottom: '2px solid #536cc6', textAlign: 'center' }} className={clsx({ 'odd_row': i % 2 })} key={i}>
|
||||
<td>{item.gatePoreCode}</td>
|
||||
<td>{item.opContent}</td>
|
||||
<td>{item.createUserName}</td>
|
||||
<td style={{ overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }} title={item.opContent}>{item.opContent}</td>
|
||||
{/* <td>{item.createUserName}</td> */}
|
||||
<td style={{ width: 137 }}>{item.createTime}</td>
|
||||
</tr>
|
||||
)) : <Empty />
|
||||
|
|
|
|||
|
|
@ -298,7 +298,7 @@
|
|||
}
|
||||
table tbody {
|
||||
display:block;
|
||||
height:100px;
|
||||
height:180px;
|
||||
overflow-y:scroll;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
export default function options(data = {}) {
|
||||
const maxY = Math.ceil(Math.max(...data?.map(s => s.val)))
|
||||
const minY = Math.floor(Math.min(...data?.map(s => s.val)))
|
||||
const isRain = data.every(item => item.typeName == '雨量');
|
||||
const isZh = data.every(item => item.typeName == '闸后流量');
|
||||
const typeChart = !isRain ? 'line' : 'bar';
|
||||
const unit = isRain ? 'mm' : isZh ? 'm³/s':'m'
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
|
|
@ -38,7 +42,7 @@ export default function options(data = {}) {
|
|||
},
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
formatter: '{value} m³/s'
|
||||
formatter: '{value} '+unit
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
|
|
@ -47,7 +51,7 @@ export default function options(data = {}) {
|
|||
series: [
|
||||
{
|
||||
data: data.map(item => item.val),
|
||||
type: "line",
|
||||
type:typeChart,
|
||||
name: data[0]?.typeName,
|
||||
lineStyle: {
|
||||
color: '#5b8ff9'
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import NormalSelect from '../../../components/Form/NormalSelect';
|
|||
|
||||
import moment from 'moment';
|
||||
const { RangePicker } = DatePicker;
|
||||
const ToolBar = ({ setHistorySearchVal, exportFile1, setTabVal }) => {
|
||||
const ToolBar = ({ setHistorySearchVal, exportFile1, setTabVal,code}) => {
|
||||
const start = moment().subtract(7, 'days').format('YYYY-MM-DD 00:00:00')
|
||||
const end = moment().format('YYYY-MM-DD 23:59:59')
|
||||
const [form] = Form.useForm();
|
||||
|
|
@ -18,12 +18,12 @@ const ToolBar = ({ setHistorySearchVal, exportFile1, setTabVal }) => {
|
|||
}
|
||||
}
|
||||
delete values.tm
|
||||
setHistorySearchVal({ ...values, dateTimeRangeSo });
|
||||
setHistorySearchVal({ ...values, dateTimeRangeSo,stationCode:code});
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
form.setFieldValue('tm', [moment(start), moment(end)])
|
||||
setHistorySearchVal({ dateTimeRangeSo: { start: start, end: end } })
|
||||
setHistorySearchVal({ dateTimeRangeSo: { start: start, end: end },stationCode:code })
|
||||
}, [])
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ const Page = () => {
|
|||
const [tabVal, setTabVal] = useState('1')
|
||||
const [historySearchVal, setHistorySearchVal] = useState(false)
|
||||
const [tableData, setTableData] = useState([])
|
||||
const [echartsKey, setEchartsKey] = useState(0)
|
||||
const option = useMemo(() => drpOption(tableData), [tableData])
|
||||
const columns = [
|
||||
{ title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align: "center" },
|
||||
|
|
@ -79,6 +80,14 @@ const Page = () => {
|
|||
getHistoryData(params)
|
||||
}
|
||||
}, [historySearchVal, clickItem])
|
||||
// 当Modal打开时,延迟更新echartsKey来强制重新渲染
|
||||
useEffect(() => {
|
||||
if (jgfOpen) {
|
||||
setTimeout(() => {
|
||||
setEchartsKey(prev => prev + 1)
|
||||
}, 0)
|
||||
}
|
||||
}, [jgfOpen])
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
@ -108,7 +117,7 @@ const Page = () => {
|
|||
</div>
|
||||
<Modal
|
||||
open={jgfOpen}
|
||||
width={1000}
|
||||
width={1200}
|
||||
title={<div style={{ display: 'flex', columnGap: 10, alignItems: 'center' }}>
|
||||
<span style={{ width: 5, height: 16, background: "#3477f5" }}></span>
|
||||
<span style={{ fontSize: 16, marginLeft: 10 }}>{clickItem.stationCode}</span>
|
||||
|
|
@ -122,13 +131,17 @@ const Page = () => {
|
|||
exportFile1={exportExcel}
|
||||
setTabVal={setTabVal}
|
||||
setHistorySearchVal={setHistorySearchVal}
|
||||
code={clickItem?.stationCode}
|
||||
/>
|
||||
<div style={{ height: 504, padding: '5px 10px 20px 10px' }}>
|
||||
|
||||
{
|
||||
tabVal == '1' ?
|
||||
tableData.length > 0 ?
|
||||
<ReactEcharts option={option} style={{ width: "100%", height: '100%' }} />
|
||||
<div style={{ height: 504, width: '100%' }}>
|
||||
<ReactEcharts option={option} key={echartsKey} style={{ width: "100%", height: '100%' }} notMerge={true} lazyUpdate={true} />
|
||||
</div>
|
||||
|
||||
: <div style={{ textAlign: "center", margin: "10%" }}><img src={`${process.env.PUBLIC_URL}/assets/noData.png`} alt="" /></div>
|
||||
: null
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ export default function options(data) {
|
|||
data: ['水位','水压','水位高程','温度', '模数']
|
||||
},
|
||||
grid: {
|
||||
left: 35,
|
||||
left: 45,
|
||||
right: 120
|
||||
},
|
||||
xAxis: [
|
||||
|
|
@ -165,7 +165,7 @@ export default function options(data) {
|
|||
{
|
||||
type: 'value',
|
||||
position: 'right',
|
||||
name: "温度(°℃)",
|
||||
name: "温度(℃)",
|
||||
offset: 25,
|
||||
nameTextStyle: {
|
||||
padding: [0, 0, 10, 10],
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import NormalSelect from '../../../components/Form/NormalSelect';
|
|||
|
||||
import moment from 'moment';
|
||||
const { RangePicker } = DatePicker;
|
||||
const ToolBar = ({ setHistorySearchVal, exportFile1, setTabVal }) => {
|
||||
const ToolBar = ({ setHistorySearchVal, exportFile1, setTabVal,code }) => {
|
||||
const start = moment().subtract(2, 'days').format('YYYY-MM-DD 00:00:00')
|
||||
const end = moment().format('YYYY-MM-DD 23:59:59')
|
||||
const [form] = Form.useForm();
|
||||
|
|
@ -18,12 +18,12 @@ const ToolBar = ({ setHistorySearchVal, exportFile1, setTabVal }) => {
|
|||
}
|
||||
}
|
||||
delete values.tm
|
||||
setHistorySearchVal({ ...values, dateTimeRangeSo });
|
||||
setHistorySearchVal({ ...values, dateTimeRangeSo,stationCode:code });
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
form.setFieldValue('tm', [moment(start), moment(end)])
|
||||
setHistorySearchVal({ dateTimeRangeSo: { start: start, end: end } })
|
||||
setHistorySearchVal({ dateTimeRangeSo: { start: start, end: end },stationCode:code })
|
||||
}, [])
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@ const Page = () => {
|
|||
const [tabVal, setTabVal] = useState('1')
|
||||
const [historySearchVal, setHistorySearchVal] = useState(false)
|
||||
const [ tableData, setTableData ] = useState([])
|
||||
const [echartsKey, setEchartsKey] = useState(0)
|
||||
const option = useMemo(() => drpOption(tableData), [tableData])
|
||||
const wColumns = [
|
||||
{ title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align: "center" },
|
||||
|
|
@ -46,7 +47,7 @@ const Page = () => {
|
|||
{ title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align: "center" },
|
||||
{ title: '监测点', key: 'stationCode', dataIndex: 'stationCode', width: 150 },
|
||||
{ title: '缝开度(mm)', key: 'value', dataIndex: 'value', width: 150 },
|
||||
{ title: '温度(°℃)', key: 'temp', dataIndex: 'temp', width: 150 },
|
||||
{ title: '温度(℃)', key: 'temp', dataIndex: 'temp', width: 150 },
|
||||
{ title: '模数(F)', key: 'modulus', dataIndex: 'modulus', width: 150 },
|
||||
{
|
||||
title: '监测时间', key: 'tm', dataIndex: 'tm', width: 140,
|
||||
|
|
@ -139,6 +140,15 @@ const Page = () => {
|
|||
}
|
||||
}, [historySearchVal,clickItem])
|
||||
|
||||
// 当Modal打开时,延迟更新echartsKey来强制重新渲染
|
||||
useEffect(() => {
|
||||
if (jgfOpen) {
|
||||
setTimeout(() => {
|
||||
setEchartsKey(prev => prev + 1)
|
||||
}, 0)
|
||||
}
|
||||
}, [jgfOpen])
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className='content-root clearFloat xybm' style={{ paddingBottom: "0" }}>
|
||||
|
|
@ -207,13 +217,17 @@ const Page = () => {
|
|||
exportFile1={exportExcel}
|
||||
setTabVal={setTabVal}
|
||||
setHistorySearchVal={setHistorySearchVal}
|
||||
code={clickItem?.stationCode}
|
||||
/>
|
||||
<div style={{ height: 504, padding: '5px 10px 20px 10px' }}>
|
||||
|
||||
{
|
||||
tabVal == '1' ?
|
||||
tableData.length > 0 ?
|
||||
<ReactEcharts option={option} style={{width: "100%", height: '100%'}}/>
|
||||
<div style={{height: 504, width: '100%'}}>
|
||||
<ReactEcharts key={echartsKey} option={option} style={{ width: "100%", height: '100%' }} notMerge={true} lazyUpdate={true} />
|
||||
</div>
|
||||
|
||||
:<div style={{textAlign: "center", margin: "10%"}}><img src={`${process.env.PUBLIC_URL}/assets/noData.png`} alt=""/></div>
|
||||
:null
|
||||
}
|
||||
|
|
@ -230,3 +244,8 @@ const Page = () => {
|
|||
}
|
||||
|
||||
export default Page;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -88,7 +88,7 @@ export default function options(data) {
|
|||
type: 'value',
|
||||
position: 'right',
|
||||
offset: 80,
|
||||
name: "温度(°℃)",
|
||||
name: "温度(℃)",
|
||||
nameTextStyle: {
|
||||
padding: [0, 0, 10, 10],
|
||||
color: '#333333',
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ import { createCrudService } from '../../../components/crud/_';
|
|||
import {CrudOpRender_text} from '../../../components/crud/CrudOpRender';
|
||||
import { httppost5 } from '../../../utils/request';
|
||||
import { exportFile } from '../../../utils/tools.js';
|
||||
import moment from 'moment';
|
||||
const Page = () => {
|
||||
const types = {
|
||||
0: "防汛物资",
|
||||
|
|
@ -35,6 +36,7 @@ const Page = () => {
|
|||
title: '总价(元)', key: 'totalPrice', dataIndex: 'totalPrice', width: 140},
|
||||
{
|
||||
title: '采购时间', key: 'purchaseTime', dataIndex: 'purchaseTime', width: 150,
|
||||
render: (r) => <span>{r ? moment(r).format("YYYY-MM-DD"):""}</span>
|
||||
},
|
||||
{
|
||||
title: '供方名称', key: 'supplierName', dataIndex: 'supplierName', width: 150,
|
||||
|
|
|
|||
|
|
@ -36,8 +36,8 @@ const ToolBar = ({ setSearchVal, onSave, storeData, exportFile1 }) => {
|
|||
let dateTimeRangeSo;
|
||||
if (values.tm) {
|
||||
dateTimeRangeSo = {
|
||||
start: moment(values.tm[0]).format('YYYY-MM-DD HH:mm:ss'),
|
||||
end: moment(values.tm[1]).format('YYYY-MM-DD HH:mm:ss')
|
||||
start: moment(values.tm[0]).format('YYYY-MM-DD 00:00:00'),
|
||||
end: moment(values.tm[1]).format('YYYY-MM-DD 23:59:59')
|
||||
}
|
||||
}
|
||||
delete values.tm
|
||||
|
|
@ -58,9 +58,8 @@ const ToolBar = ({ setSearchVal, onSave, storeData, exportFile1 }) => {
|
|||
<Form.Item label="采购时间" name="tm">
|
||||
<RangePicker
|
||||
allowClear
|
||||
showTime
|
||||
style={{ width: "330px" }}
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
format="YYYY-MM-DD"
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import apiurl from '../../../service/apiurl';
|
|||
import usePageTable from '../../../components/crud/usePageTable2';
|
||||
import { createCrudService } from '../../../components/crud/_';
|
||||
import {CrudOpRender_text} from '../../../components/crud/CrudOpRender';
|
||||
import moment from 'moment';
|
||||
|
||||
const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
|
||||
const Page = () => {
|
||||
|
|
@ -22,7 +23,7 @@ const Page = () => {
|
|||
{ title: '项目名称', key: 'projectName', dataIndex: 'projectName', width: 150, ellipsis: true },
|
||||
{
|
||||
title: '验收时间', key: 'tm', dataIndex: 'tm', width: 200, ellipsis: true,
|
||||
render: (v, r) => <span>{r.startTime || '-'}至{r.endTime || '-'}</span>
|
||||
render: (v, r) => <span>{r.startTime ? moment(r.startTime).format('YYYY-MM-DD') : '-'}至{r.endTime ? moment(r.endTime).format('YYYY-MM-DD') : '-'}</span>
|
||||
},
|
||||
{ title: '记录人', key: 'createUserName', dataIndex: 'createUserName', width: 140,},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -53,12 +53,18 @@ const Page = () => {
|
|||
}
|
||||
]
|
||||
const [searchVal, setSearchVal] = useState(false)
|
||||
const unit = useMemo(() => {
|
||||
if (searchVal) {
|
||||
const val = searchVal.type == 0 ? '(m³/s)' : searchVal.type == 3 ? '(mm)':"(m)"
|
||||
return val
|
||||
}
|
||||
},[searchVal])
|
||||
const columns = [
|
||||
{ title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align: "center" },
|
||||
{
|
||||
title: '监测项目', key: 'typeName', dataIndex: 'typeName', width: 150,
|
||||
},
|
||||
{ title: '监测值', key: 'val', dataIndex: 'val', width: 150 },
|
||||
{ title: '监测值' + unit, key: 'val', dataIndex: 'val', width: 150 },
|
||||
{
|
||||
title: '监测时间', key: 'tm', dataIndex: 'tm', width: 140,
|
||||
},
|
||||
|
|
@ -113,6 +119,7 @@ const Page = () => {
|
|||
})
|
||||
}
|
||||
useEffect(() => {
|
||||
if (searchVal) {
|
||||
const params = {
|
||||
search: {
|
||||
...searchVal,
|
||||
|
|
@ -120,6 +127,8 @@ const Page = () => {
|
|||
};
|
||||
search(params)
|
||||
getHistoryData(params)
|
||||
}
|
||||
|
||||
}, [searchVal])
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -127,6 +136,9 @@ const Page = () => {
|
|||
}, [])
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className='content-root clearFloat xybm' style={{ paddingBottom: "0" }}>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,8 @@ export default function options(data = []) {
|
|||
const maxY = Math.ceil(Math.max(...data?.map(s => s.val)))
|
||||
const minY = Math.floor(Math.min(...data?.map(s => s.val)))
|
||||
const type = data[0]?.type
|
||||
const isRain = data.every(item => item.typeName == '雨量');
|
||||
const typeChart = !isRain ? 'line' : 'bar';
|
||||
const unit = type == 0 ? 'm³/s' : type == 3 ? 'mm' : 'm'
|
||||
return {
|
||||
tooltip: {
|
||||
|
|
@ -51,7 +53,7 @@ export default function options(data = []) {
|
|||
series: [
|
||||
{
|
||||
data: data.map(item => item.val),
|
||||
type: "line",
|
||||
type: typeChart,
|
||||
name: data[0]?.typeName,
|
||||
lineStyle: {
|
||||
color: '#5b8ff9'
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ const Page = () => {
|
|||
{ title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align:"center" },
|
||||
|
||||
{
|
||||
title: '监测点', key: 'type', dataIndex: 'type', width: 150,
|
||||
title: '监测项目', key: 'type', dataIndex: 'type', width: 150,
|
||||
render: (v) => <span>{types[v]}</span>
|
||||
},
|
||||
{ title: '阈值下限', key: 'lowerLimit', dataIndex: 'lowerLimit', width: 150},
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ const ToolBar = ({ setSearchVal, onSave, storeData, role }) => {
|
|||
<>
|
||||
<div style={{display:'flex',justifyContent:'space-between'}}>
|
||||
<Form form={form} className='toolbarBox' layout="inline" onFinish={onFinish}>
|
||||
<Form.Item label="监测点" name="type">
|
||||
<Form.Item label="监测项目" name="type">
|
||||
<NormalSelect allowClear style={{ width: '150px' }} options={types} />
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
|
|
|
|||
Loading…
Reference in New Issue