联调门禁接口

src/pages/SafetyManagement/index.js

@@ -1,27 +1,67 @@
 import PageContent from '@/components/PageContent';
 import TabsContent from '@/components/TabsContent';
-import { queryGateList, queryGateOverView } from '@/services/safety';
+import {
+  queryGateList,
+  queryGateOverView,
+  queryMonitorList,
+  queryMonitorOnlineCount,
+} from '@/services/safety';
+import { UnityAction } from '@/utils/utils';
 import { useNavigate, useParams, useRequest } from '@umijs/max';
 import { Button, Space } from 'antd';
+import { useEffect, useState } from 'react';
 import styles from './index.less';
-const img = require('@/assets/deviceManager/device01.png');
+const img = require('@/assets/air-conditioner.png');
 const chartIcon = require('@/assets/deviceManager/chartIcon.png');
 const DeviceManager = () => {
   const { projectId } = useParams();
+  const [tab, setTab] = useState('1');
 
-  const { data, run, loading } = useRequest(() =>
-    queryGateList({ project_id: projectId }),
+  //门禁接口
+  const { data, run, loading } = useRequest(
+    () => queryGateList({ project_id: projectId }),
+    {
+      manual: true,
+    },
   );
-  const { data: dataOver, loading: loadingOver } = useRequest(() =>
-    queryGateOverView({ project_id: projectId }),
-  );
-  console.log(dataOver);
+  const {
+    data: dataOver,
+    run: runOver,
+    loading: loadingOver,
+  } = useRequest(() => queryGateOverView({ project_id: projectId }), {
+    manual: true,
+  });
+
+  //视频接口
+  const {
+    data: dataVList,
+    run: runVideo,
+    loading: loadingVList,
+  } = useRequest(() => queryMonitorList(projectId));
+  const {
+    data: dataVOnline,
+    run: runVOnLine,
+    loading: loadingVOnline,
+  } = useRequest(() => queryMonitorOnlineCount(projectId));
+
+  useEffect(() => {
+    if (data?.list && tab == '1') UnityAction.sendMsg('camData', data?.list);
+    if (dataVList?.list && tab == '2')
+      UnityAction.sendMsg('doorData', dataVList?.list);
+  }, [data, dataVList, tab]);
 
   const handleTabChange = (tab) => {
-    tab == '1' ? '' : run();
+    setTab(tab);
+    if (tab == '1') {
+      runVideo();
+      runVOnLine();
+    } else {
+      run();
+      runOver();
+    }
   };
   return (
-    <PageContent style={{ backgroundColor: 'gray' }}>
+    <PageContent>
       <TabsContent
         defaultActiveKey="1"
         onChange={handleTabChange}
@@ -29,7 +69,14 @@ const DeviceManager = () => {
           {
             label: `视频监控`,
             key: '1',
-            children: <Video projectId={projectId} />,
+            children: (
+              <Video
+                data={dataVList?.list}
+                dataOnline={dataVOnline}
+                loading={loadingVList}
+                projectId={projectId}
+              />
+            ),
           },
           {
             label: `门禁`,
@@ -48,20 +95,20 @@ const DeviceManager = () => {
     </PageContent>
   );
 };
-const Video = ({ projectId }) => {
-  const renderRed = () => {
+const Video = ({ projectId, data, dataOnline, loading }) => {
+  const renderRed = (item) => {
     return (
       <div style={{ display: 'flex', alignItems: 'center' }}>
         <div
           style={{
-            backgroundColor: 'red',
+            backgroundColor: item.Online ? '#12ceb3' : 'red',
             width: '10px',
             height: '10px',
             borderRadius: '5px',
             marginRight: '10px',
           }}
         />
-        <span>哈哈哈</span>
+        <span>{item.Name}</span>
       </div>
     );
   };
@@ -70,11 +117,50 @@ const Video = ({ projectId }) => {
       <div className={`card-box ${styles.titleContent}`}>
         <img className={styles.img} src={img} />
         <div>
-          <div className={styles.num}>{0}</div>
+          <div className={styles.num}>{dataOnline?.total || 0}</div>
           <div>在库数量（个）</div>
         </div>
-        <div>{[1, 2, 3].map((item) => renderRed())}</div>
+        <div>
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              marginBottom: '20px',
+            }}
+          >
+            <div
+              style={{
+                backgroundColor: '#12ceb3',
+                width: '10px',
+                height: '10px',
+                borderRadius: '5px',
+                marginRight: '10px',
+              }}
+            />
+            <span>在线：{dataOnline?.online || 0}</span>
+          </div>
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            <div
+              style={{
+                backgroundColor: 'gray',
+                width: '10px',
+                height: '10px',
+                borderRadius: '5px',
+                marginRight: '10px',
+              }}
+            />
+            <span>离线：{dataOnline?.offline || 0}</span>
+          </div>
+        </div>
       </div>
+
+      <Space direction="vertical" className={styles.sparePart}>
+        {data?.map((item) => (
+          <div className="card-box" style={{ padding: '10px' }}>
+            {renderRed(item)}
+          </div>
+        ))}
+      </Space>
     </Space>
   );
 };
@@ -90,7 +176,7 @@ const Door = ({ data, dataOver, loading, projectId }) => {
       <div style={{ display: 'flex', alignItems: 'center' }}>
         <div
           style={{
-            backgroundColor: item?.status ? '12ceb3' : 'red',
+            backgroundColor: item?.status ? '#12ceb3' : 'red',
             width: '10px',
             height: '10px',
             borderRadius: '5px',
@@ -110,7 +196,7 @@ const Door = ({ data, dataOver, loading, projectId }) => {
           marginBottom: '10px',
         }}
       >
-        <div className="card-box" style={{ width: '49%' }}>
+        <div className="card-box" style={{ width: '49%', padding: '10px' }}>
           <div
             className={styles.titleTwoContent}
             style={{ width: '100%', marginBottom: '10px' }}
@@ -132,7 +218,7 @@ const Door = ({ data, dataOver, loading, projectId }) => {
                   marginRight: '10px',
                 }}
               />
-              <span>在线：{dataOver.online}</span>
+              <span>在线：{dataOver?.online}</span>
             </div>
             <div style={{ display: 'flex', alignItems: 'center' }}>
               <div
@@ -144,15 +230,25 @@ const Door = ({ data, dataOver, loading, projectId }) => {
                   marginRight: '10px',
                 }}
               />
-              <span>离线：{dataOver.offline}</span>
+              <span>离线：{dataOver?.offline}</span>
             </div>
           </div>
         </div>
         <div className={`card-box ${styles.titleTwoContent}`}>
           <div
-            style={{ display: 'flex', flexDirection: 'column', height: '80%' }}
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              height: '100%',
+              justifyContent: 'space-around',
+            }}
           >
-            <div style={{ display: 'flex', alignItems: 'center' }}>
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+              }}
+            >
               <div
                 style={{
                   backgroundColor: '#4a90e2',
@@ -162,9 +258,14 @@ const Door = ({ data, dataOver, loading, projectId }) => {
                   marginRight: '10px',
                 }}
               />
-              <span>今日进厂人数：{dataOver.online}</span>
+              <span>今日进厂人数：{2}</span>
             </div>
-            <div style={{ display: 'flex', alignItems: 'center' }}>
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+              }}
+            >
               <div
                 style={{
                   backgroundColor: '#f5a623',
@@ -174,7 +275,7 @@ const Door = ({ data, dataOver, loading, projectId }) => {
                   marginRight: '10px',
                 }}
               />
-              <span>今日出厂人数：{dataOver.online}</span>
+              <span>今日出厂人数：{2}</span>
             </div>
             <Button onClick={handleClick}>门禁日志</Button>
           </div>

src/services/safety.js

@@ -9,3 +9,11 @@ export async function queryGateOpList(params = {}) {
 export async function queryGateOverView(params = {}) {
   return request(`/api/iot/v1/gate/overview?${stringify(params)}`);
 }
+//视频列表
+export async function queryMonitorList(projectId) {
+  return request(`/api/v1/monitor/list/${projectId}`);
+}
+//视频状态
+export async function queryMonitorOnlineCount(projectId) {
+  return request(`/api/v1/monitor/online_count/${projectId}`);
+}