Camera v1.3

web/package.json

@@ -35,7 +35,8 @@
     "swiper-react": "^1.0.0",
     "vite-plugin-cdn-import": "^0.3.5",
     "vite-plugin-compression": "^0.5.1",
-    "wujie-react": "^1.0.22"
+    "wujie-react": "^1.0.22",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@sj-distributor/eslint-plugin-react": "^0.7.1",

web/src/antd.css

@@ -123,6 +123,31 @@
   color: black;
 }
 
+.accessDatePicker,
+.accessDatePicker:hover {
+  border-width: 0;
+  background-color: transparent;
+  padding: 0;
+}
+
+.customDate .ant-popover-content {
+  margin-left: 1rem;
+  margin-top: 14rem;
+}
+
+.customCalendar .ant-radio-group {
+  display: none;
+}
+
+.tableScroll .ant-table-body {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.tableScroll .ant-table-body::-webkit-scrollbar {
+  display: none;
+}
+
 .newTeamModel .ant-modal-content {
   padding: 0;
 }

web/src/components/breadcrumb/hook.ts

@@ -59,6 +59,22 @@ export const useAction = () => {
           className: "text-xl",
         });
 
+        break;
+      case "access":
+        data.push({
+          title: "出入口檢測",
+          path: "/access",
+          className: "text-xl",
+        });
+
+        break;
+      case "inout":
+        data.push({
+          title: "进出登记",
+          path: "/inout",
+          className: "text-xl",
+        });
+
         break;
     }
 

web/src/components/check-box/hook.ts

@@ -40,6 +40,22 @@ export const useAction = (monitorSummary?: boolean) => {
       label: t(KEYS.COSTUME, { ns: "alertList" }),
       value: ICameraAiMonitorType.Costume,
     },
+    {
+      label: "觸摸二層貨物規範檢測",
+      value: ICameraAiMonitorType.TouchGoods,
+    },
+    {
+      label: "叉車熒光帶匹配檢測",
+      value: ICameraAiMonitorType.Forklift,
+    },
+    {
+      label: "識別地面水跡",
+      value: ICameraAiMonitorType.FloorWater,
+    },
+    {
+      label: "識別地面結冰",
+      value: ICameraAiMonitorType.FloorIce,
+    },
   ];
 
   const securityItem = {

web/src/components/check-box/index.tsx

@@ -30,7 +30,7 @@ export const CheckBoxComponent = (props: ICheckBoxComponentProps) => {
           <DownOutlined className="text-xs" />
         </div>
         {isOpen && (
-          <div className="absolute max-h-60 overflow-auto bg-white mt-1 p-2 rounded-lg box-content w-[11rem] space-y-1 -left-[50%] z-50">
+          <div className="absolute max-h-60 overflow-auto bg-white mt-1 p-2 rounded-lg box-content w-[14rem] space-y-1 -left-[50%] z-50">
             {checkTypeList.map((item, index) => (
               <div
                 key={index}

web/src/components/warning-select/hook.ts

@@ -45,6 +45,10 @@ export const useAction = () => {
             },
           ],
         },
+        {
+          label: "觸摸二層貨物規範檢測",
+          value: ICameraAiMonitorType.TouchGoods,
+        },
       ],
     },
     {
@@ -60,6 +64,10 @@ export const useAction = () => {
           label: t(KEYS.ABNORMALVEHICLES, { ns: "alertList" }),
           value: ICameraAiMonitorType.AbnormalVehicles,
         },
+        {
+          label: "叉車熒光帶匹配檢測",
+          value: ICameraAiMonitorType.Forklift,
+        },
       ],
     },
     {
@@ -84,6 +92,14 @@ export const useAction = () => {
             },
           ],
         },
+        {
+          label: "識別地面水跡",
+          value: ICameraAiMonitorType.FloorWater,
+        },
+        {
+          label: "識別地面結冰",
+          value: ICameraAiMonitorType.FloorIce,
+        },
       ],
     },
   ];

web/src/dtos/default.ts

