update

src/pages/DeviceManager/storage.js

@@ -124,69 +124,71 @@ const StorageOverview = () => {
   return (
     <PageContent closeable={false}>
       <PageTitle children="备品统计" returnable />
-      <div className={`card-box content-title ${styles.main}`}>
-        <Spin spinning={loading}>
-          <ModuleTitle title="物料种类库存占比" />
-          <div style={{ height: '330px' }}>
-            {data?.pieData && <PieChartModule data={data.pieData} />}
-          </div>
-          <div className={styles.thereItem}>
-            <ModuleTitle title="物料库存排名前十统计" />
-            <ul
-              style={{
-                height: '330px',
-                display: 'flex',
-                flexDirection: 'column',
-              }}
-            >
-              {data?.kind && data.kind.length != 0 ? (
-                data.kind
-                  ?.sort((a, b) => b.value - a.value)
-                  .map((item) => {
-                    return (
-                      <li
-                        className={styles.li}
-                        key={`kind_${item.item}`}
-                        style={{ flexGrow: 1 }}
-                      >
-                        <div
-                          style={{
-                            width: '80px',
-                            textAlign: 'right',
-                            fontSize: '18px',
-                            whiteSpace: 'nowrap',
-                          }}
-                        >
-                          {item.item}
-                        </div>
-                        <div
-                          className={styles.line}
-                          style={{
-                            width: `${(70 * item.value) / data?.maxKind}%`,
-                          }}
-                        />
-                        {item.value}
-                      </li>
-                    );
-                  })
-              ) : (
-                <Empty />
-              )}
-            </ul>
-          </div>
-          <div className={styles.thereItem}>
-            <ModuleTitle title="物料报废统计" />
+      <div className="content-title">
+        <div className={`card-box${styles.main}`}>
+          <Spin spinning={loading}>
+            <ModuleTitle title="物料种类库存占比" />
             <div style={{ height: '330px' }}>
-              {data?.radarData && <RadarChartModule {...data.radarData} />}
+              {data?.pieData && <PieChartModule data={data.pieData} />}
             </div>
-          </div>
-          <div className={styles.twoItem}>
-            <ModuleTitle title="出入库统计" />
-            <div style={{ height: '330px' }}>
-              {data?.barData && <BarChartModule {...data.barData} />}
+            <div className={styles.thereItem}>
+              <ModuleTitle title="物料库存排名前十统计" />
+              <ul
+                style={{
+                  height: '330px',
+                  display: 'flex',
+                  flexDirection: 'column',
+                }}
+              >
+                {data?.kind && data.kind.length != 0 ? (
+                  data.kind
+                    ?.sort((a, b) => b.value - a.value)
+                    .map((item) => {
+                      return (
+                        <li
+                          className={styles.li}
+                          key={`kind_${item.item}`}
+                          style={{ flexGrow: 1 }}
+                        >
+                          <div
+                            style={{
+                              width: '80px',
+                              textAlign: 'right',
+                              fontSize: '18px',
+                              whiteSpace: 'nowrap',
+                            }}
+                          >
+                            {item.item}
+                          </div>
+                          <div
+                            className={styles.line}
+                            style={{
+                              width: `${(70 * item.value) / data?.maxKind}%`,
+                            }}
+                          />
+                          {item.value}
+                        </li>
+                      );
+                    })
+                ) : (
+                  <Empty />
+                )}
+              </ul>
+            </div>
+            <div className={styles.thereItem}>
+              <ModuleTitle title="物料报废统计" />
+              <div style={{ height: '330px' }}>
+                {data?.radarData && <RadarChartModule {...data.radarData} />}
+              </div>
+            </div>
+            <div className={styles.twoItem}>
+              <ModuleTitle title="出入库统计" />
+              <div style={{ height: '330px' }}>
+                {data?.barData && <BarChartModule {...data.barData} />}
+              </div>
             </div>
-          </div>
-        </Spin>
+          </Spin>
+        </div>
       </div>
     </PageContent>
   );

src/pages/Smart/index.js

@@ -139,7 +139,7 @@ const Work = (props) => {
       </Row>
       <Row gutter={16}>
         <Col span={12}>
-          <div className={styles.card2}>
+          <div className={styles.card2} style={{ marginBottom: 0 }}>
             <h3>能耗数据</h3>
             <ul>
               <li>
@@ -152,7 +152,7 @@ const Work = (props) => {
           </div>
         </Col>
         <Col span={12}>
-          <div className={styles.card2}>
+          <div className={styles.card2} style={{ marginBottom: 0 }}>
             <h3>药耗数据</h3>
             <ul>
               <li>

src/pages/SmartOps/components/VideoAnalysis.js

@@ -3,8 +3,7 @@ import TabsContent from '@/components/TabsContent';
 import ThresholdDetail from '@/components/ThresholdDetail';
 import { UnityAction } from '@/utils/utils';
 import { Collapse, Spin, Table, Tabs } from 'antd';
-import { useEffect, useState } from 'react';
-import ThresholdBar from './ThresholdBar';
+import { useEffect, useMemo, useState } from 'react';
 import styles from './VideoAnalysis.less';
 
 const { TabPane } = Tabs;
@@ -21,14 +20,25 @@ function VideoAnalysis(props) {
   const [prevKey, setPrevKey] = useState();
   const [selectedName, setSelectedName] = useState('');
 
-  const handleCollapse = (key) => {
-    if (key === prevKey) return;
-    setPrevKey(key);
-    const device = data.list.find((item) => item.id === key)?.device_name;
-    if (device) {
-      UnityAction.sendMsg('SynCam', device);
-    }
-  };
+  const errorData = useMemo(() => {
+    const list1 =
+      videoData.dumu_list?.map((item) => {
+        return { ...item, type_name: '视频报警', type: 1 };
+      }) || [];
+    const list2 =
+      videoData.environment_list
+        ?.filter((item) => item.status)
+        .map((item) => {
+          return { ...item, type_name: '环境监测', type: 2 };
+        }) || [];
+    const list3 =
+      videoData.fluid_level_list
+        ?.filter((item) => item.status)
+        .map((item) => {
+          return { ...item, type_name: '液位监测', type: 3 };
+        }) || [];
+    return [...list1, ...list2, ...list3];
+  }, [videoData]);
 
   useEffect(() => {
     UnityAction.on('SynCam', selectedItem);
@@ -47,7 +57,7 @@ function VideoAnalysis(props) {
 
   const onTabChange = (tab) => {
     setTab(tab);
-    // UnityAction.sendMsg('ProcessAnalysisType', tab);
+    UnityAction.sendMsg('SensorAnalysisType', tab);
   };
 
   return (
@@ -62,10 +72,8 @@ function VideoAnalysis(props) {
             key: '1',
             children: (
               <AnalysisContent
-                data={data}
-                videoData={videoData}
+                errorData={errorData}
                 selectedName={selectedName}
-                prevKey={prevKey}
               />
             ),
           },
@@ -81,11 +89,18 @@ function VideoAnalysis(props) {
   );
 }
 
-function AnalysisContent({ data, selectedName, prevKey }) {
+function AnalysisContent({ errorData, selectedName }) {
+  const [prevKey, setPrevKey] = useState();
   const handleImgClick = (item) => {
     localStorage.setItem('preview', JSON.stringify(item.data));
     UnityAction.sendMsg('SensorPic');
   };
+  const handleCollapse = (item) => {
+    const key = item.type == 1 ? item.device_name : item.device_code;
+    if (key === prevKey) return;
+    setPrevKey(key);
+    UnityAction.sendMsg('SynCam', key);
+  };
 
   const renderContent = (key, item) => {
     let content = '';
@@ -98,7 +113,7 @@ function AnalysisContent({ data, selectedName, prevKey }) {
               {item.event_type}
               <img
                 className={styles.img}
-                src={item.url}
+                src={item.path}
                 onClick={() => handleImgClick(item)}
               />
             </div>
@@ -109,16 +124,28 @@ function AnalysisContent({ data, selectedName, prevKey }) {
         content = (
           <>
             <div className={styles.contentFlex}>
-              <div>参数：温度</div>
+              <div>参数：{item.patrol_name}</div>
               <div className={styles.threshold}>
                 <span>阈值范围：</span>
                 <div style={{ width: '180px' }}>
-                  <ThresholdBar current={0.5} thresholds={[0, 1]} />
+                  <ThresholdDetail
+                    current={item.value || 0}
+                    data={{
+                      JsonNumThreshold: item?.json_num_threshold,
+                      Type: 2,
+                    }}
+                  />
                 </div>
               </div>
-
               <div>
-                状态：<span className={styles.textAbnormal}>异常</span>
+                状态：
+                {item?.status <= 0 ? (
+                  <span className={styles.textNormal}>正常</span>
+                ) : item.status == 1 ? (
+                  <span className={styles.textAbnormal}>异常</span>
+                ) : (
+                  <span className={styles.textWarning}>警告</span>
+                )}
               </div>
             </div>
           </>
@@ -128,11 +155,29 @@ function AnalysisContent({ data, selectedName, prevKey }) {
         content = (
           <>
             <div className={styles.contentFlex}>
-              <div>原液位：12.01</div>
-              <div> 仪表液位：12.12 </div>
-
+              <div>原液位：{item.origin_value}</div>
+              <div> 差值：{item.value} </div>
+              <div className={styles.threshold}>
+                <span>阈值范围：</span>
+                <div style={{ width: '180px' }}>
+                  <ThresholdDetail
+                    current={item.value || 0}
+                    data={{
+                      JsonNumThreshold: item?.json_num_threshold,
+                      Type: 2,
+                    }}
+                  />
+                </div>
+              </div>
               <div>
-                状态：<span className={styles.textAbnormal}>异常</span>
+                状态：
+                {item?.status <= 0 ? (
+                  <span className={styles.textNormal}>正常</span>
+                ) : item.status == 1 ? (
+                  <span className={styles.textAbnormal}>异常</span>
+                ) : (
+                  <span className={styles.textWarning}>警告</span>
+                )}
               </div>
             </div>
           </>
@@ -141,31 +186,36 @@ function AnalysisContent({ data, selectedName, prevKey }) {
     }
     return content;
   };
-
+  const getClassName = (item) => {
+    const key = item.type == 1 ? item.device_name : item.device_code;
+    return selectedName == key || prevKey == key
+      ? styles.tableSelect
+      : styles.table;
+  };
   return (
     <div
       className={styles.page}
       style={{ height: 'calc(100vh - 630px)', overflow: 'auto' }}
     >
-      {data?.length > 0 ? (
-        data?.map((item) => (
+      {errorData?.length > 0 ? (
+        errorData?.map((item) => (
           <div data-name={item.device_name}>
             <Collapse
-              defaultActiveKey={[item.id]}
-              key={item.id}
-              className={
-                selectedName == item.device_name || prevKey == item.id
-                  ? styles.tableSelect
-                  : styles.table
-              }
-              expandIcon={() => <div className={styles.typeText}>视频报警</div>}
+              defaultActiveKey={[item.device_name]}
+              key={item.device_name}
+              className={getClassName(item)}
+              expandIcon={() => (
+                <div className={styles.typeText}>{item.type_name}</div>
+              )}
               onChange={(e) => {
-                handleCollapse(item.id);
+                handleCollapse(item);
               }}
             >
-              <Panel header={item.device_name} key={item.id}>
+              <Panel header={item.device_name} key={item.device_name}>
                 <div className={styles.box}>
-                  <div className={styles.item}>{renderContent(1, item)}</div>
+                  <div className={styles.item}>
+                    {renderContent(item.type, item)}
+                  </div>
                 </div>
               </Panel>
             </Collapse>
@@ -179,7 +229,11 @@ function AnalysisContent({ data, selectedName, prevKey }) {
 }
 
 function AllContent({ data = [], videoData = {} }) {
-  const { environment_list = [], fluid_level_list = [] } = videoData;
+  const {
+    environment_list = [],
+    fluid_level_list = [],
+    dumu_list = [],
+  } = videoData;
   const [selectedRowKeys, setSelectedRowKeys] = useState([]);
   const columns1 = [
     {
@@ -339,7 +393,7 @@ function AllContent({ data = [], videoData = {} }) {
       render: (item) => (
         <img
           className={styles.img}
-          src={item.url}
+          src={item.path}
           onClick={() => handleImgClick(item)}
         />
       ),

src/pages/SmartOps/index.js

@@ -6,7 +6,7 @@ import {
   queryProjectConfig,
   querySimulationProfit,
 } from '@/services/SmartOps';
-import { getDetail, getPatrolPerception } from '@/services/dumu';
+import { getPatrolPerception } from '@/services/dumu';
 import { GetTokenFromUrl, UnityAction } from '@/utils/utils';
 import {
   connect,
@@ -41,7 +41,6 @@ function SmartOps(props) {
   const patrolId = searchParams.get('patrolId');
   const [videoNum, setVideoNum] = useState(0);
 
-  const [tableData, setTableData] = useState([]);
   const signalRef = useRef();
 
   const {
@@ -156,75 +155,32 @@ function SmartOps(props) {
     () =>
       getPatrolPerception({
         project_id: projectId * 1,
-        patrol_id: patrolId || reportData.PatrolId,
+        patrol_id: patrolId || reportData?.PatrolId,
       }),
     {
       onSuccess: (data) => {
-        if (data.dumu_list?.length > 0) {
-          setTableData(data?.dumu_list);
-          data.dumu_list.forEach((item) => {
-            detailRun(item.id, { signal: signalRef.current.signal });
-          });
-        }
         const count1 = data.dumu_list?.length || 0;
         const count2 =
           data.environment_list?.filter((item) => item.status)?.length || 0;
         const count3 =
           data.fluid_level_list?.filter((item) => item.status)?.length || 0;
         setVideoNum(count1 + count2 + count3);
+        const Cam = data.dumu_list?.map((item) => item.device_name) || [];
+        const Dev1 =
+          data.environment_list?.map((item) => {
+            return { DeviceCode: item.device_code, grade_alarm: item.status };
+          }) || [];
+        const Dev2 =
+          data.fluid_level_list?.map((item) => {
+            return { DeviceCode: item.device_code, grade_alarm: item.status };
+          }) || [];
+        const params = { Cam, Dev: [...Dev1, ...Dev2] };
       },
     },
   );
 
-  const { run: detailRun } = useRequest(getDetail, {
-    manual: true,
-    fetchKey: (id) => id,
-    cacheKey: (id) => id,
-    onSuccess: (data) => {
-      var item = tableData?.find((child) => child.id === data.id);
-      if (item) {
-        item.url = base64ToImageUrl(data.event_bg);
-        item.data = data;
-      }
-      setTableData([...tableData]);
-    },
-  });
-  // const { run, loading: loadingVideo } = useRequest(
-  //   () =>
-  //     getCameraList(projectId, {
-  //       s_time: dayjs().subtract(10, 'month').format('YYYY-MM-DD HH:mm:ss'), //sTime,
-  //       e_time: eTime,
-  //       pageSize: 999,
-  //     }),
-  //   {
-  //     manual: true,
-  //     onSuccess: (data) => {
-  //       setTableData(data);
-  //       sendUnityMsg(data?.list);
-  //       // data?.list?.forEach(item => {
-  //       //   detailRun(item.id, { signal: signalRef.current.signal });
-  //       // });
-  //     },
-  //   },
-  // );
-
-  // const videoAnalysisNumber = tableData?.pagination?.total || 0;
   const AnalysisNumber = list?.pagenation?.total || 0;
 
-  function base64ToImageUrl(base64String) {
-    const byteCharacters = atob(base64String);
-    const byteArrays = [];
-
-    for (let i = 0; i < byteCharacters.length; i++) {
-      byteArrays.push(byteCharacters.charCodeAt(i));
-    }
-
-    const byteArray = new Uint8Array(byteArrays);
-    const blob = new Blob([byteArray], { type: 'image/png' });
-    const imageUrl = URL.createObjectURL(blob);
-
-    return imageUrl;
-  }
   // 利润
   const { data: profitData, run: getProfit } = useRequest(
     () =>
@@ -251,26 +207,14 @@ function SmartOps(props) {
     return dayjs(eTime).format('MM-DD HH:mm');
   }, [eTime]);
 
-  const sendUnityMsg = (list) => {
-    if (!list || list?.length == 0) return;
-    const names = list.map((item) => item.device_name);
-    UnityAction.sendMsg('SensorAnalysis', names.join(','));
-  };
-
   const onChangeTab = (type) => {
     UnityAction.sendMsg('SmartAnalysisTab', type);
-    if (type == '3') {
-      tableData?.list?.forEach((item) => {
-        detailRun(item.id, { signal: signalRef.current.signal });
-      });
-    }
   };
 
   useEffect(() => {
     if (!eTime) return;
     initDate();
     runWork();
-    // run();
     runVideo();
     getProfit();
   }, [eTime]);
@@ -374,7 +318,6 @@ function SmartOps(props) {
               children: (
                 <VideoAnalysis
                   videoNum={videoNum}
-                  data={tableData}
                   videoData={videoData}
                   loading={loadingVideo}
                 />