Merge branch 'develop' of http://120.55.44.4:10080/xujunjie/gt_client_pad into develop

.umirc.ts

@@ -27,8 +27,8 @@ export default defineConfig({
   headScripts: [`/rem.js`],
   proxy: {
     '/api': {
-      target: 'http://47.96.12.136:8888/',
-      // target: 'http://47.96.12.136:8788/',
+      // target: 'http://47.96.12.136:8888/',
+      target: 'http://47.96.12.136:8788/',
       // target: 'http://120.55.44.4:8903/',
       // target: 'https://work.greentech.com.cn/',
       changeOrigin: true,

src/models/eqSelfInspection.js

@@ -209,7 +209,14 @@ export default {
         // if (errorNum?.length > 0) num += errorNum;
         data.warningTotalNum = num;
 
-        if (data.extendWarningNum > 0) {
+        if (
+          data.extendWarningNum > 0 ||
+          data?.DrugFlowList?.filter((item) => item.status)?.length > 0 ||
+          data?.FluidLevelList?.filter((item) => item.status)?.length > 0 ||
+          data?.WaterInCheckList?.filter((item) => item.status)?.length > 0 ||
+          data?.PressureCompareList.length > 0 ||
+          data?.WaterQualityCompareList.length > 0
+        ) {
           // 判断是否有异常
           data.patrolStatus = 1;
         } else if (data.extendWarningData.length - data.extendWarningNum > 0) {

src/pages/EqSelfInspection/components/Detail.js

@@ -162,15 +162,34 @@ function Detail(props) {
           key="liquid"
           type={'liquid'}
           userList={userList}
-          title={'液位异常'}
+          title="液位异常"
         />
         {/* 加药流量校验 */}
-        {/* <FlowCom
+        <DosingFlowCom
           sendMessageToUnity={sendMessageToUnity}
           select={select}
           allData={data?.FluidLevelList}
-          title={<ModuleTitle title="加药流量校验" />}
-        /> */}
+          title="加药流量校验"
+        />
+        <WaterInCom
+          sendMessageToUnity={sendMessageToUnity}
+          select={select}
+          allData={data?.WaterInCheckList}
+          title="进出水流量校验"
+        />
+        <PressureGaugeCom
+          sendMessageToUnity={sendMessageToUnity}
+          select={select}
+          allData={data?.PressureCompareList}
+          title="压力仪表校验"
+        />
+        <WaterQualityCom
+          sendMessageToUnity={sendMessageToUnity}
+          select={select}
+          allData={data?.WaterQualityCompareList}
+          title="水质仪表校验"
+        />
+
         {/* 工艺自检报告"> */}
         <div className={styles.content}>
           <div className={styles.tableStatus}>
@@ -799,9 +818,14 @@ export function LiquidTable(props) {
   const columns = [
     {
       title: '设备名称',
-      width: '25%',
+      width: '20%',
       dataIndex: 'device_name',
     },
+    {
+      title: '类型',
+      key: 'template_item_name',
+      dataIndex: 'template_item_name',
+    },
     {
       title: '液位数',
       width: '20%',
@@ -814,7 +838,7 @@ export function LiquidTable(props) {
     },
     {
       title: '设定值范围',
-      width: '30%',
+      width: '25%',
       render: (record) => (
         <ThresholdDetail
           current={record.value || 0}
@@ -904,7 +928,7 @@ function LiquidLevelCom(props) {
         <TabsContent
           defaultActiveKey="1"
           onChange={handleTabsChange}
-          small={true}
+          small
           items={[
             {
               key: '1',
@@ -939,67 +963,37 @@ function LiquidLevelCom(props) {
         />
       )}
     </div>
-    // <div className={styles.detailCard}>
-    //   <Tabs
-    //     defaultActiveKey="1"
-    //     tabBarExtraContent={<div className={styles.tabBarExtraContent}>{title} </div>}
-    //     onChange={handleTabsChange}
-    //   >
-    //     <Tabs.TabPane tab={`异常/警告(${errorData.length || 0})`} key="1">
-    //       {activeKey == '1' && (
-    //         <LiquidTable
-    //           onClickItem={sendMessageToUnity}
-    //           select={select}
-    //           items={errorData}
-    //           key={type}
-    //           // data={data}
-    //           type={type}
-    //         />
-    //       )}
-    //     </Tabs.TabPane>
-    //     <Tabs.TabPane tab={`全部(${allData.length || 0})`} key="2">
-    //       {activeKey == '2' && (
-    //         <LiquidTable
-    //           onClickItem={sendMessageToUnity}
-    //           select={select}
-    //           items={allData}
-    //           // data={data}
-    //           key={type}
-    //           type={type}
-    //         />
-    //       )}
-    //     </Tabs.TabPane>
-    //   </Tabs>
-    // </div>
   );
 }
 
-function FlowTable(props) {
+function DosingFlowTable(props) {
   const { onClickItem, data = {}, items } = props;
   const columns = [
     {
       title: '设备名称',
-      width: '20%',
+      width: '1.5rem',
       dataIndex: 'device_name',
     },
+    {
+      title: '类型',
+      key: 'template_item_name',
+      dataIndex: 'template_item_name',
+    },
     {
       title: '实际流量',
-      width: '20%',
       dataIndex: 'origin_value',
     },
     {
       title: '计量流量',
-      width: '16%',
       dataIndex: 'value',
     },
     {
-      title: '差值',
-      width: '15%',
+      title: '差值/比值',
       dataIndex: 'value',
     },
     {
       title: '设定值范围',
-      width: '30%',
+      width: '20%',
       render: (record) => (
         <ThresholdDetail
           current={record.value || 0}
@@ -1013,6 +1007,7 @@ function FlowTable(props) {
     {
       title: '状态',
       dataIndex: 'status',
+      width: '1.25rem',
       render: (status) => {
         switch (status) {
           case -1:
@@ -1022,7 +1017,7 @@ function FlowTable(props) {
                 <i
                   className={styles.iconStatus}
                   style={{ background: '#12CEB3' }}
-                ></i>
+                />
                 正常
               </div>
             );
@@ -1031,8 +1026,8 @@ function FlowTable(props) {
               <div>
                 <i
                   className={styles.iconStatus}
-                  style={{ background: '#FFE26D' }}
-                ></i>
+                  style={{ background: '#FF8600' }}
+                />
                 异常
               </div>
             );
@@ -1042,10 +1037,12 @@ function FlowTable(props) {
                 <i
                   className={styles.iconStatus}
                   style={{ background: '#FFE26D' }}
-                ></i>
+                />
                 警告
               </div>
             );
+          default:
+            return null;
         }
       },
     },
@@ -1070,7 +1067,7 @@ function FlowTable(props) {
   );
 }
 
-function FlowCom(props) {
+function DosingFlowCom(props) {
   const { sendMessageToUnity, select, allData = [], type, title } = props;
   const [activeKey, setActiveKey] = useState('1');
 
@@ -1079,8 +1076,8 @@ function FlowCom(props) {
     return errorData;
   }, [allData]);
 
-  const handleTabsChange = (activeKey) => {
-    setActiveKey(activeKey);
+  const handleTabsChange = (key) => {
+    setActiveKey(key);
   };
   return (
     <div className={styles.detailCard}>
@@ -1089,7 +1086,7 @@ function FlowCom(props) {
         <TabsContent
           defaultActiveKey="1"
           onChange={handleTabsChange}
-          small={true}
+          small
           items={[
             {
               key: '1',
@@ -1105,22 +1102,482 @@ function FlowCom(props) {
         ></TabsContent>
       </div>
 
-      {activeKey == '1' && (
-        <FlowTable
+      {activeKey === '1' && (
+        <DosingFlowTable
           onClickItem={sendMessageToUnity}
           select={select}
           items={errorData}
-          key={type}
-          type={type}
         />
       )}
-      {activeKey == '2' && (
-        <FlowTable
+      {activeKey === '2' && (
+        <DosingFlowTable
+          onClickItem={sendMessageToUnity}
+          select={select}
+          items={allData}
+        />
+      )}
+    </div>
+  );
+}
+
+function WaterInTable(props) {
+  const { onClickItem, data = {}, items } = props;
+  const columns = [
+    {
+      title: '设备名称',
+      width: '20%',
+      dataIndex: 'item_alias',
+    },
+    {
+      title: '差值',
+      // width: '15%',
+      dataIndex: 'current_val',
+    },
+    {
+      title: '时间',
+      // width: '15%',
+      dataIndex: 'create_time',
+      render: (text) => {
+        if (text) {
+          return dayjs(text).format('HH:mm:ss');
+        }
+        return '-';
+      },
+    },
+    {
+      title: '设定值范围',
+      width: '30%',
+      render: (record) => (
+        <ThresholdDetail
+          current={record.current_val || 0}
+          data={{
+            JsonNumThreshold: {
+              exception: [
+                { ThresholdValue: record?.thresholds, ThresholdType: 1 },
+              ],
+            },
+            Type: 2,
+          }}
+        />
+      ),
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      width: '1.25rem',
+      render: (status) => {
+        switch (status) {
+          case -1:
+          case 0:
+            return (
+              <div>
+                <i
+                  className={styles.iconStatus}
+                  style={{ background: '#12CEB3' }}
+                />
+                正常
+              </div>
+            );
+          case 1:
+            return (
+              <div>
+                <i
+                  className={styles.iconStatus}
+                  style={{ background: '#FF8600' }}
+                />
+                异常
+              </div>
+            );
+          case 2:
+            return (
+              <div>
+                <i
+                  className={styles.iconStatus}
+                  style={{ background: '#FFE26D' }}
+                />
+                警告
+              </div>
+            );
+          default:
+            return (
+              <div>
+                <i
+                  className={styles.iconStatus}
+                  style={{ background: '#FF8600' }}
+                />
+                异常
+              </div>
+            );
+        }
+      },
+    },
+  ];
+  const handleClickItem = (params) => {
+    onClickItem(`DeviceTable-${params.device_code}`, {
+      type: params.status,
+      deviceCode: params.device_code,
+    });
+  };
+
+  return (
+    <Table
+      columns={columns}
+      dataSource={items}
+      rowKey="device_code"
+      locale={{
+        emptyText: <Empty />,
+      }}
+      pagination={false}
+    />
+  );
+}
+
+function WaterInCom(props) {
+  const { sendMessageToUnity, select, allData = [], title } = props;
+  const [activeKey, setActiveKey] = useState('1');
+
+  const errorData = useMemo(() => {
+    const tempData = allData?.filter((item) => item.status);
+    return tempData;
+  }, [allData]);
+
+  const handleTabsChange = (key) => {
+    setActiveKey(key);
+  };
+  return (
+    <div className={styles.detailCard}>
+      <div className={styles.tableTop}>
+        {title}
+        <TabsContent
+          defaultActiveKey="1"
+          onChange={handleTabsChange}
+          small
+          items={[
+            {
+              key: '1',
+              label: `异常/警告(${errorData?.length || 0})`,
+              children: <div></div>,
+            },
+            {
+              key: '2',
+              label: `全部(${allData?.length || 0})`,
+              children: <div></div>,
+            },
+          ]}
+        ></TabsContent>
+      </div>
+      {activeKey === '1' && (
+        <WaterInTable
+          onClickItem={sendMessageToUnity}
+          select={select}
+          items={errorData}
+        />
+      )}
+      {activeKey === '2' && (
+        <WaterInTable
+          onClickItem={sendMessageToUnity}
+          select={select}
+          items={allData}
+        />
+      )}
+    </div>
+  );
+}
+
+function PressureGaugeTable(props) {
+  const { onClickItem, data = {}, items } = props;
+  const columns = [
+    {
+      title: '设备名称',
+      width: '15%',
+      dataIndex: 'item_alias',
+    },
+    {
+      title: '时间范围',
+      key: 'dataRange',
+      width: '1.5rem',
+      render: (record) => {
+        if (record.query_start && record.query_end) {
+          return (
+            <>
+              {dayjs(record.query_start).format('HH:mm:ss')}
+              <br />
+              {dayjs(record.query_end).format('HH:mm:ss')}
+            </>
+          );
+        }
+        return '-';
+      },
+    },
+    {
+      title: '仪表最小数',
+      width: '2rem',
+      dataIndex: 'data_min',
+    },
+    {
+      title: '仪表最大数',
+      width: '2rem',
+      dataIndex: 'data_max',
+    },
+    {
+      title: '可能原因',
+      dataIndex: 'content',
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      width: '1.25rem',
+      render: (status) => {
+        switch (status) {
+          case -1:
+          case 0:
+            return (
+              <div>
+                <i
+                  className={styles.iconStatus}
+                  style={{ background: '#12CEB3' }}
+                />
+                正常
+              </div>
+            );
+          case 1:
+            return (
+              <div>
+                <i
+                  className={styles.iconStatus}
+                  style={{ background: '#FF8600' }}
+                />
+                异常
+              </div>
+            );
+          case 2:
+            return (
+              <div>
+                <i
+                  className={styles.iconStatus}
+                  style={{ background: '#FFE26D' }}
+                />
+                警告
+              </div>
+            );
+          default:
+            return (
+              <div>
+                <i
+                  className={styles.iconStatus}
+                  style={{ background: '#FF8600' }}
+                />
+                异常
+              </div>
+            );
+        }
+      },
+    },
+  ];
+  const handleClickItem = (params) => {
+    onClickItem(`DeviceTable-${params.device_code}`, {
+      type: params.status,
+      deviceCode: params.device_code,
+    });
+  };
+
+  return (
+    <Table
+      columns={columns}
+      dataSource={items}
+      rowKey="device_code"
+      locale={{
+        emptyText: <Empty />,
+      }}
+      pagination={false}
+    />
+  );
+}
+
+function PressureGaugeCom(props) {
+  const { sendMessageToUnity, select, allData = [], title } = props;
+  const [activeKey, setActiveKey] = useState('2');
+
+  const errorData = useMemo(() => {
+    const tempData = allData?.filter((item) => item.status);
+    return tempData;
+  }, [allData]);
+
+  const handleTabsChange = (key) => {
+    setActiveKey(key);
+  };
+  return (
+    <div className={styles.detailCard}>
+      <div className={styles.tableTop}>
+        {title}
+        <TabsContent
+          defaultActiveKey="2"
+          onChange={handleTabsChange}
+          small
+          items={[
+            {
+              key: '2',
+              label: `异常/警告(${errorData?.length || 0})`,
+              children: <div></div>,
+            },
+          ]}
+        ></TabsContent>
+      </div>
+      {activeKey === '2' && (
+        <PressureGaugeTable
+          onClickItem={sendMessageToUnity}
+          select={select}
+          items={allData}
+        />
+      )}
+    </div>
+  );
+}
+
+function WaterQualityTable(props) {
+  const { onClickItem, data = {}, items } = props;
+  const columns = [
+    {
+      title: '设备名称',
+      width: '15%',
+      dataIndex: 'item_alias',
+    },
+    {
+      title: '时间范围',
+      key: 'dataRange',
+      width: '1.5rem',
+      render: (record) => {
+        if (record.query_start && record.query_end) {
+          return (
+            <>
+              {dayjs(record.query_start).format('HH:mm:ss')}
+              <br />
+              {dayjs(record.query_end).format('HH:mm:ss')}
+            </>
+          );
+        }
+        return '-';
+      },
+    },
+    {
+      title: '仪表最小数',
+      width: '2rem',
+      dataIndex: 'data_min',
+    },
+    {
+      title: '仪表最大数',
+      width: '2rem',
+      dataIndex: 'data_max',
+    },
+    {
+      title: '可能原因',
+      dataIndex: 'content',
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      width: '1.25rem',
+      render: (status) => {
+        switch (status) {
+          case -1:
+          case 0:
+            return (
+              <div>
+                <i
+                  className={styles.iconStatus}
+                  style={{ background: '#12CEB3' }}
+                />
+                正常
+              </div>
+            );
+          case 1:
+            return (
+              <div>
+                <i
+                  className={styles.iconStatus}
+                  style={{ background: '#FF8600' }}
+                />
+                异常
+              </div>
+            );
+          case 2:
+            return (
+              <div>
+                <i
+                  className={styles.iconStatus}
+                  style={{ background: '#FFE26D' }}
+                />
+                警告
+              </div>
+            );
+          default:
+            return (
+              <div>
+                <i
+                  className={styles.iconStatus}
+                  style={{ background: '#FF8600' }}
+                />
+                异常
+              </div>
+            );
+        }
+      },
+    },
+  ];
+  const handleClickItem = (params) => {
+    onClickItem(`DeviceTable-${params.device_code}`, {
+      type: params.status,
+      deviceCode: params.device_code,
+    });
+  };
+
+  return (
+    <Table
+      columns={columns}
+      dataSource={items}
+      rowKey="device_code"
+      locale={{
+        emptyText: <Empty />,
+      }}
+      pagination={false}
+    />
+  );
+}
+
+function WaterQualityCom(props) {
+  const { sendMessageToUnity, select, allData = [], title } = props;
+  const [activeKey, setActiveKey] = useState('2');
+
+  const errorData = useMemo(() => {
+    const tempData = allData?.filter((item) => item.status);
+    return tempData;
+  }, [allData]);
+
+  const handleTabsChange = (key) => {
+    setActiveKey(key);
+  };
+  return (
+    <div className={styles.detailCard}>
+      <div className={styles.tableTop}>
+        {title}
+        <TabsContent
+          defaultActiveKey="2"
+          onChange={handleTabsChange}
+          small
+          items={[
+            {
+              key: '2',
+              label: `异常/警告(${errorData?.length || 0})`,
+              children: <div></div>,
+            },
+          ]}
+        ></TabsContent>
+      </div>
+      {activeKey === '2' && (
+        <WaterQualityTable
           onClickItem={sendMessageToUnity}
           select={select}
           items={allData}
-          key={type}
-          type={type}
         />
       )}
     </div>

src/pages/Smart/OptimizationTasks.js

@@ -102,6 +102,7 @@ const Produce = ({ projectId }) => {
           >
             <h3 className={styles.left}>任务内容</h3>
             <Table
+              className={styles.taskTable}
               style={{ width: '100%' }}
               columns={columns}
               dataSource={data}
@@ -202,9 +203,8 @@ const Cost = ({ projectId }) => {
             style={{ backgroundColor: 'rgba(245,166,35,0.04);' }}
           >
             <h3 className={styles.left}>任务内容</h3>
-
             <Table
-              className="table2"
+              className={styles.taskTable}
               columns={columns}
               dataSource={data}
               pagination={false}

src/pages/Smart/OptimizationTasks.less

@@ -47,7 +47,7 @@
   .left {
     width: 1.5rem;
     margin: 0;
-    font-size: 0.24rem;
+    font-size: 0.3rem;
     font-weight: 400;
     color: #3b3b3b;
   }
@@ -119,3 +119,15 @@
     }
   }
 }
+
+.taskTable {
+  :global {
+    .ant-table-thead {
+      background: rgba(155, 151, 151, 0.2);
+    }
+    .ant-table-thead > tr > th {
+      color: rgba(59, 59, 59, 1);
+      font-weight: 600;
+    }
+  }
+}

src/pages/SmartOps/components/DeviceAnalysis.js

@@ -1,10 +1,13 @@
+import ModuleTitle from '@/components/ManagementPage/moduleTitle';
 import TabsContent from '@/components/TabsContent';
 import ThresholdDetail from '@/components/ThresholdDetail';
 import { UnityAction } from '@/utils/utils';
 import { connect } from '@umijs/max';
 import { Spin, Table, Tabs } from 'antd';
+import dayjs from 'dayjs';
 import { useEffect, useMemo, useState } from 'react';
 import styles from './DeviceAnalysis.less';
+
 const { TabPane } = Tabs;
 
 const DeviceAnalysis = (props) => {
@@ -106,8 +109,30 @@ const DeviceAnalysis = (props) => {
 
   const data = useMemo(() => {
     return [
-      { name: '异常', type: '1', data: autoReport?.extendWarningData },
-      { name: '全部', type: '2', data: autoReport?.extendWarningAllData },
+      {
+        name: '异常',
+        type: '1',
+        data: autoReport?.extendWarningData,
+        FluidLevelList: autoReport?.FluidLevelList?.filter(
+          (item) => item.status,
+        ),
+        DrugFlowList: autoReport?.DrugFlowList?.filter((item) => item.status),
+        WaterInCheckList: autoReport?.WaterInCheckList?.filter(
+          (item) => item.status,
+        ),
+        PressureCompareList: autoReport?.PressureCompareList,
+        WaterQualityCompareList: autoReport?.WaterQualityCompareList,
+      },
+      {
+        name: '全部',
+        type: '2',
+        data: autoReport?.extendWarningAllData,
+        FluidLevelList: autoReport?.FluidLevelList,
+        DrugFlowList: autoReport?.DrugFlowList,
+        WaterInCheckList: autoReport?.WaterInCheckList,
+        PressureCompareList: autoReport?.PressureCompareList,
+        WaterQualityCompareList: autoReport?.WaterQualityCompareList,
+      },
     ];
   }, [autoReport]);
 
@@ -143,7 +168,7 @@ const DeviceAnalysis = (props) => {
 
   return (
     <Spin spinning={loading}>
-      <div className="card-box">
+      <div>
         <TabsContent
           small={true}
           center={false}
@@ -153,17 +178,43 @@ const DeviceAnalysis = (props) => {
               label: `${item.name}(${item.data?.length || 0})`,
               key: item.type,
               children: (
-                <Table
-                  dataSource={item.data}
-                  columns={columns}
-                  rowKey="Id"
-                  rowClassName={setRowClassName}
-                  onRow={(record, index) => ({
-                    onClick: () => onSelectRow(record, index),
-                  })}
-                  pagination={false}
-                  scroll={{ y: document.body.clientHeight - 730 }}
-                />
+                <>
+                  {(item.type === '1' ? item?.data?.length > 0 : true) && (
+                    <>
+                      <ModuleTitle title="设备检测" />
+                      <Table
+                        dataSource={item.data}
+                        columns={columns}
+                        rowKey="Id"
+                        rowClassName={setRowClassName}
+                        onRow={(record, index) => ({
+                          onClick: () => onSelectRow(record, index),
+                        })}
+                        pagination={false}
+                        // scroll={{ y: document.body.clientHeight - 730 }}
+                      />
+                    </>
+                  )}
+                  {(item.type === '1'
+                    ? item?.FluidLevelList.length > 0
+                    : true) && <LiquidLevel allData={item?.FluidLevelList} />}
+                  {(item.type === '1'
+                    ? item?.DrugFlowList.length > 0
+                    : true) && <DosingFlow allData={item?.DrugFlowList} />}
+                  {(item.type === '1'
+                    ? item?.WaterInCheckList.length > 0
+                    : true) && <WaterFlow allData={item?.WaterInCheckList} />}
+                  {(item.type === '1'
+                    ? item?.PressureCompareList.length > 0
+                    : true) && (
+                    <PressureGauge allData={item?.PressureCompareList} />
+                  )}
+                  {(item.type === '1'
+                    ? item?.WaterQualityCompareList.length > 0
+                    : true) && (
+                    <WaterQuality allData={item?.WaterQualityCompareList} />
+                  )}
+                </>
               ),
             };
           })}
@@ -177,3 +228,517 @@ export default connect(({ eqSelfInspection, loading }) => ({
   loading: loading.effects['eqSelfInspection/getPatrolDataById'],
   autoReport: eqSelfInspection.autoReport,
 }))(DeviceAnalysis);
+
+const LiquidLevel = (props) => {
+  const { allData } = props;
+
+  const columns = [
+    {
+      title: '设备名称',
+      width: '20%',
+      dataIndex: 'device_name',
+    },
+    {
+      title: '类型',
+      key: 'template_item_name',
+      dataIndex: 'template_item_name',
+    },
+    {
+      title: '液位数',
+      dataIndex: 'origin_value',
+    },
+    {
+      title: '差值/比值',
+      dataIndex: 'value',
+    },
+    {
+      title: '设定值范围',
+      width: '25%',
+      render: (record) => (
+        <ThresholdDetail
+          current={record.value || 0}
+          data={{
+            JsonNumThreshold: record?.json_num_threshold,
+            Type: record.type,
+          }}
+        />
+      ),
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      width: '1.25rem',
+      render: (status) => {
+        switch (status) {
+          case -1:
+          case 0:
+            return (
+              <div>
+                <i
+                  className={styles.iconStatus}
+                  style={{ background: '#60FE76' }}
+                />
+                正常
+              </div>
+            );
+          case 1:
+            return (
+              <div>
+                <i
+                  className={styles.iconStatus}
+                  style={{ background: '#FF8600' }}
+                />
+                异常
+              </div>
+            );
+          case 2:
+            return (
+              <div>
+                <i
+                  className={styles.iconStatus}
+                  style={{ background: '#FFE26D' }}
+                />
+                警告
+              </div>
+            );
+          default:
+            return (
+              <div>
+                <i
+                  className={styles.iconStatus}
+                  style={{ background: '#FF8600' }}
+                />
+                异常
+              </div>
+            );
+        }
+      },
+    },
+  ];
+
+  return (
+    <div>
+      <ModuleTitle title="液位检测" />
+      <Table dataSource={allData} columns={columns} />
+    </div>
+  );
+};
+
+const DosingFlow = (props) => {
+  const { allData } = props;
+
+  const columns = [
+    {
+      title: '设备名称',
+      width: '15%',
+      dataIndex: 'device_name',
+    },
+    {
+      title: '类型',
+      key: 'template_item_name',
+      dataIndex: 'template_item_name',
+    },
+    {
+      title: '实际流量',
+      dataIndex: 'origin_value',
+    },
+    {
+      title: '计量流量',
+      dataIndex: 'value',
+    },
+    {
+      title: '差值/比值',
+      dataIndex: 'value',
+    },
+    {
+      title: '设定值范围',
+      width: '20%',
+      render: (record) => (
+        <ThresholdDetail
+          current={record.value || 0}
+          data={{
+            JsonNumThreshold: record?.json_num_threshold,
+            Type: record.type || 2,
+          }}
+        />
+      ),
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      width: '1.25rem',
+      render: (status) => {
+        switch (status) {
+          case -1:
+          case 0:
+            return (
+              <div>
+                <i
+                  className={styles.iconStatus}
+                  style={{ background: '#12CEB3' }}
+                />
+                正常
+              </div>
+            );
+          case 1:
+            return (
+              <div>
+                <i
+                  className={styles.iconStatus}
+                  style={{ background: '#FF8600' }}
+                />
+                异常
+              </div>
+            );
+          case 2:
+            return (
+              <div>
+                <i
+                  className={styles.iconStatus}
+                  style={{ background: '#FFE26D' }}
+                />
+                警告
+              </div>
+            );
+          default:
+            return (
+              <div>
+                <i
+                  className={styles.iconStatus}
+                  style={{ background: '#FF8600' }}
+                />
+                异常
+              </div>
+            );
+        }
+      },
+    },
+  ];
+  return (
+    <div>
+      <ModuleTitle title="加药流量校验" />
+      <Table dataSource={allData} columns={columns} />
+    </div>
+  );
+};
+
+const WaterFlow = (props) => {
+  const { allData } = props;
+  const columns = [
+    {
+      title: '设备名称',
+      width: '20%',
+      dataIndex: 'item_alias',
+    },
+    // {
+    //   title: '实际流量',
+    //   width: '20%',
+    //   dataIndex: 'current_val',
+    // },
+    // {
+    //   title: '计量流量',
+    //   width: '16%',
+    //   dataIndex: 'thresholds',
+    // },
+    {
+      title: '差值',
+      // width: '15%',
+      dataIndex: 'current_val',
+    },
+    {
+      title: '时间',
+      // width: '15%',
+      dataIndex: 'create_time',
+      render: (text) => {
+        if (text) {
+          return dayjs(text).format('HH:mm:ss');
+        }
+        return '-';
+      },
+    },
+    {
+      title: '设定值范围',
+      width: '30%',
+      render: (record) => (
+        <ThresholdDetail
+          current={record.current_val || 0}
+          data={{
+            JsonNumThreshold: {
+              exception: [
+                { ThresholdValue: record?.thresholds, ThresholdType: 1 },
+              ],
+            },
+            Type: 2,
+          }}
+        />
+      ),
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      width: '1.25rem',
+      render: (status) => {
+        switch (status) {
+          case -1:
+          case 0:
+            return (
+              <div>
+                <i
+                  className={styles.iconStatus}
+                  style={{ background: '#12CEB3' }}
+                />
+                正常
+              </div>
+            );
+          case 1:
+            return (
+              <div>
+                <i
+                  className={styles.iconStatus}
+                  style={{ background: '#FF8600' }}
+                />
+                异常
+              </div>
+            );
+          case 2:
+            return (
+              <div>
+                <i
+                  className={styles.iconStatus}
+                  style={{ background: '#FFE26D' }}
+                />
+                警告
+              </div>
+            );
+          default:
+            return (
+              <div>
+                <i
+                  className={styles.iconStatus}
+                  style={{ background: '#FF8600' }}
+                />
+                异常
+              </div>
+            );
+        }
+      },
+    },
+  ];
+
+  return (
+    <div>
+      <ModuleTitle title="进出水流量校验" />
+      <Table dataSource={allData} columns={columns} />
+    </div>
+  );
+};
+
+const PressureGauge = (props) => {
+  const { allData } = props;
+
+  const columns = [
+    {
+      title: '设备名称',
+      width: '20%',
+      key: 'item_alias',
+      dataIndex: 'item_alias',
+    },
+    {
+      title: '时间范围',
+      key: 'dataRange',
+      width: '1.5rem',
+      render: (record) => {
+        if (record.query_start && record.query_end) {
+          return (
+            <>
+              {dayjs(record.query_start).format('HH:mm:ss')}
+              <br />
+              {dayjs(record.query_end).format('HH:mm:ss')}
+            </>
+          );
+        }
+        return '-';
+      },
+    },
+    {
+      title: '仪表最小数',
+      width: '2rem',
+      key: 'data_min',
+      dataIndex: 'data_min',
+    },
+    {
+      title: '仪表最大数',
+      width: '2rem',
+      key: 'data_max',
+      dataIndex: 'data_max',
+    },
+    {
+      title: '可能原因',
+      key: 'content',
+      dataIndex: 'content',
+    },
+    {
+      title: '状态',
+      key: 'status',
+      dataIndex: 'status',
+      width: '1.25rem',
+      render: (status) => {
+        switch (status) {
+          case -1:
+          case 0:
+            return (
+              <div>
+                <i
+                  className={styles.iconStatus}
+                  style={{ background: '#12CEB3' }}
+                />
+                正常
+              </div>
+            );
+          case 1:
+            return (
+              <div>
+                <i
+                  className={styles.iconStatus}
+                  style={{ background: '#FF8600' }}
+                />
+                异常
+              </div>
+            );
+          case 2:
+            return (
+              <div>
+                <i
+                  className={styles.iconStatus}
+                  style={{ background: '#FFE26D' }}
+                />
+                警告
+              </div>
+            );
+          default:
+            return (
+              <div>
+                <i
+                  className={styles.iconStatus}
+                  style={{ background: '#FF8600' }}
+                />
+                异常
+              </div>
+            );
+        }
+      },
+    },
+  ];
+
+  return (
+    <div>
+      <ModuleTitle title="压力仪表校验" />
+      <Table dataSource={allData} columns={columns} />
+    </div>
+  );
+};
+
+const WaterQuality = (props) => {
+  const { allData } = props;
+
+  const columns = [
+    {
+      title: '设备名称',
+      width: '20%',
+      key: 'item_alias',
+      dataIndex: 'item_alias',
+    },
+    {
+      title: '时间范围',
+      key: 'dataRange',
+      width: '1.5rem',
+      render: (record) => {
+        if (record.query_start && record.query_end) {
+          return (
+            <>
+              {dayjs(record.query_start).format('HH:mm:ss')}
+              <br />
+              {dayjs(record.query_end).format('HH:mm:ss')}
+            </>
+          );
+        }
+        return '-';
+      },
+    },
+    {
+      title: '仪表最小数',
+      width: '2rem',
+      key: 'data_min',
+      dataIndex: 'data_min',
+    },
+    {
+      title: '仪表最大数',
+      width: '2rem',
+      key: 'data_max',
+      dataIndex: 'data_max',
+    },
+    {
+      title: '可能原因',
+      key: 'content',
+      dataIndex: 'content',
+    },
+    {
+      title: '状态',
+      key: 'status',
+      dataIndex: 'status',
+      width: '1.25rem',
+      render: (status) => {
+        switch (status) {
+          case -1:
+          case 0:
+            return (
+              <div>
+                <i
+                  className={styles.iconStatus}
+                  style={{ background: '#12CEB3' }}
+                />
+                正常
+              </div>
+            );
+          case 1:
+            return (
+              <div>
+                <i
+                  className={styles.iconStatus}
+                  style={{ background: '#FF8600' }}
+                />
+                异常
+              </div>
+            );
+          case 2:
+            return (
+              <div>
+                <i
+                  className={styles.iconStatus}
+                  style={{ background: '#FFE26D' }}
+                />
+                警告
+              </div>
+            );
+          default:
+            return (
+              <div>
+                <i
+                  className={styles.iconStatus}
+                  style={{ background: '#FF8600' }}
+                />
+                异常
+              </div>
+            );
+        }
+      },
+    },
+  ];
+
+  return (
+    <div>
+      <ModuleTitle title="水质仪表校验" />
+      <Table dataSource={allData} columns={columns} />
+    </div>
+  );
+};

src/pages/SmartOps/index.js

@@ -262,6 +262,17 @@ function SmartOps(props) {
     };
   }, []);
 
+  const lengthCalculate = () => {
+    return (
+      autoReport?.extendWarningData?.length +
+      autoReport?.FluidLevelList?.filter((item) => item.status).length +
+      autoReport?.DrugFlowList?.filter((item) => item.status)?.length +
+      autoReport?.WaterInCheckList?.filter((item) => item.status)?.length +
+      autoReport?.WaterQualityCompareList?.length +
+      autoReport?.PressureCompareList?.length
+    );
+  };
+
   return (
     <PageContent>
       <PageTitle returnable={time}>智慧运营</PageTitle>
@@ -289,8 +300,8 @@ function SmartOps(props) {
             </div>
             <div className={styles.item2}>
               设备分析：
-              {autoReport?.extendWarningData?.length > 0
-                ? `${autoReport?.extendWarningData?.length}项可优化`
+              {lengthCalculate() > 0
+                ? `${lengthCalculate()}项可优化`
                 : '暂无优化'}
             </div>
             <div className={styles.item3}>
@@ -324,9 +335,7 @@ function SmartOps(props) {
               ),
             },
             {
-              label: `设备分析(${
-                loadingDev ? '-' : autoReport?.extendWarningData?.length
-              })`,
+              label: `设备分析(${loadingDev ? '-' : lengthCalculate()})`,
               key: '4',
               children: <DeviceAnalysis />,
             },