zcloud_gbs
/
zcloud-gbs-bi-react
14
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

地图

master
LiuJiaNan 2026-01-09 11:41:52 +08:00
parent 0df5d9cca7
commit 1985d615ab
17 changed files with 432 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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: ["#7d4449", "#009944", "#167ce4", "#00ffff"],

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

@ -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">

4
src/pages/Container/Map/components/Content/branchOffice/IndexRight/echarts.js
View File

@ -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"],

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

@ -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">

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

@ -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));

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

@ -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">

163
src/pages/Container/Map/components/Content/branchOffice/RenYuan/echarts.js Normal file
View File

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

142
src/pages/Container/Map/components/Content/branchOffice/RenYuan/index.js Normal file
View File

@ -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;

106
src/pages/Container/Map/components/Content/branchOffice/RenYuan/index.less Normal file
View File

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

3
src/pages/Container/Map/components/Content/index.js
View File

@ -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 = () => {

4
src/pages/Container/Map/components/Content/port/FengBi/echarts.js
View File

@ -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));

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

@ -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">

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

@ -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: {

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

@ -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>

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

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

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

@ -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: {

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

@ -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>