分公司BI

src/pages/Container/Share/components/Header/index.less

@@ -1,7 +1,9 @@
 .white_share_header{
-  width: 100vw;
+  width: 100%;
   height: 86px;
   position: relative;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
   .title{
     position: absolute;
     left: 50.5%;

src/pages/Container/WhiteBranchOffice/components/CenterPanel/index.js

@@ -6,6 +6,7 @@ import Title from "~/pages/Container/WhiteBranchOffice/components/Title";
 import { initEcharts1, initEcharts2, initEcharts3, initEcharts4, initEcharts5 } from "./echarts";
 import "./index.less";
 
+const block3_2TabsList = ["年度", "季度"];
 function CenterPanel() {
   const [weatherData, setWeatherData] = useState({
     text: "晴天",
@@ -34,6 +35,7 @@ function CenterPanel() {
     { title: "自查", count1: 50, count2: 40 },
     { title: "专项", count1: 50, count2: 40 },
   ]);
+  const [block3_2Index, setBlock3_2Index] = useState(0);
 
   const chart1Instance = useRef(null);
   const main1Ref = useRef(null);
@@ -156,6 +158,12 @@ function CenterPanel() {
     };
   });
 
+  const block3_2OptionsClick = (index) => {
+    if (index === block3_2Index)
+      return;
+    setBlock3_2Index(index);
+  };
+
   return (
     <div className="white_branch_office_center_container">
       <div className="block1">
@@ -266,7 +274,22 @@ function CenterPanel() {
           </div>
         </div>
         <div className="block3_2">
-          <Title title="隐患治理的环比与同比情况" />
+          <Title
+            title="隐患治理的环比与同比情况"
+            extra={(
+              <div className="tabs">
+                {block3_2TabsList.map((item, index) => (
+                  <div
+                    key={index}
+                    className={`tab ${index === block3_2Index ? "active" : ""}`}
+                    onClick={() => block3_2OptionsClick(index)}
+                  >
+                    {item}
+                  </div>
+                ))}
+              </div>
+            )}
+          />
           <div className="container">
             <div ref={main5Ref} style={{ width: "100%", height: "225px" }} />
           </div>

src/pages/Container/WhiteBranchOffice/components/CenterPanel/index.less

@@ -221,6 +221,26 @@
       border: 1px solid #fff;
       background-image: linear-gradient(180deg, rgb(217, 239, 253) 0%, rgb(225, 243, 254) 58%, rgb(232, 246, 255) 100%);
       box-shadow: inset 0 1px 3px 0 rgba(49, 122, 202, 0.48);
+
+      .tabs {
+        display: flex;
+
+        .tab {
+          background-color: #D6ECFF;
+          padding: 4px 16px;
+          border-radius: 2px;
+          color: #3C648D;
+          font-size: 14px;
+          border: 1px solid #A3CCFA;
+          cursor: pointer;
+
+          &.active {
+            background-color: #6291fa;
+            border: 1px solid #6291fa;
+            color: #fff;
+          }
+        }
+      }
     }
   }
 }

src/pages/Container/WhiteBranchOffice/components/Title/index.js

@@ -10,8 +10,7 @@ function Title(props) {
         </div>
         <div className="title">{props.title}</div>
       </div>
-
-      <div className="more">更多 ></div>
+      <div className="extra">{props.extra}</div>
     </div>
   );
 }

src/pages/Container/WhiteBranchOffice/components/Title/index.less

@@ -10,9 +10,11 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
+
   .name {
     display: flex;
     align-items: center;
+
     .decoration {
       width: 18px;
       height: 18px;
@@ -27,10 +29,8 @@
       padding-left: 10px;
     }
   }
-  .more{
-    color: #3177be;
+
+  .extra {
     margin-right: 10px;
   }
-
-
 }

src/pages/Container/WhiteBranchOffice/index.js

@@ -1,6 +1,7 @@
 import { useMount } from "ahooks";
 import autoFit from "autofit.js";
 import bg from "~/assets/images/public/white/bg.png";
+import Header from "~/pages/Container/Share/components/Header";
 import CenterPanel from "~/pages/Container/WhiteBranchOffice/components/CenterPanel";
 import LeftPanel from "~/pages/Container/WhiteBranchOffice/components/LeftPanel";
 import RightPanel from "~/pages/Container/WhiteBranchOffice/components/RightPanel";
@@ -13,7 +14,7 @@ function WhiteBranchOffice() {
 
   return (
     <div className="white_branch_office" style={{ backgroundImage: `url(${bg})` }}>
-      <div className="header"></div>
+      <Header />
       <div className="white_branch_office_container">
         <LeftPanel />
         <CenterPanel />

src/pages/Container/WhiteBranchOffice/index.less

@@ -4,10 +4,6 @@
   background-size: 100% 100%;
   background-repeat: no-repeat;
 
-  .header {
-    height: 75px;
-  }
-
   .white_branch_office_container {
     margin-top: 30px;
     display: flex;