feat(): 表格字段修改

src/views/Home/RealTable.js

@@ -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;
               }) }]
             }} />

src/views/Home/_.js

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