液位

src/pages/EqSelfInspection/components/Detail.js

@@ -147,6 +147,23 @@ function Detail(props) {
           title={<ModuleTitle title="设备自检报告" />}
         ></ReportCom>
 
+        {/* 液位异常 */}
+        <LiquidLevelCom
+          sendMessageToUnity={sendMessageToUnity}
+          select={select}
+          allData={data?.FluidLevelList}
+          key="liquid"
+          type={'liquid'}
+          userList={userList}
+          title={<ModuleTitle title="液位异常" />}
+        />
+        {/* 加药流量校验 */}
+        {/* <FlowCom
+          sendMessageToUnity={sendMessageToUnity}
+          select={select}
+          allData={data?.FluidLevelList}
+          title={<ModuleTitle title="加药流量校验" />}
+        /> */}
         {/* 工艺自检报告"> */}
         <div className={styles.content}>
           <div className={styles.tableStatus}>
@@ -174,16 +191,6 @@ function Detail(props) {
             userList={userList}
             title={<ModuleTitle title="环境异常" />}
           ></ReportCom>
-          {/* 液位异常 */}
-          <LiquidLevelCom
-            sendMessageToUnity={sendMessageToUnity}
-            select={select}
-            allData={data?.FluidLevelList}
-            key="liquid"
-            type={'liquid'}
-            userList={userList}
-            title={<ModuleTitle title="液位异常" />}
-          />
 
           {/* 安防检测异常 */}
           <ReportDumCom
@@ -956,6 +963,159 @@ function LiquidLevelCom(props) {
   );
 }
 
+function FlowTable(props) {
+  const { onClickItem, data = {}, items } = props;
+  const columns = [
+    {
+      title: '设备名称',
+      width: '20%',
+      dataIndex: 'device_name',
+    },
+    {
+      title: '实际流量',
+      width: '20%',
+      dataIndex: 'origin_value',
+    },
+    {
+      title: '计量流量',
+      width: '16%',
+      dataIndex: 'value',
+    },
+    {
+      title: '差值',
+      width: '15%',
+      dataIndex: 'value',
+    },
+    {
+      title: '设定值范围',
+      width: '30%',
+      render: (record) => (
+        <ThresholdDetail
+          current={record.value || 0}
+          data={{
+            JsonNumThreshold: record?.json_num_threshold,
+            Type: record.type || 2,
+          }}
+        />
+      ),
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      render: (status) => {
+        switch (status) {
+          case -1:
+          case 0:
+            return (
+              <div>
+                <i
+                  className={styles.iconStatus}
+                  style={{ background: '#12CEB3' }}
+                ></i>
+                正常
+              </div>
+            );
+          case 1:
+            return (
+              <div>
+                <i
+                  className={styles.iconStatus}
+                  style={{ background: '#FFE26D' }}
+                ></i>
+                异常
+              </div>
+            );
+          case 2:
+            return (
+              <div>
+                <i
+                  className={styles.iconStatus}
+                  style={{ background: '#FFE26D' }}
+                ></i>
+                警告
+              </div>
+            );
+        }
+      },
+    },
+  ];
+  const handleClickItem = (data) => {
+    onClickItem(`DeviceTable-${data.device_code}`, {
+      type: data.status,
+      deviceCode: data.device_code,
+    });
+  };
+
+  return (
+    <Table
+      columns={columns}
+      dataSource={items}
+      rowKey="device_code"
+      locale={{
+        emptyText: <Empty />,
+      }}
+      pagination={false}
+    />
+  );
+}
+
+function FlowCom(props) {
+  const { sendMessageToUnity, select, allData = [], type, title } = props;
+  const [activeKey, setActiveKey] = useState('1');
+
+  const errorData = useMemo(() => {
+    const errorData = allData?.filter((item) => item.status);
+    return errorData;
+  }, [allData]);
+
+  const handleTabsChange = (activeKey) => {
+    setActiveKey(activeKey);
+  };
+  return (
+    <div className={styles.detailCard}>
+      <div className={styles.tableTop}>
+        {title}
+        <TabsContent
+          defaultActiveKey="1"
+          onChange={handleTabsChange}
+          small={true}
+          items={[
+            {
+              key: '1',
+              label: `异常/警告(${errorData?.length || 0})`,
+              children: <div></div>,
+            },
+            {
+              key: '2',
+              label: `全部(${allData?.length || 0})`,
+              children: <div></div>,
+            },
+          ]}
+        ></TabsContent>
+      </div>
+
+      {activeKey == '1' && (
+        <FlowTable
+          onClickItem={sendMessageToUnity}
+          select={select}
+          items={errorData}
+          key={type}
+          type={type}
+        />
+      )}
+      {activeKey == '2' && (
+        <FlowTable
+          onClickItem={sendMessageToUnity}
+          select={select}
+          items={allData}
+          key={type}
+          type={type}
+        />
+      )}
+    </div>
+  );
+}
+
 function ReportDumCom(props) {
   const { data = [], title } = props;
   const columns = [