lishenfeng
/
yjtgq-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(): 表格字段修改

master
李神峰 2025-11-22 15:08:46 +08:00
parent a8d4ad8a1a
commit d1f1715f93
2 changed files with 19 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/views/Home/RealTable.js
View File

@ -14,9 +14,9 @@ const RealTable = ({ ctx }) => {
const [visible, setVisible] = useState(false);
const [detailRow, setDetailRow] = useState();
const [range, setRange] = useState([moment().add(-7, 'day'), moment()]);
const [tabKey, setTabKey] = useState('PH');
const [tabKey, setTabKey] = useState('pH');
const [list, setList] = useState([]);
const getUnit = (key) => key === 'PH' ? '' : 'mg/L';
const getUnit = (key) => key === 'pH' ? '' : 'mg/L';
const loadDetail = async (rowArg) => {
const target = rowArg;
if (!target) return;
@ -35,11 +35,11 @@ const RealTable = ({ ctx }) => {
{ title: '站点名称', key: 'mn',dataIndex:"mn",ellipsis: true, width: 90},
{
title: '数据时间', key: 'tm', dataIndex: "tm", align: 'center', width: 80,
render: (v, r) => <span style={{color:r.status === 'false'? 'red':'#000'}}>{v ? moment(v).format('MM-DD HH:mm:ss'):""}</span>
render: (v, r) => <span style={{color:r.status === 'false'? 'red':'#fff'}}>{v ? moment(v).format('MM-DD HH:mm:ss'):""}</span>
},
{ title: 'PH值', key: 'ph', dataIndex:"ph",align: 'center', width: 70},
{ title: 'pH值', key: 'ph', dataIndex:"ph",align: 'center', width: 70},
{ title: '总磷(mg/L)', key: 'p', dataIndex:"p",align: 'center', width: 70},
{ title: 'COD(mg/L)', key: 'cod', dataIndex:"cod",align: 'center', width: 90},
{ title: 'CODcr (mg/L)', key: 'cod', dataIndex:"cod",align: 'center', width: 80},
{ title: '氨氮(mg/L)', key: 'ad', dataIndex: "ad", align: 'center', width: 70 },
{
title: '操作', key: 'operation', width: 70, align: 'center',
@ -66,7 +66,9 @@ const RealTable = ({ ctx }) => {
return ctx?.selArea?.label == '水质'? columns : flowColumns
},[ctx])
const height = (ctx.dataWithFav.length + 1) * 40;
const height = (ctx.dataWithFav.length + 1) * 60;
console.log(height,size);
return (
<div ref={divref} style={{ flexGrow: 1, height: 100 }}>
<Table
@ -75,9 +77,9 @@ const RealTable = ({ ctx }) => {
dataSource={ctx?.selArea?.label == '水质'? ctx.dataWithFav:[]}
rowKey={row => row.mn}
columns={newCols}
scroll={size?.height && size.height < height ? { y: size.height - 48 } : undefined}
scroll={size?.height && size.height < height ? { y: size.height - 48,x:"auto" } : undefined}
/>
<Modal title='水质详情' open={visible} destroyOnClose onCancel={() => { setVisible(false);setTabKey('PH') }} footer={null} width={900}>
<Modal title='水质详情' open={visible} destroyOnClose onCancel={() => { setVisible(false); setTabKey('pH');setList([]) }} footer={null} width={900}>
<div style={{ display: 'flex', alignItems: 'center', marginBottom: 8 }}>
<DatePicker.RangePicker value={range} onChange={setRange} allowClear={false} showTime={{ format: 'HH:mm' }} format='YYYY-MM-DD HH:mm' />
<Button style={{ marginLeft: 8 }} type='primary' onClick={()=>loadDetail(detailRow)}>查询</Button>
@ -91,27 +93,27 @@ const RealTable = ({ ctx }) => {
rowKey={row => row.mn}
columns={[
{ title: '时间', dataIndex: 'tm', key: 'tm', width: 140, render: (v, r) => <span>{v ? moment(v).format('YYYY-MM-DD HH:mm:ss'):""} </span>},
{ title: 'PH值', dataIndex: 'ph', key: 'ph', width: 80 },
{ title: 'pH值', dataIndex: 'ph', key: 'ph', width: 80 },
{ title: '总磷(mg/L)', dataIndex: 'p', key: 'p', width: 120 },
{ title: 'COD(mg/L)', dataIndex: 'cod', key: 'cod', width: 140 },
{ title: 'CODcr (mg/L)', dataIndex: 'cod', key: 'cod', width: 80 },
{ title: '氨氮(mg/L)', dataIndex: 'ad', key: 'ad', width: 120 },
]}
scroll={{y:400,x:"auto"}}
/>
</div>
<div style={{ flex: 1 ,marginLeft:10}}>
<Tabs activeKey={tabKey} onChange={setTabKey} items={['PH','总磷','COD','氨氮'].map(k => ({ key: k, label: k }))} />
<Tabs activeKey={tabKey} onChange={setTabKey} items={['pH','总磷','CODcr','氨氮'].map(k => ({ key: k, label: k }))} />
<ReactECharts style={{ height: 360,width:420}}
notMerge
option={{
grid:{top:"8%",bottom:"8%"},
tooltip: { trigger: 'axis', formatter: (params) => { const p = Array.isArray(params) ? params[0] : params; const unit = getUnit(tabKey); return `${p.axisValue}<br/>${p.seriesName}: ${p.data === null ? '' : p.data}${unit ? ' ' + unit : ''}`; } },
xAxis: { type: 'category', data: list.map(o => moment(o.time || o.tm).format('MM-DD HH:mm'))},
xAxis: { type: 'category',inverse:true, data: list.map(o => moment(o.time || o.tm).format('MM-DD HH:mm'))},
yAxis: (() => {
const vals = list.map(o => {
if (tabKey === 'PH') return o.ph;
if (tabKey === 'pH') return o.ph;
if (tabKey === '总磷') return o.p;
if (tabKey === 'COD') return o.cod;
if (tabKey === 'CODcr') return o.cod;
return o.ad;
}).filter(v => typeof v === 'number');
const unit = getUnit(tabKey);
@ -125,9 +127,9 @@ const RealTable = ({ ctx }) => {
};
})(),
series: [{ name: tabKey, type: 'line', smooth: true, data: list.map(o => {
if (tabKey === 'PH') return o.ph;
if (tabKey === 'pH') return o.ph;
if (tabKey === '总磷') return o.p;
if (tabKey === 'COD') return o.cod;
if (tabKey === 'CODcr') return o.cod;
return o.ad;
}) }]
}} />

1
src/views/Home/_.js
View File

@ -34,6 +34,7 @@ export function usePageContext() {
return acc.concat(arr.map(item => ({ ...item, status: statusKey })));
}, []);
}
data = data.sort((a, b) => ((a?.status === 'false' || a?.status === false) ? 1 : 0) - ((b?.status === 'false' || b?.status === false) ? 1 : 0));
setStData(data.map(o => ({ ...o, name: o.name || o.stationName || o.stnm })));
} catch (error) {
console.log(error);