分公司BI

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;

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;
+        }
+      }
+    }
+  }
+}

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,8 +128,11 @@ function Content() {
     }
 
     if (currentBranchOffice) {
+      const bottomUtilsCurrentType = bottomUtilsCurrentIndex !== -1 ? branchOfficeUtilsList[bottomUtilsCurrentIndex].type : "";
+
       return (
         <>
+          {bottomUtilsCurrentType !== "camera" && (
             <div
               className={`collapse_menu branch_office left ${collapseLeft ? "active" : ""}`}
               style={{ backgroundImage: `url(${collapseMenuBg2})` }}
@@ -136,6 +142,7 @@ function Content() {
             >
               <img src={collapseMenuImg2} alt="" />
             </div>
+          )}
           {bottomUtilsCurrentIndex === -1 && (
             <div
               className={`collapse_menu branch_office right ${collapseRight ? "active" : ""}`}