地图

src/pages/Container/Map/components/Content/branchOffice/IndexLeft/echarts.js

@@ -1,7 +1,7 @@
 import * as echarts from "echarts";
 
-export const initEcharts1 = (main1Ref, chartInstance, data) => {
+export const initEcharts1 = (mainRef, chartInstance, data) => {
-  chartInstance.current = echarts.init(main1Ref.current);
+  chartInstance.current = echarts.init(mainRef.current);
 
   const option = {
     color: ["#7d4449", "#009944", "#167ce4", "#00ffff"],

src/pages/Container/Map/components/Content/branchOffice/IndexLeft/index.js

@@ -241,7 +241,7 @@ function IndexLeft() {
       <div className="block3">
         <Title title="部门职责落实情况" />
         <div className="options">
-          <div ref={main1Ref} className="main1_node" style={{ width: "100%", height: "200px" }} />
+          <div ref={main1Ref} style={{ width: "100%", height: "200px" }} />
         </div>
       </div>
       <div className="block4">

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) => {
+export const initEcharts1 = (mainRef, chartInstance, data) => {
-  chartInstance.current = echarts.init(main1Ref.current);
+  chartInstance.current = echarts.init(mainRef.current);
 
   const option = {
     color: ["#F1C416", "#0AFCFF"],

src/pages/Container/Map/components/Content/branchOffice/IndexRight/index.js

@@ -95,7 +95,7 @@ function IndexRight() {
       <div className="block2">
         <Title title="封闭区域人员状态" />
         <div className="options">
-          <div ref={main1Ref} className="main1_node" style={{ width: "100%", height: "200px" }} />
+          <div ref={main1Ref} style={{ width: "100%", height: "200px" }} />
         </div>
       </div>
       <div className="block3">

src/pages/Container/Map/components/Content/branchOffice/MenJin/echarts.js

@@ -1,7 +1,7 @@
 import * as echarts from "echarts";
 
-export const initEcharts1 = (main1Ref, chartInstance, data) => {
+export const initEcharts1 = (mainRef, chartInstance, data) => {
-  chartInstance.current = echarts.init(main1Ref.current);
+  chartInstance.current = echarts.init(mainRef.current);
 
   const inData = data.map(item => Number.parseInt(item.IN));
   const outData = data.map(item => Number.parseInt(item.OUT));

src/pages/Container/Map/components/Content/branchOffice/MenJin/index.js

@@ -126,7 +126,7 @@ function MenJin() {
           )}
         />
         <div className="options">
-          <div ref={main1Ref} className="main1_node" style={{ width: "100%", height: "300px" }} />
+          <div ref={main1Ref} style={{ width: "100%", height: "300px" }} />
         </div>
       </div>
       <div className="block3">

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

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 (
+    <div className="branch_office_renyuan">
+      <div className="block1">
+        <Title title="报警类型" />
+        <div className="options">
+          <div ref={main1Ref} style={{ width: "100%", height: "250px" }} />
+        </div>
+      </div>
+      <div className="block2">
+        <Title title="封闭区域人员统计情况" />
+        <div className="options">
+          <div ref={main2Ref} style={{ width: "100%", height: "200px" }} />
+        </div>
+      </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>
+            <div className="scroll">
+              <SeamlessScroll list={block3List} step={0.5}>
+                {block3List.map((item, index) => (
+                  <div key={index} className="tr">
+                    <div className="td">{item.name}</div>
+                    <div className="td">{item.area}</div>
+                    <div className="td" style={{ color: item.onlineStatus === 1 ? "#1DB924" : "#fff" }}>{item.onlineStatus === 1 ? "在线" : "离线"}</div>
+                  </div>
+                ))}
+              </SeamlessScroll>
+            </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>
+            <div className="scroll">
+              <SeamlessScroll list={block4List} step={0.5}>
+                {block4List.map((item, index) => (
+                  <div key={index} className="tr">
+                    <div className="td">{item.alarmContent}</div>
+                    <div className="td">{item.personnelInvolved}</div>
+                    <div className="td" style={{ color: item.dispositionStatus === 1 ? "#1DB924" : item.dispositionStatus === 2 ? "#FF611C" : "#258FF1" }}>
+                      {item.dispositionStatus === 1 ? "已处置" : item.dispositionStatus === 2 ? "未处置" : "处置中"}
+                    </div>
+                  </div>
+                ))}
+              </SeamlessScroll>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default RenYuan;

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

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 <BranchMenJin />;
     if (bottomUtilsCurrentType === "fire")
       return <BranchXiaoFang />;
+    if (bottomUtilsCurrentType === "people")
+      return <BranchRenYuan />;
   };
 
   const renderBranchOfficeContentRight = () => {

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) => {
+export const initEcharts1 = (mainRef, chartInstance, data) => {
-  chartInstance.current = echarts.init(main1Ref.current);
+  chartInstance.current = echarts.init(mainRef.current);
 
   const inData = data.map(item => Number.parseInt(item.IN));
   const outData = data.map(item => Number.parseInt(item.OUT));

src/pages/Container/Map/components/Content/port/FengBi/index.js

@@ -134,7 +134,7 @@ function FengBi() {
           )}
         />
         <div className="options">
-          <div ref={main1Ref} className="main1_node" style={{ width: "100%", height: "300px" }} />
+          <div ref={main1Ref} style={{ width: "100%", height: "300px" }} />
         </div>
       </div>
       <div className="block3">

src/pages/Container/Map/components/Content/port/MenJin/echarts.js

@@ -1,7 +1,7 @@
 import * as echarts from "echarts";
 import { textFormatter } from "~/pages/Container/Map/js/utils";
 
-export const initEcharts1 = (main1Ref, chartInstance, data) => {
+export const initEcharts1 = (mainRef, chartInstance, data) => {
   const XAxisData = [];
   const seriesData1 = [];
   const seriesData2 = [];
@@ -12,7 +12,7 @@ export const initEcharts1 = (main1Ref, chartInstance, data) => {
     seriesData2.push(Number(e.CAR_OUT) + Number(e.PEOPLE_OUT));
   });
 
-  chartInstance.current = echarts.init(main1Ref.current);
+  chartInstance.current = echarts.init(mainRef.current);
 
   const option = {
     tooltip: {

src/pages/Container/Map/components/Content/port/MenJin/index.js

@@ -131,7 +131,7 @@ const MenJin = () => {
       <div className="block2">
         <Title title="进入进出统计" />
         <div className="options">
-          <div ref={main1Ref} className="main1_node" style={{ width: "100%", height: "300px" }} />
+          <div ref={main1Ref} style={{ width: "100%", height: "300px" }} />
         </div>
       </div>
 

src/pages/Container/Map/components/Content/port/MenJin/index.less

@@ -54,11 +54,6 @@
       rgba(58, 122, 149, 0),
       rgba(58, 122, 149, 1)) 1;
       border-top: none;
-
-      .main1_node {
-        width: 100%;
-        height: 300px;
-      }
     }
   }
 

src/pages/Container/Map/components/Content/port/WeiXian/echarts.js

@@ -1,6 +1,6 @@
 import * as echarts from "echarts";
 
-export const initEcharts1 = (main1Ref, chartInstance, data) => {
+export const initEcharts1 = (mainRef, chartInstance, data) => {
   const colors = [
     "29,128,219",
     "1,245,255",
@@ -59,7 +59,7 @@ export const initEcharts1 = (main1Ref, chartInstance, data) => {
     });
   }
 
-  chartInstance.current = echarts.init(main1Ref.current);
+  chartInstance.current = echarts.init(mainRef.current);
 
   const option = {
     tooltip: {

src/pages/Container/Map/components/Content/port/WeiXian/index.js

@@ -85,7 +85,7 @@ const WeiXian = () => {
       <div className="block2">
         <Title title="安全作业情况统计" />
         <div className="content">
-          <div ref={main1Ref} className="main_node_echart" style={{ width: "100%", height: "240px" }} />
+          <div ref={main1Ref} style={{ width: "100%", height: "240px" }} />
         </div>
       </div>