diff --git a/src/pages/Container/Map/components/Content/branchOffice/Panel/index.js b/src/pages/Container/Map/components/Content/branchOffice/Panel/index.js
new file mode 100644
index 0000000..152342c
--- /dev/null
+++ b/src/pages/Container/Map/components/Content/branchOffice/Panel/index.js
@@ -0,0 +1,20 @@
+import titleBackground from "~/assets/images/map_bi/content/title_bg2.png";
+import "./index.less";
+
+/** 分公司大屏信息区块的统一标题与内容外层。 */
+function Panel({ title, extra, children, className = "" }) {
+  return (
+    <section className={`branch-office-panel ${className}`.trim()}>
+      <div
+        className="branch-office-panel__title"
+        style={{ backgroundImage: `url(${titleBackground})` }}
+      >
+        <div className="branch-office-panel__title-label">{title}</div>
+        <div className="branch-office-panel__title-extra">{extra}</div>
+      </div>
+      <div className="branch-office-panel__content">{children}</div>
+    </section>
+  );
+}
+
+export default Panel;
diff --git a/src/pages/Container/Map/components/Content/branchOffice/Panel/index.less b/src/pages/Container/Map/components/Content/branchOffice/Panel/index.less
new file mode 100644
index 0000000..924dfc9
--- /dev/null
+++ b/src/pages/Container/Map/components/Content/branchOffice/Panel/index.less
@@ -0,0 +1,20 @@
+.branch-office-panel__title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 41px;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+.branch-office-panel__title-label {
+  padding-left: 25px;
+  color: #fff;
+  font-size: 14px;
+  font-weight: bold;
+}
+
+.branch-office-panel__title-extra {
+  margin-right: 5px;
+}
diff --git a/src/pages/Container/Map/components/Content/branchOffice/WeiXian/DangerWorkDataPanel/index.js b/src/pages/Container/Map/components/Content/branchOffice/WeiXian/DangerWorkDataPanel/index.js
new file mode 100644
index 0000000..33332a4
--- /dev/null
+++ b/src/pages/Container/Map/components/Content/branchOffice/WeiXian/DangerWorkDataPanel/index.js
@@ -0,0 +1,63 @@
+import { Connect } from "@cqsjjb/jjb-dva-runtime";
+import { Spin } from "antd";
+import { useContext, useEffect, useState } from "react";
+import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
+import { NS_BI_STATISTICS } from "~/enumerate/namespace";
+import Panel from "~/pages/Container/Map/components/Content/branchOffice/Panel";
+import { Context } from "~/pages/Container/Map/js/context";
+import "./index.less";
+
+/** 负责查询并展示危险作业类别、状态及参与人数统计。 */
+function DangerWorkDataPanel(props) {
+  const { portArea, currentBranchOffice } = useContext(Context);
+  const [records, setRecords] = useState([]);
+  useEffect(() => {
+    const loadRecords = async () => {
+      const { data = [] }
+        = await props.getEightWorkInfoScreenDangerWorkDataStatistics({
+          portArea,
+          corpinfoId: currentBranchOffice,
+        });
+      setRecords(data);
+    };
+    loadRecords();
+  }, []);
+  return (
+    <Panel title="危险作业数据统计" className="branch-office-danger-work__data">
+      <div className="branch-office-danger-work-data__content">
+        <div className="branch-office-danger-work-data__table">
+          <div className="branch-office-danger-work-data__row">
+            <div>危险作业类别</div>
+            <div>作业数</div>
+            <div>作业状态数</div>
+            <div>参与人员数</div>
+          </div>
+          <div className="branch-office-danger-work-data__body">
+            <Spin
+              spinning={
+                props.biStatistics
+                  .getEightWorkInfoScreenDangerWorkDataStatisticsLoading
+              }
+            >
+              <SeamlessScroll list={records} step={0.5}>
+                {records.map((item, index) => (
+                  <div
+                    key={index}
+                    className="branch-office-danger-work-data__row"
+                  >
+                    <div>{item.workTypeName}</div>
+                    <div>{item.workCount}</div>
+                    <div>{item.doingCount}</div>
+                    <div>{item.personCount}</div>
+                  </div>
+                ))}
+              </SeamlessScroll>
+            </Spin>
+          </div>
+        </div>
+      </div>
+    </Panel>
+  );
+}
+
+export default Connect([NS_BI_STATISTICS], true)(DangerWorkDataPanel);
diff --git a/src/pages/Container/Map/components/Content/branchOffice/WeiXian/DangerWorkDataPanel/index.less b/src/pages/Container/Map/components/Content/branchOffice/WeiXian/DangerWorkDataPanel/index.less
new file mode 100644
index 0000000..9d420b1
--- /dev/null
+++ b/src/pages/Container/Map/components/Content/branchOffice/WeiXian/DangerWorkDataPanel/index.less
@@ -0,0 +1,36 @@
+.branch-office-danger-work__data {
+  margin-top: 10px;
+  background: rgba(12, 28, 88, 0.4);
+}
+
+.branch-office-danger-work-data__content {
+  padding: 10px 15px;
+  border: 1px solid;
+  border-top: none;
+  border-image: linear-gradient(to bottom,
+  rgba(58, 122, 149, 0),
+  rgba(58, 122, 149, 1)) 1;
+}
+
+.branch-office-danger-work-data__table {
+  margin-top: 5px;
+}
+
+.branch-office-danger-work-data__body {
+  height: 145px;
+  overflow-y: hidden;
+}
+
+.branch-office-danger-work-data__row {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  margin-top: 5px;
+  color: #fff;
+  font-size: 12px;
+  text-align: center;
+  background: rgba(17, 51, 112, 0.8);
+}
+
+.branch-office-danger-work-data__row div {
+  padding: 5px;
+}
diff --git a/src/pages/Container/Map/components/Content/branchOffice/WeiXian/DepartmentWorkPanel/index.js b/src/pages/Container/Map/components/Content/branchOffice/WeiXian/DepartmentWorkPanel/index.js
new file mode 100644
index 0000000..685cb9d
--- /dev/null
+++ b/src/pages/Container/Map/components/Content/branchOffice/WeiXian/DepartmentWorkPanel/index.js
@@ -0,0 +1,92 @@
+import { Connect } from "@cqsjjb/jjb-dva-runtime";
+import { Spin } from "antd";
+import { useContext, useEffect, useState } from "react";
+import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
+import { NS_BI_STATISTICS } from "~/enumerate/namespace";
+import Panel from "~/pages/Container/Map/components/Content/branchOffice/Panel";
+import { Context } from "~/pages/Container/Map/js/context";
+import "./index.less";
+
+/** 负责合并两类部门作业统计并展示部门维度数据。 */
+function DepartmentWorkPanel(props) {
+  const { portArea, currentBranchOffice } = useContext(Context);
+  const [records, setRecords] = useState([]);
+  useEffect(() => {
+    const loadRecords = async () => {
+      const [{ data: eightWorkData = [] }, { data: keyProjectData = [] }]
+        = await Promise.all([
+          props.getEightWorkInfoScreenDepartmentStatistics({
+            portArea,
+            corpinfoId: currentBranchOffice,
+          }),
+          props.getKeyProjectLargeScreenDepartmentStatistics({
+            portArea,
+            corpinfoId: currentBranchOffice,
+          }),
+        ]);
+      const departmentMap = new Map(
+        keyProjectData.map(item => [
+          item.departmentId,
+          {
+            departmentName: item.departmentName,
+            fourNewHomeworkCount: item.fourNewHomeworkCount,
+            eightWorkCount: 0,
+            morePeopleCount: item.morePeopleCount,
+          },
+        ]),
+      );
+      eightWorkData.forEach((item) => {
+        const department = departmentMap.get(item.departmentId) || {
+          departmentName: item.departmentName,
+          fourNewHomeworkCount: 0,
+          eightWorkCount: 0,
+          morePeopleCount: 0,
+        };
+        department.eightWorkCount = item.workCount || 0;
+        departmentMap.set(item.departmentId, department);
+      });
+      setRecords([...departmentMap.values()]);
+    };
+    loadRecords();
+  }, []);
+  return (
+    <Panel
+      title="部门作业统计"
+      className="branch-office-danger-work__department"
+    >
+      <div className="branch-office-department-work__content">
+        <div className="branch-office-department-work__table">
+          <div className="branch-office-department-work__row">
+            <div>部门名称</div>
+            <div>四新作业</div>
+            <div>危险作业</div>
+            <div>三人以上作业数</div>
+          </div>
+          <div className="branch-office-department-work__body">
+            <Spin
+              spinning={
+                props.biStatistics
+                  .getKeyProjectLargeScreenDepartmentStatisticsLoading
+                  || props.biStatistics
+                    .getEightWorkInfoScreenDepartmentStatisticsLoading
+              }
+            >
+              <SeamlessScroll list={records} step={0.5}>
+                {records.map((item, index) => (
+                  <div className="branch-office-department-work__row" key={index}>
+                    <div>{item.departmentName}</div>
+                    <div>{item.fourNewHomeworkCount}</div>
+                    <div>{item.eightWorkCount}</div>
+                    <div>{item.morePeopleCount}</div>
+                  </div>
+                ))}
+              </SeamlessScroll>
+            </Spin>
+          </div>
+        </div>
+      </div>
+    </Panel>
+  );
+}
+
+export default Connect([NS_BI_STATISTICS], true)(DepartmentWorkPanel);
diff --git a/src/pages/Container/Map/components/Content/branchOffice/WeiXian/DepartmentWorkPanel/index.less b/src/pages/Container/Map/components/Content/branchOffice/WeiXian/DepartmentWorkPanel/index.less
new file mode 100644
index 0000000..a7b578e
--- /dev/null
+++ b/src/pages/Container/Map/components/Content/branchOffice/WeiXian/DepartmentWorkPanel/index.less
@@ -0,0 +1,36 @@
+.branch-office-danger-work__department {
+  margin-top: 10px;
+  background: rgba(12, 28, 88, 0.4);
+}
+
+.branch-office-department-work__content {
+  padding: 10px 15px;
+  border: 1px solid;
+  border-top: none;
+  border-image: linear-gradient(to bottom,
+  rgba(58, 122, 149, 0),
+  rgba(58, 122, 149, 1)) 1;
+}
+
+.branch-office-department-work__table {
+  margin-top: 5px;
+}
+
+.branch-office-department-work__body {
+  height: 145px;
+  overflow-y: hidden;
+}
+
+.branch-office-department-work__row {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  margin-top: 5px;
+  color: #fff;
+  font-size: 12px;
+  text-align: center;
+  background: rgba(17, 51, 112, 0.8);
+}
+
+.branch-office-department-work__row div {
+  padding: 5px;
+}
diff --git a/src/pages/Container/Map/components/Content/branchOffice/WeiXian/KeyWorkPanel/index.js b/src/pages/Container/Map/components/Content/branchOffice/WeiXian/KeyWorkPanel/index.js
new file mode 100644
index 0000000..525ba5b
--- /dev/null
+++ b/src/pages/Container/Map/components/Content/branchOffice/WeiXian/KeyWorkPanel/index.js
@@ -0,0 +1,133 @@
+import { Connect } from "@cqsjjb/jjb-dva-runtime";
+import { Spin } from "antd";
+import { useContext, useEffect, useState } from "react";
+import CountUp from "react-countup";
+import firstBackground from "~/assets/images/map_bi/content/bg9.png";
+import secondBackground from "~/assets/images/map_bi/content/bg10.png";
+import { NS_BI_STATISTICS } from "~/enumerate/namespace";
+import Panel from "~/pages/Container/Map/components/Content/branchOffice/Panel";
+import { Context } from "~/pages/Container/Map/js/context";
+import "./index.less";
+
+const defaultStatistics = [
+  {
+    title: (
+      <>
+        四新
+        <br />
+        作业
+      </>
+    ),
+    currentCount: 0,
+    doingCount: 0,
+    archivedCount: 0,
+  },
+  {
+    title: (
+      <>
+        危险
+        <br />
+        作业
+      </>
+    ),
+    currentCount: 0,
+    doingCount: 0,
+    archivedCount: 0,
+  },
+  {
+    title: (
+      <>
+        三人及
+        <br />
+        以上作业
+      </>
+    ),
+    currentCount: 0,
+    doingCount: 0,
+    archivedCount: 0,
+  },
+];
+
+/** 负责查询并展示各重点作业的执行状态。 */
+function KeyWorkPanel(props) {
+  const { portArea, currentBranchOffice } = useContext(Context);
+  const [statistics, setStatistics] = useState(defaultStatistics);
+  useEffect(() => {
+    const loadStatistics = async () => {
+      const [{ data: eightWorkData = {} }, { data: keyProjectData = {} }]
+        = await Promise.all([
+          props.getEightWorkInfoDangerWorkStatistics({
+            portArea,
+            corpinfoId: currentBranchOffice,
+          }),
+          props.getKeyProjectLargeScreenStatistics({
+            portArea,
+            corpinfoId: currentBranchOffice,
+          }),
+        ]);
+      setStatistics([
+        {
+          ...defaultStatistics[0],
+          currentCount: keyProjectData.fourNewHomeworkStartCount,
+          doingCount: keyProjectData.fourNewHomeworkDoingCount,
+          archivedCount: keyProjectData.fourNewHomeworkArchiveCount,
+        },
+        {
+          ...defaultStatistics[1],
+          currentCount: eightWorkData.doingCount,
+          doingCount: eightWorkData.workingCount,
+          archivedCount: eightWorkData.archivedCount,
+        },
+        {
+          ...defaultStatistics[2],
+          currentCount: keyProjectData.morePeopleStartCount,
+          doingCount: keyProjectData.morePeopleDoingCount,
+          archivedCount: keyProjectData.morePeopleArchiveCount,
+        },
+      ]);
+    };
+    loadStatistics();
+  }, []);
+  return (
+    <Panel title="重点作业" className="branch-office-danger-work__key-work">
+      <Spin
+        spinning={
+          props.biStatistics.getEightWorkInfoDangerWorkStatisticsLoading
+          || props.biStatistics.getKeyProjectLargeScreenStatisticsLoading
+        }
+      >
+        <div className="branch-office-key-work__list">
+          {statistics.map((item, index) => (
+            <div
+              key={index}
+              className="branch-office-key-work__item"
+              style={{
+                backgroundImage: `url(${index % 2 === 0 ? firstBackground : secondBackground})`,
+              }}
+            >
+              <div className="branch-office-key-work__title">{item.title}</div>
+              <div className="branch-office-key-work__statistics">
+                <Statistic label="当前作业数" value={item.currentCount} />
+                <Statistic label="作业中" value={item.doingCount} />
+                <Statistic label="已归档" value={item.archivedCount} />
+              </div>
+            </div>
+          ))}
+        </div>
+      </Spin>
+    </Panel>
+  );
+}
+
+function Statistic({ label, value }) {
+  return (
+    <div>
+      <div className="branch-office-key-work__label">{label}</div>
+      <div className="branch-office-key-work__value">
+        <CountUp end={+value} />
+      </div>
+    </div>
+  );
+}
+
+export default Connect([NS_BI_STATISTICS], true)(KeyWorkPanel);
diff --git a/src/pages/Container/Map/components/Content/branchOffice/WeiXian/KeyWorkPanel/index.less b/src/pages/Container/Map/components/Content/branchOffice/WeiXian/KeyWorkPanel/index.less
new file mode 100644
index 0000000..32d1a67
--- /dev/null
+++ b/src/pages/Container/Map/components/Content/branchOffice/WeiXian/KeyWorkPanel/index.less
@@ -0,0 +1,76 @@
+.branch-office-danger-work__key-work {
+  margin-top: 10px;
+  background: rgba(12, 28, 88, 0.4);
+}
+
+.branch-office-key-work__list {
+  padding: 10px 15px;
+  border: 1px solid;
+  border-top: none;
+  border-image: linear-gradient(to bottom,
+  rgba(58, 122, 149, 0),
+  rgba(58, 122, 149, 1)) 1;
+}
+
+.branch-office-key-work__item {
+  display: flex;
+  align-items: center;
+  padding: 12px 0;
+  margin-top: 5px;
+  color: #fff;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+.branch-office-key-work__item:first-child {
+  margin-top: 0;
+}
+
+.branch-office-key-work__title {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 65px;
+  height: 50px;
+  margin-left: 15px;
+  font-size: 14px;
+  font-weight: bold;
+  text-align: center;
+  border: 1px solid #167ce4;
+  border-radius: 4px;
+}
+
+.branch-office-key-work__statistics {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0 30px;
+  text-align: center;
+}
+
+.branch-office-key-work__label {
+  font-weight: bold;
+}
+
+.branch-office-key-work__value {
+  font-size: 16px;
+}
+
+.branch-office-key-work__statistics
+> div:nth-child(1)
+.branch-office-key-work__value {
+  color: #00aeff;
+}
+
+.branch-office-key-work__statistics
+> div:nth-child(2)
+.branch-office-key-work__value {
+  color: #ffa800;
+}
+
+.branch-office-key-work__statistics
+> div:nth-child(3)
+.branch-office-key-work__value {
+  color: #74cb3f;
+}
diff --git a/src/pages/Container/Map/components/Content/branchOffice/WeiXian/KeyWorkStatsPanel/index.js b/src/pages/Container/Map/components/Content/branchOffice/WeiXian/KeyWorkStatsPanel/index.js
new file mode 100644
index 0000000..4c7c925
--- /dev/null
+++ b/src/pages/Container/Map/components/Content/branchOffice/WeiXian/KeyWorkStatsPanel/index.js
@@ -0,0 +1,99 @@
+import { Connect } from "@cqsjjb/jjb-dva-runtime";
+import { Spin } from "antd";
+import { useContext, useEffect, useState } from "react";
+import CountUp from "react-countup";
+import fourNewIcon from "~/assets/images/map_bi/content/ico4.png";
+import dangerIcon from "~/assets/images/map_bi/content/ico5.png";
+import multiPersonIcon from "~/assets/images/map_bi/content/ico6.png";
+import { NS_BI_STATISTICS } from "~/enumerate/namespace";
+import Panel from "~/pages/Container/Map/components/Content/branchOffice/Panel";
+import { Context } from "~/pages/Container/Map/js/context";
+import "./index.less";
+
+const defaultStatistics = [
+  { title: "四新作业", icon: fourNewIcon, currentCount: 0, applyCount: 0 },
+  { title: "危险作业", icon: dangerIcon, currentCount: 0, applyCount: 0 },
+  {
+    title: "三人及以上作业",
+    icon: multiPersonIcon,
+    currentCount: 0,
+    applyCount: 0,
+  },
+];
+
+/** 负责查询并展示重点作业当前数量与申请数量。 */
+function KeyWorkStatsPanel(props) {
+  const { portArea, currentBranchOffice } = useContext(Context);
+  const [statistics, setStatistics] = useState(defaultStatistics);
+
+  useEffect(() => {
+    const loadStatistics = async () => {
+      const [{ data: eightWorkData = {} }, { data: keyProjectData = {} }]
+        = await Promise.all([
+          props.getEightWorkInfoDangerWorkStatistics({
+            portArea,
+            corpinfoId: currentBranchOffice,
+          }),
+          props.getKeyProjectLargeScreenStatistics({
+            portArea,
+            corpinfoId: currentBranchOffice,
+          }),
+        ]);
+      setStatistics([
+        {
+          ...defaultStatistics[0],
+          currentCount: keyProjectData.fourNewHomeworkStartCount,
+          applyCount: keyProjectData.fourNewHomeworkApplyCount,
+        },
+        {
+          ...defaultStatistics[1],
+          currentCount: eightWorkData.workingCount,
+          applyCount: eightWorkData.appliedCount,
+        },
+        {
+          ...defaultStatistics[2],
+          currentCount: keyProjectData.morePeopleStartCount,
+          applyCount: keyProjectData.morePeopleApplyCount,
+        },
+      ]);
+    };
+    loadStatistics();
+  }, []);
+
+  return (
+    <Panel title="重点作业统计" className="branch-office-danger-work__stats">
+      <Spin
+        spinning={
+          props.biStatistics.getEightWorkInfoDangerWorkStatisticsLoading
+          || props.biStatistics.getKeyProjectLargeScreenStatisticsLoading
+        }
+      >
+        <div className="branch-office-key-work-stats__list">
+          {statistics.map(item => (
+            <div
+              key={item.title}
+              className="branch-office-key-work-stats__item"
+            >
+              <div className="branch-office-key-work-stats__title">
+                {item.title}
+              </div>
+              <div className="branch-office-key-work-stats__icon">
+                <img src={item.icon} alt="" />
+              </div>
+              <div className="branch-office-key-work-stats__info">
+                当前作业数：
+                <CountUp end={+item.currentCount} />
+              </div>
+              <div className="branch-office-key-work-stats__info">
+                申请数：
+                <CountUp end={+item.applyCount} />
+              </div>
+            </div>
+          ))}
+        </div>
+      </Spin>
+    </Panel>
+  );
+}
+
+export default Connect([NS_BI_STATISTICS], true)(KeyWorkStatsPanel);
diff --git a/src/pages/Container/Map/components/Content/branchOffice/WeiXian/KeyWorkStatsPanel/index.less b/src/pages/Container/Map/components/Content/branchOffice/WeiXian/KeyWorkStatsPanel/index.less
new file mode 100644
index 0000000..8591fd5
--- /dev/null
+++ b/src/pages/Container/Map/components/Content/branchOffice/WeiXian/KeyWorkStatsPanel/index.less
@@ -0,0 +1,37 @@
+.branch-office-danger-work__stats {
+  background: rgba(12, 28, 88, 0.4);
+}
+
+.branch-office-key-work-stats__list {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 15px;
+  color: #fff;
+  border: 1px solid;
+  border-top: none;
+  border-image: linear-gradient(to bottom,
+  rgba(58, 122, 149, 0),
+  rgba(58, 122, 149, 1)) 1;
+}
+
+.branch-office-key-work-stats__title {
+  font-size: 14px;
+  font-weight: bold;
+  text-align: center;
+}
+
+.branch-office-key-work-stats__icon {
+  margin-top: 13px;
+  text-align: center;
+}
+
+.branch-office-key-work-stats__icon img {
+  width: 42px;
+  height: 48px;
+}
+
+.branch-office-key-work-stats__info {
+  margin-top: 5px;
+  font-size: 12px;
+}
diff --git a/src/pages/Container/Map/components/Content/branchOffice/WeiXian/index.js b/src/pages/Container/Map/components/Content/branchOffice/WeiXian/index.js
index c65eb19..b38d3b5 100644
--- a/src/pages/Container/Map/components/Content/branchOffice/WeiXian/index.js
+++ b/src/pages/Container/Map/components/Content/branchOffice/WeiXian/index.js
@@ -1,232 +1,18 @@
-import { Connect } from "@cqsjjb/jjb-dva-runtime";
-import { Spin } from "antd";
-import { useContext, useEffect, useState } from "react";
-import CountUp from "react-countup";
-import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
-
-import bg1 from "~/assets/images/map_bi/content/bg9.png";
-import bg2 from "~/assets/images/map_bi/content/bg10.png";
-import icon1 from "~/assets/images/map_bi/content/ico4.png";
-import icon2 from "~/assets/images/map_bi/content/ico5.png";
-import icon3 from "~/assets/images/map_bi/content/ico6.png";
-import { NS_BI_STATISTICS } from "~/enumerate/namespace";
-import Title from "~/pages/Container/Map/components/Content/branchOffice/Title";
-import { Context } from "~/pages/Container/Map/js/context";
-import "./index.less";
-
-function WeiXian(props) {
-  const { portArea, currentBranchOffice } = useContext(Context);
-
-  const [block1List, setBlock1List] = useState([
-    { title: "四新作业", count1: 0, count2: 0, icon: icon1 },
-    { title: "危险作业", count1: 0, count2: 0, icon: icon2 },
-    { title: "三人及以上作业", count1: 0, count2: 0, icon: icon3 },
-  ]);
-  const [block2List, setBlock2List] = useState([
-    { title: "四新<br/>作业", count1: 0, count2: 0, count3: 0 },
-    { title: "危险<br/>作业", count1: 0, count2: 0, count3: 0 },
-    { title: "三人及<br/>以上作业", count1: 0, count2: 0, count3: 0 },
-  ]);
-  const [block3List, setBlock3List] = useState([]);
-  const [block4List, setBlock4List] = useState([]);
-
-  const getBlock1List = async () => {
-    const [{ data: eightWorkData = [] }, { data: keyProjectData = [] }] = await Promise.all([
-      props.getEightWorkInfoDangerWorkStatistics({ portArea, corpinfoId: currentBranchOffice }),
-      props.getKeyProjectLargeScreenStatistics({ portArea, corpinfoId: currentBranchOffice }),
-    ]);
-    setBlock1List((prevState) => {
-      prevState[1].count1 = eightWorkData.workingCount;
-      prevState[1].count2 = eightWorkData.appliedCount;
-
-      prevState[0].count1 = keyProjectData.fourNewHomeworkStartCount;
-      prevState[0].count2 = keyProjectData.fourNewHomeworkApplyCount;
-
-      prevState[2].count1 = keyProjectData.morePeopleStartCount;
-      prevState[2].count2 = keyProjectData.morePeopleApplyCount;
-
-      return [...prevState];
-    });
-  };
-  const getBlock2List = async () => {
-    const [{ data: eightWorkData = [] }, { data: keyProjectData = [] }] = await Promise.all([
-      props.getEightWorkInfoDangerWorkStatistics({ portArea, corpinfoId: currentBranchOffice }),
-      props.getKeyProjectLargeScreenStatistics({ portArea, corpinfoId: currentBranchOffice }),
-    ]);
-    setBlock2List((prevState) => {
-      prevState[1].count1 = eightWorkData.doingCount;
-      prevState[1].count2 = eightWorkData.workingCount;
-      prevState[1].count3 = eightWorkData.archivedCount;
-
-      prevState[0].count1 = keyProjectData.fourNewHomeworkStartCount;
-      prevState[0].count2 = keyProjectData.fourNewHomeworkDoingCount;
-      prevState[0].count3 = keyProjectData.fourNewHomeworkArchiveCount;
-
-      prevState[2].count1 = keyProjectData.morePeopleStartCount;
-      prevState[2].count2 = keyProjectData.morePeopleDoingCount;
-      prevState[2].count3 = keyProjectData.morePeopleArchiveCount;
-
-      return [...prevState];
-    });
-  };
-  const getBlock3List = async () => {
-    const [{ data: eightWorkData = [] }, { data: keyProjectData = [] }] = await Promise.all([
-      props.getEightWorkInfoScreenDepartmentStatistics({ portArea, corpinfoId: currentBranchOffice }),
-      props.getKeyProjectLargeScreenDepartmentStatistics({ portArea, corpinfoId: currentBranchOffice }),
-    ]);
-    const departmentMap = new Map();
-
-    keyProjectData.forEach((item) => {
-      departmentMap.set(item.departmentId, {
-        departmentName: item.departmentName,
-        fourNewHomeworkCount: item.fourNewHomeworkCount,
-        eightWorkCount: 0,
-        morePeopleCount: item.morePeopleCount,
-      });
-    });
-    eightWorkData.forEach((item) => {
-      const department = departmentMap.get(item.departmentId) || {
-        departmentName: item.departmentName,
-        fourNewHomeworkCount: 0,
-        eightWorkCount: 0,
-        morePeopleCount: 0,
-      };
-      department.eightWorkCount = item.workCount || 0;
-      departmentMap.set(item.departmentId, department);
-    });
-    setBlock3List([...departmentMap.values()]);
-  };
-  const getBlock4List = async () => {
-    const { data = {} } = await props.getEightWorkInfoScreenDangerWorkDataStatistics({ portArea, corpinfoId: currentBranchOffice });
-    setBlock4List(data);
-  };
-
-  useEffect(() => {
-    getBlock1List();
-    getBlock2List();
-    getBlock3List();
-    getBlock4List();
-  }, []);
+import DangerWorkDataPanel from "./DangerWorkDataPanel";
+import DepartmentWorkPanel from "./DepartmentWorkPanel";
+import KeyWorkPanel from "./KeyWorkPanel";
+import KeyWorkStatsPanel from "./KeyWorkStatsPanel";
 
+/** 分公司危险作业模块仅负责按展示顺序组合业务区块。 */
+function WeiXian() {
   return (
-    <div className="branch_office_weixian">
-      <div className="block1">
-        <Title title="重点作业统计" />
-        <Spin spinning={props.biStatistics.getEightWorkInfoDangerWorkStatisticsLoading || props.biStatistics.getKeyProjectLargeScreenStatisticsLoading}>
-          <div className="options">
-            <div className="items">
-              {block1List.map((item, index) => (
-                <div className="item" key={index}>
-                  <div className="title">{item.title}</div>
-                  <div className="img">
-                    <img src={item.icon} alt="" />
-                  </div>
-                  <div className="info">
-                    <span>当前作业数：</span>
-                    <CountUp end={+item.count1}></CountUp>
-                  </div>
-                  <div className="info">
-                    <span>申请数：</span>
-                    <CountUp end={+item.count2}></CountUp>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
-        </Spin>
-      </div>
-      <div className="block2">
-        <Title title="重点作业" />
-        <Spin spinning={props.biStatistics.getEightWorkInfoDangerWorkStatisticsLoading || props.biStatistics.getKeyProjectLargeScreenStatisticsLoading}>
-          <div className="options">
-            <div className="items">
-              {
-                block2List.map((item, index) => (
-                  <div className="item" key={index} style={{ backgroundImage: `url(${index % 2 === 0 ? bg1 : bg2})` }}>
-                    <div className="title" dangerouslySetInnerHTML={{ __html: item.title }} />
-                    <div className="info">
-                      <div>
-                        <div className="label">当前作业数</div>
-                        <div className="value">
-                          <CountUp end={+item.count1}></CountUp>
-                        </div>
-                      </div>
-                      <div>
-                        <div className="label">作业中</div>
-                        <div className="value">
-                          <CountUp end={+item.count2}></CountUp>
-                        </div>
-                      </div>
-                      <div>
-                        <div className="label">已归档</div>
-                        <div className="value">
-                          <CountUp end={+item.count3}></CountUp>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                ))
-              }
-            </div>
-          </div>
-        </Spin>
-      </div>
-      <div className="block3">
-        <Title title="部门作业统计" />
-        <div className="options">
-          <div className="table">
-            <div className="tr">
-              <div className="td">部门名称</div>
-              <div className="td">四新作业</div>
-              <div className="td">危险作业</div>
-              <div className="td">三人以上作业数</div>
-            </div>
-            <div className="scroll">
-              <Spin spinning={props.biStatistics.getKeyProjectLargeScreenDepartmentStatisticsLoading || props.biStatistics.getEightWorkInfoScreenDepartmentStatisticsLoading}>
-                <SeamlessScroll list={block3List} step={0.5}>
-                  {block3List.map((item, index) => (
-                    <div key={index} className="tr">
-                      <div className="td">{item.departmentName}</div>
-                      <div className="td">{item.fourNewHomeworkCount}</div>
-                      <div className="td">{item.eightWorkCount}</div>
-                      <div className="td">{item.morePeopleCount}</div>
-                    </div>
-                  ))}
-                </SeamlessScroll>
-              </Spin>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div className="block4">
-        <Title title="危险作业数据统计" />
-        <div className="options">
-          <div className="table">
-            <div className="tr">
-              <div className="td">危险作业类别</div>
-              <div className="td">作业数</div>
-              <div className="td">作业状态数</div>
-              <div className="td">参与人员数</div>
-            </div>
-            <div className="scroll">
-              <Spin spinning={props.biStatistics.getEightWorkInfoScreenDangerWorkDataStatisticsLoading}>
-                <SeamlessScroll list={block4List} step={0.5}>
-                  {block4List.map((item, index) => (
-                    <div key={index} className="tr">
-                      <div className="td">{item.workTypeName}</div>
-                      <div className="td">{item.workCount}</div>
-                      <div className="td">{item.doingCount}</div>
-                      <div className="td">{item.personCount}</div>
-                    </div>
-                  ))}
-                </SeamlessScroll>
-              </Spin>
-            </div>
-          </div>
-        </div>
-      </div>
+    <div className="branch-office-danger-work">
+      <KeyWorkStatsPanel />
+      <KeyWorkPanel />
+      <DepartmentWorkPanel />
+      <DangerWorkDataPanel />
     </div>
   );
 }
 
-export default Connect([NS_BI_STATISTICS], true)(WeiXian);
+export default WeiXian;
diff --git a/src/pages/Container/Map/components/Content/branchOffice/WeiXian/index.less b/src/pages/Container/Map/components/Content/branchOffice/WeiXian/index.less
deleted file mode 100644
index 7ea05e7..0000000
--- a/src/pages/Container/Map/components/Content/branchOffice/WeiXian/index.less
+++ /dev/null
@@ -1,193 +0,0 @@
-.branch_office_weixian {
-  .block1 {
-    background-color: rgba(12, 28, 88, 0.4);
-
-    .options {
-      padding: 10px 15px;
-      border: 1px solid;
-      border-image: linear-gradient(to bottom,
-      rgba(58, 122, 149, 0),
-      rgba(58, 122, 149, 1)) 1;
-      border-top: none;
-
-      .items {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        color: #fff;
-
-        .item {
-          .title {
-            font-weight: bold;
-            font-size: 14px;
-            text-align: center;
-          }
-
-          .img {
-            margin-top: 13px;
-            text-align: center;
-
-            img {
-              width: 42px;
-              height: 48px;
-            }
-          }
-
-          .info {
-            margin-top: 5px;
-            font-size: 12px;
-          }
-        }
-      }
-    }
-  }
-
-  .block2 {
-    background-color: rgba(12, 28, 88, 0.4);
-    margin-top: 10px;
-
-    .options {
-      padding: 10px 15px;
-      border: 1px solid;
-      border-image: linear-gradient(to bottom,
-      rgba(58, 122, 149, 0),
-      rgba(58, 122, 149, 1)) 1;
-      border-top: none;
-
-      .items {
-        .item {
-          color: #fff;
-          display: flex;
-          align-items: center;
-          padding: 12px 0;
-          background-size: 100% 100%;
-          background-repeat: no-repeat;
-          margin-top: 5px;
-
-          &:first-child {
-            margin-top: 0;
-          }
-
-          .title {
-            margin-left: 15px;
-            border: 1px solid #167CE4;
-            border-radius: 4px;
-            width: 65px;
-            height: 50px;
-            text-align: center;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-weight: bold;
-            font-size: 14px;
-          }
-
-          .info {
-            margin: 0 30px;
-            flex: 1;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            text-align: center;
-
-            .label {
-              font-weight: bold;
-            }
-
-            .value {
-              font-size: 16px;
-            }
-
-            & > div {
-              &:nth-child(1) .value {
-                color: #00aeff;
-              }
-
-              &:nth-child(2) .value {
-                color: #ffa800;
-              }
-
-              &:nth-child(3) .value {
-                color: #74cb3f;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  .block3 {
-    background-color: rgba(12, 28, 88, 0.4);
-    margin-top: 10px;
-
-    .options {
-      padding: 10px 15px;
-      border: 1px solid;
-      border-image: linear-gradient(to bottom,
-      rgba(58, 122, 149, 0),
-      rgba(58, 122, 149, 1)) 1;
-      border-top: none;
-
-      .table {
-        margin-top: 5px;
-
-        .scroll {
-          height: 145px;
-          overflow-y: hidden;
-        }
-
-        .tr {
-          margin-top: 5px;
-          display: grid;
-          grid-template-columns: repeat(4, 1fr);
-          background-color: rgba(17, 51, 112, 0.8);
-
-          .td {
-            text-align: center;
-            font-size: 12px;
-            color: #fff;
-            padding: 5px;
-          }
-        }
-      }
-    }
-  }
-
-  .block4 {
-    background-color: rgba(12, 28, 88, 0.4);
-    margin-top: 10px;
-
-    .options {
-      padding: 10px 15px;
-      border: 1px solid;
-      border-image: linear-gradient(to bottom,
-      rgba(58, 122, 149, 0),
-      rgba(58, 122, 149, 1)) 1;
-      border-top: none;
-
-      .table {
-        margin-top: 5px;
-
-        .scroll {
-          height: 145px;
-          overflow-y: hidden;
-        }
-
-        .tr {
-          margin-top: 5px;
-          display: grid;
-          grid-template-columns: 1fr 1fr 1fr 1fr;
-          background-color: rgba(17, 51, 112, 0.8);
-
-          .td {
-            text-align: center;
-            font-size: 12px;
-            color: #fff;
-            padding: 5px;
-          }
-        }
-      }
-    }
-  }
-}