diff --git a/src/pages/Container/Map/components/Content/branchOffice/IndexRight/echarts.js b/src/pages/Container/Map/components/Content/branchOffice/IndexRight/echarts.js
index 1dbf4ae..c8fc37e 100644
--- a/src/pages/Container/Map/components/Content/branchOffice/IndexRight/echarts.js
+++ b/src/pages/Container/Map/components/Content/branchOffice/IndexRight/echarts.js
@@ -1,7 +1,7 @@
import * as echarts from "echarts";
-export const initEcharts1 = (main1Ref, chartInstance, data) => {
- chartInstance.current = echarts.init(main1Ref.current);
+export const initEcharts1 = (mainRef, chartInstance, data) => {
+ chartInstance.current = echarts.init(mainRef.current);
const option = {
color: ["#F1C416", "#0AFCFF"],
diff --git a/src/pages/Container/Map/components/Content/branchOffice/IndexRight/index.js b/src/pages/Container/Map/components/Content/branchOffice/IndexRight/index.js
index e002648..891ad5c 100644
--- a/src/pages/Container/Map/components/Content/branchOffice/IndexRight/index.js
+++ b/src/pages/Container/Map/components/Content/branchOffice/IndexRight/index.js
@@ -95,7 +95,7 @@ function IndexRight() {
diff --git a/src/pages/Container/Map/components/Content/branchOffice/RenYuan/echarts.js b/src/pages/Container/Map/components/Content/branchOffice/RenYuan/echarts.js
new file mode 100644
index 0000000..fbecd1d
--- /dev/null
+++ b/src/pages/Container/Map/components/Content/branchOffice/RenYuan/echarts.js
@@ -0,0 +1,163 @@
+import * as echarts from "echarts";
+
+export const initEcharts1 = (mainRef, chartInstance, data) => {
+ chartInstance.current = echarts.init(mainRef.current);
+
+ const option = {
+ tooltip: {
+ trigger: "item",
+ },
+ legend: {
+ left: "center",
+ top: "0",
+ textStyle: {
+ color: "#fff",
+ },
+ },
+ series: [{
+ color: ["#4198AF", "#285DF0", "#EA439D", "#F59FBC", "#FCA158", "#03D4B9", "#9FD224", "#13C871", "#FF611C"],
+ type: "pie",
+ radius: [0, "50%"],
+ center: ["50%", "60%"],
+ label: {
+ textStyle: {
+ color: "#fff",
+ },
+ },
+ data,
+ }],
+ };
+
+ chartInstance.current.setOption(option);
+};
+
+export const initEcharts2 = (mainRef, chartInstance, data) => {
+ chartInstance.current = echarts.init(mainRef.current);
+
+ const unitPersonnelData = data.map(item => Number.parseInt(item.unitPersonnelCount));
+ const relatedPartyPersonnelData = data.map(item => Number.parseInt(item.relatedPartyPersonnelCount));
+ const names = data.map(item => item.name);
+
+ const option = {
+ color: ["#1A64F8"],
+ tooltip: {
+ trigger: "axis",
+ axisPointer: {
+ type: "none",
+ },
+ },
+ legend: {
+ data: ["单位人员数", "相关方人员数"],
+ top: "0%",
+ right: "0%",
+ textStyle: {
+ color: "#fff",
+ fontSize: 14,
+ },
+ itemWidth: 12,
+ itemHeight: 10,
+ },
+ dataZoom: [
+ {
+ type: "slider",
+ height: 6,
+ bottom: "7%",
+ show: true,
+ start: 0,
+ end: 50,
+ handleSize: 5,
+ handleStyle: {
+ color: "#DCE2E8",
+ },
+ xAxisIndex: [0],
+ filterMode: "filter",
+ showDetail: false,
+ },
+ ],
+ grid: {
+ left: "10%",
+ right: "5%",
+ top: "15%",
+ bottom: "25%",
+ },
+ xAxis: [
+ {
+ type: "category",
+ data: names,
+ axisTick: {
+ alignWithLabel: true,
+ },
+ axisLabel: {
+ color: "#fff",
+ },
+ },
+ ],
+ yAxis: {
+ axisLine: {
+ show: false,
+ },
+ axisTick: {
+ show: false,
+ },
+ axisLabel: {
+ color: "#fff",
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ type: "dashed",
+ },
+ },
+ },
+ series: [
+ {
+ name: "单位人员数",
+ type: "bar",
+ backgroundStyle: {
+ color: "rgba(216, 229, 247, 0.55)",
+ borderRadius: [8, 8, 0, 0],
+ },
+ itemStyle: {
+ borderRadius: [12, 12, 0, 0],
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 1,
+ color: "rgba(84,173,147,0.2)",
+ },
+ {
+ offset: 0,
+ color: "#54AD93",
+ },
+ ]),
+ },
+ barWidth: "10",
+ data: unitPersonnelData,
+ },
+ {
+ name: "相关方人员数",
+ type: "bar",
+ backgroundStyle: {
+ color: "rgba(216, 229, 247, 0.55)",
+ borderRadius: [8, 8, 0, 0],
+ },
+ itemStyle: {
+ borderRadius: [12, 12, 0, 0],
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 1,
+ color: "rgba(72,117,231,0.2)",
+ },
+ {
+ offset: 0,
+ color: "#4875E7",
+ },
+ ]),
+ },
+ barWidth: "10",
+ data: relatedPartyPersonnelData,
+ },
+ ],
+ };
+
+ chartInstance.current.setOption(option);
+};
diff --git a/src/pages/Container/Map/components/Content/branchOffice/RenYuan/index.js b/src/pages/Container/Map/components/Content/branchOffice/RenYuan/index.js
new file mode 100644
index 0000000..120ed3f
--- /dev/null
+++ b/src/pages/Container/Map/components/Content/branchOffice/RenYuan/index.js
@@ -0,0 +1,142 @@
+import { useMount } from "ahooks";
+import { useRef, useState } from "react";
+import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
+import Title from "~/pages/Container/Map/components/Content/branchOffice/Title";
+import { initEcharts1, initEcharts2 } from "./echarts";
+import "./index.less";
+
+function RenYuan() {
+ const chart1Instance = useRef(null);
+ const main1Ref = useRef(null);
+ const chart2Instance = useRef(null);
+ const main2Ref = useRef(null);
+
+ const [block3List, setBlock3List] = useState([
+ { name: "张三", area: "A区", onlineStatus: 1 },
+ { name: "李四", area: "B区", onlineStatus: 1 },
+ { name: "王五", area: "C区", onlineStatus: 2 },
+ { name: "赵六", area: "D区", onlineStatus: 1 },
+ { name: "钱七", area: "E区", onlineStatus: 1 },
+ { name: "孙八", area: "F区", onlineStatus: 2 },
+ { name: "周九", area: "G区", onlineStatus: 1 },
+ { name: "吴十", area: "H区", onlineStatus: 1 },
+ { name: "郑一", area: "I区", onlineStatus: 2 },
+ { name: "王二", area: "J区", onlineStatus: 1 },
+ ]);
+ const [block4List, setBlock4List] = useState([
+ { alarmContent: "SOS紧急告警", personnelInvolved: "张三", dispositionStatus: 1 },
+ { alarmContent: "静止/滞留告警", personnelInvolved: "李四", dispositionStatus: 2 },
+ { alarmContent: "电子围栏越界", personnelInvolved: "王五", dispositionStatus: 1 },
+ { alarmContent: "非授权区域停留", personnelInvolved: "赵六", dispositionStatus: 3 },
+ { alarmContent: "设备及信号类告警", personnelInvolved: "钱七", dispositionStatus: 1 },
+ { alarmContent: "聚集告警", personnelInvolved: "孙八", dispositionStatus: 2 },
+ { alarmContent: "单独作业告警", personnelInvolved: "周九", dispositionStatus: 1 },
+ { alarmContent: "超员/缺员告警", personnelInvolved: "吴十", dispositionStatus: 3 },
+ { alarmContent: "SOS紧急告警", personnelInvolved: "郑一", dispositionStatus: 1 },
+ { alarmContent: "静止/滞留告警", personnelInvolved: "王二", dispositionStatus: 2 },
+ ]);
+
+ useMount(() => {
+ initEcharts1(main1Ref, chart1Instance, [
+ { name: "SOS紧急告警", value: "120" },
+ { name: "静止/滞留告警", value: "10" },
+ { name: "电子围栏越界", value: "10" },
+ { name: "非授权区域停留", value: "20" },
+ { name: "设备及信号类告警", value: "30" },
+ { name: "聚集告警", value: "40" },
+ { name: "单独作业告警", value: "50" },
+ { name: "超员/缺员告警", value: "60" },
+ { name: "已处置报警数/报警数", value: "10" },
+ ]);
+ initEcharts2(main2Ref, chart2Instance, [
+ { name: "A区", unitPersonnelCount: 120, relatedPartyPersonnelCount: 85 },
+ { name: "B区", unitPersonnelCount: 95, relatedPartyPersonnelCount: 70 },
+ { name: "C区", unitPersonnelCount: 80, relatedPartyPersonnelCount: 60 },
+ { name: "D区", unitPersonnelCount: 150, relatedPartyPersonnelCount: 110 },
+ { name: "E区", unitPersonnelCount: 75, relatedPartyPersonnelCount: 55 },
+ { name: "F区", unitPersonnelCount: 110, relatedPartyPersonnelCount: 80 },
+ { name: "G区", unitPersonnelCount: 65, relatedPartyPersonnelCount: 45 },
+ { name: "H区", unitPersonnelCount: 140, relatedPartyPersonnelCount: 100 },
+ { name: "I区", unitPersonnelCount: 90, relatedPartyPersonnelCount: 65 },
+ { name: "J区", unitPersonnelCount: 125, relatedPartyPersonnelCount: 90 },
+ ]);
+
+ return () => {
+ if (chart1Instance.current) {
+ chart1Instance.current.dispose();
+ chart1Instance.current = null;
+ }
+ if (chart2Instance.current) {
+ chart2Instance.current.dispose();
+ chart2Instance.current = null;
+ }
+ };
+ });
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ {block3List.map((item, index) => (
+
+
{item.name}
+
{item.area}
+
{item.onlineStatus === 1 ? "在线" : "离线"}
+
+
+
+
+
+
+
+
+
+
+
+
+ {block4List.map((item, index) => (
+
+
{item.alarmContent}
+
{item.personnelInvolved}
+
+ {item.dispositionStatus === 1 ? "已处置" : item.dispositionStatus === 2 ? "未处置" : "处置中"}
+
+
+
+
+
+
+
+ );
+}
+
+export default RenYuan;
diff --git a/src/pages/Container/Map/components/Content/branchOffice/RenYuan/index.less b/src/pages/Container/Map/components/Content/branchOffice/RenYuan/index.less
new file mode 100644
index 0000000..ce20015
--- /dev/null
+++ b/src/pages/Container/Map/components/Content/branchOffice/RenYuan/index.less
@@ -0,0 +1,106 @@
+.branch_office_renyuan {
+ .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;
+ }
+ }
+
+ .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;
+ }
+ }
+
+ .block3 {
+ background-image: linear-gradient(to bottom,
+ rgba(0, 0, 0, 0),
+ rgba(0, 0, 0, 0.8));
+ 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: 100px;
+ overflow-y: hidden;
+ }
+
+ .tr {
+ margin-top: 5px;
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ background-color: rgba(17, 51, 112, 0.8);
+
+ .td {
+ text-align: center;
+ font-size: 12px;
+ color: #fff;
+ padding: 5px;
+ }
+ }
+ }
+ }
+ }
+
+ .block4 {
+ background-image: linear-gradient(to bottom,
+ rgba(0, 0, 0, 0),
+ rgba(0, 0, 0, 0.8));
+ 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: 100px;
+ overflow-y: hidden;
+ }
+
+ .tr {
+ margin-top: 5px;
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ background-color: rgba(17, 51, 112, 0.8);
+
+ .td {
+ text-align: center;
+ font-size: 12px;
+ color: #fff;
+ padding: 5px;
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/src/pages/Container/Map/components/Content/index.js b/src/pages/Container/Map/components/Content/index.js
index df7cd0e..6fe12ec 100644
--- a/src/pages/Container/Map/components/Content/index.js
+++ b/src/pages/Container/Map/components/Content/index.js
@@ -8,6 +8,7 @@ import { portUtilsList } from "~/pages/Container/Map/components/BottomUtils/port
import BranchOfficeIndexLeft from "~/pages/Container/Map/components/Content/branchOffice/IndexLeft";
import BranchOfficeIndexRight from "~/pages/Container/Map/components/Content/branchOffice/IndexRight";
import BranchMenJin from "~/pages/Container/Map/components/Content/branchOffice/MenJin";
+import BranchRenYuan from "~/pages/Container/Map/components/Content/branchOffice/RenYuan";
import BranchWeiXian from "~/pages/Container/Map/components/Content/branchOffice/WeiXian";
import BranchXiaoFang from "~/pages/Container/Map/components/Content/branchOffice/XiaoFang";
import IndexInfo from "~/pages/Container/Map/components/Content/IndexInfo";
@@ -58,6 +59,8 @@ function Content() {
return
;
if (bottomUtilsCurrentType === "fire")
return
;
+ if (bottomUtilsCurrentType === "people")
+ return
;
};
const renderBranchOfficeContentRight = () => {
diff --git a/src/pages/Container/Map/components/Content/port/FengBi/echarts.js b/src/pages/Container/Map/components/Content/port/FengBi/echarts.js
index 3d9e96d..1bc1528 100644
--- a/src/pages/Container/Map/components/Content/port/FengBi/echarts.js
+++ b/src/pages/Container/Map/components/Content/port/FengBi/echarts.js
@@ -1,7 +1,7 @@
import * as echarts from "echarts";
-export const initEcharts1 = (main1Ref, chartInstance, data) => {
- chartInstance.current = echarts.init(main1Ref.current);
+export const initEcharts1 = (mainRef, chartInstance, data) => {
+ chartInstance.current = echarts.init(mainRef.current);
const inData = data.map(item => Number.parseInt(item.IN));
const outData = data.map(item => Number.parseInt(item.OUT));
diff --git a/src/pages/Container/Map/components/Content/port/FengBi/index.js b/src/pages/Container/Map/components/Content/port/FengBi/index.js
index 23e3b8b..219a466 100644
--- a/src/pages/Container/Map/components/Content/port/FengBi/index.js
+++ b/src/pages/Container/Map/components/Content/port/FengBi/index.js
@@ -134,7 +134,7 @@ function FengBi() {
)}
/>