diff --git a/src/pages/Container/Map/components/Content/branchOffice/Camera/index.js b/src/pages/Container/Map/components/Content/branchOffice/Camera/index.js
new file mode 100644
index 0000000..f2bacbc
--- /dev/null
+++ b/src/pages/Container/Map/components/Content/branchOffice/Camera/index.js
@@ -0,0 +1,100 @@
+import { useBoolean } from "ahooks";
+import { Modal } from "antd";
+import { useState } from "react";
+import AliPlayer from "zy-react-library/components/Video/AliPlayer";
+import "./index.less";
+
+function Camera() {
+  const [state, { setFalse }] = useBoolean(true);
+  const [parentList, setParentList] = useState([
+    { title: "一级一级一级一级一级一级一级一级一级一级一级一级一级一级一级一级" },
+    { title: "二级" },
+    { title: "三级" },
+  ]);
+  const [parentCurrentIndex, setParentCurrentIndex] = useState(0);
+  const [childList, setChildList] = useState([
+    { title: "一级_一一级_一一级_一一级_一一级_一一级_一一级_一一级_一一级_一一级_一" },
+    { title: "一级_二" },
+    { title: "一级_三" },
+    { title: "一级_四" },
+    { title: "一级_五" },
+    { title: "一级_六" },
+  ]);
+  const [childCurrentIndex, setChildCurrentIndex] = useState(0);
+  const [videoList, setVideoList] = useState([
+    { src: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4" },
+    { src: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4" },
+    { src: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4" },
+    { src: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4" },
+    { src: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4" },
+    { src: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4" },
+    { src: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4" },
+    { src: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4" },
+    { src: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4" },
+  ]);
+
+  const onChangeParentList = (index) => {
+    if (index === parentCurrentIndex)
+      return;
+    setParentCurrentIndex(index);
+    setChildCurrentIndex(0);
+  };
+
+  const onChangeChildList = (index) => {
+    if (index === childCurrentIndex)
+      return;
+    setChildCurrentIndex(index);
+  };
+
+  return (
+    <Modal
+      open={state}
+      maskClosable={false}
+      footer={null}
+      width={1500}
+      onCancel={setFalse}
+      title="视频巡屏"
+      wrapClassName="map_content_branch_office_camera_modal"
+    >
+      <div className="container">
+        <div className="parent_tabs">
+          {parentList.map((item, index) => (
+            <div
+              key={index}
+              className={`tab ${parentCurrentIndex === index ? "active" : ""}`}
+              onClick={() => {
+                onChangeParentList(index);
+              }}
+            >
+              {item.title}
+            </div>
+          ))}
+        </div>
+        <div className="info">
+          <div className="child_tabs">
+            {childList.map((item, index) => (
+              <div
+                key={index}
+                className={`tab ${childCurrentIndex === index ? "active" : ""}`}
+                onClick={() => {
+                  onChangeChildList(index);
+                }}
+              >
+                {item.title}
+              </div>
+            ))}
+          </div>
+          <div className="videos">
+            {videoList.map((item, index) => (
+              <div key={index} className="video">
+                <AliPlayer source={item.src} height="150px" isLive />
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+}
+
+export default Camera;
diff --git a/src/pages/Container/Map/components/Content/branchOffice/Camera/index.less b/src/pages/Container/Map/components/Content/branchOffice/Camera/index.less
new file mode 100644
index 0000000..118ef94
--- /dev/null
+++ b/src/pages/Container/Map/components/Content/branchOffice/Camera/index.less
@@ -0,0 +1,104 @@
+.map_content_branch_office_camera_modal {
+  .@{ant-prefix}-modal {
+    .@{ant-prefix}-modal-header {
+      background-color: #06103b;
+      padding: 16px 20px;
+
+      .@{ant-prefix}-modal-title {
+        color: #fff;
+      }
+    }
+
+    .@{ant-prefix}-modal-content {
+      padding: 0;
+      background-color: #020828;
+    }
+
+    .@{ant-prefix}-modal-close {
+      color: #fff;
+    }
+  }
+
+  .container {
+    padding: 27px 14px;
+
+    .parent_tabs {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 14px;
+
+      .tab {
+        background-color: #0B1544;
+        border: 1px solid #0c1957;
+        border-radius: 10px 10px 10px 2px;
+        width: 192px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        padding: 10px;
+        color: #fff;
+        text-align: center;
+        cursor: pointer;
+
+        &.active {
+          background-color: #1537CC;
+          border: 1px solid rgba(0, 180, 255, 0.61);
+        }
+      }
+    }
+
+    .info {
+      margin-top: 12px;
+      display: flex;
+      gap: 25px;
+
+      .child_tabs {
+        width: 240px;
+        background-color: rgba(35, 55, 140, 0.15);
+        border-radius: 10px;
+        padding: 50px 20px;
+
+        .tab {
+          background-color: #0B1544;
+          color: #fff;
+          border-radius: 10px 2px;
+          width: 192px;
+          padding: 10px;
+          text-align: center;
+          cursor: pointer;
+          margin-top: 17px;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          border: 1px solid #0c1957;
+
+          &:first-child {
+            margin-top: 0;
+          }
+
+          &.active {
+            background-color: #1537CC;
+            border: 1px solid rgba(0, 180, 255, 0.61);
+          }
+        }
+      }
+
+      .videos {
+        background-color: rgba(35, 55, 140, 0.149);
+        flex: 1;
+        border: 1px solid rgb(9, 23, 93);
+        border-radius: 10px;
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 20px 27px;
+        padding: 35px 29px;
+
+        .video {
+          border: 1px solid #294695;
+          border-radius: 2px;
+        }
+      }
+    }
+  }
+}
diff --git a/src/pages/Container/Map/components/Content/index.js b/src/pages/Container/Map/components/Content/index.js
index 214c8b2..ff5106a 100644
--- a/src/pages/Container/Map/components/Content/index.js
+++ b/src/pages/Container/Map/components/Content/index.js
@@ -5,6 +5,7 @@ import collapseMenuBg1 from "~/assets/images/map_bi/content/collapse_menu_bg1.pn
 import collapseMenuBg2 from "~/assets/images/map_bi/content/collapse_menu_bg2.png";
 import { branchOfficeUtilsList } from "~/pages/Container/Map/components/BottomUtils/branchOfficeUtilsList";
 import { portUtilsList } from "~/pages/Container/Map/components/BottomUtils/portUtilsList";
+import BranchCamera from "~/pages/Container/Map/components/Content/branchOffice/Camera";
 import BranchFengBi from "~/pages/Container/Map/components/Content/branchOffice/FengBi";
 import BranchOfficeIndexLeft from "~/pages/Container/Map/components/Content/branchOffice/IndexLeft";
 import BranchOfficeIndexRight from "~/pages/Container/Map/components/Content/branchOffice/IndexRight";
@@ -70,6 +71,8 @@ function Content() {
       return <BranchZhongDian />;
     if (bottomUtilsCurrentType === "closedArea")
       return <BranchFengBi />;
+    if (bottomUtilsCurrentType === "camera")
+      return <BranchCamera />;
   };
 
   const renderBranchOfficeContentRight = () => {
@@ -125,17 +128,21 @@ function Content() {
     }
 
     if (currentBranchOffice) {
+      const bottomUtilsCurrentType = bottomUtilsCurrentIndex !== -1 ? branchOfficeUtilsList[bottomUtilsCurrentIndex].type : "";
+
       return (
         <>
-          <div
-            className={`collapse_menu branch_office left ${collapseLeft ? "active" : ""}`}
-            style={{ backgroundImage: `url(${collapseMenuBg2})` }}
-            onClick={() => {
-              setCollapseLeft(!collapseLeft);
-            }}
-          >
-            <img src={collapseMenuImg2} alt="" />
-          </div>
+          {bottomUtilsCurrentType !== "camera" && (
+            <div
+              className={`collapse_menu branch_office left ${collapseLeft ? "active" : ""}`}
+              style={{ backgroundImage: `url(${collapseMenuBg2})` }}
+              onClick={() => {
+                setCollapseLeft(!collapseLeft);
+              }}
+            >
+              <img src={collapseMenuImg2} alt="" />
+            </div>
+          )}
           {bottomUtilsCurrentIndex === -1 && (
             <div
               className={`collapse_menu branch_office right ${collapseRight ? "active" : ""}`}