fix():修复首页bug

master
李神峰 2026-01-04 17:52:30 +08:00
parent 2a31f17099
commit b96bdc2426
16 changed files with 85 additions and 33 deletions

View File

@ -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 />

View File

@ -298,7 +298,7 @@
}
table tbody {
display:block;
height:100px;
height:180px;
overflow-y:scroll;
}

View File

@ -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'

View File

@ -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 })
}, [])

View File

@ -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
}

View File

@ -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],

View File

@ -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 })
}, [])

View File

@ -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,
@ -138,6 +139,15 @@ const Page = () => {
getHistoryData(params)
}
}, [historySearchVal,clickItem])
// 当Modal打开时延迟更新echartsKey来强制重新渲染
useEffect(() => {
if (jgfOpen) {
setTimeout(() => {
setEchartsKey(prev => prev + 1)
}, 0)
}
}, [jgfOpen])
return (
<>
@ -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%'}}/>
tableData.length > 0 ?
<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;

View File

@ -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',

View File

@ -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,

View File

@ -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>

View File

@ -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,},
{

View File

@ -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,18 +119,24 @@ const Page = () => {
})
}
useEffect(() => {
const params = {
if (searchVal) {
const params = {
search: {
...searchVal,
}
};
search(params)
getHistoryData(params)
}
}, [searchVal])
useEffect(() => {
getRealData()
}, [])
return (

View File

@ -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'

View File

@ -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},

View File

@ -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>