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

地图

master
LiuJiaNan 2026-01-09 16:40:53 +08:00
parent 937bfedba5
commit 5d1747b35b
6 changed files with 550 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

131
src/pages/Container/Map/components/Content/branchOffice/FengBi/echarts.js Normal file
View File

@ -0,0 +1,131 @@
import * as echarts from "echarts";
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));
const names = data.map(item => item.NAME);
const option = {
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: "10%",
bottom: "20%",
},
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(121,103,255,0.7)",
},
{
offset: 0,
color: "#7967FF",
},
]),
},
barWidth: "10",
data: inData,
},
{
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(255,198,124,0.7)",
},
{
offset: 0,
color: "#FFC67C",
},
]),
},
barWidth: "10",
data: outData,
},
],
};
chartInstance.current.setOption(option);
};

180
src/pages/Container/Map/components/Content/branchOffice/FengBi/index.js Normal file
View File

@ -0,0 +1,180 @@
import { useMount } from "ahooks";
import { useRef, useState } from "react";
import CountUp from "react-countup";
import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
import icon29 from "~/assets/images/map_bi/content/icon29.png";
import icon30 from "~/assets/images/map_bi/content/icon30.png";
import icon32 from "~/assets/images/map_bi/content/icon32.png";
import Title from "~/pages/Container/Map/components/Content/branchOffice/Title";
import { initEcharts1 } from "./echarts";
import "./index.less";
const block2OptionsNavList = ["人员", "车辆"];
const block3OptionsNavList = ["人员", "车辆"];
function FengBi() {
const [block1List, setBlock1List] = useState([
{ img: icon29, title: "堆场区", count1: 123, count2: 45 },
{ img: icon30, title: "码头区", count1: 141, count2: 43 },
]);
const [block2Index, setBlock2Index] = useState(0);
const [block3Index, setBlock3Index] = useState(0);
const [block3List, setBlock3List] = useState([
{ NAME: "零号门", IN: "0", OUT: "0" },
{ NAME: "一号门", IN: "15", OUT: "12" },
{ NAME: "二号门", IN: "8", OUT: "10" },
{ NAME: "三号门", IN: "22", OUT: "18" },
{ NAME: "四号门", IN: "5", OUT: "7" },
{ NAME: "五号门", IN: "30", OUT: "25" },
{ NAME: "六号门", IN: "12", OUT: "14" },
{ NAME: "七号门", IN: "18", OUT: "16" },
{ NAME: "八号门", IN: "9", OUT: "11" },
{ NAME: "九号门", IN: "25", OUT: "20" },
]);
const chartInstance = useRef(null);
const main1Ref = useRef(null);
useMount(() => {
initEcharts1(main1Ref, chartInstance, [
{ NAME: "零号门", IN: "0", OUT: "0" },
{ NAME: "一号门", IN: "15", OUT: "12" },
{ NAME: "二号门", IN: "8", OUT: "10" },
{ NAME: "三号门", IN: "22", OUT: "18" },
{ NAME: "四号门", IN: "5", OUT: "7" },
{ NAME: "五号门", IN: "30", OUT: "25" },
{ NAME: "六号门", IN: "12", OUT: "14" },
{ NAME: "七号门", IN: "18", OUT: "16" },
{ NAME: "八号门", IN: "9", OUT: "11" },
{ NAME: "九号门", IN: "25", OUT: "20" },
]);
return () => {
if (chartInstance.current) {
chartInstance.current.dispose();
chartInstance.current = null;
}
};
});
const block2OptionsClick = (index) => {
if (index === block2Index)
return;
setBlock2Index(index);
};
const block3OptionsClick = (index) => {
if (index === block3Index)
return;
setBlock3Index(index);
};
return (
<div className="branch_office_fengbi">
<div className="block1">
<Title title="封闭区域统计" />
<div className="options">
{
block1List.map((item, index) => (
<div className="option" key={index}>
<div className="img">
<img src={item.img} alt="" />
</div>
<div className="infos">
<div className="title">{item.title}</div>
<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>
<div className="corner-img top-left-img">
<img src={icon32} alt="" />
</div>
<div className="corner-img top-right-img">
<img src={icon32} alt="" />
</div>
<div className="corner-img bottom-left-img">
<img src={icon32} alt="" />
</div>
<div className="corner-img bottom-right-img">
<img src={icon32} alt="" />
</div>
</div>
))
}
</div>
</div>
<div className="block2">
<Title
title="封闭区域进出情况统计"
extra={(
<div className="tabs">
{block2OptionsNavList.map((item, index) => (
<div
key={index}
className={`tab ${index === block2Index ? "active" : ""}`}
onClick={() => block2OptionsClick(index)}
>
{item}
</div>
))}
</div>
)}
/>
<div className="options">
<div ref={main1Ref} style={{ width: "100%", height: "300px" }} />
</div>
</div>
<div className="block3">
<Title
title="封闭区域进出情况统计"
extra={(
<div className="tabs">
{block3OptionsNavList.map((item, index) => (
<div
key={index}
className={`tab ${index === block3Index ? "active" : ""}`}
onClick={() => block3OptionsClick(index)}
>
{item}
</div>
))}
</div>
)}
/>
<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.IN}</div>
<div className="td">{item.OUT}</div>
</div>
))}
</SeamlessScroll>
</div>
</div>
</div>
</div>
</div>
);
}
export default FengBi;

