门禁

.umirc.ts

@@ -156,6 +156,11 @@ export default defineConfig({
       path: '/safety/:projectId', ///safety management
       component: './SafetyManagement',
     },
+    {
+      name: '门禁日志',
+      path: '/safety/detail/:projectId', ///safety management
+      component: './SafetyManagement/doorDetail',
+    },
     // {
     //   name: '权限演示',
     //   path: '/access',

src/components/TabsContent/index.less

@@ -1,7 +1,8 @@
 .tabsTitle {
   display: flex;
   align-items: center;
-  height: 40px;
+  height: 24px;
+  margin-bottom: 10px;
   :nth-child(1) {
     border-right: 1px solid black;
   }

src/pages/MessageCenter/index.js

@@ -1,11 +1,27 @@
 import PageContent from '@/components/PageContent';
 import TabsContent from '@/components/TabsContent';
+import { getNotificationList } from '@/services/message';
+import { useParams, useRequest } from '@umijs/max';
 import { Button } from 'antd';
+import dayjs from 'dayjs';
 import styles from './index.less';
 const icon = require('@/assets/message/message01.png');
 
 const MessageCenter = () => {
-  const renderItem = () => {
+  const { projectId } = useParams();
+  const { data, run, loading } = useRequest(getNotificationList, {
+    defaultParams: [{ projectId, msgType: 11 }], //, msgType: 工况：11， 自检：12
+  });
+  console.log(data);
+
+  const handleTabsChange = (tab) => {
+    tab == '1'
+      ? run({ projectId, msgType: 11 })
+      : run({ projectId, msgType: 12 });
+  };
+
+  const renderItem = (item) => {
+    const time = item?.CreatedOn ? dayjs(item?.CreatedOn) : '';
     return (
       <div className={`card-box ${styles.itemContent}`}>
         <img style={{ width: '30px', height: '30px' }} src={icon} />
@@ -13,10 +29,10 @@ const MessageCenter = () => {
           <div style={{ marginBottom: '30px' }}>
             那么大了可能圣诞快乐那算啦到哪啦凯撒到啦
           </div>
-          <div>1999999999</div>
+          <div>{time}</div>
         </div>
         <div className={styles.right}>
-          <div className={styles.redPoint} />
+          {item?.ReadStatus && <div className={styles.redPoint} />}
           <Button type="primary">查看</Button>
         </div>
       </div>
@@ -27,20 +43,21 @@ const MessageCenter = () => {
       <TabsContent
         center={false}
         defaultActiveKey="1"
-        onChange={() => {}}
+        onChange={handleTabsChange}
         items={[
           {
             label: `水厂工况`,
             key: '1',
-            children: renderItem(),
+            children: data?.list?.map((item) => renderItem(item)),
           },
           {
             label: `系统自检`,
             key: '2',
-            children: <div>999</div>,
+            children: data?.list?.map((item) => renderItem(item)),
           },
         ]}
       />
+      <div className={styles.allRead}>全部已读</div>
     </PageContent>
   );
 };

src/pages/MessageCenter/index.less

@@ -15,3 +15,9 @@
     }
   }
 }
+.allRead {
+  position: absolute;
+  top: 20px;
+  line-height: 24px;
+  right: 60px;
+}

src/pages/SafetyManagement/doorDetail.js

@@ -0,0 +1,66 @@
+import PageContent from '@/components/PageContent';
+import PageTitle from '@/components/PageTitle';
+import { queryGateOpList } from '@/services/safety';
+import { useParams, useRequest } from '@umijs/max';
+import { Table } from 'antd';
+const DoorDetail = () => {
+  const { projectId, type } = useParams();
+
+  const { data, loading, run } = useRequest(queryGateOpList, {
+    defaultParams: [{ project_id: projectId }],
+  });
+  console.log(data);
+  const columns = [
+    {
+      title: '时间',
+      dataIndex: 'created_time',
+      key: 'created_time',
+      align: 'center',
+    },
+    {
+      title: '人员',
+      dataIndex: 'user_name',
+      key: 'user_name',
+      align: 'center',
+    },
+    {
+      title: '门禁名称',
+      dataIndex: 'gate_name',
+      key: 'gate_name',
+      align: 'center',
+    },
+    {
+      title: '事件',
+      dataIndex: 'event_type',
+      key: 'event_type',
+      align: 'center',
+    },
+    {
+      title: '验证方式',
+      dataIndex: 'check_type',
+      key: 'check_type',
+      align: 'center',
+    },
+    {
+      title: '出入状态',
+      dataIndex: 'status',
+      key: 'status',
+      align: 'center',
+    },
+  ];
+
+  return (
+    <PageContent closeable={false}>
+      <PageTitle children="门禁日志" returnable />
+
+      <Table
+        loading={loading}
+        style={{ marginTop: '10px' }}
+        dataSource={data?.list}
+        columns={columns}
+        pagination={false}
+      />
+    </PageContent>
+  );
+};
+export default DoorDetail;

src/pages/SafetyManagement/index.js

@@ -1,18 +1,30 @@
 import PageContent from '@/components/PageContent';
 import TabsContent from '@/components/TabsContent';
-import { useNavigate, useParams } from '@umijs/max';
-import { Space } from 'antd';
+import { queryGateList, queryGateOverView } from '@/services/safety';
+import { useNavigate, useParams, useRequest } from '@umijs/max';
+import { Button, Space } from 'antd';
 import styles from './index.less';
 const img = require('@/assets/deviceManager/device01.png');
 const chartIcon = require('@/assets/deviceManager/chartIcon.png');
 const DeviceManager = () => {
   const { projectId } = useParams();
 
+  const { data, run, loading } = useRequest(() =>
+    queryGateList({ project_id: projectId }),
+  );
+  const { data: dataOver, loading: loadingOver } = useRequest(() =>
+    queryGateOverView({ project_id: projectId }),
+  );
+  console.log(dataOver);
+
+  const handleTabChange = (tab) => {
+    tab == '1' ? '' : run();
+  };
   return (
     <PageContent style={{ backgroundColor: 'gray' }}>
       <TabsContent
         defaultActiveKey="1"
-        onChange={() => {}}
+        onChange={handleTabChange}
         items={[
           {
             label: `视频监控`,
@@ -22,7 +34,14 @@ const DeviceManager = () => {
           {
             label: `门禁`,
             key: '2',
-            children: <Door />,
+            children: (
+              <Door
+                data={data?.list}
+                dataOver={dataOver}
+                loading={loading}
+                projectId={projectId}
+              />
+            ),
           },
         ]}
       />
@@ -30,6 +49,22 @@ const DeviceManager = () => {
   );
 };
 const Video = ({ projectId }) => {
+  const renderRed = () => {
+    return (
+      <div style={{ display: 'flex', alignItems: 'center' }}>
+        <div
+          style={{
+            backgroundColor: 'red',
+            width: '10px',
+            height: '10px',
+            borderRadius: '5px',
+            marginRight: '10px',
+          }}
+        />
+        <span>哈哈哈</span>
+      </div>
+    );
+  };
   return (
     <Space direction="vertical" className={styles.sparePart}>
       <div className={`card-box ${styles.titleContent}`}>
@@ -38,14 +73,122 @@ const Video = ({ projectId }) => {
           <div className={styles.num}>{0}</div>
           <div>在库数量（个）</div>
         </div>
+        <div>{[1, 2, 3].map((item) => renderRed())}</div>
       </div>
     </Space>
   );
 };
-const Door = () => {
+const Door = ({ data, dataOver, loading, projectId }) => {
   const navigate = useNavigate();
 
-  return <div>8888</div>;
+  const handleClick = () => {
+    navigate(`/safety/detail/${projectId}`);
+  };
+
+  const renderRed = (item) => {
+    return (
+      <div style={{ display: 'flex', alignItems: 'center' }}>
+        <div
+          style={{
+            backgroundColor: item?.status ? '12ceb3' : 'red',
+            width: '10px',
+            height: '10px',
+            borderRadius: '5px',
+            marginRight: '10px',
+          }}
+        />
+        <span>{item?.name}</span>
+      </div>
+    );
+  };
+  return (
+    <div>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          marginBottom: '10px',
+        }}
+      >
+        <div className="card-box" style={{ width: '49%' }}>
+          <div
+            className={styles.titleTwoContent}
+            style={{ width: '100%', marginBottom: '10px' }}
+          >
+            <img className={styles.img} src={img} />
+            <div>
+              <div className={styles.num}>{dataOver?.total}</div>
+              <div>在库数量（个）</div>
+            </div>
+          </div>
+          <div style={{ display: 'flex', justifyContent: 'space-around' }}>
+            <div style={{ display: 'flex', alignItems: 'center' }}>
+              <div
+                style={{
+                  backgroundColor: '#12ceb3',
+                  width: '10px',
+                  height: '10px',
+                  borderRadius: '5px',
+                  marginRight: '10px',
+                }}
+              />
+              <span>在线：{dataOver.online}</span>
+            </div>
+            <div style={{ display: 'flex', alignItems: 'center' }}>
+              <div
+                style={{
+                  backgroundColor: 'gray',
+                  width: '10px',
+                  height: '10px',
+                  borderRadius: '5px',
+                  marginRight: '10px',
+                }}
+              />
+              <span>离线：{dataOver.offline}</span>
+            </div>
+          </div>
+        </div>
+        <div className={`card-box ${styles.titleTwoContent}`}>
+          <div
+            style={{ display: 'flex', flexDirection: 'column', height: '80%' }}
+          >
+            <div style={{ display: 'flex', alignItems: 'center' }}>
+              <div
+                style={{
+                  backgroundColor: '#4a90e2',
+                  width: '10px',
+                  height: '10px',
+                  borderRadius: '5px',
+                  marginRight: '10px',
+                }}
+              />
+              <span>今日进厂人数：{dataOver.online}</span>
+            </div>
+            <div style={{ display: 'flex', alignItems: 'center' }}>
+              <div
+                style={{
+                  backgroundColor: '#f5a623',
+                  width: '10px',
+                  height: '10px',
+                  borderRadius: '5px',
+                  marginRight: '10px',
+                }}
+              />
+              <span>今日出厂人数：{dataOver.online}</span>
+            </div>
+            <Button onClick={handleClick}>门禁日志</Button>
+          </div>
+        </div>
+      </div>
+      <Space direction="vertical" className={styles.sparePart}>
+        {data?.map((item) => (
+          <div className="card-box" style={{ padding: '10px' }}>
+            {renderRed(item)}
+          </div>
+        ))}
+      </Space>
+    </div>
+  );
 };
 
 export default DeviceManager;

src/pages/SafetyManagement/index.less

@@ -7,19 +7,26 @@
   display: flex;
   justify-content: space-around;
   align-items: center;
-  .img {
-    width: 30%;
-  }
-  .num {
-    color: #ffc400;
-    font-size: 36px;
-    margin-bottom: 20px;
-  }
-  .rightIcon {
-    position: absolute;
-    right: 20px;
-    top: 20px;
-  }
+}
+.titleTwoContent {
+  position: relative;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  width: 49%;
+}
+.img {
+  width: 30%;
+}
+.num {
+  color: #ffc400;
+  font-size: 36px;
+  margin-bottom: 20px;
+}
+.rightIcon {
+  position: absolute;
+  right: 20px;
+  top: 20px;
 }
 .sparePart {
   width: 100%;

src/services/message.js

@@ -0,0 +1,12 @@
+import { stringify } from 'qs';
+import { request } from 'umi';
+/**
+ * 消息推送
+ * @param {object} params
+ * @param {number} params.currentPage
+ * @param {number} params.pageSize
+ * @returns
+ */
+export async function getNotificationList(params) {
+  return request(`/api/v1/notification/list?${stringify(params)}`);
+}

src/services/safety.js

@@ -0,0 +1,11 @@
+import { stringify } from 'qs';
+import { request } from 'umi';
+export async function queryGateList(params = {}) {
+  return request(`/api/iot/v1/gate/list?${stringify(params)}`);
+}
+export async function queryGateOpList(params = {}) {
+  return request(`/api/iot/v1/gate/op/list?${stringify(params)}`);
+}
+export async function queryGateOverView(params = {}) {
+  return request(`/api/iot/v1/gate/overview?${stringify(params)}`);
+}