feat: 系统自检-仪表校验

.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;
+    }
+  }
+}