首页面板修改

src/pages/Home/index.js

@@ -1,12 +1,11 @@
 import { getPendingList } from '@/services/message';
-import { getComparisonData } from '@/services/OperationManagement';
 import { queryConditionSnapshot } from '@/services/SmartOps';
 import { getToken, UnityAction } from '@/utils/utils';
 import { LoadingOutlined } from '@ant-design/icons';
 import { connect, useParams, useRequest } from '@umijs/max';
 import { Popover } from 'antd';
 import dayjs from 'dayjs';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { getScadaPage } from '../../services/OperationManagement';
 import styles from './index.less';
 
@@ -77,7 +76,7 @@ const RightContent = (props) => {
     <div className={styles.right}>
       {/* <SelfInspection /> */}
       <Electric data={data} />
-      <Medicine />
+      <Medicine data={data} />
       <Scada />
       {/* <Scada /> */}
     </div>
@@ -119,14 +118,24 @@ const SmartWork = (props) => {
 // 水量监测
 const WaterAmt = (props) => {
   const { data } = props;
-  const { projectId } = useParams();
+  const status = useMemo(() => {
+    switch (data?.dwa_status) {
+      case 1:
+        return '当前处于外供水高峰期';
+      case 2:
+        return '当前处于外供水平时期';
+      case 3:
+        return '当前处于外供水低峰期';
+    }
+  }, [data?.dwa_status]);
+
   return (
     <div
       className={styles.waterAmt}
       onClick={() => UnityAction.sendMsg('menuItem', '水量监测')}
     >
       <Title title="水量监测" />
-      <div className={styles.boxTip}>当前进水稳定，出水稳定</div>
+      <div className={styles.boxTip}>{status}</div>
       <ul>
         <li>
           <div className={styles.value}>{getValue(data?.fwa)}</div>
@@ -144,14 +153,21 @@ const WaterAmt = (props) => {
 // 水质监测
 const WaterQuality = (props) => {
   const { data } = props;
-  const { projectId } = useParams();
+  const status = useMemo(() => {
+    switch (data?.water_quality_status) {
+      case 1:
+        return '当前水质良好';
+      case 2:
+        return '当前水质较好';
+    }
+  }, [data?.water_quality_status]);
   return (
     <div
       className={styles.waterQuality}
       onClick={() => UnityAction.sendMsg('menuItem', '水质监测')}
     >
       <Title title="水质监测" />
-      <div className={styles.boxTip}>水质监测较好</div>
+      <div className={styles.boxTip}>{status}</div>
       <ul>
         <li style={{ width: '60%' }}>
           <div className={styles.valueLong}>{getValue(data?.dtds)}</div>
@@ -228,6 +244,22 @@ const Electric = (props) => {
   const { data } = props;
   const [open, setOpen] = useState(false);
 
+  const elec = useMemo(() => {
+    return getValue(data?.elec_unit);
+  }, [data?.elec_unit]);
+
+  const status = useMemo(() => {
+    if (!data) return '';
+    if (elec > data.elec_unit_theory) {
+      return '当前电耗高于理论值';
+    }
+    if (elec == data.elec_unit_theory) {
+      return '当前电耗持平理论值';
+    }
+    if (elec < data.elec_unit_theory) {
+      return '当前电耗低于理论值';
+    }
+  }, [data]);
   const content = (
     <div className={styles.popoverContent}>
       <p>理论值规则：</p>
@@ -243,6 +275,7 @@ const Electric = (props) => {
       onClick={() => UnityAction.sendMsg('menuItem', '能耗监测')}
     >
       <Title title={'能耗监测'} />
+      <div className={styles.boxTip}>{status}</div>
 
       <div
         className={`password-eye ${styles.eye} ${open ? 'open' : ''}`}
@@ -253,15 +286,13 @@ const Electric = (props) => {
       ></div>
       <ul>
         <li>
-          <div className={styles.value}>
-            {open ? getValue(data?.elec_unit) : '*****'}
-          </div>
+          <div className={styles.value}>{open ? elec : '*****'}</div>
           <div className={styles.btn1}>吨水电耗</div>
         </li>
         <li>
           <div className={styles.value}>
             {/* {open ? getValue(data?.elec) : '*****'} */}
-            12312312
+            {data?.elec_unit_theory || '-'}
           </div>
           <Popover title={content}>
             <div className={styles.btn1} onClick={(e) => e.stopPropagation()}>
@@ -275,25 +306,26 @@ const Electric = (props) => {
   );
 };
 // 药耗监测
-const Medicine = () => {
-  const { projectId } = useParams();
-  const time = dayjs().format('YYYY-MM');
+const Medicine = (props) => {
+  const { data } = props;
   const [open, setOpen] = useState(false);
 
-  const { data } = useRequest(getComparisonData, {
-    defaultParams: [
-      {
-        project_id: projectId,
-        start: time,
-        end: time,
-        type: 1,
-        flag: 1,
-      },
-    ],
-    formatResult(res) {
-      return res[0];
-    },
-  });
+  const otc_cost = useMemo(() => {
+    return getValue(data?.otc_cost_unit);
+  }, [data?.otc_cost_unit]);
+
+  const status = useMemo(() => {
+    if (!data) return '';
+    if (otc_cost > data.otc_unit_theory) {
+      return '当前药耗高于理论值';
+    }
+    if (otc_cost == data.otc_unit_theory) {
+      return '当前药耗持平理论值';
+    }
+    if (otc_cost < data.otc_unit_theory) {
+      return '当前药耗低于理论值';
+    }
+  }, [data]);
   const content = (
     <div className={styles.popoverContent}>
       <p>理论值规则：</p>
@@ -308,6 +340,7 @@ const Medicine = () => {
       onClick={() => UnityAction.sendMsg('menuItem', '药耗监测')}
     >
       <Title title={'药耗监测'} />
+      <div className={styles.boxTip}>{status}</div>
 
       <div
         className={`password-eye ${styles.eye} ${open ? 'open' : ''}`}
@@ -318,12 +351,15 @@ const Medicine = () => {
       ></div>
       <ul>
         <li>
-          <div className={styles.valueLong}>
-            {open ? data?.value?.toFixed(2) : '*****'}
-          </div>
+          <div className={styles.valueLong}>{open ? otc_cost : '*****'}</div>
+
+          <div className={styles.btn1}>吨水药耗(元/m³)</div>
+        </li>
+        <li>
+          <div className={styles.valueLong}>{data?.otc_unit_theory || '-'}</div>
           <Popover title={content}>
             <div className={styles.btn1} onClick={(e) => e.stopPropagation()}>
-              当月吨水药成本(元)
+              理论值(元/m³)
               <i className={styles.iconAlert}></i>
             </div>
           </Popover>
@@ -368,7 +404,7 @@ const Scada = () => {
               height: '279px',
               borderRadius: '0 0 44px 0',
             }}
-            frameborder="0"
+            frameBorder="0"
             src={url}
           />
         ))}