Merge branch 'develop-lf' of http://gitlab.zhst-dev.com/web-project/zhst-lambo into develop-lf

2024-03-25 17:23:02 +08:00 · 2024-03-25 17:23:02 +08:00 · 95bd78f3b1
commit 95bd78f3b1
parent 0d2a8a232d d370fed819
641 changed files with 23821 additions and 16 deletions
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@ -1,12 +1,32 @@
 stages:
  - build
+  - package
+  - deploy
+
+cache:
+  policy: pull
+  key: '$CI_COMMIT_REF_NAME'
+  paths:
+    - node_modules/

 build:
+  image: registry.zhst.com/video-analysis/pnpm4
  tags:
    - linux
  stage: build
  script:
-    - cd /home
-    - ls
-    - git
-    - node
+    - chmod +x ./deploy/build.sh && ./deploy/build.sh
+  artifacts:
+    name: '${CI_PROJECT_NAME}_${CI_COMMIT_REF_NAME}_${CI_JOB_NAME}_${CI_PIPELINE_ID}'
+    paths:
+      - ./app/public/*
+
+package:
+  tags:
+    - linux_shell
+  stage: package
+  script:
+    - chmod +x ./deploy/package.sh && ./deploy/package.sh
+  dependencies:
+    - build
+
--- a/5
+++ b/5
@ -0,0 +1,5 @@
+FROM alpine:latest
+
+ADD ./app/public/ /app/public/
+
+CMD [ "sh", "-c", "while true; do echo zhst-web; sleep 1; done" ]
--- a/deploy/build.sh
+++ b/deploy/build.sh
@ -0,0 +1,9 @@
+pnpm install
+
+pnpm run build:master
+
+mkdir -p ./app/public/
+
+mv ./dist/* ./app/public/
+
+cat ./app/public/index.html | head -n 7
--- a/deploy/package.sh
+++ b/deploy/package.sh
@ -0,0 +1,10 @@
+#! /bin/bash
+set -e
+
+export DOCKER_CLI_EXPERIMENTAL=enabled
+docker login registry.zhst.com -u zhst -p Zhst666\&
+
+# docker build -t registry.zhst.com/${CI_PROJECT_NAMESPACE}/${CI_PROJECT_NAME}:${CI_COMMIT_REF_NAME//\//-}-${CI_PIPELINE_ID} -f Dockerfile .
+# docker push registry.zhst.com/${CI_PROJECT_NAMESPACE}/${CI_PROJECT_NAME}:${CI_COMMIT_REF_NAME//\//-}-${CI_PIPELINE_ID}
+docker buildx build  --platform linux/arm64,linux/amd64 -t registry.zhst.com/${CI_PROJECT_NAMESPACE}/${CI_PROJECT_NAME}:${CI_COMMIT_REF_NAME//\//-}-${CI_PIPELINE_ID} -f Dockerfile .  --push
+
--- a/global.d.ts
+++ b/global.d.ts
@ -0,0 +1 @@
+declare module '*.less';
--- a/package.json
+++ b/package.json
@ -14,6 +14,7 @@
  ],
  "scripts": {
    "add": "pnpm changeset add",
+    "build": "pnpm --filter=@zhst/* run build",
    "build:master": "dumi build",
    "build:watch": "father dev",
    "dev": "dumi dev",
--- a/packages/biz/es/BigImageModal/BigImageModal.d.ts
+++ b/packages/biz/es/BigImageModal/BigImageModal.d.ts
@ -0,0 +1,40 @@
+import React from 'react';
+import type { ModalProps, DescriptionsProps, TabsProps, VideoViewRef, ImgViewRef } from '@zhst/meta';
+import './index.less';
+export declare const componentPrefix = "zhst-image";
+export type TAB_TYPE = 'COMPATER' | 'NORMAL' | 'VIDEO';
+export type MODEL_TYPE = 'VIDEO' | 'IMAGE';
+export interface BigImageModalProps extends ModalProps {
+    visible: boolean;
+    activeTab?: TAB_TYPE;
+    attributeList: {
+        title: string;
+        children: Pick<DescriptionsProps, 'items'>;
+    };
+    tabs: {
+        data: Pick<TabsProps, 'items'> & {
+            key: TAB_TYPE;
+        };
+    };
+    dataSource: any;
+    imageData: any;
+    relatedData: any;
+    isRelated?: boolean;
+    footer?: React.ReactNode;
+    showCarousel?: boolean;
+    onTabChange?: (newVal?: TAB_TYPE, oldVal?: TAB_TYPE) => void;
+    onIndexChange?: (newVal?: number, oldVal?: number) => void;
+    transformPropFunc: (data: any) => void;
+}
+interface BigModalRef {
+    tab: TAB_TYPE;
+    setTab: (tab: TAB_TYPE) => void;
+    modalRef: ModalProps;
+    activeKey: string;
+    setActiveKey: (val: string) => void;
+    videoPlayerRef: VideoViewRef;
+    combineImageRef: any;
+    bigImagePreviewRef: ImgViewRef;
+}
+declare const BigImageModal: React.FC<BigImageModalProps, BigModalRef>;
+export default BigImageModal;
--- a/packages/biz/es/BigImageModal/components/CombineImage/index.d.ts
+++ b/packages/biz/es/BigImageModal/components/CombineImage/index.d.ts
@ -0,0 +1,11 @@
+import { FC } from 'react';
+interface ComBineImageProps {
+    data: {
+        imgSummary: string;
+        compaterImages: string[];
+        imageKey: string;
+        score: number;
+    };
+}
+declare const ComBineImage: FC<ComBineImageProps>;
+export default ComBineImage;
--- a/packages/biz/es/BigImageModal/components/CombineImage/index.js
+++ b/packages/biz/es/BigImageModal/components/CombineImage/index.js
@ -0,0 +1,58 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { useRef, forwardRef, useImperativeHandle, useState } from 'react';
+import { CompareImage, Flex, Score } from '@zhst/meta';
+var ComBineImage = /*#__PURE__*/forwardRef(function (props, ref) {
+  var data = props.data;
+  var imgSummary = data.imgSummary,
+    _data$compaterImages = data.compaterImages,
+    compaterImages = _data$compaterImages === void 0 ? [] : _data$compaterImages;
+  var targetImageRef = useRef(null);
+  var compareImageRef = useRef(null);
+  var _useState = useState(compaterImages.findIndex(function (_url) {
+      return imgSummary === _url;
+    }) || 0),
+    _useState2 = _slicedToArray(_useState, 2),
+    targetIndex = _useState2[0],
+    setTargetIndex = _useState2[1];
+  useImperativeHandle(ref, function () {
+    return {
+      compareImageRef: compareImageRef,
+      targetImageRef: targetImageRef
+    };
+  });
+  return /*#__PURE__*/React.createElement(Flex, {
+    justify: "space-evenly",
+    align: "center",
+    style: {
+      padding: '0 32px'
+    }
+  }, /*#__PURE__*/React.createElement(CompareImage, {
+    ref: targetImageRef,
+    preDisable: targetIndex === 0,
+    nextDisable: targetIndex >= compaterImages.length - 1,
+    onNext: function onNext() {
+      return setTargetIndex(targetIndex + 1);
+    },
+    onPre: function onPre() {
+      return setTargetIndex(targetIndex - 1);
+    },
+    showScore: false,
+    openRoll: !!compaterImages.length,
+    url: compaterImages[targetIndex] || imgSummary,
+    label: "\u76EE\u6807\u56FE"
+  }), /*#__PURE__*/React.createElement(Score, {
+    score: data.score
+  }), /*#__PURE__*/React.createElement(CompareImage, {
+    ref: compareImageRef,
+    url: data.imageKey,
+    openRoll: false,
+    score: data.score,
+    label: "\u5BF9\u6BD4\u56FE"
+  }));
+});
+export default ComBineImage;
--- a/packages/biz/es/BigImageModal/components/navigation/index.d.ts
+++ b/packages/biz/es/BigImageModal/components/navigation/index.d.ts
@ -0,0 +1,13 @@
+import * as React from 'react';
+import './index.less';
+declare const Navigation: React.FC<{
+    show?: boolean;
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    prev?: boolean;
+    next?: boolean;
+    disabled?: boolean;
+    className?: string;
+    color?: string;
+    hoverColor?: string;
+}>;
+export default Navigation;
--- a/packages/biz/es/BigImageModal/mock.d.ts
+++ b/packages/biz/es/BigImageModal/mock.d.ts
@ -0,0 +1,245 @@
+export declare const IMAGE_DATA: {
+    enAbleDeleteFeature: boolean;
+    tabsFilter: string[];
+    selectIndex: number;
+    disableBtn: number[];
+    dataSource: {
+        objectId: string;
+        condition: {
+            featureInfo: null;
+            featureData: string;
+            imageData: string;
+            alg: string;
+            rect: {
+                x: number;
+                y: number;
+                w: number;
+                h: number;
+            };
+            objectImageUrl: string;
+            srcImageUrl: string;
+        };
+        score: number;
+        timestamp: number;
+        deviceId: string;
+        id: string;
+        name: string;
+        dirid: string;
+        status: string;
+        longitude: number;
+        latitude: number;
+        caseId: string;
+        caseGroup: string;
+        isDeleted: string;
+        objectIndex: {
+            objectId: string;
+            solutionId: string;
+            deviceId: string;
+            fragmentId: string;
+        };
+        objectType: string;
+        isObjectTrack: boolean;
+        pathId: string;
+        frameInfo: {
+            frameId: string;
+            frameTimestamp: string;
+            width: number;
+            height: number;
+            originWidth: number;
+            originHeight: number;
+            offsetTime: string;
+            skipNumber: string;
+        };
+        level: number;
+        bboxInFrame: {
+            x: number;
+            y: number;
+            w: number;
+            h: number;
+        };
+        bboxExtInFrame: {
+            x: number;
+            y: number;
+            w: number;
+            h: number;
+        };
+        objectImageKey: string;
+        objectExtImageKey: string;
+        frameImageKey: string;
+        confidence: number;
+        sourceObjectId: string;
+        storeTimestamp: string;
+        gbNumber: string;
+        qualityScore: number;
+        subObjectCount: number;
+        subObjectType: string[];
+        subObjectIds: string[];
+        solutionId: string;
+        fragmentId: string;
+        contrastKey: string;
+        compaterImages: string[];
+        imgSummary: string;
+        imageKey: string;
+        srcImageUrl: string;
+        algorithmVersion: string;
+        cameraId: string;
+        cameraName: string;
+    }[];
+    isArchiveDetail: boolean;
+    ToolProps: {
+        renderVideoBtn: boolean;
+        disableVideo: boolean;
+    };
+    specialTitle: string;
+};
+export declare const BIG_IMAGE_DATA: ({
+    imageKey: string;
+    imgSummary: string;
+    flvUrl: string;
+    compaterImages: string[];
+    odRect: {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+    };
+    attachImg: {
+        url: string;
+        label: string;
+    }[];
+    score: string;
+    showScore: boolean;
+    cameraPosition: string;
+    time: string;
+    objects: {
+        objectIndex: {
+            objectId: string;
+            solutionId: string;
+            deviceId: string;
+            fragmentId: string;
+        };
+        objectType: string;
+        sourceObjectId: string;
+        level: number;
+        confidence: number;
+        frameInfo: {
+            frameId: string;
+            frameTimestamp: string;
+            width: number;
+            height: number;
+            originWidth: number;
+            originHeight: number;
+            offsetTime: string;
+            skipNumber: string;
+        };
+        infoOnSource: {
+            bboxInFrame: {
+                bboxRatio: {
+                    x: number;
+                    y: number;
+                    w: number;
+                    h: number;
+                };
+            };
+            countInSource: number;
+            indexInSource: number;
+        };
+        qualityScore: number;
+    }[];
+} | {
+    imageKey: string;
+    imgSummary: string;
+    odRect: {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+    };
+    attachImg: {
+        url: string;
+        label: string;
+    }[];
+    flvUrl: string;
+    score: number;
+    showScore: boolean;
+    cameraPosition: string;
+    time: string;
+    objects: ({
+        objectIndex: {
+            objectId: string;
+            solutionId: string;
+            deviceId: string;
+            fragmentId: string;
+        };
+        objectType: string;
+        sourceObjectId: string;
+        frameInfo: {
+            frameId: string;
+            frameTimestamp: string;
+            width: number;
+            height: number;
+            originWidth: number;
+            originHeight: number;
+            offsetTime: string;
+            skipNumber: string;
+        };
+        infoOnSource: {
+            bboxInFrame: {
+                bboxRatio: {
+                    x: number;
+                    y: number;
+                    w: number;
+                    h: number;
+                };
+            };
+            countInSource: number;
+            indexInSource: number;
+        };
+        qualityScore: number;
+        level?: undefined;
+        confidence?: undefined;
+    } | {
+        objectIndex: {
+            objectId: string;
+            solutionId: string;
+            deviceId: string;
+            fragmentId: string;
+        };
+        objectType: string;
+        sourceObjectId: string;
+        level: number;
+        confidence: number;
+        frameInfo: {
+            frameId: string;
+            frameTimestamp: string;
+            width: number;
+            height: number;
+            originWidth: number;
+            originHeight: number;
+            offsetTime: string;
+            skipNumber: string;
+        };
+        infoOnSource: {
+            bboxInFrame: {
+                bboxRatio: {
+                    x: number;
+                    y: number;
+                    w: number;
+                    h: number;
+                };
+            };
+            countInSource: number;
+            indexInSource: number;
+        };
+        qualityScore: number;
+    })[];
+    compaterImages?: undefined;
+})[];
+export declare const attributeList: {
+    title: string;
+    children: {
+        key: string;
+        label: string;
+        children: string;
+    }[];
+}[];
--- a/packages/biz/es/BigImageModal/util/bigImageModalAdapter.d.ts
+++ b/packages/biz/es/BigImageModal/util/bigImageModalAdapter.d.ts
@ -0,0 +1,118 @@
+/**
+ * 适配老的大屏组件数据格式传入
+ */
+import React from 'react';
+import { AlgorithmVersionStr, HumanProperty, ObjectType, Rect } from '@zhst/types';
+import { VideoViewProps, ImgViewProps, VideoViewRef, ImgViewRef } from '@zhst/meta';
+export type TAB_TYPE = 'COMPATER' | 'NORMAL' | 'TRACK';
+export type MODEL_TYPE = 'VIDEO' | 'IMAGE';
+export interface CarouselProps {
+    hasPre?: boolean;
+    hasNext?: boolean;
+    selectIndex: number;
+    setSelectIndex: React.Dispatch<React.SetStateAction<number>>;
+    dataSource: Array<{
+        key: string;
+        url: string;
+    }>;
+}
+export type ISelectItem = Partial<Omit<ImgViewProps, 'screenshotButtonRender'>> & Partial<Omit<VideoViewProps, 'screenshotButtonRender'>>;
+/**
+ * 描述列表 description
+ */
+export interface HeaderProps {
+    value: TAB_TYPE;
+    onChange: (type: TAB_TYPE) => void;
+    tabsFilter: TAB_TYPE[];
+}
+export interface ParamProps {
+    tab: string;
+    selectItem: ISelectItem;
+    imgViewRef: React.MutableRefObject<ImgViewRef>;
+    VideoViewRef: React.MutableRefObject<VideoViewRef>;
+    model: MODEL_TYPE;
+    setModel: React.Dispatch<React.SetStateAction<MODEL_TYPE>>;
+    scale$: number;
+    showCrop$: boolean;
+}
+/**
+ * 工具栏
+ */
+export interface ToolProps {
+    renderRight?: (props: ParamProps) => React.ReactNode;
+    renderLeft?: (props: ParamProps) => React.ReactNode;
+    renderVideoBtn?: boolean;
+    param: ParamProps;
+    disableVideo: boolean;
+}
+export interface BigImageData {
+    extendRectList: (Rect & {
+        algorithmVersion: AlgorithmVersionStr;
+        imageKey: string;
+    })[];
+    rectList: (Rect & {
+        algorithmVersion: AlgorithmVersionStr;
+        imageKey: string;
+    })[];
+    attachImg: {
+        url: string;
+        label: '形体' | '人脸';
+    }[];
+    odRect: Rect;
+    compaterImages: string[];
+    constractKey: string;
+    frameImageKey: string;
+    imageKey?: string;
+    imgSummary: string;
+    objectExtImageKey: string;
+    attributeList: {
+        label: string;
+        list: any[];
+    }[];
+    archiveImages?: any;
+    spaceName: string;
+    objectIndex?: {
+        deviceId: string;
+        fragmentId: string;
+        objectId: string;
+        solutionId: string;
+    };
+    objectType: ObjectType;
+    objectId: string;
+    bodyObjectId?: string;
+    faceObjectId?: string;
+    sourceObjectId?: string;
+    cameraId: string;
+    cameraName: string;
+    selectIndex: number;
+    humanProperty: HumanProperty;
+    qualityScore?: number;
+    score: number;
+    timestamp: string;
+    bodyImageUrl: string;
+    faceImageUrl: string;
+    algorithmVersion: AlgorithmVersionStr;
+    bodySpaceName: string;
+    faceSpaceName: string;
+    position: {
+        lat: number;
+        lng: number;
+    };
+    solutionId?: string;
+    [index: string]: any;
+}
+export interface ImageModalDataProps {
+    targetData: BigImageData[];
+    compactData: BigImageData[];
+}
+export interface ModalAdapterConfigProps {
+    oldMode?: boolean;
+}
+/**
+ * 大图组件适配器，兼容老接口
+ * @param Cmp 大图组件
+ * @param config 额外配置
+ * @returns 大图组件
+ */
+declare const adapter: (Cmp: any, config: ModalAdapterConfigProps) => any;
+export default adapter;
--- a/packages/biz/es/BigImageModal/util/bigImageModalAdapter.js
+++ b/packages/biz/es/BigImageModal/util/bigImageModalAdapter.js
@ -0,0 +1,50 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+/**
+ * 适配老的大屏组件数据格式传入
+ */
+import React from 'react';
+
+/**
+ * 描述列表 description
+ */
+
+/**
+ * 工具栏
+ */
+
+/**
+ * 兼容老数据格式
+ * @param _data 老数据格式
+ * @returns newData
+ */
+var translateOldImageData = function translateOldImageData(_data) {
+  return _objectSpread(_objectSpread({}, _data), {}, {
+    open: _data.visible,
+    onCancel: _data.onClose
+  });
+};
+
+/**
+ * 大图组件适配器，兼容老接口
+ * @param Cmp 大图组件
+ * @param config 额外配置
+ * @returns 大图组件
+ */
+var adapter = function adapter(Cmp, config) {
+  var _config$oldMode = config.oldMode,
+    oldMode = _config$oldMode === void 0 ? false : _config$oldMode;
+  return function (props) {
+    var newProps = oldMode ? translateOldImageData(props) : props;
+    console.log('adapter----适配数据', props, newProps);
+
+    // 该属性已经废弃
+    delete newProps.visible;
+    return /*#__PURE__*/React.createElement(Cmp, newProps);
+  };
+};
+export default adapter;
--- a/packages/biz/es/Demo/index.d.ts
+++ b/packages/biz/es/Demo/index.d.ts
@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: () => React.JSX.Element;
+export default _default;
--- a/packages/biz/es/RealTimeMonitor/RealTimeMonitor.d.ts
+++ b/packages/biz/es/RealTimeMonitor/RealTimeMonitor.d.ts
@ -0,0 +1,21 @@
+import React from 'react';
+import { IRecord, VideoPlayerCardProps, ViewLargerImageModalRef } from '@zhst/biz';
+interface RealTimeMonitorProps {
+    videoDataSource?: VideoPlayerCardProps[];
+    handleWindowClick?: (key?: string) => void;
+    handleCloseButtonClick?: (key?: string) => void;
+    selectedWindowKey?: string;
+    warningDataSource?: IRecord[];
+    viewLargerImageModalRef?: React.RefObject<ViewLargerImageModalRef>;
+    handleDownloadImg?: (imgSrc?: string) => void;
+    onRecordClick?: (record?: IRecord) => void;
+    selectedRecordId?: string;
+    isRecordListLoading?: boolean;
+    recordListTitle?: string;
+    style?: React.CSSProperties;
+    cardStyle?: React.CSSProperties;
+    imgStyle?: React.CSSProperties;
+    largeImageTitle?: string;
+}
+export declare const RealTimeMonitor: React.FC<RealTimeMonitorProps>;
+export default RealTimeMonitor;
--- a/packages/biz/es/RealTimeMonitor/RealTimeMonitor.js
+++ b/packages/biz/es/RealTimeMonitor/RealTimeMonitor.js
@ -0,0 +1,35 @@
+import React from 'react';
+import WindowToggle from "./components/WindowToggle";
+import WarningRecordList from "./components/WarningRecordList";
+export var RealTimeMonitor = function RealTimeMonitor(props) {
+  var videoDataSource = props.videoDataSource,
+    handleWindowClick = props.handleWindowClick,
+    handleCloseButtonClick = props.handleCloseButtonClick,
+    selectedWindowKey = props.selectedWindowKey,
+    warningDataSource = props.warningDataSource,
+    viewLargerImageModalRef = props.viewLargerImageModalRef,
+    handleDownloadImg = props.handleDownloadImg,
+    onRecordClick = props.onRecordClick,
+    selectedRecordId = props.selectedRecordId,
+    isRecordListLoading = props.isRecordListLoading;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "zhst-biz-real-time-monitor",
+    style: {
+      display: 'flex'
+    }
+  }, /*#__PURE__*/React.createElement(WindowToggle, {
+    selectedWindowKey: selectedWindowKey,
+    dataSource: videoDataSource,
+    handleWindowClick: handleWindowClick,
+    handleCloseButtonClick: handleCloseButtonClick
+  }), /*#__PURE__*/React.createElement(WarningRecordList, {
+    dataSource: warningDataSource,
+    handleDownloadImg: handleDownloadImg,
+    onRecordClick: onRecordClick,
+    selectedRecordId: selectedRecordId,
+    viewLargerImageModalRef: viewLargerImageModalRef,
+    isRecordListLoading: isRecordListLoading,
+    recordListTitle: "\u76D1\u63A7\u9884\u8B66\u8BB0\u5F55"
+  }));
+};
+export default RealTimeMonitor;
--- a/packages/biz/es/RealTimeMonitor/components/WarningRecordList/WarningRecordList.d.ts
+++ b/packages/biz/es/RealTimeMonitor/components/WarningRecordList/WarningRecordList.d.ts
@ -0,0 +1,18 @@
+import React from 'react';
+import { IRecord, ViewLargerImageModalRef } from '@zhst/biz';
+import "./index.less";
+interface WarningRecordListProps {
+    dataSource?: IRecord[];
+    viewLargerImageModalRef?: React.RefObject<ViewLargerImageModalRef>;
+    handleDownloadImg?: (imgSrc?: string) => void;
+    onRecordClick?: (record?: IRecord) => void;
+    selectedRecordId?: string;
+    isRecordListLoading?: boolean;
+    recordListTitle?: string;
+    style?: React.CSSProperties;
+    cardStyle?: React.CSSProperties;
+    imgStyle?: React.CSSProperties;
+    largeImageTitle?: string;
+}
+declare const WarningRecordList: React.FC<WarningRecordListProps>;
+export default WarningRecordList;
--- a/packages/biz/es/RealTimeMonitor/components/WarningRecordList/WarningRecordList.js
+++ b/packages/biz/es/RealTimeMonitor/components/WarningRecordList/WarningRecordList.js
@ -0,0 +1,81 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React from 'react';
+import { ViewLargerImageModal, WarningRecordCard } from '@zhst/biz';
+import { Empty, Space, Spin } from 'antd';
+import "./index.less";
+import { LoadingOutlined } from '@ant-design/icons';
+var WarningRecordList = function WarningRecordList(props) {
+  var _props$dataSource = props.dataSource,
+    dataSource = _props$dataSource === void 0 ? [] : _props$dataSource,
+    viewLargerImageModalRef = props.viewLargerImageModalRef,
+    selectedRecordId = props.selectedRecordId,
+    handleDownloadImg = props.handleDownloadImg,
+    _onRecordClick = props.onRecordClick,
+    isRecordListLoading = props.isRecordListLoading,
+    recordListTitle = props.recordListTitle,
+    style = props.style,
+    cardStyle = props.cardStyle,
+    imgStyle = props.imgStyle,
+    largeImageTitle = props.largeImageTitle;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "zhst-biz-warning-record-list",
+    style: style
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "header"
+  }, recordListTitle), /*#__PURE__*/React.createElement("div", {
+    className: "body"
+  }, isRecordListLoading ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: '100%',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(Spin, {
+    indicator: /*#__PURE__*/React.createElement(LoadingOutlined, {
+      style: {
+        fontSize: 24
+      }
+    })
+  })) : (dataSource === null || dataSource === void 0 ? void 0 : dataSource.length) > 0 ? /*#__PURE__*/React.createElement(Space, {
+    direction: "vertical",
+    size: 10
+  }, dataSource === null || dataSource === void 0 ? void 0 : dataSource.map(function (record, index) {
+    if (index > 2) return;
+    return /*#__PURE__*/React.createElement(WarningRecordCard, {
+      key: record === null || record === void 0 ? void 0 : record.id,
+      record: record,
+      onRecordClick: function onRecordClick(record) {
+        _onRecordClick === null || _onRecordClick === void 0 || _onRecordClick(record);
+      },
+      selectedRecordId: selectedRecordId,
+      cardStyle: _objectSpread({
+        width: 300,
+        height: 264
+      }, cardStyle),
+      imgStyle: _objectSpread({
+        width: 280,
+        height: 169
+      }, imgStyle)
+    });
+  })) : /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: '100%',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(Empty, {
+    description: "\u6682\u65E0\u6570\u636E"
+  }))), /*#__PURE__*/React.createElement(ViewLargerImageModal, {
+    ref: viewLargerImageModalRef,
+    downloadImg: handleDownloadImg,
+    title: largeImageTitle
+  }));
+};
+export default WarningRecordList;
--- a/packages/biz/es/RealTimeMonitor/components/WarningRecordList/index.d.ts
+++ b/packages/biz/es/RealTimeMonitor/components/WarningRecordList/index.d.ts
@ -0,0 +1,2 @@
+import WarningRecordList from './WarningRecordList';
+export default WarningRecordList;
--- a/packages/biz/es/RealTimeMonitor/components/WarningRecordList/index.js
+++ b/packages/biz/es/RealTimeMonitor/components/WarningRecordList/index.js
@ -0,0 +1,2 @@
+import WarningRecordList from "./WarningRecordList";
+export default WarningRecordList;
--- a/packages/biz/es/RealTimeMonitor/components/WarningRecordList/index.less
+++ b/packages/biz/es/RealTimeMonitor/components/WarningRecordList/index.less
@ -0,0 +1,20 @@
+.zhst-biz-warning-record-list {
+  display: flex;
+  flex-direction: column;
+  border-left: solid 1px #00000026;
+  width: 320px;
+
+  .header {
+    width: 100%;
+    height: 48px;
+    background-color: #EFF2F4;
+    padding: 10px 20px;
+    box-sizing: border-box;
+  }
+
+  .body {
+    padding: 10px;
+    overflow: hidden;
+    flex: 1;
+  }
+}
--- a/packages/biz/es/RealTimeMonitor/components/WindowToggle/WindowToggle.d.ts
+++ b/packages/biz/es/RealTimeMonitor/components/WindowToggle/WindowToggle.d.ts
@ -0,0 +1,11 @@
+import React from 'react';
+import { VideoPlayerCardProps } from '@zhst/biz';
+import './index.less';
+interface WindowToggleProps {
+    dataSource?: VideoPlayerCardProps[];
+    handleWindowClick?: (key?: string) => void;
+    handleCloseButtonClick?: (key?: string) => void;
+    selectedWindowKey?: string;
+}
+export declare const WindowToggle: React.FC<WindowToggleProps>;
+export default WindowToggle;
--- a/packages/biz/es/RealTimeMonitor/components/WindowToggle/WindowToggle.js
+++ b/packages/biz/es/RealTimeMonitor/components/WindowToggle/WindowToggle.js
@ -0,0 +1,81 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { useState } from 'react';
+import { Segmented } from 'antd';
+import { AppstoreOutlined, BarsOutlined } from '@ant-design/icons';
+import { VideoPlayerCard } from '@zhst/biz';
+import "./index.less";
+import { theme } from 'antd/lib';
+export var WindowToggle = function WindowToggle(props) {
+  var _props$dataSource = props.dataSource,
+    dataSource = _props$dataSource === void 0 ? [] : _props$dataSource,
+    handleWindowClick = props.handleWindowClick,
+    handleCloseButtonClick = props.handleCloseButtonClick,
+    selectedWindowKey = props.selectedWindowKey;
+  var _useState = useState("large"),
+    _useState2 = _slicedToArray(_useState, 2),
+    size = _useState2[0],
+    setSize = _useState2[1];
+  var useToken = theme.useToken;
+  var _useToken = useToken(),
+    token = _useToken.token;
+  var getLabelStyle = function getLabelStyle(isSelected) {
+    return _objectSpread({
+      padding: "0 11px",
+      background: "#fff"
+    }, isSelected ? {
+      background: token.colorPrimary,
+      color: '#fff'
+    } : {});
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "zhst-biz-window-toggle"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "header"
+  }, /*#__PURE__*/React.createElement(Segmented, {
+    defaultValue: "large",
+    options: [{
+      value: 'large',
+      label: /*#__PURE__*/React.createElement("div", {
+        style: getLabelStyle(size === 'large')
+      }, /*#__PURE__*/React.createElement(BarsOutlined, null))
+    }, {
+      value: 'small',
+      label: /*#__PURE__*/React.createElement("div", {
+        style: getLabelStyle(size === 'small')
+      }, /*#__PURE__*/React.createElement(AppstoreOutlined, null))
+    }],
+    onChange: function onChange(value) {
+      // 当一个窗口时 默认 selectedkey 第一条数据的 windowkey
+      if (value === 'large' && dataSource.length > 0) {
+        var windowKey = dataSource[0].windowKey;
+        handleWindowClick === null || handleWindowClick === void 0 || handleWindowClick(windowKey);
+      }
+      setSize(value);
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "body"
+  }, dataSource === null || dataSource === void 0 ? void 0 : dataSource.map(function (item, index) {
+    if (size === "large" && index > 0) return;
+    return /*#__PURE__*/React.createElement(VideoPlayerCard, _extends({
+      key: item.windowKey,
+      selectedWindowKey: selectedWindowKey,
+      size: size
+    }, item, {
+      handleWindowClick: handleWindowClick,
+      handleCloseButtonClick: handleCloseButtonClick
+    }));
+  })));
+};
+export default WindowToggle;
--- a/packages/biz/es/RealTimeMonitor/components/WindowToggle/index.d.ts
+++ b/packages/biz/es/RealTimeMonitor/components/WindowToggle/index.d.ts
@ -0,0 +1,2 @@
+import WindowToggle from './WindowToggle';
+export default WindowToggle;
--- a/packages/biz/es/RealTimeMonitor/components/WindowToggle/index.js
+++ b/packages/biz/es/RealTimeMonitor/components/WindowToggle/index.js
@ -0,0 +1,2 @@
+import WindowToggle from "./WindowToggle";
+export default WindowToggle;
--- a/packages/biz/es/RealTimeMonitor/components/WindowToggle/index.less
+++ b/packages/biz/es/RealTimeMonitor/components/WindowToggle/index.less
@ -0,0 +1,45 @@
+.zhst-biz-window-toggle {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+
+  .header {
+    width: 100%;
+    height: 48px;
+    background-color: #EFF2F4;
+    padding: 10px 20px;
+    box-sizing: border-box;
+
+    .ant-segmented {
+      padding: 0;
+
+      .ant-segmented-group {
+        border-radius: 4px;
+        overflow: hidden;
+
+        .ant-segmented-item {
+          border-radius: 0;
+
+          .ant-segmented-item-label {
+            padding: 0;
+          }
+        }
+      }
+    }
+  }
+
+  .body {
+    flex: 1;
+    width: 100%;
+    background-color: #E5EAEC;
+    padding: 10px;
+    box-sizing: border-box;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+
+    >div {
+      margin: 10px;
+    }
+  }
+}
--- a/packages/biz/es/RealTimeMonitor/index.d.ts
+++ b/packages/biz/es/RealTimeMonitor/index.d.ts
@ -0,0 +1,2 @@
+import RealTimeMonitor from './RealTimeMonitor';
+export default RealTimeMonitor;
--- a/packages/biz/es/RealTimeMonitor/index.js
+++ b/packages/biz/es/RealTimeMonitor/index.js
@ -0,0 +1,2 @@
+import RealTimeMonitor from "./RealTimeMonitor";
+export default RealTimeMonitor;
--- a/packages/biz/es/VideoPlayerCard/VideoPlayerCard.d.ts
+++ b/packages/biz/es/VideoPlayerCard/VideoPlayerCard.d.ts
@ -0,0 +1,19 @@
+import { CardProps } from 'antd';
+import React, { ReactNode } from 'react';
+import './index.less';
+export interface VideoPlayerCardProps {
+    windowKey?: string;
+    selectedWindowKey?: string;
+    showType?: 'video' | "image";
+    imgSrc?: string;
+    videoSrc?: string;
+    cardProps?: CardProps;
+    errorReasonText?: string;
+    isWindowLoading?: boolean;
+    size?: 'large' | 'small';
+    title?: string | ReactNode;
+    handleCloseButtonClick?: (key?: string) => void;
+    handleWindowClick?: (key?: string) => void;
+}
+export declare const VideoPlayerCard: React.FC<VideoPlayerCardProps>;
+export default VideoPlayerCard;
--- a/packages/biz/es/VideoPlayerCard/VideoPlayerCard.js
+++ b/packages/biz/es/VideoPlayerCard/VideoPlayerCard.js
@ -0,0 +1,140 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { Card, Space, Spin, Button } from 'antd';
+import { theme } from 'antd/lib';
+import { VideoPlayer } from '@zhst/meta';
+import React, { useState, useEffect, useRef } from 'react';
+import { CloseOutlined, LoadingOutlined } from '@ant-design/icons';
+import "./index.less";
+export var VideoPlayerCard = function VideoPlayerCard(props) {
+  var componentName = "zhst-biz-video-player-card";
+  var showType = props.showType,
+    imgSrc = props.imgSrc,
+    videoSrc = props.videoSrc,
+    cardProps = props.cardProps,
+    isWindowLoading = props.isWindowLoading,
+    errorReasonText = props.errorReasonText,
+    size = props.size,
+    title = props.title,
+    handleCloseButtonClick = props.handleCloseButtonClick,
+    handleWindowClick = props.handleWindowClick,
+    windowKey = props.windowKey,
+    _props$selectedWindow = props.selectedWindowKey,
+    selectedWindowKey = _props$selectedWindow === void 0 ? '' : _props$selectedWindow;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    cardContent = _useState2[0],
+    setCardContent = _useState2[1];
+  var useToken = theme.useToken;
+  var _useToken = useToken(),
+    token = _useToken.token;
+  var videoRef = useRef(null);
+  var selectedBorderStyle = {
+    border: "2px solid ".concat(token.colorPrimary),
+    boxShadow: " 0px 2px 9px 0px rgba(0,0,0,0.16)"
+  };
+  var cardStyle = _objectSpread(_objectSpread({}, size === 'large' ? {
+    height: 931
+  } : {
+    height: 456,
+    cursor: 'pointer'
+  }), size === 'small' && selectedWindowKey === windowKey ? selectedBorderStyle : {});
+  var videoPlayerCardStyle = size === 'small' ? {
+    width: "calc(50% - 20px)"
+  } : {
+    flex: 1
+  };
+  useEffect(function () {
+    if (!isWindowLoading && (videoSrc || imgSrc)) {
+      var contentElement = null;
+      if (videoSrc) {
+        var _videoRef$current;
+        contentElement = /*#__PURE__*/React.createElement(VideoPlayer, {
+          ref: videoRef,
+          url: videoSrc
+        });
+        (_videoRef$current = videoRef.current) === null || _videoRef$current === void 0 || _videoRef$current.setShowCrop(true);
+      } else if (imgSrc) {
+        contentElement = /*#__PURE__*/React.createElement("img", {
+          alt: "\u9996\u5E27\u56FE",
+          src: imgSrc,
+          style: {
+            width: "100%",
+            height: "100%",
+            display: 'block'
+          }
+        });
+      }
+      setCardContent(contentElement);
+    } else {
+      setCardContent(null);
+    }
+  }, [showType, imgSrc, videoSrc, isWindowLoading]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: componentName,
+    onClick: function onClick() {
+      handleWindowClick === null || handleWindowClick === void 0 || handleWindowClick(windowKey);
+    },
+    style: videoPlayerCardStyle
+  }, /*#__PURE__*/React.createElement(Card, _extends({
+    title: /*#__PURE__*/React.createElement(Space, {
+      style: {
+        width: "100%",
+        justifyContent: "space-between"
+      }
+    }, /*#__PURE__*/React.createElement("div", null, title), /*#__PURE__*/React.createElement("div", {
+      className: "card-close-button"
+    }, /*#__PURE__*/React.createElement(Button, {
+      type: "text",
+      onClick: function onClick() {
+        handleCloseButtonClick === null || handleCloseButtonClick === void 0 || handleCloseButtonClick(windowKey);
+      }
+    }, /*#__PURE__*/React.createElement(CloseOutlined, null)))),
+    style: _objectSpread({
+      display: "flex",
+      flexDirection: "column",
+      borderRadius: 4,
+      overflow: "hidden"
+    }, cardStyle),
+    bodyStyle: {
+      flex: 1
+    }
+  }, cardProps), cardContent ? /*#__PURE__*/React.createElement(React.Fragment, null, cardContent) : /*#__PURE__*/React.createElement("div", {
+    style: {
+      backgroundColor: '#000',
+      height: '100%',
+      display: 'flex',
+      padding: '20px',
+      boxSizing: 'border-box'
+    }
+  }, isWindowLoading ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1,
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(Spin, {
+    indicator: /*#__PURE__*/React.createElement(LoadingOutlined, {
+      style: {
+        fontSize: 24
+      }
+    })
+  })) : !!errorReasonText && /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: token.colorError
+    }
+  }, errorReasonText))));
+};
+export default VideoPlayerCard;
--- a/packages/biz/es/VideoPlayerCard/index.d.ts
+++ b/packages/biz/es/VideoPlayerCard/index.d.ts
@ -0,0 +1,3 @@
+import VideoPlayerCard from './VideoPlayerCard';
+export type { VideoPlayerCardProps } from './VideoPlayerCard';
+export default VideoPlayerCard;
--- a/packages/biz/es/VideoPlayerCard/index.js
+++ b/packages/biz/es/VideoPlayerCard/index.js
@ -0,0 +1,2 @@
+import VideoPlayerCard from "./VideoPlayerCard";
+export default VideoPlayerCard;
--- a/packages/biz/es/VideoPlayerCard/index.less
+++ b/packages/biz/es/VideoPlayerCard/index.less
@ -0,0 +1,30 @@
+.zhst-biz-video-player-card {
+  .ant-card-head {
+    padding: 0 20px;
+  }
+
+  .ant-card-body {
+    padding: 0;
+    overflow: hidden;
+    border-radius: 0;
+
+    .zhst-image__video-view {
+      height: 100%;
+    }
+  }
+
+  .card-close-button {
+    .ant-btn {
+      padding: 0 3px;
+      height: 22px;
+      color: #00000073;
+    }
+
+    .ant-btn:hover {
+      padding: 0 3px;
+      height: 22px;
+      color: #000000e0;
+    }
+  }
+
+}
--- a/packages/biz/es/ViewLargerImageModal/ViewLargerImageModal.d.ts
+++ b/packages/biz/es/ViewLargerImageModal/ViewLargerImageModal.d.ts
@ -0,0 +1,25 @@
+import React from 'react';
+import { ModalProps, SpaceProps } from 'antd';
+import './index.less';
+type ViewLargerImageModalParams = {
+    imgSrc?: string;
+    warningData?: {
+        label?: string;
+        value?: string;
+    }[];
+};
+export interface ViewLargerImageModalRef {
+    show: (params?: ViewLargerImageModalParams) => void;
+    handleCancel: () => void;
+}
+export interface ViewLargerImageModalProps {
+    imgStyle?: React.CSSProperties;
+    downloadImg?: (imgSrc?: string) => void;
+    title?: string;
+    downloadText?: string;
+    modalProps?: ModalProps;
+    spaceProps?: SpaceProps;
+}
+export declare const ViewLargerImageModal: React.ForwardRefExoticComponent<ViewLargerImageModalProps & React.RefAttributes<ViewLargerImageModalRef>>;
+export default ViewLargerImageModal;
+export declare const useViewLargerImageModal: () => React.RefObject<ViewLargerImageModalRef>;
--- a/packages/biz/es/ViewLargerImageModal/ViewLargerImageModal.js
+++ b/packages/biz/es/ViewLargerImageModal/ViewLargerImageModal.js
@ -0,0 +1,106 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { useImperativeHandle, useRef, useState, forwardRef } from 'react';
+import { Modal, Space } from 'antd';
+import theme from 'antd/lib/theme';
+import { DownloadOutlined } from '@ant-design/icons';
+import "./index.less";
+export var ViewLargerImageModal = /*#__PURE__*/forwardRef(function (props, ref) {
+  var modalProps = props.modalProps,
+    downloadImg = props.downloadImg,
+    imgStyle = props.imgStyle,
+    _props$title = props.title,
+    title = _props$title === void 0 ? '预警大图' : _props$title,
+    _props$downloadText = props.downloadText,
+    downloadText = _props$downloadText === void 0 ? '下载大图' : _props$downloadText,
+    spaceProps = props.spaceProps;
+  var useToken = theme.useToken;
+  var _useToken = useToken(),
+    token = _useToken.token;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    imgSrc = _useState4[0],
+    setImgSrc = _useState4[1];
+  var _useState5 = useState(),
+    _useState6 = _slicedToArray(_useState5, 2),
+    warningData = _useState6[0],
+    setWarningData = _useState6[1];
+  var handleCancel = function handleCancel() {
+    setOpen(false);
+  };
+  useImperativeHandle(ref, function () {
+    return {
+      show: function show(_params) {
+        setOpen(true);
+        setImgSrc(_params === null || _params === void 0 ? void 0 : _params.imgSrc);
+        setWarningData(_params === null || _params === void 0 ? void 0 : _params.warningData);
+      },
+      handleCancel: handleCancel
+    };
+  });
+  return /*#__PURE__*/React.createElement(Modal, _extends({
+    className: "zhst-biz-view-warning-larger-image-modal",
+    open: open,
+    destroyOnClose: true,
+    title: title,
+    width: "1029px",
+    footer: null,
+    onCancel: handleCancel
+  }, modalProps), /*#__PURE__*/React.createElement(Space, _extends({
+    size: 0,
+    styles: {
+      item: {
+        backgroundColor: '#F6F9FAFF'
+      }
+    }
+  }, spaceProps), /*#__PURE__*/React.createElement("img", {
+    alt: title,
+    src: imgSrc,
+    style: _objectSpread({
+      width: 789,
+      height: 444,
+      display: 'block'
+    }, imgStyle)
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "right-context"
+  }, warningData === null || warningData === void 0 ? void 0 : warningData.map(function (_ref) {
+    var label = _ref.label,
+      value = _ref.value;
+    return /*#__PURE__*/React.createElement("div", {
+      key: label
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "context-key"
+    }, "".concat(label, ": ")), value);
+  }), imgSrc && downloadImg && /*#__PURE__*/React.createElement("div", {
+    className: "img-download",
+    style: {
+      color: token.colorPrimary
+    },
+    onClick: function onClick() {
+      return downloadImg === null || downloadImg === void 0 ? void 0 : downloadImg(imgSrc);
+    }
+  }, /*#__PURE__*/React.createElement(DownloadOutlined, null), /*#__PURE__*/React.createElement("span", {
+    style: {
+      paddingLeft: 3
+    }
+  }, downloadText)))));
+});
+export default ViewLargerImageModal;
+export var useViewLargerImageModal = function useViewLargerImageModal() {
+  return useRef(null);
+};
--- a/packages/biz/es/ViewLargerImageModal/index.d.ts
+++ b/packages/biz/es/ViewLargerImageModal/index.d.ts
@ -0,0 +1,4 @@
+import ViewLargerImageModal, { useViewLargerImageModal } from './ViewLargerImageModal';
+export type { ViewLargerImageModalRef, ViewLargerImageModalProps } from './ViewLargerImageModal';
+export default ViewLargerImageModal;
+export { useViewLargerImageModal };
--- a/packages/biz/es/ViewLargerImageModal/index.js
+++ b/packages/biz/es/ViewLargerImageModal/index.js
@ -0,0 +1,3 @@
+import ViewLargerImageModal, { useViewLargerImageModal } from "./ViewLargerImageModal";
+export default ViewLargerImageModal;
+export { useViewLargerImageModal };
--- a/packages/biz/es/ViewLargerImageModal/index.less
+++ b/packages/biz/es/ViewLargerImageModal/index.less
@ -0,0 +1,62 @@
+.zhst-biz-view-warning-larger-image-modal {
+  font-family: MicrosoftYaHei;
+
+  .ant-modal-content {
+    padding: 0;
+    height: 492px;
+    border-radius: 6px;
+    overflow: hidden;
+
+    .ant-modal-close {
+      top: 14px;
+      right: 16px;
+    }
+
+    .ant-modal-header {
+      height: 48px;
+      line-height: 48px;
+      margin-bottom: 0;
+
+      .ant-modal-title {
+        height: 100%;
+        line-height: 48px;
+        font-weight: bold;
+        padding-left: 20px;
+      }
+    }
+
+    .ant-modal-body {
+      height: 444px;
+
+      >div {
+        width: 100%;
+        height: 100%;
+        align-items: flex-start;
+
+        >div:nth-child(2) {
+          position: relative;
+          flex: 1;
+          box-sizing: border-box;
+          height: 100%;
+          padding: 30px 16px;
+
+          .right-context>div {
+            margin-bottom: 20px;
+          }
+
+          .right-context .context-key {
+            font-weight: bold;
+          }
+
+          .img-download {
+            position: absolute;
+            bottom: 0;
+            cursor: pointer;
+          }
+
+        }
+
+      }
+    }
+  }
+}
--- a/packages/biz/es/WarningRecordCard/WarningRecordCard.d.ts
+++ b/packages/biz/es/WarningRecordCard/WarningRecordCard.d.ts
@ -0,0 +1,30 @@
+import { CardProps } from 'antd';
+import React from 'react';
+import './index.less';
+export interface IRecord {
+    imgSrc?: string;
+    id?: string;
+    /**
+     * 预警类型
+     */
+    warningType?: string;
+    warningInfo?: string[];
+    boxId: string;
+    position: string;
+    cabietId?: string;
+    cabietText?: string;
+    warningTime?: string;
+    warningTimestamp?: string | number;
+    warningTimeFormat?: string;
+}
+export interface WarningRecordCardProps {
+    record?: IRecord;
+    onRecordClick?: (record?: IRecord) => void;
+    style?: React.CSSProperties;
+    cardProps?: CardProps;
+    selectedRecordId?: string;
+    cardStyle?: React.CSSProperties;
+    imgStyle?: React.CSSProperties;
+}
+export declare const WarningRecordCard: React.FC<WarningRecordCardProps>;
+export default WarningRecordCard;
--- a/packages/biz/es/WarningRecordCard/WarningRecordCard.js
+++ b/packages/biz/es/WarningRecordCard/WarningRecordCard.js
@ -0,0 +1,89 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { Card, Space, Divider } from 'antd';
+import { theme } from 'antd/lib';
+import React from 'react';
+import dayjs from 'dayjs';
+import "./index.less";
+;
+;
+export var WarningRecordCard = function WarningRecordCard(props) {
+  var componentName = "zhst-biz-warning-record-card";
+  var record = props.record,
+    onRecordClick = props.onRecordClick,
+    style = props.style,
+    cardProps = props.cardProps,
+    selectedRecordId = props.selectedRecordId,
+    cardStyle = props.cardStyle,
+    imgStyle = props.imgStyle;
+  var _ref = record || {},
+    imgSrc = _ref.imgSrc,
+    id = _ref.id,
+    warningType = _ref.warningType,
+    _ref$warningInfo = _ref.warningInfo,
+    warningInfo = _ref$warningInfo === void 0 ? [] : _ref$warningInfo,
+    cabietText = _ref.cabietText,
+    warningTime = _ref.warningTime,
+    warningTimestamp = _ref.warningTimestamp,
+    _ref$warningTimeForma = _ref.warningTimeFormat,
+    warningTimeFormat = _ref$warningTimeForma === void 0 ? 'YYYY-MM-DD HH:mm:ss' : _ref$warningTimeForma;
+  var formattedDate = warningTimestamp ? dayjs(warningTimestamp).format(warningTimeFormat) : '';
+  var warningTimeShow = warningTime ? warningTime : formattedDate;
+  var useToken = theme.useToken;
+  var _useToken = useToken(),
+    token = _useToken.token;
+  var selectedBorderStyle = {
+    border: "2px solid ".concat(token.colorPrimary),
+    boxShadow: " 0px 2px 9px 0px rgba(0,0,0,0.16)"
+  };
+  var selectedCardStyle = _objectSpread({}, selectedRecordId === (record === null || record === void 0 ? void 0 : record.id) ? selectedBorderStyle : {});
+  var handleClick = function handleClick() {
+    onRecordClick === null || onRecordClick === void 0 || onRecordClick(record);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: componentName,
+    key: id,
+    onClick: handleClick,
+    style: style
+  }, /*#__PURE__*/React.createElement(Card, _extends({
+    cover: /*#__PURE__*/React.createElement("img", {
+      alt: "\u9884\u8B66\u56FE",
+      src: imgSrc,
+      style: _objectSpread({
+        width: 336,
+        height: 203,
+        borderRadius: 0
+      }, imgStyle)
+    }),
+    style: _objectSpread(_objectSpread({
+      width: 356,
+      height: 302,
+      padding: 10,
+      borderRadius: 4
+    }, selectedCardStyle), cardStyle)
+  }, cardProps), /*#__PURE__*/React.createElement("div", {
+    className: "left-context"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "warning-type"
+  }, warningType), /*#__PURE__*/React.createElement(Space, {
+    size: 0,
+    split: /*#__PURE__*/React.createElement(Divider, {
+      type: "vertical"
+    })
+  }, warningInfo === null || warningInfo === void 0 ? void 0 : warningInfo.map(function (item, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: index,
+      className: "info-item"
+    }, item);
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "warning-time"
+  }, warningTimeShow)), /*#__PURE__*/React.createElement("div", {
+    className: "cabietInfo"
+  }, cabietText)));
+};
+export default WarningRecordCard;
--- a/packages/biz/es/WarningRecordCard/index.d.ts
+++ b/packages/biz/es/WarningRecordCard/index.d.ts
@ -0,0 +1,3 @@
+import WarningRecordCard from './WarningRecordCard';
+export type { IRecord, WarningRecordCardProps } from './WarningRecordCard';
+export default WarningRecordCard;
--- a/packages/biz/es/WarningRecordCard/index.js
+++ b/packages/biz/es/WarningRecordCard/index.js
@ -0,0 +1,2 @@
+import WarningRecordCard from "./WarningRecordCard";
+export default WarningRecordCard;
--- a/packages/biz/es/WarningRecordCard/index.less
+++ b/packages/biz/es/WarningRecordCard/index.less
@ -0,0 +1,27 @@
+.zhst-biz-warning-record-card {
+  cursor: pointer;
+
+  .ant-card-body {
+    padding: 0;
+    font-family: MicrosoftYaHei;
+    line-height: 19px;
+    display: flex;
+    margin-top: 10px;
+
+    .left-context {
+      flex: 1;
+
+      >div {
+        margin-top: 6px;
+      }
+
+      >div:nth-child(1) {
+        margin-top: 0;
+      }
+    }
+
+    .warning-type {
+      font-weight: bold;
+    }
+  }
+}
--- a/packages/biz/es/boxSelectTree/boxSelectTree.d.ts
+++ b/packages/biz/es/boxSelectTree/boxSelectTree.d.ts
@ -0,0 +1,9 @@
+import { FC } from 'react';
+import { TabsProps } from 'antd';
+import type { BoxPanelProps } from './components/boxPanel';
+export interface BoxSelectTreeProps extends BoxPanelProps {
+    onTabChange?: (e: any) => void;
+    tabsProps?: TabsProps;
+}
+declare const BoxSelectTree: FC<BoxSelectTreeProps>;
+export default BoxSelectTree;
--- a/packages/biz/es/boxSelectTree/boxSelectTree.js
+++ b/packages/biz/es/boxSelectTree/boxSelectTree.js
@ -0,0 +1,92 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import React from 'react';
+import { Tabs } from 'antd';
+import BoxPanel from "./components/boxPanel";
+var BoxSelectTree = function BoxSelectTree(props) {
+  var data = props.data,
+    _props$boxDataSource = props.boxDataSource,
+    boxDataSource = _props$boxDataSource === void 0 ? [] : _props$boxDataSource,
+    onTabChange = props.onTabChange,
+    onSearch = props.onSearch,
+    onItemCheck = props.onItemCheck,
+    onItemSelect = props.onItemSelect,
+    onBoxBatchDelete = props.onBoxBatchDelete,
+    onBoxDelete = props.onBoxDelete,
+    onCreateSubmit = props.onCreateSubmit,
+    onClockClick = props.onClockClick,
+    onImport = props.onImport,
+    onCreate = props.onCreate,
+    tabsProps = props.tabsProps,
+    searchInputProps = props.searchInputProps,
+    treeProps = props.treeProps,
+    customImport = props.customImport,
+    showOptions = props.showOptions,
+    extraBtns = props.extraBtns;
+  var items = [{
+    key: '1',
+    label: /*#__PURE__*/React.createElement("div", {
+      style: {
+        textAlign: 'center',
+        width: '160px'
+      }
+    }, "\u76D2\u5B50\u7EC4"),
+    children: /*#__PURE__*/React.createElement(BoxPanel, {
+      searchInputProps: searchInputProps,
+      boxDataSource: boxDataSource,
+      treeProps: treeProps,
+      data: data,
+      onCreate: onCreate,
+      onCreateSubmit: onCreateSubmit,
+      onBoxBatchDelete: onBoxBatchDelete,
+      onBoxDelete: onBoxDelete,
+      onSearch: onSearch,
+      onItemCheck: onItemCheck,
+      onItemSelect: onItemSelect,
+      showOptions: showOptions,
+      customImport: customImport,
+      extraBtns: extraBtns,
+      onClockClick: onClockClick,
+      onImport: onImport
+    })
+  }, {
+    key: '2',
+    label: /*#__PURE__*/React.createElement("div", {
+      style: {
+        textAlign: 'center',
+        width: '160px'
+      }
+    }, "\u76D2\u5B50"),
+    children: /*#__PURE__*/React.createElement(BoxPanel, {
+      boxDataSource: boxDataSource,
+      searchInputProps: searchInputProps,
+      treeProps: treeProps,
+      data: data,
+      onCreate: onCreate,
+      onBoxBatchDelete: onBoxBatchDelete,
+      onCreateSubmit: onCreateSubmit,
+      onBoxDelete: onBoxDelete,
+      onSearch: onSearch,
+      onItemCheck: onItemCheck,
+      onItemSelect: onItemSelect,
+      showOptions: showOptions,
+      customImport: customImport,
+      extraBtns: extraBtns,
+      onClockClick: onClockClick,
+      onImport: onImport
+    })
+  }];
+  return /*#__PURE__*/React.createElement(Tabs, _extends({
+    defaultActiveKey: "1",
+    centered: true,
+    items: items,
+    onChange: onTabChange,
+    tabBarGutter: 0,
+    indicator: {
+      size: function size(origin) {
+        return origin;
+      },
+      align: 'center'
+    }
+  }, tabsProps));
+};
+export default BoxSelectTree;
--- a/packages/biz/es/boxSelectTree/components/boxPanel/index.d.ts
+++ b/packages/biz/es/boxSelectTree/components/boxPanel/index.d.ts
@ -0,0 +1,27 @@
+import { FC } from 'react';
+import { TreeDataNode } from 'antd';
+import { ModalFormProps } from '@ant-design/pro-components';
+import type { TreeProps, InputProps } from 'antd';
+import type { BoxTreeProps } from '../../../tree';
+export interface BoxPanelProps {
+    searchInputProps?: InputProps;
+    showOptions?: boolean;
+    treeProps?: Partial<BoxTreeProps>;
+    data: TreeDataNode[];
+    boxDataSource: TreeDataNode[];
+    handleImport?: () => void;
+    onSearch?: (e: any) => void;
+    onItemCheck?: TreeProps['onCheck'];
+    onItemSelect?: TreeProps['onSelect'];
+    onBoxBatchDelete?: (data?: any) => void;
+    onBoxDelete?: (data?: any) => void;
+    onCreateSubmit?: ModalFormProps['onFinish'];
+    onClockClick?: () => void;
+    onImport?: () => void;
+    onBatch?: () => void;
+    onCreate?: () => void;
+    customImport?: any;
+    extraBtns?: any;
+}
+declare const BoxPanel: FC<BoxPanelProps>;
+export default BoxPanel;
--- a/packages/biz/es/boxSelectTree/components/boxPanel/index.js
+++ b/packages/biz/es/boxSelectTree/components/boxPanel/index.js
--- a/packages/biz/es/boxSelectTree/index.d.ts
+++ b/packages/biz/es/boxSelectTree/index.d.ts
@ -0,0 +1,3 @@
+import BoxSelectTree from './boxSelectTree';
+export type { BoxSelectTreeProps } from './boxSelectTree';
+export default BoxSelectTree;
--- a/packages/biz/es/boxSelectTree/index.js
+++ b/packages/biz/es/boxSelectTree/index.js
@ -0,0 +1,2 @@
+import BoxSelectTree from "./boxSelectTree";
+export default BoxSelectTree;
--- a/packages/biz/es/boxSelectTree/mock.d.ts
+++ b/packages/biz/es/boxSelectTree/mock.d.ts
@ -0,0 +1,2 @@
+import { TreeDataNode } from "antd";
+export declare const treeData: TreeDataNode[];
--- a/packages/biz/es/boxSelectTree/mock.js
+++ b/packages/biz/es/boxSelectTree/mock.js
@ -0,0 +1,22 @@
+export var treeData = [{
+  title: '全部盒子',
+  key: '0-0',
+  children: [{
+    title: '盒子组1',
+    key: '0-0-0',
+    children: [{
+      title: '摄像头1',
+      key: '0-0-0-0'
+    }, {
+      title: '摄像头2',
+      key: '0-0-0-1'
+    }]
+  }, {
+    title: '盒子组2',
+    key: '0-0-1',
+    children: [{
+      title: '摄像头4',
+      key: '0-0-1-0'
+    }]
+  }]
+}];
--- a/packages/biz/es/tree/boxTree.d.ts
+++ b/packages/biz/es/tree/boxTree.d.ts
@ -0,0 +1,17 @@
+import { FC } from 'react';
+import { TreeDataNode, TreeProps } from 'antd';
+import './index.less';
+export interface BoxTreeProps extends TreeProps {
+    data: TreeDataNode[];
+    treeCheckable?: boolean;
+    showItemOption?: boolean;
+    customOptions?: any;
+    onItemCheck?: TreeProps['onCheck'];
+    onItemSelect?: TreeProps['onSelect'];
+    onItemSetting?: (_data: any) => void;
+    onItemDelete?: (_data: any) => void;
+    onItemRename?: (_nodeData: any) => void;
+    onItemRenameFinish?: (_data: any, _nodeData: any) => Promise<any>;
+}
+declare const boxTree: FC<BoxTreeProps>;
+export default boxTree;
--- a/packages/biz/es/tree/boxTree.js
+++ b/packages/biz/es/tree/boxTree.js
--- a/packages/biz/es/tree/index.d.ts
+++ b/packages/biz/es/tree/index.d.ts
@ -0,0 +1,13 @@
+import { TreeDataNode } from 'antd';
+import BoxTree from './boxTree';
+export interface TreeData extends TreeDataNode {
+    children?: TreeDataNode['children'] & {
+        isCamera?: boolean;
+        /**
+         * 0-失败  1-成功  2-进行中  3-未知
+         */
+        status?: '0' | '1' | '2' | '3';
+    }[];
+}
+export type { BoxTreeProps } from './boxTree';
+export default BoxTree;
--- a/packages/biz/es/tree/index.js
+++ b/packages/biz/es/tree/index.js
@ -0,0 +1,2 @@
+import BoxTree from "./boxTree";
+export default BoxTree;
--- a/packages/biz/es/tree/index.less
+++ b/packages/biz/es/tree/index.less
@ -0,0 +1,9 @@
+.zhst-biz-tree-item-render {
+  &_right {
+    display: none;
+  }
+
+  &:hover &_right {
+    display: inline-flex;
+  }
+}
--- a/packages/biz/es/treeTransfer/TreeTransfer.d.ts
+++ b/packages/biz/es/treeTransfer/TreeTransfer.d.ts
@ -0,0 +1,20 @@
+import React from 'react';
+import { TransferProps, TreeDataNode, TreeProps } from 'antd';
+import './index.less';
+export interface TreeTransferProps {
+    dataSource: TreeDataNode[];
+    treeProps?: TreeProps;
+    targetItems: TreeDataNode[];
+    checkedKeys: string[];
+    onTreeSelect?: TreeProps['onSelect'];
+    onTreeCheck?: TreeProps['onCheck'];
+    onItemDelete?: (key: string, info?: {
+        root: TreeDataNode[];
+        keys: string[];
+    }) => void;
+    onChange?: TransferProps['onChange'];
+    onOk?: (data: any) => void;
+    onReset?: () => void;
+}
+declare const TreeTransfer: React.FC<TreeTransferProps>;
+export default TreeTransfer;
--- a/packages/biz/es/treeTransfer/TreeTransfer.js
+++ b/packages/biz/es/treeTransfer/TreeTransfer.js
@ -0,0 +1,142 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { useState } from 'react';
+import { Button, Card, Flex, Input, Tree } from 'antd';
+import theme from 'antd/es/theme';
+import "./index.less";
+import { DeleteOutlined, DoubleRightOutlined, SearchOutlined } from '@ant-design/icons';
+import { getAllRootKeyById } from "./treeTransferHelper";
+var componentName = 'zhst-biz-treeTransfer';
+var useToken = theme.useToken;
+var TreeTransfer = function TreeTransfer(_ref) {
+  var dataSource = _ref.dataSource,
+    treeProps = _ref.treeProps,
+    _ref$targetItems = _ref.targetItems,
+    targetItems = _ref$targetItems === void 0 ? [] : _ref$targetItems,
+    _ref$checkedKeys = _ref.checkedKeys,
+    checkedKeys = _ref$checkedKeys === void 0 ? [] : _ref$checkedKeys,
+    onTreeCheck = _ref.onTreeCheck,
+    onTreeSelect = _ref.onTreeSelect,
+    onItemDelete = _ref.onItemDelete,
+    onOk = _ref.onOk,
+    onReset = _ref.onReset;
+  var _useToken = useToken(),
+    token = _useToken.token;
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    keyWords = _useState2[0],
+    setKeyWords = _useState2[1];
+  function findNodesWithKeyword(_keyWords, _treeData) {
+    // @ts-ignore
+    function dfs(node) {
+      return node.filter(function (item) {
+        return item.title.includes(_keyWords);
+      });
+    }
+    var data = dfs(_treeData);
+    return data || [];
+  }
+  return /*#__PURE__*/React.createElement(Flex, {
+    gap: 20,
+    className: componentName,
+    align: "center",
+    justify: "center"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(componentName, "-left")
+  }, /*#__PURE__*/React.createElement(Card, {
+    className: "".concat(componentName, "-left_card"),
+    title: /*#__PURE__*/React.createElement("div", {
+      style: {
+        textAlign: 'center'
+      }
+    }, "\u53EF\u9009\u62E9\u7684\u8303\u56F4"),
+    bodyStyle: {
+      padding: 12
+    }
+  }, /*#__PURE__*/React.createElement(Input, {
+    prefix: /*#__PURE__*/React.createElement(SearchOutlined, null),
+    onChange: function onChange(e) {
+      return setKeyWords(e.target.value);
+    },
+    placeholder: "\u8BF7\u8F93\u5165\u8BBE\u5907\u540D\u79F0"
+  }), /*#__PURE__*/React.createElement(Tree, _extends({
+    style: {
+      marginTop: '6px'
+    },
+    height: 420,
+    blockNode: true,
+    checkable: true,
+    checkedKeys: checkedKeys,
+    treeData: findNodesWithKeyword(keyWords, dataSource),
+    onCheck: function onCheck(keys, info) {
+      return onTreeCheck === null || onTreeCheck === void 0 ? void 0 : onTreeCheck(keys, info);
+    },
+    onSelect: function onSelect(keys, info) {
+      return onTreeSelect === null || onTreeSelect === void 0 ? void 0 : onTreeSelect(keys, info);
+    }
+  }, treeProps)))), /*#__PURE__*/React.createElement(DoubleRightOutlined, null), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(componentName, "-right")
+  }, /*#__PURE__*/React.createElement(Card, {
+    className: "".concat(componentName, "-right_card"),
+    title: /*#__PURE__*/React.createElement("div", {
+      style: {
+        textAlign: 'center'
+      }
+    }, "\u5DF2\u9009\u62E9\u7684\u8303\u56F4"),
+    bodyStyle: {
+      padding: 0
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(componentName, "-right_card__items")
+  }, targetItems.map(function (item) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "".concat(componentName, "-right_card__items___item"),
+      key: item.key,
+      onMouseEnter: function onMouseEnter(e) {
+        e.target.style.backgroundColor = token.colorPrimaryBg;
+        e.target.style.color = token.colorPrimary;
+      },
+      onMouseLeave: function onMouseLeave(e) {
+        e.target.style.color = token.colorText;
+        e.target.style.backgroundColor = null;
+      }
+    }, item.title, /*#__PURE__*/React.createElement("div", {
+      style: {
+        float: 'right'
+      }
+    }, /*#__PURE__*/React.createElement(DeleteOutlined, {
+      onClick: function onClick() {
+        var _getAllRootKeyById = getAllRootKeyById(item.key, dataSource),
+          root = _getAllRootKeyById.root,
+          keys = _getAllRootKeyById.keys;
+        onItemDelete === null || onItemDelete === void 0 || onItemDelete(item.key, {
+          root: root,
+          keys: keys
+        });
+      }
+    })));
+  })), /*#__PURE__*/React.createElement(Flex, {
+    className: "".concat(componentName, "-right_card__btns")
+  }, /*#__PURE__*/React.createElement(Button, {
+    style: {
+      marginRight: 8,
+      width: '50%'
+    },
+    disabled: targetItems.length <= 0,
+    onClick: onReset
+  }, "\u91CD\u7F6E"), /*#__PURE__*/React.createElement(Button, {
+    style: {
+      width: '50%'
+    },
+    type: "primary",
+    onClick: function onClick() {
+      return onOk === null || onOk === void 0 ? void 0 : onOk(targetItems);
+    }
+  }, "\u786E\u5B9A")))));
+};
+export default TreeTransfer;
--- a/packages/biz/es/treeTransfer/index.d.ts
+++ b/packages/biz/es/treeTransfer/index.d.ts
@ -0,0 +1,4 @@
+import TreeTransfer from "./TreeTransfer";
+export type { TreeTransferProps } from './TreeTransfer';
+export * from './treeTransferHelper';
+export default TreeTransfer;
--- a/packages/biz/es/treeTransfer/index.js
+++ b/packages/biz/es/treeTransfer/index.js
@ -0,0 +1,3 @@
+import TreeTransfer from "./TreeTransfer";
+export * from "./treeTransferHelper";
+export default TreeTransfer;
--- a/packages/biz/es/treeTransfer/index.less
+++ b/packages/biz/es/treeTransfer/index.less
@ -0,0 +1,43 @@
+.zhst-biz-treeTransfer {
+  &-left {
+    &_card {
+      width: 500px;
+      height: 522px;
+      background-color: #FCFCFC;
+    }
+  }
+
+  &-right {
+    &_card {
+      width: 300px;
+      height: 522px;
+      background-color: #FCFCFC;
+
+      &__items {
+        padding: 8px 4px;
+        overflow: scroll;
+
+        &::-webkit-scrollbar {
+          display: none;
+        }
+
+        &___item {
+          margin: 0;
+          padding: 4px 12px;
+          cursor: pointer;
+        }
+      }
+
+      &__btns {
+        width: 100%;
+        padding: 8px;
+        position: absolute;
+        bottom: 0;
+        left: 50%;
+        transform: translateX(-50%);
+        box-sizing: border-box;
+        border-top: 1px solid #f0f0f0;
+      }
+    }
+  }
+}
--- a/packages/biz/es/treeTransfer/treeTransferHelper.d.ts
+++ b/packages/biz/es/treeTransfer/treeTransferHelper.d.ts
@ -0,0 +1,12 @@
+export declare const isChecked: (selectedKeys: React.Key[], eventKey: React.Key) => boolean;
+/**
+ * 通过子元素找到父级节点
+ * @param objects
+ * @param element
+ * @returns
+ */
+export declare const findParentByChild: (objects: any[], propertyValue: string | number, propertyKey?: string) => any;
+export declare const getAllRootKeyById: (val: string | number, list: any[], key?: string) => {
+    root: any;
+    keys: any[];
+};
--- a/packages/biz/es/treeTransfer/treeTransferHelper.js
+++ b/packages/biz/es/treeTransfer/treeTransferHelper.js
@ -0,0 +1,57 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+export var isChecked = function isChecked(selectedKeys, eventKey) {
+  return selectedKeys.includes(eventKey);
+};
+function isObject(value) {
+  return value !== null && _typeof(value) === 'object' && !Array.isArray(value);
+}
+
+/**
+ * 通过子元素找到父级节点
+ * @param objects
+ * @param element
+ * @returns
+ */
+export var findParentByChild = function findParentByChild(objects, propertyValue) {
+  var propertyKey = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'key';
+  for (var i = 0; i < objects.length; i++) {
+    var obj = objects[i];
+    if (obj[propertyKey] === propertyValue) {
+      return obj;
+    } else if (_typeof(obj) === 'object') {
+      var found = findParentByChild(Object.values(obj), propertyValue);
+      if (found) {
+        return obj;
+      }
+    }
+  }
+  return null; // 如果找不到包含具有指定属性的子对象的父对象，返回 null
+};
+export var getAllRootKeyById = function getAllRootKeyById(val, list) {
+  var key = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'key';
+  var keys = [];
+  var findParentByChild = function findParentByChild(propertyValue, objects, propertyKey) {
+    for (var i = 0; i < objects.length; i++) {
+      var obj = objects[i];
+      if (obj[propertyKey] === propertyValue) {
+        console.log('obj', obj);
+        return obj;
+      } else if (_typeof(obj) === 'object') {
+        var found = findParentByChild(propertyValue, Object.values(obj), propertyKey);
+        if (found) {
+          if (isObject(found)) {
+            keys.push(found.key);
+          }
+          return obj;
+        }
+      }
+    }
+    return null; // 如果找不到包含具有指定属性的子对象的父对象，返回 null
+  };
+  var data = findParentByChild(val, list, key);
+  data.key && keys.push(data.key);
+  return {
+    root: data,
+    keys: keys
+  };
+};
--- a/packages/biz/es/treeTransferModal/TreeTransferModal.d.ts
+++ b/packages/biz/es/treeTransferModal/TreeTransferModal.d.ts
@ -0,0 +1,26 @@
+import { FC } from 'react';
+import { ModalProps, RadioGroupProps, SelectProps, TransferProps, TreeDataNode, TreeProps } from 'antd';
+export interface TreeTransferModalProps {
+    dataSource: TreeDataNode[];
+    treeProps?: TreeProps;
+    targetItems: TreeDataNode[];
+    checkedKeys: string[];
+    onTreeSelect?: TreeProps['onSelect'];
+    onTreeCheck?: TreeProps['onCheck'];
+    onItemDelete?: (key: string, info?: {
+        root: TreeDataNode[];
+        keys: string[];
+    }) => void;
+    onChange?: TransferProps['onChange'];
+    onOk?: (data: any) => void;
+    onReset?: () => void;
+    open?: boolean;
+    onCancel?: ModalProps['onCancel'];
+    onRadioChange?: RadioGroupProps['onChange'];
+    onSelect?: SelectProps['onSelect'];
+    modalProps?: ModalProps;
+    radioProps?: RadioGroupProps;
+    selectProps?: SelectProps;
+}
+declare const TreeTransferModal: FC<TreeTransferModalProps>;
+export default TreeTransferModal;
--- a/packages/biz/es/treeTransferModal/TreeTransferModal.js
+++ b/packages/biz/es/treeTransferModal/TreeTransferModal.js
@ -0,0 +1,80 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { useState } from 'react';
+import { Modal, Radio, Select } from 'antd';
+import TreeTransfer from "../treeTransfer";
+import { ALL_LIST, BOX_TYPE_LIST } from "../utils/constants";
+var TreeTransferModal = function TreeTransferModal(props) {
+  var open = props.open,
+    _props$dataSource = props.dataSource,
+    dataSource = _props$dataSource === void 0 ? [] : _props$dataSource,
+    checkedKeys = props.checkedKeys,
+    onItemDelete = props.onItemDelete,
+    onOk = props.onOk,
+    onCancel = props.onCancel,
+    onReset = props.onReset,
+    onRadioChange = props.onRadioChange,
+    onTreeCheck = props.onTreeCheck,
+    onSelect = props.onSelect,
+    targetItems = props.targetItems,
+    modalProps = props.modalProps,
+    radioProps = props.radioProps,
+    selectProps = props.selectProps;
+  var _useState = useState('1'),
+    _useState2 = _slicedToArray(_useState, 2),
+    type = _useState2[0],
+    setType = _useState2[1];
+  return /*#__PURE__*/React.createElement(Modal, _extends({
+    open: open,
+    destroyOnClose: true,
+    title: "\u7EDF\u8BA1\u70B9\u4F4D",
+    width: "948px",
+    footer: null,
+    onCancel: onCancel
+  }, modalProps), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Radio.Group, _extends({
+    onChange: function onChange(e) {
+      setType(e.target.value);
+      onRadioChange === null || onRadioChange === void 0 || onRadioChange(e);
+    },
+    style: {
+      marginLeft: '24px',
+      padding: '20px 0'
+    },
+    value: type,
+    options: BOX_TYPE_LIST
+  }, radioProps)), /*#__PURE__*/React.createElement(Select, _extends({
+    defaultValue: '',
+    style: {
+      marginLeft: 200,
+      width: 150
+    },
+    options: ALL_LIST,
+    onSelect: onSelect
+  }, selectProps))), type === 'box' ? /*#__PURE__*/React.createElement(TreeTransfer, {
+    dataSource: dataSource,
+    targetItems: targetItems,
+    checkedKeys: checkedKeys,
+    onTreeCheck: onTreeCheck,
+    onItemDelete: onItemDelete,
+    onOk: onOk,
+    onReset: onReset
+  }) : /*#__PURE__*/React.createElement(TreeTransfer, {
+    dataSource: dataSource,
+    targetItems: targetItems,
+    checkedKeys: checkedKeys,
+    onTreeCheck: onTreeCheck,
+    onItemDelete: onItemDelete,
+    onOk: onOk,
+    onReset: onReset
+  }), /*#__PURE__*/React.createElement("p", {
+    style: {
+      textAlign: 'right'
+    }
+  }, "\u5DF2\u9009\u4E2D", targetItems.length, "\u4E2A\u70B9\u4F4D")));
+};
+export default TreeTransferModal;
--- a/packages/biz/es/treeTransferModal/index.d.ts
+++ b/packages/biz/es/treeTransferModal/index.d.ts
@ -0,0 +1,3 @@
+import TreeTransferModal from './TreeTransferModal';
+export type { TreeTransferModalProps } from './TreeTransferModal';
+export default TreeTransferModal;
--- a/packages/biz/es/treeTransferModal/index.js
+++ b/packages/biz/es/treeTransferModal/index.js
@ -0,0 +1,2 @@
+import TreeTransferModal from "./TreeTransferModal";
+export default TreeTransferModal;
--- a/packages/biz/lib/BigImageModal/BigImageModal.d.ts
+++ b/packages/biz/lib/BigImageModal/BigImageModal.d.ts
@ -0,0 +1,40 @@
+import React from 'react';
+import type { ModalProps, DescriptionsProps, TabsProps, VideoViewRef, ImgViewRef } from '@zhst/meta';
+import './index.less';
+export declare const componentPrefix = "zhst-image";
+export type TAB_TYPE = 'COMPATER' | 'NORMAL' | 'VIDEO';
+export type MODEL_TYPE = 'VIDEO' | 'IMAGE';
+export interface BigImageModalProps extends ModalProps {
+    visible: boolean;
+    activeTab?: TAB_TYPE;
+    attributeList: {
+        title: string;
+        children: Pick<DescriptionsProps, 'items'>;
+    };
+    tabs: {
+        data: Pick<TabsProps, 'items'> & {
+            key: TAB_TYPE;
+        };
+    };
+    dataSource: any;
+    imageData: any;
+    relatedData: any;
+    isRelated?: boolean;
+    footer?: React.ReactNode;
+    showCarousel?: boolean;
+    onTabChange?: (newVal?: TAB_TYPE, oldVal?: TAB_TYPE) => void;
+    onIndexChange?: (newVal?: number, oldVal?: number) => void;
+    transformPropFunc: (data: any) => void;
+}
+interface BigModalRef {
+    tab: TAB_TYPE;
+    setTab: (tab: TAB_TYPE) => void;
+    modalRef: ModalProps;
+    activeKey: string;
+    setActiveKey: (val: string) => void;
+    videoPlayerRef: VideoViewRef;
+    combineImageRef: any;
+    bigImagePreviewRef: ImgViewRef;
+}
+declare const BigImageModal: React.FC<BigImageModalProps, BigModalRef>;
+export default BigImageModal;
--- a/packages/biz/lib/BigImageModal/components/CombineImage/index.d.ts
+++ b/packages/biz/lib/BigImageModal/components/CombineImage/index.d.ts
@ -0,0 +1,11 @@
+import { FC } from 'react';
+interface ComBineImageProps {
+    data: {
+        imgSummary: string;
+        compaterImages: string[];
+        imageKey: string;
+        score: number;
+    };
+}
+declare const ComBineImage: FC<ComBineImageProps>;
+export default ComBineImage;
--- a/packages/biz/lib/BigImageModal/components/CombineImage/index.js
+++ b/packages/biz/lib/BigImageModal/components/CombineImage/index.js
@ -0,0 +1,71 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/BigImageModal/components/CombineImage/index.tsx
+var CombineImage_exports = {};
+__export(CombineImage_exports, {
+  default: () => CombineImage_default
+});
+module.exports = __toCommonJS(CombineImage_exports);
+var import_react = __toESM(require("react"));
+var import_meta = require("@zhst/meta");
+var ComBineImage = (0, import_react.forwardRef)((props, ref) => {
+  const { data } = props;
+  const { imgSummary, compaterImages = [] } = data;
+  const targetImageRef = (0, import_react.useRef)(null);
+  const compareImageRef = (0, import_react.useRef)(null);
+  const [targetIndex, setTargetIndex] = (0, import_react.useState)(compaterImages.findIndex((_url) => imgSummary === _url) || 0);
+  (0, import_react.useImperativeHandle)(ref, () => ({
+    compareImageRef,
+    targetImageRef
+  }));
+  return /* @__PURE__ */ import_react.default.createElement(import_meta.Flex, { justify: "space-evenly", align: "center", style: { padding: "0 32px" } }, /* @__PURE__ */ import_react.default.createElement(
+    import_meta.CompareImage,
+    {
+      ref: targetImageRef,
+      preDisable: targetIndex === 0,
+      nextDisable: targetIndex >= compaterImages.length - 1,
+      onNext: () => setTargetIndex(targetIndex + 1),
+      onPre: () => setTargetIndex(targetIndex - 1),
+      showScore: false,
+      openRoll: !!compaterImages.length,
+      url: compaterImages[targetIndex] || imgSummary,
+      label: "目标图"
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(import_meta.Score, { score: data.score }), /* @__PURE__ */ import_react.default.createElement(
+    import_meta.CompareImage,
+    {
+      ref: compareImageRef,
+      url: data.imageKey,
+      openRoll: false,
+      score: data.score,
+      label: "对比图"
+    }
+  ));
+});
+var CombineImage_default = ComBineImage;
--- a/packages/biz/lib/BigImageModal/components/navigation/index.d.ts
+++ b/packages/biz/lib/BigImageModal/components/navigation/index.d.ts
@ -0,0 +1,13 @@
+import * as React from 'react';
+import './index.less';
+declare const Navigation: React.FC<{
+    show?: boolean;
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    prev?: boolean;
+    next?: boolean;
+    disabled?: boolean;
+    className?: string;
+    color?: string;
+    hoverColor?: string;
+}>;
+export default Navigation;
--- a/packages/biz/lib/BigImageModal/mock.d.ts
+++ b/packages/biz/lib/BigImageModal/mock.d.ts
@ -0,0 +1,245 @@
+export declare const IMAGE_DATA: {
+    enAbleDeleteFeature: boolean;
+    tabsFilter: string[];
+    selectIndex: number;
+    disableBtn: number[];
+    dataSource: {
+        objectId: string;
+        condition: {
+            featureInfo: null;
+            featureData: string;
+            imageData: string;
+            alg: string;
+            rect: {
+                x: number;
+                y: number;
+                w: number;
+                h: number;
+            };
+            objectImageUrl: string;
+            srcImageUrl: string;
+        };
+        score: number;
+        timestamp: number;
+        deviceId: string;
+        id: string;
+        name: string;
+        dirid: string;
+        status: string;
+        longitude: number;
+        latitude: number;
+        caseId: string;
+        caseGroup: string;
+        isDeleted: string;
+        objectIndex: {
+            objectId: string;
+            solutionId: string;
+            deviceId: string;
+            fragmentId: string;
+        };
+        objectType: string;
+        isObjectTrack: boolean;
+        pathId: string;
+        frameInfo: {
+            frameId: string;
+            frameTimestamp: string;
+            width: number;
+            height: number;
+            originWidth: number;
+            originHeight: number;
+            offsetTime: string;
+            skipNumber: string;
+        };
+        level: number;
+        bboxInFrame: {
+            x: number;
+            y: number;
+            w: number;
+            h: number;
+        };
+        bboxExtInFrame: {
+            x: number;
+            y: number;
+            w: number;
+            h: number;
+        };
+        objectImageKey: string;
+        objectExtImageKey: string;
+        frameImageKey: string;
+        confidence: number;
+        sourceObjectId: string;
+        storeTimestamp: string;
+        gbNumber: string;
+        qualityScore: number;
+        subObjectCount: number;
+        subObjectType: string[];
+        subObjectIds: string[];
+        solutionId: string;
+        fragmentId: string;
+        contrastKey: string;
+        compaterImages: string[];
+        imgSummary: string;
+        imageKey: string;
+        srcImageUrl: string;
+        algorithmVersion: string;
+        cameraId: string;
+        cameraName: string;
+    }[];
+    isArchiveDetail: boolean;
+    ToolProps: {
+        renderVideoBtn: boolean;
+        disableVideo: boolean;
+    };
+    specialTitle: string;
+};
+export declare const BIG_IMAGE_DATA: ({
+    imageKey: string;
+    imgSummary: string;
+    flvUrl: string;
+    compaterImages: string[];
+    odRect: {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+    };
+    attachImg: {
+        url: string;
+        label: string;
+    }[];
+    score: string;
+    showScore: boolean;
+    cameraPosition: string;
+    time: string;
+    objects: {
+        objectIndex: {
+            objectId: string;
+            solutionId: string;
+            deviceId: string;
+            fragmentId: string;
+        };
+        objectType: string;
+        sourceObjectId: string;
+        level: number;
+        confidence: number;
+        frameInfo: {
+            frameId: string;
+            frameTimestamp: string;
+            width: number;
+            height: number;
+            originWidth: number;
+            originHeight: number;
+            offsetTime: string;
+            skipNumber: string;
+        };
+        infoOnSource: {
+            bboxInFrame: {
+                bboxRatio: {
+                    x: number;
+                    y: number;
+                    w: number;
+                    h: number;
+                };
+            };
+            countInSource: number;
+            indexInSource: number;
+        };
+        qualityScore: number;
+    }[];
+} | {
+    imageKey: string;
+    imgSummary: string;
+    odRect: {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+    };
+    attachImg: {
+        url: string;
+        label: string;
+    }[];
+    flvUrl: string;
+    score: number;
+    showScore: boolean;
+    cameraPosition: string;
+    time: string;
+    objects: ({
+        objectIndex: {
+            objectId: string;
+            solutionId: string;
+            deviceId: string;
+            fragmentId: string;
+        };
+        objectType: string;
+        sourceObjectId: string;
+        frameInfo: {
+            frameId: string;
+            frameTimestamp: string;
+            width: number;
+            height: number;
+            originWidth: number;
+            originHeight: number;
+            offsetTime: string;
+            skipNumber: string;
+        };
+        infoOnSource: {
+            bboxInFrame: {
+                bboxRatio: {
+                    x: number;
+                    y: number;
+                    w: number;
+                    h: number;
+                };
+            };
+            countInSource: number;
+            indexInSource: number;
+        };
+        qualityScore: number;
+        level?: undefined;
+        confidence?: undefined;
+    } | {
+        objectIndex: {
+            objectId: string;
+            solutionId: string;
+            deviceId: string;
+            fragmentId: string;
+        };
+        objectType: string;
+        sourceObjectId: string;
+        level: number;
+        confidence: number;
+        frameInfo: {
+            frameId: string;
+            frameTimestamp: string;
+            width: number;
+            height: number;
+            originWidth: number;
+            originHeight: number;
+            offsetTime: string;
+            skipNumber: string;
+        };
+        infoOnSource: {
+            bboxInFrame: {
+                bboxRatio: {
+                    x: number;
+                    y: number;
+                    w: number;
+                    h: number;
+                };
+            };
+            countInSource: number;
+            indexInSource: number;
+        };
+        qualityScore: number;
+    })[];
+    compaterImages?: undefined;
+})[];
+export declare const attributeList: {
+    title: string;
+    children: {
+        key: string;
+        label: string;
+        children: string;
+    }[];
+}[];
--- a/packages/biz/lib/BigImageModal/util/bigImageModalAdapter.d.ts
+++ b/packages/biz/lib/BigImageModal/util/bigImageModalAdapter.d.ts
@ -0,0 +1,118 @@
+/**
+ * 适配老的大屏组件数据格式传入
+ */
+import React from 'react';
+import { AlgorithmVersionStr, HumanProperty, ObjectType, Rect } from '@zhst/types';
+import { VideoViewProps, ImgViewProps, VideoViewRef, ImgViewRef } from '@zhst/meta';
+export type TAB_TYPE = 'COMPATER' | 'NORMAL' | 'TRACK';
+export type MODEL_TYPE = 'VIDEO' | 'IMAGE';
+export interface CarouselProps {
+    hasPre?: boolean;
+    hasNext?: boolean;
+    selectIndex: number;
+    setSelectIndex: React.Dispatch<React.SetStateAction<number>>;
+    dataSource: Array<{
+        key: string;
+        url: string;
+    }>;
+}
+export type ISelectItem = Partial<Omit<ImgViewProps, 'screenshotButtonRender'>> & Partial<Omit<VideoViewProps, 'screenshotButtonRender'>>;
+/**
+ * 描述列表 description
+ */
+export interface HeaderProps {
+    value: TAB_TYPE;
+    onChange: (type: TAB_TYPE) => void;
+    tabsFilter: TAB_TYPE[];
+}
+export interface ParamProps {
+    tab: string;
+    selectItem: ISelectItem;
+    imgViewRef: React.MutableRefObject<ImgViewRef>;
+    VideoViewRef: React.MutableRefObject<VideoViewRef>;
+    model: MODEL_TYPE;
+    setModel: React.Dispatch<React.SetStateAction<MODEL_TYPE>>;
+    scale$: number;
+    showCrop$: boolean;
+}
+/**
+ * 工具栏
+ */
+export interface ToolProps {
+    renderRight?: (props: ParamProps) => React.ReactNode;
+    renderLeft?: (props: ParamProps) => React.ReactNode;
+    renderVideoBtn?: boolean;
+    param: ParamProps;
+    disableVideo: boolean;
+}
+export interface BigImageData {
+    extendRectList: (Rect & {
+        algorithmVersion: AlgorithmVersionStr;
+        imageKey: string;
+    })[];
+    rectList: (Rect & {
+        algorithmVersion: AlgorithmVersionStr;
+        imageKey: string;
+    })[];
+    attachImg: {
+        url: string;
+        label: '形体' | '人脸';
+    }[];
+    odRect: Rect;
+    compaterImages: string[];
+    constractKey: string;
+    frameImageKey: string;
+    imageKey?: string;
+    imgSummary: string;
+    objectExtImageKey: string;
+    attributeList: {
+        label: string;
+        list: any[];
+    }[];
+    archiveImages?: any;
+    spaceName: string;
+    objectIndex?: {
+        deviceId: string;
+        fragmentId: string;
+        objectId: string;
+        solutionId: string;
+    };
+    objectType: ObjectType;
+    objectId: string;
+    bodyObjectId?: string;
+    faceObjectId?: string;
+    sourceObjectId?: string;
+    cameraId: string;
+    cameraName: string;
+    selectIndex: number;
+    humanProperty: HumanProperty;
+    qualityScore?: number;
+    score: number;
+    timestamp: string;
+    bodyImageUrl: string;
+    faceImageUrl: string;
+    algorithmVersion: AlgorithmVersionStr;
+    bodySpaceName: string;
+    faceSpaceName: string;
+    position: {
+        lat: number;
+        lng: number;
+    };
+    solutionId?: string;
+    [index: string]: any;
+}
+export interface ImageModalDataProps {
+    targetData: BigImageData[];
+    compactData: BigImageData[];
+}
+export interface ModalAdapterConfigProps {
+    oldMode?: boolean;
+}
+/**
+ * 大图组件适配器，兼容老接口
+ * @param Cmp 大图组件
+ * @param config 额外配置
+ * @returns 大图组件
+ */
+declare const adapter: (Cmp: any, config: ModalAdapterConfigProps) => any;
+export default adapter;
--- a/packages/biz/lib/BigImageModal/util/bigImageModalAdapter.js
+++ b/packages/biz/lib/BigImageModal/util/bigImageModalAdapter.js
@ -0,0 +1,57 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/BigImageModal/util/bigImageModalAdapter.tsx
+var bigImageModalAdapter_exports = {};
+__export(bigImageModalAdapter_exports, {
+  default: () => bigImageModalAdapter_default
+});
+module.exports = __toCommonJS(bigImageModalAdapter_exports);
+var import_react = __toESM(require("react"));
+var translateOldImageData = (_data) => {
+  return {
+    ..._data,
+    open: _data.visible,
+    onCancel: _data.onClose
+  };
+};
+var adapter = (Cmp, config) => {
+  const { oldMode = false } = config;
+  return (props) => {
+    const newProps = oldMode ? translateOldImageData(props) : props;
+    console.log("adapter----适配数据", props, newProps);
+    delete newProps.visible;
+    return /* @__PURE__ */ import_react.default.createElement(
+      Cmp,
+      {
+        ...newProps
+      }
+    );
+  };
+};
+var bigImageModalAdapter_default = adapter;
--- a/packages/biz/lib/Demo/index.d.ts
+++ b/packages/biz/lib/Demo/index.d.ts
@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: () => React.JSX.Element;
+export default _default;
--- a/packages/biz/lib/RealTimeMonitor/RealTimeMonitor.d.ts
+++ b/packages/biz/lib/RealTimeMonitor/RealTimeMonitor.d.ts
@ -0,0 +1,21 @@
+import React from 'react';
+import { IRecord, VideoPlayerCardProps, ViewLargerImageModalRef } from '@zhst/biz';
+interface RealTimeMonitorProps {
+    videoDataSource?: VideoPlayerCardProps[];
+    handleWindowClick?: (key?: string) => void;
+    handleCloseButtonClick?: (key?: string) => void;
+    selectedWindowKey?: string;
+    warningDataSource?: IRecord[];
+    viewLargerImageModalRef?: React.RefObject<ViewLargerImageModalRef>;
+    handleDownloadImg?: (imgSrc?: string) => void;
+    onRecordClick?: (record?: IRecord) => void;
+    selectedRecordId?: string;
+    isRecordListLoading?: boolean;
+    recordListTitle?: string;
+    style?: React.CSSProperties;
+    cardStyle?: React.CSSProperties;
+    imgStyle?: React.CSSProperties;
+    largeImageTitle?: string;
+}
+export declare const RealTimeMonitor: React.FC<RealTimeMonitorProps>;
+export default RealTimeMonitor;
--- a/packages/biz/lib/RealTimeMonitor/RealTimeMonitor.js
+++ b/packages/biz/lib/RealTimeMonitor/RealTimeMonitor.js
@ -0,0 +1,77 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/RealTimeMonitor/RealTimeMonitor.tsx
+var RealTimeMonitor_exports = {};
+__export(RealTimeMonitor_exports, {
+  RealTimeMonitor: () => RealTimeMonitor,
+  default: () => RealTimeMonitor_default
+});
+module.exports = __toCommonJS(RealTimeMonitor_exports);
+var import_react = __toESM(require("react"));
+var import_WindowToggle = __toESM(require("./components/WindowToggle"));
+var import_WarningRecordList = __toESM(require("./components/WarningRecordList"));
+var RealTimeMonitor = (props) => {
+  const {
+    videoDataSource,
+    handleWindowClick,
+    handleCloseButtonClick,
+    selectedWindowKey,
+    warningDataSource,
+    viewLargerImageModalRef,
+    handleDownloadImg,
+    onRecordClick,
+    selectedRecordId,
+    isRecordListLoading
+  } = props;
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "zhst-biz-real-time-monitor", style: { display: "flex" } }, /* @__PURE__ */ import_react.default.createElement(
+    import_WindowToggle.default,
+    {
+      selectedWindowKey,
+      dataSource: videoDataSource,
+      handleWindowClick,
+      handleCloseButtonClick
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_WarningRecordList.default,
+    {
+      dataSource: warningDataSource,
+      handleDownloadImg,
+      onRecordClick,
+      selectedRecordId,
+      viewLargerImageModalRef,
+      isRecordListLoading,
+      recordListTitle: "监控预警记录"
+    }
+  ));
+};
+var RealTimeMonitor_default = RealTimeMonitor;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  RealTimeMonitor
+});
--- a/packages/biz/lib/RealTimeMonitor/components/WarningRecordList/WarningRecordList.d.ts
+++ b/packages/biz/lib/RealTimeMonitor/components/WarningRecordList/WarningRecordList.d.ts
@ -0,0 +1,18 @@
+import React from 'react';
+import { IRecord, ViewLargerImageModalRef } from '@zhst/biz';
+import "./index.less";
+interface WarningRecordListProps {
+    dataSource?: IRecord[];
+    viewLargerImageModalRef?: React.RefObject<ViewLargerImageModalRef>;
+    handleDownloadImg?: (imgSrc?: string) => void;
+    onRecordClick?: (record?: IRecord) => void;
+    selectedRecordId?: string;
+    isRecordListLoading?: boolean;
+    recordListTitle?: string;
+    style?: React.CSSProperties;
+    cardStyle?: React.CSSProperties;
+    imgStyle?: React.CSSProperties;
+    largeImageTitle?: string;
+}
+declare const WarningRecordList: React.FC<WarningRecordListProps>;
+export default WarningRecordList;
--- a/packages/biz/lib/RealTimeMonitor/components/WarningRecordList/WarningRecordList.js
+++ b/packages/biz/lib/RealTimeMonitor/components/WarningRecordList/WarningRecordList.js
@ -0,0 +1,74 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/RealTimeMonitor/components/WarningRecordList/WarningRecordList.tsx
+var WarningRecordList_exports = {};
+__export(WarningRecordList_exports, {
+  default: () => WarningRecordList_default
+});
+module.exports = __toCommonJS(WarningRecordList_exports);
+var import_react = __toESM(require("react"));
+var import_biz = require("@zhst/biz");
+var import_antd = require("antd");
+var import_index = require("./index.less");
+var import_icons = require("@ant-design/icons");
+var WarningRecordList = (props) => {
+  const {
+    dataSource = [],
+    viewLargerImageModalRef,
+    selectedRecordId,
+    handleDownloadImg,
+    onRecordClick,
+    isRecordListLoading,
+    recordListTitle,
+    style,
+    cardStyle,
+    imgStyle,
+    largeImageTitle
+  } = props;
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "zhst-biz-warning-record-list", style }, /* @__PURE__ */ import_react.default.createElement("div", { className: "header" }, recordListTitle), /* @__PURE__ */ import_react.default.createElement("div", { className: "body" }, isRecordListLoading ? /* @__PURE__ */ import_react.default.createElement("div", { style: { height: "100%", display: "flex", justifyContent: "center", alignItems: "center" } }, /* @__PURE__ */ import_react.default.createElement(import_antd.Spin, { indicator: /* @__PURE__ */ import_react.default.createElement(import_icons.LoadingOutlined, { style: { fontSize: 24 } }) })) : (dataSource == null ? void 0 : dataSource.length) > 0 ? /* @__PURE__ */ import_react.default.createElement(import_antd.Space, { direction: "vertical", size: 10 }, dataSource == null ? void 0 : dataSource.map(
+    (record, index) => {
+      if (index > 2)
+        return;
+      return /* @__PURE__ */ import_react.default.createElement(
+        import_biz.WarningRecordCard,
+        {
+          key: record == null ? void 0 : record.id,
+          record,
+          onRecordClick: (record2) => {
+            onRecordClick == null ? void 0 : onRecordClick(record2);
+          },
+          selectedRecordId,
+          cardStyle: { width: 300, height: 264, ...cardStyle },
+          imgStyle: { width: 280, height: 169, ...imgStyle }
+        }
+      );
+    }
+  )) : /* @__PURE__ */ import_react.default.createElement("div", { style: { height: "100%", display: "flex", justifyContent: "center", alignItems: "center" } }, /* @__PURE__ */ import_react.default.createElement(import_antd.Empty, { description: "暂无数据" }))), /* @__PURE__ */ import_react.default.createElement(import_biz.ViewLargerImageModal, { ref: viewLargerImageModalRef, downloadImg: handleDownloadImg, title: largeImageTitle }));
+};
+var WarningRecordList_default = WarningRecordList;
--- a/packages/biz/lib/RealTimeMonitor/components/WarningRecordList/index.d.ts
+++ b/packages/biz/lib/RealTimeMonitor/components/WarningRecordList/index.d.ts
@ -0,0 +1,2 @@
+import WarningRecordList from './WarningRecordList';
+export default WarningRecordList;
--- a/packages/biz/lib/RealTimeMonitor/components/WarningRecordList/index.js
+++ b/packages/biz/lib/RealTimeMonitor/components/WarningRecordList/index.js
@ -0,0 +1,36 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/RealTimeMonitor/components/WarningRecordList/index.tsx
+var WarningRecordList_exports = {};
+__export(WarningRecordList_exports, {
+  default: () => WarningRecordList_default
+});
+module.exports = __toCommonJS(WarningRecordList_exports);
+var import_WarningRecordList = __toESM(require("./WarningRecordList"));
+var WarningRecordList_default = import_WarningRecordList.default;
--- a/packages/biz/lib/RealTimeMonitor/components/WarningRecordList/index.less
+++ b/packages/biz/lib/RealTimeMonitor/components/WarningRecordList/index.less
@ -0,0 +1,20 @@
+.zhst-biz-warning-record-list {
+  display: flex;
+  flex-direction: column;
+  border-left: solid 1px #00000026;
+  width: 320px;
+
+  .header {
+    width: 100%;
+    height: 48px;
+    background-color: #EFF2F4;
+    padding: 10px 20px;
+    box-sizing: border-box;
+  }
+
+  .body {
+    padding: 10px;
+    overflow: hidden;
+    flex: 1;
+  }
+}
--- a/packages/biz/lib/RealTimeMonitor/components/WindowToggle/WindowToggle.d.ts
+++ b/packages/biz/lib/RealTimeMonitor/components/WindowToggle/WindowToggle.d.ts
@ -0,0 +1,11 @@
+import React from 'react';
+import { VideoPlayerCardProps } from '@zhst/biz';
+import './index.less';
+interface WindowToggleProps {
+    dataSource?: VideoPlayerCardProps[];
+    handleWindowClick?: (key?: string) => void;
+    handleCloseButtonClick?: (key?: string) => void;
+    selectedWindowKey?: string;
+}
+export declare const WindowToggle: React.FC<WindowToggleProps>;
+export default WindowToggle;
--- a/packages/biz/lib/RealTimeMonitor/components/WindowToggle/WindowToggle.js
+++ b/packages/biz/lib/RealTimeMonitor/components/WindowToggle/WindowToggle.js
@ -0,0 +1,88 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/RealTimeMonitor/components/WindowToggle/WindowToggle.tsx
+var WindowToggle_exports = {};
+__export(WindowToggle_exports, {
+  WindowToggle: () => WindowToggle,
+  default: () => WindowToggle_default
+});
+module.exports = __toCommonJS(WindowToggle_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_icons = require("@ant-design/icons");
+var import_biz = require("@zhst/biz");
+var import_index = require("./index.less");
+var import_lib = require("antd/lib");
+var WindowToggle = (props) => {
+  const { dataSource = [], handleWindowClick, handleCloseButtonClick, selectedWindowKey } = props;
+  const [size, setSize] = (0, import_react.useState)("large");
+  const { useToken } = import_lib.theme;
+  const { token } = useToken();
+  const getLabelStyle = (isSelected) => ({
+    padding: "0 11px",
+    background: "#fff",
+    ...isSelected ? { background: token.colorPrimary, color: "#fff" } : {}
+  });
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "zhst-biz-window-toggle" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "header" }, /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Segmented,
+    {
+      defaultValue: "large",
+      options: [
+        { value: "large", label: /* @__PURE__ */ import_react.default.createElement("div", { style: getLabelStyle(size === "large") }, /* @__PURE__ */ import_react.default.createElement(import_icons.BarsOutlined, null)) },
+        { value: "small", label: /* @__PURE__ */ import_react.default.createElement("div", { style: getLabelStyle(size === "small") }, /* @__PURE__ */ import_react.default.createElement(import_icons.AppstoreOutlined, null)) }
+      ],
+      onChange: (value) => {
+        if (value === "large" && dataSource.length > 0) {
+          const { windowKey } = dataSource[0];
+          handleWindowClick == null ? void 0 : handleWindowClick(windowKey);
+        }
+        setSize(value);
+      }
+    }
+  )), /* @__PURE__ */ import_react.default.createElement("div", { className: "body" }, dataSource == null ? void 0 : dataSource.map((item, index) => {
+    if (size === "large" && index > 0)
+      return;
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_biz.VideoPlayerCard,
+      {
+        key: item.windowKey,
+        selectedWindowKey,
+        size,
+        ...item,
+        handleWindowClick,
+        handleCloseButtonClick
+      }
+    );
+  })));
+};
+var WindowToggle_default = WindowToggle;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  WindowToggle
+});
--- a/packages/biz/lib/RealTimeMonitor/components/WindowToggle/index.d.ts
+++ b/packages/biz/lib/RealTimeMonitor/components/WindowToggle/index.d.ts
@ -0,0 +1,2 @@
+import WindowToggle from './WindowToggle';
+export default WindowToggle;
--- a/packages/biz/lib/RealTimeMonitor/components/WindowToggle/index.js
+++ b/packages/biz/lib/RealTimeMonitor/components/WindowToggle/index.js
@ -0,0 +1,36 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/RealTimeMonitor/components/WindowToggle/index.tsx
+var WindowToggle_exports = {};
+__export(WindowToggle_exports, {
+  default: () => WindowToggle_default
+});
+module.exports = __toCommonJS(WindowToggle_exports);
+var import_WindowToggle = __toESM(require("./WindowToggle"));
+var WindowToggle_default = import_WindowToggle.default;
--- a/packages/biz/lib/RealTimeMonitor/components/WindowToggle/index.less
+++ b/packages/biz/lib/RealTimeMonitor/components/WindowToggle/index.less
@ -0,0 +1,45 @@
+.zhst-biz-window-toggle {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+
+  .header {
+    width: 100%;
+    height: 48px;
+    background-color: #EFF2F4;
+    padding: 10px 20px;
+    box-sizing: border-box;
+
+    .ant-segmented {
+      padding: 0;
+
+      .ant-segmented-group {
+        border-radius: 4px;
+        overflow: hidden;
+
+        .ant-segmented-item {
+          border-radius: 0;
+
+          .ant-segmented-item-label {
+            padding: 0;
+          }
+        }
+      }
+    }
+  }
+
+  .body {
+    flex: 1;
+    width: 100%;
+    background-color: #E5EAEC;
+    padding: 10px;
+    box-sizing: border-box;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+
+    >div {
+      margin: 10px;
+    }
+  }
+}
--- a/packages/biz/lib/RealTimeMonitor/index.d.ts
+++ b/packages/biz/lib/RealTimeMonitor/index.d.ts
@ -0,0 +1,2 @@
+import RealTimeMonitor from './RealTimeMonitor';
+export default RealTimeMonitor;
--- a/packages/biz/lib/RealTimeMonitor/index.js
+++ b/packages/biz/lib/RealTimeMonitor/index.js
@ -0,0 +1,36 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/RealTimeMonitor/index.tsx
+var RealTimeMonitor_exports = {};
+__export(RealTimeMonitor_exports, {
+  default: () => RealTimeMonitor_default
+});
+module.exports = __toCommonJS(RealTimeMonitor_exports);
+var import_RealTimeMonitor = __toESM(require("./RealTimeMonitor"));
+var RealTimeMonitor_default = import_RealTimeMonitor.default;
--- a/packages/biz/lib/VideoPlayerCard/VideoPlayerCard.d.ts
+++ b/packages/biz/lib/VideoPlayerCard/VideoPlayerCard.d.ts
@ -0,0 +1,19 @@
+import { CardProps } from 'antd';
+import React, { ReactNode } from 'react';
+import './index.less';
+export interface VideoPlayerCardProps {
+    windowKey?: string;
+    selectedWindowKey?: string;
+    showType?: 'video' | "image";
+    imgSrc?: string;
+    videoSrc?: string;
+    cardProps?: CardProps;
+    errorReasonText?: string;
+    isWindowLoading?: boolean;
+    size?: 'large' | 'small';
+    title?: string | ReactNode;
+    handleCloseButtonClick?: (key?: string) => void;
+    handleWindowClick?: (key?: string) => void;
+}
+export declare const VideoPlayerCard: React.FC<VideoPlayerCardProps>;
+export default VideoPlayerCard;
--- a/packages/biz/lib/VideoPlayerCard/VideoPlayerCard.js
+++ b/packages/biz/lib/VideoPlayerCard/VideoPlayerCard.js
@ -0,0 +1,99 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/VideoPlayerCard/VideoPlayerCard.tsx
+var VideoPlayerCard_exports = {};
+__export(VideoPlayerCard_exports, {
+  VideoPlayerCard: () => VideoPlayerCard,
+  default: () => VideoPlayerCard_default
+});
+module.exports = __toCommonJS(VideoPlayerCard_exports);
+var import_antd = require("antd");
+var import_lib = require("antd/lib");
+var import_meta = require("@zhst/meta");
+var import_react = __toESM(require("react"));
+var import_icons = require("@ant-design/icons");
+var import_index = require("./index.less");
+var VideoPlayerCard = (props) => {
+  const componentName = `zhst-biz-video-player-card`;
+  const { showType, imgSrc, videoSrc, cardProps, isWindowLoading, errorReasonText, size, title, handleCloseButtonClick, handleWindowClick, windowKey, selectedWindowKey = "" } = props;
+  const [cardContent, setCardContent] = (0, import_react.useState)(null);
+  const { useToken } = import_lib.theme;
+  const { token } = useToken();
+  const videoRef = (0, import_react.useRef)(null);
+  const selectedBorderStyle = {
+    border: `2px solid ${token.colorPrimary}`,
+    boxShadow: " 0px 2px 9px 0px rgba(0,0,0,0.16)"
+  };
+  const cardStyle = {
+    ...size === "large" ? { height: 931 } : { height: 456, cursor: "pointer" },
+    ...size === "small" && selectedWindowKey === windowKey ? selectedBorderStyle : {}
+  };
+  const videoPlayerCardStyle = size === "small" ? { width: "calc(50% - 20px)" } : { flex: 1 };
+  (0, import_react.useEffect)(() => {
+    var _a;
+    if (!isWindowLoading && (videoSrc || imgSrc)) {
+      let contentElement = null;
+      if (videoSrc) {
+        contentElement = /* @__PURE__ */ import_react.default.createElement(import_meta.VideoPlayer, { ref: videoRef, url: videoSrc });
+        (_a = videoRef.current) == null ? void 0 : _a.setShowCrop(true);
+      } else if (imgSrc) {
+        contentElement = /* @__PURE__ */ import_react.default.createElement(
+          "img",
+          {
+            alt: "首帧图",
+            src: imgSrc,
+            style: { width: "100%", height: "100%", display: "block" }
+          }
+        );
+      }
+      setCardContent(contentElement);
+    } else {
+      setCardContent(null);
+    }
+  }, [showType, imgSrc, videoSrc, isWindowLoading]);
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: componentName, onClick: () => {
+    handleWindowClick == null ? void 0 : handleWindowClick(windowKey);
+  }, style: videoPlayerCardStyle }, /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Card,
+    {
+      title: /* @__PURE__ */ import_react.default.createElement(import_antd.Space, { style: { width: "100%", justifyContent: "space-between" } }, /* @__PURE__ */ import_react.default.createElement("div", null, title), /* @__PURE__ */ import_react.default.createElement("div", { className: "card-close-button" }, /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { type: "text", onClick: () => {
+        handleCloseButtonClick == null ? void 0 : handleCloseButtonClick(windowKey);
+      } }, /* @__PURE__ */ import_react.default.createElement(import_icons.CloseOutlined, null)))),
+      style: { display: "flex", flexDirection: "column", borderRadius: 4, overflow: "hidden", ...cardStyle },
+      bodyStyle: { flex: 1 },
+      ...cardProps
+    },
+    cardContent ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, cardContent) : /* @__PURE__ */ import_react.default.createElement("div", { style: { backgroundColor: "#000", height: "100%", display: "flex", padding: "20px", boxSizing: "border-box" } }, isWindowLoading ? /* @__PURE__ */ import_react.default.createElement("div", { style: { flex: 1, display: "flex", justifyContent: "center", alignItems: "center" } }, /* @__PURE__ */ import_react.default.createElement(import_antd.Spin, { indicator: /* @__PURE__ */ import_react.default.createElement(import_icons.LoadingOutlined, { style: { fontSize: 24 } }) })) : !!errorReasonText && /* @__PURE__ */ import_react.default.createElement("span", { style: { color: token.colorError } }, errorReasonText))
+  ));
+};
+var VideoPlayerCard_default = VideoPlayerCard;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  VideoPlayerCard
+});
--- a/packages/biz/lib/VideoPlayerCard/index.d.ts
+++ b/packages/biz/lib/VideoPlayerCard/index.d.ts
@ -0,0 +1,3 @@
+import VideoPlayerCard from './VideoPlayerCard';
+export type { VideoPlayerCardProps } from './VideoPlayerCard';
+export default VideoPlayerCard;
--- a/packages/biz/lib/VideoPlayerCard/index.js
+++ b/packages/biz/lib/VideoPlayerCard/index.js
@ -0,0 +1,36 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/VideoPlayerCard/index.tsx
+var VideoPlayerCard_exports = {};
+__export(VideoPlayerCard_exports, {
+  default: () => VideoPlayerCard_default
+});
+module.exports = __toCommonJS(VideoPlayerCard_exports);
+var import_VideoPlayerCard = __toESM(require("./VideoPlayerCard"));
+var VideoPlayerCard_default = import_VideoPlayerCard.default;
--- a/packages/biz/lib/VideoPlayerCard/index.less
+++ b/packages/biz/lib/VideoPlayerCard/index.less
@ -0,0 +1,30 @@
+.zhst-biz-video-player-card {
+  .ant-card-head {
+    padding: 0 20px;
+  }
+
+  .ant-card-body {
+    padding: 0;
+    overflow: hidden;
+    border-radius: 0;
+
+    .zhst-image__video-view {
+      height: 100%;
+    }
+  }
+
+  .card-close-button {
+    .ant-btn {
+      padding: 0 3px;
+      height: 22px;
+      color: #00000073;
+    }
+
+    .ant-btn:hover {
+      padding: 0 3px;
+      height: 22px;
+      color: #000000e0;
+    }
+  }
+
+}
--- a/packages/biz/lib/ViewLargerImageModal/ViewLargerImageModal.d.ts
+++ b/packages/biz/lib/ViewLargerImageModal/ViewLargerImageModal.d.ts
@ -0,0 +1,25 @@
+import React from 'react';
+import { ModalProps, SpaceProps } from 'antd';
+import './index.less';
+type ViewLargerImageModalParams = {
+    imgSrc?: string;
+    warningData?: {
+        label?: string;
+        value?: string;
+    }[];
+};
+export interface ViewLargerImageModalRef {
+    show: (params?: ViewLargerImageModalParams) => void;
+    handleCancel: () => void;
+}
+export interface ViewLargerImageModalProps {
+    imgStyle?: React.CSSProperties;
+    downloadImg?: (imgSrc?: string) => void;
+    title?: string;
+    downloadText?: string;
+    modalProps?: ModalProps;
+    spaceProps?: SpaceProps;
+}
+export declare const ViewLargerImageModal: React.ForwardRefExoticComponent<ViewLargerImageModalProps & React.RefAttributes<ViewLargerImageModalRef>>;
+export default ViewLargerImageModal;
+export declare const useViewLargerImageModal: () => React.RefObject<ViewLargerImageModalRef>;
--- a/packages/biz/lib/ViewLargerImageModal/ViewLargerImageModal.js
+++ b/packages/biz/lib/ViewLargerImageModal/ViewLargerImageModal.js
@ -0,0 +1,87 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/ViewLargerImageModal/ViewLargerImageModal.tsx
+var ViewLargerImageModal_exports = {};
+__export(ViewLargerImageModal_exports, {
+  ViewLargerImageModal: () => ViewLargerImageModal,
+  default: () => ViewLargerImageModal_default,
+  useViewLargerImageModal: () => useViewLargerImageModal
+});
+module.exports = __toCommonJS(ViewLargerImageModal_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_theme = __toESM(require("antd/lib/theme"));
+var import_icons = require("@ant-design/icons");
+var import_index = require("./index.less");
+var ViewLargerImageModal = (0, import_react.forwardRef)(
+  (props, ref) => {
+    const { modalProps, downloadImg, imgStyle, title = "预警大图", downloadText = "下载大图", spaceProps } = props;
+    const { useToken } = import_theme.default;
+    const { token } = useToken();
+    const [open, setOpen] = (0, import_react.useState)(false);
+    const [imgSrc, setImgSrc] = (0, import_react.useState)();
+    const [warningData, setWarningData] = (0, import_react.useState)();
+    const handleCancel = () => {
+      setOpen(false);
+    };
+    (0, import_react.useImperativeHandle)(ref, () => {
+      return {
+        show: (_params) => {
+          setOpen(true);
+          setImgSrc(_params == null ? void 0 : _params.imgSrc);
+          setWarningData(_params == null ? void 0 : _params.warningData);
+        },
+        handleCancel
+      };
+    });
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Modal,
+      {
+        className: "zhst-biz-view-warning-larger-image-modal",
+        open,
+        destroyOnClose: true,
+        title,
+        width: "1029px",
+        footer: null,
+        onCancel: handleCancel,
+        ...modalProps
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_antd.Space, { size: 0, styles: { item: { backgroundColor: "#F6F9FAFF" } }, ...spaceProps }, /* @__PURE__ */ import_react.default.createElement("img", { alt: title, src: imgSrc, style: { width: 789, height: 444, display: "block", ...imgStyle } }), /* @__PURE__ */ import_react.default.createElement("div", { className: "right-context" }, warningData == null ? void 0 : warningData.map(({ label, value }) => /* @__PURE__ */ import_react.default.createElement("div", { key: label }, /* @__PURE__ */ import_react.default.createElement("span", { className: "context-key" }, `${label}: `), value)), imgSrc && downloadImg && /* @__PURE__ */ import_react.default.createElement("div", { className: "img-download", style: { color: token.colorPrimary }, onClick: () => downloadImg == null ? void 0 : downloadImg(imgSrc) }, /* @__PURE__ */ import_react.default.createElement(import_icons.DownloadOutlined, null), /* @__PURE__ */ import_react.default.createElement("span", { style: { paddingLeft: 3 } }, downloadText))))
+    );
+  }
+);
+var ViewLargerImageModal_default = ViewLargerImageModal;
+var useViewLargerImageModal = () => {
+  return (0, import_react.useRef)(null);
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ViewLargerImageModal,
+  useViewLargerImageModal
+});
--- a/packages/biz/lib/ViewLargerImageModal/index.d.ts
+++ b/packages/biz/lib/ViewLargerImageModal/index.d.ts
@ -0,0 +1,4 @@
+import ViewLargerImageModal, { useViewLargerImageModal } from './ViewLargerImageModal';
+export type { ViewLargerImageModalRef, ViewLargerImageModalProps } from './ViewLargerImageModal';
+export default ViewLargerImageModal;
+export { useViewLargerImageModal };
--- a/packages/biz/lib/ViewLargerImageModal/index.js
+++ b/packages/biz/lib/ViewLargerImageModal/index.js
@ -0,0 +1,41 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/ViewLargerImageModal/index.tsx
+var ViewLargerImageModal_exports = {};
+__export(ViewLargerImageModal_exports, {
+  default: () => ViewLargerImageModal_default,
+  useViewLargerImageModal: () => import_ViewLargerImageModal.useViewLargerImageModal
+});
+module.exports = __toCommonJS(ViewLargerImageModal_exports);
+var import_ViewLargerImageModal = __toESM(require("./ViewLargerImageModal"));
+var ViewLargerImageModal_default = import_ViewLargerImageModal.default;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useViewLargerImageModal
+});
--- a/packages/biz/lib/ViewLargerImageModal/index.less
+++ b/packages/biz/lib/ViewLargerImageModal/index.less
@ -0,0 +1,62 @@
+.zhst-biz-view-warning-larger-image-modal {
+  font-family: MicrosoftYaHei;
+
+  .ant-modal-content {
+    padding: 0;
+    height: 492px;
+    border-radius: 6px;
+    overflow: hidden;
+
+    .ant-modal-close {
+      top: 14px;
+      right: 16px;
+    }
+
+    .ant-modal-header {
+      height: 48px;
+      line-height: 48px;
+      margin-bottom: 0;
+
+      .ant-modal-title {
+        height: 100%;
+        line-height: 48px;
+        font-weight: bold;
+        padding-left: 20px;
+      }
+    }
+
+    .ant-modal-body {
+      height: 444px;
+
+      >div {
+        width: 100%;
+        height: 100%;
+        align-items: flex-start;
+
+        >div:nth-child(2) {
+          position: relative;
+          flex: 1;
+          box-sizing: border-box;
+          height: 100%;
+          padding: 30px 16px;
+
+          .right-context>div {
+            margin-bottom: 20px;
+          }
+
+          .right-context .context-key {
+            font-weight: bold;
+          }
+
+          .img-download {
+            position: absolute;
+            bottom: 0;
+            cursor: pointer;
+          }
+
+        }
+
+      }
+    }
+  }
+}
--- a/packages/biz/lib/WarningRecordCard/WarningRecordCard.d.ts
+++ b/packages/biz/lib/WarningRecordCard/WarningRecordCard.d.ts
@ -0,0 +1,30 @@
+import { CardProps } from 'antd';
+import React from 'react';
+import './index.less';
+export interface IRecord {
+    imgSrc?: string;
+    id?: string;
+    /**
+     * 预警类型
+     */
+    warningType?: string;
+    warningInfo?: string[];
+    boxId: string;
+    position: string;
+    cabietId?: string;
+    cabietText?: string;
+    warningTime?: string;
+    warningTimestamp?: string | number;
+    warningTimeFormat?: string;
+}
+export interface WarningRecordCardProps {
+    record?: IRecord;
+    onRecordClick?: (record?: IRecord) => void;
+    style?: React.CSSProperties;
+    cardProps?: CardProps;
+    selectedRecordId?: string;
+    cardStyle?: React.CSSProperties;
+    imgStyle?: React.CSSProperties;
+}
+export declare const WarningRecordCard: React.FC<WarningRecordCardProps>;
+export default WarningRecordCard;
--- a/Show More
+++ b/Show More