@@ -36,6 +36,13 @@ export enum ICameraAiMonitorType {
   Cat = 701,
   Dog = 702,
   Bird = 703,
+  Forklift = 8, // 叉车荧光带匹配
+  DoorRolling = 9, // 卷帘门
+  DoorSafety = 10, // 安全门
+  Floor = 11, // 地面监测
+  FloorWater = 1101, // 地面水迹
+  FloorIce = 1102, // 地面结冰
+  TouchGoods = 13, // 触摸二层货物规范
 }
 
 export interface IRecordResponse {
@@ -64,6 +71,7 @@ export interface IRecordItem {
   occurrenceTime: string;
   createdTime: string;
   locationTime: string;
+  feedbackUser: string;
 }
 
 export interface IStopRealtimeResquest {

web/src/dtos/replay.ts

@@ -79,6 +79,7 @@ export interface IReplayTotalRecordItem {
 
 export interface IPlayBackGenerateRequest {
   locationId: string;
+  equipmentId: string;
   equipmentCode: string;
   startTime: string;
   endTime: string;
@@ -88,6 +89,7 @@ export interface IPlayBackGenerateRequest {
 
 export interface IGeneratePlayBackRequest {
   locationId: string;
+  equipmentId: string;
   equipmentCode: string;
   startTime: string;
   endTime: string;

web/src/dtos/warning.ts

@@ -8,6 +8,7 @@ export interface IRegisterRecordRequest {
 
 export interface IPostPlayBackGenerateRequest {
   locationId: string;
+  equipmentId: string;
   equipmentCode: string;
   startTime: string;
   endTime: string;
@@ -18,6 +19,7 @@ export interface IPostPlayBackGenerateRequest {
 export interface IPlayDetailDataDto {
   areaAdress: string;
   locationId: string;
+  equipmentId: string;
   equipmentCode: string;
   startTime: string;
   duration: number;
@@ -26,6 +28,7 @@ export interface IPlayDetailDataDto {
 
 export interface IGeneratePlayBackRequest {
   locationId: string;
+  equipmentId: string;
   equipmentCode: string;
   startTime: string;
   endTime: string;

web/src/pages/access/hook.ts

@@ -0,0 +1,157 @@
+import dayjs from "dayjs";
+import * as XLSX from "xlsx";
+import { useEffect, useState } from "react";
+import { useDebounce, useDebounceFn, useMemoizedFn } from "ahooks";
+
+import {
+  AccessTypeEnum,
+  AccessTypeLabel,
+  IAccessDataProps,
+  IAccessTableProps,
+  IPaginationDtoProps,
+  IShowPopoverProps,
+} from "./props";
+import { useAuth } from "@/hooks/use-auth";
+import { KeysOf, ValuesOf } from "@/utils/type";
+import { GetDoorListApi } from "@/services/access";
+import { isEmpty } from "ramda";
+
+const initDoorData: IAccessDataProps = {
+  count: 0,
+  doors: [],
+};
+
+export const useAction = () => {
+  const { message } = useAuth();
+
+  const yesterday = dayjs().subtract(1, "day");
+
+  const [pageLoading, setPageLoading] = useState<boolean>(false);
+
+  const [doorData, setDoorData] = useState<IAccessDataProps>(initDoorData);
+
+  const [showPopover, setShowPopover] = useState<IShowPopoverProps>({
+    accessTypeOpen: false,
+    datePickerOpen: false,
+    showCalendar: false,
+  });
+
+  const [paginationDto, setPaginationDto] = useState<IPaginationDtoProps>({
+    PageIndex: 1,
+    PageSize: 10,
+    DoorType: AccessTypeEnum.All,
+    CreatedDate: dayjs(),
+    Keyword: "",
+  });
+
+  const updatePaginationDto = useMemoizedFn(
+    (k: KeysOf<IPaginationDtoProps>, v: ValuesOf<IPaginationDtoProps>) => {
+      setPaginationDto((prev) => ({
+        ...prev,
+        [k]: v,
+      }));
+    }
+  );
+
+  const updateShowPopover = useMemoizedFn(
+    (k: KeysOf<IShowPopoverProps>, v: ValuesOf<IShowPopoverProps>) => {
+      setShowPopover((prev) => ({
+        ...prev,
+        [k]: v,
+      }));
+    }
+  );
+
+  const { run: handleOnExportDebounceFn } = useDebounceFn(
+    () => {
+      if (isEmpty(doorData.doors)) {
+        message.warning("暫無數據");
+
+        return;
+      }
+
+      const exportData =
+        doorData.doors &&
+        doorData.doors.map((item: IAccessTableProps) => ({
+          出入口类型:
+            item.doorType === AccessTypeEnum.Rolling
+              ? AccessTypeLabel[AccessTypeEnum.Rolling]
+              : AccessTypeLabel[AccessTypeEnum.Safety],
+          出入口名称: item.doorName,
+          开门次数: item.openCount,
+          合计时长: item.totalOpenDuration,
+          图片: item.previewUrl,
+          更新時間: dayjs(item.createdDate).format("YYYY-MM-DD"),
+        }));
+
+      const ws = XLSX.utils.json_to_sheet(exportData);
+
+      ws["!cols"] = [
+        { wch: 20 },
+        { wch: 20 },
+        { wch: 20 },
+        { wch: 20 },
+        { wch: 20 },
+        { wch: 20 },
+      ];
+
+      const wb = XLSX.utils.book_new();
+
+      XLSX.utils.book_append_sheet(wb, ws, "出入口檢測數據");
+
+      XLSX.writeFile(wb, `出入口檢測數據.xlsx`);
+    },
+    {
+      wait: 300,
+    }
+  );
+
+  const { run: onSearchFn } = useDebounceFn(
+    () => {
+      paginationDto.PageIndex === 1
+        ? getDoorList()
+        : updatePaginationDto("PageIndex", 1);
+    },
+    { wait: 500 }
+  );
+
+  const getDoorList = () => {
+    setPageLoading(true);
+
+    GetDoorListApi({
+      ...paginationDto,
+      DoorType:
+        paginationDto.DoorType === AccessTypeEnum.All
+          ? undefined
+          : paginationDto.DoorType,
+      CreatedDate: dayjs(paginationDto.CreatedDate).format("YYYY/MM/DD"),
+    })
+      .then((res) => {
+        setDoorData(res ?? initDoorData);
+      })
+      .catch((err) => {
+        setDoorData(initDoorData);
+
+        message.error(`獲取出入口檢測數據失敗 ${err?.msg}`);
+      })
+      .finally(() => {
+        setPageLoading(false);
+      });
+  };
+
+  useEffect(() => {
+    getDoorList();
+  }, [paginationDto.PageIndex, paginationDto.PageSize]);
+
+  return {
+    doorData,
+    onSearchFn,
+    pageLoading,
+    paginationDto,
+    yesterday,
+    showPopover,
+    handleOnExportDebounceFn,
+    updatePaginationDto,
+    updateShowPopover,
+  };
+};