175
src/pages/Container/Map/components/Content/branchOffice/FengBi/index.less Normal file
View File

@ -0,0 +1,175 @@
.branch_office_fengbi {
.tabs-style() {
display: flex;
.tab {
background-color: rgba(36, 115, 239, 0.27);
padding: 2px 12px;
border-radius: 2px;
color: #fff;
font-size: 12px;
border: 1px solid #5d718c;
cursor: pointer;
&.active {
background-color: #2473ef;
border: 1px solid #2473ef;
}
}
}
.block1 {
background-color: rgba(12, 28, 88, 0.4);
.options {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px 6px;
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;
.option {
flex-basis: calc(50% - 10px);
background-color: rgba(1, 56, 154, 0.5);
border: 1px solid rgba(32, 145, 243, 0.36);
padding: 5px;
color: #fff;
display: flex;
align-items: center;
font-size: 12px;
position: relative;
.img {
img {
width: 57px;
height: 56px;
}
}
.infos {
margin-left: 20px;
text-align: center;
.title {
color: #0096FF;
font-size: 14px;
font-weight: bold;
}
.info {
margin-top: 10px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
}
.corner-img {
position: absolute;
width: 12px;
height: 12px;
&.top-left-img {
top: -9px;
left: -4px;
}
&.top-right-img {
transform: rotate(90deg);
top: -4px;
right: -9px;
}
&.bottom-left-img {
transform: rotate(270deg);
bottom: -4px;
left: -9px;
}
&.bottom-right-img {
transform: rotate(180deg);
bottom: -9px;
right: -4px;
}
}
}
}
}
.block2 {
background-color: rgba(12, 28, 88, 0.4);
margin-top: 10px;
.tabs {
.tabs-style();
}
.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-color: rgba(12, 28, 88, 0.4);
margin-top: 10px;
.tabs {
.tabs-style();
}
.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 {
.scroll {
height: 350px;
overflow-y: hidden;
.tr {
&:nth-child(odd) {
background-color: transparent;
}
}
}
.tr {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
background-color: rgba(42, 86, 158, 0.53);
.td {
text-align: center;
font-size: 12px;
color: #fff;
padding: 5px;
&.green {
color: #7ccf41;
}
&.yellow {
color: #ffcb05;
}
}
}
}
}
}
}

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

@ -5,6 +5,7 @@ import collapseMenuBg1 from "~/assets/images/map_bi/content/collapse_menu_bg1.pn
import collapseMenuBg2 from "~/assets/images/map_bi/content/collapse_menu_bg2.png";
import { branchOfficeUtilsList } from "~/pages/Container/Map/components/BottomUtils/branchOfficeUtilsList";
import { portUtilsList } from "~/pages/Container/Map/components/BottomUtils/portUtilsList";
import BranchFengBi from "~/pages/Container/Map/components/Content/branchOffice/FengBi";
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";
@ -67,6 +68,8 @@ function Content() {
return <BranchQiXiang />;
if (bottomUtilsCurrentType === "project")
return <BranchZhongDian />;
if (bottomUtilsCurrentType === "closedArea")
return <BranchFengBi />;
};
const renderBranchOfficeContentRight = () => {

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

@ -15,9 +15,9 @@ const block3OptionsNavList = ["人员", "车辆"];
function FengBi() {
const [block1List, setBlock1List] = useState([
{ img: icon29, title: "堆场区", count1: 0, count2: 0 },
{ img: icon30, title: "码头区", count1: 0, count2: 0 },
{ img: icon31, title: "翻控区", count1: 0, count2: 0 },
{ img: icon29, title: "堆场区", count1: 123, count2: 45 },
{ img: icon30, title: "码头区", count1: 141, count2: 43 },
{ img: icon31, title: "翻控区", count1: 114, count2: 54 },
]);
const [block2Index, setBlock2Index] = useState(0);
const [block3Index, setBlock3Index] = useState(0);
@ -74,7 +74,7 @@ function FengBi() {
return (
<div className="port_fengbi">
<div className="block1">
<Title title="口门统计" />
<Title title="封闭区域统计" />
<div className="options">
{
block1List.map((item, index) => (
@ -154,6 +154,7 @@ function FengBi() {
</div>
)}
/>
<div className="options">
<div className="table">
<div className="tr">
<div className="td">封闭区域名称</div>
@ -174,6 +175,7 @@ function FengBi() {
</div>
</div>
</div>
</div>
);
}

20
src/pages/Container/Map/components/Content/port/FengBi/index.less
View File

@ -113,6 +113,15 @@
.tabs {
.tabs-style();
}
.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 {
@ -125,9 +134,15 @@
.tabs-style();
}
.table {
padding: 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 {
.scroll {
height: 300px;
overflow-y: hidden;
@ -162,3 +177,4 @@
}
}
}
}